221 lines
5.8 KiB
Vue
221 lines
5.8 KiB
Vue
<style lang='scss' scoped>
|
||
.deviceDetail{
|
||
width: 100%;
|
||
&-info{
|
||
padding: 30rpx $paddingLR;
|
||
&-header-right{
|
||
display: flex;
|
||
.icon-ctn{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
&-info-content{
|
||
display: flex;
|
||
padding-top: 30rpx;
|
||
}
|
||
&-info-text{
|
||
width: calc(100% - 200rpx);
|
||
padding-left: 30rpx;
|
||
font-size: $uni-font-size-sm;
|
||
&-row{
|
||
display: flex;
|
||
width: 100%;
|
||
padding-bottom: 14rpx;
|
||
&-label{
|
||
width: 130rpx;
|
||
color: #777;
|
||
text-align: right;
|
||
}
|
||
&-value{
|
||
width: calc(100% - 130rpx);
|
||
}
|
||
}
|
||
}
|
||
&-info-runRecord{
|
||
width: 90%;
|
||
height: 70rpx;
|
||
margin: 0 auto;
|
||
border-radius: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #1C9AFF;
|
||
border: 1px solid #1C9AFF;
|
||
}
|
||
&-line{
|
||
width: 100%;
|
||
height: 4rpx;
|
||
background-color: #EFEFEF;
|
||
}
|
||
&-relation-device-info{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: $paddingTB $paddingLR;
|
||
align-items: center;
|
||
.icon{
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #1C9AFF;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
&-camera,&-smoke{
|
||
&-header{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: $paddingTB $paddingLR;
|
||
background-color: #F0EDF1;
|
||
}
|
||
&-box{
|
||
padding: 30rpx $paddingLR;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid #eee;
|
||
&:last-child{
|
||
border-bottom: none;
|
||
}
|
||
&-row{
|
||
padding-bottom: 10rpx;
|
||
&-label{
|
||
width: 60rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style>
|
||
<template>
|
||
<view class="deviceDetail">
|
||
<view class="deviceDetail-info">
|
||
<view class="deviceDetail-info-header flex-between">
|
||
<view class="deviceDetail-info-header-left">
|
||
<text>烟雾探测报警器</text>
|
||
<u-tag class="ml20" text="正常" size="mini" type="success" />
|
||
</view>
|
||
<view class="deviceDetail-info-header-right">
|
||
<view class="icon-ctn">
|
||
<tuiIcon name="dianchidianya" color="#30A3DF"></tuiIcon>
|
||
<text class="pl10">3.0V</text>
|
||
</view>
|
||
<view class="icon-ctn ml30">
|
||
<tuiIcon name="zuxinh" color="#30A3DF"></tuiIcon>
|
||
<text class="pl10">离线</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="deviceDetail-info-content">
|
||
<u-image src="http://static.drgyen.com/app/hc-app-power/images/car.png" width="200" height="200"></u-image>
|
||
<view class="deviceDetail-info-text">
|
||
<view class="deviceDetail-info-text-row">
|
||
<view class="deviceDetail-info-text-row-label">运营商：</view>
|
||
<view class="deviceDetail-info-text-row-value">德润HC-IOT</view>
|
||
</view>
|
||
<view class="deviceDetail-info-text-row">
|
||
<view class="deviceDetail-info-text-row-label">编号：</view>
|
||
<view class="deviceDetail-info-text-row-value">20200000000000000</view>
|
||
</view>
|
||
<view class="deviceDetail-info-text-row">
|
||
<view class="deviceDetail-info-text-row-label">位置：</view>
|
||
<view class="deviceDetail-info-text-row-value">德润科技18楼101北区</view>
|
||
</view>
|
||
<view class="deviceDetail-info-text-row">
|
||
<view class="deviceDetail-info-text-row-label">详情地址：</view>
|
||
<view class="deviceDetail-info-text-row-value">福建省福州市闽侯县上街镇</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="deviceDetail-info-runRecord" @click="goRuningRecord">运行记录</view>
|
||
</view>
|
||
<view class="deviceDetail-line"></view>
|
||
<view class="deviceDetail-relation-device-info">
|
||
<view class="title">关联设备信息</view>
|
||
<view class="icon">
|
||
<u-icon name="plus" color="#fff"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="deviceDetail-camera">
|
||
<view class="deviceDetail-camera-header">
|
||
<text>摄像头</text>
|
||
<text>2个</text>
|
||
</view>
|
||
<view class="deviceDetail-camera-list">
|
||
<view class="deviceDetail-camera-box" v-for="(item,index) in 2" :key="index">
|
||
<view class="deviceDetail-camera-box-info">
|
||
<view class="deviceDetail-camera-box-row">
|
||
<text class="deviceDetail-camera-box-row-label">名称：</text>
|
||
<text class="deviceDetail-camera-box-row-value">北区</text>
|
||
</view>
|
||
<view class="deviceDetail-camera-box-row">
|
||
<text class="deviceDetail-camera-box-row-label">地址：</text>
|
||
<text class="deviceDetail-camera-box-row-value">中青大厦18楼101北区</text>
|
||
</view>
|
||
</view>
|
||
<view class="deviceDetail-camera-box-status" :style="{color:getDeviceStatusColorFn(1)}">火警</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="deviceDetail-smoke">
|
||
<view class="deviceDetail-smoke-header">
|
||
<text>烟雾</text>
|
||
<text>2个</text>
|
||
</view>
|
||
<view class="deviceDetail-smoke-list">
|
||
<view class="deviceDetail-smoke-box" v-for="(item,index) in 2" :key="index">
|
||
<view class="deviceDetail-smoke-box-info">
|
||
<view class="deviceDetail-smoke-box-row">
|
||
<text class="deviceDetail-smoke-box-row-label">名称：</text>
|
||
<text class="deviceDetail-smoke-box-row-value">北区</text>
|
||
</view>
|
||
<view class="deviceDetail-smoke-box-row">
|
||
<text class="deviceDetail-smoke-box-row-label">地址：</text>
|
||
<text class="deviceDetail-smoke-box-row-value">中青大厦18楼101北区</text>
|
||
</view>
|
||
</view>
|
||
<view class="deviceDetail-smoke-box-status" :style="{color:getDeviceStatusColorFn(1)}">火警</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {}
|
||
},
|
||
onLoad() {},
|
||
methods: {
|
||
goRuningRecord(){
|
||
uni.navigateTo({
|
||
url:"./runingRecord"
|
||
})
|
||
},
|
||
getDeviceStatusColorFn(status){
|
||
switch (status){
|
||
case 1:
|
||
return "green"
|
||
break;
|
||
case 2:
|
||
return "#ccc"
|
||
break;
|
||
case 3:
|
||
return "#2292EF"
|
||
break;
|
||
case 4:
|
||
return "#F59B24"
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|