mky-vent-base/src/views/vent/home/configurable/components/preset/SysWindCard.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- 基准的画廊模块，通过不同的 type 展示不同的样式 -->
  <div ref="container" class="syswind__container w-full h-full">
    <div v-for="item in data" :key="item.deviceID" v-data-picker="item" 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" :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_space: isVolumnOverLimit(item) }"
          >
            <span>{{ getFormattedText(item, ctx.label) }}</span>
            <span class="font-bold">{{ getFormattedText(item, ctx.value) }}</span>
          </div>
        </div>
      </div>
      <div class="flex items-center justify-between syswind__card__spd_wrapper">
        <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_space: isSpeedOverLimit(item),
            }"
          >
            <span>{{ getFormattedText(item, ctx.label) }}</span>
            <span class=".font-bold">{{ getFormattedText(item, ctx.value) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { defaultTo, inRange, first } from 'lodash-es';
  import { getFormattedText } from '../../hooks/helper';
  import { useDataPicker } from '/@/views/ventAI/dataPicker';

  const { directive: vDataPicker } = useDataPicker((item) => ({
    device_id: item.deviceID,
    device_name: item.strinstallpos,
    device_type: 'windrect',
    mode: 'fast',
  }));

  const props = defineProps<{
    config: {
      title: string;
      volumns: { value: string; label: string; lowerLimit: string }[];
      speeds: { value: string; label: string; lowerLimit: string; upperLimit: string }[];
      prop: string;
    };
    data: any[];
  }>();
  //   defineEmits(['click']);

  // 判断val是否在low、high指定的范围内
  function isOverLimit(val: string, low: string = '', high: string = '') {
    const l = parseFloat(low);
    const h = parseFloat(high);
    const v = parseFloat(val);

    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); // 当前滚动位置（响应式）

  // const STEP = 234;

  // useEventListener(
  //   container,
  //   'scrollend',
  //   (event) => {
  //     console.log('debug rr', event);
  //     event.preventDefault();
  //     event.stopPropagation(); // 防止冒泡到外层

  //     const direction = directions.top ? -1 : 1;
  //     const targetY = y.value + direction * STEP;

  //     container.value?.scrollTo({
  //       top: targetY,
  //       behavior: 'smooth',
  //     });
  //   },
  //   { passive: false }
  // );
</script>
<style lang="less" scoped>
  @import '@/design/theme.less';
  @import '@/design/theme.less';
  @{theme-green} {
    .gallery {
      --image-gallery_I_2: url(/@/assets/images/themify/deepblue/home-container/configurable/dusthome/gallery_I_2.png);
      --image-gallery_I_1: url(/@/assets/images/themify/green/home-container/configurable/dusthome/gallery_I_1.png);
    }
  }
  .syswind__container {
    padding: 10px 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: auto;
    scroll-padding-top: 10px;
    scroll-snap-type: y mandatory;
  }

  .syswind__card {
    --image-syswind-space-red: url(/@/assets/images/home-container/configurable/preset/syswind-space-red.png);
    --image-syswind-space-blue: url(/@/assets/images/home-container/configurable/preset/syswind-space-blue.png);
    --image-syswind-space-green: url(/@/assets/images/home-container/configurable/preset/syswind-space-green.png);
    --image-syswind-border-blue: url(/@/assets/images/home-container/configurable/preset/syswind-border-blue.png);
    --image-syswind-border-green: url(/@/assets/images/home-container/configurable/preset/syswind-border-green.png);
    --image-syswind-module-title: url(/@/assets/images/home-container/configurable/preset/syswind-module-title.png);
    --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);
      width: 250px;
      height: 24px;
      padding-left: 10px;
      padding-right: 20px;
      font-size: 16px;
      background-size: 100% 100%;
      overflow: hidden; /* 隐藏溢出内容 */
      white-space: nowrap; /* 强制文本不换行 */
      text-overflow: ellipsis; /* 显示省略号 */
    }

    .syswind__card__vol_image {
      background-image: var(--image-syswind-icon-green), var(--image-syswind-icon-vol);
      background-position: center, center;
      background-repeat: no-repeat;
      width: 76px;
      height: 70px;
    }

    .syswind__card__spd_image {
      background-image: var(--image-syswind-icon-blue), var(--image-syswind-icon-spd);
      background-position: center, center;
      background-repeat: no-repeat;
      width: 76px;
      height: 70px;
    }

    .syswind__card__vol_space {
      background-image: var(--image-syswind-space-green);
      background-repeat: no-repeat;
      background-position: bottom left;
      width: 208px;
      height: 28px;
      line-height: 28px;
    }

    .syswind__card__spd_space {
      background-image: var(--image-syswind-space-blue);
      background-repeat: no-repeat;
      background-position: bottom left;
      width: 208px;
      height: 28px;
      line-height: 28px;
    }

    .syswind__card__vol_wrapper {
      background-image: var(--image-syswind-border-green);
      height: 72px;
      background-position: right center;
      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);
      height: 100px;
      background-position: right center;
      background-repeat: no-repeat;
      margin: 10px;
      padding-right: 10px;
      .overlimit {
        background-image: var(--image-syswind-icon-red), var(--image-syswind-icon-spd-red);
      }
    }

    .overlimit_space {
      background-image: var(--image-syswind-space-red);
    }
  }
</style>