gy-app-shop/pages/home/electricalFire/smokeDetail.vue

221 lines
5.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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