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

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <Result v-if="unavailble" status="error" title="网络异常" sub-title="无法获取到火灾风险信息" />
  <div v-else 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
            class="mt-5px mb-5px"
            :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(listData, t.prop) }} </p>
        </template>
      </CollapsePanel>
    </Collapse>
  </div>
</template>
<script lang="ts" setup>
  import { Collapse, CollapsePanel, Result } from 'ant-design-vue';
  import { get } from '../utils';
  import { computed } from 'vue';
  import CommonTitle from './CommonTitle.vue';
  import ListItem from './ListItem.vue';
  import { BillboardType, FIRE_STATUS_LIST } from '../billboard.data';

  const props = defineProps<{
    data: Partial<BillboardType>;
  }>();

  const unavailble = computed<boolean>(() => {
    return props.data.fireInfo === undefined;
  });
  const risk = computed(() => {
    const info = props.data.fireInfo;
    return riskTrans[get(info, 'fireWarnLevel', 0)];
  });
  const listData = computed(() => {
    const info = props.data.fireInfo;
    const value = {};
    FIRE_STATUS_LIST.forEach((cfg) => {
      value[cfg.prop] = get(warnTrans, get(info, cfg.prop), '低风险');
      cfg.collapses.forEach((el) => {
        value[el.prop] = get(info, el.prop);
      });
    });
    return value;
  });

  const riskTrans = {
    0: '低风险',
    101: '低风险',
    102: '普通风险',
    103: '较高风险',
    104: '高风险',
    201: '低风险',
    1001: '低风险',
  };
  const warnTrans = {
    0: '低风险',
    101: '低风险',
    102: '一般风险',
    103: '较大风险',
    104: '重大风险',
    201: '报警',
    1001: '网络断开',
  };
</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>