|
@@ -1,13 +1,196 @@
|
|
|
<template>
|
|
|
-
|
|
|
+<div class="log_container">
|
|
|
+ <el-container>
|
|
|
+ <el-header>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="title"> </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="datatime"
|
|
|
+ type="datetimerange"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ :align="$elDatePickerAlign"
|
|
|
+ ></el-date-picker>
|
|
|
+ <el-button type="primary" @click="search">查询</el-button>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-header>
|
|
|
+ <el-main>
|
|
|
+ <ListContainer
|
|
|
+ v-bind="{
|
|
|
+ listField: listField,
|
|
|
+ listData: logList,
|
|
|
+ noDataTip: '暂无数据',
|
|
|
+ total: total,
|
|
|
+ pageSize: pageSize,
|
|
|
+ currentPage: page,
|
|
|
+ searchData: getDataLog,
|
|
|
+ }"
|
|
|
+ ></ListContainer>
|
|
|
+ </el-main>
|
|
|
+ <!-- <el-footer>
|
|
|
+ <div>
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :total="total"
|
|
|
+ @current-change="currentPageChange"
|
|
|
+ ></el-pagination>
|
|
|
+ </div>
|
|
|
+ </el-footer>-->
|
|
|
+ </el-container>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import api from "@/api/datalog"
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ ListContainer: () => import("@/components/Currency/ListContainer.vue")
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pickerOptions: {
|
|
|
+ shortcuts: [{
|
|
|
+ text: '最近一周',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '最近一个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '最近三个月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ datatime: [new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000), new Date()],
|
|
|
+ page: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ total: 0,
|
|
|
+ logList: [],
|
|
|
+ listField: [
|
|
|
+ {
|
|
|
+ name: 'code',
|
|
|
+ alias: '响应值',
|
|
|
+ span: 3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'message',
|
|
|
+ alias: '响应值描述',
|
|
|
+ span: 3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'content',
|
|
|
+ alias: '日志数据',
|
|
|
+ span: 15
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Count',
|
|
|
+ alias: '数据条数',
|
|
|
+ span: 3
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.page = 1;
|
|
|
+ this.getDataLog(this.page);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getDataLog(page) {
|
|
|
+ let that = this;
|
|
|
+ let requestData = new FormData;
|
|
|
+ requestData.append("page",page - 1);
|
|
|
+ requestData.append("pageSize",this.pageSize);
|
|
|
+ // let obj = {
|
|
|
+ // page: page - 1 + '',
|
|
|
+ // pageSize: this.pageSize + ''
|
|
|
+ // }
|
|
|
+ // if (this.datatime != null) {
|
|
|
+ // obj.startDate = this.datatime[0].getTime()
|
|
|
+ // obj.endDate = this.datatime[1].getTime()
|
|
|
+ // }
|
|
|
+ if (this.datatime != null) {
|
|
|
+ requestData.append("startDate",this.datatime[0].getTime());
|
|
|
+ requestData.append("endDate",this.datatime[1].getTime());
|
|
|
+ }
|
|
|
+ api.getDataLog(requestData).then((result) => {
|
|
|
+ if (result.code == 200) {
|
|
|
+ that.total = result.total;
|
|
|
+ that.logList = result.content == -1 || result.content == "" ? [] : result.content;
|
|
|
+ } else {
|
|
|
+ this.$checkRequestCode(result)
|
|
|
+ }
|
|
|
+ }).catch((err) => {
|
|
|
+ that.$message({
|
|
|
+ type: "error",
|
|
|
+ message: err
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ search() {
|
|
|
+ this.page = 1;
|
|
|
+ this.getDataLog(this.page)
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
<style lang="less" scoped>
|
|
|
+.log_container {
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ height: 100%;
|
|
|
+ margin-left:20px;
|
|
|
+ .el-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .el-header {
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 4px;
|
|
|
+ .el-row {
|
|
|
+ padding: 10px 0px;
|
|
|
+ .el-col:nth-child(2) {
|
|
|
+ > div {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
|
|
|
+ .el-date-editor {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-main {
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-top: 20px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|