sea-warning-web/src/views/web/track/index.vue

<template>
  <DragWindow
    v-if="show"
    @onClose="$emit('update:show', false)"
    title="轨迹列表"
    v-model:layout="state.layout"
    expend
  >
    <div class="swm-track-com">
      <div class="swm-track-com-head row">
        <div class="index">序号</div>
        <div class="target">目标ID</div>
        <div class="time">轨迹时长</div>
        <div class="operation">操作</div>
      </div>
      <div class="swm-track-com-body">
        <template v-for="([key, value], index) in ShipMapStore.trackMap">
          <div class="row" :style="`color: ${value.color};`">
            <div class="index">{{index + 1}}</div>
            <div class="target __hover" @click="value.moveToTrack(), value.showArchive = true">{{value.isWarning ? value.data[ShipMapStore.trackKeys.mergeTarget] : key}}</div>
            <div class="time">
              {{getDuration(value)}}
            </div>
            <div class="operation">
              <el-tooltip :enterable="false" placement="top" content="隐藏轨迹" v-if="value.showTrack">
                <SvgIcon class="__hover" name="eye" size="16" color="#22E622" @click="value.visibleTrack(false)"/>
              </el-tooltip>
              <el-tooltip :enterable="false" placement="top" content="显示轨迹" v-else>
                <SvgIcon class="__hover" name="eye-close" size="16" color="#22E622" @click="value.visibleTrack(true)"/>
              </el-tooltip>
<!--              <el-tooltip :enterable="false" placement="top" content="轨迹分析" v-if="value.history?.length > 0">-->
<!--                <SvgIcon class="__hover" name="panel" size="16" color="#48DCFD"/>-->
<!--              </el-tooltip>-->
              <el-tooltip :enterable="false" placement="top" content="调色盘">
                <div class="color">
                  <SvgIcon class="__hover" name="color" size="16" color="#FF7223"/>
                  <el-color-picker v-model="value.color" @change="handleColor(value)"/>
                </div>
              </el-tooltip>
              <el-tooltip :enterable="false" placement="top" content="删除">
                <SvgIcon class="__hover" name="del" size="16" color="#AADDFF" @click="value.del()"/>
              </el-tooltip>
            </div>
          </div>
        </template>
      </div>
    </div>
  </DragWindow>
</template>

<script setup lang="ts">
import {computed, getCurrentInstance, markRaw, nextTick, onMounted, reactive, ref, watch} from "vue";
import DragWindow from '../components/drag-window.vue'
import {useShipMapStore} from "@/stores";
import {comTimeByArea} from "@/utils/util";

const ShipMapStore = useShipMapStore()
const {proxy} = getCurrentInstance()
const props = defineProps({
  show: {},
  mapFunc: {}
})
const state: any = reactive({
  layout: {
    width: 480,
    left: 85,
    top: 110
  },
})
const getDuration = (value) => {
  let start = null
  let end = null
  if (value.history.length > 0) {
    start = value.history[0].mergeTime
    end = value.history[value.history.length - 1].mergeTime
  }
  if (value.real.length > 0) {
    if (!start) {
      start = value.real[0].mergeTime
    }
    end = value.real[value.real.length - 1].mergeTime
  }
  return comTimeByArea(start, end, true)
}
const handleColor = (value) => {
  nextTick(() => {
    value.refreshTrackStyle?.()
  })
}
</script>

<style lang="scss" scoped>
$mapHeight: var(--easy-map-height);
.swm-track-com {
  max-height: calc($mapHeight - 250px);
  display: flex;
  flex-direction: column;
  padding: 16px 8px;
  overflow-y: auto;
  .row {
    width: 100%;
    display: flex;
    align-items: center;
    >div {
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid rgba(104,195,255,0.1);
      border-bottom: 1px solid rgba(104,195,255,0.1);
      &:last-child {
        border-right: 1px solid rgba(104,195,255,0.1);
      }
    }
    .index {
      width: 40px;
    }
    .target {
      flex: 1;
    }
    .time {
      width: 100px;
    }
    .operation {
      width: 140px;
    }
  }

  .swm-track-com-head {
    background: #152584;
    border-top: 1px solid rgba(104,195,255,0.1);
    >div {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #68C3FF;
    }
  }
  .swm-track-com-body {
    flex: 1;
    overflow-y: auto;
    .row {
      >div {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
      }
      .operation {
        gap: 4px;
        >img {
          width: 16px;
          height: 16px;
        }
        .color {
          position: relative;
          width: 16px;
          height: 16px;
          display: flex;
          >img {
            width: 100%;
            height: 100%;
          }
          :deep(.el-color-picker) {
            width: 100%;
            height: 100%;
            position: absolute;
            opacity: 0;
            .el-color-picker__trigger {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
</style>