3 changed files with 321 additions and 173 deletions
@ -1,171 +0,0 @@ |
|||||
<template> |
|
||||
<div class="app-container"> |
|
||||
<!-- 搜索栏 --> |
|
||||
<div class="head-container"> |
|
||||
<el-row type="flex"> |
|
||||
<el-col :span="20" class="col_flex"> |
|
||||
<div class="form_item"> |
|
||||
<span>设备ID</span> |
|
||||
<el-input v-model="query.blurry" clearable size="small" placeholder="请输入设备ID" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" /> |
|
||||
</div> |
|
||||
<div class="form_item"> |
|
||||
<span>设备名称</span> |
|
||||
<el-input v-model="query.blurry" clearable size="small" placeholder="请输入设备名称" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" /> |
|
||||
</div> |
|
||||
<rrOperation /> |
|
||||
</el-col> |
|
||||
<el-col class="page_add" :span="4"> |
|
||||
<el-button class="setting_btn" type="primary" icon="el-icon-setting">配置</el-button> |
|
||||
<el-button class="table_add" type="primary" icon="el-icon-delete" disabled>清空</el-button> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</div> |
|
||||
<el-row :gutter="15"> |
|
||||
<el-col> |
|
||||
<el-card class="box-card" shadow="never"> |
|
||||
<el-table style="width: 100%;" :data="tableData"> |
|
||||
<el-table-column :selectable="checkboxT" type="selection" width="55" /> |
|
||||
<el-table-column prop="id" label="设备ID" align="center" /> |
|
||||
<el-table-column prop="account" label="设备账号" align="center" /> |
|
||||
<el-table-column prop="name" label="设备名称" align="center" /> |
|
||||
<el-table-column prop="orientation" label="设备方向" align="center" /> |
|
||||
<el-table-column prop="period" label="配置周期" align="center" width="300" /> |
|
||||
<el-table-column prop="cover" label="启动画面" align="center"> |
|
||||
<template slot-scope="scope"> |
|
||||
<el-image class="cover_img" :src="scope.row.cover" /> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column prop="date" label="创建时间" align="center" width="200" /> |
|
||||
<el-table-column fixed="right" label="操作" align="center"> |
|
||||
<template slot-scope="scope"> |
|
||||
<el-button type="primary" icon="el-icon-edit" @click="edit(scope.$index, scope.row)" /> |
|
||||
<el-button type="info" icon="el-icon-info" /> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
<!--分页组件--> |
|
||||
<pagination /> |
|
||||
</el-card> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
<!-- 编辑设备 --> |
|
||||
<div class="layer"> |
|
||||
<el-dialog title="配置" :close-on-click-modal="false" :visible.sync="addFromVisible" width="600px"> |
|
||||
<el-form ref="form" inline="true" :model="form" :rules="rules" label-width="100px"> |
|
||||
<el-form-item label="开机时间" prop="uptime"> |
|
||||
<span>设置时间：</span> |
|
||||
<el-radio-group v-model="form.time"> |
|
||||
<el-radio label="每天" /> |
|
||||
<el-radio label="每周" /> |
|
||||
</el-radio-group> |
|
||||
<!-- <el-form-item label="活动性质" prop="type"> |
|
||||
<el-checkbox-group v-model="ruleForm.type"> |
|
||||
<el-checkbox label="美食/餐厅线上活动" name="type" /> |
|
||||
<el-checkbox label="地推活动" name="type" /> |
|
||||
<el-checkbox label="线下主题活动" name="type" /> |
|
||||
<el-checkbox label="单纯品牌曝光" name="type" /> |
|
||||
</el-checkbox-group> |
|
||||
</el-form-item> --> |
|
||||
<el-checkbox-group v-model="form.week"> |
|
||||
<el-checkbox label="周一" name="week" /> |
|
||||
<el-checkbox label="周二" name="week" /> |
|
||||
<el-checkbox label="周三" name="week" /> |
|
||||
<el-checkbox label="周四" name="week" /> |
|
||||
<el-checkbox label="周五" name="week" /> |
|
||||
<el-checkbox label="周六" name="week" /> |
|
||||
<el-checkbox label="周日" name="week" /> |
|
||||
</el-checkbox-group> |
|
||||
</el-form-item> |
|
||||
<!-- el-form-item label="设备名称" prop="name"><el-input v-model="form.name" style="width: 200px" /></el-form-item> |
|
||||
<el-form-item label="设备方向" prop="orientation"> |
|
||||
<el-select v-model="form.orientation" size="small" class="filter-item" style="width: 200px"> |
|
||||
<el-option v-for="item in deviceData" :key="item.key" :label="item.name" :value="item.key" /> |
|
||||
</el-select> |
|
||||
</el-form-item> --> |
|
||||
</el-form> |
|
||||
<div slot="footer" class="dialog-footer"> |
|
||||
<el-button @click="addFromVisible = false">取 消</el-button> |
|
||||
<el-button type="primary" @click="submitForm('form')">确 定</el-button> |
|
||||
</div> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import crudUser from '@/api/system/user' |
|
||||
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
|
||||
import rrOperation from '@crud/RR.operation' |
|
||||
import pagination from '@crud/Pagination' |
|
||||
const defaultForm = { |
|
||||
time: null, |
|
||||
week: [], |
|
||||
orientation: null |
|
||||
} |
|
||||
export default { |
|
||||
name: 'DeviceConfig', |
|
||||
components: { rrOperation, pagination }, |
|
||||
cruds() { |
|
||||
return CRUD({ |
|
||||
title: '用户', |
|
||||
url: 'api/users', |
|
||||
crudMethod: { ...crudUser } |
|
||||
}) |
|
||||
}, |
|
||||
mixins: [presenter(), header(), form(defaultForm), crud()], |
|
||||
data() { |
|
||||
return { |
|
||||
addFromVisible: false, |
|
||||
tableData: [ |
|
||||
{ |
|
||||
id: 'XXXXXXXXX', |
|
||||
account: '13476289682', |
|
||||
name: 'GCXR2', |
|
||||
orientation: '竖屏', |
|
||||
period: '每周（一/二/三/四/五）- 开机 - 8:00-18:00', |
|
||||
cover: 'https://qiniu.aiyxlib.com/1636076789085.png', |
|
||||
date: '2021-09-14 16:35' |
|
||||
} |
|
||||
], |
|
||||
stateData: [{ key: '0', name: '全部' }, { key: '1', name: '在线' }, { key: '2', name: '离线' }], |
|
||||
deviceData: [{ key: '0', name: '竖屏' }, { key: '1', name: '横屏' }], |
|
||||
rules: { |
|
||||
name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }, { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }], |
|
||||
orientation: [{ required: true, message: '请选择设备方向', trigger: 'change' }] |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
computed: {}, |
|
||||
watch: {}, |
|
||||
methods: { |
|
||||
// 编辑 |
|
||||
edit(index, row) { |
|
||||
this.addFromVisible = true |
|
||||
this.form.account = row.account |
|
||||
this.form.name = row.name |
|
||||
}, |
|
||||
submitForm(formName) { |
|
||||
this.$refs[formName].validate(valid => { |
|
||||
if (valid) { |
|
||||
alert('submit!') |
|
||||
} else { |
|
||||
console.log('error submit!!') |
|
||||
return false |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.col_flex { |
|
||||
display: flex; |
|
||||
} |
|
||||
.setting_btn{ |
|
||||
margin-right: 10px; |
|
||||
} |
|
||||
.cover_img{ |
|
||||
width: 65px; |
|
||||
} |
|
||||
|
|
||||
</style> |
|
||||
@ -0,0 +1,319 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<!-- 搜索栏 --> |
||||
|
<div class="head-container"> |
||||
|
<el-row type="flex"> |
||||
|
<el-col :span="20" class="col_flex"> |
||||
|
<div class="form_item"> |
||||
|
<span>设备ID</span> |
||||
|
<el-input v-model="query.blurry" clearable size="small" placeholder="请输入设备ID" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" /> |
||||
|
</div> |
||||
|
<div class="form_item"> |
||||
|
<span>设备名称</span> |
||||
|
<el-input v-model="query.blurry" clearable size="small" placeholder="请输入设备名称" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" /> |
||||
|
</div> |
||||
|
<rrOperation /> |
||||
|
</el-col> |
||||
|
<el-col class="page_add" :span="4"> |
||||
|
<el-button class="setting_btn" type="primary" icon="el-icon-setting">配置</el-button> |
||||
|
<el-button class="table_add" type="primary" icon="el-icon-delete" :disabled="clearBtnDisabled">清空</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<el-row :gutter="15"> |
||||
|
<el-col> |
||||
|
<el-card class="box-card" shadow="never"> |
||||
|
<el-table style="width: 100%;" :data="tableData" @selection-change="handleSelectionChange"> |
||||
|
<el-table-column type="selection" width="55" /> |
||||
|
<el-table-column prop="id" label="设备ID" align="center" /> |
||||
|
<el-table-column prop="account" label="设备账号" align="center" /> |
||||
|
<el-table-column prop="name" label="设备名称" align="center" /> |
||||
|
<el-table-column prop="orientation" label="设备方向" align="center" /> |
||||
|
<el-table-column prop="period" label="配置周期" align="center" width="300" /> |
||||
|
<el-table-column prop="cover" label="启动画面" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-image class="cover_img" :src="scope.row.cover" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="date" label="创建时间" align="center" width="200" /> |
||||
|
<el-table-column fixed="right" label="操作" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button type="primary" icon="el-icon-edit" @click="edit(scope.$index, scope.row)" /> |
||||
|
<el-button type="info" icon="el-icon-info" /> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<!--分页组件--> |
||||
|
<pagination /> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<!-- 编辑设备 --> |
||||
|
<div class="layer device_layer"> |
||||
|
<el-dialog title="配置" :close-on-click-modal="false" :visible.sync="addFromVisible" width="700px"> |
||||
|
<el-form ref="form" :model="form"> |
||||
|
<div class="setting_item"> |
||||
|
<h4>开机时间</h4> |
||||
|
<div class="setting_cont"> |
||||
|
<span>设置时间：</span> |
||||
|
<div> |
||||
|
<el-form-item |
||||
|
prop="ontime" |
||||
|
:rules="[ |
||||
|
{ required: true, message: '请选择开机时间', trigger: 'change' }, |
||||
|
]" |
||||
|
:class="{'no_margin': form.ontime === '每周'}" |
||||
|
> |
||||
|
<el-radio-group v-model="form.ontime" @change="clearCheckbox()"> |
||||
|
<el-radio label="每天" value="everyday" /> |
||||
|
<el-radio label="每周" value="weekly" /> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
v-if="form.ontime === '每周'" |
||||
|
:class="{'weekly_margin': form.ontime === '每周'}" |
||||
|
prop="onweek" |
||||
|
:rules="[ |
||||
|
{ required: true, message: '请选择每周开机时间', trigger: 'change' }, |
||||
|
]" |
||||
|
> |
||||
|
<el-checkbox-group v-model="form.onweek"> |
||||
|
<el-checkbox label="周一" name="onweek" /> |
||||
|
<el-checkbox label="周二" name="onweek" /> |
||||
|
<el-checkbox label="周三" name="onweek" /> |
||||
|
<el-checkbox label="周四" name="onweek" /> |
||||
|
<el-checkbox label="周五" name="onweek" /> |
||||
|
<el-checkbox label="周六" name="onweek" /> |
||||
|
<el-checkbox label="周日" name="onweek" /> |
||||
|
</el-checkbox-group> |
||||
|
</el-checkbox-groupv-model="form.onweek"></el-form-item> |
||||
|
<el-form-item |
||||
|
prop="ontimeValue" |
||||
|
:rules="[ |
||||
|
{ type: 'date', required: true, message: '请选择具体开机时间', trigger: 'change' }, |
||||
|
]" |
||||
|
> |
||||
|
<el-time-picker |
||||
|
v-model="form.ontimeValue" |
||||
|
:picker-options="{ |
||||
|
selectableRange: '00:00:00 - 23:59:59' |
||||
|
}" |
||||
|
placeholder="任意时间点" |
||||
|
value-format="HH:MM:SS" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="setting_item"> |
||||
|
<h4>关机时间</h4> |
||||
|
<div class="setting_cont"> |
||||
|
<span>设置时间：</span> |
||||
|
<div> |
||||
|
<el-form-item |
||||
|
prop="offtime" |
||||
|
:rules="[ |
||||
|
{ required: true, message: '请选择关机时间', trigger: 'change' }, |
||||
|
]" |
||||
|
:class="{'no_margin': form.offtime === '每周'}" |
||||
|
> |
||||
|
<el-radio-group v-model="form.offtime" @change="clearCheckbox()"> |
||||
|
<el-radio label="每天" value="everyday" /> |
||||
|
<el-radio label="每周" value="weekly" /> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
v-if="form.offtime === '每周'" |
||||
|
:class="{'weekly_margin': form.offtime === '每周'}" |
||||
|
prop="offweek" |
||||
|
:rules="[ |
||||
|
{ required: true, message: '请选择每周关机时间', trigger: 'change' }, |
||||
|
]" |
||||
|
> |
||||
|
<el-checkbox-group v-model="form.offweek"> |
||||
|
<el-checkbox label="周一" name="offweek" /> |
||||
|
<el-checkbox label="周二" name="offweek" /> |
||||
|
<el-checkbox label="周三" name="offweek" /> |
||||
|
<el-checkbox label="周四" name="offweek" /> |
||||
|
<el-checkbox label="周五" name="offweek" /> |
||||
|
<el-checkbox label="周六" name="offweek" /> |
||||
|
<el-checkbox label="周日" name="offweek" /> |
||||
|
</el-checkbox-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item |
||||
|
prop="offtimeValue" |
||||
|
:rules="[ |
||||
|
{ required: true, message: '请选择具体关机时间', trigger: 'change' }, |
||||
|
]" |
||||
|
> |
||||
|
<el-time-picker |
||||
|
v-model="form.offtimeValue" |
||||
|
:picker-options="{ |
||||
|
selectableRange: '00:00:00 - 23:59:59' |
||||
|
}" |
||||
|
placeholder="任意时间点" |
||||
|
value-format="HH:MM:SS" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="setting_item"> |
||||
|
<h4>设备方向</h4> |
||||
|
<div class="setting_cont"> |
||||
|
<span>设备方向：</span> |
||||
|
<el-form-item |
||||
|
prop="orientation" |
||||
|
:rules="[ |
||||
|
{ required: true, message: '请选择具体关机时间', trigger: 'change' }, |
||||
|
]" |
||||
|
> |
||||
|
<el-select v-model="form.orientation" size="small" class="filter-item" style="width: 220px"> |
||||
|
<el-option v-for="item in deviceData" :key="item.key" :label="item.name" :value="item.key" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="setting_item"> |
||||
|
<h4>启动画面</h4> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="resetForm('form')">取 消</el-button> |
||||
|
<el-button type="primary" @click="submitForm('form')">确 定</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import crudUser from '@/api/system/user' |
||||
|
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
||||
|
import rrOperation from '@crud/RR.operation' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
const defaultForm = { |
||||
|
ontime: null, |
||||
|
offtime: null, |
||||
|
onweek: [], |
||||
|
offweek: [], |
||||
|
orientation: null, |
||||
|
ontimeValue: '', |
||||
|
offtimeValue: '' |
||||
|
} |
||||
|
export default { |
||||
|
name: 'DeviceConfig', |
||||
|
components: { rrOperation, pagination }, |
||||
|
cruds() { |
||||
|
return CRUD({ |
||||
|
title: '用户', |
||||
|
url: 'api/users', |
||||
|
crudMethod: { ...crudUser } |
||||
|
}) |
||||
|
}, |
||||
|
mixins: [presenter(), header(), form(defaultForm), crud()], |
||||
|
data() { |
||||
|
return { |
||||
|
addFromVisible: false, |
||||
|
selectedList: [], |
||||
|
clearBtnDisabled: true, |
||||
|
tableData: [ |
||||
|
{ |
||||
|
id: 'XXXXXXXXX', |
||||
|
account: '13476289682', |
||||
|
name: 'GCXR2', |
||||
|
orientation: '竖屏', |
||||
|
period: '每周（一/二/三/四/五）- 开机 - 8:00-18:00', |
||||
|
cover: 'https://qiniu.aiyxlib.com/1636076789085.png', |
||||
|
date: '2021-09-14 16:35' |
||||
|
} |
||||
|
], |
||||
|
deviceData: [{ key: '0', name: '竖屏' }, { key: '1', name: '横屏' }] |
||||
|
} |
||||
|
}, |
||||
|
computed: {}, |
||||
|
watch: {}, |
||||
|
methods: { |
||||
|
// 编辑 |
||||
|
edit(index, row) { |
||||
|
this.addFromVisible = true |
||||
|
}, |
||||
|
clearCheckbox() { |
||||
|
if (this.form.ontime === '每天') { |
||||
|
this.form.onweek = [] |
||||
|
} |
||||
|
if (this.form.offtime === '每天') { |
||||
|
this.form.offweek = [] |
||||
|
} |
||||
|
}, |
||||
|
resetForm(formName) { |
||||
|
this.addFromVisible = false |
||||
|
this.$refs[formName].resetFields() |
||||
|
}, |
||||
|
submitForm(formName) { |
||||
|
console.log(this.form) |
||||
|
this.$refs[formName].validate(valid => { |
||||
|
if (valid) { |
||||
|
alert('submit!') |
||||
|
} else { |
||||
|
console.log('error submit!!') |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
handleSelectionChange(val) { |
||||
|
this.selectedList = val |
||||
|
if (val.length > 0) { |
||||
|
this.clearBtnDisabled = false |
||||
|
} else { |
||||
|
this.clearBtnDisabled = true |
||||
|
} |
||||
|
console.log(val) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.col_flex { |
||||
|
display: flex; |
||||
|
} |
||||
|
.setting_btn{ |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
.cover_img{ |
||||
|
width: 65px; |
||||
|
} |
||||
|
.device_layer{ |
||||
|
::v-deep .el-dialog__body{ |
||||
|
padding: 0 20px; |
||||
|
} |
||||
|
.setting_cont{ |
||||
|
display: flex; |
||||
|
span{ |
||||
|
display: block; |
||||
|
width: 80px; |
||||
|
line-height: 32px; |
||||
|
} |
||||
|
.no_margin { |
||||
|
margin: 0; |
||||
|
} |
||||
|
.weekly_margin{ |
||||
|
margin-bottom: 6px; |
||||
|
::v-deep .el-form-item__error{ |
||||
|
top: 70%; |
||||
|
} |
||||
|
} |
||||
|
::v-deep .el-form-item--small.el-form-item:last-child{ |
||||
|
margin: 0; |
||||
|
} |
||||
|
::v-deep .el-radio-group{ |
||||
|
display: block; |
||||
|
// line-height: 32px; |
||||
|
.el-radio{ |
||||
|
line-height: 32px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue