mky-vent-base/src/views/vent/home/billboard/components/GasStatus.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <Row justify="space-around">
    <Col v-for="(item, i) in GAS_STATUS_HEADER_CONFIG" :key="`svvhbcgs${i}`" :span="10">
      <LargeBoard :label="item.label" :value="headerData[item.prop]" :type="item.type" />
    </Col>
  </Row>
  <CollapseTable class="mt-10px" :columns="GAS_STATUS_COLUMN" :data="tableData" :collapses="GAS_COLLAPSES" content-height="160px" />
</template>
<script lang="ts" setup>
  import _ from 'lodash-es';
  import { Row, Col } from 'ant-design-vue';
  import { GAS_STATUS_HEADER_CONFIG, GAS_STATUS_COLUMN, DEFAULT_TEST_DATA, GAS_COLLAPSES, BillboardType } from '../billboard.data';
  import LargeBoard from './LargeBoard.vue';
  import { onMounted, shallowRef } from 'vue';
  import CollapseTable from './CollapseTable.vue';
  import { get } from '../utils';
  // import mapComponent from './components/3Dmap/index.vue';

  const props = withDefaults(
    defineProps<{
      data?: BillboardType;
    }>(),
    {
      data: () => DEFAULT_TEST_DATA,
    }
  );

  const headerData = shallowRef({});
  const tableData = shallowRef<BillboardType['gasInfo']['gasTypeList']>([]);

  function fetchData() {
    const info = props.data.gasInfo;
    if (!info) return;
    const riskTrans = {
      0: '低风险',
      101: '低风险',
      102: '普通风险',
      103: '较高风险',
      104: '高风险',
      201: '低风险',
      1001: '低风险',
    };
    const trans = {
      0: '低风险',
      101: '低风险',
      102: '一般风险',
      103: '较大风险',
      104: '重大风险',
      201: '报警',
      1001: '网络断开',
    };
    headerData.value = {
      gasWarnLevel: riskTrans[get(info, 'gasWarnLevel', 0)],
      // gasJudgeLevel: '低风险',
      gasJudgeLevel: props.data.orgcode == 'sdmtjtbdmk' ? '高瓦斯' : '低瓦斯',
    };
    tableData.value = get(info, 'gasTypeList', []).map((e) => {
      return {
        ...e,
        warnLevelStr: trans[e.warnLevel],
      };
    });
  }

  onMounted(() => {
    fetchData();
  });
</script>
<style lang="less" scoped></style>