diff --git a/src/views/jsc/components/mapChart.vue b/src/views/jsc/components/mapChart.vue index 4b55d28..da6fa30 100644 --- a/src/views/jsc/components/mapChart.vue +++ b/src/views/jsc/components/mapChart.vue @@ -32,7 +32,12 @@ - +
+ + +
@@ -67,6 +72,8 @@ export default { wuziTotal:0, cangkuObj:{}, warehouseData: [], // 仓库数量数据 + shibenjiWarehouseCount: null, // 市本级仓库数量 + shibenjiAreaId: null, // 市本级区域ID table: [{ label: '序号', type: 'index', @@ -561,7 +568,13 @@ export default { formatter: '{b}', position: 'top', color: 'orange', - fontSize: 12 + fontSize: 12, + triggerEvent: true // 允许标签触发事件 + }, + emphasis: { + label: { + show: true + } } } ], @@ -577,9 +590,23 @@ export default { // 重新绑定地图点击事件 this.myChart.off('click'); this.myChart.on('click', params => { - if (params.seriesType === 'scatter') { - this.getWuzi(params.data); - } else if (params.componentType === 'series' && params.seriesType === 'map') { + // 优先处理仓库点位点击（包括图标和标签） + if (params.seriesName === '仓库点位') { + // 如果点击的是标签，需要通过 dataIndex 获取数据 + if (params.dataIndex !== undefined && params.dataIndex !== null) { + const warehouseData = this.warehousePoints[params.dataIndex] + if (warehouseData) { + this.getWuzi(warehouseData) + return // 阻止后续处理 + } + } else if (params.data) { + // 如果点击的是图标，直接使用 data + this.getWuzi(params.data) + return // 阻止后续处理 + } + } + // 处理地图区域点击 + if (params.componentType === 'series' && params.seriesType === 'map') { const areaName = params.name; const areaObj = this.streetNameList.find(item => item.name === areaName); if (areaObj) { @@ -709,7 +736,17 @@ export default { }, updateWarehouseData(warehouseData) { // 更新仓库数量数据 - this.warehouseData = warehouseData; + this.warehouseData = warehouseData + + // 查找市本级的数据 + const shibenjiInfo = warehouseData.find(w => w.name === '市本级') + if (shibenjiInfo) { + this.shibenjiWarehouseCount = shibenjiInfo.warehouseCount || 0 + this.shibenjiAreaId = shibenjiInfo.id || null + } else { + this.shibenjiWarehouseCount = null + this.shibenjiAreaId = null + } // 更新地图上的区域标签，显示仓库数量 const updatedStreetList = this.streetNameList.map(street => { @@ -769,6 +806,168 @@ export default { }); } }, + async loadShibenjiWarehouse() { + // 加载市本级的仓库数据并放大地图 + if (!this.shibenjiAreaId) { + if (this.$message) { + this.$message.warning('未找到市本级区域ID') + } + return + } + + // 设置当前区域，用于显示"返回全图"按钮 + this.currentArea = { + name: '市本级', + id: this.shibenjiAreaId + } + + // 调用加载仓库数据的方法 + await this.loadWarehouseWithoutZoom(this.shibenjiAreaId) + }, + async loadWarehouseWithoutZoom(areaId) { + // 加载仓库数据并放大地图 + console.log('加载市本级仓库数据，区域ID:', areaId); + + // 1. 获取仓库点位数据 + const warehouseList = await this.getList(areaId); + console.log('获取到的仓库列表:', warehouseList); + + // 2. 生成点位 + this.warehousePoints = (warehouseList || []).map(item => { + const jingdu = Number(item.jingdu); + const weidu = Number(item.weidu); + + // 验证坐标数据 + if (isNaN(jingdu) || isNaN(weidu) || jingdu === 0 || weidu === 0) { + console.warn('仓库坐标无效:', item.cangkumingcheng, '经度:', item.jingdu, '纬度:', item.weidu); + return null; + } + + return { + name: item.cangkumingcheng, + value: [jingdu, weidu], + id: item.id, + item: item + }; + }).filter(point => point !== null); // 过滤掉无效的坐标点 + + console.log('生成的仓库点位:', this.warehousePoints); + console.log('有效仓库点位数量:', this.warehousePoints.length); + + // 3. 计算仓库点位的中心点，用于设置地图中心 + let centerCoord = [120.585294, 31.299758] // 默认苏州中心点 + let zoomLevel = 3.5 // 默认缩放级别 + + if (this.warehousePoints.length > 0) { + // 计算所有仓库点位的中心点 + const validPoints = this.warehousePoints.filter(p => p.value && p.value.length === 2) + if (validPoints.length > 0) { + const sumLng = validPoints.reduce((sum, p) => sum + p.value[0], 0) + const sumLat = validPoints.reduce((sum, p) => sum + p.value[1], 0) + centerCoord = [sumLng / validPoints.length, sumLat / validPoints.length] + + // 根据仓库数量调整缩放级别 + if (validPoints.length === 1) { + zoomLevel = 4 + } else if (validPoints.length <= 3) { + zoomLevel = 3.5 + } else { + zoomLevel = 3 + } + } + } + + // 4. 添加仓库点位并设置地图的center和zoom + this.myChart.setOption({ + 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 + } + }, + { + name: '仓库点位', + type: 'scatter', + coordinateSystem: 'geo', + data: this.warehousePoints, + symbol: 'pin', + symbolSize: [16, 20], + itemStyle: { color: 'orange' }, + label: { + show: true, + formatter: '{b}', + position: 'top', + color: 'orange', + fontSize: 12, + triggerEvent: true // 允许标签触发事件 + }, + emphasis: { + label: { + show: true + } + } + } + ], + geo: { + center: centerCoord, + zoom: zoomLevel + } + }); + + // 强制刷新地图 + this.myChart.resize(); + + // 重新绑定地图点击事件 + this.myChart.off('click'); + this.myChart.on('click', params => { + // 优先处理仓库点位点击（包括图标和标签） + if (params.seriesName === '仓库点位') { + // 如果点击的是标签，需要通过 dataIndex 获取数据 + if (params.dataIndex !== undefined && params.dataIndex !== null) { + const warehouseData = this.warehousePoints[params.dataIndex] + if (warehouseData) { + this.getWuzi(warehouseData) + return // 阻止后续处理 + } + } else if (params.data) { + // 如果点击的是图标，直接使用 data + this.getWuzi(params.data) + return // 阻止后续处理 + } + } + // 处理地图区域点击 + 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); + } + } else if (params.componentType === 'geo') { + this.resetToFullMap(); + } + }); + }, async getWuzi(cangku) { console.log("warehouseId",cangku) this.cangkuObj = cangku.item diff --git a/src/views/jsc/index.vue b/src/views/jsc/index.vue index 944d0f1..96a3ead 100644 --- a/src/views/jsc/index.vue +++ b/src/views/jsc/index.vue @@ -642,6 +642,22 @@ export default { } }) this.upListByFloodMaterials = mergedFlood + + // 处理仓库数量数据，传递给地图组件 + if (home.teamArea && Array.isArray(home.teamArea)) { + const warehouseData = home.teamArea.map(item => ({ + name: item.value, + warehouseCount: item.materialstorages_total || 0, + id: item.id || item.quyu_id || null // 包含区域ID + })) + + // 通过ref调用地图组件的方法更新数据 + this.$nextTick(() => { + if (this.$refs.echartsMap && this.$refs.echartsMap.updateWarehouseData) { + this.$refs.echartsMap.updateWarehouseData(warehouseData) + } + }) + } // this.startAutoSwitch() }, mergeAndRename(arr) { diff --git a/src/views/jsc/leader.vue b/src/views/jsc/leader.vue index f893bf1..c1f3e9c 100644 --- a/src/views/jsc/leader.vue +++ b/src/views/jsc/leader.vue @@ -65,8 +65,8 @@
-