711 lines
19 KiB
Vue
711 lines
19 KiB
Vue
<template>
|
||
<view style="background-color: #E9F3FF;">
|
||
<view class="header-box">
|
||
<view class="build" @click="show = !show">
|
||
{{chosenBuild.name}}
|
||
<u-picker :show="show" :columns="columns" @confirm="confirm"></u-picker>
|
||
</view>
|
||
</view>
|
||
<view class="content">
|
||
<view class="tab-box">
|
||
<view>
|
||
<u-tabs
|
||
:list="tabList"
|
||
@click="changeIndex"
|
||
lineWidth="30"
|
||
lineColor="#58ABFF"
|
||
:activeStyle="{
|
||
color: '#303133',
|
||
fontWeight: 'bold',
|
||
transform: 'scale(1.2)'
|
||
}"
|
||
:inactiveStyle="{
|
||
color: '#B5B3B3',
|
||
transform: 'scale(1)'
|
||
}"
|
||
itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
|
||
>
|
||
</u-tabs>
|
||
</view>
|
||
<!-- <view class="tab-text">
|
||
一键开启/关闭
|
||
</view> -->
|
||
</view>
|
||
|
||
<view class="list-box" v-if="tabIndex==1">
|
||
<view class="header">
|
||
<u-scroll-list :indicator="indicator">
|
||
<view class="dataItem" :class="floorId==item.id?'color':'color1'" v-for="(item, index) in liftList" :key="index" @click="chosenFloor(item.id)" >
|
||
{{item.name}}
|
||
</view>
|
||
</u-scroll-list>
|
||
</view>
|
||
<view class="list">
|
||
<view v-for="(lightitem, lightindex) in lightList" :key="lightindex">
|
||
<view class="list-item">
|
||
<view class="top">
|
||
<view class="img-box">
|
||
<image src="../../static/light.png" mode="" style="width: 100%; height: 100%;"></image>
|
||
</view>
|
||
<view><u-switch v-model="lightitem.state" activeValue="1" inactiveValue="0" size="42" :loading="lightitem.loading" @change="changeLight(lightitem,lightindex,lightitem.loading)"></u-switch></view>
|
||
</view>
|
||
<view class="info-box">
|
||
<view>{{lightitem.status}}</view>
|
||
<view class="room">
|
||
<text>{{lightitem.location}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="list-box" v-if="tabIndex==2">
|
||
<view class="header">
|
||
<u-scroll-list :indicator="indicator">
|
||
<view class="dataItem" :class="floorId==item.id?'color':'color1'" v-for="(item, index) in liftList" :key="index" @click="chosenFloor(item.id)" >
|
||
{{item.name}}
|
||
</view>
|
||
</u-scroll-list>
|
||
</view>
|
||
<view class="list">
|
||
<view v-for="(airitem, airindex) in airList" :key="airindex">
|
||
<view class="list-item">
|
||
<view class="top">
|
||
<view class="img-box">
|
||
<image src="../../static/kongtiao.png" mode="" style="width: 100%; height: 100%;"></image>
|
||
</view>
|
||
<view><u-switch v-model="airitem.state" activeValue="1" inactiveValue="0" size="42" :loading="airitem.loading" @change="changeAir(airitem,airindex,airitem.loading)"></u-switch></view>
|
||
</view>
|
||
<view class="room">
|
||
<text>{{airitem.deviceName}}</text>
|
||
</view>
|
||
<view class="controls">
|
||
<view>
|
||
温度：<u-number-box v-model="airitem.temp" :min="16" :max="30" @change="tempChange($event, airindex)"></u-number-box>
|
||
</view>
|
||
<view>
|
||
模式：<uni-data-select
|
||
v-model="airitem.runMode"
|
||
:localdata="modeRange"
|
||
:clear="false"
|
||
@change="modeChange($event, airindex)"
|
||
></uni-data-select>
|
||
</view>
|
||
<view>
|
||
风速：<uni-data-select
|
||
v-model="airitem.wind"
|
||
:localdata="windRange"
|
||
:clear="false"
|
||
@change="windChange($event, airindex)"
|
||
></uni-data-select>
|
||
</view>
|
||
</view>
|
||
<button :disabled="airitem.loading" :loading="airitem.loading" style="background: linear-gradient(#79BAFE, #6280FF); border-radius: 15rpx; font-size: 24rpx; color: #fff; width: 75%; margin: 0 auto;" @click="confirmControl(airindex, airitem.loading)">确认调整</button>
|
||
<view class="info-box">
|
||
<view>状态：{{airitem.status}}</view>
|
||
<!-- <view>{{item.status}} <img src="../../static/kongtiaoIcon2.png" style="width: 32rpx;height: 32rpx;margin-left: 20rpx;" alt=""></view> -->
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="list-box" v-if="tabIndex==3">
|
||
<view class="header">
|
||
<u-scroll-list :indicator="indicator">
|
||
<view class="dataItem" :class="floorId==item.id?'color':'color1'" v-for="(item, index) in liftList" :key="index" @click="chosenFloor(item.id)" >
|
||
{{item.name}}
|
||
</view>
|
||
</u-scroll-list>
|
||
</view>
|
||
<view class="list">
|
||
<view v-for="(item, index) in doorList" :key="index">
|
||
<view class="list-item">
|
||
<view class="top">
|
||
<view class="img-box">
|
||
<image src="../../static/menjin.png" mode="" style="width: 100%; height: 100%;"></image>
|
||
</view>
|
||
<view><u-switch v-model="item.state" activeValue="1" inactiveValue="0" size="42" :loading="item.loading" @change="changeDoor(item,index,item.loading)"></u-switch></view>
|
||
</view>
|
||
<view class="info-box">
|
||
<view>状态：{{item.status}}</view>
|
||
<view class="room">
|
||
<text>{{item.location}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getBuildings, getFloors, getDeviceListByType,getAccessControlStatus,controlAir,controlLight,controlAccessControl
|
||
} from '@/service/url.js';
|
||
import AES from "@/utils/cryptoJs/aes.js";
|
||
export default {
|
||
data() {
|
||
return {
|
||
buildList:[],
|
||
chosenBuild:{},
|
||
show: false,
|
||
columns: [[]],
|
||
floorId:'',
|
||
indicator:false,
|
||
tabIndex:1,
|
||
tabList:[{
|
||
name: '灯光'
|
||
}, {
|
||
name: '空调'
|
||
}, {
|
||
name: '门禁'
|
||
}],
|
||
liftList:[
|
||
{date:"1F"},
|
||
{date:"2F"},
|
||
{date:"3F"},
|
||
{date:"4F"},
|
||
{date:"5F"},
|
||
{date:"6F"},
|
||
{date:"7F"}
|
||
],
|
||
item:{
|
||
status:"正常",
|
||
state:'1',
|
||
location:"一号楼｜2F｜ 306",
|
||
|
||
},
|
||
deviceList:[
|
||
{
|
||
status:"正常",
|
||
state:'1',
|
||
location:"一号楼｜2F｜ 306",
|
||
|
||
},
|
||
{
|
||
status:"正常",
|
||
state:'1',
|
||
location:"一号楼｜2F｜ 306",
|
||
|
||
},
|
||
{
|
||
status:"正常",
|
||
state:'1',
|
||
location:"一号楼｜2F｜ 306",
|
||
|
||
},
|
||
{
|
||
status:"正常",
|
||
state:'1',
|
||
location:"一号楼｜2F｜ 306",
|
||
|
||
},
|
||
{
|
||
status:"正常",
|
||
state:'1',
|
||
location:"一号楼｜2F｜ 306",
|
||
|
||
},
|
||
],
|
||
lightList:[],
|
||
airList:[],
|
||
doorList:[],
|
||
modeRange: [
|
||
{ text: '制冷', value: '1' },
|
||
{ text: '制热', value: '2' },
|
||
{ text: '除湿', value: '3' },
|
||
{ text: '送风', value: '4' },
|
||
{ text: '自动', value: '5' }
|
||
],
|
||
windRange: [
|
||
{ text: '低风', value: '1' },
|
||
{ text: '中风', value: '2' },
|
||
{ text: '高风', value: '3' },
|
||
{ text: '自动', value: '4' }
|
||
]
|
||
}
|
||
},
|
||
onReady() {
|
||
this.loadBuild()
|
||
},
|
||
onLoad() {
|
||
|
||
// this.loadmore()
|
||
},
|
||
methods: {
|
||
loadBuild(){
|
||
let pram = {}
|
||
this.$http.post(getBuildings,pram).then(res => {
|
||
if (res) {
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
console.log(res.data)
|
||
this.buildList = res.data;
|
||
this.buildList.forEach(item=>{
|
||
this.columns[0].push(item.name)
|
||
})
|
||
this.chosenBuild = this.buildList[0]
|
||
this.loadFloor(this.chosenBuild.id)
|
||
console.log(this.columns)
|
||
console.log(this.buildList)
|
||
// this.show = true;
|
||
}
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
},
|
||
confirm(e) {
|
||
// console.log('confirm', e)
|
||
let buildId = this.buildList[e.indexs].id;
|
||
this.chosenBuild = this.buildList[e.indexs]
|
||
this.loadFloor(this.chosenBuild.id)
|
||
this.show = false
|
||
},
|
||
loadFloor(buildId){
|
||
let obj = {
|
||
"id":buildId
|
||
}
|
||
let param = {
|
||
encryptedData: AES.encrypt(JSON.stringify(obj))
|
||
}
|
||
this.$http.post(getFloors,param).then(res => {
|
||
if (res) {
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
console.log(res.data)
|
||
this.liftList = res.data;
|
||
this.floorId = this.liftList[0].id;
|
||
this.loadDevice()
|
||
}
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
},
|
||
chosenFloor(floorId){
|
||
this.floorId = floorId
|
||
this.loadDevice()
|
||
|
||
},
|
||
loadDevice() {
|
||
let that = this
|
||
console.log(this.floorId,"floorId")
|
||
console.log(this.tabIndex,"tabIndex")
|
||
let obj = {
|
||
"floorId":this.floorId,
|
||
"deviceType":this.tabIndex
|
||
}
|
||
console.log(obj);
|
||
let param = {
|
||
encryptedData: AES.encrypt(JSON.stringify(obj))
|
||
}
|
||
this.$http.post(getDeviceListByType,param).then(res => {
|
||
if (res) {
|
||
if(res.code == 200){
|
||
|
||
console.log(res.data,'getDeviceListByType')
|
||
if(this.tabIndex=='1'){//照明
|
||
res.data.forEach(item=>{
|
||
item.loading = false
|
||
item.state = '0';
|
||
})
|
||
this.lightList = res.data;
|
||
this.lightList.forEach(item => {
|
||
item.location = item.areaName;
|
||
item.status = item.deviceName;
|
||
|
||
item.deviceSignalList.forEach(signalItem => {
|
||
if(signalItem.signalName=="运行状态"){
|
||
if(signalItem.signalValue != null ){
|
||
// console.log(signalItem.signalValue)
|
||
if(signalItem.signalValue == '1'){item.state = '1';}
|
||
if(signalItem.signalValue == '0'){item.state = '0'}
|
||
}
|
||
}
|
||
})
|
||
})
|
||
}
|
||
if(this.tabIndex=='2'){//空调
|
||
res.data.forEach(item=>{
|
||
item.state = '0';
|
||
item.loading = false
|
||
item.temp = 25;
|
||
item.wind = '1.0';
|
||
item.runMode = '1.0'
|
||
item.trueId = '1'
|
||
})
|
||
this.airList = res.data;
|
||
this.airList.forEach(item => {
|
||
item.location = item.areaName;
|
||
item.deviceSignalList.forEach(signalItem => {
|
||
if(signalItem.signalName=="开关控制"){
|
||
if(signalItem.signalValue != null ){
|
||
// console.log(signalItem.signalValue)
|
||
if(signalItem.signalValue == '1'){item.state = '1';}
|
||
if(signalItem.signalValue == '0'){item.state = '0'}
|
||
}
|
||
}if(signalItem.signalName=="设备状态"){
|
||
if(signalItem.signalValue != null ){
|
||
// console.log(signalItem.signalValue)
|
||
if(signalItem.signalValue == '1.0'){item.status = '运行中'}
|
||
if(signalItem.signalValue == '0.0'){item.status = '未运行'}
|
||
}
|
||
}
|
||
if(signalItem.signalName=="设定温度"){
|
||
item.temp = signalItem.signalValue.split('.')[0];
|
||
}
|
||
if (signalItem.signalName=="运行风速") {
|
||
item.wind = signalItem.signalValue.split('.')[0]
|
||
item.trueId = signalItem.deviceId
|
||
if (Number(item.wind.split('.')[0]) > 4) {
|
||
item.wind = '3'
|
||
}
|
||
}
|
||
if (signalItem.signalName=="运行模式") {
|
||
item.runMode = signalItem.signalValue.split('.')[0]
|
||
item.trueId = signalItem.deviceId
|
||
}
|
||
})
|
||
})
|
||
}
|
||
if(this.tabIndex=='3'){//门禁
|
||
res.data.forEach(item=>{
|
||
item.loading = false
|
||
item.state = '0';
|
||
item.status = '关';
|
||
})
|
||
this.doorList = res.data;
|
||
this.doorList.forEach(item => {
|
||
item.location = item.areaName;
|
||
item.deviceSignalList.forEach(signalItem => {
|
||
if(signalItem.signalName=="门禁IP"){
|
||
console.log(signalItem.ip)
|
||
let obj = {"ip":signalItem.ip}
|
||
let param = {encryptedData: AES.encrypt(JSON.stringify(obj))}
|
||
this.$http.post(getAccessControlStatus,param).then(res => {
|
||
if (res) {
|
||
if(res.code == 200){
|
||
let doorState = res.data[0].doorState;
|
||
setTimeout(()=>{
|
||
if(doorState == '0'){item.status = '关';item.state = '0';}
|
||
if(doorState == '1'){item.status = '开';item.state = '1';}
|
||
if(doorState == '2'){item.status = '短路报警';item.state = '0';}
|
||
if(doorState == '3'){item.status = '断路报警';item.state = '0';}
|
||
if(doorState == '4'){item.status = '异常报警';item.state = '0';}
|
||
console.log(that.doorList[0].loading)
|
||
},500)
|
||
console.log(doorState)
|
||
}
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
|
||
|
||
}
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
},
|
||
getAccessControlStatus(IP){
|
||
// let obj = {
|
||
// "ip":IP
|
||
// }
|
||
// let param = {
|
||
// encryptedData: AES.encrypt(JSON.stringify(obj))
|
||
// }
|
||
// this.$http.post(getAccessControlStatus,param).then(res => {
|
||
// if (res) {
|
||
// // console.log(res)
|
||
// if(res.code == 200){
|
||
// console.log(res.data)
|
||
// return res.data[0].doorState;
|
||
// }
|
||
// }
|
||
// }).catch(error => {
|
||
// console.log(error)
|
||
// })
|
||
},
|
||
changeIndex(item) {
|
||
console.log('index', item.index);
|
||
this.tabIndex = item.index+1;
|
||
this.loadDevice()
|
||
},
|
||
changeLight(item,index,loading) {
|
||
this.lightList[index].loading = true
|
||
console.log('change', item);
|
||
let obj = {
|
||
"deviceId":item.deviceId,
|
||
"openValue":item.state,
|
||
}
|
||
let param = {
|
||
encryptedData: AES.encrypt(JSON.stringify(obj))
|
||
}
|
||
this.$http.post(controlLight,param).then(res => {
|
||
if (res) {
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
console.log(res.data)
|
||
this.lightList[index].loading = false
|
||
}
|
||
if(res.code != 200&&res.msg!="发送成功"){
|
||
if(item.state =='1'){item.state = '0'}
|
||
if(item.state =='0'){item.state = '1'}
|
||
}
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
|
||
},
|
||
changeAir(item,index,loading) {
|
||
let obj
|
||
// 关闭
|
||
if (item.state == '0') {
|
||
obj = {
|
||
"deviceId":item.deviceId,
|
||
"type":item.state
|
||
}
|
||
} else {
|
||
obj = {
|
||
"deviceId":item.deviceId,
|
||
"type":item.state,
|
||
"mode":item.runMode,
|
||
"speed":item.wind,
|
||
"value":item.temp
|
||
}
|
||
}
|
||
console.log(obj);
|
||
this.airList[index].loading = true
|
||
|
||
let param = {
|
||
encryptedData: AES.encrypt(JSON.stringify(obj))
|
||
}
|
||
this.$http.post(controlAir,param).then(res => {
|
||
if (res) {
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
console.log(res.data)
|
||
this.airList[index].loading = false
|
||
if(item.state =='1'){item.status = '运行中'}
|
||
if(item.state =='0'){item.status = '未运行'}
|
||
}
|
||
if(res.code != 200&&res.msg!="发送成功"){
|
||
if(item.state =='1'){item.state = '0'}
|
||
if(item.state =='0'){item.state = '1'}
|
||
}
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
},
|
||
changeDoor(item,index,loading) {
|
||
this.doorList[index].loading = true
|
||
let ip = ""
|
||
item.deviceSignalList.forEach(item=>{
|
||
if(item.signalName=="门禁IP"){
|
||
ip = item.ip
|
||
}
|
||
})
|
||
console.log(item)
|
||
let obj = {
|
||
"ip":ip,
|
||
"type":item.state,
|
||
}
|
||
let param = {
|
||
encryptedData: AES.encrypt(JSON.stringify(obj))
|
||
}
|
||
this.$http.post(controlAccessControl,param).then(res => {
|
||
if (res) {
|
||
// console.log(res)
|
||
if(res.code == 200){
|
||
console.log(res.data)
|
||
this.doorList[index].loading = false
|
||
}
|
||
if(res.code != 200&&res.msg!="发送成功"){
|
||
if(item.state =='1'){item.state = '0'}
|
||
if(item.state =='0'){item.state = '1'}
|
||
}
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
},
|
||
tempChange (e, index) {
|
||
this.airList[index].temp = e.value
|
||
},
|
||
modeChange (e, index) {
|
||
this.airList[index].runMode = e
|
||
},
|
||
windChange (e, index) {
|
||
this.airList[index].wind = e
|
||
},
|
||
confirmControl (index, loading) {
|
||
console.log(this.airList[index]);
|
||
this.changeAir(this.airList[index], index, loading)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.header-box{
|
||
width: 100%;
|
||
height: 500rpx;
|
||
// background: url("../../static/headerBg.png") 100% 100%;
|
||
background-color: #E9F3FF;
|
||
position: relative;
|
||
|
||
.build{
|
||
position: absolute;
|
||
bottom: 200rpx;
|
||
left: 100rpx;
|
||
font-size: 56rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
line-height: 78rpx;
|
||
}
|
||
}
|
||
.content{
|
||
width: 100%;
|
||
// padding: 50rpx;
|
||
border-radius: 80rpx 80rpx 0 0;
|
||
// background-color: #fff;
|
||
background: linear-gradient(180deg, #ffffff 0%, #E9F3FF 100%);
|
||
position: relative;
|
||
padding-top: 50rpx;
|
||
top: -80rpx;
|
||
// overflow: hidden;
|
||
.tab-box{
|
||
width: 85%;
|
||
margin: 50rpx;
|
||
margin-top: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.tab-text{
|
||
width: 156rpx;
|
||
height: 33rpx;
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #2F86FC;
|
||
line-height: 33rpx;
|
||
}
|
||
}
|
||
.list-box{
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
.header{
|
||
width: 100%;
|
||
|
||
.dataItem{
|
||
width: auto;
|
||
// height: 40rpx;
|
||
padding: 10rpx 40rpx;
|
||
white-space: nowrap;
|
||
word-break: keep-all;
|
||
margin: 10rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0px 2px 4px 0px rgba(226,226,226,0.5);
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
.list{
|
||
width: 100%;
|
||
// height: 770rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.list-item{
|
||
width: 270rpx;
|
||
// width: 45%;
|
||
position: relative;
|
||
margin-bottom: 20rpx;
|
||
background-color: #fff;
|
||
margin-right: 20rpx;
|
||
padding: 13rpx 24rpx;
|
||
|
||
.top{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.img-box{
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
margin-left: 20rpx;
|
||
img{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.btn{
|
||
// width: 90rpx;
|
||
// height: 42rpx;
|
||
// // line-height: 42rpx;
|
||
// background: #2278FF;
|
||
// box-shadow: inset 0rpx 1rpx 3rpx 0rpx rgba(126,126,126,0.5);
|
||
// border-radius: 20rpx;
|
||
// font-size: 22rpx;
|
||
// color: #FFF;
|
||
// text-align: center;
|
||
}
|
||
}
|
||
.controls{
|
||
width: 100%;
|
||
margin: 5rpx auto;
|
||
view{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin: 5rpx auto;
|
||
}
|
||
}
|
||
.room{
|
||
font-size: 30rpx;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #000;
|
||
line-height: 30rpx;
|
||
box-sizing: border-box;
|
||
padding: 30rpx 15rpx 15rpx 15rpx;
|
||
}
|
||
.info-box{
|
||
margin-top: 20rpx;
|
||
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
.color{
|
||
background: linear-gradient(141deg, #6DB9FE 0%, #627BFF 100%);
|
||
color: #fff;
|
||
}
|
||
.color1{
|
||
background: #fff;
|
||
color: #686868;
|
||
}
|
||
</style>
|