|
|
|
@ -1,155 +1,239 @@ |
|
|
|
<template> |
|
|
|
<el-dialog :title="calcTitle" :visible.sync="dialogVisible" width="800px" append-to-body :close-on-click-modal="false"> |
|
|
|
<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> |
|
|
|
<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"> |
|
|
|
</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-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" |
|
|
|
> |
|
|
|
</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> |
|
|
|
<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 @click="onSubmit('dataForm')" v-loading="loading" style="background-color: #10aac2;color:#fff;">确认</el-button> |
|
|
|
<el-button style="background-color:#b5b5b6;color:#fff" @click="onClose">取消</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
<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 { devicessize } from '@/api/information/api.js' |
|
|
|
import { checkIotBoardContent } from '@/api/board/vocabulary' |
|
|
|
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' |
|
|
|
import { debounce } from 'lodash' |
|
|
|
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 "@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"; |
|
|
|
import { debounce } from "lodash"; |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
alignmentNum: 2, |
|
|
|
content: '', |
|
|
|
boardWidth: '', |
|
|
|
boardHeight: '', |
|
|
|
content: "", |
|
|
|
boardWidth: "", |
|
|
|
boardHeight: "", |
|
|
|
checkList: [], //复选框一组 |
|
|
|
obj: '', |
|
|
|
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: "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' |
|
|
|
} |
|
|
|
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', |
|
|
|
curDragImgItem: "", |
|
|
|
startTxt_x: "000", |
|
|
|
startTxt_y: "000", |
|
|
|
width: "400", |
|
|
|
height: "40", |
|
|
|
// content: "", |
|
|
|
fontSize: '24', |
|
|
|
fontType: 'KaiTi', |
|
|
|
fontSize: "24", |
|
|
|
fontType: "KaiTi", |
|
|
|
fontSpacing: 0, |
|
|
|
coordinate: '000000', |
|
|
|
url: '', |
|
|
|
previewContent: '', //预览内容 |
|
|
|
coordinate: "000000", |
|
|
|
url: "", |
|
|
|
previewContent: "", //预览内容 |
|
|
|
ispreviewContent: -1, |
|
|
|
dataForm: { |
|
|
|
category:"", |
|
|
|
formatStyle:"", |
|
|
|
content:"", |
|
|
|
fontColor:"", |
|
|
|
fontSize:"", |
|
|
|
fontType:"", |
|
|
|
stopTime:"", |
|
|
|
inScreenMode:"", |
|
|
|
screenSize:"" |
|
|
|
category: "", |
|
|
|
formatStyle: "", |
|
|
|
content: "", |
|
|
|
fontColor: "", |
|
|
|
fontSize: "", |
|
|
|
fontType: "", |
|
|
|
stopTime: "", |
|
|
|
inScreenMode: "", |
|
|
|
screenSize: "", |
|
|
|
}, |
|
|
|
templateContent: [], |
|
|
|
templateDelContent: [], |
|
|
|
@ -157,184 +241,191 @@ export default { |
|
|
|
content: [ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
message: '请输入详细内容', |
|
|
|
trigger: 'blur' |
|
|
|
} |
|
|
|
message: "请输入详细内容", |
|
|
|
trigger: "blur", |
|
|
|
}, |
|
|
|
], |
|
|
|
category: [ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
message: '请选择类别', |
|
|
|
trigger: 'blur' |
|
|
|
} |
|
|
|
] |
|
|
|
message: "请选择类别", |
|
|
|
trigger: "blur", |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
screenSizeOptions: [], |
|
|
|
colorList: [], |
|
|
|
isCurrencyOptions: [ |
|
|
|
{ |
|
|
|
code: '0', |
|
|
|
content: '通用' |
|
|
|
code: "0", |
|
|
|
content: "通用", |
|
|
|
}, |
|
|
|
{ |
|
|
|
code: '1', |
|
|
|
content: '仅为智能推荐模板' |
|
|
|
} |
|
|
|
code: "1", |
|
|
|
content: "仅为智能推荐模板", |
|
|
|
}, |
|
|
|
], |
|
|
|
inScreenModeList: [], |
|
|
|
imgSize: [ |
|
|
|
{ |
|
|
|
type: '1024*128', |
|
|
|
name: '全屏' |
|
|
|
type: "1024*128", |
|
|
|
name: "全屏", |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: '', |
|
|
|
name: '正常' |
|
|
|
} |
|
|
|
type: "", |
|
|
|
name: "正常", |
|
|
|
}, |
|
|
|
], |
|
|
|
fontSizeList: [], |
|
|
|
title: '选择图片', |
|
|
|
title: "选择图片", |
|
|
|
loading: false, |
|
|
|
isAdd: false, |
|
|
|
templateCategoryList: [], |
|
|
|
infoType: '', |
|
|
|
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", |
|
|
|
"playbackDuration": "50", |
|
|
|
"displayAreaHeight": "64", |
|
|
|
"volume": "0", |
|
|
|
"xCoordinate": "0", |
|
|
|
"screenEntrySpeed": "1", |
|
|
|
"horizontalAlignment": "2", |
|
|
|
"playSpecialEffects": "0", |
|
|
|
"setUpTheSpeaker": "0", |
|
|
|
"flickerSpeed": "0", |
|
|
|
"specialEffectsSpeed": "1", |
|
|
|
"fontSize": "20", |
|
|
|
"verticalAlignment": "2", |
|
|
|
"speechSpeed": "0", |
|
|
|
"font": "3" |
|
|
|
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", |
|
|
|
playbackDuration: "50", |
|
|
|
displayAreaHeight: "64", |
|
|
|
volume: "0", |
|
|
|
xCoordinate: "0", |
|
|
|
screenEntrySpeed: "1", |
|
|
|
horizontalAlignment: "2", |
|
|
|
playSpecialEffects: "0", |
|
|
|
setUpTheSpeaker: "0", |
|
|
|
flickerSpeed: "0", |
|
|
|
specialEffectsSpeed: "1", |
|
|
|
fontSize: "20", |
|
|
|
verticalAlignment: "2", |
|
|
|
speechSpeed: "0", |
|
|
|
font: "3", |
|
|
|
}, |
|
|
|
isLocked :false, |
|
|
|
} |
|
|
|
isLocked: false, |
|
|
|
}; |
|
|
|
}, |
|
|
|
props:{ |
|
|
|
mode:{ //add edit |
|
|
|
type:String, |
|
|
|
default:"" |
|
|
|
props: { |
|
|
|
mode: { |
|
|
|
//add edit |
|
|
|
type: String, |
|
|
|
default: "", |
|
|
|
}, |
|
|
|
type: { //template board |
|
|
|
type: { |
|
|
|
//template board |
|
|
|
type: String, |
|
|
|
default: "" |
|
|
|
default: "", |
|
|
|
}, |
|
|
|
visible:{ |
|
|
|
type:Boolean, |
|
|
|
default:false |
|
|
|
visible: { |
|
|
|
type: Boolean, |
|
|
|
default: false, |
|
|
|
}, |
|
|
|
screenSize:{ |
|
|
|
type:String, |
|
|
|
default:"" |
|
|
|
screenSize: { |
|
|
|
type: String, |
|
|
|
default: "", |
|
|
|
}, |
|
|
|
tpl: { |
|
|
|
type: Object, |
|
|
|
default: () => {}, |
|
|
|
}, |
|
|
|
tpl:{ |
|
|
|
type:Object, |
|
|
|
default:()=>{} |
|
|
|
} |
|
|
|
}, |
|
|
|
components:{ |
|
|
|
BoardPreview, BoardTplPreview |
|
|
|
components: { |
|
|
|
BoardPreview, |
|
|
|
BoardTplPreview, |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
calcTitle(){ |
|
|
|
let str = ''; |
|
|
|
if(this.mode=="toDevice"){ |
|
|
|
calcTitle() { |
|
|
|
let str = ""; |
|
|
|
if (this.mode == "toDevice") { |
|
|
|
str = `从模板添加设备信息`; |
|
|
|
}else{ |
|
|
|
str = `${this.mode == 'add' ? '新增' : '编辑'}${this.type == 'template' ? '信息模板' : '设备信息'}` |
|
|
|
} else { |
|
|
|
str = `${this.mode == "add" ? "新增" : "编辑"}${ |
|
|
|
this.type == "template" ? "信息模板" : "设备信息" |
|
|
|
}`; |
|
|
|
} |
|
|
|
return str; |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
visible:{ |
|
|
|
handler(newV){ |
|
|
|
visible: { |
|
|
|
handler(newV) { |
|
|
|
this.dialogVisible = newV; |
|
|
|
if(this.$refs.dataForm){ |
|
|
|
if (this.$refs.dataForm) { |
|
|
|
this.$refs.dataForm.clearValidate(); |
|
|
|
} |
|
|
|
// if(newV){ |
|
|
|
// this.initData(); |
|
|
|
// } |
|
|
|
}, |
|
|
|
immediate:true |
|
|
|
immediate: true, |
|
|
|
}, |
|
|
|
dialogVisible(newV){ |
|
|
|
dialogVisible(newV) { |
|
|
|
this.$emit("update:visible", newV); |
|
|
|
}, |
|
|
|
tpl:{ |
|
|
|
handler(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){ //防止关闭对话框时触发 |
|
|
|
if (newV && Object.keys(newV).length > 0) { |
|
|
|
//防止关闭对话框时触发 |
|
|
|
this.initData(); |
|
|
|
} |
|
|
|
}, |
|
|
|
deep:true |
|
|
|
deep: true, |
|
|
|
}, |
|
|
|
"mode": { |
|
|
|
mode: { |
|
|
|
handler(newV) { |
|
|
|
this.initData(); |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
"type": { |
|
|
|
type: { |
|
|
|
handler(newV) { |
|
|
|
this.initData(); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() {}, |
|
|
|
created() { |
|
|
|
this.getDicts('iot_devices_font_color').then(res => { |
|
|
|
this.getDicts("iot_devices_font_color").then((res) => { |
|
|
|
this.colorList = res.data; |
|
|
|
// console.log(this.colorList, "字体颜色"); |
|
|
|
}) |
|
|
|
this.getDicts('iot_device_font_inScreen_mode').then(res => { |
|
|
|
this.inScreenModeList = res.data |
|
|
|
}); |
|
|
|
this.getDicts("iot_device_font_inScreen_mode").then((res) => { |
|
|
|
this.inScreenModeList = res.data; |
|
|
|
// console.log(this.inScreenModeList, "入屏方式"); |
|
|
|
}) |
|
|
|
this.getDicts('iot_template_category').then(res => { |
|
|
|
}); |
|
|
|
this.getDicts("iot_template_category").then((res) => { |
|
|
|
this.templateCategoryList = res.data; |
|
|
|
}) |
|
|
|
this.getDicts('iot_device_font_size').then(res => { |
|
|
|
}); |
|
|
|
this.getDicts("iot_device_font_size").then((res) => { |
|
|
|
this.fontSizeList = res.data; |
|
|
|
// this.dataForm.FONT_SIZE = res.data[1].dictValue |
|
|
|
}) |
|
|
|
}); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
initData() { |
|
|
|
if(this.isLocked){ |
|
|
|
return |
|
|
|
if (this.isLocked) { |
|
|
|
return; |
|
|
|
} |
|
|
|
this.isLocked = true; |
|
|
|
setTimeout(()=>{this.isLocked = false}, 100); |
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
this.isLocked = false; |
|
|
|
}, 100); |
|
|
|
|
|
|
|
// getTemplateList({id:this.tpl.id}).then(res=>{ |
|
|
|
// console.log(res.data , "++++++++==========="); |
|
|
|
// }) |
|
|
|
@ -351,97 +442,112 @@ export default { |
|
|
|
fontType: this.fontTypeList[0].dictValue, |
|
|
|
stopTime: 50, |
|
|
|
inScreenMode: this.inScreenModeList[0].dictValue, |
|
|
|
screenSize: this.screenSize |
|
|
|
} |
|
|
|
} |
|
|
|
else { |
|
|
|
tempTpl = _.merge({}, this.deviceCttDefault, this.tpl.origin); //首页弹窗，新增设备项时，需要传设备尺寸过来 |
|
|
|
screenSize: this.screenSize, |
|
|
|
}; |
|
|
|
} else { |
|
|
|
tempTpl = _.merge({}, this.deviceCttDefault, this.tpl.origin); //首页弹窗，新增设备项时，需要传设备尺寸过来 |
|
|
|
} |
|
|
|
this.dataForm = infoBoardUtils.dialogSourceFormat(tempTpl, this.type, this.mode); |
|
|
|
this.dataForm = infoBoardUtils.dialogSourceFormat( |
|
|
|
tempTpl, |
|
|
|
this.type, |
|
|
|
this.mode |
|
|
|
); |
|
|
|
} else { |
|
|
|
this.dataForm = infoBoardUtils.dialogSourceFormat(this.tpl, this.type, this.mode, this.deviceCttDefault); |
|
|
|
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; |
|
|
|
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.type == "template" && this.dataForm.category == undefined) { |
|
|
|
return this.$modal.msgError("请选择分类！"); |
|
|
|
} |
|
|
|
|
|
|
|
if (!this.dataForm.content.trim()) { |
|
|
|
return this.$modal.msgError('当前输入内容为空') |
|
|
|
return this.$modal.msgError("当前输入内容为空"); |
|
|
|
} |
|
|
|
if (this.dataForm.content.indexOf('\\')>=0) { |
|
|
|
return this.$modal.msgError("内容不能含有特殊字符'\\\\'") |
|
|
|
if (this.dataForm.content.indexOf("\\") >= 0) { |
|
|
|
return this.$modal.msgError("内容不能含有特殊字符'\\\\'"); |
|
|
|
} |
|
|
|
|
|
|
|
let ctt = this.dataForm.content; |
|
|
|
checkBoardContent(ctt).then(res => { |
|
|
|
checkBoardContent(ctt).then((res) => { |
|
|
|
if (res.code == 200) { |
|
|
|
doNext(); |
|
|
|
} else { |
|
|
|
this.$message({ |
|
|
|
type: 'danger', |
|
|
|
message: res.msg |
|
|
|
type: "danger", |
|
|
|
message: res.msg, |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
}) |
|
|
|
}); |
|
|
|
let doNext = () => { |
|
|
|
let data = infoBoardUtils.dialogSaveFormat( |
|
|
|
this.dataForm, |
|
|
|
this.type, |
|
|
|
this.mode |
|
|
|
); |
|
|
|
|
|
|
|
let data = infoBoardUtils.dialogSaveFormat(this.dataForm, this.type, this.mode); |
|
|
|
|
|
|
|
this.loading = true |
|
|
|
this.loading = true; |
|
|
|
// let templateId = ""; |
|
|
|
|
|
|
|
if(this.type == "template"){ |
|
|
|
if(this.mode=='edit'){ |
|
|
|
editTemplate(data).then(res=>{ |
|
|
|
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 if (this.mode == "toDevice") { |
|
|
|
this.loading = false; |
|
|
|
this.$emit("afterSubmit", { |
|
|
|
type: this.type, |
|
|
|
mode: this.mode, |
|
|
|
data: data, |
|
|
|
}); |
|
|
|
} else { |
|
|
|
addTemplate(data).then(res => { |
|
|
|
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 |
|
|
|
} else { |
|
|
|
this.loading = false; |
|
|
|
// this.dialogVisible = false |
|
|
|
this.$emit("afterSubmit" , {type:this.type, mode:this.mode}); |
|
|
|
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 { |
|
|
|
|
