|
|
@@ -1,176 +1,320 @@
|
|
|
/* 状态栏 */
|
|
|
<template>
|
|
|
- <div class='status-bar'>
|
|
|
- <el-row>
|
|
|
- <el-col :span="16">
|
|
|
- <span style="color: white">系统时间：</span>
|
|
|
- <span style="color: white">{{currentTime}}</span>
|
|
|
- </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>
|
|
|
+ <div class="status-bar">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="19" style="margin-top: 5px">
|
|
|
+ <span style="color: white; margin-left: 20px">系统时间：</span>
|
|
|
+ <span style="color: white">{{ currentTime }}</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" style="margin-top: 5px">
|
|
|
+ <el-popover
|
|
|
+ placement="top-start"
|
|
|
+ :width="521"
|
|
|
+ trigger="hover"
|
|
|
+ class="popoverBack"
|
|
|
+ show-arrow="false"
|
|
|
+ visible-arrow="false"
|
|
|
+ >
|
|
|
+ <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"
|
|
|
+ border
|
|
|
+ border-color="rgb(36,36,36)"
|
|
|
+ max-height="750px"
|
|
|
+ :header-cell-style="{
|
|
|
+ background: 'Black',
|
|
|
+ color: 'rgb(220,220,220)',
|
|
|
+ border:'0px'
|
|
|
+ }"
|
|
|
+ :cell-style="{ background: 'Black', color: 'rgb(220,220,220)',}"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ width="100"
|
|
|
+ property="date"
|
|
|
+ label="时间"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ width="120"
|
|
|
+ property="name"
|
|
|
+ label="设备"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ width="300"
|
|
|
+ property="address"
|
|
|
+ label="故障信息"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-popover>
|
|
|
+ <el-popover placement="top-start"
|
|
|
+ :width="521"
|
|
|
+ trigger="hover"
|
|
|
+ class="popoverBack"
|
|
|
+ show-arrow="false">
|
|
|
+ <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"
|
|
|
+ border
|
|
|
+ border-color="rgb(36,36,36)"
|
|
|
+ max-height="750px"
|
|
|
+ :header-cell-style="{
|
|
|
+ background: 'Black',
|
|
|
+ color: 'rgb(220,220,220)',
|
|
|
+ border:'0px'
|
|
|
+ }"
|
|
|
+ :cell-style="{ background: 'Black', color: 'rgb(220,220,220)',}">
|
|
|
+ <el-table-column
|
|
|
+ width="100"
|
|
|
+ property="date"
|
|
|
+ label="时间"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ width="120"
|
|
|
+ property="name"
|
|
|
+ label="设备"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ width="300"
|
|
|
+ property="address"
|
|
|
+ label="故障信息"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-popover>
|
|
|
+ <el-popover
|
|
|
+ placement="top-start"
|
|
|
+ :width="521"
|
|
|
+ trigger="hover"
|
|
|
+ class="popoverBack"
|
|
|
+ show-arrow="false">
|
|
|
+ <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"
|
|
|
+ border
|
|
|
+ border-color="rgb(36,36,36)"
|
|
|
+ max-height="750px"
|
|
|
+ :header-cell-style="{
|
|
|
+ background: 'Black',
|
|
|
+ color: 'rgb(220,220,220)',
|
|
|
+ border:'0px'
|
|
|
+ }"
|
|
|
+ :cell-style="{ background: 'Black', color: 'rgb(220,220,220)',}">
|
|
|
+ <el-table-column
|
|
|
+ width="100"
|
|
|
+ property="date"
|
|
|
+ label="时间"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ width="120"
|
|
|
+ property="name"
|
|
|
+ label="设备"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ width="300"
|
|
|
+ property="address"
|
|
|
+ label="故障信息"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-popover>
|
|
|
+ <el-popover
|
|
|
+ placement="top-start"
|
|
|
+ :width="521"
|
|
|
+ trigger="hover"
|
|
|
+ class="popoverBack"
|
|
|
+ show-arrow="false">
|
|
|
+ <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"
|
|
|
+ border
|
|
|
+ border-color="rgb(36,36,36)"
|
|
|
+ max-height="750px"
|
|
|
+ :header-cell-style="{
|
|
|
+ background: 'Black',
|
|
|
+ color: 'rgb(220,220,220)',
|
|
|
+ border:'0px'
|
|
|
+ }"
|
|
|
+ :cell-style="{ background: 'Black', color: 'rgb(220,220,220)',}">
|
|
|
+ <el-table-column
|
|
|
+ width="100"
|
|
|
+ property="date"
|
|
|
+ label="时间"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ width="120"
|
|
|
+ property="name"
|
|
|
+ label="设备"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ width="300"
|
|
|
+ property="address"
|
|
|
+ label="故障信息"
|
|
|
+ align="center"
|
|
|
+ ></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 弄'
|
|
|
- }]
|
|
|
- }
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ hiddenDangerNum: 0,
|
|
|
+ defectNum: 0,
|
|
|
+ malfunctionNum: 0,
|
|
|
+ accidentNum: 0,
|
|
|
+ statusTimer: "",
|
|
|
+ currentTime: "",
|
|
|
+ gridData: [
|
|
|
+ {
|
|
|
+ date: "2016-05-02",
|
|
|
+ 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)
|
|
|
+ {
|
|
|
+ date: "2016-05-04",
|
|
|
+ name: "王小虎",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄",
|
|
|
},
|
|
|
- beforeDestory() {
|
|
|
- clearInterval(this.statusTimer)
|
|
|
- this.statusTimer = null;
|
|
|
+ {
|
|
|
+ date: "2016-05-01",
|
|
|
+ name: "王小虎",
|
|
|
+ address: "上海市普陀区金沙江路 1518 弄",
|
|
|
},
|
|
|
- methods: {
|
|
|
- appendZero(obj) {
|
|
|
- if (obj < 10) {
|
|
|
- return "0" + obj
|
|
|
- } else {
|
|
|
- return obj
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ {
|
|
|
+ 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;
|
|
|
+span {
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+
|
|
|
+.status-bar {
|
|
|
+ height: 4vh;
|
|
|
+ background-color: #191919;
|
|
|
|
|
|
- margin-bottom: 0;
|
|
|
- margin-left: 0;
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
+ margin-bottom: 0;
|
|
|
+ margin-left: 0;
|
|
|
+ margin-right: 0;
|
|
|
+}
|
|
|
|
|
|
- .status-list {
|
|
|
- position: relative;
|
|
|
- display: inline-block;
|
|
|
- box-sizing: border-box;
|
|
|
- color: white;
|
|
|
- }
|
|
|
+.status-list {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
|
|
|
- .status-label {
|
|
|
- margin-left: 10px;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
+.status-label {
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
|
|
|
- .status-img {
|
|
|
- position: relative;
|
|
|
- top: 5px;
|
|
|
- margin-left: 20px;
|
|
|
- }
|
|
|
+.status-img {
|
|
|
+ position: relative;
|
|
|
+ top: 4px;
|
|
|
+ margin-left: 20px;
|
|
|
+ width: 20px;
|
|
|
+}
|
|
|
|
|
|
- .status-label.hidden-danger {
|
|
|
- color: #E6D541;
|
|
|
- }
|
|
|
+.status-label.hidden-danger {
|
|
|
+ color: #e6d541;
|
|
|
+}
|
|
|
|
|
|
- .status-label.defect {
|
|
|
- color: #E69641;
|
|
|
- }
|
|
|
+.status-label.defect {
|
|
|
+ color: #e69641;
|
|
|
+}
|
|
|
|
|
|
- .status-label.malfunction {
|
|
|
- color: #D541E6;
|
|
|
- }
|
|
|
+.status-label.malfunction {
|
|
|
+ color: #d541e6;
|
|
|
+}
|
|
|
|
|
|
- .status-label.accident {
|
|
|
- color: #AF3E3D;
|
|
|
- }
|
|
|
+.status-label.accident {
|
|
|
+ color: #af3e3d;
|
|
|
+}
|
|
|
</style>
|
