feat: 视频中心, 仪表盘开发

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="page-container">
+    <div class="wrapper">
         <div class="card-header">
             <div class="title">{{ title }}</div>
             <div class="tools">
@@ -13,18 +13,28 @@
                         <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-range-picker
+                        format="YYYY-MM-DD HH:mm:ss"
+                        valueFormat="x"
+                        v-model:value="dateRange"
+                    />
                 </a-space>
             </div>
         </div>
-        <div class="chart" ref="chartRef"></div>
+        <div v-if="chartData.length" class="chart" ref="chartRef"></div>
+        <a-empty v-else class="no-data" description="暂无数据"></a-empty>
     </div>
 </template>
 
 <script setup lang="ts">
 import * as echarts from 'echarts';
+import moment from 'moment';
 
 // const { proxy } = <any>getCurrentInstance();
+type Emits = {
+    (e: 'change', data: any): void;
+};
+const emits = defineEmits<Emits>();
 
 const props = defineProps({
     title: { type: String, default: '' },
@@ -34,7 +44,10 @@ const props = defineProps({
 
 // 统计时间维度
 const dimension = ref('week');
-const dateRange = ref<any>([]);
+const dateRange = ref<any>([
+    moment().subtract(1, 'week').format('x'),
+    moment().format('x'),
+]);
 
 /**
  * 绘制图表
@@ -92,6 +105,7 @@ const createChart = () => {
                 },
             ],
         };
+
         myChart.setOption(options);
         window.addEventListener('resize', function () {
             myChart.resize();
@@ -101,24 +115,73 @@ const createChart = () => {
 
 watch(
     () => props.chartData,
-    () => createChart(),
+    (val) => {
+        console.log('createChart', val);
+
+        createChart();
+    },
+    { deep: true },
+);
+watch(
+    () => dateRange.value,
+    (val) => {
+        emits('change', {
+            time: {
+                start: val[0],
+                end: val[1],
+            },
+        });
+    },
     { immediate: true, deep: true },
 );
+watch(
+    () => dimension.value,
+    (val) => {
+        if (val === 'today') {
+            dateRange[0] = moment().startOf('day').format('x');
+        }
+        if (val === 'week') {
+            dateRange[0] = moment().subtract(1, 'week').format('x');
+        }
+        if (val === 'month') {
+            dateRange[0] = moment().subtract(1, 'month').format('x');
+        }
+        if (val === 'year') {
+            dateRange[0] = moment().subtract(1, 'year').format('x');
+        }
+        dateRange[1] = moment().format('x');
+        emits('change', {
+            time: {
+                start: dateRange[0],
+                end: dateRange[1],
+            },
+        });
+    },
+);
 </script>
 
 <style scoped lang="less">
-.page-container {
+.wrapper {
+    padding: 24px;
+    background-color: #fff;
     .card-header {
         display: flex;
         justify-content: space-between;
+        margin-bottom: 24px;
         .title {
             font-weight: 700;
             font-size: 16px;
         }
     }
-    .chart {
+    .chart,
+    .no-data {
         width: 100%;
-        height: 100%;
+        min-height: calc(100vh - 430px);
+    }
+    .no-data {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
     }
 }
 </style>

src/views/media/DashBoard/index.vue

@@ -34,8 +34,12 @@
                     :value="aggPlayingTotal"
                 />
             </a-col>
-            <a-col :span="24">
+            <a-col :span="24" class="dash-board-bottom">
-                <Card title="播放数量(人次)" :chartData="chartData" />
+                <Card
+                    title="播放数量(人次)"
+                    :chartData="chartData"
+                    @change="getPlayCount"
+                />
             </a-col>
         </a-row>
     </div>
@@ -50,6 +54,7 @@ import dashboardApi from '@/api/media/dashboard';
 import type { Footer } from '@/views/media/DashBoard/typings';
 import encodeQuery from '@/utils/encodeQuery';
 import { timestampFormat } from '@/utils/utils';
+import moment from 'moment';
 
 // 设备
 const deviceFooter = ref<Footer[]>([]);
@@ -114,10 +119,12 @@ const aggTotal = ref(0);
 const getAggData = () => {
     dashboardApi.agg().then((res) => {
         aggTotal.value = res.result.total;
-        aggFooter.value.push({
+        aggFooter.value = [
-            title: '总时长',
+            {
-            value: timestampFormat(res.result.duration),
+                title: '总时长',
-        });
+                value: timestampFormat(res.result.duration),
+            },
+        ];
     });
 };
 getAggData();
@@ -128,10 +135,12 @@ const aggPlayingTotal = ref(0);
 const getAggPlayingData = () => {
     dashboardApi.aggPlaying().then((res) => {
         aggTotal.value = res.result.playingTotal;
-        aggPlayingFooter.value.push({
+        aggPlayingFooter.value = [
-            title: '播放人数',
+            {
-            value: res.result.playerTotal,
+                title: '播放人数',
-        });
+                value: res.result.playerTotal,
+            },
+        ];
     });
 };
 getAggPlayingData();
@@ -140,24 +149,61 @@ getAggPlayingData();
  * 获取播放数量(人次)
  */
 const chartData = ref([]);
-const getPlayCount = async () => {
+const getPlayCount = async (params: any) => {
-    const params = {};
+    let _time = '1h';
-    dashboardApi.getPlayCount(params).then((res) => {
+    let _limit = 12;
-        let result: any = [];
+    const dt = params.time.end - params.time.start;
-        res.result.forEach((item: any) => {
+    const hour = 60 * 60 * 1000;
-            result = [...result, ...item.data];
+    const day = hour * 24;
+    const month = day * 30;
+    const year = 365 * day;
+    if (dt <= day) {
+        _limit = Math.abs(Math.ceil(dt / hour));
+    } else if (dt > day && dt < year) {
+        _limit = Math.abs(Math.ceil(dt / day));
+        _time = '1d';
+    } else if (dt >= year) {
+        _limit = Math.abs(Math.floor(dt / month));
+        _time = '1M';
+    }
+    dashboardApi
+        .getPlayCount([
+            {
+                dashboard: 'media_stream',
+                object: 'play_count',
+                measurement: 'quantity',
+                dimension: 'agg',
+                group: 'playCount',
+                params: {
+                    time: _time,
+                    from: moment(Number(params.time.start)).format(
+                        'YYYY-MM-DD HH:mm:ss',
+                    ),
+                    to: moment(Number(params.time.end)).format(
+                        'YYYY-MM-DD HH:mm:ss',
+                    ),
+                    limit: _limit,
+                },
+            },
+        ])
+        .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,
+            }));
         });
-        chartData.value = result.map((m: any) => ({
-            x: m.timeString,
-            value: m.value,
-        }));
-    });
 };
-getPlayCount();
 </script>
 
 <style lang="less" scoped>
 .page-container {
     padding: 24px;
+    .dash-board-bottom {
+        margin-top: 24px;
+    }
 }
 </style>

src/views/media/DashBoard/typings.d.ts

@@ -11,6 +11,6 @@ export type AggPlaying = {
 export type Footer = {
     title: string;
     value: number | string;
-    status?: "default" | "error" | "success" | "warning" | "processing"
+    status?: "default" | "error" | "success" | "warning" | "processing" | ""
 }
 

src/views/media/Home/components/BasicCountCard.vue

@@ -36,10 +36,10 @@ onMounted(() => {
 });
 
 const getData = () => {
-    homeApi.deviceCount().then((resp) => {
+    homeApi.deviceCount({}).then((resp) => {
         deviceCount.value = resp.result;
     });
-    homeApi.channelCount().then((resp) => {
+    homeApi.channelCount({}).then((resp) => {
         channelCount.value = resp.result;
     });
 };