城市用地监测列表查询、趋势分析、区域分布接口联调，页面修改调整

website/src/components/ghjcpgyj/ghssjc/jsyj/echartsTable.vue

@@ -19,6 +19,7 @@
         <div
           class="height-45 max-width flex-box"
           style="background: rgb(242, 242, 242)"
+          v-if="!$route.meta.bsm == '101006'"
         >
           <div
             class="flex-content flex-box align-center justify-center pointer"
@@ -59,6 +60,7 @@
         class="flex-box max-box column border margin-top-10 border-radius-4 height-100-60"
       >
         <div
+          v-if="!$route.meta.bsm == '101006'"
           class="height-45 max-width flex-box"
           style="background: rgb(242, 242, 242)"
         >
@@ -87,11 +89,16 @@
             <div class="flex-content flex-box align-center justify-center">
               {{
                 tableList.length > 0
-                  ? "现状值(" + ListOption.zbdw + ")"
+                  ? ($route.meta.bsm == "101006" ? "监测值(" : "现状值(") +
+                    ListOption.zbdw +
+                    ")"
                   : "现状值"
               }}
             </div>
-            <div class="flex-content flex-box align-center justify-center">
+            <div
+              class="flex-content flex-box align-center justify-center"
+              v-if="!$route.meta.bsm == '101006'"
+            >
               状态
             </div>
           </div>
@@ -114,7 +121,10 @@
               <div class="flex-content flex-box align-center justify-center">
                 {{ item.xzz }}
               </div>
-              <div class="flex-content flex-box align-center justify-center">
+              <div
+                class="flex-content flex-box align-center justify-center"
+                v-if="!$route.meta.bsm == '101006'"
+              >
                 {{ item.status }}
               </div>
             </div>

website/src/components/ghjcpgyj/ghssjc/jsyj/rightMenu.vue

@@ -7,7 +7,7 @@
         <div
           class="max-height border-bottom-blue padding-left-10 padding-right-10"
         >
-          及时预警
+          {{ $route.meta.bsm == "101006" ? "城市用地监测" : "及时预警" }}
         </div>
       </div>
       <div class="height-50 box-sizing flex-box nowrap align-center">
@@ -62,7 +62,20 @@
         :key="item.zbbh"
         @click="activecard(item)"
       >
-        <div class="max-box flex-box column">
+        <div class="max-box flex-box column" v-if="$route.meta.bsm == '101006'">
+          <div
+            class="flex-box column height-80 box-sizing padding-10 justify-between align-between"
+          >
+            <div class="title-item">{{ item.zbmc }}</div>
+            <div class="flex-box align-center max-width justify-between">
+              <span class="font-bold">{{ item.jcz.key || "-" }}</span>
+              <span class="font-16 font-bold">
+                {{ item.jcz.value || "-" }}
+              </span>
+            </div>
+          </div>
+        </div>
+        <div class="max-box flex-box column" v-else>
           <div
             class="flex-box column height-80 box-sizing border-bottom padding-10 justify-between align-between"
           >
@@ -143,6 +156,9 @@ export default {
     formline: {
       type: Object,
     },
+    // cardtype: {
+    //   type: String,
+    // },
   },
   setup(prop, context) {
     const parent = { ...context };
@@ -160,6 +176,10 @@ export default {
           value: "2020",
           label: "2020",
         },
+        {
+          value: "2021",
+          label: "2021",
+        },
         {
           value: "2019",
           label: "2019",
@@ -307,7 +327,7 @@ export default {
     height: calc(100% - 110px);
     .card {
       width: 320px;
-      height: 155px;
+      // height: 155px;
       font-size: 11px;
       border-width: 1px;
       border-top-right-radius: 15px;

website/src/store/modules/permission.js

@@ -149,7 +149,7 @@ function reset(list) {
     } else if (item.name === "Jsyj") {
       newObj.meta.bsm = "101005";
     } else if (item.name === "Csydjc") {
-      newObj.meta.bsm = "101005";
+      newObj.meta.bsm = "101006";
     }
     if (item.children) {
       newObj.children = reset(item.children);

website/src/views/ghjcpgyj/ghssjc/Csydjc.vue

@@ -1,153 +1,153 @@
 <template>
-    <el-row class="max-box dtjc overflow-hidden" v-loading="loadding">
-      <el-col :span="5" class="max-height"
-        ><RightMenu
-          v-if="cardlist.length > 0"
-          v-model:cardlist="cardlist"
-          v-model:zbObj="zbObj"
-          v-model:formline="formline"
-          @getRightMenuData="getRightMenuData"
-        ></RightMenu>
-      </el-col>
-      <el-col :span="7" class="max-height">
-        <EchartsTable
-          v-if="Object.keys(echartsOption).length > 0"
-          v-model:echartsOption="echartsOption"
-          v-model:ListOption="ListOption"
-        ></EchartsTable>
-      </el-col>
-      <el-col :span="12" class="max-height">
-        <MapView :data="ListOption"></MapView>
-      </el-col>
-    </el-row>
-  </template>
+  <el-row class="max-box dtjc overflow-hidden" v-loading="loadding">
+    <el-col :span="5" class="max-height"
+      ><RightMenu
+        v-if="cardlist.length > 0"
+        v-model:cardlist="cardlist"
+        v-model:zbObj="zbObj"
+        v-model:formline="formline"
+        @getRightMenuData="getRightMenuData"
+      ></RightMenu>
+    </el-col>
+    <el-col :span="7" class="max-height">
+      <EchartsTable
+        v-if="Object.keys(echartsOption).length > 0"
+        v-model:echartsOption="echartsOption"
+        v-model:ListOption="ListOption"
+      ></EchartsTable>
+    </el-col>
+    <el-col :span="12" class="max-height">
+      <MapView :data="ListOption"></MapView>
+    </el-col>
+  </el-row>
+</template>
   
   <script>
-  import RightMenu from "@/components/ghjcpgyj/ghssjc/jsyj/rightMenu.vue";
-  import EchartsTable from "@/components/ghjcpgyj/ghssjc/jsyj/echartsTable.vue";
-  import MapView from "@/components/ghjcpgyj/ghssjc/jsyj/mapView.vue";
-  import { reactive, toRefs } from "@vue/reactivity";
-  import { useRoute, useRouter } from "vue-router";
-  import { onMounted, watch } from "@vue/runtime-core";
-  import {
-    QueryList,
-    QueryTrendList,
-    QueryAreaList,
-  } from "@/api/ghssjd/ssjcpgyj/jcyjApi.js";
-  export default {
-    components: {
-      RightMenu,
-      EchartsTable,
-      MapView,
-    },
-    setup() {
-      const route = useRoute();
-      const dtjc = reactive({
-        txbsm: "",
-        loadding: true,
-        zbObj: {},
-        formline: {
-          xzqdm: XZQ_DM,
-          year: "",
-          status: "",
-        },
-        tabs_menu() {
-          dtjc.loadding = true;
-          rightmenu.cardlist = [];
-          dtjc.txbsm = route.meta.bsm;
-          rightmenu.getRightMenuData();
-        },
-      });
-      const rightmenu = reactive({
-        cardlist: [],
-        getRightMenuData(
-          xzqdm = dtjc.formline.xzqdm,
-          year = dtjc.formline.year,
-          statue = dtjc.formline.status
-        ) {
-          QueryList({
-            txbsm: dtjc.txbsm,
-            xzqdm: xzqdm,
-            year: year,
-            status: statue,
-          }).then((res) => {
-            if (res.success) {
-              rightmenu.cardlist = res.data;
-            }
-          });
-        },
-      });
-      const echartsData = reactive({
-        echartsOption: { a: "" },
-        ListOption: [],
-        getEcharts(
-          zbbh = "",
-          xzqdm = dtjc.formline.xzqdm,
-          year = dtjc.formline.year
-        ) {
-          QueryTrendList({ zbbh: zbbh, xzqdm: xzqdm, year: year }).then((res) => {
+import RightMenu from "@/components/ghjcpgyj/ghssjc/jsyj/rightMenu.vue";
+import EchartsTable from "@/components/ghjcpgyj/ghssjc/jsyj/echartsTable.vue";
+import MapView from "@/components/ghjcpgyj/ghssjc/jsyj/mapView.vue";
+import { reactive, toRefs } from "@vue/reactivity";
+import { useRoute, useRouter } from "vue-router";
+import { onMounted, watch } from "@vue/runtime-core";
+import {
+  QueryList,
+  QueryTrendList,
+  QueryAreaList,
+} from "@/api/ghssjd/ssjcpgyj/jcyjApi.js";
+export default {
+  components: {
+    RightMenu,
+    EchartsTable,
+    MapView,
+  },
+  setup() {
+    const route = useRoute();
+    const dtjc = reactive({
+      txbsm: "",
+      loadding: true,
+      zbObj: {},
+      formline: {
+        xzqdm: XZQ_DM,
+        year: "2021",
+        status: "",
+      },
+      tabs_menu() {
+        dtjc.loadding = true;
+        rightmenu.cardlist = [];
+        dtjc.txbsm = route.meta.bsm;
+        rightmenu.getRightMenuData();
+      },
+    });
+    const rightmenu = reactive({
+      cardlist: [],
+      getRightMenuData(
+        xzqdm = dtjc.formline.xzqdm,
+        year = dtjc.formline.year,
+        statue = dtjc.formline.status
+      ) {
+        QueryList({
+          txbsm: dtjc.txbsm,
+          xzqdm: xzqdm,
+          year: year,
+          status: statue,
+        }).then((res) => {
+          if (res.success) {
+            rightmenu.cardlist = res.data;
+          }
+        });
+      },
+    });
+    const echartsData = reactive({
+      echartsOption: { a: "" },
+      ListOption: [],
+      getEcharts(
+        zbbh = "",
+        xzqdm = dtjc.formline.xzqdm,
+        year = dtjc.formline.year
+      ) {
+        QueryTrendList({ zbbh: zbbh, xzqdm: xzqdm, year: year }).then((res) => {
+          if (res.success) {
+            echartsData.echartsOption = res.data;
+          }
+        });
+      },
+      getList(
+        zbbh = "",
+        xzqdm = dtjc.formline.xzqdm,
+        year = dtjc.formline.year
+      ) {
+        QueryAreaList({ zbbh: zbbh, xzqdm: xzqdm, year: year })
+          .then((res) => {
             if (res.success) {
-              echartsData.echartsOption = res.data;
+              echartsData.ListOption = res.data;
             }
+          })
+          .finally(() => {
+            dtjc.loadding = false;
           });
-        },
-        getList(
-          zbbh = "",
-          xzqdm = dtjc.formline.xzqdm,
-          year = dtjc.formline.year
-        ) {
-          QueryAreaList({ zbbh: zbbh, xzqdm: xzqdm, year: year })
-            .then((res) => {
-              if (res.success) {
-                echartsData.ListOption = res.data;
-              }
-            })
-            .finally(() => {
-              dtjc.loadding = false;
-            });
-        },
-      });
-      const mapData = reactive({});
-      watch(
-        () => dtjc.zbObj,
-        (count) => {
-          dtjc.loadding = true;
-          echartsData.getEcharts(count.zbbh);
-          echartsData.getList(count.zbbh);
-        }
-      );
-      watch(
-        () => dtjc.formline,
-        (count) => {
-          echartsData.getEcharts(dtjc.zbObj.zbbh, count.xzqdm, count.year);
-          echartsData.getList(dtjc.zbObj.zbbh, count.xzqdm, count.year);
-        },
-        { deep: true }
-      );
-      watch(
-        () => route.path,
-        (count) => {
-          if (route.meta.bsm) {
-            dtjc.tabs_menu();
-          }
+      },
+    });
+    const mapData = reactive({});
+    watch(
+      () => dtjc.zbObj,
+      (count) => {
+        dtjc.loadding = true;
+        echartsData.getEcharts(count.zbbh);
+        echartsData.getList(count.zbbh);
+      }
+    );
+    watch(
+      () => dtjc.formline,
+      (count) => {
+        echartsData.getEcharts(dtjc.zbObj.zbbh, count.xzqdm, count.year);
+        echartsData.getList(dtjc.zbObj.zbbh, count.xzqdm, count.year);
+      },
+      { deep: true }
+    );
+    watch(
+      () => route.path,
+      (count) => {
+        if (route.meta.bsm) {
+          dtjc.tabs_menu();
         }
-      );
-      onMounted(() => {
-        dtjc.txbsm = route.meta.bsm;
-        rightmenu.getRightMenuData();
-      });
-      return {
-        ...toRefs(rightmenu),
-        ...toRefs(dtjc),
-        ...toRefs(echartsData),
-        ...toRefs(mapData),
-      };
-    },
-  };
-  </script>
+      }
+    );
+    onMounted(() => {
+      dtjc.txbsm = route.meta.bsm;
+      rightmenu.getRightMenuData();
+    });
+    return {
+      ...toRefs(rightmenu),
+      ...toRefs(dtjc),
+      ...toRefs(echartsData),
+      ...toRefs(mapData),
+    };
+  },
+};
+</script>
   
   <style lang="less" scoped>
-  .dtjc {
-  }
-  </style>
+.dtjc {
+}
+</style>