huimv.cloud.client/src/views/gateMachineManagement/EnterOut.vue

<template>
    <div class="EnterOut">
        <header class="header">
            <el-button-group>
                <el-button :type="isLookOut?'primary':''" @click="lookEnter">查看出</el-button>
                <el-button :type="isLookOut?'':'primary'" @click="lookOut">查看入</el-button>
            </el-button-group>
        </header>
        <section class="section">
            <el-table :data="EnterOutList">
                <el-table-column prop="recordInfo.id" label="序号" width="120px"></el-table-column>
                <el-table-column prop="deviceInfo.description" label="机器名字"></el-table-column>
                <el-table-column prop="useInfo.name" label="出入者"></el-table-column>
                <el-table-column prop="useInfo.idCardNum" label="出入者身份证号"></el-table-column>
                <el-table-column prop="useInfo.name" label="出入者"></el-table-column>
                <el-table-column prop="recordInfo.updated" label="进出时间"></el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button
                            @click="look(scope.row.useInfo.imgUrl)"
                            type="text"
                            size="small"
                        >查看出入者照片</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row type="flex" justify="end">
                <el-col :span="8" class="pagination">
                    <el-pagination
                        @current-change="pageChange"
                        background
                        layout="prev, pager, next"
                        :page-count="5"
                    ></el-pagination>
                </el-col>
            </el-row>

            <el-dialog title="提示" center :visible.sync="showDialog" width="30%">
                <img class="img" :src="userImgUrl" alt="没有照片" />
                <span slot="footer">
                    <el-button @click="showDialog = false">取 消</el-button>
                    <el-button type="primary" @click="showDialog = false">确 定</el-button>
                </span>
            </el-dialog>
        </section>
    </div>
</template>

<script>
import { mapActions } from "vuex";

// 每页数据条数
const pageSize = 10;
// 照片根地址
const userImgUrlBase = "http://121.36.134.218:88/";

export default {
    name: "EnterOut",
    data() {
        return {
            EnterOutList: [],
            isLookOut: true,
            showDialog: true,
            userImgUrl: "",
            pageSize,
            page: 1
        };
    },
    created() {
        this.getEnterOutList();
    },
    methods: {
        ...mapActions(["fetch"]),
        getEnterOutList() {
            let api = this.isLookOut
                ? "/analyse/uface/out"
                : "/analyse/uface/in";
            let data = {
                pageSize: this.pageSize,
                page: this.page
            };
            this.fetch({
                api,
                method: "GET",
                data,
                success: res => {
                    console.log(res);
                    this.EnterOutList = res;
                },
                fail: err => {
                    console.log(err);
                    if (err.errMsg) this.$message.error(err.errMsg);
                    else this.$message.error("服务器发生异常");
                }
            });
        },
        // 页码改变
        pageChange(p) {
            console.log(p);
            this.page = p;
            // this.getEnterOutList();
        },
        // 点击 查看出
        lookOut() {
            this.isLookOut = false;
            // this.getEnterOutList();
        },
        // 点击 查看入
        lookEnter() {
            this.isLookOut = true;
            // this.getEnterOutList();
        },
        // 查看出入者照片
        look(imgUrl) {
            console.log(imgUrl);
            this.userImgUrl = userImgUrlBase + imgUrl;
            this.showDialog = true;
        }
    }
};
</script>

<style lang="scss" scoped>
.EnterOut {
    .header {
        margin-bottom: 10px;
    }
    .section {
        img {
            width: 100%;
        }
    }
}

.pagination {
    margin-top: 20px;
}
</style>