feat: 视频中心, 仪表盘开发
This commit is contained in:
JiangQiming
parent
648ca2d7ff
commit
7308148b69
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -34,8 +34,12 @@
|
|||
:value="aggPlayingTotal"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<Card title="播放数量(人次)" :chartData="chartData" />
|
||||
<a-col :span="24" class="dash-board-bottom">
|
||||
<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({
|
||||
title: '总时长',
|
||||
value: timestampFormat(res.result.duration),
|
||||
});
|
||||
aggFooter.value = [
|
||||
{
|
||||
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({
|
||||
title: '播放人数',
|
||||
value: res.result.playerTotal,
|
||||
});
|
||||
aggPlayingFooter.value = [
|
||||
{
|
||||
title: '播放人数',
|
||||
value: res.result.playerTotal,
|
||||
},
|
||||
];
|
||||
});
|
||||
};
|
||||
getAggPlayingData();
|
||||
|
|
@ -140,24 +149,61 @@ 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];
|
||||
const getPlayCount = async (params: any) => {
|
||||
let _time = '1h';
|
||||
let _limit = 12;
|
||||
const dt = params.time.end - params.time.start;
|
||||
const hour = 60 * 60 * 1000;
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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" | ""
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
});
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue