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/GroupUtilizationRateChart.vue | 350 ++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 281 insertions(+), 69 deletions(-)
diff --git a/src/views/mdc/base/GroupUtilizationRateChart.vue b/src/views/mdc/base/GroupUtilizationRateChart.vue
index 7343d52..269eb21 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="璇烽�夋嫨涓績" @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($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.equipmentTypeName">
+ {{ 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="2" :sm="2">
+ <a-space>
+ <a-button type="primary" @click="searchQuery" icon="search">鏌ヨ</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,
- },
- data() {
- return {
- activeKey: '1',
- selectEquipment: {},
- selectPeople: {},
- selectTypeTree: '',
- isDepartType: ''
- }
- },
- created() {
- this.queryTreeData()
- },
- methods: {
- ...mapActions(['QueryDepartTree']),
+ 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
- queryTreeData() {
- this.QueryDepartTree().then(res => {
- if (res.success) {
- this.isDepartType = res.result[0].value
- } else {
- this.$notification.warning({
- message: '娑堟伅',
- description: res.message
+ 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: '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
}
- }).finally(() => {
- })
- },
+ 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) : []
+ }
+ })
- tabChange(val) {
- this.activeKey = val
- this.selectTypeTree = val
- },
+ option.series = defaultSeries.concat(newSeriesData)
+ }
- changeSelectionNode(val) {
- this.selectEquipment = val
- this.selectTypeTree = '1'
- },
+ this.chartContainer.setOption(option, true)
+ this.chartContainer.hideLoading()
+ },
- changeSelectionNodedd(val) {
- this.selectPeople = val
- this.selectTypeTree = '2'
+ // 鑾峰彇涓績鍒楄〃
+ 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()
+ }
}
}
-
-}
-</script>
+</script>
\ No newline at end of file
--
Gitblit v1.9.3