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
      v-drag
      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>
          <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"
            >
              <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 title="我的标记" name="myLabel">
                <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 publicFun from "@/utils/publicFunction.js";
import { treeModel, defaultLayers } from "@/config/common";
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,
  },
  data() {
    return {
      enteredPanelId: "",
      enteredColumnId: "",
      uploadBaseUrl: "/dms",
      classTextToIndex: {},
      addressInput: "",
      legendShow: false,
      tableType: "normal",
      tableData: [],
      legendHeight: "0",
      boxWidth: "600",
      boxHeight: "600",
      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;
          this.changeSingleLayer(columnId, panelId, val);
        },
        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: {
    uploadDataArr: {
      handler(val) {
        if (val.length > 0) {
          // console.log(val, "uploadDataIdArr");
        }
      },
      immediate: true,
      deep: true,
      // console.log(val,"uploadDataIdArr");
    },
    getLeftMenuTitle: {
      handler(val) {
        this.$nextTick(() => {
          if (treeIdMap.has(val)) {
            // console.log(val, "678");
            // 设置默认勾选项
            this.$refs.tree.setCheckedKeys([treeIdMap.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) {
          this.rightLabelData = val.map((v, i) => {
            let data = JSON.parse(v.geojson);
            return {
              id: v.id,
              name: `疑点 ${v.id}`,
              coord: data.geometry.coordinates[0][0],
              type: data.properties.title,
              des: data.properties.desc,
              geojson: v.geojson,
              geometryChecked: false,
              featureType: data.properties.featureType,
            };
          });
          // console.log(this.rightLabelData, "rightLabelData");
        }
      },
      deep: true,
      // immediate: true,
    },
  },
  created() {
    this.getColumnList();
    this.classDictQuery("0", "c_task_type", "任务类型");
    this.classDictQuery("0", "浦东新区行政区划", "浦东新区行政区划");

    //获取我的标记数据
    this.getUserMarkers();
  },

  mounted() {
    map2DViewer.map.on("move", (e) => {
      if (!this.isLeftLock) {
        this.showLeftBox = false;
        this.leftBoxBtn = true;
      }

      if (!this.isRightLock) {
        this.showRightBox = false;
        this.rightBoxBtn = true;
      }
    });
  },
  beforeDestroy() {
    treeIdMap.clear();
    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();
      }
    }

    if (Object.getOwnPropertyNames(map2DViewer.myLabels).length > 0) {
      for (let label in map2DViewer.myLabels) {
        this.$store.state.mapMethodsCollection
          .get("RENDER")
          .deleteGeometry(map2DViewer.myLabels[label]);
      }
    }
    map2DViewer.analysisGroups = {};
    map2DViewer.polygons = {};
    map2DViewer.myLabels = {};
    this.attrTableShow = false;
    this.updateCasePopupShow = false;
  },
  methods: {
    mouseenter(val) {
      if (this.rightPanelDataMap.has(val)) {
        // 方便获取
        this.enteredPanelId = val;
        this.enteredColumnId = this.rightPanelDataMap.get(val);
        // console.log("当前的columnId", this.enteredColumnId);
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPageSize = val;
      this.changeSingleLayer(
        this.enteredColumnId,
        this.enteredPanelId,
        this.currentPage
      );
      // this.getTableData(this.currentPage);
    },
    getTableData() {},
    /**
     * 获取图层信息 -- 所有模型和预设模型
     */
    displaySingleLayer(columnId, id) {
      // 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)}`,
            });
            this.originalData[uniqueId] = res.content.data.map((ele) => {
              let cid = ele.id;
              let geometry = ele.c_content;
              this.layerIdMap.set(uniqueId, uniqueId);
              // 激活当前展开面板
              this.activeNames = ["myLabel", uniqueId];
              this.$store.state.mapMethodsCollection
                .get("RENDER")
                .addSinglePolygon(
                  geometry,
                  cid,
                  this.randomColor.get(uniqueId),
                  uniqueId
                );
              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,
              };
            });
          }
        }
      );
    },
    /**
     * 切换页时改变图层数据
     */
    changeSingleLayer(columnId, id, val) {
      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]) {
              // console.log("当前的analysisGroups有数据");
              // map2DViewer.analysisGroups[uniqueId].remove()
              map2DViewer.analysisGroups[uniqueId].clearLayers();
              this.originalData[uniqueId] = res.content.data.map((ele) => {
                let cid = ele.id;
                let geometry = ele.c_content;
                this.layerIdMap.set(uniqueId, uniqueId);
                this.activeNames = ["myLabel", uniqueId];
                this.$store.state.mapMethodsCollection
                  .get("RENDER")
                  .addSinglePolygon(
                    geometry,
                    cid,
                    this.randomColor.get(uniqueId),
                    uniqueId
                  );
                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 + "");
          });
        }
      });
    },
    // 获取分级栏目列表
    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) {
              treeIdMap.set(
                `${item1.title}_${item1.id}`,
                `${item1.title}_${item1.id}`
              );
              return {
                id: `${item1.title}_${item1.id}`,
                label: item1.title,
                // 镇
                children:
                  item1.columnList.length === 0
                    ? []
                    : item1.columnList.map((item2) => {
                        treeIdMap.set(
                          `${item2.title}_${item2.id}`,
                          `${item2.title}_${item2.id}`
                        );
                        return {
                          id: `${item2.title}_${item2.id}`,
                          label: item2.title,
                          // 水资源，土地资源，林地资源
                          children:
                            item2.columnList.length === 0
                              ? []
                              : item2.columnList.map((item3) => {
                                  treeIdMap.set(
                                    `${item3.title}_${item3.id}`,
                                    `${item3.title}_${item3.id}`
                                  );
                                  return {
                                    id: `${item3.title}_${item3.id}`,
                                    label: item3.title,
                                    tag: item3.tag,
                                    children:
                                      item3.columnList &&
                                      item3.columnList.length === 0
                                        ? []
                                        : item3.columnList.map((item4) => {
                                            treeIdMap.set(
                                              `${item4.title}_${item4.id}`,
                                              `${item4.title}_${item4.id}`
                                            );
                                            this.rightPanelDataMap.set(
                                              `${item4.title}_${item4.id}`,
                                              item4.id
                                            );

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

                                            return {
                                              id: `${item4.title}_${item4.id}`,
                                              label: item4.title,
                                              children: [],
                                              columnId: item4.id,
                                              modelName: item4.modelName,
                                              modelId: item4.modelId,
                                              tag: item4.tag,
                                              type: item3.title,
                                              town: item2.title,
                                              mainType: item1.title,
                                              color: publicFun.getRandomColor(),
                                            };
                                          }),
                                  };
                                }),
                        };
                      }),
              };
            }
            if (item1.title === "预设模型" && item1.columnList.length > 0) {
              treeIdMap.set(
                `${item1.title}_${item1.id}`,
                `${item1.title}_${item1.id}`
              );
              return {
                id: `${item1.title}_${item1.id}`,
                label: item1.title,
                children:
                  item1.columnList.length === 0
                    ? []
                    : item1.columnList.map((item2) => {
                        treeIdMap.set(
                          `${item2.title}_${item2.id}`,
                          `${item2.title}_${item2.id}`
                        );

                        return {
                          id: `${item2.title}_${item2.id}`,
                          label: item2.title,
                          children:
                            item2.columnList.length === 0
                              ? []
                              : item2.columnList.map((item3) => {
                                  treeIdMap.set(
                                    `${item3.title}_${item3.id}`,
                                    `${item3.title}_${item3.id}`
                                  );
                                  this.rightPanelDataMap.set(
                                    `${item3.title}_${item3.id}`,
                                    item3.id
                                  );
                                  this.randomColor.set(
                                    `${item3.title}_${item3.id}`,
                                    publicFun.getRandomColor()
                                  );
                                  return {
                                    id: `${item3.title}_${item3.id}`,
                                    label: item3.title,
                                    children: [],
                                    mainType: item1.title,
                                    columnId: item3.id,
                                  };
                                }),
                        };
                      }),
              };
            }

            if (item1.title === "我的模型") {
              // treeIdMap.set(item1.title, `${item1.title}_${item1.id}`);
              treeIdMap.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() {
      // 我的模型栏目信息
      // {
      //       "level": 0,
      //       "modelId": 94,
      //       "updateTime": 1671432804228,
      //       "authorId": 4,
      //       "title": "我的模型",
      //       "type": 1,
      //       "content": "浦东审计-我的模型",
      //       "parentId": -1,
      //       "modelName": "pdsj_wdmx_m_ysmx_wdmx",
      //       "createTime": 1671432804228,
      //       "authorName": "user001",
      //       "id": 89,
      //       "state": 0,
      //       "tag": "pdsj_wdmx"
      //   },
      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) {
            // console.log(res.content.data, "我的模型 - 最终数据");
            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_dzfx_file: ele.c_dzfx_file || "",
              };
            });
            if (this.modelData.length > 0) {
              this.modelData.forEach((ele) => {
                if (ele.label == "我的模型") {
                  // console.log(ele, "我的模型");
                  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,
        };
        this.$Post(this.urlsCollection.selectByUser, paramData).then((res) => {
          if (res.code === 200 && res.content.length >= 1) {
            // console.log(res);
            this.$store.state.myLabelPointsArr = [];
            this.$store.state.myLabelPointsArr = res.content.map((v) => {
              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.rightPanelTitle = data.id;
            let searchParam = [];

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

            let targetType = this.classTextToIndex["任务类型"].get(
              data.type + "审计"
            );

            let paramUser = {
              field: "c_user_id",
              searchType: "2",
              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.$store.state.treeDataCollection.set(data.id, {
                    mainType: data.mainType,
                  });
                  this.displaySingleLayer(data.columnId, data.id);
                }
              }
            );
          }
          // 第一级菜单是预设模型
          if (data.mainType === "预设模型") {
            layerAuthorityMap.set(data.id, "有权限");
            this.rightPanelTitle = data.id;
            this.$store.state.treeDataCollection.set(data.id, {
              mainType: data.mainType,
              // town: data.town,
              // type: data.type,
            });
            this.displaySingleLayer(data.columnId, data.id);
          }
        } else {
          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.delete(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.displayOverlayData(data) : this.deleteOverlayData(data);
      }
    },
    displayOverlayData(data) {
      if (data.c_dzfx_file) {
        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);
              });
            }
          }
        );
      }
    },
    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;
    },
    deleteOverlayData(data) {
      if (map2DViewer.overlay[data.id]) {
        map2DViewer.map.removeLayer(map2DViewer.overlay[data.id]);
      }
    },
    // 右侧面板项点击事件
    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 = "400";
        this.boxHeight = "250";
        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);
          }
        });
        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({
          name: data.name,
          type: data.type,
          des: 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 id = this.$refs.updateLabelRef.id;
        let params = new FormData();
        let geojson = JSON.parse(this.$refs.updateLabelRef.geojson);
        let geometryType = geojson.properties.featureTypeIndex;
        // 修改标题和描述
        geojson.properties.title = selectType;
        geojson.properties.desc = desContent;
        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();
            }
          },
          (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(() => {
          // console.log(this.$refs.updateLabelRef, "updateLabelRef");
          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) {
          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: absolute;
    top: 15%;
    left: 33%;
    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 {
    // background: red;
    position: absolute;
    top: 10%;
    left: 35%;
    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: 320px;
        position: absolute;
        bottom: 5px;
        left: 30px;
        /deep/.el-input__inner {
          font-size: 15px;
          height: 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%;
        // /deep/.el-icon-arrow-right:before {
        //   content: "";
        // }
        // /deep/.el-icon-arrow-right:after {
        //   content: "";
        // }
        .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>