From 5e0817661e2b111d2e4ec117659b60193a89c7ad Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Sat, 12 Apr 2025 17:29:21 +0800
Subject: [PATCH] feat: 事件概况详情ui调整
---
src/assets/images/home/eventOverviewDetail/rightArrow.png | 0
src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue | 12
src/assets/images/home/eventOverviewDetail/indexPoint.png | 0
src/assets/images/home/eventOverviewDetail/status4.png | 0
src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue | 405 +++++++++++++++++++++++++------
src/assets/images/home/eventOverviewDetail/status1.png | 0
src/assets/images/home/useEventOperate/eventSingle.png | 0
src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTop5.vue | 221 ++++++++++------
src/views/Home/useMapAggregation/useMapAggregation.js | 8
src/assets/images/home/eventOverviewDetail/positioning.png | 0
src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventOverviewDetailLeft.vue | 3
src/styles/element-ui.scss | 42 +++
src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue | 62 +++-
src/assets/images/home/eventOverviewDetail/status0.png | 0
src/assets/images/home/useUavHome/eventAggregationImg.png | 0
src/assets/images/home/eventOverviewDetail/status5.png | 0
src/assets/images/home/eventOverviewDetail/status2.png | 0
src/assets/images/home/eventOverviewDetail/leftArrow.png | 0
src/assets/images/home/eventOverviewDetail/status3.png | 0
src/api/home/event.js | 3
20 files changed, 569 insertions(+), 187 deletions(-)
diff --git a/src/api/home/event.js b/src/api/home/event.js
index 1bdb630..5f83f06 100644
--- a/src/api/home/event.js
+++ b/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
})
}
diff --git a/src/assets/images/home/eventOverviewDetail/indexPoint.png b/src/assets/images/home/eventOverviewDetail/indexPoint.png
new file mode 100644
index 0000000..eeb60df
--- /dev/null
+++ b/src/assets/images/home/eventOverviewDetail/indexPoint.png
Binary files differ
diff --git a/src/assets/images/home/eventOverviewDetail/leftArrow.png b/src/assets/images/home/eventOverviewDetail/leftArrow.png
new file mode 100644
index 0000000..4c19122
--- /dev/null
+++ b/src/assets/images/home/eventOverviewDetail/leftArrow.png
Binary files differ
diff --git a/src/assets/images/home/eventOverviewDetail/positioning.png b/src/assets/images/home/eventOverviewDetail/positioning.png
new file mode 100644
index 0000000..bb13867
--- /dev/null
+++ b/src/assets/images/home/eventOverviewDetail/positioning.png
Binary files differ
diff --git a/src/assets/images/home/eventOverviewDetail/rightArrow.png b/src/assets/images/home/eventOverviewDetail/rightArrow.png
new file mode 100644
index 0000000..eaffcb3
--- /dev/null
+++ b/src/assets/images/home/eventOverviewDetail/rightArrow.png
Binary files differ
diff --git a/src/assets/images/home/eventOverviewDetail/status0.png b/src/assets/images/home/eventOverviewDetail/status0.png
new file mode 100644
index 0000000..2e6b26d
--- /dev/null
+++ b/src/assets/images/home/eventOverviewDetail/status0.png
Binary files differ
diff --git a/src/assets/images/home/eventOverviewDetail/status1.png b/src/assets/images/home/eventOverviewDetail/status1.png
new file mode 100644
index 0000000..6cd2c96
--- /dev/null
+++ b/src/assets/images/home/eventOverviewDetail/status1.png
Binary files differ
diff --git a/src/assets/images/home/eventOverviewDetail/status2.png b/src/assets/images/home/eventOverviewDetail/status2.png
new file mode 100644
index 0000000..4c975dc
--- /dev/null
+++ b/src/assets/images/home/eventOverviewDetail/status2.png
Binary files differ
diff --git a/src/assets/images/home/eventOverviewDetail/status3.png b/src/assets/images/home/eventOverviewDetail/status3.png
new file mode 100644
index 0000000..3dafee3
--- /dev/null
+++ b/src/assets/images/home/eventOverviewDetail/status3.png
Binary files differ
diff --git a/src/assets/images/home/eventOverviewDetail/status4.png b/src/assets/images/home/eventOverviewDetail/status4.png
new file mode 100644
index 0000000..7789b38
--- /dev/null
+++ b/src/assets/images/home/eventOverviewDetail/status4.png
Binary files differ
diff --git a/src/assets/images/home/eventOverviewDetail/status5.png b/src/assets/images/home/eventOverviewDetail/status5.png
new file mode 100644
index 0000000..69c9c03
--- /dev/null
+++ b/src/assets/images/home/eventOverviewDetail/status5.png
Binary files differ
diff --git a/src/assets/images/home/useEventOperate/eventSingle.png b/src/assets/images/home/useEventOperate/eventSingle.png
new file mode 100644
index 0000000..3f5ba88
--- /dev/null
+++ b/src/assets/images/home/useEventOperate/eventSingle.png
Binary files differ
diff --git a/src/assets/images/home/useUavHome/eventAggregationImg.png b/src/assets/images/home/useUavHome/eventAggregationImg.png
new file mode 100644
index 0000000..938ea18
--- /dev/null
+++ b/src/assets/images/home/useUavHome/eventAggregationImg.png
Binary files differ
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 337cc36..a7efca2 100644
--- a/src/styles/element-ui.scss
+++ b/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;
+ }
+}
diff --git a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue b/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue
index 38477bd..0652a8f 100644
--- a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue
+++ b/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;
diff --git a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventOverviewDetailLeft.vue b/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventOverviewDetailLeft.vue
index 0f434eb..1b6ba6d 100644
--- a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventOverviewDetailLeft.vue
+++ b/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;
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>
diff --git a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue b/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue
index f512923..36fdb73 100644
--- a/src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue
+++ b/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: [], // 示例数据，根据实际完成率计算
},
}
diff --git a/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue b/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
index ff5d05a..005f263 100644
--- a/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
+++ b/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>
diff --git a/src/views/Home/useMapAggregation/useMapAggregation.js b/src/views/Home/useMapAggregation/useMapAggregation.js
index 8678176..8ffc95a 100644
--- a/src/views/Home/useMapAggregation/useMapAggregation.js
+++ b/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%)'
--
Gitblit v1.9.3