wangyifang
/
patrol-wzgl-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改

Browse Source
master
lion 4 months ago
parent 561140e651
commit f007675044
6 changed files with 16884 additions and 7093 deletions
Show Stats Download Patch File Download Diff File

2
src/components/XyTable/index.vue
Unescape View File

@ -550,7 +550,7 @@ export default {
},
'on-change': (e) => {
// 无论是否有action，都要更新内部页码状态
this.selectOpt.page = e
this.selectOpt.page = e
if (this.action) {
this.getTableData()
}

6993
src/views/jsc/components/jtmap copy 2.json
View File

File diff suppressed because it is too large Load Diff

2
src/views/jsc/components/jtmap copy.json
Unescape View File

@ -2455,7 +2455,7 @@
"type": "Feature",
"properties": {
"id": "320510",
"name": "园区",
"name": "工业园区",
"site": "www.poi86.com"
},
"geometry": {

16784
src/views/jsc/components/jtmap.json
View File

File diff suppressed because it is too large Load Diff

170
src/views/jsc/components/mapChart.vue
Unescape View File

@ -192,12 +192,12 @@ export default {
}, {
name: '姑苏区',
id: 21,
coord: [120.611498, 31.336451],
coord: [120.571498, 31.346451],
zoom: 4
}, {
name: '虎丘区',
id: 23,
coord: [120.331625, 31.32967],
coord: [120.331625, 31.35967],
zoom: 4
}, {
id:19,
@ -206,7 +206,7 @@ export default {
zoom: 4
}, {
id:22,
name: '园区',
name: '工业园区',
coord: [120.736747, 31.275494],
zoom: 4
}, {
@ -276,48 +276,48 @@ export default {
if (!warehousePoints || warehousePoints.length === 0) {
return warehousePoints
}
// 距离阈值（经纬度差值），小于此距离的点位需要分开
// 两个点位相差约 0.000115，所以阈值要更小一些，但也要能检测到
const threshold = 0.0005 // 约50米，足够检测到这两个点位
// 坐标偏移量（经纬度差值）- 增大偏移量，确保在小缩放级别下也能看到明显偏移
// 0.003 约300米，0.005 约500米，在小缩放级别下也能明显看到分开
const offsetAmount = 0.005 // 约500米，确保视觉上明显分开
// 初始化所有点位的标签位置和偏移量
warehousePoints.forEach((point) => {
point.labelPosition = 'top' // 默认上方
point.labelOffset = [-15, -35] // 向左偏移15px，向上偏移35px
point.processed = false // 标记是否已处理
})
// 按顺序处理每个点位
warehousePoints.forEach((point, index) => {
// 如果已经处理过，跳过
if (point.processed) {
return
}
// 查找距离很近的其他点位
const nearbyPoints = []
for (let i = 0; i < warehousePoints.length; i++) {
if (i === index || warehousePoints[i].processed) continue
const otherPoint = warehousePoints[i]
const deltaLon = point.value[0] - otherPoint.value[0]
const deltaLat = point.value[1] - otherPoint.value[1]
const distance = Math.sqrt(deltaLon * deltaLon + deltaLat * deltaLat)
if (distance < threshold) {
nearbyPoints.push({ point: otherPoint, index: i, distance })
}
}
// 如果有很近的点位
if (nearbyPoints.length > 0) {
// 找到最近的点位
const closest = nearbyPoints.sort((a, b) => a.distance - b.distance)[0]
// 将当前点位向右下偏移，标签应该在下方（因为点位在下方）
const originalLon = point.value[0]
const originalLat = point.value[1]
@ -326,12 +326,12 @@ export default {
point.labelPosition = 'bottom'
point.labelOffset = [-15, 15] // 向左偏移15px，向下偏移15px（标签在下方）
point.processed = true
// 另一个点位保持原位置（在上方），标签应该在上方
closest.point.labelPosition = 'top'
closest.point.labelOffset = [-15, -35] // 向左偏移15px，向上偏移35px（标签在上方）
closest.point.processed = true
console.log(`点位 ${point.name} 向右下偏移: 经度 ${originalLon} -> ${point.value[0]}, 纬度 ${originalLat} -> ${point.value[1]}, 标签在下方`)
console.log(`点位 ${closest.point.name} 保持原位置，标签在上方`)
} else {
@ -339,7 +339,7 @@ export default {
point.processed = true
}
})
return warehousePoints
},
// 清除标签
@ -349,7 +349,7 @@ export default {
// 使用 replaceMerge 只替换 graphic 部分
this.myChart.setOption({
graphic: []
}, {
}, {
notMerge: false,
replaceMerge: ['graphic'] // 只替换 graphic 部分
})
@ -362,10 +362,10 @@ export default {
this.clearLabels()
return
}
// 先清除之前的标签
this.clearLabels()
// 延迟一下，确保清除完成后再绘制新标签
this.$nextTick(() => {
setTimeout(() => {
@ -378,31 +378,31 @@ export default {
if (!this.myChart || !this.warehousePoints || this.warehousePoints.length === 0) {
return
}
const graphicElements = []
this.warehousePoints.forEach((point, index) => {
if (!point.name || !point.value || point.value.length !== 2) {
return
}
try {
// 将地理坐标转换为像素坐标
const pixel = this.myChart.convertToPixel('geo', point.value)
if (!pixel || pixel.length !== 2 || isNaN(pixel[0]) || isNaN(pixel[1])) {
return
}
// 获取标签位置和偏移量
const labelOffset = point.labelOffset || [-15, -35]
// 计算标签的像素位置
let x = pixel[0] + labelOffset[0]
let y = pixel[1] + labelOffset[1]
// 字体大小
const fontSize = 11
// 创建文本元素，不使用背景和边框
graphicElements.push({
type: 'text',
@ -427,12 +427,12 @@ export default {
console.error('绘制标签失败:', e, point)
}
})
// 更新 graphic 配置
if (graphicElements.length > 0) {
this.myChart.setOption({
graphic: graphicElements
}, {
}, {
notMerge: false,
replaceMerge: ['graphic'] // 只替换 graphic 部分，确保清除旧的
})
@ -568,7 +568,7 @@ export default {
}
},
{
name: '园区',
name: '工业园区',
itemStyle: {
normal: {
areaColor: '#5d39e9'
@ -678,7 +678,7 @@ export default {
}
return
}
const areaName = params.name;
const areaObj = this.streetNameList.find(item => item.name === areaName);
if (areaObj) {
@ -698,13 +698,13 @@ export default {
}
return
}
const that = this // 保存 this 引用，用于 label 配置中的函数
console.log('点击区域:', areaObj);
// 清除之前的标签
this.clearLabels();
// 1. 获取仓库点位数据
const warehouseList = await this.getList(areaObj.id);
console.log('获取到的仓库列表:', warehouseList);
@ -713,13 +713,13 @@ export default {
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],
@ -728,14 +728,14 @@ export default {
labelPosition: null // 稍后分配
};
}).filter(point => point !== null); // 过滤掉无效的坐标点
// 3. 智能分配标签位置，避免重叠
this.warehousePoints = this.assignLabelPositions(this.warehousePoints);
console.log('生成的仓库点位:', this.warehousePoints);
console.log('标签位置分配:', this.warehousePoints.map(p => ({
name: p.name,
position: p.labelPosition,
console.log('标签位置分配:', this.warehousePoints.map(p => ({
name: p.name,
position: p.labelPosition,
offset: p.labelOffset,
value: p.value,
hasName: !!p.name
@ -752,7 +752,7 @@ export default {
// 4. 只更新geo的center和zoom，添加仓库点位
console.log('设置地图配置，仓库点位数量:', this.warehousePoints.length);
console.log('准备传递给 scatter 的数据:', this.warehousePoints.map(p => ({ name: p.name, value: p.value, labelPosition: p.labelPosition, labelOffset: p.labelOffset })));
// 确保每个点位数据都包含 name 字段
this.warehousePoints = this.warehousePoints.map(p => ({
name: p.name || '未知仓库',
@ -763,7 +763,7 @@ export default {
item: p.item
}))
console.log('处理后的 warehousePoints 数据:', this.warehousePoints.slice(0, 3)) // 只输出前3个用于调试
this.myChart.setOption({
series: [
{
@ -806,7 +806,7 @@ export default {
formatter: function(params) {
// 必须显示仓库名称 - 优先从 warehousePoints 数组获取（这是最可靠的方式）
let name = ''
// 方案1：从 warehousePoints 数组获取（最可靠）
if (that.warehousePoints && params.dataIndex !== undefined && params.dataIndex >= 0 && params.dataIndex < that.warehousePoints.length) {
const pointData = that.warehousePoints[params.dataIndex]
@ -814,19 +814,19 @@ export default {
name = pointData.name
}
}
// 方案2：从 params.data 获取（ECharts scatter 系列的标准方式）
if (!name && params.data) {
if (typeof params.data === 'object' && params.data.name) {
name = params.data.name
}
}
// 方案3：使用 params.name
if (!name && params.name) {
name = params.name
}
// 如果还是没有获取到，输出调试信息
if (!name) {
console.error('标签 formatter 无法获取名称:', {
@ -836,7 +836,7 @@ export default {
})
name = '仓库' + (params.dataIndex !== undefined ? (params.dataIndex + 1) : '')
}
return name
},
position: function(params) {
@ -887,16 +887,16 @@ export default {
zoom: areaObj.zoom ? areaObj.zoom * 1.5 : 4.5 // 增加50%的缩放级别
}
}, { notMerge: false, lazyUpdate: false });
// 强制刷新地图
this.myChart.resize();
// 使用 graphic 组件手动绘制标签
this.drawLabelsWithGraphic();
// 标记已经加载了仓库数据
this.hasLoadedWarehouses = true
// 监听地图变化事件（缩放、平移），重新绘制标签
this.myChart.off('georoam') // 先移除旧的事件监听
this.myChart.on('georoam', () => {
@ -908,7 +908,7 @@ export default {
this.myChart.off('click');
this.myChart.on('click', params => {
console.log('地图点击事件:', params)
// 优先处理仓库点位点击（包括图标和标签）
if (params.seriesName === '仓库点位' || (params.componentType === 'series' && params.seriesType === 'scatter')) {
// 如果点击的是标签或图标，通过 dataIndex 获取数据
@ -923,7 +923,7 @@ export default {
// 如果点击的是图标，直接使用 data
if (params.data) {
// 尝试从 data 中找到对应的点位数据
const warehouseData = this.warehousePoints.find(p =>
const warehouseData = this.warehousePoints.find(p =>
p.value[0] === params.data.value[0] && p.value[1] === params.data.value[1]
) || params.data
console.log('点击仓库图标:', warehouseData.name || warehouseData)
@ -952,22 +952,22 @@ export default {
this.wuziTotal = 0
this.showData = false
this.hasLoadedWarehouses = false // 重置标记，允许再次选择区域
// 清除标签
this.clearLabels();
console.log('resetToFullMap - warehouseData:', this.warehouseData);
console.log('resetToFullMap - warehouseData.length:', this.warehouseData ? this.warehouseData.length : 0);
// 完全重新初始化地图
if (this.myChart) {
this.myChart.dispose(); // 销毁现有实例
}
// 重新初始化地图
this.myChart = echarts.init(document.getElementById('chart'));
echarts.registerMap('GX', jtmap);
// 重新绘制完整的地图配置
this.myChart.setOption({
// 提示框组件
@ -1010,7 +1010,7 @@ export default {
{ 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: '#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' } } },
@ -1044,12 +1044,12 @@ export default {
}
}]
});
// 如果有仓库数据，重新应用仓库数量显示
if (this.warehouseData && this.warehouseData.length > 0) {
this.updateWarehouseData(this.warehouseData);
}
// 重新绑定点击事件
this.myChart.on('click', params => {
if (params.componentType === 'series' && params.seriesType === 'map') {
@ -1061,7 +1061,7 @@ export default {
}
}
});
console.log('返回全图完成，地图已完全重新加载，仓库点位已清除');
},
updateWarehouseData(warehouseData) {
@ -1077,7 +1077,7 @@ export default {
this.shibenjiWarehouseCount = null
this.shibenjiAreaId = null
}
// 更新地图上的区域标签，显示仓库数量
const updatedStreetList = this.streetNameList.map(street => {
const warehouseInfo = warehouseData.find(w => w.name === street.name);
@ -1089,7 +1089,7 @@ export default {
}
return street;
});
// 更新地图配置
if (this.myChart) {
this.myChart.setOption({
@ -1146,7 +1146,7 @@ export default {
}
return
}
// 加载市本级的仓库数据并放大地图
if (!this.shibenjiAreaId) {
if (this.$message) {
@ -1168,10 +1168,10 @@ export default {
const that = this // 保存 this 引用，用于 label 配置中的函数
// 加载仓库数据并放大地图
console.log('加载市本级仓库数据，区域ID:', areaId);
// 清除之前的标签
this.clearLabels();
// 1. 获取仓库点位数据
const warehouseList = await this.getList(areaId);
console.log('获取到的仓库列表:', warehouseList);
@ -1180,13 +1180,13 @@ export default {
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],
@ -1195,20 +1195,20 @@ export default {
labelPosition: null // 稍后分配
};
}).filter(point => point !== null); // 过滤掉无效的坐标点
// 3. 智能分配标签位置，避免重叠
this.warehousePoints = this.assignLabelPositions(this.warehousePoints);
console.log('生成的仓库点位:', this.warehousePoints);
console.log('标签位置分配:', this.warehousePoints.map(p => ({
name: p.name,
position: p.labelPosition,
console.log('标签位置分配:', this.warehousePoints.map(p => ({
name: p.name,
position: p.labelPosition,
offset: p.labelOffset,
value: p.value,
hasName: !!p.name
})));
console.log('有效仓库点位数量:', this.warehousePoints.length);
// 验证每个点位都有 name 字段
this.warehousePoints.forEach((p, idx) => {
if (!p.name) {
@ -1227,7 +1227,7 @@ export default {
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 = 5.5 // 进一步增加缩放
@ -1282,7 +1282,7 @@ export default {
formatter: function(params) {
// 必须显示仓库名称 - 优先从 warehousePoints 数组获取（这是最可靠的方式）
let name = ''
// 方案1：从 warehousePoints 数组获取（最可靠）
if (that.warehousePoints && params.dataIndex !== undefined && params.dataIndex >= 0 && params.dataIndex < that.warehousePoints.length) {
const pointData = that.warehousePoints[params.dataIndex]
@ -1290,19 +1290,19 @@ export default {
name = pointData.name
}
}
// 方案2：从 params.data 获取（ECharts scatter 系列的标准方式）
if (!name && params.data) {
if (typeof params.data === 'object' && params.data.name) {
name = params.data.name
}
}
// 方案3：使用 params.name
if (!name && params.name) {
name = params.name
}
// 如果还是没有获取到，输出调试信息
if (!name) {
console.error('标签 formatter 无法获取名称:', {
@ -1312,7 +1312,7 @@ export default {
})
name = '仓库' + (params.dataIndex !== undefined ? (params.dataIndex + 1) : '')
}
return name
},
position: function(params) {
@ -1363,16 +1363,16 @@ export default {
zoom: zoomLevel
}
}, { notMerge: false, lazyUpdate: false });
// 强制刷新地图
this.myChart.resize();
// 使用 graphic 组件手动绘制标签
this.drawLabelsWithGraphic();
// 标记已经加载了仓库数据
this.hasLoadedWarehouses = true
// 监听地图变化事件（缩放、平移），重新绘制标签
this.myChart.off('georoam') // 先移除旧的事件监听
this.myChart.on('georoam', () => {
@ -1384,7 +1384,7 @@ export default {
this.myChart.off('click');
this.myChart.on('click', params => {
console.log('地图点击事件:', params)
// 优先处理仓库点位点击（包括图标和标签）
if (params.seriesName === '仓库点位' || (params.componentType === 'series' && params.seriesType === 'scatter')) {
// 如果点击的是标签或图标，通过 dataIndex 获取数据
@ -1399,7 +1399,7 @@ export default {
// 如果点击的是图标，直接使用 data
if (params.data) {
// 尝试从 data 中找到对应的点位数据
const warehouseData = this.warehousePoints.find(p =>
const warehouseData = this.warehousePoints.find(p =>
p.value[0] === params.data.value[0] && p.value[1] === params.data.value[1]
) || params.data
console.log('点击仓库图标:', warehouseData.name || warehouseData)

26
src/views/xukou/monitor.vue
Unescape View File

@ -132,7 +132,7 @@ export default {
return group[0]
})
.filter(Boolean)
console.log('filtered:', filtered)
console.log('filtered:', filtered)
// 找到有值的设备（温度和湿度都不为 0.00）
const validDevice = filtered.find(item => {
@ -174,17 +174,17 @@ export default {
}
return {
id: item.id,
name:
item.gas_config && item.gas_config.name
? item.gas_config.name
: `监控点${item.node_id}`,
status: item.status || '正常',
coConcentration:
item.co_concentration != null && item.co_concentration !== ''
? `${item.co_concentration} ppm`
: '-',
temperature:
id: item.id,
name:
item.gas_config && item.gas_config.name
? item.gas_config.name
: `监控点${item.node_id}`,
status: item.status || '正常',
coConcentration:
item.co_concentration != null && item.co_concentration !== ''
? `${item.co_concentration} ppm`
: '-',
temperature:
temperature != null && temperature !== '' && parseFloat(temperature) !== 0
? `${temperature} ℃`
: '-',
@ -192,7 +192,7 @@ export default {
humidity != null && humidity !== '' && parseFloat(humidity) !== 0
? `${humidity} %`
: '-',
updateTime: item.record_time || ''
updateTime: item.record_time || ''
}
})
this.cameras = filtered.map(item => ({

Write Preview
Loading…
Cancel
Save