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/MonCap.vue | 315 +++++++++++++++++++++++++++-------------------------
1 files changed, 164 insertions(+), 151 deletions(-)
diff --git a/src/components/charts/MonCap.vue b/src/components/charts/MonCap.vue
index 59f412a..043b700 100644
--- a/src/components/charts/MonCap.vue
+++ b/src/components/charts/MonCap.vue
@@ -1,164 +1,177 @@
<template>
- <div class="flex-box">
- <div class="flex-box-body">
- <circle-chart id="circleChart" ref="circleChart"></circle-chart>
- </div>
- <div class="flex-box-footer">
- <ul class="list-view">
- <li v-for="item in chart.circle" :key="item.name" class="list-view-item">
- <span class="item-name">{{item.name}}</span>
- :
- <span class="item-value" :style="{'color':item.color}">{{item.value}}</span>
- </li>
- </ul>
- </div>
- </div>
+ <div class="flex-box" @click="toParentPage">
+ <div class="flex-box-body">
+ <circle-chart id="circleChart" ref="circleChart"></circle-chart>
+ </div>
+ <div class="flex-box-footer">
+ <ul class="list-view">
+ <li v-for="item in chart.circle" :key="item.name" class="list-view-item">
+ <span class="item-name">{{item.name}}</span>
+ :
+ <span class="item-value" :style="{'color':item.color}">{{item.value}}</span>
+ </li>
+ </ul>
+ </div>
+ </div>
</template>
<script>
- import CircleChart from "@/components/charts/CircleChart";
- import {
- batteryAlarmMonCapacity
- } from '@/assets/js/api'
- export default {
- name: "MonCap",
- components: {
- CircleChart
- },
- data() {
- return {
- chart: {
- circle: [{
- name: '浣庡憡璀︽暟閲�',
- value: 0,
- color: '#00DFFC',
- },
- {
- name: '鍛婅鎬绘暟姣斾緥',
- value: 0,
- color: '#FF8B34',
- },
- {
- name: '鍛婅鎬绘暟',
- value: 0,
- color: '#ED4882',
- },
- {
- name: '鍛婅鏈烘埧鎬绘暟',
- value: 0,
- color: '#2EEA9D',
- },
- {
- name: '鍛婅鏈烘埧鏁版瘮渚�',
- value: 0,
- color: '#F3E501',
- }
- ]
- }
- }
- },
- methods: {
- setData(data) {
- this.$nextTick(() => {
- if (data) {
- this.chart = data;
- let chart = this.$refs.circleChart;
- chart.setData(data.circle);
- chart.resize();
- } else {
- this.postData()
- setInterval(() => {
- this.postData()
- }, 3000)
- }
+import CircleChart from "@/components/charts/CircleChart";
+import {
+ batteryAlarmMonCapacity
+} from '@/assets/js/api'
+export default {
+ name: "MonCap",
+ components: {
+ CircleChart
+ },
+ data() {
+ return {
+ chart: {
+ circle: [{
+ name: '浣庡憡璀︽暟閲�',
+ value: 0,
+ color: '#00DFFC',
+ },
+ {
+ name: '鍛婅鎬绘暟姣斾緥',
+ value: 0,
+ color: '#FF8B34',
+ },
+ {
+ name: '鍛婅鎬绘暟',
+ value: 0,
+ color: '#ED4882',
+ },
+ {
+ name: '鍛婅鏈烘埧鎬绘暟',
+ value: 0,
+ color: '#2EEA9D',
+ },
+ {
+ name: '鍛婅鏈烘埧鏁版瘮渚�',
+ value: 0,
+ color: '#F3E501',
+ }
+ ]
+ }
+ }
+ },
+ methods: {
+ toParentPage() {
+ window.parent.parent.postMessage({
+ cmd: "syncPage",
+ params: {
+ pageInfo: {
+ label: "鐢垫睜瀹炴椂鍛婅",
+ name: "batteryrTimequery",
+ src: "#/batteryrTimequery",
+ closable: true
+ },
+ }
+ }, "*");
+ },
+ setData(data) {
+ this.$nextTick(() => {
+ if (data) {
+ this.chart = data;
+ let chart = this.$refs.circleChart;
+ chart.setData(data.circle);
+ chart.resize();
+ } else {
+ this.postData()
+ setInterval(() => {
+ this.postData()
+ }, 3000)
+ }
- })
- },
- postData() {
- let userId = localStorage.getItem('userId');
- let params = {
- userId: userId
- }
- batteryAlarmMonCapacity(params).then((res) => {
- if (res.data.code == 1) {
- let optionData = {
- circle: [{
- name: '鍛婅鏁�',
- value: 10,
- color: '#00DFFC',
- },
- {
- name: '鍛婅鍗犳瘮',
- value: 10,
- color: '#FF8B34',
- },
- {
- name: '鍛婅鎬绘暟',
- value: 10,
- color: '#ED4882',
- },
- {
- name: '鍛婅鏈烘埧鏁�',
- value: 10,
- color: '#2EEA9D',
- },
- {
- name: '鍛婅鏈烘埧鍗犳瘮',
- value: 10,
- color: '#F3E501',
- }
- ]
- }
- let resData = res.data.data;
- for (let key in resData) {
- optionData.circle.map(item => {
- if (item.name == key) {
- if (typeof resData[key] == 'string') {
- item.value = Number(resData[key].split('%')[0])
- } else {
- item.value = resData[key]
- }
- }
- })
- }
- this.chart = optionData;
- let chart = this.$refs.circleChart;
- chart.setData(optionData.circle);
- chart.resize();
- }
- }).catch((err) => {
- console.log(err)
- });
- },
- resize() {
- this.$refs.circleChart.resize();
- }
- }
- }
+ })
+ },
+ postData() {
+ let userId = localStorage.getItem('userId');
+ let params = {
+ userId: userId
+ }
+ batteryAlarmMonCapacity(params).then((res) => {
+ if (res.data.code == 1) {
+ let optionData = {
+ circle: [{
+ name: '鍛婅鏁�',
+ value: 10,
+ color: '#00DFFC',
+ },
+ {
+ name: '鍛婅鍗犳瘮',
+ value: 10,
+ color: '#FF8B34',
+ },
+ {
+ name: '鍛婅鎬绘暟',
+ value: 10,
+ color: '#ED4882',
+ },
+ {
+ name: '鍛婅鏈烘埧鏁�',
+ value: 10,
+ color: '#2EEA9D',
+ },
+ {
+ name: '鍛婅鏈烘埧鍗犳瘮',
+ value: 10,
+ color: '#F3E501',
+ }
+ ]
+ }
+ let resData = res.data.data;
+ for (let key in resData) {
+ optionData.circle.map(item => {
+ if (item.name == key) {
+ if (typeof resData[key] == 'string') {
+ item.value = Number(resData[key].split('%')[0])
+ } else {
+ item.value = resData[key]
+ }
+ }
+ })
+ }
+ this.chart = optionData;
+ let chart = this.$refs.circleChart;
+ chart.setData(optionData.circle);
+ chart.resize();
+ }
+ }).catch((err) => {
+ console.log(err)
+ });
+ },
+ resize() {
+ this.$refs.circleChart.resize();
+ }
+ }
+}
</script>
<style scoped>
- .flex-box {
- display: flex;
- height: 100%;
- align-items: center;
- }
+.flex-box {
+ display: flex;
+ height: 100%;
+ align-items: center;
+}
- .flex-box-body {
- flex: 1;
- height: 100%;
- }
+.flex-box-body {
+ flex: 1;
+ height: 100%;
+}
- .flex-box-footer {
- padding: 0 8px;
- }
+.flex-box-footer {
+ padding: 0 8px;
+}
- .list-view li {
- list-style: none;
- }
+.list-view li {
+ list-style: none;
+}
- .list-view-item {
- white-space: nowrap;
- padding: 8px 0;
- }
+.list-view-item {
+ white-space: nowrap;
+ padding: 8px 0;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.1