From 6564593ef44090cca74582d7b32ac979c262b908 Mon Sep 17 00:00:00 2001
From: 艺术家 <10819716+q100102@user.noreply.gitee.com>
Date: 星期六, 24 五月 2025 23:53:34 +0800
Subject: [PATCH] 优化

---
 项目代码/可视化大屏/client/src/views/Index.vue |  210 ++++++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 170 insertions(+), 40 deletions(-)

diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/\345\217\257\350\247\206\345\214\226\345\244\247\345\261\217/client/src/views/Index.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/\345\217\257\350\247\206\345\214\226\345\244\247\345\261\217/client/src/views/Index.vue"
index d110129..b4c48e9 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/\345\217\257\350\247\206\345\214\226\345\244\247\345\261\217/client/src/views/Index.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/\345\217\257\350\247\206\345\214\226\345\244\247\345\261\217/client/src/views/Index.vue"
@@ -5,10 +5,12 @@
         display: flex;
         justify-content: center;
         color: #fff;
-        font-size: 5rem;
+        font-size: 15rem;
+        letter-spacing: 5rem;
+        font-weight: bold;
       "
     >
-      妫�涓�閬撴淇洃鎺�
+      妫�13閬�
     </div>
     <div
       style="
@@ -21,53 +23,51 @@
         margin-top: 3rem;
       "
     >
-      <span>鑲¢亾鐢垫簮鐘舵��</span>
       <div
         style="
-          width: 8rem;
-          height: 8rem;
-          border-radius: 50% 50%;
-          margin-top: 2rem;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 50%;
+          height: 3rem;
+          background-color: #95f204;
+          margin-top: 1rem;
+          border-radius: 1.5rem;
         "
-        :class="true ? 'shadow' : ''"
-      >
-        <img
-          style="width: 8rem; height: 8rem"
-          src="@/assets/TheCurrentJob/pouer.png"
-          alt=""
-        />
-      </div>
+      ></div>
     </div>
-    <!-- <div
+
+    <div
       style="
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
+        height: 20rem;
         color: #fff;
-        font-size: 3rem;
-       
+        font-weight: bold;
+        margin-top: 5rem;
+        font-size: 10rem;
       "
     >
-      <span>绠$悊浜哄憳鐘舵��</span>
-    </div> -->
+      <span> CR400AF</span>
+      <span>G7237</span>
+    </div>
+
     <div
       style="
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
         align-items: center;
-        margin-top: 10%;
+        margin-top: 6%;
         padding-bottom: 10%;
-        border: 0.15rem solid #fff;
-        height: 70%;
+        height: 60%;
         box-sizing: border-box;
+        border-radius: 2rem;
+        background-color: rgba(39, 136, 214, 0.5);
+        box-shadow: 0px 0px 1rem 0rem rgba(18, 150, 219, 0.5);
       "
     >
-      <span style="color: #fff; font-size: 3rem; margin-top: 2rem"
-        >妫�淇汉鍛樼姸鎬�</span
-      >
-
       <div
         style="
           display: flex;
@@ -79,27 +79,114 @@
           margin-top: 3rem;
         "
       >
-        <div style="color: #fff; font-size: 3rem; width: 90%">
-          姝e湪妫�淇汉鍛樻暟閲�:
-          <span style="font-size: 4rem">{{ totalCount }}</span
-          >浣�
+        <div style="display: flex; flex-direction: column; width: 100%">
+          <div
+            style="
+              height: 5rem;
+              font-size: 6rem;
+              font-weight: bold;
+              display: flex;
+              align-items: center;
+              padding-left: 2rem;
+              box-sizing: border-box;
+            "
+          >
+            <img
+              style="width: 6rem; height: 6rem"
+              src="@/assets/imgs/涓嬩竴涓�.png"
+              alt=""
+            />
+            <div
+              style="
+                width: 30%;
+                text-align: justify;
+                text-justify: distribute-all-lines;
+                text-align-last: justify;
+                margin-left: 2rem;
+                color: #fff;
+              "
+            >
+              鐧婚《浜烘暟
+            </div>
+          </div>
+          <div
+            style="
+              margin-left: 2rem;
+              display: flex;
+              justify-content: space-around;
+              align-items: center;
+              margin-top: 5rem;
+            "
+          >
+            <div
+              style="
+                width: 40%;
+                font-size: 6rem;
+                color: #fff;
+                background-color: #058f66;
+                border-radius: 1.5rem;
+                padding: 0.5rem 1rem;
+                text-align: center;
+              "
+            >
+              宸茬櫥璁� <span>2浜�</span>
+            </div>
+            <div
+              style="
+                width: 40%;
+                font-size: 6rem;
+                color: #fff;
+                background-color: #d9001b;
+                border-radius: 1.5rem;
+                padding: 0.5rem 1rem;
+                text-align: center;
+              "
+            >
+              宸茬櫥椤� <span>2浜�</span>
+            </div>
+          </div>
+        </div>
+        <div
+          style="
+            color: #fff;
+            font-size: 5rem;
+            display: flex;
+            width: 90%;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 5rem;
+          "
+        >
+          <div style="color: #fff">妫�淇汉鍛樺垪琛�</div>
+          <div style="color: #fff">
+            姝e湪妫�淇汉鍛樻暟閲�:
+            <span style="font-size: 4rem">{{ totalCount }}</span
+            >浣�
+          </div>
         </div>
         <div style="width: 90%; margin-top: 2rem">
           <el-table
             empty-text="鏆傛棤鏁版嵁"
             :data="tableData"
             style="width: 100%"
+            height="400"
             :header-cell-style="{
               height: '1.61rem',
-              color: '#1AC8FE',
-              background: '#0A5B91',
-              fontSize: '0.88rem',
+              color: '#fff',
+              background: '#1860A8',
+              fontSize: '2rem',
             }"
             :cell-style="{
               color: '#fff',
-              background: '#147BAF',
+              background: 'rgba(23, 87, 149, 0.9)',
             }"
           >
+            <el-table-column
+              prop="userTrueName"
+              label="搴忓彿"
+              align="center"
+              min-width="1%"
+            />
             <el-table-column
               prop="userTrueName"
               label="濮撳悕"
@@ -135,15 +222,38 @@
               align="center"
               min-width="2%"
             />
+            <el-table-column
+              prop="maintenanceDate"
+              label="涓婄嚎鏃堕棿"
+              align="center"
+              min-width="2%"
+            />
           </el-table>
+        </div>
+
+        <div
+          style="
+            position: absolute;
+            bottom: 4%;
+            color: #fff;
+            font-weight: bold;
+            font-size: 3rem;
+            margin-top: 2rem;
+          "
+        >
+          {{ currentTime }}
         </div>
       </div>
     </div>
   </div>
 </template>
 <script setup>
-import { onMounted, reactive, ref, toRef } from "vue";
-import { PersonnelMonitoring } from "@/api/newapi/Maintenance";
+import { onMounted, reactive, ref, toRef, onUnmounted } from "vue";
+import {
+  PersonnelMonitoring,
+  UpstreamInspectionRoad,
+} from "@/api/newapi/Maintenance";
+import { formatTime } from "@/utils/index";
 
 const tableData = ref([]);
 const pageTotal = ref(0);
@@ -167,6 +277,7 @@
     pageSize: pageQuery.value.rows,
     searchKeyword: queryForm.value.inputcontent,
     status: queryForm.value.selectType,
+    account: "admin",
   }).then((res) => {
     tableData.value = res.data.items;
     pageTotal.value = res.data.totalCount;
@@ -175,17 +286,36 @@
     ).length;
   });
 };
-onMounted(() => {
+const currentTime = ref("");
+const timer = ref(null);
+onMounted(async () => {
+  clearInterval(timer.value);
   initData();
+  //鑾峰彇褰撳墠鏃堕棿
+  const date = new Date();
+  timer.value = setInterval(() => {
+    currentTime.value = formatTime(date, "yyyy-MM-dd hh:mm:ss");
+    date.setSeconds(date.getSeconds() + 1);
+  }, 1000);
+  // await UpstreamInspectionRoad();
+});
+onUnmounted(() => {
+  clearInterval(timer.value);
 });
 </script>
 <style lang="scss" scoped>
 .Largescreen {
   display: flex;
   flex-direction: column;
-  background-color: rgba($color: #000000, $alpha: 0.2);
+  // background-color: rgba($color: #000000, $alpha: 0.2);
   .shadow {
     box-shadow: 0px 0px 1rem 0.5rem rgb(18, 150, 219);
   }
 }
+:deep(.el-table__empty-block) {
+  background-color: rgba(23, 87, 149, 0.9);
+}
+:deep(.el-scrollbar__wrap) {
+  background-color: rgba(23, 87, 149, 0.9);
+}
 </style>

--
Gitblit v1.9.3