管控指标vuex

src/store/store.js

@@ -35,7 +35,7 @@ var store2 = {
         splitType: 'NONE',//分屏类型
         sceneLayerlist: [],
         flattenNames: [],//存储压平的名称数组
-        cockpit_date:null,
+        cockpit_date: null,
         cockpit_hysy: {
             text: {
                 xzqhdm_number: 0,
@@ -56,6 +56,20 @@ var store2 = {
                 x: [],
                 bar: [],
             }
+        },
+        cockpit_gkzb: {
+            // 生态保护红线面积
+            mj: 0,
+            // 路域生态保护红线
+            ly_mj: 0,
+            // 近海岸面积
+            hy_mj: 0,
+            // 永久基本农田保护面积
+            yjjbntmj: 0,
+            // 城市开发边界
+            kfbjmj: 0,
+            // 覆盖城镇开发边界
+            bfb: 0,
         }
     },
     setisInitViewer(newValue) {
@@ -171,8 +185,10 @@ var store2 = {
     },
     setCockpitTdsc(newValue) {
         this.state.cockpit_tdsc.flag = newValue;
-    },setCockpitDate(newValue) {
+    }, setCockpitDate(newValue) {
         this.state.cockpit_date = newValue;
+    }, setCockpitGkzb(newValue) {
+        this.state.cockpit_gkzb = newValue;
     },
 }
 

src/views/cockpitNew1/gkzb.vue

@@ -25,7 +25,7 @@
         </div>
         <div class="text">
           <p>永久基本农田保护</p>
-          <span>{{ yjjbntmj }}</span>平方干米
+          <span>{{ store.state.cockpit_gkzb.yjjbntmj }}</span>平方干米
 
         </div>
       </div>
@@ -38,7 +38,7 @@
         <div class="text">
           <p>生态保护红线</p>
           <span>
-            {{ mj }}
+            {{ store.state.cockpit_gkzb.mj }}
           </span>平方干米
 
         </div>
@@ -51,7 +51,7 @@
         </div>
         <div class="text">
           <p>城市开发边界</p>
-          <span>{{ kfbjmj }}</span>平方干米
+          <span>{{ store.state.cockpit_gkzb.kfbjmj }}</span>平方干米
 
         </div>
       </div>
@@ -63,7 +63,7 @@
         </div>
         <div class="text">
           <p>陆域生态保护红线</p>
-          <span>{{ ly_mj }}</span>平方干米
+          <span>{{ store.state.cockpit_gkzb.ly_mj }}</span>平方干米
 
         </div>
       </div>
@@ -91,7 +91,7 @@
           <p>近岸海域海洋生态保护红线
 
           </p>
-          <span>{{ hy_mj }}</span>平方干米
+          <span>{{ store.state.cockpit_gkzb.hy_mj }}</span>平方干米
 
         </div>
       </div>
@@ -105,7 +105,7 @@
           <p>覆盖城镇开发边界
 
           </p>
-          <span>{{ bfb }}</span>%
+          <span>{{ store.state.cockpit_gkzb.bfb }}</span>%
 
         </div>
       </div>
@@ -134,47 +134,64 @@ export default {
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    async initData() {
+      const that = this;
+      // console.log(store.state.cockpit_date, "store.cockpit_date");
+
+
+      let obj = {
+        // beginTime: store.state.cockpit_date[0],
+        // endTime: store.state.cockpit_date[1],
+        jscType: 'jsc_gkzb_ztgu_stbh',
+        id: '4602'
+      };
+      let data = await cockpitInfo(obj);
+
+
+      // that.mj = data.data[0].mj
+      // // 路域生态保护红线
+      // that.ly_mj = data.data[0].ly_mj
+      // // 近海岸面积
+      // that.hy_mj = data.data[0].hy_mj
+
+
+      let obj_yjjbntmj = {
+        jscType: 'jsc_gdbh_ztgh_nt',
+        id: '4602'
+      };
+      let obj_yjjbntmj_data = await cockpitInfo(obj_yjjbntmj);
+      // 永久基本农田保护面积
+      // that.yjjbntmj = obj_yjjbntmj_data.data[0].yjjbntmj;
+
+
+      let obj_kfbjmj = {
+        jscType: 'jsc_gkzb_ztgh_kfbj',
+        id: '4602'
+      };
+      let obj_kfbjmj_data = await cockpitInfo(obj_kfbjmj);
+      // // 城市开发边界
+      // that.kfbjmj = obj_kfbjmj_data.data[0].kfbjmj;
+      // // 覆盖城镇开发边界
+      // that.bfb = obj_kfbjmj_data.data[0].bfb * 100;
+
+      store.setCockpitGkzb({
+        mj: data.data[0].mj,// 生态保护红线面积
+        ly_mj: data.data[0].ly_mj,// 路域生态保护红线
+        hy_mj: data.data[0].hy_mj,//近海岸面积
+        yjjbntmj: obj_yjjbntmj_data.data[0].yjjbntmj,// 永久基本农田保护面积
+        kfbjmj: obj_kfbjmj_data.data[0].kfbjmj,// 城市开发边界
+        bfb: obj_kfbjmj_data.data[0].bfb * 100,// 覆盖城镇开发边界
+
+      });
+
+    }
+  },
   beforeCreate() { }, //生命周期 - 创建之前
   created() { }, //生命周期 - 创建完成（可以访问当前this实例）
   beforeMount() { }, //生命周期 - 挂载之前
-  async mounted() {
-    const that = this;
-    // console.log(store.state.cockpit_date, "store.cockpit_date");
-
-
-    let obj = {
-      // beginTime: store.state.cockpit_date[0],
-      // endTime: store.state.cockpit_date[1],
-      jscType: 'jsc_gkzb_ztgu_stbh',
-      id: '4602'
-    };
-    let data = await cockpitInfo(obj);
-    console.log(data, "data");
-
-    // 生态保护红线面积
-    that.mj = data.data[0].mj
-    // 路域生态保护红线
-    that.ly_mj = data.data[0].ly_mj
-    // 近海岸面积
-    that.hy_mj = data.data[0].hy_mj
-
-
-    let obj_yjjbntmj = {
-      jscType: 'jsc_gdbh_ztgh_nt',
-      id: '4602'
-    };
-    let obj_yjjbntmj_data = await cockpitInfo(obj_yjjbntmj);
-    that.yjjbntmj = obj_yjjbntmj_data.data[0].yjjbntmj;
-
-
-    let obj_kfbjmj = {
-      jscType: 'jsc_gkzb_ztgh_kfbj',
-      id: '4602'
-    };
-    let obj_kfbjmj_data = await cockpitInfo(obj_kfbjmj);
-    that.kfbjmj = obj_kfbjmj_data.data[0].kfbjmj;
-    that.bfb = obj_kfbjmj_data.data[0].bfb * 100;
+  mounted() {
+    this.initData();
 
   }, //生命周期 - 挂在完成
   beforeUpdate() { }, //生命周期 - 更新之前

src/views/viewer.vue

@@ -2,7 +2,7 @@
     <div v-show="flag">
         <datePicker @dateChange="dateChange"></datePicker>
         <ser-center></ser-center>
-        <GKZB />
+        <GKZB ref="gkzb_ref"/>
         <BJXM />
         <TDSC />
         <HYSY ref="hysy_ref" />
@@ -116,8 +116,48 @@ export default {
             that.$refs.hysy_ref["label_data"]();
             that.$refs.hysy_ref["echart_data"]();
         },
-        gkzb_xzqh(){
-            
+        async gkzb_xzqh(address) {
+            let obj = {
+                // beginTime: store.state.cockpit_date[0],
+                // endTime: store.state.cockpit_date[1],
+                jscType: 'jsc_gkzb_ztgu_stbh',
+                id: address
+            };
+            let data = await cockpitInfo(obj);
+
+            let obj_yjjbntmj = {
+                jscType: 'jsc_gdbh_ztgh_nt',
+                id: address
+            };
+            let obj_yjjbntmj_data = await cockpitInfo(obj_yjjbntmj);
+            // 永久基本农田保护面积
+            // that.yjjbntmj = obj_yjjbntmj_data.data[0].yjjbntmj;
+
+
+            let obj_kfbjmj = {
+                jscType: 'jsc_gkzb_ztgh_kfbj',
+                id: address
+            };
+            let obj_kfbjmj_data = await cockpitInfo(obj_kfbjmj);
+            // // 城市开发边界
+            // that.kfbjmj = obj_kfbjmj_data.data[0].kfbjmj;
+            // // 覆盖城镇开发边界
+            // that.bfb = obj_kfbjmj_data.data[0].bfb * 100;
+            store.setCockpitGkzb({
+                mj: data.data[0].mj,// 生态保护红线面积
+                ly_mj: data.data[0].ly_mj,// 路域生态保护红线
+                hy_mj: data.data[0].hy_mj,//近海岸面积
+                yjjbntmj: obj_yjjbntmj_data.data[0].yjjbntmj,// 永久基本农田保护面积
+                kfbjmj: obj_kfbjmj_data.data[0].kfbjmj,// 城市开发边界
+                bfb: obj_kfbjmj_data.data[0].bfb * 100,// 覆盖城镇开发边界
+
+            });
+            console.log(store.state.cockpit_gkzb, "sadas");
+
+        },
+        async gkzb() {
+            const that = this;
+            that.$refs.gkzb_ref["initData"]();
         },
         async pick_xzqh() {
             const that = this;
@@ -205,6 +245,9 @@ export default {
                     that.hysyq_xzqh();
                     // 土地收储
                     that.tdsc();
+                    // 管控指标
+                    that.gkzb();
+
 
                 }