diff --git a/ruoyi-ui/src/api/broadcast/broadcast.js b/ruoyi-ui/src/api/broadcast/broadcast.js
new file mode 100644
index 00000000..5d664d1e
--- /dev/null
+++ b/ruoyi-ui/src/api/broadcast/broadcast.js
@@ -0,0 +1,56 @@
+import request from '@/utils/request'
+
+// 查询设备列表
+export function getdeviceList(query) {
+  return request({
+    url: '/business/device/query',
+    method: 'get',
+    params: {
+      ...query,
+      deviceType:5
+    }
+  })
+}
+
+// 查询设备列表
+export function getBoardDeviceInfo(deviceId) {
+  return request({
+    // url: `/business/board/realtimeProperty/${deviceId}`,
+    url: `/business/device/properties/realtime/${deviceId}/3A`,
+    // url: `/business/device/batchFunctions`,
+    method: 'GET',
+    params: {}
+  })
+}
+
+// 敏感字段检测
+export function checkBoardContent(content) {
+  return request({
+    url: `/business/dcInfoBoardVocabulary/checkBoardContent`,
+    method: 'get',
+    params:{
+      content
+    }
+  })
+}
+
+// 保存情报板发布日志
+export function saveBoardReleaseLog(data) {
+  return request({
+    url: `/business/boardReleaseLog`,
+    method: 'post',
+    data
+  })
+}
+
+export function publishToBoard(data) {
+  return request({
+    // url: '/business/board/batch/publish',
+    url: `/broadcast/broadcastFunctionCall`,
+    method: 'post',
+    // data: data
+    data
+  })
+}
+
+
diff --git a/ruoyi-ui/src/api/broadcast/record.js b/ruoyi-ui/src/api/broadcast/record.js
new file mode 100644
index 00000000..b23c32b2
--- /dev/null
+++ b/ruoyi-ui/src/api/broadcast/record.js
@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询发布记录列表
+export function listRecord(query) {
+  return request({
+    url: '/system/log/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询发布记录详细
+export function getRecord(id) {
+  return request({
+    url: '/system/record/' + id,
+    method: 'get'
+  })
+}
+
+// 新增发布记录
+export function addRecord(data) {
+  return request({
+    url: '/system/record',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改发布记录
+export function updateRecord(data) {
+  return request({
+    url: '/system/record',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除发布记录
+export function delRecord(id) {
+  return request({
+    url: '/system/record/' + id,
+    method: 'delete'
+  })
+}
+
+// 导出发布记录
+export function exportRecord(query) {
+  return request({
+    url: '/system/log/export',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/ruoyi-ui/src/api/broadcast/template.js b/ruoyi-ui/src/api/broadcast/template.js
new file mode 100644
index 00000000..e98e3abf
--- /dev/null
+++ b/ruoyi-ui/src/api/broadcast/template.js
@@ -0,0 +1,216 @@
+
+import request from '@/utils/request'
+
+// 查询模板列表
+export function getTemplateList(query) {
+  return request({
+    url: '/system/broadcast/listAll',
+    method: 'get',
+    params: query
+  })
+}
+
+// 新增情报板模板
+export function addTemplate(data) {
+  console.log(data , "dddddddddaaataaaa")
+  return request({
+    url: '/system/broadcast',
+    method: 'post',
+    data: data
+  })
+}
+
+//修改情报板模板
+export function editTemplate(data) {
+  return request({
+    url: '/system/broadcast',
+    method: 'put',
+    data: data
+  })
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//修改情报板模板内容
+export function editTemplateContent(data) {
+  return request({
+    url: '/system/content',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除情报板模板
+export function deleteTemplate(id) {
+  return request({
+    url: '/system/broadcast/' + id,
+    method: 'delete'
+  })
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//获取情报板模板详细信息
+export function getTemplateInfo(id) {
+  return request({
+    url: '/system/template/' + id,
+    method: 'get',
+  })
+}
+
+//获取情报板模板内容信息
+export function getTemplateContent(id) {
+  return request({
+    url: '/system/content/list?templateId=' + id,
+    method: 'get',
+  })
+}
+
+
+
+//新增情报板模板内容
+export function addTemplateContent(data) {
+  return request({
+    url: '/system/content',
+    method: 'post',
+    data: data
+  })
+}
+
+//图片库列表查询
+export function getGalleryList() {
+  return request({
+    url: '/system/upload/list',
+    method: 'get',
+  })
+}
+
+//图片获取详细信息
+export function getGallery(id) {
+  return request({
+    url: '/system/upload/'+ id,
+    method: 'get',
+  })
+}
+
+
+// 情报板发布
+export function postInformationBoardRelease(data) {
+  return request({
+    url: '/system/template/informationBoardRelease',
+    method: 'post',
+    data: data
+  })
+}
+
+// 情报板获取
+export function getInformationBoardRelease(data) {
+  return request({
+    url: '/system/template/informationBoardAcquisition',
+    method: 'post',
+    data: data
+  })
+}
+
+//情报板发布
+export function uploadBoardEditInfo(devicelds,protocolType,parameters) {
+  var data = {
+    deviceIds:devicelds,
+    protocolType:protocolType,
+    // parameters:parameters
+    parameters:encodeURI(parameters)
+
+  }
+  return request({
+    url: '/parser/board/uploadBoardEditInfo',
+    method: 'get',
+    params: data
+  })
+}
+
+//情报板发布 隧道内
+export function splicingBoard(data) {
+  return request({
+    url: '/parser/board/splicingBoard',
+    method: 'get',
+    params: data
+
+  })
+}
+
+//情报板发布 门架式
+export function gantryVmsInfo(data) {
+  return request({
+    url: '/parser/board/gantryVmsInfo',
+    method: 'get',
+    params: data
+
+  })
+}
+
+
+//情报板管理右侧查询接口
+export function getAllVmsTemplate(data) {
+  return request({
+    url: '/system/template/getAllVmsTemplate',
+    method: 'get',
+    params: data
+
+  })
+}
+
+// 情报板内容查询
+export function getBoardContent(deviceId) {
+  return request({
+    url: '/parser/board/getBoardContent?deviceId=' + deviceId,
+    method: 'get',
+
+  })
+}
+
+
+// 情报板根据分辨率筛字体大小
+export function getFontSizeByDevicePixel(screenSize) {
+  return request({
+    url: '/parser/board/getFontSizeByDevicePixel/' + screenSize,
+    method: 'get',
+
+  })
+}
+
+
+// 导出情报板模板
+export function exportTemplate(query) {
+  return request({
+    url: '/system/template/export',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/ruoyi-ui/src/common/menuData.js b/ruoyi-ui/src/common/menuData.js
index fabf1536..c5517702 100644
--- a/ruoyi-ui/src/common/menuData.js
+++ b/ruoyi-ui/src/common/menuData.js
@@ -209,6 +209,12 @@ export default [
         path: "/service/sensitive",
         component: "service/sensitive/index.vue",
       },
+      {
+        title: "语音广播发布",
+        name: "broadcast",
+        path: "/service/broadcast",
+        component: "service/broadcast/index.vue",
+      },
       {
         title: "发布渠道管理",
         name: "PublishingChannelManagement",
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/broadcast/BroadcastTplShower.vue b/ruoyi-ui/src/views/JiHeExpressway/components/broadcast/BroadcastTplShower.vue
new file mode 100644
index 00000000..e5caa57c
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/broadcast/BroadcastTplShower.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="broadcast_tpl_shower">
+        <p class="text">{{ text }}</p>
+    </div>
+</template>
+<script>
+export default {
+    name:"BoardPreview",
+    data(){
+        return {
+        }
+    },
+    props:{
+        text: {
+            type: String,
+            default: "测试文字"
+        },
+    },
+    watch:{
+        
+    },
+    computed:{
+    },
+    mounted(){
+    },
+    methods:{
+       
+    }
+}
+</script>
+<style lang="scss" scoped>
+.broadcast_tpl_shower{
+    background-color: #000;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center; padding: 4px 12px;
+    .text {
+        color: #0E0;
+        font-size: 16px; line-height: 18px; max-height: 36px; overflow: hidden;
+        word-break: break-all;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/broadcast/broadcastEditor.vue b/ruoyi-ui/src/views/JiHeExpressway/components/broadcast/broadcastEditor.vue
new file mode 100644
index 00000000..d14ece18
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/broadcast/broadcastEditor.vue
@@ -0,0 +1,432 @@
+<template>
+  <el-dialog :title="calcTitle" :visible.sync="dialogVisible" width="800px" append-to-body
+    :close-on-click-modal="false">
+    <el-card>
+      <el-form :model="dataForm" :rules="dataRule" label-width="110px" ref="dataForm" size="mini"
+        style="margin-right: 10px;">
+        <el-form-item label="所属类别" prop="category" v-if="type == 'template' && mode != 'toDevice'">
+          <el-row :gutter="0">
+            <el-col :span="6">
+              <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-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item label="音量" prop="outVol">
+          <el-row :gutter="0">
+            <el-col :span="6">
+              <el-input-number v-model="dataForm.outVol" :min="1" :max="9"></el-input-number>
+            </el-col>
+            <el-col :span="18"><span style="margin-left: 10px;">取值范围 1 - 9</span></el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item label="循环次数" prop="repeatTimes">
+          <el-row :gutter="0">
+            <el-col :span="6">
+              <el-input-number v-model="dataForm.repeatTimes" :min="1" :max="16"></el-input-number>
+            </el-col>
+            <el-col :span="18"><span style="margin-left: 10px;">取值范围 1 - 16</span></el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item label="紧急度" prop="priority">
+          <el-row :gutter="0">
+            <el-col :span="6">
+              <el-select v-model="dataForm.priority" placeholder="请选择">
+                <el-option v-for="(item,key) in broadcastPriority" :key="key" :label="item" :value="key">
+                </el-option>
+              </el-select>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item label="详细内容" prop="content">
+          <el-input type="textarea" :rows="6" placeholder="详细内容" v-model="dataForm.content"></el-input>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button style="background-color: #0e708b; color: #fff" @click="onClose">取消</el-button>
+      <el-button @click="onSubmit('dataForm')" v-loading="loading"
+        style="background-color: #10aac2; color: #fff">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import {
+  addTemplate,
+  editTemplate
+} from "@/api/broadcast/template";
+import { checkBoardContent } from "@/api/board/board";
+import { broadcastPriority } from "@screen/utils/enum.js";
+export default {
+  data() {
+    return {
+      broadcastPriority,
+      dialogVisible: false,
+      dataForm: {
+        content: ""
+      },
+      dataRule: {
+        category: [
+          {
+            required: true,
+            message: "请选择类别",
+            trigger: "blur",
+          },
+        ],
+        content: [
+          {
+            required: true,
+            message: "请输入详细内容",
+            trigger: "blur",
+          },
+        ]
+      },
+      screenSizeOptions: [],
+      colorList: [],
+      isCurrencyOptions: [
+        {
+          code: "0",
+          content: "通用",
+        },
+        {
+          code: "1",
+          content: "仅为智能推荐模板",
+        },
+      ],
+      inScreenModeList: [],
+      fontSizeList: [],
+      title: "选择图片",
+      loading: false,
+      isAdd: false,
+      templateCategoryList: [],
+      infoType: "",
+      devicePixelBoolean: false,
+      categoryRules: false,
+      dataDefault: {
+        category:"",
+        content:"",
+        outVol:6,
+        repeatTimes:3,
+        priority:"1"
+      },
+      isLocked: false,
+    };
+  },
+  props: {
+    mode: {
+      //add edit
+      type: String,
+      default: "",
+    },
+    type: {
+      //template board
+      type: String,
+      default: "",
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    tpl: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  components: {
+  },
+  computed: {
+    calcTitle() {
+      let str = "";
+      if (this.mode == "toDevice") {
+        str = `从模板添加待下发信息`;
+      } else {
+        str = `${this.mode == "add" ? "新增" : "编辑"}${
+          this.type == "template" ? "广播模板" : "待下发信息"
+        }`;
+      }
+      return str;
+    },
+  },
+  watch: {
+    visible: {
+      handler(newV) {
+        this.dialogVisible = newV;
+        if (this.$refs.dataForm) {
+          this.$refs.dataForm.clearValidate();
+        }
+        // if(newV){
+        //   this.initData();
+        // }
+      },
+      immediate: true,
+    },
+    dialogVisible(newV) {
+      this.$emit("update:visible", newV);
+    },
+    tpl: {
+      handler(newV) {
+        // { "id": 3, "category": "0", "content": "保持车距，控制车速", "screenSize": "768*64", "fontColor": "FFFF00", "fontSize": "64", "fontType": "2", "fontSpacing": "0", "rollingSpeed": null, "stopTime": "50", "inScreenMode": "1", "formatStyle": "2", "remark": null, "createTime": "2024-01-06 10:40:19", "updateTime": "2024-01-06 11:04:53" }
+
+        if (newV && Object.keys(newV).length > 0) {
+          //防止关闭对话框时触发
+          this.initData();
+        }
+      },
+      deep: true,
+    },
+    mode: {
+      handler(newV) {
+        this.initData();
+      },
+    },
+    type: {
+      handler(newV) {
+        this.initData();
+      },
+    },
+  },
+  mounted() {},
+  created() {
+    this.getDicts("iot_template_category").then((res) => {
+      this.templateCategoryList = res.data;
+      this.dataDefault.category = this.templateCategoryList[0].dictValue
+    });
+  },
+  methods: {
+    initData() {
+      if (this.isLocked) {
+        return;
+      }
+      this.isLocked = true;
+      setTimeout(() => {
+        this.isLocked = false;
+      }, 100);
+
+      if (this.mode == "edit" || this.mode == "toDevice"){
+        this.dataForm = {
+          outVol: +this.tpl.outVol,
+          repeatTimes: +this.tpl.repeatTimes,
+          category: this.tpl.category,
+          priority: this.tpl.priority,
+          content: this.tpl.content,
+          id : this.tpl.id
+        };
+      }else if(this.mode == "add"){
+        this.dataForm = {
+          ...this.dataDefault,
+          // outVol: 6,
+          // repeatTimes: 3,
+          // priority: 3
+        }
+      }
+
+      if (this.visible == false && this.mode == "toDevice") {
+        this.____doSubmit();
+      }
+    },
+    onClose() {
+      this.dialogVisible = false;
+    },
+    // 表单提交
+    async onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+            this.____doSubmit();
+        } else {
+          console.log('格式不正确!!');
+          return false;
+        }
+      });
+    },
+    ____doSubmit(){
+
+      // if (this.type == "template" && this.dataForm.category == undefined) {
+      //   return this.$modal.msgError("请选择分类！");
+      // }
+
+      // if (!this.dataForm.content.trim()) {
+      //   return this.$modal.msgError("当前输入内容为空");
+      // }
+      // if (this.dataForm.content.indexOf("\\") >= 0) {
+      //   return this.$modal.msgError("内容不能含有特殊字符'\\\\'");
+      // }
+
+      let ctt = this.dataForm.content;
+      checkBoardContent(ctt).then((res) => {
+        if (res.code == 200) {
+          doNext();
+        } else {
+          this.$message({
+            type: "danger",
+            message: res.msg,
+          });
+          return;
+        }
+      });
+      let doNext = () => {
+        console.log(this.dataForm , "this.dataForm++++")
+        let data = {
+          outVol: ''+this.dataForm.outVol,
+          repeatTimes: ''+this.dataForm.repeatTimes,
+          category: ''+this.dataForm.category,
+          priority: this.dataForm.priority,
+          content: this.dataForm.content,
+          id: this.dataForm.id
+        }
+        this.loading = true;
+        // let templateId = "";
+
+        if (this.type == "template") {
+          if (this.mode == "edit") {
+            editTemplate(data).then((res) => {
+              afterSave("修改");
+            });
+          } else if (this.mode == "toDevice") {
+            this.loading = false;
+            this.$emit("afterSubmit", {
+              type: this.type,
+              mode: this.mode,
+              data: data,
+            });
+          } else {
+            addTemplate(data).then((res) => {
+              afterSave("新增");
+            });
+          }
+        } else {
+          this.loading = false;
+          // this.dialogVisible = false
+          this.$emit("afterSubmit", {
+            type: this.type,
+            mode: this.mode,
+            data: data,
+          });
+        }
+
+        const afterSave = (para) => {
+          this.$message.success(para + "成功!");
+          this.loading = false;
+          // this.dialogVisible = false
+          this.$emit("afterSubmit", { type: this.type, mode: this.mode });
+        };
+      };
+
+    }
+  },
+};
+</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/mixins/broadcast.js b/ruoyi-ui/src/views/JiHeExpressway/mixins/broadcast.js
new file mode 100644
index 00000000..fa3aaacc
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/mixins/broadcast.js
@@ -0,0 +1,144 @@
+import { publishToBoard, saveBoardReleaseLog } from "@/api/broadcast/broadcast";
+import moment from "moment/moment";
+import store from "@/store";
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    // 新增待下发
+    ____onAddDeviceItem() {
+
+      this.editDialog = {
+        visible: true,
+        mode: "add",
+        type: "device",
+        tpl: {
+          content:""
+        },
+      };
+    },
+    // 从模板新增待下发
+    ____onTplToDevice(item, showDialog) {
+      // if(this.checkedDeviceIds.length<=0){
+      //   this.$message.warning('未选择设备!');
+      //   return;
+      // }
+
+      if (this.selectedBdMsg.length >= 1){
+        this.$message({
+          type: "warning",
+          message: "只能发布一条语音广播!",
+        });
+        return;
+      }
+
+      this.editDialog = {
+        visible: showDialog == false ? false : true,
+        mode: "toDevice",
+        type: "template",
+        tpl: item,
+      };
+    },
+    // 发布信息
+      ____publishInfo() {
+        let deviceList = [];
+        if (this.selectedDevice){
+          deviceList = [item.otherConfig];
+        }
+        else{
+          this.selectedDevices.forEach(item=>{
+            deviceList.push(item.otherConfig);
+          })
+        }
+      this.$confirm("是否确定发布语音广播?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          let loading = this.$loading({
+            lock: true,
+            text: "Loading",
+            spinner: "el-icon-loading",
+            background: "rgba(0, 0, 0, 0.7)",
+          });
+
+          // let content = [];
+
+          let data = {
+              functionType : "startPaTts",
+              name : "task-3",
+              // outVol : "6",
+              outVol: this.selectedBdMsg[0].outVol,
+              // priority : "1",
+              priority: this.selectedBdMsg[0].priority,
+              repeatTimes: this.selectedBdMsg[0].repeatTimes,
+              // termList : [{ zoneld: "6001", termDN: "601" }, { zoneld: "6001", termDN: "608" }, { zoneld: "6001", termDN: "610" }],
+              termList: deviceList,
+              text: this.selectedBdMsg[0].content
+          }
+
+          if (IS_TESTING) {
+            // this.saveLog(content);
+            this.____getDeviceInfo();
+            loading.close();
+          } else {
+            publishToBoard(data)
+              .then((res) => {
+                // this.saveLog(content);
+                this.$message({
+                  type: "success",
+                  message: "发布成功!",
+                });
+                // !isMultiControl && this.____getDeviceInfo();
+              })
+              .catch((err) => {})
+              .finally(() => {
+                loading.close();
+              });
+          }
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "取消发布",
+          });
+        });
+    },
+    //
+    saveLog(content) {
+      let time = moment().format("YYYY-MM-DD HH:mm:ss");
+      let device = this.selectedDevices;
+      let data = {
+        createBy: store.getters.name,
+        createTime: time,
+        deviceId: device.id,
+        deviceName: device.deviceName,
+        direction: device.direction,
+        params: {},
+        platform: "",
+        releaseContent: JSON.stringify(content),
+        releaseDeptId: "",
+        releaseDeptName: "",
+        releaseIp: "",
+        releaseStatus: "",
+        releaseTime: time,
+        releaseUserId: "",
+        releaseUserName: "",
+        remark: "",
+        searchValue: "",
+        stakeMark: device.stakeMark,
+        updateBy: "",
+        updateTime: time,
+      };
+      saveBoardReleaseLog(data).then((res) => {
+        if (res.code == 200) {
+          console.log("情报板日志已保存:::", data);
+        } else {
+          console.log("情报板日志保存失败！");
+        }
+      });
+    },
+  },
+};
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue
index fea8dc43..5d115634 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrameControl/index.vue
@@ -33,8 +33,8 @@
             <Button style="background-color: rgba(0, 179, 204, 0.3)" @click.native="cancelClick"> 取消 </Button>
           </div>
         </div>
-        <div v-if="tabAction === '2'" style="width:70vw;height: 500px; overflow-y:auto" class="cardPanel">
-          <Empty v-if="!data.length" class="no-data" style="position: absolute">暂无数据</Empty>
+        <div v-if="tabAction === '2'" style="width:70vw; height: 500px; overflow-y:auto" class="cardPanel">
+          <Empty v-if="!data2.length" class="no-data" style="position: absolute">暂无数据</Empty>
           <template v-else>
             <div class="cardBox" v-for="(item, index) in data2" :key="index">
               <Card :buttonIcon="null" :keyMap="keyMap" :cardData="item" class="card" buttonText="详情">
@@ -331,7 +331,6 @@ export default {
       DeviceTopics,
       componentMap,
       tabAction: "1",
-      data:[],
       keyMap: [
         {
           key: "groupName",
@@ -563,6 +562,7 @@ div.el-popper.global-input-search-popover {
 .cardPanel{
   display: flex;
   flex-wrap: wrap;
+  align-content: flex-start;
 }
 .cardBox {
   flex-basis: percentage(1/4);
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/addinfo copy.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/addinfo copy.vue
new file mode 100644
index 00000000..ea25a129
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/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/broadcast/editInfo.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/editInfo.vue
new file mode 100644
index 00000000..9c2f25bc
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/editInfo.vue
@@ -0,0 +1,963 @@
+<template>
+  <div class="container infoBoardDialog">
+    <!-- 添加信息弹窗 -->
+    <el-dialog title="修改" :visible.sync="dialogVisible" width="43%" :before-close="closeDialog" :close-on-click-modal="false">
+      <div class="dialogStyleBox">
+        <div class="dialogLine"></div>
+        <div class="dialogCloseButton"></div>
+      </div>
+      <el-card class="box-card" style="display: flex;justify-content: center;">
+        <div class="blackBoard1" v-on:ondragenter="ondragenter" v-on:drop="faceDrop" v-on:dragover="allowDrop" :style="{
+            width: getDevicePixel(boardWidth, 0),
+            height: getDevicePixel(boardHeight, 1),
+            position: 'relative',
+
+            display:'flex',
+            'align-items': getTextAlign(dataForm.formatStyle),
+            'justify-content': getTextAlign(dataForm.formatStyle)
+          }">
+          <span class="textBoard1 boardTextStyle" :style="{
+              color: getColorStyle(dataForm.COLOR),
+              fontSize: getFontSize(dataForm.FONT_SIZE),
+              fontFamily: getFontStyle(dataForm.FONT),
+              zIndex: '1000',
+              position:'relative',
+              /*left: getCoordinate(dataForm.COORDINATE.substring(0, 3), 0),
+              top: getCoordinate(dataForm.COORDINATE.substring(3, 6), 1),*/
+              maxHeight:getDevicePixel(boardHeight, 1),
+            }" v-html="
+              dataForm.CONTENT.replace(/\n|\r\n/g, '<br>').replace(
+                / /g,
+                '&nbsp'
+              )
+            "></span>
+        </div>
+      </el-card>
+
+      <el-card>
+        <el-form :model="dataForm" :rules="dataRule" label-width="90px" ref="dataForm" size="mini">
+          <el-row :gutter="24" style="height: 45px">
+            <el-col :span="8" v-show="this.boardEmitItem.type == 2 || this.dataForm.category">
+              <el-form-item prop="category" label="所属类别">
+                <el-select v-model="dataForm.category" placeholder="请选择所属类别" size="mini" disabled>
+                  <el-option v-for="item in iotTemplateCategoryList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="16" class="infoBoardButton">
+              <el-radio-group v-model="radio1" @input="alignment(radio1)">
+                <el-radio-button :label="0">左对齐</el-radio-button>
+                <el-radio-button :label="2">左右居中</el-radio-button>
+                <el-radio-button :label="1">右对齐</el-radio-button>
+              </el-radio-group>
+              <!-- <el-button type="info" plain @click="alignment(6)" size="mini">下对齐</el-button>
+            <el-button type="info" plain @click="alignment(5)" size="mini">上下居中</el-button>
+            <el-button type="info" plain @click="alignment(4)" size="mini">上对齐</el-button> -->
+              <!-- <el-button type="primary" @click="alignment(1)" size="mini"
+                >左对齐</el-button
+              >
+              <el-button type="primary" @click="alignment(2)" size="mini"
+                >左右居中</el-button
+              >
+              <el-button type="primary" @click="alignment(3)" size="mini"
+                >右对齐</el-button
+              > -->
+
+              <!-- <el-button type="primary" plain @click="addCurrRow">添加</el-button> -->
+            </el-col>
+          </el-row>
+          <el-row :gutter="24" style="display: flex;
+    flex-wrap: wrap;width:100%">
+            <el-col :span="24">
+              <el-form-item label="详细内容" prop="CONTENT">
+                <el-input type="textarea" clearable id="textContent" placeholder="详细内容" v-model="dataForm.CONTENT" @keyup.native="keyDown($event)"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="COLOR" label="字体颜色">
+                <el-select v-model="dataForm.COLOR" filterable placeholder="请选择">
+                  <el-option v-for="item in colorOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="FONT_SIZE" label="字体大小">
+                <el-select v-model="dataForm.FONT_SIZE" style="width: 100%" @change="changeFontSize">
+                  <el-option v-for="item in fontSizeOpt" :key="item.dictLabel" :label="item.dictLabel" :value="item.dictLabel">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="FONT" label="字体类型">
+                <el-select v-model="dataForm.FONT" filterable placeholder="请选择">
+                  <el-option v-for="item in fontTypeOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <!-- <el-col :span="6">
+                <el-form-item prop="SPEED" label="字体间距">
+                  <el-input-number
+                    :min="0"
+                    controls-position="right"
+                    v-model="dataForm.SPEED"
+                    style="width: 100%"
+                  />
+                </el-form-item>
+              </el-col> -->
+            <!-- <el-col :span="24" v-show="templateContent.length > 1">
+                <el-divider></el-divider>
+              </el-col> -->
+
+            <!-- <el-col :span="6">
+                <el-form-item prop="rollSpeed" label="滚动速度">
+                  <el-input-number
+                    :min="0"
+                    controls-position="right"
+                    v-model="dataForm.rollSpeed"
+                    style="width: 100%"
+                  />
+                </el-form-item>
+              </el-col> -->
+            <el-col :span="8">
+              <el-form-item prop="STAY" label="停留时间(秒)">
+                <el-input-number :min="0" controls-position="right" v-model="dataForm.STAY" style="width: 100%" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="ACTION" label="入屏方式">
+                <el-select v-model="dataForm.ACTION" filterable placeholder="请选择">
+                  <el-option v-for="item in inScreenModeOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="screenSize" label="屏幕尺寸">
+                <el-input disabled v-model="dataForm.screenSize"></el-input>
+                <!-- <el-select
+                    @change="resolvingPowerType"
+                    v-model="dataForm.screenSize"
+                    filterable
+                    placeholder="请选择"
+                    disabled
+                  >
+                    <el-option
+                      v-for="item in screenSizeOptions"
+                      :key="item.type"
+                      :label="item.type"
+                      :value="item.type"
+                    >
+                    </el-option>
+                  </el-select> -->
+              </el-form-item>
+            </el-col>
+            <!-- <el-col :span="6">
+                <el-form-item prop="remark" label="备注">
+                  <el-input v-model="dataForm.remark" style="width: 100%" />
+                </el-form-item>
+              </el-col> -->
+          </el-row>
+        </el-form>
+      </el-card>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dataFormSubmitHandle()" v-loading="loading" class="submitButton" style="background-color: #10aac2;color:#fff;">确认
+        </el-button>
+        <el-button @click="closeDialog()" class="closeButton" style="background-color:#b5b5b6;color:#fff;">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+  <script>
+import {
+  // getTemplateInfo,
+  // addTemplate,
+  // addTemplateContent,
+  // editTemplateContent,
+  // editTemplate,
+  // deleteTemplate,
+  // getTemplateContent,
+  editTemplate,
+  editTemplateContent,
+  getGalleryList,
+  uploadBoardEditInfo,
+  getFontSizeByDevicePixel
+} from '@/api/board/template'
+import { checkIotBoardContent } from '@/api/board/vocabulary'
+import { HashMap } from '@/api/board/informationBoard'
+// 对象深拷贝
+export const deepClone = data => {
+  // 封装的判断数据类型的方法
+  var type = typeof data
+  var obj
+  if (type === 'array') {
+    obj = []
+  } else if (type === 'object') {
+    obj = {}
+  } else {
+    // 不再具有下一层次
+    return data
+  }
+  if (type === 'array') {
+    for (var i = 0, len = data.length; i < len; i++) {
+      obj.push(deepClone(data[i]))
+    }
+  } else if (type === 'object') {
+    for (var key in data) {
+      obj[key] = deepClone(data[key])
+    }
+  }
+  return obj
+}
+export default {
+  props: {
+    boardEmitItem: {
+      required: true,
+      type: Object
+    }
+  },
+
+  data() {
+    return {
+      radio1: '0',
+      alignmentNum: 2,
+      iotTemplateCategoryList: [],
+      content: '',
+
+      boardWidth: '',
+      boardHeight: '',
+      // boardEmitItem:this.boardEmitItem,
+      disabled: true,
+      checkList: [], //复选框一组
+      obj: '',
+      imgUrl: [],
+      imgUrlOther: [],
+      dialogVisible: false,
+      fileList: [
+        {
+          name: 'food.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        },
+        {
+          name: 'food2.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        }
+      ],
+      listquery: [], //拖拽图片
+      curDragImgItem: '',
+      visible: false,
+      startTxt_x: '000',
+      startTxt_y: '000',
+      width: '400',
+      height: '40',
+      content: '',
+      fontColor: 'FFFF00',
+      fontSize: '24',
+      fontType: 'KaiTi',
+      fontSpacing: 0,
+      coordinate: '000000',
+      url: '',
+      previewContent: '', //预览内容
+      ispreviewContent: -1,
+      dataForm: {
+        CONTENT: '',
+        STAY: '',
+        FONT: '',
+        COORDINATE: '',
+        formatStyle:'',
+
+        // id: "",
+        // screenSize: "400*40", //屏幕尺寸
+        // inScreenMode: "1", //入屏方式
+        // rollSpeed: "1000",
+        // stopTime: "500",
+        // applyType: "", //适用类型
+        // vmsType: "", //情报板类型
+        // remark: "", //备注
+        // imgSizeFrom: "", //尺寸大小
+        // imageUrl: "",
+        // height: "",
+        // width: "",
+        // coordinate: "", //起始点位置;前3位代表x点的位值，后3位代表y点的位置
+      },
+      templateContentModel: '',
+      templateContent: [],
+      templateDelContent: [],
+      fontTypeOptions: [],
+      screenSizeOptions: [
+        {
+          type: '400*40'
+        },
+        {
+          type: '128*64'
+        }
+      ],
+      colorOptions: [],
+      isCurrencyOptions: [
+        {
+          code: '0',
+          content: '通用'
+        },
+        {
+          code: '1',
+          content: '仅为智能推荐模板'
+        }
+      ],
+      inScreenModeOptions: [],
+      imgSize: [
+        {
+          type: '1024*128',
+          name: '全屏'
+        },
+        {
+          type: '',
+          name: '正常'
+        }
+      ],
+      fontSizeOpt: [],
+      title: '选择图片',
+      loading: false,
+      isAdd: false
+    }
+  },
+  //   directives: {
+  //     drag: function (el, binding, vnode) {
+  //       let that = vnode.context;
+  //       let dragBox = el;
+  //       dragBox.onmousedown = (e) => {
+  //         // that.startTxt_x = dragBox.style.left.substring (0, dragBox.style.left.length - 2)
+  //         // that.startTxt_y = dragBox.style.left.substring (0, dragBox.style.top.length - 2)
+  //         let disX = e.clientX - dragBox.offsetLeft;
+  //         let disY = e.clientY - dragBox.offsetTop;
+  //         let clientHeight = dragBox.clientHeight;
+  //         let clientWidth = dragBox.clientWidth;
+  //         document.onmousemove = function (e) {
+  //           //鼠标移动触发事件，元素移到对应为位置
+  //           let left = e.pageX - disX;
+  //           let top = e.pageY - disY;
+  //           //限制区域
+  //           if (left <= 0) {
+  //             left = 0;
+  //           } else if (that.width - left - clientWidth <= 0) {
+  //             left = that.width - clientWidth;
+  //           }
+  //           if (top <= 0) {
+  //             top = 0;
+  //           } else if (that.height - top - clientHeight <= 0) {
+  //             top = that.height - clientHeight;
+  //           }
+  //           dragBox.style.left = left + "px";
+  //           dragBox.style.top = top + "px";
+  //           let a = (Array(3).join("0") + parseInt(left)).slice(-3);
+  //           let b = (Array(3).join("0") + parseInt(top)).slice(-3);
+  //           that.templateContent[dragBox.id].coordinate = a + b;
+  //         };
+  //         document.onmouseup = function () {
+  //           //鼠标抬起，清除绑定的事件，元素放置在对应的位置
+  //           document.onmousemove = null;
+  //           document.onmousedown = null;
+  //         };
+  //         e.preventDefault(); //阻止浏览器的默认事件
+  //       };
+  //     },
+  //   },
+  computed: {
+    dataRule() {
+      return {
+        itemPropertyMap: null,
+        CONTENT: [
+          {
+            required: true,
+            message: '请输入详细内容',
+            trigger: 'blur'
+          },
+          { pattern: /^^((?!\\\\).)*/gi, message: '禁止输入特殊字符!', trigger: 'blur' }
+        ],
+        fontColor: [
+          {
+            required: true,
+            message: '请填写字体颜色',
+            trigger: 'blur'
+          }
+        ],
+        fontSize: [
+          {
+            required: true,
+            message: '请填写字体大小',
+            trigger: 'blur'
+          }
+        ],
+        fontType: [
+          {
+            required: true,
+            message: '请选择字体类型',
+            trigger: 'blur'
+          }
+        ],
+        fontSpacing: [
+          {
+            required: true,
+            message: '请选择字体间距',
+            trigger: 'blur'
+          }
+        ],
+        rollSpeed: [
+          {
+            required: true,
+            message: '请填写滚动速度',
+            trigger: 'blur'
+          }
+        ],
+        stopTime: [
+          {
+            required: true,
+            message: '请填写停留时间',
+            trigger: 'blur'
+          }
+        ],
+        inScreenMode: [
+          {
+            required: true,
+            message: '请选择入屏方式',
+            trigger: 'blur'
+          }
+        ]
+      }
+    },
+    divStyle: function () {
+      return {
+        width: this.width + 'px',
+        height: this.height + 'px'
+      }
+    }
+  },
+  watch: {
+    //   boardEmitItem(newval){
+    //       console.log(newval,"newval")
+    //       this.boardEmitItem = newval
+    //   }
+    // "dataForm.CONTENT": {
+    //   deep: true,
+    //   handler: function (newValue, oldValue) {
+    //     this.dataForm.content1 = newValue;
+    //   },
+    // },
+  },
+  created() {
+    console.log(this.boardEmitItem, 'this.boardEmitItem')
+    this.getDicts('iot_template_category').then(res => {
+      this.iotTemplateCategoryList = res.data
+      console.log(this.iotTemplateCategoryList, 'this.iotTemplateCategoryList')
+    })
+    this.getDicts('iot_device_font_type').then(res => {
+      this.fontTypeOptions = res.data
+      console.log(this.fontTypeOptions, '字体类型')
+    })
+    this.getDicts('iot_devices_font_color').then(res => {
+      this.colorOptions = res.data
+      console.log(this.colorOptions, '字体颜色')
+    })
+    // this.getDicts("iot_device_font_size").then((res) => {
+    //   this.fontSizeOpt = res.data;
+    //   console.log(this.fontSizeOpt, "字体大小");
+    // });
+    this.getDicts('iot_device_font_inScreen_mode').then(res => {
+      this.inScreenModeOptions = res.data
+      console.log(this.inScreenModeOptions, '入屏方式')
+    })
+    if (this.boardEmitItem) {
+      this.boardWidth = this.boardEmitItem.screenSize.split('*')[0]
+      this.boardHeight = this.boardEmitItem.screenSize.split('*')[1]
+      this.radio1 = this.boardEmitItem.formatStyle
+      this.init()
+    }
+  },
+  methods: {
+    init() {
+      this.title = '修改'
+
+      this.dialogVisible = true
+      this.itemPropertyMap = new HashMap()
+      this.alignmentNum = 2
+      this.dataForm = JSON.parse(JSON.stringify(this.boardEmitItem))
+      this.dataForm.COLOR = this.getColorValue(this.boardEmitItem.COLOR)
+      console.log(this.dataForm, 'this.dataForm')
+      // console.log('数据回显111111111', this.boardEmitItem)
+      // this.dataForm.FONT = this.getFont(this.boardEmitItem.FONT)
+      this.dataForm.CONTENT = JSON.parse(JSON.stringify(this.boardEmitItem.CONTENT.replace('<br>', '\n').replace(/ /g, ' ').replace('<r><n>', '\n')))
+      this.dataForm.STAY = JSON.parse(JSON.stringify(Number(this.boardEmitItem.STAY) / 10))
+      this.getFontSizeList()
+    },
+    getColorValue(color) {
+      if (color == '#00FF00') {
+        return '绿色'
+      } else {
+        return color
+      }
+    },
+    getFontSizeList() {
+      this.getDicts('iot_device_font_size').then(res => {
+        this.fontSizeOpt = res.data
+      })
+
+      /* getFontSizeByDevicePixel(this.dataForm.screenSize).then((res) => {
+        console.log(res, "根据分辨率筛字体大小");
+        this.fontSizeOpt = res.data.fontSizeList;
+      });*/
+    },
+    changeFontSize() {
+      setTimeout(() => {
+        this.alignment(this.alignmentNum)
+      }, 100)
+    },
+    alignment(alignmentNum) {
+      var divContent1 = document.getElementsByClassName('blackBoard1')
+      var textBoard1 = document.getElementsByClassName('textBoard1')
+
+      switch (alignmentNum) {
+        // 左对齐
+        case 0:
+          textBoard1[0].style.position = 'static'
+          divContent1[0].style.justifyContent = 'left'
+          divContent1[0].style.alignItems = 'center'
+          break
+        // 左右居中
+        case 2:
+          textBoard1[0].style.position = 'static'
+          divContent1[0].style.justifyContent = 'center'
+          divContent1[0].style.alignItems = 'center'
+          break
+        // 右对齐
+        case 1:
+          divContent1[0].style.justifyContent = 'right'
+          divContent1[0].style.alignItems = 'center'
+          textBoard1[0].style.position = 'static'
+          break
+        // 上对齐
+        case 4:
+          divContent1[0].style.alignItems = 'flex-start'
+          textBoard1[0].style.position = 'static'
+
+          break
+        // 上下对齐
+        case 5:
+          divContent1[0].style.alignItems = 'center'
+          textBoard1[0].style.position = 'static'
+
+          break
+        // 下对齐
+        case 6:
+          divContent1[0].style.alignItems = 'flex-end'
+          textBoard1[0].style.position = 'static'
+
+          break
+      }
+
+      var textLeft = this.addZero(JSON.parse(JSON.stringify(textBoard1[0].offsetLeft)))
+      var textTop = this.addZero(textBoard1[0].offsetTop)
+
+      this.dataForm.COORDINATE = textLeft + textTop
+      this.dataForm.formatStyle = alignmentNum
+    },
+    addZero(num) {
+      if (num < 0) {
+        return '000'
+      } else {
+        return ('000' + num).slice(-3)
+      }
+    },
+    faceDrop(e) {
+      e.preventDefault() //阻止默认行为
+      this.listquery.push(this.curDragImgItem)
+    },
+    /* 拆分分辨率大小 */
+    // resolvingPowerType(data) {
+    //   let a = [];
+    //   a = data.split("*");
+    //   this.width = a[0];
+    //   this.height = a[1];
+    // },
+    // 全选
+    allowDrop(e) {
+      e.preventDefault() //阻止默认行为
+    },
+    ondragenter(e) {
+      e.preventDefault() //阻止默认行为
+    },
+    keyDown(ev) {
+      this.alignment(this.alignmentNum)
+    },
+    // 表单确认
+    dataFormSubmitHandle() {
+      console.log(this.dataForm.type, 'this.dataForm.type')
+      if (!this.dataForm.CONTENT.trim()) {
+        return this.$modal.msgError('当前输入内容为空')
+      }
+
+      if (this.dataForm.CONTENT.indexOf('\\') > 0) {
+        return this.$modal.msgError("内容不能含有特殊字符'\\'")
+      }
+      this.loading = true
+      console.log(this.dataForm, '点击修改 表单')
+
+      this.loading = false
+      this.isAdd = false
+      if (this.dataForm.type == 1) {
+        this.dataForm.STAY = Number(this.dataForm.STAY) * 10
+        this.$emit('receiveForm', this.dataForm)
+        console.log(this.dataForm, 'this.dataForm修改后给父组件传表单内容')
+      } else {
+        const tcontent = {
+          content: this.dataForm.CONTENT,
+          text: this.dataForm.CONTENT,
+          coordinate: this.dataForm.COORDINATE,
+          createBy: null,
+          createTime: null,
+          fontColor: this.dataForm.COLOR,
+          fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
+          fontSpacing: this.dataForm.SPEED,
+          fontType: this.dataForm.FONT,
+          height: null,
+          id: this.dataForm.id,
+          imageUrl: null,
+          params: {},
+          remark: null,
+          searchValue: null,
+          templateId: this.dataForm.id,
+          updateBy: null,
+          updateTime: null,
+          width: null
+        }
+        const param = {
+          applyType: '',
+          category: this.dataForm.category,
+          createBy: null,
+          createTime: null,
+          dictLable: null,
+          id: this.dataForm.id,
+          inScreenMode: this.dataForm.ACTION,
+          isCurrency: null,
+          params: {},
+          remark: '',
+          screenSize: this.dataForm.screenSize,
+          searchValue: null,
+          stopTime: Number(this.dataForm.STAY) * 10,
+          tcontents: null,
+          templateType: null,
+          updateBy: null,
+          updateTime: null,
+          vmsType: '',
+          tcontent: tcontent,
+          templateId: this.dataForm.id
+        }
+        editTemplate(param).then(data => {})
+        let templateContent = []
+        templateContent.push({
+          content: this.dataForm.CONTENT,
+          fontColor: this.dataForm.COLOR,
+          fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
+          fontType: this.dataForm.FONT,
+          fontSpacing: this.dataForm.SPEED,
+          coordinate: this.dataForm.COORDINATE,
+          id: this.dataForm.tcontentsId,
+          templateId: this.dataForm.id,
+          formatStyle: this.dataForm.formatStyle
+        })
+
+        var params = {
+          templateContent: templateContent,
+          templateId: this.dataForm.id,
+          templateDelContent: []
+        }
+        console.log(params, 'params')
+        editTemplateContent(params).then(response => {
+          console.log(response, '返回结果')
+          this.$modal.msgSuccess('修改成功')
+        })
+        this.$forceUpdate()
+      }
+      this.closeDialog()
+
+      /*checkIotBoardContent(this.dataForm.CONTENT).then(response => {
+        if (response.data == 0) {
+          return this.$modal.msgError('当前发布内容包含敏感字段，请修改')
+        } else if (response.data == 2) {
+          return this.$modal.msgError('当前输入内容为空')
+        } else {
+          this.loading = true
+          console.log(this.dataForm, '点击修改 表单')
+
+          this.loading = false
+          this.isAdd = false
+          if (this.dataForm.type == 1) {
+            this.dataForm.STAY = Number(this.dataForm.STAY) * 10
+            this.$emit('receiveForm', this.dataForm)
+            console.log(this.dataForm, 'this.dataForm修改后给父组件传表单内容')
+          } else {
+            const tcontent = {
+              content: this.dataForm.CONTENT,
+              text: this.dataForm.CONTENT,
+              coordinate: this.dataForm.COORDINATE,
+              createBy: null,
+              createTime: null,
+              fontColor: this.dataForm.COLOR,
+              fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
+              fontSpacing: this.dataForm.SPEED,
+              fontType: this.dataForm.FONT,
+              height: null,
+              id: this.dataForm.id,
+              imageUrl: null,
+              params: {},
+              remark: null,
+              searchValue: null,
+              templateId: this.dataForm.id,
+              updateBy: null,
+              updateTime: null,
+              width: null
+            }
+            const param = {
+              applyType: '',
+              category: this.dataForm.category,
+              createBy: null,
+              createTime: null,
+              dictLable: null,
+              id: this.dataForm.id,
+              inScreenMode: this.dataForm.ACTION,
+              isCurrency: null,
+              params: {},
+              remark: '',
+              screenSize: this.dataForm.screenSize,
+              searchValue: null,
+              stopTime: Number(this.dataForm.STAY) * 10,
+              tcontents: null,
+              templateType: null,
+              updateBy: null,
+              updateTime: null,
+              vmsType: '',
+              tcontent: tcontent,
+              templateId: this.dataForm.id
+            }
+            editTemplate(param).then(data => {})
+            let templateContent = []
+            templateContent.push({
+              content: this.dataForm.CONTENT,
+              fontColor: this.dataForm.COLOR,
+              fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
+              fontType: this.dataForm.FONT,
+              fontSpacing: this.dataForm.SPEED,
+              coordinate: this.dataForm.COORDINATE,
+              id: this.dataForm.tcontentsId,
+              templateId: this.dataForm.id
+            })
+
+            var params = {
+              templateContent: templateContent,
+              templateId: this.dataForm.id,
+              templateDelContent: []
+            }
+            console.log(params, 'params')
+            editTemplateContent(params).then(response => {
+              console.log(response, '返回结果')
+              this.$modal.msgSuccess('修改成功')
+            })
+            this.$forceUpdate()
+          }
+          this.closeDialog()
+        }
+      })*/
+    },
+    getFontStyle(font) {
+      if (font == '宋体' || font == '3') {
+        return 'Simsun'
+      } else if (font == '黑体' || font == '1') {
+        return 'SimHei'
+      } else if (font == '楷体' || font == '2') {
+        return 'KaiTi'
+      } else if (font == '仿宋' || font == '4') {
+        return 'FangSong'
+      } else if (font == '隶书' || font == '5') {
+        return 'LiSu'
+      }
+    },
+    getColorStyle(font) {
+      if (font == '黄色' || font == 'yellow') {
+        return '#FFFF00'
+      } else if (font == '红色' || font == 'red') {
+        return '#FF0000'
+      } else if (font == '绿色' || font == 'GreenYellow') {
+        return '#00FF00'
+      } else if (font == '蓝色' || font == 'blue') {
+        return '#0000FF'
+      } else {
+        return '#' + font
+      }
+    },
+    closeDialog() {
+      this.dialogVisible = false
+      this.$emit('dialogClose')
+    },
+    getDevicePixel(devicePixel, num) {
+      if (num == 0) {
+        if (devicePixel > 768) {
+          return 768 + 'px'
+        } else {
+          return devicePixel + 'px'
+        }
+      } else if (num == 1) {
+        if (devicePixel > 160) {
+          return 160 + 'px'
+        } else {
+          return devicePixel + 'px'
+        }
+      }
+    },
+    getCoordinate(coordinate, num) {
+      if (num == 0) {
+        if (this.boardWidth > 768) {
+          let i = this.boardWidth / 768
+          console.log(coordinate / i, 'width')
+          return coordinate / i + 'px'
+        } else {
+          return coordinate + 'px'
+        }
+      } else if (num == 1) {
+        if (this.boardHeight > 128) {
+          let i = this.boardHeight / 128
+          console.log(coordinate / i, 'height')
+          return coordinate / i + 'px'
+        } else {
+          return coordinate + 'px'
+        }
+      }
+    },
+
+    getTextAlign(font) {
+      if (font == '0') {
+        return 'left'
+      } else if (font == '1') {
+        return 'right'
+      } else {
+        return 'center'
+      }
+    },
+    getFontSize(size) {
+      if (this.boardWidth > 768) {
+        let i = this.boardWidth / 768
+        return size.substring(0, 2) / i - 2 + 'px'
+      } else {
+        return size
+      }
+    }
+  }
+}
+</script>
+  <style lang="scss" scoped>
+.previewContentCSS {
+  border: yellow 1px dashed;
+}
+/* 页脚 */
+.dialog-footer {
+  padding-left: 450px;
+}
+.photoOther img,
+.photo img {
+  max-width: 300px;
+  width: 100%;
+  // height: 80px;
+}
+.infoBoardButton {
+  ::v-deep .el-radio-button--medium .el-radio-button__inner {
+    height: 3vh;
+    line-height: 3vh;
+    padding: 0 0.6vw;
+    font-size: 0.7vw;
+  }
+}
+::v-deep .el-card__body {
+  padding: 10px 0;
+}
+.boardTextStyle {
+  line-height: 1;
+  caret-color: rgba(0, 0, 0, 0);
+  user-select: none;
+  position: absolute;
+  // max-height: 128px;
+  overflow: hidden;
+}
+.blackBoard1 {
+  background: #000000;
+  /*display: flex;
+  margin: 0 auto;
+  overflow: hidden;
+  position: relative;
+  // text-align: center;
+  align-items: center;*/
+}
+//
+::v-deep .el-dialog__header {
+  background-color: #145977;
+}
+::v-deep .el-dialog__body {
+  padding: 5px 20px;
+  background-color: #145977;
+}
+::v-deep .el-dialog__footer {
+  background-color: #145977;
+}
+::v-deep .el-card {
+  margin-top: 1vh;
+  background-color: #145977;
+  border: 2px solid #1d7890;
+}
+::v-deep .el-form-item__label {
+  color: #3de8ff;
+}
+::v-deep .el-input--mini .el-input__inner {
+  color: #fff;
+  background-color: #096d8c;
+}
+::v-deep .el-input-number.is-controls-right .el-input-number__decrease {
+  color: #fff;
+  background-color: #096d8c;
+}
+::v-deep .el-dialog__title {
+  color: #fff;
+}
+::v-deep .el-textarea__inner {
+  color: #fff;
+  background-color: #096d8c;
+  border-color: #096d8c;
+}
+::v-deep .el-input-number.is-controls-right .el-input-number__decrease {
+  border-color: transparent;
+}
+::v-deep .el-input-number.is-controls-right .el-input-number__increase {
+  border-color: transparent;
+  color: #fff;
+  background-color: #096d8c;
+}
+::v-deep .el-button--medium {
+  padding: 5px 25px;
+  font-size: 14px;
+  border-radius: 20px;
+  border: transparent;
+}
+::v-deep .el-radio-button__inner {
+  color: #ffffff;
+  background-color: pink;
+  border-color: #1d58a9;
+  -webkit-box-shadow: -1px 0 0 0 #1d58a9;
+  box-shadow: -1px 0 0 0 #1d58a9;
+  background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
+  border-radius: 3px 3px 3px 3px;
+  opacity: 1;
+  border: none !important;
+}
+::v-deep .infoBoardButton .el-radio-button--medium .el-radio-button__inner {
+  margin: 0 3px;
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/index.vue
new file mode 100644
index 00000000..f9be0a3b
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/index.vue
@@ -0,0 +1,1174 @@
+<template>
+  <div class="infoBoardBox">
+    <div class="infoBoardCon">
+      <!-- ++++++++++设备列表++++++++++ -->
+      <div style="width: 20%" class="part partLeft">
+        <!-- <div class="partTitle boardListTitle"> -->
+        <!-- <img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt=""> -->
+        <!-- <div>情报板列表</div> -->
+        <!-- <img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt=""> -->
+        <!-- </div> -->
+        <WgtTitle :title="'广播设备列表'"></WgtTitle>
+        <el-form :model="form" class="formSearch" size="mini">
+          <!-- class="partCon" -->
+          <!-- style="display: flex; flex-direction: column" -->
+          <!-- ref="form" -->
+          <el-form-item>
+            <el-col :span="12">
+              <el-select v-model="form.selectedDirection" size="medium" placeholder="请选择方向" class="direction">
+                <el-option v-for="item in boardDirectionList" :key="item.dictValue" :label="item.dictLabel"
+                  :value="item.dictValue" />
+                <!-- @click.native="____changeDirection(item.dictValue)" -->
+              </el-select>
+            </el-col>
+            <el-col :span="11" :offset="1">
+              <el-checkbox-group v-model="form.status" style="height:26px">
+                <el-checkbox label="1">在线</el-checkbox>
+                <el-checkbox label="0">离线</el-checkbox>
+              </el-checkbox-group>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="开始桩号:">
+            <el-col :span="2" class="text-center tc-lb">K</el-col>
+            <el-col :span="7">
+              <el-input-number v-model="form.stakeFrom[0]" style="width: 100%;" :precision="0" :min="0"
+                :max="1000"></el-input-number>
+            </el-col>
+            <el-col :span="2" class="text-center tc-lb">+</el-col>
+            <el-col :span="7">
+              <el-input-number v-model="form.stakeFrom[1]" style="width: 100%;" :precision="0" :min="0"
+                :max="1000"></el-input-number>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="结束桩号:">
+            <el-col :span="2" class="text-center tc-lb">K</el-col>
+            <el-col :span="7">
+              <el-input-number v-model="form.stakeTo[0]" style="width: 100%;" :precision="0" :min="0"
+                :max="1000"></el-input-number>
+            </el-col>
+            <el-col :span="2" class="text-center tc-lb">+</el-col>
+            <el-col :span="7">
+              <el-input-number v-model="form.stakeTo[1]" style="width: 100%;" :precision="0" :min="0"
+                :max="1000"></el-input-number>
+            </el-col>
+          </el-form-item>
+          <el-form-item style="display: flex; justify-content: center;">
+            <el-button class="btnInfoBoard" type="add" @click.native="____onSearchDevice()">搜索</el-button>
+            <el-button type="publish" @click.native="____onResetSearchDevice()">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <div style="flex:1; height: 0; padding:0 10px 10px">
+          <vuescroll :ops="scrollOptions">
+            <template v-if="deviceList.length> 0">
+              <el-checkbox-group class="deviceList" v-model="checkedDeviceIds" @change="____onSelectDevices">
+                <el-checkbox v-for="(itm, index) in deviceList" :label="itm.iotDeviceId" :key="index"
+                  :disabled="!itm.iotDeviceId || itm.iotDeviceId.includes('null') || itm.deviceState == 0 || itm.deviceState == null">
+                  <el-tooltip content="设备未接入" placement="top"
+                    v-if="!itm.iotDeviceId || itm.iotDeviceId.includes('null_')">
+                    <div class="title">{{ itm.deviceName }}</div>
+                  </el-tooltip>
+                  <el-tooltip content="设备离线" placement="top"
+                    v-else-if="itm.deviceState == 0 || itm.deviceState == null">
+                    <div class="title">{{ itm.deviceName }}</div>
+                  </el-tooltip>
+                  <div v-else class="title">{{ itm.deviceName }}</div>
+                  <el-tooltip :content="(itm.deviceState == 0 || itm.deviceState == null) ? '离线' : '在线'"
+                    placement="top">
+                    <img src="@/assets/jihe/images/offline.svg" class="state"
+                      v-if="itm.deviceState == '0' || itm.deviceState == null">
+                    <img src="@/assets/jihe/images/online.svg" class="state" v-else>
+                  </el-tooltip>
+                  <!-- <el-tooltip content="回读" placement="top">
+                    <el-button class="el-icon-tickets huiduButton" @click.stop.prevent="____forkDeviceInfo(itm)"
+                      :disabled="submitButton"></el-button>
+                  </el-tooltip> -->
+                </el-checkbox>
+              </el-checkbox-group>
+            </template>
+            <div v-else style="color: #fff; text-align: center; line-height: 60px">
+              暂无数据
+            </div>
+
+          </vuescroll>
+        </div>
+      </div>
+      <!-- ++++++++++中间部分：单个设备++++++++++ -->
+      <div style="width: 37.8%" class="part partMiddle">
+        <WgtTitle title="待下发信息">
+          <div class="titleBtnBox">
+            <el-button class="btnInfoBoard" type="add" @click.native="____onAddDeviceItem()"
+              :disabled="selectedBdMsg.length>=1">添加信息</el-button>
+            <el-button class=" btnInfoBoard" type="publish" @click="____onPublish"
+              :disabled="selectedBdMsg.length <= 0 || selectedDevices.length <= 0">发布信息</el-button>
+          </div>
+        </WgtTitle>
+        <!-- <div class="partTitle partDeviceTempateTitle">
+          <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="selectedSize">【 {{ selectedSize }}】</span>
+            </div>
+            <img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt="">
+          </div>
+
+
+          <div class="controlBox">
+            <el-button class="btnInfoBoard" type="add" @click.native="____onAddDeviceItem()">添加信息</el-button>
+            <el-button class="btnInfoBoard" type="publish" @click="____onPublish" :disabled="selectedBdMsg.length <= 0">发布信息</el-button>
+          </div>
+        </div> -->
+        <div class="partCon">
+          <vuescroll :ops="scrollOptions" class="templateBox" v-if="selectedBdMsg.length > 0"
+            :class="{ hide: isHideCtt }">
+            <draggable tag="div" :list="selectedBdMsg" @end="____onDragend" ghostClass="ghost_class"
+              dragClass="drag_class" chosenClass="chosen_class">
+              <div v-for="(itm, indx) in selectedBdMsg" :key="indx" class="tplItem">
+                <!-- 模板内容 -->
+                <BroadcastTplShower class="boardPreview" :text="itm.content" />
+                <!-- 操作按钮 -->
+                <div class="infoBtnBox">
+                  <el-tooltip content="编辑" placement="top">
+                    <p @click="____onEditBoardItem(itm, indx)" class="btn btnEdit"></p>
+                  </el-tooltip>
+                  <el-tooltip content="删除" placement="top">
+                    <p @click="____onDeleteBoardItem(indx)" class="btn btnDelete"></p>
+                  </el-tooltip>
+                </div>
+              </div>
+            </draggable>
+          </vuescroll>
+          <Empty v-else text="请从设备回读或从模板添加信息..." style="padding-top: 100px"></Empty>
+        </div>
+      </div>
+      <!-- ++++++++++右边部分：信息模板++++++++++ -->
+      <div style="width: 42.2%" class="part partRight">
+        <!-- <div class="partTitle partDeviceTempateTitle">
+          <div>
+            <div style="display: flex;justify-content: start !important;align-items: center;">
+              <img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt="">
+              <div>信息模板<span v-if="selectedSize">【{{ selectedSize }}】</span></div>
+            </div>
+            <img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt="">
+          </div>
+          <div class="controlBox">
+            <el-button class="btnInfoBoard" type="add" @click="____onAddTemplate">添加模板</el-button>
+          </div>
+        </div> -->
+        <WgtTitle :title="`广播内容模板`">
+          <div class="titleBtnBox">
+            <el-button class="btnInfoBoard" type="add" @click="____onAddTemplate">添加模板</el-button>
+          </div>
+        </WgtTitle>
+        <div class="partCon">
+          <vuescroll :ops="scrollOptions" class="templateBox">
+
+            <div v-for="(item, index) in templateAvailable">
+              <!-- 原来是<el-collapse v-model="activeNames"> -->
+              <h3>{{ item.dictLabel }}</h3>
+              <div v-for="(itm, indx) in item.list" :key="indx" class="tplItem">
+                <!-- 模板内容 -->
+                <BroadcastTplShower class="boardPreview" :text="itm.content" />
+                <div class="infoBtnBox">
+                  <el-tooltip content="加入待下发信息" placement="top">
+                    <p @click="____onTplToDevice(itm, false)" class="btn btnApply">
+                    </p>
+                  </el-tooltip>
+                  <el-tooltip content="编辑" placement="top">
+                    <p @click="____onEditTemplate(itm)" class="btn btnEdit"></p>
+                  </el-tooltip>
+                  <el-tooltip content="删除" placement="top">
+                    <p @click="____onDeleteTemplate(itm)" class="btn btnDelete"></p>
+                  </el-tooltip>
+                </div>
+              </div>
+            </div>
+          </vuescroll>
+        </div>
+      </div>
+    </div>
+    <broadcastEditor @afterSubmit="____onEditSubmit" :mode="editDialog.mode" :type="editDialog.type"
+      :visible.sync="editDialog.visible" :tpl="editDialog.tpl"></broadcastEditor>
+    <!-- <editInfo :boardEmitItem="this.boardEmitItem" @receiveForm="receiveForm" v-if="this.showEmit" @dialogClose="dialogClose"></editInfo> -->
+  </div>
+</template>
+<script>
+import draggable from "vuedraggable";
+import Sortable from "sortablejs";
+import editInfo from "./editInfo";
+import {
+  getTemplateList,
+  addTemplate,
+  addTemplateContent,
+  deleteTemplate,
+} from "@/api/broadcast/template";
+import {
+  getDeviceRealtimeProperty,
+} from "@/api/device/device";
+import { getdeviceList, getBoardDeviceInfo } from "@/api/broadcast/broadcast";
+
+import BroadcastTplShower from "@screen/components/broadcast/BroadcastTplShower.vue";
+
+import broadcastEditor from "@screen/components/broadcast/broadcastEditor";
+
+import vuescroll from "vuescroll";
+import scrollOptions from "@/common/scrollbar.js";
+
+import testDeviceList from "@screen/testData/deviceList.js";
+import testDeviceInfo from "@screen/testData/infoBoard.js";
+
+import WgtTitle from "@screen/pages/perception/widgets/title";
+
+import broadcast from "@screen/mixins/broadcast";
+import { initSearch } from "@screen/utils/enum/common.js"
+
+export default {
+  name: "Device",
+  mixins: [broadcast],
+  components: {
+    draggable,
+    WgtTitle,
+    broadcastEditor,
+    editInfo,
+    BroadcastTplShower,
+    vuescroll,
+  },
+  dicts: ["iot_board_direction"],
+
+  data() {
+    return {
+      tplCategory: [], //模板
+      multiPublish: true,
+      toggleIndex: 0,
+      toRightCategory: "", //向右类别绑定
+      arrowRightVisible: false, //向右类别弹窗
+      loading: false,
+      submitButton: false, //回读禁用
+      selectedDevices: [],
+      boardDirectionList: [], //方向
+      userQueryParams: {
+        userName: this.$store.state.user.name,
+      }, //用户
+      selectedPixelMode: null, //分辨率
+      editType: 0,
+      showEmit: false, //修改组件
+      index_: 0, //待下发 编辑项index
+      index: 0, //模板 编辑项 index
+      deviceId: "", //情报板id
+      boardEmitItem: null, //修改彈窗的數據
+      userDeptId: "", //管理站id
+      deptList: [], //分中心下拉框
+      mechanismList: [], //管理机构下拉框
+      devicessizeList: [], //分辨率下拉框
+      deviceList: [], //分辨率
+      checkedDeviceIds: [], //多选 选中项
+      templateAll:[],
+      templateAvailable: [],
+      form: {},
+      supplier: null, //报文类型
+      activeNames: [], //模板 展开项
+      checkAll: false,
+      isIndeterminate: false,
+      contentList: [], //待下发数据
+      toRightItem: {}, //向右添加到模板的数据
+      selectedBdMsg: [],
+      editDialog: {
+        mode: "",
+        type: "",
+        visible: false,
+        tpl: {},
+      },
+      scrollOptions,
+      boardItemEdtingIndex: -1,
+      isHideCtt: false,
+    };
+  },
+  watch: {
+    contentList: function (newVal, oldVal) {
+      this.$nextTick(() => {
+        this.rowDrop();
+      });
+    },
+    "editDialog.visible": function (newV) {
+      if (!newV) {
+        this.editDialog.tpl = null;
+      }
+    },
+    // boardSizeDic: function (newVal, oldVal) {
+    //   console.log(newVal, 'selectedSize')
+    //   if (newVal.length == 0) {
+    //     this.form.selectedPixel = ''
+    //     // this.allVmsTemplate('no')
+    //   }
+    // }
+    // // 改变方向
+    // 'form.selectedDirection':function(newVal,oldVal){
+    //   console.log(newVal,"newVal")
+    //   this.boardSizeDic = []
+    // }
+  },
+  created() {
+    Promise.all([
+      this.____initDirection(),
+      this.____getTemplateCategory(),
+      this.____getAllTemplate()
+    ]).then((res) => {
+      this.____resetForm();
+      this.____getIotBoard();
+      this.____sortTemplate();
+    });
+  },
+  mounted() {
+    // this.rowDrop();
+    this.hideScrollFn();
+  },
+  computed: {
+  },
+  methods: {
+    ____boardTxtStyle() {
+      return {
+        color: "#F00",
+      };
+    },
+
+    // 获取信息模板分类
+    ____getTemplateCategory() {
+      return this.getDicts("iot_template_category").then((res) => {
+        this.tplCategory = res.data;
+      });
+    },
+
+    ____getAllTemplate() {
+      return getTemplateList().then((res) => {
+        this.templateAll = res.rows;
+      });
+    },
+
+    // 行拖拽
+    rowDrop() {
+      if (JSON.parse(JSON.stringify(this.contentList)).length > 0) {
+        // 要侦听拖拽响应的DOM对象
+        const tbody = document.querySelector(
+          ".partCon .el-table__body-wrapper tbody"
+        );
+        const _this = this;
+        Sortable.create(tbody, {
+          // 结束拖拽后的回调函数
+          onEnd({ newIndex, oldIndex }) {
+            const currentRow = _this.contentList.splice(oldIndex, 1)[0];
+            _this.contentList.splice(newIndex, 0, currentRow);
+          },
+        });
+      }
+    },
+    ____initDirection() {
+      return this.getDicts("iot_board_direction").then((res) => {
+        this.boardDirectionList = res.data;
+      });
+    },
+    //改变方向
+    ____changeDirection(val) {
+      this.____getIotBoard();
+    },
+
+    ____onSearchDevice() {
+      this.____getIotBoard();
+    },
+    ____resetForm() {
+      this.form = {
+        selectedDirection: this.boardDirectionList[0].dictValue,
+        status: ["0", "1"],
+        stakeFrom: [+initSearch.startStakeMark[0], +initSearch.startStakeMark[1]],
+        stakeTo: [+initSearch.endStakeMark[0], +initSearch.endStakeMark[1]],
+      }
+    },
+    ____onResetSearchDevice() {
+      this.____resetForm();
+      // this.____initDirection();
+      this.____getIotBoard();
+    },
+    // 情报板设备 折叠面板
+    ____getIotBoard() {
+      this.deviceList = [];
+      // this.checkAll = false;
+      // TODO 接口
+      let param = {
+        direction: this.form.selectedDirection,
+      };
+      let stakeFrom = this.form.stakeFrom[0] * 1000 + this.form.stakeFrom[1];
+      let stakeTo = this.form.stakeTo[0] * 1000 + this.form.stakeTo[1];
+      let statusForm = _.cloneDeep(this.form.status);
+      if (statusForm.includes("0")) {
+        statusForm.push(null)
+      }
+
+        getdeviceList(param).then((res) => {
+          res.data.forEach((item, index) => {
+            if (_.isString(item.otherConfig)) {
+              item.otherConfig = JSON.parse(item.otherConfig);
+            }
+            item.iotDeviceId = item.iotDeviceId || "null_" + item.id;
+
+            let stakeThis = +item?.stakeMark?.replace(/[K\+]/g, "") || -1;
+
+            if (stakeThis >= stakeFrom && stakeThis <= stakeTo && statusForm.includes(item.deviceState)) {
+              this.deviceList.push(item);
+            }
+            // console.log(item, item.otherConfig.screenSize)
+            // if (!this.selectedDevices.deviceName) {
+            //   this.selectedDevices = item;
+            // }
+          });
+        });
+      
+    },
+    ____forkDeviceInfo(deviceFrom) {
+      //从目标设备取得信息
+      if (IS_TESTING) {
+        this.selectedBdMsg = [];
+        this.selectedBdMsg = _.cloneDeep(testDeviceInfo.data["3A"].content);
+      } else {
+        if (!deviceFrom.iotDeviceId || deviceFrom.iotDeviceId.includes("null_")) {
+          this.$message.warning("设备未接入！");
+          return;
+        }
+        this.selectedBdMsg = [];
+        getBoardDeviceInfo(deviceFrom.iotDeviceId, deviceFrom.id)
+          .then((res) => {
+            this.selectedBdMsg = res.data["3A"].content;
+            this.isHideCtt = true;
+            this.$nextTick(() => {
+              this.isHideCtt = false;
+            });
+          })
+          .catch((err) => { });
+      }
+    },
+    ____onAddTemplate() {
+
+      // if(selectedSize){
+      //   fontSize = "64px"
+      // }
+      this.editDialog = {
+        visible: true,
+        mode: "add",
+        type: "template",
+        tpl: {
+          content: ""
+        },
+      };
+    },
+    ____onEditTemplate(tpl) {
+      // type : board template
+      // mode : edit add
+      this.editDialog = {
+        visible: true,
+        mode: "edit",
+        type: "template",
+        tpl,
+      };
+    },
+    ____onDragend(evt) {
+      // console.log(evt, this.selectedBdMsg , "拖拽结束+++=======")
+    },
+    ____onEditBoardItem(tpl, index) {
+      // type : board template
+      // mode : edit add toDevice toTemplate
+      this.boardItemEdtingIndex = index;
+      this.editDialog = {
+        visible: true,
+        mode: "edit",
+        type: "device",
+        tpl,
+      };
+    },
+    //提交之后的回调
+    ____onEditSubmit(para) {
+      this.editDialog.tpl = {};
+      this.editDialog.visible = false;
+
+      if (para.type == "device") {
+        if (para.mode == "edit") {
+          this.selectedBdMsg[this.boardItemEdtingIndex] = para.data;
+        } else {
+          this.selectedBdMsg.push(_.cloneDeep(para.data));
+        }
+      } else if (para.mode == "toDevice") {
+        let temp = _.cloneDeep(para.data);
+        this.$delete(temp, "id");
+        this.selectedBdMsg.push(temp);
+      } else {
+        this.____refreshPageData(para);
+      }
+    },
+    ____refreshPageData(para) {
+      if (para.type == "template") {
+
+        this.____getAllTemplate().then((res) => {
+          this.____sortTemplate();
+        });
+
+      } else {
+      }
+    },
+
+    // 修改弹窗
+
+    editOutline(item, index, type) {
+      this.index = index;
+      this.editType = type;
+      console.log(item, "修改弹窗");
+      this.boardEmitItem = {
+        FONT_SIZE: item.tcontents[0].fontSize + "px",
+        COLOR: item.tcontents[0].fontColor,
+        CONTENT: item.tcontents[0].content,
+        COORDINATE: item.tcontents[0].coordinate,
+        FONT: this.getFont(item.tcontents[0].fontType),
+        SPEED: item.tcontents[0].fontSpacing,
+        ACTION: item.inScreenMode, //出屏方式
+        STAY: item.stopTime, //停留时间
+        type: type,
+        screenSize: item.screenSize,
+        category: item.category,
+        id: item.id,
+        tcontentsId: item.tcontents[0].id,
+        formatStyle: item.tcontents[0].formatStyle,
+      };
+      this.showEmit = true;
+    },
+
+    /** 删除按钮操作 */
+    ____onDeleteTemplate(item) {
+      const id = item.id;
+      let content = "确认删除?";
+      this.$confirm(content, "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        deleteTemplate(id).then(() => {
+          this.$message.success("删除成功");
+          this.____refreshPageData({ type: "template" });
+        });
+      });
+    },
+
+    // 删除中间模板
+    ____onDeleteBoardItem(index) {
+      if (index > -1) {
+        this.selectedBdMsg.splice(index, 1);
+        this.$message.success("删除成功");
+      }
+    },
+
+    // 发布信息
+    ____onPublish() {
+      if (!this.selectedDevices.length) {
+        this.$message.warning("请选择设备！");
+        return;
+      }
+      this.____publishInfo();
+    },
+
+    // 接收子组件form表单 修改
+    receiveForm(form) {
+      console.log(form, "接收子组件form表单 修改");
+      this.contentList.splice(this.index_, 1, form);
+      this.$forceUpdate();
+      this.allVmsTemplate("no");
+    },
+
+    // 多选
+    ____onSelectDevices(arr) {
+
+      this.selectedDevices = [];
+      if (this.checkedDeviceIds.length == 0) {
+        return;
+      }
+
+      this.selectedDevices = _.filter(this.deviceList, (item) => {
+        return this.checkedDeviceIds.includes(item.iotDeviceId)
+      });
+
+      // this.____forkDeviceInfo(this.selectedDevices);
+    },
+    ____sortTemplate() {
+
+      this.templateAvailable = [];
+      this.tplCategory.forEach((item, index) => {
+
+        let temp = _.filter(this.templateAll, { category: item.dictValue });
+        if(temp.length>0){
+          this.templateAvailable.push({
+            ...item,
+            list: temp,
+          });
+        }
+
+      });
+
+    },
+
+    // 回读
+    async onSubmit(deviceId) {
+      this.submitButton = true;
+      this.loading = true;
+      this.contentList = [];
+      // 获取情报板修改页面信息
+      const param = {
+        deviceId: deviceId,
+      };
+      /* await getBoardContentData(param)
+        .then(res => {
+          console.log(res, 'onSubmit')
+          var contents = res.data.parameters
+          console.log(contents, 'onSubmit-----contents')
+          for (let i = 0; i < contents.length; i++) {
+            let item = contents[i]
+            item.COLOR = this.getColorStyle(item.COLOR)
+            item.FONT_SIZE = Number(item.FONT_SIZE.substring(0, 2)) + 'px'
+            item.ID = i
+            item.FONT = this.getFont(item.FONT)
+            this.contentList.push(item)
+          }
+          console.log(this.contentList, 'onSubmit-----this.contentList')
+          this.loading = false
+          this.submitButton = false
+          // this.rowDrop();
+        })
+        .catch(e => {
+          this.loading = false
+          this.submitButton = false
+        })*/
+      await getDeviceRealtimeProperty(deviceId, "3A", { async: false })
+        .then((res) => {
+          if ("3A" in res.data) {
+            console.log("回读消息------------------------");
+            console.log(res.data);
+            var contents = res.data["3A"].content;
+            for (let i = 0; i < contents.length; i++) {
+              let item = contents[i];
+              item.COLOR = item.foregroundColor.toUpperCase();
+              item.FONT_SIZE = item.fontSize + "px";
+              item.ID = i;
+              item.FONT = item.font;
+              item.STAY = item.playbackDuration;
+              item.ACTION = item.screenEntryMethod;
+              item.COORDINATE =
+                this.covering(item.xCoordinate) +
+                this.covering(item.yCoordinate);
+              item.screenSize =
+                item.displayAreaWidth + "*" + item.displayAreaHeight;
+              item.CONTENT = item.textContent.replaceAll("\\,", ",");
+              item.CONTENT = item.CONTENT.replaceAll("\\=", "=");
+              item.CONTENT = item.CONTENT.replaceAll("\\\\n", "\n");
+
+              item.formatStyle = item.verticalAlignment;
+              this.contentList.push(item);
+
+              this.form.selectedPixel = item.screenSize;
+            }
+            console.log(this.contentList, "onSubmit-----this.contentList");
+            // this.rowDrop();
+          }
+          this.loading = false;
+          this.submitButton = false;
+        })
+        .catch((e) => {
+          this.$modal.msgWarning("回读失败,请重试");
+          this.loading = false;
+          this.submitButton = false;
+        });
+      this.deviceId = deviceId;
+
+      // 根据情报板id获取分辨率
+      /*getBoardInfo(deviceId).then(res => {
+        console.log(res, 'getBoardInfo')
+        this.form.selectedPixel = res.data.pixel
+        if (res.data.deviceId) {
+          this.disabledButton = false
+        } else {
+          this.disabledButton = true
+        }
+      })*/
+    },
+
+    covering(value) {
+      if (value.length < 3) {
+        value = "0" + value;
+        return this.covering(value);
+      }
+
+      return value;
+    },
+
+    // 换算文字在模板的位置
+    getCoordinate(coordinate, type, screenSize) {
+      let width = "";
+      let height = "";
+      if (!screenSize) {
+        width = this.form.selectedPixel.split("*")[0];
+        height = this.form.selectedPixel.split("*")[1];
+      } else {
+        width = screenSize.split("*")[0];
+        height = screenSize.split("*")[1];
+      }
+      if (width <= 450 && height <= 75) {
+        return coordinate + "px";
+      } else {
+        if (type == "left") {
+          if (width < 450 && height > 75) {
+            return coordinate / (height / 75) + "px";
+          } else {
+            if (width / 450 >= height / 75) {
+              return coordinate / (width / 450) + "px";
+            } else {
+              return coordinate / (height / 75) + "px";
+            }
+          }
+        } else if (type == "top") {
+          if (width < 450 && height > 75) {
+            return coordinate / (height / 75) + "px";
+          } else {
+            if (width / 450 >= height / 75) {
+              return coordinate / (width / 450) + "px";
+            } else {
+              return coordinate / (height / 75) + "px";
+            }
+          }
+        }
+      }
+    },
+    dialogClose() {
+      this.showEmit = false;
+      this.arrowRightVisible = false;
+      setTimeout(() => {
+        this.allVmsTemplate("no");
+      }, 500);
+    },
+    hideScrollFn() {
+      // 隐藏滚动条
+      document.documentElement.style.overflow = "hidden";
+      // 禁用滚动功能
+      function disableScroll() {
+        // 记录当前滚动位置
+        const scrollPosition =
+          window.pageYOffset ||
+          document.documentElement.scrollTop ||
+          document.body.scrollTop ||
+          0;
+
+        // 设置滚动位置为固定值，防止滚动
+        document.body.style.position = "fixed";
+        document.body.style.top = `-${scrollPosition}px`;
+      }
+
+      // 启用滚动功能
+      function enableScroll() {
+        // 获取之前记录的滚动位置
+        const scrollPosition = parseInt(document.body.style.top || "0", 10);
+
+        // 恢复滚动位置
+        document.body.style.position = "";
+        document.body.style.top = "";
+
+        // 滚动到之前的位置
+        window.scrollTo(0, -scrollPosition);
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+::v-deep .formSearch {
+  padding: 20px 20px 0;
+
+  .el-form-item__label {
+    color: #fff;
+  }
+}
+
+.direction {
+  ::v-deep .el-input {
+    .el-input__inner {
+      font-size: 14px !important;
+      padding: 8px 5px;
+    }
+  }
+}
+
+.infoBoardBox {
+  width: 100%;
+  height: 100%;
+
+  .infoBoardCon {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    padding: 20px;
+
+    .part {
+      background-color: #133242;
+      margin-right: 10px;
+      display: flex;
+      flex-direction: column;
+
+      &.partRight {
+        margin-right: 0;
+      }
+
+      // .partTitle {
+      //   padding: 0px 0;
+      //   /* // border-bottom: 1px solid #05afe3; */
+      //   margin-bottom: 10px;
+      //   display: flex;
+      //   justify-content: space-between;
+      //   height: 60px;
+      //   font-size: 18px;
+      //   align-items: center;
+      //   .controlBox {
+      //     border: 1px solid #f00;
+      //     display: flex;
+      //     justify-content: center;
+      //     margin-bottom: 10px;
+      //   }
+      // }
+      .titleBtnBox {
+        flex: 1;
+        display: flex;
+        justify-content: flex-end;
+        padding: 0 10px;
+      }
+
+      .partCon {
+        flex: 1;
+        height: 0;
+        padding: 10px;
+
+        .con {
+          /* // border: 1px solid #05afe3; */
+          height: 75px;
+          position: relative;
+          width: 540px;
+          overflow: hidden;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border: 2px solid #004c64;
+        }
+      }
+
+      .templateBox {
+        width: 100%;
+        height: 100%;
+        transition: all linear 0.3s;
+        opacity: 1;
+        transform: translateX(0);
+
+        &.hide {
+          transform: translateX(20px);
+          opacity: 0;
+          transition: all linear 0.3s;
+        }
+
+        .tplItem {
+          margin-right: 14px;
+          display: flex;
+          align-items: stretch;
+          padding-bottom: 10px;
+
+          .boardPreview {
+            border: 2px solid #004c64;
+            // width: 560px;
+            // height:80px;
+            flex: 1;
+          }
+
+          .infoBtnBox {
+            width: 160px;
+            height: 50px;
+            display: flex;
+            margin-left: 10px;
+            /* // border: solid 1px #05afe3; */
+            border: 2px solid #004c64;
+            background-color: #133242;
+            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.svg);
+              }
+
+              &.btnEdit {
+                background-image: url(~@/assets/jihe/images/button/edit.svg);
+              }
+
+              &.btnDelete {
+                background-image: url(~@/assets/jihe/images/button/delete.svg);
+              }
+            }
+
+            i {
+              font-size: 24px;
+              color: #666;
+              padding-left: 4px;
+              cursor: pointer;
+              caret-color: rgba(0, 0, 0, 0);
+              user-select: none;
+            }
+
+            i:hover {
+              color: #05afe3;
+            }
+
+            .disabledClass {
+              pointer-events: none;
+              cursor: auto !important;
+              color: #ccc;
+            }
+          }
+        }
+
+        .tplItem.ghost_class {
+
+          .boardPreview,
+          .infoBtnBox {
+            border-color: #F00;
+          }
+        }
+
+        .tplItem.chosen_class {
+
+          .boardPreview,
+          .infoBtnBox {
+            border-color: #0A0;
+          }
+        }
+
+        .tplItem.drag_class {
+
+          .boardPreview,
+          .infoBtnBox {
+            border-color: #FF0;
+          }
+        }
+
+        .el-collapse {
+          max-height: 100% !important;
+          overflow: auto;
+          border-bottom: none;
+          border-top: none;
+          padding: 0 0.5vw;
+        }
+      }
+    }
+  }
+
+  .checkbox {
+    .boardLabel {}
+
+    // label {
+    //   width: 100%;
+    //   padding: 10px 0;
+    //   box-sizing: border-box;
+    //   display: flex;
+    // }
+  }
+}
+
+// .qbbBigDotBa {
+//   width: 64px;
+//   height: 9px;
+//   position: absolute;
+//   right: 5%;
+//   top: 35%;
+// }
+
+::v-deep .el-collapse-item__content {
+  line-height: normal;
+  padding-bottom: 0px;
+}
+
+.deviceList {
+  margin-right: 5px;
+  padding: 10px 20px;
+  background-color: #053b4f;
+  ::v-deep .el-checkbox__label {
+    display: flex !important;
+    justify-content: space-between;
+    width: 100%;
+
+    .title {
+      flex: 1;
+      width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: keep-all;
+    }
+
+    .state {
+      width: 18px;
+      height: 18px;
+      margin-right: 4px;
+    }
+
+    .huiduButton {
+      background: transparent;
+      border: none;
+      height: 18px;
+      width: 18px;
+      line-height: 20px;
+      padding: 0;
+      color: #fff;
+      font-size: 16px;
+    }
+
+    .huiduButton:hover {
+      color: #05afe3 !important;
+    }
+  }
+
+  .el-checkbox {
+    display: flex !important;
+    padding-top: 10px;
+    margin: 0;
+  }
+}
+
+::v-deep .el-table {
+  caret-color: rgba(0, 0, 0, 0);
+  user-select: none;
+
+  thead {
+    display: none;
+  }
+}
+
+// .boardListTitle {
+//   // margin-top: 1vh;
+//   color: #fff;
+//   height: 35px !important;
+//   background-image: url('~@/assets/screen/xtb/qbbtit.png');
+//   background-size: 100% 100%;
+//   background-repeat: no-repeat;
+//   background-position: center;
+//   display: flex;
+//   justify-content: start !important;
+//   align-items: center;
+//   position: relative;
+// }
+
+.qbbBigDot {
+  width: 18px;
+  height: 22px;
+  margin: 0 0.5vw 0 0.5vw;
+}
+
+// .partDeviceTempateTitle {
+//   width: 100%;
+//   color: #fff;
+//   padding-right: 110px !important;
+//   height: 35px !important;
+//   background-image: url('~@/assets/screen/xtb/qbbti.png');
+//   background-size: 100% 100%;
+//   background-repeat: no-repeat;
+//   background-position: center;
+//   position: relative;
+// }
+
+::v-deep .sortable-chosen:not(th) {
+  background-color: rgba(5, 175, 227, 0.1) !important;
+}
+
+::v-deep .el-select .el-input .el-input__inner {
+  caret-color: rgba(0, 0, 0, 0);
+  user-select: none;
+}
+
+::v-deep .el-collapse-item__header,
+.el-collapse-item__content {
+  caret-color: rgba(0, 0, 0, 0);
+  user-select: none;
+}
+
+::v-deep .el-collapse {
+  border-bottom: transparent;
+}
+
+::v-deep .el-table .cell {
+  padding-left: 5px;
+}
+
+::v-deep .el-collapse-item__header {
+  background-color: #053b4f;
+  color: #fff;
+  padding-left: 1vw;
+  border-top: 5px solid #112d3b;
+  border-radius: 7px;
+  border-bottom: 5px solid #112d3b;
+}
+
+::v-deep .el-collapse {
+  color: #fff;
+  border: none;
+}
+
+::v-deep .el-button--medium {
+  width: 96px;
+  height: 23px;
+  line-height: 1px;
+  border-radius: 15px;
+}
+
+::v-deep .el-table__body-wrapper {
+  background-color: #053b4f;
+  padding: 0 1vw;
+}
+
+::v-deep .el-table tr {
+  background-color: #053b4f;
+}
+
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
+  background-color: #053b4f;
+}
+
+::v-deep .el-table td.el-table__cell {
+  border: none;
+}
+
+.el-table::before,
+.el-table--group::after,
+.el-table--border::after {
+  content: none;
+}
+
+/* 通用滚动条样式 */
+::-webkit-scrollbar {
+  width: 3px;
+  /* 设置滚动条宽度 */
+  height: 3px;
+  /* 设置滚动条高度 */
+}
+
+::-webkit-scrollbar-track {
+  background-color: #00295b;
+  /* 设置滚动条轨道颜色 */
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #9abce0;
+  /* 设置滚动条滑块颜色 */
+  border-radius: 4px;
+  /* 设置滚动条滑块圆角 */
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/testData/device.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/testData/device.js
new file mode 100644
index 00000000..d88afa8f
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/testData/device.js
@@ -0,0 +1,116 @@
+export default [
+        {
+            "id": 894,
+            "iotDeviceId": "8162-65535",
+            "groupId": null,
+            "productId": 0,
+            "stakeMark": "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,
+            "stakeMark": "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,
+            "stakeMark": "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,
+            "stakeMark": "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,
+            "stakeMark": "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,
+            "stakeMark": "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/broadcast/testData/direction.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/testData/direction.js
new file mode 100644
index 00000000..aeb8802d
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/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/broadcast/testData/template.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/testData/template.js
new file mode 100644
index 00000000..8d16e15a
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/testData/template.js
@@ -0,0 +1,166 @@
+export default {
+    "0": [
+        {
+            "id": 3,
+            "category": "0",
+            "content": "保持车距，控制车速",
+            "screenSize": "768*64",
+            "fontColor": "FFFF00",
+            "fontSize": "64",
+            "fontType": "2",
+            "fontSpacing": "0",
+            "rollingSpeed": null,
+            "stopTime": "50",
+            "inScreenMode": "1",
+            "formatStyle": "2",
+            "remark": null,
+            "createTime": "2024-01-06 10:40:19",
+            "updateTime": "2024-01-06 11:04:53"
+        },
+        {
+            "id": 4,
+            "category": "0",
+            "content": "山东高速欢迎您",
+            "screenSize": "768*64",
+            "fontColor": "FFFF00",
+            "fontSize": "64",
+            "fontType": "3",
+            "fontSpacing": "0",
+            "rollingSpeed": null,
+            "stopTime": "50",
+            "inScreenMode": "1",
+            "formatStyle": "2",
+            "remark": null,
+            "createTime": "2024-01-06 10:40:44",
+            "updateTime": "2024-01-06 11:04:58"
+        },
+        {
+            "id": 5,
+            "category": "0",
+            "content": "山东高速热线：96659",
+            "screenSize": "768*64",
+            "fontColor": "FFFF00",
+            "fontSize": "64",
+            "fontType": "1",
+            "fontSpacing": "0",
+            "rollingSpeed": null,
+            "stopTime": "50",
+            "inScreenMode": "1",
+            "formatStyle": "2",
+            "remark": null,
+            "createTime": "2024-01-06 10:40:56",
+            "updateTime": "2024-01-06 11:05:24"
+        },
+        {
+            "id": 9,
+            "category": "0",
+            "content": "安全带=生命带,关键时刻能救命",
+            "screenSize": "768*64",
+            "fontColor": "FFFF00",
+            "fontSize": "48",
+            "fontType": "3",
+            "fontSpacing": "0",
+            "rollingSpeed": null,
+            "stopTime": "50",
+            "inScreenMode": "1",
+            "formatStyle": "2",
+            "remark": null,
+            "createTime": "2024-01-06 10:42:21",
+            "updateTime": "2024-01-06 11:05:15"
+        }
+    ],
+    "1": [
+        {
+            "id": 6,
+            "category": "1",
+            "content": "前方施工，谨慎驾驶",
+            "screenSize": "768*64",
+            "fontColor": "FFFF00",
+            "fontSize": "64",
+            "fontType": "3",
+            "fontSpacing": "0",
+            "rollingSpeed": null,
+            "stopTime": "50",
+            "inScreenMode": "1",
+            "formatStyle": "2",
+            "remark": null,
+            "createTime": "2024-01-06 10:41:07",
+            "updateTime": "2024-01-06 11:05:36"
+        }
+    ],
+    "2": [
+        {
+            "id": 2,
+            "category": "2",
+            "content": "雨天路滑，注意安全",
+            "screenSize": "768*64",
+            "fontColor": "FFFF00",
+            "fontSize": "64",
+            "fontType": "3",
+            "fontSpacing": "0",
+            "rollingSpeed": null,
+            "stopTime": "50",
+            "inScreenMode": "1",
+            "formatStyle": "2",
+            "remark": null,
+            "createTime": "2024-01-06 10:38:44",
+            "updateTime": "2024-01-06 11:05:52"
+        },
+        {
+            "id": 10,
+            "category": "2",
+            "content": "大雾天气\n减速慢行",
+            "screenSize": "160*80",
+            "fontColor": "FFFF00",
+            "fontSize": "40",
+            "fontType": "2",
+            "fontSpacing": "0",
+            "rollingSpeed": null,
+            "stopTime": "50",
+            "inScreenMode": "1",
+            "formatStyle": "2",
+            "remark": null,
+            "createTime": "2024-01-06 10:42:59",
+            "updateTime": "2024-01-06 11:05:48"
+        }
+    ],
+    "3": [],
+    "4": [
+        {
+            "id": 8,
+            "category": "4",
+            "content": "前方发生火灾，请谨慎驾驶",
+            "screenSize": "768*64",
+            "fontColor": "FFFF00",
+            "fontSize": "64",
+            "fontType": "1",
+            "fontSpacing": "0",
+            "rollingSpeed": null,
+            "stopTime": "50",
+            "inScreenMode": "1",
+            "formatStyle": "2",
+            "remark": null,
+            "createTime": "2024-01-06 10:42:00",
+            "updateTime": null
+        }
+    ],
+    "5": [
+        {
+            "id": 7,
+            "category": "5",
+            "content": "前方事故，减速慢行",
+            "screenSize": "768*64",
+            "fontColor": "FFFF00",
+            "fontSize": "64",
+            "fontType": "1",
+            "fontSpacing": "0",
+            "rollingSpeed": null,
+            "stopTime": "50",
+            "inScreenMode": "1",
+            "formatStyle": "2",
+            "remark": null,
+            "createTime": "2024-01-06 10:41:33",
+            "updateTime": null
+        }
+    ]
+}
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/testData/templateCategory.js b/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/testData/templateCategory.js
new file mode 100644
index 00000000..2ee999ab
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/service/broadcast/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/JiHeExpressway/utils/enum.js b/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js
index 5091a678..17386c34 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js
@@ -1246,3 +1246,11 @@ export const visibilityType = {
     text: "浓雾",
   },
 };
+
+//语音广播紧急度
+export const broadcastPriority = {
+  "1":"紧急",
+  "2":"重要",
+  "3":"一般",
+  "4":"提示"
+}
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/websocket.vue b/ruoyi-ui/src/views/websocket.vue
index ab8ee3ca..d7e12c1c 100644
--- a/ruoyi-ui/src/views/websocket.vue
+++ b/ruoyi-ui/src/views/websocket.vue
@@ -114,6 +114,7 @@ export default {
   mounted(){
     let _this = this;
     if (process.env.NODE_ENV == "development"){
+      return
       let et = 1;
       document.onkeydown = function (e) {
         let tp = _.sample(["0", "1", "0", "1", "0", "0", "0", "1", "0"]);
@@ -137,7 +138,7 @@ export default {
                   "inTunnel": 0,
                   "roadId": 1,
                   "occurrenceTime": "2024-04-10 16:56:02",
-                  "warning_time": "2024-04-10 16:56:02",
+                  "warningTime": "2024-04-10 16:56:02",
                   "lang": "",
                   "dcEventTrafficControl": {
                     "controlType": 1,
diff --git a/ruoyi-ui/vue.config.js b/ruoyi-ui/vue.config.js
index 35bf9094..919563c6 100644
--- a/ruoyi-ui/vue.config.js
+++ b/ruoyi-ui/vue.config.js
@@ -54,10 +54,10 @@ module.exports = {
         // target: `http://10.168.78.135:8087`,  //王钦
         // target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
         // target: `http://10.168.68.42:8087`, //王思祥
-        target: `http://10.168.72.174:8087`, //赵祥龙
+        // target: `http://10.168.72.174:8087`, //赵祥龙
         // target: `http://10.168.65.156:8097`, //孟
         // target: `http://10.168.56.165:8087`, //王家宝
-        // target: `http://10.168.77.128:8087`, //王兴琳
+        target: `http://10.168.77.128:8087`, //王兴琳
         // target: `http://10.168.65.103:8097`,
         changeOrigin: true,
         pathRewrite: {