feat: 事件概况详情ui调整

罗广辉

2025-04-12 5e0817661e2b111d2e4ec117659b60193a89c7ad

feat: 事件概况详情ui调整

 src/api/home/event.js

@@ -28,11 +28,12 @@
}

// 大屏首页=>事件分页列表
export const getEventPage = data => {
export const getEventPage = (data,params) => {
    return request({
        url: '/drone-device-core/jobEvent/eventPage',
        method: 'post',
        data,
        params
    })
}


 src/assets/images/home/eventOverviewDetail/indexPoint.png

 src/assets/images/home/eventOverviewDetail/leftArrow.png

 src/assets/images/home/eventOverviewDetail/positioning.png

 src/assets/images/home/eventOverviewDetail/rightArrow.png

 src/assets/images/home/eventOverviewDetail/status0.png

 src/assets/images/home/eventOverviewDetail/status1.png

 src/assets/images/home/eventOverviewDetail/status2.png

 src/assets/images/home/eventOverviewDetail/status3.png

 src/assets/images/home/eventOverviewDetail/status4.png

 src/assets/images/home/eventOverviewDetail/status5.png

 src/assets/images/home/useEventOperate/eventSingle.png

 src/assets/images/home/useUavHome/eventAggregationImg.png

 src/styles/element-ui.scss

@@ -60,3 +60,45 @@
.avue--detail .el-form-item {
  background-color: #fafafa;
}


.ztzf-date-picker{
  box-shadow: none !important;
  background: rgba(0, 15, 34, 0.5);
  border: 1px solid #306fca;

  .el-input__wrapper {
    background-color: transparent;
    box-shadow: 0 0 0 1px #0070ff;

    &.is-focus {
      box-shadow: 0 0 0 1px #0070ff;
    }
  }

  .el-range-input {
    background-color: transparent;
    color: #fff;
    height: 28px;

    &::placeholder {
      color: rgba(255, 255, 255, 0.6);
    }
  }

  .el-range-separator{
    color: #fff;
  }
}

.ztzf-select {
  .el-select__wrapper {
    background-color: transparent;
    box-shadow: none;
    border: 1px solid #306fca;
  }

  .el-select__placeholder {
    color: #ffffff;
  }
}

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

@@ -1,12 +1,10 @@
<template>
    <!-- <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 { getEventIndustryData } from '@/api/home/event'
import * as echarts from 'echarts'

@@ -18,6 +16,15 @@
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        },
        formatter: function (params) {
            let result = ''
            params.forEach(item => {
                const color = item.color.colorStops[1].color
                const marker = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${color};"></span>`
                result += `${marker}${item.seriesName}: ${item.value}<br/>`
            })
            return result
        },
    },
    grid: {
@@ -65,18 +72,36 @@
    series: [],
}

const testObj = color => ({
    type: 'bar',
    emphasis: {
        focus: 'series',
    },
    itemStyle: { color },
    data: [],
})
const seriesObj = (colorList) =>{
    const offsets = [0,1,1]
    return {
        type: 'bar',
        barWidth: 6,
        emphasis: {
            focus: 'series',
        },
        itemStyle: {
            color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1, // 渐变方向从上到下
                colorList.map((color,index) => ({ offset:offsets[index], color}))
            ),
        },
        data: [],
    }
}

const eventType = [
    { name: '事件', ...testObj('#6FCAFF') },
    { name: '任务', ...testObj('#8EFFAC') },
const seriesList = [
    {
        name: '事件',
        ...seriesObj(['#FFFFFF','rgba(44,134,240,0.48)','#DDECFD']),
    },
    {
        name: '任务',
        ...seriesObj(['#FFFFFF', 'rgba(33,218,229,0.48)', '#E5FEFF']),
    },
]
const params = inject('eventOverviewParams')

@@ -90,17 +115,17 @@
    const list = res?.data?.data || []
    echartsOption.xAxis.data = list.map(item => item.name)
    //
    eventType.forEach(item => {
    seriesList.forEach(item => {
        item.data = []
    })
    list.forEach(item => {
        item.data.forEach(item1 => {
            eventType.forEach(item2 => {
            seriesList.forEach(item2 => {
                item2.name === item1.name && item2.data.push(item1.value)
            })
        })
    })
    echartsOption.series = eventType
    echartsOption.series = seriesList
    chart.setOption(echartsOption)
}

@@ -112,15 +137,16 @@
</script>
<style scoped lang="scss">
.event-data-analysis {
    height: 330px;
    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;

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

@@ -59,7 +59,6 @@
    #1f3e7a 100%
  );
  border-radius: 0px 0px 0px 0px;
  opacity: 0.85;
    color: #e7f5ff;
    display: flex;
    flex-direction: column;
@@ -72,7 +71,7 @@

    .do-return {
        position: absolute;
		

        right: -50px;
        cursor: pointer;


 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>

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

@@ -74,6 +74,18 @@
        emphasis: {
            focus: 'series',
        },
        areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: 'rgba(24, 141, 240, 0.4)', // 顶部颜色
                },
                {
                    offset: 1,
                    color: 'rgba(24, 141, 240, 0)', // 底部颜色
                },
            ]),
        },
        data: [], // 示例数据，根据实际完成率计算
    },
}

 src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue

@@ -1,10 +1,12 @@
<template>
    <UserOperate/>
    <div class="event-overviewdetail-right">
        <div>工单列表</div>
        <div>
    <div class="event-overviewdetail-right" :class="{ isMore }">
        <CommonTitle title="工单列表" />

        <div class="content">
            <img class="leftArrow" :src="isMore ? rightArrowImg : leftArrowImg" @click="leftArrowFun" alt="" />

            <el-date-picker
                style="width: 100%"
                class="ztzf-date-picker"
                v-model="timeArr"
                type="daterange"
                :value-format="timeFormat"
@@ -13,64 +15,110 @@
                end-placeholder="结束日期"
                @change="timeChange"
            />
        </div>

        <el-select style="width: 100%" v-model="params.device_sn" placeholder="机巢" filterable clearable @change="getList">
            <el-option v-for="item in deviceList" :label="item.nickname" :value="item.device_sn" :key="item.device_sn" />
        </el-select>
        <el-select v-model="params.word_order_type" placeholder="工单类型" filterable clearable @change="getList">
            <el-option v-for="item in workOrderType" :label="item.dictValue" :value="item.dictKey" :key="item.dictKey" />
        </el-select>
        <div class="statusList">
            <div v-for="item in statusList" @click="statusClick(item)" :class="{ active: item.active }">
                <div>{{ item.name }}</div>
                <div>{{ item.num || 0 }}</div>
            </div>
        </div>
            <el-select
                class="ztzf-select"
                :style="{ width: pxToRem(174) }"
                v-model="params.device_sn"
                placeholder="机巢"
                filterable
                clearable
                @change="getList"
            >
                <el-option v-for="item in deviceList" :label="item.nickname" :value="item.device_sn" :key="item.device_sn" />
            </el-select>

        <el-checkbox-group v-model="params.eventKeys" @change="getList">
            <el-checkbox
                v-for="item in eventList"
                :label="item.name + ' ' + item.value"
                :value="item.status"
                :key="item.dictKey"
            />
        </el-checkbox-group>
            <el-select
                class="ztzf-select"
                :style="{ width: pxToRem(174) }"
                v-model="params.word_order_type"
                placeholder="工单类型"
                filterable
                clearable
                @change="getList"
            >
                <el-option v-for="item in workOrderType" :label="item.dictValue" :value="item.dictKey" :key="item.dictKey" />
            </el-select>

        <div class="eventList">
            <div class="eventListItem" v-for="item in list">
                <img class="eventListItemImg" 
          :src="item.photo_url ? 
        item.photo_url.substring(0, item.photo_url.lastIndexOf('.')) + '_small' + 
        item.photo_url.substring(item.photo_url.lastIndexOf('.')) 
        : ''" 
      alt="" 
    />
                <div class="eventListItemText">
                    <div class="eventListItemName">{{ item.event_name }}</div>
                    <div @click="positioning(item)">定位</div>
                    <div class="eventListItemTime">{{ item.create_time }}</div>
            <div class="statusList">
                <div
                    class="statusItem"
                    v-for="item in isMore ? statusList : statusList.filter(i => i.few)"
                    @click="statusClick(item)"
                    :class="{ active: item.active }"
                >
                    <img class="statusItemImg" :src="item.img" alt="" />
                    <div class="statusItemInfo">
                        <div class="statusItemName">{{ item.name }}</div>
                        <div class="statusItemNum">{{ item.num || 0 }}</div>
                    </div>
                </div>
            </div>
        </div>

        <el-pagination
            background
            v-model:current-page="params.current"
            v-model:page-size="params.size"
            layout="total,  prev, pager, next"
            :total="total"
            @change="pageChange"
        />
            <el-checkbox-group v-model="params.event_keys" @change="getList">
                <el-checkbox v-for="item in eventList" :value="item.status" :key="item.dictKey">
                    <template #default>
                        <span class="eventListItemCheckboxName">{{ item.name }}</span>
                        <span class="eventListItemCheckboxNum">({{ item.value }})</span>
                    </template>
                </el-checkbox>
            </el-checkbox-group>

            <div class="eventList">
                <div class="eventListItem" v-for="item in list">
                    <img
                        class="eventListItemImg"
                        :src="
                            item.photo_url
                                ? item.photo_url.substring(0, item.photo_url.lastIndexOf('.')) +
                                  '_small' +
                                  item.photo_url.substring(item.photo_url.lastIndexOf('.'))
                                : ''
                        "
                        alt=""
                    />
                    <div class="eventListItemPosition" :title="item.address" @click="positioning(item)">
                        <img :src="positioningImg" alt="" title="点击定位" />
                        <div class="address">{{ item.address }}</div>
                    </div>
                    <div class="eventListItemText">
                        <div class="eventListItemName">{{ item.event_name }}</div>
                        <div class="eventListItemTime">{{ item.create_time }}</div>
                    </div>
                </div>
            </div>

            <div class="pagination">
                <el-pagination
                    background
                    v-model:current-page="params.current"
                    v-model:page-size="params.size"
                    layout="total,  prev, pager, next"
                    :total="total"
                    @change="pageChange"
                />
            </div>
        </div>
    </div>
</template>
<script setup>
import UserOperate from '@/components/UserOperate.vue';
import status0Img from '@/assets/images/home/eventOverviewDetail/status0.png'
import status1Img from '@/assets/images/home/eventOverviewDetail/status1.png'
import status2Img from '@/assets/images/home/eventOverviewDetail/status2.png'
import status3Img from '@/assets/images/home/eventOverviewDetail/status3.png'
import status4Img from '@/assets/images/home/eventOverviewDetail/status4.png'
import status5Img from '@/assets/images/home/eventOverviewDetail/status5.png'
import positioningImg from '@/assets/images/home/eventOverviewDetail/positioning.png'
import leftArrowImg from '@/assets/images/home/eventOverviewDetail/leftArrow.png'
import rightArrowImg from '@/assets/images/home/eventOverviewDetail/rightArrow.png'

import dayjs from 'dayjs'
import { selectDevicePage } from '@/api/home/machineNest'
import { getMultipleDictionary } from '@/api/system/dictbiz'
import { getEvenNum, getEventPage, getEventStatusNum, getEventTrend } from '@/api/home/event'
import { getEvenNum, getEventPage, getEventStatusNum } from '@/api/home/event'
import cesiumOperation from '@/utils/cesium-tsa'
import CommonTitle from '@/components/CommonTitle.vue'
import { pxToRem } from '@/utils/rem'

const timeFormat = 'YYYY-MM-DD HH:mm:ss'
const today = dayjs().format(timeFormat)
@@ -85,10 +133,18 @@
    device_sn: undefined,
    word_order_type: undefined,
    status: undefined,
    eventKeys: [],
    event_keys: [],
    current: 1,
    size: 10,
    size: 8,
})

const isMore = ref(false)
const leftArrowFun = () => {
    isMore.value = !isMore.value
    params.value.size = isMore.value ? 16 : 8
    params.value.current = 1
    getList()
}

const statusClick = row => {
    params.value.status = row.id || undefined
@@ -111,20 +167,36 @@
        workOrderType.value = res.data.data?.['WORK_ORDER_TYPE'] || []
    })
}
const { flyTo } = cesiumOperation();
const positioning = (row) =>{
const { flyTo } = cesiumOperation()
const positioning = row => {
    const longitude = Number(row.longitude)
    const latitude = Number(row.latitude)
    flyTo({ longitude, latitude }, 1, 1000);
    flyTo({ longitude, latitude }, 1, 1000)
}

// 事件状态+数量
const statusList = ref([])
const statusList = ref([
    { name: '全部状态', img: status0Img, id: undefined,few: true },
    { name: '待审核', img: status1Img, id: 2 },
    { name: '待处理', img: status2Img, id: 0, few: true },
    { name: '处理中', img: status3Img, id: 3, few: true },
    { name: '已完成', img: status4Img, id: 4, few: true },
    { name: '待分拨', img: status5Img, id: 1 },
])

const getEventStatusNumFun = () => {
    const [start_date, end_date] = timeArr.value
    getEventStatusNum({ start_date, end_date }).then(res => {
        statusList.value = (res.data?.data || []).map(i => ({ ...i, active: false }))
        const list = res.data?.data || []
        statusList.value = statusList.value.map(item => {
            const find = list.find(item1 => item.id === item1.id) || {}
            return {
                ...item,
                ...find,
            }
        })
        statusList.value[0].active = true
        console.log(statusList.value)
    })
}

@@ -145,7 +217,7 @@
    getEventStatusNumFun()
    getEventList()
    params.value.status = undefined
    params.value.eventKeys = undefined
    params.value.event_keys = undefined
    getList()
}

@@ -156,7 +228,11 @@

const list = ref([])
const getList = () => {
    getEventPage(params.value).then(res => {
    const pageParams = {
        current: params.value.current,
        size: params.value.size,
    }
    getEventPage(params.value, pageParams).then(res => {
        const resData = res.data.data
        list.value = resData?.records || []
        total.value = resData.total
@@ -174,42 +250,213 @@
<style scoped lang="scss">
.event-overviewdetail-right {
    position: absolute;
    right: 29px;
    right: 36px;
    top: 122px;
    // color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 900px;
    width: 400px;
    background: white;
    align-items: end;
    height: 922px;
    width: 405px;
    font-size: 18px;

    .statusList {
        display: flex;
        flex-wrap: wrap;
    &.isMore {
        width: 807px;

        .active {
            background: #19ad8d;
        .content {
            width: 792px;
        }
    }

    .eventList {
    .content {
        width: 390px;
        height: 877px;
        background: linear-gradient(270deg, #1f3e7a 0%, rgba(31, 62, 122, 0.35) 79%, rgba(31, 62, 122, 0) 100%);
        display: flex;
        justify-content: space-between;
        align-content: start;
        flex-wrap: wrap;
        padding: 7px 15px 0 11px;
        gap: 10px;

        .eventListItem {
            .eventListItemImg {
                width: 120px;
                height: 100px;
            }
        .leftArrow {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }

            .eventListItemText {
        .statusList {
            width: 100%;
            display: flex;

            .statusItem {
                width: 95px;
                height: 44px;
                display: flex;
                justify-content: space-between;
                font-size: 16px;
                flex: 1;
                justify-content: center;
                position: relative;
                cursor: pointer;

                &.active {
                    background: linear-gradient(
                        180deg,
                        rgba(19, 80, 141, 0) 0%,
                        rgba(22, 56, 91, 0.48) 48%,
                        #053462 91%,
                        #259dff 91%,
                        #259dff 98%
                    );
                }

                .statusItemImg {
                    width: 35px;
                    height: 35px;
                }

                .statusItemInfo {
                    .statusItemName {
                        width: 59px;
                        height: 17px;
                        font-family: Segoe UI, Segoe UI;
                        font-weight: 400;
                        font-size: 14px;
                        color: #ffffff;
                        line-height: 17px;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                    }

                    .statusItemNum {
                        width: 32px;
                        height: 16px;
                        font-family: Segoe UI, Segoe UI;
                        font-weight: bold;
                        font-size: 16px;
                        color: #ffd509;
                        line-height: 16px;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                    }
                }
            }
        }

        .el-checkbox-group {
            :deep() {
                .el-checkbox {
                    height: 20px;
                    margin-right: 10px;
                }

                .el-checkbox__inner {
                    background: transparent;
                    width: 18px;
                    height: 18px;
                    border: 1px solid #3194ef;
                }

                .el-checkbox__label {
                    font-family: Segoe UI, Segoe UI;
                    font-weight: 400;
                    font-size: 14px;
                    color: #ffffff;
                    line-height: 17px;

                    .eventListItemCheckboxNum {
                        color: #ffa500;
                    }
                }
            }
        }

        .eventList {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 20px 0;

            .eventListItem {
                width: 175px;
                height: 140px;
                position: relative;

                .eventListItemImg {
                    width: 174px;
                    height: 116px;
                    border-radius: 4px 4px 4px 4px;
                    margin-bottom: 7px;
                }

                .eventListItemPosition {
                    position: absolute;
                    right: 0;
                    top: 116px;
                    width: 174px;
                    height: 20px;
                    transform: translateY(-100%);
                    background: rgba(22, 22, 22, 0.68);
                    border-radius: 0 0 4px 4px;
                    font-family: Segoe UI, Segoe UI;
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 17px;
                    color: #51a8ff;
                    cursor: pointer;
                    padding-right: 5px;
                    display: flex;
                    justify-content: end;

                    img {
                        margin-right: 5px;
                    }

                    .address {
                        display: inline-block;
                        width: 60px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }

                .eventListItemText {
                    display: flex;
                    justify-content: space-between;
                    font-family: Segoe UI, Segoe UI;
                    font-weight: 400;
                    font-size: 14px;
                    color: #ffffff;
                    line-height: 17px;

                    .eventListItemTime {
                        font-family: Segoe UI, Segoe UI;
                        font-weight: 400;
                        font-size: 14px;
                        color: #96a3cc;
                        line-height: 17px;
                    }
                }
            }
        }
    }
}

.pagination {
    width: 100%;
    display: flex;
    justify-content: center;

    .el-pagination {
        --el-color-primary: #173da7;
        --el-pagination-button-bg-color: #131c35;
        --el-pagination-button-color: #ecf1ff;
        --el-disabled-bg-color: #131c35;
        --el-text-color-regular: #ecf1ff;
    }
}
</style>

 src/views/Home/useMapAggregation/useMapAggregation.js

@@ -1,8 +1,8 @@
import * as Cesium from 'cesium'
import aggregationImg from '@/assets/images/home/useUavHome/aggregation.png'
import eventAggregationImg from '@/assets/images/home/useUavHome/eventAggregationImg.png'
import uavImg from '@/assets/images/home/useUavHome/uavImg.png'

import eventImg from '@/assets/images/home/useEventOperate/event.png'
import eventSingle from '@/assets/images/home/useEventOperate/eventSingle.png'

import DevicePopUpBox from '@/views/Home/useMapAggregation/DevicePopUpBox.vue'
import EventPopUpBox from '@/views/Home/useMapAggregation/EventPopUpBox.vue'
@@ -27,8 +27,8 @@
export const useMapAggregation = type => {
  const { flyTo } = cesiumOperation()

  const singleImg = type === 'device' ? uavImg : eventImg
  const mergeImg = type === 'device' ? aggregationImg : aggregationImg
  const singleImg = type === 'device' ? uavImg : eventSingle
  const mergeImg = type === 'device' ? aggregationImg : eventAggregationImg
  const MapPopUpBox = type === 'device' ? DevicePopUpBox : EventPopUpBox
  const styleTransform = type === 'device' ? 'translateY(-50%)' : 'translate(-50%,-110%)'