ai预警

src/api/index-dp.ts

@@ -46,6 +46,15 @@ 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 setAlarmStatusApi = async (command: string): Promise<any> => await axios.put(`/home/sound/${command}`, data);
+// 获取报警状态
+export const getAlarmStatusApi = async (): Promise<any> => await axios.get('/home/sound/status');
+
 // 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,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue';
+import { ref, onMounted, onBeforeUnmount, nextTick, reactive } from 'vue'
+import { getCarLogList } from '@/api/index-dp';
+import { useMessage } from 'naive-ui';
+
+const message = useMessage();
 
 // 1. 定义 TS 类型接口
 interface ChartDataItem {
@@ -38,13 +42,8 @@ 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' },
-];
+// 使用 ref 创建响应式数据
+const chartData = ref<ChartDataItem[]>([]);
 
 // 调整环形图层尺寸以适应新的 canvas 尺寸，增大环间距离
 const ringLayers: RingLayer[] = [
@@ -94,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');
@@ -106,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;
@@ -137,22 +136,36 @@ const drawChart = () => {
 
 // 5. 挂载后初始化图表（DOM 渲染完成后执行）
 onMounted(() => {
-  console.log('Component mounted, attempting to draw chart');
-  // 使用 nextTick 确保 DOM 已完全渲染
-  setTimeout(() => {
-    drawChart();
-  }, 0);
+  getCarLogList().then((response) => {
+    if (response.data.code == 200) {
+      // 使用 ref 的 value 属性更新数据，确保是响应式的
+      chartData.value = response.data.data.map((item: any) => ({
+        name: item.name,
+        value: item.count * 1,
+        color: item.color
+      }));
+      
+      console.log('*****************************', chartData.value);
+
+      console.log('Component mounted, attempting to draw chart');
+      // 使用 nextTick 确保 DOM 已完全渲染
+      nextTick(() => {
+        drawChart();
+      });
+    } else {
+      message.error(response.data.msg);
+    }
+  }).catch((error) => {
+    console.error('获取数据失败:', error);
+    message.error('获取数据失败');
+  });
 });
 
-// 可选：监听数据变化重新绘制（如需动态更新数据可启用）
-watch([() => chartData], () => {
-  drawChart();
-}, { deep: true });
-
-// 导出绘制函数以便外部调用
-defineExpose({
-  drawChart
-});
+// // 可选：监听数据变化重新绘制（如需动态更新数据可启用）
+// import { watch } from 'vue';
+// watch(chartData, () => {
+//   drawChart();
+// }, { deep: true });
 </script>
 
 <style scoped lang="scss">
@@ -160,7 +173,7 @@ defineExpose({
   width: 100%;
   overflow: auto;
   background-image: url("@/assets/jinrun/module-bg.png");
-background-size: cover;
+  background-size: cover;
   background-repeat: no-repeat;
 }
 
@@ -189,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 {
@@ -203,25 +216,21 @@ padding-left: 0.3rem;
 }
 
 .legend-text {
- display: flex;
-    gap: 0.1rem;
-    justify-content: space-between;
-        width: 1.3rem;
-    padding-left: .12rem;
+  display: flex;
+  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;
+  font-size: .16rem;
   color: #fff;
   margin-bottom: 2px;
 }
 
 .legend-value {
-  font-size: 12px;
+  font-size: .16rem;
   color: #666;
 }
 
@@ -243,4 +252,4 @@ padding-left: 0.3rem;
     text-shadow: 0rem 0rem 0rem rgba(5, 38, 68, 0.5);
   }
 }
-</style>
+</style>
\ No newline at end of file