From d8bff9dff0c9c0c8e88e9e4be85c66de2b5b43ff Mon Sep 17 00:00:00 2001
From: whyczyk <525500596@qq.com>
Date: 星期五, 19 三月 2021 15:34:45 +0800
Subject: [PATCH] 数据模块对接
---
src/pages/index.vue | 5
src/components/charts/abeamProChart.vue | 50 +++++++-
src/components/charts/imgPieChart.vue | 41 ++++++
src/components/charts/latticeBar.vue | 74 ++++++++++--
src/assets/js/api.js | 50 ++++++++
src/components/charts/powerChart.vue | 75 +++++++++++
src/pages/exhibition.vue | 3
src/components/charts/triangleBarChart.vue | 52 +++++++-
8 files changed, 309 insertions(+), 41 deletions(-)
diff --git a/src/assets/js/api.js b/src/assets/js/api.js
index dd88f03..802931c 100644
--- a/src/assets/js/api.js
+++ b/src/assets/js/api.js
@@ -20,4 +20,54 @@
url: "/application/config",
data: data
})
+}
+
+/* 鏀剧數鍜� 鍏呯數鐢垫祦
+ */
+export const chargeAnalysis = (data) => {
+ return axios({
+ method: "GET",
+ url: "/batteryAlarm/chargeAnalysis",
+ params: data
+ })
+}
+
+/* 鏁存祦鍣�
+ */
+export const rectifier = (data) => {
+ return axios({
+ method: "GET",
+ url: "/powerAlarm/rectifier",
+ params: data
+ })
+}
+
+/* 鐢垫睜缁�
+ */
+export const batteryGroup = (data) => {
+ return axios({
+ method: "GET",
+ url: "/powerAlarm/batteryGroup",
+ params: data
+ })
+}
+
+/* 鐢垫睜鐘舵��
+ */
+export const batteryStatus = (data) => {
+ return axios({
+ method: "GET",
+ url: "/battery/status",
+ params: data
+ })
+}
+
+/* 鐢垫簮鐘舵��
+ */
+export const powerAlarmStatus = (data) => {
+ return axios({
+ method: "GET",
+ url: "/powerAlarm/status",
+ params: data
+ })
}
\ No newline at end of file
diff --git a/src/components/charts/abeamProChart.vue b/src/components/charts/abeamProChart.vue
index fcc73a4..d578a5d 100644
--- a/src/components/charts/abeamProChart.vue
+++ b/src/components/charts/abeamProChart.vue
@@ -16,6 +16,9 @@
import {
chartFontsize
} from '@/assets/js/chartFontsize'
+ import {
+ batteryStatus
+ } from '@/assets/js/api'
export default {
name: "abeamProChart",
chart: "",
@@ -36,14 +39,13 @@
setOption(opt) {
this.$options.chart.setOption(opt);
},
- setData(sendData) {
- this.$options.chartData = sendData;
- let dataColor = sendData.color;
- let bgColor = sendData.bgColor;
- let yData = sendData.yData;
+ organizeData(posData) {
+ let dataColor = posData.color;
+ let bgColor = posData.bgColor;
+ let yData = posData.yData;
let radius = (this.$refs.chart.clientHeight / 3 - 7) > 0 ? this.$refs.chart.clientHeight / 3 - 7 : 0;
- let data = sendData.data;
- let max = data[0];
+ let data = posData.data;
+ let max = posData[0];
data.map(item => {
if (item > max) {
max = item;
@@ -166,10 +168,42 @@
// 璁剧疆閰嶇疆椤�
this.setOption(option);
},
+ setData(sendData) {
+ if (sendData) {
+ this.$options.chartData = sendData;
+ this.organizeData(sendData)
+ } else {
+ let userId = localStorage.getItem('userId');
+ let params = {
+ userId: userId
+ }
+ batteryStatus(params).then((res) => {
+ if (res.data.code == 1) {
+ let optionData = {
+ yData: [],
+ color: ['#f58881', '#b4d465', '#ffcb29'],
+ bgColor: ['rgba(245,136,129,0.35)', 'rgba(255,255,255,0.35)', 'rgba(255,203,41,0.35)'],
+ data: []
+ }
+ let resData = res.data.data;
+ for (let key in resData) {
+ optionData.yData.push(key);
+ optionData.data.push(resData[key]);
+ }
+ this.$options.chartData = optionData;
+ this.organizeData(optionData)
+ }
+ }).catch((err) => {
+ console.log(err)
+ });
+ }
+ },
resize() {
setTimeout(() => {
this.$options.chart.resize();
- this.setData(this.$options.chartData);
+ if (JSON.stringify(this.$options.chartData) != '{}') {
+ this.setData(this.$options.chartData);
+ }
}, 300)
}
},
diff --git a/src/components/charts/imgPieChart.vue b/src/components/charts/imgPieChart.vue
index a80094f..63e2c98 100644
--- a/src/components/charts/imgPieChart.vue
+++ b/src/components/charts/imgPieChart.vue
@@ -12,6 +12,9 @@
import {
chartFontsize
} from '@/assets/js/chartFontsize'
+ import {
+ rectifier
+ } from '@/assets/js/api'
const pieImg = require('../../assets/images/rectifier-img.png');
export default {
name: "imgPieChart",
@@ -33,8 +36,7 @@
setOption(opt) {
this.$options.chart.setOption(opt);
},
- setData(sendData) {
- this.$options.chartData = sendData;
+ organizeData(data) {
let imgWidth = this.$refs.chart.clientWidth * 0.14;
let imgheight = imgWidth / 0.82;
let centerx = this.$refs.chart.clientWidth / 2;
@@ -96,7 +98,7 @@
}
}
},
- data: sendData.data,
+ data: data.data,
zlevel: 1
},
{
@@ -161,10 +163,41 @@
// 璁剧疆閰嶇疆椤�
this.setOption(option);
},
+ setData(sendData) {
+ if (sendData) {
+ this.$options.chartData = sendData;
+ this.organizeData(sendData)
+ } else {
+ let userId = localStorage.getItem('userId');
+ let params = {
+ userId: userId
+ }
+ rectifier(params).then((res) => {
+ if (res.data.code == 1) {
+ let optionData = {
+ data: []
+ }
+ let resData = res.data.data;
+ for (let key in resData) {
+ let obj = {};
+ obj.name = key;
+ obj.value = resData[key];
+ optionData.data.push(obj)
+ }
+ this.$options.chartData = optionData;
+ this.organizeData(optionData)
+ }
+ }).catch((err) => {
+ console.log(err)
+ });
+ }
+ },
resize() {
setTimeout(() => {
this.$options.chart.resize();
- this.setData(this.$options.chartData);
+ if (JSON.stringify(this.$options.chartData) != '{}') {
+ this.setData(this.$options.chartData);
+ }
}, 300)
}
},
diff --git a/src/components/charts/latticeBar.vue b/src/components/charts/latticeBar.vue
index da6d2ba..7f83cbb 100644
--- a/src/components/charts/latticeBar.vue
+++ b/src/components/charts/latticeBar.vue
@@ -11,6 +11,9 @@
import {
chartFontsize
} from '@/assets/js/chartFontsize'
+ import {
+ chargeAnalysis
+ } from '@/assets/js/api'
export default {
name: "latticeBar",
chart: "",
@@ -31,8 +34,7 @@
setOption(opt) {
this.$options.chart.setOption(opt);
},
- setData(sendData) {
- this.$options.chartData = sendData;
+ organizeData(data) {
let option = {
tooltip: {
trigger: 'axis',
@@ -103,9 +105,8 @@
}],
series: []
};
-
let max;
- sendData.series.map(item => {
+ data.series.map(item => {
max = item.data[0];
item.data.map(jtem => {
if (jtem > max) {
@@ -114,15 +115,15 @@
})
});
option.yAxis[0].max = max;
- option.xAxis[0].data = sendData.xData;
+ option.xAxis[0].data = data.xData;
let legendData = [];
- sendData.series.map(item => {
+ data.series.map(item => {
legendData.push(item.name);
})
option.legend.data = legendData;
- for (let i = 0; i < sendData.series.length; i++) {
+ for (let i = 0; i < data.series.length; i++) {
let maxArr = [];
- sendData.series[i].data.map(() => {
+ data.series[i].data.map(() => {
maxArr.push(max)
})
let plusMinus = (i % 2);
@@ -133,11 +134,11 @@
offset = '65%'
}
option.series.push({
- name: sendData.series[i].name,
+ name: data.series[i].name,
type: 'pictorialBar',
symbol: 'roundRect',
itemStyle: {
- color: sendData.series[i].color
+ color: data.series[i].color
},
symbolRepeat: true,
symbolSize: ["16%", "4%"],
@@ -145,7 +146,7 @@
symbolPosition: 'start',
symbolOffset: [offset, 0],
z: -20,
- data: sendData.series[i].data,
+ data: data.series[i].data,
});
option.series.push({
name: 'bg',
@@ -166,10 +167,59 @@
// 璁剧疆閰嶇疆椤�
this.setOption(option);
},
+ setData(sendData) {
+ if (sendData) {
+ this.$options.chartData = sendData;
+ this.organizeData(sendData)
+ } else {
+ let userId = localStorage.getItem('userId');
+ let params = {
+ userId: userId
+ }
+ chargeAnalysis(params).then((res) => {
+ if (res.data.code == 1) {
+ let optionData = {
+ xData: [],
+ series: [{
+ name: '鏀剧數',
+ data: [],
+ color: '#90ec7d'
+ }, {
+ name: '鍏呯數',
+ data: [],
+ color: '#ff6b6b'
+ }]
+ }
+ let resData = res.data.data;
+ for (let key in resData.reCharge) {
+ if (typeof resData.reCharge[key] == 'string') {
+ optionData.series[0].data.push(Number(resData.reCharge[key].split('%')[0]))
+ } else {
+ optionData.series[0].data.push(resData.reCharge[key])
+ }
+ }
+ for (let key in resData.disCharge) {
+ optionData.xData.push(key)
+ if (typeof resData.disCharge[key] == 'string') {
+ optionData.series[1].data.push(Number(resData.disCharge[key].split('%')[0]))
+ } else {
+ optionData.series[1].data.push(resData.disCharge[key])
+ }
+ }
+ this.$options.chartData = optionData;
+ this.organizeData(optionData)
+ }
+ }).catch((err) => {
+ console.log(err)
+ });
+ }
+ },
resize() {
setTimeout(() => {
this.$options.chart.resize();
- this.setData(this.$options.chartData);
+ if (JSON.stringify(this.$options.chartData) != '{}') {
+ this.setData(this.$options.chartData);
+ }
}, 300)
}
},
diff --git a/src/components/charts/powerChart.vue b/src/components/charts/powerChart.vue
index fe2dd41..ff36519 100644
--- a/src/components/charts/powerChart.vue
+++ b/src/components/charts/powerChart.vue
@@ -23,6 +23,9 @@
<script>
import prossPieChart from "./prossPieChart"
+ import {
+ powerAlarmStatus
+ } from '@/assets/js/api'
export default {
components: {
prossPieChart
@@ -36,11 +39,73 @@
methods: {
setData(data) {
this.$nextTick(() => {
- data.map((item, i) => {
- let chart = this.$refs[`prossPieChart${i}`];
- chart.setData(item);
- chart.resize();
- })
+ if (data) {
+ data.map((item, i) => {
+ let chart = this.$refs[`prossPieChart${i}`];
+ chart.setData(item);
+ chart.resize();
+ })
+ } else {
+ let userId = localStorage.getItem('userId');
+ let params = {
+ userId: userId
+ }
+ powerAlarmStatus(params).then((res) => {
+ if (res.data.code == 1) {
+ let optionData = [{
+ title: '',
+ data: 0,
+ unit: '',
+ color: '#37a9b3',
+ }, {
+ title: '',
+ data: 0,
+ unit: '',
+ color: '#f3535f'
+ }, {
+ title: '',
+ data: 0,
+ unit: '',
+ color: '#ff8b00'
+ }, {
+ title: '',
+ data: 0,
+ unit: '',
+ color: '#757ffb'
+ }, {
+ title: '',
+ data: 0,
+ unit: '',
+ color: '#4ba0d9'
+ }, {
+ title: '',
+ data: 0,
+ unit: '',
+ color: '#7fc57c'
+ }]
+ let index = 0;
+ let resData = res.data.data;
+ for (let key in resData) {
+ optionData[index].title = key;
+ if (typeof resData[key] == 'string') {
+ optionData[index].data = Number(resData[key].split('%')[0]);
+ optionData[index].unit = '%';
+ } else {
+ optionData[index].data = resData[key];
+ }
+ index++;
+ }
+ optionData.map((item, i) => {
+ let chart = this.$refs[`prossPieChart${i}`];
+ chart.setData(item);
+ chart.resize();
+ })
+ }
+ }).catch((err) => {
+ console.log(err)
+ });
+ }
+
})
},
resize() {
diff --git a/src/components/charts/triangleBarChart.vue b/src/components/charts/triangleBarChart.vue
index afdbfcb..4aa2233 100644
--- a/src/components/charts/triangleBarChart.vue
+++ b/src/components/charts/triangleBarChart.vue
@@ -12,6 +12,9 @@
import {
chartFontsize
} from '@/assets/js/chartFontsize'
+ import {
+ batteryGroup
+ } from '@/assets/js/api'
export default {
name: "triangleBarChart",
chart: "",
@@ -32,11 +35,14 @@
setOption(opt) {
this.$options.chart.setOption(opt);
},
- setData(sendData) {
- this.$options.chartData = sendData;
+ organizeData(data) {
let inData = []
- sendData.data.map(item => {
- inData.push(item - 10);
+ data.data.map(item => {
+ if (item > 10) {
+ inData.push(item - 10);
+ } else {
+ inData.push(item);
+ }
})
let option = {
tooltip: {
@@ -62,7 +68,7 @@
},
xAxis: [{
type: 'category',
- data: sendData.xData,
+ data: data.xData,
axisLine: {
lineStyle: {
color: '#022664'
@@ -79,7 +85,7 @@
}, {
show: false,
type: 'category',
- data: sendData.xData,
+ data: data.xData,
axisLine: {
lineStyle: {
color: '#022664'
@@ -118,7 +124,7 @@
name: 'outData',
type: 'pictorialBar',
xAxisIndex: 0,
- data: sendData.data,
+ data: data.data,
barCategoryGap: "0%",
barWidth: '50%',
symbol: 'path://d="M150 50 L130 130 L170 130 Z',
@@ -161,10 +167,40 @@
// 璁剧疆閰嶇疆椤�
this.setOption(option);
},
+ setData(sendData) {
+ if (sendData) {
+ this.$options.chartData = sendData;
+ this.organizeData(sendData)
+ } else {
+ let userId = localStorage.getItem('userId');
+ let params = {
+ userId: userId
+ }
+ batteryGroup(params).then((res) => {
+ if (res.data.code == 1) {
+ let optionData = {
+ xData: [],
+ data: []
+ }
+ let resData = res.data.data;
+ for (let key in resData) {
+ optionData.xData.push(key);
+ optionData.data.push(resData[key]);
+ }
+ this.$options.chartData = optionData;
+ this.organizeData(optionData)
+ }
+ }).catch((err) => {
+ console.log(err)
+ });
+ }
+ },
resize() {
setTimeout(() => {
this.$options.chart.resize();
- this.setData(this.$options.chartData);
+ if (JSON.stringify(this.$options.chartData) != '{}') {
+ this.setData(this.$options.chartData);
+ }
}, 300)
}
},
diff --git a/src/pages/exhibition.vue b/src/pages/exhibition.vue
index 1942bb3..6df2f7d 100644
--- a/src/pages/exhibition.vue
+++ b/src/pages/exhibition.vue
@@ -83,7 +83,6 @@
this.screenBg = item.img;
}
});
-
item.x *= clientWidth;
item.y *= clientHeight;
item.w *= clientWidth;
@@ -100,7 +99,7 @@
nowBox[0].appendChild(chartModular.$el)
this.modularArr.push(chartModular);
}
- chartModular.setData(item.setData);
+ chartModular.setData();
chartModular.resize();
}, 0)
diff --git a/src/pages/index.vue b/src/pages/index.vue
index cbdb7c1..f1e4d2d 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -111,12 +111,13 @@
getData() {
let self = this;
let opt = self.$route.query;
+ localStorage.setItem('userId', self.$route.query.userId);
console.log(opt)
self.$axios({
method: "get",
url: "/application/all",
- data: {
- userId:opt.userId || "1001"
+ params: {
+ userId: opt.userId || "1001"
}
}).then(res => {
if (res.data.code == 1) {
--
Gitblit v1.9.1