情报板页面修改

ruoyi-ui/src/views/information/board/addinfo.vue

@@ -10,18 +10,24 @@
         <div v-on:ondragenter="ondragenter" v-on:drop="faceDrop" v-on:dragover="allowDrop" :style="{
             width: boardWidth + 'px',
             height: boardHeight + 'px',
+            position: 'relative',
+
+            lineHeight:boardHeight + 'px',
+            textAlign: getTextAlign(dataForm.formatStyle)
+
           }" class="blackBoard2">
           <span :style="{
               color: getColorStyle(dataForm.COLOR),
               fontSize: dataForm.FONT_SIZE,
               fontFamily: dataForm.FONT,
               zIndex: '1000',
-              left: dataForm.COORDINATE
+              position:'relative',
+              /*left: dataForm.COORDINATE
                 ? dataForm.COORDINATE.substring(0, 3) + 'px'
                 : '',
               top: dataForm.COORDINATE
                 ? dataForm.COORDINATE.substring(3, 6) + 'px'
-                : '',
+                : '',*/
               maxHeight:boardHeight + 'px',
             }" class="textBoard2 boardTextStyle" v-html="
               dataForm.CONTENT
@@ -52,9 +58,9 @@
             </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="0">左对齐</el-radio-button>
                 <el-radio-button :label="2">左右居中</el-radio-button>
-                <el-radio-button :label="3">右对齐</el-radio-button>
+                <el-radio-button :label="1">右对齐</el-radio-button>
               </el-radio-group>
               <!-- <el-button type="primary" @click="alignment(1)" size="mini"
                 >左对齐</el-button
@@ -419,7 +425,8 @@ export default {
             // COORDINATE: "",
             STATE: 'true',
             STAY: '5',
-            screenSize: devicePixel
+            screenSize: devicePixel,
+            formatStyle :'2'
           }
           this.content = '请输入内容'
         } else {
@@ -648,13 +655,15 @@ export default {
             width: ''
           }
           const templateContent = []
+          debugger
           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)
+            fontType: this.getFontStyle(this.dataForm.FONT),
+            formatStyle : this.dataForm.formatStyle
           })
           // this.$emit("addInfoMode", this.dataForm);
           addTemplate(params1, method).then(data => {
@@ -724,6 +733,15 @@ export default {
         return font
       }
     },
+    getTextAlign(font) {
+      if (font == '0'){
+        return 'left'
+      } else if (font == '1'){
+        return 'right'
+      } else {
+        return 'center'
+      }
+    },
     // 文字对齐方式
     alignment(alignmentNum) {
       this.alignmentNum = alignmentNum
@@ -739,7 +757,7 @@ export default {
 
       switch (alignmentNum) {
         // 左对齐
-        case 1:
+        case 0:
           divContent2[0].style.justifyContent = 'left'
           divContent2[0].style.alignItems = 'center'
           // textBoard2[0].style.textAlign = "left";
@@ -755,7 +773,7 @@ export default {
 
           break
         // 右对齐
-        case 3:
+        case 1:
           divContent2[0].style.justifyContent = 'right'
           divContent2[0].style.alignItems = 'center'
           // textBoard2[0].style.textAlign = "right";
@@ -788,6 +806,10 @@ export default {
       var textLeft = this.addZero(textBoard2[0].offsetLeft)
       var textTop = this.addZero(textBoard2[0].offsetTop)
       this.dataForm.COORDINATE = textLeft + textTop
+      debugger
+      if (alignmentNum != undefined){
+        this.dataForm.formatStyle = alignmentNum
+      }
       // console.log(this.dataForm.COORDINATE, "this.dataForm.COORDINATE");
     },
     addZero(num) {
@@ -861,7 +883,7 @@ export default {
   justify-content: left;
 }
 .boardTextStyle {
-  line-height: 1;
+  /*line-height: 1;*/
   caret-color: rgba(0, 0, 0, 0);
   user-select: none;
   position: absolute;

ruoyi-ui/src/views/information/board/editInfo.vue

@@ -10,14 +10,18 @@
         <div class="blackBoard1" v-on:ondragenter="ondragenter" v-on:drop="faceDrop" v-on:dragover="allowDrop" :style="{
             width: getDevicePixel(boardWidth, 0),
             height: getDevicePixel(boardHeight, 1),
+            position: 'relative',
+            lineHeight:boardHeight + 'px',
+            textAlign: getTextAlign(dataForm.formatStyle)
           }">
           <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),
+              position:'relative',
+              /*left: getCoordinate(dataForm.COORDINATE.substring(0, 3), 0),
+              top: getCoordinate(dataForm.COORDINATE.substring(3, 6), 1),*/
               maxHeight:getDevicePixel(boardHeight, 1),
             }" v-html="
               dataForm.CONTENT.replace(/\n|\r\n/g, '<br>').replace(
@@ -41,9 +45,9 @@
             </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="0">左对齐</el-radio-button>
                 <el-radio-button :label="2">左右居中</el-radio-button>
-                <el-radio-button :label="3">右对齐</el-radio-button>
+                <el-radio-button :label="1">右对齐</el-radio-button>
               </el-radio-group>
               <!-- <el-button type="info" plain @click="alignment(6)" size="mini">下对齐</el-button>
             <el-button type="info" plain @click="alignment(5)" size="mini">上下居中</el-button>
@@ -510,7 +514,7 @@ export default {
 
       switch (alignmentNum) {
         // 左对齐
-        case 1:
+        case 0:
           textBoard1[0].style.position = 'static'
           divContent1[0].style.justifyContent = 'left'
           divContent1[0].style.alignItems = 'center'
@@ -522,7 +526,7 @@ export default {
           divContent1[0].style.alignItems = 'center'
           break
         // 右对齐
-        case 3:
+        case 1:
           divContent1[0].style.justifyContent = 'right'
           divContent1[0].style.alignItems = 'center'
           textBoard1[0].style.position = 'static'
@@ -551,6 +555,7 @@ export default {
       var textTop = this.addZero(textBoard1[0].offsetTop)
 
       this.dataForm.COORDINATE = textLeft + textTop
+      this.dataForm.formatStyle = alignmentNum
     },
     addZero(num) {
       if (num < 0) {
@@ -649,7 +654,8 @@ export default {
           fontSpacing: this.dataForm.SPEED,
           coordinate: this.dataForm.COORDINATE,
           id: this.dataForm.tcontentsId,
-          templateId: this.dataForm.id
+          templateId: this.dataForm.id,
+          formatStyle: this.dataForm.formatStyle,
         })
 
         var params = {
@@ -818,6 +824,16 @@ export default {
         }
       }
     },
+
+    getTextAlign(font) {
+      if (font == '0'){
+        return 'left'
+      } else if (font == '1'){
+        return 'right'
+      } else {
+        return 'center'
+      }
+    },
     getFontSize(size) {
       if (this.boardWidth > 768) {
         let i = this.boardWidth / 768
@@ -855,7 +871,7 @@ export default {
   padding: 10px 0;
 }
 .boardTextStyle {
-  line-height: 1;
+  /*line-height: 1;*/
   caret-color: rgba(0, 0, 0, 0);
   user-select: none;
   position: absolute;
@@ -864,12 +880,12 @@ export default {
 }
 .blackBoard1 {
   background: #000000;
-  display: flex;
+  /*display: flex;
   margin: 0 auto;
   overflow: hidden;
   position: relative;
   // text-align: center;
-  align-items: center;
+  align-items: center;*/
 }
 //
 ::v-deep .el-dialog__header {