From b139e3727590781c39e8c088fed04219d65842fd Mon Sep 17 00:00:00 2001 From: lion <120344285@qq.com> Date: Fri, 24 Oct 2025 11:37:01 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=20=E4=BB=93=E5=BA=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/jsc/components/mapChart.vue | 107 ++++++- src/views/storages/components/addStorage.vue | 299 ++++++++++--------- src/views/storages/index.vue | 272 +++++++++-------- src/views/virtual/index.vue | 54 +++- 4 files changed, 448 insertions(+), 284 deletions(-) diff --git a/src/views/jsc/components/mapChart.vue b/src/views/jsc/components/mapChart.vue index 88ee632..4b55d28 100644 --- a/src/views/jsc/components/mapChart.vue +++ b/src/views/jsc/components/mapChart.vue @@ -282,7 +282,10 @@ export default { // }) // 基于准备好的dom，初始化echarts实例 console.log('streetNameList', this.streetNameList) - this.myChart = echarts.init(document.getElementById('chart')) + // 避免重复初始化 + if (!this.myChart) { + this.myChart = echarts.init(document.getElementById('chart')) + } echarts.registerMap('GX', jtmap) // 绘制图表 this.myChart.setOption({ @@ -599,18 +602,110 @@ export default { console.log('resetToFullMap - warehouseData:', this.warehouseData); console.log('resetToFullMap - warehouseData.length:', this.warehouseData ? this.warehouseData.length : 0); - // 重新调用 drawChart 来完全重置地图 - this.drawChart(); + // 完全重新初始化地图 + if (this.myChart) { + this.myChart.dispose(); // 销毁现有实例 + } + + // 重新初始化地图 + this.myChart = echarts.init(document.getElementById('chart')); + echarts.registerMap('GX', jtmap); + + // 重新绘制完整的地图配置 + this.myChart.setOption({ + // 提示框组件 + tooltip: { + trigger: 'item', + position: 'right', + enterable: true, + triggerOn: 'click', + formatter: (val) => { + console.log('val', val) + this.hookToolTip = val + } + }, + geo: { + map: 'GX', + roam: true, + zoom: 1.1, + center: [120.585294, 31.299758], + label: { + normal: { + show: false, + fontSize: '0', + color: 'rgba(0,0,0,0.7)' + } + }, + itemStyle: { + normal: { + borderColor: 'rgba(0, 0, 0, 0.2)' + }, + emphasis: { + shadowOffsetX: 0, + shadowOffsetY: 0, + shadowBlur: 20, + borderWidth: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + }, + regions: [ + { name: '相城区', itemStyle: { normal: { areaColor: '#1890ff' }, emphasis: { areaColor: '#1890ff' } } }, + { name: '姑苏区', itemStyle: { normal: { areaColor: '#40a9ff' }, emphasis: { areaColor: '#40a9ff' } } }, + { name: '虎丘区', itemStyle: { normal: { areaColor: '#2f54eb' }, emphasis: { areaColor: '#2f54eb' } } }, + { name: '吴中区', itemStyle: { normal: { areaColor: '#1d39c4' }, emphasis: { areaColor: '#1d39c4' } } }, + { name: '园区', itemStyle: { normal: { areaColor: '#5d39e9' }, emphasis: { areaColor: '#5d39e9' } } }, + { name: '太仓市', itemStyle: { normal: { areaColor: '#597ef7' }, emphasis: { areaColor: '#597ef7' } } }, + { name: '昆山市', itemStyle: { normal: { areaColor: '#10239e' }, emphasis: { areaColor: '#10239e' } } }, + { name: '常熟市', itemStyle: { normal: { areaColor: '#69c0ff' }, emphasis: { areaColor: '#69c0ff' } } }, + { name: '张家港市', itemStyle: { normal: { areaColor: '#0050b3' }, emphasis: { areaColor: '#0050b3' } } }, + { name: '吴江区', itemStyle: { normal: { areaColor: '#096dd9' }, emphasis: { areaColor: '#096dd9' } } } + ] + }, + series: [{ + name: '区域', + type: 'map', + map: 'GX', + geoIndex: 0, + markPoint: { + symbol: '', + symbolSize: [10, 10], + symbolOffset: [0, 0], + label: { + position: 'center', + color: '#333', + textAlign: 'center', + padding: [5, 10], + borderRadius: 20, + borderWidth: 1, + borderColor: '#096dd9', + backgroundColor: '#fff', + formatter(val) { + return val.data.name + } + }, + data: this.streetNameList + } + }] + }); // 如果有仓库数据，重新应用仓库数量显示 if (this.warehouseData && this.warehouseData.length > 0) { this.updateWarehouseData(this.warehouseData); } - // 强制刷新地图 - this.myChart.resize(); + // 重新绑定点击事件 + this.myChart.on('click', params => { + if (params.componentType === 'series' && params.seriesType === 'map') { + const areaName = params.name; + const areaObj = this.streetNameList.find(item => item.name === areaName); + if (areaObj) { + this.currentArea = areaObj; + this.zoomToArea(areaObj); + } + } + }); - console.log('返回全图完成，仓库点位已清除，仓库数量应显示'); + console.log('返回全图完成，地图已完全重新加载，仓库点位已清除'); }, updateWarehouseData(warehouseData) { // 更新仓库数量数据 diff --git a/src/views/storages/components/addStorage.vue b/src/views/storages/components/addStorage.vue index 640d1df..3e4b3bd 100644 --- a/src/views/storages/components/addStorage.vue +++ b/src/views/storages/components/addStorage.vue @@ -1,14 +1,14 @@ - - - - - - + + + + + + @@ -275,8 +287,8 @@ export default { return { isShow: false, type: 'add', - id: '', - action: `${process.env.VUE_APP_UPLOAD_API}`, + id: '', + action: `${process.env.VUE_APP_UPLOAD_API}`, fileList: [], tableName: 'materialstorages', // flood_storages @@ -289,8 +301,9 @@ export default { form: { storehouses_id: '', cangkumingcheng: '', - cangkubianma: '', - shifouzili: '否', + cangkubianma: '', + shifouzili: '否', + shifouxunihuojia: '否', // 是否显示虚拟货架 sort: 0, suozaiquyu: '', jiansheniandai: '', @@ -301,12 +314,12 @@ export default { jingdu: '', weidu: '', cangkujianjie: '', - image_id: '', - zhizefengong: '', - zhibananpai: '', - huojiaxitong: '', - zhuangxieshebei: '', - wenkongshebei: '', + image_id: '', + zhizefengong: '', + zhibananpai: '', + huojiaxitong: '', + zhuangxieshebei: '', + wenkongshebei: '', jiankongxitong: '', quyu_id: '' }, @@ -332,7 +345,7 @@ export default { } else { this.id = '' this.type = '' - this.mapform = [] + this.mapform = [] this.fileList = [] this.$refs['dialog'].reset() } @@ -374,33 +387,33 @@ export default { id: this.id, table_name: this.tableName }) - this.$integrateData(this.form, res) + this.$integrateData(this.form, res) this.form.sort = res.sort ? res.sort : 0 - this.mapform = [res.jingdu, res.weidu, res.cangkudizhi] - if (res.image_id_uploads_id_relation) { - this.fileList.push(res.image_id_uploads_id_relation) + this.mapform = [res.jingdu, res.weidu, res.cangkudizhi] + if (res.image_id_uploads_id_relation) { + this.fileList.push(res.image_id_uploads_id_relation) } }, - handleRemove(file, fileList) { - this.fileList = fileList - }, - handleSuccess(response, file, fileList) { - this.fileList = fileList + handleRemove(file, fileList) { + this.fileList = fileList }, - submit() { - console.log(this.fileList) - this.form.image_id = '' - if (this.fileList.length > 0) { - for (var g of this.fileList) { - if (g.response) { - this.form.image_id = g.response.id - } else { - this.form.image_id = g.id - } - } - } else { - this.form.image_id = '' - } + handleSuccess(response, file, fileList) { + this.fileList = fileList + }, + submit() { + console.log(this.fileList) + this.form.image_id = '' + if (this.fileList.length > 0) { + for (var g of this.fileList) { + if (g.response) { + this.form.image_id = g.response.id + } else { + this.form.image_id = g.id + } + } + } else { + this.form.image_id = '' + } if (this.type === 'add') { save({ @@ -412,7 +425,7 @@ export default { message: '新增成功' }) this.$emit('refresh') - this.isShow = false + this.isShow = false }) return } @@ -441,4 +454,4 @@ export default { ::v-deep .xy-table-item-label { min-width: 160px !important } - + diff --git a/src/views/storages/index.vue b/src/views/storages/index.vue index 7e8cde8..596204a 100644 --- a/src/views/storages/index.vue +++ b/src/views/storages/index.vue @@ -4,24 +4,27 @@
- - - - + + + + - + $refs['addStorage'].isShow=true" + >添加
@@ -29,33 +32,33 @@ - -