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/abeamProChart.vue | 471 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 242 insertions(+), 229 deletions(-)
diff --git a/src/components/charts/abeamProChart.vue b/src/components/charts/abeamProChart.vue
index 313650d..e1a1fc8 100644
--- a/src/components/charts/abeamProChart.vue
+++ b/src/components/charts/abeamProChart.vue
@@ -1,241 +1,254 @@
<template>
- <div class="flexCon">
- <div class="con">
- <div class="echarts-wrapper">
- <div class="echarts-content" ref="chart">
+ <div class="flexCon" @click="toParentPage">
+ <div class="con">
+ <div class="echarts-wrapper">
+ <div class="echarts-content" ref="chart">
- </div>
- </div>
- </div>
- </div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script>
- import * as echarts from 'echarts';
- //寮曞叆chart瀛椾綋鑷�傚簲
- import {
- chartFontsize
- } from '@/assets/js/chartFontsize'
- import {
- batteryStatus
- } from '@/assets/js/api'
- export default {
- name: "abeamProChart",
- chart: "",
- chartData: {},
- props: {
- id: {
- require: true,
- type: String,
- default: "",
- },
- },
- data() {
- return {
+import * as echarts from 'echarts';
+//寮曞叆chart瀛椾綋鑷�傚簲
+import {
+ chartFontsize
+} from '@/assets/js/chartFontsize'
+import {
+ batteryStatus
+} from '@/assets/js/api'
+export default {
+ name: "abeamProChart",
+ chart: "",
+ chartData: {},
+ props: {
+ id: {
+ require: true,
+ type: String,
+ default: "",
+ },
+ },
+ data() {
+ return {
- }
- },
- methods: {
- setOption(opt) {
- this.$options.chart.setOption(opt);
- },
- organizeData(posData) {
- let dataColor = posData.color;
- let bgColor = posData.bgColor;
- let yData = posData.yData;
- let radius = (this.$refs.chart.clientHeight / 4 - 7) > 0 ? this.$refs.chart.clientHeight / 4 - 7 : 0;
- let data = posData.data;
- let max = posData[0];
- data.map(item => {
- if (item > max) {
- max = item;
- }
- });
- max = max - (max % 10) + 20;
- let maxData = []
- data.map(() => {
- maxData.push(max)
- });
- let option = {
- grid: {
- left: '2%',
- right: '5%',
- bottom: '0',
- top: '0',
- containLabel: true
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'none'
- },
- formatter: function (params) {
- return params[0].name + ' : ' + params[0].value
- }
- },
- xAxis: {
- type: 'value',
- axisLabel: {
- show: true,
- color: '#fff',
- fontSize: chartFontsize(14),
- },
- splitLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLine: {
- show: false
- },
- },
- yAxis: [{
- type: 'category',
- inverse: true,
- axisLabel: {
- show: true,
- color: '#fff',
- fontSize: chartFontsize(14),
- },
- splitLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLine: {
- show: false
- },
- data: yData
- }],
- series: [{
- name: '閲戦',
- type: 'bar',
- zlevel: 1,
- itemStyle: {
- color: function (params) {
- return dataColor[params.dataIndex];
- },
- borderRadius: [0, radius, radius, 0],
- },
- barWidth: radius,
- barCategoryGap: "0%",
- data: data
- },
- {
- "name": "",
- type: 'pictorialBar',
- barCategoryGap: "0%",
- symbolPosition: 'end',
- symbolSize: [radius, radius],
- zlevel: 2,
- tooltip: {
- show: false
- },
- label: {
- show: true,
- position: 'insideRight',
- fontSize: chartFontsize(18),
- color: '#021750'
- },
- itemStyle: {
- color: function (params) {
- return dataColor[params.dataIndex];
- },
- shadowColor: 'rgba(0, 0, 0, 0.5)',
- shadowBlur: 10,
- shadowOffsetX: -2
- },
- color: "#26B2E8",
- data: data
- },
- {
- name: '鑳屾櫙',
- type: 'bar',
- barCategoryGap: "0%",
- barGap: '-100%',
- barWidth: radius,
- data: maxData,
- itemStyle: {
- color: function (params) {
- return bgColor[params.dataIndex];
- },
- },
- },
- ]
- };
- // 璁剧疆閰嶇疆椤�
- this.setOption(option);
- },
- setData(sendData) {
- if (sendData) {
- this.$options.chartData = sendData;
- this.organizeData(sendData)
- } else {
- this.postData()
- setInterval(() => {
- this.postData()
- }, 3000)
- }
- },
- postData() {
- 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();
- if (JSON.stringify(this.$options.chartData) != '{}') {
- this.setData(this.$options.chartData);
- }
- }, 300)
- }
- },
- mounted() {
- // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
- this.$options.chart = echarts.init(this.$refs.chart);
+ }
+ },
+ methods: {
+ toParentPage() {
+ window.parent.parent.postMessage({
+ cmd: "syncPage",
+ params: {
+ pageInfo: {
+ label: "鐢垫睜瀹炴椂鍛婅",
+ name: "batteryrTimequery",
+ src: "#/batteryrTimequery",
+ closable: true
+ },
+ }
+ }, "*");
+ },
+ setOption(opt) {
+ this.$options.chart.setOption(opt);
+ },
+ organizeData(posData) {
+ let dataColor = posData.color;
+ let bgColor = posData.bgColor;
+ let yData = posData.yData;
+ let radius = (this.$refs.chart.clientHeight / 4 - 7) > 0 ? this.$refs.chart.clientHeight / 4 - 7 : 0;
+ let data = posData.data;
+ let max = posData[0];
+ data.map(item => {
+ if (item > max) {
+ max = item;
+ }
+ });
+ max = max - (max % 10) + 20;
+ let maxData = []
+ data.map(() => {
+ maxData.push(max)
+ });
+ let option = {
+ grid: {
+ left: '2%',
+ right: '5%',
+ bottom: '0',
+ top: '0',
+ containLabel: true
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'none'
+ },
+ formatter: function (params) {
+ return params[0].name + ' : ' + params[0].value
+ }
+ },
+ xAxis: {
+ type: 'value',
+ axisLabel: {
+ show: true,
+ color: '#fff',
+ fontSize: chartFontsize(14),
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ },
+ yAxis: [{
+ type: 'category',
+ inverse: true,
+ axisLabel: {
+ show: true,
+ color: '#fff',
+ fontSize: chartFontsize(14),
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ data: yData
+ }],
+ series: [{
+ name: '閲戦',
+ type: 'bar',
+ zlevel: 1,
+ itemStyle: {
+ color: function (params) {
+ return dataColor[params.dataIndex];
+ },
+ borderRadius: [0, radius, radius, 0],
+ },
+ barWidth: radius,
+ barCategoryGap: "0%",
+ data: data
+ },
+ {
+ "name": "",
+ type: 'pictorialBar',
+ barCategoryGap: "0%",
+ symbolPosition: 'end',
+ symbolSize: [radius, radius],
+ zlevel: 2,
+ tooltip: {
+ show: false
+ },
+ label: {
+ show: true,
+ position: 'insideRight',
+ fontSize: chartFontsize(18),
+ color: '#021750'
+ },
+ itemStyle: {
+ color: function (params) {
+ return dataColor[params.dataIndex];
+ },
+ shadowColor: 'rgba(0, 0, 0, 0.5)',
+ shadowBlur: 10,
+ shadowOffsetX: -2
+ },
+ color: "#26B2E8",
+ data: data
+ },
+ {
+ name: '鑳屾櫙',
+ type: 'bar',
+ barCategoryGap: "0%",
+ barGap: '-100%',
+ barWidth: radius,
+ data: maxData,
+ itemStyle: {
+ color: function (params) {
+ return bgColor[params.dataIndex];
+ },
+ },
+ },
+ ]
+ };
+ // 璁剧疆閰嶇疆椤�
+ this.setOption(option);
+ },
+ setData(sendData) {
+ if (sendData) {
+ this.$options.chartData = sendData;
+ this.organizeData(sendData)
+ } else {
+ this.postData()
+ setInterval(() => {
+ this.postData()
+ }, 3000)
+ }
+ },
+ postData() {
+ 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();
+ if (JSON.stringify(this.$options.chartData) != '{}') {
+ this.setData(this.$options.chartData);
+ }
+ }, 300)
+ }
+ },
+ mounted() {
+ // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
+ this.$options.chart = echarts.init(this.$refs.chart);
- window.addEventListener('resize', this.resize);
- },
- destroyed() {
- window.removeEventListener('resize', this.resize);
- }
- }
+ window.addEventListener('resize', this.resize);
+ },
+ destroyed() {
+ window.removeEventListener('resize', this.resize);
+ }
+}
</script>
<style scoped>
- .flexCon {
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- }
+.flexCon {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
- .flexCon .con {
- width: 100%;
- height: 80%;
- }
+.flexCon .con {
+ width: 100%;
+ height: 80%;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.1