From 18e92eac7df7a49276b5373452947240497b2a88 Mon Sep 17 00:00:00 2001
From: hui <770260999@qq.com>
Date: Wed, 10 Jan 2024 09:22:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=83=85=E6=8A=A5=E6=9D=BF=E5=BC=95=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/common/menuData.js               |    8 +-
 ruoyi-ui/src/router/index.js                  |  234 +-
 ruoyi-ui/src/router/routerCreater.js          |    2 +-
 ruoyi-ui/src/store/modules/permission.js      |   31 +-
 .../pages/service/board/addinfo.vue           |  973 ++++++++
 .../pages/service/board/boardData.json        |    1 +
 .../pages/service/board/editInfo.vue          |  963 ++++++++
 .../pages/service/board/index.vue             | 2009 +++++++++++++++++
 8 files changed, 4087 insertions(+), 134 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/service/board/boardData.json
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/service/board/editInfo.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue

diff --git a/ruoyi-ui/src/common/menuData.js b/ruoyi-ui/src/common/menuData.js
index 52e8e625..300d6c21 100644
--- a/ruoyi-ui/src/common/menuData.js
+++ b/ruoyi-ui/src/common/menuData.js
@@ -92,7 +92,13 @@ export default [
     name: "service",
     position: "right",
     path: "/service",
-    component: "developing.vue",
+    redirect:"serviceBoard",
+    children:[{
+      title:"情报板",
+      name:"serviceBoard",
+      path:"/service/board",
+      component:"service/board/index.vue",
+    }]
   },
   {
     title: "数据可视化",
diff --git a/ruoyi-ui/src/router/index.js b/ruoyi-ui/src/router/index.js
index 0936a545..a5ff008c 100644
--- a/ruoyi-ui/src/router/index.js
+++ b/ruoyi-ui/src/router/index.js
@@ -1,16 +1,16 @@
-import Layout from "@/layout";
+// import Layout from "@/layout";
 const constantRoutes = [
-  {
-    path: '/redirect',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: '/redirect/:path(.*)',
-        component: (resolve) => require(['@/views/redirect'], resolve)
-      }
-    ]
-  },
+  // {
+  //   path: '/redirect',
+  //   component: Layout,
+  //   hidden: true,
+  //   children: [
+  //     {
+  //       path: '/redirect/:path(.*)',
+  //       component: (resolve) => require(['@/views/redirect'], resolve)
+  //     }
+  //   ]
+  // },
   {
     path: '/loginjqtunnel',
     component: (resolve) => require(['@/views/loginjqtunnel'], resolve),
@@ -75,98 +75,98 @@ const constantRoutes = [
       }
     ]
   }, */
-  {
-    path: '/user',
-    component: Layout,
-    hidden: true,
-    redirect: 'noredirect',
-    children: [
-      {
-        path: 'profile',
-        component: (resolve) => require(['@/views/system/user/profile/index'], resolve),
-        name: 'Profile',
-        meta: { title: '个人中心', icon: 'user' }
-      }
-    ]
-  },
-  {
-    path: '/system/user-auth',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: 'role/:userId(\\d+)',
-        component: (resolve) => require(['@/views/system/user/authRole'], resolve),
-        name: 'AuthRole',
-        meta: { title: '分配角色', activeMenu: '/system/user' }
-      }
-    ]
-  },
-  {
-    path: '/system/role-auth',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: 'user/:roleId(\\d+)',
-        component: (resolve) => require(['@/views/system/role/authUser'], resolve),
-        name: 'AuthUser',
-        meta: { title: '分配用户', activeMenu: '/system/role' }
-      }
-    ]
-  },
-  {
-    path: '/electromechanicalPatrol/teamsManage',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: 'teamsUser/:deptId',
-        component: (resolve) => require(['@/views/electromechanicalPatrol/teamsManage/authTeamsUser'], resolve),
-        name: 'AuthUser',
-        meta: { title: '包含用户', activeMenu: '/electromechanicalPatrol/teamsManage' }
-      }
-    ]
-  },
-  {
-    path: '/system/dict-data',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: 'index/:dictId(\\d+)',
-        component: (resolve) => require(['@/views/system/dict/data'], resolve),
-        name: 'Data',
-        meta: { title: '字典数据', activeMenu: '/system/dict' }
-      }
-    ]
-  },
-  {
-    path: '/monitor/job-log',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: 'index',
-        component: (resolve) => require(['@/views/monitor/job/log'], resolve),
-        name: 'JobLog',
-        meta: { title: '调度日志', activeMenu: '/monitor/job' }
-      }
-    ]
-  },
-  {
-    path: '/tool/gen-edit',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: 'index',
-        component: (resolve) => require(['@/views/tool/gen/editTable'], resolve),
-        name: 'GenEdit',
-        meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
-      }
-    ]
-  },
+  // {
+  //   path: '/user',
+  //   component: Layout,
+  //   hidden: true,
+  //   redirect: 'noredirect',
+  //   children: [
+  //     {
+  //       path: 'profile',
+  //       component: (resolve) => require(['@/views/system/user/profile/index'], resolve),
+  //       name: 'Profile',
+  //       meta: { title: '个人中心', icon: 'user' }
+  //     }
+  //   ]
+  // },
+  // {
+  //   path: '/system/user-auth',
+  //   component: Layout,
+  //   hidden: true,
+  //   children: [
+  //     {
+  //       path: 'role/:userId(\\d+)',
+  //       component: (resolve) => require(['@/views/system/user/authRole'], resolve),
+  //       name: 'AuthRole',
+  //       meta: { title: '分配角色', activeMenu: '/system/user' }
+  //     }
+  //   ]
+  // },
+  // {
+  //   path: '/system/role-auth',
+  //   component: Layout,
+  //   hidden: true,
+  //   children: [
+  //     {
+  //       path: 'user/:roleId(\\d+)',
+  //       component: (resolve) => require(['@/views/system/role/authUser'], resolve),
+  //       name: 'AuthUser',
+  //       meta: { title: '分配用户', activeMenu: '/system/role' }
+  //     }
+  //   ]
+  // },
+  // {
+  //   path: '/electromechanicalPatrol/teamsManage',
+  //   component: Layout,
+  //   hidden: true,
+  //   children: [
+  //     {
+  //       path: 'teamsUser/:deptId',
+  //       component: (resolve) => require(['@/views/electromechanicalPatrol/teamsManage/authTeamsUser'], resolve),
+  //       name: 'AuthUser',
+  //       meta: { title: '包含用户', activeMenu: '/electromechanicalPatrol/teamsManage' }
+  //     }
+  //   ]
+  // },
+  // {
+  //   path: '/system/dict-data',
+  //   component: Layout,
+  //   hidden: true,
+  //   children: [
+  //     {
+  //       path: 'index/:dictId(\\d+)',
+  //       component: (resolve) => require(['@/views/system/dict/data'], resolve),
+  //       name: 'Data',
+  //       meta: { title: '字典数据', activeMenu: '/system/dict' }
+  //     }
+  //   ]
+  // },
+  // {
+  //   path: '/monitor/job-log',
+  //   component: Layout,
+  //   hidden: true,
+  //   children: [
+  //     {
+  //       path: 'index',
+  //       component: (resolve) => require(['@/views/monitor/job/log'], resolve),
+  //       name: 'JobLog',
+  //       meta: { title: '调度日志', activeMenu: '/monitor/job' }
+  //     }
+  //   ]
+  // },
+  // {
+  //   path: '/tool/gen-edit',
+  //   component: Layout,
+  //   hidden: true,
+  //   children: [
+  //     {
+  //       path: 'index',
+  //       component: (resolve) => require(['@/views/tool/gen/editTable'], resolve),
+  //       name: 'GenEdit',
+  //       meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
+  //     }
+  //   ]
+  // },
   // {
   //   path: '/bigscreen/index.html',
   //   name: '数据可视化大屏',
@@ -191,19 +191,19 @@ const constantRoutes = [
     component: (resolve) => require(['@/views/equipment/param/index'], resolve),
     hidden: true
   },
-  {
-    path: '/equipment/eqlist-point',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: 'index',
-        component: (resolve) => require(['@/views/equipment/protocol/index'], resolve),
-        name: 'devPoint',
-        meta: { title: '设备点位配置', activeMenu: '/equipment/eqlist' }
-      }
-    ]
-  },
+  // {
+  //   path: '/equipment/eqlist-point',
+  //   component: Layout,
+  //   hidden: true,
+  //   children: [
+  //     {
+  //       path: 'index',
+  //       component: (resolve) => require(['@/views/equipment/protocol/index'], resolve),
+  //       name: 'devPoint',
+  //       meta: { title: '设备点位配置', activeMenu: '/equipment/eqlist' }
+  //     }
+  //   ]
+  // },
   {
     path: '/tool/gen',
     component: (resolve) => require(['@/views/tool/gen/index'], resolve),
diff --git a/ruoyi-ui/src/router/routerCreater.js b/ruoyi-ui/src/router/routerCreater.js
index 100507c5..a79be1b6 100644
--- a/ruoyi-ui/src/router/routerCreater.js
+++ b/ruoyi-ui/src/router/routerCreater.js
@@ -5,7 +5,7 @@ import compX from "@/views/JiHeExpressway/components/compX.vue";
 Vue.use(Router);
 
 /* Layout */
-import Layout from "@/layout";
+// import Layout from "@/layout";
 import menuData from "@/common/menuData";
 import { resolve } from "mathjs";
 // 公共路由
diff --git a/ruoyi-ui/src/store/modules/permission.js b/ruoyi-ui/src/store/modules/permission.js
index dba9252f..657e55ec 100644
--- a/ruoyi-ui/src/store/modules/permission.js
+++ b/ruoyi-ui/src/store/modules/permission.js
@@ -1,8 +1,8 @@
 import { constantRoutes } from '@/router'
 import { getRouters } from '@/api/menu'
-import Layout from '@/layout/index'
-import ParentView from '@/components/ParentView';
-import InnerLink from '@/layout/components/InnerLink'
+// import Layout from '@/layout/index'
+// import ParentView from '@/components/ParentView';
+// import InnerLink from '@/layout/components/InnerLink'
 
 const permission = {
   state: {
@@ -60,18 +60,19 @@ function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
     if (type && route.children) {
       route.children = filterChildren(route.children)
     }
-    if (route.component) {
-      // Layout ParentView 组件特殊处理
-      if (route.component === 'Layout') {
-        route.component = Layout
-      } else if (route.component === 'ParentView') {
-        route.component = ParentView
-      } else if (route.component === 'InnerLink') {
-        route.component = InnerLink
-      } else {
-        route.component = loadView(route.component)
-      }
-    }
+    // if (route.component) {
+    //   // Layout ParentView 组件特殊处理
+    //   if (route.component === 'Layout') {
+    //     route.component = Layout
+    //   } else if (route.component === 'ParentView') {
+    //     route.component = ParentView
+    //   } else if (route.component === 'InnerLink') {
+    //     route.component = InnerLink
+    //   } else {
+    //     route.component = loadView(route.component)
+    //   }
+    // }
+    route.component = loadView(route.component)
     if (route.children != null && route.children && route.children.length) {
       route.children = filterAsyncRouter(route.children, route, type)
     } else {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo.vue
new file mode 100644
index 00000000..7adc2eef
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo.vue
@@ -0,0 +1,973 @@
+<template>
+  <div class="container infoBoardDialog">
+    <!-- 添加信息弹窗 -->
+    <el-dialog title="新增" :visible.sync="dialogVisible" width="43%" :before-close="handleClose" :close-on-click-modal="false">
+      <div class="dialogStyleBox">
+        <div class="dialogLine"></div>
+        <div class="dialogCloseButton"></div>
+      </div>
+      <el-card class="box-card">
+        <div v-on:ondragenter="ondragenter" v-on:drop="faceDrop" v-on:dragover="allowDrop" :style="{
+            width: boardWidth + 'px',
+            height: boardHeight + 'px',
+            position: 'relative',
+
+
+            textAlign: getTextAlign(dataForm.formatStyle)
+
+          }" class="blackBoard2">
+          <span :style="{
+              color: getColorStyle(dataForm.COLOR),
+              fontSize: dataForm.FONT_SIZE,
+              fontFamily: dataForm.FONT,
+              zIndex: '1000',
+              position:'relative',
+              /*left: dataForm.COORDINATE
+                ? dataForm.COORDINATE.substring(0, 3) + 'px'
+                : '',
+              top: dataForm.COORDINATE
+                ? dataForm.COORDINATE.substring(3, 6) + 'px'
+                : '',*/
+              maxHeight:boardHeight + 'px',
+            }" class="textBoard2 boardTextStyle" v-html="
+              dataForm.CONTENT
+                ? dataForm.CONTENT.replace(/\n|\r\n/g, '<br>').replace(
+                    / /g,
+                    '&nbsp'
+                  )
+                : ''
+            "></span>
+        </div>
+      </el-card>
+      <el-card>
+        <el-form :model="dataForm" :rules="dataRule" label-width="90px" ref="dataForm" size="mini">
+          <el-row :gutter="24" style="height: 45px;">
+            <el-col :span="8">
+              <el-form-item prop="category" label="所属类别" :rules="[
+                  {
+                    required: categoryRules ? true : false,
+                    message: '请选择所属类别',
+                    trigger: 'blur',
+                  },
+                ]" v-show="infoType == 2">
+                <el-select v-model="dataForm.category" placeholder="请选择所属类别" clearable size="mini">
+                  <el-option v-for="item in iotTemplateCategoryList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col class="infoBoardButton" :span="16">
+              <el-radio-group v-model="radio1" @input="alignment(radio1)">
+                <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-button type="primary" @click="alignment(1)" size="mini"
+                >左对齐</el-button
+              >
+              <el-button type="primary" @click="alignment(2)" size="mini"
+                >左右居中</el-button
+              >
+              <el-button type="primary" @click="alignment(3)" size="mini"
+                >右对齐</el-button
+              > -->
+            </el-col>
+          </el-row>
+
+          <!-- 选择图片弹出框结束 -->
+          <el-row :gutter="24" style="display: flex;
+    flex-wrap: wrap;width:100%">
+            <el-col :span="24">
+              <el-form-item label="详细内容" prop="CONTENT">
+                <el-input type="textarea" clearable id="textContent" placeholder="详细内容" v-model="dataForm.CONTENT" @keyup.native="keyDown($event)"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="COLOR" label="字体颜色">
+                <el-select v-model="dataForm.COLOR" filterable placeholder="请选择">
+                  <el-option v-for="item in colorOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="FONT_SIZE" label="字体大小">
+                <el-select v-model="dataForm.FONT_SIZE" style="width: 100%" @change="changeFontSize">
+                  <el-option v-for="item in fontSizeOpt" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="FONT" label="字体类型">
+                <el-select v-model="dataForm.FONT" filterable placeholder="请选择">
+                  <el-option v-for="item in fontTypeOptions" :key="item.dictLabel" :label="item.dictLabel" :value="item.dictLabel">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="8">
+              <el-form-item prop="STAY" label="停留时间(秒)">
+                <el-input-number :min="0" controls-position="right" v-model="dataForm.STAY" style="width: 100%" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="ACTION" label="入屏方式">
+                <el-select v-model="dataForm.ACTION" filterable placeholder="请选择">
+                  <el-option v-for="item in inScreenModeOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="screenSize" label="屏幕尺寸">
+                <el-select v-model="dataForm.screenSize" filterable placeholder="请选择" v-if="!devicePixelBoolean">
+                  <el-option v-for="item in screenSizeOptions" :key="item.device_pixel" :label="item.device_pixel" :value="item.device_pixel" @click.native="changeScreenSize(item.device_pixel)">
+                  </el-option>
+                </el-select>
+                <el-input disabled v-model="dataForm.screenSize" v-if="devicePixelBoolean"></el-input>
+              </el-form-item>
+            </el-col>
+
+          </el-row>
+        </el-form>
+      </el-card>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dataFormSubmitHandle()" v-loading="loading" style="background-color: #10aac2;color:#fff;" class="submitButton">确认
+        </el-button>
+        <el-button class="closeButton" style="background-color:#b5b5b6;color:#fff" @click="handleClose">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getTemplateInfo, addTemplate, addTemplateContent, editTemplateContent, editTemplate, deleteTemplate, getTemplateContent, getGalleryList, getFontSizeByDevicePixel, uploadBoardEditInfo } from '@/api/board/template'
+import { devicessize } from '@/api/information/api.js'
+import { checkIotBoardContent } from '@/api/board/vocabulary'
+export default {
+  data() {
+    return {
+      radio1: '2',
+      alignmentNum: 2,
+      content: '',
+      boardWidth: '',
+      boardHeight: '',
+      checkList: [], //复选框一组
+      obj: '',
+      imgUrl: [],
+      imgUrlOther: [],
+      dialogVisible: false,
+      fileList: [
+        {
+          name: 'food.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        },
+        {
+          name: 'food2.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        }
+      ],
+      listquery: [], //拖拽图片
+      curDragImgItem: '',
+      visible: false,
+      startTxt_x: '000',
+      startTxt_y: '000',
+      width: '400',
+      height: '40',
+      // content: "",
+      fontColor: 'FFFF00',
+      fontSize: '24',
+      fontType: 'KaiTi',
+      fontSpacing: 0,
+      coordinate: '000000',
+      url: '',
+      previewContent: '', //预览内容
+      ispreviewContent: -1,
+      dataForm: {},
+      templateContent: [],
+      templateDelContent: [],
+      dataRule: {
+        screenSize: [
+          {
+            required: true,
+            message: '请选择分辨率',
+            trigger: 'blur'
+          }
+        ],
+        CONTENT: [
+          {
+            required: true,
+            message: '请输入详细内容',
+            trigger: 'blur'
+          }
+        ],
+        fontColor: [
+          {
+            required: true,
+            message: '请填写字体颜色',
+            trigger: 'blur'
+          }
+        ],
+        fontSize: [
+          {
+            required: true,
+            message: '请填写字体大小',
+            trigger: 'blur'
+          }
+        ],
+        fontType: [
+          {
+            required: true,
+            message: '请选择字体类型',
+            trigger: 'change'
+          }
+        ],
+        fontSpacing: [
+          {
+            required: true,
+            message: '请选择字体间距',
+            trigger: 'change'
+          }
+        ],
+        rollSpeed: [
+          {
+            required: true,
+            message: '请填写滚动速度',
+            trigger: 'blur'
+          }
+        ],
+        stopTime: [
+          {
+            required: true,
+            message: '请填写停留时间',
+            trigger: 'blur'
+          }
+        ],
+        inScreenMode: [
+          {
+            required: true,
+            message: '请选择入屏方式',
+            trigger: 'blur'
+          }
+        ]
+      },
+      fontTypeOptions: [],
+      screenSizeOptions: [],
+      colorOptions: [],
+      isCurrencyOptions: [
+        {
+          code: '0',
+          content: '通用'
+        },
+        {
+          code: '1',
+          content: '仅为智能推荐模板'
+        }
+      ],
+      inScreenModeOptions: [],
+      imgSize: [
+        {
+          type: '1024*128',
+          name: '全屏'
+        },
+        {
+          type: '',
+          name: '正常'
+        }
+      ],
+      fontSizeOpt: [],
+      title: '选择图片',
+      loading: false,
+      isAdd: false,
+      iotTemplateCategoryList: [],
+      infoType: '',
+      devicePixelBoolean: false,
+      categoryRules: false
+    }
+  },
+  //   directives: {
+  //     drag: function (el, binding, vnode) {
+  //       let that = vnode.context;
+  //       let dragBox = el;
+  //       dragBox.onmousedown = (e) => {
+  //         // that.startTxt_x = dragBox.style.left.substring (0, dragBox.style.left.length - 2)
+  //         // that.startTxt_y = dragBox.style.left.substring (0, dragBox.style.top.length - 2)
+  //         let disX = e.clientX - dragBox.offsetLeft;
+  //         let disY = e.clientY - dragBox.offsetTop;
+  //         let clientHeight = dragBox.clientHeight;
+  //         let clientWidth = dragBox.clientWidth;
+  //         document.onmousemove = function (e) {
+  //           //鼠标移动触发事件，元素移到对应为位置
+  //           let left = e.pageX - disX;
+  //           let top = e.pageY - disY;
+  //           //限制区域
+  //           if (left <= 0) {
+  //             left = 0;
+  //           } else if (that.width - left - clientWidth <= 0) {
+  //             left = that.width - clientWidth;
+  //           }
+  //           if (top <= 0) {
+  //             top = 0;
+  //           } else if (that.height - top - clientHeight <= 0) {
+  //             top = that.height - clientHeight;
+  //           }
+  //           dragBox.style.left = left + "px";
+  //           dragBox.style.top = top + "px";
+  //           let a = (Array(3).join("0") + parseInt(left)).slice(-3);
+  //           let b = (Array(3).join("0") + parseInt(top)).slice(-3);
+  //           that.templateContent[dragBox.id].coordinate = a + b;
+  //         };
+  //         document.onmouseup = function () {
+  //           //鼠标抬起，清除绑定的事件，元素放置在对应的位置
+  //           document.onmousemove = null;
+  //           document.onmousedown = null;
+  //         };
+  //         e.preventDefault(); //阻止浏览器的默认事件
+  //       };
+  //     },
+  //   },
+  computed: {
+    divStyle: function () {
+      return {
+        width: this.width + 'px',
+        height: this.height + 'px'
+      }
+    }
+  },
+  watch: {
+    // "dataForm.CONTENT": {
+    //   deep: true,
+    //   handler: function (newValue, oldValue) {
+    //     this.dataForm.content1 = newValue;
+    //   },
+    // },
+    //   templateContent: {
+    //     deep: true,
+    //     handler: function (newValue, oldValue) {
+    //       // this.templateContent=newValue
+    //       var vm = this;
+    //       let inrex = [];
+    //       for (let index = vm.templateContent.length - 1; index >= 0; index--) {
+    //         if (
+    //           vm.templateContent[index].content == "" &&
+    //           (vm.templateContent[index].img == "" ||
+    //             vm.templateContent[index].imageName == "")
+    //         ) {
+    //           inrex.push(index);
+    //         }
+    //       }
+    //       for (let index = 0; index < inrex.length; index++) {
+    //         vm.templateContent.splice(inrex[index], 1);
+    //       }
+    //     },
+    //   },
+  },
+  mounted() {
+    this.getDicts('iot_template_category').then(res => {
+      this.iotTemplateCategoryList = res.data
+      // console.log(this.iotTemplateCategoryList, "this.iotTemplateCategoryList");
+    })
+  },
+  created() {
+    this.getDicts('iot_device_font_type').then(res => {
+      this.fontTypeOptions = res.data
+      // console.log(this.fontTypeOptions, "字体类型");
+    })
+    this.getDicts('iot_devices_font_color').then(res => {
+      this.colorOptions = res.data
+      // console.log(this.colorOptions, "字体颜色");
+    })
+    this.getDicts('iot_device_font_inScreen_mode').then(res => {
+      this.inScreenModeOptions = res.data
+      // console.log(this.inScreenModeOptions, "入屏方式");
+    })
+    this.getdevicessize()
+  },
+  methods: {
+    init(devicePixel, type, mode) {
+      if (devicePixel) {
+        this.devicePixelBoolean = true
+        this.dataForm.screenSize = devicePixel
+        this.boardWidth = devicePixel.split('*')[0]
+        this.boardHeight = devicePixel.split('*')[1]
+      } else {
+        this.devicePixelBoolean = false
+        ;(this.boardWidth = '400'), (this.boardHeight = '40')
+      }
+      // type 1:待下发信息  2:信息模板
+      // mode 1:工作台弹窗跳转 2：情报板管理跳转
+
+      this.infoType = type
+      if (mode == 1 || type == 1) {
+        this.categoryRules = false
+      } else {
+        this.categoryRules = true
+      }
+      // this.title = "新增";
+      this.isAdd = !this.dataForm.id
+      this.dialogVisible = true
+      this.templateDelContent = []
+      this.$nextTick(() => {
+        if (this.isAdd) {
+          this.$refs['dataForm'] && this.$refs['dataForm'].resetFields()
+          this.dataForm.id = ''
+          this.dataForm = {}
+          this.width = '400'
+          this.height = '40'
+          this.dataForm = {
+            CONTENT: '请输入内容',
+            COLOR: 'FFFF00',
+            FONT: '黑体',
+            SPEED: '1',
+            ACTION: '1',
+            // COORDINATE: "",
+            STATE: 'true',
+            STAY: '5',
+            screenSize: devicePixel,
+            formatStyle: '2'
+          }
+          this.content = '请输入内容'
+        } else {
+          // this.getInfo();
+          // this.$refs["dataForm"] && this.$refs["dataForm"].clearValidate();
+        }
+      })
+      if (this.dataForm.screenSize) {
+        this.getFontSizeList(1)
+      }
+      this.$forceUpdate()
+    },
+    getFontSizeList(type) {
+      this.getDicts('iot_device_font_size').then(res => {
+        this.fontSizeOpt = res.data
+        this.dataForm.FONT_SIZE = res.data[1].dictValue
+        if (type) {
+          this.alignment(2)
+        }
+      })
+
+      //TODO 测试数据 后期需转接口
+      /*getFontSizeByDevicePixel(this.dataForm.screenSize).then((res) => {
+        console.log(res, "根据分辨率筛字体大小");
+        this.fontSizeOpt = res.data.fontSizeList;
+        this.dataForm.FONT_SIZE = res.data.defaultFont;
+        if(type){
+          this.alignment(2)
+        }
+      });*/
+    },
+    // 查分辨率
+    getdevicessize() {
+      //TODO 测试数据 需删除走接口
+      this.screenSizeOptions = [
+        {
+          device_pixel: '192*160'
+        },
+        {
+          device_pixel: '480*48'
+        },
+        {
+          device_pixel: '768*64'
+        },
+        {
+          device_pixel: '160*80'
+        }
+      ]
+
+      // TODO 查分辨率接口
+      /*devicessize().then((res) => {
+        console.log(res, "查分辨率");
+        this.screenSizeOptions = res.data;
+      });*/
+    },
+    changeScreenSize(size) {
+      this.boardWidth = size.split('*')[0]
+      this.boardHeight = size.split('*')[1]
+      this.getFontSizeList()
+      this.$forceUpdate()
+    },
+    changeFontSize() {
+      console.log(this.dataForm.FONT_SIZE)
+      this.alignment(this.alignmentNum)
+      this.$forceUpdate()
+    },
+    keyDown(ev) {
+      this.alignment(this.alignmentNum)
+    },
+
+    //选择图片弹框关闭事件
+    close() {
+      this.checkList = []
+      this.dialogVisible = false
+    },
+    faceDrop(e) {
+      e.preventDefault() //阻止默认行为
+      this.listquery.push(this.curDragImgItem)
+    },
+    // 全选
+    allowDrop(e) {
+      e.preventDefault() //阻止默认行为
+    },
+    ondragenter(e) {
+      e.preventDefault() //阻止默认行为
+    },
+    // 获取信息
+    // getInfo() {
+    //   getTemplateInfo(this.dataForm.id).then((data) => {
+    //     this.dataForm = data.data;
+    //     this.width = this.dataForm.screenSize.split("*")[0];
+    //     this.height = this.dataForm.screenSize.split("*")[1];
+    //   });
+    //   getTemplateContent(this.dataForm.id).then((data) => {
+    //     this.templateContent = data.rows;
+
+    //     if (this.templateContent.length == 0) {
+    //       this.templateContent.push({
+    //         content: "",
+    //         fontColor: "yellow",
+    //         fontSize: "24",
+    //         fontType: "KaiTi",
+    //         fontSpacing: 0,
+    //         coordinate: "000000",
+    //         img: "",
+    //       });
+    //     }
+    //   });
+    // },
+    // 表单提交
+    async dataFormSubmitHandle() {
+      this.alignment()
+      // let valid = await this.$refs.dataForm.validate().catch(() => {
+      //   return this.$modal.msgError("校验错误");
+      // });
+      // if (!valid) return;
+      if (!this.dataForm.CONTENT.trim()) {
+        return this.$modal.msgError('当前输入内容为空')
+      } else if (!this.dataForm.category && this.infoType == 2) {
+        return this.$modal.msgError('情报板所属类别不能为空')
+      }
+      if (this.dataForm.CONTENT.indexOf('\\')>0) {
+        return this.$modal.msgError("内容不能含有特殊字符'\\'")
+      }
+      //走接口检验内容是否包含敏感字段
+      /*checkIotBoardContent(this.dataForm.CONTENT).then(response => {
+        if (response.data == 0) {
+          return this.$modal.msgError('当前发布内容包含敏感字段，请修改')
+        } else if (response.data == 2) {
+          return this.$modal.msgError('当前输入内容为空')
+        } else {
+          this.loading = true
+          // let templateId = "";
+          let method = 'put'
+          if (this.isAdd) {
+            if (this.infoType == 1) {
+              // 不走接口 存到待下发信息里
+              this.dataForm.STAY = Number(this.dataForm.STAY) * 10
+              this.$emit('addInfo', this.dataForm)
+            } else {
+              // 走接口 存到信息模板里
+              const params1 = {
+                applyType: '',
+                category: this.dataForm.category,
+                coordinate: '',
+                height: '',
+                id: '',
+                imageUrl: '',
+                imgSizeFrom: '',
+                inScreenMode: this.dataForm.ACTION,
+                remark: '',
+                screenSize: this.dataForm.screenSize,
+                stopTime: Number(this.dataForm.STAY) * 10,
+                vmsType: '',
+                width: ''
+              }
+              const templateContent = []
+              templateContent.push({
+                content: this.dataForm.CONTENT,
+                coordinate: this.dataForm.COORDINATE,
+                fontColor: this.getColorStyle(this.dataForm.COLOR),
+                fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
+                fontSpacing: this.dataForm.SPEED,
+                fontType: this.getFontStyle(this.dataForm.FONT)
+              })
+              // this.$emit("addInfoMode", this.dataForm);
+              addTemplate(params1, method).then(data => {
+                console.log(data, '新增口')
+                let params2 = {
+                  templateContent: templateContent,
+                  templateId: data
+                }
+                addTemplateContent(params2)
+                  .then(res => {
+                    if (res.code == 200) {
+                      this.$emit('getActiveNames')
+                      this.$message.success('添加成功')
+                    }
+                  })
+                  .catch(err => {
+                    throw err
+                  })
+              })
+            }
+          } else {
+            // // 修改
+            // editTemplate(this.dataForm).then((data) => {});
+            // this.templateContent.forEach((e) => {
+            //   e.img = e.imageName;
+            // });
+            // var params = {
+            //   templateContent: this.templateContent,
+            //   templateId: this.dataForm.id,
+            //   templateDelContent: this.templateDelContent,
+            // };
+            // editTemplateContent(params).then((response) => {
+            //   // console.log(response, "返回结果");
+            // });
+          }
+          this.loading = false
+          this.dialogVisible = false
+          this.isAdd = false
+          this.$emit('refreshDataList', this.dataForm)
+          var textBoard2 = document.getElementsByClassName('textBoard2')
+          textBoard2[0].style.position = 'absolute'
+        }
+      })*/
+
+      this.loading = true
+      // let templateId = "";
+      let method = 'put'
+      if (this.isAdd) {
+        if (this.infoType == 1) {
+          // 不走接口 存到待下发信息里
+          this.dataForm.STAY = Number(this.dataForm.STAY) * 10
+          this.$emit('addInfo', this.dataForm)
+        } else {
+          // 走接口 存到信息模板里
+          const params1 = {
+            applyType: '',
+            category: this.dataForm.category,
+            coordinate: '',
+            height: '',
+            id: '',
+            imageUrl: '',
+            imgSizeFrom: '',
+            inScreenMode: this.dataForm.ACTION,
+            remark: '',
+            screenSize: this.dataForm.screenSize,
+            stopTime: Number(this.dataForm.STAY) * 10,
+            vmsType: '',
+            width: ''
+          }
+          const templateContent = []
+          templateContent.push({
+            content: this.dataForm.CONTENT,
+            coordinate: this.dataForm.COORDINATE,
+            fontColor: this.dataForm.COLOR,
+            fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
+            fontSpacing: this.dataForm.SPEED,
+            fontType: this.getFontStyle(this.dataForm.FONT),
+            formatStyle: this.dataForm.formatStyle
+          })
+          // this.$emit("addInfoMode", this.dataForm);
+          addTemplate(params1, method).then(data => {
+            console.log(data, '新增口')
+            let params2 = {
+              templateContent: templateContent,
+              templateId: data
+            }
+            addTemplateContent(params2)
+              .then(res => {
+                if (res.code == 200) {
+                  this.$emit('getActiveNames')
+                  this.$message.success('添加成功')
+                }
+              })
+              .catch(err => {
+                throw err
+              })
+          })
+        }
+      } else {
+        // // 修改
+        // editTemplate(this.dataForm).then((data) => {});
+        // this.templateContent.forEach((e) => {
+        //   e.img = e.imageName;
+        // });
+        // var params = {
+        //   templateContent: this.templateContent,
+        //   templateId: this.dataForm.id,
+        //   templateDelContent: this.templateDelContent,
+        // };
+        // editTemplateContent(params).then((response) => {
+        //   // console.log(response, "返回结果");
+        // });
+      }
+      this.loading = false
+      this.dialogVisible = false
+      this.isAdd = false
+      this.$emit('refreshDataList', this.dataForm)
+      var textBoard2 = document.getElementsByClassName('textBoard2')
+      textBoard2[0].style.position = 'absolute'
+    },
+    /*********************************************业务代码***********************************************/
+    getFontStyle(font) {
+      if (font == '宋体') {
+        return 'Simsun'
+      } else if (font == '黑体') {
+        return 'SimHei'
+      } else if (font == '楷体') {
+        return 'KaiTi'
+      } else if (font == '仿宋') {
+        return 'FangSong'
+      } else if (font == '隶书') {
+        return 'LiSu'
+      }
+    },
+    getColorStyle(font) {
+      if (font == '黄色' || font == 'yellow') {
+        return '#FFFF00'
+      } else if (font == '红色' || font == 'red') {
+        return '#FF0000'
+      } else if (font == '绿色' || font == 'GreenYellow') {
+        return '#00FF00'
+      } else if (font == '蓝色' || font == 'blue') {
+        return '#0000FF'
+      } else {
+        return '#' + font
+      }
+    },
+    getTextAlign(font) {
+      if (font == '0') {
+        return 'left'
+      } else if (font == '1') {
+        return 'right'
+      } else {
+        return 'center'
+      }
+    },
+    // 文字对齐方式
+    alignment(alignmentNum) {
+      this.alignmentNum = alignmentNum
+      var divContent2 = document.getElementsByClassName('blackBoard2')
+      var textBoard2 = document.getElementsByClassName('textBoard2')
+      // 获取文字长宽
+      // let textWidth = textBoard2[0].offsetWidth;
+      // let textHeight = textBoard2[0].offsetHeight;
+      // // 获取黑盒子长宽
+      // let divWidth = divContent2[0].offsetWidth;
+      // let divHeight = divContent2[0].offsetHeight;
+      // var args =  [...divContent2];
+
+      switch (alignmentNum) {
+        // 左对齐
+        case 0:
+          divContent2[0].style.justifyContent = 'left'
+          divContent2[0].style.alignItems = 'center'
+          // textBoard2[0].style.textAlign = "left";
+          textBoard2[0].style.position = 'static'
+
+          break
+        // 左右居中
+        case 2:
+          divContent2[0].style.justifyContent = 'center'
+          divContent2[0].style.alignItems = 'center'
+          // textBoard2[0].style.textAlign = "center";
+          textBoard2[0].style.position = 'static'
+
+          break
+        // 右对齐
+        case 1:
+          divContent2[0].style.justifyContent = 'right'
+          divContent2[0].style.alignItems = 'center'
+          // textBoard2[0].style.textAlign = "right";
+          textBoard2[0].style.position = 'static'
+
+          break
+        // 上对齐
+        case 4:
+          divContent2[0].style.alignItems = 'flex-start'
+          textBoard2[0].style.position = 'static'
+
+          break
+        // 上下对齐
+        case 5:
+          divContent2[0].style.alignItems = 'center'
+          textBoard2[0].style.position = 'static'
+
+          break
+        // 下对齐
+        case 6:
+          divContent2[0].style.alignItems = 'flex-end'
+          textBoard2[0].style.position = 'static'
+
+          break
+      }
+      if (!alignmentNum) {
+        divContent2[0].style.alignItems = 'center'
+        textBoard2[0].style.position = 'static'
+      }
+      var textLeft = this.addZero(textBoard2[0].offsetLeft)
+      var textTop = this.addZero(textBoard2[0].offsetTop)
+      this.dataForm.COORDINATE = textLeft + textTop
+      if (alignmentNum != undefined) {
+        this.dataForm.formatStyle = alignmentNum
+      }
+      // console.log(this.dataForm.COORDINATE, "this.dataForm.COORDINATE");
+    },
+    addZero(num) {
+      return ('000' + num).slice(-3)
+    },
+    /*增加新的内容*/
+
+    /*删除内容*/
+    // delTemplateContent(data) {
+    //   for (let i = 0; i < this.templateContent.length; i++) {
+    //     if (
+    //       this.templateContent.indexOf(data) ==
+    //       this.templateContent.indexOf(this.templateContent[i])
+    //     ) {
+    //       if (this.templateContent.length == 1) {
+    //         this.$modal.msgError("至少保留一条数据");
+    //       } else {
+    //         if (data.id) {
+    //           this.templateDelContent.push(data);
+    //         }
+    //         this.templateContent.splice(this.templateContent.indexOf(data), 1);
+    //       }
+    //     }
+    //   }
+    // },
+    cliTest(data) {
+      this.ispreviewContent = this.templateContent.indexOf(data)
+    },
+    /********************图片上传*********************/
+    handleRemove(file, fileList) {},
+    handlePreview(file) {},
+    handleExceed(files, fileList) {
+      this.$modal.msgError(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`)
+    },
+
+    handleClose(done) {
+      var textBoard2 = document.getElementsByClassName('textBoard2')
+      textBoard2[0].style.position = 'absolute'
+      this.dialogVisible = false
+    }
+  }
+}
+</script>
+<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;
+  }
+}
+.previewContentCSS {
+  border: yellow 1px dashed;
+}
+/* 页脚 */
+.dialog-footer {
+  padding-left: 450px;
+}
+.photoOther img,
+.photo img {
+  max-width: 300px;
+  width: 100%;
+  // height: 80px;
+}
+.infoBoardButton {
+  display: flex;
+  justify-content: left;
+}
+.boardTextStyle {
+  line-height: 1;
+  caret-color: rgba(0, 0, 0, 0);
+  user-select: none;
+  position: absolute;
+  // max-height: 128px;
+  overflow: hidden;
+}
+.blackBoard2 {
+  background: #000000;
+  display: flex;
+  margin: 0 auto;
+  overflow: hidden;
+  position: relative;
+  // justify-content: center;
+  align-items: center;
+}
+::v-deep .el-card__body {
+  padding: 10px 0;
+}
+
+//
+::v-deep .el-dialog__header {
+  background-color: #145977;
+}
+::v-deep .el-dialog__body {
+  padding: 5px 20px;
+  background-color: #145977;
+}
+::v-deep .el-dialog__footer {
+  background-color: #145977;
+}
+::v-deep .el-card {
+  margin-top: 1vh;
+  background-color: #145977;
+  border: 2px solid #1d7890;
+}
+::v-deep .el-form-item__label {
+  color: #3de8ff;
+}
+::v-deep .el-input--mini .el-input__inner {
+  color: #fff;
+  background-color: #096d8c;
+}
+::v-deep .el-input-number.is-controls-right .el-input-number__decrease {
+  color: #fff;
+  background-color: #096d8c;
+}
+::v-deep .el-dialog__title {
+  color: #fff;
+}
+::v-deep .el-textarea__inner {
+  color: #fff;
+  background-color: #096d8c;
+  border-color: #096d8c;
+}
+::v-deep .el-input-number.is-controls-right .el-input-number__decrease {
+  border-color: transparent;
+}
+::v-deep .el-input-number.is-controls-right .el-input-number__increase {
+  border-color: transparent;
+  color: #fff;
+  background-color: #096d8c;
+}
+::v-deep .el-button--medium {
+  padding: 5px 25px;
+  font-size: 14px;
+  border-radius: 20px;
+  border: transparent;
+}
+::v-deep .el-radio-button__inner {
+  color: #ffffff;
+  background-color: pink;
+  border-color: #1d58a9;
+  -webkit-box-shadow: -1px 0 0 0 #1d58a9;
+  box-shadow: -1px 0 0 0 #1d58a9;
+  background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
+  border-radius: 3px 3px 3px 3px;
+  opacity: 1;
+  border: none !important;
+}
+::v-deep .infoBoardButton .el-radio-button--medium .el-radio-button__inner {
+  margin: 0 3px;
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/boardData.json b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/boardData.json
new file mode 100644
index 00000000..881570aa
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/boardData.json
@@ -0,0 +1 @@
+"{\"support\":{\"PROTOCOL_TYPE\":\"GUANGDIAN_V33\",\"FONT_SIZE\":\"3232,2424,1616\",\"DEVICEID\":\"102111101\",\"COLOR\":\"红色,绿色,蓝色,黄色\",\"FONT\":\"宋体,黑体,楷体\"},\"content\":[{\"ITEM000\":[{\"SPEED\":\"1\",\"FONT_SIZE\":\"3232\",\"ACTION\":\"1\",\"COLOR\":\"黄色\",\"STATE\":true,\"CONTENT\":\"进入隧道 请开大灯1\",\"COORDINATE\":\"063004\",\"FONT\":\"黑体\",\"STAY\":\"500\"}]}]}"
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/editInfo.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/editInfo.vue
new file mode 100644
index 00000000..9c2f25bc
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/editInfo.vue
@@ -0,0 +1,963 @@
+<template>
+  <div class="container infoBoardDialog">
+    <!-- 添加信息弹窗 -->
+    <el-dialog title="修改" :visible.sync="dialogVisible" width="43%" :before-close="closeDialog" :close-on-click-modal="false">
+      <div class="dialogStyleBox">
+        <div class="dialogLine"></div>
+        <div class="dialogCloseButton"></div>
+      </div>
+      <el-card class="box-card" style="display: flex;justify-content: center;">
+        <div class="blackBoard1" v-on:ondragenter="ondragenter" v-on:drop="faceDrop" v-on:dragover="allowDrop" :style="{
+            width: getDevicePixel(boardWidth, 0),
+            height: getDevicePixel(boardHeight, 1),
+            position: 'relative',
+
+            display:'flex',
+            'align-items': getTextAlign(dataForm.formatStyle),
+            'justify-content': getTextAlign(dataForm.formatStyle)
+          }">
+          <span class="textBoard1 boardTextStyle" :style="{
+              color: getColorStyle(dataForm.COLOR),
+              fontSize: getFontSize(dataForm.FONT_SIZE),
+              fontFamily: getFontStyle(dataForm.FONT),
+              zIndex: '1000',
+              position:'relative',
+              /*left: getCoordinate(dataForm.COORDINATE.substring(0, 3), 0),
+              top: getCoordinate(dataForm.COORDINATE.substring(3, 6), 1),*/
+              maxHeight:getDevicePixel(boardHeight, 1),
+            }" v-html="
+              dataForm.CONTENT.replace(/\n|\r\n/g, '<br>').replace(
+                / /g,
+                '&nbsp'
+              )
+            "></span>
+        </div>
+      </el-card>
+
+      <el-card>
+        <el-form :model="dataForm" :rules="dataRule" label-width="90px" ref="dataForm" size="mini">
+          <el-row :gutter="24" style="height: 45px">
+            <el-col :span="8" v-show="this.boardEmitItem.type == 2 || this.dataForm.category">
+              <el-form-item prop="category" label="所属类别">
+                <el-select v-model="dataForm.category" placeholder="请选择所属类别" size="mini" disabled>
+                  <el-option v-for="item in iotTemplateCategoryList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="16" class="infoBoardButton">
+              <el-radio-group v-model="radio1" @input="alignment(radio1)">
+                <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-button type="info" plain @click="alignment(6)" size="mini">下对齐</el-button>
+            <el-button type="info" plain @click="alignment(5)" size="mini">上下居中</el-button>
+            <el-button type="info" plain @click="alignment(4)" size="mini">上对齐</el-button> -->
+              <!-- <el-button type="primary" @click="alignment(1)" size="mini"
+                >左对齐</el-button
+              >
+              <el-button type="primary" @click="alignment(2)" size="mini"
+                >左右居中</el-button
+              >
+              <el-button type="primary" @click="alignment(3)" size="mini"
+                >右对齐</el-button
+              > -->
+
+              <!-- <el-button type="primary" plain @click="addCurrRow">添加</el-button> -->
+            </el-col>
+          </el-row>
+          <el-row :gutter="24" style="display: flex;
+    flex-wrap: wrap;width:100%">
+            <el-col :span="24">
+              <el-form-item label="详细内容" prop="CONTENT">
+                <el-input type="textarea" clearable id="textContent" placeholder="详细内容" v-model="dataForm.CONTENT" @keyup.native="keyDown($event)"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="COLOR" label="字体颜色">
+                <el-select v-model="dataForm.COLOR" filterable placeholder="请选择">
+                  <el-option v-for="item in colorOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="FONT_SIZE" label="字体大小">
+                <el-select v-model="dataForm.FONT_SIZE" style="width: 100%" @change="changeFontSize">
+                  <el-option v-for="item in fontSizeOpt" :key="item.dictLabel" :label="item.dictLabel" :value="item.dictLabel">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="FONT" label="字体类型">
+                <el-select v-model="dataForm.FONT" filterable placeholder="请选择">
+                  <el-option v-for="item in fontTypeOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <!-- <el-col :span="6">
+                <el-form-item prop="SPEED" label="字体间距">
+                  <el-input-number
+                    :min="0"
+                    controls-position="right"
+                    v-model="dataForm.SPEED"
+                    style="width: 100%"
+                  />
+                </el-form-item>
+              </el-col> -->
+            <!-- <el-col :span="24" v-show="templateContent.length > 1">
+                <el-divider></el-divider>
+              </el-col> -->
+
+            <!-- <el-col :span="6">
+                <el-form-item prop="rollSpeed" label="滚动速度">
+                  <el-input-number
+                    :min="0"
+                    controls-position="right"
+                    v-model="dataForm.rollSpeed"
+                    style="width: 100%"
+                  />
+                </el-form-item>
+              </el-col> -->
+            <el-col :span="8">
+              <el-form-item prop="STAY" label="停留时间(秒)">
+                <el-input-number :min="0" controls-position="right" v-model="dataForm.STAY" style="width: 100%" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="ACTION" label="入屏方式">
+                <el-select v-model="dataForm.ACTION" filterable placeholder="请选择">
+                  <el-option v-for="item in inScreenModeOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="screenSize" label="屏幕尺寸">
+                <el-input disabled v-model="dataForm.screenSize"></el-input>
+                <!-- <el-select
+                    @change="resolvingPowerType"
+                    v-model="dataForm.screenSize"
+                    filterable
+                    placeholder="请选择"
+                    disabled
+                  >
+                    <el-option
+                      v-for="item in screenSizeOptions"
+                      :key="item.type"
+                      :label="item.type"
+                      :value="item.type"
+                    >
+                    </el-option>
+                  </el-select> -->
+              </el-form-item>
+            </el-col>
+            <!-- <el-col :span="6">
+                <el-form-item prop="remark" label="备注">
+                  <el-input v-model="dataForm.remark" style="width: 100%" />
+                </el-form-item>
+              </el-col> -->
+          </el-row>
+        </el-form>
+      </el-card>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dataFormSubmitHandle()" v-loading="loading" class="submitButton" style="background-color: #10aac2;color:#fff;">确认
+        </el-button>
+        <el-button @click="closeDialog()" class="closeButton" style="background-color:#b5b5b6;color:#fff;">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+  <script>
+import {
+  // getTemplateInfo,
+  // addTemplate,
+  // addTemplateContent,
+  // editTemplateContent,
+  // editTemplate,
+  // deleteTemplate,
+  // getTemplateContent,
+  editTemplate,
+  editTemplateContent,
+  getGalleryList,
+  uploadBoardEditInfo,
+  getFontSizeByDevicePixel
+} from '@/api/board/template'
+import { checkIotBoardContent } from '@/api/board/vocabulary'
+import { HashMap } from '@/api/board/informationBoard'
+// 对象深拷贝
+export const deepClone = data => {
+  // 封装的判断数据类型的方法
+  var type = typeof data
+  var obj
+  if (type === 'array') {
+    obj = []
+  } else if (type === 'object') {
+    obj = {}
+  } else {
+    // 不再具有下一层次
+    return data
+  }
+  if (type === 'array') {
+    for (var i = 0, len = data.length; i < len; i++) {
+      obj.push(deepClone(data[i]))
+    }
+  } else if (type === 'object') {
+    for (var key in data) {
+      obj[key] = deepClone(data[key])
+    }
+  }
+  return obj
+}
+export default {
+  props: {
+    boardEmitItem: {
+      required: true,
+      type: Object
+    }
+  },
+
+  data() {
+    return {
+      radio1: '0',
+      alignmentNum: 2,
+      iotTemplateCategoryList: [],
+      content: '',
+
+      boardWidth: '',
+      boardHeight: '',
+      // boardEmitItem:this.boardEmitItem,
+      disabled: true,
+      checkList: [], //复选框一组
+      obj: '',
+      imgUrl: [],
+      imgUrlOther: [],
+      dialogVisible: false,
+      fileList: [
+        {
+          name: 'food.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        },
+        {
+          name: 'food2.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        }
+      ],
+      listquery: [], //拖拽图片
+      curDragImgItem: '',
+      visible: false,
+      startTxt_x: '000',
+      startTxt_y: '000',
+      width: '400',
+      height: '40',
+      content: '',
+      fontColor: 'FFFF00',
+      fontSize: '24',
+      fontType: 'KaiTi',
+      fontSpacing: 0,
+      coordinate: '000000',
+      url: '',
+      previewContent: '', //预览内容
+      ispreviewContent: -1,
+      dataForm: {
+        CONTENT: '',
+        STAY: '',
+        FONT: '',
+        COORDINATE: '',
+        formatStyle:'',
+
+        // id: "",
+        // screenSize: "400*40", //屏幕尺寸
+        // inScreenMode: "1", //入屏方式
+        // rollSpeed: "1000",
+        // stopTime: "500",
+        // applyType: "", //适用类型
+        // vmsType: "", //情报板类型
+        // remark: "", //备注
+        // imgSizeFrom: "", //尺寸大小
+        // imageUrl: "",
+        // height: "",
+        // width: "",
+        // coordinate: "", //起始点位置;前3位代表x点的位值，后3位代表y点的位置
+      },
+      templateContentModel: '',
+      templateContent: [],
+      templateDelContent: [],
+      fontTypeOptions: [],
+      screenSizeOptions: [
+        {
+          type: '400*40'
+        },
+        {
+          type: '128*64'
+        }
+      ],
+      colorOptions: [],
+      isCurrencyOptions: [
+        {
+          code: '0',
+          content: '通用'
+        },
+        {
+          code: '1',
+          content: '仅为智能推荐模板'
+        }
+      ],
+      inScreenModeOptions: [],
+      imgSize: [
+        {
+          type: '1024*128',
+          name: '全屏'
+        },
+        {
+          type: '',
+          name: '正常'
+        }
+      ],
+      fontSizeOpt: [],
+      title: '选择图片',
+      loading: false,
+      isAdd: false
+    }
+  },
+  //   directives: {
+  //     drag: function (el, binding, vnode) {
+  //       let that = vnode.context;
+  //       let dragBox = el;
+  //       dragBox.onmousedown = (e) => {
+  //         // that.startTxt_x = dragBox.style.left.substring (0, dragBox.style.left.length - 2)
+  //         // that.startTxt_y = dragBox.style.left.substring (0, dragBox.style.top.length - 2)
+  //         let disX = e.clientX - dragBox.offsetLeft;
+  //         let disY = e.clientY - dragBox.offsetTop;
+  //         let clientHeight = dragBox.clientHeight;
+  //         let clientWidth = dragBox.clientWidth;
+  //         document.onmousemove = function (e) {
+  //           //鼠标移动触发事件，元素移到对应为位置
+  //           let left = e.pageX - disX;
+  //           let top = e.pageY - disY;
+  //           //限制区域
+  //           if (left <= 0) {
+  //             left = 0;
+  //           } else if (that.width - left - clientWidth <= 0) {
+  //             left = that.width - clientWidth;
+  //           }
+  //           if (top <= 0) {
+  //             top = 0;
+  //           } else if (that.height - top - clientHeight <= 0) {
+  //             top = that.height - clientHeight;
+  //           }
+  //           dragBox.style.left = left + "px";
+  //           dragBox.style.top = top + "px";
+  //           let a = (Array(3).join("0") + parseInt(left)).slice(-3);
+  //           let b = (Array(3).join("0") + parseInt(top)).slice(-3);
+  //           that.templateContent[dragBox.id].coordinate = a + b;
+  //         };
+  //         document.onmouseup = function () {
+  //           //鼠标抬起，清除绑定的事件，元素放置在对应的位置
+  //           document.onmousemove = null;
+  //           document.onmousedown = null;
+  //         };
+  //         e.preventDefault(); //阻止浏览器的默认事件
+  //       };
+  //     },
+  //   },
+  computed: {
+    dataRule() {
+      return {
+        itemPropertyMap: null,
+        CONTENT: [
+          {
+            required: true,
+            message: '请输入详细内容',
+            trigger: 'blur'
+          },
+          { pattern: /^^((?!\\\\).)*/gi, message: '禁止输入特殊字符!', trigger: 'blur' }
+        ],
+        fontColor: [
+          {
+            required: true,
+            message: '请填写字体颜色',
+            trigger: 'blur'
+          }
+        ],
+        fontSize: [
+          {
+            required: true,
+            message: '请填写字体大小',
+            trigger: 'blur'
+          }
+        ],
+        fontType: [
+          {
+            required: true,
+            message: '请选择字体类型',
+            trigger: 'blur'
+          }
+        ],
+        fontSpacing: [
+          {
+            required: true,
+            message: '请选择字体间距',
+            trigger: 'blur'
+          }
+        ],
+        rollSpeed: [
+          {
+            required: true,
+            message: '请填写滚动速度',
+            trigger: 'blur'
+          }
+        ],
+        stopTime: [
+          {
+            required: true,
+            message: '请填写停留时间',
+            trigger: 'blur'
+          }
+        ],
+        inScreenMode: [
+          {
+            required: true,
+            message: '请选择入屏方式',
+            trigger: 'blur'
+          }
+        ]
+      }
+    },
+    divStyle: function () {
+      return {
+        width: this.width + 'px',
+        height: this.height + 'px'
+      }
+    }
+  },
+  watch: {
+    //   boardEmitItem(newval){
+    //       console.log(newval,"newval")
+    //       this.boardEmitItem = newval
+    //   }
+    // "dataForm.CONTENT": {
+    //   deep: true,
+    //   handler: function (newValue, oldValue) {
+    //     this.dataForm.content1 = newValue;
+    //   },
+    // },
+  },
+  created() {
+    console.log(this.boardEmitItem, 'this.boardEmitItem')
+    this.getDicts('iot_template_category').then(res => {
+      this.iotTemplateCategoryList = res.data
+      console.log(this.iotTemplateCategoryList, 'this.iotTemplateCategoryList')
+    })
+    this.getDicts('iot_device_font_type').then(res => {
+      this.fontTypeOptions = res.data
+      console.log(this.fontTypeOptions, '字体类型')
+    })
+    this.getDicts('iot_devices_font_color').then(res => {
+      this.colorOptions = res.data
+      console.log(this.colorOptions, '字体颜色')
+    })
+    // this.getDicts("iot_device_font_size").then((res) => {
+    //   this.fontSizeOpt = res.data;
+    //   console.log(this.fontSizeOpt, "字体大小");
+    // });
+    this.getDicts('iot_device_font_inScreen_mode').then(res => {
+      this.inScreenModeOptions = res.data
+      console.log(this.inScreenModeOptions, '入屏方式')
+    })
+    if (this.boardEmitItem) {
+      this.boardWidth = this.boardEmitItem.screenSize.split('*')[0]
+      this.boardHeight = this.boardEmitItem.screenSize.split('*')[1]
+      this.radio1 = this.boardEmitItem.formatStyle
+      this.init()
+    }
+  },
+  methods: {
+    init() {
+      this.title = '修改'
+
+      this.dialogVisible = true
+      this.itemPropertyMap = new HashMap()
+      this.alignmentNum = 2
+      this.dataForm = JSON.parse(JSON.stringify(this.boardEmitItem))
+      this.dataForm.COLOR = this.getColorValue(this.boardEmitItem.COLOR)
+      console.log(this.dataForm, 'this.dataForm')
+      // console.log('数据回显111111111', this.boardEmitItem)
+      // this.dataForm.FONT = this.getFont(this.boardEmitItem.FONT)
+      this.dataForm.CONTENT = JSON.parse(JSON.stringify(this.boardEmitItem.CONTENT.replace('<br>', '\n').replace(/ /g, ' ').replace('<r><n>', '\n')))
+      this.dataForm.STAY = JSON.parse(JSON.stringify(Number(this.boardEmitItem.STAY) / 10))
+      this.getFontSizeList()
+    },
+    getColorValue(color) {
+      if (color == '#00FF00') {
+        return '绿色'
+      } else {
+        return color
+      }
+    },
+    getFontSizeList() {
+      this.getDicts('iot_device_font_size').then(res => {
+        this.fontSizeOpt = res.data
+      })
+
+      /* getFontSizeByDevicePixel(this.dataForm.screenSize).then((res) => {
+        console.log(res, "根据分辨率筛字体大小");
+        this.fontSizeOpt = res.data.fontSizeList;
+      });*/
+    },
+    changeFontSize() {
+      setTimeout(() => {
+        this.alignment(this.alignmentNum)
+      }, 100)
+    },
+    alignment(alignmentNum) {
+      var divContent1 = document.getElementsByClassName('blackBoard1')
+      var textBoard1 = document.getElementsByClassName('textBoard1')
+
+      switch (alignmentNum) {
+        // 左对齐
+        case 0:
+          textBoard1[0].style.position = 'static'
+          divContent1[0].style.justifyContent = 'left'
+          divContent1[0].style.alignItems = 'center'
+          break
+        // 左右居中
+        case 2:
+          textBoard1[0].style.position = 'static'
+          divContent1[0].style.justifyContent = 'center'
+          divContent1[0].style.alignItems = 'center'
+          break
+        // 右对齐
+        case 1:
+          divContent1[0].style.justifyContent = 'right'
+          divContent1[0].style.alignItems = 'center'
+          textBoard1[0].style.position = 'static'
+          break
+        // 上对齐
+        case 4:
+          divContent1[0].style.alignItems = 'flex-start'
+          textBoard1[0].style.position = 'static'
+
+          break
+        // 上下对齐
+        case 5:
+          divContent1[0].style.alignItems = 'center'
+          textBoard1[0].style.position = 'static'
+
+          break
+        // 下对齐
+        case 6:
+          divContent1[0].style.alignItems = 'flex-end'
+          textBoard1[0].style.position = 'static'
+
+          break
+      }
+
+      var textLeft = this.addZero(JSON.parse(JSON.stringify(textBoard1[0].offsetLeft)))
+      var textTop = this.addZero(textBoard1[0].offsetTop)
+
+      this.dataForm.COORDINATE = textLeft + textTop
+      this.dataForm.formatStyle = alignmentNum
+    },
+    addZero(num) {
+      if (num < 0) {
+        return '000'
+      } else {
+        return ('000' + num).slice(-3)
+      }
+    },
+    faceDrop(e) {
+      e.preventDefault() //阻止默认行为
+      this.listquery.push(this.curDragImgItem)
+    },
+    /* 拆分分辨率大小 */
+    // resolvingPowerType(data) {
+    //   let a = [];
+    //   a = data.split("*");
+    //   this.width = a[0];
+    //   this.height = a[1];
+    // },
+    // 全选
+    allowDrop(e) {
+      e.preventDefault() //阻止默认行为
+    },
+    ondragenter(e) {
+      e.preventDefault() //阻止默认行为
+    },
+    keyDown(ev) {
+      this.alignment(this.alignmentNum)
+    },
+    // 表单确认
+    dataFormSubmitHandle() {
+      console.log(this.dataForm.type, 'this.dataForm.type')
+      if (!this.dataForm.CONTENT.trim()) {
+        return this.$modal.msgError('当前输入内容为空')
+      }
+
+      if (this.dataForm.CONTENT.indexOf('\\') > 0) {
+        return this.$modal.msgError("内容不能含有特殊字符'\\'")
+      }
+      this.loading = true
+      console.log(this.dataForm, '点击修改 表单')
+
+      this.loading = false
+      this.isAdd = false
+      if (this.dataForm.type == 1) {
+        this.dataForm.STAY = Number(this.dataForm.STAY) * 10
+        this.$emit('receiveForm', this.dataForm)
+        console.log(this.dataForm, 'this.dataForm修改后给父组件传表单内容')
+      } else {
+        const tcontent = {
+          content: this.dataForm.CONTENT,
+          text: this.dataForm.CONTENT,
+          coordinate: this.dataForm.COORDINATE,
+          createBy: null,
+          createTime: null,
+          fontColor: this.dataForm.COLOR,
+          fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
+          fontSpacing: this.dataForm.SPEED,
+          fontType: this.dataForm.FONT,
+          height: null,
+          id: this.dataForm.id,
+          imageUrl: null,
+          params: {},
+          remark: null,
+          searchValue: null,
+          templateId: this.dataForm.id,
+          updateBy: null,
+          updateTime: null,
+          width: null
+        }
+        const param = {
+          applyType: '',
+          category: this.dataForm.category,
+          createBy: null,
+          createTime: null,
+          dictLable: null,
+          id: this.dataForm.id,
+          inScreenMode: this.dataForm.ACTION,
+          isCurrency: null,
+          params: {},
+          remark: '',
+          screenSize: this.dataForm.screenSize,
+          searchValue: null,
+          stopTime: Number(this.dataForm.STAY) * 10,
+          tcontents: null,
+          templateType: null,
+          updateBy: null,
+          updateTime: null,
+          vmsType: '',
+          tcontent: tcontent,
+          templateId: this.dataForm.id
+        }
+        editTemplate(param).then(data => {})
+        let templateContent = []
+        templateContent.push({
+          content: this.dataForm.CONTENT,
+          fontColor: this.dataForm.COLOR,
+          fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
+          fontType: this.dataForm.FONT,
+          fontSpacing: this.dataForm.SPEED,
+          coordinate: this.dataForm.COORDINATE,
+          id: this.dataForm.tcontentsId,
+          templateId: this.dataForm.id,
+          formatStyle: this.dataForm.formatStyle
+        })
+
+        var params = {
+          templateContent: templateContent,
+          templateId: this.dataForm.id,
+          templateDelContent: []
+        }
+        console.log(params, 'params')
+        editTemplateContent(params).then(response => {
+          console.log(response, '返回结果')
+          this.$modal.msgSuccess('修改成功')
+        })
+        this.$forceUpdate()
+      }
+      this.closeDialog()
+
+      /*checkIotBoardContent(this.dataForm.CONTENT).then(response => {
+        if (response.data == 0) {
+          return this.$modal.msgError('当前发布内容包含敏感字段，请修改')
+        } else if (response.data == 2) {
+          return this.$modal.msgError('当前输入内容为空')
+        } else {
+          this.loading = true
+          console.log(this.dataForm, '点击修改 表单')
+
+          this.loading = false
+          this.isAdd = false
+          if (this.dataForm.type == 1) {
+            this.dataForm.STAY = Number(this.dataForm.STAY) * 10
+            this.$emit('receiveForm', this.dataForm)
+            console.log(this.dataForm, 'this.dataForm修改后给父组件传表单内容')
+          } else {
+            const tcontent = {
+              content: this.dataForm.CONTENT,
+              text: this.dataForm.CONTENT,
+              coordinate: this.dataForm.COORDINATE,
+              createBy: null,
+              createTime: null,
+              fontColor: this.dataForm.COLOR,
+              fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
+              fontSpacing: this.dataForm.SPEED,
+              fontType: this.dataForm.FONT,
+              height: null,
+              id: this.dataForm.id,
+              imageUrl: null,
+              params: {},
+              remark: null,
+              searchValue: null,
+              templateId: this.dataForm.id,
+              updateBy: null,
+              updateTime: null,
+              width: null
+            }
+            const param = {
+              applyType: '',
+              category: this.dataForm.category,
+              createBy: null,
+              createTime: null,
+              dictLable: null,
+              id: this.dataForm.id,
+              inScreenMode: this.dataForm.ACTION,
+              isCurrency: null,
+              params: {},
+              remark: '',
+              screenSize: this.dataForm.screenSize,
+              searchValue: null,
+              stopTime: Number(this.dataForm.STAY) * 10,
+              tcontents: null,
+              templateType: null,
+              updateBy: null,
+              updateTime: null,
+              vmsType: '',
+              tcontent: tcontent,
+              templateId: this.dataForm.id
+            }
+            editTemplate(param).then(data => {})
+            let templateContent = []
+            templateContent.push({
+              content: this.dataForm.CONTENT,
+              fontColor: this.dataForm.COLOR,
+              fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
+              fontType: this.dataForm.FONT,
+              fontSpacing: this.dataForm.SPEED,
+              coordinate: this.dataForm.COORDINATE,
+              id: this.dataForm.tcontentsId,
+              templateId: this.dataForm.id
+            })
+
+            var params = {
+              templateContent: templateContent,
+              templateId: this.dataForm.id,
+              templateDelContent: []
+            }
+            console.log(params, 'params')
+            editTemplateContent(params).then(response => {
+              console.log(response, '返回结果')
+              this.$modal.msgSuccess('修改成功')
+            })
+            this.$forceUpdate()
+          }
+          this.closeDialog()
+        }
+      })*/
+    },
+    getFontStyle(font) {
+      if (font == '宋体' || font == '3') {
+        return 'Simsun'
+      } else if (font == '黑体' || font == '1') {
+        return 'SimHei'
+      } else if (font == '楷体' || font == '2') {
+        return 'KaiTi'
+      } else if (font == '仿宋' || font == '4') {
+        return 'FangSong'
+      } else if (font == '隶书' || font == '5') {
+        return 'LiSu'
+      }
+    },
+    getColorStyle(font) {
+      if (font == '黄色' || font == 'yellow') {
+        return '#FFFF00'
+      } else if (font == '红色' || font == 'red') {
+        return '#FF0000'
+      } else if (font == '绿色' || font == 'GreenYellow') {
+        return '#00FF00'
+      } else if (font == '蓝色' || font == 'blue') {
+        return '#0000FF'
+      } else {
+        return '#' + font
+      }
+    },
+    closeDialog() {
+      this.dialogVisible = false
+      this.$emit('dialogClose')
+    },
+    getDevicePixel(devicePixel, num) {
+      if (num == 0) {
+        if (devicePixel > 768) {
+          return 768 + 'px'
+        } else {
+          return devicePixel + 'px'
+        }
+      } else if (num == 1) {
+        if (devicePixel > 160) {
+          return 160 + 'px'
+        } else {
+          return devicePixel + 'px'
+        }
+      }
+    },
+    getCoordinate(coordinate, num) {
+      if (num == 0) {
+        if (this.boardWidth > 768) {
+          let i = this.boardWidth / 768
+          console.log(coordinate / i, 'width')
+          return coordinate / i + 'px'
+        } else {
+          return coordinate + 'px'
+        }
+      } else if (num == 1) {
+        if (this.boardHeight > 128) {
+          let i = this.boardHeight / 128
+          console.log(coordinate / i, 'height')
+          return coordinate / i + 'px'
+        } else {
+          return coordinate + 'px'
+        }
+      }
+    },
+
+    getTextAlign(font) {
+      if (font == '0') {
+        return 'left'
+      } else if (font == '1') {
+        return 'right'
+      } else {
+        return 'center'
+      }
+    },
+    getFontSize(size) {
+      if (this.boardWidth > 768) {
+        let i = this.boardWidth / 768
+        return size.substring(0, 2) / i - 2 + 'px'
+      } else {
+        return size
+      }
+    }
+  }
+}
+</script>
+  <style lang="scss" scoped>
+.previewContentCSS {
+  border: yellow 1px dashed;
+}
+/* 页脚 */
+.dialog-footer {
+  padding-left: 450px;
+}
+.photoOther img,
+.photo img {
+  max-width: 300px;
+  width: 100%;
+  // height: 80px;
+}
+.infoBoardButton {
+  ::v-deep .el-radio-button--medium .el-radio-button__inner {
+    height: 3vh;
+    line-height: 3vh;
+    padding: 0 0.6vw;
+    font-size: 0.7vw;
+  }
+}
+::v-deep .el-card__body {
+  padding: 10px 0;
+}
+.boardTextStyle {
+  line-height: 1;
+  caret-color: rgba(0, 0, 0, 0);
+  user-select: none;
+  position: absolute;
+  // max-height: 128px;
+  overflow: hidden;
+}
+.blackBoard1 {
+  background: #000000;
+  /*display: flex;
+  margin: 0 auto;
+  overflow: hidden;
+  position: relative;
+  // text-align: center;
+  align-items: center;*/
+}
+//
+::v-deep .el-dialog__header {
+  background-color: #145977;
+}
+::v-deep .el-dialog__body {
+  padding: 5px 20px;
+  background-color: #145977;
+}
+::v-deep .el-dialog__footer {
+  background-color: #145977;
+}
+::v-deep .el-card {
+  margin-top: 1vh;
+  background-color: #145977;
+  border: 2px solid #1d7890;
+}
+::v-deep .el-form-item__label {
+  color: #3de8ff;
+}
+::v-deep .el-input--mini .el-input__inner {
+  color: #fff;
+  background-color: #096d8c;
+}
+::v-deep .el-input-number.is-controls-right .el-input-number__decrease {
+  color: #fff;
+  background-color: #096d8c;
+}
+::v-deep .el-dialog__title {
+  color: #fff;
+}
+::v-deep .el-textarea__inner {
+  color: #fff;
+  background-color: #096d8c;
+  border-color: #096d8c;
+}
+::v-deep .el-input-number.is-controls-right .el-input-number__decrease {
+  border-color: transparent;
+}
+::v-deep .el-input-number.is-controls-right .el-input-number__increase {
+  border-color: transparent;
+  color: #fff;
+  background-color: #096d8c;
+}
+::v-deep .el-button--medium {
+  padding: 5px 25px;
+  font-size: 14px;
+  border-radius: 20px;
+  border: transparent;
+}
+::v-deep .el-radio-button__inner {
+  color: #ffffff;
+  background-color: pink;
+  border-color: #1d58a9;
+  -webkit-box-shadow: -1px 0 0 0 #1d58a9;
+  box-shadow: -1px 0 0 0 #1d58a9;
+  background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
+  border-radius: 3px 3px 3px 3px;
+  opacity: 1;
+  border: none !important;
+}
+::v-deep .infoBoardButton .el-radio-button--medium .el-radio-button__inner {
+  margin: 0 3px;
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
new file mode 100644
index 00000000..af4e24ab
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
@@ -0,0 +1,2009 @@
+<template>
+  <div class="container infoBoardBox" style="height:94vh;;background-color: #11232a;">
+    <div style="
+        height: 100%;
+        margin-left: 0px;
+        margin-right: 0px;
+        display: flex;
+        justify-content: space-between;
+      ">
+      <div style="width: 20%" class="verticalBox">
+        <div style="width:100%;height:100%;padding:1vh 0.2vw;">
+          <div style="width:100%;height:100%;background-color:#112d3b;padding:0 0 1vh 0;">
+            <div class="bigTitle qbbBigTitle">
+              <img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt="">
+              <div>情报板列表</div>
+              <img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt="">
+            </div>
+            <el-form ref="form" style="padding:0 0.5vw;" :model="form">
+              <el-form-item style="margin-bottom: 12px;">
+                <el-select v-model="form.eqDirection" size="medium" placeholder="请选择方向" style="overflow: hidden;width: 100%;">
+                  <el-option v-for="item in boardDirectionList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" @click.native="changeDirection(item.dictValue)" />
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-collapse v-model="iotBoardActive" accordion @change="handleChange">
+                  <el-collapse-item v-for="(item, index) in iotBoardList" :key="index" :title="item.label" :name="item.devicePixel">
+                    <div>
+                      <!-- <el-checkbox style="width: 100%" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
+                      </el-checkbox>-->
+                      <div style="margin: 5px 0"></div>
+                      <el-checkbox-group class="checkbox" v-model="checkedCities" @change="handleCheckedCitiesChange" :max="1">
+                        <el-checkbox v-for="(itm, index) in item.list" :label="itm.deviceId" :key="index">
+                          <el-tooltip :content="itm.ip" placement="top">
+                            <div>{{ itm.deviceName }}</div>
+                          </el-tooltip>
+                          <el-tooltip content="回读当前信息" placement="top">
+                            <el-button class="el-icon-tickets huiduButton" @click.stop.prevent="onSubmit(itm.deviceId)" :disabled="submitButton"></el-button>
+                          </el-tooltip>
+                        </el-checkbox>
+                      </el-checkbox-group>
+                    </div>
+                  </el-collapse-item>
+                </el-collapse>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+      </div>
+      <div style="width: 37.8%" class="verticalBox verticalBoxBorderLeft">
+        <div style="width:100%;height:100%;padding:1vh 0.2vw;">
+          <div style="width:100%;height:100%;background-color:#112d3b;">
+
+            <div class="bigTitle awaitBigTitle">
+              <div>
+                <div style="display: flex;justify-content: start !important;align-items: center;">
+                  <img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt="">
+                  <div>情报板列表</div>
+                  <span v-if="form.devicePixel">【 {{ form.devicePixel }}】</span>
+                </div>
+                <img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt="">
+              </div>
+
+              <div class="controlBox">
+                <el-button type="primary" @click.native="openDialogVisible(1, 2)" :disabled="form.devicePixel ? false : disabledButton">添加信息</el-button>
+                <el-button type="primary" @click="publishInfo" :disabled="
+                !form.devicePixel ||
+                contentList.length == 0 ||
+                checkedCities.length == 0
+              ">发布信息</el-button>
+              </div>
+            </div>
+            <div class="contentBox">
+              <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.devicePixel, 'width') + 'px',
+                      height: getScreenSize(form.devicePixel, '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.devicePixel, 'height') + 'px',
+                      }" class="boardTextStyle" v-html="
+                        scope.row.CONTENT? scope.row.CONTENT.replace(/\n|\r\n/g,'<br>').replace(/ /g, '&nbsp'): ''"></span>
+                      </div>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column width="130">
+                  <template slot-scope="scope">
+                    <div class="menuBox">
+                      <!-- <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>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div style=" width: 42.2%" class="verticalBox verticalBoxBorderLeft">
+        <div style="width:100%;height:100%;padding:1vh 0.2vw;">
+          <div style="width:100%;height:100%;background-color:#112d3b">
+
+            <div class="bigTitle awaitBigTitle">
+              <div>
+                <div style="display: flex;justify-content: start !important;align-items: center;">
+                  <img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt="">
+                  <div>情报板列表</div>
+                  <span v-if="form.devicePixel">【 {{ form.devicePixel }}】</span>
+                </div>
+                <img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt="">
+                <!-- <span>信息模板</span>
+            <span v-if="form.devicePixel">【 {{ form.devicePixel }}】</span> -->
+              </div>
+              <div class="controlBox">
+                <el-button type="primary" @click="openDialogVisible(2, 2)">添加模板</el-button>
+              </div>
+            </div>
+            <div class="templateBox">
+              <el-collapse v-model="activeNames">
+                <el-collapse-item v-for="(item, index) in iotTemplateCategoryList" :key="index" :title="item.dictLabel" :name="item.dictValue">
+                  <div v-for="(itm, indx) in item.list" :key="indx" class="con" :style="{
+                  fontSize: getFontSize(
+                    itm.tcontents[0].fontSize,
+                    itm.screenSize
+                  ),
+                  color: getColorStyle(itm.tcontents[0].fontColor),
+                  fontFamily: itm.tcontents[0].fontType,
+                }">
+                    <div class="templateTitle">
+                      <div :style="{
+                      width: getScreenSize(itm.screenSize, 'width') + 'px',
+                      height: getScreenSize(itm.screenSize, 'height') + 'px',
+                      'display': 'flex',
+                      'align-items': 'center',
+                      'justify-content': getTextAlign(itm.tcontents[0].formatStyle),
+                      position: 'relative',
+
+                    }" style="background: black; position: relative;overflow: hidden;">
+                        <span :style="{
+                        /*left: getCoordinate(
+                          itm.tcontents[0].coordinate.substring(0, 3),
+                          'left',
+                          itm.screenSize
+                        ),
+                        top: getCoordinate(
+                          itm.tcontents[0].coordinate.substring(3, 6),
+                          'top',
+                          itm.screenSize
+                        ),*/
+                        position:'relative',
+                        maxHeight:getScreenSize(itm.screenSize, 'height') + 'px',
+                      }" class="boardTextStyle" v-html="
+                        itm.tcontents[0].content
+                          .replace(/\n|\r\n/g, '<br>')
+                          .replace(/ /g, '&nbsp')
+                      "></span>
+                      </div>
+                    </div>
+                    <div class="menuBox">
+                      <el-tooltip content="加入待下发信息" placement="top">
+                        <div @click="arrowLeft(itm)" :class="
+                        disabledButton && !form.devicePixel
+                          ? 'disabledClass'
+                          : ''
+                      " style="cursor: pointer" class="toLeft"></div>
+                      </el-tooltip>
+                      <el-tooltip content="编辑" placement="top">
+                        <div @click="editOutline(itm, indx, 2)" class="edit"></div>
+                      </el-tooltip>
+                      <el-tooltip content="删除" placement="top">
+                        <div @click="handleDelete(itm)" class="del"></div>
+                      </el-tooltip>
+                    </div>
+                  </div>
+                </el-collapse-item>
+              </el-collapse>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-dialog title="提示" :visible.sync="arrowRightVisible" width="20%" :before-close="dialogClose">
+      <el-row>
+        <el-col :span="18">
+          <el-select v-model="toRightCategory" placeholder="请选择所属类别">
+            <el-option v-for="item in iotTemplateCategoryList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
+            </el-option>
+          </el-select>
+        </el-col>
+        <el-col :span="4">
+          <el-button type="primary" plain @click="arrowRightAllVmsTemplate">
+            确定
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-dialog>
+    <addinfo ref="addinfo" @addInfo="addInfo" @getActiveNames="getActiveNames"></addinfo>
+    <editInfo :boardEmitItem="this.boardEmitItem" @receiveForm="receiveForm" v-if="this.showEmit" @dialogClose="dialogClose"></editInfo>
+  </div>
+</template>
+<script>
+import Sortable from 'sortablejs'
+import addinfo from './addinfo'
+import editInfo from './editInfo'
+import boardData from './boardData'
+import { getUserDeptId } from '@/api/system/user'
+import { listTunnels, devicessize, information, getBoardInfo, getBoardEditInfo, getIotBoardList, 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'
+
+// 对象深拷贝
+export const deepClone = data => {
+  // 封装的判断数据类型的方法
+  var type = typeof data
+  var obj
+  if (type === 'array') {
+    obj = []
+  } else if (type === 'object') {
+    obj = {}
+  } else {
+    // 不再具有下一层次
+    return data
+  }
+  if (type === 'array') {
+    for (var i = 0, len = data.length; i < len; i++) {
+      obj.push(deepClone(data[i]))
+    }
+  } else if (type === 'object') {
+    for (var key in data) {
+      obj[key] = deepClone(data[key])
+    }
+  }
+  return obj
+}
+
+export default {
+  name: 'Device',
+  components: {
+    addinfo,
+    editInfo
+  },
+  dicts: ['iot_board_direction'],
+
+  data() {
+    return {
+      toggleIndex: 0,
+      toRightCategory: '', //向右类别绑定
+      arrowRightVisible: false, //向右类别弹窗
+      loading: false,
+      submitButton: false, //回读禁用
+      iotBoardActive: '', //情报板设备 绑定
+      iotBoardList: [], //情报板设备列表
+      boardDirectionList: [], //方向
+      userQueryParams: {
+        userName: this.$store.state.user.name
+      }, //用户
+      devicePixelMode: null, //分辨率
+      editType: 0,
+      disabledButton: true, //禁用按钮
+      showEmit: false, //修改组件
+      index_: 0, //待下发 编辑项index
+      index: 0, //模板 编辑项 index
+      deviceId: '', //情报板id
+      boardEmitItem: null, //修改彈窗的數據
+      userDeptId: '', //管理站id
+      deptList: [], //分中心下拉框
+      mechanismList: [], //管理机构下拉框
+      devicessizeList: [], //分辨率下拉框
+      deviceList: [], //分辨率
+      checkedCities: [], //多选 选中项
+      form: {
+        company: null,
+        mechanism: null,
+        localInfo: null,
+        devicePixel: null
+      }, //情报板列表表单
+      supplier: null, //报文类型
+      activeNames: [], //模板 展开项
+      iotTemplateCategoryList: [], //模板
+      checkAll: false,
+      isIndeterminate: false,
+      contentList: [], //待下发数据
+      toRightItem: {} //向右添加到模板的数据
+    }
+  },
+  watch: {
+    contentList: function (newVal, oldVal) {
+      this.$nextTick(() => {
+        this.rowDrop()
+      })
+    },
+    iotBoardList: function (newVal, oldVal) {
+      console.log(newVal, 'iotBoardActive')
+      if (newVal.length == 0) {
+        this.form.devicePixel = ''
+        this.allVmsTemplate('no')
+      }
+    }
+    // // 改变方向
+    // 'form.eqDirection':function(newVal,oldVal){
+    //   console.log(newVal,"newVal")
+    //   this.iotBoardList = []
+    // }
+  },
+  created() {
+    this.getInfoMode()
+    this.changeDirection()
+    this.getBoardPixel()
+  },
+  mounted() {
+    // this.rowDrop();
+    this.hideScrollFn()
+  },
+
+  methods: {
+    // 获取信息模板字典表
+    getBoardPixel() {
+      this.iotBoardList = []
+      this.getDicts('iot_board_pixel').then(res => {
+        res.data.forEach(item =>{
+          this.iotBoardList.push({
+            devicePixel: item.dictValue,
+            label: item.dictLabel,
+            list: []
+          })
+        })
+      })
+    },
+    // 获取信息模板字典表
+    getInfoMode() {
+      this.getDicts('iot_template_category').then(res => {
+        this.iotTemplateCategoryList = res.data
+      })
+    },
+
+    // 行拖拽
+    rowDrop() {
+      if (JSON.parse(JSON.stringify(this.contentList)).length > 0) {
+        // 要侦听拖拽响应的DOM对象
+        const tbody = document.querySelector('.contentBox .el-table__body-wrapper tbody')
+        const _this = this
+        Sortable.create(tbody, {
+          // 结束拖拽后的回调函数
+          onEnd({ newIndex, oldIndex }) {
+            const currentRow = _this.contentList.splice(oldIndex, 1)[0]
+            _this.contentList.splice(newIndex, 0, currentRow)
+          }
+        })
+      }
+    },
+    //改变方向
+    changeDirection(val) {
+      this.getDicts('iot_board_direction').then(res => {
+        this.boardDirectionList = res.data
+
+        if (val) {
+          this.form.eqDirection = val
+        } else {
+          this.form.eqDirection = res.data[0].dictValue
+        }
+
+        this.getIotBoard()
+      })
+    },
+
+    // 情报板设备 折叠面板
+    getIotBoard() {
+      this.checkAll = false
+
+      //TODO 测试数据 需删除走接口
+   /*   let testData = [
+        {
+          devicePixel: '768*64',
+          label: '门架板768*64',
+          list: [
+            {
+              searchValue: null,
+              createBy: null,
+              createTime: null,
+              updateBy: null,
+              updateTime: null,
+              remark: null,
+              params: {},
+              deviceId: 595,
+              deviceName: '门架式可变信息标志K57+595',
+              brandId: 4,
+              iotBoardBrandName: {
+                brandId: 4,
+                brandName: '光电比特'
+              },
+              routeId: 17,
+              routeDirection: '济南方向',
+              deviceMarkingName: null,
+              deviceTypeId: 202010001,
+              deviceTypeNumber: 202010004,
+              deviceModelId: null,
+              factoryLibrary: null,
+              userUnitId: 555503,
+              operatorId: null,
+              longitude: '117.9554825',
+              latitude: '36.84254887',
+              firmId: 18,
+              purchaseDate: '2022-12-14T16:06:03.000+08:00',
+              warrantyYears: null,
+              unitPrice: null,
+              runStatus: 1,
+              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
+              deviceStatus: '1',
+              installDate: '2022-12-14T16:06:03.000+08:00',
+              maintainId: 2,
+              collarAgencyId: 555503,
+              pileNumber: 'K57+595',
+              manageAgencyId: 'YG11002',
+              producteDate: null,
+              repairDate: null,
+              operateDate: null,
+              serviceLife: null,
+              storageDate: null,
+              isMonitor: 1,
+              isConfig: 1,
+              localInfo: 36,
+              routeNumber: null,
+              routeName: null,
+              deviceIp: '10.0.81.62',
+              devicePort: null,
+              devicePixel: '768*64',
+              userName: null,
+              passWord: null,
+              protocolName: null,
+              deviceTypeIds: null,
+              lUserID: null,
+              lAlarmHandle: null,
+              lUserIDStr: null,
+              lAlarmHandleStr: null,
+              eqDirection: null,
+              iotDeviceType: null
+            },
+            {
+              searchValue: null,
+              createBy: null,
+              createTime: null,
+              updateBy: null,
+              updateTime: null,
+              remark: null,
+              params: {},
+              deviceId: 600,
+              deviceName: '门架式可变信息标志K71+600',
+              brandId: 4,
+              iotBoardBrandName: {
+                brandId: 4,
+                brandName: '光电比特'
+              },
+              routeId: 17,
+              routeDirection: '济南方向',
+              deviceMarkingName: null,
+              deviceTypeId: 202010001,
+              deviceTypeNumber: 202010004,
+              deviceModelId: null,
+              factoryLibrary: null,
+              userUnitId: 555503,
+              operatorId: null,
+              longitude: '117.9554825',
+              latitude: '36.84254887',
+              firmId: 18,
+              purchaseDate: '2022-12-14T16:06:03.000+08:00',
+              warrantyYears: null,
+              unitPrice: null,
+              runStatus: 1,
+              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
+              deviceStatus: '1',
+              installDate: '2022-12-14T16:06:03.000+08:00',
+              maintainId: 2,
+              collarAgencyId: 555503,
+              pileNumber: 'K71+600',
+              manageAgencyId: 'YG11002',
+              producteDate: null,
+              repairDate: null,
+              operateDate: null,
+              serviceLife: null,
+              storageDate: null,
+              isMonitor: 1,
+              isConfig: 1,
+              localInfo: 36,
+              routeNumber: null,
+              routeName: null,
+              deviceIp: '10.0.81.66',
+              devicePort: null,
+              devicePixel: '768*64',
+              userName: null,
+              passWord: null,
+              protocolName: null,
+              deviceTypeIds: null,
+              lUserID: null,
+              lAlarmHandle: null,
+              lUserIDStr: null,
+              lAlarmHandleStr: null,
+              eqDirection: null,
+              iotDeviceType: null
+            },
+            {
+              searchValue: null,
+              createBy: null,
+              createTime: null,
+              updateBy: null,
+              updateTime: null,
+              remark: null,
+              params: {},
+              deviceId: 285,
+              deviceName: '门架式可变信息标志K82+285',
+              brandId: 4,
+              iotBoardBrandName: {
+                brandId: 4,
+                brandName: '光电比特'
+              },
+              routeId: 17,
+              routeDirection: '济南方向',
+              deviceMarkingName: null,
+              deviceTypeId: 202010001,
+              deviceTypeNumber: 202010004,
+              deviceModelId: null,
+              factoryLibrary: null,
+              userUnitId: 555503,
+              operatorId: null,
+              longitude: '117.9554825',
+              latitude: '36.84254887',
+              firmId: 18,
+              purchaseDate: '2022-12-14T16:06:03.000+08:00',
+              warrantyYears: null,
+              unitPrice: null,
+              runStatus: 1,
+              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
+              deviceStatus: '1',
+              installDate: '2022-12-14T16:06:03.000+08:00',
+              maintainId: 2,
+              collarAgencyId: 555503,
+              pileNumber: 'K82+285',
+              manageAgencyId: 'YG11002',
+              producteDate: null,
+              repairDate: null,
+              operateDate: null,
+              serviceLife: null,
+              storageDate: null,
+              isMonitor: 1,
+              isConfig: 1,
+              localInfo: 36,
+              routeNumber: null,
+              routeName: null,
+              deviceIp: '10.0.21.61',
+              devicePort: null,
+              devicePixel: '768*64',
+              userName: null,
+              passWord: null,
+              protocolName: null,
+              deviceTypeIds: null,
+              lUserID: null,
+              lAlarmHandle: null,
+              lUserIDStr: null,
+              lAlarmHandleStr: null,
+              eqDirection: null,
+              iotDeviceType: null
+            },
+            {
+              searchValue: null,
+              createBy: null,
+              createTime: null,
+              updateBy: null,
+              updateTime: null,
+              remark: null,
+              params: {},
+              deviceId: 208,
+              deviceName: '门架式可变信息标志k98+208',
+              brandId: 4,
+              iotBoardBrandName: {
+                brandId: 4,
+                brandName: '光电比特'
+              },
+              routeId: 17,
+              routeDirection: '济南方向',
+              deviceMarkingName: null,
+              deviceTypeId: 202010001,
+              deviceTypeNumber: 202010004,
+              deviceModelId: null,
+              factoryLibrary: null,
+              userUnitId: 555503,
+              operatorId: null,
+              longitude: '117.9554825',
+              latitude: '36.84254887',
+              firmId: 18,
+              purchaseDate: '2022-12-14T16:06:03.000+08:00',
+              warrantyYears: null,
+              unitPrice: null,
+              runStatus: 1,
+              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
+              deviceStatus: '1',
+              installDate: '2022-12-14T16:06:03.000+08:00',
+              maintainId: 2,
+              collarAgencyId: 555503,
+              pileNumber: 'k98+208',
+              manageAgencyId: 'YG11002',
+              producteDate: null,
+              repairDate: null,
+              operateDate: null,
+              serviceLife: null,
+              storageDate: null,
+              isMonitor: 1,
+              isConfig: 1,
+              localInfo: 36,
+              routeNumber: null,
+              routeName: null,
+              deviceIp: '10.0.31.115',
+              devicePort: null,
+              devicePixel: '768*64',
+              userName: null,
+              passWord: null,
+              protocolName: null,
+              deviceTypeIds: null,
+              lUserID: null,
+              lAlarmHandle: null,
+              lUserIDStr: null,
+              lAlarmHandleStr: null,
+              eqDirection: null,
+              iotDeviceType: null
+            },
+            {
+              searchValue: null,
+              createBy: null,
+              createTime: null,
+              updateBy: null,
+              updateTime: null,
+              remark: null,
+              params: {},
+              deviceId: 65,
+              deviceName: '门架式可变信息标志K103+900',
+              brandId: 4,
+              iotBoardBrandName: {
+                brandId: 4,
+                brandName: '光电比特'
+              },
+              routeId: 17,
+              routeDirection: '济南方向',
+              deviceMarkingName: null,
+              deviceTypeId: 202010001,
+              deviceTypeNumber: 202010004,
+              deviceModelId: null,
+              factoryLibrary: null,
+              userUnitId: 555503,
+              operatorId: null,
+              longitude: '117.9554825',
+              latitude: '36.84254887',
+              firmId: 18,
+              purchaseDate: '2022-12-14T16:06:03.000+08:00',
+              warrantyYears: null,
+              unitPrice: null,
+              runStatus: 1,
+              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
+              deviceStatus: '1',
+              installDate: '2022-12-14T16:06:03.000+08:00',
+              maintainId: 2,
+              collarAgencyId: 555503,
+              pileNumber: 'K103+900',
+              manageAgencyId: 'YG11002',
+              producteDate: null,
+              repairDate: null,
+              operateDate: null,
+              serviceLife: null,
+              storageDate: null,
+              isMonitor: 1,
+              isConfig: 1,
+              localInfo: 36,
+              routeNumber: null,
+              routeName: null,
+              deviceIp: '10.0.31.111',
+              devicePort: null,
+              devicePixel: '768*64',
+              userName: null,
+              passWord: null,
+              protocolName: null,
+              deviceTypeIds: null,
+              lUserID: null,
+              lAlarmHandle: null,
+              lUserIDStr: null,
+              lAlarmHandleStr: null,
+              eqDirection: null,
+              iotDeviceType: null
+            }
+          ]
+        },
+        {
+          devicePixel: '480*48',
+          label: '雨棚480*48',
+          list: [
+            /!*{
+              searchValue: null,
+              createBy: null,
+              createTime: null,
+              updateBy: null,
+              updateTime: null,
+              remark: null,
+              params: {},
+              deviceId: 65,
+              deviceName: '雨棚可变信息标志ZK18+665',
+              brandId: 4,
+              iotBoardBrandName: {
+                brandId: 4,
+                brandName: '光电比特'
+              },
+              routeId: 17,
+              routeDirection: '济南方向',
+              deviceMarkingName: null,
+              deviceTypeId: 202010001,
+              deviceTypeNumber: 202010004,
+              deviceModelId: null,
+              factoryLibrary: null,
+              userUnitId: 555503,
+              operatorId: null,
+              longitude: '117.9554825',
+              latitude: '36.84254887',
+              firmId: 18,
+              purchaseDate: '2022-12-14T16:06:03.000+08:00',
+              warrantyYears: null,
+              unitPrice: null,
+              runStatus: 1,
+              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
+              deviceStatus: '1',
+              installDate: '2022-12-14T16:06:03.000+08:00',
+              maintainId: 2,
+              collarAgencyId: 555503,
+              pileNumber: 'ZK134+587',
+              manageAgencyId: 'YG11002',
+              producteDate: null,
+              repairDate: null,
+              operateDate: null,
+              serviceLife: null,
+              storageDate: null,
+              isMonitor: 1,
+              isConfig: 1,
+              localInfo: 16,
+              routeNumber: null,
+              routeName: null,
+              deviceIp: '10.7.181.29',
+              devicePort: null,
+              devicePixel: '480*48',
+              userName: null,
+              passWord: null,
+              protocolName: null,
+              deviceTypeIds: null,
+              lUserID: null,
+              lAlarmHandle: null,
+              lUserIDStr: null,
+              lAlarmHandleStr: null,
+              eqDirection: null,
+              iotDeviceType: null
+            }*!/
+          ]
+        },
+        {
+          devicePixel: '192*160',
+          label: ' 悬臂192*160',
+          list: [
+            /!*{
+              searchValue: null,
+              createBy: null,
+              createTime: null,
+              updateBy: null,
+              updateTime: null,
+              remark: null,
+              params: {},
+              deviceId: 1055550306,
+              deviceName: '悬臂可变信息标志YK16+970',
+              brandId: 4,
+              iotBoardBrandName: {
+                brandId: 4,
+                brandName: '光电比特'
+              },
+              routeId: 17,
+              routeDirection: '菏泽方向',
+              deviceMarkingName: null,
+              deviceTypeId: 202010001,
+              deviceTypeNumber: 202010004,
+              deviceModelId: null,
+              factoryLibrary: null,
+              userUnitId: 555503,
+              operatorId: null,
+              longitude: null,
+              latitude: null,
+              firmId: 18,
+              purchaseDate: '2022-12-14T16:06:03.000+08:00',
+              warrantyYears: null,
+              unitPrice: null,
+              runStatus: 1,
+              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
+              deviceStatus: '1',
+              installDate: '2022-12-14T16:06:03.000+08:00',
+              maintainId: 2,
+              collarAgencyId: 555503,
+              pileNumber: 'YK133+825',
+              manageAgencyId: 'YG11002',
+              producteDate: null,
+              repairDate: null,
+              operateDate: null,
+              serviceLife: null,
+              storageDate: null,
+              isMonitor: 1,
+              isConfig: 1,
+              localInfo: 16,
+              routeNumber: null,
+              routeName: null,
+              deviceIp: '10.7.180.84',
+              devicePort: null,
+              devicePixel: '192*160',
+              userName: null,
+              passWord: null,
+              protocolName: null,
+              deviceTypeIds: null,
+              lUserID: null,
+              lAlarmHandle: null,
+              lUserIDStr: null,
+              lAlarmHandleStr: null,
+              eqDirection: null,
+              iotDeviceType: null
+            }*!/
+          ]
+        },
+        {
+          devicePixel: '160*80',
+          label: ' 站前160*80',
+          list: [
+            {
+              searchValue: null,
+              createBy: null,
+              createTime: null,
+              updateBy: null,
+              updateTime: null,
+              remark: null,
+              params: {},
+              deviceId: 221,
+              deviceName: '大学城路口站前',
+              brandId: 4,
+              iotBoardBrandName: {
+                brandId: 4,
+                brandName: '光电比特'
+              },
+              routeId: 17,
+              routeDirection: '菏泽方向',
+              deviceMarkingName: null,
+              deviceTypeId: 202010001,
+              deviceTypeNumber: 202010004,
+              deviceModelId: null,
+              factoryLibrary: null,
+              userUnitId: 555503,
+              operatorId: null,
+              longitude: null,
+              latitude: null,
+              firmId: 18,
+              purchaseDate: '2022-12-14T16:06:03.000+08:00',
+              warrantyYears: null,
+              unitPrice: null,
+              runStatus: 1,
+              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
+              deviceStatus: '1',
+              installDate: '2022-12-14T16:06:03.000+08:00',
+              maintainId: 2,
+              collarAgencyId: 555503,
+              pileNumber: '大学城路口站前',
+              manageAgencyId: 'YG11002',
+              producteDate: null,
+              repairDate: null,
+              operateDate: null,
+              serviceLife: null,
+              storageDate: null,
+              isMonitor: 1,
+              isConfig: 1,
+              localInfo: 16,
+              routeNumber: null,
+              routeName: null,
+              deviceIp: '10.0.81.221',
+              devicePort: null,
+              devicePixel: '160*80',
+              userName: null,
+              passWord: null,
+              protocolName: null,
+              deviceTypeIds: null,
+              lUserID: null,
+              lAlarmHandle: null,
+              lUserIDStr: null,
+              lAlarmHandleStr: null,
+              eqDirection: null,
+              iotDeviceType: null
+            }
+          ]
+        }
+      ]
+      this.iotBoardList = testData
+      if (testData.length > 0) {
+        this.iotBoardActive = testData[0].devicePixel
+        this.handleChange(testData[0].devicePixel)
+      } else {
+        this.getInfoMode()
+      }
+      this.$forceUpdate()*/
+
+      // TODO 接口
+      let param = {
+        direction: this.form.eqDirection,
+      };
+      getBoardList(param).then((res) => {
+        console.log(res, "查询情报板设备列表");
+        this.iotBoardList.forEach(item => {
+          item.list = []
+          if (res.length > 0) {
+            res.forEach(board => {
+              if (item.devicePixel == board.sceenSize) {
+                item.list.push(board)
+              }
+            })
+
+            this.iotBoardActive = this.iotBoardList[0].devicePixel;
+            this.handleChange(this.iotBoardList[0].devicePixel);
+          } else {
+            this.getInfoMode();
+          }
+        })
+
+
+        this.$forceUpdate();
+      });
+    },
+
+    // 板子分辨率换算
+    getScreenSize(num, type) {
+      // console.log(num)
+      let width = num.split('*')[0]
+      let height = num.split('*')[1]
+      // 实际分辨率比页面板子小
+      if (width <= 450 && height <= 75) {
+        if (type == 'width') {
+          return width
+        } else if (type == 'height') {
+          return height
+        }
+      } else {
+        // 实际分辨率比页面板子大
+        if (width / 450 > height / 75) {
+          if (type == 'width') {
+            return 450
+          } else if (type == 'height') {
+            return height / (width / 450)
+          }
+        } else {
+          if (type == 'width') {
+            return width / (height / 75)
+          } else if (type == 'height') {
+            return 75
+          }
+        }
+      }
+    },
+
+    // 接收子组件 新增模板
+    getActiveNames() {
+      this.allVmsTemplate()
+    },
+
+    // 向左新增待下发
+    arrowLeft(item) {
+      var list = {
+        FONT_SIZE: item.tcontents[0].fontSize + 'px',
+        COLOR: item.tcontents[0].fontColor,
+        CONTENT: item.tcontents[0].content,
+        COORDINATE: item.tcontents[0].coordinate,
+        FONT: this.getFont(item.tcontents[0].fontType),
+        SPEED: item.tcontents[0].fontSpacing, //字体间距
+        ACTION: item.inScreenMode, //出屏方式
+        STAY: item.stopTime, //停留时间
+        category: item.category, //所属类别
+        ID: this.contentList.length,
+        format: item.tcontents[0].contentList,
+        formatStyle: item.tcontents[0].formatStyle
+      }
+      this.contentList.push(list)
+      this.toggleIndex++
+      console.log(this.contentList, 'this.contentList')
+      console.log(this.toggleIndex, 'toggleIndex')
+    },
+
+    // 向右添加模板
+    arrowRight(item) {
+      this.toRightItem = item
+      if (!item.category) {
+        this.arrowRightVisible = true
+      } else {
+        this.arrowRightAllVmsTemplate()
+      }
+    },
+
+    // 向右添加模板
+    arrowRightAllVmsTemplate() {
+      console.log(this.contentList, '不选所属类别向右contentList')
+      console.log(this.toRightItem, this.toRightCategory)
+      let item = this.toRightItem
+      let templateId = ''
+      let method = 'put'
+      const params1 = {
+        inScreenMode: item.ACTION,
+        screenSize: this.form.devicePixel,
+        applyType: '',
+        category: item.category ? item.category : this.toRightCategory,
+        coordinate: '',
+        height: '',
+        id: '',
+        imageUrl: '',
+        imgSizeFrom: '',
+        remark: '',
+        stopTime: item.STAY,
+        vmsType: '',
+        width: ''
+      }
+
+      // 新增
+      addTemplate(params1, method).then(data => {
+        console.log(data, '新增口返回data')
+        const templateContent = []
+        templateContent.push({
+          content: item.CONTENT,
+          coordinate: item.COORDINATE,
+          fontColor: this.getColorStyle(item.COLOR),
+          fontSize: item.FONT_SIZE.substring(0, 2),
+          fontSpacing: item.SPEED,
+          fontType: this.getFontStyle(item.FONT)
+        })
+        const params2 = {
+          templateContent: templateContent,
+          templateId: data
+        }
+        addTemplateContent(params2)
+          .catch(err => {
+            throw err
+          })
+          .then(res => {
+            if (res.code == 200) {
+              this.allVmsTemplate('no')
+            }
+          })
+        // this.getActiveNames(item.category);
+      })
+      this.arrowRightVisible = false
+    },
+
+    // 修改弹窗
+    editOutline(item, index, type) {
+      this.index = index
+      this.editType = type
+      console.log(item, '修改弹窗')
+      this.boardEmitItem = {
+        FONT_SIZE: item.tcontents[0].fontSize + 'px',
+        COLOR: item.tcontents[0].fontColor,
+        CONTENT: item.tcontents[0].content,
+        COORDINATE: item.tcontents[0].coordinate,
+        FONT: this.getFont(item.tcontents[0].fontType),
+        SPEED: item.tcontents[0].fontSpacing,
+        ACTION: item.inScreenMode, //出屏方式
+        STAY: item.stopTime, //停留时间
+        type: type,
+        screenSize: item.screenSize,
+        category: item.category,
+        id: item.id,
+        tcontentsId: item.tcontents[0].id,
+        formatStyle: item.tcontents[0].formatStyle
+      }
+      this.showEmit = true
+    },
+
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids
+      let content = '是否确认删除选中数据项?'
+      if (ids == null || ids == undefined || ids == [] || ids == '') {
+        content = '是否确认删除当前情报板模板?'
+      }
+      this.$confirm(content, '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(function () {
+          return deleteTemplate(ids)
+        })
+        .then(() => {
+          this.allVmsTemplate('no')
+          this.$modal.msgSuccess('删除成功')
+        })
+    },
+
+    // 情报板管理右侧查询接口
+    allVmsTemplate(type) {
+      const param = {
+        devicePixel: this.form.devicePixel
+      }
+
+      //TODO 接口
+      getAllVmsTemplate(param).then(res => {
+        let data = res.data
+        console.log(res, '情报板管理右侧查询接口')
+        let jArr = []
+
+        for (let j = 0; j < this.iotTemplateCategoryList.length; j++) {
+          let arr = this.iotTemplateCategoryList[j]
+          let brr = data[j]
+          arr.list = brr
+          jArr.push(j.toString())
+        }
+        if (type != 'no') {
+          this.activeNames = jArr
+        }
+        this.$forceUpdate()
+        console.log(this.iotTemplateCategoryList, '新模板')
+      })
+    },
+
+    // 删除中间模板
+    delQbbDrawer(index) {
+      if (index > -1) {
+        this.contentList.splice(index, 1)
+        this.$message.success('删除成功')
+      }
+    },
+
+    // 发布信息
+    publishInfo() {
+      this.$confirm('是否确定发布情报板?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          let loading = this.$loading({
+            lock: true,
+            text: 'Loading',
+            spinner: 'el-icon-loading',
+            background: 'rgba(0, 0, 0, 0.7)'
+          })
+          const objAll = {}
+          objAll.deviceIds = this.checkedCities.toString()
+          let that = this
+
+          let devicePixel = this.form.devicePixel.split('*')
+          let newArr = this.contentList.map(function (item) {
+            let obj = {}
+
+            obj.STAY = item.STAY
+            obj.ACTION = item.ACTION
+            obj.SPEED = item.SPEED
+            obj.COORDINATE = item.COORDINATE.replace('-', '0')
+            obj.COLOR = item.COLOR
+            obj.FONT = that.getFontValue(item.FONT)
+            obj.FONT_SIZE = item.FONT_SIZE.substring(0, 2)
+            // obj.CONTENT = item.CONTENT.replace(/\\/g, '\\\\')
+            //
+
+            // obj.CONTENT = item.CONTENT.replace(/\,/g , "other string or space")
+            // obj.CONTENT = item.CONTENT
+            obj.CONTENT = item.CONTENT.replaceAll(',', '\\,')
+            obj.CONTENT = obj.CONTENT.replaceAll('=', '\\=')
+            obj.CONTENT = obj.CONTENT.replaceAll('\n', '\\\\n')
+
+            // obj.CONTENT = obj.CONTENT.replaceAll('=','\=')
+            obj.width = devicePixel[0]
+            obj.height = devicePixel[1]
+            obj.formatStyle = item.formatStyle
+            return obj
+          })
+          objAll.parameters = newArr
+          const param = {
+            objectData: JSON.stringify(objAll)
+          }
+          console.log(newArr, 'newArr')
+
+          invokedFunction(objAll.deviceIds, 11, { size: '65535', fileName: 'play010.lst' })
+            .then(res => {
+              console.log('发布消息,校验文件名-------------------------------------')
+              console.log(res)
+              if (res.data.result == '01') {
+                invokedFunction(objAll.deviceIds, 13, { parameters: newArr })
+                  .then(res => {
+                    console.log('发布消息,发送文件内容-----------------------------')
+                    console.log(res)
+                    if (res.data.result == '01') {
+                      invokedFunction(objAll.deviceIds, '1B', { fileId: '10' })
+                        .then(res => {
+                          console.log('发布消息,播放文件-----------------------------')
+                          console.log(res)
+                        })
+                        .catch(() => {
+                          this.$modal.msgWarning('发布失败,请重试')
+                        })
+                    }
+                  })
+                  .catch(() => {
+                    this.$modal.msgWarning('发布失败,请重试')
+                  })
+              }
+            })
+            .catch(() => {
+              this.$modal.msgWarning('发布失败,请重试')
+            })
+          loading.close()
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消发布情报板'
+          })
+          loading.close()
+        })
+    },
+
+    // 接收子组件新增待发模板
+    addInfo(form) {
+      console.log(form, '待发新增')
+      form.ID = this.contentList.length
+      this.contentList.push(deepClone(form))
+      this.$message.success('添加成功')
+      this.$forceUpdate()
+    },
+
+    // 接收子组件form表单 修改
+    receiveForm(form) {
+      console.log(form, '接收子组件form表单 修改')
+      this.contentList.splice(this.index_, 1, form)
+      this.$forceUpdate()
+      this.allVmsTemplate('no')
+    },
+
+    // 打开添加信息弹窗
+    openDialogVisible(type, mode) {
+      this.$refs.addinfo.init(this.form.devicePixel, type, mode)
+    },
+
+    // 全选
+    handleCheckAllChange(val) {
+      this.checkedCities = val ? this.deviceList : []
+    },
+
+    // 多选
+    handleCheckedCitiesChange(value) {
+      console.log(value, 'value')
+      this.checkedCities = value
+      let val = JSON.parse(JSON.stringify(value))
+      for (let itm of this.deviceList) {
+        if (val.indexOf(itm) > -1) {
+          this.checkAll = true
+        } else {
+          this.checkAll = false
+          return
+        }
+      }
+      this.$forceUpdate()
+    },
+    // 情报板列表手风琴
+    handleChange(val) {
+      this.contentList = []
+      this.deviceList = []
+      this.disabledButton = true
+      this.checkedCities = []
+      this.checkAll = false
+      this.form.devicePixel = val
+      this.allVmsTemplate()
+      for (let item of this.iotBoardList) {
+        if (item.devicePixel == val) {
+          // this.checkboxList = item.list;
+          for (let itm of item.list) {
+            this.deviceList.push(itm.deviceId)
+          }
+        }
+      }
+    },
+
+    // 转报文 ITEM001
+    formatNum(num, length) {
+      return (Array(length).join('0') + parseInt(num)).slice(-length)
+    },
+
+    // 转报文 字体
+    getFontValue(font) {
+      if (font == '黑体' || font == 'SimHei') return '1'
+      if (font == '楷体' || font == 'KaiTi') return '2'
+      if (font == '仿宋' || font == 'FangSong') return '4'
+      if (font == '隶书' || font == 'LiSu') return '5'
+      else return '3' //宋体
+    },
+
+    // 转报文 色号
+    getColorValue(color) {
+      if (color == '蓝色' || color == 'blue') return '0000FF'
+      if (color == '绿色' || color == '#00FF00' || color == 'GreenYellow') return '00FF00'
+      if (color == '红色' || color == 'red') return 'FF0000'
+      if (color == '黄色' || color == 'yellow') return 'FFFF00'
+      return 'FFFFFF' //白色
+    },
+
+    // 向内容显示区域添加一条信息
+    addContentDisplayInfos(addId, no, disContent) {
+      var jsonArr = {}
+      jsonArr.itemId = addId
+      jsonArr.disContent = disContent
+      this.disContentList.push(jsonArr)
+    },
+
+    // 回读
+    async onSubmit(deviceId) {
+      this.submitButton = true
+      this.loading = true
+      this.contentList = []
+      // 获取情报板修改页面信息
+      const param = {
+        deviceId: deviceId
+      }
+      /* await getBoardContentData(param)
+        .then(res => {
+          console.log(res, 'onSubmit')
+          var contents = res.data.parameters
+          console.log(contents, 'onSubmit-----contents')
+          for (let i = 0; i < contents.length; i++) {
+            let item = contents[i]
+            item.COLOR = this.getColorStyle(item.COLOR)
+            item.FONT_SIZE = Number(item.FONT_SIZE.substring(0, 2)) + 'px'
+            item.ID = i
+            item.FONT = this.getFont(item.FONT)
+            this.contentList.push(item)
+          }
+          console.log(this.contentList, 'onSubmit-----this.contentList')
+          this.loading = false
+          this.submitButton = false
+          // this.rowDrop();
+        })
+        .catch(e => {
+          this.loading = false
+          this.submitButton = false
+        })*/
+      await getDeviceRealtimeProperty(deviceId, '3A', { async: false })
+        .then(res => {
+          if ('3A' in res.data) {
+            console.log('回读消息------------------------')
+            console.log(res.data)
+            var contents = res.data['3A'].content
+            for (let i = 0; i < contents.length; i++) {
+              let item = contents[i]
+              item.COLOR = item.foregroundColor.toUpperCase()
+              item.FONT_SIZE = item.fontSize + 'px'
+              item.ID = i
+              item.FONT = item.font
+              item.STAY = item.playbackDuration
+              item.ACTION = item.screenEntryMethod
+              item.COORDINATE = this.covering(item.xCoordinate) + this.covering(item.yCoordinate)
+              item.screenSize = item.displayAreaWidth + '*' + item.displayAreaHeight
+              item.CONTENT = item.textContent.replaceAll('\\,', ',')
+              item.CONTENT = item.CONTENT.replaceAll('\\=', '=')
+              item.CONTENT = item.CONTENT.replaceAll('\\\\n', '\n')
+
+              item.formatStyle = item.verticalAlignment
+              this.contentList.push(item)
+
+              this.form.devicePixel = item.screenSize
+            }
+            console.log(this.contentList, 'onSubmit-----this.contentList')
+            // this.rowDrop();
+          }
+          this.loading = false
+          this.submitButton = false
+        })
+        .catch(e => {
+          this.$modal.msgWarning('回读失败,请重试')
+          this.loading = false
+          this.submitButton = false
+        })
+      this.deviceId = deviceId
+
+      // 根据情报板id获取分辨率
+      /*getBoardInfo(deviceId).then(res => {
+        console.log(res, 'getBoardInfo')
+        this.form.devicePixel = res.data.pixel
+        if (res.data.deviceId) {
+          this.disabledButton = false
+        } else {
+          this.disabledButton = true
+        }
+      })*/
+    },
+
+    covering(value) {
+      if (value.length < 3) {
+        value = '0' + value
+        return this.covering(value)
+      }
+
+      return value
+    },
+
+    // 待下发 编辑
+    openQbbDrawer(item, index, type) {
+      this.index_ = index
+      console.log(item)
+      this.boardEmitItem = item
+      this.boardEmitItem.screenSize = this.form.devicePixel
+      this.boardEmitItem.deviceId = this.deviceId
+      this.boardEmitItem.type = type
+
+      this.showEmit = true
+    },
+
+    // 转颜色
+    getColorStyle(font) {
+      if (font == '黄色' || font == 'yellow' || font == '4') {
+        return '#FFFF00'
+      } else if (font == '红色' || font == 'red' || font == '1') {
+        return '#FF0000'
+      } else if (font == '绿色' || font == 'GreenYellow' || font == '000255000000' || font == '2') {
+        return '#00FF00'
+      } else if (font == '蓝色' || font == 'blue' || font == '3') {
+        return '#0000FF'
+      } else if (font == '7' || font == 'white') {
+        return '#FFFFFF'
+      } else {
+        return '#' + font
+      }
+    },
+
+    // 居中
+    getTextAlign(font) {
+      if (font == '0') {
+        return 'left'
+      } else if (font == '1') {
+        return 'right'
+      } else {
+        return 'center'
+      }
+    },
+
+    // 换算字号
+    getFontSize(font, screenSize) {
+      if (!font) {
+        return
+      }
+      let width = ''
+      let height = ''
+      if (!screenSize) {
+        width = this.form.devicePixel.split('*')[0]
+        height = this.form.devicePixel.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 = ''
+      let height = ''
+      if (!screenSize) {
+        width = this.form.devicePixel.split('*')[0]
+        height = this.form.devicePixel.split('*')[1]
+      } else {
+        width = screenSize.split('*')[0]
+        height = screenSize.split('*')[1]
+      }
+      if (width <= 450 && height <= 75) {
+        return coordinate + 'px'
+      } else {
+        if (type == 'left') {
+          if (width < 450 && height > 75) {
+            return coordinate / (height / 75) + 'px'
+          } else {
+            if (width / 450 >= height / 75) {
+              return coordinate / (width / 450) + 'px'
+            } else {
+              return coordinate / (height / 75) + 'px'
+            }
+          }
+        } else if (type == 'top') {
+          if (width < 450 && height > 75) {
+            return coordinate / (height / 75) + 'px'
+          } else {
+            if (width / 450 >= height / 75) {
+              return coordinate / (width / 450) + 'px'
+            } else {
+              return coordinate / (height / 75) + 'px'
+            }
+          }
+        }
+      }
+    },
+    getFontStyle(font) {
+      if (font == '宋体') {
+        return 'Simsun'
+      } else if (font == '黑体') {
+        return 'SimHei'
+      } else if (font == '楷体') {
+        return 'KaiTi'
+      } else {
+        return font
+      }
+    },
+    getFont(font) {
+      if (font == 'KaiTi' || font == 'k') {
+        return '楷体'
+      } else if (font == 'SimSun' || font == 's') {
+        return '宋体'
+      } else if (font == 'SimHei' || font == 'h') {
+        return '黑体'
+      } else if (font == 'FangSong' || font == 'f') {
+        return '仿宋'
+      } else if (font == 'LiSu' || font == 'l') {
+        return '隶书'
+      } else {
+        return font
+      }
+    },
+    // //  上移
+    // moveTop(i, item) {
+    //   if (item && i) {
+    //     let obj = { ...this.contentList[i - 1] };
+    //     this.contentList.splice(i - 1, 1, item);
+    //     this.contentList.splice(i, 1, obj);
+    //     this.$forceUpdate();
+    //   }
+    // },
+    // // 下移
+    // moveBottom(i, item) {
+    //   if (item && typeof i === "number") {
+    //     let obj = { ...this.contentList[i + 1] };
+    //     this.contentList.splice(i + 1, 1, item);
+    //     this.contentList.splice(i, 1, obj);
+    //     this.$forceUpdate();
+    //   }
+    // },
+    dialogClose() {
+      this.showEmit = false
+      this.arrowRightVisible = false
+      setTimeout(() => {
+        this.allVmsTemplate('no')
+      }, 500)
+    },
+    hideScrollFn() {
+      // 隐藏滚动条
+      document.documentElement.style.overflow = 'hidden'
+      // 禁用滚动功能
+      function disableScroll() {
+        // 记录当前滚动位置
+        const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
+
+        // 设置滚动位置为固定值，防止滚动
+        document.body.style.position = 'fixed'
+        document.body.style.top = `-${scrollPosition}px`
+      }
+
+      // 启用滚动功能
+      function enableScroll() {
+        // 获取之前记录的滚动位置
+        const scrollPosition = parseInt(document.body.style.top || '0', 10)
+
+        // 恢复滚动位置
+        document.body.style.position = ''
+        document.body.style.top = ''
+
+        // 滚动到之前的位置
+        window.scrollTo(0, -scrollPosition)
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container {
+  .verticalBox {
+    height: 100%;
+    padding: 10px 5px;
+
+    .bigTitle {
+      padding: 0px 0;
+      /* // border-bottom: 1px solid #05afe3; */
+      margin-bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+      height: 60px;
+      font-size: 0.8vw;
+      align-items: center;
+    }
+
+    .contentBox {
+      width: 100%;
+      height: calc(100% - 46px);
+      padding: 0 0 1vh 0;
+      /* // overflow: auto; */
+
+      .con {
+        /* // border: 1px solid #05afe3; */
+        height: 75px;
+        position: relative;
+        width: 540px;
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: 2px solid #004c64;
+      }
+
+      .menuBox {
+        display: flex;
+        align-items: center;
+        /* // margin-left: 10px; */
+        /* // border: solid 1px #05afe3; */
+        height: 75px;
+        justify-content: space-around;
+        align-items: center;
+        border: 2px solid #004c64;
+
+        div {
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          width: 40px;
+          height: 40px;
+        }
+
+        > div:first-of-type {
+          /* background-image: url(../../../assets/cloudControl/edit2.png); */
+        }
+
+        > div:nth-of-type(2) {
+          /* background-image: url(../../../assets/cloudControl/edit4.png); */
+        }
+
+        /* // >div:last-of-type{
+          //   background-image: url(../../../assets/cloudControl/edit4.png);
+          // } */
+        > div:first-of-type:hover {
+          /* background-image: url(../../../assets/cloudControl/edit1.png); */
+        }
+
+        > div:nth-of-type(2):hover {
+          /* background-image: url(../../../assets/cloudControl/closeIcon1.png); */
+        }
+
+        /* // >div:last-of-type:hover{
+          //   background-image: url(../../../assets/cloudControl/closeIcon1.png);
+          // } */
+        i {
+          font-size: 24px;
+          color: #666;
+          cursor: pointer;
+          caret-color: rgba(0, 0, 0, 0);
+          user-select: none;
+        }
+
+        i:hover {
+          color: #05afe3 !important;
+        }
+      }
+
+      /* // } */
+      .controlBox {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 10px;
+      }
+    }
+
+    .templateBox {
+      width: 100%;
+      height: calc(100% - 46px);
+      padding: 0 0 1vh 0;
+
+      .con {
+        height: 75px;
+        margin: 10px 0;
+        padding: 0 10px;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+
+        .templateTitle {
+          height: 75px;
+          border: 2px solid #004c64;
+          position: relative;
+          width: 540px;
+          float: left;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          overflow: hidden;
+        }
+
+        .menuBox {
+          display: flex;
+          float: right;
+          margin-left: 15px;
+          padding: 0 0.2vw;
+          /* // border: solid 1px #05afe3; */
+          width: calc(100% - 555px);
+          height: 100%;
+          border: 2px solid #004c64;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+
+          div {
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            width: 40px;
+            height: 40px;
+          }
+
+          > div:first-of-type {
+            /* background-image: url(../../../assets/cloudControl/toLeft2.png); */
+          }
+
+          > div:nth-of-type(2) {
+            /* background-image: url(../../../assets/cloudControl/edit2.png); */
+          }
+
+          > div:last-of-type {
+            /* background-image: url(../../../assets/cloudControl/edit4.png); */
+          }
+
+          > div:first-of-type:hover {
+            /* background-image: url(../../../assets/cloudControl/toLeft1.png); */
+          }
+
+          > div:nth-of-type(2):hover {
+            /* background-image: url(../../../assets/cloudControl/edit1.png); */
+          }
+
+          > div:last-of-type:hover {
+            /* background-image: url(../../../assets/cloudControl/closeIcon1.png); */
+          }
+
+          i {
+            font-size: 24px;
+            color: #666;
+            padding-left: 4px;
+            cursor: pointer;
+            caret-color: rgba(0, 0, 0, 0);
+            user-select: none;
+          }
+
+          i:hover {
+            color: #05afe3;
+          }
+
+          .disabledClass {
+            pointer-events: none;
+            cursor: auto !important;
+            color: #ccc;
+          }
+        }
+      }
+
+      .controlBox {
+        margin-top: 10px;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: center;
+      }
+
+      .el-collapse {
+        max-height: 100% !important;
+        overflow: auto;
+        border-bottom: none;
+        border-top: none;
+        padding: 0 0.5vw;
+      }
+    }
+  }
+
+  .checkbox {
+    label {
+      width: 100%;
+      padding: 10px 0;
+      box-sizing: border-box;
+      display: flex;
+    }
+  }
+}
+.qbbBigDotBa {
+  width: 64px;
+  height: 9px;
+  position: absolute;
+  right: 5%;
+  top: 35%;
+}
+
+::v-deep .el-collapse-item__content {
+  line-height: normal;
+  padding-bottom: 0px;
+}
+
+::v-deep .el-checkbox__label {
+  display: flex !important;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.el-checkbox {
+  display: flex !important;
+  padding-top: 10px;
+}
+
+::v-deep .el-table {
+  caret-color: rgba(0, 0, 0, 0);
+  user-select: none;
+
+  thead {
+    display: none;
+  }
+}
+
+.huiduButton {
+  background: transparent;
+  border: none;
+  height: 19px;
+  line-height: 20px;
+  padding: 0;
+  color: #fff;
+  font-size: 16px;
+}
+
+.huiduButton:hover {
+  color: #05afe3 !important;
+}
+
+.boardTextStyle {
+  position: absolute;
+  line-height: 1;
+  caret-color: rgba(0, 0, 0, 0);
+  user-select: none;
+  white-space: normal;
+  word-break: break-all;
+  overflow: hidden;
+}
+.qbbBigTitle {
+  // margin-top: 1vh;
+  color: #fff;
+  height: 35px !important;
+  background-image: url('~@/assets/screen/xtb/qbbtit.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  display: flex;
+  justify-content: start !important;
+  align-items: center;
+  position: relative;
+}
+.qbbBigDot {
+  width: 18px;
+  height: 22px;
+  margin: 0 0.5vw 0 0.5vw;
+}
+.awaitBigTitle {
+  width: 100%;
+  color: #fff;
+  padding-right: 6vw !important;
+  height: 35px !important;
+  background-image: url('~@/assets/screen/xtb/qbbti.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  position: relative;
+}
+
+::v-deep .sortable-chosen:not(th) {
+  background-color: rgba(5, 175, 227, 0.1) !important;
+}
+
+::v-deep .el-select .el-input .el-input__inner {
+  caret-color: rgba(0, 0, 0, 0);
+  user-select: none;
+}
+
+::v-deep .el-collapse-item__header,
+.el-collapse-item__content {
+  caret-color: rgba(0, 0, 0, 0);
+  user-select: none;
+}
+
+::v-deep .el-collapse {
+  border-bottom: transparent;
+}
+
+::v-deep .el-table .cell {
+  padding-left: 5px;
+}
+
+::v-deep .el-checkbox + .el-checkbox {
+  margin-left: 0px !important;
+}
+::v-deep .el-select .el-input .el-input__inner {
+  color: #fff;
+  background-color: #053b4f;
+  border-color: transparent;
+}
+::v-deep .el-collapse-item__header {
+  background-color: #053b4f;
+  color: #fff;
+  padding-left: 1vw;
+  border-top: 5px solid #112d3b;
+  border-radius: 7px;
+  border-bottom: 5px solid #112d3b;
+}
+::v-deep .el-collapse-item__wrap {
+  background-color: #053b4f;
+  padding: 0 1vw;
+}
+::v-deep .el-collapse {
+  color: #fff;
+  border: none;
+}
+::v-deep .el-collapse-item__wrap {
+  border: none;
+}
+::v-deep .el-checkbox__label {
+  color: #fff;
+}
+::v-deep .el-button--medium {
+  width: 96px;
+  height: 23px;
+  line-height: 1px;
+  border-radius: 15px;
+}
+::v-deep .el-table__body-wrapper {
+  background-color: #053b4f;
+  padding: 0 1vw;
+}
+::v-deep .el-table tr {
+  background-color: #053b4f;
+}
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+  background-color: #053b4f;
+}
+::v-deep .el-table td.el-table__cell {
+  border: none;
+}
+.el-table::before,
+.el-table--group::after,
+.el-table--border::after {
+  content: none;
+}
+/* 通用滚动条样式 */
+::-webkit-scrollbar {
+  width: 3px; /* 设置滚动条宽度 */
+  height: 3px; /* 设置滚动条高度 */
+}
+
+::-webkit-scrollbar-track {
+  background-color: #00295b; /* 设置滚动条轨道颜色 */
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #9abce0; /* 设置滚动条滑块颜色 */
+  border-radius: 4px; /* 设置滚动条滑块圆角 */
+}
+</style>