SaaS-lib/hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue

<template>
  <div ref="graphChart" style="width: 100%; height: 80%"></div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, ref, watch } from 'vue';
  import * as echarts from 'echarts';
  import { inject } from 'vue';

  export default defineComponent({
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Graph',

    setup() {
      let data = ref<any[]>([]);
      interface PageData {
        tableList: any[];
        tableColumns: any[];
        graphList: any[];
      }
      const pageData = inject<PageData>('pageData');

      if (!pageData) {
        throw new Error('pageData is not provided');
      }
      // 监听 pageData 的变化
      watch(
        () => pageData as PageData,
        (_newValue, _oldValue) => {
          // 执行你的逻辑代码
          draw();
        },
        { deep: true },
      );
      const graphChart = ref(null);
      let chartInstance: echarts.ECharts | null = null;

      const draw = () => {
        data.value = pageData.graphList;
        if (chartInstance) {
          chartInstance.dispose();
        }
        chartInstance = echarts.init(graphChart.value);

        var seriesList = [];
        var date = [];
        var legendList: string | any[] = [];
        for (let i = 0; i < data.value.length; i++) {
          date.push(data.value[i].date);

          for (let j = 0; j < data.value[i].data.length; j++) {
            if (seriesList.length < j + 1) {
              seriesList.push({
                name: data.value[i].data[j].name,
                data: [data.value[i].data[j].value],
                type: 'line',
                smooth: true,
              });
            } else {
              seriesList[j].data.push(data.value[i].data[j].value);
            }
            if (legendList.length == 0 || legendList.length < j + 1) {
              legendList.push(data.value[i].data[j].name);
            }
          }
        }
        const option = {
          legend: {
            data: legendList,
            orient: 'horizontal',
            bottom: 30,
          },
          tooltip: {
            trigger: 'axis',
            formatter: (params: any) => {
              const date = params[0].name;
              const values = params
                .map((param: any) => {
                  const unit = data.value.find((d) => d.date === date)?.unit || '';
                  return `<tr>
                          <td>${param.marker}${param.seriesName}</td>
                          <td style="text-align: right;">${param.value} ${unit}</td>
                        </tr>`;
                })
                .join('');
              return `<div>${date}</div><table style="width: 100%;">${values}</table>`;
            },
          },
          xAxis: {
            type: 'category',
            data: date,
          },
          yAxis: {
            type: 'value',
          },
          dataZoom: [
            {
              height: 10,
              start: 0,
              end: 100,
              handleSize: '300%', // 设置滑块的大小
              bottom: 15,
            },
          ],
          series: seriesList,
        };

        chartInstance = echarts.init(graphChart.value);
        chartInstance.setOption(option);
      };
      onMounted(() => {
        draw();
      });
      // 下载图表
      const downloadChart = () => {
        if (chartInstance) {
          const base64 = chartInstance.getDataURL({
            type: 'png',
            backgroundColor: '#fff',
          });
          const link = document.createElement('a');
          link.href = base64;
          link.download = 'chart.png';
          link.click();
        }
      };

      return {
        draw,
        graphChart,
        downloadChart,
      };
    },
  });
</script>
<style lang="less" scoped></style>