jihe-hs/ruoyi-ui/src/views/JiHeExpressway/components/infoBoard/BoardPreview.vue

<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: {
            // {
            //     "backgroundColor": "00000000",
            //     "displayAreaHeight": "120",
            //     "displayAreaWidth": "768",
            //     "flashingFrequency": "5", //闪烁次数
            //     "flickerSpeed": "0",  //闪烁速度
            //     "font": "微软雅黑",
            //     "fontSize": "14",
            //     "fontSpacing": "4",
            //     "fontStyle": "0",
            //     "foregroundColor": "ffff00",
            //     "horizontalAlignment": "2",
            //     "intonation": "0",
            //     "lineSpacing": "0",
            //     "playSpecialEffects": "0",
            //     "playbackCount": "1",
            //     "playbackDuration": "50",
            //     "residenceTime": "18", //停留时间
            //     "screenEntryMethod": "1",  //入屏方式
            //     "screenEntrySpeed": "1",   //入屏速度
            //     "screenOutputMethod": "1",   //出屏方式
            //     "setUpTheSpeaker": "0",
            //     "specialEffectsSpeed": "1",
            //     "speechSpeed": "0",
            //     "textContent": "因改扩建施工最高限速100km/h",
            //     "verticalAlignment": "2",
            //     "volume": "0",
            //     "whetherToPlayText": "0",
            //     "whetherToSynchronizePlayback": "0",
            //     "xCoordinate": "0",
            //     "yCoordinate": "0"
            // }
            
            type: Object,
            default: {}
        },
    },
    watch:{
        boardWH:{
            handler(newV){
                this.setStyle();
            },
            immediate:true
        },
        tpl:{
            handler(newV){
                this.contentArr = this.tpl.textContent.replace(/\+n|\+r\n/g, '&&&&&').replace(/ /g, '&nbsp').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 conW = this.tpl.displayAreaWidth;
                let conH = this.tpl.displayAreaHeight;
                let scale = 1;
                if (conW / conH > boxW / boxH) {
                    scale = boxW / conW;
                } else {
                    scale = boxH / conH;
                }
                this.boardStyle =  {
                    width: `${conW * scale}px`,
                    height: `${conH * scale}px`,
                    "background-color":`${this.tpl.backgroundColor}px`,
                    "align-items" : ['flex-start', 'flex-end', 'center'][this.tpl.horizontalAlignment]
                }
                let fontSize = +this.tpl.fontSize.replace("px", "");
                fontSize = fontSize * scale;
                this.boardTxtStyle = {
                    "color": "#" + this.tpl.foregroundColor, 
                    "font-size": `${fontSize}px`,
                    "font-family": this.tpl.font,
                    "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>