[Mod 0000]修改矿端首页预警等级文本渲染

src/components/Configurable/preset/BoardTable.vue

@@ -52,8 +52,11 @@
               :style="{ flexBasis: dataColumnFlexBasis }" 
               :class="`table__content__list_item_${tableConfig.type}`"
             >
-              <slot :name="col.prop" :scope="row">
+              <!-- <slot :name="col.prop" :scope="row">
                 <span>{{ getter(row, col.prop) }}</span>
+              </slot> -->
+              <slot :name="col.prop" :scope="row">
+                <component :is="renderCellComponent(row, col)" />
               </slot>
             </div>
           </div>
@@ -101,9 +104,10 @@
 </template>
 
 <script lang="ts" setup>
-  import { computed, ref, watch, onMounted } from 'vue';
+  import { computed, ref, watch, onMounted, h } from 'vue';
   import { get, isNil } from 'lodash-es';
   import MiniBoard from '../detail/MiniBoard.vue';
+  import { StatusColorEnum } from '/@/enums/jeecgEnum';
 
   interface BoardItem {
     label: string;
@@ -248,6 +252,37 @@
     }
   });
 
+  
+// 在 script setup 中添加
+const riskMap = {
+  '1': '低风险',
+  '2': '一般风险',
+  '3': '较高风险',
+  '4': '高风险',
+};
+const riskColorMap = {
+  '1': StatusColorEnum.blue, // 蓝
+  '2': StatusColorEnum.gold, // 金
+  '3': StatusColorEnum.purple, // 紫
+  '4': StatusColorEnum.red, // 红
+};
+
+// 修改 getter 或创建一个专门的渲染函数
+const renderCellComponent = (row: any, col: TableColumn) => {
+  return {
+    render() {
+      const value = getter(row, col.prop);
+      if (col.prop === 'alarmLevel') {
+        const level = String(value);
+        const text = riskMap[level] || value;
+        const color = riskColorMap[level] || StatusColorEnum.blue;
+        return h('span', { style: { color } }, text);
+      }
+      return h('span', {}, value);
+    }
+  };
+};
+
   // 监听 tableData 变化，重置选中状态
   watch(() => props.tableData, (newData) => {
     if (newData && newData.length > 0) {
@@ -524,9 +559,6 @@
   .table__content_list_row .table__content__list_item_D:nth-child(1) {
     width: 50px;
   }
-  .table__content_list_row .table__content__list_item_D:nth-child(3) {
-    color: #2b6ff0;
-  }
   .table__content_list_row .table__content__list_item_D:nth-child(4) {
     color: #107f30;
   }