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">
      <div class="search-bar">
        <a-row type="flex">
          <a-col flex="290px">
            <a-form-model-item label="Name">
              <a-input v-model="nameStr" placeholder="Please Input..." />
            </a-form-model-item>
          </a-col>
          <a-col flex="108px">
            <a-button class="search-btn" type="primary" @click="onSearch">
              <img src="@/assets/images/global/search.png" alt="" />
              Search
            </a-button>
          </a-col>
        </a-row>
      </div>
      <custom-table
        size="middle"
        rowKey="id"
        :columns="columns"
        :list="dataSource"
        :pagination="false"
        :loading="isGettingTreeData || loading"
        :can-select="false"
        @change="handleTableChange"
        :scroll="{ y: 'calc(100vh - 275px)' }"
      >
        <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>
      <a-pagination
        size="small"
        v-model="ipagination.current"
        :pageSize="ipagination.pageSize"
        :page-size-options="ipagination.pageSizeOptions"
        show-size-changer
        show-quick-jumper
        :total="ipagination.total"
        :show-total="
          (total, range) =>
            `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`
        "
        show-less-items
        @change="handlePageChange"
        @showSizeChange="handleSizeChange"
      />
    </div>
    <!-- 日志列表结束 -->
    <custom-modal title="Log" :width="950" v-model="visible" :footer="null">
      <a-spin class="log-detail" :spinning="isGettingDetail">
        <pre style="font-family: 仿宋">{{ logInfo }}</pre>
        <!-- <div style="font-family: 宋体" 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 {
  name: 'LogManage',
  mixins: [JeecgListMixin],
  components: {
    TreeWithLine,
  },
  data() {
    this.columns = columns
    return {
      nameStr: '',
      disableMixinCreated: true,
      url: {
        list: '/logManage/findFiles',
      },
      isGettingTreeData: false, // 正在获取左侧树信息
      treeData: [],
      selectedKeys: [],
      expandedKeys: [],
      dataSource: [],

      visible: false,
      isGettingDetail: false,
      logInfo: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          const { current, pageSize } = this.ipagination
          return `Total ${total} items　Page ${current} / ${Math.ceil(total / pageSize)}`
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
    }
  },
  created() {
    this.getTreeData()
  },
  methods: {
    onSearch() {
      this.loadData()
    },
    handlePageChange(page, pageSize) {
      this.ipagination.current = page
      this.ipagination.pageSize = pageSize
      this.loadData()
    },
    handleSizeChange(current, size) {
      this.ipagination.current = current
      this.ipagination.pageSize = size
      this.loadData()
    },
    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.ipagination.current = 1
      this.ipagination.pageSize = 10
      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() //查询条件
      params.name = this.nameStr
      params.pageNo = this.ipagination.current
      params.pageSize = this.ipagination.pageSize
      this.loading = true
      getAction(this.url.list, params)
        .then(({ result: { records, total } }) => {
          this.dataSource = records
          this.ipagination.total = total
        })
        .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')
        this.logInfo = res
      } 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;
          }
        }
      }
    }
  }
  &-list {
    position: relative;
    overflow: hidden;
  }
}

.log-detail {
  ::v-deep {
    .ant-spin-container {
      min-height: 100px;
      max-height: 520px;
      overflow: auto;
      padding: 10px;
    }
  }
}
.search-bar {
  height: 50px;
  border-top: 1px solid rgba(13, 235, 201, 0.3);
  border-bottom: 1px solid rgba(13, 235, 201, 0.3);
  margin-bottom: 15px;
  padding: 8px 10px;
  background: rgba(12, 235, 201, 0.05);
}
.ant-input {
  width: 266px;
}
::v-deep {
  .ant-form-item {
    display: flex;
    margin-bottom: 0;
    .ant-form-item-label,
    .ant-form-item-control {
      line-height: 32px;
      height: 32px;
    }
    .ant-form-item-label {
      flex-shrink: 0;
      margin-right: 10px;
      label {
        font-size: 16px;
        font-family: ArialMT;
        color: #ade6ee;
        &::after {
          display: none;
        }
      }
    }
    .ant-calendar-range-picker-separator {
      color: white;
    }
    .ant-form-item-control-wrapper {
      width: 100%;
      // overflow: hidden;
    }
  }
}
.search-btn {
  margin-bottom: 10px;
  img {
    width: 16px;
    height: 17px;
    margin-right: 9px;
  }
}
.ant-pagination {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
</style>