hsq-pro/src/views/vent/monitorManager/alarmMonitor/common/warnFire-brt.vue

<template>
  <div class="warnTargetFire-brt">
    <div class="top-area">
      <a-table :columns="columns" :data-source="tableData" bordered :pagination="false" :scroll="{ y: 250 }">
        <template #bodyCell="{ column, text }">
          <template v-if="column.dataIndex === 'alarmdes' || column.dataIndex === 'alarmInfo'">
            <div v-for="item in text.split(',')" :key="item">{{ item }}</div>
          </template>
        </template>
      </a-table>
    </div>
    <div class="bot-area">
      <warnZb :widthV="widthV" :heightV="heightV" :coordDw="coordDw" :widthCanvas="widthCanvas" :heightCanvas="heightCanvas" />
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, watch } from 'vue';
  import { useGlobSetting } from '/@/hooks/setting';
  import warnZb from './warnZb.vue';
  let props = defineProps({
    tableList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  });

  let widthV = ref('80%');
  let heightV = ref('80%');
  let coordDw = ref<any[]>([50, 94]);
  let widthCanvas = ref(1240);
  let heightCanvas = ref(364);
  let tableData = ref<any[]>([]);

  let columns = reactive([
    {
      title: '序号',
      dataIndex: '',
      key: 'rowIndex',
      width: 80,
      align: 'center',
      customRender: ({ index }) => {
        return `${index + 1}`;
      },
    },
    {
      title: '预警等级',
      dataIndex: 'level',
      align: 'center',
    },
    {
      title: '煤自燃阶段',
      dataIndex: 'alarmName',
      align: 'center',
    },
    {
      title: '指标气体',
      align: 'center',
      dataIndex: 'alarmInfo',
    },
    {
      title: '指标气体浓度范围',
      align: 'center',
      dataIndex: 'alarmdes',
    },
    {
      title: '温度',
      align: 'center',
      dataIndex: 'temperature',
    },
  ]);

  watch(
    () => props.tableList,
    (newV, oldV) => {
      let { sysOrgCode } = useGlobSetting();
      if (sysOrgCode == 'A02A02') {
        tableData.value = [
          {
            alarmType: 'fireWarn',
            alarmdes: '<79.1,<0.12,',
            level: '绿色预警',
            temperature: '0-120℃',
            alarmName: '缓慢氧化阶段（潜伏期）',
            id: '1811650465072791911',
            alarmInfo: '一氧化碳,一氧化碳/二氧化碳,',
            alarmcode: 'coval,coCo2,',
          },
          {
            alarmType: 'fireWarn',
            alarmdes: '79.1-1653.6,0.12-0.46,<2.4,',
            level: '黄色预警',
            temperature: '120-200℃',
            alarmName: '加速氧化阶段（自热期）',
            id: '1811650534094258912',
            alarmInfo: '一氧化碳,一氧化碳/二氧化碳,乙烯,',
            alarmcode: 'coval,coCo2,ch2val,',
          },
          {
            alarmType: 'fireWarn',
            alarmdes: '>1653.6,>0.46,>2.4,>0.0,',
            level: '红色预警',
            temperature: '>200℃',
            alarmName: '剧烈氧化阶段（燃烧期）',
            id: '1811650769583423913',
            alarmInfo: '一氧化碳,一氧化碳/二氧化碳,乙烯,乙炔,',
            alarmcode: 'coval,coCo2,ch2val,chval,',
          },
        ];
      } else {
        if (newV.length != 0) {
          tableData.value = newV;
        }
      }
    },
    { immediate: true, deep: true }
  );
</script>

<style lang="less" scoped>
  @import '/@/design/theme.less';

  @{theme-deepblue} {
    .warnTargetFire-brt {
      --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
    }
  }

  .warnTargetFire-brt {
    --image-bj1: url('/@/assets/images/fire/bj1.png');
    width: 100%;
    height: 100%;
    margin: 15px 0px 0px 0px;
    padding: 20px;
    // background: url('../../../../../assets//images/fire/border.png') no-repeat center;
    // background-size: 100% 100%;
    box-sizing: border-box;

    .top-area {
      height: 40%;
      margin-bottom: 15px;
      background: var(--image-bj1) no-repeat center;
      background-size: 100% 100%;
    }

    .bot-area {
      height: calc(60% - 15px);
      background: var(--image-bj1) no-repeat center;
      background-size: 100% 100%;
    }
  }
</style>