mky-vent-base/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: var(--vent-font-color)"
      @click="getBack"
      v-if="hasPermission('deviceWarn:return')"
      >返回</a-button
    >
    <div class="content">
      <div class="left-box">
        <div class="left-box-content">
          <div v-for="(item, index) in cardList" :key="index" @click="cardClick(item, index)">
            <div v-if="item.title" class="card-box">
              <img :src="activeIndex == index ? item.url1 : item.url" alt="" />
              <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>
      <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>
              <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'nwartype'">
                  <!-- 除了 101（蓝色预警）其他都是红色字体 -->
                  <span :class="{ 'color-#ff3823': ['102', '103', '104', '201', '1001'].includes(record.nwartype) }">
                    {{ render.renderDictText(record.nwartype, 'leveltype') || '-' }}
                  </span>
                </template>
              </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';
  import { render } from '/@/utils/common/renderUtils';
  import { usePermission } from '/@/hooks/web/usePermission';

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

   const { hasPermission } = usePermission();
  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.device[el.name]) {
        el.sumVal = res.device[el.name].totalcount || 0;
        el.warnVal = res.device[el.name].count || 0;
        el.closeVal = res.device[el.name].netstatus || 0;
        el.devicekind = res.device[el.name].code || '';
        el.title = res.device[el.name].name || '';
      }
    });
  }

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

<style lang="less" scoped>
  @import '/@/design/theme.less';

  @{theme-deepblue} {
    .deviceMonitorWarn {
      --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
    }
  }

  .deviceMonitorWarn {
    --image-border: url('/@/assets/images/fire/border.png');
    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;

          div {
            .card-box {
              position: relative;
              width: 265px;
              height: 112px;
              margin: 0px 5px;
              img {
                position: absolute;
                left: 0;
                width: 100%;
                height: 100%;
              }
              .card-item {
                position: relative;
                width: 100%;
                height: 100%;
                color: var(--vent-font-color);

                .item-title {
                  position: absolute;
                  left: 130px;
                  top: 20px;
                  font-size: 12px;
                  font-family: 'douyuFont';
                  color: var(--vent-table-action-link);
                }

                .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: var(--image-border) 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>