190 lines
12 KiB
Plaintext
190 lines
12 KiB
Plaintext
<!--pages/water_filter/water_filter.wxml-->
|
|
<!-- 人人爱净水页面 -->
|
|
<view class="water-filter">
|
|
<view class="top" style="background-image: url('https://wechat-img-file.oss-cn-beijing.aliyuncs.com/water_filter/Group_401.png?v1'); background-size: 100% 100%; height: 698rpx; width: 100%;">
|
|
<!-- 位置定位 -->
|
|
<view class="positioning">
|
|
<view class="positioning-left">
|
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/water_filter/Group 38.png" mode="" class="positioning-icon-left" />
|
|
<text class="positioning-text">{{currentDevice.region + currentDevice.address}}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 净化前后数值 -->
|
|
<view class="purification-value">
|
|
<view class="purification-value-left">
|
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/water_filter/Group_420.png?v1" mode="" class="purification-value-icon" />
|
|
<view class="purification-value-text">
|
|
<text class="front puri-text">净化前</text>
|
|
<text class="tds puri-text">水质TDS值</text>
|
|
<text class="tds-value puri-text">{{currentDevice.raw_water_value}}</text>
|
|
<text class="ppm puri-text">PPM</text>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="purification-value-left purification-value-right">
|
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/water_filter/Group_420.png?v1" mode="" class="purification-value-icon" />
|
|
<view class="purification-value-text">
|
|
<text class="front puri-text">净化后</text>
|
|
<text class="tds puri-text">水质TDS值</text>
|
|
<text class="tds-value puri-text">{{currentDevice.purification_water_value}}</text>
|
|
<text class="ppm puri-text">PPM</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 净化前后水质 -->
|
|
<view class="water-quality">
|
|
<view class="water-quality-left">
|
|
<text class="water-quality-text" wx:if="{{ currentDevice.raw_water_value < 20 }}">净化前水质：极好</text>
|
|
<text class="water-quality-text" wx:if="{{currentDevice.raw_water_value >= 20 && currentDevice.raw_water_value < 50 }}">净化前水质：良好</text>
|
|
<text class="water-quality-text" wx:if="{{ currentDevice.raw_water_value >= 50 && currentDevice.raw_water_value < 150 }}">净化前水质：正常</text>
|
|
<text class="water-quality-text" wx:if="{{currentDevice.raw_water_value >= 150 && currentDevice.raw_water_value < 300 }}">净化前水质：较差</text>
|
|
<text class="water-quality-text" wx:if="{{ currentDevice.raw_water_value >= 300 }}">净化前水质：极差</text>
|
|
</view>
|
|
<view class="water-quality-right water-quality-left" style="margin-left: 60rpx;">
|
|
<text class="water-quality-text" wx:if="{{ currentDevice.purification_water_value < 20 }}">净化后水质：极好</text>
|
|
<text class="water-quality-text" wx:if="{{currentDevice.purification_water_value >= 20 && currentDevice.purification_water_value < 50 }}">净化后水质：良好</text>
|
|
<text class="water-quality-text" wx:if="{{ currentDevice.purification_water_value >= 50 && currentDevice.purification_water_value < 150 }}">净化后水质：正常</text>
|
|
<text class="water-quality-text" wx:if="{{currentDevice.purification_water_value >= 150 && currentDevice.purification_water_value < 300 }}">净化后水质：较差</text>
|
|
<text class="water-quality-text" wx:if="{{ currentDevice.purification_water_value >= 300 }}">净化后水质：极差</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view>
|
|
<!-- 我的设备信息 -->
|
|
<view class="my-device">
|
|
<!-- <text class="mydevice text-color">我的设备</text> -->
|
|
<view class="device-info">
|
|
<text class="mydevice text-color">我的设备</text>
|
|
<view class="info-top">
|
|
<view class="device-name">{{currentDevice.product_name}}</view>
|
|
|
|
<view class="device-state">
|
|
|
|
<image wx:if="{{currentDevice.sevice_status != 1}}" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/water_filter/Group_405.png?v1" mode="" class="switch-icon" />
|
|
<image wx:if="{{currentDevice.sevice_status == 1}}" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/openBtn.png" mode="" class="switch-icon" />
|
|
|
|
<text class="switch-text text-color text-size" bind:tap="openOff" wx:if="{{currentDevice.sevice_status == '1'}}">开机</text>
|
|
<text class="switch-text text-color text-size" bind:tap="openOff" wx:if="{{currentDevice.sevice_status == '2'}}">关机</text>
|
|
<text class="switch-text text-color text-size" wx:if="{{currentDevice.sevice_status == '3'}}">制水故障</text>
|
|
<text class="switch-text text-color text-size" wx:if="{{currentDevice.sevice_status == '4'}}">漏水故障</text>
|
|
<text class="switch-text text-color text-size" wx:if="{{currentDevice.sevice_status == '5'}}">主板故障</text>
|
|
|
|
|
|
<image wx:if="{{currentDevice.network_status != '1'}}" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/water_filter/mdicon3.png" mode="" class="wifi-icon" />
|
|
<image wx:if="{{currentDevice.network_status == '1'}}" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/water_filter/mdicon4.png" mode="" class="wifi-icon" />
|
|
<text class="wifi-text text-color text-size">{{currentDevice.network_status == '1'?'在线':'离线'}}</text>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="info-bottom">
|
|
<view class="device-id text-size">
|
|
编号：{{currentDevice.device_code}}
|
|
</view>
|
|
<view class="service-day text-size text-color" wx:if="{{currentDevice.expiration_duration}}">
|
|
已服务<span class="day-num">{{currentDevice.difDay}}</span><span class="day text-size">天</span>
|
|
</view>
|
|
|
|
<view class="service-day text-size text-color" wx:if="{{!currentDevice.expiration_duration}}">
|
|
已服务<span class="day-num">0</span><span class="day text-size">天</span>
|
|
</view>
|
|
|
|
|
|
<view wx:if="{{currentDevice.expiration_duration}}">
|
|
<view class="service-day text-size text-color" wx:if="{{currentDevice.status != 8}}">
|
|
剩余天数
|
|
<span class="day-num2">{{ currentDevice.remainDay}}</span>
|
|
<span class="day text-size">天</span>
|
|
</view>
|
|
|
|
<view class="service-day text-size text-color" wx:if="{{ currentDevice.status == 8}}">
|
|
<span class="day text-size">已欠费</span>
|
|
</view>
|
|
</view>
|
|
|
|
<view wx:if="{{!currentDevice.expiration_duration}}">
|
|
<view class="service-day text-size text-color" wx:if="{{ currentDevice.status != 1 && currentDevice.status != 8}}">
|
|
剩余天数
|
|
<span class="day-num2">0</span>
|
|
<span class="day text-size">天</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<van-divider />
|
|
</view>
|
|
|
|
<!-- 滤芯寿命 -->
|
|
<view class="lifetime">
|
|
<view class="lifetime-title">滤芯寿命</view>
|
|
<view class="lifetime-prompt">滤芯寿命用水量和使用时间来综合计算</view>
|
|
|
|
<view>
|
|
<view wx:for="{{currentDevice.parts}}" wx:key="index">
|
|
<view class="progress-name">{{item.parts_name}}</view>
|
|
<view class="lifetime-progress">
|
|
<view style="display: flex;flex: 1;" wx:if="{{currentDevice.billing_method == 1}}">
|
|
<van-progress style="width: 100%;" percentage="{{item.percentageDay}}" color="linear-gradient(to right, #FFBBAC, #338BFF)" stroke-width="10" show-pivot="{{false}}" track-color="#F1F1F1" />
|
|
<text class="progress">{{item.percentageDay}}%</text>
|
|
</view>
|
|
<view style="display: flex;flex: 1;" wx:if="{{currentDevice.billing_method == 2}}">
|
|
<van-progress style="width: 100%;" percentage="{{item.percentageCapacity}}" color="linear-gradient(to right, #FFBBAC, #338BFF)" stroke-width="10" show-pivot="{{false}}" track-color="#F1F1F1" />
|
|
<text class="progress">{{item.percentageCapacity}}%</text>
|
|
</view>
|
|
|
|
<view style="display: flex;flex: 1;" wx:if="{{currentDevice.billing_method == 3}}">
|
|
<van-progress style="width: 100%;" percentage="{{item.percentageDay}}" color="linear-gradient(to right, #FFBBAC, #338BFF)" stroke-width="10" show-pivot="{{false}}" track-color="#F1F1F1" />
|
|
<text class="progress">{{item.percentageDay}}%</text>
|
|
</view>
|
|
|
|
|
|
<view class="replayBtn" bind:tap="replay" data-item="{{item}}" wx:if="{{currentDevice.billing_method != 3}}">
|
|
重置
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- 用水量 -->
|
|
<view class="water-consumption">
|
|
<view class="water-consumption-title">用水量</view>
|
|
<!-- 用水量统计 -->
|
|
|
|
<view class="water-consumption-row">
|
|
<view class="water-consumption-col">
|
|
<view class="water-consumption-col-name">累计用水量</view>
|
|
<view class="water-consumption-col-num">{{currentDevice.cumulative_filtration_flow}}<span class="water-consumption-col-num-size">L</span></view>
|
|
</view>
|
|
<view class="water-consumption-col col2">
|
|
<view class="water-consumption-col-name">今日用水量</view>
|
|
<view class="water-consumption-col-num">{{currentDevice.today}}<span class="water-consumption-col-num-size">L</span></view>
|
|
</view>
|
|
<view class="water-consumption-col col3">
|
|
<view class="water-consumption-col-name">昨日用水量</view>
|
|
<view class="water-consumption-col-num">{{currentDevice.yesterday}}<span class="water-consumption-col-num-size">L</span></view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 用水量柱状图 -->
|
|
<view class="container">
|
|
<ec-canvas id="mychart-dom-bar" canvasId="mychart-dom-bar" type="2d" ec="{{ ec }}" ec="{{ ec }}"></ec-canvas>
|
|
<image src="{{imagePath}}" style="width: 100%;height:600rpx;"></image>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
<view class="deleteBtn" bind:tap="deleteDevice" wx:if="{{currentDevice.status == 1 || currentDevice.status == 3 || currentDevice.status == 5 || currentDevice.status == 6 || currentDevice.status == 8}}">
|
|
拆机
|
|
</view>
|
|
|
|
|
|
<van-popup show="{{ show }}" safe-area-inset-bottom lock-scroll bind:close="onClose" round close-on-click-overlay position="bottom">
|
|
<van-datetime-picker bind:cancel="onClose" formatter="{{ formatter }}" type="datetime" min-date="{{ minDate }}" bind:confirm="onInput" />
|
|
</van-popup> |