129 lines
2.9 KiB
Vue
129 lines
2.9 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="header">
|
|
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
|
|
:duration="duration">
|
|
<swiper-item v-for="(item,index) in swiperList" :key="index" class="swiper-item">
|
|
<image class="img-swiper" :src="item"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="device-con">
|
|
<view class="device-tip">设备名称</view>
|
|
<view class="device-content">{{device.equipmentName}}</view>
|
|
<view class="device-tip">设备信息</view>
|
|
<view class="device-content" v-html="device.equipmentContent"></view>
|
|
<view class="device-tip">设备所在场所</view>
|
|
<view class="device-content">{{device.equipmentLocationName}}</view>
|
|
<view class="device-tip">设备位置</view>
|
|
<view class="device-content">{{device.equipmentPostion}}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
data(){
|
|
return{
|
|
indicatorDots: true,
|
|
autoplay: true,
|
|
interval: 2000,
|
|
duration: 500,
|
|
deviceId:'',
|
|
swiperList: [],
|
|
device:{}
|
|
}
|
|
},
|
|
methods:{
|
|
async getDetail() {
|
|
const res = await this.$myRequest({
|
|
url: '/system/equipment/' + this.deviceId,
|
|
})
|
|
if(res.data.code == 200){
|
|
this.device = res.data.data;
|
|
if(res.data.data.equipmentPic !=null && res.data.data.equipmentPic != '' && res.data.data.equipmentPic.includes(',')){
|
|
var list = [];
|
|
list = res.data.data.equipmentPic.split(',')
|
|
for (let i = 0; i < list.length; i++) {
|
|
list[i] = this.baseUrl + list[i]
|
|
}
|
|
this.swiperList = list;
|
|
}else{
|
|
this.swiperList.push(this.baseUrl + res.data.data.equipmentPic)
|
|
}
|
|
}
|
|
|
|
},
|
|
},
|
|
onLoad(option){
|
|
this.swiperList = [];
|
|
this.deviceId = option.id;
|
|
this.getDetail();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.content{
|
|
.header {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
margin-top: 20rpx;
|
|
height: 360rpx;
|
|
|
|
.swiper {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 12rpx;
|
|
.swiper-item{
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 12rpx;
|
|
.img-swiper {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 12rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.device-con{
|
|
margin: 10px 10px;
|
|
padding: 10px;
|
|
line-height: 25px;
|
|
padding-bottom: 20px;
|
|
border-radius: 10px;
|
|
.device-title{
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
word-break: break-word;
|
|
}
|
|
.device-content{
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
border-bottom: 1px solid #ECF2FE;
|
|
padding-bottom: 5px;
|
|
&.info{
|
|
color: #333;
|
|
font-weight: 500;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
.device-tip{
|
|
font-size: 13px;
|
|
color: #888;
|
|
font-weight: 500;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|