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/AcInputWarp.vue | 231 ++++++++++++++++++++++++++++++---------------------------
1 files changed, 122 insertions(+), 109 deletions(-)
diff --git a/src/components/charts/AcInputWarp.vue b/src/components/charts/AcInputWarp.vue
index e4e79f9..689dbd5 100644
--- a/src/components/charts/AcInputWarp.vue
+++ b/src/components/charts/AcInputWarp.vue
@@ -1,120 +1,133 @@
<template>
- <div class="chartCon">
- <div class="chartItem">
- <ac-input id="AcInput0" ref="AcInput0"></ac-input>
- </div>
- <div class="chartItem">
- <ac-input id="AcInput1" ref="AcInput1"></ac-input>
- </div>
- <div class="chartItem">
- <ac-input id="AcInput2" ref="AcInput2"></ac-input>
- </div>
- <div class="chartItem">
- <ac-input id="AcInput3" ref="AcInput3"></ac-input>
- </div>
- </div>
+ <div class="chartCon" @click="toParentPage">
+ <div class="chartItem">
+ <ac-input id="AcInput0" ref="AcInput0"></ac-input>
+ </div>
+ <div class="chartItem">
+ <ac-input id="AcInput1" ref="AcInput1"></ac-input>
+ </div>
+ <div class="chartItem">
+ <ac-input id="AcInput2" ref="AcInput2"></ac-input>
+ </div>
+ <div class="chartItem">
+ <ac-input id="AcInput3" ref="AcInput3"></ac-input>
+ </div>
+ </div>
</template>
<script>
- import {
- powerAlarmAcInput
- } from '@/assets/js/api'
- import AcInput from './AcInput.vue'
- export default {
- components: {
- AcInput
- },
- data() {
- return {}
- },
- mounted() {
+import {
+ powerAlarmAcInput
+} from '@/assets/js/api'
+import AcInput from './AcInput.vue'
+export default {
+ components: {
+ AcInput
+ },
+ data() {
+ return {}
+ },
+ mounted() {
- },
- methods: {
- setData(data) {
- this.$nextTick(() => {
- if (data) {
- data.map((item, i) => {
- let chart = this.$refs[`AcInput${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[`AcInput${i}`];
+ chart.setData(item);
+ chart.resize();
+ })
+ } else {
+ this.postData()
+ setInterval(() => {
+ this.postData()
+ }, 3000)
+ }
- })
- },
- postData() {
- let userId = localStorage.getItem('userId');
- let params = {
- userId: userId
- }
- powerAlarmAcInput(params).then((res) => {
- if (res.data.code == 1) {
- let optionData = [{
- title: '鐔斾笣鍛婅',
- data: 56,
- acColor: '#813a74',
- resColor: '#ff649d',
- }, {
- title: '璺抽椄',
- data: 12,
- acColor: '#287878',
- resColor: '#5adfaa',
- }, {
- title: '棰戠巼寮傚父',
- data: 21,
- acColor: '#2388a6',
- resColor: '#43f9fd',
- }, {
- title: '涓夌浉涓嶅钩琛�',
- data: 8,
- acColor: '#7f3a29',
- resColor: '#fc5f02',
- }]
- let resData = res.data.data;
- for (let key in resData) {
- optionData.map(item => {
- if (item.title == key) {
- item.data = resData[key]
- }
- })
- }
- optionData.map((item, i) => {
- let chart = this.$refs[`AcInput${i}`];
- chart.setData(item);
- chart.resize();
- })
- }
- }).catch((err) => {
- console.log(err)
- });
- },
- resize() {
- this.$refs.AcInput0.resize();
- this.$refs.AcInput1.resize();
- this.$refs.AcInput2.resize();
- this.$refs.AcInput3.resize();
- }
- }
- }
+ })
+ },
+ postData() {
+ let userId = localStorage.getItem('userId');
+ let params = {
+ userId: userId
+ }
+ powerAlarmAcInput(params).then((res) => {
+ if (res.data.code == 1) {
+ let optionData = [{
+ title: '鐔斾笣鍛婅',
+ data: 56,
+ acColor: '#813a74',
+ resColor: '#ff649d',
+ }, {
+ title: '璺抽椄',
+ data: 12,
+ acColor: '#287878',
+ resColor: '#5adfaa',
+ }, {
+ title: '棰戠巼寮傚父',
+ data: 21,
+ acColor: '#2388a6',
+ resColor: '#43f9fd',
+ }, {
+ title: '涓夌浉涓嶅钩琛�',
+ data: 8,
+ acColor: '#7f3a29',
+ resColor: '#fc5f02',
+ }]
+ let resData = res.data.data;
+ for (let key in resData) {
+ optionData.map(item => {
+ if (item.title == key) {
+ item.data = resData[key]
+ }
+ })
+ }
+ optionData.map((item, i) => {
+ let chart = this.$refs[`AcInput${i}`];
+ chart.setData(item);
+ chart.resize();
+ })
+ }
+ }).catch((err) => {
+ console.log(err)
+ });
+ },
+ resize() {
+ this.$refs.AcInput0.resize();
+ this.$refs.AcInput1.resize();
+ this.$refs.AcInput2.resize();
+ this.$refs.AcInput3.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: 50%;
- float: left;
- position: relative;
- }
+.chartCon .chartItem {
+ width: 50%;
+ height: 50%;
+ float: left;
+ position: relative;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.1