Compare commits
2 Commits
64be23a0eb
...
ab0afc99b5
| Author | SHA1 | Date |
|---|---|---|
 hui
|
ab0afc99b5 | 6 months ago |
|
hui
|
98b031720b | 6 months ago |
18 changed files with 4533 additions and 6 deletions
@ -0,0 +1,56 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
// 查询设备列表
|
|||
export function getdeviceList(query) { |
|||
return request({ |
|||
url: '/business/device/query', |
|||
method: 'get', |
|||
params: { |
|||
...query, |
|||
deviceType:5 |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 查询设备列表
|
|||
export function getBoardDeviceInfo(deviceId) { |
|||
return request({ |
|||
// url: `/business/board/realtimeProperty/${deviceId}`,
|
|||
url: `/business/device/properties/realtime/${deviceId}/3A`, |
|||
// url: `/business/device/batchFunctions`,
|
|||
method: 'GET', |
|||
params: {} |
|||
}) |
|||
} |
|||
|
|||
// 敏感字段检测
|
|||
export function checkBoardContent(content) { |
|||
return request({ |
|||
url: `/business/dcInfoBoardVocabulary/checkBoardContent`, |
|||
method: 'get', |
|||
params:{ |
|||
content |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 保存情报板发布日志
|
|||
export function saveBoardReleaseLog(data) { |
|||
return request({ |
|||
url: `/business/boardReleaseLog`, |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
export function publishToBoard(data) { |
|||
return request({ |
|||
// url: '/business/board/batch/publish',
|
|||
url: `/broadcast/broadcastFunctionCall`, |
|||
method: 'post', |
|||
// data: data
|
|||
data |
|||
}) |
|||
} |
|||
|
|||
|
|||
@ -0,0 +1,53 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
// 查询发布记录列表
|
|||
export function listRecord(query) { |
|||
return request({ |
|||
url: '/system/log/list', |
|||
method: 'get', |
|||
params: query |
|||
}) |
|||
} |
|||
|
|||
// 查询发布记录详细
|
|||
export function getRecord(id) { |
|||
return request({ |
|||
url: '/system/record/' + id, |
|||
method: 'get' |
|||
}) |
|||
} |
|||
|
|||
// 新增发布记录
|
|||
export function addRecord(data) { |
|||
return request({ |
|||
url: '/system/record', |
|||
method: 'post', |
|||
data: data |
|||
}) |
|||
} |
|||
|
|||
// 修改发布记录
|
|||
export function updateRecord(data) { |
|||
return request({ |
|||
url: '/system/record', |
|||
method: 'put', |
|||
data: data |
|||
}) |
|||
} |
|||
|
|||
// 删除发布记录
|
|||
export function delRecord(id) { |
|||
return request({ |
|||
url: '/system/record/' + id, |
|||
method: 'delete' |
|||
}) |
|||
} |
|||
|
|||
// 导出发布记录
|
|||
export function exportRecord(query) { |
|||
return request({ |
|||
url: '/system/log/export', |
|||
method: 'get', |
|||
params: query |
|||
}) |
|||
} |
|||
@ -0,0 +1,216 @@ |
|||
|
|||
import request from '@/utils/request' |
|||
|
|||
// 查询模板列表
|
|||
export function getTemplateList(query) { |
|||
return request({ |
|||
url: '/system/broadcast/listAll', |
|||
method: 'get', |
|||
params: query |
|||
}) |
|||
} |
|||
|
|||
// 新增情报板模板
|
|||
export function addTemplate(data) { |
|||
console.log(data , "dddddddddaaataaaa") |
|||
return request({ |
|||
url: '/system/broadcast', |
|||
method: 'post', |
|||
data: data |
|||
}) |
|||
} |
|||
|
|||
//修改情报板模板
|
|||
export function editTemplate(data) { |
|||
return request({ |
|||
url: '/system/broadcast', |
|||
method: 'put', |
|||
data: data |
|||
}) |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
//修改情报板模板内容
|
|||
export function editTemplateContent(data) { |
|||
return request({ |
|||
url: '/system/content', |
|||
method: 'put', |
|||
data: data |
|||
}) |
|||
} |
|||
|
|||
// 删除情报板模板
|
|||
export function deleteTemplate(id) { |
|||
return request({ |
|||
url: '/system/broadcast/' + id, |
|||
method: 'delete' |
|||
}) |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
//获取情报板模板详细信息
|
|||
export function getTemplateInfo(id) { |
|||
return request({ |
|||
url: '/system/template/' + id, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
|||
//获取情报板模板内容信息
|
|||
export function getTemplateContent(id) { |
|||
return request({ |
|||
url: '/system/content/list?templateId=' + id, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
|||
|
|||
|
|||
//新增情报板模板内容
|
|||
export function addTemplateContent(data) { |
|||
return request({ |
|||
url: '/system/content', |
|||
method: 'post', |
|||
data: data |
|||
}) |
|||
} |
|||
|
|||
//图片库列表查询
|
|||
export function getGalleryList() { |
|||
return request({ |
|||
url: '/system/upload/list', |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
|||
//图片获取详细信息
|
|||
export function getGallery(id) { |
|||
return request({ |
|||
url: '/system/upload/'+ id, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
|||
|
|||
// 情报板发布
|
|||
export function postInformationBoardRelease(data) { |
|||
return request({ |
|||
url: '/system/template/informationBoardRelease', |
|||
method: 'post', |
|||
data: data |
|||
}) |
|||
} |
|||
|
|||
// 情报板获取
|
|||
export function getInformationBoardRelease(data) { |
|||
return request({ |
|||
url: '/system/template/informationBoardAcquisition', |
|||
method: 'post', |
|||
data: data |
|||
}) |
|||
} |
|||
|
|||
//情报板发布
|
|||
export function uploadBoardEditInfo(devicelds,protocolType,parameters) { |
|||
var data = { |
|||
deviceIds:devicelds, |
|||
protocolType:protocolType, |
|||
// parameters:parameters
|
|||
parameters:encodeURI(parameters) |
|||
|
|||
} |
|||
return request({ |
|||
url: '/parser/board/uploadBoardEditInfo', |
|||
method: 'get', |
|||
params: data |
|||
}) |
|||
} |
|||
|
|||
//情报板发布 隧道内
|
|||
export function splicingBoard(data) { |
|||
return request({ |
|||
url: '/parser/board/splicingBoard', |
|||
method: 'get', |
|||
params: data |
|||
|
|||
}) |
|||
} |
|||
|
|||
//情报板发布 门架式
|
|||
export function gantryVmsInfo(data) { |
|||
return request({ |
|||
url: '/parser/board/gantryVmsInfo', |
|||
method: 'get', |
|||
params: data |
|||
|
|||
}) |
|||
} |
|||
|
|||
|
|||
//情报板管理右侧查询接口
|
|||
export function getAllVmsTemplate(data) { |
|||
return request({ |
|||
url: '/system/template/getAllVmsTemplate', |
|||
method: 'get', |
|||
params: data |
|||
|
|||
}) |
|||
} |
|||
|
|||
// 情报板内容查询
|
|||
export function getBoardContent(deviceId) { |
|||
return request({ |
|||
url: '/parser/board/getBoardContent?deviceId=' + deviceId, |
|||
method: 'get', |
|||
|
|||
}) |
|||
} |
|||
|
|||
|
|||
// 情报板根据分辨率筛字体大小
|
|||
export function getFontSizeByDevicePixel(screenSize) { |
|||
return request({ |
|||
url: '/parser/board/getFontSizeByDevicePixel/' + screenSize, |
|||
method: 'get', |
|||
|
|||
}) |
|||
} |
|||
|
|||
|
|||
// 导出情报板模板
|
|||
export function exportTemplate(query) { |
|||
return request({ |
|||
url: '/system/template/export', |
|||
method: 'get', |
|||
params: query |
|||
}) |
|||
} |
|||
@ -0,0 +1,44 @@ |
|||
<template> |
|||
<div class="broadcast_tpl_shower"> |
|||
<p class="text">{{ text }}</p> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name:"BoardPreview", |
|||
data(){ |
|||
return { |
|||
} |
|||
}, |
|||
props:{ |
|||
text: { |
|||
type: String, |
|||
default: "测试文字" |
|||
}, |
|||
}, |
|||
watch:{ |
|||
|
|||
}, |
|||
computed:{ |
|||
}, |
|||
mounted(){ |
|||
}, |
|||
methods:{ |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.broadcast_tpl_shower{ |
|||
background-color: #000; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-start; |
|||
align-items: center; padding: 4px 12px; |
|||
.text { |
|||
color: #0E0; |
|||
font-size: 16px; line-height: 18px; max-height: 36px; overflow: hidden; |
|||
word-break: break-all; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,432 @@ |
|||
<template> |
|||
<el-dialog :title="calcTitle" :visible.sync="dialogVisible" width="800px" append-to-body |
|||
:close-on-click-modal="false"> |
|||
<el-card> |
|||
<el-form :model="dataForm" :rules="dataRule" label-width="110px" ref="dataForm" size="mini" |
|||
style="margin-right: 10px;"> |
|||
<el-form-item label="所属类别" prop="category" v-if="type == 'template' && mode != 'toDevice'"> |
|||
<el-row :gutter="0"> |
|||
<el-col :span="6"> |
|||
<el-select v-model="dataForm.category" placeholder="请选择所属类别" size="mini"> |
|||
<el-option v-for="item in templateCategoryList" :key="item.dictValue" :label="item.dictLabel" |
|||
:value="item.dictValue"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form-item> |
|||
<el-form-item label="音量" prop="outVol"> |
|||
<el-row :gutter="0"> |
|||
<el-col :span="6"> |
|||
<el-input-number v-model="dataForm.outVol" :min="1" :max="9"></el-input-number> |
|||
</el-col> |
|||
<el-col :span="18"><span style="margin-left: 10px;">取值范围 1 - 9</span></el-col> |
|||
</el-row> |
|||
</el-form-item> |
|||
<el-form-item label="循环次数" prop="repeatTimes"> |
|||
<el-row :gutter="0"> |
|||
<el-col :span="6"> |
|||
<el-input-number v-model="dataForm.repeatTimes" :min="1" :max="16"></el-input-number> |
|||
</el-col> |
|||
<el-col :span="18"><span style="margin-left: 10px;">取值范围 1 - 16</span></el-col> |
|||
</el-row> |
|||
</el-form-item> |
|||
<el-form-item label="紧急度" prop="priority"> |
|||
<el-row :gutter="0"> |
|||
<el-col :span="6"> |
|||
<el-select v-model="dataForm.priority" placeholder="请选择"> |
|||
<el-option v-for="(item,key) in broadcastPriority" :key="key" :label="item" :value="key"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form-item> |
|||
<el-form-item label="详细内容" prop="content"> |
|||
<el-input type="textarea" :rows="6" placeholder="详细内容" v-model="dataForm.content"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button style="background-color: #0e708b; color: #fff" @click="onClose">取消</el-button> |
|||
<el-button @click="onSubmit('dataForm')" v-loading="loading" |
|||
style="background-color: #10aac2; color: #fff">确认</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
import { |
|||
addTemplate, |
|||
editTemplate |
|||
} from "@/api/broadcast/template"; |
|||
import { checkBoardContent } from "@/api/board/board"; |
|||
import { broadcastPriority } from "@screen/utils/enum.js"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
broadcastPriority, |
|||
dialogVisible: false, |
|||
dataForm: { |
|||
content: "" |
|||
}, |
|||
dataRule: { |
|||
category: [ |
|||
{ |
|||
required: true, |
|||
message: "请选择类别", |
|||
trigger: "blur", |
|||
}, |
|||
], |
|||
content: [ |
|||
{ |
|||
required: true, |
|||
message: "请输入详细内容", |
|||
trigger: "blur", |
|||
}, |
|||
] |
|||
}, |
|||
screenSizeOptions: [], |
|||
colorList: [], |
|||
isCurrencyOptions: [ |
|||
{ |
|||
code: "0", |
|||
content: "通用", |
|||
}, |
|||
{ |
|||
code: "1", |
|||
content: "仅为智能推荐模板", |
|||
}, |
|||
], |
|||
inScreenModeList: [], |
|||
fontSizeList: [], |
|||
title: "选择图片", |
|||
loading: false, |
|||
isAdd: false, |
|||
templateCategoryList: [], |
|||
infoType: "", |
|||
devicePixelBoolean: false, |
|||
categoryRules: false, |
|||
dataDefault: { |
|||
category:"", |
|||
content:"", |
|||
outVol:6, |
|||
repeatTimes:3, |
|||
priority:"1" |
|||
}, |
|||
isLocked: false, |
|||
}; |
|||
}, |
|||
props: { |
|||
mode: { |
|||
//add edit |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
type: { |
|||
//template board |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
visible: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
tpl: { |
|||
type: Object, |
|||
default: () => {}, |
|||
}, |
|||
}, |
|||
components: { |
|||
}, |
|||
computed: { |
|||
calcTitle() { |
|||
let str = ""; |
|||
if (this.mode == "toDevice") { |
|||
str = `从模板添加待下发信息`; |
|||
} else { |
|||
str = `${this.mode == "add" ? "新增" : "编辑"}${ |
|||
this.type == "template" ? "广播模板" : "待下发信息" |
|||
}`; |
|||
} |
|||
return str; |
|||
}, |
|||
}, |
|||
watch: { |
|||
visible: { |
|||
handler(newV) { |
|||
this.dialogVisible = newV; |
|||
if (this.$refs.dataForm) { |
|||
this.$refs.dataForm.clearValidate(); |
|||
} |
|||
// if(newV){ |
|||
// this.initData(); |
|||
// } |
|||
}, |
|||
immediate: true, |
|||
}, |
|||
dialogVisible(newV) { |
|||
this.$emit("update:visible", newV); |
|||
}, |
|||
tpl: { |
|||
handler(newV) { |
|||
// { "id": 3, "category": "0", "content": "保持车距，控制车速", "screenSize": "768*64", "fontColor": "FFFF00", "fontSize": "64", "fontType": "2", "fontSpacing": "0", "rollingSpeed": null, "stopTime": "50", "inScreenMode": "1", "formatStyle": "2", "remark": null, "createTime": "2024-01-06 10:40:19", "updateTime": "2024-01-06 11:04:53" } |
|||
|
|||
if (newV && Object.keys(newV).length > 0) { |
|||
//防止关闭对话框时触发 |
|||
this.initData(); |
|||
} |
|||
}, |
|||
deep: true, |
|||
}, |
|||
mode: { |
|||
handler(newV) { |
|||
this.initData(); |
|||
}, |
|||
}, |
|||
type: { |
|||
handler(newV) { |
|||
this.initData(); |
|||
}, |
|||
}, |
|||
}, |
|||
mounted() {}, |
|||
created() { |
|||
this.getDicts("iot_template_category").then((res) => { |
|||
this.templateCategoryList = res.data; |
|||
this.dataDefault.category = this.templateCategoryList[0].dictValue |
|||
}); |
|||
}, |
|||
methods: { |
|||
initData() { |
|||
if (this.isLocked) { |
|||
return; |
|||
} |
|||
this.isLocked = true; |
|||
setTimeout(() => { |
|||
this.isLocked = false; |
|||
}, 100); |
|||
|
|||
if (this.mode == "edit" || this.mode == "toDevice"){ |
|||
this.dataForm = { |
|||
outVol: +this.tpl.outVol, |
|||
repeatTimes: +this.tpl.repeatTimes, |
|||
category: this.tpl.category, |
|||
priority: this.tpl.priority, |
|||
content: this.tpl.content, |
|||
id : this.tpl.id |
|||
}; |
|||
}else if(this.mode == "add"){ |
|||
this.dataForm = { |
|||
...this.dataDefault, |
|||
// outVol: 6, |
|||
// repeatTimes: 3, |
|||
// priority: 3 |
|||
} |
|||
} |
|||
|
|||
if (this.visible == false && this.mode == "toDevice") { |
|||
this.____doSubmit(); |
|||
} |
|||
}, |
|||
onClose() { |
|||
this.dialogVisible = false; |
|||
}, |
|||
// 表单提交 |
|||
async onSubmit(formName) { |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
this.____doSubmit(); |
|||
} else { |
|||
console.log('格式不正确!!'); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
____doSubmit(){ |
|||
|
|||
// if (this.type == "template" && this.dataForm.category == undefined) { |
|||
// return this.$modal.msgError("请选择分类！"); |
|||
// } |
|||
|
|||
// if (!this.dataForm.content.trim()) { |
|||
// return this.$modal.msgError("当前输入内容为空"); |
|||
// } |
|||
// if (this.dataForm.content.indexOf("\\") >= 0) { |
|||
// return this.$modal.msgError("内容不能含有特殊字符'\\\\'"); |
|||
// } |
|||
|
|||
let ctt = this.dataForm.content; |
|||
checkBoardContent(ctt).then((res) => { |
|||
if (res.code == 200) { |
|||
doNext(); |
|||
} else { |
|||
this.$message({ |
|||
type: "danger", |
|||
message: res.msg, |
|||
}); |
|||
return; |
|||
} |
|||
}); |
|||
let doNext = () => { |
|||
console.log(this.dataForm , "this.dataForm++++") |
|||
let data = { |
|||
outVol: ''+this.dataForm.outVol, |
|||
repeatTimes: ''+this.dataForm.repeatTimes, |
|||
category: ''+this.dataForm.category, |
|||
priority: this.dataForm.priority, |
|||
content: this.dataForm.content, |
|||
id: this.dataForm.id |
|||
} |
|||
this.loading = true; |
|||
// let templateId = ""; |
|||
|
|||
if (this.type == "template") { |
|||
if (this.mode == "edit") { |
|||
editTemplate(data).then((res) => { |
|||
afterSave("修改"); |
|||
}); |
|||
} else if (this.mode == "toDevice") { |
|||
this.loading = false; |
|||
this.$emit("afterSubmit", { |
|||
type: this.type, |
|||
mode: this.mode, |
|||
data: data, |
|||
}); |
|||
} else { |
|||
addTemplate(data).then((res) => { |
|||
afterSave("新增"); |
|||
}); |
|||
} |
|||
} else { |
|||
this.loading = false; |
|||
// this.dialogVisible = false |
|||
this.$emit("afterSubmit", { |
|||
type: this.type, |
|||
mode: this.mode, |
|||
data: data, |
|||
}); |
|||
} |
|||
|
|||
const afterSave = (para) => { |
|||
this.$message.success(para + "成功!"); |
|||
this.loading = false; |
|||
// this.dialogVisible = false |
|||
this.$emit("afterSubmit", { type: this.type, mode: this.mode }); |
|||
}; |
|||
}; |
|||
|
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.infoBoardButton { |
|||
::v-deep .el-radio-button--medium .el-radio-button__inner { |
|||
// height: 3vh; |
|||
// line-height: 3vh; |
|||
// padding: 0 0.6vw; |
|||
// font-size: 0.7vw; |
|||
} |
|||
} |
|||
.previewContentCSS { |
|||
border: yellow 1px dashed; |
|||
} |
|||
/* 页脚 */ |
|||
.dialog-footer { |
|||
padding-left: 450px; |
|||
} |
|||
.photoOther img, |
|||
.photo img { |
|||
max-width: 300px; |
|||
width: 100%; |
|||
// height: 80px; |
|||
} |
|||
.infoBoardButton { |
|||
display: flex; |
|||
justify-content: left; |
|||
} |
|||
.boardTextStyle { |
|||
line-height: 1; |
|||
caret-color: rgba(0, 0, 0, 0); |
|||
user-select: none; |
|||
position: absolute; |
|||
// max-height: 128px; |
|||
overflow: hidden; |
|||
} |
|||
.blackBoard2 { |
|||
background: #000000; |
|||
display: flex; |
|||
margin: 0 auto; |
|||
overflow: hidden; |
|||
position: relative; |
|||
// justify-content: center; |
|||
align-items: center; |
|||
} |
|||
::v-deep .el-card__body { |
|||
padding: 10px 0; |
|||
} |
|||
|
|||
// |
|||
::v-deep .el-dialog__header { |
|||
background-color: #145977; |
|||
} |
|||
::v-deep .el-dialog__body { |
|||
padding: 5px 20px; |
|||
background-color: #145977; |
|||
} |
|||
::v-deep .el-dialog__footer { |
|||
background-color: #145977; |
|||
} |
|||
::v-deep .el-card { |
|||
margin-top: 1vh; |
|||
background-color: #145977; |
|||
border: 2px solid #1d7890; |
|||
} |
|||
::v-deep .el-form-item__label { |
|||
color: #3de8ff; |
|||
} |
|||
::v-deep .el-input--mini .el-input__inner { |
|||
color: #fff; |
|||
background-color: #096d8c; |
|||
} |
|||
::v-deep .el-input-number.is-controls-right .el-input-number__decrease { |
|||
color: #fff; |
|||
background-color: #096d8c; |
|||
} |
|||
::v-deep .el-dialog__title { |
|||
color: #fff; |
|||
} |
|||
::v-deep .el-textarea__inner { |
|||
color: #fff; |
|||
background-color: #096d8c; |
|||
border-color: #096d8c; |
|||
} |
|||
::v-deep .el-input-number.is-controls-right .el-input-number__decrease { |
|||
border-color: transparent; |
|||
} |
|||
::v-deep .el-input-number.is-controls-right .el-input-number__increase { |
|||
border-color: transparent; |
|||
color: #fff; |
|||
background-color: #096d8c; |
|||
} |
|||
::v-deep .el-button--medium { |
|||
padding: 5px 25px; |
|||
font-size: 14px; |
|||
border-radius: 20px; |
|||
border: transparent; |
|||
} |
|||
::v-deep .el-radio-button__inner { |
|||
color: #ffffff; |
|||
background-color: pink; |
|||
border-color: #1d58a9; |
|||
-webkit-box-shadow: -1px 0 0 0 #1d58a9; |
|||
box-shadow: -1px 0 0 0 #1d58a9; |
|||
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
|||
border-radius: 3px 3px 3px 3px; |
|||
opacity: 1; |
|||
border: none !important; |
|||
} |
|||
::v-deep .infoBoardButton .el-radio-button--medium .el-radio-button__inner { |
|||
margin: 0 3px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,144 @@ |
|||
import { publishToBoard, saveBoardReleaseLog } from "@/api/broadcast/broadcast"; |
|||
import moment from "moment/moment"; |
|||
import store from "@/store"; |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
methods: { |
|||
// 新增待下发
|
|||
____onAddDeviceItem() { |
|||
|
|||
this.editDialog = { |
|||
visible: true, |
|||
mode: "add", |
|||
type: "device", |
|||
tpl: { |
|||
content:"" |
|||
}, |
|||
}; |
|||
}, |
|||
// 从模板新增待下发
|
|||
____onTplToDevice(item, showDialog) { |
|||
// if(this.checkedDeviceIds.length<=0){
|
|||
// this.$message.warning('未选择设备!');
|
|||
// return;
|
|||
// }
|
|||
|
|||
if (this.selectedBdMsg.length >= 1){ |
|||
this.$message({ |
|||
type: "warning", |
|||
message: "只能发布一条语音广播!", |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
this.editDialog = { |
|||
visible: showDialog == false ? false : true, |
|||
mode: "toDevice", |
|||
type: "template", |
|||
tpl: item, |
|||
}; |
|||
}, |
|||
// 发布信息
|
|||
____publishInfo() { |
|||
let deviceList = []; |
|||
if (this.selectedDevice){ |
|||
deviceList = [item.otherConfig]; |
|||
} |
|||
else{ |
|||
this.selectedDevices.forEach(item=>{ |
|||
deviceList.push(item.otherConfig); |
|||
}) |
|||
} |
|||
this.$confirm("是否确定发布语音广播?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
let loading = this.$loading({ |
|||
lock: true, |
|||
text: "Loading", |
|||
spinner: "el-icon-loading", |
|||
background: "rgba(0, 0, 0, 0.7)", |
|||
}); |
|||
|
|||
// let content = [];
|
|||
|
|||
let data = { |
|||
functionType : "startPaTts", |
|||
name : "task-3", |
|||
// outVol : "6",
|
|||
outVol: this.selectedBdMsg[0].outVol, |
|||
// priority : "1",
|
|||
priority: this.selectedBdMsg[0].priority, |
|||
repeatTimes: this.selectedBdMsg[0].repeatTimes, |
|||
// termList : [{ zoneld: "6001", termDN: "601" }, { zoneld: "6001", termDN: "608" }, { zoneld: "6001", termDN: "610" }],
|
|||
termList: deviceList, |
|||
text: this.selectedBdMsg[0].content |
|||
} |
|||
|
|||
if (IS_TESTING) { |
|||
// this.saveLog(content);
|
|||
this.____getDeviceInfo(); |
|||
loading.close(); |
|||
} else { |
|||
publishToBoard(data) |
|||
.then((res) => { |
|||
// this.saveLog(content);
|
|||
this.$message({ |
|||
type: "success", |
|||
message: "发布成功!", |
|||
}); |
|||
// !isMultiControl && this.____getDeviceInfo();
|
|||
}) |
|||
.catch((err) => {}) |
|||
.finally(() => { |
|||
loading.close(); |
|||
}); |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
this.$message({ |
|||
type: "info", |
|||
message: "取消发布", |
|||
}); |
|||
}); |
|||
}, |
|||
//
|
|||
saveLog(content) { |
|||
let time = moment().format("YYYY-MM-DD HH:mm:ss"); |
|||
let device = this.selectedDevices; |
|||
let data = { |
|||
createBy: store.getters.name, |
|||
createTime: time, |
|||
deviceId: device.id, |
|||
deviceName: device.deviceName, |
|||
direction: device.direction, |
|||
params: {}, |
|||
platform: "", |
|||
releaseContent: JSON.stringify(content), |
|||
releaseDeptId: "", |
|||
releaseDeptName: "", |
|||
releaseIp: "", |
|||
releaseStatus: "", |
|||
releaseTime: time, |
|||
releaseUserId: "", |
|||
releaseUserName: "", |
|||
remark: "", |
|||
searchValue: "", |
|||
stakeMark: device.stakeMark, |
|||
updateBy: "", |
|||
updateTime: time, |
|||
}; |
|||
saveBoardReleaseLog(data).then((res) => { |
|||
if (res.code == 200) { |
|||
console.log("情报板日志已保存:::", data); |
|||
} else { |
|||
console.log("情报板日志保存失败！"); |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
@ -0,0 +1,973 @@ |
|||
<template> |
|||
<div class="container infoBoardDialog"> |
|||
<!-- 添加信息弹窗 --> |
|||
<el-dialog title="新增" :visible.sync="dialogVisible" width="43%" :before-close="handleClose" :close-on-click-modal="false" append-to-body> |
|||
<div class="dialogStyleBox"> |
|||
<div class="dialogLine"></div> |
|||
<div class="dialogCloseButton"></div> |
|||
</div> |
|||
<el-card class="box-card"> |
|||
<div v-on:ondragenter="ondragenter" v-on:drop="faceDrop" v-on:dragover="allowDrop" :style="{ |
|||
width: boardWidth + 'px', |
|||
height: boardHeight + 'px', |
|||
position: 'relative', |
|||
|
|||
|
|||
textAlign: getTextAlign(dataForm.formatStyle) |
|||
|
|||
}" class="blackBoard2"> |
|||
<span :style="{ |
|||
color: getColorStyle(dataForm.COLOR), |
|||
fontSize: dataForm.FONT_SIZE, |
|||
fontFamily: dataForm.FONT, |
|||
zIndex: '1000', |
|||
position:'relative', |
|||
/*left: dataForm.COORDINATE |
|||
? dataForm.COORDINATE.substring(0, 3) + 'px' |
|||
: '', |
|||
top: dataForm.COORDINATE |
|||
? dataForm.COORDINATE.substring(3, 6) + 'px' |
|||
: '',*/ |
|||
maxHeight:boardHeight + 'px', |
|||
}" class="textBoard2 boardTextStyle" v-html=" |
|||
dataForm.CONTENT |
|||
? dataForm.CONTENT.replace(/\n|\r\n/g, '<br>').replace( |
|||
/ /g, |
|||
' ' |
|||
) |
|||
: '' |
|||
"></span> |
|||
</div> |
|||
</el-card> |
|||
<el-card> |
|||
<el-form :model="dataForm" :rules="dataRule" label-width="90px" ref="dataForm" size="mini"> |
|||
<el-row :gutter="24" style="height: 45px;"> |
|||
<el-col :span="8"> |
|||
<el-form-item prop="category" label="所属类别" :rules="[ |
|||
{ |
|||
required: categoryRules ? true : false, |
|||
message: '请选择所属类别', |
|||
trigger: 'blur', |
|||
}, |
|||
]" v-show="infoType == 2"> |
|||
<el-select v-model="dataForm.category" placeholder="请选择所属类别" clearable size="mini"> |
|||
<el-option v-for="item in iotTemplateCategoryList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col class="infoBoardButton" :span="16"> |
|||
<el-radio-group v-model="radio1" @input="alignment(radio1)"> |
|||
<el-radio-button :label="0">左对齐</el-radio-button> |
|||
<el-radio-button :label="2">左右居中</el-radio-button> |
|||
<el-radio-button :label="1">右对齐</el-radio-button> |
|||
</el-radio-group> |
|||
<!-- <el-button type="primary" @click="alignment(1)" size="mini" |
|||
>左对齐</el-button |
|||
> |
|||
<el-button type="primary" @click="alignment(2)" size="mini" |
|||
>左右居中</el-button |
|||
> |
|||
<el-button type="primary" @click="alignment(3)" size="mini" |
|||
>右对齐</el-button |
|||
> --> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<!-- 选择图片弹出框结束 --> |
|||
<el-row :gutter="24" style="display: flex; |
|||
flex-wrap: wrap;width:100%"> |
|||
<el-col :span="24"> |
|||
<el-form-item label="详细内容" prop="CONTENT"> |
|||
<el-input type="textarea" clearable id="textContent" placeholder="详细内容" v-model="dataForm.CONTENT" @keyup.native="keyDown($event)"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item prop="COLOR" label="字体颜色"> |
|||
<el-select v-model="dataForm.COLOR" filterable placeholder="请选择"> |
|||
<el-option v-for="item in colorOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item prop="FONT_SIZE" label="字体大小"> |
|||
<el-select v-model="dataForm.FONT_SIZE" style="width: 100%" @change="changeFontSize"> |
|||
<el-option v-for="item in fontSizeOpt" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item prop="FONT" label="字体类型"> |
|||
<el-select v-model="dataForm.FONT" filterable placeholder="请选择"> |
|||
<el-option v-for="item in fontTypeOptions" :key="item.dictLabel" :label="item.dictLabel" :value="item.dictLabel"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
|
|||
<el-col :span="8"> |
|||
<el-form-item prop="STAY" label="停留时间(秒)"> |
|||
<el-input-number :min="0" controls-position="right" v-model="dataForm.STAY" style="width: 100%" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item prop="ACTION" label="入屏方式"> |
|||
<el-select v-model="dataForm.ACTION" filterable placeholder="请选择"> |
|||
<el-option v-for="item in inScreenModeOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item prop="screenSize" label="屏幕尺寸"> |
|||
<el-select v-model="dataForm.screenSize" filterable placeholder="请选择" v-if="!devicePixelBoolean"> |
|||
<el-option v-for="item in screenSizeOptions" :key="item.device_pixel" :label="item.device_pixel" :value="item.device_pixel" @click.native="changeScreenSize(item.device_pixel)"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-input disabled v-model="dataForm.screenSize" v-if="devicePixelBoolean"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
|
|||
</el-row> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="dataFormSubmitHandle()" v-loading="loading" style="background-color: #10aac2;color:#fff;" class="submitButton">确认 |
|||
</el-button> |
|||
<el-button class="closeButton" style="background-color:#b5b5b6;color:#fff" @click="handleClose">取消</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getTemplateInfo, addTemplate, addTemplateContent, editTemplateContent, editTemplate, deleteTemplate, getTemplateContent, getGalleryList, getFontSizeByDevicePixel, uploadBoardEditInfo } from '@/api/board/template' |
|||
import { devicessize } from '@/api/information/api.js' |
|||
import { checkIotBoardContent } from '@/api/board/vocabulary' |
|||
export default { |
|||
data() { |
|||
return { |
|||
radio1: '2', |
|||
alignmentNum: 2, |
|||
content: '', |
|||
boardWidth: '', |
|||
boardHeight: '', |
|||
checkList: [], //复选框一组 |
|||
obj: '', |
|||
imgUrl: [], |
|||
imgUrlOther: [], |
|||
dialogVisible: false, |
|||
fileList: [ |
|||
{ |
|||
name: 'food.jpeg', |
|||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' |
|||
}, |
|||
{ |
|||
name: 'food2.jpeg', |
|||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' |
|||
} |
|||
], |
|||
listquery: [], //拖拽图片 |
|||
curDragImgItem: '', |
|||
visible: false, |
|||
startTxt_x: '000', |
|||
startTxt_y: '000', |
|||
width: '400', |
|||
height: '40', |
|||
// content: "", |
|||
fontColor: 'FFFF00', |
|||
fontSize: '24', |
|||
fontType: 'KaiTi', |
|||
fontSpacing: 0, |
|||
coordinate: '000000', |
|||
url: '', |
|||
previewContent: '', //预览内容 |
|||
ispreviewContent: -1, |
|||
dataForm: {}, |
|||
templateContent: [], |
|||
templateDelContent: [], |
|||
dataRule: { |
|||
screenSize: [ |
|||
{ |
|||
required: true, |
|||
message: '请选择分辨率', |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
CONTENT: [ |
|||
{ |
|||
required: true, |
|||
message: '请输入详细内容', |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
fontColor: [ |
|||
{ |
|||
required: true, |
|||
message: '请填写字体颜色', |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
fontSize: [ |
|||
{ |
|||
required: true, |
|||
message: '请填写字体大小', |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
fontType: [ |
|||
{ |
|||
required: true, |
|||
message: '请选择字体类型', |
|||
trigger: 'change' |
|||
} |
|||
], |
|||
fontSpacing: [ |
|||
{ |
|||
required: true, |
|||
message: '请选择字体间距', |
|||
trigger: 'change' |
|||
} |
|||
], |
|||
rollSpeed: [ |
|||
{ |
|||
required: true, |
|||
message: '请填写滚动速度', |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
stopTime: [ |
|||
{ |
|||
required: true, |
|||
message: '请填写停留时间', |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
inScreenMode: [ |
|||
{ |
|||
required: true, |
|||
message: '请选择入屏方式', |
|||
trigger: 'blur' |
|||
} |
|||
] |
|||
}, |
|||
fontTypeOptions: [], |
|||
screenSizeOptions: [], |
|||
colorOptions: [], |
|||
isCurrencyOptions: [ |
|||
{ |
|||
code: '0', |
|||
content: '通用' |
|||
}, |
|||
{ |
|||
code: '1', |
|||
content: '仅为智能推荐模板' |
|||
} |
|||
], |
|||
inScreenModeOptions: [], |
|||
imgSize: [ |
|||
{ |
|||
type: '1024*128', |
|||
name: '全屏' |
|||
}, |
|||
{ |
|||
type: '', |
|||
name: '正常' |
|||
} |
|||
], |
|||
fontSizeOpt: [], |
|||
title: '选择图片', |
|||
loading: false, |
|||
isAdd: false, |
|||
iotTemplateCategoryList: [], |
|||
infoType: '', |
|||
devicePixelBoolean: false, |
|||
categoryRules: false |
|||
} |
|||
}, |
|||
// directives: { |
|||
// drag: function (el, binding, vnode) { |
|||
// let that = vnode.context; |
|||
// let dragBox = el; |
|||
// dragBox.onmousedown = (e) => { |
|||
// // that.startTxt_x = dragBox.style.left.substring (0, dragBox.style.left.length - 2) |
|||
// // that.startTxt_y = dragBox.style.left.substring (0, dragBox.style.top.length - 2) |
|||
// let disX = e.clientX - dragBox.offsetLeft; |
|||
// let disY = e.clientY - dragBox.offsetTop; |
|||
// let clientHeight = dragBox.clientHeight; |
|||
// let clientWidth = dragBox.clientWidth; |
|||
// document.onmousemove = function (e) { |
|||
// //鼠标移动触发事件，元素移到对应为位置 |
|||
// let left = e.pageX - disX; |
|||
// let top = e.pageY - disY; |
|||
// //限制区域 |
|||
// if (left <= 0) { |
|||
// left = 0; |
|||
// } else if (that.width - left - clientWidth <= 0) { |
|||
// left = that.width - clientWidth; |
|||
// } |
|||
// if (top <= 0) { |
|||
// top = 0; |
|||
// } else if (that.height - top - clientHeight <= 0) { |
|||
// top = that.height - clientHeight; |
|||
// } |
|||
// dragBox.style.left = left + "px"; |
|||
// dragBox.style.top = top + "px"; |
|||
// let a = (Array(3).join("0") + parseInt(left)).slice(-3); |
|||
// let b = (Array(3).join("0") + parseInt(top)).slice(-3); |
|||
// that.templateContent[dragBox.id].coordinate = a + b; |
|||
// }; |
|||
// document.onmouseup = function () { |
|||
// //鼠标抬起，清除绑定的事件，元素放置在对应的位置 |
|||
// document.onmousemove = null; |
|||
// document.onmousedown = null; |
|||
// }; |
|||
// e.preventDefault(); //阻止浏览器的默认事件 |
|||
// }; |
|||
// }, |
|||
// }, |
|||
computed: { |
|||
divStyle: function () { |
|||
return { |
|||
width: this.width + 'px', |
|||
height: this.height + 'px' |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
// "dataForm.CONTENT": { |
|||
// deep: true, |
|||
// handler: function (newValue, oldValue) { |
|||
// this.dataForm.content1 = newValue; |
|||
// }, |
|||
// }, |
|||
// templateContent: { |
|||
// deep: true, |
|||
// handler: function (newValue, oldValue) { |
|||
// // this.templateContent=newValue |
|||
// var vm = this; |
|||
// let inrex = []; |
|||
// for (let index = vm.templateContent.length - 1; index >= 0; index--) { |
|||
// if ( |
|||
// vm.templateContent[index].content == "" && |
|||
// (vm.templateContent[index].img == "" || |
|||
// vm.templateContent[index].imageName == "") |
|||
// ) { |
|||
// inrex.push(index); |
|||
// } |
|||
// } |
|||
// for (let index = 0; index < inrex.length; index++) { |
|||
// vm.templateContent.splice(inrex[index], 1); |
|||
// } |
|||
// }, |
|||
// }, |
|||
}, |
|||
mounted() { |
|||
this.getDicts('iot_template_category').then(res => { |
|||
this.iotTemplateCategoryList = res.data |
|||
// console.log(this.iotTemplateCategoryList, "this.iotTemplateCategoryList"); |
|||
}) |
|||
}, |
|||
created() { |
|||
this.getDicts('iot_device_font_type').then(res => { |
|||
this.fontTypeOptions = res.data |
|||
// console.log(this.fontTypeOptions, "字体类型"); |
|||
}) |
|||
this.getDicts('iot_devices_font_color').then(res => { |
|||
this.colorOptions = res.data |
|||
// console.log(this.colorOptions, "字体颜色"); |
|||
}) |
|||
this.getDicts('iot_device_font_inScreen_mode').then(res => { |
|||
this.inScreenModeOptions = res.data |
|||
// console.log(this.inScreenModeOptions, "入屏方式"); |
|||
}) |
|||
this.getdevicessize() |
|||
}, |
|||
methods: { |
|||
init(devicePixel, type, mode) { |
|||
if (devicePixel) { |
|||
this.devicePixelBoolean = true |
|||
this.dataForm.screenSize = devicePixel |
|||
this.boardWidth = devicePixel.split('*')[0] |
|||
this.boardHeight = devicePixel.split('*')[1] |
|||
} else { |
|||
this.devicePixelBoolean = false |
|||
;(this.boardWidth = '400'), (this.boardHeight = '40') |
|||
} |
|||
// type 1:待下发信息 2:信息模板 |
|||
// mode 1:工作台弹窗跳转 2：情报板管理跳转 |
|||
|
|||
this.infoType = type |
|||
if (mode == 1 || type == 1) { |
|||
this.categoryRules = false |
|||
} else { |
|||
this.categoryRules = true |
|||
} |
|||
// this.title = "新增"; |
|||
this.isAdd = !this.dataForm.id |
|||
this.dialogVisible = true |
|||
this.templateDelContent = [] |
|||
this.$nextTick(() => { |
|||
if (this.isAdd) { |
|||
this.$refs['dataForm'] && this.$refs['dataForm'].resetFields() |
|||
this.dataForm.id = '' |
|||
this.dataForm = {} |
|||
this.width = '400' |
|||
this.height = '40' |
|||
this.dataForm = { |
|||
CONTENT: '请输入内容', |
|||
COLOR: 'FFFF00', |
|||
FONT: '黑体', |
|||
SPEED: '1', |
|||
ACTION: '1', |
|||
// COORDINATE: "", |
|||
STATE: 'true', |
|||
STAY: '5', |
|||
screenSize: devicePixel, |
|||
formatStyle: '2' |
|||
} |
|||
this.content = '请输入内容' |
|||
} else { |
|||
// this.getInfo(); |
|||
// this.$refs["dataForm"] && this.$refs["dataForm"].clearValidate(); |
|||
} |
|||
}) |
|||
if (this.dataForm.screenSize) { |
|||
this.getFontSizeList(1) |
|||
} |
|||
this.$forceUpdate() |
|||
}, |
|||
getFontSizeList(type) { |
|||
this.getDicts('iot_device_font_size').then(res => { |
|||
this.fontSizeOpt = res.data |
|||
this.dataForm.FONT_SIZE = res.data[1].dictValue |
|||
if (type) { |
|||
this.alignment(2) |
|||
} |
|||
}) |
|||
|
|||
//TODO 测试数据 后期需转接口 |
|||
/*getFontSizeByDevicePixel(this.dataForm.screenSize).then((res) => { |
|||
console.log(res, "根据分辨率筛字体大小"); |
|||
this.fontSizeOpt = res.data.fontSizeList; |
|||
this.dataForm.FONT_SIZE = res.data.defaultFont; |
|||
if(type){ |
|||
this.alignment(2) |
|||
} |
|||
});*/ |
|||
}, |
|||
// 查分辨率 |
|||
getdevicessize() { |
|||
//TODO 测试数据 需删除走接口 |
|||
this.screenSizeOptions = [ |
|||
{ |
|||
device_pixel: '192*160' |
|||
}, |
|||
{ |
|||
device_pixel: '480*48' |
|||
}, |
|||
{ |
|||
device_pixel: '768*64' |
|||
}, |
|||
{ |
|||
device_pixel: '160*80' |
|||
} |
|||
] |
|||
|
|||
// TODO 查分辨率接口 |
|||
/*devicessize().then((res) => { |
|||
console.log(res, "查分辨率"); |
|||
this.screenSizeOptions = res.data; |
|||
});*/ |
|||
}, |
|||
changeScreenSize(size) { |
|||
this.boardWidth = size.split('*')[0] |
|||
this.boardHeight = size.split('*')[1] |
|||
this.getFontSizeList() |
|||
this.$forceUpdate() |
|||
}, |
|||
changeFontSize() { |
|||
console.log(this.dataForm.FONT_SIZE) |
|||
this.alignment(this.alignmentNum) |
|||
this.$forceUpdate() |
|||
}, |
|||
keyDown(ev) { |
|||
this.alignment(this.alignmentNum) |
|||
}, |
|||
|
|||
//选择图片弹框关闭事件 |
|||
close() { |
|||
this.checkList = [] |
|||
this.dialogVisible = false |
|||
}, |
|||
faceDrop(e) { |
|||
e.preventDefault() //阻止默认行为 |
|||
this.listquery.push(this.curDragImgItem) |
|||
}, |
|||
// 全选 |
|||
allowDrop(e) { |
|||
e.preventDefault() //阻止默认行为 |
|||
}, |
|||
ondragenter(e) { |
|||
e.preventDefault() //阻止默认行为 |
|||
}, |
|||
// 获取信息 |
|||
// getInfo() { |
|||
// getTemplateInfo(this.dataForm.id).then((data) => { |
|||
// this.dataForm = data.data; |
|||
// this.width = this.dataForm.screenSize.split("*")[0]; |
|||
// this.height = this.dataForm.screenSize.split("*")[1]; |
|||
// }); |
|||
// getTemplateContent(this.dataForm.id).then((data) => { |
|||
// this.templateContent = data.rows; |
|||
|
|||
// if (this.templateContent.length == 0) { |
|||
// this.templateContent.push({ |
|||
// content: "", |
|||
// fontColor: "yellow", |
|||
// fontSize: "24", |
|||
// fontType: "KaiTi", |
|||
// fontSpacing: 0, |
|||
// coordinate: "000000", |
|||
// img: "", |
|||
// }); |
|||
// } |
|||
// }); |
|||
// }, |
|||
// 表单提交 |
|||
async dataFormSubmitHandle() { |
|||
this.alignment() |
|||
// let valid = await this.$refs.dataForm.validate().catch(() => { |
|||
// return this.$modal.msgError("校验错误"); |
|||
// }); |
|||
// if (!valid) return; |
|||
if (!this.dataForm.CONTENT.trim()) { |
|||
return this.$modal.msgError('当前输入内容为空') |
|||
} else if (!this.dataForm.category && this.infoType == 2) { |
|||
return this.$modal.msgError('情报板所属类别不能为空') |
|||
} |
|||
if (this.dataForm.CONTENT.indexOf('\\')>0) { |
|||
return this.$modal.msgError("内容不能含有特殊字符'\\'") |
|||
} |
|||
//走接口检验内容是否包含敏感字段 |
|||
/*checkIotBoardContent(this.dataForm.CONTENT).then(response => { |
|||
if (response.data == 0) { |
|||
return this.$modal.msgError('当前发布内容包含敏感字段，请修改') |
|||
} else if (response.data == 2) { |
|||
return this.$modal.msgError('当前输入内容为空') |
|||
} else { |
|||
this.loading = true |
|||
// let templateId = ""; |
|||
let method = 'put' |
|||
if (this.isAdd) { |
|||
if (this.infoType == 1) { |
|||
// 不走接口 存到待下发信息里 |
|||
this.dataForm.STAY = Number(this.dataForm.STAY) * 10 |
|||
this.$emit('addInfo', this.dataForm) |
|||
} else { |
|||
// 走接口 存到信息模板里 |
|||
const params1 = { |
|||
applyType: '', |
|||
category: this.dataForm.category, |
|||
coordinate: '', |
|||
height: '', |
|||
id: '', |
|||
imageUrl: '', |
|||
imgSizeFrom: '', |
|||
inScreenMode: this.dataForm.ACTION, |
|||
remark: '', |
|||
screenSize: this.dataForm.screenSize, |
|||
stopTime: Number(this.dataForm.STAY) * 10, |
|||
vmsType: '', |
|||
width: '' |
|||
} |
|||
const templateContent = [] |
|||
templateContent.push({ |
|||
content: this.dataForm.CONTENT, |
|||
coordinate: this.dataForm.COORDINATE, |
|||
fontColor: this.getColorStyle(this.dataForm.COLOR), |
|||
fontSize: this.dataForm.FONT_SIZE.substring(0, 2), |
|||
fontSpacing: this.dataForm.SPEED, |
|||
fontType: this.getFontStyle(this.dataForm.FONT) |
|||
}) |
|||
// this.$emit("addInfoMode", this.dataForm); |
|||
addTemplate(params1, method).then(data => { |
|||
console.log(data, '新增口') |
|||
let params2 = { |
|||
templateContent: templateContent, |
|||
templateId: data |
|||
} |
|||
addTemplateContent(params2) |
|||
.then(res => { |
|||
if (res.code == 200) { |
|||
this.$emit('getActiveNames') |
|||
this.$message.success('添加成功') |
|||
} |
|||
}) |
|||
.catch(err => { |
|||
throw err |
|||
}) |
|||
}) |
|||
} |
|||
} else { |
|||
// // 修改 |
|||
// editTemplate(this.dataForm).then((data) => {}); |
|||
// this.templateContent.forEach((e) => { |
|||
// e.img = e.imageName; |
|||
// }); |
|||
// var params = { |
|||
// templateContent: this.templateContent, |
|||
// templateId: this.dataForm.id, |
|||
// templateDelContent: this.templateDelContent, |
|||
// }; |
|||
// editTemplateContent(params).then((response) => { |
|||
// // console.log(response, "返回结果"); |
|||
// }); |
|||
} |
|||
this.loading = false |
|||
this.dialogVisible = false |
|||
this.isAdd = false |
|||
this.$emit('refreshDataList', this.dataForm) |
|||
var textBoard2 = document.getElementsByClassName('textBoard2') |
|||
textBoard2[0].style.position = 'absolute' |
|||
} |
|||
})*/ |
|||
|
|||
this.loading = true |
|||
// let templateId = ""; |
|||
let method = 'put' |
|||
if (this.isAdd) { |
|||
if (this.infoType == 1) { |
|||
// 不走接口 存到待下发信息里 |
|||
this.dataForm.STAY = Number(this.dataForm.STAY) * 10 |
|||
this.$emit('addInfo', this.dataForm) |
|||
} else { |
|||
// 走接口 存到信息模板里 |
|||
const params1 = { |
|||
applyType: '', |
|||
category: this.dataForm.category, |
|||
coordinate: '', |
|||
height: '', |
|||
id: '', |
|||
imageUrl: '', |
|||
imgSizeFrom: '', |
|||
inScreenMode: this.dataForm.ACTION, |
|||
remark: '', |
|||
screenSize: this.dataForm.screenSize, |
|||
stopTime: Number(this.dataForm.STAY) * 10, |
|||
vmsType: '', |
|||
width: '' |
|||
} |
|||
const templateContent = [] |
|||
templateContent.push({ |
|||
content: this.dataForm.CONTENT, |
|||
coordinate: this.dataForm.COORDINATE, |
|||
fontColor: this.dataForm.COLOR, |
|||
fontSize: this.dataForm.FONT_SIZE.substring(0, 2), |
|||
fontSpacing: this.dataForm.SPEED, |
|||
fontType: this.getFontStyle(this.dataForm.FONT), |
|||
formatStyle: this.dataForm.formatStyle |
|||
}) |
|||
// this.$emit("addInfoMode", this.dataForm); |
|||
addTemplate(params1, method).then(data => { |
|||
console.log(data, '新增口') |
|||
let params2 = { |
|||
templateContent: templateContent, |
|||
templateId: data |
|||
} |
|||
addTemplateContent(params2) |
|||
.then(res => { |
|||
if (res.code == 200) { |
|||
this.$emit('getActiveNames') |
|||
this.$message.success('添加成功') |
|||
} |
|||
}) |
|||
.catch(err => { |
|||
throw err |
|||
}) |
|||
}) |
|||
} |
|||
} else { |
|||
// // 修改 |
|||
// editTemplate(this.dataForm).then((data) => {}); |
|||
// this.templateContent.forEach((e) => { |
|||
// e.img = e.imageName; |
|||
// }); |
|||
// var params = { |
|||
// templateContent: this.templateContent, |
|||
// templateId: this.dataForm.id, |
|||
// templateDelContent: this.templateDelContent, |
|||
// }; |
|||
// editTemplateContent(params).then((response) => { |
|||
// // console.log(response, "返回结果"); |
|||
// }); |
|||
} |
|||
this.loading = false |
|||
this.dialogVisible = false |
|||
this.isAdd = false |
|||
this.$emit('refreshDataList', this.dataForm) |
|||
var textBoard2 = document.getElementsByClassName('textBoard2') |
|||
textBoard2[0].style.position = 'absolute' |
|||
}, |
|||
/*********************************************业务代码***********************************************/ |
|||
getFontStyle(font) { |
|||
if (font == '宋体') { |
|||
return 'Simsun' |
|||
} else if (font == '黑体') { |
|||
return 'SimHei' |
|||
} else if (font == '楷体') { |
|||
return 'KaiTi' |
|||
} else if (font == '仿宋') { |
|||
return 'FangSong' |
|||
} else if (font == '隶书') { |
|||
return 'LiSu' |
|||
} |
|||
}, |
|||
getColorStyle(font) { |
|||
if (font == '黄色' || font == 'yellow') { |
|||
return '#FFFF00' |
|||
} else if (font == '红色' || font == 'red') { |
|||
return '#FF0000' |
|||
} else if (font == '绿色' || font == 'GreenYellow') { |
|||
return '#00FF00' |
|||
} else if (font == '蓝色' || font == 'blue') { |
|||
return '#0000FF' |
|||
} else { |
|||
return '#' + font |
|||
} |
|||
}, |
|||
getTextAlign(font) { |
|||
if (font == '0') { |
|||
return 'left' |
|||
} else if (font == '1') { |
|||
return 'right' |
|||
} else { |
|||
return 'center' |
|||
} |
|||
}, |
|||
// 文字对齐方式 |
|||
alignment(alignmentNum) { |
|||
this.alignmentNum = alignmentNum |
|||
var divContent2 = document.getElementsByClassName('blackBoard2') |
|||
var textBoard2 = document.getElementsByClassName('textBoard2') |
|||
// 获取文字长宽 |
|||
// let textWidth = textBoard2[0].offsetWidth; |
|||
// let textHeight = textBoard2[0].offsetHeight; |
|||
// // 获取黑盒子长宽 |
|||
// let divWidth = divContent2[0].offsetWidth; |
|||
// let divHeight = divContent2[0].offsetHeight; |
|||
// var args = [...divContent2]; |
|||
|
|||
switch (alignmentNum) { |
|||
// 左对齐 |
|||
case 0: |
|||
divContent2[0].style.justifyContent = 'left' |
|||
divContent2[0].style.alignItems = 'center' |
|||
// textBoard2[0].style.textAlign = "left"; |
|||
textBoard2[0].style.position = 'static' |
|||
|
|||
break |
|||
// 左右居中 |
|||
case 2: |
|||
divContent2[0].style.justifyContent = 'center' |
|||
divContent2[0].style.alignItems = 'center' |
|||
// textBoard2[0].style.textAlign = "center"; |
|||
textBoard2[0].style.position = 'static' |
|||
|
|||
break |
|||
// 右对齐 |
|||
case 1: |
|||
divContent2[0].style.justifyContent = 'right' |
|||
divContent2[0].style.alignItems = 'center' |
|||
// textBoard2[0].style.textAlign = "right"; |
|||
textBoard2[0].style.position = 'static' |
|||
|
|||
break |
|||
// 上对齐 |
|||
case 4: |
|||
divContent2[0].style.alignItems = 'flex-start' |
|||
textBoard2[0].style.position = 'static' |
|||
|
|||
break |
|||
// 上下对齐 |
|||
case 5: |
|||
divContent2[0].style.alignItems = 'center' |
|||
textBoard2[0].style.position = 'static' |
|||
|
|||
break |
|||
// 下对齐 |
|||
case 6: |
|||
divContent2[0].style.alignItems = 'flex-end' |
|||
textBoard2[0].style.position = 'static' |
|||
|
|||
break |
|||
} |
|||
if (!alignmentNum) { |
|||
divContent2[0].style.alignItems = 'center' |
|||
textBoard2[0].style.position = 'static' |
|||
} |
|||
var textLeft = this.addZero(textBoard2[0].offsetLeft) |
|||
var textTop = this.addZero(textBoard2[0].offsetTop) |
|||
this.dataForm.COORDINATE = textLeft + textTop |
|||
if (alignmentNum != undefined) { |
|||
this.dataForm.formatStyle = alignmentNum |
|||
} |
|||
// console.log(this.dataForm.COORDINATE, "this.dataForm.COORDINATE"); |
|||
}, |
|||
addZero(num) { |
|||
return ('000' + num).slice(-3) |
|||
}, |
|||
/*增加新的内容*/ |
|||
|
|||
/*删除内容*/ |
|||
// delTemplateContent(data) { |
|||
// for (let i = 0; i < this.templateContent.length; i++) { |
|||
// if ( |
|||
// this.templateContent.indexOf(data) == |
|||
// this.templateContent.indexOf(this.templateContent[i]) |
|||
// ) { |
|||
// if (this.templateContent.length == 1) { |
|||
// this.$modal.msgError("至少保留一条数据"); |
|||
// } else { |
|||
// if (data.id) { |
|||
// this.templateDelContent.push(data); |
|||
// } |
|||
// this.templateContent.splice(this.templateContent.indexOf(data), 1); |
|||
// } |
|||
// } |
|||
// } |
|||
// }, |
|||
cliTest(data) { |
|||
this.ispreviewContent = this.templateContent.indexOf(data) |
|||
}, |
|||
/********************图片上传*********************/ |
|||
handleRemove(file, fileList) {}, |
|||
handlePreview(file) {}, |
|||
handleExceed(files, fileList) { |
|||
this.$modal.msgError(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`) |
|||
}, |
|||
beforeRemove(file, fileList) { |
|||
return this.$confirm(`确定移除 ${file.name}？`) |
|||
}, |
|||
|
|||
handleClose(done) { |
|||
var textBoard2 = document.getElementsByClassName('textBoard2') |
|||
textBoard2[0].style.position = 'absolute' |
|||
this.dialogVisible = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.infoBoardButton { |
|||
::v-deep .el-radio-button--medium .el-radio-button__inner { |
|||
height: 3vh; |
|||
line-height: 3vh; |
|||
padding: 0 0.6vw; |
|||
font-size: 0.7vw; |
|||
} |
|||
} |
|||
.previewContentCSS { |
|||
border: yellow 1px dashed; |
|||
} |
|||
/* 页脚 */ |
|||
.dialog-footer { |
|||
padding-left: 450px; |
|||
} |
|||
.photoOther img, |
|||
.photo img { |
|||
max-width: 300px; |
|||
width: 100%; |
|||
// height: 80px; |
|||
} |
|||
.infoBoardButton { |
|||
display: flex; |
|||
justify-content: left; |
|||
} |
|||
.boardTextStyle { |
|||
line-height: 1; |
|||
caret-color: rgba(0, 0, 0, 0); |
|||
user-select: none; |
|||
position: absolute; |
|||
// max-height: 128px; |
|||
overflow: hidden; |
|||
} |
|||
.blackBoard2 { |
|||
background: #000000; |
|||
display: flex; |
|||
margin: 0 auto; |
|||
overflow: hidden; |
|||
position: relative; |
|||
// justify-content: center; |
|||
align-items: center; |
|||
} |
|||
::v-deep .el-card__body { |
|||
padding: 10px 0; |
|||
} |
|||
|
|||
// |
|||
::v-deep .el-dialog__header { |
|||
background-color: #145977; |
|||
} |
|||
::v-deep .el-dialog__body { |
|||
padding: 5px 20px; |
|||
background-color: #145977; |
|||
} |
|||
::v-deep .el-dialog__footer { |
|||
background-color: #145977; |
|||
} |
|||
::v-deep .el-card { |
|||
margin-top: 1vh; |
|||
background-color: #145977; |
|||
border: 2px solid #1d7890; |
|||
} |
|||
::v-deep .el-form-item__label { |
|||
color: #3de8ff; |
|||
} |
|||
::v-deep .el-input--mini .el-input__inner { |
|||
color: #fff; |
|||
background-color: #096d8c; |
|||
} |
|||
::v-deep .el-input-number.is-controls-right .el-input-number__decrease { |
|||
color: #fff; |
|||
background-color: #096d8c; |
|||
} |
|||
::v-deep .el-dialog__title { |
|||
color: #fff; |
|||
} |
|||
::v-deep .el-textarea__inner { |
|||
color: #fff; |
|||
background-color: #096d8c; |
|||
border-color: #096d8c; |
|||
} |
|||
::v-deep .el-input-number.is-controls-right .el-input-number__decrease { |
|||
border-color: transparent; |
|||
} |
|||
::v-deep .el-input-number.is-controls-right .el-input-number__increase { |
|||
border-color: transparent; |
|||
color: #fff; |
|||
background-color: #096d8c; |
|||
} |
|||
::v-deep .el-button--medium { |
|||
padding: 5px 25px; |
|||
font-size: 14px; |
|||
border-radius: 20px; |
|||
border: transparent; |
|||
} |
|||
::v-deep .el-radio-button__inner { |
|||
color: #ffffff; |
|||
background-color: pink; |
|||
border-color: #1d58a9; |
|||
-webkit-box-shadow: -1px 0 0 0 #1d58a9; |
|||
box-shadow: -1px 0 0 0 #1d58a9; |
|||
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
|||
border-radius: 3px 3px 3px 3px; |
|||
opacity: 1; |
|||
border: none !important; |
|||
} |
|||
::v-deep .infoBoardButton .el-radio-button--medium .el-radio-button__inner { |
|||
margin: 0 3px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,963 @@ |
|||
<template> |
|||
<div class="container infoBoardDialog"> |
|||
<!-- 添加信息弹窗 --> |
|||
<el-dialog title="修改" :visible.sync="dialogVisible" width="43%" :before-close="closeDialog" :close-on-click-modal="false"> |
|||
<div class="dialogStyleBox"> |
|||
<div class="dialogLine"></div> |
|||
<div class="dialogCloseButton"></div> |
|||
</div> |
|||
<el-card class="box-card" style="display: flex;justify-content: center;"> |
|||
<div class="blackBoard1" v-on:ondragenter="ondragenter" v-on:drop="faceDrop" v-on:dragover="allowDrop" :style="{ |
|||
width: getDevicePixel(boardWidth, 0), |
|||
height: getDevicePixel(boardHeight, 1), |
|||
position: 'relative', |
|||
|
|||
display:'flex', |
|||
'align-items': getTextAlign(dataForm.formatStyle), |
|||
'justify-content': getTextAlign(dataForm.formatStyle) |
|||
}"> |
|||
<span class="textBoard1 boardTextStyle" :style="{ |
|||
color: getColorStyle(dataForm.COLOR), |
|||
fontSize: getFontSize(dataForm.FONT_SIZE), |
|||
fontFamily: getFontStyle(dataForm.FONT), |
|||
zIndex: '1000', |
|||
position:'relative', |
|||
/*left: getCoordinate(dataForm.COORDINATE.substring(0, 3), 0), |
|||
top: getCoordinate(dataForm.COORDINATE.substring(3, 6), 1),*/ |
|||
maxHeight:getDevicePixel(boardHeight, 1), |
|||
}" v-html=" |
|||
dataForm.CONTENT.replace(/\n|\r\n/g, '<br>').replace( |
|||
/ /g, |
|||
' ' |
|||
) |
|||
"></span> |
|||
</div> |
|||
</el-card> |
|||
|
|||
<el-card> |
|||
<el-form :model="dataForm" :rules="dataRule" label-width="90px" ref="dataForm" size="mini"> |
|||
<el-row :gutter="24" style="height: 45px"> |
|||
<el-col :span="8" v-show="this.boardEmitItem.type == 2 || this.dataForm.category"> |
|||
<el-form-item prop="category" label="所属类别"> |
|||
<el-select v-model="dataForm.category" placeholder="请选择所属类别" size="mini" disabled> |
|||
<el-option v-for="item in iotTemplateCategoryList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="16" class="infoBoardButton"> |
|||
<el-radio-group v-model="radio1" @input="alignment(radio1)"> |
|||
<el-radio-button :label="0">左对齐</el-radio-button> |
|||
<el-radio-button :label="2">左右居中</el-radio-button> |
|||
<el-radio-button :label="1">右对齐</el-radio-button> |
|||
</el-radio-group> |
|||
<!-- <el-button type="info" plain @click="alignment(6)" size="mini">下对齐</el-button> |
|||
<el-button type="info" plain @click="alignment(5)" size="mini">上下居中</el-button> |
|||
<el-button type="info" plain @click="alignment(4)" size="mini">上对齐</el-button> --> |
|||
<!-- <el-button type="primary" @click="alignment(1)" size="mini" |
|||
>左对齐</el-button |
|||
> |
|||
<el-button type="primary" @click="alignment(2)" size="mini" |
|||
>左右居中</el-button |
|||
> |
|||
<el-button type="primary" @click="alignment(3)" size="mini" |
|||
>右对齐</el-button |
|||
> --> |
|||
|
|||
<!-- <el-button type="primary" plain @click="addCurrRow">添加</el-button> --> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="24" style="display: flex; |
|||
flex-wrap: wrap;width:100%"> |
|||
<el-col :span="24"> |
|||
<el-form-item label="详细内容" prop="CONTENT"> |
|||
<el-input type="textarea" clearable id="textContent" placeholder="详细内容" v-model="dataForm.CONTENT" @keyup.native="keyDown($event)"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item prop="COLOR" label="字体颜色"> |
|||
<el-select v-model="dataForm.COLOR" filterable placeholder="请选择"> |
|||
<el-option v-for="item in colorOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item prop="FONT_SIZE" label="字体大小"> |
|||
<el-select v-model="dataForm.FONT_SIZE" style="width: 100%" @change="changeFontSize"> |
|||
<el-option v-for="item in fontSizeOpt" :key="item.dictLabel" :label="item.dictLabel" :value="item.dictLabel"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item prop="FONT" label="字体类型"> |
|||
<el-select v-model="dataForm.FONT" filterable placeholder="请选择"> |
|||
<el-option v-for="item in fontTypeOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<!-- <el-col :span="6"> |
|||
<el-form-item prop="SPEED" label="字体间距"> |
|||
<el-input-number |
|||
:min="0" |
|||
controls-position="right" |
|||
v-model="dataForm.SPEED" |
|||
style="width: 100%" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> --> |
|||
<!-- <el-col :span="24" v-show="templateContent.length > 1"> |
|||
<el-divider></el-divider> |
|||
</el-col> --> |
|||
|
|||
<!-- <el-col :span="6"> |
|||
<el-form-item prop="rollSpeed" label="滚动速度"> |
|||
<el-input-number |
|||
:min="0" |
|||
controls-position="right" |
|||
v-model="dataForm.rollSpeed" |
|||
style="width: 100%" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> --> |
|||
<el-col :span="8"> |
|||
<el-form-item prop="STAY" label="停留时间(秒)"> |
|||
<el-input-number :min="0" controls-position="right" v-model="dataForm.STAY" style="width: 100%" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item prop="ACTION" label="入屏方式"> |
|||
<el-select v-model="dataForm.ACTION" filterable placeholder="请选择"> |
|||
<el-option v-for="item in inScreenModeOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item prop="screenSize" label="屏幕尺寸"> |
|||
<el-input disabled v-model="dataForm.screenSize"></el-input> |
|||
<!-- <el-select |
|||
@change="resolvingPowerType" |
|||
v-model="dataForm.screenSize" |
|||
filterable |
|||
placeholder="请选择" |
|||
disabled |
|||
> |
|||
<el-option |
|||
v-for="item in screenSizeOptions" |
|||
:key="item.type" |
|||
:label="item.type" |
|||
:value="item.type" |
|||
> |
|||
</el-option> |
|||
</el-select> --> |
|||
</el-form-item> |
|||
</el-col> |
|||
<!-- <el-col :span="6"> |
|||
<el-form-item prop="remark" label="备注"> |
|||
<el-input v-model="dataForm.remark" style="width: 100%" /> |
|||
</el-form-item> |
|||
</el-col> --> |
|||
</el-row> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="dataFormSubmitHandle()" v-loading="loading" class="submitButton" style="background-color: #10aac2;color:#fff;">确认 |
|||
</el-button> |
|||
<el-button @click="closeDialog()" class="closeButton" style="background-color:#b5b5b6;color:#fff;">取消</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { |
|||
// getTemplateInfo, |
|||
// addTemplate, |
|||
// addTemplateContent, |
|||
// editTemplateContent, |
|||
// editTemplate, |
|||
// deleteTemplate, |
|||
// getTemplateContent, |
|||
editTemplate, |
|||
editTemplateContent, |
|||
getGalleryList, |
|||
uploadBoardEditInfo, |
|||
getFontSizeByDevicePixel |
|||
} from '@/api/board/template' |
|||
import { checkIotBoardContent } from '@/api/board/vocabulary' |
|||
import { HashMap } from '@/api/board/informationBoard' |
|||
// 对象深拷贝 |
|||
export const deepClone = data => { |
|||
// 封装的判断数据类型的方法 |
|||
var type = typeof data |
|||
var obj |
|||
if (type === 'array') { |
|||
obj = [] |
|||
} else if (type === 'object') { |
|||
obj = {} |
|||
} else { |
|||
// 不再具有下一层次 |
|||
return data |
|||
} |
|||
if (type === 'array') { |
|||
for (var i = 0, len = data.length; i < len; i++) { |
|||
obj.push(deepClone(data[i])) |
|||
} |
|||
} else if (type === 'object') { |
|||
for (var key in data) { |
|||
obj[key] = deepClone(data[key]) |
|||
} |
|||
} |
|||
return obj |
|||
} |
|||
export default { |
|||
props: { |
|||
boardEmitItem: { |
|||
required: true, |
|||
type: Object |
|||
} |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
radio1: '0', |
|||
alignmentNum: 2, |
|||
iotTemplateCategoryList: [], |
|||
content: '', |
|||
|
|||
boardWidth: '', |
|||
boardHeight: '', |
|||
// boardEmitItem:this.boardEmitItem, |
|||
disabled: true, |
|||
checkList: [], //复选框一组 |
|||
obj: '', |
|||
imgUrl: [], |
|||
imgUrlOther: [], |
|||
dialogVisible: false, |
|||
fileList: [ |
|||
{ |
|||
name: 'food.jpeg', |
|||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' |
|||
}, |
|||
{ |
|||
name: 'food2.jpeg', |
|||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' |
|||
} |
|||
], |
|||
listquery: [], //拖拽图片 |
|||
curDragImgItem: '', |
|||
visible: false, |
|||
startTxt_x: '000', |
|||
startTxt_y: '000', |
|||
width: '400', |
|||
height: '40', |
|||
content: '', |
|||
fontColor: 'FFFF00', |
|||
fontSize: '24', |
|||
fontType: 'KaiTi', |
|||
fontSpacing: 0, |
|||
coordinate: '000000', |
|||
url: '', |
|||
previewContent: '', //预览内容 |
|||
ispreviewContent: -1, |
|||
dataForm: { |
|||
CONTENT: '', |
|||
STAY: '', |
|||
FONT: '', |
|||
COORDINATE: '', |
|||
formatStyle:'', |
|||
|
|||
// id: "", |
|||
// screenSize: "400*40", //屏幕尺寸 |
|||
// inScreenMode: "1", //入屏方式 |
|||
// rollSpeed: "1000", |
|||
// stopTime: "500", |
|||
// applyType: "", //适用类型 |
|||
// vmsType: "", //情报板类型 |
|||
// remark: "", //备注 |
|||
// imgSizeFrom: "", //尺寸大小 |
|||
// imageUrl: "", |
|||
// height: "", |
|||
// width: "", |
|||
// coordinate: "", //起始点位置;前3位代表x点的位值，后3位代表y点的位置 |
|||
}, |
|||
templateContentModel: '', |
|||
templateContent: [], |
|||
templateDelContent: [], |
|||
fontTypeOptions: [], |
|||
screenSizeOptions: [ |
|||
{ |
|||
type: '400*40' |
|||
}, |
|||
{ |
|||
type: '128*64' |
|||
} |
|||
], |
|||
colorOptions: [], |
|||
isCurrencyOptions: [ |
|||
{ |
|||
code: '0', |
|||
content: '通用' |
|||
}, |
|||
{ |
|||
code: '1', |
|||
content: '仅为智能推荐模板' |
|||
} |
|||
], |
|||
inScreenModeOptions: [], |
|||
imgSize: [ |
|||
{ |
|||
type: '1024*128', |
|||
name: '全屏' |
|||
}, |
|||
{ |
|||
type: '', |
|||
name: '正常' |
|||
} |
|||
], |
|||
fontSizeOpt: [], |
|||
title: '选择图片', |
|||
loading: false, |
|||
isAdd: false |
|||
} |
|||
}, |
|||
// directives: { |
|||
// drag: function (el, binding, vnode) { |
|||
// let that = vnode.context; |
|||
// let dragBox = el; |
|||
// dragBox.onmousedown = (e) => { |
|||
// // that.startTxt_x = dragBox.style.left.substring (0, dragBox.style.left.length - 2) |
|||
// // that.startTxt_y = dragBox.style.left.substring (0, dragBox.style.top.length - 2) |
|||
// let disX = e.clientX - dragBox.offsetLeft; |
|||
// let disY = e.clientY - dragBox.offsetTop; |
|||
// let clientHeight = dragBox.clientHeight; |
|||
// let clientWidth = dragBox.clientWidth; |
|||
// document.onmousemove = function (e) { |
|||
// //鼠标移动触发事件，元素移到对应为位置 |
|||
// let left = e.pageX - disX; |
|||
// let top = e.pageY - disY; |
|||
// //限制区域 |
|||
// if (left <= 0) { |
|||
// left = 0; |
|||
// } else if (that.width - left - clientWidth <= 0) { |
|||
// left = that.width - clientWidth; |
|||
// } |
|||
// if (top <= 0) { |
|||
// top = 0; |
|||
// } else if (that.height - top - clientHeight <= 0) { |
|||
// top = that.height - clientHeight; |
|||
// } |
|||
// dragBox.style.left = left + "px"; |
|||
// dragBox.style.top = top + "px"; |
|||
// let a = (Array(3).join("0") + parseInt(left)).slice(-3); |
|||
// let b = (Array(3).join("0") + parseInt(top)).slice(-3); |
|||
// that.templateContent[dragBox.id].coordinate = a + b; |
|||
// }; |
|||
// document.onmouseup = function () { |
|||
// //鼠标抬起，清除绑定的事件，元素放置在对应的位置 |
|||
// document.onmousemove = null; |
|||
// document.onmousedown = null; |
|||
// }; |
|||
// e.preventDefault(); //阻止浏览器的默认事件 |
|||
// }; |
|||
// }, |
|||
// }, |
|||
computed: { |
|||
dataRule() { |
|||
return { |
|||
itemPropertyMap: null, |
|||
CONTENT: [ |
|||
{ |
|||
required: true, |
|||
message: '请输入详细内容', |
|||
trigger: 'blur' |
|||
}, |
|||
{ pattern: /^^((?!\\\\).)*/gi, message: '禁止输入特殊字符!', trigger: 'blur' } |
|||
], |
|||
fontColor: [ |
|||
{ |
|||
required: true, |
|||
message: '请填写字体颜色', |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
fontSize: [ |
|||
{ |
|||
required: true, |
|||
message: '请填写字体大小', |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
fontType: [ |
|||
{ |
|||
required: true, |
|||
message: '请选择字体类型', |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
fontSpacing: [ |
|||
{ |
|||
required: true, |
|||
message: '请选择字体间距', |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
rollSpeed: [ |
|||
{ |
|||
required: true, |
|||
message: '请填写滚动速度', |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
stopTime: [ |
|||
{ |
|||
required: true, |
|||
message: '请填写停留时间', |
|||
trigger: 'blur' |
|||
} |
|||
], |
|||
inScreenMode: [ |
|||
{ |
|||
required: true, |
|||
message: '请选择入屏方式', |
|||
trigger: 'blur' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
divStyle: function () { |
|||
return { |
|||
width: this.width + 'px', |
|||
height: this.height + 'px' |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
// boardEmitItem(newval){ |
|||
// console.log(newval,"newval") |
|||
// this.boardEmitItem = newval |
|||
// } |
|||
// "dataForm.CONTENT": { |
|||
// deep: true, |
|||
// handler: function (newValue, oldValue) { |
|||
// this.dataForm.content1 = newValue; |
|||
// }, |
|||
// }, |
|||
}, |
|||
created() { |
|||
console.log(this.boardEmitItem, 'this.boardEmitItem') |
|||
this.getDicts('iot_template_category').then(res => { |
|||
this.iotTemplateCategoryList = res.data |
|||
console.log(this.iotTemplateCategoryList, 'this.iotTemplateCategoryList') |
|||
}) |
|||
this.getDicts('iot_device_font_type').then(res => { |
|||
this.fontTypeOptions = res.data |
|||
console.log(this.fontTypeOptions, '字体类型') |
|||
}) |
|||
this.getDicts('iot_devices_font_color').then(res => { |
|||
this.colorOptions = res.data |
|||
console.log(this.colorOptions, '字体颜色') |
|||
}) |
|||
// this.getDicts("iot_device_font_size").then((res) => { |
|||
// this.fontSizeOpt = res.data; |
|||
// console.log(this.fontSizeOpt, "字体大小"); |
|||
// }); |
|||
this.getDicts('iot_device_font_inScreen_mode').then(res => { |
|||
this.inScreenModeOptions = res.data |
|||
console.log(this.inScreenModeOptions, '入屏方式') |
|||
}) |
|||
if (this.boardEmitItem) { |
|||
this.boardWidth = this.boardEmitItem.screenSize.split('*')[0] |
|||
this.boardHeight = this.boardEmitItem.screenSize.split('*')[1] |
|||
this.radio1 = this.boardEmitItem.formatStyle |
|||
this.init() |
|||
} |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.title = '修改' |
|||
|
|||
this.dialogVisible = true |
|||
this.itemPropertyMap = new HashMap() |
|||
this.alignmentNum = 2 |
|||
this.dataForm = JSON.parse(JSON.stringify(this.boardEmitItem)) |
|||
this.dataForm.COLOR = this.getColorValue(this.boardEmitItem.COLOR) |
|||
console.log(this.dataForm, 'this.dataForm') |
|||
// console.log('数据回显111111111', this.boardEmitItem) |
|||
// this.dataForm.FONT = this.getFont(this.boardEmitItem.FONT) |
|||
this.dataForm.CONTENT = JSON.parse(JSON.stringify(this.boardEmitItem.CONTENT.replace('<br>', '\n').replace(/ /g, ' ').replace('<r><n>', '\n'))) |
|||
this.dataForm.STAY = JSON.parse(JSON.stringify(Number(this.boardEmitItem.STAY) / 10)) |
|||
this.getFontSizeList() |
|||
}, |
|||
getColorValue(color) { |
|||
if (color == '#00FF00') { |
|||
return '绿色' |
|||
} else { |
|||
return color |
|||
} |
|||
}, |
|||
getFontSizeList() { |
|||
this.getDicts('iot_device_font_size').then(res => { |
|||
this.fontSizeOpt = res.data |
|||
}) |
|||
|
|||
/* getFontSizeByDevicePixel(this.dataForm.screenSize).then((res) => { |
|||
console.log(res, "根据分辨率筛字体大小"); |
|||
this.fontSizeOpt = res.data.fontSizeList; |
|||
});*/ |
|||
}, |
|||
changeFontSize() { |
|||
setTimeout(() => { |
|||
this.alignment(this.alignmentNum) |
|||
}, 100) |
|||
}, |
|||
alignment(alignmentNum) { |
|||
var divContent1 = document.getElementsByClassName('blackBoard1') |
|||
var textBoard1 = document.getElementsByClassName('textBoard1') |
|||
|
|||
switch (alignmentNum) { |
|||
// 左对齐 |
|||
case 0: |
|||
textBoard1[0].style.position = 'static' |
|||
divContent1[0].style.justifyContent = 'left' |
|||
divContent1[0].style.alignItems = 'center' |
|||
break |
|||
// 左右居中 |
|||
case 2: |
|||
textBoard1[0].style.position = 'static' |
|||
divContent1[0].style.justifyContent = 'center' |
|||
divContent1[0].style.alignItems = 'center' |
|||
break |
|||
// 右对齐 |
|||
case 1: |
|||
divContent1[0].style.justifyContent = 'right' |
|||
divContent1[0].style.alignItems = 'center' |
|||
textBoard1[0].style.position = 'static' |
|||
break |
|||
// 上对齐 |
|||
case 4: |
|||
divContent1[0].style.alignItems = 'flex-start' |
|||
textBoard1[0].style.position = 'static' |
|||
|
|||
break |
|||
// 上下对齐 |
|||
case 5: |
|||
divContent1[0].style.alignItems = 'center' |
|||
textBoard1[0].style.position = 'static' |
|||
|
|||
break |
|||
// 下对齐 |
|||
case 6: |
|||
divContent1[0].style.alignItems = 'flex-end' |
|||
textBoard1[0].style.position = 'static' |
|||
|
|||
break |
|||
} |
|||
|
|||
var textLeft = this.addZero(JSON.parse(JSON.stringify(textBoard1[0].offsetLeft))) |
|||
var textTop = this.addZero(textBoard1[0].offsetTop) |
|||
|
|||
this.dataForm.COORDINATE = textLeft + textTop |
|||
this.dataForm.formatStyle = alignmentNum |
|||
}, |
|||
addZero(num) { |
|||
if (num < 0) { |
|||
return '000' |
|||
} else { |
|||
return ('000' + num).slice(-3) |
|||
} |
|||
}, |
|||
faceDrop(e) { |
|||
e.preventDefault() //阻止默认行为 |
|||
this.listquery.push(this.curDragImgItem) |
|||
}, |
|||
/* 拆分分辨率大小 */ |
|||
// resolvingPowerType(data) { |
|||
// let a = []; |
|||
// a = data.split("*"); |
|||
// this.width = a[0]; |
|||
// this.height = a[1]; |
|||
// }, |
|||
// 全选 |
|||
allowDrop(e) { |
|||
e.preventDefault() //阻止默认行为 |
|||
}, |
|||
ondragenter(e) { |
|||
e.preventDefault() //阻止默认行为 |
|||
}, |
|||
keyDown(ev) { |
|||
this.alignment(this.alignmentNum) |
|||
}, |
|||
// 表单确认 |
|||
dataFormSubmitHandle() { |
|||
console.log(this.dataForm.type, 'this.dataForm.type') |
|||
if (!this.dataForm.CONTENT.trim()) { |
|||
return this.$modal.msgError('当前输入内容为空') |
|||
} |
|||
|
|||
if (this.dataForm.CONTENT.indexOf('\\') > 0) { |
|||
return this.$modal.msgError("内容不能含有特殊字符'\\'") |
|||
} |
|||
this.loading = true |
|||
console.log(this.dataForm, '点击修改 表单') |
|||
|
|||
this.loading = false |
|||
this.isAdd = false |
|||
if (this.dataForm.type == 1) { |
|||
this.dataForm.STAY = Number(this.dataForm.STAY) * 10 |
|||
this.$emit('receiveForm', this.dataForm) |
|||
console.log(this.dataForm, 'this.dataForm修改后给父组件传表单内容') |
|||
} else { |
|||
const tcontent = { |
|||
content: this.dataForm.CONTENT, |
|||
text: this.dataForm.CONTENT, |
|||
coordinate: this.dataForm.COORDINATE, |
|||
createBy: null, |
|||
createTime: null, |
|||
fontColor: this.dataForm.COLOR, |
|||
fontSize: this.dataForm.FONT_SIZE.substring(0, 2), |
|||
fontSpacing: this.dataForm.SPEED, |
|||
fontType: this.dataForm.FONT, |
|||
height: null, |
|||
id: this.dataForm.id, |
|||
imageUrl: null, |
|||
params: {}, |
|||
remark: null, |
|||
searchValue: null, |
|||
templateId: this.dataForm.id, |
|||
updateBy: null, |
|||
updateTime: null, |
|||
width: null |
|||
} |
|||
const param = { |
|||
applyType: '', |
|||
category: this.dataForm.category, |
|||
createBy: null, |
|||
createTime: null, |
|||
dictLable: null, |
|||
id: this.dataForm.id, |
|||
inScreenMode: this.dataForm.ACTION, |
|||
isCurrency: null, |
|||
params: {}, |
|||
remark: '', |
|||
screenSize: this.dataForm.screenSize, |
|||
searchValue: null, |
|||
stopTime: Number(this.dataForm.STAY) * 10, |
|||
tcontents: null, |
|||
templateType: null, |
|||
updateBy: null, |
|||
updateTime: null, |
|||
vmsType: '', |
|||
tcontent: tcontent, |
|||
templateId: this.dataForm.id |
|||
} |
|||
editTemplate(param).then(data => {}) |
|||
let templateContent = [] |
|||
templateContent.push({ |
|||
content: this.dataForm.CONTENT, |
|||
fontColor: this.dataForm.COLOR, |
|||
fontSize: this.dataForm.FONT_SIZE.substring(0, 2), |
|||
fontType: this.dataForm.FONT, |
|||
fontSpacing: this.dataForm.SPEED, |
|||
coordinate: this.dataForm.COORDINATE, |
|||
id: this.dataForm.tcontentsId, |
|||
templateId: this.dataForm.id, |
|||
formatStyle: this.dataForm.formatStyle |
|||
}) |
|||
|
|||
var params = { |
|||
templateContent: templateContent, |
|||
templateId: this.dataForm.id, |
|||
templateDelContent: [] |
|||
} |
|||
console.log(params, 'params') |
|||
editTemplateContent(params).then(response => { |
|||
console.log(response, '返回结果') |
|||
this.$modal.msgSuccess('修改成功') |
|||
}) |
|||
this.$forceUpdate() |
|||
} |
|||
this.closeDialog() |
|||
|
|||
/*checkIotBoardContent(this.dataForm.CONTENT).then(response => { |
|||
if (response.data == 0) { |
|||
return this.$modal.msgError('当前发布内容包含敏感字段，请修改') |
|||
} else if (response.data == 2) { |
|||
return this.$modal.msgError('当前输入内容为空') |
|||
} else { |
|||
this.loading = true |
|||
console.log(this.dataForm, '点击修改 表单') |
|||
|
|||
this.loading = false |
|||
this.isAdd = false |
|||
if (this.dataForm.type == 1) { |
|||
this.dataForm.STAY = Number(this.dataForm.STAY) * 10 |
|||
this.$emit('receiveForm', this.dataForm) |
|||
console.log(this.dataForm, 'this.dataForm修改后给父组件传表单内容') |
|||
} else { |
|||
const tcontent = { |
|||
content: this.dataForm.CONTENT, |
|||
text: this.dataForm.CONTENT, |
|||
coordinate: this.dataForm.COORDINATE, |
|||
createBy: null, |
|||
createTime: null, |
|||
fontColor: this.dataForm.COLOR, |
|||
fontSize: this.dataForm.FONT_SIZE.substring(0, 2), |
|||
fontSpacing: this.dataForm.SPEED, |
|||
fontType: this.dataForm.FONT, |
|||
height: null, |
|||
id: this.dataForm.id, |
|||
imageUrl: null, |
|||
params: {}, |
|||
remark: null, |
|||
searchValue: null, |
|||
templateId: this.dataForm.id, |
|||
updateBy: null, |
|||
updateTime: null, |
|||
width: null |
|||
} |
|||
const param = { |
|||
applyType: '', |
|||
category: this.dataForm.category, |
|||
createBy: null, |
|||
createTime: null, |
|||
dictLable: null, |
|||
id: this.dataForm.id, |
|||
inScreenMode: this.dataForm.ACTION, |
|||
isCurrency: null, |
|||
params: {}, |
|||
remark: '', |
|||
screenSize: this.dataForm.screenSize, |
|||
searchValue: null, |
|||
stopTime: Number(this.dataForm.STAY) * 10, |
|||
tcontents: null, |
|||
templateType: null, |
|||
updateBy: null, |
|||
updateTime: null, |
|||
vmsType: '', |
|||
tcontent: tcontent, |
|||
templateId: this.dataForm.id |
|||
} |
|||
editTemplate(param).then(data => {}) |
|||
let templateContent = [] |
|||
templateContent.push({ |
|||
content: this.dataForm.CONTENT, |
|||
fontColor: this.dataForm.COLOR, |
|||
fontSize: this.dataForm.FONT_SIZE.substring(0, 2), |
|||
fontType: this.dataForm.FONT, |
|||
fontSpacing: this.dataForm.SPEED, |
|||
coordinate: this.dataForm.COORDINATE, |
|||
id: this.dataForm.tcontentsId, |
|||
templateId: this.dataForm.id |
|||
}) |
|||
|
|||
var params = { |
|||
templateContent: templateContent, |
|||
templateId: this.dataForm.id, |
|||
templateDelContent: [] |
|||
} |
|||
console.log(params, 'params') |
|||
editTemplateContent(params).then(response => { |
|||
console.log(response, '返回结果') |
|||
this.$modal.msgSuccess('修改成功') |
|||
}) |
|||
this.$forceUpdate() |
|||
} |
|||
this.closeDialog() |
|||
} |
|||
})*/ |
|||
}, |
|||
getFontStyle(font) { |
|||
if (font == '宋体' || font == '3') { |
|||
return 'Simsun' |
|||
} else if (font == '黑体' || font == '1') { |
|||
return 'SimHei' |
|||
} else if (font == '楷体' || font == '2') { |
|||
return 'KaiTi' |
|||
} else if (font == '仿宋' || font == '4') { |
|||
return 'FangSong' |
|||
} else if (font == '隶书' || font == '5') { |
|||
return 'LiSu' |
|||
} |
|||
}, |
|||
getColorStyle(font) { |
|||
if (font == '黄色' || font == 'yellow') { |
|||
return '#FFFF00' |
|||
} else if (font == '红色' || font == 'red') { |
|||
return '#FF0000' |
|||
} else if (font == '绿色' || font == 'GreenYellow') { |
|||
return '#00FF00' |
|||
} else if (font == '蓝色' || font == 'blue') { |
|||
return '#0000FF' |
|||
} else { |
|||
return '#' + font |
|||
} |
|||
}, |
|||
closeDialog() { |
|||
this.dialogVisible = false |
|||
this.$emit('dialogClose') |
|||
}, |
|||
getDevicePixel(devicePixel, num) { |
|||
if (num == 0) { |
|||
if (devicePixel > 768) { |
|||
return 768 + 'px' |
|||
} else { |
|||
return devicePixel + 'px' |
|||
} |
|||
} else if (num == 1) { |
|||
if (devicePixel > 160) { |
|||
return 160 + 'px' |
|||
} else { |
|||
return devicePixel + 'px' |
|||
} |
|||
} |
|||
}, |
|||
getCoordinate(coordinate, num) { |
|||
if (num == 0) { |
|||
if (this.boardWidth > 768) { |
|||
let i = this.boardWidth / 768 |
|||
console.log(coordinate / i, 'width') |
|||
return coordinate / i + 'px' |
|||
} else { |
|||
return coordinate + 'px' |
|||
} |
|||
} else if (num == 1) { |
|||
if (this.boardHeight > 128) { |
|||
let i = this.boardHeight / 128 |
|||
console.log(coordinate / i, 'height') |
|||
return coordinate / i + 'px' |
|||
} else { |
|||
return coordinate + 'px' |
|||
} |
|||
} |
|||
}, |
|||
|
|||
getTextAlign(font) { |
|||
if (font == '0') { |
|||
return 'left' |
|||
} else if (font == '1') { |
|||
return 'right' |
|||
} else { |
|||
return 'center' |
|||
} |
|||
}, |
|||
getFontSize(size) { |
|||
if (this.boardWidth > 768) { |
|||
let i = this.boardWidth / 768 |
|||
return size.substring(0, 2) / i - 2 + 'px' |
|||
} else { |
|||
return size |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.previewContentCSS { |
|||
border: yellow 1px dashed; |
|||
} |
|||
/* 页脚 */ |
|||
.dialog-footer { |
|||
padding-left: 450px; |
|||
} |
|||
.photoOther img, |
|||
.photo img { |
|||
max-width: 300px; |
|||
width: 100%; |
|||
// height: 80px; |
|||
} |
|||
.infoBoardButton { |
|||
::v-deep .el-radio-button--medium .el-radio-button__inner { |
|||
height: 3vh; |
|||
line-height: 3vh; |
|||
padding: 0 0.6vw; |
|||
font-size: 0.7vw; |
|||
} |
|||
} |
|||
::v-deep .el-card__body { |
|||
padding: 10px 0; |
|||
} |
|||
.boardTextStyle { |
|||
line-height: 1; |
|||
caret-color: rgba(0, 0, 0, 0); |
|||
user-select: none; |
|||
position: absolute; |
|||
// max-height: 128px; |
|||
overflow: hidden; |
|||
} |
|||
.blackBoard1 { |
|||
background: #000000; |
|||
/*display: flex; |
|||
margin: 0 auto; |
|||
overflow: hidden; |
|||
position: relative; |
|||
// text-align: center; |
|||
align-items: center;*/ |
|||
} |
|||
// |
|||
::v-deep .el-dialog__header { |
|||
background-color: #145977; |
|||
} |
|||
::v-deep .el-dialog__body { |
|||
padding: 5px 20px; |
|||
background-color: #145977; |
|||
} |
|||
::v-deep .el-dialog__footer { |
|||
background-color: #145977; |
|||
} |
|||
::v-deep .el-card { |
|||
margin-top: 1vh; |
|||
background-color: #145977; |
|||
border: 2px solid #1d7890; |
|||
} |
|||
::v-deep .el-form-item__label { |
|||
color: #3de8ff; |
|||
} |
|||
::v-deep .el-input--mini .el-input__inner { |
|||
color: #fff; |
|||
background-color: #096d8c; |
|||
} |
|||
::v-deep .el-input-number.is-controls-right .el-input-number__decrease { |
|||
color: #fff; |
|||
background-color: #096d8c; |
|||
} |
|||
::v-deep .el-dialog__title { |
|||
color: #fff; |
|||
} |
|||
::v-deep .el-textarea__inner { |
|||
color: #fff; |
|||
background-color: #096d8c; |
|||
border-color: #096d8c; |
|||
} |
|||
::v-deep .el-input-number.is-controls-right .el-input-number__decrease { |
|||
border-color: transparent; |
|||
} |
|||
::v-deep .el-input-number.is-controls-right .el-input-number__increase { |
|||
border-color: transparent; |
|||
color: #fff; |
|||
background-color: #096d8c; |
|||
} |
|||
::v-deep .el-button--medium { |
|||
padding: 5px 25px; |
|||
font-size: 14px; |
|||
border-radius: 20px; |
|||
border: transparent; |
|||
} |
|||
::v-deep .el-radio-button__inner { |
|||
color: #ffffff; |
|||
background-color: pink; |
|||
border-color: #1d58a9; |
|||
-webkit-box-shadow: -1px 0 0 0 #1d58a9; |
|||
box-shadow: -1px 0 0 0 #1d58a9; |
|||
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
|||
border-radius: 3px 3px 3px 3px; |
|||
opacity: 1; |
|||
border: none !important; |
|||
} |
|||
::v-deep .infoBoardButton .el-radio-button--medium .el-radio-button__inner { |
|||
margin: 0 3px; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,116 @@ |
|||
export default [ |
|||
{ |
|||
"id": 894, |
|||
"iotDeviceId": "8162-65535", |
|||
"groupId": null, |
|||
"productId": 0, |
|||
"stakeMark": "k57+595", |
|||
"direction": "1", |
|||
"deviceName": "门架式可变信息标志k57+595", |
|||
"deviceType": 2, |
|||
"installationDate": null, |
|||
"productionDate": null, |
|||
"durableYears": null, |
|||
"installationSite": null, |
|||
"useState": null, |
|||
"otherConfig": "{\"screenSize\":\"768*64\"}", |
|||
"remark": null, |
|||
"createTime": "2024-01-10T15:27:34.000+08:00", |
|||
"updateTime": null |
|||
}, |
|||
{ |
|||
"id": 895, |
|||
"iotDeviceId": "8166-65535", |
|||
"groupId": null, |
|||
"productId": 0, |
|||
"stakeMark": "k71+600", |
|||
"direction": "1", |
|||
"deviceName": "门架式可变信息标志k71+600", |
|||
"deviceType": 2, |
|||
"installationDate": null, |
|||
"productionDate": null, |
|||
"durableYears": null, |
|||
"installationSite": null, |
|||
"useState": null, |
|||
"otherConfig": "{\"screenSize\":\"768*64\"}", |
|||
"remark": null, |
|||
"createTime": "2024-01-10T15:27:34.000+08:00", |
|||
"updateTime": null |
|||
}, |
|||
{ |
|||
"id": 896, |
|||
"iotDeviceId": "2161-65535", |
|||
"groupId": null, |
|||
"productId": 0, |
|||
"stakeMark": "k82+285", |
|||
"direction": "1", |
|||
"deviceName": "门架式可变信息标志k82+285", |
|||
"deviceType": 2, |
|||
"installationDate": null, |
|||
"productionDate": null, |
|||
"durableYears": null, |
|||
"installationSite": null, |
|||
"useState": null, |
|||
"otherConfig": "{\"screenSize\":\"768*64\"}", |
|||
"remark": null, |
|||
"createTime": "2024-01-10T15:27:34.000+08:00", |
|||
"updateTime": null |
|||
}, |
|||
{ |
|||
"id": 902, |
|||
"iotDeviceId": "31115-65535", |
|||
"groupId": null, |
|||
"productId": 0, |
|||
"stakeMark": "k98+208", |
|||
"direction": "1", |
|||
"deviceName": "门架式可变信息标志k98+208", |
|||
"deviceType": 2, |
|||
"installationDate": null, |
|||
"productionDate": null, |
|||
"durableYears": null, |
|||
"installationSite": null, |
|||
"useState": null, |
|||
"otherConfig": "{\"screenSize\":\"768*64\"}", |
|||
"remark": null, |
|||
"createTime": "2024-01-10T15:48:59.000+08:00", |
|||
"updateTime": null |
|||
}, |
|||
{ |
|||
"id": 903, |
|||
"iotDeviceId": "31111-65535", |
|||
"groupId": null, |
|||
"productId": 0, |
|||
"stakeMark": "k103+900", |
|||
"direction": "1", |
|||
"deviceName": "门架式可变信息标志k103+900", |
|||
"deviceType": 2, |
|||
"installationDate": null, |
|||
"productionDate": null, |
|||
"durableYears": null, |
|||
"installationSite": null, |
|||
"useState": null, |
|||
"otherConfig": "{\"screenSize\":\"768*64\"}", |
|||
"remark": null, |
|||
"createTime": "2024-01-10T15:48:59.000+08:00", |
|||
"updateTime": null |
|||
}, |
|||
{ |
|||
"id": 904, |
|||
"iotDeviceId": "81221-65535", |
|||
"groupId": null, |
|||
"productId": 0, |
|||
"stakeMark": "k59+289", |
|||
"direction": "1", |
|||
"deviceName": "大学城入口站前板", |
|||
"deviceType": 2, |
|||
"installationDate": null, |
|||
"productionDate": null, |
|||
"durableYears": null, |
|||
"installationSite": null, |
|||
"useState": null, |
|||
"otherConfig": "{\"screenSize\":\"160*80\"}", |
|||
"remark": null, |
|||
"createTime": "2024-01-10T15:48:59.000+08:00", |
|||
"updateTime": null |
|||
} |
|||
] |
|||
@ -0,0 +1,59 @@ |
|||
export default [ |
|||
{ |
|||
"searchValue": null, |
|||
"createBy": "admin", |
|||
"createTime": "2023-12-22 15:16:24", |
|||
"updateBy": null, |
|||
"updateTime": null, |
|||
"remark": null, |
|||
"params": {}, |
|||
"dictCode": 286, |
|||
"dictSort": 0, |
|||
"dictLabel": "菏泽方向", |
|||
"dictValue": "1", |
|||
"dictType": "iot_board_direction", |
|||
"cssClass": null, |
|||
"listClass": "default", |
|||
"isDefault": "N", |
|||
"status": "0", |
|||
"default": false |
|||
}, |
|||
{ |
|||
"searchValue": null, |
|||
"createBy": "admin", |
|||
"createTime": "2023-12-22 15:16:31", |
|||
"updateBy": null, |
|||
"updateTime": null, |
|||
"remark": null, |
|||
"params": {}, |
|||
"dictCode": 287, |
|||
"dictSort": 1, |
|||
"dictLabel": "济南方向", |
|||
"dictValue": "2", |
|||
"dictType": "iot_board_direction", |
|||
"cssClass": null, |
|||
"listClass": "default", |
|||
"isDefault": "N", |
|||
"status": "0", |
|||
"default": false |
|||
}, |
|||
{ |
|||
"searchValue": null, |
|||
"createBy": "admin", |
|||
"createTime": "2023-12-22 15:16:39", |
|||
"updateBy": null, |
|||
"updateTime": null, |
|||
"remark": null, |
|||
"params": {}, |
|||
"dictCode": 288, |
|||
"dictSort": 2, |
|||
"dictLabel": "双向", |
|||
"dictValue": "3", |
|||
"dictType": "iot_board_direction", |
|||
"cssClass": null, |
|||
"listClass": "default", |
|||
"isDefault": "N", |
|||
"status": "0", |
|||
"default": false |
|||
} |
|||
] |
|||
@ -0,0 +1,166 @@ |
|||
export default { |
|||
"0": [ |
|||
{ |
|||
"id": 3, |
|||
"category": "0", |
|||
"content": "保持车距，控制车速", |
|||
"screenSize": "768*64", |
|||
"fontColor": "FFFF00", |
|||
"fontSize": "64", |
|||
"fontType": "2", |
|||
"fontSpacing": "0", |
|||
"rollingSpeed": null, |
|||
"stopTime": "50", |
|||
"inScreenMode": "1", |
|||
"formatStyle": "2", |
|||
"remark": null, |
|||
"createTime": "2024-01-06 10:40:19", |
|||
"updateTime": "2024-01-06 11:04:53" |
|||
}, |
|||
{ |
|||
"id": 4, |
|||
"category": "0", |
|||
"content": "山东高速欢迎您", |
|||
"screenSize": "768*64", |
|||
"fontColor": "FFFF00", |
|||
"fontSize": "64", |
|||
"fontType": "3", |
|||
"fontSpacing": "0", |
|||
"rollingSpeed": null, |
|||
"stopTime": "50", |
|||
"inScreenMode": "1", |
|||
"formatStyle": "2", |
|||
"remark": null, |
|||
"createTime": "2024-01-06 10:40:44", |
|||
"updateTime": "2024-01-06 11:04:58" |
|||
}, |
|||
{ |
|||
"id": 5, |
|||
"category": "0", |
|||
"content": "山东高速热线：96659", |
|||
"screenSize": "768*64", |
|||
"fontColor": "FFFF00", |
|||
"fontSize": "64", |
|||
"fontType": "1", |
|||
"fontSpacing": "0", |
|||
"rollingSpeed": null, |
|||
"stopTime": "50", |
|||
"inScreenMode": "1", |
|||
"formatStyle": "2", |
|||
"remark": null, |
|||
"createTime": "2024-01-06 10:40:56", |
|||
"updateTime": "2024-01-06 11:05:24" |
|||
}, |
|||
{ |
|||
"id": 9, |
|||
"category": "0", |
|||
"content": "安全带=生命带,关键时刻能救命", |
|||
"screenSize": "768*64", |
|||
"fontColor": "FFFF00", |
|||
"fontSize": "48", |
|||
"fontType": "3", |
|||
"fontSpacing": "0", |
|||
"rollingSpeed": null, |
|||
"stopTime": "50", |
|||
"inScreenMode": "1", |
|||
"formatStyle": "2", |
|||
"remark": null, |
|||
"createTime": "2024-01-06 10:42:21", |
|||
"updateTime": "2024-01-06 11:05:15" |
|||
} |
|||
], |
|||
"1": [ |
|||
{ |
|||
"id": 6, |
|||
"category": "1", |
|||
"content": "前方施工，谨慎驾驶", |
|||
"screenSize": "768*64", |
|||
"fontColor": "FFFF00", |
|||
"fontSize": "64", |
|||
"fontType": "3", |
|||
"fontSpacing": "0", |
|||
"rollingSpeed": null, |
|||
"stopTime": "50", |
|||
"inScreenMode": "1", |
|||
"formatStyle": "2", |
|||
"remark": null, |
|||
"createTime": "2024-01-06 10:41:07", |
|||
"updateTime": "2024-01-06 11:05:36" |
|||
} |
|||
], |
|||
"2": [ |
|||
{ |
|||
"id": 2, |
|||
"category": "2", |
|||
"content": "雨天路滑，注意安全", |
|||
"screenSize": "768*64", |
|||
"fontColor": "FFFF00", |
|||
"fontSize": "64", |
|||
"fontType": "3", |
|||
"fontSpacing": "0", |
|||
"rollingSpeed": null, |
|||
"stopTime": "50", |
|||
"inScreenMode": "1", |
|||
"formatStyle": "2", |
|||
"remark": null, |
|||
"createTime": "2024-01-06 10:38:44", |
|||
"updateTime": "2024-01-06 11:05:52" |
|||
}, |
|||
{ |
|||
"id": 10, |
|||
"category": "2", |
|||
"content": "大雾天气\n减速慢行", |
|||
"screenSize": "160*80", |
|||
"fontColor": "FFFF00", |
|||
"fontSize": "40", |
|||
"fontType": "2", |
|||
"fontSpacing": "0", |
|||
"rollingSpeed": null, |
|||
"stopTime": "50", |
|||
"inScreenMode": "1", |
|||
"formatStyle": "2", |
|||
"remark": null, |
|||
"createTime": "2024-01-06 10:42:59", |
|||
"updateTime": "2024-01-06 11:05:48" |
|||
} |
|||
], |
|||
"3": [], |
|||
"4": [ |
|||
{ |
|||
"id": 8, |
|||
"category": "4", |
|||
"content": "前方发生火灾，请谨慎驾驶", |
|||
"screenSize": "768*64", |
|||
"fontColor": "FFFF00", |
|||
"fontSize": "64", |
|||
"fontType": "1", |
|||
"fontSpacing": "0", |
|||
"rollingSpeed": null, |
|||
"stopTime": "50", |
|||
"inScreenMode": "1", |
|||
"formatStyle": "2", |
|||
"remark": null, |
|||
"createTime": "2024-01-06 10:42:00", |
|||
"updateTime": null |
|||
} |
|||
], |
|||
"5": [ |
|||
{ |
|||
"id": 7, |
|||
"category": "5", |
|||
"content": "前方事故，减速慢行", |
|||
"screenSize": "768*64", |
|||
"fontColor": "FFFF00", |
|||
"fontSize": "64", |
|||
"fontType": "1", |
|||
"fontSpacing": "0", |
|||
"rollingSpeed": null, |
|||
"stopTime": "50", |
|||
"inScreenMode": "1", |
|||
"formatStyle": "2", |
|||
"remark": null, |
|||
"createTime": "2024-01-06 10:41:33", |
|||
"updateTime": null |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,116 @@ |
|||
export default[ |
|||
{ |
|||
"searchValue": null, |
|||
"createBy": "admin", |
|||
"createTime": "2023-12-22 15:14:32", |
|||
"updateBy": null, |
|||
"updateTime": null, |
|||
"remark": null, |
|||
"params": {}, |
|||
"dictCode": 280, |
|||
"dictSort": 0, |
|||
"dictLabel": "日常通用", |
|||
"dictValue": "0", |
|||
"dictType": "iot_template_category", |
|||
"cssClass": null, |
|||
"listClass": "default", |
|||
"isDefault": "N", |
|||
"status": "0", |
|||
"default": false |
|||
}, |
|||
{ |
|||
"searchValue": null, |
|||
"createBy": "admin", |
|||
"createTime": "2023-12-22 15:14:41", |
|||
"updateBy": null, |
|||
"updateTime": null, |
|||
"remark": null, |
|||
"params": {}, |
|||
"dictCode": 281, |
|||
"dictSort": 1, |
|||
"dictLabel": "施工管控", |
|||
"dictValue": "1", |
|||
"dictType": "iot_template_category", |
|||
"cssClass": null, |
|||
"listClass": "default", |
|||
"isDefault": "N", |
|||
"status": "0", |
|||
"default": false |
|||
}, |
|||
{ |
|||
"searchValue": null, |
|||
"createBy": "admin", |
|||
"createTime": "2023-12-22 15:14:50", |
|||
"updateBy": null, |
|||
"updateTime": null, |
|||
"remark": null, |
|||
"params": {}, |
|||
"dictCode": 282, |
|||
"dictSort": 2, |
|||
"dictLabel": "恶劣天气", |
|||
"dictValue": "2", |
|||
"dictType": "iot_template_category", |
|||
"cssClass": null, |
|||
"listClass": "default", |
|||
"isDefault": "N", |
|||
"status": "0", |
|||
"default": false |
|||
}, |
|||
{ |
|||
"searchValue": null, |
|||
"createBy": "admin", |
|||
"createTime": "2023-12-22 15:14:59", |
|||
"updateBy": null, |
|||
"updateTime": null, |
|||
"remark": null, |
|||
"params": {}, |
|||
"dictCode": 283, |
|||
"dictSort": 3, |
|||
"dictLabel": "交通拥堵", |
|||
"dictValue": "3", |
|||
"dictType": "iot_template_category", |
|||
"cssClass": null, |
|||
"listClass": "default", |
|||
"isDefault": "N", |
|||
"status": "0", |
|||
"default": false |
|||
}, |
|||
{ |
|||
"searchValue": null, |
|||
"createBy": "admin", |
|||
"createTime": "2023-12-22 15:15:08", |
|||
"updateBy": null, |
|||
"updateTime": null, |
|||
"remark": null, |
|||
"params": {}, |
|||
"dictCode": 284, |
|||
"dictSort": 4, |
|||
"dictLabel": "突发事件", |
|||
"dictValue": "4", |
|||
"dictType": "iot_template_category", |
|||
"cssClass": null, |
|||
"listClass": "default", |
|||
"isDefault": "N", |
|||
"status": "0", |
|||
"default": false |
|||
}, |
|||
{ |
|||
"searchValue": null, |
|||
"createBy": "admin", |
|||
"createTime": "2023-12-22 15:15:16", |
|||
"updateBy": null, |
|||
"updateTime": null, |
|||
"remark": null, |
|||
"params": {}, |
|||
"dictCode": 285, |
|||
"dictSort": 5, |
|||
"dictLabel": "警情播报", |
|||
"dictValue": "5", |
|||
"dictType": "iot_template_category", |
|||
"cssClass": null, |
|||
"listClass": "default", |
|||
"isDefault": "N", |
|||
"status": "0", |
|||
"default": false |
|||
} |
|||
] |
|||
Loading…
Reference in new issue