xuhuajiao
/
canvasScreen_admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

设备管理2

dev
xuhuajiao 4 years ago
parent
d26c292e8a
commit
afee0e3125
3 changed files with 321 additions and 173 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/router/routers.js
  2. 171
      src/views/device/config.vue
  3. 319
      src/views/device/deviceConfig.vue

4
src/router/routers.js
View File

@ -133,8 +133,8 @@ export const constantRouterMap = [
}
},
{
path: '/config',
component: () => import('@/views/device/config'),
path: '/deviceConfig',
component: () => import('@/views/device/deviceConfig'),
meta: {
title: '开关机配置',
icon: 'edit'

171
src/views/device/config.vue
View File

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

319
src/views/device/deviceConfig.vue
View File

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