|
|
|
|
@ -48,7 +48,7 @@ export default {
|
|
|
|
|
props: {
|
|
|
|
|
mapStyle:{
|
|
|
|
|
type:String,
|
|
|
|
|
default:()=>{return 'width:700px;height:500px;position: relative;'}
|
|
|
|
|
default:()=>{return 'width:650px;height:500px;position: relative;'}
|
|
|
|
|
}
|
|
|
|
|
// mapData: {
|
|
|
|
|
// type: Array,
|
|
|
|
|
@ -66,6 +66,7 @@ export default {
|
|
|
|
|
wuziList:[],
|
|
|
|
|
wuziTotal:0,
|
|
|
|
|
cangkuObj:{},
|
|
|
|
|
warehouseData: [], // 仓库数量数据
|
|
|
|
|
table: [{
|
|
|
|
|
label: '序号',
|
|
|
|
|
type: 'index',
|
|
|
|
|
@ -486,24 +487,43 @@ export default {
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
async zoomToArea(areaObj) {
|
|
|
|
|
console.log('点击区域:', areaObj);
|
|
|
|
|
|
|
|
|
|
// 1. 获取仓库点位数据
|
|
|
|
|
const warehouseList = await this.getList(areaObj.id);
|
|
|
|
|
console.log('获取到的仓库列表:', warehouseList);
|
|
|
|
|
|
|
|
|
|
// 2. 生成点位
|
|
|
|
|
this.warehousePoints = (warehouseList || []).map(item => ({
|
|
|
|
|
name: item.cangkumingcheng,
|
|
|
|
|
value: [Number(item.jingdu), Number(item.weidu)],
|
|
|
|
|
id: item.id,
|
|
|
|
|
item:item
|
|
|
|
|
}));
|
|
|
|
|
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. 只更新geo的center和zoom,添加仓库点位
|
|
|
|
|
console.log('设置地图配置,仓库点位数量:', this.warehousePoints.length);
|
|
|
|
|
|
|
|
|
|
this.myChart.setOption({
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '区域',
|
|
|
|
|
type: 'map',
|
|
|
|
|
mapType: 'china',
|
|
|
|
|
map: 'GX',
|
|
|
|
|
geoIndex: 0,
|
|
|
|
|
markPoint: {
|
|
|
|
|
symbol: '',
|
|
|
|
|
@ -526,16 +546,18 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '仓库点位',
|
|
|
|
|
type: 'scatter',
|
|
|
|
|
coordinateSystem: 'geo',
|
|
|
|
|
data: this.warehousePoints,
|
|
|
|
|
symbolSize: 12,
|
|
|
|
|
itemStyle: { color: '#f00' },
|
|
|
|
|
symbol: 'pin',
|
|
|
|
|
symbolSize: [16, 20],
|
|
|
|
|
itemStyle: { color: 'orange' },
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
formatter: '{b}',
|
|
|
|
|
position: 'top',
|
|
|
|
|
color: 'red',
|
|
|
|
|
color: 'orange',
|
|
|
|
|
fontSize: 12
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -546,6 +568,9 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 强制刷新地图
|
|
|
|
|
this.myChart.resize();
|
|
|
|
|
|
|
|
|
|
// 重新绑定地图点击事件
|
|
|
|
|
this.myChart.off('click');
|
|
|
|
|
this.myChart.on('click', params => {
|
|
|
|
|
@ -570,13 +595,46 @@ export default {
|
|
|
|
|
this.cangkuObj = {}
|
|
|
|
|
this.wuziTotal = 0
|
|
|
|
|
this.showData = false
|
|
|
|
|
// 只重置geo的配置,保留原始地图series
|
|
|
|
|
this.myChart.setOption({
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
|
|
|
|
|
console.log('resetToFullMap - warehouseData:', this.warehouseData);
|
|
|
|
|
console.log('resetToFullMap - warehouseData.length:', this.warehouseData ? this.warehouseData.length : 0);
|
|
|
|
|
|
|
|
|
|
// 重新调用 drawChart 来完全重置地图
|
|
|
|
|
this.drawChart();
|
|
|
|
|
|
|
|
|
|
// 如果有仓库数据,重新应用仓库数量显示
|
|
|
|
|
if (this.warehouseData && this.warehouseData.length > 0) {
|
|
|
|
|
this.updateWarehouseData(this.warehouseData);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 强制刷新地图
|
|
|
|
|
this.myChart.resize();
|
|
|
|
|
|
|
|
|
|
console.log('返回全图完成,仓库点位已清除,仓库数量应显示');
|
|
|
|
|
},
|
|
|
|
|
updateWarehouseData(warehouseData) {
|
|
|
|
|
// 更新仓库数量数据
|
|
|
|
|
this.warehouseData = warehouseData;
|
|
|
|
|
|
|
|
|
|
// 更新地图上的区域标签,显示仓库数量
|
|
|
|
|
const updatedStreetList = this.streetNameList.map(street => {
|
|
|
|
|
const warehouseInfo = warehouseData.find(w => w.name === street.name);
|
|
|
|
|
if (warehouseInfo) {
|
|
|
|
|
return {
|
|
|
|
|
...street,
|
|
|
|
|
warehouseCount: warehouseInfo.warehouseCount
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
return street;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 更新地图配置
|
|
|
|
|
if (this.myChart) {
|
|
|
|
|
this.myChart.setOption({
|
|
|
|
|
series: [{
|
|
|
|
|
name: '区域',
|
|
|
|
|
type: 'map',
|
|
|
|
|
mapType: 'china',
|
|
|
|
|
map: 'GX',
|
|
|
|
|
geoIndex: 0,
|
|
|
|
|
markPoint: {
|
|
|
|
|
symbol: '',
|
|
|
|
|
@ -592,40 +650,29 @@ export default {
|
|
|
|
|
borderColor: '#096dd9',
|
|
|
|
|
backgroundColor: '#fff',
|
|
|
|
|
formatter(val) {
|
|
|
|
|
return val.data.name
|
|
|
|
|
const street = updatedStreetList.find(s => s.name === val.data.name);
|
|
|
|
|
if (street && street.warehouseCount !== undefined) {
|
|
|
|
|
return `{name|${street.name}}\n{warehouse|仓库: ${street.warehouseCount}}`;
|
|
|
|
|
}
|
|
|
|
|
return val.data.name;
|
|
|
|
|
},
|
|
|
|
|
rich: {
|
|
|
|
|
name: {
|
|
|
|
|
color: '#333',
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
fontWeight: 'bold'
|
|
|
|
|
},
|
|
|
|
|
warehouse: {
|
|
|
|
|
color: 'orange',
|
|
|
|
|
fontSize: 12
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: this.streetNameList
|
|
|
|
|
data: updatedStreetList
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'scatter',
|
|
|
|
|
coordinateSystem: 'geo',
|
|
|
|
|
data: [] // 清空仓库点位
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
geo: {
|
|
|
|
|
center: [120.585294, 31.299758], // 恢复全图中心点
|
|
|
|
|
zoom: 1 // 恢复全图缩放比例
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 重新绑定地图点击事件
|
|
|
|
|
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') {
|
|
|
|
|
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)
|
|
|
|
|
|