建设用地开发完成情况

website/src/components/ghfxpj/wtsbztyy/fxsz.vue

@@ -91,6 +91,25 @@
         </div>
       </div>
       <div
+        v-if="fxdlList.length > 0"
+        class="max-width flex-box column padding-10 box-sizing"
+        style="padding-top: 0"
+      >
+        <div class="block-title margin-top-5">分析地类</div>
+        <div class="max-width flex-box wrap margin-top-10">
+          <div
+            class="city-item pointer"
+            v-for="item in fxdlList"
+            :key="item.id"
+            :class="form.act_yz == item.id ? 'act_yz' : ''"
+            @click="changeDl(item)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+      <div
+        v-if="zytype != '7'"
         class="max-width flex-box column padding-10 box-sizing"
         style="padding-top: 0"
       >
@@ -154,6 +173,7 @@ export default {
       fxyzList: [], // 分析因子列表
       yearList: [], // 分析年份列表
       fxwdList: [], // 分析维度列表
+      fxdlList: [], // 分析地类
       active_layout: true,
       downloadLoading: false,
       xzqList: [],
@@ -207,6 +227,10 @@ export default {
         // }
         // fxsz.init();
       },
+      changeDl(item) {
+        fxsz.form.act_yz = item.id;
+        fxsz.getYear();
+      },
       changeWD(item) {
         fxsz.form.act_wd = item.id;
         fxsz.getResultName();
@@ -225,7 +249,7 @@ export default {
       },
       submitData() {
         let fxtable = fxsz.yearList.find(
-          (item) => item.year === fxsz.form.act_year,
+          (item) => item.year === fxsz.form.act_year
         )?.tablename;
         if (!fxsz.form.jgmc) {
           ElMessage.warning("请输入结果名称！");
@@ -285,6 +309,13 @@ export default {
             }
           }
         });
+        if (prop.zytype == "7") {
+          fxsz.fxdlList = [
+            { name: "所有建设用地", id: 0 },
+            { name: "商业服务业用地", id: 1 },
+            { name: "工矿用地", id: 2 },
+          ];
+        }
       },
       // 获取数据源
       getSJY() {
@@ -317,14 +348,14 @@ export default {
       getResultName() {
         if (!fxsz.form.act_xzqmc) {
           fxsz.form.act_xzqmc = fxsz.xzqList.find(
-            (item) => item.value === fxsz.form.act_xzq,
+            (item) => item.value === fxsz.form.act_xzq
           ).label;
         }
         let fxyzName = fxsz.fxyzList.find(
-          (item) => item.id === fxsz.form.act_yz,
+          (item) => item.id === fxsz.form.act_yz
         ).name;
         let fxwdName = fxsz.fxwdList.find(
-          (item) => item.id === fxsz.form.act_wd,
+          (item) => item.id === fxsz.form.act_wd
         ).name;
         fxsz.form.jgmc = `${fxsz.form.act_year}年${fxsz.form.act_xzqmc}${fxyzName}与${fxwdName}`;
       },

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

@@ -0,0 +1,92 @@
+<template>
+    <div class="tdkflyqdfx max-box">
+      <el-row class="max-box">
+        <el-col
+          :span="6"
+          v-loading="loading"
+          element-loading-text="数据加载中"
+          element-loading-spinner="loading"
+        >
+          <Content
+            v-model:ctfxsm="ctfxsm"
+            v-model:zytype="zytype"
+            v-model:jgsj="jgsj"
+          ></Content>
+        </el-col>
+        <el-col :span="18">
+          <XzqView v-model:jgsj="jgsj"></XzqView>
+        </el-col>
+      </el-row>
+    </div>
+  </template>
+  
+  <script>
+  import XzqView from "@/components/ghfxpj/gtkjfxyy/tdkflyqdfx/xzqView.vue";
+  import Content from "@/components/ghfxpj/wtsbztyy/content.vue";
+  import arcMap from "@/utils/arcMap.js";
+  import { reactive, toRefs } from "@vue/reactivity";
+  import { onMounted, watch } from "@vue/runtime-core";
+  import { remove } from "@/api/gdal/index.js";
+  export default {
+    components: {
+      Content,
+      XzqView,
+    },
+    setup() {
+      const store = useStore();
+      const tdkflyqdfx = reactive({
+        loading: false,
+        zytype: "7",
+        // baseLayer:{base: ["tdtImg", "tdtVec", "tdtVecAnn"]},
+        baseLayer: {},
+        ctfxsm:
+          "通过规划用地与现状用地的空间对比分析，明确规划的实施完成情况。",
+        sites: [],
+        jgsj: {
+          xzqdm: "150500",
+          statist:
+            '[{"xzqdm":"150526","xzqmc":"扎鲁特旗","proportion":200,"status":"预警"},{"xzqdm":"150500","xzqmc":"通辽市","proportion":33207.98,"status":"正常"},{"xzqdm":"150526","xzqmc":"扎鲁特旗","proportion":334,"status":"预警"},{"xzqdm":"150525","xzqmc":"奈曼旗","proportion":0,"status":"正常"},{"xzqdm":"150524","xzqmc":"库伦旗","proportion":1064.01,"status":"正常"},{"xzqdm":"150521","xzqmc":"科尔沁左翼中旗","proportion":465.81,"status":"正常"},{"xzqdm":"150522","xzqmc":"科尔沁左翼后旗","proportion":6051.84,"status":"正常"},{"xzqdm":"150502","xzqmc":"科尔沁区","proportion":13983.85,"status":"正常"},{"xzqdm":"150523","xzqmc":"开鲁县","proportion":9415.12,"status":"正常"},{"xzqdm":"150581","xzqmc":"霍林郭勒市","proportion":888.76,"status":"正常"}]',
+        },
+        changeValue(site) {
+          // if (site.checked && !arcMap.getLayerById(site.id)) {
+          //   arcMap[site.type](site, null, false);
+          // }
+          // arcMap.getLayerById(site.id).setVisible(site.checked);
+          // if (site.checked && !arcMap.getLayer(site.layer.url)) {
+          //   arcMap['WMTS'](site.layer, null, false);
+          // }
+          // arcMap.getLayer(site.layer.url).setVisible(site.checked);
+        },
+      });
+  
+      return { ...toRefs(tdkflyqdfx) };
+    },
+  };
+  </script>
+  
+  <style lang="less" scoped>
+  .tdkflyqdfx {
+    .xz_box {
+      box-shadow: none;
+      border: none;
+      height: 100%;
+      border-right: 1px solid #dcdfe6;
+    }
+    .tckz {
+      position: absolute;
+      left: auto;
+      right: 20px;
+      top: 50px;
+      background-color: rgba(255, 255, 255, 0.85);
+      padding: 5px;
+      border-radius: 5px;
+  
+      > div {
+        padding: 5px;
+        padding-right: 10px;
+        text-align: left;
+      }
+    }
+  }
+  </style>
+