智能选址前端修改

web_ui/src/views/industrial-land/ZnxzDetail.vue

@@ -185,7 +185,7 @@
 
         <div class="tab-panel" v-if="selectIndex == 0">
           <div class="zbhj-tabs">
-            <!-- <div
+            <div
               class="z-item mr"
               v-for="(item, index) in jbxxTabs"
               :key="index"
@@ -199,7 +199,7 @@
                 {{ item.name }}
               </div>
               <div class="checked" v-if="jbxxIndex == index"></div>
-            </div> -->
+            </div>
           </div>
           <vue-perfect-scrollbar class="zb-panel" :settings="settings">
             <template v-if="jbxxIndex == 0">
@@ -209,112 +209,63 @@
               </div>
             </template>
             <template v-if="jbxxIndex == 1">
-              <div class="title">城镇开发边界线分析</div>
-              <div class="table" v-if="czqkfbjList.length > 0">
+              <div class="table">
                 <div class="table-con">
                   <div class="t-item">
-                    <div class="th">序号</div>
-                    <div class="th c1 t2">开发边界内面积（亩）</div>
-                    <div class="th c1">开发边界外面积（亩）</div>
+                    <div class="th c1">地类名称</div>
+                    <div class="th t2 c6">占用面积（亩）</div>
+                    <!-- <div class="th c1">开发边界外面积（亩）</div> -->
                   </div>
                   <div
                     class="t-item"
-                    v-for="(item, index) in czqkfbjList"
+                    v-for="(item, index) in xzfxList"
                     :key="index"
-                    :class="{ border: index == czqkfbjList.length - 1 }"
+                    :class="{ border: index == xzfxList.length - 1 }"
                   >
-                    <div class="td c2">{{ index + 1 }}</div>
-                    <div class="td t2">{{ item.bound_inner }}</div>
-                    <div class="td">{{ item.bound_outer }}</div>
+                    <!-- <div class="td c2">{{ index + 1 }}</div> -->
+                    <div class="td c1">{{ item.name }}</div>
+                    <div class="td c6 t2">{{ item.value }}</div>
                   </div>
                 </div>
               </div>
-              <div v-else class="fx-label">未占用</div>
-              <div class="title">永久基本农田控制线分析</div>
-              <div class="table" v-if="yjjbntList.length > 0">
-                <div class="table-con">
-                  <div class="t-item">
-                    <div class="th">序号</div>
-                    <div class="th c3">占用永久基本农田面积面积(亩)</div>
-                  </div>
-                  <div
-                    class="t-item"
-                    v-for="(item, index) in yjjbntList"
-                    :key="index"
-                    :class="{ border: index == yjjbntList.length - 1 }"
-                  >
-                    <div class="td c2">{{ index + 1 }}</div>
-                    <div class="td c3">{{ item.round }}</div>
-                  </div>
-                </div>
-              </div>
-              <div v-else class="fx-label">未占用</div>
-              <div class="title">生态保护红线分析</div>
-              <div class="table" v-if="stbhhxList.length > 0">
-                <div class="table-con">
-                  <div class="t-item">
-                    <div class="th">序号</div>
-                    <div class="th c3">占用生态保护红线面积(亩)</div>
-                  </div>
-                  <div
-                    class="t-item"
-                    v-for="(item, index) in stbhhxList"
-                    :key="index"
-                    :class="{ border: index == stbhhxList.length - 1 }"
-                  >
-                    <div class="td c2">{{ index + 1 }}</div>
-                    <div class="td c3">{{ item.round }}</div>
-                  </div>
-                </div>
-              </div>
-              <div class="fx-label" v-else>未占用</div>
-              <div class="title">控制性详细规划分析</div>
-              <div class="table" v-if="kzxxxghList.length > 0">
+            </template>
+            <template v-if="jbxxIndex == 2">
+              <div class="table">
                 <div class="table-con">
                   <div class="t-item">
-                    <div class="th">序号</div>
-                    <div class="th c1 t2">规划用途</div>
-                    <div class="th c1">地块面积(亩)</div>
+                    <div class="th c1">地类名称</div>
+                    <div class="th t2 c6">占用面积（亩）</div>
                   </div>
                   <div
                     class="t-item"
-                    v-for="(item, index) in kzxxxghList"
+                    v-for="(item, index) in ghfxList"
                     :key="index"
-                    :class="{ border: index == kzxxxghList.length - 1 }"
+                    :class="{ border: index == ghfxList.length - 1 }"
                   >
-                    <div class="td c2">{{ index + 1 }}</div>
-                    <div class="td t2">{{ item.ydxzmc }}</div>
-                    <div class="td">{{ item.round }}</div>
+                    <div class="td c1">{{ item.name }}</div>
+                    <div class="td c6 t2">{{ item.value }}</div>
                   </div>
                 </div>
               </div>
-              <div class="fx-label" v-else>未占用</div>
             </template>
-            <template v-if="jbxxIndex == 2">
-              <div class="table" v-if="dlfxList.length > 0">
+            <template v-if="jbxxIndex == 3">
+              <div class="table">
                 <div class="table-con">
                   <div class="t-item">
-                    <div class="th">序号</div>
-                    <div class="th c1 t2">地类名称</div>
-                    <div class="th t2">坐落</div>
-                    <div class="th c4">地块面积(亩)</div>
+                    <div class="th c1">地类名称</div>
+                    <div class="th t2 c6">占用面积（亩）</div>
                   </div>
                   <div
                     class="t-item"
-                    v-for="(item, index) in dlfxList"
+                    v-for="(item, index) in ghfxList"
                     :key="index"
-                    :class="{ border: index == dlfxList.length - 1 }"
+                    :class="{ border: index == ghfxList.length - 1 }"
                   >
-                    <div class="td c2">{{ index + 1 }}</div>
-                    <div class="td t2 mc" @click="goInfoLocation(item.wkt)">
-                      {{ item.dlmc }}
-                    </div>
-                    <div class="td c2 t2">{{ item.zldwmc }}</div>
-                    <div class="td c4">{{ item.dlmj }}</div>
+                    <div class="td c1">{{ item.name }}</div>
+                    <div class="td c6 t2">{{ item.value }}</div>
                   </div>
                 </div>
               </div>
-              <div v-else class="fx-label">未占用</div>
             </template>
           </vue-perfect-scrollbar>
         </div>
@@ -769,9 +720,10 @@ export default {
       ],
       zbhjTabs: [],
       jbxxTabs: [
-        // { name: "基础信息", icon: "icon-zdxm" },
-        // { name: "规划分析", icon: "icon-wxpck" },
-        // { name: "地类分析", icon: "icon-wxpck" },
+        { name: "基本信息", icon: "icon-zdxm" },
+        { name: "现状分析", icon: "icon-wxpck" },
+        { name: "规划分析", icon: "icon-wxpck" },
+        { name: "三区三线分析", icon: "icon-wxpck" },
       ],
       qytsTabs: [
         { name: "人口特征", icon: "icon-zdxm" },
@@ -932,6 +884,114 @@ export default {
       czqkfbjList: [{}],
       yjjbntList: [{}],
       stbhhxList: [{}],
+      xzfxList: [
+        {
+          name: "耕地",
+          value: 0,
+        },
+        {
+          name: "永久基本农田",
+          value: 0,
+        },
+        {
+          name: "园地",
+          value: 0,
+        },
+        {
+          name: "草地",
+          value: 0,
+        },
+        {
+          name: "林地",
+          value: 0,
+        },
+        {
+          name: "设施农用地",
+          value: 0,
+        },
+        {
+          name: "生态保护红线",
+          value: 0,
+        },
+        {
+          name: "城镇开发边界内",
+          value: 0,
+        },
+        {
+          name: "建设用地",
+          value: 0,
+        },
+        {
+          name: "地质灾害低易发区",
+          value: 0,
+        },
+        {
+          name: "重要矿产资源",
+          value: 0,
+        },
+        {
+          name: "粮食生产功能区",
+          value: 0,
+        },
+        {
+          name: "生态公益林",
+          value: 0,
+        },
+      ],
+      ghfxList: [
+        {
+          name: "耕地",
+          value: 0,
+        },
+        {
+          name: "永久基本农田",
+          value: 0,
+        },
+        {
+          name: "园地",
+          value: 0,
+        },
+        {
+          name: "草地",
+          value: 0,
+        },
+        {
+          name: "林地",
+          value: 0,
+        },
+        {
+          name: "设施农用地",
+          value: 0,
+        },
+        {
+          name: "生态保护红线",
+          value: 0,
+        },
+        {
+          name: "城镇开发边界内",
+          value: 0,
+        },
+        {
+          name: "建设用地",
+          value: 0,
+        },
+        {
+          name: "地质灾害低易发区",
+          value: 0,
+        },
+        {
+          name: "重要矿产资源",
+          value: 0,
+        },
+        {
+          name: "粮食生产功能区",
+          value: 0,
+        },
+        {
+          name: "生态公益林",
+          value: 0,
+        },
+      ],
       sexColors: ["#1684FC", "#FF7357"],
       sexData: [
         { value: 0, name: "男性" },
@@ -1990,6 +2050,8 @@ export default {
                 font-weight: 400;
                 font-size: 14px;
                 color: #333;
+                padding: 0;
+                margin: 0;
               }
               .t2 {
                 border-left: 1px solid #d9dde1;
@@ -2002,9 +2064,14 @@ export default {
               .c1 {
                 width: 40%;
               }
+              .c6 {
+                width: 60%;
+              }
 
               .td {
-                width: 40%;
+                padding: 0;
+                margin: 0;
+                // width: 40%;
                 align-items: center;
                 justify-content: center;
                 display: flex;