状态修改

src/views/cockpit/common/DialWatch.vue

@@ -1,35 +1,37 @@
 <template>
     <div id="content_dial_watch">
-        <div class="space">
 
-            <div class="lt_box box_dial_watch">
-                <div class="text">
+        <div class="lt_box box_dial_watch">
+            <div class="text">
 
-                    <p>{{ dial_watch_info.lt.key }}</p>
-                    <span>{{ dial_watch_info.lt.value }}</span>{{ dial_watch_info.lt.unit }}
-                </div>
+                <p>{{ dial_watch_info.lt.key }}</p>
+                <span>{{ dial_watch_info.lt.value }}</span>{{ dial_watch_info.lt.unit }}
             </div>
-            <div class="lb_box box_dial_watch">
-                <div class="text">
-                    <p>{{ dial_watch_info.lb.key }}</p>
-                    <span>{{ dial_watch_info.lb.value }}</span>{{ dial_watch_info.lb.unit }}
-                </div>
+        </div>
+        <div class="lb_box box_dial_watch">
+            <div class="text">
+                <p>{{ dial_watch_info.lb.key }}</p>
+                <span>{{ dial_watch_info.lb.value }}</span>{{ dial_watch_info.lb.unit }}
             </div>
-            <div id="dial_watch_scjg" ref="dial_watch_scjg">
+        </div>
+        <div id="dial_watch_scjg" ref="dial_watch_scjg">
 
 
+        </div>
+        <div class="rt_box box_dial_watch">
+            <div class="text">
+                <p>{{ dial_watch_info.rt.key }}</p>
+                <span>{{ dial_watch_info.rt.value }}</span>{{ dial_watch_info.rt.unit }}
             </div>
-            <div class="rt_box box_dial_watch">
-                <div class="text">
-                    <p>{{ dial_watch_info.rt.key }}</p>
-                    <span>{{ dial_watch_info.rt.value }}</span>{{ dial_watch_info.rt.unit }}
-                </div>
-            </div>
-            <div class="rb_box box_dial_watch">
-                <div class="text">
-                    <p>{{ dial_watch_info.rb.key }}</p>
-                    <span>{{ dial_watch_info.rb.value }}</span>{{ dial_watch_info.rb.unit }}
-                </div>
+        </div>
+        <div class="rb_box box_dial_watch">
+            <div class="text" @click="draw_vector">
+                <p>{{ dial_watch_info.rb.key }}</p>
+                <span>{{ dial_watch_info.rb.value }}</span>{{ dial_watch_info.rb.unit }}
+                <!-- <i style="pointer-events:all" :class="[`${dial_watch_info.rb.viewer}` ,viewer_switch]"></i> -->
+
+                <i v-show="dial_watch_info.rb.viewer" style="pointer-events:all"
+                    :class="{ 'el-icon-view-switch': icon_switch, 'el-icon-view': true }"></i>
             </div>
         </div>
     </div>
@@ -41,7 +43,9 @@
 export default {
     components: {},
     data() {
-        return {};
+        return {
+            icon_switch: true,
+        };
     },
     //监听属性 类似于data概念
     computed: {},
@@ -78,6 +82,10 @@ export default {
     },
     //方法集合
     methods: {
+        draw_vector() {
+            this.icon_switch = !this.icon_switch
+            this.$emit('draw_vector')
+        },
         init_dial_watch(echart_data) {
             var myChart = echarts.init(this.$refs.dial_watch_scjg);
             var demoData = {
@@ -289,14 +297,17 @@ export default {
 </script>
 <style lang="scss"  scoped>
 .space {
-    width: 27rem;
-    height: 11rem;
-    position: relative;
-    top: -2rem;
-    z-index: -1;
+    // width: 27rem;
+    // height: 11rem;
+    // position: relative;
+    // top: -2rem;
+    // z-index: -1;
 }
 
 #content_dial_watch {
+    height: 9rem;
+    margin-top: -2rem;
+
     #dial_watch_scjg {
         // border: 1px red solid;
         width: 26rem;
@@ -360,7 +371,7 @@ export default {
         position: relative;
         top: -7rem;
         left: 16rem;
-        z-index: -1;
+        z-index: 101;
 
         .text {
             display: inline-block;
@@ -371,6 +382,9 @@ export default {
     }
 }
 
+.el-icon-view-switch {
+    color: #68f4fb;
+}
 
 .text {
     display: inline-block;

src/views/cockpit/tdsc.vue

@@ -13,7 +13,7 @@
       <BarGraph3D ref="tdsc_bar_graph"  />
     </div>
     <div v-show="tab == options[0].value">
-      <DialWatch :dial_watch_info="dial_watch_info" ref="tdsc_scjd" class="tdsc_scjd" />
+      <DialWatch :dial_watch_info="dial_watch_info" ref="tdsc_scjd" class="tdsc_scjd" @draw_vector="dra"/>
     </div>
   </div>
 </template>
@@ -62,7 +62,6 @@ export default {
           key: "完成收储项目",
           value: 0,
           unit: "个",
-
         },
       },
     };
@@ -77,7 +76,10 @@ export default {
   }, //生命周期 - 创建完成（可以访问当前this实例）
   beforeMount() { }, //生命周期 - 挂载之前
   methods: {
-
+    dra(){
+      console.log(123123);
+      
+    },
     change_model(e) {
       this.$forceUpdate();
     },
@@ -110,7 +112,6 @@ export default {
           key: "完成收储项目",
           value: data.data.sj_xzqdm_number,
           unit: "个",
-
         },
       }
       that.dial_watch_info = proData;

src/views/cockpit/tdsy.vue

@@ -66,7 +66,8 @@
       </div>
       <div v-show="left_value == left_options[0].value && right_value == right_options[0].value">
 
-        <DialWatch class="tdgy_gyjd" :dial_watch_info="dial_watch_info" ref="tdgy_gyjd" />
+        <DialWatch class="tdgy_gyjd" :dial_watch_info="dial_watch_info" ref="tdgy_gyjd"
+          @draw_vector="draw_vector_tdgy_gy_jd" />
 
         <pie3d id="tdgy_echart_gyjd" unit="公顷" :legendFlag=true ref="tdgy_echart_gyjd"></pie3d>
 
@@ -307,7 +308,7 @@ export default {
           key: "完成供应项目",
           value: data.data[0].sj_xzqhdm_number,
           unit: "个",
-
+          viewer: true
         },
       }
       that.dial_watch_info = proData;
@@ -831,6 +832,9 @@ export default {
       that.legendData = ['完成出让'];
       this.$refs.hysy_bar_graph.setOptions(this.legendData, this.xdata, this.result);
 
+    },
+    draw_vector_tdgy_gy_jd() {
+      console.log(11);
     }
   },
   mounted() {
@@ -1122,7 +1126,7 @@ export default {
   height: 8rem;
   margin-bottom: 0rem;
   position: relative;
-  top: -3rem;
+  top: 1rem;
   left: 2rem;
 }