Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-...

chenyao

2025-04-12 df4e3452ecdc510faa09c7310ba4857ed432553d

 src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTop5.vue

@@ -1,74 +1,25 @@
<template>
   <div class="event-top5">
      <div class="little-title">同类事件TOP5统计</div>
      <div class="chart" ref="echartsRef"></div>
      <div class="top5Content">
         <div class="top5Item" v-for="(item, index) in list.filter(i => i.name)">
            <div class="top5ItemImg" />
            <div class="top5ItemIndex" :style="{ color: item.color }">{{ index + 1 }}</div>
            <div class="top5ItemName">{{ item.name }}</div>
            <div class="top5ItemRatio">
               <div class="top5ItemRatioInner" :style="ratioFun(item)"></div>
            </div>
            <div class="top5ItemCount">
               <span>{{ item.value }}</span
               >件
            </div>
         </div>
      </div>
   </div>
</template>
<script setup>
import { getEventTopFive, getEventTrend } from '@/api/home/event'
import * as echarts from 'echarts'

const echartsRef = ref(null)
let chart = null

const echartsOption = {
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'shadow',
      },
   },
   grid: {
      top: '5%',
      left: 0,
      right: 0,
      bottom: 0,
      containLabel: true,
   },
   xAxis: {
      type: 'category',
      axisLabel: {
         rotate: -45, // 旋转角度
         interval: 0, // 显示所有标签
         color: '#FFFFFF',
         fontFamily: 'Source Han Sans CN, Source Han Sans CN',
         fontWeight: 400,
         fontSize: 10,
      },
      data: [],
   },
   yAxis: [
      {
         type: 'value',
         axisLabel: {
            interval: 0, // 显示所有标签
            color: '#FFFFFF',
            fontFamily: 'Source Han Sans CN, Source Han Sans CN',
            fontWeight: 400,
            fontSize: 10,
         },
         axisLine: {
            lineStyle: {
               color: '#ffffff',
            },
         },
         splitLine: {
            lineStyle: {
               color: 'rgba(255, 255, 255, 0.1)',
               type: 'dashed', // 设置为虚线
            },
         },
      },
   ],
   series: {
      type: 'bar',
      emphasis: {
         focus: 'series',
      },
      itemStyle: { color:'#6FCAFF' },
      data: [],
   },
}
import { getEventTopFive } from '@/api/home/event'
import indexPoint from '@/assets/images/home/eventOverviewDetail/indexPoint.png'

const params = inject('eventOverviewParams')

@@ -76,35 +27,139 @@
   getData()
})

const ratioFun = row => ({
   background: row.bGColor,
   width: `${row.width}%`,
})

const colorOptions = [
   { color: '#F02C2C', bGColor: 'linear-gradient( 90deg, rgba(165,12,12,0) 0%, #F02C2C 78%, #DDECFD 100%)' },
   { color: '#FFA500', bGColor: 'linear-gradient( 90deg, rgba(229,154,33,0) 0%, #E59A21 78%, #EAFEFF 100%)' },
   { color: '#FFFF00', bGColor: 'linear-gradient( 90deg, rgba(242,255,54,0) 0%, #F2FF36 78%, #FFF2D9 100%)' },
   { color: '#7D7BFF', bGColor: 'linear-gradient( 90deg, rgba(29,27,155,0) 0%, #322EE2 67%, #C7C6FF 100%)' },
   { color: '#23BDF5', bGColor: 'linear-gradient( 90deg, rgba(35,189,245,0) 0%, #23BDF5 67%, #C7C6FF 100%)' },
]

const list = ref([])
// 获取数据
const getData = async () => {
   const res = await getEventTopFive(params.value)
   const list = res?.data?.data || []
   echartsOption.xAxis.data = list.map(item => item.name)
   echartsOption.series.data = list.map(item => item.value)
   chart.setOption(echartsOption)
   const resData = res?.data?.data || []
   const maxVal = resData[0]?.value || 100
   list.value = resData
   list.value.forEach((item, index) => {
      list.value[index] = {
         ...item,
         ...colorOptions[index],
         width: (item.value / maxVal) * 100,
      }
   })

   console.log(list.value)
}

onMounted(() => {
   chart = echarts.init(echartsRef.value)
   window.addEventListener('resize', chart.resize)
   getData()
})
</script>
<style scoped lang="scss">
.event-top5 {
   height: 280px;
}
.little-title {
      background: url('@/assets/images/little-title-bg.png') no-repeat center / 100% 100%;
      width: 372px;
      height: 28px;
      line-height: 28px;
      padding-left: 16px;
   height: 288px;


   .top5Content {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 14px 0;
      height: 250px;

      .top5Item {
         display: flex;
         align-items: center;
         font-family: Segoe UI, Segoe UI;
         font-weight: 400;
         font-size: 12px;
         color: #7883a7;
         line-height: 14px;
         width: 328px;
         height: 32px;
         background: rgba(14, 21, 40, 0.5);
         border-radius: 1px 1px 1px 1px;
         padding-left: 6px;

         .top5ItemImg {
            width: 7px;
            height: 7px;
            background: #5294E1;
            border-radius: 1px;
         }

         .top5ItemIndex {
            margin-left: 6px;
            font-family: Segoe UI, Segoe UI;
            font-weight: normal;
            font-size: 16px;
            color: #e94545;
            line-height: 19px;
            margin-right: 2px;
         }

         .top5ItemName {
            width: 48px;
         }

         .top5ItemRatio {
            width: 198px;
            height: 4px;
            background: #2d3a5c;
            border-radius: 0px 0px 0px 0px;
            margin: 0 7px;
            position: relative;

            .top5ItemRatioInner {
               position: absolute;
               left: 0;
               top: 0;
               height: 100%;
               &:after {
                  display: block;
                  content: '';
                  position: absolute;
                  right: 0;
                  top: 50%;
                  transform: translateY(-50%);
                  width: 1px;
                  height: 12px;
                  background: #B8DAFF;
                  box-shadow: 0px 0px 8px 0px rgba(212,231,252,0.5);
                  border-radius: 0px 0px 0px 0px;
               }
            }
         }

         .top5ItemCount {
            font-family: Segoe UI, Segoe UI;
            font-weight: bold;
            font-size: 14px;
            line-height: 16px;
            text-align: left;
            font-style: normal;
            text-transform: none;

            span {
               color: white;
            }
         }
      }
   }
.chart {
   margin-top: 10px;
   width: 356px;
   height: 280px;
}

.little-title {
   background: url('@/assets/images/little-title-bg.png') no-repeat center / 100% 100%;
   width: 372px;
   height: 28px;
   line-height: 28px;
   padding-left: 16px;
}
</style>