<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>