首页调试

董国庆

2025-04-07 14ba49189539abdc952e1b18f66e88beef93cd04

首页调试

 src/view/home/index.vue

@@ -6,55 +6,28 @@
      <div class="carCount">

        <div class="title">车辆统计</div>

        <div class="fir">

          <div class="countCard">

            <img class="iconImg" src="../../assets//homeImg/img1.png" />

          <div

            class="countCard"

            v-for="(item, index) in carCountData.slice(0, 3)"

            :key="item.id"

          >

            <img class="iconImg" :src="imgList[index]" />

            <div>

              <div class="name">出租车(辆)</div>

              <div class="num">888</div>

            </div>

          </div>

          <div class="countCard">

            <img class="iconImg" src="../../assets//homeImg/img2.png" />

            <div>

              <div class="name">网约车(辆)</div>

              <div class="num">888</div>

            </div>

          </div>

          <div class="countCard">

            <img class="iconImg" src="../../assets//homeImg/img3.png" />

            <div>

              <div class="name">客运(辆)</div>

              <div class="num">888</div>

              <div class="name">{{ item.name || "" }}(辆)</div>

              <div class="num">{{ item.carNum || 0 }}</div>

            </div>

          </div>

        </div>

        <div class="sec">

          <div class="countCard">

            <img class="iconImg" src="../../assets//homeImg/img4.png" />

          <div

            class="countCard"

            v-for="(item, index) in carCountData.slice(3, 7)"

            :key="item.id"

          >

            <img class="iconImg" :src="imgList[index + 3]" />

            <div>

              <div class="name">郊游(辆)</div>

              <div class="num">888</div>

            </div>

          </div>

          <div class="countCard">

            <img class="iconImg" src="../../assets//homeImg/img5.png" />

            <div>

              <div class="name">公交车(辆)</div>

              <div class="num">888</div>

            </div>

          </div>

          <div class="countCard">

            <img class="iconImg" src="../../assets//homeImg/img6.png" />

            <div>

              <div class="name">危险品(辆)</div>

              <div class="num">888</div>

            </div>

          </div>

          <div class="countCard">

            <img class="iconImg" src="../../assets//homeImg/img7.png" />

            <div>

              <div class="name">货运(辆)</div>

              <div class="num">888</div>

              <div class="name">{{ item.name || "" }}(辆)</div>

              <div class="num">{{ item.carNum || 0 }}</div>

            </div>

          </div>

        </div>

@@ -66,14 +39,14 @@
          <div class="statusCard">

            <div class="statusLeft">

              <div class="name">在线</div>

              <div class="num">8888</div>

              <div class="num">{{ carStatusData.online || 0 }}</div>

            </div>

            <el-progress

              type="circle"

              :width="20"

              :show-text="false"

              stroke-linecap="butt"

              :percentage="25"

              :percentage="carStatusData.onlinePercent"

              color="rgba(91, 143, 249, 1)"

              define-back-color="rgba(91, 143, 249, 0.25)"

              class="progressCard"

@@ -83,14 +56,14 @@
          <div class="statusCard">

            <div class="statusLeft">

              <div class="name">离线</div>

              <div class="num">8888</div>

              <div class="num">{{ carStatusData.offline || 0 }}</div>

            </div>

            <el-progress

              type="circle"

              :width="20"

              :show-text="false"

              stroke-linecap="butt"

              :percentage="25"

              :percentage="carStatusData.offlinePercent"

              color="rgba(93, 112, 146, 1)"

              define-back-color="rgba(93, 112, 146, 0.25)"

              class="progressCard"

@@ -101,14 +74,14 @@
          <div class="statusCard">

            <div class="statusLeft">

              <div class="name">故障</div>

              <div class="num">8888</div>

              <div class="num">{{ carStatusData.breakdown || 0 }}</div>

            </div>

            <el-progress

              type="circle"

              :width="20"

              :show-text="false"

              stroke-linecap="butt"

              :percentage="25"

              :percentage="carStatusData.breakdownPercent"

              color="rgba(253, 83, 118, 1)"

              define-back-color="rgba(253, 83, 118, 0.25)"

              class="progressCard"

@@ -118,14 +91,14 @@
          <div class="statusCard">

            <div class="statusLeft">

              <div class="name">异常</div>

              <div class="num">8888</div>

              <div class="num">{{ carStatusData.abnormal || 0 }}</div>

            </div>

            <el-progress

              type="circle"

              :width="20"

              :show-text="false"

              stroke-linecap="butt"

              :percentage="25"

              :percentage="carStatusData.abnormalPercent"

              color="rgba(246, 189, 22, 1)"

              define-back-color="rgba(246, 189, 22, 0.25)"

              class="progressCard"

@@ -144,34 +117,50 @@
        <div class="companyCard">

          <div class="lineCard"></div>

          <div class="name">运营公司(家)</div>

          <div class="value">88888</div>

          <div class="value">{{ carStatusData.enterprise || 0 }}</div>

        </div>

        <div class="companyCard">

          <div class="lineCard"></div>

          <div class="name">运营公司(家)</div>

          <div class="value">88888</div>

          <div class="name">运营车辆(辆)</div>

          <div class="value">{{ carStatusData.car || 0 }}</div>

        </div>

        <div class="companyCard">

          <div class="lineCard"></div>

          <div class="name">运营公司(家)</div>

          <div class="value">88888</div>

          <div class="name">驾驶员(人)</div>

          <div class="value">{{ carStatusData.driver || 0 }}</div>

        </div>

      </div>

      <!-- 今日预警 -->

      <div class="todayWarn">

        <div class="title">今日预警</div>

        <div class="warnList">

        <div class="warnList" v-if="warnList.length > 0">

          <div

            class="warnItem"

            v-for="item in 5"

            :key="item"

            :class="['oneWarn', 'twoWarn', 'threeWarn', 'fourWarn'][item - 1]"

            v-for="(item, index) in warnList"

            :key="index"

            :class="

              item.warnLevel

                ? ['oneWarn', 'twoWarn', 'threeWarn', 'fourWarn'][

                    item.warnLevel - 1

                  ]

                : 'fiveWarn'

            "

          >

            <div class="grade">一级</div>

            <div class="grade">

              {{

                item.warnLevel

                  ? ["一级", "二级", "三级", "四级"][item.warnLevel - 1]

                  : "-"

              }}

            </div>

            <div class="info">

              53453453245 川A99999 车辆急刹车 20分钟 11:09:09

              {{ item.vehicleNumber  }} {{ item.warnType  }}

              {{ item.keepTime }} {{ item.startTime }}

            </div>

          </div>

        </div>

        <div class="noData" v-else>

          <el-empty description="暂无数据" :image-size="80"></el-empty>

        </div>

      </div>

      <!-- 预警情况统计 -->

@@ -192,7 +181,7 @@
              class="rankRight"

              :class="[0, 1, 2].includes(index) ? 'rankColor' : ''"

            >

              <div class="rank" :style="{ width: item.value + '%' }"></div>

              <div class="rank" :style="{ width: item.percentage + '%' }"></div>

            </div>

          </div>

        </div>

@@ -209,29 +198,41 @@
import html2canvas from "html2canvas";

import AMapLoader from "@amap/amap-jsapi-loader";

import flvjs from "flv.js";

import {

  getCarCount,

  getCarStatusCount,

  getMapCarList,

  getCarWarnList,

  getWarnGroupCount,

  getWarnGroupCountTop10,

  getCarInfoById,

} from "./service";

export default {

  data() {

    return {

      flvPlayer: null,

      activeIndex: "1",

      activeIndex2: "1",

      countList: [1, 2, 3], //预警情况统计数据

      rankList: [

        { name: "射洪客运公司", value: 90 },

        { name: "滴滴网约车客运公司", value: 80 },

        { name: "滴滴网约车客运公司", value: 70 },

        { name: "滴滴网约车客运公司", value: 60 },

        { name: "滴滴网约车客运公司", value: 50 },

        { name: "滴滴网约车客运公司", value: 40 },

        { name: "滴滴网约车客运公司", value: 30 },

        { name: "滴滴网约车客运公司", value: 20 },

        { name: "滴滴网约车客运公司", value: 10 },

        { name: "滴滴网约车客运公司", value: 0 },

      ], //预警排行榜数据



      map: null, //地图实例



      timer: null,

      markers: [],

      map: null,

      AMap: null,

      infoWindow: null,

      imgList: [

        require("../../assets//homeImg/img1.png"),

        require("../../assets//homeImg/img2.png"),

        require("../../assets//homeImg/img3.png"),

        require("../../assets//homeImg/img4.png"),

        require("../../assets//homeImg/img5.png"),

        require("../../assets//homeImg/img6.png"),

        require("../../assets//homeImg/img7.png"),

      ],

      countList: [], //预警情况统计数据

      rankList: [], //预警排行榜数据

      carList: [], //车辆列表数据

      carCountData: [], //车辆统计数据

      carStatusData: {}, //车辆状态数据

      warnList: [], //预警列表数据

    };

  },

  watch: {

@@ -251,7 +252,6 @@
    },

  },

  created() {

    //初始化窗口点击事件

    window.toCarDetail = (record) => {

      this.toCarDetail(record);

    };

@@ -263,94 +263,176 @@
    };

  },

  mounted() {

    let arr = [

      {

        vehicleType: "出租车",

        vehicleInfo: {

          licensePlate: "川A12345",

          vehicleModel: "BYD E6",

          color: "Red",

        },



        latitude: 31.523333,

        longitude: 105.444444,

      },

      {

        vehicleType: "公交车",

        vehicleInfo: {

          licensePlate: "川A67890",

          vehicleModel: "Yutong ZK6120",

          color: "Blue",

        },



        latitude: 31.512222,

        longitude: 105.432111,

      },

      {

        vehicleType: "郊游",

        vehicleInfo: {

          licensePlate: "川A34567",

          vehicleModel: "Toyota Coaster",

          color: "White",

        },



        latitude: 31.498889,

        longitude: 105.421111,

      },

      {

        vehicleType: "春运",

        vehicleInfo: {

          licensePlate: "川A90123",

          vehicleModel: "King Long XMQ6120",

          color: "Yellow",

        },



        latitude: 31.485556,

        longitude: 105.412222,

      },

      {

        vehicleType: "快递物流车",

        vehicleInfo: {

          licensePlate: "川A45678",

          vehicleModel: "JAC HFC5041",

          color: "Green",

        },



        latitude: 31.472222,

        longitude: 105.402111,

      },

      {

        vehicleType: "网约车",

        vehicleInfo: {

          licensePlate: "川A11111",

          vehicleModel: "Geely GC2",

          color: "Black",

        },



        latitude: 31.462222,

        longitude: 105.392111,

      },

      {

        vehicleType: "客运",

        vehicleInfo: {

          licensePlate: "川A22222",

          vehicleModel: "Yutong ZK6120",

          color: "Gray",

        },



        latitude: 31.452222,

        longitude: 105.382111,

      },

    ];

    this.carList = arr;

    // 调用所有接口

    this.getCarCountData();

    this.getCarStatusData();

    // this.getMapCarData(); // 移除这里的调用，因为 initMap 中会调用

    this.getWarnListData();

    this.getWarnGroupData();

    this.getWarnTop10Data();



    this.initMap();

    setTimeout(() => {

      this.addMarker(this.carList, [105.444444, 31.523333]);

      this.getCountList();

    }, 1000);

    // 设置定时器，每分钟刷新一次数据

    this.timer = setInterval(() => {

      this.getCarCountData();

      this.getCarStatusData();

      this.getMapCarData(); // 保留定时器中的调用

      this.getWarnListData();

      this.getWarnGroupData();

      this.getWarnTop10Data();

    }, 60000);

  },

  beforeDestroy() {

    if (this.timer) {

      clearInterval(this.timer);

    }

    if (this.markers && this.markers.length > 0) {

      this.markers.forEach((marker) => {

        marker.setMap(null);

      });

      this.markers = [];

    }

    if (this.infoWindow) {

      this.infoWindow.close();

    }

    if (this.flvPlayer) {

      this.flvPlayer.destroy();

      this.flvPlayer = null;

    }

  },

  beforeRouteLeave(to, from, next) {

    if (this.infoWindow) {

      this.infoWindow.close();

    }

    if (this.flvPlayer) {

      this.flvPlayer.destroy();

      this.flvPlayer = null;

    }

    next();

  },

  methods: {

    // 获取车辆统计数据

    async getCarCountData() {

      try {

        const res = await getCarCount();

        this.carCountData = res;

      } catch (error) {

        this.$message.error("获取车辆统计数据失败");

      }

    },

    // 获取车辆状态数据

    async getCarStatusData() {

      try {

        const res = await getCarStatusCount();

        // 设置默认值为0，防止空值

        const online = Number(res.online) || 0;

        const offline = Number(res.offline) || 0;

        const breakdown = Number(res.breakdown) || 0;

        const abnormal = Number(res.abnormal) || 0;

        const enterprise = Number(res.enterprise) || 0;

        const car = Number(res.car) || 0;

        const driver = Number(res.driver) || 0;



        // 计算总数

        const total = online + offline + breakdown + abnormal;



        // 计算百分比，如果总数为0则百分比为0

        const onlinePercent =

          total > 0 ? Math.round((online / total) * 100) : 0;

        const offlinePercent =

          total > 0 ? Math.round((offline / total) * 100) : 0;

        const breakdownPercent =

          total > 0 ? Math.round((breakdown / total) * 100) : 0;

        const abnormalPercent =

          total > 0 ? Math.round((abnormal / total) * 100) : 0;

        // 更新数据

        this.carStatusData = {

          online,

          offline,

          breakdown,

          abnormal,

          enterprise,

          car,

          driver,

          total,

          onlinePercent,

          offlinePercent,

          breakdownPercent,

          abnormalPercent,

        };

      } catch (error) {

        this.$message.error("获取车辆状态数据失败");

        // 设置默认值

        this.carStatusData = {

          online: 0,

          offline: 0,

          breakdown: 0,

          abnormal: 0,

          enterprise: 0,

          car: 0,

          driver: 0,

          total: 0,

          onlinePercent: 0,

          offlinePercent: 0,

          breakdownPercent: 0,

          abnormalPercent: 0,

        };

      }

    },

    // 获取地图车辆数据

    async getMapCarData() {

      try {

        const res = await getMapCarList();

        this.carList = res;

        // 确保地图已初始化后再更新标记

        if (this.AMap && this.map) {

          this.updateMarkers(res);

        }

      } catch (error) {

        this.$message.error("获取地图车辆数据失败");

      }

    },

    // 获取预警列表数据

    async getWarnListData() {

      try {

        const res = await getCarWarnList();

        this.warnList = res.records;

      } catch (error) {

        this.$message.error("获取预警列表数据失败");

      }

    },

    // 获取预警统计情况数据

    async getWarnGroupData() {

      try {

        const res = await getWarnGroupCount();

        this.countList = res;

        this.getCountList();

      } catch (error) {

        this.$message.error("获取预警统计情况数据失败");

      }

    },

    // 获取预警排行数据

    async getWarnTop10Data() {

      try {

        const res = await getWarnGroupCountTop10();

        // 判断返回的数组是否为空

        if (!res || res.length === 0) {

          this.rankList = [];

          return;

        }

        // 计算所有num的总和

        const total = res.reduce((sum, item) => sum + (item.num || 0), 0);

        // 为每个数据项添加百分比属性

        this.rankList = res.map((item) => ({

          ...item,

          percentage:

            total > 0 ? (((item.num || 0) / total) * 100).toFixed(2) : 0,

        }));

      } catch (error) {

        this.$message.error("获取预警排行数据失败");

        this.rankList = [];

      }

    },

    // 初始化地图

    initMap() {

      window._AMapSecurityConfig = {

@@ -367,111 +449,101 @@
        ],

      })

        .then((AMap) => {

          this.AMap = AMap;

          this.map = new AMap.Map("mapContainer", {

            center: [105.574542, 30.5061493],

            zoom: 15,

            zoom: 8,

          });

        })

        .catch((e) => {

          console.log(e);

        });

    },



    // 地图点位渲染

    addMarker(arr, centerList) {

      this.map = new AMap.Map("mapContainer", {

        resizeEnable: true,

        zoom: 15,

        center: centerList || [105.444444, 31.523333],

      });



      // var cluster;

      // var _renderClusterMarker = function (context) {

      //   //context 为回调参数，

      //   //包含如下属性 marker:当前聚合点，count:当前聚合点内的点数量

      //   var clusterCount = context.count; //聚合点内点数量

      //   context.marker.setContent("<div>" + clusterCount + "</div>");

      // };

      // var renderMarker = function (context) {

      //   //context 为回调参数，

      //   var clusterCount = context.count;

      //   //包含如下属性 marker:当前聚合点，count:当前聚合点内的点数量

      //   context.marker.setContent("<div>" + clusterCount + "</div>");

      // };

      // if (cluster) {

      //   cluster.setMap(null);

      // }

      // if (arr.length > 0) {

      //   let points = arr.map((item) => {

      //     return {

      //       lnglat: [Number(item.longitude), Number(item.latitude)],

      //     };

      //   });

      //   cluster = new AMap.MarkerCluster(this.map, points, {

      //     gridSize: 60,

      //     renderClusterMarker: _renderClusterMarker, //上述步骤的自定义聚合点样式

      //     renderMarker: renderMarker, //上述步骤的自定义非聚合点样式

      //   });

      // }



      var infoWindow = new AMap.InfoWindow({

          this.infoWindow = new AMap.InfoWindow({

        offset: new AMap.Pixel(30, 30),

        autoMove: true,

        anchor: "top-center",

      });

          this.getMapCarData();

        })

        .catch((e) => {

          this.$message.error("地图加载失败");

        });

    },

    // 更新地图标记

    updateMarkers(arr) {

      if (!this.AMap) {

        return;

      }

      if (this.markers && this.markers.length > 0) {

        this.markers.forEach((marker) => {

          marker.setMap(null);

        });

        this.markers = [];

      }



      if (arr.length > 0) {

        const iconMap = {

          出租车: {

            icon: require("../../assets/homeImg/taxi.png"),

            size: new AMap.Size(75, 37),

            size: new this.AMap.Size(75, 37),

          },

          公交车: {

            icon: require("../../assets/homeImg/bus.png"),

            size: new AMap.Size(62, 34),

            size: new this.AMap.Size(62, 34),

          },

          危险品: {

            icon: require("../../assets/homeImg/risk.png"),

            size: new this.AMap.Size(69, 32),

          },

          郊游: {

            icon: require("../../assets/homeImg/risk.png"),

            size: new AMap.Size(69, 32),

          },

          春运: {

            icon: require("../../assets/homeImg/outing.png"),

            size: new AMap.Size(61, 31),

            size: new this.AMap.Size(61, 31),

          },

          快递物流车: {

          货运: {

            icon: require("../../assets/homeImg/expressage.png"),

            size: new AMap.Size(60, 31),

            size: new this.AMap.Size(60, 31),

          },

          网约车: {

            icon: require("../../assets/homeImg/online.png"),

            size: new AMap.Size(75, 33),

            size: new this.AMap.Size(75, 33),

          },

          客运: {

            icon: require("../../assets/homeImg/passenger.png"),

            size: new AMap.Size(69, 31),

            size: new this.AMap.Size(69, 31),

          },

        };



        arr.forEach((item, index) => {

          const iconConfig = iconMap[item.vehicleType];

          let marker = new AMap.Marker({

          // 检查必要字段

          if (!item.operateType || !item.longitude || !item.latitude) {

            return;

          }



          const iconConfig = iconMap[item.operateType];

          if (!iconConfig) {

            return;

          }



          let marker = new this.AMap.Marker({

            position: [Number(item.longitude), Number(item.latitude)],

            map: this.map,

            zooms: [13, 20],

            icon: new AMap.Icon({

            icon: new this.AMap.Icon({

              size: iconConfig.size,

              image: iconConfig.icon,

              imageSize: iconConfig.size,

              imageOffset: new AMap.Pixel(0, 0),

              imageOffset: new this.AMap.Pixel(0, 0),

            }),

          });



          // 添加点击事件

          marker.on("click", async (e) => {

            // 如果已经有视频在播放，先销毁

            if (this.flvPlayer) {

              this.flvPlayer.destroy();

              this.flvPlayer = null;

            }



            // 显示loading

            infoWindow.setContent(

            this.infoWindow.setContent(

              '<div style="padding: 20px;text-align: center;">加载中...</div>'

            );

            infoWindow.open(this.map, e.target.getPosition());

            this.infoWindow.open(this.map, e.target.getPosition());



            try {

              // 并行请求车辆信息和视频地址

@@ -481,41 +553,73 @@
              ]);



              // 更新弹窗内容

              infoWindow.setContent(

              this.infoWindow.setContent(

                this.listRender({

                  ...item,

                  ...carInfoRes.data,

                  videoUrl: videoRes.data.url,

                })

              );



              if (flvjs.isSupported()) {

                this.flvPlayer = flvjs.createPlayer({

                  type: "flv",

                  isLive: true,

                  cors: true,

                  hasAudio: true,

                  hasVideo: true,

                  url: videoRes.data.url,

                  enableWorker: true,

                  enableStashBuffer: false,

                  seekType: "range",

                });

                let video = document.getElementById("monitoringCard");

                this.flvPlayer.attachMediaElement(video);

                this.flvPlayer.load();

                this.flvPlayer.play();

              }

            } catch (error) {

              console.error("获取车辆信息失败:", error);

              infoWindow.setContent(

              this.infoWindow.setContent(

                '<div style="padding: 20px;text-align: center;color: red;">获取车辆信息失败</div>'

              );

            }

          });



          // 将marker添加到数组中

          this.markers.push(marker);

        });

      }

    },



    // 获取车辆信息

    async getCarInfo(carId) {

      // TODO: 替换为实际的API调用

      return new Promise((resolve) => {

        setTimeout(() => {

          resolve({

      try {

        const res = await getCarInfoById({ id: carId });

        if (res) {

          return {

            data: {

              licensePlate: "川A88888",

              driver: "李雷",

              location: "涪江文化广场",

              coordinates: "104.004284,30.579328",

              speed: "104km/h",

              drivingTime: "5小时15分钟",

              ...res,

              id: carId,

            },

          });

        }, 500);

      });

          };

        }

        return {

          data: {

            id: carId,

          },

        };

      } catch (error) {

        return {

          data: {

            licensePlate: "",

            driver: "",

            location: "",

            coordinates: "",

            speed: "0km/h",

            drivingTime: "0小时0分钟",

          },

        };

      }

    },



    // 获取视频地址

@@ -533,29 +637,6 @@
    },



    listRender(record) {

      if (flvjs.isSupported()) {

        flvPlayer = flvjs.createPlayer({

          type: "flv",

          isLive: true,

          cors: true,

          hasAudio: true,

          hasVideo: true,

          url: res.data.flv, // 后端拿到的视频路径

          enableWorker: true, //启用 Web Worker 进程来加速视频的解码和处理过程

          enableStashBuffer: false, // 启用数据缓存机制，提高视频的流畅度和稳定性。

          // stashInitialSize: 1024, // 初始缓存大小。单位：字节。建议针对直播：调整为1024kb

          // stashInitialTime: 0.2, // 缓存初始时间。单位：秒。建议针对直播：调整为200毫秒

          seekType: "range", // 建议将其设置为“range”模式，以便更快地加载视频数据，提高视频的实时性。

          // lazyLoad: false, //关闭懒加载模式，从而提高视频的实时性。建议针对直播：调整为false

          // lazyLoadMaxDuration: 0.2, // 懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒

          // deferLoadAfterSourceOpen: false // 不预先加载视频数据，在 MSE（Media Source Extensions）打开后立即加载数据，提高视频的实时性。建议针对直播：调整为false

        });

        let video = document.getElementById("monitoringCard");

        flvPlayer.attachMediaElement(video); // 你的video容器

        flvPlayer.load();

        flvPlayer.play();

      }



      return `<div style="background: #ffffff; padding: 24px 20px;z-index: 999">

        <div style="position: relative; width: 460px; height: 330px">

          <video

@@ -582,10 +663,10 @@
        </div>

        <div style="display: flex;justify-content: space-between;margin-top: 15px;margin-bottom: 12px;">

          <div style="font-weight: 500;font-size: 18px;color: rgba(0, 0, 0, 0.85);line-height: 25px;">车牌号：${

            record.licensePlate

            record.vehicleNumber || ""

          }</div>

          <div style="font-weight: 500; font-size: 18px;color: rgba(0, 0, 0, 0.85);line-height: 25px;">驾驶员：${

            record.driver

            record.driverName||''

          }</div>

        </div>

        <div style="display: flex; justify-content: space-between">

@@ -593,7 +674,7 @@
            record.location

          }</div>

          <div style="font-weight: 500;font-size: 14px; color: rgba(0, 0, 0, 0.65);line-height: 26px;">经纬度：${

            record.coordinates

            record.longitude +',' + record.latitude

          }</div>

        </div>

        <div style="display: flex; justify-content: space-between">

@@ -619,7 +700,7 @@
        this.chartTnit();

      }

    },

    chartTnit(x, y1, y2) {

    chartTnit() {

      // 基于准备好的dom，初始化echarts实例

      const myChart = echarts.init(document.getElementById("countChart"));

      // 绘制数量图表

@@ -642,7 +723,7 @@
        xAxis: [

          {

            type: "category",

            data: ["未系安全带", "疲劳驾驶", "抽烟", "打电话", "激烈驾驶"],

            data: this.countList.map((item) => item.warnType),

            axisTick: {

              alignWithLabel: true,

              lineStyle: {

@@ -671,17 +752,21 @@
                ];

              },

            },

            data: [10, 52, 200, 33, 39, 30, 20],

            data: this.countList.map((item) => item.num),

          },

        ],

      });

      myChart.resize();

    },

    // 获取预警排行榜数据

    getRankList() {},



    // 跳转车辆详情

    toCarDetail() {

      console.log("跳转车辆详情");

    toCarDetail(id) {

      this.$router.push({

        path: "/car-detail",

        query: {

          id: id,

        },

      });

    },

    fullScreen() {

      const video = document.getElementById("monitoringCard");

@@ -1075,6 +1160,16 @@
            color: rgba(82, 196, 26, 1);

          }

        }

        .fiveWarn {

          background: rgba(214, 219, 228, 0.3);



          .grade {

            background: rgba(214, 219, 228, 0.3);

            border-radius: 4px;

            border: 1px solid rgba(214, 219, 228, 0.6);

            color: rgba(0, 0, 0, 0.8);

          }

        }

      }



      .warnList::-webkit-scrollbar {


 src/view/home/service.js

@@ -1,25 +1,29 @@
import axios from '@/utils/request';
// 获取各种车辆类型车辆总数
export const getCarCount = (data) => {
    return axios.get('/car/getCarCount', data)
    return axios.get('/system/car/getCarCount', data)
}
// 获取车辆状态汇总和公司总数量
export const getCarStatusCount = (data) => {
    return axios.get('/car/getCarStatusCount', data)
    return axios.get('/system/car/getCarStatusCount', data)
}
// 获取地图司机数据
export const getMapCarList = (data) => {
    return axios.get('/car/getMapCarList', data)
    return axios.get('/system/car/getMapCarList', data)
}
// 获取车辆预警列表
export const getCarWarnList = (data) => {
    return axios.get('/warn/getCarWarnList', data)
    return axios.get('/system/warn/getCarWarnList', data)
}
// 获取车辆预警情况统计
export const getWarnGroupCount = (data) => {
    return axios.get('/warn/getWarnGroupCount', data)
    return axios.get('/system/warn/getWarnGroupCount', data)
}
// 获取预警排行统计前10
export const getWarnGroupCountTop10 = (data) => {
    return axios.get('/warn/getWarnGroupCountTop10', data)
    return axios.get('/system/warn/getWarnGroupCountTop10', data)
}
// 获取预警排行统计前10
export const getCarInfoById = (data) => {
    return axios.get(`/system/car/getCarInfo/${data.id}`, data)
}