From 0dd5b6393941a32e551a72becd00a0a68649cb07 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Sat, 29 Mar 2025 16:10:54 +0800
Subject: [PATCH] feat: 提交单个机巢详情左侧
---
src/assets/images/signMachineNest/machineLeft/sjs.png | 0
src/assets/images/signMachineNest/machineLeft/fxlc.png | 0
src/views/Home/components/HomeLeft/OverviewNext.vue | 1
src/assets/images/signMachineNest/machineLeft/rwcg.png | 0
src/views/SignMachineNest/components/MachineLeft/InspectionRaskDetails.vue | 193 ++++++++++++++++++++++++++++++++++++++
src/assets/images/signMachineNest/machineLeft/fxsc.png | 0
src/assets/images/signMachineNest/machineLeft/rwcs.png | 0
src/assets/images/signMachineNest/machineLeft/jscb.png | 0
src/views/SignMachineNest/components/MachineLeft/MachineData.vue | 92 ++++++++++++++++++
9 files changed, 282 insertions(+), 4 deletions(-)
diff --git a/src/assets/images/signMachineNest/machineLeft/fxlc.png b/src/assets/images/signMachineNest/machineLeft/fxlc.png
new file mode 100644
index 0000000..7d36c1d
--- /dev/null
+++ b/src/assets/images/signMachineNest/machineLeft/fxlc.png
Binary files differ
diff --git a/src/assets/images/signMachineNest/machineLeft/fxsc.png b/src/assets/images/signMachineNest/machineLeft/fxsc.png
new file mode 100644
index 0000000..5273421
--- /dev/null
+++ b/src/assets/images/signMachineNest/machineLeft/fxsc.png
Binary files differ
diff --git a/src/assets/images/signMachineNest/machineLeft/jscb.png b/src/assets/images/signMachineNest/machineLeft/jscb.png
new file mode 100644
index 0000000..d16c382
--- /dev/null
+++ b/src/assets/images/signMachineNest/machineLeft/jscb.png
Binary files differ
diff --git a/src/assets/images/signMachineNest/machineLeft/rwcg.png b/src/assets/images/signMachineNest/machineLeft/rwcg.png
new file mode 100644
index 0000000..cb58237
--- /dev/null
+++ b/src/assets/images/signMachineNest/machineLeft/rwcg.png
Binary files differ
diff --git a/src/assets/images/signMachineNest/machineLeft/rwcs.png b/src/assets/images/signMachineNest/machineLeft/rwcs.png
new file mode 100644
index 0000000..503aefb
--- /dev/null
+++ b/src/assets/images/signMachineNest/machineLeft/rwcs.png
Binary files differ
diff --git a/src/assets/images/signMachineNest/machineLeft/sjs.png b/src/assets/images/signMachineNest/machineLeft/sjs.png
new file mode 100644
index 0000000..5c672d3
--- /dev/null
+++ b/src/assets/images/signMachineNest/machineLeft/sjs.png
Binary files differ
diff --git a/src/views/Home/components/HomeLeft/OverviewNext.vue b/src/views/Home/components/HomeLeft/OverviewNext.vue
index 583864a..497e43c 100644
--- a/src/views/Home/components/HomeLeft/OverviewNext.vue
+++ b/src/views/Home/components/HomeLeft/OverviewNext.vue
@@ -97,6 +97,7 @@
);
border-radius: 0px 0px 0px 0px;
opacity: 0.85;
+ margin-bottom: 10px;
.next-num {
width: 358px;
height: 92px;
diff --git a/src/views/SignMachineNest/components/MachineLeft/InspectionRaskDetails.vue b/src/views/SignMachineNest/components/MachineLeft/InspectionRaskDetails.vue
index c3fb570..62c2d11 100644
--- a/src/views/SignMachineNest/components/MachineLeft/InspectionRaskDetails.vue
+++ b/src/views/SignMachineNest/components/MachineLeft/InspectionRaskDetails.vue
@@ -1,4 +1,193 @@
<!-- 巡检任务数据 -->
<template>
- <div>巡检任务数据</div>
-</template>
\ No newline at end of file
+ <common-title title="巡检任务详情" :style="{ marginLeft: pxToRem(14) }"></common-title>
+ <div class="inspection-rask-details">
+ <CommonDateTime :style="{ top: pxToRem(14),marginLeft: pxToRem(10) }"></CommonDateTime>
+ <div class="chart-container" ref="chartRef"></div>
+ <div class="pie-container" ref="pieRef"></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 chartRef = ref(null);
+const pieRef = ref(null);
+onMounted(() => {
+ const chart = echarts.init(chartRef.value);
+ const option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ top: '15%',
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ legend: {
+ data: ['计划任务', '实际任务'],
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+ axisLine: {
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ axisLabel: {
+ color: '#fff'
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLine: {
+ lineStyle: {
+ color: '#fff'
+ }
+ },
+ splitLine: {
+ lineStyle: {
+ color: 'rgba(255, 255, 255, 0.1)'
+ }
+ },
+ axisLabel: {
+ color: '#fff'
+ }
+ },
+ series: [
+ {
+ name: '计划任务',
+ type: 'bar',
+ barWidth: '20%',
+ data: [10, 15, 20, 25, 30, 35],
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#1EE7E7' },
+ { offset: 1, color: 'rgba(30, 231, 231, 0.1)' }
+ ])
+ }
+ },
+ {
+ name: '实际任务',
+ type: 'bar',
+ barWidth: '20%',
+ data: [15, 20, 25, 30, 35, 40],
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#0070FF' },
+ { offset: 1, color: 'rgba(0, 112, 255, 0.1)' }
+ ])
+ }
+ }
+ ]
+ };
+
+ chart.setOption(option);
+
+ const pieChart = echarts.init(pieRef.value);
+ const pieOption = {
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b}: {c} ({d}%)'
+ },
+ legend: {
+ orient: 'vertical',
+ right: '5%',
+ top: 'middle',
+ textStyle: {
+ color: '#fff',
+ fontSize: 12
+ },
+ itemWidth: 10,
+ itemHeight: 10,
+ itemGap: 10,
+ formatter: function(name) {
+ let data = pieOption.series[0].data;
+ let total = 0;
+ let tarValue = 0;
+ for (let i = 0; i < data.length; i++) {
+ total += data[i].value;
+ if (data[i].name === name) {
+ tarValue = data[i].value;
+ }
+ }
+ let percentage = ((tarValue / total) * 100).toFixed(1);
+ return `${name} ${percentage}%`;
+ }
+ },
+ series: [
+ {
+ name: '任务状态',
+ type: 'pie',
+ radius: ['10%', '90%'],
+ center: ['35%', '50%'], // 将图表向左偏移
+ roseType: 'radius',
+ itemStyle: {
+ borderRadius: 4
+ },
+ label: {
+ show: true,
+ position: 'inside',
+ formatter: '{c}%',
+ fontSize: 12,
+ color: '#fff'
+ },
+ data: [
+ { value: 30, name: '待审核', itemStyle: { color: '#1860EC' } },
+ { value: 25, name: '待处理', itemStyle: { color: '#47D107' } },
+ { value: 20, name: '已完成', itemStyle: { color: '#F29509' } },
+ { value: 15, name: '待分拨', itemStyle: { color: '#E9C81A' } },
+ { value: 18, name: '处理中', itemStyle: { color: '#0FC1E8' } },
+ { value: 18, name: '已完结', itemStyle: { color: '#FE577F' } }
+ ]
+ }
+ ]
+ };
+
+ pieChart.setOption(pieOption);
+
+ window.addEventListener('resize', () => {
+ chart.resize();
+ pieChart.resize();
+ });
+});
+</script>
+
+<style lang="scss" scoped>
+.inspection-rask-details {
+ margin-left: 29px;
+ // padding: 16px 16px;
+ width: 390px;
+ height: 526px;
+ 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;
+ .chart-container {
+ width: 100%;
+ height: 220px;
+ margin-top: 20px;
+ }
+ .pie-container {
+ width: 100%;
+ height: 212px;
+ margin-top: 10px;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/SignMachineNest/components/MachineLeft/MachineData.vue b/src/views/SignMachineNest/components/MachineLeft/MachineData.vue
index c161746..f6be978 100644
--- a/src/views/SignMachineNest/components/MachineLeft/MachineData.vue
+++ b/src/views/SignMachineNest/components/MachineLeft/MachineData.vue
@@ -1,4 +1,92 @@
<!-- 机巢数据 -->
<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 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 statisticsList = ref([
+ { imgurl: rwcs, num: 1314, text: '任务次数(次)' },
+ { imgurl: sjs, num: 1314, text: '事件数(件)' },
+ { imgurl: jscb, num: 1314, text: '节省成本(万元)' },
+ { imgurl: rwcg, num: 1314, text: '任务成果(个)' },
+ { imgurl: fxlc, num: 1314, text: '飞行里程' },
+ { imgurl: fxsc, num: 1314, text: '飞行时长' },
+]);
+
+</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: 72px;
+ 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