卡掉预警 样式修改

src/components/MineMonitor/RightAiWarning.vue

@@ -23,20 +23,12 @@
 </template>
 
 <script setup lang="ts">
-
-  import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { ref, onMounted, onBeforeUnmount, nextTick, reactive } from 'vue'
 import { getCarLogList } from '@/api/index-dp';
-
-import {
- useMessage
-} from 'naive-ui';
+import { useMessage } from 'naive-ui';
 
 const message = useMessage();
 
-
-
-
-
 // 1. 定义 TS 类型接口
 interface ChartDataItem {
   name: string;
@@ -50,13 +42,8 @@ interface RingLayer {
 }
 
 // 2. 核心配置与数据（5个类别）
-var chartData: ChartDataItem[] = [
-//   { name: '疲劳驾驶', value: 10, color: '#409EFF' },
-//   { name: '违规打电话', value: 15, color: '#52C41A' },
-//   { name: '违规抽烟', value: 0, color: '#FAAD14' },
-//   { name: '左顾右盼', value: 2, color: '#FA8C16' },
-//   { name: '人脸丢失', value: 0, color: '#F5222D' },
-];
+// 使用 ref 创建响应式数据
+const chartData = ref<ChartDataItem[]>([]);
 
 // 调整环形图层尺寸以适应新的 canvas 尺寸，增大环间距离
 const ringLayers: RingLayer[] = [
@@ -106,7 +93,7 @@ const drawChart = () => {
 
   // 步骤2：按比例绘制数值扇区
   const drawSectors = () => {
-    const validData = chartData.filter((item) => item.value > 0);
+    const validData = chartData.value.filter((item) => item.value > 0);
     const total = validData.reduce((sum, item) => sum + item.value, 0);
     if (total === 0) {
       console.warn('No valid data to draw');
@@ -118,7 +105,7 @@ const drawChart = () => {
     // 先绘制背景
     drawBackground();
 
-    chartData.forEach((item, index) => {
+    chartData.value.forEach((item, index) => {
       if (item.value <= 0) return;
       const layer = ringLayers[index];
       if (!layer) return;
@@ -149,33 +136,36 @@ const drawChart = () => {
 
 // 5. 挂载后初始化图表（DOM 渲染完成后执行）
 onMounted(() => {
-
   getCarLogList().then((response) => {
     if (response.data.code == 200) {
-      chartData = response.data.data.map((item) => ({
+      // 使用 ref 的 value 属性更新数据，确保是响应式的
+      chartData.value = response.data.data.map((item: any) => ({
         name: item.name,
-        value: item.count*1,
+        value: item.count * 1,
         color: item.color
-      }))
-    console.log('*****************************', chartData)
+      }));
+      
+      console.log('*****************************', chartData.value);
 
       console.log('Component mounted, attempting to draw chart');
       // 使用 nextTick 确保 DOM 已完全渲染
       nextTick(() => {
         drawChart();
       });
-     
     } else {
-      message.error(response.data.msg)
+      message.error(response.data.msg);
     }
-  })
+  }).catch((error) => {
+    console.error('获取数据失败:', error);
+    message.error('获取数据失败');
+  });
 });
 
 // // 可选：监听数据变化重新绘制（如需动态更新数据可启用）
-// watch([() => chartData], () => {
+// import { watch } from 'vue';
+// watch(chartData, () => {
 //   drawChart();
 // }, { deep: true });
-
 </script>
 
 <style scoped lang="scss">
@@ -183,7 +173,7 @@ onMounted(() => {
   width: 100%;
   overflow: auto;
   background-image: url("@/assets/jinrun/module-bg.png");
-background-size: cover;
+  background-size: cover;
   background-repeat: no-repeat;
 }
 
@@ -212,10 +202,10 @@ background-size: cover;
   align-items: center;
   margin-bottom: 15px;
   width: 2.3rem;
-height: 0.28rem;
-background: #144f8025;
-border-radius: 0.14rem;
-padding-left: 0.3rem;
+  height: 0.28rem;
+  background: #144f8025;
+  border-radius: 0.14rem;
+  padding-left: 0.3rem;
 }
 
 .color-block {
@@ -232,19 +222,15 @@ padding-left: 0.3rem;
   width: 1.3rem;
   padding-left: .12rem;
 }
-// .legend-text:first-child{
-//   display: inline-block;
-//   text-align: left;
-// }
 
 .legend-name {
-  font-size: 12px;
+  font-size: .16rem;
   color: #fff;
   margin-bottom: 2px;
 }
 
 .legend-value {
-  font-size: 12px;
+  font-size: .16rem;
   color: #666;
 }