From 725b0706937306c6341e5dddbcc4fd8de7b8f002 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期二, 01 四月 2025 10:13:18 +0800
Subject: [PATCH] 1、mdc模块实现各利用率图表页面功能并与后端进行联调 2、删除用户修改密码时的输入校验 3、删除用户管理冗余查询字段 4、调整DNC模块获取权限配置功能时调用的获取所有用户列表接口(原先接口有分页参数导致获取不完整)

---
 src/views/mdc/base/GroupUtilizationRateChart.vue |  330 +++++++++++++++++++++++++++++++++++++++++++++---------
 1 files changed, 271 insertions(+), 59 deletions(-)

diff --git a/src/views/mdc/base/GroupUtilizationRateChart.vue b/src/views/mdc/base/GroupUtilizationRateChart.vue
index 7343d52..ad8c62d 100644
--- a/src/views/mdc/base/GroupUtilizationRateChart.vue
+++ b/src/views/mdc/base/GroupUtilizationRateChart.vue
@@ -1,82 +1,294 @@
 <template>
-  <div style="width: 100%; height: 100%;">
-    <a-card :bordered="false">
-      <a-row type="flex" :gutter="16">
-        <a-col :md="5">
-          <a-tabs :activeKey="activeKey" @change="tabChange">
-            <a-tab-pane key="1" tab="杞﹂棿灞傜骇" force-render>
-              <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
-            </a-tab-pane>
-            <a-tab-pane v-if="isDepartType == 0" key="2" tab="閮ㄩ棬灞傜骇">,
-              <depart-tree @getCurrSelectedDD="changeSelectionNodedd"></depart-tree>
-            </a-tab-pane>
-          </a-tabs>
-        </a-col>
-        <a-col :md="19">
-          <ChartComponent :nodePeople='selectPeople' :nodeTree='selectEquipment' :Type="selectTypeTree"/>
-        </a-col>
-      </a-row>
-    </a-card>
-  </div>
+  <a-card>
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :md="3" :sm="3">
+            <a-form-item label="涓績">
+              <a-select v-model="queryParam.productionId" placeholder="璇烽�夋嫨涓績">
+                <a-select-option v-for="item in centerList" :key="item.key">
+                  {{ item.title }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="10" :sm="10">
+            <a-form-item label="鐝粍">
+              <a-select :value="productionIds" placeholder="璇烽�夋嫨鐝粍" mode="multiple" :maxTagCount="5"
+                        @change="handleGroupSelectChange($event,'productionIds')" allowClear>
+                <a-select-option v-for="item in groupList" :key="item.key">
+                  {{ item.title }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+
+
+          <a-col :md="4" :sm="4">
+            <a-form-item label="璁惧绫诲瀷">
+              <a-select v-model="queryParam.equipmentType" placeholder="璇烽�夋嫨璁惧绫诲瀷" allowClear>
+                <a-select-option v-for="item in equipmentTypeList" :key="item.id">
+                  {{ item.equipmentTypeName }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+
+
+          <a-col :md="4" :sm="4">
+            <a-form-item label="鐝埗">
+              <a-select v-model="queryParam.shiftId" placeholder="璇烽�夋嫨鐝埗" allowClear>
+                <a-select-option v-for="item in shiftList" :key="item.value">{{ item.label }}</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+
+
+          <!--          <a-col :md="5" :sm="5">-->
+          <!--            <a-form-item label="鐝">-->
+          <!--              <a-select v-model="queryParam.workTime" placeholder="璇烽�夋嫨鐝" mode="multiple" :maxTagCount="2">-->
+          <!--                <a-select-option key="123">涓�鐝�</a-select-option>-->
+          <!--                <a-select-option key="234">浜岀彮</a-select-option>-->
+          <!--                <a-select-option key="345">涓夌彮</a-select-option>-->
+          <!--              </a-select>-->
+          <!--            </a-form-item>-->
+          <!--          </a-col>-->
+
+          <a-col :md="2" :sm="2">
+            <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-row>
+      </a-form>
+    </div>
+
+    <div id="chart-container" style="height: 700px"></div>
+  </a-card>
 </template>
 
 <script>
-import BaseTree from '../common/BaseTree'
-import DepartTree from './modules/DepartList/DepartListTree/DepartTree'
-import { mapActions } from 'vuex'
-import ChartComponent from '@views/mdc/base/modules/GroupUtilizationRateChart/ChartComponent.vue'
+import mdcApi from '@api/mdc'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 
 export default {
   name: 'GroupUtilizationRateChart',
-  components: {
-    ChartComponent,
-    BaseTree,
-    DepartTree,
-  },
+  components: {},
+  mixins: [JeecgListMixin],
   data() {
     return {
-      activeKey: '1',
-      selectEquipment: {},
-      selectPeople: {},
-      selectTypeTree: '',
-      isDepartType: ''
+      disableMixinCreated: true,
+      queryParam: {},
+      productionIds: [],//鐝粍
+      centerList: [],
+      groupList: [],
+      equipmentTypeList: [],
+      shiftList: []
     }
   },
-  created() {
-    this.queryTreeData()
+  mounted() {
+    window.addEventListener('resize', this.handleWindowResize)
+    this.handleWindowResize()
+    this.getCenterListByApi()
+    this.getEquipmentTypeListApi()
+    this.getShiftListByApi()
   },
   methods: {
-    ...mapActions(['QueryDepartTree']),
-
-    queryTreeData() {
-      this.QueryDepartTree().then(res => {
-        if (res.success) {
-          this.isDepartType = res.result[0].value
-        } else {
-          this.$notification.warning({
-            message: '娑堟伅',
-            description: res.message
-          })
-        }
-      }).finally(() => {
+    // 鑾峰彇鏁版嵁
+    loadData() {
+      this.chartContainer = this.$echarts.init(document.getElementById('chart-container'))
+      this.initChart({})
+      this.chartContainer.showLoading({
+        text: '鏁版嵁鍔犺浇涓� ...',
+        color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+        textColor: '#0696e1'
       })
+      const that = this
+
+      mdcApi.getGroupChartDataApi(this.queryParam)
+        .then(res => {
+          if (res.success) {
+            if (!res.result.dataList || (res.result.dataList && res.result.dataList.length === 0)) {
+              that.$notification.warning({
+                message: '娑堟伅',
+                description: '鏆傛棤鏁版嵁'
+              })
+            }
+            that.initChart(res.result)
+          }
+        })
     },
 
-    tabChange(val) {
-      this.activeKey = val
-      this.selectTypeTree = val
+    /**
+     * 鍒濆鍖栧浘琛�
+     * @param dataList 鍥捐〃鏁版嵁婧�
+     * @param dateList 鏃ユ湡鍒楄〃
+     * @param shiftSubList 鐝鏍囬鍒楄〃
+     * @param shiftDataList 鐝鏁版嵁鍒楄〃
+     */
+    initChart({ dataList, dateList, shiftSubList, shiftDataList }) {
+      const defaultLegendData = ['24灏忔椂', '24灏忔椂锛堝幓闄ゆ晠闅滆澶囷級', '鐝', '绱杩愯鏃堕棿(h)']
+      const defaultSeries = [
+        {
+          type: 'line',
+          name: '24灏忔椂',
+          yAxisIndex: 0,
+          data: dataList ? dataList.map(item => item.utilizationRate) : []
+        },
+        {
+          type: 'line',
+          name: '24灏忔椂锛堝幓闄ゆ晠闅滆澶囷級',
+          yAxisIndex: 0,
+          data: dataList ? dataList.map(item => item.amendUtilizationRate) : []
+        },
+        {
+          type: 'line',
+          name: '鐝',
+          yAxisIndex: 0,
+          data: dataList ? dataList.map(item => item.shiftUtilizationRate) : []
+        },
+        {
+          type: 'bar',
+          name: '绱杩愯鏃堕棿(h)',
+          yAxisIndex: 1,
+          barWidth: '30%',
+          data: dataList ? dataList.map(item => item.processLong) : []
+        }
+      ]
+      const option = {
+        title: {
+          text: '璁惧缁煎悎鍒╃敤鐜�',
+          left: 'center',
+          top: 0,
+          textStyle: {
+            fontSize: 22
+          }
+        },
+        grid: {
+          top: '12%',
+          left: '1%',
+          right: '1%',
+          bottom: '1%',
+          containLabel: true
+        },
+        legend: {
+          top: '6%',
+          right: 'center',
+          itemGap: 20,
+          data: defaultLegendData
+        },
+        tooltip: {
+          show: true,
+          trigger: 'axis'
+        },
+        xAxis: {
+          type: 'category',
+          data: dateList ? dateList : []
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '鍒╃敤鐜�(%)',
+            axisLine: {
+              show: true
+            },
+            axisLabel: {
+              formatter: '{value}%'
+            }
+          },
+          {
+            type: 'value',
+            name: '杩愯鏃堕棿(h)',
+            axisLine: {
+              show: true
+            }
+          }
+        ],
+        series: defaultSeries
+      }
+      if (shiftSubList) {
+        option.legend.data = defaultLegendData.concat(shiftSubList)
+        const newSeriesData = shiftDataList.map(item => {
+          return {
+            type: 'line',
+            name: item.shiftSubName,
+            yAxisIndex: 0,
+            data: item.dataList ? item.dataList.map(item => item.utilizationRate) : []
+          }
+        })
+
+        option.series = defaultSeries.concat(newSeriesData)
+      }
+
+      this.chartContainer.setOption(option, true)
+      this.chartContainer.hideLoading()
     },
 
-    changeSelectionNode(val) {
-      this.selectEquipment = val
-      this.selectTypeTree = '1'
+    // 鑾峰彇涓績鍒楄〃
+    getCenterListByApi() {
+      const that = this
+      mdcApi.getCenterOrGroupListApi()
+        .then(res => {
+          if (res.success) {
+            that.centerList = res.result
+            that.queryParam.productionId = res.result[0].value
+            that.getGroupListByApi(res.result[0].value)
+          }
+        })
     },
 
-    changeSelectionNodedd(val) {
-      this.selectPeople = val
-      this.selectTypeTree = '2'
+    /**
+     * 鑾峰彇鐝粍鍒楄〃
+     * @param productionId 涓績Id
+     */
+    getGroupListByApi(productionId) {
+      const that = this
+      mdcApi.getCenterOrGroupListApi(productionId)
+        .then(res => {
+          if (res.success) {
+            that.groupList = res.result
+            that.handleGroupSelectChange([res.result[0].value])
+            that.loadData()
+          }
+        })
+    },
+
+    /**
+     * 鐝粍鍙戠敓鏀瑰彉鏃惰Е鍙�
+     * @param value 鏀瑰彉鍚庣殑鍊�
+     */
+    handleGroupSelectChange(value) {
+      this.productionIds = value
+      this.queryParam.productionIds = value.join(',')
+    },
+
+    // 鑾峰彇璁惧绫诲瀷鍒楄〃
+    getEquipmentTypeListApi() {
+      const that = this
+      mdcApi.getEquipmentTypeListApi()
+        .then(res => {
+          if (res.success) {
+            that.equipmentTypeList = res.result
+          }
+        })
+    },
+
+    // 鑾峰彇鐝埗鍒楄〃
+    getShiftListByApi() {
+      const that = this
+      mdcApi.getShiftListApi()
+        .then(res => {
+          if (res.success) {
+            that.shiftList = res.result
+          }
+        })
+    },
+
+    handleWindowResize() {
+      if (this.chartContainer) this.chartContainer.resize()
     }
   }
-
 }
-</script>
+</script>
\ No newline at end of file

--
Gitblit v1.9.3