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

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- Header部分 -->
  <div v-if="headerConfig.show" class="w-100% flex content__header">
    <!-- 选择下拉框，自动填充剩余空间，这种实现是因为 Select 不支持 suffix -->
    <Dropdown
      v-if="headerConfig.showSelector"
      class="flex-grow-1 content__header_left"
      :trigger="['click']"
      :bordered="false"
      @open-change="headerVisible = $event"
    >
      <div class="w-100% flex flex-items-center" @click.prevent>
        <SwapOutlined class="w-30px" />
        <div class="flex-grow-1">
          {{ selectedDeviceLabel }}
        </div>
        <CaretUpOutlined class="w-30px" v-if="headerVisible" />
        <CaretDownOutlined class="w-30px" v-else />
      </div>
      <template #overlay>
        <Menu :selected-keys="[selectedDeviceID]" @click="headerSelectHandler">
          <MenuItem v-for="item in options" :key="item.value" :title="item.label">
            {{ item.label }}
          </MenuItem>
        </Menu>
      </template>
    </Dropdown>
    <template v-if="headerConfig.showSlot">
      <div class="flex flex-items-center flex-grow-1 content__header_right">
        <SwapOutlined class="w-30px" />
        <div class="flex-grow-1">
          {{ selectedDeviceSlot }}
        </div>
      </div>
    </template>
  </div>
  <!-- 主体内容部分 -->
  <div class="content" :class="{ content_without_header: !headerConfig.show }">
    <!-- 背景 -->
    <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
    >
      <source :src="background.link" />
      Not Supportted Link Or Browser
    </video>
    <template v-for="config in layoutConfig" :key="config.key">
      <!-- 告示板部分 -->
      <div v-if="config.key === 'board'" class="content__module flex flex-justify-around 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>
      <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
      <template v-if="config.key === 'chart'">
        <CustomChart class="content__module flex-grow" :chart-config="config.config" :chart-data="config.data" />
      </template>
      <!-- 通常列表部分 -->
      <template v-if="config.key === '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.key === 'gallery'">
        <CustomGallery class="content__module" :type="config.type" :gallery-config="config.items" />
      </template>
      <!-- 复杂列表部分 -->
      <template v-if="config.key === 'complex_list'">
        <ComplexList class="content__module" :type="config.type" :list-config="config.items" :gallery-config="config.galleryItems" />
      </template>
      <!-- 表格部分，这部分通常是占一整个模块的 -->
      <template v-if="config.key === 'table'">
        <CommonTable
          v-if="config.type === 'A'"
          :columns="config.columns"
          :data="config.data"
          class="content__module text-center flex-grow overflow-auto"
        />
        <CustomTable
          v-else
          :type="config.type"
          :columns="config.columns"
          :data="config.data"
          class="content__module text-center flex-grow overflow-auto"
        />
      </template>
      <template v-if="config.key === 'blast_delta'">
        <BlastDelta class="content__module" :pos-monitor="config.config.mock" :canvas-size="{ width: 250, height: 137 }" />
      </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>
    </template>
  </div>
</template>
<script lang="ts" setup>
  import { computed, onMounted, ref } from 'vue';
  import {
    Config,
    // ModuleDataBoard,
    // ModuleDataChart,
    // ModuleDataList,
    // ModuleDataPreset,
    // ModuleDataTable,
  } from '../../../deviceManager/configurationTable/types';
  import { useInitDevices } from '../hooks/useInit';
  import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
  import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
  import MiniBoard from './MiniBoard.vue';
  import TimelineList from './TimelineList.vue';
  import CustomList from './CustomList.vue';
  import CustomGallery from './CustomGallery.vue';
  import ComplexList from './ComplexList.vue';
  import CustomTable from './CustomTable.vue';
  import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
  import CustomChart from './CustomChart.vue';
  import { get, clone } from 'lodash-es';
  import CommonTable from '../../billboard/components/CommonTable.vue';
  import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
  import FIreWarn from './FIreWarn.vue';
  import FIreControl from './FIreControl.vue';

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

  const { header: headerConfig, background, layout, mock } = props.moduleData;

  // 额外的 header 相关的变量
  const headerVisible = ref(false);
  function headerSelectHandler({ key }) {
    selectedDeviceID.value = key;
  }

  const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, fetchDevices } = useInitDevices(
    props.deviceType,
    headerConfig
  );

  function getData(raw, readFrom) {
    if (mock) return mock;
    if (readFrom) {
      return get(raw, readFrom);
    }
    return raw;
  }

  /** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
  const layoutConfig = computed(() => {
    const refData = selectedDevice.value;
    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 chart = clone(props.moduleData.chart);
    const table = clone(props.moduleData.table);
    const preset = clone(props.moduleData.preset);

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

          arr.push({
            ...cfg,
            key,
            items: cfg.items.map((i) => {
              return {
                ...i,
                label: getFormattedText(data, i.label),
                value: getFormattedText(data, i.value),
              };
            }),
          });
          break;
        }
        case 'list': {
          const cfg = list.shift();
          if (!cfg) break;
          const data = getData(refData, cfg.readFrom);

          arr.push({
            ...cfg,
            key,
            items: cfg.items.map((i) => {
              return {
                ...i,
                label: getFormattedText(data, i.label),
                value: getFormattedText(data, i.value),
              };
            }),
          });
          break;
        }
        case 'gallery': {
          const cfg = gallery.shift();
          if (!cfg) break;
          const data = getData(refData, cfg.readFrom);

          arr.push({
            ...cfg,
            key,
            items: cfg.items.map((i) => {
              return {
                ...i,
                label: getFormattedText(data, i.label),
                value: getFormattedText(data, i.value),
              };
            }),
          });
          break;
        }
        case 'complex_list': {
          const cfg = complex_list.shift();
          if (!cfg) break;
          const data = getData(refData, cfg.readFrom);

          arr.push({
            ...cfg,
            key,
            items: cfg.items.map((i) => {
              return {
                ...i,
                label: getFormattedText(data, i.label),
                value: getFormattedText(data, i.value),
              };
            }),
            galleryItems: cfg.galleryItems.map((i) => {
              return {
                ...i,
                label: getFormattedText(data, i.label),
                value: getFormattedText(data, i.value),
              };
            }),
          });
          break;
        }
        case 'chart': {
          const cfg = chart.shift();
          if (!cfg) break;
          const data = getData(refData, cfg.readFrom);

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

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

          arr.push({
            key,
            data,
            config: cfg,
          });
          break;
        }
      }
      return arr;
    }, []);
  });

  onMounted(() => {
    fetchDevices();
  });
</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_without_header {
    height: 100%;
  }
  .content__background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    object-fit: fill;
  }
  .content__module {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  // .content__module:first-of-type {
  //   margin-top: 0;
  // }
  // .content__module:last-of-type {
  //   margin-bottom: 0;
  // }
  ::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;
  }
</style>