436 lines
9.8 KiB
Vue
436 lines
9.8 KiB
Vue
<template>
|
|
<view class="container">
|
|
<uni-nav-bar :fixed="true" left-icon="left" background-color="#0F6EFF" @clickLeft="back()" status-bar :title="item.stationName"/>
|
|
<view class="liebiaos">
|
|
<view class="list_item">
|
|
<view class="list_item_top">
|
|
<view class="list_item_left">
|
|
<image v-if="item.deviceInfo.deviceIcon" :src="baseUrl + '/applet/common/static/' + item.deviceInfo.deviceIcon" mode=""></image>
|
|
<view class="item_right">
|
|
<view class="right_top" v-if="item.deviceInfo.deviceName">
|
|
{{item.deviceInfo.deviceName}}
|
|
</view>
|
|
<view class="right_bot">
|
|
<image src="../../static/shebei_icon_zhibiao.png" mode=""></image>
|
|
<view class="">监测指标：{{survItem.length || 0}} 项</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="state">
|
|
<view class="" v-if="item.isOnline == 1">
|
|
在线
|
|
</view>
|
|
<view class="" v-else>
|
|
离线
|
|
</view>
|
|
<image v-if="item.isOnline == 1" src="../../static/zhandian_icon_zaixian .png" mode="" class="zt"></image>
|
|
<image v-else src="../../static/zhandian_icon_lixian.png" mode="" class="zt"></image>
|
|
</view>
|
|
</view>
|
|
<view class="list_item_bot">
|
|
<view class="bots_item" v-if="item.deviceInfo.deviceManufacturer">
|
|
<image src="../../static/shebei_icon_pinpai.png" mode=""></image>
|
|
<view class="pp">
|
|
设备品牌:
|
|
</view>
|
|
<view class="mz">
|
|
{{item.deviceInfo.deviceManufacturer}}
|
|
</view>
|
|
</view>
|
|
<view class="bots_item" style="margin-top: 34rpx;" v-if="item.deviceInfo.deviceModel">
|
|
<image src="../../static/shebei_icon_xinghao.png" mode=""></image>
|
|
<view class="pp">
|
|
设备型号:
|
|
</view>
|
|
<view class="mz">
|
|
{{item.deviceInfo.deviceModel}}
|
|
</view>
|
|
</view>
|
|
<view class="bots_item" style="margin-top: 34rpx;" v-if="survItem.length != 0">
|
|
<!-- <view style="display: flex;align-items: center;height: 34rpx;">
|
|
<image src="../../static/shebei_icon_jiancezhibiao.png" mode=""></image>
|
|
<view class="pp">
|
|
监测指标:
|
|
</view>
|
|
</view> -->
|
|
<view class="jstimerig_bot">
|
|
<view style="display: flex;align-items: center;height: 34rpx;">
|
|
<image src="../../static/shebei_icon_jiancezhibiao.png" mode=""></image>
|
|
<view class="pp">
|
|
监测指标:
|
|
</view>
|
|
</view>
|
|
<view class="tag-view" v-for="(item,index) in survItem" :key="index">
|
|
<view :style="{background:item.color}" class="tag">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="sssjjc">
|
|
<view class="sssjjc_left">
|
|
实时数据监测
|
|
</view>
|
|
<view class="topnum">
|
|
累计 <span class="number">{{list.length}}</span>条
|
|
</view>
|
|
</view>
|
|
<view class="scrolllist">
|
|
<view class="scrolltop" v-if="list.length != 0">
|
|
<view class="tabitem" v-for="(item,index) in tabList" :key="index">
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
<scroll-view style="height: 550rpx;" scroll-y="true" class="scroll-Y">
|
|
<block v-if="list.length != 0">
|
|
<view class="lists_item" v-for="(item,index) in list" :key="index">
|
|
<view class="jczbs">
|
|
{{item.name}}
|
|
</view>
|
|
<view class="zbz">
|
|
{{item.value || 0}}{{item.unit}}
|
|
</view>
|
|
<!-- <view class="szqs">
|
|
<image v-if="item.type == 1" src="../../../static/home_shuju_shang.png" mode=""></image>
|
|
<image v-if="item.type == 0" src="../../../static/home_shuju_xia.png" mode=""></image>
|
|
<view class="szqss" v-if="item.type == 2"></view>
|
|
</view> -->
|
|
<view class="sbsj">
|
|
{{item.dataDateTime}}
|
|
</view>
|
|
</view>
|
|
<view class="zwgd" style="width: 100%;height: 100rpx; line-height: 100rpx;text-align: center;color: #c6c6c6;">
|
|
暂无更多数据
|
|
</view>
|
|
</block>
|
|
<view class="load" v-else>
|
|
暂无数据
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import api from "@/api/api"
|
|
import configService from '@/common/service/config.service.js';
|
|
export default{
|
|
data(){
|
|
return{
|
|
item:{},
|
|
baseUrl:configService.apiUrl,
|
|
tabList:['监测指标','指标值','上报时间'],
|
|
colorList:['#22BB8A','#EE701C','#52AC2A','#2BADB9','#D75A28','#AD8F49','#26A3CC','#6C48C7','#22BB8A','#415FBE','#52AC2A','#EE701C'],
|
|
list:[],
|
|
deployCode:'',
|
|
survItem:[]
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
console.log(JSON.parse(decodeURIComponent(options.item)))
|
|
this.item = JSON.parse(decodeURIComponent(options.item));
|
|
},
|
|
onShow() {
|
|
this.getsssj()
|
|
},
|
|
methods:{
|
|
getsssj(){
|
|
let params = {}
|
|
params.deployCode = this.item.deployCode
|
|
params.deployId = this.item.id
|
|
this.$http.get('/applet/wxclient/getSurvDataByDevice',{params:params}).then(res=>{
|
|
this.list = res.data.data.dataList
|
|
this.survItem = res.data.data.zhibiao
|
|
for(var i=0;i<this.list.length;i++){
|
|
this.list[i].value = (Math.floor(this.list[i].value * 100) / 100).toFixed(2)
|
|
}
|
|
})
|
|
},
|
|
back(){
|
|
uni.navigateBack({
|
|
delta:1
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.uni-nav-bar {
|
|
height: 44px;
|
|
}
|
|
.uni-nav-bar-text {
|
|
font-size: 32rpx !important;
|
|
font-family: Source Han Sans SC;
|
|
color: #FFFFFF !important;
|
|
}
|
|
.uni-nav-bar__left,
|
|
.uni-nav-bar__right {
|
|
color: #FFFFFF !important;
|
|
}
|
|
.uni-navbar__content {
|
|
border: 0 none !important;
|
|
}
|
|
.uni-navbar__header-container-inner{
|
|
padding: 0 40rpx;
|
|
box-sizing: border-box;
|
|
/* 文本不折行 */
|
|
white-space: nowrap;
|
|
/* 溢出隐藏 */
|
|
overflow: hidden;
|
|
}
|
|
.uni-icons{
|
|
color: #FFFFFF !important;
|
|
}
|
|
page{
|
|
height: 100%;
|
|
}
|
|
.container{
|
|
height: 100%;
|
|
}
|
|
.liebiaos{
|
|
padding: 28rpx 32rpx;
|
|
}
|
|
.list_item{
|
|
width: 100%;
|
|
padding: 37rpx 34rpx 28rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 34rpx;
|
|
margin-bottom: 42rpx;
|
|
position: relative;
|
|
}
|
|
.list_item:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
.list_item_top{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-bottom: 64rpx;
|
|
}
|
|
.list_item_left{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.list_item_left image{
|
|
width: 73rpx;
|
|
height: 73rpx;
|
|
margin-right: 18rpx;
|
|
}
|
|
.item_right{
|
|
height: 76rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
.right_top{
|
|
font-size: 32rpx;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
color: #2F3841;
|
|
}
|
|
.right_bot{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 400;
|
|
color: #9CA9BE;
|
|
}
|
|
.right_bot image{
|
|
height: 26rpx;
|
|
width: 24rpx;
|
|
margin-right: 11rpx;
|
|
}
|
|
.jt{
|
|
width: 40rpx;
|
|
height: 48rpx;
|
|
}
|
|
.state{
|
|
background: #F6F6F6;
|
|
border-top-left-radius: 26rpx;
|
|
border-bottom-left-radius: 26rpx;
|
|
width: 171rpx;
|
|
height: 52rpx;
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 400;
|
|
color: #5F7088;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 24rpx;
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
top: 31rpx;
|
|
right: -32rpx;
|
|
}
|
|
.zt{
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-left: 18rpx;
|
|
}
|
|
.bots_item{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.bots_item image{
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
.pp{
|
|
font-size: 26rpx;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
color: #142E55;
|
|
margin-right: 38rpx;
|
|
min-width: 112rpx;
|
|
}
|
|
.mz{
|
|
font-size: 26rpx;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 400;
|
|
color: #566070;
|
|
}
|
|
.jstimerig_bot{
|
|
font-size: 26rpx;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 400;
|
|
color: #566070;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.tag{
|
|
padding: 6rpx 12rpx 6rpx 12rpx;
|
|
border-radius: 6rpx;
|
|
margin-right: 12rpx;
|
|
margin-bottom: 15rpx;
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
}
|
|
.tag:nth-child(4n){
|
|
margin-right: 0;
|
|
}
|
|
.sssjjc{
|
|
padding: 0 31rpx 26rpx 34rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.topnum{
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
color: #B3C1D1;
|
|
}
|
|
.number{
|
|
font-size: 34rpx;
|
|
font-family: DIN Next LT Pro;
|
|
font-weight: 500;
|
|
color: #2AC166;
|
|
margin-left: 15rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
.sssjjc_left{
|
|
font-size: 32rpx;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: bold;
|
|
color: #2F3841;
|
|
}
|
|
.scrolllist{
|
|
width: 100%;
|
|
// height: 1095rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 34rpx;
|
|
padding: 35rpx 0rpx 37rpx 0rpx;
|
|
}
|
|
.scrolltop{
|
|
padding: 0rpx 32rpx 16rpx 32rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 2rpx solid #F6F8FB;;
|
|
width: 100%;
|
|
}
|
|
.tabitem{
|
|
font-size: 26rpx;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
color: #2F3841;
|
|
display: inline-block;
|
|
padding-bottom: 26rpx;
|
|
}
|
|
.tabitem:first-child{
|
|
width: 30%;
|
|
// text-align: center
|
|
}
|
|
.tabitem:nth-child(2){
|
|
width: 30%;
|
|
// text-align: center
|
|
}
|
|
.tabitem:nth-child(3){
|
|
flex: 1;
|
|
// text-align: center
|
|
}
|
|
.scroll-Y{
|
|
padding: 0 32rpx 0 32rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.lists_item{
|
|
padding-top: 35rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
}
|
|
.jczbs{
|
|
width: 30%;
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 400;
|
|
color: #667482;
|
|
// text-align: center
|
|
}
|
|
.zbz{
|
|
width: 30%;
|
|
font-size: 24rpx;
|
|
font-family: DIN Next LT Pro;
|
|
font-weight: 400;
|
|
color: #2FCD81;
|
|
// text-align: center
|
|
}
|
|
.zbzs{
|
|
color: #2FCD81;
|
|
}
|
|
.szqs{
|
|
width: 53rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.szqs image{
|
|
width: 24rpx;
|
|
height: 31rpx;
|
|
}
|
|
.sbsj{
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 400;
|
|
color: #667482;
|
|
flex: 1;
|
|
// text-align: center
|
|
// text-align: right;
|
|
}
|
|
.szqss{
|
|
width: 24rpx;
|
|
}
|
|
.load {
|
|
height: 100%;
|
|
line-height: 550rpx;
|
|
text-align: center;
|
|
color: #c6c6c6;
|
|
font-size: 32rpx;
|
|
}
|
|
</style> |