Yaxin
/
Tp_Web2.0
forked from kongfp/Tp_Web2.0
31
0
Fork 0
Code Pull Requests Activity

feat: 首页冲突

Browse Source
develop
JINGYJ 1 year ago
parent 4daa662ef3
commit 89b46fc0fd
1 changed files with 454 additions and 83 deletions
Show Stats Download Patch File Download Diff File

537
src/views/welcome/index.vue
Unescape Escape View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
// import axios from "axios"; // 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 dplayer from "@/components/VideoPlayer/MyPlayer.vue";
// import OurPlayer from "@/components/VideoPlayer/OurPlayer.vue"; // import OurPlayer from "@/components/VideoPlayer/OurPlayer.vue";
import { PureTableBar } from "@/components/RePureTableBar"; import { PureTableBar } from "@/components/RePureTableBar";
@ -11,6 +11,13 @@ import { ElMessageBox } from "element-plus";
// import { getToken, formatToken } from "@/utils/auth"; // import { getToken, formatToken } from "@/utils/auth";
import { getHomeList, getEvents } from "@/api/home"; import { getHomeList, getEvents } from "@/api/home";
import { welcomeUtil } from "./hook"; 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({ defineOptions({
name: "Welcome" name: "Welcome"
@ -90,7 +97,7 @@ function onSearch() {
} }
setTimeout(() => { setTimeout(() => {
loading.value = false; loading.value = false;
}, 500); }, 800);
}); });
// axios({ // axios({
// url: AdminHostUrl, // url: AdminHostUrl,
@ -258,9 +265,15 @@ function handleUpdate(row) {
openDialog("我的", row); openDialog("我的", row);
console.log(row); console.log(row);
} }
const dataValue1 = [2000, 3000, 2000, 2500, 3500, 3100];
const dataValue2 = [3100, 3500, 2000, 2500, 2000, 3000];
// function handleDelete(row) { // function handleDelete(row) {
// console.log(row); // console.log(row);
// } // }
// const skeletonLoading = ref(true);
// setTimeout(() => {
// skeletonLoading.value = !skeletonLoading.value;
// }, 800);
onMounted(() => { onMounted(() => {
onSearch(); onSearch();
}); });
@ -280,6 +293,7 @@ onMounted(() => {
:inline="true" :inline="true"
:model="formInline" :model="formInline"
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]" 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-form-item label="日期:" style="font-weight: bold">
<el-date-picker <el-date-picker
@ -353,7 +367,12 @@ onMounted(() => {
<el-button @click="handleRefresh">刷新 </el-button> <el-button @click="handleRefresh">刷新 </el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<PureTableBar title="首页列表" :columns="columns" @refresh="onSearch"> <PureTableBar
title="首页列表"
:columns="columns"
@refresh="onSearch"
v-if="false"
>
<template v-slot="{ size, dynamicColumns }"> <template v-slot="{ size, dynamicColumns }">
<pure-table <pure-table
border border
@ -387,17 +406,6 @@ onMounted(() => {
class="w-[100px] h-[100px]" class="w-[100px] h-[100px]"
/> />
</template> </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 }"> <template #operation="{ row }">
<el-button <el-button
class="reset-margin" class="reset-margin"
@ -408,79 +416,403 @@ onMounted(() => {
> >
播放视频 播放视频
</el-button> </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> </template>
</pure-table> </pure-table>
</template> </template>
</PureTableBar> </PureTableBar>
<!-- <el-table <el-row :gutter="16">
:data="tableData" <el-col
stripe :xs="24"
:default-sort="{ prop: 'record_time', order: 'descending' }" :sm="24"
style="width: 100%" :md="12"
> :lg="8"
<el-table-column prop="record_time" sortable label="记录仪日期时间" /> :xl="8"
<el-table-column prop="police_id" label="警号" /> class="mb-[18px]"
<el-table-column prop="event_type" label="违法行为" /> v-motion
:initial="{
<el-table-column prop="is_violation" label="是否违规"> opacity: 0,
<template v-slot="scope"> y: 100
<span v-if="scope.row.is_violation">是</span> }"
<span v-else>否</span> :enter="{
</template> opacity: 1,
</el-table-column> y: 0,
transition: {
<el-table-column prop="ai_analysis" label="违规行为" /> delay: 400
<el-table-column prop="relative_time" label="时间点"> }
<template v-slot="scope"> }"
<span>第 {{ scope.row.relative_time }} 秒</span> >
</template> <el-card shadow="never">
</el-table-column> <el-skeleton animated :rows="7" :loading="loading">
<template #default>
<el-table-column prop="small_image" label="缩率图"> <div
<template v-slot="scope"> class="w-full h-[32px] flex items-center justify-between mb-[8px]"
<el-image >
:preview-src-list="[scope.row.small_image]" <div class="flex items-center justify-start">
style="width: 65px; height: 65px" <!-- <img :src="abnormal" /> -->
:src="scope.row.small_image" <component :is="toRaw(abnormal)" :key="abnormal" />
:preview-teleported="true"
/> <!-- <SvgComponent :data="abnormal" /> -->
</template> <!-- <div class="abnormal-icon">
</el-table-column> <abnormal />
</div> -->
<el-table-column prop="car_number" label="车牌号" /> <span class="abnormal-title ml-2">异常总量</span>
</div>
<el-table-column show-overflow-tooltip label="视频"> <div class="flex items-center">
<template v-slot="scope"> <div class="flex items-center mr-3">
<el-button @click="playVideo(scope.row)"> <span class="abnormal-proportion">周同比12%</span>
<span v-if="scope.row.video_dir">播放视频</span> <span class="delta-down" />
<span v-else>暂无视频</span> </div>
</el-button> <div class="flex items-center">
</template> <span class="abnormal-proportion">日同比11%</span>
</el-table-column> <span class="delta" />
</el-table> </div>
<el-pagination </div>
class="tablePage" </div>
@size-change="handleSizeChange" <div class="w-full h-10 flex items-center">
@current-change="handleCurrentChange" <h1 class="text-3xl">123131</h1>
v-model:current-page="currentPage" </div>
:page-sizes="[10, 20, 30, 40]" <TopLine :data="dataValue1" color="#FECA50" />
v-model:page-size="pageSize" </template>
layout="total, sizes, prev, pager, next" </el-skeleton>
:total="totalNumber" </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-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-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-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> </div>
</template> </template>
@ -516,4 +848,43 @@ a {
justify-content: flex-end; justify-content: flex-end;
margin: 0 auto; 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> </style>

Write Preview
Loading…
Cancel
Save