From a751e547d67c4f8e2c6fddf958c1559f792515bd Mon Sep 17 00:00:00 2001
From: lyh <925863403@qq.com>
Date: 星期五, 27 六月 2025 16:11:50 +0800
Subject: [PATCH] 添加工作流

---
 src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue |  842 ++++++++++++++++++++++++++++---------------------------
 1 files changed, 426 insertions(+), 416 deletions(-)

diff --git a/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue
index e923eb5..5426507 100644
--- a/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue
+++ b/src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue
@@ -6,60 +6,128 @@
         <a-form layout="inline" @keyup.enter.native="searchQuery">
           <a-row :gutter="24">
             <a-col :md="6" :sm="6">
-              <a-form-item label="鏃堕棿">
-                <a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD"
-                                v-model="dates"/>
+              <a-form-item label="璁惧绫诲瀷">
+                <a-select
+                  :value="queryParams.equipmentType"
+                  mode="multiple"
+                  placeholder="璇烽�夋嫨璁惧绫诲瀷"
+                  allow-clear
+                  :maxTagCount="1"
+                  @change="selectChange($event,'equipmentType')"
+                >
+                  <a-select-option v-for="(item,index) in equipmentTypeList" :value="item.value" :key="index">
+                    {{ item.label }}
+                  </a-select-option>
+                </a-select>
               </a-form-item>
             </a-col>
-            <a-col :lg="2" :md="3" :sm="3" :xs="3">
-              <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
+
+            <a-col :md="6" :sm="6">
+              <a-form-item label="椹卞姩绫诲瀷">
+                <a-select
+                  :value="queryParams.driveType"
+                  mode="multiple"
+                  placeholder="璇烽�夋嫨椹卞姩绫诲瀷"
+                  allow-clear
+                  :maxTagCount="1"
+                  @change="selectChange($event,'driveType')"
+                >
+                  <a-select-option v-for="(item,index) in driveTypeList" :value="item.value" :key="index">
+                    {{ item.label }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="6">
+              <a-form-item label="鏃堕棿">
+                <a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD"
+                                v-model="dates" :allowClear="false"/>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="3" :sm="3" :xs="3">
+              <a-space>
+                <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
+                <a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>
+              </a-space>
+            </a-col>
+
+            <a-col :md="2" :sm="2">
+              <a
+                @click="toggleSearchStatus=!toggleSearchStatus"
+                @selectstart="$event.preventDefault()"
+                style="display: inline-block;height: 32px;line-height: 32px"
+              >
+                {{ toggleSearchStatus ? '鏀惰捣' : '灞曞紑' }}
+                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
+              </a>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="24" v-if="toggleSearchStatus">
+            <a-col :md="6" :sm="6" :xs="6">
+              <a-form-item label="璁惧绾у埆">
+                <a-select
+                  :value="queryParams.deviceLevel"
+                  mode="multiple"
+                  placeholder="璇烽�夋嫨璁惧绾у埆"
+                  allow-clear
+                  :maxTagCount="1"
+                  @change="selectChange($event,'deviceLevel')"
+                >
+                  <a-select-option v-for="(item,index) in device_level_list" :value="item.value" :key="index">
+                    {{ item.label }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="5" :sm="5" :xs="5">
+              <a-form-item label="閲嶈绋嬪害">
+                <a-select
+                  v-model="queryParam.deviceImportanceLevel"
+                  placeholder="璇烽�夋嫨璁惧閲嶈绋嬪害"
+                  allow-clear
+                >
+                  <a-select-option v-for="(item,index) in device_importance_level_list" :value="item.value"
+                                   :key="index">
+                    {{ item.label }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
             </a-col>
           </a-row>
         </a-form>
       </div>
+
       <div id="DeviceList">
         <div class="openRateTrendDg">
-          <div id="Efficiency" class="container" style="margin-top: 20px;">
-            <div class="table2">
-              <table class="dataContent table" border="1" cellspacing="0" cellpadding="0"
-                     style="white-space: nowrap;text-align: left;">
-                <thead>
-                <tr class="thead fixed equipname">
-                  <th class="thgu dong1 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">鎶ヨ鍙�
-                  </th>
-                  <th class="thgu dong2 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">
-                    鍑虹幇娆℃暟
-                  </th>
-                  <th class="thgu dong3 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">
-                    鍚堣鎸佺画鏃堕棿锛堢锛�
-                  </th>
-                  <th class="thgu dong4 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">
-                    鎶ヨ淇℃伅
-                  </th>
-                  <!--<template v-for="(tableHead, index) in tableHeads">-->
-                  <!--<th class="timeth" :colspan="checkedList.length">{{tableHead}}</th>-->
-                  <!--</template>-->
-                </tr>
-                </thead>
-                <tbody>
-                <tr class="mathData" v-for="(item, index) in dataList" @click="TableDraw(index,item)">
-                  <td class="tdgu  kaitou">{{item.alarmCode}}</td>
-                  <td class="tdgu1  kaitou">{{item.count}}</td>
-                  <td class="tdgu2 kaitou">{{item.timeCount}}</td>
-                  <td class="tdgu3 kaitou">{{item.alarmContent}}</td>
-                  <!--<template v-for="(tableHead, index) in item.dataList">-->
-                  <!--<td :style="{background:tableHead.color }">{{tableHead.utilizationRate | numFilter}}</td>-->
-                  <!--</template>-->
-                </tr>
-                </tbody>
-              </table>
-            </div>
+          <a-table :columns="columns" :data-source="dataList" bordered :pagination="false" :scroll="{y:210}"
+                   :customRow="customRow"
+                   rowKey="alarmCode" @expand="handleExpandChange" :loading="outerDataLoading"
+          >
+            <span slot="timeCount" slot-scope="text">{{text | getFormattedTime}}</span>
+            <a-table
+              slot="expandedRowRender"
+              slot-scope="row"
+              :columns="innerColumns"
+              :data-source="row.innerDataList"
+              :pagination="false"
+              rowKey="rowIndex"
+              :loading="innerDataLoading"
+            >
+              <span slot="duration" slot-scope="text">{{text | getFormattedTime}}</span>
+            </a-table>
+          </a-table>
+        </div>
+
+        <a-spin :spinning="echartLoading">
+          <div style="width: 100%;height: 100%;display: flex;">
+            <div id="MdcEquipmentWarningPie" style="height: 100%;width: 35%;"></div>
+            <div id="MdcEquipmentWarningLine" style="height: 100%;width: 65%;"></div>
           </div>
-        </div>
-        <div style="width: 100%;height: 60%;display: flex;">
-          <div id="MdcEquipmentWarningPie" style="height: 100%;width: 35%;"></div>
-          <div id="MdcEquipmentWarningLine" style="height: 100%;width: 65%;"></div>
-        </div>
+        </a-spin>
       </div>
     </div>
   </div>
@@ -67,23 +135,60 @@
 
 <script>
   import moment from 'moment'
-  import { putAction, getAction } from '@/api/manage'
+  import {  getAction } from '@/api/manage'
   import $ from 'jquery'
   import '@/components/table2excel/table2excel'
-  import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'
-  import {
-    JeecgListMixin
-  } from '@/mixins/JeecgListMixin'
+  import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
+  import api from '@api/mdc'
+
+  const columns = [
+    { title: '鎶ヨ鍙�', dataIndex: 'alarmCode', key: 'alarmCode', align: 'center' },
+    { title: '鍑虹幇娆℃暟', dataIndex: 'count', key: 'count', align: 'center', sorter: (a, b) => b.count - a.count },
+    {
+      title: '鍚堣鎸佺画鏃堕棿',
+      dataIndex: 'timeCount',
+      key: 'timeCount',
+      scopedSlots: { customRender: 'timeCount' },
+      align: 'center',
+      sorter: (a, b) => b.timeCount - a.timeCount
+    },
+    { title: '鎶ヨ淇℃伅', dataIndex: 'alarmContent', key: 'alarmContent', align: 'center', ellipsis: true }
+  ]
+
+  const innerColumns = [
+    {
+      title: '',
+      dataIndex: 'rowIndex',
+      key: 'rowIndex',
+      width: 60,
+      align: 'center',
+      customRender: function(t, r, index) {
+        return parseInt(index) + 1
+      }
+    },
+    { title: '璁惧缂栧彿', dataIndex: 'equipmentId', key: 'equipmentId', align: 'center' },
+    { title: '璁惧鍚嶇О', dataIndex: 'equipmentName', key: 'equipmentName', align: 'center' },
+    { title: '鎶ヨ鏃堕棿', dataIndex: 'startTime', key: 'startTime', align: 'center' },
+    { title: '缁撴潫鏃堕棿', dataIndex: 'endTime', key: 'endTime', align: 'center' },
+    {
+      title: '鎸佺画鏃堕棿',
+      dataIndex: 'duration',
+      key: 'duration',
+      scopedSlots: { customRender: 'duration' },
+      align: 'center'
+    }
+  ]
 
   export default {
-    // mixins: [JeecgListMixin],
     name: 'alarmAnalysisMain',
     components: {},
     data() {
       return {
         dataSource: [],
         /* table鍔犺浇鐘舵�� */
-        loading: false,
+        outerDataLoading: false,
+        innerDataLoading: false,
+        echartLoading: false,
         typeTree: '',
         typeParent: 1,
         typeEquipment: 1,
@@ -91,9 +196,17 @@
         TreeIDTwo: 2,
         deviceTypeDict: '',
         dates: [],
+        equipmentTypeList: [],
+        driveTypeList: [],
+        device_level_list: [],
+        device_importance_level_list: [],
         identifying: [],
         queryParam: {},
-        queryParams: {},
+        queryParams: {
+          equipmentType: [],
+          driveType: [],
+          deviceLevel: []
+        },
         queryParamEquip: {},
         queryParamPeople: {},
         efficiencyOptions: [
@@ -109,12 +222,18 @@
         url: {
           efficiencyList: '/mdc/alarmAnalyze/alarmList',
           listByType: '/mdc/MdcUtilizationRate/getByType',
-          alarmTrend: '/mdc/alarmAnalyze/alarmTrend'
+          alarmTrend: '/mdc/alarmAnalyze/alarmTrend',
+          equipmentAlarmList: '/mdc/alarmAnalyze/equipmentAlarmList',
+          queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType'
         },
         tableHeads: [],
         pieDate: [0],
         XData: [0],
-        YData: [0]
+        YData: [0],
+        columns,
+        innerColumns,
+        hasRequestAlarmCodeList: [],
+        toggleSearchStatus: false
       }
     },
     props: { nodeTree: '', Type: '', nodePeople: '' },
@@ -122,15 +241,18 @@
      * 鐢熷懡鍛ㄦ湡 鎸傝浇鍓�
      * */
     created() {
-      this.dates = [moment().subtract('days', 8), moment().subtract('days', 1)]
-      this.queryParam.startDate = moment(this.dates[0]).format('YYYYMMDD')
-      this.queryParam.endDate = moment(this.dates[1]).format('YYYYMMDD')
-      this.queryParam.typeTree = '1'
-      this.loadData1()
-
+      this.searchReset()
+      this.queryGroup()
+      this.getDriveTypeByApi()
+      this.initDictData('device_level')
+      this.initDictData('device_importance_level')
     },
     mounted() {
       this.drawWrin()
+      window.addEventListener('resize', this.handleWindowResize)
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.handleWindowResize)
     },
     watch: {
       Type(valmath) {
@@ -170,9 +292,78 @@
         } else {
           return '0'
         }
+      },
+
+      /**
+       * 鏍煎紡鍖栨椂闂�
+       * @param seconds 绉掓暟
+       * @returns '' 鏍煎紡鍖栧悗鏃堕棿瀛楃涓�
+       */
+      getFormattedTime(seconds) {
+        var hours = Math.floor(seconds / 3600)
+        var minutes = Math.floor((seconds % 3600) / 60)
+        var secs = seconds % 60
+
+        if (hours === 0) {
+          if (minutes === 0) {
+            return secs === 0 ? 0 : `${secs}绉抈
+          } else {
+            if (secs === 0) {
+              return `${minutes}鍒哷
+            }
+            return `${minutes}鍒� ${secs}绉抈
+          }
+        } else {
+          if (minutes === 0 && secs === 0) {
+            return `${hours}灏忔椂`
+          } else if (minutes !== 0 && secs === 0) {
+            return `${hours}灏忔椂 ${minutes}鍒哷
+          }
+        }
+        return `${hours}灏忔椂 ${minutes}鍒� ${secs}绉抈
       }
     },
     methods: {
+      queryGroup() {
+        getAction(this.url.queryEquipmentType).then(res => {
+          if (res.success) {
+            this.equipmentTypeList = res.result.map(item => {
+              return {
+                label: item.equipmentTypeName,
+                value: item.equipmentTypeName
+              }
+            })
+          } else {
+            this.$notification.warning({
+              message: '娑堟伅',
+              description: res.message
+            })
+          }
+        })
+      },
+
+      // 璋冪敤鎺ュ彛鑾峰彇鎺у埗绯荤粺绫诲瀷
+      getDriveTypeByApi() {
+        api.getDriveTypeApi().then((res) => {
+          if (res.success) this.driveTypeList = res.result
+        })
+      },
+
+      initDictData(dictCode) {
+        // //浼樺厛浠庣紦瀛樹腑璇诲彇瀛楀吀閰嶇疆
+        if (getDictItemsFromCache(dictCode)) {
+          this[dictCode + '_list'] = getDictItemsFromCache(dictCode)
+          return
+        }
+        //鏍规嵁瀛楀吀Code, 鍒濆鍖栧瓧鍏告暟缁�
+        ajaxGetDictItems(dictCode, null).then((res) => {
+          if (res.success) {
+            this[dictCode + '_list'] = res.result
+            return
+          }
+        })
+      },
+
       numBerTwo(value) {
         if (value) {
           return parseFloat((value * 100).toFixed(2))
@@ -180,36 +371,29 @@
           return '0'
         }
       },
+
       TableDraw(key, val) {
         let that = this
+        that.echartLoading = true
         that.queryParam.alarmCode = val.alarmCode
         console.log(this.queryParam)
-        that.pieDate = []
-        that.XData = []
-        that.YData = []
-        getAction(that.url.alarmTrend, that.queryParam).then(res => {
-          if (res.success) {
-            for (var i = 0; i < res.result.equipmentCountList.length; i++) {
-              that.pieDate.push({
-                name: res.result.equipmentCountList[i].key,
-                value: res.result.equipmentCountList[i].count
+        getAction(that.url.alarmTrend, that.queryParam)
+          .then(res => {
+            if (res.success) {
+              that.pieDate = res.result.equipmentCountList.map(item => {
+                return {
+                  name: item.key,
+                  value: item.count
+                }
               })
+              that.XData = res.result.dateCountList.map(item => item.key)
+              that.YData = res.result.dateCountList.map(item => item.count)
+              that.drawWrin()
             }
-            for (var j = 0; j < res.result.dateCountList.length; j++) {
-              that.XData.push(res.result.dateCountList[j].key)
-              that.YData.push(res.result.dateCountList[j].count)
-            }
-            // this.tableHeads = res.result.dates
-            // this.dataList = res.result
-            // this.draw()
-            // this.checkSameData(this.dataList)
-            // this.checkSameData1(this.dataList)
-            // this.checkSameData2(this.dataList)
-            // this.combineCell();
-            // this.initDeviceType(this.dataList)
-            that.drawWrin()
-          }
-        })
+          })
+          .finally(() => {
+            that.echartLoading = false
+          })
         console.log(this.YData)
 
       },
@@ -217,149 +401,68 @@
         //Can not slect days before today and today
         return current && current > moment().subtract('days', 1)
       },
-      initDeviceType(deviceList) {
-        let dictCode = 'mdc_equipmentType'
-        let items = []
-        items = getDictItemsFromCache(dictCode)
-        if (deviceList && items.length > 0) {
-          for (let a = 0; a < deviceList.length; a++) {
-            if (items && items.length > 0) {
-              for (let i = 0; i < items.length; i++) {
-                if (deviceList[a].equipmentType == items[i].value) {
-                  deviceList[a].equipmentType = items[i].title
-                }
-              }
-            } else {
-              ajaxGetDictItems(dictCode, null).then((res) => {
-                if (res.success) {
-                  let items = res.result
-                  for (let i = 0; i < items.length; i++) {
-                    if (deviceList[a].equipmentType == items[i].value) {
-                      deviceList[a].equipmentType = items[i].title
-                    }
-                  }
-                }
-              })
-            }
-          }
-        }
-      },
+
       dateParamChange(v1, v2) {
         this.queryParam.startDate = v2[0]
         this.queryParam.endDate = v2[1]
       },
+
       searchQuery() {
-        if (this.dates && this.dates.length > 0) {
-          if (this.queryParam.typeTree == '1') {
-            this.queryParam.parentId = this.queryParamEquip.parentId
-            this.queryParam.equipmentId = this.queryParamEquip.equipmentId
-          } else {
-            this.queryParam.parentId = this.queryParamPeople.parentId
-            this.queryParam.equipmentId = ''
-          }
-          this.loadData1()
+        if (this.queryParam.typeTree == '1') {
+          this.queryParam.parentId = this.queryParamEquip.parentId
+          this.queryParam.equipmentId = this.queryParamEquip.equipmentId
         } else {
-          this.$notification.warning({
-            message: '鎻愮ず',
-            description: '璇烽�夋嫨鏃堕棿'
-          })
+          this.queryParam.parentId = this.queryParamPeople.parentId
+          this.queryParam.equipmentId = ''
         }
 
-        // this.onClearSelected()
+        Object.keys(this.queryParams).forEach(item => {
+          if (Array.isArray(this.queryParams[item])) {
+            if (this.queryParams[item].length !== 0) this.queryParam[item] = this.queryParams[item].join()
+            else delete this.queryParam[item]
+          }
+        })
+        this.loadData()
       },
-      // searchReset() {
-      //   this.typeTree = this.queryParam.typeTree
-      //   this.typeParent =  this.queryParam.parentId
-      //   this.typeEquipment = this.queryParam.equipmentId
-      //   this.queryParam = {}
-      //   this.dates = []
-      //   this.queryParam.typeTree = this.typeTree
-      //   this.queryParam.parentId = this.typeParent
-      //   this.queryParam.equipmentId =  this.typeEquipment
-      //   // this.ipagination.current = 1
-      //   this.loadData1();
-      //   // this.queryParam = {}
-      //   // this.dates = []
-      //   // this.loadData()
-      //   // this.onClearSelected()
-      // },
-      // loadData1() {
-      //   let that = this
-      //   that.columns=[
-      //     {
-      //       title: '璁惧缂栧彿',
-      //       align: 'center',
-      //       dataIndex: 'equipmentId',
-      //       width:'150px'
-      //     },
-      //     {
-      //       title: '璁惧鍚嶇О',
-      //       align: 'center',
-      //       dataIndex: 'equipmentName',
-      //       width:'150px'
-      //     },
-      //   ]
-      //   that.tableHeads = []
-      //   that.dataList = []
-      //   getAction(this.url.efficiencyList, that.queryParam).then(res => {
-      //     var tmp = {}
-      //     console.log(res)
-      //     if (res.success)
-      //
-      //       that.dataSource = res.result.mdcEfficiencyList
-      //       for(var k = 0;k<that.dataSource[0].dataList.length;k++){
-      //         that.columns.push(
-      //           {
-      //             title:that.dataSource[0].dataList.theDate,
-      //             align: 'center',
-      //             width:'120px',
-      //             // dataIndex:'utilizationRate',
-      //           }
-      //         )
-      //       }
-      //       for(var i = 0;i<that.dataSource.length;i++){
-      //         for (var j = 0; j < that.dataSource[i].dataList.length;j++){
-      //           // that.columns.push(
-      //           //   {
-      //           //     title:that.dataSource[0].dataList[j].theDate,
-      //           //     align: 'center',
-      //           //     width:'120px',
-      //           //     dataIndex:'utilizationRate',
-      //           //   }
-      //           // )
-      //         }
-      //
-      //       }
-      //       console.log(that.columns)
-      //       console.log(that.dataSource)
-      //       // this.initDeviceType(this.dataList)
-      //       this.draw()
-      //     }
-      //   }
-      loadData1() {
+
+      searchReset() {
+        this.queryParams = {
+          equipmentType: [],
+          driveType: [],
+          deviceLevel: []
+        }
+        this.queryParam = {}
+        this.dates = [moment().subtract('days', 8), moment().subtract('days', 1)]
+        this.queryParam.startDate = moment(this.dates[0]).format('YYYYMMDD')
+        this.queryParam.endDate = moment(this.dates[1]).format('YYYYMMDD')
+        this.queryParam.typeTree = '1'
+        this.loadData()
+      },
+
+      loadData() {
+        this.outerDataLoading = true
         this.tableHeads = []
         this.dataList = []
         getAction(this.url.efficiencyList, this.queryParam).then(res => {
           if (res.success) {
-            // this.tableHeads = res.result.dates
             this.dataList = res.result
-            // this.draw()
-            // this.checkSameData(this.dataList)
-            // this.checkSameData1(this.dataList)
-            // this.checkSameData2(this.dataList)
-            // this.combineCell();
-            // this.initDeviceType(this.dataList)
-
+            this.hasRequestAlarmCodeList = []
           }
+        }).finally(() => {
+          this.outerDataLoading = false
         })
       },
+
       drawWrin() {
-        let equipmentWarningPie = this.$echarts.init(document.getElementById('MdcEquipmentWarningPie'), 'macarons')
+        this.equipmentWarningPie = this.$echarts.init(document.getElementById('MdcEquipmentWarningPie'), 'macarons')
         let equipmentWarningPieOption = {
           title: {
             text: '鍚勮澶囧嚭鐜版鎶ヨ鐨勬瘮渚�',
             x: 'center',
-            y: 'bottom'
+            y: 'bottom',
+            textStyle: {
+              color: '#4FAEDC'
+            }
           },
           tooltip: {
             trigger: 'item',
@@ -371,14 +474,18 @@
             radius: '60%',
             itemStyle: {
               normal: {
-                /*color: function (params) {
-                    var colorList = ['#4169E1', '#A8A8A8'];
-                    return colorList[params.dataIndex]
-                },*/
+                color: function(params) {
+                  var colorList = ['#5AB1EF', '#2EC7C9', '#B6A2DE', '#FFB980', '#D87A80', '#8D98B3']
+                  return colorList[params.dataIndex]
+                },
                 label: {
                   show: true,
-                  position: 'top',
-                  formatter: '{b}\n{c}'
+                  // position: 'top',
+                  formatter: '{b}\n{c}',
+                  color: function(params) {
+                    var colorList = ['#5AB1EF', '#2EC7C9', '#B6A2DE', '#FFB980', '#D87A80', '#8D98B3']
+                    return colorList[params.dataIndex]
+                  }
                 }
               }
             },
@@ -386,13 +493,16 @@
             // data:[{name:'jjjjjjj',value:'2'}]
           }]
         }
-        equipmentWarningPie.setOption(equipmentWarningPieOption, true)
-        let equipmentWarningLine = this.$echarts.init(document.getElementById('MdcEquipmentWarningLine'), 'macarons')
+        this.equipmentWarningPie.setOption(equipmentWarningPieOption, true)
+        this.equipmentWarningLine = this.$echarts.init(document.getElementById('MdcEquipmentWarningLine'), 'macarons')
         let equipmentWarningLineOption = {
           title: {
             text: '姣忓ぉ鍑虹幇姝ゆ姤璀︾殑鏁伴噺璧板娍',
             x: 'center',
-            y: 'bottom'
+            y: 'bottom',
+            textStyle: {
+              color: '#4FAEDC'
+            }
           },
           tooltip: {
             trigger: 'axis'
@@ -405,13 +515,29 @@
               data: this.XData
               /*axisLabel :{
                   interval:0
-              }*/
+              }*/,
+              axisLine: {
+                //x杞寸嚎鐨勯鑹蹭互鍙婂搴�
+                show: true,
+                lineStyle: {
+                  width: 2,
+                  color: '#4FAEDC'
+                }
+              }
             }
           ],
           yAxis: [
             {
               type: 'value',
-              name: '娆℃暟'
+              name: '娆℃暟',
+              axisLine: {
+                //x杞寸嚎鐨勯鑹蹭互鍙婂搴�
+                show: true,
+                lineStyle: {
+                  width: 2,
+                  color: '#4FAEDC'
+                }
+              }
             }
           ],
           series: [
@@ -423,227 +549,111 @@
                 data: [
                   { type: 'max', name: '鏈�澶у��' },
                   { type: 'min', name: '鏈�灏忓��' }
-                ]
+                ],
+                label: {
+                  color: '#fff'
+                }
+              },
+              itemStyle: {
+                normal: {
+                  color: '#2EC7C9'
+                }
               }
             }
           ]
         }
-        equipmentWarningLine.setOption(equipmentWarningLineOption, true)
+        this.equipmentWarningLine.setOption(equipmentWarningLineOption, true)
+      },
+
+      /**
+       * 鑷畾涔夎〃鏍艰瑙﹀彂
+       * @param record 褰撳墠琛屼俊鎭�
+       * @param index 褰撳墠琛屼笅鏍�
+       * @returns {{on: {click: on.click}}} 杩斿洖瀵硅薄
+       */
+      customRow(record, index) {
+        return {
+          on: {
+            click: (event) => {
+              // 濡傛灉鐐瑰嚮鐨勪笉鏄睍寮�鍥炬爣鍖哄煙鍒欐覆鏌撳浘琛紝鐩稿弽鍒欑浉褰撲簬鐐瑰嚮灞曞紑鍥炬爣
+              if (event.target.className !== 'ant-table-row-expand-icon-cell') {
+                this.TableDraw(index, record)
+              } else {
+                if (event.target.children && event.target.children.length > 0) event.target.children[0].click()
+              }
+            }
+          }
+        }
+      },
+
+      /**
+       * 鑷畾涔夎〃鏍艰瑙﹀彂
+       * @param expanded 褰撳墠琛屾槸鍚︿负灞曞紑鐘舵��
+       * @param record 褰撳墠琛屼俊鎭�
+       */
+      handleExpandChange(expanded, record) {
+        let _this = this
+        // 褰撳睍寮�鏃惰嫢璇ヨ鏈灞曞紑杩囨墠浼氳姹傚悗鍙版暟鎹紝灞曞紑杩囩殑鏁版嵁浼氳缂撳瓨鏃犻渶閲嶅璇锋眰
+        this.queryParam.alarmCode = record.alarmCode
+        if (expanded && !this.hasRequestAlarmCodeList.includes(record.alarmCode)) {
+          this.innerDataLoading = true
+          getAction(this.url.equipmentAlarmList, this.queryParam).then(res => {
+            if (res.success) {
+              _this.dataList.forEach(item => {
+                if (item.alarmCode === record.alarmCode) {
+                  item.innerDataList = res.result
+                }
+              })
+              _this.hasRequestAlarmCodeList.push(record.alarmCode)
+            }
+          })
+            .finally(() => {
+              _this.innerDataLoading = false
+            })
+        }
+      },
+
+      selectChange(value, key) {
+        this.queryParams[key] = value
+      },
+
+      /**
+       * 褰撴祻瑙堝櫒鍙绐楀彛灏哄鍙戠敓鏀瑰彉鏃惰Е鍙�
+       */
+      handleWindowResize() {
+        if (this.equipmentWarningPie) this.equipmentWarningPie.resize()
+        if (this.equipmentWarningLine) this.equipmentWarningLine.resize()
       }
     }
   }
 </script>
 <style scoped>
-  .dataContent {
-    white-space: nowrap;
-    /*margin: 0;*/
-    /*border: none;*/
-    border-collapse: separate;
-    border-spacing: 0;
-    /*table-layout: fixed;*/
-    border: 1px solid #ccc;
-    /*border: 1px solid #ccc;*/
-    width: 100%;
-    /*height: 100%;*/
-    /*overflow: hidden;*/
-    /*overflow-y: auto;*/
-    text-align: center;
+  .efficiency_list #DeviceList {
+    height: 90% !important;
   }
 
-  /*.dataContent .fixed th {*/
-  /*width: 50px;*/
-  /*}*/
-
-  .dataContent .thead th {
-    background-color: #fafafa;
-    text-align: center;
-    height: 30px;
-    padding: 5px;
+  /deep/ .ant-table-body .ant-table-row td {
+    padding-top: 10px;
+    padding-bottom: 10px;
   }
 
-  .dataContent .notfixed th {
-    /*width: auto;*/
-  }
-
-  .dataContent tr td {
-    height: 35px;
-  }
-
-  .dataContent .mathData:hover td {
-    background-color: #e6f7ff;
-  }
-
-  .dataContent .mathData td {
-    padding: 10px;
-    /*display: none;*/
-  }
-
-  .dataContent .mathData td {
-    /*background-color: #ff9bd2;*/
+  /deep/ .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > .ant-table-row td {
     cursor: pointer;
   }
 
-  .dataContent .mathData .tdd {
-    /*display: none;*/
+  /deep/ .ant-spin-nested-loading {
+    height: 55%;
   }
 
-  .table2 {
-    width: 100%;
+  /deep/ .ant-spin-container {
     height: 100%;
-    overflow: auto;
   }
 
-  /*tr th {*/
-  /*height: 50px!important;*/
-  /*}*/
-  /*tr td{*/
-  /*height: 50px!important;*/
-  /*}*/
-  .table2 thead tr th:first-child,
-  .table tbody tr .tdgu {
-    position: sticky;
-    left: 0;
-    z-index: 1;
+  /deep/ .ant-table.ant-table-bordered {
+    height: 265px;
   }
 
-  .table tbody tr .kaitou {
-    z-index: 1;
-    background-color: white;
-  }
-
-  .table tbody tr .tdgu1 {
-    position: sticky;
-    left: 150px;
-    z-index: 2;
-  }
-
-  .table tbody tr .tdgu2 {
-    position: sticky;
-    left: 300px;
-    z-index: 2;
-  }
-
-  .table tbody tr .tdgu3 {
-    position: sticky;
-    left: 450px;
-    z-index: 2;
-  }
-
-  .table tbody tr .tdgu4 {
-    position: sticky;
-    left: 550px;
-    z-index: 2;
-  }
-
-  .table tbody tr .tdgu5 {
-    position: sticky;
-    left: 700px;
-    z-index: 2;
-  }
-
-  .table2 thead tr .timeth,
-  .table2 thead tr .thgu {
-    position: sticky;
-    top: 0;
-    z-index: 3;
-  }
-
-  .table2 thead .gudingth th {
-    position: sticky;
-    top: 32px;
-    z-index: 6 !important;
-  }
-
-  .table2 thead .equipname .name {
-    z-index: 3;
-  }
-
-  .table2 thead .equipname .dong1 {
-    z-index: 4;
-    left: 0;
-    /*border: 1px solid #000;*/
-  }
-
-  .table2 thead .equipname .dong2 {
-    z-index: 5;
-    left: 150px;
-  }
-
-  .table2 thead .equipname .dong3 {
-    z-index: 5;
-    left: 300px;
-  }
-
-  .table2 thead .equipname .dong4 {
-    z-index: 5;
-    left: 450px;
-  }
-
-  .table2 thead .equipname .dong5 {
-    z-index: 5;
-    left: 550px;
-  }
-
-  .table2 thead .equipname .dong6 {
-    z-index: 5;
-    left: 700px;
-  }
-
-  @media screen and (min-width: 1920px) {
-    #Efficiency {
-      height: 337px !important;
-      overflow: scroll;
-    }
-  }
-
-  @media screen and (min-width: 1680px) and (max-width: 1920px) {
-    #Efficiency {
-      height: 337px !important;
-      overflow: scroll;
-    }
-  }
-
-  @media screen and (min-width: 1400px) and (max-width: 1680px) {
-    #Efficiency {
-      height: 190px !important;
-      overflow: scroll;
-    }
-  }
-
-  @media screen and (min-width: 1280px) and (max-width: 1400px) {
-    #Efficiency {
-      height: 90px !important;
-      overflow: scroll;
-    }
-  }
-
-  @media screen and (max-width: 1280px) {
-    #Efficiency {
-      height: 90px !important;
-      overflow: scroll;
-    }
-  }
-
-  #Efficiency .table_guding1 {
-    position: absolute;
-    overflow: hidden;
-    width: 500px;
-  }
-
-  #Efficiency .table_guding2 {
-    overflow-x: scroll;
-    width: 500px;
-  }
-
-  /deep/ .ant-card {
-    height: 100% !important;
-  }
-
-  /deep/ .ant-card .ant-card-body {
-    height: 100% !important;
-  }
-
-  .efficiency_list #DeviceList {
-    height: 90% !important;
+  /deep/ .ant-table-scroll > .ant-table-placeholder {
+    height: 210px;
   }
 </style>
\ No newline at end of file

--
Gitblit v1.9.3