jifuning
/
zhihui_kuangshan_app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643
							<!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(
          jinfengUrlRouter.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(
            jinfengUrlRouter.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(
            jinfengUrlRouter.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(
          jinfengUrlRouter.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(
          jinfengUrlRouter.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(
          jinfengUrlRouter.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>