状态中增加弹出框

src/components/StatusBar.vue

@@ -1,17 +1,141 @@
 /* 状态栏 */
 <template>
-<div class='status-bar'>
-
-</div>
+    <div class='status-bar'>
+        <el-row>
+            <el-col :span="16"></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,
+                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 弄'
+                }]
+            }
+        }
+    }
+</script>
+
 <style scoped>
-.status-bar{
-    height: 4vh;
-    background-color:#191919;
-
-    margin-bottom: 0;
-    margin-left: 0;
-    margin-right: 0;
-}
+    .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>