screenFront/src/views/electronicControl/childContent/chart/devTip.vue

<!--
 * @FilePath: \screenFront\src\views\electronicControl\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="per_view" :initialSlide="1" :loop="true" :space-between="spaceBetween"
             direction="vertical" :autoplay="{
                  delay: 3000,
                  disableOnInteraction: false,
                }" @progress="onProgress" @slidechange="onSlideChange">
              <swiper-slide v-for="(res,index) in tipList" :key="index">
                <li class="itemclass">
                  <div class="itemId-class">{{ index+1 }}</div>
                  <div>
                    <div class="item-text">
                    <p>{{t('messages.DevType')}}:<span class="item-label">{{ res.label }}</span></p>
                    <p>时间:<span>{{ res.time }}</span></p>                    
                  </div>
                  <div class="item-text">
                    <p><span :style="{ color: res.status ? '#20aec5' : 'rgb(228, 57, 97)'  }">{{ res.status ? t('messages.onLine') : t('messages.offline') }}</span></p>
                    <p>{{t('messages.DevName')}}:<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 = 0;
let tipList = reactive([]);
let per_view = ref(3)



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])
  if (tipList.length > 3) {
    per_view.value = 3
  } else {
    per_view.value = tipList.length
  }
  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;
  text-align: left;
}

.item-text span {
  color: #Fff;
  font-size: 18px;
  margin-right: 10px;
}

.item-label {
  color: #0545A1;
}

.swiperbox {
  width: 100%;
  height: 80%;
  margin-top: 15px;
}

.swiper,
swiper-container {
  width: 100%;
  height: 100%;
  display: inline-block !important;
}</style>