AnalysisSystemForRadionuclide_vue/src/views/logManage/index.vue

<template>
  <div class="log">
    <a-card class="log-tree" :bordered="false">
      <!-- 标题 -->
      <template slot="title">
        <div class="title">
          <div class="title-text">LOG</div>
          <div class="title-rect">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </template>
      <!-- 标题结束 -->
      <!-- 内容 -->
      <a-spin :spinning="isGettingTreeData" style="margin-top: 80px; width: 100%; text-align: center;"> </a-spin>
      <tree-with-line
        v-if="treeData.length"
        :treeData="treeData"
        :selected-keys.sync="selectedKeys"
        :expanded-keys.sync="expandedKeys"
        @select="onSelect"
      >
      </tree-with-line>
      <!-- 内容结束 -->
    </a-card>
    <!-- 日志列表 -->
    <div class="log-list">
      <custom-table
        size="middle"
        rowKey="id"
        :columns="columns"
        :list="dataSource"
        :pagination="false"
        :loading="isGettingTreeData || loading"
        :can-select="false"
        @change="handleTableChange"
        :scroll="{ y: 'calc(100vh - 175px)' }"
      >
        <template slot="operate" slot-scope="{ record }">
          <a-space :size="20">
            <img src="@/assets/images/log/operate.png" alt="" style="cursor: pointer" @click.stop="onOperate(record)" />
            <img
              src="@/assets/images/log/download.png"
              alt=""
              style="cursor: pointer"
              @click.stop="onDownload(record)"
            />
          </a-space>
        </template>
      </custom-table>
    </div>
    <!-- 日志列表结束 -->
    <custom-modal title="Log" :width="950" v-model="visible" :show-footer="false">
      <a-spin class="log-detail" :spinning="isGettingDetail">
        <div v-for="(logItem, index) in logInfo" :key="index">
          {{ logItem }}
        </div>
      </a-spin>
    </custom-modal>
  </div>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import TreeWithLine from '@/components/TreeWithLine/index.vue'
import { downloadFile, getAction, postAction } from '../../api/manage'

const columns = [
  {
    title: 'NAME',
    align: 'center',
    width: 320,
    dataIndex: 'fileName'
  },
  {
    title: 'DATE',
    align: 'center',
    width: 200,
    dataIndex: 'fileDate'
  },
  {
    title: 'SIZE',
    align: 'center',
    width: 220,
    dataIndex: 'fileSize'
  },
  {
    title: 'OPERATE',
    align: 'center',
    width: 200,
    scopedSlots: {
      customRender: 'operate'
    }
  }
]

export default {
  mixins: [JeecgListMixin],
  components: {
    TreeWithLine
  },
  data() {
    this.columns = columns
    return {
      disableMixinCreated: true,
      url: {
        list: '/logManage/findFiles'
      },
      isGettingTreeData: false, // 正在获取左侧树信息
      treeData: [],
      selectedKeys: [],
      expandedKeys: [],
      dataSource: [],

      visible: false,
      isGettingDetail: false,
      logInfo: []
    }
  },
  created() {
    this.getTreeData()
  },
  methods: {
    async getTreeData() {
      try {
        this.isGettingTreeData = true
        const res = await getAction('/logManage/findFtpFolders', { workPath: 'log' })
        this.treeData = this.buildTreeData(res)
        const firstNode = this.treeData[0]
        this.selectedKeys = [firstNode.key]
        this.expandedKeys = [firstNode.key]
        this.onSelect()
      } catch (error) {
        console.error(error)
        this.$message.error('Get Tree Data Failed')
      } finally {
        this.isGettingTreeData = false
      }
    },

    /**
     * @param {Array<any>} treeJson
     */
    buildTreeData(treeJson) {
      const tree = []
      treeJson.forEach(item => {
        const treeNode = {
          title: item.name,
          key: item.path,
          children: []
        }
        if (item.children && item.children.length) {
          treeNode.children.push(...this.buildTreeData(item.children))
        }
        tree.push(treeNode)
      })
      return tree
    },
    onSelect() {
      this.queryParam.path = this.selectedKeys[0]
      this.loadData()
    },

    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      this.onClearSelected()

      var params = this.getQueryParams() //查询条件
      this.loading = true
      getAction(this.url.list, params)
        .then(res => {
          this.dataSource = res
        })
        .finally(() => {
          this.loading = false
        })
    },

    async onOperate({ fileName, filePath, fileSize }) {
      if (parseFloat(fileSize) == 0) {
        this.$message.warn('This Log Is Empty')
        return
      }
      this.visible = true
      const formData = new FormData()
      formData.append('fileName', fileName)
      formData.append('localPath', filePath)
      try {
        this.isGettingDetail = true
        const res = await postAction('/logManage/downloadFile', formData)
        this.logInfo = res.split('\r\n')
      } catch (error) {
        console.error(error)
      } finally {
        this.isGettingDetail = false
      }
    },
    onDownload({ fileName, filePath, fileSize }) {
      if (parseFloat(fileSize) == 0) {
        this.$message.warn('This Log Is Empty')
        return
      }
      const formData = new FormData()
      formData.append('fileName', fileName)
      formData.append('localPath', filePath)
      downloadFile('/logManage/downloadFile', fileName, formData, 'post')
    }
  }
}
</script>
<style lang="less" scoped>
.log {
  height: 100%;
  display: flex;
  &-tree {
    width: 290px;
    height: 100%;
    flex-shrink: 0;
    margin-right: 20px;
    background-color: #022024;
    border: 1px solid #0c6a66;
    ::v-deep {
      .ant-card {
        &-head {
          border-bottom: 4px solid rgba(12, 235, 201, 0.2);
          height: auto;
          &-title {
            height: 45px;
            line-height: 45px;
            padding: 0;
            padding-right: 20px;
            font-family: MicrogrammaD-MediExte;
            font-size: 18px;
            font-weight: bold;
            color: #0cebc9;
          }
        }
        &-body {
          padding-left: 20px;
          height: calc(100% - 50px);
          overflow: auto;
        }
      }
    }
    .title {
      display: flex;
      justify-content: space-between;
      &-text {
        padding-left: 20px;
        width: 100px;
        background-color: rgba(12, 235, 201, 0.05);
      }

      &-rect {
        span {
          display: inline-block;
          background-color: rgba(12, 235, 201, 0.2);
          vertical-align: middle;
          &:first-child {
            width: 4px;
            height: 4px;
          }
          &:nth-child(2) {
            width: 6px;
            height: 6px;
            margin-right: 6px;
          }
          &:nth-child(3) {
            width: 4px;
            height: 4px;
            margin-right: 9px;
          }
          &:nth-child(4) {
            width: 1px;
            height: 16px;
            margin-right: 23px;
          }
          &:nth-child(5) {
            width: 2px;
            height: 2px;
            margin-right: 24px;
          }
          &:nth-child(6) {
            width: 4px;
            height: 4px;
          }
        }
      }
    }
  }
}

.log-detail {
  ::v-deep {
    .ant-spin-container {
      min-height: 100px;
      max-height: 520px;
      overflow: auto;
      padding: 10px;
    }
  }
}
</style>