screenFront/src/views/MechanicalViewEdit/content/tip.vue

<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\AerialView\content\tip.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-03-20 09:12:05
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div class="tip-box-logo" :key="keynum">
    <el-tooltip
      class="box-item"
      :content="content"
      raw-content
      effect="light"
      popper-class="tooltip-class"
      placement="top-start"
    >
      <!-- <template #content> {{ props.val.tiptext}} </template> -->
      <div class="tipdiv">
        <!-- <p>{{ item }}</p> -->
        <i
          v-for="item in data"
          :class="JSON.parse(item.status)?'iconfont icon-blue iconSize '+item.iconName:'iconfont  icon-red  iconSize '+item.iconName"
        ></i>
      </div>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
let props = defineProps<{
  val: any;
  msg:any;
}>();
let keynum=ref(0)
let data = null
let content = null
watch(
  () => props.val,
  (newVal, oldVal) => {
    // console.log(newVal,"处理");
    
    data = newVal
    content=''
    newVal.forEach(res=>{
      content+=`${res.name}<br/>`
        // content+=`${res.name}:${JSON.parse(res.status)?'在线':'离线'}<br/>`
    })
    content=props.msg+content
    keynum.value++
  },
  { deep: true, flush: "post" }
);
const a = ref(0);
onMounted(() => {
});
</script>

<style scoped>
@import url("@/assets/css/iconfont.css");
.tip-box-logo {
  width: 100%;
  height: 100%;
  display: flex;
}
.iconSize {
  font-size:1.2rem;
  /* color: #fff; */
}
.tipdiv {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.icon-red {
  /* color: #20AEC5; */
  color: #E43961;
  animation: redstart 2s infinite;
  /* position: relative; */
  /* top: -15px; */
}
.icon-blue {
  color: #20AEC5;
  animation: redstarton 2s infinite;
  /* position: relative; */
  /* top: -15px; */
}
.el-popper{
  color: #fff !important;
}
@keyframes redstart {
    0% {
        
      }
      50% {
        /* text-shadow: #fff 1px 0 5px; */
        color: #10606c;
    }
      100% {
       
      }
}
@keyframes redstarton {
    0% {
        
      }
      50% {
        /* text-shadow: #fff 1px 0 5px; */
        color: #10606c;
    }
      100% {
       
      }
}
</style>
<style>
.el-popper.tooltip-class{
    color: #fff !important;
}
</style>