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

<template>
  <div class="deviceMonitorWarn">
    <customHeader>设备监测预警</customHeader>
    <a-button
      preIcon="ant-design:rollback-outlined"
      type="text"
      size="small"
      style="position: absolute; left: 15px; top: -66px; color: #fff"
      @click="getBack"
      >返回</a-button
    >
    <div class="content">
      <div class="left-box">
        <div class="left-box-content">
          <div
            :class="activeIndex == index ? 'card-box1' : 'card-box'"
            v-for="(item, index) in cardList"
            :key="index"
            @click="cardClick(item, index)"
          >
            <div class="card-item">
              <div class="item-title">
                {{ item.title }}
              </div>
              <div class="item-sum">
                <span>总数：</span>
                <span> {{ item.sumVal }}</span>
              </div>
              <div class="item-warn">
                <span>报警数：</span>
                <span> {{ item.warnVal }}</span>
              </div>
              <div class="item-close">
                <span>断开数：</span>
                <span> {{ item.closeVal }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="right-box-content">
          <div class="alarm-history-table">
            <BasicTable :key="isShow" ref="alarmHistory" @register="registerTable" :scroll="{ x: 0, y: 590 }">
              <template #form-onExportXls>
                <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()"> 导出</a-button>
              </template>
            </BasicTable>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, nextTick, reactive, onMounted, onUnmounted } from 'vue';
  import customHeader from '/@/components/vent/customHeader.vue';
  import { getTotalList, getAlarmLogList } from './deviceMonitorWarn.api';
  import { cardList } from './deviceMonitorWarn.data';
  import { BasicTable } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  import { getAutoScrollContainer } from '/@/utils/common/compUtils';
  import { useRouter } from 'vue-router';

  const props = defineProps({
    formConfig: {
      type: Object as PropType<FormProps> | undefined,
      default: undefined,
    },
  });

  let router = useRouter();
  let activeIndex = ref(0);
  let devicekindType = ref('modelsensor');
  let isShow = ref(0);
  const deviceColumns = getTableHeaderColumns('alarm_history') as [];
  const dataColumns = ref(deviceColumns);

  // 列表页面公共参数、方法
  const { tableContext, onExportXls } = useListPage({
    tableProps: {
      api: getAlarmLogList,
      columns: dataColumns,
      canResize: true,
      showTableSetting: false,
      showActionColumn: false,
      showIndexColumn: true,
      bordered: false,
      size: 'small',
      formConfig: {
        labelAlign: 'left',
        showAdvancedButton: false,
        actionColOptions: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },
        schemas: [
          {
            label: '是否解决',
            // field: 'isok',
            field: 'isOk',
            defaultValue: false,
            component: 'Select',
            componentProps: {
              options: [
                {
                  label: '未解决',
                  value: false,
                },
                {
                  label: '已解决',
                  value: true,
                },
              ],
            },
            colProps: { span: 8 },
          },
          {
            label: '所属系统',
            // field: 'kindtype',systemType
            field: 'systemType',
            component: 'Select',
            componentProps: {
              options: [
                {
                  label: '通风',
                  value: 'ventS',
                },
                {
                  label: '防灭火',
                  value: 'fireS',
                },
                {
                  label: '防尘',
                  value: 'dustS',
                },
                {
                  label: '瓦斯',
                  value: 'gasS',
                },
              ],
            },
            colProps: { span: 8 },
          },
          // {
          //     label: '设备类型',
          //     field: 'deviceKind',
          //     component: 'MTreeSelect',
          //     componentProps: {
          //         virtual: false,
          //     },
          //     colProps: { span: 8 },
          // },
          {
            field: 'starttime',
            label: '开始时间',
            component: 'DatePicker',
            componentProps: {
              showTime: true,
              valueFormat: 'YYYY-MM-DD HH:mm:ss',
              getPopupContainer: getAutoScrollContainer,
            },
            colProps: {
              span: 8,
            },
          },
        ],
      },
      fetchSetting: {
        listField: 'records',
      },
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '30', '50', '100'],
      },
      beforeFetch(params) {
        params['deviceKind'] = devicekindType.value;
        return params;
      },
    },
    exportConfig: {
      name: '预警历史列表',
      url: '/safety/ventanalyAlarmLog/exportXls',
    },
  });
  //注册table数据
  const [registerTable, { reload, setLoading, getForm }] = tableContext;

  //返回上一级
  function getBack() {
    router.push('/monitorChannel/monitor-alarm-home');
  }
  //选项切换
  function cardClick(item, index) {
    activeIndex.value = index;
    devicekindType.value = item.devicekind;
    isShow.value = new Date().getTime();
  }
  //获取左侧选项数据
  async function getDeviceCard() {
    let res = await getTotalList({});
    console.log(res, '左侧选项数据----------');
    cardList.forEach((el) => {
      if (res.info.devicekindInfo[el.name]) {
        el.sumVal = res.info.devicekindInfo[el.name].totalcount || 0;
        el.warnVal = res.info.devicekindInfo[el.name].count || 0;
        el.closeVal = res.info.devicekindInfo[el.name].netstatus || 0;
        el.devicekind = res.info.devicekindInfo[el.name].code || '';
      }
    });
  }

  onMounted(() => {
    getDeviceCard();
  });
  defineExpose({ setLoading });
</script>

<style lang="less" scoped>
  .deviceMonitorWarn {
    position: relative;
    width: calc(100% - 20px);
    height: calc(100% - 90px);
    position: relative;
    margin: 80px 10px 10px 10px;

    .content {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left-box {
        width: 45%;
        height: 100%;
        // margin-right: 15px;
        padding: 10px;
        box-sizing: border-box;
        // background: url('@/assets/images/fire/bj1.png') no-repeat center;
        // background-size: 100% 100%;

        .left-box-content {
          height: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          flex-wrap: wrap;
          overflow-y: auto;

          .card-box {
            width: 265px;
            height: 112px;
            margin: 0px 5px;

            &:nth-child(1) {
              background: url('../../../../assets/images/device/cgq.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(2) {
              background: url('../../../../assets/images/device/zhufengji.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(3) {
              background: url('../../../../assets/images/device/jubufengji.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(4) {
              background: url('../../../../assets/images/device/fengmen.png') no-repeat center;
              background-size: 100% 100%;
            }

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

            &:nth-child(6) {
              background: url('../../../../assets/images/device/cefeng.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(7) {
              background: url('../../../../assets/images/device/yafeng.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(8) {
              background: url('../../../../assets/images/device/penling.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(9) {
              background: url('../../../../assets/images/device/penfen.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(10) {
              background: url('../../../../assets/images/device/zhudan.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(11) {
              background: url('../../../../assets/images/device/zhujiang.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(12) {
              background: url('../../../../assets/images/device/penwu.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(13) {
              background: url('../../../../assets/images/device/chuchen.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(14) {
              background: url('../../../../assets/images/device/wsgl.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(15) {
              background: url('../../../../assets/images/device/wsb.png') no-repeat center;
              background-size: 100% 100%;
            }

            .card-item {
              position: relative;
              width: 100%;
              height: 100%;
              color: #fff;

              .item-title {
                position: absolute;
                left: 130px;
                top: 20px;
                font-size: 12px;
                font-family: 'douyuFont';
                color: #01fefc;
              }

              .item-sum {
                position: absolute;
                left: 130px;
                top: 40px;
              }

              .item-warn {
                position: absolute;
                left: 130px;
                top: 60px;
              }

              .item-close {
                position: absolute;
                left: 130px;
                top: 80px;
              }
            }
          }

          .card-box1 {
            width: 265px;
            height: 112px;
            margin: 0px 5px;

            &:nth-child(1) {
              background: url('../../../../assets/images/device/cgq-1.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(2) {
              background: url('../../../../assets/images/device/zhufengji-1.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(3) {
              background: url('../../../../assets/images/device/jubufengji-1.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(4) {
              background: url('../../../../assets/images/device/fengmen-1.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(5) {
              background: url('../../../../assets/images/device/fengchuang-1.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(6) {
              background: url('../../../../assets/images/device/cefeng-1.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(7) {
              background: url('../../../../assets/images/device/yafeng-1.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(8) {
              background: url('../../../../assets/images/device/penling-1.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(9) {
              background: url('../../../../assets/images/device/penfen-1.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(10) {
              background: url('../../../../assets/images/device/zhudan-1.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(11) {
              background: url('../../../../assets/images/device/zhujiang-1.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(12) {
              background: url('../../../../assets/images/device/penwu-1.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(13) {
              background: url('../../../../assets/images/device/chuchen-1.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(14) {
              background: url('../../../../assets/images/device/wsgl-1.png') no-repeat center;
              background-size: 100% 100%;
            }

            &:nth-child(15) {
              background: url('../../../../assets/images/device/wsb-1.png') no-repeat center;
              background-size: 100% 100%;
            }

            .card-item {
              position: relative;
              width: 100%;
              height: 100%;
              color: #fff;

              .item-title {
                position: absolute;
                left: 130px;
                top: 20px;
                font-size: 12px;
                font-family: 'douyuFont';
                color: #01fefc;
              }

              .item-sum {
                position: absolute;
                left: 130px;
                top: 40px;
              }

              .item-warn {
                position: absolute;
                left: 130px;
                top: 60px;
              }

              .item-close {
                position: absolute;
                left: 130px;
                top: 80px;
              }
            }
          }
        }
      }

      .right-box {
        width: 55%;
        height: 100%;
        background: url('../../../../assets/images/fire/border.png') no-repeat center;
        background-size: 100% 100%;

        .right-box-content {
          height: 100%;

          .alarm-history-table {
            width: 100%;
            position: relative;

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