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/map.vue | 32 +++++
src/views/supervisoryConsole/data.vue | 108 ++++++++++++--------
src/views/supervisoryConsole/card.vue | 127 ++++++++++++++++++++++++
3 files changed, 216 insertions(+), 51 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
diff --git a/src/views/supervisoryConsole/data.vue b/src/views/supervisoryConsole/data.vue
index 6223266..7ce756d 100644
--- a/src/views/supervisoryConsole/data.vue
+++ b/src/views/supervisoryConsole/data.vue
@@ -22,49 +22,41 @@
<div class="info-active-top">
<div class="active-list">
<div>
- <span
- ng-click="menuToDetail(0)"
- class="dashboard_alarm ng-binding"
- >预警</span
- >
+ <span class="dashboard_alarm ng-binding">预警</span>
</div>
- <div><span class="ng-binding">3</span></div>
- <div class="ng-binding">占比 1.8%</div>
+ <div>
+ <span class="ng-binding">{{ yj }}</span>
+ </div>
+ <div class="ng-binding">占比 {{ yjper }}</div>
</div>
<div class="active-list">
<div>
- <span
- ng-click="menuToDetail(4)"
- class="dashboard_malfunction ng-binding"
- >故障</span
- >
+ <span class="dashboard_malfunction ng-binding">故障</span>
</div>
- <div><span class="ng-binding">25</span></div>
- <div class="ng-binding">占比 15%</div>
+ <div>
+ <span class="ng-binding">{{ gz }}</span>
+ </div>
+ <div class="ng-binding">占比 {{ gzper }}</div>
</div>
</div>
<div class="info-active-bottom">
<div class="active-list">
<div>
- <span
- ng-click="menuToDetail(1)"
- class="dashboard_normal ng-binding"
- >正常</span
- >
+ <span class="dashboard_normal ng-binding">正常</span>
</div>
- <div><span class="ng-binding">125</span></div>
- <div class="ng-binding">占比 75%</div>
+ <div>
+ <span class="ng-binding">{{ zx }}</span>
+ </div>
+ <div class="ng-binding">占比 {{ zxper }}</div>
</div>
<div class="active-list">
<div>
- <span
- ng-click="menuToDetail(3)"
- class="dashboard_inactive ng-binding"
- >掉线</span
- >
+ <span class="dashboard_inactive ng-binding">掉线</span>
</div>
- <div><span class="ng-binding">15</span></div>
- <div class="ng-binding">占比 10%</div>
+ <div>
+ <span class="ng-binding">{{ dx }}</span>
+ </div>
+ <div class="ng-binding">占比 {{ dxper }}</div>
</div>
</div>
</div>
@@ -155,12 +147,21 @@
getList,
getEquipmentList,
getDayWarnList,
+ getEquipment,
} from "@/api/supervisory/data";
export default {
data() {
return {
tableData: [],
+ dx: null,
+ zx: null,
+ gz: null,
+ yj: null,
+ dxper: null,
+ zxper: null,
+ gzper: null,
+ yjper: null,
};
},
created() {
@@ -188,34 +189,56 @@
getDayWarnList().then((res) => {
that.drawPillar(res.data.data);
});
+
+ getEquipment().then((res) => {
+ console.log(res.data.data, 123);
+
+ var total = 0;
+
+ total += res.data.data.zx;
+ total += res.data.data.dx;
+ total += res.data.data.gz;
+
+ console.log(total, 45);
+
+ that.dx = res.data.data.dx;
+ that.zx = res.data.data.zx;
+ that.gz = res.data.data.gz;
+ that.yj = res.data.data.yj;
+ that.dxper = ((res.data.data.dx / total) * 100).toFixed(2) + "%";
+ that.zxper = ((res.data.data.zx / total) * 100).toFixed(2) + "%";
+ that.gzper = ((res.data.data.gz / total) * 100).toFixed(2) + "%";
+ that.yjper = ((res.data.data.yj / total) * 100).toFixed(2) + "%";
+
+ that.drawPie();
+ });
},
- mounted() {
- this.drawPie();
- },
+ mounted() {},
methods: {
drawPie() {
+ var that = this;
var myChart = this.$echarts.init(
document.getElementById("base_information_pie_echarts")
);
var m2R2Data = [
{
- value: 125,
+ value: that.zx,
legendname: "正常",
name: "正常",
itemStyle: { color: "#29c194" },
},
{
- value: 25,
+ value: that.gz,
legendname: "故障",
name: "故障",
itemStyle: { color: "#b6b6b6" },
},
{
- value: 15,
+ value: that.dx,
legendname: "掉线",
name: "掉线",
- itemStyle: { color: "#6d5eac" },
+ itemStyle: { color: "#F48F57" },
},
];
@@ -248,8 +271,6 @@
trigger: "item",
formatter: function (parms) {
var str =
- parms.seriesName +
- "</br>" +
parms.marker +
"" +
parms.data.legendname +
@@ -265,7 +286,6 @@
},
series: [
{
- name: "标题",
type: "pie",
center: ["50%", "50%"],
radius: ["66%", "86%"],
@@ -383,7 +403,7 @@
data.dataList.forEach((item) => {
if (item.name == "一键求助") {
- yData = item.alarmData
+ yData = item.alarmData;
}
});
@@ -511,7 +531,7 @@
background-color: #29c093;
}
&:nth-child(3)::before {
- background-color: #6d5eac;
+ background-color: #F48F57;
}
&:nth-child(4)::before {
background-color: #dfdfdf;
@@ -572,20 +592,20 @@
color: #29c194;
}
.active-list:nth-child(2) > div:nth-child(1) span {
- border: 1px solid #6d5eac;
- color: #6d5eac;
+ border: 1px solid #F48F57;
+ color: #F48F57;
}
.active-list:nth-child(1) > div:nth-child(1) span:hover {
background: rgba(41, 192, 147, 0.15);
}
.active-list:nth-child(2) > div:nth-child(1) span:hover {
- background: #e9e7f3;
+ background: #f3ab8448;
}
.active-list:nth-child(1) > div:nth-child(2) span {
color: #29c194;
}
.active-list:nth-child(2) > div:nth-child(2) span {
- color: #6d5eac;
+ color: #F48F57;
}
}
.info-active-top,
diff --git a/src/views/supervisoryConsole/map.vue b/src/views/supervisoryConsole/map.vue
index 82e1c4e..7e9b272 100644
--- a/src/views/supervisoryConsole/map.vue
+++ b/src/views/supervisoryConsole/map.vue
@@ -1,13 +1,39 @@
<template>
- <iframe src="" frameborder="0"></iframe>
+ <el-row>
+ <el-col :span="24">
+ <iframe
+ id="supervisoryMap"
+ ref="supervisoryMap"
+ :src="baseUrl"
+ frameborder="0"
+ width="100%"
+ height="100%"
+ ></iframe>
+ </el-col>
+ </el-row>
</template>
<script>
export default {
+ data() {
+ return {
+ baseUrl: "",
+ };
+ },
+ created() {
+ this.baseUrl = `/map/index.html?openid=SupervisoryMap`;
+ },
+ mounted() {
-}
+ // this.$refs.supervisoryMap.onload = () => {
+ // window.frames[0].init("AlertSecurity", {
+ // x: this.form.jd,
+ // y: this.form.wd,
+ // });
+ // };
+ },
+};
</script>
<style>
-
</style>
\ No newline at end of file
--
Gitblit v1.9.3