xjsaas-ui/src/views/xj/inspection/traffic-management/components/event-view.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-12 15:49:46
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-10-25 11:44:59
 * @FilePath: \znxjxt-ui\src\views\xj\inspection\traffic-management\components\event-view.vue
 * @Description: 交安事件-查看弹窗
-->

<template>
  <div class="view-content">
    <div>
      <!-- 上半部分 -->
      <div style="display: flex; height: 50%">
        <!-- 左侧病害信息 -->
        <div style="flex: 1; padding: 10px">
          <p>上报日期：{{ new Date(viewForm.createdTime).toLocaleString() }}</p>
          <p>路段名称：{{ viewForm.segmentName }}</p>
          <!-- <p>病害坐标：{{ viewForm.geometry.coordinates }}</p> -->
          <p>事件类型：{{ filterDefect(viewForm.defectType) }}</p>
        </div>
        <!-- 右侧图片展示 -->
        <div style="width: 27rem; padding: 10px">
          <el-carousel class="view-carousel" height="15rem">
            <el-carousel-item
              v-for="(img, index) in viewForm.media"
              :key="index"
            >
              <img :src="img.img" alt="病害图片" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

      <!-- 下半部分显示天地图 -->
      <div id="viewMap" style="height: 300px; margin-top: 20px"></div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">关闭</el-button>
    </div>
  </div>
</template>

<script>
import { gcj02ToWgs84 } from "@/api/xj/map";
export default {
  name: "EventView",
  props: {
    dialogItem: {
      type: Object,
      default: () => {},
    },
    eventType: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      // 列表数据
      viewForm: {},
      // 地图中心点
      centerPoint: [123.30297096718999, 41.87942945541742],
      // 地图点位
      markers: [],
    };
  },
  watch: {
    dialogItem: {
      handler(val) {
        console.log(val, "dddd");

        if (val.title === "查看事件") {
          this.viewForm = JSON.parse(JSON.stringify(val));
          this.$nextTick(() => {
            this.centerPoint = [
              gcj02ToWgs84([
                val.geometry.coordinates[0],
                val.geometry.coordinates[1],
              ])[0],
              gcj02ToWgs84([
                val.geometry.coordinates[0],
                val.geometry.coordinates[1],
              ])[1],
            ];
            this.initMap("viewMap");
            const e = {
              lnglat: {
                lng: gcj02ToWgs84([
                  val.geometry.coordinates[0],
                  val.geometry.coordinates[1],
                ])[0],
                lat: gcj02ToWgs84([
                  val.geometry.coordinates[0],
                  val.geometry.coordinates[1],
                ])[1],
              },
            };
            this.onMapClick(e);
            // 移除点击事件
            this.map.removeEventListener("click", this.onMapClick);
          });
        }
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    // this.initMap("viewMap");
  },
  methods: {
    /* 过滤列表事件类型 */
    filterDefect(value) {
      let a = null;
      [a] = this.eventType.filter((item) => {
        return item.value === value;
      });
      if (a) {
        return a.label;
      }
    },
    /* 关闭弹窗 */
    closeDialog() {
      this.$emit("cancel");
    },
    /* 初始化天地图 */
    initMap(ele) {
      // if (this.map) {
      //   this.map.remove(); // 如果已经有地图实例，先移除再重新加载
      // }

      // 初始化天地图
      this.map = new T.Map(ele);
      this.map.centerAndZoom(
        new T.LngLat(this.centerPoint[0], this.centerPoint[1]),
        9
      ); // 设置中心点和缩放级别
      // 添加单击事件
      this.map.on("click", this.onMapClick);
    },
    /* 新增/编辑地图单击事件 */
    onMapClick(e) {
      const marker = new T.Marker(e.lnglat);
      if (this.markers.length > 0) {
        this.markers.shift();
        this.map.clearOverLays();
        this.map.addOverLay(marker);
        this.markers.push(e.lnglat);
      } else {
        this.map.addOverLay(marker);
        this.markers.push(e.lnglat);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.view-content {
  width: 100%;
  height: 100%;
}

/* 查看弹窗-图片框样式 */
.view-carousel {
  height: 15rem;
  // .el-carousel__item{
  //   height: 12rem;

  img {
    max-height: 15rem;
    max-width: 25rem;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>