[Style 0000] 可配置首页风量监测模块样式优化

src/assets/images/home-container/configurable/preset/syswind-icon-spd-red.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26.422" height="16.02" viewBox="0 0 26.422 16.02">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.295" x2="0.946" y2="0.843" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#ff8383"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <g id="组_16695" data-name="组 16695" transform="translate(-20.302 -27.787)">
+    <path id="路径_57945" data-name="路径 57945" d="M238.933,68.267h3.929l2.483,7.755c.582,1.765.962,3.359,1.569,5.149h.129c.582-1.79,1.011-3.384,1.6-5.149l2.427-7.755h3.8L249.121,84.2h-4.457Z" transform="translate(-218.631 -40.48)" fill="url(#linear-gradient)"/>
+    <path id="路径_57946" data-name="路径 57946" d="M.828,0H9.675V2.9H0Z" transform="translate(37.049 28.327)" fill="url(#linear-gradient)"/>
+    <path id="路径_57947" data-name="路径 57947" d="M.828,0H9.675V2.9H0Z" transform="translate(35.114 35.1)" fill="url(#linear-gradient)"/>
+    <path id="路径_57948" data-name="路径 57948" d="M.828,0H9.675V2.9H0Z" transform="translate(33.179 40.905)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

src/assets/images/home-container/configurable/preset/syswind-icon-vol-red.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25.353" height="22.814" viewBox="0 0 25.353 22.814">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.295" x2="0.946" y2="0.843" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#ff8383"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57952" data-name="路径 57952" d="M459.1,110.272a.638.638,0,0,1-.449-.186.632.632,0,0,1-.186-.449v-1.266a.638.638,0,0,1,.186-.449.632.632,0,0,1,.449-.186h17.112a1.266,1.266,0,0,0,0-2.533h-5.7a.638.638,0,0,1-.449-.186.632.632,0,0,1-.186-.449V103.3a.634.634,0,0,1,.635-.635h5.7a3.8,3.8,0,0,1,0,7.605Zm-3.8,5.069a.638.638,0,0,1-.449-.186.632.632,0,0,1-.186-.449V113.44a.634.634,0,0,1,.635-.635h15.211a.638.638,0,0,1,.449.186.632.632,0,0,1,.186.449v1.266a.638.638,0,0,1-.186.449.632.632,0,0,1-.449.186Zm6.335,5.073a.638.638,0,0,1-.449-.186.632.632,0,0,1-.186-.449v-1.266a.638.638,0,0,1,.186-.449.632.632,0,0,1,.449-.186h3.8a.638.638,0,0,1,.449.186.632.632,0,0,1,.186.449v1.266a.634.634,0,0,1-.635.635h-3.8Zm6.339-2.536h8.24a3.8,3.8,0,0,1,0,7.605h-5.7a.639.639,0,0,1-.449-.186.632.632,0,0,1-.186-.449v-1.266a.639.639,0,0,1,.186-.449.632.632,0,0,1,.449-.186h5.7a1.266,1.266,0,0,0,0-2.533h-8.24a.638.638,0,0,1-.449-.186.632.632,0,0,1-.186-.449v-1.266a.634.634,0,0,1,.635-.635Zm0,0" transform="translate(-454.667 -102.668)" fill="url(#linear-gradient)"/>
+</svg>

src/views/vent/home/configurable/components/preset/SysWindCard.vue

@@ -1,18 +1,18 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <!-- 基准的画廊模块，通过不同的 type 展示不同的样式 -->
-  <a-space ref="container" class="syswind__container w-full h-full" wrap :size="30">
+  <div ref="container" class="syswind__container w-full h-full">
     <div v-for="item in data" :key="item.deviceID" class="syswind__card">
       <!-- 画廊项的具体内容填充剩余宽度 -->
       <div class="syswind__card__title font-bold" :title="getFormattedText(item, config.title)">{{ getFormattedText(item, config.title) }}</div>
       <div class="flex items-center justify-between syswind__card__vol_wrapper">
-        <div class="syswind__card__vol_image"></div>
+        <div class="syswind__card__vol_image" :class="{ overlimit: isVolumnOverLimit(item) }"></div>
         <div>
           <div
             v-for="(ctx, idx) in config.volumns"
             :key="`v${idx}`"
             class="flex justify-between pl-20px pr-10px syswind__card__vol_space"
-            :class="{ overlimit: isOverLimit(getFormattedText(item, ctx.value), getFormattedText(item, ctx.lowerLimit)) }"
+            :class="{ overlimit_space: isVolumnOverLimit(item) }"
           >
             <span>{{ getFormattedText(item, ctx.label) }}</span>
             <span class="font-bold">{{ getFormattedText(item, ctx.value) }}</span>
@@ -20,18 +20,14 @@
         </div>
       </div>
       <div class="flex items-center justify-between syswind__card__spd_wrapper">
-        <div class="syswind__card__spd_image"></div>
+        <div class="syswind__card__spd_image" :class="{ overlimit: isSpeedOverLimit(item) }"></div>
         <div>
           <div
             v-for="(ctx, idx) in config.speeds"
             :key="`s${idx}`"
             class="flex justify-between pl-20px pr-10px syswind__card__spd_space"
             :class="{
-              overlimit: isOverLimit(
-                getFormattedText(item, ctx.value),
-                getFormattedText(item, ctx.lowerLimit),
-                getFormattedText(item, ctx.upperLimit)
-              ),
+              overlimit_space: isSpeedOverLimit(item),
             }"
           >
             <span>{{ getFormattedText(item, ctx.label) }}</span>
@@ -40,18 +36,18 @@
         </div>
       </div>
     </div>
-  </a-space>
+  </div>
 </template>
 <script lang="ts" setup>
-  import { defaultTo, inRange } from 'lodash-es';
+  import { defaultTo, inRange, first } from 'lodash-es';
   import { getFormattedText } from '../../hooks/helper';
+  // import { onMounted, ref } from 'vue';
   // import { useEventListener, useScroll } from '@vueuse/core';
-  // import { ref } from 'vue';
 
   // import { get } from 'lodash-es';
   // import { computed } from 'vue';
 
-  defineProps<{
+  const props = defineProps<{
     config: {
       title: string;
       volumns: { value: string; label: string; lowerLimit: string }[];
@@ -68,10 +64,20 @@
     const h = parseFloat(high);
     const v = parseFloat(val);
 
-    console.log('debug rrr', defaultTo(v, 0), defaultTo(l, -Infinity), defaultTo(h, Infinity));
     return !inRange(defaultTo(v, 0), defaultTo(l, -Infinity), defaultTo(h, Infinity));
   }
 
+  function isVolumnOverLimit(item) {
+    const ctx = first(props.config.volumns);
+    if (!ctx) return false;
+    return isOverLimit(getFormattedText(item, ctx.value), getFormattedText(item, ctx.lowerLimit));
+  }
+  function isSpeedOverLimit(item) {
+    const ctx = first(props.config.speeds);
+    if (!ctx) return false;
+    return isOverLimit(getFormattedText(item, ctx.value), getFormattedText(item, ctx.lowerLimit), getFormattedText(item, ctx.upperLimit));
+  }
+
   // const container = ref<HTMLElement>();
   // const { y, directions } = useScroll(container); // 当前滚动位置（响应式）
 
@@ -79,7 +85,7 @@
 
   // useEventListener(
   //   container,
-  //   'click',
+  //   'scrollend',
   //   (event) => {
   //     console.log('debug rr', event);
   //     event.preventDefault();
@@ -107,8 +113,12 @@
   }
   .syswind__container {
     padding: 10px 30px;
-    // display: flex;
-    // flex-wrap: wrap;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    overflow: auto;
+    scroll-padding-top: 10px;
+    scroll-snap-type: y mandatory;
   }
 
   .syswind__card {
@@ -121,14 +131,20 @@
     --image-syswind-module: url(/@/assets/images/home-container/configurable/preset/syswind-module.png);
     --image-syswind-icon-blue: url(/@/assets/images/home-container/configurable/preset/syswind-icon-blue.png);
     --image-syswind-icon-green: url(/@/assets/images/home-container/configurable/preset/syswind-icon-green.png);
+    --image-syswind-icon-red: url(/@/assets/images/home-container/configurable/preset/syswind-icon-red.png);
     --image-syswind-icon-vol: url(/@/assets/images/home-container/configurable/preset/syswind-icon-vol.svg);
+    --image-syswind-icon-vol-red: url(/@/assets/images/home-container/configurable/preset/syswind-icon-vol-red.svg);
     --image-syswind-icon-spd: url(/@/assets/images/home-container/configurable/preset/syswind-icon-spd.svg);
+    --image-syswind-icon-spd-red: url(/@/assets/images/home-container/configurable/preset/syswind-icon-spd-red.svg);
 
     background-image: var(--image-syswind-module);
     background-repeat: no-repeat;
     width: 320px;
     // width: 320px;
     height: 234px;
+    margin: 0 0 10px 0;
+    scroll-padding-top: 10px;
+    scroll-snap-align: start;
 
     .syswind__card__title {
       background-image: var(--image-syswind-module-title);
@@ -150,6 +166,7 @@
       width: 76px;
       height: 70px;
     }
+
     .syswind__card__spd_image {
       background-image: var(--image-syswind-icon-blue), var(--image-syswind-icon-spd);
       background-position: center, center;
@@ -157,6 +174,7 @@
       width: 76px;
       height: 70px;
     }
+
     .syswind__card__vol_space {
       background-image: var(--image-syswind-space-green);
       background-repeat: no-repeat;
@@ -165,6 +183,7 @@
       height: 28px;
       line-height: 28px;
     }
+
     .syswind__card__spd_space {
       background-image: var(--image-syswind-space-blue);
       background-repeat: no-repeat;
@@ -173,6 +192,7 @@
       height: 28px;
       line-height: 28px;
     }
+
     .syswind__card__vol_wrapper {
       background-image: var(--image-syswind-border-green);
       height: 72px;
@@ -180,6 +200,9 @@
       background-repeat: no-repeat;
       margin: 10px;
       padding-right: 10px;
+      .overlimit {
+        background-image: var(--image-syswind-icon-red), var(--image-syswind-icon-vol-red);
+      }
     }
     .syswind__card__spd_wrapper {
       background-image: var(--image-syswind-border-blue);
@@ -188,8 +211,12 @@
       background-repeat: no-repeat;
       margin: 10px;
       padding-right: 10px;
+      .overlimit {
+        background-image: var(--image-syswind-icon-red), var(--image-syswind-icon-spd-red);
+      }
     }
-    .overlimit {
+
+    .overlimit_space {
       background-image: var(--image-syswind-space-red);
     }
   }

src/views/vent/home/configurable/hooks/helper.ts

@@ -1,4 +1,4 @@
-import { get, isNil } from 'lodash-es';
+import { get, isEmpty, isNil } from 'lodash-es';
 
 /** 根据配置中的 formatter 将文本格式并返回 */
 export function getFormattedText(data: any, formatter: string, trans?: Record<string, string>, defaultValue?: any): string {
@@ -21,9 +21,9 @@ export function getFormattedText(data: any, formatter: string, trans?: Record<st
     // 如果查不出翻译内容则返回原本的值
     if (translated === undefined) return txt;
     const result = getFormattedText(data, translated);
-    return formatter.replace(exp, isNil(result) ? defval : result);
+    return formatter.replace(exp, isNil(result) || isEmpty(result) ? defval : result);
   }
-  return formatter.replace(exp, isNil(txt) ? defval : txt);
+  return formatter.replace(exp, isNil(txt) || isEmpty(txt) ? defval : txt);
 }
 
 /** 获取 formatter 需要取的源 prop，用于在一些不支持 formatter 的组件中使用 */