feat: 数据采集 仪表盘

src/api/data-collect/dashboard.ts

@@ -0,0 +1,6 @@
+import server from '@/utils/request';
+
+export const queryCount = (type: string, data: any) =>
+    server.post(`/data-collect/${type}/_count`, data);
+
+export const dashboard = (data: any) => server.post(`/dashboard/_multi`, data);

src/views/DataCollect/Dashboard/components/Card.vue

@@ -0,0 +1,165 @@
+<template>
+    <a-spin :spinning="loading">
+        <div class="dash-board">
+            <div class="header">
+                <div class="left">
+                    <h3 style="width: 100px">点位数据量</h3>
+                </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"
+                        @change="pickerTimeChange"
+                    >
+                        <template #suffixIcon
+                            ><AIcon type="CalendarOutlined"
+                        /></template>
+                    </a-range-picker>
+                </div>
+            </div>
+            <div>
+                <div ref="chartRef" style="width: 100%; height: 350px"></div>
+            </div>
+        </div>
+    </a-spin>
+</template>
+
+<script lang="ts" setup>
+import { dashboard } from '@/api/data-collect/dashboard';
+import { getTimeByType, pointParams, pointOptionsSeries } from '../tool.ts';
+import * as echarts from 'echarts';
+import { Dayjs } from 'dayjs';
+
+const chartRef = ref<Record<string, any>>({});
+const loading = ref(false);
+const data = ref({
+    time: {
+        type: 'hour',
+        end: 0,
+        start: 0,
+    },
+});
+
+const pickerTimeChange = (
+    value: [Dayjs, Dayjs],
+    dateString: [string, string],
+) => {
+    data.value.time.start = Date.parse(dateString[0]);
+    data.value.time.end = Date.parse(dateString[1]);
+    data.value.time.type = undefined;
+};
+
+const getEcharts = async (val) => {
+    loading.value = true;
+    const resp = await dashboard(pointParams(val));
+    if (resp.success) {
+        const x = resp.result
+            .map((item: any) => item.data.timeString)
+            .reverse();
+        const y = resp.result.map((item: any) => item.data.value).reverse();
+        handleOptions(x, y);
+    }
+    setTimeout(() => {
+        loading.value = false;
+    }, 300);
+};
+
+const handleOptions = (x = [], y = []) => {
+    const chart = chartRef.value;
+    if (chart) {
+        const myChart = echarts.init(chart);
+        const options = {
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: x,
+            },
+            yAxis: {
+                type: 'value',
+            },
+            grid: {
+                left: '80px',
+                right: '50px',
+            },
+            tooltip: {
+                trigger: 'axis',
+            },
+            color: ['#979AFF'],
+            series: [
+                {
+                    name: '消息量',
+                    data: y,
+                    ...pointOptionsSeries,
+                },
+            ],
+        };
+        myChart.setOption(options);
+        window.addEventListener('resize', function () {
+            myChart.resize();
+        });
+    }
+};
+
+watch(
+    () => data.value.time.type,
+    (value) => {
+        data.value.time.end = Date.parse(new Date());
+        data.value.time.start = Date.parse(getTimeByType(value));
+    },
+    { immediate: true, deep: true },
+);
+watch(
+    () => data.value,
+    (value) => {
+        const { time } = value;
+        if (time.type || (time.end && time.start)) {
+            getEcharts(value);
+        }
+    },
+    { 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;
+    margin-top: 24px;
+}
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .left h3 {
+        width: 200px;
+        margin-top: 8px;
+    }
+}
+.left,
+.right {
+    display: flex;
+    align-items: center;
+}
+.empty {
+    height: 300px;
+}
+</style>

src/views/DataCollect/Dashboard/components/TopCard.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class="top-card">
+        <div class="top-card-content">
+            <div class="content-left">
+                <div class="content-left-title">
+                    <span>{{ title }}</span>
+                    <a-tooltip placement="top" v-if="tooltip">
+                        <template #title>
+                            <span>{{ tooltip }}</span>
+                        </template>
+                        <AIcon type="QuestionCircleOutlined" />
+                    </a-tooltip>
+                </div>
+                <div class="content-left-value">{{ value }}</div>
+            </div>
+            <div class="content-right">
+                <img :src="img" alt="" />
+            </div>
+        </div>
+        <div class="top-card-footer">
+            <template v-for="(item, index) in footer" :key="index">
+                <span v-if="!item.status">{{ item.title }}</span>
+                <a-badge v-else :text="item.title" :status="item.status" />
+                <div class="footer-item-value">{{ item.value }}</div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+import type { Footer } from '../typings.d';
+
+const props = defineProps({
+    title: { type: String, default: '' },
+    tooltip: { type: String, default: '' },
+    img: { type: String, default: '' },
+    footer: { type: Array as PropType<Footer[]>, default: '' },
+    value: { type: Number, default: 0 },
+});
+</script>
+
+<style lang="less" scoped>
+.top-card {
+    display: flex;
+    flex-direction: column;
+    // height: 200px;
+    padding: 24px;
+    background-color: #fff;
+    border: 1px solid #e0e4e8;
+    border-radius: 2px;
+    max-height: 215px;
+    .top-card-content {
+        display: flex;
+        flex-direction: row;
+        flex-grow: 1;
+        .content-left {
+            height: 100%;
+            width: 50%;
+            &-title {
+                color: rgba(0, 0, 0, 0.64);
+            }
+            &-value {
+                padding: 12px 0;
+                color: #323130;
+                font-weight: 700;
+                font-size: 36px;
+            }
+        }
+        .content-right {
+            width: 0;
+            height: 100%;
+            display: flex;
+            flex-grow: 1;
+            align-items: flex-end;
+            justify-content: flex-end;
+            img {
+                width: 100%;
+                height: 100%;
+                max-height: 123px;
+                max-width: 140px;
+            }
+        }
+    }
+    .top-card-footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-top: 16px;
+        border-top: 1px solid #f0f0f0;
+        .footer-item-value {
+            color: #323130;
+            font-weight: 700;
+            font-size: 16px;
+        }
+    }
+}
+</style>

src/views/DataCollect/Dashboard/index.less

@@ -0,0 +1,38 @@
+.media-dash-board {
+    .top-card-items {
+        margin-bottom: 12px;
+        height: 100px;
+        .top-card-item {
+            width: 25%;
+            padding: 6px 24px;
+            border: 1px solid #e3e3e3;
+
+            .top-card-top {
+                display: flex;
+                padding: 12px 0;
+
+                .top-card-top-left {
+                    width: 80px;
+                }
+
+                .top-card-top-right {
+                    .top-card-total {
+                        font-weight: bold;
+                        font-size: 20px;
+                    }
+                }
+            }
+
+            .top-card-bottom {
+                display: flex;
+                justify-content: space-between;
+                padding: 12px 0;
+                border-top: 1px solid #e3e3e3;
+            }
+        }
+    }
+
+    .media-dash-board-body {
+        border: 1px solid #f0f0f0;
+    }
+}

src/views/DataCollect/Dashboard/index.vue

@@ -0,0 +1,41 @@
+<template>
+    <page-container>
+        <a-row :gutter="24">
+            <a-col :span="8" v-for="item in statusData" :key="item[0].type">
+                <TopCard
+                    :title="item[0].label"
+                    :img="
+                        getImage(`/DataCollect/dashboard/${item[0].type}.png`)
+                    "
+                    :footer="item"
+                    :value="item[0].total"
+                />
+            </a-col>
+        </a-row>
+        <a-row :gutter="24">
+            <a-col :span="24">
+                <Card />
+            </a-col>
+        </a-row>
+    </page-container>
+</template>
+
+<script setup lang="ts">
+import TopCard from './components/TopCard.vue';
+import Card from './components/Card.vue';
+import { getImage } from '@/utils/comm';
+import { queryCount } from '@/api/data-collect/dashboard';
+import { defaultParams, statusData } from './tool';
+
+const getNumberData = () => {
+    statusData.value.forEach(async (item) => {
+        const res = await queryCount(item[0].type, {});
+        const resp = await queryCount(item[0].type, defaultParams);
+        item[0].total = res.result || 0;
+        item[0].value = resp.result || 0;
+    });
+};
+getNumberData();
+</script>
+
+<style lang="less" scoped></style>

src/views/DataCollect/Dashboard/tool.ts

@@ -0,0 +1,155 @@
+import moment from 'moment';
+import * as echarts from 'echarts';
+
+const getParams = (dt: any) => {
+    switch (dt.type) {
+        case 'today':
+            return {
+                limit: 24,
+                interval: '1h',
+                format: 'HH:mm',
+            };
+        case 'week':
+            return {
+                limit: 7,
+                interval: '1d',
+                format: 'MM-dd',
+            };
+        case 'hour':
+            return {
+                limit: 60,
+                interval: '1m',
+                format: 'HH:mm',
+            };
+        default:
+            const time = dt.end - dt.start;
+            const hour = 60 * 60 * 1000;
+            const days = hour * 24;
+            const year = days * 365;
+            if (time <= hour) {
+                return {
+                    limit: Math.abs(Math.ceil(time / (60 * 60))),
+                    interval: '1m',
+                    format: 'HH:mm',
+                };
+            } else if (time > hour && time <= days) {
+                return {
+                    limit: Math.abs(Math.ceil(time / hour)),
+                    interval: '1h',
+                    format: 'HH:mm',
+                };
+            } else if (time >= year) {
+                return {
+                    limit: Math.abs(Math.ceil(time / days / 31)) + 1,
+                    interval: '1M',
+                    format: 'yyyy年-M月',
+                };
+            } else {
+                return {
+                    limit: Math.abs(Math.ceil(time / days)) + 1,
+                    interval: '1d',
+                    format: 'MM-dd',
+                };
+            }
+    }
+};
+
+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 pointParams = (data) => [
+    {
+        dashboard: 'collector',
+        object: 'pointData',
+        measurement: 'quantity',
+        dimension: 'agg',
+        params: {
+            limit: getParams(data.time).limit,
+            from: data.time.start,
+            to: data.time.end,
+            interval: getParams(data.time).interval,
+            format: getParams(data.time).format,
+        },
+    },
+];
+
+export const pointOptionsSeries = {
+    type: 'line',
+    smooth: true,
+    color: '#60DFC7',
+    areaStyle: {
+        color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+                {
+                    offset: 0,
+                    color: '#60DFC7', // 100% 处的颜色
+                },
+                {
+                    offset: 1,
+                    color: '#FFFFFF', //   0% 处的颜色
+                },
+            ],
+            global: false, // 缺省为 false
+        },
+    },
+};
+
+export const defaultParams = {
+    terms: [
+        {
+            column: 'runningState',
+            termType: 'not',
+            value: 'running',
+        },
+    ],
+};
+
+export const statusData = ref([
+    [
+        {
+            type: 'channel',
+            title: '异常通道',
+            status: 'error',
+            label: '通道数量',
+            value: 0,
+            total: 0,
+        },
+    ],
+    [
+        {
+            type: 'collector',
+            title: '异常采集器',
+            status: 'error',
+            label: '采集器数量',
+            value: 0,
+            total: 0,
+        },
+    ],
+    [
+        {
+            type: 'point',
+            title: '异常点位',
+            status: 'error',
+            label: '采集点位',
+            value: 0,
+            total: 0,
+        },
+    ],
+]);

src/views/DataCollect/Dashboard/typings.d.ts

@@ -0,0 +1,18 @@
+export type Agg = {
+    duration: number;
+    total: number;
+};
+
+export type AggPlaying = {
+    playerTotal: number;
+    playingTotal: number;
+};
+
+export type Footer = {
+    title: string;
+    value: number | string;
+    total: number | string;
+    status?: 'default' | 'error' | 'success' | 'warning' | 'processing' | '';
+    type: string;
+    label: string;
+};

src/views/link/AccessConfig/index.vue

@@ -316,7 +316,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
 
 const getProvidersList = async () => {
     const res = await getProviders();
-    providersList = res.result;
+    providersList.value = res.result;
 };
 getProvidersList();
 
@@ -337,7 +337,7 @@ const handlEye = (id: string) => {
 const getDescription = (slotProps: Record<string, any>) =>
     slotProps.description
         ? slotProps.description
-        : providersList?.find(
+        : providersList.value?.find(
               (item: Record<string, any>) => item.id === slotProps.provider,
           )?.description;
 

src/views/link/DashBoard/components/Cpu.vue

@@ -33,8 +33,7 @@
                     >
                 </a-range-picker>
             </div>
-            <a-empty v-if="empty" class="empty" />
+            <div ref="chartRef" style="width: 100%; height: 300px"></div>
-            <div v-else ref="chartRef" style="width: 100%; height: 300px"></div>
         </div>
     </a-spin>
 </template>
@@ -54,7 +53,6 @@ import {
 
 const chartRef = ref<Record<string, any>>({});
 const loading = ref(false);
-const empty = ref(false);
 const data = ref({
     type: 'hour',
     time: [null, null],
@@ -108,7 +106,6 @@ const handleCpuOptions = (optionsData, xAxis) => {
     if (chart) {
         const myChart = echarts.init(chart);
         const dataKeys = Object.keys(optionsData);
-
         const options = {
             xAxis: {
                 type: 'category',
@@ -143,7 +140,6 @@ const handleCpuOptions = (optionsData, xAxis) => {
                 : typeDataLine,
         };
         myChart.setOption(options);
-        xAxis.length === 0 && (empty.value = true);
         window.addEventListener('resize', function () {
             myChart.resize();
         });
@@ -190,7 +186,4 @@ watch(
         margin-top: 8px;
     }
 }
-.empty {
-    height: 300px;
-}
 </style>

src/views/link/DashBoard/components/Jvm.vue

@@ -33,8 +33,7 @@
                     >
                 </a-range-picker>
             </div>
-            <a-empty v-if="empty" class="empty" />
+            <div ref="chartRef" style="width: 100%; height: 300px"></div>
-            <div v-else ref="chartRef" style="width: 100%; height: 300px"></div>
         </div>
     </a-spin>
 </template>
@@ -53,7 +52,6 @@ import {
 } from './tool.ts';
 
 const chartRef = ref<Record<string, any>>({});
-const empty = ref(false);
 const loading = ref(false);
 const data = ref({
     type: 'hour',
@@ -147,7 +145,6 @@ const handleJVMOptions = (optionsData, xAxis) => {
                 : typeDataLine,
         };
         myChart.setOption(options);
-        xAxis.length === 0 && (empty.value = true);
         window.addEventListener('resize', function () {
             myChart.resize();
         });
@@ -194,7 +191,4 @@ watch(
         margin-top: 8px;
     }
 }
-.empty {
-    height: 300px;
-}
 </style>

src/views/link/DashBoard/components/Network.vue

@@ -37,18 +37,13 @@
                         @change="pickerTimeChange"
                     >
                         <template #suffixIcon
-                            ><a-icon type="calendar"
+                            ><AIcon type="CalendarOutlined"
                         /></template>
                     </a-range-picker>
                 </div>
             </div>
             <div>
-                <a-empty v-if="empty" class="empty" />
+                <div ref="chartRef" style="width: 100%; height: 350px"></div>
-                <div
-                    v-else
-                    ref="chartRef"
-                    style="width: 100%; height: 350px"
-                ></div>
             </div>
         </div>
     </a-spin>
@@ -61,13 +56,11 @@ import {
     typeDataLine,
     areaStyle,
     networkParams,
-    arrayReverse,
 } from './tool.ts';
 import moment from 'moment';
 import * as echarts from 'echarts';
 
 const chartRef = ref<Record<string, any>>({});
-const empty = ref(false);
 const loading = ref(false);
 const data = ref({
     type: 'bytesRead',
@@ -134,7 +127,6 @@ const setOptions = (data, key) => ({
 
 const handleNetworkOptions = (optionsData, xAxis) => {
     const chart = chartRef.value;
-
     if (chart) {
         const myChart = echarts.init(chart);
         const dataKeys = Object.keys(optionsData);
@@ -148,7 +140,7 @@ const handleNetworkOptions = (optionsData, xAxis) => {
                 type: 'value',
             },
             grid: {
-                left: '80px',
+                left: '100px',
                 right: '50px',
             },
             tooltip: {
@@ -161,7 +153,6 @@ const handleNetworkOptions = (optionsData, xAxis) => {
                 : typeDataLine,
         };
         myChart.setOption(options);
-        // xAxis.length === 0 && (empty.value = true);
         window.addEventListener('resize', function () {
             myChart.resize();
         });
@@ -215,7 +206,4 @@ watch(
     display: flex;
     align-items: center;
 }
-.empty {
-    height: 300px;
-}
 </style>