|
|
@@ -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>
|
yangxuxian
