样式修改

src/views/cockpit/common/XZQHPieChart.vue

@@ -30,7 +30,7 @@ export default {
                             value: 25,
                             itemStyle: {
                                 normal: {
-                                    // color: 'rgba(88,142,197,0.5)',
+                                    color: 'rgba(88,142,197,0.5)',
                                 },
                             },
                         });
@@ -40,7 +40,7 @@ export default {
                             value: 20,
                             itemStyle: {
                                 normal: {
-                                    color: 'rgba(0,0,0,0)',
+                                    color: 'rgba(88,142,197,0.1)',
                                 },
                             },
                         });
@@ -93,7 +93,7 @@ export default {
                 //                 }
                 //             }
 
-            }, ]
+            },]
             var total_datas = 0;
             for (var i = 0; i < echartData.length; i++) {
                 total_datas += echartData[i].value

src/views/cockpit/wpjg.vue

@@ -5,20 +5,20 @@
     </template>
     <div class="stacontent">
       <div class="item">
-        <span class="dlabel">图斑面积：</span>
+        <span class="dlabel">图斑面积:</span>
         <span class="dvalue">{{ (title.tb_mj / 1000).toFixed(2) || 0 }}k㎡</span>
       </div>
       <div class="item cursor" @click="draw_vector">
-        <span class="dlabel"> 图斑个数：</span>
+        <span class="dlabel"> 图斑个数:</span>
         <span class="dvalue">{{ title.tb_num || 0 }}个</span>
         <i style="pointer-events:all" :class="{ 'el-icon-view': true }"></i>
       </div>
       <div class="item">
-        <span class="dlabel">违法占地：</span>
+        <span class="dlabel">违法占地:</span>
         <span class="dvalue">{{ wf_mj_computed }}</span>
       </div>
       <div class="item">
-        <span class="dlabel"> 违法率：</span>
+        <span class="dlabel"> 违法率:</span>
         <span class="dvalue">{{ wfl_computed }}</span>
       </div>
     </div>
@@ -32,7 +32,7 @@
 
 <script>
 import borderTemplate from "./borderTemplate.vue";
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//这里可以导入其他文件（比如:组件，工具js，第三方插件js，json文件，图片文件等等）
 import { QueryOne, QueryList } from "../../api/cockpitNew";
 
 export default {
@@ -108,7 +108,7 @@ export default {
         tooltip: {
           show: false,
           trigger: 'axis',
-          formatter: '一行动一活动开展情况<br>{b}：{c}',
+          formatter: '一行动一活动开展情况<br>{b}:{c}',
           backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
           textStyle: {
             color: '#fff'

src/views/cockpit/ydjc.vue

@@ -11,46 +11,64 @@
         <div v-show="value == options[0].value">
             <div class="stacontent_ydjc">
                 <div class="item">
-                    <span class="dlabel">临时用地面积：</span>
+                    <span class="dlabel">临时用地面积:</span>
                     <span class="dvalue">21.24公顷</span>
                 </div>
                 <div class="item">
-                    <span class="dlabel"> 临时用地项目数：</span>
+                    <span class="dlabel"> 临时用地项目数:</span>
                     <span class="dvalue">543个</span>
                 </div>
 
             </div>
-            <!-- <ThreeStackedBarAndLine class="qxjc_echart"></ThreeStackedBarAndLine> -->
-            <XZQHPieChart></XZQHPieChart>
+            <ThreeStackedBarAndLine v-if="xzqh_flag" class="qxjc_echart"></ThreeStackedBarAndLine>
+            <XZQHPieChart v-else="!xzqh_flag"></XZQHPieChart>
 
         </div>
         <!-- 临时用地(复垦监测) -->
         <div v-show="value == options[1].value">
             <div class="stacontent_ydjc">
                 <div class="item">
-                    <span class="dlabel">应复垦面积：</span>
+                    <span class="dlabel">应复垦面积:</span>
                     <span class="dvalue">21.24公顷</span>
                 </div>
                 <div class="item">
-                    <span class="dlabel"> 已复垦面积：</span>
+                    <span class="dlabel"> 已复垦面积:</span>
                     <span class="dvalue">21.24公顷</span>
                 </div>
                 <div class="item">
-                    <span class="dlabel"> 复垦率：</span>
+                    <span class="dlabel"> 复垦率:</span>
                     <span class="dvalue">10.67%</span>
                 </div>
                 <div class="item">
-                    <span class="dlabel"> 超期未复垦率：</span>
+                    <span class="dlabel"> 超期未复垦率:</span>
                     <span class="dvalue">11.00%</span>
                 </div>
             </div>
             <ThreeStackedBarAndLine class="qxjc_echart"></ThreeStackedBarAndLine>
         </div>
+        <!-- 农专用地 -->
+        <div v-show="value == options[2].value">
+            <div class="stacontent_ydjc">
+                <div class="item">
+                    <span class="dlabel">建设项目数:</span>
+                    <span class="dvalue">1000个</span>
+                </div>
+                <div class="item">
+                    <span class="dlabel"> 项目用地面积:</span>
+                    <span class="dvalue">543.89公顷</span>
+                </div>
+                <div class="item">
+                    <span class="dlabel"> 农转用面积:</span>
+                    <span class="dvalue">543.89公顷</span>
+                </div>
+            </div>
+            <ThreeStackedBarAndLine></ThreeStackedBarAndLine>
+        </div>
     </div>
 </template>
 
 <script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//这里可以导入其他文件（比如:组件，工具js，第三方插件js，json文件，图片文件等等）
 import { QueryOne, QueryList } from "../../api/cockpitNew";
 import ThreeStackedBarAndLine from './common/ThreeStackedBarAndLine.vue';
 import XZQHPieChart from './common/XZQHPieChart.vue';
@@ -66,7 +84,8 @@ export default {
 
                 { value: "nzyd", label: "农转用地" },
             ],
-            value: 'lsyd_qxjc'
+            value: 'lsyd_qxjc',
+            xzqh_flag: true
         };
     },
     //监听属性 类似于data概念
@@ -83,7 +102,15 @@ export default {
         changeChartsLeft(e) {
             console.log('e: ', e);
 
-        }
+        },
+        switch_xzqh(value) {
+            if (value.id == '4602') {
+                this.xzqh_flag = true
+
+            } else {
+                this.xzqh_flag = false
+            }
+        },
     },
     mounted() {
         const that = this;

src/views/viewer.vue

@@ -65,7 +65,7 @@ import Ydjc from './cockpit/ydjc.vue';
 
 export default {
     name: 'viewer',
-    components: { KJZB, BJXM, TDSC, HYSY, TDSY, GDBH, STXF, WPJG, datePicker, JCBD, Boxcommon, InfoVector,YDHC, Ydjc },
+    components: { KJZB, BJXM, TDSC, HYSY, TDSY, GDBH, STXF, WPJG, datePicker, JCBD, Boxcommon, InfoVector, YDHC, Ydjc },
     data() {
         return {
             params: {
@@ -145,10 +145,11 @@ export default {
             this.$refs.gdbh_ref.init_zbph_hz(this.params);
             this.$refs.gdbh_ref.init_jcpg_hz(this.params);
             this.$refs.gdbh_ref.init_jcph_table(this.params);
-            
+
             // this.$refs.stxf_ref.setData({ id: this.params.id });
             // this.$refs.wpjg_ref.setData(this.params);
             // 卫片监管
+            this.$refs.wpjg_ref.switch_xzqh(this.params);
             this.$refs.wpjg_ref.init_wpjg_title(this.params);
 
             // 土地收储
@@ -174,8 +175,10 @@ export default {
             // 生态修复
             this.$refs.stxf_ref.getInfo(this.params);
             this.$refs.stxf_ref.tdzz(this.params);
-            // 卫片监管
-            this.$refs.wpjg_ref.switch_xzqh(this.params);
+            // 用地监管
+            this.$refs.ydjc_ref.switch_xzqh(this.params);
+
+
         },
         dateChange(date) {
             this.params.beginTime = date[0]
@@ -281,7 +284,7 @@ export default {
 
                         that.params.id = '4602'
                         that.setDatas()
-                        store.setCockpitRegion({ id: '4602',name:'三亚市' })
+                        store.setCockpitRegion({ id: '4602', name: '三亚市' })
 
                     }
                 }