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/openRateFractionAnalysis/openRateFractionAnalysisMain.vue |  754 +++++++++++++++++++++++++++++++++------------------------
 1 files changed, 436 insertions(+), 318 deletions(-)

diff --git a/src/views/mdc/base/modules/openRateFractionAnalysis/openRateFractionAnalysisMain.vue b/src/views/mdc/base/modules/openRateFractionAnalysis/openRateFractionAnalysisMain.vue
index 0fe423b..5b492c7 100644
--- a/src/views/mdc/base/modules/openRateFractionAnalysis/openRateFractionAnalysisMain.vue
+++ b/src/views/mdc/base/modules/openRateFractionAnalysis/openRateFractionAnalysisMain.vue
@@ -1,91 +1,187 @@
 <template>
   <div class="efficiency_list" style="width: 100%;height: 100%;">
-    <a-card :bordered="false">
+    <div :bordered="false" style="height: 100%">
       <!-- 鏌ヨ鍖哄煙 -->
       <div class="table-page-search-wrapper">
         <a-form layout="inline" @keyup.enter.native="searchQuery">
           <a-row :gutter="24">
             <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"/>
+                <a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD"
+                                v-model="dates" :allowClear="false"/>
               </a-form-item>
             </a-col>
-            <a-col :md="7" :sm="7" :xs="7">
+
+            <a-col :md="9" :sm="9" :xs="9">
               <a-form-item label="鏃堕棿娈�">
-                <a-time-picker :default-value="moment('00:00', 'HH:mm')" format="HH:mm" @change="onChangeStart" />
-                鑷�
-                <a-time-picker :default-value="moment('08:00', 'HH:mm')" format="HH:mm" @change="onChangeEnd" />
+                <a-space>
+                  <a-time-picker :default-value="moment('00:00', 'HH:mm')" format="HH:mm" @change="onChangeStart" :allowClear="false"/>
+                  鑷�
+                  <a-time-picker :default-value="moment('08:00', 'HH:mm')" format="HH:mm" @change="onChangeEnd" :allowClear="false"/>
+                  <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
+                  <a-button type="primary" @click="searchReset" icon="reload">閲嶇疆</a-button>
+                </a-space>
               </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="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">
+              <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 :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: center;">
-                <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: 100px; max-width: 100px;width: 100px;">璁惧绫诲瀷</th>
-                  <template v-for="(tableHead, index) in tableHeads">
-                    <th class="timeth">{{tableHead}}</th>
-                  </template>
-                </tr>
-                </thead>
-                <tbody>
-                <tr class="mathData" v-for="(item, index) in dataList" @click="TableDraw(index,item)">
-                  <td  class="tdgu  kaitou">{{item.equipmentId}}</td>
-                  <td  class="tdgu1 kaitou">{{item.equipmentName}}</td>
-                  <td  class="tdgu2 kaitou">{{item.equipmentType}}</td>
-                  <template v-for="(tableHead, index) in item.dataList">
-                    <td :style="{background:tableHead.color }">{{tableHead.utilizationRate | numFilter}}</td>
-                  </template>
-                </tr>
-                </tbody>
-              </table>
-            </div>
+        <a-spin :spinning="loading">
+          <div id="Efficiency" class="container" style="margin-bottom: 15px;">
+              <div class="table2">
+                <table class="dataContent table" border="1" cellspacing="0" cellpadding="0"
+                       style="white-space: nowrap;text-align: center;">
+                  <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: 162px; max-width: 162px;width: 162px;">
+                      璁惧鍚嶇О
+                    </th>
+                    <th class="thgu dong3 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">
+                      璁惧绫诲瀷
+                    </th>
+                    <template v-for="(tableHead, index) in tableHeads">
+                      <th class="timeth">{{tableHead}}</th>
+                    </template>
+                  </tr>
+                  </thead>
+                  <tbody>
+                  <tr class="mathData" v-for="(item, index) in dataList" @click="TableDraw(index,item)">
+                    <td class="tdgu  kaitou">{{item.equipmentId}}</td>
+                    <td class="tdgu1 kaitou">{{item.equipmentName}}</td>
+                    <td class="tdgu2 kaitou">{{item.equipmentType}}</td>
+                    <template v-for="(tableHead, index) in item.dataList">
+                      <td :style="{background:tableHead.color }">{{tableHead.utilizationRate | numFilter}}</td>
+                    </template>
+                  </tr>
+                  </tbody>
+                </table>
+              </div>
           </div>
-        </div>
-        <div id="openRateTrendChart" style="width: 100%;height: 60%"></div>
+        </a-spin>
+
+        <div id="openRateTrendChart"></div>
       </div>
-    </a-card>
+    </div>
   </div>
 </template>
 
 <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 api from '@api/mdc'
+
   export default {
-    // mixins: [JeecgListMixin],
     name: 'openRateFractionAnalysisMain',
-    components: {},
     data() {
       return {
         dataSource: [],
         /* table鍔犺浇鐘舵�� */
         loading: false,
-        typeTree: "",
+        typeTree: '',
         typeParent: 1,
         typeEquipment: 1,
         TreeIDOne: 1,
         TreeIDTwo: 2,
         deviceTypeDict: '',
         dates: [],
+        equipmentTypeList: [],
+        driveTypeList: [],
+        device_level_list: [],
+        device_importance_level_list: [],
         identifying: [],
         queryParam: {},
-        queryParams: {},
+        queryParams: {
+          equipmentType: [],
+          driveType: [],
+          deviceLevel: []
+        },
         queryParamEquip: {},
         queryParamPeople: {},
         efficiencyOptions: [
@@ -100,11 +196,16 @@
         dataList: [],
         url: {
           efficiencyList: '/mdc/efficiencyReport/utilizationRateSectionAnalyze',
-          listByType: '/mdc/MdcUtilizationRate/getByType'
+          listByType: '/mdc/MdcUtilizationRate/getByType',
+          queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType'
         },
         tableHeads: [],
-        XData:[0],
-        YData:[0],
+        XData: [0],
+        YData: [0],
+        isLazyRequest: '',// 鏄惁寮�鍚噿鍔犺浇
+        requestAllDataSize: 8,// 鎬诲叡璇锋眰鐨勫垪琛ㄩ」鏁扮洰
+        everyRequestDataSize: 15,// 姣忔璇锋眰鐨勫垪琛ㄩ」鏁扮洰
+        toggleSearchStatus:false
       }
     },
     props: { nodeTree: '', Type: '', nodePeople: '' },
@@ -112,18 +213,23 @@
      * 鐢熷懡鍛ㄦ湡 鎸傝浇鍓�
      * */
     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.startTime = '00:00'
-      this.queryParam.endTime = "08:00"
-      this.queryParam.typeTree = "1"
-      this.loadData1()
-
+      this.queryGroup()
+      this.getDriveTypeByApi()
+      this.initDictData('device_level')
+      this.initDictData('device_importance_level')
+    },
+    mounted() {
+      this.tableScroll = document.querySelector('.table2')
+      this.searchReset()
+      window.addEventListener('resize',this.handleWindowResize)
+    },
+    beforeDestroy() {
+      this.tableScroll.removeEventListener('scroll', this.tableScrollX)
+      window.removeEventListener('resize',this.handleWindowResize)
     },
     watch: {
       Type(valmath) {
-        this.dataList = [];
+        this.dataList = []
         this.queryParam.typeTree = valmath
       },
       nodeTree(val) { //鐩戝惉currSelected 鍙樺寲锛屽皢鍙樺寲鍚庣殑鏁板�间紶閫掔粰 getCurrSelected 浜嬩欢
@@ -162,24 +268,71 @@
       }
     },
     methods: {
-      moment,
-      onChangeStart(time, timeString) {
-        this.queryParam.startTime = timeString
-        // console.log(time, timeString);
+      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
+            })
+          }
+        })
       },
-      onChangeEnd(time, timeString) {
-        this.queryParam.endTime = timeString
-        // console.log(time, timeString);
+
+      // 璋冪敤鎺ュ彛鑾峰彇鎺у埗绯荤粺绫诲瀷
+      getDriveTypeByApi() {
+        api.getDriveTypeApi().then((res) => {
+          if (res.success) this.driveTypeList = res.result
+        })
       },
-      numBerTwo(value){
-        if (value) {
-          return parseFloat((value * 100).toFixed(2))
-        } else {
-          return '0'
+
+      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
+          }
+        })
       },
-      TableDraw(key,val) {
-        this.XData=[0]
+
+      loadData() {
+        this.loading = true
+        this.tableHeads = []
+        this.dataList = []
+        // 鑻ユ棩鏈熼�夋嫨鍣ㄨ缃殑鏌ヨ璇锋眰鏁伴噺瓒呰繃15鏉″垯寮�鍚噿鍔犺浇
+        if (this.requestAllDataSize > 15) {
+          // 寮�鍚噿鍔犺浇鍚庡皢缁撴潫鏃ユ湡璁剧疆涓哄紑濮嬫棩鏈熶箣鍚庣殑14澶╋紝鍗冲厛鏌ヨ15澶╁唴鐨勬暟鎹�
+          this.queryParam.endDate = moment(this.queryParam.startDate).add(this.everyRequestDataSize - 1, 'days').format('YYYYMMDD')
+          this.isLazyRequest = true
+          this.tableScroll.removeEventListener('scroll', this.tableScrollX) // 涓洪伩鍏嶆粴鍔ㄦ潯鏈夋粴鍔ㄨ窛绂诲悗鍚庣偣鍑绘煡璇㈡寜閽Е鍙戞粴鍔ㄤ簨浠讹紝鍥犳鍦ㄨЕ鍙戜簨浠跺墠绉婚櫎浜嬩欢
+        }
+        getAction(this.url.efficiencyList, this.queryParam).then(res => {
+          if (res.success) {
+            this.tableHeads = res.result.dates
+            this.dataList = res.result.mdcEfficiencyList
+            this.draw()
+            this.tableScroll.addEventListener('scroll', this.tableScrollX)
+          }
+        }).finally(() => {
+          this.loading = false
+        })
+      },
+
+      TableDraw(key, val) {
+        this.XData = [0]
         this.YData[0]
         var Xarr = []
         var Yarr = []
@@ -187,129 +340,22 @@
           Xarr.push(val.dataList[i].theDate)
           Yarr.push(this.numBerTwo(val.dataList[i].utilizationRate))
         }
-        this.XData=Xarr
-        this.YData=Yarr
-        // if(this.openRateTrendAnalysisChart !=null && this.openRateTrendAnalysisChart != '' && this.openRateTrendAnalysisChart != undefined){
-        //     this.openRateTrendAnalysisChart.dispose()
-        // }
+        this.XData = Xarr
+        this.YData = Yarr
 
         this.draw()
       },
-      //Can not slect days before today and today
-      disabledDate(current) {
-        return current && current > moment().subtract('days', 1);
-      },
-      dateParamChange(v1, v2) {
-        this.queryParam.startDate = v2[0]
-        this.queryParam.endDate = v2[1]
-      },
-      searchQuery() {
-        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()
-        // this.onClearSelected()
-      },
-      // 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() {
-        this.tableHeads = []
-        this.dataList = []
-        getAction(this.url.efficiencyList, this.queryParam).then(res => {
-          if (res.success) {
-            this.tableHeads = res.result.dates
-            this.dataList = res.result.mdcEfficiencyList
-            this.draw()
-            // this.checkSameData(this.dataList)
-            // this.checkSameData1(this.dataList)
-            // this.checkSameData2(this.dataList)
-            // this.combineCell();
-            // this.initDeviceType(this.dataList)
 
-          }
-        })
-      },
-      draw(){
-        let openRateTrendAnalysisChart = this.$echarts.init(document.getElementById('openRateTrendChart'), 'macarons');
+      draw() {
+        this.openRateTrendAnalysisChart = this.$echarts.init(document.getElementById('openRateTrendChart'), 'macarons')
         let openRateTrendChartOptions = {
           title: {
-            text: '鍒╃敤鐜囪蛋鍔垮垎鏋�',
+            text: '鍒╃敤鐜囧垎娈靛垎鏋�',
             x: 'center',
             textStyle: {
               fontSize: 18,
               fontWeight: 'bolder',
-              color: "#151414"
+              color: '#151414'
             }
           },
           tooltip: {
@@ -355,8 +401,125 @@
               }
             }
           ]
-        };
-        openRateTrendAnalysisChart.setOption(openRateTrendChartOptions,true);
+        }
+        this.openRateTrendAnalysisChart.setOption(openRateTrendChartOptions, true)
+      },
+
+      searchQuery() {
+        // 鍥犺Е搴曞埛鏂颁細淇敼鍙傛暟鏃堕棿鍊硷紝鏁呭湪姝ょ敤鏃堕棿閫夋嫨鍣ㄧ殑鏃堕棿鍊煎鍙傛暟鏃堕棿鍊煎啀娆¤祴鍊硷紝鑻ヤ笉杩欐牱鍋氬垯鍙傛暟鏃堕棿鍊煎垯浼氫笌鏃堕棿閫夋嫨鍣ㄤ笂鐨勬椂闂村�间笉涓�鑷�
+        this.queryParam.startDate = moment(this.dates[0]).format('YYYYMMDD')
+        this.queryParam.endDate = moment(this.dates[1]).format('YYYYMMDD')
+
+        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.requestAllDataSize = moment.duration(moment(this.queryParam.endDate) - moment(this.queryParam.startDate), 'millisecond').asDays() + 1
+
+        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.queryParams = {
+          equipmentType: [],
+          driveType: [],
+          deviceLevel: []
+        }
+        this.queryParam = {}
+        this.dates = [moment().subtract('days', 8), moment().subtract('days', 1)]
+        this.requestAllDataSize = this.dates[1].diff(this.dates[0],'days') + 1
+        this.queryParam.startDate = moment(this.dates[0]).format('YYYYMMDD')
+        this.queryParam.endDate = moment(this.dates[1]).format('YYYYMMDD')
+        this.queryParam.startTime = '00:00'
+        this.queryParam.endTime = '08:00'
+        this.queryParam.typeTree = '1'
+        this.loadData()
+      },
+
+      selectChange(value, key) {
+        this.queryParams[key] = value
+      },
+
+      onChangeStart(time, timeString) {
+        this.queryParam.startTime = timeString
+        // console.log(time, timeString);
+      },
+
+      onChangeEnd(time, timeString) {
+        this.queryParam.endTime = timeString
+        // console.log(time, timeString);
+      },
+
+      numBerTwo(value) {
+        if (value) {
+          return parseFloat((value * 100).toFixed(2))
+        } else {
+          return '0'
+        }
+      },
+
+      //Can not slect days before today and today
+      disabledDate(current) {
+        return current && current > moment().subtract('days', 1)
+      },
+
+      dateParamChange(v1, v2) {
+        this.queryParam.startDate = v2[0]
+        this.queryParam.endDate = v2[1]
+        this.dates = [v1[0], v1[1]]
+      },
+
+      moment,
+
+      /**
+       * 婊氬姩鏉¤Е搴曞埛鏂拌〃鏍兼暟鎹�
+       */
+      tableScrollX() {
+        // 褰撴粴鍔ㄦ潯瑙﹀簳涓旀噿鍔犺浇寮�鍚椂瑙﹀彂婊氬姩鏉¤Е搴曞埛鏂�
+        if (Math.ceil(this.tableScroll.scrollLeft + this.tableScroll.clientWidth) + 1 >= this.tableScroll.scrollWidth && this.isLazyRequest) {
+          this.loading = true
+          this.queryParam.startDate = moment(this.queryParam.endDate).add(1, 'days').format('YYYYMMDD')
+          // 鍒ゆ柇璁剧疆鎳掑姞杞藉悗鐨勭粨鏉熸椂闂存槸鍚﹁秴杩囨椂闂撮�夋嫨鍣ㄤ腑璁剧疆鐨勭粨鏉熸椂闂�
+          if (moment(this.queryParam.endDate).add(this.everyRequestDataSize - 1, 'days').format('YYYYMMDD') - moment(this.dates[1]).format('YYYYMMDD') < 0) {
+            //鍐嶆鏌ヨ鍚�15澶╁唴鐨勬暟鎹�
+            this.queryParam.endDate = moment(this.queryParam.endDate).add(this.everyRequestDataSize, 'days').format('YYYYMMDD')
+          } else {
+            // 濡傛灉涓嶅皬浜庢椂闂撮�夋嫨鍣ㄤ腑璁剧疆鐨勬椂闂村垯璁剧疆璇锋眰缁撴潫鏃ユ湡涓烘椂闂撮�夋嫨鍣ㄤ腑璁剧疆鐨勭粨鏉熸椂闂村苟涓斿叧闂噿鍔犺浇锛堟剰鍛崇潃鏈�鍚庝竴娆¤Е搴曞埛鏂帮級
+            this.queryParam.endDate = moment(this.dates[1]).format('YYYYMMDD')
+            this.isLazyRequest = false
+          }
+          getAction(this.url.efficiencyList, this.queryParam).then(res => {
+            if (res.success) {
+              this.tableHeads = [...this.tableHeads, ...res.result.dates]
+              this.dataList.forEach(item1 => {
+                res.result.mdcEfficiencyList.forEach(item2 => {
+                  if (item1.equipmentId === item2.equipmentId) {
+                    item1.dataList = [...item1.dataList, ...item2.dataList]
+                  }
+                })
+              })
+              this.draw()
+            }
+          }).finally(() => {
+            this.loading = false
+          })
+        }
+      },
+
+      /**
+       * 褰撴祻瑙堝櫒鍙绐楀彛灏哄鍙戠敓鏀瑰彉鏃惰Е鍙�
+       */
+      handleWindowResize(){
+        if(this.openRateTrendAnalysisChart) this.openRateTrendAnalysisChart.resize()
       }
     }
   }
@@ -378,19 +541,11 @@
     text-align: center;
   }
 
-  /*.dataContent .fixed th {*/
-  /*width: 50px;*/
-  /*}*/
-
   .dataContent .thead th {
     background-color: #fafafa;
     text-align: center;
     height: 30px;
     padding: 5px;
-  }
-
-  .dataContent .notfixed th {
-    /*width: auto;*/
   }
 
   .dataContent tr td {
@@ -399,152 +554,115 @@
 
   .dataContent .mathData td {
     padding: 10px;
-    /*display: none;*/
-  }
-  .dataContent .mathData:hover td{
-    background-color: #e6f7ff;
-  }
-  .dataContent .mathData .td {
-    /*background-color: #ff9bd2;*/
-    display: inline-block;
-    padding: 10px;
+    cursor: pointer;
   }
 
-  .dataContent .mathData .tdd {
-    /*display: none;*/
+  .dataContent .mathData:hover td {
+    background-color: #e6f7ff;
   }
-  .table2{
-  width: 100%;
-  height: 100%;
-  overflow: auto;
+
+  .table2 {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
   }
-  /*tr th {*/
-    /*height: 50px!important;*/
-  /*}*/
-  /*tr td{*/
-    /*height: 50px!important;*/
-  /*}*/
+
   .table2 thead tr th:first-child,
-  .table tbody tr .tdgu{
+  .table tbody tr .tdgu {
     position: sticky;
     left: 0;
     z-index: 1;
   }
-  .table tbody tr .kaitou{
+
+  .table tbody tr .kaitou {
     z-index: 1;
     background-color: white;
   }
-  .table tbody tr .tdgu1{
+
+  .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){
+  .table tbody tr .tdgu2 {
+    position: sticky;
+    left: 312px;
+    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;
+  }
+
+  .table2 thead .equipname .dong2 {
+    z-index: 5;
+    left: 150px;
+  }
+
+  .table2 thead .equipname .dong3 {
+    z-index: 5;
+    left: 312px;
+  }
+
+  .efficiency_list #DeviceList {
+    height: 90% !important;
+  }
+
   #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;
+
+  #openRateTrendChart{
+    width: 100%;
+    height: 60%
   }
-  /deep/ .ant-card{
-    height: 100%!important;
+
+  @media screen and (min-width: 1920px) {
+    #Efficiency {
+      height: 337px !important;
+    }
   }
-  /deep/ .ant-card .ant-card-body{
-    height: 100%!important;
+
+  @media screen and (min-width: 1680px) and (max-width: 1920px) {
+    #Efficiency {
+      height: 337px !important;
+    }
   }
-  .efficiency_list #DeviceList{
-    height: 90%!important;
+
+  @media screen and (min-width: 1400px) and (max-width: 1680px) {
+    #Efficiency {
+      height: 337px !important;
+    }
+  }
+
+  @media screen and (min-width: 1280px) and (max-width: 1400px) {
+    #Efficiency {
+      height: 200px !important;
+    }
+  }
+
+  @media screen and (max-width: 1280px) {
+    #Efficiency {
+      height: 200px !important;
+    }
   }
 </style>
\ No newline at end of file

--
Gitblit v1.9.3