From afd3fe35aeaae4f3984c94ca29d57b5a3a52107f Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期二, 15 十月 2024 10:24:39 +0800
Subject: [PATCH] websocket接口对接
---
src/views/visualization/leftMenu.vue | 114 +++++++++++----------------------------------------------
1 files changed, 22 insertions(+), 92 deletions(-)
diff --git a/src/views/visualization/leftMenu.vue b/src/views/visualization/leftMenu.vue
index 8c3d8c2..893577c 100644
--- a/src/views/visualization/leftMenu.vue
+++ b/src/views/visualization/leftMenu.vue
@@ -1,120 +1,53 @@
<template>
<div class="leftMnu">
<div class="menuBox">
- <div class="aside-title">{{ title.t1 }}</div>
- <div class="echartBox">
- <div id="letftEchart1" class="chartBox"></div>
- </div>
+ <chart-vue></chart-vue>
</div>
<div class="menuBox">
- <div class="aside-title">{{ title.t2 }}</div>
+ <chart-vue1></chart-vue1>
</div>
<div class="menuBox">
- <div class="aside-title">{{ title.t3 }}</div>
+ <chart-vue2></chart-vue2>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
+import chartVue from './list/chart.vue';
+import chartVue1 from './list/chart1.vue';
+import chartVue2 from './list/chart2.vue';
+import data from './data.js';
export default {
+ components: {
+ chartVue, chartVue1, chartVue2
+ },
props: {
leftChartData: {
type: Object,
required: true
},
},
+ computed: {
+
+ },
data() {
return {
- title: {
- t1: 'xxx',
- t2: 'XXXX',
- t3: 'xxxxx'
- },
- myLeftChart1: null,
- leftChartOption: {
- lenData: [],
- xData: [],
- serData: [],
- },
+ childData: null,
+ childData1: null,
+ childData2: null,
}
},
watch: {
- leftChartData: {
- deep: true,
- handler(res) {
- if (res) {
- if (res.type == "left1") {
- this.setLeftChart1(res.val)
- }
- }
- }
- }
+ },
+
+ mounted() {
+ window.regionWeather = null;
+
},
methods: {
- setLeftChart1(res) {
- console.log(res);
-
- if (!this.myLeftChart1) {
- this.myLeftChart1 = echarts.init(document.getElementById('letftEchart1'));
- }
- if (this.leftChartOption.lenData.length == 0) {
- this.title.t1 = res.head[1]
- this.leftChartOption.lenData.push(res.head[0])
- const colors=['#67C23A','#E6A23C','#F56C6C']
- for (var i = 0; i < 3; i++) {
- this.leftChartOption.serData.push({
- name: res.head[i+1],
- type: 'line',
- stack: 'Total',
- data: [],
- lineStyle: {
- color: colors[i], // 鎶樼嚎棰滆壊
-
- }
- })
- }
- }
- var option = this.getChartOption(res)
- this.myLeftChart1 && this.myLeftChart1.setOption(option);
- },
- getChartOption(res) {
- for(var i = 0;i<3;i++){
- this.leftChartOption.serData[i].data.push(res.data[i+1])
- }
-
-
- this.leftChartOption.xData.push(res.data[0])
- return {
- legend: {
- show: false
- },
-
- tooltip: {
- trigger: 'axis'
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: this.leftChartOption.xData,
- axisLine: {
- lineStyle: {
- color: 'white' // 璁剧疆涓虹孩鑹�
- }
- }
- },
- yAxis: {
- type: 'value',
- axisLine: {
- lineStyle: {
- color: 'white' // 璁剧疆涓虹孩鑹�
- }
- }
- },
- series: this.leftChartOption.serData
- }
- }
+
}
}
</script>
@@ -126,7 +59,6 @@
display: flex;
flex-direction: column;
justify-content: space-between;
-
.menuBox {
width: 100%;
height: 33%;
@@ -139,7 +71,6 @@
.aside-title {
box-sizing: border-box;
padding-left: 30px;
-
font-size: 15px;
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
color: #fff;
@@ -159,7 +90,6 @@
.chartBox {
width: calc(100% - 10px);
height: calc(100% - 10px);
-
position: absolute;
}
}
--
Gitblit v1.9.3