From eebbc840b49f3c14ced71dbb49e7e9fe6110315d Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 07 Apr 2021 17:37:22 +0800
Subject: [PATCH] 监控台模块下3个模式得相关修改
---
src/views/supervisoryConsole/card.vue | 127 +++++++++++++++++++++++++++++++++++++++++-
1 files changed, 123 insertions(+), 4 deletions(-)
diff --git a/src/views/supervisoryConsole/card.vue b/src/views/supervisoryConsole/card.vue
index 17bcab3..da8a344 100644
--- a/src/views/supervisoryConsole/card.vue
+++ b/src/views/supervisoryConsole/card.vue
@@ -1,13 +1,132 @@
<template>
-
+ <el-row>
+ <el-col
+ class="card-container"
+ :span="1"
+ v-for="(item, index) in option"
+ :key="index"
+ >
+ <a href="">
+ <el-card
+ :style="
+ item.state == ''
+ ? item.onlineStatus == 1
+ ? 'background: #1DBB99e6'
+ : 'background: #C9C9C9e6'
+ : 'background: #F48F57e6'
+ "
+ @click="alert(1)"
+ >
+ <div>{{ item.deviceName }}</div>
+ <div>{{ item.street }}</div>
+
+ <div class="cet">
+ {{
+ item.state == ""
+ ? item.onlineStatus == 1
+ ? "设备在线"
+ : "设备掉线"
+ : "设备故障"
+ }}
+ </div>
+
+ <img src="/img/alarm.png" alt="" />
+
+ <div class="bot">
+ <span>
+ {{ item.deviceNumber }}
+ </span>
+ <span>
+ {{ item.stime }}
+ </span>
+ </div>
+ </el-card>
+ </a>
+ </el-col>
+ </el-row>
</template>
<script>
+import { getList } from "@/api/supervisory/card";
export default {
+ data() {
+ return {
+ option: [],
+ };
+ },
+ created() {
+ getList().then((res) => {
+ var a = [],
+ b = [],
+ c = [];
-}
+ res.data.data.forEach((item) => {
+ if (item.state != "") a.push(item);
+ if (item.state == "" && item.onlineStatus != 1) b.push(item);
+ if (item.state == "" && item.onlineStatus == 1) c.push(item);
+ });
+
+ this.option = a.concat(c.concat(b));
+ });
+ },
+};
</script>
-<style>
-
+<style lang="scss">
+.card-container {
+ padding: 0 10px;
+ height: 172px !important;
+ box-sizing: border-box;
+ margin-bottom: 20px !important;
+ min-width: 368px;
+ max-width: 370px;
+ a {
+ width: 100%;
+ height: 100%;
+ cursor: pointer;
+ .el-card {
+ height: 100%;
+ color: #180808;
+ &:hover {
+ transform: scale(1.04);
+ }
+ .el-card__body {
+ position: relative;
+ height: 100%;
+ box-sizing: border-box;
+ .bot {
+ position: absolute;
+ left: 16px;
+ bottom: 16px;
+ width: calc(100% - 32px);
+ span:nth-child(1) {
+ float: left;
+ }
+ span:nth-child(2) {
+ float: right;
+ }
+ }
+ .cet {
+ position: absolute;
+ top: 50%;
+ left: 16px;
+ }
+ div {
+ line-height: 24px;
+ font-size: 14px;
+ }
+ img {
+ position: absolute;
+ right: 16px;
+ top: 40%;
+ width: 40px;
+ }
+ }
+ }
+ &:hover {
+ color: #180808;
+ text-decoration: none;
+ }
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3