gas-injection/src/views/vent/monitorManager/alarmMonitor/DetailModal.vue

<template>
  <BasicModal @register="register" title="预警详情" width="100%" v-bind="$attrs" @ok="onSubmit" @cancel="onSubmit" :defaultFullscreen="true">
    <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 ? 'default' : '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>
  </BasicModal>
</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'
import { BasicModal, useModalInner } from '/@/components/Modal';


const props = defineProps({
  deviceId: { type: String },
  monitorData: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['close','register'])

// 默认初始是第一行
const activeKey = ref('1');
const dataSource = ref([]);

const tabChange = (activeKeyVal) => {
  activeKey.value = activeKeyVal;

};


// 注册 modal
const [register, { closeModal }] = useModalInner();

async function onSubmit() {
  emit('close')
  closeModal();
}

watch(() => props.monitorData, (data:never[]) => {
  dataSource.value = data
})

onMounted(async () => {

});
onUnmounted(() => {

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