From df4e3452ecdc510faa09c7310ba4857ed432553d Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Sat, 12 Apr 2025 17:47:19 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-dashboard
---
src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTop5.vue | 221 ++++++++++++++++++++++++++++++++++--------------------
1 files changed, 138 insertions(+), 83 deletions(-)
diff --git a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTop5.vue b/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTop5.vue
index a61c2e6..fe2b34f 100644
--- a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTop5.vue
+++ b/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>
--
Gitblit v1.9.3