From a1eb6eb55f75bcffaf3b92ee8d52a450784e5ce5 Mon Sep 17 00:00:00 2001
From: hui <770260999@qq.com>
Date: Thu, 18 Jan 2024 16:29:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=83=85=E6=8A=A5=E6=9D=BF=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .DS_Store                                     | Bin 10244 -> 10244 bytes
 ruoyi-ui/src/api/board/board.js               |   8 +
 ruoyi-ui/src/common/getBoardBaseData.js       |   1 -
 ruoyi-ui/src/common/infoBoardTestData.js      |   6 +-
 .../pages/service/board/BoardInfoEditor.vue   | 117 ++++++----
 .../pages/service/board/BoardPreview.vue      |  71 +++---
 .../pages/service/board/BoardTplPreview.vue   | 117 ++++++++++
 .../pages/service/board/index.vue             | 211 ++++++++----------
 .../views/JiHeExpressway/utils/infoBoard.js   |  74 +++++-
 ruoyi-ui/vue.config.js                        |   5 +-
 10 files changed, 410 insertions(+), 200 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardTplPreview.vue

diff --git a/.DS_Store b/.DS_Store
index 545f578e2914001dbc49c530650ec45764b3e7cf..1cc8dd8235f198ece13aad2a0fa42ebd4e9d02ab 100644
GIT binary patch
delta 140
zcmZn(XbG6$&*-%=U^hRb*Jd68Lnd7wh608}hGd3pAeqjP%Am)P#Zb(U&yeStlb@WF
zlb^)Ez#zcDz;qQz&)aMy)XB!Ud-5KMLM`d)YGX4C9R*z@6VqB9g=#}HBV!!}Ljxm=
q+FDKyQDuGWp!n>Z+`RnW$zhW6jD4HSBqP{1vn%{!*?dxjnHd1?wk3W5

delta 96
zcmZn(XbG6$&*-@^U^hRb=Vl%OL#EB8LUnA6yC#2;DAbgyt~NF^(NQooG_TcBs5Ue+
zG6r&tEG=qlIXOg?^{s>AvvYFu@_Q!tOUg6$ZeA}L!8WnMax=TaFP6=gqRh+yoeLdO

diff --git a/ruoyi-ui/src/api/board/board.js b/ruoyi-ui/src/api/board/board.js
index 4de4511f..910a4f2b 100644
--- a/ruoyi-ui/src/api/board/board.js
+++ b/ruoyi-ui/src/api/board/board.js
@@ -10,4 +10,12 @@ export function getBoardList(query) {
       deviceType:2
     }
   })
+}
+
+// 查询设备列表
+export function getBoardDeviceInfo(deviceId) {
+  return request({
+    url: `/business/board/realtimeProperty/${deviceId}`,
+    method: 'get'
+  })
 }
\ No newline at end of file
diff --git a/ruoyi-ui/src/common/getBoardBaseData.js b/ruoyi-ui/src/common/getBoardBaseData.js
index ba8ddb12..6343b03e 100644
--- a/ruoyi-ui/src/common/getBoardBaseData.js
+++ b/ruoyi-ui/src/common/getBoardBaseData.js
@@ -8,7 +8,6 @@ export default function(){
         });
         Vue.prototype.fontTypeDic = dic;
         Vue.prototype.fontTypeList = res.data;
-        console.log(dic , "++==================");
         // console.log(fontTypeList, "字体类型");
     })
     getDicts('iot_devices_font_color').then(res => {
diff --git a/ruoyi-ui/src/common/infoBoardTestData.js b/ruoyi-ui/src/common/infoBoardTestData.js
index 92768821..1450b03c 100644
--- a/ruoyi-ui/src/common/infoBoardTestData.js
+++ b/ruoyi-ui/src/common/infoBoardTestData.js
@@ -37,7 +37,7 @@ export default [
     "flashingFrequency": "5", //闪烁次数
     "flickerSpeed": "0",  //闪烁速度
     "font": "微软雅黑",
-    "fontSize": "14",
+    "fontSize": "40",
     "fontSpacing": "4",
     "fontStyle": "0",
     "foregroundColor": "ffff00",
@@ -64,8 +64,8 @@ export default [
   },
   {
     "backgroundColor": "00000000",
-    "displayAreaHeight": "180",
-    "displayAreaWidth": "700",
+    "displayAreaHeight": "120",
+    "displayAreaWidth": "768",
     "flashingFrequency": "5",
     "flickerSpeed": "0",
     "font": "微软雅黑",
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardInfoEditor.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardInfoEditor.vue
index bd363057..b00b4288 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardInfoEditor.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardInfoEditor.vue
@@ -1,5 +1,5 @@
 <template>
-   <el-dialog :title="mode=='add'?'新增':'编辑'" :visible.sync="dialogVisible" width="43%" append-to-body :close-on-click-modal="false">
+   <el-dialog :title="mode=='add'?'新增':'编辑'" :visible.sync="dialogVisible" width="800px" append-to-body :close-on-click-modal="false">
     <!-- <div style="color:#fff">
       <p>类型:{{type}} 增删改类型:{{mode}}</p>
       <p>模板id:{{ tpl }}</p>
@@ -9,7 +9,7 @@
           <div class="dialogCloseButton"></div>
         </div>
         <el-card>
-          <BoardPreview style="height: 200px; width: 100%;" :boardWH="screenSize" :tpl="dataForm"></BoardPreview>
+          <BoardTplPreview style="height: 200px; width: 100%;" :boardWH="screenSize" :tpl="dataForm"></BoardTplPreview>
         </el-card>
         <el-card>
           <el-form :model="dataForm" :rules="dataRule" label-width="110px" ref="dataForm" size="mini">
@@ -23,11 +23,13 @@
                 </el-form-item>
               </el-col>
               <el-col class="infoBoardButton" :span="16">
-                <el-radio-group v-model="dataForm.formatStyle">
-                  <el-radio-button label="0">左对齐</el-radio-button>
-                  <el-radio-button label="2">中间对齐</el-radio-button>
-                  <el-radio-button label="1">右对齐</el-radio-button>
-                </el-radio-group>
+                <el-form-item label="对齐方式">
+                  <el-radio-group v-model="dataForm.formatStyle">
+                    <el-radio-button label="0">左对齐</el-radio-button>
+                    <el-radio-button label="2">中间对齐</el-radio-button>
+                    <el-radio-button label="1">右对齐</el-radio-button>
+                  </el-radio-group>
+                </el-form-item>
               </el-col>
             </el-row>
 
@@ -89,7 +91,7 @@
 
         <div slot="footer" class="dialog-footer">
           <el-button @click="dataFormSubmitHandle" v-loading="loading" style="background-color: #10aac2;color:#fff;">确认</el-button>
-          <el-button class="closeButton" style="background-color:#b5b5b6;color:#fff" @click="onClose">取消</el-button>
+          <el-button style="background-color:#b5b5b6;color:#fff" @click="onClose">取消</el-button>
         </div>
       </el-dialog>
 </template>
@@ -98,8 +100,8 @@ import { getTemplateList, addTemplate, addTemplateContent, editTemplateContent,
 import { devicessize } from '@/api/information/api.js'
 import { checkIotBoardContent } from '@/api/board/vocabulary'
 import BoardPreview from "./BoardPreview.vue"
+import BoardTplPreview from "./BoardTplPreview.vue"
 import infoBoardUtils from "@screen/utils/infoBoard.js"
-import { after } from 'lodash'
 export default {
   data() {
     return {
@@ -215,15 +217,9 @@ export default {
     }
   },
   components:{
-    BoardPreview
+    BoardPreview, BoardTplPreview
   },
   computed: {
-    divStyle: function () {
-      return {
-        width: this.width + 'px',
-        height: this.height + 'px'
-      }
-    }
   },
   watch: {
     visible:{
@@ -235,11 +231,14 @@ export default {
     dialogVisible(newV){
       this.$emit("update:visible", newV);
     },
-    "tpl.id":{
+    tpl:{
       handler(newV){
         // { "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" }
+        if(newV && Object.keys(newV).length>0){
           this.initData();
-      }
+        }
+      },
+      deep:true
     },
     "mode": {
       handler(newV) {
@@ -275,21 +274,59 @@ export default {
       // getTemplateList({id:this.tpl.id}).then(res=>{
         //    console.log(res.data , "++++++++===========");
         // })
-      if (this.mode == "edit") {
-        this.dataForm = infoBoardUtils.sourceFormat(this.tpl, this.type);
-      }else{
-        this.dataForm = {
-          category      : this.templateCategoryList[0].dictValue,
-          formatStyle   : 0,
-          content       : "请输入文字内容",
-          fontColor     : this.colorList[0].dictValue,
-          fontSize      : this.fontSizeList[0].dictValue,
-          fontFamily    : this.fontTypeList[0].dictValue,
-          stopTime      : 5,
-          inScreenMode  : this.inScreenModeList[0].dictValue,
-          screenSize    : this.screenSize
+        if(this.mode=="add"){
+          let tplDefault= null;
+          if(this.type=="template"){
+            tplDefault = {
+              category: this.templateCategoryList[0].dictValue,
+              formatStyle: 0,
+              content: "",
+              fontColor: this.colorList[0].dictValue,
+              fontSize: this.fontSizeList[0].dictValue,
+              fontFamily: this.fontTypeList[0].dictValue,
+              stopTime: 5,
+              inScreenMode: this.inScreenModeList[0].dictValue,
+              screenSize: this.screenSize
+            }
+          }
+          else{
+            tplDefault = {
+              "residenceTime": "50",
+              "intonation": "0",
+              "fontSpacing": "1",
+              "screenEntryMethod": "1",
+              "screenOutputMethod": "1",
+              "lineSpacing": "0",
+              "yCoordinate": "0",
+              "whetherToSynchronizePlayback": "0",
+              "whetherToPlayText": "0",
+              "playbackCount": "1",
+              "flashingFrequency": "5",
+              "backgroundColor": "8",
+              "foregroundColor": "FFFF00",
+              "textContent": "",
+              "fontStyle": "0",
+              "displayAreaWidth": "768",
+              "playbackDuration": "50",
+              "displayAreaHeight": "64",
+              "volume": "0",
+              "xCoordinate": "0",
+              "screenEntrySpeed": "1",
+              "horizontalAlignment": "2",
+              "playSpecialEffects": "0",
+              "setUpTheSpeaker": "0",
+              "flickerSpeed": "0",
+              "specialEffectsSpeed": "1",
+              "fontSize": "64",
+              "verticalAlignment": "2",
+              "speechSpeed": "0",
+              "font": "3"
+            }
+          }
+          this.dataForm = infoBoardUtils.dialogSourceFormat(tplDefault, this.type);
+        }else{
+          this.dataForm = infoBoardUtils.dialogSourceFormat(this.tpl, this.type);
         }
-      }
     },
     onClose(){
         this.dialogVisible = false;
@@ -387,7 +424,7 @@ export default {
         }
       })*/
 
-      let data = infoBoardUtils.saveFormat(this.dataForm, this.type);
+      let data = infoBoardUtils.dialogSaveFormat(this.dataForm, this.type);
 
       this.loading = true
       // let templateId = "";
@@ -402,12 +439,16 @@ export default {
             afterSave("新增");
           });
         }
+      }else{
+        this.loading = false
+        // this.dialogVisible = false
+        this.$emit("afterSubmit", { type: this.type, mode: this.mode, data:data });
       }
       
       const afterSave = (para)=>{
         this.$message.success(para + '成功!')
         this.loading = false
-        this.dialogVisible = false
+        // this.dialogVisible = false
         this.$emit("afterSubmit" , {type:this.type, mode:this.mode});
       }
 
@@ -418,10 +459,10 @@ export default {
 <style lang="scss" scoped>
 .infoBoardButton {
   ::v-deep .el-radio-button--medium .el-radio-button__inner {
-    height: 3vh;
-    line-height: 3vh;
-    padding: 0 0.6vw;
-    font-size: 0.7vw;
+    // height: 3vh;
+    // line-height: 3vh;
+    // padding: 0 0.6vw;
+    // font-size: 0.7vw;
   }
 }
 .previewContentCSS {
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 3732898c..50285753 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardPreview.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardPreview.vue
@@ -26,21 +26,36 @@ export default {
         },
         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"
+            //     "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,
@@ -56,7 +71,7 @@ export default {
         },
         tpl:{
             handler(newV){
-                this.contentArr = this.tpl.content.replace(/\n|\r\n/g, '&&&&&').replace(/ /g, '&nbsp').split('&&&&&');
+                this.contentArr = this.tpl.textContent.replace(/\n|\r\n/g, '&&&&&').replace(/ /g, '&nbsp').split('&&&&&');
                 this.setStyle();
             },
             deep:true,
@@ -72,22 +87,26 @@ export default {
             this.$nextTick(() => {
                 let boxW = this.$refs["compBox"].offsetWidth;
                 let boxH = this.$refs["compBox"].offsetHeight;
-                let arr = this.boardWH.split("*");
+                let conW = this.tpl.displayAreaWidth;
+                let conH = this.tpl.displayAreaHeight;
                 let scale = 1;
-                if (arr[0] / arr[1] > boxW / boxH) {
-                    scale = boxW / arr[0];
+                if (conW / conH > boxW / boxH) {
+                    scale = boxW / conW;
                 } else {
-                    scale = boxH / arr[1];
+                    scale = boxH / conH;
                 }
                 this.boardStyle =  {
-                    width: `${arr[0] * scale}px`,
-                    height: `${arr[1] * scale}px`,
-                    "align-items" : ['flex-start', 'flex-end', 'center'][this.tpl.formatStyle]
+                    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.fontColor, 
-                    "font-size": `${this.tpl.fontSize.replace('px','')*scale}px`,
-                    "font-family": this.fontTypeDic[this.tpl.fontType],
+                    "color": "#" + this.tpl.foregroundColor, 
+                    "font-size": `${fontSize}px`,
+                    "font-family": this.tpl.font,
                     "min-height": `${this.tpl.fontSize.replace('px', '') * scale}px`
                 }
             })
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardTplPreview.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardTplPreview.vue
new file mode 100644
index 00000000..3732898c
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardTplPreview.vue
@@ -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, '&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 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>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
index 5ab409fc..def64b57 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="infoBoardBox">
     <div class="infoBoardCon">
+      <!-- ++++++++++设备列表++++++++++ -->
       <div style="width: 20%" class="part partLeft">
         <div class="partTitle boardListTitle">
           <img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt="">
@@ -22,9 +23,8 @@
                 <div v-if="item.list.length > 0">
                   <!-- <el-checkbox style="width: 100%" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
                     </el-checkbox> -->
-                  <el-checkbox-group class="checkbox" v-model="checkedCities" @change="handleCheckedCitiesChange"
-                    :max="1">
-                    <el-checkbox v-for="(itm, index) in item.list" :label="itm.id" :key="index">
+                  <el-checkbox-group class="checkbox" v-model="checkedCities" @change="onSelectDevice" :max="1">
+                    <el-checkbox v-for="(itm, index) in item.list" :label="itm.iotDeviceId" :key="index">
                       <el-tooltip :content="itm.ip" placement="top">
                         <div>{{ itm.deviceName }}</div>
                       </el-tooltip>
@@ -41,6 +41,7 @@
           </el-form-item>
         </el-form>
       </div>
+      <!-- ++++++++++中间部分：单个设备++++++++++ -->
       <div style="width: 37.8%" class="part partMiddle">
 
         <div class="partTitle partDeviceTempateTitle">
@@ -54,65 +55,30 @@
           </div>
 
           <div class="controlBox">
-            <el-button type="primary" @click.native="openDialogVisible(1, 2)">添加信息</el-button>
+            <el-button type="primary" @click.native="____onAddDeviceItem()">添加信息</el-button>
             <el-button type="primary" @click="publishInfo" :disabled="contentList.length == 0">发布信息</el-button>
           </div>
         </div>
         <div class="partCon">
-          <el-table :data="contentList" row-key="ID" v-loading="loading"
-            style="height: 100%;padding: 0 1vh; background-color: #112d3b;overflow-y: scroll;" :key="toggleIndex">
-            <el-table-column width="545">
-              <template slot-scope="scope">
-                <div class="con">
-                  <div style="background: black; position: relative" :style="{
-                    color: getColorStyle(scope.row.COLOR),
-                    fontSize: getFontSize(scope.row.FONT_SIZE),
-                    fontFamily: scope.row.FONT,
-                    width: getScreenSize(form.selectedPixel, 'width') + 'px',
-                    height: getScreenSize(form.selectedPixel, 'height') + 'px',
-                    'lineHeight': '1',
-                    'display': 'flex',
-                    'align-items': 'center',
-                    'justify-content': getTextAlign(scope.row.formatStyle),
-                  }">
-                    <span :style="{
-                      /*left: getCoordinate(
-                        scope.row.COORDINATE.substring(0, 3),
-                        'left'
-                      ),
-                      top: getCoordinate(
-                        scope.row.COORDINATE.substring(3, 6),
-                        'top'
-                      ),*/
-                      position: 'relative',
-                      maxHeight: getScreenSize(form.selectedPixel, 'height') + 'px',
-                    }" class="infoTxt"
-                      v-html="scope.row.CONTENT ? scope.row.CONTENT.replace(/\n|\r\n/g, '<br>').replace(/ /g, '&nb sp'): ''"></span>
-                  </div>
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column width="130">
-              <template slot-scope="scope">
-                <div class="infoBtnBox">
-                  <!-- <el-tooltip content="加入信息模板" placement="top">
-                  <div @click="arrowRight(scope.row)"></div>
-                </el-tooltip> -->
-
-                  <el-tooltip content="编辑" placement="top">
-                    <div @click="openQbbDrawer(scope.row, scope.$index, 1)" class="edit"></div>
-                  </el-tooltip>
-                  <el-tooltip content="删除" placement="top">
-                    <div @click="delQbbDrawer(scope.$index)" class="del"></div>
-                  </el-tooltip>
-                </div>
-              </template>
-            </el-table-column>
-          </el-table>
+          <!-- {{ selectedBdMsg }} -->
+          <vuescroll :ops="scrollOptions" class="templateBox">
+            <div v-for="(itm, indx) in selectedBdMsg" :key="indx" class="tplItem">
+              <!-- 模板内容 -->
+              <BoardPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardPreview>
+              <!-- 操作按钮 -->
+              <div class="infoBtnBox">
+                <el-tooltip content="编辑" placement="top">
+                  <p @click="____onEditBoardItem(itm, indx)" class="btn btnEdit"></p>
+                </el-tooltip>
+                <el-tooltip content="删除" placement="top">
+                  <p @click="____onDeleteBoardItem(indx)" class="btn btnDelete"></p>
+                </el-tooltip>
+              </div>
+            </div>
+          </vuescroll>
         </div>
-
       </div>
-      <!-- 信息模板 -->
+      <!-- ++++++++++右边部分：信息模板++++++++++ -->
       <div style=" width: 42.2%" class="part partRight">
         <div class="partTitle partDeviceTempateTitle">
           <div>
@@ -135,7 +101,7 @@
               <h3>{{ item.dictLabel }}</h3>
               <div v-for="(itm, indx) in item.list" :key="indx" class="tplItem">
                 <!-- 模板内容 -->
-                <BoardPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardPreview>
+                <BoardTplPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardTplPreview>
                 <!-- <div class="infoPreview">
                       <div class="infoBox" :style="____boardBgStyle">
                         <span class="infoTxt" :style="____boardTxtStyle(itm)" v-html="itm.content.replace(/\n|\r\n/g, '<br>').replace(/ /g, '&nbsp')"></span>
@@ -189,13 +155,16 @@ import { getUserDeptId } from '@/api/system/user'
 import { listTunnels, devicessize, information, getBoardInfo, getBoardEditInfo, getboardSizeDic, getBoardContentData, deviceControl } from '@/api/information/api.js'
 import { uploadBoardEditInfo, getAllVmsTemplate, addTemplate, addTemplateContent, getBoardContent, deleteTemplate, splicingBoard } from '@/api/board/template'
 import { invokedFunction, getDeviceRealtimeProperty } from '@/api/device/device'
-import { getBoardList } from '@/api/board/board'
+import { getBoardList, getBoardDeviceInfo } from '@/api/board/board'
 import { getTemplateList } from '@/api/board/template'
 import BoardPreview from './BoardPreview'
+import BoardTplPreview from './BoardTplPreview'
 
 import vuescroll from 'vuescroll'
 import scrollOptions from '@/common/scrollbar.js'
 
+import infoBoardUtils from "@screen/utils/infoBoard.js"
+
 // 对象深拷贝
 export const deepClone = data => {
   // 封装的判断数据类型的方法
@@ -227,6 +196,7 @@ export default {
     BoardInfoEditor,
     editInfo,
     BoardPreview,
+    BoardTplPreview,
     vuescroll
   },
   dicts: ['iot_board_direction'],
@@ -281,7 +251,8 @@ export default {
         visible: false,
         tpl: {}
       },
-      scrollOptions
+      scrollOptions,
+      boardItemEdtingIndex: -1
     }
   },
   watch: {
@@ -290,6 +261,11 @@ export default {
         this.rowDrop()
       })
     },
+    "editDialog.visible": function (newV) {
+      if (!newV) {
+        this.editDialog.tpl = null
+      }
+    }
     // boardSizeDic: function (newVal, oldVal) {
     //   console.log(newVal, 'selectedSize')
     //   if (newVal.length == 0) {
@@ -412,6 +388,7 @@ export default {
           }
           if (!this.selectedDevice.deviceName) {
             this.selectedDevice = item;
+            this.selectedDeviceId = item.iotDeviceId;
             this.____getBoardMessage();
           }
         })
@@ -421,8 +398,23 @@ export default {
     },
 
     ____getBoardMessage() {
+      if (process.env.NODE_ENV == 'development') {
+
+        // import("@/common/infoBoardTestData.js").then(res=>{
+        //   this.selectedBdMsg = res.default.data["3A"].content;
+        // })
+      }
+      if (!this.selectedDeviceId) {
+        return;
+      }
+      getBoardDeviceInfo(this.selectedDeviceId).then(res => {
+        this.selectedBdMsg = res.data["3A"].content;
+        console.log(this.selectedBdMsg);
+      }).catch(err => {
+
+      })
       // 获取情报板设备对应的显示信息
-      this.selectedBdMsg = [];
+
     },
     ____onAddTemplate() {
       this.editDialog = {
@@ -432,6 +424,8 @@ export default {
       }
     },
     ____onEditTemplate(tpl) {
+      // type : board template
+      // mode : edit add
       this.editDialog = {
         visible: true,
         mode: "edit",
@@ -439,7 +433,37 @@ export default {
         tpl
       }
     },
+    ____onEditBoardItem(tpl, index) {
+      // type : board template
+      // mode : edit add
+      this.boardItemEdtingIndex = index;
+      this.editDialog = {
+        visible: true,
+        mode: "edit",
+        type: "device",
+        tpl
+      }
+    },
+    ____onAddDeviceItem() {
+      this.editDialog = {
+        visible: true,
+        mode: "add",
+        type: "device",
+        tpl: {
+          "textContent": ""
+        }
+      }
+    },
     ____onEditSubmit(para) {
+      this.editDialog.tpl = {};
+      this.editDialog.visible = false;
+      if (para.type == "device") {
+        if (para.mode == "edit") {
+          this.selectedBdMsg[this.boardItemEdtingIndex] = para.data;
+        } else {
+          this.selectedBdMsg.push(para.data);
+        }
+      }
       this.____refreshPageData(para);
     },
     ____refreshPageData(para) {
@@ -577,10 +601,10 @@ export default {
     },
 
     // 删除中间模板
-    delQbbDrawer(index) {
+    ____onDeleteBoardItem(index) {
       if (index > -1) {
-        this.contentList.splice(index, 1)
-        this.$message.success('删除成功')
+        this.selectedBdMsg.splice(index, 1)
+        this.$message.success('删除成功,发布后才能生效。')
       }
     },
 
@@ -687,8 +711,12 @@ export default {
     },
 
     // 多选
-    handleCheckedCitiesChange(value) {
-      console.log(value, 'value')
+    onSelectDevice(value) {
+      this.selectedDeviceId = value[0];
+      this.selctedDevice = _.find(this.boardSizeDic[this.selectedSize].list, { iotDeviceId: value[0] });
+      // this.selectedDevice = this.deviceList
+      this.____getBoardMessage();
+
       this.checkedCities = value
       let val = JSON.parse(JSON.stringify(value))
       for (let itm of this.deviceList) {
@@ -861,18 +889,6 @@ export default {
       return value
     },
 
-    // 待下发 编辑
-    openQbbDrawer(item, index, type) {
-      this.index_ = index
-      console.log(item)
-      this.boardEmitItem = item
-      this.boardEmitItem.screenSize = this.form.selectedPixel
-      this.boardEmitItem.deviceId = this.deviceId
-      this.boardEmitItem.type = type
-
-      this.showEmit = true
-    },
-
     // 转颜色
     getColorStyle(font) {
       if (font == '黄色' || font == 'yellow' || font == '4') {
@@ -901,43 +917,6 @@ export default {
       }
     },
 
-    // 换算字号
-    getFontSize(font, screenSize) {
-      if (!font) {
-        return
-      }
-      let width = ''
-      let height = ''
-      if (!screenSize) {
-        width = this.form.selectedPixel.split('*')[0]
-        height = this.form.selectedPixel.split('*')[1]
-      } else {
-        width = screenSize.split('*')[0]
-        height = screenSize.split('*')[1]
-      }
-      if (width <= 450 && height <= 75) {
-        if (font.toString().length == 2) {
-          return font + 'px'
-        } else {
-          return font.substring(0, 2) + 'px'
-        }
-      } else {
-        if (width / 450 > height / 75) {
-          if (font.toString().length == 2) {
-            return font / (width / 450) + 'px'
-          } else {
-            return font.substring(0, 2) / (width / 450) + 'px'
-          }
-        } else {
-          if (font.toString().length == 2) {
-            return font / (height / 75) + 'px'
-          } else {
-            return font.substring(0, 2) / (height / 75) + 'px'
-          }
-        }
-      }
-    },
-
     // 换算文字在模板的位置
     getCoordinate(coordinate, type, screenSize) {
       let width = ''
@@ -1119,7 +1098,7 @@ export default {
           margin-right: 14px;
           display: flex;
           align-items: stretch;
-          margin-bottom: 10px;
+          padding-bottom: 10px;
 
           .boardPreview {
             border: 2px solid #004c64;
@@ -1132,9 +1111,7 @@ export default {
             width: 160px;
             height: 80px;
             display: flex;
-            float: right;
             margin-left: 10px;
-            padding: 0 0.2vw;
             /* // border: solid 1px #05afe3; */
             border: 2px solid #004c64;
             display: flex;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/utils/infoBoard.js b/ruoyi-ui/src/views/JiHeExpressway/utils/infoBoard.js
index 00eb414c..0fe97a1c 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/utils/infoBoard.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/utils/infoBoard.js
@@ -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 {
+
+        }
     }
 }
\ No newline at end of file
diff --git a/ruoyi-ui/vue.config.js b/ruoyi-ui/vue.config.js
index 77b7f121..8d54558f 100644
--- a/ruoyi-ui/vue.config.js
+++ b/ruoyi-ui/vue.config.js
@@ -41,11 +41,10 @@ module.exports = {
         // target: `http://192.168.0.194:8080`,
         // target: `http://10.0.81.201:8080`,
         // target: `http://10.168.73.36:8080`, // 周乐
-        //target: `http://10.168.77.209:8080`, // 刘朋
-         //target:'http://10.168.66.196:8080',
-         target:'http://10.168.77.88:8087/',
+        // target: `http://10.168.77.209:8080`, // 刘朋
         // target: `http://10.168.66.196:8080`, //刘文阁
         // target: `http://10.168.56.206:8087`, //孟
+        target: `http://10.0.81.202:8087`, //现场后台
         changeOrigin: true,
         pathRewrite: {
           ["^" + process.env.VUE_APP_BASE_API]: "",