From 89b46fc0fd9acf99a9bcebcf511afa85670f900c Mon Sep 17 00:00:00 2001
From: JINGYJ <1458671527@qq.com>
Date: Tue, 14 Nov 2023 09:28:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/welcome/index.vue | 537 ++++++++++++++++++++++++++++++------
 1 file changed, 454 insertions(+), 83 deletions(-)

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>