|
|
|
|
@ -1,6 +1,6 @@
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
// import axios from "axios";
|
|
|
|
|
import { onMounted, ref, reactive } from "vue";
|
|
|
|
|
import { onMounted, ref, reactive, toRaw } from "vue";
|
|
|
|
|
// import dplayer from "@/components/VideoPlayer/MyPlayer.vue";
|
|
|
|
|
// import OurPlayer from "@/components/VideoPlayer/OurPlayer.vue";
|
|
|
|
|
import { PureTableBar } from "@/components/RePureTableBar";
|
|
|
|
|
@ -11,6 +11,13 @@ import { ElMessageBox } from "element-plus";
|
|
|
|
|
// import { getToken, formatToken } from "@/utils/auth";
|
|
|
|
|
import { getHomeList, getEvents } from "@/api/home";
|
|
|
|
|
import { welcomeUtil } from "./hook";
|
|
|
|
|
import TypeIt from "@/components/ReTypeit";
|
|
|
|
|
import Pie from "./components/Pie.vue";
|
|
|
|
|
import TopLine from "./components/TopLine.vue";
|
|
|
|
|
import Bar from "./components/Bar.vue";
|
|
|
|
|
import Radar from "./components/Radar.vue";
|
|
|
|
|
import Line from "./components/Line.vue";
|
|
|
|
|
import { abnormal, resource } from "./static";
|
|
|
|
|
|
|
|
|
|
defineOptions({
|
|
|
|
|
name: "Welcome"
|
|
|
|
|
@ -90,7 +97,7 @@ function onSearch() {
|
|
|
|
|
}
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
loading.value = false;
|
|
|
|
|
}, 500);
|
|
|
|
|
}, 800);
|
|
|
|
|
});
|
|
|
|
|
// axios({
|
|
|
|
|
// url: AdminHostUrl,
|
|
|
|
|
@ -258,9 +265,15 @@ function handleUpdate(row) {
|
|
|
|
|
openDialog("我的", row);
|
|
|
|
|
console.log(row);
|
|
|
|
|
}
|
|
|
|
|
const dataValue1 = [2000, 3000, 2000, 2500, 3500, 3100];
|
|
|
|
|
const dataValue2 = [3100, 3500, 2000, 2500, 2000, 3000];
|
|
|
|
|
// function handleDelete(row) {
|
|
|
|
|
// console.log(row);
|
|
|
|
|
// }
|
|
|
|
|
// const skeletonLoading = ref(true);
|
|
|
|
|
// setTimeout(() => {
|
|
|
|
|
// skeletonLoading.value = !skeletonLoading.value;
|
|
|
|
|
// }, 800);
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
onSearch();
|
|
|
|
|
});
|
|
|
|
|
@ -280,6 +293,7 @@ onMounted(() => {
|
|
|
|
|
:inline="true"
|
|
|
|
|
:model="formInline"
|
|
|
|
|
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
|
|
|
|
v-if="false"
|
|
|
|
|
>
|
|
|
|
|
<el-form-item label="日期:" style="font-weight: bold">
|
|
|
|
|
<el-date-picker
|
|
|
|
|
@ -353,7 +367,12 @@ onMounted(() => {
|
|
|
|
|
<el-button @click="handleRefresh">刷新 </el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<PureTableBar title="首页列表" :columns="columns" @refresh="onSearch">
|
|
|
|
|
<PureTableBar
|
|
|
|
|
title="首页列表"
|
|
|
|
|
:columns="columns"
|
|
|
|
|
@refresh="onSearch"
|
|
|
|
|
v-if="false"
|
|
|
|
|
>
|
|
|
|
|
<template v-slot="{ size, dynamicColumns }">
|
|
|
|
|
<pure-table
|
|
|
|
|
border
|
|
|
|
|
@ -387,17 +406,6 @@ onMounted(() => {
|
|
|
|
|
class="w-[100px] h-[100px]"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
<!-- <template #video="{ row, index }">
|
|
|
|
|
<video
|
|
|
|
|
width="180"
|
|
|
|
|
height="180"
|
|
|
|
|
controls
|
|
|
|
|
:id="'video-' + index"
|
|
|
|
|
@play="playVideo(row, index)"
|
|
|
|
|
>
|
|
|
|
|
<source :src="row.video_dir" type="video/mp4" />
|
|
|
|
|
</video>
|
|
|
|
|
</template> -->
|
|
|
|
|
<template #operation="{ row }">
|
|
|
|
|
<el-button
|
|
|
|
|
class="reset-margin"
|
|
|
|
|
@ -408,79 +416,403 @@ onMounted(() => {
|
|
|
|
|
>
|
|
|
|
|
播放视频
|
|
|
|
|
</el-button>
|
|
|
|
|
<!-- <el-popconfirm title="是否确认删除?" @confirm="handleDelete(row)">
|
|
|
|
|
<template #reference>
|
|
|
|
|
<el-button
|
|
|
|
|
class="reset-margin"
|
|
|
|
|
link
|
|
|
|
|
type="primary"
|
|
|
|
|
:size="size"
|
|
|
|
|
:icon="useRenderIcon(Delete)"
|
|
|
|
|
>
|
|
|
|
|
删除
|
|
|
|
|
</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-popconfirm> -->
|
|
|
|
|
</template>
|
|
|
|
|
</pure-table>
|
|
|
|
|
</template>
|
|
|
|
|
</PureTableBar>
|
|
|
|
|
<!-- <el-table
|
|
|
|
|
:data="tableData"
|
|
|
|
|
stripe
|
|
|
|
|
:default-sort="{ prop: 'record_time', order: 'descending' }"
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
<el-row :gutter="16">
|
|
|
|
|
<el-col
|
|
|
|
|
:xs="24"
|
|
|
|
|
:sm="24"
|
|
|
|
|
:md="12"
|
|
|
|
|
:lg="8"
|
|
|
|
|
:xl="8"
|
|
|
|
|
class="mb-[18px]"
|
|
|
|
|
v-motion
|
|
|
|
|
:initial="{
|
|
|
|
|
opacity: 0,
|
|
|
|
|
y: 100
|
|
|
|
|
}"
|
|
|
|
|
:enter="{
|
|
|
|
|
opacity: 1,
|
|
|
|
|
y: 0,
|
|
|
|
|
transition: {
|
|
|
|
|
delay: 400
|
|
|
|
|
}
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-card shadow="never">
|
|
|
|
|
<el-skeleton animated :rows="7" :loading="loading">
|
|
|
|
|
<template #default>
|
|
|
|
|
<div
|
|
|
|
|
class="w-full h-[32px] flex items-center justify-between mb-[8px]"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column prop="record_time" sortable label="记录仪日期时间" />
|
|
|
|
|
<el-table-column prop="police_id" label="警号" />
|
|
|
|
|
<el-table-column prop="event_type" label="违法行为" />
|
|
|
|
|
|
|
|
|
|
<el-table-column prop="is_violation" label="是否违规">
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<span v-if="scope.row.is_violation">是</span>
|
|
|
|
|
<span v-else>否</span>
|
|
|
|
|
<div class="flex items-center justify-start">
|
|
|
|
|
<!-- <img :src="abnormal" /> -->
|
|
|
|
|
<component :is="toRaw(abnormal)" :key="abnormal" />
|
|
|
|
|
|
|
|
|
|
<!-- <SvgComponent :data="abnormal" /> -->
|
|
|
|
|
<!-- <div class="abnormal-icon">
|
|
|
|
|
<abnormal />
|
|
|
|
|
</div> -->
|
|
|
|
|
<span class="abnormal-title ml-2">异常总量</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<div class="flex items-center mr-3">
|
|
|
|
|
<span class="abnormal-proportion">周同比12%</span>
|
|
|
|
|
<span class="delta-down" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<span class="abnormal-proportion">日同比11%</span>
|
|
|
|
|
<span class="delta" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-full h-10 flex items-center">
|
|
|
|
|
<h1 class="text-3xl">123131</h1>
|
|
|
|
|
</div>
|
|
|
|
|
<TopLine :data="dataValue1" color="#FECA50" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
<el-table-column prop="ai_analysis" label="违规行为" />
|
|
|
|
|
<el-table-column prop="relative_time" label="时间点">
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<span>第 {{ scope.row.relative_time }} 秒</span>
|
|
|
|
|
</el-skeleton>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col
|
|
|
|
|
:xs="24"
|
|
|
|
|
:sm="24"
|
|
|
|
|
:md="12"
|
|
|
|
|
:lg="8"
|
|
|
|
|
:xl="8"
|
|
|
|
|
class="mb-[18px]"
|
|
|
|
|
v-motion
|
|
|
|
|
:initial="{
|
|
|
|
|
opacity: 0,
|
|
|
|
|
y: 100
|
|
|
|
|
}"
|
|
|
|
|
:enter="{
|
|
|
|
|
opacity: 1,
|
|
|
|
|
y: 0,
|
|
|
|
|
transition: {
|
|
|
|
|
delay: 400
|
|
|
|
|
}
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-card shadow="never">
|
|
|
|
|
<el-skeleton animated :rows="7" :loading="loading">
|
|
|
|
|
<template #default>
|
|
|
|
|
<div
|
|
|
|
|
class="w-full h-[32px] flex items-center justify-between mb-[8px]"
|
|
|
|
|
>
|
|
|
|
|
<div class="flex items-center justify-start">
|
|
|
|
|
<component :is="toRaw(resource)" :key="resource" />
|
|
|
|
|
<!-- <div class="resource-icon">
|
|
|
|
|
<resource />
|
|
|
|
|
</div> -->
|
|
|
|
|
<span class="abnormal-title ml-2">资源使用</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<div class="flex items-center mr-3">
|
|
|
|
|
<span class="abnormal-proportion">周同比12%</span>
|
|
|
|
|
<span class="delta-down" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<span class="abnormal-proportion">日同比11%</span>
|
|
|
|
|
<span class="delta" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-full h-10 flex items-center">
|
|
|
|
|
<h1 class="text-3xl">123131</h1>
|
|
|
|
|
</div>
|
|
|
|
|
<TopLine :data="dataValue2" color="#5681F2" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
<el-table-column prop="small_image" label="缩率图">
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<el-image
|
|
|
|
|
:preview-src-list="[scope.row.small_image]"
|
|
|
|
|
style="width: 65px; height: 65px"
|
|
|
|
|
:src="scope.row.small_image"
|
|
|
|
|
:preview-teleported="true"
|
|
|
|
|
</el-skeleton>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col
|
|
|
|
|
:xs="24"
|
|
|
|
|
:sm="24"
|
|
|
|
|
:md="12"
|
|
|
|
|
:lg="8"
|
|
|
|
|
:xl="8"
|
|
|
|
|
class="mb-[18px]"
|
|
|
|
|
v-motion
|
|
|
|
|
:initial="{
|
|
|
|
|
opacity: 0,
|
|
|
|
|
y: 100
|
|
|
|
|
}"
|
|
|
|
|
:enter="{
|
|
|
|
|
opacity: 1,
|
|
|
|
|
y: 0,
|
|
|
|
|
transition: {
|
|
|
|
|
delay: 400
|
|
|
|
|
}
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-card shadow="never">
|
|
|
|
|
<el-skeleton animated :rows="7" :loading="loading">
|
|
|
|
|
<template #default>
|
|
|
|
|
<div
|
|
|
|
|
class="w-full h-[32px] flex items-center justify-between mb-[8px]"
|
|
|
|
|
>
|
|
|
|
|
<div class="flex items-center justify-start">
|
|
|
|
|
<!-- <component :is="toRaw(analysis)" :key="analysis" /> -->
|
|
|
|
|
<svg
|
|
|
|
|
width="32"
|
|
|
|
|
height="32"
|
|
|
|
|
viewBox="0 0 32 32"
|
|
|
|
|
fill="none"
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
>
|
|
|
|
|
<rect width="32" height="32" fill="#EEEEEE" />
|
|
|
|
|
<g clip-path="url(#clip)">
|
|
|
|
|
<rect
|
|
|
|
|
width="1440"
|
|
|
|
|
height="900"
|
|
|
|
|
transform="translate(-1048 -108)"
|
|
|
|
|
fill="#F5F5F5"
|
|
|
|
|
/>
|
|
|
|
|
<rect
|
|
|
|
|
x="-16"
|
|
|
|
|
y="-16"
|
|
|
|
|
width="384"
|
|
|
|
|
height="156"
|
|
|
|
|
rx="8"
|
|
|
|
|
fill="white"
|
|
|
|
|
/>
|
|
|
|
|
<circle cx="16" cy="16" r="16" fill="url(#linear)" />
|
|
|
|
|
<path
|
|
|
|
|
d="M22.6668 9.66675H9.3335V18.3334H22.6668V9.66675Z"
|
|
|
|
|
fill="white"
|
|
|
|
|
stroke="white"
|
|
|
|
|
stroke-width="2"
|
|
|
|
|
stroke-linecap="round"
|
|
|
|
|
stroke-linejoin="round"
|
|
|
|
|
/>
|
|
|
|
|
<path
|
|
|
|
|
d="M15.3335 12.6667L17.3335 14.0001L15.3335 15.3334V12.6667Z"
|
|
|
|
|
fill="white"
|
|
|
|
|
stroke="#2ED7D7"
|
|
|
|
|
stroke-width="2"
|
|
|
|
|
stroke-linecap="round"
|
|
|
|
|
stroke-linejoin="round"
|
|
|
|
|
/>
|
|
|
|
|
<path
|
|
|
|
|
d="M11.6667 21.3333H10"
|
|
|
|
|
stroke="white"
|
|
|
|
|
stroke-linecap="round"
|
|
|
|
|
stroke-linejoin="round"
|
|
|
|
|
/>
|
|
|
|
|
<path
|
|
|
|
|
d="M13.6665 21.3333H21.9998"
|
|
|
|
|
stroke="white"
|
|
|
|
|
stroke-linecap="round"
|
|
|
|
|
stroke-linejoin="round"
|
|
|
|
|
/>
|
|
|
|
|
<path
|
|
|
|
|
d="M13.6665 21.3333C13.6665 21.8856 13.2188 22.3333 12.6665 22.3333C12.1142 22.3333 11.6665 21.8856 11.6665 21.3333C11.6665 20.781 12.1142 20.3333 12.6665 20.3333C13.2188 20.3333 13.6665 20.781 13.6665 21.3333Z"
|
|
|
|
|
stroke="white"
|
|
|
|
|
stroke-linecap="round"
|
|
|
|
|
stroke-linejoin="round"
|
|
|
|
|
/>
|
|
|
|
|
</g>
|
|
|
|
|
<defs>
|
|
|
|
|
<linearGradient
|
|
|
|
|
id="linear"
|
|
|
|
|
x1="4.5"
|
|
|
|
|
y1="7"
|
|
|
|
|
x2="27.5"
|
|
|
|
|
y2="30"
|
|
|
|
|
gradientUnits="userSpaceOnUse"
|
|
|
|
|
>
|
|
|
|
|
<stop stop-color="#5FFCFC" />
|
|
|
|
|
<stop offset="1" stop-color="#13C2C2" />
|
|
|
|
|
</linearGradient>
|
|
|
|
|
<clipPath id="clip">
|
|
|
|
|
<rect
|
|
|
|
|
width="1440"
|
|
|
|
|
height="900"
|
|
|
|
|
fill="white"
|
|
|
|
|
transform="translate(-1048 -108)"
|
|
|
|
|
/>
|
|
|
|
|
</clipPath>
|
|
|
|
|
</defs>
|
|
|
|
|
</svg>
|
|
|
|
|
<span class="abnormal-title ml-2">今日分析进度</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<div class="flex items-center mr-3">
|
|
|
|
|
<span class="abnormal-proportion">周同比12%</span>
|
|
|
|
|
<span class="delta-down" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<span class="abnormal-proportion">日同比11%</span>
|
|
|
|
|
<span class="delta" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-full h-10 flex items-center">
|
|
|
|
|
<h1 class="text-3xl">78</h1>
|
|
|
|
|
</div>
|
|
|
|
|
<el-progress
|
|
|
|
|
style="height: 6vh"
|
|
|
|
|
:stroke-width="20"
|
|
|
|
|
:percentage="78"
|
|
|
|
|
:text-inside="true"
|
|
|
|
|
color="#13C2C2"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
<el-table-column prop="car_number" label="车牌号" />
|
|
|
|
|
|
|
|
|
|
<el-table-column show-overflow-tooltip label="视频">
|
|
|
|
|
<template v-slot="scope">
|
|
|
|
|
<el-button @click="playVideo(scope.row)">
|
|
|
|
|
<span v-if="scope.row.video_dir">播放视频</span>
|
|
|
|
|
<span v-else>暂无视频</span>
|
|
|
|
|
</el-button>
|
|
|
|
|
</el-skeleton>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col
|
|
|
|
|
:xs="24"
|
|
|
|
|
:sm="24"
|
|
|
|
|
:md="17"
|
|
|
|
|
:lg="17"
|
|
|
|
|
:xl="17"
|
|
|
|
|
class="mb-[18px]"
|
|
|
|
|
v-motion
|
|
|
|
|
:initial="{
|
|
|
|
|
opacity: 0,
|
|
|
|
|
y: 100
|
|
|
|
|
}"
|
|
|
|
|
:enter="{
|
|
|
|
|
opacity: 1,
|
|
|
|
|
y: 0,
|
|
|
|
|
transition: {
|
|
|
|
|
delay: 400
|
|
|
|
|
}
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-card shadow="never">
|
|
|
|
|
<template #header>
|
|
|
|
|
<TypeIt
|
|
|
|
|
class="font-semibold"
|
|
|
|
|
:className="'type-it1'"
|
|
|
|
|
:values="['违规总量']"
|
|
|
|
|
:cursor="false"
|
|
|
|
|
:speed="120"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
<el-skeleton animated :rows="7" :loading="loading">
|
|
|
|
|
<template #default>
|
|
|
|
|
<Bar />
|
|
|
|
|
</template>
|
|
|
|
|
</el-skeleton>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col
|
|
|
|
|
:xs="24"
|
|
|
|
|
:sm="24"
|
|
|
|
|
:md="7"
|
|
|
|
|
:lg="7"
|
|
|
|
|
:xl="7"
|
|
|
|
|
class="mb-[18px]"
|
|
|
|
|
v-motion
|
|
|
|
|
:initial="{
|
|
|
|
|
opacity: 0,
|
|
|
|
|
y: 100
|
|
|
|
|
}"
|
|
|
|
|
:enter="{
|
|
|
|
|
opacity: 1,
|
|
|
|
|
y: 0,
|
|
|
|
|
transition: {
|
|
|
|
|
delay: 400
|
|
|
|
|
}
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-card shadow="never">
|
|
|
|
|
<template #header>
|
|
|
|
|
<TypeIt
|
|
|
|
|
class="font-semibold"
|
|
|
|
|
:className="'type-it2'"
|
|
|
|
|
:values="['异常表现']"
|
|
|
|
|
:cursor="false"
|
|
|
|
|
:speed="120"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
<el-skeleton animated :rows="7" :loading="loading">
|
|
|
|
|
<template #default>
|
|
|
|
|
<Radar />
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<el-pagination
|
|
|
|
|
class="tablePage"
|
|
|
|
|
@size-change="handleSizeChange"
|
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
|
v-model:current-page="currentPage"
|
|
|
|
|
:page-sizes="[10, 20, 30, 40]"
|
|
|
|
|
v-model:page-size="pageSize"
|
|
|
|
|
layout="total, sizes, prev, pager, next"
|
|
|
|
|
:total="totalNumber"
|
|
|
|
|
/> -->
|
|
|
|
|
</el-skeleton>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col
|
|
|
|
|
:xs="24"
|
|
|
|
|
:sm="24"
|
|
|
|
|
:md="12"
|
|
|
|
|
:lg="12"
|
|
|
|
|
:xl="12"
|
|
|
|
|
class="mb-[18px]"
|
|
|
|
|
v-motion
|
|
|
|
|
:initial="{
|
|
|
|
|
opacity: 0,
|
|
|
|
|
y: 100
|
|
|
|
|
}"
|
|
|
|
|
:enter="{
|
|
|
|
|
opacity: 1,
|
|
|
|
|
y: 0,
|
|
|
|
|
transition: {
|
|
|
|
|
delay: 400
|
|
|
|
|
}
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-card shadow="never">
|
|
|
|
|
<template #header>
|
|
|
|
|
<TypeIt
|
|
|
|
|
class="font-semibold"
|
|
|
|
|
:className="'type-it3'"
|
|
|
|
|
:values="['视频分析']"
|
|
|
|
|
:cursor="false"
|
|
|
|
|
:speed="120"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
<el-skeleton animated :rows="7" :loading="loading">
|
|
|
|
|
<template #default>
|
|
|
|
|
<Pie />
|
|
|
|
|
</template>
|
|
|
|
|
</el-skeleton>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col
|
|
|
|
|
:xs="24"
|
|
|
|
|
:sm="24"
|
|
|
|
|
:md="12"
|
|
|
|
|
:lg="12"
|
|
|
|
|
:xl="12"
|
|
|
|
|
class="mb-[18px]"
|
|
|
|
|
v-motion
|
|
|
|
|
:initial="{
|
|
|
|
|
opacity: 0,
|
|
|
|
|
y: 100
|
|
|
|
|
}"
|
|
|
|
|
:enter="{
|
|
|
|
|
opacity: 1,
|
|
|
|
|
y: 0,
|
|
|
|
|
transition: {
|
|
|
|
|
delay: 400
|
|
|
|
|
}
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-card shadow="never">
|
|
|
|
|
<template #header>
|
|
|
|
|
<TypeIt
|
|
|
|
|
class="font-semibold"
|
|
|
|
|
:className="'type-it4'"
|
|
|
|
|
:values="['视频分析结束时间(每日)']"
|
|
|
|
|
:cursor="false"
|
|
|
|
|
:speed="120"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
<el-skeleton animated :rows="7" :loading="loading">
|
|
|
|
|
<template #default>
|
|
|
|
|
<Line />
|
|
|
|
|
</template>
|
|
|
|
|
</el-skeleton>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
@ -516,4 +848,43 @@ a {
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.abnormal-title {
|
|
|
|
|
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
|
|
|
|
|
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.abnormal-proportion {
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
|
|
|
|
|
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #4079ed;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.delta {
|
|
|
|
|
width: 0;
|
|
|
|
|
height: 0;
|
|
|
|
|
border: 8px solid transparent;
|
|
|
|
|
border-top-width: 0;
|
|
|
|
|
border-bottom-color: #52c41a;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.delta-down {
|
|
|
|
|
width: 0;
|
|
|
|
|
height: 0;
|
|
|
|
|
border: 8px solid transparent;
|
|
|
|
|
border-top-color: #ff4d4f;
|
|
|
|
|
border-bottom-width: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* .type-it1 {
|
|
|
|
|
font-family: PingFang SC;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #333;
|
|
|
|
|
} */
|
|
|
|
|
</style>
|
|
|
|
|
|
JINGYJ
1 year ago