vent-template/src/views/vent/monitorManager/alarmMonitor/warn/deviceWarn.vue

<template>
  <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 设备监测预警 </customHeader>
  <div class="alarm-modal">
    <a-button preIcon="ant-design:rollback-outlined" type="text" size="small"
      style="position: absolute;left:15px;top:15px;color: #fff;" @click="getBack">返回</a-button>
    <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 CustomHeader from '/@/components/vent/customHeader.vue';
import { warningList } from '../alarm.api';
import { levelColumns, levelHisColumns } from '../alarm.data';
import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
import { useRouter } from 'vue-router';

// const props = defineProps({
//   deviceId: { type: String },
// });

const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
// 默认初始是第一行
const activeKey = ref('1');
const dataSource = ref([]);

const tabChange = (activeKeyVal) => {
  activeKey.value = activeKeyVal;
};
let router = useRouter()

// 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
    );
  }
}

//返回首页
function getBack() {
  router.push('/monitorChannel/monitor-alarm-home')
}

//设备预警监测列表
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: 80px 10px 15px 10px;
  box-sizing: border-box;
  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>