new
parent
1fbf0e1ca3
commit
53d02a08ba
74
src/App.vue
74
src/App.vue
|
|
@ -185,6 +185,33 @@
|
||||||
}
|
}
|
||||||
.quick_times{
|
.quick_times{
|
||||||
padding: 18rpx 24rpx 24rpx 24rpx;
|
padding: 18rpx 24rpx 24rpx 24rpx;
|
||||||
|
.tab-section{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
height: 72rpx;
|
||||||
|
background-color: rgb(238, 238, 239);
|
||||||
|
padding: 6rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
.tab-item{
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #303133;
|
||||||
|
padding: 0 6rpx;
|
||||||
|
&.active{
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 图表标题通用
|
// 图表标题通用
|
||||||
|
|
@ -207,4 +234,51 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.u-popup-section{
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.top_box{
|
||||||
|
height: 96rpx;
|
||||||
|
padding: 0 40rpx;
|
||||||
|
.title{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form_cont{
|
||||||
|
padding: 0 30rpx;
|
||||||
|
.title2{
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
.label_tit{
|
||||||
|
padding-top: 28rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.label_tit{
|
||||||
|
padding: 18rpx 0;
|
||||||
|
}
|
||||||
|
.scroll-y{
|
||||||
|
flex: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
min-height: 1px;
|
||||||
|
}
|
||||||
|
.input_unit_ibox{
|
||||||
|
padding: 0 24rpx;
|
||||||
|
}
|
||||||
|
.buttom_section{
|
||||||
|
display: flex;
|
||||||
|
padding: 40rpx 24rpx 40rpx 24rpx;
|
||||||
|
.btn{
|
||||||
|
width: 220rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -73,6 +73,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
,{
|
||||||
|
"path" : "pages/index/water-quality",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "水质监控",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
"navigationBarTextStyle": "white",
|
"navigationBarTextStyle": "white",
|
||||||
|
|
|
||||||
|
|
@ -109,6 +109,10 @@
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url:'/pages/index/soil-monitoring'
|
url:'/pages/index/soil-monitoring'
|
||||||
})
|
})
|
||||||
|
}else if(item.label=='水质监控'){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/index/water-quality'
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="soil-monitoring">
|
<view class="warning-page">
|
||||||
<view class="content-box">
|
<view class="content-box">
|
||||||
<view class="secreen-section">
|
<view class="secreen-section">
|
||||||
<u-dropdown ref="uDropdown" @open="openDropDown">
|
<u-dropdown ref="uDropdown" @open="openDropDown">
|
||||||
|
|
@ -30,8 +30,40 @@
|
||||||
</u-dropdown-item>
|
</u-dropdown-item>
|
||||||
</u-dropdown>
|
</u-dropdown>
|
||||||
<view class="quick_times">
|
<view class="quick_times">
|
||||||
<u-subsection :list="sublist" :animation="false"
|
<view class="tab-section">
|
||||||
:current="currentIndex" @change="subChange1"></u-subsection>
|
<view class="tab-item" :class="currentIndex==index?'active':''"
|
||||||
|
v-for="(item,index) in sublist"
|
||||||
|
@click="subChange1(index)" :key="index" >
|
||||||
|
<view class="name">{{item.name}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="warning-section">
|
||||||
|
<view class="top_box u-border-bottom">
|
||||||
|
<view class="tit">预警数据统计</view>
|
||||||
|
<view class="set_warning">
|
||||||
|
<u-button class="set_btn" @click="setWarnInfo()" size="mini">设置</u-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="cont-box">
|
||||||
|
<view class="warning-item">
|
||||||
|
<view class="name">Ⅰ级预警</view>
|
||||||
|
<view class="val">{{deviceWarning[1]?deviceWarning[1]:0}}<text class="unit">个</text></view>
|
||||||
|
</view>
|
||||||
|
<view class="warning-item">
|
||||||
|
<view class="name">Ⅱ级预警</view>
|
||||||
|
<view class="val">{{deviceWarning[2]?deviceWarning[2]:0}}<text class="unit">个</text></view>
|
||||||
|
</view>
|
||||||
|
<view class="warning-item">
|
||||||
|
<view class="name">Ⅲ级预警</view>
|
||||||
|
<view class="val">{{deviceWarning[3]?deviceWarning[3]:0}}<text class="unit">个</text></view>
|
||||||
|
</view>
|
||||||
|
<view class="warning-item">
|
||||||
|
<view class="name">Ⅳ级预警</view>
|
||||||
|
<view class="val">{{deviceWarning[4]?deviceWarning[4]:0}}<text class="unit">个</text></view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 电导率 -->
|
<!-- 电导率 -->
|
||||||
|
|
@ -119,6 +151,44 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 设置预警值 -->
|
||||||
|
<u-popup v-model="warningShow" border-radius="28" width="94%" height="70%"
|
||||||
|
mode="center" :closeable="true" :mask-close-able="false" z-index="910">
|
||||||
|
<view class="u-popup-section">
|
||||||
|
<view class="top_box">
|
||||||
|
<view class="title">设置预警值</view>
|
||||||
|
</view>
|
||||||
|
<scroll-view class="scroll-y" scroll-y="true">
|
||||||
|
<view class="form_cont">
|
||||||
|
<u-form v-for="(info,k) in formInfo" :key="k">
|
||||||
|
<view class="title2 u-border-bottom">{{keyToName[k]}}</view>
|
||||||
|
<u-form-item v-for="(cd2,k2) in info"
|
||||||
|
:label="numberToString[k2]+'级预警'" label-width="140" :key="k2">
|
||||||
|
<view class="row" >
|
||||||
|
<view class="input_box flex-row u-margin-bottom-20"
|
||||||
|
v-for="(item,index) in cd2" :key="index">
|
||||||
|
<view class="input_unit_ibox flex-row u-border">
|
||||||
|
<u-input type="number" v-model="item.min" placeholder="请输入" :clearable="false"/>
|
||||||
|
<view class="unit">{{keyToUnit[k]}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="pdlr12">~</view>
|
||||||
|
<view class="input_unit_ibox flex-row u-border">
|
||||||
|
<u-input type="number" v-model="item.max" placeholder="请输入" :clearable="false"/>
|
||||||
|
<view class="unit">{{keyToUnit[k]}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</u-form-item>
|
||||||
|
</u-form>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view class="buttom_section">
|
||||||
|
<u-button class="btn" type="default" @click="warningShow = false">取消</u-button>
|
||||||
|
<u-button class="btn" @click="warningInfoBtn()" type="primary">确定</u-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
<u-calendar v-model="calendarShow" :mode="'range'" @change="calendarChange"></u-calendar>
|
<u-calendar v-model="calendarShow" :mode="'range'" @change="calendarChange"></u-calendar>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -135,7 +205,8 @@
|
||||||
padding:[10,40,25,25],
|
padding:[10,40,25,25],
|
||||||
xAxis: {
|
xAxis: {
|
||||||
disableGrid: true,
|
disableGrid: true,
|
||||||
labelCount:5
|
labelCount:5,
|
||||||
|
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
gridType: "dash",
|
gridType: "dash",
|
||||||
|
|
@ -183,7 +254,31 @@
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
currentIndex:0,
|
currentIndex:0,
|
||||||
|
deviceWarning:{},//设备预警
|
||||||
|
warningShow:false,
|
||||||
|
formInfo:{},//设置表单
|
||||||
|
keyToName:{
|
||||||
|
temperature:'温度',
|
||||||
|
conductivity:'电导率',
|
||||||
|
humidity:'湿度',
|
||||||
|
n:'磷',
|
||||||
|
p:'钾',
|
||||||
|
k:'氮',
|
||||||
|
},
|
||||||
|
keyToUnit:{
|
||||||
|
temperature:'℃',
|
||||||
|
conductivity:'us/cm',
|
||||||
|
humidity:'%',
|
||||||
|
n:'mg/kg',
|
||||||
|
p:'mg/kg',
|
||||||
|
k:'mg/kg',
|
||||||
|
},
|
||||||
|
numberToString:{
|
||||||
|
1:'Ⅰ',
|
||||||
|
2:'Ⅱ',
|
||||||
|
3:'Ⅲ',
|
||||||
|
4:'Ⅳ'
|
||||||
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onLoad(){
|
onLoad(){
|
||||||
|
|
@ -193,6 +288,11 @@
|
||||||
|
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
|
//设置预警值
|
||||||
|
setWarnInfo(){
|
||||||
|
this.getDeviceWarningRules();
|
||||||
|
this.warningShow = true;
|
||||||
|
},
|
||||||
//地区
|
//地区
|
||||||
change(val){
|
change(val){
|
||||||
console.log(val);
|
console.log(val);
|
||||||
|
|
@ -203,12 +303,14 @@
|
||||||
this.addressName = narray[0].name;
|
this.addressName = narray[0].name;
|
||||||
this.$refs.uDropdown.highlight(0);
|
this.$refs.uDropdown.highlight(0);
|
||||||
this.queryAddressDevicePoints(val);
|
this.queryAddressDevicePoints(val);
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//地区下设备id
|
//地区下设备id
|
||||||
change2(val){
|
change2(val){
|
||||||
this.$refs.uDropdown.highlight(1);
|
this.$refs.uDropdown.highlight(1);
|
||||||
this.queryMonitoringData();
|
this.queryMonitoringData();
|
||||||
|
this.getDeviceWarningNums();//报警查询
|
||||||
},
|
},
|
||||||
//日期范围
|
//日期范围
|
||||||
calendarChange(e){
|
calendarChange(e){
|
||||||
|
|
@ -221,6 +323,12 @@
|
||||||
this.q_end_time = this.end_date_c;
|
this.q_end_time = this.end_date_c;
|
||||||
this.queryMonitoringData();
|
this.queryMonitoringData();
|
||||||
this.$refs.uDropdown.close();
|
this.$refs.uDropdown.close();
|
||||||
|
if(this.q_start_time!=this.q_end_time){
|
||||||
|
this.currentIndex = -1;
|
||||||
|
}else{
|
||||||
|
this.currentIndex = 0;
|
||||||
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
//删除选择的时间
|
//删除选择的时间
|
||||||
deleteDateFn(){
|
deleteDateFn(){
|
||||||
|
|
@ -259,6 +367,24 @@
|
||||||
this.q_end_time = '';
|
this.q_end_time = '';
|
||||||
}
|
}
|
||||||
this.queryMonitoringData();
|
this.queryMonitoringData();
|
||||||
|
|
||||||
|
},
|
||||||
|
//设置警戒值
|
||||||
|
warningInfoBtn(){
|
||||||
|
let params = {
|
||||||
|
slug: "device_warning_rule_soil",
|
||||||
|
value:this.formInfo
|
||||||
|
}
|
||||||
|
this.$http.put('/api/device-warning-rules',params).then(({data})=>{
|
||||||
|
this.warningShow = false;
|
||||||
|
if(data.code==200){
|
||||||
|
uni.showToast({ title: '设置成功', icon: 'none' });
|
||||||
|
}else{
|
||||||
|
uni.showToast({ title: '设置失败', icon: 'none' });
|
||||||
|
}
|
||||||
|
}).catch(()=>{
|
||||||
|
uni.showToast({ title: '设置失败', icon: 'none' });
|
||||||
|
})
|
||||||
},
|
},
|
||||||
//查询地址筛选
|
//查询地址筛选
|
||||||
queryDeviceBasics(){
|
queryDeviceBasics(){
|
||||||
|
|
@ -306,6 +432,7 @@
|
||||||
this.device_id = options[0].value;
|
this.device_id = options[0].value;
|
||||||
console.log(this.options2,this.device_id,'this.options2')
|
console.log(this.options2,this.device_id,'this.options2')
|
||||||
this.queryMonitoringData();
|
this.queryMonitoringData();
|
||||||
|
this.getDeviceWarningNums();//报警查询
|
||||||
}
|
}
|
||||||
}).catch(()=>{
|
}).catch(()=>{
|
||||||
|
|
||||||
|
|
@ -351,12 +478,16 @@
|
||||||
}else{
|
}else{
|
||||||
let len = chartInfo.conductivity.categories.length-1;
|
let len = chartInfo.conductivity.categories.length-1;
|
||||||
let v = 5;
|
let v = 5;
|
||||||
if(len>5){
|
let aw = len>10?len%6:len%5;
|
||||||
v = len%5>0?v-1:v;
|
if(aw==3||aw==0||aw==1){
|
||||||
}
|
v = 4;
|
||||||
|
}else if(aw==2){
|
||||||
|
v = 3;
|
||||||
|
}else{v=5}
|
||||||
this.opts.xAxis.labelCount = v;
|
this.opts.xAxis.labelCount = v;
|
||||||
|
console.log(this.opts,v,len,'配置',aw)
|
||||||
}
|
}
|
||||||
console.log(this.opts,'配置')
|
|
||||||
//start 电导率 conductivity
|
//start 电导率 conductivity
|
||||||
let res = {
|
let res = {
|
||||||
categories: chartInfo.conductivity.categories,
|
categories: chartInfo.conductivity.categories,
|
||||||
|
|
@ -443,8 +574,42 @@
|
||||||
}).catch(()=>{
|
}).catch(()=>{
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
},
|
},
|
||||||
|
//预警查询
|
||||||
|
getDeviceWarningNums(){
|
||||||
|
let params = {
|
||||||
|
base:this.addressValue,
|
||||||
|
device:this.device_id,
|
||||||
|
status:0,
|
||||||
|
_t: new Date().getTime()
|
||||||
|
}
|
||||||
|
this.$http.get('/api/device-warning-nums',{params:params}).then(({data})=>{
|
||||||
|
if(data.code==200){
|
||||||
|
this.deviceWarning = data.data;
|
||||||
|
}
|
||||||
|
}).catch(()=>{
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//预警规则
|
||||||
|
getDeviceWarningRules(){
|
||||||
|
this.$http.get('/api/device-warning-rules',{params:{}}).then(({data})=>{
|
||||||
|
if(data.code==200){
|
||||||
|
let _data = data.data;
|
||||||
|
let info = {};
|
||||||
|
for(let item of _data){
|
||||||
|
if(item.slug=='device_warning_rule_soil'){//土壤警报
|
||||||
|
info = item;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.formInfo = info.value;
|
||||||
|
}
|
||||||
|
}).catch(()=>{
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -453,4 +618,46 @@
|
||||||
.content-box{
|
.content-box{
|
||||||
padding-bottom: 60rpx;
|
padding-bottom: 60rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.warning-section{
|
||||||
|
padding: 20rpx 24rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-top: 14rpx solid #f5f5f5;
|
||||||
|
border-bottom: 14rpx solid #f5f5f5;
|
||||||
|
.top_box{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
.tit{
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.set_warning{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cont-box{
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 12rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
.warning-item{
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
.name{
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
.val{
|
||||||
|
font-size: 34rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.unit{
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-left: 6rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,667 @@
|
||||||
|
<template>
|
||||||
|
<view class="warning-page">
|
||||||
|
<view class="content-box">
|
||||||
|
<view class="secreen-section">
|
||||||
|
<u-dropdown ref="uDropdown" @open="openDropDown">
|
||||||
|
<u-dropdown-item v-model="addressValue" title="基地"
|
||||||
|
:options="deviceAddressList" @change="change"></u-dropdown-item>
|
||||||
|
<u-dropdown-item v-model="device_id" title="检测点"
|
||||||
|
:options="options2" @change="change2"></u-dropdown-item>
|
||||||
|
<u-dropdown-item title="日期">
|
||||||
|
<view class="slot-content" style="background-color: #FFFFFF;">
|
||||||
|
<view class="select-date u-border-bottom" >
|
||||||
|
<view class="name" @click="calendarShow = true">
|
||||||
|
<u-icon name="calendar" color="#333" size="32"></u-icon>
|
||||||
|
<text style="margin-left: 6rpx;">选择日期：</text>
|
||||||
|
</view>
|
||||||
|
<view class="time_box">
|
||||||
|
<view class="tip_txt" v-if="!start_date_c"
|
||||||
|
@click="calendarShow = true">开始日期-结束日期</view>
|
||||||
|
<view class="tile_val" v-else
|
||||||
|
@click="calendarShow = true">{{start_date_c}} ~ {{end_date_c}}</view>
|
||||||
|
<view class="delete_btn" v-if="start_date_c" @click="deleteDateFn()">
|
||||||
|
<u-icon name="close-circle" color="#333" size="34"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<u-button type="primary" @click="selectedDateConform()">确定</u-button>
|
||||||
|
</view>
|
||||||
|
</u-dropdown-item>
|
||||||
|
</u-dropdown>
|
||||||
|
<view class="quick_times">
|
||||||
|
<view class="tab-section">
|
||||||
|
<view class="tab-item" :class="currentIndex==index?'active':''"
|
||||||
|
v-for="(item,index) in sublist"
|
||||||
|
@click="subChange1(index)" :key="index" >
|
||||||
|
<view class="name">{{item.name}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="warning-section">
|
||||||
|
<view class="top_box u-border-bottom">
|
||||||
|
<view class="tit">预警数据统计</view>
|
||||||
|
<view class="set_warning">
|
||||||
|
<u-button class="set_btn" @click="setWarnInfo()" size="mini">设置</u-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="cont-box">
|
||||||
|
<view class="warning-item">
|
||||||
|
<view class="name">Ⅰ级预警</view>
|
||||||
|
<view class="val">{{deviceWarning[1]?deviceWarning[1]:0}}<text class="unit">个</text></view>
|
||||||
|
</view>
|
||||||
|
<view class="warning-item">
|
||||||
|
<view class="name">Ⅱ级预警</view>
|
||||||
|
<view class="val">{{deviceWarning[2]?deviceWarning[2]:0}}<text class="unit">个</text></view>
|
||||||
|
</view>
|
||||||
|
<view class="warning-item">
|
||||||
|
<view class="name">Ⅲ级预警</view>
|
||||||
|
<view class="val">{{deviceWarning[3]?deviceWarning[3]:0}}<text class="unit">个</text></view>
|
||||||
|
</view>
|
||||||
|
<view class="warning-item">
|
||||||
|
<view class="name">Ⅳ级预警</view>
|
||||||
|
<view class="val">{{deviceWarning[4]?deviceWarning[4]:0}}<text class="unit">个</text></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 氯 -->
|
||||||
|
<view class="chart_section">
|
||||||
|
<view class="top_box u-border-bottom">
|
||||||
|
<view class="tit">氯<text class="unit">mg/L</text></view>
|
||||||
|
<view class="name">{{addressName}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_box">
|
||||||
|
<qiun-data-charts
|
||||||
|
type="area"
|
||||||
|
:opts="opts"
|
||||||
|
:chartData="chart_chlorine"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 电导率 -->
|
||||||
|
<view class="chart_section">
|
||||||
|
<view class="top_box u-border-bottom">
|
||||||
|
<view class="tit">电导率<text class="unit">us/cm</text></view>
|
||||||
|
<view class="name">{{addressName}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_box">
|
||||||
|
<qiun-data-charts
|
||||||
|
type="area"
|
||||||
|
:opts="opts"
|
||||||
|
:chartData="chart_conductivity"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 氧气 -->
|
||||||
|
<view class="chart_section">
|
||||||
|
<view class="top_box u-border-bottom">
|
||||||
|
<view class="tit">氧气<text class="unit">mg/L</text></view>
|
||||||
|
<view class="name">{{addressName}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_box">
|
||||||
|
<qiun-data-charts
|
||||||
|
type="area"
|
||||||
|
:opts="opts"
|
||||||
|
:chartData="chart_oxygen"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- PH -->
|
||||||
|
<view class="chart_section">
|
||||||
|
<view class="top_box u-border-bottom">
|
||||||
|
<view class="tit">PH<text class="unit"></text></view>
|
||||||
|
<view class="name">{{addressName}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_box">
|
||||||
|
<qiun-data-charts
|
||||||
|
type="area"
|
||||||
|
:opts="opts"
|
||||||
|
:chartData="chart_ph"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 温度 -->
|
||||||
|
<view class="chart_section">
|
||||||
|
<view class="top_box u-border-bottom">
|
||||||
|
<view class="tit">温度<text class="unit">℃</text></view>
|
||||||
|
<view class="name">{{addressName}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_box">
|
||||||
|
<qiun-data-charts
|
||||||
|
type="area"
|
||||||
|
:opts="opts"
|
||||||
|
:chartData="chart_temperature"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 浊度 -->
|
||||||
|
<view class="chart_section">
|
||||||
|
<view class="top_box u-border-bottom">
|
||||||
|
<view class="tit">浊度<text class="unit">NTU</text></view>
|
||||||
|
<view class="name">{{addressName}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="cart_box">
|
||||||
|
<qiun-data-charts
|
||||||
|
type="area"
|
||||||
|
:opts="opts"
|
||||||
|
:chartData="chart_turbidity"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 设置预警值 -->
|
||||||
|
<u-popup v-model="warningShow" border-radius="28" width="94%" height="70%"
|
||||||
|
mode="center" :closeable="true" :mask-close-able="false" z-index="910">
|
||||||
|
<view class="u-popup-section">
|
||||||
|
<view class="top_box">
|
||||||
|
<view class="title">设置预警值</view>
|
||||||
|
</view>
|
||||||
|
<scroll-view class="scroll-y" scroll-y="true">
|
||||||
|
<view class="form_cont">
|
||||||
|
<u-form v-for="(info,k) in formInfo" :key="k">
|
||||||
|
<view class="title2 u-border-bottom">{{keyToName[k]}}</view>
|
||||||
|
<u-form-item v-for="(cd2,k2) in info"
|
||||||
|
:label="numberToString[k2]+'级预警'" label-width="140" :key="k2">
|
||||||
|
<view class="row" >
|
||||||
|
<view class="input_box flex-row u-margin-bottom-20"
|
||||||
|
v-for="(item,index) in cd2" :key="index">
|
||||||
|
<view class="input_unit_ibox flex-row u-border">
|
||||||
|
<u-input type="number" v-model="item.min" placeholder="请输入" :clearable="false"/>
|
||||||
|
<view class="unit">{{keyToUnit[k]}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="pdlr12">~</view>
|
||||||
|
<view class="input_unit_ibox flex-row u-border">
|
||||||
|
<u-input type="number" v-model="item.max" placeholder="请输入" :clearable="false"/>
|
||||||
|
<view class="unit">{{keyToUnit[k]}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</u-form-item>
|
||||||
|
</u-form>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view class="buttom_section">
|
||||||
|
<u-button class="btn" type="default" @click="warningShow = false">取消</u-button>
|
||||||
|
<u-button class="btn" @click="warningInfoBtn()" type="primary">确定</u-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
<u-calendar v-model="calendarShow" :mode="'range'" @change="calendarChange"></u-calendar>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {showLoading,getLastWeekRange,getLastMonthRange} from '@/com/utils.js'
|
||||||
|
import QiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts.vue'
|
||||||
|
export default {
|
||||||
|
components: { QiunDataCharts },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
opts: {
|
||||||
|
dataLabel:false,//显示数据
|
||||||
|
padding:[10,40,25,25],
|
||||||
|
xAxis: {
|
||||||
|
disableGrid: true,
|
||||||
|
labelCount:5,
|
||||||
|
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
gridType: "dash",
|
||||||
|
data:[
|
||||||
|
{
|
||||||
|
min:0
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
extra: {
|
||||||
|
area: {
|
||||||
|
type: "curve",
|
||||||
|
opacity: 0.9,
|
||||||
|
addLine: true,
|
||||||
|
gradient: true,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chart_conductivity:{},//电导率
|
||||||
|
chart_chlorine:{},//氯
|
||||||
|
chart_oxygen:{},//氧气
|
||||||
|
chart_ph:{},//PH
|
||||||
|
chart_temperature:{},//温度
|
||||||
|
chart_turbidity:{},//浊度
|
||||||
|
//筛选
|
||||||
|
q_start_time:'',
|
||||||
|
q_end_time:'',
|
||||||
|
deviceAddressList:[],//筛选设备地区列表
|
||||||
|
addressName:'',
|
||||||
|
addressValue:'',
|
||||||
|
device_id:'11',//检测点 - options2中的设备id
|
||||||
|
options2:[],
|
||||||
|
calendarShow:false,//选择日期
|
||||||
|
start_date_c:'',
|
||||||
|
end_date_c:'',
|
||||||
|
sublist:[
|
||||||
|
{
|
||||||
|
name: '今天'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '近一周'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '近一月'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
currentIndex:0,
|
||||||
|
deviceWarning:{},//设备预警
|
||||||
|
warningShow:false,
|
||||||
|
formInfo:{},//设置表单
|
||||||
|
keyToName:{
|
||||||
|
temperature:'温度',
|
||||||
|
conductivity:'电导率',
|
||||||
|
chlorine:'氯',
|
||||||
|
oxygen:'氧气',
|
||||||
|
ph:'PH',
|
||||||
|
turbidity:'浊度',
|
||||||
|
},
|
||||||
|
keyToUnit:{
|
||||||
|
temperature:'℃',
|
||||||
|
conductivity:'us/cm',
|
||||||
|
chlorine:'mg/L',
|
||||||
|
oxygen:'mg/L',
|
||||||
|
ph:'',
|
||||||
|
turbidity:'NTU',
|
||||||
|
},
|
||||||
|
numberToString:{
|
||||||
|
1:'Ⅰ',
|
||||||
|
2:'Ⅱ',
|
||||||
|
3:'Ⅲ',
|
||||||
|
4:'Ⅳ'
|
||||||
|
},
|
||||||
|
device_type:3,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(){
|
||||||
|
this.queryDeviceBasics();
|
||||||
|
},
|
||||||
|
onShow(){
|
||||||
|
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
//设置预警值
|
||||||
|
setWarnInfo(){
|
||||||
|
this.getDeviceWarningRules();
|
||||||
|
this.warningShow = true;
|
||||||
|
},
|
||||||
|
//地区
|
||||||
|
change(val){
|
||||||
|
console.log(val);
|
||||||
|
let narray = this.deviceAddressList.filter(item=>{
|
||||||
|
return item.value==val;
|
||||||
|
})
|
||||||
|
console.log(narray);
|
||||||
|
this.addressName = narray[0].name;
|
||||||
|
this.$refs.uDropdown.highlight(0);
|
||||||
|
this.queryAddressDevicePoints(val);
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
//地区下设备id
|
||||||
|
change2(val){
|
||||||
|
this.$refs.uDropdown.highlight(1);
|
||||||
|
this.queryMonitoringData();
|
||||||
|
this.getDeviceWarningNums();//报警查询
|
||||||
|
},
|
||||||
|
//日期范围
|
||||||
|
calendarChange(e){
|
||||||
|
console.log(e,'日期范围')
|
||||||
|
this.start_date_c = e.startDate;
|
||||||
|
this.end_date_c = e.endDate;
|
||||||
|
},
|
||||||
|
selectedDateConform(){
|
||||||
|
this.q_start_time = this.start_date_c;
|
||||||
|
this.q_end_time = this.end_date_c;
|
||||||
|
this.queryMonitoringData();
|
||||||
|
this.$refs.uDropdown.close();
|
||||||
|
if(this.q_start_time!=this.q_end_time){
|
||||||
|
this.currentIndex = -1;
|
||||||
|
}else{
|
||||||
|
this.currentIndex = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
//删除选择的时间
|
||||||
|
deleteDateFn(){
|
||||||
|
this.start_date_c = '';
|
||||||
|
this.end_date_c = '';
|
||||||
|
},
|
||||||
|
//时间筛选
|
||||||
|
openDropDown(index){
|
||||||
|
console.log(index,'openDropDown');
|
||||||
|
if(index==2){//日期
|
||||||
|
this.start_date_c = this.q_start_time;
|
||||||
|
this.end_date_c = this.q_end_time;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//快捷时间
|
||||||
|
subChange1(index){
|
||||||
|
console.log(index)
|
||||||
|
this.currentIndex = index;
|
||||||
|
if(index==1){
|
||||||
|
|
||||||
|
let lastWeekDate = getLastWeekRange();
|
||||||
|
let startDate = this.$u.timeFormat(lastWeekDate.startDate, 'yyyy-mm-dd');
|
||||||
|
let endDate = this.$u.timeFormat(lastWeekDate.endDate, 'yyyy-mm-dd');
|
||||||
|
console.log(startDate,endDate);
|
||||||
|
this.q_start_time = startDate;
|
||||||
|
this.q_end_time = endDate;
|
||||||
|
}else if(index==2){
|
||||||
|
let lastMonthRange = getLastMonthRange();
|
||||||
|
let startDate = this.$u.timeFormat(lastMonthRange.startDate, 'yyyy-mm-dd');
|
||||||
|
let endDate = this.$u.timeFormat(lastMonthRange.endDate, 'yyyy-mm-dd');
|
||||||
|
console.log(startDate,endDate);
|
||||||
|
this.q_start_time = startDate;
|
||||||
|
this.q_end_time = endDate;
|
||||||
|
}else{
|
||||||
|
this.q_start_time = '';
|
||||||
|
this.q_end_time = '';
|
||||||
|
}
|
||||||
|
this.queryMonitoringData();
|
||||||
|
|
||||||
|
},
|
||||||
|
//设置警戒值
|
||||||
|
warningInfoBtn(){
|
||||||
|
let params = {
|
||||||
|
slug: "device_warning_rule_waterquality",
|
||||||
|
value:this.formInfo
|
||||||
|
}
|
||||||
|
this.$http.put('/api/device-warning-rules',params).then(({data})=>{
|
||||||
|
this.warningShow = false;
|
||||||
|
if(data.code==200){
|
||||||
|
uni.showToast({ title: '设置成功', icon: 'none' });
|
||||||
|
}else{
|
||||||
|
uni.showToast({ title: '设置失败', icon: 'none' });
|
||||||
|
}
|
||||||
|
}).catch(()=>{
|
||||||
|
uni.showToast({ title: '设置失败', icon: 'none' });
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查询地址筛选
|
||||||
|
queryDeviceBasics(){
|
||||||
|
let params = {
|
||||||
|
device_type:this.device_type,
|
||||||
|
_t: new Date().getTime()
|
||||||
|
}
|
||||||
|
this.$http.get('/api/agricultural-device-basic',{params:params}).then(({data})=>{
|
||||||
|
console.log(data);
|
||||||
|
if(data.code==200){
|
||||||
|
let _data = data.data;
|
||||||
|
for(let item of _data){
|
||||||
|
item['label'] = item.name;
|
||||||
|
item['value'] = item.id;
|
||||||
|
}
|
||||||
|
this.deviceAddressList = _data;
|
||||||
|
this.addressValue = _data[0].id;
|
||||||
|
this.addressName = _data[0].name;
|
||||||
|
this.$refs.uDropdown.highlight(0);
|
||||||
|
this.queryAddressDevicePoints(this.addressValue);
|
||||||
|
}
|
||||||
|
}).catch(()=>{
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查询地址下的设备监控点
|
||||||
|
queryAddressDevicePoints(id){
|
||||||
|
let params = {
|
||||||
|
device_type:this.device_type,
|
||||||
|
agricultural_basic:id,
|
||||||
|
_t: new Date().getTime()
|
||||||
|
}
|
||||||
|
this.$http.get(`/api/agricultural-device-point/${id}`,{params:params}).then(({data})=>{
|
||||||
|
console.log(data);
|
||||||
|
if(data.code==200){
|
||||||
|
let _data = data.data;
|
||||||
|
let options = [];
|
||||||
|
for(let k in _data){
|
||||||
|
let item = {};
|
||||||
|
item['label'] = _data[k];
|
||||||
|
item['value'] = k;
|
||||||
|
options.push(item);
|
||||||
|
}
|
||||||
|
this.options2 = options;
|
||||||
|
this.device_id = options[0].value;
|
||||||
|
console.log(this.options2,this.device_id,'this.options2')
|
||||||
|
this.queryMonitoringData();
|
||||||
|
this.getDeviceWarningNums();//报警查询
|
||||||
|
}
|
||||||
|
}).catch(()=>{
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查询监测数据
|
||||||
|
queryMonitoringData(){
|
||||||
|
let params = {
|
||||||
|
device_id:this.device_id,
|
||||||
|
start_time:this.q_start_time,
|
||||||
|
end_time:this.q_end_time,
|
||||||
|
_t: new Date().getTime()
|
||||||
|
}
|
||||||
|
this.$http.get('/api/monitoring-data',{params:params}).then(({data})=>{
|
||||||
|
if(data.code==200){
|
||||||
|
let info = data.data;
|
||||||
|
let chartInfo = {};
|
||||||
|
|
||||||
|
for(let fk in info){
|
||||||
|
let _item = {
|
||||||
|
categories: [],
|
||||||
|
data:[]
|
||||||
|
}
|
||||||
|
for(let k in info[fk]){
|
||||||
|
|
||||||
|
_item.data.push(info[fk][k]);
|
||||||
|
|
||||||
|
let timestamp = new Date(k).getTime();
|
||||||
|
// let time1 = k.split(/\s+/);
|
||||||
|
if(params.start_time!=params.end_time){
|
||||||
|
let time1 = this.$u.timeFormat(timestamp, 'yyyy-mm-dd');
|
||||||
|
_item.categories.push(time1);
|
||||||
|
}else{
|
||||||
|
let time2 = this.$u.timeFormat(timestamp, 'hh:ss');
|
||||||
|
_item.categories.push(time2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
chartInfo[fk] = _item;
|
||||||
|
}
|
||||||
|
console.log(chartInfo,'chartDatas--')
|
||||||
|
if(params.start_time!=params.end_time){//不是当天
|
||||||
|
this.opts.xAxis.labelCount = 3;
|
||||||
|
}else{
|
||||||
|
|
||||||
|
let len = chartInfo.conductivity.categories.length-1;
|
||||||
|
let v = 5;
|
||||||
|
let aw = len>10?len%6:len%5;
|
||||||
|
if(aw==3||aw==0||aw==1){
|
||||||
|
v = 4;
|
||||||
|
}else if(aw==2){
|
||||||
|
v = 3;
|
||||||
|
}else{v=5}
|
||||||
|
this.opts.xAxis.labelCount = v;
|
||||||
|
console.log(this.opts,v,len,'配置',aw)
|
||||||
|
}
|
||||||
|
//start 氯
|
||||||
|
let res2 = {
|
||||||
|
categories: chartInfo.chlorine.categories,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name:'氯',
|
||||||
|
legendShape:'circle',
|
||||||
|
data: chartInfo.chlorine.data
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.chart_chlorine = JSON.parse(JSON.stringify(res2));
|
||||||
|
//end 氯
|
||||||
|
|
||||||
|
//start 电导率 conductivity
|
||||||
|
let res = {
|
||||||
|
categories: chartInfo.conductivity.categories,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name:'电导率',
|
||||||
|
legendShape:'circle',
|
||||||
|
data: chartInfo.conductivity.data,
|
||||||
|
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
this.chart_conductivity = JSON.parse(JSON.stringify(res));
|
||||||
|
console.log(this.chart_conductivity,'电导率')
|
||||||
|
//end 电导率 conductivity
|
||||||
|
|
||||||
|
//start 氧气 oxygen
|
||||||
|
let res3 = {
|
||||||
|
categories: chartInfo.oxygen.categories,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name:'氧气',
|
||||||
|
legendShape:'circle',
|
||||||
|
data: chartInfo.oxygen.data
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
this.chart_oxygen = JSON.parse(JSON.stringify(res3));
|
||||||
|
//end 氧气
|
||||||
|
//start PH
|
||||||
|
let res4 = {
|
||||||
|
categories: chartInfo.ph.categories,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name:'PH',
|
||||||
|
legendShape:'circle',
|
||||||
|
data: chartInfo.ph.data,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.chart_ph = JSON.parse(JSON.stringify(res4));
|
||||||
|
//start 温度 temperature
|
||||||
|
let res5 = {
|
||||||
|
categories: chartInfo.temperature.categories,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name:'温度',
|
||||||
|
legendShape:'circle',
|
||||||
|
data: chartInfo.temperature.data,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.chart_temperature = JSON.parse(JSON.stringify(res5));
|
||||||
|
//end 温度 temperature
|
||||||
|
//start 浊度 turbidity
|
||||||
|
let res6 = {
|
||||||
|
categories: chartInfo.turbidity.categories,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name:'浊度',
|
||||||
|
legendShape:'circle',
|
||||||
|
data: chartInfo.turbidity.data,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.chart_turbidity = JSON.parse(JSON.stringify(res6));
|
||||||
|
//end 浊度 turbidity
|
||||||
|
|
||||||
|
}
|
||||||
|
}).catch(()=>{
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
//预警查询
|
||||||
|
getDeviceWarningNums(){
|
||||||
|
let params = {
|
||||||
|
base:this.addressValue,
|
||||||
|
device:this.device_id,
|
||||||
|
status:0,
|
||||||
|
_t: new Date().getTime()
|
||||||
|
}
|
||||||
|
this.$http.get('/api/device-warning-nums',{params:params}).then(({data})=>{
|
||||||
|
if(data.code==200){
|
||||||
|
this.deviceWarning = data.data;
|
||||||
|
}
|
||||||
|
}).catch(()=>{
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//预警规则
|
||||||
|
getDeviceWarningRules(){
|
||||||
|
this.$http.get('/api/device-warning-rules',{params:{}}).then(({data})=>{
|
||||||
|
if(data.code==200){
|
||||||
|
let _data = data.data;
|
||||||
|
let info = {};
|
||||||
|
for(let item of _data){
|
||||||
|
if(item.slug=='device_warning_rule_waterquality'){//警报
|
||||||
|
info = item;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.formInfo = info.value;
|
||||||
|
}
|
||||||
|
}).catch(()=>{
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content-box{
|
||||||
|
padding-bottom: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-section{
|
||||||
|
padding: 20rpx 24rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-top: 14rpx solid #f5f5f5;
|
||||||
|
border-bottom: 14rpx solid #f5f5f5;
|
||||||
|
.top_box{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
.tit{
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.set_warning{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cont-box{
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 12rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
.warning-item{
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
.name{
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
.val{
|
||||||
|
font-size: 34rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.unit{
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-left: 6rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue