1.修改分析规划规则名称 2.添加分析规则对比 3.差异分析结果信息数据接口联调与展示逻辑

website/src/views/ghfxpj/Cyfx.vue

@@ -17,30 +17,34 @@
         <div class="block-title margin-top-5">分析规划</div>
         <div class="max-width flex-box margin-top-10">
           <el-form ref="queryForm" :model="queryParams" label-width="80px">
-            <el-form-item label="规划1:">
+            <el-form-item label="基准规划:">
               <el-select
                 v-model="queryParams.plan1"
-                placeholder="请选择分析规划1"
+                placeholder="请选择基准规划"
               >
                 <el-option
                   v-for="(item, i) in fxghList"
                   :key="i"
                   :label="item.name"
                   :value="item.name"
-                ></el-option> </el-select
-            ></el-form-item>
-            <el-form-item label="规划2:">
+                  :disabled="item.name == queryParams.plan2"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="对比规划:">
               <el-select
                 v-model="queryParams.plan2"
-                placeholder="请选择分析规划2"
+                placeholder="请选择对比规划"
               >
                 <el-option
                   v-for="(item, i) in fxghList"
                   :key="i"
                   :label="item.name"
                   :value="item.name"
-                ></el-option> </el-select
-            ></el-form-item>
+                  :disabled="item.name == queryParams.plan1"
+                ></el-option>
+              </el-select>
+            </el-form-item>
             <el-form-item>
               <el-button round @click="subMit">确定</el-button>
             </el-form-item>
@@ -133,7 +137,6 @@ import {
 } from "@vue/runtime-core";
 import { useRouter } from "vue-router";
 import { useStore } from "vuex";
-import { getFxyz, create } from "@/api/ghfxpj/ctfxApi.js";
 import { SjyList, Cyfxjg } from "@/api/ghfxpj/cyfxApi.js";
 import range from "@/components/mapview/range/range.vue";
 import { ElMessage } from "element-plus";
@@ -178,6 +181,7 @@ export default {
       fxyzList: [],
       fxghList: [],
       spanArr: [], // 存储合并信息的数组
+      showTable: false,
       init() {
         //获取分析规划
         SjyList().then((res) => {
@@ -253,10 +257,12 @@ export default {
         });
       },
       handleTransfer(item, index) {
+        fxsz.showTable = !fxsz.showTable;
         // 提交数据到Vuex
-        store.commit("SET_TRANSFERID", {
+        store.commit("SET_TRANSFER", {
           id: item.id,
-          showTable: true,
+          showTable: fxsz.showTable,
+          title: item.fxmc,
         });
       },
     });

website/src/views/ghfxpj/gtkjfxyy/ghcyfx.vue

@@ -30,9 +30,9 @@
             </div>
           </template>
         </Mapview>
-        <!-- <div class="Attributes" v-show="store.state.xmgl.transfer.showTable">
+        <div class="Attributes" v-show="showTable">
           <div class="AttributesTitle">
-            <span> 绿地规划位于总规外</span>
+            <span> {{ transfer.title }}</span>
             <el-icon
               class="pointer font-22 posi-abs"
               @click="closeTable"
@@ -40,7 +40,13 @@
               ><close
             /></el-icon>
           </div>
-          <el-table :data="tableData" border stripe style="width: 100%">
+          <el-table
+            :data="tableData"
+            border
+            stripe
+            style="width: 100%"
+            max-height="260"
+          >
             <el-table-column
               v-for="(key, index) in tableColumns"
               :key="index"
@@ -49,7 +55,7 @@
               align="center"
             />
           </el-table>
-        </div> -->
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -69,6 +75,7 @@ import { GetByBsms } from "@/api/ghyzt/zzllApi.js";
 import { reactive, toRefs, ref } from "@vue/reactivity";
 import { onMounted, watch } from "@vue/runtime-core";
 import { remove } from "@/api/gdal/index.js";
+import { getAttributesById } from "@/api/ghfxpj/cyfxApi.js";
 
 export default {
   components: {
@@ -119,6 +126,8 @@ export default {
       ],
       tableData: [],
       tableColumns: [],
+      transfer: {},
+      showTable: false,
       changeValue(site) {
         // arcMap.getLayerById(site.id).setVisible(site.checked);
         if (site.checked && !arcMap.getLayerById(site.id)) {
@@ -135,52 +144,40 @@ export default {
       },
 
       // 模拟接口请求，获取数据后解析列名
-      fetchTableData() {
+      fetchTableData(id) {
         // 接口返回的原始数据（实际项目从接口响应中获取）
-        const apiData = [
-          {
-            控规_用地用海分类名称: "城镇住宅用地",
-            总规_用地用海分类名称: "城镇村道路用地",
-            差异面积: ".16",
-            控规_用地用海分类代码: "070100",
-            总规_用地用海分类代码: "120700",
-            编号: 1,
-          },
-          {
-            控规_用地用海分类名称: "城镇住宅用地",
-            总规_用地用海分类名称: "城镇村道路用地",
-            差异面积: ".18",
-            控规_用地用海分类代码: "070100",
-            总规_用地用海分类代码: "120700",
-            编号: 2,
-          },
-          {
-            控规_用地用海分类名称: "高等教育用地",
-            总规_用地用海分类名称: "教育用地",
-            差异面积: "30001.87",
-            控规_用地用海分类代码: "080401",
-            总规_用地用海分类代码: "080400",
-            编号: 3,
-          },
-        ];
-
-        ghcyfx.tableData = apiData;
-        // 从第一条数据中提取属性名，作为表格列（若数据为空则不渲染列）
-        if (apiData.length > 0) {
-          ghcyfx.tableColumns = Object.keys(apiData[0]);
-        }
+        let apiData = [];
+        getAttributesById({ id: id }).then((res) => {
+          if (res.statuscode === 200) {
+            apiData = res.data;
+            ghcyfx.tableData = apiData;
+            // 从第一条数据中提取属性名，作为表格列（若数据为空则不渲染列）
+            if (apiData.length > 0) {
+              ghcyfx.tableColumns = Object.keys(apiData[0]);
+            }
+          }
+        });
       },
 
       // 格式化列名：将接口属性名转换为友好显示文本（如去掉下划线）
       formatColumnName(key) {
         return key.replace(/_/g, " ");
       },
+      closeTable() {
+        ghcyfx.showTable = false;
+      },
     });
     watch(
       () => store.state.xmgl.transfer,
       (newvalue, oldvalue) => {
-
-      },
+        ghcyfx.transfer = newvalue;
+        if (newvalue.showTable) {
+          ghcyfx.showTable = newvalue.showTable;
+          ghcyfx.fetchTableData(newvalue.id);
+        } else {
+          ghcyfx.showTable = false;
+        }
+      }
     );
     watch(
       () => store.state.fxpj.syxfxRightlayerList,
@@ -284,7 +281,7 @@ export default {
 .Attributes {
   width: 75%;
   height: 300px;
-  background: #ffc0cb85;
+  // background: #ffc0cb85;
   z-index: 9999 !important;
   position: absolute;
   bottom: 0px;