城市用地监测

website/src/store/modules/permission.js

@@ -148,6 +148,8 @@ function reset(list) {
       newObj.meta.bsm = "101004";
     } else if (item.name === "Jsyj") {
       newObj.meta.bsm = "101005";
+    } else if (item.name === "Csydjc") {
+      newObj.meta.bsm = "101005";
     }
     if (item.children) {
       newObj.children = reset(item.children);

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

@@ -0,0 +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>
+  
+  <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) => {
+            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.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();
+          }
+        }
+      );
+      onMounted(() => {
+        dtjc.txbsm = route.meta.bsm;
+        rightmenu.getRightMenuData();
+      });
+      return {
+        ...toRefs(rightmenu),
+        ...toRefs(dtjc),
+        ...toRefs(echartsData),
+        ...toRefs(mapData),
+      };
+    },
+  };
+  </script>
+  
+  <style lang="less" scoped>
+  .dtjc {
+  }
+  </style>
+