signal_web/src/components/HistoryRecord.vue

<template>
    <div class="historyRecord">
        <div class="">
            <div class="sum-title">
                {{historyRs.title}}
            </div>
            <span class="link" @click="link(historyRs.url)">
                more+
            </span>
            <el-table
                    :data="tableData"
                    stripe
                    :default-sort="{prop: 'date', order: 'descending'}"
                    style="width: 100%">
                <el-table-column
                        prop="Name"
                        label="名称"
                        width="140"
                        align="center"
                >
                    <template slot-scope="scope">
                        <i :class="[{'blue':scope.row.DangerLevel == -1},{'yellow':scope.row.DangerLevel != -1}]"></i>
                        <el-tooltip class="item" effect="dark" :content="scope.row.Name" placement="top-start">
                            <span>
                                    {{ scope.row.Name.length > 9 ?  scope.row.Name.substr(0,9)+'...' : scope.row.Name }}
                            </span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="Ctime"
                        label="时间"
                        sortable
                        :formatter="filterFmtDate"
                >
                </el-table-column>
                <el-table-column
                        prop="Location"
                        label="位置"
                        width="">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" :content="scope.row.Location" placement="top-start">
                            <span>
                                    {{ scope.row.Location.length > 6 ?  scope.row.Location.substr(0,6)+'...' : scope.row.Location }}
                            </span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="SignaType"
                        label="类型">
                </el-table-column>
            </el-table>
            <br>
            <div v-show="allTableData.length != 0">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="pageination.total"
                        :page-size="pageination.pageItem"
                        @current-change="pageChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

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

    export default {
        data() {
            return {
                pageination: {
                    pageItem: 8,
                    pageoptions: pageOptions(),
                    total: 30,
                    pageIndex: 1,
                },
                draw: 1,
                start: 0,
                recordsTotal: 0,
                tableData: [],
                allTableData: [],
                limit: '9',
                multipleSort: false,
                loading: true,
                fileList: [],
                multipleSelection: [],
                detectedmac: '',
            }
        },
        props: ['historyRs'],
        watch: {
            historyRs: function (val) {
                this.loading = false;

                if (!val.Rs) {
                    this.allTableData = [];
                    this.recordsTotal = 0;
                } else {
                    this.allTableData = val.Rs;
                    this.recordsTotal = val.Rs.length;
                }

                // 设置分页数据
                this.setPaginations();
            },
        },
        methods: {
            link(url) {
                this.$router.push({path: url, query: {x: 0}});
            },
            // 设置分页数据
            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;
            },
            // 翻页
            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;
            },
            // 自动排序
            sortChange(params) {
                console.log(params)
            },
            // 过滤时间
            filterFmtDate(value, row, column) {
                let that = this;
                return globalfmtDate2(column, 11, 8);
            },
            // 过滤金额
        }
        ,
    }
</script>

<style scoped>
    .historyRecord {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .sum-title {
        width: 150px;
        height: 36px;
        font-size: 16px;
        line-height: 36px;
        color: #6DC1FF;
        margin: 0 auto;
        text-align: center;
        background: url("../assets/img/main/tit.png") top center no-repeat;
        background-size: 100%;
    }

    .link {
        position: relative;
        bottom: 20px;
        float: right;
        color: #6DC1FF;
        margin-right: 10px;
        cursor: pointer;
    }

    .el-table {
        position: relative;
        bottom: 20px;
        width: 100%;
        height: 110px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 0px;
        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 th {
        padding: 3px 0;
    }

    /deep/ .el-table td {
        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;
    }

    /deep/ .el-table .sort-caret {
        color: #6DC1FF !important;
    }

    /deep/ .el-table__empty-text {
        color: #015B9E;
    }

    /deep/ .el-pagination.is-background .btn-next,
    /deep/ .el-pagination.is-background .btn-prev {
        background: #002540;
    }

    /deep/ .el-pagination.is-background .el-pager li {
        background: #002540;
    }

</style>