From c04569e75ef0c526f7f08169cc5724c83005d250 Mon Sep 17 00:00:00 2001
From: whyczyk <525500596@qq.com>
Date: 星期四, 30 九月 2021 20:11:39 +0800
Subject: [PATCH] 地图组件及图表模块跳转方法添加
---
src/components/charts/powerChart.vue | 275 ++++++++++++++++++++++++++++--------------------------
1 files changed, 144 insertions(+), 131 deletions(-)
diff --git a/src/components/charts/powerChart.vue b/src/components/charts/powerChart.vue
index 10a82e5..b7c0291 100644
--- a/src/components/charts/powerChart.vue
+++ b/src/components/charts/powerChart.vue
@@ -1,142 +1,155 @@
<template>
- <div class="chartCon">
- <div class="chartItem">
- <pross-pie-chart id="prossPieChart0" ref="prossPieChart0"></pross-pie-chart>
- </div>
- <div class="chartItem">
- <pross-pie-chart id="prossPieChart1" ref="prossPieChart1"></pross-pie-chart>
- </div>
- <div class="chartItem">
- <pross-pie-chart id="prossPieChart2" ref="prossPieChart2"></pross-pie-chart>
- </div>
- <div class="chartItem">
- <pross-pie-chart id="prossPieChart3" ref="prossPieChart3"></pross-pie-chart>
- </div>
- <div class="chartItem">
- <pross-pie-chart id="prossPieChart4" ref="prossPieChart4"></pross-pie-chart>
- </div>
- <div class="chartItem">
- <pross-pie-chart id="prossPieChart5" ref="prossPieChart5"></pross-pie-chart>
- </div>
- </div>
+ <div class="chartCon" @click="toParentPage">
+ <div class="chartItem">
+ <pross-pie-chart id="prossPieChart0" ref="prossPieChart0"></pross-pie-chart>
+ </div>
+ <div class="chartItem">
+ <pross-pie-chart id="prossPieChart1" ref="prossPieChart1"></pross-pie-chart>
+ </div>
+ <div class="chartItem">
+ <pross-pie-chart id="prossPieChart2" ref="prossPieChart2"></pross-pie-chart>
+ </div>
+ <div class="chartItem">
+ <pross-pie-chart id="prossPieChart3" ref="prossPieChart3"></pross-pie-chart>
+ </div>
+ <div class="chartItem">
+ <pross-pie-chart id="prossPieChart4" ref="prossPieChart4"></pross-pie-chart>
+ </div>
+ <div class="chartItem">
+ <pross-pie-chart id="prossPieChart5" ref="prossPieChart5"></pross-pie-chart>
+ </div>
+ </div>
</template>
<script>
- import prossPieChart from "./prossPieChart"
- import {
- powerAlarmStatus
- } from '@/assets/js/api'
- export default {
- components: {
- prossPieChart
- },
- data() {
- return {}
- },
- mounted() {
+import prossPieChart from "./prossPieChart"
+import {
+ powerAlarmStatus
+} from '@/assets/js/api'
+export default {
+ components: {
+ prossPieChart
+ },
+ data() {
+ return {}
+ },
+ mounted() {
- },
- methods: {
- setData(data) {
- this.$nextTick(() => {
- if (data) {
- data.map((item, i) => {
- let chart = this.$refs[`prossPieChart${i}`];
- chart.setData(item);
- chart.resize();
- })
- } else {
- this.postData()
- setInterval(() => {
- this.postData()
- }, 3000)
- }
+ },
+ methods: {
+ toParentPage() {
+ window.parent.parent.postMessage({
+ cmd: "syncPage",
+ params: {
+ pageInfo: {
+ label: "鐢垫簮瀹炴椂鍛婅",
+ name: "powerRealtimeInfo",
+ src: "#/powerRealtimeInfo",
+ closable: true
+ },
+ }
+ }, "*");
+ },
+ setData(data) {
+ this.$nextTick(() => {
+ if (data) {
+ data.map((item, i) => {
+ let chart = this.$refs[`prossPieChart${i}`];
+ chart.setData(item);
+ chart.resize();
+ })
+ } else {
+ this.postData()
+ setInterval(() => {
+ this.postData()
+ }, 3000)
+ }
- })
- },
- postData() {
- 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() {
- this.$refs.prossPieChart0.resize();
- this.$refs.prossPieChart1.resize();
- this.$refs.prossPieChart2.resize();
- this.$refs.prossPieChart3.resize();
- this.$refs.prossPieChart4.resize();
- this.$refs.prossPieChart5.resize();
- }
- }
- }
+ })
+ },
+ postData() {
+ 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() {
+ this.$refs.prossPieChart0.resize();
+ this.$refs.prossPieChart1.resize();
+ this.$refs.prossPieChart2.resize();
+ this.$refs.prossPieChart3.resize();
+ this.$refs.prossPieChart4.resize();
+ this.$refs.prossPieChart5.resize();
+ }
+ }
+}
</script>
<style scoped>
- .chartCon {
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- }
+.chartCon {
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+}
- .chartCon .chartItem {
- width: 50%;
- height: 31.333%;
- float: left;
- margin-bottom: 2%;
- }
+.chartCon .chartItem {
+ width: 50%;
+ height: 31.333%;
+ float: left;
+ margin-bottom: 2%;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.1