web_sh_audit/src/views/ComprehensiveAnalysis.vue

<!-- 综合分析页面 -->
<template>
  <div
    class="comprehensive-analysis"
    v-loading="layerLoading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="comprehensive-analysis-basemapswitch">
      <div
        class="basemapBox"
        :style="{
          backgroundImage: 'url(' + baseMapCollectionArr[0].imgUrl + ')',
        }"
        @mouseenter="showMapList(baseMapCollectionArr[0].type)"
      >
        <div class="basemapBox-titlebox">
          {{ baseMapCollectionArr[0].type }}
        </div>
        <div
          class="basemapBox-panel"
          v-show="satImgChecked"
          @mouseleave="closePanelEvent"
        >
          <div
            class="panel-item"
            v-for="item in mapList[baseMapCollectionArr[0].type]"
            :key="item.mapName"
            @click="changeBaseMap(item)"
          >
            {{ item.abbr }}
          </div>
        </div>
      </div>
      <div
        class="basemapBox"
        :style="{
          backgroundImage: 'url(' + baseMapCollectionArr[1].imgUrl + ')',
        }"
        @mouseenter="showMapList(baseMapCollectionArr[1].type)"
      >
        <div class="basemapBox-titlebox">
          {{ baseMapCollectionArr[1].type }}
        </div>
        <div
          class="basemapBox-panel"
          v-show="airImgChecked"
          @mouseleave="closePanelEvent"
        >
          <div
            class="panel-item"
            v-for="item in mapList[baseMapCollectionArr[1].type]"
            :key="item.mapName"
            @click="changeBaseMap(item)"
          >
            {{ item.abbr }}
          </div>
        </div>
      </div>
      <div
        class="basemapBox"
        :style="{
          backgroundImage: 'url(' + baseMapCollectionArr[2].imgUrl + ')',
        }"
        @mouseenter="showMapList(baseMapCollectionArr[2].type)"
      >
        <div class="basemapBox-titlebox">
          {{ baseMapCollectionArr[2].type }}
        </div>
        <div
          class="basemapBox-panel"
          v-show="otherChecked"
          @mouseleave="closePanelEvent"
        >
          <div
            class="panel-item"
            v-for="item in mapList[baseMapCollectionArr[2].type]"
            :key="item.mapName"
            @click="changeBaseMap(item)"
          >
            {{ item.abbr }}
          </div>
        </div>
      </div>
    </div>
    <LawPopup class="comprehensive-analysis-law-popup" />
    <LabelCasePopup
      class="comprehensive-analysis-label-popup"
      style="left: 40%"
      v-if="updateCasePopupShow"
      :targetArea="targetArea"
      :targetDistance="targetDistance"
      ref="updateLabelRef"
      @close="closeLabelEvent"
      @save="modifyLabelEvent"
    />
    <div
      class="comprehensive-analysis-backbtn"
      @click="backEvent"
      v-if="$store.state.backMenu.index && $store.state.backMenu.subIndex"
    >
      <div class="left-arrow"></div>
      <div class="title">返回上级</div>
    </div>
    <div class="comprehensive-analysis-searchbox">
      <el-input
        placeholder="请输入地名地址"
        clearable
        v-model="addressInput"
        style="background: rgba(0, 47, 86, 0.4)"
      >
        <el-button
          type="primary"
          slot="append"
          icon="el-icon-search"
          style="vertical-align: bottom"
          @click="getTargetAddress"
        ></el-button>
      </el-input>
    </div>
    <div
      class="comprehensive-analysis-searchresult"
      v-show="searchAddress.show"
    >
      <div
        class="comprehensive-analysis-searchresult-item"
        v-for="item in searchAddress.result"
        :key="item.num"
        @click="goToPoint(item.location)"
      >
        <div class="icon">{{ item.num }}</div>
        <div class="title">{{ item.title }}</div>
        <div class="address">{{ item.address }}</div>
      </div>
    </div>

    <div class="comprehensive-analysis-infobox">
      当前显示的疑点数 : &nbsp;<span>{{ currentTotal }}</span>
    </div>
    <div class="comprehensive-analysis-leftjuanlianInfo" @click="changeBase(1)">
      <div class="top"></div>
      <div class="bottom"></div>
      <div class="mapTitle">
        <div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div></div>
        <div :class="basemap == 1 ? 'mapTitlective' : 'unMapTitlective'">
          {{ basemapName }}
        </div>
      </div>
    </div>
    <div
      class="comprehensive-analysis-rightjuanlianInfo"
      v-show="showJLInfo"
      @click="changeBase(2)"
    >
      <div class="top"></div>
      <div class="bottom"></div>
      <div class="mapTitle">
        <div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div></div>
        <div :class="basemap == 2 ? 'mapTitlective' : 'unMapTitlective'">
          {{ basemapName2 }}
        </div>
      </div>
    </div>
    <!-- 属性弹窗 -->
    <AttributePopup
      class="comprehensive-analysis-popup"
      v-if="attrTableShow"
      :boxWidth="boxWidth"
      :boxHeight="boxHeight"
      :tableType="tableType"
      :tableData="tableData"
      @close="closeEvent"
    />
    <!-- 图例 -->

    <Legend
      v-show="legendShow"
      class="comprehensive-analysis-legendbox"
      :class="{ closePanel: rightBoxBtn }"
      @deleteLegend="deleteLegend"
      :legendData="{
        deleteLegendEdit: true,
        boxWidth: '230',
        boxHeight: legendHeight,
        menuIndex: '3',
        legendIcon: legendIcon,
        legendTitle: legendTitle,
        leftWidth: '30%',
        rightWidth: '70%',
        rightItemWidth: '120',
      }"
    />

    <!-- 开启左边面板的控制按钮 -->
    <div class="comprehensive-analysis-leftopenbox" v-show="leftBoxBtn">
      <div @click="leftPanelDisplay('show')"><div></div></div>
    </div>
    <!-- 开启右边面板的控制按钮 -->
    <div class="comprehensive-analysis-rightopenbox" v-show="rightBoxBtn">
      <div @click="rightPanelDisplay('show')"><div></div></div>
    </div>

    <!-- 左侧面板的显示与隐藏 -->
    <transition name="fade-left">
      <div class="comprehensive-analysis-left" v-show="showLeftBox">
        <div class="close-btnbox">
          <div @click="leftPanelDisplay('hide')"><div></div></div>
        </div>
        <div class="control-container">
          <el-input
            class="control-container-input"
            v-model="filterText"
            placeholder="请输入搜索内容"
          ></el-input>
          <NewSelect
            class="control-container-select"
            :placeholder="'请选择街镇'"
            v-model="townSelectVal"
            :options="townOptions"
            :value="townSelectVal"
            @selectEvent="changeTownEvent"
          />
          <el-tooltip
            effect="light"
            :content="isLeftLock ? '解锁面板' : '锁定面板'"
            placement="bottom-end"
          >
            <div
              :class="{ 'lock-style': isLeftLock }"
              class="control-container-pin-btn"
              @click="leftPanelLock"
            ></div>
          </el-tooltip>
        </div>
        <div class="contant-container">
          <div class="contant-container-innerbox">
            <el-tree
              :data="modelData"
              :props="defaultProps"
              @check-change="handleCheckChange"
              node-key="id"
              ref="tree"
              :filter-node-method="filterNode"
              :default-expanded-keys="expandedKeys"
            >
              <span class="custom-tree-node" slot-scope="{ node }">
                <template
                  v-if="
                    node.data.mainType === '所有图层' ||
                    node.data.mainType === '我的模型' ||
                    node.data.mainType === '疑点问题' ||
                    node.data.mainType === '我的图层'
                  "
                >
                  <el-checkbox
                    v-model="node.checked"
                    style="position: relative; width: 100%"
                  >
                    <el-tooltip
                      class="item"
                      effect="light"
                      :content="node.label"
                      placement="top-start"
                    >
                      <div class="custom-tree-node-item">
                        {{ node.data.label }}
                      </div>
                    </el-tooltip>

                    <span
                      ><el-button
                        size="normal"
                        type="text"
                        icon="el-icon-location"
                        @click="locateEvent(node)"
                        style="position: absolute; right: -30px; top: -12px"
                      ></el-button
                    ></span>
                    <span style="position: absolute; right: -80px; top: -9px">
                      <el-button
                        v-if="node.parent.label === '我的模型'"
                        size="small"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleUpdate(node)"
                      ></el-button>
                      <el-button
                        v-if="node.parent.label === '我的模型'"
                        size="small"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(node)"
                      ></el-button>
                    </span>
                  </el-checkbox>
                </template>
                <template v-else-if="node.data.mainType === '预设模型'">
                  <el-checkbox
                    v-model="node.checked"
                    :disabled="
                      node.data.disabled ||
                      (caseAuditEventStatus == true &&
                        $store.state.preModelLayerMap.length > 0 &&
                        $store.state.preModelLayerMap.indexOf(node.data.id) ==
                          -1) ||
                      (node.data.label.indexOf('林地与基本农田冲突') == -1 &&
                        townSelectVal !== '惠南镇') ||
                      (node.data.label.indexOf('林地与基本农田冲突') !== -1 &&
                        townSelectVal !== '浦东新区')
                    "
                    style="position: relative; width: 100%"
                  >
                    <el-tooltip class="item" effect="light" placement="top-end">
                      <div slot="content">
                        模型名称：{{ node.data.label }}<br /><br />
                        图层构成：{{
                          preLayerCompMap.get(node.data.label)
                            .c_layer_component || "--"
                        }}<br /><br />
                        备注: {{ preLayerCompMap.get(node.data.label).c_extra }}
                      </div>
                      <div class="custom-tree-node-item">
                        {{ node.data.label }}
                      </div>
                    </el-tooltip>
                    <span
                      ><el-button
                        size="normal"
                        type="text"
                        icon="el-icon-location"
                        @click="locateEvent(node)"
                        style="position: absolute; right: -30px; top: -12px"
                      ></el-button
                    ></span>
                  </el-checkbox>
                </template>
                <template v-else>
                  <div
                    :class="{
                      'tree-arrow': !node.expanded,
                      'tree-arrow-expanded': node.expanded,
                    }"
                  ></div>
                  <span>{{ node.label }}</span>
                </template>
              </span>
            </el-tree>
          </div>
        </div>
      </div>
    </transition>

    <!-- 右侧面板的显示与隐藏 -->
    <transition name="fade-right">
      <div class="comprehensive-analysis-right" v-show="showRightBox">
        <div class="close-btnbox">
          <div @click="rightPanelDisplay('hide')"><div></div></div>
        </div>

        <div class="control-container">
          <el-tooltip
            effect="light"
            :content="isRightLock ? '解锁面板' : '锁定面板'"
            placement="bottom-start"
          >
            <div
              :class="{ 'lock-style': isRightLock }"
              @click="rightPanelLock"
            ></div>
          </el-tooltip>
        </div>

        <div class="contant-container">
          <div class="contant-container-innerbox">
            <el-collapse v-model="activeNames">
              <el-collapse-item
                v-for="key in Object.keys(originalData)"
                :key="key"
                :name="key"
              >
                <template slot="title">
                  <div class="status-select" @mouseenter="panelMouseEnter(key)">
                    <el-tooltip
                      effect="light"
                      :content="key"
                      placement="bottom-start"
                      ><div class="title">{{ key }}</div></el-tooltip
                    >
                    <NewSelect
                      v-if="isSortCaseObj[key] === '预设模型'"
                      style="width: 100px"
                      :placeholder="'请选择排序方式'"
                      v-model="statusSelectVal"
                      :options="statusOptions"
                      :value="statusSelectVal"
                      @selectEvent="changeSortMethod"
                    />
                  </div>
                </template>
                <div
                  class="panel-list-item"
                  v-for="(v, i) in originalData[key]"
                  :key="v.id"
                  @dblclick="locateCase(v)"
                >
                  <div class="title-section">
                    {{
                      v.title +
                      "_" +
                      ((paginationData.currentPage - 1) * currentPageSize +
                        (i + 1))
                    }}
                  </div>
                  <span class="normal-icon">
                    <span
                      v-if="v.mainType === '预设模型' && v.c_boolean === '疑点'"
                      style="color: rgb(0, 230, 255)"
                      >{{ v.c_boolean }}</span
                    >
                    <span
                      v-else-if="
                        v.mainType === '预设模型' && v.c_boolean === '非疑点'
                      "
                      style="color: rgb(0, 100, 240)"
                      >{{ v.c_boolean }}</span
                    >
                    <span
                      v-else-if="
                        v.mainType === '预设模型' && v.c_boolean === '未标记'
                      "
                      >{{ v.c_boolean }}</span
                    >
                    <el-button
                      size="normal"
                      type="text"
                      icon="el-icon-location"
                      @click.stop="locateCase(v)"
                    ></el-button
                    ><el-button
                      size="normal"
                      type="text"
                      icon="el-icon-more"
                      @click.stop="listItemClick('default', v)"
                    ></el-button>
                  </span>
                  <!-- {{ v.column_name + "_" + (i + 1) }} -->
                </div>
                <div class="panel-footer" @mouseenter="panelMouseEnter(key)">
                  <Pagination :paginationData="paginationData" />
                </div>
              </el-collapse-item>

              <el-collapse-item name="myLabel">
                <template slot="title">
                  我的标记
                  <div class="all-icon">
                    <div
                      class="all-icon-locate"
                      @click.stop="labelAllLocate"
                    ></div>
                    <div
                      class="all-icon-visible"
                      :class="{ click: labelAllVisibleChecked }"
                      @click.stop="labelAllVisible"
                    ></div>
                  </div>
                </template>

                <div
                  class="panel-list-item"
                  v-for="(item, index) in rightLabelData"
                  :key="item.id"
                >
                  <div
                    class="title-section"
                    @click="listItemClick('new', item)"
                  >
                    {{ item.name ? item.name : `疑点${index}` }}
                  </div>
                  <span class="operation-icon"
                    ><el-button
                      size="normal"
                      type="text"
                      icon="el-icon-edit"
                      @click="updateLabel(item)"
                    ></el-button
                    ><el-button
                      size="normal"
                      type="text"
                      icon="el-icon-delete"
                      @click="deleteLabel(item.id)"
                    ></el-button
                  ></span>
                  <span
                    class="visible-icon"
                    :class="{ click: item.geometryChecked }"
                    @click="controlLabel(item)"
                  ></span>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
// 综合分析 this.$store.state.leftMenuTitle
import MenuCard from "@/components/layout/MenuCard.vue";
import Legend from "@/components/map/Legend.vue";
import Pagination from "@/components/common/Pagination.vue";
import NewSelect from "@/components/common/NewSelect.vue";
import publicFun from "@/utils/publicFunction.js";
import AttributePopup from "@/components/popup/AttributePopup.vue";
import LabelCasePopup from "@/components/popup/LabelCasePopup.vue";
import LawPopup from "@/components/popup/LawPopup.vue";
import coordinate from "@/utils/coordinate";
import X2js from "x2js";
export default {
  name: "ComprehensiveAnalysis",
  components: {
    MenuCard,
    Legend,
    AttributePopup,
    LawPopup,
    LabelCasePopup,
    Pagination,
    NewSelect,
  },
  data() {
    return {
      searchAddress: {
        result: [
          {
            num: 1,
            title: "人民广场",
            address: "黄浦区",
            location: [255.447, -436.948],
          },
          {
            num: 2,
            title: "人民广场地下变电站",
            address: "黄浦区",
            location: [458.232, -491.819],
          },
        ],
        show: false,
      },
      targetArea: "",
      targetDistance: "",
      uploadNodeChildren: [],
      // 判断是否显示疑点筛选弹窗
      isSortCaseObj: {},
      // 存储图层构成信息
      preLayerCompMap: new Map(),
      displaySortSelect: false,
      basemapName: "air-2022",
      basemapName2: "sat2022-s2",
      basemap: 1,
      caseAuditEventStatus: false,
      satImgChecked: false,
      airImgChecked: false,
      otherChecked: false,
      basemapChecked: "",
      mapList: {
        卫星影像: [],
        航空影像: [],
        其他: [],
      },
      baseMapCollectionArr: [
        {
          id: 1,
          type: "卫星影像",
          imgUrl: require("../assets/map/sat_img.png"),
        },
        {
          id: 2,
          type: "航空影像",
          imgUrl: require("../assets/map/air_img.png"),
        },
        {
          id: 3,
          type: "其他",
          imgUrl: require("../assets/map/others.png"),
        },
      ],
      showJLInfo: false,
      // 存储图斑颜色
      collectColorMapIndex: 0,
      collectColorMap: new Map(),
      targetLayerPage: {},
      targetLayerTotal: {},
      currentTotal: 0,
      layerLoading: false,
      expandedKeys: [],
      // 我的模型id集合
      myModelIdMap: new Map(),
      // 第一层数据集合
      firstLevelIdMap: new Map(),
      problemIdMap: new Map(),
      // 下拉框镇集合
      townSelectTreeMap: new Map(),
      // 所有图层 -- 根据镇域划分的数据集合
      allLayersByTownMap: new Map(),
      labelAllVisibleChecked: true,
      townSelectVal: "老港镇",
      townOptions: [],
      statusSelectVal: "",
      statusOptions: [
        {
          value: "未标记",
          label: "未标记",
        },
        {
          value: "疑点",
          label: "疑点",
        },
        {
          value: "非疑点",
          label: "非疑点",
        },
      ],
      enteredPanelId: "",
      enteredColumnId: "",
      enteredMainType: "",
      enteredSourceType: "",
      uploadBaseUrl: "/dms",
      classTextToIndex: {},
      addressInput: "",
      legendShow: false,
      tableType: "normal",
      tableData: [],
      legendHeight: "0",
      boxWidth: "600",
      boxHeight: "400",
      activeNames: ["myLabel"],
      rightPanelTitle: "",
      rightPanelDataMap: new Map(),
      originalData: {},
      originalDataMap: new Map(),
      rightLabelData: [],
      showLeftBox: true,
      showRightBox: true,
      leftBoxBtn: false,
      rightBoxBtn: false,
      modelData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      legendIcon: [],
      legendTitle: [],
      // 我的模型相关数据
      myModel: null,
      filterText: "",
      // 存放对应图层的坐标
      treeCoordMap: new Map(),
      layerIdMap: new Map(),
      isLeftLock: true,
      isRightLock: true,
      currentPage: 1,
      currentPageSize: 10,
      paginationData: {
        pageSize: 10,
        pagerCount: 5,
        currentPage: 1,
        pageSizes: [5, 10, 20, 30],
        total: 50,
        currentChange: (val) => {
          let columnId = this.enteredColumnId;
          let currentPageSize = this.currentPageSize;
          let panelId = this.enteredPanelId;
          let mainType = this.enteredMainType;
          let sourceType = this.enteredSourceType;
          this.changeSingleLayer(val, currentPageSize, panelId);
        },
        handleSizeChange: (val) => {
          this.handleSizeChange(val);
        },
      },
    };
  },
  computed: {
    // 监听卷帘对比状态
    getJLStatus() {
      return this.$store.state.jlActiveState;
    },
    // 监听底部菜单栏状态 -- 仅针对疑点审计
    getAuditBtnStatus() {
      let _index = this.$store.state.bottomMenuIndexs.index;
      let _subIndex = this.$store.state.bottomMenuIndexs.subIndex;
      return {
        index: _index,
        subIndex: _subIndex,
      };
    },
    getLeftMenuTitle() {
      return this.$store.state.leftMenuTitle;
    },
    getMyLabelData() {
      return this.$store.getters.myLabelPointsArr;
    },
    getMyPoints() {
      return map2DViewer.myLabels;
    },
    attrTableShow: {
      get() {
        return this.$store.state.attrTableShow;
      },
      set(val) {
        this.$store.state.attrTableShow = val;
      },
    },
    updateCasePopupShow: {
      get() {
        return this.$store.state.updateCasePopupShow;
      },
      set(val) {
        this.$store.state.updateCasePopupShow = val;
      },
    },
    uploadDataArr() {
      return uploadDataIdArr;
    },
  },
  watch: {
    addressInput(val) {
      if (val === "") {
        this.searchAddress.show = false;
        map2DViewer.analysisGroups["address"].clearLayers();
      }
    },
    townSelectVal: {
      handler(val) {
        // console.log(val, "综合分析当前选中的值");
      },
      immediate: true,
    },
    // 监听底部菜单栏
    getJLStatus(val) {
      if (val) {
        this.showJLInfo = true;
      } else {
        this.basemap = 1;
        this.showJLInfo = false;
      }
    },
    // 控制全选的显示或隐藏
    labelAllVisibleChecked(val) {
      if (this.rightLabelData.length > 0) {
        this.rightLabelData.forEach((item) => {
          this.controlLabel(item);
        });
        if (val) {
          this.labelAllLocate();
        }
      }
    },
    "$store.state.navSelect": {
      handler(val, oldVal) {
        if (val.index === "1" || val.index === "2") {
          // 不进入综合分析页面 -- 切换回暗黑地图
          if (!map2DViewer.map.hasLayer(map2DViewer.layers["darkmap"])) {
            map2DViewer.map.hasLayer(map2DViewer.layers["imagery"]) &&
              map2DViewer.map.removeLayer(map2DViewer.layers["imagery"]);
            map2DViewer.map.hasLayer(map2DViewer.layers["imagery2"]) &&
              map2DViewer.map.removeLayer(map2DViewer.layers["imagery2"]);
            map2DViewer.map.addLayer(map2DViewer.layers["darkmap"]);
          }
          this.clearAllData();
          this.labelAllVisibleChecked = false;
        }

        if (val.index === "3") {
          // 默认切换为最新航空影像图
          if (!map2DViewer.map.hasLayer(map2DViewer.layers["imagery"])) {
            map2DViewer.map.hasLayer(map2DViewer.layers["darkmap"]) &&
              map2DViewer.map.removeLayer(map2DViewer.layers["darkmap"]);
            map2DViewer.map.hasLayer(map2DViewer.layers["imagery2"]) &&
              map2DViewer.map.removeLayer(map2DViewer.layers["imagery2"]);
            map2DViewer.map.addLayer(map2DViewer.layers["imagery"]);
          }
          // console.log("进入综合分析页面 -- 默认展开老港镇数据");
          setTimeout(() => {
            this.changeTownEvent(this.townSelectVal);
          }, 1000);

          // 如果没有初始化设置
          if (!map2DViewer.groups["我的标记图层组"]) {
            this.getUserMarkers();
            this.activeNames = ["myLabel"];
          }
          this.labelAllVisibleChecked = true;
          // 进入该页面后监听地图移动事件
          map2DViewer.map.on("move", (e) => {
            if (!this.isLeftLock) {
              this.showLeftBox = false;
              this.leftBoxBtn = true;
            }

            if (!this.isRightLock) {
              this.showRightBox = false;
              this.rightBoxBtn = true;
            }
          });
        }
      },
      deep: true,
    },
    uploadDataArr: {
      handler(val) {
        if (val.length > 0) {
          // console.log(val, "uploadDataIdArr");
        }
      },
      immediate: true,
      deep: true,
    },
    getLeftMenuTitle: {
      handler(val) {
        this.$nextTick(() => {
          // 从疑点筛查进入综合分析页面默认勾选
          if (defaultModelNameMap.has(val)) {
            setTimeout(() => {
              this.expandedKeys.push(defaultModelNameMap.get(val));
              // 设置默认勾选项
              this.$refs.tree.setCheckedKeys([defaultModelNameMap.get(val)]);
              this.$refs.tree.setCurrentKey(defaultModelNameMap.get(val));
              let nodeData = this.$refs.tree.getCurrentNode();
              this.handleCheckChange(nodeData, true);
            }, 1000);
          }
        });
      },
      immediate: true,
    },
    legendTitle(val) {
      // console.log(val, "监听当前图例item数量");
      if (val.length === 0) {
        this.legendShow = false;
      }

      if (val.length > 0 && val.length <= 10) {
        this.legendShow = true;
        this.legendHeight = 50 * val.length + 50 + "";
      }
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    getMyLabelData: {
      handler(val) {
        // console.log("标记点保存事件成功，允许开始定位");
        this.rightLabelData = [];
        if (val.length > 0) {
          let _myLabelPointsItem = {};
          let _myLabelPointsItemState = false;
          this.rightLabelData = val.map((v, i) => {
            let data = JSON.parse(v.geojson);
            if (
              sessionStorage.getItem("myLabelPointsId") &&
              sessionStorage.getItem("myLabelPointsId") == v.id
            ) {
              sessionStorage.removeItem("myLabelPointsId");
              _myLabelPointsItemState = true;
              _myLabelPointsItem = {
                id: v.id,
                name: data.properties.name,
                coord: data.geometry.coordinates[0][0],
                type: data.properties.title,
                des: data.properties.desc,
                geojson: v.geojson,
                geometryChecked: false,
                featureType: data.properties.featureType,
              };
              return _myLabelPointsItem;
            }
            return {
              id: v.id,
              name: data.properties.name,
              coord: data.geometry.coordinates[0][0],
              type: data.properties.title,
              des: data.properties.desc,
              geojson: v.geojson,
              geometryChecked: false,
              featureType: data.properties.featureType,
            };
          });
          this.$store.state.rightLabelData = this.rightLabelData;
          if (_myLabelPointsItemState) {
            setTimeout(() => {
              this.controlLabel(_myLabelPointsItem);
              if (map2DViewer.groups["我的标记图层组"]) {
                map2DViewer.map.fitBounds(
                  map2DViewer.groups["我的标记图层组"].getBounds()
                );
              }
            }, 300);
          } else {
            setTimeout(() => {
              if (this.rightLabelData.length > 0) {
                this.rightLabelData.forEach((item) => {
                  this.controlLabel(item);
                });
                if (map2DViewer.groups["我的标记图层组"]) {
                  map2DViewer.map.fitBounds(
                    map2DViewer.groups["我的标记图层组"].getBounds()
                  );
                }
              }
            }, 300);
          }
          // console.log(this.rightLabelData, "rightLabelData");
        }
      },
      deep: true,
      // immediate: true,
    },
  },
  created() {
    this.townOptions = [];
    this.classDictQuery("0", "c_task_type", "任务类型");
    this.classDictQuery("0", "浦东新区行政区划", "浦东新区行政区划");
    setTimeout(() => {
      this.getPreLayerApi();
    }, 50);
    setTimeout(() => {
      this.getColumnList();
    }, 500);
  },

  mounted() {
    // 上传数据后更新我的图层节点
    this.$bus.$off("addUploadLayerEvent");
    this.$bus.$on("addUploadLayerEvent", (data) => {
      if (this.$refs.tree) {
        if (this.uploadNodeChildren.length > 0) {
          this.uploadNodeChildren.forEach((v) => {
            this.handleCheckChange(v, false);
          });
        }

        setTimeout(() => {
          let obj = {
            id: data.id,
            label: data.label,
            mainType: "我的图层",
            data: data.data,
            children: [],
          };

          this.rightPanelDataMap.set(data.id, obj);

          this.uploadNodeChildren.push(obj);
          this.$refs.tree.updateKeyChildren(
            this.firstLevelIdMap.get("我的图层").id,
            this.uploadNodeChildren
          );
          this.expandedKeys.push(this.firstLevelIdMap.get("我的图层").id);
          this.$refs.tree.setCheckedKeys([data.id]);
          this.$refs.tree.setCurrentKey(data.id);
          this.handleCheckChange(obj, true);
        }, 500);
      }
    });

    this.$bus.$off("viewDetailsPopup");
    this.$bus.$on("viewDetailsPopup", (data) => {
      this.viewDetailsPopup(data);
    });
    // 我的任务页面，用户点击已审核的任务时：
    this.$bus.$off("openMyTask");
    this.$bus.$on("openMyTask", (data) => {
      console.log(
        `监听到用户点击任务！任务类型Code：${data[0]},所属街道Code：${data[1]}!`
      );
      this.classTextToIndex["浦东新区行政区划"].forEach((v, i) => {
        if (v === data[1]) {
          // console.log(i, "当前所属街镇选中");
          this.townSelectVal = i;
          this.changeTownEvent(i);
        }
      });
    });
    // 全流程详细页面，用户点击整改中的某个数据时：
    this.$bus.$off("openMyView");
    this.$bus.$on("openMyView", (data) => {
      if (this.problemIdMap.has("疑点问题")) {
        console.log(
          this.problemIdMap.get("疑点问题"),
          "疑点问题 -- 老港全流程管理"
        );
        setTimeout(() => {
          console.log(
            `监听到用户点击全流程详细页面，用户点击整改中的某个数据时：！任务类型Code：${data[0]},所属街道Code：${data[1]}!`
          );
          this.expandedKeys.push(this.problemIdMap.get("疑点问题").id);
          this.$refs.tree.setCheckedKeys([
            this.problemIdMap.get("疑点问题").id,
          ]);
          this.$refs.tree.setCurrentKey(this.problemIdMap.get("疑点问题").id);
          let nodeData = this.$refs.tree.getCurrentNode();
          this.handleCheckChange(nodeData, true);
        }, 1000);
      }
    });

    this.$bus.$off("caseAuditEvent2");
    this.$bus.$on("caseAuditEvent2", () => {
      this.caseAuditEvent();
    });

    this.$store.state.mapMethodsCollection.set("METHODS", {
      // 统计标记的疑点或非疑点数并排序
      changeSortMethod: this.changeSortMethod,
      changeCaseBoolean: this.changeCaseBoolean,
      // 更新左侧我的模型节点
      getMyModelData: this.getMyModelData,
    });
  },
  destroy() {
    // 当容器销毁时，需要停止监听该事件
    this.$bus.$off("viewDetailsPopup");
    this.$bus.$off("openMyTask");
    this.$bus.$off("openMyView");
    this.$bus.$off("caseAuditEvent2");
    this.$bus.$off("addUploadLayerEvent");
  },
  methods: {
    goToPoint(location) {
      let newLocation = this.latLngsTransform(location);
      console.log(newLocation);
      this.$store.state.mapMethodsCollection
        .get("RENDER")
        .setView(newLocation.reverse(), 6);
    },
    createSinglePoint(data) {
      let coord = data.location;
      coord = this.latLngsTransform(coord);
      console.log(coord, "转换后的坐标");
      let point = L.marker(coord.reverse(), {
        opacity: 1,
      }).addTo(map2DViewer.analysisGroups["address"]);
    },
    /**
     * 获取地名地址服务
     */
    getTargetAddress() {
      console.log(this.addressInput);
      if (this.addressInput !== "") {
        this.searchAddress.show = true;
        this.searchAddress.result = [];
        if (!map2DViewer.analysisGroups["address"]) {
          map2DViewer.analysisGroups["address"] = L.featureGroup();
          map2DViewer.analysisGroups["address"].addTo(map2DViewer.map);
        } else {
          map2DViewer.analysisGroups["address"].clearLayers();
        }

        const x2js = new X2js();
        this.$GetAddress(
          `${this.urlsCollection.getAddressService}?vSearch_word=${this.addressInput}&vResult_count=10`
        ).then((response) => {
          let data = x2js.xml2js(response);
          let finalTable = data.DZ_Result.DZ_Table.diffgram.NewDataSet.Table;
          if (finalTable && finalTable.length > 0) {
            this.searchAddress.result = finalTable.map((v, i) => {
              return {
                num: i + 1,
                title: v.POI,
                address: v.REGION_QX,
                location: [parseFloat(v.POINT_X), parseFloat(v.POINT_Y)],
              };
            });

            this.searchAddress.result.forEach((v) => {
              this.createSinglePoint(v);
            });

            map2DViewer.map.fitBounds(
              map2DViewer.analysisGroups["address"].getBounds()
            );
          }
        });
      }
    },
    deleteLegend(item) {
      let data = {
        id: item,
        mainType: "所有图层",
      };
      this.handleCheckChange(data, false);
    },
    /**
     * 关闭所有图层数据
     *
     * 使用场景 -- 叠置分析，切换镇域
     */
    closeAllRelatedLayers() {
      // 每次切换镇的时候都清空面板仅针对所有图层，预设模型
      if (this.rightPanelDataMap.size > 0) {
        this.rightPanelDataMap.forEach((v, i) => {
          if (map2DViewer.analysisGroups[i]) {
            this.handleCheckChange(v, false);
            delete map2DViewer.analysisGroups[i];
          }
        });
        this.$refs.tree.setCheckedKeys([]);
      }
    },
    /**
     * 疑点数据中增加数据来源以及id
     * @data
     * @mainType 判断是主目录类型
     * @uniqueId id
     */
    addLayerDataSource(data, mainType, layerName, townType) {
      let targetGeometry = JSON.parse(data);
      if (targetGeometry) {
        let properties = targetGeometry.properties;
        let id = targetGeometry.id;
        targetGeometry.properties["id"] = id;
        // 添加数据来源
        if (!targetGeometry.properties["数据来源"]) {
          targetGeometry.properties["数据来源"] = "规资";
        }

        // 缺少的镇域名称补充
        if (townType && townType != "") {
          targetGeometry.properties["镇域名称"] = townType;
        }

        // 添加图层构成
        if (
          mainType === "预设模型" &&
          layerName &&
          this.preLayerCompMap.has(layerName)
        ) {
          if (!targetGeometry.properties["图层构成"]) {
            targetGeometry.properties["图层构成"] =
              this.preLayerCompMap.get(layerName).c_layer_component;
          }
        }

        return JSON.stringify(targetGeometry);
      }
    },
    /**
     * 上海2000高斯投影坐标转上海2000经纬度坐标
     */
    latLngsTransform(latlngsAry) {
      // 深拷贝
      let tempLatlngsAry = JSON.parse(JSON.stringify(latlngsAry));
      if (typeof tempLatlngsAry[0] === "number") {
        if (tempLatlngsAry.length < 3 && tempLatlngsAry.length > 0) {
          tempLatlngsAry = coordinate.shcj_to_wgs84(
            tempLatlngsAry[0],
            tempLatlngsAry[1]
          );
          tempLatlngsAry = [
            tempLatlngsAry[0] - 0.19195,
            tempLatlngsAry[1] + 0.00011,
          ];

          return tempLatlngsAry;
        }
        if (tempLatlngsAry.length === 3) {
          tempLatlngsAry = coordinate.shcj_to_wgs84(
            tempLatlngsAry[0],
            tempLatlngsAry[1]
          );
          tempLatlngsAry = [
            tempLatlngsAry[0] - 0.19195,
            tempLatlngsAry[1] + 0.00011,
          ];
          return tempLatlngsAry;
        }
      } else {
        for (var i = 0, l = tempLatlngsAry.length; i < l; i++) {
          tempLatlngsAry[i] = this.latLngsTransform(tempLatlngsAry[i]);
        }
      }
      return tempLatlngsAry;
    },
    /**
     * 叠置分析数据标准化
     */
    overlayStandardGeojson(data) {
      if (data) {
        let geojson = {
          type: "Feature",
          geometry: data,
        };
        return geojson;
      }
    },
    // 获取预设模型图层构成接口数据
    getPreLayerApi() {
      let params = new FormData();
      params.append("columnId", 1404);
      params.append("states", "0,1,2,3");
      params.append("pageSize", 100);
      params.append("page", 0);
      this.$Post(this.urlsCollection.selectContentList, params).then((res) => {
        if (res.code === 200 && res.content.data.length > 0) {
          res.content.data.forEach((v, i) => {
            if (!this.preLayerCompMap.has(v.c_layer_name)) {
              this.preLayerCompMap.set(v.c_layer_name, {
                c_first_level: v.c_first_level,
                c_layer_component: v.c_layer_component,
                c_town: v.c_town,
                c_model_name: v.c_model_name,
                c_extra: v.c_extra,
              });
            }
          });
        }
      });
    },
    //设置图层图例 -- 图例名称及对应的id
    setLayerLegend(title, uniqueId) {
      // 生成图例时设置初始化图层颜色 -- 叠置分析的图层
      if (targetColor.length > this.collectColorMapIndex + 1) {
        this.collectColorMapIndex++;
      } else {
        this.collectColorMapIndex = 0;
      }
      this.collectColorMap.set(
        this.collectColorMapIndex,
        `rgb(${targetColor[this.collectColorMapIndex][0]},${
          targetColor[this.collectColorMapIndex][1]
        },${targetColor[this.collectColorMapIndex][2]})`
      );
      // 图例
      this.legendTitle.push({
        name: title,
        info: title,
        uniqueId: uniqueId,
      });
      this.legendIcon.push({
        uniqueId: uniqueId,
        name: title,
        background: "transparent",
        border: `1px solid ${this.collectColorMap.get(
          this.collectColorMapIndex
        )}`,
      });
    },
    // 修改数据中的疑点
    changeCaseBoolean(val, status) {
      if (this.enteredPanelId) {
        let data = this.originalDataMap.get(this.enteredPanelId);
        let index;
        data.forEach((v, i) => {
          if (v.id === val) {
            index = i;
          }
        });
        data[index]["c_boolean"] = status;
        this.originalDataMap.set(this.enteredPanelId, data);
        console.log(data, "修改疑点布尔值");
      }
    },
    // 选择排序方式
    changeSortMethod(val) {
      if (this.enteredPanelId) {
        let data = this.originalDataMap.get(this.enteredPanelId);

        let arr1 = data.filter((v) => {
          return v.c_boolean === "未标记";
        });
        let arr2 = data.filter((v) => {
          return v.c_boolean === "疑点";
        });

        let arr3 = data.filter((v) => {
          return v.c_boolean === "非疑点";
        });

        switch (val) {
          case "未标记":
            this.originalDataMap.set(this.enteredPanelId, [
              ...arr1,
              ...arr2,
              ...arr3,
            ]);
            break;
          case "疑点":
            this.originalDataMap.set(this.enteredPanelId, [
              ...arr2,
              ...arr3,
              ...arr1,
            ]);
            break;
          case "非疑点":
            this.originalDataMap.set(this.enteredPanelId, [
              ...arr3,
              ...arr2,
              ...arr1,
            ]);
            break;
        }
        this.changeSingleLayer(1, this.currentPageSize, this.enteredPanelId);
      }
    },
    // 得到底部菜单疑点审计开启状态
    caseAuditEvent() {
      this.caseAuditEventStatus = !this.caseAuditEventStatus;
    },
    closePanelEvent() {
      this.satImgChecked = false;
      this.airImgChecked = false;
      this.otherChecked = false;
    },
    changeBase(val) {
      this.basemap = val;
      if (this.$store.state.jlActiveState) {
        this.$message.success("选中" + (val == 1 ? "左侧" : "右侧") + "地图！");
      }
    },
    changeBaseMap(data) {
      console.log(data);
      if (this.basemap == 2 && map2DViewer.map.hasLayer(map2DViewer.jlMap)) {
        map2DViewer.map.removeLayer(map2DViewer.jlMap);
        map2DViewer.jlMap = this.$store.state.mapMethodsCollection
          .get("RENDER")
          .addTiledMapLayer(data.mapUrl);
        map2DViewer.map.addLayer(map2DViewer.jlMap);
        this.$store.state.JLControlRightMapUrl = data.mapUrl;
        this.basemapName2 = data.abbr;
      } else if (map2DViewer.map.hasLayer(map2DViewer.layers["imagery"])) {
        map2DViewer.map.removeLayer(map2DViewer.layers["imagery"]);
        map2DViewer.layers["imagery"] = this.$store.state.mapMethodsCollection
          .get("RENDER")
          .addTiledMapLayer(data.mapUrl);
        map2DViewer.map.addLayer(map2DViewer.layers["imagery"]);
        this.basemapName = data.abbr;
      }
      this.$bus.$emit("reJLControl");
      this.satImgChecked = false;
      this.airImgChecked = false;
      this.otherChecked = false;
    },
    // 勾选镇时默认展开当前镇
    changeTownEvent(val) {
      this.closeAllRelatedLayers();
      if (this.townSelectTreeMap.has(val)) {
        let children = [];
        let data = this.townSelectTreeMap.get(val).data;
        if (data.length > 0) {
          children = data.map((item1) => {
            return {
              id: `${item1.title}_${item1.id}`,
              label: item1.title,
              children:
                !item1.columnList || item1.columnList.length === 0
                  ? []
                  : item1.columnList.map((item2) => {
                      this.rightPanelDataMap.set(`${item2.title}_${item2.id}`, {
                        // id: item2.id,
                        // mainType: "所有图层",
                        // sourceType: item1.title,
                        id: `${item2.title}_${item2.id}`,
                        label: item2.title,
                        columnId: item2.id,
                        townId: this.townSelectTreeMap.get(val).id,
                        townType: val,
                        sourceId: item1.id,
                        sourceType: item1.title,
                        mainType: "所有图层",
                        color: publicFun.getRGBColor(),
                        children: [],
                      });

                      return {
                        id: `${item2.title}_${item2.id}`,
                        label: item2.title,
                        columnId: item2.id,
                        townId: this.townSelectTreeMap.get(val).id,
                        townType: val,
                        sourceId: item1.id,
                        sourceType: item1.title,
                        mainType: "所有图层",
                        color: publicFun.getRGBColor(),
                        children: [],
                      };
                    }),
            };
          });
        }

        if (this.$refs.tree) {
          this.$refs.tree.updateKeyChildren(
            this.firstLevelIdMap.get("所有图层").id,
            children
          );
          this.$store.state.legendTree = children;
          this.expandedKeys.push(this.firstLevelIdMap.get("所有图层").id);
        }
      }
    },
    showMapList(val) {
      if (val === "卫星影像" && map2DViewer.baseMapCollection.length > 0) {
        this.mapList["卫星影像"] = map2DViewer.baseMapCollection.filter((v) => {
          return v.basemapType === "1";
        });
        this.satImgChecked = true;
        this.otherChecked = false;
        this.airImgChecked = false;
      }

      if (val === "航空影像" && map2DViewer.baseMapCollection.length > 0) {
        this.mapList["航空影像"] = map2DViewer.baseMapCollection.filter((v) => {
          return v.basemapType === "2";
        });
        this.satImgChecked = false;
        this.otherChecked = false;
        this.airImgChecked = true;
      }
      if (val === "其他" && map2DViewer.baseMapCollection.length > 0) {
        this.mapList["其他"] = map2DViewer.baseMapCollection.filter((v) => {
          return v.basemapType === "3";
        });
        this.satImgChecked = false;
        this.airImgChecked = false;
        this.otherChecked = true;
      }
    },
    // 清除页面所有数据
    clearAllData() {
      this.currentTotal = 0;
      this.paginationData.total = 0;
      this.targetLayerTotal = {};
      this.targetLayerPage = {};
      this.originalDataMap.clear();
      this.originalData = {};
      this.isSortCaseObj = {};
      this.searchAddress.show = false;
      this.addressInput = "";
      map2DViewer.map.off("move");
      // 所有图层或预设模型全部删除
      if (Object.getOwnPropertyNames(map2DViewer.analysisGroups).length > 0) {
        for (let group in map2DViewer.analysisGroups) {
          // 仅从地图上删除对应图层组
          this.$store.state.mapMethodsCollection
            .get("RENDER")
            .deleteGroupFromMap(group);
        }
        this.$refs.tree.setCheckedKeys([]);
      }

      // map2DViewer.analysisGroups = {};
      map2DViewer.polygons = {};
      this.attrTableShow = false;
      this.updateCasePopupShow = false;
      map2DViewer.map.closePopup();
    },
    // 右侧分页栏图斑定位
    locateCase(data) {
      console.log(data, "右侧分页栏图斑定位locateCase");
      // 将当前点定位到中心位置
      if (map2DViewer.polygons[data.id]) {
        map2DViewer.polygons[data.id].setStyle({
          color: "red",
          fillColor: "red",
          fillOpacity: 0.35,
        });
        map2DViewer.map.fitBounds(map2DViewer.polygons[data.id].getBounds());
      }
    },
    labelAllLocate() {
      if (map2DViewer.groups["我的标记图层组"]) {
        map2DViewer.map.fitBounds(
          map2DViewer.groups["我的标记图层组"].getBounds()
        );
      }
    },
    labelAllVisible() {
      this.labelAllVisibleChecked = !this.labelAllVisibleChecked;
    },
    panelMouseEnter(val) {
      if (this.rightPanelDataMap.has(val)) {
        this.enteredPanelId = val;
        this.enteredColumnId = this.rightPanelDataMap.get(val).columnId;
        this.enteredMainType = this.rightPanelDataMap.get(val).mainType;
        this.enteredSourceType = this.rightPanelDataMap.get(val).sourceType;
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPageSize = val;
      this.changeSingleLayer(
        this.currentPage,
        this.currentPageSize,
        this.enteredPanelId
      );
    },
    /**
     * 渲染上传的疑点数据
     * 1. 根据unique更新我的图层节点；
     * 2. 默认打开该图层；
     * 3. 显示疑点数目，属性数据，分页数据等信息
     */
    renderUploadedData(data) {
      let uniqueId = data.id;
      this.layerIdMap.set(uniqueId, uniqueId);
      // 图层未初始化
      if (!map2DViewer.analysisGroups[uniqueId]) {
        // 生成图例时设置初始图层颜色
        this.setLayerLegend(uniqueId, uniqueId);
        map2DViewer.analysisGroups[uniqueId] = L.featureGroup();
        map2DViewer.analysisGroups[uniqueId].addTo(map2DViewer.map);
        if (!this.$store.state.selectSelectDataMap["singlePolygon"]) {
          this.$store.state.selectSelectDataMap["singlePolygon"] = [];
        }

        let caseArr = JSON.parse(data.data).map((ele) => {
          // 坐标转换
          let coordinates = ele.geometry.coordinates;
          if (coordinates.length > 0) {
            ele.geometry.coordinates = this.latLngsTransform(coordinates);

            return {
              id: publicFun.buildGuid(uniqueId),
              c_boolean: "未标记",
              title: data.label,
              mainType: "我的图层",
              c_content: JSON.stringify(ele),
            };
          }
        });

        if (!this.originalDataMap.has(uniqueId)) {
          this.originalDataMap.set(uniqueId, caseArr);
        }
        // 该图层疑点总数
        this.targetLayerTotal[uniqueId] = caseArr.length;
        // 分页组件total
        this.paginationData.total = caseArr.length;
        this.currentTotal += caseArr.length;
        console.log(caseArr, "即将渲染的上传图层数据");
        caseArr.forEach((ele) => {
          let cid = ele.id;
          let geometry = this.addLayerDataSource(
            ele.c_content,
            ele.mainType,
            data.label
          );
          let defaultStatus = ele.c_boolean;
          let color = this.collectColorMap.get(this.collectColorMapIndex);
          this.$store.state.mapMethodsCollection
            .get("RENDER")
            .addSinglePolygon(
              geometry,
              cid,
              color,
              uniqueId,
              data.mainType,
              "",
              defaultStatus,
              "",
              ""
            );
        });

        // 激活当前展开面板
        this.activeNames = ["myLabel", uniqueId];
        // 用于分页数据
        this.originalData[uniqueId] = this.originalDataMap.get(uniqueId);
        this.isSortCaseObj[uniqueId] = data.mainType;
        // 进行分页列表展示
        this.changeSingleLayer(1, this.currentPageSize, uniqueId);
      }
    },
    getMapData(uniqueId, columnId, mainType, sourceType, layerName, townType) {
      let layerParams = new FormData();
      layerParams = {
        columnId: columnId,
        states: "0,1,2,3",
        pageSize: 500,
        page: this.targetLayerPage[uniqueId],
      };

      if (mainType === "预设模型") {
        this.enteredPanelId = uniqueId;
        let searchParam = [];
        let paramTown = {
          field: "c_xzqh",
          // 等值查询
          searchType: "1",
          content: {
            value: this.classTextToIndex["浦东新区行政区划"].get(
              this.townSelectVal || "老港镇"
            ),
          },
        };

        searchParam.push(paramTown);
        layerParams.search = JSON.stringify(searchParam);
      }
      this.$Post(this.urlsCollection.selectContentList, layerParams).then(
        (res) => {
          if (res.code === 202 && res.content === "数据不存在") {
            this.layerLoading = false;
            // 初始化请求 page为0时，提示无数据
            if (this.targetLayerPage[uniqueId] === 0) {
              this.$message.info("暂无数据!");
            }
          }

          if (res.code === 200) {
            this.layerLoading = false;
          }

          if (res.code === 200 && res.content.data.length > 0) {
            if (!this.$store.state.selectSelectDataMap["singlePolygon"]) {
              this.$store.state.selectSelectDataMap["singlePolygon"] = [];
            }

            // 初始化时将请求到的疑点数据中是否疑点全部改为未标记，疑点，非疑点三种状态
            let changeCaseStatusArr = res.content.data.map((ele) => {
              let targetBoolean = "未标记";
              // 预设模型下的targetBoolean默认是undefined
              if (mainType == "预设模型" && ele.c_boolean == true) {
                targetBoolean = "疑点";
              }
              if (mainType == "预设模型" && ele.c_boolean == false) {
                targetBoolean = "非疑点";
              }

              return {
                id: ele.id,
                column_name: ele.column_name,
                c_boolean: targetBoolean,
                c_xzqh: ele.c_xzqh,
                c_content: ele.c_content,
                c_date_time: ele.c_date_time,
                title: ele.title,
                model_id: ele.model_id,
                column_id: ele.column_id,
                content: ele.content,
                secret_level: ele.secret_level,
                mainType: mainType,
              };
            });

            // 存储请求到的疑点数据
            if (!this.originalDataMap.has(uniqueId)) {
              this.originalDataMap.set(uniqueId, changeCaseStatusArr);
            } else {
              let arr = this.originalDataMap
                .get(uniqueId)
                .concat(changeCaseStatusArr);
              this.originalDataMap.set(uniqueId, arr);
            }

            // 该图层疑点总数
            this.targetLayerTotal[uniqueId] = res.content.count;

            // 分页组件total
            this.paginationData.total =
              this.originalDataMap.get(uniqueId).length;

            // 当前图层id存在
            if (
              map2DViewer.analysisGroups[uniqueId] &&
              this.originalDataMap.get(uniqueId).length > 0 &&
              res.content.data.length > 0
            ) {
              // 统计所有图斑数
              this.currentTotal += res.content.data.length;
              // 请求到数据后直接渲染点

              changeCaseStatusArr.forEach((ele) => {
                let cid = ele.id;
                let geometry = this.addLayerDataSource(
                  ele.c_content,
                  mainType,
                  layerName,
                  townType
                );
                let defaultStatus = ele.c_boolean;
                let modelId = ele.model_id;
                let columnId = ele.column_id;
                let color = this.collectColorMap.get(this.collectColorMapIndex);
                if (defaultStatus === "疑点") {
                  color = `rgb(${caseColorChange["isPointColor"][0]},${caseColorChange["isPointColor"][1]},${caseColorChange["isPointColor"][2]})`;
                }
                if (defaultStatus === "非疑点") {
                  color = `rgb(${caseColorChange["notPointColor"][0]},${caseColorChange["notPointColor"][1]},${caseColorChange["notPointColor"][2]})`;
                }

                this.$store.state.mapMethodsCollection
                  .get("RENDER")
                  .addSinglePolygon(
                    geometry,
                    cid,
                    color,
                    uniqueId,
                    mainType,
                    sourceType,
                    defaultStatus,
                    modelId,
                    columnId
                  );
              });

              // 激活当前展开面板
              this.activeNames = ["myLabel", uniqueId];
              // 用于分页数据
              this.originalData[uniqueId] = this.originalDataMap.get(uniqueId);
              this.isSortCaseObj[uniqueId] = mainType;

              // 进行分页列表展示
              this.changeSingleLayer(1, this.currentPageSize, uniqueId);

              // 当前图斑数小于数据库中的图斑总数时，递归请求图斑
              if (
                this.originalDataMap.get(uniqueId).length <=
                this.targetLayerTotal[uniqueId]
              ) {
                this.targetLayerPage[uniqueId]++;
                this.getMapData(
                  uniqueId,
                  columnId,
                  mainType,
                  sourceType,
                  townType
                );
              }
            }
          }
        },
        (error) => {
          this.layerLoading = false;
          if (this.targetLayerPage[uniqueId]) {
            this.$message.error("请求错误!");
          }
        }
      );
    },
    /**
     * 获取图层信息 -- 所有模型和预设模型
     * @columnId
     * @id label_columnId
     * @mainType  所有图层/预设模型
     * @sourceType 土地资源/林地资源/生态资源/水资源/全部
     * @layerName 图层名称
     * @townType
     */
    displaySingleLayer(
      columnId,
      id,
      mainType,
      sourceType,
      layerName,
      townType
    ) {
      let uniqueId = id;
      this.layerIdMap.set(uniqueId, uniqueId);

      // 图层未初始化
      if (!map2DViewer.analysisGroups[uniqueId]) {
        // 生成图例时设置初始图层颜色
        this.setLayerLegend(uniqueId, uniqueId);
        map2DViewer.analysisGroups[uniqueId] = L.featureGroup();
        map2DViewer.analysisGroups[uniqueId].addTo(map2DViewer.map);
        this.targetLayerPage[uniqueId] = 0;
        if (!this.layerLoading && this.targetLayerPage[uniqueId] === 0) {
          this.layerLoading = true;
        }
        this.getMapData(
          uniqueId,
          columnId,
          mainType,
          sourceType,
          layerName,
          townType
        );
      }
    },
    /**
     * 切换页时改变图层数据
     * @val 当前页
     * @currentPageSize 当前面板pageSize
     * @id label_columnId
     * @mainType 所有图层/预设模型
     * @sourceType 土地资源，水资源，林地资源，全部
     */
    changeSingleLayer(val, currentPageSize, id) {
      let uniqueId = id;
      if (map2DViewer.analysisGroups[uniqueId]) {
        this.paginationData.currentPage = val;
        this.originalData[uniqueId] = [];
        let oldData = this.originalDataMap.get(uniqueId);
        this.originalData[uniqueId] = oldData.slice(
          (val - 1) * currentPageSize,
          val * currentPageSize
        );

        // 激活当前展开面板
        // this.activeNames = ["myLabel", uniqueId];
      }
    },

    // 数据字典查询 -- 根据内容获取对应的index
    // this.classTextToIndex["任务类型"]
    classDictQuery(type, cName, keyName) {
      let params = new FormData();
      params = {
        type: type,
        cName: cName,
      };
      this.$Post(this.urlsCollection.selectByCNameAType, params).then((res) => {
        if (res.code === 200 && res.content.length > 0) {
          this.classTextToIndex[keyName] = new Map();
          res.content.forEach((v) => {
            this.classTextToIndex[keyName].set(v.name, v.index + "");
          });
        }
      });
    },
    // 获取分级栏目列表
    getColumnList() {
      this.modelData = [];
      this.$Post(this.urlsCollection.getColumnList).then((res) => {
        if (res.code === 200 && res.content.length > 0) {
          let data = res.content.map((item1) => {
            if (item1.title === "所有图层" && item1.columnList.length > 0) {
              this.firstLevelIdMap.set(item1.title, {
                id: `${item1.title}_${item1.id}`,
                label: item1.title,
              });
              if (item1.columnList && item1.columnList.length > 0) {
                item1.columnList.map((item2) => {
                  if (item2.columnList && item2.columnList.length > 0) {
                    //存储所有镇相关的数据
                    this.townSelectTreeMap.set(item2.title, {
                      id: item2.id,
                      data:
                        !item2.columnList || item2.columnList.length === 0
                          ? []
                          : item2.columnList,
                    });
                  }
                });
              }

              return {
                id: `${item1.title}_${item1.id}`,
                label: item1.title,
                children: [],
              };
            }
            if (item1.title === "预设模型" && item1.columnList.length > 0) {
              this.firstLevelIdMap.set(item1.title, {
                id: `${item1.title}_${item1.id}`,
                label: item1.title,
              });
              return {
                id: `${item1.title}_${item1.id}`,
                label: item1.title,
                children:
                  !item1.columnList || item1.columnList.length === 0
                    ? []
                    : item1.columnList.map((item2) => {
                        return {
                          id: `${item2.title}_${item2.id}`,
                          label: item2.title,
                          children:
                            !item2.columnList || item2.columnList.length === 0
                              ? []
                              : item2.columnList.map((item3) => {
                                  this.rightPanelDataMap.set(
                                    `${item3.title}_${item3.id}`,
                                    {
                                      id: `${item3.title}_${item3.id}`,
                                      label: item3.title,
                                      sourceType: item2.title,
                                      mainType: item1.title,
                                      columnId: item3.id,
                                      children: [],
                                      disabled: false,
                                    }
                                  );

                                  defaultModelNameMap.set(
                                    item3.title,
                                    `${item3.title}_${item3.id}`
                                  );
                                  return {
                                    id: `${item3.title}_${item3.id}`,
                                    label: item3.title,
                                    sourceType: item2.title,
                                    mainType: item1.title,
                                    columnId: item3.id,
                                    children: [],
                                    disabled: false,
                                  };
                                }),
                        };
                      }),
              };
            }

            if (item1.title === "我的模型") {
              this.firstLevelIdMap.set(item1.title, {
                id: `${item1.title}_${item1.id}`,
                label: item1.title,
              });
              this.myModelIdMap.set(
                `${item1.title}_${item1.id}`,
                `${item1.title}_${item1.id}`
              );
              return {
                id: `${item1.title}_${item1.id}`,
                children: [],
                label: item1.title,
              };
            }

            if (item1.title === "疑点问题" || item1.title === "我的图层") {
              this.firstLevelIdMap.set(item1.title, {
                id: `${item1.title}_${item1.id}`,
                label: item1.title,
              });
              return {
                id: `${item1.title}_${item1.id}`,
                label: item1.title,
                children:
                  !item1.columnList || item1.columnList.length === 0
                    ? []
                    : item1.columnList.map((item2) => {
                        // 疑点问题
                        this.problemIdMap.set(item1.title, {
                          id: `${item2.title}_${item2.id}`,
                          label: item2.title,
                        });
                        this.rightPanelDataMap.set(
                          `${item2.title}_${item2.id}`,
                          {
                            id: `${item2.title}_${item2.id}`,
                            label: item2.title,
                            mainType: item1.title,
                            columnId: item2.id,
                            modelId: item2.modelId,
                            sourceType: "土地资源",
                            children: [],
                          }
                        );
                        return {
                          id: `${item2.title}_${item2.id}`,
                          label: item2.title,
                          mainType: item1.title,
                          columnId: item2.id,
                          modelId: item2.modelId,
                          sourceType: "土地资源",
                          children: [],
                        };
                      }),
              };
            }
          });

          data.forEach((v) => {
            if (v) {
              this.modelData.push(v);
            }
          });

          // 获取我的模型数据
          let oldOptions = [];
          this.getMyModelData(false, "");
          this.classTextToIndex["浦东新区行政区划"].forEach((v, i) => {
            if (this.townSelectTreeMap.has(i)) {
              oldOptions.push({
                value: i,
                label: i,
              });
            }
          });

          let arrDistrict = oldOptions.filter((v) => {
            if (v.value.indexOf("区") > -1) {
              return v;
            }
          });

          let arrTown1 = oldOptions.filter((v) => {
            if (v.value.indexOf("镇") > -1 && v.value === "老港镇") {
              return v;
            }
          });

          let arrTown2 = oldOptions.filter((v) => {
            if (v.value.indexOf("镇") > -1 && v.value === "泥城镇") {
              return v;
            }
          });

          let arrTown3 = oldOptions.filter((v) => {
            if (
              v.value.indexOf("镇") > -1 &&
              v.value !== "老港镇" &&
              v.value !== "泥城镇"
            ) {
              return v;
            }
          });
          let arrStreet = oldOptions.filter((v) => {
            if (v.value.indexOf("道") > -1) {
              return v;
            }
          });

          this.townOptions = [
            ...arrDistrict,
            ...arrTown1,
            ...arrTown2,
            ...arrTown3,
            ...arrStreet,
          ];
        }
      });
    },
    /**
     *@isShow 是否显示我的模型中特定节点的图层数据
     *@treeKeyId 具体是哪个节点
     */
    getMyModelData(isShow, treeKeyId) {
      let params = new FormData();
      params = {
        columnId: 49,
        states: "0,1,2,3",
        pageSize: 20,
        page: 0,
      };

      // 如果刚执行完自定义模型叠置功能 -- 更新节点后需要显示叠置的数据,指定需要的变量
      let uniqueKeyId = "";
      let uniqueKeyChild = "";

      this.$Post(this.urlsCollection.selectContentList, params)
        .then((res) => {
          if (res.code === 200 && res.content.data.length > 0) {
            let children = res.content.data.map((ele) => {
              // 如果刚执行完自定义模型叠置功能 -- 更新节点后需要显示叠置的数据
              if (isShow && ele.id === treeKeyId) {
                uniqueKeyId = `${ele.title}_${ele.id}`;
                uniqueKeyChild = {
                  id: `${ele.title}_${ele.id}`,
                  label: ele.title,
                  modelId: ele.id,
                  children: [],
                  column_id: ele.column_id,
                  model_name: ele.model_name,
                  model_id: ele.model_id,
                  state: ele.state,
                  mainType: "我的模型",
                  c_bind_layer: ele.c_bind_layer,
                  c_layer_name: ele.c_layer_name,
                  c_dzfx_file: ele.c_dzfx_file || "",
                };
              }
              customModelIdMap.set(ele.title, {
                column_id: ele.column_id,
                id: `${ele.title}_${ele.id}`,
                modelId: ele.id,
              });
              this.rightPanelDataMap.set(`${ele.title}_${ele.id}`, {
                id: `${ele.title}_${ele.id}`,
                mainType: "我的模型",
                sourceType: "",
                label: ele.title,
                children: [],
                column_id: ele.column_id,
                model_name: ele.model_name,
                model_id: ele.model_id,
                state: ele.state,
                mainType: "我的模型",
                c_bind_layer: ele.c_bind_layer,
                c_layer_name: ele.c_layer_name,
                c_dzfx_file: ele.c_dzfx_file || "",
              });
              return {
                id: `${ele.title}_${ele.id}`,
                label: ele.title,
                modelId: ele.id,
                children: [],
                sourceType: "",
                column_id: ele.column_id,
                model_name: ele.model_name,
                model_id: ele.model_id,
                state: ele.state,
                mainType: "我的模型",
                c_bind_layer: ele.c_bind_layer,
                c_layer_name: ele.c_layer_name,
                c_dzfx_file: ele.c_dzfx_file || "",
              };
            });
            if (this.modelData.length > 0) {
              if (this.$refs.tree) {
                this.$refs.tree.updateKeyChildren(
                  this.firstLevelIdMap.get("我的模型").id,
                  children
                );

                if (isShow) {
                  // // 所有图层或预设模型全部删除 -- 同时删除所有相关内容
                  this.closeAllRelatedLayers();
                  console.log("开始更新我的模型节点了!!!");
                  this.expandedKeys.push(
                    this.firstLevelIdMap.get("我的模型").id
                  );
                  console.log(
                    treeKeyId,
                    "显示特定节点的我的模型数据",
                    uniqueKeyId
                  );
                  console.log(uniqueKeyChild, "uniqueKeyChild");
                  this.$refs.tree.setCheckedKeys([uniqueKeyId]);
                  this.$refs.tree.setCurrentKey(uniqueKeyId);
                  // 延迟显示数据
                  setTimeout(() => {
                    this.handleCheckChange(uniqueKeyChild, true);
                  }, 800);
                }
              }
            }
          }
        })
        .catch((err) => {
          console.log(err, "getMyModelData");
        });
    },
    // 调用我的标记接口
    getUserMarkers() {
      if (localStorage.getItem("USER_ID")) {
        let paramData = new FormData();
        paramData = {
          userId: Number(localStorage.getItem("USER_ID")),
          sourceId: 0,
          pageSize: 10,
        };
        if (!map2DViewer.groups["我的标记图层组"]) {
          map2DViewer.groups["我的标记图层组"] = L.featureGroup();
          map2DViewer.groups["我的标记图层组"].addTo(map2DViewer.map);
        }
        this.$Post(this.urlsCollection.selectByUser, paramData).then((res) => {
          if (res.code === 200 && res.content.length >= 1) {
            console.log(res.content);
            this.$store.state.myLabelPointsArr = [];
            this.$store.state.myLabelPointsArr = res.content.map((v) => {
              let data = JSON.parse(v.geojson);
              let name = data.properties.name;
              myLabelNameMap.set(name, v.geojson);
              return {
                id: v.id,
                geojson: v.geojson,
                type: v.type,
              };
            });
          }

          // res.content 返回数据为空
          if (res.code === 205) {
            this.$store.state.myLabelPointsArr = [];
          }
        });
      }
    },
    // 回退事件
    backEvent() {
      if (
        this.$store.state.backMenu.index &&
        this.$store.state.backMenu.subIndex
      ) {
        this.$store.commit("changeNavSelect", {
          index: this.$store.state.backMenu.index,
          subIndex: this.$store.state.backMenu.subIndex,
          name: this.$store.state.backMenu.name
            ? this.$store.state.backMenu.name
            : "",
        });
      }
    },
    // 左侧面板的显示与隐藏
    leftPanelDisplay(val) {
      if (val === "show") {
        this.showLeftBox = true;
        this.leftBoxBtn = false;
      }

      if (val === "hide") {
        this.showLeftBox = false;
        this.leftBoxBtn = true;
      }
    },
    // 右侧面板的显示与隐藏
    rightPanelDisplay(val) {
      if (val === "show") {
        this.showRightBox = true;
        this.rightBoxBtn = false;
      }

      if (val === "hide") {
        this.showRightBox = false;
        this.rightBoxBtn = true;
      }
    },
    leftPanelLock() {
      this.isLeftLock = !this.isLeftLock;
    },
    rightPanelLock() {
      this.isRightLock = !this.isRightLock;
    },
    // 节点过滤事件
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 定位功能失效
    locateEvent(node) {
      if (this.layerIdMap.has(node.data.id)) {
        this.layerIdMap.get(node.data.id);
        if (map2DViewer.analysisGroups[node.data.id].getBounds()) {
          map2DViewer.map.fitBounds(
            map2DViewer.analysisGroups[node.data.id].getBounds()
          );
        }
      }
    },
    handleUpdate(node) {
      this.$bus.$emit("updateModel", node);
    },
    handleDelete(node) {
      let deleteParams = {
        id: customModelIdMap.get(node.data.label).modelId,
        columnId: 49,
        state: 4,
      };

      this.$Post(this.urlsCollection.updateAudit, deleteParams).then((res) => {
        if (res.code === 200) {
          this.$message.info("模型已删除!");
          if (map2DViewer.analysisGroups[node.data.id]) {
            this.handleCheckChange(node.data, false);
          }
          this.getMyModelData(false, "");
        }
      });
    },

    // 节点change事件
    handleCheckChange(data, checked) {
      if (data.mainType && data.mainType !== "我的模型") {
        if (checked) {
          this.showRightBox = true;
          // 第一级菜单是所有图层
          if (data.mainType === "所有图层") {
            this.rightPanelTitle = data.id;
            let searchParam = [];

            let targetTown = this.classTextToIndex["浦东新区行政区划"].get(
              data.townType
            );

            let targetType = this.classTextToIndex["任务类型"].get(
              data.sourceType
            );
            this.$store.state.treeDataCollection.set(data.id, {
              // mainType: data.mainType,
              townId: data.townId,
              townType: data.townType,
              sourceId: data.sourceId,
              sourceType: data.sourceType,
              layerId: data.id,
              layerName: data.label,
            });

            let paramUser = {
              field: "c_user_id",
              searchType: "1",
              content: {
                value: localStorage.getItem("USER_ID"),
              },
            };
            searchParam.push(paramUser);
            let paramTown = {
              field: "c_area_code",
              searchType: "1",
              content: {
                value: targetTown,
              },
            };
            searchParam.push(paramTown);
            let paramType = {
              field: "c_task_type",
              searchType: "1",
              content: {
                value: targetType,
              },
            };
            searchParam.push(paramType);

            let params = new FormData();
            params = {
              columnId: 48,
              states: "2,3",
              pageSize: 10,
              page: 0,
              search: JSON.stringify(searchParam),
            };
            this.$Post(this.urlsCollection.selectContentList, params).then(
              (res) => {
                // 暂不设置权限要求
                layerAuthorityMap.set(data.id, "有权限");
                this.displaySingleLayer(
                  data.columnId,
                  data.id,
                  data.mainType,
                  data.sourceType ? data.sourceType : "",
                  data.label,
                  data.townType ? data.townType : ""
                );
                // if (res.code === 202 && res.content === "数据不存在") {
                //   this.$message.info("当前用户无权限!");
                //   layerAuthorityMap.set(data.id, "无权限");
                // }
                // if (res.code === 200 && res.content.data.length > 0) {
                //   layerAuthorityMap.set(data.id, "有权限");
                //   this.displaySingleLayer(data.columnId, data.id, data.mainType, data.sourceType ? data.sourceType : "");
                // }
              }
            );
          }
          // 第一级菜单是预设模型
          if (data.mainType === "预设模型") {
            layerAuthorityMap.set(data.id, "有权限");
            this.$store.state.preModelLayerMap.push(data.id);
            this.rightPanelTitle = data.id;
            this.displaySingleLayer(
              data.columnId,
              data.id,
              data.mainType,
              data.sourceType ? data.sourceType : "",
              data.label
            );
          }
          // 第一级菜单是疑点问题
          if (data.mainType === "疑点问题") {
            layerAuthorityMap.set(data.id, "有权限");
            this.rightPanelTitle = data.id;
            this.displaySingleLayer(
              data.columnId,
              data.id,
              data.mainType,
              data.sourceType ? data.sourceType : "",
              data.label
            );
          }

          // 第一级菜单是我的图层 -- 不请求接口
          if (data.mainType === "我的图层") {
            layerAuthorityMap.set(data.id, "有权限");
            this.rightPanelTitle = data.label;
            this.renderUploadedData(data);
          }
        } else {
          if (
            this.$store.state.selectSelectDataMap["singlePolygon"] &&
            this.$store.state.selectSelectDataMap["singlePolygon"][data.id]
          ) {
            delete this.$store.state.selectSelectDataMap["singlePolygon"][
              data.id
            ];
          }

          // 取消勾选当前图层勾选，图斑数改变， 如果是所有图层数据移除折叠面板
          if (
            this.originalDataMap &&
            this.originalDataMap.has(data.id) &&
            this.currentTotal > 0
          ) {
            this.currentTotal -= this.originalDataMap.get(data.id).length;
            this.originalDataMap.delete(data.id);

            if (this.originalData && this.originalData[data.id]) {
              delete this.originalData[data.id];
            }
          }

          if (
            data.mainType === "预设模型" &&
            this.$store.state.preModelLayerMap.includes(data.id)
          ) {
            this.$store.state.preModelLayerMap.splice(
              this.$store.state.preModelLayerMap.indexOf(data.id),
              1
            );
          }

          // 统计后小于0改为0
          if (this.currentTotal < 0) {
            this.currentTotal = 0;
          }

          map2DViewer.map.closePopup();

          // 移除图例
          if (this.legendTitle.length > 0) {
            this.legendTitle = this.legendTitle.filter((v) => {
              return v.uniqueId !== data.id;
            });
            this.legendIcon = this.legendIcon.filter((v) => {
              return v.uniqueId !== data.id;
            });
          }

          this.layerIdMap.has(data.id) && this.layerIdMap.delete(data.id);

          //关联自定义模型

          this.$store.state.treeDataCollection.has(data.id) &&
            this.$store.state.treeDataCollection.delete(data.id);

          // 只激活我的标记
          this.activeNames = ["myLabel"];
          this.$store.state.mapMethodsCollection
            .get("RENDER")
            .deleteGroupFromMap(data.id);

          // 移除图层id
          if (map2DViewer.analysisGroups[data.id]) {
            delete this.targetLayerTotal[data.id];
            delete map2DViewer.analysisGroups[data.id];
          }
        }
      }

      // 第一级菜单是我的模型
      if (data.mainType && data.mainType === "我的模型") {
        // 显示叠置分析的数据
        checked ? this.displayMyModelData(data) : this.deleteMyModelData(data);
      }
    },
    // 显示我的模型数据
    displayMyModelData(data) {
      this.$nextTick(() => {
        if (this.$refs.tree) {
          this.$refs.tree.setCheckedKeys([data.id]);
        }
      });
      let uniqueId = data.id;

      // 我的模型图层组初始化
      if (!map2DViewer.analysisGroups[uniqueId]) {
        map2DViewer.analysisGroups[uniqueId] = L.featureGroup();
        map2DViewer.analysisGroups[uniqueId].addTo(map2DViewer.map);
        this.layerIdMap.set(uniqueId, uniqueId);
        if (!this.$store.state.selectSelectDataMap["singlePolygon"]) {
          this.$store.state.selectSelectDataMap["singlePolygon"] = [];
        }
        // 如果有叠置分析文件 -- 呈现叠置分析内容
        if (data.c_dzfx_file) {
          this.$Get(this.uploadBaseUrl + data.c_dzfx_file, "").then(
            (response) => {
              if (response.geometries.length === 0) {
                this.$message.info("未发现叠置的几何体！");
              }
              if (response.geometries.length > 0) {
                if (map2DViewer.analysisGroups[uniqueId]) {
                  let uniqueIdList = [];
                  if (
                    this.$store.state.selectSelectDataMap["singlePolygon"][
                      uniqueId
                    ]
                  ) {
                    uniqueIdList =
                      this.$store.state.selectSelectDataMap["singlePolygon"][
                        uniqueId
                      ];
                  }

                  // 生成图例时设置初始化图层颜色 -- 叠置分析的图层
                  this.setLayerLegend(`叠置-${uniqueId}`, uniqueId);

                  // 清除当前图层组内所有图层，并读取GeoJSON数据
                  map2DViewer.analysisGroups[uniqueId].clearLayers();
                  // 叠置分析图斑数统计

                  this.targetLayerTotal[uniqueId] = response.geometries.length;
                  this.currentTotal += response.geometries.length;
                  // 存储请求到的疑点数据
                  this.originalDataMap.set(uniqueId, response.geometries);

                  // 存储叠置分析中所有的面
                  let statesArr = [];
                  let color = this.collectColorMap.get(
                    this.collectColorMapIndex
                  );
                  // 仅显示面数据
                  response.geometries.forEach((v) => {
                    if (
                      v.type != "" &&
                      v.type != "Point" &&
                      v.type != "LineString" &&
                      v.coordinates.length > 0
                    ) {
                      let geoData = this.overlayStandardGeojson(v);
                      let singlePolygonItem = {
                        uniqueId: `overlay_${uniqueId}`,
                        geometry: JSON.stringify(geoData),
                        cid: publicFun.buildGuid(data.label),
                        color: color,
                      };
                      uniqueIdList.push(singlePolygonItem);
                      this.$store.state.selectSelectDataMap["singlePolygon"][
                        uniqueId
                      ] = uniqueIdList;
                      statesArr.push(geoData);
                    }
                  });

                  this.readGeojson(statesArr, data.id, color);
                }
              }
            }
          );
        } else {
          this.layerLoading = true;
          let params = new FormData();
          params = {
            modelId: data.modelId,
            userId: localStorage.getItem("USER_ID"),
          };

          // 调用我的模型查看接口读取所有图层数据
          this.$Post(this.urlsCollection.getModelCoverAgeInfo, params).then(
            (res) => {
              if (res.code !== 201 && res.code !== 200) {
                this.layerLoading = false;
                this.$message.info("数据请求失败，请重新请求!");
              }
              if (res.code === 201 && res.message === "未申请任务权限") {
                this.layerLoading = false;
                this.$message.info("暂无数据!");
              }
              if (res.code === 200) {
                this.layerLoading = false;
              }
              if (res.code === 200 && res.content.length > 0) {
                // 清除当前图层组内所有图层，并读取GeoJSON数据
                map2DViewer.analysisGroups[uniqueId].clearLayers();
                // 判断我的模型中目前有多少个图层
                let layerTotalArr = [];
                let layerLegendColorMap = new Map();
                let changeCaseStatusArr = res.content.map((ele) => {
                  if (!layerTotalArr.includes(ele.column_name)) {
                    layerTotalArr.push(ele.column_name);
                    this.setLayerLegend(ele.column_name, uniqueId);
                    layerLegendColorMap.set(
                      ele.column_name,
                      this.collectColorMap.get(this.collectColorMapIndex)
                    );
                  }
                  return {
                    id: ele.id,
                    column_name: ele.column_name,
                    c_boolean: "未标记",
                    c_xzqh: ele.c_xzqh,
                    c_content: ele.c_content,
                    c_date_time: ele.c_date_time,
                    title: ele.title,
                    model_id: ele.model_id,
                    column_id: ele.column_id,
                    content: ele.content,
                    secret_level: ele.secret_level,
                    mainType: data.mainType,
                  };
                });

                // 存储请求到的疑点数据
                this.originalDataMap.set(uniqueId, changeCaseStatusArr);

                // 该图层疑点总数
                this.targetLayerTotal[uniqueId] = res.content.length;

                // 分页组件total
                this.paginationData.total =
                  this.originalDataMap.get(uniqueId).length;

                // 当前图层的id存在
                if (
                  map2DViewer.analysisGroups[uniqueId] &&
                  this.originalDataMap.get(uniqueId).length > 0 &&
                  changeCaseStatusArr.length > 0
                ) {
                  // 统计所有图斑数
                  this.currentTotal += changeCaseStatusArr.length;
                  // 请求到数据后直接渲染点
                  changeCaseStatusArr.forEach((ele) => {
                    let cid = ele.id;
                    let geometry = this.addLayerDataSource(
                      ele.c_content,
                      data.mainType,
                      data.label
                    );

                    let modelId = ele.model_id;
                    let columnId = ele.column_id;
                    this.$store.state.mapMethodsCollection
                      .get("RENDER")
                      .addSinglePolygon(
                        geometry,
                        cid,
                        layerLegendColorMap.get(ele.column_name),
                        uniqueId,
                        data.mainType,
                        "",
                        "",
                        modelId,
                        columnId
                      );
                  });
                }

                // 激活当前展开面板
                this.activeNames = ["myLabel", uniqueId];
                // 我的模型数据进行分页列表展示
                this.originalData[uniqueId] =
                  this.originalDataMap.get(uniqueId);
                this.isSortCaseObj[uniqueId] = data.mainType;
                // 进行分页列表展示
                this.changeSingleLayer(1, this.currentPageSize, uniqueId);
              }
            }
          );
        }
      }
    },
    // geojson直接读取的坐标顺序是经纬度
    readGeojson(geojsonArr, uniqueId, color) {
      let geojsonData = L.geoJSON(geojsonArr, {
        style: function (feature) {
          return { color: color };
        },
      }).addTo(map2DViewer.map);
      map2DViewer.analysisGroups[uniqueId] = geojsonData;
    },
    // 我的模型图层取消勾选
    deleteMyModelData(data) {
      // 直接删除图层组中的数据
      if (map2DViewer.analysisGroups[data.id]) {
        map2DViewer.map.removeLayer(map2DViewer.analysisGroups[data.id]);
      }

      if (
        this.$store.state.selectSelectDataMap["singlePolygon"] &&
        this.$store.state.selectSelectDataMap["singlePolygon"][data.id]
      ) {
        delete this.$store.state.selectSelectDataMap["singlePolygon"][data.id];
      }

      // 取消勾选当前图层勾选，图斑数改变， 如果是所有图层数据移除折叠面板
      if (
        this.originalDataMap &&
        this.originalDataMap.has(data.id) &&
        this.currentTotal > 0
      ) {
        this.currentTotal -= this.originalDataMap.get(data.id).length;
        this.originalDataMap.delete(data.id);

        if (this.originalData && this.originalData[data.id]) {
          delete this.originalData[data.id];
          delete this.isSortCaseObj[data.id];
        }
      }

      // 统计后小于0改为0
      if (this.currentTotal < 0) {
        this.currentTotal = 0;
      }

      map2DViewer.map.closePopup();

      // 移除图例
      if (this.legendTitle.length > 0) {
        this.legendTitle = this.legendTitle.filter((v) => {
          return v.uniqueId !== data.id;
        });
        this.legendIcon = this.legendIcon.filter((v) => {
          return v.uniqueId !== data.id;
        });
      }

      this.layerIdMap.has(data.id) && this.layerIdMap.delete(data.id);

      // 只激活我的标记
      this.activeNames = ["myLabel"];
      this.$store.state.mapMethodsCollection
        .get("RENDER")
        .deleteGroupFromMap(data.id);

      // 移除图层id
      if (map2DViewer.analysisGroups[data.id]) {
        delete this.targetLayerTotal[data.id];
        delete map2DViewer.analysisGroups[data.id];
      }
    },

    //显示详细信息
    viewDetailsPopup(data) {
      this.$store.state.bottomMenuIndexs.index = -1;
      this.$store.state.bottomMenuIndexs.subIndex = -1;
      this.updateCasePopupShow = false;
      this.tableType = "normal";
      this.boxWidth = "600";
      this.boxHeight = "600";
      this.tableData = [];
      let obj = JSON.parse(data).properties;
      this.tableData.push(obj);
      this.attrTableShow = true;
    },
    // 右侧面板项点击事件
    listItemClick(type, data) {
      this.$store.state.bottomMenuIndexs.index = -1;
      this.$store.state.bottomMenuIndexs.subIndex = -1;
      this.updateCasePopupShow = false;
      this.tableData = [];
      if (type === "default") {
        this.tableType = "normal";
        this.boxWidth = "600";
        this.boxHeight = "600";
        if (data.c_content) {
          let obj = JSON.parse(data.c_content).properties;

          this.tableData.push(obj);
        }
      }
      if (type === "new") {
        this.rightLabelData.forEach((item) => {
          if (item.id == data.id) {
            item.geometryChecked = false;
            this.controlLabel(item);
          }
        });

        if (data.featureType === "点") {
          this.$store.state.mapMethodsCollection
            .get("RENDER")
            .setView(data.coord, 6);
        } else {
          map2DViewer.map.fitBounds(
            map2DViewer.myLabels[`label_${data.id}`].getBounds()
          );
        }
        let geojsonData = JSON.parse(data.geojson);
        let geoType = geojsonData.properties.featureType;
        let area = geojsonData.properties.area;

        let distance = "";
        if (geojsonData.properties.distance === "") {
          distance = "";
        } else if (geojsonData.properties.distance > 1000) {
          distance =
            parseFloat(geojsonData.properties.distance / 1000).toFixed(2) +
            " 公里";
        } else if (geojsonData.properties.distance < 1000) {
          distance =
            parseFloat(geojsonData.properties.distance).toFixed(2) + " 米";
        }
        this.$store.state.mapMethodsCollection
          .get("RENDER")
          .drawGeometry(geoType, data);

        this.tableType = "personal";
        this.boxWidth = "300";
        this.boxHeight = "300";
        this.tableData.push({
          名称: data.name,
          类别: data.type,
          描述: data.des,
          距离: distance,
          面积: area,
        });
      }

      this.attrTableShow = true;
    },
    closeEvent() {
      this.attrTableShow = false;
    },
    // 关闭修改标记弹窗
    closeLabelEvent() {
      this.updateCasePopupShow = false;
    },
    modifyLabelEvent() {
      this.$nextTick(() => {
        let selectType = this.$refs.updateLabelRef.selectVal;
        let desContent = this.$refs.updateLabelRef.textContent;
        let currentNameInput = this.$refs.updateLabelRef.nameInput;
        let geojson = JSON.parse(this.$refs.updateLabelRef.geojson);
        let geometryType = geojson.properties.featureTypeIndex;
        if (
          myLabelNameMap.has(currentNameInput) &&
          currentNameInput !== geojson.properties.name
        ) {
          this.$message.info("该名称已存在，请重新输入!");
        } else {
          let id = this.$refs.updateLabelRef.id;
          let params = new FormData();
          let nameInput = this.$refs.updateLabelRef.nameInput;
          // 修改标题和描述
          geojson.properties.title = selectType;
          geojson.properties.desc = desContent;
          geojson.properties.name = nameInput;

          params = {
            userId: Number(localStorage.getItem("USER_ID")),
            sourceId: 0,
            type: geometryType,
            geojson: JSON.stringify(geojson),
            id: id,
          };
          this.$Post(this.urlsCollection.updateConllection, params).then(
            (res) => {
              if (res.code === 200) {
                this.updateCasePopupShow = false;
                this.getUserMarkers();
                this.$message.success("修改成功！");
              }
            },
            (error) => {
              this.$message.error("保存失败");
              console.log(error);
            }
          );
        }
      });
    },
    // 修改标记 -- 仅支持修改类型和描述
    updateLabel(val) {
      this.$store.state.bottomMenuIndexs.index = -1;
      this.$store.state.bottomMenuIndexs.subIndex = -1;
      this.updateCasePopupShow = true;
      this.attrTableShow = false;
      this.targetArea = JSON.parse(val.geojson).properties.area;

      this.targetDistance = JSON.parse(val.geojson).properties.distance;
      if (this.updateCasePopupShow) {
        this.$nextTick(() => {
          this.$refs.updateLabelRef.menuData.title = "修改标记";
          this.$refs.updateLabelRef.nameInput = val.name;
          this.$refs.updateLabelRef.selectVal = val.type;
          this.$refs.updateLabelRef.textContent = val.des;
          this.$refs.updateLabelRef.id = val.id;
          this.$refs.updateLabelRef.geojson = val.geojson;
        });
      }
    },
    // 删除标记
    deleteLabel(id) {
      if (localStorage.getItem("USER_ID")) {
        let params = new FormData();
        this.$store.state.mapMethodsCollection
          .get("RENDER")
          .deleteGeometry(map2DViewer.myLabels[`label_${id}`]);
        map2DViewer.myLabels[`label_${id}`] = null;

        params = {
          userId: Number(localStorage.getItem("USER_ID")),
          sourceId: 0,
          id: id,
        };
        this.$Post(this.urlsCollection.deleteConllection, params).then(
          (res) => {
            if (res.code === 200) {
              // console.log("疑点删除成功");
              this.getUserMarkers();
            }
          }
        );
      }
    },
    // 控制标记的显示与隐藏
    controlLabel(val) {
      val.geometryChecked = !val.geometryChecked;
      if (
        map2DViewer.myLabels[
          `label_${this.$store.state.map2DViewerPolygonsCid.newCid}`
        ]
      ) {
        map2DViewer.myLabels[
          `label_${this.$store.state.map2DViewerPolygonsCid.newCid}`
        ].setStyle({
          color: this.$store.state.map2DViewerPolygonsCid.oldColor,
          fillOpacity: 0,
        });
        this.$store.state.map2DViewerPolygonsCid = {
          newCid: null,
          oldColor: null,
        };
      }
      if (
        map2DViewer.polygons[this.$store.state.map2DViewerPolygonsCid.newCid]
      ) {
        map2DViewer.polygons[
          this.$store.state.map2DViewerPolygonsCid.newCid
        ].setStyle({
          color: this.$store.state.map2DViewerPolygonsCid.oldColor,
          fillOpacity: 0,
        });
        this.$store.state.map2DViewerPolygonsCid = {
          newCid: null,
          oldColor: null,
        };
      }

      // 判断是否是重复点击，不是的话高亮，是的话不操作。
      setTimeout(() => {
        this.polygonOnClick = false;
        if (val.id != this.$store.state.map2DViewerPolygonsCid.newCid) {
          this.$store.state.map2DViewerPolygonsCid = {
            newCid: val.id,
            oldColor: "red",
          };

          if (
            map2DViewer.polygons[
              this.$store.state.map2DViewerPolygonsCid.newCid
            ]
          ) {
            map2DViewer.polygons[
              this.$store.state.map2DViewerPolygonsCid.newCid
            ].setStyle({
              color: "red",
              fillColor: "red",
              fillOpacity: 0.35,
            });
          }

          // map2DViewer.polygons[
          //   this.$store.state.map2DViewerPolygonsCid.newCid
          // ].setStyle({
          //   color: "red",
          //   fillColor: "red",
          //   fillOpacity: 0.35,
          // });

          // polygon.setStyle({
          //   color: "red",
          //   fillColor: "red",
          //   fillOpacity: 0.35,
          // });
        } else {
          this.$store.state.map2DViewerPolygonsCid = {
            newCid: null,
            oldColor: null,
          };
        }
      }, 200);

      // 已经绘制了几何体
      if (map2DViewer.myLabels[`label_${val.id}`]) {
        if (val.featureType === "点") {
          map2DViewer.myLabels[`label_${val.id}`].setOpacity(
            val.geometryChecked ? 1 : 0
          );
        }

        if (val.featureType !== "点") {
          map2DViewer.myLabels[`label_${val.id}`].setStyle(
            val.geometryChecked
              ? {
                  opacity: 1,
                  fillOpacity: 0.35,
                }
              : {
                  opacity: 0,
                  fillOpacity: 0,
                }
          );
        }
      } else {
        // 未绘制几何体
        // console.log(val, "未绘制几何体");
        if (val.geometryChecked && val.geojson) {
          let geoType = JSON.parse(val.geojson).properties.featureType;
          this.$store.state.mapMethodsCollection
            .get("RENDER")
            .drawGeometry(geoType, val);
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
@commonBorderColor: #00aaff64;
@mapTitleBgColor: #00476b;
.comprehensive-analysis {
  &-law-popup {
    position: fixed;
    left: 0;
    right: 0;
    margin: 100px auto;
    pointer-events: auto;
    z-index: 99;
  }
  &-label-popup {
    position: absolute;
    top: 15%;
    left: 35%;
    pointer-events: auto;
    z-index: 99;
  }
  .el-checkbox {
    color: #fff;
    /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
      color: rgba(116, 255, 255, 1);
    }

    /deep/.el-checkbox__input.is-checked .el-checkbox__inner::after {
      width: 70%;
      height: 70%;
      background: #74ffff;
      border-radius: 0;
      transform: rotate(0deg) scaleY(1);
      position: static;
    }

    /deep/.el-checkbox__inner {
      border: 1px solid #dcdfe6;
      background: rgba(0, 170, 255, 0);
      display: flex;
      align-items: center;
      justify-content: center;
      position: static;
      &::after {
        transition: 0ms;
      }
    }

    /deep/.el-checkbox__label {
      padding-left: 0;
      font-size: 15px;
      position: absolute;
      top: 1px;
      left: 25px;
    }
  }

  &-infobox {
    width: 250px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    border: none;
    right: 10%;
    top: 15px;
    pointer-events: auto;
    color: #fff;
    font-size: 20px;
  }

  &-leftjuanlianInfo {
    position: absolute;
    width: 250px;
    border-left: 5px solid #2fb8ff;
    left: 0px;
    top: 15px;
    pointer-events: auto;
    color: #e6a23c;
    font-size: 20px;
    background-image: linear-gradient(90deg, @mapTitleBgColor, #00000000);
    padding: 5px 10px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    cursor: pointer;
  }
  &-leftjuanlianInfo .top {
    position: absolute;
    height: 3px;
    left: -5px;
    width: 100%;
    top: -6px;
    background-image: linear-gradient(90deg, @mapTitleBgColor, #00000000);
    border-left: 5px solid #2fb8ff;
  }

  &-leftjuanlianInfo .bottom {
    position: absolute;
    height: 3px;
    left: -5px;
    width: 100%;
    bottom: -6px;
    background-image: linear-gradient(90deg, @mapTitleBgColor, #00000000);
    border-left: 5px solid #2fb8ff;
  }

  &-leftjuanlianInfo .mapTitle {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    & > div:nth-child(1) {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-content: space-around;
      justify-content: space-evenly;
      align-items: center;
      & div {
        width: 3px;
        height: 3px;
        background-color: #2fb8ff;
        transform: rotate(45deg);
        margin: 3px;
      }
    }
    & > div:nth-child(2) {
      width: 6px;
      height: 6px;
      background-color: #2fb8ff;
      transform: rotate(45deg);
      margin: 6px;
    }
    & > div:nth-child(3) {
      font-size: 25px;
      letter-spacing: 2px;
      font-weight: bold;
      font-family: zhihun181;
    }
  }
  &-rightjuanlianInfo .mapTitle {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    & > div:nth-child(1) {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-content: space-around;
      justify-content: space-evenly;
      align-items: center;
      & div {
        width: 3px;
        height: 3px;
        background-color: #2fb8ff;
        transform: rotate(45deg);
        margin: 3px;
      }
    }
    & > div:nth-child(2) {
      width: 6px;
      height: 6px;
      background-color: #2fb8ff;
      transform: rotate(45deg);
      margin: 6px;
    }
    & > div:nth-child(3) {
      font-size: 25px;
      letter-spacing: 2px;
      font-weight: bold;
      font-family: zhihun181;
    }
  }
  .unMapTitlective {
    color: #2fb8ff;
  }
  .mapTitlective {
    background-image: linear-gradient(0deg, #33eeff, #ffffff);
    background-clip: text;
    color: transparent;
  }
  &-rightjuanlianInfo .top {
    position: absolute;
    height: 3px;
    right: -5px;
    width: 100%;
    top: -6px;
    background-image: linear-gradient(-90deg, @mapTitleBgColor, #00000000);
    border-right: 5px solid #2fb8ff;
  }

  &-rightjuanlianInfo .bottom {
    position: absolute;
    height: 3px;
    right: -5px;
    width: 100%;
    bottom: -6px;
    background-image: linear-gradient(-90deg, @mapTitleBgColor, #00000000);
    border-right: 5px solid #2fb8ff;
  }

  &-rightjuanlianInfo {
    position: absolute;
    width: 250px;
    border-right: 5px solid #2fb8ff;
    right: 0;
    top: 15px;
    pointer-events: auto;
    color: #303133;
    font-size: 20px;
    background-image: linear-gradient(-90deg, @mapTitleBgColor, #00000000);
    padding: 5px 10px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    cursor: pointer;
  }

  &-searchbox {
    width: 300px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 22%;
    top: 30px;
    pointer-events: auto;
    /deep/.el-input-group__append,
    .el-input-group__prepend {
      background-color: transparent;
      color: #fff;
      border-left: none;
    }
    /deep/.el-input-group--append .el-input__inner,
    .el-input-group__prepend {
      border-right: none;
    }
  }

  &-searchresult {
    width: 300px;
    height: 400px;
    overflow: auto;
    position: absolute;
    left: 22%;
    top: 90px;
    pointer-events: auto;
    border-radius: 4px;
    outline: none;
    box-sizing: border-box;
    border: 1px solid rgb(243, 237, 237, 0.6);
    padding: 5px;
    text-align: left;
    background: rgba(0, 47, 86, 0.4);
    &-item {
      cursor: pointer;
      width: 100%;
      height: 70px;
      text-align: left;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid rgba(0, 47, 86, 0.2);
      &:hover {
        background: rgba(0, 238, 255, 0.2);
      }
      .icon {
        position: relative;
        top: 22px;
        left: -130px;
        height: 24px;
        width: 24px;
        background: @commonBorderColor;
        //margin-right: 8px;
        font-size: 12px;
        color: #fff;
        text-align: center;
        line-height: 24px;
        font-weight: 400;
        border-radius: 50%;
      }
      .title {
        width: 90%;
        height: 30px;
        font-size: 14px;
        font-weight: 600;
        position: relative;
        top: -10px;
        left: 22px;
        text-overflow: ellipsis;
        color: #fff;
      }
      .address {
        position: relative;
        left: 22px;
        width: 90%;
        height: 35px;
        font-size: 12px;
        margin-top: -1px;
        color: #fff;
      }
    }
  }

  &-basemapswitch {
    width: 310px;
    height: 80px;
    // border: 1px solid black;
    position: absolute;
    right: 420px;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    pointer-events: auto;
    .basemapBox {
      cursor: pointer;
      border-radius: 5px;
      width: 90px;
      height: 70px;
      border: 1px solid rgba(255, 255, 255, 0.6);
      background-repeat: no-repeat;
      background-size: 99% 98%;
      position: relative;
      &-titlebox {
        width: 70px;
        height: 30px;
        position: absolute;
        right: 0;
        bottom: 0;
        background: rgba(20, 20, 20, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
      }
      &-panel {
        width: 90px;
        height: 150px;
        border: 1px solid rgba(255, 255, 255, 0.6);
        position: absolute;
        left: 0;
        top: -160px;
        background: url("../assets/map/basemap-list-back.png") no-repeat center;
        overflow: auto;
        .panel-item {
          width: 100%;
          height: 30px;
          color: rgba(255, 255, 255, 0.6);
          display: flex;
          align-items: center;
          justify-content: center;
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
          font-size: 14px;
          &:hover {
            color: rgb(0, 170, 255, 0.4);
          }
        }
      }

      &:hover {
        box-shadow: 0 2px 15px 3px rgb(0, 170, 255, 0.6);
        & > div:nth-child(2) {
          border: 1px solid rgb(0, 170, 255, 0.4);
        }
        & > div:nth-child(1) {
          background: rgb(0, 170, 255, 0.4);
          color: rgba(20, 20, 20, 1);
          font-weight: bold;
        }
      }
    }
  }

  &-backbtn {
    width: 120px;
    height: 35px;
    background: @commonBorderColor;
    color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 15px;
    bottom: 15px;
    pointer-events: auto;
    transition: 0.6s;
    cursor: pointer;
    z-index: 999;
    .left-arrow {
      width: 7px;
      height: 7px;
      border-top: 2px solid #ffffff;
      border-right: 2px solid #ffffff;
      transform: translate(-50%, -50%) rotate(225deg);
      position: absolute;
      top: 16.5px;
      left: 25px;
    }
    .title {
      width: 80px;
      height: 35px;
      line-height: 35px;
      position: absolute;
      left: 34px;
    }
    &:hover {
      background: #00aaff;
    }
  }

  &-legendbox {
    position: absolute;
    right: 410px;
    top: 40px;
    z-index: 1;
    &.closePanel {
      right: 30px;
    }
  }
  /* 弹窗 */
  &-popup {
    position: fixed;
    left: 0;
    right: 0;
    margin: 100px auto;
    pointer-events: auto;
    z-index: 99;
  }
  /* 左侧面板开启按钮 */
  &-leftopenbox {
    position: absolute;
    left: 5px;
    width: 50px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    & > div {
      pointer-events: auto;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(102, 203, 255, 1);
      position: relative;
      cursor: pointer;
      & > div {
        position: absolute;
        top: 8px;
        left: 16px;
        display: inline-block;
        width: 0px;
        height: 0px;
        border: 12px solid transparent;
        border-left-color: #fff;
      }
    }
  }
  /* 右侧面板开启按钮 */
  &-rightopenbox {
    position: absolute;
    right: 0;
    width: 50px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    & > div {
      pointer-events: auto;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      background: rgba(102, 203, 255, 1);
      & > div {
        position: absolute;
        top: 8px;
        right: 16px;
        display: inline-block;
        width: 0px;
        height: 0px;
        border: 12px solid transparent;
        border-right-color: #fff;
      }
    }
  }
  /* 左边树状面板 */
  &-left {
    width: 400px;
    height: 85%;
    position: absolute;
    top: 60px;
    left: 0;
    background: url("../assets/image/tree_background.png") no-repeat center;
    background-size: 100% 100%;
    pointer-events: auto;
    .close-btnbox {
      position: absolute;
      right: -20px;
      height: 100%;
      width: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      & > div {
        pointer-events: auto;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        position: relative;
        background: rgba(102, 203, 255, 1);
        & > div {
          position: absolute;
          top: 8px;
          right: 16px;
          display: inline-block;
          width: 0px;
          height: 0px;
          border: 12px solid transparent;
          border-right-color: #fff;
        }
      }
    }
    .control-container {
      width: 100%;
      height: 8%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      position: relative;
      &-pin-btn {
        width: 30px;
        height: 30px;
        background: url("../assets/image/panel_unlock.png") no-repeat center;
        position: absolute;
        top: 0;
        right: 3px;
        cursor: pointer;
        &.lock-style {
          background: url("../assets/image/panel_lock.png") no-repeat center;
        }
      }
      &-input {
        width: 200px;
        position: absolute;
        bottom: 5px;
        left: 30px;
        /deep/.el-input__inner {
          font-size: 15px;
          height: 35px;
        }
      }
      &-select {
        width: 130px;
        position: absolute;
        bottom: 7px;
        right: 35px;
      }
    }
    .contant-container {
      width: 100%;
      height: 92%;
      overflow: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      &-innerbox {
        width: 90%;
        height: 98%;
        .tree-arrow {
          position: relative;
          top: 0;
          left: 0;
          display: inline-block;
          width: 0px;
          height: 0px;
          border: 7px solid transparent;
          border-left-color: #fff;
        }
        .tree-arrow-expanded {
          position: relative;
          top: 4px;
          left: -3px;
          display: inline-block;
          width: 0px;
          height: 0px;
          border: 7px solid transparent;
          border-top-color: #fff;
        }
        .custom-tree-node {
          position: relative;
          width: 250px;
          .el-checkbox {
            width: 100%;
          }
          &-item {
            max-width: 220px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }

  /* 右面板 -- 显示标记疑点 */
  &-right {
    width: 400px;
    height: 85%;
    position: absolute;
    top: 60px;
    right: 0;
    background: url("../assets/image/tree_background.png") no-repeat center;
    background-size: 100% 100%;
    pointer-events: auto;
    z-index: 2;
    // 关闭折叠面板
    .close-btnbox {
      position: absolute;
      left: -20px;
      height: 100%;
      width: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      & > div {
        pointer-events: auto;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(102, 203, 255, 1);
        position: relative;
        cursor: pointer;
        & > div {
          position: absolute;
          top: 8px;
          left: 16px;
          display: inline-block;
          width: 0px;
          height: 0px;
          border: 12px solid transparent;
          border-left-color: #fff;
        }
      }
    }
    .control-container {
      width: 100%;
      height: 5%;
      position: relative;
      & > div {
        width: 30px;
        height: 30px;
        background: url("../assets/image/panel_unlock.png") no-repeat center;
        position: absolute;
        top: 0;
        left: 3px;
        cursor: pointer;
        &.lock-style {
          background: url("../assets/image/panel_lock.png") no-repeat center;
        }
      }
    }
    .contant-container {
      width: 100%;
      height: 95%;
      overflow: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      &-innerbox {
        width: 90%;
        height: 98%;
        .el-collapse-item__header {
          .status-select {
            width: 300px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 15px;
            .title {
              width: 200px;
              height: 30px;
              line-height: 30px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            /deep/.el-input__suffix {
              right: -15px;
            }
          }
          .all-icon {
            position: relative;
            left: 10px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 100px;
            & > div {
              width: 30px;
              height: 30px;
            }
            &-locate {
              background: url("../assets/map/white_locate.png") no-repeat center;
            }
            &-visible {
              background: url("../assets/map/white_hide.png") no-repeat center;
              &.click {
                background: url("../assets/map/white_display.png") no-repeat
                  center;
              }
            }
          }
        }

        .panel-list-item {
          position: relative;
          margin: 0 auto;
          width: 80%;
          height: auto;
          background: #00aaff;
          font-family: "PingFangSC SC";
          font-weight: 400;
          font-size: 18px;
          line-height: 40px;
          background: rgba(0, 47, 86, 0.3);
          color: #fff;
          padding-left: 20px;
          border-left: 1px solid rgba(207, 222, 255, 0.2);
          border-right: 1px solid rgba(207, 222, 255, 0.2);
          border-bottom: 1px solid rgba(207, 222, 255, 0.2);
          cursor: pointer;
          .title-section {
            max-width: 160px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 14px;
          }
          .normal-icon {
            position: absolute;
            right: 20px;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 120px;
            color: #666666;
          }

          .operation-icon {
            position: absolute;
            right: 60px;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 75px;
            // background: red;
          }
          .visible-icon {
            position: absolute;
            right: 20px;
            top: 9.5px;
            width: 20px;
            height: 20px;
            background: url("../assets/map/eye_invisible.png") no-repeat center;
            &.click {
              background: url("../assets/map/eye_visible.png") no-repeat center;
            }
          }
        }
        .panel-footer {
          border: none;
          width: 100%;
          height: 50px;
          margin-top: 10px;
          overflow-x: auto;
        }
      }
    }
  }

  /* 侧边栏收缩动画效果 */
  /* 左边 */
  .fade-left-enter-from {
    opacity: 0;
    transform: translateX(-300px);
  }

  .fade-left-enter-to {
    opacity: 1;
    transform: translateX(0);
  }

  /* 主动输入控住过渡的持续时间和缓动曲线 */
  .fade-left-enter-active {
    transition: all 0.3s ease;
  }

  .fade-left-leave-from {
    opacity: 1;
    transform: translateX(0);
  }

  .fade-left-leave-to {
    opacity: 0;
    transform: translateX(-300px);
  }

  .fade-left-leave-active {
    transition: all 0.3s ease;
  }
  /* 右边 */
  .fade-right-enter-from {
    opacity: 0;
    transform: translateX(300px);
  }

  .fade-right-enter-to {
    opacity: 1;
    transform: translateX(0);
  }

  .fade-right-enter-active {
    transition: all 0.3s ease;
  }

  .fade-right-leave-from {
    opacity: 1;
    transform: translateX(0);
  }

  .fade-right-leave-to {
    opacity: 0;
    transform: translateX(300px);
  }

  .fade-right-leave-active {
    transition: all 0.3s ease;
  }
}
</style>