pingAnQiYeWeb/src/views/archives/yujing.vue

<template>
    <div class="mainBox">
        <div class="topZS"></div>
        <div class="title">
            预警处置（<span>{{ total }}</span>）
        </div>
        <div class="monitorBox">
            <el-table :cell-style="{ background: 'revert' }" :data="tableData" class="table"
                style="width: calc(100% - 40px);  margin: 20px;" :row-style="tableRowStyle"
                :header-cell-style="tableHeaderColor">
                <el-table-column show-overflow-tooltip prop="villageName" label="小区名称">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="gridName" label="网格名称">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="buildingName" label="楼栋名称">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="upFloor" label="楼层">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="longitude" label="楼栋经度">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="latitude" label="楼栋纬度">
                </el-table-column>
                <el-table-column show-overflow-tooltip label="操作" width="80">
                    <template slot-scope="scope">
                        <div class="detail" @click="checkDetail(scope.row)">
                            <button class="xiangqing">详情</button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                :page-sizes="[5]" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <div class="bottomZS"></div>
    </div>
</template>

<script>

import { warningDisposal } from '@/api/archives'
export default {
    data() {
        return {

            pageSize: 5,
            pageNum: 1,
            total: 0,
            isShow: [{ show: false }, { show: false }, { show: false }, { show: false }, { show: false }],
            diaVisible: false,
            tableData: [],
        }
    },

    created() {
        this.getList()
    },
    methods: {
        getList() {
            warningDisposal({ pageSize: this.pageSize, pageNum: this.pageNum, }).then(res => {
                this.tableData = res.data
                this.total = res.total
            })
        },
        showShadow(val) {
            this.isShow[val].show = true
        },
        closeShadow(val) {
            this.isShow[val].show = false
        },
        showDia() {
            this.diaVisible = true
        },
        tableRowStyle({ rowIndex }) {
            if ((rowIndex + 1) % 2 == 1) {
                return { 'background': 'rgba(0,0,0,0)', 'color': '#fff', 'border': '0' }
            } else {
                return { 'background': '#3D5566', 'border': '0' }
            }
        },
        tableHeaderColor() {
            //{'background-image': 'linear-gradient(90deg, #263958 0%, #375683 17%, #22324A 100%)'}
            return { 'background-image': 'linear-gradient(90deg, #182436 0%, #1A3760 50%, #182436 100%)', 'color': '#fff' }
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageNum = 1;
            this.pageSize = val;
            this.getList()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum = val;
            this.getList()
        },
    },
}
</script>

<style lang="less" scoped>
.mainBox {
    width: 100%;
    height: 370px;
    background: url('~@/assets/companyFile/背景22136.png') no-repeat;
    background-size: 100% 100%;
    padding: 70px 20px 60px;
    box-sizing: border-box;
    display: flex;
    position: relative;
    margin-top: 20px;

    .monitorBox {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /deep/.el-input {
        .el-input__inner {
            // background: url('~@/assets/companyFile/2121.png') no-repeat;
            background: url('~@/assets/companyFile/矩形备份 18.png') no-repeat;
            background-size: 100% 100%;
            border: 1px solid rgba(40, 132, 126, 1);
            color: rgba(234, 246, 255, 0.7);
            ;
        }
    }


    .title {
        position: absolute;
        top: 14px;
        left: 20px;
        width: 162px;
        height: 36px;
        line-height: 36;

        font-size: 16px;
        color: #EBFFF4;
        letter-spacing: 2px;
        line-height: 36px;
        text-shadow: 0 0 9px rgba(21, 255, 195, 0.60);
        font-weight: 400;

        span {
            color: #FF9191;
        }
    }


}
</style>