diff --git a/ruoyi-ui/src/common/boardBaseData.js b/ruoyi-ui/src/common/getBoardBaseData.js
similarity index 100%
rename from ruoyi-ui/src/common/boardBaseData.js
rename to ruoyi-ui/src/common/getBoardBaseData.js
diff --git a/ruoyi-ui/src/main.js b/ruoyi-ui/src/main.js
index ca6e3c8e..23857822 100644
--- a/ruoyi-ui/src/main.js
+++ b/ruoyi-ui/src/main.js
@@ -90,8 +90,8 @@ Vue.prototype.handleTree = handleTree
 Vue.prototype.socket = Socket
 Vue.prototype.numberMul = numberMul
 
-import boardBaseData from '@/common/boardBaseData'
-boardBaseData();
+import getBoardBaseData from '@/common/getBoardBaseData'
+Vue.prototype.getBoardBaseData = getBoardBaseData;
 
 // gis 
 Vue.prototype.$GlobalConfig = config.GlobalConfig
diff --git a/ruoyi-ui/src/views/JiHeExpressway/index.vue b/ruoyi-ui/src/views/JiHeExpressway/index.vue
index d5817ef0..325a3dfc 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/index.vue
@@ -24,6 +24,9 @@ export default {
     return {
     };
   },
+  mounted(){
+    this.getBoardBaseData();
+  },
   methods: {
     handleChange(activeMenu) {
       this.$route.path != activeMenu.path && this.$router.push(activeMenu.path);
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardPreview.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardPreview.vue
index a1d1f958..864a0da2 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardPreview.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardPreview.vue
@@ -1,7 +1,9 @@
 <template>
     <div class="boardPreview" ref="compBox">
         <div class="boardBox" :style="boardStyle">
-            <span class="boardTxt" :style="boardTxtStyle" v-html="tpl.content.replace(/\n|\r\n/g, '<br>').replace(/ /g, '&nbsp')"></span>
+            <span class="boardTxt" v-for="item in contentArr" :style="boardTxtStyle">
+            {{ item }}
+            </span>
         </div>
     </div>
 </template>
@@ -11,7 +13,11 @@ export default {
     data(){
         return {
             boardStyle:null,
-            boardTxtStyle:null
+            boardTxtStyle:null,
+            contentArr:{
+                type:Object,
+                default:()=>[]
+            }
         }
     },
     props:{
@@ -47,6 +53,12 @@ export default {
                 this.boardScale();
             },
             immediate:true
+        },
+        "tpl.id":{
+            handler(newV){
+                this.contentArr = this.tpl.content.replace(/\n|\r\n/g, '&&&&&').replace(/ /g, '&nbsp').split('&&&&&');
+            },
+            immediate:true
         }
     },
     computed:{
@@ -72,7 +84,7 @@ export default {
                 this.boardTxtStyle = {
                     "color": "#" + this.tpl.fontColor, 
                     "font-size": `${this.tpl.fontSize * scale}px`, 
-                    "font-family": this.fontTypeDic[this.tpl.fontType], 
+                    "font-family": this.fontTypeDic[this.tpl.fontType],
                     // "fontSpacing": "0", 
                     // "rollingSpeed": null, 
                     // "stopTime": "50", 
@@ -92,8 +104,12 @@ export default {
     align-items: center;
     .boardBox {
         background-color: #000;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
         .boardTxt{
             color: #f00;
+            line-height: 1;
         }
     }
 }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo.vue
index 3ae8b18d..244f49de 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo.vue
@@ -5,7 +5,7 @@
           <div class="dialogCloseButton"></div>
         </div>
         <el-card class="box-card">
-          <BoardPreview></BoardPreview>
+          <BoardPreview :tpl="node"></BoardPreview>
         </el-card>
         <el-card>
           <el-form :model="dataForm" :rules="dataRule" label-width="90px" ref="dataForm" size="mini">
@@ -184,7 +184,8 @@ export default {
       templateCategoryList: [],
       infoType: '',
       devicePixelBoolean: false,
-      categoryRules: false
+      categoryRules: false,
+      node:null
     }
   },
   props:{
@@ -240,6 +241,7 @@ export default {
     }
   },
   mounted() {
+    this.node = this.tpl;
   },
   created() {
     this.getDicts('iot_device_font_type').then(res => {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/template.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/template.js
new file mode 100644
index 00000000..8d16e15a
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/template.js
@@ -0,0 +1,166 @@
+export default {
+    "0": [
+        {
+            "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"
+        },
+        {
+            "id": 4,
+            "category": "0",
+            "content": "山东高速欢迎您",
+            "screenSize": "768*64",
+            "fontColor": "FFFF00",
+            "fontSize": "64",
+            "fontType": "3",
+            "fontSpacing": "0",
+            "rollingSpeed": null,
+            "stopTime": "50",
+            "inScreenMode": "1",
+            "formatStyle": "2",
+            "remark": null,
+            "createTime": "2024-01-06 10:40:44",
+            "updateTime": "2024-01-06 11:04:58"
+        },
+        {
+            "id": 5,
+            "category": "0",
+            "content": "山东高速热线：96659",
+            "screenSize": "768*64",
+            "fontColor": "FFFF00",
+            "fontSize": "64",
+            "fontType": "1",
+            "fontSpacing": "0",
+            "rollingSpeed": null,
+            "stopTime": "50",
+            "inScreenMode": "1",
+            "formatStyle": "2",
+            "remark": null,
+            "createTime": "2024-01-06 10:40:56",
+            "updateTime": "2024-01-06 11:05:24"
+        },
+        {
+            "id": 9,
+            "category": "0",
+            "content": "安全带=生命带,关键时刻能救命",
+            "screenSize": "768*64",
+            "fontColor": "FFFF00",
+            "fontSize": "48",
+            "fontType": "3",
+            "fontSpacing": "0",
+            "rollingSpeed": null,
+            "stopTime": "50",
+            "inScreenMode": "1",
+            "formatStyle": "2",
+            "remark": null,
+            "createTime": "2024-01-06 10:42:21",
+            "updateTime": "2024-01-06 11:05:15"
+        }
+    ],
+    "1": [
+        {
+            "id": 6,
+            "category": "1",
+            "content": "前方施工，谨慎驾驶",
+            "screenSize": "768*64",
+            "fontColor": "FFFF00",
+            "fontSize": "64",
+            "fontType": "3",
+            "fontSpacing": "0",
+            "rollingSpeed": null,
+            "stopTime": "50",
+            "inScreenMode": "1",
+            "formatStyle": "2",
+            "remark": null,
+            "createTime": "2024-01-06 10:41:07",
+            "updateTime": "2024-01-06 11:05:36"
+        }
+    ],
+    "2": [
+        {
+            "id": 2,
+            "category": "2",
+            "content": "雨天路滑，注意安全",
+            "screenSize": "768*64",
+            "fontColor": "FFFF00",
+            "fontSize": "64",
+            "fontType": "3",
+            "fontSpacing": "0",
+            "rollingSpeed": null,
+            "stopTime": "50",
+            "inScreenMode": "1",
+            "formatStyle": "2",
+            "remark": null,
+            "createTime": "2024-01-06 10:38:44",
+            "updateTime": "2024-01-06 11:05:52"
+        },
+        {
+            "id": 10,
+            "category": "2",
+            "content": "大雾天气\n减速慢行",
+            "screenSize": "160*80",
+            "fontColor": "FFFF00",
+            "fontSize": "40",
+            "fontType": "2",
+            "fontSpacing": "0",
+            "rollingSpeed": null,
+            "stopTime": "50",
+            "inScreenMode": "1",
+            "formatStyle": "2",
+            "remark": null,
+            "createTime": "2024-01-06 10:42:59",
+            "updateTime": "2024-01-06 11:05:48"
+        }
+    ],
+    "3": [],
+    "4": [
+        {
+            "id": 8,
+            "category": "4",
+            "content": "前方发生火灾，请谨慎驾驶",
+            "screenSize": "768*64",
+            "fontColor": "FFFF00",
+            "fontSize": "64",
+            "fontType": "1",
+            "fontSpacing": "0",
+            "rollingSpeed": null,
+            "stopTime": "50",
+            "inScreenMode": "1",
+            "formatStyle": "2",
+            "remark": null,
+            "createTime": "2024-01-06 10:42:00",
+            "updateTime": null
+        }
+    ],
+    "5": [
+        {
+            "id": 7,
+            "category": "5",
+            "content": "前方事故，减速慢行",
+            "screenSize": "768*64",
+            "fontColor": "FFFF00",
+            "fontSize": "64",
+            "fontType": "1",
+            "fontSpacing": "0",
+            "rollingSpeed": null,
+            "stopTime": "50",
+            "inScreenMode": "1",
+            "formatStyle": "2",
+            "remark": null,
+            "createTime": "2024-01-06 10:41:33",
+            "updateTime": null
+        }
+    ]
+}
\ No newline at end of file