real3d-portalsite/src/views/siteselection/components/yxyzPop.vue

<template>
  <div class="dialog">
    <el-dialog
      title="选址因子设置"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <el-row>
        <el-col :span="6">
          <div>可选因子</div>
          <el-scrollbar class="left-tree">
            <el-tree
              :data="options"
              :props="defaultProps"
              highlight-current
              show-checkbox
              node-key="value"
              ref="tree"
            ></el-tree>
          </el-scrollbar>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg_purple">
            <el-button
              icon="el-icon-d-arrow-right"
              @click="turnLeftToRight"
            ></el-button>
            <el-button
              icon="el-icon-d-arrow-left"
              @click="turnRightToLeft"
            ></el-button>
          </div>
        </el-col>
        <el-col :span="16">
          <div>已选因子</div>
          <el-table
            :data="dialogData"
            border
            class="right-table scroll-style"
            size="small"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column prop="name" label="因子名称"> </el-table-column>
            <el-table-column prop="condition" label="条件" width="150">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.condition"
                  placeholder="请选择"
                  class="input-style"
                >
                  <el-option
                    v-for="item in conditionList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="value" label="约束值(m)" width="120">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.value"
                  placeholder="距离"
                  class="input-style font-14"
                  type="number"
                  :disabled="!scope.row.type"
                ></el-input>
                <!-- :disabled="scope.row.condition == 'F'" -->
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { GetFxyzList } from "../../../api/ghss/ghxz.js";
export default {
  components: {},
  props: {
    tableData: {
      type: Array,
    },
  },

  data() {
    return {
      defaultProps: {
        children: "children",
        label: "yxyzmc",
      },
      dialogVisible: false,
      options: [
        // {
        //   value: "控制线",
        //   label: "规划控制线",
        //   disabled: false,
        //   children: [],
        // },
        // {
        //   value: "专项规划",
        //   label: "专项规划",
        //   disabled: false,
        //   children: [],
        // },
        // {
        //   value: "基础设施",
        //   label: "兴趣点",
        //   disabled: false,
        //   children: [],
        // },
      ],
      kxyzList: [
        {
          bsm: "BWG",
          yxyzmc: "博物馆",
          level: 1,
          parent_bsm: "GGFWSS",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "CZKFBJ",
          yxyzmc: "城镇开发边界",
          level: 1,
          parent_bsm: "DXGK",
          has_yxz: false,
          spatial_type: "contain",
        },
        {
          bsm: "DL",
          yxyzmc: "电力",
          level: 2,
          parent_bsm: "GX",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "DX",
          yxyzmc: "电信",
          level: 2,
          parent_bsm: "GX",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "DXGK",
          yxyzmc: "底线管控",
          level: 0,
          parent_bsm: null,
          has_yxz: null,
          spatial_type: null,
        },
        {
          bsm: "GGFWSS",
          yxyzmc: "公共服务设施",
          level: 0,
          parent_bsm: null,
          has_yxz: null,
          spatial_type: null,
        },
        {
          bsm: "GL",
          yxyzmc: "公路",
          level: 2,
          parent_bsm: "JT",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "GS",
          yxyzmc: "供水",
          level: 2,
          parent_bsm: "GX",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "GX",
          yxyzmc: "管线",
          level: 1,
          parent_bsm: "SZSS",
          has_yxz: null,
          spatial_type: null,
        },
        {
          bsm: "GY",
          yxyzmc: "公园",
          level: 1,
          parent_bsm: "GGFWSS",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "JT",
          yxyzmc: "交通",
          level: 1,
          parent_bsm: "SZSS",
          has_yxz: null,
          spatial_type: null,
        },
        {
          bsm: "JYZ",
          yxyzmc: "加油站",
          level: 2,
          parent_bsm: "JT",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "LD",
          yxyzmc: "绿地",
          level: 1,
          parent_bsm: "GGFWSS",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "LJCLSS",
          yxyzmc: "垃圾处理设施",
          level: 2,
          parent_bsm: "QT",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "PS",
          yxyzmc: "排水",
          level: 2,
          parent_bsm: "GX",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "QT",
          yxyzmc: "其他",
          level: 1,
          parent_bsm: "SZSS",
          has_yxz: null,
          spatial_type: null,
        },
        {
          bsm: "RQ",
          yxyzmc: "燃气",
          level: 2,
          parent_bsm: "GX",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "STBHHX",
          yxyzmc: "生态保护红线",
          level: 1,
          parent_bsm: "DXGK",
          has_yxz: false,
          spatial_type: "contain",
        },
        {
          bsm: "SY",
          yxyzmc: "输油",
          level: 2,
          parent_bsm: "GX",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "SZSS",
          yxyzmc: "市政设施",
          level: 0,
          parent_bsm: null,
          has_yxz: null,
          spatial_type: null,
        },
        {
          bsm: "TCC",
          yxyzmc: "停车场",
          level: 2,
          parent_bsm: "JT",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "TL",
          yxyzmc: "铁路",
          level: 2,
          parent_bsm: "JT",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "TSG",
          yxyzmc: "图书馆",
          level: 1,
          parent_bsm: "GGFWSS",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "TYG",
          yxyzmc: "体育馆",
          level: 1,
          parent_bsm: "GGFWSS",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "WSCLC",
          yxyzmc: "污水处理厂",
          level: 2,
          parent_bsm: "QT",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "XX",
          yxyzmc: "学校",
          level: 1,
          parent_bsm: "GGFWSS",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "YJJBNT",
          yxyzmc: "永久基本农田",
          level: 1,
          parent_bsm: "DXGK",
          has_yxz: false,
          spatial_type: "identity",
        },
        {
          bsm: "YY",
          yxyzmc: "医院",
          level: 1,
          parent_bsm: "GGFWSS",
          has_yxz: true,
          spatial_type: "identity",
        },
        {
          bsm: "ZRWHBHQ",
          yxyzmc: "自然文化保护区",
          level: 1,
          parent_bsm: "DXGK",
          has_yxz: false,
          spatial_type: "identity",
        },
        {
          bsm: "ZYCRK",
          yxyzmc: "主要出入口",
          level: 2,
          parent_bsm: "JT",
          has_yxz: true,
          spatial_type: "identity",
        },
      ],

      tempList: [
        {
          bsm: "CZKFBJ",
          yxyzmc: "城镇开发边界",
          yztj: "C",
          yxz: null,
          lx: "FZXZ01",
          sjlx: "SDE",
          sjy: "SDE.CZKFBJ_150502_202212",
          gltj: null,
          fxjg_c: "地块位于城镇开发边界以内",
          fxjg_n: "地块位于城镇开发边界以外",
        },
        {
          bsm: "YJJBNT",
          yxyzmc: "永久基本农田",
          yztj: "N",
          yxz: null,
          lx: "FZXZ01",
          sjlx: "SDE",
          sjy: "SDE.YJJBNTBHTB_150502_202212",
          gltj: null,
          fxjg_c: "地块位于永久基本农田以内",
          fxjg_n: "地块未压占永久基本农田",
        },
        {
          bsm: "STBHHX",
          yxyzmc: "生态保护红线",
          yztj: "N",
          yxz: null,
          lx: "FZXZ01",
          sjlx: "SDE",
          sjy: "SDE.STBHHX_150502_202212",
          gltj: null,
          fxjg_c: "地块位于生态保护红线以内",
          fxjg_n: "地块未压占生态保护红线以内",
        },
        {
          bsm: "SCHOOL",
          yxyzmc: "学校",
          yztj: "N",
          yxz: null,
          lx: "FZXZ02",
          sjlx: "SDE",
          sjy: "BASEPORDOS.Ordos_V_BUCP",
          gltj: "GB = '340101'",
          fxjg_c: "地块{YXZ}米范围内包含{COUNT}座学校，分别是{[YZ.NAME]}；",
          fxjg_n:
            "地块{YXZ}米范围内不包含学校，距离最近的{YZ.NAME}直线距离约{DIST}米；",
        },
        {
          bsm: "HOSPITAL",
          yxyzmc: "医院",
          yztj: "N",
          yxz: null,
          lx: "FZXZ02",
          sjlx: "SDE",
          sjy: "BASEPORDOS.Ordos_V_BUCP",
          gltj: "GB = '340102'",
          fxjg_c: "地块{YXZ}米范围内包含{COUNT}座医院，分别是{[YZ.NAME]}；",
          fxjg_n:
            "地块{YXZ}米范围内不包含医院，距离最近的{YZ.NAME}直线距离约{DIST}米；",
        },
        {
          bsm: "PARK",
          yxyzmc: "公园",
          yztj: "N",
          yxz: null,
          lx: "FZXZ02",
          sjlx: "SDE",
          sjy: null,
          gltj: null,
          fxjg_c: null,
          fxjg_n: null,
        },
        {
          bsm: "JZXQ",
          yxyzmc: "居住小区",
          yztj: "N",
          yxz: null,
          lx: "FZXZ02",
          sjlx: "SDE",
          sjy: null,
          gltj: null,
          fxjg_c: null,
          fxjg_n: null,
        },
        {
          bsm: "KCZYKZX",
          yxyzmc: "矿产资源控制线",
          yztj: "N",
          yxz: null,
          lx: "FZXZ01",
          sjlx: "SDE",
          sjy: "KJGH_QY.KCZYKZX",
          gltj: null,
          fxjg_c: null,
          fxjg_n: null,
        },
        {
          bsm: "LSWHBHX",
          yxyzmc: "历史文化保护线",
          yztj: "N",
          yxz: null,
          lx: "FZXZ01",
          sjlx: "SDE",
          sjy: "KJGH_QY.LSWHBHX",
          gltj: null,
          fxjg_c: null,
          fxjg_n: null,
        },
        {
          bsm: "JD",
          yxyzmc: "景点",
          yztj: "N",
          yxz: null,
          lx: "FZXZ02",
          sjlx: "SDE",
          sjy: null,
          gltj: null,
          fxjg_c: null,
          fxjg_n: null,
        },
        {
          bsm: "ZXCQCSLX",
          yxyzmc: "中心城区城市蓝线",
          yztj: "N",
          yxz: null,
          lx: "FZXZ01",
          sjlx: "SDE",
          sjy: "KJGH_QY.ZXCQCSLX",
          gltj: null,
          fxjg_c: null,
          fxjg_n: null,
        },
        {
          bsm: "ZXCQCSLVX",
          yxyzmc: "中心城区城市绿线",
          yztj: "N",
          yxz: null,
          lx: "FZXZ01",
          sjlx: "SDE",
          sjy: "KJGH_QY.ZXCQCSLVX",
          gltj: null,
          fxjg_c: null,
          fxjg_n: null,
        },
        {
          bsm: "ZXCQCSZX",
          yxyzmc: "中心城区城市紫线",
          yztj: "N",
          yxz: null,
          lx: "FZXZ01",
          sjlx: "SDE",
          sjy: "KJGH_QY.ZXCQCSZX",
          gltj: null,
          fxjg_c: null,
          fxjg_n: null,
        },
        {
          bsm: "ZXCQCSHX",
          yxyzmc: "中心城区城市黄线",
          yztj: "N",
          yxz: null,
          lx: "FZXZ01",
          sjlx: "SDE",
          sjy: "KJGH_QY.ZXCQCSHX",
          gltj: null,
          fxjg_c: null,
          fxjg_n: null,
        },
      ],
      optionsTemp: [],
      selectdialogData: [],
      dialogData: [],
      conditionList: [
        { label: "范围内", value: "identity" },
        { label: "范围外", value: "n_identity" },
        { label: "距离包含", value: "contain" },
        { label: "距离不包含", value: "n_contain" },
        // { label: "分析", value: "F" },contain,n_contain，相交/不相交：:identity,n_identity
      ],
    };
  },
  mounted() {
    // this.getList();
    this.GetFxyzList();
    this.getTreeList();
  },
  methods: {
    close() {
      this.dialogVisible = false;
    },
    GetFxyzList() {
      GetFxyzList().then((res) => {
        this.kxyzList = res.data;
      });
    },

    getTreeList() {
      function arrayToTreeLoop(nodes) {
        const map = {};
        const tree = [];
        for (const node of nodes) {
          map[node.bsm] = { ...node, children: [] };
        }
        for (const node of Object.values(map)) {
          if (node.parent_bsm === null) {
            tree.push(node);
          } else {
            map[node.parent_bsm].children.push(node);
          }
        }
        return tree;
      }

      this.options = arrayToTreeLoop(this.kxyzList);
      this.optionsTemp = JSON.parse(JSON.stringify(this.options));
    },

    getList() {
      // yzlist().then((res) => {
      //   if (res.success) {
      this.tempList.forEach((item) => {
        var num = item.lx == "FZXZ01" ? 0 : item.lx == "FZXZ02" ? 1 : 2;
        this.options[num].children.push({
          type: num,
          value: item.bsm,
          label: item.yxyzmc,
          sjlx: item.sjlx,
          yztj: item.yztj,
          sjy: item.sjy,
        });
      });
      this.optionsTemp = JSON.parse(JSON.stringify(this.options));
      // }
      // });
    },

    setTable(selectdata) {
      let tableList = [];
      selectdata.forEach((item) => {
        tableList.push({
          // name: item.label,
          // condition: item.yztj,
          // id: item.value,
          // type: item.type,
          // value: "",
          // sjy: item.sjy,
          // sjlx: item.sjlx,
          id: item.bsm,
          name: item.yxyzmc,
          condition: item.spatial_type,
          value: "",
          sjy: item.has_yxz,
          sjlx: item.spatial_type,
        });
      });
      tableList.forEach((item) => {
        this.resetTree(this.options, item);
      });
      this.removeChildrenZero(this.options);
      return tableList;
    },
    resetTree(data, item1) {
      data.forEach((item, index) => {
        if (item.bsm == item1.id) {
          data.splice(index, 1);
        }
        if (item.children != undefined && item.children.length != 0) {
          this.resetTree(item.children, item1);
        }
      });
    },

    removeChildrenZero(data) {
      data.forEach((item, index) => {
        if (item.children != undefined && item.children.length == 0) {
          if (item.disabled != undefined) {
            item.disabled = true;
          }
        }
        if (item.children != undefined && item.children.length > 0) {
          this.removeChildrenZero(item.children);
        }
      });
    },

    turnLeftToRight() {
      if (this.$refs.tree.getCheckedNodes().length == 0) {
        this.$message.warning("请勾选可选因子");
        return false;
      }

      let list = this.$refs.tree.getCheckedNodes().filter((item) => {
        return item.children == undefined || item.children.length == 0;
      });
      list = this.setTable(list);
      this.dialogData = [...this.dialogData, ...list];
    },
    turnRightToLeft() {
      if (this.selectdialogData.length == 0) {
        this.$message.warning("请勾选已选因子");
        return false;
      }
      let list = this.dialogData;
      this.selectdialogData.forEach((item) => {
        list = list.filter((item1) => {
          return item.id != item1.id;
        });
      });
      this.dialogData = list;

      this.options = JSON.parse(JSON.stringify(this.optionsTemp));
      list.forEach((item) => {
        this.resetTree(this.options, item);
      });
    },
    handleSelectionChange(val) {
      this.selectdialogData = val;
    },
    submit() {
      var sign = true;
      this.dialogData.forEach((item) => {
        item.type && item.value == "" && (sign = false);
      });
      if (sign) {
        // parent.emit("update:tableData", this.dialogData);
        // parent.emit("update:dialogVisible", false);
        this.$parent.tableData = this.dialogData;
        this.dialogVisible = false;
      } else {
        this.$message.warning("请将信息补充完整！");
      }
    },
    setData(data) {
      data.filter((item) => {
        this.clearitem(item);
      });
    },
    clearitem(item) {
      this.options[0].children = this.options[0].children.filter((item1) => {
        return item.id != item1.value;
      });
      this.options[1].children = this.options[1].children.filter((item1) => {
        return item.id != item1.value;
      });
      this.options[0].children.length == 0
        ? (this.options[0].disabled = true)
        : (this.options[0].disabled = false);
      this.options[1].children.length == 0
        ? (this.options[1].disabled = true)
        : (this.options[1].disabled = false);
    },
  },
  watch: {
    dialogVisible(oldVal, newVal) {
      if (this.tableData.length == []) {
        // 重置时，树的数据恢复
        this.dialogData = [];
        this.options = JSON.parse(JSON.stringify(this.optionsTemp));
        this.selectdialogData = [];
      } else {
        // 选择模板时，生成新的树
        this.dialogData = JSON.parse(JSON.stringify(this.tableData));
        this.setData(this.dialogData);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.hgxsc {
  height: 100%;
}

.dialog {
  .left-tree {
    height: 400px;
    overflow-y: auto;
    margin-top: 10px;
    border: 1px solid #ddd;
    .el-tree {
      margin-top: 10px;
      .el-tree-node__content {
        height: 35px;
        line-height: 35px;
      }
    }
  }
  /deep/.el-dialog__body {
    padding: 10px 30px;
  }

  .bg_purple {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    .el-button + .el-button {
      margin-left: 0;
      margin-top: 20px;
    }
  }
  .right-table {
    margin-top: 10px;
    height: 400px;
    /deep/ .el-table__inner-wrapper {
      height: 100%;
    }
    /deep/.el-table__header-wrapper,
    .el-table__header {
      height: 40px;
    }
    /deep/.el-table__body-wrapper {
      height: calc(100% - 40px);
      overflow-y: auto;
    }
  }
}
</style>