gas-injection/src/views/vent/home/billboard/components/FireStatus.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="fire_wrapper">
    <CommonTitle class="mb-10px" label="矿井火灾风险性等级" :value="risk" />
    <Collapse ghost class="fire_list">
      <CollapsePanel class="fire_list_item" v-for="(item, i) in FIRE_STATUS_LIST" :key="`svvhbcfcp-${i}`" :showArrow="false">
        <template #header>
          <ListItem :key="item.icon" :icon="item.icon" :label="item.label" :value="get(listData, item.prop)" :type="i % 2 ? 'green' : 'blue'" />
        </template>
        <template #default>
          <p v-for="(t, ix) in item.collapses" :key="`svvhbcfcp-${i}${ix}`" class="fire_list_collapse"> {{ t.name }}：{{ get(item, t.prop) }} </p>
        </template>
      </CollapsePanel>
    </Collapse>
  </div>
</template>
<script lang="ts" setup>
  import { Collapse, CollapsePanel } from 'ant-design-vue';
  import { get } from '../utils';
  import _ from 'lodash-es';
  import { ref, shallowRef, onMounted } from 'vue';
  import CommonTitle from './CommonTitle.vue';
  import ListItem from './ListItem.vue';
  import { BillboardType, DEFAULT_TEST_DATA, FIRE_STATUS_LIST, FIRE_STATUS_IGNORE_TRANSLATION_KEYS } from '../billboard.data';

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

  const risk = ref('低风险');

  const listData = shallowRef<any>({});

  function fetchData() {
    const info = props.data.fireInfo;
    if (!info) return;
    const riskTrans = {
      0: '低风险',
      101: '低风险',
      102: '普通风险',
      103: '较高风险',
      104: '高风险',
      201: '低风险',
      1001: '低风险',
    };
    const warnTrans = {
      0: '低风险',
      101: '低风险',
      102: '一般风险',
      103: '较大风险',
      104: '重大风险',
      201: '报警',
      1001: '网络断开',
    };
    risk.value = riskTrans[get(info, 'fireWarnLevel', 0)];
    _.forEach(info, (val, key) => {
      if (FIRE_STATUS_IGNORE_TRANSLATION_KEYS.includes(key)) return;
      info[key] = warnTrans[val];
    });
    listData.value = info;
  }

  onMounted(() => {
    fetchData();
  });
</script>
<style lang="less" scoped>
  .fire_list {
    height: 260px;
    overflow: auto;

    .fire_list_item {
      color: @white;
      // ::v-deep .zxm-collapse > .zxm-collapse-item > .zxm-collapse-header {
      // }
    }

    .fire_list_collapse {
      text-align: left;
      color: @white;
      margin-left: 10px;
    }
  }
  .fire_wrapper :deep(.zxm-collapse > .zxm-collapse-item > .zxm-collapse-header) {
    padding: 0;
    color: @white;
  }
</style>