From 2d8812212cfda75cdd9c8bd5359143b13b3f1eda Mon Sep 17 00:00:00 2001
From: fuhao <fuhao@ciqihuo.net>
Date: Tue, 10 Sep 2024 16:37:05 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=A2=84=E7=BD=AE=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E4=BC=98=E5=8C=96):?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/board/component/TextPreview.vue |  23 +-
 ruoyi-ui/src/views/board/content/index.vue    | 255 ++++++++++--------
 2 files changed, 158 insertions(+), 120 deletions(-)

diff --git a/ruoyi-ui/src/views/board/component/TextPreview.vue b/ruoyi-ui/src/views/board/component/TextPreview.vue
index 734bb78a..3486a353 100644
--- a/ruoyi-ui/src/views/board/component/TextPreview.vue
+++ b/ruoyi-ui/src/views/board/component/TextPreview.vue
@@ -35,7 +35,7 @@ export default {
     };
   },
   props: {
-    fontStyle: {
+    fontFamily: {
       type: String,
       default: 'normal',
     },
@@ -73,7 +73,15 @@ export default {
     },
     content: {
       type: String,
-      default: '这里是示例内容，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',
+      default: '这里是示例内容',
+    },
+    horizontalCenter: {
+      type: Boolean,
+      default: false,
+    },
+    verticalCenter: {
+      type: Boolean,
+      default: false,
     },
   },
   computed: {
@@ -85,20 +93,19 @@ export default {
         background: '#000000',
         overflow: 'hidden',
         display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+        alignItems: this.verticalCenter ? 'center' : 'flex-start',
+        justifyContent: this.horizontalCenter ? 'center' : 'flex-start',
       };
     },
     textStyle() {
       return {
-        position: 'absolute',
-        top: `${-this.fontY * this.scale}px`,
-        left: `${this.fontX * this.scale}px`,
-        fontStyle: this.fontStyle,
+        fontFamily: this.fontFamily,
+        whiteSpace: 'preserve-breaks',
         color: this.fontColor,
         fontSize: `${this.fontSize * this.scale}px`,
         letterSpacing: `${this.letterSpacing * this.scale}px`,
         lineHeight: `${this.lineHeight}`,
+        transform: `translate(${this.horizontalCenter ? this.fontX * this.scale : this.fontX}px, ${this.verticalCenter ? this.fontY * this.scale : this.fontY}px)`,
       };
     },
   },
diff --git a/ruoyi-ui/src/views/board/content/index.vue b/ruoyi-ui/src/views/board/content/index.vue
index 15927470..c090d0aa 100644
--- a/ruoyi-ui/src/views/board/content/index.vue
+++ b/ruoyi-ui/src/views/board/content/index.vue
@@ -60,14 +60,14 @@
     </el-row>
 
     <el-table v-loading="loading" :data="contentList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="唯一编号" align="center" prop="id" />
-      <el-table-column label="内容模版名称" align="center" prop="name" />
-      <el-table-column label="情报板尺寸" align="center" prop="boardSizeTypeName" />
-      <el-table-column label="信息类型" align="center" prop="typeName" />
-      <el-table-column label="预置内容" align="center" prop="content" />
-      <el-table-column label="播放时间" align="center" prop="playTime" />
-      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="唯一编号" align="center" prop="id"/>
+      <el-table-column label="内容模版名称" align="center" prop="name"/>
+      <el-table-column label="情报板尺寸" align="center" prop="boardSizeTypeName"/>
+      <el-table-column label="信息类型" align="center" prop="typeName"/>
+      <el-table-column label="预置内容" align="center" prop="content"/>
+      <el-table-column label="播放时间" align="center" prop="playTime"/>
+      <el-table-column label="备注" align="center" prop="remark"/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -97,85 +97,114 @@
     />
 
     <!-- 添加或修改预置信息及模版对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="auto">
-        <el-form-item label="内容模版名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入预置信息名称" />
-        </el-form-item>
-        <el-form-item label="预置信息类型" prop="infoType">
-          <el-cascader
-            v-model="form.infoType"
-            :options="planTypeOptions"
-            :props="{lable: 'lable', value: 'id', expandTrigger:'hover', emitPath: false}"
-          />
-        </el-form-item>
-        <el-form-item label="情报板尺寸" prop="boardSizeType">
-          <el-select
-            v-model="form.boardSizeType"
-            placeholder="请选择">
-            <el-option
-              v-for="dict in this.boardTypeOptions"
-              :key="dict.id"
-              :label="dict.name"
-              :value="dict.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="预置内容" prop="content">
-          <el-input v-model="form.content" placeholder="请输入预置内容"/>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入备注" />
-        </el-form-item>
-        <el-form-item label="字体样式" prop="fontStyle">
-          <el-select
-            v-model="form.fontStyle"
-            placeholder="请选择字体样式">
-            <el-option
-              v-for="dict in dict.type.font_style"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="字体颜色" prop="fontColor">
-          <el-select
-            v-model="form.fontColor"
-            placeholder="请选择字体颜色">
-            <el-option
-              v-for="dict in dict.type.font_color"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="字体大小" prop="fontSize">
-          <el-input-number :min="20" :max="50" v-model="form.fontSize" placeholder="请输入字体大小" />
-        </el-form-item>
-        <el-form-item label="字体间距" prop="letterSpacing">
-          <el-input-number :min="0" v-model="form.letterSpacing" placeholder="请输入字体间距" />
-        </el-form-item>
-        <el-form-item label="字体坐标X" prop="fontPositionX">
-          <el-input-number v-model="form.fontPositionX" placeholder="请输入字体坐标X" />
-        </el-form-item>
-        <el-form-item label="字体坐标Y" prop="fontPositionY">
-          <el-input-number v-model="form.fontPositionY" placeholder="请输入字体坐标Y" />
-        </el-form-item>
-        <el-form-item label="播放时间" prop="playTime">
-          <el-input-number :min="0" v-model="form.playTime" placeholder="请输入播放时间" />
-        </el-form-item>
-        <text-preview
-          fontStyle="SongTi"
-          :fontSize="form.fontSize"
-          :letterSpacing="form.letterSpacing"
-          :fontX="form.fontPositionX"
-          :fontY="form.fontPositionY"
-          :backgroundWidth="bgSize.width"
-          :backgroundHeight="bgSize.height"
-          :lineHeight="1"
-          :content="form.content" />
+        <el-row :gutter="0">
+          <el-col :span="8">
+            <el-form-item label="内容模版名称" prop="name">
+              <el-input v-model="form.name" placeholder="请输入预置信息名称"/>
+            </el-form-item>
+            <el-form-item label="预置信息类型" prop="infoType">
+              <el-cascader
+                v-model="form.infoType"
+                :options="planTypeOptions"
+                :props="{lable: 'lable', value: 'id', expandTrigger:'hover', emitPath: false}"
+              />
+            </el-form-item>
+            <el-form-item label="情报板尺寸" prop="boardSizeType">
+              <el-select
+                v-model="form.boardSizeType"
+                placeholder="请选择">
+                <el-option
+                  v-for="dict in this.boardTypeOptions"
+                  :key="dict.id"
+                  :label="dict.name"
+                  :value="dict.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="预置内容" prop="content">
+              <el-input type="textarea" v-model="form.content" placeholder="请输入预置内容"/>
+            </el-form-item>
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="form.remark" placeholder="请输入备注"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="字体大小" prop="fontSize">
+              <el-input-number :controls="false" :min="20" :max="50" v-model="form.fontSize" placeholder="请输入字体大小" size="small" />
+            </el-form-item>
+            <el-form-item label="字体间距" prop="letterSpacing">
+              <el-input-number :controls="false" :min="0" v-model="form.letterSpacing" placeholder="请输入字体间距" size="small" />
+            </el-form-item>
+            <el-form-item label="字体坐标X" prop="fontPositionX">
+              <el-input-number :controls="false" v-model="form.fontPositionX" placeholder="请输入字体坐标X" size="small"/>
+            </el-form-item>
+            <el-form-item label="字体坐标Y" prop="fontPositionY">
+              <el-input-number :controls="false" v-model="form.fontPositionY" placeholder="请输入字体坐标Y" size="small"/>
+            </el-form-item>
+            <el-form-item label="播放时间" prop="playTime">
+              <el-input-number :controls="false" :min="0" v-model="form.playTime" placeholder="请输入播放时间" size="small"/>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="字体样式" prop="fontFamily">
+              <el-select
+                v-model="form.fontFamily"
+                placeholder="请选择字体样式">
+                <el-option
+                  v-for="dict in dict.type.font_family"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="字体颜色" prop="fontColor">
+              <el-select
+                v-model="form.fontColor"
+                placeholder="请选择字体颜色">
+                <el-option
+                  v-for="dict in dict.type.font_color"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="水平居中" prop="horizontalCenter">
+              <el-switch
+                v-model="form.horizontalCenter"
+                active-color="#13ce66"
+                inactive-color="#ff4949">
+              </el-switch>
+            </el-form-item>
+            <el-form-item label="垂直居中" prop="verticalCenter">
+              <el-switch
+                v-model="form.verticalCenter"
+                active-color="#13ce66"
+                inactive-color="#ff4949">
+              </el-switch>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <text-preview
+              :fontFamily="form.fontFamily"
+              :fontSize="form.fontSize"
+              :fontColor="form.fontColor"
+              :letterSpacing="form.letterSpacing"
+              :fontX="form.fontPositionX"
+              :fontY="form.fontPositionY"
+              :backgroundWidth="bgSize.width"
+              :backgroundHeight="bgSize.height"
+              :lineHeight="1"
+              :horizontalCenter="form.horizontalCenter"
+              :verticalCenter="form.verticalCenter"
+              :content="form.content"/>
+          </el-col>
+        </el-row>
       </el-form>
 
       <div slot="footer" class="dialog-footer">
@@ -187,7 +216,7 @@
 </template>
 
 <script>
-import { listContent, getContent, delContent, addContent, updateContent } from "@/api/board/content";
+import {listContent, getContent, delContent, addContent, updateContent} from "@/api/board/content";
 import TextPreview from "@/views/board/component/TextPreview.vue";
 import {planTypeTreeSelect} from "@/api/board/plantype";
 import {listBoardType} from "@/api/board/boardtype";
@@ -195,7 +224,7 @@ import {listBoardType} from "@/api/board/boardtype";
 export default {
   name: "Content",
   components: {TextPreview},
-  dicts: ['board_size','font_color','font_style', 'alert_type'],
+  dicts: ['board_size', 'font_color', 'font_family', 'alert_type'],
   data() {
     return {
       // 遮罩层
@@ -240,58 +269,58 @@ export default {
       // 表单校验
       rules: {
         name: [
-          { required: true, message: "预置信息名称不能为空", trigger: "blur" }
+          {required: true, message: "预置信息名称不能为空", trigger: "blur"}
         ],
         boardSizeType: [
-          { required: true, message: "情报板尺寸不能为空", trigger: "blur" }
+          {required: true, message: "情报板尺寸不能为空", trigger: "blur"}
         ],
         infoType: [
-          { required: true, message: "信息类型不能为空", trigger: "change" }
+          {required: true, message: "信息类型不能为空", trigger: "change"}
         ],
         content: [
-          { required: true, message: "预置内容不能为空", trigger: "blur" }
+          {required: true, message: "预置内容不能为空", trigger: "blur"}
         ],
         previewPath: [
-          { required: true, message: "预览路径不能为空", trigger: "blur" }
+          {required: true, message: "预览路径不能为空", trigger: "blur"}
         ],
         fontStyle: [
-          { required: true, message: "字体样式不能为空", trigger: "blur" }
+          {required: true, message: "字体样式不能为空", trigger: "blur"}
         ],
         fontSize: [
-          { required: true, message: "字体大小不能为空", trigger: "blur" }
+          {required: true, message: "字体大小不能为空", trigger: "blur"}
         ],
         letterSpacing: [
-          { required: true, message: "字体间距不能为空", trigger: "blur" }
+          {required: true, message: "字体间距不能为空", trigger: "blur"}
         ],
         fontColor: [
-          { required: true, message: "字体颜色不能为空", trigger: "blur" }
+          {required: true, message: "字体颜色不能为空", trigger: "blur"}
         ],
         fontPositionX: [
-          { required: true, message: "字体坐标X不能为空", trigger: "blur" }
+          {required: true, message: "字体坐标X不能为空", trigger: "blur"}
         ],
         fontPositionY: [
-          { required: true, message: "字体坐标Y不能为空", trigger: "blur" }
+          {required: true, message: "字体坐标Y不能为空", trigger: "blur"}
         ],
         playTime: [
-          { required: true, message: "播放时间不能为空", trigger: "blur" }
+          {required: true, message: "播放时间不能为空", trigger: "blur"}
         ],
         presetType: [
-          { required: false, message: "当前预置类型 1：内置模版 0：预发布信息不能为空", trigger: "change" }
+          {required: false, message: "当前预置类型 1：内置模版 0：预发布信息不能为空", trigger: "change"}
         ],
         remark: [
-          { required: false, message: "备注不能为空", trigger: "blur" }
+          {required: false, message: "备注不能为空", trigger: "blur"}
         ],
         createTime: [
-          { required: true, message: "创建时间不能为空", trigger: "blur" }
+          {required: true, message: "创建时间不能为空", trigger: "blur"}
         ],
         updateTime: [
-          { required: true, message: "更新时间不能为空", trigger: "blur" }
+          {required: true, message: "更新时间不能为空", trigger: "blur"}
         ],
         createBy: [
-          { required: true, message: "创建人id不能为空", trigger: "blur" }
+          {required: true, message: "创建人id不能为空", trigger: "blur"}
         ],
         updateBy: [
-          { required: true, message: "更新人id不能为空", trigger: "blur" }
+          {required: true, message: "更新人id不能为空", trigger: "blur"}
         ]
       }
     };
@@ -301,10 +330,10 @@ export default {
     this.getPlanTypeTree();
     this.getBoardTypeList();
   },
-  computed:{
+  computed: {
     bgSize() {
       if (!this.form.boardSize) {
-        return {width: 320, height:160}
+        return {width: 320, height: 160}
       }
       let [height, width] = this.form.boardSize.split("*").map(Number);
       return {width, height}
@@ -334,7 +363,7 @@ export default {
         infoType: null,
         content: null,
         previewPath: null,
-        fontStyle: null,
+        fontFamily: null,
         fontSize: null,
         letterSpacing: null,
         fontColor: null,
@@ -346,7 +375,9 @@ export default {
         createTime: null,
         updateTime: null,
         createBy: null,
-        updateBy: null
+        updateBy: null,
+        horizontalCenter: true,
+        verticalCenter: true,
       };
       this.resetForm("form");
     },
@@ -363,7 +394,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -405,7 +436,7 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除预置信息及模版编号为"' + ids + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除预置信息及模版编号为"' + ids + '"的数据项？').then(function () {
         return delContent(ids);
       }).then(() => {
         this.getList();