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

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="w-100% h-100% pl-5px pr-5px">
    <div class="flex items-center h-140px">
      <div class="fire-warn__image">
        <div class="fire-warn__image_sub w-50px h-50px top-10px left-20px line-height-50px">低风险</div>
        <div class="fire-warn__image_sub w-30px h-30px top-50px left-70px line-height-30px">CO</div>
        <div class="fire-warn__image_sub w-20px h-20px top-80px left-20px line-height-20px">CO</div>
      </div>
      <CustomList type="A" :list-config="listAConfig" />
    </div>
    <CustomList type="B" :list-config="listBConfig" style="height: 80px; margin-top: 10px" />
  </div>
</template>
<script lang="ts" setup>
  import { computed, onMounted } from 'vue';
  // import { Config } 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 '../detail/CustomList.vue';
  import { getFormattedText } from '../../../../deviceManager/configurationTable/adapters';
  //   import CustomChart from './CustomChart.vue';
  //   import { get } from 'lodash-es';
  //   import CommonTable from '../../billboard/components/CommonTable.vue';
  //   import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';

  //   const { header: headerConfig, background, board, layout, list, chart, table } = props.moduleData;
  const listA = [
    {
      info: 'A',
      prop: 'a',
      label: '火情状态',
      color: 'yellow',
    },
    {
      info: 'A',
      prop: 'b',
      label: '回采位置',
      color: 'white',
    },
    {
      info: 'A',
      prop: 'c',
      label: '硐室火情',
      color: 'blue',
    },
    {
      info: 'A',
      prop: 'd',
      label: '联动设备状态',
      color: 'blue',
    },
  ];
  const listB = [
    {
      info: 'B',
      prop: 'a',
      label: '2024/07/22 07:00:00',
      color: 'white',
    },
    {
      info: 'B',
      prop: 'b',
      label: '2811工作面上隅角',
      color: 'white',
    },
  ];
  const listBConfig = computed(() => {
    const data = {
      a: '轻微堵塞',
      b: '甲烷0.02%',
    };
    return listB.map((b) => {
      return {
        ...b,
        value: getFormattedText(data, b.prop),
        // value: getFormattedText(data, b.prop, b.formatter),
      };
    });
  });
  const listAConfig = computed(() => {
    const data = {
      a: '缓慢氧化',
      b: '800m',
      c: '正常',
      d: '正常',
    };
    return listA.map((b) => {
      return {
        ...b,
        value: getFormattedText(data, b.prop),
        // value: getFormattedText(data, b.prop, b.formatter),
      };
    });
  });
  //   const listType = computed(() => {
  //     return list[0]?.type || 'A';
  //   });

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

  onMounted(() => {
    // fetchDevices();
  });
</script>
<style lang="less" scoped>
  @import '@/design/vent/color.less';

  .fire-warn__image {
    position: relative;
    width: 200px;
    height: 100%;
    margin: 0 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    background-image: url(/@/assets/images/home-container/configurable/deco_2.png);
  }

  .fire-warn__image_sub {
    text-align: center;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    background-image: url(/@/assets/images/home-container/configurable/deco_3.png);
  }
</style>