update: 视频中心首页/仪表盘组件替换
This commit is contained in:
JiangQiming
parent
4d9249d2a4
commit
6086a602ad
|
|
@ -1,31 +1,31 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="6">
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="6">
|
||||
<TopCard
|
||||
title="设备数量"
|
||||
:img="getImage('/media/dashboard-1.png')"
|
||||
:footer="deviceFooter"
|
||||
:value="deviceTotal"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
</j-col>
|
||||
<j-col :span="6">
|
||||
<TopCard
|
||||
title="通道数量"
|
||||
:img="getImage('/media/dashboard-2.png')"
|
||||
:footer="channelFooter"
|
||||
:value="channelTotal"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
</j-col>
|
||||
<j-col :span="6">
|
||||
<TopCard
|
||||
title="录像数量"
|
||||
:img="getImage('/media/dashboard-3.png')"
|
||||
:footer="aggFooter"
|
||||
:value="aggTotal"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
</j-col>
|
||||
<j-col :span="6">
|
||||
<TopCard
|
||||
title="播放中数量"
|
||||
tooltip="当前正在播放的通道数量之和"
|
||||
|
|
@ -33,15 +33,15 @@
|
|||
:footer="aggPlayingFooter"
|
||||
:value="aggPlayingTotal"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span="24" class="dash-board-bottom">
|
||||
</j-col>
|
||||
<j-col :span="24" class="dash-board-bottom">
|
||||
<Card
|
||||
title="播放数量(人次)"
|
||||
:chartData="chartData"
|
||||
@change="getPlayCount"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,11 @@
|
|||
<template>
|
||||
<a-card class="device-count-container">
|
||||
<template #title>
|
||||
<h5 class="title">基础统计</h5>
|
||||
</template>
|
||||
<template #extra>
|
||||
<span style="color: #1d39c4; cursor: pointer" @click="jumpPage"
|
||||
>详情</span
|
||||
>
|
||||
</template>
|
||||
|
||||
<div class="device-count-container">
|
||||
<h5 class="title">
|
||||
<span>基础统计</span>
|
||||
<a style="font-size: 12px;" @click="jumpPage">
|
||||
详情
|
||||
</a>
|
||||
</h5>
|
||||
<div class="box-list">
|
||||
<div class="box-item">
|
||||
<div class="label">设备数量</div>
|
||||
|
|
@ -21,7 +18,7 @@
|
|||
<img :src="getImage('/home/top-2.png')" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -56,6 +53,8 @@ const jumpPage = () => {
|
|||
|
||||
<style lang="less" scoped>
|
||||
.device-count-container {
|
||||
background-color: #fff;
|
||||
padding: 24px 14px;
|
||||
:deep(.ant-card-body) {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="14">
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="14">
|
||||
<BootCard
|
||||
:cardData="deviceBootConfig"
|
||||
cardTitle="视频中心引导"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span="10">
|
||||
</j-col>
|
||||
<j-col :span="10">
|
||||
<BasicCountCard />
|
||||
</a-col>
|
||||
<a-col :span="24" style="margin: 20px 0">
|
||||
</j-col>
|
||||
<j-col :span="24" style="margin: 20px 0">
|
||||
<PlatformPicCard />
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
</j-col>
|
||||
<j-col :span="24">
|
||||
<StepCard
|
||||
cardTitle="设备接入推荐步骤"
|
||||
tooltip="不同的设备因为通信协议的不同，存在接入步骤的差异"
|
||||
:dataList="deviceStepDetails"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -40,29 +40,18 @@ const deviceBootConfig: bootConfig[] = [
|
|||
{
|
||||
english: 'STEP1',
|
||||
label: '添加视频设备',
|
||||
link: '/media/device/Save',
|
||||
auth: hasPermission('/media/device/Save'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
link: 'media/Device/Save',
|
||||
auth: hasPermission('media/Device:add'),
|
||||
},
|
||||
{
|
||||
english: 'STEP2',
|
||||
label: '分屏展示',
|
||||
link: '/media/SplitScreen',
|
||||
auth: hasPermission('/media/SplitScreen'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
link: 'media/SplitScreen',
|
||||
},
|
||||
{
|
||||
english: 'STEP3',
|
||||
label: '国标级联',
|
||||
link: '/media/Cascade',
|
||||
auth: hasPermission('/media/Cascade'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
link: 'media/Cascade',
|
||||
},
|
||||
];
|
||||
const deviceStepDetails: recommendList[] = [
|
||||
|
|
@ -70,29 +59,21 @@ const deviceStepDetails: recommendList[] = [
|
|||
title: '添加视频设备',
|
||||
details: '根据视频设备的传输协议，在已创建的产品下添加对应的设备。',
|
||||
iconUrl: '/images/home/bottom-6.png',
|
||||
linkUrl: '/media/device/Save',
|
||||
auth: hasPermission('/media/device/Save'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
linkUrl: 'media/Device/Save',
|
||||
auth: hasPermission('media/Device:add'),
|
||||
},
|
||||
{
|
||||
title: '查看通道',
|
||||
details: '查看设备下的通道数据，可以进行直播、录制等操作。',
|
||||
iconUrl: '/images/home/bottom-7.png',
|
||||
linkUrl: '/media/device/Channel',
|
||||
auth: hasPermission('/media/device/Save'),
|
||||
dialogTag: 'accessMethod',
|
||||
linkUrl: 'media/Device/Channel',
|
||||
auth: hasPermission('media/Device:view'),
|
||||
},
|
||||
{
|
||||
title: '分屏展示',
|
||||
details: '对多个通道的视频流数据进行分屏展示。',
|
||||
iconUrl: '/images/home/bottom-8.png',
|
||||
linkUrl: '/media/SplitScreen',
|
||||
auth: hasPermission('/media/SplitScreen'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
linkUrl: 'media/SplitScreen',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue