首页修改问题

董国庆

2025-04-18 1c0f6da9f17df8d221494c18233139ae72620ff4

首页修改问题

 src/view/car-manage/index.vue

@@ -121,6 +121,13 @@
        getCarType().then(res => {
            this.options = res;
        });
        // 判断URL参数并赋值
        const query = this.$route.query;
        if (query && Object.keys(query).length > 0) {
            if(query.id){
                this.searchForm.operationType = Number(query.id);
            }
        }
        this.getList();
    },
    methods: {

 src/view/home/index.vue

@@ -10,7 +10,7 @@
            class="countCard"
            v-for="(item, index) in carCountData.slice(0, 3)"
            :key="item.id"
            @click="toCarDetail(item.id)"
            @click="toCarManage(item.id)"
          >
            <img class="iconImg" :src="imgList[index]" />
            <div>
@@ -23,7 +23,7 @@
          <div
            class="countCard"
            v-for="(item, index) in carCountData.slice(3, 7)"
            @click="toCarDetail(item.id)"
            @click="toCarManage(item.id)"
            :key="item.id"
          >
            <img class="iconImg" :src="imgList[index + 3]" />
@@ -239,9 +239,9 @@
      carStatusData: {}, //车辆状态数据
      warnList: [], //预警列表数据

      serverIp: "",//监控ip
      serverPort: "",//监控端口
      carId: "",//监控车辆
      serverIp: "", //监控ip
      serverPort: "", //监控端口
      carId: "", //监控车辆
    };
  },
  watch: {
@@ -323,7 +323,7 @@
    next();
  },
  methods: {
    toCarDetail(id) {
    toCarManage(id) {
      this.$router.push({
        path: "/car-manage",
        query: { id },
@@ -479,8 +479,8 @@
            anchor: "top-center",
          });
          // 添加信息弹窗关闭事件监听
          this.infoWindow.on('close', () => {
            console.log('关闭信息弹窗1111111111111111111')
          this.infoWindow.on("close", () => {
            console.log("关闭信息弹窗1111111111111111111");
            this.destroyPlayer();
          });
          this.getMapCarData();
@@ -625,6 +625,7 @@

    // 初始化视频播放器
    initVideoPlayer(videoUrl) {
      console.log('11111',this.serverIp,'2222222222',this.serverPort)
      // 先销毁之前的播放器
      if (this.flvPlayer) {
        this.flvPlayer.destroy();
@@ -685,18 +686,18 @@
    },

    destroyPlayer() {
            // 销毁播放器释放资源
            if (this.flvPlayer) {
                if (this.videoTimer) clearInterval(this.videoTimer)
                closeRealVideo(this.carId).then(res => {
                    this.flvPlayer.pause();
                    this.flvPlayer.unload();
                    this.flvPlayer.detachMediaElement();
                    this.flvPlayer.destroy();
                    this.flvPlayer = null;
                })
            }
        },
      // 销毁播放器释放资源
      if (this.flvPlayer) {
        if (this.videoTimer) clearInterval(this.videoTimer);
        closeRealVideo(this.carId).then((res) => {
          this.flvPlayer.pause();
          this.flvPlayer.unload();
          this.flvPlayer.detachMediaElement();
          this.flvPlayer.destroy();
          this.flvPlayer = null;
        });
      }
    },

    // 处理视频错误
    handleVideoError(event) {
@@ -713,13 +714,17 @@
    listRender(record) {
      return `<div style="background: #ffffff; padding: 24px 20px;z-index: 999">
        <div style="position: relative; width: 460px; height: 330px">
        
          <video
            style="width: 460px; height: 330px; border-radius: 9px" 
            id="monitoringCard"
            preload="auto"
            @error="handleVideoError"
            width="620">
          </video>
              ref="video"
               style="width: 460px; height: 330px; border-radius: 9px" 
               id="monitoringCard"
               ref="monitoringCard"
                :controls="false"
                autoPlay
                width="620">
              </video>
          <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;
              background: #ffffff; padding: 3px 10px; border-radius: 6px;margin-bottom: 10px;" onclick="fullScreen()">
@@ -828,11 +833,21 @@
            barWidth: "20px",
            itemStyle: {
              borderRadius: [20, 20, 20, 20],
              // color: (params) => {
              //   return ["#5B8FF9", "#5AD8A6", "#F6BD16", "#6DC8EC", "#945FB9"][
              //     params.dataIndex
              //   ];
              // },
              color: (params) => {
                return [
                  "#5B8FF9",
                  "#5AD8A6",
                  "#F6BD16",
                  "#6DC8EC",
                  "#945FB9",
                  "rgba(248, 204, 65, 0.5)",
                  "rgba(2, 179, 118, 0.5)",
                  "rgba(254, 41, 94, 0.5)",
                  "rgba(255, 102, 39, 0.5)",
                  "rgba(169, 14, 253, 0.5)",
                  "rgba(109, 200, 236, 0.5)",
                ][params.dataIndex];
              },
            },
            data: this.countList.map((item) => item.num),
          },
@@ -864,6 +879,14 @@
        // IE/Edge
        video.msRequestFullscreen();
      }
    },
    getRandomColor() {
      const letters = "0123456789ABCDEF";
      let color = "#";
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    },
    shotScreen() {
      // 获取video和canvas元素
@@ -1311,7 +1334,7 @@
            color: rgba(0, 0, 0, 0.45);
            line-height: 17px;
            text-align: right;
            overflow: auto;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }