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/GroupEquipmentUtilizationRateChart.vue | 327 ++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 268 insertions(+), 59 deletions(-)
diff --git a/src/views/mdc/base/GroupEquipmentUtilizationRateChart.vue b/src/views/mdc/base/GroupEquipmentUtilizationRateChart.vue
index f0346d8..8e3d7cb 100644
--- a/src/views/mdc/base/GroupEquipmentUtilizationRateChart.vue
+++ b/src/views/mdc/base/GroupEquipmentUtilizationRateChart.vue
@@ -1,82 +1,291 @@
<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="璇烽�夋嫨涓績" @change="handleCenterSelectChange">
+ <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" 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="3" :sm="3">
+ <a-form-item label="鏈堜唤">
+ <a-month-picker v-model="queryParam.month" style="width: 100%" value-format="YYYYMM" :allowClear="false"
+ placeholder="璇烽�夋嫨鏈堜唤"/>
+ </a-form-item>
+ </a-col>
+
+ <a-col :md="5" :sm="5">
+ <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/GroupEquipmentUtilizationRateChart/ChartComponent.vue'
+import mdcApi from '@api/mdc'
+import moment from 'moment'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
name: 'GroupEquipmentUtilizationRateChart',
- components: {
- ChartComponent,
- BaseTree,
- DepartTree,
- },
+ components: {},
+ mixins: [JeecgListMixin],
data() {
return {
- activeKey: '1',
- selectEquipment: {},
- selectPeople: {},
- selectTypeTree: '',
- isDepartType: ''
+ disableMixinCreated: true,
+ productionIds: [],//鐝粍
+ centerList: [],
+ groupList: [],
+ queryParam: {
+ month: moment().subtract('1', 'month').format('YYYYMM')
+ }
}
},
- created() {
- this.queryTreeData()
+ mounted() {
+ window.addEventListener('resize', this.handleWindowResize)
+ this.handleWindowResize()
+ this.getCenterListByApi()
},
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.getGroupEquipmentChartDataApi(this.queryParam)
+ .then(res => {
+ if (res.success) {
+ if (Object.keys(res.result).length === 0 || res.result.equipmentNameList.length === 0) {
+ that.$notification.warning({
+ message: '娑堟伅',
+ description: '鏆傛棤鏁版嵁'
+ })
+ // 姝ゅ鏈猺eturn鏄负淇濊瘉鍥捐〃鏁版嵁鑳借娓呴櫎骞跺睍绀虹┖鍥捐〃
+ }
+ that.initChart(res.result)
+ } else {
+ that.$notification.warning({
+ message: '娑堟伅',
+ description: res.message
+ })
+ }
+ })
+ .catch(err => {
+ that.$notification.error({
+ message: '娑堟伅',
+ description: err.message
+ })
+ })
},
- tabChange(val) {
- this.activeKey = val
- this.selectTypeTree = val
+ /**
+ * 鍒濆鍖栧浘琛�
+ * @param chartDataObj 鏁版嵁瀵硅薄 Object
+ */
+ initChart(chartDataObj) {
+ const option = {
+ title: {
+ text: '璁惧缁煎悎鍒╃敤鐜囷紙' + (this.queryParam.month.slice(-2) >= 10 ? this.queryParam.month.slice(-2) : this.queryParam.month.slice(-1)) + '鏈堬級',
+ left: 'center',
+ top: 0,
+ textStyle: {
+ fontSize: 22
+ }
+ },
+ grid: {
+ top: '12%',
+ left: '1%',
+ right: '1%',
+ bottom: '8%',
+ containLabel: true
+ },
+ legend: {
+ top: '6%',
+ right: 'center',
+ itemGap: 20,
+ data: ['24h缁煎悎鍒╃敤鐜�', '24h鍘婚櫎鏁呴殰', '璁″垝宸ヤ綔鏃堕棿缁煎悎鍒╃敤鐜�']
+ },
+ tooltip: {
+ show: true,
+ trigger: 'axis'
+ },
+ xAxis: {
+ type: 'category',
+ // data: ['绔嬪姞u1000-3', '浜旇酱125P', '浜斿潗鏍囧姞宸ヤ腑蹇僄S1000', 'A杞�1000PLUS', '姊у窞80P_2', '闆曞埢鏈�800TE', '鍥涘潗鏍囩珛鍔�104V', '绔嬪姞u1000-4', '绔嬪姞GX710_1', '涓夊潗鏍囩珛鍔�1350', '鍗у姞H5000-1', '绔嬪姞u1000-2', '绔嬪姞1000HS_1', '绔嬪姞1160_1', '绔嬪姞GX710_2', '绔嬪姞u1000-3', '浜旇酱125P', '浜斿潗鏍囧姞宸ヤ腑蹇僄S1000', 'A杞�1000PLUS', '姊у窞80P_2', '闆曞埢鏈�800TE', '鍥涘潗鏍囩珛鍔�104V', '绔嬪姞u1000-4', '绔嬪姞GX710_1', '涓夊潗鏍囩珛鍔�1350', '鍗у姞H5000-1', '绔嬪姞u1000-2', '绔嬪姞1000HS_1', '绔嬪姞1160_1', '绔嬪姞GX710_2', '绔嬪姞u1000-3', '浜旇酱125P', '浜斿潗鏍囧姞宸ヤ腑蹇僄S1000', 'A杞�1000PLUS', '姊у窞80P_2', '闆曞埢鏈�800TE', '鍥涘潗鏍囩珛鍔�104V'],
+ data: chartDataObj.equipmentNameList ? chartDataObj.equipmentNameList : [],
+ axisLabel: {
+ interval: 0, // 鍧愭爣杞村埢搴︽爣绛剧殑鏄剧ず闂撮殧锛屽湪绫荤洰杞翠腑鏈夋晥锛涢粯璁や細閲囩敤鏍囩涓嶉噸鍙犵殑绛栫暐闂撮殧鏄剧ず鏍囩锛涘彲浠ヨ缃垚0寮哄埗鏄剧ず鎵�鏈夋爣绛撅紱濡傛灉璁剧疆涓�1锛岃〃绀恒�庨殧涓�涓爣绛炬樉绀轰竴涓爣绛俱�忥紝濡傛灉鍊间负2锛岃〃绀洪殧涓や釜鏍囩鏄剧ず涓�涓爣绛撅紝浠ユ绫绘帹銆�
+ rotate: 45, // 鍒诲害鏍囩鏃嬭浆鐨勮搴︼紝鍦ㄧ被鐩酱鐨勭被鐩爣绛炬樉绀轰笉涓嬬殑鏃跺�欏彲浠ラ�氳繃鏃嬭浆闃叉鏍囩涔嬮棿閲嶅彔锛涙棆杞殑瑙掑害浠�-90搴﹀埌90搴�
+ inside: false, // 鍒诲害鏍囩鏄惁鏈濆唴锛岄粯璁ゆ湞澶�
+ margin: 15, // 鍒诲害鏍囩涓庤酱绾夸箣闂寸殑璺濈
+ fontSize: 14,
+ color: '#000'
+ }
+ },
+ yAxis: [
+ {
+ type: 'value',
+ name: '鍒╃敤鐜�(%)',
+ axisLine: {
+ show: true
+ },
+ axisLabel: {
+ formatter: '{value}%'
+ }
+ }
+ ],
+ series: [
+ {
+ type: 'bar',
+ name: '24h缁煎悎鍒╃敤鐜�',
+ // data: [53.28, 32.22, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 23, 56, 24, 85, 32, 23, 56, 24, 85, 32, 85, 32, 23, 56, 24, 85, 32]
+ data: chartDataObj.dataList ? chartDataObj.dataList.map(item => item.utilizationRate) : []
+ // label: {
+ // show: true,
+ // position: 'top',
+ // formatter: '{c}%',
+ // avoidLabelOverlap: true
+ // }
+ },
+ {
+ type: 'bar',
+ name: '24h鍘婚櫎鏁呴殰',
+ data: chartDataObj.dataList ? chartDataObj.dataList.map(item => item.amendUtilizationRate) : []
+ // data: [53.28, 32.22, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 23, 56, 24, 85, 32, 23, 56, 24, 85, 32, 85, 32, 23, 56, 24, 85, 32]
+ },
+ {
+ type: 'bar',
+ name: '璁″垝宸ヤ綔鏃堕棿缁煎悎鍒╃敤鐜�',
+ data: chartDataObj.dataList ? chartDataObj.dataList.map(item => item.shiftUtilizationRate) : []
+ // data: [63.25, 32.22, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 85, 32, 85, 32, 23, 56, 24, 85, 32]
+ }
+ ],
+ dataZoom: [
+ {
+ type: 'slider',
+ show: true,
+ xAxisIndex: 0,
+ startValue: 0,
+ endValue: 19,
+ // 鏄惁鏄剧ずdetail锛屽嵆鎷栨嫿鏃跺�欐樉绀鸿缁嗘暟鍊间俊鎭�
+ showDetail: false,
+ // empty锛氬綋鍓嶆暟鎹獥鍙ｅ鐨勬暟鎹紝琚缃负绌恒��
+ // 鍗充笉浼氬奖鍝嶅叾浠栬酱鐨勬暟鎹寖鍥�
+ filterMode: 'empty',
+ // 鎺у埗鎵嬫焺鐨勫昂瀵�
+ // handleSize: 0,
+ // 鏄惁閿佸畾閫夋嫨鍖哄煙锛堟垨鍙仛鏁版嵁绐楀彛锛夌殑澶у皬
+ zoomLock: true,
+ brushSelect: false
+ },
+ {
+ // 娌℃湁涓嬮潰杩欏潡鐨勮瘽锛屽彧鑳芥嫋鍔ㄦ粴鍔ㄦ潯锛�
+ // 榧犳爣婊氳疆鍦ㄥ尯鍩熷唴涓嶈兘鎺у埗澶栭儴婊氬姩鏉�
+ type: 'inside',
+ show: true,
+ // 鎺у埗鍝釜杞达紝濡傛灉鏄痭umber琛ㄧず鎺у埗涓�涓酱锛�
+ xAxisIndex: 0,
+ // 婊氳疆鏄惁瑙﹀彂缂╂斁
+ zoomOnMouseWheel: false,
+ // 榧犳爣绉诲姩鑳藉惁瑙﹀彂骞崇Щ
+ moveOnMouseMove: true,
+ // 榧犳爣婊氳疆鑳藉惁瑙﹀彂骞崇Щ
+ moveOnMouseWheel: true
+ }
+ ]
+ }
+ 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, true)
+ }
+ })
},
- changeSelectionNodedd(val) {
- this.selectPeople = val
- this.selectTypeTree = '2'
+ /**
+ * 鑾峰彇鐝粍鍒楄〃
+ * @param productionId 涓績Id
+ * @param isInitLoad 鏄惁涓哄垵濮嬪寲鍔犺浇
+ */
+ getGroupListByApi(productionId, isInitLoad = false) {
+ const that = this
+ mdcApi.getCenterOrGroupListApi(productionId)
+ .then(res => {
+ if (res.success) {
+ that.groupList = res.result
+ if (!isInitLoad) return
+ that.handleGroupSelectChange([res.result[0].value])
+ that.loadData()
+ }
+ })
+ },
+
+ /**
+ * 涓績鏀瑰彉鏃惰Е鍙�
+ * @param value 鏀瑰彉鍚庣殑涓績Id
+ */
+ handleCenterSelectChange(value) {
+ if (this.productionIds.length > 0) {
+ this.groupList = []
+ this.productionIds = []
+ delete this.queryParam.productionIds
+ }
+ this.getGroupListByApi(value)
+ },
+
+ /**
+ * 鐝粍鍙戠敓鏀瑰彉鏃惰Е鍙�
+ * @param value 鏀瑰彉鍚庣殑鐝粍Id
+ */
+ handleGroupSelectChange(value) {
+ this.productionIds = value
+ if (value.length === 0) {
+ delete this.queryParam.productionIds
+ return
+ }
+ this.queryParam.productionIds = value.join(',')
+ },
+
+ handleWindowResize() {
+ if (this.chartContainer) this.chartContainer.resize()
}
}
-
}
-</script>
+</script>
\ No newline at end of file
--
Gitblit v1.9.3