内容提交

whychdw

2024-10-14 9a3d84b683030eb05537078661025e2fb3288b40

 src/views/general/log/index.vue

@@ -1,15 +1,209 @@
<script lang="ts">
import { defineComponent } from 'vue';
import HdwCard from '@/components/HdwCard/index.vue';

export default defineComponent({
  name: 'LogManage'
  name: 'LogManage',
  components: { HdwCard },
  data() {
    return {
      tableData: [
        {
          areaName: '武汉源畅科技',
          userName: '源畅科技',
          keyName: '测试',
          lockName: '机柜蓝牙锁',
          type: '开锁操作',
          state: '成功',
          openType: '蓝牙',
          time: '2024-08-14 17:13:09'
        }
      ],
      filter: {
        userName: '',
        timeRange: '',
        type: 0
      },
      page: {
        currentPage: 1,
        pageSize: 20,
        total: 0
      }
    };
  },
  methods: {

  }
});
</script>

<script lang="ts" setup>
import {
  Search
} from '@element-plus/icons-vue';
import HdwTree from '@/components/HdwTree/index.vue';
</script>

<template>
  <div>日志管理</div>
  <div class="page-wrapper">
    <div class="page-header">
      <div class="hdw-card-container">
        <hdw-card title="区域列表" is-full>
          <hdw-tree></hdw-tree>
        </hdw-card>
      </div>
    </div>
    <div class="page-content">
      <hdw-card is-full>
        <div class="page-content-wrapper">
          <div class="page-content-tools">
            <div class="tools-filter">
              <div class="tools-filter-item">
                <div class="filter-label">操作人：</div>
                <div class="filter-content">
                  <el-input v-model="filter.userName" size="small"></el-input>
                </div>
              </div>
              <div class="tools-filter-item">
                <div class="filter-label">操作时间：</div>
                <div class="filter-content">
                  <el-date-picker
                      v-model="filter.timeRange"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      size="small"
                  />
                </div>
              </div>
              <div class="tools-filter-item">
                <div class="filter-label">操作类型：</div>
                <div class="filter-content">
                  <el-select
                      v-model="filter.type"
                      placeholder="请选择"
                      size="small"
                      style="width: 180px"
                  >
                    <el-option label="--请选择--" :value="0"/>
                    <el-option label="开关门日志" :value="1"/>
                    <el-option label="报警日志" :value="2"/>
                  </el-select>
                </div>
              </div>
            </div>
            <el-button type="primary" size="small" :icon="Search">查询</el-button>
          </div>
          <div class="page-content-table">
            <div class="pos-rel">
              <div class="pos-abs">
                <el-table :data="tableData" border style="width: 100%; height: 100%">
                  <el-table-column type="index" width="50" />
                  <el-table-column prop="areaName" align="center" label="区域名称" width="180" />
                  <el-table-column prop="userName" align="center" label="操作人" width="120" />
                  <el-table-column prop="keyName" align="center" label="钥匙名称" width="120" />
                  <el-table-column prop="lockName" align="center" label="锁具名称" min-width="180" />
                  <el-table-column prop="type" align="center" label="操作类型" width="180" />
                  <el-table-column prop="state" align="center" width="120" label="状态" />
                  <el-table-column prop="openType" align="center" label="开锁方式" width="120" />
                  <el-table-column prop="time" align="center" label="操作时间" width="180" />
                </el-table>
              </div>
            </div>
          </div>
          <div class="page-content-page">
            <div class="page-tool"></div>
            <div class="el-page-container">
              <el-pagination
                  v-model:current-page="page.currentPage"
                  v-model:page-size="page.pageSize"
                  :page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]"
                  size="small"
                  :disabled="disabled"
                  :background="background"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="page.total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
            </div>
            <div class="page-tool"></div>
          </div>
        </div>
      </hdw-card>
    </div>
    <div class="page-footer"></div>
  </div>
</template>

<style scoped lang="scss">
.page-wrapper {
  display: flex;
  flex-direction: row;
  padding: 8px;
  height: 100%;
  .page-content {
    flex: 1;
  }
}

.page-content-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .page-content-tools {
    padding-bottom: 8px;
  }
  .page-content-table {
    flex: 1;
    margin-left: -8px;
    margin-right: -8px;
  }
  .page-content-page {
    padding: 8px 8px 0 8px;
    text-align: center;
    .el-page-container {
      display: inline-block;
      padding: 0 16px;
    }
    .page-tool {
      display: inline-block;
    }
  }
}

.hdw-card-container {
  width: 240px;
  padding-right: 8px;
  height: 100%;
}
.pos-rel {
  position: relative;
  width: 100%;
  height: 100%;
  .pos-abs {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
}
.tools-filter {
  display: inline-block;
  font-size: 14px;
  .tools-filter-item {
    display: inline-block;
    margin-right: 8px;
    .filter-label {
      display: inline-block;
    }
    .filter-content {
      display: inline-block;
    }
  }
}
</style>