add：canvas charts style toggle button

src/components/MineMonitor/RightAiWarning.vue

@@ -5,8 +5,8 @@
     <div class="chart-wrapper">
       <canvas
         ref="chartCanvasRef"
-        width="250"
-        height="250"
+        width="180"
+        height="180"
         class="chart-canvas"
       ></canvas>
       <div class="legend-container">
@@ -14,7 +14,7 @@
           <div class="color-block" :style="{ backgroundColor: item.color }"></div>
           <div class="legend-text">
             <span class="legend-name">{{ item.name }}</span>
-            <span class="legend-value">{{ item.value }}</span>
+            <span class="legend-value" :style="`color: ${item.color}`">{{ item.value }}</span>
           </div>
         </div>
       </div>
@@ -48,11 +48,11 @@ const chartData: ChartDataItem[] = [
 
 // 调整环形图层尺寸以适应新的 canvas 尺寸，增大环间距离
 const ringLayers: RingLayer[] = [
-  { outer: 100, inner: 85 },  // 第1层：疲劳驾驶
-  { outer: 80, inner: 65 },   // 第2层：违规打电话
-  { outer: 60, inner: 45 },   // 第3层：违规抽烟
-  { outer: 40, inner: 25 },   // 第4层：左顾右盼
-  { outer: 20, inner: 5 },    // 第5层：人脸丢失
+  { outer: 80, inner: 72 },  // 第1层：疲劳驾驶
+  { outer: 65, inner: 58 },   // 第2层：违规打电话
+  { outer: 50, inner: 43 },   // 第3层：违规抽烟
+  { outer: 35, inner: 28 },   // 第4层：左顾右盼
+  { outer: 20, inner: 12 },    // 第5层：人脸丢失
 ];
 
 // 3. 获取 Canvas 元素 Ref
@@ -167,6 +167,8 @@ defineExpose({
   display: flex;
   align-items: center;
   justify-content: space-between;
+  width: 100%;
+  height: 100%;
 }
 
 .chart-canvas {
@@ -185,23 +187,35 @@ defineExpose({
   display: flex;
   align-items: center;
   margin-bottom: 15px;
+  width: 2.3rem;
+height: 0.28rem;
+background: #144f8025;
+border-radius: 0.14rem;
+padding-left: 0.3rem;
 }
 
 .color-block {
-  width: 15px;
-  height: 15px;
+  width: .17rem;
+  height: .1rem;
   border: 1px solid #e0e0e0;
-  margin-right: 10px;
+  margin-right: .2rem;
 }
 
 .legend-text {
  display: flex;
-  flex-direction: column;
+    gap: 0.1rem;
+    justify-content: space-between;
+        width: 1.3rem;
+    padding-left: .12rem;
 }
+// .legend-text:first-child{
+//   display: inline-block;
+//   text-align: left;
+// }
 
 .legend-name {
   font-size: 12px;
-  color: #333;
+  color: #fff;
   margin-bottom: 2px;
 }
 

src/views/_builtin/cesiumDeom/index.vue

@@ -196,9 +196,9 @@ const navTo = () => {
       <div>
         
           <img :src="isLeftModulesVisible ? arrowLeftImg : arrowRightImg" alt="" srcset=""><br>
-          <span class="arrow-font">收</span>
+         <span class="arrow-font">{{isLeftModulesVisible ? '收' : '展'}}</span>
           <br>
-          <span class="arrow-font">起</span>
+          <span class="arrow-font">{{isLeftModulesVisible ? '起' : '开'}}</span>
           
       </div>
     </div>
@@ -215,9 +215,9 @@ const navTo = () => {
       <div>
         
           <img :src="isLeftModulesVisible ? arrowRightImg : arrowLeftImg" alt="" srcset=""><br>
-          <span class="arrow-font">收</span>
+          <span class="arrow-font">{{isLeftModulesVisible ? '收' : '展'}}</span>
           <br>
-          <span class="arrow-font">起</span>
+          <span class="arrow-font">{{isLeftModulesVisible ? '起' : '开'}}</span>
           
       </div>
     </div>