vent-template/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[]>([30, 56, 119]);
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: '0-13.75ppm',
          level: '绿色预警',
          temperature: '0-30℃',
          alarmName: '潜伏期阶段',
          id: '1811650465072791911',
          alarmInfo: 'CO',
          alarmcode: 'coval,coCo2,',
        },
        {
          alarmType: 'fireWarn',
          alarmdes: '13.75-67.2ppm,0.036-0.095',
          level: '黄色预警',
          temperature: '30-70℃',
          alarmName: '缓慢氧化升温阶段',
          id: '1811650534094258912',
          alarmInfo: 'CO,CO / CO₂‌',
          alarmcode: 'coval,coCo2,ch2val,',
        },
        {
          alarmType: 'fireWarn',
          alarmdes: '67.2-1606.3ppm,0.095-0.322,<2,<1.5',
          level: '橙色预警',
          temperature: '70-120℃',
          alarmName: '加速氧化升温阶段',
          id: '1811650534094258912',
          alarmInfo: 'CO,CO / CO₂‌,C₂H₄,CH₃CH₂CH₃ / CH₃CH₃‌‌',
          alarmcode: 'coval,coCo2,ch2val,',
        },
        {
          alarmType: 'fireWarn',
          alarmdes: '>1606.3ppm,>0.322,>2,>1.5,>0',
          level: '红色预警',
          temperature: '>120℃',
          alarmName: '剧烈氧化升温阶段',
          id: '1811650769583423913',
          alarmInfo: 'CO,CO / CO₂‌,C₂H₄,CH₃CH₂CH₃ / CH₃CH₃‌‌,C₂H₂',
          alarmcode: 'coval,coCo2,ch2val,chval,',
        },
      ];
    } else {
      if (newV.length != 0) {
        tableData.value = newV.map(el => {
          return {
            alarmType: el.alarmType,
            alarmdes: el.sublist[0].alarmdes,
            level: el.sublist[0].level,
            temperature: el.sublist[0].temperature,
            alarmName: el.alarmName,
            id: el.id,
            alarmInfo: el.sublist[0].alarmInfo,
            alarmcode: el.sublist[0].alarmcode,
          }
        });

      }
    }
  },
  { immediate: 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>