From 60c2eef8ed86d69c6fc8500991db7fd97046487a Mon Sep 17 00:00:00 2001
From: wangdan <dan.wang@fit2cloud.com>
Date: Wed, 8 Mar 2023 10:43:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B0=81=E8=A3=85echart=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=B9=8Bline=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components.d.ts                      |   2 +
 .../components/v-charts/components/Line.vue   | 152 ++++++++
 frontend/src/components/v-charts/index.vue    |  23 ++
 frontend/src/views/home/index.vue             | 359 ++++++++++--------
 frontend/vite.config.ts                       |   2 +-
 5 files changed, 379 insertions(+), 159 deletions(-)
 create mode 100644 frontend/src/components/v-charts/components/Line.vue
 create mode 100644 frontend/src/components/v-charts/index.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index ef05b9b18..3889f0344 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -75,6 +75,7 @@ declare module 'vue' {
     Footer: typeof import('./src/components/app-layout/footer/index.vue')['default']
     Group: typeof import('./src/components/group/index.vue')['default']
     InfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll']
+    Line: typeof import('./src/components/v-charts/components/Line.vue')['default']
     Loading: typeof import('element-plus/es')['ElLoadingDirective']
     Logo: typeof import('./src/components/app-layout/menu/components/Logo.vue')['default']
     Menu: typeof import('./src/components/app-layout/menu/index.vue')['default']
@@ -85,6 +86,7 @@ declare module 'vue' {
     SvgIcon: typeof import('./src/components/svg-icon/svg-icon.vue')['default']
     TableSetting: typeof import('./src/components/table-setting/index.vue')['default']
     Upload: typeof import('./src/components/upload/index.vue')['default']
+    VCharts: typeof import('./src/components/v-charts/index.vue')['default']
   }
 }
 
diff --git a/frontend/src/components/v-charts/components/Line.vue b/frontend/src/components/v-charts/components/Line.vue
new file mode 100644
index 000000000..0e472613b
--- /dev/null
+++ b/frontend/src/components/v-charts/components/Line.vue
@@ -0,0 +1,152 @@
+<template>
+    <div :id="id" class="v-charts" ref="chartRef" :style="{ height: height, width: width }" />
+</template>
+<script lang="ts" setup>
+import { onMounted, onUnmounted, nextTick, watch } from 'vue';
+import * as echarts from 'echarts';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
+const props = defineProps({
+    id: {
+        type: String,
+        default: 'VChartsId',
+    },
+    width: {
+        type: String,
+        default: '100%',
+    },
+    height: {
+        type: String,
+        default: '200px',
+    },
+    type: {
+        type: String,
+        default: 'line',
+    },
+    option: {
+        type: Object,
+        required: true,
+    }, // option: { title , xDatas, yDatas, formatStr }
+});
+
+function initChart() {
+    let itemChart = echarts?.getInstanceByDom(document.getElementById(props.id) as HTMLElement);
+    // 如果不存在，就进行初始化
+    if (itemChart == null) {
+        itemChart = echarts.init(document.getElementById(props.id) as HTMLElement);
+    }
+
+    const theme = globalStore.$state.themeConfig.theme || 'light';
+    // 把配置和数据放这里
+    const option = {
+        title: [
+            {
+                left: 'center',
+                text: props.option.title,
+                show: false,
+            },
+        ],
+        zlevel: 1,
+        z: 1,
+        tooltip: {
+            trigger: 'axis',
+            formatter: function (datas: any) {
+                let res = datas[0].name + '<br/>';
+                for (const item of datas) {
+                    res += item.marker + ' ' + item.seriesName + '：' + item.data + props.option.formatStr + '<br/>';
+                }
+                return res;
+            },
+        },
+        grid: { left: '7%', right: '7%', bottom: '20%' },
+        legend: {
+            data: [props.option?.yDatas[0]?.name, props.option?.yDatas[1]?.name],
+            right: 10,
+            itemWidth: 8,
+            textStyle: {
+                color: '#646A73',
+            },
+            icon: 'circle',
+        },
+        xAxis: { data: props.option.xDatas, boundaryGap: false },
+        yAxis: {
+            name: '( ' + props.option.formatStr + ' )',
+            splitLine: {
+                //分隔辅助线
+                lineStyle: {
+                    type: 'dashed', //线的类型 虚线0
+                    opacity: theme === 'dark' ? 0.1 : 1, //透明度
+                },
+            },
+        },
+        series: [
+            {
+                name: props.option?.yDatas[0]?.name,
+                type: 'line',
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: 'rgba(0, 94, 235, .5)',
+                        },
+                        {
+                            offset: 1,
+                            color: 'rgba(0, 94, 235, 0)',
+                        },
+                    ]),
+                },
+                data: props.option?.yDatas[0]?.data,
+                showSymbol: false,
+            },
+            {
+                name: props.option?.yDatas[1]?.name,
+                type: 'line',
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: 'rgba(27, 143, 60, .5)',
+                        },
+                        {
+                            offset: 1,
+                            color: 'rgba(27, 143, 60, 0)',
+                        },
+                    ]),
+                },
+                data: props.option?.yDatas[1]?.data,
+                showSymbol: false,
+            },
+        ],
+        dataZoom: [{ startValue: props?.option.xDatas[0] }],
+    };
+    // 渲染数据
+    itemChart.setOption(option, true);
+
+    window.onresize = function () {
+        //自适应大小
+        itemChart.resize();
+    };
+}
+
+watch(
+    () => props.option,
+    (val) => {
+        if (val) {
+            nextTick(() => {
+                initChart();
+            });
+        }
+    },
+);
+
+onMounted(() => {
+    nextTick(() => {
+        initChart();
+    });
+});
+
+onUnmounted(() => {
+    echarts.dispose;
+});
+</script>
+<style lang="scss" scoped></style>
diff --git a/frontend/src/components/v-charts/index.vue b/frontend/src/components/v-charts/index.vue
new file mode 100644
index 000000000..49adefb54
--- /dev/null
+++ b/frontend/src/components/v-charts/index.vue
@@ -0,0 +1,23 @@
+<template>
+    <component :is="typeComponentMap[type]" :height="height" :option="option" />
+</template>
+<script lang="ts" setup>
+import line from './components/Line.vue';
+defineOptions({ name: 'VCharts' });
+defineProps({
+    type: {
+        type: String,
+        default: 'line',
+    },
+    height: {
+        type: String,
+        default: '200px',
+    },
+    option: {
+        type: Object,
+        required: true,
+    }, // { title , xDatas, yDatas, formatStr  }
+});
+
+const typeComponentMap = { line };
+</script>
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index 70e3f7590..4f6c5dfaa 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -106,16 +106,23 @@
                                 </el-tag>
                                 <el-tag>{{ $t('home.rwPerSecond') }}: {{ currentInfo.ioTime }} ms</el-tag>
                             </div>
-                            <div
-                                v-if="chartOption === 'io'"
-                                id="ioChart"
-                                style="margin-top: 40px; width: 100%; height: 300px"
-                            ></div>
-                            <div
-                                v-if="chartOption === 'network'"
-                                id="networkChart"
-                                style="margin-top: 40px; width: 100%; height: 300px"
-                            ></div>
+
+                            <div v-if="chartOption === 'io'" style="margin-top: 40px">
+                                <v-charts
+                                    height="300px"
+                                    id="ioChart"
+                                    :option="chartsOption['ioChart']"
+                                    v-if="chartsOption['ioChart']"
+                                />
+                            </div>
+                            <div v-if="chartOption === 'network'" style="margin-top: 40px">
+                                <v-charts
+                                    height="300px"
+                                    id="networkChart"
+                                    :option="chartsOption['networkChart']"
+                                    v-if="chartsOption['networkChart']"
+                                />
+                            </div>
                         </div>
                     </template>
                 </CardWithHeader>
@@ -188,9 +195,10 @@
 
 <script lang="ts" setup>
 import { onMounted, onBeforeUnmount, ref, reactive } from 'vue';
-import * as echarts from 'echarts';
+// import * as echarts from 'echarts';
 import Status from '@/views/home/status/index.vue';
 import App from '@/views/home/app/index.vue';
+import VCharts from '@/components/v-charts/index.vue';
 import CardWithHeader from '@/components/card-with-header/index.vue';
 import i18n from '@/lang';
 import { Dashboard } from '@/api/interface/dashboard';
@@ -199,8 +207,8 @@ import { useRouter } from 'vue-router';
 import RouterButton from '@/components/router-button/index.vue';
 import { loadBaseInfo, loadCurrentInfo } from '@/api/modules/dashboard';
 import { getIOOptions, getNetworkOptions } from '@/api/modules/monitor';
-import { GlobalStore } from '@/store';
-const globalStore = GlobalStore();
+// import { GlobalStore } from '@/store';
+// const globalStore = GlobalStore();
 const router = useRouter();
 
 const statuRef = ref();
@@ -300,6 +308,8 @@ const currentChartInfo = reactive({
     netBytesRecv: 0,
 });
 
+const chartsOption = ref({ ioChart1: null, networkChart: null });
+
 const changeOption = async () => {
     isInit.value = true;
     loadData();
@@ -338,7 +348,7 @@ const onLoadBaseInfo = async (isInit: boolean, range: string) => {
     statuRef.value.acceptParams(currentInfo.value, baseInfo.value);
     appRef.value.acceptParams(baseInfo.value);
     if (isInit) {
-        window.addEventListener('resize', changeChartSize);
+        // window.addEventListener('resize', changeChartSize);
         timer = setInterval(async () => {
             onLoadCurrentInfo();
         }, 3000);
@@ -436,160 +446,193 @@ function loadUpTime(uptime: number) {
 
 const loadData = async () => {
     if (chartOption.value === 'io') {
-        let ioReadYDatas = {
-            name: i18n.global.t('monitor.read'),
-            type: 'line',
-            areaStyle: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                        offset: 0,
-                        color: 'rgba(27, 143, 60, 1)',
-                    },
-                    {
-                        offset: 1,
-                        color: 'rgba(27, 143, 60, 0)',
-                    },
-                ]),
+        const yDatas = [
+            {
+                name: i18n.global.t('monitor.read'),
+                data: ioReadBytes.value,
             },
-            data: ioReadBytes.value,
-            showSymbol: false,
-        };
-        let ioWriteYDatas = {
-            name: i18n.global.t('monitor.write'),
-            type: 'line',
-            areaStyle: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                        offset: 0,
-                        color: 'rgba(0, 94, 235, 1)',
-                    },
-                    {
-                        offset: 1,
-                        color: 'rgba(0, 94, 235, 0)',
-                    },
-                ]),
+            {
+                name: i18n.global.t('monitor.write'),
+                data: ioWriteBytes.value,
             },
-            data: ioWriteBytes.value,
-            showSymbol: false,
+        ];
+        chartsOption.value['ioChart'] = {
+            title: i18n.global.t('home.io'),
+            xDatas: timeIODatas.value,
+            yDatas: yDatas,
+            formatStr: 'MB',
         };
-        freshChart(
-            'ioChart',
-            [i18n.global.t('monitor.read'), i18n.global.t('monitor.write')],
-            timeIODatas.value,
-            [ioReadYDatas, ioWriteYDatas],
-            i18n.global.t('home.io'),
-            'MB',
-        );
+
+        // let ioReadYDatas = {
+        //     name: i18n.global.t('monitor.read'),
+        //     type: 'line',
+        //     areaStyle: {
+        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //             {
+        //                 offset: 0,
+        //                 color: 'rgba(27, 143, 60, 1)',
+        //             },
+        //             {
+        //                 offset: 1,
+        //                 color: 'rgba(27, 143, 60, 0)',
+        //             },
+        //         ]),
+        //     },
+        //     data: ioReadBytes.value,
+        //     showSymbol: false,
+        // };
+        // let ioWriteYDatas = {
+        //     name: i18n.global.t('monitor.write'),
+        //     type: 'line',
+        //     areaStyle: {
+        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //             {
+        //                 offset: 0,
+        //                 color: 'rgba(0, 94, 235, 1)',
+        //             },
+        //             {
+        //                 offset: 1,
+        //                 color: 'rgba(0, 94, 235, 0)',
+        //             },
+        //         ]),
+        //     },
+        //     data: ioWriteBytes.value,
+        //     showSymbol: false,
+        // };
+        // freshChart(
+        //     'ioChart',
+        //     [i18n.global.t('monitor.read'), i18n.global.t('monitor.write')],
+        //     timeIODatas.value,
+        //     [ioReadYDatas, ioWriteYDatas],
+        //     i18n.global.t('home.io'),
+        //     'MB',
+        // );
     } else {
-        let netTxYDatas = {
-            name: i18n.global.t('monitor.up'),
-            type: 'line',
-            areaStyle: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                        offset: 0,
-                        color: 'rgba(0, 94, 235, .5)',
-                    },
-                    {
-                        offset: 1,
-                        color: 'rgba(0, 94, 235, 0)',
-                    },
-                ]),
+        const yDatas = [
+            {
+                name: i18n.global.t('monitor.up'),
+                data: netBytesRecvs.value,
             },
-            data: netBytesRecvs.value,
-            showSymbol: false,
-        };
-        let netRxYDatas = {
-            name: i18n.global.t('monitor.down'),
-            type: 'line',
-            areaStyle: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                        offset: 0,
-                        color: 'rgba(27, 143, 60, .5)',
-                    },
-                    {
-                        offset: 1,
-                        color: 'rgba(27, 143, 60, 0)',
-                    },
-                ]),
+            {
+                name: i18n.global.t('monitor.down'),
+                data: netBytesSents.value,
             },
-            data: netBytesSents.value,
-            showSymbol: false,
+        ];
+        chartsOption.value['networkChart'] = {
+            title: i18n.global.t('home.network'),
+            xDatas: timeNetDatas.value,
+            yDatas: yDatas,
+            formatStr: 'KB/s',
         };
-        freshChart(
-            'networkChart',
-            [i18n.global.t('monitor.up'), i18n.global.t('monitor.down')],
-            timeNetDatas.value,
-            [netTxYDatas, netRxYDatas],
-            i18n.global.t('home.network'),
-            'KB/s',
-        );
+        // let netTxYDatas = {
+        //     name: i18n.global.t('monitor.up'),
+        //     type: 'line',
+        //     areaStyle: {
+        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //             {
+        //                 offset: 0,
+        //                 color: 'rgba(0, 94, 235, .5)',
+        //             },
+        //             {
+        //                 offset: 1,
+        //                 color: 'rgba(0, 94, 235, 0)',
+        //             },
+        //         ]),
+        //     },
+        //     data: netBytesRecvs.value,
+        //     showSymbol: false,
+        // };
+        // let netRxYDatas = {
+        //     name: i18n.global.t('monitor.down'),
+        //     type: 'line',
+        //     areaStyle: {
+        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //             {
+        //                 offset: 0,
+        //                 color: 'rgba(27, 143, 60, .5)',
+        //             },
+        //             {
+        //                 offset: 1,
+        //                 color: 'rgba(27, 143, 60, 0)',
+        //             },
+        //         ]),
+        //     },
+        //     data: netBytesSents.value,
+        //     showSymbol: false,
+        // };
+        // freshChart(
+        //     'networkChart',
+        //     [i18n.global.t('monitor.up'), i18n.global.t('monitor.down')],
+        //     timeNetDatas.value,
+        //     [netTxYDatas, netRxYDatas],
+        //     i18n.global.t('home.network'),
+        //     'KB/s',
+        // );
     }
 };
 
-function freshChart(chartName: string, legendDatas: any, xDatas: any, yDatas: any, yTitle: string, formatStr: string) {
-    if (isInit.value) {
-        echarts.init(document.getElementById(chartName) as HTMLElement);
-        isInit.value = false;
-    }
-    let itemChart = echarts.getInstanceByDom(document.getElementById(chartName) as HTMLElement);
-    const theme = globalStore.$state.themeConfig.theme || 'light';
-    const option = {
-        title: [
-            {
-                left: 'center',
-                text: yTitle,
-                show: false,
-            },
-        ],
-        zlevel: 1,
-        z: 1,
-        tooltip: {
-            trigger: 'axis',
-            formatter: function (datas: any) {
-                let res = datas[0].name + '<br/>';
-                for (const item of datas) {
-                    res += item.marker + ' ' + item.seriesName + '：' + item.data + formatStr + '<br/>';
-                }
-                return res;
-            },
-        },
-        grid: { left: '7%', right: '7%', bottom: '20%' },
-        legend: {
-            data: legendDatas,
-            right: 10,
-            itemWidth: 8,
-            textStyle: {
-                color: '#646A73',
-            },
-            icon: 'circle',
-        },
-        xAxis: { data: xDatas, boundaryGap: false },
-        yAxis: {
-            name: '( ' + formatStr + ' )',
-            splitLine: {
-                //分隔辅助线
-                lineStyle: {
-                    type: 'dashed', //线的类型 虚线0
-                    opacity: theme === 'dark' ? 0.1 : 1, //透明度
-                },
-            },
-        },
-        series: yDatas,
-        dataZoom: [{ startValue: xDatas[0] }],
-    };
-    itemChart?.setOption(option, true);
-}
+// function freshChart(chartName: string, legendDatas: any, xDatas: any, yDatas: any, yTitle: string, formatStr: string) {
+//     if (isInit.value) {
+//         echarts.init(document.getElementById(chartName) as HTMLElement);
+//         isInit.value = false;
+//     }
+//     let itemChart = echarts.getInstanceByDom(document.getElementById(chartName) as HTMLElement);
+//     const theme = globalStore.$state.themeConfig.theme || 'light';
+//     const option = {
+//         title: [
+//             {
+//                 left: 'center',
+//                 text: yTitle,
+//                 show: false,
+//             },
+//         ],
+//         zlevel: 1,
+//         z: 1,
+//         tooltip: {
+//             trigger: 'axis',
+//             formatter: function (datas: any) {
+//                 let res = datas[0].name + '<br/>';
+//                 for (const item of datas) {
+//                     res += item.marker + ' ' + item.seriesName + '：' + item.data + formatStr + '<br/>';
+//                 }
+//                 return res;
+//             },
+//         },
+//         grid: { left: '7%', right: '7%', bottom: '20%' },
+//         legend: {
+//             data: legendDatas,
+//             right: 10,
+//             itemWidth: 8,
+//             textStyle: {
+//                 color: '#646A73',
+//             },
+//             icon: 'circle',
+//         },
+//         xAxis: { data: xDatas, boundaryGap: false },
+//         yAxis: {
+//             name: '( ' + formatStr + ' )',
+//             splitLine: {
+//                 //分隔辅助线
+//                 lineStyle: {
+//                     type: 'dashed', //线的类型 虚线0
+//                     opacity: theme === 'dark' ? 0.1 : 1, //透明度
+//                 },
+//             },
+//         },
+//         series: yDatas,
+//         dataZoom: [{ startValue: xDatas[0] }],
+//     };
+//     itemChart?.setOption(option, true);
+// }
 
-function changeChartSize() {
-    if (document.getElementById('ioChart') != null) {
-        echarts.getInstanceByDom(document.getElementById('ioChart') as HTMLElement)?.resize();
-    }
-    if (document.getElementById('networkChart') != null) {
-        echarts.getInstanceByDom(document.getElementById('networkChart') as HTMLElement)?.resize();
-    }
-}
+// function changeChartSize() {
+//     if (document.getElementById('ioChart') != null) {
+//         echarts.getInstanceByDom(document.getElementById('ioChart') as HTMLElement)?.resize();
+//     }
+//     if (document.getElementById('networkChart') != null) {
+//         echarts.getInstanceByDom(document.getElementById('networkChart') as HTMLElement)?.resize();
+//     }
+// }
 
 onMounted(() => {
     onLoadNetworkOptions();
@@ -600,7 +643,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
     clearInterval(Number(timer));
     timer = null;
-    window.removeEventListener('resize', changeChartSize);
+    // window.removeEventListener('resize', changeChartSize);
 });
 </script>
 
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index a44b9a548..12e0e622d 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -37,7 +37,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
             open: viteEnv.VITE_OPEN,
             proxy: {
                 '/api/v1': {
-                    target: 'http://localhost:9999/',
+                    target: 'http://172.16.10.181:9999/',
                     changeOrigin: true,
                 },
             },