seat-tools/src/views/ship-test/business/v2/ship-hover.vue

<template>
  <div class="hover-info" id="ID_shipHover" ref="ref_shipHover">
    <div class="hover-info-head">
      <span>{{info?.config?.name}}_{{ info?.isHistory ? '历史' : '实时'}}</span>
    </div>
    <div class="hover-info-close __hover" @click="null">
      <img src="@/components/easyMap/images/close.png" alt=""/>
    </div>
    <div class="hover-main" v-if="info?.data">
      <template v-for="item in shipHoverInfoCpt">
        <div class="hover-item">
          <div class="hover-item-label">{{item.label}}：</div>
          <div class="hover-item-value">{{item.value}}</div>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import * as turf from "@turf/turf";

export default defineComponent({
  name: '',
  components: {},
  props: {
    that: <any>{},
    info: <any>{},
    staticList: {
      default: () => []
    }
  },
  setup(props, {emit}) {
    const state = reactive({})
    const STATIC = (id) => {
      if (id) {
        return props.staticList.filter(v => id == v.id)?.[0].wkt
      }
      return null
    }
    const DISTANCE = (p1, p2) => {
      if (p1 && p2) {
        return turf.distance(props.that.$easyMap.formatPosition.wptTcpt(p1), props.that.$easyMap.formatPosition.wptTcpt(p2), {units: 'kilometers'}).toFixed(2) + 'km'
      }
      return null
    }
    const shipHoverInfoCpt = computed(() => {
      const arr: any = []
      const DATA = props.info.data
      if (DATA.isHistory) {
        props.info?.config?.hover?.forEach(h => {
          if (h.historyValue) {
            let value = eval(h.historyValue)
            h.options?.forEach(v => {
              if (String(value) == v.value) {
                value = v.label
              }
            })
            arr.push({
              label: h.name,
              value: value
            })
          }
        })
      } else {
        props.info?.config?.hover?.forEach(h => {
          let value = eval(h.value)
          h.options?.forEach(v => {
            if (String(value) == v.value) {
              value = v.label
            }
          })
          arr.push({
            label: h.name,
            value: value
          })
        })
      }
      return arr
    })
    watch(() => props.info, () => {
      console.log(123)
    })
    onMounted(() => {
      // eval注册函数动态方法，不调用一下的话打包不包含
      DISTANCE(null, null)
      STATIC(null)
    })
    return {
      ...toRefs(state),
      shipHoverInfoCpt
    }
  },
})
</script>

<style scoped lang="scss">
.hover-info {
  $footH: 10px;
  width: 300px;
  background: linear-gradient(180deg, #3874C9 0%, #0043C4 100%);
  border-radius: 0px 4px 4px 4px;
  position: relative;
  display: flex;
  justify-content: center;
  &:after {
    content: '';
    position: absolute;
    bottom: -$footH;
    border-top: $footH solid #0043C4;
    border-left: $footH solid transparent;
    border-right: $footH solid transparent;
  }
  .hover-info-head {
    padding: 0 4px;
    height: 18px;
    position: absolute;
    top: -18px;
    left: 0;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    line-height: 8px;
    background: linear-gradient(180deg, #3874C9 0%, #0043C4 100%);
    border-radius: 2px 2px 0 0;/* 设置圆角 */
    >img {
      margin: 0 4px 0 6px;
    }
  }
  .hover-info-close {
    position: absolute;
    right: 0;
    top: -16px;
  }
  .hover-main {
    width: 100%;
    height: auto;
    padding: 10px;
    .hover-item {
      display: flex;
      .hover-item-label {
        min-width: 42px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 600;
        color: #08FFFF;
        line-height: 20px;
      }
      .hover-item-value {
        flex: 1;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 20px;
      }
    }
  }
}

</style>