From 78689c3fab03143d803712ab9d7c02072cecc67b Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期一, 23 六月 2025 16:52:38 +0800
Subject: [PATCH] 1、解决班组设备利用率以及配送小组利用率图表页面查询区域班组无法随中变化而变化问题 2、解决查询区域班组项与配送小组列表与勾选不一致问题
---
src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisMain.vue | 2
src/views/mdc/base/GroupUtilizationRateChart.vue | 442 +++++++-------
src/views/mdc/base/GroupUtilizationRateCompareChart.vue | 345 +++++-----
src/views/mdc/base/GroupEquipmentUtilizationRateChart.vue | 444 +++++++-------
src/views/mdc/base/DeliveryGroupUtilizationRateChart.vue | 504 ++++++++--------
5 files changed, 860 insertions(+), 877 deletions(-)
diff --git a/src/views/mdc/base/DeliveryGroupUtilizationRateChart.vue b/src/views/mdc/base/DeliveryGroupUtilizationRateChart.vue
index b07adcc..7fa62f0 100644
--- a/src/views/mdc/base/DeliveryGroupUtilizationRateChart.vue
+++ b/src/views/mdc/base/DeliveryGroupUtilizationRateChart.vue
@@ -28,7 +28,7 @@
<a-col :md="8" :sm="8">
<a-form-item label="閰嶉�佸皬缁�">
- <a-select v-model="teamCodes" placeholder="璇烽�夋嫨閰嶉�佸皬缁�" mode="multiple" :maxTagCount="3"
+ <a-select :value="teamCodes" placeholder="璇烽�夋嫨閰嶉�佸皬缁�" mode="multiple" :maxTagCount="3"
@change="handleDeliverGroupSelectChange" allowClear>
<a-select-option v-for="item in deliveryGroupList" :key="item.key">{{ item.title }}</a-select-option>
</a-select>
@@ -45,7 +45,6 @@
<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>
@@ -57,271 +56,264 @@
</template>
<script>
-import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-import moment from 'moment/moment'
-import mdcApi from '@api/mdc'
+ import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+ import moment from 'moment/moment'
+ import mdcApi from '@api/mdc'
-export default {
- name: 'DeliveryGroupUtilizationRateChart',
- components: {},
- mixins: [JeecgListMixin],
- data() {
- return {
- disableMixinCreated: true,
- queryParam: {
- month: moment().subtract('1', 'month').format('YYYYMM')
- },
- productionIds: [],//鐝粍
- teamCodes: [],//閰嶉�佸皬缁�
- centerList: [],
- groupList: [],
- deliveryGroupList: []
- }
- },
- mounted() {
- window.addEventListener('resize', this.handleWindowResize)
- this.getCenterListByApi()
- this.handleWindowResize()
- },
- methods: {
- loadData() {
- this.chartContainer = this.$echarts.init(document.getElementById('chart-container'))
- this.initChart({})
- this.chartContainer.showLoading({
- text: '鏁版嵁鍔犺浇涓� ...',
- color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
- textColor: '#0696e1'
- })
- const that = this
- mdcApi.getDeliveryGroupChartDataApi(this.queryParam)
- .then(res => {
- if (res.success) {
- if (Object.keys(res.result).length === 0 || res.result.teamCodeList.length === 0) {
+ export default {
+ name: 'DeliveryGroupUtilizationRateChart',
+ components: {},
+ mixins: [JeecgListMixin],
+ data() {
+ return {
+ disableMixinCreated: true,
+ queryParam: {
+ month: moment().subtract('1', 'month').format('YYYYMM')
+ },
+ productionIds: [],//鐝粍
+ teamCodes: [],//閰嶉�佸皬缁�
+ centerList: [],//涓績鍒楄〃
+ groupList: [],//鐝粍鍒楄〃
+ deliveryGroupList: []//閰嶉�佸皬缁勫垪琛�
+ }
+ },
+ mounted() {
+ window.addEventListener('resize', this.handleWindowResize)
+ this.getCenterListByApi()
+ this.handleWindowResize()
+ },
+ methods: {
+ loadData() {
+ this.chartContainer = this.$echarts.init(document.getElementById('chart-container'))
+ this.initChart({})
+ this.chartContainer.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#0696e1'
+ })
+ const that = this
+ mdcApi.getDeliveryGroupChartDataApi(this.queryParam)
+ .then(res => {
+ if (res.success) {
+ if (Object.keys(res.result).length === 0 || res.result.teamCodeList.length === 0) {
+ that.$notification.warning({
+ message: '娑堟伅',
+ description: '鏆傛棤鏁版嵁'
+ })
+ // 姝ゅ鏈猺eturn鏄负淇濊瘉鍥捐〃鏁版嵁鑳借娓呴櫎骞跺睍绀虹┖鍥捐〃
+ }
+ that.initChart(res.result)
+ } else {
that.$notification.warning({
message: '娑堟伅',
- description: '鏆傛棤鏁版嵁'
+ description: res.message
})
- // 姝ゅ鏈猺eturn鏄负淇濊瘉鍥捐〃鏁版嵁鑳借娓呴櫎骞跺睍绀虹┖鍥捐〃
}
- that.initChart(res.result)
- } else {
- that.$notification.warning({
- message: '娑堟伅',
- description: res.message
- })
- }
- })
- .catch(err => {
- that.$notification.error({
- message: '娑堟伅',
- description: err.message
})
- })
- },
-
- /**
- * 鍒濆鍖栧浘琛�
- * @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: chartDataObj.teamCodeList ? chartDataObj.teamCodeList : []
- // data: ['鏉庢湁涓虹粍', '涓佺孩鐕曠粍', '鍞愪笢缁�', '鏈卞皬纾婄粍', '寮犲缁�', '瀹嬪畤鍧ょ粍', '缃楀啗缁�', '寮犲弻杩涚粍', '甯告尟鍕囩粍', '钁涘簲榫欑粍', '璧靛箍娑涚粍', '浜庡崕浜粍', '闄堝郴缁�', '鐜嬬户宄扮粍', '鐜嬫檽鏄庣粍', '闄堟灄缁�', '鍚村悏骞崇粍']
- },
- yAxis: [
- {
- type: 'value',
- name: '鍒╃敤鐜�(%)',
- axisLine: {
- show: true
- },
- axisLabel: {
- formatter: '{value}%'
- }
- }
- ],
- series: [
- {
- type: 'bar',
- name: '24h缁煎悎鍒╃敤鐜�',
- // barWidth: '40%',
- // data: [85, 32, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 85, 63, 74, 11, 58]
- data: chartDataObj.dataList ? chartDataObj.dataList.map(item => item.utilizationRate) : []
- },
- {
- type: 'bar',
- name: '鍘婚櫎鏁呴殰璁惧鏃堕棿24h缁煎悎鍒╃敤鐜�',
- // barWidth: '40%',
- // data: [24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 64, 34, 85, 54],
- data: chartDataObj.dataList ? chartDataObj.dataList.map(item => item.amendUtilizationRate) : []
- },
- {
- type: 'bar',
- name: '鐝鍒╃敤鐜�',
- // barWidth: '40%',
- // data: [24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 64, 34, 85, 54],
- data: chartDataObj.dataList ? chartDataObj.dataList.map(item => item.shiftUtilizationRate) : []
- }
- ],
- 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()
- },
-
- // 鑾峰彇涓績鍒楄〃
- 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)
- }
- })
- },
-
- /**
- * 鑾峰彇鐝粍鍒楄〃
- * @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 productionId 鐝粍Id
- * @param isReduceSelectOption 鏄惁鍑忓皯鐝粍閫変腑椤�
- */
- getDeliveryGroupListByApi(productionId, isReduceSelectOption = false) {
- const that = this
- mdcApi.getDeliveryGroupListApi(productionId)
- .then(res => {
- if (res.success) {
- that.deliveryGroupList = res.result
-
- if (!isReduceSelectOption) return
- that.teamCodes.forEach((key, keyIndex, self) => {
- // 濡傛灉灏嗗敮涓�涓�缁勫寘鍚�変腑閰嶉�佸皬缁勯」鐨勭彮缁勫彇娑堝嬀閫夊悗搴斿皢宸插嬀閫夌殑閰嶉�佸皬缁勪竴骞跺彇娑堝嬀閫�
- if (that.deliveryGroupList.findIndex(item => item.key === key) === -1) self.splice(keyIndex, 1)
+ .catch(err => {
+ that.$notification.error({
+ message: '娑堟伅',
+ description: err.message
})
- }
- })
- },
+ })
+ },
- /**
- * 涓績鏀瑰彉鏃惰Е鍙�
- * @param value 鏀瑰彉鍚庣殑涓績Id
- */
- handleCenterSelectChange(value) {
- if (this.productionIds.length > 0) {
+ /**
+ * 鍒濆鍖栧浘琛�
+ * @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: chartDataObj.teamCodeList ? chartDataObj.teamCodeList : []
+ // data: ['鏉庢湁涓虹粍', '涓佺孩鐕曠粍', '鍞愪笢缁�', '鏈卞皬纾婄粍', '寮犲缁�', '瀹嬪畤鍧ょ粍', '缃楀啗缁�', '寮犲弻杩涚粍', '甯告尟鍕囩粍', '钁涘簲榫欑粍', '璧靛箍娑涚粍', '浜庡崕浜粍', '闄堝郴缁�', '鐜嬬户宄扮粍', '鐜嬫檽鏄庣粍', '闄堟灄缁�', '鍚村悏骞崇粍']
+ },
+ yAxis: [
+ {
+ type: 'value',
+ name: '鍒╃敤鐜�(%)',
+ axisLine: {
+ show: true
+ },
+ axisLabel: {
+ formatter: '{value}%'
+ }
+ }
+ ],
+ series: [
+ {
+ type: 'bar',
+ name: '24h缁煎悎鍒╃敤鐜�',
+ // barWidth: '40%',
+ // data: [85, 32, 23, 56, 24, 64, 34, 85, 32, 23, 56, 24, 85, 63, 74, 11, 58]
+ data: chartDataObj.dataList ? chartDataObj.dataList.map(item => item.utilizationRate) : []
+ },
+ {
+ type: 'bar',
+ name: '鍘婚櫎鏁呴殰璁惧鏃堕棿24h缁煎悎鍒╃敤鐜�',
+ // barWidth: '40%',
+ // data: [24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 64, 34, 85, 54],
+ data: chartDataObj.dataList ? chartDataObj.dataList.map(item => item.amendUtilizationRate) : []
+ },
+ {
+ type: 'bar',
+ name: '鐝鍒╃敤鐜�',
+ // barWidth: '40%',
+ // data: [24, 64, 34, 85, 32, 23, 56, 24, 85, 32, 23, 56, 24, 64, 34, 85, 54],
+ data: chartDataObj.dataList ? chartDataObj.dataList.map(item => item.shiftUtilizationRate) : []
+ }
+ ],
+ 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()
+ },
+
+ // 鑾峰彇涓績鍒楄〃
+ 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)
+ }
+ })
+ },
+
+ /**
+ * 鑾峰彇鐝粍鍒楄〃
+ * @param productionId 涓績Id
+ * @param isInitLoad 鏄惁涓哄垵濮嬪寲鍔犺浇
+ */
+ getGroupListByApi(productionId, isInitLoad = false) {
this.groupList = []
- this.productionIds = []
- delete this.queryParam.productionIds
- }
- if (this.teamCodes.length > 0) {
+ const that = this
+ mdcApi.getCenterOrGroupListApi(productionId)
+ .then(res => {
+ if (res.success) {
+ that.groupList = res.result ? res.result : []
+ that.handleGroupSelectChange(res.result && res.result.length > 0 && isInitLoad ? [res.result[0].value] : [])
+ if (!isInitLoad) return
+ that.loadData()
+ }
+ })
+ },
+
+ /**
+ * 鑾峰彇閰嶉�佸皬缁勫垪琛�
+ * @param productionId 鐝粍Id
+ * @param isReduceSelectOption 鏄惁鍑忓皯鐝粍閫変腑椤�
+ */
+ getDeliveryGroupListByApi(productionId, isReduceSelectOption = false) {
this.deliveryGroupList = []
- this.teamCodes = []
- delete this.queryParam.teamCodes
+ const that = this
+ mdcApi.getDeliveryGroupListApi(productionId)
+ .then(res => {
+ if (res.success) {
+ that.deliveryGroupList = res.result ? res.result : []
+
+ // 浠呭噺灏戝嬀閫夐」鏃舵墠杩涜涓嬩竴姝�
+ if (!isReduceSelectOption) return
+ // 淇濈暀鏀瑰彉鍚庣殑閰嶉�佸皬缁勫垪琛ㄤ腑涔嬪墠宸插嬀閫夌殑閰嶉�佸皬缁�
+ const filterTeamCodes = that.teamCodes.filter(item => that.deliveryGroupList.map(item => item.key).includes(item))
+ that.handleDeliverGroupSelectChange(filterTeamCodes)
+ }
+ })
+ },
+
+ /**
+ * 涓績鏀瑰彉鏃惰Е鍙�
+ * @param value 鏀瑰彉鍚庣殑涓績Id
+ */
+ handleCenterSelectChange(value) {
+ this.getGroupListByApi(value)
+ },
+
+ /**
+ * 鐝粍鏀瑰彉鏃惰Е鍙�
+ * @param value 鏀瑰彉鍚庣殑鐝粍Id
+ */
+ handleGroupSelectChange(value) {
+ let isReduceSelectOption
+ if (value.length > this.productionIds.length) isReduceSelectOption = false //澧炲姞鍕鹃�夐」
+ else isReduceSelectOption = true // 鍑忓皯鍕鹃�夐」
+ this.productionIds = value
+ this.queryParam.productionIds = value.join(',')
+ this.getDeliveryGroupListByApi(value.join(','), isReduceSelectOption)
+ },
+
+ /**
+ * 閰嶉�佸皬缁勫彂鐢熸敼鍙樻椂瑙﹀彂
+ * @param value 鏀瑰彉鍚庣殑閰嶉�佸皬缁処d
+ */
+ handleDeliverGroupSelectChange(value) {
+ this.teamCodes = value
+ this.queryParam.teamCodes = value.join(',')
+ },
+
+ handleWindowResize() {
+ if (this.chartContainer) this.chartContainer.resize()
}
- this.getGroupListByApi(value)
- },
-
- /**
- * 鐝粍鏀瑰彉鏃惰Е鍙�
- * @param value 鏀瑰彉鍚庣殑鐝粍Id
- */
- handleGroupSelectChange(value) {
- let isReduceSelectOption
- if (value.length > this.productionIds.length) isReduceSelectOption = false //澧炲姞鍕鹃�夐」
- else isReduceSelectOption = true // 鍑忓皯鍕鹃�夐」
- this.productionIds = value
- this.queryParam.productionIds = value.join(',')
- this.getDeliveryGroupListByApi(value.join(','), isReduceSelectOption)
- },
-
- /**
- * 閰嶉�佸皬缁勫彂鐢熸敼鍙樻椂瑙﹀彂
- * @param value 鏀瑰彉鍚庣殑閰嶉�佸皬缁処d
- */
- handleDeliverGroupSelectChange(value) {
- this.queryParam.teamCodes = value.join(',')
- },
-
- handleWindowResize() {
- if (this.chartContainer) this.chartContainer.resize()
}
}
-}
</script>
\ No newline at end of file
diff --git a/src/views/mdc/base/GroupEquipmentUtilizationRateChart.vue b/src/views/mdc/base/GroupEquipmentUtilizationRateChart.vue
index 8e3d7cb..2c25d68 100644
--- a/src/views/mdc/base/GroupEquipmentUtilizationRateChart.vue
+++ b/src/views/mdc/base/GroupEquipmentUtilizationRateChart.vue
@@ -34,7 +34,6 @@
<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>
@@ -46,246 +45,237 @@
</template>
<script>
-import mdcApi from '@api/mdc'
-import moment from 'moment'
-import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+ import mdcApi from '@api/mdc'
+ import moment from 'moment'
+ import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-export default {
- name: 'GroupEquipmentUtilizationRateChart',
- components: {},
- mixins: [JeecgListMixin],
- data() {
- return {
- disableMixinCreated: true,
- productionIds: [],//鐝粍
- centerList: [],
- groupList: [],
- queryParam: {
- month: moment().subtract('1', 'month').format('YYYYMM')
+ export default {
+ name: 'GroupEquipmentUtilizationRateChart',
+ components: {},
+ mixins: [JeecgListMixin],
+ data() {
+ return {
+ disableMixinCreated: true,
+ productionIds: [],//鐝粍
+ centerList: [],
+ groupList: [],
+ queryParam: {
+ month: moment().subtract('1', 'month').format('YYYYMM')
+ }
}
- }
- },
- mounted() {
- window.addEventListener('resize', this.handleWindowResize)
- this.handleWindowResize()
- this.getCenterListByApi()
- },
- methods: {
- 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) {
+ },
+ mounted() {
+ window.addEventListener('resize', this.handleWindowResize)
+ this.handleWindowResize()
+ this.getCenterListByApi()
+ },
+ methods: {
+ 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: '鏆傛棤鏁版嵁'
+ description: res.message
})
- // 姝ゅ鏈猺eturn鏄负淇濊瘉鍥捐〃鏁版嵁鑳借娓呴櫎骞跺睍绀虹┖鍥捐〃
}
- that.initChart(res.result)
- } else {
- that.$notification.warning({
- message: '娑堟伅',
- description: res.message
- })
- }
- })
- .catch(err => {
- that.$notification.error({
- message: '娑堟伅',
- description: err.message
})
- })
- },
+ .catch(err => {
+ that.$notification.error({
+ message: '娑堟伅',
+ description: err.message
+ })
+ })
+ },
- /**
- * 鍒濆鍖栧浘琛�
- * @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}%'
+ /**
+ * 鍒濆鍖栧浘琛�
+ * @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
}
- }
- ],
- 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]
+ grid: {
+ top: '12%',
+ left: '1%',
+ right: '1%',
+ bottom: '8%',
+ containLabel: true
},
- {
- 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',
+ legend: {
+ top: '6%',
+ right: 'center',
+ itemGap: 20,
+ data: ['24h缁煎悎鍒╃敤鐜�', '24h鍘婚櫎鏁呴殰', '璁″垝宸ヤ綔鏃堕棿缁煎悎鍒╃敤鐜�']
+ },
+ tooltip: {
show: true,
- xAxisIndex: 0,
- startValue: 0,
- endValue: 19,
- // 鏄惁鏄剧ずdetail锛屽嵆鎷栨嫿鏃跺�欐樉绀鸿缁嗘暟鍊间俊鎭�
- showDetail: false,
- // empty锛氬綋鍓嶆暟鎹獥鍙ｅ鐨勬暟鎹紝琚缃负绌恒��
- // 鍗充笉浼氬奖鍝嶅叾浠栬酱鐨勬暟鎹寖鍥�
- filterMode: 'empty',
- // 鎺у埗鎵嬫焺鐨勫昂瀵�
- // handleSize: 0,
- // 鏄惁閿佸畾閫夋嫨鍖哄煙锛堟垨鍙仛鏁版嵁绐楀彛锛夌殑澶у皬
- zoomLock: true,
- brushSelect: false
+ trigger: 'axis'
},
- {
- // 娌℃湁涓嬮潰杩欏潡鐨勮瘽锛屽彧鑳芥嫋鍔ㄦ粴鍔ㄦ潯锛�
- // 榧犳爣婊氳疆鍦ㄥ尯鍩熷唴涓嶈兘鎺у埗澶栭儴婊氬姩鏉�
- type: 'inside',
- show: true,
- // 鎺у埗鍝釜杞达紝濡傛灉鏄痭umber琛ㄧず鎺у埗涓�涓酱锛�
- xAxisIndex: 0,
- // 婊氳疆鏄惁瑙﹀彂缂╂斁
- zoomOnMouseWheel: false,
- // 榧犳爣绉诲姩鑳藉惁瑙﹀彂骞崇Щ
- moveOnMouseMove: true,
- // 榧犳爣婊氳疆鑳藉惁瑙﹀彂骞崇Щ
- moveOnMouseWheel: true
- }
- ]
+ 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()
+ },
+
+ // 鑾峰彇涓績鍒楄〃
+ 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)
+ }
+ })
+ },
+
+ /**
+ * 鑾峰彇鐝粍鍒楄〃
+ * @param productionId 涓績Id
+ * @param isInitLoad 鏄惁涓哄垵濮嬪寲鍔犺浇
+ */
+ getGroupListByApi(productionId, isInitLoad = false) {
+ const that = this
+ mdcApi.getCenterOrGroupListApi(productionId)
+ .then(res => {
+ if (res.success) {
+ that.groupList = res.result
+ that.handleGroupSelectChange(res.result && res.result.length > 0 && isInitLoad ? [res.result[0].value] : [])
+ if (!isInitLoad) return
+ that.loadData()
+ }
+ })
+ },
+
+ /**
+ * 涓績鏀瑰彉鏃惰Е鍙�
+ * @param value 鏀瑰彉鍚庣殑涓績Id
+ */
+ handleCenterSelectChange(value) {
+ this.getGroupListByApi(value)
+ },
+
+ /**
+ * 鐝粍鍙戠敓鏀瑰彉鏃惰Е鍙�
+ * @param value 鏀瑰彉鍚庣殑鐝粍Id
+ */
+ handleGroupSelectChange(value) {
+ this.productionIds = value
+ this.queryParam.productionIds = value.join(',')
+ },
+
+ handleWindowResize() {
+ if (this.chartContainer) this.chartContainer.resize()
}
- this.chartContainer.setOption(option, true)
- this.chartContainer.hideLoading()
- },
-
- // 鑾峰彇涓績鍒楄〃
- 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)
- }
- })
- },
-
- /**
- * 鑾峰彇鐝粍鍒楄〃
- * @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>
\ No newline at end of file
diff --git a/src/views/mdc/base/GroupUtilizationRateChart.vue b/src/views/mdc/base/GroupUtilizationRateChart.vue
index a7f005b..269eb21 100644
--- a/src/views/mdc/base/GroupUtilizationRateChart.vue
+++ b/src/views/mdc/base/GroupUtilizationRateChart.vue
@@ -5,7 +5,7 @@
<a-row :gutter="24">
<a-col :md="3" :sm="3">
<a-form-item label="涓績">
- <a-select v-model="queryParam.productionId" placeholder="璇烽�夋嫨涓績">
+ <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>
@@ -44,21 +44,9 @@
</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>
@@ -70,225 +58,237 @@
</template>
<script>
-import mdcApi from '@api/mdc'
-import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+ import mdcApi from '@api/mdc'
+ import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-export default {
- name: 'GroupUtilizationRateChart',
- components: {},
- mixins: [JeecgListMixin],
- data() {
- return {
- disableMixinCreated: true,
- queryParam: {},
- productionIds: [],//鐝粍
- centerList: [],
- groupList: [],
- equipmentTypeList: [],
- shiftList: []
- }
- },
- mounted() {
- window.addEventListener('resize', this.handleWindowResize)
- this.handleWindowResize()
- this.getCenterListByApi()
- this.getEquipmentTypeListApi()
- this.getShiftListByApi()
- },
- methods: {
- // 鑾峰彇鏁版嵁
- 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)
- }
- })
+ export default {
+ name: 'GroupUtilizationRateChart',
+ components: {},
+ mixins: [JeecgListMixin],
+ data() {
+ return {
+ disableMixinCreated: true,
+ queryParam: {},
+ productionIds: [],//鐝粍
+ centerList: [],
+ groupList: [],
+ equipmentTypeList: [],
+ shiftList: []
+ }
},
+ mounted() {
+ window.addEventListener('resize', this.handleWindowResize)
+ this.handleWindowResize()
+ this.getCenterListByApi()
+ this.getEquipmentTypeListApi()
+ this.getShiftListByApi()
+ },
+ methods: {
+ // 鑾峰彇鏁版嵁
+ loadData() {
+ this.chartContainer = this.$echarts.init(document.getElementById('chart-container'))
+ this.initChart({})
+ this.chartContainer.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#0696e1'
+ })
+ const that = this
- /**
- * 鍒濆鍖栧浘琛�
- * @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}%'
+ 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)
}
+ })
+ },
+
+ /**
+ * 鍒濆鍖栧浘琛�
+ * @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: '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,
+ name: '24灏忔椂锛堝幓闄ゆ晠闅滄椂闂达級',
yAxisIndex: 0,
- data: item.dataList ? item.dataList.map(item => item.utilizationRate) : []
+ 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)
+ option.series = defaultSeries.concat(newSeriesData)
+ }
+
+ this.chartContainer.setOption(option, true)
+ this.chartContainer.hideLoading()
+ },
+
+ // 鑾峰彇涓績鍒楄〃
+ getCenterListByApi() {
+ this.centerList = []
+ const that = this
+ mdcApi.getCenterOrGroupListApi()
+ .then(res => {
+ if (res.success) {
+ that.centerList = res.result
+ that.queryParam.productionId = res.result[0].value
+ that.handleCenterSelectChange(res.result[0].value, { isInitLoad: true })
+ }
+ })
+ },
+
+ /**
+ * 鑾峰彇鐝粍鍒楄〃
+ * @param productionId 涓績Id
+ */
+ getGroupListByApi(productionId, isInitLoad) {
+ this.groupList = []
+ const that = this
+ mdcApi.getCenterOrGroupListApi(productionId)
+ .then(res => {
+ if (res.success) {
+ that.groupList = res.result
+ that.handleGroupSelectChange(res.result && res.result.length > 0 && isInitLoad ? [res.result[0].value] : [])
+ if (!isInitLoad) return
+ that.loadData()
+ }
+ })
+ },
+
+ /**
+ * 涓績鍙戠敓鏀瑰彉鏃惰Е鍙�
+ * @param value 鏀瑰彉鍚庣殑鍊�
+ * @param isInitLoad 鏄惁涓哄垵濮嬪寲鍔犺浇
+ */
+ handleCenterSelectChange(value, { isInitLoad }) {
+ this.getGroupListByApi(value, isInitLoad)
+ },
+
+ /**
+ * 鐝粍鍙戠敓鏀瑰彉鏃惰Е鍙�
+ * @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()
}
-
- this.chartContainer.setOption(option, true)
- this.chartContainer.hideLoading()
- },
-
- // 鑾峰彇涓績鍒楄〃
- 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)
- }
- })
- },
-
- /**
- * 鑾峰彇鐝粍鍒楄〃
- * @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>
\ No newline at end of file
diff --git a/src/views/mdc/base/GroupUtilizationRateCompareChart.vue b/src/views/mdc/base/GroupUtilizationRateCompareChart.vue
index 5ab96c8..c016c8f 100644
--- a/src/views/mdc/base/GroupUtilizationRateCompareChart.vue
+++ b/src/views/mdc/base/GroupUtilizationRateCompareChart.vue
@@ -16,7 +16,6 @@
<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>
@@ -32,186 +31,188 @@
</template>
<script>
-import mdcApi from '@api/mdc'
-import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+ import mdcApi from '@api/mdc'
+ import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-export default {
- name: 'GroupUtilizationRateCompareChart',
- components: {},
- mixins: [JeecgListMixin],
- data() {
- return {
- disableMixinCreated: true,
- centerList: [],
- chartsOptionList: [
- {
- position: 'left',
- title: '鐝粍璁惧缁煎悎鍒╃敤鐜囷紙24h锛�',
- property: 'utilizationRateList'
- },
- {
- position: 'middle',
- title: '鐝粍璁惧缁煎悎鍒╃敤鐜囷紙24h鍘婚櫎鏁呴殰鏃堕棿锛�',
- property: 'amendUtilizationRateList'
- },
- {
- position: 'right',
- title: '鐝粍璁惧缁煎悎鍒╃敤鐜囷紙璁″垝宸ヤ綔鏃堕棿锛�',
- property: 'shiftUtilizationRateList'
- }
- ],
- leftChartContainer: null,
- middleChartContainer: null,
- rightChartContainer: null
- }
- },
-
- mounted() {
- window.addEventListener('resize', this.handleWindowResize)
- this.getCenterListByApi()
- this.handleWindowResize()
- },
- methods: {
- // 鑾峰彇鍥捐〃鏁版嵁
- loadData() {
- const that = this
- this.chartsOptionList.forEach(item => {
- that.initChart(item.position)
- that.chartSetOption(item.position, item.title, [], [], false)
- })
- mdcApi.getGroupRateCompareChartDataApi(this.queryParam.productionId)
- .then(res => {
- if (res.success) {
- that.chartsOptionList.forEach(item => this.chartSetOption(item.position, item.title, res.result[item.property], res.result.dateList))
- } else {
- that.$notification.warning({
- message: '娑堟伅',
- description: res.message
- })
- }
- })
- .catch(err => {
- that.$notification.error({
- message: '娑堟伅',
- description: err.message
- })
- })
- },
-
- /**
- * 鍒濆鍖栧浘琛�
- * @param position 鍥捐〃浣嶇疆 String
- */
- initChart(position) {
- this[position + 'ChartContainer'] = this.$echarts.init(document.getElementById(`chart-container-${position}`))
- this[position + 'ChartContainer'].showLoading({
- text: '鏁版嵁鍔犺浇涓� ...',
- color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
- textColor: '#0696e1'
- })
- },
-
- /**
- * 璁剧疆鍥炬爣閫夐」
- * @param position 鍥捐〃浣嶇疆 String
- * @param title 鍥捐〃鏍囬 String
- * @param dataList 鍥捐〃鏁版嵁婧� Array
- * @param dateList 鍥捐〃妯潗鏍囨湀浠� Array
- * @param isHideLoading 鏄惁鍏抽棴鍔犺浇鍥炬爣 Boolean
- */
- chartSetOption(position, title, dataList, dateList, isHideLoading = true) {
- const option = {
- title: {
- text: title,
- left: 'center',
- top: 0,
- textStyle: {
- fontSize: 22
- }
- },
- grid: {
- top: '10%',
- left: '1%',
- right: '1%',
- bottom: '12%',
- containLabel: true
- },
- legend: {
- bottom: '3%',
- right: 'center',
- data: dataList.map(item => item.productionName)
- },
- tooltip: {
- show: true,
- trigger: 'axis'
- },
- xAxis: {
- type: 'category',
- data: dateList
- },
- yAxis: [
+ export default {
+ name: 'GroupUtilizationRateCompareChart',
+ components: {},
+ mixins: [JeecgListMixin],
+ data() {
+ return {
+ disableMixinCreated: true,
+ centerList: [],
+ chartsOptionList: [
{
- type: 'value',
- name: '鍒╃敤鐜�(%)',
- axisLine: {
- show: true
- },
- axisLabel: {
- formatter: '{value}%'
- }
+ position: 'left',
+ title: '鐝粍璁惧缁煎悎鍒╃敤鐜囷紙24h锛�',
+ property: 'utilizationRateList'
+ },
+ {
+ position: 'middle',
+ title: '鐝粍璁惧缁煎悎鍒╃敤鐜囷紙24h鍘婚櫎鏁呴殰鏃堕棿锛�',
+ property: 'amendUtilizationRateList'
+ },
+ {
+ position: 'right',
+ title: '鐝粍璁惧缁煎悎鍒╃敤鐜囷紙璁″垝宸ヤ綔鏃堕棿锛�',
+ property: 'shiftUtilizationRateList'
}
],
- series: dataList.map(item => {
- return {
- type: 'line',
- name: item.productionName,
- data: item.dataList.map(item => item.utilizationRate)
- }
- })
- // series: [
- // {
- // type: 'line',
- // name: '鏁伴摚涓�鐝�',
- // data: [85, 32, 23, 56, 24, 64]
- // },
- // {
- // type: 'line',
- // name: '鏁伴摚浜岀彮',
- // data: [23, 42, 76, 54, 87, 34]
- // },
- // {
- // type: 'line',
- // name: '鏁伴摚涓夌彮',
- // data: [10, 84, 21, 42, 53, 57]
- // },
- // {
- // type: 'line',
- // name: '鏁拌溅鐝�',
- // data: [23, 32, 42, 35, 64, 53]
- // }
- // ]
+ leftChartContainer: null,
+ middleChartContainer: null,
+ rightChartContainer: null
}
- this[position + 'ChartContainer'].setOption(option, true)
- if (isHideLoading) this[position + 'ChartContainer'].hideLoading()
},
- // 鑾峰彇涓績鍒楄〃
- getCenterListByApi() {
- mdcApi.getCenterOrGroupListApi()
- .then(res => {
- if (res.success) {
- this.centerList = res.result
- this.queryParam.productionId = res.result[0].value
- this.loadData()
- }
+ mounted() {
+ window.addEventListener('resize', this.handleWindowResize)
+ this.getCenterListByApi()
+ this.handleWindowResize()
+ },
+ methods: {
+ // 鑾峰彇鍥捐〃鏁版嵁
+ loadData() {
+ const that = this
+ this.chartsOptionList.forEach(item => {
+ that.initChart(item.position)
+ that.chartSetOption(item.position, item.title, [], [], false)
})
- },
+ mdcApi.getGroupRateCompareChartDataApi(this.queryParam.productionId)
+ .then(res => {
+ if (res.success) {
+ that.chartsOptionList.forEach(item => this.chartSetOption(item.position, item.title, res.result[item.property], res.result.dateList))
+ } else {
+ that.$notification.warning({
+ message: '娑堟伅',
+ description: res.message
+ })
+ }
+ })
+ .catch(err => {
+ that.$notification.error({
+ message: '娑堟伅',
+ description: err.message
+ })
+ })
+ },
- handleWindowResize() {
- if (this.leftChartContainer) this.leftChartContainer.resize()
- if (this.middleChartContainer) this.middleChartContainer.resize()
- if (this.rightChartContainer) this.rightChartContainer.resize()
+ /**
+ * 鍒濆鍖栧浘琛�
+ * @param position 鍥捐〃浣嶇疆 String
+ */
+ initChart(position) {
+ this[position + 'ChartContainer'] = this.$echarts.init(document.getElementById(`chart-container-${position}`))
+ this[position + 'ChartContainer'].showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#0696e1'
+ })
+ },
+
+ /**
+ * 璁剧疆鍥炬爣閫夐」
+ * @param position 鍥捐〃浣嶇疆 String
+ * @param title 鍥捐〃鏍囬 String
+ * @param dataList 鍥捐〃鏁版嵁婧� Array
+ * @param dateList 鍥捐〃妯潗鏍囨湀浠� Array
+ * @param isHideLoading 鏄惁鍏抽棴鍔犺浇鍥炬爣 Boolean
+ */
+ chartSetOption(position, title, dataList, dateList, isHideLoading = true) {
+ const option = {
+ title: {
+ text: title,
+ left: 'center',
+ top: 0,
+ textStyle: {
+ fontSize: 22
+ }
+ },
+ grid: {
+ top: '10%',
+ left: '1%',
+ right: '1%',
+ bottom: '12%',
+ containLabel: true
+ },
+ legend: {
+ bottom: '3%',
+ right: 'center',
+ data: dataList.map(item => item.productionName)
+ },
+ tooltip: {
+ show: true,
+ trigger: 'axis'
+ },
+ xAxis: {
+ type: 'category',
+ data: dateList
+ },
+ yAxis: [
+ {
+ type: 'value',
+ name: '鍒╃敤鐜�(%)',
+ axisLine: {
+ show: true
+ },
+ axisLabel: {
+ formatter: '{value}%'
+ }
+ }
+ ],
+ series: dataList.map(item => {
+ return {
+ type: 'line',
+ name: item.productionName,
+ data: item.dataList.map(item => item.utilizationRate)
+ }
+ })
+ // series: [
+ // {
+ // type: 'line',
+ // name: '鏁伴摚涓�鐝�',
+ // data: [85, 32, 23, 56, 24, 64]
+ // },
+ // {
+ // type: 'line',
+ // name: '鏁伴摚浜岀彮',
+ // data: [23, 42, 76, 54, 87, 34]
+ // },
+ // {
+ // type: 'line',
+ // name: '鏁伴摚涓夌彮',
+ // data: [10, 84, 21, 42, 53, 57]
+ // },
+ // {
+ // type: 'line',
+ // name: '鏁拌溅鐝�',
+ // data: [23, 32, 42, 35, 64, 53]
+ // }
+ // ]
+ }
+ this[position + 'ChartContainer'].setOption(option, true)
+ if (isHideLoading) this[position + 'ChartContainer'].hideLoading()
+ },
+
+ // 鑾峰彇涓績鍒楄〃
+ getCenterListByApi() {
+ this.centerList = []
+ const that = this
+ mdcApi.getCenterOrGroupListApi()
+ .then(res => {
+ if (res.success) {
+ that.centerList = res.result
+ that.$set(that.queryParam, 'productionId', res.result[0].value)
+ that.loadData()
+ }
+ })
+ },
+
+ handleWindowResize() {
+ if (this.leftChartContainer) this.leftChartContainer.resize()
+ if (this.middleChartContainer) this.middleChartContainer.resize()
+ if (this.rightChartContainer) this.rightChartContainer.resize()
+ }
}
}
-}
</script>
\ No newline at end of file
diff --git a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisMain.vue b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisMain.vue
index effe2c4..e04a1b7 100644
--- a/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisMain.vue
+++ b/src/views/mdc/base/modules/comparativeAnalysis/ComparativeAnalysisMain.vue
@@ -7,7 +7,7 @@
<a-row :gutter="24">
<a-col :md="5" :sm="5">
<a-form-item label="璁惧">
- <a-input-search :readOnly="true" v-model="queryParam.equipmentId" @search="deviceSearch"
+ <a-input-search :readOnly="true" v-model="queryParam.equipmentId" @search="deviceSearch" @click="deviceSearch"
placeholder='璇烽�夋嫨璁惧'/>
</a-form-item>
</a-col>
--
Gitblit v1.9.3