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