jili2/application/admin/view/cockpit_statistics/index.html

{extend name="common/common2" /}
{block name="main"}
<link rel="stylesheet" href="/admin/css/cockpit.css">


<style>
    .fullscreen{
        width: 60px;
        height: 60px;
        font-size: 40px;
        position: fixed;
        z-index: 100000000000000000000;
        right: 50px;
        top: 50px;
        color: #ffffff;
        cursor: pointer;
    }
    .main2-content .main2-content-fore .daily-box{
        width: 100%;
        height: 32.4vh;
        padding-left: 1vw;
        padding-right: 1vw;
    }
    .main2-content .main2-content-fore .daily-box .check-bl{
        width: 90%;
        height: 8vh;
        border: 2px solid #165B9F;
        border-radius: 4px;
        margin-top: 2vh;
        padding: 3px 0;
    }
    .main2-content .main2-content-fore .daily-box .check-bl .left{
        width: 30%;
        height: 100%;
        /*display: inline-block;*/
        float: left;
        border-right: 2px solid #165B9F;
        text-align: center;
        color: #0BE2DF;
        display: flex;
        justify-content: center;
        align-items: center;

    }
    .main2-content .main2-content-fore .daily-box .check-bl .right{
        width: 70%;
        height: 100%;
        /*display: inline-block;*/
        float: right;
        text-align: center;
        color: #0BE2DF;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .main2-content .main2-content-fore .daily-box .check-bl .right .bl{
        font-size: 18px;
    }

    .main2-content .main2-content-fore .daily-box .check-bl .right .nums{
        font-size: 14px;
    }

    .main2-content .main2-content-fore .daily-box .check-nums{
        width: 90%;
        height: 8vh;
        border: 2px solid #165B9F;
        border-radius: 4px;
        margin-top: 1vh;
        padding: 3px 0;
    }

    .main2-content .main2-content-fore .daily-box .check-avg{
        width: 90%;
        height: 8vh;
        border: 2px solid #165B9F;
        border-radius: 4px;
        margin-top: 1vh;
        padding: 3px 0;
    }

    .main2-content .main2-content-fore .daily-box .check-nums .left{
        width: 30%;
        height: 100%;
        display: inline-block;
        float: left;
        border-right: 2px solid #165B9F;
        text-align: center;
        color: #0BE2DF;
        padding-top: 1vh;
    }
    .main2-content .main2-content-fore .daily-box .check-nums .right{
        width: 70%;
        height: 100%;
        /*display: inline-block;*/
        float: right;
        text-align: center;
        color: #0BE2DF;
        padding-top: 1%;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main2-content .main2-content-fore .daily-box .check-avg .left{
        width: 30%;
        height: 100%;
        /*display: inline-block;*/
        float: left;
        border-right: 2px solid #165B9F;
        text-align: center;
        color: #0BE2DF;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main2-content .main2-content-fore .daily-box .check-avg .right{
        width: 70%;
        height: 100%;
        /*display: inline-block;*/
        float: right;
        text-align: center;
        color: #0BE2DF;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

</style>
<div class="container1">
    <div class="main">
        <div class="main1">
            <div class="main1-header">
                领导驾驶舱
            </div>
        </div>
        <div class="main2">
            <div class="main2-left">
                <div class="main2-left-top">
                    <div class="work-type-mode">
                        <select name="" id="workTypeMode1">
                            <option value="1">维修</option>
                            <option value="2">保洁</option>
                            <option value="3">运送</option>
                            <option value="4">应急</option>
                        </select>
                    </div>
                    <div class="main2-left-top-body" id="workMode1">

                    </div>
                    <div class="main2-left-top-bottom">
                        <div class="one">
                            <div class="kuai color1"></div>
                            <span>总完成率</span>
                        </div>
                        <div class="one">
                            <div class="kuai color2"></div>
                            <span>主动完成率</span>
                        </div>
                        <div class="one">
                            <div class="kuai color3"></div>
                            <span>被动完成率</span>
                        </div>
                    </div>
                </div>
                <div class="main2-left-bottom">
                    <div class="main2-left-bottom-header" >
                        <span>本月工单平均响应时间</span>
                        <div class="work-type-mode">
                            <select name="" id="workTypeMode2">
                                <option value="1">维修</option>
                                <option value="2">保洁</option>
                                <option value="3">运送</option>
                                <option value="4">应急</option>
                            </select>
                        </div>
                    </div>
                    <div class="main2-left-bottom-body">
                        <div class="response-time">
                            <div class="min"><text id="min">0</text><span>hour</span></div>
                            <div class="img">
                                <img src="/admin/img/tu1.png" alt="">
                            </div>
                            <div class="comparison" id="comparison">较上月+0hour</div>
                        </div>

                    </div>
                </div>

            </div>
            <div class="main2-content">
                <div class="main2-content-one">
                    <div class="main2-left-bottom-header">
                        <span>本月维修类型工单所用工时分析</span>
                    </div>
                    <div class="main2-content-one-body" id="yearTodo">
                    </div>
                </div>
                <div class="main2-content-two">
                    <div class="main2-left-bottom-header">
                        <span>专项任务完成数量</span>
                    </div>
                    <div class="main2-content-two-body" id="cleanerTask"></div>
                </div>
                <div class="main2-content-three">
                    <div class="main2-left-bottom-header">
                        <span>本月耗材消耗分析</span>
                    </div>
                    <div class="main2-content-three-body" id="mateGoods">
                    </div>
                </div>
                <div class="main2-content-fore">
                    <div class="main2-left-bottom-header">
                        <span>日常工作数据分析</span>
                    </div>
                    <div class="daily-box">
                        <div class="check-bl">
                            <div class="left">
                                近3个月<br/>检查率
                            </div>
                            <div class="right">
                                <div style="width: 100%; height: auto">
                                    <text class="bl" id="daily-count1">0%</text><br/>
                                    <text class="nums" id="daily-count2">0/0</text>
                                </div>
                            </div>

                        </div>
                        <div class="check-nums">
                            <div class="left">
                                本月<br/>检查数量
                            </div>
                            <div class="right" id="daily-count3">0</div>
                        </div>

                        <div class="check-avg">
                            <div class="left">
                                本月<br/>检查平均分
                            </div>
                            <div class="right" id="daily-count4">0</div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="main2-right">
                <div class="main2-right-one">
                    <div class="main2-left-bottom-header">
                        <span>用户数据分析</span>
                    </div>
                    <div class="main2-right-one-body" id="orgUser"></div>
                </div>
                <div class="main2-right-two">
                    <div class="main2-left-bottom-header">
                        <span>医废信息</span>
                    </div>
                    <div class="main2-right-two-body">
                        <div class="waste">
                            <div class="title" id="waste-title">本月医废收集量</div>
                            <div class="kg" id="waste-weight">0kg</div>
                            <div class="line"></div>
                            <div class="hint">功能未应用-灰色<br/>
                                连续72小时没有数据-红色<br/>
                                功能应用且连续72小时有数据-绿色</div>
                        </div>

                    </div>
                </div>
            </div>

        </div>

    </div>

</div>


<div class="fullscreen">
    <i class="glyphicon glyphicon-fullscreen" id="fullscreenbtn" onclick="fullScreen(this)"></i>
</div>

{/block}
{block name="script"}
<script src="/static/echarts-5.2.2.js"></script>
<script>
    $(window).resize(function(){
        location.reload()
        $('#fullscreenbtn').show();
        changeZoom();
    });

    function changeZoom() {
        var wb = $(window).width()/1920;
        var hb = $(window).height()/1080;
        if(wb >= hb){
            $('body').css({
                'zoom': hb,
            });
        }else{
            $('body').css({
                'zoom': wb,
            });
        }
    }

    function fullScreen(_self){
        var el = document.documentElement;
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;

        //typeof rfs != "undefined" && rfs
        if (rfs) {
            rfs.call(el);
        } else if (typeof window.ActiveXObject !== "undefined") {
            //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript != null) {
                wscript.SendKeys("{F11}");
            }
        }
    }


    $(function () {
        var mode1 = $('#workTypeMode1').val()
        var url = '{:url("CockpitStatistics/todoCompletion")}';
        var name = '本月-工单完成率';
        $.post(url,{mode:mode1},function (res) {
            if(res.code == 1) {
                var lists = res.data;
                var  option = {

                    tooltip: {
                        show:true,
                        trigger: 'item',
                        formatter: "{a} : {d}%"
                    },
                    color:['#3170FF','#FFD131','#F96E33'],

                    legend: {
                        // top: 'bottom',
                        // bottom:0,
                        y:'bottom',
                        orient: 'vertical',
                        hoverAnimation: false, //鼠标移入变大
                        itemHeight: 15,//图例的高度
                        itemGap:12,//图例之间的间距
                        //图例的名字需要和饼图的name一致，才会显示图例
                        // data:lists.title,
                        textStyle: { //图例文字的样式
                            color: '#AAC9F7',
                            fontSize: 8
                        },
                    },
                    series: [
                        {
                            name:lists.title[0],
                            type:'pie',
                            radius: ['65%', '75%'],
                            hoverAnimation:false,
                            //环的位置
                            label: {
                                show: true,
                                position: 'center',
                                textStyle:{color:'#0BE2DF',fontSize:"10"},
                                formatter:function (){
                                    return name.split('-').join("\n");
                                },
                                normal: { // 显示的位置
                                    // position: 'inner'
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },

                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                }
                            },
                            data:[
                                {
                                    // name: lists.title[0],
                                    value:lists.count1.bl1, //需要显示的数据

                                },
                                {
                                    value:lists.count1.bl2,
                                    //不需要显示的数据，颜色设置成和背景一样
                                    itemStyle: {
                                        normal: {
                                            color: '#184997'
                                        }
                                    }
                                },

                            ]
                        },
                        {
                            name:lists.title[1],
                            type:'pie',
                            radius: ['52%', '60%'],
                            hoverAnimation: false, //鼠标移入变大
                            label: {
                                show: true,
                                position: 'center',
                                formatter:function (){
                                    return name.split('-').join("\n");
                                },
                                // normal: {
                                //     position: 'inner'
                                // }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                }
                            },
                            data:[
                                {
                                    // name: lists.title[1],
                                    value:lists.count2.bl1,
                                    itemStyle: {
                                        normal: {
                                            color: '#FFD131'
                                        }
                                    }
                                },
                                {
                                    value:lists.count2.bl2,
                                    itemStyle: {
                                        normal: {
                                            color: '#184997'
                                        }
                                    }
                                }
                            ]
                        },
                        {
                            name:lists.title[2],
                            type:'pie',
                            radius: ['42%', '48%'],
                            hoverAnimation:false,
                            label: {
                                show: true,
                                position: 'center',
                                formatter:function (){
                                    return name.split('-').join("\n");
                                },
                                // normal: {
                                //     position: 'inner'
                                // }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                }
                            },
                            data:[
                                {
                                    // name: lists.title[2],
                                    value:lists.count3.bl1,
                                    itemStyle: {
                                        normal: {
                                            color: '#F96E33'
                                        }
                                    }
                                },
                                {
                                    value:lists.count3.bl2,
                                    itemStyle: {
                                        normal: {
                                            color: '#184997'
                                        }
                                    }
                                }
                            ]
                        },
                    ]
                };
                var myChart = echarts.init(document.getElementById('workMode1'));
                myChart.setOption(option);
            }
        })

        // workTypeMode2
        var mode2 = $('#workTypeMode2').val()
        var url2 = '{:url("CockpitStatistics/todoResponseTime")}';
        $.post(url2,{mode:mode2},function (res) {
            if(res.code == 1) {
                var lists = res.data;
                $('#min').html(lists.count);
                if(lists.count2 >= 0){
                    $('#comparison').html('较上月+'+lists.count2+'hour');
                }else {
                    $('#comparison').html('较上月'+lists.count2+'hour');
                }
            }
        })

        //yearTodo
        var url3 = '{:url("CockpitStatistics/repairTodo")}';
        $.post(url3,{},function (res) {
            if(res.code == 1) {
                var lists = res.data;
                option = {
                    legend: {
                        top: 'bottom',
                        left: 'center',
                        hoverAnimation:false,
                        textStyle: { //图例文字的样式
                            color: '#AAC9F7',
                            // fontSize: 16
                        },
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c}小时 ({d}%)'
                    },
                    series: [
                        {
                            name: 'Radius Mode',
                            type: 'pie',
                            radius: [20, 60],
                            // center: ['25%', '50%'],
                            roseType: 'radius',
                            itemStyle: {
                                borderRadius: 5
                            },
                            label: {
                                show: false
                            },
                            emphasis: {
                                label: {
                                    show: false
                                }
                            },
                            data: lists,
                        },

                    ],
                };
                var myChart = echarts.init(document.getElementById('yearTodo'));
                myChart.setOption(option);
            }
        })
        //cleanerTask
        var url4 =  '{:url("CockpitStatistics/cleanTypeTask")}';
        $.post(url4,{},function (res) {
            if(res.code == 1) {
                var lists = res.data;
                var option;

                option = {
                    legend: {
                        left: '10',
                        top: 'bottom',
                        textStyle:{
                            color:'#88B1D0',
                            fontSize: 12,
                        },
                    },
                    xAxis: {
                        type: 'category',
                        data: lists.title,
                        axisLabel: {
                            show: true,
                            interval:0,
                            textStyle: {
                                color: '#fff'
                            },
                            axisTick: {
                                show:false,
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: '#20A3F7',//左边线的颜色
                                width:'1'//坐标线的宽度
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            },
                        },
                        splitLine:{
                            show:false     //去掉网格线
                        },
                        axisLine: {
                            lineStyle: {

                                type: 'solid',
                                color: '#20A3F7',//左边线的颜色
                                // width: '1'//坐标线的宽度
                            }
                        }
                    },
                    series: [{
                        data: lists.list,
                        type: 'bar',
                        barWidth :15,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,      //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {     //数值样式
                                        color: '#fff',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    }],

                };

                var myChart = echarts.init(document.getElementById('cleanerTask'));
                myChart.setOption(option);
            }
        })
        //mateGoods
        var url5 =  '{:url("CockpitStatistics/mateGoods")}';
        $.post(url5,{},function (res) {
            if(res.code == 1) {
                var lists = res.data;
                var option;

                option = {
                    legend: {
                        left: '10',
                        top: 'bottom',
                        textStyle:{
                            color:'#88B1D0',
                            fontSize: 12,
                        },
                    },
                    xAxis: {
                        type: 'category',
                        data: lists.title,
                        axisLabel: {
                            show: true,
                            interval:0,
                            textStyle: {
                                color: '#fff'
                            },
                            axisTick: {
                                show:false,
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: '#20A3F7',//左边线的颜色
                                width:'1'//坐标线的宽度
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            },
                        },
                        splitLine:{
                            show:false     //去掉网格线
                        },
                        axisLine: {
                            lineStyle: {

                                type: 'solid',
                                color: '#20A3F7',//左边线的颜色
                                // width: '1'//坐标线的宽度
                            }
                        }
                    },
                    series: [{
                        data: lists.list,
                        type: 'bar',
                        barWidth :15,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,      //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {     //数值样式
                                        color: '#fff',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    }],

                };

                var myChart = echarts.init(document.getElementById('mateGoods'));
                myChart.setOption(option);
            }
        })

        //orgUser
        var url6 = '{:url("CockpitStatistics/orgUser")}';
        $.post(url6,{},function (res) {
            if(res.code == 1) {
                var lists = res.data;
                option = {
                    legend: {
                        top: 'bottom',
                        left: 'center',
                        textStyle: { //图例文字的样式
                            color: '#AAC9F7',
                            // fontSize: 16
                        },
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c}人 ({d}%)'
                    },

                    series: [
                        {
                            name: 'Radius Mode',
                            type: 'pie',
                            radius: [20, 60],
                            // center: ['25%', '50%'],
                            roseType: 'radius',
                            hoverAnimation:false,
                            itemStyle: {
                                borderRadius: 5
                            },
                            label: {
                                show: false
                            },
                            emphasis: {
                                label: {
                                    show: false
                                }
                            },
                            data: lists,
                        },

                    ],

                };
                var myChart = echarts.init(document.getElementById('orgUser'));
                myChart.setOption(option);
            }
        })
        //title
        var url7 = '{:url("CockpitStatistics/wasteCount")}';
        $.post(url7,{},function (res) {
            if(res.code == 1) {
                var lists = res.data;
                $('#waste-weight').html(lists.count+'kg');
                if(lists.type == 1){
                    $('#waste-title').css('color','#435188');
                    $('#waste-weight').css('color','#435188');
                }
                if(lists.type == 2){
                    $('#waste-title').css('color','#DC1866');
                    $('#waste-weight').css('color','#DC1866');
                }
                if(lists.type == 3){
                    $('#waste-title').css('color','#0BE2DF');
                    $('#waste-weight').css('color','#0BE2DF');
                }
            }
        })


        var url8 = '{:url("CockpitStatistics/dailyDataCount")}';
        $.post(url8,{},function (res) {
            if(res.code == 1) {
                var count = res.data;
                $('#daily-count1').html(count.bl);
                $('#daily-count2').html(count.count2);
                $('#daily-count3').html(count.count3);
                $('#daily-count4').html(count.count4);

            }
        })
    });
    $('#workTypeMode1').change(function (){
        var mode = $('#workTypeMode1').val()
        var url = '{:url("CockpitStatistics/todoCompletion")}';
        var name = '本月-工单完成率';
        $.post(url,{mode:mode},function (res) {
            if(res.code == 1) {
                var lists = res.data;
                var  option = {

                    tooltip: {
                        show:true,
                        trigger: 'item',
                        formatter: "{a} : {d}%"
                    },
                    color:['#3170FF','#FFD131','#F96E33'],

                    legend: {
                        // top: 'bottom',
                        // bottom:0,
                        y:'bottom',
                        orient: 'vertical',
                        hoverAnimation: false, //鼠标移入变大
                        itemHeight: 15,//图例的高度
                        itemGap:12,//图例之间的间距
                        //图例的名字需要和饼图的name一致，才会显示图例
                        // data:lists.title,
                        textStyle: { //图例文字的样式
                            color: '#AAC9F7',
                            fontSize: 8
                        },
                    },
                    series: [
                        {
                            name:lists.title[0],
                            type:'pie',
                            radius: ['65%', '75%'],
                            hoverAnimation:false,
                            //环的位置
                            label: {
                                show: true,
                                position: 'center',
                                textStyle:{color:'#0BE2DF',fontSize:"10"},
                                formatter:function (){
                                    return name.split('-').join("\n");
                                },
                                normal: { // 显示的位置
                                    // position: 'inner'
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },

                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                }
                            },
                            data:[
                                {
                                    // name: lists.title[0],
                                    value:lists.count1.bl1, //需要显示的数据

                                },
                                {
                                    value:lists.count1.bl2,
                                    //不需要显示的数据，颜色设置成和背景一样
                                    itemStyle: {
                                        normal: {
                                            color: '#184997'
                                        }
                                    }
                                },

                            ]
                        },
                        {
                            name:lists.title[1],
                            type:'pie',
                            radius: ['52%', '60%'],
                            hoverAnimation: false, //鼠标移入变大
                            label: {
                                show: true,
                                position: 'center',
                                formatter:function (){
                                    return name.split('-').join("\n");
                                },
                                // normal: {
                                //     position: 'inner'
                                // }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                }
                            },
                            data:[
                                {
                                    // name: lists.title[1],
                                    value:lists.count2.bl1,
                                    itemStyle: {
                                        normal: {
                                            color: '#FFD131'
                                        }
                                    }
                                },
                                {
                                    value:lists.count2.bl2,
                                    itemStyle: {
                                        normal: {
                                            color: '#184997'
                                        }
                                    }
                                }
                            ]
                        },
                        {
                            name:lists.title[2],
                            type:'pie',
                            radius: ['42%', '48%'],
                            hoverAnimation:false,
                            label: {
                                show: true,
                                position: 'center',
                                formatter:function (){
                                    return name.split('-').join("\n");
                                },
                                // normal: {
                                //     position: 'inner'
                                // }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                }
                            },
                            data:[
                                {
                                    // name: lists.title[2],
                                    value:lists.count3.bl1,
                                    itemStyle: {
                                        normal: {
                                            color: '#F96E33'
                                        }
                                    }
                                },
                                {
                                    value:lists.count3.bl2,
                                    itemStyle: {
                                        normal: {
                                            color: '#184997'
                                        }
                                    }
                                }
                            ]
                        },
                    ]
                };
                var myChart = echarts.init(document.getElementById('workMode1'));
                myChart.setOption(option);
            }
        })

    })

    $('#workTypeMode2').change(function (){
        var mode2 = $('#workTypeMode2').val()
        var url2 = '{:url("CockpitStatistics/todoResponseTime")}';
        $.post(url2,{mode:mode2},function (res) {
            if(res.code == 1) {
                var lists = res.data;
                $('#min').html(lists.count);
                if(lists.count2 >= 0){
                    $('#comparison').html('较上月+'+lists.count2+'min');
                }else {
                    $('#comparison').html('较上月'+lists.count2+'min');
                }
            }
        })
    })



</script>
{/block}