卫片

src/store/store.js

@@ -40,6 +40,10 @@ var store2 = {
         flattenNames: [],//存储压平的名称数组
         cockpit_date: null,
         viewer_flag: true,
+        cockpit_wpjg: {
+            title:{},
+            echart:{}
+        },
         cockpit_tdsc: {
             scjd: {
                 percentage: 0,

src/views/cockpit/gdbh.vue

@@ -270,7 +270,7 @@ export default {
           "低等地": 0
         });
       }
-       yData = echartData.map((res) => {
+      yData = echartData.map((res) => {
         for (let key in res) {
           return res[key]
         }
@@ -502,6 +502,7 @@ export default {
                 }
               }
             },
+            data: [22, 23, 18, 14],
 
           }, {
             type: 'bar',

src/views/cockpit/wpjg.vue

@@ -6,19 +6,19 @@
     <div class="stacontent">
       <div class="item">
         <span class="dlabel">图斑面积：</span>
-        <span class="dvalue">{{ sdata.xzqdm_num || 0 }}㎡</span>
+        <span class="dvalue">{{ title.tb_mj || 0 }}㎡</span>
       </div>
       <div class="item">
-        <span class="dlabel"> 图斑格数：</span>
-        <span class="dvalue">{{ sdata.jcmj || 0 }}个</span>
+        <span class="dlabel"> 图斑个数：</span>
+        <span class="dvalue">{{ title.tb_num || 0 }}个</span>
       </div>
       <div class="item">
         <span class="dlabel">违法占地：</span>
-        <span class="dvalue">{{ sdata.xzqdm_num || 0 }}㎡</span>
+        <span class="dvalue">{{ title.wf_mj || 0 }}㎡</span>
       </div>
       <div class="item">
         <span class="dlabel"> 违法率：</span>
-        <span class="dvalue">{{ sdata.jcmj || 0 }}%</span>
+        <span class="dvalue">{{ title.wfl || 0 }}%</span>
       </div>
     </div>
     <div id="wpjg_echart"></div>
@@ -31,14 +31,20 @@
 
 <script>
 import borderTemplate from "./borderTemplate.vue";
-import { QueryList } from "../../api/cockpitNew";
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+import { QueryOne, QueryList } from "../../api/cockpitNew";
 
 export default {
   components: { borderTemplate },
   data() {
     return {
       sdata: {},
+      title: {},
+      xData: [],
+      xData1: [],//检测板块
+      xData2: [],//占用耕地
+      xData3: [],//占用永久基本农田
+      xData4: [],//违反占地
     };
   },
   //监听属性 类似于data概念
@@ -231,6 +237,7 @@ export default {
 
     },
     init_wpjg_echart() {
+      const that = this;
       var tdsc_my_chart = window.echarts.init(document.getElementById('wpjg_echart'));
 
 
@@ -307,7 +314,7 @@ export default {
         },
         xAxis: {
           triggerEvent: true,
-          data: ['崖州区', '育才区', '天崖区', '吉阳区', '海棠区'],
+          data: that.xData,
           axisLabel: {
             show: true,
             fontSize: 12,
@@ -381,7 +388,7 @@ export default {
                 }
               }
             },
-            data: [120, 75, 90, 100, 25],
+            data: this.xData1,
           },
           {
             name: '占用耕地',
@@ -409,7 +416,8 @@ export default {
                 }
               }
             },
-            data: [120, 75, 90, 100, 123],
+            data: this.xData2,
+
           },
           {
             name: '占用永久基本农田',
@@ -436,7 +444,8 @@ export default {
                 }
               }
             },
-            data: [102, 130, 80, 100, 34],
+            data: this.xData3,
+
           }, {
             name: '违反占地',
             type: 'bar',
@@ -462,7 +471,7 @@ export default {
                 }
               }
             },
-            data: [102, 130, 80, 100, 45],
+            data: this.xData4,
           }
         ],
       }
@@ -470,6 +479,54 @@ export default {
 
       tdsc_my_chart.setOption(option);
     },
+    async init_wpjg_title(params) {
+      const that = this;
+      let obj = {
+        jscType: 'jsc_vpjg_hz',
+        id: params ? params.id : '4602',
+        beginTime: params ? params.beginTime : store.state.cockpit_date[0],
+        endTime: params ? params.endTime : store.state.cockpit_date[1],
+      };
+      let data = await QueryOne(obj);
+
+      this.title = data.data
+    },
+    async init_wpjg_echart_data(params) {
+      const that = this;
+      let obj = {
+        jscType: 'jsc_vpjg_qxxf',
+        id: params ? params.id : '4602',
+        beginTime: params ? params.beginTime : store.state.cockpit_date[0],
+        endTime: params ? params.endTime : store.state.cockpit_date[1],
+      };
+      let data = await QueryList(obj);
+
+      // this.title = data.data
+
+      let xData = [];
+      let xData1 = [];//检测板块
+      console.log(this.xData1,"xData1");
+
+      let xData2 = [];//占用耕地
+      console.log(this.xData2,"xData2");
+
+      let xData3 = [];//占用永久基本农田
+      console.log(this.xData3,"xData3");
+
+      let xData4 = [];//违反占地
+      console.log(this.xData4,"xData4");
+
+
+      data.data.forEach((res) => {
+        this.xData.push(res.name);
+        this.xData1.push(res.tb_mj);
+        this.xData2.push(res.zygdmj);
+        this.xData3.push(res.zyjbntmj);
+        this.xData4.push(res.wf_mj);
+      })
+
+      this.init_wpjg_echart();
+    },
     setData(datas) {
       this.GetQueryListztsh(datas);
       this.getQueryListyelx(datas);
@@ -518,8 +575,11 @@ export default {
   },
   mounted() {
     this.$nextTick((res) => {
-      this.init_wpjg_echart();
       this.init_wpjg_echart_xzqh();
+      this.init_wpjg_title();
+      this.init_wpjg_echart_data();
+
+
 
     })
   },
@@ -568,7 +628,7 @@ export default {
 
 #wpjg_echart_xzqh {
   left: 1rem;
-  top: 1rem;
+  top: -28rem;
   width: 26rem;
   height: 12rem;
 

src/views/viewer.vue

@@ -97,9 +97,12 @@ export default {
             this.$refs.gdbh_ref.init_zbph(this.params);
             this.$refs.gdbh_ref.init_info(this.params);
 
-            
+
             // this.$refs.stxf_ref.setData({ id: this.params.id });
-            this.$refs.wpjg_ref.setData(this.params);
+            // this.$refs.wpjg_ref.setData(this.params);
+            // 卫片监管
+            this.$refs.wpjg_ref.init_wpjg_title(this.params);
+
             this.$refs.tdsc_ref.init_scjd(this.params);
             // 土地供应
             this.$refs.tdgy_ref.init_tdgy_gy_jd(this.params);