接口接入

src/api/cockpitNew.js

@@ -37,3 +37,18 @@ export function GetTabsPane(params) {
         params
     })
 }
+export function GetCascadeList(params) {
+    return request({
+        url: '/apply/fzxz/GetCascadeList',
+        method: 'get',
+        params
+    })
+}
+export function GetTabsPanePost(params) {
+    return request({
+        url: '/apply/tabledata/polygon/GetTableData',
+        method: 'post',
+        params
+    })
+}
+

src/views/siteselection/components/dkDetailsNew.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="dkxq_Container" v-if="isDateilsShow">
+    <div class="sm-panel-header">
+      <span>{{ title }}</span>
+      <span class="closeBtn" @click="close">&times;</span>
+    </div>
+
+    <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)" class="loadingDiv" v-if="title == '规划信息'">
+
+
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane :label="item.tableName" :name="item.tableName" v-for="(item, index) in tabs_list" :key="index">
+
+
+        </el-tab-pane>
+
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import pie from "@/components/echartsTemplate/pie.vue";
+import { GetCascadeList, GetTabsPanePost } from "@/api/cockpitNew";
+import * as wellknown from "wellknown";
+
+// 使用
+export default {
+  components: { pie },
+  props: {},
+  data() {
+    return {
+      title: "",
+      loading: true,
+      isDateilsShow: false,
+      activeName: 'second',
+      tabs_list: null,
+      optional: null,
+    };
+  },
+  methods: {
+    async show(item, title) {
+      this.title = title;
+      this.isDateilsShow = true;
+      this.optional = item;
+      let data = await GetCascadeList();
+      this.tabs_list = data.data;
+      this.loading = false
+    },
+    async handleClick(tab, event) {
+
+      this.tabs_list.forEach(async element => {
+        if (element.tableName == tab.name) {
+
+          let pane_obj = {
+            // sourcePolygonWkt: this.optional.geom,
+            // sourceLayerId: this.tabs_list[0].tableId,
+            // sourceLayerType: '0',
+            // queryTableId: element.tableId,
+
+            sourcePolygonWkt: 'POLYGON((109.49712143164533 18.309279728765855,109.49711192926624 18.310380990351096,109.49711161665255 18.310417116323478,109.4972007070708 18.31050362418087,109.49850056210042 18.310513852191068,109.49859113294231 18.31042875918721,109.49859144375941 18.31039263236441,109.4986014051776 18.309237180686633,109.4984888696287 18.309127909086385,109.49725521594395 18.30911820207864,109.49712174425906 18.30924360340898,109.49712143164533 18.309279728765855))',
+            sourceLayerId: 'dd699f839bc04969ae2dc2e1964d0ad1',
+            sourceLayerType: '0',
+            queryTableId: '85997f1cc88d46b79768b04a173048ff',
+
+          }
+
+          let data = await GetTabsPanePost(pane_obj);
+          console.log('data: ', data);
+        }
+      });
+    },
+    close() {
+      this.isDateilsShow = false;
+    },
+  },
+  mounted() { },
+  computed: {},
+};
+</script>
+
+<style scoped lang="scss">
+.dkxq_Container {
+  width: 19rem;
+  height: 600px;
+  background-color: pink;
+  position: fixed;
+  bottom: 16%;
+  right: 10px;
+
+  cursor: pointer;
+  background: url(/static/images/ghzc/内容框.png) no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
+  padding: 0px 10px;
+  box-sizing: content-box;
+  text-align: left;
+  line-height: 40px;
+
+  .echart {
+    width: 19rem;
+    height: 450px;
+  }
+}
+
+.list_vector_multi {
+  background-image: url("/static/images/ghzc/内容框.png");
+
+  width: 18rem;
+  border-top: 1px solid #ccc;
+  font-size: 14px;
+  padding: 0.1rem 0rem 0.1rem 0rem;
+  border-left: 1px solid #ccc;
+
+  border-right: 1px solid #ccc;
+
+  // border-bottom:1px solid #CCC ;
+}
+
+.list_vector_multi:last-child {
+  border-bottom: 1px solid #ccc;
+}
+
+.filed_box {
+  display: inline-block;
+}
+
+.loadingDiv {
+  width: 100%;
+  // height: 100%;
+  height: calc(100% - 46px);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+
+
+/* 去掉tabs标签栏下的下划线 */
+::v-deep .el-tabs__nav-wrap::after {
+  position: static !important;
+  /* background-color: #fff; */
+}
+
+/* 下划线切换高亮 */
+::v-deep .el-tabs__active-bar {
+  background-color: #30fdff;
+}
+
+::v-deep .el-collapse-item__header {
+  color: #64daff !important;
+  font-weight: 600;
+}
+
+
+.el-tab-pane {
+  height: 33rem;
+  overflow: auto;
+}
+
+/deep/ .is-active {
+
+  background: none !important;
+  border: none !important;
+}
+
+/deep/ .ghzc .xz_box .el-tabs__item.is-active {
+  // background: url(/static/images/ghzc/Tabact_bg.png) no-repeat;
+  // background-size: 100% 100%;
+  // border-color: transparent;
+  // border-bottom-color: #409EFF;
+
+  background: none !important;
+  border: none !important;
+
+}
+
+/deep/ .el-tabs__header {
+  border: none !important;
+
+}
+
+/deep/ .el-tabs__item {
+  background: none !important;
+  margin-right: 0px !important;
+}
+</style>

src/views/siteselection/components/xzjg.vue

@@ -8,22 +8,12 @@
       </div>
       <div class="bxCon" style="height: 90%">
         <el-collapse accordion v-model="activeNames">
-          <el-collapse-item
-            :name="'gb' + index1"
-            v-for="(item1, index1) in bgList"
-            :key="index1"
-          >
+          <el-collapse-item :name="'gb' + index1" v-for="(item1, index1) in bgList" :key="index1">
             <template slot="title">
               地块编号{{ item1.dkbm }} ({{ item1.area || 0 }})亩
               <span class="tools">
-                <i
-                  class="header-icon el-icon-place"
-                  @click.stop="mapview(item1)"
-                ></i>
-                <i
-                  class="header-icon el-icon-delete"
-                  @click="deleteprogramme($event, item1)"
-                ></i>
+                <i class="header-icon el-icon-place" @click.stop="mapview(item1)"></i>
+                <i class="header-icon el-icon-delete" @click="deleteprogramme($event, item1)"></i>
               </span>
             </template>
             <div class="collapseCon">
@@ -33,10 +23,8 @@
               </p>
               <p style="color: #cddeeb">
                 <img src="/static/images/ghzc/iconSun.png" />
-                <span style="margin-left: 20px">基准地价:</span
-                ><span style="color: #02a7f0"
-                  >{{ item1.landPrice || 0 }}万元</span
-                >
+                <span style="margin-left: 20px">基准地价:</span><span style="color: #02a7f0">{{ item1.landPrice || 0
+                }}万元</span>
               </p>
             </div>
           </el-collapse-item>
@@ -45,37 +33,23 @@
     </div>
     <div style="height: 47%; width: 100%" v-if="xzjgObj">
       <div class="title flex-box">
-        <span class="block-title"
-          >备选地块 （{{ xzjgObj.dks ? xzjgObj.dks.length : 0 }}）
+        <span class="block-title">备选地块 （{{ xzjgObj.dks ? xzjgObj.dks.length : 0 }}）
         </span>
       </div>
       <div class="bxCon">
         <el-collapse accordion v-model="activeNames">
-          <el-collapse-item
-            :name="index"
-            v-for="(item, index) in xzjgObj.dks"
-            :key="item.dkbm"
-          >
+          <el-collapse-item :name="index" v-for="(item, index) in xzjgObj.dks" :key="item.dkbm">
             <template slot="title">
               <!-- 地块编号B_P_123 -->
               {{ item.dkbm }} ({{ item.area || 0 }})亩
               <span class="tools">
-                <i
-                  class="header-icon el-icon-place"
-                  @click.stop="mapview(item)"
-                ></i>
-                <i
-                  class="header-icon el-icon-s-order"
-                  @click="planInfo($event, item)"
-                ></i>
-                <i
+                <i class="header-icon el-icon-place" @click.stop="mapview(item)"></i>
+                <i class="header-icon el-icon-s-order" @click="planInfo1($event, item)"></i>
+                <!-- <i
                   class="header-icon el-icon-receiving"
                   @click="nowInfo($event, item)"
-                ></i>
-                <i
-                  class="header-icon el-icon-plus"
-                  @click="addprogramme($event, item)"
-                ></i>
+                ></i> -->
+                <i class="header-icon el-icon-plus" @click="addprogramme($event, item)"></i>
               </span>
             </template>
             <div class="collapseCon">
@@ -86,10 +60,8 @@
               <p style="color: #cddeeb">
                 <!-- <i class="iconSun"></i> -->
                 <img src="/static/images/ghzc/iconSun.png" />
-                <span style="margin-left: 20px">基准地价:</span
-                ><span style="color: #02a7f0"
-                  >{{ item.landPrice || 0 }}万元</span
-                >
+                <span style="margin-left: 20px">基准地价:</span><span style="color: #02a7f0">{{ item.landPrice || 0
+                }}万元</span>
               </p>
             </div>
           </el-collapse-item>
@@ -120,7 +92,7 @@
 
 <script>
 import { GetXzjg, DownloadLandReport } from "../../../api/ghss/ghxz.js";
-import dkDetails from "./dkDetails.vue";
+import dkDetails from "./dkDetailsNew.vue";
 // 使用
 import parse from "wellknown";
 let dataSources = {};
@@ -199,8 +171,8 @@ export default {
           (res) => {
             window.open(
               window.axiosURI +
-                "/analyse/fzss/DownloadReport?filePath=" +
-                `${res.data.fxbg}`
+              "/analyse/fzss/DownloadReport?filePath=" +
+              `${res.data.fxbg}`
             );
           }
         );
@@ -331,6 +303,10 @@ export default {
       this.$refs.dkDetails.show(item, "规划信息");
       this.$refs.dkDetails.getCollapseList();
     },
+    planInfo1(e, item) {
+      console.log('item: ', item);
+      this.$refs.dkDetails.show(item, "规划信息");
+    },
     //现状信息
     nowInfo(e, item) {
       this.$refs.dkDetails.show(item, "现状信息");
@@ -374,7 +350,7 @@ export default {
       window.open(this.model.zip, "_blank");
     },
 
-    loadJgMap() {},
+    loadJgMap() { },
 
     loadJg(bsm) {
       console.log(bsm, "bsm");
@@ -436,6 +412,7 @@ export default {
       margin-right: 5px;
       min-height: unset;
     }
+
     .export {
       display: inline-block;
       background-color: #0f7ac8;
@@ -446,9 +423,11 @@ export default {
       float: right;
     }
   }
+
   .el-form-item {
     margin-bottom: 0;
   }
+
   .xz-btn {
     width: 100%;
     position: absolute;
@@ -464,6 +443,7 @@ export default {
     padding-left: 10px;
     padding-right: 5px;
     display: inline-flex;
+
     .clat-title-head {
       display: inline-block;
       max-width: 280px;
@@ -486,16 +466,20 @@ export default {
     // background-color: pink;
     color: #fff;
   }
+
   p:nth-child(2) {
     position: relative;
+
     // padding-right: 20px;
     img {
       position: absolute;
       top: 6px;
     }
   }
+
   .oneItem {
     display: flex;
+
     .iconSun {
       width: 16px;
       height: 16px;
@@ -503,6 +487,7 @@ export default {
       background: url("../../../../static//images//ghzc//iconSun.png") no-repeat;
       background-size: 100% 100%;
     }
+
     span {
       // border: 1px solid #02a7f0;
       padding: 0 5px;
@@ -511,6 +496,7 @@ export default {
       display: inline-block;
       margin-right: 5px;
     }
+
     span:first-child {
       background: rgba(253, 219, 59, 0.2);
       font-size: 14px;
@@ -520,17 +506,20 @@ export default {
       white-space: nowrap;
       text-overflow: ellipsis;
     }
+
     span:nth-child(2) {
       background: rgba(155, 255, 139, 0.2);
       font-size: 14px;
       color: #9bff8b;
     }
+
     p {
       font-size: 14px;
       color: #cddeeb;
     }
   }
 }
+
 .bxCon {
   width: 100%;
   height: 94%;
@@ -538,21 +527,26 @@ export default {
   overflow: hidden;
   overflow-y: auto;
 }
+
 /deep/ .el-collapse {
   // width: 95%;
   border: none;
 }
+
 /deep/ .el-scrollbar {
   border: 1px solid #0f7ac8 !important;
   // padding: 0 10px;
 }
+
 /deep/ .el-collapse-item__header {
   border-bottom: 1px solid rgba(102, 126, 143, 0.747);
   position: relative;
 }
+
 /deep/ .el-collapse-item__wrap {
   border-bottom: 1px solid rgba(102, 126, 143, 0.5) !important;
 }
+
 /deep/ .el-scrollbar__wrap {
   padding: 0 10px;
 }