Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/shehong-ve...

pyt

2025-04-28 ec2a85ce86cb925813de04beacc6e3a61b5cdc4a

 src/view/home/index.vue

@@ -10,7 +10,7 @@
            class="countCard"
            v-for="(item, index) in carCountData.slice(0, 3)"
            :key="item.id"
            @click="toCarManage(item.id)"
            @click="toCarManage(item.name)"
          >
            <img class="iconImg" :src="imgList[index]" />
            <div>
@@ -23,7 +23,7 @@
          <div
            class="countCard"
            v-for="(item, index) in carCountData.slice(3, 7)"
            @click="toCarManage(item.id)"
            @click="toCarManage(item.name)"
            :key="item.id"
          >
            <img class="iconImg" :src="imgList[index + 3]" />
@@ -167,7 +167,7 @@
      </div>
      <!-- 预警情况统计 -->
      <div class="warnCount">
        <div class="title">预警情况统计</div>
        <div class="title ">预警情况统计</div>
        <div class="countChart" id="countChart"></div>
        <div class="noData" v-if="countList.length == 0">
          <el-empty description="暂无数据" :image-size="80"></el-empty>
@@ -175,7 +175,7 @@
      </div>
      <!-- 预警排行榜(前10) -->
      <div class="warnRank">
        <div class="title">预警排行榜(前10)</div>
        <div class="title mt-0">预警排行榜(前10)</div>
        <div class="rankChart" id="rankChart">
          <div class="rankItem" v-for="(item, index) in rankList" :key="index">
            <div class="left">{{ item.name }}</div>
@@ -283,6 +283,9 @@
    this.getWarnTop10Data();

    this.initMap();
    if (this.timer) {
      clearInterval(this.timer);
    }
    // 设置定时器，每分钟刷新一次数据
    this.timer = setInterval(() => {
      this.getCarCountData();
@@ -413,7 +416,7 @@
    // 获取预警列表数据
    async getWarnListData() {
      try {
        const res = await getCarWarnList();
        const res = await getCarWarnList({pageNum:1,pageSize:100000});
        this.warnList = res.records;
      } catch (error) {
        this.$message.error("获取预警列表数据失败");
@@ -611,12 +614,12 @@
    },
    // 获取视频地址
    async getVideoUrl(carId) {
      this.carId = carId;
      try {
        const res = await getRealVideo({ id: carId });
        // 将RTSP流转换为FLV流
        this.serverIp = res.serverIp;
        this.serverPort = res.serverPort;
        this.carId = carId;
      } catch (error) {
        console.error("获取视频地址失败", error);
        return {};
@@ -624,7 +627,7 @@
    },

    // 初始化视频播放器
    initVideoPlayer(videoUrl) {
    initVideoPlayer() {
      console.log('11111',this.serverIp,'2222222222',this.serverPort)
      // 先销毁之前的播放器
      if (this.flvPlayer) {
@@ -654,7 +657,7 @@
              enableStashBuffer: false, // 启用数据缓存机制，提高视频的流畅度和稳定性。
              stashInitialSize: 1024, // 初始缓存大小。单位：字节。建议针对直播：调整为1024kb
              stashInitialTime: 0.2, // 缓存初始时间。单位：秒。建议针对直播：调整为200毫秒
              seekType: "range", // 建议将其设置为“range”模式，以便更快地加载视频数据，提高视频的实时性。
              seekType: "range", // 建议将其设置为"range"模式，以便更快地加载视频数据，提高视频的实时性。
              lazyLoad: false, //关闭懒加载模式，从而提高视频的实时性。建议针对直播：调整为false
              lazyLoadMaxDuration: 0.2, // 懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒
              deferLoadAfterSourceOpen: false, // 不预先加载视频数据，在 MSE（Media Source Extensions）打开后立即加载数据，提高视频的实时性。建议针对直播：调整为false
@@ -665,6 +668,14 @@
            this.flvPlayer
              .play()
              .then((res) => {
                // 显示视频元素
                video.style.display = 'block';
                // 隐藏空状态
                const emptyElement = video.parentElement.querySelector('.el-empty');
                if (emptyElement) {
                  emptyElement.style.display = 'none';
                }
                
                this.videoTimer = setInterval(() => {
                  playDetection(this.carId);
                }, 5000);
@@ -695,6 +706,16 @@
          this.flvPlayer.detachMediaElement();
          this.flvPlayer.destroy();
          this.flvPlayer = null;

          // 恢复空状态的显示
          const video = document.getElementById("monitoringCard");
          if (video) {
            video.style.display = 'none';
            const emptyElement = video.parentElement.querySelector('.el-empty');
            if (emptyElement) {
              emptyElement.style.display = 'block';
            }
          }
        });
      }
    },
@@ -714,16 +735,18 @@
    listRender(record) {
      return `<div style="background: #ffffff; padding: 24px 20px;z-index: 999">
        <div style="position: relative; width: 460px; height: 330px">
        
          <video
          <div style="width: 460px; height: 330px; border-radius: 9px; background: #f5f5f5; display: flex; justify-content: center; align-items: center; flex-direction: column">
            <video
              ref="video"
               style="width: 460px; height: 330px; border-radius: 9px" 
               id="monitoringCard"
               ref="monitoringCard"
                :controls="false"
                autoPlay
                width="620">
              </video>
              style="width: 460px; height: 330px; border-radius: 9px; display: none" 
              id="monitoringCard"
              ref="monitoringCard"
              :controls="false"
              autoPlay
              width="620">
            </video>
            <el-empty description="暂无视频信息" :image-size="80"></el-empty>
          </div>
          <canvas id="myCanvas" style="display:none"></canvas>
          <div style="position: absolute; right: 11px; top: 10px">
            <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;
@@ -819,6 +842,18 @@
            },
            axisLabel: {
              color: "rgba(0, 0, 0, 0.45)",
              interval: 0, // 强制显示所有标签
              width: 60, // 设置标签宽度
              height: 20, // 设置标签高度
              overflow: 'truncate', // 截断模式
              ellipsis: true, // 超出显示省略号
              rotate: -40, // 可以根据需要调整角度
              formatter: function(value) {
                if (value.length > 4) {
                  return value.substring(0, 4) + '...';
                }
                return value;
              }
            },
          },
        ],
@@ -927,7 +962,7 @@
  .leftMap {
    // width: 100%;
    height: 100%;
    flex: 1;
    flex: 3;
    display: flex;
    position: relative;

@@ -945,7 +980,7 @@
    right: 513px;
    display: flex;
    justify-content: space-between;
    width: calc(100% - 570px);
    width: calc(100% - 770px);

    .title {
      font-weight: 600;
@@ -1126,13 +1161,15 @@
  }

  .right {
    width: 493px;
    // width: 493px;
    flex: 1;
    height: calc(100% - 20px);
    margin: 20px 17px 0 20px;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px 10px 0px 0px;
    padding: 20px;
    overflow-y: auto;

    .title {
      margin-top: 30px;
@@ -1143,6 +1180,9 @@
      text-transform: none;
      margin-bottom: 10px;
    }
    .mt-0{
      margin-top: 0 !important;
    }

    .firCard {
      display: flex;
@@ -1150,7 +1190,7 @@

      .companyCard {
        width: 140px;
        height: 90px;
        // height: 90px;
        background: #f4f4ff;
        border-radius: 0px 10px 10px 0px;
        position: relative;
@@ -1160,7 +1200,7 @@
          left: 0;
          top: 0;
          width: 4px;
          height: 90px;
          // height: 90px;
          background: #0e6efd;
          border-radius: 2px;
        }
@@ -1297,8 +1337,8 @@
      position: relative;

      #countChart {
        width: 453px;
        height: 150px;
        width: 100%;
        height: 180px;
      }

      .noData {
@@ -1310,7 +1350,7 @@
        bottom: 0;
        left: 0;
        width: 100%;
        height: 150px;
        height: 180px;
      }
    }

@@ -1318,8 +1358,8 @@
      position: relative;

      .rankChart {
        width: 453px;
        height: 300px;
        width: 100%;
        // height: 300px;

        .rankItem {
          display: flex;
@@ -1330,7 +1370,7 @@
            flex: 2;
            padding-right: 25px;
            font-weight: 400;
            font-size: 12px;
            font-size: 13px;
            color: rgba(0, 0, 0, 0.45);
            line-height: 17px;
            text-align: right;