穿梭框组件的更改

src/views/siteselection/components/fzxz.vue

@@ -4,13 +4,7 @@
       选址范围
       <span>导入</span>
       <span>绘制</span>
-      <!-- <div>选址范围</div>
-      <div>
-        <span>导入</span>
-        <span>绘制</span>
-      </div> -->
     </div>
-    <!-- <range :keys="['hx', 'sc', 'zbd']" ref="range" /> -->
     <el-form :model="ruleForm" label-width="100px" :rules="rules">
       <div class="block-title">基本信息</div>
       <el-form-item label="项目名称:" prop="xmmc">
@@ -72,22 +66,14 @@
     <div class="block-title">
       影响因子
       <span @click="yzpz">配置</span>
-      <!-- <div
-        v-show="$store.getters.name == 'admin'"
-        class="posi-abs pointer"
-        style="right: 0; top: 1px; color: #409eff"
-        @click="updateScx"
-      >
-        关联资源目录
-      </div> -->
     </div>
     <div class="treeDiv">
       <el-table :data="tableData" border style="width: 100%">
-        <el-table-column prop="yzmc" label="因子名称" show-overflow-tooltip>
+        <el-table-column prop="name" label="因子名称" show-overflow-tooltip>
         </el-table-column>
-        <el-table-column prop="tj" label="条件" show-overflow-tooltip>
+        <el-table-column prop="sjy" label="条件" show-overflow-tooltip>
         </el-table-column>
-        <el-table-column prop="val" label="值" show-overflow-tooltip>
+        <el-table-column prop="value" label="值" show-overflow-tooltip>
         </el-table-column>
       </el-table>
     </div>
@@ -97,64 +83,16 @@
         检查</el-button
       >
     </div>
-    <!-- 影响因子弹窗 -->
-    <el-dialog
-      title="选址因子设置"
-      :visible.sync="dialogVisible"
-      width="50%"
-      :before-close="handleClose"
-      :modal-append-to-body="false"
-      :close-on-click-modal="false"
-    >
-      <!-- <span>这是一段信息</span> -->
-      <div style="text-align: center">
-        <el-transfer
-          style="text-align: left; display: inline-block"
-          v-model="value"
-
-          :left-default-checked="[2, 3]"
-          :right-default-checked="[1]"
-          :titles="['Source', 'Target']"
-          :button-texts="['到左边', '到右边']"
-          :format="{
-            noChecked: '${total}',
-            hasChecked: '${checked}/${total}',
-          }"
-          :props="{
-            key: 'bsm',
-            label: 'yxyzmc',
-          }"
-          @change="handleChange"
-          :data="kxyzList"
-        >
-
-          <el-button class="transfer-footer" slot="left-footer" size="small"
-            >操作</el-button
-          >
-          <el-button class="transfer-footer" slot="right-footer" size="small"
-            >操作</el-button
-          >
-        </el-transfer>
-      </div>
-
-      <!-- <div>
-        <transfer v-if="dialogVisible"></transfer>
-      </div> -->
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="dialogVisible = false"
-          >确 定</el-button
-        >
-      </span>
-    </el-dialog>
+    <yxyzPop :dialogVisible="dialogVisible" :tableData="tableData"></yxyzPop>
   </div>
 </template>
 
 <script>
-import transfer from "./transfer.vue"; ///mapview/range
+import yxyzPop from "./yxyzPop.vue"; ///mapview/range
+
 export default {
   components: {
-    transfer,
+    yxyzPop,
   },
   props: {
     activeTabs: {
@@ -453,12 +391,6 @@ export default {
     yzpz() {
       this.dialogVisible = true;
     },
-    handleClose() {
-      this.dialogVisible = false;
-    },
-    handleChange(value, direction, movedKeys) {
-      console.log(value, direction, movedKeys);
-    },
   },
 };
 </script>

src/views/siteselection/components/transfer.vue

@@ -1,423 +0,0 @@
-<template>
-  <!-- 自定义树形穿梭框组件、理论上左右均可选择是否为树形结构，目前固定为左侧树形、右侧无层级结构 -->
-  <div class="tree-transfer">11111111111111111111</div>
-</template>
-
-<script>
-export default {
-  components: {},
-  props: {},
-  data() {
-    return {
-      yuansiData: [],
-      dataLeft: [],
-      dataRight: [],
-      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",
-        },
-      ],
-      defaultProps: {
-        children: "children",
-        label: "yxyzmc",
-      },
-    };
-  },
-  //   mounted() {},
-  mounted() {
-    // this.dataLeft = this.datas;
-    // let aaa = []
-    // this.defaultProps.forEach(el => {
-
-    // });
-
-    // function flatToTree(flatData, level = 0) {
-    //   const tree = [];
-
-    //   // 遍历flatData，找到level对应的子节点
-    //   for (const node of flatData) {
-    //     if (node.level === level) {
-    //       // 递归查找子节点
-    //       const children = flatToTree(flatData, node.level);
-
-    //       // 如果有子节点，则加入children属性中
-    //       if (children.length > 0) {
-    //         node.children = children;
-    //       }
-
-    //       // 加入tree中
-    //       tree.push(node);
-    //     }
-    //   }
-
-    //   return tree;
-    // }
-
-    // const treeData = flatToTree(this.kxyzList);
-    // console.log(treeData); // 输出转换得到的Tree数据
-
-    // 定义一个新数组
-    var chapterTree = [];
-    this.kxyzList.forEach((c) => {
-      // 给扁平数据数组的每一个内容项加上一个children属性,属性值为[]
-      c.children = [];
-      if (c.level == 0) {
-        // 把没有父级的内容项添加到chapterTree新数组中，定义所有的初级父级
-        // 之后，往这些初级父级的children属性中添加内容项，见下面的else判断
-        chapterTree.push(c);
-      } else {
-        // 通过当前遍历的每一个内容项的pid属性,在flatArray数组中，通过level属性寻找其父级
-        const theparent = this.kxyzList.find(function (item) {
-          return item.bsm === c.parent_bsm;
-        });
-        console.log(theparent,'00000');
-        // 把当前遍历的内容项，添加到父级的children属性中去
-        theparent.children.push(c);
-      }
-    });
-
-    console.log(chapterTree);
-
-    // this.yuansiData = JSON.parse(JSON.stringify(this.datas));
-  },
-  methods: {
-    add() {
-      // 定义一个递归过滤的方法，用来删掉父级中给的元素
-      // 获取所有选中的项并且去掉父级
-      let list = this.$refs.treeLeft.getCheckedNodes();
-      // 走原始数据中删掉已经选择的
-      // 1.父级的删除
-      const parList = list.filter((item) => {
-        return item.parameterInfoList;
-      });
-      for (let item1 of parList) {
-        let index = this.dataLeft.findIndex((item2) => {
-          return item2.id == item1.id;
-        });
-        if (index >= 0) {
-          this.dataLeft.splice(index, 1);
-        }
-      }
-      // 2.子级的删除
-      list = list.filter((item) => {
-        return !item.parameterInfoList;
-      });
-      // 这里做了三重循环，如果有可能需要对其进行优化
-      for (let item of list) {
-        for (let ind in this.dataLeft) {
-          if (this.dataLeft[ind].parameterInfoList.length) {
-            let index = this.dataLeft[ind].parameterInfoList.findIndex(
-              (item2) => {
-                return item2.id == item.id;
-              }
-            );
-            if (index >= 0) {
-              this.dataLeft[ind].parameterInfoList.splice(index, 1);
-            }
-          }
-        }
-      }
-      this.$refs.treeLeft.setCheckedNodes([]);
-      // 将选择的项添加到右侧
-      this.dataRight.push(...list);
-    },
-    remove() {
-      // 从右侧移除时的方法
-      // 1.从右侧删除选中的数据
-      let list = this.$refs.treeRight.getCheckedNodes();
-      for (let item of list) {
-        let index = this.dataRight.findIndex((item2) => {
-          return item.id == item2.id;
-        });
-        if (index >= 0) {
-          this.dataRight.splice(index, 1);
-        }
-      }
-      // 2.把右侧删除的数据添加给左侧,但是要注意父级的问题
-      this.dataLeft = JSON.parse(JSON.stringify(this.yuansiData));
-      for (let index in this.dataLeft) {
-        // 如果有子级去删除子级
-        for (let item of this.dataRight) {
-          let ind = this.dataLeft[index].parameterInfoList.findIndex(
-            (item2) => {
-              return item2.id == item.id;
-            }
-          );
-          if (ind >= 0) {
-            this.dataLeft[index].parameterInfoList.splice(ind, 1);
-          }
-        }
-        this.dataLeft = this.dataLeft.filter((item2) => {
-          return item2.parameterInfoList.length != 0;
-        });
-      }
-    },
-    getResult() {
-      return this.dataRight;
-    },
-  },
-};
-</script>
-
-
-<style scoped lang="scss">
-.tree-transfer {
-  display: flex;
-  min-height: 250px;
-  .tree-transfer-left {
-    min-width: 200px;
-    border: 1px #e5e5e5 solid;
-    border-radius: 10px;
-    padding: 10px;
-  }
-  .tree-transfer-middle {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-width: 120px;
-  }
-  .tree-transfer-right {
-    min-width: 200px;
-    border: 1px #e5e5e5 solid;
-    border-radius: 10px;
-    padding: 10px;
-  }
-}
-</style>

src/views/siteselection/components/yxyzPop.vue

@@ -0,0 +1,763 @@
+<template>
+  <div class="hgxsc">
+    <el-dialog
+      title="选址因子设置"
+      :visible.sync="dialogVisible"
+      width="50%"
+      :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"
+              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 padding-left-10 padding-right-10">
+            <el-button
+              icon="arrow-right"
+              @click="turnLeftToRight"
+              class="padding-left-10 padding-right-10 padding-top-0 padding-bottom-0"
+            ></el-button>
+            <el-button
+              icon="arrow-left"
+              @click="turnRightToLeft"
+              class="padding-left-10 padding-right-10 padding-top-0 padding-bottom-0"
+            ></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>
+export default {
+  components: {},
+  props: {
+    dialogVisible: {
+      type: Boolean,
+    },
+    tableData: {
+      type: Array,
+    },
+  },
+
+  data() {
+    return {
+      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: "C" },
+        { label: "范围外", value: "N" },
+        { label: "距离包含", value: "A" },
+        { label: "距离不包含", value: "B" },
+        { label: "分析", value: "F" },
+      ],
+    };
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    close() {
+      this.$parent.dialogVisible = false;
+    },
+    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,
+        });
+      });
+      console.log(this.options);
+      tableList.forEach((item) => {
+        this.resetTree(this.options, item);
+      });
+      this.removeChildrenZero(this.options);
+      return tableList;
+    },
+    resetTree(data, item1) {
+      console.log(data, item1);
+      data.forEach((item, index) => {
+        if (item.value == item1.id) {
+          data.splice(index, 1);
+        }
+        if (item.children != undefined) {
+          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;
+      });
+      console.log(list);
+      list = this.setTable(list);
+      this.dialogData = [...this.dialogData, ...list];
+      console.log(this.dialogData, "this.dialogData");
+    },
+    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() {
+      console.log(this.dialogData);
+      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.$parent.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;
+      }
+    }
+  }
+  ::v-deep(.el-dialog__body) {
+    padding: 10px 30px;
+  }
+
+  .bg-purple {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    .el-button + .el-button {
+      margin-left: 0;
+      margin-top: 20px;
+    }
+  }
+  .right-table {
+    margin-top: 10px;
+    height: 400px;
+    ::v-deep(.el-table__inner-wrapper) {
+      height: 100%;
+    }
+    ::v-deep(.el-table__header-wrapper),
+    ::v-deep(.el-table__header) {
+      height: 40px;
+    }
+    ::v-deep(.el-table__body-wrapper) {
+      height: calc(100% - 40px);
+      overflow-y: auto;
+    }
+  }
+}
+</style>