xiaomeng
/
wszhyWx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
wszhyWx/pages/controller/controller.vue

1148 lines
28 KiB
Vue
Raw Normal View History

更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
<template>
<view class="controller">
<u-navbar :background="background" :is-back='true' back-icon-color='#FFFFFF' :border-bottom="false" title="控制器"
title-color='#FFFFFF' :title-bold='true' title-size='32'></u-navbar>
控制器页面添加
2023-11-22 09:28:49 +00:00
<!-- 金华权限 -->
<view class="content" v-if="purviewList.indexOf('10')!=-1">
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
<div class="item">
控制器页面添加
2023-11-22 09:28:49 +00:00
<u-collapse :accordion='false' :item-style="itemStyle" :head-style='headStyle'>
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
<u-collapse-item :title="item.head" v-for="(item,index) in itemList" :key="index" align="center">
<view class="collapseItem">
<view class="line"></view>
<view class="control_model">
<view class="control">
控制模式:
</view>
<view class="model">
<text @click="change00(item.type,1)"
:class="getTypeRoll(item.type)==1?'txt_act':'txt'">打&nbsp;&nbsp;&nbsp;开</text>
<text @click="change00(item.type,2)"
:class="getTypeRoll(item.type)==2?'txt_act':'txt'">停&nbsp;&nbsp;&nbsp;止</text>
<text @click="change00(item.type,3)"
:class="getTypeRoll(item.type)==3?'txt_act':'txt'">关&nbsp;&nbsp;&nbsp;闭</text>
</view>
<view class="line1"></view>
<view class="roll_input">
<view class="">
<view class="">
控制器页面添加
2023-11-22 09:28:49 +00:00
<input v-model="item.open_value"
@blur="blurChangeData00_1(item.type+1,$event)" type="number"
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
placeholder="0">
</view>
<text>通道打开;</text>
</view>
<view class="">
<view class="">
控制器页面添加
2023-11-22 09:28:49 +00:00
<input v-model="item.close_value"
@blur="blurChangeData00_2(item.type+2,$event)" type="number"
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
placeholder="0">
</view>
<text>通道关闭</text>
</view>
</view>
</view>
</view>
</u-collapse-item>
</u-collapse>
</div>
</view>
控制器页面添加
2023-11-22 09:28:49 +00:00
<!-- 丽水权限 -->
<view class="content" v-if="purviewList.indexOf('9')!=-1">
<view class="lishui-item">
<view class="lishui-title">
<view class="title-left">
{{ fanStatus.name }}
</view>
<view class="title-right" @click="fanmodelShow=true">
设置
<image src="../../static/set-arrow.png" mode=""></image>
</view>
</view>
<view class="lishui-content" v-if="fanStatus.open != 0">
<view class="lishui-set">
<view class="set-1">
<image v-if="fanStatus.open == 1" class="sel" src="../../static/sel.png" mode=""></image>
<view v-else class="sel-no"></view>
<span>自动控制</span>
</view>
<view class="set-2">
<image v-if="fanStatus.open != 1" class="sel" src="../../static/sel.png" mode=""></image>
<view v-else class="sel-no"></view>
<span>手机控制</span>
</view>
</view>
<view class="lishui-grid">
<view class="btn " :class="fanStatus.status[0] == 1 ? 'btn-on' : 'btn-off'">
<image class="fan-img" v-if="fanStatus.status[0] == 1" src="../../static/fan-on.png" alt="">
</image>
<image v-else src="../../static/fan-off.png" alt=""></image>
<span>1#风机</span>
</view>
<view class="btn" :class="fanStatus.status[1] == 1 ? 'btn-on' : 'btn-off'">
<image class="fan-img" v-if="fanStatus.status[1] == 1" src="../../static/fan-on.png" alt="">
</image>
<image v-else src="../../static/fan-off.png" alt=""></image> <span>2#风机</span>
</view>
<view class="btn" :class="fanStatus.status[2] == 1 ? 'btn-on' : 'btn-off'">
<image class="fan-img" v-if="fanStatus.status[2] == 1" src="../../static/fan-on.png" alt="">
</image>
<image v-else src="../../static/fan-off.png" alt=""></image> <span>3#风机</span>
</view>
<view class="btn" :class="fanStatus.status[3] == 1 ? 'btn-on' : 'btn-off'">
<image class="fan-img" v-if="fanStatus.status[3] == 1" src="../../static/fan-on.png" alt="">
</image>
<image v-else src="../../static/fan-off.png" alt=""></image> <span>4#风机</span>
</view>
<view class="btn" :class="fanStatus.status[4] == 1 ? 'btn-on' : 'btn-off'">
<image class="fan-img" v-if="fanStatus.status[4] == 1" src="../../static/fan-on.png" alt="">
</image>
<image v-else src="../../static/fan-off.png" alt=""></image> <span>5#风机</span>
</view>
</view>
</view>
<view v-else class="status-noTrue">
<image src="../../static/noTrue.png" mode=""></image>
<span>当前设备无效</span>
</view>
</view>
<view class="lishui-item" v-for="item, index in statusList" :key="index">
<view class="lishui-title">
<view class="title-left">
{{ item.name }}
</view>
<view class="title-right" @click="openModelShow(index)">
设置
<image src="../../static/set-arrow.png" mode=""></image>
</view>
</view>
<view class="lishui-content" v-if="item.open != 0">
<view class="lishui-set">
<view class="set-1">
<image v-if="item.open == 1" class="sel" src="../../static/sel.png" mode=""></image>
<view v-else class="sel-no"></view>
<span>自动控制</span>
</view>
<view class="set-2">
<image v-if="item.open != 1" class="sel" src="../../static/sel.png" mode=""></image>
<view v-else class="sel-no"></view>
<span>手机控制</span>
</view>
</view>
<view class="lishui-status">
{{ getNumberStatus(item.index) }}:
<span>{{ item.progress }}%</span>
</view>
</view>
<view v-else class="status-noTrue">
<image src="../../static/noTrue.png" mode=""></image>
<span>当前设备无效</span>
</view>
</view>
</view>
<u-popup v-model="modelShow" mode="center" :mask-close-able='true' width="640rpx" height="350rpx"
:closeable='false'>
<view class="contentPop lishui-item">
<view class="contentPop_box">
<view class="title">
顶卷膜{{indexs}}
</view>
</view>
<view class="lishui-content">
<view class="model-title">
控制模式:
</view>
<view class="lishui-flex">
<view class="btn btn-140 " @click="changeOpen1(1)" :class="openIndex1==1?'btn-on':'btn-off'">
<span>自动运行</span>
</view>
<view class="btn btn-140 " @click="changeOpen1(2)" :class="openIndex1==2?'btn-on':'btn-off'">
<span>手动打开</span>
</view>
<view class="btn btn-140 " @click="changeOpen1(3)" :class="openIndex1==3?'btn-on':'btn-off'">
<span>手动关闭</span>
</view>
<view class="btn btn-110 " @click="changeOpen1(4)" :class="openIndex1==4?'btn-on':'btn-off'">
<span>停止</span>
</view>
</view>
</view>
<image src="../../static/closed.png" mode="" @click="modelShow=false"></image>
</view>
</u-popup>
<u-popup v-model="fanmodelShow" mode="center" :mask-close-able='true' width="640rpx" height="550rpx"
:closeable='false'>
<view class="contentPop lishui-item">
<view class="contentPop_box padding-none">
<view class="title">
{{fanStatus.name}}
</view>
</view>
<view class="lishui-content padding-none">
<view class="lishui-set">
<view class="set-1" @click="changeOpen(1)">
<image v-if="openIndex == 1" class="sel" src="../../static/sel.png" mode=""></image>
<view v-else class="sel-no"></view>
<span>自动运行</span>
</view>
<view class="set-2" @click="changeOpen(2)">
<image v-if="openIndex == 2" class="sel" src="../../static/sel.png" mode=""></image>
<view v-else class="sel-no"></view>
<span>手动打开</span>
</view>
<view class="set-3" @click="changeOpen(3)">
<image v-if="openIndex == 3" class="sel" src="../../static/sel.png" mode=""></image>
<view v-else class="sel-no"></view>
<span>手动关闭</span>
</view>
</view>
<view class="model-title" style="padding:30rpx 0 0 30rpx;">
手动打开时，开几号风机：
</view>
<view class="lishui-grid">
<view class="btn" @click="changeIndexOpen(0)" :class="actList1[0]=='1'?'btn-on':'btn-off'">
<span>一号风阻</span>
</view>
<view class="btn" @click="changeIndexOpen(1)" :class="actList1[1]=='1'?'btn-on':'btn-off'">
<span>二号风阻</span>
</view>
<view class="btn" @click="changeIndexOpen(2)" :class="actList1[2]=='1'?'btn-on':'btn-off'">
<span>三号风阻</span>
</view>
<view class="btn" @click="changeIndexOpen(3)" :class="actList1[3]=='1'?'btn-on':'btn-off'">
<span>四号风阻</span>
</view>
<view class="btn" @click="changeIndexOpen(4)" :class="actList1[4]=='1'?'btn-on':'btn-off'">
<span>五号风阻</span>
</view>
</view>
</view>
<image src="../../static/closed.png" mode="" @click="fanmodelShow=false"></image>
</view>
</u-popup>
<view class="content" v-if="!purviewList.length" style="text-align: center;">
暂无权限查看
</view>
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
</view>
</template>
<script>
export default {
data() {
return {
// 头部导航背景
background: {
backgroundColor: '#24B383',
},
deviceId: '',
itemList: [{
head: "1#顶卷膜",
type: 21680,
控制器页面添加
2023-11-22 09:28:49 +00:00
open_value: 0,
close_value: 0
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
}, {
head: "2#顶卷膜",
type: 21683,
控制器页面添加
2023-11-22 09:28:49 +00:00
open_value: 0,
close_value: 0
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
}, {
head: "3#顶卷膜",
type: 21686,
控制器页面添加
2023-11-22 09:28:49 +00:00
open_value: 0,
close_value: 0
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
}, {
head: "1#侧卷膜",
type: 21689,
控制器页面添加
2023-11-22 09:28:49 +00:00
open_value: 0,
close_value: 0
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
}, {
head: "2#侧卷膜",
type: 21692,
控制器页面添加
2023-11-22 09:28:49 +00:00
open_value: 0,
close_value: 0
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
}, ],
itemStyle: {
width: "690rpx",
background: " #FFFFFF",
boxShadow: "0rpx 4rpx 20rpx 0rpx rgba(153,153,153,0.1)",
borderRadius: "20rpx",
marginBottom: '30rpx',
},
headStyle: {
fontSize: "30rpx",
fontFamily: "PingFang-SC-Bold",
fontWeight: "bold",
color: "#333333",
height: '91rpx'
},
txt_act21680: 0,
txt_act21683: 0,
txt_act21686: 0,
txt_act21689: 0,
txt_act21692: 0,
inputData: [],
inputData1: [],
timer: '',
控制器页面添加
2023-11-22 09:28:49 +00:00
purviewList: [], //权限的list
typeList: [],
statusList: [],
statusInterval: null, //状态接口调取
fanStatus: {
name: '风机',
open: 0,
status: []
},
indexs: 1, //弹窗打开的顶卷膜index
openIndex1: 0, //顶卷膜的index
modelShow: false, //顶卷膜show
fanmodelShow: false, //风机show
openIndex: 0, //风机有效性
inputData2: [],
actList1: [],
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
};
},
onLoad(options) {
控制器页面添加
2023-11-22 09:28:49 +00:00
this.typeList = this.api.typeList
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
if (options.id) {
this.deviceId = options.id;
}
this.dataInit()
},
控制器页面添加
2023-11-22 09:28:49 +00:00
beforeDestroy() {
clearInterval(this.statusInterval) && this.statusInterval
},
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
onPullDownRefresh() {
uni.showLoading({
title: '加载中...'
})
this.dataInit();
},
methods: {
控制器页面添加
2023-11-22 09:28:49 +00:00
//开启几号风机
changeIndexOpen(active) {
if (this.actList1[active] == '1') {
this.actList1[active] = '0'
} else {
this.actList1[active] = '1'
}
var revList = this.actList1.slice().reverse()
var num = revList.join("");
var dataNum = {
target: {
value: parseInt(num, 2),
},
};
this.changeBtn('21601', dataNum);
},
//风机有效性修改
changeOpen(index) {
this.openIndex = index
var dataNum = {
target: {
value: this.openIndex,
},
};
this.changeBtn('21600', dataNum);
},
//顶卷膜修改
changeOpen1(index) {
this.openIndex1 = index
var dataNum = {
target: {
value: this.openIndex1,
},
};
this.changeBtn(21613 + ((this.indexs - 1) * 11), dataNum);
},
changeBtn(code, el) {
var data = {
equipmentId: this.deviceId,
regAddress: code,
num: el.target.value,
};
this.delayTimerBtn(0, data);
},
//切换btn的限制 写入停止后j*100毫秒调取函数
delayTimerBtn(i, data) {
const that = this;
//整体接口
let j = 10;
//避免开启多个计时器
this.timer && clearInterval(this.timer);
this.timer = setInterval(() => {
++i;
if (i == j) {
that.changeData(data);
clearInterval(this.timer);
}
}, 100);
},
//打开顶卷膜的弹窗
openModelShow(index) {
this.indexs = index + 1
this.modelShow = true
this.openIndex1 = this.inputData2[21613 + ((this.indexs - 1) * 11)]
},
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
// 根据type参数返回对应的txt_act21680
控制器页面添加
2023-11-22 09:28:49 +00:00
getTypeRoll(i) {
if (i == 21680) {
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
return this.txt_act21680
控制器页面添加
2023-11-22 09:28:49 +00:00
} else if (i == 21683) {
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
return this.txt_act21683
控制器页面添加
2023-11-22 09:28:49 +00:00
} else if (i == 21686) {
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
return this.txt_act21686
控制器页面添加
2023-11-22 09:28:49 +00:00
} else if (i == 21689) {
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
return this.txt_act21689
控制器页面添加
2023-11-22 09:28:49 +00:00
} else if (i == 21692) {
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
return this.txt_act21692
}
},
控制器页面添加
2023-11-22 09:28:49 +00:00
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
// 读取所有寄存器的状态值
dataInit() {
var deviceId = this.deviceId
this.$http({
控制器页面添加
2023-11-22 09:28:49 +00:00
url: this.api.getcontrol_cpermission + '?deviceId=' + deviceId,
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
method: 'POST',
控制器页面添加
2023-11-22 09:28:49 +00:00
}).then((res => {
res.data.forEach((el, index) => {
this.purviewList.push(el.id.toString())
})
//查看金华权限
if (this.purviewList.indexOf('10') != -1) {
this.$http({
url: this.api.readJinHuaControl_reg + '?deviceId=' + deviceId,
method: 'POST',
}).then(res => {
// console.log(res, 'deviceId读取所有寄存器的状态值');
if (res.code == 200) {
uni.hideLoading()
uni.stopPullDownRefresh();
this.inputData = res.data
for (let i = 0; i < this.itemList.length; i++) {
this.itemList[i].open_value = this.inputData[Number('21681') + i *
3]
this.itemList[i].close_value = this.inputData[Number('21682') + i *
3]
}
// console.log(this.itemList);
this.getType('21680')
this.getType('21683')
this.getType('21686')
this.getType('21689')
this.getType('21692')
}
})
}
//查看丽水权限
if (this.purviewList.indexOf('9') != -1) {
this.getControl_getState()
this.getReadControlliShuiControl()
clearInterval(this.statusInterval) && this.statusInterval
this.statusInterval = setInterval(() => {
this.getControl_getState()
}, 3000);
}
}))
},
getReadControlliShuiControl() {
var data = {
deviceId: this.deviceId
};
this.$http({
url: this.api.getReadControlliShuiControl,
data: data,
method: 'GET',
}).then((res => {
this.inputData2 = res.data;
this.openIndex = this.inputData2[21600]
this.getAct21601()
}))
},
getAct21601() {
this.actList1 = []
var num = this.inputData2['21601']
var num1 = this.padString(num.toString(2), 5)
var openListNew = []
openListNew = num1.split("")
openListNew.forEach((el, index) => {
this.actList1.push(openListNew[openListNew.length - index - 1])
})
},
getControl_getState() {
var data = {
deviceId: this.deviceId
};
this.$http({
url: this.api.getControl_getState,
data: data,
method: 'GET',
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
}).then(res => {
if (res.code == 200) {
控制器页面添加
2023-11-22 09:28:49 +00:00
this.fanStatus.open = res.data['1023']
this.fanStatus.status = []
var num = res.data['1024']
var num1 = this.padString(num.toString(2), 5)
var openListNew = []
openListNew = num1.split("")
this.fanStatus.status = openListNew.reverse()
this.statusList = []
for (var i = 0; i < 4; i++) {
var statusData = {
name: `顶卷膜${i + 1}`,
open: res.data[(1025 + (i * 3))],
progress: res.data[(1027 + (i * 3))],
index: res.data[(1026 + (i * 3))]
}
this.statusList.push(statusData)
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
}
}
})
},
控制器页面添加
2023-11-22 09:28:49 +00:00
getNumberStatus(index) {
if (index == 0) {
return '静止状态'
} else if (index == 1) {
return '正向打开中'
} else if (index == 2) {
return '反向关闭中'
} else {
return ''
}
},
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
padString(str, length) {
return str.padStart(length, '0');
},
getType(type) {
var number = this.padString(Number(this.inputData[type]).toString(2), 3)
// console.log(number); //001
// console.log(number[0]); //0 bit2 关闭
// console.log(number[1]); //0 bit1 停止
// console.log(number[2]); //1 bit0 打开
if (type == '21680') {
if (Number(number[0])) {
this.txt_act21680 = 3
} else if (Number(number[1])) {
this.txt_act21680 = 2
} else if (Number(number[2])) {
this.txt_act21680 = 1
} else {
this.txt_act21680 = 0
}
} else if (type == '21683') {
if (Number(number[0])) {
this.txt_act21683 = 3
} else if (Number(number[1])) {
this.txt_act21683 = 2
} else if (Number(number[2])) {
this.txt_act21683 = 1
} else {
this.txt_act21683 = 0
}
} else if (type == '21686') {
if (Number(number[0])) {
this.txt_act21686 = 3
} else if (Number(number[1])) {
this.txt_act21686 = 2
} else if (Number(number[2])) {
this.txt_act21686 = 1
} else {
this.txt_act21686 = 0
}
} else if (type == '21689') {
if (Number(number[0])) {
this.txt_act21689 = 3
} else if (Number(number[1])) {
this.txt_act21689 = 2
} else if (Number(number[2])) {
this.txt_act21689 = 1
} else {
this.txt_act21689 = 0
}
} else if (type == '21692') {
if (Number(number[0])) {
this.txt_act21692 = 3
} else if (Number(number[1])) {
this.txt_act21692 = 2
} else if (Number(number[2])) {
this.txt_act21692 = 1
} else {
this.txt_act21692 = 0
}
}
},
change00(type, index) {
uni.showLoading({
title: '加载中...'
})
if (type == 21680) {
this.txt_act21680 = index
} else if (type == 21683) {
this.txt_act21683 = index
} else if (type == 21686) {
this.txt_act21686 = index
} else if (type == 21689) {
this.txt_act21689 = index
} else if (type == 21692) {
this.txt_act21692 = index
}
var list = ["0", "0", "0"];
if (index == 1) {
list[2] = "1";
} else {
list[2] = "0";
}
if (index == 2) {
list[1] = "1";
} else {
list[1] = "0";
}
if (index == 3) {
list[0] = "1";
} else {
list[0] = "0";
}
var num = list.join("");
var dataNum = {
target: {
value: parseInt(num, 2),
},
};
this.change(type, dataNum);
},
change(code, el) {
var data = {
equipmentId: this.deviceId,
regAddress: code,
num: el.target.value,
};
this.delayTimer(0, data);
},
delayTimer(i, data) {
const that = this;
//整体接口
let j = 5;
//避免开启多个计时器
this.timer && clearInterval(this.timer);
this.timer = setInterval(() => {
++i;
if (i == j) {
that.changeData(data);
clearInterval(this.timer);
}
}, 100);
},
changeData(data) {
const that = this
this.$http({
url: this.api.writeJinHuaControl_write,
data: data
}).then((res) => {
if (res.code == 200) {
uni.hideLoading()
uni.showToast({
title: res.msg,
icon: "success",
})
控制器页面添加
2023-11-22 09:28:49 +00:00
this.dataInit()
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
} else {
uni.showToast({
title: "失败!",
icon: "error",
})
}
});
},
// x#顶卷膜输入框
blurChangeData00_1(code, el) {
uni.showLoading({
title: '加载中...'
})
控制器页面添加
2023-11-22 09:28:49 +00:00
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
var data = el.target.value
// console.log(data);
var sendData = {
target: {
value: data
}
}
this.change(code, sendData)
},
blurChangeData00_2(code, el) {
uni.showLoading({
title: '加载中...'
})
var data = el.target.value
var sendData = {
target: {
value: data
}
}
this.change(code, sendData)
},
}
}
</script>
<style lang="scss" scoped>
.controller {
width: 100%;
min-height: 100vh;
background-color: #F5F6FA;
.content {
box-sizing: border-box;
padding: 30rpx;
::v-deep .uicon-arrow-down {
width: 16rpx;
height: 8rpx;
}
::v-deep .uicon-arrow-down::before {
content: " ";
width: 16rpx;
height: 8rpx;
background: url('../../static/downArrow.png') center no-repeat;
background-size: 100% 100%;
position: absolute;
}
.collapseItem {
width: 100%;
height: 298rpx;
.line {
width: 100%;
height: 1rpx;
background: #DDDDDD;
}
.control_model {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 30rpx 30rpx 28rpx;
.control {
font-size: 28rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #333333;
box-sizing: border-box;
padding: 0 50rpx;
}
.model {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10rpx;
box-sizing: border-box;
padding: 0 50rpx;
.txt {
width: 150rpx;
height: 66rpx;
background: #EFFCF7;
border: 2px solid rgba(58, 187, 144, 0.25);
border-radius: 10rpx;
font-size: 28rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #24B383;
text-align: center;
line-height: 62rpx;
}
.txt_act {
width: 150rpx;
height: 66rpx;
background: linear-gradient(0deg, #54CDA4, #27B584);
border-radius: 10rpx;
font-size: 28rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #EFFCF7;
text-align: center;
line-height: 66rpx;
}
}
.line1 {
width: 630rpx;
height: 1rpx;
background: #DDDDDD;
margin: 30rpx 0;
}
.roll_input {
display: flex;
align-items: center;
justify-content: space-around;
box-sizing: border-box;
padding: 0 50rpx;
view {
display: flex;
align-items: center;
view {
width: 110rpx;
height: 66rpx;
background: #F5F6FA;
border: 2px solid #E1E2E6;
border-radius: 10rpx;
margin-right: 15rpx;
>input {
width: 100%;
height: 100%;
text-align: center;
}
}
text {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
}
}
}
}
}
控制器页面添加
2023-11-22 09:28:49 +00:00
.lishui-item {
width: 100%;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
border-radius: 20rpx;
min-height: 150rpx;
margin-bottom: 30rpx;
.lishui-title {
width: 100%;
padding: 0 20rpx 0 30rpx;
border-bottom: 1rpx solid #DDD;
height: 80rpx;
display: flex;
align-items: center;
justify-content: space-between;
.title-left {
font-size: 34rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
.title-right {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: #999999;
display: flex;
align-items: center;
image {
margin-left: 20rpx;
width: 16rpx;
height: 8rpx;
}
}
}
.status-noTrue {
width: 100%;
height: 150rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #999999;
image {
width: 50rpx;
height: 50rpx;
margin-right: 20rpx;
}
}
.lishui-content {
padding: 0 30rpx;
.lishui-set {
width: 100%;
height: 100rpx;
border-bottom: 1rpx solid #DDD;
display: flex;
align-items: center;
justify-content: center;
>view {
padding: 0 35rpx;
display: flex;
align-items: center;
>span {
font-weight: bold;
margin-left: 20rpx;
}
.sel {
width: 40rpx;
height: 40rpx;
}
.sel-no {
width: 40rpx;
height: 40rpx;
background: #F5F6FA;
border: 2rpx solid #E1E2E6;
border-radius: 50%;
box-sizing: border-box;
}
}
}
.lishui-status {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
display: flex;
align-items: center;
justify-content: center;
padding: 35rpx 0;
span {
font-size: 34rpx;
font-family: PingFang SC;
font-weight: bold;
color: #24B383;
margin-left: 15rpx;
}
}
.lishui-flex {
display: flex;
align-items: center;
>view {
margin-right: 20rpx;
}
.btn {
width: 140px;
height: 66rpx;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
padding: 0 15rpx;
white-space: nowrap;
&.btn-140 {
width: 140px;
}
&.btn-110 {
width: 110px;
}
&.btn-on {
background: linear-gradient(0deg, #54CDA4, #27B584);
border-radius: 10rpx;
span {
color: #fff;
}
}
&.btn-off {
background: #EFFCF7;
border: 2px solid rgba(58, 187, 144, 0.25);
border-radius: 10rpx;
box-sizing: border-box;
span {
color: #333333;
}
}
}
}
.model-title {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
margin-bottom: 20rpx;
}
.lishui-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 30rpx; //纵向间隔
grid-column-gap: 30rpx; //横向间隔
padding: 30rpx 0 35rpx 0;
.btn {
width: 190rpx;
height: 66rpx;
display: flex;
align-items: center;
justify-content: center;
>image {
width: 30rpx;
height: 30rpx;
&.fan-img {
animation: rotate 5s linear infinite;
/* 持续时间为 5 秒，线性缓动，无限循环 */
/* 定义旋转动画 */
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
}
span {
margin-left: 10rpx;
}
&.btn-on {
background: linear-gradient(0deg, #54CDA4, #27B584);
border-radius: 10rpx;
span {
color: #fff;
}
}
&.btn-off {
background: #EFFCF7;
border: 2px solid rgba(58, 187, 144, 0.25);
border-radius: 10rpx;
box-sizing: border-box;
span {
font-weight: bold;
color: #333333;
}
}
}
}
}
}
/deep/.u-mode-center-box {
background-color: transparent;
}
.contentPop {
width: 100%;
min-height: calc(100% - 70rpx);
position: relative;
.contentPop_box {
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 20rpx;
padding-bottom: 30rpx;
.title {
width: 100%;
height: 91rpx;
font-size: 34rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
border-bottom: 1rpx solid #DDDDDD;
text-align: center;
line-height: 91rpx;
}
}
>image {
width: 50rpx;
height: 50rpx;
position: absolute;
bottom: -70rpx;
left: 50%;
transform: translate(-50%);
}
.padding-none {
padding: unset !important;
}
.lishui-content {
.lishui-set {
padding: unset;
>view {
padding: 0 15rpx;
span {
margin-left: 10rpx;
}
}
}
.lishui-grid {
padding: 0rpx 30rpx 30rpx;
>view {
width: 175rpx !important;
span {
margin-left: 0;
}
}
}
}
}
更新折线图和新增温室设备页
2023-10-19 03:10:39 +00:00
}
</style>