<template>
<!-- 管网健康诊断图例 -->
<div class="lengendPageHealth">
<!-- 图例框 -->
<div class="publicLegend">
<!-- 图例 -->
<div v-for="item in legendList" :key="item.layername" class="legPart">
<div class="part" v-for="item2 in item.children" @click="changeLegend(item2)" :key="item2.layername">
<img :src="getImageUrl(item2.url, 'newImgs/layerIcon')" class="img" />
<p class="title">{{ item2.name }}</p>
<el-checkbox v-model="item2.isCheck" size="small" class="legbox"></el-checkbox>
</div>
</div>
<!-- 绘图操作工具 -->
<div class="flex imgTool">
<el-tooltip effect="dark" :content="item.name" placement="bottom" v-for="item in toolList" :key="item.id">
<img
:src="getImageUrl(item.url, 'newImgs/paishuiImgs')"
:class="toolIndex == item.id ? 'active' : ''"
@click="changeTool(item.id)"
/>
</el-tooltip>
</div>
</div>
<!-- 剖面分析弹窗 -->
<div :class="['poumianLog', 'animate__animated', ifExpandPM ? 'animate__bounceInUp' : 'animate__bounceOutDown']" v-if="showPoumian">
<el-icon class="closeHL" @click="ifExpandPM = false"><Close /></el-icon>
<div class="titleHL">剖面分析</div>
<div style="height: 400px">
<poumian :reflashData="analyseData"></poumian>
</div>
</div>
<!-- 连通性分析结果 -->
<div :class="['ltxfxLog', 'animate__animated', ifExpandLTFX ? 'animate__bounceInUp' : 'animate__bounceOutDown']" v-if="showLTFX">
<el-icon class="closeHL" @click="ifExpandLTFX = false"><Close /></el-icon>
<div class="titleHL">连通性分析结果</div>
<el-tabs v-model="activeConnect" @tab-click="handleConnect">
<el-tab-pane :label="nameLineLT" name="first"></el-tab-pane>
<el-tab-pane :label="nameJCJ" name="second"></el-tab-pane>
</el-tabs>
<el-table :data="tableData" height="300" v-if="activeConnect == 'first'">
<el-table-column label="所属道路" prop="roadName" />
<el-table-column label="管线等级" prop="pipelineLevel" />
<el-table-column label="管线编码" prop="name" />
<el-table-column label="管线类别" prop="pipelineType">
<template #default="scope">
{{
scope.row.pipelineType == 'Rain'
? '雨水'
: scope.row.pipelineType == 'Sewage'
? '污水'
: scope.row.pipelineType == 'Combined'
? '雨污合流'
: '--'
}}
</template>
</el-table-column>
<el-table-column label="管线流向" prop="flowDirection">
<template #default="scope">
{{ scope.row.flowDirection == 'positive' ? '正向' : scope.row.flowDirection == 'negative' ? '逆向' : '--' }}
</template>
</el-table-column>
<el-table-column label="材质" prop="pipelineTexture" />
<el-table-column label="埋没方式" prop="layingType" />
<el-table-column label="断面类型" prop="sectionType" />
<el-table-column label="起点编号" prop="startPointNumber" />
<el-table-column label="终点编号" prop="endPointNumber" />
<el-table-column label="起点高程" prop="startCopNoseElevation" />
<el-table-column label="终点高程" prop="endCopNoseElevation" />
<el-table-column label="管道长度" prop="pipelineLength" />
</el-table>
<el-table :data="tableData" height="300" v-if="activeConnect == 'second'">
<el-table-column label="所属道路" prop="roadName" />
<el-table-column label="管点编码" prop="pointNumber" />
<el-table-column label="管点材质" prop="pointTexture" />
<el-table-column label="管点类型" prop="pointType">
<template #default="scope">
<dict-tag :options="point_type" :value="scope.row.pointType" />
</template>
</el-table-column>
<el-table-column label="管点等级" prop="pointLevel" />
<el-table-column label="汇水分区" prop="areaWater">
<template #default="scope">
<dict-tag :options="drainage_partition" :value="scope.row.areaWater" />
</template>
</el-table-column>
<el-table-column label="地面高程(m)" prop="groundElevation" />
<el-table-column label="坐标X" prop="originalX" />
<el-table-column label="坐标Y" prop="originalY" />
<el-table-column label="权属单位" prop="ownershipUnits" />
</el-table>
</div>
<!-- 资产统计弹窗 -->
<div
:class="['zichanLog', 'animate__animated', ifExpandZC ? 'animate__bounceInRight' : 'animate__bounceOutRight']"
v-if="showZC"
v-loading="loadingZC"
>
<el-icon class="closeHL" @click="ifExpandZC = false"><Close /></el-icon>
<div class="titleHL">管网资产统计</div>
<p class="partLog">
选择统计维度：
<el-radio-group v-model="zcCountType" @change="showCountZC = false">
<el-radio label="1">按管径统计</el-radio>
<el-radio label="2">按管材统计</el-radio>
</el-radio-group>
</p>
<p class="partLog">
绘制方式：
<el-radio-group v-model="zcCountSharp" @change="showCountZC = false">
<el-radio label="1">矩形</el-radio>
<el-radio label="2">多边形</el-radio>
</el-radio-group>
</p>
<div class="flex flex-justcontent-center">
<el-button type="warning" @click="startCount">开始统计</el-button>
</div>
<!-- 统计结果内容 -->
<div v-if="showCountZC">
<BarEchart :echartData="echartData" :yAxisName="'管长(m)'" :refresh="refresh" style="height: 220px"></BarEchart>
<el-table :data="tableDataZC" style="width: 100%; margin: 10px 0 10px 0" height="430">
<el-table-column prop="sectionType" label="管径(mm)" v-if="zcCountType == '1'" />
<el-table-column prop="pipelineTexture" label="管材" v-if="zcCountType == '2'" />
<el-table-column prop="pipelineLength" label="管长(m)" />
</el-table>
</div>
</div>
<!-- 上下游分析溯源内容 -->
<div :class="['zichanLog', 'animate__animated', ifExpandTrace ? 'animate__bounceInRight' : 'animate__bounceOutRight']" v-if="showTrace">
<el-icon class="closeHL" @click="ifExpandTrace = false"><Close /></el-icon>
<div class="titleHL">溯源情况统计</div>
<div class="traceLog" v-if="showTrace">
<div class="eventYC">
<div class="content">
<div class="part" v-for="item in upDownData" :key="item.id" @click="clickSYFX(item)">
<div class="record">
<p class="label">监测站点名称</p>
<p class="value">{{ item.stName }}</p>
</div>
<div class="record">
<p class="label">所属管段</p>
<p class="value">{{ item.pointNumber }}</p>
</div>
<div class="record">
<p class="label">管道类型</p>
<p class="value">
{{
item.pipelineType == 'Rain'
? '雨水'
: item.pipelineType == 'Sewage'
? '污水'
: item.pipelineType == 'Combined'
? '雨污合流'
: '--'
}}
</p>
</div>
<div class="record">
<p class="label">管径大小</p>
<p class="value">{{ item.sectionType }}m</p>
</div>
<div class="record">
<p class="label">实时水位</p>
<p class="value">{{ item.z }}m</p>
</div>
<div class="record">
<p class="label">井深</p>
<p class="value">{{ item.bottomBuriedDepth }}m</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 地图标记 -->
<div :class="['zichanLog', 'animate__animated', ifExpandPoint ? 'animate__bounceInRight' : 'animate__bounceOutRight']" v-if="showPoint">
<el-icon class="closeHL" @click="ifExpandPoint = false"><Close /></el-icon>
<div class="titleHL">地图标记</div>
<div class="mapPoint" v-if="showPoint">
<p class="partLog">
选择标记方式：
<el-radio-group v-model="pointType">
<el-radio label="1">点</el-radio>
<el-radio label="2">线</el-radio>
<el-radio label="3">多边形</el-radio>
</el-radio-group>
</p>
<div style="margin: 10px auto">
<n-space>
<el-input
v-model="pointName"
placeholder="请输入"
clearable
@keyup.enter="getMarkpointList"
style="width: 200px; margin-right: 10px"
/>
<el-button type="primary" icon="Search" @click="getMarkpointList">搜索</el-button>
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="pointDel">删除</el-button>
</n-space>
</div>
<el-table
:data="tableDataPoint"
@selection-change="handleSelectionChange"
max-height="650"
highlight-current-row
@row-click="clickPointData"
>
<el-table-column type="selection" width="55" />
<el-table-column label="名称" prop="markName" />
<el-table-column label="创建人" prop="createBy" />
<el-table-column label="备注" prop="remark" />
</el-table>
</div>
</div>
<!-- 地图标记添加弹窗提交 -->
<el-dialog v-model="showPointAdd" title="添加地图标记" width="500px" append-to-body>
<el-form ref="formRef" :model="formData" label-width="100px" class="publicForm">
<el-form-item label="名称" prop="markName">
<el-input v-model="formData.markName" placeholder="请输入" />
</el-form-item>
<el-form-item label="颜色选择" prop="markColor">
<el-color-picker v-model="formData.markColor" />
</el-form-item>
<el-form-item label="选择图案" prop="markType">
<el-select v-model="formData.markType" placeholder="请选择" clearable>
<el-option label="圆形" value="2" />
<el-option label="菱形" value="1" />
<el-option label="方形" value="3" />
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="formData.remark" placeholder="请输入" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="info" @click="showPointAdd = false">取 消</el-button>
<el-button type="primary" @click="submitForm">保 存</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="">
import {
getPipelineSumByTexture,
getPipelineSumBySection,
markPointAdd,
markPointList,
markPointDel,
} from '@/api/drainagePipeline/pipelineInfo.js';
import { getImageUrl } from '@/utils/ruoyi';
import { defineEmits, watch } from 'vue';
import bus from '@/bus';
import mapHealthLegend from './healthLegend.js';
import BarEchart from '@/components/Echarts/barChart.vue'; //柱状图
import poumian from '@/components/Map/poumian.vue'; //上下游溯源分析
import YSFQ1 from '@/assets/geojson/YSFQ1.json';
import YSFQ2 from '@/assets/geojson/YSFQ2.json';
import YSFQLable1 from '@/assets/geojson/YSFQLable1.json';
const emit = defineEmits(['toolsEvt']);
const { proxy } = getCurrentInstance();
const timer = ref(null);
const refresh = ref(1);
const toolIndex = ref('');
const toolList = ref([
{ name: '上游分析', url: 'syfx.png', id: '7' },
{ name: '下游分析', url: 'xyfx.png', id: '8' },
{ name: '剖面分析', url: 'poumian.png', id: '1' },
{ name: '连通性分析', url: 'ltxfx.png', id: '2' },
{ name: '资产统计', url: 'zctj.png', id: '3' },
{ name: '面积测面', url: 'area.png', id: '4' },
{ name: '距离测线', url: 'line.png', id: '5' },
{ name: '定位', url: 'position.png', id: '6' },
{ name: '清除测量', url: 'clear.png', id: '9' },
]);
const legendList = ref([]);
const analyseData = ref({});
const upDownData = ref([]);
const showPoumian = ref(false);
const ifExpandPM = ref(false);
const activeConnect = ref('first');
const tableData = ref([]);
const nameLineLT = ref('');
const nameJCJ = ref('');
const ifExpandLTFX = ref(false);
const showLTFX = ref(false);
const ltfxData = ref({ pipelineInfoList: [], pipelinePointList: [] });
const ifExpandZC = ref(false);
const showZC = ref(false);
const zcCountType = ref('1');
const zcCountSharp = ref(null);
const loadingZC = ref(false);
const showCountZC = ref(false);
const echartData = ref({
xAxisData: ['PVC', '砖石', 'HDPE'],
seriesData: [
{
type: 'bar',
barWidth: 10,
data: [23, 13, 45],
},
],
});
const tableDataZC = ref([]);
const ifExpandTrace = ref(false);
const showTrace = ref(false);
const ifExpandPoint = ref(false);
const showPoint = ref(false);
const showPointAdd = ref(false);
const pointType = ref(null);
const formData = ref({
markColor: '',
markName: '',
geometry: '',
markType: '',
remark: '',
});
const pointName = ref(null);
const multiple = ref(true);
const ids = ref([]);
const tableDataPoint = ref([]);
const { point_type, drainage_partition } = proxy.useDict('point_type', 'drainage_partition');
const allMapList = ref([]);
/** 多选框选中数据 */
function handleSelectionChange(selection) {
ids.value = selection.map(item => item.id);
multiple.value = !selection.length;
}
// 点击表格行进行定位到点
function clickPointData(row) {
let center = turf.coordAll(turf.center(Terraformer.WKT.parse(row.geometry))).flat(Infinity);
newfiberMapbox.map.easeTo({
center: [Number(center[0]) + 0.005, Number(center[1])],
zoom: 15,
});
}
// 溯源分析表格点击定位到点
function clickSYFX(item) {
let center = item.lonLat.split(',');
if (!!!center) return;
newfiberMapbox.map.easeTo({
center: [Number(center[0]) + 0.005, Number(center[1])],
zoom: 15,
});
}
// 标记点列表删除
function pointDel() {
proxy.$modal
.confirm('是否确认删除选中的数据项？')
.then(function () {
return markPointDel(ids.value);
})
.then(() => {
getMarkpointList();
proxy.$modal.msgSuccess('删除成功');
})
.catch(() => {});
}
// 添加标记定位点提交内容
async function submitForm() {
let res = await markPointAdd(formData.value);
if (res && res.code == 200) {
proxy.$modal.msgSuccess('添加成功');
getMarkpointList();
showPointAdd.value = false;
}
}
// 标记点列表查询
async function getMarkpointList() {
const KEY = 'CUSTOM_DRAW';
const types = [undefined, '圆形', '菱形', '方形'];
let res = await markPointList();
if (res && res.code == 200) {
tableDataPoint.value = res.data || [];
if (newfiberMapbox.measure) newfiberMapbox.measure.clearMeasureAll();
let features = tableDataPoint.value.map(i =>
turf.feature(Terraformer.WKT.parse(i.geometry), {
type: i.geometry.includes('POINT') ? types[i.markType] : KEY,
name: i.markName,
color: i.markColor,
outline_color: i.markColor,
...i,
})
);
features = features.concat(
features
.filter(i => !i.properties.geometry.includes('POINT'))
.map(i => ({
type: 'Feature',
properties: { ...i.properties, type: types[i.properties.markType] },
geometry: turf.center(i).geometry,
}))
);
bus.emit('removeMapDatas', [KEY, ...types.filter(Boolean)]);
bus.emit('setGeoJSON', { json: { features, type: 'FeatureCollection' }, KEY });
bus.emit('setLayerVisible', { layername: KEY, isCheck: true });
}
}
let geometryWkt = null;
// 资产统计开始统计
async function startCount() {
if (!!!geometryWkt) return proxy.$modal.msgError('请先选择绘制方式并绘制图形');
loadingZC.value = true;
let results = await [null, getPipelineSumBySection, getPipelineSumByTexture][zcCountType.value]({ areaGeometry: geometryWkt });
tableDataZC.value = results.data || [];
echartData.value.xAxisData = [];
echartData.value.seriesData[0].data = [];
tableDataZC.value.map(item => {
echartData.value.xAxisData.push(item.pipelineTexture || item.sectionType);
echartData.value.seriesData[0].data.push(item.pipelineLength);
});
refresh.value = Math.random();
loadingZC.value = false;
showCountZC.value = true;
}
// 连通性tab切换
function handleConnect(tab) {
activeConnect.value = tab.props.name;
if (activeConnect.value == 'first') {
tableData.value = ltfxData.value.pipelineInfoList;
} else {
tableData.value = ltfxData.value.pipelinePointList;
}
}
// 图例点击
const changeLegend = item => {
item.isCheck = !item.isCheck;
if (!item.isCheck) {
if (item.layername == 'ysLine1' || item.layername == 'wsLine1') {
bus.emit('closePipeInfo');
let clearSelectedFeature = [];
newfiberMapbox.getLayers().forEach(feature => {
if (feature.newfiberId == 'highlight_linestring') {
clearSelectedFeature.push(feature);
}
});
if (!!clearSelectedFeature.length) {
clearSelectedFeature[0].setData({ type: 'FeatureCollection', features: [] });
}
} else if (item.layername == 'YSFQ1') {
!!newfiberMapbox.map.getLayer('areaLabel') && newfiberMapbox.map.removeLayer('areaLabel');
!!newfiberMapbox.map.getSource('areaLabel') && newfiberMapbox.map.getSource('areaLabel');
let clearSelectedFeature = [];
newfiberMapbox.getLayers().forEach(feature => {
if (feature.newfiberId == 'highlight_polygon') {
clearSelectedFeature.push(feature);
}
});
if (!!clearSelectedFeature.length) {
clearSelectedFeature[0].setData({ type: 'FeatureCollection', features: [] });
}
}
}
if (item.layername == 'YSFQ1') {
let visibility;
item.isCheck == true ? (visibility = 'visible') : (visibility = 'none');
//bus.emit('setLayerVisible', item);
newfiberMapbox.map.setLayoutProperty('YSFQ1', 'visibility', visibility);
newfiberMapbox.map.setLayoutProperty('YSFQLable1', 'visibility', visibility);
newfiberMapbox.map.setLayoutProperty('YSFQ2', 'visibility', visibility);
newfiberMapbox.map.setLayoutProperty('YSFQLable2', 'visibility', visibility);
} else {
bus.emit('setLayerVisible', item);
}
};
// 工具选中点击
function changeTool(id) {
toolIndex.value = id;
switch (id) {
case '3':
// 资产统计
showZC.value = true;
ifExpandZC.value = true;
break;
case '6':
// 定位
getMarkpointList();
showPoint.value = true;
ifExpandPoint.value = true;
// 点位弹窗显示
// showPointAdd.value = true;
break;
}
emit('toolsEvt', id);
}
// 资产统计
watch(
() => zcCountSharp.value,
newVal => {
const layerId = String(new Date().getTime());
console.log('layerId', layerId);
if (!newfiberMapbox.measure) newfiberMapbox.measure = new mapboxgl1.MeatureTool(newfiberMapbox.map);
({
1: () => {
newfiberMapbox.measure.drawRectangle(layerId, feature => {
geometryWkt = Terraformer.WKT.convert(feature.geometry);
});
},
2: () => {
newfiberMapbox.measure.measureArea(layerId, false, feature => {
geometryWkt = Terraformer.WKT.convert(feature.geometry);
});
newfiberMapbox.measure.setArea();
},
})[newVal]();
}
);
// 定位点位
watch(
() => pointType.value,
newVal => {
let layerId = String(new Date().getTime());
if (!newfiberMapbox.measure) newfiberMapbox.measure = new mapboxgl1.MeatureTool(newfiberMapbox.map);
const methods = {
1: () => newfiberMapbox.measure.drawPoint(layerId, callback),
2: () => newfiberMapbox.measure.measureDistance(layerId, false, callback),
3: () => newfiberMapbox.measure.measureArea(layerId, false, callback),
};
function callback(feature) {
geometryWkt = Terraformer.WKT.convert(feature.geometry);
showPointAdd.value = true;
proxy.resetForm('formRef'); //清空表单
console.log('area---', geometryWkt);
formData.value.geometry = geometryWkt;
layerId = String(new Date().getTime());
// methods[newVal]();
}
methods[newVal]();
}
);
onMounted(() => {
mapHealthLegend.getStationData();
getMarkpointList(); //默认加载自定义的标记点
nextTick(() => {
bus.on('healthLegend', legendDataList => {
newfiberMapbox.map.setMaxZoom(19);
legendList.value = legendDataList;
allMapList.value = legendList.value[0].children.concat(legendList.value[1].children).concat(legendList.value[2].children);
bus.emit('setLegendData', allMapList.value);
let YSFQLable2;
let YSFQLableFeature2 = [];
YSFQ2.features.forEach(feature => {
let labelCenter = turf.center(turf.featureCollection([feature]));
labelCenter.properties = feature.properties;
YSFQLableFeature2.push(labelCenter);
});
YSFQLable2 = turf.featureCollection(YSFQLableFeature2);
timer.value = setInterval(() => {
if (!!!newfiberMapbox.map.getLayer('pipeline_info')) {
return;
} else {
changeLegend(allMapList.value[1]);
changeLegend(allMapList.value[5]);
!!!newfiberMapbox.map.getSource('YSFQ1') && newfiberMapbox.map.addSource('YSFQ1', { type: 'geojson', data: YSFQ1 });
!!!newfiberMapbox.map.getLayer('YSFQ1') &&
newfiberMapbox.map.addLayer({
id: 'YSFQ1',
type: 'fill',
source: 'YSFQ1',
minzoom: 0,
maxzoom: 12,
paint: {
'fill-color': ['get', 'fill_color'],
'fill-opacity': 0.4,
},
layout: {
visibility: 'none',
},
});
!!!newfiberMapbox.map.getSource('YSFQLable1') &&
newfiberMapbox.map.addSource('YSFQLable1', { type: 'geojson', data: YSFQLable1 });
!!!newfiberMapbox.map.getLayer('YSFQLable1') &&
newfiberMapbox.map.addLayer({
id: 'YSFQLable1',
type: 'symbol',
source: 'YSFQLable1',
minzoom: 0,
maxzoom: 12,
layout: {
visibility: 'none',
'text-field': ['get', 'name'],
'text-font': ['KlokanTech Noto Sans Regular'],
'text-size': 16,
'text-line-height': 3,
'text-anchor': 'bottom',
},
paint: {
'text-color': '#ffffff',
},
});
newfiberMapbox.map.moveLayer('YSFQ1', 'pipeline_info');
!!!newfiberMapbox.map.getSource('YSFQ2') && newfiberMapbox.map.addSource('YSFQ2', { type: 'geojson', data: YSFQ2 });
!!!newfiberMapbox.map.getLayer('YSFQ2') &&
newfiberMapbox.map.addLayer({
id: 'YSFQ2',
type: 'fill',
source: 'YSFQ2',
minzoom: 12,
paint: {
'fill-color': ['get', 'fill_color'],
'fill-opacity': 0.4,
},
layout: {
visibility: 'none',
},
});
!!!newfiberMapbox.map.getSource('YSFQLable2') &&
newfiberMapbox.map.addSource('YSFQLable2', { type: 'geojson', data: YSFQLable2 });
!!!newfiberMapbox.map.getLayer('YSFQLable2') &&
newfiberMapbox.map.addLayer({
id: 'YSFQLable2',
type: 'symbol',
source: 'YSFQLable2',
minzoom: 12,
layout: {
visibility: 'none',
'text-field': ['get', 'NAME'],
'text-font': ['KlokanTech Noto Sans Regular'],
'text-size': 16,
'text-line-height': 3,
'text-anchor': 'bottom',
},
paint: {
'text-color': '#ffffff',
},
});
newfiberMapbox.map.moveLayer('YSFQ2', 'pipeline_info');
newfiberMapbox.map.on('click', ['YSFQ1', 'YSFQ2'], e => {
const clickfeature = newfiberMapbox.map
.queryRenderedFeatures([
[e.point.x - 10 / 2, e.point.y - 10 / 2],
[e.point.x + 10 / 2, e.point.y + 10 / 2],
])
.filter(i => i.layer.id == 'YSFQ1' || i.layer.id == 'YSFQ2')[0];
if (!clickfeature) return;
let filterFeature;
let findFeature = YSFQ1.features.concat(YSFQ2.features);
findFeature.forEach(feature => {
if (feature.properties['NAME'] == clickfeature.properties['NAME']) {
filterFeature = feature;
}
});
//添加面积标注
let clickLine = turf.featureCollection([turf.polygonToLine(filterFeature)]);
let centerPoint = turf.center(turf.featureCollection([filterFeature]));
centerPoint.properties = filterFeature.properties;
console.log('centerPoint', centerPoint);
if (!newfiberMapbox.map.getLayer('areaLabel')) {
newfiberMapbox.map.addSource('areaLabel', { type: 'geojson', data: turf.featureCollection([centerPoint]) });
newfiberMapbox.map.addLayer({
id: 'areaLabel',
type: 'symbol',
source: 'areaLabel',
layout: {
'text-field': ['get', 'Area'],
'text-font': ['KlokanTech Noto Sans Regular'],
'text-size': 14,
'text-offset': [0, 1.5],
},
paint: {
'text-color': '#d1dbe5',
},
});
} else {
newfiberMapbox.map.getSource('areaLabel').setData(turf.featureCollection([centerPoint]));
}
//点击高亮
let clearSelectedFeature = [];
newfiberMapbox.getLayers().forEach(featureItem => {
if (featureItem.newfiberId == 'highlight_polygon') {
clearSelectedFeature.push(featureItem);
}
});
if (!!clearSelectedFeature.length) {
clearSelectedFeature[0].setData(clickLine);
}
});
clearInterval(timer.value);
}
}, 1000);
});
// 剖面分析、连通性分析
bus.on('analyseData', data => {
console.log('分析接收参数--', data);
if (Object.keys(data).length == 0) {
proxy.$modal.msgError('暂无分析结果');
ifExpandPM.value = false;
return;
}
if (toolIndex.value == 1) {
// 剖面分析弹窗展示
showPoumian.value = true;
ifExpandPM.value = true;
} else if (toolIndex.value == 2) {
// 连通性分析
ltfxData.value = data;
tableData.value = data.pipelineInfoList; //默认雨水管线
nameLineLT.value = (data.pipelineInfoList[0].pipelineType == 'Rain' ? '雨水管线' : '污水管线') + data.pipelineInfoList.length;
nameJCJ.value = (data.pipelineInfoList[0].pipelineType == 'Rain' ? '雨水检查井' : '污水检查井') + data.pipelinePointList.length;
showLTFX.value = true;
ifExpandLTFX.value = true;
} else if (toolIndex.value == 7 || toolIndex.value == 8) {
if (data.siteInfos && data.siteInfos.length == 0) {
ifExpandTrace.value = false;
return;
}
upDownData.value = data.siteInfos;
// 上下游分析弹窗
ifExpandTrace.value = true;
showTrace.value = true;
}
let { pipelineInfoList: pipeline, pipelinePointList: point } = data;
// 剖面分析相关计算
let [pointMin, pointMax, lineMin, lineMax, lineLeng, pointName, lineName, linegeom1, lineFlows] = [
[],
[],
[],
[],
[],
[],
[],
[],
[],
];
point &&
point.forEach(item => {
pointName.push(item.pointNumber);
pointMin.push(Number(item.groundElevation) - Number(item.bottomBuriedDepth));
pointMax.push(Number(item.groundElevation));
});
pipeline &&
pipeline.forEach((item, i) => {
let { pipelineLength, endPointNumber, startPointNumber, flowDirection } = item;
item.length = Number(pipelineLength);
item.name = startPointNumber + '-' + endPointNumber;
item.geom1 = 0.4;
lineName.push(item.name);
lineLeng.push(item.length);
linegeom1.push(item.geom1);
lineMin.push(pointMin[i]);
lineMax.push(pointMin[i] + item.geom1);
lineFlows.push(Number(flowDirection));
});
if (!!!pipeline) return;
let data2 = pointMin[pointMin.length - 1];
lineMin.push(data2);
lineMax.push(data2 + parseFloat(pipeline[pipeline.length - 1].geom1));
console.log('剖面分析', { pointMin, pointMax, lineMin, lineMax, lineLeng, pointName, lineName, linegeom1, lineFlows });
analyseData.value = { pointMin, pointMax, lineMin, lineMax, lineLeng, pointName, lineName, linegeom1, lineFlows };
});
});
bus.on('changeIfExpand', () => {
ifExpandPM.value = false;
ifExpandLTFX.value = false;
});
});
onBeforeUnmount(() => {
bus.off('healthLegend');
bus.off('analyseData');
bus.off('changeIfExpand');
if (timer.value) {
clearInterval(timer.value);
}
});
</script>
<style lang="scss">
@import '@/assets/styles/variables.module.scss';
.lengendPageHealth {
.zichanLog {
position: absolute;
right: 1%;
top: 80px;
z-index: 99;
width: 500px;
height: 800px;
background: #00314e;
padding: 10px;
.traceLog {
width: 100%;
height: 730px;
overflow: auto;
.eventYC {
padding: 10px;
.content {
.part {
display: flex;
flex-wrap: wrap;
background: $mainColor2;
padding: 10px;
border-radius: 8px;
margin-bottom: 8px;
cursor: pointer;
.record {
width: 49%;
display: flex;
margin-bottom: 6px;
.label {
width: 110px;
}
.value {
color: #00d1ff;
}
}
}
}
}
}
.partLog {
font-size: 15px;
margin-top: 10px;
}
}
.ltxfxLog {
position: absolute;
left: 1%;
bottom: 10px;
z-index: 99;
width: 98%;
background: #00314e;
padding: 10px;
}
.poumianLog {
position: absolute;
right: 1%;
bottom: 10px;
z-index: 99;
width: 98%;
background: #00314e;
height: 420px;
padding: 10px;
}
.titleHL {
font-size: 18px;
font-weight: bold;
}
.closeHL {
font-size: 22px;
margin: 10px;
cursor: pointer;
float: right;
}
.imgTool {
align-items: center;
img {
cursor: pointer;
margin-left: 10px;
width: 28px;
height: 28px;
}
.active {
border: 1px solid red;
}
}
.publicLegend {
background: #00314e;
border: 1px solid #094065;
box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.68);
opacity: 0.7;
border-radius: 10px;
position: absolute;
top: 10px;
left: 5px;
right: 10px;
z-index: 110;
height: 40px;
overflow: auto;
display: flex;
.legPart {
display: flex;
align-items: center;
.part {
display: flex;
align-items: center;
cursor: pointer;
border-right: 1px dashed #fff;
&:hover {
background: #08596a;
}
.img {
width: 20px;
height: 20px;
margin: 0px 0px 0px 10px;
}
.title {
margin: 0px 5px 0px 5px;
font-size: 14px;
}
.legbox {
margin-right: 5px;
}
}
}
}
}
#mapPopup {
width: 300px;
height: 200px;
background: #00314e;
border: 1px solid #094065;
z-index: 115;
.title {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
.titleName {
display: flex;
align-items: center;
height: 22px;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #ccf1ff;
line-height: 22px;
&:before {
display: block;
content: '';
width: 3px;
height: 16px;
background: #00d1ff;
margin-right: 10px;
}
}
.closePopup {
margin-right: 20px;
height: 22px;
cursor: pointer;
}
}
.basicContent {
display: flex;
align-items: center;
margin: 20px 80px;
.contentKey {
width: 80px;
margin: 3px;
height: 20px;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #00d1ff;
}
.contentValue {
margin: 3px 3px 3px 15px;
width: 200px;
height: 20px;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #00d1ff;
}
}
}
</style>
