From eeabb1b2435492d2a088c1427da176a03d3c6944 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Thu, 27 Mar 2025 17:55:11 +0800
Subject: [PATCH] feat: 更新左边页面
---
src/assets/images/inspection-num.png | 0
src/assets/images/next-num.png | 0
src/assets/images/table-icon.png | 0
src/views/Home/components/HomeLeft/HomeLeft.vue | 33 +----
src/views/Home/components/HomeLeft/OverviewNext.vue | 145 +++++++++++++++++++++++++++++
src/views/Home/components/HomeLeft/InspectionRaskDetails.vue | 81 ++++++++++++++++
src/assets/images/table-zx.png | 0
7 files changed, 235 insertions(+), 24 deletions(-)
diff --git "a/src/assets/images/Group 48097227\0501\051.png" b/src/assets/images/inspection-num.png
similarity index 100%
rename from "src/assets/images/Group 48097227\0501\051.png"
rename to src/assets/images/inspection-num.png
Binary files differ
diff --git a/src/assets/images/Group 48097227.png b/src/assets/images/next-num.png
similarity index 100%
rename from src/assets/images/Group 48097227.png
rename to src/assets/images/next-num.png
Binary files differ
diff --git a/src/assets/images/table-icon.png b/src/assets/images/table-icon.png
new file mode 100644
index 0000000..d671285
--- /dev/null
+++ b/src/assets/images/table-icon.png
Binary files differ
diff --git a/src/assets/images/table-zx.png b/src/assets/images/table-zx.png
new file mode 100644
index 0000000..5f22b8a
--- /dev/null
+++ b/src/assets/images/table-zx.png
Binary files differ
diff --git a/src/views/Home/components/HomeLeft/HomeLeft.vue b/src/views/Home/components/HomeLeft/HomeLeft.vue
index c5fb6f5..d0ca55f 100644
--- a/src/views/Home/components/HomeLeft/HomeLeft.vue
+++ b/src/views/Home/components/HomeLeft/HomeLeft.vue
@@ -1,5 +1,5 @@
<template>
- <div class="home-left-index">
+ <div class="home-left">
<!--时间 天气-->
<div class="time-weather">
<div class="time">2025.03.04 15:30:00</div>
@@ -11,31 +11,28 @@
</div>
</div>
<!--机巢概况-->
- <div class="overview-nest">
- <common-title></common-title>
- <div class="overview-warp">
- <div></div>
- </div>
- </div>
+ <common-title style="margin-left: 14px;"></common-title>
+ <overview-next></overview-next>
+ <!--巡检任务情况-->
+ <common-title title="巡检任务情况" style="margin-left: 14px;"></common-title>
+ <inspection-rask-details></inspection-rask-details>
</div>
</template>
<script setup>
import { hToV, wToR } from '@/utils/pxConver';
import CommonTitle from '@/components/CommonTitle.vue';
+import OverviewNext from './OverviewNext.vue';
+import InspectionRaskDetails from './InspectionRaskDetails.vue';
</script>
<style scoped lang="scss">
-.home-left-index {
+.home-left {
position: absolute;
-
top: 88px;
- // left: 45px;
- // width: 390px;
color: #E7F5FF;
-
.time-weather {
margin-left: 45px;
width: 260px;
@@ -64,18 +61,6 @@
color: #04F043;
}
}
- }
- .overview-nest {
- .overview-warp {
- border: 1px solid #04F043;
- margin-left: 29px;
- padding: 16px;
- width: 390px;
- height: hToV(415);
- background: linear-gradient( 90deg, rgba(31,62,122,0) 0%, rgba(31,62,122,0.35) 21%, #1F3E7A 100%);
- border-radius: 0px 0px 0px 0px;
- opacity: 0.85;
- }
}
}
</style>
diff --git a/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue b/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
new file mode 100644
index 0000000..7b507b0
--- /dev/null
+++ b/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
@@ -0,0 +1,81 @@
+<!-- 巡检任务详情 -->
+<template>
+ <div class="inspection-rask-details">
+ <div class="inspection-num">
+ <div class="total">
+ <div class="value">88</div>
+ <div class="name">总任务数</div>
+ </div>
+ <div class="status">
+ <div v-for="item in list">
+ <div :style="{ color: item.color }" class="value">{{ item.value }}</div>
+ <div class="name">{{ item.name }}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { hToV, wToR } from '@/utils/pxConver';
+
+const list = ref([
+ { name: '计划执行', value: 89, color: '#FFFFFF' },
+ { name: '执行中', value: 100, color: '#FFA768' },
+ { name: '待执行', value: 66, color: '#FFE17E' },
+ { name: '已执行', value: 10, color: '#8EFFAC' },
+ { name: '执行失败', value: 10, color: '#FF8E8E' },
+]);
+
+</script>
+
+<style scoped lang="scss">
+.inspection-rask-details {
+ margin-left: 29px;
+ width: 390px;
+ height: hToV(414);
+ background: linear-gradient( 90deg, rgba(31,62,122,0) 0%, rgba(31,62,122,0.35) 21%, #1F3E7A 100%);
+ border-radius: 0px 0px 0px 0px;
+ opacity: 0.85;
+ .inspection-num {
+ background: url('@/assets/images/inspection-num.png') no-repeat center / 100% 100%;
+ width: 360px;
+ height: hToV(118);
+ position: relative;
+ .total {
+ position: absolute;
+ left: 34px;
+ top: hToV(34);
+ font-weight: 500;
+ font-size: 14px;
+ color: #FFFFFF;
+ .value {
+ margin-left: 8px;
+ font-size: 26px;
+ }
+ }
+ .status {
+ position: absolute;
+ top: hToV(8);
+ right: 10px;
+ width: 200px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ justify-content: flex-start;
+ line-height: hToV(22);
+ padding: 0 10px 10px 0;
+ .name {
+ font-weight: 400;
+ font-size: 14px;
+ color: #FFFFFF;
+ }
+ .value {
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: 400;
+ font-size: 26px;
+ }
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Home/components/HomeLeft/OverviewNext.vue b/src/views/Home/components/HomeLeft/OverviewNext.vue
new file mode 100644
index 0000000..030c890
--- /dev/null
+++ b/src/views/Home/components/HomeLeft/OverviewNext.vue
@@ -0,0 +1,145 @@
+<!-- 机巢概况 -->
+<template>
+ <div class="overview-next">
+ <div class="next-num">
+ <div class="total">
+ <div class="value">88</div>
+ <div class="name">机巢总数</div>
+ </div>
+ <div class="status">
+ <div v-for="item in list">
+ <div :style="{ color: item.color }" class="value">{{ item.value }}</div>
+ <div class="name">{{ item.name }}</div>
+ </div>
+ </div>
+ </div>
+ <div class="search-box">
+ <el-input
+ v-model="searchText"
+ placeholder="请输入搜索内容"
+ class="input-with-select">
+ <template #append>
+ <el-button :icon="Search" />
+ </template>
+ </el-input>
+ </div>
+ <div class="table-list">
+ <div class="table-header">
+ <div class="name">机巢名称</div>
+ <div class="status">机巢状态</div>
+ </div>
+ <div class="table-item" v-for="item in tableList">
+ <div class="name">
+ <img width="10" height="10" src="@/assets/images/table-zx.png" alt="">
+ <img width="13" height="15" src="@/assets/images/table-icon.png" alt="">
+ {{item.name}}
+ </div>
+ <div class="status">{{ item.status }}</div>
+ </div>
+ </div>
+ </div>
+</template>
+<script setup>
+import { hToV, wToR } from '@/utils/pxConver';
+
+const list = ref([
+ { name: '执行中', value: 89, color: '#FFA768' },
+ { name: '在线', value: 100, color: '#8EFFAC' },
+ { name: '离线', value: 66, color: '#FFFFFF' },
+ { name: '异常', value: 10, color: '#FF8E8E' },
+]);
+
+const tableList = ref([
+ { name: '小兰工业园3号', status: '预计执行' },
+ { name: '小兰工业园3号', status: '正在执行' },
+ { name: '小兰工业园3号', status: '预计执行' },
+ { name: '小兰工业园3号', status: '预计执行' },
+]);
+</script>
+<style scoped lang="scss">
+.overview-next {
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+ margin-left: 29px;
+ width: 390px;
+ height: hToV(414);
+ background: linear-gradient( 90deg, rgba(31,62,122,0) 0%, rgba(31,62,122,0.35) 21%, #1F3E7A 100%);
+ border-radius: 0px 0px 0px 0px;
+ opacity: 0.85;
+ .next-num {
+ width: 358px;
+ height: hToV(92);
+ background: url(@/assets/images/next-num.png) no-repeat center / 100% 100%;;
+ position: relative;
+ .total {
+ position: absolute;
+ left: 22px;
+ top: hToV(18);
+ font-weight: 500;
+ font-size: 14px;
+ color: #FFFFFF;
+ .value {
+ margin-left: 8px;
+ font-size: 26px;
+ }
+ }
+ .status {
+ position: absolute;
+ top: hToV(16);
+ right: 30px;
+ width: 200px;
+ display: flex;
+ justify-content: space-between;
+ line-height: hToV(30);
+ .name {
+ font-weight: 400;
+ font-size: 14px;
+ color: #FFFFFF;
+ }
+ .value {
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: 400;
+ font-size: 26px;
+
+ }
+ }
+ }
+ .search-box {
+ margin-top: hToV(19);
+ margin-right: 16px;
+ :deep(.el-input__wrapper) {
+ background-color: rgba(0, 112, 255, 0.1);
+ background: rgba(0,15,34,0.5);
+ }
+
+ :deep(.el-input-group__append) {
+ background-color: #0070FF;
+ border-color: #0070FF;
+ .el-button {
+ background-color: transparent;
+ border: none;
+ color: #fff;
+ }
+ }
+
+ :deep(.el-input__inner) {
+ color: #fff;
+ &::placeholder {
+ color: rgba(255, 255, 255, 0.6);
+ }
+ }
+ }
+ .table-list {
+ margin: 16px;
+ font-size: 16px;
+ .table-header, .table-item {
+ display: flex;
+ justify-content: space-between;
+ height: hToV(36);
+ line-height: hToV(36);
+ }
+ .table-item {
+
+ }
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3