<!-- 机巢数据 -->
|
<template>
|
<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([]);
|
|
const singleTotal = inject('singleTotal')
|
// 添加监听
|
watch(singleTotal,
|
(newValue) => {
|
if (!newValue) return;
|
statisticsList.value = [
|
{ imgurl: rwcs, num: newValue.task_num || 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>
|
