jifuning
/
yangchangwan


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530
							
<!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" type="text/css" href="../../css/aui.css"/>-->
    <link rel="stylesheet" type="text/css" href="../../css/popoPicker.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" href="../../css/projeck.css">
    <style>
        body,html{
            background: #F3F3F3;
        }
        .api_layout{
            /*border-top: 1px solid #37b0e9;*/
            padding: 13px 10px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .navs_item{
          padding:0;
        }
        .nav_title{
            padding: 0 5px;
            background: #F3F6FA;
        }
        .nav_title li{
            text-align: center;
            font-size: 14px;
            padding: 9px 0 ;
            color: #232627;
        }
        .li-box{
            height: 39px;
            line-height: 39px;
            font-size: 14px;
            color: #232627;
        }
        .selectData{
          margin-left: 10px;
        }
        #coalCuttings .li-box{
          height: auto;
          line-height: normal;
          padding: 11px 0;
          font-size: 12px;
        }
    </style>
</head>
<body>
<div class="api_layout">
      <!-- 时间 -->
      <div class="Notice borderRa Stitle">
        <span class="time-box"></span>
      </div>
      <!--今日产量-->
     <div class="Notice borderRa beforS">
         <p class="Stitle centertT">今日产量</p>
         <div class="" style="width:100%">
             <canvas id="downWell" style="width: 100%;margin-top:10px;height:210px"></canvas>
         </div>
     </div>
     <!-- 一周产量 -->
     <div class="Notice borderRa">
         <div class="Chart">
             <div class="flex-start">
                 <div class="relative Sharebox screen">
                     <input id="button-value" class="js-picker" value="周产量趋势">
                     <i class="lower"></i>
                 </div>
                 <div class=" selectTime hide">
                     <input class="button-value startYear" value="">
                 </div>
                 <div class="selectTime1 hide">
                     <input class="button-value startTime" value="">
                 </div>
             </div>
             <div class="" style="width:100%">
               <canvas id="weekYield" style="width: 100%;margin-top:10px;height:210px"></canvas>
             </div>
         </div>
         <!--列表-->
         <nav>
             <ul class="nav_title flex-wrap">
                 <li class="flex-con">日期</li>
                 <li class="flex-con">晚班</li>
                 <li class="flex-con">早班</li>
                 <li class="flex-con">中班</li>
                 <li class="flex-con">日产量</li>
             </ul>
         </nav>
         <ul class="downWellPersonnal" id="downWellPersonnal">

         </ul>
     </div>
    <!-- 皮带秤 产量 -->
    <div class="Notice borderRa beforS">
      <p class="Stitle centertT">皮带秤小时产量</p>
      <div class="" style="width:100%">
        <canvas id="Belt" style="width: 100%;margin-top:10px;height:210px"></canvas>
      </div>
    </div>
    <!-- 周割煤刀数 -->
    <div class="Notice borderRa">
        <div class="Chart">
            <div class="flex-start">
                <div class="relative Sharebox screen">
                    <input id="button-value" class="js-coalCutting" readonly value="日割煤刀数">
                    <i class="lower"></i>
                </div>
                <div class=" selectData hide">
                    <input class="button-value startData" value="">
                </div>
            </div>
            <div class="" style="width:100%">
              <canvas id="coalCutting" style="width: 100%;margin-top:10px;height:210px"></canvas>
            </div>
        </div>
        <!--列表-->
        <nav>
            <ul class="nav_title flex-wrap">
                <li class="flex-con">工作面名称</li>
                <li class="flex-con">区队名称</li>
                <li class="flex-con">实际刀数</li>
                <li class="flex-con">计划刀数</li>
            </ul>
        </nav>
        <ul class="downWellPersonnal" id="coalCuttings">

        </ul>
    </div>
</div>
<script type="text/template" id="downWellTemplate">
    {{~it:value}}
    <li class="flex-wrap li-box centertT relative after-border">
        <span class="flex-con">{{=value.CurDT}}</span>
        <span class="flex-con">{{=getInteger(value.BanTotal1)}}吨</span>
        <span class="flex-con">{{=getInteger(value.BanTotal2)}}吨</span>
        <span class="flex-con">{{=getInteger(value.BanTotal3)}}吨</span>
        <span class="flex-con">{{=getInteger(value.BanTotal2) + getInteger(value.BanTotal3) + getInteger(value.BanTotal1)}}吨</span>
    </li>
    {{~}}
</script>
<script type="text/template" id="coalCuttingsTemplate">
    {{~it:value}}
    <li class="flex-wrap li-box centertT relative after-border">
        <span class="flex-con">{{=value.work}}</span>
        <span class="flex-con">{{=value.team}}</span>
        <span class="flex-con">{{=value.value}}刀</span>
        <span class="flex-con">{{=value.plan_value}}刀</span>
    </li>
    {{~}}
</script>
<script src="../../script/api.js"></script>
<script src="../../script/popoPicker.js"></script>
<script src="../../script/doT.min.js"></script>
 <script src="../../script/f2.js"></script>
<script src="../../script/config.js"></script>
<script>
    var headers;
    var apiToast = new apiToast();
    apiready = function () {
        var info = $api.getStorage('data'),
        user = JSON.parse(info).data.user;
        token = JSON.parse(info).data.access_token;
        $api.html($api.dom('.time-box'),  getNowFormatDate());
        setInterval(function () {
          $api.html($api.dom('.time-box'),  getNowFormatDate());
        }, 1000)
        headers = {
            "Authorization": "Bearer " + token
        };
        openSharebox();//选择器
        // 图表权限
        chartsJurisdiction();
        // 监听切换tab标签，刷新页面
        api.addEventListener({
            name: 'refreshProduction'
        }, function(ret, err) {
            // 图表
            chartsJurisdiction();
        });
    };
    // 图表
    function chartsJurisdiction() {
      $api.val($api.dom('#button-value'), '周产量趋势');
      $api.addCls($api.dom('.selectTime1'), 'hide');
      $api.addCls($api.dom('.selectTime'), 'hide');
      getThreeyield();
      // 今日产量
      downWell()
      //一周的产量
      weekYield(false,210);
      // 皮带称
      getBeltData();
      // 割煤刀数
      coalCutting('day',false,210,'');
    }
    // 今日产量
   function downWell() {
        $http.fnReuestDataNologing(UrlRouter.getBanNowDayAllTotal,'','get','',function (ret,err) {
          if (ret.status === 20000) {
            var data = ret.data;
            var map = {};
            data.map(function(obj) {
                map[obj.devName] = getInteger(obj.total) + '吨';
            });
            var chart = new F2.Chart({
                id: 'downWell',
                pixelRatio: window.devicePixelRatio,
                padding: [20, 'auto']
            });
            chart.source(data, {
                percent: {
                    formatter: function formatter(val) {
                        return val + '吨';
                    }
                }
            });
            chart.tooltip(false);
            chart.legend({
                position: 'right',
                itemFormatter: function itemFormatter(val) {
                    return val + '    ' + map[val];
                }
            });
            chart.coord('polar', {
                transposed: true,
                innerRadius: 0.7,
                radius: 0.85
            });
            chart.axis(false);
            chart.interval().position('conts*total').color('devName', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0', '#3436C7', '#223273']).adjust('stack');

            chart.guide().html({
                position: ['50%', '45%'],
                html: '<div style="width: 250px;height: 40px;text-align: center;">' + '<div style="font-size: 16px">总产量</div>' + '<div style="font-size: 18px">'+getInteger(ret.data[0].count)+' 吨</div>' + '</div>'
            });
            chart.render();
          }
        })
    }
   //一周的产量
   function weekYield(transposed,height,type,startTime,endTime) {
     if(type != '年产量趋势'){
       var data = {
         dateTime:startTime,
         endTime:endTime
       };
       $http.fnReuestDataNologing(UrlRouter.getBanDayList,'','get',data,function(ret,err){
         if (ret && ret.status === 20000) {
           var data = ret.data;
           var chart = new F2.Chart({
               id: 'weekYield',
               height: height,
               pixelRatio: window.devicePixelRatio
             });
             chart.source(data, {
               'banTotal2': {
                 tickCount: 5
               }
           });
           chart.coord({
              transposed: transposed
           });
           chart.tooltip({
             custom: false, // 自定义 tooltip 内容框
           });
           chart.interval().position('curDT*total').color('devName').adjust('stack');
           chart.render();
         }
       });
     }else {
       $http.fnReuestDataNologing(UrlRouter.getMonthSumByYear,'','get',{year:startTime},function(ret,err){
         if (ret && ret.status === 20000) {
           var data = ret.data;
           var chart = new F2.Chart({
               id: 'weekYield',
               height: height,
               pixelRatio: window.devicePixelRatio
             });
             chart.source(data, {
               'banTotal2': {
                 tickCount: 5
               }
           });
           chart.coord({
              transposed: transposed
           });
           chart.axis('total', {
              line: null,
              grid: F2.Global._defaultAxis.grid,
              label: function label(text, index, total) {
                var textCfg = {
                  text: text / 10000 + '万吨'
                };
                if (index === 0) {
                  textCfg.textAlign = 'right';
                } else if (index === total - 1) {
                  textCfg.textAlign = 'right';
                }else {
                  textCfg.textAlign = 'right';
                }
                return textCfg;
              }
            });
           chart.interval().position('month*total').color('devName').adjust('stack');
           chart.render();
         }
       });
     }
   }
    // 选择时间
   function openSharebox() {
    var myDate = new Date();
    var tYear = myDate.getFullYear();
    var  tmonth = myDate.getMonth()+1
    $api.val($api.dom('.startYear'), tYear+'年');
    $api.val($api.dom('.startTime'), tYear+'-'+ (tmonth<10? 0+""+tmonth:tmonth));
    $api.val($api.dom('.startData'), tYear+'-'+ (tmonth<10? 0+""+tmonth:tmonth));
      new popoPicker('.js-picker',{
          container:'.screen',
          wheels: [{
              infinite: false,
              //selected: 3,
              data:[
                  {value:0,display:'周产量趋势'},
                  {value:1,display:'月产量趋势'},
                  {value:2,display:'年产量趋势'}
              ]
          }],
          background:'light',
          save:function (data) {
            switch (data.result[0].display) {
              case '周产量趋势':
                $api.addCls($api.dom('.selectTime1'), 'hide');
                $api.addCls($api.dom('.selectTime'), 'hide');
                weekYield(false,210);
                break;
              case '月产量趋势':
                $api.removeCls($api.dom('.selectTime1'), 'hide');
                $api.addCls($api.dom('.selectTime'), 'hide');
                weekYield(true,700,'',tYear+'-'+ (tmonth<10? 0+""+tmonth+'-'+0+""+1:tmonth),tYear+'-'+ (tmonth<10? 0+""+tmonth+'-'+31:tmonth),'');
                break;
              case '年产量趋势':
                $api.addCls($api.dom('.selectTime1'), 'hide');
                $api.removeCls($api.dom('.selectTime'), 'hide');
                weekYield(false,300,data.result[0].display,tYear)
                break;
              default:
            }
          }
      });
      new popoDate('.startTime',{
          container:'.selectTime1',
          background:'light',
          save:function (data) {
            weekYield(true,700,'',data+'-'+0+""+1,data+'-'+31);
          }
      });
      new popoYear('.startYear',{
          container:'.selectTime',
          background:'light',
          save:function (data) {
            $api.val($api.dom('.startYear'), data+'年');
            weekYield(false,300,'年产量趋势',data)
          }
      });
      new popoPicker('.js-coalCutting',{
          container:'.screen',
          wheels: [{
              infinite: false,
              //selected: 3,
              data:[
                  {value:'day',display:'日割煤刀数'},
                  {value:'week',display:'周割煤刀数'},
                  {value:'month',display:'月割煤刀数'}
              ]
          }],
          background:'light',
          save:function (data) {
            switch (data.result[0].display) {
              case '日割煤刀数':
                $api.addCls($api.dom('.selectData'), 'hide');
                coalCutting(data.result[0].value,false,210,'');
                break;
              case '周割煤刀数':
                $api.addCls($api.dom('.selectData'), 'hide');
                coalCutting(data.result[0].value,false,210,'');
                break;
              case '月割煤刀数':
                $api.removeCls($api.dom('.selectData'), 'hide');
                coalCutting('month',false,210,'');
                break;
              default:
            }
          }
      });
      new popoDate('.startData',{
          container:'.selectData',
          background:'light',
          save:function (data) {
           coalCutting('month',false,210,data);
          }
      });

  }
   // 皮带称数据
   function getBeltData() {
      $http.fnReuestDataNologing(UrlRouter.getDayHourTotal,'','get','',function (ret,err) {
        if (ret.status === 20000) {
          var data = ret.data;
          var chart = new F2.Chart({
                id: 'Belt',
                pixelRatio: window.devicePixelRatio
              });

              chart.source(data, {
                time: {
                  type: 'timeCat',
                  mask: 'hh:mm',
                  tickCount: 5,
                  range: [0, 1]
                }
              });
              chart.tooltip({
                showCrosshairs: true,
                showItemMarker: false,
                onShow: function onShow(ev) {
                  var items = ev.items;
                  items[0].name = null;
                  items[0].value = items[0].value +'吨';
                }
              });
              chart.axis('day', {
                label: function label(text, index, total) {
                  var textCfg = {};
                  if (index === 0) {
                    textCfg.textAlign = 'left';
                  } else if (index === total - 1) {
                    textCfg.textAlign = 'right';
                  }
                  return textCfg;
                }
              });
              if (ret.data.length != 0) {
                chart.legend({
                  custom: true,
                  itemWidth: null,
                  nameStyle: {
                    textAlign: 'middle',
                    fontSize: '14',
                    textBaseline: 'middle'
                  },
                  items: [{
                    name: '皮带秤',
                    marker: {
                      symbol:'circle',
                      radius: 5,
                      fill: ret.data[ret.data.length-1].runState === 'Stop'? '#E74C3C':'#2ECC71'
                    }
                  }]
                });
              }
              chart.line().position('time*total').shape('smooth');
              chart.point().position('time*total').shape('smooth').style({
                stroke: '#fff',
                lineWidth: 1
              });
              chart.render();
          }
      })
   }
  // 周割煤刀数
  function coalCutting(type,transposed,height,date) {
    var param = {
      type:type,
      date:date
    }
   $http.fnReuestDataNologing(UrlRouter.getEfficacyCutMerge,'','post',param,function (ret,err) {
     if (ret.code === 0) {
      //  图表
       var data = ret.data['total'];
       var chart = new F2.Chart({
         id: 'coalCutting',
         height: height,
         pixelRatio: window.devicePixelRatio
       });
       chart.source(data);
       chart.coord({
          transposed: transposed
       });
       chart.interval().position('label*value').color('type').adjust({
         type: 'dodge',
         marginRatio: 0.05 // 设置分组间柱子的间距
       });
       chart.render();
      // 周割煤刀数列表
      $apis.html(coalCuttings,'#coalCuttingsTemplate',ret.data['info']);
     }
   })
  }
  // 前三天的产量
  function getThreeyield() {
    var curTime = new Date().getTime();
    var endDate = curTime - (3 * 3600 * 24 * 1000);
    var dateTime = curTime - (1 * 3600 * 24 * 1000);
    var data = {
      dateTime:formatDateTime(endDate),
      endTime:formatDateTime(dateTime)
    };
    $http.fnReuestDataNologing(UrlRouter.getBanDayThree,'','get',data,function(ret,err){
        if (ret.status === 20000) {
          $apis.html(downWellPersonnal,'#downWellTemplate',ret.data);
        }
    });
  }
  // 取整数
  function getInteger(data) {
    return Math.floor(data/1)
  }

</script>
</body>
</html>