zmt
4 years ago
11 changed files with 567 additions and 11 deletions
-
9src/pages.json
-
29src/subpackage/device/components/store_name/store_name.vue
-
4src/subpackage/device/js/device_api.js
-
67src/subpackage/device/js/ouxuanac.md
-
2src/subpackage/device/pages/audio_manage/audio_manage.vue
-
131src/subpackage/device/pages/index/index.vue
-
336src/subpackage/device/pages/index/timing_list.vue
-
BINsrc/subpackage/device/static/images/arrow_b2_light.png
-
BINsrc/subpackage/device/static/images/arrow_back.png
-
BINsrc/subpackage/device/static/images/icon_clock.png
-
BINsrc/subpackage/device/static/images/index_bg.png
@ -0,0 +1,336 @@ |
|||||
|
<template> |
||||
|
<view class="timing-page"> |
||||
|
<store-name></store-name> |
||||
|
<view class="t-title">定时列表</view> |
||||
|
<view class="t-box"> |
||||
|
<view class="tab-list"> |
||||
|
<view class="t-item " :class="e.on?'active':''" v-for="(e,i) in tabArr" @click="clickTab(i)"> |
||||
|
{{e.name}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="info-list"> |
||||
|
<view class="i-item" v-for="(item,index) in infoArr"> |
||||
|
<view class="i-box">{{item[0]}}</view> |
||||
|
<rich-text class="i-box" :nodes="item[1]"></rich-text> |
||||
|
<!-- {{item[1]}} --> |
||||
|
<view class="i-box" v-if="isDel(item)" @click="delItem(item,index)" style="color: red;">{{item[2]}}</view> |
||||
|
<view class="i-box" v-else>{{item[2]}}</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 |
||||
|
}, |
||||
|
// { |
||||
|
// id: 1, |
||||
|
// name: '照明', |
||||
|
// path: ``, |
||||
|
// on: false |
||||
|
// }, |
||||
|
// { |
||||
|
// id: 2, |
||||
|
// name: '风扇', |
||||
|
// path: ``, |
||||
|
// on: false |
||||
|
// }, |
||||
|
// { |
||||
|
// id: 3, |
||||
|
// name: '水阀', |
||||
|
// path: ``, |
||||
|
// on: false |
||||
|
// }, |
||||
|
]; |
||||
|
const infoArr = [ |
||||
|
["标题", "时间", "操作"], |
||||
|
// ["2号场", "每个星期的 周日6:00 执行 开启 操作", "删除"], |
||||
|
]; |
||||
|
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, |
||||
|
} |
||||
|
}, |
||||
|
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: { |
||||
|
clickTab(i) { |
||||
|
this.tabArr.forEach((item) => { |
||||
|
item.on = false |
||||
|
}) |
||||
|
this.tabArr[i].on = 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 |
||||
|
}) |
||||
|
}, |
||||
|
goTimingList() { |
||||
|
let timing_list = "/subpackage/device/pages/index/timing_list" |
||||
|
util.routeTo(`${timing_list}`, 'nT'); |
||||
|
}, |
||||
|
// 操作接口请求 |
||||
|
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%; |
||||
|
|
||||
|
.tab-list { |
||||
|
width: 100%; |
||||
|
padding-left: 30rpx; |
||||
|
@include centerFlex(flex-start); |
||||
|
flex-wrap: nowrap; |
||||
|
position: relative; |
||||
|
|
||||
|
.t-item { |
||||
|
margin-right: 50rpx; |
||||
|
padding: 10rpx; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 900; |
||||
|
color: #9C9C9F; |
||||
|
line-height: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.active { |
||||
|
color: #009874; |
||||
|
@include centerFlex(center); |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.active:after { |
||||
|
position: absolute; |
||||
|
content: ""; |
||||
|
background-color: #009874; |
||||
|
color: #009874; |
||||
|
width: auto; |
||||
|
display: block; |
||||
|
width: 30rpx; |
||||
|
text-align: center; |
||||
|
height: 6rpx; |
||||
|
border-radius: 3rpx; |
||||
|
top: 60rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info-list { |
||||
|
margin-top: 30rpx; |
||||
|
margin-bottom: 50rpx; |
||||
|
width: 700rpx; |
||||
|
height: auto; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 10rpx; |
||||
|
font-size: 28rpx; |
||||
|
|
||||
|
.i-item { |
||||
|
@include centerFlex(space-between); |
||||
|
|
||||
|
.i-box { |
||||
|
@include centerFlex(center); |
||||
|
flex-direction: row; |
||||
|
padding: 26rpx 10rpx; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.i-box:first-child { |
||||
|
width: 176rpx; |
||||
|
} |
||||
|
|
||||
|
.i-box:nth-child(2) { |
||||
|
width: 100%; |
||||
|
border: 1rpx solid #F2F2F7; |
||||
|
border-bottom: none; |
||||
|
border-top: none; |
||||
|
} |
||||
|
|
||||
|
.i-box:last-child { |
||||
|
width: 114rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.i-item:not(:last-child) { |
||||
|
border-bottom: 1rpx solid #F2F2F7; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
After Width: 14 | Height: 14 | Size: 311 B |
|
After Width: 20 | Height: 20 | Size: 395 B |
|
After Width: 14 | Height: 14 | Size: 512 B |
|
After Width: 187 | Height: 155 | Size: 16 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue