158 lines
4.0 KiB
Vue
158 lines
4.0 KiB
Vue
<!--
|
|
* @FilePath: \code\gitscreenFront\src\views\Offsite\child\childContent\chart\devTip.vue
|
|
* @Author: 王路平
|
|
* @文件版本: V1.0.0
|
|
* @Date: 2023-04-12 10:21:10
|
|
* @Description:
|
|
*
|
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
|
-->
|
|
<template>
|
|
<div ref="marginbox">
|
|
<border6 ref="refborder6">
|
|
<template v-slot>
|
|
<div class="box" :key="keynum" :style="{ width: boxWH.width, height: boxWH.height }">
|
|
|
|
<div class="title-box">
|
|
<h2>{{ props.title }}</h2>
|
|
</div>
|
|
<div v-if="tipList.length > 0" class="swiperbox">
|
|
<swiper-container :slides-per-view="3" :initialSlide="1" :loop="true" :space-between="spaceBetween"
|
|
:centered-slides="true" direction="vertical" :autoplay="{
|
|
delay: 3000,
|
|
disableOnInteraction: false,
|
|
}" @progress="onProgress" @slidechange="onSlideChange">
|
|
<swiper-slide v-for="(res,index) in tipList" :key="res.id">
|
|
<!-- <li class="itemclass"><div class="itemId-class">{{ res.id }}</div><div class="item-text"><p>机架号:<span class="item-label">{{ res.label }}</span></p><p>时间:<span>{{ res.time }}</span></p><p><span :style="{color:res.status?'green':'red'}">{{ res.status?'在线':'离线' }}</span></p><p>设备位置及名称:<span>{{ res.name }}</span></p></div></li> -->
|
|
|
|
<li class="itemclass">
|
|
<div class="itemId-class">{{ index+1 }}</div>
|
|
<div>
|
|
<div class="item-text">
|
|
<p>{{t('messages.RackNum')}}:<span class="item-label">{{ res.label }}</span></p>
|
|
<p>时间:<span>{{ res.ts }}</span></p>
|
|
</div>
|
|
<div class="item-text">
|
|
<p><span :style="{ color: JSON.parse(res.status) ? '#20aec5' : 'rgb(228, 57, 97)' }">{{ JSON.parse(res.status) ? t('messages.onLine') : t('messages.offline') }}</span></p>
|
|
<p>{{t('messages.JiqiName')}}:<span>{{ res.name }}</span></p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
</swiper-slide>
|
|
</swiper-container>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
</border6>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref } from "vue"
|
|
import border6 from "@/components/borderBox/border6.vue";
|
|
import { register } from 'swiper/element/bundle';
|
|
import { useI18n } from 'vue-i18n'
|
|
let {t} = useI18n();
|
|
register()
|
|
let props = defineProps<{
|
|
title: string;
|
|
}>();
|
|
let keynum = ref(0);
|
|
let refborder6 = ref();
|
|
let marginbox = ref();
|
|
let boxWH = reactive({
|
|
width: "0px",
|
|
height: "0px",
|
|
});
|
|
const spaceBetween = 10;
|
|
let tipList = reactive([]);
|
|
function setchartWH(width: any, height: any) {
|
|
marginbox.value.style.height = height + "px";
|
|
marginbox.value.style.width = width + "px";
|
|
boxWH.height = height - 10 + "px";
|
|
boxWH.width = width - 10 + "px";
|
|
refborder6.value.resetWH();
|
|
}
|
|
const setData = (value?: any) => {
|
|
tipList = reactive([...value])
|
|
|
|
keynum.value++;
|
|
// data.value='设备名称'
|
|
};
|
|
const onProgress = (e) => { };
|
|
|
|
const onSlideChange = (e) => { };
|
|
defineExpose({
|
|
setchartWH,
|
|
setData,
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.title-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.title-box>h2 {
|
|
margin-left: 20px;
|
|
color: #fff;
|
|
font-size: 20px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.itemclass {
|
|
display: flex;
|
|
height: 100%;
|
|
align-items: center;
|
|
border-bottom: #0545A1 1px solid;
|
|
}
|
|
|
|
.itemclass .itemId-class {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
height: 100%;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.item-text {
|
|
width: 100%;
|
|
height: 50%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
/* align-items: center; */
|
|
margin: 5px auto;
|
|
}
|
|
|
|
.item-text p {
|
|
color: #Fff;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.item-text span {
|
|
color: #Fff;
|
|
font-size: 18px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.item-label {
|
|
color: #0545A1;
|
|
}
|
|
|
|
.swiperbox {
|
|
width: 100%;
|
|
height: 85%;
|
|
}
|
|
|
|
.swiper,
|
|
swiper-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: inline-block !important;
|
|
}
|
|
</style>
|
|
|