Merge remote-tracking branch 'origin/master'

罗广辉

2025-03-29 4bb72bb50ab1075afeac4782bb34264bf1bdab03

Merge remote-tracking branch 'origin/master'

 src/assets/images/signMachineNest/machineLeft/fxlc.png

 src/assets/images/signMachineNest/machineLeft/fxsc.png

 src/assets/images/signMachineNest/machineLeft/jscb.png

 src/assets/images/signMachineNest/machineLeft/rwcg.png

 src/assets/images/signMachineNest/machineLeft/rwcs.png

 src/assets/images/signMachineNest/machineLeft/sjs.png

 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;

 src/views/SignMachineNest/components/MachineLeft/InspectionRaskDetails.vue

@@ -1,4 +1,193 @@
<!-- 巡检任务数据 -->
<template>
    <div>巡检任务数据</div>
</template>
    <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>

 src/views/SignMachineNest/components/MachineLeft/MachineData.vue

@@ -1,4 +1,92 @@
<!-- 机巢数据 -->
<template>
  <div>机巢数据</div>
</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 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>