From a939e97c3bf084811089e3513a9aeb3ac4128d29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8C=AB=E7=8C=ABguowen?= <9290821+guowen-the-cat@user.noreply.gitee.com> Date: Mon, 26 May 2025 10:41:48 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B4=A7=E4=BD=8D=E5=88=86=E6=9E=90=E3=80=81?= =?UTF-8?q?=E5=BA=93=E5=AD=98=E5=B9=B3=E9=9D=A2=E5=9B=BE=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/kpi/spaceAnalysis/index.vue | 94 ++++++++-------- ruoyi-ui/src/views/kpi/spacePlan/index.vue | 105 +++++++++++------- 2 files changed, 107 insertions(+), 92 deletions(-) diff --git a/ruoyi-ui/src/views/kpi/spaceAnalysis/index.vue b/ruoyi-ui/src/views/kpi/spaceAnalysis/index.vue index c92c688..d2a3c7c 100644 --- a/ruoyi-ui/src/views/kpi/spaceAnalysis/index.vue +++ b/ruoyi-ui/src/views/kpi/spaceAnalysis/index.vue @@ -43,22 +43,14 @@ export default { }, // 图表实例 chart: null, - // 图表数据（模拟数据，注意删除后echarts图初始化会报一下错） - chartData:[ - { - "巷道2": 1, - "巷道1": 0, - "status": "出库分配" - } - ], - dimensions:[] + // 图表数据（模拟数据） + chartData:[] } } , created() { this.getWarehouseList(); this.handleQuery(); - } , mounted() { @@ -81,13 +73,18 @@ export default { , /** 搜索按钮操作 */ handleQuery() { - // TODO: 调用后端接口获取数据 getSpaceAnalysisList(this.queryParams).then(response => { - this.chartData = response.data.data; - this.updateChart(); + if (response.code === 200) { + this.chartData = response.data; + this.updateChart(); + } else { + this.$message.error(response.msg); + } + }).catch(error => { + console.error('获取数据失败:', error); + this.$message.error('获取数据失败'); }); - } - , + }, /** 重置按钮操作 */ resetQuery() { this.resetForm("queryForm"); @@ -103,12 +100,35 @@ export default { , /** 更新图表数据 */ updateChart() { - this.dimensions=[] - if (this.chartData[0].巷道1!=undefined&&this.chartData[0].巷道1!=null){ - this.dimensions=['status', '巷道1', '巷道2'] - }else { - this.dimensions=['status', '巷道3', '巷道4'] + console.log('chartData:', this.chartData); + if (!this.chartData || !this.chartData.data || this.chartData.data.length === 0) { + console.warn('无效的图表数据'); + return; } + + // 获取数据中所有的巷道字段 + const firstItem = this.chartData.data[0]; + const roadwayFields = Object.keys(firstItem).filter(key => key.startsWith('巷道')); + + // 准备系列配置 + const series = roadwayFields.map(roadway => ({ + name: roadway, + type: 'bar', + data: this.chartData.data.map(item => item[roadway]), + barWidth: '30%', + itemStyle: { + color: roadway === '巷道1' ? '#1890ff' : + roadway === '巷道2' ? '#52c41a' : + roadway === '巷道3' ? '#1890ff' : + roadway === '巷道4' ? '#52c41a' : '#1890ff' + }, + label: { + show: true, + position: 'top' + } + })); + console.log('生成的系列配置:', series); + const option = { title: { text: '货位状态分析', @@ -125,14 +145,11 @@ export default { textStyle: { fontSize: 15, color: "#292c2c" - } - }, - dataset: { - dimensions: this.dimensions, - source: this.chartData + }, }, xAxis: { type: 'category', + data: this.chartData.data.map(item => item.status), axisLabel: { interval: 0, rotate: 0 @@ -142,33 +159,10 @@ export default { type: 'value', name: '数量' }, - series: [ - { - type: 'bar', - barWidth: '30%', - itemStyle: { - color: '#1890ff' - }, - label: { - show: true, - position: 'top' - } - }, - { - type: 'bar', - barWidth: '30%', - itemStyle: { - color: '#52c41a' - }, - label: { - show: true, - position: 'top' - } - } - ] + series: series }; this.chart.setOption(option); - } + }, } } diff --git a/ruoyi-ui/src/views/kpi/spacePlan/index.vue b/ruoyi-ui/src/views/kpi/spacePlan/index.vue index bb6ff01..3edf377 100644 --- a/ruoyi-ui/src/views/kpi/spacePlan/index.vue +++ b/ruoyi-ui/src/views/kpi/spacePlan/index.vue @@ -58,8 +58,8 @@ export default { // 图表实例 normalChart: null, specialChart: null, - // 提示信息缓存 - tooltipCache: {}, + // 加载状态记录 + loadingKeys: {}, // 图表数据 chartData: { x: [], @@ -92,8 +92,6 @@ export default { this.queryParams.thePlatoon = '' this.roadwayOptions = [] this.platoonOptions = [] - // 清空提示信息缓存 - this.tooltipCache = {} // 获取巷道列表 getRoadways(this.queryParams).then(response => { const roadways = response.data.data @@ -109,8 +107,6 @@ export default { // 重置排号 this.queryParams.thePlatoon = '' this.platoonOptions = [] - // 清空提示信息缓存 - this.tooltipCache = {} // 获取排号列表 getPlatoons(this.queryParams).then(response => { const platoons = response.data.data @@ -122,8 +118,6 @@ export default { }) }, handlePlatoonChange() { - // 清空提示信息缓存 - this.tooltipCache = {} this.loadChartData() }, // 加载普通仓库图表数据 @@ -251,45 +245,72 @@ export default { this.normalChart.setOption(option) }, + // 防抖函数 + debounce(func, wait) { + let timeout; + return function (...args) { + const context = this; + clearTimeout(timeout); + timeout = setTimeout(() => func.apply(context, args), wait); + }; + }, // 格式化普通仓库提示信息 formatTooltip(params) { - return new Promise((resolve) => { - let str = ''; - if (params.seriesName !== '满位') { - str = params.seriesName + '
' + this.queryParams.thePlatoon + '排' + (params.data[0] + 1) + '列' + (params.data[1] + 1) + '层'; - resolve(str); - } else { - const key = `${this.queryParams.warehouseId}-${this.queryParams.thePlatoon}-${params.data[0] + 1}-${params.data[1] + 1}`; - // 如果缓存中存在数据，直接使用缓存 - if (this.tooltipCache && this.tooltipCache[key]) { - str = `${params.seriesName}
${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层
${this.tooltipCache[key]}`; - resolve(str); - return; - } + if (params.seriesName !== '满位') { + return params.seriesName + '
' + this.queryParams.thePlatoon + '排' + (params.data[0] + 1) + '列' + (params.data[1] + 1) + '层'; + } - const returnData = { - "thePlatoon": this.queryParams.thePlatoon, - "theColumn": params.data[0] + 1, - "theFloor": params.data[1] + 1, - "warehouseId": this.queryParams.warehouseId - }; + const returnData = { + "thePlatoon": this.queryParams.thePlatoon, + "theColumn": params.data[0] + 1, + "theFloor": params.data[1] + 1, + "warehouseId": this.queryParams.warehouseId + }; - getChartMag(returnData) - .then(response => { - const msg = response.data.msg; - // 缓存响应数据 - if (!this.tooltipCache) this.tooltipCache = {}; - this.tooltipCache[key] = msg; - str = `${params.seriesName}
${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层
${msg}`; - resolve(str); - }) - .catch(error => { - console.error('获取货位信息失败:', error); - str = `${params.seriesName}
${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层
获取详细信息失败`; - resolve(str); + // 生成唯一标识 + const key = `${params.seriesName}-${params.data[0]}-${params.data[1]}`; + + // 如果已经在加载中，返回基本信息 + if (this.loadingKeys && this.loadingKeys[key]) { + return `${params.seriesName}
${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层
加载中...`; + } + + // 返回基本信息 + const baseStr = `${params.seriesName}
${this.queryParams.thePlatoon}排${params.data[0] + 1}列${params.data[1] + 1}层`; + + // 设置加载状态 + if (!this.loadingKeys) this.loadingKeys = {}; + this.loadingKeys[key] = true; + + // 使用防抖函数包装请求 + this.debounce(() => { + getChartMag(returnData) + .then(response => { + const msg = response.data.msg; + const str = `${baseStr}
${msg}`; + this.normalChart.setOption({ + tooltip: { + formatter: (p) => { + if (p.seriesName === params.seriesName && + p.data[0] === params.data[0] && + p.data[1] === params.data[1]) { + return str; + } + return this.formatTooltip(p); + } + } }); - } - }); + }) + .catch(error => { + console.error('获取货位信息失败:', error); + }) + .finally(() => { + // 清除加载状态 + delete this.loadingKeys[key]; + }); + }, 300)(); + + return baseStr; }, } }