jifuning
/
zhihui_kuangshan_app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
							<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>下井记录</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" href="../../css/animate.css">
    <link rel="stylesheet" href="../../css/style.css">
    <style>
        body,
        html {
            background: #F5F5F5;
        }

        .api_layout {
            /*margin: 10px;*/
        }

        .header_user_info {
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .left_avatar img {
            width: 48px;
            height: 48px;
            display: block;
            border-radius: 100%;
        }

        .right_name_department {
            padding-left: 5px;
        }

        #headerInfo {
            padding: 12px 0 11px 11px;
            background: #fff
        }

        #MonthOnce {
            padding: 0 11px 11px 11px;
            background: #fff
        }

        #monthInfoList {
            background: #fff;
        }

        #monthList {
            overflow-x: scroll;
        }

        .template_view_container {
            display: flex;
            align-items: center;
            padding: 7px 5px;
            /*margin-top: 20px;*/
        }

        .month_list_info {
            min-width: 110px;
            margin-left: 9.5px;
            float: left;
            flex: 1;
            position: relative;
            display: flex;
            justify-content: space-around;
            align-items: center;
            color: #009FE8;
            border-radius: 10px;
            border: 1px solid rgba(0, 159, 232, 1);
            padding: 8px 5px;
        }

        .month_list_info:first-child {
            width: 220px;
            background: rgba(0, 159, 232, 1);
            border-radius: 10px;
            color: #FFFFFF;
        }

        .month_list_info.active {
            background: rgba(0, 159, 232, 1);
            border-radius: 10px;
            color: #FFFFFF;
        }

        .month_list_info:first-child {
            margin-left: 0
        }

        .month_info_list li {
            display: flex;
            align-items: center;
            height: 51px;
            border-bottom: solid 1px #F5F5F5;
            background: #fff;
        }

        .month_info_list li:first-child {
            font-size: 14px;
            font-weight: 500;
            color: rgba(0, 159, 232, 1);
            border-bottom: solid 1px #009FE8;
        }

        .month_info_list li .item {
            width: 25%;
            text-align: center;
        }

        .month_once_view {
            position: relative;
        }

        .right_statistics {
            width: 116px;
            height: 95px;
            position: absolute;
            right: 0;
            top: 0;
        }

        #statistics {
            position: absolute;
            right: -10px;
            top: -60px;
            width: 100%;
        }

        .statistics-title {
            position: absolute;
            right: 20px;
            bottom: 0;
        }

        .left_times {
            width: 61%;
            padding: 7px 0 7px 12px;
            background: rgba(243, 246, 250, 1);
            border-radius: 7px;
            position: relative;
        }

        .left_times ul li {
            display: flex;
            align-items: center;
            color: #6C6F74;
            font-size: 16px;
            line-height: 28px
        }
        .left_times ul li div:last-child {
          padding-left: 4px;
        }
        .left_times img {
            width: 41px;
            height: 36px;
            position: absolute;
            top: 0;
            right: 0
        }

        .plan_num,
        .real_num {
            font-size: 24px;
            font-weight: 500;
            /*padding-bottom: 10px;*/
        }

        .plan_num {
            color: #E67E22
        }

        .real_num {
            color: #2980B9
        }
    </style>
</head>

<body>
    <div class="api_layout">
        <div id="headerInfo"></div>
        <div id="MonthOnce">
            <!-- <div id="statisticsContainer"></div> -->
        </div>
        <div id="monthList"></div>
        <div id="monthInfoList"></div>
    </div>
</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/f2.js"></script>
<script src="../../script/config.js" charset="utf-8"></script>
<script src="../../script/doT.min.js" charset="utf-8"></script>
<script type="text/template" id="monthListView">
    <div class="template_view_container">
        {{ for(var i = 0; i
        < it.length; i++ ) { }} <div class="month_list_info" onclick="changeListTime(this,'{{=i}}','{{=it[i].year}}','{{=it[i].month}}','{{=it[i].times}}')">
            <div class="year_info">{{=it[i].year}}年</div>
            <div class="month_info">{{=it[i].month}}月</div>
            <div class="times_info">{{=it[i].times}}次</div>
    </div>
    {{ } }}
    </div>

</script>
<script type="text/template" id="monthInfoView">
    <ul class="month_info_list">
        <li class="month_info_list_first">
            <div class="item">时间</div>
            <div class="item">下井时间</div>
            <div class="item">上井时间</div>
            <div class="item">下井时长</div>
        </li>
        {{ for(var i = 0; i
        < it.length; i++ ) { }} <li class="month_info_item" onclick="handleGetOnceInfo('{{=it[i].date}}','{{=it[i].downtime}}')">
            <div class="item">
                <div>{{=it[i].date}}</div>
                <div>{{=it[i].week}}</div>
            </div>
            <div class="item">
                <div>{{=it[i].downtime}}</div>
                <div>{{=it[i].classes}}</div>
            </div>
            <div class="item month_info">{{=it[i].uptime}}</div>
            <div class="item times_info">{{=it[i].duration}}</div>
            </li>
            {{ } }}
    </ul>

</script>
<script type="text/template" id="MonthOnceView">
    <div class="month_once_view">
        <div class="left_times">
            {{? it.plan
            <=it.real}} <img src="../../image/completed.png" alt="">
                {{?? it.plan > it.real}}
                <img src="../../image/unfinished.png" alt=""> {{?}}
                <ul>
                    <li>{{=it.date}}</li>
                    <li>
                        <div>需下井次数：</div>
                        <div class="plan_num">{{=it.plan}}</div>
                        <div>次</div>
                    </li>
                    <li>
                        <div>已下井次数：</div>
                        <div class="real_num">{{=it.real}}</div>
                        <div>次</div>
                    </li>
                </ul>
        </div>
        <div class="right_statistics">
            <canvas id="statistics" style="width: 140px;height: 140px"></canvas>
            <div class="statistics-title" style="color: #6C6F74">月下井完成度</div>
        </div>
    </div>
</script>
<script type="text/javascript">
    var jobID = "",staff_num = '',
    username = '',depart_name='';
    apiready = function() {
        var info = $api.getStorage('data');
        let user = JSON.parse(info).data.user
        staff_num = api.pageParam.staff_num
        username = api.pageParam.username
        depart_name = api.pageParam.depart_name
        var img
        img = `<img src="http://jiewei-icon.oss-cn-beijing.aliyuncs.com/icon/default-avatar.png" alt="" />`
        let userInfoHtml =
            `<div class="header_user_info">
                <div class="left_avatar"> ${img}</div>
                <div class="right_name_department">
                  <div style="color: #232627;font-size: 16px">${username}</div>
                  <div style="color: #6C6F74;font-size: 14px">${depart_name}</div>
                </div>
        </div>`
        $api.html(headerInfo, userInfoHtml);
        getMonthlist();
        getMonthInfo();
        getMonthOnce();
    }

    function getMonthlist() {
        $http.requestData(jinfengUrlRouter.getMonthlist, 'post', {staff_num})
            .then(ret => {
                if (ret.code == 0) {
                    $apis.html(monthList, '#monthListView', ret.data);
                    let DiffMonth = `${ret.data[0].year}-${ret.data[0].month}`;
                    let DownTime = ret.data[0].times;
                    getMonthInfo(DiffMonth, DownTime);
                    getMonthOnce(DiffMonth, DownTime);
                }
            })
            .catch((err) => {
                // console.log(JSON.stringify(err));
            });
    }

    function changeListTime(el, index, year, month, times) {
        let diffMonth = `${year}-${month}`;
        let downtime = times;
        $(el).css({
            background: '#009FE8',
            color: '#FFFFFF'
        }).siblings().css({
            border: '1px solid rgba(0,159,232,1)',
            color: '#009FE8',
            background: '#FFFFFF'
        })
        getMonthInfo(diffMonth, downtime)
        getMonthOnce(diffMonth, downtime)
    }
    // 当月下井列表
    function getMonthInfo(month, downtime) {
        $http.requestData(jinfengUrlRouter.getMonthInfo, 'post', {
                month: month,
                staff_num,
                downtime: downtime
            })
            .then(ret => {
                if (ret.code == 0) {
                    $apis.html(monthInfoList, '#monthInfoView', ret.data);
                }

            })
            .catch((err) => {
                // console.log(JSON.stringify(err));
            });
    }
    // 当月下井完成度
    function getMonthOnce(month, downtime) {
        $http.requestData(jinfengUrlRouter.getMonthOnce, 'post', {
                month: month,
                staff_num,
                downtime: downtime
            })
            .then(ret => {
                if (ret.code == 0) {

                    $apis.html(MonthOnce, '#MonthOnceView', ret.data);
                    try {
                        var fontSize = 24 * (window.innerWidth / 375); // 字体适配不同屏幕
                        var yNum = parseInt(ret.data.real / ret.data.plan * 100)

                        let dataNum = yNum >= 100 ? 100 : yNum;

                        var data = [{
                            name: '总数据',
                            defaultx: '1',
                            defaulty: dataNum
                        }];
                        var chart = new F2.Chart({
                            id: 'statistics',
                            pixelRatio: window.devicePixelRatio
                        });
                        chart.source(data, {
                            defaulty: {
                                max: 100,
                                min: 0
                            }
                        });
                        chart.axis(false);
                        chart.tooltip(false);
                        chart.coord('polar', {
                            transposed: true, // 坐标系翻转
                            innerRadius: 0.85, // 内环半径，数值为 0 - 1 范围
                            radius: 1 // 半径，数值为 0 - 1 范围
                        });

                        // chart.interval().position('defaultx*defaulty').color('name', ['#FE5D4D'])

                        chart.guide().arc({
                            start: [0, 0],
                            end: [1, 99.98],
                            top: false,
                            style: {
                                lineWidth: 10,
                                stroke: '#BDC3C7'
                            }
                        });
                        let chartColor = yNum < 100 ? '#E67E22' : '#27AE60'
                        chart.guide().text({
                            position: ['50%', '50%'],
                            content: `${yNum}%`,
                            style: {
                                fontSize: fontSize, // 文本大小
                                fill: chartColor, // 文本颜色 #1890ff
                                // fontWeight: 'bold' // 文本粗细
                            }
                        });
                        chart.interval().position('defaultx*defaulty').color(chartColor).size(10).animate({
                            appear: {
                                duration: 1200,
                                easing: 'cubicIn'
                            }
                        });
                        chart.render();
                    } catch (e) {
                        // console.log(e);
                    }
                }
            })
            .catch((err) => {
                // console.log(JSON.stringify(err));
            });
    }

    function handleGetOnceInfo(date, downtime) {
        let params = {
            downtime: date + '  ' + downtime,
            staff_num,
        }
        $event.openTabLayout('drivingTrack', 'drivingTrack', '行驶轨迹', params);
    }
</script>