From 3a097696dbc536ad29ccf60b7cf381a08e1bebf0 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期四, 26 六月 2025 17:41:30 +0800
Subject: [PATCH] 1、设备日利用率以及设备日利用率对比页面优化图表加载展示区域及代码 2、调整操作工终端登录页背景图片

---
 src/views/mdc/base/modules/EquipmentDayAvail/EquipmentDayAvailMain.vue |  259 +++++++++++++++++----------------------------------
 1 files changed, 85 insertions(+), 174 deletions(-)

diff --git a/src/views/mdc/base/modules/EquipmentDayAvail/EquipmentDayAvailMain.vue b/src/views/mdc/base/modules/EquipmentDayAvail/EquipmentDayAvailMain.vue
index e24d024..accff3c 100644
--- a/src/views/mdc/base/modules/EquipmentDayAvail/EquipmentDayAvailMain.vue
+++ b/src/views/mdc/base/modules/EquipmentDayAvail/EquipmentDayAvailMain.vue
@@ -1,63 +1,57 @@
 <template>
-  <a-spin :spinning="loading">
-    <div :bordered="false" class="device_list">
-      <div class="com_box">
-        <!-- 鏌ヨ鍖哄煙 -->
-        <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
-          <a-form layout="inline" @keyup.enter.native="searchQuery">
-            <a-row :gutter="24">
-              <a-col :md="4" :sm="4">
-                <a-form-item label="璁惧缂栧彿">
-                  <a-input placeholder="杈撳叆璁惧缂栧彿鏌ヨ" :readOnly="readOnly" v-model="queryParams.equipmentId"></a-input>
-                </a-form-item>
-              </a-col>
-              <a-col :md="4" :sm="4">
-                <a-form-item label="璁惧鍚嶇О">
-                  <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" :readOnly="readOnly" v-model="queryParams.equipmentName"></a-input>
-                </a-form-item>
-              </a-col>
-              <a-col :md="4" :sm="4" :xs="4">
-                <a-form-item label="鏃ユ湡">
-                  <a-date-picker v-model="queryParam.dateTime" :disabledDate="disabledDate" format='YYYYMMDD' :allow-clear="false"
-                                 @change="dataChange"/>
-                </a-form-item>
-              </a-col>
-              <a-col :md="4" :sm="4" :xs="4">
-                <a-form-item label="闂撮殧">
-                  <a-select default-value="2" style="width: 140px" v-model="queryParam.timeType">
-                    <a-select-option :value="2">
-                      2
-                    </a-select-option>
-                    <a-select-option :value="3">
-                      3
-                    </a-select-option>
-                    <a-select-option :value="4">
-                      4
-                    </a-select-option>
-                    <a-select-option :value="6">
-                      6
-                    </a-select-option>
-                  </a-select>
-                  灏忔椂
-                </a-form-item>
-              </a-col>
-              <a-col :md="3" :sm="3" :xs="3">
-                <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
-              </a-col>
-            </a-row>
-          </a-form>
-        </div>
-        <!-- table鍖哄煙-begin -->
-        <div id="DeviceList">
-
-          <div style="padding: 5px;width: 100%;height: 100%">
-            <div style="width: 100%;height: 100%" id="dayAvailBar"></div>
-          </div>
-        </div>
-        <!-- table鍖哄煙-end -->
-      </div>
+  <div class="device_list">
+    <!-- 鏌ヨ鍖哄煙 -->
+    <div style=" background-color: #fff" class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :md="4" :sm="4">
+            <a-form-item label="璁惧缂栧彿">
+              <a-input placeholder="杈撳叆璁惧缂栧彿鏌ヨ" readOnly v-model="queryParams.equipmentId"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="5" :sm="5">
+            <a-form-item label="璁惧鍚嶇О">
+              <a-input placeholder="杈撳叆璁惧鍚嶇О鏌ヨ" readOnly v-model="queryParams.equipmentName"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="4" :sm="4" :xs="4">
+            <a-form-item label="鏃ユ湡">
+              <a-date-picker v-model="queryParam.dateTime" :disabledDate="disabledDate" :allow-clear="false"
+                             value-format="YYYYMMDD"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="4" :sm="4" :xs="4">
+            <a-form-item label="闂撮殧">
+              <a-select default-value="2" v-model="queryParam.timeType">
+                <a-select-option :value="2">
+                  2
+                </a-select-option>
+                <a-select-option :value="3">
+                  3
+                </a-select-option>
+                <a-select-option :value="4">
+                  4
+                </a-select-option>
+                <a-select-option :value="6">
+                  6
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="1" :sm="1" :xs="1">
+            <a-form-item label="">灏忔椂</a-form-item>
+          </a-col>
+          <a-col :md="3" :sm="3" :xs="3">
+            <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</a-button>
+          </a-col>
+        </a-row>
+      </a-form>
     </div>
-  </a-spin>
+
+    <a-spin :spinning="spinning">
+      <div style="width: 100%;height: 100%" id="dayAvailBar"></div>
+    </a-spin>
+  </div>
 </template>
 
 <script>
@@ -65,84 +59,62 @@
   import { getAction } from '@/api/manage'
 
   export default {
-    name: 'equipmentDayAvailMain',
-    components: {
-    },
+    name: 'EquipmentDayAvailMain',
     props: { nodeTree: '', Type: '', nodePeople: '' },
     data() {
       return {
-        activeKey: '1',
-        typeTree: '',
-        typeParent: 1,
-        typeEquipment: 1,
         spaceTime: [],
-        useingRates: [],
-        dates: [],
-        xianshi: '',
-        readOnly: true,
+        usingRates: [],
         queryParam: {
           dateTime: undefined,
           timeType: '2'
         },
         queryParams: {},
         queryParamEquip: {},
-        queryParamPeople: {},
-        dataStartsoucre: [],
         url: {
-          comparativeAnalysis: '/mdc/efficiencyReport/comparativeAnalysis',
           dayUtilizationRate: '/mdc/efficiencyReport/dayUtilizationRate',
           getEquipmentByPid: '/mdc/mdcEquipment/getEquipmentByPid',
           getEquipmentByDepPid: '/mdc/mdcEquipment/getEquipmentByDepPid'
         },
-        AnalysisList: {},
-        loading: false
+        spinning: false
       }
     },
     watch: {
       Type(valmath) {
         this.dataList = []
         this.queryParams.typeTree = valmath
-        // console.log(this.queryParams.typeTree)
       },
       nodeTree(val) { //鐩戝惉currSelected 鍙樺寲锛屽皢鍙樺寲鍚庣殑鏁板�间紶閫掔粰 getCurrSelected 浜嬩欢
         if (JSON.stringify(val) != '{}') {
           if (val.equipmentId) {
-            // this.$set(this.queryParam, 'tierName', val.title)
             this.queryParamEquip.parentId = ''
             this.queryParams.equipmentId = val.equipmentId
             this.queryParams.equipmentName = val.equipmentName
-            console.log('XXXval=', val)
             this.queryParamEquip.equipmentId = val.equipmentId
             this.searchQuery()
           } else {
-            // this.$set(this.queryParam, 'tierName', val.title)
             this.queryParamEquip.parentId = val.key
             this.queryParams.equipmentId = ''
             this.initEquipment(val.key)
           }
-
         }
       },
       nodePeople(val) {
         if (JSON.stringify(val) != '{}') {
           if (val.equipmentId) {
-            // this.$set(this.queryParam, 'tierName', val.title)
             this.queryParamEquip.parentId = ''
             this.queryParams.equipmentId = val.equipmentId
             this.queryParamEquip.equipmentId = val.equipmentId
             this.searchQuery()
           } else {
-            // this.$set(this.queryParam, 'tierName', val.title)
             this.queryParamEquip.parentId = val.key
             this.queryParams.equipmentId = ''
             this.initEquipmentDep(val.key)
           }
-
         }
       }
     },
     methods: {
-      moment,
       drawTu() {
         let dayAvailBar = this.$echarts.init(document.getElementById('dayAvailBar'), 'macarons')
         let dayAvailBarOption = {
@@ -194,7 +166,7 @@
                   color: '#4169E1'
                 }
               },
-              data: this.useingRates,
+              data: this.usingRates,
               markPoint: {
                 data: [
                   { type: 'max', name: '鏈�澶у��', symbolSize: 70 },
@@ -205,34 +177,22 @@
           ]
         }
         dayAvailBar.setOption(dayAvailBarOption)
+
+        window.addEventListener('resize', () => dayAvailBar.resize())
       },
       disabledDate(current) {
         //Can not slect days before today and today
         return current && current > moment().subtract('days', 1)
       },
-      dataChange(val) {
-        this.queryParam.dateTime = val.format('YYYYMMDD')
-      },
-      handleChange(value) {
-        this.queryParam.timeType = value
-        // console.log(this.queryParam.timeType)
-      },
-      tabChange(val) {
-        this.activeKey = val
-      },
-      dateParamChange(v1, v2) {
-        // console.log(v1,v2)
-        this.queryParam.startTime = v2[0]
-        this.queryParam.endTime = v2[1]
-        // console.log(v2[0],v2[1])
-      },
       loadAnalysis() {
-        this.loading = true
+        this.spaceTime = []
+        this.usingRates = []
+        this.spinning = true
         getAction(this.url.dayUtilizationRate, this.queryParam).then(res => {
           if (res.success) {
-            this.spaceTime.push(res.result.dataList)
+            this.spaceTime = res.result.dateList
             for (var i = 0; i < res.result.dayRateDto.length; i++) {
-              this.useingRates.push(res.result.dayRateDto[i].utilizationRate)
+              this.usingRates.push(res.result.dayRateDto[i].utilizationRate)
             }
             this.drawTu()
           } else {
@@ -242,7 +202,7 @@
             })
           }
         }).finally(() => {
-          this.loading = false
+          this.spinning = false
         })
       },
       numFilter(value) {
@@ -253,44 +213,16 @@
         }
       },
       searchQuery() {
-        if (this.queryParam.dateTime) {
-          this.loading = true
-          this.spaceTime = []
-          this.useingRates = []
-          if (this.queryParams.typeTree == '1') {
-            this.queryParams.parentId = this.queryParamEquip.parentId
-            // this.queryParams.equipmentId =  this.queryParamEquip.equipmentId
-          } else {
-            this.queryParams.parentId = this.queryParamEquip.parentId
-            // this.queryParams.equipmentId = ""
-          }
-          this.AnalysisList = []
-          //鑾峰彇鏌ヨ鏉′欢
-          this.queryParam.parentId = this.queryParams.parentId
-          this.queryParam.equipmentId = this.queryParams.equipmentId
-          this.queryParam.typeTree = this.queryParams.typeTree
-          getAction(this.url.dayUtilizationRate, this.queryParam).then((res) => {
-            if (res.success) {
-              this.spaceTime = res.result.dateList
-              for (var i = 0; i < res.result.dayRateDto.length; i++) {
-                this.useingRates.push(this.numFilter(res.result.dayRateDto[i].utilizationRate))
-              }
-              this.drawTu()
-            } else {
-              this.$notification.warning({
-                message: '娑堟伅',
-                description: res.message
-              })
-            }
-          }).finally(() => {
-            this.loading = false
-          })
+        if (this.queryParams.typeTree == '1') {
+          this.queryParams.parentId = this.queryParamEquip.parentId
         } else {
-          this.$notification.warning({
-            message: '娑堟伅',
-            description: '璇烽�夋嫨鏃堕棿'
-          })
+          this.queryParams.parentId = this.queryParamEquip.parentId
         }
+        //鑾峰彇鏌ヨ鏉′欢
+        this.queryParam.parentId = this.queryParams.parentId
+        this.queryParam.equipmentId = this.queryParams.equipmentId
+        this.queryParam.typeTree = this.queryParams.typeTree
+        this.loadAnalysis()
       },
       initEquipment(id) {
         let _this = this
@@ -347,75 +279,54 @@
       }
     },
     created() {
-      let collectTime = moment(moment().add(-1, 'd'), 'YYYY-MM-DD')
-      this.queryParams.collectTime = collectTime
-      this.queryParam.dateTime = this.queryParams.collectTime.format('YYYYMMDD')
+      this.queryParam.dateTime = moment().add(-1, 'd').format('YYYYMMDD')
       this.queryParams.typeTree = '1'
       this.initEquipment()
-
     }
   }
 </script>
 
 <style lang="less" scoped>
-  /*@import '~@assets/less/common.less';*/
+  .device_list {
+    display: flex;
+    flex-direction: column;
+
+    /deep/ .ant-spin-nested-loading {
+      flex: 1;
+
+      .ant-spin-container {
+        height: 100%;
+      }
+    }
+  }
 
   @media screen and (min-width: 1920px) {
     .device_list {
       height: 811px !important;
-      overflow: auto;
     }
   }
 
   @media screen and (min-width: 1680px) and (max-width: 1920px) {
     .device_list {
       height: 811px !important;
-      overflow: auto;
     }
   }
 
   @media screen and (min-width: 1400px) and (max-width: 1680px) {
     .device_list {
       height: 663px !important;
-      overflow: auto;
     }
   }
 
   @media screen and (min-width: 1280px) and (max-width: 1400px) {
     .device_list {
       height: 564px !important;
-      overflow: auto;
     }
   }
 
   @media screen and (max-width: 1280px) {
     .device_list {
       height: 564px !important;
-      overflow: auto;
     }
-  }
-
-  /*.device_list{*/
-  /*display: flex;*/
-  /*}*/
-  /*.device_list .table-page-search-wrapper{*/
-  /**/
-  /*}*/
-  /deep/ .ant-card-body {
-    height: 100% !important;
-  }
-
-  .device_list .com_box {
-    display: flex !important;
-    height: 100% !important;
-    flex-direction: column !important;
-  }
-
-  .device_list .table-page-search-wrapper {
-    height: 6% !important;
-  }
-
-  .device_list #DeviceList {
-    height: 90% !important;
   }
 </style>

--
Gitblit v1.9.3