diff --git a/.DS_Store b/.DS_Store
index c0c91c3b..545f578e 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/ruoyi-ui/public/index.html b/ruoyi-ui/public/index.html
index f7b9b8bb..36417423 100644
--- a/ruoyi-ui/public/index.html
+++ b/ruoyi-ui/public/index.html
@@ -30,6 +30,7 @@
       margin: 0px;
       padding: 0px;
       font-size: 16px;
+      background-color: #13272F;
     }
 
     .chromeframe {
diff --git a/ruoyi-ui/src/api/board/board.js b/ruoyi-ui/src/api/board/board.js
index 543ea86b..98024eb7 100644
--- a/ruoyi-ui/src/api/board/board.js
+++ b/ruoyi-ui/src/api/board/board.js
@@ -1 +1,10 @@
 import request from '@/utils/request'
+
+// 查询设备列列表
+export function getBoardList(query) {
+  return request({
+    url: '/iot/board/list',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/ruoyi-ui/src/api/device/device.js b/ruoyi-ui/src/api/device/device.js
new file mode 100644
index 00000000..c19ffa17
--- /dev/null
+++ b/ruoyi-ui/src/api/device/device.js
@@ -0,0 +1,367 @@
+import request from '@/utils/request'
+import { react } from '@/utils/request'
+
+//*********************************设备增删改查******************************************
+// 分页查询设备列表
+export function listDevice(query) {
+  return request({
+    url: '/iot/device/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 无分页查询设备列表
+export function queryDevice(query) {
+  return request({
+    url: '/iot/device/query',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询设备详细
+export function getDevice(id) {
+  return request({
+    url: '/iot/device/' + id,
+    method: 'get'
+  })
+}
+
+// 根据产品id获取设备信息
+export function getDeviceCache(productId) {
+  return request({
+    url: '/iot/device/cache/' + productId,
+    method: 'get'
+  })
+}
+
+// 获取指定ID设备详情
+export function getDeviceDetailInfo(deviceId) {
+  return request({
+    url: '/iot/device/detail/' + deviceId,
+    method: 'get'
+  })
+}
+
+// 根据条件获取设备数量
+export function getDeviceCount(query) {
+  return request({
+    url: '/iot/device/count/',
+    method: 'get',
+    params: query
+  })
+}
+
+// 新增设备
+export function addDevice(data) {
+  return request({
+    url: '/iot/device',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改设备
+export function updateDevice(data) {
+  return request({
+    url: '/iot/device',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除设备
+export function delDevice(ids) {
+  return request({
+    url: '/iot/device/' + ids,
+    method: 'delete'
+  })
+}
+
+//*********************************子设备******************************************
+
+// 分页查询未绑定的子设备列表
+export function listChildrenDevice(query) {
+  return request({
+    url: '/iot/device/children/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 绑定设备
+export function bindChildrenDevice(ids, parentId) {
+  return request({
+    url: '/iot/device/children/bind/' + parentId,
+    method: 'put',
+    data: ids
+  })
+}
+
+// 解绑设备
+export function unbindChildrenDevice(ids) {
+  return request({
+    url: '/iot/device/children/unbind/' + ids,
+    method: 'delete'
+  })
+}
+
+
+//*********************************设备状态****************************************
+
+// 同步全部设备状态
+export function syncAllDeviceState() {
+  return request({
+    url: '/iot/device/state/syncAll',
+    method: 'put'
+  })
+}
+
+// 同步设备状态
+export function syncDeviceState(ids) {
+  return request({
+    url: '/iot/device/state/sync/' + ids,
+    method: 'put'
+  })
+}
+
+// 启用
+export function deployDevice(ids) {
+  return request({
+    url: '/iot/device/state/deploy/' + ids,
+    method: 'put'
+  })
+}
+
+// 启用全部
+export function deployAllDevice() {
+  return request({
+    url: '/iot/device/state/deployAll',
+    method: 'put'
+  })
+}
+
+// 禁用
+export function undeployDevice(id) {
+  return request({
+    url: '/iot/device/state/undeploy/' + id,
+    method: 'delete'
+  })
+}
+
+// 断开连接
+export function disconnectDevice(id) {
+  return request({
+    url: '/iot/device/state/disconnect/' + id,
+    method: 'delete'
+  })
+}
+
+
+//*********************************设备标签****************************************
+
+// 新增标签
+export function addTags(data) {
+  return request({
+    url: '/iot/device/tags/addBatch',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改标签
+export function editTags(data) {
+  return request({
+    url: '/iot/device/tags',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除标签
+export function removeTags(id) {
+  return request({
+    url: '/iot/device/tags/' + id,
+    method: 'delete'
+  })
+}
+
+// 查询标签列表
+export function listTags(query) {
+  return request({
+    url: '/iot/device/tags/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 无分页查询标签列表
+export function queryTags(query) {
+  return request({
+    url: '/iot/device/tags/query',
+    method: 'get',
+    params: query
+  })
+}
+
+//*********************************设备属性****************************************
+// 获取设备实时属性
+export function getDeviceRealtimeProperty(deviceId, propertyId, headers) {
+  return react({
+    url: '/iot/device/properties/realtime/' + deviceId + '/' + propertyId,
+    method: 'get',
+    params: headers
+  })
+}
+// 批量获取设备实时属性
+export function getDeviceRealtimeProperties(deviceId, props) {
+  return react({
+    url: '/iot/device/properties/realtime/' + deviceId,
+    method: 'get',
+    params: props
+  })
+}
+
+// 发送设置属性指令到设备
+export function setDeviceProperties(deviceId, props) {
+  return react({
+    url: '/iot/device/properties/setting/' + deviceId,
+    method: 'post',
+    data: props
+  })
+}
+
+// 获取指定ID设备最新的全部属性
+export function getDeviceLatestProperties(deviceId) {
+  return request({
+    url: '/iot/device/properties/latest/' + deviceId,
+    method: 'get'
+  })
+}
+
+// 查询设备指定属性列表
+export function getDeviceHistoryProperties(deviceId, propertyId, props) {
+  return request({
+    url: '/iot/device/properties/history/' + deviceId + '/' + propertyId,
+    method: 'get',
+    params: props
+  })
+}
+
+//*********************************设备功能****************************************
+// 设备功能调用
+export function invokedFunction(deviceId, functionId, props) {
+  return react({
+    url: '/iot/device/functions/' + deviceId + '/' + functionId,
+    method: 'post',
+    data: props
+  })
+}
+
+//*********************************发送消息****************************************
+// 发送消息
+export function sendMessage(deviceId, props) {
+  return react({
+    url: '/iot/device/message/' + deviceId,
+    method: 'post',
+    data: props
+  })
+}
+// 发送消息
+export function sendMessages(props) {
+  return react({
+    url: '/iot/device/message/' + deviceId,
+    method: 'post',
+    data: props
+  })
+}
+
+//*********************************设备事件****************************************
+// 查询设备事件数据
+export function queryDeviceEvents(deviceId, eventId, props) {
+  return request({
+    url: '/iot/device/events/history/' + deviceId + '/' + eventId,
+    method: 'get',
+    params: props
+  })
+}
+
+//*********************************设备日志****************************************
+// 分页查询设备日志列表
+export function listLog(deviceId, query) {
+  return request({
+    url: '/iot/device/logs/' + deviceId,
+    method: 'get',
+    params: query
+  })
+}
+
+//*********************************设备认证配置****************************************
+
+// 重置设备认证配置
+export function updateConfiguration(deviceId, configuration) {
+  return request({
+    url: '/iot/device/configuration/' + deviceId,
+    method: 'put',
+    data: configuration
+  })
+}
+
+
+// 重置设备认证配置
+export function resetConfiguration(deviceId) {
+  return request({
+    url: '/iot/device/configuration/reset/' + deviceId,
+    method: 'put'
+  })
+}
+
+//*********************************设备物模型****************************************
+
+// 获取物模型
+export function getMetadata(deviceId) {
+  return request({
+    url: '/iot/device/metadata/' + deviceId,
+    method: 'get'
+  })
+}
+
+// 更新设备物模型，更新后脱离产品物模型
+export function updateMetadata(deviceId, metadata) {
+  return request({
+    url: '/iot/device/metadata/' + deviceId,
+    method: 'put',
+    data: metadata
+  })
+}
+
+// 重置设备物模型
+export function resetMetadata(deviceId) {
+  return request({
+    url: '/iot/device/metadata/' + deviceId,
+    method: 'delete'
+  })
+}
+
+
+//*********************************协议支持****************************************
+// 更新协议支持
+export function updateProtocolStandby(deviceId, configuration) {
+  return request({
+    url: '/iot/device/protocol-standby/' + deviceId,
+    method: 'put',
+    data: configuration
+  })
+}
+
+
+// 重置设备协议支持
+export function resetProtocolStandby(deviceId) {
+  return request({
+    url: '/iot/device/protocol-standby/' + deviceId,
+    method: 'delete'
+  })
+}
+
+//*********************************协议支持****************************************
diff --git a/ruoyi-ui/src/api/information/api.js b/ruoyi-ui/src/api/information/api.js
index b474671a..d51d9299 100644
--- a/ruoyi-ui/src/api/information/api.js
+++ b/ruoyi-ui/src/api/information/api.js
@@ -78,4 +78,13 @@ export function getBoardContentData(query) {
     method: 'get',
     params: query
   })
-}
\ No newline at end of file
+}
+
+// 情报板控制
+export function deviceControl(data) {
+  return request({
+    url: '/system/template/deviceControl',
+    method: 'post',
+    data: data
+  })
+}
diff --git a/ruoyi-ui/src/assets/jihe/images/dialog/ibCls.png b/ruoyi-ui/src/assets/jihe/images/dialog/ibCls.png
new file mode 100644
index 00000000..c0d36c5e
Binary files /dev/null and b/ruoyi-ui/src/assets/jihe/images/dialog/ibCls.png differ
diff --git a/ruoyi-ui/src/assets/jihe/images/dialog/ibHeadDeco.png b/ruoyi-ui/src/assets/jihe/images/dialog/ibHeadDeco.png
new file mode 100644
index 00000000..6b9c2228
Binary files /dev/null and b/ruoyi-ui/src/assets/jihe/images/dialog/ibHeadDeco.png differ
diff --git a/ruoyi-ui/src/assets/jihe/images/user/author.png b/ruoyi-ui/src/assets/jihe/images/user/author.png
new file mode 100644
index 00000000..8a0bf82e
Binary files /dev/null and b/ruoyi-ui/src/assets/jihe/images/user/author.png differ
diff --git a/ruoyi-ui/src/assets/jihe/images/user/out.png b/ruoyi-ui/src/assets/jihe/images/user/out.png
new file mode 100644
index 00000000..2824a8db
Binary files /dev/null and b/ruoyi-ui/src/assets/jihe/images/user/out.png differ
diff --git a/ruoyi-ui/src/assets/jihe/images/user/set.png b/ruoyi-ui/src/assets/jihe/images/user/set.png
new file mode 100644
index 00000000..76fd9039
Binary files /dev/null and b/ruoyi-ui/src/assets/jihe/images/user/set.png differ
diff --git a/ruoyi-ui/src/assets/screen/bgc.png b/ruoyi-ui/src/assets/screen/bgc.png
new file mode 100644
index 00000000..e9f5a375
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/bgc.png differ
diff --git a/ruoyi-ui/src/assets/screen/bt.png b/ruoyi-ui/src/assets/screen/bt.png
new file mode 100644
index 00000000..84379f64
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/bt.png differ
diff --git a/ruoyi-ui/src/assets/screen/btn.png b/ruoyi-ui/src/assets/screen/btn.png
new file mode 100644
index 00000000..d9976206
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/btn.png differ
diff --git a/ruoyi-ui/src/assets/screen/byq.png b/ruoyi-ui/src/assets/screen/byq.png
new file mode 100644
index 00000000..f9520225
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/byq.png differ
diff --git a/ruoyi-ui/src/assets/screen/byqr.png b/ruoyi-ui/src/assets/screen/byqr.png
new file mode 100644
index 00000000..af6e40d2
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/byqr.png differ
diff --git a/ruoyi-ui/src/assets/screen/c1.png b/ruoyi-ui/src/assets/screen/c1.png
new file mode 100644
index 00000000..e028e7ff
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/c1.png differ
diff --git a/ruoyi-ui/src/assets/screen/c2.png b/ruoyi-ui/src/assets/screen/c2.png
new file mode 100644
index 00000000..bba8e92a
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/c2.png differ
diff --git a/ruoyi-ui/src/assets/screen/cdz1.png b/ruoyi-ui/src/assets/screen/cdz1.png
new file mode 100644
index 00000000..8b27891c
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/cdz1.png differ
diff --git a/ruoyi-ui/src/assets/screen/clse.png b/ruoyi-ui/src/assets/screen/clse.png
new file mode 100644
index 00000000..73984641
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/clse.png differ
diff --git a/ruoyi-ui/src/assets/screen/d1.png b/ruoyi-ui/src/assets/screen/d1.png
new file mode 100644
index 00000000..640c67d1
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/d1.png differ
diff --git a/ruoyi-ui/src/assets/screen/dc1.png b/ruoyi-ui/src/assets/screen/dc1.png
new file mode 100644
index 00000000..0824b38f
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/dc1.png differ
diff --git a/ruoyi-ui/src/assets/screen/dj.png b/ruoyi-ui/src/assets/screen/dj.png
new file mode 100644
index 00000000..602b89e6
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/dj.png differ
diff --git a/ruoyi-ui/src/assets/screen/dtit.png b/ruoyi-ui/src/assets/screen/dtit.png
new file mode 100644
index 00000000..0f3bc591
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/dtit.png differ
diff --git a/ruoyi-ui/src/assets/screen/fd1.png b/ruoyi-ui/src/assets/screen/fd1.png
new file mode 100644
index 00000000..eedcfb49
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/fd1.png differ
diff --git a/ruoyi-ui/src/assets/screen/flbg.png b/ruoyi-ui/src/assets/screen/flbg.png
new file mode 100644
index 00000000..ccd26c92
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/flbg.png differ
diff --git a/ruoyi-ui/src/assets/screen/fs.png b/ruoyi-ui/src/assets/screen/fs.png
new file mode 100644
index 00000000..7a24d1f1
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/fs.png differ
diff --git a/ruoyi-ui/src/assets/screen/fx1.png b/ruoyi-ui/src/assets/screen/fx1.png
new file mode 100644
index 00000000..cf913d6f
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/fx1.png differ
diff --git a/ruoyi-ui/src/assets/screen/fzd.png b/ruoyi-ui/src/assets/screen/fzd.png
new file mode 100644
index 00000000..99bf5c94
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/fzd.png differ
diff --git a/ruoyi-ui/src/assets/screen/gf1.png b/ruoyi-ui/src/assets/screen/gf1.png
new file mode 100644
index 00000000..9b49a9bc
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/gf1.png differ
diff --git a/ruoyi-ui/src/assets/screen/gfb.png b/ruoyi-ui/src/assets/screen/gfb.png
new file mode 100644
index 00000000..9af78042
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/gfb.png differ
diff --git a/ruoyi-ui/src/assets/screen/gjsj.png b/ruoyi-ui/src/assets/screen/gjsj.png
new file mode 100644
index 00000000..fae67d30
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/gjsj.png differ
diff --git a/ruoyi-ui/src/assets/screen/hjwd.png b/ruoyi-ui/src/assets/screen/hjwd.png
new file mode 100644
index 00000000..b4d90ffe
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/hjwd.png differ
diff --git a/ruoyi-ui/src/assets/screen/hjwd2.png b/ruoyi-ui/src/assets/screen/hjwd2.png
new file mode 100644
index 00000000..32b6c33c
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/hjwd2.png differ
diff --git a/ruoyi-ui/src/assets/screen/hth.png b/ruoyi-ui/src/assets/screen/hth.png
new file mode 100644
index 00000000..5dc69c1e
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/hth.png differ
diff --git a/ruoyi-ui/src/assets/screen/img1.png b/ruoyi-ui/src/assets/screen/img1.png
new file mode 100644
index 00000000..c76463ec
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/img1.png differ
diff --git a/ruoyi-ui/src/assets/screen/lix.png b/ruoyi-ui/src/assets/screen/lix.png
new file mode 100644
index 00000000..116eb659
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/lix.png differ
diff --git a/ruoyi-ui/src/assets/screen/ltit.png b/ruoyi-ui/src/assets/screen/ltit.png
new file mode 100644
index 00000000..65b21069
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/ltit.png differ
diff --git a/ruoyi-ui/src/assets/screen/lx.png b/ruoyi-ui/src/assets/screen/lx.png
new file mode 100644
index 00000000..e1a0a584
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/lx.png differ
diff --git a/ruoyi-ui/src/assets/screen/map.png b/ruoyi-ui/src/assets/screen/map.png
new file mode 100644
index 00000000..6bcbb5d4
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/map.png differ
diff --git a/ruoyi-ui/src/assets/screen/map2.png b/ruoyi-ui/src/assets/screen/map2.png
new file mode 100644
index 00000000..2599cdfc
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/map2.png differ
diff --git a/ruoyi-ui/src/assets/screen/mbg.png b/ruoyi-ui/src/assets/screen/mbg.png
new file mode 100644
index 00000000..90c818e5
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/mbg.png differ
diff --git a/ruoyi-ui/src/assets/screen/nbq.png b/ruoyi-ui/src/assets/screen/nbq.png
new file mode 100644
index 00000000..23844ebb
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/nbq.png differ
diff --git a/ruoyi-ui/src/assets/screen/nbq2.png b/ruoyi-ui/src/assets/screen/nbq2.png
new file mode 100644
index 00000000..222f2195
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/nbq2.png differ
diff --git a/ruoyi-ui/src/assets/screen/nbqbg.png b/ruoyi-ui/src/assets/screen/nbqbg.png
new file mode 100644
index 00000000..9fad2098
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/nbqbg.png differ
diff --git a/ruoyi-ui/src/assets/screen/ph1.png b/ruoyi-ui/src/assets/screen/ph1.png
new file mode 100644
index 00000000..81bc1348
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/ph1.png differ
diff --git a/ruoyi-ui/src/assets/screen/q1.png b/ruoyi-ui/src/assets/screen/q1.png
new file mode 100644
index 00000000..2376120c
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/q1.png differ
diff --git a/ruoyi-ui/src/assets/screen/q2.png b/ruoyi-ui/src/assets/screen/q2.png
new file mode 100644
index 00000000..f352511e
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/q2.png differ
diff --git a/ruoyi-ui/src/assets/screen/q3.png b/ruoyi-ui/src/assets/screen/q3.png
new file mode 100644
index 00000000..9255390c
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/q3.png differ
diff --git a/ruoyi-ui/src/assets/screen/r1.png b/ruoyi-ui/src/assets/screen/r1.png
new file mode 100644
index 00000000..257f2f4d
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/r1.png differ
diff --git a/ruoyi-ui/src/assets/screen/r2.png b/ruoyi-ui/src/assets/screen/r2.png
new file mode 100644
index 00000000..257f2f4d
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/r2.png differ
diff --git a/ruoyi-ui/src/assets/screen/rgth.png b/ruoyi-ui/src/assets/screen/rgth.png
new file mode 100644
index 00000000..16cdf290
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/rgth.png differ
diff --git a/ruoyi-ui/src/assets/screen/sb1.png b/ruoyi-ui/src/assets/screen/sb1.png
new file mode 100644
index 00000000..2c147f65
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/sb1.png differ
diff --git a/ruoyi-ui/src/assets/screen/sd.png b/ruoyi-ui/src/assets/screen/sd.png
new file mode 100644
index 00000000..be153188
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/sd.png differ
diff --git a/ruoyi-ui/src/assets/screen/select.png b/ruoyi-ui/src/assets/screen/select.png
new file mode 100644
index 00000000..69ca7bc0
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/select.png differ
diff --git a/ruoyi-ui/src/assets/screen/sp2.png b/ruoyi-ui/src/assets/screen/sp2.png
new file mode 100644
index 00000000..073e9027
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/sp2.png differ
diff --git a/ruoyi-ui/src/assets/screen/sp3.png b/ruoyi-ui/src/assets/screen/sp3.png
new file mode 100644
index 00000000..52bf68de
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/sp3.png differ
diff --git a/ruoyi-ui/src/assets/screen/sp4.png b/ruoyi-ui/src/assets/screen/sp4.png
new file mode 100644
index 00000000..648e310d
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/sp4.png differ
diff --git a/ruoyi-ui/src/assets/screen/timg.png b/ruoyi-ui/src/assets/screen/timg.png
new file mode 100644
index 00000000..fb761143
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/timg.png differ
diff --git a/ruoyi-ui/src/assets/screen/top.png b/ruoyi-ui/src/assets/screen/top.png
new file mode 100644
index 00000000..c6d2c113
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/top.png differ
diff --git a/ruoyi-ui/src/assets/screen/tx1.png b/ruoyi-ui/src/assets/screen/tx1.png
new file mode 100644
index 00000000..33b869e6
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/tx1.png differ
diff --git a/ruoyi-ui/src/assets/screen/wgth.png b/ruoyi-ui/src/assets/screen/wgth.png
new file mode 100644
index 00000000..0246371a
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/wgth.png differ
diff --git a/ruoyi-ui/src/assets/screen/wjx1.png b/ruoyi-ui/src/assets/screen/wjx1.png
new file mode 100644
index 00000000..5b60656c
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/wjx1.png differ
diff --git a/ruoyi-ui/src/assets/screen/wxzLeft.png b/ruoyi-ui/src/assets/screen/wxzLeft.png
new file mode 100644
index 00000000..f21f8a3e
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/wxzLeft.png differ
diff --git a/ruoyi-ui/src/assets/screen/wxzright.png b/ruoyi-ui/src/assets/screen/wxzright.png
new file mode 100644
index 00000000..5a567e4e
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/wxzright.png differ
diff --git a/ruoyi-ui/src/assets/screen/xds1.png b/ruoyi-ui/src/assets/screen/xds1.png
new file mode 100644
index 00000000..fa9d495c
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xds1.png differ
diff --git a/ruoyi-ui/src/assets/screen/xl.png b/ruoyi-ui/src/assets/screen/xl.png
new file mode 100644
index 00000000..8106479e
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xl.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/actbtn.png b/ruoyi-ui/src/assets/screen/xtb/actbtn.png
new file mode 100644
index 00000000..34df98a7
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/actbtn.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/addbtn.png b/ruoyi-ui/src/assets/screen/xtb/addbtn.png
new file mode 100644
index 00000000..93dad3c7
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/addbtn.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/btnbg.png b/ruoyi-ui/src/assets/screen/xtb/btnbg.png
new file mode 100644
index 00000000..9f7f7a2f
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/btnbg.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/fwqdot.png b/ruoyi-ui/src/assets/screen/xtb/fwqdot.png
new file mode 100644
index 00000000..70877625
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/fwqdot.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/gg.png b/ruoyi-ui/src/assets/screen/xtb/gg.png
new file mode 100644
index 00000000..c3f48e6d
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/gg.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/gzsj/fjd.png b/ruoyi-ui/src/assets/screen/xtb/gzsj/fjd.png
new file mode 100644
index 00000000..5e802947
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/gzsj/fjd.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/gzsj/fjdc.png b/ruoyi-ui/src/assets/screen/xtb/gzsj/fjdc.png
new file mode 100644
index 00000000..93f3154d
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/gzsj/fjdc.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/gzsj/nxb.png b/ruoyi-ui/src/assets/screen/xtb/gzsj/nxb.png
new file mode 100644
index 00000000..8044f563
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/gzsj/nxb.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/gzsj/nxbz.png b/ruoyi-ui/src/assets/screen/xtb/gzsj/nxbz.png
new file mode 100644
index 00000000..76b96657
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/gzsj/nxbz.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/gzsj/ps.png b/ruoyi-ui/src/assets/screen/xtb/gzsj/ps.png
new file mode 100644
index 00000000..2466d953
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/gzsj/ps.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/gzsj/psw.png b/ruoyi-ui/src/assets/screen/xtb/gzsj/psw.png
new file mode 100644
index 00000000..d459b119
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/gzsj/psw.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/gzsj/xrb.png b/ruoyi-ui/src/assets/screen/xtb/gzsj/xrb.png
new file mode 100644
index 00000000..0d2e4bd1
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/gzsj/xrb.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/gzsj/xrbz.png b/ruoyi-ui/src/assets/screen/xtb/gzsj/xrbz.png
new file mode 100644
index 00000000..20c46542
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/gzsj/xrbz.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/gzsj/ydl.png b/ruoyi-ui/src/assets/screen/xtb/gzsj/ydl.png
new file mode 100644
index 00000000..5380df54
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/gzsj/ydl.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/gzsj/ydud.png b/ruoyi-ui/src/assets/screen/xtb/gzsj/ydud.png
new file mode 100644
index 00000000..e67a0da4
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/gzsj/ydud.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/gzsj/yhb.png b/ruoyi-ui/src/assets/screen/xtb/gzsj/yhb.png
new file mode 100644
index 00000000..399e909f
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/gzsj/yhb.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/gzsj/yhbz.png b/ruoyi-ui/src/assets/screen/xtb/gzsj/yhbz.png
new file mode 100644
index 00000000..e5101333
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/gzsj/yhbz.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jhbtn.png b/ruoyi-ui/src/assets/screen/xtb/jhbtn.png
new file mode 100644
index 00000000..728e9a97
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jhbtn.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj.png b/ruoyi-ui/src/assets/screen/xtb/jtsj.png
new file mode 100644
index 00000000..c9963045
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/clgz.png b/ruoyi-ui/src/assets/screen/xtb/jtsj/clgz.png
new file mode 100644
index 00000000..a6ac7b21
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/clgz.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/clsg.png b/ruoyi-ui/src/assets/screen/xtb/jtsj/clsg.png
new file mode 100644
index 00000000..728eb5e0
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/clsg.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/ffsl (1).png b/ruoyi-ui/src/assets/screen/xtb/jtsj/ffsl (1).png
new file mode 100644
index 00000000..235483e1
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/ffsl (1).png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/ffsl.png b/ruoyi-ui/src/assets/screen/xtb/jtsj/ffsl.png
new file mode 100644
index 00000000..5f4ff1bc
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/ffsl.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/fwqy.png b/ruoyi-ui/src/assets/screen/xtb/jtsj/fwqy.png
new file mode 100644
index 00000000..8a5facca
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/fwqy.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/fwqyc.png b/ruoyi-ui/src/assets/screen/xtb/jtsj/fwqyc.png
new file mode 100644
index 00000000..d467f774
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/fwqyc.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/jtg.png b/ruoyi-ui/src/assets/screen/xtb/jtsj/jtg.png
new file mode 100644
index 00000000..b3e774d1
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/jtg.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/jtgz.png b/ruoyi-ui/src/assets/screen/xtb/jtsj/jtgz.png
new file mode 100644
index 00000000..3d6c6b29
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/jtgz.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/jts.png b/ruoyi-ui/src/assets/screen/xtb/jtsj/jts.png
new file mode 100644
index 00000000..f7f810f2
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/jts.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/jtsg.png b/ruoyi-ui/src/assets/screen/xtb/jtsj/jtsg.png
new file mode 100644
index 00000000..aefe61ed
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/jtsg.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/jty.png b/ruoyi-ui/src/assets/screen/xtb/jtsj/jty.png
new file mode 100644
index 00000000..9147a843
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/jty.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/jtyd.png b/ruoyi-ui/src/assets/screen/xtb/jtsj/jtyd.png
new file mode 100644
index 00000000..fbc027b9
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/jtyd.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/lzq.png b/ruoyi-ui/src/assets/screen/xtb/jtsj/lzq.png
new file mode 100644
index 00000000..d2039108
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/lzq.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/lzqc.png b/ruoyi-ui/src/assets/screen/xtb/jtsj/lzqc.png
new file mode 100644
index 00000000..6b1f9f8a
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/lzqc.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/qtsj (1).png b/ruoyi-ui/src/assets/screen/xtb/jtsj/qtsj (1).png
new file mode 100644
index 00000000..e9272107
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/qtsj (1).png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/qtsj.png b/ruoyi-ui/src/assets/screen/xtb/jtsj/qtsj.png
new file mode 100644
index 00000000..612325f2
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/qtsj.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/sgj.png b/ruoyi-ui/src/assets/screen/xtb/jtsj/sgj.png
new file mode 100644
index 00000000..66311231
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/sgj.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/sgjs.png b/ruoyi-ui/src/assets/screen/xtb/jtsj/sgjs.png
new file mode 100644
index 00000000..ffc99475
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/sgjs.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/sssby.png b/ruoyi-ui/src/assets/screen/xtb/jtsj/sssby.png
new file mode 100644
index 00000000..fcef8ad4
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/sssby.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/sssbyh.png b/ruoyi-ui/src/assets/screen/xtb/jtsj/sssbyh.png
new file mode 100644
index 00000000..80c4c5ac
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/sssbyh.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/yct.png b/ruoyi-ui/src/assets/screen/xtb/jtsj/yct.png
new file mode 100644
index 00000000..04c8312e
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/yct.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtsj/yctq.png b/ruoyi-ui/src/assets/screen/xtb/jtsj/yctq.png
new file mode 100644
index 00000000..757dd9dc
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtsj/yctq.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/jtyc.png b/ruoyi-ui/src/assets/screen/xtb/jtyc.png
new file mode 100644
index 00000000..d9a5c0e1
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/jtyc.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb.png b/ruoyi-ui/src/assets/screen/xtb/lcsb.png
new file mode 100644
index 00000000..aa87d03e
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/hl.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/hl.png
new file mode 100644
index 00000000..05bab6df
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/hl.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/hlp.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/hlp.png
new file mode 100644
index 00000000..687a87db
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/hlp.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/hlpz.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/hlpz.png
new file mode 100644
index 00000000..8488e690
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/hlpz.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/hlq.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/hlq.png
new file mode 100644
index 00000000..8061be8d
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/hlq.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/hmb.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/hmb.png
new file mode 100644
index 00000000..7afb7c15
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/hmb.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/hmbld.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/hmbld.png
new file mode 100644
index 00000000..e48981fd
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/hmbld.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/jdq.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/jdq.png
new file mode 100644
index 00000000..679a34ed
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/jdq.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/jx.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/jx.png
new file mode 100644
index 00000000..13cb9bbb
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/jx.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/plh.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/plh.png
new file mode 100644
index 00000000..76ca84db
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/plh.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/plhx.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/plhx.png
new file mode 100644
index 00000000..01ca7178
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/plhx.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/qb.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/qb.png
new file mode 100644
index 00000000..b53d9dda
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/qb.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/qbb.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/qbb.png
new file mode 100644
index 00000000..f29d87bc
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/qbb.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/qxj.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/qxj.png
new file mode 100644
index 00000000..2e6741dd
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/qxj.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/qxjc.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/qxjc.png
new file mode 100644
index 00000000..2cdb300a
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/qxjc.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/sb.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/sb.png
new file mode 100644
index 00000000..d2167f93
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/sb.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/sbx.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/sbx.png
new file mode 100644
index 00000000..5aa91e25
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/sbx.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/sx.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/sx.png
new file mode 100644
index 00000000..577437e7
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/sx.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/sxj.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/sxj.png
new file mode 100644
index 00000000..1a9854e7
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/sxj.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/xcy.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/xcy.png
new file mode 100644
index 00000000..9debd82d
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/xcy.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/xcyd.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/xcyd.png
new file mode 100644
index 00000000..1463cb5a
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/xcyd.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/yyg.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/yyg.png
new file mode 100644
index 00000000..58734b22
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/yyg.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/yygb.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/yygb.png
new file mode 100644
index 00000000..c67a49ac
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/yygb.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/zhgl.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/zhgl.png
new file mode 100644
index 00000000..dec851ef
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/zhgl.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lcsb/zhz.png b/ruoyi-ui/src/assets/screen/xtb/lcsb/zhz.png
new file mode 100644
index 00000000..7d905481
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lcsb/zhz.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/le.png b/ruoyi-ui/src/assets/screen/xtb/le.png
new file mode 100644
index 00000000..70ba7f91
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/le.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/left.png b/ruoyi-ui/src/assets/screen/xtb/left.png
new file mode 100644
index 00000000..de3d5974
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/left.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/leftd.png b/ruoyi-ui/src/assets/screen/xtb/leftd.png
new file mode 100644
index 00000000..9ccbeac5
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/leftd.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/ljdot.png b/ruoyi-ui/src/assets/screen/xtb/ljdot.png
new file mode 100644
index 00000000..eb772cd2
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/ljdot.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lwss.png b/ruoyi-ui/src/assets/screen/xtb/lwss.png
new file mode 100644
index 00000000..002a58d8
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lwss.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lwss/fw.png b/ruoyi-ui/src/assets/screen/xtb/lwss/fw.png
new file mode 100644
index 00000000..e3f79218
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lwss/fw.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lwss/fwq.png b/ruoyi-ui/src/assets/screen/xtb/lwss/fwq.png
new file mode 100644
index 00000000..535e6996
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lwss/fwq.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lwss/qlb.png b/ruoyi-ui/src/assets/screen/xtb/lwss/qlb.png
new file mode 100644
index 00000000..3f5f9960
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lwss/qlb.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lwss/qlbz.png b/ruoyi-ui/src/assets/screen/xtb/lwss/qlbz.png
new file mode 100644
index 00000000..b4bdd23e
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lwss/qlbz.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lwss/sf.png b/ruoyi-ui/src/assets/screen/xtb/lwss/sf.png
new file mode 100644
index 00000000..31ef876e
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lwss/sf.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lwss/sfz.png b/ruoyi-ui/src/assets/screen/xtb/lwss/sfz.png
new file mode 100644
index 00000000..886f5afd
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lwss/sfz.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lwss/snl.png b/ruoyi-ui/src/assets/screen/xtb/lwss/snl.png
new file mode 100644
index 00000000..33935238
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lwss/snl.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lwss/snlj.png b/ruoyi-ui/src/assets/screen/xtb/lwss/snlj.png
new file mode 100644
index 00000000..e8a34745
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lwss/snlj.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lwss/tc.png b/ruoyi-ui/src/assets/screen/xtb/lwss/tc.png
new file mode 100644
index 00000000..44e9868a
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lwss/tc.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/lwss/tcq.png b/ruoyi-ui/src/assets/screen/xtb/lwss/tcq.png
new file mode 100644
index 00000000..edd3f84f
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/lwss/tcq.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/qbba.png b/ruoyi-ui/src/assets/screen/xtb/qbba.png
new file mode 100644
index 00000000..1add3093
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/qbba.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/qbbdot.png b/ruoyi-ui/src/assets/screen/xtb/qbbdot.png
new file mode 100644
index 00000000..9405be96
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/qbbdot.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/qbbti.png b/ruoyi-ui/src/assets/screen/xtb/qbbti.png
new file mode 100644
index 00000000..6fe371aa
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/qbbti.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/qbbtit.png b/ruoyi-ui/src/assets/screen/xtb/qbbtit.png
new file mode 100644
index 00000000..a3f25a4b
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/qbbtit.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/right.png b/ruoyi-ui/src/assets/screen/xtb/right.png
new file mode 100644
index 00000000..d7258e1d
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/right.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/sb.png b/ruoyi-ui/src/assets/screen/xtb/sb.png
new file mode 100644
index 00000000..fbe0c39c
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/sb.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/sfzdot.png b/ruoyi-ui/src/assets/screen/xtb/sfzdot.png
new file mode 100644
index 00000000..5ba7c741
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/sfzdot.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/sjgz.png b/ruoyi-ui/src/assets/screen/xtb/sjgz.png
new file mode 100644
index 00000000..fe7fc954
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/sjgz.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/titbg.png b/ruoyi-ui/src/assets/screen/xtb/titbg.png
new file mode 100644
index 00000000..d4f9f72d
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/titbg.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/xjbuttom.png b/ruoyi-ui/src/assets/screen/xtb/xjbuttom.png
new file mode 100644
index 00000000..0f76beac
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/xjbuttom.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/xjleft.png b/ruoyi-ui/src/assets/screen/xtb/xjleft.png
new file mode 100644
index 00000000..734de591
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/xjleft.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/xjright.png b/ruoyi-ui/src/assets/screen/xtb/xjright.png
new file mode 100644
index 00000000..cbb4559e
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/xjright.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/xjtop.png b/ruoyi-ui/src/assets/screen/xtb/xjtop.png
new file mode 100644
index 00000000..22e1e05b
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/xjtop.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/xx.png b/ruoyi-ui/src/assets/screen/xtb/xx.png
new file mode 100644
index 00000000..16c718b1
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/xx.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/zklb.png b/ruoyi-ui/src/assets/screen/xtb/zklb.png
new file mode 100644
index 00000000..40b89b21
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/zklb.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/zktj.png b/ruoyi-ui/src/assets/screen/xtb/zktj.png
new file mode 100644
index 00000000..10120d93
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/zktj.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/zktjl.png b/ruoyi-ui/src/assets/screen/xtb/zktjl.png
new file mode 100644
index 00000000..eaec51ee
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/zktjl.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/ztbtn.png b/ruoyi-ui/src/assets/screen/xtb/ztbtn.png
new file mode 100644
index 00000000..1d2516cb
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/ztbtn.png differ
diff --git a/ruoyi-ui/src/assets/screen/xtb/zz.png b/ruoyi-ui/src/assets/screen/xtb/zz.png
new file mode 100644
index 00000000..18014c68
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xtb/zz.png differ
diff --git a/ruoyi-ui/src/assets/screen/xzL.png b/ruoyi-ui/src/assets/screen/xzL.png
new file mode 100644
index 00000000..065a352e
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xzL.png differ
diff --git a/ruoyi-ui/src/assets/screen/xzR.png b/ruoyi-ui/src/assets/screen/xzR.png
new file mode 100644
index 00000000..1b4dfc77
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/xzR.png differ
diff --git a/ruoyi-ui/src/assets/screen/yc.png b/ruoyi-ui/src/assets/screen/yc.png
new file mode 100644
index 00000000..0b954d47
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/yc.png differ
diff --git a/ruoyi-ui/src/assets/screen/yct.png b/ruoyi-ui/src/assets/screen/yct.png
new file mode 100644
index 00000000..eb23fd7e
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/yct.png differ
diff --git a/ruoyi-ui/src/assets/screen/yic.png b/ruoyi-ui/src/assets/screen/yic.png
new file mode 100644
index 00000000..b18047c2
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/yic.png differ
diff --git a/ruoyi-ui/src/assets/screen/zc.png b/ruoyi-ui/src/assets/screen/zc.png
new file mode 100644
index 00000000..0f6be68d
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/zc.png differ
diff --git a/ruoyi-ui/src/assets/screen/zhengc.png b/ruoyi-ui/src/assets/screen/zhengc.png
new file mode 100644
index 00000000..717889b6
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/zhengc.png differ
diff --git a/ruoyi-ui/src/assets/screen/zjwd.png b/ruoyi-ui/src/assets/screen/zjwd.png
new file mode 100644
index 00000000..247c32d0
Binary files /dev/null and b/ruoyi-ui/src/assets/screen/zjwd.png differ
diff --git a/ruoyi-ui/src/assets/styles/JiHeExpressway.scss b/ruoyi-ui/src/assets/styles/JiHeExpressway.scss
index 72b087ce..7dede843 100644
--- a/ruoyi-ui/src/assets/styles/JiHeExpressway.scss
+++ b/ruoyi-ui/src/assets/styles/JiHeExpressway.scss
@@ -125,4 +125,43 @@
       }
     }
   }
+  .el-menu--popup-bottom-start{
+    margin-top: 16px;
+  }
+  .el-menu--popup {
+    border-radius: 0;
+    background: linear-gradient(180deg, rgba(6, 66, 88, 0.5) 0%, #064258 93%);
+    border: 1px solid;
+    border-image: linear-gradient(0deg, rgba(55, 231, 255, 0.5), rgba(55, 231, 255, 0)) 10 10;
+    .el-submenu__title {}
+
+    .el-submenu__icon-arrow {}
+
+    .el-menu-item, .el-submenu__title{
+      text-align: center;
+        background: none;
+        font-size: 16px;
+        font-weight: bold;
+        color: #00D1FF;
+        border: 1px solid transparent;
+        transition: none;
+
+        .el-submenu__icon-arrow{
+          color: #00D1FF;
+        }
+      
+        &:hover {
+          color: #fff;
+          background: linear-gradient(90deg, rgba(164, 255, 250, 0) 0%, rgba(164, 255, 250, 0.42) 50%, rgba(164, 255, 250, 0) 100%);
+          border: 1px solid;
+          border-image: linear-gradient(90deg, rgba(190, 255, 246, 0.03) 0%, rgba(190, 255, 246, 1) 50%, rgba(190, 255, 246, 0.03) 100%) 1 1;
+        }
+        p{
+          color: #FFF;
+        }
+    }
+    .el-menu-item.is-active, .el-submenu__title.is-active{
+        color: #FFF;
+    }
+  }
 }
\ No newline at end of file
diff --git a/ruoyi-ui/src/layout/index.vue b/ruoyi-ui/src/layout/index.vue
index 74d24e9a..fe8f9720 100644
--- a/ruoyi-ui/src/layout/index.vue
+++ b/ruoyi-ui/src/layout/index.vue
@@ -1,43 +1,22 @@
 <template>
   <div>
-    <template
-      v-if="
-        sideTheme == 'theme-dark' ||
-        sideTheme == 'theme-light' ||
-        sideTheme == 'theme-blue'
-      "
-    >
+    <template v-if="sideTheme == 'theme-dark' ||
+      sideTheme == 'theme-light' ||
+      sideTheme == 'theme-blue'
+      ">
       <div :class="classObj" class="app-wrapper">
-        <div
-          v-if="device === 'mobile' && sidebar.opened"
-          class="drawer-bg mapBox"
-          @click="handleClickOutside"
-        />
+        <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg mapBox" @click="handleClickOutside" />
         <!-- 左右结构 -->
         <template v-if="topNav == false">
           <sidebar class="sidebar-container" />
-          <div
-            :class="{ hasTagsView: needTagsView }"
-            class="main-container"
-            :style="fixedHeaderClass"
-          >
-            <div
-              :class="{ 'fixed-header': fixedHeader }"
-              :style="fixedHeader ? 'background-color:white;' : ''"
-            >
+          <div :class="{ hasTagsView: needTagsView }" class="main-container" :style="fixedHeaderClass">
+            <div :class="{ 'fixed-header': fixedHeader }" :style="fixedHeader ? 'background-color:white;' : ''">
               <navbar style="display: block; height: 7.6vh" />
               <!-- <tags-view v-if="needTagsView" /> -->
             </div>
-            <div
-              :class="getRoute2($route.path) ? '' : 'breadcrumbAppmainBox'"
-              style="height: 100%"
-            >
-              <breadcrumb
-                :style="'display:' + getRoute($route.path) + ';'"
-                ref="Breadcrumb"
-                id="breadcrumb-container"
-                class="breadcrumb-container"
-              />
+            <div :class="getRoute2($route.path) ? '' : 'breadcrumbAppmainBox'" style="height: 100%">
+              <breadcrumb :style="'display:' + getRoute($route.path) + ';'" ref="Breadcrumb" id="breadcrumb-container"
+                class="breadcrumb-container" />
               <app-main />
             </div>
 
@@ -48,77 +27,53 @@
         </template>
         <!-- 上下结构 -->
         <template v-else>
-          <div
-            :class="{ 'fixed-header': fixedHeader }"
-            :style="fixedHeader ? 'width:100%;' : ''"
-            v-if="titleHeader == '0'"
-          >
-            <div
-              :class="
-                $route.path == '/map/map3d/index'
-                  ? 'topNav_head mapBox'
-                  : $route.path == '/energy'
+          <div :class="{ 'fixed-header': fixedHeader }" :style="fixedHeader ? 'width:100%;' : ''"
+            v-if="titleHeader == '0'">
+            <div :class="$route.path == '/map/map3d/index'
+                ? 'topNav_head mapBox'
+                : $route.path == '/energy'
                   ? 'topNav_head mapBox'
                   : 'topNav_head'
-              "
-            >
-              <sidebar
-                class="sidebar-container index_menu blue_index_menu"
-                style="
+              ">
+              <sidebar class="sidebar-container index_menu blue_index_menu" style="
                   width: 75% !important;
                   position: relative;
                   box-shadow: unset;
                   float: left;
                   display: flex;
                   align-items: center;
-                "
-              />
+                " />
               <template v-if="weatherView">
                 <div class="weather">
                   <img :src="weather_weatherimg" />
                   <p>{{ weather_weather }}</p>
                 </div>
               </template>
-              <navbar
-                :class="
-                  sideTheme == 'theme-light'
-                    ? 'theme-light-navbar'
-                    : 'theme-dark-navbar'
-                "
-                :style="
-                  weatherView
-                    ? 'width: 15%!important;justify-content:right;'
-                    : 'width: 25%;justify-content:right;display:flex'
-                "
-              />
+              <navbar :class="sideTheme == 'theme-light'
+                  ? 'theme-light-navbar'
+                  : 'theme-dark-navbar'
+                " :style="weatherView
+      ? 'width: 15%!important;justify-content:right;'
+      : 'width: 25%;justify-content:right;display:flex'
+    " />
             </div>
           </div>
           <!-- 标题放中间 -->
-          <div
-            :class="{ 'fixed-header': fixedHeader }"
-            :style="fixedHeader ? 'width:100%;' : ''"
-            v-if="titleHeader == '1'"
-          >
-            <div
-              :class="
-                $route.path == ('/map/map3d/index' || '/energy')
-                  ? 'topNav_head_center mapBox'
-                  : 'topNav_head_center'
-              "
-              :style="{
-                backgroundColor:sideTheme == 'theme-dark'?($route.path == '/index' ? '#010913' : '#004375'):'#100A43'
-              }"
-
-            >
-              <centerbar
-                style="
+          <div :class="{ 'fixed-header': fixedHeader }" :style="fixedHeader ? 'width:100%;' : ''"
+            v-if="titleHeader == '1'">
+            <div :class="$route.path == ('/map/map3d/index' || '/energy')
+                ? 'topNav_head_center mapBox'
+                : 'topNav_head_center'
+              " :style="{
+    backgroundColor: sideTheme == 'theme-dark' ? ($route.path == '/index' ? '#010913' : '#004375') : '#100A43'
+  }">
+              <centerbar style="
                   width: 100% !important;
                   height: 7.6vh;
                   position: relative;
                   box-shadow: unset;
                   display: flex;
-                "
-              ></centerbar>
+                "></centerbar>
               <!-- <sidebar
                 class="sidebar-container index_menu blue_index_menu"
                 style="
@@ -132,23 +87,14 @@
               /> -->
             </div>
           </div>
-          <div
-            :class="{ hasTagsView: needTagsView }"
-            class="main-container"
-            :style="
-              fixedHeader
-                ? 'padding-top:50px;margin-left:0px;'
-                : 'margin-left:0px;'
-            "
-          >
+          <div :class="{ hasTagsView: needTagsView }" class="main-container" :style="fixedHeader
+              ? 'padding-top:50px;margin-left:0px;'
+              : 'margin-left:0px;'
+            ">
             <!-- <div :class=""> -->
             <div :class="getRoute2($route.path) ? 'noSeparate' : 'separate'">
-              <breadcrumb
-                :style="'display:' + getRoute($route.path) + ';'"
-                ref="Breadcrumb"
-                id="breadcrumb-container"
-                class="breadcrumb-container"
-              />
+              <breadcrumb :style="'display:' + getRoute($route.path) + ';'" ref="Breadcrumb" id="breadcrumb-container"
+                class="breadcrumb-container" />
               <app-main />
               <right-panel>
                 <settings />
@@ -164,10 +110,7 @@
                 ></div>
               </el-badge> -->
               <evtDialogOneThing v-if="evtDialogOneThing"></evtDialogOneThing>
-              <event-dialog
-                v-if="eventDialogPic"
-                ref="picDialog"
-              ></event-dialog>
+              <event-dialog v-if="eventDialogPic" ref="picDialog"></event-dialog>
               <event-dialogTable v-if="eventDialogTable"></event-dialogTable>
               <evtDialogVideo v-if="evtDialogVideo"></evtDialogVideo>
             </div>
@@ -180,40 +123,26 @@
       <div :class="classObj" class="app-wrapper">
         <div :class="{ 'fixed-header': fixedHeader }">
           <div class="topNavHeadBlue">
-            <sidebarblue
-              class="sidebar-container index_menu blue_index_menu"
-              style="width: 73% !important; float: left"
-            />
+            <sidebarblue class="sidebar-container index_menu blue_index_menu"
+              style="width: 73% !important; float: left" />
             <template v-if="weatherView == true">
               <div class="weather">
                 <img :src="weather_weatherimg" />
                 <p>{{ weather_weather }}</p>
               </div>
             </template>
-            <navbar
-              class="theme-blue-navbar"
-              :style="
-                weatherView
-                  ? 'width: 12%!important;height:50px;float:left;'
-                  : 'margin-left:10%;width: 12%!important;height:50px;float:left;'
-              "
-            />
+            <navbar class="theme-blue-navbar" :style="weatherView
+                ? 'width: 12%!important;height:50px;float:left;'
+                : 'margin-left:10%;width: 12%!important;height:50px;float:left;'
+              " />
             <div class="clear"></div>
           </div>
         </div>
-        <div
-          :class="{ hasTagsView: needTagsView }"
-          class="main-container"
-          :style="fixedHeaderClass"
-        >
+        <div :class="{ hasTagsView: needTagsView }" class="main-container" :style="fixedHeaderClass">
           <div :class="{ 'fixed-header': fixedHeader }"></div>
           <template v-if="is_breadcrumb == 'true' && $route.path != '/index'">
-            <breadcrumb
-              ref="Breadcrumb"
-              id="breadcrumb-container"
-              class="breadcrumb-container"
-              style="margin-top: 20px; margin-left: 20px"
-            />
+            <breadcrumb ref="Breadcrumb" id="breadcrumb-container" class="breadcrumb-container"
+              style="margin-top: 20px; margin-left: 20px" />
           </template>
           <app-main />
           <right-panel>
@@ -345,7 +274,7 @@ export default {
     },
   },
   created() {
-    console.log(this.titleHeader,"this.titleHeader");
+    console.log(this.titleHeader, "this.titleHeader");
     console.log(this.$route.path, "路由");
     if (this.$route.path == "/tunnel") {
       if (
@@ -503,6 +432,7 @@ export default {
 <style lang="scss" scoped>
 @import "~@/assets/styles/mixin.scss";
 @import "~@/assets/styles/variables.scss";
+
 // 区分不同主题下导航栏颜色
 .mapBox {
   position: fixed;
@@ -511,6 +441,7 @@ export default {
   width: 100%;
   z-index: 999;
 }
+
 // .theme-light-navbar {
 //   background-color: white;
 // }
@@ -519,18 +450,22 @@ export default {
   position: relative;
   height: 100%;
   width: 100%;
+
   // overflow: hidden;
   &.mobile.openSidebar {
     position: fixed;
     top: 0;
   }
 }
+
 .topNav_head .has-logo {
   background: transparent !important;
 }
+
 .has-logo {
   background: rgb(0, 67, 117);
 }
+
 .drawer-bg {
   background: #000;
   opacity: 0.3;
@@ -557,23 +492,28 @@ export default {
 .mobile .fixed-header {
   width: 100%;
 }
+
 // .theme-light .topNav_head{background-color: #ffffff}
 .topNavHeadBlue {
   box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
   background-size: 100% 100%;
   width: 100%;
 }
+
 .topNavHeadBlue .index_menu .theme-blue {
   background-color: unset !important;
 }
+
 .theme-blue-navbar {
   box-shadow: unset;
 }
+
 .theme-blue {
   .theme-blue-navbar {
     background-color: unset;
   }
 }
+
 .weather p {
   color: white;
   height: 50px;
@@ -582,10 +522,12 @@ export default {
   white-space: nowrap;
   font-size: 14px;
 }
+
 .weather img {
   width: 25px;
   height: 25px;
 }
+
 .weather {
   display: flex;
   justify-content: center;
@@ -593,9 +535,11 @@ export default {
   width: 11%;
   float: left;
 }
+
 .theme-blue-box {
   height: 100%;
 }
+
 .theme-light {
   .weather {
     p {
@@ -603,6 +547,7 @@ export default {
     }
   }
 }
+
 .eventIcon {
   position: absolute;
   top: calc(100% - 50px);
@@ -616,10 +561,12 @@ export default {
   line-height: 40px;
   color: white;
 }
+
 .el-icon-s-order:before {
   font-size: 24px;
 }
-.main-container > div {
+
+.main-container>div {
   background: rgb(0, 67, 117);
 }
 </style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/UserArea.vue b/ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/UserArea.vue
new file mode 100644
index 00000000..5fbbaa50
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/UserArea.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="operations">
+    <div class="opCon">
+      <el-dropdown class="userBox">
+        <span class="user">
+          <img class="icon head" src="@/assets/jihe/images/user/author.png" alt="">
+          <p class="title"><span class="txt">admin</span><i class="menuIcon el-icon-arrow-down el-icon--right"></i></p>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>
+            <router-link to="/user/profile">
+              <el-dropdown-item>个人中心</el-dropdown-item>
+            </router-link>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <div class="config"><img class="icon" src="@/assets/jihe/images/user/set.png" alt=""></div>
+      <div class="logout" @click="logout"><img class="icon" src="@/assets/jihe/images/user/out.png" alt=""></div>
+    </div>
+  </div>
+  </template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+import Screenfull from '@/components/Screenfull'
+import SizeSelect from '@/components/SizeSelect'
+import Search from '@/components/HeaderSearch'
+import RuoYiGit from '@/components/RuoYi/Git'
+// import BigScreen from '@/components/bigScreen'
+import RuoYiDoc from '@/components/RuoYi/Doc'
+export default {
+  data() {
+    return {
+      dialogShow: false,
+      warningList: [],
+      unReadWarningList: [],
+      warnTypes: [
+        { value: 0, label: '遥测越限' },
+        { value: 1, label: '遥信告警' },
+        { value: 2, label: '通道告警' },
+        { value: 3, label: '其他事项' }
+      ],
+      dealStatuss: [
+        { value: '', label: '全部' },
+        { value: 0, label: '未处理' },
+        { value: 1, label: '处理中' },
+        { value: 2, label: '已处理' },
+        { value: 3, label: '已忽略' }
+      ],
+      // 总条数
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        deviceCode: ''
+      },
+      visible: false,
+      recordForm: {}
+    }
+  },
+  components: {
+    Breadcrumb,
+    Hamburger,
+    Screenfull,
+    SizeSelect,
+    Search,
+    RuoYiGit,
+    // BigScreen,
+    RuoYiDoc
+  },
+  computed: {
+    ...mapGetters(['sidebar', 'avatar', 'device']),
+    setting: {
+      get() {
+        return this.$store.state.settings.showSettings
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'showSettings',
+          value: val
+        })
+      }
+    },
+    topNav: {
+      get() {
+        return this.$store.state.settings.topNav
+      }
+    },
+    sideTheme: {
+      get() {
+        return this.$store.state.settings.sideTheme
+      }
+    }
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar')
+    },
+    async logout() {
+      this.$confirm('确定注销并退出系统吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.$store.dispatch('LogOut').then(() => {
+            //location.href = '/index';
+            location.reload()
+          })
+        })
+        .catch(() => {})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.operations{
+  display: flex; justify-content: flex-end;
+  .opCon{ width:100%; max-width: 160px; display: flex; flex-direction: row; height: 16px; justify-content: space-between; align-items: center;
+    .icon{ height: 16px; width: 16px; object-fit: contain;}
+    .userBox{ flex: 1;
+      .user{ display: flex; flex-direction: row; align-items: center; cursor: pointer;
+        .head{ width: 16px; }
+        .title{flex: 1; width: 0; display: flex; flex-direction: row; color: #fff; display: flex;
+          .txt{ flex: 1; width: 0; text-align: center; white-space: nowrap; word-break: break-all; overflow: hidden; text-overflow: ellipsis;}
+          .menuIcon{ line-height: 16px;}
+        }
+      }
+    }
+    &>*{padding:0 5px; border-right: 1px solid rgba($color: #FFF, $alpha: 0.1);
+      &:last-child{border: none;}
+    }
+  }
+}
+</style>
+
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/index copy.vue b/ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/index copy.vue
deleted file mode 100644
index b60cd64e..00000000
--- a/ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/index copy.vue	
+++ /dev/null
@@ -1,173 +0,0 @@
-<template>
-  <nav class="header">
-    <div class="time">
-      <span>19:23:45</span>
-    </div>
-    <div class="router-l">
-      <span v-for="item in menuData.left" :key="item.key"
-        :class="['menu-item', { 'active-menu': item.key === activeMenu }]" @click="changeMenu(item)">{{ item.label
-        }}</span>
-    </div>
-    <div class="vis-title">
-      <img class="logo-img" src="../../images/logo.png" />
-      <img class="title-img" src="../../images/title.png" />
-    </div>
-    <div class="router-r">
-      <span v-for="item in menuData.right" :key="item.key"
-        :class="['menu-item', { 'active-menu': item.key === activeMenu }]" @click="changeMenu(item)">{{ item.label
-        }}</span>
-    </div>
-    <div class="user">
-      <img class="icon_001" src="../../images/icon/icon_001.png" />
-      <span class="name">admin</span>
-      <img class="icon_002" src="../../images/icon/icon_002.png" />
-      <span class="icon">|</span>
-      <img class="icon_003" src="../../images/icon/icon_003.png" />
-      <span class="icon">|</span>
-      <img class="icon_004" src="../../images/icon/icon_004.png" />
-    </div>
-  </nav>
-</template>
-<script>
-import menuData from "./menuData";
-/**
- *
- */
-
-export default {
-  name: "HeaderMenu",
-  data() {
-    return {
-      menuData,
-      activeMenu: menuData.left[0].key
-    };
-  },
-  emit: ["change"],
-  created() {
-    this.changeMenu(menuData.left[0]);
-  },
-  methods: {
-    changeMenu(item) {
-      this.$emit("change", this.activeMenu = item.key)
-    }
-  }
-};
-</script>
-<style lang="less">
-.header {
-  display: flex;
-  //   justify-content: space-between;
-  align-items: center;
-  height: 68px;
-  background: url("../../images/header-bg.png") no-repeat;
-  background-size: 100% 100%;
-
-  .time {
-    width: 10%;
-    margin-left: 22px;
-    font-size: 20px;
-    font-family: 郑庆科黄油体Regular, 郑庆科黄油体Regular;
-    font-weight: normal;
-    color: #ffffff;
-    line-height: 23px;
-    letter-spacing: 1px;
-  }
-
-  .router-l {
-    width: 24%;
-    display: flex;
-    justify-content: space-around;
-  }
-
-  .vis-title {
-    width: 30%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .logo-img {
-      display: inline-block;
-      //   margin-left: 100px;
-      width: 48px;
-      height: 37px;
-    }
-
-    .title-img {
-      display: inline-block;
-      margin-left: 10px;
-      width: 373px;
-      height: 28px;
-    }
-  }
-
-  .router-r {
-    width: 25%;
-    display: flex;
-    justify-content: space-around;
-  }
-
-  .menu-item {
-    min-width: 96px;
-    display: inline-block;
-    text-align: center;
-    font-size: 18px;
-    font-family: Source Han Sans SC, Source Han Sans SC;
-    font-weight: 400;
-    color: #ffffff;
-    line-height: 21px;
-    letter-spacing: 1px;
-  }
-
-  .active-menu {
-    width: auto;
-    padding: 2px 10px 5px 10px;
-    background: url("../../images/active.png") no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .user {
-    width: 8%;
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-    font-family: 郑庆科黄油体Regular, 郑庆科黄油体Regular;
-    font-weight: normal;
-    color: #ffffff;
-    line-height: 16px;
-
-    .name {
-      display: inline-block;
-      margin: 0 10px;
-    }
-
-    .icon {
-      display: inline-block;
-      margin: 0 13px;
-    }
-
-    .icon-001 {
-      display: inline-block;
-      width: 12px;
-      height: 14px;
-    }
-
-    .icon-002 {
-      display: inline-block;
-      width: 9px;
-      height: 5px;
-    }
-
-    .icon-003 {
-      display: inline-block;
-      width: 18px;
-      height: 16px;
-    }
-
-    .icon-004 {
-      display: inline-block;
-      width: 15px;
-      height: 15px;
-    }
-  }
-}
-</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/index.vue
index 68501313..0c811091 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/index.vue
@@ -12,21 +12,14 @@
     <!-- 右侧菜单 -->
     <CustomMenu :menuData="menuRight" @onChange="onChange" prefix="r" :activeIndex="activeIndex" class="rightMenu">
     </CustomMenu>
-    <div class="user">
-      <img class="icon_001" src="../../images/icon/icon_001.png" />
-      <span class="name">admin</span>
-      <img class="icon_002" src="../../images/icon/icon_002.png" />
-      <span class="icon">|</span>
-      <img class="icon_003" src="../../images/icon/icon_003.png" />
-      <span class="icon">|</span>
-      <img class="icon_004" src="../../images/icon/icon_004.png" />
-    </div>
+    <UserArea class="topButton"></UserArea>
   </nav>
 </template>
 <script>
 import menuData from "@/common/menuData";
 import CustomMenu from "./CustomMenu.vue";
 import Clock from "./Clock.vue";
+import UserArea from './UserArea.vue'
 /**
  *
  */
@@ -42,7 +35,8 @@ export default {
   },
   components: {
     CustomMenu,
-    Clock
+    Clock,
+    UserArea
   },
   emit: ["change"],
   created() {
@@ -67,7 +61,7 @@ export default {
   }
 };
 </script>
-<style lang="less">
+<style lang="less" scoped>
 .header {
   display: flex;
   //   justify-content: space-between;
@@ -112,6 +106,10 @@ export default {
     width: 500px;
   }
 
+  .topButton{
+    width: 180px;
+  }
+
   .user {
     width: 200px;
     display: flex;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/icon/icon_001.png b/ruoyi-ui/src/views/JiHeExpressway/images/icon/icon_001.png
deleted file mode 100644
index 7301595e..00000000
Binary files a/ruoyi-ui/src/views/JiHeExpressway/images/icon/icon_001.png and /dev/null differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/icon/icon_002.png b/ruoyi-ui/src/views/JiHeExpressway/images/icon/icon_002.png
deleted file mode 100644
index 95d30cfb..00000000
Binary files a/ruoyi-ui/src/views/JiHeExpressway/images/icon/icon_002.png and /dev/null differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/icon/icon_003.png b/ruoyi-ui/src/views/JiHeExpressway/images/icon/icon_003.png
deleted file mode 100644
index b0faec5a..00000000
Binary files a/ruoyi-ui/src/views/JiHeExpressway/images/icon/icon_003.png and /dev/null differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/icon/icon_004.png b/ruoyi-ui/src/views/JiHeExpressway/images/icon/icon_004.png
deleted file mode 100644
index ebea9998..00000000
Binary files a/ruoyi-ui/src/views/JiHeExpressway/images/icon/icon_004.png and /dev/null differ
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/addinfo.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/addinfo.vue
new file mode 100644
index 00000000..6d96b273
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/addinfo.vue
@@ -0,0 +1,955 @@
+<template>
+  <div class="container infoBoardDialog">
+    <!-- 添加信息弹窗 -->
+    <el-dialog title="新增" :visible.sync="dialogVisible" width="50%" :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',
+            lineHeight:boardHeight + 'px',
+            justifyContent: getTextAlign(dataForm.formatStyle)
+          }" class="blackBoard2">
+          <span :style="{
+              color: getColorStyle(dataForm.COLOR),
+              fontSize: dataForm.FONT_SIZE,
+              fontFamily: dataForm.FONT,
+              zIndex: '1000',
+              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="formatStyle" @input="alignment(formatStyle)">
+                <el-radio-button :label="0">左对齐</el-radio-button>
+                <el-radio-button :label="2">左右居中</el-radio-button>
+                <el-radio-button :label="1">右对齐</el-radio-button>
+              </el-radio-group>
+            </el-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="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-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="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.cssClass" :label="item.dictLabel" :value="item.cssClass">
+                  </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-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: 1,
+      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: 'yellow',
+      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,
+      formatStyle: '2'
+    }
+  },
+  //   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: 'FF0000',
+            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[3].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'
+        }
+      ]
+
+      // 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('情报板所属类别不能为空')
+      }
+      this.$emit('addInfo', this.dataForm)
+      this.dialogVisible = false
+      //走接口检验内容是否包含敏感字段
+      /*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) * 100
+              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) * 100,
+                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) * 100
+      //     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) * 100,
+      //       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),
+      //       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
+      }
+    },
+    // 文字对齐方式
+    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
+      // console.log(this.dataForm.COORDINATE, "this.dataForm.COORDINATE");
+      if (alignmentNum != undefined) {
+        this.dataForm.formatStyle = alignmentNum
+      }
+    },
+    addZero(num) {
+      return ('000' + num).slice(-3)
+    },
+    /*增加新的内容*/
+
+    getTextAlign(font) {
+      if (font == '0') {
+        return 'left'
+      } else if (font == '1') {
+        return 'right'
+      } else {
+        return 'center'
+      }
+    },
+    /*删除内容*/
+    // 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/Home/components/InfoBoard/boardData.json b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/boardData.json
new file mode 100644
index 00000000..881570aa
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/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/Home/components/InfoBoard/editInfo.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/editInfo.vue
new file mode 100644
index 00000000..8c08715d
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/editInfo.vue
@@ -0,0 +1,917 @@
+<template>
+  <div class="container infoBoardDialog">
+    <!-- 添加信息弹窗 -->
+    <el-dialog title="修改" :visible.sync="dialogVisible" width="50%" :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">
+        <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',
+            lineHeight:boardHeight + 'px',
+            textAlign: getTextAlign(dataForm.formatStyle),
+            justifyContent: getTextAlign(dataForm.formatStyle)
+          }">
+          <span class="textBoard1 boardTextStyle" :style="{
+              color: getColorStyle(dataForm.COLOR),
+              fontSize: getFontSize(dataForm.FONT_SIZE),
+              fontFamily: dataForm.FONT,
+              zIndex: '1000',
+        
+              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="formatStyle" @input="alignment(formatStyle)">
+                <el-radio-button :label="0">左对齐</el-radio-button>
+                <el-radio-button :label="2">左右居中</el-radio-button>
+                <el-radio-button :label="1">右对齐</el-radio-button>
+              </el-radio-group>
+              <!-- <el-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="screenSize" label="屏幕尺寸">
+                <el-input disabled v-model="dataForm.screenSize"></el-input>
+
+              </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="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="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-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 {
+      formatStyle: 2,
+      alignmentNum: 2,
+      iotTemplateCategoryList: [],
+      content: '',
+
+      boardWidth: '',
+      boardHeight: '',
+      // boardEmitItem:this.boardEmitItem,
+      disabled: true,
+      checkList: [], //复选框一组
+      obj: '',
+      imgUrl: [],
+      imgUrlOther: [],
+      dialogVisible: true,
+      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: 'yellow',
+      fontSize: '24',
+      fontType: 'KaiTi',
+      fontSpacing: 0,
+      coordinate: '000000',
+      url: '',
+      previewContent: '', //预览内容
+      ispreviewContent: -1,
+      dataForm: {
+        CONTENT: '',
+        STAY: '',
+        FONT: '',
+        COORDINATE: ''
+
+        // 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'
+          }
+        ],
+        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.init()
+    }
+  },
+  methods: {
+    init() {
+      this.title = '修改'
+
+      this.dialogVisible = true
+      this.itemPropertyMap = new HashMap()
+      this.alignmentNum = 2
+      console.log('点击编辑按钮数据回显', this.boardEmitItem)
+      this.dataForm = JSON.parse(JSON.stringify(this.boardEmitItem))
+      this.dataForm.formatStyle = this.formatStyle
+      this.dataForm.COLOR = this.getColorValue(this.boardEmitItem.COLOR)
+      console.log(this.dataForm, 'this.dataForm')
+      // 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) / 100))
+      this.dataForm.STAY = Number(this.boardEmitItem.playbackDuration) / 10
+      console.log('数据回显处理后的参数', this.dataForm)
+      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 3:
+          divContent1[0].style.alignItems = 'flex-start'
+          textBoard1[0].style.position = 'static'
+
+          break
+        // 上下对齐
+        case 4:
+          divContent1[0].style.alignItems = 'center'
+          textBoard1[0].style.position = 'static'
+
+          break
+        // 下对齐
+        case 5:
+          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)
+      console.log('宽高比11111111', textLeft, textTop)
+      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)
+    },
+    getTextAlign(font) {
+      if (font == '0') {
+        return 'left'
+      } else if (font == '1') {
+        return 'right'
+      } else {
+        return 'center'
+      }
+    },
+    // 表单确认
+    dataFormSubmitHandle() {
+      console.log(this.dataForm.type, 'this.dataForm.type')
+      if (!this.dataForm.CONTENT.trim()) {
+        return this.$modal.msgError('当前输入内容为空')
+      }
+      // this.loading = true
+      // console.log('点击修改 表单', this.dataForm)
+      this.$emit('receiveForm', this.dataForm)
+
+      // this.loading = false
+      // this.isAdd = false
+      // if (this.dataForm.type == 1) {
+      //   this.dataForm.STAY = Number(this.dataForm.STAY) * 100
+      //   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.replace(/\D/g, ''),
+      //     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) * 100,
+      //     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.replace(/\D/g, ''),
+      //     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) * 100
+            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) * 100,
+              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 == '宋体') {
+        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
+      }
+    },
+    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 > 128) {
+          return 128 + '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'
+        }
+      }
+    },
+    getFontSize(size) {
+      if (this.boardWidth > 768) {
+        let i = this.boardWidth / 768
+        return size.replace(/\D/g, '') / 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/Home/components/InfoBoard/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/index.vue
new file mode 100644
index 00000000..0e08366f
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/index.vue
@@ -0,0 +1,994 @@
+<template>
+  <div>
+    <transition>
+      <div v-if="dialogInfoLeft" class="dialog_info">
+        <div class="dialog_info_left">
+          <div class="dialog_head">
+            <div class="tit">{{ dialogTit }}</div>
+            <img class="btnCls" src="@/assets/jihe/images/dialog/ibCls.png" alt="" @click="closeDialogBtnFn">
+            <img class="deco" src="@/assets/jihe/images/dialog/ibHeadDeco.png" alt="">
+          </div>
+          <div class="dialogContent">
+            <div v-if="dialogInfoList.length > 0" class="dialogContent_box" style="height: 100%;">
+              <div class="dialogContent_box_item" v-for="(item, i) in dialogInfoList" :key="i.id">
+                <div class="dialogContent_l">
+                  <div class="dialogContent_l_xsq"
+                    :style="{ 'width': processString(i.screenSize, 'w') / getScrollSz(processString(i.screenSize, 'w')) + 'px', 'height': processString(i.screenSize, 'h') / getScrollSz(processString(i.screenSize, 'w')) + 'px', 'justify-content': getTextAlign(i.tcontents[0].formatStyle) }">
+                    <div class="dialogContent_l_xsq_txt"
+                      :style="{ 'font-size': i.tcontents[0].fontSize / getScrollSz(processString(i.screenSize, 'w')) + 'px', 'color': '#' + i.tcontents[0].fontColor, 'font-family': i.tcontents[0].fontType, }"
+                      v-html="i.tcontents[0].content.replace(/\n|\r\n/g, '<br>').replace(
+                        / /g,
+                        '&nbsp')"></div>
+                  </div>
+                </div>
+                <div class="dialogContent_r">
+                  <div @click="editOutline(i)" class="show_r_btn dialogContent_r_btn1"></div>
+                  <div @click="delMoFn(i)" class="show_r_btn dialogContent_r_btn2"></div>
+                </div>
+              </div>
+            </div>
+            <div v-else class="dialogContent_box" style="height: 100%;">
+              <div class="dialogContent_box_empty">暂无数据</div>
+            </div>
+            <div class="dialogContent_bottom">
+              <el-tabs v-model="activeName" @tab-click="tabClickFn">
+                <el-tab-pane label="详情信息" name="first">
+                  <div class="show_bottom_tab_box">
+                    <div class="show_bottom_tab_item" v-for="item in tabDataInfoList" :key="item.id">
+                      <div class="show_bottom_tab_item_l">{{ item.tit }}: </div>
+                      <div class="show_bottom_tab_item_r" :style="{ 'color': item.col }"> {{ item.txt }}</div>
+                    </div>
+                  </div>
+                </el-tab-pane>
+                <el-tab-pane label="设备参数" name="second">设备参数</el-tab-pane>
+              </el-tabs>
+            </div>
+            <div class="dialogContent_bottom_btn">
+              <div class="show_bottom_btn_add" @click="addMoDataInfoFn(2, 2)">添加信息</div>
+              <div class="show_bottom_btn_del" @click="InformationReleaseFn">信息发布</div>
+            </div>
+            <div class="dialogContent_ce" @click="showCeInfoFn">
+              <img class="show_ce_img" src="@/assets/screen/xtb/leftd.png" alt=""
+                :style="{ 'transform': dialogInfoRight ? 'rotate(0deg)' : 'rotate(180deg)' }">
+              <div class="show_ce_txt">信息模板</div>
+            </div>
+            
+            <!-- 原型图上没有“附近相机”，代码里暂时关闭
+              <div class="dialogContent_ce" style="top:36%;" @click="showCameraInfoFn">
+              <img class="show_ce_img" src="@/assets/screen/xtb/leftd.png" alt=""
+                :style="{ 'transform': dialogInfoCamera ? 'rotate(0deg)' : 'rotate(180deg)' }">
+              <div class="show_ce_txt">附近像机</div>
+            </div> -->
+          </div>
+        </div>
+        <!-- 信息模板 -->
+        <div v-if="dialogInfoRight" class="dialog_info_right">
+          <el-collapse v-model="activeNames" @change="panelChangeFn">
+            <el-collapse-item v-for="item in moBanList" :key="item.dictCode" :title="item.dictLabel"
+              :name="item.dictCode">
+              <div class="dialog_info_right_show">
+                <div class="dialogContent_box" style="overflow-y: visible;">
+                  <div class="dialogContent_box_item" v-for="i in item.mbList" :key="i.id">
+                    <div class="dialogContent_l" style="width:16vw;">
+                      <div class="dialogContent_l_xsq"
+                        :style="{ 'width': processString(i.screenSize, 'w') / getScrollSz(processString(i.screenSize, 'w')) + 'px', 'height': processString(i.screenSize, 'h') / getScrollSz(processString(i.screenSize, 'w')) + 'px', 'justify-content': getTextAlign(i.tcontents[0].formatStyle) }">
+                        <div class="dialogContent_l_xsq_txt"
+                          :style="{ 'font-size': i.tcontents[0].fontSize / getScrollSz(processString(i.screenSize, 'w')) + 'px', 'color': '#' + i.tcontents[0].fontColor, 'font-family': i.tcontents[0].fontType }"
+                          v-html="i.tcontents[0].content.replace(/\n|\r\n/g, '<br>').replace(
+                            / /g,
+                            '&nbsp')"></div>
+                      </div>
+                    </div>
+                    <div class="dialogContent_r" style="width: 3.5vw;">
+                      <div @click="putLeftFn(i)" class="show_r_btn dialogContent_r_btn3"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+        <!-- 附近相机 -->
+        <div v-if="dialogInfoCamera" class="dialog_info_right" style="padding:0;">
+          <div class="dialog_head" style="height:4vh;">
+            <div class="tit">摄像机设备</div>
+            <img class="btnCls" src="@/assets/jihe/images/dialog/ibCls.png" alt="" @click="closeCameraBtnFn">
+            <img class="deco" src="@/assets/jihe/images/dialog/ibHeadDeco.png" alt="">
+          </div>
+          <div class="info_right_camera">
+            <div class="info_right_camera_top">
+              <!-- 视频组件 -->
+              <videoView :url="videoUrl" />
+            </div>
+            <div class="info_right_camera_bom">
+              <div class="camera_bom_left">
+                <div class="camera_bom_left_item">
+                  <div class="camera_bom_left_item_txt">选择相机: </div>
+                  <div class="camera_bom_left_item_val">
+                    <el-select v-model="cameraVal" placeholder="请选择" size="mini" style="width:130px"
+                      @change="cameraValChangeFn">
+                      <el-option v-for="item in cameraOptList" :key="item.camId" :label="item.camName"
+                        :value="item.camId">
+                      </el-option>
+                    </el-select>
+                  </div>
+                </div>
+                <div class="camera_bom_left_item" v-for="item in cameraDataVideoList" :key="item.id">
+                  <div class="camera_bom_left_item_txt">{{ item.txt }}: </div>
+                  <div class="camera_bom_left_item_val">{{ item.val }}</div>
+                </div>
+              </div>
+              <div class="camera_bom_right">
+                <div class="camera_bom_right_t">
+                  <div class="camera_bom_right_t_box"></div>
+                  <div class="camera_bom_right_t_h_po" v-for="item in cameraBtnList" :key="item.id"
+                    @click="cameraControlBtnFn(item)"
+                    :style="{ 'left': item.le, top: item.to, 'transform': 'rotate(' + item.ro + 'deg)' }"></div>
+                </div>
+                <div class="camera_bom_right_b">
+                  <div class="camera_bom_right_b_btn" v-for="item in cameraControlList" :key="item.id">
+                    <div class="camera_bom_right_b_btn_l" @click="cameraControlLeFn(item.numL)"></div>
+                    <div class="camera_bom_right_b_btn_c">{{ item.txt }}</div>
+                    <div class="camera_bom_right_b_btn_r" @click="cameraControlLeFn(item.numR)"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </transition>
+    <!-- 情报板弹框中的弹框 -->
+    <addBoard ref="addinfo" @addInfo="addInfo" />
+    <editBoard v-if="showEmit" :boardEmitItem="boardEmitItem" @receiveForm="receiveForm" @dialogClose="dialogClose" />
+  </div>
+</template>
+
+<script>
+import addBoard from './addinfo.vue'
+import editBoard from './editInfo.vue'
+import { listDevice, invokedFunction, getDeviceRealtimeProperty } from '@/api/device/device.js'
+export default {
+  name: 'InfoBoard',
+  data(){
+    return {
+      dialogTit: '门架式可变信息标志YK16+270',
+      dialogInfoLeft: true,
+      dialogInfoRight: false,
+      dialogInfoCamera: false,
+      dialogInfoList:[]
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    // 地图点位
+    mapClickEvent(e) {
+      this.dialogInfoList = []
+      console.log('父组件地图点位', e)
+      this.videoUrl = ''
+      this.cameraOptList = []
+      this.dialogInfoLeft = true
+      this.mapIds = e.target._opts.extData.deviceId
+      this.screenDataSize = e.target._opts.extData.sceenSize
+      this.dialogTit = e.target._opts.extData.deviceName
+      // this.tabDataInfoList = e.target._opts.extData
+      this.tabDataInfoList = [
+        { id: 401, tit: '设备名称', txt: e.target._opts.extData.deviceName, col: '#fff' },
+        { id: 402, tit: '道路名称', txt: e.target._opts.extData.roadName, col: '#fff' },
+        { id: 403, tit: '所属机构', txt: e.target._opts.extData.organization, col: '#fff' },
+        { id: 404, tit: '设备桩号', txt: e.target._opts.extData.pileNumber, col: '#fff' },
+        { id: 405, tit: '设备厂商', txt: e.target._opts.extData.brind, col: '#fff' },
+        { id: 406, tit: '设备状态', txt: e.target._opts.extData.deviceState == 'online' ? '在线' : '离线', col: e.target._opts.extData.deviceState == 'online' ? '#10d269' : '#888' }
+      ]
+      this.getTemplateHeaderFn()
+      this.onSubmit(this.mapIds)
+      this.getEnergyCameraBoardFn(e.target._opts.extData.pileNumber)
+      // this.mapDialogTop = e.pixel.y + 'px'
+      // this.mapDialogLeft = e.pixel.x + 'px'
+      // this.$refs.mapDialog.style.top = e.pixel.y + 'px'
+      // this.$refs.mapDialog.style.left = e.pixel.x + 'px'
+      // console.log(this.$refs.mapDialog)
+    },
+    getEnergyCameraBoardFn(pileNumber) {
+      getEnergyCameraBoardAPi({ pileNum: pileNumber }).then(res => {
+        console.log('获取到附近的像机', res)
+        this.cameraVal = res.data[0].camId
+        this.cameraOptList = res.data
+        this.cameraValCha(this.cameraOptList, this.cameraVal)
+        this.getEnergyCameraVideoFn()
+      })
+    },
+    getEnergyCameraVideoFn() {
+      getEnergyCameraVideoAPi({ camId: this.cameraVal }).then(res => {
+        // console.log('获取到视频', res)
+        this.videoUrl = res.data.liveUrl
+      })
+    },
+    cameraControlBtnFn(item) {
+      this.getEnergyCameraControlFn(item.cmd, 5)
+    },
+    cameraControlLeFn(item) {
+      // console.log('按钮点击事件', item)
+      this.getEnergyCameraControlFn(item, 5)
+    },
+    getEnergyCameraControlFn(cmd, spe) {
+      getEnergyCameraControlAPi({ camId: this.cameraVal, cmdType: cmd, speed: spe }).then(res => {
+        // console.log('控制返回结果', res)
+        // this.videoUrl = res.data.liveUrl
+      })
+    },
+    cameraValChangeFn() {
+      console.log('点击切换按钮', this.cameraVal)
+      this.cameraValCha(this.cameraOptList, this.cameraVal)
+    },
+    // cameraDataVideoList
+    cameraValCha(date, num) {
+      let str = {
+        0: '正常',
+        1: '网络中断',
+        2: '网络正常无图像',
+        3: '有图像图可能存在问题'
+      }
+      date.forEach(i => {
+        if (i.camId === num) {
+          this.cameraDataVideoList = [
+            { id: 3001, txt: '设备名称', val: i.camName },
+            { id: 3002, txt: '设备编号', val: i.camId },
+            { id: 3003, txt: '设备桩号', val: i.pileNum },
+            { id: 3005, txt: '道路名称', val: i.deptName },
+            { id: 3006, txt: '道路状况', val: i.status == '-1' ? '未启用' : str[Number(i.status)] }
+          ]
+        }
+      })
+    },
+    // 信息发布
+    InformationReleaseFn() {
+      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()
+          objAll.deviceIds = this.mapIds
+          let that = this
+
+          // let devicePixel = this.form.devicePixel.split('*')
+          console.log('接口参数', this.dialogInfoList)
+          let newArr = this.dialogInfoList.map(item => {
+            let obj = {}
+
+            obj.STAY = item.STAY
+            obj.ACTION = item.inScreenMode
+            obj.SPEED = item.tcontents[0].fontSpacing
+            obj.COORDINATE = item.screenSize.replace('*', '')
+            obj.COLOR = item.tcontents[0].fontColor
+            obj.FONT = this.getFontValue(item.tcontents[0].fontType)
+            obj.FONT_SIZE = item.tcontents[0].fontSize
+
+            obj.CONTENT = item.tcontents[0].content.replaceAll(',', '\\,')
+            obj.CONTENT = item.tcontents[0].content.replaceAll('=', '\\=')
+            obj.CONTENT = item.tcontents[0].content.replace(/\n/g, '\\\\n')
+
+            // obj.CONTENT = item.tcontents[0].content.replace(/\n|\r\n/g, '<r><n>')
+            obj.width = this.processString(item.screenSize, 'w')
+            obj.height = this.processString(item.screenSize, 'h')
+            obj.formatStyle = item.tcontents[0].formatStyle
+            return obj
+          })
+
+          objAll.parameters = newArr
+          const param = {
+            objectData: JSON.stringify(objAll)
+          }
+
+          invokedFunction(595, 11, { size: '65535', fileName: 'play099.lst' })
+            .then(res => {
+              debugger
+              // console.log('发布消息,校验文件名-------------')
+              if (res.data.result == '01') {
+                invokedFunction(595, 13, { parameters: newArr })
+                  .then(res => {
+                    debugger
+                    // console.log('发布消息,发送文件内容-----')
+                    if (res.data.result == '01') {
+                      invokedFunction(595, '1B', { fileId: '99' })
+                        .then(res => {
+                          debugger
+                          // console.log('发布消息,播放文件-----')
+                        })
+                        .catch(() => {
+                          this.$modal.msgError('发布失败,请重试')
+                        })
+                    }
+                  })
+                  .catch(() => {
+                    this.$modal.msgError('发布失败,请重试')
+                  })
+              }
+            })
+            .catch(() => {
+              this.$modal.msgError('发布失败,请重试')
+            })
+          loading.close()
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消发布情报板'
+          })
+          loading.close()
+        })
+      this.onSubmit()
+    },
+    // 回读
+    onSubmit(deviceId) {
+      getDeviceRealtimeProperty(deviceId, '3A', { async: false })
+        .then(res => {
+          var contentsA = res.data['3A'].content
+          console.log('回读消息--1111111111---', contentsA)
+
+          this.dialogInfoList = contentsA.map(item => {
+            return {
+              ...item,
+              STAY: item.playbackDuration,
+              inScreenMode: item.screenEntryMethod,
+              screenSize: item.displayAreaWidth + '*' + item.displayAreaHeight,
+              tcontents: [
+                {
+                  ...item,
+                  fontSpacing: item.fontSpacing,
+                  fontSize: parseInt(item.fontSize.replace(/\D/g, '')),
+                  fontType: item.font,
+                  fontColor: item.foregroundColor.toUpperCase(),
+                  formatStyle: item.horizontalAlignment,
+                  STAY: item.playbackDuration / 10,
+
+                  content: item.textContent.replaceAll('\\,', ',').replaceAll('\\=', '=').replaceAll('\\\\n', '\n')
+                }
+              ]
+            }
+          })
+
+          console.log('hui1111111111111', this.dialogInfoList)
+        })
+        .catch(e => {
+          // this.$modal.msgError('回读失败,请重试')
+        })
+      // 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
+        }
+      })*/
+    },
+    // 获取模板头部
+    getTemplateHeaderFn() {
+      this.moBanList = []
+      getDicts('iot_template_category').then(res => {
+        this.moBanDataHandList = res.data
+        this.activeNames = res.data.map(item => {
+          return item.dictCode
+        })
+        this.getTemplateFn()
+      })
+    },
+    // 获取模板
+    getTemplateFn() {
+      getAllVmsTemplate({ devicePixel: this.screenDataSize }).then(res => {
+        this.moBanList = this.moBanDataHandList.map((item, index) => {
+          if (item.dictSort === index) {
+            return {
+              ...item,
+              mbList: res.data[index]
+            }
+          }
+        })
+      })
+    },
+    panelChangeFn(val) {
+      console.log(val)
+    },
+    // 接收子组件新增待发模板
+    addInfo(form) {
+      // console.log('待发新增', form)
+      this.dialogInfoList.push({
+        id: form.id,
+        screenSize: form.screenSize,
+        COORDINATE: form.coordinate,
+        ...form,
+        tcontents: [{ ...form, content: form.CONTENT, fontSize: parseInt(form.FONT_SIZE.replace(/\D/g, '')), fontType: form.FONT, fontColor: form.COLOR }],
+        id: Math.floor(Math.random() * 10000000000000000),
+        txt: form.CONTENT,
+        fz: parseInt(form.FONT_SIZE.replace(/\D/g, '')),
+        fm: form.FONT,
+        formatStyle: form.formatStyle,
+        ...this.processString(form.screenSize),
+        ...this.processStrNum(form.COORDINATE)
+      })
+    },
+    // 打开添加信息弹窗
+    addMoDataInfoFn(type, mode) {
+      this.$refs.addinfo.init('', type, mode)
+    },
+    // 修改弹窗
+    editOutline(item, index, type) {
+      this.showEmit = true
+      this.index = index
+      this.editType = type
+      console.log('修改弹窗', item)
+      this.boardEmitItem = {
+        ...item,
+        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,
+        formatStyle: item.tcontents[0].formatStyle,
+        ACTION: item.inScreenMode, //出屏方式
+        STAY: item.stopTime, //停留时间
+        type: type,
+        screenSize: item.screenSize,
+        category: item.category,
+        id: item.id,
+        tcontentsId: item.tcontents[0].id
+      }
+    },
+
+    // 接收子组件form表单 修改
+    receiveForm(form) {
+      console.log('接收子组件form表单 修改111111111', form)
+      this.formData = form
+      console.log('开始的数据', this.dialogInfoList)
+      this.dialogInfoList = this.dialogInfoList.map(item => {
+        if (item.id === form.id) {
+          return { ...item, tcontents: [{ ...item.tcontents[0], ...form, content: form.CONTENT, fontSize: parseInt(form.FONT_SIZE.replace(/\D/g, '')), fontType: form.FONT, fontColor: form.COLOR }] }
+        }
+        return item
+      })
+      console.log('修改后的数据', this.dialogInfoList)
+      // this.getTemplateHeaderFn()
+      this.$forceUpdate()
+    },
+
+    delMoFn(index) {
+      console.log(index)
+      // deleteTemplate(item.tcontents[0].templateId)
+      this.dialogInfoList.splice(index, 1)
+      // this.removeItemById(this.dialogInfoList, item.id)
+    },
+    putLeftFn(item) {
+      console.log('点击事件', item)
+      this.dialogInfoList.push({ ...item, STAY: item.stopTime })
+      console.log('点击事件9990089089', this.dialogInfoList)
+    },
+    tabClickFn(tab, event) {
+      console.log(tab, event)
+    },
+    closeDialogBtnFn() {
+      this.dialogInfoLeft = false
+      this.dialogInfoRight = false
+    },
+    showCeInfoFn() {
+      if (this.dialogInfoCamera) {
+        this.dialogInfoCamera = false
+      }
+      this.dialogInfoRight = !this.dialogInfoRight
+    },
+    showCameraInfoFn() {
+      if (this.dialogInfoRight) {
+        this.dialogInfoRight = false
+      }
+      this.dialogInfoCamera = !this.dialogInfoCamera
+    },
+    subjectBtnFn(item) {
+      this.subjectBtn = item.id
+    },
+    closeCameraBtnFn() {
+      this.dialogInfoCamera = false
+    },
+    dialogClose() {
+      this.showEmit = false
+      this.arrowRightVisible = false
+    },
+    removeItemById(arr, id) {
+      const index = arr.findIndex(item => item.id === id) // 找到要删除项的索引
+      if (index !== -1) {
+        arr.splice(index, 1) // 从数组中删除该项
+      }
+    },
+    getScrollSz(w) {
+      if (w > 760) {
+        return 3
+      } else if (w > 470) {
+        return 2
+      } else {
+        return 1
+      }
+    },
+    processString(str, x) {
+      const parts = str.split('*') // 将字符串按照 '*' 分割成数组
+      const w = parseInt(parts[0]) // 将第一个部分解析为整数
+      const h = parseInt(parts[1]) // 将第二个部分解析为整数
+      if (x === 'w') {
+        return w
+      } else if (x === 'h') {
+        return h
+      } else {
+        return { w, h } // 返回包含 w 和 h 属性的对象
+      }
+    },
+    processStrNum(str, x) {
+      const pdl = parseInt(str.slice(0, 3)) // 截取前三位并解析为整数
+      const pdt = parseInt(str.slice(3)) // 截取后三位并解析为整数
+      if (x === 'l') {
+        return pdl
+      } else if (x === 't') {
+        return pdt
+      } else {
+        return { pdl, pdt } // 返回包含 pdl 和 pdt 属性的对象
+      }
+    },
+    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
+      }
+    },
+    // 转报文 字体
+    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' //白色
+    },
+    // 居中
+    getTextAlign(font) {
+      if (font == '0') {
+        return 'left'
+      } else if (font == '1') {
+        return 'right'
+      } else {
+        return 'center'
+      }
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.map_dialog {
+  width: 510px;
+  height: 550px;
+  background-color: pink;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  transform: translate(-110%, -110%);
+}
+.dialog_info {
+  width: 950px;
+  height: 600px;
+  position: absolute;
+  top: 12%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+}
+.dialog_info_left {
+  width: 510px;
+  height: 100%;
+  background-color: #114c66;
+}
+.dialog_info_right {
+  width: 430px;
+  height: 556px;
+  border: 2px solid #196980;
+  background-color: #114c66;
+  padding: 1vh 0.5vw;
+  overflow-y: scroll;
+  position: relative;
+}
+.dialog_head {
+  width: 100%;
+  height: 48px;
+  padding: 0 10px;
+  background-image: url('~@/assets/screen/xtb/qbbtit.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .tit {
+    color: #3de8ff;
+    font-size: 18px;
+  }
+  .btnCls {
+    width: 13px;
+    height: 13px;
+    cursor: pointer;
+  }
+  .deco {
+    width: 55%;
+    height: 5px;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}
+.dialogContent {
+  width: 100%;
+  height: 300px;
+  padding: 10px 40px 10px 10px;
+  position: relative;
+}
+.dialogContent_box {
+  width: 100%;
+  // height: 100%;
+  overflow-y: scroll;
+}
+.dialogContent_l {
+  width: 355px;
+  // height: 4.91vh;
+  border: 2px solid #1d7890;
+  padding: 1px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.dialogContent_r {
+  width: 96px;
+  // height: 4.91vh;
+  border: 2px solid #1d7890;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.dialogContent_l_xsq {
+  width: 256px;
+  height: 100%;
+  font-size: 18px;
+  color: #ff0000;
+  background-color: #000;
+  line-height: 1;
+  // text-align: center;
+  display: flex;
+  // justify-content: center;
+  align-items: center;
+}
+
+.show_r_btn {
+  width: 1.67vw;
+  height: 2.96vh;
+  cursor: pointer;
+}
+.dialogContent_r_btn1 {
+  background-image: url('~@/assets/screen/xtb/gg.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.dialogContent_r_btn2 {
+  background-image: url('~@/assets/screen/xtb/xx.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.dialogContent_r_btn3 {
+  background-image: url('~@/assets/screen/xtb/zz.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.dialogContent_box_item {
+  margin-bottom: 0.5vh;
+  display: flex;
+  justify-content: space-between;
+}
+.dialogContent_bottom {
+  width: 105%;
+  height: 16.52vh;
+}
+.show_bottom_tab_item {
+  width: 50%;
+  padding: 0.5vh 0;
+  display: flex;
+  // flex-wrap: wrap;
+  // align-items: center;
+}
+.show_bottom_tab_box {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.show_bottom_tab_item_l {
+  color: #3de8ff;
+  font-size: 14px;
+}
+.show_bottom_tab_item_r {
+  color: #fff;
+  font-size: 14px;
+  margin-left: 0.5vw;
+}
+.dialogContent_ce {
+  position: absolute;
+  right: 0%;
+  top: 0%;
+  width: 24px;
+  height: 95px;
+  padding: 0.5vh 0;
+  background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
+  border-radius: 0px 0px 0px 0px;
+  opacity: 1;
+  text-align: center;
+  cursor: pointer;
+}
+.show_ce_img {
+  width: 15px;
+  height: 10px;
+  transition: transform 0.3s ease; /* 过渡效果 */
+}
+.show_ce_txt {
+  color: #fff;
+  font-size: 13px;
+}
+.dialogContent_box_empty {
+  font-size: 14px;
+  text-align: center;
+  color: #fff;
+}
+.dialog_info_right_tit {
+  color: #fff;
+  font-size: 14px;
+  margin-bottom: 0.5vh;
+}
+.dialog_info_right_show {
+  width: 100%;
+  // height: 28vh;
+}
+.dialogContent_bottom_btn {
+  width: 100%;
+  height: 5vh;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  text-align: center;
+}
+.show_bottom_btn_add {
+  width: 90px;
+  height: 23px;
+  color: #fff;
+  font-size: 14px;
+  line-height: 23px;
+  background: #00b3cc;
+  border-radius: 48px 48px 48px 48px;
+  opacity: 1;
+  margin-right: 0.5vw;
+  cursor: pointer;
+}
+.show_bottom_btn_del {
+  width: 90px;
+  height: 23px;
+  color: #fff;
+  font-size: 14px;
+  line-height: 23px;
+  background: #c87800;
+  border-radius: 48px 48px 48px 48px;
+  opacity: 1;
+  cursor: pointer;
+}
+.info_right_camera {
+  width: 100%;
+  height: calc(100% - 4vh);
+  padding: 1vh 0.5vw;
+}
+.info_right_camera_top {
+  width: 100%;
+  height: 20vh;
+}
+.info_right_camera_bom {
+  width: 100%;
+  padding: 1vh 0;
+  height: calc(100% - 20vh);
+  display: flex;
+}
+.camera_bom_left {
+  width: 50%;
+  height: 100%;
+  padding: 2vh 0;
+  border-right: 1px dashed #285a71;
+}
+.camera_bom_right {
+  width: 50%;
+  height: 100%;
+}
+.camera_bom_left_item {
+  width: 100%;
+  color: #fff;
+  display: flex;
+  font-size: 14px;
+  padding-bottom: 1.5vh;
+}
+.camera_bom_left_item_txt {
+  width: 31%;
+  color: #3de8ff;
+}
+.camera_bom_left_item_val {
+  color: #fff;
+  font-size: 13px;
+}
+.camera_bom_right_t {
+  width: 100%;
+  height: 60%;
+  position: relative;
+}
+.camera_bom_right_b {
+  width: 100%;
+  height: 40%;
+  // background-color: deeppink;
+}
+.camera_bom_right_t_box {
+  width: 2vw;
+  height: 4vh;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #005f87;
+  border-radius: 50%;
+  border: 1px solid #2191b1;
+}
+.camera_bom_right_t_h_po {
+  width: 1vw;
+  height: 5vh;
+  position: absolute;
+  left: 27%;
+  top: 33%;
+  cursor: pointer;
+  background-image: url('~@/assets/screen/xtb/xjleft.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.camera_bom_right_b_btn {
+  width: 100%;
+  padding: 0vh 2vw 1vh 2vw;
+  display: flex;
+  justify-content: space-between;
+}
+.camera_bom_right_b_btn_l {
+  width: 1.2vw;
+  height: 2.4vh;
+  border-radius: 50%;
+  background-image: url('~@/assets/screen/xtb/jhbtn.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+}
+.camera_bom_right_b_btn_c {
+  color: #fff;
+}
+.camera_bom_right_b_btn_r {
+  width: 1.2vw;
+  height: 2.4vh;
+  border-radius: 50%;
+  background-image: url('~@/assets/screen/xtb/addbtn.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+}
+//   background-color: #104b65;
+//   background-image: url('~@/assets/screen/xtb/qbbtit.png');
+//   background-size: 100% 100%;
+//   background-repeat: no-repeat;
+//   background-position: center;
+
+/* 通用滚动条样式 */
+::-webkit-scrollbar {
+  width: 3px; /* 设置滚动条宽度 */
+  height: 3px; /* 设置滚动条高度 */
+}
+
+::-webkit-scrollbar-track {
+  background-color: #114c66; /* 设置滚动条轨道颜色 */
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #9abce0; /* 设置滚动条滑块颜色 */
+  border-radius: 4px; /* 设置滚动条滑块圆角 */
+}
+::v-deep .el-tabs__nav-wrap::after {
+  background-color: #316076;
+}
+
+::v-deep .el-tabs__item.is-active {
+  color: #3de8ff !important;
+}
+::v-deep .el-tabs__item {
+  color: #fff !important;
+}
+::v-deep .el-tabs__active-bar {
+  background-color: #3de8ff !important;
+}
+::v-deep .el-collapse-item__header {
+  color: #fff;
+  height: 28px;
+  background-color: #053b4f;
+  border: none;
+  padding-left: 0.5vw;
+}
+::v-deep .el-collapse {
+  color: #fff;
+  border: none;
+}
+::v-deep .el-collapse-item__wrap {
+  color: #fff;
+  will-change: height;
+  background-color: #053b4f;
+  overflow: hidden;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin-top: 0.5vh;
+  border: none;
+}
+::v-deep .el-collapse-item__content {
+  margin-bottom: 0;
+  padding: 0.5vh 0.5vw;
+}
+::v-deep .el-collapse-item {
+  margin-bottom: 1vh;
+}
+::v-deep .el-input--mini .el-input__icon {
+  line-height: 20px;
+  color: #fff;
+}
+::v-deep .el-input--mini .el-input__inner {
+  height: 20px;
+  line-height: 20px;
+  background-color: #086d8f;
+  border: none;
+  color: #fff;
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
index 6e9a0cc9..19f0abb4 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
@@ -15,6 +15,8 @@
       <ConditionStatistics class="content-r card-menu" />
     </section>
 
+    <InfoBoard></InfoBoard>
+
     <footer class="footer card-menu">
       <div class="footer-title">
         <span>济菏高速缩略图</span>
@@ -34,6 +36,8 @@ import ConditionStatistics from "./components/ConditionStatistics/index.vue";
 import RoadAndEvents from "./components/RoadAndEvents/index.vue";
 import AMapContainer from "./components/AMapContainer/index.vue";
 
+import InfoBoard from "./components/InfoBoard"
+
 export default {
   name: 'Home',
   components: {
@@ -42,6 +46,7 @@ export default {
     Thumbnail,
     RoadAndEvents,
     AMapContainer,
+    InfoBoard
   },
   provide() {
     return {
diff --git a/ruoyi-ui/src/views/boardView/addinfo.vue b/ruoyi-ui/src/views/boardView/addinfo.vue
new file mode 100644
index 00000000..6d96b273
--- /dev/null
+++ b/ruoyi-ui/src/views/boardView/addinfo.vue
@@ -0,0 +1,955 @@
+<template>
+  <div class="container infoBoardDialog">
+    <!-- 添加信息弹窗 -->
+    <el-dialog title="新增" :visible.sync="dialogVisible" width="50%" :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',
+            lineHeight:boardHeight + 'px',
+            justifyContent: getTextAlign(dataForm.formatStyle)
+          }" class="blackBoard2">
+          <span :style="{
+              color: getColorStyle(dataForm.COLOR),
+              fontSize: dataForm.FONT_SIZE,
+              fontFamily: dataForm.FONT,
+              zIndex: '1000',
+              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="formatStyle" @input="alignment(formatStyle)">
+                <el-radio-button :label="0">左对齐</el-radio-button>
+                <el-radio-button :label="2">左右居中</el-radio-button>
+                <el-radio-button :label="1">右对齐</el-radio-button>
+              </el-radio-group>
+            </el-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="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-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="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.cssClass" :label="item.dictLabel" :value="item.cssClass">
+                  </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-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: 1,
+      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: 'yellow',
+      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,
+      formatStyle: '2'
+    }
+  },
+  //   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: 'FF0000',
+            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[3].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'
+        }
+      ]
+
+      // 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('情报板所属类别不能为空')
+      }
+      this.$emit('addInfo', this.dataForm)
+      this.dialogVisible = false
+      //走接口检验内容是否包含敏感字段
+      /*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) * 100
+              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) * 100,
+                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) * 100
+      //     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) * 100,
+      //       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),
+      //       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
+      }
+    },
+    // 文字对齐方式
+    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
+      // console.log(this.dataForm.COORDINATE, "this.dataForm.COORDINATE");
+      if (alignmentNum != undefined) {
+        this.dataForm.formatStyle = alignmentNum
+      }
+    },
+    addZero(num) {
+      return ('000' + num).slice(-3)
+    },
+    /*增加新的内容*/
+
+    getTextAlign(font) {
+      if (font == '0') {
+        return 'left'
+      } else if (font == '1') {
+        return 'right'
+      } else {
+        return 'center'
+      }
+    },
+    /*删除内容*/
+    // 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/boardView/boardData.json b/ruoyi-ui/src/views/boardView/boardData.json
new file mode 100644
index 00000000..881570aa
--- /dev/null
+++ b/ruoyi-ui/src/views/boardView/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/boardView/editInfo.vue b/ruoyi-ui/src/views/boardView/editInfo.vue
new file mode 100644
index 00000000..8c08715d
--- /dev/null
+++ b/ruoyi-ui/src/views/boardView/editInfo.vue
@@ -0,0 +1,917 @@
+<template>
+  <div class="container infoBoardDialog">
+    <!-- 添加信息弹窗 -->
+    <el-dialog title="修改" :visible.sync="dialogVisible" width="50%" :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">
+        <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',
+            lineHeight:boardHeight + 'px',
+            textAlign: getTextAlign(dataForm.formatStyle),
+            justifyContent: getTextAlign(dataForm.formatStyle)
+          }">
+          <span class="textBoard1 boardTextStyle" :style="{
+              color: getColorStyle(dataForm.COLOR),
+              fontSize: getFontSize(dataForm.FONT_SIZE),
+              fontFamily: dataForm.FONT,
+              zIndex: '1000',
+        
+              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="formatStyle" @input="alignment(formatStyle)">
+                <el-radio-button :label="0">左对齐</el-radio-button>
+                <el-radio-button :label="2">左右居中</el-radio-button>
+                <el-radio-button :label="1">右对齐</el-radio-button>
+              </el-radio-group>
+              <!-- <el-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="screenSize" label="屏幕尺寸">
+                <el-input disabled v-model="dataForm.screenSize"></el-input>
+
+              </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="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="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-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 {
+      formatStyle: 2,
+      alignmentNum: 2,
+      iotTemplateCategoryList: [],
+      content: '',
+
+      boardWidth: '',
+      boardHeight: '',
+      // boardEmitItem:this.boardEmitItem,
+      disabled: true,
+      checkList: [], //复选框一组
+      obj: '',
+      imgUrl: [],
+      imgUrlOther: [],
+      dialogVisible: true,
+      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: 'yellow',
+      fontSize: '24',
+      fontType: 'KaiTi',
+      fontSpacing: 0,
+      coordinate: '000000',
+      url: '',
+      previewContent: '', //预览内容
+      ispreviewContent: -1,
+      dataForm: {
+        CONTENT: '',
+        STAY: '',
+        FONT: '',
+        COORDINATE: ''
+
+        // 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'
+          }
+        ],
+        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.init()
+    }
+  },
+  methods: {
+    init() {
+      this.title = '修改'
+
+      this.dialogVisible = true
+      this.itemPropertyMap = new HashMap()
+      this.alignmentNum = 2
+      console.log('点击编辑按钮数据回显', this.boardEmitItem)
+      this.dataForm = JSON.parse(JSON.stringify(this.boardEmitItem))
+      this.dataForm.formatStyle = this.formatStyle
+      this.dataForm.COLOR = this.getColorValue(this.boardEmitItem.COLOR)
+      console.log(this.dataForm, 'this.dataForm')
+      // 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) / 100))
+      this.dataForm.STAY = Number(this.boardEmitItem.playbackDuration) / 10
+      console.log('数据回显处理后的参数', this.dataForm)
+      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 3:
+          divContent1[0].style.alignItems = 'flex-start'
+          textBoard1[0].style.position = 'static'
+
+          break
+        // 上下对齐
+        case 4:
+          divContent1[0].style.alignItems = 'center'
+          textBoard1[0].style.position = 'static'
+
+          break
+        // 下对齐
+        case 5:
+          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)
+      console.log('宽高比11111111', textLeft, textTop)
+      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)
+    },
+    getTextAlign(font) {
+      if (font == '0') {
+        return 'left'
+      } else if (font == '1') {
+        return 'right'
+      } else {
+        return 'center'
+      }
+    },
+    // 表单确认
+    dataFormSubmitHandle() {
+      console.log(this.dataForm.type, 'this.dataForm.type')
+      if (!this.dataForm.CONTENT.trim()) {
+        return this.$modal.msgError('当前输入内容为空')
+      }
+      // this.loading = true
+      // console.log('点击修改 表单', this.dataForm)
+      this.$emit('receiveForm', this.dataForm)
+
+      // this.loading = false
+      // this.isAdd = false
+      // if (this.dataForm.type == 1) {
+      //   this.dataForm.STAY = Number(this.dataForm.STAY) * 100
+      //   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.replace(/\D/g, ''),
+      //     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) * 100,
+      //     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.replace(/\D/g, ''),
+      //     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) * 100
+            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) * 100,
+              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 == '宋体') {
+        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
+      }
+    },
+    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 > 128) {
+          return 128 + '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'
+        }
+      }
+    },
+    getFontSize(size) {
+      if (this.boardWidth > 768) {
+        let i = this.boardWidth / 768
+        return size.replace(/\D/g, '') / 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/components/videoPlayer/myVideo.vue b/ruoyi-ui/src/views/components/videoPlayer/myVideo.vue
index c4c3d273..c8bf7138 100644
--- a/ruoyi-ui/src/views/components/videoPlayer/myVideo.vue
+++ b/ruoyi-ui/src/views/components/videoPlayer/myVideo.vue
@@ -1,113 +1,167 @@
 <template>
   <div class="video-box" v-loading="loading">
-    <video class="demo-video" ref="player" muted autoplay   @dblclick="fullScreen"></video>
+    <video class="demo-video"  ref="player" muted autoplay @dblclick="fullScreen"></video>
   </div>
 </template>
 <script>
-    import flvjs from 'flv.js'
-    export default {
-      props: {
-          url: {
-              type: String,
-              default: ''
-          }
-      },
-      data () {
-          return {
-              // id: '1',
-              player: null,
-              loading: false
-          }
-      },
-      watch: {
-        url: {
-          handler() {
-            if (this.player) {
-              this.player.unload();
-              this.player.destroy();
-              this.player = null;
-            }
-            this.playVideo()
-          },
-          deep: true
-        }
-      },
-      mounted() {
-        this.loading = true;
+import flvjs from 'flv.js'
+
+export default {
+  props: {
+    url: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      // id: '1',
+      player: null,
+      lastDecodedFrames: 0,
+      loading: false
+    }
+  },
+  watch: {
+    url: {
+      handler() {
         if (this.player) {
-          //this.player.stream.close();
           this.player.unload();
           this.player.destroy();
           this.player = null;
         }
-        this.$nextTick(() => {
-          this.playVideo()
-        })
+        this.playVideo()
       },
-      beforeDestroy () {
-        if (this.player) {
-          this.player.unload();
-          this.player.destroy();
-          this.player = null
+      deep: true
+    }
+  },
+  mounted() {
+    if (this.player) {
+      //this.player.stream.close();
+      this.player.unload();
+      this.player.destroy();
+      this.player = null;
+    }
+    this.$nextTick(() => {
+      this.playVideo()
+      //延迟过大手动跳帧
+     /* setInterval(() => {
+        if (this.player.buffered.length) {
+          let end = this.player.buffered.end(0);//获取当前buffered值
+          let diff = end - this.player.currentTime;//获取buffered与currentTime的差值
+          console.log('跳帧',diff)
+          if (diff >= 0.5) {//如果差值大于等于0.5 手动跳帧 这里可根据自身需求来定
+            this.player.currentTime = this.player.buffered.end(0);//手动跳帧
+          }
         }
-      },
-      methods: {
-            fullScreen () {
-                if (this.$refs.player.requestFullScreen) {
-                    this.$refs.player.requestFullScreen()
-                } else if (this.$refs.player.mozRequestFullScreen) {
-                    this.$refs.player.mozRequestFullScreen()
-                } else if (this.$refs.player.webkitRequestFullScreen) {
-                    this.$refs.player.webkitRequestFullScreen()
-                }
-            },
-            playVideo () {
-                const time1 = new Date().getTime();
-                if (flvjs.isSupported()) {
-                    let video = this.$refs.player;
-                    if (video) {
-                        //创建播放器实例
-                        this.player = flvjs.createPlayer({
-                            type: 'flv',
-                            isLive: true,
-                            url: this.url,
-                            enableStashBuffer: false
-                        });
-                        this.player.attachMediaElement(video);
-                        try {
-                            this.player.load();
-                            this.player.play().then(() => {
-                                console.log(new Date().getTime() - time1);
-                                this.loading = false
-                            })
-                        } catch (error) {
-                            console.log(error)
-                        }
-                    }
-                }
-            }
-        },
+      }, 2000); //2000毫秒执行一次*/
+    })
+  },
+  beforeDestroy() {
+    this.destroyFlv()
+  },
+  methods: {
+    fullScreen() {
+      if (this.$refs.player.requestFullScreen) {
+        this.$refs.player.requestFullScreen()
+      } else if (this.$refs.player.mozRequestFullScreen) {
+        this.$refs.player.mozRequestFullScreen()
+      } else if (this.$refs.player.webkitRequestFullScreen) {
+        this.$refs.player.webkitRequestFullScreen()
+      }
+    },
+    playVideo() {
+      const time1 = new Date().getTime();
+      if (flvjs.isSupported()) {
+        let video = this.$refs.player;
+        if (video) {
+          this.loading = true;
+          //创建播放器实例
+          this.player = flvjs.createPlayer({
+            type: 'flv',
+            isLive: true,
+            url: this.url
+          },{
+            enableStashBuffer: false,
+            autoCleanupSourceBuffer: true,
+            lazyLoad:false
+          });
+          this.player.attachMediaElement(video);
+          try {
+            this.player.load();
+            this.player.play().then(() => {
+              console.log("首屏打开用时", new Date().getTime() - time1);
+              this.loading = false
+            })
+            this.listenVideo()
+          } catch (error) {
+            this.loading = false
+            console.log("播放失败", error)
+          }
+        }
+      }
+    },
+    // 监听视频流是否断流或者卡顿
+    listenVideo() {
+      const that = this;
+      this.player.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
+          console.log("视频播放出错，错误类型：", errorType,"错误详情：",errorDetail,"错误信息：",errorInfo);
+          // 视频出错后销毁重建
+          that.destroyFlv();
+          that.playVideo();
+        }
+      );
+      // 视频断流
+      this.player.on("statistics_info", function (res) {
+        if(that.lastDecodedFrames === 0){
+          that.lastDecodedFrames = res.decodedFrames
+          return
+        }
+        if(that.lastDecodedFrames != res.decodedFrames){
+          that.lastDecodedFrames = res.decodedFrames
+        }else{
+          that.lastDecodedFrames = 0
+          //that.destroyFlv()
+          //that.playVideo()
+        }
+      });
+    },
+    //销毁
+    destroyFlv() {
+      if (this.player) {
+        this.player.pause();
+        this.player.unload();
+        this.player.detachMediaElement();
+        this.player.destroy();
+        this.player = null;
+      }
+    },
+  },
 
-    }
+}
 </script>
 <style lang="scss">
-  .video-box {
+.video-box {
+  width: 100%;
+  height: 100%;
+
+  video {
     width: 100%;
     height: 100%;
-    video {
-      width: 100%;
-      height: 100%;
-      object-fit: fill;
-    }
-    //播放按钮
-    /*video::-webkit-media-controls-play-button {
-      display: none;
-    }
-    video::-webkit-media-controls-current-time-display {
-      display: none;
-    }
-    video::-webkit-media-controls-timeline {
-      display: none;
-    }*/
+    object-fit: fill;
+  }
+  .demo-video{
+    background-color: #4b4b4b;
+  }
+
+  //播放按钮
+  /*video::-webkit-media-controls-play-button {
+    display: none;
+  }
+  video::-webkit-media-controls-current-time-display {
+    display: none;
   }
+  video::-webkit-media-controls-timeline {
+    display: none;
+  }*/
+}
 </style>
diff --git a/ruoyi-ui/src/views/login.vue b/ruoyi-ui/src/views/login.vue
index 13759e5b..0c73c671 100644
--- a/ruoyi-ui/src/views/login.vue
+++ b/ruoyi-ui/src/views/login.vue
@@ -236,7 +236,7 @@ export default {
 };
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style rel="stylesheet/scss" lang="scss" scoped>
 .login {
   position: relative;
   height: 100%;
diff --git a/ruoyi-ui/vue.config.js b/ruoyi-ui/vue.config.js
index 7c518618..7d9762a6 100644
--- a/ruoyi-ui/vue.config.js
+++ b/ruoyi-ui/vue.config.js
@@ -7,7 +7,7 @@ function resolve(dir) {
 
 const name = process.env.VUE_APP_TITLE || "雅典娜"; // 网页标题
 
-const port = process.env.port || process.env.npm_config_port || 7081; // 端口
+const port = process.env.port || process.env.npm_config_port || 1024; // 端口
 
 // vue.config.js 配置说明
 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
@@ -34,41 +34,18 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        // target: `http://10.168.64.171:8010/`,//翟昌宏 公司
-        // target: `http://127.0.0.1:8080/`, //翟昌宏 公司
-        // target: `http://10.168.64.75:8888/`,//吴昊阳 公司
-        // target: `http://10.168.65.230:8000/`,// 展双
-        // target: `http://10.168.77.73:8000/`,// 何义伟
-        // target: `http://10.168.65.241:8000/`,// 田江伟
-        // target: `http://10.168.69.3:8000/`,// 郭政
-
-        // target: `http://10.3.16.252:8888/`,//吴昊阳 莱芜
-        // target: `http://10.7.179.35:8000/`,//翟昌宏 胡山
-        // target: `http://10.7.200.33:8000/`,//翟昌宏 仰天山
-        // target: `http://10.7.179.31:8000/`,//郭政 胡山
-        // target: `http://10.7.183.35:8000/`,//翟昌宏 太河
-
-        // target: `http://10.7.195.14:8000/`,// 庙子
-        // target: `http://10.7.179.15:8000/`,// 胡山
-        // target: `http://10.7.183.14:8000/`,// 太河
-        // target: `http://10.168.56.206:8000/`,// 公司
-        // target: `http://10.3.16.40:8888/`,// 测试基地
-        // target: `http://10.7.187.35:8000/`,// 九龙峪
+        // target: `http://127.0.0.1:8080`,
+        // target: `http://10.168.66.196:8080`,
+        // target: `http://10.168.77.128:8080`,
+        // target: `http://192.168.0.182:8080`,
+        // target: `http://192.168.0.194:8080`,
+        // target: `http://10.0.81.201:8080`,
         target: `http://10.168.77.209:8080`,// 刘朋
-
         changeOrigin: true,
         pathRewrite: {
-          ["^" + process.env.VUE_APP_BASE_API]: "",
-        },
-      },
-      "/gdLayer": {
-        target: `https://tm.amap.com/trafficengine/mapabc/traffictile`, // 服务器
-        secure: true,
-        changeOrigin: true,
-        pathRewrite: {
-          "^/gdLayer": "",
-        },
-      },
+          ['^' + process.env.VUE_APP_BASE_API]: ''
+        }
+      }
     },
 
     disableHostCheck: true,