From 266db48e639ce2cd84572c8586876d906b8ce6b8 Mon Sep 17 00:00:00 2001
From: lyh <925863403@qq.com>
Date: 星期一, 23 六月 2025 16:57:47 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/mdc/base/GroupUtilizationRateCompareChart.vue | 345 ++++++++++++++++++++++++++++----------------------------
1 files changed, 173 insertions(+), 172 deletions(-)
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
--
Gitblit v1.9.3