SmartCommunity/accessControlSystem/src/views/alarmInformation/index.vue

<template>
    <div class="content main">
        <community-tree @organId="currentOrganId"></community-tree>
        <div class="content-right">
            <div class="search">
                <el-input
                    clearable
                    placeholder="输入设备编号/设备名称"
                    class="search-input"
                    v-trim
                    v-model.trim="mixins_query.name"
                ></el-input>
                <el-date-picker
                    v-model="pickerTime"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    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-scope="scope" slot="opt">
                    <div class="opt">
                        <el-tooltip class="item" effect="light" placement="bottom" content="查看">
                            <i class="zoniot_font zoniot-icon-xiangqing" @click="lookPage(scope.row)"></i>
                        </el-tooltip>
                    </div>
                </template>
            </zz-table>
        </div>
    </div>
</template>
<script>
import communityTree from './stepPage/communityTree.vue';
import list from '@utils/list.js';

export default {
    mixins: [list],
    components: {
        communityTree
    },
    data() {
        return {
            currentId: '',
            pickerTime: '',
            cols: [
                {
                    label: '社区名称',
                    prop: 'communityName'
                },
                {
                    label: '设备编号',
                    prop: 'deviceNo'
                },
                {
                    label: '设备名称',
                    prop: 'deviceName'
                },
                {
                    label: '门禁机类型',
                    prop: 'gateType',
                    format(val) {
                        if (val == 1) {
                            return '围墙机';
                        } else if (val == 2) {
                            return '单元机';
                        }
                    }
                },
                {
                    label: '告警类型',
                    prop: 'alarmType',
                    format(val) {
                        if (val == 501) {
                            return '消防报警';
                        } else if (val == 601) {
                            return '非法进入报警';
                        } else if (val == 701) {
                            return '防拆报警';
                        } else if (val == 801) {
                            return '门长开报警';
                        }
                    }
                },

                {
                    label: '告警时间',
                    prop: 'createDate'
                },
                {
                    label: '设备地址',
                    prop: 'address'
                }
            ],
            mixins_post: 'get'
        };
    },
    methods: {
        currentOrganId(data) {
            this.mixins_query.communityId = data.id || '';
            this.mixins_search();
        },
        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 = ``;
            }
        }
    },

    created() {
        this.mixins_dataUrl = '/sc-gate-web/alarm/page'; // 分页查询接口
        this.mixins_search();
    }
};
</script>
<style scoped lang='scss'>
@import '@assets/css/public-style.scss';
/deep/ .el-icon-caret-right {
    &:before {
        content: '';
        width: 4px;
        height: 4px;
        border-radius: 50%;
        display: block;
        background: $defaultColor;
    }
}
/deep/ .is-current {
    .el-tree-node__label,
    .el-tree-node__expand-icon.is-leaf {
        color: $mainTextColor;
    }
    .el-icon-caret-right {
        &:before {
            background: $mainTextColor;
        }
    }
}

.content-right {
    font-size: 12px;
    height: calc(100% - 100px);
    .item-title {
        /deep/ .el-input {
            display: inline-block;
            width: 120px;
            margin: 0 10px;
        }
    }
}
</style>