内容提交

longyvfengyun

2023-11-17 14738594692929f696eab3b2726547659506baf7

 src/views/user/drivingAnalysis.vue

@@ -12,6 +12,7 @@

import cameraAlarm from "@/views/user/js/cameraAlarm";
import getGradientLineOption from "@/components/echarts/options/gradientLine";
import getRecentDay from "@/util/getRecentDay";
const alarmLine = ref(null);
const {
   searchDriveAlarm,
@@ -21,9 +22,20 @@
const setAlarmLine = async ()=>{
   let data = await searchDriveAlarm();
   const alarmLineOption = getGradientLineOption();
   let recentDays = getRecentDay(7);
   for(let i=0; i<recentDays.length; i++) {
      let itemDay = recentDays[i];
      for(let j=0; j<data.length; j++) {
         let item = data[j];
         if(itemDay.date === item.date) {
            itemDay.value = item.num;
            break;
         }
      }
   }
   alarmLineOption.series[0].name = "";
   alarmLineOption.series[0].data = data.map(item=>{
      return [item.date, item.num];
   alarmLineOption.series[0].data = recentDays.map(item=>{
      return [item.date, item.value];
   });
   alarmLine.value.setOption(alarmLineOption);
}
@@ -33,11 +45,56 @@
   photo.value = data.photo;
}

import {
   recentDaysDriveAlarmModule,
   todayDriveAlarmModule
} from "@/views/moudle/driveInf/driveInf";
import getHorizontalTechnologyOption from "@/components/echarts/options/horizontalTechnologyBar";

const {
   getRecentDaysDriveAlarm
} = recentDaysDriveAlarmModule();
const rosePieOption = getRosePieOption();
const searchRecentDaysAlarm = async ()=>{
   let data = await getRecentDaysDriveAlarm();
   rosePieOption.series[0].data = data.map(item=>{
      return {
         name: item.name,
         value: item.data.length
      }
   }).sort(function(a, b) {
      return a.value - b.value
   });
   rosePie.value.setOption(rosePieOption);
}

const alarmBar = ref(null);
let alarmBarOption = getHorizontalTechnologyOption();

const {
   getTodayDriveAlarm
} = todayDriveAlarmModule();

const searchTodayAlarm = async ()=>{
   let data = await getTodayDriveAlarm();
   alarmBarOption = getHorizontalTechnologyOption(data.map(item=>{
      return {
         name: item.regularName,
         value: item.num
      }
   }));
   alarmBar.value.setOption(alarmBarOption);
}


onMounted(()=>{
   rosePie.value.setOption(rosePieOption);
   alarmBar.value.setOption(alarmBarOption);

   setAlarmLine();
   setLastAlarm();
   const rosePieOption = getRosePieOption();
   rosePie.value.setOption(rosePieOption);
   searchRecentDaysAlarm();
   searchTodayAlarm();
});
</script>

@@ -96,22 +153,7 @@
            <flex-box>
               <div class="flex-box-content">
                  <chart-box title="告警统计">
                     <div class="risk-act-wrapper">
                        <div class="risk-act-list">
                           <div class="risk-act-item">
                              <div class="risk-act-title">H</div>
                              <div class="risk-act-content">高风险行为<span class="risk-act-number danger">0</span></div>
                           </div>
                           <div class="risk-act-item">
                              <div class="risk-act-title">M</div>
                              <div class="risk-act-content">中风险行为<span class="risk-act-number warning">0</span></div>
                           </div>
                           <div class="risk-act-item">
                              <div class="risk-act-title">L</div>
                              <div class="risk-act-content">低风险行为<span class="risk-act-number">0</span></div>
                           </div>
                        </div>
                     </div>
                     <hdw-chart ref="alarmBar"></hdw-chart>
                  </chart-box>
               </div>
            </flex-box>