From 6807f79a2a1e8aafc2458af47229f795b56cd12e Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Sat, 12 Apr 2025 08:52:55 +0800
Subject: [PATCH] feat: 增加事件详情
---
src/assets/images/return.png | 0
src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue | 20 ++++++++--
src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue | 12 +++--
src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTop5.vue | 20 ++++++++--
src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventOverviewDetailLeft.vue | 27 ++++++++++---
src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue | 27 ++++++++++---
src/assets/images/little-title-bg.png | 0
7 files changed, 81 insertions(+), 25 deletions(-)
diff --git a/src/assets/images/little-title-bg.png b/src/assets/images/little-title-bg.png
new file mode 100644
index 0000000..bcdf120
--- /dev/null
+++ b/src/assets/images/little-title-bg.png
Binary files differ
diff --git a/src/assets/images/return.png b/src/assets/images/return.png
new file mode 100644
index 0000000..dfb6f7f
--- /dev/null
+++ b/src/assets/images/return.png
Binary files differ
diff --git a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue b/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue
index 59aae22..38477bd 100644
--- a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue
+++ b/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue
@@ -1,9 +1,12 @@
<template>
- <common-title title="行业数据分析" />
- <div class="chart" ref="echartsRef"></div>
+ <!-- <common-title title="行业数据分析" /> -->
+ <div class="event-data-analysis">
+ <div class="little-title">行业数据分析</div>
+ <div class="chart" ref="echartsRef"></div>
+ </div>
</template>
<script setup>
-import CommonTitle from '@/components/CommonTitle.vue'
+// import CommonTitle from '@/components/CommonTitle.vue'
import { getEventIndustryData } from '@/api/home/event'
import * as echarts from 'echarts'
@@ -108,8 +111,20 @@
})
</script>
<style scoped lang="scss">
-.chart {
- width: 356px;
- height: 190px;
+.event-data-analysis {
+ height: 330px;
+ .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;
+
+ }
+ .chart {
+ margin-top: 10px;
+ width: 356px;
+ height: 240px;
+ }
}
</style>
diff --git a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventOverviewDetailLeft.vue b/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventOverviewDetailLeft.vue
index 821a67e..2b01ce7 100644
--- a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventOverviewDetailLeft.vue
+++ b/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventOverviewDetailLeft.vue
@@ -1,7 +1,10 @@
<template>
- <div class="left">
+ <!--时间 天气-->
+ <common-weather></common-weather>
+ <div class="event-overview-detail-left">
+ <!--返回-->
<div class="do-return" @click="goBack">
- <img src="@/assets/images/signMachineNest/return.png" alt="" />
+ <img src="@/assets/images/return.png" alt="" />
</div>
<common-title title="事件数据分析" />
<CommonDateTime class="dateTime" v-model="timeArr" @change="timeChange" />
@@ -11,6 +14,7 @@
</div>
</template>
<script setup>
+import CommonWeather from '@/components/CommonWeather.vue';
import EventDataAnalysis from './EventDataAnalysis.vue'
import CommonTitle from '@/components/CommonTitle.vue'
import CommonDateTime from '@/components/CommonDateTime.vue'
@@ -42,9 +46,20 @@
}
</script>
<style scoped lang="scss">
-.left {
+.event-overview-detail-left {
position: absolute;
- top: 88px;
+ width: 390px;
+ height: 920px;
+ top: 120px;
+ margin-left: 29px;
+ 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;
color: #e7f5ff;
display: flex;
flex-direction: column;
@@ -62,8 +77,8 @@
cursor: pointer;
img {
- width: 40px;
- height: 40px;
+ width: 60px;
+ height: 33px;
}
}
}
diff --git a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTop5.vue b/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTop5.vue
index 692cb5d..a61c2e6 100644
--- a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTop5.vue
+++ b/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTop5.vue
@@ -1,9 +1,10 @@
<template>
- <common-title title="同类事件TOP5统计" />
- <div class="chart" ref="echartsRef"></div>
+ <div class="event-top5">
+ <div class="little-title">同类事件TOP5统计</div>
+ <div class="chart" ref="echartsRef"></div>
+ </div>
</template>
<script setup>
-import CommonTitle from '@/components/CommonTitle.vue'
import { getEventTopFive, getEventTrend } from '@/api/home/event'
import * as echarts from 'echarts'
@@ -91,8 +92,19 @@
})
</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;
+ }
.chart {
+ margin-top: 10px;
width: 356px;
- height: 190px;
+ height: 280px;
}
</style>
diff --git a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue b/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue
index 8faa9e5..f512923 100644
--- a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue
+++ b/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue
@@ -1,9 +1,10 @@
<template>
- <common-title title="事件趋势分析" />
- <div class="chart" ref="echartsRef"></div>
+ <div class="event-trend-analysis">
+ <div class="little-title">事件趋势分析</div>
+ <div class="chart" ref="echartsRef"></div>
+ </div>
</template>
<script setup>
-import CommonTitle from '@/components/CommonTitle.vue'
import { getEventTrend } from '@/api/home/event'
import * as echarts from 'echarts'
@@ -99,8 +100,19 @@
})
</script>
<style scoped lang="scss">
+.event-trend-analysis {
+ 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;
+ }
.chart {
+ margin-top: 10px;
width: 356px;
- height: 190px;
+ height: 240px;
}
</style>
diff --git a/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue b/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
index bc9785a..ff5d05a 100644
--- a/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
+++ b/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
@@ -1,5 +1,6 @@
<template>
- <div class="right">
+ <UserOperate/>
+ <div class="event-overviewdetail-right">
<div>工单列表</div>
<div>
<el-date-picker
@@ -64,6 +65,7 @@
</div>
</template>
<script setup>
+import UserOperate from '@/components/UserOperate.vue';
import dayjs from 'dayjs'
import { selectDevicePage } from '@/api/home/machineNest'
import { getMultipleDictionary } from '@/api/system/dictbiz'
@@ -170,11 +172,11 @@
})
</script>
<style scoped lang="scss">
-.right {
+.event-overviewdetail-right {
position: absolute;
- right: 0;
- top: 88px;
- color: black;
+ right: 29px;
+ top: 122px;
+ // color: black;
display: flex;
flex-direction: column;
align-items: center;
--
Gitblit v1.9.3