、
This commit is contained in:
王丹
parent
4a384332dc
commit
5532188eb0
383
pages/index.vue
383
pages/index.vue
@ -24,20 +24,30 @@
|
||||
<view class="content">
|
||||
<!-- 顶部搜索框 -->
|
||||
<view class="header-section">
|
||||
<u-row justify="space-between" gutter="10">
|
||||
<!-- <u-row justify="space-between" gutter="10">
|
||||
<u-col span="8">
|
||||
<u-search shape="square" :animation="true" :showAction="true" v-model="screenValue"
|
||||
@search="handleKeyup" @clear="handleKeyup" />
|
||||
</u-col>
|
||||
<u-col span="4">
|
||||
<view class="demo-layout bg-purple-light">
|
||||
<u-checkbox-group placement="row">
|
||||
<u-checkbox :checked="dc.forward" :label="`工作(${dc.screen.watering})`" labelColor="#ffffff"
|
||||
@change="forwardChange" />
|
||||
</u-checkbox-group>
|
||||
</view>
|
||||
<u-col span="4" style="align-items: end;">
|
||||
<u-checkbox-group placement="row">
|
||||
<u-checkbox :checked="dc.forward" :label="`工作(${dc.screen.watering})`" labelColor="#ffffff"
|
||||
@change="forwardChange" />
|
||||
</u-checkbox-group>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</u-row> -->
|
||||
<view class="search">
|
||||
<view class="search-l">
|
||||
<u-search shape="square" :animation="true" :showAction="true" v-model="screenValue"
|
||||
@search="handleKeyup" @clear="handleKeyup" />
|
||||
</view>
|
||||
<view class="search-r">
|
||||
<u-checkbox-group placement="row">
|
||||
<u-checkbox :checked="dc.forward" :label="`工作(${dc.screen.watering})`" labelColor="#ffffff"
|
||||
@change="forwardChange" />
|
||||
</u-checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-section">
|
||||
<!-- 统计吸顶效果 -->
|
||||
@ -448,7 +458,7 @@
|
||||
<u-row v-else>
|
||||
未知的设备
|
||||
</u-row>
|
||||
<view class="font-red"
|
||||
<view class="tips 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() }}
|
||||
@ -479,156 +489,6 @@
|
||||
未知的设备
|
||||
</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 }}
|
||||
@ -871,7 +731,7 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
// nav
|
||||
// 顶部nav
|
||||
::v-deep.uni-navbar__header-container {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -890,27 +750,40 @@
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
// 搜索框
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
.search-l {flex:1; margin-right: 20px;
|
||||
::v-deep.u-search__action {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
// ::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;
|
||||
}
|
||||
}
|
||||
// .u-icon__icon {
|
||||
// color: #39ac4f !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
// 复选框
|
||||
::v-deep .u-checkbox__icon-wrap {
|
||||
background-color: transparent !important;
|
||||
border-color: #ffffff !important;
|
||||
}
|
||||
// ::v-deep .u-checkbox__icon-wrap {
|
||||
// background-color: transparent !important;
|
||||
// border-color: #ffffff !important;
|
||||
// }
|
||||
}
|
||||
|
||||
.content {
|
||||
@ -1039,34 +912,16 @@
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep.uni-collapse {
|
||||
padding: 0 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
// 基站列表title
|
||||
.jz-title {
|
||||
padding: 10px 0;
|
||||
|
||||
.icon {
|
||||
vertical-align: top;
|
||||
margin-right: 5px;
|
||||
@ -1087,9 +942,31 @@
|
||||
// }
|
||||
}
|
||||
|
||||
.u-collapse-content {
|
||||
.u-row {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
// 水阀按钮
|
||||
// .btn.v-btn {
|
||||
// width: 80px;
|
||||
// }
|
||||
|
||||
// .btn.v-btn2 {
|
||||
// font-size: 12px;
|
||||
// width: 90px;
|
||||
// }
|
||||
|
||||
// .buttons .load-text {
|
||||
// font-size: 12px;
|
||||
// }
|
||||
}
|
||||
|
||||
// 水阀列表title
|
||||
.sf-title {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
padding: 10px 0;
|
||||
|
||||
.text {
|
||||
font-size: 32rpx;
|
||||
@ -1105,111 +982,9 @@
|
||||
}
|
||||
|
||||
}
|
||||
.card-grey .card-title {padding-bottom: 0;}
|
||||
}
|
||||
|
||||
// // 信号
|
||||
// .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;
|
||||
@ -1224,6 +999,7 @@
|
||||
padding: 5px 1px;
|
||||
|
||||
.u-button {
|
||||
width: 100% !important;
|
||||
min-width: 77px;
|
||||
}
|
||||
|
||||
@ -1233,6 +1009,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 12rpx;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.valve {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -42,15 +42,6 @@
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* 卡片线 */
|
||||
.u-collapse>.u-line {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* 列表 */
|
||||
.u-collapse-item>.u-line {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
/* fixed */
|
||||
.fixed {
|
||||
@ -122,93 +113,3 @@
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* 首页阀门列表 */
|
||||
/* .control {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.valve {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.valve>view {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.valve .btn-img {
|
||||
width: 130px;
|
||||
margin: 10px;
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
} */
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user