mky-vent-base/src/views/vent/home/configurable/components/content.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 ? 'auto' : 'none' }">
        <!-- 告示板部分 -->
        <template v-if="config.name === 'board'">
          <div class="content__module flex flex-justify-around flex-items-center flex-wrap pt-10px pb-10px">
            <MiniBoard
              v-for="item in config.items"
              :key="item.prop"
              :label="item.label"
              :value="item.value"
              :type="config.type"
              :layout="config.layout"
            />
          </div>
        </template>
        <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
        <template v-if="config.name === 'chart'">
          <CustomChart class="content__module" :chart-config="config.config" :chart-data="config.data" />
        </template>
        <!-- 通常列表部分 -->
        <template v-if="config.name === 'list'">
          <template v-if="config.type === 'timeline'">
            <TimelineList class="content__module" :list-config="config.items" />
          </template>
          <template v-else>
            <CustomList class="content__module" :type="config.type" :list-config="config.items" />
          </template>
        </template>
        <!-- 画廊部分 -->
        <template v-if="config.name === 'gallery'">
          <CustomGallery class="content__module" :type="config.type" :gallery-config="config.items" />
        </template>
        <!-- 复杂列表部分 -->
        <template v-if="config.name === 'gallery_list'">
          <GalleryList class="content__module" :type="config.type" :list-config="config.items" :gallery-config="config.galleryItems" />
        </template>
        <!-- 复杂列表部分 -->
        <template v-if="config.name === 'complex_list'">
          <ComplexList class="content__module" :type="config.type" :list-config="config.items" />
        </template>
        <!-- 表格部分，这部分通常是占一整个模块的 -->
        <template v-if="config.name === 'table'">
          <CustomTable class="content__module text-center overflow-auto" :type="config.type" :columns="config.columns" :data="config.data" />
        </template>
        <template v-if="config.name === 'blast_delta'">
          <BlastDelta class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 200 }" />
        </template>
        <template v-if="config.name === 'measure_detail'">
          <MeasureDetail
            class="content__module"
            :show-title="false"
            :composite-data="config.data"
            :topconfig="config.config.topconfig"
            :btnconfig="config.config.btnconfig"
          />
        </template>
        <!-- <template v-if="config.key === 'fire_control'">
        <FIreControl class="content__module" />
      </template>
      <template v-if="config.key === 'fire_warn'">
        <FIreWarn class="content__module" />
      </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 MiniBoard from './detail/MiniBoard.vue';
  import TimelineList from './detail/TimelineList.vue';
  import CustomList from './detail/CustomList.vue';
  import CustomGallery from './detail/CustomGallery.vue';
  import ComplexList from './detail/ComplexList.vue';
  import GalleryList from './detail/GalleryList.vue';
  import CustomTable from './detail/CustomTable.vue';
  import CustomChart from './detail/CustomChart.vue';
  import { clone } from 'lodash-es';
  import { getData, getFormattedText } from '../hooks/helper';
  import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
  import MeasureDetail from './preset/MeasureDetail.vue';
  // import FIreWarn from './preset/FIreWarn.vue';
  // import FIreControl from './preset/FIreControl.vue';

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

  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 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),
                  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),
                  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 '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/vent/color.less';

  /* Header 相关的样式 */
  .content__header {
    height: 30px;
    background-image: linear-gradient(90deg, #3df6ff44, transparent 20%, transparent 80%, #3df6ff44);
  }
  .content__header_left {
    border-left: 3px solid;
    border-right: 3px solid;
    border-image-source: linear-gradient(to top, #185f7188, #3df6ff, #185f7188);
    border-image-slice: 1;
  }
  .content__header_right {
    border-left: 3px solid;
    border-right: 3px solid;
    border-image-source: linear-gradient(to top, #185f7188, #3df6ff, #185f7188);
    border-image-slice: 1;
    min-width: 160px;
  }
  .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 {
    // margin-top: 5px;
    // margin-bottom: 5px;
    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;
  }

  ::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
    /* background-color: transparent; */
    color: #fff;
  }
  ::v-deep .zxm-select-arrow {
    color: #fff;
  }
  ::v-deep .zxm-select-selection-item {
    color: #fff !important;
  }
  ::v-deep .zxm-select-selection-placeholder {
    color: #fff !important;
  }

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