From 295eb3cc87aaa5176d64a4ef985cdad0bfefae9a Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Mon, 31 Mar 2025 08:35:00 +0800
Subject: [PATCH] 增加单个机巢页面
---
src/views/Home/components/HomeLeft/InspectionRaskDetails.vue | 34 ++++++++++++++++++++--------------
1 files changed, 20 insertions(+), 14 deletions(-)
diff --git a/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue b/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
index f43deec..6a75f93 100644
--- a/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
+++ b/src/views/Home/components/HomeLeft/InspectionRaskDetails.vue
@@ -1,5 +1,11 @@
<!-- 巡检任务详情 -->
<template>
+ <common-title
+ title="巡检任务情况"
+ :style="{ marginLeft: pxToRem(14) }"
+ @details="detailsFun"
+ >
+ </common-title>
<div class="inspection-rask-details">
<div class="inspection-num">
<div class="total">
@@ -13,13 +19,15 @@
</div>
</div>
</div>
- <CommonDateTime></CommonDateTime>
+ <CommonDateTime :style="{ top: pxToRem(19) }"></CommonDateTime>
<div class="chart-container" ref="chartRef"></div>
</div>
</template>
<script setup>
import * as echarts from 'echarts';
+import { pxToRem } from '@/utils/rem';
+import CommonTitle from '@/components/CommonTitle.vue';
import CommonDateTime from '@/components/CommonDateTime.vue';
const list = ref([
@@ -29,6 +37,10 @@
{ name: '已执行', value: 10, color: '#8EFFAC' },
{ name: '执行失败', value: 10, color: '#FF8E8E' },
]);
+
+const detailsFun = () => {
+ console.log('details');
+};
const chartRef = ref(null);
@@ -151,36 +163,33 @@
width: 390px;
height: 414px;
background: linear-gradient(
- 270deg,
- rgba(31, 62, 122, 0) 0%,
- rgba(31, 62, 122, 0.35) 21%,
- #1f3e7a 100%
+ 270deg,
+ 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%;
+ background: url('@/assets/images/home/homeLeft/inspection-num.png') no-repeat center / 100% 100%;
width: 360px;
height: 118px;
position: relative;
-
.total {
position: absolute;
left: 34px;
- top: 34px;
+ top: 44px;
font-weight: 500;
font-size: 14px;
color: #ffffff;
font-family: Source Han Sans CN, Source Han Sans CN;
-
+ line-height: 19px;
.value {
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
margin-left: 8px;
font-size: 26px;
}
}
-
.status {
position: absolute;
top: 8px;
@@ -192,14 +201,12 @@
justify-content: flex-start;
line-height: 22px;
padding: 0 10px 10px 0;
-
.name {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
}
-
.value {
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
font-weight: 400;
@@ -207,7 +214,6 @@
}
}
}
-
.chart-container {
width: 100%;
height: 200px;
--
Gitblit v1.9.3