platform/io.sc.platform.system.frontend/src/views/monitor/Log.vue

<template>
  <div>
    <q-tabs v-model="selectedTabRef" inline-label align="left" :breakpoint="0">
      <q-tab name="view" icon="bi-receipt" :label="$t('system.monitor.log.tab.view')" />
      <q-tab name="download" icon="bi-download" :label="$t('system.monitor.log.tab.download')" />
      <q-tab name="level" icon="bi-123" :label="$t('system.monitor.log.tab.level')" />
    </q-tabs>

    <q-tab-panels v-model="selectedTabRef" animated swipeable keep-alive>
      <q-tab-panel name="view">
        <div class="row q-pt-sm">
          <div class="col-2">
            <q-input v-model="logRows" label="显示日志文件最后行数" outlined dense />
          </div>
          <div class="col-5 q-pl-sm">
            <q-checkbox v-model="autoRefresh" label="自动刷新(频率:1次/2秒,超过 300 次后停止自动刷新)" outlined dense />
          </div>
          <div class="col-4"></div>
          <div class="col-1">
            <q-btn label="立即刷新" @click="refreshLog" />
          </div>
        </div>
        <div class="row q-pt-sm">
          <div class="col-12">
            <q-input v-model="logContent" type="textarea" outlined input-style="height:500px;font-size:12px" />
          </div>
        </div>
      </q-tab-panel>
      <q-tab-panel name="download">
        <platform-grid
          ref="downloadGridRef"
          :table-props="{ borderded: false, flat: true }"
          :table-title="downloadConfigure.tableTitle"
          :table-init-load-data="downloadConfigure.tableInitLoadData"
          :table-row-key="downloadConfigure.tableRowKey"
          :table-data-url="downloadConfigure.tableDataUrl"
          :table-columns="downloadConfigure.tableColumns"
          :table-buttons="downloadConfigure.tableButtons"
          :table-show-sort-no="false"
          :table-pagination="downloadConfigure.tablePagination"
          :table-dense="false"
        >
        </platform-grid>
      </q-tab-panel>
      <q-tab-panel name="level">
        <platform-grid
          ref="levelGridRef"
          :table-props="{ borderded: false, flat: true }"
          :table-title="levelConfigure.tableTitle"
          :table-init-load-data="levelConfigure.tableInitLoadData"
          :table-row-key="levelConfigure.tableRowKey"
          :table-data-url="levelConfigure.tableDataUrl"
          :table-columns="levelConfigure.tableColumns"
          :table-buttons="levelConfigure.tableButtons"
          :table-show-sort-no="false"
          :table-pagination="levelConfigure.tablePagination"
          :table-dense="true"
        >
        </platform-grid>
      </q-tab-panel>
    </q-tab-panels>
    <iframe ref="downloadIframe" src="javascript:;" style="width: 0px; height: 0px"></iframe>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { Environment, axios } from 'platform-core';

const { t } = useI18n();

const selectedTabRef = ref('view');
const logRows = ref(20);
const autoRefresh = ref(false);
const logContent = ref('');
const downloadIframe = ref();

const downloadGridRef = ref();
const levelGridRef = ref();

const downloadConfigure = {
  tableTitle: '日志列表',
  tableInitLoadData: true,
  tablePagination: {
    sortBy: 'lastModifyDate',
    descending: true,
    reqPageStart: 0,
    rowsPerPage: 10,
  },
  tableRowKey: 'name',
  tableDataUrl: Environment.apiContextPath('/api/monitor/logger/getLogFiles'),
  tableColumns: [
    { width: 100, name: 'name', label: t('name') },
    { width: 100, name: 'lastModifyDate', label: t('lastModifyDate') },
    { width: 100, name: 'size', label: t('size') },
  ],
  tableButtons: [
    {
      name: 'download',
      label: t('download'),
      click: () => {
        let url = Environment.apiContextPath('/api/monitor/logger/downloadLogFile?');
        url += 'fileName=' + encodeURIComponent(downloadGridRef.value.getSelectedRows()[0].name);
        downloadIframe.value.src = url;
      },
    },
  ],
};

const levelConfigure = {
  tableTitle: '日志级别列表',
  tableInitLoadData: true,
  tablePagination: {
    sortBy: 'lastModifyDate',
    descending: true,
    reqPageStart: 0,
    rowsPerPage: 10,
  },
  tableRowKey: 'name',
  tableDataUrl: Environment.apiContextPath('/api/monitor/logger/getLogConfigurationLevels'),
  tableColumns: [
    { width: 100, name: 'name', label: t('name') },
    { width: 100, name: 'configuredLevel', label: t('configuredLevel') },
    { width: 100, name: 'effectiveLevel', label: t('effectiveLevel') },
  ],
};

const refreshLog = () => {
  axios
    .post(Environment.apiContextPath('/api/monitor/logger/getLogFileContents'), {
      rows: logRows.value,
    })
    .then((response) => {
      logContent.value = response.data;
    });
};

onMounted(() => {
  refreshLog();
});
</script>