gasInjection-project/src/views/vent/monitorManager/alarmMonitor/common/warnFire-bd.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 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) => {
      if (newV.length != 0) {
        tableData.value = newV;
      }
    },
    { immediate: true, deep: true }
  );
</script>

<style lang="less" scoped>
  .warnTargetFire-brt {
    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: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
      background-size: 100% 100%;
    }

    .bot-area {
      height: calc(60% - 15px);
      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
      background-size: 100% 100%;
    }
  }
</style>