vue使用轮播图：swiper-wrapper

<template>
  <div class="bg">
  <div class="eqp_wrapper swiper-wrapper">

      <!--	<swiper class="swiper-wrapper depart-list" style="height: 100%" :options="swiperOption"-->
    <swiper class="eqp_list swiper-wrapper"   ref="mySwiper"  style="height: 100%" :options="swiperOption">

      <swiper-slide class="swiper-slide"  v-for="(one,index1) in loop">
        <div   v-for="(item,index) in one" :class="item.code">
<!--          v-if="判断设备数据是真是数据还是假数据"-->
          <div class="eqp_view" ref="eqpview"   :class="item.switchStatus != '1' ? 'eqp_view_off' : ''">
<!--          <div class="eqp_view" :styles="setStyles" ref="eqpview"   :class="item.switchStatus != '1' ? 'eqp_view_off' : ''">-->
            <div class="eqp_item" >
              <div class="eqp_head">
                <p class="eqp_name"  v-html="item.name"></p>
              </div>
              <div class="eqp_body">
                <img  v-show="item.switchStatus !='1'" class="off" src="../../assets/images/off.png" />
                <div class="eqp_con">
                  <p>试验箱编号：<span>{{item.code}}</span></p>
                  <p>开关机信息：
                    <span v-if="item.switchStatus === '1'">开机</span>
                    <span v-if="item.switchStatus === '0'">关机</span>

                  </p>
                  <p>试验任务号：<span v-show="item.switchStatus =='1'">{{item.testTaskCode}}</span></p>

                  <p>是否产品控温：
                    <span v-if="item.temperatureControl === '0'">否</span>
                    <span v-if="item.temperatureControl === '1'">是</span>

                  </p>
                  <p class="eqp_stus">试验状态：
                    <span v-if="item.testStatus === '1' &&  item.switchStatus ==='1'">试验中</span>
                    <span v-if="item.testStatus === '2' && item.switchStatus ==='1'">未试验</span>
                    <span v-if="item.testStatus === '3' && item.switchStatus ==='1'">试验完成</span>

                    <img v-show="item.testStatus=='3' &&  item.switchStatus =='1'"
                         src="../../assets/images/runstate_move.png"  />
                    <img v-show="item.testStatus=='1'" src="../../assets/images/runstate_stop.png" />
                    <img v-show="item.testStatus=='2'" src="../../assets/images/runstate_hitch.png" />
                    </p>

                </div>
              </div>
              <div class="eqp_foot">
                <table class="eqp_table">
                  <tr>
                    <td></td>
                    <td>温度</td>
                    <td>湿度</td>
                  </tr>
                  <tr>
                    <td>设定值</td>
                    <td v-show="item.switchStatus =='1'" :class="'standardTimeTemperature' + item.code" v-model="item.temperature ">{{item.temperature}}℃</td>
                    <td v-show="item.switchStatus !='1'" :class="'standardTimeTemperature' + item.code">/</td>
                    <td v-show="item.switchStatus !='1'" :class="'standardTimeHumidity' + item.code">/</td>
                    <td v-show="item.switchStatus =='1'" :class="'standardTimeHumidity' + item.code" v-model="item.humidity">{{item.humidity}}%RH</td>
                  </tr>
                  <tr>
                    <td>实测值</td>
                    <td  v-show="item.switchStatus =='1'" :class="'realTimeTemperature' + item.code" v-model="item.realTimeTemperature">{{item.realTimeTemperature}}℃</td>
                    <td  v-show="item.switchStatus !='1'" :class="'realTimeTemperature' + item.code">/</td>
                    <td  v-show="item.switchStatus =='1'" :class="'realTimeHumidity' + item.code" v-model="item.realTimeHumidity">{{item.realTimeHumidity}}%RH</td>
                    <td  v-show="item.switchStatus !='1'" :class="'realTimeHumidity' + item.code">/</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>

        </div>

      </swiper-slide>

    </swiper>
    <!-- 如果需要分页器 -->
<!--    <div class="swiper-pagination"></div>-->
<!--    <div class="swiper-pagination" slot="pagination"></div>-->

  </div>

  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import { selectDeviceListWithRealTime } from "@/api/device/device";
import {getDicts} from "@/api/system/dict/data";

// <style scoped>
import '@/assets/static/css/basic.css';
import '@/assets/static/css/swiper-bundle.min.css';

import { getToken } from '@/utils/auth'
// 这个分号一定要写，要不会报错
// </style>
export default {
  name: "devices",
  components: { swiper, swiperSlide},
  dicts: ['switch_status', 'test_status','temperature_control'],


  // var switchStatus = [[${@dict.getType('switch_status')}]];
  // var testStatus = [[${@dict.getType('test_status')}]];
  // var temperatureControl = [[${@dict.getType('temperature_control')}]];

    data() {
      return {
      
        devices:[],
       
        swiperOption: {
          loop: false,
          autoplay: {
            delay: 5000,
            stopOnLastSlide: false,
            disableOnInteraction: false
          },
          // simulateTouch: true,//鼠标模拟手机触摸。默认为true，Swiper接受鼠标点击、拖动。
          // 显示分页
          pagination: {
            // el: ".swiper-pagination",
            clickable: true //允许分页点击跳转
          },
          // 设置点击箭头
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev"
          }
        },
        swipertotal:'',
        // swiperslidelist:[{"loop":[],"items":[]},],
        swiperslidelist:[],
        loop:[],
       
        
      };
    },
    computed: {
      swiper() {
        return _this.$refs.mySwiper.swiper;
      },
      flist(){
        // 如果item(水果列表中变量的项)包含文字 this.keyword(搜索关键字)
        // a.includes(b)如果a包含b就返回true
        // 返回true当前水果·就保留
        return this.list.filter(item=>item.includes(this.keyword))
      },

    },

  created() {
    // this.viewScroll()
    this.getData()

  },
 
  updated() {
    // this.viewScroll()
    this.websocket()
    // heartCheck.startConnect(true);
  },
  // beforeUpdate() {
  //   var _this = this
  //   this.viewScroll(_this.devices)
  // },
  mounted() {
    this.viewScroll()
  },
  watch: {
    devices() {
      this.$nextTick(() => {
        var _this = this
        // this.viewScroll(_this.devices)
        // this.mySwiperList()
      })
    }
  },
  methods: {
    setStyles(){

      // this.$nextTick(() => {
      var _this = this
      var eqpNum = this.devices.length;
      // alert(htmlFs * 3 + 'px')
      var eqpview = document.getElementsByClassName("eqp_view")
      if (eqpNum == 1) {
        return {'width': '100%'}
        // eqpview.setProperty('width', '100%') // 给变量赋值
        html.style.fontSize = htmlFs * 3 + 'px';
      } if (eqpNum == 2) {
        // eqpview.css('width', '50%');
        // eqpview.setProperty('width', '50%') // 给变量赋值
        // eqpview.setProperty("style","width: 50%")
        return {'width': '50%'}
        html.style.fontSize = htmlFs * 3 + 'px';
      } if (eqpNum == 3 || eqpNum == 4) {
        // eqpview.css('width', '50%');
        // eqpview.setProperty('width', '50%') // 给变量赋值
        // eqpview.setProperty("style","width: 50%")
        return {'width': '50%'}
        html.style.fontSize = htmlFs * 1.8 + 'px';
      } if (eqpNum == 5 || eqpNum == 6) {
        // eqpview.css('width', '33.33%');
        // eqpview.setProperty('width', '33.33%') // 给变量赋值
        // eqpview.setProperty("style","width: 33.33%")
        return {'width': '33.33%'}
        html.style.fontSize = htmlFs * 1.8 + 'px';
      } if (eqpNum == 7 || eqpNum == 8) {
        // eqpview.css('width', '25%');
        // eqpview.setProperty('width', '25%') // 给变量赋值
        // eqpview.setProperty("style","width: 25%")
        return {'width': '25%'}
        html.style.fontSize = htmlFs * 1.5 + 'px';
      } if (eqpNum == 9 || eqpNum == 10 || eqpNum == 11 || eqpNum == 12 || eqpNum == 13 || eqpNum == 14 || eqpNum == 15) {
        // eqpview.css('width', '20%');
        // eqpview.setProperty('width', '20%') // 给变量赋值
        // eqpview.setProperty("style","width: 20%")
        return {'width': '20%'}
        html.style.fontSize = htmlFs * 1.1 + 'px';
      } if (eqpNum > 15) {
        // eqpview.css('width', '16.66%');
        // eqpview.setProperty('width', '16.66%') // 给变量赋值
        // eqpview.setProperty("style","width: 16.66%")
        return {'width': '25%'}

      }
      // console.log("元素1111"+eqpview)
      // this.$refs.tableStyle.$el.style.setProperty('--tableBorder', this.table_border) // 给变量赋值
      // this.$refs.tableStyle.$el.style.setProperty('--tableHeaderBorder', this.table_header_border) // 给变量赋值

      // })
    },
    viewScroll:function(devices){

      var setHtml = function() {
        var html = document.documentElement; // 获取html
        var width = html.clientWidth; // 获取宽度
        var fontSize = width / 19.2 + 'px';
        // 设置给html
        html.style.fontSize = fontSize;
        var _this = this
        var htmlFs = parseInt(html.style.fontSize);
        var eqpNum = 18;
       

      }
      setHtml();
      window.onresize = function() {
        setHtml();
      }
      // this.mySwiperList()
    },
    
  
    getData: function () {
      const _this = this;
      getDicts('switch_status').then(data => {
         _this.switchStatus   = data.data;
        // console.log(222222222+JSON.stringify(_this.switchStatus))
        })
        getDicts('test_status').then(data => {
         _this.testStatus   = data.data;
        })
        getDicts('temperature_control').then(data => {
         _this.temperatureControl   = data.data;

       });
      selectDeviceListWithRealTime({}).then(response => {
        _this.devices = response.rows;
        // console.log("设备11111111"+JSON.stringify(response))
        for (let i = 0; i < _this.devices.length / 18; i++) {
          _this.loop.push(_this.devices.slice(i * 18,i* 18 + 18))

        }

      })
    },
   

      // 启动websocket连接
      heartCheck.startConnect(true);
    }
   }

}
</script>

<style scoped>

html, .bg {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.eqp_wrapper {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
</style>