From 401634be3e547d76feaa5de847898f8e153d9686 Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Mon, 27 Feb 2023 18:10:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=BF=90=E7=BB=B4=E7=AE=A1=E7=90=86=20?=
 =?UTF-8?q?=E4=BB=AA=E8=A1=A8=E7=9B=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/link/dashboard.ts                     |  12 +
 src/views/link/DashBoard/components/Cpu.vue   | 189 ++++++++++++
 src/views/link/DashBoard/components/Jvm.vue   | 196 ++++++++++++
 .../link/DashBoard/components/Network.vue     | 222 ++++++++++++++
 .../link/DashBoard/components/TopCard.vue     | 155 ++++++++++
 .../components/TopEchartsItemNode.vue         | 282 ++++++++++++++++++
 src/views/link/DashBoard/components/tool.ts   | 125 ++++++++
 src/views/link/DashBoard/index.vue            |  25 ++
 8 files changed, 1206 insertions(+)
 create mode 100644 src/api/link/dashboard.ts
 create mode 100644 src/views/link/DashBoard/components/Cpu.vue
 create mode 100644 src/views/link/DashBoard/components/Jvm.vue
 create mode 100644 src/views/link/DashBoard/components/Network.vue
 create mode 100644 src/views/link/DashBoard/components/TopCard.vue
 create mode 100644 src/views/link/DashBoard/components/TopEchartsItemNode.vue
 create mode 100644 src/views/link/DashBoard/components/tool.ts
 create mode 100644 src/views/link/DashBoard/index.vue

diff --git a/src/api/link/dashboard.ts b/src/api/link/dashboard.ts
new file mode 100644
index 00000000..5b39594f
--- /dev/null
+++ b/src/api/link/dashboard.ts
@@ -0,0 +1,12 @@
+import server from '@/utils/request';
+
+export const dashboard = (data: object) =>
+    server.post(`/dashboard/_multi`, data);
+export const productCount = (data: object) =>
+    server.post(`/device-product/_count`, data);
+export const getGeo = (data: object) =>
+    server.post(`/geo/object/device/_search/geo.json`, data);
+export const deviceCount = (data: object) =>
+    server.get(`/device/instance/_count`, data);
+export const serverNode = (data: object) =>
+    server.get(`/dashboard/cluster/nodes`, data);
diff --git a/src/views/link/DashBoard/components/Cpu.vue b/src/views/link/DashBoard/components/Cpu.vue
new file mode 100644
index 00000000..0dd9da8f
--- /dev/null
+++ b/src/views/link/DashBoard/components/Cpu.vue
@@ -0,0 +1,189 @@
+<template>
+    <a-spin :spinning="loading">
+        <div class="dash-board">
+            <div class="header">
+                <h3>CPU使用率趋势</h3>
+                <a-range-picker
+                    @change="pickerTimeChange"
+                    :allowClear="false"
+                    :show-time="{ format: 'HH:mm:ss' }"
+                    format="YYYY-MM-DD HH:mm:ss"
+                    v-model="data.time"
+                >
+                    <template #suffixIcon><a-icon type="calendar" /></template>
+                    <template #renderExtraFooter>
+                        <a-radio-group
+                            default-value="a"
+                            button-style="solid"
+                            style="margin-right: 10px"
+                            v-model:value="data.type"
+                        >
+                            <a-radio-button value="hour">
+                                最近1小时
+                            </a-radio-button>
+                            <a-radio-button value="today">
+                                今日
+                            </a-radio-button>
+                            <a-radio-button value="week">
+                                近一周
+                            </a-radio-button>
+                        </a-radio-group></template
+                    >
+                </a-range-picker>
+            </div>
+            <div ref="chartRef" style="width: 100%; height: 300px"></div>
+        </div>
+    </a-spin>
+</template>
+m
+<script lang="ts" setup name="Cpu">
+import * as echarts from 'echarts';
+import { dashboard } from '@/api/link/dashboard';
+import moment from 'moment';
+import {
+    getTimeFormat,
+    getTimeByType,
+    arrayReverse,
+    defulteParamsData,
+    areaStyleCpu,
+    typeDataLine,
+} from './tool.ts';
+
+const chartRef = ref<Record<string, any>>({});
+
+const loading = ref(false);
+const data = ref({
+    type: 'hour',
+    time: [null, null],
+});
+
+const pickerTimeChange = () => {
+    data.value.type = undefined;
+};
+
+const getCPUEcharts = async (val) => {
+    loading.value = true;
+    const res = await dashboard(defulteParamsData('cpu', val));
+    if (res.success) {
+        const _cpuOptions = {};
+        const _cpuXAxis = new Set();
+        if (res.result?.length) {
+            res.result.forEach((item) => {
+                const value = item.data.value;
+                const nodeID = item.data.clusterNodeId;
+                _cpuXAxis.add(
+                    moment(value.timestamp).format(
+                        getTimeFormat(data.value.type),
+                    ),
+                );
+                if (!_cpuOptions[nodeID]) {
+                    _cpuOptions[nodeID] = [];
+                }
+                _cpuOptions[nodeID].push(
+                    Number(value.cpuSystemUsage).toFixed(2),
+                );
+            });
+        }
+        handleCpuOptions(_cpuOptions, [..._cpuXAxis.keys()]);
+    }
+    setTimeout(() => {
+        loading.value = false;
+    }, 300);
+};
+
+const setOptions = (optionsData, key) => ({
+    data: arrayReverse(optionsData[key]),
+    name: key,
+    type: 'line',
+    smooth: true,
+    symbol: 'none',
+    areaStyle: areaStyleCpu,
+});
+
+const handleCpuOptions = (optionsData, xAxis) => {
+    const chart = chartRef.value;
+    if (chart) {
+        const myChart = echarts.init(chart);
+        const dataKeys = Object.keys(optionsData);
+
+        const options = {
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: arrayReverse(xAxis),
+            },
+            tooltip: {
+                trigger: 'axis',
+                valueFormatter: (value) => `${value}%`,
+            },
+            yAxis: {
+                type: 'value',
+            },
+            grid: {
+                left: '50px',
+                right: '50px',
+            },
+            dataZoom: [
+                {
+                    type: 'inside',
+                    start: 0,
+                    end: 100,
+                },
+                {
+                    start: 0,
+                    end: 100,
+                },
+            ],
+            color: ['#2CB6E0'],
+            series: dataKeys.length
+                ? dataKeys.map((key) => setOptions(optionsData, key))
+                : typeDataLine,
+        };
+        myChart.setOption(options);
+        window.addEventListener('resize', function () {
+            myChart.resize();
+        });
+    }
+};
+
+watch(
+    () => data.value.type,
+    (val) => {
+        const endTime = moment(new Date());
+        const startTime = getTimeByType(val);
+        data.value.time = [startTime, endTime];
+    },
+    { immediate: true, deep: true },
+);
+watch(
+    () => data.value,
+    (val) => {
+        const { time } = val;
+        if (time && Array.isArray(time) && time.length === 2 && time[0]) {
+            getCPUEcharts(val);
+        }
+    },
+    { immediate: true, deep: true },
+);
+</script>
+
+<style lang="less" scoped>
+.dash-board {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 24px;
+    background-color: #fff;
+    box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
+    border-radius: 2px;
+}
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    h3 {
+        width: 200px;
+        margin-top: 8px;
+    }
+}
+</style>
diff --git a/src/views/link/DashBoard/components/Jvm.vue b/src/views/link/DashBoard/components/Jvm.vue
new file mode 100644
index 00000000..c2425cf9
--- /dev/null
+++ b/src/views/link/DashBoard/components/Jvm.vue
@@ -0,0 +1,196 @@
+<template>
+    <a-spin :spinning="loading">
+        <div class="dash-board">
+            <div class="header">
+                <h3>JVM内存使用率趋势</h3>
+                <a-range-picker
+                    @change="pickerTimeChange"
+                    :allowClear="false"
+                    :show-time="{ format: 'HH:mm:ss' }"
+                    format="YYYY-MM-DD HH:mm:ss"
+                    v-model="data.time"
+                >
+                    <template #suffixIcon><a-icon type="calendar" /></template>
+                    <template #renderExtraFooter>
+                        <a-radio-group
+                            default-value="a"
+                            button-style="solid"
+                            style="margin-right: 10px"
+                            v-model:value="data.type"
+                        >
+                            <a-radio-button value="hour">
+                                最近1小时
+                            </a-radio-button>
+                            <a-radio-button value="today">
+                                今日
+                            </a-radio-button>
+                            <a-radio-button value="week">
+                                近一周
+                            </a-radio-button>
+                        </a-radio-group></template
+                    >
+                </a-range-picker>
+            </div>
+            <div ref="chartRef" style="width: 100%; height: 300px"></div>
+        </div>
+    </a-spin>
+</template>
+
+<script lang="ts" setup name="Jvm">
+import * as echarts from 'echarts';
+import { dashboard } from '@/api/link/dashboard';
+import moment from 'moment';
+import {
+    getTimeFormat,
+    getTimeByType,
+    arrayReverse,
+    typeDataLine,
+    areaStyleJvm,
+    defulteParamsData,
+} from './tool.ts';
+
+const chartRef = ref<Record<string, any>>({});
+
+const loading = ref(false);
+const data = ref({
+    type: 'hour',
+    time: [null, null],
+});
+
+const pickerTimeChange = () => {
+    data.value.type = undefined;
+};
+
+const getJVMEcharts = async (val) => {
+    loading.value = true;
+    const res = await dashboard(defulteParamsData('jvm', val));
+    if (res.success) {
+        const _jvmOptions = {};
+        const _jvmXAxis = new Set();
+        if (res.result?.length) {
+            res.result.forEach((item) => {
+                const value = item.data.value;
+                const memoryJvmHeapFree = value.memoryJvmHeapFree;
+                const memoryJvmHeapTotal = value.memoryJvmHeapTotal;
+                const nodeID = item.data.clusterNodeId;
+
+                const _value = (
+                    ((memoryJvmHeapTotal - memoryJvmHeapFree) /
+                        memoryJvmHeapTotal) *
+                    100
+                ).toFixed(2);
+                if (!_jvmOptions[nodeID]) {
+                    _jvmOptions[nodeID] = [];
+                }
+                _jvmXAxis.add(
+                    moment(value.timestamp).format(
+                        getTimeFormat(data.value.type),
+                    ),
+                );
+                _jvmOptions[nodeID].push(_value);
+            });
+        }
+        handleJVMOptions(_jvmOptions, [..._jvmXAxis.keys()]);
+    }
+    setTimeout(() => {
+        loading.value = false;
+    }, 300);
+};
+
+const setOptions = (optionsData, key) => ({
+    data: arrayReverse(optionsData[key]),
+    name: key,
+    type: 'line',
+    smooth: true,
+    symbol: 'none',
+    areaStyle: areaStyleJvm,
+});
+const handleJVMOptions = (optionsData, xAxis) => {
+    const chart = chartRef.value;
+    if (chart) {
+        const myChart = echarts.init(chart);
+        const dataKeys = Object.keys(optionsData);
+
+        console.log(21, arrayReverse(xAxis), xAxis);
+
+        const options = {
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: arrayReverse(xAxis),
+            },
+            tooltip: {
+                trigger: 'axis',
+                valueFormatter: (value: any) => `${value}%`,
+            },
+            yAxis: {
+                type: 'value',
+            },
+            grid: {
+                left: '50px',
+                right: '50px',
+            },
+            dataZoom: [
+                {
+                    type: 'inside',
+                    start: 0,
+                    end: 100,
+                },
+                {
+                    start: 0,
+                    end: 100,
+                },
+            ],
+            color: ['#60DFC7'],
+            series: dataKeys.length
+                ? dataKeys.map((key) => setOptions(optionsData, key))
+                : typeDataLine,
+        };
+        myChart.setOption(options);
+        window.addEventListener('resize', function () {
+            myChart.resize();
+        });
+    }
+};
+
+watch(
+    () => data.value.type,
+    (val) => {
+        const endTime = moment(new Date());
+        const startTime = getTimeByType(val);
+        data.value.time = [startTime, endTime];
+    },
+    { immediate: true, deep: true },
+);
+watch(
+    () => data.value,
+    (val) => {
+        const { time } = val;
+        if (time && Array.isArray(time) && time.length === 2 && time[0]) {
+            getJVMEcharts(val);
+        }
+    },
+    { immediate: true, deep: true },
+);
+</script>
+
+<style lang="less" scoped>
+.dash-board {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 24px;
+    background-color: #fff;
+    box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
+    border-radius: 2px;
+}
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    h3 {
+        width: 200px;
+        margin-top: 8px;
+    }
+}
+</style>
diff --git a/src/views/link/DashBoard/components/Network.vue b/src/views/link/DashBoard/components/Network.vue
new file mode 100644
index 00000000..22639768
--- /dev/null
+++ b/src/views/link/DashBoard/components/Network.vue
@@ -0,0 +1,222 @@
+<template>
+    <a-spin :spinning="loading">
+        <div class="dash-board">
+            <div class="header">
+                <div class="left">
+                    <h3 style="width: 80px">网络流量</h3>
+                    <a-radio-group
+                        button-style="solid"
+                        v-model:value="data.type"
+                    >
+                        <a-radio-button value="bytesRead">
+                            上行
+                        </a-radio-button>
+                        <a-radio-button value="bytesSent">
+                            下行
+                        </a-radio-button>
+                    </a-radio-group>
+                </div>
+                <div class="right">
+                    <a-radio-group
+                        default-value="a"
+                        button-style="solid"
+                        style="margin-right: 10px"
+                        v-model:value="data.time.type"
+                    >
+                        <a-radio-button value="hour">
+                            最近1小时
+                        </a-radio-button>
+                        <a-radio-button value="today"> 今日 </a-radio-button>
+                        <a-radio-button value="week"> 近一周 </a-radio-button>
+                    </a-radio-group>
+                    <a-range-picker
+                        :allowClear="false"
+                        :show-time="{ format: 'HH:mm:ss' }"
+                        format="YYYY-MM-DD HH:mm:ss"
+                        v-model="data.time.time"
+                        @change="pickerTimeChange"
+                    >
+                        <template #suffixIcon
+                            ><a-icon type="calendar"
+                        /></template>
+                    </a-range-picker>
+                </div>
+            </div>
+            <div>
+                <div
+                    ref="chartRef"
+                    v-if="flag"
+                    style="width: 100%; height: 350px"
+                ></div>
+                <a-empty v-else style="height: 300px; margin-top: 120px" />
+            </div>
+        </div>
+    </a-spin>
+</template>
+
+<script lang="ts" setup name="Network">
+import { dashboard } from '@/api/link/dashboard';
+import {
+    getTimeByType,
+    typeDataLine,
+    areaStyle,
+    networkParams,
+    arrayReverse,
+} from './tool.ts';
+import moment from 'moment';
+import * as echarts from 'echarts';
+
+const chartRef = ref<Record<string, any>>({});
+
+const flag = ref(true);
+const loading = ref(false);
+const myChart = ref(null);
+const data = ref({
+    type: 'bytesRead',
+    time: {
+        type: 'today',
+        time: [null, null],
+    },
+});
+
+const pickerTimeChange = () => {
+    data.value.time.type = undefined;
+};
+
+const getNetworkEcharts = async (val) => {
+    loading.value = true;
+    const resp = await dashboard(networkParams(val));
+    if (resp.success) {
+        const _networkOptions = {};
+        const _networkXAxis = new Set();
+        if (resp.result.length) {
+            resp.result.forEach((item) => {
+                const value = item.data.value;
+                const _data = [];
+                const nodeID = item.data.clusterNodeId;
+                value.forEach((item) => {
+                    _data.push(item.value);
+                    _networkXAxis.add(item.timeString);
+                });
+                _networkOptions[nodeID] = {
+                    _data: _networkOptions[nodeID]
+                        ? _networkOptions[nodeID]._data.concat(_data)
+                        : _data,
+                };
+            });
+            handleNetworkOptions(_networkOptions, [..._networkXAxis.keys()]);
+        } else {
+            handleNetworkOptions([], []);
+        }
+    }
+    setTimeout(() => {
+        loading.value = false;
+    }, 300);
+};
+const networkValueRender = (obj) => {
+    const { value } = obj;
+    let _data = '';
+    if (value >= 1024 && value < 1024 * 1024) {
+        _data = `${Number((value / 1024).toFixed(2))}KB`;
+    } else if (value >= 1024 * 1024) {
+        _data = `${Number((value / 1024 / 1024).toFixed(2))}M`;
+    } else {
+        _data = `${value}B`;
+    }
+    return `${obj?.axisValueLabel}<br />${obj?.marker}${obj?.seriesName}:     ${_data}`;
+};
+
+const setOptions = (data, key) => ({
+    data: data[key]._data, // .map((item) => Number((item / 1024 / 1024).toFixed(2))),
+    name: key,
+    type: 'line',
+    smooth: true,
+    areaStyle,
+});
+
+const handleNetworkOptions = (optionsData, xAxis) => {
+    const chart = chartRef.value;
+
+    if (chart) {
+        const myChart = echarts.init(chart);
+        const dataKeys = Object.keys(optionsData);
+        const options = {
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: xAxis,
+            },
+            yAxis: {
+                type: 'value',
+            },
+            grid: {
+                left: '80px',
+                right: '50px',
+            },
+            tooltip: {
+                trigger: 'axis',
+                formatter: (_value) => networkValueRender(_value[0]),
+            },
+            color: ['#979AFF'],
+            series: dataKeys.length
+                ? dataKeys.map((key) => setOptions(optionsData, key))
+                : typeDataLine,
+        };
+        myChart.setOption(options);
+        window.addEventListener('resize', function () {
+            myChart.resize();
+        });
+    }
+};
+
+watch(
+    () => data.value.time.type,
+    (value) => {
+        const endTime = moment(new Date());
+        const startTime = getTimeByType(value);
+        data.value.time.time = [startTime, endTime];
+    },
+    { immediate: true, deep: true },
+);
+watch(
+    () => data.value,
+    (value) => {
+        const {
+            time: { time },
+        } = value;
+        if (time && Array.isArray(time) && time.length === 2 && time[0]) {
+            getNetworkEcharts(value);
+        }
+    },
+    { immediate: true, deep: true },
+);
+// onMounted(() => {
+//     createEcharts();
+// });
+</script>
+
+<style lang="less" scoped>
+.dash-board {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 24px;
+    background-color: #fff;
+    box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
+    border-radius: 2px;
+}
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .left h3 {
+        width: 200px;
+        margin-top: 8px;
+    }
+}
+.left,
+.right {
+    display: flex;
+    align-items: center;
+}
+</style>
diff --git a/src/views/link/DashBoard/components/TopCard.vue b/src/views/link/DashBoard/components/TopCard.vue
new file mode 100644
index 00000000..27ecab3e
--- /dev/null
+++ b/src/views/link/DashBoard/components/TopCard.vue
@@ -0,0 +1,155 @@
+<template>
+    <div>
+        <a-select
+            style="width: 300px; margin-bottom: 20px"
+            @change="serverIdChange"
+            :value="serverId"
+            :options="serverNode"
+            v-if="serverNode.length > 1"
+        ></a-select>
+        <div class="dash-board">
+            <div class="dash-board-item">
+                <TopEchartsItemNode title="CPU使用率" :value="topValues.cpu" />
+            </div>
+            <div class="dash-board-item">
+                <TopEchartsItemNode
+                    title="JVM内存"
+                    :max="topValues.jvmTotal"
+                    :bottom="`总JVM内存 ${topValues.jvmTotal}G`"
+                    formatter="G"
+                    :value="topValues.jvm"
+                />
+            </div>
+            <div class="dash-board-item">
+                <TopEchartsItemNode
+                    title="磁盘占用"
+                    :max="topValues.usageTotal"
+                    :bottom="`总磁盘大小 ${topValues.usageTotal}G`"
+                    formatter="G"
+                    :value="topValues.usage"
+                />
+            </div>
+            <div class="dash-board-item">
+                <TopEchartsItemNode
+                    title="系统内存"
+                    :max="topValues.systemUsageTotal"
+                    :bottom="`系统内存 ${topValues.systemUsageTotal}G`"
+                    formatter="G"
+                    :value="topValues.systemUsage"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { serverNode } from '@/api/link/dashboard';
+import TopEchartsItemNode from './TopEchartsItemNode.vue';
+import { getWebSocket } from '@/utils/websocket';
+import { map } from 'rxjs/operators';
+
+export default {
+    name: 'TopCard',
+    components: { TopEchartsItemNode },
+    data() {
+        return {
+            serverId: '',
+            serverNode: [],
+            topValues: {
+                cpu: 0,
+                jvm: 0,
+                jvmTotal: 0,
+                usage: 0,
+                usageTotal: 0,
+                systemUsage: 0,
+                systemUsageTotal: 0,
+            },
+        };
+    },
+    created() {
+        serverNode().then((resp) => {
+            if (resp.success) {
+                this.serverNode = resp.result.map((item) => ({
+                    label: item.name,
+                    value: item.id,
+                }));
+                if (this.serverNode && this.serverNode.length) {
+                    this.serverId = this.serverNode[0].value;
+                }
+            }
+        });
+    },
+    watch: {
+        serverId: {
+            handler(val) {
+                if (val) {
+                    this.getData(val);
+                }
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        serverIdChange(val) {
+            this.serverId = val;
+        },
+        getData() {
+            const id = 'operations-statistics-system-info-realTime';
+            const topic = '/dashboard/systemMonitor/stats/info/realTime';
+            getWebSocket(id, topic, {
+                type: 'all',
+                serverNodeId: this.serverId,
+                interval: '1s',
+                agg: 'avg',
+            })
+                .pipe(map((res) => res.payload))
+                .subscribe((payload) => {
+                    const value = payload.value;
+                    const cpu = value.cpu;
+                    const memory = value.memory;
+                    const disk = value.disk;
+                    this.topValues = {
+                        cpu: cpu.systemUsage,
+                        jvm: Number(
+                            (
+                                (memory.jvmHeapUsage / 100) *
+                                (memory.jvmHeapTotal / 1024)
+                            ).toFixed(1),
+                        ),
+                        jvmTotal: Math.ceil(memory.jvmHeapTotal / 1024),
+                        usage: Number(
+                            ((disk.total / 1024) * (disk.usage / 100)).toFixed(
+                                1,
+                            ),
+                        ),
+                        usageTotal: Math.ceil(disk.total / 1024),
+                        systemUsage: Number(
+                            (
+                                (memory.systemTotal / 1024) *
+                                (memory.systemUsage / 100)
+                            ).toFixed(1),
+                        ),
+                        systemUsageTotal: Math.ceil(memory.systemTotal / 1024),
+                    };
+                });
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.dash-board {
+    display: flex;
+    flex-wrap: wrap;
+    height: 100%;
+    background-color: #fff;
+    box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
+    border-radius: 2px;
+    justify-content: space-between;
+    .dash-board-item {
+        flex: 1;
+        margin: 24px 12px;
+        min-width: 250px;
+    }
+}
+</style>
diff --git a/src/views/link/DashBoard/components/TopEchartsItemNode.vue b/src/views/link/DashBoard/components/TopEchartsItemNode.vue
new file mode 100644
index 00000000..0a7af873
--- /dev/null
+++ b/src/views/link/DashBoard/components/TopEchartsItemNode.vue
@@ -0,0 +1,282 @@
+<template>
+    <div class="echarts-item">
+        <div class="echarts-item-left">
+            <div class="echarts-item-title">{{ title }}</div>
+            <div class="echarts-item-value">
+                {{ value || 0 }} {{ formatter || '%' }}
+            </div>
+            <div v-if="!!bottom" class="echarts-item-bottom">{{ bottom }}</div>
+        </div>
+        <div class="echarts-item-right">
+            <div ref="chartRef" style="width: 100%; height: 100px"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+    name: 'TopEchartsItemNode',
+    props: {
+        title: {
+            type: String,
+            default: '',
+        },
+        value: {
+            type: Number,
+            default: 0,
+        },
+        max: {
+            type: Number,
+            default: 0,
+        },
+        bottom: {
+            type: String,
+            default: '',
+        },
+        formatter: {
+            type: String,
+            default: '%',
+        },
+    },
+    data() {
+        return {
+            options: {},
+        };
+    },
+    methods: {
+        createChart(val) {
+            const chart = this.$refs.chartRef;
+            if (chart && Object.keys(val).length > 0) {
+                const myChart = echarts.init(chart);
+                myChart.setOption(val);
+                window.addEventListener('resize', function () {
+                    myChart.resize();
+                });
+            }
+        },
+        getOptions(max, formatter, val) {
+            let formatterCount = 0;
+            this.options = {
+                series: [
+                    {
+                        type: 'gauge',
+                        min: 0,
+                        max: max || 100,
+                        startAngle: 200,
+                        endAngle: -20,
+                        center: ['50%', '67%'],
+                        title: {
+                            show: false,
+                        },
+                        axisTick: {
+                            distance: -20,
+                            lineStyle: {
+                                width: 1,
+                                color: 'rgba(0,0,0,0.15)',
+                            },
+                        },
+                        splitLine: {
+                            distance: -22,
+                            length: 9,
+                            lineStyle: {
+                                width: 1,
+                                color: '#000',
+                            },
+                        },
+                        axisLabel: {
+                            distance: -22,
+                            color: 'auto',
+                            fontSize: 12,
+                            width: 30,
+                            padding: [6, 10, 0, 10],
+                            formatter: (value) => {
+                                formatterCount += 1;
+                                if ([1, 3, 6, 9, 11].includes(formatterCount)) {
+                                    return value + (formatter || '%');
+                                }
+                                return '';
+                            },
+                        },
+                        pointer: {
+                            length: '80%',
+                            width: 4,
+                            itemStyle: {
+                                color: 'auto',
+                            },
+                        },
+                        anchor: {
+                            show: true,
+                            showAbove: true,
+                            size: 20,
+                            itemStyle: {
+                                borderWidth: 3,
+                                borderColor: '#fff',
+                                shadowBlur: 20,
+                                shadowColor: 'rgba(0, 0, 0, .25)',
+                                color: 'auto',
+                            },
+                        },
+                        axisLine: {
+                            lineStyle: {
+                                width: 10,
+                                color: [
+                                    [0.25, 'rgba(36, 178, 118, 1)'],
+                                    [
+                                        0.4,
+                                        new echarts.graphic.LinearGradient(
+                                            0,
+                                            0,
+                                            0,
+                                            1,
+                                            [
+                                                {
+                                                    offset: 0,
+                                                    color: 'rgba(66, 147, 255, 1)',
+                                                },
+                                                {
+                                                    offset: 1,
+                                                    color: 'rgba(36, 178, 118, 1)',
+                                                },
+                                            ],
+                                        ),
+                                    ],
+                                    [
+                                        0.5,
+                                        new echarts.graphic.LinearGradient(
+                                            0,
+                                            0,
+                                            0,
+                                            1,
+                                            [
+                                                {
+                                                    offset: 0,
+                                                    color: 'rgba(250, 178, 71, 1)',
+                                                },
+                                                {
+                                                    offset: 1,
+                                                    color: 'rgba(66, 147, 255, 1)',
+                                                },
+                                            ],
+                                        ),
+                                    ],
+                                    [
+                                        1,
+                                        new echarts.graphic.LinearGradient(
+                                            0,
+                                            0,
+                                            0,
+                                            1,
+                                            [
+                                                {
+                                                    offset: 0,
+                                                    color: 'rgba(250, 178, 71, 1)',
+                                                },
+                                                {
+                                                    offset: 1,
+                                                    color: 'rgba(247, 111, 93, 1)',
+                                                },
+                                            ],
+                                        ),
+                                    ],
+                                ],
+                            },
+                        },
+                        detail: {
+                            show: false,
+                        },
+                        data: [{ value: val || 0 }],
+                    },
+                ],
+            };
+        },
+    },
+    watch: {
+        options: {
+            handler(val) {
+                this.createChart(val);
+            },
+            immediate: true,
+            deep: true,
+        },
+        max: {
+            handler(val) {
+                this.getOptions(val, this.formatter, this.value);
+            },
+            immediate: true,
+            deep: true,
+        },
+        value: {
+            handler(val) {
+                this.getOptions(this.max, this.formatter, val);
+            },
+            immediate: true,
+            deep: true,
+        },
+        formatter: {
+            handler(val) {
+                this.getOptions(this.max, val, this.value);
+            },
+            immediate: true,
+            deep: true,
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.echarts-item {
+    display: flex;
+    height: 150px;
+    padding: 16px;
+    background-color: #fff;
+    box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
+
+    .echarts-item-left {
+        display: flex;
+        flex-direction: column;
+        width: 45%;
+    }
+
+    .echarts-item-right {
+        width: 55%;
+    }
+
+    .echarts-item-title {
+        margin-bottom: 8px;
+        color: rgba(#000, 0.6);
+        font-size: 16px;
+    }
+
+    .echarts-item-value {
+        font-weight: bold;
+        font-size: 36px;
+        width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-align: left;
+        text-overflow: ellipsis;
+    }
+
+    .echarts-item-bottom {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        justify-content: center;
+        height: 0;
+        padding-left: 12px;
+
+        &::before {
+            position: absolute;
+            top: 50%;
+            left: 0;
+            width: 4px;
+            height: 12px;
+            background-color: #ff595e;
+            transform: translateY(-50%);
+            content: ' ';
+        }
+    }
+}
+</style>
diff --git a/src/views/link/DashBoard/components/tool.ts b/src/views/link/DashBoard/components/tool.ts
new file mode 100644
index 00000000..0a0d77fb
--- /dev/null
+++ b/src/views/link/DashBoard/components/tool.ts
@@ -0,0 +1,125 @@
+import moment from 'moment';
+import * as echarts from 'echarts';
+
+export const getInterval = (type) => {
+    switch (type) {
+        case 'year':
+            return '30d';
+        case 'month':
+        case 'week':
+            return '1d';
+        case 'hour':
+            return '1m';
+        default:
+            return '1h';
+    }
+};
+export const getTimeFormat = (type) => {
+    switch (type) {
+        case 'year':
+            return 'YYYY-MM-DD';
+        case 'month':
+        case 'week':
+            return 'MM-DD';
+        case 'hour':
+            return 'HH:mm';
+        default:
+            return 'HH';
+    }
+};
+
+export const getTimeByType = (type) => {
+    switch (type) {
+        case 'hour':
+            return moment().subtract(1, 'hours');
+        case 'week':
+            return moment().subtract(6, 'days');
+        case 'month':
+            return moment().subtract(29, 'days');
+        case 'year':
+            return moment().subtract(365, 'days');
+        default:
+            return moment().startOf('day');
+    }
+};
+
+export const arrayReverse = (data) => {
+    const newArray = [];
+    for (let i = data.length - 1; i >= 0; i--) {
+        newArray.push(data[i]);
+    }
+    return newArray;
+};
+
+export const networkParams = (val) => [
+    {
+        dashboard: 'systemMonitor',
+        object: 'network',
+        measurement: 'traffic',
+        dimension: 'agg',
+        group: 'network',
+        params: {
+            type: val.type,
+            interval: getInterval(val.time.type),
+            from: moment(val.time.time[0]).valueOf(),
+            to: moment(val.time.time[1]).valueOf(),
+        },
+    },
+];
+export const defulteParamsData = (group, val) => [
+    {
+        dashboard: 'systemMonitor',
+        object: 'stats',
+        measurement: 'info',
+        dimension: 'history',
+        group,
+        params: {
+            from: moment(val.time[0]).valueOf(),
+            to: moment(val.time[1]).valueOf(),
+        },
+    },
+];
+
+export const areaStyle = {
+    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        {
+            offset: 1,
+            color: 'rgba(151, 154, 255, 0)',
+        },
+        {
+            offset: 0,
+            color: 'rgba(151, 154, 255, .24)',
+        },
+    ]),
+};
+export const areaStyleCpu = {
+    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        {
+            offset: 1,
+            color: 'rgba(44, 182, 224, 0)',
+        },
+        {
+            offset: 0,
+            color: 'rgba(44, 182, 224, .24)',
+        },
+    ]),
+};
+export const areaStyleJvm = {
+    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        {
+            offset: 1,
+            color: 'rgba(96, 223, 199, 0)',
+        },
+        {
+            offset: 0,
+            color: 'rgba(96, 223, 199, .24)',
+        },
+    ]),
+};
+
+export const typeDataLine = [
+    {
+        data: [],
+        type: 'line',
+    },
+];
diff --git a/src/views/link/DashBoard/index.vue b/src/views/link/DashBoard/index.vue
new file mode 100644
index 00000000..2b432a56
--- /dev/null
+++ b/src/views/link/DashBoard/index.vue
@@ -0,0 +1,25 @@
+<template>
+    <page-container>
+        <div>
+            <a-row :gutter="[24, 24]">
+                <a-col :span="24"><TopCard /> </a-col>
+                <a-col :span="24"><Network /></a-col>
+                <a-col :span="12"><Cpu /></a-col>
+                <a-col :span="12"><Jvm /></a-col>
+            </a-row>
+        </div>
+    </page-container>
+</template>
+
+<script>
+import TopCard from './components/TopCard.vue';
+import Network from './components/Network.vue';
+import Cpu from './components/Cpu.vue';
+import Jvm from './components/Jvm.vue';
+export default {
+    name: 'LinkDashboard',
+    components: { Cpu, Jvm, Network, TopCard },
+};
+</script>
+
+<style lang="less" scoped></style>