1302 lines
38 KiB
Vue
1302 lines
38 KiB
Vue
<template>
|
||
<!-- 顶部导航栏 -->
|
||
<custom-nav-bar :left="false" leftText="" @leftClick="" :title="title">
|
||
<template v-slot:left>
|
||
<view @click="$refs.landRef.open()">地块</view>
|
||
</template>
|
||
<template v-slot:right>
|
||
<view class="fixed">
|
||
<!-- <view align="right" class="icon iconfont icon-liebiao" @click="toList"></view> -->
|
||
<view align="right" class="icon iconfont icon-scan" @click="toQRCode"></view>
|
||
<view align="right" class="icon iconfont icon-liebiao" @click="mqttshow = true"></view>
|
||
</view>
|
||
</template>
|
||
</custom-nav-bar>
|
||
<u-popup :show="mqttshow" mode="top" @close="mqttshow = false" @open="">
|
||
<view>
|
||
<button @click="mqttLink">mqttLink</button>
|
||
<button @click="mqttEnd">mqttEnd</button>
|
||
<button @click="mqttSubscribes">订阅</button>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- 内容 -->
|
||
<view class="content">
|
||
<!-- 顶部搜索框 -->
|
||
<view class="header-section">
|
||
<u-row justify="space-between" gutter="10">
|
||
<u-col span="8">
|
||
<u-search shape="square" :animation="true" :showAction="false" </u-search>
|
||
</u-col>
|
||
<u-col span="4">
|
||
<view class="demo-layout bg-purple-light">
|
||
<u-checkbox-group placement="row">
|
||
<u-checkbox :checked="false" :label="`工作(${dc.screen.watering})`"
|
||
labelColor="#ffffff"></u-checkbox>
|
||
</u-checkbox-group>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<view class="content-section">
|
||
<!-- 统计吸顶效果 -->
|
||
<view v-if="isSticky" class="grey-box ceiling"
|
||
:style="[isSticky ? 'position: sticky;':'','z-index: 10','top: 50px']">
|
||
<u-grid :border="false" col="4">
|
||
<u-grid-item :class="stateScreen.all" @click="valveStateScreen('all')">
|
||
<view class="flex">
|
||
<view class="iconfont icon-threshold"></view>
|
||
<u-badge numberType="overflow" type="success" max="999" :value="dc.screen.all" />
|
||
</view>
|
||
</u-grid-item>
|
||
<u-grid-item :class="stateScreen.online" @click="valveStateScreen('online')">
|
||
<view class="flex">
|
||
<view class="iconfont icon-jizhan"></view>
|
||
<u-badge numberType="overflow" type="success" max="999" :value="dc.screen.online" />
|
||
</view>
|
||
</u-grid-item>
|
||
<u-grid-item :class="stateScreen.offline" @click="valveStateScreen('offline')">
|
||
<view class="flex">
|
||
<view class="iconfont icon-lixian"></view>
|
||
<u-badge numberType="overflow" type="success" max="999" :value="dc.screen.offline" />
|
||
</view>
|
||
</u-grid-item>
|
||
<u-grid-item @click="showDeviceMap">
|
||
<view class="flex">
|
||
<view class="iconfont icon-shangqing"></view>
|
||
<u-badge numberType="overflow" type="success" max="999" :value="dc.screen.offline" />
|
||
</view>
|
||
</u-grid-item>
|
||
</u-grid>
|
||
</view>
|
||
<view v-else class="grey-box normal">
|
||
<u-grid :border="false" col="4">
|
||
<u-grid-item :class="stateScreen.all" @click="valveStateScreen('all')">
|
||
<view class="iconfont icon-threshold"></view>
|
||
<u-badge numberType="overflow" type="success" max="999" :value="dc.screen.all" />
|
||
<text class="text">总设备</text>
|
||
</u-grid-item>
|
||
<u-grid-item :class="stateScreen.online" @click="valveStateScreen('online')">
|
||
<view class="iconfont icon-jizhan"></view>
|
||
<u-badge numberType="overflow" type="success" max="999" :value="dc.screen.online" />
|
||
<text class="text">在线设备</text>
|
||
</u-grid-item>
|
||
<u-grid-item :class="stateScreen.offline" @click="valveStateScreen('offline')">
|
||
<view class="iconfont icon-lixian"></view>
|
||
<u-badge numberType="overflow" type="success" max="999" :value="dc.screen.offline" />
|
||
<text class="text">离线设备</text>
|
||
</u-grid-item>
|
||
<u-grid-item @click="showDeviceMap">
|
||
<view class="iconfont icon-shangqing"></view>
|
||
<u-badge numberType="overflow" type="success" max="999" :value="dc.screen.offline" />
|
||
<text class="text">土壤墒情</text>
|
||
</u-grid-item>
|
||
</u-grid>
|
||
</view>
|
||
<!-- 列表 -->
|
||
<view class="grey-box" style="border-radius: 0 0 15px 15px;">
|
||
<!-- 基站 -->
|
||
<view class="card">
|
||
<u-collapse accordion>
|
||
<u-collapse-item>
|
||
<template #title>
|
||
<view class="jz-title fixed">
|
||
<view style="width:30%;">
|
||
<view class="iconfont icon-plume icon" style="float: left;"></view>
|
||
<text>基站</text>
|
||
</view>
|
||
<view class="fixed" style="width:calc(100% - 30%); justify-content: flex-end;">
|
||
<view class="iconfont icon-xh icon" style="float: left;"
|
||
:class="[ mqttConnected ? 'font-green':'font-red' ]">
|
||
</view>
|
||
<view @click.stop="" style="margin-left: 5px;">
|
||
<u-button type="success" size="small" text="一键刷新" />
|
||
</view>
|
||
<view @click.stop="" style="margin-left: 5px;">
|
||
<u-button type="success" size="small" text="批量控制" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view class="u-collapse-content">
|
||
<u-row v-for="item in dc.stations">
|
||
<u-col span="3">
|
||
<view class="fixed">
|
||
<text
|
||
:class="[dc.dataObj[item.deviceCode]?.online ? 'font-green':'font-red']">●</text>
|
||
<view>{{ item.deviceCode }}</view>
|
||
</view>
|
||
</u-col>
|
||
<u-col span="4" style="align-items: center;">
|
||
<view class="fixed">
|
||
<custom-signal :online="dc.dataObj[item.deviceCode]?.online"
|
||
:isp="dc.dataObj[item.deviceCode]?.isp"
|
||
:value="dc.dataObj[item.deviceCode]?.rssi" />
|
||
|
||
<custom-battery :online="dc.dataObj[item.deviceCode]?.online"
|
||
:charging="dc.dataObj[item.deviceCode]?.charging"
|
||
:value="dc.dataObj[item.deviceCode]?.b" />
|
||
</view>
|
||
</u-col>
|
||
<u-col span="5">
|
||
<view class="fixed">
|
||
<u-button type="success" size="mini" text="手持基站"></u-button>
|
||
<u-button type="success" size="mini" text="刷新" icon="reload"></u-button>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
</u-collapse-item>
|
||
</u-collapse>
|
||
</view>
|
||
<!-- 阀门列表 -->
|
||
<view class="card">
|
||
<u-collapse ref="collapseRef" :accordion="false" :value="collapse" v-if="dc.wo.length">
|
||
<u-collapse-item v-for="(item,index) in dc.wo" :id="`collapseItem${index}`" :name="index"
|
||
class="collapseItem ">
|
||
<template #title>
|
||
<view class="sf-title fixed" @click.stop="handleCollapseClick($event,index)">
|
||
<view class="iconfont icon-diefa icon"></view>
|
||
<view class="text">{{ item.showName || item.branchCanalCode }}</view>
|
||
<view style="margin:0 10px;">出水口数量</view>
|
||
<u-badge numberType="overflow" type="info" showZero max="999"
|
||
:value="item.children.length" />
|
||
<u-loading-icon style="margin-left: 10px;"
|
||
:show="woloaded && woloaded[index].loading" />
|
||
</view>
|
||
</template>
|
||
<view class="u-collapse-content" v-if="woloaded && woloaded[index].loaded">
|
||
<!-- 蝶阀 -->
|
||
<u-row v-if="item.device && item.device.deviceTypeKey == 'butterflyValve'">
|
||
<u-col span="2">
|
||
<view class="fixed">
|
||
<text
|
||
:class="[dc.dataObj[item.dataKey]?.online ? 'font-green':'font-red']">●</text>
|
||
{{ item.showName }}
|
||
</view>
|
||
</u-col>
|
||
<u-col span="5" style="padding-left: 7px;">
|
||
<custom-battery :online="dc.dataObj[item.dataKey]?.online"
|
||
:charging="dc.dataObj[item.dataKey]?.charging"
|
||
:value="dc.dataObj[item.dataKey]?.b" />
|
||
</u-col>
|
||
<u-col span="5" style="align-items: flex-end;">
|
||
<u-switch v-model="value" @change="flapValveChange" size="20"
|
||
activeColor="#39ac4f"></u-switch>
|
||
</u-col>
|
||
</u-row>
|
||
|
||
<!-- 阀门 -->
|
||
<view v-for="child in item.children">
|
||
<view v-if="!child.isHidden">
|
||
<view v-if="child.id && child.device" class="card-grey">
|
||
<view class="card-title">
|
||
<u-row>
|
||
<u-col span="2">
|
||
<view>
|
||
<text
|
||
:class="[dc.dataObj[child.dataKey]?.online ? 'font-green':'font-red']">●</text>
|
||
{{ child.showName }}
|
||
</view>
|
||
</u-col>
|
||
<u-col span="5">
|
||
<view class="fixed">
|
||
<custom-battery :online="dc.dataObj[child.dataKey]?.online"
|
||
:charging="dc.dataObj[child.dataKey]?.adc.charging"
|
||
:value="dc.dataObj[child.dataKey]?.adc.b" />
|
||
<view>
|
||
<view class="iconfont icon-wendu icon"
|
||
style="float: left;margin-left: 5px;" />
|
||
{{ dc.dataObj[child.dataKey]?.adc.t}}
|
||
</view>
|
||
</view>
|
||
</u-col>
|
||
<u-col span="5" style="align-items: flex-end;">
|
||
<view class="fixed">
|
||
<u-button type="success" size="mini" text="刷新" icon="reload"
|
||
:loading="dc.dataObj[child.dataKey]?.refresh"
|
||
@click="dc.refreshDeviceItem(child.dataKey, child.device)" />
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<view class="control" v-if="dc.dataObj[child.dataKey]">
|
||
<u-row v-if="child.device.deviceTypeKey == 'valve'">
|
||
<u-col span="3" style="margin-top: -10px;">
|
||
<u-button :disabled="child.device.disable?.open1"
|
||
:type="dc.getBtnType(2, child.dataKey, 'open1')"
|
||
:plain="dc.dataObj[child.dataKey].btnObj.open1.work"
|
||
@click="dc.deviceControlHandle(child, 1)"> ①
|
||
<span v-if="dc.dataObj[child.dataKey].btnObj.open1.work">
|
||
<span v-if="dc.countdownObj[child.dataKey]">
|
||
({{ dc.countdownObj[child.dataKey] }})
|
||
</span>
|
||
<span v-else class="timeout">
|
||
{{ dc.timeoutObj[child.dataKey] }}
|
||
</span>
|
||
</span>
|
||
</u-button>
|
||
<u-line-progress height="8" :showText="false"
|
||
:percentage="dc.dataObj[child.dataKey].btnObj.open1.openAngle"
|
||
activeColor="#74ffd4" inactiveColor="#c7c7c7" />
|
||
</u-col>
|
||
<u-col span="6">
|
||
<view class="valve">
|
||
<view>
|
||
<u-button :disabled="child.device.disable?.open"
|
||
:type="dc.getBtnType(2, child.dataKey, 'open')"
|
||
:plain="dc.dataObj[child.dataKey].btnObj.open.work"
|
||
@click="dc.deviceControlHandle(child, 3)"> 全开
|
||
<span
|
||
v-if="dc.dataObj[child.dataKey].btnObj.open.work">
|
||
<span v-if="dc.countdownObj[child.dataKey]">
|
||
({{ dc.countdownObj[child.dataKey] }})
|
||
</span>
|
||
<span v-else class="timeout">
|
||
{{ dc.timeoutObj[child.dataKey] }}
|
||
</span>
|
||
</span>
|
||
</u-button>
|
||
</view>
|
||
<view class="btn-img">
|
||
<view class="text">
|
||
<view class="left">
|
||
{{ dc.dataObj[child.dataKey].adc.p[0] }}
|
||
</view>
|
||
<view class="top"></view>
|
||
<view class="middle"
|
||
v-show="!dc.dataObj[child.dataKey].online">
|
||
离线
|
||
</view>
|
||
<view class="right">
|
||
{{ dc.dataObj[child.dataKey].adc.p[1] }}
|
||
</view>
|
||
<view class="bottom"></view>
|
||
</view>
|
||
<image src="../static/images/valves/3/valve3.png"
|
||
mode="widthFix" />
|
||
</view>
|
||
<view>
|
||
<u-button :disabled="child.device.disable?.close"
|
||
:type="dc.getBtnType(2, child.dataKey, 'close')"
|
||
:plain="dc.dataObj[child.dataKey].btnObj.close.work"
|
||
@click="dc.deviceControlHandle(child, 4)"> 全关
|
||
<span
|
||
v-if="dc.dataObj[child.dataKey].btnObj.close.work">
|
||
<span v-if="dc.countdownObj[child.dataKey]">
|
||
({{ dc.countdownObj[child.dataKey] }})
|
||
</span>
|
||
<span v-else class="timeout">
|
||
{{ dc.timeoutObj[child.dataKey] }}
|
||
</span>
|
||
</span>
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
</u-col>
|
||
<u-col span="3" style="margin-top: -10px;">
|
||
<u-button :disabled="child.device.disable?.open2"
|
||
:type="dc.getBtnType(2, child.dataKey, 'open2')"
|
||
:plain="dc.dataObj[child.dataKey].btnObj.open2.work"
|
||
@click="dc.deviceControlHandle(child, 2)"> ②
|
||
<span v-if="dc.dataObj[child.dataKey].btnObj.open2.work">
|
||
<span v-if="dc.countdownObj[child.dataKey]">
|
||
({{ dc.countdownObj[child.dataKey] }})
|
||
</span>
|
||
<span v-else class="timeout">
|
||
{{ dc.timeoutObj[child.dataKey] }}
|
||
</span>
|
||
</span>
|
||
</u-button>
|
||
<u-line-progress height="8" :showText="false"
|
||
:percentage="dc.dataObj[child.dataKey].btnObj.open2.openAngle"
|
||
activeColor="#74ffd4" inactiveColor="#c7c7c7" />
|
||
</u-col>
|
||
</u-row>
|
||
<u-row v-else-if="child.device.deviceTypeKey == 'fiveValve'">
|
||
<u-col span="3" style="margin-top: 10px;">
|
||
<u-button :disabled="child.device.disable?.open1"
|
||
:type="dc.getBtnType(2, child.dataKey, 'open1')"
|
||
:plain="dc.dataObj[child.dataKey].btnObj.open1.work"
|
||
@click="dc.deviceControlHandle(child, 1)"> ①
|
||
<span v-if="dc.dataObj[child.dataKey].btnObj.open1.work">
|
||
<span v-if="dc.countdownObj[child.dataKey]">
|
||
({{ dc.countdownObj[child.dataKey] }})
|
||
</span>
|
||
<span v-else class="timeout">
|
||
{{ dc.timeoutObj[child.dataKey] }}
|
||
</span>
|
||
</span>
|
||
</u-button>
|
||
<u-line-progress height="8" :showText="false"
|
||
:percentage="dc.dataObj[child.dataKey].btnObj.open1.openAngle"
|
||
activeColor="#74ffd4" inactiveColor="#c7c7c7" />
|
||
</u-col>
|
||
<u-col span="6">
|
||
<view class="valve">
|
||
<view style="display: flow-root;">
|
||
<u-button :disabled="child.device.disable?.open2"
|
||
:type="dc.getBtnType(2, child.dataKey, 'open2')"
|
||
:plain="dc.dataObj[child.dataKey].btnObj.open2.work"
|
||
@click="dc.deviceControlHandle(child, 2)"> ②
|
||
<span
|
||
v-if="dc.dataObj[child.dataKey].btnObj.open2.work">
|
||
<span v-if="dc.countdownObj[child.dataKey]">
|
||
({{ dc.countdownObj[child.dataKey] }})
|
||
</span>
|
||
<span v-else class="timeout">
|
||
{{ dc.timeoutObj[child.dataKey] }}
|
||
</span>
|
||
</span>
|
||
</u-button>
|
||
<u-line-progress height="8" :showText="false"
|
||
:percentage="dc.dataObj[child.dataKey].btnObj.open2.openAngle"
|
||
activeColor="#74ffd4" inactiveColor="#c7c7c7" />
|
||
</view>
|
||
<view class="btn-img">
|
||
<view class="text5">
|
||
<view class="left">
|
||
{{ dc.dataObj[child.dataKey].adc.p[0] }}
|
||
</view>
|
||
<view class="top">
|
||
{{ dc.dataObj[child.dataKey].adc.p[1] }}
|
||
</view>
|
||
<view class="middle"
|
||
v-show="!dc.dataObj[child.dataKey].online">
|
||
离线
|
||
</view>
|
||
<view class="right">
|
||
{{ dc.dataObj[child.dataKey].adc.p[2] }}
|
||
</view>
|
||
<view class="bottom">
|
||
{{ dc.dataObj[child.dataKey].adc.p[3] }}
|
||
</view>
|
||
</view>
|
||
<image src="../static/images/valves/5/valve5.png"
|
||
mode="widthFix" />
|
||
</view>
|
||
<view style="display: flow-root;">
|
||
<u-button :disabled="child.device.disable?.open4"
|
||
:type="dc.getBtnType(2, child.dataKey, 'open4')"
|
||
:plain="dc.dataObj[child.dataKey].btnObj.open4.work"
|
||
@click="dc.deviceControlHandle(child, 4)"> ④
|
||
<span
|
||
v-if="dc.dataObj[child.dataKey].btnObj.open4.work">
|
||
<span v-if="dc.countdownObj[child.dataKey]">
|
||
({{ dc.countdownObj[child.dataKey] }})
|
||
</span>
|
||
<span v-else class="timeout"
|
||
style="color: red;">
|
||
{{ dc.timeoutObj[child.dataKey] }}
|
||
</span>
|
||
</span>
|
||
</u-button>
|
||
<u-line-progress height="8" :showText="false"
|
||
:percentage="dc.dataObj[child.dataKey].btnObj.open4.openAngle"
|
||
activeColor="#74ffd4" inactiveColor="#c7c7c7" />
|
||
</view>
|
||
</view>
|
||
</u-col>
|
||
<u-col span="3" style="margin-top: 10px;">
|
||
<u-button :disabled="child.device.disable?.open3"
|
||
:type="dc.getBtnType(2, child.dataKey, 'open3')"
|
||
:plain="dc.dataObj[child.dataKey].btnObj.open3.work"
|
||
@click="dc.deviceControlHandle(child, 3)"> ③
|
||
<span v-if="dc.dataObj[child.dataKey].btnObj.open3.work">
|
||
<span v-if="dc.countdownObj[child.dataKey]">
|
||
({{ dc.countdownObj[child.dataKey] }})
|
||
</span>
|
||
<span v-else class="timeout">
|
||
{{ dc.timeoutObj[child.dataKey] }}
|
||
</span>
|
||
</span>
|
||
</u-button>
|
||
<u-line-progress height="8" :showText="false"
|
||
:percentage="dc.dataObj[child.dataKey].btnObj.open3.openAngle"
|
||
activeColor="#74ffd4" inactiveColor="#c7c7c7" />
|
||
</u-col>
|
||
</u-row>
|
||
<u-row v-else>
|
||
未知的设备
|
||
</u-row>
|
||
<view class="font-red"
|
||
v-if="dc.dataObj[child.dataKey].warning && dc.dataObj[child.dataKey].warning.length">
|
||
<view class="iconfont icon-guzhang icon">
|
||
{{ dc.dataObj[child.dataKey].warning.toString() }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 无数据上报 -->
|
||
<view class="control" v-else>
|
||
<u-row
|
||
v-if="child.device.deviceTypeKey == 'valve' || child.device.deviceTypeKey == 'fiveValve'">
|
||
<u-col span="3"></u-col>
|
||
<u-col span="6">
|
||
<view class="valve">
|
||
<view class="btn-img">
|
||
<view class="text">
|
||
<view class="middle" style="width: 100%;">
|
||
无数据上报
|
||
</view>
|
||
</view>
|
||
<image src="../static/images/valves/3/valve3.png"
|
||
mode="widthFix" />
|
||
</view>
|
||
</view>
|
||
</u-col>
|
||
<u-col span="3"></u-col>
|
||
</u-row>
|
||
<u-row v-else>
|
||
未知的设备
|
||
</u-row>
|
||
</view>
|
||
|
||
<view class="control" v-if="false">
|
||
<!-- 三通阀 -->
|
||
<u-row
|
||
v-if="child.device.deviceTypeKey == 'valve' || child.device.deviceTypeKey == 'fiveValve'">
|
||
<u-col span="3" style=" align-items: flex-end;">
|
||
<view class="buttons">
|
||
<view class="btn v-btn fixed active ">
|
||
<text>①</text>
|
||
<text class="load-text">(999)</text>
|
||
<text class="load-text"
|
||
v-if="!item2.device.custom.btnPreload && item2.device.custom.btnState.closeAll.loading && item2.device.custom.ct.endS >= 0"
|
||
:class="item2.device.custom.ct.endS > 0 ? '' : 'loading-time-red'">
|
||
{{ item2.device.custom.ct.endS > 0 ? `(${item2.device.custom.ct.endS})` : "超时" }}
|
||
</text>
|
||
<view v-if="!item2.device.custom.btnControllable.open1"
|
||
class="iconfont icon-suoding icon">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-line-progress height="8" :showText="false" :percentage="60"
|
||
activeColor="#74ffd4" inactiveColor="#c7c7c7"
|
||
style="width: 75px;margin-top: 5px;">
|
||
</u-line-progress>
|
||
</u-col>
|
||
<u-col span="6">
|
||
<view class="valve">
|
||
<view>
|
||
<view class="btn v-btn2 fixed">
|
||
<text>全开</text>
|
||
<text class="load-text">(超时)</text>
|
||
<view
|
||
v-if="!item2.device.custom.btnControllable.openAll"
|
||
class="iconfont icon-suoding icon">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn-img">
|
||
<view class="text">
|
||
<view class="left">{{ item2.device.custom.p1 }}
|
||
</view>
|
||
<view class="top"></view>
|
||
<view class="middle"
|
||
v-show="!item2.device.custom.online">
|
||
{{ item2.device.custom.showMask.text }}
|
||
</view>
|
||
<view class="right">{{ item2.device.custom.p2 }}
|
||
</view>
|
||
<view class="bottom"></view>
|
||
</view>
|
||
<image :src="item2.device.custom.showImg"
|
||
mode="widthFix" />
|
||
</view>
|
||
<view>
|
||
<view class="btn v-btn2 fixed">
|
||
<text>全关</text>
|
||
<text class="load-text">(超时)</text>
|
||
<view
|
||
v-if="!item2.device.custom.btnControllable.closeAll"
|
||
class="iconfont icon-suoding icon">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-col>
|
||
<u-col span="3">
|
||
<view class="buttons">
|
||
<view class="btn v-btn fixed activeing">
|
||
<text>②</text>
|
||
<text class="load-text">(超时)</text>
|
||
<view v-if="!item2.device.custom.btnControllable.open2"
|
||
class="iconfont icon-suoding icon">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
<!-- 五通阀 -->
|
||
<u-row v-if="item2.device.deviceTypeId == 13">
|
||
<u-col span="3" style=" align-items: flex-end;">
|
||
<view class="buttons">
|
||
<view class="btn v-btn fixed active">
|
||
<text>①</text>
|
||
<text class="load-text">(超时)</text>
|
||
<view v-if="!item2.device.custom.btnControllable.open1"
|
||
class="iconfont icon-suoding icon">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-col>
|
||
<u-col span="6">
|
||
<view class="valve">
|
||
<view>
|
||
<view class="btn v-btn fixed">
|
||
<text>②</text>
|
||
<text class="load-text">(超时)</text>
|
||
<view
|
||
v-if="!item2.device.custom.btnControllable.open2"
|
||
class="iconfont icon-suoding icon">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn-img">
|
||
<view class="text5">
|
||
<view class="left">{{ item2.device.custom.p[0] }}
|
||
</view>
|
||
<view class="top">{{ item2.device.custom.p[1] }}
|
||
</view>
|
||
<view class="middle"
|
||
v-show="!item2.device.custom.online">
|
||
{{ item2.device.custom.showMask.text }}
|
||
</view>
|
||
<view class="right">{{ item2.device.custom.p[2] }}
|
||
</view>
|
||
<view class="bottom">{{ item2.device.custom.p[3] }}
|
||
</view>
|
||
</view>
|
||
<image :src="item2.device.custom.showImg"
|
||
mode="widthFix" />
|
||
</view>
|
||
<view>
|
||
<view class="btn v-btn fixed">
|
||
<text>④</text>
|
||
<text class="load-text">(超时)</text>
|
||
<view
|
||
v-if="!item2.device.custom.btnControllable.open4"
|
||
class="iconfont icon-suoding icon">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-col>
|
||
<u-col span="3">
|
||
<view class="buttons">
|
||
<view class="btn v-btn fixed">
|
||
<text>③</text>
|
||
<text class="load-text">(超时)</text>
|
||
<view v-if="!item2.device.custom.btnControllable.open3"
|
||
class="iconfont icon-suoding icon">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
<view class="font-red" v-if="item2.device.custom.showMask.show">
|
||
<view class="iconfont icon-guzhang icon">
|
||
{{item2.device.custom.showMask.text}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else class="card-grey">
|
||
{{ child.showName }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-collapse-item>
|
||
</u-collapse>
|
||
<u-empty mode="data" style="height: 50vh;" v-else />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 弹窗 -->
|
||
<view>
|
||
<!-- 地块选择 -->
|
||
<custom-select-land ref="landRef" :data="ijs.companys" :defaultSelect="ijs.land" @getLand="getLand"
|
||
@select="landChange" />
|
||
<!-- 角度 -->
|
||
<custom-angle-slider ref="refAngleSlider" mode="bottom" @close="" @confirm="swiperConfirm" />
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import store from "@/store"
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
user: store.state.user.user,
|
||
title: "",
|
||
ijs: getApp().ijs, // 首页公共js
|
||
dc: getApp().dc, // 设备控制公共代码
|
||
mqttshow: false, // h5端手动链接mqtt按钮显示
|
||
mqttConnected: false, // mqtt链接状态
|
||
isSticky: false, //吸顶状态
|
||
stateScreen: { // 吸顶筛选选中的项 值为 click
|
||
all: null,
|
||
online: null,
|
||
offline: null
|
||
},
|
||
collapse: [], // 折叠面板打开的item
|
||
woloaded: null, //已经加载过的wo数据
|
||
|
||
value: false,
|
||
|
||
}
|
||
},
|
||
onLoad() {
|
||
console.error("onLoad")
|
||
// 监听mqtt链接状态
|
||
uni.$off("mqtt-connected");
|
||
uni.$on("mqtt-connected", (e) => {
|
||
this.mqttConnected = e;
|
||
});
|
||
|
||
// this.ijs.initData(this.user.userId, (land, wo) => {
|
||
// getApp().getWoList(land, wo);
|
||
// });
|
||
// this.ijs.getWoList({
|
||
// id: 10,
|
||
// landName: "西安测试地块"
|
||
// });
|
||
},
|
||
onShow() {
|
||
this.title = this.ijs?.land?.landName || "田间";
|
||
|
||
// // 监听当前页面的加载状态
|
||
// uni.$off("index-showLoading");
|
||
// uni.$on("index-showLoading", (flg) => {
|
||
// if (flg) {
|
||
// uni.showLoading();
|
||
// } else {
|
||
// uni.hideLoading();
|
||
// }
|
||
// });
|
||
// 监听控制角度弹窗通知
|
||
uni.$off("open-angle-slider");
|
||
uni.$on("open-angle-slider", (e) => {
|
||
console.error("打开角度选择：", e)
|
||
this.$refs.refAngleSlider.show(e.title, e.extra, e.value, e.other);
|
||
});
|
||
},
|
||
onHide() {
|
||
uni.$off("index-showLoading");
|
||
uni.$off("open-angle-slider");
|
||
},
|
||
onPageScroll(e) { // 页面滚动触发事件的处理函数
|
||
// console.log(e.scrollTop); // 输出滚动位置的垂直距离
|
||
if (e.scrollTop >= 75) {
|
||
this.isSticky = true;
|
||
} else {
|
||
this.isSticky = false;
|
||
}
|
||
},
|
||
methods: {
|
||
mqttLink() {
|
||
getApp().mqttLink(this.user.userId);
|
||
},
|
||
mqttEnd() {
|
||
getApp().mqttEnd();
|
||
},
|
||
mqttSubscribes() {
|
||
getApp().mqttSubscribes();
|
||
},
|
||
// 地块选择回调
|
||
landChange(e) {
|
||
this.title = e.landName;
|
||
},
|
||
// 获取地块信息
|
||
getLand(e) {
|
||
this.ijs.getLand(e.node).then(res => {
|
||
console.error("res：", res)
|
||
this.$refs.landRef.addLand(e, res.data);
|
||
});
|
||
},
|
||
//去扫码
|
||
toQRCode() {},
|
||
|
||
|
||
// 阀门状态筛选
|
||
valveStateScreen(type) {
|
||
if (this.stateScreen[type] == 'click') {
|
||
type = "";
|
||
}
|
||
this.dc.showType(type);
|
||
for (var key in this.stateScreen) {
|
||
if (key == type) {
|
||
this.stateScreen[key] = 'click';
|
||
} else {
|
||
this.stateScreen[key] = null;
|
||
}
|
||
}
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
this.$refs.collapseRef.init();
|
||
}, 500);
|
||
|
||
})
|
||
},
|
||
// 显示墒情
|
||
showDeviceMap() {},
|
||
|
||
|
||
|
||
//蝶阀按钮切换
|
||
flapValveChange(e) {
|
||
console.error('flapValveChange', e);
|
||
},
|
||
// 角度控制回调
|
||
swiperConfirm(e) {
|
||
getApp().dc.buildCommand(e.item, e.index, e.value, e.other);
|
||
},
|
||
// 折叠面板点击
|
||
handleCollapseClick(e, index) {
|
||
if (this.woloaded && this.woloaded[index].loading) {
|
||
return;
|
||
}
|
||
if (this.collapse.includes(index)) {
|
||
this.handleCollapseClose(index);
|
||
return;
|
||
}
|
||
this.handleCollapseOpen(index);
|
||
},
|
||
// 折叠面板打开
|
||
handleCollapseOpen(e) {
|
||
if (!this.woloaded || !this.woloaded[e]) {
|
||
let woloaded = {};
|
||
this.dc.wo.forEach((_item, _index) => {
|
||
woloaded[_index] = {
|
||
loading: false,
|
||
loaded: false,
|
||
time: _item.children.length * 50
|
||
}
|
||
});
|
||
this.woloaded = woloaded;
|
||
}
|
||
uni.showLoading();
|
||
if (!this.woloaded[e].loaded) {
|
||
this.woloaded[e].loading = true;
|
||
this.woloaded[e].loaded = true;
|
||
}
|
||
this.collapse.push(e);
|
||
this.$nextTick(() => {
|
||
let time = 100 * this.dc.wo[e].c
|
||
setTimeout(() => {
|
||
this.$refs.collapseRef.init();
|
||
uni.hideLoading();
|
||
if (this.woloaded[e].loading) {
|
||
this.woloaded[e].loading = false;
|
||
}
|
||
this.scrollToCollapseItem(e);
|
||
}, this.woloaded[e].time);
|
||
});
|
||
},
|
||
// 折叠面板关闭
|
||
handleCollapseClose(e) {
|
||
const collapse = this.collapse.filter(item => item !== e);
|
||
this.collapse = collapse;
|
||
},
|
||
// 折叠面板跳转指定位置
|
||
scrollToCollapseItem(index) {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query.selectAll(`.collapseItem`)
|
||
.boundingClientRect((data) => {
|
||
let offsetTop = 110;
|
||
data.every((_item, _index) => {
|
||
if (index == 0) {
|
||
return false; // 跳出循环
|
||
} else {
|
||
offsetTop = offsetTop + Math.ceil(_item.height);
|
||
if (_index == index) {
|
||
offsetTop = offsetTop - 50;
|
||
return false; // 跳出循环
|
||
}
|
||
return true; // 继续下一次迭代
|
||
}
|
||
});
|
||
uni.pageScrollTo({
|
||
scrollTop: offsetTop,
|
||
duration: 50 // 滚动动画持续时间
|
||
});
|
||
})
|
||
.exec();
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// .content {
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// align-items: center;
|
||
// justify-content: center;
|
||
// }
|
||
page {
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
// 箭头隐藏
|
||
::v-deep.u-cell__right-icon-wrap {
|
||
display: none;
|
||
}
|
||
|
||
// nav
|
||
::v-deep.uni-navbar__header-container {
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&>view {
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
|
||
::v-deep.uni-navbar__header-btns-left {
|
||
font-size: 27rpx;
|
||
}
|
||
|
||
::v-deep.uni-navbar__header-btns-right .icon {
|
||
font-size: 44rpx;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.header-section {
|
||
padding: 0px 10px 102px 10px;
|
||
background-color: #39ac4f;
|
||
color: white;
|
||
border-radius: 0 0 30px 30px;
|
||
|
||
::v-deep.u-search__content,
|
||
::v-deep.u-search__content__input {
|
||
background-color: white !important;
|
||
border-radius: 8px !important;
|
||
|
||
.u-icon__icon {
|
||
color: #39ac4f !important;
|
||
}
|
||
}
|
||
|
||
// 复选框
|
||
::v-deep .u-checkbox__icon-wrap {
|
||
background-color: transparent !important;
|
||
border-color: #ffffff !important;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
background-color: #fff;
|
||
min-height: 100%;
|
||
}
|
||
|
||
::v-deep.u-search__action {
|
||
display: none;
|
||
}
|
||
|
||
.content-section {
|
||
position: relative;
|
||
top: -92px;
|
||
|
||
|
||
|
||
.grey-box.normal {
|
||
border-radius: 15px 15px 0 0;
|
||
padding-bottom: 0;
|
||
|
||
.u-grid {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.grey-box.ceiling {
|
||
border-radius: 0;
|
||
padding-bottom: 0px;
|
||
margin: 0;
|
||
box-shadow: 0 1px 9px rgba(209, 209, 209, 0.5);
|
||
|
||
.u-grid {
|
||
padding-bottom: 10px;
|
||
|
||
.u-grid-item {
|
||
padding-bottom: 5px;
|
||
box-shadow: none;
|
||
|
||
.flex {
|
||
&>view {
|
||
margin: -2px 5px 0 0;
|
||
color: #39ac4f;
|
||
font-size: 50rpx;
|
||
}
|
||
|
||
::v-deep.u-badge {
|
||
position: relative;
|
||
right: auto;
|
||
top: auto;
|
||
height: 10px;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.click {
|
||
|
||
.flex {
|
||
&>view {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.grey-box {
|
||
background-color: #f3f3f3;
|
||
margin: 0 10px;
|
||
border-radius: 15px;
|
||
padding: 10px 5px;
|
||
|
||
.u-grid {
|
||
margin-bottom: 10px;
|
||
|
||
.u-grid-item {
|
||
margin: auto 5px;
|
||
width: calc(25% - 10px) !important;
|
||
background-color: #ffffff !important;
|
||
padding: 10px 0;
|
||
border-radius: 10px;
|
||
box-shadow: 0 1px 9px rgb(209, 209, 209, 0.5);
|
||
|
||
&>view {
|
||
color: #39ac4f;
|
||
font-size: 60rpx;
|
||
}
|
||
|
||
&>.text {
|
||
color: #999999;
|
||
display: block;
|
||
font-size: 28rpx;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
::v-deep.u-badge {
|
||
position: absolute;
|
||
right: 3px;
|
||
top: 3px;
|
||
}
|
||
|
||
}
|
||
|
||
.click {
|
||
background-color: #39ac4f !important;
|
||
|
||
&>view {
|
||
color: #fff;
|
||
}
|
||
|
||
&>.text {
|
||
color: #fff;
|
||
}
|
||
|
||
::v-deep.u-badge {
|
||
background-color: #ffffff !important;
|
||
color: #39ac4f;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.card {
|
||
|
||
::v-deep.u-cell__body {
|
||
padding: 10px;
|
||
}
|
||
|
||
::v-deep.u-collapse-item__content__text {
|
||
padding: 10px 10px 0;
|
||
|
||
.u-collapse-content {
|
||
.u-row {
|
||
margin-bottom: 1px;
|
||
}
|
||
|
||
.btn.v-btn {
|
||
width: 80px;
|
||
}
|
||
|
||
.btn.v-btn2 {
|
||
font-size: 12px;
|
||
width: 90px;
|
||
}
|
||
|
||
.buttons .load-text {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.jz-title {
|
||
.icon {
|
||
vertical-align: top;
|
||
margin-right: 5px;
|
||
font-size: 44rpx;
|
||
color: #39ac4f;
|
||
}
|
||
|
||
text {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
// .icon-xh.xh_green {
|
||
// color: #39ac4f
|
||
// }
|
||
|
||
// .icon-xh.xh_red {
|
||
// color: #e60012
|
||
// }
|
||
}
|
||
|
||
.sf-title {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
|
||
.text {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.icon {
|
||
vertical-align: top;
|
||
margin-right: 5px;
|
||
font-size: 44rpx;
|
||
color: #39ac4f;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
// // 信号
|
||
// .signal {
|
||
// position: relative;
|
||
// display: flex;
|
||
// align-items: flex-end;
|
||
// height: 17px;
|
||
|
||
// .bar {
|
||
// width: 2px;
|
||
// background-color: #999;
|
||
// border-radius: 2px;
|
||
// margin-right: 2px;
|
||
// }
|
||
|
||
// .bar:nth-child(1) {
|
||
// height: 4px;
|
||
// }
|
||
|
||
// .bar:nth-child(2) {
|
||
// height: 7px;
|
||
|
||
// }
|
||
|
||
// .bar:nth-child(3) {
|
||
// height: 10px;
|
||
|
||
// }
|
||
|
||
// .bar:nth-child(4) {
|
||
// height: 13px;
|
||
|
||
// }
|
||
|
||
// .bar:nth-child(5) {
|
||
// height: 16px;
|
||
|
||
// }
|
||
|
||
// .bar.red {
|
||
// background-color: #e60012;
|
||
// }
|
||
|
||
// .bar.orange {
|
||
// background-color: #ffa200;
|
||
// }
|
||
|
||
// .bar.green {
|
||
// background-color: #39ac4f;
|
||
// }
|
||
|
||
// .bar-no {
|
||
// position: absolute;
|
||
// left: -2px;
|
||
// bottom: 3px;
|
||
|
||
// ::v-deep.u-icon__icon {
|
||
// font-weight: bold;
|
||
// font-size: 18rpx !important;
|
||
// }
|
||
// }
|
||
// }
|
||
|
||
// // 电池
|
||
// .battery-container {
|
||
// margin: 0 0 0 10px;
|
||
// position: relative;
|
||
// width: 31px;
|
||
// height: 16px;
|
||
// line-height: 14px;
|
||
// background-color: #fff;
|
||
// border-radius: 3px;
|
||
// border: 1px solid #333;
|
||
// text-align: center;
|
||
|
||
// text {
|
||
// position: relative;
|
||
// z-index: 2;
|
||
// }
|
||
// }
|
||
|
||
// .battery-container::after {
|
||
// content: "";
|
||
// position: absolute;
|
||
// top: 4px;
|
||
// right: -2px;
|
||
// width: 1px;
|
||
// height: 5px;
|
||
// background-color: #333;
|
||
// border-radius: 4px;
|
||
// }
|
||
|
||
// .battery-level {
|
||
// height: 12px;
|
||
// position: absolute;
|
||
// top: 1px;
|
||
// bottom: 0;
|
||
// left: 1px;
|
||
// width: 90%;
|
||
// max-width: 90%;
|
||
// background-color: #4CAF50;
|
||
// border-radius: 2px;
|
||
// transition: width 0.5s;
|
||
// }
|
||
|
||
.font-green {
|
||
color: #39ac4f !important;
|
||
}
|
||
|
||
.font-red {
|
||
color: #e60012 !important;
|
||
}
|
||
|
||
/* 首页阀门列表 */
|
||
.control {
|
||
padding: 5px 1px;
|
||
|
||
.u-button {
|
||
min-width: 77px;
|
||
}
|
||
|
||
.u-line-progress {
|
||
min-width: 77px;
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
|
||
.valve {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.timeout {
|
||
color: red !important;
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
|
||
.valve>view {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.valve .btn-img {
|
||
width: 130px;
|
||
margin: 3px;
|
||
position: relative;
|
||
}
|
||
|
||
.valve .btn-img .text,
|
||
.valve .btn-img .text5 {
|
||
position: absolute;
|
||
z-index: 2;
|
||
width: -webkit-fill-available;
|
||
height: -webkit-fill-available;
|
||
}
|
||
|
||
.valve .btn-img .text>view,
|
||
.valve .btn-img .text5>view {
|
||
position: absolute;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.valve .btn-img .text .left,
|
||
.valve .btn-img .text5 .left {
|
||
left: 0;
|
||
top: 24%;
|
||
}
|
||
|
||
.valve .btn-img .text5 .left {
|
||
top: 41%;
|
||
}
|
||
|
||
.valve .btn-img .text .top,
|
||
.valve .btn-img .text5 .top {
|
||
top: -12px;
|
||
left: 33%;
|
||
}
|
||
|
||
.valve .btn-img .text5 .top {
|
||
top: 0px;
|
||
}
|
||
|
||
.valve .btn-img .text .middle,
|
||
.valve .btn-img .text5 .middle {
|
||
font-size: 18px;
|
||
top: 36%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
color: #e60012;
|
||
text-align: center;
|
||
}
|
||
|
||
.valve .btn-img .text5 .middle {
|
||
top: 50%;
|
||
}
|
||
|
||
.valve .btn-img .text .right,
|
||
.valve .btn-img .text5 .right {
|
||
right: 0;
|
||
top: 24%;
|
||
}
|
||
|
||
.valve .btn-img .text5 .right {
|
||
top: 41%;
|
||
}
|
||
|
||
.valve .btn-img .text .bottom,
|
||
.valve .btn-img .text5 .bottom {
|
||
bottom: -4px;
|
||
left: 33%;
|
||
}
|
||
|
||
.valve .btn-img .text5 .bottom {
|
||
bottom: 0px;
|
||
}
|
||
</style> |