web_sh_audit/src/views/ComprehensiveAnalysis.vue

<template>
  <div class="comprehensive-analysis">
    <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>
    <!-- 属性弹窗 -->
    <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 === '预设模型'
                  "
                >
                  <el-checkbox v-model="node.checked" style="position: relative"
                    >{{ node.label
                    }}<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>
                  <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"
                :title="key"
                :name="key"
              >
                <div
                  class="panel-list-item"
                  v-for="(v, i) in originalData[key]"
                  :key="v.id"
                  @click.stop="listItemClick('default', v)"
                >
                  <!-- {{ v.column_name + "_" + (i + 1) }} -->
                  {{ v.title + "_" + (i + 1) }}
                </div>
                <div class="panel-footer" @mouseenter="mouseenter(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 in rightLabelData"
                  :key="item.id"
                >
                  <div @click="listItemClick('new', item)">
                    {{ item.name }}
                  </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 { nextTick } from "vue";
export default {
  name: "ComprehensiveAnalysis",
  components: {
    MenuCard,
    Legend,
    AttributePopup,
    LawPopup,
    LabelCasePopup,
    Pagination,
    NewSelect,
  },
  data() {
    return {
      expandedKeys: [],
      myModelIdMap: new Map(),
      townSelectTreeMap: new Map(),
      labelAllVisibleChecked: true,
      townSelectVal: "",
      townOptions: [],
      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: {},
      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(),
      randomColor: 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 panelId = this.enteredPanelId;
          let mainType = this.enteredMainType;
          let sourceType = this.enteredSourceType;
          this.changeSingleLayer(val, columnId, panelId, mainType, sourceType);
        },
        handleSizeChange: (val) => {
          this.handleSizeChange(val);
        },
      },
    };
  },
  computed: {
    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: {
    // 控制全选的显示或隐藏
    labelAllVisibleChecked(val) {
      if (this.rightLabelData.length > 0) {
        this.rightLabelData.forEach((item) => {
          this.controlLabel(item);
        });
        if (val) {
          this.labelAllLocate();
        }
      }
    },
    "$store.state.navSelect": {
      handler(val) {
        if (val.index === "1" || val.index === "2") {
          this.clearAllData();
          this.labelAllVisibleChecked = false;
        }

        if (val.index === "3") {
          // 如果没有初始化设置
          if (!map2DViewer.groups["我的标记图层组"]) {
            this.getUserMarkers();
          }
          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)) {
            // console.log(val, "678");
            // 设置默认勾选项
            this.$refs.tree.setCheckedKeys([defaultModelNameMap.get(val)]);
          }
        });
      },
      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.getColumnList();
    this.classDictQuery("0", "c_task_type", "任务类型");
    this.classDictQuery("0", "浦东新区行政区划", "浦东新区行政区划");
  },

  mounted() {
    // 获取我的标记数据
    if (this.$store.state.navSelect.index === "3") {
      this.getUserMarkers();
      map2DViewer.map.on("move", (e) => {
        if (!this.isLeftLock) {
          this.showLeftBox = false;
          this.leftBoxBtn = true;
        }

        if (!this.isRightLock) {
          this.showRightBox = false;
          this.rightBoxBtn = true;
        }
      });

      this.$bus.$off("viewDetailsPopup");
      this.$bus.$on("viewDetailsPopup", (data) => {
        this.viewDetailsPopup(data);
      });
    }
  },
  // beforeDestroy() {
  //   this.clearAllData();
  // },
  methods: {
    // 勾选镇时默认展开当前镇
    changeTownEvent(val) {
      if (this.townSelectTreeMap.has(val)) {
        this.expandedKeys = [];
        this.expandedKeys.push(this.townSelectTreeMap.get(val).id);
        console.log(this.expandedKeys);
      }
    },
    // 清除页面所有数据
    clearAllData() {
      // uploadDataIdArr = [];
      // this.treeCoordMap.clear();
      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);
          map2DViewer.analysisGroups[group].remove();
        }
        this.$refs.tree.setCheckedKeys([]);
      }

      map2DViewer.analysisGroups = {};
      map2DViewer.polygons = {};
      this.attrTableShow = false;
      this.updateCasePopupShow = false;
      map2DViewer.map.closePopup();
    },

    labelAllLocate() {
      if (map2DViewer.groups["我的标记图层组"]) {
        map2DViewer.map.fitBounds(
          map2DViewer.groups["我的标记图层组"].getBounds()
        );
      }
    },
    labelAllVisible() {
      this.labelAllVisibleChecked = !this.labelAllVisibleChecked;
    },
    mouseenter(val) {
      if (this.rightPanelDataMap.has(val)) {
        // 方便获取
        this.enteredPanelId = val;
        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.enteredColumnId,
        this.enteredPanelId,
        this.enteredMainType,
        this.enteredColumnId
      );
    },
    getTableData() {},
    /**
     * 获取图层信息 -- 所有模型和预设模型
     * @columnId
     * @id label_columnId
     * @mainType  所有图层/预设模型
     * @sourceType 土地资源/林地资源/生态资源/水资源/全部
     */
    displaySingleLayer(columnId, id, mainType, sourceType) {
      if (id !== "永久基本农田_50") {
        // console.log(columnId, "columnId");
        let layerParams = new FormData();
        layerParams = {
          columnId: columnId,
          states: "0,1,2,3",
          pageSize: 10,
          page: 0,
        };
        this.$Post(this.urlsCollection.selectContentList, layerParams).then(
          (res) => {
            if (res.code === 202 && res.content === "数据不存在") {
              this.$message.info("暂无数据!");
            }
            if (res.code === 200 && res.content.data.length > 0) {
              this.paginationData.currentPage = 1;
              this.paginationData.total = res.content.count;
              let uniqueId = id;
              map2DViewer.analysisGroups[uniqueId] = L.featureGroup();
              map2DViewer.analysisGroups[uniqueId].addTo(map2DViewer.map);
              this.legendTitle.push({
                name: uniqueId,
                info: uniqueId,
              });
              this.legendIcon.push({
                name: uniqueId,
                background: "transparent",
                border: `1px solid ${this.randomColor.get(uniqueId)}`,
              });
              if (!this.$store.state.selectSelectDataMap["singlePolygon"]) {
                this.$store.state.selectSelectDataMap["singlePolygon"] = [];
              }
              this.layerIdMap.set(uniqueId, uniqueId);
              this.originalData[uniqueId] = res.content.data.map((ele) => {
                let cid = ele.id;
                let geometry = ele.c_content;

                // 激活当前展开面板
                this.activeNames = ["myLabel", uniqueId];
                this.$store.state.mapMethodsCollection
                  .get("RENDER")
                  .addSinglePolygon(
                    geometry,
                    cid,
                    this.randomColor.get(uniqueId),
                    uniqueId,
                    mainType,
                    sourceType
                  );

                return {
                  id: ele.id,
                  // "垃圾堆放点"
                  column_name: ele.column_name,
                  // 是否疑点
                  c_boolean: ele.c_boolean ? "是" : "否",
                  // 行政区划
                  c_xzqh: ele.c_xzqh,
                  // 空间信息
                  c_content: ele.c_content,
                  // 疑点修改时间
                  c_date_time: ele.c_date_time,
                  // 修改人员名称
                  // c_editor_name: ele.c_editor_name,
                  // 标题
                  title: ele.title,
                  column_id: ele.column_id,
                  content: ele.content,
                  secret_level: ele.secret_level,
                };
              });
            }
          }
        );
      }
    },
    /**
     * 切换页时改变图层数据
     * @val 当前页
     * @columnId
     * @id label_columnId
     * @mainType 所有图层/预设模型
     * @sourceType 土地资源，水资源，林地资源，全部
     */
    changeSingleLayer(val, columnId, id, mainType, sourceType) {
      let layerParams = new FormData();
      layerParams = {
        columnId: columnId,
        states: "0,1,2,3",
        pageSize: 10,
        page: val - 1,
      };
      this.$Post(this.urlsCollection.selectContentList, layerParams).then(
        (res) => {
          // console.log(res, "changeSingeLayer");
          if (res.code === 200 && res.content.data.length > 0) {
            this.paginationData.currentPage = val;
            this.paginationData.total = res.content.count;
            let uniqueId = id;
            if (map2DViewer.analysisGroups[uniqueId]) {
              this.layerIdMap.set(uniqueId, uniqueId);
              map2DViewer.analysisGroups[uniqueId].clearLayers();
              this.originalData[uniqueId] = res.content.data.map((ele) => {
                let cid = ele.id;
                let geometry = ele.c_content;

                this.activeNames = ["myLabel", uniqueId];
                this.$store.state.mapMethodsCollection
                  .get("RENDER")
                  .addSinglePolygon(
                    geometry,
                    cid,
                    this.randomColor.get(uniqueId),
                    uniqueId,
                    mainType,
                    sourceType
                  );
                return {
                  id: ele.id,
                  // "垃圾堆放点"
                  column_name: ele.column_name,
                  // 是否疑点
                  c_boolean: ele.c_boolean ? "是" : "否",
                  // 行政区划
                  c_xzqh: ele.c_xzqh,
                  // 空间信息
                  c_content: ele.c_content,
                  // 疑点修改时间
                  c_date_time: ele.c_date_time,
                  // 修改人员名称
                  // c_editor_name: ele.c_editor_name,
                  // 标题
                  title: ele.title,
                  column_id: ele.column_id,
                  content: ele.content,
                  secret_level: ele.secret_level,
                };
              });
            }
          }
        }
      );
    },
    // 数据字典查询 -- 根据内容获取对应的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 + "");
          });

          if (keyName === "浦东新区行政区划") {
            this.classTextToIndex[keyName].forEach((v, i) => {
              this.townOptions.push({
                value: i,
                label: i,
              });
            });
          }
        }
      });
    },
    // 获取分级栏目列表
    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) {
              return {
                id: `${item1.title}_${item1.id}`,
                label: item1.title,
                // 镇
                children:
                  !item1.columnList || item1.columnList.length === 0
                    ? []
                    : item1.columnList.map((item2) => {
                        this.townSelectTreeMap.set(item2.title, {
                          id: `${item2.title}_${item2.id}`,
                        });

                        return {
                          id: `${item2.title}_${item2.id}`,
                          label: item2.title,
                          // 水资源，土地资源，林地资源
                          children:
                            !item2.columnList || item2.columnList.length === 0
                              ? []
                              : item2.columnList.map((item3) => {
                                  return {
                                    id: `${item3.title}_${item3.id}`,
                                    label: item3.title,
                                    tag: item3.tag,
                                    children:
                                      !item3.columnList ||
                                      item3.columnList.length === 0
                                        ? []
                                        : item3.columnList.map((item4) => {
                                            this.rightPanelDataMap.set(
                                              `${item4.title}_${item4.id}`,

                                              {
                                                id: item4.id,
                                                mainType: item1.title,
                                                sourceType: item3.title,
                                              }
                                            );

                                            this.randomColor.set(
                                              `${item4.title}_${item4.id}`,
                                              publicFun.getRandomColor()
                                            );

                                            return {
                                              id: `${item4.title}_${item4.id}`,
                                              label: item4.title,
                                              children: [],
                                              columnId: item4.id,
                                              townId: item2.id,
                                              townType: item2.title,
                                              sourceId: item3.id,
                                              sourceType: item3.title,
                                              mainType: item1.title,
                                              color: publicFun.getRandomColor(),
                                            };
                                          }),
                                  };
                                }),
                        };
                      }),
              };
            }
            if (item1.title === "预设模型" && item1.columnList.length > 0) {
              return {
                id: `${item1.title}_${item1.id}`,
                label: item1.title,
                children:
                  item1.columnList.length === 0
                    ? []
                    : item1.columnList.map((item2) => {
                        return {
                          id: `${item2.title}_${item2.id}`,
                          label: item2.title,
                          children:
                            item2.columnList.length === 0
                              ? []
                              : item2.columnList.map((item3) => {
                                  this.rightPanelDataMap.set(
                                    `${item3.title}_${item3.id}`,
                                    {
                                      id: item3.id,
                                      mainType: item1.title,
                                      sourceType: item2.title,
                                    }
                                  );
                                  this.randomColor.set(
                                    `${item3.title}_${item3.id}`,
                                    publicFun.getRandomColor()
                                  );
                                  defaultModelNameMap.set(
                                    item3.label,
                                    `${item3.title}_${item3.id}`
                                  );
                                  return {
                                    id: `${item3.title}_${item3.id}`,
                                    label: item3.title,
                                    sourceType: item2.title,
                                    mainType: item1.title,
                                    columnId: item3.id,
                                    children: [],
                                  };
                                }),
                        };
                      }),
              };
            }

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

          data.forEach((v) => {
            if (v) {
              this.modelData.unshift(v);
            }
          });
          this.modelData.push({
            id: "我的图层",
            label: "我的图层",
            children: [],
          });

          this.getMyModelData();
        }
      });
    },
    getMyModelData() {
      let params = new FormData();
      params = {
        columnId: 49,
        states: "0,1,2,3",
        pageSize: 10,
        page: 0,
      };

      this.$Post(this.urlsCollection.selectContentList, params)
        .then((res) => {
          // console.log(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.id,
              });
              return {
                id: ele.id,
                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 || "",
              };
            });
            if (this.modelData.length > 0) {
              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)) {
        let layer = this.layerIdMap.get(node.data.id);
        // console.log(layer, "layer");
        map2DViewer.map.fitBounds(
          map2DViewer.analysisGroups[node.data.id].getBounds()
        );
      }
    },
    handleUpdate(node) {
      this.$bus.$emit("updateModel", node);
    },
    handleDelete(node) {
      // debugger;
      // 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.$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,
            });
            this.rightPanelTitle = data.id;
            let searchParam = [];

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

            let targetType = this.classTextToIndex["任务类型"].get(
              data.sourceType
            );

            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) => {
                // debugger;
                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
                  );
                }
              }
            );
          }
          // 第一级菜单是预设模型
          if (data.mainType === "预设模型") {
            layerAuthorityMap.set(data.id, "有权限");
            this.rightPanelTitle = data.id;
            this.displaySingleLayer(
              data.columnId,
              data.id,
              data.mainType,
              data.sourceType
            );
          }
        } else {
          if (this.$store.state.selectSelectDataMap["singlePolygon"][data.id]) {
            delete this.$store.state.selectSelectDataMap["singlePolygon"][
              data.id
            ];
          }
          delete this.originalData[data.id];
          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);
        }
      }

      // 第一级菜单是我的模型
      if (data.mainType && data.mainType === "我的模型") {
        // 显示叠置分析的数据
        checked ? this.displayMyModelData(data) : this.deleteMyModelData(data);
      }
    },
    displayMyModelData(data) {
      debugger;
      // 如果有叠置分析文件 -- 呈现叠置分析内容
      if (data.c_dzfx_file) {
        debugger;
        this.$Get(this.uploadBaseUrl + data.c_dzfx_file, "").then(
          (response) => {
            if (response.features.length > 0) {
              response.features.forEach((v) => {
                let geojson = publicFun.standardGeojson(v.geometry.coordinates);
                // console.log(geojson, "geojson")
                this.readGeojson(geojson, data.id);
              });
            }
          }
        );
      } else {
        let params = new FormData();
        params = {
          modelId: data.id,
          userId: localStorage.getItem("USER_ID"),
        };
        // 调用我的模型查看接口读取所有图层数据
        this.$Post(this.urlsCollection.getModelCoverAgeInfo, params).then(
          (res) => {
            if (res.code === 201 && res.message === "未申请任务权限") {
              this.$message.info("暂无数据!");
            }
            if (res.code === 200 && res.content.length > 0) {
              debugger;
              console.log(res.content, "查看我的模型图层数据");
              let uniqueId = `${data.label}_${data.id}`;
              map2DViewer.analysisGroups[uniqueId] = L.featureGroup();
              map2DViewer.analysisGroups[uniqueId].addTo(map2DViewer.map);
              this.layerIdMap.set(uniqueId, uniqueId);
              // 判断能用的数据
              // 根据column_name或 column_id判断有几个图层
              res.content.forEach((ele, index) => {
                let cid = ele.id;
                let geometry = ele.c_content;
                // this.$store.state.mapMethodsCollection
                //   .get("RENDER")
                //   .addSinglePolygon(
                //     geometry,
                //     cid,
                //     // this.randomColor.get(uniqueId),
                //     uniqueId,
                //     mainType,
                //     sourceType
                //   );
                // let legendTitle = this.legendTitle.push({});
                // map2DViewer.analysisGroups[uniqueId] = L.featureGroup();
                // map2DViewer.analysisGroups[uniqueId].addTo(map2DViewer.map);
              });
            }
          }
        );
      }
    },
    readGeojson(geojson, id) {
      map2DViewer.overlay[id] = [];
      let states = [];
      states.push(geojson);
      let geojsonData = L.geoJSON(states, {
        style: function (feature) {
          // console.log(feature);
        },
      }).addTo(map2DViewer.map);
      map2DViewer.overlay[id] = geojsonData;
    },
    deleteMyModelData(data) {
      // 如果有叠置分析文件，删除叠置分析图层
      if (data.c_dzfx_file) {
        if (map2DViewer.overlay[data.id]) {
          map2DViewer.map.removeLayer(map2DViewer.overlay[data.id]);
        }
      } else {
        // 删除绘制的图层数据
      }
    },
    //显示详细信息
    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, 16);
        } 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;
    }
  }

  &-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;
    }
  }

  &-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: 50%;
          }
        }
      }
    }
  }

  /* 右面板 -- 显示标记疑点 */
  &-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 {
          .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;

          .operation-icon {
            position: absolute;
            right: 100px;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 75px;
            // background: red;
          }
          .visible-icon {
            position: absolute;
            right: 60px;
            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>