一堆乱七八糟的改动

package.json

@@ -23,6 +23,7 @@
     "dayjs": "^1.8.0",
     "dom-align": "1.12.0",
     "echarts": "^5.4.3",
+    "echarts-liquidfill": "^3.1.0",
     "enquire.js": "^2.1.6",
     "js-cookie": "^2.2.0",
     "lodash.get": "^4.4.2",
@@ -64,9 +65,7 @@
     "html-webpack-plugin": "^4.2.0",
     "less": "^3.9.0",
     "less-loader": "^4.1.0",
-    "vue-template-compiler": "^2.6.10",
-    "html-webpack-plugin": "^4.2.0",
-    "compression-webpack-plugin": "^3.1.0"
+    "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {
     "root": true,

src/components/liquidFill/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="liquid-container">
+    <div class="trend-charts" ref="liquidfillCharts"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import 'echarts-liquidfill'
+
+export default {
+  name: 'liquidFill',
+  props: {
+    all: {
+      type: Number,
+      default: 0,
+    },
+    single: {
+      type: Number,
+      default: 0,
+    },
+    color: {
+      type: String,
+      default: 0,
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  created() {
+    setTimeout(() => {
+      this.initEcharts()
+    }, 1000)
+  },
+  methods: {
+    initEcharts() {
+      var _this = this
+      var chartDom = _this.$refs.liquidfillCharts
+      var myChart = echarts.init(chartDom)
+      var option
+
+      var bili = (this.single / this.all).toFixed(2)
+      // 指定图表的配置项和数据
+      var option = {
+        series: [
+          {
+            type: 'liquidFill',
+            radius: '50%', // 水球图的半径
+            center: ['50%', '50%'], // 水球图的中心位置
+            data: [bili], // 水球图的数据，支持多个数据点
+            color: [this.color],
+            outline: { 
+              show: false, //水球图边框不显示
+            },
+            label: {
+              formatter: function () {
+                return _this.single + '/' + _this.all
+              },
+              color: '#293441', // 水球图中心文字颜色
+              fontSize: 20, // 水球图中心文字字号
+            },
+          },
+        ],
+      }
+
+      // 使用刚指定的配置项和数据显示图表。
+      option && myChart.setOption(option)
+
+      window.addEventListener('resize', function () {
+        myChart.resize()
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.index-container {
+  width: 100%;
+  min-height: 100%;
+  .trend-charts {
+    width: 100%;
+    min-height: 180px;
+    padding: 10px;
+    margin-top: 10px;
+  }
+}
+</style>

src/utils/encryption/signMd5Utils.js

@@ -34,7 +34,7 @@ export default class signMd5Utils {
     let jsonObj = this.mergeObject(urlParams, requestParams);
     //console.log("sign jsonObj: ",jsonObj)
     let requestBody = this.sortAsc(jsonObj);
-    console.log("sign requestBody: ",requestBody)
+    // console.log("sign requestBody: ",requestBody)
     return md5(JSON.stringify(requestBody) + signatureSecret).toUpperCase();
   }
 

src/views/module_ems/energyAnalyse/emsdata.json

@@ -300,7 +300,7 @@
             {
                 "equipmentid": 301155974447105,
                 "equipmentname": "生产线1米1",
-                "year": 2023,
+                "year": 2024,
                 "month": 10,
                 "week": null,
                 "day": null,
@@ -318,7 +318,7 @@
             {
                 "equipmentid": 300984435802113,
                 "equipmentname": "零件清洗机",
-                "year": 2023,
+                "year": 2024,
                 "month": 10,
                 "week": null,
                 "day": null,
@@ -336,7 +336,7 @@
             {
                 "equipmentid": 300986291781633,
                 "equipmentname": "清洗机",
-                "year": 2023,
+                "year": 2024,
                 "month": 10,
                 "week": null,
                 "day": null,
@@ -354,7 +354,7 @@
             {
                 "equipmentid": 301149691379713,
                 "equipmentname": "双工位焊接机器人NZCR-500YGD×2M",
-                "year": 2023,
+                "year": 2024,
                 "month": 10,
                 "week": null,
                 "day": null,
@@ -372,7 +372,7 @@
             {
                 "equipmentid": 300988051292161,
                 "equipmentname": "摩擦焊MCH-110T",
-                "year": 2023,
+                "year": 2024,
                 "month": 10,
                 "week": null,
                 "day": null,
@@ -422,7 +422,7 @@
         ],
         "energySpace": {
             "createBy": "admin",
-            "createTime": "2023-05-11 17:09:03",
+            "createTime": "2024-05-11 17:09:03",
             "updateBy": null,
             "updateTime": null,
             "remark": null,
@@ -1349,7 +1349,7 @@
             },
             {
                 "source": "动力用电",
-                "target": "生产线1米1[M20230060]",
+                "target": "生产线1米1[M20240060]",
                 "value": 2841.6
             },
             {
@@ -1639,7 +1639,7 @@
                 "valueUnit": "KWh"
             },
             {
-                "name": "生产线1米1[M20230060]",
+                "name": "生产线1米1[M20240060]",
                 "depth": 2,
                 "nameValue": 2841.6,
                 "valueUnit": "KWh"
@@ -2624,7 +2624,7 @@
         "EnvironmentTemp": [
             {
                 "createBy": "admin",
-                "createTime": "2023-07-20 16:12:58",
+                "createTime": "2024-07-20 16:12:58",
                 "updateBy": "",
                 "updateTime": null,
                 "remark": null,
@@ -2641,17 +2641,17 @@
                 "energyitemid": null,
                 "param1": null,
                 "param2": null,
-                "logtime": "2023-10-17 15:43:57",
+                "logtime": "2024-10-17 15:43:57",
                 "tagvalue": 25.8,
-                "lastalarmtime": "2023-07-21 10:04:30",
+                "lastalarmtime": "2024-07-21 10:04:30",
                 "equipmentname": "G15_12号门对面温湿度",
-                "equipmentcode": "M20230056",
+                "equipmentcode": "M20240056",
                 "energytypename": null,
                 "energyitemname": null
             },
             {
                 "createBy": "admin",
-                "createTime": "2023-07-20 16:12:15",
+                "createTime": "2024-07-20 16:12:15",
                 "updateBy": "",
                 "updateTime": null,
                 "remark": null,
@@ -2668,17 +2668,17 @@
                 "energyitemid": null,
                 "param1": null,
                 "param2": null,
-                "logtime": "2023-10-17 15:43:57",
+                "logtime": "2024-10-17 15:43:57",
                 "tagvalue": 24,
-                "lastalarmtime": "2023-07-21 10:05:30",
+                "lastalarmtime": "2024-07-21 10:05:30",
                 "equipmentname": "E1_旁小屋顶温湿度",
-                "equipmentcode": "M20230029",
+                "equipmentcode": "M20240029",
                 "energytypename": null,
                 "energyitemname": null
             },
             {
                 "createBy": "admin",
-                "createTime": "2023-07-20 16:11:25",
+                "createTime": "2024-07-20 16:11:25",
                 "updateBy": "",
                 "updateTime": null,
                 "remark": null,
@@ -2695,17 +2695,17 @@
                 "energyitemid": null,
                 "param1": null,
                 "param2": null,
-                "logtime": "2023-10-07 14:02:20",
+                "logtime": "2024-10-07 14:02:20",
                 "tagvalue": 22.9,
-                "lastalarmtime": "2023-07-21 09:15:30",
+                "lastalarmtime": "2024-07-21 09:15:30",
                 "equipmentname": "G12_F12螺栓拧紧旁温湿度",
-                "equipmentcode": "M20230055",
+                "equipmentcode": "M20240055",
                 "energytypename": null,
                 "energyitemname": null
             },
             {
                 "createBy": "admin",
-                "createTime": "2023-07-20 16:06:08",
+                "createTime": "2024-07-20 16:06:08",
                 "updateBy": "",
                 "updateTime": null,
                 "remark": null,
@@ -2722,19 +2722,19 @@
                 "energyitemid": null,
                 "param1": null,
                 "param2": null,
-                "logtime": "2023-10-17 15:43:57",
+                "logtime": "2024-10-17 15:43:57",
                 "tagvalue": 26.6,
-                "lastalarmtime": "2023-08-04 15:37:25",
+                "lastalarmtime": "2024-08-04 15:37:25",
                 "equipmentname": "E12_F12温湿度",
-                "equipmentcode": "M20230054",
+                "equipmentcode": "M20240054",
                 "energytypename": null,
                 "energyitemname": null
             },
             {
                 "createBy": "admin",
-                "createTime": "2023-07-20 16:02:54",
+                "createTime": "2024-07-20 16:02:54",
                 "updateBy": "admin",
-                "updateTime": "2023-07-20 16:14:06",
+                "updateTime": "2024-07-20 16:14:06",
                 "remark": null,
                 "params": {},
                 "tagid": 301023883231233,
@@ -2749,19 +2749,19 @@
                 "energyitemid": null,
                 "param1": null,
                 "param2": null,
-                "logtime": "2023-10-17 15:43:57",
+                "logtime": "2024-10-17 15:43:57",
                 "tagvalue": 25.1,
-                "lastalarmtime": "2023-07-21 09:51:30",
+                "lastalarmtime": "2024-07-21 09:51:30",
                 "equipmentname": "E9_F9温湿度",
-                "equipmentcode": "M20230028",
+                "equipmentcode": "M20240028",
                 "energytypename": null,
                 "energyitemname": null
             },
             {
                 "createBy": "admin",
-                "createTime": "2023-07-20 16:01:57",
+                "createTime": "2024-07-20 16:01:57",
                 "updateBy": "admin",
-                "updateTime": "2023-07-20 16:14:10",
+                "updateTime": "2024-07-20 16:14:10",
                 "remark": null,
                 "params": {},
                 "tagid": 301023765790721,
@@ -2776,19 +2776,19 @@
                 "energyitemid": null,
                 "param1": null,
                 "param2": null,
-                "logtime": "2023-10-17 15:43:57",
+                "logtime": "2024-10-17 15:43:57",
                 "tagvalue": 24.9,
-                "lastalarmtime": "2023-07-21 09:54:30",
+                "lastalarmtime": "2024-07-21 09:54:30",
                 "equipmentname": "D10_D9温湿度",
-                "equipmentcode": "M20230053",
+                "equipmentcode": "M20240053",
                 "energytypename": null,
                 "energyitemname": null
             },
             {
                 "createBy": "admin",
-                "createTime": "2023-07-20 16:00:17",
+                "createTime": "2024-07-20 16:00:17",
                 "updateBy": "admin",
-                "updateTime": "2023-07-20 16:14:13",
+                "updateTime": "2024-07-20 16:14:13",
                 "remark": null,
                 "params": {},
                 "tagid": 301023556075521,
@@ -2803,19 +2803,19 @@
                 "energyitemid": null,
                 "param1": null,
                 "param2": null,
-                "logtime": "2023-10-17 15:43:57",
+                "logtime": "2024-10-17 15:43:57",
                 "tagvalue": 25.7,
-                "lastalarmtime": "2023-07-21 09:58:30",
+                "lastalarmtime": "2024-07-21 09:58:30",
                 "equipmentname": "D6温湿度",
-                "equipmentcode": "M20230052",
+                "equipmentcode": "M20240052",
                 "energytypename": null,
                 "energyitemname": null
             },
             {
                 "createBy": "admin",
-                "createTime": "2023-07-20 15:59:33",
+                "createTime": "2024-07-20 15:59:33",
                 "updateBy": "admin",
-                "updateTime": "2023-07-20 16:14:18",
+                "updateTime": "2024-07-20 16:14:18",
                 "remark": null,
                 "params": {},
                 "tagid": 301023461703681,
@@ -2830,19 +2830,19 @@
                 "energyitemid": null,
                 "param1": null,
                 "param2": null,
-                "logtime": "2023-10-17 15:43:57",
+                "logtime": "2024-10-17 15:43:57",
                 "tagvalue": 24.9,
-                "lastalarmtime": "2023-07-21 10:08:31",
+                "lastalarmtime": "2024-07-21 10:08:31",
                 "equipmentname": "加工中心温湿度",
-                "equipmentcode": "M20230027",
+                "equipmentcode": "M20240027",
                 "energytypename": null,
                 "energyitemname": null
             },
             {
                 "createBy": "admin",
-                "createTime": "2023-07-20 15:58:21",
+                "createTime": "2024-07-20 15:58:21",
                 "updateBy": "admin",
-                "updateTime": "2023-07-20 16:14:21",
+                "updateTime": "2024-07-20 16:14:21",
                 "remark": null,
                 "params": {},
                 "tagid": 301023312805889,
@@ -2857,17 +2857,17 @@
                 "energyitemid": null,
                 "param1": null,
                 "param2": null,
-                "logtime": "2023-10-07 14:02:20",
+                "logtime": "2024-10-07 14:02:20",
                 "tagvalue": 24.7,
-                "lastalarmtime": "2023-07-21 10:08:31",
+                "lastalarmtime": "2024-07-21 10:08:31",
                 "equipmentname": "G5温湿度",
-                "equipmentcode": "M20230051",
+                "equipmentcode": "M20240051",
                 "energytypename": null,
                 "energyitemname": null
             },
             {
                 "createBy": "admin",
-                "createTime": "2023-07-20 15:57:28",
+                "createTime": "2024-07-20 15:57:28",
                 "updateBy": "",
                 "updateTime": null,
                 "remark": null,
@@ -2884,11 +2884,11 @@
                 "energyitemid": null,
                 "param1": null,
                 "param2": null,
-                "logtime": "2023-10-17 15:43:57",
+                "logtime": "2024-10-17 15:43:57",
                 "tagvalue": 25.1,
                 "lastalarmtime": null,
                 "equipmentname": "S5温湿度",
-                "equipmentcode": "M20230026",
+                "equipmentcode": "M20240026",
                 "energytypename": null,
                 "energyitemname": null
             }
@@ -2991,15 +2991,15 @@
         "alarmData": [
             {
                 "createBy": "admin",
-                "createTime": "2023-11-30 15:14:40",
+                "createTime": "2024-11-30 11:14:40",
                 "updateBy": "",
                 "updateTime": null,
                 "remark": "情况紧急，抓紧处理！",
                 "params": {},
                 "alarmid": 12,
                 "equipmentid": 1,
-                "equipmentname": "刮削滚光机SRB250X1100",
-                "alarmtime": "2023-11-30 15:14:40",
+                "equipmentname": "电动单梁桥式起重机",
+                "alarmtime": "2024-11-30 11:14:40",
                 "alarmtype": "现场报警",
                 "alarmlevel": null,
                 "msgcode": null,
@@ -3015,23 +3015,23 @@
                 "url": null,
                 "distance": null,
                 "position": null,
-                "year": 2023,
+                "year": 2024,
                 "month": 11,
                 "week": 48,
-                "day": "2023-11-30",
+                "day": "2024-11-30",
                 "dayofweek": 4
             },
             {
                 "createBy": "admin",
-                "createTime": "2023-11-30 15:14:38",
+                "createTime": "2024-11-30 11:14:38",
                 "updateBy": "",
                 "updateTime": null,
                 "remark": "情况紧急，抓紧处理！",
                 "params": {},
                 "alarmid": 11,
                 "equipmentid": 1,
-                "equipmentname": "双工位双头镗",
-                "alarmtime": "2023-11-30 15:14:38",
+                "equipmentname": "实验室废气处理设备",
+                "alarmtime": "2024-11-30 11:14:38",
                 "alarmtype": "现场报警",
                 "alarmlevel": null,
                 "msgcode": null,
@@ -3047,23 +3047,23 @@
                 "url": null,
                 "distance": null,
                 "position": null,
-                "year": 2023,
+                "year": 2024,
                 "month": 11,
                 "week": 48,
-                "day": "2023-11-30",
+                "day": "2024-11-30",
                 "dayofweek": 4
             },
             {
                 "createBy": "admin",
-                "createTime": "2023-11-30 15:14:24",
+                "createTime": "2024-11-30 11:14:24",
                 "updateBy": "",
                 "updateTime": null,
                 "remark": "情况紧急，抓紧处理！",
                 "params": {},
                 "alarmid": 10,
                 "equipmentid": 1,
-                "equipmentname": "摩擦焊MCH-110T",
-                "alarmtime": "2023-11-30 15:14:24",
+                "equipmentname": "烘箱",
+                "alarmtime": "2024-11-30 11:14:24",
                 "alarmtype": "设备故障",
                 "alarmlevel": null,
                 "msgcode": null,
@@ -3079,23 +3079,23 @@
                 "url": null,
                 "distance": null,
                 "position": null,
-                "year": 2023,
+                "year": 2024,
                 "month": 11,
                 "week": 48,
-                "day": "2023-11-30",
+                "day": "2024-11-30",
                 "dayofweek": 4
             },
             {
                 "createBy": "admin",
-                "createTime": "2023-11-30 15:13:55",
+                "createTime": "2024-11-30 11:13:55",
                 "updateBy": "",
                 "updateTime": null,
                 "remark": "情况紧急，抓紧处理！",
                 "params": {},
                 "alarmid": 9,
                 "equipmentid": 1,
-                "equipmentname": "数控车床CW6163C/6000",
-                "alarmtime": "2023-11-30 15:13:55",
+                "equipmentname": "8-10 加热炉",
+                "alarmtime": "2024-11-30 11:13:55",
                 "alarmtype": "设备故障",
                 "alarmlevel": null,
                 "msgcode": null,
@@ -3111,23 +3111,23 @@
                 "url": null,
                 "distance": null,
                 "position": null,
-                "year": 2023,
+                "year": 2024,
                 "month": 11,
                 "week": 48,
-                "day": "2023-11-30",
+                "day": "2024-11-30",
                 "dayofweek": 4
             },
             {
                 "createBy": "admin",
-                "createTime": "2023-11-30 15:12:20",
+                "createTime": "2024-11-30 11:12:20",
                 "updateBy": "",
                 "updateTime": null,
                 "remark": "情况紧急，抓紧处理！",
                 "params": {},
                 "alarmid": 8,
                 "equipmentid": 1,
-                "equipmentname": "油嘴环缝焊机NZC-500",
-                "alarmtime": "2023-11-30 15:12:20",
+                "equipmentname": "镁合金化学镀镍槽（2）",
+                "alarmtime": "2024-11-30 11:12:20",
                 "alarmtype": "设备故障",
                 "alarmlevel": null,
                 "msgcode": null,
@@ -3143,10 +3143,10 @@
                 "url": null,
                 "distance": null,
                 "position": null,
-                "year": 2023,
+                "year": 2024,
                 "month": 11,
                 "week": 48,
-                "day": "2023-11-30",
+                "day": "2024-11-30",
                 "dayofweek": 4
             }
         ],
@@ -3707,7 +3707,7 @@
         },
         {
             "equipmentname": "生产线1米1",
-            "equipmentcode": "M20230060",
+            "equipmentcode": "M20240060",
             "beginvalue": 6932.8,
             "endvalue": 7158.4,
             "tagvalue": 225.6,
@@ -3731,7 +3731,7 @@
         },
         {
             "equipmentname": "配电柜总控_214",
-            "equipmentcode": "M20230061",
+            "equipmentcode": "M20240061",
             "beginvalue": 89007,
             "endvalue": 96585,
             "tagvalue": 7578,
@@ -3739,7 +3739,7 @@
         },
         {
             "equipmentname": "车间北_215",
-            "equipmentcode": "M20230062",
+            "equipmentcode": "M20240062",
             "beginvalue": 63370.8,
             "endvalue": 65210.4,
             "tagvalue": 1839.6,
@@ -3747,7 +3747,7 @@
         },
         {
             "equipmentname": "车间南_217",
-            "equipmentcode": "M20230064",
+            "equipmentcode": "M20240064",
             "beginvalue": 67020,
             "endvalue": 69109.2,
             "tagvalue": 2089.2,
@@ -3755,7 +3755,7 @@
         },
         {
             "equipmentname": "空调_216",
-            "equipmentcode": "M20230063",
+            "equipmentcode": "M20240063",
             "beginvalue": 18500.8,
             "endvalue": 18521.2,
             "tagvalue": 20.4,

src/views/module_ems/photovoltaic/mdCurveAnalysis/index.vue

@@ -43,21 +43,18 @@ export default {
   methods: {
     // 后端好了需要删掉
     getTest() {
-      var _this = this;
+      var _this = this
       pvdata.mdcurveanalysisdata.forEach((item) => {
         item.data.forEach((i) => {
           if (item.meterName === 'GD02') {
-            _this.times.push(i.Time.substring(11, 16));
-            _this.gd02us.push(i.Ua.toFixed(1));
-          }
-          else if (item.meterName === 'GD03') {
-            _this.gd03us.push(i.Ua.toFixed(1));
-          }
-          else if (item.meterName === 'GD05') {
-            _this.gd05us.push(i.Ua.toFixed(1));
-          }
-          else if (item.meterName === 'GD06') {
-            _this.gd06us.push(i.Ua.toFixed(1));
+            _this.times.push(i.Time.substring(11, 16))
+            _this.gd02us.push(i.Ua.toFixed(1))
+          } else if (item.meterName === 'GD03') {
+            _this.gd03us.push(i.Ua.toFixed(1))
+          } else if (item.meterName === 'GD05') {
+            _this.gd05us.push(i.Ua.toFixed(1))
+          } else if (item.meterName === 'GD06') {
+            _this.gd06us.push(i.Ua.toFixed(1))
           }
         })
       })
@@ -132,6 +129,32 @@ export default {
             itemStyle: {
               color: '#91CC75',
             },
+            markArea: {
+              // 覆盖面积
+              itemStyle: {
+                color: 'rgba(255, 173, 177, 0.4)',
+              },
+              data: [
+                [
+                  {
+                    // name: 'Morning Peak',
+                    xAxis: '07:30',
+                  },
+                  {
+                    xAxis: '10:00',
+                  },
+                ],
+                [
+                  {
+                    // name: 'Evening Peak',
+                    xAxis: '17:30',
+                  },
+                  {
+                    xAxis: '21:15',
+                  },
+                ],
+              ],
+            },
             markPoint: {
               data: [
                 { type: 'max', name: 'Max' },

src/views/module_tpm/healthCalendar/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <a-spin :spinning="loading">
+    <div class="energy-overView">
+      <!-- <commonSearch hasAreaSearch ref="commonSearch" type="nodate" @search="handleSearch"></commonSearch> -->
+      <a-calendar style="background: #fff;" v-model:value="yearmonth" @change="change">
+        <ul slot="dateCellRender" slot-scope="value" class="events" v-if="getMonthData(value)">
+          <li v-for="item in getListData(value)" :key="item.content">
+            <a-badge :status="item.type" :text="item.content" />
+          </li>
+        </ul>
+      </a-calendar>
+    </div>
+  </a-spin>
+</template>
+<script>
+import * as echarts from 'echarts'
+import commonSearch from '../../module_ems/energySaving/components/commonSearch'
+import { httpAction, getAction } from '@/api/manage'
+  import moment from 'dayjs'
+export default {
+  name: 'healthCalendar',
+  components: {
+    commonSearch,
+  },
+  data () {
+    return {
+      description: '',
+      loading: false,
+      yearmonth: '',
+      healthList: [],
+      url: {
+        list: '/EquipmentHealthSection/equipmentHealthSection/statusbyyearmonth',
+      },
+    }
+  },
+  created () {
+    this.getInfo();
+  },
+  mounted () {
+    this.$nextTick(() => {
+      // this.getEnergyoverview()
+    })
+  },
+  methods: {
+    change() {
+      this.getInfo();
+    },
+    getInfo() {
+      var sss = new Date();
+      if (this.yearmonth != "") {
+        sss = this.yearmonth;
+      }
+      var params = {yearmonth: moment(sss).format('YYYY-MM')};
+      getAction(this.url.list, params).then((response) => {
+        this.healthList = response.result;
+      });
+    },
+    getListData(value) {
+      let listData;
+      // console.log("value.date()", value.date(), this.healthList)
+      listData = [
+        { type: 'success', content: '健康: ' + this.healthList[value.date() - 1].healthduration },
+        { type: 'warning', content: '亚健康: ' + this.healthList[value.date() - 1].subhealthduration },
+        { type: 'error', content: '高危: ' + this.healthList[value.date() - 1].unhealthduration },
+        { type: 'default', content: '离线: ' + this.healthList[value.date() - 1].offlineduration },
+      ];
+      return listData || [];
+    },
+
+    getMonthData(value) {
+      var sss = new Date();
+      if (this.yearmonth != "") {
+        sss = this.yearmonth;
+      }
+      var month = moment(sss).month();
+      console.log("month", month, value.month())
+      if (value.month() === month) {
+        return true;
+      }
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.events {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+/deep/ .ant-radio-group {
+  display: none;
+}
+.ant-calendar-date {
+  height: 80px; /* 你想要设置的高度 */
+  line-height: 50px; /* 确保文本垂直居中 */
+}
+.events .ant-badge-status {
+  overflow: hidden;
+  white-space: nowrap;
+  width: 100%;
+  text-overflow: ellipsis;
+  font-size: 12px;
+}
+.notes-month {
+  text-align: center;
+  font-size: 28px;
+}
+.notes-month section {
+  font-size: 28px;
+}
+</style>

src/views/module_tpm/healthDashboard/index.vue

@@ -0,0 +1,699 @@
+<template>
+  <div class="index-container">
+    <!-- 首行--设备状态汇总 -->
+    <div class="opera-container u-flex-jab">
+      <div class="item f1 repair" style="height: 150px" v-for="(item, index) in operaContent" :key="index">
+        <div class="common-title u-flex">
+          <span class="text">{{ item.title }}</span>
+        </div>
+        <div class="legend">
+          <div class="number">
+            <span :class="item.class">{{ statusStatistics[item.name] }}</span>
+          </div>
+        </div>
+        <liquid-Fill
+          :all="statusStatistics.all"
+          style="margin-top: -50px; margin-left: -20px"
+          :single="statusStatistics[item.name]"
+          :color="item.color"
+        ></liquid-Fill>
+      </div>
+    </div>
+    <!-- 消息通知+报警通知 -->
+    <a-row :gutter="20" class="mt20 alarmandnotice">
+      <a-col :span="5" style="padding-left: 10px; padding-right: 18px">
+        <a-card :body-style="{ padding: '10px 8px 8px', height: '910px' }" :bordered="false">
+          <span class="leftHeader common-title"></span>
+          <span class="head-title">重点关注设备</span>
+          <a-row>
+            <a-col>
+              <div class="head-info">
+                <span>电动单梁桥式起重机（63011909034）设备检测异常，需要维修人员核实。</span>
+              </div>
+            </a-col>
+          </a-row>
+          <a-divider style="margin: 8px 0" />
+          <span class="leftHeader common-title"></span>
+          <span class="head-title">重点关注产线</span>
+          <a-row>
+            <a-col>
+              <div class="head-info">
+                <span>喷涂产线装置综合健康指数下降明显，需要加强关注。</span>
+              </div>
+            </a-col>
+          </a-row>
+          <a-divider style="margin: 8px 0" />
+          <span class="leftHeader common-title"></span>
+          <span class="head-title">日常运维提醒</span>
+          <a-row>
+            <a-col>
+              <div class="head-info">
+                <span>储气罐（55091203000005）阀门异常，需要更换。</span>
+              </div>
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+      <a-col :span="19">
+        <a-row :gutter="20" class="mt20">
+          <a-col :span="15" style="margin: -10px 4px 0 -17px">
+            <div class="trend-charts" ref="elecCharts"></div>
+          </a-col>
+          <a-col :span="9" style="margin-left: 2px; padding-left: 0px; padding-right: 0px">
+            <a-card class="box-card">
+              <div class="u-flex-jab">
+                <div class="common-title u-flex">
+                  <span class="text">报警通知</span>
+                </div>
+                <a-button type="link" size="small" @click="chakan">处理/查看</a-button>
+                <!-- <router-link to="/alarmManage/notice">
+              <a-button style="float: right; padding: 3px 0" type="text">处理/查看</a-button>
+            </router-link> -->
+              </div>
+              <a-table
+                rowKey="id"
+                size="middle"
+                bordered
+                :columns="alarmcolumns"
+                :dataSource="alarmList"
+                :pagination="false"
+              >
+                <template slot="htmlSlot" slot-scope="text">
+                  <div v-html="text"></div>
+                </template>
+
+                <template slot="imgSlot" slot-scope="text, record">
+                  <div style="font-size: 12px; font-style: italic">
+                    <span v-if="!text">无图片</span>
+                    <img
+                      v-else
+                      :src="getImgView(text)"
+                      :preview="record.id"
+                      alt=""
+                      style="max-width: 80px; height: 25px"
+                    />
+                  </div>
+                </template>
+
+                <template slot="fileSlot" slot-scope="text">
+                  <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
+                  <a-button v-else ghost type="primary" icon="download" size="small" @click="downloadFile(text)">
+                    <span>下载</span>
+                  </a-button>
+                </template>
+              </a-table>
+            </a-card>
+          </a-col>
+        </a-row>
+        <a-row :gutter="20" class="mt20">
+          <a-col :span="15" style="margin: 0 4px 0 -17px">
+            <div class="trend-charts" ref="efficCharts"></div>
+          </a-col>
+          <a-col :span="9" style="margin-left: 2px; padding-left: 0px; padding-right: 0px">
+            <div class="trend-charts" ref="statusCharts"></div>
+          </a-col>
+        </a-row>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import liquidFill from '@/components/liquidFill/index.vue'
+import { httpAction, getAction, postAction } from '@/api/manage'
+
+export default {
+  components: {
+    liquidFill,
+  },
+  name: 'Index',
+  dicts: ['sys_alarm_type', 'sys_alarm_level'],
+  data() {
+    return {
+      loading: true,
+      alarmcolumns: [
+        {
+          title: '设备名称',
+          align: 'center',
+          dataIndex: 'equipmentname',
+        },
+        // {
+        //   title: '报警描述',
+        //   align: 'center',
+        //   dataIndex: 'remark',
+        // },
+        {
+          title: '报警类型',
+          align: 'center',
+          dataIndex: 'alarmtype',
+        },
+        {
+          title: '报警时间',
+          align: 'center',
+          dataIndex: 'alarmtime',
+        },
+      ],
+      // 健康度前端绘制
+      operaContent: [
+        { type: 'repair', title: '健康', name: 'health', class: 'normal', color: '#27b150' },
+        // { type: 'repair', title: '待机', name: '', class: 'pause', color: '#1890FF' },
+        { type: 'repair', title: '亚健康', name: 'subhealth', class: 'dangerous', color: '#f9ba27' },
+        { type: 'repair', title: '高危', name: 'unhealth', class: 'alarm', color: '#ff4949' },
+        { type: 'repair', title: '离线', name: 'offline', class: 'offline', color: '#cdcdcd' },
+      ],
+      // 报警数据表格数据
+      alarmList: [],
+      // 最近的状态
+      statusStatistics: {
+        health: 0,
+        subhealth: 0,
+        unhealth: 0,
+        offline: 0,
+        all: 0,
+      },
+      // 当月日期
+      days: [],
+      // 设备健康分布（今日）
+      daySectionList: [],
+      // 设备健康统计（台/日）
+      monthSectionList: {
+        health: [],
+        subhealth: [],
+        unhealth: [],
+        offline: []
+      },
+      // 设备健康统计（天/月）
+      yearSectionList: {
+        health: [],
+        subhealth: [],
+        unhealth: [],
+        offline: []
+      },
+      //设备名称
+      equipmentnames: [],
+      url: {
+        listAlarmdata: '/tpmMessageAlarm/tpmMessageAlarm/list',
+        dashboard: '/healthStatistics/healthStatistics/dashboard',
+      },
+    }
+  },
+  created() {
+    this.getAlarmList();
+    this.getInfo();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      // 延迟绘制，否则echarts会超出父容器
+      // setTimeout(() => {
+      //   this.getList()
+      // }, 1000)
+    })
+    var _this = this
+  },
+  methods: {
+    // 处理/查看
+    chakan() {
+      this.$router.push({ path: '/msgcharge' })
+    },
+    // 初始化参数
+    initParams() {
+      this.statusStatistics = {
+        health: 0,
+        subhealth: 0,
+        unhealth: 0,
+        offline: 0,
+        all: 0,
+      };      
+      this.monthSectionList = {
+        time: [],
+        health: [],
+        subhealth: [],
+        unhealth: [],
+        offline: []
+      };
+      this.yearSectionList = {
+        health: [],
+        subhealth: [],
+        unhealth: [],
+        offline: []
+      };
+      this.daySectionList = [];
+      this.days = [];
+    },
+    getInfo() {
+      var _this = this
+      this.initParams();
+
+      getAction(this.url.dashboard, null).then((response) => {
+        console.log("response", response.result)
+
+        // 日期
+        _this.days = response.result.days;
+
+        // 最近的状态
+        response.result.healthList.forEach(item => {
+          _this.daySectionList.push(item.howmany);
+          _this.statusStatistics.all += item.howmany;
+
+          switch (item.status) {
+            case "1":
+              _this.statusStatistics.health = item.howmany;
+              break;
+            case "2":
+              _this.statusStatistics.subhealth = item.howmany;
+              break;
+            case "3":
+              _this.statusStatistics.unhealth = item.howmany;
+              break;
+            case "4":
+              _this.statusStatistics.offline = item.howmany;
+              break;
+            default:
+              break;
+          }
+        });
+        
+        // 设备健康统计（台/日）
+        response.result.monthSectionList.forEach(item => {
+          _this.monthSectionList.health.push(item.healthduration)
+          _this.monthSectionList.subhealth.push(item.subhealthduration)
+          _this.monthSectionList.unhealth.push(item.unhealthduration)
+          _this.monthSectionList.offline.push(item.offlineduration)
+        });
+        
+          // 设备健康统计（天/月）
+        response.result.yearSectionList.forEach(item => {
+          _this.yearSectionList.health.push(item.healthduration)
+          _this.yearSectionList.subhealth.push(item.subhealthduration)
+          _this.yearSectionList.unhealth.push(item.unhealthduration)
+          _this.yearSectionList.offline.push(item.offlineduration)
+        });
+        
+        this.initEcharts();
+        this.initEfficEcharts();
+        this.initStatusEcharts();
+      })
+    },
+    /** 查询报警数据列表 */
+    getAlarmList() {
+      var queryParams = {
+        pageNum: 1,
+        pageSize: 5,
+        status: '0',
+      }
+      getAction(this.url.listAlarmdata, queryParams).then((response) => {
+        console.log("alarm", response)
+        this.alarmList = response.result.records;
+      })
+    },
+    // 设备健康统计
+    initEcharts() {
+      var _this = this
+      var chartDom = this.$refs.elecCharts
+      var myChart = echarts.init(chartDom)
+
+      var option = {
+        legend: {
+          selectedMode: true,
+        },
+        color: ['#27b150', '#f9ba27', '#ff4949', '#cdcdcd'],
+        title: {
+          left: 'left',
+          text: '设备健康统计（总天数）',
+        },
+        xAxis: {
+          type: 'category',
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+
+        series: [
+          // 分类数值
+          {
+            name: '健康',
+            type: 'bar',
+            stack: '总量',
+            barWidth: 30,
+            emphasis: {
+              focus: 'series',
+            },
+            label: {
+              show: true,
+            },
+            itemStyle: {
+              normal: {
+                barBorderRadius: [0, 0, 4, 4],
+              },
+            },
+            data: _this.yearSectionList.health,
+          },
+          {
+            name: '亚健康',
+            type: 'bar',
+            stack: '总量',
+            barWidth: 30,
+            emphasis: {
+              focus: 'series',
+            },
+            label: {
+              show: true,
+            },
+            itemStyle: {
+              normal: {
+                barBorderRadius: [0, 0, 0, 0],
+              },
+            },
+            data: _this.yearSectionList.subhealth,
+          },
+          {
+            name: '高危',
+            type: 'bar',
+            stack: '总量',
+            barWidth: 30,
+            emphasis: {
+              focus: 'series',
+            },
+            label: {
+              show: true,
+            },
+            itemStyle: {
+              normal: {
+                barBorderRadius: [0, 0, 0, 0],
+              },
+            },
+            data: _this.yearSectionList.unhealth,
+          },
+          {
+            name: '离线',
+            type: 'bar',
+            stack: '总量',
+            emphasis: {
+              focus: 'series',
+            },
+            label: {
+              show: true,
+            },
+            itemStyle: {
+              normal: {
+                barBorderRadius: [4, 4, 0, 0],
+              },
+            },
+            data: _this.yearSectionList.offline,
+          },
+        ],
+      }
+
+      option && myChart.setOption(option)
+
+      window.addEventListener('resize', function () {
+        myChart.resize()
+      })
+    },
+    // 设备健康统计
+    initEfficEcharts() {
+      var _this = this
+      var chartDom = this.$refs.efficCharts
+      var myChart = echarts.init(chartDom)
+      var option
+
+      option = {
+        color: ['#27b150', '#f9ba27', '#ff4949', '#cdcdcd'],
+        legend: {
+          selectedMode: true,
+        },
+        title: {
+          left: 'left',
+          text: '设备健康统计(数量)',
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          type: 'category',
+          data: _this.days,
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            name: '健康',
+            type: 'line',
+            // symbol: 'none',
+            sampling: 'lttb',
+            data: _this.monthSectionList.health,
+          },
+          {
+            name: '亚健康',
+            type: 'line',
+            // symbol: 'none',
+            sampling: 'lttb',
+            data: _this.monthSectionList.subhealth,
+          },
+          {
+            name: '高危',
+            type: 'line',
+            // symbol: 'none',
+            sampling: 'lttb',
+            data: _this.monthSectionList.unhealth,
+          },
+          {
+            name: '离线',
+            type: 'line',
+            // symbol: 'none',
+            sampling: 'lttb',
+            data: _this.monthSectionList.offline,
+          },
+        ],
+      }
+
+      option && myChart.setOption(option)
+
+      window.addEventListener('resize', function () {
+        myChart.resize()
+      })
+    },
+    // 设备健康分布
+    initStatusEcharts() {
+      var _this = this
+      var chartDom = this.$refs.statusCharts
+      var myChart = echarts.init(chartDom)
+      var option
+
+      option = {
+        title: {
+          text: '设备健康分布(今日)'
+        },
+        legend: {},
+        radar: [
+          {
+            indicator: [
+              { text: '健康', max: 100 },
+              { text: '亚健康', max: 30 },
+              { text: '高危', max: 30 },
+              { text: '离线', max: 50 }
+            ],
+            radius: 120,
+            startAngle: 90,
+            splitNumber: 4,
+            shape: 'circle',
+            axisName: {
+              formatter: '【{value}】',
+              color: '#428BD4'
+            },
+            splitArea: {
+              areaStyle: {
+                color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
+                shadowColor: 'rgba(0, 0, 0, 0.2)',
+                shadowBlur: 10
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                color: 'rgba(211, 253, 250, 0.8)'
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: 'rgba(211, 253, 250, 0.8)'
+              }
+            }
+          },
+        ],
+        series: [
+          {
+            type: 'radar',
+            emphasis: {
+              lineStyle: {
+                width: 4
+              },
+            },
+            data: [
+              {
+                value: _this.daySectionList,
+                label: {
+                  show: true,
+                  formatter: function (params) {
+                    return params.value;
+                  }
+                }
+              },
+            ]
+          },
+        ],
+      }
+
+      option && myChart.setOption(option)
+
+      window.addEventListener('resize', function () {
+        myChart.resize()
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@/assets/less/uStyle.less';
+</style>
+<style lang="less" scoped>
+.index-container {
+  width: 100%;
+  min-height: calc(100vh - 124px);
+  .common-title {
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 4px;
+      height: 20px;
+      background-image: linear-gradient(150deg, #5eb3f7, #6680f4);
+      border-radius: 2px;
+    }
+    .text {
+      padding-left: 8px;
+      line-height: 20px;
+      font-size: 18px;
+      font-weight: 600;
+    }
+  }
+  .head-title {
+    font-size: 18px;
+    font-weight: 600;
+  }
+  .head-info {
+    position: relative;
+    padding: 15px 15px 0 15px;
+    width: 100%;
+    font-size: 16px;
+    font-weight: 400;
+    height: 250px;
+    // border: 1px solid #148cb1;
+  }
+  .leftHeader {
+    height: 100%;
+    margin-left: 2%;
+    margin-right: 3%;
+  }
+  .opera-container {
+    .item {
+      padding: 16px 0 16px 20px;
+      background: #fff;
+      box-shadow: 0 2px 12px 0 rgba(48, 65, 86, 0.12);
+      border-radius: 6px;
+      margin-right: 10px;
+      .tongji {
+        .number {
+          font-size: 28px;
+          color: #3ea9ff;
+          font-family: '微软雅黑', serif;
+          .number1 {
+            color: #ffb048;
+            font-size: 30px;
+          }
+        }
+        .text {
+          font-size: 12px;
+          margin-top: 4px;
+          color: #737373;
+          letter-spacing: 0.1em;
+        }
+      }
+      .legend {
+        font-size: 2.5vw;
+        border-radius: 100%;
+        width: 60px;
+        height: 60px;
+        float: right;
+        padding-right: 20px;
+        margin-top: 10px;
+        .pause {
+          color: #1890FF;
+          float: right;
+          // background-image: linear-gradient(150deg, #5eb2f77c, #6680f47f);
+        }
+        .dangerous {
+          color: #f9ba27;
+          float: right;
+          // background-image: linear-gradient(150deg, #f7e55e76, #f9ba276b);
+        }
+        .normal {
+          color: #27b150;
+          float: right;
+          // background-image: linear-gradient(150deg, #5ef78c72, #40cbe174);
+        }
+        .offline {
+          color: #cdcdcd;
+          float: right;
+          // background-image: linear-gradient(150deg, #ffd3c372, #e16b406e);
+        }
+        .alarm {
+          color: #ff4949;
+          float: right;
+          // background-image: linear-gradient(150deg, #eb7f7f77, #ff494979);
+        }
+      }
+    }
+    .item:last-of-type {
+      margin-right: 0;
+    }
+  }
+  .box-card {
+    height: 450px;
+    .a-card__header {
+      border: none;
+    }
+    .a-table th.a-table__cell.is-leaf,
+    .a-table td.a-table__cell {
+      border-right: none;
+    }
+    .a-table th.a-table__cell > .cell {
+      color: #556485;
+      // color: #648ff5;
+    }
+    .a-table .a-table__header-wrapper th,
+    .a-table .a-table__fixed-header-wrapper th {
+      background-color: #f2f7fd;
+      // background-color: #e6f2ff;
+    }
+  }
+  .trend-charts {
+    width: 100%;
+    height: 450px;
+    // min-height: calc(100vh - 18vh - 5.8vh - 84px - 58px - 57px - 50px);
+    padding: 10px;
+    margin-top: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    background: #fff;
+    border-radius: 4px;
+  }
+  .alarmandnotice {
+    margin-top: 10px;
+  }
+  .ant-table-wrapper {
+    margin-top: 10px;
+  }
+}
+</style>

src/views/module_tpm/healthDashboard/liquid.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="index-container">
+        <div class="trend-charts" ref="statusCharts"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import 'echarts-liquidfill'
+
+export default {
+  name: 'liquid',
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.$nextTick(() => {
+      // 延迟绘制，否则echarts会超出父容器
+      setTimeout(() => {
+        this.initEcharts();
+      },1000);
+    })
+  },
+  methods: {
+    initEcharts(){
+      var _this = this
+      var chartDom = this.$refs.statusCharts
+      var myChart = echarts.init(chartDom)
+      const data = [{name: 'Apples',value: 70},
+        {name: 'Strawberries',value: 68},
+        {name: 'Bananas',value: 48},
+        {name: 'Oranges',value: 40},
+        {name: 'Pears',value: 32},
+        {name: 'Pineapples',value: 27},
+        {name: 'Grapes',value: 18}
+      ];
+      var option = {
+        title: [
+          {
+            text: '状态分布(当日)',
+            left: 'left'
+          },
+          {
+            subtext: '健康',
+            top: '75%',
+            textAlign: 'center'
+          },
+          {
+            subtext: '亚健康',
+            top: '75%',
+            textAlign: 'center'
+          },
+          {
+            subtext: '高危',
+            top: '75%',
+            textAlign: 'center'
+          },
+          {
+            subtext: '离线',
+            top: '75%',
+            textAlign: 'center'
+          }
+        ],
+        series: [
+          {
+            type: 'pie',
+            radius: '25%',
+            center: ['25%', '30%'],
+            data: data,
+            label: {
+              position: 'outer',
+              alignTo: 'none',
+              bleedMargin: 5
+            },
+          },
+          {
+            type: 'pie',
+            radius: '25%',
+            center: ['75%', '30%'],
+            data: data,
+            label: {
+              position: 'outer',
+              alignTo: 'labelLine',
+              bleedMargin: 5
+            },
+          },
+          {
+            type: 'pie',
+            radius: '25%',
+            center: ['25%', '75%'],
+            data: data,
+            label: {
+              position: 'outer',
+              alignTo: 'labelLine',
+              margin: 20
+            },
+          },
+          {
+            type: 'pie',
+            radius: '25%',
+            center: ['75%', '75%'],
+            data: data,
+            label: {
+              position: 'outer',
+              alignTo: 'labelLine',
+              margin: 20
+            },
+          }
+        ]
+      }
+
+      option && myChart.setOption(option)
+
+      window.addEventListener('resize', function () {
+        myChart.resize()
+      })
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import '~@/assets/less/uStyle.less';
+</style>
+<style lang="less" scoped>
+.index-container {
+  width: 100%;
+  min-height: calc(100vh - 124px);
+  .common-title{
+    &::before{
+      content: '';
+      display: inline-block;
+      width: 4px;
+      height: 20px;
+      background-image: linear-gradient(150deg, #5EB3F7, #6680F4);
+      border-radius: 2px;
+    }
+    .text{
+      padding-left: 8px;
+      line-height: 20px;
+      font-size: 14px;
+    }
+  }
+  .opera-container{
+    .item{
+      padding: 16px 0 16px 20px;
+      background: #fff;
+      box-shadow: 0 2px 12px 0 rgba(48, 65, 86, 0.12);
+      border-radius: 6px;
+      margin-right: 12px;
+      .content{
+        padding: 20px 0 12px 10px;
+        .tongji{
+          .number{
+            font-weight: bolder;
+            font-size: 28px;
+            color: #3ea9ff;
+            font-family: '微软雅黑', serif;
+            .number1{
+              color: #ffb048;
+              font-size: 30px;
+            }
+          }
+          .text{
+            font-size: 12px;
+            margin-top: 4px;
+            color: #737373;
+            letter-spacing: 0.1em;
+          }
+        }
+        .legend{
+          // width: 50%;
+          i{
+            font-size: 2vw;
+            border-radius: 100%;
+            width: 60px;
+            height: 60px;
+            // text-align: center;
+            // line-height: 60px;
+          }
+          .repair{
+            color: #6680f4;
+            background-image: linear-gradient(150deg, #5eb2f77c, #6680f47f);
+          }
+          .upkeep{
+            color: #f9ba27;
+            background-image: linear-gradient(150deg, #f7e55e76, #f9ba276b);
+          }
+          .spotcheck{
+            color: #27b150;
+            background-image: linear-gradient(150deg, #5ef78c72, #40cbe174);
+          }
+          .inspect{
+            color: #e16b40;
+            background-image: linear-gradient(150deg, #ffd3c372, #e16b406e);
+          }
+          .warning{
+            color: #ff4949;
+            background-image: linear-gradient(150deg, #eb7f7f77, #ff494979);
+          }
+        }
+      }
+    }
+    .item:last-of-type{
+      margin-right: 0;
+    }
+  }
+  .box-card{
+    .a-card__header{
+      border: none;
+    }
+    .a-table th.a-table__cell.is-leaf, .a-table td.a-table__cell{
+      border-right: none;
+    }
+    .a-table th.a-table__cell > .cell{
+      color: #556485;
+      // color: #648ff5;
+    }
+    .a-table .a-table__header-wrapper th, .a-table .a-table__fixed-header-wrapper th{
+      background-color: #f2f7fd;
+      // background-color: #e6f2ff;
+    }
+  }
+  .trend-charts{
+    width: 100%;
+    min-height: calc(100vh - 18vh - 5.8vh - 84px - 58px - 57px - 50px);
+    padding: 10px;
+    margin-top: 10px;
+    box-shadow: 0 2px 10px rgba(0,0,0,.1);
+    background: #fff;
+    border-radius: 4px;
+  }
+  .alarmandnotice{
+    margin-top: 10px;
+  }
+  .ant-table-wrapper {
+    margin-top: 10px;
+  }
+}
+</style>

src/views/module_tpm/healthDiagnosis/index.vue

@@ -0,0 +1,640 @@
+<template>
+  <div class="index-container">
+    <!-- 消息通知+报警通知 -->
+    <a-row class="alarmandnotice">
+      <a-col style="margin-left: 2px; padding-left: 0px; padding-right: 0px">
+        <a-card :bordered="false">
+          <!-- 查询区域 -->
+          <div class="table-page-search-wrapper">
+            <a-form layout="inline" @keyup.enter.native="searchQuery">
+              <a-row :gutter="24">
+                <a-col :xl="10" :lg="7" :md="8" :sm="24">
+                  <a-form-item label="设备名称">
+                    <a-select
+                      v-model="queryParam.equipmentid"
+                      placeholder="请输入设备名称或设备编号"
+                      show-search
+                      :filterOption="filterOptions"
+                      @search="searchDevice"
+                      allowClear
+                    >
+                      <a-select-option
+                        v-for="(item, index) in deviceOptions"
+                        :key="index"
+                        :value="item.id"
+                        :label="item.equipmentname"
+                      >
+                        <span>{{ item.equipmentname }}</span>
+                        <span style="position: absolute; right: 2%">{{ item.equipmentcode }}</span>
+                      </a-select-option>
+                    </a-select>
+                  </a-form-item>
+                </a-col>
+                <template v-if="toggleSearchStatus">
+                  <a-col :xl="6" :lg="7" :md="8" :sm="24">
+                    <a-form-item label="报警日期">
+                      <j-date v-model="queryParam.alarmtime" placeholder="请选择报警日期" style="width: 100%"></j-date>
+                    </a-form-item>
+                  </a-col>
+                  <a-col :xl="6" :lg="7" :md="8" :sm="24">
+                    <a-form-item label="报警等级">
+                      <j-dict-select-tag
+                        v-model="queryParam.alarmlevel"
+                        placeholder="请选择报警等级"
+                        dictCode="alarm_level"
+                      />
+                    </a-form-item>
+                  </a-col>
+                  <a-col :xl="6" :lg="7" :md="8" :sm="24">
+                    <a-form-item label="报警类型">
+                      <j-dict-select-tag
+                        v-model="queryParam.alarmtype"
+                        placeholder="请选择报警类型"
+                        dictCode="alarm_type"
+                      />
+                    </a-form-item>
+                  </a-col>
+                  <a-col :xl="6" :lg="7" :md="8" :sm="24">
+                    <a-form-item label="处理状态">
+                      <j-dict-select-tag
+                        v-model="queryParam.status"
+                        placeholder="请选择处理状态"
+                        dictCode="alarm_status"
+                      />
+                    </a-form-item>
+                  </a-col>
+                </template>
+                <a-col :xl="6" :lg="7" :md="8" :sm="24">
+                  <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+                    <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+                    <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+                    <a @click="handleToggleSearch" style="margin-left: 8px">
+                      {{ toggleSearchStatus ? '收起' : '展开' }}
+                      <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
+                    </a>
+                  </span>
+                </a-col>
+              </a-row>
+            </a-form>
+          </div>
+          <!-- 查询区域-END -->
+
+          <!-- 操作按钮区域 -->
+          <!-- <div class="table-operator">
+      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
+      <a-button type="primary" icon="download" @click="handleExportXls('tpm_message_alarm')">导出</a-button>
+      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
+        <a-button type="primary" icon="import">导入</a-button>
+      </a-upload> -->
+          <!-- 高级查询区域 -->
+          <!-- <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
+      <a-dropdown v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay">
+          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
+      </a-dropdown>
+    </div> -->
+
+          <!-- table区域-begin -->
+          <div>
+            <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
+        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
+        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+      </div> -->
+
+            <a-table
+              ref="table"
+              size="middle"
+              :scroll="{ x: true }"
+              bordered
+              rowKey="id"
+              :columns="columns"
+              :dataSource="dataSource"
+              :pagination="ipagination"
+              :loading="loading"
+              class="j-table-force-nowrap"
+              @change="handleTableChange"
+            >
+              <template slot="status_dictText" slot-scope="text, record">
+                <!-- <span v-if="text">{{record.status_dictText}}</span> -->
+                <a-button type="dashed" v-if="record.status == 0" size="small">{{ record.status_dictText }}</a-button>
+                <!-- 处理中 -->
+                <a-button v-if="record.status == 1" class="yellow" size="small">{{ record.status_dictText }}</a-button>
+                <!-- 已处理 -->
+                <a-button v-if="record.status == 2" class="green" size="small">{{ record.status_dictText }}</a-button>
+              </template>
+
+              <template slot="htmlSlot" slot-scope="text">
+                <div v-html="text"></div>
+              </template>
+              <template slot="imgSlot" slot-scope="text, record">
+                <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
+                <img
+                  v-else
+                  :src="getImgView(text)"
+                  :preview="record.id"
+                  height="25px"
+                  alt=""
+                  style="max-width: 80px; font-size: 12px; font-style: italic"
+                />
+              </template>
+              <template slot="fileSlot" slot-scope="text">
+                <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
+                <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
+                  下载
+                </a-button>
+              </template>
+
+              <span slot="action" slot-scope="text, record">
+                <a @click="handleEdit(record)">处理</a>
+              </span>
+            </a-table>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col>
+        <div class="trend-charts" ref="trendCharts"></div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+// import { listAlarmdata } from "@/api/alarm/alarmdata.js";
+import { httpAction, getAction, postAction } from '@/api/manage'
+import { emsdata } from '../../module_ems/energyAnalyse/emsdata'
+import { pvdata } from '../../module_ems/photovoltaic/pvdata'
+
+export default {
+  name: 'Index',
+  data() {
+    return {
+      loading: true,
+      myChart: null,
+      times: [],
+      gd02us: [],
+      gd03us: [],
+      gd05us: [],
+      gd06us: [],
+      // 表头
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          },
+        },
+        {
+          title: '设备',
+          align: 'center',
+          dataIndex: 'equipmentid_dictText',
+        },
+        {
+          title: '报警类型',
+          align: 'center',
+          dataIndex: 'alarmtype_dictText',
+        },
+        {
+          title: '报警描述',
+          align: 'center',
+          dataIndex: 'remark',
+        },
+        {
+          title: '报警时间',
+          align: 'center',
+          dataIndex: 'alarmtime',
+          // customRender:function (text) {
+          //   return !text?"":(text.length>10?text.substr(0,10):text)
+          // }
+        },
+        {
+          title: '报警等级',
+          align: 'center',
+          dataIndex: 'alarmlevel_dictText',
+        },
+        {
+          title: '当前值',
+          align: 'center',
+          dataIndex: 'nowvalue',
+        },
+        {
+          title: '阈值最小值',
+          align: 'center',
+          dataIndex: 'vmin',
+        },
+        {
+          title: '阈值最大值',
+          align: 'center',
+          dataIndex: 'vmax',
+        },
+        {
+          title: '处理状态',
+          align: 'center',
+          dataIndex: 'status_dictText',
+          scopedSlots: { customRender: 'status_dictText' },
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          fixed: 'right',
+          width: 147,
+          scopedSlots: { customRender: 'action' },
+        },
+      ],
+      url: {
+        list: '/tpmMessageAlarm/tpmMessageAlarm/list',
+        delete: '/tpmMessageAlarm/tpmMessageAlarm/delete',
+        deleteBatch: '/tpmMessageAlarm/tpmMessageAlarm/deleteBatch',
+        exportXlsUrl: '/tpmMessageAlarm/tpmMessageAlarm/exportXls',
+        importExcelUrl: 'tpmMessageAlarm/tpmMessageAlarm/importExcel',
+      },
+      // 报警数据表格数据
+      alarmList: [],
+      deviceOptions: [],
+      deviceOptionsAll: [],
+    }
+  },
+  created() {},
+  mounted() {
+    // this.getAlarmList()
+    this.getTest()
+    this.getDeviceOption();
+  },
+  methods: {
+    // 获取设备下拉列表
+    getDeviceOption(){
+      getAction(`/tpmEquipment/tpmEquipment/selectEquipmentList`).then(res=>{
+        console.log(111,res.result)
+        this.deviceOptions = res.result.map((res) => {
+          return {
+            id: res.id,
+            equipmentname: res.equipmentname,
+            equipmentcode: res.equipmentcode,
+          }
+        })
+        // 存一个完整的设备表
+        this.deviceOptionsAll = this.deviceOptions
+        // console.log(7878,this.deviceOptionsAll)
+      })
+    },
+    // 筛选设备
+    searchDevice(value) {
+      console.log(1212,value,value.trim().length)
+      // 若输入的值删除，则重新赋完整的设备列表
+      if (value.trim().length === 0) {
+        this.deviceOptions = this.deviceOptionsAll
+      }
+      // 通过判断字符串中是数字还是文字进而判断是通过设备名筛选还是设备编号筛选
+      let panDuan = isNaN(parseFloat(value))
+      if (!panDuan) {
+        // 数字
+        // console.log(777)
+        let filteredArray = this.deviceOptionsAll.filter(item => item.equipmentcode.includes(value));
+        this.deviceOptions = filteredArray
+      } else {
+        // console.log(888)
+        let filteredArray = this.deviceOptionsAll.filter(item => item.equipmentname.includes(value));
+        this.deviceOptions = filteredArray
+      }
+      // console.log(999,this.deviceOptions)
+    },
+    // 解决筛选后option不回显问题
+    filterOptions(input, option) {                    
+      return this.deviceOptions
+    },
+    /** 查询报警数据列表 */
+    getAlarmList() {
+      this.alarmList = emsdata.homedata.alarmData
+      //   var queryParams = {
+      //     pageNum: 1,
+      //     pageSize: 5,
+      //     status: '0',
+      //   }
+      //   listAlarmdata(queryParams).then((response) => {
+      //     this.alarmList = response.rows
+      //   })
+    },
+    // 后端好了需要删掉
+    getTest() {
+      var _this = this
+      pvdata.mdcurveanalysisdata.forEach((item) => {
+        item.data.forEach((i) => {
+          if (item.meterName === 'GD02') {
+            _this.times.push(i.Time.substring(11, 16))
+            _this.gd02us.push(i.Ua.toFixed(1))
+          } else if (item.meterName === 'GD03') {
+            _this.gd03us.push(i.Ua.toFixed(1))
+          } else if (item.meterName === 'GD05') {
+            _this.gd05us.push(i.Ua.toFixed(1))
+          } else if (item.meterName === 'GD06') {
+            _this.gd06us.push(i.Ua.toFixed(1))
+          }
+        })
+      })
+      this.initEcharts()
+    },
+    initEcharts() {
+      var _this = this
+      var chartDom = this.$refs.trendCharts
+      _this.myChart = echarts.init(chartDom)
+
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          // position: function (pt) {
+          //   return [pt[0], '5%']
+          // },
+        },
+        title: {
+          left: 'left',
+          text: '报警时设备运行数据',
+        },
+        // legend: {
+        //   data: ['GD02 U', 'GD03 U', 'GD05 U', 'GD06 U'],
+        // },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: _this.times,
+        },
+        yAxis: {
+          type: 'value',
+          boundaryGap: [0, '100%'],
+        },
+        // dataZoom: [
+        //   {
+        //     type: 'inside',
+        //     start: 0,
+        //     end: 100,
+        //     xAxisIndex: 0,
+        //   },
+        //   {
+        //     start: 0,
+        //     end: 10,
+        //   },
+        //   {
+        //     show: true,
+        //     yAxisIndex: 0,
+        //     filterMode: 'empty',
+        //     width: 30,
+        //     height: '80%',
+        //     right: '7%',
+        //   },
+        // ],
+        series: [
+          {
+            name: 'GD02 U',
+            type: 'line',
+            symbol: 'none',
+            sampling: 'lttb',
+            itemStyle: {
+              color: '#91CC75',
+            },
+            markArea: {
+              // 覆盖面积
+              itemStyle: {
+                color: 'rgba(255, 173, 177, 0.4)',
+              },
+              data: [
+                // [
+                //   {
+                //     // name: 'Morning Peak',
+                //     xAxis: '07:02',
+                //   },
+                //   {
+                //     xAxis: '07:15',
+                //   },
+                // ],
+                [
+                  {
+                    // name: 'Evening Peak',
+                    xAxis: '11:14',
+                  },
+                  {
+                    xAxis: '11:28',
+                  },
+                ],
+              ],
+            },
+            // markPoint: { // 记录最大值和最小值
+            //   data: [
+            //     { type: 'max', name: 'Max' },
+            //     { type: 'min', name: 'Min' },
+            //   ],
+            // },
+            data: _this.gd02us,
+          },
+          // {
+          //   name: 'GD03 U',
+          //   type: 'line',
+          //   symbol: 'none',
+          //   sampling: 'lttb',
+          //   itemStyle: {
+          //     color: '#EE6666',
+          //   },
+          //   markPoint: {
+          //     data: [
+          //       { type: 'max', name: 'Max' },
+          //       { type: 'min', name: 'Min' },
+          //     ],
+          //   },
+          //   data: _this.gd03us,
+          // },
+          // {
+          //   name: 'GD05 U',
+          //   type: 'line',
+          //   symbol: 'none',
+          //   sampling: 'lttb',
+          //   itemStyle: {
+          //     color: '#FAAD14',
+          //   },
+          //   markPoint: {
+          //     data: [
+          //       { type: 'max', name: 'Max' },
+          //       { type: 'min', name: 'Min' },
+          //     ],
+          //   },
+          //   data: _this.gd05us,
+          // },
+          // {
+          //   name: 'GD06 U',
+          //   type: 'line',
+          //   symbol: 'none',
+          //   sampling: 'lttb',
+          //   itemStyle: {
+          //     color: '#5470C6',
+          //   },
+          //   markPoint: {
+          //     data: [
+          //       { type: 'max', name: 'Max' },
+          //       { type: 'min', name: 'Min' },
+          //     ],
+          //   },
+          //   data: _this.gd06us,
+          // },
+        ],
+      }
+
+      option && _this.myChart.setOption(option)
+      setTimeout(() => {
+        _this.myChart.resize()
+      }, 1000)
+
+      window.addEventListener('resize', function () {
+        _this.myChart.resize()
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@/assets/less/uStyle.less';
+</style>
+<style lang="less" scoped>
+.index-container {
+  width: 100%;
+  min-height: calc(100vh - 124px);
+  .common-title {
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 4px;
+      height: 20px;
+      background-image: linear-gradient(150deg, #5eb3f7, #6680f4);
+      border-radius: 2px;
+    }
+    .text {
+      padding-left: 8px;
+      line-height: 20px;
+      font-size: 18px;
+      font-weight: 600;
+    }
+  }
+  .head-title {
+    font-size: 18px;
+    font-weight: 600;
+  }
+  .head-info {
+    position: relative;
+    padding: 15px 15px 0 15px;
+    width: 100%;
+    font-size: 16px;
+    font-weight: 400;
+    height: 250px;
+    // border: 1px solid #148cb1;
+  }
+  .leftHeader {
+    height: 100%;
+    margin-left: 2%;
+    margin-right: 3%;
+  }
+  .opera-container {
+    .item {
+      padding: 16px 0 16px 20px;
+      background: #fff;
+      box-shadow: 0 2px 12px 0 rgba(48, 65, 86, 0.12);
+      border-radius: 6px;
+      margin-right: 10px;
+      .tongji {
+        .number {
+          font-size: 28px;
+          color: #3ea9ff;
+          font-family: '微软雅黑', serif;
+          .number1 {
+            color: #ffb048;
+            font-size: 30px;
+          }
+        }
+        .text {
+          font-size: 12px;
+          margin-top: 4px;
+          color: #737373;
+          letter-spacing: 0.1em;
+        }
+      }
+      .legend {
+        font-size: 2.5vw;
+        border-radius: 100%;
+        width: 60px;
+        height: 60px;
+        float: right;
+        padding-right: 20px;
+        margin-top: 10px;
+        .repair {
+          color: #6680f4;
+          float: right;
+          // background-image: linear-gradient(150deg, #5eb2f77c, #6680f47f);
+        }
+        .upkeep {
+          color: #f9ba27;
+          float: right;
+          // background-image: linear-gradient(150deg, #f7e55e76, #f9ba276b);
+        }
+        .spotcheck {
+          color: #27b150;
+          float: right;
+          // background-image: linear-gradient(150deg, #5ef78c72, #40cbe174);
+        }
+        .inspect {
+          color: #e16b40;
+          float: right;
+          // background-image: linear-gradient(150deg, #ffd3c372, #e16b406e);
+        }
+        .warning {
+          color: #ff4949;
+          float: right;
+          // background-image: linear-gradient(150deg, #eb7f7f77, #ff494979);
+        }
+      }
+    }
+    .item:last-of-type {
+      margin-right: 0;
+    }
+  }
+  .box-card {
+    height: 450px;
+    .a-card__header {
+      border: none;
+    }
+    .a-table th.a-table__cell.is-leaf,
+    .a-table td.a-table__cell {
+      border-right: none;
+    }
+    .a-table th.a-table__cell > .cell {
+      color: #556485;
+      // color: #648ff5;
+    }
+    .a-table .a-table__header-wrapper th,
+    .a-table .a-table__fixed-header-wrapper th {
+      background-color: #f2f7fd;
+      // background-color: #e6f2ff;
+    }
+  }
+  .trend-charts {
+    width: 100%;
+    height: 450px;
+    // min-height: calc(100vh - 18vh - 5.8vh - 84px - 58px - 57px - 50px);
+    padding: 10px;
+    margin-top: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    background: #fff;
+    border-radius: 4px;
+  }
+  .alarmandnotice {
+    margin-top: 10px;
+  }
+  .ant-table-wrapper {
+    margin-top: 10px;
+  }
+}
+</style>

src/views/module_tpm/healthForecast/index.vue

@@ -0,0 +1,395 @@
+
+<template>
+  <div>
+  <a-card :bordered="false" style="padding: 0px 10px 0px 10px;">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" :model="queryParams" ref="queryForm">
+        <a-row :gutter="24">
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="设备名称">
+              <j-search-select-tag v-model="queryParams.equipmentid" dict="tpm_equipment,equipmentname,id"  style="width: 100%"/>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="4" :lg="7" :md="8" :sm="24">
+            <a-form-item label="参数类型">
+              <j-dict-select-tag v-model="queryParams.tagtype"  placeholder="请输入优先级" dictCode="tpm_tag_type"/>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+              <a-button type="primary" @click="loadData" icon="search">查询</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <div class="trend-charts" ref="trendCharts" :style="{ height: echartsHeight + 'px', }"></div>
+  </a-card>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+// import { listAlarmdata } from "@/api/alarm/alarmdata.js";
+import { httpAction, getAction, postAction } from '@/api/manage'
+import { emsdata } from '../../module_ems/energyAnalyse/emsdata'
+import { pvdata } from '../../module_ems/photovoltaic/pvdata'
+
+export default {
+  name: 'Index',
+  data() {
+    return {
+      loading: false,
+      myChart: null,
+      times: [],
+      gd02us: [],
+      gd03us: [],
+      gd05us: [],
+      gd06us: [],
+      echartsHeight: window.innerHeight - 140,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        equipmentid: '1780110297413861377',
+        day: null,
+        tagtype: "5",
+      },
+      url: {
+        list: '/homepate/statistics/firstload',
+        equipment: '/equipmentStatistics/equipmentStatistics/machineSum',
+        repair: '/cmmsRepair/cmmsRepair/indexrepairnum',
+        upkeep: '/cmmsUpkeep/cmmsUpkeep/getMyChargeNumDay',
+        upkeepAll: '/cmmsUpkeep/cmmsUpkeep/getMyChargeNum',
+        inspect: '/cmmsInspect/cmmsInspect/indexinspectnum',
+        todayelectricity: '/dataElectricity/dataElectricity/todayelectricity',
+        envirinfo: '/hsms/statistics/envirinfo',
+      },
+    }
+  },
+  created() {},
+  mounted() {
+    this.getTest();
+  },
+  methods: {
+    /** 查询设备运行状态时间段列表 */
+    loadData(arg) {
+      setTimeout(() => {
+        this.getTest()
+      }, 2000)
+    },
+    
+    // 后端好了需要删掉
+    getTest() {
+      var _this = this
+      _this.gd02us = [];
+      _this.times = [];
+      pvdata.mdForecastdata.forEach((item) => {
+        item.data.forEach((i) => {
+          if (item.meterName === 'GD02R') {
+            _this.gd02us.push(i.Ua.toFixed(1))
+          } else if (item.meterName === 'GD02P') {
+            _this.times.push(i.Time.substring(11, 16))
+            _this.gd03us.push(i.Ua.toFixed(1))
+          }
+        })
+      })
+      this.initEcharts()
+    },
+    initEcharts() {
+      var _this = this
+      var chartDom = this.$refs.trendCharts
+      _this.myChart = echarts.init(chartDom)
+      
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          // position: function (pt) {
+          //   return [pt[0], '5%']
+          // },
+        },
+        title: {
+          left: 'left',
+          text: '设备运行数据趋势预测',
+        },
+        legend: {
+          data: ['实际值', '预测值'],
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: _this.times,
+        },
+        yAxis: {
+          type: 'value',
+          boundaryGap: [0, '100%'],
+        },
+        // dataZoom: [
+        //   {
+        //     type: 'inside',
+        //     start: 0,
+        //     end: 100,
+        //     xAxisIndex: 0,
+        //   },
+        //   {
+        //     start: 0,
+        //     end: 10,
+        //   },
+        //   {
+        //     show: true,
+        //     yAxisIndex: 0,
+        //     filterMode: 'empty',
+        //     width: 30,
+        //     height: '80%',
+        //     right: '7%',
+        //   },
+        // ],
+        series: [
+          {
+            name: '实际值',
+            type: 'line',
+            symbol: 'none',
+            sampling: 'lttb',
+            itemStyle: {
+              color: '#91CC75',
+            },
+            // markArea: {
+            //   // 覆盖面积
+            //   itemStyle: {
+            //     color: 'rgba(255, 173, 177, 0.4)',
+            //   },
+            //   data: [
+            //     // [
+            //     //   {
+            //     //     // name: 'Morning Peak',
+            //     //     xAxis: '07:02',
+            //     //   },
+            //     //   {
+            //     //     xAxis: '07:15',
+            //     //   },
+            //     // ],
+            //     [
+            //       {
+            //         // name: 'Evening Peak',
+            //         xAxis: '11:14',
+            //       },
+            //       {
+            //         xAxis: '11:28',
+            //       },
+            //     ],
+            //   ],
+            // },
+            // markPoint: { // 记录最大值和最小值
+            //   data: [
+            //     { type: 'max', name: 'Max' },
+            //     { type: 'min', name: 'Min' },
+            //   ],
+            // },
+            data: _this.gd02us,
+          },
+          {
+            name: '预测值',
+            type: 'line',
+            symbol: 'none',
+            sampling: 'lttb',
+            itemStyle: {
+              color: '#EE6666',
+            },
+            // markPoint: {
+            //   data: [
+            //     { type: 'max', name: 'Max' },
+            //     { type: 'min', name: 'Min' },
+            //   ],
+            // },
+            data: _this.gd03us,
+          },
+          // {
+          //   name: 'GD05 U',
+          //   type: 'line',
+          //   symbol: 'none',
+          //   sampling: 'lttb',
+          //   itemStyle: {
+          //     color: '#FAAD14',
+          //   },
+          //   markPoint: {
+          //     data: [
+          //       { type: 'max', name: 'Max' },
+          //       { type: 'min', name: 'Min' },
+          //     ],
+          //   },
+          //   data: _this.gd05us,
+          // },
+          // {
+          //   name: 'GD06 U',
+          //   type: 'line',
+          //   symbol: 'none',
+          //   sampling: 'lttb',
+          //   itemStyle: {
+          //     color: '#5470C6',
+          //   },
+          //   markPoint: {
+          //     data: [
+          //       { type: 'max', name: 'Max' },
+          //       { type: 'min', name: 'Min' },
+          //     ],
+          //   },
+          //   data: _this.gd06us,
+          // },
+        ],
+      }
+
+
+      option && _this.myChart.setOption(option)
+      setTimeout(() => {
+        _this.myChart.resize()
+      }, 1000)
+
+      window.addEventListener('resize', function () {
+        _this.myChart.resize()
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+@import '~@/assets/less/uStyle.less';
+</style>
+<style lang="less" scoped>
+.index-container {
+  width: 100%;
+  min-height: calc(100vh - 124px);
+  .common-title {
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 4px;
+      height: 20px;
+      background-image: linear-gradient(150deg, #5eb3f7, #6680f4);
+      border-radius: 2px;
+    }
+    .text {
+      padding-left: 8px;
+      line-height: 20px;
+      font-size: 18px;
+      font-weight: 600;
+    }
+  }
+  .head-title {
+    font-size: 18px;
+    font-weight: 600;
+  }
+  .head-info {
+    position: relative;
+    padding: 15px 15px 0 15px;
+    width: 100%;
+    font-size: 16px;
+    font-weight: 400;
+    height: 250px;
+    // border: 1px solid #148cb1;
+  }
+  .leftHeader {
+    height: 100%;
+    margin-left: 2%;
+    margin-right: 3%;
+  }
+  .opera-container {
+    .item {
+      padding: 16px 0 16px 20px;
+      background: #fff;
+      box-shadow: 0 2px 12px 0 rgba(48, 65, 86, 0.12);
+      border-radius: 6px;
+      margin-right: 10px;
+      .tongji {
+        .number {
+          font-size: 28px;
+          color: #3ea9ff;
+          font-family: '微软雅黑', serif;
+          .number1 {
+            color: #ffb048;
+            font-size: 30px;
+          }
+        }
+        .text {
+          font-size: 12px;
+          margin-top: 4px;
+          color: #737373;
+          letter-spacing: 0.1em;
+        }
+      }
+      .legend {
+        font-size: 2.5vw;
+        border-radius: 100%;
+        width: 60px;
+        height: 60px;
+        float: right;
+        padding-right: 20px;
+        margin-top: 10px;
+        .repair {
+          color: #6680f4;
+          float: right;
+          // background-image: linear-gradient(150deg, #5eb2f77c, #6680f47f);
+        }
+        .upkeep {
+          color: #f9ba27;
+          float: right;
+          // background-image: linear-gradient(150deg, #f7e55e76, #f9ba276b);
+        }
+        .spotcheck {
+          color: #27b150;
+          float: right;
+          // background-image: linear-gradient(150deg, #5ef78c72, #40cbe174);
+        }
+        .inspect {
+          color: #e16b40;
+          float: right;
+          // background-image: linear-gradient(150deg, #ffd3c372, #e16b406e);
+        }
+        .warning {
+          color: #ff4949;
+          float: right;
+          // background-image: linear-gradient(150deg, #eb7f7f77, #ff494979);
+        }
+      }
+    }
+    .item:last-of-type {
+      margin-right: 0;
+    }
+  }
+  .box-card {
+    height: 450px;
+    .a-card__header {
+      border: none;
+    }
+    .a-table th.a-table__cell.is-leaf,
+    .a-table td.a-table__cell {
+      border-right: none;
+    }
+    .a-table th.a-table__cell > .cell {
+      color: #556485;
+      // color: #648ff5;
+    }
+    .a-table .a-table__header-wrapper th,
+    .a-table .a-table__fixed-header-wrapper th {
+      background-color: #f2f7fd;
+      // background-color: #e6f2ff;
+    }
+  }
+  .trend-charts {
+    width: 100%;
+    height: 450px;
+    // min-height: calc(100vh - 18vh - 5.8vh - 84px - 58px - 57px - 50px);
+    padding: 10px;
+    margin-top: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    background: #fff;
+    border-radius: 4px;
+  }
+  .alarmandnotice {
+    margin-top: 10px;
+  }
+  .ant-table-wrapper {
+    margin-top: 10px;
+  }
+}
+</style>