zmt
4 years ago
11 changed files with 760 additions and 367 deletions
-
8src/pages.json
-
2src/subpackage/device/components/store_name/store_name.vue
-
2src/subpackage/device/js/device_api.js
-
33src/subpackage/device/js/ouxuanac.md
-
8src/subpackage/device/pages/index/index.vue
-
53src/subpackage/device/pages/switch_manage/switch_manage.vue
-
4src/subpackage/device/pages/timing/timing_list.vue
-
347src/subpackage/device/pages/timing/timing_setting.vue
-
BINsrc/subpackage/device/static/images/longOpen.png
-
BINsrc/subpackage/device/static/images/timing.png
@ -0,0 +1,347 @@ |
|||
<template> |
|||
<view class="timing-page"> |
|||
<store-name></store-name> |
|||
<view class="t-title">照明定时</view> |
|||
<view class="t-box"> |
|||
|
|||
<view class="info-list"> |
|||
<view class="il-switch"> |
|||
<text class="">时间动作</text> |
|||
<view class="">开<image src="../../../../static/images/icon/retail/choose.png" mode=""></image></view> |
|||
<view class="">关<image src="../../../../static/images/icon/retail/choose.png" mode=""></image></view> |
|||
</view> |
|||
<view class="il-select"> |
|||
<text class="">时间类型</text> |
|||
<view class=""> |
|||
<text>星期</text><image src="../../../../static/images/icon/arrow_b2.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
<view class="il-select-week"> |
|||
<block v-for="(e,i) in weekArrSelect" :key="i"> |
|||
<view class="" :class="e?'active':''" @click="clickWeekTab(i)">星期{{weekArrCN[i]}}</view> |
|||
</block> |
|||
</view> |
|||
<view class="il-select"> |
|||
<text class="">时间类型</text> |
|||
<view class=""> |
|||
<text>15:30</text><image src="../../../../static/images/icon/arrow_b2.png" mode=""></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="save-btn">保存</view> |
|||
<view class="bottom-tips">保存后发布后将会以最新的定时更新到欧轩智能中控，设备首页<text>定时列表</text>可查看最新发布</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" : "" |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// tabArr, |
|||
// infoArr, |
|||
weekArrCN, |
|||
weekArr:[0,1,2,3,4,5,6], |
|||
weekArrSelect:[false,false,false,false,false,false,false] |
|||
} |
|||
}, |
|||
async onLoad(opts) { |
|||
|
|||
try { |
|||
util.showLoad(); |
|||
let _brandInfo = await this.$store.dispatch('getBrandInfo'); |
|||
await this.$store.dispatch('getStoreList'); |
|||
util.hideLoad(); |
|||
} catch (err) { |
|||
util.hideLoad(); |
|||
} |
|||
|
|||
}, |
|||
onShow() { |
|||
this.updateList() //更新中控信息 |
|||
}, |
|||
watch: { |
|||
curStoreInfo(newVal, oldVal){ |
|||
// this.infoArr.length = 1 |
|||
this.updateList() |
|||
} |
|||
}, |
|||
methods: { |
|||
clickWeekTab(index) { |
|||
if(this.weekArrSelect[index]) { |
|||
this.$set(this.weekArrSelect,index,false) |
|||
}else{ |
|||
this.$set(this.weekArrSelect,index,true) |
|||
} |
|||
|
|||
}, |
|||
//删除计划任务 |
|||
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 |
|||
}) |
|||
} |
|||
}, |
|||
}) |
|||
}, |
|||
async updateList() { |
|||
let that = this |
|||
let timingData = { |
|||
"device": this.curStoreInfo.device_name, |
|||
"data": { |
|||
"name": "get-time-select", |
|||
"value": {} |
|||
} |
|||
} |
|||
|
|||
this.operateReq({ |
|||
data: timingData, |
|||
succFun: (list) => { |
|||
that.infoArr.length = 1; |
|||
list.forEach(async (item,i)=> { |
|||
if(item.day_of_week)item.day_of_week = item.day_of_week.sort((a,b)=>a-b);//后端数据未排序 |
|||
let timetxt = await that.getTimeTxt(item); |
|||
that.infoArr.push([item.expand_value.main.title||"-",timetxt||"-","删除",item.time_arrow_id]) |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
//该函数由后台管理前端提供逻辑, 与后台前端显示逻辑同步 |
|||
getTimeTxt(row) { |
|||
return new Promise((rs,rj)=>{ |
|||
let timeText = "" |
|||
if (!row.expand_value) { |
|||
rj('error') |
|||
} |
|||
if (row.type === 'DAY_OF_WEEK' && row.day_of_week) { |
|||
let arr = [] |
|||
for (let i = 0; i < row.day_of_week.length; i++) { |
|||
arr += ' 周' + ['日', '一', '二', '三', '四', '五', '六'][row.day_of_week[i]]; |
|||
} |
|||
timeText = `每个星期的 <strong>[${arr} ]</strong> ` |
|||
} |
|||
if (row.type === 'DAY_OF_MONTH' && row.day_of_month) { |
|||
let arr = [] |
|||
for (let i = 0; i < row.day_of_month.length; i++) { |
|||
arr += row.day_of_month[i] + '号 '; |
|||
} |
|||
timeText = `每个月的 <strong>[ ${arr} ]</strong> ` |
|||
} |
|||
if (row.type === 'DATE_SLICE' && row.date_slice) { |
|||
timeText = ` ${row.date_slice[0].start.substring(0, 10)}~${row.date_slice[0].end.substring(0, 10)}` |
|||
} |
|||
if (row.times_on_day && row.times_on_day.length) { |
|||
timeText += ` 当天<strong>${row.times_on_day[0].substring(0, 5)}</strong>` |
|||
} |
|||
if (!row.expand_value.main) return '历史错误数据'; |
|||
rs(` ${timeText} 执行 ${row.expand_value.main.value.status === 'high' ? '<strong style="color:gray;">[关闭]</strong>' : '<strong style="color:#009874;">[开启]</strong>'} 操作`) |
|||
}) |
|||
|
|||
}, |
|||
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'; |
|||
|
|||
.timing-page { |
|||
|
|||
.t-title { |
|||
font-size: 44rpx; |
|||
color: #1A1A1A; |
|||
font-weight: 900; |
|||
margin: 60rpx auto 72rpx 40rpx; |
|||
} |
|||
|
|||
.t-box { |
|||
height: 500rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
width: 100%; |
|||
|
|||
.info-list { |
|||
// margin-top: 30rpx; |
|||
margin-bottom: 50rpx; |
|||
padding: 50rpx 30rpx; |
|||
width: 700rpx; |
|||
height: auto; |
|||
background: #FFFFFF; |
|||
border-radius: 10rpx; |
|||
// font-size: 28rpx; |
|||
// height: 600rpx; |
|||
@include centerFlex(flex-start); |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
font-size: 32rpx; |
|||
.il-switch{ |
|||
width: 580rpx; |
|||
@include centerFlex(space-between); |
|||
> view{ |
|||
@include centerFlex(center); |
|||
image{ |
|||
margin-left: 20rpx; |
|||
width: 40rpx;height: 40rpx; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.il-select{ |
|||
margin-top: 50rpx; |
|||
@include centerFlex(flex-start); |
|||
text{ |
|||
|
|||
} |
|||
> view{ |
|||
@include centerFlex(space-between); |
|||
padding: 20rpx; |
|||
margin-left: 20rpx; |
|||
width: 480rpx; |
|||
height: 96rpx; |
|||
background: #FFFFFF; |
|||
border: 2rpx solid #D8D8D8; |
|||
border-radius: 10rpx; |
|||
text{ |
|||
color: #9C9C9F; |
|||
} |
|||
image{ |
|||
width: 28rpx; |
|||
height: 28rpx; |
|||
transform: rotate(90deg); |
|||
} |
|||
} |
|||
} |
|||
.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; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
// 底部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; |
|||
} |
|||
</style> |
|||
|
After Width: 100 | Height: 100 | Size: 6.3 KiB |
|
After Width: 100 | Height: 100 | Size: 5.1 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue