!202 文本框组件增加“自定义条件样式”配置

Merge pull request !202 from lma/N/A

report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-text.js

@@ -105,7 +105,88 @@ export const widgetText = {
         required: false,
         placeholder: '',
         value: false,
-      }
+      },
+      [
+        {
+          name: '自定义样式设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '启用条件样式',
+              name: 'useCondition',
+              required: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'el-select',
+              label: '条件类型',
+              name: 'conditionOperator',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: '>', name: '大于' },
+                { code: '<', name: '小于' },
+                { code: '=', name: '等于' },
+                { code: '>=', name: '大于等于' },
+                { code: '<=', name: '小于等于' },
+                { code: 'includes', name: '包含' },
+              ],
+              value: '=',
+            },
+            {
+              type: 'el-input-text',
+              label: '条件值',
+              name: 'conditionValue',
+              required: false,
+              placeholder: '输入数值或文本',
+              value: '',
+            },
+            {
+              type: 'vue-color',
+              label: '条件文本颜色',
+              name: 'conditionTextColor',
+              required: false,
+              placeholder: '',
+              value: '#FF0000',
+            },
+            {
+              type: 'vue-color',
+              label: '条件背景色',
+              name: 'conditionBgColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255,255,255,0)',
+            },
+            {
+              type: 'el-select',
+              label: '条件文字粗细',
+              name: 'conditionFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'bold', name: '粗体' },
+                { code: 'bolder', name: '特粗体' },
+                { code: 'lighter', name: '细体' }
+              ],
+              value: 'bold'
+            },
+            {
+              type: 'el-select',
+              label: '条件字体样式',
+              name: 'conditionFontStyle',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                { code: 'normal', name: '正常' },
+                { code: 'italic', name: '斜体' }
+              ],
+              value: 'normal'
+            }
+          ]
+        }
+      ]
     ],
     // 数据
     data: [

report-ui/src/views/bigscreenDesigner/designer/widget/texts/widgetText.vue

@@ -4,8 +4,8 @@
  * @Last Modified by:   qianlishi
  * @Last Modified time: 2022-3-14 14:04:24
  !-->
-<template>
-  <div class="text" :style="styleColor">{{ styleColor.text }}</div>
+ <template>
+  <div class="text" :style="computedStyleColor">{{ styleColor.text }}</div>
 </template>
 <script>
 import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
@@ -23,6 +23,8 @@ export default {
       optionsData: {},
       optionsSetup: {},
       flagInter: null,
+      // 动态数据当前值，用于条件判断
+      currentDataValue: null,
     };
   },
   computed: {
@@ -34,7 +36,7 @@ export default {
         position: this.ispreview ? "absolute" : "static",
         color: this.transStyle.color,
         "font-weight": this.transStyle.fontWeight,
-        text:  this.transStyle.joinText === "" ? this.transStyle.text : this.transStyle.text + this.transStyle.joinText,
+        text:  this.transStyle.joinText === "" || this.transStyle.joinText === undefined ? this.transStyle.text : this.transStyle.text + this.transStyle.joinText,
         "font-size": this.transStyle.fontSize + "px",
         "letter-spacing": this.transStyle.letterSpacing + "em",
         background: this.transStyle.background,
@@ -47,6 +49,13 @@ export default {
         whiteSpace: this.transStyle.whiteSpace ? "pre-line": "normal"
       };
     },
+    computedStyleColor() {
+      // 合并基础样式和条件样式
+      return {
+        ...this.styleColor,
+        ...this.getConditionalStyle()
+      };
+    },
     allComponentLinkage() {
       return this.$store.state.designer.allComponentLinkage;
     },
@@ -70,6 +79,67 @@ export default {
     this.setOptionsData();
   },
   methods: {
+    // 根据条件应用样式
+    getConditionalStyle() {
+      const setup = this.optionsSetup || {};
+      
+      // 如果未启用条件样式或无当前数据值，返回空对象
+      if (!setup.useCondition || this.currentDataValue === null) {
+        return {};
+      }
+      
+      // 获取数据值（可能是数字或字符串）
+      const value = this.currentDataValue;
+      const conditionValue = setup.conditionValue;
+      
+      // 如果条件值为空，对于包含条件应特殊处理
+      if (conditionValue === '' || conditionValue === undefined || conditionValue === null) {
+        // 对于包含条件，空条件值不应该匹配任何内容
+        if (setup.conditionOperator === 'includes') {
+          return {};
+        }
+      }
+      
+      // 执行条件判断
+      let conditionMet = false;
+      
+      switch (setup.conditionOperator) {
+        case '>':
+          conditionMet = Number(value) > Number(conditionValue);
+          break;
+        case '<':
+          conditionMet = Number(value) < Number(conditionValue);
+          break;
+        case '=':
+        case '==':
+          conditionMet = value == conditionValue; // 使用非严格相等
+          break;
+        case '>=':
+          conditionMet = Number(value) >= Number(conditionValue);
+          break;
+        case '<=':
+          conditionMet = Number(value) <= Number(conditionValue);
+          break;
+        case 'includes':
+          // 确保非空条件，空字符串不应该匹配任何内容
+          conditionMet = conditionValue !== '' && String(value).includes(conditionValue);
+          break;
+        default:
+          conditionMet = false;
+      }
+      
+      // 如果条件满足，应用条件样式
+      if (conditionMet) {
+        return {
+          color: setup.conditionTextColor || undefined,
+          background: setup.conditionBgColor || undefined,
+          'font-weight': setup.conditionFontWeight || undefined,
+          'font-style': setup.conditionFontStyle || undefined,
+        };
+      }
+      
+      return {};
+    },
     // 数据解析
     setOptionsData(e, paramsConfig) {
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
@@ -108,7 +178,12 @@ export default {
     getEchartData(val) {
       const data = this.queryEchartsData(val);
       data.then(res => {
-        this.styleColor.text = this.optionsSetup.joinText === "" ? res[0].value : res[0].value + this.optionsSetup.joinText;
+        // 保存当前数据值用于条件判断
+        if (res && res.length > 0) {
+          this.currentDataValue = res[0].value;
+        }
+        
+        this.styleColor.text = this.optionsSetup.joinText === undefined || this.optionsSetup.joinText === "" ? res[0].value : res[0].value + this.optionsSetup.joinText;
         this.$forceUpdate();
       });
     }