From ed213fa807b05658e8e2eb22b9c250da4a412b90 Mon Sep 17 00:00:00 2001
From: hui <770260999@qq.com>
Date: Fri, 12 Jan 2024 17:59:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=83=85=E6=8A=A5=E6=9D=BF=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/public/static/systemConfig.js        |    2 +-
 ruoyi-ui/src/api/board/board.js               |   20 +-
 .../src/assets/jihe/images/button/delete.png  |  Bin 0 -> 654 bytes
 .../src/assets/jihe/images/button/edit.png    |  Bin 0 -> 720 bytes
 .../src/assets/jihe/images/button/edit2.png   |  Bin 0 -> 859 bytes
 .../src/assets/jihe/images/button/edit4.png   |  Bin 0 -> 754 bytes
 .../src/assets/jihe/images/button/toLeft.png  |  Bin 0 -> 766 bytes
 .../src/assets/jihe/images/button/toLeft2.png |  Bin 0 -> 939 bytes
 ruoyi-ui/src/common/boardBaseData.js          |   28 +
 ruoyi-ui/src/main.js                          |    2 +
 .../pages/service/board/BoardPreview.vue      |  100 ++
 .../pages/service/board/addinfo copy.vue      |  973 ++++++++++++++
 .../pages/service/board/addinfo.vue           |  746 +++--------
 .../pages/service/board/index.vue             | 1131 ++++-------------
 .../pages/service/board/testData/device.js    |  116 ++
 .../pages/service/board/testData/direction.js |   59 +
 .../pages/service/board/testData/template.js  |  164 +++
 .../board/testData/templateCategory.js        |  116 ++
 ruoyi-ui/src/views/login.vue                  |    4 +-
 ruoyi-ui/vue.config.js                        |    5 +-
 20 files changed, 2024 insertions(+), 1442 deletions(-)
 create mode 100644 ruoyi-ui/src/assets/jihe/images/button/delete.png
 create mode 100644 ruoyi-ui/src/assets/jihe/images/button/edit.png
 create mode 100644 ruoyi-ui/src/assets/jihe/images/button/edit2.png
 create mode 100644 ruoyi-ui/src/assets/jihe/images/button/edit4.png
 create mode 100644 ruoyi-ui/src/assets/jihe/images/button/toLeft.png
 create mode 100644 ruoyi-ui/src/assets/jihe/images/button/toLeft2.png
 create mode 100644 ruoyi-ui/src/common/boardBaseData.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardPreview.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo copy.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/device.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/direction.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/template.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/templateCategory.js

diff --git a/ruoyi-ui/public/static/systemConfig.js b/ruoyi-ui/public/static/systemConfig.js
index 0b1dae08..f0c9bd93 100644
--- a/ruoyi-ui/public/static/systemConfig.js
+++ b/ruoyi-ui/public/static/systemConfig.js
@@ -27,7 +27,7 @@ const systemConfig = {
   title0: '管理系统',
   url0: 'ry',
   navBarShow0: {bigScreen: 'false', frontPage: 'true', doc: 'true',weather:'true',breadcrumb:'true'},
-  title1: '智慧隧道综合管控平台',
+  title1: '济菏数字运营管理平台',
   url1: "athena",
   navBarShow1: {bigScreen: 'false', frontPage: 'false', doc: 'false',weather:'false',breadcrumb:'true'},
 
diff --git a/ruoyi-ui/src/api/board/board.js b/ruoyi-ui/src/api/board/board.js
index 98024eb7..22e565fa 100644
--- a/ruoyi-ui/src/api/board/board.js
+++ b/ruoyi-ui/src/api/board/board.js
@@ -1,10 +1,24 @@
 import request from '@/utils/request'
 
-// 查询设备列列表
+// 查询设备列表
 export function getBoardList(query) {
   return request({
-    url: '/iot/board/list',
+    url: '/business/device/query',
     method: 'get',
-    params: query
+    params: {
+      ...query,
+      deviceType:2
+    }
+  })
+}
+
+// 查询模板列表
+export function getTemplateList(query) {
+  return request({
+    url: '/business/boardTemplate/getAllVmsTemplate',
+    method: 'get',
+    params: {
+      ...query
+    }
   })
 }
diff --git a/ruoyi-ui/src/assets/jihe/images/button/delete.png b/ruoyi-ui/src/assets/jihe/images/button/delete.png
new file mode 100644
index 0000000000000000000000000000000000000000..f24976779100c56ddeaa169bfd310d2609bbc502
GIT binary patch
literal 654
zcmV;90&)F`P)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp00001b5ch_0Itp)
z=>Px%NJ&INRA@u(n?Xw(K@`V-lSl;*MZ8GGgP)*+Ai;~|U@5fJizh!uE~Q8hIf#fC
zzlC1ZgVI82523eEDCj5XK^l4~;z6+3th}yELdfpCn8`BP&ca@@Z!+)ye*c--S#}LT
z<v5xz8TN>%0?*{PF+N%t8tsU;%?)#D{)vNgU}lU(^-KMC8y3yVNpwKOX2Hb8atw!N
z<v99T09&T<X^Ft7kn|oz1%cyEHxLX2J+DBpsONyJ=>>w;5_ujF2zn04nqDAiEs^H|
z&IwMGpdH2MAV=ANF>u!&q?J9^slfFGs4c?nU)cQ)4cTcbj@3D+J%{N@*guEUABslG
z5N85~+~+qiS&n-ag7t6k<uW^ywRxy7L&?N(Qk)lO?npWlC>A?<3A0ljK{k=S;-uyE
zA9(d)aEqsv(V0N$K&-Y?>Cng`*-xAl<b6|bZH-Hv3X~4h67ROFCPtIICdRoyn@G9d
zJ>~`(uNpzUF(VO}B~q>>6UwN?$^VZ`V4BG83fm^3#}LbnVA4^)@s<a<r2ml;%%YeF
zy<pK{#z5LqP>4w;Yn>bWWkR!vYhs3RPj_3VlT39Ewuih`+iJpB<t{{11ZM(e@&5Q4
zo<8YxYnv(ik^FT78=pM9*)IHcNw_5&-m6>KztCGvto?2&-b;GB;Z2PB*hdy(aXGzy
zWT6@KdB-@LWb#g2+g}i<t(32EfuOHsw0Q-B+DiEv7YO=FMw?e4sI8Q*ae<((WVCtx
o2QS1H{gvjzzmzUsF7jsu_s!dNw3bC~cK`qY07*qoM6N<$g2aC?7ytkO

literal 0
HcmV?d00001

diff --git a/ruoyi-ui/src/assets/jihe/images/button/edit.png b/ruoyi-ui/src/assets/jihe/images/button/edit.png
new file mode 100644
index 0000000000000000000000000000000000000000..64b27b06f11de36fe8c09420474684a988dc8c4d
GIT binary patch
literal 720
zcmV;>0x$iEP)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp00001b5ch_0Itp)
z=>Px%ib+I4RA@u(o6k!WVHn3hv#z>pX3N%AMg<Z@P*53EYHnTX7(|EYUoh$*7}TLt
zAQgp`S#*jH34uZEp^HR6j8G!6Fp{D~tR;x0LI_iL;&qaEL)*(U^X^XXdmM)Mc|YIp
z^S;l#Gw(P6JA2&K5r=cQ>;-DowGwVw93JLfPV^sg#+_L>7y^<d3^m`-b9va}G~9J>
z<8mZqa2}3Bx6{z$ehNWaF62*E0lJ}d?>CeMEOmFSgVw<!SHPxdksDNSc-Fy!5*7Ik
z*1;k-sNnFdg9Rlj@*9jhxIG0Y>me3}jv?qBmsQLtV0{WMG(u&W2lZnb_Ge&5a06!y
zaB~ta?S^>tk7EjOUk37}4!AJ^mz$xwTu;aL7myh(@f2NG1D$DDQlW!fc?I2XW#MLD
z%LMt#V(nt+N<*?z2f6VYZoZL+3lwnGBDj`@R9pwSH3HX%{ecS%a77%t_CRfw4sz!m
zbiDKrE)c+_F)uCGRO=x3KET;Qf8l%wOjN+tG}P7TAos`M%yST|1`8_X+ajY%KxZ>-
zNa(R2e1y{jvbFACdEg6RRn#luoBsOR(U*l&{V<*PKQ-qfhy%vT;9?VOU8X|}e1^7X
zFcl!2_#7;c!1+elv0R56`~s~{VR9xo=foY1MxcEcG_BMjhI4Sd&wG$I(Zo`;Z5te{
z(-B6#!m%eXF=YbHizx=!djQnpGS}XJhog_-+fQ?FqJXL-sQsO4V-wKw2y&BV;Y0yd
zQ9rz1eN^>!1*V-7Uu4XCHU9|2=AZ>Mq=0qMknmz*t%G7x8tTY8Xh?Xmu+~8_DGhaG
z9W*4oSXk?zn3RS(`VS7ohW$u$=nti<sS)Pi3Vs1R#TvAsd<|d#0000<MNUMnLSTYg
CUqB=P

literal 0
HcmV?d00001

diff --git a/ruoyi-ui/src/assets/jihe/images/button/edit2.png b/ruoyi-ui/src/assets/jihe/images/button/edit2.png
new file mode 100644
index 0000000000000000000000000000000000000000..fcffeb4a7b89ce5f9cd20dd5f1ce2149c25e01e2
GIT binary patch
literal 859
zcmV-h1El<kP)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp00001b5ch_0Itp)
z=>Px&6-h)vRA@u(o7+niQ5?s=vpZ|17*QA*TV^6rRCXamqmrzUFhMLtyI>(@B}x~&
zL9I%$>Q=gGA`}=sSpPr|^<odbhHPlc=4G|b&DLAq+RNC+tgJXuu0wNO&UxA$e$0G7
zzt3ULGIN#!0E@-0|D|K9;X^8b81|TohXWMeX}t9H#6-QF^25=L1;7dwL;WrKh=!pP
zsn$=nX84dB5wR4}(JMjIT2*s0%nY2)VN6f|1Sq_uTH9>{?6i!H)vF#ZV1|Y4>$9_8
z9W0=a{S+S`t7>z9hVSm~^B*FBYSl^%s?}T|H!(;ID!c<^iYi=C(0IgP&=x7YfEZM`
zprG*-W3a8mipHj9c-(H}=N(5%($1ja7gL}J!1m71FxE7{<MH}4hlejgQ@sgVt!6O{
z3)aXEXzlLBy$AJhx!iL>S-|H{Owedl4%lPsM}?_w_OZgeQF!(Q4(v_-Z+q+sWHZ=r
zA3%Af852`e9FS8vSvZ=WCJ3BtfCJwKQD&^g*!TnoBqu8a*_r8r!N~&n-8qE2##)Sw
zj&VS;G7cj*J5x|N$pME(Mqx14!Z|d|0XcFg75RC`1c#FpaO}r848|Hb2Av#`gZua3
zTz;-7aFPK|OirS#(u^-(9UPE-DM`3ga1s<nsTYu40?Mn+=$(B4J2#Sd??6f689~;%
zg}Ni^GU0N$P+_V^SC5U8Vb}JpxLQ;IS}XqR0nq?GZV&E1YCwmzivzc9%O>0?J`bIa
z7HwM2Kd~r)UN3_xb0a>scXA*$Z%n}LD;E(KrjrCtl$#7QGlPe9Pw~Oh#(_xK5QjUZ
zMgAYsQVzilK6~*BZ(H7T7~<Big`u<<?5jDchv0yxFI)qAa|w)f`ZX}zEJ0Lcq||Kw
z>j@56QS}&YomT(JV^*(1`K`-XzAQ=>I8gxEMg8@g7Wm*pMtYiT<^mlR+@Nf#{&8Uf
zs5B#d^ALl4JEpXHVo+&D_~s!7`F2cc^~9jkjPT7v4D#)m(&~vpr5WLyXTHG@-w+$>
lTbe_DQ#w1hL-}t7zX9M9FjdaW^}GN8002ovPDHLkV1j^&hjjn|

literal 0
HcmV?d00001

diff --git a/ruoyi-ui/src/assets/jihe/images/button/edit4.png b/ruoyi-ui/src/assets/jihe/images/button/edit4.png
new file mode 100644
index 0000000000000000000000000000000000000000..26a56067a328b6794a69227caaf1d62d98b8ef86
GIT binary patch
literal 754
zcmV<O0uB9%P)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp00001b5ch_0Itp)
z=>Px%tVu*cRA@u(o6TzzK^VrL*=!=#C|K=52;|Va@dFilDB}OnL!pOQg+kGSD8-}R
z#1Dj83Kd%;6np6ZAR<_(Qey<Y6&eWkP_3Y`VzM9dE^Jv#lHFx?hTUcMlx*hXecs<Q
zGyB4Z0YI(RC|FtJK5SeBaDwh7_}T))YptzMmr8{ObHwRJ4M2Z_MRf{&M>F&itA5#h
z2^*t*eFrfxa16ShNwiMGFtNS;9lN`K0ET5&{k-{=Y*{Q85--jrLn7<-27TQkfi`^_
z94sc9-2UJ<HtNnTB`~R26~UyEbK_P76~UNiKv^{AfPBMK1btH!^9G7w%mMj^CyXGK
zDw&K1#+Yvq-Ug;=!nP4v$tFbLt2e7yTv|cyKn@e-QCv8CDv-$c)lYc7w1S_%niwA&
z!KLA$K>d0(id-O(D^K1+tKD|y)ie!L6J-pYKhrbV)ps8-GhcyaSx&oLHjB#KLvE6h
z3nYtOpT2`{J3saW`H6hHwvH!HU+jsaj`{o{EX>>sZE-0DFInx;?6dy@?j~|SIhXp4
z$??F}mTFOVvTlKU?HZ&F?;?!cqTYad37~e~H5X>Rh7m1PAO+G*B>m=YD5AvCxWWZ?
z6X~Vkw+V$ICS{Z96i_FUBFVWiNFmsZqDXqmqCDRBJ1$bO$)x(22y%!AX~XLxA)CzF
z`bRvTTMTs0brX5>+Etu8eUevS^yi>$+qg1y8_nkLzz^G<L>})yirEKuooa;Vikx8T
z%O%RTTksw^oX6#{k-%0XYtL7f(fZqpZ^7%@iAZW13vDs7xM^D4g|74`8J=~-(>L-p
z$P<i+zDl5otjZiy5tNy25pyYmBC;xTOhr&;wnfaP2#Uz6%rO-~nb{UGmzQA5Ux-cn
kE6u5YDV_YE=D!vE1MSqPRrwpZPyhe`07*qoM6N<$f@=9)SpWb4

literal 0
HcmV?d00001

diff --git a/ruoyi-ui/src/assets/jihe/images/button/toLeft.png b/ruoyi-ui/src/assets/jihe/images/button/toLeft.png
new file mode 100644
index 0000000000000000000000000000000000000000..6483e78e154f43dc658c797769073421ef6fb4cd
GIT binary patch
literal 766
zcmV<a0s;MrP)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp00001b5ch_0Itp)
z=>Px%xJg7oRA@u(n@wmFK@`V-o3yblwY4o(i&0zrKtZYBF{Xm(#giVygW%1Z7c14M
zh!jy20%|;{SHZ7SJ&0!!Z0(0wsaB}PL!fF5C6UrnYiqNzPL>pDOpB8x8E0>AGt9i-
z`@eZJvrG&CUz_Q58H6y|1JqgX3iyd)@H}Y}>^@|CGJeBBA5dMuP_wz7NJ69Ge{4R)
z<cMN$0>|Ky;cqj)D3F$!^od%4rjqKVpfq5itE&~%3g&qPbc*J=Kv~_>3T6#ao;T16
z=D9#w-O~zY4N;yq&<e^FsL}(MeQ<XGUJuXS^Re|%;el`;$T-J2reJL;gagn}0aHmh
z(+OR%G^7DEH^Sjn;@#5-T<QJy@HztMEr**;P*)}#{x||BJ0LzGY_|dDx5EAv!k(Ol
z3q9~6S^$8nD<Rwj)eD5P@8Zz%62_*4?Qz4U9k4s~EpPlM1UsQOLkiCqIj0J4tbuF0
zpuAYP)g6O#T`(~%?6M*V`C&_~utz3^vIF1di;=l~&H#N&;Ob5&af`v9eTIv##Qd|K
zMIN{wfOS>E9{vs|+95J356<c-CxH9B(7FwZT*BEW5eU73WU4GKE){cf<wEiM(3pVx
zIxZJ3Cx8bV;PfVNS!EHpKM1$`(~d7s6`Z9r3Qlu7B!0+;lMZ-vEgavFcJ$7Bxc4D#
zuSpf0s#L*w8;4Uf3QjH%rKYIzfR+LW>LIu}ouUs0;g%{XYNy!VWzf1EivLn%thKSe
z5Q~frsq`{oL;ktY_r&0=Dhs_0X>HYR1fZrwyy;IsO9zaquvN1mmELUIkV+qyY)GXK
zyt&w=%%xAMJDIr*=yV$m=yb$okEa!s9Z{$I(+WBraoOW(1!YIn>Hf5WPDfn!cv?Z(
w5p}x1|3X2<FT|>TrCIq)>DHuI`ELck01M!Iv}0bcx&QzG07*qoM6N<$f(VCR$^ZZW

literal 0
HcmV?d00001

diff --git a/ruoyi-ui/src/assets/jihe/images/button/toLeft2.png b/ruoyi-ui/src/assets/jihe/images/button/toLeft2.png
new file mode 100644
index 0000000000000000000000000000000000000000..3dce1fadf0a0b67812c1b5523c8fbd5cf1cc2b82
GIT binary patch
literal 939
zcmV;c162HpP)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp00001b5ch_0Itp)
z=>Px&Wl2OqRA@u(n{7x_Q5eVn*ETbUW}1{~ni`g|Tz>F_MQ<e03z_srW{?F9Bt^m$
zD*RLu<;udDq+|-Ifd%=+0u40Kz@jnAUMS7kblRM$Q#0LM+#`3CEH-TSvU|Jd)1GtB
zJ?Hs7|Fh?wdpMT@0IgOZHY2rMgALmNgwS<7E(TC&_L`RDDHLIPioi)MS^$AOhH~Wk
zke5ZGpfvBgYhXjFukRuR2M0kSS-@*fi^U3~(S(VK9{`0~O4HHZM^DR$h%ny6G0M=8
zI-Q<24K$#Q{uLb^!E5E_I^Wr;BUK_GUu6{)<g0Rw-=cz|f*u|Laf*7lKu+Bg6?7UR
z4{snU=-~o6bx%~#X^7_0z&t*VqLRBfux}USu`v#NsH<<l*!Tp}QxAfosCkSsdkg0Z
z4t*cSWtAHGzJ5rh669tnv0?o>JAln*!@Zh^c-quL>b7rAM8>H!egO7=GvZRA8pc5r
zaX4aSC@$ulLBL{vVq2{<D6P1U=WXr8_LfSKopBNg@o}CHsQcQB0+kxWqh{jln$=M_
ze>Ma39uQrorl)bUv;wa*Z;0*V<Ac0xCFE-zPhnSyIhmp#KX>6uQR(ak5CDZd7P*<H
z;l0qC*pri!xO(djIzD_Nwx3K!l#PlEca`I>?N|rYzI~5EbvdSfP7x;(6XKDjOt)`r
zna9RZaN{<*zVwjmflC6Ae=ZZDE0+H=9P3G@t^GCBWmT|Pt;E?KTQ@;@;;20<n&^a6
zSd3o70J$ErEExH@Sy&q6zO7l-6l`i~MS0Z&&{>f#`}ZUv?Qn`+6~h3XaEdW#8X|S8
z!b5Q(Cldkwer{2Y>4X))`i4eS*VWq{J$5J=DSLO??d~2u3REQ+F*{B;?j&RhunE<5
zkA(|JlRax`McHptG<kOtjvo=o6lJ7)@lu20vP#ff=p@N(*$8EN>YqtQrABXGKmU>p
z11ado1OqwuK_4fNMV?R|^b90fs$DO^@W?2siiwUSOEsCym)N{ssxgp)UTiavuDmW)
z);_|M#%6L0uU?lJNI}2wx^tD{N?)w3WLz1Tt2QDaSCM9G98p2GBFk03qJmsSnyqm}
z1=)%$SN)0#ausQ|#t{`{E3#bm`(G(2@B^_zKhiAtL+SLNUdW#n`~o;I!BrO`>;C`%
N002ovPDHLkV1oRQsO10v

literal 0
HcmV?d00001

diff --git a/ruoyi-ui/src/common/boardBaseData.js b/ruoyi-ui/src/common/boardBaseData.js
new file mode 100644
index 00000000..ba8ddb12
--- /dev/null
+++ b/ruoyi-ui/src/common/boardBaseData.js
@@ -0,0 +1,28 @@
+import Vue from "vue";
+import { getDicts } from "@/api/system/dict/data";
+export default function(){
+    getDicts('iot_device_font_type').then(res => {
+        let dic = {};
+        res.data.forEach(item=>{
+            dic[item.dictValue] = item.cssClass;
+        });
+        Vue.prototype.fontTypeDic = dic;
+        Vue.prototype.fontTypeList = res.data;
+        console.log(dic , "++==================");
+        // console.log(fontTypeList, "字体类型");
+    })
+    getDicts('iot_devices_font_color').then(res => {
+        
+    })
+    getDicts('iot_device_font_inScreen_mode').then(res => {
+        
+    })
+    getDicts('iot_template_category').then(res => {
+        
+    })
+    getDicts('iot_device_font_size').then(res => {
+        
+    })
+
+
+}
\ No newline at end of file
diff --git a/ruoyi-ui/src/main.js b/ruoyi-ui/src/main.js
index 6f18ff04..ca6e3c8e 100644
--- a/ruoyi-ui/src/main.js
+++ b/ruoyi-ui/src/main.js
@@ -90,6 +90,8 @@ Vue.prototype.handleTree = handleTree
 Vue.prototype.socket = Socket
 Vue.prototype.numberMul = numberMul
 
+import boardBaseData from '@/common/boardBaseData'
+boardBaseData();
 
 // gis 
 Vue.prototype.$GlobalConfig = config.GlobalConfig
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardPreview.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardPreview.vue
new file mode 100644
index 00000000..a1d1f958
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardPreview.vue
@@ -0,0 +1,100 @@
+<template>
+    <div class="boardPreview" ref="compBox">
+        <div class="boardBox" :style="boardStyle">
+            <span class="boardTxt" :style="boardTxtStyle" v-html="tpl.content.replace(/\n|\r\n/g, '<br>').replace(/ /g, '&nbsp')"></span>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name:"BoardPreview",
+    data(){
+        return {
+            boardStyle:null,
+            boardTxtStyle:null
+        }
+    },
+    props:{
+        boardWH: {
+            type: String,
+            default: "300*200"
+        },
+        tpl: {
+            // {
+            //     "id": 3, 
+            //     "category": "0", 
+            //     "content": "保持车距，控制车速", 
+            //     "screenSize": "768*64", 
+            //     "fontColor": "FFFF00", 
+            //     "fontSize": "64", 
+            //     "fontType": "2", 
+            //     "fontSpacing": "0", 
+            //     "rollingSpeed": null, 
+            //     "stopTime": "50", 
+            //     "inScreenMode": "1", 
+            //     "formatStyle": "2", 
+            //     "remark": null, 
+            //     "createTime": "2024-01-06 10:40:19", 
+            //     "updateTime": "2024-01-06 11:04:53"
+            // }
+            type: Object,
+            default: {}
+        },
+    },
+    watch:{
+        boardWH:{
+            handler(newV){
+                this.boardScale();
+            },
+            immediate:true
+        }
+    },
+    computed:{
+    },
+    mounted(){
+    },
+    methods:{
+        boardScale() {
+            this.$nextTick(() => {
+                let boxW = this.$refs["compBox"].offsetWidth;
+                let boxH = this.$refs["compBox"].offsetHeight;
+                let arr = this.boardWH.split("*");
+                let scale = 1;
+                if (arr[0] / arr[1] > boxW / boxH) {
+                    scale = boxW / arr[0];
+                } else {
+                    scale = boxH / arr[1];
+                }
+                this.boardStyle =  {
+                    width: `${arr[0] * scale}px`,
+                    height: `${arr[1] * scale}px`
+                }
+                this.boardTxtStyle = {
+                    "color": "#" + this.tpl.fontColor, 
+                    "font-size": `${this.tpl.fontSize * scale}px`, 
+                    "font-family": this.fontTypeDic[this.tpl.fontType], 
+                    // "fontSpacing": "0", 
+                    // "rollingSpeed": null, 
+                    // "stopTime": "50", 
+                    // "inScreenMode": "1", 
+                    // "formatStyle": "2", 
+                }
+            })
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.boardPreview{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    .boardBox {
+        background-color: #000;
+        .boardTxt{
+            color: #f00;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo copy.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo copy.vue
new file mode 100644
index 00000000..ea25a129
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo copy.vue	
@@ -0,0 +1,973 @@
+<template>
+  <div class="container infoBoardDialog">
+    <!-- 添加信息弹窗 -->
+    <el-dialog title="新增" :visible.sync="dialogVisible" width="43%" :before-close="handleClose" :close-on-click-modal="false" append-to-body>
+      <div class="dialogStyleBox">
+        <div class="dialogLine"></div>
+        <div class="dialogCloseButton"></div>
+      </div>
+      <el-card class="box-card">
+        <div v-on:ondragenter="ondragenter" v-on:drop="faceDrop" v-on:dragover="allowDrop" :style="{
+            width: boardWidth + 'px',
+            height: boardHeight + 'px',
+            position: 'relative',
+
+
+            textAlign: getTextAlign(dataForm.formatStyle)
+
+          }" class="blackBoard2">
+          <span :style="{
+              color: getColorStyle(dataForm.COLOR),
+              fontSize: dataForm.FONT_SIZE,
+              fontFamily: dataForm.FONT,
+              zIndex: '1000',
+              position:'relative',
+              /*left: dataForm.COORDINATE
+                ? dataForm.COORDINATE.substring(0, 3) + 'px'
+                : '',
+              top: dataForm.COORDINATE
+                ? dataForm.COORDINATE.substring(3, 6) + 'px'
+                : '',*/
+              maxHeight:boardHeight + 'px',
+            }" class="textBoard2 boardTextStyle" v-html="
+              dataForm.CONTENT
+                ? dataForm.CONTENT.replace(/\n|\r\n/g, '<br>').replace(
+                    / /g,
+                    '&nbsp'
+                  )
+                : ''
+            "></span>
+        </div>
+      </el-card>
+      <el-card>
+        <el-form :model="dataForm" :rules="dataRule" label-width="90px" ref="dataForm" size="mini">
+          <el-row :gutter="24" style="height: 45px;">
+            <el-col :span="8">
+              <el-form-item prop="category" label="所属类别" :rules="[
+                  {
+                    required: categoryRules ? true : false,
+                    message: '请选择所属类别',
+                    trigger: 'blur',
+                  },
+                ]" v-show="infoType == 2">
+                <el-select v-model="dataForm.category" placeholder="请选择所属类别" clearable size="mini">
+                  <el-option v-for="item in iotTemplateCategoryList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col class="infoBoardButton" :span="16">
+              <el-radio-group v-model="radio1" @input="alignment(radio1)">
+                <el-radio-button :label="0">左对齐</el-radio-button>
+                <el-radio-button :label="2">左右居中</el-radio-button>
+                <el-radio-button :label="1">右对齐</el-radio-button>
+              </el-radio-group>
+              <!-- <el-button type="primary" @click="alignment(1)" size="mini"
+                >左对齐</el-button
+              >
+              <el-button type="primary" @click="alignment(2)" size="mini"
+                >左右居中</el-button
+              >
+              <el-button type="primary" @click="alignment(3)" size="mini"
+                >右对齐</el-button
+              > -->
+            </el-col>
+          </el-row>
+
+          <!-- 选择图片弹出框结束 -->
+          <el-row :gutter="24" style="display: flex;
+    flex-wrap: wrap;width:100%">
+            <el-col :span="24">
+              <el-form-item label="详细内容" prop="CONTENT">
+                <el-input type="textarea" clearable id="textContent" placeholder="详细内容" v-model="dataForm.CONTENT" @keyup.native="keyDown($event)"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="COLOR" label="字体颜色">
+                <el-select v-model="dataForm.COLOR" filterable placeholder="请选择">
+                  <el-option v-for="item in colorOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="FONT_SIZE" label="字体大小">
+                <el-select v-model="dataForm.FONT_SIZE" style="width: 100%" @change="changeFontSize">
+                  <el-option v-for="item in fontSizeOpt" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="FONT" label="字体类型">
+                <el-select v-model="dataForm.FONT" filterable placeholder="请选择">
+                  <el-option v-for="item in fontTypeOptions" :key="item.dictLabel" :label="item.dictLabel" :value="item.dictLabel">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="8">
+              <el-form-item prop="STAY" label="停留时间(秒)">
+                <el-input-number :min="0" controls-position="right" v-model="dataForm.STAY" style="width: 100%" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="ACTION" label="入屏方式">
+                <el-select v-model="dataForm.ACTION" filterable placeholder="请选择">
+                  <el-option v-for="item in inScreenModeOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="screenSize" label="屏幕尺寸">
+                <el-select v-model="dataForm.screenSize" filterable placeholder="请选择" v-if="!devicePixelBoolean">
+                  <el-option v-for="item in screenSizeOptions" :key="item.device_pixel" :label="item.device_pixel" :value="item.device_pixel" @click.native="changeScreenSize(item.device_pixel)">
+                  </el-option>
+                </el-select>
+                <el-input disabled v-model="dataForm.screenSize" v-if="devicePixelBoolean"></el-input>
+              </el-form-item>
+            </el-col>
+
+          </el-row>
+        </el-form>
+      </el-card>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dataFormSubmitHandle()" v-loading="loading" style="background-color: #10aac2;color:#fff;" class="submitButton">确认
+        </el-button>
+        <el-button class="closeButton" style="background-color:#b5b5b6;color:#fff" @click="handleClose">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getTemplateInfo, addTemplate, addTemplateContent, editTemplateContent, editTemplate, deleteTemplate, getTemplateContent, getGalleryList, getFontSizeByDevicePixel, uploadBoardEditInfo } from '@/api/board/template'
+import { devicessize } from '@/api/information/api.js'
+import { checkIotBoardContent } from '@/api/board/vocabulary'
+export default {
+  data() {
+    return {
+      radio1: '2',
+      alignmentNum: 2,
+      content: '',
+      boardWidth: '',
+      boardHeight: '',
+      checkList: [], //复选框一组
+      obj: '',
+      imgUrl: [],
+      imgUrlOther: [],
+      dialogVisible: false,
+      fileList: [
+        {
+          name: 'food.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        },
+        {
+          name: 'food2.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        }
+      ],
+      listquery: [], //拖拽图片
+      curDragImgItem: '',
+      visible: false,
+      startTxt_x: '000',
+      startTxt_y: '000',
+      width: '400',
+      height: '40',
+      // content: "",
+      fontColor: 'FFFF00',
+      fontSize: '24',
+      fontType: 'KaiTi',
+      fontSpacing: 0,
+      coordinate: '000000',
+      url: '',
+      previewContent: '', //预览内容
+      ispreviewContent: -1,
+      dataForm: {},
+      templateContent: [],
+      templateDelContent: [],
+      dataRule: {
+        screenSize: [
+          {
+            required: true,
+            message: '请选择分辨率',
+            trigger: 'blur'
+          }
+        ],
+        CONTENT: [
+          {
+            required: true,
+            message: '请输入详细内容',
+            trigger: 'blur'
+          }
+        ],
+        fontColor: [
+          {
+            required: true,
+            message: '请填写字体颜色',
+            trigger: 'blur'
+          }
+        ],
+        fontSize: [
+          {
+            required: true,
+            message: '请填写字体大小',
+            trigger: 'blur'
+          }
+        ],
+        fontType: [
+          {
+            required: true,
+            message: '请选择字体类型',
+            trigger: 'change'
+          }
+        ],
+        fontSpacing: [
+          {
+            required: true,
+            message: '请选择字体间距',
+            trigger: 'change'
+          }
+        ],
+        rollSpeed: [
+          {
+            required: true,
+            message: '请填写滚动速度',
+            trigger: 'blur'
+          }
+        ],
+        stopTime: [
+          {
+            required: true,
+            message: '请填写停留时间',
+            trigger: 'blur'
+          }
+        ],
+        inScreenMode: [
+          {
+            required: true,
+            message: '请选择入屏方式',
+            trigger: 'blur'
+          }
+        ]
+      },
+      fontTypeOptions: [],
+      screenSizeOptions: [],
+      colorOptions: [],
+      isCurrencyOptions: [
+        {
+          code: '0',
+          content: '通用'
+        },
+        {
+          code: '1',
+          content: '仅为智能推荐模板'
+        }
+      ],
+      inScreenModeOptions: [],
+      imgSize: [
+        {
+          type: '1024*128',
+          name: '全屏'
+        },
+        {
+          type: '',
+          name: '正常'
+        }
+      ],
+      fontSizeOpt: [],
+      title: '选择图片',
+      loading: false,
+      isAdd: false,
+      iotTemplateCategoryList: [],
+      infoType: '',
+      devicePixelBoolean: false,
+      categoryRules: false
+    }
+  },
+  //   directives: {
+  //     drag: function (el, binding, vnode) {
+  //       let that = vnode.context;
+  //       let dragBox = el;
+  //       dragBox.onmousedown = (e) => {
+  //         // that.startTxt_x = dragBox.style.left.substring (0, dragBox.style.left.length - 2)
+  //         // that.startTxt_y = dragBox.style.left.substring (0, dragBox.style.top.length - 2)
+  //         let disX = e.clientX - dragBox.offsetLeft;
+  //         let disY = e.clientY - dragBox.offsetTop;
+  //         let clientHeight = dragBox.clientHeight;
+  //         let clientWidth = dragBox.clientWidth;
+  //         document.onmousemove = function (e) {
+  //           //鼠标移动触发事件，元素移到对应为位置
+  //           let left = e.pageX - disX;
+  //           let top = e.pageY - disY;
+  //           //限制区域
+  //           if (left <= 0) {
+  //             left = 0;
+  //           } else if (that.width - left - clientWidth <= 0) {
+  //             left = that.width - clientWidth;
+  //           }
+  //           if (top <= 0) {
+  //             top = 0;
+  //           } else if (that.height - top - clientHeight <= 0) {
+  //             top = that.height - clientHeight;
+  //           }
+  //           dragBox.style.left = left + "px";
+  //           dragBox.style.top = top + "px";
+  //           let a = (Array(3).join("0") + parseInt(left)).slice(-3);
+  //           let b = (Array(3).join("0") + parseInt(top)).slice(-3);
+  //           that.templateContent[dragBox.id].coordinate = a + b;
+  //         };
+  //         document.onmouseup = function () {
+  //           //鼠标抬起，清除绑定的事件，元素放置在对应的位置
+  //           document.onmousemove = null;
+  //           document.onmousedown = null;
+  //         };
+  //         e.preventDefault(); //阻止浏览器的默认事件
+  //       };
+  //     },
+  //   },
+  computed: {
+    divStyle: function () {
+      return {
+        width: this.width + 'px',
+        height: this.height + 'px'
+      }
+    }
+  },
+  watch: {
+    // "dataForm.CONTENT": {
+    //   deep: true,
+    //   handler: function (newValue, oldValue) {
+    //     this.dataForm.content1 = newValue;
+    //   },
+    // },
+    //   templateContent: {
+    //     deep: true,
+    //     handler: function (newValue, oldValue) {
+    //       // this.templateContent=newValue
+    //       var vm = this;
+    //       let inrex = [];
+    //       for (let index = vm.templateContent.length - 1; index >= 0; index--) {
+    //         if (
+    //           vm.templateContent[index].content == "" &&
+    //           (vm.templateContent[index].img == "" ||
+    //             vm.templateContent[index].imageName == "")
+    //         ) {
+    //           inrex.push(index);
+    //         }
+    //       }
+    //       for (let index = 0; index < inrex.length; index++) {
+    //         vm.templateContent.splice(inrex[index], 1);
+    //       }
+    //     },
+    //   },
+  },
+  mounted() {
+    this.getDicts('iot_template_category').then(res => {
+      this.iotTemplateCategoryList = res.data
+      // console.log(this.iotTemplateCategoryList, "this.iotTemplateCategoryList");
+    })
+  },
+  created() {
+    this.getDicts('iot_device_font_type').then(res => {
+      this.fontTypeOptions = res.data
+      // console.log(this.fontTypeOptions, "字体类型");
+    })
+    this.getDicts('iot_devices_font_color').then(res => {
+      this.colorOptions = res.data
+      // console.log(this.colorOptions, "字体颜色");
+    })
+    this.getDicts('iot_device_font_inScreen_mode').then(res => {
+      this.inScreenModeOptions = res.data
+      // console.log(this.inScreenModeOptions, "入屏方式");
+    })
+    this.getdevicessize()
+  },
+  methods: {
+    init(devicePixel, type, mode) {
+      if (devicePixel) {
+        this.devicePixelBoolean = true
+        this.dataForm.screenSize = devicePixel
+        this.boardWidth = devicePixel.split('*')[0]
+        this.boardHeight = devicePixel.split('*')[1]
+      } else {
+        this.devicePixelBoolean = false
+        ;(this.boardWidth = '400'), (this.boardHeight = '40')
+      }
+      // type 1:待下发信息  2:信息模板
+      // mode 1:工作台弹窗跳转 2：情报板管理跳转
+
+      this.infoType = type
+      if (mode == 1 || type == 1) {
+        this.categoryRules = false
+      } else {
+        this.categoryRules = true
+      }
+      // this.title = "新增";
+      this.isAdd = !this.dataForm.id
+      this.dialogVisible = true
+      this.templateDelContent = []
+      this.$nextTick(() => {
+        if (this.isAdd) {
+          this.$refs['dataForm'] && this.$refs['dataForm'].resetFields()
+          this.dataForm.id = ''
+          this.dataForm = {}
+          this.width = '400'
+          this.height = '40'
+          this.dataForm = {
+            CONTENT: '请输入内容',
+            COLOR: 'FFFF00',
+            FONT: '黑体',
+            SPEED: '1',
+            ACTION: '1',
+            // COORDINATE: "",
+            STATE: 'true',
+            STAY: '5',
+            screenSize: devicePixel,
+            formatStyle: '2'
+          }
+          this.content = '请输入内容'
+        } else {
+          // this.getInfo();
+          // this.$refs["dataForm"] && this.$refs["dataForm"].clearValidate();
+        }
+      })
+      if (this.dataForm.screenSize) {
+        this.getFontSizeList(1)
+      }
+      this.$forceUpdate()
+    },
+    getFontSizeList(type) {
+      this.getDicts('iot_device_font_size').then(res => {
+        this.fontSizeOpt = res.data
+        this.dataForm.FONT_SIZE = res.data[1].dictValue
+        if (type) {
+          this.alignment(2)
+        }
+      })
+
+      //TODO 测试数据 后期需转接口
+      /*getFontSizeByDevicePixel(this.dataForm.screenSize).then((res) => {
+        console.log(res, "根据分辨率筛字体大小");
+        this.fontSizeOpt = res.data.fontSizeList;
+        this.dataForm.FONT_SIZE = res.data.defaultFont;
+        if(type){
+          this.alignment(2)
+        }
+      });*/
+    },
+    // 查分辨率
+    getdevicessize() {
+      //TODO 测试数据 需删除走接口
+      this.screenSizeOptions = [
+        {
+          device_pixel: '192*160'
+        },
+        {
+          device_pixel: '480*48'
+        },
+        {
+          device_pixel: '768*64'
+        },
+        {
+          device_pixel: '160*80'
+        }
+      ]
+
+      // TODO 查分辨率接口
+      /*devicessize().then((res) => {
+        console.log(res, "查分辨率");
+        this.screenSizeOptions = res.data;
+      });*/
+    },
+    changeScreenSize(size) {
+      this.boardWidth = size.split('*')[0]
+      this.boardHeight = size.split('*')[1]
+      this.getFontSizeList()
+      this.$forceUpdate()
+    },
+    changeFontSize() {
+      console.log(this.dataForm.FONT_SIZE)
+      this.alignment(this.alignmentNum)
+      this.$forceUpdate()
+    },
+    keyDown(ev) {
+      this.alignment(this.alignmentNum)
+    },
+
+    //选择图片弹框关闭事件
+    close() {
+      this.checkList = []
+      this.dialogVisible = false
+    },
+    faceDrop(e) {
+      e.preventDefault() //阻止默认行为
+      this.listquery.push(this.curDragImgItem)
+    },
+    // 全选
+    allowDrop(e) {
+      e.preventDefault() //阻止默认行为
+    },
+    ondragenter(e) {
+      e.preventDefault() //阻止默认行为
+    },
+    // 获取信息
+    // getInfo() {
+    //   getTemplateInfo(this.dataForm.id).then((data) => {
+    //     this.dataForm = data.data;
+    //     this.width = this.dataForm.screenSize.split("*")[0];
+    //     this.height = this.dataForm.screenSize.split("*")[1];
+    //   });
+    //   getTemplateContent(this.dataForm.id).then((data) => {
+    //     this.templateContent = data.rows;
+
+    //     if (this.templateContent.length == 0) {
+    //       this.templateContent.push({
+    //         content: "",
+    //         fontColor: "yellow",
+    //         fontSize: "24",
+    //         fontType: "KaiTi",
+    //         fontSpacing: 0,
+    //         coordinate: "000000",
+    //         img: "",
+    //       });
+    //     }
+    //   });
+    // },
+    // 表单提交
+    async dataFormSubmitHandle() {
+      this.alignment()
+      // let valid = await this.$refs.dataForm.validate().catch(() => {
+      //   return this.$modal.msgError("校验错误");
+      // });
+      // if (!valid) return;
+      if (!this.dataForm.CONTENT.trim()) {
+        return this.$modal.msgError('当前输入内容为空')
+      } else if (!this.dataForm.category && this.infoType == 2) {
+        return this.$modal.msgError('情报板所属类别不能为空')
+      }
+      if (this.dataForm.CONTENT.indexOf('\\')>0) {
+        return this.$modal.msgError("内容不能含有特殊字符'\\'")
+      }
+      //走接口检验内容是否包含敏感字段
+      /*checkIotBoardContent(this.dataForm.CONTENT).then(response => {
+        if (response.data == 0) {
+          return this.$modal.msgError('当前发布内容包含敏感字段，请修改')
+        } else if (response.data == 2) {
+          return this.$modal.msgError('当前输入内容为空')
+        } else {
+          this.loading = true
+          // let templateId = "";
+          let method = 'put'
+          if (this.isAdd) {
+            if (this.infoType == 1) {
+              // 不走接口 存到待下发信息里
+              this.dataForm.STAY = Number(this.dataForm.STAY) * 10
+              this.$emit('addInfo', this.dataForm)
+            } else {
+              // 走接口 存到信息模板里
+              const params1 = {
+                applyType: '',
+                category: this.dataForm.category,
+                coordinate: '',
+                height: '',
+                id: '',
+                imageUrl: '',
+                imgSizeFrom: '',
+                inScreenMode: this.dataForm.ACTION,
+                remark: '',
+                screenSize: this.dataForm.screenSize,
+                stopTime: Number(this.dataForm.STAY) * 10,
+                vmsType: '',
+                width: ''
+              }
+              const templateContent = []
+              templateContent.push({
+                content: this.dataForm.CONTENT,
+                coordinate: this.dataForm.COORDINATE,
+                fontColor: this.getColorStyle(this.dataForm.COLOR),
+                fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
+                fontSpacing: this.dataForm.SPEED,
+                fontType: this.getFontStyle(this.dataForm.FONT)
+              })
+              // this.$emit("addInfoMode", this.dataForm);
+              addTemplate(params1, method).then(data => {
+                console.log(data, '新增口')
+                let params2 = {
+                  templateContent: templateContent,
+                  templateId: data
+                }
+                addTemplateContent(params2)
+                  .then(res => {
+                    if (res.code == 200) {
+                      this.$emit('getActiveNames')
+                      this.$message.success('添加成功')
+                    }
+                  })
+                  .catch(err => {
+                    throw err
+                  })
+              })
+            }
+          } else {
+            // // 修改
+            // editTemplate(this.dataForm).then((data) => {});
+            // this.templateContent.forEach((e) => {
+            //   e.img = e.imageName;
+            // });
+            // var params = {
+            //   templateContent: this.templateContent,
+            //   templateId: this.dataForm.id,
+            //   templateDelContent: this.templateDelContent,
+            // };
+            // editTemplateContent(params).then((response) => {
+            //   // console.log(response, "返回结果");
+            // });
+          }
+          this.loading = false
+          this.dialogVisible = false
+          this.isAdd = false
+          this.$emit('refreshDataList', this.dataForm)
+          var textBoard2 = document.getElementsByClassName('textBoard2')
+          textBoard2[0].style.position = 'absolute'
+        }
+      })*/
+
+      this.loading = true
+      // let templateId = "";
+      let method = 'put'
+      if (this.isAdd) {
+        if (this.infoType == 1) {
+          // 不走接口 存到待下发信息里
+          this.dataForm.STAY = Number(this.dataForm.STAY) * 10
+          this.$emit('addInfo', this.dataForm)
+        } else {
+          // 走接口 存到信息模板里
+          const params1 = {
+            applyType: '',
+            category: this.dataForm.category,
+            coordinate: '',
+            height: '',
+            id: '',
+            imageUrl: '',
+            imgSizeFrom: '',
+            inScreenMode: this.dataForm.ACTION,
+            remark: '',
+            screenSize: this.dataForm.screenSize,
+            stopTime: Number(this.dataForm.STAY) * 10,
+            vmsType: '',
+            width: ''
+          }
+          const templateContent = []
+          templateContent.push({
+            content: this.dataForm.CONTENT,
+            coordinate: this.dataForm.COORDINATE,
+            fontColor: this.dataForm.COLOR,
+            fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
+            fontSpacing: this.dataForm.SPEED,
+            fontType: this.getFontStyle(this.dataForm.FONT),
+            formatStyle: this.dataForm.formatStyle
+          })
+          // this.$emit("addInfoMode", this.dataForm);
+          addTemplate(params1, method).then(data => {
+            console.log(data, '新增口')
+            let params2 = {
+              templateContent: templateContent,
+              templateId: data
+            }
+            addTemplateContent(params2)
+              .then(res => {
+                if (res.code == 200) {
+                  this.$emit('getActiveNames')
+                  this.$message.success('添加成功')
+                }
+              })
+              .catch(err => {
+                throw err
+              })
+          })
+        }
+      } else {
+        // // 修改
+        // editTemplate(this.dataForm).then((data) => {});
+        // this.templateContent.forEach((e) => {
+        //   e.img = e.imageName;
+        // });
+        // var params = {
+        //   templateContent: this.templateContent,
+        //   templateId: this.dataForm.id,
+        //   templateDelContent: this.templateDelContent,
+        // };
+        // editTemplateContent(params).then((response) => {
+        //   // console.log(response, "返回结果");
+        // });
+      }
+      this.loading = false
+      this.dialogVisible = false
+      this.isAdd = false
+      this.$emit('refreshDataList', this.dataForm)
+      var textBoard2 = document.getElementsByClassName('textBoard2')
+      textBoard2[0].style.position = 'absolute'
+    },
+    /*********************************************业务代码***********************************************/
+    getFontStyle(font) {
+      if (font == '宋体') {
+        return 'Simsun'
+      } else if (font == '黑体') {
+        return 'SimHei'
+      } else if (font == '楷体') {
+        return 'KaiTi'
+      } else if (font == '仿宋') {
+        return 'FangSong'
+      } else if (font == '隶书') {
+        return 'LiSu'
+      }
+    },
+    getColorStyle(font) {
+      if (font == '黄色' || font == 'yellow') {
+        return '#FFFF00'
+      } else if (font == '红色' || font == 'red') {
+        return '#FF0000'
+      } else if (font == '绿色' || font == 'GreenYellow') {
+        return '#00FF00'
+      } else if (font == '蓝色' || font == 'blue') {
+        return '#0000FF'
+      } else {
+        return '#' + font
+      }
+    },
+    getTextAlign(font) {
+      if (font == '0') {
+        return 'left'
+      } else if (font == '1') {
+        return 'right'
+      } else {
+        return 'center'
+      }
+    },
+    // 文字对齐方式
+    alignment(alignmentNum) {
+      this.alignmentNum = alignmentNum
+      var divContent2 = document.getElementsByClassName('blackBoard2')
+      var textBoard2 = document.getElementsByClassName('textBoard2')
+      // 获取文字长宽
+      // let textWidth = textBoard2[0].offsetWidth;
+      // let textHeight = textBoard2[0].offsetHeight;
+      // // 获取黑盒子长宽
+      // let divWidth = divContent2[0].offsetWidth;
+      // let divHeight = divContent2[0].offsetHeight;
+      // var args =  [...divContent2];
+
+      switch (alignmentNum) {
+        // 左对齐
+        case 0:
+          divContent2[0].style.justifyContent = 'left'
+          divContent2[0].style.alignItems = 'center'
+          // textBoard2[0].style.textAlign = "left";
+          textBoard2[0].style.position = 'static'
+
+          break
+        // 左右居中
+        case 2:
+          divContent2[0].style.justifyContent = 'center'
+          divContent2[0].style.alignItems = 'center'
+          // textBoard2[0].style.textAlign = "center";
+          textBoard2[0].style.position = 'static'
+
+          break
+        // 右对齐
+        case 1:
+          divContent2[0].style.justifyContent = 'right'
+          divContent2[0].style.alignItems = 'center'
+          // textBoard2[0].style.textAlign = "right";
+          textBoard2[0].style.position = 'static'
+
+          break
+        // 上对齐
+        case 4:
+          divContent2[0].style.alignItems = 'flex-start'
+          textBoard2[0].style.position = 'static'
+
+          break
+        // 上下对齐
+        case 5:
+          divContent2[0].style.alignItems = 'center'
+          textBoard2[0].style.position = 'static'
+
+          break
+        // 下对齐
+        case 6:
+          divContent2[0].style.alignItems = 'flex-end'
+          textBoard2[0].style.position = 'static'
+
+          break
+      }
+      if (!alignmentNum) {
+        divContent2[0].style.alignItems = 'center'
+        textBoard2[0].style.position = 'static'
+      }
+      var textLeft = this.addZero(textBoard2[0].offsetLeft)
+      var textTop = this.addZero(textBoard2[0].offsetTop)
+      this.dataForm.COORDINATE = textLeft + textTop
+      if (alignmentNum != undefined) {
+        this.dataForm.formatStyle = alignmentNum
+      }
+      // console.log(this.dataForm.COORDINATE, "this.dataForm.COORDINATE");
+    },
+    addZero(num) {
+      return ('000' + num).slice(-3)
+    },
+    /*增加新的内容*/
+
+    /*删除内容*/
+    // delTemplateContent(data) {
+    //   for (let i = 0; i < this.templateContent.length; i++) {
+    //     if (
+    //       this.templateContent.indexOf(data) ==
+    //       this.templateContent.indexOf(this.templateContent[i])
+    //     ) {
+    //       if (this.templateContent.length == 1) {
+    //         this.$modal.msgError("至少保留一条数据");
+    //       } else {
+    //         if (data.id) {
+    //           this.templateDelContent.push(data);
+    //         }
+    //         this.templateContent.splice(this.templateContent.indexOf(data), 1);
+    //       }
+    //     }
+    //   }
+    // },
+    cliTest(data) {
+      this.ispreviewContent = this.templateContent.indexOf(data)
+    },
+    /********************图片上传*********************/
+    handleRemove(file, fileList) {},
+    handlePreview(file) {},
+    handleExceed(files, fileList) {
+      this.$modal.msgError(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`)
+    },
+
+    handleClose(done) {
+      var textBoard2 = document.getElementsByClassName('textBoard2')
+      textBoard2[0].style.position = 'absolute'
+      this.dialogVisible = false
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.infoBoardButton {
+  ::v-deep .el-radio-button--medium .el-radio-button__inner {
+    height: 3vh;
+    line-height: 3vh;
+    padding: 0 0.6vw;
+    font-size: 0.7vw;
+  }
+}
+.previewContentCSS {
+  border: yellow 1px dashed;
+}
+/* 页脚 */
+.dialog-footer {
+  padding-left: 450px;
+}
+.photoOther img,
+.photo img {
+  max-width: 300px;
+  width: 100%;
+  // height: 80px;
+}
+.infoBoardButton {
+  display: flex;
+  justify-content: left;
+}
+.boardTextStyle {
+  line-height: 1;
+  caret-color: rgba(0, 0, 0, 0);
+  user-select: none;
+  position: absolute;
+  // max-height: 128px;
+  overflow: hidden;
+}
+.blackBoard2 {
+  background: #000000;
+  display: flex;
+  margin: 0 auto;
+  overflow: hidden;
+  position: relative;
+  // justify-content: center;
+  align-items: center;
+}
+::v-deep .el-card__body {
+  padding: 10px 0;
+}
+
+//
+::v-deep .el-dialog__header {
+  background-color: #145977;
+}
+::v-deep .el-dialog__body {
+  padding: 5px 20px;
+  background-color: #145977;
+}
+::v-deep .el-dialog__footer {
+  background-color: #145977;
+}
+::v-deep .el-card {
+  margin-top: 1vh;
+  background-color: #145977;
+  border: 2px solid #1d7890;
+}
+::v-deep .el-form-item__label {
+  color: #3de8ff;
+}
+::v-deep .el-input--mini .el-input__inner {
+  color: #fff;
+  background-color: #096d8c;
+}
+::v-deep .el-input-number.is-controls-right .el-input-number__decrease {
+  color: #fff;
+  background-color: #096d8c;
+}
+::v-deep .el-dialog__title {
+  color: #fff;
+}
+::v-deep .el-textarea__inner {
+  color: #fff;
+  background-color: #096d8c;
+  border-color: #096d8c;
+}
+::v-deep .el-input-number.is-controls-right .el-input-number__decrease {
+  border-color: transparent;
+}
+::v-deep .el-input-number.is-controls-right .el-input-number__increase {
+  border-color: transparent;
+  color: #fff;
+  background-color: #096d8c;
+}
+::v-deep .el-button--medium {
+  padding: 5px 25px;
+  font-size: 14px;
+  border-radius: 20px;
+  border: transparent;
+}
+::v-deep .el-radio-button__inner {
+  color: #ffffff;
+  background-color: pink;
+  border-color: #1d58a9;
+  -webkit-box-shadow: -1px 0 0 0 #1d58a9;
+  box-shadow: -1px 0 0 0 #1d58a9;
+  background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
+  border-radius: 3px 3px 3px 3px;
+  opacity: 1;
+  border: none !important;
+}
+::v-deep .infoBoardButton .el-radio-button--medium .el-radio-button__inner {
+  margin: 0 3px;
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo.vue
index ea25a129..3ae8b18d 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo.vue
@@ -1,155 +1,102 @@
 <template>
-  <div class="container infoBoardDialog">
-    <!-- 添加信息弹窗 -->
-    <el-dialog title="新增" :visible.sync="dialogVisible" width="43%" :before-close="handleClose" :close-on-click-modal="false" append-to-body>
-      <div class="dialogStyleBox">
-        <div class="dialogLine"></div>
-        <div class="dialogCloseButton"></div>
-      </div>
-      <el-card class="box-card">
-        <div v-on:ondragenter="ondragenter" v-on:drop="faceDrop" v-on:dragover="allowDrop" :style="{
-            width: boardWidth + 'px',
-            height: boardHeight + 'px',
-            position: 'relative',
-
-
-            textAlign: getTextAlign(dataForm.formatStyle)
-
-          }" class="blackBoard2">
-          <span :style="{
-              color: getColorStyle(dataForm.COLOR),
-              fontSize: dataForm.FONT_SIZE,
-              fontFamily: dataForm.FONT,
-              zIndex: '1000',
-              position:'relative',
-              /*left: dataForm.COORDINATE
-                ? dataForm.COORDINATE.substring(0, 3) + 'px'
-                : '',
-              top: dataForm.COORDINATE
-                ? dataForm.COORDINATE.substring(3, 6) + 'px'
-                : '',*/
-              maxHeight:boardHeight + 'px',
-            }" class="textBoard2 boardTextStyle" v-html="
-              dataForm.CONTENT
-                ? dataForm.CONTENT.replace(/\n|\r\n/g, '<br>').replace(
-                    / /g,
-                    '&nbsp'
-                  )
-                : ''
-            "></span>
+   <el-dialog :title="mode=='add'?'新增':'编辑'" :visible.sync="dialogVisible" width="43%" append-to-body :close-on-click-modal="false">
+        <div class="dialogStyleBox">
+          <div class="dialogLine"></div>
+          <div class="dialogCloseButton"></div>
         </div>
-      </el-card>
-      <el-card>
-        <el-form :model="dataForm" :rules="dataRule" label-width="90px" ref="dataForm" size="mini">
-          <el-row :gutter="24" style="height: 45px;">
-            <el-col :span="8">
-              <el-form-item prop="category" label="所属类别" :rules="[
-                  {
-                    required: categoryRules ? true : false,
-                    message: '请选择所属类别',
-                    trigger: 'blur',
-                  },
-                ]" v-show="infoType == 2">
-                <el-select v-model="dataForm.category" placeholder="请选择所属类别" clearable size="mini">
-                  <el-option v-for="item in iotTemplateCategoryList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col class="infoBoardButton" :span="16">
-              <el-radio-group v-model="radio1" @input="alignment(radio1)">
-                <el-radio-button :label="0">左对齐</el-radio-button>
-                <el-radio-button :label="2">左右居中</el-radio-button>
-                <el-radio-button :label="1">右对齐</el-radio-button>
-              </el-radio-group>
-              <!-- <el-button type="primary" @click="alignment(1)" size="mini"
-                >左对齐</el-button
-              >
-              <el-button type="primary" @click="alignment(2)" size="mini"
-                >左右居中</el-button
-              >
-              <el-button type="primary" @click="alignment(3)" size="mini"
-                >右对齐</el-button
-              > -->
-            </el-col>
-          </el-row>
-
-          <!-- 选择图片弹出框结束 -->
-          <el-row :gutter="24" style="display: flex;
-    flex-wrap: wrap;width:100%">
-            <el-col :span="24">
-              <el-form-item label="详细内容" prop="CONTENT">
-                <el-input type="textarea" clearable id="textContent" placeholder="详细内容" v-model="dataForm.CONTENT" @keyup.native="keyDown($event)"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item prop="COLOR" label="字体颜色">
-                <el-select v-model="dataForm.COLOR" filterable placeholder="请选择">
-                  <el-option v-for="item in colorOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item prop="FONT_SIZE" label="字体大小">
-                <el-select v-model="dataForm.FONT_SIZE" style="width: 100%" @change="changeFontSize">
-                  <el-option v-for="item in fontSizeOpt" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item prop="FONT" label="字体类型">
-                <el-select v-model="dataForm.FONT" filterable placeholder="请选择">
-                  <el-option v-for="item in fontTypeOptions" :key="item.dictLabel" :label="item.dictLabel" :value="item.dictLabel">
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
+        <el-card class="box-card">
+          <BoardPreview></BoardPreview>
+        </el-card>
+        <el-card>
+          <el-form :model="dataForm" :rules="dataRule" label-width="90px" ref="dataForm" size="mini">
+            <el-row :gutter="24">
+              <el-col :span="8">
+                <el-form-item label="所属类别" v-if="type == 'template'">
+                  <el-select v-model="dataForm.category" placeholder="请选择所属类别" size="mini">
+                    <el-option v-for="item in templateCategoryList" :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="dataForm.textAlign">
+                  <el-radio-button label="left">左对齐</el-radio-button>
+                  <el-radio-button label="center">中间对齐</el-radio-button>
+                  <el-radio-button label="right">右对齐</el-radio-button>
+                </el-radio-group>
+              </el-col>
+            </el-row>
 
-            <el-col :span="8">
-              <el-form-item prop="STAY" label="停留时间(秒)">
-                <el-input-number :min="0" controls-position="right" v-model="dataForm.STAY" style="width: 100%" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item prop="ACTION" label="入屏方式">
-                <el-select v-model="dataForm.ACTION" filterable placeholder="请选择">
-                  <el-option v-for="item in inScreenModeOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item prop="screenSize" label="屏幕尺寸">
-                <el-select v-model="dataForm.screenSize" filterable placeholder="请选择" v-if="!devicePixelBoolean">
-                  <el-option v-for="item in screenSizeOptions" :key="item.device_pixel" :label="item.device_pixel" :value="item.device_pixel" @click.native="changeScreenSize(item.device_pixel)">
-                  </el-option>
-                </el-select>
-                <el-input disabled v-model="dataForm.screenSize" v-if="devicePixelBoolean"></el-input>
-              </el-form-item>
-            </el-col>
+            <el-row :gutter="24" style="display: flex; flex-wrap: wrap;width:100%">
+              <el-col :span="24">
+                <el-form-item label="详细内容" prop="content">
+                  <el-input type="textarea"  placeholder="详细内容" v-model="dataForm.content"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="字体颜色">
+                  <el-select v-model="dataForm.color" filterable placeholder="请选择">
+                    <el-option v-for="item in colorList" :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 label="字体大小">
+                  <el-select v-model="dataForm.fontSize" style="width: 100%">
+                    <el-option v-for="item in fontSizeList" :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 label="字体类型">
+                  <el-select v-model="dataForm.fontFamily" placeholder="请选择">
+                    <el-option v-for="item in fontTypeList" :key="item.dictLabel" :label="item.dictLabel" :value="item.dictValue">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
 
-          </el-row>
-        </el-form>
-      </el-card>
+              <el-col :span="8">
+                <el-form-item label="停留时间(秒)">
+                  <el-input-number :min="0" v-model="dataForm.stay" style="width: 100%" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="入屏方式">
+                  <el-select v-model="dataForm.inScreenMode" placeholder="请选择">
+                    <el-option v-for="item in inScreenModeList" :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 label="屏幕尺寸">
+                  <el-select v-model="screenSize" placeholder="请选择" disabled>
+                    <el-option v-for="item in screenSizeOptions" :key="item.device_pixel" :label="item.device_pixel" :value="item.device_pixel">
+                    </el-option>
+                  </el-select>
+                </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>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dataFormSubmitHandle" v-loading="loading" style="background-color: #10aac2;color:#fff;">确认</el-button>
+          <el-button class="closeButton" style="background-color:#b5b5b6;color:#fff" @click="onClose">取消</el-button>
+        </div>
+      </el-dialog>
 </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'
+import BoardPreview from "./BoardPreview.vue"
 export default {
   data() {
     return {
-      radio1: '2',
       alignmentNum: 2,
       content: '',
       boardWidth: '',
@@ -171,7 +118,6 @@ export default {
       ],
       listquery: [], //拖拽图片
       curDragImgItem: '',
-      visible: false,
       startTxt_x: '000',
       startTxt_y: '000',
       width: '400',
@@ -185,77 +131,31 @@ export default {
       url: '',
       previewContent: '', //预览内容
       ispreviewContent: -1,
-      dataForm: {},
+      dataForm: {
+        category:"",
+        textAlign:"center",
+        content:"",
+        color:"",
+        fontSize:"",
+        fontFamily:"",
+        stay:5,
+        inScreenMode:"",
+        screenSize:""
+      },
       templateContent: [],
       templateDelContent: [],
       dataRule: {
-        screenSize: [
-          {
-            required: true,
-            message: '请选择分辨率',
-            trigger: 'blur'
-          }
-        ],
-        CONTENT: [
+        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: [],
+      fontTypeList: [],
       screenSizeOptions: [],
-      colorOptions: [],
+      colorList: [],
       isCurrencyOptions: [
         {
           code: '0',
@@ -266,7 +166,7 @@ export default {
           content: '仅为智能推荐模板'
         }
       ],
-      inScreenModeOptions: [],
+      inScreenModeList: [],
       imgSize: [
         {
           type: '1024*128',
@@ -277,57 +177,41 @@ export default {
           name: '正常'
         }
       ],
-      fontSizeOpt: [],
+      fontSizeList: [],
       title: '选择图片',
       loading: false,
       isAdd: false,
-      iotTemplateCategoryList: [],
+      templateCategoryList: [],
       infoType: '',
       devicePixelBoolean: false,
       categoryRules: false
     }
   },
-  //   directives: {
-  //     drag: function (el, binding, vnode) {
-  //       let that = vnode.context;
-  //       let dragBox = el;
-  //       dragBox.onmousedown = (e) => {
-  //         // that.startTxt_x = dragBox.style.left.substring (0, dragBox.style.left.length - 2)
-  //         // that.startTxt_y = dragBox.style.left.substring (0, dragBox.style.top.length - 2)
-  //         let disX = e.clientX - dragBox.offsetLeft;
-  //         let disY = e.clientY - dragBox.offsetTop;
-  //         let clientHeight = dragBox.clientHeight;
-  //         let clientWidth = dragBox.clientWidth;
-  //         document.onmousemove = function (e) {
-  //           //鼠标移动触发事件，元素移到对应为位置
-  //           let left = e.pageX - disX;
-  //           let top = e.pageY - disY;
-  //           //限制区域
-  //           if (left <= 0) {
-  //             left = 0;
-  //           } else if (that.width - left - clientWidth <= 0) {
-  //             left = that.width - clientWidth;
-  //           }
-  //           if (top <= 0) {
-  //             top = 0;
-  //           } else if (that.height - top - clientHeight <= 0) {
-  //             top = that.height - clientHeight;
-  //           }
-  //           dragBox.style.left = left + "px";
-  //           dragBox.style.top = top + "px";
-  //           let a = (Array(3).join("0") + parseInt(left)).slice(-3);
-  //           let b = (Array(3).join("0") + parseInt(top)).slice(-3);
-  //           that.templateContent[dragBox.id].coordinate = a + b;
-  //         };
-  //         document.onmouseup = function () {
-  //           //鼠标抬起，清除绑定的事件，元素放置在对应的位置
-  //           document.onmousemove = null;
-  //           document.onmousedown = null;
-  //         };
-  //         e.preventDefault(); //阻止浏览器的默认事件
-  //       };
-  //     },
-  //   },
+  props:{
+    mode:{
+      type:String,
+      default:""
+    },
+    type: {
+      type: String,
+      default: ""
+    },
+    visible:{
+      type:Boolean,
+      default:false
+    },
+    screenSize:{
+      type:String,
+      default:""
+    },
+    tpl:{
+      type:Object,
+      default:()=>{}
+    }
+  },
+  components:{
+    BoardPreview
+  },
   computed: {
     divStyle: function () {
       return {
@@ -337,220 +221,82 @@ export default {
     }
   },
   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);
-    //       }
-    //     },
-    //   },
+    visible:{
+      handler(newV){
+        this.dialogVisible = newV;
+      },
+      immediate:true
+    },
+    dialogVisible(newV){
+      this.$emit("update:visible", newV);
+    },
+    "tpl.id":{
+      handler(newV){
+        // { "id": 3, "category": "0", "content": "保持车距，控制车速", "screenSize": "768*64", "fontColor": "FFFF00", "fontSize": "64", "fontType": "2", "fontSpacing": "0", "rollingSpeed": null, "stopTime": "50", "inScreenMode": "1", "formatStyle": "2", "remark": null, "createTime": "2024-01-06 10:40:19", "updateTime": "2024-01-06 11:04:53" }
+        if(this.mode == "edit"){
+          this.____convertData();
+        }
+      }
+    }
   },
   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.fontTypeList = res.data
+      this.dataForm.fontFamily = res.data[0].dictValue;
+      // console.log(this.fontTypeList, "字体类型");
     })
     this.getDicts('iot_devices_font_color').then(res => {
-      this.colorOptions = res.data
-      // console.log(this.colorOptions, "字体颜色");
+      this.colorList = res.data;
+      this.dataForm.color = res.data[0].dictValue;
+      // console.log(this.colorList, "字体颜色");
     })
     this.getDicts('iot_device_font_inScreen_mode').then(res => {
-      this.inScreenModeOptions = res.data
-      // console.log(this.inScreenModeOptions, "入屏方式");
+      this.inScreenModeList = res.data
+      this.dataForm.inScreenMode = res.data[0].dictValue;
+      // console.log(this.inScreenModeList, "入屏方式");
+    })
+    this.getDicts('iot_template_category').then(res => {
+      this.templateCategoryList = res.data;
+      this.dataForm.category = res.data[0].dictValue;
+    })
+    this.getDicts('iot_device_font_size').then(res => {
+      this.fontSizeList = res.data;
+      this.dataForm.fontSize = res.data[0].dictValue;
+      // this.dataForm.FONT_SIZE = res.data[1].dictValue
     })
     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：情报板管理跳转
+    ____convertData(){
 
-      this.infoType = type
-      if (mode == 1 || type == 1) {
-        this.categoryRules = false
-      } else {
-        this.categoryRules = true
-      }
-      // this.title = "新增";
-      this.isAdd = !this.dataForm.id
-      this.dialogVisible = true
-      this.templateDelContent = []
-      this.$nextTick(() => {
-        if (this.isAdd) {
-          this.$refs['dataForm'] && this.$refs['dataForm'].resetFields()
-          this.dataForm.id = ''
-          this.dataForm = {}
-          this.width = '400'
-          this.height = '40'
-          this.dataForm = {
-            CONTENT: '请输入内容',
-            COLOR: 'FFFF00',
-            FONT: '黑体',
-            SPEED: '1',
-            ACTION: '1',
-            // COORDINATE: "",
-            STATE: 'true',
-            STAY: '5',
-            screenSize: devicePixel,
-            formatStyle: '2'
-          }
-          this.content = '请输入内容'
-        } else {
-          // this.getInfo();
-          // this.$refs["dataForm"] && this.$refs["dataForm"].clearValidate();
-        }
-      })
-      if (this.dataForm.screenSize) {
-        this.getFontSizeList(1)
-      }
-      this.$forceUpdate()
+    },
+    onClose(){
+        this.dialogVisible = false;
     },
     getFontSizeList(type) {
-      this.getDicts('iot_device_font_size').then(res => {
-        this.fontSizeOpt = res.data
-        this.dataForm.FONT_SIZE = res.data[1].dictValue
-        if (type) {
-          this.alignment(2)
-        }
-      })
+      
 
       //TODO 测试数据 后期需转接口
       /*getFontSizeByDevicePixel(this.dataForm.screenSize).then((res) => {
         console.log(res, "根据分辨率筛字体大小");
-        this.fontSizeOpt = res.data.fontSizeList;
+        this.fontSizeList = res.data.fontSizeList;
         this.dataForm.FONT_SIZE = res.data.defaultFont;
         if(type){
           this.alignment(2)
         }
       });*/
     },
-    // 查分辨率
-    getdevicessize() {
-      //TODO 测试数据 需删除走接口
-      this.screenSizeOptions = [
-        {
-          device_pixel: '192*160'
-        },
-        {
-          device_pixel: '480*48'
-        },
-        {
-          device_pixel: '768*64'
-        },
-        {
-          device_pixel: '160*80'
-        }
-      ]
-
-      // TODO 查分辨率接口
-      /*devicessize().then((res) => {
-        console.log(res, "查分辨率");
-        this.screenSizeOptions = res.data;
-      });*/
-    },
-    changeScreenSize(size) {
-      this.boardWidth = size.split('*')[0]
-      this.boardHeight = size.split('*')[1]
-      this.getFontSizeList()
-      this.$forceUpdate()
-    },
-    changeFontSize() {
-      console.log(this.dataForm.FONT_SIZE)
-      this.alignment(this.alignmentNum)
-      this.$forceUpdate()
-    },
-    keyDown(ev) {
-      this.alignment(this.alignmentNum)
-    },
-
-    //选择图片弹框关闭事件
-    close() {
-      this.checkList = []
-      this.dialogVisible = false
-    },
-    faceDrop(e) {
-      e.preventDefault() //阻止默认行为
-      this.listquery.push(this.curDragImgItem)
-    },
-    // 全选
-    allowDrop(e) {
-      e.preventDefault() //阻止默认行为
-    },
-    ondragenter(e) {
-      e.preventDefault() //阻止默认行为
-    },
-    // 获取信息
-    // getInfo() {
-    //   getTemplateInfo(this.dataForm.id).then((data) => {
-    //     this.dataForm = data.data;
-    //     this.width = this.dataForm.screenSize.split("*")[0];
-    //     this.height = this.dataForm.screenSize.split("*")[1];
-    //   });
-    //   getTemplateContent(this.dataForm.id).then((data) => {
-    //     this.templateContent = data.rows;
-
-    //     if (this.templateContent.length == 0) {
-    //       this.templateContent.push({
-    //         content: "",
-    //         fontColor: "yellow",
-    //         fontSize: "24",
-    //         fontType: "KaiTi",
-    //         fontSpacing: 0,
-    //         coordinate: "000000",
-    //         img: "",
-    //       });
-    //     }
-    //   });
-    // },
     // 表单提交
     async dataFormSubmitHandle() {
-      this.alignment()
-      // let valid = await this.$refs.dataForm.validate().catch(() => {
-      //   return this.$modal.msgError("校验错误");
-      // });
-      // if (!valid) return;
-      if (!this.dataForm.CONTENT.trim()) {
+      if (!this.dataForm.content.trim()) {
         return this.$modal.msgError('当前输入内容为空')
-      } else if (!this.dataForm.category && this.infoType == 2) {
-        return this.$modal.msgError('情报板所属类别不能为空')
       }
-      if (this.dataForm.CONTENT.indexOf('\\')>0) {
-        return this.$modal.msgError("内容不能含有特殊字符'\\'")
+      if (this.dataForm.content.indexOf('\\')>=0) {
+        return this.$modal.msgError("内容不能含有特殊字符'\\\\'")
       }
+      this.$emit("submit");
       //走接口检验内容是否包含敏感字段
       /*checkIotBoardContent(this.dataForm.CONTENT).then(response => {
         if (response.data == 0) {
@@ -711,152 +457,6 @@ export default {
       var textBoard2 = document.getElementsByClassName('textBoard2')
       textBoard2[0].style.position = 'absolute'
     },
-    /*********************************************业务代码***********************************************/
-    getFontStyle(font) {
-      if (font == '宋体') {
-        return 'Simsun'
-      } else if (font == '黑体') {
-        return 'SimHei'
-      } else if (font == '楷体') {
-        return 'KaiTi'
-      } else if (font == '仿宋') {
-        return 'FangSong'
-      } else if (font == '隶书') {
-        return 'LiSu'
-      }
-    },
-    getColorStyle(font) {
-      if (font == '黄色' || font == 'yellow') {
-        return '#FFFF00'
-      } else if (font == '红色' || font == 'red') {
-        return '#FF0000'
-      } else if (font == '绿色' || font == 'GreenYellow') {
-        return '#00FF00'
-      } else if (font == '蓝色' || font == 'blue') {
-        return '#0000FF'
-      } else {
-        return '#' + font
-      }
-    },
-    getTextAlign(font) {
-      if (font == '0') {
-        return 'left'
-      } else if (font == '1') {
-        return 'right'
-      } else {
-        return 'center'
-      }
-    },
-    // 文字对齐方式
-    alignment(alignmentNum) {
-      this.alignmentNum = alignmentNum
-      var divContent2 = document.getElementsByClassName('blackBoard2')
-      var textBoard2 = document.getElementsByClassName('textBoard2')
-      // 获取文字长宽
-      // let textWidth = textBoard2[0].offsetWidth;
-      // let textHeight = textBoard2[0].offsetHeight;
-      // // 获取黑盒子长宽
-      // let divWidth = divContent2[0].offsetWidth;
-      // let divHeight = divContent2[0].offsetHeight;
-      // var args =  [...divContent2];
-
-      switch (alignmentNum) {
-        // 左对齐
-        case 0:
-          divContent2[0].style.justifyContent = 'left'
-          divContent2[0].style.alignItems = 'center'
-          // textBoard2[0].style.textAlign = "left";
-          textBoard2[0].style.position = 'static'
-
-          break
-        // 左右居中
-        case 2:
-          divContent2[0].style.justifyContent = 'center'
-          divContent2[0].style.alignItems = 'center'
-          // textBoard2[0].style.textAlign = "center";
-          textBoard2[0].style.position = 'static'
-
-          break
-        // 右对齐
-        case 1:
-          divContent2[0].style.justifyContent = 'right'
-          divContent2[0].style.alignItems = 'center'
-          // textBoard2[0].style.textAlign = "right";
-          textBoard2[0].style.position = 'static'
-
-          break
-        // 上对齐
-        case 4:
-          divContent2[0].style.alignItems = 'flex-start'
-          textBoard2[0].style.position = 'static'
-
-          break
-        // 上下对齐
-        case 5:
-          divContent2[0].style.alignItems = 'center'
-          textBoard2[0].style.position = 'static'
-
-          break
-        // 下对齐
-        case 6:
-          divContent2[0].style.alignItems = 'flex-end'
-          textBoard2[0].style.position = 'static'
-
-          break
-      }
-      if (!alignmentNum) {
-        divContent2[0].style.alignItems = 'center'
-        textBoard2[0].style.position = 'static'
-      }
-      var textLeft = this.addZero(textBoard2[0].offsetLeft)
-      var textTop = this.addZero(textBoard2[0].offsetTop)
-      this.dataForm.COORDINATE = textLeft + textTop
-      if (alignmentNum != undefined) {
-        this.dataForm.formatStyle = alignmentNum
-      }
-      // console.log(this.dataForm.COORDINATE, "this.dataForm.COORDINATE");
-    },
-    addZero(num) {
-      return ('000' + num).slice(-3)
-    },
-    /*增加新的内容*/
-
-    /*删除内容*/
-    // delTemplateContent(data) {
-    //   for (let i = 0; i < this.templateContent.length; i++) {
-    //     if (
-    //       this.templateContent.indexOf(data) ==
-    //       this.templateContent.indexOf(this.templateContent[i])
-    //     ) {
-    //       if (this.templateContent.length == 1) {
-    //         this.$modal.msgError("至少保留一条数据");
-    //       } else {
-    //         if (data.id) {
-    //           this.templateDelContent.push(data);
-    //         }
-    //         this.templateContent.splice(this.templateContent.indexOf(data), 1);
-    //       }
-    //     }
-    //   }
-    // },
-    cliTest(data) {
-      this.ispreviewContent = this.templateContent.indexOf(data)
-    },
-    /********************图片上传*********************/
-    handleRemove(file, fileList) {},
-    handlePreview(file) {},
-    handleExceed(files, fileList) {
-      this.$modal.msgError(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
-    },
-    beforeRemove(file, fileList) {
-      return this.$confirm(`确定移除 ${file.name}？`)
-    },
-
-    handleClose(done) {
-      var textBoard2 = document.getElementsByClassName('textBoard2')
-      textBoard2[0].style.position = 'absolute'
-      this.dialogVisible = false
-    }
   }
 }
 </script>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
index 2e3a6bd5..88b2a918 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
@@ -17,28 +17,29 @@
             </div>
             <el-form ref="form" style="padding:0 0.5vw;" :model="form">
               <el-form-item style="margin-bottom: 12px;">
-                <el-select v-model="form.eqDirection" size="medium" placeholder="请选择方向" style="overflow: hidden;width: 100%;">
-                  <el-option v-for="item in boardDirectionList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" @click.native="changeDirection(item.dictValue)" />
+                <el-select v-model="form.selectedDirection" size="medium" placeholder="请选择方向" style="overflow: hidden;width: 100%;">
+                  <el-option v-for="item in boardDirectionList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" @click.native="____changeDirection(item.dictValue)" />
                 </el-select>
               </el-form-item>
               <el-form-item>
-                <el-collapse v-model="iotBoardActive" accordion @change="handleChange">
-                  <el-collapse-item v-for="(item, index) in iotBoardList" :key="index" :title="item.label" :name="item.devicePixel">
-                    <div>
+                <!-- {{ boardSizeDic }} -->
+                <el-collapse v-model="selectedSize" accordion @change="____onChangeSize">
+                  <el-collapse-item v-for="(item, key) in boardSizeDic" :key="key" :title="item.label" :name="key">
+                    <div v-if="item.list.length>0">
                       <!-- <el-checkbox style="width: 100%" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
-                      </el-checkbox>-->
-                      <div style="margin: 5px 0"></div>
+                      </el-checkbox> -->
                       <el-checkbox-group class="checkbox" v-model="checkedCities" @change="handleCheckedCitiesChange" :max="1">
-                        <el-checkbox v-for="(itm, index) in item.list" :label="itm.deviceId" :key="index">
+                        <el-checkbox v-for="(itm, index) in item.list" :label="itm.id" :key="index">
                           <el-tooltip :content="itm.ip" placement="top">
                             <div>{{ itm.deviceName }}</div>
                           </el-tooltip>
                           <el-tooltip content="回读当前信息" placement="top">
-                            <el-button class="el-icon-tickets huiduButton" @click.stop.prevent="onSubmit(itm.deviceId)" :disabled="submitButton"></el-button>
+                            <el-button class="el-icon-tickets huiduButton" @click.stop.prevent="onSubmit(itm.id)" :disabled="submitButton"></el-button>
                           </el-tooltip>
                         </el-checkbox>
                       </el-checkbox-group>
                     </div>
+                    <div v-else style="color: #fff; text-align: center; line-height: 60px;">暂无数据</div>
                   </el-collapse-item>
                 </el-collapse>
               </el-form-item>
@@ -54,23 +55,19 @@
               <div>
                 <div style="display: flex;justify-content: start !important;align-items: center;">
                   <img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt="">
-                  <div>情报板列表</div>
-                  <span v-if="form.devicePixel">【 {{ form.devicePixel }}】</span>
+                  <div>{{ selectedDevice.deviceName }}</div>
+                  <span v-if="selectedSize">【 {{ selectedSize }}】</span>
                 </div>
                 <img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt="">
               </div>
 
               <div class="controlBox">
-                <el-button type="primary" @click.native="openDialogVisible(1, 2)" :disabled="form.devicePixel ? false : disabledButton">添加信息</el-button>
-                <el-button type="primary" @click="publishInfo" :disabled="
-                !form.devicePixel ||
-                contentList.length == 0 ||
-                checkedCities.length == 0
-              ">发布信息</el-button>
+                <el-button type="primary" @click.native="openDialogVisible(1, 2)">添加信息</el-button>
+                <el-button type="primary" @click="publishInfo" :disabled="contentList.length == 0">发布信息</el-button>
               </div>
             </div>
             <div class="contentBox">
-              <el-table :data="contentList" row-key="ID" v-loading="loading" style="height: 100%;padding: 0 1vh;background-color: #112d3b;overflow-y: scroll;" :key="toggleIndex">
+              <el-table :data="contentList" row-key="ID" v-loading="loading" style="height: 100%;padding: 0 1vh; background-color: #112d3b;overflow-y: scroll;" :key="toggleIndex">
                 <el-table-column width="545">
                   <template slot-scope="scope">
                     <div class="con">
@@ -78,8 +75,8 @@
                       color: getColorStyle(scope.row.COLOR) ,
                       fontSize: getFontSize(scope.row.FONT_SIZE),
                       fontFamily: scope.row.FONT,
-                      width: getScreenSize(form.devicePixel, 'width') + 'px',
-                      height: getScreenSize(form.devicePixel, 'height') + 'px',
+                      width: getScreenSize(form.selectedPixel, 'width') + 'px',
+                      height: getScreenSize(form.selectedPixel, 'height') + 'px',
                       'lineHeight':'1',
                       'display': 'flex',
                       'align-items': 'center',
@@ -95,8 +92,8 @@
                           'top'
                         ),*/
                         position:'relative',
-                        maxHeight:getScreenSize(form.devicePixel, 'height') + 'px',
-                      }" class="boardTextStyle" v-html="
+                        maxHeight:getScreenSize(form.selectedPixel, 'height') + 'px',
+                      }" class="infoTxt" v-html="
                         scope.row.CONTENT? scope.row.CONTENT.replace(/\n|\r\n/g,'<br>').replace(/ /g, '&nbsp'): ''"></span>
                       </div>
                     </div>
@@ -104,7 +101,7 @@
                 </el-table-column>
                 <el-table-column width="130">
                   <template slot-scope="scope">
-                    <div class="menuBox">
+                    <div class="infoBtnBox">
                       <!-- <el-tooltip content="加入信息模板" placement="top">
                     <div @click="arrowRight(scope.row)"></div>
                   </el-tooltip> -->
@@ -123,6 +120,7 @@
           </div>
         </div>
       </div>
+      <!-- 信息模板 -->
       <div style=" width: 42.2%" class="verticalBox verticalBoxBorderLeft">
         <div style="width:100%;height:100%;padding:1vh 0.2vw;">
           <div style="width:100%;height:100%;background-color:#112d3b">
@@ -131,76 +129,42 @@
               <div>
                 <div style="display: flex;justify-content: start !important;align-items: center;">
                   <img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt="">
-                  <div>情报板列表</div>
-                  <span v-if="form.devicePixel">【 {{ form.devicePixel }}】</span>
+                  <div>信息模板<span v-if="selectedSize">[{{ selectedSize }}]</span></div>
                 </div>
                 <img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt="">
                 <!-- <span>信息模板</span>
-            <span v-if="form.devicePixel">【 {{ form.devicePixel }}】</span> -->
+            <span v-if="form.selectedPixel">【 {{ form.selectedPixel }}】</span> -->
               </div>
               <div class="controlBox">
-                <el-button type="primary" @click="openDialogVisible(2, 2)">添加模板</el-button>
+                <el-button type="primary" @click="____onAddTemplate">添加模板</el-button>
               </div>
             </div>
             <div class="templateBox">
-              <el-collapse v-model="activeNames">
-                <el-collapse-item v-for="(item, index) in tempCategory" :key="index" :title="item.dictLabel" :name="item.dictValue">
-                  <div v-for="(itm, indx) in item.list" :key="indx" class="con" :style="{
-                  fontSize: getFontSize(
-                    itm.tcontents[0].fontSize,
-                    itm.screenSize
-                  ),
-                  color: getColorStyle(itm.tcontents[0].fontColor),
-                  fontFamily: itm.tcontents[0].fontType,
-                }">
-                    <div class="templateTitle">
-                      <div :style="{
-                      width: getScreenSize(itm.screenSize, 'width') + 'px',
-                      height: getScreenSize(itm.screenSize, 'height') + 'px',
-                      'display': 'flex',
-                      'align-items': 'center',
-                      'justify-content': getTextAlign(itm.tcontents[0].formatStyle),
-                      position: 'relative',
-
-                    }" style="background: black; position: relative;overflow: hidden;">
-                        <span :style="{
-                        /*left: getCoordinate(
-                          itm.tcontents[0].coordinate.substring(0, 3),
-                          'left',
-                          itm.screenSize
-                        ),
-                        top: getCoordinate(
-                          itm.tcontents[0].coordinate.substring(3, 6),
-                          'top',
-                          itm.screenSize
-                        ),*/
-                        position:'relative',
-                        maxHeight:getScreenSize(itm.screenSize, 'height') + 'px',
-                      }" class="boardTextStyle" v-html="
-                        itm.tcontents[0].content
-                          .replace(/\n|\r\n/g, '<br>')
-                          .replace(/ /g, '&nbsp')
-                      "></span>
+              <div v-for="(item,index) in templateAvailable" :key="item.dictValue">
+                <!-- 原来是<el-collapse v-model="activeNames"> -->
+                <h3>{{ item.dictLabel }}</h3>
+                  <div v-for="(itm, indx) in item.list" :key="indx" class="infoItem">
+                    <!-- 模板内容 -->
+                    <BoardPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardPreview>
+                    <!-- <div class="infoPreview">
+                      <div class="infoBox" :style="____boardBgStyle">
+                        <span class="infoTxt" :style="____boardTxtStyle(itm)" v-html="itm.content.replace(/\n|\r\n/g, '<br>').replace(/ /g, '&nbsp')"></span>
                       </div>
-                    </div>
-                    <div class="menuBox">
+                    </div> -->
+                    <!-- 操作按钮 -->
+                    <div class="infoBtnBox">
                       <el-tooltip content="加入待下发信息" placement="top">
-                        <div @click="arrowLeft(itm)" :class="
-                        disabledButton && !form.devicePixel
-                          ? 'disabledClass'
-                          : ''
-                      " style="cursor: pointer" class="toLeft"></div>
+                        <p @click="arrowLeft(itm)" :class="disabledButton && !selectedSize ? 'disabledClass' : '' " class="btn btnApply"></p>
                       </el-tooltip>
                       <el-tooltip content="编辑" placement="top">
-                        <div @click="editOutline(itm, indx, 2)" class="edit"></div>
+                        <p @click="____onEditTemplate(itm)" class="btn btnEdit"></p>
                       </el-tooltip>
                       <el-tooltip content="删除" placement="top">
-                        <div @click="handleDelete(itm)" class="del"></div>
+                        <p @click="handleDelete(itm)" class="btn btnDelete"></p>
                       </el-tooltip>
                     </div>
                   </div>
-                </el-collapse-item>
-              </el-collapse>
+              </div>
             </div>
           </div>
         </div>
@@ -210,7 +174,7 @@
       <el-row>
         <el-col :span="18">
           <el-select v-model="toRightCategory" placeholder="请选择所属类别">
-            <el-option v-for="item in tempCategory" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
+            <el-option v-for="item in tplCategory" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
             </el-option>
           </el-select>
         </el-col>
@@ -221,8 +185,8 @@
         </el-col>
       </el-row>
     </el-dialog>
-    <addinfo ref="addinfo" @addInfo="addInfo" @getActiveNames="getActiveNames"></addinfo>
-    <editInfo :boardEmitItem="this.boardEmitItem" @receiveForm="receiveForm" v-if="this.showEmit" @dialogClose="dialogClose"></editInfo>
+    <addinfo @submit="____onEditSubmit" :mode="editDialog.mode" :type="editDialog.type" :visible.sync="editDialog.visible" :screenSize="selectedSize" :tpl="editDialog.tpl"></addinfo>
+    <!-- <editInfo :boardEmitItem="this.boardEmitItem" @receiveForm="receiveForm" v-if="this.showEmit" @dialogClose="dialogClose"></editInfo> -->
   </div>
 </template>
 <script>
@@ -231,10 +195,11 @@ import addinfo from './addinfo'
 import editInfo from './editInfo'
 import boardData from './boardData'
 import { getUserDeptId } from '@/api/system/user'
-import { listTunnels, devicessize, information, getBoardInfo, getBoardEditInfo, getIotBoardList, getBoardContentData, deviceControl } from '@/api/information/api.js'
+import { listTunnels, devicessize, information, getBoardInfo, getBoardEditInfo, getboardSizeDic, getBoardContentData, deviceControl } from '@/api/information/api.js'
 import { uploadBoardEditInfo, getAllVmsTemplate, addTemplate, addTemplateContent, getBoardContent, deleteTemplate, splicingBoard } from '@/api/board/template'
 import { invokedFunction, getDeviceRealtimeProperty } from '@/api/device/device'
-import { getBoardList } from '@/api/board/board'
+import { getBoardList , getTemplateList } from '@/api/board/board'
+import BoardPreview from './BoardPreview'
 
 // 对象深拷贝
 export const deepClone = data => {
@@ -265,7 +230,8 @@ export default {
   name: 'Device',
   components: {
     addinfo,
-    editInfo
+    editInfo,
+    BoardPreview
   },
   dicts: ['iot_board_direction'],
 
@@ -276,13 +242,14 @@ export default {
       arrowRightVisible: false, //向右类别弹窗
       loading: false,
       submitButton: false, //回读禁用
-      iotBoardActive: '', //情报板设备 绑定
-      iotBoardList: [], //情报板设备列表
+      selectedSize: '', //情报板设备 绑定
+      selectedDevice:{},
+      boardSizeDic: {}, //情报板设备字典
       boardDirectionList: [], //方向
       userQueryParams: {
         userName: this.$store.state.user.name
       }, //用户
-      devicePixelMode: null, //分辨率
+      selectedPixelMode: null, //分辨率
       editType: 0,
       disabledButton: true, //禁用按钮
       showEmit: false, //修改组件
@@ -296,19 +263,28 @@ export default {
       devicessizeList: [], //分辨率下拉框
       deviceList: [], //分辨率
       checkedCities: [], //多选 选中项
+      templateAvailable:[],
       form: {
+        selectedDirection:"",
         company: null,
         mechanism: null,
         localInfo: null,
-        devicePixel: null
+        selectedPixel: null
       }, //情报板列表表单
       supplier: null, //报文类型
       activeNames: [], //模板 展开项
-      tempCategory: [], //模板
+      tplCategory: [], //模板
       checkAll: false,
       isIndeterminate: false,
       contentList: [], //待下发数据
-      toRightItem: {} //向右添加到模板的数据
+      toRightItem: {}, //向右添加到模板的数据
+      selectedBdMsg:[],
+      editDialog:{
+        mode:"",
+        type:"",
+        visible:false,
+        tpl:{}
+      }
     }
   },
   watch: {
@@ -317,50 +293,80 @@ export default {
         this.rowDrop()
       })
     },
-    iotBoardList: function (newVal, oldVal) {
-      console.log(newVal, 'iotBoardActive')
-      if (newVal.length == 0) {
-        this.form.devicePixel = ''
-        // this.allVmsTemplate('no')
-      }
-    }
+    // boardSizeDic: function (newVal, oldVal) {
+    //   console.log(newVal, 'selectedSize')
+    //   if (newVal.length == 0) {
+    //     this.form.selectedPixel = ''
+    //     // this.allVmsTemplate('no')
+    //   }
+    // }
     // // 改变方向
-    // 'form.eqDirection':function(newVal,oldVal){
+    // 'form.selectedDirection':function(newVal,oldVal){
     //   console.log(newVal,"newVal")
-    //   this.iotBoardList = []
+    //   this.boardSizeDic = []
     // }
   },
   created() {
-    this.getTemplateCategory()
-    this.changeDirection()
-    this.getBoardPixel()
+    Promise.all([this.____initDirection(), this.____getBoardPixel(), this.____getTemplateCategory(), this.____getAllTemplate()]).then((res)=>{
+      this.____getIotBoard();
+    })
   },
   mounted() {
     // this.rowDrop();
     this.hideScrollFn()
   },
-
+computed:{
+  ____boardScale(){
+      let arr = this.selectedSize.split("*");
+      let boxW = 540;
+      let boxH = 80;
+      let scale = 1;
+      if (arr[0] / arr[1] > boxW / boxH) {
+        scale = boxW / arr[0];
+      } else {
+        scale = boxH / arr[1];
+      }
+      return scale;
+  },
+  ____boardBgStyle(){
+    let arr = this.selectedSize.split("*");
+    return {
+      width: `${arr[0] * this.____boardScale}px`,
+      height: `${arr[1] * this.____boardScale}px`
+    }
+  },
+},
   methods: {
+    ____boardTxtStyle(){
+      return {
+        color : "#F00"
+      }
+    },
     // 获取尺寸系列
-    getBoardPixel() {
-      this.iotBoardList = []
-      this.getDicts('iot_board_pixel').then(res => {
+    ____getBoardPixel() {
+      this.boardSizeDic = {}
+      return this.getDicts('iot_board_pixel').then(res => {
         res.data.forEach(item =>{
-          this.iotBoardList.push({
-            devicePixel: item.dictValue,
-            label: item.dictLabel,
-            list: []
-          })
+          this.boardSizeDic[item.dictValue] = {
+            label:item.dictLabel,
+            list:[]
+          };
         })
       })
     },
     // 获取信息模板分类
-    getTemplateCategory() {
-      this.getDicts('iot_template_category').then(res => {
-        this.tempCategory = res.data
+    ____getTemplateCategory() {
+      return this.getDicts('iot_template_category').then(res => {
+        this.tplCategory = res.data;
       })
     },
 
+    ____getAllTemplate(){
+    return getTemplateList().then((res) => {
+        this.templateAll = res.data;
+      });
+    },
+
     // 行拖拽
     rowDrop() {
       if (JSON.parse(JSON.stringify(this.contentList)).length > 0) {
@@ -376,585 +382,69 @@ export default {
         })
       }
     },
+    ____initDirection(){
+      return this.getDicts('iot_board_direction').then(res => {
+        this.boardDirectionList = res.data;
+        this.form.selectedDirection = res.data[0].dictValue;
+      });
+    },
     //改变方向
-    changeDirection(val) {
-      this.getDicts('iot_board_direction').then(res => {
-        this.boardDirectionList = res.data
-
-        if (val) {
-          this.form.eqDirection = val
-        } else {
-          this.form.eqDirection = res.data[0].dictValue
-        }
-
-        this.getIotBoard()
-      })
+    ____changeDirection(val) {
+      this.____getIotBoard()
     },
 
     // 情报板设备 折叠面板
-    getIotBoard() {
+    ____getIotBoard() {
       this.checkAll = false
-
-      //TODO 测试数据 需删除走接口
-      let testData = [
-        {
-          devicePixel: '768*64',
-          label: '门架板768*64',
-          list: [
-            {
-              searchValue: null,
-              createBy: null,
-              createTime: null,
-              updateBy: null,
-              updateTime: null,
-              remark: null,
-              params: {},
-              deviceId: 595,
-              deviceName: '门架式可变信息标志K57+595',
-              brandId: 4,
-              iotBoardBrandName: {
-                brandId: 4,
-                brandName: '光电比特'
-              },
-              routeId: 17,
-              routeDirection: '济南方向',
-              deviceMarkingName: null,
-              deviceTypeId: 202010001,
-              deviceTypeNumber: 202010004,
-              deviceModelId: null,
-              factoryLibrary: null,
-              userUnitId: 555503,
-              operatorId: null,
-              longitude: '117.9554825',
-              latitude: '36.84254887',
-              firmId: 18,
-              purchaseDate: '2022-12-14T16:06:03.000+08:00',
-              warrantyYears: null,
-              unitPrice: null,
-              runStatus: 1,
-              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
-              deviceStatus: '1',
-              installDate: '2022-12-14T16:06:03.000+08:00',
-              maintainId: 2,
-              collarAgencyId: 555503,
-              pileNumber: 'K57+595',
-              manageAgencyId: 'YG11002',
-              producteDate: null,
-              repairDate: null,
-              operateDate: null,
-              serviceLife: null,
-              storageDate: null,
-              isMonitor: 1,
-              isConfig: 1,
-              localInfo: 36,
-              routeNumber: null,
-              routeName: null,
-              deviceIp: '10.0.81.62',
-              devicePort: null,
-              devicePixel: '768*64',
-              userName: null,
-              passWord: null,
-              protocolName: null,
-              deviceTypeIds: null,
-              lUserID: null,
-              lAlarmHandle: null,
-              lUserIDStr: null,
-              lAlarmHandleStr: null,
-              eqDirection: null,
-              iotDeviceType: null
-            },
-            {
-              searchValue: null,
-              createBy: null,
-              createTime: null,
-              updateBy: null,
-              updateTime: null,
-              remark: null,
-              params: {},
-              deviceId: 600,
-              deviceName: '门架式可变信息标志K71+600',
-              brandId: 4,
-              iotBoardBrandName: {
-                brandId: 4,
-                brandName: '光电比特'
-              },
-              routeId: 17,
-              routeDirection: '济南方向',
-              deviceMarkingName: null,
-              deviceTypeId: 202010001,
-              deviceTypeNumber: 202010004,
-              deviceModelId: null,
-              factoryLibrary: null,
-              userUnitId: 555503,
-              operatorId: null,
-              longitude: '117.9554825',
-              latitude: '36.84254887',
-              firmId: 18,
-              purchaseDate: '2022-12-14T16:06:03.000+08:00',
-              warrantyYears: null,
-              unitPrice: null,
-              runStatus: 1,
-              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
-              deviceStatus: '1',
-              installDate: '2022-12-14T16:06:03.000+08:00',
-              maintainId: 2,
-              collarAgencyId: 555503,
-              pileNumber: 'K71+600',
-              manageAgencyId: 'YG11002',
-              producteDate: null,
-              repairDate: null,
-              operateDate: null,
-              serviceLife: null,
-              storageDate: null,
-              isMonitor: 1,
-              isConfig: 1,
-              localInfo: 36,
-              routeNumber: null,
-              routeName: null,
-              deviceIp: '10.0.81.66',
-              devicePort: null,
-              devicePixel: '768*64',
-              userName: null,
-              passWord: null,
-              protocolName: null,
-              deviceTypeIds: null,
-              lUserID: null,
-              lAlarmHandle: null,
-              lUserIDStr: null,
-              lAlarmHandleStr: null,
-              eqDirection: null,
-              iotDeviceType: null
-            },
-            {
-              searchValue: null,
-              createBy: null,
-              createTime: null,
-              updateBy: null,
-              updateTime: null,
-              remark: null,
-              params: {},
-              deviceId: 285,
-              deviceName: '门架式可变信息标志K82+285',
-              brandId: 4,
-              iotBoardBrandName: {
-                brandId: 4,
-                brandName: '光电比特'
-              },
-              routeId: 17,
-              routeDirection: '济南方向',
-              deviceMarkingName: null,
-              deviceTypeId: 202010001,
-              deviceTypeNumber: 202010004,
-              deviceModelId: null,
-              factoryLibrary: null,
-              userUnitId: 555503,
-              operatorId: null,
-              longitude: '117.9554825',
-              latitude: '36.84254887',
-              firmId: 18,
-              purchaseDate: '2022-12-14T16:06:03.000+08:00',
-              warrantyYears: null,
-              unitPrice: null,
-              runStatus: 1,
-              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
-              deviceStatus: '1',
-              installDate: '2022-12-14T16:06:03.000+08:00',
-              maintainId: 2,
-              collarAgencyId: 555503,
-              pileNumber: 'K82+285',
-              manageAgencyId: 'YG11002',
-              producteDate: null,
-              repairDate: null,
-              operateDate: null,
-              serviceLife: null,
-              storageDate: null,
-              isMonitor: 1,
-              isConfig: 1,
-              localInfo: 36,
-              routeNumber: null,
-              routeName: null,
-              deviceIp: '10.0.21.61',
-              devicePort: null,
-              devicePixel: '768*64',
-              userName: null,
-              passWord: null,
-              protocolName: null,
-              deviceTypeIds: null,
-              lUserID: null,
-              lAlarmHandle: null,
-              lUserIDStr: null,
-              lAlarmHandleStr: null,
-              eqDirection: null,
-              iotDeviceType: null
-            },
-            {
-              searchValue: null,
-              createBy: null,
-              createTime: null,
-              updateBy: null,
-              updateTime: null,
-              remark: null,
-              params: {},
-              deviceId: 208,
-              deviceName: '门架式可变信息标志k98+208',
-              brandId: 4,
-              iotBoardBrandName: {
-                brandId: 4,
-                brandName: '光电比特'
-              },
-              routeId: 17,
-              routeDirection: '济南方向',
-              deviceMarkingName: null,
-              deviceTypeId: 202010001,
-              deviceTypeNumber: 202010004,
-              deviceModelId: null,
-              factoryLibrary: null,
-              userUnitId: 555503,
-              operatorId: null,
-              longitude: '117.9554825',
-              latitude: '36.84254887',
-              firmId: 18,
-              purchaseDate: '2022-12-14T16:06:03.000+08:00',
-              warrantyYears: null,
-              unitPrice: null,
-              runStatus: 1,
-              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
-              deviceStatus: '1',
-              installDate: '2022-12-14T16:06:03.000+08:00',
-              maintainId: 2,
-              collarAgencyId: 555503,
-              pileNumber: 'k98+208',
-              manageAgencyId: 'YG11002',
-              producteDate: null,
-              repairDate: null,
-              operateDate: null,
-              serviceLife: null,
-              storageDate: null,
-              isMonitor: 1,
-              isConfig: 1,
-              localInfo: 36,
-              routeNumber: null,
-              routeName: null,
-              deviceIp: '10.0.31.115',
-              devicePort: null,
-              devicePixel: '768*64',
-              userName: null,
-              passWord: null,
-              protocolName: null,
-              deviceTypeIds: null,
-              lUserID: null,
-              lAlarmHandle: null,
-              lUserIDStr: null,
-              lAlarmHandleStr: null,
-              eqDirection: null,
-              iotDeviceType: null
-            },
-            {
-              searchValue: null,
-              createBy: null,
-              createTime: null,
-              updateBy: null,
-              updateTime: null,
-              remark: null,
-              params: {},
-              deviceId: 65,
-              deviceName: '门架式可变信息标志K103+900',
-              brandId: 4,
-              iotBoardBrandName: {
-                brandId: 4,
-                brandName: '光电比特'
-              },
-              routeId: 17,
-              routeDirection: '济南方向',
-              deviceMarkingName: null,
-              deviceTypeId: 202010001,
-              deviceTypeNumber: 202010004,
-              deviceModelId: null,
-              factoryLibrary: null,
-              userUnitId: 555503,
-              operatorId: null,
-              longitude: '117.9554825',
-              latitude: '36.84254887',
-              firmId: 18,
-              purchaseDate: '2022-12-14T16:06:03.000+08:00',
-              warrantyYears: null,
-              unitPrice: null,
-              runStatus: 1,
-              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
-              deviceStatus: '1',
-              installDate: '2022-12-14T16:06:03.000+08:00',
-              maintainId: 2,
-              collarAgencyId: 555503,
-              pileNumber: 'K103+900',
-              manageAgencyId: 'YG11002',
-              producteDate: null,
-              repairDate: null,
-              operateDate: null,
-              serviceLife: null,
-              storageDate: null,
-              isMonitor: 1,
-              isConfig: 1,
-              localInfo: 36,
-              routeNumber: null,
-              routeName: null,
-              deviceIp: '10.0.31.111',
-              devicePort: null,
-              devicePixel: '768*64',
-              userName: null,
-              passWord: null,
-              protocolName: null,
-              deviceTypeIds: null,
-              lUserID: null,
-              lAlarmHandle: null,
-              lUserIDStr: null,
-              lAlarmHandleStr: null,
-              eqDirection: null,
-              iotDeviceType: null
-            }
-          ]
-        },
-        {
-          devicePixel: '480*48',
-          label: '雨棚480*48',
-          list: [
-            {
-              searchValue: null,
-              createBy: null,
-              createTime: null,
-              updateBy: null,
-              updateTime: null,
-              remark: null,
-              params: {},
-              deviceId: 65,
-              deviceName: '雨棚可变信息标志ZK18+665',
-              brandId: 4,
-              iotBoardBrandName: {
-                brandId: 4,
-                brandName: '光电比特'
-              },
-              routeId: 17,
-              routeDirection: '济南方向',
-              deviceMarkingName: null,
-              deviceTypeId: 202010001,
-              deviceTypeNumber: 202010004,
-              deviceModelId: null,
-              factoryLibrary: null,
-              userUnitId: 555503,
-              operatorId: null,
-              longitude: '117.9554825',
-              latitude: '36.84254887',
-              firmId: 18,
-              purchaseDate: '2022-12-14T16:06:03.000+08:00',
-              warrantyYears: null,
-              unitPrice: null,
-              runStatus: 1,
-              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
-              deviceStatus: '1',
-              installDate: '2022-12-14T16:06:03.000+08:00',
-              maintainId: 2,
-              collarAgencyId: 555503,
-              pileNumber: 'ZK134+587',
-              manageAgencyId: 'YG11002',
-              producteDate: null,
-              repairDate: null,
-              operateDate: null,
-              serviceLife: null,
-              storageDate: null,
-              isMonitor: 1,
-              isConfig: 1,
-              localInfo: 16,
-              routeNumber: null,
-              routeName: null,
-              deviceIp: '10.7.181.29',
-              devicePort: null,
-              devicePixel: '480*48',
-              userName: null,
-              passWord: null,
-              protocolName: null,
-              deviceTypeIds: null,
-              lUserID: null,
-              lAlarmHandle: null,
-              lUserIDStr: null,
-              lAlarmHandleStr: null,
-              eqDirection: null,
-              iotDeviceType: null
-            }
-          ]
-        },
-        {
-          devicePixel: '192*160',
-          label: ' 悬臂192*160',
-          list: [
-            {
-              searchValue: null,
-              createBy: null,
-              createTime: null,
-              updateBy: null,
-              updateTime: null,
-              remark: null,
-              params: {},
-              deviceId: 1055550306,
-              deviceName: '悬臂可变信息标志YK16+970',
-              brandId: 4,
-              iotBoardBrandName: {
-                brandId: 4,
-                brandName: '光电比特'
-              },
-              routeId: 17,
-              routeDirection: '菏泽方向',
-              deviceMarkingName: null,
-              deviceTypeId: 202010001,
-              deviceTypeNumber: 202010004,
-              deviceModelId: null,
-              factoryLibrary: null,
-              userUnitId: 555503,
-              operatorId: null,
-              longitude: null,
-              latitude: null,
-              firmId: 18,
-              purchaseDate: '2022-12-14T16:06:03.000+08:00',
-              warrantyYears: null,
-              unitPrice: null,
-              runStatus: 1,
-              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
-              deviceStatus: '1',
-              installDate: '2022-12-14T16:06:03.000+08:00',
-              maintainId: 2,
-              collarAgencyId: 555503,
-              pileNumber: 'YK133+825',
-              manageAgencyId: 'YG11002',
-              producteDate: null,
-              repairDate: null,
-              operateDate: null,
-              serviceLife: null,
-              storageDate: null,
-              isMonitor: 1,
-              isConfig: 1,
-              localInfo: 16,
-              routeNumber: null,
-              routeName: null,
-              deviceIp: '10.7.180.84',
-              devicePort: null,
-              devicePixel: '192*160',
-              userName: null,
-              passWord: null,
-              protocolName: null,
-              deviceTypeIds: null,
-              lUserID: null,
-              lAlarmHandle: null,
-              lUserIDStr: null,
-              lAlarmHandleStr: null,
-              eqDirection: null,
-              iotDeviceType: null
-            }
-          ]
-        },
-        {
-          devicePixel: '160*80',
-          label: ' 站前160*80',
-          list: [
-            {
-              searchValue: null,
-              createBy: null,
-              createTime: null,
-              updateBy: null,
-              updateTime: null,
-              remark: null,
-              params: {},
-              deviceId: 221,
-              deviceName: '大学城路口站前',
-              brandId: 4,
-              iotBoardBrandName: {
-                brandId: 4,
-                brandName: '光电比特'
-              },
-              routeId: 17,
-              routeDirection: '菏泽方向',
-              deviceMarkingName: null,
-              deviceTypeId: 202010001,
-              deviceTypeNumber: 202010004,
-              deviceModelId: null,
-              factoryLibrary: null,
-              userUnitId: 555503,
-              operatorId: null,
-              longitude: null,
-              latitude: null,
-              firmId: 18,
-              purchaseDate: '2022-12-14T16:06:03.000+08:00',
-              warrantyYears: null,
-              unitPrice: null,
-              runStatus: 1,
-              tunnelId: 'JQ-JiNan-WenZuBei-MJY',
-              deviceStatus: '1',
-              installDate: '2022-12-14T16:06:03.000+08:00',
-              maintainId: 2,
-              collarAgencyId: 555503,
-              pileNumber: '大学城路口站前',
-              manageAgencyId: 'YG11002',
-              producteDate: null,
-              repairDate: null,
-              operateDate: null,
-              serviceLife: null,
-              storageDate: null,
-              isMonitor: 1,
-              isConfig: 1,
-              localInfo: 16,
-              routeNumber: null,
-              routeName: null,
-              deviceIp: '10.0.81.221',
-              devicePort: null,
-              devicePixel: '160*80',
-              userName: null,
-              passWord: null,
-              protocolName: null,
-              deviceTypeIds: null,
-              lUserID: null,
-              lAlarmHandle: null,
-              lUserIDStr: null,
-              lAlarmHandleStr: null,
-              eqDirection: null,
-              iotDeviceType: null
-            }
-          ]
-        }
-      ]
-      this.iotBoardList = testData
-      if (testData.length > 0) {
-        this.iotBoardActive = testData[0].devicePixel
-        // this.handleChange(testData[0].devicePixel)
-      } else {
-        this.getTemplateCategory()
+      for(let key in this.boardSizeDic){
+        this.boardSizeDic[key].list=[];
       }
-      this.$forceUpdate()
-      return;
-
       // TODO 接口
       let param = {
-        direction: this.form.eqDirection,
+        direction: this.form.selectedDirection,
       };
       getBoardList(param).then((res) => {
-        console.log(res, "查询情报板设备列表");
-        this.iotBoardList.forEach(item => {
-          item.list = []
-          if (res.length > 0) {
-            res.forEach(board => {
-              if (item.devicePixel == board.sceenSize) {
-                item.list.push(board)
-              }
-            })
-
-            this.iotBoardActive = this.iotBoardList[0].devicePixel;
-            this.handleChange(this.iotBoardList[0].devicePixel);
-          } else {
-            this.getTemplateCategory();
+        res.data.forEach(item => {
+          if(_.isString(item.otherConfig)){
+            item.otherConfig = JSON.parse(item.otherConfig);
+          }
+          this.boardSizeDic[item.otherConfig.screenSize].list.push(item);
+          if(!this.selectedSize){
+            this.selectedSize = item.otherConfig.screenSize;
+            this.____onChangeSize();
+          }
+          if(!this.selectedDevice.deviceName){
+            this.selectedDevice = item;
+            this.____getBoardMessage();
           }
         })
-
-
         this.$forceUpdate();
+        // this.____onChangeSize(this.boardSizeDic[0].selectedPixel);
       });
     },
 
+    ____getBoardMessage(){
+      // 获取情报板设备对应的显示信息
+      this.selectedBdMsg = [];
+    },
+    ____onAddTemplate(){
+      this.editDialog = {
+        visible : true,
+        mode : "add",
+        type : "template"
+      }
+    },
+    ____onEditTemplate(tpl) {
+      this.editDialog = {
+        visible: true,
+        mode: "edit",
+        type: "template",
+        tpl
+      }
+    },
+    ____onEditSubmit(){
+      console.log("提交后外层的回调");
+    },
     // 板子分辨率换算
     getScreenSize(num, type) {
       // console.log(num)
@@ -985,11 +475,6 @@ export default {
       }
     },
 
-    // 接收子组件 新增模板
-    getActiveNames() {
-      this.allVmsTemplate()
-    },
-
     // 向左新增待下发
     arrowLeft(item) {
       var list = {
@@ -1031,7 +516,7 @@ export default {
       let method = 'put'
       const params1 = {
         inScreenMode: item.ACTION,
-        screenSize: this.form.devicePixel,
+        screenSize: this.form.selectedPixel,
         applyType: '',
         category: item.category ? item.category : this.toRightCategory,
         coordinate: '',
@@ -1076,6 +561,7 @@ export default {
     },
 
     // 修改弹窗
+    
     editOutline(item, index, type) {
       this.index = index
       this.editType = type
@@ -1123,7 +609,7 @@ export default {
     // 情报板管理右侧查询接口
     allVmsTemplate(type) {
       const param = {
-        devicePixel: this.form.devicePixel
+        selectedPixel: this.form.selectedPixel
       }
 
       //TODO 接口
@@ -1132,8 +618,8 @@ export default {
         console.log(res, '情报板管理右侧查询接口')
         let jArr = []
 
-        for (let j = 0; j < this.tempCategory.length; j++) {
-          let arr = this.tempCategory[j]
+        for (let j = 0; j < this.tplCategory.length; j++) {
+          let arr = this.tplCategory[j]
           let brr = data[j]
           arr.list = brr
           jArr.push(j.toString())
@@ -1142,8 +628,9 @@ export default {
           this.activeNames = jArr
         }
         this.$forceUpdate()
-        console.log(this.tempCategory, '新模板')
+        console.log(this.tplCategory, '新模板')
       })
+
     },
 
     // 删除中间模板
@@ -1172,7 +659,7 @@ export default {
           objAll.deviceIds = this.checkedCities.toString()
           let that = this
 
-          let devicePixel = this.form.devicePixel.split('*')
+          let selectedPixel = this.form.selectedPixel.split('*')
           let newArr = this.contentList.map(function (item) {
             let obj = {}
 
@@ -1193,8 +680,8 @@ export default {
             obj.CONTENT = obj.CONTENT.replaceAll('\n', '\\\\n')
 
             // obj.CONTENT = obj.CONTENT.replaceAll('=','\=')
-            obj.width = devicePixel[0]
-            obj.height = devicePixel[1]
+            obj.width = selectedPixel[0]
+            obj.height = selectedPixel[1]
             obj.formatStyle = item.formatStyle
             return obj
           })
@@ -1243,15 +730,6 @@ export default {
         })
     },
 
-    // 接收子组件新增待发模板
-    addInfo(form) {
-      console.log(form, '待发新增')
-      form.ID = this.contentList.length
-      this.contentList.push(deepClone(form))
-      this.$message.success('添加成功')
-      this.$forceUpdate()
-    },
-
     // 接收子组件form表单 修改
     receiveForm(form) {
       console.log(form, '接收子组件form表单 修改')
@@ -1260,11 +738,6 @@ export default {
       this.allVmsTemplate('no')
     },
 
-    // 打开添加信息弹窗
-    openDialogVisible(type, mode) {
-      this.$refs.addinfo.init(this.form.devicePixel, type, mode)
-    },
-
     // 全选
     handleCheckAllChange(val) {
       this.checkedCities = val ? this.deviceList : []
@@ -1286,22 +759,42 @@ export default {
       this.$forceUpdate()
     },
     // 情报板列表手风琴
-    handleChange(val) {
-      this.contentList = []
-      this.deviceList = []
-      this.disabledButton = true
-      this.checkedCities = []
-      this.checkAll = false
-      this.form.devicePixel = val
-      this.allVmsTemplate()
-      for (let item of this.iotBoardList) {
-        if (item.devicePixel == val) {
-          // this.checkboxList = item.list;
-          for (let itm of item.list) {
-            this.deviceList.push(itm.deviceId)
+    ____onChangeSize(val) {
+      this.____setAvailableTemplate();
+      // this.contentList = []
+      // this.deviceList = []
+      // this.disabledButton = true
+      // this.checkedCities = []
+      // this.checkAll = false
+      // this.allVmsTemplate()
+      // for (let item of this.boardSizeDic) {
+      //   if (item.selectedPixel == val) {
+      //     // this.checkboxList = item.list;
+      //     for (let itm of item.list) {
+      //       this.deviceList.push(itm.deviceId)
+      //     }
+      //   }
+      // }
+    },
+    ____setAvailableTemplate(){
+      this.templateAvailable = [];
+      this.tplCategory.forEach((item,index)=>{
+        let arr = this.templateAll[''+index];
+        if(arr.length>0){
+          let temp = [];
+          arr.forEach(tpl=>{
+            if(tpl.screenSize == this.selectedSize){
+              temp.push(tpl);
+            }
+          })
+          if(temp.length>0){
+            this.templateAvailable.push({
+              ...item,
+              list:temp
+            });
           }
         }
-      }
+      })
     },
 
     // 转报文 ITEM001
@@ -1389,7 +882,7 @@ export default {
               item.formatStyle = item.verticalAlignment
               this.contentList.push(item)
 
-              this.form.devicePixel = item.screenSize
+              this.form.selectedPixel = item.screenSize
             }
             console.log(this.contentList, 'onSubmit-----this.contentList')
             // this.rowDrop();
@@ -1407,7 +900,7 @@ export default {
       // 根据情报板id获取分辨率
       /*getBoardInfo(deviceId).then(res => {
         console.log(res, 'getBoardInfo')
-        this.form.devicePixel = res.data.pixel
+        this.form.selectedPixel = res.data.pixel
         if (res.data.deviceId) {
           this.disabledButton = false
         } else {
@@ -1430,7 +923,7 @@ export default {
       this.index_ = index
       console.log(item)
       this.boardEmitItem = item
-      this.boardEmitItem.screenSize = this.form.devicePixel
+      this.boardEmitItem.screenSize = this.form.selectedPixel
       this.boardEmitItem.deviceId = this.deviceId
       this.boardEmitItem.type = type
 
@@ -1473,8 +966,8 @@ export default {
       let width = ''
       let height = ''
       if (!screenSize) {
-        width = this.form.devicePixel.split('*')[0]
-        height = this.form.devicePixel.split('*')[1]
+        width = this.form.selectedPixel.split('*')[0]
+        height = this.form.selectedPixel.split('*')[1]
       } else {
         width = screenSize.split('*')[0]
         height = screenSize.split('*')[1]
@@ -1507,8 +1000,8 @@ export default {
       let width = ''
       let height = ''
       if (!screenSize) {
-        width = this.form.devicePixel.split('*')[0]
-        height = this.form.devicePixel.split('*')[1]
+        width = this.form.selectedPixel.split('*')[0]
+        height = this.form.selectedPixel.split('*')[1]
       } else {
         width = screenSize.split('*')[0]
         height = screenSize.split('*')[1]
@@ -1653,59 +1146,6 @@ export default {
         align-items: center;
         border: 2px solid #004c64;
       }
-
-      .menuBox {
-        display: flex;
-        align-items: center;
-        /* // margin-left: 10px; */
-        /* // border: solid 1px #05afe3; */
-        height: 75px;
-        justify-content: space-around;
-        align-items: center;
-        border: 2px solid #004c64;
-
-        div {
-          background-repeat: no-repeat;
-          background-size: 100% 100%;
-          width: 40px;
-          height: 40px;
-        }
-
-        > div:first-of-type {
-          /* background-image: url(../../../assets/cloudControl/edit2.png); */
-        }
-
-        > div:nth-of-type(2) {
-          /* background-image: url(../../../assets/cloudControl/edit4.png); */
-        }
-
-        /* // >div:last-of-type{
-          //   background-image: url(../../../assets/cloudControl/edit4.png);
-          // } */
-        > div:first-of-type:hover {
-          /* background-image: url(../../../assets/cloudControl/edit1.png); */
-        }
-
-        > div:nth-of-type(2):hover {
-          /* background-image: url(../../../assets/cloudControl/closeIcon1.png); */
-        }
-
-        /* // >div:last-of-type:hover{
-          //   background-image: url(../../../assets/cloudControl/closeIcon1.png);
-          // } */
-        i {
-          font-size: 24px;
-          color: #666;
-          cursor: pointer;
-          caret-color: rgba(0, 0, 0, 0);
-          user-select: none;
-        }
-
-        i:hover {
-          color: #05afe3 !important;
-        }
-      }
-
       /* // } */
       .controlBox {
         display: flex;
@@ -1719,89 +1159,67 @@ export default {
       height: calc(100% - 46px);
       padding: 0 0 1vh 0;
 
-      .con {
-        height: 75px;
-        margin: 10px 0;
-        padding: 0 10px;
-        overflow: hidden;
+      .infoItem {
         display: flex;
-        align-items: center;
+        box-sizing: content-box;
+        align-items: stretch;
+        margin-bottom: 10px;
 
-        .templateTitle {
-          height: 75px;
-          border: 2px solid #004c64;
-          position: relative;
-          width: 540px;
-          float: left;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          overflow: hidden;
+        .boardPreview{
+            border: 2px solid #004c64;
+            // width: 560px;
+            // height:80px;
+            flex: 1;
         }
+        .infoBtnBox {
+              width: 160px;
+              height: 80px;
+              display: flex;
+              float: right;
+              margin-left: 10px;
+              padding: 0 0.2vw;
+              /* // border: solid 1px #05afe3; */
+              border: 2px solid #004c64;
+              display: flex;
+              justify-content: space-around;
+              align-items: center;
+
+              .btn {
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                width: 40px;
+                height: 40px;
+                &.btnApply{
+                background-image: url(~@/assets/jihe/images/button/toLeft.png);
+              }
+              &.btnEdit{
+                  background-image: url(~@/assets/jihe/images/button/edit.png);
+                }
+                &.btnDelete{
+                  background-image: url(~@/assets/jihe/images/button/delete.png);
+                }
+              }
 
-        .menuBox {
-          display: flex;
-          float: right;
-          margin-left: 15px;
-          padding: 0 0.2vw;
-          /* // border: solid 1px #05afe3; */
-          width: calc(100% - 555px);
-          height: 100%;
-          border: 2px solid #004c64;
-          display: flex;
-          justify-content: space-around;
-          align-items: center;
-
-          div {
-            background-repeat: no-repeat;
-            background-size: 100% 100%;
-            width: 40px;
-            height: 40px;
-          }
-
-          > div:first-of-type {
-            /* background-image: url(../../../assets/cloudControl/toLeft2.png); */
-          }
-
-          > div:nth-of-type(2) {
-            /* background-image: url(../../../assets/cloudControl/edit2.png); */
-          }
-
-          > div:last-of-type {
-            /* background-image: url(../../../assets/cloudControl/edit4.png); */
-          }
-
-          > div:first-of-type:hover {
-            /* background-image: url(../../../assets/cloudControl/toLeft1.png); */
-          }
-
-          > div:nth-of-type(2):hover {
-            /* background-image: url(../../../assets/cloudControl/edit1.png); */
-          }
-
-          > div:last-of-type:hover {
-            /* background-image: url(../../../assets/cloudControl/closeIcon1.png); */
-          }
-
-          i {
-            font-size: 24px;
-            color: #666;
-            padding-left: 4px;
-            cursor: pointer;
-            caret-color: rgba(0, 0, 0, 0);
-            user-select: none;
-          }
+              i {
+                font-size: 24px;
+                color: #666;
+                padding-left: 4px;
+                cursor: pointer;
+                caret-color: rgba(0, 0, 0, 0);
+                user-select: none;
+              }
 
-          i:hover {
-            color: #05afe3;
-          }
+              i:hover {
+                color: #05afe3;
+              }
 
-          .disabledClass {
-            pointer-events: none;
-            cursor: auto !important;
-            color: #ccc;
-          }
+              .disabledClass {
+                pointer-events: none;
+                cursor: auto !important;
+                color: #ccc;
+              }
         }
+        
       }
 
       .controlBox {
@@ -1877,15 +1295,6 @@ export default {
   color: #05afe3 !important;
 }
 
-.boardTextStyle {
-  position: absolute;
-  line-height: 1;
-  caret-color: rgba(0, 0, 0, 0);
-  user-select: none;
-  white-space: normal;
-  word-break: break-all;
-  overflow: hidden;
-}
 .qbbBigTitle {
   // margin-top: 1vh;
   color: #fff;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/device.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/device.js
new file mode 100644
index 00000000..0d09610e
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/device.js
@@ -0,0 +1,116 @@
+export default [
+        {
+            "id": 894,
+            "iotDeviceId": "8162-65535",
+            "groupId": null,
+            "productId": 0,
+            "stakeMarkId": "k57+595",
+            "direction": "1",
+            "deviceName": "门架式可变信息标志k57+595",
+            "deviceType": 2,
+            "installationDate": null,
+            "productionDate": null,
+            "durableYears": null,
+            "installationSite": null,
+            "useState": null,
+            "otherConfig": "{\"screenSize\":\"768*64\"}",
+            "remark": null,
+            "createTime": "2024-01-10T15:27:34.000+08:00",
+            "updateTime": null
+        },
+        {
+            "id": 895,
+            "iotDeviceId": "8166-65535",
+            "groupId": null,
+            "productId": 0,
+            "stakeMarkId": "k71+600",
+            "direction": "1",
+            "deviceName": "门架式可变信息标志k71+600",
+            "deviceType": 2,
+            "installationDate": null,
+            "productionDate": null,
+            "durableYears": null,
+            "installationSite": null,
+            "useState": null,
+            "otherConfig": "{\"screenSize\":\"768*64\"}",
+            "remark": null,
+            "createTime": "2024-01-10T15:27:34.000+08:00",
+            "updateTime": null
+        },
+        {
+            "id": 896,
+            "iotDeviceId": "2161-65535",
+            "groupId": null,
+            "productId": 0,
+            "stakeMarkId": "k82+285",
+            "direction": "1",
+            "deviceName": "门架式可变信息标志k82+285",
+            "deviceType": 2,
+            "installationDate": null,
+            "productionDate": null,
+            "durableYears": null,
+            "installationSite": null,
+            "useState": null,
+            "otherConfig": "{\"screenSize\":\"768*64\"}",
+            "remark": null,
+            "createTime": "2024-01-10T15:27:34.000+08:00",
+            "updateTime": null
+        },
+        {
+            "id": 902,
+            "iotDeviceId": "31115-65535",
+            "groupId": null,
+            "productId": 0,
+            "stakeMarkId": "k98+208",
+            "direction": "1",
+            "deviceName": "门架式可变信息标志k98+208",
+            "deviceType": 2,
+            "installationDate": null,
+            "productionDate": null,
+            "durableYears": null,
+            "installationSite": null,
+            "useState": null,
+            "otherConfig": "{\"screenSize\":\"768*64\"}",
+            "remark": null,
+            "createTime": "2024-01-10T15:48:59.000+08:00",
+            "updateTime": null
+        },
+        {
+            "id": 903,
+            "iotDeviceId": "31111-65535",
+            "groupId": null,
+            "productId": 0,
+            "stakeMarkId": "k103+900",
+            "direction": "1",
+            "deviceName": "门架式可变信息标志k103+900",
+            "deviceType": 2,
+            "installationDate": null,
+            "productionDate": null,
+            "durableYears": null,
+            "installationSite": null,
+            "useState": null,
+            "otherConfig": "{\"screenSize\":\"768*64\"}",
+            "remark": null,
+            "createTime": "2024-01-10T15:48:59.000+08:00",
+            "updateTime": null
+        },
+        {
+            "id": 904,
+            "iotDeviceId": "81221-65535",
+            "groupId": null,
+            "productId": 0,
+            "stakeMarkId": "k59+289",
+            "direction": "1",
+            "deviceName": "大学城入口站前板",
+            "deviceType": 2,
+            "installationDate": null,
+            "productionDate": null,
+            "durableYears": null,
+            "installationSite": null,
+            "useState": null,
+            "otherConfig": "{\"screenSize\":\"160*80\"}",
+            "remark": null,
+            "createTime": "2024-01-10T15:48:59.000+08:00",
+            "updateTime": null
+        }
+    ]
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/direction.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/direction.js
new file mode 100644
index 00000000..aeb8802d
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/direction.js
@@ -0,0 +1,59 @@
+export default [
+        {
+            "searchValue": null,
+            "createBy": "admin",
+            "createTime": "2023-12-22 15:16:24",
+            "updateBy": null,
+            "updateTime": null,
+            "remark": null,
+            "params": {},
+            "dictCode": 286,
+            "dictSort": 0,
+            "dictLabel": "菏泽方向",
+            "dictValue": "1",
+            "dictType": "iot_board_direction",
+            "cssClass": null,
+            "listClass": "default",
+            "isDefault": "N",
+            "status": "0",
+            "default": false
+        },
+        {
+            "searchValue": null,
+            "createBy": "admin",
+            "createTime": "2023-12-22 15:16:31",
+            "updateBy": null,
+            "updateTime": null,
+            "remark": null,
+            "params": {},
+            "dictCode": 287,
+            "dictSort": 1,
+            "dictLabel": "济南方向",
+            "dictValue": "2",
+            "dictType": "iot_board_direction",
+            "cssClass": null,
+            "listClass": "default",
+            "isDefault": "N",
+            "status": "0",
+            "default": false
+        },
+        {
+            "searchValue": null,
+            "createBy": "admin",
+            "createTime": "2023-12-22 15:16:39",
+            "updateBy": null,
+            "updateTime": null,
+            "remark": null,
+            "params": {},
+            "dictCode": 288,
+            "dictSort": 2,
+            "dictLabel": "双向",
+            "dictValue": "3",
+            "dictType": "iot_board_direction",
+            "cssClass": null,
+            "listClass": "default",
+            "isDefault": "N",
+            "status": "0",
+            "default": false
+        }
+    ]
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/template.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/template.js
new file mode 100644
index 00000000..b5d829ca
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/template.js
@@ -0,0 +1,164 @@
+export default [
+            {
+                "id": 3,
+                "category": "0",
+                "content": "保持车距，控制车速",
+                "screenSize": "768*64",
+                "fontColor": "FFFF00",
+                "fontSize": "64",
+                "fontType": "2",
+                "fontSpacing": "0",
+                "rollingSpeed": null,
+                "stopTime": "50",
+                "inScreenMode": "1",
+                "formatStyle": "2",
+                "remark": null,
+                "createTime": "2024-01-06 10:40:19",
+                "updateTime": "2024-01-06 11:04:53"
+            },
+            {
+                "id": 4,
+                "category": "0",
+                "content": "山东高速欢迎您",
+                "screenSize": "768*64",
+                "fontColor": "FFFF00",
+                "fontSize": "64",
+                "fontType": "3",
+                "fontSpacing": "0",
+                "rollingSpeed": null,
+                "stopTime": "50",
+                "inScreenMode": "1",
+                "formatStyle": "2",
+                "remark": null,
+                "createTime": "2024-01-06 10:40:44",
+                "updateTime": "2024-01-06 11:04:58"
+            },
+            {
+                "id": 5,
+                "category": "0",
+                "content": "山东高速热线：96659",
+                "screenSize": "768*64",
+                "fontColor": "FFFF00",
+                "fontSize": "64",
+                "fontType": "1",
+                "fontSpacing": "0",
+                "rollingSpeed": null,
+                "stopTime": "50",
+                "inScreenMode": "1",
+                "formatStyle": "2",
+                "remark": null,
+                "createTime": "2024-01-06 10:40:56",
+                "updateTime": "2024-01-06 11:05:24"
+            },
+            {
+                "id": 9,
+                "category": "0",
+                "content": "安全带=生命带,关键时刻能救命",
+                "screenSize": "768*64",
+                "fontColor": "FFFF00",
+                "fontSize": "48",
+                "fontType": "3",
+                "fontSpacing": "0",
+                "rollingSpeed": null,
+                "stopTime": "50",
+                "inScreenMode": "1",
+                "formatStyle": "2",
+                "remark": null,
+                "createTime": "2024-01-06 10:42:21",
+                "updateTime": "2024-01-06 11:05:15"
+            }
+        ],
+            "1": [
+                {
+                    "id": 6,
+                    "category": "1",
+                    "content": "前方施工，谨慎驾驶",
+                    "screenSize": "768*64",
+                    "fontColor": "FFFF00",
+                    "fontSize": "64",
+                    "fontType": "3",
+                    "fontSpacing": "0",
+                    "rollingSpeed": null,
+                    "stopTime": "50",
+                    "inScreenMode": "1",
+                    "formatStyle": "2",
+                    "remark": null,
+                    "createTime": "2024-01-06 10:41:07",
+                    "updateTime": "2024-01-06 11:05:36"
+                }
+            ],
+                "2": [
+                    {
+                        "id": 2,
+                        "category": "2",
+                        "content": "雨天路滑，注意安全",
+                        "screenSize": "768*64",
+                        "fontColor": "FFFF00",
+                        "fontSize": "64",
+                        "fontType": "3",
+                        "fontSpacing": "0",
+                        "rollingSpeed": null,
+                        "stopTime": "50",
+                        "inScreenMode": "1",
+                        "formatStyle": "2",
+                        "remark": null,
+                        "createTime": "2024-01-06 10:38:44",
+                        "updateTime": "2024-01-06 11:05:52"
+                    },
+                    {
+                        "id": 10,
+                        "category": "2",
+                        "content": "大雾天气\n减速慢行",
+                        "screenSize": "160*80",
+                        "fontColor": "FFFF00",
+                        "fontSize": "40",
+                        "fontType": "2",
+                        "fontSpacing": "0",
+                        "rollingSpeed": null,
+                        "stopTime": "50",
+                        "inScreenMode": "1",
+                        "formatStyle": "2",
+                        "remark": null,
+                        "createTime": "2024-01-06 10:42:59",
+                        "updateTime": "2024-01-06 11:05:48"
+                    }
+                ],
+                    "3": [],
+                        "4": [
+                            {
+                                "id": 8,
+                                "category": "4",
+                                "content": "前方发生火灾，请谨慎驾驶",
+                                "screenSize": "768*64",
+                                "fontColor": "FFFF00",
+                                "fontSize": "64",
+                                "fontType": "1",
+                                "fontSpacing": "0",
+                                "rollingSpeed": null,
+                                "stopTime": "50",
+                                "inScreenMode": "1",
+                                "formatStyle": "2",
+                                "remark": null,
+                                "createTime": "2024-01-06 10:42:00",
+                                "updateTime": null
+                            }
+                        ],
+                            "5": [
+                                {
+                                    "id": 7,
+                                    "category": "5",
+                                    "content": "前方事故，减速慢行",
+                                    "screenSize": "768*64",
+                                    "fontColor": "FFFF00",
+                                    "fontSize": "64",
+                                    "fontType": "1",
+                                    "fontSpacing": "0",
+                                    "rollingSpeed": null,
+                                    "stopTime": "50",
+                                    "inScreenMode": "1",
+                                    "formatStyle": "2",
+                                    "remark": null,
+                                    "createTime": "2024-01-06 10:41:33",
+                                    "updateTime": null
+                                }
+                            ]
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/templateCategory.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/templateCategory.js
new file mode 100644
index 00000000..2ee999ab
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/templateCategory.js
@@ -0,0 +1,116 @@
+export default[
+                {
+                    "searchValue": null,
+                    "createBy": "admin",
+                    "createTime": "2023-12-22 15:14:32",
+                    "updateBy": null,
+                    "updateTime": null,
+                    "remark": null,
+                    "params": {},
+                    "dictCode": 280,
+                    "dictSort": 0,
+                    "dictLabel": "日常通用",
+                    "dictValue": "0",
+                    "dictType": "iot_template_category",
+                    "cssClass": null,
+                    "listClass": "default",
+                    "isDefault": "N",
+                    "status": "0",
+                    "default": false
+                },
+                {
+                    "searchValue": null,
+                    "createBy": "admin",
+                    "createTime": "2023-12-22 15:14:41",
+                    "updateBy": null,
+                    "updateTime": null,
+                    "remark": null,
+                    "params": {},
+                    "dictCode": 281,
+                    "dictSort": 1,
+                    "dictLabel": "施工管控",
+                    "dictValue": "1",
+                    "dictType": "iot_template_category",
+                    "cssClass": null,
+                    "listClass": "default",
+                    "isDefault": "N",
+                    "status": "0",
+                    "default": false
+                },
+                {
+                    "searchValue": null,
+                    "createBy": "admin",
+                    "createTime": "2023-12-22 15:14:50",
+                    "updateBy": null,
+                    "updateTime": null,
+                    "remark": null,
+                    "params": {},
+                    "dictCode": 282,
+                    "dictSort": 2,
+                    "dictLabel": "恶劣天气",
+                    "dictValue": "2",
+                    "dictType": "iot_template_category",
+                    "cssClass": null,
+                    "listClass": "default",
+                    "isDefault": "N",
+                    "status": "0",
+                    "default": false
+                },
+                {
+                    "searchValue": null,
+                    "createBy": "admin",
+                    "createTime": "2023-12-22 15:14:59",
+                    "updateBy": null,
+                    "updateTime": null,
+                    "remark": null,
+                    "params": {},
+                    "dictCode": 283,
+                    "dictSort": 3,
+                    "dictLabel": "交通拥堵",
+                    "dictValue": "3",
+                    "dictType": "iot_template_category",
+                    "cssClass": null,
+                    "listClass": "default",
+                    "isDefault": "N",
+                    "status": "0",
+                    "default": false
+                },
+                {
+                    "searchValue": null,
+                    "createBy": "admin",
+                    "createTime": "2023-12-22 15:15:08",
+                    "updateBy": null,
+                    "updateTime": null,
+                    "remark": null,
+                    "params": {},
+                    "dictCode": 284,
+                    "dictSort": 4,
+                    "dictLabel": "突发事件",
+                    "dictValue": "4",
+                    "dictType": "iot_template_category",
+                    "cssClass": null,
+                    "listClass": "default",
+                    "isDefault": "N",
+                    "status": "0",
+                    "default": false
+                },
+                {
+                    "searchValue": null,
+                    "createBy": "admin",
+                    "createTime": "2023-12-22 15:15:16",
+                    "updateBy": null,
+                    "updateTime": null,
+                    "remark": null,
+                    "params": {},
+                    "dictCode": 285,
+                    "dictSort": 5,
+                    "dictLabel": "警情播报",
+                    "dictValue": "5",
+                    "dictType": "iot_template_category",
+                    "cssClass": null,
+                    "listClass": "default",
+                    "isDefault": "N",
+                    "status": "0",
+                    "default": false
+                }
+            ]
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/login.vue b/ruoyi-ui/src/views/login.vue
index e44986d4..071178d2 100644
--- a/ruoyi-ui/src/views/login.vue
+++ b/ruoyi-ui/src/views/login.vue
@@ -101,8 +101,8 @@ export default {
       title: "", // 系统标题
       cookiePassword: "",
       loginForm: {
-        username: "", //admin
-        password: "", //admin123
+        username: "admin",
+        password: "admin123", 
         rememberMe: false,
         code: "",
         uuid: "",
diff --git a/ruoyi-ui/vue.config.js b/ruoyi-ui/vue.config.js
index 205f8d2d..bdb6139f 100644
--- a/ruoyi-ui/vue.config.js
+++ b/ruoyi-ui/vue.config.js
@@ -40,8 +40,9 @@ module.exports = {
         // 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`, // 刘朋
-        target: `http://10.168.73.36:8080`, // 周乐
+        // target: `http://10.168.73.36:8080`, // 周乐
+        target: `http://10.168.77.209:8080`,// 刘朋
+        // target: `http://10.168.66.196:8080`,
         changeOrigin: true,
         pathRewrite: {
           ["^" + process.env.VUE_APP_BASE_API]: "",