首页地图

董国庆

2025-04-08 7d1c85bba308d40d45ab7cc63b12df4b48e1e7f1

首页地图

 src/view/home/index.vue

@@ -154,8 +154,8 @@
              }}

            </div>

            <div class="info">

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

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

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

              {{ item.startTime }}

            </div>

          </div>

        </div>

@@ -205,7 +205,7 @@
  getCarWarnList,

  getWarnGroupCount,

  getWarnGroupCountTop10,

  getCarInfoById,

  getRealVideo,

} from "./service";

export default {

  data() {

@@ -251,6 +251,10 @@
      }

    },

  },

  filters: {

    
  },



  created() {

    window.toCarDetail = (record) => {

      this.toCarDetail(record);

@@ -446,6 +450,7 @@
          "AMap.AutoComplete",

          "AMap.Geocoder",

          "AMap.MarkerCluster",

          "AMap.Geocoder",

        ],

      })

        .then((AMap) => {

@@ -546,9 +551,21 @@
            this.infoWindow.open(this.map, e.target.getPosition());



            try {

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

              const [carInfoRes, videoRes] = await Promise.all([

                this.getCarInfo(item.id),

              // 使用高德地图API获取地址信息

              const geocoder = new this.AMap.Geocoder();

              const location = [Number(item.longitude), Number(item.latitude)];



              const [addressResult, videoRes] = await Promise.all([

                new Promise((resolve) => {

                  geocoder.getAddress(location, (status, result) => {

                    if (status === "complete" && result.regeocode) {

                      console.log("result", result,'status',status);

                      resolve(result.regeocode.formattedAddress);

                    } else {

                      resolve("未知地址");

                    }

                  });

                }),

                this.getVideoUrl(item.id),

              ]);



@@ -556,28 +573,29 @@
              this.infoWindow.setContent(

                this.listRender({

                  ...item,

                  ...carInfoRes.data,

                  drivingTime:this.formatterTime(item.drivingTime || 0) ,

                  location: addressResult,

                  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();

              }

              // 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) {

              this.infoWindow.setContent(

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

@@ -590,50 +608,18 @@
        });

      }

    },



    // 获取车辆信息

    async getCarInfo(carId) {

    // 获取视频地址

    async getVideoUrl(carId) {

      try {

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

        if (res) {

          return {

            data: {

              ...res,

              id: carId,

            },

          };

        }

        return {

          data: {

            id: carId,

          },

        };

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

        return res;

      } catch (error) {

        return {

          data: {

            licensePlate: "",

            driver: "",

            location: "",

            coordinates: "",

            speed: "0km/h",

            drivingTime: "0小时0分钟",

            url: "",

          },

        };

      }

    },



    // 获取视频地址

    async getVideoUrl(carId) {

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

      return new Promise((resolve) => {

        setTimeout(() => {

          resolve({

            data: {

              url: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",

            },

          });

        }, 500);

      });

    },



    listRender(record) {

@@ -645,7 +631,6 @@
            id="monitoringCard"

            :controls="false"

            autoplay

            src="${record.videoUrl}"

            width="620">

          </video>

          <div style="position: absolute; right: 11px; top: 10px">

@@ -666,21 +651,21 @@
            record.vehicleNumber || ""

          }</div>

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

            record.driverName||''

            record.driverName || ""

          }</div>

        </div>

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

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

          <div style="font-weight: 500; font-size: 14px; color: rgba(0, 0, 0, 0.65);line-height: 26px;width: 200px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" title="${record.location}">位置：${

            record.location

          }</div>

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

            record.longitude +',' + record.latitude

            record.longitude + "," + record.latitude

          }</div>

        </div>

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

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

            record.speed

          }</div>

            record.speed || ""

          }${record.speed && "km/h"}</div>

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

            record.drivingTime

          }</div>

@@ -693,6 +678,16 @@
        </div>

      </div>`;

    },

    formatterTime(value) {

      if (!value) return "";

      const hours = Math.floor(value / 60);

      const minutes = value % 60;

      if (hours > 0) {

        return `${hours}小时${minutes}分钟`;

      } else {

        return `${minutes}分钟`;

      }

    },

    // 获取预警情况统计

    getCountList() {

      echarts.dispose(document.getElementById("countChart"));


 src/view/home/service.js

@@ -26,4 +26,8 @@
// 获取预警排行统计前10
export const getCarInfoById = (data) => {
    return axios.get(`/system/car/getCarInfo/${data.id}`, data)
}
// 获取监控
export const getRealVideo = (data) => {
    return axios.get(`/system/car/getRealVideo/${data.id}`, data)
}