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="list_warp">
|
|
<el-row :gutter="15">
|
|
<el-col>
|
|
<!-- v-loading="crud.loading" -->
|
|
<el-table ref="table" :data="urgentMessage" :header-cell-style="{ background: '#3a8aeb', color: '#fff' }" @selection-change="handleSelectionChange">
|
|
<el-table-column type="selection" width="55" />
|
|
<!-- prop="name" -->
|
|
<el-table-column label="序号" type="index" align="center" width="50" />
|
|
<el-table-column label="发布内容" align="center" prop="context" width="400">
|
|
<template slot-scope="{ row }">
|
|
<div>{{ row.context }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="通知时间" align="center" prop="create_time">
|
|
<template slot-scope="{ row }">
|
|
<div>{{ row.create_time | parseTime }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column label="发布人" align="center" prop="creater_name" />
|
|
<el-table-column label="状态" align="center" prop="is_state">
|
|
<template slot-scope="{ row }">
|
|
<div :class="{ stop_txt: row.is_state }">
|
|
{{ row.is_state == 1 ? "发布中" : "停止" }}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="120px" align="center" fixed="right">
|
|
<template slot-scope="scope">
|
|
<el-button type="primary" class="edit_btn" @click="editFormData(scope.row)">编辑</el-button>
|
|
<el-button type="primary" :class="['start_btn', { stop_btn: scope.row.is_state == 1 }]" @click="isStopHandle(scope.$index, scope.row)">{{ scope.row.is_state == 1 ? "停止" : "恢复" }}</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 分页器 -->
|
|
<el-pagination style="margin-top: 20px;" background :current-page="queryInfo.page" :total="total" :page-size="queryInfo.size" :pager-count="5" :page-sizes="[3, 5, 10]" layout="prev, pager, next, jumper,->,sizes,total" @current-change="getUrgentMessage" @size-change="handleSizeChange" />
|
|
|
|
<!-- 编辑紧急通知 -->
|
|
<div class="publish_layer">
|
|
<el-dialog :title="form.notice_id==null? '紧急发布':'编辑'" :close-on-click-modal="false" :show-close="false" :visible.sync="messageVisible" width="872px">
|
|
<el-form ref="form" :model="form" size="small" label-width="100px">
|
|
<el-form-item
|
|
label="文本颜色"
|
|
prop="context_color"
|
|
:rules="[
|
|
{ required: true, message: '请选择文本颜色', trigger: '' },
|
|
]"
|
|
>
|
|
<colorPicker v-model="form.context_color" class="txt_color" @change="headleChangeColor" />
|
|
<el-input v-show="false" v-model="form.context_color" />
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="文本内容"
|
|
prop="context"
|
|
:rules="[
|
|
{ required: true, message: '请输入文本内容', trigger: 'blur' },
|
|
]"
|
|
>
|
|
<el-input v-model="form.context" type="textarea" rows="6" style="width: 674px" />
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="文本大小"
|
|
prop="context_size_name"
|
|
:rules="[
|
|
{ required: true, message: '请选择文本大小', trigger: 'change' },
|
|
]"
|
|
>
|
|
<el-select v-model="form.context_size_name" size="small" class="filter-item" @change="selectSize">
|
|
<el-option v-for="item in sizeData" :key="item.key" :label="item.name" :value="item" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="文本位置"
|
|
prop="context_position_name"
|
|
:rules="[
|
|
{ required: true, message: '请选择文本位置', trigger: 'change' },
|
|
]"
|
|
>
|
|
<el-select v-model="form.context_position_name" size="small" value-key="name" class="filter-item" @change="selectPosition">
|
|
<el-option v-for="item in positionData" :key="item.key" :label="item.name" :value="item" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="滚动速度"
|
|
prop="context_speed_name"
|
|
:rules="[
|
|
{ required: true, message: '请选择滚动速度', trigger: 'change' },
|
|
]"
|
|
>
|
|
<el-select v-model="form.context_speed_name" size="small" class="filter-item" @change="selectSpeed">
|
|
<el-option v-for="item in speedData" :key="item.key" :label="item.name" :value="item" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="选择设备"
|
|
prop="notice_device"
|
|
:rules="[
|
|
{ required: true, message: '请选择设备', trigger: 'change' },
|
|
]"
|
|
>
|
|
<el-radio-group v-model="form.notice_device" @change="clearCheckbox()">
|
|
<el-radio :label="1" value="all">所有设备</el-radio>
|
|
<el-radio :label="2" value="other">部分设备<i v-if="form.notice_device === 2" class="radio_tip" @click="addDeviceTag()">添加</i></el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<div v-if="form.notice_device == 1" class="select_all_tip">
|
|
所有设备都将被发送
|
|
</div>
|
|
<div v-if="deviceTags.length > 0 && form.notice_device == 2" class="select_other">
|
|
<el-row>
|
|
<el-col :span="10" class="other_tip">以下设备都将被发送<span>总计{{ deviceTags.length }}个设备</span></el-col>
|
|
<el-col :span="4">
|
|
<el-button round class="delt_btn" @click="clearDevice()">清空</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
<el-tag v-for="tag in deviceTags" :key="tag.device_id" closable :disable-transitions="true" :hit="false" context_color="#cbe3ff" @close="handleClose(tag)">
|
|
{{ tag.device_name }}
|
|
</el-tag>
|
|
</div>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<!-- :loading="crud.status.cu === 2"
|
|
@click="crud.submitCU"-->
|
|
<el-button type="primary" round @click="submit">保存</el-button>
|
|
<el-button round @click="closeDialog">关闭</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
<!-- 添加发布的设备 -->
|
|
<div class="add_device_layer">
|
|
<el-dialog title="请选择设备" :close-on-click-modal="false" :visible.sync="selectDeviceVisible" width="400px">
|
|
<el-tag v-for="tag in deviceList" :key="tag.device_id" :disable-transitions="true" :hit="false" color="#cbe3ff" class="all_tags" @click="tagHandle(tag)">
|
|
{{ tag.device_name }}
|
|
</el-tag>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { parseTime } from '@/utils/index.js'
|
|
import { ReqDeviceList } from '@/api/device/deviceList.js'
|
|
import {
|
|
reqUrgentMessage,
|
|
reqQueryMessage,
|
|
reqEditMessage,
|
|
reqChangeMessage
|
|
} from '@/api/publish/urgentMessage'
|
|
export default {
|
|
name: 'UrgentMessage',
|
|
filters: {
|
|
parseTime(time, cFormat) {
|
|
return parseTime(time, cFormat)
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
isAddEdit: false,
|
|
form: {
|
|
context_color: '#ff0000', // 文本的颜色
|
|
context: '', // 文本的内容
|
|
context_position: null, // 文本的位置
|
|
context_position_name: null,
|
|
context_speed_name: null,
|
|
context_speed: null, // 文本的速度
|
|
context_size_name: null,
|
|
context_size: null, // 文字的大小
|
|
// create_by:'', //发布人
|
|
notice_device: null,
|
|
notice_devices: [],
|
|
notice_id: '', // 紧急通知的id
|
|
orga_id: '133221333123111'
|
|
},
|
|
queryInfo: {
|
|
notice_name: '',
|
|
orga_id: '133221333123111',
|
|
page: 1,
|
|
size: 10
|
|
},
|
|
total: 0,
|
|
messageVisible: false,
|
|
selectDeviceVisible: false,
|
|
sizeData: [
|
|
{ key: 0, name: 16 },
|
|
{ key: 1, name: 22 },
|
|
{ key: 2, name: 24 },
|
|
{ key: 3, name: 30 }
|
|
],
|
|
positionData: [
|
|
{ key: 1, name: '顶部' },
|
|
{ key: 2, name: '中间' },
|
|
{ key: 3, name: '底部' }
|
|
],
|
|
speedData: [
|
|
{ key: 0, name: '1s' },
|
|
{ key: 1, name: '2s' },
|
|
{ key: 2, name: '3s' }
|
|
],
|
|
selectedList: [],
|
|
// 部分设备列表的数据
|
|
deviceList: [],
|
|
// newArr:[],
|
|
deviceTags: [],
|
|
// 紧急通知列表
|
|
urgentMessage: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getUrgentMessage()
|
|
this.getDevice()
|
|
},
|
|
methods: {
|
|
// 获取紧急通知的列表
|
|
getUrgentMessage(pager = 1) {
|
|
this.queryInfo.page = pager
|
|
const params = this.queryInfo
|
|
reqUrgentMessage(params).then((res) => {
|
|
if (res.code == 200) {
|
|
this.urgentMessage = res.data.content
|
|
this.total = res.data.totalElements
|
|
// console.log(this.urgentMessage);
|
|
}
|
|
})
|
|
},
|
|
// 获取设备列表的信息
|
|
getDevice() {
|
|
const params = this.queryInfo
|
|
ReqDeviceList(params).then((res) => {
|
|
if (res.code == 200) {
|
|
this.deviceList = res.data.content
|
|
} else {
|
|
return this.$message.error('获取设备列表失败！')
|
|
}
|
|
})
|
|
},
|
|
// 紧急通知的状态 is_state为1 发布中 2 停止
|
|
// row.is_state == 1 ? "停止" : "恢复"
|
|
isStopHandle(index, row) {
|
|
console.log(row)
|
|
// console.log(index)
|
|
if (row.is_state == 1) {
|
|
row.is_state = 2
|
|
} else {
|
|
row.is_state = 1
|
|
}
|
|
const params = {
|
|
id: row.notice_id,
|
|
state: row.is_state
|
|
}
|
|
reqChangeMessage(params).then(res => {
|
|
// console.log(res)
|
|
if (res.code == 200) {
|
|
if (params.state == 1) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '已发布成功！'
|
|
})
|
|
} else {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '已停止！'
|
|
})
|
|
}
|
|
} else {
|
|
return this.$message.error('失败了~~~~')
|
|
}
|
|
})
|
|
},
|
|
// 编辑
|
|
editFormData(row) {
|
|
this.messageVisible = true
|
|
// 根据id查询返回的紧急通知的数据
|
|
const params = {
|
|
notice_id: row.notice_id
|
|
}
|
|
reqQueryMessage(params).then((res) => {
|
|
if (res.code == 200) {
|
|
this.form.notice_device = res.data.notice.noticeDevice
|
|
this.deviceTags = res.data.noticeDeviceDetailsVO
|
|
this.form.context_color = res.data.notice.contextColor
|
|
this.form.context = res.data.notice.context
|
|
this.form.context_speed = res.data.notice.contextSpeed
|
|
this.form.context_position = res.data.notice.contextPosition
|
|
this.form.context_size = res.data.notice.contextSize
|
|
this.form.notice_id = row.notice_id
|
|
// 判断文字位置
|
|
if (this.form.context_position == 1) {
|
|
this.form.context_position_name = '顶部'
|
|
} else if (this.form.context_position == 2) {
|
|
this.form.context_position_name = '中部'
|
|
} else {
|
|
this.form.context_position_name = '底部'
|
|
}
|
|
// 判断速度
|
|
if (this.form.context_speed == 0) {
|
|
this.form.context_speed_name = '1s'
|
|
} else if (this.form.context_speed == 1) {
|
|
this.form.context_speed_name = '2s'
|
|
} else {
|
|
this.form.context_speed_name = '3s'
|
|
}
|
|
// 判断文字大小
|
|
if (this.form.context_size == 0) {
|
|
this.form.context_size_name = '16'
|
|
} else if (this.form.context_size == 1) {
|
|
this.form.context_size_name = '22'
|
|
} else if (this.form.context_size == 2) {
|
|
this.form.context_size_name = '24'
|
|
} else {
|
|
this.form.context_size_name = '30'
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 新增
|
|
addFormData() {
|
|
this.messageVisible = true
|
|
this.$nextTick(() => {
|
|
this.form.notice_id = null
|
|
})
|
|
},
|
|
// 提交
|
|
submit() {
|
|
this.$refs.form.validate((valid) => {
|
|
console.log(this.deviceTags)
|
|
console.log(this.form.notice_devices)
|
|
if (this.form.notice_device == 2) {
|
|
if (this.deviceTags.length != 0) {
|
|
this.deviceTags.forEach(item => {
|
|
this.form.notice_devices.push({ deviceId: item.device_id })
|
|
})
|
|
} else {
|
|
this.$message.error('请添加设备！')
|
|
return
|
|
}
|
|
}
|
|
// 修改
|
|
if (valid) {
|
|
const params = {
|
|
context: this.form.context,
|
|
context_color: this.form.context_color,
|
|
context_position: this.form.context_position,
|
|
context_size: this.form.context_size,
|
|
context_speed: this.form.context_speed,
|
|
notice_device: this.form.notice_device,
|
|
notice_devices: this.form.notice_devices,
|
|
notice_id: this.form.notice_id,
|
|
orga_id: '133221333123111'
|
|
}
|
|
console.log(params)
|
|
reqEditMessage(params).then((res) => {
|
|
if (res.code == 200) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: this.form.notice_id
|
|
? '修改紧急通知成功'
|
|
: '添加紧急通知成功'
|
|
})
|
|
this.messageVisible = false
|
|
this.$refs.form.resetFields()
|
|
this.getUrgentMessage(this.queryInfo.page)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 所有设备和部分设备的切换数据处理
|
|
clearCheckbox() {
|
|
if (this.form.notice_device == 1) {
|
|
this.form.notice_devices = []
|
|
}
|
|
},
|
|
// 多选框
|
|
handleSelectionChange(val) {
|
|
this.selectedList = val
|
|
// if (val.length > 0) {
|
|
// this.clearBtnDisabled = false;
|
|
// } else {
|
|
// this.clearBtnDisabled = true;
|
|
// }
|
|
},
|
|
// 改变文字的颜色
|
|
headleChangeColor() {
|
|
this.form.context_size
|
|
},
|
|
// 改变文字的大小
|
|
selectSize(selVal) {
|
|
this.form.context_size = selVal.key
|
|
this.form.context_size_name = selVal.name
|
|
},
|
|
// 改变文字的位置
|
|
selectPosition(selVal) {
|
|
console.log(selVal)
|
|
this.form.context_position = selVal.key
|
|
this.form.context_position_name = selVal.name
|
|
},
|
|
// 速度
|
|
selectSpeed(selVal) {
|
|
this.form.context_speed = selVal.key
|
|
this.form.context_speed_name = selVal.name
|
|
},
|
|
// 添加设备的对话框
|
|
addDeviceTag() {
|
|
this.selectDeviceVisible = true
|
|
},
|
|
// 添加设备
|
|
tagHandle(tag) {
|
|
// 添加设备不能重复 不重复才添加
|
|
if (this.deviceTags.length == 0) {
|
|
this.deviceTags.push(tag)
|
|
} else {
|
|
const current =
|
|
this.deviceTags &&
|
|
this.deviceTags.some((item) => item.device_id == tag.device_id)
|
|
if (!current) {
|
|
this.deviceTags.push(tag)
|
|
} else {
|
|
this.$message('请勿添加重复的设备！')
|
|
}
|
|
}
|
|
},
|
|
// 单独删除某一个设备
|
|
handleClose(tag) {
|
|
this.deviceTags.splice(this.deviceTags.indexOf(tag), 1)
|
|
},
|
|
// 清空设备
|
|
clearDevice() {
|
|
this.deviceTags = []
|
|
this.form.notice_devices = []
|
|
},
|
|
// 关闭重置表单
|
|
closeDialog() {
|
|
this.messageVisible = false
|
|
this.$refs.form.resetFields()
|
|
},
|
|
// 每条显示数据改变时的事件
|
|
handleSizeChange(size) {
|
|
// 整理参数
|
|
this.queryInfo.size = size
|
|
this.getUrgentMessage()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.list_warp {
|
|
padding: 0 24px;
|
|
.stop_txt {
|
|
color: #3a8aeb;
|
|
}
|
|
}
|
|
.txt_color {
|
|
margin-top: 12px;
|
|
}
|
|
::v-deep .el-radio-group {
|
|
display: block;
|
|
.el-radio {
|
|
position: relative;
|
|
line-height: 40px;
|
|
.radio_tip {
|
|
position: absolute;
|
|
right: -45px;
|
|
top: 0;
|
|
display: block;
|
|
width: 42px;
|
|
height: 21px;
|
|
line-height: 21px;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
color: #fff;
|
|
background: url(~@/assets/images/an-tj.png) no-repeat;
|
|
background-size: 42px 21px;
|
|
}
|
|
}
|
|
}
|
|
.select_all_tip {
|
|
width: 336px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
margin: -20px 0 0 100px;
|
|
padding: 0 14px;
|
|
font-size: 12px;
|
|
color: #999;
|
|
background: #fff;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.14);
|
|
}
|
|
.select_other {
|
|
width: 600px;
|
|
margin: -20px 0 0 100px;
|
|
padding: 18px 23px;
|
|
background: #f8f8f8;
|
|
border: 1px solid #dcdde3;
|
|
border-radius: 4px;
|
|
.other_tip {
|
|
line-height: 24px;
|
|
span {
|
|
display: inline-block;
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
.el-button {
|
|
padding: 5px 8px;
|
|
border: none !important;
|
|
}
|
|
.delt_btn {
|
|
color: #fff;
|
|
background-color: #ee5747 !important;
|
|
}
|
|
}
|
|
.el-tag--small {
|
|
height: 28px;
|
|
line-height: 26px;
|
|
padding: 0 24px;
|
|
margin: 18px 16px 0 0;
|
|
font-size: 14px;
|
|
// color: #3a8aeb;
|
|
::v-deep .el-icon-close {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
.add_device_layer {
|
|
::v-deep .el-dialog__body {
|
|
padding: 0 20px 30px 20px;
|
|
}
|
|
}
|
|
</style>
|