feat: 视频中心,仪表盘图表card封装

src/api/media/dashboard.ts

@@ -6,5 +6,6 @@ export default {
     agg: () => server.get<Agg>(`/media/record/file/agg`),
     // 播放中数量
     aggPlaying: () => server.get<AggPlaying>(`/media/channel/playing/agg`),
-
+    // 获取播放数量(人次)
+    getPlayCount: (data: any) => server.post<any>(`/dashboard/_multi`, data),
 }

src/views/media/DashBoard/components/Card.vue

@@ -1,7 +1,124 @@
 <template>
-    <div class="page-container"></div>
+    <div class="page-container">
+        <div class="card-header">
+            <div class="title">{{ title }}</div>
+            <div class="tools">
+                <a-space>
+                    <a-radio-group
+                        v-model:value="dimension"
+                        button-style="solid"
+                    >
+                        <a-radio-button value="today">今日</a-radio-button>
+                        <a-radio-button value="week">近一周</a-radio-button>
+                        <a-radio-button value="month">近一月</a-radio-button>
+                        <a-radio-button value="year">近一年</a-radio-button>
+                    </a-radio-group>
+                    <a-range-picker v-model:value="dateRange" />
+                </a-space>
+            </div>
+        </div>
+        <div class="chart" ref="chartRef"></div>
+    </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import * as echarts from 'echarts';
 
-<style lang="less" scoped></style>
+// const { proxy } = <any>getCurrentInstance();
+
+const props = defineProps({
+    title: { type: String, default: '' },
+    // 图表数据
+    chartData: { type: Array, default: () => [] },
+});
+
+// 统计时间维度
+const dimension = ref('week');
+const dateRange = ref<any>([]);
+
+/**
+ * 绘制图表
+ */
+const chartRef = ref();
+const createChart = () => {
+    nextTick(() => {
+        const myChart = echarts.init(chartRef.value as HTMLElement);
+
+        const options = {
+            grid: {
+                left: '7%',
+                right: '5%',
+                top: '5%',
+                bottom: '5%',
+            },
+            tooltip: {
+                trigger: 'axis',
+                // 		formatter: '{a}<br>{b}: {c}',
+                axisPointer: {
+                    type: 'shadow',
+                },
+            },
+            xAxis: [
+                {
+                    data: props.chartData.map((m: any) => m.x),
+                },
+            ],
+            yAxis: [
+                {
+                    show: false,
+                    axisTick: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            type: 'solid',
+                        },
+                    },
+                },
+            ],
+            series: [
+                {
+                    name: '播放数量(人次)',
+                    type: 'line',
+                    symbol: 'circle',
+                    showSymbol: false,
+                    smooth: true,
+                    data: props.chartData.map(
+                        (m: any) => m.value && m.value.toFixed(2),
+                    ),
+                },
+            ],
+        };
+        myChart.setOption(options);
+        window.addEventListener('resize', function () {
+            myChart.resize();
+        });
+    });
+};
+
+watch(
+    () => props.chartData,
+    () => createChart(),
+    { immediate: true, deep: true },
+);
+</script>
+
+<style scoped lang="less">
+.page-container {
+    .card-header {
+        display: flex;
+        justify-content: space-between;
+        .title {
+            font-weight: 700;
+            font-size: 16px;
+        }
+    }
+    .chart {
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

src/views/media/DashBoard/index.vue

@@ -34,12 +34,16 @@
                     :value="aggPlayingTotal"
                 />
             </a-col>
+            <a-col :span="24">
+                <Card title="播放数量(人次)" :chartData="chartData" />
+            </a-col>
         </a-row>
     </div>
 </template>
 
 <script setup lang="ts">
 import TopCard from '@/views/media/DashBoard/components/TopCard.vue';
+import Card from '@/views/media/DashBoard/components/Card.vue';
 import { getImage } from '@/utils/comm';
 import homeApi from '@/api/media/home';
 import dashboardApi from '@/api/media/dashboard';
@@ -131,6 +135,25 @@ const getAggPlayingData = () => {
     });
 };
 getAggPlayingData();
+
+/**
+ * 获取播放数量(人次)
+ */
+const chartData = ref([]);
+const getPlayCount = async () => {
+    const params = {};
+    dashboardApi.getPlayCount(params).then((res) => {
+        let result: any = [];
+        res.result.forEach((item: any) => {
+            result = [...result, ...item.data];
+        });
+        chartData.value = result.map((m: any) => ({
+            x: m.timeString,
+            value: m.value,
+        }));
+    });
+};
+getPlayCount();
 </script>
 
 <style lang="less" scoped>