perf: 3D图表图例优化

app/src/components/Headers.vue

@@ -104,7 +104,8 @@ export default {
   },
   methods: {
     ConfirmBtn(item) {
-      if (this.$route.path !== item.url) {
+      this.flag = item.id
+      if (item.url && this.$route.path !== item.url) {
         this.$router.push(item.url)
       }
     },

app/src/views/BasicInfo/components/VideoInfo.vue

@@ -9,9 +9,12 @@
         </div>
             <Monitor3D ref="monitor"/>
             <div class="info">
-                <div class="bg-num" @click="clickItem('生命通道监控点位')">
+                <div class="bg-num" @click="clickItem(1)">
                     <div class="line-box">
-                        <span class="line"></span>
+                        <span :class="{
+                            line: true,
+                            active: pieActive1
+                        }"></span>
                     <span>生命通道监控点位</span>
                     </div>
                    <div> 
@@ -29,9 +32,13 @@
                    
                 </div>
                 </div>
-                <div class="bg-num" @click="clickItem('电气火灾监测点位')">
+                <div class="bg-num" @click="clickItem(2)">
                     <div class="line-box">
-                        <span class="line line-g"></span>
+                        <span :class="{
+                            line: true,
+                            'line-b': true,
+                            active: pieActive2
+                        }"></span>
                         <span>电气火灾监测点位</span>
                     </div>
                    <div> 
@@ -49,9 +56,13 @@
                    
                 </div>
                 </div>
-                <div class="bg-num" @click="clickItem('水压检测点位')">
+                <div class="bg-num" @click="clickItem(3)">
                     <div class="line-box">
-                        <span class="line line-b"></span>
+                        <span :class="{
+                            line: true,
+                            active: pieActive3,
+                            'line-g': true
+                        }"></span>
                     <span>水压检测点位</span>
                     </div>
                    <div> 
@@ -77,9 +88,18 @@
 import Monitor3D from '@/components/Monitor3D.vue'
 export default{
 components:{Monitor3D},
+data() {
+    return {
+        pieActive1: true,
+        pieActive2: true,
+        pieActive3: true,
+        ctx: ['生命通道监控点位', '电气火灾监测点位', '水压检测点位']
+    }
+},
 methods: {
-    clickItem(name) {
-      this.$refs.monitor.legendToggleSelect(name)
+    clickItem(idx) {
+        this[`pieActive${idx}`] = !this[`pieActive${idx}`]
+        this.$refs.monitor.legendToggleSelect(this.ctx[idx - 1])
     }
 }
 }
@@ -132,14 +152,21 @@ methods: {
         display: inline-block;
         width: 14px;
         height: 14px;
-        background:#D5C307 ;
+        background:#d3d3d3 ;
         margin-right: 5px;
+        &.active {
+            background: #D5C307
+        }
     }
     .line-g{
-        background: #01ADEF !important;
+        &.active {
+            background: #12A647
+        }
     }
     .line-b{
-        background: #12A647 !important;
+        &.active {
+            background: #01ADEF
+        }
     }
 }
 </style>