You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
530 lines
17 KiB
530 lines
17 KiB
<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="queryInfo.device_id" clearable size="small" placeholder="请输入设备ID" style="width: 200px" class="filter-item" @keyup.enter.native="getStartUpList" @blur="getStartUpList" />
|
|
</div>
|
|
<div class="form_item">
|
|
<span>设备名称：</span>
|
|
<el-input v-model="queryInfo.device_name" clearable size="small" placeholder="请输入设备名称" style="width: 200px" class="filter-item" @keyup.enter.native="getStartUpList" @blur="getStartUpList" />
|
|
</div>
|
|
</el-col>
|
|
<el-col class="page_add" :span="4">
|
|
<el-button class="table_add clear_btn" plain :disabled="clearBtnDisabled" @click="removeStartUp(sels)">清空</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<!-- 配置开关机列表 -->
|
|
<el-row :gutter="15">
|
|
<el-col>
|
|
<el-table style="width: 100%;" :data="startUpList" :header-cell-style="{ background: '#3a8aeb', color: '#fff' }" @selection-change="handleSelectionChange">
|
|
<el-table-column type="selection" width="55" />
|
|
<el-table-column prop="device_id" label="设备ID" align="center" />
|
|
<el-table-column prop="device_account" label="设备账号" align="center" width="150" />
|
|
<el-table-column prop="device_name" label="设备名称" align="center" />
|
|
<el-table-column label="设备方向" align="center">
|
|
<template slot-scope="{row}">
|
|
<div>{{ row.device_direction==1? '竖屏' : '横屏' }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="period" label="配置周期" align="center" width="300">
|
|
<template slot-scope="{row}">
|
|
<div v-show="row.open_setting">{{ row.open_setting==1? '每天 - 开机 '+row.open_time :'每周'+setWeekly(row.open_weekly)+'开机'+row.open_time }}</div>
|
|
<div v-show="row.open_setting">{{ row.close_setting==1?'每天 - 关机'+row.close_time :'每周'+setWeekly(row.close_weekly)+'关机'+row.close_time }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="启动画面" align="center">
|
|
<template slot-scope="{row}">
|
|
<el-image v-show="row.startup_screen" class="cover_img" :src="row.startup_screen" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="update_time" label="创建时间" align="center" width="200">
|
|
<template slot-scope="{row}">
|
|
<div>{{ row.update_time | parseTime }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column fixed="right" label="操作" align="center" width="120">
|
|
<template slot-scope="scope">
|
|
<el-button type="primary" class="edit_btn" @click="editFormData(scope.row)">编辑</el-button>
|
|
<el-button type="info" class="record_btn">记录</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination style="margin-top: 20px;" background :current-page="queryInfo.page" :total="total" :page-size="queryInfo.size" :pager-count="7" :page-sizes="[3, 5, 10]" layout="prev, pager, next, jumper,->,sizes,total" @current-change="getStartUpList" @size-change="handleSizeChange" />
|
|
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 编辑设备 -->
|
|
<div class="layer device_layer">
|
|
<el-dialog title="编辑" :close-on-click-modal="false" :show-close="false" :visible.sync="addFromVisible" width="880px">
|
|
<el-form ref="form" :model="form">
|
|
<div class="setting_item">
|
|
<h4>开机时间</h4>
|
|
<div class="setting_cont">
|
|
<span>设置时间：</span>
|
|
<div>
|
|
<el-form-item
|
|
prop="open_setting"
|
|
:rules="[
|
|
{ required: true, message: '请选择开机时间', trigger: 'change' },
|
|
]"
|
|
:class="{'no_margin': form.open_setting === 2}"
|
|
>
|
|
<el-radio-group v-model="form.open_setting" @change="clearCheckbox()">
|
|
<el-radio :label="1" value="everyday">每天</el-radio>
|
|
<el-radio :label="2" value="weekly">每周</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="form.open_setting === 2"
|
|
:class="{'weekly_margin': form.open_setting === 2}"
|
|
prop="open_weekly"
|
|
:rules="[
|
|
{ required: true, message: '请选择每周开机时间', trigger: 'change' },
|
|
]"
|
|
>
|
|
<el-checkbox-group v-model="selectOpenWeekly">
|
|
<el-checkbox v-for="item in weeklyList" :key="item.id" :label="item.id" :value="item.id" name="type">{{ item.name }}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
prop="open_time"
|
|
:rules="[
|
|
{type: 'string', required: true, message: '请选择具体开机时间', trigger: 'change' },
|
|
]"
|
|
>
|
|
<el-time-picker
|
|
v-model="form.open_time"
|
|
: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="close_setting"
|
|
:rules="[
|
|
{required: true, message: '请选择关机时间', trigger: 'change' },
|
|
]"
|
|
:class="{'no_margin': form.close_setting === 2}"
|
|
>
|
|
<el-radio-group v-model="form.close_setting" @change="clearCheckbox()">
|
|
<el-radio :label="1" value="everyday">每天</el-radio>
|
|
<el-radio :label="2" value="weekly">每周</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="form.close_setting === 2"
|
|
:class="{'weekly_margin': form.close_setting === 2}"
|
|
prop="close_weekly"
|
|
:rules="[
|
|
{ required: true, message: '请选择每周关机时间', trigger: 'change' },
|
|
]"
|
|
>
|
|
<el-checkbox-group v-model="selectCloseweekly">
|
|
<el-checkbox v-for="item in weeklyList" :key="item.id" :label="item.id" :value="item.id" name="type">{{ item.name }}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
prop="close_time"
|
|
:rules="[
|
|
{type: 'string', required: true, message: '请选择具体关机时间', trigger: 'change' },
|
|
]"
|
|
>
|
|
<el-time-picker
|
|
v-model="form.close_time"
|
|
: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="device_direction_name"
|
|
:rules="[
|
|
{ required: true, message: '请选择具体设备方向', trigger: 'change' },
|
|
]"
|
|
>
|
|
<el-select v-model="form.device_direction_name" size="small" class="filter-item" value-key="name" @change="selectDirection">
|
|
<el-option v-for="item in deviceData" :key="item.key" :label="item.name" :value="item" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
<div class="setting_item">
|
|
<h4>启动画面</h4>
|
|
<!-- action="https://jsonplaceholder.typicode.com/posts/" -->
|
|
<div class="setting_cont upload_img">
|
|
<el-form-item prop="startup_screen">
|
|
<UploadCover ref="childUpload" />
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" round @click="submitForm('form')">确 定</el-button>
|
|
<el-button round @click="resetForm('form')">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import UploadCover from '../components/upload_cover.vue'
|
|
import { reqStartUpList, reqEditStartUp, reqClearStartUp } from '@/api/device/startUpList.js'
|
|
import { parseTime } from '@/utils/index.js'
|
|
export default {
|
|
name: 'DeviceConfig',
|
|
components: { UploadCover },
|
|
filters: {
|
|
parseTime(time, cFormat) {
|
|
return parseTime(time, cFormat)
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
query: {
|
|
blurry: ''
|
|
},
|
|
// 获取开关机列表的参数
|
|
queryInfo: {
|
|
device_id: '',
|
|
device_name: '',
|
|
is_state: '',
|
|
page: 1,
|
|
size: 10
|
|
},
|
|
total: 0,
|
|
// 开关机列表的数据
|
|
startUpList: [],
|
|
form: {
|
|
device_direction: null,
|
|
device_direction_name: null,
|
|
device_id: '',
|
|
open_setting: null, // 开机状态的每天和每周
|
|
close_setting: null, // 关机状态的每天和每周
|
|
open_time: '', // 具体的开机时间
|
|
close_time: '', // 具体的关机时间
|
|
startup_screen: '', // 启动画面的图片
|
|
open_weekly: [],
|
|
close_weekly: []
|
|
},
|
|
selectOpenWeekly: [], // 选中的开机每周状态
|
|
selectCloseweekly: [], // 选中的关机机每周状态
|
|
addFromVisible: false,
|
|
// 被选中的行
|
|
sels: [],
|
|
clearBtnDisabled: true,
|
|
deviceData: [{ key: '1', name: '竖屏' }, { key: '2', name: '横屏' }],
|
|
weeklyList: [
|
|
{
|
|
id: '0',
|
|
name: '周日'
|
|
},
|
|
{
|
|
id: '1',
|
|
name: '周一'
|
|
},
|
|
{
|
|
id: '2',
|
|
name: '周二'
|
|
},
|
|
{
|
|
id: '3',
|
|
name: '周三'
|
|
},
|
|
{
|
|
id: '4',
|
|
name: '周四'
|
|
},
|
|
{
|
|
id: '5',
|
|
name: '周五'
|
|
},
|
|
{
|
|
id: '6',
|
|
name: '周六'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
// 将字符串渲染成汉字显示到页面
|
|
setWeekly() {
|
|
const a = {
|
|
0: '日',
|
|
1: '一',
|
|
2: '二',
|
|
3: '三',
|
|
4: '四',
|
|
5: '五',
|
|
6: '六'
|
|
}
|
|
return function(str) {
|
|
if (str) {
|
|
return str.split(',').map(i => a[i]).join('/')
|
|
}
|
|
}
|
|
}
|
|
|
|
},
|
|
watch: {},
|
|
mounted() {
|
|
this.getStartUpList()
|
|
},
|
|
methods: {
|
|
// 获取开关机列表
|
|
getStartUpList() {
|
|
// this.queryInfo.page = pager
|
|
const params = this.queryInfo
|
|
reqStartUpList(params).then(res => {
|
|
if (res.code == 200) {
|
|
this.startUpList = res.data.content
|
|
this.total = res.data.totalElements
|
|
this.queryInfo.size = res.data.size
|
|
} else {
|
|
return this.$message.error('获取设备列表失败！')
|
|
}
|
|
})
|
|
},
|
|
// 编辑开关机
|
|
editFormData(row) {
|
|
this.addFromVisible = true
|
|
this.form.device_id = row.device_id
|
|
this.form.open_setting = row.open_setting
|
|
this.form.close_setting = row.close_setting
|
|
this.form.open_time = row.open_time
|
|
this.form.close_time = row.close_time
|
|
this.form.startup_screen = row.startup_screen
|
|
this.form.open_weekly = row.open_weekly
|
|
if (row.open_weekly) {
|
|
this.selectOpenWeekly = row.open_weekly.split(',')
|
|
}
|
|
this.form.close_weekly = row.close_weekly
|
|
if (row.close_weekly) {
|
|
this.selectCloseweekly = row.close_weekly.split(',')
|
|
}
|
|
this.form.device_direction_name = row.device_direction == 1 ? '竖屏' : '横屏'
|
|
this.form.device_direction = row.device_direction
|
|
this.$nextTick(() => {
|
|
this.$refs.childUpload.imageUrl = this.form.startup_screen
|
|
})
|
|
},
|
|
// 每天/每周切换的情况下数据处理
|
|
clearCheckbox() {
|
|
if (this.form.open_setting === 1) {
|
|
this.open_weekly = []
|
|
this.form.open_weekly = null
|
|
}
|
|
if (this.form.close_setting === 1) {
|
|
this.close_weekly = []
|
|
this.form.close_weekly = null
|
|
}
|
|
},
|
|
// 选择设备方向处理
|
|
selectDirection(selVal) {
|
|
console.log(selVal)
|
|
this.form.device_direction = selVal.key
|
|
this.form.device_direction_name = selVal.name
|
|
},
|
|
// 重置表单数据
|
|
resetForm(formName) {
|
|
this.addFromVisible = false
|
|
this.$refs[formName].resetFields()
|
|
},
|
|
// 提交表单数据
|
|
submitForm(formName) {
|
|
this.form.startup_screen = this.$refs.childUpload.imageUrl
|
|
if (this.form.open_setting === 2) {
|
|
this.form.open_weekly = this.selectOpenWeekly.join(',')
|
|
}
|
|
if (this.form.close_setting === 2) {
|
|
this.form.close_weekly = this.selectCloseweekly.join(',')
|
|
}
|
|
this.$refs[formName].validate(valid => {
|
|
if (valid) {
|
|
const params = {
|
|
close_setting: this.form.close_setting,
|
|
close_time: this.form.close_time,
|
|
close_weekly: this.form.close_weekly,
|
|
device_id: this.form.device_id,
|
|
open_setting: this.form.open_setting,
|
|
open_time: this.form.open_time,
|
|
open_weekly: this.form.open_weekly,
|
|
device_direction: this.form.device_direction,
|
|
startup_screen: this.form.startup_screen
|
|
}
|
|
console.log(params)
|
|
reqEditStartUp(params).then(res => {
|
|
if (res.code == 200) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '修改设备成功'
|
|
})
|
|
this.addFromVisible = false
|
|
this.getStartUpList(this.queryInfo.page)
|
|
}
|
|
})
|
|
} else {
|
|
console.log('error submit!!')
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
// 列表多选操作 - 清空btn状态
|
|
// 单选单个复选框
|
|
handleSelectionChange(sels) {
|
|
this.sels = sels
|
|
if (sels.length > 0) {
|
|
this.clearBtnDisabled = false
|
|
} else {
|
|
this.clearBtnDisabled = true
|
|
}
|
|
},
|
|
// 清空
|
|
removeStartUp(rows) {
|
|
const ids = []
|
|
rows.forEach(item => {
|
|
ids.push(item.device_id)
|
|
})
|
|
// console.log(ids)
|
|
this.$confirm('确定要清空选中的配置周期和启动画面吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
const params = {
|
|
ids
|
|
}
|
|
reqClearStartUp(params).then(res => {
|
|
console.log(res)
|
|
if (res.code == 200) {
|
|
this.$message({
|
|
message: '清空成功',
|
|
type: 'success'
|
|
})
|
|
this.getStartUpList(this.startUpList.length > 1 ? this.queryInfo.page : this.queryInfo.page - 1)
|
|
}
|
|
}).catch(() => {
|
|
this.$message({
|
|
message: '清空失败',
|
|
type: 'info'
|
|
})
|
|
})
|
|
})
|
|
},
|
|
// 每条显示数据改变时的事件
|
|
handleSizeChange(size) {
|
|
// 整理参数
|
|
this.queryInfo.size = size
|
|
this.getStartUpList()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.setting_btn {
|
|
margin-right: 10px;
|
|
}
|
|
.clear_btn {
|
|
color: #3a8aeb;
|
|
border-color: #3a8aeb;
|
|
}
|
|
.cover_img {
|
|
width: 65px;
|
|
}
|
|
.device_layer {
|
|
::v-deep .el-dialog__body {
|
|
padding: 0 20px;
|
|
}
|
|
.setting_item {
|
|
padding-top: 24px;
|
|
color: #333;
|
|
h4 {
|
|
font-size: 16px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
.upload_img {
|
|
padding-left: 82px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.avatar-uploader .el-upload {
|
|
border: 1px dashed #d9d9d9;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: #409eff;
|
|
}
|
|
.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 178px;
|
|
height: 178px;
|
|
line-height: 178px;
|
|
text-align: center;
|
|
}
|
|
.avatar {
|
|
width: 178px;
|
|
height: 178px;
|
|
display: block;
|
|
}
|
|
</style>
|