卡掉预警

src/api/index-dp.ts

@@ -46,6 +46,9 @@ export const getEnvironmentData = async (): Promise<any> => await axios.get('/ho
 // 获取在线数据接口
 export const getOnlineData = async (): Promise<any> => await axios.get('/home/online/data');
 
+// 获取车辆日志列表接口
+export const getCarLogList = async (): Promise<any> => await axios.get('home/car/log');
+
 // export const getOnlineAlarmList = async (): Promise<any> => await axios.get('/home/online/alarm/list');
 // export const getOnlineAlarmList = async (): Promise<any> => await axios.get('/home/online/alarm/list');
 // export const getOnlineAlarmList = async (): Promise<any> => await axios.get('/home/online/alarm/list');

src/components/MineMonitor/RightAiWarning.vue

@@ -11,7 +11,7 @@
       ></canvas>
       <div class="legend-container">
         <div v-for="(item, index) in chartData" :key="index" class="legend-item">
-          <div class="color-block" :style="{ backgroundColor: item.color }"></div>
+          <div class="color-block" :style="{ backgroundColor: item.color || 'fff' }"></div>
           <div class="legend-text">
             <span class="legend-name">{{ item.name }}</span>
             <span class="legend-value" :style="`color: ${item.color}`">{{ item.value }}</span>
@@ -23,7 +23,19 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue';
+
+  import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { getCarLogList } from '@/api/index-dp';
+
+import {
+ useMessage
+} from 'naive-ui';
+
+const message = useMessage();
+
+
+
+
 
 // 1. 定义 TS 类型接口
 interface ChartDataItem {
@@ -38,12 +50,12 @@ interface RingLayer {
 }
 
 // 2. 核心配置与数据（5个类别）
-const 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' },
+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' },
 ];
 
 // 调整环形图层尺寸以适应新的 canvas 尺寸，增大环间距离
@@ -137,22 +149,33 @@ const drawChart = () => {
 
 // 5. 挂载后初始化图表（DOM 渲染完成后执行）
 onMounted(() => {
-  console.log('Component mounted, attempting to draw chart');
-  // 使用 nextTick 确保 DOM 已完全渲染
-  setTimeout(() => {
-    drawChart();
-  }, 0);
-});
 
-// 可选：监听数据变化重新绘制（如需动态更新数据可启用）
-watch([() => chartData], () => {
-  drawChart();
-}, { deep: true });
+  getCarLogList().then((response) => {
+    if (response.data.code == 200) {
+      chartData = response.data.data.map((item) => ({
+        name: item.name,
+        value: item.count*1,
+        color: item.color
+      }))
+    console.log('*****************************', chartData)
 
-// 导出绘制函数以便外部调用
-defineExpose({
-  drawChart
+        console.log('Component mounted, attempting to draw chart');
+        // 使用 nextTick 确保 DOM 已完全渲染
+        nextTick(() => {
+          drawChart();
+        });
+     
+    } else {
+      message.error(response.data.msg)
+    }
+  })
 });
+
+// // 可选：监听数据变化重新绘制（如需动态更新数据可启用）
+// watch([() => chartData], () => {
+//   drawChart();
+// }, { deep: true });
+
 </script>
 
 <style scoped lang="scss">