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' && background.isBoard"
      class="content__background"
      width="100%"
      autoplay
      loop
      muted
      disablepictureinpicture
      playsinline
    >
      <source :src="background.link" />
      Not Supportted Link Or Browser
    </video>
    <video
      v-if="background.show && background.type === 'video' && !background.isBoard"
      class="content__background_1"
      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
            v-if="config.pageType == 'vent_New'"
            style="padding-top: 11%"
            class="content__module content__module1 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"
              :type="config.type"
              :layout="config.layout"
            />
          </div>
          <div v-else-if="config.pageType == 'New_fire'" class="content__module flex flex-justify-around flex-items-center flex-wrap">
            <MiniBoardNew
              v-for="item in config.items"
              :key="item.prop"
              :label="item.label"
              :value="item.value"
              :type="config.type"
              :layout="config.layout"
            />
          </div>
          <div v-else 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"
              :type="config.type"
              :layout="config.layout"
            />
          </div>
        </template>
        <!-- 图表部分 -->
        <template v-if="config.name === 'chart'">
          <CustomChart v-if="config.pageType == 'New_dust'" class="content__module_dust" :chart-config="config.config" :chart-data="config.data" />
          <CustomChart v-else 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-if="config.type === 'timelineNew'">
            <TimelineListNew class="content__module" :list-config="config.items" />
          </template>
          <template v-else-if="config.pagetype === 'Belt'">
            <CustomListBelt class="content__module" :type="config.type" :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 === 'fireList'">
          <CustomList class="content__module" :type="config.type" :list-config="config.items" />
        </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'">
          <template v-if="config.pagetype === 'Belt'">
            <ComplexListBelt class="content__module" :type="config.type" :list-config="config.items" />
          </template>
          <template v-else-if="config.pagetype === 'complex_list1'">
            <ComplexList1Belt class="content__module" :type="config.type" :list-config="config.items" />
          </template>
          <template v-else>
            <ComplexList class="content__module" :type="config.type" :list-config="config.items" />
          </template>
        </template>
        <!-- 表格部分 -->
        <template v-if="config.name === 'table'">
          <template v-if="config.pagetype === 'Belt'">
            <CustomTableBelt
              class="content__module text-center overflow-auto"
              :type="config.type"
              :columns="config.columns"
              :auto-scroll="config.autoScroll"
              :data="config.data"
            />
          </template>
          <template v-else>
            <CustomTable
              class="content__module text-center overflow-auto"
              :type="config.type"
              :columns="config.columns"
              :auto-scroll="config.autoScroll"
              :data="config.data"
            />
          </template>
        </template>
        <template v-if="config.name === 'tabs'">
          <CustomTabs class="content__module" :type="config.type" :tab-config="config.items" :overflow="config.overflow" />
        </template>
        <template v-if="config.name === 'blast_delta'">
          <BlastDelta
            v-if="config.pageType === 'New_fire'"
            class="content__moduleFire"
            :pos-monitor="config.data"
            :canvasSize="{ width: 250, height: 200 }"
          />
          <BlastDelta v-else class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 200 }" />
        </template>
        <template v-if="config.name === 'qh_curve'">
          <QHCurve class="content__module" :mainfan="config.data" :fan1-prop="config.config.fan1Prop" :fan2-prop="config.config.fan2Prop" />
        </template>
        <template v-if="config.name === 'ai_chat'">
          <AIChat class="content__module" />
        </template>
        <template v-if="config.name === 'device_alarm'">
          <DeviceAlarm class="content__module" :devicedata="config.data" :config="config.config" />
        </template>
        <!-- lxh -->
        <template v-if="config.name === 'select_cs'">
          <SelectCs :devicedata="config.data" :config="config.config" />
        </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.name === 'partition'">
          <Partition class="content__module" :type="config.type" :label="config.label" :icon="config.icon" />
        </template>
        <template v-if="config.name === 'selector_dual_chart'">
          <SelectorDualChart :data="config.data" :moduleData="props.moduleData" :config="config" />
        </template>
        <template v-if="config.name === 'radio_label'">
          <RadioLabel class="content__module" :type="config.config.type" :config="config.config" />
        </template>
        <template v-if="config.name === 'button_list'">
          <ButtonList class="content__module" :type="config.config.type" :config="config.config" :buttonList="config.config.buttonList" />
        </template>
        <template v-if="config.name === 'card_list'">
          <cardList class="content__module" :cardData="config.data" />
        </template>
        <template v-else-if="config.name === 'generalist'">
          <generalList class="content__module" :generalData="config.data" />
        </template>
        <template v-if="config.name === 'nitrogenBtnList'">
          <NitrogenBtnList
            class="content__module"
            :data="config.data"
            :type="config.config.type"
            :config="config.config"
            :buttonList="config.config.buttonList"
          />
        </template>
        <template v-if="config.name === 'gateBoard'">
          <GateBoard class="content__module" :config="config.config" :data="config.data" />
        </template>
        <!-- 3. 火灾监测设备分析 -->
        <template v-if="config.name === 'sprayCtrl'">
          <SprayControl class="content__module" :config="config.config" :data="data" />
        </template>
        <template v-if="config.name === 'cameraList'">
          <CameraList class="content__module" :config="config.config" :data="config.data" />
        </template>
        <template v-if="config.name === 'CameraListTest'">
          <CameraListTest class="content__module" :config="config.config" :data="config.data" />
        </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> -->
        <!-- ==================== 新增皮带巷火灾监测模块 ==================== -->
        <!-- 1. 传感器状态面板 -->
        <template v-if="config.name === 'sensor_status'">
          <SensorStatusPanel class="content__module" style="height: calc(100% - 30px) !important" :config="config.config" :data="config.data" />
        </template>

        <!-- 3. 火灾监测设备分析 -->
        <template v-if="config.name === 'fire_sensor_analysis'">
          <FireSensorAnalysis class="content__module" :config="config.config.config" :data="config.data" />
        </template>

        <!-- 4. 预警结果列表 -->
        <template v-if="config.name === 'warning_result'">
          <WarningResultList class="content__module" :config="config.config" :data="config.data" />
        </template>

        <!-- 5. 车辆定位与 CO 浓度关联分析 -->
        <template v-if="config.name === 'vehicle_co_analysis'">
          <VehicleCOAnalysis class="content__module" :list="config.config.list" :data="config.data" />
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { CommonItem, Config } from '../../../deviceManager/configurationTable/types';
import MiniBoard from './detail/MiniBoard.vue';
import TimelineList from './detail/TimelineList.vue';
import TimelineListNew from './detail/TimelineListNew.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 QHCurve from './preset/QHCurve.vue';
import MeasureDetail from './preset/MeasureDetail.vue';
import CustomTabs from './preset/CustomTabs.vue';
import AIChat from '/@/components/AIChat/MiniChat.vue';
import DeviceAlarm from './preset/DeviceAlarm.vue';
import SelectCs from './preset/SelectCs.vue';
import MiniBoardNew from './detail/MiniBoard-New.vue';
import Partition from './preset/partition.vue';
import SelectorDualChart from './preset/selectorDualChart.vue';
import RadioLabel from './preset/radioLabel.vue';
import ButtonList from './preset/buttonList.vue';
import NitrogenBtnList from './preset/nitrogenBtnList.vue';
import cardList from './preset/cardList.vue';
import generalList from './preset/generalList.vue';
import GateBoard from '../belt/components/detail/gateBoard.vue';
// ==================== 新增皮带巷火灾监测组件 ====================
import SensorStatusPanel from './belt/SensorStatusPanel.vue';
import FireSensorAnalysis from './belt/FireSensorAnalysis.vue';
import WarningResultList from './belt/WarningResultList.vue';
import VehicleCOAnalysis from './belt/VehicleCOAnalysis.vue';
// 首页组件
import CustomListBelt from './belt/CustomListBelt.vue';
import ComplexListBelt from './belt/ComplexListBelt.vue';
import ComplexList1Belt from './belt/ComplexList1Belt.vue';
import CustomTableBelt from './belt/CustomTableBelt.vue';
import SprayControl from './belt/SprayControl.vue';
import CameraList from './belt/CameraList.vue';
import CameraListTest from './belt/CameraListTest.vue';
const props = defineProps<{
  data: any;
  moduleData: Config['moduleData'];
  chartData: any;
}>();

const emit = defineEmits<{
  (e: 'start-spray', data: any): void;
  (e: 'emergency-action', action: string, data: any): void;
}>();

const { background, layout } = props.moduleData;

// 获取当原始配置带 items 项时的最终 items 配置
function getItems(raw: any, 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 的具体配置 */
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) || [];
  const partition = clone(props.moduleData.partition) || [];

  const mockData = clone(props.chartData) || [];

  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: any) => {
              return {
                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
                contents: firstListItem.contents.map((e: any) => {
                  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: any) => {
              return {
                title: getFormattedText(data, i.title, i.trans),
                contents: i.contents.map((e: any) => {
                  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: any) => {
              return {
                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
                contents: firstListItem.contents.map((e: any) => {
                  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: any) => {
              return {
                title: getFormattedText(data, i.title, i.trans),
                contents: i.contents.map((e: any) => {
                  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 = cfg?.type == 'scatter' ? getData(mockData, cfg.readFrom, cfg.parser) : 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: refData,
        });
        break;
      }
      case 'partition': {
        const cfg = partition.shift();
        if (!cfg) break;
        const data = getData(refData, cfg.readFrom, cfg.parser);
        arr.push({
          overflow: true,
          ...item,
          data,
          ...cfg,
        });
        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;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
.content__background {
  width: 100%;
  // height: 100%;
  height: calc(100% - 65px);
  position: absolute;
  top: 65px;
  left: 0;
  z-index: 0;
  object-fit: fill;
  padding: 5px;
  box-sizing: border-box;
}
.content__background_1 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 0;
  object-fit: fill;
}

.image__background {
  width: 35%;
  height: 61%;
  left: 30%;
}

.content__module {
  width: 100%;
  height: 100%;
}

.content__module1 {
  background: url('@/assets/images/vent/homeNew/databg/4.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 129px;
  margin-top: 20%;
}

.content__moduleFire {
  width: 100%;
  height: 100%;
  margin-left: -24% !important;
}

.content__module_dust {
  background: url('@/assets/images/vent/homeNew/bottomBg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
}

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

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

:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
  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;
}
</style>