10 changed files with 410 additions and 200 deletions
Binary file not shown.
@ -0,0 +1,117 @@ |
|||
<template> |
|||
<div class="boardPreview" ref="compBox"> |
|||
<div class="boardBox" :style="boardStyle"> |
|||
<p class="boardTxt" v-for="item,index in contentArr" :key="index" :style="boardTxtStyle" v-html="item"> |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name:"BoardPreview", |
|||
data(){ |
|||
return { |
|||
boardStyle:null, |
|||
boardTxtStyle:null, |
|||
contentArr:{ |
|||
type:Array, |
|||
default:()=>[] |
|||
} |
|||
} |
|||
}, |
|||
props:{ |
|||
boardWH: { |
|||
type: String, |
|||
default: "300*200" |
|||
}, |
|||
tpl: { |
|||
// { |
|||
// "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" |
|||
// } |
|||
|
|||
type: Object, |
|||
default: {} |
|||
}, |
|||
}, |
|||
watch:{ |
|||
boardWH:{ |
|||
handler(newV){ |
|||
this.setStyle(); |
|||
}, |
|||
immediate:true |
|||
}, |
|||
tpl:{ |
|||
handler(newV){ |
|||
this.contentArr = this.tpl.content.replace(/\n|\r\n/g, '&&&&&').replace(/ /g, ' ').split('&&&&&'); |
|||
this.setStyle(); |
|||
}, |
|||
deep:true, |
|||
immediate:true |
|||
} |
|||
}, |
|||
computed:{ |
|||
}, |
|||
mounted(){ |
|||
}, |
|||
methods:{ |
|||
setStyle() { |
|||
this.$nextTick(() => { |
|||
let boxW = this.$refs["compBox"].offsetWidth; |
|||
let boxH = this.$refs["compBox"].offsetHeight; |
|||
let arr = this.boardWH.split("*"); |
|||
let scale = 1; |
|||
if (arr[0] / arr[1] > boxW / boxH) { |
|||
scale = boxW / arr[0]; |
|||
} else { |
|||
scale = boxH / arr[1]; |
|||
} |
|||
this.boardStyle = { |
|||
width: `${arr[0] * scale}px`, |
|||
height: `${arr[1] * scale}px`, |
|||
"align-items" : ['flex-start', 'flex-end', 'center'][this.tpl.formatStyle] |
|||
} |
|||
this.boardTxtStyle = { |
|||
"color": "#" + this.tpl.fontColor, |
|||
"font-size": `${this.tpl.fontSize.replace('px','')*scale}px`, |
|||
"font-family": this.fontTypeDic[this.tpl.fontType], |
|||
"min-height": `${this.tpl.fontSize.replace('px', '') * scale}px` |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.boardPreview{ |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
align-items: center; |
|||
.boardBox { |
|||
background-color: #000; |
|||
display: flex; |
|||
overflow: hidden; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
.boardTxt{ |
|||
color: #f00; |
|||
line-height: 1; |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,23 +1,73 @@ |
|||
|
|||
import Vue from 'vue'; |
|||
export default { |
|||
sourceFormat(data, type){ |
|||
let data1 = _.cloneDeep(data); |
|||
data1.stopTime = data1.stopTime*0.1 |
|||
deviceFontToEdit(font){ |
|||
//字体转换
|
|||
// ["SimSun", "KaiTi", "SimHei", "FangSong", "LiSu"]
|
|||
// let idx = 0;
|
|||
// const arr = ["宋体", "楷体", ["黑体","微软雅黑"], "仿宋", "隶书"];
|
|||
// arr.forEach((item,index)=>{
|
|||
// if(item.includes(font)){
|
|||
// idx = index;
|
|||
// return
|
|||
// }
|
|||
// });
|
|||
// return idx+'';
|
|||
let fontTypeList = Vue.prototype.fontTypeList; |
|||
fontTypeList.forEach(item => { |
|||
// if(item.)
|
|||
}); |
|||
return "SimHei" |
|||
}, |
|||
editFontToDevice(){ |
|||
let fontTypeList = Vue.prototype.fontTypeList; |
|||
fontTypeList.forEach(item => { |
|||
// if(item.)
|
|||
}); |
|||
return "黑体" |
|||
}, |
|||
dialogSourceFormat(data, type){ |
|||
let data1 |
|||
if(type=='template'){ |
|||
|
|||
} else { |
|||
|
|||
data1 = _.cloneDeep(data); |
|||
data1.stopTime = data1.stopTime*0.1 |
|||
} |
|||
else{ |
|||
data1 = { |
|||
formatStyle: data.horizontalAlignment, |
|||
content: data.textContent, |
|||
fontColor: data.foregroundColor.toUpperCase(), |
|||
fontSize: data.fontSize.replace("px",""), |
|||
// fontFamily: this.deviceFontToEdit(data.font),
|
|||
fontFamily: data.font, |
|||
stopTime: data.residenceTime, |
|||
inScreenMode: data.screenEntryMethod, |
|||
origin: data |
|||
} |
|||
} |
|||
return data1 |
|||
}, |
|||
saveFormat(data, type) { |
|||
let data1 = _.cloneDeep(data); |
|||
data1.stopTime = data1.stopTime * 10 + ""; |
|||
dialogSaveFormat(data, type) { |
|||
let data1; |
|||
if (type == 'template') { |
|||
|
|||
data1 = _.cloneDeep(data); |
|||
data1.stopTime = data1.stopTime * 10 + ""; |
|||
} else { |
|||
|
|||
let temp = { |
|||
horizontalAlignment : data.formatStyle, |
|||
textContent : data.content, |
|||
foregroundColor: data.fontColor.toLowerCase(), |
|||
fontSize: data.fontSize, |
|||
font: data.fontFamily, |
|||
residenceTime : data.stopTime, |
|||
screenEntryMethod : data.inScreenMode |
|||
} |
|||
data1 = _.merge(data.origin, temp); |
|||
} |
|||
return data1; |
|||
}, |
|||
templateToDevice(data) { |
|||
return { |
|||
|
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue