cpp/cpp-ui/src/views/largeScreen/components/center-top.vue

<template>
  <div class="center-top_container position-r ">
    <div class="position-a sign-container">
      <div class="flex items-center">
        <div class="sign-style mr-0vw green"/>
        <span class="mr-0vw">运行</span>{{ run }}
      </div>
      <div class="flex items-center">
        <div class="sign-style mr-0vw yellow"/>
        <span class="mr-0vw">限电</span>{{ limit }}
      </div>
      <div class="flex items-center">
        <div class="sign-style mr-0vw red"/>
        <span class="mr-0vw">检修</span>{{ overhaul }}
      </div>
      <div class="flex items-center">
        <div class="sign-style mr-0vw grey"/>
        <span class="mr-0vw">无通讯</span>{{ noCommunication }}
      </div>
    </div>
    <div class="position-a" v-for="item in stationInfo" :style="{top:item.top+'vh',left:item.left+'vw',cursor:'pointer'}" @mouseenter="mousemoveRows(item)" @mouseleave="removeTips(item)" @click="jumpCloudDataPage(item)">
      <div v-if="Number(item.status) === 1">
        <img src="../../../assets/images/mapIcon/green-gf.png" class="img-style" v-if="item.stationType === 'E1'"/>
        <img src="../../../assets/images/mapIcon/green-fj.png" class="img-style" v-else/>
      </div>
      <div v-else-if="Number(item.status) === 2">
        <img src="../../../assets/images/mapIcon/yellow-gf.png" class="img-style" v-if="item.stationType === 'E1'"/>
        <img src="../../../assets/images/mapIcon/yellow-fj.png" class="img-style" v-else/>
      </div>
      <div v-else-if="Number(item.status) === 3">
        <img src="../../../assets/images/mapIcon/red-gf.png" class="img-style" v-if="item.stationType === 'E1'"/>
        <img src="../../../assets/images/mapIcon/red-fj.png" class="img-style" v-else/>
      </div>
      <div v-else class="image-container">
        <img src="../../../assets/images/mapIcon/grey-gf.png" class="img-style" v-if="item.stationType === 'E1'"/>
        <img src="../../../assets/images/mapIcon/grey-fj.png" class="img-style" v-else />
      </div>
    </div>
    <span class="runDay position-a">安全运行天数: {{ runningDays }}</span>
  </div>
</template>

<script>
import '../../../assets/images/mapIcon/green-gf.png'
export default {
  data() {
    return {
      runningDays: '',
      run: 0,
      limit: 0,
      overhaul: 0,
      noCommunication: 0,
      // 场站状态暂定： 运行：1 限电：2 检修:3 无通讯;0
      // left top 需要存数据库代替经纬度在图片上打点
      stationInfo:[],
      // stationInfo: [
      //   {
      //     name: '新疆测试场站信息',
      //     stationCode: 'J01100',
      //     status: '2',
      //     capacity: '99.52',
      //     ws: '12',
      //     sjgl: '12',
      //     dq: '12',
      //     cdq: 12,
      //     kygl: 12,
      //     llgl: 12,
      //     left: 24.7,
      //     top: 14.5
      //   },
      //   {
      //     name: '光电',
      //     stationCode: 'J01101',
      //     status: '1',
      //     capacity: '99.52',
      //     ws: '12',
      //     sjgl: '12',
      //     dq: '12',
      //     cdq: 12,
      //     kygl: 12,
      //     llgl: 12,
      //     left: 29,
      //     top: 25
      //   }
      // ]
    }
  },
  props: {
    params: {type: Object}
  },
  watch: {
    params: {
      // immediate: true,// 第一次立即监听
      handler(value) {
        this.stationInfo = value.mapDataDtoList
        this.runningDays = value.runDays
        this.run = value.yxcoutns
        this.limit = value.xdcoutns
        this.overhaul = value.jxcoutns
        this.noCommunication = value.txcoutns
      }
    }
  },
  mounted() {
    this.run = this.stationInfo.filter(w=>Number(w.status) === 1).length || 0
    this.limit = this.stationInfo.filter(w=>Number(w.status) === 2).length || 0
    this.overhaul = this.stationInfo.filter(w=>Number(w.status) === 3).length || 0
    this.noCommunication = this.stationInfo.filter(w=>Number(w.status) === 0).length || 0
  },

  methods: {
    /**
     * 创建tips
     * */
    mousemoveRows(row) {
      let hjLabel = '轮毂风速';
      if (row.stationType=='E1'){
        // 光
        hjLabel = '总辐射';
      }

      let status = Number(row.status) === 1?'运行':Number(row.status) === 2?'限电':Number(row.status) === 3?'检修':'无通讯'
      let content = `${row.name}<br/>当前状态：${status}<br/>容量状态：${row.capacity} MW<br/>`+hjLabel+`：${row.hj} m/s<br/>实时功率：${row.sjgl} MW<br/>短期功率：${row.dq} MW<br/>
                     超短期功率：${row.cdq} MW<br/>可用功率：${row.kygl} MW<br/>理论功率：${row.llgl} MW`
      this.createTips(row, content)
    },

    createTips(row, value) {
      const parent = document.querySelector('.center-top_container');
      const {detailId} = row
      const tooltipDom = document.createElement('div')
      tooltipDom.style.cssText = `
        display: inline-block;
        max-width: 400px;
        max-height: 400px;
        position: absolute;
        top: ${Number(row.top) + 1}vh;
        left: ${Number(row.left)+1.5}vw;
        padding:.5vh .6vw;
        overflow: auto;
        font-size: .7vw;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #fff;
        background: rgba(77, 109, 144, 0.87);
        border-radius: 5px;
        z-index: 19999;
        box-shadow: 0 4px 12px 1px #89BFE5;
      `
      tooltipDom.innerHTML = value
      tooltipDom.setAttribute('id', `tooltip-${detailId}`)
      // 将浮层插入到body中
      parent.appendChild(tooltipDom);
    },

    /**
     * 移除tips
     * */
    removeTips(row) {
      const parent = document.querySelector('.center-top_container');
      const {detailId} = row
      const tooltipDomLeave = document.querySelectorAll(`#tooltip-${detailId}`)
      if (tooltipDomLeave.length) {
        tooltipDomLeave.forEach(dom => {
          parent.removeChild(dom)
        })
      }
    },
    /**
     * 跳转到中心预测页面
     * */
    jumpCloudDataPage(row){
      localStorage.setItem('map-jump-staion', row.stationCode)
      this.$router.push({path: "cloudDataQuery"})
    }
  }
}
</script>
<style>
.center-top_container {
  width: 100%;
  height: 58vh;
  //color: rgba(77, 109, 144, 0.87);
}

.sign-container {
  width: 5vw;
  right: .5vw;
  top: 1vh;
}

.runDay {
  left: 20vw;
  bottom: 0;
  color: orange;
  font-size: 1vw;
  font-weight: bold;
}

.sign-style {
  width: .5vw;
  height: 1vh;
  border-radius: .5vh;
}

.mr-0vw {
  margin-right: .5vw;
}

.green {
  background: #68ed68;
}
.green:hover {
  box-shadow: 0 4px 12px 1px #68ed68;
}

.yellow {
  background: yellow;
}
.yellow:hover {
  box-shadow: 0 4px 12px 1px yellow;
}
.red {
  background: red;
}
.red:hover {
  box-shadow: 0 4px 12px 1px red;
}

.grey {
  border-color: white;
  background: grey;
}
.grey:hover {
  box-shadow: 0 4px 12px 1px grey;
}
.img-style{
  width: 1.5vw;
}
.img-style:hover {
  transform: scale(1.3); /* 悬浮时放大图片 */
}
</style>