zmt
4 years ago
11 changed files with 860 additions and 130 deletions
-
1src/pages.json
-
1src/subpackage/device/js/device_api.js
-
593src/subpackage/device/pages/index/airC_manage.vue
-
16src/subpackage/device/pages/index/index.vue
-
226src/subpackage/device/pages/index/lease_ball_box_manage.vue
-
148src/subpackage/device/pages/switch_manage/switch_manage.vue
-
BINsrc/subpackage/device/static/images/check_type_2.png
-
BINsrc/subpackage/device/static/images/cmd-close.png
-
BINsrc/subpackage/device/static/images/cmd-cold.png
-
BINsrc/subpackage/device/static/images/cmd-hot.png
-
5src/subpackage/device/style/img_bg.scss
@ -1,8 +1,591 @@ |
|||||
<template> |
|
||||
</template> |
|
||||
|
<template> |
||||
|
<view class="airC-page"> |
||||
|
<!-- <store-name></store-name> --> |
||||
|
<view class="t-title">{{'1号空调'}}管理</view> |
||||
|
<view class="t-box"> |
||||
|
|
||||
|
<view class="info-list"> |
||||
|
<view class="i-box-up"> |
||||
|
<view class="i-u-item"> |
||||
|
<text>温度</text> |
||||
|
<view class="">28</view> |
||||
|
<text> ℃</text> |
||||
|
</view> |
||||
|
<view class="i-u-item"> |
||||
|
<text>湿度</text> |
||||
|
<view class="">82</view> |
||||
|
<text>%</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="i-box-down"> |
||||
|
<view class="i-d-item" @click="runCMD"> |
||||
|
<image src="../../static/images/cmd-cold.png" mode=""></image> |
||||
|
<text>制冷</text> |
||||
|
</view> |
||||
|
<view class="i-d-item" @click="runCMD"> |
||||
|
<image src="../../static/images/cmd-hot.png" mode=""></image> |
||||
|
<text>制热</text> |
||||
|
</view> |
||||
|
<view class="i-d-item" @click="runCMD"> |
||||
|
<image src="../../static/images/cmd-close.png" mode=""></image> |
||||
|
<text>关闭</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="control-pad"> |
||||
|
<text>红外定义命令</text> |
||||
|
<view class="pad-box"> |
||||
|
<view class="b-item" v-for="i in 62" :class="(i+1)%4!=0?'m-right':''" @click="runCMD(i)">命令{{i}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
<!-- <view class="save-btn" @click="saveAdd">保存</view> --> |
||||
|
<!-- <view class="bottom-tips">保存后发布后将会以最新的定时更新到欧轩智能中控，设备首页<text>定时列表</text>可查看最新发布</view> --> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
<!-- 日期天多选选择弹框 --> |
||||
|
<view class="voice_control_pad" v-if="padConfig.show" @touchmove.stop.prevent="(()=>{})"> |
||||
|
<view class="cover_bg" @click.stop="padConfig.show=false" @touchmove.stop.prevent="(()=>{})"></view> |
||||
|
<view class="v_box" > |
||||
|
<scroll-view scroll-y="true" > |
||||
|
<view class="il-select-week"> |
||||
|
<block v-for="(e,i) in dayArrSelect" :key="i"> |
||||
|
<view class="" :class="e?'active':''" @click.stop="clickDaysTab(i)">{{i+1}} 号</view> |
||||
|
</block> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
|
||||
|
<view class="v_btns"> |
||||
|
<view class="voice_btn btn_green" @click="padConfig.show=false">确认</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import util from '../../../../utils/util'; |
||||
|
import store_name from '../../components/store_name/store_name'; |
||||
|
import deviceServer from '../../js/device_server'; |
||||
|
import deviceApi from '../../js/device_api'; |
||||
|
|
||||
|
const rootPage = '/subpackage/device' |
||||
|
const tabArr = [{ |
||||
|
id: 0, |
||||
|
name: '全部', |
||||
|
path: ``, |
||||
|
on: true |
||||
|
}, |
||||
|
]; |
||||
|
const weekArrCN = ["日", "一", "二","三","四","五","六"]; |
||||
|
import { |
||||
|
mapState |
||||
|
} from 'vuex' |
||||
|
export default { |
||||
|
components: { |
||||
|
'store-name': store_name |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapState({ |
||||
|
storeList: state => state.device.storeList, |
||||
|
curStoreInfo: state => state.device.curStoreInfo, |
||||
|
}), |
||||
|
isDel() { |
||||
|
return (item) => { |
||||
|
return item[2] == "删除" ? "true" : "" |
||||
|
} |
||||
|
}, |
||||
|
startDate() { |
||||
|
return this.getDate('start'); |
||||
|
}, |
||||
|
endDate() { |
||||
|
return this.getDate('end'); |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
const currentDate = this.getDate({ |
||||
|
format: true |
||||
|
}) |
||||
|
const dayArrSelect = (()=>{ |
||||
|
let days = [] |
||||
|
for(var i=1;i<=31;i++){ |
||||
|
days.push(false) |
||||
|
} |
||||
|
return days |
||||
|
})() |
||||
|
return { |
||||
|
switchInfo:"",//上层页面的选择信息 |
||||
|
on:false, |
||||
|
singleArr:["星期","具体日期","具体时间段"], |
||||
|
sIndex:0, |
||||
|
dayArrSelect:dayArrSelect,//31天 选择 |
||||
|
dIndex:0, |
||||
|
weekArrCN, |
||||
|
weekArrSelect:[false,false,false,false,false,false,false], |
||||
|
date: currentDate, |
||||
|
time: '00:00-', |
||||
|
startTime:"", |
||||
|
endTime:"", |
||||
|
padConfig:{ |
||||
|
show:false, |
||||
|
data:[] |
||||
|
}, |
||||
|
reqData:{//定时请求中控参数 调用sendPacket时传递参数 switchData->postData->reqData(最终请求数据) |
||||
|
"device": "00-10-7a-0f-6d-7a", |
||||
|
"delay": 1, |
||||
|
"data": { |
||||
|
"name": "set-time-select", |
||||
|
"value": { |
||||
|
"data": "传入设置的json格式字符串,例如:{\"time_arrow_id\":\"c8c39f5c-8dd4-11eb-9aad-4e965989bbce\",\"group\":\"RPIO\",\"type\":\"DAY_OF_WEEK\",\"day_of_week\":[0,1,2,3,6,5,4],\"day_of_month\":null,\"date_slice\":[{\"start\":\"\",\"end\":\"\"}],\"times_on_day\":[\"10:13:00-10:13:10\"],\"expand_tags\":null,\"expand_value\":{\"main\":{\"name\":\"set-rpio\",\"title\":\"测试中控照明9\",\"value\":{\"id\":\"9\",\"status\":\"high\"}}},\"weights\":0,\"extension\":null}" |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
postData:{//定时参数消息结构 reqData.data.value |
||||
|
"time_arrow_id": "", //不用填 留空 |
||||
|
"group": "RPIO", //照明,风扇,空调固定值,其它不确定 |
||||
|
"type": "DAY_OF_WEEK", //DAY_OF_WEEK/DAY_OF_MONTH/DATE_SLICE , 对应 周,月,单独时间. |
||||
|
"day_of_week": [ |
||||
|
], |
||||
|
"day_of_month": null, //数组 |
||||
|
"date_slice": [ |
||||
|
{ |
||||
|
"start": "", |
||||
|
"end": "" |
||||
|
} |
||||
|
], |
||||
|
"times_on_day": [//时间点 |
||||
|
// "10:13:00-10:13:10" //后台要求,10s期间 |
||||
|
], |
||||
|
"expand_tags": null, |
||||
|
"expand_value": { |
||||
|
"main": { //中控指令 |
||||
|
"name": "set-rpio", |
||||
|
"title": "", |
||||
|
"value": { |
||||
|
"id": "",//设备id |
||||
|
"status": "high" //low:开, high:关 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
"weights": 0,//权重 |
||||
|
"extension": null |
||||
|
}, |
||||
|
switchData:"",//开关请求中控参数 postData.expand_value.main |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
async onLoad(option) { |
||||
|
this.handleOpts(option); |
||||
|
}, |
||||
|
onShow() { |
||||
|
// this.updateList() //更新中控信息 |
||||
|
}, |
||||
|
watch: { |
||||
|
curStoreInfo(newVal, oldVal){ |
||||
|
// this.infoArr.length = 1 |
||||
|
// this.updateList() |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
//处理参数 |
||||
|
handleOpts(option){ |
||||
|
let switchInfo = JSON.parse(decodeURIComponent(option.switchInfo)); |
||||
|
this.switchInfo = switchInfo //该选择控制设备的所有数据 (目前只使用了hardware_name) |
||||
|
this.switchData = switchInfo.switchData //开关关联数据 |
||||
|
|
||||
|
}, |
||||
|
//执行命令 |
||||
|
runCMD(){ |
||||
|
let {switchData,postData,reqData,curStoreInfo,sIndex,time,getWeekRes,getMonthDaysRes,getSliceRes,getDayTimeRes,sendDataToVC} = this; |
||||
|
uni.showModal({ |
||||
|
content: `确认要执行 ?`, |
||||
|
success(res) { |
||||
|
console.log("确认执行", res.confirm) |
||||
|
if(res.confirm){ |
||||
|
// sendDataToVC(); |
||||
|
} |
||||
|
}, |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
tapSwitch(){ //开关切换 |
||||
|
this.on = !this.on |
||||
|
this.switchData.data.value.status = this.on? "low":"high"; |
||||
|
}, |
||||
|
|
||||
|
bindPickerChangeSingle(e){ |
||||
|
console.log('bindPickerChangeSingle，携带值为', e.target.value) |
||||
|
this.sIndex = e.target.value |
||||
|
// DAY_OF_WEEK/DAY_OF_MONTH/DATE_SLICE |
||||
|
this.postData.type = ['DAY_OF_WEEK','DAY_OF_MONTH','DATE_SLICE'][e.target.value] |
||||
|
this.resetPostData(); |
||||
|
}, |
||||
|
resetPostData(){ //重置选择数据为原始状态 |
||||
|
let _reset = { |
||||
|
"day_of_week": [ |
||||
|
], |
||||
|
"day_of_month": null, //数组 |
||||
|
"date_slice": [{ |
||||
|
"start": "", |
||||
|
"end": "" |
||||
|
} |
||||
|
],} |
||||
|
for(var i in _reset){ |
||||
|
console.log("重置:",i); |
||||
|
this.postData[i] = _reset[i] |
||||
|
} |
||||
|
|
||||
<script> |
|
||||
</script> |
|
||||
|
}, |
||||
|
bindTimeChange(e){ //时间选择 |
||||
|
this.time = e.target.value |
||||
|
}, |
||||
|
bindTimeChangeStart(e){ //日期选择 |
||||
|
if(new Date(this.endTime)-new Date(e.target.value)<0) return util.showNone("开始时间异常") |
||||
|
this.startTime = e.target.value |
||||
|
}, |
||||
|
bindTimeChangeEnd(e){ //日期选择 |
||||
|
if(new Date(e.target.value)-new Date(this.startTime)<0) return util.showNone("结束时间异常") |
||||
|
this.endTime = e.target.value |
||||
|
}, |
||||
|
bindPickerChangeDay(e){ //月选择 |
||||
|
console.log('bindPickerChangeDay，携带值为', e.target.value) |
||||
|
this.dIndex = e.target.value |
||||
|
}, |
||||
|
//删除计划任务 |
||||
|
delItem(e,i) { |
||||
|
let that = this |
||||
|
let delData = { |
||||
|
"device": this.curStoreInfo.device_name, |
||||
|
"delay": 1, |
||||
|
"data": { |
||||
|
"name": "delete-time-select", |
||||
|
"value": { |
||||
|
"uuid": e[3] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
uni.showModal({ |
||||
|
content: `确认要删除: ${e[0]}的计划任务 ?`, |
||||
|
success(res) { |
||||
|
console.log("确认删除", res.confirm) |
||||
|
if(res.confirm){ |
||||
|
that.operateReq({ |
||||
|
data: delData, |
||||
|
succFun: (res) => { |
||||
|
that.updateList() |
||||
|
}, |
||||
|
isTip:true |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
}) |
||||
|
}, |
||||
|
getDate(type) { |
||||
|
const date = new Date(); |
||||
|
let year = date.getFullYear(); |
||||
|
let month = date.getMonth() + 1; |
||||
|
let day = date.getDate(); |
||||
|
|
||||
|
if (type === 'start') { |
||||
|
year = year - 0; |
||||
|
} else if (type === 'end') { |
||||
|
year = year + 10;//限制可选10年内 |
||||
|
} |
||||
|
month = month > 9 ? month : '0' + month;; |
||||
|
day = day > 9 ? day : '0' + day; |
||||
|
return `${year}-${month}-${day}`; |
||||
|
}, |
||||
|
async sendDataToVC() { |
||||
|
let that = this |
||||
|
let timingData = { |
||||
|
} |
||||
|
timingData = this.reqData |
||||
|
|
||||
|
this.operateReq({ |
||||
|
data: timingData, |
||||
|
succFun: (res) => { |
||||
|
console.log("操作结果:",res); |
||||
|
if(res=="ok"){ |
||||
|
let timing_list = "/subpackage/device/pages/timing/timing_list" |
||||
|
util.routeTo(`${timing_list}`, 'nT'); |
||||
|
} |
||||
|
}, |
||||
|
isTip:true |
||||
|
}) |
||||
|
}, |
||||
|
goBack() { |
||||
|
uni.navigateBack({ |
||||
|
delta: 1 |
||||
|
}) |
||||
|
}, |
||||
|
// 操作接口请求 |
||||
|
operateReq({ |
||||
|
data, |
||||
|
succFun, |
||||
|
isTip = false, |
||||
|
isLoad = true, |
||||
|
|
||||
|
}) { |
||||
|
let that = this |
||||
|
if (isLoad) util.showLoad(); |
||||
|
deviceServer.post({ |
||||
|
url: deviceApi.ouxuanac, |
||||
|
data: data, |
||||
|
isDefaultGet: false, |
||||
|
}) |
||||
|
.then(res => { |
||||
|
if (isLoad) util.hideLoad(); |
||||
|
if (res.data.code == 0) { |
||||
|
if (isTip) util.showNone(res.data.message || '操作成功！'); |
||||
|
succFun(res.data.data) |
||||
|
} else { |
||||
|
if (isTip) util.showNone(res.data.message || '操作失败！'); |
||||
|
} |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
if (isLoad) util.hideLoad() |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import '~style/public.scss'; |
||||
|
|
||||
|
.airC-page { |
||||
|
|
||||
|
.t-title { |
||||
|
font-size: 44rpx; |
||||
|
color: #1A1A1A; |
||||
|
font-weight: 900; |
||||
|
margin: 60rpx auto 72rpx 40rpx; |
||||
|
} |
||||
|
|
||||
|
.t-box { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: flex-start; |
||||
|
width: 100%; |
||||
|
|
||||
|
.info-list { |
||||
|
margin-bottom: 50rpx; |
||||
|
width: 670rpx; |
||||
|
height: 470rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 10rpx; |
||||
|
font-size: 32rpx; |
||||
|
@include centerFlex(center); |
||||
|
flex-direction: column; |
||||
|
.i-box-up{ |
||||
|
width: 100%; |
||||
|
padding: 26rpx; |
||||
|
@include centerFlex(space-between); |
||||
|
.i-u-item{ |
||||
|
@include centerFlex(center); |
||||
|
width: 300rpx;height: 180rpx; |
||||
|
background: #F2F2F7; |
||||
|
border-radius: 4rpx; |
||||
|
position: relative; |
||||
|
> view{ |
||||
|
color: #009874;font-size: 80rpx; |
||||
|
} |
||||
|
> text{ |
||||
|
position: absolute; |
||||
|
} |
||||
|
> text:first-child{ |
||||
|
top: 20rpx; |
||||
|
left: 25rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #9C9C9F; |
||||
|
} |
||||
|
> text:last-child{ |
||||
|
top: 50rpx; |
||||
|
right: 70rpx; |
||||
|
color: #009874; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.i-box-down{ |
||||
|
margin: 20rpx 0 40rpx 0; |
||||
|
padding: 0 104rpx; |
||||
|
@include centerFlex(space-between); |
||||
|
width: 100%; |
||||
|
font-size: 24rpx; |
||||
|
color: #9A9A9D; |
||||
|
.i-d-item{ |
||||
|
@include centerFlex(center); |
||||
|
flex-direction: column; |
||||
|
image{ |
||||
|
margin-bottom: 15rpx; |
||||
|
width: 100rpx; |
||||
|
height: 100rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.control-pad{ |
||||
|
width: 720rpx; |
||||
|
> text{ |
||||
|
font-size: 28rpx; |
||||
|
color: #9C9C9F; |
||||
|
margin-left:20rpx; |
||||
|
} |
||||
|
.pad-box{ |
||||
|
margin-top: 30rpx; |
||||
|
margin-bottom: 30rpx; |
||||
|
width: 100%; |
||||
|
padding-left: 15rpx; |
||||
|
@include centerFlex(flex-start); |
||||
|
flex-wrap: wrap; |
||||
|
.b-item{ |
||||
|
margin-bottom:20rpx ; |
||||
|
@include centerFlex(center); |
||||
|
width: 160rpx; |
||||
|
height: 86rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 6rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #1A1A1A; |
||||
|
} |
||||
|
.m-right{ |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 底部css |
||||
|
.save-btn{ |
||||
|
width: 700rpx; |
||||
|
height: 110rpx; |
||||
|
text-align: center; |
||||
|
line-height: 110rpx; |
||||
|
background: #009874; |
||||
|
border-radius: 10px; |
||||
|
color: white; |
||||
|
} |
||||
|
.bottom-tips{ |
||||
|
font-size: 28rpx; |
||||
|
color: #1A1A1A; |
||||
|
text{ |
||||
|
color: #009874; |
||||
|
} |
||||
|
margin: 40rpx; |
||||
|
} |
||||
|
|
||||
|
//弹窗选择 |
||||
|
.voice_control_pad { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
z-index: 1; |
||||
|
.cover_bg { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
background: rgba($color: #000000, $alpha: .3); |
||||
|
z-index: 2; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.v_box { |
||||
|
z-index: 3; |
||||
|
width: 630rpx; |
||||
|
background-color: white; |
||||
|
border-radius: 10rpx; |
||||
|
scroll-view{ |
||||
|
margin-top: 30rpx; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: flex-start; |
||||
|
align-items: flex-start; |
||||
|
border-radius: 5rpx; |
||||
|
flex-wrap: wrap; |
||||
|
width: 100%; |
||||
|
height: 700rpx; |
||||
|
border-bottom: 1rpx solid #F2F2F7; |
||||
|
|
||||
|
.il-select-week{ |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
@include centerFlex(flex-start); |
||||
|
flex-wrap: wrap; |
||||
|
> view{ |
||||
|
@include centerFlex(center); |
||||
|
width: 160rpx; |
||||
|
height: 88rpx; |
||||
|
border: 2rpx solid #979797; |
||||
|
border-radius: 6rpx; |
||||
|
color: #979797; |
||||
|
margin-left: 40rpx; |
||||
|
margin-top: 40rpx; |
||||
|
} |
||||
|
.active{ |
||||
|
background: rgba(0,152,116,0.12); |
||||
|
border: 2rpx solid #009874;color: #009874; |
||||
|
} |
||||
|
} |
||||
|
|
||||
<style> |
|
||||
|
} |
||||
|
|
||||
|
.voice_btn { |
||||
|
width: 392rpx; |
||||
|
height: 112rpx; |
||||
|
background: #009874; |
||||
|
border-radius: 5rpx; |
||||
|
text-align: center; |
||||
|
line-height: 112rpx; |
||||
|
color: white; |
||||
|
font-size: 32rpx; |
||||
|
} |
||||
|
|
||||
|
.btn_active { |
||||
|
color: black; |
||||
|
background-color: rgba($color: #000000, $alpha: .4); |
||||
|
} |
||||
|
|
||||
|
.btn_white { |
||||
|
width: 204rpx; |
||||
|
height: 88rpx; |
||||
|
background-color: white; |
||||
|
color: #009874; |
||||
|
border: 1rpx solid #009874; |
||||
|
line-height: 88rpx; |
||||
|
} |
||||
|
|
||||
|
.btn_green { |
||||
|
width: 204rpx; |
||||
|
height: 88rpx; |
||||
|
background-color: #009874; |
||||
|
color: white; |
||||
|
line-height: 88rpx; |
||||
|
} |
||||
|
|
||||
|
.v_btns { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
margin: 50rpx 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
</style> |
</style> |
||||
|
After Width: 40 | Height: 40 | Size: 1.9 KiB |
|
After Width: 100 | Height: 100 | Size: 6.5 KiB |
|
After Width: 100 | Height: 100 | Size: 6.4 KiB |
|
After Width: 100 | Height: 100 | Size: 5.6 KiB |
5
src/subpackage/device/style/img_bg.scss
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue