sgxt_web/src/views/home/dialog/components/home_yj.vue

<template>
  <DialogDragger title="预警详情" top="150px" v-model="props.show" @close="close">
    <ul class="warningList" ref="gjyjList">
      <li v-for="item in props.data" :key="item">
        <deployControlItem :item="item" :buttonBox="true" @plotThetrajectory="plotThetrajectory"
        @showFeedback="showFeedback" @showDetail="showDetail"/>
      </li>
      <MOSTY.Empty :show="props.data.length <= 0" :imgSize="150"></MOSTY.Empty>
    </ul>
    <div style="position:relative;width: 100%;" :style="{ height: `calc(100vh - ${handleHs}px)` }">
      <GdMap v-if="showMap" :mapKey="'home_yj_map'" :mapid="'homeYjMap'" />
    </div>
  </DialogDragger>
     <FkDialog @change="close"/>
  <Information v-model="showDialog" title="发送指令" @submit='submit' @close='closeFszl'>
    <SemdFqzl ref="semdFqzlRef" :itemData="itemData" @handleClose="handleClose" identification="yj"
      :tacitly="tacitly" />
  </Information>

</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import GdMap from "@/components/GdMap/index.vue";
import DialogDragger from "@/views/home/layout/dialogDragger.vue";
import deployControlItem from "@/views/home/components/deployControlItem.vue";
import Information from "@/views/home/model/information.vue";
import SemdFqzl from '@/components/instructionHasBeen/sendFqzl.vue'
import  FkDialog  from "@/views/backOfficeSystem/fourColorManage/warningControl/centerHome/components/fkDialog.vue";
import { tbYjxxGsgj } from '@/api/yj'
import { ref, defineProps, onMounted, watch, getCurrentInstance } from "vue";
import emitter from "@/utils/eventBus.js";
const gjyjList = ref(null); //预警列表数据
const { proxy } = getCurrentInstance();
//参数传递
const props = defineProps({
  //某条预警详情
  data: {
    type: Array,
    default: []
  },
  show: {
    type: Boolean,
    default: false
  },
});

//关闭
function close() {
  emitter.emit('deletePointArea', 'home_yj_map');
  emitter.emit("showHomeYJ", false);
    emitter.emit("closeYp")
}
const showMap = ref(false)
onMounted(() => {
  setTimeout(() => {
    showMap.value = true
    setTimeout(() => {
      // 只删除一次home_yj_map区域的点，避免影响其他地图
      emitter.emit('deletePointArea', 'home_yj_map');

      // 收集所有有效坐标的数据点
      const validPoints = [];
      for (let i = 0; i < props.data.length; i++) {
        const item = props.data[i];
        // 修复重复的坐标判断条件
        if (!item.jd || !item.wd) {
          // 使用警告而不是return，避免中断循环
          console.warn("该预警没有坐标：", item);
          continue;
        }
        validPoints.push(item);
      }

      // 如果有有效点，显示第一条并添加所有点
      if (validPoints.length > 0) {
        // 只显示第一条数据的详情
        emitter.emit('showHomeYJ', [validPoints[0]]);

        // 为每个有效点添加标记
        validPoints.forEach((item, index) => {
          let icon = require('@/assets/point/yj.png');
          if (item.yjjb == '20') icon = require('@/assets/point/yj1.png');
          if (item.yjjb == '30') icon = require('@/assets/point/yj2.png');
          if (item.yjjb == '40') icon = require('@/assets/point/yj3.png');

          // 为每个点添加唯一标识，避免与其他地图冲突
          emitter.emit('addPointArea', {
            flag: `home_yj_map_${index}`,
            baseFlag: 'home_yj_map',
            icon,
            coords: [item]
          });
        });

        // 只设置一次地图中心（使用第一个有效点）
        emitter.emit('setMapCenter', {
          location: [validPoints[0].jd, validPoints[0].wd],
          zoomLevel: 10,
          flag: 'home_yj_map' // 添加标识，确保只影响当前地图
        });
      }
    }, 500);
  }, 200);
})
const handleHs = ref(0)
watch(() => gjyjList.value, (val) => {
  handleHs.value = val.clientHeight + 198 + 150 + 20
}, { deep: true })

// 轨迹上图
const plotThetrajectory = (val) => {
  tbYjxxGsgj({
    startTime: null,
    endTime: null,
    yjRysfzh: val
  }).then(res => {
    console.log(res);
    if (res && res[0].list.length > 0) {
      let coords = res[0].list.map(item => {
        return [item.jd, item.wd]
      })
    // const coords = [
    //   [
    //     94.3695802486277983689433312974870204925537109375,
    //     29.659805088901098457654370577074587345123291015625
    //   ],
    //   [
    //     94.369054723455093380835023708641529083251953125,
    //     29.66032233866609857386720250360667705535888671875
    //   ],
    //   [
    //     94.3684916577901020673380116932094097137451171875,
    //     29.660979382630298317735650925897061824798583984375
    //   ],
    //   [
    //     94.3683415069466065006054122932255268096923828125,
    //     29.660755708570601285600787377916276454925537109375
    //   ],
    //   [
    //     94.3675662718153063224235665984451770782470703125,
    //     29.659987675165101705943015986122190952301025390625
    //   ],
    //   [
    //     94.366890606904092919648974202573299407958984375,
    //     29.659353928438999759009675472043454647064208984375
    //   ],
    //   [
    //     94.3656729217579055557507672347128391265869140625,
    //     29.6582345740253998656044132076203823089599609375
    //   ],
    //   [
    //     94.3646650204280064144768402911722660064697265625,
    //     29.657336173164399184543071896769106388092041015625
    //   ],
    //   [
    //     94.364147680070203705327003262937068939208984375,
    //     29.6567231392728984928908175788819789886474609375
    //   ],
    //   [
    //     94.3636436022359958997185458429157733917236328125,
    //     29.65662527779360146951148635707795619964599609375
    //   ],
    //   [
    //     94.362367320062702447103220038115978240966796875,
    //     29.6567138191363000032652053050696849822998046875
    //   ],
    //   [
    //     94.3614396063849056872641085647046566009521484375,
    //     29.656713819753800720491199172101914882659912109375
    //   ],
    //   [
    //     94.3603242001151016893345513381063938140869140625,
    //     29.65673712009380125209645484574139118194580078125
    //   ],
    //   [
    //     94.358962121621999585840967483818531036376953125,
    //     29.65674177535930056137658539228141307830810546875
    //   ],
    //   [
    //     94.3576684689077040957272402010858058929443359375,
    //     29.65681167375640114869383978657424449920654296875
    //   ],
    //   [
    //     94.3564404495050013110812869854271411895751953125,
    //     29.65685827438640131958891288377344608306884765625
    //   ],
    //   [
    //     94.3547512464013067301493720151484012603759765625,
    //     29.656946809372101370172458700835704803466796875
    //   ]
    // ]
      emitter.emit('drawLineAnimation', {
        type: "solid",
        coords: coords,
        isclear: true,
        flag: "yjLine"
      })
    } else {
      ElMessage({ message: '暂无轨迹数据', type: 'warning' });
    }
  })
}
// 查看反馈
const showFeedback = (val) => {
  emitter.emit("openFkDialog",val )
}
// 发送指令
const showDialog = ref(false)
const itemData = ref()
const showDetail = (item) => {
  showDialog.value = true;
  itemData.value = item
}
const handleClose = () => {
  showDialog.value = false;
}
const semdFqzlRef = ref()
const tacitly = {
  title: 'yjbt',
  instructionContent: 'yjnr'
}
const submit = () => {
  semdFqzlRef.value.getsendFqzl()
}
const closeFszl = () => {
  semdFqzlRef.value.close()
}


</script>

<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";

.dialogBox {
  z-index: 999;

  ul.warningList {
    height: calc(100vh - 198px);
    overflow: hidden;
    overflow-y: auto;
    padding: 7px 10px;
    box-sizing: border-box;

    .photo {
      width: 60px;
      height: 80px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

//加载时 取消背景
::v-deep .el-loading-mask {
  background-color: transparent !important;
}
</style>