web_sh_audit/src/views/ComprehensiveAnalysis.vue

<template>
  <div class="comprehensive-analysis">
    <LawPopup class="popup-style" />
    <div class="comprehensive-analysis-backbtn" @click="backEvent">
      <div class="left-arrow"></div>
      <div class="title">返回上级</div>
    </div>
    <!-- 属性弹窗 -->
    <AttributePopup
      v-drag
      class="comprehensive-analysis-popup"
      v-if="attrTableShow"
      :boxWidth="boxWidth"
      :boxHeight="boxHeight"
      :tableType="tableType"
      :tableData="tableData"
      @close="closeEvent"
    />
    <!-- 右上角工具栏 -->
    <!--     <div class="comprehensive-analysis-toolbar">
      <div class="searchbox">
        <el-input
          placeholder="请输入地址、地块名称等"
          v-model="searchInput"
        ></el-input>
      </div>
    </div> -->
    <!-- 图例 -->

    <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="control-container">
          <el-input
            class="control-container-input"
            v-model="filterText"
            placeholder="请输入文本"
          ></el-input>
          <div
            class="control-container-btn"
            @click="leftPanelDisplay('hide')"
          ></div>
        </div>
        <div class="contant-container">
          <div class="contant-container-innerbox">
            <el-tree
              :data="modelData"
              :props="defaultProps"
              default-expand-all
              @check-change="handleCheckChange"
              node-key="id"
              ref="tree"
              :filter-node-method="filterNode"
            >
              <span class="custom-tree-node" slot-scope="{ node }">
                <template
                  v-if="
                    node.level === 3 ||
                    node.parent.label === '所有图层' ||
                    node.parent.label === '我的模型'
                  "
                >
                  <el-checkbox v-model="node.checked">{{
                    node.label
                  }}</el-checkbox>
                  <span style="position: relative; left: 30px">
                    <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>
                </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="control-container">
          <div @click="rightPanelDisplay('hide')"></div>
        </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="i in originalData[key]"
                  :key="i.id"
                  @click="listItemClick('default', i)"
                >
                  {{ i.name }}
                </div>
              </el-collapse-item>

              <el-collapse-item title="我的标记" name="myLabel">
                <div
                  class="panel-list-item"
                  v-for="item in rightLabelData"
                  :key="item.id"
                  @click="listItemClick('new', item)"
                >
                  {{ item.name }}
                </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 publicFun from "@/utils/publicFunction.js";
import { treeModel, defaultLayers } from "@/config/common";
import AttributePopup from "@/components/popup/AttributePopup.vue";
import LawPopup from "@/components/popup/LawPopup.vue";
import { get } from "@/utils/request";
export default {
  name: "ComprehensiveAnalysis",
  components: {
    MenuCard,
    Legend,
    AttributePopup,
    LawPopup,
  },
  data() {
    return {
      legendShow: false,
      tableType: "normal",
      tableData: [],
      legendHeight: "0",
      boxWidth: "600",
      boxHeight: "600",
      attrTableShow: false,
      activeNames: ["myLabel"],
      rightPanelTitle: "",
      rightPanelDataMap: new Map(),
      // rightLabelDataMap: new Map(),
      originalData: {},
      rightLabelData: [
        {
          id: publicFun.buildGuid(),
          name: "疑点1",
        },
        {
          id: publicFun.buildGuid(),
          name: "疑点2",
        },
        {
          id: publicFun.buildGuid(),
          name: "疑点3",
        },
        {
          id: publicFun.buildGuid(),
          name: "疑点4",
        },
        {
          id: publicFun.buildGuid(),
          name: "疑点5",
        },
        {
          id: publicFun.buildGuid(),
          name: "疑点6",
        },
        {
          id: publicFun.buildGuid(),
          name: "疑点7",
        },
      ],
      // searchInput: "",,
      showLeftBox: true,
      showRightBox: true,
      leftBoxBtn: false,
      rightBoxBtn: false,
      modelData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      legendIcon: [],
      legendTitle: [],
      // 我的模型相关数据
      myModel: null,
      filterText: "",
      myMap: new Map(),
    };
  },
  computed: {
    getCustomModel() {
      return this.$store.state.customModelsArr;
    },
  },
  watch: {
    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);
    },
    myModel(val) {
      // console.log(val, "监听综合分析中的我的模型");
    },
    getCustomModel: {
      handler(val) {
        console.log(val, "目前存在的自定义模型");
        let myModelRef = this.$refs.tree.data[2];
        if (myModelRef.label === "我的模型") {
          this.$refs.tree.data[2].children = val.map((ele) => {
            return {
              id: publicFun.buildGuid(),
              label: ele.name,
              data: ele.data,
            };
          });
          console.log(myModelRef.children, "最新的数据");
        }
      },
      deep: true,
    },
  },
  created() {
    this.modelData = [];
    // 分别对应1、2、3级节点
    this.modelData = treeModel.map((item1) => {
      if (item1.type === "我的模型") {
        this.myModel = item1;
      }
      return {
        id: item1.id,
        label: item1.type,
        children: item1.children.map((item2) => {
          return {
            id: item2.id,
            label: item2.type,
            children: item2.children.map((item3) => {
              this.rightPanelDataMap.set(item3.type, item3.children);
              return {
                id: item3.id,
                label: item3.type,
                children: [],
                checked: false,
              };
            }),
          };
        }),
      };
    });
  },
  mounted() {},
  methods: {
    // 回退事件
    backEvent() {
      console.log("综合分析回退事件");
    },
    // 左侧面板的显示与隐藏
    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;
      }
    },
    // 节点过滤事件
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleUpdate(node) {
      // console.log(node.data.data, "涉及的图层");
      // console.log(node.data.label);
      // console.log(node.data.id);
      this.$bus.$emit("updateModel", node);
    },
    handleDelete(node) {
      console.log(node, "删除节点");
    },
    // 节点change事件
    handleCheckChange(data, checked) {
      let guid = data.id;
      if (checked) {
        this.showRightBox = true;
        this.rightPanelTitle = data.label;
        this.originalData[data.label] = this.rightPanelDataMap.get(data.label);
        // 激活当前展开面板
        this.activeNames = ["myLabel", data.label];

        // 选中所有图层
        if (guid.indexOf("defaultLayer") > -1) {
          // 渲染当前模块下的面图层
          let cid = defaultLayers[data.label].cid;
          let color = defaultLayers[data.label].color;
          get(`./static/json/${cid}.json`).then((geoJson) => {
            map2DViewer.polygons[`${cid}_layer`] = [];

            this.originalData[data.label] = geoJson.map((v, index) => {
              return {
                id: publicFun.buildGuid("abnormal"),
                name: v.properties["异常"] + "_" + index,
                geometry: v.geometry,
                properties: v.properties,
              };
            });
            console.log(this.originalData[data.label], "label");

            this.activeNames = ["myLabel", data.label];

            // 地图定位
            let firstPolygon = JSON.parse(JSON.stringify(geoJson[0]));
            let coordinates = firstPolygon.geometry.coordinates[0][0][0];
            this.$store.state.mapMethodsCollection
              .get("RENDER")
              .setView(coordinates, 16);

            this.$store.state.mapMethodsCollection
              .get("RENDER")
              .addPolygonLayer(geoJson, cid, color);
          });
        }
      } else {
        // 设置右侧折叠面板item数量
        delete this.originalData[data.label];
        // 只激活我的标记
        this.activeNames = ["myLabel"];

        // 目前仅针对所有图层栏的默认图层
        if (guid.indexOf("defaultLayer") > -1) {
          let layer = `${defaultLayers[data.label].cid}_layer`;
          this.$store.state.mapMethodsCollection
            .get("RENDER")
            .deletePolygonLayer(layer);
          delete map2DViewer.polygons[layer];
        }
      }
      this.legendTitle = Object.keys(this.originalData).map((v) => {
        return { name: v, info: v };
      });
      this.legendIcon = this.legendTitle.map((v) => {
        let color = publicFun.getRandomColor();
        return {
          background: "transparent",
          border: `1px solid ${color}`,
        };
      });
    },
    listItemClick(type, data) {
      let coord = data.geometry.coordinates[0][0][0];
      this.$store.state.mapMethodsCollection.get("RENDER").setView(coord, 16);
      this.tableData = [];
      // data
      // id: "default_1669007689253APblgwSrDZlV1kSFim";
      // name: "疑点1";
      this.attrTableShow = true;
      if (type === "default") {
        this.tableType = "normal";
        this.boxWidth = "600";
        this.boxHeight = "200";
        console.log(data, "defaultTable");
        this.tableData.push({
          version: data.properties["版本"],
          nature: data.properties["性质"],
          area: data.properties["面积"],
          long: data.properties["周长"] || "--",
        });
        // this.tableData = data.map((v) => {
        //   return {
        //     version:v.properties['版本'],
        //     nature:v.properties['性质'],
        //     area:v.properties['面积'],
        //     long:v.properties['周长'] || "--"
        //   };
        // });
        console.log(this.tableData);
      }
      if (type === "new") {
        this.tableType = "personal";
        this.boxWidth = "300";
        this.boxHeight = "300";
        // console.log(data, "newTable");
      }
    },
    closeEvent() {
      this.attrTableShow = false;
    },
  },
};
</script>
<style lang="less" scoped>
@commonBorderColor: #00aaff;
.comprehensive-analysis {
  .popup-style {
    position: absolute;
    top: 15%;
    left: 33%;
    // pointer-events: auto;
    z-index: 2;
  }
  .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;
    }
  }

  &-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;
    }
  }
  &-toolbar {
    width: 340px;
    height: 50px;
    line-height: 28px;
    color: #fff;
    border-radius: 3px;
    position: absolute;
    right: 60px;
    top: 8px;
    pointer-events: auto;

    .layer-display {
      width: 40px;
      height: 40px;
      background: url("../assets/map/display.png") no-repeat center;
      position: absolute;
      bottom: 0;
      left: 0;
      cursor: pointer;
      &.display-true {
        background: url("../assets/map/display_true.png") no-repeat center;
      }
    }

    .layers-control-icon {
      width: 44px;
      height: 32px;
      background: url("../assets/map/layer_default.png") no-repeat center;
      position: absolute;
      bottom: 4px;
      left: 40px;
      cursor: pointer;
      &.control-true {
        background: url("../assets/map/layer_selected.png") no-repeat center;
      }
    }
    .searchbox {
      width: 245px;
      height: 40px;
      position: absolute;
      bottom: 2px;
      right: 0;
    }
    .layercontrol-container {
      position: absolute;
      width: 288px;
      height: 190px;
      left: -200px;
      bottom: -200px;
      border: 1px solid @commonBorderColor;
      background: rgba(0, 170, 255, 0.2);

      .layer-control-item {
        width: 100%;
        height: 30px;
        display: flex;
        .left {
          width: 20%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-right: 1px solid @commonBorderColor;
          border-bottom: 1px solid @commonBorderColor;
          &-eye {
            width: 80%;
            height: 80%;
            background: url("../assets/map/eye1.png") no-repeat center;
            cursor: pointer;
            .open {
              background: url("../assets/map/eye2.png") no-repeat center;
            }
          }
        }
        .right {
          width: 80%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          border-bottom: 1px solid @commonBorderColor;
          &-line {
            width: 3%;
            height: 90%;
            border-right: 7px solid red;
          }
          &-text {
            width: 50%;
            height: 90%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
          }
        }
      }
    }
  }
  &-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;
  }
  /* 左边树状面板 */
  &-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;
    .control-container {
      width: 100%;
      height: 8%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      position: relative;
      &-btn {
        width: 30px;
        height: 30px;
        background: url("../assets/image/close.png") no-repeat center;
        position: absolute;
        top: 3px;
        right: 3px;
        cursor: pointer;
      }
      &-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%;
          }
        }
      }
    }
  }
  &-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;
      }
    }
  }
  /* 右面板 -- 显示标记疑点 */
  &-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;
    .control-container {
      width: 100%;
      height: 5%;
      position: relative;
      & > div {
        width: 30px;
        height: 30px;
        background: url("../assets/image/close.png") no-repeat center;
        position: absolute;
        top: 3px;
        right: 3px;
        cursor: pointer;
      }
    }
    .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 {
          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;
        }
      }
    }
  }

  /* 侧边栏收缩动画效果 */
  /* 左边 */
  .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>