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

<template>
  <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 设备监测预警 </customHeader>
  <div class="alarm-modal">
    <a-button
      v-if="!hasPermission('deviceWarn:return')"
      preIcon="ant-design:rollback-outlined"
      type="text"
      size="small"
      style="position: absolute; left: 15px; top: 15px; color: #fff"
      @click="getBack"
      >返回</a-button
    >
    <div class="device-type-box">
      <div v-for="(item, index) in iconsMonitorDevice" :key="index" class="device-icon-box">
        <img :src="item.url" :alt="item.text" />
      </div>
    </div>
    <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="预警监测"
            :scroll="{ y: 530 }"
          >
            <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,iconsMonitorDevice } from '../alarm.data';
  import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
  import { useRouter } from 'vue-router';
  import { usePermission } from '/@/hooks/web/usePermission';

  const { hasPermission } = usePermission();
  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(100% - 150px);

    .@{ventSpace}-tabs {
      max-height: calc(100% - 100px);

      // .tab-item {
      //   height: 100px;
      //   // max-height: calc(100vh - 170px);
      // }
    }
    .device-type-box {
      width: 1898px;
      height: 120px;
      color: #fff;
      position: absolute;
      top: 130px;
      // 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;
      display: flex;
      flex-direction: row;
      .device-icon-box {
        width: 110px;
        height: 110px;
        border: 1px solid rgba(25, 237, 255, 0.4);
        box-shadow: inset 0 0 20px #00c5ff44;
        background: rgba(0, 0, 0, 0.06666667);
        margin: 0 8px;
      }
    }
    .title-text {
      position: absolute;
      top: -14px;
      left: 0;
      width: 100%;
      text-align: center;
      color: #fff;
    }
    .table-box {
      height: 650px;
      padding: 20px 10px;
      margin-bottom: 15px;
    }

    .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 {
      // padding-bottom: 120px;
    }
    .@{ventSpace}-tabs-nav::before {
      border-color: #74e9fe;
    }

    .@{ventSpace}-picker,
    .@{ventSpace}-select-selector {
      width: 100% !important;
      background: #00000017 !important;
      border: 1px solid @vent-form-item-border !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>