From 7635213630830c4cbb9ff6ada69ba9b5c8a35d42 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Thu, 03 Apr 2025 11:05:34 +0800
Subject: [PATCH] feat: 地图居中点调整
---
src/views/SignMachineNest/components/MachineLeft/MachineData.vue | 104 +++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 102 insertions(+), 2 deletions(-)
diff --git a/src/views/SignMachineNest/components/MachineLeft/MachineData.vue b/src/views/SignMachineNest/components/MachineLeft/MachineData.vue
index c161746..0a4db03 100644
--- a/src/views/SignMachineNest/components/MachineLeft/MachineData.vue
+++ b/src/views/SignMachineNest/components/MachineLeft/MachineData.vue
@@ -1,4 +1,104 @@
<!-- 机巢数据 -->
<template>
- <div>机巢数据</div>
-</template>
\ No newline at end of file
+ <common-title title="机巢数据" :style="{ marginLeft: pxToRem(14) }"></common-title>
+ <div class="machine-data">
+ <div class="data-card" v-for="item in statisticsList">
+ <img :src="item.imgurl" alt="" />
+ <div class="num-text">
+ <div class="num">{{item.num}}</div>
+ <div class="text">{{ item.text }}</div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { pxToRem } from '@/utils/rem';
+import CommonTitle from '@/components/CommonTitle.vue';
+import { useStore } from 'vuex';
+import rwcs from '@/assets/images/signMachineNest/machineLeft/rwcs.png';
+import sjs from '@/assets/images/signMachineNest/machineLeft/sjs.png';
+import jscb from '@/assets/images/signMachineNest/machineLeft/jscb.png';
+import rwcg from '@/assets/images/signMachineNest/machineLeft/rwcg.png';
+import fxlc from '@/assets/images/signMachineNest/machineLeft/fxlc.png';
+import fxsc from '@/assets/images/signMachineNest/machineLeft/fxsc.png';
+
+const store = useStore();
+
+const statisticsList = ref([]);
+
+// 添加监听
+watch(
+ () => store.state.home.singleTotal,
+ (newValue) => {
+ if (!newValue) return;
+ statisticsList.value = [
+ { imgurl: rwcs, num: newValue.fly_count || 0, text: '任务次数(次)' },
+ { imgurl: sjs, num: newValue.event_count || 0, text: '事件数(件)' },
+ { imgurl: jscb, num: newValue.total_cost_saved || 0, text: '节省成本(万元)' },
+ { imgurl: rwcg, num: newValue.achievement_count || 0, text: '任务成果(个)' },
+ { imgurl: fxlc, num: newValue.flight_mileage || 0, text: '飞行里程(公里)' },
+ { imgurl: fxsc, num: newValue.hour_count || 0, text: '飞行时长(H)' }
+ ];
+ },
+ { immediate: true, deep: true }
+);
+</script>
+
+<style lang="scss" scoped>
+.machine-data {
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+ margin-left: 29px;
+ padding: 16px 16px;
+ width: 390px;
+ height: 296px;
+ background: linear-gradient(
+ 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;
+ margin-bottom: 12px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ .data-card {
+ width: calc(50% - 5px); // 减去间距的一半
+ display: flex;
+ align-items: center;
+ img {
+ width: 62.82px;
+ height: 62.82px;
+ margin-right: 10px;
+ }
+ .num-text {
+ .num {
+ width: 120px;
+ height: 24px;
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+ font-weight: 400;
+ font-size: 28px;
+ line-height: 23px;
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ background: linear-gradient(270deg, #FFFFFF 0%, #6DD7FF 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ }
+ .text {
+ width: 100px;
+ height: 18px;
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: 400;
+ font-size: 14px;
+ color: #FFFFFF;
+ line-height: 17px;
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3