831 lines
24 KiB
Vue
831 lines
24 KiB
Vue
<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">
|
||
<view class="tit">预警数据统计</view>
|
||
<view class="set_warning">
|
||
<u-button
|
||
v-auth="['endpoint.water.setting', 'endpoint.water.setting_edit']"
|
||
class="set_btn"
|
||
@click="setWarnInfo()"
|
||
size="mini"
|
||
>设置</u-button
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="mb-20rpx">
|
||
<u-line></u-line>
|
||
</view>
|
||
<view class="cont-box">
|
||
<view class="warning-item" @click="warningClickFn(1)">
|
||
<view class="name">Ⅰ级预警</view>
|
||
<view class="val"
|
||
>{{ deviceWarning[1] ? deviceWarning[1] : 0
|
||
}}<text class="unit">个</text></view
|
||
>
|
||
</view>
|
||
<view class="warning-item" @click="warningClickFn(2)">
|
||
<view class="name">Ⅱ级预警</view>
|
||
<view class="val"
|
||
>{{ deviceWarning[2] ? deviceWarning[2] : 0
|
||
}}<text class="unit">个</text></view
|
||
>
|
||
</view>
|
||
<view class="warning-item" @click="warningClickFn(3)">
|
||
<view class="name">Ⅲ级预警</view>
|
||
<view class="val"
|
||
>{{ deviceWarning[3] ? deviceWarning[3] : 0
|
||
}}<text class="unit">个</text></view
|
||
>
|
||
</view>
|
||
<view class="warning-item" @click="warningClickFn(4)">
|
||
<view class="name">Ⅳ级预警</view>
|
||
<view class="val"
|
||
>{{ deviceWarning[4] ? deviceWarning[4] : 0
|
||
}}<text class="unit">个</text></view
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template v-if="loadingType != 0">
|
||
<!-- 氯 -->
|
||
<view class="chart_section" v-if="chart_chlorine">
|
||
<view class="top_box">
|
||
<view class="tit">氯<text class="unit">mg/L</text></view>
|
||
<view class="name">{{ addressName }}</view>
|
||
</view>
|
||
<view class="mb-20rpx">
|
||
<u-line></u-line>
|
||
</view>
|
||
<view class="cart_box">
|
||
<qiun-data-charts
|
||
:loadingType="loadingType"
|
||
type="area"
|
||
:opts="opts"
|
||
:chartData="chart_chlorine"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<!-- 电导率 -->
|
||
<view class="chart_section" v-if="chart_conductivity">
|
||
<view class="top_box">
|
||
<view class="tit">电导率<text class="unit">us/cm</text></view>
|
||
<view class="name">{{ addressName }}</view>
|
||
</view>
|
||
<view class="mb-20rpx">
|
||
<u-line></u-line>
|
||
</view>
|
||
<view class="cart_box">
|
||
<qiun-data-charts
|
||
:loadingType="loadingType"
|
||
type="area"
|
||
:opts="opts"
|
||
:chartData="chart_conductivity"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 氧气 -->
|
||
<view class="chart_section" v-if="chart_oxygen">
|
||
<view class="top_box">
|
||
<view class="tit">氧气<text class="unit">mg/L</text></view>
|
||
<view class="name">{{ addressName }}</view>
|
||
</view>
|
||
<view class="mb-20rpx">
|
||
<u-line></u-line>
|
||
</view>
|
||
<view class="cart_box">
|
||
<qiun-data-charts
|
||
:loadingType="loadingType"
|
||
type="area"
|
||
:opts="opts"
|
||
:chartData="chart_oxygen"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<!-- PH -->
|
||
<view class="chart_section" v-if="chart_ph">
|
||
<view class="top_box">
|
||
<view class="tit">PH<text class="unit"></text></view>
|
||
<view class="name">{{ addressName }}</view>
|
||
</view>
|
||
<view class="mb-20rpx">
|
||
<u-line></u-line>
|
||
</view>
|
||
<view class="cart_box">
|
||
<qiun-data-charts
|
||
:loadingType="loadingType"
|
||
type="area"
|
||
:opts="opts"
|
||
:chartData="chart_ph"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<!-- 温度 -->
|
||
<view class="chart_section" v-if="chart_temperature">
|
||
<view class="top_box">
|
||
<view class="tit">温度<text class="unit">℃</text></view>
|
||
<view class="name">{{ addressName }}</view>
|
||
</view>
|
||
<view class="mb-20rpx">
|
||
<u-line></u-line>
|
||
</view>
|
||
<view class="cart_box">
|
||
<qiun-data-charts
|
||
:loadingType="loadingType"
|
||
type="area"
|
||
:opts="optsc"
|
||
:chartData="chart_temperature"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<!-- 浊度 -->
|
||
<view class="chart_section" v-if="chart_turbidity">
|
||
<view class="top_box">
|
||
<view class="tit">浊度<text class="unit">NTU</text></view>
|
||
<view class="name">{{ addressName }}</view>
|
||
</view>
|
||
<view class="mb-20rpx">
|
||
<u-line></u-line>
|
||
</view>
|
||
<view class="cart_box">
|
||
<qiun-data-charts
|
||
:loadingType="loadingType"
|
||
type="area"
|
||
:opts="opts"
|
||
:chartData="chart_turbidity"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</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 {
|
||
loadingType: 1,
|
||
optsc: {},
|
||
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()
|
||
this.optsc = JSON.parse(JSON.stringify(this.opts))
|
||
},
|
||
onShow() {},
|
||
methods: {
|
||
warningClickFn(lv) {
|
||
let urlparams = `?lv=${lv}&base=${this.addressValue}&device=${this.device_id}&title=水质监控`
|
||
uni.navigateTo({
|
||
url: `/pages/index/warning-list${urlparams}`,
|
||
})
|
||
},
|
||
//设置预警值
|
||
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 }) => {
|
||
if (data.code == 200) {
|
||
let _data = data.data
|
||
if (_data.length == 0) {
|
||
this.loadingType = 0
|
||
return this.$u.toast('没有关联基地')
|
||
}
|
||
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.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
|
||
if (_data.length == 0) {
|
||
// return this.$u.toast('监测点为空');
|
||
}
|
||
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: [],
|
||
}
|
||
|
||
if (info[fk]) {
|
||
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
|
||
this.optsc.xAxis.labelCount = 3
|
||
} else {
|
||
let len = chartInfo.oxygen.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
|
||
this.optsc.xAxis.labelCount = v
|
||
console.log(this.opts, v, len, '配置', aw)
|
||
}
|
||
|
||
//start 氯
|
||
if (chartInfo.chlorine) {
|
||
let res2 = {
|
||
categories: chartInfo.chlorine.categories,
|
||
series: [
|
||
{
|
||
name: '氯',
|
||
legendShape: 'circle',
|
||
data: chartInfo.chlorine.data,
|
||
},
|
||
],
|
||
}
|
||
this.chart_chlorine = JSON.parse(JSON.stringify(res2))
|
||
}else{
|
||
this.chart_chlorine = null
|
||
}
|
||
//end 氯
|
||
|
||
//start 电导率 conductivity
|
||
if (chartInfo.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, '电导率')
|
||
}else{
|
||
this.chart_conductivity = null
|
||
}
|
||
//end 电导率 conductivity
|
||
|
||
//start 氧气 oxygen
|
||
if (chartInfo.oxygen) {
|
||
let res3 = {
|
||
categories: chartInfo.oxygen.categories,
|
||
series: [
|
||
{
|
||
name: '氧气',
|
||
legendShape: 'circle',
|
||
data: chartInfo.oxygen.data,
|
||
},
|
||
],
|
||
}
|
||
|
||
this.chart_oxygen = JSON.parse(JSON.stringify(res3))
|
||
}else{
|
||
this.chart_oxygen = null
|
||
}
|
||
//end 氧气
|
||
//start PH
|
||
if (chartInfo.ph) {
|
||
let res4 = {
|
||
categories: chartInfo.ph.categories,
|
||
series: [
|
||
{
|
||
name: 'PH',
|
||
legendShape: 'circle',
|
||
data: chartInfo.ph.data,
|
||
},
|
||
],
|
||
}
|
||
this.chart_ph = JSON.parse(JSON.stringify(res4))
|
||
}else{
|
||
this.chart_ph = null
|
||
}
|
||
//start 温度 temperature
|
||
if (chartInfo.temperature) {
|
||
let res5 = {
|
||
categories: chartInfo.temperature.categories,
|
||
series: [
|
||
{
|
||
name: '温度',
|
||
legendShape: 'circle',
|
||
data: chartInfo.temperature.data,
|
||
},
|
||
],
|
||
}
|
||
let min_temperature = 0
|
||
for (let val of chartInfo.temperature.data) {
|
||
if (val < 0) {
|
||
min_temperature = val
|
||
}
|
||
}
|
||
if (min_temperature < 0) {
|
||
this.optsc.yAxis.data = []
|
||
}
|
||
this.chart_temperature = JSON.parse(JSON.stringify(res5))
|
||
}else{
|
||
this.chart_temperature = null
|
||
}
|
||
//end 温度 temperature
|
||
//start 浊度 turbidity
|
||
if (chartInfo.turbidity) {
|
||
let res6 = {
|
||
categories: chartInfo.turbidity.categories,
|
||
series: [
|
||
{
|
||
name: '浊度',
|
||
legendShape: 'circle',
|
||
data: chartInfo.turbidity.data,
|
||
},
|
||
],
|
||
}
|
||
this.chart_turbidity = JSON.parse(JSON.stringify(res6))
|
||
}else{
|
||
this.chart_turbidity = null
|
||
}
|
||
//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>
|