内容提交

longyvfengyun

2023-11-17 14738594692929f696eab3b2726547659506baf7

内容提交

 src/components/echarts/options/gradientLine.js

@@ -42,7 +42,7 @@
        if(isNaN(min)) {
          return 0;
        }else {
          return min * option.minRatio;
          return (min * option.minRatio).toHold(0);
        }
      },
      max(data) {
@@ -50,7 +50,7 @@
        if(isNaN(max)) {
          return 1;
        }else {
          return max * option.maxRatio;
          return (max * option.maxRatio).toHold(0);
        }
      },
      axisLabel: {

 src/views/moudle/driveInf/apis.js

New file
@@ -0,0 +1,24 @@
import axios from "@/assets/js/axios";

/**
 * 查询最近7天驾驶告警统计
 * @return {Promise<AxiosResponse<any>> | *}
 */
export const searchRecentDaysDriveAlarm = ()=>{
  return axios({
    method: "GET",
    url: "/monitor/boxCameraAlarm/statisticDriveAlarmRegularLimits",
  });
}


/**
 * 查询今天的驾驶告警
 * @return {Promise<AxiosResponse<any>> | *}
 */
export const searchTodayDriveAlarm = ()=>{
  return axios({
    method: "GET",
    url: "/monitor/boxCameraAlarm/statisticDriveAlarmRegularLimitsToday",
  });
}

 src/views/moudle/driveInf/driveInf.js

New file
@@ -0,0 +1,51 @@
import {
  searchRecentDaysDriveAlarm, searchTodayDriveAlarm
} from "./apis"
export const recentDaysDriveAlarmModule = ()=>{
  const getRecentDaysDriveAlarm = async ()=>{
    try {
      const res = await searchRecentDaysDriveAlarm();
      const rs = res.data;
      let data = [];
      if(rs.code === 1) {
        data = rs.data.map(item=>{
          let keys = Object.keys(item);
          let key = keys[0];
          return {
            name: key,
            data: item[key]
          }
        });
      }
      return data;
    }catch (e) {
      console.log(e);
      return [];
    }
  }

  return {
    getRecentDaysDriveAlarm
  }
}

export const todayDriveAlarmModule = ()=>{
  const getTodayDriveAlarm = async ()=>{
    try {
      const res = await searchTodayDriveAlarm();
      const rs = res.data;
      let data = [];
      if(rs.code === 1) {
        data = rs.data;
      }
      return data;
    }catch (e) {
      console.log(e);
      return [];
    }
  }

  return {
    getTodayDriveAlarm
  }
}

 src/views/user/boxList.vue

@@ -1,11 +1,113 @@
<script setup>
import {ref} from "vue";

const tableData = ref([]);

const carName = ref(null);
</script>

<template>
    <div>汽车列表</div>
    <div class="page-container">
        <div class="page-content">
            <div class="page-header">
                <div class="input-list">
                    <div class="input-item">
                        <div class="input-wrapper">
                            <div class="input-label">车辆名称</div>
                            <div class="input-content">
                                <el-input
                                    v-model="carName"
                                    size="large"
                                    placeholder="Please Input"/>
                            </div>
                        </div>
                    </div>
                    <div class="input-item">
                        <div class="input-wrapper">
                            <div class="input-label">在线状态</div>
                            <div class="input-content">
                                <el-input
                                    v-model="carName"
                                    size="large"
                                    placeholder="Please Input"/>
                            </div>
                        </div>
                    </div>
                    <div class="input-item">
                        <div class="input-wrapper">
                            <div class="input-label">国标设备编码</div>
                            <div class="input-content">
                                <el-input
                                    v-model="carName"
                                    size="large"
                                    placeholder="Please Input"/>
                            </div>
                        </div>
                    </div>
                    <div class="input-item">
                        <el-button type="primary" plain>查询</el-button>
                    </div>
                </div>
            </div>
            <div class="page-content">
                <el-table :data="tableData" height="100%">
                    <el-table-column prop="date" label="Date" />
                    <el-table-column prop="name" label="Name" />
                    <el-table-column prop="address" label="Address" />
                </el-table>
            </div>
            <div class="page-footer">
                <div class="el-pagination-container">
                    <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="1000"></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.page-container {
    height: 100%;
    padding: 12px;
    .page-content {
        display: flex;
        height: 100%;
        border-radius: 4px;
        box-shadow: 0 0 12px rgba(0, 0, 0, .16);
        flex-direction: column;
        .page-header {
            padding: 8px;
        }
        .page-content {
            flex: 1;
            overflow-y: auto;
        }
        .page-footer {
            padding: 8px 0;
            text-align: center;
            .el-pagination-container {
                display: inline-block;
            }
        }
    }
}

.input-list {
    .input-item {
        display: inline-block;
        margin-left: 8px;
    }
}
.input-wrapper {
    display: flex;
    .input-content {
        width: 160px;
    }
    .input-label {
        font-size: 14px;
        line-height: 40px;
        vertical-align: bottom;
        margin-right: 8px;
    }
}
</style>

 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>