project-neic/src/components/StatusBar.vue

/* 状态栏 */
<template>
    <div class='status-bar'>
        <el-row>
            <el-col :span="4">
                <span style="color: white">系统时间：</span>
                <span style="color: white">{{currentTime}}</span>
            </el-col>
            <el-col :span="12"></el-col>
            <el-col :span="8">
                <el-popover placement="top-start" :width="400" trigger="hover">
                    <template #reference>
                        <div class="status-list">
                            <img class="status-img" src="../assets/img/statusbar/hidden_danger.png">
                            <span class="status-label hidden-danger">隐患</span>
                            <span>{{hiddenDangerNum}}</span>
                        </div>
                    </template>
                    <el-table :data="gridData">
                        <el-table-column width="150" property="date" label="日期1"></el-table-column>
                        <el-table-column width="100" property="name" label="姓名"></el-table-column>
                        <el-table-column width="300" property="address" label="地址"></el-table-column>
                    </el-table>
                </el-popover>
                <el-popover placement="top-start" :width="400" trigger="hover">
                    <template #reference>
                        <div class="status-list">
                            <img class="status-img" src="../assets/img/statusbar/defect.png">
                            <span class="status-label defect">缺陷</span>
                            <span>{{defectNum}}</span>
                        </div>
                    </template>
                    <el-table :data="gridData">
                        <el-table-column width="150" property="date" label="日期2"></el-table-column>
                        <el-table-column width="100" property="name" label="姓名"></el-table-column>
                        <el-table-column width="300" property="address" label="地址"></el-table-column>
                    </el-table>
                </el-popover>
                <el-popover placement="top" :width="400" trigger="hover">
                    <template #reference>
                        <div class="status-list">
                            <img class="status-img" src="../assets/img/statusbar/malfunction.png">
                            <span class="status-label malfunction">故障</span>
                            <span>{{malfunctionNum}}</span>
                        </div>
                    </template>
                    <el-table :data="gridData">
                        <el-table-column width="150" property="date" label="日期3"></el-table-column>
                        <el-table-column width="100" property="name" label="姓名"></el-table-column>
                        <el-table-column width="300" property="address" label="地址"></el-table-column>
                    </el-table>
                </el-popover>
                <el-popover placement="top" :width="400" trigger="hover">
                    <template #reference>
                        <div class="status-list">
                            <img class="status-img" src="../assets/img/statusbar/accident.png">
                            <span class="status-label accident">事故</span>
                            <span>{{accidentNum}}</span>
                        </div>
                    </template>
                    <el-table :data="gridData">
                        <el-table-column width="150" property="date" label="日期4"></el-table-column>
                        <el-table-column width="100" property="name" label="姓名"></el-table-column>
                        <el-table-column width="300" property="address" label="地址"></el-table-column>
                    </el-table>
                </el-popover>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                hiddenDangerNum: 0,
                defectNum: 0,
                malfunctionNum: 0,
                accidentNum: 0,
                statusTimer: "",
                currentTime: "",
                gridData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }]
            }
        },
        mounted() {
            let that = this
            this.statusTimer = setInterval(function () {
                that.currentTime =
                    new Date().getFullYear() +
                    "-" +
                    that.appendZero((new Date().getMonth() + 1)) +
                    "-" +
                    that.appendZero(new Date().getDate()) +
                    " " +
                    that.appendZero(new Date().getHours()) +
                    ":" +
                    that.appendZero(new Date().getMinutes()) +
                    ": " +
                    that.appendZero(new Date().getSeconds());
            }, 1000)
        },
        beforeDestory() {
            clearInterval(this.statusTimer)
            this.statusTimer = null;
        },
        methods: {
            appendZero(obj) {
                if (obj < 10) {
                    return "0" + obj
                } else {
                    return obj
                }
            }
        }
    }
</script>

<style scoped>
    .status-bar {
        height: 4vh;
        background-color: #191919;

        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .status-list {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        color: white;
    }

    .status-label {
        margin-left: 10px;
        margin-right: 10px;
    }

    .status-img {
        position: relative;
        top: 5px;
        margin-left: 20px;
    }

    .status-label.hidden-danger {
        color: #E6D541;
    }

    .status-label.defect {
        color: #E69641;
    }

    .status-label.malfunction {
        color: #D541E6;
    }

    .status-label.accident {
        color: #AF3E3D;
    }
</style>