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> |
|||
|
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