选址结果更新

src/views/complianceAnalysis/ghzc.scss

@@ -191,4 +191,24 @@
 // ie盒模型
 .box-sizing {
     box-sizing: border-box;
+}
+
+.site-title {
+    color: #fff;
+    padding-left: 10px;
+    font-size: 16px;
+    font-weight: bold;
+    span{
+        width: 70px;
+        height: 100%;
+        line-height: 1.7;
+        text-align: center;
+        border-radius: 5px;
+        display: inline-block;
+        padding: 0;
+        border: 1px solid #02A7F0;
+        float: right;
+        cursor: pointer;
+        margin-left: 30px;
+    }
 }

src/views/siteselection/components/fzxz.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="hgxsc">
-    <div class="block-title">
+    <div class="site-title">
       选址范围
       <span>导入</span>
       <span>绘制</span>
@@ -28,6 +28,21 @@
           placeholder="请输入建设单位"
         ></el-input>
       </el-form-item>
+      <el-form-item label="数据源:" prop="sjy">
+        <el-select
+          v-model="ruleForm.sjy"
+          placeholder="请选择数据源"
+          size="mini"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.fzbs"
+            :label="item.sjymc"
+            :value="item.sjymc"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
       <el-form-item label="用地类型:" prop="ydlx">
         <el-input
           v-model="ruleForm.ydlx"
@@ -45,25 +60,9 @@
         </el-col>
       </el-form-item>
 
-      <el-form-item label="数据源:" prop="sjy">
-        <el-select
-          v-model="ruleForm.sjy"
-          placeholder="请选择数据源"
-          size="mini"
-        >
-          <el-option
-            v-for="item in options"
-            :key="item.fzbs"
-            :label="item.sjymc"
-            :value="item.sjymc"
-          >
-          </el-option>
-          <!-- <el-option label="区域一" value="shanghai"></el-option>
-          <el-option label="区域二" value="beijing"></el-option> -->
-        </el-select>
-      </el-form-item>
+
     </el-form>
-    <div class="block-title">
+    <div class="site-title">
       影响因子
       <span @click="yzpz">配置</span>
     </div>
@@ -119,7 +118,7 @@ export default {
         ydlx: "",
         ydmjs: "", //用地面积开始
         ydmje: "", //用地面积结束
-        sjy: "", //数据源
+        sjy: "国土空间总体规划", //数据源
       },
       rules: {
         xmmc: [

src/views/siteselection/components/xzjg.vue

@@ -1,38 +1,107 @@
 <template>
-  <div class="hgxsc">
+  <div class="xzjg">
     <div>项目名称XXXXXX</div>
-    <div class="block-title">
-      意向地块
-      <span>导出报告</span>
+    <div class="box-sizing" style="height: 35%; width: 100%">
+      <div class="title site-title">
+        <!-- <span class="block-title"
+          >意向地块{{ bgList ? bgList.length : 0 }}）</span
+        > -->
+        意向地块（{{ bgList ? bgList.length : 0 }}）
+        <span>导出报告</span>
+      </div>
+      <el-scrollbar
+        class="height-100-50 max-width"
+        style="border: 1px solid #e8e8e8"
+      >
+        <el-collapse accordion v-model="activeNames">
+          <el-collapse-item
+            :name="'gb' + index1"
+            v-for="(item1, index1) in bgList"
+            :key="index1"
+          >
+            <template slot="title">
+              <!-- 地块编号B_P_123 -->
+              地块编号{{ item1.dlbm }} ({{ item1.tbmj.toFixed(0) }})
+              <span class="tools">
+                <i
+                  class="header-icon el-icon-place"
+                  @click="mapview(item1)"
+                ></i>
+                <i
+                  class="header-icon el-icon-delete"
+                  @click="deleteprogramme($event, item1)"
+                ></i>
+              </span>
+            </template>
+            <div class="collapseCon">
+              <p class="oneItem">
+                <span>{{ item1.dlmc }}</span>
+                <span>{{ item1.tbmj.toFixed(2) }}平方米</span>
+              </p>
+              <p>基准地标价:<span style="color: #02a7f0">77.44万元</span></p>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-scrollbar>
     </div>
-    <div class="dkContainer"></div>
-    <div class="block-title">备选地块</div>
-    <div class="bxContainer">
-      <!-- <div class="dkTitle">
-        <div class="biaoti">1.地块编号B_P_123</div>
-        <div class="tool">
-          <i class="el-icon-thumb"></i>
-          <i class="el-icon-circle-plus-outline"></i>
-        </div>
-      </div> -->
-      <el-collapse accordion>
-        <el-collapse-item>
-          <template slot="title">
-            地块编号B_P_123
-            <span class="tools">
-              <i class="header-icon el-icon-thumb"></i>
-              <i class="header-icon el-icon-circle-plus-outline"></i>
-            </span>
-          </template>
-          <div class="collapseCon">
-            <p class="oneItem">
-              <span>住宅用地</span>
-              <span>123.4平方米</span>
-            </p>
-            <p>基准地标价:<span style="color: #02a7f0">77.44万元</span></p>
-          </div>
-        </el-collapse-item>
-      </el-collapse>
+    <div class="box-sizing padding-bottom-60" style="height: 35%; width: 100%">
+      <div class="title height-50 flex-box align-center">
+        <span class="block-title"
+          >备选地块（{{ xzjgObj.items ? xzjgObj.items.length : 0 }}）</span
+        >
+      </div>
+      <el-scrollbar
+        class="height-100-50 max-width"
+        style="border: 1px solid #e8e8e8"
+      >
+        <el-collapse accordion v-model="activeNames">
+          <el-collapse-item
+            :name="index"
+            v-for="(item, index) in xzjgObj.items"
+            :key="item.bsm"
+          >
+            <template slot="title">
+              <!-- 地块编号B_P_123 -->
+              地块编号{{ item.dlbm }} ({{ item.tbmj.toFixed(0) }})
+              <span class="tools">
+                <i class="header-icon el-icon-place" @click="mapview(item)"></i>
+                <i
+                  class="header-icon el-icon-plus"
+                  @click="addprogramme($event, item)"
+                ></i>
+              </span>
+            </template>
+            <div class="collapseCon">
+              <p class="oneItem">
+                <span>{{ item.dlmc }}</span>
+                <span>{{ item.tbmj.toFixed(2) }}平方米</span>
+              </p>
+              <p>基准地标价:<span style="color: #02a7f0">77.44万元</span></p>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-scrollbar>
+    </div>
+
+    <div class="xz-btn flex-box" style="justify-content: space-between">
+      <div class="max-height flex-box align-center margin-left-22"></div>
+      <div class="max-height flex-box align-center">
+        <el-button round class="btn-style" @click="resetAll">重选</el-button>
+        <el-button
+          round
+          class="btn-style"
+          @click="downReport"
+          v-if="reportText == '查看报告'"
+          >下载报告</el-button
+        >
+        <el-button
+          type="primary"
+          round
+          class="btn-style margin-right-22"
+          @click="submit"
+          >{{ reportText }}</el-button
+        >
+      </div>
     </div>
   </div>
 </template>
@@ -40,53 +109,397 @@
 <script>
 export default {
   components: {},
-  props: {},
+  props: {
+    activeTabs: {
+      type: String,
+    },
+  },
 
   data() {
-    return {};
+    return {
+      bgList: [],
+      model: null,
+      layer: null,
+      reportText: "生成报告",
+      tempObj: [],
+      xzjgObj: {
+        bsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
+        xmmc: "111",
+        jsdw: "111",
+        fxbg: "/file/statics/shape/辅助选址报告/6d39b2d4307b46e2a4cf6f8c68a30c31/111（选址报告）_1676448756708.pdf",
+        items: [
+          {
+            objectid: 13761,
+            bsm: "7fe39bc0ad0811eda6d9f0def1935d90",
+            rwbsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
+            dlb: "SDE.XZYDYH",
+            dlbm: "0602",
+            dlmc: "种植设施建设用地",
+            cjsj: "2023-02-15T16:12:34.000+08:00",
+            yxfa: "0",
+            bz: null,
+            tbmj: 25.0850187,
+            xzqdm: "150502",
+            xzqmc: "科尔沁区",
+            fxyzjg: [],
+          },
+        ],
+      },
+      tempObj: {
+        bsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
+        xmmc: "111",
+        jsdw: "111",
+        fxbg: "/file/statics/shape/辅助选址报告/6d39b2d4307b46e2a4cf6f8c68a30c31/111（选址报告）_1676448756708.pdf",
+        items: [
+          {
+            objectid: 13761,
+            bsm: "7fe39bc0ad0811eda6d9f0def1935d90",
+            rwbsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
+            dlb: "SDE.XZYDYH",
+            dlbm: "0602",
+            dlmc: "种植设施建设用地",
+            cjsj: "2023-02-15T16:12:34.000+08:00",
+            yxfa: "0",
+            bz: null,
+            tbmj: 25.0850187,
+            xzqdm: "150502",
+            xzqmc: "科尔沁区",
+            fxyzjg: [],
+          },
+        ],
+        rwBsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
+      },
+      rwObj: {
+        bsm: "6d39b2d4307b46e2a4cf6f8c68a30c31",
+        sjy: "SDE.XZYDYH",
+        sjymc: "国土空间总体规划",
+        ydbsm: "0",
+        ydmc: null,
+        ydmjbegin: "0",
+        ydmjend: "100",
+        xmmc: "111",
+        jsdw: "111",
+        fxbg: "/file/statics/shape/辅助选址报告/6d39b2d4307b46e2a4cf6f8c68a30c31/111（选址报告）_1676448756708.pdf",
+        rwzt: 2,
+        fwlx: 1,
+        xzfw: null,
+        zip: "/file/statics/shape/辅助选址报告/6d39b2d4307b46e2a4cf6f8c68a30c31/111_1676448756708.zip",
+      },
+    };
   },
   mounted() {},
-  methods: {},
+  methods: {
+    addprogramme(e, item) {
+      console.log(item, "-------");
+      e.stopPropagation();
+      const list = this.bgList.filter((item1) => {
+        return item1 == item;
+      });
+      if (list.length == 0) {
+        this.bgList.push(item);
+        const list = this.xzjgObj.items.filter((item1) => {
+          return item1.bsm != item.bsm;
+        });
+        this.xzjgObj.items = list;
+      }
+    },
+
+    deleteprogramme(e, item) {
+      e.stopPropagation();
+      this.bgList = this.bgList.filter((item1) => {
+        return item1.bsm != item.bsm;
+      });
+      const temp = JSON.parse(
+        JSON.stringify(
+          this.tempObj.items.filter((item1) => {
+            return item1.bsm == item.bsm;
+          })
+        )
+      );
+      this.xzjgObj.items.push(temp[0]);
+    },
+    resetAll() {
+      // parent.emit("update:xzjgObj", JSON.parse(JSON.stringify(this.tempObj)));
+      this.reportText = "生成报告";
+      this.bgList = [];
+    },
+    mapview(item) {
+      console.log(item, "=====");
+    },
+    submit() {
+      console.log("生成报告");
+      // if (this.reportText == "查看报告") {
+      //   window.open(this.model.fxbg.replace(".docx", ".pdf"), "_blank");
+      //   return;
+      // }
+      // if (this.bgList.length == 0) {
+      //   ElMessage.warning("请添加选址方案！");
+      //   return false;
+      // }
+      // const json = this.bgList.map((item) => {
+      //   return item.bsm;
+      // });
+      // ElMessageBox.confirm("请问是否生成报告？", "辅助选址报告", {
+      //   confirmButtonText: "确定",
+      //   cancelButtonText: "取消",
+      //   callback: (action) => {
+      //     if (action == "confirm") {
+      //       parent.emit("update:loading", true);
+      //       SaveWordFile({
+      //         bsm: this.rwBsm,
+      //         xzbsm: json,
+      //       })
+      //         .then((res) => {
+      //           parent.emit("update:loading", false);
+      //           if (res.success && res.data != null) {
+      //             ElMessage.success("报告生成成功！");
+      //             this.model = res.data;
+      //             this.reportText = "查看报告";
+      //           } else {
+      //             parent.emit("update:loading", false);
+      //             ElMessage.success("报告生成失败！");
+      //           }
+      //         })
+      //         .catch(() => {
+      //           parent.emit("update:loading", false);
+      //           ElMessage.success("报告生成失败！");
+      //         });
+      //     }
+      //   },
+      // });
+    },
+
+    downReport() {
+      window.open(this.model.zip, "_blank");
+    },
+
+    loadJgMap() {
+      if (this.layer == null) {
+        this.layer = arcMap.CreateVecLayer(
+          "fzxz_layer",
+          function (feature) {
+            var mj = feature.get("TBMJ").toFixed(0);
+            return new Style({
+              fill: new Fill({
+                color: "rgba(255, 255, 255, 0.2)",
+              }),
+              stroke: new Stroke({
+                color: "#1171d6",
+                width: 2,
+              }),
+              text: new Text({
+                // scale:0.85,
+                text: `${mj}`, //m²
+                font: "14px sans-serif",
+                fill: new Fill({
+                  color: "#1171d6",
+                }),
+                stroke: new Stroke({
+                  color: "#fff",
+                  width: 3,
+                }),
+              }),
+            });
+          },
+          function (feature, popup) {
+            console.log(feature);
+            //获取选址结果
+            GetXzJgByBsm({
+              jgbsm: feature.get("BSM"),
+            }).then((res) => {
+              if (res.success) {
+                var html = `<div id='popup_temp' class='map-popupinfo'><div class="popupinfo-title">${res.data.dlmc}<el-icon class='pointer popupinfo-close' id='closePop'><close /></el-icon>
+                  </div><div class='popupinfo-content'>`;
+                html +=
+                  "<li><span>用地代码：</span><span>" +
+                  res.data.dlbm +
+                  "</span></li>";
+                html +=
+                  "<li><span>用地名称：</span><span>" +
+                  res.data.dlmc +
+                  "</span></li>";
+                html +=
+                  "<li><span>图斑面积：</span><span>" +
+                  res.data.tbmj.toFixed(0) +
+                  "m²</span></li>";
+                if (res.data.yxfa == "0") {
+                  html += "<li><span>选址方案：</span><span>未选</span></li>";
+                } else {
+                  html +=
+                    "<li><span>选址方案：</span><span style='color:rgb(0,120,215);'>已选</span></li>";
+                }
+                var yzf = res.data.fxyzjg.filter((t) => {
+                  return t.yztj == "F";
+                });
+                if (yzf.length) {
+                  html += "<li>分析因子</li>";
+                  yzf.map((jg) => {
+                    html += `<li><span>${
+                      jg.yxyzmc
+                    }：</span><span>压占面积${Number(jg.fxjg).toFixed(
+                      0
+                    )}m²</span></li>`;
+                  });
+                }
+                popup({}, html);
+              }
+            });
+          }
+        );
+        arcMap.addLayer(this.layer);
+      }
+      this.layer.getSource().clear();
+      arcMap.SearchWfsFilter2(
+        `${SYS_LAYERS.FZXZ}/0/query`,
+        `RWBSM='${this.rwBsm}'`,
+        function (fs) {
+          this.layer.getSource().addFeatures(fs);
+        }
+      );
+    },
+
+    loadJg(bsm) {
+      this.rwBsm = bsm;
+      if (this.layer) {
+        this.layer.getSource().clear();
+      }
+      if (bsm != "") {
+        this.loadJgMap();
+        this.bgList = [];
+      }
+      if (this.model.fxbg) {
+        this.reportText = "查看报告";
+      }
+    },
+
+    initData() {
+      this.model = this.rwObj;
+      this.bgList = this.tempObj.items.filter(
+        (item) => !this.xzjgObj.items.some((ele) => ele.bsm === item.bsm)
+      );
+      this.bgList.sort(function (a, b) {
+        return parseInt(a.yxfa) - parseInt(b.yxfa);
+      });
+    },
+  },
+
+  watch: {
+    activeTabs(newValue, oldValue) {
+      if (newValue == "scjg") {
+        this.initData();
+      }
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
-.hgxsc {
-  height: 100%;
-  .dkContainer {
-    width: 100%;
-    height: 280px;
-    background-color: #0a2450;
+.xzjg {
+  height: calc(100vh - 108px);
+  min-width: 300px;
+  box-sizing: border-box;
+  padding: 0px 10px;
+  ::v-deep(.el-scrollbar__bar) {
+    right: -15px;
+  }
+  td {
+    padding-left: 15px;
+  }
+
+  .el-collapse-item__header {
+    font-size: 18px;
+    .fanan-caozuo {
+      position: absolute;
+      right: 20px;
+      box-sizing: border-box;
+      padding-right: 20px;
+    }
   }
-  .bxContainer {
+  .el-collapse-item__content {
+    padding-bottom: 0;
+  }
+  ::v-deep(.el-collapse-item__header) {
+    color: #303133 !important;
+    position: relative;
+    cursor: auto;
+  }
+  .blue {
+    color: #409eff;
+  }
+  ::v-deep(.el-tabs__item) {
+    height: 55px;
+  }
+  ::v-deep(.el-form-item__content) {
+    line-height: 40px;
+  }
+  ::v-deep(.el-form-item__label) {
+    line-height: 40px;
+  }
+  .title {
+    button {
+      padding: 0;
+      float: right;
+      margin-right: 5px;
+      min-height: unset;
+    }
+  }
+  .el-form-item {
+    margin-bottom: 0;
+  }
+  .xz-btn {
     width: 100%;
-    height: 335px;
-    background-color: #0a2450;
-    .dkTitle {
-      width: 100%;
-      height: 40px;
-      background-color: aqua;
-      display: flex;
-      justify-content: space-between;
+    background: #efefef;
+    position: absolute;
+    height: 55px;
+    z-index: 2;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+  }
+  ::v-deep(.el-descriptions :not(.is-bordered) td),
+  ::v-deep(.el-descriptions :not(.is-bordered) th) {
+    padding-bottom: 3px;
+  }
+  ::v-deep(.el-collapse-item__content) {
+    padding-bottom: 10px;
+  }
+  ::v-deep(.el-collapse-item__header) {
+    cursor: pointer;
+    &:hover {
+      background-color: rgba(64, 158, 255, 0.09);
     }
-    .tools {
-      position: absolute;
-      right: 30px;
+  }
+  .clat-title {
+    padding-left: 10px;
+    padding-right: 5px;
+    display: inline-flex;
+    .clat-title-head {
+      display: inline-block;
+      max-width: 280px;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
-    .collapseCon {
-      p {
-        width: 100%;
-        height: 30px;
-        line-height: 30px;
-        // background-color: pink;
-      }
-      .oneItem {
-        span {
-          border: 1px solid #02a7f0;
-          padding: 3px 5px;
-          border-radius: 5px;
-        }
-      }
+  }
+}
+
+.tools {
+  position: absolute;
+  right: 30px;
+}
+
+.collapseCon {
+  p {
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    // background-color: pink;
+  }
+  .oneItem {
+    span {
+      border: 1px solid #02a7f0;
+      padding: 3px 5px;
+      border-radius: 5px;
     }
   }
 }

src/views/siteselection/index.vue

@@ -7,10 +7,16 @@
         <span class="lv-icon-maxmini"> </span>
         <i class="icon-remove"></i>
       </h2>
-      <el-tabs type="border-card" class="xz_box" v-model="activeTabs" stretch>
+      <el-tabs
+        type="border-card"
+        class="xz_box"
+        v-model="activeTabs"
+        stretch
+        @tab-click="tabClick"
+      >
         <el-tab-pane label="辅助选址" name="fzxz">
           <FZXZ></FZXZ>
-           </el-tab-pane>
+        </el-tab-pane>
         <el-tab-pane label="历史记录" name="lsju">
           <Lsjl
             :activeTabs="activeTabs"
@@ -19,10 +25,11 @@
             :rwBsm="rwBsm"
             :rwObj="rwObj"
             :rzMc="rzMc"
-          ></Lsjl> </el-tab-pane>
+          ></Lsjl>
+        </el-tab-pane>
         <!-- :disabled="activeTabs != 'scjg'" -->
-        <el-tab-pane label="选址结果" name="xzjg"> 
-          <XZJG></XZJG>
+        <el-tab-pane label="选址结果" name="xzjg">
+          <XZJG :activeTabs="activeTabs" :loading="loading"></XZJG>
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -38,7 +45,7 @@ export default {
   components: {
     FZXZ,
     Lsjl,
-    XZJG
+    XZJG,
   },
   data() {
     return {
@@ -48,10 +55,16 @@ export default {
       scjgObj: {},
       rwObj: {},
       rzMc: "",
+      loading:false,
     };
   },
   created() {},
-  methods: {},
+  methods: {
+    tabClick(evt) {
+      // console.log(evt, "======");
+      this.activeTabs = evt.name;
+    },
+  },
 };
 </script>