signal_web/src/components/HistoryRecord.vue

<template>
    <div class="historyRecord">
        <div class="other-people">
            <div class="image-border image-border1"></div>
            <div class="image-border image-border2"></div>
            <div class="image-border image-border3"></div>
            <div class="image-border image-border4"></div>
            <div class="other-people-title">
                历史监测记录
            </div>
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="ssid"
                        label="SSID"
                        width="">
                    <template slot-scope="scope">
                        <i :class="[{'blue':scope.row.state == 1},{'yellow':scope.row.state == 0}]"></i>
                        {{ scope.row.ssid }}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="日期"
                        width="">
                </el-table-column>
                <el-table-column
                        prop="location"
                        label="地点"
                        width="">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="可疑信号">
                </el-table-column>
            </el-table>
            <br>
            <el-pagination
                    background
                    :total="pageination.total"
                    :page-size="pageination.pageItem"
                    @current-change="pageChange"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
    import Global from '../Global.js'

    export default {
        data() {
            return {
                // panel 配置项目
                panel: {
                    usercode: '',
                    username: '',
                    compname: '',
                    keyword: '',
                    USERCODE: '',
                    taskstatus: 99,
                    options: [
                        {value: 99, label: '全部'},
                        {value: 1, label: '进行中'},
                        {value: 2, label: '已完成'},
                    ],
                    time1: globalBt(),
                },
                pageination: {
                    pageItem: 10,
                    pageoptions: pageOptions(),
                    total: 30,
                    pageIndex: 1,
                },
                tableData: [{
                    date: '06-19 12:32:01',
                    ssid: 'ewall-4G',
                    location: '201会议室',
                    type: 'WIFI信号',
                    state: 1
                }, {
                    date: '06-19 12:32:01',
                    ssid: 'ewall-4G',
                    location: '201会议室',
                    type: 'WIFI信号',
                    state: 0
                }, {
                    date: '06-19 12:32:01',
                    ssid: 'ewall-4G',
                    location: '201会议室',
                    type: 'WIFI信号',
                    state: 1
                },{
                    date: '06-19 12:32:01',
                    ssid: 'ewall-4G',
                    location: '201会议室',
                    type: 'WIFI信号',
                    state: 1
                },{
                    date: '06-19 12:32:01',
                    ssid: 'ewall-4G',
                    location: '201会议室',
                    type: 'WIFI信号',
                    state: 1
                },{
                    date: '06-19 12:32:01',
                    ssid: 'ewall-4G',
                    location: '201会议室',
                    type: 'WIFI信号',
                    state: 1
                },{
                    date: '06-19 12:32:01',
                    ssid: 'ewall-4G',
                    location: '201会议室',
                    type: 'WIFI信号',
                    state: 1
                }, {
                    date: '06-19 12:32:01',
                    ssid: 'ewall-4G',
                    location: '201会议室',
                    type: 'WIFI信号',
                    state: 0
                },]
            }
        },
        mounted() {
            this.getTableQuery();
        },
        methods: {
            // 查询按钮
            query() {
                this.getTableQuery();
                this.$message.success('查询完毕');
            },
            // 页面数据查询
            getTableQuery() {
                // let that = this;
                // that.loading = true;
                // let url = headapi + '?ctl=ajax&mod=dial&act=taskListQuery';//获取
                // let param = {
                //     'taskstatus': that.panel.taskstatus,
                //     'bt': globaltime2String(that.panel.time1[0]),
                //     'et': globaltime2String(that.panel.time1[1]),
                //     'KEYWORD': that.panel.keyword,
                //     'USERCODE': that.panel.USERCODE,
                // };
                // let JSON = '';
                // let postdata = qs.stringify(param);
                // axios.post(url, postdata)
                //     .then(function (response) {
                //         JSON = response.data;
                //         that.loading = false;
                //         that.allTableData = JSON.rs;
                //         that.recordsTotal = JSON.rs.length;
                //         // 设置分页数据
                //         that.setPaginations();
                //     })
                //     .catch(function (error) {
                //         console.log(error);
                //     });
            },
            // 设置分页数据
            setPaginations() {
                // 分页属性
                let that = this;
                that.pageination.total = that.recordsTotal;
                // 默认分页
                that.tableData = that.allTableData.filter((item, index) => {
                    return index < that.pageination.pageItem;
                });
            },
            // 每页显示数量
            handleSizeChange() {
                let that = this;
                that.tableData = that.allTableData.filter((item, index) => {
                    return index < that.pageination.pageItem;
                });
                that.draw = that.pageination.pageItem;
                that.getTableQuery();
            },
            // 翻页
            pageChange(pageIndex) {
                let that = this;
                // 获取当前页
                let index = that.pageination.pageItem * (pageIndex - 1);
                // 数据总数
                let nums = that.pageination.pageItem * pageIndex;
                // 容器
                let tables = [];
                for (var i = index; i < nums; i++) {
                    if (that.allTableData[i]) {
                        tables.push(that.allTableData[i])
                    }
                    this.tableData = tables;
                }
                that.start = index * that.draw;
                that.getTableQuery();
            },
            // 自动排序
            sortChange(params) {
                console.log(params)
            },
            // 过滤时间
            filterFmtDate(value, row, column) {
                let that = this;
                return globalfmtDate(column, 11);
            },
            // 过滤金额
        },
    }
</script>

<style scoped>
    .other-people {
        width: 439px;
        height: 480px;
        margin-left: 0;
    }

    .el-table {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 40px;
        font-size: 14px;
        color: #6DC1FF;
    }

    .el-table, .el-table__expanded-cell {
        background: none;
    }

    /deep/ .el-table th, /deep/ .el-table tr {
        background: none;
        color: #6DC1FF;
        border: none;
    }

    /deep/ .el-table td, /deep/ .el-table th.is-leaf {
        border: none;
    }

    /deep/ .el-button--primary.is-active, /deep/ .el-button--primary:active, /deep/ .el-button--primary {
        background: none;
        border: 1px solid #005EA2;
        color: #6DC1FF;
    }

    /deep/ .el-button--primary {
        background: none;
        border: 1px solid #005EA2;
        color: #6DC1FF;
    }

    .el-table--border::after, .el-table--group::after, .el-table::before {
        display: none;
    }

    .el-pagination.is-background .btn-next.disabled, /deep/ .el-pagination.is-background .btn-next:disabled, /deep/ .el-pagination.is-background .btn-prev.disabled, .el-pagination.is-background .btn-prev:disabled, /deep/ .el-pagination.is-background .el-pager li.disabled {
        color: #6DC1FF;
    }

    /deep/ .el-pagination.is-background .btn-next, /deep/ .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
        background-color: #061B44;
    }

    /deep/ .el-pagination__jump {
        display: none !important;
    }

    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
        color: #002540;
        background-color: #6DC1FF;
    }

    /deep/ .el-pagination__total {
        color: #6DC1FF;
    }

    /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
        background: rgba(27, 86, 200, 0.77);
    }

    /deep/ .el-table--striped .el-table__body tr.el-table__row--striped:hover > td {
        background: rgba(27, 86, 200, 0.77);
    }

    /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
        background: rgba(27, 86, 200, 0.14);
    }

    /deep/ .has-gutter th {
        background: rgba(0, 23, 67, 0.8) !important;
        font-weight: normal;
    }
    /deep/ .el-table .cell {
        padding: 3px;
    }
    /deep/ .el-table td, .el-table th {
        padding: 6px 0;
    }
    /deep/ .number {
        width: 25px;
        height: 25px;
        line-height: 25px;
        min-width:25px;
    }
    i.blue {
        width:10px;
        height: 10px;
        float: left;
        background: #6DC1FF;
        margin-top: 6px;
        margin-right: 5px;
        border-radius: 250px;
    }
    i.yellow {
        width:10px;
        height: 10px;
        float: left;
        margin-top: 6px;
        margin-right: 5px;
        background: #FFDD00;
        border-radius: 250px;
    }
</style>