diff --git a/src/views/welcome/index.vue b/src/views/welcome/index.vue
index 34505e8..885aa59 100644
--- a/src/views/welcome/index.vue
+++ b/src/views/welcome/index.vue
@@ -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-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>
- </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>
- </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"
- />
- </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>
- </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-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]"
+ >
+ <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-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-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>
</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>