刘朋
1 year ago
13 changed files with 434 additions and 230 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 { |
export default { |
||||
sourceFormat(data, type){ |
deviceFontToEdit(font){ |
||||
let data1 = _.cloneDeep(data); |
//字体转换
|
||||
data1.stopTime = data1.stopTime*0.1 |
// ["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'){ |
if(type=='template'){ |
||||
|
data1 = _.cloneDeep(data); |
||||
} else { |
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 |
return data1 |
||||
}, |
}, |
||||
saveFormat(data, type) { |
dialogSaveFormat(data, type) { |
||||
let data1 = _.cloneDeep(data); |
let data1; |
||||
data1.stopTime = data1.stopTime * 10 + ""; |
|
||||
if (type == 'template') { |
if (type == 'template') { |
||||
|
data1 = _.cloneDeep(data); |
||||
|
data1.stopTime = data1.stopTime * 10 + ""; |
||||
} else { |
} 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; |
return data1; |
||||
|
}, |
||||
|
templateToDevice(data) { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
} |
} |
||||
} |
} |
||||
Loading…
Reference in new issue