gas-injection/src/views/vent/monitorManager/alarmMonitor/warn/deviceWarn.vue

<template>
      <div class="alarm-modal">
        <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange">
          <a-tab-pane key="1" tab="实时预警">
            <div v-if="activeKey == '1'" class="box-bg table-box" style="margin-bottom: 10px">
              <MonitorTable
                ref="SensorMonitorRef"
                :columns="levelColumns"
                :dataSource="dataSource"
                design-scope="alarm"
                :isShowSelect="false"
                title="预警监测"
              >
                <template #filterCell="{ column, record }">
                  <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
                    record.warnFlag == 0 ? '正常' : '报警'
                  }}</a-tag>
                  <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
                    record.netStatus == '0' ? '断开' : '连接'
                  }}</a-tag>
                </template>
              </MonitorTable>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="报警历史">
            <div class="tab-item box-bg">
              <AlarmHistoryTable v-if="activeKey == '2'" :columns="levelHisColumns" designScope="alarm-history" />
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
   
  </template>
  <script lang="ts" setup>
    import { onMounted, ref, defineEmits, reactive, onUnmounted, watch } from 'vue';
    import MonitorTable from '../../comment/MonitorTable.vue';
    import AlarmHistoryTable from '../AlarmHistoryTable.vue';
    import { warningList } from '../alarm.api';
    import { levelColumns, levelHisColumns } from '../alarm.data';
  
    // const props = defineProps({
    //   deviceId: { type: String },
    // });
  
  
    // 默认初始是第一行
    const activeKey = ref('1');
    const dataSource = ref([]);
  
    const tabChange = (activeKeyVal) => {
      activeKey.value = activeKeyVal;
    };
  
  
    // https获取监测数据
    let timer: null | NodeJS.Timeout = null;
    function getMonitor(flag = false) {
      if (Object.prototype.toString.call(timer) === '[object Null]') {
        timer = setTimeout(
          async () => {
            await getDataSource();
            if (timer) {
              timer = null;
            }
            getMonitor();
          },
          flag ? 0 : 10000
        );
      }
    }
    //设备预警监测列表
    async function getDataSource() {
      const res = await warningList({ isok: 0 });
      dataSource.value = res.list || [];
    }
  
    onMounted(async () => {
      getMonitor(true);
    });
    onUnmounted(() => {
      if (timer) {
        clearTimeout(timer);
        timer = undefined;
      }
    });
  </script>
  <style scoped lang="less">
    @import '/@/design/vent/color.less';
    @import '/@/design/vent/modal.less';
    .padding-0 {
      padding: 10px 0 !important;
    }
    .alarm-modal {
      position: relative;
      padding: 10px;
      z-index: 999;
      max-height: calc(100vh - 150px);
      .@{ventSpace}-tabs {
        max-height: calc(100vh - 100px);
        .tab-item {
          height: calc(90vh - 152px);
          // max-height: calc(100vh - 170px);
          overflow-y: auto;
        }
      }
      .title-text {
        position: absolute;
        top: -14px;
        left: 0;
        width: 100%;
        text-align: center;
        color: #fff;
      }
      .table-box {
        height: calc(90vh - 152px);
        padding: 20px 10px;
        overflow-y: auto;
      }
  
      .box-bg {
        border: 1px solid #4d7ad855;
        border-radius: 2px;
        // background-color: #001d3055;
        // -webkit-backdrop-filter: blur(8px);
        // backdrop-filter: blur(8px);
        box-shadow: 0 0 10px #5984e055 inset;
        // background-color: #00b3ff12;
      }
      .charts-box {
        height: calc(40vh - 80px);
        padding: 5px 10px;
        margin-top: 10px;
      }
    }
    :deep(.@{ventSpace}-tabs-tabpane-active) {
      height: 100%;
    }
    :deep(.@{ventSpace}-tabs-card) {
      .@{ventSpace}-tabs-tab {
        background: linear-gradient(#2cd1ff55, #1eb0ff55);
        border-color: #74e9fe;
        border-radius: 0%;
        &:hover {
          color: #64d5ff;
        }
      }
      .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
        color: aqua;
      }
      .@{ventSpace}-tabs-nav::before {
        border-color: #74e9fe;
      }
      .@{ventSpace}-picker,
      .@{ventSpace}-select-selector {
        width: 100% !important;
        background: #00000017 !important;
        border: 1px solid @vent-form-item-boder !important;
        input,
        .@{ventSpace}-select-selection-item,
        .@{ventSpace}-picker-suffix {
          color: #fff !important;
        }
        .@{ventSpace}-select-selection-placeholder {
          color: #b7b7b7 !important;
        }
      }
      .@{ventSpace}-pagination-next,
      .action,
      .@{ventSpace}-select-arrow,
      .@{ventSpace}-picker-separator {
        color: #fff !important;
      }
      .@{ventSpace}-table-cell-row-hover {
        background: #264d8833 !important;
      }
      .@{ventSpace}-table-row-selected {
        background: #00c0a311 !important;
        td {
          background-color: #00000000 !important;
        }
      }
      .@{ventSpace}-table-thead {
        // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
        background: #3d9dd45d !important;
  
        & > tr > th,
        .@{ventSpace}-table-column-title {
          // color: #70f9fc !important;
          border-color: #84f2ff !important;
          border-left: none !important;
          border-right: none !important;
          padding: 7px;
        }
      }
  
      .@{ventSpace}-table-tbody {
        tr > td {
          padding: 12px;
        }
      }
      .@{ventSpace}-table-tbody > tr:hover.@{ventSpace}-table-row > td {
        background-color: #26648855 !important;
      }
  
      .jeecg-basic-table-row__striped {
        // background: #97efff11 !important;
        td {
          background-color: #97efff11 !important;
        }
      }
    }
  </style>