|
|
|
@ -1,14 +1,18 @@ |
|
|
|
<template> |
|
|
|
<el-dialog :title="mode=='add'?'新增':'编辑'" :visible.sync="dialogVisible" width="43%" append-to-body :close-on-click-modal="false"> |
|
|
|
<div style="color:#fff"> |
|
|
|
<p>类型:{{type}} 增删改类型:{{mode}}</p> |
|
|
|
<p>模板id:{{ tpl }}</p> |
|
|
|
</div> |
|
|
|
<div class="dialogStyleBox"> |
|
|
|
<div class="dialogLine"></div> |
|
|
|
<div class="dialogCloseButton"></div> |
|
|
|
</div> |
|
|
|
<el-card class="box-card"> |
|
|
|
<BoardPreview :tpl="node"></BoardPreview> |
|
|
|
<el-card> |
|
|
|
<BoardPreview style="height: 200px; width: 100%;" :boardWH="screenSize" :tpl="dataForm"></BoardPreview> |
|
|
|
</el-card> |
|
|
|
<el-card> |
|
|
|
<el-form :model="dataForm" :rules="dataRule" label-width="90px" ref="dataForm" size="mini"> |
|
|
|
<el-form :model="dataForm" :rules="dataRule" label-width="110px" ref="dataForm" size="mini"> |
|
|
|
<el-row :gutter="24"> |
|
|
|
<el-col :span="8"> |
|
|
|
<el-form-item label="所属类别" v-if="type == 'template'"> |
|
|
|
@ -19,10 +23,10 @@ |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col class="infoBoardButton" :span="16"> |
|
|
|
<el-radio-group v-model="dataForm.textAlign"> |
|
|
|
<el-radio-button label="left">左对齐</el-radio-button> |
|
|
|
<el-radio-button label="center">中间对齐</el-radio-button> |
|
|
|
<el-radio-button label="right">右对齐</el-radio-button> |
|
|
|
<el-radio-group v-model="dataForm.formatStyle"> |
|
|
|
<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-col> |
|
|
|
</el-row> |
|
|
|
@ -30,12 +34,12 @@ |
|
|
|
<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" placeholder="详细内容" v-model="dataForm.content"></el-input> |
|
|
|
<el-input type="textarea" :rows="6" placeholder="详细内容" v-model="dataForm.content"></el-input> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="8"> |
|
|
|
<el-form-item label="字体颜色"> |
|
|
|
<el-select v-model="dataForm.color" filterable placeholder="请选择"> |
|
|
|
<el-select v-model="dataForm.fontColor" filterable placeholder="请选择"> |
|
|
|
<el-option v-for="item in colorList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
@ -60,7 +64,7 @@ |
|
|
|
|
|
|
|
<el-col :span="8"> |
|
|
|
<el-form-item label="停留时间(秒)"> |
|
|
|
<el-input-number :min="0" v-model="dataForm.stay" style="width: 100%" /> |
|
|
|
<el-input-number :min="0" v-model="dataForm.stopTime"/> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="8"> |
|
|
|
@ -90,10 +94,12 @@ |
|
|
|
</el-dialog> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import { getTemplateInfo, addTemplate, addTemplateContent, editTemplateContent, editTemplate, deleteTemplate, getTemplateContent, getGalleryList, getFontSizeByDevicePixel, uploadBoardEditInfo } from '@/api/board/template' |
|
|
|
import { getTemplateList, 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' |
|
|
|
import BoardPreview from "./BoardPreview.vue" |
|
|
|
import infoBoardUtils from "@screen/utils/infoBoard.js" |
|
|
|
import { after } from 'lodash' |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
@ -123,7 +129,6 @@ export default { |
|
|
|
width: '400', |
|
|
|
height: '40', |
|
|
|
// content: "", |
|
|
|
fontColor: 'FFFF00', |
|
|
|
fontSize: '24', |
|
|
|
fontType: 'KaiTi', |
|
|
|
fontSpacing: 0, |
|
|
|
@ -133,12 +138,12 @@ export default { |
|
|
|
ispreviewContent: -1, |
|
|
|
dataForm: { |
|
|
|
category:"", |
|
|
|
textAlign:"center", |
|
|
|
formatStyle:"", |
|
|
|
content:"", |
|
|
|
color:"", |
|
|
|
fontColor:"", |
|
|
|
fontSize:"", |
|
|
|
fontFamily:"", |
|
|
|
stay:5, |
|
|
|
stopTime:"", |
|
|
|
inScreenMode:"", |
|
|
|
screenSize:"" |
|
|
|
}, |
|
|
|
@ -184,16 +189,15 @@ export default { |
|
|
|
templateCategoryList: [], |
|
|
|
infoType: '', |
|
|
|
devicePixelBoolean: false, |
|
|
|
categoryRules: false, |
|
|
|
node:null |
|
|
|
categoryRules: false |
|
|
|
} |
|
|
|
}, |
|
|
|
props:{ |
|
|
|
mode:{ |
|
|
|
mode:{ //add edit |
|
|
|
type:String, |
|
|
|
default:"" |
|
|
|
}, |
|
|
|
type: { |
|
|
|
type: { //template board |
|
|
|
type: String, |
|
|
|
default: "" |
|
|
|
}, |
|
|
|
@ -234,62 +238,62 @@ export default { |
|
|
|
"tpl.id":{ |
|
|
|
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(this.mode == "edit"){ |
|
|
|
this.____convertData(); |
|
|
|
} |
|
|
|
this.initData(); |
|
|
|
} |
|
|
|
}, |
|
|
|
"mode": { |
|
|
|
handler(newV) { |
|
|
|
this.initData(); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.node = this.tpl; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.getDicts('iot_device_font_type').then(res => { |
|
|
|
this.fontTypeList = res.data |
|
|
|
this.dataForm.fontFamily = res.data[0].dictValue; |
|
|
|
// console.log(this.fontTypeList, "字体类型"); |
|
|
|
}) |
|
|
|
this.getDicts('iot_devices_font_color').then(res => { |
|
|
|
this.colorList = res.data; |
|
|
|
this.dataForm.color = res.data[0].dictValue; |
|
|
|
// console.log(this.colorList, "字体颜色"); |
|
|
|
}) |
|
|
|
this.getDicts('iot_device_font_inScreen_mode').then(res => { |
|
|
|
this.inScreenModeList = res.data |
|
|
|
this.dataForm.inScreenMode = res.data[0].dictValue; |
|
|
|
// console.log(this.inScreenModeList, "入屏方式"); |
|
|
|
}) |
|
|
|
this.getDicts('iot_template_category').then(res => { |
|
|
|
this.templateCategoryList = res.data; |
|
|
|
this.dataForm.category = res.data[0].dictValue; |
|
|
|
}) |
|
|
|
this.getDicts('iot_device_font_size').then(res => { |
|
|
|
this.fontSizeList = res.data; |
|
|
|
this.dataForm.fontSize = res.data[0].dictValue; |
|
|
|
// this.dataForm.FONT_SIZE = res.data[1].dictValue |
|
|
|
}) |
|
|
|
this.getdevicessize() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
____convertData(){ |
|
|
|
|
|
|
|
initData(){ |
|
|
|
// getTemplateList({id:this.tpl.id}).then(res=>{ |
|
|
|
// console.log(res.data , "++++++++==========="); |
|
|
|
// }) |
|
|
|
if (this.mode == "edit") { |
|
|
|
this.dataForm = infoBoardUtils.sourceFormat(this.tpl, this.type); |
|
|
|
}else{ |
|
|
|
this.dataForm = { |
|
|
|
category : this.templateCategoryList[0].dictValue, |
|
|
|
formatStyle : 0, |
|
|
|
content : "请输入文字内容", |
|
|
|
fontColor : this.colorList[0].dictValue, |
|
|
|
fontSize : this.fontSizeList[0].dictValue, |
|
|
|
fontFamily : this.fontTypeList[0].dictValue, |
|
|
|
stopTime : 5, |
|
|
|
inScreenMode : this.inScreenModeList[0].dictValue, |
|
|
|
screenSize : this.screenSize |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
onClose(){ |
|
|
|
this.dialogVisible = false; |
|
|
|
}, |
|
|
|
getFontSizeList(type) { |
|
|
|
|
|
|
|
|
|
|
|
//TODO 测试数据 后期需转接口 |
|
|
|
/*getFontSizeByDevicePixel(this.dataForm.screenSize).then((res) => { |
|
|
|
console.log(res, "根据分辨率筛字体大小"); |
|
|
|
this.fontSizeList = res.data.fontSizeList; |
|
|
|
this.dataForm.FONT_SIZE = res.data.defaultFont; |
|
|
|
if(type){ |
|
|
|
this.alignment(2) |
|
|
|
} |
|
|
|
});*/ |
|
|
|
}, |
|
|
|
// 表单提交 |
|
|
|
async dataFormSubmitHandle() { |
|
|
|
if (!this.dataForm.content.trim()) { |
|
|
|
@ -298,7 +302,7 @@ export default { |
|
|
|
if (this.dataForm.content.indexOf('\\')>=0) { |
|
|
|
return this.$modal.msgError("内容不能含有特殊字符'\\\\'") |
|
|
|
} |
|
|
|
this.$emit("submit"); |
|
|
|
|
|
|
|
//走接口检验内容是否包含敏感字段 |
|
|
|
/*checkIotBoardContent(this.dataForm.CONTENT).then(response => { |
|
|
|
if (response.data == 0) { |
|
|
|
@ -383,81 +387,30 @@ export default { |
|
|
|
} |
|
|
|
})*/ |
|
|
|
|
|
|
|
let data = infoBoardUtils.saveFormat(this.dataForm, this.type); |
|
|
|
|
|
|
|
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 |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
if(this.type == "template"){ |
|
|
|
if(this.mode=='edit'){ |
|
|
|
editTemplate(data).then(res=>{ |
|
|
|
afterSave("修改"); |
|
|
|
}); |
|
|
|
}else{ |
|
|
|
addTemplate(data).then(res => { |
|
|
|
afterSave("新增"); |
|
|
|
}); |
|
|
|
} |
|
|
|
} 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' |
|
|
|
|
|
|
|
const afterSave = (para)=>{ |
|
|
|
this.$message.success(para + '成功!') |
|
|
|
this.loading = false |
|
|
|
this.dialogVisible = false |
|
|
|
this.$emit("afterSubmit" , {type:this.type, mode:this.mode}); |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
} |
|
|
|
} |
hui
1 year ago