Merge branch 'develop' of http://39.106.31.193:9211/mengff/jihe-hs into develop

* 'develop' of http://39.106.31.193:9211/mengff/jihe-hs:
  测试地址改回来
  完善
  模板增删改

ruoyi-ui/package.json

@@ -98,9 +98,11 @@
     "vue-resource": "^1.5.3",
     "vue-router": "3.4.9",
     "vue-seamless-scroll": "^1.1.23",
+    "vue-slick-carousel": "^1.0.6",
     "vue-splitpane": "1.0.4",
     "vue-video-player": "^5.0.2",
     "vuedraggable": "2.24.3",
+    "vuescroll": "^4.18.1",
     "vuex": "3.6.0"
   },
   "devDependencies": {
@@ -130,7 +132,7 @@
     "plop": "2.3.0",
     "runjs": "4.4.2",
     "sass": "^1.39.0",
-    "sass-loader": "10.1.1",
+    "sass-loader": "^10.5.2",
     "script-ext-html-webpack-plugin": "2.1.5",
     "serve-static": "1.13.2",
     "snapsvg": "^0.5.1",

ruoyi-ui/src/api/board/board.js

@@ -11,14 +11,3 @@ export function getBoardList(query) {
     }
   })
 }
-
-// 查询模板列表
-export function getTemplateList(query) {
-  return request({
-    url: '/business/boardTemplate/getAllVmsTemplate',
-    method: 'get',
-    params: {
-      ...query
-    }
-  })
-}

ruoyi-ui/src/api/board/template.js

@@ -1,47 +1,49 @@
 
 import request from '@/utils/request'
 
-// 查询情报板模板列表
+// 查询模板列表
-export function getTemplates(query) {
+export function getTemplateList(query) {
   return request({
-    url: '/system/template/list',
+    url: '/business/boardTemplate/getAllVmsTemplate',
     method: 'get',
     params: query
   })
 }
 
-//获取情报板模板详细信息
-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 addTemplate(data) {
   return request({
-    url: '/system/template',
+    url: '/business/boardTemplate',
     method: 'post',
     data: data
   })
 }
 
-//新增情报板模板内容
+//修改情报板模板
-export function addTemplateContent(data) {
+export function editTemplate(data) {
   return request({
-    url: '/system/content',
+    url: '/business/boardTemplate',
-    method: 'post',
+    method: 'put',
     data: data
   })
 }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 //修改情报板模板内容
 export function editTemplateContent(data) {
   return request({
@@ -51,24 +53,56 @@ export function editTemplateContent(data) {
   })
 }
 
-//修改情报板模板
+// 删除情报板模板
-export function editTemplate(data) {
+export function deleteTemplate(id) {
   return request({
-    url: '/system/template',
+    url: '/business/boardTemplate/' + id,
-    method: 'put',
+    method: 'delete'
-    data: data
   })
 }
 
-// 删除情报板模板
+
-export function deleteTemplate(id) {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//获取情报板模板详细信息
+export function getTemplateInfo(id) {
   return request({
     url: '/system/template/' + id,
-    method: 'delete'
+    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({

ruoyi-ui/src/assets/styles/JiHeExpressway.scss

@@ -42,6 +42,9 @@
     &::placeholder {
       color: $textColor;
     }
+    &[disabled]{
+      color:#667 !important;
+    }
   }
 
   .el-checkbox-group {

ruoyi-ui/src/common/scrollbar.js

@@ -0,0 +1,39 @@
+export default {
+    vuescroll: {
+        mode: "native",  //模式:pc natice 移动端是slice
+        sizeStrategy: 'percent',  //父元素是否是固定的是就percent 不是就是number 填一个数值
+        detectResize: true,  //内容是否根据页面调整
+      },
+      scrollPanel: {
+        initialScrollY: false,  //初始化距离顶部的位置
+        initialScrollX: false,  //初始化距离左侧的位置
+        scrollingX: false,  // 是否开启横向滚动
+        scrollingY: true,  //是否开启竖向滚动
+        speed: 300,       //多长时间内完成一次滚动。 数值越小滚动的速度越快。
+        easing: 'easeInQuad', //默认动画
+        verticalNativeBarPos: "right", 
+        maxHeight: undefined,  //这是滚动条最大高度,内容高度小于 maxHeight 时高度自适应，超出的话出现滚动条。
+        maxWidth: undefined,   //这是滚动条最大宽度,内容宽度小于 maxWidth 时高度自适应，超出的话出现滚动条。
+      },
+      rail: {
+        background: "#000000", //轨道的背景色。
+        opacity: 0.4,            //轨道的透明度。 0是透明，1是不透明
+        size: "8px",             //轨道的尺寸。
+        specifyBorderRadius: false, //是否指定轨道的 borderRadius， 如果不那么将会自动设置。
+        gutterOfEnds: null,
+        gutterOfSide: "0px",      //距离容器的距离
+        keepShow: false,          //是否即使 bar 不存在的情况下也保持显示。
+      },
+      bar: {
+        showDelay: 500,             //在鼠标离开容器后多长时间隐藏滚动条。
+        onlyShowBarOnScroll: false,  //是否只在滚动时显示 bar。
+        keepShow: true,            //滚动条是否保持显示。
+        background: "#007799",      //滚动条背景色。
+        opacity: 1,                 //滚动条透明度。
+        hoverStyle: false,
+        specifyBorderRadius: false,  //是否指定滚动条的 borderRadius， 如果不那么和轨道的保持一致。
+        minSize: false,              //为 bar 设置一个最小尺寸, 从 0 到 1. 如 0.3, 代表 30%.
+        size: "8px",                 //bar 的尺寸。
+        disable: false,              //是否禁用滚动条。
+      }
+};

ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue

@@ -95,7 +95,7 @@ export default {
     position: absolute;
     background: rgba(78, 174, 204, .6);
     height: 2px;
-    width: calc(sqrt(pow(var(--clip-width-num), 2) * 2) * 1px);
+    // width: calc(sqrt(pow(var(--clip-width-num), 2) * 2) * 1px);
     right: calc(var(--clip-width) / -2);
     top: -2px;
     transform-origin: top left;

ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo.vue → ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardInfoEditor.vue

@@ -1,14 +1,18 @@
 <template>
    <el-dialog :title="mode=='add'?'新增':'编辑'" :visible.sync="dialogVisible" width="43%" append-to-body :close-on-click-modal="false">
+    <!-- <div style="color:#fff">
+      <p>类型:{{type}} 增删改类型:{{mode}}</p>
+      <p>模板id:{{ tpl }}</p>
+    </div> -->
         <div class="dialogStyleBox">
           <div class="dialogLine"></div>
           <div class="dialogCloseButton"></div>
         </div>
-        <el-card class="box-card">
+        <el-card>
-          <BoardPreview :tpl="node"></BoardPreview>
+          <BoardPreview style="height: 200px; width: 100%;" :boardWH="screenSize" :tpl="dataForm"></BoardPreview>
         </el-card>
         <el-card>
-          <el-form :model="dataForm" :rules="dataRule" label-width="90px" ref="dataForm" size="mini">
+          <el-form :model="dataForm" :rules="dataRule" label-width="110px" ref="dataForm" size="mini">
             <el-row :gutter="24">
               <el-col :span="8">
                 <el-form-item label="所属类别" v-if="type == 'template'">
@@ -19,10 +23,10 @@
                 </el-form-item>
               </el-col>
               <el-col class="infoBoardButton" :span="16">
-                <el-radio-group v-model="dataForm.textAlign">
+                <el-radio-group v-model="dataForm.formatStyle">
-                  <el-radio-button label="left">左对齐</el-radio-button>
+                  <el-radio-button label="0">左对齐</el-radio-button>
-                  <el-radio-button label="center">中间对齐</el-radio-button>
+                  <el-radio-button label="2">中间对齐</el-radio-button>
-                  <el-radio-button label="right">右对齐</el-radio-button>
+                  <el-radio-button label="1">右对齐</el-radio-button>
                 </el-radio-group>
               </el-col>
             </el-row>
@@ -30,12 +34,12 @@
             <el-row :gutter="24" style="display: flex; flex-wrap: wrap;width:100%">
               <el-col :span="24">
                 <el-form-item label="详细内容" prop="content">
-                  <el-input type="textarea"  placeholder="详细内容" v-model="dataForm.content"></el-input>
+                  <el-input type="textarea" :rows="6" placeholder="详细内容" v-model="dataForm.content"></el-input>
                 </el-form-item>
               </el-col>
               <el-col :span="8">
                 <el-form-item label="字体颜色">
-                  <el-select v-model="dataForm.color" filterable placeholder="请选择">
+                  <el-select v-model="dataForm.fontColor" filterable placeholder="请选择">
                     <el-option v-for="item in colorList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
                     </el-option>
                   </el-select>
@@ -60,7 +64,7 @@
 
               <el-col :span="8">
                 <el-form-item label="停留时间(秒)">
-                  <el-input-number :min="0" v-model="dataForm.stay" style="width: 100%" />
+                  <el-input-number :min="0" v-model="dataForm.stopTime"/>
                 </el-form-item>
               </el-col>
               <el-col :span="8">
@@ -90,10 +94,12 @@
       </el-dialog>
 </template>
 <script>
-import { getTemplateInfo, addTemplate, addTemplateContent, editTemplateContent, editTemplate, deleteTemplate, getTemplateContent, getGalleryList, getFontSizeByDevicePixel, uploadBoardEditInfo } from '@/api/board/template'
+import { getTemplateList, addTemplate, addTemplateContent, editTemplateContent, editTemplate, deleteTemplate, getTemplateContent, getGalleryList, getFontSizeByDevicePixel, uploadBoardEditInfo } from '@/api/board/template'
 import { devicessize } from '@/api/information/api.js'
 import { checkIotBoardContent } from '@/api/board/vocabulary'
 import BoardPreview from "./BoardPreview.vue"
+import infoBoardUtils from "@screen/utils/infoBoard.js"
+import { after } from 'lodash'
 export default {
   data() {
     return {
@@ -123,7 +129,6 @@ export default {
       width: '400',
       height: '40',
       // content: "",
-      fontColor: 'FFFF00',
       fontSize: '24',
       fontType: 'KaiTi',
       fontSpacing: 0,
@@ -133,12 +138,12 @@ export default {
       ispreviewContent: -1,
       dataForm: {
         category:"",
-        textAlign:"center",
+        formatStyle:"",
         content:"",
-        color:"",
+        fontColor:"",
         fontSize:"",
         fontFamily:"",
-        stay:5,
+        stopTime:"",
         inScreenMode:"",
         screenSize:""
       },
@@ -184,16 +189,15 @@ export default {
       templateCategoryList: [],
       infoType: '',
       devicePixelBoolean: false,
-      categoryRules: false,
+      categoryRules: false
-      node:null
     }
   },
   props:{
-    mode:{
+    mode:{    //add edit
       type:String,
       default:""
     },
-    type: {
+    type: {   //template board
       type: String,
       default: ""
     },
@@ -234,62 +238,62 @@ export default {
     "tpl.id":{
       handler(newV){
         // { "id": 3, "category": "0", "content": "保持车距，控制车速", "screenSize": "768*64", "fontColor": "FFFF00", "fontSize": "64", "fontType": "2", "fontSpacing": "0", "rollingSpeed": null, "stopTime": "50", "inScreenMode": "1", "formatStyle": "2", "remark": null, "createTime": "2024-01-06 10:40:19", "updateTime": "2024-01-06 11:04:53" }
-        if(this.mode == "edit"){
+          this.initData();
-          this.____convertData();
       }
+    },
+    "mode": {
+      handler(newV) {
+        this.initData();
       }
     }
   },
   mounted() {
-    this.node = this.tpl;
   },
   created() {
     this.getDicts('iot_device_font_type').then(res => {
       this.fontTypeList = res.data
-      this.dataForm.fontFamily = res.data[0].dictValue;
       // console.log(this.fontTypeList, "字体类型");
     })
     this.getDicts('iot_devices_font_color').then(res => {
       this.colorList = res.data;
-      this.dataForm.color = res.data[0].dictValue;
       // console.log(this.colorList, "字体颜色");
     })
     this.getDicts('iot_device_font_inScreen_mode').then(res => {
       this.inScreenModeList = res.data
-      this.dataForm.inScreenMode = res.data[0].dictValue;
       // console.log(this.inScreenModeList, "入屏方式");
     })
     this.getDicts('iot_template_category').then(res => {
       this.templateCategoryList = res.data;
-      this.dataForm.category = res.data[0].dictValue;
     })
     this.getDicts('iot_device_font_size').then(res => {
       this.fontSizeList = res.data;
-      this.dataForm.fontSize = res.data[0].dictValue;
       // this.dataForm.FONT_SIZE = res.data[1].dictValue
     })
-    this.getdevicessize()
   },
   methods: {
-    ____convertData(){
+    initData(){
-
+      // getTemplateList({id:this.tpl.id}).then(res=>{
+        //    console.log(res.data , "++++++++===========");
+        // })
+      if (this.mode == "edit") {
+        this.dataForm = infoBoardUtils.sourceFormat(this.tpl, this.type);
+      }else{
+        this.dataForm = {
+          category      : this.templateCategoryList[0].dictValue,
+          formatStyle   : 0,
+          content       : "请输入文字内容",
+          fontColor     : this.colorList[0].dictValue,
+          fontSize      : this.fontSizeList[0].dictValue,
+          fontFamily    : this.fontTypeList[0].dictValue,
+          stopTime      : 5,
+          inScreenMode  : this.inScreenModeList[0].dictValue,
+          screenSize    : this.screenSize
+        }
+      }
     },
     onClose(){
         this.dialogVisible = false;
     },
-    getFontSizeList(type) {
-      
-
-      //TODO 测试数据 后期需转接口
-      /*getFontSizeByDevicePixel(this.dataForm.screenSize).then((res) => {
-        console.log(res, "根据分辨率筛字体大小");
-        this.fontSizeList = res.data.fontSizeList;
-        this.dataForm.FONT_SIZE = res.data.defaultFont;
-        if(type){
-          this.alignment(2)
-        }
-      });*/
-    },
     // 表单提交
     async dataFormSubmitHandle() {
       if (!this.dataForm.content.trim()) {
@@ -298,7 +302,7 @@ export default {
       if (this.dataForm.content.indexOf('\\')>=0) {
         return this.$modal.msgError("内容不能含有特殊字符'\\\\'")
       }
-      this.$emit("submit");
+
       //走接口检验内容是否包含敏感字段
       /*checkIotBoardContent(this.dataForm.CONTENT).then(response => {
         if (response.data == 0) {
@@ -383,81 +387,30 @@ export default {
         }
       })*/
 
+      let data = infoBoardUtils.saveFormat(this.dataForm, this.type);
+
       this.loading = true
       // let templateId = "";
-      let method = 'put'
+
-      if (this.isAdd) {
+      if(this.type == "template"){
-        if (this.infoType == 1) {
+        if(this.mode=='edit'){
-          // 不走接口 存到待下发信息里
+          editTemplate(data).then(res=>{
-          this.dataForm.STAY = Number(this.dataForm.STAY) * 10
+            afterSave("修改");
-          this.$emit('addInfo', this.dataForm)
+          });
-        } else {
+        }else{
-          // 走接口 存到信息模板里
+          addTemplate(data).then(res => {
-          const params1 = {
+            afterSave("新增");
-            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, "返回结果");
-        // });
       }
+      
+      const afterSave = (para)=>{
+        this.$message.success(para + '成功!')
         this.loading = false
         this.dialogVisible = false
-      this.isAdd = false
+        this.$emit("afterSubmit" , {type:this.type, mode:this.mode});
-      this.$emit('refreshDataList', this.dataForm)
+      }
-      var textBoard2 = document.getElementsByClassName('textBoard2')
+
-      textBoard2[0].style.position = 'absolute'
     },
   }
 }

ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardPreview.vue

@@ -1,9 +1,8 @@
 <template>
     <div class="boardPreview" ref="compBox">
         <div class="boardBox" :style="boardStyle">
-            <span class="boardTxt" v-for="item in contentArr" :style="boardTxtStyle">
+            <p class="boardTxt" v-for="item,index in contentArr" :key="index" :style="boardTxtStyle" v-html="item">
-            {{ item }}
+            </p>
-            </span>
         </div>
     </div>
 </template>
@@ -15,7 +14,7 @@ export default {
             boardStyle:null,
             boardTxtStyle:null,
             contentArr:{
-                type:Object,
+                type:Array,
                 default:()=>[]
             }
         }
@@ -43,6 +42,7 @@ export default {
             //     "createTime": "2024-01-06 10:40:19", 
             //     "updateTime": "2024-01-06 11:04:53"
             // }
+            
             type: Object,
             default: {}
         },
@@ -50,14 +50,16 @@ export default {
     watch:{
         boardWH:{
             handler(newV){
-                this.boardScale();
+                this.setStyle();
             },
             immediate:true
         },
-        "tpl.id":{
+        tpl:{
             handler(newV){
                 this.contentArr = this.tpl.content.replace(/\n|\r\n/g, '&&&&&').replace(/ /g, '&nbsp').split('&&&&&');
+                this.setStyle();
             },
+            deep:true,
             immediate:true
         }
     },
@@ -66,7 +68,7 @@ export default {
     mounted(){
     },
     methods:{
-        boardScale() {
+        setStyle() {
             this.$nextTick(() => {
                 let boxW = this.$refs["compBox"].offsetWidth;
                 let boxH = this.$refs["compBox"].offsetHeight;
@@ -79,17 +81,14 @@ export default {
                 }
                 this.boardStyle =  {
                     width: `${arr[0] * scale}px`,
-                    height: `${arr[1] * scale}px`
+                    height: `${arr[1] * scale}px`,
+                    "align-items" : ['flex-start', 'flex-end', 'center'][this.tpl.formatStyle]
                 }
                 this.boardTxtStyle = {
                     "color": "#" + this.tpl.fontColor, 
-                    "font-size": `${this.tpl.fontSize * scale}px`, 
+                    "font-size": `${this.tpl.fontSize.replace('px','')*scale}px`,
                     "font-family": this.fontTypeDic[this.tpl.fontType],
-                    // "fontSpacing": "0", 
+                    "min-height": `${this.tpl.fontSize.replace('px', '') * scale}px`
-                    // "rollingSpeed": null, 
-                    // "stopTime": "50", 
-                    // "inScreenMode": "1", 
-                    // "formatStyle": "2", 
                 }
             })
         }
@@ -105,11 +104,13 @@ export default {
     .boardBox {
         background-color: #000;
         display: flex;
+        overflow: hidden;
         flex-direction: column;
-        justify-content: space-around;
+        justify-content: flex-start;
         .boardTxt{
             color: #f00;
             line-height: 1;
+            margin-bottom: 0;
         }
     }
 }

ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue

@@ -1,21 +1,13 @@
 <template>
-  <div class="container infoBoardBox" style="height:94vh;;background-color: #11232a;">
+  <div class="infoBoardBox">
-    <div style="
+    <div class="infoBoardCon">
-        height: 100%;
+      <div style="width: 20%" class="part partLeft">
-        margin-left: 0px;
+          <div class="partTitle boardListTitle">
-        margin-right: 0px;
-        display: flex;
-        justify-content: space-between;
-      ">
-      <div style="width: 20%" class="verticalBox">
-        <div style="width:100%;height:100%;padding:1vh 0.2vw;">
-          <div style="width:100%;height:100%;background-color:#112d3b;padding:0 0 1vh 0;">
-            <div class="bigTitle qbbBigTitle">
             <img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt="">
             <div>情报板列表</div>
             <img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt="">
           </div>
-            <el-form ref="form" style="padding:0 0.5vw;" :model="form">
+          <el-form ref="form" :model="form" class="partCon">
             <el-form-item style="margin-bottom: 12px;">
               <el-select v-model="form.selectedDirection" size="medium" placeholder="请选择方向" style="overflow: hidden;width: 100%;">
                 <el-option v-for="item in boardDirectionList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" @click.native="____changeDirection(item.dictValue)" />
@@ -45,13 +37,9 @@
             </el-form-item>
           </el-form>
       </div>
-        </div>
+      <div style="width: 37.8%" class="part partMiddle">
-      </div>
-      <div style="width: 37.8%" class="verticalBox verticalBoxBorderLeft">
-        <div style="width:100%;height:100%;padding:1vh 0.2vw;">
-          <div style="width:100%;height:100%;background-color:#112d3b;">
       
-            <div class="bigTitle awaitBigTitle">
+          <div 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="">
@@ -66,7 +54,7 @@
               <el-button type="primary" @click="publishInfo" :disabled="contentList.length == 0">发布信息</el-button>
             </div>
           </div>
-            <div class="contentBox">
+          <div class="partCon">
             <el-table :data="contentList" row-key="ID" v-loading="loading" style="height: 100%;padding: 0 1vh; background-color: #112d3b;overflow-y: scroll;" :key="toggleIndex">
               <el-table-column width="545">
                 <template slot-scope="scope">
@@ -117,15 +105,11 @@
               </el-table-column>
             </el-table>
           </div>
-          </div>
+
-        </div>
       </div>
       <!-- 信息模板 -->
-      <div style=" width: 42.2%" class="verticalBox verticalBoxBorderLeft">
+      <div style=" width: 42.2%" class="part partRight">
-        <div style="width:100%;height:100%;padding:1vh 0.2vw;">
+          <div class="partTitle partDeviceTempateTitle">
-          <div style="width:100%;height:100%;background-color:#112d3b">
-
-            <div class="bigTitle awaitBigTitle">
             <div>
               <div style="display: flex;justify-content: start !important;align-items: center;">
                 <img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt="">
@@ -139,11 +123,12 @@
               <el-button type="primary" @click="____onAddTemplate">添加模板</el-button>
             </div>
           </div>
-            <div class="templateBox">
+          <div class="partCon">
+             <vuescroll :ops="scrollOptions" class="templateBox">
               <div v-for="(item,index) in templateAvailable" :key="item.dictValue">
                 <!-- 原来是<el-collapse v-model="activeNames"> -->
                 <h3>{{ item.dictLabel }}</h3>
-                  <div v-for="(itm, indx) in item.list" :key="indx" class="infoItem">
+                  <div v-for="(itm, indx) in item.list" :key="indx" class="tplItem">
                     <!-- 模板内容 -->
                     <BoardPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardPreview>
                     <!-- <div class="infoPreview">
@@ -160,13 +145,12 @@
                         <p @click="____onEditTemplate(itm)" class="btn btnEdit"></p>
                       </el-tooltip>
                       <el-tooltip content="删除" placement="top">
-                        <p @click="handleDelete(itm)" class="btn btnDelete"></p>
+                        <p @click="____onDeleteTemplate(itm)" class="btn btnDelete"></p>
                       </el-tooltip>
                     </div>
                   </div>
               </div>
-            </div>
+              </vuescroll>
-          </div>
           </div>
       </div>
     </div>
@@ -185,22 +169,26 @@
         </el-col>
       </el-row>
     </el-dialog>
-    <addinfo @submit="____onEditSubmit" :mode="editDialog.mode" :type="editDialog.type" :visible.sync="editDialog.visible" :screenSize="selectedSize" :tpl="editDialog.tpl"></addinfo>
+    <BoardInfoEditor @afterSubmit="____onEditSubmit" :mode="editDialog.mode" :type="editDialog.type" :visible.sync="editDialog.visible" :screenSize="selectedSize" :tpl="editDialog.tpl"></BoardInfoEditor>
     <!-- <editInfo :boardEmitItem="this.boardEmitItem" @receiveForm="receiveForm" v-if="this.showEmit" @dialogClose="dialogClose"></editInfo> -->
   </div>
 </template>
 <script>
 import Sortable from 'sortablejs'
-import addinfo from './addinfo'
+import BoardInfoEditor from './BoardInfoEditor'
 import editInfo from './editInfo'
 import boardData from './boardData'
 import { getUserDeptId } from '@/api/system/user'
 import { listTunnels, devicessize, information, getBoardInfo, getBoardEditInfo, getboardSizeDic, getBoardContentData, deviceControl } from '@/api/information/api.js'
 import { uploadBoardEditInfo, getAllVmsTemplate, addTemplate, addTemplateContent, getBoardContent, deleteTemplate, splicingBoard } from '@/api/board/template'
 import { invokedFunction, getDeviceRealtimeProperty } from '@/api/device/device'
-import { getBoardList , getTemplateList } from '@/api/board/board'
+import { getBoardList } from '@/api/board/board'
+import { getTemplateList } from '@/api/board/template'
 import BoardPreview from './BoardPreview'
 
+import vuescroll from 'vuescroll'
+import scrollOptions from '@/common/scrollbar.js'
+
 // 对象深拷贝
 export const deepClone = data => {
   // 封装的判断数据类型的方法
@@ -229,9 +217,10 @@ export const deepClone = data => {
 export default {
   name: 'Device',
   components: {
-    addinfo,
+    BoardInfoEditor,
     editInfo,
-    BoardPreview
+    BoardPreview,
+    vuescroll
   },
   dicts: ['iot_board_direction'],
 
@@ -284,7 +273,8 @@ export default {
         type:"",
         visible:false,
         tpl:{}
-      }
+      },
+      scrollOptions
     }
   },
   watch: {
@@ -371,7 +361,7 @@ computed:{
     rowDrop() {
       if (JSON.parse(JSON.stringify(this.contentList)).length > 0) {
         // 要侦听拖拽响应的DOM对象
-        const tbody = document.querySelector('.contentBox .el-table__body-wrapper tbody')
+        const tbody = document.querySelector('.partCon .el-table__body-wrapper tbody')
         const _this = this
         Sortable.create(tbody, {
           // 结束拖拽后的回调函数
@@ -442,36 +432,14 @@ computed:{
         tpl
       }
     },
-    ____onEditSubmit(){
+    ____onEditSubmit(para){
-      console.log("提交后外层的回调");
+      this.____refreshPageData(para);
     },
-    // 板子分辨率换算
+    ____refreshPageData(para){
-    getScreenSize(num, type) {
+      if (para.type == 'template') {
-      // console.log(num)
+        this.____getAllTemplate().then(this.____onChangeSize)
-      let width = num.split('*')[0]
-      let height = num.split('*')[1]
-      // 实际分辨率比页面板子小
-      if (width <= 450 && height <= 75) {
-        if (type == 'width') {
-          return width
-        } else if (type == 'height') {
-          return height
-        }
-      } else {
-        // 实际分辨率比页面板子大
-        if (width / 450 > height / 75) {
-          if (type == 'width') {
-            return 450
-          } else if (type == 'height') {
-            return height / (width / 450)
-          }
       } else {
-          if (type == 'width') {
+
-            return width / (height / 75)
-          } else if (type == 'height') {
-            return 75
-          }
-        }
       }
     },
 
@@ -586,51 +554,19 @@ computed:{
     },
 
     /** 删除按钮操作 */
-    handleDelete(row) {
+    ____onDeleteTemplate(row) {
-      const ids = row.id || this.ids
+      const id = row.id;
-      let content = '是否确认删除选中数据项?'
+      let content = '确认删除?'
-      if (ids == null || ids == undefined || ids == [] || ids == '') {
-        content = '是否确认删除当前情报板模板?'
-      }
       this.$confirm(content, '警告', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
+      }).then(()=>{
+          deleteTemplate(id).then(()=>{
+              this.$message.success('删除成功!');
+              this.____refreshPageData({type:"template"});
           })
-        .then(function () {
+      });
-          return deleteTemplate(ids)
-        })
-        .then(() => {
-          this.allVmsTemplate('no')
-          this.$modal.msgSuccess('删除成功')
-        })
-    },
-
-    // 情报板管理右侧查询接口
-    allVmsTemplate(type) {
-      const param = {
-        selectedPixel: this.form.selectedPixel
-      }
-
-      //TODO 接口
-      getAllVmsTemplate(param).then(res => {
-        let data = res.data
-        console.log(res, '情报板管理右侧查询接口')
-        let jArr = []
-
-        for (let j = 0; j < this.tplCategory.length; j++) {
-          let arr = this.tplCategory[j]
-          let brr = data[j]
-          arr.list = brr
-          jArr.push(j.toString())
-        }
-        if (type != 'no') {
-          this.activeNames = jArr
-        }
-        this.$forceUpdate()
-        console.log(this.tplCategory, '新模板')
-      })
-
     },
 
     // 删除中间模板
@@ -1113,28 +1049,35 @@ computed:{
 }
 </script>
 <style lang="scss" scoped>
-.container {
+.infoBoardBox {
-  .verticalBox {
+  .infoBoardCon{
+    width: 100%;
     height: 100%;
-    padding: 10px 5px;
+    display: flex; flex-direction: row;
-
+    align-items: stretch;
-    .bigTitle {
+    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: 0.8vw;
+        font-size: 18px;
         align-items: center;
       }
   
-    .contentBox {
+      .partCon {
-      width: 100%;
+        flex: 1;
-      height: calc(100% - 46px);
+        height: 0;
-      padding: 0 0 1vh 0;
+        padding:10px;
-      /* // overflow: auto; */
-
         .con {
           /* // border: 1px solid #05afe3; */
           height: 75px;
@@ -1155,13 +1098,10 @@ computed:{
       }
   
       .templateBox {
-      width: 100%;
+        width: 100%; height: 100%;
-      height: calc(100% - 46px);
+        .tplItem {
-      padding: 0 0 1vh 0;
+          margin-right: 14px;
-
-      .infoItem {
           display: flex;
-        box-sizing: content-box;
           align-items: stretch;
           margin-bottom: 10px;
   
@@ -1238,6 +1178,7 @@ computed:{
         }
       }
     }
+  }
 
   .checkbox {
     label {
@@ -1295,7 +1236,7 @@ computed:{
   color: #05afe3 !important;
 }
 
-.qbbBigTitle {
+.boardListTitle {
   // margin-top: 1vh;
   color: #fff;
   height: 35px !important;
@@ -1313,10 +1254,10 @@ computed:{
   height: 22px;
   margin: 0 0.5vw 0 0.5vw;
 }
-.awaitBigTitle {
+.partDeviceTempateTitle {
   width: 100%;
   color: #fff;
-  padding-right: 6vw !important;
+  padding-right: 110px !important;
   height: 35px !important;
   background-image: url('~@/assets/screen/xtb/qbbti.png');
   background-size: 100% 100%;

ruoyi-ui/src/views/JiHeExpressway/utils/infoBoard.js

@@ -0,0 +1,23 @@
+
+export default {
+    sourceFormat(data, type){
+        let data1 = _.cloneDeep(data);
+        data1.stopTime = data1.stopTime*0.1
+        if(type=='template'){
+
+        } else {
+
+        }
+        return data1
+    },
+    saveFormat(data, type) {
+        let data1 = _.cloneDeep(data);
+        data1.stopTime = data1.stopTime * 10 + "";
+        if (type == 'template') {
+
+        } else {
+
+        }
+        return data1;
+    }
+}

ruoyi-ui/vue.config.js

@@ -42,7 +42,8 @@ module.exports = {
         // target: `http://10.0.81.201:8080`,
         // target: `http://10.168.73.36:8080`, // 周乐
         target: `http://10.168.77.209:8080`, // 刘朋
-        // target: `http://10.168.66.196:8080`,
+        // target: `http://10.168.66.196:8080`, //刘文阁
+        // target: `http://10.168.56.206:8087`, //孟
         changeOrigin: true,
         pathRewrite: {
           ["^" + process.env.VUE_APP_BASE_API]: "",