126 lines
2.5 KiB
Vue
126 lines
2.5 KiB
Vue
<!--
|
|
* @FilePath: \wwwd:\code\screenFront\src\views\MechanicalView_jingjia\content\tip2.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">
|
|
<!-- <template #content> {{ props.val.tiptext}} </template> -->
|
|
<div class="tipdiv">
|
|
<!-- <p>{{ item }}</p> -->
|
|
<div v-for="item in data">
|
|
<el-tooltip
|
|
class="box-item"
|
|
:content="`${item.name}:${JSON.parse(item.status) ? t('messages.onLine') : t('messages.offline')}`"
|
|
raw-content
|
|
effect="light"
|
|
popper-class="tooltip-class"
|
|
placement="top-start"
|
|
>
|
|
<i
|
|
:class="
|
|
JSON.parse(item.status)
|
|
? 'iconfont icon-blue iconSize ' + item.iconName
|
|
: 'iconfont icon-red iconSize ' + item.iconName
|
|
"
|
|
></i>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref, watch } from "vue";
|
|
import { useI18n } from 'vue-i18n'
|
|
let {t} = useI18n();
|
|
let props = defineProps<{
|
|
val: any;
|
|
msg: any;
|
|
}>();
|
|
let keynum = ref(0);
|
|
let data = null;
|
|
let content = null;
|
|
watch(
|
|
() => props.val,
|
|
(newVal, oldVal) => {
|
|
data = newVal;
|
|
content = "";
|
|
newVal.forEach((res) => {
|
|
// content+=`${res.name}<br/>`
|
|
// content += `${res.name}:${JSON.parse(res.status) ? "在线" : "离线"}<br/>`;
|
|
// content = ``;
|
|
});
|
|
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: #ff6e76;
|
|
/* 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: #9a474b;
|
|
}
|
|
100% {
|
|
}
|
|
}
|
|
@keyframes redstarton {
|
|
0% {
|
|
}
|
|
50% {
|
|
/* text-shadow: #fff 1px 0 5px; */
|
|
color: #10606c;
|
|
}
|
|
100% {
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
.el-popper.tooltip-class{
|
|
color: #fff !important;
|
|
}
|
|
</style> |