<template>
  <div id="W_MapBox" ref="rootmap">
    <!-- !--属性框-->
    <div class="popupdefect" ref="marDom" id="marDom">
      <div class="ol-popup-Title1">
        <a class="ol-popup-closer" @click="closepopupdefect()">

           <n-icon size="20" color="#7ec6e6">
    <CloseCircle />
  </n-icon>
        </a>
      </div>

      <div class="ol-popup-Title2">
        {{ currentLayerNamedefect }}
      </div>

      <div class="CoeLeft">
        <n-space>
          <!-- <div
            class="CoeList"
            :class="{ CoeListCheck: CoeListCheckIndex == 1 }"
            @click="ChouPaiListCheck(1)"
          >
            厂站简介
          </div>
          <div
            class="CoeList"
            :class="{ CoeListCheck: CoeListCheckIndex == 2 }"
            @click="ChouPaiListCheck(2)"
          >
            工艺组态
          </div>
          <div
            class="CoeList"
            :class="{ CoeListCheck: CoeListCheckIndex == 3 }"
            @click="ChouPaiListCheck(3)"
          >
            生产运行
          </div> -->
        </n-space>
        <div class="IfBox" v-if="CoeListCheckIndex == 1">
          <div class="divclass1">
            <div
              class="divclass"
              v-for="(value, key, index) in resPDatadefect"
              :key="index"
            >
              <div class="itemclasss">{{ key }}</div>
              <div class="itemclasss itemclasssValue">{{ value }}</div>
            </div>
          </div>

          <div class="divclass2">
            <img
              src="@/assets/Imgs/LiuYuYiZhangTu/ceshi.png"
              class="divclass2Imgs"
            />
            <p class="divclass2Font">
             <p>简介</p>
                 {{ currentLayerNamedefect_information }}
            </p>
          </div>
        </div>
        <div class="IfBox" v-else-if="CoeListCheckIndex == 2">
            <img
              src="@/assets/Imgs/LiuYuYiZhangTu/LiuChengTu.png"
             style="width:100%;height:100%"
            />
        </div>
        <div class="IfBox" v-else>
          <p>进出口流量监测</p>
<BarChart />
        </div>
      </div>

      <div class="triangle common"></div>
    </div>
    <!-- 监测站弹窗 -->
    <div class="SiteDialog" ref="SiteDialog" id="SiteDialog">
       <div class="ol-popup-Title1">
        <a class="ol-popup-closer" @click="closepopupdefect()">
          <n-icon size="20" color="#7ec6e6">
            <CloseCircle />
         </n-icon>
        </a>
      </div>
      <div class="ol-popup-Title2">
        {{ currentLayerNamedefect }}
      </div>
       <div class="CoeLeft">
      <n-space  justify="space-around">
          <div
            class="CoeList"
            :class="{ CoeListCheck: CoeListCheckIndex == 1 }"
            @click="ChouPaiListCheck(1)"
          >
          站点基本信息
          </div>
          <div
            class="CoeList"
            :class="{ CoeListCheck: CoeListCheckIndex == 2 }"
            @click="ChouPaiListCheck(2)"
          >
            历史数据
          </div>
        </n-space>
         <div class="IfBox" v-if="CoeListCheckIndex == 1">
          <div class="divclass1">
            <div
              class="divclass"
              v-for="(value, key, index) in resPDatadefect"
              :key="index"
            >
              <div class="itemclasss">{{ key }}</div>
              <div class="itemclasss itemclasssValue">{{ value }}</div>
            </div>
          </div>
        </div>
          <div class="IfBox" v-else-if="CoeListCheckIndex == 2">
           <BarChart />
        </div>
      </div>
      <div class="triangle common"></div>

    </div>
  </div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import Image from "ol/layer/Image";
import SourceVector from "ol/source/Vector";
import LayerVector from "ol/layer/Vector";
import Style from "ol/style/Style";
import Icon from "ol/style/Icon";
import FormatWKT from "ol/format/WKT";
import TileWMS from "ol/source/TileWMS";
import ImageWMS from "ol/source/ImageWMS";
import Fill from "ol/style/Fill";
import Text from "ol/style/Text";
import XYZ from "ol/source/XYZ";
import Overlay from "ol/Overlay.js";
import gcjMecator from "/src/utils/gcj02-to-wgs84.js";
import {
  ref,
  reactive,
  toRefs,
  onMounted,
  computed,
  watch,
  onBeforeUnmount,
} from "vue";

import bus from "@/utils/util";
import * as GisFunction from "@/utils/olmapCommon"; //引入所有的cesium封装方法
import BarChart from ".//barChart.vue";
import axios from "axios";
import { useStore } from "vuex";
import { CloseCircle } from "@vicons/ionicons5";

import {
  gateInfoTManageFindAll,
  monitoringStationManageFindAll,
  pumpStationManageFindAll,
  storagePondManageFindAll,
  WwtpManagerFindAll,
} from "@/services";
export default {
  name: "W_MapBox",
  components: {
    BarChart,
    CloseCircle,
  },
  setup() {
    let store = useStore();
    const AllData = reactive({
      // 声明变量
      map: null,
      bluemapSource: null,
      graymapSource: null,
      Sourceszz: null,
      layersZZ: null,
      Sourceysbz: null,
      layersYSBZ: null,
      Sourcetxc: null,
      layersTXC: null,
      layersHupo: null,
      layersMingqu: null,
      layersAnqu: null,
      layersGuanqu: null,
      layersXingZhengQu: null,
      layersYuShui_1: null,
      layersYuShui_2: null,
      layersYuShui_3: null,
      layersWuShui_1: null,
      layersWuShui_2: null,
      layersWuShui_3: null,
      layers_LiuLiangZhan: null,
      Source_LiuLiangZhan: null,
      layers_ChuLiSheShi: null,
      Source_ChuLiSheShi: null,
      layers_ShuiZhiZhan: null,
      Source_ShuiZhiZhan: null,
      layers_YuLiangZhan: null,
      Source_YuLiangZhan: null,
      layers_YeWeiZhan: null,
      Source_YeWeiZhan: null,
      menu_overlaydefect: null,
      currentLayerNamedefect: "",
      currentLayerNamedefect_information: "",
      resPDatadefect: [],
      marDoms: null,
      CoeListCheckIndex: 1,
      listData: [],
      sysTheme: "",
      SiteDialog_overlaydefect: null,
    });
    AllData.sysTheme = computed(() => {
      return store.getters.sysTheme;
    });
    const marDom = ref(null);
    const SiteDialog = ref(null);
    function closepopupdefect() {
      if (AllData.menu_overlaydefect && AllData.menu_overlaydefect != "")
        AllData.menu_overlaydefect.setPosition(undefined);
      if (
        AllData.SiteDialog_overlaydefect &&
        AllData.SiteDialog_overlaydefect != ""
      )
        AllData.SiteDialog_overlaydefect.setPosition(undefined);
    }

    function changeMap(type) {
      let baseLayer = AllData.map.getLayers().item(0);
      if (type == 0) {
        baseLayer.setSource(AllData.bluemapSource);
      } else {
        baseLayer.setSource(AllData.graymapSource);
      }
    }

    function initMap() {
      let MapUrl = "";
      //定义蓝图source
      AllData.bluemapSource = new XYZ({
        url: "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
        projection: gcjMecator,
      });

      //定义灰图source
      AllData.graymapSource = new XYZ({
        url: "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}",
        projection: gcjMecator,
      });

      if (AllData.sysTheme) {
        MapUrl = AllData.bluemapSource;
      } else {
        MapUrl = AllData.graymapSource;
      }
      AllData.map = new Map({
        target: "W_MapBox",
        layers: [
          new TileLayer({
            source: MapUrl,
          }),
        ],
        view: new View({
          projection: "EPSG:4326", //使用这个坐标系
          center: [114.274768, 30.63],
          zoom: 13,
        }),
      });
      //添加缺陷点属性面板
      // AllData.marDoms = document.getElementById("a123")
      console.log(marDom.value);
      AllData.menu_overlaydefect = new Overlay({
        element: marDom.value,
        autoPan: true,
      });

      AllData.menu_overlaydefect.setVisible(false);
      AllData.map.addOverlay(AllData.menu_overlaydefect);

      AllData.SiteDialog_overlaydefect = new Overlay({
        element: SiteDialog.value,
        autoPan: true,
      });
      AllData.SiteDialog_overlaydefect.setVisible(false);
      AllData.map.addOverlay(AllData.SiteDialog_overlaydefect);

      //鼠标移动事件
      AllData.map.on("pointermove", (evt) => {
        var pixel = AllData.map.getEventPixel(evt.originalEvent);
        var hit = AllData.map.hasFeatureAtPixel(pixel);
        AllData.map.getTargetElement().style.cursor = hit ? "pointer" : "";
      });

      //鼠标点击事件
      AllData.map.on("click", (e) => {
        e.preventDefault();
        closepopupdefect();

        var pixel = AllData.map.getEventPixel(e.originalEvent);
        var feature = AllData.map.forEachFeatureAtPixel(
          pixel,
          function (feature, layer) {
            return feature;
          }
        );

        //点击wms通过getFeatureInfo方法得到feature
        var viewResolution = AllData.map.getView().getResolution();
        //管渠
        var urlguanqu = AllData.layersGuanqu
          .getSource()
          .getFeatureInfoUrl(e.coordinate, viewResolution, "EPSG:4326", {
            INFO_FORMAT: "application/json",
          });

        //明渠
        var urlmingqu = AllData.layersMingqu
          .getSource()
          .getFeatureInfoUrl(e.coordinate, viewResolution, "EPSG:4326", {
            INFO_FORMAT: "application/json",
          });

        //暗渠
        var urlanqu = AllData.layersAnqu
          .getSource()
          .getFeatureInfoUrl(e.coordinate, viewResolution, "EPSG:4326", {
            INFO_FORMAT: "application/json",
          });

        //湖泊
        var urlhupo = AllData.layersHupo
          .getSource()
          .getFeatureInfoUrl(e.coordinate, viewResolution, "EPSG:4326", {
            INFO_FORMAT: "application/json",
          });

        //行政分区
        var urlXingZhengQu = AllData.layersXingZhengQu
          .getSource()
          .getFeatureInfoUrl(e.coordinate, viewResolution, "EPSG:4326", {
            INFO_FORMAT: "application/json",
          });

        if (feature) {
          // if(feature.type=="闸站")
          // {

          // }
          console.log(feature);

          var data = {
            "类型:": feature.cell.type || "",
            "名称:": feature.cell.name || "",
            "安装位置:": feature.cell.address || "",
            "供水区域:": feature.cell.watersupplyArea || "",
            "业主单位:": feature.cell.ownerUnit || "",
            "控制类型:": feature.cell.controlType || "",
            "建筑状态:": feature.cell.constructionState || "",
            "开口方式:": feature.cell.openingType || "",
            "服务日期:": feature.cell.serviceDate || "",
            "截面形状:": feature.cell.xsectionShape || "",
            "截面宽度:": feature.cell.xsectionWidth || "",
            "截面高度:": feature.cell.xsectionHeight || "",
          };

          //筛选data为空的不显示
          var lastresult = {};
          for (let key in data) {
            if (data[key] != "") {
              lastresult[key] = data[key];
            }
          }
          console.log(lastresult);

          AllData.resPDatadefect = lastresult;
          // MarkDom.style.display="block"
          AllData.currentLayerNamedefect_information = feature.cell.information;

          if (feature.cell.stationType) {
            AllData.CoeListCheckIndex = 1;
            // 监测站弹窗
            AllData.SiteDialog_overlaydefect.setVisible(true);

            AllData.SiteDialog_overlaydefect.setPosition([
              e.coordinate[0],
              e.coordinate[1],
            ]);
          } else {
            AllData.CoeListCheckIndex = 1;
            // 设施弹窗
            AllData.menu_overlaydefect.setVisible(true);

            AllData.menu_overlaydefect.setPosition([
              e.coordinate[0],
              e.coordinate[1],
            ]);
          }

          AllData.map.getView().setZoom(13);
          AllData.map
            .getView()
            .setCenter([e.coordinate[0], e.coordinate[1] + 0.03]);
        } else {
          //瓦片类
          //排序策略：管渠->明渠->暗渠->水系
          getAllWmsPropBySerial(
            [
              axios.get(urlguanqu),
              axios.get(urlmingqu),
              axios.get(urlanqu),
              axios.get(urlhupo),
              axios.get(urlXingZhengQu),
            ],
            e.coordinate
          );
        }
      });
    }

    function getAllWmsPropBySerial(urlArray, coordinate) {
      //排序策略：管渠->明渠->暗渠->水系
      Promise.all(urlArray).then((results) => {
        console.log("results", results);
      });
    }

    function addWSCLCToMap(imgUrl, listData, type) {
      var wkt = listData.shape;
      var feature = new FormatWKT().readFeature(wkt);
      feature.typeid = type;
      feature.cell = listData;

      feature.setStyle(
        new Style({
          image: new Icon({
            src: imgUrl,
            scale: 0.2,
          }),
          zIndex: 999999,
        })
      );

      return feature;
    }
    //开关图层,layerid分别传入1，2，3，4代表从上往下四个图层；flag给true代表显示图层，给false代表隐藏图层；
    function switchLayer(layerid, flag) {
      console.log(layerid, "+++");
      if (layerid == 1) {
        if (AllData.layersZZ) AllData.layersZZ.setVisible(flag);
      } else if (layerid == 2) {
        if (AllData.layersYSBZ) AllData.layersYSBZ.setVisible(flag);
      } else if (layerid == 4) {
        if (AllData.layersTXC) AllData.layersTXC.setVisible(flag);
      }
      // 行政区
      else if (layerid == 6) {
        if (AllData.layersXingZhengQu)
          AllData.layersXingZhengQu.setVisible(flag);
      }
      // 雨水一级
      else if (layerid == 41) {
        if (AllData.layersYuShui_1) AllData.layersYuShui_1.setVisible(flag);
      }
      // 雨水二级
      else if (layerid == 42) {
        if (AllData.layersYuShui_2) AllData.layersYuShui_2.setVisible(flag);
      }
      // 雨水三级
      else if (layerid == 43) {
        if (AllData.layersYuShui_3) AllData.layersYuShui_3.setVisible(flag);
      }
      // 污水一级
      else if (layerid == 51) {
        if (AllData.layersWuShui_1) AllData.layersWuShui_1.setVisible(flag);
      }
      // 污水二级
      else if (layerid == 52) {
        if (AllData.layersWuShui_2) AllData.layersWuShui_2.setVisible(flag);
      }
      // 污水三级
      else if (layerid == 53) {
        if (AllData.layersWuShui_3) AllData.layersWuShui_3.setVisible(flag);
      }
      //开关管渠图层
      else if (layerid == "0_1") {
        if (AllData.layersGuanqu) AllData.layersGuanqu.setVisible(flag);
      }
      //开关暗渠图层
      else if (layerid == "1_1") {
        if (AllData.layersAnqu) AllData.layersAnqu.setVisible(flag);
      }
      //开关明渠图层
      else if (layerid == "2_1") {
        if (AllData.layersMingqu) AllData.layersMingqu.setVisible(flag);
      }
      //开关水系图层
      else if (layerid == "3_1") {
        if (AllData.layersHupo) AllData.layersHupo.setVisible(flag);
      }
      //开关泵站
      else if (layerid == "71") {
        if (AllData.layersYSBZ) AllData.layersYSBZ.setVisible(flag);
      }
      //开关闸站
      else if (layerid == "74") {
        if (AllData.layersZZ) AllData.layersZZ.setVisible(flag);
      }
      //开关调蓄池
      else if (layerid == "72") {
        if (AllData.layersTXC) AllData.layersTXC.setVisible(flag);
      }
      //处理设施
      else if (layerid == "75") {
        if (AllData.layers_ChuLiSheShi)
          AllData.layers_ChuLiSheShi.setVisible(flag);
      }
      //水质
      else if (layerid == "84") {
        if (AllData.layers_ShuiZhiZhan)
          AllData.layers_ShuiZhiZhan.setVisible(flag);
      }
      //液位
      else if (layerid == "83") {
        if (AllData.layers_YeWeiZhan) AllData.layers_YeWeiZhan.setVisible(flag);
      }
      //流量
      else if (layerid == "82") {
        if (AllData.layers_LiuLiangZhan)
          AllData.layers_LiuLiangZhan.setVisible(flag);
      }
      //雨量
      else if (layerid == "81") {
        if (AllData.layers_YuLiangZhan)
          AllData.layers_YuLiangZhan.setVisible(flag);
      }
    }

    function initAllmysqldatas() {
      [
        { server: "gis_water_wuhan", layerName: "layersHupo" },
        { server: "gis_mingqu", layerName: "layersMingqu" },
        { server: "anqu", layerName: "layersAnqu" },
        { server: "gis_guanqu", layerName: "layersGuanqu" },
        { server: "wushuifenqu_v1", layerName: "layersYuShui_1" },
        { server: "wushuifenqu_v2", layerName: "layersYuShui_2" },
        { server: "wushuifenqu_v3", layerName: "layersYuShui_3" },
        { server: "xingzhengfenqu_v1", layerName: "layersXingZhengQu" },
        { server: "yushuifenqu_v1", layerName: "layersWuShui_1" },
        { server: "yushuifenqu_v2", layerName: "layersWuShui_2" },
        { server: "yushuifenqu_v3", layerName: "layersWuShui_3" },
      ].map((key) => {
        AllData[key.layerName] = new Image({
          source: new ImageWMS({
            ratio: 1,
            url: "/geoServers/geoserver/huangji/wms",
            params: {
              FORMAT: "image/png",
              VERSION: "1.3.0",
              LAYERS: `huangji:${key.server}`,
            },
          }),
          visible: true,
        });

        AllData.map.addLayer(AllData[key.layerName]);
        AllData[key.layerName].setVisible(false);
      });

      // initLayers();

      //湖泊
      // AllData.layersHupo = new TileLayer({
      //   source: new TileWMS({
      //     url: "/geoServers/geoserver/huangji/wms",
      //     params: { LAYERS: "huangji:gis_water_wuhan", TILED: false },
      //     projection: "EPSG:4326",
      //   }),
      //   zIndex: 4,
      //   visible: true,
      // });

      // AllData.map.addLayer(AllData.layersHupo);

      // //明渠
      // AllData.layersMingqu = new TileLayer({
      //   source: new TileWMS({
      //     url: "/geoServers/geoserver/huangji/wms",
      //     params: { LAYERS: "huangji:gis_mingqu", TILED: false },
      //     projection: "EPSG:4326",
      //   }),
      //   zIndex: 9,
      //   visible: true,
      // });

      // AllData.map.addLayer(AllData.layersMingqu);

      // //暗渠
      // AllData.layersAnqu = new TileLayer({
      //   source: new TileWMS({
      //     url: "/geoServers/geoserver/huangji/wms",
      //     params: { LAYERS: "huangji:anqu", TILED: false },
      //     projection: "EPSG:4326",
      //   }),
      //   zIndex: 8,
      //   visible: true,
      // });

      // AllData.map.addLayer(AllData.layersAnqu);

      // //管渠
      // AllData.layersGuanqu = new TileLayer({
      //   source: new TileWMS({
      //     url: "/geoServers/geoserver/huangji/wms",
      //     params: { LAYERS: "huangji:gis_guanqu", TILED: false },
      //     projection: "EPSG:4326",
      //   }),
      //   zIndex: 5,
      //   visible: true,
      // });

      // AllData.map.addLayer(AllData.layersGuanqu);

      // //行政分区
      // AllData.layersXingZhengQu = new TileLayer({
      //   source: new TileWMS({
      //     url: "/WuDiServers/geoserver/huangji/wms",
      //     params: { LAYERS: "huangji:xingzhengfenqu_v1", TILED: false },
      //     projection: "EPSG:4326",
      //   }),
      //   zIndex: 5,
      //   visible: true,
      // });

      // AllData.map.addLayer(AllData.layersXingZhengQu);

      // //雨水1
      // AllData.layersYuShui_1 = new TileLayer({
      //   source: new TileWMS({
      //     url: "/WuDiServers/geoserver/huangji/wms",
      //     params: { LAYERS: "huangji:yushuifenqu_v1", TILED: false },
      //     projection: "EPSG:4326",
      //   }),
      //   zIndex: 5,
      //   visible: true,
      // });

      // AllData.map.addLayer(AllData.layersYuShui_1);
      // //雨水2
      // AllData.layersYuShui_2 = new TileLayer({
      //   source: new TileWMS({
      //     url: "/WuDiServers/geoserver/huangji/wms",
      //     params: { LAYERS: "huangji:yushuifenqu_v2", TILED: false },
      //     projection: "EPSG:4326",
      //   }),
      //   zIndex: 5,
      //   visible: true,
      // });

      // AllData.map.addLayer(AllData.layersYuShui_2);
      // //雨水3
      // AllData.layersYuShui_3 = new Image({
      //   source: new TileWMS({
      //     url: "/WuDiServers/geoserver/huangji/wms",
      //     params: { LAYERS: "huangji:yushuifenqu_v3", TILED: false },
      //     projection: "EPSG:4326",
      //   }),
      //   zIndex: 5,
      //   visible: true,
      // });

      // AllData.map.addLayer(AllData.layersYuShui_3);
      // //污水1
      // AllData.layersWuShui_1 = new Image({
      //   // source: new TileWMS({
      //   //   url: "/WuDiServers/geoserver/huangji/wms",
      //   //   params: { LAYERS: "huangji:wushuifenqu_v1", TILED: false },
      //   //   projection: "EPSG:4326",
      //   // }),
      //   // zIndex: 5,
      //   // visible: true,
      //   source: new ImageWMS({
      //     ratio: 1,
      //     url: "/geoServers/geoserver/huangji/wms",
      //     params: {
      //       FORMAT: "image/png",
      //       VERSION: "1.3.0",
      //       LAYERS: `huangji:wushuifenqu_v1`,
      //     },
      //   }),
      // });

      // AllData.map.addLayer(AllData.layersWuShui_1);
      // //污水2
      // AllData.layersWuShui_2 = new Image({
      //   // source: new TileWMS({
      //   //   url: "/WuDiServers/geoserver/huangji/wms",
      //   //   params: { LAYERS: "huangji:wushuifenqu_v2", TILED: false },
      //   //   projection: "EPSG:4326",
      //   // }),
      //   // zIndex: 5,
      //   // visible: true,
      //   source: new ImageWMS({
      //     ratio: 1,
      //     url: "/geoServers/geoserver/huangji/wms",
      //     params: {
      //       FORMAT: "image/png",
      //       VERSION: "1.3.0",
      //       LAYERS: `huangji:wushuifenqu_v2`,
      //     },
      //   }),
      // });

      // AllData.map.addLayer(AllData.layersWuShui_2);
      // //污水3
      // AllData.layersWuShui_3 = new Image({
      //   // source: new ImageWMS({
      //   //   url: "/WuDiServers/geoserver/huangji/wms",
      //   //   params: { LAYERS: "huangji:wushuifenqu_v3", TILED: false },
      //   //   projection: "EPSG:4326",
      //   // }),
      //   // zIndex: 5,
      //   // visible: true,
      //   source: new ImageWMS({
      //     ratio: 1,
      //     url: "/geoServers/geoserver/huangji/wms",
      //     params: {
      //       FORMAT: "image/png",
      //       VERSION: "1.3.0",
      //       LAYERS: `huangji:wushuifenqu_v3`,
      //     },
      //   }),
      // });

      // AllData.map.addLayer(AllData.layersWuShui_3);
    }

    function initAllStations() {
      //清除所有
      if (AllData.Sourceszz) AllData.Sourceszz.clear();
      if (AllData.layersZZ) AllData.map.removeLayer(AllData.layersZZ); //闸站
      if (AllData.Sourceysbz) AllData.Sourceysbz.clear();
      if (AllData.layersYSBZ) AllData.map.removeLayer(AllData.layersYSBZ); //雨水泵站
      if (AllData.Sourcetxc) AllData.Sourcetxc.clear();
      if (AllData.layersTXC) AllData.map.removeLayer(AllData.layersTXC); //调蓄池

      if (AllData.Source_ChuLiSheShi) AllData.Source_ChuLiSheShi.clear();
      if (AllData.layers_ChuLiSheShi)
        AllData.map.removeLayer(AllData.layers_ChuLiSheShi); //处理设施
      if (AllData.Source_LiuLiangZhan) AllData.Source_LiuLiangZhan.clear();
      if (AllData.layers_LiuLiangZhan)
        AllData.map.removeLayer(AllData.layers_LiuLiangZhan); //流量站
      if (AllData.Source_ShuiZhiZhan) AllData.Source_ShuiZhiZhan.clear();
      if (AllData.layers_ShuiZhiZhan)
        AllData.map.removeLayer(AllData.layers_ShuiZhiZhan); //水质站
      if (AllData.Source_YuLiangZhan) AllData.Source_YuLiangZhan.clear();
      if (AllData.layers_YuLiangZhan)
        AllData.map.removeLayer(AllData.layers_YuLiangZhan); //雨量站
      if (AllData.Source_YeWeiZhan) AllData.Source_YeWeiZhan.clear();
      if (AllData.layers_YeWeiZhan)
        AllData.map.removeLayer(AllData.layers_YeWeiZhan); //液位站

      //添加矢量图层
      AllData.Sourceszz = new SourceVector({
        wrapX: false,
      });
      AllData.layersZZ = new LayerVector({
        source: AllData.Sourceszz,
        zIndex: 999999999999999,
        visible: true,
      });

      AllData.Sourceysbz = new SourceVector({
        wrapX: false,
      });
      AllData.layersYSBZ = new LayerVector({
        source: AllData.Sourceysbz,
        zIndex: 999999999999999,
        visible: true,
      });

      AllData.Sourcetxc = new SourceVector({
        wrapX: false,
      });
      AllData.layersTXC = new LayerVector({
        source: AllData.Sourcetxc,
        zIndex: 999999999999999,
        visible: true,
      });

      AllData.Source_ChuLiSheShi = new SourceVector({
        wrapX: false,
      });
      AllData.layers_ChuLiSheShi = new LayerVector({
        source: AllData.Source_ChuLiSheShi,
        zIndex: 999999999999999,
        visible: true,
      });

      AllData.Source_ShuiZhiZhan = new SourceVector({
        wrapX: false,
      });
      AllData.layers_ShuiZhiZhan = new LayerVector({
        source: AllData.Source_ShuiZhiZhan,
        zIndex: 999999999999999,
        visible: true,
      });

      AllData.Source_YuLiangZhan = new SourceVector({
        wrapX: false,
      });
      AllData.layers_YuLiangZhan = new LayerVector({
        source: AllData.Source_YuLiangZhan,
        zIndex: 999999999999999,
        visible: true,
      });

      AllData.Source_YeWeiZhan = new SourceVector({
        wrapX: false,
      });
      AllData.layers_YeWeiZhan = new LayerVector({
        source: AllData.Source_YeWeiZhan,
        zIndex: 999999999999999,
        visible: true,
      });

      AllData.Source_LiuLiangZhan = new SourceVector({
        wrapX: false,
      });
      AllData.layers_LiuLiangZhan = new LayerVector({
        source: AllData.Source_LiuLiangZhan,
        zIndex: 999999999999999,
        visible: true,
      });

      let imgUrl1 = "/static/img/ZhaZhan.png"; // 闸站
      // let imgUrl2 = "/static/img/YuShuiBengZhan.png"; // 雨水泵站
      // let imgUrl3 = "/static/img/WuShuiBengZhan.png"; // 污水泵站
      let imgUrl2 = "/static/img/BengZhan.png"; // 污水泵站
      let imgUrl4 = "/static/img/TiaoXuChhi.png"; // 调蓄池
      let imgUrl5 = "/static/img/ChuLiSheShi.png"; // 处理设施
      let imgUrl_LiuLiang = "/static/img/JianCe_LiuLiang.png"; // 流量监测站
      let imgUrl_YeWei = "/static/img/JianCe_YeWei.png"; // 液位监测站
      let imgUrl_YuLiang = "/static/img/JianCe_YuLiang.png"; // 雨量监测站
      let imgUrl_ShuiZhi = "/static/img/JianCe_ShuiZhi.png"; // 水质监测站
      var listData = AllData.listData;

      if (listData.length > 0) {
        //添加图片
        for (let i = 0; i < listData.length; i++) {
          if (listData[i].AddType == "闸门" && listData[i].shape) {
            var featurethis = addWSCLCToMap(imgUrl1, listData[i], "闸站");
            AllData.layersZZ.getSource().addFeature(featurethis);
          } else if (listData[i].AddType == "泵站" && listData[i].shape) {
            var featurethis = addWSCLCToMap(imgUrl2, listData[i], "泵站");
            AllData.layersYSBZ.getSource().addFeature(featurethis);
          } else if (listData[i].AddType == "调蓄池" && listData[i].shape) {
            var featurethis = addWSCLCToMap(imgUrl4, listData[i], "调蓄池");
            AllData.layersTXC.getSource().addFeature(featurethis);
          } else if (listData[i].AddType == "处理设施" && listData[i].shape) {
            var featurethis = addWSCLCToMap(imgUrl5, listData[i], "处理设施");
            AllData.layers_ChuLiSheShi.getSource().addFeature(featurethis);
          } else if (listData[i].AddType == "流量监测站" && listData[i].shape) {
            var featurethis = addWSCLCToMap(
              imgUrl_LiuLiang,
              listData[i],
              "流量监测站"
            );
            AllData.layers_LiuLiangZhan.getSource().addFeature(featurethis);
          } else if (listData[i].AddType == "水质监测站" && listData[i].shape) {
            var featurethis = addWSCLCToMap(
              imgUrl_ShuiZhi,
              listData[i],
              "水质监测站"
            );
            AllData.layers_ShuiZhiZhan.getSource().addFeature(featurethis);
          } else if (listData[i].AddType == "雨量监测站" && listData[i].shape) {
            var featurethis = addWSCLCToMap(
              imgUrl_YuLiang,
              listData[i],
              "雨量监测站"
            );
            AllData.layers_YuLiangZhan.getSource().addFeature(featurethis);
          } else if (listData[i].AddType == "液位监测站" && listData[i].shape) {
            var featurethis = addWSCLCToMap(
              imgUrl_YeWei,
              listData[i],
              "液位监测站"
            );
            AllData.layers_YeWeiZhan.getSource().addFeature(featurethis);
          }
        }

        AllData.map.addLayer(AllData.layersZZ);
        AllData.map.addLayer(AllData.layersYSBZ);
        AllData.map.addLayer(AllData.layersTXC);
        AllData.map.addLayer(AllData.layers_LiuLiangZhan);
        AllData.map.addLayer(AllData.layers_ChuLiSheShi);
        AllData.map.addLayer(AllData.layers_ShuiZhiZhan);
        AllData.map.addLayer(AllData.layers_YuLiangZhan);
        AllData.map.addLayer(AllData.layers_YeWeiZhan);
        AllData.layers_LiuLiangZhan.setVisible(false);
        AllData.layers_ShuiZhiZhan.setVisible(false);
        AllData.layers_YuLiangZhan.setVisible(false);
        AllData.layers_YeWeiZhan.setVisible(false);
        // AllData.layers_ChuLiSheShi.setVisible(false);
        // AllData.layersZZ.setVisible(false);
        // AllData.layersYSBZ.setVisible(false);
        // AllData.layersTXC.setVisible(false);
      }
    }

    // 抽排量站点点击切换
    function ChouPaiListCheck(index) {
      AllData.CoeListCheckIndex = index;
    }
    // 初始化部分图层
    function initLayers() {
      let HideLayers = [41, 42, 43, 51, 52, 53, 6];
      HideLayers.forEach((element) => {
        switchLayer(element, false);
      });
    }
    // 加载数据
    const LoadAllSizeData = async () => {
      AllData.listData = [];
      // 闸门
      let ZhaMenData = await gateInfoTManageFindAll();
      if (ZhaMenData.code == 200 && ZhaMenData) {
        ZhaMenData.data.forEach((element) => {
          element.AddType = "闸门";
        });
        AllData.listData = AllData.listData.concat(ZhaMenData.data);
      }
      // 测站
      // let CeZhanData = await monitoringStationManageFindAll();
      // if (CeZhanData.code == 200 && CeZhanData) {
      //   AllData.listData.push(CeZhanData.data);
      // }
      // 泵站
      let BengZhanData = await pumpStationManageFindAll();
      if (BengZhanData.code == 200 && BengZhanData) {
        BengZhanData.data.forEach((element) => {
          element.AddType = "泵站";
        });
        AllData.listData = AllData.listData.concat(BengZhanData.data);
      }
      // 调蓄池
      let TiaoXuChiData = await storagePondManageFindAll();
      if (TiaoXuChiData.code == 200 && TiaoXuChiData) {
        TiaoXuChiData.data.forEach((element) => {
          element.AddType = "调蓄池";
        });
        AllData.listData = AllData.listData.concat(TiaoXuChiData.data);
      }
      // 相关设施
      let XiangGuanSheShiData = await WwtpManagerFindAll();
      if (TiaoXuChiData.code == 200 && XiangGuanSheShiData) {
        XiangGuanSheShiData.data.forEach((element) => {
          element.AddType = "处理设施";
        });
        AllData.listData = AllData.listData.concat(XiangGuanSheShiData.data);
      }
      // 监测设备
      let JianCeSheBeiData = await monitoringStationManageFindAll();
      if (JianCeSheBeiData.code == 200 && JianCeSheBeiData) {
        JianCeSheBeiData.data.forEach((element) => {
          if (element.stationType == 7) {
            element.AddType = "水质监测站";
          } else if (element.stationType == 1) {
            element.AddType = "雨量监测站";
          } else if (element.stationType == 3) {
            element.AddType = "流量监测站";
          } else if (element.stationType == 4) {
            element.AddType = "液位监测站";
          }
        });
        AllData.listData = AllData.listData.concat(JianCeSheBeiData.data);
      }
      console.log(AllData.listData);
      initAllStations();
    };
    /*
        第一个值监听对象，第二个值监听的回调函数，第三个值：watch属性(immediate,deep)
      */
    watch(
      () => AllData.sysTheme,
      (newVal, oldVal) => {
        // initMap();
        if (newVal) {
          changeMap(0);
        } else {
          changeMap(1);
        }
      }
    );
    onMounted(() => {
      initMap();
      // initAllStations();
      initAllmysqldatas();
      // LoadAllSizeData();

      // 监听兄弟组件事件
      // 选择站点
      // bus.on("siteClick", (e) => {
      //   console.log(e);
      //   locateToTarget(e.ZhaName);
      // });
      // 选择类型
      bus.on("groupClick", (e) => {
        console.log(e);
        switchLayer(e.id, e.isChecked);
      });
    });
    onBeforeUnmount(() => {
      // 注销事件,避免重复执行
      bus.off("groupClick");
      bus.off("siteClick");
    });
    return {
      initMap,
      changeMap,
      initAllStations,
      initAllmysqldatas,
      addWSCLCToMap,
      switchLayer,
      closepopupdefect,
      // locateToTarget,
      ...toRefs(AllData),
      marDom,
      SiteDialog,
      ChouPaiListCheck,
    };
  },

  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
#W_MapBox {
  width: 100%;
  height: 100%;
}

.popupdefect {
  position: absolute;
  width: 820px;
  left: -417px;
  bottom: 26px;
  background: #00364d;
  z-index: 99999999;

  .ol-popup-Title1 {
    background: linear-gradient(
      90deg,
      rgba(25, 255, 241, 0.2) 0%,
      rgba(25, 255, 241, 0) 100%
    );
    text-align: right;
    height: 26px;
  }
  .ol-popup-closer {
    color: #fff;
    cursor: pointer;
    margin: 5px 15px;
    display: inline-block;
  }

  .ol-popup-Title2 {
    color: #85dff6 !important;
    font-size: 17px;
    font-weight: bold;
    text-align: left;
    margin-left: 20px;
    font-size: 18px;
    margin-top: 10px;
  }

  .CoeLeft {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;

    .IfBox {
      width: 100%;
      height: 340px;
      margin-top: 20px;
    }

    .CoeList {
      width: 142px;
      height: 30px;
      background: #0c5c5f;
      border: 1px solid #313a3a;
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      color: #78828a;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
    }

    .CoeListCheck {
      background: #0c5c5f;
      border: 1px solid #dafffe;
      color: #dafffe;
    }
  }
}

.SiteDialog {
  position: absolute;
  width: 420px;
  left: -210px;
  bottom: 35px;
  background: #00364d;
  z-index: 99999999;

  .ol-popup-Title1 {
    background: linear-gradient(
      90deg,
      rgba(25, 255, 241, 0.2) 0%,
      rgba(25, 255, 241, 0) 100%
    );
    text-align: right;
    height: 26px;
  }
  .ol-popup-closer {
    color: #fff;
    cursor: pointer;
    margin: 5px 15px;
    display: inline-block;
  }

  .ol-popup-Title2 {
    color: #85dff6 !important;
    font-size: 17px;
    font-weight: bold;
    text-align: left;
    margin-left: 20px;
    font-size: 18px;
    margin-top: 10px;
  }

  .CoeLeft {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;

    .IfBox {
      width: 100%;
      height: 340px;
      margin-top: 20px;
    }

    .CoeList {
      width: 142px;
      height: 30px;
      background: #22a8b9;
      border: 1px solid #313a3a;
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      font-weight: bold;
      color: #00364d;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
    }

    .CoeListCheck {
      background: #00475c;
      border: 1px solid #00e6e6;
      color: #00e6e6;
    }
  }
}

.bubble {
  width: 200px;
  height: 50px;
  border: 5px solid gray;
  position: relative;
}
.common {
  width: 0;
  height: 0;
  position: absolute; /* 使用绝对定位 */
  left: 50%;
  transform: translate(-50%, 0); /* 水平居中 */
}
.triangle {
  bottom: -10px;
  border-top: 10px solid gray;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
.cover {
  bottom: -13px;
  border-top: 20px solid gray;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

.divclass1 {
  width: 400px;
  display: inline-block;
  height: 330px;
  overflow: auto;

  .divclass {
    height: 36px;
    width: 390px;
    color: #638899;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: 20px;
  }

  .itemclasss {
    font-size: 14px;
    line-height: 36px;
    margin-top: 5px;
  }

  .itemclasssValue {
    font-weight: bold;
    color: #00e6e6;
    padding-right: 20px;
  }
}

.divclass2 {
  width: 390px;
  height: 330px;
  overflow: auto;
  display: inline-block;

  .divclass2Imgs {
    width: 320px;
    height: 200px;
    margin-left: 35px;
  }

  .divclass2Font {
    font-weight: bold;
    color: #dafffe;
    font-size: 12px;
  }
}
</style>