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

<template>
    <div class="boardPreview" ref="compBox">
        <div class="boardBox" :style="boardStyle" v-if="isReady">
            <p class="boardTxt" v-for="item,index in contentArr" :key="index" :style="boardTxtStyle" v-html="item" v-if="(index + 1) <= lineTotal">
            </p>
        </div>
    </div>
</template>
<script>
import { forEach } from 'lodash';

export default {
    name:"BoardPreview",
    data(){
        return {
            isReady: false,
            boardStyle:null,
            boardTxtStyle:null,
            contentArr:{
                type:Array,
                default:()=>[]
            },
            lineTotal: 0
        }
    },
    props:{
        boardWH: {
            type: String,
            default: "300*200"
        },
        tpl: {
            type: Object,
            default: ()=>{}
        },
    },
    watch:{
        boardWH:{
            handler(newV){
                this.setStyle();
            },
            immediate:true
        },
        tpl:{
            handler(newV){
                this.contentArr = this.tpl.textContent.replaceAll(/\\\\n/g, '\n').replaceAll(/\\=/g, '=').replaceAll(/\\,/g, ',').replaceAll(/ /g, '&nbsp').split('\n');
                this.setStyle();
            },
            deep:true,
            immediate:true
        }
    },
    computed:{
    },
    mounted(){
    },
    methods:{
        setStyle() {
            this.$nextTick(() => {

                let boxW = this.$refs["compBox"].clientWidth;
                let boxH = this.$refs["compBox"].clientHeight;
                let arr = this.boardWH.split("*");
                let scale = 1;
                if (boxH > 20) {  //判断是否设置了显示高度，判断>0即可，20是为了兼容误差
                    if (arr[0] / arr[1] > boxW / boxH) {
                        scale = boxW / arr[0];
                    } else {
                        scale = boxH / arr[1];
                    }
                } else {
                    if (arr[0] > boxW) {
                        scale = boxW / arr[0];
                    }
                }
                this.boardStyle =  {
                    width: `${arr[0] * scale}px`,
                    height: `${arr[1] * scale}px`,
                    "background-color":`${this.tpl.backgroundColor}`,
                    // "align-items" : ['flex-start', 'flex-end', 'center'][this.tpl.verticalAlignment]  //模板的字段为为formatStyle
                }
                let fontSize = 0;
                if (_.isString(this.tpl.fontSize)) {
                    fontSize = this.tpl.fontSize.replace('px', '') * 1;
                } else {
                    fontSize = this.tpl.fontSize;
                }
                this.boardTxtStyle = {
                    "color": "#" + this.tpl.foregroundColor,  //模板的字段为fontColor
                    "font-size": `${fontSize*scale}px`,
                    "font-family": this.fontTypeDic[this.tpl.font || '3'],   //模板的字段为fontType
                    "min-height": `${fontSize * scale}px`,
                    "text-align" : ['left', 'right', 'center'][this.tpl.verticalAlignment],
                }
                // this.contentArr = this.tpl.textContent.replaceAll(/\\\\n/g, '\n').replaceAll(/\\=/g, '=').replaceAll(/\\,/g, ',').replaceAll(/ /g, '&nbsp').split('\n');
                // const fontLength = (Math.ceil(arr[0]/fontSize)-1)*2; //中文占2个字符
                // const aryContent = this.tpl.textContent.split('\n');
                // const _content = [];
                // aryContent.forEach(e => {
                //     let txtLength = e.length;
                //     // 获取数字数量
                //     let aryCn = e.match(/[\u4e00-\u9fff]*/g)
                //     let cnNum = 0;
                //     aryCn.forEach(c=>{
                //         cnNum += c.length
                //     })
                //     // 默认全中文，如果有英文的话需要增加字符数量
                //     txtLength = txtLength + cnNum
                    
                //     e = (txtLength>fontLength? e.substr(0,fontLength):e)
                //     e = e.replaceAll(/\\\\n/g, '\n').replaceAll(/\\=/g, '=').replaceAll(/\\,/g, ',').replaceAll(/ /g, '&nbsp')
                //     _content.push(e)
                // });
                // this.contentArr = _content;

                this.lineTotal = Math.floor(arr[1] / fontSize);
                this.isReady = true;
                
            })
        }
    }
}
</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: center;
        .boardTxt{
            color: #f00;
            line-height: 1;
            margin-bottom: 0;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            width: 100%;
        }
    }
}
</style>