90 lines
2.3 KiB
Vue
90 lines
2.3 KiB
Vue
<template>
|
|
<view class="page_padding font14">
|
|
<view class="padd_bot12 font14 flex_layout">
|
|
<text>硬件设备状态</text>
|
|
<view class="status font12"><text class="drop"></text>在线</view>
|
|
</view>
|
|
<view class="body-view contentboxsty">
|
|
<view class="content-top flex_layout padd_bot12">
|
|
<view class="flex1 theme_color">
|
|
<text class="drop"></text>相机工作中
|
|
</view>
|
|
<view class="top_right" @click="toList()">
|
|
更多安全事件
|
|
<text class="iconfont icon-gengduo"></text>
|
|
</view>
|
|
</view>
|
|
<view class="content_monitor" style="width: 100%;">
|
|
<image style="width: 100%;" src="http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/background.png" mode=""></image>
|
|
</view>
|
|
<view class="content_data">
|
|
<view class="device_row">
|
|
<text class="name font_bold">设备名称</text>
|
|
<text class="text">安全监控相机</text>
|
|
</view>
|
|
<view class="device_row">
|
|
<text class="name font_bold">开机时间</text>
|
|
<text class="text">2024-02-11 08:00:45</text>
|
|
</view>
|
|
<view class="device_row">
|
|
<text class="name font_bold">安全事件</text>
|
|
<text class="text">检测到指定区域内有目标越过警戒线</text>
|
|
</view>
|
|
<view class="device_row">
|
|
<text class="name font_bold">检测时间</text>
|
|
<text class="text">2024-01-11 19:09:56</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
toList(){
|
|
uni.navigateTo({
|
|
url:'/pages/deviceStatus/detectionEventList'
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.body-view{padding: 12px 13px;}
|
|
.theme_color{
|
|
display: flex;align-items: center;
|
|
.drop{width: 4px;height: 4px;background: $uni-text-color-primary;display: inline-block;margin-right: 6px;border-radius: 50%;}
|
|
.top_right{color: $uni-text-color-primary;}
|
|
}
|
|
.device_row{padding: 6px 0;display: flex;align-items: center;
|
|
.name {flex-basis: 70px;}
|
|
}
|
|
.flex_layout{
|
|
align-items: center;
|
|
}
|
|
.status{
|
|
background: $uni-bg-color-success;
|
|
margin-left: 8px;
|
|
border-radius: 20px;
|
|
padding: 3px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
.drop{
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: $uni-bg-color-whith;
|
|
display: inline-block;
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
|
|
</style>
|