screenFront/src/views/Offsite/child/childContent/chart/devImage.vue

<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\Offsite\child\childContent\chart\devImage.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="imageList.length > 0" class="swiperbox">
            <swiper-container 
            :slides-per-view="1" 
            :space-between="spaceBetween" 
            effect="coverflow"
            :centered-slides="true" 
            :pagination="{ hideOnClick: true,}" 
            :navigation="{
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
              enabled: false,
            }" 
            :autoplay="{  delay: 3000,  disableOnInteraction: false,}" 
            @progress="onProgress" 
            @slidechange="onSlideChange" style="width: 97%;">
              <swiper-slide v-for="res in imageList" :key="res.id">
                <el-image style="width: 100%; height: 100%" :src="res.image" :fit="'scale-down'">
                </el-image>
              </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';
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 imageList = 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) => {
  imageList = 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;
}

.swiperbox {
  width: 100%;
  height: 85%;
}

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