Newer
Older
KaiFengPC / src / views / gisMapPage / healthLegend.vue
@鲁yixuan 鲁yixuan on 29 Aug 33 KB updata
<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>