FenXiNspUniapp/packDetail/pages/Site/detail.vue

782 lines
18 KiB
Vue

<template>
<view class="container">
<uni-nav-bar :fixed="true" left-icon="left" background-color="#0F6EFF" @clickLeft="back()" status-bar :title="details.stationName"/>
<block v-if="details.stationName">
<view class="content" >
<view class="list_item">
<view class="list_item_top">
<view class="list_item_left">
<image v-if="details.stationType == 'livestock'" src="../../static/zhandian_icon_xuqin.png" mode=""></image>
<image v-else src="../../static/zd.png" mode=""></image>
<view class="item_right">
<view class="right_top" v-if="details.stationName">
{{details.stationName}}
</view>
<view class="right_bot" v-if="details.stationLocation">
<image src="../../static/wz.png" mode=""></image>
<view class="">{{details.stationLocation}}</view>
</view>
</view>
</view>
<view class="state">
<view class="">
在线
</view>
<image src="../../static/zhandian_icon_zaixian .png" mode="" class="zt"></image>
</view>
</view>
<view class="list_item_bot">
<view class="bot_box">
<view class="sbnum">
{{details.deviceList.length || 0}}
</view>
<view class="sbtext">
设备数量
</view>
</view>
<view class="bot_box">
<view class="sbnum">
{{details.survItemCount || 0}}
</view>
<view class="sbtext">
监测项
</view>
</view>
<view class="bot_box">
<view class="sbnum">
{{details.survDataCount || 0}}
</view>
<view class="sbtext">
上报数据
</view>
</view>
</view>
<view class="jstime">
<view class="border"></view>
<view class="jstime_right" v-if="details.buildTime">
<view class="jstimerig_top">
站点建设时间:
</view>
<view class="jstimerig_bot">
{{details.buildTime}}
</view>
</view>
</view>
<view class="jstime">
<view class="border1"></view>
<view class="jstime_right" v-if="survItemList.length != 0">
<view class="jstimerig_top">
监测指标:
</view>
<view class="jstimerig_bot">
<view class="tag-view" v-for="(item,index) in survItemList" :key="index">
<view :style="{background:item.color}" class="tag">{{item.name}}</view>
</view>
</view>
</view>
</view>
</view>
<view class="zdjk" v-if="survCamera.length != 0">
<view class="zdjk_top">
<view class="zdjktop_left">
站点监控
</view>
<view class="zdjktop_right">
监控数量<span class="number">{{survCamera.length}}</span>个
</view>
</view>
<view class="zdjk_bot">
<view class="zdjkbot_left" v-for="(item,index) in survCamera" :key="index" @click="tojk(item,index)">
<image src="../../static/mrt.png" mode=""></image>
</view>
</view>
</view>
<view class="jczb">
<view class="zdjk_top">
<view class="zdjktop_left">
监测数据
</view>
<view class="zdjktop_right">
监测项目<span class="number">{{details.survItemCount || 0}}</span>项
</view>
</view>
<view class="jczb_bot">
<view>
<view class="jccontent" v-if="orientlist.length != 0">
<view class="titles">
重要污染物监测
</view>
<view class="botcontent">
<view class="botcontent_left" v-for="(item,index) in orientlist" :key="index" @click="tosjdetail(item,index)">
<view class="botleft_left">
<view class="botleftleft_top">
{{item.name}}
</view>
<view class="botleftleft_bot">
{{item.value || 0}}{{item.unit}}
</view>
</view>
<image :src="baseUrl+ '/' +item.icon" mode=""></image>
</view>
</view>
</view>
<view class="jccontent" v-if="livelist.length != 0">
<view class="titles">
重要污染物监测
</view>
<view class="botcontent">
<view class="botcontent_left" v-for="(item,index) in livelist" :key="index" @click="tosjdetail(item,index)">
<view class="botleft_left">
<view class="botleftleft_top">
{{item.name}}
</view>
<view class="botleftleft_bot">
{{item.value || 0}}{{item.unit}}
</view>
</view>
<image :src="baseUrl+ '/' +item.icon" mode=""></image>
</view>
</view>
</view>
<view class="jccontent" v-if="airlist.length != 0">
<view class="titles">
空气监测
</view>
<view class="botcontent">
<view class="botcontent_left" v-for="(item,index) in airlist" :key="index" @click="tosjdetail(item,index)">
<view class="botleft_left">
<view class="botleftleft_top">
{{item.name}}
</view>
<view class="botleftleft_bot">
{{item.value || 0}}{{item.unit}}
</view>
</view>
<image :src="baseUrl+ '/' +item.icon" mode=""></image>
</view>
</view>
</view>
<view class="jccontent" v-if="soillist.length != 0">
<view class="titles">
土壤监测
</view>
<view class="botcontent">
<view class="botcontent_left" v-for="(item,index) in soillist" :key="index" @click="tosjdetail(item,index)">
<view class="botleft_left">
<view class="botleftleft_top">
{{item.name}}
</view>
<view class="botleftleft_bot">
{{item.value || 0}}{{item.unit}}
</view>
</view>
<image :src="baseUrl+ '/' +item.icon" mode=""></image>
</view>
</view>
</view>
<view class="jccontent" v-if="waterlist.length != 0">
<view class="titles">
水五常监测
</view>
<view class="botcontent">
<view class="botcontent_left" v-for="(item,index) in waterlist" :key="index" @click="tosjdetail(item,index)">
<view class="botleft_left">
<view class="botleftleft_top">
{{item.name}}
</view>
<view class="botleftleft_bot">
{{item.value || 0}}{{item.unit}}
</view>
</view>
<image :src="baseUrl+ '/' +item.icon" mode=""></image>
</view>
</view>
</view>
<view class="jccontent" v-if="stinklist.length != 0">
<view class="titles">
恶臭监测
</view>
<view class="botcontent">
<view class="botcontent_left" v-for="(item,index) in stinklist" :key="index" @click="tosjdetail(item,index)">
<view class="botleft_left">
<view class="botleftleft_top">
{{item.name}}
</view>
<view class="botleftleft_bot">
{{item.value || 0}}{{item.unit}}
</view>
</view>
<image :src="baseUrl+ '/' +item.icon" mode=""></image>
</view>
</view>
</view>
<view class="load" v-if="airlist.length == 0 && soillist.length == 0 && waterlist.length == 0&& orientlist.length == 0 && livelist.length == 0&& stinklist.length == 0">
暂无数据
</view>
</view>
</view>
</view>
</view>
</block>
<view class="pagebot"></view>
</view>
</template>
<script>
import api from "@/api/api"
import configService from '@/common/service/config.service.js';
export default{
data(){
return{
height:0,
baseUrl:configService.staticDomainURL,
scorllheight:0,
details:{},
item:{},
survItemList:[],
survCamera:[],
tab:['实时数据','历史数据'],
tabList:['监测指标','指标值','上报时间'],
isActive:0,
wrwlist:uni.getStorageSync('wrwlist'),
wrwcode:[],
colorList1:['#22BB8A','#EE701C','#52AC2A','#2BADB9','#D75A28','#AD8F49','#26A3CC','#6C48C7','#22BB8A'],
colorList:['#22BB8A','#EE701C','#52AC2A','#2BADB9','#D75A28','#AD8F49','#26A3CC','#6C48C7','#22BB8A','#415FBE','#52AC2A','#EE701C'],
codelist:[],
list:[],
token:'',
dataOu:'',
dataNh3:'',
dataH2s:'',
dataTvoc:'',
airlist:[],
soillist:[],
waterlist:[],
orientlist:[],
livelist:[],
stinklist:[],
}
},
onLoad(options) {
this.item = JSON.parse(decodeURIComponent(options.item));
uni.getSystemInfo({
success: res => {
var pxToRpxScale = 750 / res.windowWidth
var ktxStatusHeight = res.statusBarHeight * pxToRpxScale
var navigationHeight = 44 * pxToRpxScale
this.height = res.windowHeight * pxToRpxScale//将px 转换rpx
console.log(this.height,ktxStatusHeight,navigationHeight)
this.scorllheight = this.height
}
});
},
onShow() {
this.getdetails()
this.getToken()
},
methods:{
getdetails(){
let params = {}
params.stationCode = this.item.stationCode
uni.showLoading({
title: '加载中'
});
this.$http.get('/applet/survStationInfo/getStationInfo',{params:params}).then(res =>{
if(res.data.code == 0){
this.details = res.data.data.stationInfo
this.airlist = res.data.data.airSurvData
this.soillist = res.data.data.soilSurvData
this.waterlist = res.data.data.waterSurvData
this.orientlist = res.data.data.orientSurvData
this.livelist = res.data.data.liveSurvData
this.stinklist = res.data.data.stinkSurvData
}
uni.hideLoading();
})
},
getToken(){
this.$http.post('/applet/ysyun/getYsToken').then(res =>{
this.token = res.data.data.ysToken
})
},
tojk(item,index){
let items = item.deployCode.split('-')
var obj = {
url: "https://m.ilhzn.cn/#/pages/cameraView/ysyCamera",
deployDes: item.deployDes + '-' + '',
ysToken: this.token,
deviceIotUrl: item.deviceUrl
};
const queryString = Object.keys(obj).map((key) =>
`${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join("&");
const webviewUrl = `/packDetail1/pages/device/index4?${queryString}`;
uni.navigateTo({
url: webviewUrl
});
},
changetab(index){
this.isActive = index
this.getdetails()
},
back(){
uni.navigateBack({
delta:1
})
},
tosjdetail(item,index){
console.log(item,'gegwg')
uni.navigateTo({
url:'/packDetail/pages/Site/sjdetail?item=' + encodeURIComponent(JSON.stringify(item)) + '&stationCode='+this.details.stationCode + '&stationName=' + this.details.stationName
})
}
}
}
</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%;
}
.bgimg{
width: 100%;
height: 3550rpx;
}
.content{
padding: 34rpx 32rpx 0;
box-sizing: border-box;
}
.list_item{
width: 100%;
padding: 37rpx 34rpx 28rpx;
background: #FFFFFF;
border-radius: 34rpx;
margin-bottom: 25rpx;
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: 25rpx;
}
.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;
}
.list_item_bot{
width: 100%;
background: #F6F6F6;
border-radius: 16rpx;
padding: 28rpx 0;
display: flex;
justify-content: space-between;
margin-bottom: 31rpx;
}
.bot_box{
width: 30%;
padding: 0 20rpx;
box-sizing: border-box;
border-right: 2rpx solid #e6e9ef;
}
.bot_box:last-child{
border: none;
flex: 1;
}
.sbnum{
width: 100%;
font-size: 42rpx;
font-family: DIN Next LT Pro;
font-weight: 500;
color: #142E55;
margin-bottom: 15rpx;
text-align: center;
}
.sbtext{
width:100%;
text-align: center;
font-size: 24rpx;
font-family: Source Han Sans SC;
font-weight: 400;
color: #9CA9BE;
}
.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;
}
.jstime{
display: flex;
margin-bottom: 41rpx;
}
.border{
width: 8rpx;
background: #0F6EFF;
border-radius: 4rpx;
margin-right: 19rpx;
}
.border1{
min-width: 8rpx;
width: 8rpx;
background: #0F6EFF;
border-radius: 4rpx;
margin-right: 19rpx;
}
.jstime_right{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.jstimerig_top{
font-size: 26rpx;
font-family: Source Han Sans SC;
font-weight: 500;
color: #142E55;
margin-bottom: 18rpx;
}
.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;
box-sizing: border-box;
border-radius: 6rpx;
margin-right: 12rpx;
margin-top: 15rpx;
font-size: 24rpx;
font-family: Source Han Sans SC;
font-weight: 500;
color: #FFFFFF;
}
.zdjk{
width: 100%;
background: #FFFFFF;
border-radius: 34rpx;
padding: 33rpx 0rpx 41rpx 0rpx;
box-sizing: border-box;
margin-bottom: 26rpx;
}
.zdjk_top{
display: flex;
justify-content: space-between;
border-bottom: 2rpx solid #F6F8FB;
padding: 0 31rpx 31rpx 34rpx;
box-sizing: border-box;
}
.zdjktop_left{
font-size: 32rpx;
font-family: Source Han Sans SC;
font-weight: bold;
color: #2F3841;
}
.zdjktop_right{
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;
}
.zdjk_bot{
padding: 26rpx 33rpx 0 35rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
.zdjkbot_left{
width: 48%;
border-radius: 16rpx;
}
.zdjkbot_left image{
width: 100%;
height: 165rpx;
background: #F4F5F9;
border-radius: 16rpx;
}
.zdjkbot_left1{
width: 100%;
height: 349rpx;
background: #FFFFFF;
border-radius: 34rpx;
}
.zdjkbot_left1 image{
width: 100%;
height: 100%;
background: #F4F5F9;
border-radius: 34rpx;
}
.jczb{
background: #FFFFFF;
border-radius: 34rpx;
padding: 33rpx 32rpx 31rpx 34rpx;
box-sizing: border-box;
}
.jczb_bot{
padding: 32rpx 0;
box-sizing: border-box;
}
.tab{
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
}
.tab_left{
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
font-size: 32rpx;
font-family: Source Han Sans SC;
font-weight: 500;
color: #B0B9C6;
}
.tabchaecked{
color: #0F6EFF;
}
.botbordre{
width: 47rpx;
height: 6rpx;
background: #0F6EFF;
border-radius: 3rpx;
margin-top: 13rpx;
}
.titles{
width: 100%;
display: flex;
justify-content: center;
font-size: 28rpx;
font-family: Source Han Sans SC;
font-weight: 400;
color: #77889B;
margin-bottom: 29rpx;
margin-top: 20rpx;
}
.botcontent{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.botcontent_left{
width: 48%;
background: #F8F8F8;
border-radius: 24rpx;
padding: 37rpx 20rpx 41rpx 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20rpx;
}
.botcontent_left image{
width: 61rpx;
height: 61rpx;
}
.botleftleft_top{
font-size: 28rpx;
font-family: Source Han Sans SC;
font-weight: 500;
color: #333333;
margin-bottom: 31rpx;
display: flex;
align-items: center;
}
.botleftleft_top image{
width: 29rpx;
height: 26rpx;
margin-left: 12rpx;
}
.botleftleft_bot{
font-size: 32rpx;
font-family: DIN Next LT Pro;
font-weight: 500;
color: #1FBE5B;
}
.botleftleft_botzb{
color: #FF4242;
}
.scroll-Y{
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: 80rpx;
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;
}
.scrolltop{
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
}
.pagebot{
height: 36rpx;
}
.lssj{
margin-top: 37rpx;
}
.load {
height: 100%;
line-height: 737rpx;
text-align: center;
color: #c6c6c6;
font-size: 32rpx;
}
</style>