Foshan4A4.0/src/views/dashboard/components/journal.vue

<!--
 * @Author: your name
 * @Date: 2021-11-25 10:42:02
 * @LastEditTime: 2021-11-25 17:19:06
 * @LastEditors: Please set LastEditors
 * @Description: 个人日志
 * @FilePath: \Foshan4A2.0\src\views\dashboard\components\journal.vue
-->
<template>
  <div class="dashboard-journal">
    <div class="journal-title flex">
      <div class="title">个人日志</div>
      <div class="search flex-wrap">
        <div class="j-date">
          <el-date-picker v-model="value1" size="small" @change="pickerChange" value-format="yyyy-MM-dd HH:mm:ss" class="j-date-input" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <Search @getSearchData="getSearchData" @clearSearchData="clearSearch" :isTitle="false" :isSlot="false" />
      </div>
    </div>
    <div class="journal-content">
      <el-table :data="tableData" :row-class-name="tableRowClassName" class="table scrollbar" height="450" style="width: 100%">
        <el-table-column label="用户名">
          <template slot-scope="scope">
            <div :class="scope.row.isSocket ? 'red' : ''">{{ scope.row.UserName ? scope.row.UserName : "暂无数据" }}</div>
          </template>
        </el-table-column>
        <el-table-column label="应用名称">
          <template slot-scope="scope">
            <div :class="scope.row.isSocket ? 'red' : ''">{{ scope.row.AppName ? scope.row.AppName : "暂无数据" }}</div>
          </template>
        </el-table-column>
        <el-table-column label="IP">
          <template slot-scope="scope">
            <div :class="scope.row.isSocket ? 'red' : ''">
              {{ scope.row.OperateIP ? scope.row.OperateIP : "暂无数据" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="内容">
          <template slot-scope="scope">
            <div :class="scope.row.isSocket ? 'red' : ''">{{ scope.row.Msg ? scope.row.Msg : "暂无数据" }}</div>
          </template>
        </el-table-column>
        <el-table-column label="结果">
          <template slot-scope="scope">
            <div :class="scope.row.isSocket ? 'red' : ''">
              {{
                scope.row.OperateResult ? scope.row.OperateResult : "暂无数据"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="日志时间">
          <template slot-scope="scope">
            <div :class="scope.row.isSocket ? 'red' : ''">
              {{ scope.row.BeginTime ? scope.row.BeginTime : "暂无数据" }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination class="pager_btns" layout="prev, pager, next" background :hide-on-single-page="true" :current-page="page" :page-size="size" :total="total" @current-change="fetchData" />
      </div>
    </div>
  </div>
</template>

<script>
import Search from "@/layout/components/Search";
import { GetLogList } from "@/api/apiLog";
import { parseTime } from "@/utils/index";
export default {
  name: "Journal",
  components: { Search },
  data () {
    return {
      tableData: [],
      tableCopy: [],
      value1: [
        parseTime(new Date(), "{y}-{m}-{d} 00:00:00"),
        parseTime(
          new Date().getTime() + 24 * 60 * 60 * 1000,
          "{y}-{m}-{d} 00:00:00"
        ),
      ],
      Msg: "",
      BeginTime: "",
      EndTime: "",
      page: 1,
      size: 10,
      total: null
    };
  },
  watch: {
    "$store.state.app.wsData": {
      handler (arr) {
        const datas = arr.concat(this.tableCopy);
        this.tableData = datas;
      },
      deep: true,
    },
  },
  created () {
    this.BeginTime = this.value1[0];
    this.EndTime = this.value1[1];
    this.getLogList({
      Msg: "",
      BeginTime: this.BeginTime,
      EndTime: this.EndTime,
      Page: this.page,
      PageSize: this.size
    });
  },
  methods: {
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    async getLogList (params) {
      try {
        const res = await GetLogList(params);
        if (res.code == 0) {
          const datas = this.$store.state.app.wsData
          this.tableData = datas.concat(res.returnData.result);
          this.tableCopy = res.returnData.result;
          this.total = res.returnData.total;
        } else {
          this.tableData = [];
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log(error);
      }
    },
    getSearchData (val) {
      const dates = this.value1;
      if (dates && dates.length) {
        this.BeginTime = dates[0];
        this.EndTime = dates[1];
      }
      this.Msg = val;
      this.getLogList({
        Msg: this.Msg,
        BeginTime: this.BeginTime,
        EndTime: this.EndTime,
        Page: this.page,
        PageSize: this.size
      });
    },
    clearSearch () {
      this.Msg = "";
      this.getLogList({
        Msg: this.Msg,
        BeginTime: this.BeginTime,
        EndTime: this.EndTime,
        Page: this.page,
        PageSize: this.size
      });
    },
    pickerChange (val) {
      if (val) {
        if (val && val.length) {
          this.BeginTime = val[0];
          this.EndTime = val[1];
        }
      } else {
        this.BeginTime = "";
        this.EndTime = "";
        this.getLogList({
          Msg: this.Msg,
          BeginTime: "",
          EndTime: "",
          Page: this.page,
          PageSize: this.size
        });
      }
    },
    fetchData (val) {
      this.page = val;
      this.getLogList({
        Msg: this.Msg,
        BeginTime: this.BeginTime,
        EndTime: this.EndTime,
        Page: this.page,
        PageSize: this.size
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.dashboard-journal {
  min-height: calc(100vh - 395px);
  padding: 32px;
  background: #ffffff;
  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  .journal-title {
    line-height: 48px;
    .title {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #303133;
    }
    .j-date {
      height: 48px;
      line-height: 48px;
      padding: 0 24px;
      background: #ffffff;
      -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
      box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
      border-radius: 6px;
      margin-right: 20px;
    }
  }
  .journal-content {
    margin-top: 24px;
    ::v-deep .table {
      .el-table__header {
        .has-gutter {
          color: #ffffff;
          .is-leaf {
            height: 64px;
            background: #6e82a7;
            &:first-child {
              border-top-left-radius: 6px;
            }
            &:nth-child(6) {
              border-top-right-radius: 6px;
            }
          }
        }
      }
      td.el-table__cell,
      th.el-table__cell.is-leaf {
        border-bottom: none;
      }
      .el-table__cell {
        padding: 16px 0;
        // background: #f5f7fa;
      }
      .el-table__row--level-1 {
        td {
          background: #dfe4ec;
        }
      }
      &::before {
        width: 0;
      }
      tbody tr:hover > td {
        background-color: transparent;
      }
      .warning-row {
        background-color: #f5f7fa;
      }
      .success-row {
        background-color: #e3e6ef;
      }
      .el-table__body-wrapper {
        &::-webkit-scrollbar {
          width: 8px;
        }
        &::-webkit-scrollbar-thumb {
          background: #b6bac3;
          border-radius: 2px;
        }
      }
      .red {
        color: red;
      }
    }
    ::v-deep .pager {
      text-align: right;
      margin-top: 20px;
      &_btns {
        display: inline-block;
        .el-pager li.active {
          background: linear-gradient(0deg, #6983be, #777dba);
        }
      }
    }
  }
}
</style>