pingAnQiYeWeb/src/views/archives/yujing.vue

<template>
    <div class="mainBox scroll-target">
        <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-row-style="tableHeaderColor" :header-cell-style="tableHeaderCellColor">
                <el-table-column type="index" width="50" label="序号">
                </el-table-column>
                <el-table-column show-overflow-tooltip label="预警类型">
                    <template slot-scope="scope">
                        <div class="alarmType">
                            <div class="red" v-if="scope.row.alarmColor == 'red'">红色预警</div>
                            <div class="yellow" v-if="scope.row.alarmColor == 'yellow'">黄色预警</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="alarmIndex" label="预警指标">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="alarmTime" label="预警时间">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="responsibleDepartment" label="责任部门">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="alarmStatusCn" label="处置状态">
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="updateTime" 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 {
    props: ['companyID'],
    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, companyId: this.companyID }).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': 'rgba(61, 85, 102, 0.16)', 'border': '0', 'color': '#fff' }
            }
        },
        tableHeaderColor() {
            return { 'background': 'linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)' }
            // return { 'background': 'url("~@/assets/archives/列表9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' }
        },
        tableHeaderCellColor() {
            return { 'background': 'rgba(0,0,0,0)', 'border': '0', '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: 450px;
    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;
    }

    /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);
        }
    }

    /deep/.el-table {
        background: rgba(0, 0, 0, 0);

        td.el-table__cell {
            border: 0;
        }

        .xiangqing {
            background: rgba(0, 0, 0, 0);
            border: 0;
            color: rgba(48, 196, 255, 0.7);
            cursor: pointer;
        }

        .alarmType {
            width: 72px;
            height: 32px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.9);
            letter-spacing: 1px;
            font-weight: 400;

            .red {
                width: 100%;
                height: 100%;
                background: rgba(152, 7, 7, 0.21);
                border: 1px solid rgba(214, 38, 38, 1);
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .yellow {
                width: 100%;
                height: 100%;
                background: rgba(152, 95, 7, 0.21);
                border: 1px solid rgba(255, 169, 38, 1);
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }

    .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>