zjyzt_gis_master_web_ui/src/components/DataAccess/DataLog.vue

<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="'right'"
              ></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: "userName",
          alias: "用户",
          span: 5,
        },
        {
          name: "loginIp",
          alias: "访问IP/所属城市",
          span: 5,
        },
        {
          name: "createTime",
          alias: "操作时间",
          span: 5,
        },
        {
          name: "dataAmount",
          alias: "数据量",
          span: 4,
        },
        {
          name: "modelName",
          alias: "数据图层",
          span: 5,
        },
      ],
    };
  },
  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 {
            that.$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: 100%;
  height: 100%;
  .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>