feat: 文本日志文件实时查看功能

2024-08-09 18:47:45 +08:00
parent a5075bef43
commit a8b4e91b95
5 changed files with 472 additions and 15 deletions
--- a/src/views/logManage/neFile/components/ViewDrawer.vue
+++ b/src/views/logManage/neFile/components/ViewDrawer.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { reactive, onMounted, watch, ref, nextTick } from 'vue';
+import { ProModal } from 'antdv-pro-modal';
+import TerminalSSHView from '@/components/TerminalSSHView/index.vue';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
+const emit = defineEmits(['ok', 'cancel', 'update:visible']);
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
+  /**文件地址 */
+  filePath: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  /**网元类型 */
+  neType: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  /**网元ID */
+  neId: {
+    type: String,
+    default: '',
+    required: true,
+  },
+});
+
+/**对话框对象信息状态类型 */
+type StateType = {
+  /**框是否显示 */
+  visible: boolean;
+  /**标题 */
+  title: string;
+  /**查看命令 */
+  form: Record<string, any>;
+};
+
+/**对话框对象信息状态 */
+let state: StateType = reactive({
+  visible: false,
+  title: '文件查看',
+  form: {
+    follow: true,
+    showType: 'lines', // lines/char
+    lines: 10,
+    char: 0,
+  },
+});
+
+function onClose() {
+  state.visible = false;
+  emit('cancel');
+  emit('update:visible', false);
+}
+
+/**监听是否显示，初始数据 */
+watch(
+  () => props.visible,
+  val => {
+    if (val) {
+      if (props.neType && props.neId) {
+        const filePath = props.filePath;
+        const fileName = filePath.substring(filePath.lastIndexOf('/') + 1);
+        state.title = fileName;
+        state.visible = true;
+      }
+    }
+  }
+);
+
+/**终端实例 */
+const viewTerminal = ref();
+
+/**终端初始连接 */
+function fnInit() {
+  setTimeout(fnReload, 1_500);
+}
+
+/**重载查看方式 */
+function fnReload() {
+  if (!viewTerminal.value) return;
+  viewTerminal.value.ctrlC();
+
+  if (state.form.showType !== 'lines') {
+    state.form.lines = 10;
+  } else {
+    state.form.char = 0;
+  }
+  viewTerminal.value.clear();
+  viewTerminal.value.send('tail', {
+    filePath: props.filePath,
+    lines: state.form.lines,
+    char: state.form.char,
+    follow: state.form.follow,
+  });
+}
+</script>
+
+<template>
+  <ProModal
+    :drag="true"
+    :fullscreen="true"
+    :borderDraw="true"
+    :min-width="800"
+    :min-height="500"
+    :center-y="true"
+    :destroyOnClose="true"
+    :keyboard="false"
+    :mask-closable="false"
+    :visible="state.visible"
+    :title="state.title"
+    :body-style="{ padding: '12px', overflow: 'hidden' }"
+    :footer="null"
+    @cancel="onClose"
+  >
+    <TerminalSSHView
+      ref="viewTerminal"
+      :id="`V${Date.now()}`"
+      style="height: calc(100% - 36px)"
+      :ne-type="neType"
+      :ne-id="neId"
+      @connect="fnInit()"
+    ></TerminalSSHView>
+    <!-- 命令控制属性 -->
+    <a-form name="form" layout="horizontal">
+      <a-row :gutter="16">
+        <a-col :lg="12" :md="12" :xs="24">
+          <a-form-item :label="t('views.logManage.neFile.viewAs')">
+            <a-input-group compact>
+              <a-select v-model:value="state.form.showType" style="width: 50%">
+                <a-select-option value="lines">
+                  {{ t('views.logManage.neFile.tailLines') }}
+                </a-select-option>
+                <a-select-option value="char">
+                  {{ t('views.logManage.neFile.tailChar') }}
+                </a-select-option>
+              </a-select>
+              <a-input-number
+                style="width: 25%"
+                v-model:value="state.form[state.form.showType]"
+                :min="0"
+                :max="1000"
+                :placeholder="t('common.inputPlease')"
+              ></a-input-number>
+              <a-button type="primary" style="width: 25%" @click="fnReload()">
+                {{ t('views.logManage.neFile.reload') }}
+              </a-button>
+            </a-input-group>
+          </a-form-item>
+        </a-col>
+        <a-col :lg="6" :md="12" :xs="24">
+          <a-form-item
+            :label="t('views.logManage.neFile.follow')"
+            name="follow"
+          >
+            <a-switch v-model:checked="state.form.follow" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </ProModal>
+</template>
+
+<style lang="less" scoped>
+.ant-form :deep(.ant-form-item) {
+  margin-bottom: 0;
+}
+</style>
--- a/src/views/logManage/neFile/index.vue
+++ b/src/views/logManage/neFile/index.vue
@@ -3,12 +3,13 @@ import { reactive, ref, onMounted, toRaw } from 'vue';
 import { PageContainer } from 'antdv-pro-layout';
 import { SizeType } from 'ant-design-vue/lib/config-provider';
 import { ColumnsType } from 'ant-design-vue/lib/table';
+import { Modal, message } from 'ant-design-vue/lib';
 import { parseDateToStr } from '@/utils/date-utils';
 import { getNeFile, listNeFiles } from '@/api/tool/neFile';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import useNeInfoStore from '@/store/modules/neinfo';
 import useI18n from '@/hooks/useI18n';
-import { Modal, message } from 'ant-design-vue/lib';
+import ViewDrawer from './components/ViewDrawer.vue';
 import saveAs from 'file-saver';
 import { useRoute } from 'vue-router';
 const neInfoStore = useNeInfoStore();
@@ -19,11 +20,7 @@ const route = useRoute();
 const routeParams = route.query as Record<string, any>;

 /**网元参数 */
-let neType = ref<string[]>([]);
-/**下载触发等待 */
-let loading = ref(false);
-/**访问路径 */
-let nePathArr = ref<string[]>([]);
+let neTypeSelect = ref<string[]>([]);

 /**查询参数 */
 let queryParams = reactive({
@@ -134,14 +131,17 @@ let tablePagination = reactive({
  },
 });

+/**下载触发等待 */
+let downLoading = ref<boolean>(false);
+
 /**信息文件下载 */
 function fnDownloadFile(row: Record<string, any>) {
-  if (loading.value) return;
+  if (downLoading.value) return;
  Modal.confirm({
    title: t('common.tipTitle'),
    content: t('views.logManage.neFile.downTip', { fileName: row.fileName }),
    onOk() {
-      loading.value = true;
+      downLoading.value = true;
      const hide = message.loading(t('common.loading'), 0);
      getNeFile({
        neType: queryParams.neType,
@@ -167,12 +167,15 @@ function fnDownloadFile(row: Record<string, any>) {
        })
        .finally(() => {
          hide();
-          loading.value = false;
+          downLoading.value = false;
        });
    },
  });
 }

+/**访问路径 */
+let nePathArr = ref<string[]>([]);
+
 /**进入目录 */
 function fnDirCD(dir: string, index?: number) {
  if (index === undefined) {
@@ -235,15 +238,42 @@ function fnGetList(pageNum?: number) {
    if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
      tablePagination.total = res.total;
      tableState.data = res.rows;
-      if (tablePagination.total <=(queryParams.pageNum - 1) * tablePagination.pageSize &&queryParams.pageNum !== 1) {
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
        tableState.loading = false;
        fnGetList(queryParams.pageNum - 1);
      }
+    } else {
+      message.error(res.msg, 3);
+      tablePagination.total = 0;
+      tableState.data = [];
    }
    tableState.loading = false;
  });
 }

+/**抽屉状态 */
+const viewDrawerState = reactive({
+  visible: false,
+  /**文件路径 /var/log/amf.log */
+  filePath: '',
+  /**网元类型 */
+  neType: '',
+  /**网元ID */
+  neId: '',
+});
+
+/**打开抽屉查看 */
+function fnDrawerOpen(row: Record<string, any>) {
+  viewDrawerState.filePath = [...nePathArr.value, row.fileName].join('/');
+  viewDrawerState.neType = neTypeSelect.value[0];
+  viewDrawerState.neId = neTypeSelect.value[1];
+  viewDrawerState.visible = !viewDrawerState.visible;
+}
+
 onMounted(() => {
  // 获取网元网元列表
  neInfoStore.fnNelist().then(res => {
@@ -253,9 +283,9 @@ onMounted(() => {
          content: t('common.noData'),
          duration: 2,
        });
-      } else if (routeParams.neType) { 
-        neType.value = [routeParams.neType, routeParams.neId]
-        fnNeChange(neType.value, undefined);
+      } else if (routeParams.neType) {
+        neTypeSelect.value = [routeParams.neType, routeParams.neId];
+        fnNeChange(neTypeSelect.value, undefined);
      }
    }
  });
@@ -276,12 +306,12 @@ onMounted(() => {
                style="margin-bottom: 0"
              >
                <a-cascader
-                  v-model:value="neType"
+                  v-model:value="neTypeSelect"
                  :options="neInfoStore.getNeCascaderOptions"
                  @change="fnNeChange"
                  :allow-clear="false"
                  :placeholder="t('views.logManage.neFile.neTypePlease')"
-                  :disabled="loading || tableState.loading"
+                  :disabled="downLoading || tableState.loading"
                />
              </a-form-item>
            </a-col>
@@ -332,8 +362,15 @@ onMounted(() => {
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'fileName'">
            <a-space :size="8" align="center">
+              <a-tooltip v-if="record.fileType === 'file'">
+                <template #title>{{ t('common.viewText') }}</template>
+                <a-button type="link" @click.prevent="fnDrawerOpen(record)">
+                  <template #icon><ProfileOutlined /></template>
+                </a-button>
+              </a-tooltip>
              <a-button
                type="link"
+                :loading="downLoading"
                @click.prevent="fnDownloadFile(record)"
                v-if="record.fileType === 'file'"
              >
@@ -342,6 +379,7 @@ onMounted(() => {
              </a-button>
              <a-button
                type="link"
+                :loading="downLoading"
                @click.prevent="fnDirCD(record.fileName)"
                v-if="record.fileType === 'dir'"
              >
@@ -353,6 +391,14 @@ onMounted(() => {
        </template>
      </a-table>
    </a-card>
+
+    <!-- 文件内容查看抽屉 -->
+    <ViewDrawer
+      v-model:visible="viewDrawerState.visible"
+      :file-path="viewDrawerState.filePath"
+      :ne-type="viewDrawerState.neType"
+      :ne-id="viewDrawerState.neId"
+    ></ViewDrawer>
  </PageContainer>
 </template>