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>
    <LawPopup class="comprehensive-analysis-law-popup" />
    <LabelCasePopup
      class="comprehensive-analysis-label-popup"
      style="left: 40%"
      v-if="updateCasePopupShow"
      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="请输入地名地址" v-model="addressInput">
        <el-button
          type="primary"
          slot="append"
          icon="el-icon-search"
          style="vertical-align: bottom"
        ></el-button>
      </el-input>
    </div>
    <div class="comprehensive-analysis-infobox">
      当前显示的疑点数 : &nbsp;<span>{{ currentTotal }}</span>
    </div>
    <div class="comprehensive-analysis-leftjuanlianInfo" v-show="showJLInfo">
      {{ basemapName }}
    </div>
    <div class="comprehensive-analysis-rightjuanlianInfo" v-show="showJLInfo">
      sat2018-s2
    </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"
      :legendData="{
        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.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)
                    "
                    style="position: relative; width: 100%"
                  >
                    <el-tooltip
                      class="item"
                      effect="light"
                      :content="node.label"
                      placement="top-start"
                    >
                      <div class="custom-tree-node-item">
                        {{ node.label }} {{ node.id }}
                      </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)">
                    <div class="title">{{ key }}</div>
                    <NewSelect
                      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>
                    {{
                      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 @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";
export default {
  name: "ComprehensiveAnalysis",
  components: {
    MenuCard,
    Legend,
    AttributePopup,
    LawPopup,
    LabelCasePopup,
    Pagination,
    NewSelect,
  },
  data() {
    return {
      displaySortSelect: false,
      basemapName: "",
      caseAuditEventStatus: false,
      satImgChecked: false,
      airImgChecked: false,
      basemapChecked: "",
      mapList: {
        卫星影像: [],
        航空影像: [],
      },
      baseMapCollectionArr: [
        {
          id: 1,
          type: "卫星影像",
          imgUrl: require("../assets/map/sat_img.png"),
        },
        {
          id: 2,
          type: "航空影像",
          imgUrl: require("../assets/map/air_img.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,
            columnId,
            panelId,
            mainType,
            sourceType
          );
        },
        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,
      };
    },
    getCustomModel() {
      return this.$store.state.customModelsArr;
    },
    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: {
    townSelectVal: {
      handler(val) {
        // console.log(val, "综合分析当前选中的值");
      },
      immediate: true,
    },
    // 监听底部菜单栏
    getJLStatus(val) {
      console.log("监听底部菜单栏 ----- 卷帘对比", val);
      if (val) {
        this.showJLInfo = true;
      } else {
        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") &&
          oldVal.index &&
          oldVal.index === "3"
        ) {
          // 不进入综合分析页面 -- 切换回暗黑地图
          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);
    },
    getCustomModel: {
      handler(val) {
        // console.log(val, "目前存在的自定义模型");
        this.getMyModelData();
      },
      deep: true,
    },
    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,
            };
          });
          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.getColumnList();
    }, 500);
  },

  mounted() {
    // 上传数据后更新我的图层节点
    this.$bus.$off("addUploadLayerEvent");
    this.$bus.$on("addUploadLayerEvent", (data) => {
      if (this.$refs.tree) {
        let children = [
          {
            id: data.id,
            label: data.label,
            mainType: "我的图层",
            children: [],
          },
        ];
        this.$refs.tree.updateKeyChildren(
          this.firstLevelIdMap.get("我的图层").id,
          children
        );
        this.expandedKeys.push(this.firstLevelIdMap.get("我的图层").id);
        this.$refs.tree.setCheckedKeys([data.id]);
        this.$refs.tree.setCurrentKey(data.id);
        let nodeData = this.$refs.tree.getCurrentNode();
        this.handleCheckChange(nodeData, true);
      }
    });

    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,
    });
  },
  destroy() {
    // 当容器销毁时，需要停止监听该事件
    this.$bus.$off("viewDetailsPopup");
    this.$bus.$off("openMyTask");
    this.$bus.$off("openMyView");
    this.$bus.$off("caseAuditEvent2");
  },
  methods: {
    // 修改数据中的疑点
    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);
        // console.log(data, "当前数据过滤");
        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.enteredColumnId,
          this.enteredPanelId,
          this.enteredMainType,
          this.enteredSourceType
        );
      }
    },
    // 得到底部菜单疑点审计开启状态
    caseAuditEvent() {
      this.caseAuditEventStatus = !this.caseAuditEventStatus;
    },
    closePanelEvent() {
      this.satImgChecked = false;
      this.airImgChecked = false;
    },
    changeBaseMap(data) {
      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;
    },
    // 勾选镇时默认展开当前镇
    changeTownEvent(val) {
      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,
                      });

                      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.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.airImgChecked = false;
      }

      if (val === "航空影像" && map2DViewer.baseMapCollection.length > 0) {
        this.mapList["航空影像"] = map2DViewer.baseMapCollection.filter((v) => {
          return v.basemapType === "2";
        });
        this.satImgChecked = false;
        this.airImgChecked = true;
      }
    },
    // 清除页面所有数据
    clearAllData() {
      this.currentTotal = 0;
      this.paginationData.total = 0;
      this.targetLayerTotal = {};
      this.targetLayerPage = {};
      this.originalDataMap.clear();
      this.originalData = {};
      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.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;
        console.log(this.enteredPanelId, "enteredPanelId");
        this.enteredColumnId = this.rightPanelDataMap.get(val).id;
        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.enteredColumnId,
        this.enteredPanelId,
        this.enteredMainType,
        this.enteredColumnId
      );
    },
    getMapData(uniqueId, columnId, mainType, sourceType) {
      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 = ele.c_content;
                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.changeSingleLayer(
                1,
                this.currentPageSize,
                columnId,
                uniqueId,
                mainType,
                sourceType
              );

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

      // 图层未初始化
      if (!map2DViewer.analysisGroups[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: uniqueId,
          info: uniqueId,
        });
        this.legendIcon.push({
          name: uniqueId,
          background: "transparent",
          border: `1px solid ${this.collectColorMap.get(
            this.collectColorMapIndex
          )}`,
        });
        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);
      }
    },
    /**
     * 切换页时改变图层数据
     * @val 当前页
     * @currentPageSize 当前面板pageSize
     * @columnId
     * @id label_columnId
     * @mainType 所有图层/预设模型
     * @sourceType 土地资源，水资源，林地资源，全部
     */
    changeSingleLayer(val, currentPageSize, columnId, 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.id,
                                      mainType: item1.title,
                                      sourceType: item2.title,
                                    }
                                  );

                                  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,
                        });
                        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();
          this.classTextToIndex["浦东新区行政区划"].forEach((v, i) => {
            if (this.townSelectTreeMap.has(i)) {
              oldOptions.push({
                value: i,
                label: i,
              });
              // this.townOptions.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,
          ];
        }
      });
    },
    getMyModelData() {
      let params = new FormData();
      params = {
        columnId: 49,
        states: "0,1,2,3",
        pageSize: 20,
        page: 0,
      };

      this.$Post(this.urlsCollection.selectContentList, params)
        .then((res) => {
          if (res.code === 200 && res.content.data.length > 0) {
            let children = res.content.data.map((ele) => {
              customModelIdMap.set(ele.title, {
                column_id: ele.column_id,
                id: `${ele.title}_${ele.id}`,
              });
              this.rightPanelDataMap.set(`${ele.title}_${ele.id}`, {
                id: `${ele.title}_${ele.id}`,
                mainType: "我的模型",
                sourceType: "",
                label: ele.title,
              });
              return {
                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 || "",
              };
            });
            if (this.modelData.length > 0) {
              if (this.$refs.tree) {
                this.$refs.tree.updateKeyChildren(
                  this.firstLevelIdMap.get("我的模型").id,
                  children
                );
              }

              // this.expandedKeys.push(this.firstLevelIdMap.get("我的模型").id);
              // this.modelData.forEach((ele) => {
              //   if (ele.label == "我的模型") {
              //     ele.children = children;
              //   }
              // });
            }
          }
        })
        .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) {
            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) {
      // console.log(node, "删除节点");
      let deleteParams = {
        id: customModelIdMap.get(node.data.label).id,
        columnId: 49,
        state: 4,
      };
      this.$Post(this.urlsCollection.updateAudit, deleteParams).then((res) => {
        if (res.code === 200) {
          this.$message.info("模型已删除!");
          this.$store.state.customModelsArr =
            this.$store.state.customModelsArr =
              this.$store.state.customModelsArr.filter((v) => {
                return v.name !== node.data.label;
              });

          // this.getMyModelData();
        }
      });
    },

    // 节点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) => {
                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 : ""
            );
          }
          // 第一级菜单是疑点问题
          if (data.mainType === "疑点问题") {
            layerAuthorityMap.set(data.id, "有权限");
            this.rightPanelTitle = data.id;
            this.displaySingleLayer(
              data.columnId,
              data.id,
              data.mainType,
              data.sourceType ? data.sourceType : ""
            );
          }
        } 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.name !== data.id;
            });
            this.legendIcon = this.legendIcon.filter((v) => {
              return v.name !== 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]) {
        // 生成图例时设置初始化图层颜色
        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: uniqueId,
          info: uniqueId,
        });
        this.legendIcon.push({
          name: uniqueId,
          background: "transparent",
          border: `1px solid ${this.collectColorMap.get(
            this.collectColorMapIndex
          )}`,
        });

        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.features.length > 0) {
                let condition = response.features[0].geometry.coordinates.every(
                  (coord) => coord.length == 0
                );
                if (condition) {
                  this.$message.info("未发现叠置的几何体！");
                } else {
                  if (map2DViewer.analysisGroups[uniqueId]) {
                    let uniqueIdList = [];
                    if (
                      this.$store.state.selectSelectDataMap["singlePolygon"][
                        uniqueId
                      ]
                    ) {
                      uniqueIdList =
                        this.$store.state.selectSelectDataMap["singlePolygon"][
                          uniqueId
                        ];
                    }
                    // 清除当前图层组内所有图层，并读取GeoJSON数据
                    map2DViewer.analysisGroups[uniqueId].clearLayers();
                    // 叠置分析图斑数统计
                    this.targetLayerTotal[uniqueId] = response.features.length;
                    this.currentTotal += response.features.length;

                    response.features.forEach((v) => {
                      // 存储叠置分析的图层 -- 以便同屏对比时显示
                      let coord = v.geometry.coordinates;
                      let correctCoord = publicFun.latLngsCorrection(coord);
                      let coordinates =
                        publicFun.latLngsToReverse(correctCoord);
                      coordinates = publicFun.latLngsToReverse(coordinates);
                      let geojson = publicFun.standardGeojson(coordinates);
                      let singlePolygonItem = {
                        uniqueId: `overlay_${uniqueId}`,
                        geometry: JSON.stringify(geojson),
                        cid: publicFun.buildGuid(data.label),
                        color: this.collectColorMap.get(
                          this.collectColorMapIndex
                        ),
                      };
                      uniqueIdList.push(singlePolygonItem);
                      this.$store.state.selectSelectDataMap["singlePolygon"][
                        uniqueId
                      ] = uniqueIdList;
                      this.readGeojson(
                        geojson,
                        data.id,
                        this.collectColorMap.get(this.collectColorMapIndex)
                      );
                    });
                  }
                }
              }
            }
          );
        } 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.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 changeCaseStatusArr = res.content.map((ele) => {
                  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 = ele.c_content;
                    let modelId = ele.model_id;
                    let columnId = ele.column_id;
                    this.$store.state.mapMethodsCollection
                      .get("RENDER")
                      .addSinglePolygon(
                        geometry,
                        cid,
                        this.collectColorMap.get(this.collectColorMapIndex),
                        uniqueId,
                        data.mainType,
                        "",
                        "",
                        modelId,
                        columnId
                      );
                  });
                }

                // 激活当前展开面板
                this.activeNames = ["myLabel", uniqueId];
                // 我的模型数据进行分页列表展示
                this.originalData[uniqueId] =
                  this.originalDataMap.get(uniqueId);

                // 进行分页列表展示
                this.changeSingleLayer(
                  1,
                  this.currentPageSize,
                  data.columnId,
                  uniqueId
                );
              }
            }
          );
        }
      }
    },
    // geojson直接读取的坐标顺序是经纬度
    readGeojson(geojson, uniqueId, color) {
      // 尽量与所有图层，预设模型读取几何数据的方式一样，
      let states = [];
      states.push(geojson);
      let geojsonData = L.geoJSON(states, {
        style: function (feature) {
          return { color: color };
          // console.log(feature);
        },
      }).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 (
          // data.mainType === "所有图层" &&
          this.originalData &&
          this.originalData[data.id]
        ) {
          delete this.originalData[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.name !== data.id;
        });
        this.legendIcon = this.legendIcon.filter((v) => {
          return v.name !== 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;
          console.log(obj);
          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 geoType = JSON.parse(data.geojson).properties.featureType;
        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,
        });
      }

      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;
          console.log(geojson, "修改后的geojson数据");
          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) {
                // console.log("修改成功", res);
                this.updateCasePopupShow = false;
                this.getUserMarkers();
                this.$message.success("修改成功！");
              }
            },
            (error) => {
              this.$message.error("保存失败");
              console.log(error);
            }
          );
        }
      });
    },
    // 修改标记 -- 仅支持修改类型和描述
    updateLabel(val) {
      // console.log("修改标记", val);
      this.$store.state.bottomMenuIndexs.index = -1;
      this.$store.state.bottomMenuIndexs.subIndex = -1;
      this.updateCasePopupShow = true;
      this.attrTableShow = false;
      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")) {
        // console.log("删除标记");
        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_${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.4,
                }
              : {
                  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: rgb(0, 170, 255);
.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 {
    width: 150px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    border: none;
    left: 0.5%;
    top: 15px;
    pointer-events: auto;
    color: #fff;
    font-size: 20px;
  }

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

  &-searchbox {
    width: 300px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 21%;
    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;
    }
  }

  &-basemapswitch {
    width: 300px;
    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: 120px;
      height: 75px;
      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: 100px;
        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: 30px;
    top: 15px;
    pointer-events: auto;
    cursor: pointer;
    .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;
    }
  }

  &-legendbox {
    position: absolute;
    right: 410px;
    top: 30px;
    z-index: 1;
  }
  /* 弹窗 */
  &-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: 240px;
            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;
          .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>