You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
689 lines
18 KiB
689 lines
18 KiB
<template>
|
|
<el-dialog
|
|
:title="calcTitle"
|
|
:visible.sync="dialogVisible"
|
|
width="800px"
|
|
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>
|
|
<BoardTplPreview
|
|
style="width: 100%"
|
|
:boardWH="screenSize"
|
|
:tpl="dataForm"
|
|
></BoardTplPreview>
|
|
</el-card>
|
|
<el-card>
|
|
<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' && mode != 'toDevice'"
|
|
prop="category"
|
|
>
|
|
<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-form-item>
|
|
</el-col>
|
|
<el-col class="infoBoardButton" :span="16">
|
|
<el-form-item label="对齐方式">
|
|
<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-form-item>
|
|
</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"
|
|
: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.fontColor"
|
|
filterable
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in colorList"
|
|
: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 label="字体大小">
|
|
<el-select v-model="dataForm.fontSize" style="width: 100%">
|
|
<el-option
|
|
v-for="item in fontSizeList"
|
|
:key="item.dictValue"
|
|
:label="item.dictLabel"
|
|
:value="item.dictValue"
|
|
v-if="+(item.dictValue.replace('px',''))<=maxFontSize"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="字体类型">
|
|
<el-select v-model="dataForm.fontType" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in fontTypeList"
|
|
:key="item.dictLabel"
|
|
:label="item.dictLabel"
|
|
:value="item.dictValue"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="8">
|
|
<el-form-item label="停留时间(秒)">
|
|
<el-input-number :min="0" v-model="dataForm.stopTime" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="入屏方式">
|
|
<el-select v-model="dataForm.inScreenMode" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in inScreenModeList"
|
|
: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 label="屏幕尺寸">
|
|
<el-select v-model="screenSize" placeholder="请选择" disabled>
|
|
<el-option
|
|
v-for="item in screenSizeOptions"
|
|
:key="item.device_pixel"
|
|
:label="item.device_pixel"
|
|
:value="item.device_pixel"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</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 {
|
|
getTemplateList,
|
|
addTemplate,
|
|
addTemplateContent,
|
|
editTemplateContent,
|
|
editTemplate,
|
|
deleteTemplate,
|
|
getTemplateContent,
|
|
getGalleryList,
|
|
getFontSizeByDevicePixel,
|
|
uploadBoardEditInfo,
|
|
} from "@/api/board/template";
|
|
import BoardPreview from "@screen/components/infoBoard/BoardPreview.vue";
|
|
import BoardTplPreview from "@screen/components/infoBoard/BoardTplPreview.vue";
|
|
import infoBoardUtils from "@screen/utils/infoBoard.js";
|
|
import { checkBoardContent } from "@/api/board/board";
|
|
export default {
|
|
data() {
|
|
return {
|
|
maxFontSize:100,
|
|
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: "",
|
|
startTxt_x: "000",
|
|
startTxt_y: "000",
|
|
width: "400",
|
|
height: "40",
|
|
// content: "",
|
|
fontSize: "24",
|
|
fontType: "KaiTi",
|
|
fontSpacing: 0,
|
|
coordinate: "000000",
|
|
url: "",
|
|
previewContent: "", //预览内容
|
|
ispreviewContent: -1,
|
|
dataForm: {
|
|
category: "",
|
|
formatStyle: "",
|
|
content: "",
|
|
fontColor: "",
|
|
fontSize: "",
|
|
fontType: "",
|
|
stopTime: "",
|
|
inScreenMode: "",
|
|
screenSize: "",
|
|
},
|
|
templateContent: [],
|
|
templateDelContent: [],
|
|
dataRule: {
|
|
content: [
|
|
{
|
|
required: true,
|
|
message: "请输入详细内容",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
category: [
|
|
{
|
|
required: true,
|
|
message: "请选择类别",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
},
|
|
screenSizeOptions: [],
|
|
colorList: [],
|
|
isCurrencyOptions: [
|
|
{
|
|
code: "0",
|
|
content: "通用",
|
|
},
|
|
{
|
|
code: "1",
|
|
content: "仅为智能推荐模板",
|
|
},
|
|
],
|
|
inScreenModeList: [],
|
|
imgSize: [
|
|
{
|
|
type: "1024*128",
|
|
name: "全屏",
|
|
},
|
|
{
|
|
type: "",
|
|
name: "正常",
|
|
},
|
|
],
|
|
fontSizeList: [],
|
|
title: "选择图片",
|
|
loading: false,
|
|
isAdd: false,
|
|
templateCategoryList: [],
|
|
infoType: "",
|
|
devicePixelBoolean: false,
|
|
categoryRules: false,
|
|
deviceCttDefault: {
|
|
residenceTime: "50",
|
|
intonation: "0",
|
|
fontSpacing: "1",
|
|
screenEntryMethod: "1",
|
|
screenOutputMethod: "1",
|
|
lineSpacing: "0",
|
|
yCoordinate: "0",
|
|
whetherToSynchronizePlayback: "0",
|
|
whetherToPlayText: "0",
|
|
playbackCount: "1",
|
|
flashingFrequency: "5",
|
|
backgroundColor: "8",
|
|
foregroundColor: "FFFF00",
|
|
textContent: "",
|
|
fontStyle: "0",
|
|
displayAreaWidth: "768",
|
|
displayAreaHeight: "64",
|
|
playbackDuration: "50",
|
|
volume: "0",
|
|
xCoordinate: "0",
|
|
screenEntrySpeed: "1",
|
|
horizontalAlignment: "2",
|
|
playSpecialEffects: "0",
|
|
setUpTheSpeaker: "0",
|
|
flickerSpeed: "0",
|
|
specialEffectsSpeed: "1",
|
|
fontSize: "20",
|
|
verticalAlignment: "2",
|
|
speechSpeed: "0",
|
|
font: "3",
|
|
},
|
|
templateDefault: {
|
|
category: "",
|
|
formatStyle: "2",
|
|
content: "",
|
|
fontColor: "",
|
|
fontSize: "",
|
|
fontType: "",
|
|
stopTime: 50,
|
|
inScreenMode: "",
|
|
screenSize: "",
|
|
},
|
|
isLocked: false,
|
|
};
|
|
},
|
|
props: {
|
|
mode: {
|
|
//add edit
|
|
type: String,
|
|
default: "",
|
|
},
|
|
type: {
|
|
//template board
|
|
type: String,
|
|
default: "",
|
|
},
|
|
visible: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
screenSize: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
tpl: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
},
|
|
components: {
|
|
BoardPreview,
|
|
BoardTplPreview,
|
|
},
|
|
computed: {
|
|
calcTitle() {
|
|
let str = "";
|
|
if (this.mode == "toDevice") {
|
|
str = `从模板添加设备信息`;
|
|
} else {
|
|
str = `${this.mode == "add" ? "新增" : "编辑"}${
|
|
this.type == "template" ? "信息模板" : "设备信息"
|
|
}`;
|
|
}
|
|
return str;
|
|
},
|
|
},
|
|
watch: {
|
|
screenSize:{
|
|
handler(newV){
|
|
if(newV){
|
|
let boardH = newV.split("*")[1];
|
|
let fontSize = "20";
|
|
if (['64', '48'].includes(boardH)) {
|
|
this.maxFontSize = +boardH
|
|
fontSize = boardH + ""
|
|
} else if (['80'].includes(boardH)) {
|
|
this.maxFontSize = +boardH / 2
|
|
fontSize = +boardH / 2 + ""
|
|
} else if (['160'].includes(boardH)) {
|
|
this.maxFontSize = +boardH / 2
|
|
fontSize = +boardH / 4 + ""
|
|
}
|
|
this.deviceCttDefault.fontSize = fontSize
|
|
this.templateDefault.screenSize = newV;
|
|
this.templateDefault.fontSize = fontSize;
|
|
}
|
|
},
|
|
immediate:true
|
|
},
|
|
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.templateDefault.fontType = this.fontTypeList[0].dictValue //设置模板的默认值
|
|
this.getDicts("iot_devices_font_color").then((res) => {
|
|
this.colorList = res.data;
|
|
this.templateDefault.fontColor = this.colorList[0].dictValue
|
|
// console.log(this.colorList, "字体颜色");
|
|
});
|
|
this.getDicts("iot_device_font_inScreen_mode").then((res) => {
|
|
this.inScreenModeList = res.data;
|
|
this.templateDefault.inScreenMode = this.inScreenModeList[0].dictValue
|
|
// console.log(this.inScreenModeList, "入屏方式");
|
|
});
|
|
this.getDicts("iot_template_category").then((res) => {
|
|
this.templateCategoryList = res.data;
|
|
this.templateDefault.category = this.templateCategoryList[0].dictValue
|
|
});
|
|
this.getDicts("iot_device_font_size").then((res) => {
|
|
this.fontSizeList = res.data;
|
|
// this.templateDefault.fontSize = this.fontSizeList[0].dictValue
|
|
// this.dataForm.FONT_SIZE = res.data[1].dictValue
|
|
});
|
|
},
|
|
methods: {
|
|
initData() {
|
|
if (this.isLocked) {
|
|
return;
|
|
}
|
|
this.isLocked = true;
|
|
setTimeout(() => {
|
|
this.isLocked = false;
|
|
}, 100);
|
|
|
|
// getTemplateList({id:this.tpl.id}).then(res=>{
|
|
// console.log(res.data , "++++++++===========");
|
|
// })
|
|
|
|
if (this.mode == "add") {
|
|
let tempTpl = null;
|
|
if (this.type == "template") {
|
|
tempTpl = _.merge({}, this.templateDefault, this.tpl);
|
|
} else {
|
|
tempTpl = _.merge({}, this.deviceCttDefault, this.tpl.origin); //首页弹窗，新增设备项时，需要传设备尺寸过来
|
|
}
|
|
this.dataForm = infoBoardUtils.dialogSourceFormat(
|
|
tempTpl,
|
|
this.type,
|
|
this.mode
|
|
);
|
|
} else {
|
|
this.dataForm = infoBoardUtils.dialogSourceFormat(
|
|
this.tpl,
|
|
this.type,
|
|
this.mode,
|
|
this.deviceCttDefault
|
|
);
|
|
}
|
|
if (this.visible == false && this.mode == "toDevice") {
|
|
this.onSubmit();
|
|
}
|
|
},
|
|
onClose() {
|
|
this.dialogVisible = false;
|
|
},
|
|
// 表单提交
|
|
async onSubmit(formName) {
|
|
// this.$refs[formName].validate((valid) => {
|
|
// if (valid) {
|
|
|
|
// } else {
|
|
// console.log('格式不正确!!');
|
|
// return false;
|
|
// }
|
|
// });
|
|
|
|
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 = () => {
|
|
let data = infoBoardUtils.dialogSaveFormat(
|
|
this.dataForm,
|
|
this.type,
|
|
this.mode
|
|
);
|
|
|
|
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>
|
|
|