1295 lines
41 KiB
Vue
1295 lines
41 KiB
Vue
<template>
|
||
<view>
|
||
<view class="wqm_home">
|
||
<scroll-view :scroll-y="isScroll" :style="{ height: 'calc(100% - 1px)' }">
|
||
<nut-config-provider :theme-vars="themeVars">
|
||
<view class="body">
|
||
<nut-row>
|
||
<!-- 设备信息区域 -->
|
||
<nut-col :span="24" v-if="!section || section === 'deviceInfo'">
|
||
<nut-cell class="wqm_body">
|
||
<nut-row>
|
||
<nut-col :span="24" class="title"> 设备信息 </nut-col>
|
||
<nut-col :span="24">
|
||
<nut-cell-group>
|
||
<nut-cell title="设备名称" is-link @click="setName">
|
||
<template #desc>
|
||
<text class="desc">{{
|
||
deviceInfoRes.deviceName
|
||
}}</text>
|
||
</template>
|
||
</nut-cell>
|
||
<nut-cell title="设备号">
|
||
<template #desc>
|
||
<text class="desc">{{
|
||
deviceInfoRes.serialNum
|
||
}}</text>
|
||
</template>
|
||
</nut-cell>
|
||
<nut-cell title="设备类型">
|
||
<template #desc>
|
||
<text class="desc">{{
|
||
deviceInfoRes.deviceType == 1
|
||
? "溶解氧机"
|
||
: "控制器"
|
||
}}</text>
|
||
</template>
|
||
</nut-cell>
|
||
<nut-cell title="绑定时间">
|
||
<template #desc>
|
||
<text class="desc">{{
|
||
deviceInfoRes.bindTime
|
||
}}</text>
|
||
</template>
|
||
</nut-cell>
|
||
<nut-cell title="服务到期日">
|
||
<template #desc>
|
||
<text class="desc">{{
|
||
deviceInfoRes.deadTime
|
||
}}</text>
|
||
</template>
|
||
</nut-cell>
|
||
<nut-cell
|
||
title="关联塘口"
|
||
is-link
|
||
@click="showPond = true"
|
||
>
|
||
<template #desc>
|
||
<text class="desc">{{
|
||
deviceInfoRes.pondInfo
|
||
? deviceInfoRes.pondInfo.pondName
|
||
: "请绑定塘口"
|
||
}}</text>
|
||
</template>
|
||
</nut-cell>
|
||
</nut-cell-group>
|
||
</nut-col>
|
||
<!-- 将解除绑定按钮移到设备信息区域内 -->
|
||
<nut-col :span="24" :style="{ marginTop: '20rpx' }">
|
||
<nut-button
|
||
block
|
||
shape="square"
|
||
size="large"
|
||
color="#E22323"
|
||
:style="{
|
||
fontWeight: 'bold',
|
||
fontSize: '14px !important',
|
||
borderRadius: '10px',
|
||
}"
|
||
@click="unbind"
|
||
:loading="b_isLoading"
|
||
v-if="Uid==rootuserid"
|
||
>解除绑定</nut-button
|
||
>
|
||
</nut-col>
|
||
</nut-row>
|
||
</nut-cell>
|
||
</nut-col>
|
||
<!-- 溶解氧配置区域 -->
|
||
<nut-col :span="24" v-if="!section || section === 'alarmSettings'">
|
||
<nut-cell class="wqm_body">
|
||
<nut-row>
|
||
<nut-col :span="24" class="title"> 溶解氧配置 </nut-col>
|
||
<nut-col :span="24">
|
||
<nut-cell-group>
|
||
<nut-cell title="溶解氧电话告警开关">
|
||
<nut-row>
|
||
<nut-col
|
||
:span="24"
|
||
:style="{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
}"
|
||
>
|
||
<view>
|
||
<view class="c_title">溶解氧电话告警开关</view>
|
||
<view class="c_dis"
|
||
>溶解氧低于设定值会电话提醒。</view
|
||
>
|
||
</view>
|
||
<view>
|
||
<nut-switch
|
||
v-model="deviceInfoRes.oxyWarnTelOpen"
|
||
active-color="#04D98A"
|
||
@change="changeO2"
|
||
/>
|
||
</view>
|
||
</nut-col>
|
||
<nut-col
|
||
:span="24"
|
||
:style="{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
}"
|
||
v-if="deviceInfoRes.oxyWarnTelOpen"
|
||
>
|
||
<view>
|
||
<view class="c_title">告警免打扰</view>
|
||
<view class="c_dis">
|
||
在08:00-14:00、14:00-20:00、20:00-08:00三个时段内，只进行一次有效电话告警
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<nut-switch
|
||
v-model="deviceInfoRes.oxyWarnTelNoDis"
|
||
active-color="#04D98A"
|
||
@change="changeOxyDis"
|
||
/>
|
||
</view>
|
||
</nut-col>
|
||
<nut-col
|
||
:span="24"
|
||
:style="{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
marginTop: '20rpx',
|
||
}"
|
||
>
|
||
<view class="d_title"
|
||
>下限 {{ deviceInfoRes.oxyWarnLower }}Mg/L
|
||
</view>
|
||
<view
|
||
class="d_dis"
|
||
:style="{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
}"
|
||
@click="setOxy"
|
||
>
|
||
<view>设置</view>
|
||
<view
|
||
style="
|
||
width: var(--nut-icon-width);
|
||
color: #979797;
|
||
height: var(--nut-icon-height);
|
||
line-height: var(--nut-icon-line-height);
|
||
"
|
||
>
|
||
<RectRight />
|
||
</view>
|
||
</view>
|
||
</nut-col>
|
||
</nut-row>
|
||
</nut-cell>
|
||
<nut-cell>
|
||
<nut-row>
|
||
<nut-col
|
||
:span="24"
|
||
:style="{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
}"
|
||
>
|
||
<view>
|
||
<view class="c_title">温度电话告警开关</view>
|
||
<view class="c_dis"
|
||
>温度高于或低于设定值会电话提醒。</view
|
||
>
|
||
</view>
|
||
<view>
|
||
<nut-switch
|
||
v-model="deviceInfoRes.tempWarnTelOpen"
|
||
active-color="#04D98A"
|
||
@change="changeTem"
|
||
/>
|
||
</view>
|
||
</nut-col>
|
||
<nut-col
|
||
:span="24"
|
||
:style="{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
}"
|
||
v-if="deviceInfoRes.tempWarnTelOpen"
|
||
>
|
||
<view>
|
||
<view class="c_title">告警免打扰</view>
|
||
<view class="c_dis">
|
||
在08:00-14:00、14:00-20:00、20:00-08:00三个时段内，只进行一次有效电话告警
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<nut-switch
|
||
v-model="deviceInfoRes.tempWarnTelNoDis"
|
||
active-color="#04D98A"
|
||
@change="changeTemDis"
|
||
/>
|
||
</view>
|
||
</nut-col>
|
||
<nut-col
|
||
:span="24"
|
||
:style="{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
marginTop: '20rpx',
|
||
}"
|
||
>
|
||
<view class="d_title"
|
||
>上限
|
||
{{
|
||
deviceInfoRes.tempWarnUpper
|
||
}}℃ 下限
|
||
{{ deviceInfoRes.tempWarnLower }}℃</view
|
||
>
|
||
<view
|
||
class="d_dis"
|
||
:style="{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
}"
|
||
@click="setTemp"
|
||
>
|
||
<view>设置</view>
|
||
<view
|
||
style="
|
||
width: var(--nut-icon-width);
|
||
color: #979797;
|
||
height: var(--nut-icon-height);
|
||
line-height: var(--nut-icon-line-height);
|
||
"
|
||
>
|
||
<RectRight />
|
||
</view>
|
||
</view>
|
||
</nut-col>
|
||
</nut-row>
|
||
</nut-cell>
|
||
<nut-cell>
|
||
<nut-row>
|
||
<nut-col
|
||
:span="24"
|
||
:style="{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
}"
|
||
>
|
||
<view class="title">联动控制</view>
|
||
<view class="ils" @click="openLink"
|
||
>联动设置</view
|
||
>
|
||
</nut-col>
|
||
<nut-col
|
||
:span="24"
|
||
v-if="deviceInfoRes.listLinkedCtr.length > 0"
|
||
>
|
||
<!-- 绘制表格 -->
|
||
<view class="m_t_15">
|
||
<view class="linked-table">
|
||
<!-- 表头 -->
|
||
<view class="table-row table-header">
|
||
<view class="table-cell"></view>
|
||
<view
|
||
class="table-cell"
|
||
v-for="(item, index) in deviceInfoRes.listLinkedCtr"
|
||
:key="item.id"
|
||
>
|
||
联动{{ index + 1 }}
|
||
</view>
|
||
</view>
|
||
<!-- 上限行 -->
|
||
<view class="table-row">
|
||
<view class="table-cell table-label">上限</view>
|
||
<view
|
||
class="table-cell table-value"
|
||
v-for="item in deviceInfoRes.listLinkedCtr"
|
||
:key="'up_' + item.id"
|
||
>
|
||
{{ item.oxyUpperOpen ? item.oxyUpperValue + 'Mg/L' : '-' }}
|
||
</view>
|
||
</view>
|
||
<!-- 下限行 -->
|
||
<view class="table-row">
|
||
<view class="table-cell table-label">下限</view>
|
||
<view
|
||
class="table-cell table-value"
|
||
v-for="item in deviceInfoRes.listLinkedCtr"
|
||
:key="'low_' + item.id"
|
||
>
|
||
{{ item.oxyLowerOpen ? item.oxyLowerValue + 'Mg/L' : '-' }}
|
||
</view>
|
||
</view>
|
||
<!-- 开关行 -->
|
||
<view class="table-row">
|
||
<view class="table-cell table-label">开关</view>
|
||
<view
|
||
class="table-cell table-switch"
|
||
v-for="item in deviceInfoRes.listLinkedCtr"
|
||
:key="'sw_' + item.id"
|
||
>
|
||
<view class="switch-names">
|
||
<view
|
||
class="switch-name"
|
||
v-for="(sw, idx) in item.listSwitch"
|
||
:key="sw.id"
|
||
>
|
||
{{ sw.switchName }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</nut-col>
|
||
</nut-row>
|
||
</nut-cell>
|
||
<nut-cell title="盐度设置" is-link @click="setSalFunc">
|
||
<template #desc>
|
||
<text class="desc"
|
||
>{{ deviceInfoRes.salinityCompensation }}‰</text
|
||
>
|
||
</template>
|
||
</nut-cell>
|
||
<nut-cell
|
||
title="设备校准"
|
||
is-link
|
||
@click="toCalibration"
|
||
/>
|
||
</nut-cell-group>
|
||
</nut-col>
|
||
</nut-row>
|
||
</nut-cell>
|
||
</nut-col>
|
||
</nut-row>
|
||
</view>
|
||
</nut-config-provider>
|
||
</scroll-view>
|
||
<!-- 弹出层提示 -->
|
||
<nut-toast
|
||
:msg="state.msg"
|
||
v-model:visible="state.show"
|
||
:type="state.type"
|
||
/>
|
||
<!-- 选择塘口 -->
|
||
<nut-popup v-model:visible="showPond" position="bottom">
|
||
<nut-picker
|
||
v-model="pondId"
|
||
:columns="pondList"
|
||
title="请选择塘口"
|
||
@confirm="confirm"
|
||
:field-names="{ text: 'pondName', value: 'id' }"
|
||
@cancel="cancel"
|
||
/>
|
||
</nut-popup>
|
||
<nut-config-provider :theme-vars="themeVars2">
|
||
<!-- 溶解氧告警设置 -->
|
||
<nut-dialog v-model:visible="openSetOxy" text-align="left" no-footer>
|
||
<view :style="{ height: '100%' }">
|
||
<view class="d_body">
|
||
<nut-row>
|
||
<nut-col :span="24">
|
||
<view class="d_title">溶解氧告警值设置</view>
|
||
</nut-col>
|
||
<nut-col :span="24">
|
||
<nut-divider class="divider" />
|
||
</nut-col>
|
||
<nut-col :span="24" class="view_f">
|
||
<view :style="{ width: '40%' }" class="font_32 c_444"
|
||
>告警值</view
|
||
>
|
||
<view :style="{ width: '60%' }">
|
||
<nut-input
|
||
type="digit"
|
||
v-model="oxy"
|
||
@blur="oxyValue"
|
||
@focus="onfocus"
|
||
:border="false"
|
||
input-align="right"
|
||
clearable
|
||
max-length="5"
|
||
placeholder="范围1.5~20"
|
||
:cursor="String(oxy).length"
|
||
>
|
||
<template #right> Mg/L </template>
|
||
</nut-input>
|
||
</view>
|
||
</nut-col>
|
||
<nut-col :span="24">
|
||
<nut-divider class="divider" />
|
||
</nut-col>
|
||
</nut-row>
|
||
</view>
|
||
<view class="d_btn">
|
||
<nut-row>
|
||
<nut-col
|
||
:span="12"
|
||
:style="{ border: '1px solid #eee', color: '#222' }"
|
||
@click="openSetOxy = false"
|
||
>
|
||
取消
|
||
</nut-col>
|
||
<nut-col
|
||
:span="12"
|
||
:style="{ border: '1px solid #eee', color: '#15BBC5' }"
|
||
@click="setOxyEventD"
|
||
>
|
||
确定
|
||
</nut-col>
|
||
</nut-row>
|
||
</view>
|
||
</view>
|
||
</nut-dialog>
|
||
<!-- 温度告警设置 -->
|
||
<nut-dialog v-model:visible="openSetTemp" text-align="left" no-footer>
|
||
<view :style="{ height: '100%' }">
|
||
<view class="d_body">
|
||
<nut-row>
|
||
<nut-col :span="24">
|
||
<view class="d_title">温度告警设置</view>
|
||
</nut-col>
|
||
<nut-col :span="24">
|
||
<nut-divider class="divider" />
|
||
</nut-col>
|
||
<nut-col :span="24" class="view_f">
|
||
<view :style="{ width: '30%' }" class="font_32 c_444"
|
||
>温度上限</view
|
||
>
|
||
<view :style="{ width: '70%' }">
|
||
<nut-input
|
||
type="digit"
|
||
v-model="tempUp"
|
||
@blur="tUpValue"
|
||
@focus="onfocus"
|
||
placeholder="请输入温度告警上限"
|
||
:border="false"
|
||
input-align="right"
|
||
clearable
|
||
max-length="5"
|
||
:cursor="String(tempUp).length"
|
||
>
|
||
<template #right> ℃ </template>
|
||
</nut-input>
|
||
</view>
|
||
</nut-col>
|
||
<nut-col :span="24">
|
||
<nut-divider class="divider" />
|
||
</nut-col>
|
||
<nut-col :span="24" class="view_f">
|
||
<view :style="{ width: '30%' }" class="font_32 c_444"
|
||
>温度下限</view
|
||
>
|
||
<view :style="{ width: '70%' }">
|
||
<nut-input
|
||
type="digit"
|
||
v-model="tempLower"
|
||
@blur="tLoValue"
|
||
@focus="onfocus"
|
||
placeholder="请输入温度告警下限"
|
||
:border="false"
|
||
input-align="right"
|
||
clearable
|
||
max-length="5"
|
||
>
|
||
<template #right> ℃ </template>
|
||
</nut-input>
|
||
</view>
|
||
</nut-col>
|
||
</nut-row>
|
||
</view>
|
||
<view class="d_btn">
|
||
<nut-row>
|
||
<nut-col
|
||
:span="12"
|
||
:style="{ border: '1px solid #eee', color: '#222' }"
|
||
@click="openSetTemp = false"
|
||
>
|
||
取消
|
||
</nut-col>
|
||
<nut-col
|
||
:span="12"
|
||
:style="{ border: '1px solid #eee', color: '#15BBC5' }"
|
||
@click="setTempEventD"
|
||
>
|
||
确定
|
||
</nut-col>
|
||
</nut-row>
|
||
</view>
|
||
</view>
|
||
</nut-dialog>
|
||
<!-- 设备名称 -->
|
||
<nut-dialog v-model:visible="openSetName" text-align="left" no-footer>
|
||
<!-- <view :style="{ height: '100%' }"> -->
|
||
<view class="d_body">
|
||
<nut-row>
|
||
<nut-col :span="24">
|
||
<view class="d_title">设备名称设置</view>
|
||
</nut-col>
|
||
<nut-col :span="24">
|
||
<nut-divider class="divider" />
|
||
</nut-col>
|
||
<nut-col :span="24" class="view_f">
|
||
<view :style="{ width: '30%' }" class="font_32 c_444"
|
||
>名称</view
|
||
>
|
||
<view :style="{ width: '70%' }">
|
||
<nut-input
|
||
v-model="deviceName"
|
||
@focus="onfocus"
|
||
@blur="onblur"
|
||
placeholder="请输入设备名称"
|
||
:border="false"
|
||
input-align="right"
|
||
clearable
|
||
max-length="6"
|
||
:cursor="String(deviceName).length"
|
||
/>
|
||
</view>
|
||
</nut-col>
|
||
</nut-row>
|
||
</view>
|
||
<view class="d_btn">
|
||
<nut-row>
|
||
<nut-col
|
||
:span="12"
|
||
:style="{ border: '1px solid #eee', color: '#222' }"
|
||
@click="openSetName = false"
|
||
>
|
||
取消
|
||
</nut-col>
|
||
<nut-col
|
||
:span="12"
|
||
:style="{ border: '1px solid #eee', color: '#15BBC5' }"
|
||
@click="setNameEventD"
|
||
>
|
||
确定
|
||
</nut-col>
|
||
</nut-row>
|
||
</view>
|
||
<!-- </view> -->
|
||
</nut-dialog>
|
||
<!-- 盐度设置 -->
|
||
<nut-dialog v-model:visible="openSalinity" text-align="left" no-footer>
|
||
<view :style="{ height: '100%' }">
|
||
<view class="d_body">
|
||
<nut-row>
|
||
<nut-col :span="24">
|
||
<view class="d_title">盐度设置</view>
|
||
</nut-col>
|
||
<nut-col :span="24">
|
||
<nut-divider class="divider" />
|
||
</nut-col>
|
||
<nut-col :span="24" class="view_f">
|
||
<view :style="{ width: '30%' }" class="font_32 c_444"
|
||
>盐度</view
|
||
>
|
||
<view :style="{ width: '70%' }">
|
||
<nut-input
|
||
type="digit"
|
||
v-model="salinity"
|
||
@blur="salValue"
|
||
@focus="onfocus"
|
||
placeholder="请输入盐度"
|
||
:border="false"
|
||
input-align="right"
|
||
clearable
|
||
max-length="5"
|
||
:cursor="String(salinity).length"
|
||
>
|
||
<template #right> ‰ </template>
|
||
</nut-input>
|
||
</view>
|
||
</nut-col>
|
||
</nut-row>
|
||
</view>
|
||
<view class="d_btn">
|
||
<nut-row>
|
||
<nut-col
|
||
:span="12"
|
||
:style="{ border: '1px solid #eee', color: '#222' }"
|
||
@click="openSalinity = false"
|
||
>
|
||
取消
|
||
</nut-col>
|
||
<nut-col
|
||
:span="12"
|
||
:style="{ border: '1px solid #eee', color: '#15BBC5' }"
|
||
@click="setSalinityD"
|
||
>
|
||
确定
|
||
</nut-col>
|
||
</nut-row>
|
||
</view>
|
||
</view>
|
||
</nut-dialog>
|
||
<!-- 弹出层提示 -->
|
||
<nut-dialog v-model:visible="alertRes" text-align="center">
|
||
<template #default>
|
||
<view :style="{ height: '100%' }">
|
||
<nut-row>
|
||
<nut-col :span="24" class="font_36 c_222">
|
||
移除设备成功！
|
||
</nut-col>
|
||
</nut-row>
|
||
</view>
|
||
</template>
|
||
<template #footer>
|
||
<view class="d_btn" :style="{ position: 'absolute' }">
|
||
<nut-row>
|
||
<nut-col
|
||
:span="24"
|
||
:style="{ border: '1px solid #eee', color: '#15BBC5' }"
|
||
>
|
||
<nut-button
|
||
type="primary"
|
||
shape="square"
|
||
block
|
||
@click="onGoBack"
|
||
>返回</nut-button
|
||
>
|
||
</nut-col>
|
||
</nut-row>
|
||
</view>
|
||
</template>
|
||
</nut-dialog>
|
||
</nut-config-provider>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { RectRight } from "@nutui/icons-vue-taro";
|
||
import {
|
||
deviceInfo,
|
||
deviceUnbind,
|
||
setWarnCall,
|
||
setOxyWarn,
|
||
setTempWarn,
|
||
deviceUpdateName,
|
||
deviceUpdatePond,
|
||
setSal,
|
||
deviceDel,
|
||
} from "@/api/device";
|
||
import { stateType } from "@/utils/types";
|
||
import { formatDate } from "@/utils/tools";
|
||
import { getPond2 } from "@/api/home";
|
||
import Taro from "@tarojs/taro";
|
||
import { debounce,throttle } from 'lodash';
|
||
const instance = Taro.getCurrentInstance();
|
||
const id = instance.router.params.id;
|
||
const name = instance.router.params.name;
|
||
const page = instance.router.params.page;
|
||
const section = instance.router.params.section; // 获取区域参数
|
||
// const name = undefined
|
||
Taro.setNavigationBarTitle({
|
||
title: "水质检测仪设置",
|
||
});
|
||
const store: any = inject("store");
|
||
// const id = instance.router.params.id
|
||
|
||
const themeVars = ref({
|
||
cellBorderRadius: "4px",
|
||
cellBoxShadow: "0px",
|
||
cellPadding: "26rpx 0px",
|
||
});
|
||
const themeVars2 = ref({
|
||
cellBoxShadow: "0px 0px 0px 0px",
|
||
cellPadding: "0",
|
||
cellColor: "#666666",
|
||
cellTitleFont: "32rpx",
|
||
cellTitleDescFont: "30rpx",
|
||
cellDescFont: "30rpx",
|
||
cellDescColor: "#222222",
|
||
popupBorderRadius: "10rpx",
|
||
});
|
||
const state: stateType = reactive({
|
||
msg: "",
|
||
type: "text",
|
||
center: true,
|
||
show: false,
|
||
});
|
||
const deviceInfoRes = ref({
|
||
id: undefined,
|
||
deviceName: undefined,
|
||
serialNum: undefined,
|
||
deviceType: 1,
|
||
bindTime: undefined,
|
||
deadTime: undefined,
|
||
pondInfo: {
|
||
id: undefined,
|
||
pondName: undefined,
|
||
},
|
||
isOxygenUsed: false,
|
||
oxyWarnTelOpen: false,
|
||
oxyWarnTelNoDis: false,
|
||
oxyWarnLower: undefined,
|
||
tempWarnTelOpen: false,
|
||
tempWarnUpper: undefined,
|
||
tempWarnLower: undefined,
|
||
salinityCompensation: undefined,
|
||
keepNightOpen: false,
|
||
inputVoltage: undefined,
|
||
listSwitch: undefined,
|
||
tempWarnTelNoDis: false,
|
||
listLinkedCtr: [],
|
||
});
|
||
const showPond = ref<boolean>(false);
|
||
const openSetName = ref<boolean>(false);
|
||
const openSetOxy = ref<boolean>(false);
|
||
const openSetTemp = ref<boolean>(false);
|
||
const openSalinity = ref<boolean>(false);
|
||
const alertRes = ref<boolean>(false);
|
||
const isScroll = ref<boolean>(true);
|
||
const salinity = ref<number>(30);
|
||
const pondList = ref<any[]>([]);
|
||
|
||
const pondId = ref();
|
||
const oxy = ref();
|
||
const tempLower = ref();
|
||
const tempUp = ref();
|
||
const deviceName = ref();
|
||
|
||
const r_isLoading = ref(false)
|
||
const b_isLoading = ref(false)
|
||
const Uid = Taro.getStorageSync("UserId")
|
||
const rootuserid = ref(store.getRootUserId);
|
||
/**--------------method start------------------- */
|
||
Taro.useDidShow(() => {
|
||
// 默认
|
||
getDevInfo();
|
||
getPondList();
|
||
});
|
||
// 查询塘口列表
|
||
function getPondList() {
|
||
getPond2().then((res: any) => {
|
||
if (res.code == 200) {
|
||
const arr = [{ id: 0, pondName: "无" }];
|
||
res.data.forEach(r=>{
|
||
arr.push({id:r.id,pondName:r.pondName})
|
||
})
|
||
pondList.value = arr;
|
||
}
|
||
});
|
||
}
|
||
// 设备详情
|
||
function getDevInfo() {
|
||
deviceInfo({ id }).then((res: any) => {
|
||
if (res.code == 200) {
|
||
res.data.bindTime = formatDate(new Date(res.data.bindTime));
|
||
res.data.deadTime = formatDate(new Date(res.data.deadTime));
|
||
|
||
// 将数字类型转为布尔类型
|
||
res.data.oxyWarnTelOpen = !!res.data.oxyWarnTelOpen;
|
||
res.data.oxyWarnTelNoDis = !!res.data.oxyWarnTelNoDis;
|
||
res.data.tempWarnTelOpen = !!res.data.tempWarnTelOpen;
|
||
res.data.tempWarnTelNoDis = !!res.data.tempWarnTelNoDis;
|
||
res.data.isOxygenUsed = !!res.data.isOxygenUsed;
|
||
|
||
deviceInfoRes.value = res.data;
|
||
pondId.value = res.data.pondInfo ? [Number(res.data.pondInfo.id)] : [0];
|
||
}
|
||
});
|
||
}
|
||
// 格式化开关名称
|
||
function formatName(switchList: any) {
|
||
if (switchList && switchList.length > 0) {
|
||
const nameList = [];
|
||
switchList.forEach((res: any) => {
|
||
nameList.push(res.switchName);
|
||
});
|
||
return nameList.join(",");
|
||
}
|
||
return "/";
|
||
}
|
||
/** 解除绑定 */
|
||
function unbind() {
|
||
Taro.showModal({
|
||
title: "提示",
|
||
content:
|
||
"解除绑定后会将设备直接删除，并和塘口内的其他设备解除关联关系。再次绑定需重新扫码添加。确认解除绑定该设备？",
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
b_isLoading.value = true
|
||
deviceDel({ id }).then((res: any) => {
|
||
if (res.code == 200) {
|
||
state.show = true;
|
||
state.msg = "解绑成功";
|
||
setTimeout(() => {
|
||
if (page == "home") {
|
||
Taro.switchTab({
|
||
url: "/pages/main/home",
|
||
});
|
||
} else {
|
||
Taro.navigateBack({ delta: 1 });
|
||
}
|
||
}, 200);
|
||
// deviceInfoRes.value.pondInfo = {
|
||
// id: undefined,
|
||
// pondName: undefined,
|
||
// }
|
||
// pondId.value = 0
|
||
}
|
||
}).finally(() => {
|
||
b_isLoading.value = false
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log("用户点击取消");
|
||
}
|
||
},
|
||
});
|
||
}
|
||
// 跳转到联动控制
|
||
function openLink() {
|
||
// 跳转到联动控制页面
|
||
Taro.navigateTo({
|
||
url: `/home/linkControl?id=${id}&pondId=${
|
||
pondId.value[0] ? pondId.value[0] : 0
|
||
}`,
|
||
});
|
||
}
|
||
// 确定选择塘口
|
||
function confirm({ selectedValue, selectedOptions }) {
|
||
console.log(selectedValue)
|
||
pondId.value = selectedValue;
|
||
deviceInfoRes.value.pondInfo = {
|
||
id: selectedValue,
|
||
pondName: selectedOptions[0].pondName,
|
||
};
|
||
const data = {
|
||
id,
|
||
pondId: selectedValue[0],
|
||
};
|
||
deviceUpdatePond(data)
|
||
.then((res: any) => {
|
||
if (res.code == 200) {
|
||
state.show = true;
|
||
state.msg = "设置成功";
|
||
}
|
||
})
|
||
.finally(() => {
|
||
showPond.value = false;
|
||
});
|
||
}
|
||
// 取消选择塘口
|
||
function cancel() {
|
||
showPond.value = false;
|
||
}
|
||
// 设置溶解氧/水温告警
|
||
function changeO2(value, event) {
|
||
if (event) {
|
||
const data = {
|
||
deviceId: id,
|
||
type: 1,
|
||
isOpen: deviceInfoRes.value.oxyWarnTelOpen ? 1 : 0, // 布尔转数字
|
||
isNoDisturb: deviceInfoRes.value.oxyWarnTelOpen
|
||
? (deviceInfoRes.value.oxyWarnTelNoDis ? 1 : 0) // 布尔转数字
|
||
: 0,
|
||
};
|
||
setWarnCall(data).then((res) => {
|
||
if (res.code == 200) {
|
||
state.show = true;
|
||
state.msg = "设置成功";
|
||
}
|
||
});
|
||
}
|
||
}
|
||
function changeTem(value, event) {
|
||
if (event) {
|
||
const data = {
|
||
deviceId: id,
|
||
type: 2,
|
||
isOpen: deviceInfoRes.value.tempWarnTelOpen ? 1 : 0, // 布尔转数字
|
||
isNoDisturb: deviceInfoRes.value.tempWarnTelOpen
|
||
? (deviceInfoRes.value.tempWarnTelNoDis ? 1 : 0) // 布尔转数字
|
||
: 0,
|
||
};
|
||
setWarnCall(data).then((res) => {
|
||
if (res.code == 200) {
|
||
state.show = true;
|
||
state.msg = "设置成功";
|
||
}
|
||
});
|
||
}
|
||
}
|
||
// 设置溶解氧/温度上下限
|
||
function setOxy() {
|
||
openSetOxy.value = true;
|
||
oxy.value = deviceInfoRes.value.oxyWarnLower;
|
||
}
|
||
// 设置设备名称
|
||
function setName() {
|
||
openSetName.value = true;
|
||
deviceName.value = deviceInfoRes.value.deviceName;
|
||
}
|
||
const setOxyEventD = debounce(setOxyEvent, 300);
|
||
function setOxyEvent() {
|
||
if (oxy.value) {
|
||
if (Number(oxy.value) < 1.5 || Number(oxy.value) > 20) {
|
||
state.show = true;
|
||
state.msg = "告警值范围为1.5-20";
|
||
return;
|
||
}
|
||
} else {
|
||
state.show = true;
|
||
state.msg = "请输入告警值";
|
||
return;
|
||
}
|
||
const data = {
|
||
deviceId: id,
|
||
oxyWarnLower: oxy.value,
|
||
};
|
||
setOxyWarn(data).then((res) => {
|
||
if (res.code == 200) {
|
||
state.show = true;
|
||
state.msg = "设置成功";
|
||
deviceInfoRes.value.oxyWarnLower = oxy.value;
|
||
openSetOxy.value = false;
|
||
}
|
||
});
|
||
}
|
||
const setNameEventD = debounce(setNameEvent, 300);
|
||
function setNameEvent() {
|
||
const data = {
|
||
id,
|
||
newName: deviceName.value,
|
||
};
|
||
deviceUpdateName(data).then((res) => {
|
||
if (res.code == 200) {
|
||
state.show = true;
|
||
state.msg = "设置成功";
|
||
openSetName.value = false;
|
||
// 重新加载设备信息
|
||
getDevInfo();
|
||
}
|
||
});
|
||
}
|
||
function setTemp() {
|
||
openSetTemp.value = true;
|
||
tempUp.value = deviceInfoRes.value.tempWarnUpper;
|
||
tempLower.value = deviceInfoRes.value.tempWarnLower;
|
||
}
|
||
const setTempEventD = debounce(setTempEvent, 300);
|
||
function setTempEvent() {
|
||
const up = tempUp.value;
|
||
const lo = tempLower.value;
|
||
if (Number(lo) >= Number(up)) {
|
||
state.show = true;
|
||
state.msg = "下限不能大于等于上限";
|
||
return;
|
||
}
|
||
if (!lo) {
|
||
state.show = true;
|
||
state.msg = "请输入下限值";
|
||
return;
|
||
}
|
||
if (!up) {
|
||
state.show = true;
|
||
state.msg = "请输入上限值";
|
||
return;
|
||
}
|
||
const data = {
|
||
deviceId: id,
|
||
tempWarnLower: tempLower.value,
|
||
tempWarnUpper: tempUp.value,
|
||
};
|
||
setTempWarn(data).then((res) => {
|
||
if (res.code == 200) {
|
||
state.show = true;
|
||
state.msg = "设置成功";
|
||
deviceInfoRes.value.tempWarnUpper = tempUp.value;
|
||
deviceInfoRes.value.tempWarnLower = tempLower.value;
|
||
openSetTemp.value = false;
|
||
}
|
||
});
|
||
}
|
||
// 溶解氧告警
|
||
function oxyValue() {
|
||
onblur();
|
||
}
|
||
// 温度告警
|
||
function tUpValue() {
|
||
onblur();
|
||
}
|
||
function tLoValue() {
|
||
onblur();
|
||
}
|
||
// 盐度设置
|
||
function setSalFunc() {
|
||
openSalinity.value = true;
|
||
salinity.value = deviceInfoRes.value.salinityCompensation;
|
||
}
|
||
function salValue() {
|
||
const sal = salinity.value;
|
||
onblur();
|
||
if (Number(sal) > 40) {
|
||
salinity.value = 40;
|
||
}
|
||
}
|
||
const setSalinityD = debounce(setSalinity, 300);
|
||
function setSalinity() {
|
||
onblur();
|
||
const data = {
|
||
id,
|
||
salinityCompensation: salinity.value ? Number(salinity.value) : 0,
|
||
};
|
||
setSal(data).then((res) => {
|
||
if (res.code == 200) {
|
||
state.show = true;
|
||
state.msg = "设置成功";
|
||
deviceInfoRes.value.salinityCompensation = salinity.value;
|
||
openSalinity.value = false;
|
||
}
|
||
});
|
||
}
|
||
//跳转校准页面
|
||
function toCalibration() {
|
||
Taro.navigateTo({ url: `/home/calibration?id=${id}&page=wqm` });
|
||
}
|
||
// 免打扰设置-溶解氧
|
||
function changeOxyDis(value, event) {
|
||
if (event) {
|
||
const data = {
|
||
deviceId: id,
|
||
type: 1,
|
||
isOpen: deviceInfoRes.value.oxyWarnTelOpen ? 1 : 0, // 布尔转数字
|
||
isNoDisturb: deviceInfoRes.value.oxyWarnTelOpen
|
||
? (deviceInfoRes.value.oxyWarnTelNoDis ? 1 : 0) // 布尔转数字
|
||
: 0,
|
||
};
|
||
setWarnCall(data).then((res) => {
|
||
if (res.code == 200) {
|
||
state.show = true;
|
||
state.msg = "设置成功";
|
||
}
|
||
});
|
||
}
|
||
}
|
||
// 免打扰设置-温度
|
||
function changeTemDis(value, event) {
|
||
if (event) {
|
||
const data = {
|
||
deviceId: id,
|
||
type: 2,
|
||
isOpen: deviceInfoRes.value.tempWarnTelOpen ? 1 : 0, // 布尔转数字
|
||
isNoDisturb: deviceInfoRes.value.tempWarnTelOpen
|
||
? (deviceInfoRes.value.tempWarnTelNoDis ? 1 : 0) // 布尔转数字
|
||
: 0,
|
||
};
|
||
setWarnCall(data).then((res) => {
|
||
if (res.code == 200) {
|
||
state.show = true;
|
||
state.msg = "设置成功";
|
||
}
|
||
});
|
||
}
|
||
}
|
||
// 返回上一页
|
||
function onGoBack() {
|
||
Taro.navigateBack({ delta: 1 });
|
||
}
|
||
function onfocus() {
|
||
isScroll.value = false;
|
||
}
|
||
function onblur() {
|
||
isScroll.value = true;
|
||
}
|
||
/**--------------method end--------------------- */
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.wqm_home {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-image: url("https://www.yuceyun.cn/wechat/bg.jpg");
|
||
background-color: #e5ebed;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
position: fixed;
|
||
margin: 0;
|
||
|
||
font-size: 32px;
|
||
font-family: "PingFang SC";
|
||
font-weight: 400;
|
||
|
||
.nut-dialog {
|
||
padding: 0;
|
||
}
|
||
|
||
.nut-dialog__content {
|
||
margin: 0;
|
||
// max-height: 100%;
|
||
}
|
||
|
||
.nut-input {
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.body {
|
||
padding: 20px;
|
||
|
||
.title {
|
||
font-size: 36px;
|
||
font-weight: bold;
|
||
color: #222;
|
||
}
|
||
|
||
.wqm_body {
|
||
padding: 20px;
|
||
|
||
.nut-cell__title {
|
||
font-size: 30px;
|
||
color: #666;
|
||
}
|
||
|
||
.desc {
|
||
font-size: 30px;
|
||
color: #222;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.ils {
|
||
font-size: 30px;
|
||
color: #1589e9;
|
||
}
|
||
|
||
.c_title {
|
||
font-size: 30px;
|
||
color: #666;
|
||
}
|
||
|
||
.c_dis {
|
||
font-size: 26px;
|
||
color: #eb913e;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.d_title {
|
||
font-size: 30px;
|
||
color: #17b4b2;
|
||
}
|
||
|
||
.d_dis {
|
||
font-size: 30px;
|
||
color: #222222;
|
||
}
|
||
|
||
.nut-table {
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: var(--nut-font-size-2, 14px);
|
||
width: 100%;
|
||
}
|
||
|
||
.nut-table__main {
|
||
border-collapse: collapse;
|
||
display: table;
|
||
overflow-x: hidden;
|
||
width: 100%;
|
||
}
|
||
|
||
.nut-table__main__body {
|
||
display: table-row-group;
|
||
}
|
||
|
||
.nut-table__main__body__tr,
|
||
.nut-table__main__head__tr {
|
||
display: table-row;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tableTou {
|
||
font-size: 28px;
|
||
color: #222222 !important;
|
||
}
|
||
|
||
.tr {
|
||
width: 100%;
|
||
}
|
||
|
||
.tableTR {
|
||
border: 1rpx solid #e6e6e6;
|
||
width: 100%;
|
||
display: flex;
|
||
background-color: #fff;
|
||
height: 55rpx;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #17b4b2;
|
||
font-size: 28px;
|
||
}
|
||
|
||
/* 联动控制表格优化样式 */
|
||
.linked-table {
|
||
width: 100%;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
}
|
||
|
||
.table-row {
|
||
display: flex;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
.table-header {
|
||
background: #f8f8f8;
|
||
font-weight: bold;
|
||
|
||
.table-cell {
|
||
color: #666;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.table-cell {
|
||
flex: 1;
|
||
padding: 20rpx 10rpx;
|
||
text-align: center;
|
||
border-right: 1px solid #f0f0f0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 80rpx;
|
||
|
||
&:last-child {
|
||
border-right: none;
|
||
}
|
||
}
|
||
|
||
.table-label {
|
||
flex: 0 0 100rpx;
|
||
background: #fafafa;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.table-value {
|
||
color: #17b4b2;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.table-switch {
|
||
padding: 10rpx;
|
||
}
|
||
|
||
.switch-names {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.switch-name {
|
||
font-size: 24rpx;
|
||
color: #17b4b2;
|
||
padding: 6rpx 10rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 4rpx;
|
||
line-height: 1.4;
|
||
word-break: break-all;
|
||
text-align: center;
|
||
}
|
||
</style>
|