mky-vent-base/src/views/vent/home/configurable/bule/components/content-warn.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- 主体内容部分 -->
  <div class="content">
    <!-- 背景 -->
    <img v-if="background.show && background.type === 'image'" class="content__background" :src="background.link" />
    <video
      v-if="background.show && background.type === 'video'"
      class="content__background content__background_video"
      width="100%"
      autoplay
      loop
      muted
      disablepictureinpicture
      playsinline
    >
      <source :src="background.link" />
      Not Supportted Link Or Browser
    </video>
    <div class="flex w-full h-full" :style="{ flexDirection: layout.direction }">
      <div v-for="config in layoutConfig" :key="config.name" :style="{ flexBasis: config.basis, overflow: config.overflow ? 'hidden' : 'hidden' }">
        <!-- 告示板部分 -->
        <template v-if="config.name === 'board'">
          <div class="content__module flex flex-justify-around flex-items-center flex-wrap">
            <MiniBoard
              v-for="item in config.items"
              :key="item.prop"
              :label="item.label"
              :value="item.value"
              :dw="item.dw"
              :type="config.type"
              :layout="config.layout"
            />
          </div>
        </template>
        <template v-if="config.name === 'dz_list'">
          <DzList :deviceType="deviceType" :listOption="config.config.listOption" :listData="config.data"></DzList>
        </template>
        <template v-if="config.name === 'dz_card'">
          <DzCard
            :deviceType="deviceType"
            :titleLeft="config.config.leftTitle"
            :titleRight="config.config.rightTitle"
            :paramData="config.data"
          ></DzCard>
        </template>
        <!-- <template v-if="config.name === 'yj_risk'">
          <yjRisk :riskData="config.data"></yjRisk>
        </template> -->
        <template v-if="config.name === 'yj_chart'">
          <yjChart :paramData="config.data"></yjChart>
        </template>
        <template v-if="config.name === 'yj_gas'">
          <yjGas :type="config.config.type" :titleData="config.config.titleData" :gasData="config.data"></yjGas>
        </template>
        <template v-if="config.name === 'yj_ventWarn'">
          <yjVentWarn :ventData="config.data"></yjVentWarn>
        </template>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import {
  CommonItem,
  Config,
  ModuleDataBoard,
  ModuleDataChart,
  ModuleDataList,
  ModuleDataPreset,
  ModuleDataTable,
} from '../../../../deviceManager/configurationTable/types';
import DzList from '../../green/components/dz-list.vue';
import DzCard from '../../green/components/dz-card.vue';
import yjRisk from './yj_risk.vue';
import yjChart from './yj_chart.vue';
import yjGas from './yj_gasWarn.vue';
import MiniBoard from './detail/MiniBoard-Warn.vue';
import yjVentWarn from './yj_ventWarn.vue';
import { clone } from 'lodash-es';
import { getData, getFormattedText } from '../../hooks/helper';

const props = defineProps<{
  data: any;
  moduleData: Config['moduleData'];
  deviceType: string;
}>();

const { background, layout } = props.moduleData;

// 获取当原始配置带 items 项时的最终 items 配置
function getItems(raw, items: CommonItem[]) {
  return items.map((i) => {
    return {
      ...i,
      label: getFormattedText(raw, i.label, i.trans),
      value: getFormattedText(raw, i.value, i.trans),
    };
  });
}

// 获取当 List 组件配置带 items 项时的最终 items 配置
function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
  if (mapFromData && Array.isArray(raw)) {
    return raw.map((data) => {
      const item = items[0];
      return {
        ...item,
        label: getFormattedText(data, item.label, item.trans),
        value: getFormattedText(data, item.value, item.trans),
      };
    });
  }
  return getItems(raw, items);
}

/** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
const layoutConfig = computed(() => {
  const refData = props.data;
  const board = clone(props.moduleData.board) || [];
  const list = clone(props.moduleData.list) || [];
  const gallery = clone(props.moduleData.gallery) || [];
  const complex_list = clone(props.moduleData.complex_list) || [];
  const gallery_list = clone(props.moduleData.gallery_list) || [];
  const tabs = clone(props.moduleData.tabs) || [];
  const chart = clone(props.moduleData.chart) || [];
  const table = clone(props.moduleData.table) || [];
  const preset = clone(props.moduleData.preset) || [];

  return layout.items.reduce((arr: any[], item) => {
    switch (item.name) {
      case 'board': {
        const cfg = board.shift();
        if (!cfg) break;
        const data = getData(refData, cfg.readFrom, cfg.parser);

        arr.push({
          overflow: true,
          ...item,
          ...cfg,
          items: getItems(data, cfg.items),
        });
        break;
      }
      case 'list': {
        const cfg = list.shift();
        if (!cfg) break;
        const data = getData(refData, cfg.readFrom, cfg.parser);

        arr.push({
          overflow: true,
          ...item,
          ...cfg,
          items: getListItems(data, cfg.items, cfg.mapFromData),
        });
        break;
      }
      case 'gallery': {
        const cfg = gallery.shift();
        if (!cfg) break;
        const data = getData(refData, cfg.readFrom, cfg.parser);

        arr.push({
          overflow: true,
          ...item,
          ...cfg,
          items: getItems(data, cfg.items),
        });
        break;
      }
      case 'complex_list': {
        const cfg = complex_list.shift();
        if (!cfg) break;
        const data = getData(refData, cfg.readFrom, cfg.parser);

        if (cfg.mapFromData) {
          const firstListItem = cfg.items[0];
          arr.push({
            overflow: true,
            ...item,
            ...cfg,
            items: (data || []).map((d) => {
              return {
                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
                contents: firstListItem.contents.map((e) => {
                  return {
                    ...e,
                    label: getFormattedText(d, e.label, e.trans),
                    value: getFormattedText(d, e.value, e.trans),
                  };
                }),
              };
            }),
          });
        } else {
          arr.push({
            overflow: true,
            ...item,
            ...cfg,
            items: cfg.items.map((i) => {
              return {
                title: getFormattedText(data, i.title, i.trans),
                contents: i.contents.map((e) => {
                  return {
                    ...e,
                    label: getFormattedText(data, e.label, e.trans),
                    value: getFormattedText(data, e.value, e.trans),
                  };
                }),
              };
            }),
          });
        }
        break;
      }
      case 'gallery_list': {
        const cfg = gallery_list.shift();
        if (!cfg) break;
        const data = getData(refData, cfg.readFrom, cfg.parser);

        arr.push({
          overflow: true,
          ...item,
          ...cfg,
          items: getItems(data, cfg.items),
          galleryItems: getItems(data, cfg.galleryItems),
        });
        break;
      }
      case 'tabs': {
        const cfg = tabs.shift();
        if (!cfg) break;
        const data = getData(refData, cfg.readFrom, cfg.parser);

        if (cfg.mapFromData) {
          const firstListItem = cfg.items[0];
          arr.push({
            overflow: true,
            ...item,
            ...cfg,
            items: (data || []).map((d) => {
              return {
                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
                contents: firstListItem.contents.map((e) => {
                  return {
                    ...e,
                    label: getFormattedText(d, e.label, e.trans),
                    value: getFormattedText(d, e.value, e.trans),
                  };
                }),
              };
            }),
          });
        } else {
          arr.push({
            overflow: true,
            ...item,
            ...cfg,
            items: cfg.items.map((i) => {
              return {
                title: getFormattedText(data, i.title, i.trans),
                contents: i.contents.map((e) => {
                  return {
                    ...e,
                    label: getFormattedText(data, e.label, e.trans),
                    value: getFormattedText(data, e.value, e.trans),
                  };
                }),
              };
            }),
          });
        }
        break;
      }
      case 'chart': {
        const cfg = chart.shift();
        if (!cfg) break;
        const data = getData(refData, cfg.readFrom, cfg.parser);

        arr.push({
          ...item,
          config: cfg,
          data,
        });
        break;
      }
      case 'table': {
        const cfg = table.shift();
        if (!cfg) break;
        const data = getData(refData, cfg.readFrom, cfg.parser);

        arr.push({
          ...cfg,
          ...item,
          columns: cfg.columns,
          data,
        });
        break;
      }
      default: {
        const cfg = preset.shift();
        if (!cfg) break;
        const data = getData(refData, cfg.readFrom, cfg.parser);

        arr.push({
          ...item,
          data,
          config: cfg,
        });
        break;
      }
    }
    return arr;
  }, []);
});
</script>
<style lang="less" scoped>
@import '@/design/theme.less';

.content {
  height: calc(100% - 30px);
  position: relative;
  // z-index: -2;
  display: flex;
  flex-direction: column;
}

.content__background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  object-fit: fill;
}

.content__module {
  width: 100%;
  height: 100%;
}
// .content__module:first-of-type {
//   margin-top: 0;
// }
// .content__module:last-of-type {
//   margin-bottom: 0;
// }
::-webkit-scrollbar {
  width: 5px !important;
}

::-webkit-scrollbar-thumb {
  width: 5px !important;
}

:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
  /* background-color: transparent; */
  color: #fff;
}

:deep(.zxm-select-arrow) {
  color: #fff;
}

:deep(.zxm-select-selection-item) {
  color: #fff !important;
}

:deep(.zxm-select-selection-placeholder) {
  color: #fff !important;
}

:deep(.dialog-overlay) {
  width: 100%;
  height: 100%;
  position: unset;
  box-shadow: unset;
}

::-webkit-scrollbar {
  width: 5px !important;
}

::-webkit-scrollbar-thumb {
  width: 5px !important;
}
</style>