feat: 增加事件详情

chenyao

2025-04-12 6807f79a2a1e8aafc2458af47229f795b56cd12e

feat: 增加事件详情

 src/assets/images/little-title-bg.png

 src/assets/images/return.png

 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>

 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;
        }
    }
}

 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>

 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>

 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;