删除告警列表，新增工单完成率图标

index.html

@@ -548,61 +548,9 @@
   </div>
   <!-- 告警数据轮播 -->
   <div class="warning">
-    <h4>告警数据</h4>
+    <h4>工单完成率</h4>
     <div id="review_box" style="height: 230px;overflow: hidden;">
-      <table class="warningDevice" id="warning-table">
-        <tr>
-          <th>设备名称</th>
-          <th>告警数据</th>
-          <th>告警等级</th>
-        </tr>
-        <!-- script写到这里 -->
-        <script>
-          // $.ajax({
-          //   type: "GET",
-          //   url: "http://120.26.43.60/neops/monitor/alarm/list?stationCode=CQLPHJDZ&beginTime=2023-03-01",
-          //   beforeSend: function (request) {
-          //     request.setRequestHeader("X-Access-Token", "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2OTE5MDE4MzEsInVzZXJuYW1lIjoiYWRtaW4ifQ.4IEqUCtmikO7NLCexQcfLv5AXWuagBWBb6jowfondZg");
-          //   },
-          //   success: function (result) {
-          //     console.log(result);
-          //     var records = result.result.records2
-          //     // console.log(records);
-          //     // console.log(result.result.records2);
-          //     for (let i = 0; i < records.length; i++) {
-          //       const warn = records[i];
-          //       console.log(warn);
-          //     }
-          //   },
 
-          // });
-
-          // 1. 数据准备
-          // let deviceWarning = [
-          //   { device: '30-NB12', warning: '组串13组件异常', level: '一般' },
-          //   { device: '27-NB12', warning: '组串1组件异常', level: '一般' },
-          //   { device: '20-NB12', warning: '组串3组件异常', level: '一般' },
-          //   { device: '30-NB12', warning: '组串13组件异常', level: '一般' },
-          //   { device: '27-NB12', warning: '组串1组件异常', level: '一般' },
-          //   { device: '20-NB12', warning: '组串3组件异常', level: '一般' },
-          //   { device: '30-NB12', warning: '组串13组件异常', level: '一般' },
-          //   { device: '27-NB12', warning: '组串1组件异常', level: '一般' },
-          //   { device: '20-NB12', warning: '组串3组件异常', level: '一般' },
-          // ]
-          // // 2. 渲染页面
-          // for (let i = 0; i < deviceWarning.length; i++) {
-          //   document.write(`
-          //     <tr id="comment1">
-          //         <td>${deviceWarning[i].device}</td>
-          //         <td>${deviceWarning[i].warning}</td>
-          //         <td>${deviceWarning[i].level}</td>
-          //     </tr>
-          //   `)
-          // }
-
-        </script>
-      </table>
-      <table class="warningDevice" id="comment2"></table>
     </div>
   </div>
   <!-- 发电量功率展示 -->
@@ -1128,41 +1076,167 @@
       monthPlanCompletePie.resize();
     });
   </script>
-  <!-- 告警数据滚动 -->
+  <!-- 工单完成数 -->
   <script>
-    // window.onload = roll(50);
-    let globalTimer = null;
-    function roll(t) {
-      var ul1 = document.getElementById("comment1");
-      var ul2 = document.getElementById("comment2");
     var ulbox = document.getElementById("review_box");
+    var myChart = echarts.init(ulbox);
+    var weekOrderQuantity = 100   //总数
+    var weekOrderCompleted = 30   //已完成
+    var weekOrderUnfinished = 70  //未完成
 
-      ul2.innerHTML = ul1.innerHTML;
-      ulbox.scrollTop = 0; // 开始无滚动时设为0
-      globalTimer = setInterval(rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
-      // 鼠标移入div时暂停滚动
-      ulbox.onmouseover = function () {
-        clearInterval(globalTimer);
+    var option = {
+      color: ['#22c2f0', '#28f19b', '#fcfa3c', '#f44061'],
+      title: {
+        text: '',
+        //  subtext: 7789,
+        textStyle: {
+          color: '#f2f2f2',
+          fontSize: 20,
+          // align: 'center'
+        },
+        subtextStyle: {
+          fontSize: 20,
+          color: ['#ff9d19']
+        },
+        x: 'center',
+        y: 'center',
+      },
+      tooltip: {
+        trigger: 'item',
+        formatter: "{a}: {c} ({d}%)"
+      },
+      // legend: {
+      //   orient: 'horizontal',
+      //   icon: 'circle',
+      //   right: 40,
+      //   top: 3,
+      //   textStyle: {
+      //     color: '#fff'
+      //   },
+      //   data: ['工单完成率']
+      // },
+      series: [{
+        name: '工单完成数',
+        type: 'pie',
+        clockWise: false,
+        radius: ["70%", "80%"],
+        itemStyle: {
+          normal: {
+            label: {
+              show: false
+            },
+            labelLine: {
+              show: false
+            },
+            shadowBlur: 0,
+            shadowColor: '#203665'
           }
-      // 鼠标移出div后继续滚动
-      ulbox.onmouseout = function () {
-        globalTimer = setInterval(rollStart, t);
+        },
+        hoverAnimation: false,
+        center: ['50%', '50%'],
+        data: [{
+          value: weekOrderCompleted,
+          label: {
+            normal: {
+              formatter: "{d}%",
+              position: 'center',
+              show: true,
+              textStyle: {
+                fontSize: '24',
+                fontWeight: 'normal',
+                color: '#fff'
               }
             }
-    // 开始滚动函数
-    function rollStart() {
-      // 上面声明的DOM对象为局部对象需要再次声明
-      var ul1 = document.getElementById("comment1");
-      var ul2 = document.getElementById("comment2");
-      var ulbox = document.getElementById("review_box");
-      // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
-      if (ulbox.scrollTop >= ulbox.scrollHeight) {
-        ulbox.scrollTop = 0;
-      } else {
-        ulbox.scrollTop++;
+          },
+          itemStyle: {
+            normal: {
+              color: '#2c6cc4',
+              shadowColor: '#2c6cc4',
+              shadowBlur: 0
             }
           }
+        }, {
+          value: weekOrderUnfinished,
+          name: 'invisible',
+          itemStyle: {
+            normal: {
+              color: '#f2c96b'
+            },
+            emphasis: {
+              color: '#24375c'
+            }
+          }
+        }]
+      },
+      {
+        type: "gauge",
+        radius: "75%",
+        startAngle: 0,
+        endAngle: 360,
+        splitNumber: 30,
+        axisTick: {
+          show: false
+        },
+        splitLine: {
+          length: 10,
+          lineStyle: {
+            width: 1,
+            color: "#031845"
+          }
+        },
+        axisLabel: {
+          show: false
+        },
+        pointer: {
+          show: false
+        },
+        axisLine: {
+          lineStyle: {
+            opacity: 0
+          }
+        },
+        detail: {
+          show: false
+        },
+        data: [{
+          value: 0,
+          name: ""
+        }]
+      }, {
+        // name: '访问来源',
+        type: 'pie',
+        radius: ['50%', '60%'],
+        silent: true,
+        z: 0,
+        // zlevel: 0,
+        label: {
+          normal: {
+            show: false
+          }
+        },
+        labelLine: {
+          normal: {
+            show: true,
+            length: 0,
+            length2: 100,
+            lineStyle: {
+              type: 'solid',
+              width: 1
+            }
+          }
+        },
+        data: [{
+          value: weekOrderQuantity,
+          name: ''
+        }
 
+        ]
+      }
+      ]
+    };
+    if (option && typeof option === 'object') {
+      myChart.setOption(option);
+    }
   </script>
   <script>