dingcong
/
everlight.eap


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
							<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <!-- <link rel="stylesheet" href="../lib/layui-v2.4.5/layui-v2.4.5/layui/css/layui.css"> -->
  <link rel="stylesheet" href="../css/index.css">
  <!-- <script type="text/javascript" src="../lib/layui-v2.4.5/layui-v2.4.5/layui/layui.js"></script> -->
  <script src="../lib/echarts.min.js"></script>
  <script src="../lib/jquery/jquery.min.js"></script>
  <style>
    .chart {
      width: 80px;
      height: 80px;
    }

    .chart1 {
      width: 60px;
      height: 60px;
    }

    .label {
      margin-left: 12px;
    }

    .container {
      width: 450px;
      position: relative;
    }

    .container1 {
      width: 320px;
      position: absolute;
      top: 8px;
      left: 450px;
    }

    .row {
      width: 100%;
    }

    .col {
      width: 85px;
      float: left;
    }

    .col1 {
      width: 60px;
      float: left;
    }

    .margin-top {
      margin-top: 50px;
    }
  </style>
</head>

<body style="padding-top:8px;">
  <div style="width:450px;float:left;">
    <div class="container">
      <div class="row">
        <div class="col">
          <label class="label">MTBF</label>
        </div>
        <div class="col">
          <label class="label">综合效率</label>
        </div>
        <div class="col">
          <label class="label">稼动率</label>
        </div>
        <div class="col">
          <label class="label">闲置率</label>
        </div>
        <div class="col">
          <label class="label">报警率</label>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div id="total-mtbf" class="chart"></div>
        </div>
        <div class="col">
          <div id="total-effi" class="chart"></div>
        </div>
        <div class="col">
          <div id="total-runrate" class="chart"></div>
        </div>
        <div class="col">
          <div id="total-idlerate" class="chart"></div>
        </div>
        <div class="col">
          <div id="total-alarmrate" class="chart"></div>
        </div>
      </div>
    </div>
  </div>
  <div style=" width: 320px;float: left;margin-left: 10px;">
    <div class="container1">
      <div class="row">
        <div class="col1">
          <div id="db-mtbf" class="chart1"></div>
        </div>
        <div class="col1">
          <div id="db-effi" class="chart1"></div>
        </div>
        <div class="col1">
          <div id="db-runrate" class="chart1"></div>
        </div>
        <div class="col1">
          <div id="db-idlerate" class="chart1"></div>
        </div>
        <div class="col1">
          <div id="db-alarmrate" class="chart1"></div>
        </div>
        <div class="row">
          <div class="col1">
            <div id="wb-mtbf" class="chart1"></div>
          </div>
          <div class="col1">
            <div id="wb-effi" class="chart1"></div>
          </div>
          <div class="col1">
            <div id="wb-runrate" class="chart1"></div>
          </div>
          <div class="col1">
            <div id="wb-idlerate" class="chart1"></div>
          </div>
          <div class="col1">
            <div id="wb-alarmrate" class="chart1"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript">
    $(function () {
      var option = {
        title: {
          text: '',
          textStyle: {
            fontSize: '10',
          }
        },
        tooltip: {
          show: false
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['']
        },
        series: [
          {
            hoverAnimation: false,
            name: '',
            type: 'pie',
            radius: ['60%', '90%'],
            //center:['40%','70%'],
            //  avoidLabelOverlap: true,
            label: {
              normal: {
                show: true,
                position: 'center',
                textStyle: {
                  fontSize: '12',
                  fontWeight: 'bold'
                }
              },

            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [

            ]
          }
        ]
      };
      var totalMtbfPie = echarts.init(document.getElementById('total-mtbf'));
      var totalEffi = echarts.init(document.getElementById('total-effi'));
      var totalRun = echarts.init(document.getElementById('total-runrate'));
      var totalIdle = echarts.init(document.getElementById('total-idlerate'));
      var totalAlarm = echarts.init(document.getElementById('total-alarmrate'));

      var dbMtbf = echarts.init(document.getElementById('db-mtbf'));
      var dbEffi = echarts.init(document.getElementById('db-effi'));
      var dbRun = echarts.init(document.getElementById('db-runrate'));
      var dbIdle = echarts.init(document.getElementById('db-idlerate'));
      var dbAlarm = echarts.init(document.getElementById('db-alarmrate'));

      var wbMtbfs = echarts.init(document.getElementById('wb-mtbf'));
      var wbEffi = echarts.init(document.getElementById('wb-effi'));
      var wbRun = echarts.init(document.getElementById('wb-runrate'));
      var wbIdle = echarts.init(document.getElementById('wb-idlerate'));
      var wbAlarm = echarts.init(document.getElementById('wb-alarmrate'));
      loadData();
      function loadData() {
        $.ajax({
          url: 'http://localhost:18531/eap/api/analysis2/getstatustotal',
          type: 'get',
          dataType: 'json',
          success: function (res) {
            console.log(res);
            var mtbfs = [];
            var effics = [];
            var dbM = 0, wbM = 0;
            if (res.mtbfs != null || res.mtbfs.length > 0) {
              for (var i = 0; i < res.mtbfs.length; i++) {
                if (res.mtbfs[i].pcode == 'DB') {
                  dbM += res.mtbfs[i].mtbf;
                }
                if (res.mtbfs[i].pcode == 'WB') {
                  wbM += res.mtbfs[i].mtbf;
                }
              }
              dbM = Math.round(dbM);
              wbM = Math.round(wbM);
              var overalMtbf = dbM + wbM;
              mtbfs = [{ type: 'total', value: overalMtbf }, { type: 'DB', value: dbM }, { type: 'WB', value: wbM }];
            }
            setOption('', ['MTBF'], overalMtbf.toString(), [{ value: overalMtbf, name: overalMtbf.toString() }, { value: 1440 - overalMtbf, name: '' }], totalMtbfPie);
            setOption('', ['MTBF'], dbM.toString(), [{ value: dbM, name: dbM.toString() }, { value: 1440 - dbM, name: '' }], dbMtbf);
            setOption('', ['MTBF'], wbM.toString(), [{ value: wbM, name: wbM.toString() }, { value: 1440 - wbM, name: '' }], wbMtbfs);

            if (res.effics != null || res.effics.length > 0) {
              var dbEffiency = 0, dbRunRate = 0, dbIdleRate = 0, dbAlarmRate = 0;
              var wbEffiency = 0, wbRunRate = 0, wbIdleRate = 0, wbAlarmRate = 0;
              var totalEffiency = 0, totalRunRate = 0, totalIdleRate = 0, totalAlarmRate;
              for (var j = 0; j < res.effics.length; j++) {
                if (res.effics[j].key == 'DB') {
                  dbEffiency = Math.round(res.effics[j].overallEfficiency * 100);
                  dbRunRate = Math.round(res.effics[j].runRate * 100);
                  // dbIdleRate = Math.round(res.effics[j].idleRate * 100);
                  dbAlarmRate = Math.round(res.effics[j].alarmRate * 100);
                  dbIdleRate = 100 - dbAlarmRate - dbRunRate;
                }
                if (res.effics[j].key == 'WB') {
                  wbEffiency += Math.round(res.effics[j].overallEfficiency * 100);
                  wbRunRate += Math.round(res.effics[j].runRate * 100);
                  // wbIdleRate += Math.round(res.effics[j].idleRate * 100);
                  wbAlarmRate += Math.round(res.effics[j].alarmRate * 100);
                  wbIdleRate = 100 - wbRunRate - wbAlarmRate;
                }
              }
              totalEffiency = Math.round((dbEffiency + wbEffiency) / 2);
              totalRunRate = Math.round((dbRunRate + wbRunRate) / 2);
              //  totalIdleRate = Math.round((dbIdleRate + wbIdleRate) / 2);
              totalAlarmRate = Math.round((dbAlarmRate + wbAlarmRate) / 2);
              totalIdleRate = 100 - totalRunRate - totalAlarmRate;

              plusZero(overalMtbf);
              plusZero(dbM);
              plusZero(wbM);
              plusZero(dbEffiency);
              plusZero(dbRunRate);
              plusZero(dbIdleRate);
              plusZero(dbAlarmRate);
              plusZero(wbEffiency);
              plusZero(wbRunRate);
              plusZero(wbIdleRate);
              plusZero(wbAlarmRate);
              plusZero(totalEffiency);
              plusZero(totalRunRate);
              plusZero(totalIdleRate);
              plusZero(totalAlarmRate);
            }
            setOption('', ['综合效率'], totalEffiency.toString(), [{ value: totalEffiency, name: Math.round(totalEffiency).toString() }, { value: 100 - totalEffiency, name: '' }], totalEffi);
            setOption('', ['稼动率'], totalRunRate.toString(), [{ value: totalRunRate, name: Math.round(totalRunRate).toString() }, { value: 100 - totalRunRate, name: '' }], totalRun);
            setOption('', ['待机率'], totalIdleRate.toString(), [{ value: totalIdleRate, name: Math.round(totalIdleRate).toString() }, { value: 100 - totalIdleRate, name: '' }], totalIdle);
            setOption('', ['故障率'], totalAlarmRate.toString(), [{ value: totalAlarmRate, name: Math.round(totalAlarmRate).toString() }, { value: 100 - totalAlarmRate, name: '' }], totalAlarm);
            setOption('', ['综合效率'], dbEffiency.toString(), [{ value: dbEffiency, name: Math.round(dbEffiency).toString() }, { value: 100 - dbEffiency, name: '' }], dbEffi);
            setOption('', ['稼动率'], dbRunRate.toString(), [{ value: dbRunRate, name: Math.round(dbRunRate).toString() }, { value: 100 - dbRunRate, name: '' }], dbRun);
            setOption('', ['待机率'], dbIdleRate.toString(), [{ value: dbIdleRate, name: Math.round(dbIdleRate).toString() }, { value: 100 - dbIdleRate, name: '' }], dbIdle);
            setOption('', ['故障率'], dbAlarmRate.toString(), [{ value: dbAlarmRate, name: Math.round(dbAlarmRate).toString() }, { value: 100 - dbAlarmRate, name: '' }], dbAlarm);
            setOption('', ['综合效率'], wbEffiency.toString(), [{ value: wbEffiency, name: Math.round(wbEffiency).toString() }, { value: 100 - wbEffiency, name: '' }], wbEffi);
            setOption('', ['稼动率'], wbRunRate.toString(), [{ value: wbRunRate, name: Math.round(wbRunRate).toString() }, { value: 100 - wbRunRate, name: '' }], wbRun);
            setOption('', ['待机率'], wbIdleRate.toString(), [{ value: wbIdleRate, name: Math.round(wbIdleRate).toString() }, { value: 100 - wbIdleRate, name: '' }], wbIdle);
            setOption('', ['故障率'], wbAlarmRate.toString(), [{ value: wbAlarmRate, name: Math.round(wbAlarmRate).toString() }, { value: 100 - wbAlarmRate, name: '' }], wbAlarm);
          }
        });


        setTimeout(() => {
          loadData();
        }, 1000 * 60 * 60 * 2);
      }
      function setOption(title, lenged, name, data, chart) {
        option.title.text = title;
        option.legend.title = lenged;
        option.series[0].name = name;
        option.series[0].data = data;
        chart.setOption(option);
      }

      function plusZero(value) {
        if (value > 0)
          return value + 0.001;
      }
    });

  </script>
</body>

</html>