mky-vent-base/src/views/vent/monitorManager/warningMonitor/index-mine.vue

<template>
  <customHeader>预警历史监控系统</customHeader>
  <div class="data-statistics">
    <div class="statistics-box" v-for="(item, index) in statisticsList" :key="index">
      <div class="left-box">
        <div class="box-title">{{ item.title }}</div>
      </div>
      <div class="right-box">
        <div class="box-text">
          <div class="text-label">监测数量</div>
          <div class="text-value">{{ item.valueT }}</div>
        </div>
        <div class="warning-state box-text">
          <div class="text-label">预警状态</div>
          <div class="text-value">{{ item.valueB }}</div>
        </div>
      </div>
    </div>
  </div>
  <a-tabs class="tab-box" v-model:activeKey="activeKey" @change="onChangeTab">
    <a-tab-pane tab="设备预警历史" key="device" />
    <a-tab-pane tab="联动预警历史" key="manageAuto" />
    <a-tab-pane tab="安全监控预警历史" key="safety" />
  </a-tabs>
  <div class="alarm-history-table">
    <template v-if="activeKey == 'device'">
      <BasicTable ref="alarmHistory" @register="registerTable" :scroll="{ x: 0, y: 350 }">
        <template #form-onExportXls>
          <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()"> 导出</a-button>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.dict">
            <!-- 除了 101（蓝色预警）其他都是红色字体 -->
            <span v-if="column.dataIndex === 'nwartype'"
              :class="{ 'color-#ff3823': ['102', '103', '104', '201', '1001'].includes(record.nwartype) }">
              {{ render.renderDictText(record.nwartype, 'leveltype') || '-' }}
            </span>
            <span v-else>
              {{ render.renderDictText(record[column.dataIndex], column.dict) || '-' }}
            </span>
          </template>
        </template>
      </BasicTable>
    </template>
    <template v-if="activeKey == 'manageAuto'">
      <BasicTable ref="alarmHistory" @register="registerTable" :scroll="{ x: 0, y: 350 }">
        <template #form-onExportXls>
          <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()"> 导出</a-button>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.dict">
            <!-- 除了 101（蓝色预警）其他都是红色字体 -->
            <span v-if="column.dataIndex === 'nwartype'"
              :class="{ 'color-#ff3823': ['102', '103', '104', '201', '1001'].includes(record.nwartype) }">
              {{ render.renderDictText(record.nwartype, 'leveltype') || '-' }}
            </span>
            <span v-else>
              {{ render.renderDictText(record[column.dataIndex], column.dict) || '-' }}
            </span>
          </template>
        </template>
      </BasicTable>
    </template>
    <template v-if="activeKey == 'safety'">
      <AlarmHistoryTable ref="alarmHistoryTable" columns-type="alarm" :list="safetyList" device-type="safetymonitor"
        :device-list-api="getDeviceList.bind(null, { devicekind: 'safetymonitor', pageSize: 10000 })"
        designScope="alarm-history" />
    </template>
  </div>
</template>

<script lang="ts" name="system-user" setup>
//ts语法
import { watch, ref, defineExpose, onMounted, reactive } from 'vue';
import { BasicTable } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
import { manageAutoColumns } from './alarm.data';
import { getAutoScrollContainer } from '/@/utils/common/compUtils';
import { getAlarmLogList, getManageAutoLogList, getWarnCountInfo } from './warning.api';
import { getDeviceList, safetyList, } from '../safetyMonitor/safety.api';
import { useRoute } from 'vue-router';
import customHeader from '/@/components/vent/customHeader.vue';
import AlarmHistoryTable from '../safetyMonitor/AlarmHistoryTable.vue';
import { render } from '/@/utils/common/renderUtils';
const props = defineProps({
  formConfig: {
    type: Object as PropType<FormProps> | undefined,
    default: undefined,
  },
});
const route = useRoute();
let statisticsList = reactive<any[]>([
  { title: '通风', valueT: 0, valueB: '' },
  { title: '粉尘', valueT: 0, valueB: '' },
  { title: '瓦斯', valueT: 0, valueB: '' },
  { title: '火灾', valueT: 0, valueB: '' },
  { title: '安全监测', valueT: 0, valueB: '' },
]);
const activeKey = ref('device');
const alarmHistory = ref();
const deviceColumns = getTableHeaderColumns('alarm_history') as [];
const dataColumns = ref(deviceColumns);
const list = ref<any>(getAlarmLogList);

// 列表页面公共参数、方法
const { tableContext, onExportXls } = useListPage({
  tableProps: {
    api: list,
    columns: dataColumns,
    canResize: true,
    showTableSetting: false,
    showActionColumn: false,
    showIndexColumn: true,
    bordered: false,
    size: 'small',
    formConfig: {
      labelAlign: 'left',
      showAdvancedButton: false,
      // autoAdvancedCol: 2,
      schemas: [
        {
          label: '是否解决',
          // field: 'isok',
          field: 'isOk',
          defaultValue: false,
          component: 'Select',
          componentProps: {
            options: [
              {
                label: '未解决',
                value: false,
              },
              {
                label: '已解决',
                value: true,
              },
            ],
          },
          colProps: { span: 4 },
        },
        {
          label: '所属系统',
          // field: 'kindtype',systemType
          field: 'systemType',
          component: 'Select',
          componentProps: {
            options: [
              {
                label: '通风',
                value: 'ventS',
              },
              {
                label: '防灭火',
                value: 'fireS',
              },
              {
                label: '防尘',
                value: 'dustS',
              },
              {
                label: '瓦斯',
                value: 'gasS',
              },
            ],
          },
          colProps: { span: 4 },
        },
        // {
        //   label: '设备类型',
        //   field: 'deviceKind',
        //   component: 'MTreeSelect',
        //   componentProps: {
        //     virtual: false,
        //   },
        //   colProps: { span: 4 },
        // },
        {
          label: '设备类型',
          field: 'deviceKind',
          component: 'Select',
          defaultValue: '',
          componentProps: {
            options: [
              {
                label: '全部',
                value: '',
              },

            ],
          },
          colProps: { span: 4 },
        },
        {
          field: 'starttime',
          label: '开始报警时间',
          component: 'DatePicker',
          componentProps: {
            showTime: true,
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            getPopupContainer: getAutoScrollContainer,
          },
          colProps: {
            span: 4,
          },
        },
        // {
        //   field: 'endtime',
        //   label: '结束时间',
        //   component: 'DatePicker',
        //   componentProps: {
        //     showTime: true,
        //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
        //     getPopupContainer: getAutoScrollContainer,
        //   },
        //   colProps: {
        //     span: 4,
        //   },
        // },
      ],
    },
    fetchSetting: {
      listField: 'records',
    },
    pagination: {
      current: 1,
      pageSize: 10,
      pageSizeOptions: ['10', '30', '50', '100'],
    },
    beforeFetch(params) {
      if (!params['deviceKind']) {
        params['deviceKind'] = null;
      }
      return params;
    },
  },
  exportConfig: {
    name: '预警历史列表',
    url: '/safety/ventanalyAlarmLog/exportXls',
  },
});
//注册table数据
const [registerTable, { reload, setLoading, getForm }] = tableContext;

function onChangeTab(tab) {
  if (tab === 'device') {
    list.value = getAlarmLogList;
    dataColumns.value = deviceColumns;
  } else {
    list.value = getManageAutoLogList;
    dataColumns.value = manageAutoColumns;
  }
}

//获取预警统计信息
async function getEachMineWarnCountInfoList() {
  let res = await getWarnCountInfo({});
  statisticsList[0].valueT = res.ventSWarnInfo.totalNum || 0;
  statisticsList[0].valueB = res.ventSWarnInfo.maxWarnLevel || '';
  statisticsList[1].valueT = res.dustSWarnInfo.totalNum || 0;
  statisticsList[1].valueB = res.dustSWarnInfo.maxWarnLevel || '';
  statisticsList[2].valueT = res.gasSWarnInfo.totalNum || 0;
  statisticsList[2].valueB = res.gasSWarnInfo.maxWarnLevel || '';
  statisticsList[3].valueT = res.fireSWarnInfo.totalNum || 0;
  statisticsList[3].valueB = res.fireSWarnInfo.maxWarnLevel || '';
  statisticsList[4].valueT = res.synthesizeSWarnInfo.totalNum || 0;
  statisticsList[4].valueB = res.synthesizeSWarnInfo.maxWarnLevel || '';
}
onMounted(async () => {
  getEachMineWarnCountInfoList();
});

defineExpose({ setLoading });
</script>

<style scoped lang="less">
@ventSpace: zxm;

:deep(.zxm-table-container) {
  max-height: 720px !important;
}

:deep(.ventSpace-table-body) {
  height: auto !important;
}

:deep(.zxm-picker) {
  height: 30px !important;
}

:deep(.@{ventSpace}-picker-dropdown) {
  position: absolute !important;
  top: 35px !important;
  left: 0 !important;
}

.data-statistics {
  height: 200px;
  padding: 20px;
  margin-top: 90px;
  background-color: #0ebbff15;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .statistics-box {
    display: flex;
    flex: 1;
    height: 100%;
    justify-content: center;
    align-items: center;

    .left-box {
      position: relative;
      width: 138px;
      height: 100%;

      .box-title {
        position: absolute;
        left: 50%;
        bottom: 18px;
        transform: translate(-50%, 0);
        color: #fff;
      }
    }

    &:nth-child(1) .left-box {
      background: url('../../../../assets/images/vent-tf.png') no-repeat center;
      background-size: 100% auto;
    }

    &:nth-child(2) .left-box {
      background: url('../../../../assets/images/dust-fc.png') no-repeat center;
      background-size: 100% auto;
    }

    &:nth-child(3) .left-box {
      background: url('../../../../assets/images/gas-ws.png') no-repeat center;
      background-size: 100% auto;
    }

    &:nth-child(4) .left-box {
      background: url('../../../../assets/images/fire-fz.png') no-repeat center;
      background-size: 100% auto;
    }

    &:nth-child(5) .left-box {
      background: url('../../../../assets/images/aqjc.png') no-repeat center;
      background-size: 100% auto;
    }

    .right-box {
      position: relative;
      width: 215px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;

      .box-text {
        position: relative;
        width: 100%;
        height: 40px;
        color: #fff;
        background: url('../../../../assets/images/his-one.png') no-repeat center;
        background-size: 100% 100%;

        .text-label {
          position: absolute;
          left: 20px;
          top: 50%;
          transform: translate(0, -50%);
        }

        .text-value {
          position: absolute;
          left: 130px;
          top: 50%;
          transform: translate(0, -50%);
          font-family: 'douyuFont';
        }
      }

      .warning-state {
        .text-value {
          color: aqua !important;
          font-family: 'douyuFont';
        }
      }
    }
  }
}

.tab-box {
  display: flex;
  color: #fff;
  position: relative;
  top: 11px;
  background: linear-gradient(#001325, #012e4f);

  :deep(.zxm-tabs-nav) {
    margin: 0 !important;

    .zxm-tabs-tab {
      width: 180px;
      height: 45px;
      background: url('@/assets/images/top-btn.png') center no-repeat;
      background-size: cover;
      display: flex;
      justify-content: center;
      font-size: 16px;
    }

    .zxm-tabs-tab-active {
      width: 180px;
      position: relative;
      background: url('@/assets/images/top-btn-select.png') center no-repeat;
      background-size: cover;

      .zxm-tabs-tab-btn {
        color: #fff !important;
      }
    }

    .zxm-tabs-ink-bar {
      width: 0 !important;
    }

    .zxm-tabs-tab+.zxm-tabs-tab {
      margin: 0 !important;
    }
  }
}

.alarm-history-table {
  width: 100%;
  background-color: #0ebbff15;
  position: relative;
  margin-top: 10px;

  &::after {
    position: absolute;
    content: '';
    width: calc(100% + 10px);
    height: 2px;
    top: 0px;
    left: -10px;
    border-bottom: 1px solid #0efcff44;
  }
}
</style>