all

heyujie

2021-07-21 b5e2e236828b7fbc0e8f2bdbf66651ad8907e3b1

 src/pages/syslog/index/App.vue

@@ -1,211 +1,98 @@
<template>
  <div class="s-log-management">
    <div class="top">
      <!-- <b>日志类型:</b>
      <el-select v-model="logValue" placeholder="请选择" size="small">
        <el-option
          v-for="item in logOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select> -->
      <b>操作时间:</b>
      <el-date-picker
        v-model="timeValue"
        type="datetimerange"
        size="mini"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 244px;"
      ></el-date-picker>
      <b>模块:</b>
      <el-select v-model="logValue" placeholder="请选择" size="mini">
        <el-option
          v-for="item in logOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <b>功能:</b>
      <el-select v-model="logValue" placeholder="请选择" size="mini">
        <el-option
          v-for="item in logOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input
        v-model="searchValue"
        placeholder="请输入内容"
        clearable
        style="width: 150px;margin: 0px 10px;"
        size="mini"
      ></el-input>
      <el-button type="primary" size="mini">搜索</el-button>
      <el-button type="danger" size="mini" @click="delSelected">批量删除</el-button>
      <el-button type="text" size="mini" style="font-size: 13px;font-weight: 600;">导出</el-button>
    </div>
    <div class="foot-table s-table">
      <el-table
        ref="multipleTable"
        highlight-current-row
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{background:'#f8f8f8',color:'#222222'}"
        @selection-change="handleSelectionChange"
  <div class="container">
    <div class="container-left">
      <div
        class="left-card"
        v-for="(item, i) in menuArr"
        :key="i"
        :class="activePage == i ? 'left-card-active' : ''"
        @click="openMenu(item, i)"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column :align="'center'" sortable prop="index" label="序号"></el-table-column>
        <el-table-column :align="'center'" sortable prop="logtype" label="日志类型"></el-table-column>
        <el-table-column :align="'center'" sortable prop="username" label="用户名"></el-table-column>
        <el-table-column :align="'center'" sortable prop="ipaddress" label="IP地址"></el-table-column>
        <el-table-column :align="'center'" sortable prop="operation" label="操作功能"></el-table-column>
        <el-table-column :align="'center'" sortable prop="operatetime" label="操作时间"></el-table-column>
        <el-table-column :align="'center'" sortable prop="operateinfo" label="操作信息"></el-table-column>
        <el-table-column label="操作" :align="'center'">
          <template slot-scope="scope">
            <el-button
              type="text"
              style="color: red;font-size:16px"
              @click="handleDelete(scope.$index, scope.row)"
              icon="el-icon-delete"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
        <span class="icon iconfont">&#xe646;</span>
        <span class="card-text">{{ item.name }}</span>
      </div>
    </div>
    <operationLog v-if="activePage == 0" style="width: 100%"></operationLog>
    <systemLog v-if="activePage == 1" style="width: 100%"></systemLog>
    <pollingLog v-if="activePage == 2" style="width: 100%"></pollingLog>
    <eventPushLog v-if="activePage == 3" style="width: 100%"></eventPushLog>
  </div>
</template>

<script>
import operationLog from "../views/operationLog";
import systemLog from "../views/systemLog";
import pollingLog from "../views/pollingLog";
import eventPushLog from "../views/eventPushLog";
export default {
  name: "settings",
  components: {
    operationLog,
    systemLog,
    pollingLog,
    eventPushLog,
  },
  data() {
    return {
      tableData: [
        {
          index: "1",
          logtype: "异常",
          username: "admin",
          ipaddress: "192.168.10.110",
          operation: "添加摄像机",
          operatetime: "2019-5-31 16:38:21",
          operateinfo: "添加操作"
        },
        {
          index: "2",
          logtype: "信息",
          username: "admin",
          ipaddress: "192.168.10.108",
          operation: "删除摄像机",
          operatetime: "2019-5-31 16:38:21",
          operateinfo: "添加操作"
        },
        {
          index: "3",
          logtype: "操作",
          username: "admin",
          ipaddress: "192.168.10.110",
          operation: "添加摄像机",
          operatetime: "2019-5-31 16:38:21",
          operateinfo: "添加操作"
        },
        {
          index: "4",
          logtype: "异常",
          username: "admin",
          ipaddress: "192.168.10.110",
          operation: "添加摄像机",
          operatetime: "2019-5-31 16:38:21",
          operateinfo: "添加操作"
        },
        {
          index: "5",
          logtype: "异常",
          username: "admin",
          ipaddress: "192.168.10.110",
          operation: "删除摄像机",
          operatetime: "2019-5-31 16:38:21",
          operateinfo: "添加操作"
        },
        {
          index: "6",
          logtype: "异常",
          username: "admin",
          ipaddress: "192.168.10.110",
          operation: "添加摄像机",
          operatetime: "2019-5-31 16:38:21",
          operateinfo: "添加操作"
        }
      menuArr: [
        { name: "操作日志" },
        { name: "系统日志" },
        { name: "轮询日志" },
        { name: "事件推送日志" },
      ],
      multipleSelection: [],
      logOptions: [
        {
          value: "全部类型",
          label: "全部类型"
        },
        {
          value: "其他类型",
          label: "其他类型"
        }
      ],
      logValue: "全部类型",
      timeValue: [
        new Date(2000, 10, 10, 10, 10),
        new Date(2000, 10, 11, 10, 10)
      ],
      searchValue: ""
      activePage: 0,
    };
  },
  methods: {
    handleDelete(index, row) {
      console.log(index, row);
    openMenu(item, i) {
      this.activePage = i;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delSelected() {
      console.log(this.multipleSelection);
    }
  }
  },
};
</script>
<style lang="scss">
.s-log-management {
.container {
  height: 100%;
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  .top {
    width: 100%;
    
    margin-bottom: 20px;
    overflow-y: auto;
    min-width: 1156px;
    height: 40px;
    text-align: left;
    b {
      padding: 0px 10px;
    }
  }
  .export {
    display: inline-block;
    padding-right: 10px;
  .container-left {
    height: 100%;
    width: 210px;
    overflow: auto;
    box-sizing: border-box;
    margin-top: 20px;
    b:hover {
      color: #2249b4;
    flex-shrink: 0;
    padding: 10px;
    border-right: 5px solid rgba(248, 248, 248, 1);
    box-sizing: border-box;
    .left-card {
      height: 55px;
      cursor: pointer;
      border-radius: 12px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      .iconfont {
        margin-left: 15px;
        margin-right: 10px;
        font-size: 20px;
      }
      .card-text {
        font-size: 16px;
      }
    }
  }
  .clear-searching {
    cursor: pointer;
    text-decoration: underline;
    width: 40px;
    font-size: 13px;
    color: #3d68e1;
    .left-card-active{
        background-color: rgba(61, 104, 225, 1);
        color: #fff;
    }
    .left-card:hover {
      background-color: rgba(61, 104, 225, 1);
      color: #fff;
    }
  }
}
</style>