mky-vent-base/src/views/vent/monitorManager/comment/DetailModal.vue

<template>
  <BasicModal @register="register" title="预警详情" width="100%" v-bind="$attrs" @ok="onSubmit" @cancel="onSubmit" :defaultFullscreen="true">
    <MonitorTable
      ref="monitorTable"
      :columnsType="`${deviceType}_monitor`"
      :dataSource="dataSource"
      design-scope="device_monitor"
      :isShowPagination="false"
      :isShowActionColumn="true"
      title="设备监测"
    >
      <template #filterCell="{ column, record }">
        <template v-if="deviceType.startsWith('gate')">
          <template v-if="record.frontGateOpenCtrl">
            <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red">正在打开</a-tag>
            <a-tag v-else-if="column.dataIndex === 'frontGateOpen'" color="processing">打开</a-tag>
          </template>
          <template v-else>
            <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red">正在关闭</a-tag>
            <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1" color="default"
              >关闭</a-tag
            >
            <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0" color="default"
              >打开</a-tag
            >
          </template>
          <template v-if="record.rearGateOpenCtrl">
            <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red">正在打开</a-tag>
            <a-tag v-else-if="column.dataIndex === 'rearGateOpen'" color="processing">打开</a-tag>
          </template>
          <template v-else>
            <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red">正在关闭</a-tag>
            <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1" color="default"
              >关闭</a-tag
            >
            <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0" color="default"
              >打开</a-tag
            >
          </template>
        </template>
        <template v-if="deviceType.startsWith('windrect')">
          <a-tag v-if="column.dataIndex === 'sign'" :color="record.sign == 0 ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'">
            {{ record.sign == 0 ? '高位' : record.sign == 1 ? '中位' : '低位' }}</a-tag
          >
          <template v-if="record && column && column.dataIndex === 'isRun' && record.isRun">
            <a-tag v-if="record.isRun == -2 || record.isRun == -1" :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
              record.isRun == -2 ? '空闲' : '等待'
            }}</a-tag>
            <a-tag v-else-if="record.isRun == 100" color="#4693FF">完成</a-tag>
            <Progress v-else :percent="Number(record.isRun)" size="small" status="active" />
          </template>
        </template>
        <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
          {{ record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测' }}</a-tag
        >
        <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
          record.netStatus == '0' ? '断开' : '连接'
        }}</a-tag>
      </template>
    </MonitorTable>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { onMounted, ref, defineEmits, onUnmounted, watch } from 'vue';
  import MonitorTable from '../comment/MonitorTable.vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';

  const emit = defineEmits(['close', 'register']);
  const props = defineProps({
    deviceType: {
      type: String,
      default: '',
    },
    scroll: {
      type: Object,
      default: { y: 0 },
    },
  });

  const dataSource = ref([]);

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

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

  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);
    .title-text {
      position: absolute;
      top: -14px;
      left: 0;
      width: 100%;
      text-align: center;
      color: #fff;
    }
    .table-box {
      height: calc(60vh - 150px);
      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;
    }
  }
  .@{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>