SmartCommunity/accessControlSystem/src/views/trafficRecord/accessRecord/index.vue

<template>
    <div class="content main">
        <div class="content-left">
            <div class="leftDi">
                <organ-tree @organId="currentOrganId" :buildingType="1" :clearRoom="true"></organ-tree>
            </div>
            <div class="leftBottom">
                <div class="title">门禁机列表</div>
                <list-organ @doorGuid="doorGuid" :currentOrganId='currentId'></list-organ>
            </div>
        </div>
        <div class="content-right">
            <div class="search">
                <el-input
                    clearable
                    placeholder="输入姓名/手机号/地址"
                    class="search-input"
                    v-model.trim="mixins_query.likeValue"
                ></el-input>
                <el-select v-model="mixins_query.operateStyleName" placeholder="开门方式" clearable>
                    <el-option v-for="(item, index) in operateStyleArr" :key="index" :label="item.label" :value="item.label"></el-option>
                </el-select>
                <el-date-picker
                    v-model="pickerTime"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="timeToggle"
                    :editable="false"
                ></el-date-picker>
                <el-button
                    class="search-btn"
                    type="primary"
                    @click="mixins_search()"
                    :disabled="mixins_onQuery"
                    :loading="mixins_onQuery"
                    icon="el-icon-search"
                    >搜索</el-button
                >
            </div>
            <zz-table
                :settings="{ showIndex: true, stripe: true }"
                :cols="cols"
                :loading="mixins_onQuery"
                :data="mixins_list"
                :pageset="mixins_pageset"
                @page-change="pageChange"
            >
                <template slot="operate">已开门</template>
                <template slot-scope="scope" slot="imageUrl">
                    <div class="imgVdio">
                        <el-image class="imgs" :src="scope.row.imageUrl" :preview-src-list="[scope.row.imageUrl]"></el-image>
                    </div>
                </template>
            </zz-table>
        </div>
    </div>
</template>

<script>
import list from '@utils/list.js';
import listOrgan from './popups/listOrganTree.vue';
export default {
    mixins: [list],
    components: {
        listOrgan
    },
    data() {
        return {
            isLoadingTree: '',
            currentId: '',
            pickerTime: '',
            cols: [
                {
                    label: '社区',
                    prop: 'communityName'
                },
                {
                    label: '房产地址',
                    prop: 'address'
                },
                {
                    label: '姓名',
                    prop: 'userName'
                },
                {
                    label: '手机号',
                    prop: 'mobile'
                },
                {
                    label: '开门方式',
                    prop: 'operateStyleName'
                },
                {
                    label: '人员类型',
                    prop: 'ownerTypeName'
                },
                {
                    label: '出入图片',
                    prop: 'imageUrl',
                    slot: 'imageUrl'
                },
                {
                    label: '出入视频',
                    prop: 'videoUrl'
                },
                {
                    label: '开门状态',
                    prop: 'operate',
                    slot: 'operate'
                },
                {
                    label: '进出门类型',
                    prop: 'accessDoorType'
                },
                {
                    label: '开门时间',
                    prop: 'openTime',
                    width:'150px'
                }
            ],
            thisLeftData: {},
            operateStyleArr: [
                { label: '住户卡' },
                { label: '管理卡' },
                { label: '住户卡' },
                { label: '人脸识别' },
                { label: '临时密码' },
                { label: '呼叫物管机' },
                { label: '呼叫室内机' },
                { label: 'APP开门' },
                { label: '系统远程开门' }
            ],
            mixins_post: 'post'
        };
    },
    methods: {
        currentOrganId(data) {
            this.currentId = data || '';
        },
        doorGuid({ id } = data) {
            this.mixins_query.doorGuid = id;
            this.mixins_search();
        },
        CheckChinese(val, name) {
            var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
            let newVal = val;
            if (!reg.test(val)) {
                newVal = val + name;
            }
            return newVal;
        },
        checkDateType(time) {
            return !!time ? this.$moment(new Date(time)).format('YYYY-MM-DD') : '--';
        },
        // getorgTree() {
        //     this.$http
        //         .get('/sc-community/assets/community/list')
        //         .then((data) => {
        //             this.communityArr = data.data;
        //             this.$store.commit('setAreaSelect', data.data);
        //         })

        //         .catch(function () {});
        // },
        timeToggle(e) {
            let start = '00:00:00',
                end = '23:59:59';
            if (!!e) {
                this.mixins_query.startTime = `${e[0]} ${start}`;
                this.mixins_query.endTime = `${e[1]} ${end}`;
            } else {
                this.mixins_query.startTime = ``;
                this.mixins_query.endTime = ``;
            }
        }
    },
    watch: {
        currentId(newValue, oldValue) {
            this.mixins_query.communityId = newValue.communityId;
            this.mixins_query.buildingId = newValue.buildingId;
            this.mixins_query.unitName = newValue.unitName;
            this.thisLeftData = newValue;
            this.mixins_search();
            clearTimeout(this.isLoadingTree);
        }
    },
    created() {
        this.mixins_dataUrl = '/sc-gate-web/record/access/page'; // 分页查询接口
        this.mixins_query = {};
        this.isLoadingTree = setTimeout(() => {
            this.mixins_search();
        }, 1000);
    }
};
</script>
<style lang="scss" scoped>
@import '@assets/css/public-style.scss';
.content {
    height: 100%;
    display: flex;
    justify-content: space-between;
    .content-left {
        // height: 100%;
        width: rem(260);
        .leftDi {
            height: calc(50% - #{rem(30)});
            .organ-tree {
                height: 100%;
                &::-webkit-scrollbar {
                    display: none;
                }
            }
        }
        .leftBottom {
            margin-top: rem(20);
            height: calc(50% - #{rem(40)});
            background: white;
            .title {
                padding: rem(15) rem(20);
                color: $defaultColor;
                border-bottom: 1px solid #e0e1e3;
            }
        }
    }
}
</style>