gasInjection-project/src/views/vent/monitorManager/warningMonitor/index.vue

<template>
  <customHeader>{{ orgname }}预警历史监控系统</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-tabs>
  <div class="alarm-history-table">
    <BasicTable v-if="activeKey == 'device'" 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>
    <BasicTable v-if="activeKey == 'manageAuto'" 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>
  </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 { manageAutoColumns1 } from './alarm.data';
  import { getAutoScrollContainer } from '/@/utils/common/compUtils';
  import { list, getEachMineWarnCountInfo } from './warning.api';
  import { useRoute } from 'vue-router';
  import customHeader from '/@/components/vent/customHeader.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 paramType = ref('alarmLog');

  // 列表页面公共参数、方法
  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: 4,
        // labelWidth:50,
        schemas: [
          {
            label: '是否解决',
            field: 'isOk',
            defaultValue: false,
            component: 'Select',
            componentProps: {
              options: [
                {
                  label: '未解决',
                  value: false,
                },
                {
                  label: '已解决',
                  value: true,
                },
              ],
            },
            colProps: { span: 4 },
          },
          {
            label: '系统',
            field: 'systemType',
            component: 'Select',
            componentProps: {
              options: [
                {
                  label: '通风',
                  value: 'ventS',
                },
                {
                  label: '防灭火',
                  value: 'fireS',
                },
                {
                  label: '防尘',
                  value: 'dustS',
                },
                {
                  label: '瓦斯',
                  value: 'gasS',
                },
              ],
            },
            colProps: { span: 3 },
          },
          {
            label: '矿编码',
            field: 'orgcode',
            component: 'Select',
            defaultValue: 'sdmtjtbetmk',
            componentProps: {
              options: [
                {
                  label: '布尔台煤矿',
                  value: 'sdmtjtbetmk',
                },
                {
                  label: '活鸡兔井',
                  value: 'sdmtjtdltmkhjtj',
                },
                {
                  label: '大柳塔井',
                  value: 'sdmtjtdltmk',
                },
                {
                  label: '补连塔煤矿',
                  value: 'sdmtjtbltmk',
                },
                {
                  label: '上湾煤矿',
                  value: 'sdmtjtswmk',
                },
                {
                  label: '锦界煤矿',
                  value: 'sdmtjtjjmk',
                },
                {
                  label: '哈拉沟煤矿',
                  value: 'sdmtjthlgmk',
                },

                {
                  label: '柳塔煤矿',
                  value: 'sdmtjtltmk',
                },
                {
                  label: '石圪台煤矿',
                  value: 'sdmtjtsgtmk',
                },
                {
                  label: '保德煤矿',
                  value: 'sdmtjtbdmk',
                },
                {
                  label: '寸草塔煤矿',
                  value: 'sdmtjtcctmk',
                },
                {
                  label: '寸草塔二矿',
                  value: 'sdmtjtcctrk',
                },
                {
                  label: '榆家粱煤矿',
                  value: 'sdmtjtyjlmk',
                },
                {
                  label: '乌兰木伦煤矿',
                  value: 'sdmtjtwlmlmk',
                },
              ],
            },
            colProps: { span: 3 },
          },

          {
            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) {
        params.type = paramType.value;
        return params;
      },
    },
    exportConfig: {
      name: '预警历史列表',
      url: '/safety/ventanalyAlarmLog/exportXls',
    },
  });
  //注册table数据
  const [registerTable, { reload, setLoading, getForm }] = tableContext;

  function onChangeTab(tab) {
    if (tab === 'device') {
      paramType.value = 'alarmLog';
      dataColumns.value = deviceColumns;
    } else {
      paramType.value = 'autoLog';
      dataColumns.value = manageAutoColumns1;
    }
  }

  //获取预警统计信息
  async function getEachMineWarnCountInfoList() {
    let res = await getEachMineWarnCountInfo({});
    console.log(res, '监测数量预警状态------');
    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 || '';
  }

  const orgname = ref<any>('');

  onMounted(async () => {
    orgname.value = route.query.orgname;
    getEachMineWarnCountInfoList();
  });

  defineExpose({ setLoading });
</script>

<style scoped lang="less">
  @import '/@/design/theme.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;
  }

  @{theme-deepblue} {
    .data-statistics {
      --image-vent-tf: url('/@/assets/images/themify/deepblue/vent-tf.png');
      --image-dust-fc: url('/@/assets/images/themify/deepblue/dust-fc.png');
      --image-gas-ws: url('/@/assets/images/themify/deepblue/gas-ws.png');
      --image-fire-fz: url('/@/assets/images/themify/deepblue/fire-fz.png');
      --image-aqjc: url('/@/assets/images/themify/deepblue/aqjc.png');
      --image-his-one: url('/@/assets/images/themify/deepblue/his-one.png');
    }

    .tab-box {
      --table-border: #0eb3ff66;
      --tab-bg: linear-gradient(#001325, #051f4a);
      --image-top-btn: url('/@/assets/images/themify/deepblue/top-btn.png');
      --image-top-btn-select: url('/@/assets/images/themify/deepblue/top-btn-select.png');
    }
  }

  .data-statistics {
    --image-vent-tf: url('/@/assets/images/vent-tf.png');
    --image-dust-fc: url('/@/assets/images/dust-fc.png');
    --image-gas-ws: url('/@/assets/images/gas-ws.png');
    --image-fire-fz: url('/@/assets/images/fire-fz.png');
    --image-aqjc: url('/@/assets/images/aqjc.png');
    --image-his-one: url('/@/assets/images/his-one.png');
    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: var(--image-vent-tf) no-repeat center;
        background-size: 100% auto;
      }

      &:nth-child(2) .left-box {
        background: var(--image-dust-fc) no-repeat center;
        background-size: 100% auto;
      }

      &:nth-child(3) .left-box {
        background: var(--image-gas-ws) no-repeat center;
        background-size: 100% auto;
      }

      &:nth-child(4) .left-box {
        background: var(--image-fire-fz) no-repeat center;
        background-size: 100% auto;
      }

      &:nth-child(5) .left-box {
        background: var(--image-aqjc) 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: var(--image-his-one) 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 {
    --table-border: #0efcff44;
    --tab-bg: linear-gradient(#001325, #012e4f);
    --image-top-btn: url('/@/assets/images/top-btn.png');
    --image-top-btn-select: url('/@/assets/images/top-btn-select.png');
    display: flex;
    color: #fff;
    position: relative;
    top: 11px;
    background: var(--tab-bg);

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

      .zxm-tabs-tab {
        width: 180px;
        height: 45px;
        background: var(--image-top-btn) center no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        font-size: 16px;
      }

      .zxm-tabs-tab-active {
        width: 180px;
        position: relative;
        background: var(--image-top-btn-select) 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 var(--table-border);
    }
  }
</style>