From 9e5a6ba53e76ea90c126640e121ef530d54c8e98 Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Mon, 15 Nov 2021 23:37:01 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=A4=9A=E8=BD=B4=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E4=BF=AE=E6=94=B9,=E6=9C=AA=E5=AE=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../statistical/stastistical-chart.vue        |  34 ++-
 src/utils/statistical.js                      | 220 ++++++++++--------
 src/views/statistical-report.vue              |   7 +-
 3 files changed, 150 insertions(+), 111 deletions(-)

diff --git a/src/components/statistical/stastistical-chart.vue b/src/components/statistical/stastistical-chart.vue
index b62596c..47096de 100644
--- a/src/components/statistical/stastistical-chart.vue
+++ b/src/components/statistical/stastistical-chart.vue
@@ -6,8 +6,9 @@
 </template>
 
 <script setup>
-import { defineExpose, defineProps, onMounted, ref } from 'vue';
-import { generateChartOption } from 'utils/statistical';
+import { computed, defineExpose, defineProps, onMounted, ref, watchEffect } from 'vue';
+import { useStore } from 'vuex';
+import { generateChartOption, generateDefaultYAxis, generateYAxis } from 'utils/statistical';
 import * as echarts from 'echarts/core';
 import { DataZoomComponent, GridComponent, LegendComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
 import { LineChart } from 'echarts/charts';
@@ -25,30 +26,41 @@ echarts.use([
   DataZoomComponent,
 ]);
 
+const store = useStore();
 const props = defineProps({ searchHeight: Number });
-
-const show = ref(false);
+const realtimeData = computed(() => store.state.statistics.realtimeData);
+const isMounted = ref(false);
 const noData = ref(true);
 let myChart = null;
 
 // 设置图表
 onMounted(() => {
-  show.value = true;
-  initChart();
+  isMounted.value = true;
+});
+
+watchEffect(() => {
+  if (!realtimeData.value) return;
+  const { data } = realtimeData.value;
+  if (!data || !data.length || !isMounted.value) return;
+  initChart(data);
 });
 
 // 初始化chart
-function initChart() {
+function initChart(data) {
   const chartDom = document.getElementById('realtimeContainer');
   const canvasHeight = document.documentElement.clientHeight - props.searchHeight - 150;
-  console.log(canvasHeight, document.documentElement.clientHeight, props.searchHeight);
   chartDom.style.height = `${canvasHeight}px`;
   myChart && myChart.dispose();
   myChart = echarts.init(chartDom);
+  render(data, generateDefaultYAxis());
+
+  myChart.on('legendselectchanged', event => {
+    render(data, generateYAxis(event.selected));
+  });
 }
 
-function render(data) {
-  myChart && myChart.clear();
+function render(data, yAxis) {
+  // myChart && myChart.clear();
   if (!data || !data.length) {
     noData.value = true;
     return;
@@ -58,7 +70,7 @@ function render(data) {
   if (!myChart) {
     initChart();
   }
-  const option = generateChartOption(data);
+  const option = generateChartOption(data, yAxis);
   option && myChart.setOption(option);
 }
 
diff --git a/src/utils/statistical.js b/src/utils/statistical.js
index 810f7b1..5100e66 100644
--- a/src/utils/statistical.js
+++ b/src/utils/statistical.js
@@ -43,13 +43,136 @@ function generateParams(data) {
   return result;
 }
 
+const yAxisData = [
+  {
+    type: 'value',
+    name: 'SO2(ppb)',
+    position: 'left',
+    axisLine: {
+      show: true,
+      lineStyle: { color: colors[0] },
+    },
+    axisLabel: { formatter: '{value}ppb' },
+  },
+  {
+    type: 'value',
+    name: '盐分阻抗(Ω)',
+    // min: 0,
+    // max: 250,
+    position: 'left',
+    offset: 70,
+    axisLine: {
+      show: true,
+      lineStyle: { color: colors[1] },
+    },
+    axisLabel: { formatter: '{value}Ω' },
+  },
+  {
+    type: 'value',
+    name: '环温(℃)',
+    // min: 0,
+    // max: 25,
+    position: 'left',
+    offset: 135,
+    axisLine: {
+      show: true,
+      lineStyle: { color: colors[2] },
+    },
+    axisLabel: { formatter: '{value}°C' },
+  },
+  {
+    type: 'value',
+    name: '环湿(RH%)',
+    // min: 0,
+    // max: 25,
+    position: 'left',
+    offset: 200,
+    axisLine: {
+      show: true,
+      lineStyle: { color: colors[3] },
+    },
+    axisLabel: { formatter: '{value}RH%' },
+  },
+  {
+    type: 'value',
+    name: '锌腐蚀电流(nA)',
+    position: 'right',
+    axisLine: {
+      show: true,
+      lineStyle: { color: colors[4] },
+    },
+    axisLabel: { formatter: '{value}' },
+  },
+  {
+    type: 'value',
+    name: '铜腐蚀电流(nA)',
+    offset: 100,
+    position: 'right',
+    axisLine: {
+      show: true,
+      lineStyle: { color: colors[5] },
+    },
+    axisLabel: { formatter: '{value}' },
+  },
+  {
+    type: 'value',
+    name: '铝腐蚀电流(nA)',
+    offset: 200,
+    position: 'right',
+    axisLine: {
+      show: true,
+      lineStyle: { color: colors[6] },
+    },
+    axisLabel: { formatter: '{value}' },
+  },
+  {
+    type: 'value',
+    name: '钢腐蚀电流(nA)',
+    offset: 300,
+    position: 'right',
+    axisLine: {
+      show: true,
+      lineStyle: { color: colors[7] },
+    },
+    axisLabel: { formatter: '{value}' },
+  },
+];
+
+/**
+ * 生产y轴内容
+ * @param {Object} selectedLegend
+ * @returns {({axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string})[]}
+ */
+export function generateYAxis(selectedLegend) {
+  console.log(selectedLegend);
+  return yAxisData.filter(item => selectedLegend[item.name]);
+}
+
+/**
+ * 生成初始状态的y轴
+ * @returns {({axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string})[]}
+ */
+export function generateDefaultYAxis() {
+  const selectedLegend = [
+    {
+      '钢腐蚀电流(nA)': true,
+      '铜腐蚀电流(nA)': true,
+      '铝腐蚀电流(nA)': true,
+      '锌腐蚀电流(nA)': true,
+    },
+  ];
+  return yAxisData.filter(item => selectedLegend.find(selected => selected[item.name]));
+}
+
 /**
  * 生成chart参数
  * @param {Object[]} rawData 返回段返回的data数据
+ * @param {Object[]} yAxis
  * @returns {{yAxis: [{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},null,null,null], xAxis: [{data: *[], axisTick: {alignWithLabel: boolean}, type: string}], color: string[], grid: {right: string}, legend: {data: string[]}, series: [{data: *[], name: string, type: string},{data: *[], name: string, type: string, yAxisIndex: number},{data: *[], name: string, type: string, yAxisIndex: number},{data: *[], name: string, type: string, yAxisIndex: number},{data: *[], name: string, type: string, yAxisIndex: number},null,null,null], tooltip: {axisPointer: {type: string}, trigger: string}, toolbox: {feature: {saveAsImage: {show: boolean}, restore: {show: boolean}, dataView: {show: boolean, readOnly: boolean}}}}}
  */
 // eslint-disable-next-line import/prefer-default-export
-export function generateChartOption(rawData) {
+export function generateChartOption(rawData, yAxis) {
+  console.log(yAxis);
   const data = generateParams(rawData);
   const option = {
     color: colors,
@@ -72,100 +195,7 @@ export function generateChartOption(rawData) {
         data: data.time,
       },
     ],
-    yAxis: [
-      {
-        type: 'value',
-        name: 'SO2(ppb)',
-        position: 'left',
-        axisLine: {
-          show: true,
-          lineStyle: { color: colors[0] },
-        },
-        axisLabel: { formatter: '{value}ppb' },
-      },
-      {
-        type: 'value',
-        name: '盐分阻抗(Ω)',
-        // min: 0,
-        // max: 250,
-        position: 'left',
-        offset: 70,
-        axisLine: {
-          show: true,
-          lineStyle: { color: colors[1] },
-        },
-        axisLabel: { formatter: '{value}Ω' },
-      },
-      {
-        type: 'value',
-        name: '环温(℃)',
-        // min: 0,
-        // max: 25,
-        position: 'left',
-        offset: 135,
-        axisLine: {
-          show: true,
-          lineStyle: { color: colors[2] },
-        },
-        axisLabel: { formatter: '{value}°C' },
-      },
-      {
-        type: 'value',
-        name: '环湿(RH%)',
-        // min: 0,
-        // max: 25,
-        position: 'left',
-        offset: 200,
-        axisLine: {
-          show: true,
-          lineStyle: { color: colors[3] },
-        },
-        axisLabel: { formatter: '{value}RH%' },
-      },
-      {
-        type: 'value',
-        name: '锌腐蚀电流(nA)',
-        position: 'right',
-        axisLine: {
-          show: true,
-          lineStyle: { color: colors[4] },
-        },
-        axisLabel: { formatter: '{value}' },
-      },
-      {
-        type: 'value',
-        name: '铜腐蚀电流(nA)',
-        offset: 100,
-        position: 'right',
-        axisLine: {
-          show: true,
-          lineStyle: { color: colors[5] },
-        },
-        axisLabel: { formatter: '{value}' },
-      },
-      {
-        type: 'value',
-        name: '铝腐蚀电流(nA)',
-        offset: 200,
-        position: 'right',
-        axisLine: {
-          show: true,
-          lineStyle: { color: colors[6] },
-        },
-        axisLabel: { formatter: '{value}' },
-      },
-      {
-        type: 'value',
-        name: '钢腐蚀电流(nA)',
-        offset: 300,
-        position: 'right',
-        axisLine: {
-          show: true,
-          lineStyle: { color: colors[7] },
-        },
-        axisLabel: { formatter: '{value}' },
-      },
-    ],
+    yAxis: yAxisData,
     series: [
       {
         name: 'SO2(ppb)',
diff --git a/src/views/statistical-report.vue b/src/views/statistical-report.vue
index 1333847..0f9be7c 100644
--- a/src/views/statistical-report.vue
+++ b/src/views/statistical-report.vue
@@ -1,6 +1,6 @@
 <template>
   <SearchBar ref="searchBar" :loading-search="loadingSearch" @search="onSearch" />
-  <HistoryData ref="childRef" :search-height="searchHeight" class="mt-4" />
+  <HistoryData :search-height="searchHeight" class="mt-4" />
 </template>
 
 <script setup>
@@ -9,13 +9,10 @@ import HistoryData from 'components/statistical/stastistical-chart.vue';
 import { computed, onMounted, ref } from 'vue';
 import { useStore } from 'vuex';
 
-const childRef = ref(null);
 const searchBar = ref(null);
-
 let timer = null;
 const store = useStore();
 const token = computed(() => store.getters['user/token']);
-const realtimeData = computed(() => store.state.statistics.realtimeData);
 const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
 const search = ref({});
 const loadingSearch = ref(false);
@@ -37,6 +34,7 @@ onMounted(() => {
 const getData = async () => {
   try {
     if (token && token.value) {
+      if (!currentDeviceId.value) return;
       loadingSearch.value = true;
       const options = { ...search.value };
       const date = options && options.date ? options.date : [];
@@ -48,7 +46,6 @@ const getData = async () => {
       await store.dispatch('statistics/getRealtimeData', params);
       timer && clearTimeout(timer);
       timer = null;
-      childRef.value.render(realtimeData.value.data);
       loadingSearch.value = false;
     } else {
       loadingSearch.value = false;