116 lines
2.2 KiB
Vue
116 lines
2.2 KiB
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="dark"
|
||
|
|
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; */
|
||
|
|
}
|
||
|
|
@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>
|