From 68e1c0ddf734ea7b91e9eb939abb50a92f242fa5 Mon Sep 17 00:00:00 2001
From: IAMHERE <446961233@qq.com>
Date: Tue, 26 Dec 2023 18:11:22 +0800
Subject: [PATCH] fix-

---
 ruoyi-ui/src/views/boardView/addinfo.vue    | 883 ++++++++++++++++++++
 ruoyi-ui/src/views/boardView/boardData.json |   1 +
 ruoyi-ui/src/views/boardView/editInfo.vue   | 874 +++++++++++++++++++
 ruoyi-ui/src/views/index.vue                | 470 ++++++++++-
 4 files changed, 2220 insertions(+), 8 deletions(-)
 create mode 100644 ruoyi-ui/src/views/boardView/addinfo.vue
 create mode 100644 ruoyi-ui/src/views/boardView/boardData.json
 create mode 100644 ruoyi-ui/src/views/boardView/editInfo.vue

diff --git a/ruoyi-ui/src/views/boardView/addinfo.vue b/ruoyi-ui/src/views/boardView/addinfo.vue
new file mode 100644
index 00000000..986ab0a5
--- /dev/null
+++ b/ruoyi-ui/src/views/boardView/addinfo.vue
@@ -0,0 +1,883 @@
+<template>
+  <div class="container infoBoardDialog">
+    <!-- 添加信息弹窗 -->
+    <el-dialog title="新增" :visible.sync="dialogVisible" width="50%" :before-close="handleClose" :close-on-click-modal="false">
+      <div class="dialogStyleBox">
+        <div class="dialogLine"></div>
+        <div class="dialogCloseButton"></div>
+      </div>
+      <el-card class="box-card">
+        <div v-on:ondragenter="ondragenter" v-on:drop="faceDrop" v-on:dragover="allowDrop" :style="{
+            width: boardWidth + 'px',
+            height: boardHeight + 'px',
+          }" class="blackBoard2">
+          <span :style="{
+              color: getColorStyle(dataForm.COLOR),
+              fontSize: dataForm.FONT_SIZE,
+              fontFamily: dataForm.FONT,
+              zIndex: '1000',
+              left: dataForm.COORDINATE
+                ? dataForm.COORDINATE.substring(0, 3) + 'px'
+                : '',
+              top: dataForm.COORDINATE
+                ? dataForm.COORDINATE.substring(3, 6) + 'px'
+                : '',
+              maxHeight:boardHeight + 'px',
+            }" class="textBoard2 boardTextStyle" v-html="
+              dataForm.CONTENT
+                ? dataForm.CONTENT.replace(/\n|\r\n/g, '<br>').replace(
+                    / /g,
+                    '&nbsp'
+                  )
+                : ''
+            "></span>
+        </div>
+      </el-card>
+      <el-card>
+        <el-form :model="dataForm" :rules="dataRule" label-width="90px" ref="dataForm" size="mini">
+          <el-row :gutter="24" style="height: 45px;">
+            <el-col :span="8">
+              <el-form-item prop="category" label="所属类别" :rules="[
+                  {
+                    required: categoryRules ? true : false,
+                    message: '请选择所属类别',
+                    trigger: 'blur',
+                  },
+                ]" v-show="infoType == 2">
+                <el-select v-model="dataForm.category" placeholder="请选择所属类别" clearable size="mini">
+                  <el-option v-for="item in iotTemplateCategoryList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col class="infoBoardButton" :span="16">
+              <el-radio-group v-model="radio1" @input="alignment(radio1)">
+                <el-radio-button :label="1">左对齐</el-radio-button>
+                <el-radio-button :label="2">左右居中</el-radio-button>
+                <el-radio-button :label="3">右对齐</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.cssClass" :label="item.dictLabel" :value="item.cssClass">
+                  </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" class="submitButton">确认
+        </el-button>
+        <el-button class="closeButton" @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: 'yellow',
+      fontSize: '24',
+      fontType: 'KaiTi',
+      fontSpacing: 0,
+      coordinate: '000000',
+      url: '',
+      previewContent: '', //预览内容
+      ispreviewContent: -1,
+      dataForm: {},
+      templateContent: [],
+      templateDelContent: [],
+      dataRule: {
+        screenSize: [
+          {
+            required: true,
+            message: '请选择分辨率',
+            trigger: 'blur'
+          }
+        ],
+        CONTENT: [
+          {
+            required: true,
+            message: '请输入详细内容',
+            trigger: 'blur'
+          }
+        ],
+        fontColor: [
+          {
+            required: true,
+            message: '请填写字体颜色',
+            trigger: 'blur'
+          }
+        ],
+        fontSize: [
+          {
+            required: true,
+            message: '请填写字体大小',
+            trigger: 'blur'
+          }
+        ],
+        fontType: [
+          {
+            required: true,
+            message: '请选择字体类型',
+            trigger: 'change'
+          }
+        ],
+        fontSpacing: [
+          {
+            required: true,
+            message: '请选择字体间距',
+            trigger: 'change'
+          }
+        ],
+        rollSpeed: [
+          {
+            required: true,
+            message: '请填写滚动速度',
+            trigger: 'blur'
+          }
+        ],
+        stopTime: [
+          {
+            required: true,
+            message: '请填写停留时间',
+            trigger: 'blur'
+          }
+        ],
+        inScreenMode: [
+          {
+            required: true,
+            message: '请选择入屏方式',
+            trigger: 'blur'
+          }
+        ]
+      },
+      fontTypeOptions: [],
+      screenSizeOptions: [],
+      colorOptions: [],
+      isCurrencyOptions: [
+        {
+          code: '0',
+          content: '通用'
+        },
+        {
+          code: '1',
+          content: '仅为智能推荐模板'
+        }
+      ],
+      inScreenModeOptions: [],
+      imgSize: [
+        {
+          type: '1024*128',
+          name: '全屏'
+        },
+        {
+          type: '',
+          name: '正常'
+        }
+      ],
+      fontSizeOpt: [],
+      title: '选择图片',
+      loading: false,
+      isAdd: false,
+      iotTemplateCategoryList: [],
+      infoType: '',
+      devicePixelBoolean: false,
+      categoryRules: false
+    }
+  },
+  //   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: 'yellow',
+            FONT: '黑体',
+            SPEED: '1',
+            ACTION: '1',
+            // COORDINATE: "",
+            STATE: 'true',
+            STAY: '5',
+            screenSize: devicePixel
+          }
+          this.content = '请输入内容'
+        } else {
+          // this.getInfo();
+          // this.$refs["dataForm"] && this.$refs["dataForm"].clearValidate();
+        }
+      })
+      if (this.dataForm.screenSize) {
+        this.getFontSizeList(1)
+      }
+      this.$forceUpdate()
+    },
+    getFontSizeList(type) {
+      this.getDicts('iot_device_font_size').then(res => {
+        this.fontSizeOpt = res.data
+        this.dataForm.FONT_SIZE = res.data[3].dictValue
+        if (type) {
+          this.alignment(2)
+        }
+      })
+
+      //TODO 测试数据 后期需转接口
+      /*getFontSizeByDevicePixel(this.dataForm.screenSize).then((res) => {
+        console.log(res, "根据分辨率筛字体大小");
+        this.fontSizeOpt = res.data.fontSizeList;
+        this.dataForm.FONT_SIZE = res.data.defaultFont;
+        if(type){
+          this.alignment(2)
+        }
+      });*/
+    },
+    // 查分辨率
+    getdevicessize() {
+      //TODO 测试数据 需删除走接口
+      this.screenSizeOptions = [
+        {
+          device_pixel: '192*160'
+        },
+        {
+          device_pixel: '480*48'
+        },
+        {
+          device_pixel: '768*64'
+        }
+      ]
+
+      // TODO 查分辨率接口
+      /*devicessize().then((res) => {
+        console.log(res, "查分辨率");
+        this.screenSizeOptions = res.data;
+      });*/
+    },
+    changeScreenSize(size) {
+      this.boardWidth = size.split('*')[0]
+      this.boardHeight = size.split('*')[1]
+      this.getFontSizeList()
+      this.$forceUpdate()
+    },
+    changeFontSize() {
+      console.log(this.dataForm.FONT_SIZE)
+      this.alignment(this.alignmentNum)
+      this.$forceUpdate()
+    },
+    keyDown(ev) {
+      this.alignment(this.alignmentNum)
+    },
+
+    //选择图片弹框关闭事件
+    close() {
+      this.checkList = []
+      this.dialogVisible = false
+    },
+    faceDrop(e) {
+      e.preventDefault() //阻止默认行为
+      this.listquery.push(this.curDragImgItem)
+    },
+    // 全选
+    allowDrop(e) {
+      e.preventDefault() //阻止默认行为
+    },
+    ondragenter(e) {
+      e.preventDefault() //阻止默认行为
+    },
+    // 获取信息
+    // getInfo() {
+    //   getTemplateInfo(this.dataForm.id).then((data) => {
+    //     this.dataForm = data.data;
+    //     this.width = this.dataForm.screenSize.split("*")[0];
+    //     this.height = this.dataForm.screenSize.split("*")[1];
+    //   });
+    //   getTemplateContent(this.dataForm.id).then((data) => {
+    //     this.templateContent = data.rows;
+
+    //     if (this.templateContent.length == 0) {
+    //       this.templateContent.push({
+    //         content: "",
+    //         fontColor: "yellow",
+    //         fontSize: "24",
+    //         fontType: "KaiTi",
+    //         fontSpacing: 0,
+    //         coordinate: "000000",
+    //         img: "",
+    //       });
+    //     }
+    //   });
+    // },
+    // 表单提交
+    async dataFormSubmitHandle() {
+      this.alignment()
+      // let valid = await this.$refs.dataForm.validate().catch(() => {
+      //   return this.$modal.msgError("校验错误");
+      // });
+      // if (!valid) return;
+      if (!this.dataForm.CONTENT.trim()) {
+        return this.$modal.msgError('当前输入内容为空')
+      } else if (!this.dataForm.category && this.infoType == 2) {
+        return this.$modal.msgError('情报板所属类别不能为空')
+      }
+      //走接口检验内容是否包含敏感字段
+      /*checkIotBoardContent(this.dataForm.CONTENT).then(response => {
+        if (response.data == 0) {
+          return this.$modal.msgError('当前发布内容包含敏感字段，请修改')
+        } else if (response.data == 2) {
+          return this.$modal.msgError('当前输入内容为空')
+        } else {
+          this.loading = true
+          // let templateId = "";
+          let method = 'put'
+          if (this.isAdd) {
+            if (this.infoType == 1) {
+              // 不走接口 存到待下发信息里
+              this.dataForm.STAY = Number(this.dataForm.STAY) * 100
+              this.$emit('addInfo', this.dataForm)
+            } else {
+              // 走接口 存到信息模板里
+              const params1 = {
+                applyType: '',
+                category: this.dataForm.category,
+                coordinate: '',
+                height: '',
+                id: '',
+                imageUrl: '',
+                imgSizeFrom: '',
+                inScreenMode: this.dataForm.ACTION,
+                remark: '',
+                screenSize: this.dataForm.screenSize,
+                stopTime: Number(this.dataForm.STAY) * 100,
+                vmsType: '',
+                width: ''
+              }
+              const templateContent = []
+              templateContent.push({
+                content: this.dataForm.CONTENT,
+                coordinate: this.dataForm.COORDINATE,
+                fontColor: this.getColorStyle(this.dataForm.COLOR),
+                fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
+                fontSpacing: this.dataForm.SPEED,
+                fontType: this.getFontStyle(this.dataForm.FONT)
+              })
+              // this.$emit("addInfoMode", this.dataForm);
+              addTemplate(params1, method).then(data => {
+                console.log(data, '新增口')
+                let params2 = {
+                  templateContent: templateContent,
+                  templateId: data
+                }
+                addTemplateContent(params2)
+                  .then(res => {
+                    if (res.code == 200) {
+                      this.$emit('getActiveNames')
+                      this.$message.success('添加成功')
+                    }
+                  })
+                  .catch(err => {
+                    throw err
+                  })
+              })
+            }
+          } else {
+            // // 修改
+            // editTemplate(this.dataForm).then((data) => {});
+            // this.templateContent.forEach((e) => {
+            //   e.img = e.imageName;
+            // });
+            // var params = {
+            //   templateContent: this.templateContent,
+            //   templateId: this.dataForm.id,
+            //   templateDelContent: this.templateDelContent,
+            // };
+            // editTemplateContent(params).then((response) => {
+            //   // console.log(response, "返回结果");
+            // });
+          }
+          this.loading = false
+          this.dialogVisible = false
+          this.isAdd = false
+          this.$emit('refreshDataList', this.dataForm)
+          var textBoard2 = document.getElementsByClassName('textBoard2')
+          textBoard2[0].style.position = 'absolute'
+        }
+      })*/
+
+      this.loading = true
+      // let templateId = "";
+      let method = 'put'
+      if (this.isAdd) {
+        if (this.infoType == 1) {
+          // 不走接口 存到待下发信息里
+          this.dataForm.STAY = Number(this.dataForm.STAY) * 100
+          this.$emit('addInfo', this.dataForm)
+        } else {
+          // 走接口 存到信息模板里
+          const params1 = {
+            applyType: '',
+            category: this.dataForm.category,
+            coordinate: '',
+            height: '',
+            id: '',
+            imageUrl: '',
+            imgSizeFrom: '',
+            inScreenMode: this.dataForm.ACTION,
+            remark: '',
+            screenSize: this.dataForm.screenSize,
+            stopTime: Number(this.dataForm.STAY) * 100,
+            vmsType: '',
+            width: ''
+          }
+          const templateContent = []
+          templateContent.push({
+            content: this.dataForm.CONTENT,
+            coordinate: this.dataForm.COORDINATE,
+            fontColor: this.getColorStyle(this.dataForm.COLOR),
+            fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
+            fontSpacing: this.dataForm.SPEED,
+            fontType: this.getFontStyle(this.dataForm.FONT)
+          })
+          // 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 == '黄色') {
+        return 'yellow'
+      } else if (font == '红色') {
+        return 'red'
+      } else if (font == '绿色' || font == 'GreenYellow') {
+        return '#00FF00'
+      } else if (font == '蓝色') {
+        return 'blue'
+      } else {
+        return font
+      }
+    },
+    // 文字对齐方式
+    alignment(alignmentNum) {
+      this.alignmentNum = alignmentNum
+      var divContent2 = document.getElementsByClassName('blackBoard2')
+      var textBoard2 = document.getElementsByClassName('textBoard2')
+      // 获取文字长宽
+      // let textWidth = textBoard2[0].offsetWidth;
+      // let textHeight = textBoard2[0].offsetHeight;
+      // // 获取黑盒子长宽
+      // let divWidth = divContent2[0].offsetWidth;
+      // let divHeight = divContent2[0].offsetHeight;
+      // var args =  [...divContent2];
+
+      switch (alignmentNum) {
+        // 左对齐
+        case 1:
+          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 3:
+          divContent2[0].style.justifyContent = 'right'
+          divContent2[0].style.alignItems = 'center'
+          // textBoard2[0].style.textAlign = "right";
+          textBoard2[0].style.position = 'static'
+
+          break
+        // 上对齐
+        case 4:
+          divContent2[0].style.alignItems = 'flex-start'
+          textBoard2[0].style.position = 'static'
+
+          break
+        // 上下对齐
+        case 5:
+          divContent2[0].style.alignItems = 'center'
+          textBoard2[0].style.position = 'static'
+
+          break
+        // 下对齐
+        case 6:
+          divContent2[0].style.alignItems = 'flex-end'
+          textBoard2[0].style.position = 'static'
+
+          break
+      }
+      if (!alignmentNum) {
+        divContent2[0].style.alignItems = 'center'
+        textBoard2[0].style.position = 'static'
+      }
+      var textLeft = this.addZero(textBoard2[0].offsetLeft)
+      var textTop = this.addZero(textBoard2[0].offsetTop)
+      this.dataForm.COORDINATE = textLeft + textTop
+      // console.log(this.dataForm.COORDINATE, "this.dataForm.COORDINATE");
+    },
+    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;
+}
+</style>
diff --git a/ruoyi-ui/src/views/boardView/boardData.json b/ruoyi-ui/src/views/boardView/boardData.json
new file mode 100644
index 00000000..881570aa
--- /dev/null
+++ b/ruoyi-ui/src/views/boardView/boardData.json
@@ -0,0 +1 @@
+"{\"support\":{\"PROTOCOL_TYPE\":\"GUANGDIAN_V33\",\"FONT_SIZE\":\"3232,2424,1616\",\"DEVICEID\":\"102111101\",\"COLOR\":\"红色,绿色,蓝色,黄色\",\"FONT\":\"宋体,黑体,楷体\"},\"content\":[{\"ITEM000\":[{\"SPEED\":\"1\",\"FONT_SIZE\":\"3232\",\"ACTION\":\"1\",\"COLOR\":\"黄色\",\"STATE\":true,\"CONTENT\":\"进入隧道 请开大灯1\",\"COORDINATE\":\"063004\",\"FONT\":\"黑体\",\"STAY\":\"500\"}]}]}"
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/boardView/editInfo.vue b/ruoyi-ui/src/views/boardView/editInfo.vue
new file mode 100644
index 00000000..697cb765
--- /dev/null
+++ b/ruoyi-ui/src/views/boardView/editInfo.vue
@@ -0,0 +1,874 @@
+<template>
+  <div class="container infoBoardDialog">
+    <!-- 添加信息弹窗 -->
+    <el-dialog title="修改" :visible.sync="dialogVisible" width="42%" :before-close="closeDialog" :close-on-click-modal="false">
+      <div class="dialogStyleBox">
+        <div class="dialogLine"></div>
+        <div class="dialogCloseButton"></div>
+      </div>
+      <el-card class="box-card">
+        <div class="blackBoard1" v-on:ondragenter="ondragenter" v-on:drop="faceDrop" v-on:dragover="allowDrop" :style="{
+            width: getDevicePixel(boardWidth, 0),
+            height: getDevicePixel(boardHeight, 1),
+          }">
+          <span class="textBoard1 boardTextStyle" :style="{
+              color: getColorStyle(dataForm.COLOR),
+              fontSize: getFontSize(dataForm.FONT_SIZE),
+              fontFamily: dataForm.FONT,
+              zIndex: '1000',
+              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="1">左对齐</el-radio-button>
+                <el-radio-button :label="2">左右居中</el-radio-button>
+                <el-radio-button :label="3">右对齐</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.cssClass" :label="item.dictLabel" :value="item.cssClass">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="FONT_SIZE" label="字体大小">
+                <el-select v-model="dataForm.FONT_SIZE" style="width: 100%" @change="changeFontSize">
+                  <el-option v-for="item in fontSizeOpt" :key="item.dictLabel" :label="item.dictLabel" :value="item.dictLabel">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item prop="FONT" label="字体类型">
+                <el-select v-model="dataForm.FONT" filterable placeholder="请选择">
+                  <el-option v-for="item in fontTypeOptions" :key="item.cssClass" :label="item.dictLabel" :value="item.cssClass">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <!-- <el-col :span="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">确认
+        </el-button>
+        <el-button @click="closeDialog()" class="closeButton">取消</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: true,
+      fileList: [
+        {
+          name: 'food.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        },
+        {
+          name: 'food2.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
+        }
+      ],
+      listquery: [], //拖拽图片
+      curDragImgItem: '',
+      visible: false,
+      startTxt_x: '000',
+      startTxt_y: '000',
+      width: '400',
+      height: '40',
+      content: '',
+      fontColor: 'yellow',
+      fontSize: '24',
+      fontType: 'KaiTi',
+      fontSpacing: 0,
+      coordinate: '000000',
+      url: '',
+      previewContent: '', //预览内容
+      ispreviewContent: -1,
+      dataForm: {
+        CONTENT: '',
+        STAY: '',
+        FONT: '',
+        COORDINATE: ''
+
+        // id: "",
+        // screenSize: "400*40", //屏幕尺寸
+        // inScreenMode: "1", //入屏方式
+        // rollSpeed: "1000",
+        // stopTime: "500",
+        // applyType: "", //适用类型
+        // vmsType: "", //情报板类型
+        // remark: "", //备注
+        // imgSizeFrom: "", //尺寸大小
+        // imageUrl: "",
+        // height: "",
+        // width: "",
+        // coordinate: "", //起始点位置;前3位代表x点的位值，后3位代表y点的位置
+      },
+      templateContentModel: '',
+      templateContent: [],
+      templateDelContent: [],
+      fontTypeOptions: [],
+      screenSizeOptions: [
+        {
+          type: '400*40'
+        },
+        {
+          type: '128*64'
+        }
+      ],
+      colorOptions: [],
+      isCurrencyOptions: [
+        {
+          code: '0',
+          content: '通用'
+        },
+        {
+          code: '1',
+          content: '仅为智能推荐模板'
+        }
+      ],
+      inScreenModeOptions: [],
+      imgSize: [
+        {
+          type: '1024*128',
+          name: '全屏'
+        },
+        {
+          type: '',
+          name: '正常'
+        }
+      ],
+      fontSizeOpt: [],
+      title: '选择图片',
+      loading: false,
+      isAdd: false
+    }
+  },
+  //   directives: {
+  //     drag: function (el, binding, vnode) {
+  //       let that = vnode.context;
+  //       let dragBox = el;
+  //       dragBox.onmousedown = (e) => {
+  //         // that.startTxt_x = dragBox.style.left.substring (0, dragBox.style.left.length - 2)
+  //         // that.startTxt_y = dragBox.style.left.substring (0, dragBox.style.top.length - 2)
+  //         let disX = e.clientX - dragBox.offsetLeft;
+  //         let disY = e.clientY - dragBox.offsetTop;
+  //         let clientHeight = dragBox.clientHeight;
+  //         let clientWidth = dragBox.clientWidth;
+  //         document.onmousemove = function (e) {
+  //           //鼠标移动触发事件，元素移到对应为位置
+  //           let left = e.pageX - disX;
+  //           let top = e.pageY - disY;
+  //           //限制区域
+  //           if (left <= 0) {
+  //             left = 0;
+  //           } else if (that.width - left - clientWidth <= 0) {
+  //             left = that.width - clientWidth;
+  //           }
+  //           if (top <= 0) {
+  //             top = 0;
+  //           } else if (that.height - top - clientHeight <= 0) {
+  //             top = that.height - clientHeight;
+  //           }
+  //           dragBox.style.left = left + "px";
+  //           dragBox.style.top = top + "px";
+  //           let a = (Array(3).join("0") + parseInt(left)).slice(-3);
+  //           let b = (Array(3).join("0") + parseInt(top)).slice(-3);
+  //           that.templateContent[dragBox.id].coordinate = a + b;
+  //         };
+  //         document.onmouseup = function () {
+  //           //鼠标抬起，清除绑定的事件，元素放置在对应的位置
+  //           document.onmousemove = null;
+  //           document.onmousedown = null;
+  //         };
+  //         e.preventDefault(); //阻止浏览器的默认事件
+  //       };
+  //     },
+  //   },
+  computed: {
+    dataRule() {
+      return {
+        itemPropertyMap: null,
+        CONTENT: [
+          {
+            required: true,
+            message: '请输入详细内容',
+            trigger: 'blur'
+          }
+        ],
+        fontColor: [
+          {
+            required: true,
+            message: '请填写字体颜色',
+            trigger: 'blur'
+          }
+        ],
+        fontSize: [
+          {
+            required: true,
+            message: '请填写字体大小',
+            trigger: 'blur'
+          }
+        ],
+        fontType: [
+          {
+            required: true,
+            message: '请选择字体类型',
+            trigger: 'blur'
+          }
+        ],
+        fontSpacing: [
+          {
+            required: true,
+            message: '请选择字体间距',
+            trigger: 'blur'
+          }
+        ],
+        rollSpeed: [
+          {
+            required: true,
+            message: '请填写滚动速度',
+            trigger: 'blur'
+          }
+        ],
+        stopTime: [
+          {
+            required: true,
+            message: '请填写停留时间',
+            trigger: 'blur'
+          }
+        ],
+        inScreenMode: [
+          {
+            required: true,
+            message: '请选择入屏方式',
+            trigger: 'blur'
+          }
+        ]
+      }
+    },
+    divStyle: function () {
+      return {
+        width: this.width + 'px',
+        height: this.height + 'px'
+      }
+    }
+  },
+  watch: {
+    //   boardEmitItem(newval){
+    //       console.log(newval,"newval")
+    //       this.boardEmitItem = newval
+    //   }
+    // "dataForm.CONTENT": {
+    //   deep: true,
+    //   handler: function (newValue, oldValue) {
+    //     this.dataForm.content1 = newValue;
+    //   },
+    // },
+  },
+  created() {
+    console.log(this.boardEmitItem, 'this.boardEmitItem')
+    this.getDicts('iot_template_category').then(res => {
+      this.iotTemplateCategoryList = res.data
+      console.log(this.iotTemplateCategoryList, 'this.iotTemplateCategoryList')
+    })
+    this.getDicts('iot_device_font_type').then(res => {
+      this.fontTypeOptions = res.data
+      console.log(this.fontTypeOptions, '字体类型')
+    })
+    this.getDicts('iot_devices_font_color').then(res => {
+      this.colorOptions = res.data
+      console.log(this.colorOptions, '字体颜色')
+    })
+    // this.getDicts("iot_device_font_size").then((res) => {
+    //   this.fontSizeOpt = res.data;
+    //   console.log(this.fontSizeOpt, "字体大小");
+    // });
+    this.getDicts('iot_device_font_inScreen_mode').then(res => {
+      this.inScreenModeOptions = res.data
+      console.log(this.inScreenModeOptions, '入屏方式')
+    })
+    if (this.boardEmitItem) {
+      this.boardWidth = this.boardEmitItem.screenSize.split('*')[0]
+      this.boardHeight = this.boardEmitItem.screenSize.split('*')[1]
+      this.init()
+    }
+  },
+  methods: {
+    init() {
+      this.title = '修改'
+
+      this.dialogVisible = true
+      this.itemPropertyMap = new HashMap()
+      this.alignmentNum = 2
+      this.dataForm = JSON.parse(JSON.stringify(this.boardEmitItem))
+      this.dataForm.COLOR = this.getColorValue(this.boardEmitItem.COLOR)
+      console.log(this.dataForm, 'this.dataForm')
+      // this.dataForm.FONT = this.getFont(this.boardEmitItem.FONT)
+      this.dataForm.CONTENT = JSON.parse(JSON.stringify(this.boardEmitItem.CONTENT.replace('<br>', '\n').replace(/ /g, ' ').replace('<r><n>', '\n')))
+      this.dataForm.STAY = JSON.parse(JSON.stringify(Number(this.boardEmitItem.STAY) / 100))
+      this.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 1:
+          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 3:
+          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
+    },
+    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('当前输入内容为空')
+      }
+      this.loading = true
+      console.log(this.dataForm, '点击修改 表单')
+
+      this.loading = false
+      this.isAdd = false
+      if (this.dataForm.type == 1) {
+        this.dataForm.STAY = Number(this.dataForm.STAY) * 100
+        this.$emit('receiveForm', this.dataForm)
+        console.log(this.dataForm, 'this.dataForm修改后给父组件传表单内容')
+      } else {
+        const tcontent = {
+          content: this.dataForm.CONTENT,
+          text: this.dataForm.CONTENT,
+          coordinate: this.dataForm.COORDINATE,
+          createBy: null,
+          createTime: null,
+          fontColor: this.dataForm.COLOR,
+          fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
+          fontSpacing: this.dataForm.SPEED,
+          fontType: this.dataForm.FONT,
+          height: null,
+          id: this.dataForm.id,
+          imageUrl: null,
+          params: {},
+          remark: null,
+          searchValue: null,
+          templateId: this.dataForm.id,
+          updateBy: null,
+          updateTime: null,
+          width: null
+        }
+        const param = {
+          applyType: '',
+          category: this.dataForm.category,
+          createBy: null,
+          createTime: null,
+          dictLable: null,
+          id: this.dataForm.id,
+          inScreenMode: this.dataForm.ACTION,
+          isCurrency: null,
+          params: {},
+          remark: '',
+          screenSize: this.dataForm.screenSize,
+          searchValue: null,
+          stopTime: Number(this.dataForm.STAY) * 100,
+          tcontents: null,
+          templateType: null,
+          updateBy: null,
+          updateTime: null,
+          vmsType: '',
+          tcontent: tcontent,
+          templateId: this.dataForm.id
+        }
+        editTemplate(param).then(data => {})
+        let templateContent = []
+        templateContent.push({
+          content: this.dataForm.CONTENT,
+          fontColor: this.dataForm.COLOR,
+          fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
+          fontType: this.dataForm.FONT,
+          fontSpacing: this.dataForm.SPEED,
+          coordinate: this.dataForm.COORDINATE,
+          id: this.dataForm.tcontentsId,
+          templateId: this.dataForm.id
+        })
+
+        var params = {
+          templateContent: templateContent,
+          templateId: this.dataForm.id,
+          templateDelContent: []
+        }
+        console.log(params, 'params')
+        editTemplateContent(params).then(response => {
+          console.log(response, '返回结果')
+          this.$modal.msgSuccess('修改成功')
+        })
+        this.$forceUpdate()
+      }
+      this.closeDialog()
+
+      /*checkIotBoardContent(this.dataForm.CONTENT).then(response => {
+        if (response.data == 0) {
+          return this.$modal.msgError('当前发布内容包含敏感字段，请修改')
+        } else if (response.data == 2) {
+          return this.$modal.msgError('当前输入内容为空')
+        } else {
+          this.loading = true
+          console.log(this.dataForm, '点击修改 表单')
+
+          this.loading = false
+          this.isAdd = false
+          if (this.dataForm.type == 1) {
+            this.dataForm.STAY = Number(this.dataForm.STAY) * 100
+            this.$emit('receiveForm', this.dataForm)
+            console.log(this.dataForm, 'this.dataForm修改后给父组件传表单内容')
+          } else {
+            const tcontent = {
+              content: this.dataForm.CONTENT,
+              text: this.dataForm.CONTENT,
+              coordinate: this.dataForm.COORDINATE,
+              createBy: null,
+              createTime: null,
+              fontColor: this.dataForm.COLOR,
+              fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
+              fontSpacing: this.dataForm.SPEED,
+              fontType: this.dataForm.FONT,
+              height: null,
+              id: this.dataForm.id,
+              imageUrl: null,
+              params: {},
+              remark: null,
+              searchValue: null,
+              templateId: this.dataForm.id,
+              updateBy: null,
+              updateTime: null,
+              width: null
+            }
+            const param = {
+              applyType: '',
+              category: this.dataForm.category,
+              createBy: null,
+              createTime: null,
+              dictLable: null,
+              id: this.dataForm.id,
+              inScreenMode: this.dataForm.ACTION,
+              isCurrency: null,
+              params: {},
+              remark: '',
+              screenSize: this.dataForm.screenSize,
+              searchValue: null,
+              stopTime: Number(this.dataForm.STAY) * 100,
+              tcontents: null,
+              templateType: null,
+              updateBy: null,
+              updateTime: null,
+              vmsType: '',
+              tcontent: tcontent,
+              templateId: this.dataForm.id
+            }
+            editTemplate(param).then(data => {})
+            let templateContent = []
+            templateContent.push({
+              content: this.dataForm.CONTENT,
+              fontColor: this.dataForm.COLOR,
+              fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
+              fontType: this.dataForm.FONT,
+              fontSpacing: this.dataForm.SPEED,
+              coordinate: this.dataForm.COORDINATE,
+              id: this.dataForm.tcontentsId,
+              templateId: this.dataForm.id
+            })
+
+            var params = {
+              templateContent: templateContent,
+              templateId: this.dataForm.id,
+              templateDelContent: []
+            }
+            console.log(params, 'params')
+            editTemplateContent(params).then(response => {
+              console.log(response, '返回结果')
+              this.$modal.msgSuccess('修改成功')
+            })
+            this.$forceUpdate()
+          }
+          this.closeDialog()
+        }
+      })*/
+    },
+    getFontStyle(font) {
+      if (font == '宋体') {
+        return 'Simsun'
+      } else if (font == '黑体') {
+        return 'SimHei'
+      } else if (font == '楷体') {
+        return 'KaiTi'
+      } else if (font == '仿宋') {
+        return 'FangSong'
+      } else if (font == '隶书') {
+        return 'LiSu'
+      }
+    },
+    getColorStyle(font) {
+      if (font == '黄色') {
+        return 'yellow'
+      } else if (font == '红色') {
+        return 'red'
+      } else if (font == '绿色' || font == 'GreenYellow') {
+        return '#00FF00'
+      } else if (font == '蓝色') {
+        return 'blue'
+      } else {
+        return font
+      }
+    },
+    closeDialog() {
+      this.dialogVisible = false
+      this.$emit('dialogClose')
+    },
+    getDevicePixel(devicePixel, num) {
+      if (num == 0) {
+        if (devicePixel > 768) {
+          return 768 + 'px'
+        } else {
+          return devicePixel + 'px'
+        }
+      } else if (num == 1) {
+        if (devicePixel > 128) {
+          return 128 + 'px'
+        } else {
+          return devicePixel + 'px'
+        }
+      }
+    },
+    getCoordinate(coordinate, num) {
+      if (num == 0) {
+        if (this.boardWidth > 768) {
+          let i = this.boardWidth / 768
+          console.log(coordinate / i, 'width')
+          return coordinate / i + 'px'
+        } else {
+          return coordinate + 'px'
+        }
+      } else if (num == 1) {
+        if (this.boardHeight > 128) {
+          let i = this.boardHeight / 128
+          console.log(coordinate / i, 'height')
+          return coordinate / i + 'px'
+        } else {
+          return coordinate + 'px'
+        }
+      }
+    },
+    getFontSize(size) {
+      if (this.boardWidth > 768) {
+        let i = this.boardWidth / 768
+        return size.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;
+}
+</style>
diff --git a/ruoyi-ui/src/views/index.vue b/ruoyi-ui/src/views/index.vue
index d4f2a1b5..dc505b84 100644
--- a/ruoyi-ui/src/views/index.vue
+++ b/ruoyi-ui/src/views/index.vue
@@ -8,6 +8,83 @@
     <div ref="mapDialog" class="map_dialog" :style="{'top':mapDialogTop,'left':mapDialogLeft}">
 
     </div>
+    <!-- 情报板弹框 -->
+    <transition name="el-zoom-in-center">
+      <div v-if="dialogInfoLeft" class="dialog_info">
+        <div class="dialog_info_left">
+          <div class="dialog_info_left_t">
+            <div class="dialog_info_left_t_txt">{{ dialogTit }}</div>
+            <img class="dialog_info_left_t_img" src="@/assets/screen/xtb/close.png" alt="" @click="closeDialogBtnFn">
+            <img class="dialog_info_left_t_ti" src="@/assets/screen/xtb/cltiao.png" alt="">
+          </div>
+          <div class="dialog_info_left_show">
+            <div v-if="dialogInfoList.length > 0" class="dialog_info_left_show_box" style="height: 100%;">
+              <div class="dialog_info_left_show_box_item" v-for="item in dialogInfoList" :key="item.id">
+                <div class="dialog_info_left_show_l">
+                  <div class="dialog_info_left_show_l_xsq" :style="{'width':item.w / getScrollSz(item.w)+'px','height':item.h / getScrollSz(item.w)+'px',}">
+                    <div class="dialog_info_left_show_l_xsq_txt" :style="{'font-size':item.fz / getScrollSz(item.w)+'px',color:item.col}" v-html="item.txt"></div>
+                  </div>
+                </div>
+                <div class="dialog_info_left_show_r">
+                  <div @click="editOutline(item)" class="show_r_btn dialog_info_left_show_r_btn1"></div>
+                  <div @click="delMoFn(item)" class="show_r_btn dialog_info_left_show_r_btn2"></div>
+                </div>
+              </div>
+            </div>
+            <div v-else class="dialog_info_left_show_box" style="height: 100%;">
+              <div class="dialog_info_left_show_box_empty">暂无数据</div>
+            </div>
+            <div class="dialog_info_left_show_bottom">
+              <el-tabs v-model="activeName" @tab-click="tabClickFn">
+                <el-tab-pane label="详情信息" name="first">
+                  <div class="show_bottom_tab_box">
+                    <div class="show_bottom_tab_item" v-for="item in tabInfoList" :key="item.id">
+                      <div class="show_bottom_tab_item_l">{{ item.tit }}: </div>
+                      <div class="show_bottom_tab_item_r" :style="{'color':item.col}"> {{ item.txt }}</div>
+                    </div>
+                  </div>
+                </el-tab-pane>
+                <el-tab-pane label="设备参数" name="second">设备参数</el-tab-pane>
+              </el-tabs>
+            </div>
+            <div class="dialog_info_left_show_bottom_btn">
+              <div class="show_bottom_btn_add" @click="addMoDataInfoFn(2,2)">添加信息</div>
+              <div class="show_bottom_btn_del">信息发布</div>
+            </div>
+            <div class="dialog_info_left_show_ce" @click="showCeInfoFn">
+              <img class="show_ce_img" src="@/assets/screen/xtb/leftd.png" alt="" :style="{'transform':dialogInfoRight ? 'rotate(0deg)': 'rotate(180deg)'}">
+              <div class="show_ce_txt">信息模板</div>
+            </div>
+          </div>
+        </div>
+        <transition name="el-zoom-in-center">
+          <div v-if="dialogInfoRight" class="dialog_info_right">
+            <div v-for="item in moBanDataList" :key="item.id">
+              <div class="dialog_info_right_tit">{{ item.bt }}</div>
+              <div class="dialog_info_right_show">
+                <div class="dialog_info_left_show_box">
+                  <div class="dialog_info_left_show_box_item" v-for="i in item.mbList" :key="i.id">
+                    <div class="dialog_info_left_show_l" style="width:17vw;">
+                      <div class="dialog_info_left_show_l_xsq" :style="{'width':i.w / getScrollSz(i.w)+'px','height':i.h / getScrollSz(i.w)+'px',}">
+                        <div class="dialog_info_left_show_l_xsq_txt" :style="{'font-size':i.fz / getScrollSz(i.w)+'px',color:i.col}" v-html="i.txt"></div>
+                      </div>
+                    </div>
+                    <div class="dialog_info_left_show_r" style="width: 3.5vw;">
+                      <div @click="putLeftFn(i)" class="show_r_btn dialog_info_left_show_r_btn3"></div>
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </transition>
+      </div>
+    </transition>
+    <!-- 情报板弹框中的弹框 -->
+    <addBoard ref="addinfo" @addInfo="addInfo" />
+    <editBoard v-if="showEmit" :boardEmitItem="boardEmitItem" @receiveForm="receiveForm" @dialogClose="dialogClose" />
     <!-- 左边 -->
     <div class="home_page_left">
       <div class="home_page_left_t">
@@ -92,10 +169,18 @@
 <script>
 import GaoDeMap from '@/views/map/index.vue'
 import carECharts from '@/views/echarts/carECharts.vue'
+import addBoard from '@/views/boardView/addinfo.vue'
+import editBoard from '@/views/boardView/editInfo.vue'
 export default {
   name: 'indexView',
   data() {
     return {
+      showEmit: false,
+      boardEmitItem: {}, //修改弹窗的数据
+      activeName: 'first',
+      dialogTit: '门架式可变信息标志YK16+270',
+      dialogInfoLeft: true,
+      dialogInfoRight: true,
       mapDialogTop: '0px',
       mapDialogLeft: '0px',
       keyMonitoringList: [
@@ -126,13 +211,37 @@ export default {
         { id: 37, name: '语音广播', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/yygb.png'), require('@/assets/screen/xtb/lcsb/yyg.png')] },
         { id: 38, name: '情报板', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/qbb.png'), require('@/assets/screen/xtb/lcsb/qb.png')] },
         { id: 39, name: '合流区', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/hlq.png'), require('@/assets/screen/xtb/lcsb/hl.png')] }
+      ],
+      dialogInfoList: [],
+      moBanDataList: [
+        {
+          id: 1001,
+          bt: '日常通用',
+          mbList: [
+            { id: 305, txt: '谨慎驾驶 注意安全', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' },
+            { id: 306, txt: '谨慎驾驶 注意安全', w: 768, h: 160, col: '#03FF00', fz: 60, align: 'center' },
+            { id: 307, txt: '谨慎驾驶 注意安全', w: 768, h: 160, col: '#FF0000', fz: 60, align: 'center' },
+            { id: 308, txt: '谨慎驾驶, <br/> 注意安全', w: 768, h: 160, col: '#03FF00', fz: 60, align: 'center' }
+          ]
+        },
+        { id: 1002, bt: '日常通用', mbList: [{ id: 309, txt: '道路施工, <br/> 谨慎驾驶', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' }] },
+        { id: 1003, bt: '恶劣天气', mbList: [{ id: 309, txt: '救援   拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' }] }
+      ],
+
+      tabInfoList: [
+        { id: 401, tit: '设备名称', txt: '门架式可变信息标志', col: '#fff' },
+        { id: 402, tit: '道路名称', txt: 'G35济菏高速', col: '#fff' },
+        { id: 403, tit: '所属机构', txt: '山东高速济南发展公司', col: '#fff' },
+        { id: 404, tit: '设备桩号', txt: 'K094+079', col: '#fff' },
+        { id: 405, tit: '设备厂商', txt: '光电比特', col: '#fff' },
+        { id: 406, tit: '设备状态', txt: '离线', col: '#888' }
       ]
     }
   },
 
   props: [],
   // 注册组件
-  components: { GaoDeMap, carECharts },
+  components: { GaoDeMap, carECharts, addBoard, editBoard },
   // 计算属性
   computed: {},
   // 生命周期函数
@@ -156,19 +265,118 @@ export default {
     // 地图点位
     mapClickEvent(e) {
       console.log('父组件地图点位', e)
-      console.log()
+      this.dialogInfoLeft = true
       // this.mapDialogTop = e.pixel.y + 'px'
       // this.mapDialogLeft = e.pixel.x + 'px'
-      this.$refs.mapDialog.style.top = e.pixel.y + 'px'
-      this.$refs.mapDialog.style.left = e.pixel.x + 'px'
-      console.log(this.$refs.mapDialog)
+      // this.$refs.mapDialog.style.top = e.pixel.y + 'px'
+      // this.$refs.mapDialog.style.left = e.pixel.x + 'px'
+      // console.log(this.$refs.mapDialog)
+    },
+    // 接收子组件新增待发模板
+    addInfo(form) {
+      console.log(form, '待发新增')
+      // form.ID = this.contentList.length
+      // this.contentList.push(deepClone(form))
+      // this.$message.success('添加成功')
+      // this.$forceUpdate()
+    },
+    // 打开添加信息弹窗
+    addMoDataInfoFn(type, mode) {
+      this.$refs.addinfo.init('', type, mode)
+    },
+    // 修改弹窗
+    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
+      // }
+      this.showEmit = true
+    },
+    // 待下发 编辑
+    openQbbDrawer(item, index, type) {
+      // this.index_ = index
+      // console.log(item)
+      // this.boardEmitItem = item
+      // this.boardEmitItem.screenSize = this.form.devicePixel
+      // this.boardEmitItem.deviceId = this.deviceId
+      // this.boardEmitItem.type = type
+
+      this.showEmit = true
+    },
+    // 接收子组件form表单 修改
+    receiveForm(form) {
+      console.log(form, '接收子组件form表单 修改')
+      // this.contentList.splice(this.index_, 1, form)
+      // this.$forceUpdate()
+      // this.allVmsTemplate('no')
+    },
+    dialogClose() {
+      this.showEmit = false
+      this.arrowRightVisible = false
+      // setTimeout(() => {
+      //   this.allVmsTemplate('no')
+      // }, 500)
+    },
+    delMoFn(item) {
+      this.$confirm('确认要删除吗？')
+        .then(_ => {
+          this.removeItemById(this.dialogInfoList, item.id)
+          this.$message({
+            message: '删除成功!',
+            type: 'success'
+          })
+        })
+        .catch(_ => {})
+    },
+    putLeftFn(item) {
+      console.log('点击事件', item)
+      this.dialogInfoList.push(item)
+    },
+    tabClickFn(tab, event) {
+      console.log(tab, event)
+    },
+    closeDialogBtnFn() {
+      this.dialogInfoLeft = false
+      this.dialogInfoRight = false
+    },
+    showCeInfoFn() {
+      this.dialogInfoRight = !this.dialogInfoRight
     },
     subjectBtnFn(item) {
       this.subjectBtn = item.id
+    },
+    removeItemById(arr, id) {
+      const index = arr.findIndex(item => item.id === id) // 找到要删除项的索引
+      if (index !== -1) {
+        arr.splice(index, 1) // 从数组中删除该项
+      }
+    },
+    getScrollSz(w) {
+      if (w > 765) {
+        return 3
+      } else if (w > 479) {
+        return 2
+      } else if (w > 191) {
+        return 1
+      }
     }
   }
 }
-</script>xy
+</script>
 <style lang='scss' scoped>
 .home_page {
   width: 100%;
@@ -507,12 +715,258 @@ export default {
   display: flex;
 }
 .map_dialog {
-  width: 10vw;
-  height: 20vh;
+  width: 510px;
+  height: 550px;
   background-color: pink;
   position: absolute;
   left: 0px;
   top: 0px;
   transform: translate(-110%, -110%);
 }
+.dialog_info {
+  width: 49.48vw;
+  height: 56vh;
+  position: absolute;
+  top: 12%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+}
+.dialog_info_left {
+  width: 26.56vw;
+  height: 100%;
+  background-color: #114c66;
+}
+.dialog_info_right {
+  width: 22.4vw;
+  height: 51.44vh;
+  border: 2px solid #196980;
+  background-color: #114c66;
+  padding: 1vh 0.5vw;
+  overflow-y: scroll;
+}
+.dialog_info_left_t {
+  width: 100%;
+  height: 4.44vh;
+  padding: 0 1vw;
+  background-image: url('~@/assets/screen/xtb/qbbtit.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.dialog_info_left_t_txt {
+  color: #3de8ff;
+  font-size: 18px;
+}
+.dialog_info_left_t_img {
+  width: 13px;
+  height: 13px;
+  cursor: pointer;
+}
+.dialog_info_left_t_ti {
+  width: 55%;
+  height: 0.5vh;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.dialog_info_left_show {
+  width: 100%;
+  height: 30vh;
+  padding: 1vh 2vw 1vh 0.5vw;
+  position: relative;
+}
+.dialog_info_left_show_box {
+  width: 100%;
+  // height: 100%;
+  overflow-y: scroll;
+}
+.dialog_info_left_show_l {
+  width: 18.5vw;
+  // height: 4.91vh;
+  border: 2px solid #1d7890;
+  padding: 0.2vh 0;
+  display: flex;
+  justify-content: center;
+}
+.dialog_info_left_show_r {
+  width: 5vw;
+  // height: 4.91vh;
+  border: 2px solid #1d7890;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.dialog_info_left_show_l_xsq {
+  width: 13.33vw;
+  height: 100%;
+  font-size: 18px;
+  color: #ff0000;
+  text-align: center;
+  background-color: #000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.show_r_btn {
+  width: 1.67vw;
+  height: 2.96vh;
+  cursor: pointer;
+}
+.dialog_info_left_show_r_btn1 {
+  background-image: url('~@/assets/screen/xtb/gg.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.dialog_info_left_show_r_btn2 {
+  background-image: url('~@/assets/screen/xtb/xx.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.dialog_info_left_show_r_btn3 {
+  background-image: url('~@/assets/screen/xtb/zz.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.dialog_info_left_show_box_item {
+  margin-bottom: 0.5vh;
+  display: flex;
+  justify-content: space-between;
+}
+.dialog_info_left_show_bottom {
+  width: 105%;
+  height: 16.52vh;
+}
+.show_bottom_tab_item {
+  width: 50%;
+  padding: 0.5vh 0;
+  display: flex;
+  // flex-wrap: wrap;
+  // align-items: center;
+}
+.show_bottom_tab_box {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.show_bottom_tab_item_l {
+  color: #3de8ff;
+  font-size: 14px;
+}
+.show_bottom_tab_item_r {
+  color: #fff;
+  font-size: 14px;
+  margin-left: 0.5vw;
+}
+.dialog_info_left_show_ce {
+  position: absolute;
+  right: 0%;
+  top: 0%;
+  width: 24px;
+  height: 95px;
+  padding: 0.5vh 0;
+  background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
+  border-radius: 0px 0px 0px 0px;
+  opacity: 1;
+  text-align: center;
+  cursor: pointer;
+}
+.show_ce_img {
+  width: 15px;
+  height: 10px;
+  transition: transform 0.3s ease; /* 过渡效果 */
+}
+.show_ce_txt {
+  color: #fff;
+  font-size: 13px;
+}
+.dialog_info_left_show_box_empty {
+  font-size: 14px;
+  text-align: center;
+  color: #fff;
+}
+.dialog_info_right_tit {
+  color: #fff;
+  font-size: 14px;
+  margin-bottom: 0.5vh;
+}
+.dialog_info_right_show {
+  width: 100%;
+  // height: 28vh;
+}
+.dialog_info_left_show_bottom_btn {
+  width: 100%;
+  height: 5vh;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  text-align: center;
+}
+.show_bottom_btn_add {
+  width: 90px;
+  height: 23px;
+  color: #fff;
+  font-size: 14px;
+  line-height: 23px;
+  background: #00b3cc;
+  border-radius: 48px 48px 48px 48px;
+  opacity: 1;
+  margin-right: 0.5vw;
+  cursor: pointer;
+}
+.show_bottom_btn_del {
+  width: 90px;
+  height: 23px;
+  color: #fff;
+  font-size: 14px;
+  line-height: 23px;
+  background: #c87800;
+  border-radius: 48px 48px 48px 48px;
+  opacity: 1;
+  cursor: pointer;
+}
+//   background-color: #104b65;
+//   background-image: url('~@/assets/screen/xtb/qbbtit.png');
+//   background-size: 100% 100%;
+//   background-repeat: no-repeat;
+//   background-position: center;
+
+/* 通用滚动条样式 */
+::-webkit-scrollbar {
+  width: 3px; /* 设置滚动条宽度 */
+  height: 3px; /* 设置滚动条高度 */
+}
+
+::-webkit-scrollbar-track {
+  background-color: #114c66; /* 设置滚动条轨道颜色 */
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #9abce0; /* 设置滚动条滑块颜色 */
+  border-radius: 4px; /* 设置滚动条滑块圆角 */
+}
+::v-deep .el-tabs__nav-wrap::after {
+  background-color: #316076;
+}
+
+::v-deep .el-tabs__item.is-active {
+  color: #3de8ff !important;
+}
+::v-deep .el-tabs__item {
+  color: #fff !important;
+}
+::v-deep .el-tabs__active-bar {
+  background-color: #3de8ff !important;
+}
 </style>
\ No newline at end of file