420 lines
9.2 KiB
Vue
420 lines
9.2 KiB
Vue
<template>
|
|
<view class="content">
|
|
<custom-select-land ref="refLand" :data="landList" @select=""></custom-select-land>
|
|
<view class="header-section">
|
|
<view class="title">
|
|
<u-row>
|
|
<u-col span="3">
|
|
<view @click="openLand">选择地块</view>
|
|
</u-col>
|
|
<u-col span="6" align="center">
|
|
<text>西安设备测试</text>
|
|
</u-col>
|
|
<u-col span="3">
|
|
<view class="fixed">
|
|
<view align="right" class="iconfont icon-liebiao icon"></view>
|
|
<view align="right" class="iconfont icon-scan icon"></view>
|
|
</view>
|
|
</u-col>
|
|
</u-row>
|
|
</view>
|
|
<u-row justify="space-between" gutter="10">
|
|
<u-col span="9">
|
|
<u-search shape="square" :animation="true" :showAction="false"></u-search>
|
|
</u-col>
|
|
<u-col span="3">
|
|
<view class="demo-layout bg-purple-light">
|
|
<u-checkbox-group placement="row">
|
|
<u-checkbox :checked="false" label="工作(256)" labelColor="#ffffff"></u-checkbox>
|
|
</u-checkbox-group>
|
|
</view>
|
|
</u-col>
|
|
</u-row>
|
|
</view>
|
|
<view class="content-section">
|
|
<view class="grey-box">
|
|
<u-grid :border="false" col="4">
|
|
<u-grid-item class="click">
|
|
<view class="iconfont icon-threshold"></view>
|
|
<u-badge numberType="overflow" type="success" max="999" value="155"></u-badge>
|
|
<text class="text">总设备</text>
|
|
</u-grid-item>
|
|
<u-grid-item>
|
|
<view class="iconfont icon-jizhan"></view>
|
|
<u-badge numberType="overflow" type="success" max="999" value="15"></u-badge>
|
|
<text class="text">在线设备</text>
|
|
</u-grid-item>
|
|
<u-grid-item>
|
|
<view class="iconfont icon-lixian"></view>
|
|
<u-badge numberType="overflow" type="success" max="999" value="15"></u-badge>
|
|
<text class="text">离线设备</text>
|
|
</u-grid-item>
|
|
<u-grid-item>
|
|
<view class="iconfont icon-shangqing"></view>
|
|
<u-badge numberType="overflow" type="success" max="999" value="15"></u-badge>
|
|
<text class="text">土壤墒情</text>
|
|
</u-grid-item>
|
|
</u-grid>
|
|
<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"></view>
|
|
<text>基站</text>
|
|
</view>
|
|
<view class="fixed" style="width:calc(100% - 30%); justify-content: flex-end;">
|
|
<view class="iconfont icon-xh icon"></view>
|
|
<u-button type="success" size="small" text="一键刷新" icon="reload"></u-button>
|
|
<u-button type="success" size="small" text="批量控制"></u-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<view class="u-collapse-content">
|
|
<u-row>
|
|
<u-col span="3">
|
|
|
|
<view class="fixed">
|
|
|
|
<text style="color: #39ac4f;">●</text>
|
|
<view>E0000104</view>
|
|
</view>
|
|
</u-col>
|
|
<u-col span="4" align="center">
|
|
<view class="fixed">
|
|
<view class="signal">
|
|
<view class="bar"></view>
|
|
<view class="bar"></view>
|
|
<view class="bar"></view>
|
|
<view class="bar"></view>
|
|
<view class="bar"></view>
|
|
<view class="bar-no">
|
|
<u-icon name="close"></u-icon>
|
|
</view>
|
|
</view>
|
|
<text>(12)</text>
|
|
</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>
|
|
<u-row>
|
|
<u-col span="3">
|
|
<view class="fixed">
|
|
<text style="color: #e60012;">●</text>
|
|
<view>E0000104</view>
|
|
</view>
|
|
</u-col>
|
|
<u-col span="4" align="center">
|
|
<view class="fixed">
|
|
<text>(12)</text>
|
|
</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 accordion>
|
|
<u-collapse-item>
|
|
<template #title>
|
|
<view class="sf-title fixed">
|
|
<view class="iconfont icon-diefa icon"></view>
|
|
<view class="text">A1</view>
|
|
<view style="margin:0 10px;">出水口数量</view>
|
|
<u-badge numberType="overflow" type="info" max="999" value="155"></u-badge>
|
|
</view>
|
|
</template>
|
|
<view class="u-collapse-content">
|
|
<u-row>
|
|
<u-col span="4">
|
|
<view class="fixed">
|
|
<view>A1</view>
|
|
<text style="color: #39ac4f;">●离线</text>
|
|
</view>
|
|
|
|
</u-col>
|
|
<u-col span="5" align="left">
|
|
(12)
|
|
</u-col>
|
|
<u-col span="3" style="align-items: flex-end;">
|
|
<u-switch v-model="value" @change="change" size="20"
|
|
activeColor="#39ac4f"></u-switch>
|
|
</u-col>
|
|
</u-row>
|
|
</view>
|
|
</u-collapse-item>
|
|
</u-collapse>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import store from "@/store"
|
|
import plugin from "@/plugins"
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
landList: [1, 2, 3],
|
|
value: false,
|
|
|
|
}
|
|
},
|
|
onLoad() {
|
|
// uni.$emit("mqtt-link");
|
|
},
|
|
methods: {
|
|
openLand() {
|
|
this.$refs.refLand.open();
|
|
},
|
|
change(e) {
|
|
console.log('change', e);
|
|
},
|
|
},
|
|
}
|
|
</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;
|
|
}
|
|
|
|
.header-section {
|
|
padding: 10px 10px 102px 10px;
|
|
background-color: #39ac4f;
|
|
color: white;
|
|
border-radius: 0 0 30px 30px;
|
|
|
|
.title {
|
|
padding: 5px 0 15px 0;
|
|
|
|
text {
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.icon {
|
|
font-size: 44rpx;
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
|
|
::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-section {
|
|
position: relative;
|
|
top: -92px;
|
|
|
|
.grey-box {
|
|
background-color: #f3f3f3;
|
|
margin: 0 10px;
|
|
border-radius: 15px;
|
|
padding: 15px 10px;
|
|
|
|
.u-grid {
|
|
margin-bottom: 15px;
|
|
|
|
.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 {
|
|
margin-bottom: 10px;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0 1px 9px rgb(209, 209, 209, 0.5);
|
|
|
|
::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: 10px;
|
|
}
|
|
|
|
// 信号
|
|
.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;
|
|
background-color: #e60012;
|
|
}
|
|
|
|
.bar:nth-child(2) {
|
|
height: 7px;
|
|
background-color: #e60012;
|
|
}
|
|
|
|
.bar:nth-child(3) {
|
|
height: 10px;
|
|
background-color: #ffa200;
|
|
}
|
|
|
|
.bar:nth-child(4) {
|
|
height: 13px;
|
|
background-color: #39ac4f;
|
|
}
|
|
|
|
.bar:nth-child(5) {
|
|
height: 16px;
|
|
background-color: #39ac4f;
|
|
}
|
|
|
|
.bar-no {
|
|
position: absolute;
|
|
left: -2px;
|
|
bottom: 3px;
|
|
|
|
.u-icon__icon {
|
|
font-weight: bold;
|
|
font-size: 18rpx !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.u-button {
|
|
margin: 0 0 0 10px;
|
|
}
|
|
|
|
.jz-title {
|
|
.icon {
|
|
vertical-align: top;
|
|
margin-right: 5px;
|
|
font-size: 44rpx;
|
|
color: #39ac4f;
|
|
}
|
|
|
|
text {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
|
|
.sf-title {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
|
|
.text {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.icon {
|
|
vertical-align: top;
|
|
margin-right: 5px;
|
|
font-size: 44rpx;
|
|
color: #39ac4f;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style> |