From b9bc80def4e77e1bd2b224747a4dbf0b486e4c1d Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 02 Apr 2021 16:49:12 +0800
Subject: [PATCH] Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/jfpt-Vue
---
src/views/supervisoryConsole/data.vue | 199 ++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 178 insertions(+), 21 deletions(-)
diff --git a/src/views/supervisoryConsole/data.vue b/src/views/supervisoryConsole/data.vue
index 79c3f92..1051a0e 100644
--- a/src/views/supervisoryConsole/data.vue
+++ b/src/views/supervisoryConsole/data.vue
@@ -124,16 +124,12 @@
<div class="alarm-bar">
<div class="alarm-bar-title">
<div class="title-left ng-binding">日累计预警事件数</div>
- <div class="title-right week ng-scope" ng-if="$ctrl.barRate >= 1">
+ <div class="title-right week">
<span class="ng-binding">0</span
><span class="ng-binding">1.00</span>
</div>
</div>
- <div
- class="week-alarm-bar ng-isolate-scope"
- data="$ctrl.weekAlarm"
- alarm-bar="alarmBarEvent(chart)"
- ></div>
+ <div class="week-alarm-bar" id="day_warn_echarts"></div>
</div>
<div class="border-line"></div>
<div class="alarm-line">
@@ -141,22 +137,12 @@
<div class="title-left change-flex-alarm ng-binding">
日累计预警设备数
</div>
- <!-- ngIf: $ctrl.deviceRate >= 1 -->
- <div
- class="title-right week ng-scope"
- ng-if="$ctrl.deviceRate >= 1"
- >
+ <div class="title-right week">
<span class="ng-binding">0</span
><span class="ng-binding">1.00</span>
</div>
- <!-- end ngIf: $ctrl.deviceRate >= 1 -->
- <!-- ngIf: $ctrl.deviceRate < 1 -->
</div>
- <div
- class="week-device-line ng-isolate-scope"
- data="$ctrl.weekDevice"
- device-line="deviceLineEvent(chart)"
- ></div>
+ <div class="week-device-line" id="day_equipment_echarts"></div>
</div>
</div>
</div>
@@ -165,7 +151,11 @@
</template>
<script>
-import { getList } from "@/api/supervisory/data";
+import {
+ getList,
+ getEquipmentList,
+ getDayWarnList,
+} from "@/api/supervisory/data";
export default {
data() {
@@ -189,6 +179,14 @@
alarmPeople: item.alarmPeople,
});
});
+ });
+
+ getEquipmentList().then((res) => {
+ that.drawLine(res.data.data);
+ });
+
+ getDayWarnList().then((res) => {
+ that.drawPillar(res.data.data[0]);
});
},
mounted() {
@@ -284,6 +282,165 @@
},
},
data: m2R2Data,
+ },
+ ],
+ };
+ myChart.setOption(option);
+ },
+
+ drawLine(result) {
+ var myChart = this.$echarts.init(
+ document.getElementById("day_equipment_echarts")
+ );
+
+ var xData = [];
+ var yData = [];
+
+ result.forEach((item) => {
+ xData.push(item.time.substr(5));
+ yData.push(item.Coun);
+ });
+
+ var option = {
+ color: "#A58ABF",
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ label: {
+ show: false,
+ },
+ lineStyle: {
+ width: 0,
+ },
+ },
+ formatter: function (parms) {
+ var str =
+ parms[0].axisValue +
+ "</br>" +
+ parms[0].marker +
+ "设备数：" +
+ parms[0].value;
+ return str;
+ },
+ textStyle: {
+ color: "#fff",
+ },
+ backgroundColor: "rgba(0, 0, 0, 0.7)",
+ borderWidth: 0,
+ },
+ xAxis: {
+ type: "category",
+ data: xData,
+ boundaryGap: false,
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "#F0F0F0",
+ },
+ },
+ axisLabel: {
+ color: "#6E6E6E",
+ },
+ },
+ yAxis: {
+ type: "value",
+ show: false,
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ // boundaryGap: [0, "40%"],
+ },
+ series: [
+ {
+ type: "line",
+ smooth: 0.8,
+ // symbol: "none",
+ data: yData,
+ areaStyle: {},
+ },
+ ],
+ };
+ myChart.setOption(option);
+ },
+
+ drawPillar(data) {
+ var myChart = this.$echarts.init(
+ document.getElementById("day_warn_echarts")
+ );
+
+ var xData = [];
+ var yData = [];
+
+ data.lists.forEach((item) => {
+ xData.push(item.time.substr(5));
+ var sum = 0;
+
+ Object.values(item).forEach((it) => {
+ !isNaN(Number(it)) == true ? (sum += it) : "";
+ });
+
+ yData.push(sum);
+ });
+
+ var option = {
+ color: "#F34A4A",
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ label: {
+ show: false,
+ },
+ lineStyle: {
+ width: 0,
+ },
+ },
+ formatter: function (parms) {
+ var str =
+ parms[0].axisValue +
+ "</br>" +
+ parms[0].marker +
+ "事件数：" +
+ parms[0].value;
+ return str;
+ },
+ textStyle: {
+ color: "#fff",
+ },
+ backgroundColor: "rgba(0, 0, 0, 0.7)",
+ borderWidth: 0,
+ },
+ xAxis: {
+ type: "category",
+ data: xData,
+ boundaryGap: false,
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "#F0F0F0",
+ },
+ },
+ axisLabel: {
+ color: "#6E6E6E",
+ },
+ },
+ yAxis: {
+ type: "value",
+ show: false,
+ boundaryGap: [0, "40%"],
+ },
+ series: [
+ {
+ data: yData,
+ type: "bar",
},
],
};
@@ -526,13 +683,13 @@
display: flex;
margin-top: 44px;
height: calc(100% - 54px);
- background: pink;
+ // background: pink;
}
.week-device-line {
display: flex;
margin-top: 44px;
height: calc(100% - 54px);
- background: orange;
+ // background: orange;
}
}
.border-line {
--
Gitblit v1.9.3