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/assets/images/home/eventOverviewDetail/rightArrow.png | 0
src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue | 12
src/assets/images/home/eventOverviewDetail/indexPoint.png | 0
src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue | 405 +++++++++++++---
src/assets/images/home/eventOverviewDetail/status1.png | 0
src/assets/images/signMachineNest/machineRight/detailtitle.png | 0
src/components/CommonTitle.vue | 2
src/assets/images/home/eventOverviewDetail/positioning.png | 0
src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventOverviewDetailLeft.vue | 3
src/assets/images/home/eventOverviewDetail/status0.png | 0
src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceEvent.vue | 139 -----
src/assets/images/home/useUavHome/eventAggregationImg.png | 0
src/assets/images/home/eventOverviewDetail/status5.png | 0
src/assets/images/home/eventOverviewDetail/leftArrow.png | 0
src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue | 138 -----
src/views/Home/HomeRight/EventOverview.vue | 2
src/views/Home/HomeLeft/MachineNestList.vue | 74 ++
src/assets/images/home/eventOverviewDetail/status4.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/views/SignMachineNest/MachineLeft/MachineLeft.vue | 2
src/styles/element-ui.scss | 174 +++++++
src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue | 62 +
src/assets/images/home/eventOverviewDetail/status2.png | 0
src/assets/images/home/eventOverviewDetail/status3.png | 0
src/api/home/event.js | 3
src/components/CommonWeather.vue | 8
.prettierrc.json | 3
src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue | 138 -----
30 files changed, 805 insertions(+), 589 deletions(-)
diff --git a/.prettierrc.json b/.prettierrc.json
index c78fa85..e1e619b 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -7,6 +7,7 @@
"singleQuote": true,
"arrowParens": "avoid",
"endOfLine": "crlf",
+ "htmlWhitespaceSensitivity": "ignore",
"bracketSameLine": false,
"proseWrap": "preserve",
"useTabs": true,
@@ -21,4 +22,4 @@
}
}
]
-}
+}
\ No newline at end of file
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/assets/images/signMachineNest/machineRight/detailtitle.png b/src/assets/images/signMachineNest/machineRight/detailtitle.png
new file mode 100644
index 0000000..8b94991
--- /dev/null
+++ b/src/assets/images/signMachineNest/machineRight/detailtitle.png
Binary files differ
diff --git a/src/components/CommonTitle.vue b/src/components/CommonTitle.vue
index 48993f5..9066cc0 100644
--- a/src/components/CommonTitle.vue
+++ b/src/components/CommonTitle.vue
@@ -67,7 +67,7 @@
}
.do-return {
position: absolute;
- top: 50px;
+ top: 3px;
right: -50px;
cursor: pointer;
img {
diff --git a/src/components/CommonWeather.vue b/src/components/CommonWeather.vue
index 3d179c9..473e729 100644
--- a/src/components/CommonWeather.vue
+++ b/src/components/CommonWeather.vue
@@ -6,7 +6,7 @@
<img src="@/assets/images/home/homeLeft/tq.png" alt="" />
<span class="tq">{{ weather }}</span>
<span class="tq">风速：{{ windVelocity }} </span>
- <span v-if="flylevel > 6" :class="[isFly === '建议飞行' ? 'qk' : isFly === '禁止飞行' ? 'redqk' : 'yellowqk']">{{
+ <span v-if="flylevel >= 5" :class="[isFly === '适合飞行' ? 'qk' : isFly === '禁止飞行' ? 'redqk' : 'yellowqk']">{{
isFly
}}</span>
</div>
@@ -37,7 +37,9 @@
weather.value = res.data.data.weather
isFly.value = res.data.data.flightAdvice
windVelocity.value = res.data.data.windPower
- flylevel.value = res.data.data.adcode.length
+ flylevel.value = res.data.data.adcode.replace(/0+$/, "").length
+
+
})
}
@@ -57,7 +59,7 @@
<style scoped lang="scss">
.time-weather {
margin-left: 45px;
- width: 350px;
+ // width: 350px;
font-size: 14px;
height: 36px;
line-height: 36px;
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 337cc36..27d81e9 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -60,3 +60,177 @@
.avue--detail .el-form-item {
background-color: #fafafa;
}
+// 查看按钮
+.ztzf-view {
+ width: 53px;
+ height: 27px;
+ background: #001f4e !important;
+ border-radius: 0px 0px 0px 0px;
+ border: 1px solid #51a8ff !important;
+ font-size: 14px;
+ color: #ffffff;
+ text-align: center;
+ line-height: 27px;
+ cursor: pointer;
+}
+// table表格
+.ztzf-table {
+ .el-table__inner-wrapper:before {
+ height: 0 !important;
+ }
+ .el-table .warning-row {
+ --el-table-tr-bg-color: rgba(22, 43, 74, 0.79);
+ }
+ .el-table .warning-row::after {
+ position: absolute;
+ content: '';
+ left: 0;
+ width: 100%;
+ border-bottom: 1px solid;
+
+ border-image: linear-gradient(
+ 90deg,
+ rgba(25, 162, 255, 0) 10%,
+ rgba(20, 125, 202, 1) 50%,
+ rgba(25, 162, 255, 0) 90%
+ )
+ 2 2 2 2;
+ }
+ .el-table .success-row {
+ --el-table-tr-bg-color: #0b1d38;
+ }
+ .el-table .success-row::after {
+ position: absolute;
+ content: '';
+ left: 0;
+ width: 100%;
+ border-bottom: 1px solid;
+
+ border-image: linear-gradient(
+ 90deg,
+ rgba(25, 162, 255, 0) 10%,
+ rgba(20, 125, 202, 1) 79%,
+ rgba(25, 162, 255, 0) 90%
+ )
+ 2 2 2 2;
+ }
+ .el-table {
+ color: #fff;
+ --el-table-border-color: var(--el-border-color-lighter);
+ --el-table-border: none !important;
+ --el-table-text-color: #fff !important;
+ --el-table-header-text-color: #fff !important;
+ --el-table-row-hover-bg-color: none !important;
+ --el-table-current-row-bg-color: none !important;
+ --el-table-header-bg-color: none !important;
+ --el-table-fixed-box-shadow: none !important;
+ --el-table-bg-color: none !important;
+ --el-table-tr-bg-color: none !important;
+ --el-table-expanded-cell-bg-color: none !important;
+ --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
+ --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
+ }
+ .el-table__header {
+ width: 0 !important;
+ }
+ .el-table__body {
+ border-collapse: collapse;
+ }
+ .el-table .el-table__cell {
+ padding: 0 !important;
+ text-align: center !important;
+ }
+
+ .el-table thead{
+ border-bottom: 1px solid !important;
+ border: 1px solid !important;
+ border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1 !important;
+ color: var(--el-table-header-text-color) !important;
+ background: #102441 !important;
+ }
+}
+ // 分页
+.ztzf-pagination {
+
+ .el-pagination {
+ display: flex !important;
+ justify-content: center !important;
+}
+.el-pagination button{
+ background: center center no-repeat none !important;
+ color: #8eb8ea !important;
+}
+.el-pager li{
+ background: none !important;
+ color: #8eb8ea !important;
+}
+.el-pager li.is-active {
+ background: #021022 !important;
+ border-radius: 0px 0px 0px 0px;
+ border: 1px solid #1479ef;
+ color: #c7e1ff !important;
+}
+.el-pagination__goto {
+ color: #c7e1ff !important;
+}
+.el-pagination__classifier {
+ color: #c7e1ff !important;
+}
+.el-pager .el-input__wrapper {
+ background: #021022 !important;
+ color: #c7e1ff !important;
+ border: 1px solid #1479ef !important;
+ z-index: 1;
+}
+.el-input__wrapper {
+ background: #021022 !important;
+ box-shadow: none !important;
+ border: 1px solid #178bff;
+ color: #fff !important;
+}
+.el-input__inner {
+ color: #fff !important;
+}
+}
+
+
+.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 2b01ce7..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;
- top: 50px;
+
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/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue b/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue
index 4a8ebf3..5732667 100644
--- a/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue
+++ b/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue
@@ -59,11 +59,11 @@
</div>
</el-form>
<!-- 表格 -->
- <div class="tabledata">
+ <div class="tabledata ztzf-table">
<el-table
:data="taskDetailData"
:row-class-name="tableRowClassName"
- :row-style="{ height: '58px', fontSize: '14px', 'text-align': 'center' }"
+ :row-style="{ height: '54px', fontSize: '14px', 'text-align': 'center' }"
:header-cell-style="{ 'text-align': 'center', height: '36px', fontSize: '14px' }"
>
<el-table-column label="序号" type="index" width="60">
@@ -71,8 +71,7 @@
{{ ($index + 1).toString().padStart(2, '0') }}
</template>
</el-table-column>
- <!-- 事件状态:0 =待处理，1=待分拨，2=待处理，3=处理中，4=已完成 5=已完结 -->
- <el-table-column show-overflow-tooltip prop="job_info_num" label="任务编号" />
+ <el-table-column show-overflow-tooltip prop="job_info_num" label="任务编号" />
<el-table-column prop="name" show-overflow-tooltip label="任务名称" />
<el-table-column prop="device_names" show-overflow-tooltip label="所属机巢" />
<el-table-column show-overflow-tooltip prop="ai_type_str" label="关联算法" />
@@ -90,7 +89,8 @@
? 'cancel '
: 'fail '
"
- >{{
+ >
+ {{
scope.row.status == 1
? '待执行'
: scope.row.status == 2
@@ -100,22 +100,22 @@
: scope.row.status == 4
? '取消'
: '失败'
- }}</span
- >
+ }}
+ </span>
</template>
</el-table-column>
- <el-table-column prop="industry_type_str" label="任务类型" />
- <el-table-column prop="begin_time" label="任务时间" width="150"/>
+ <el-table-column show-overflow-tooltip prop="industry_type_str" label="任务类型" />
+ <el-table-column prop="begin_time" label="任务时间" width="150" />
<el-table-column prop="event_number" label="关联事件">
<template #default="scope">
<span>{{ scope.row.event_number ? scope.row.event_number : '/' }}</span>
</template>
</el-table-column>
- <el-table-column label="操作" width="80"> <div class="view">查看</div></el-table-column>
+ <el-table-column label="操作" width="80"><div class="ztzf-view ">查看</div></el-table-column>
</el-table>
</div>
<!-- 分页 -->
- <div class="pagination">
+ <div class="pagination ztzf-pagination">
<el-pagination
v-model:current-page="pageParams.current"
v-model:page-size="pageParams.size"
@@ -286,16 +286,6 @@
}
:deep() {
- .el-table .el-table__cell {
- padding: 0 !important;
- }
- .el-table thead {
- border-bottom: 1px solid;
- border: 1px solid;
- border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
- color: var(--el-table-header-text-color);
- background: #102441;
- }
.el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
height: var(--el-input-height, var(--el-component-size));
@@ -336,62 +326,19 @@
}
}
:deep(.el-pagination) {
-display: flex;
-justify-content: center;
-margin-top: 10px;
+ display: flex;
+ justify-content: center;
+ margin-top: 10px;
}
:deep(.el-pagination button) {
background: center center no-repeat none !important;
color: #8eb8ea !important;
}
-:deep(.el-pager li) {
- background: none !important;
- color: #8eb8ea !important;
-}
-:deep(.el-pager li.is-active) {
- background: #021022 !important;
- border-radius: 0px 0px 0px 0px;
- border: 1px solid #1479ef;
- color: #c7e1ff !important;
-}
-:deep(.el-pagination__goto) {
- color: #c7e1ff !important;
-}
-:deep(.el-pagination__classifier) {
- color: #c7e1ff !important;
-}
-:deep(.el-pager .el-input__wrapper) {
- background: #021022 !important;
- color: #c7e1ff !important;
- border: 1px solid #1479ef !important;
- z-index: 1;
-}
-.el-table {
- color: #fff;
- --el-table-border-color: var(--el-border-color-lighter);
- --el-table-border: none !important;
- --el-table-text-color: #fff !important;
- --el-table-header-text-color: #fff !important;
- --el-table-row-hover-bg-color: none !important;
- --el-table-current-row-bg-color: none !important;
- --el-table-header-bg-color: none !important;
- --el-table-fixed-box-shadow: none !important;
- --el-table-bg-color: none !important;
- --el-table-tr-bg-color: none !important;
- --el-table-expanded-cell-bg-color: none !important;
- --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
- --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
-}
-.el-table__header {
- width: 0 !important;
-}
+
.el-table__body {
border-collapse: collapse;
}
-:deep(.el-table .el-table__cell) {
- padding: 0 !important;
- text-align: center !important;
-}
+
.my-header {
display: inline-block;
vertical-align: middle;
@@ -418,18 +365,7 @@
height: 640px;
overflow-y: scroll !important;
}
-.view {
- width: 53px;
- height: 27px;
- background: #001f4e;
- border-radius: 0px 0px 0px 0px;
- border: 1px solid #51a8ff;
- font-size: 14px;
- color: #ffffff;
- text-align: center;
- line-height: 27px;
- cursor: pointer;
-}
+
// 任务状态颜色
.pending {
color: #e36913;
@@ -499,45 +435,7 @@
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
}
- .el-table__inner-wrapper:before {
- height: 0 !important;
- }
- .el-table .warning-row {
- --el-table-tr-bg-color: rgba(22, 43, 74, 0.79);
- }
- .el-table .warning-row::after {
- position: absolute;
- content: '';
- left: 0;
- width: 100%;
- border-bottom: 1px solid;
-
- border-image: linear-gradient(
- 90deg,
- rgba(25, 162, 255, 0) 10%,
- rgba(20, 125, 202, 1) 50%,
- rgba(25, 162, 255, 0) 90%
- )
- 2 2 2 2;
- }
- .el-table .success-row {
- --el-table-tr-bg-color: #0b1d38;
- }
- .el-table .success-row::after {
- position: absolute;
- content: '';
- left: 0;
- width: 100%;
- border-bottom: 1px solid;
-
- border-image: linear-gradient(
- 90deg,
- rgba(25, 162, 255, 0) 10%,
- rgba(20, 125, 202, 1) 79%,
- rgba(25, 162, 255, 0) 90%
- )
- 2 2 2 2;
- }
+
.el-scrollbar__thumb {
background: #13c6ff !important;
}
diff --git a/src/views/Home/HomeLeft/MachineNestList.vue b/src/views/Home/HomeLeft/MachineNestList.vue
index 34dc865..f629fd2 100644
--- a/src/views/Home/HomeLeft/MachineNestList.vue
+++ b/src/views/Home/HomeLeft/MachineNestList.vue
@@ -1,11 +1,23 @@
<!-- 机巢详情列表 -->
<template>
<common-title title="机巢概况" text="返回" :style="{ marginLeft: pxToRem(14) }" @details="detailsFun"></common-title>
+
<div class="machine-nest-list">
<MachineNestTotal @searchNickName="handleSearch" />
<div class="content-wrapper">
- <div class="table-list">
- <div :class="[index % 2 ==1 ? 'table-itemeven':'table-item']" v-for="(item,index) in tableList" :key="index">
+ <div
+ class="table-list"
+ v-if="tableList.length > 0"
+ infinite-scroll-distance="6"
+ v-infinite-scroll="loadMore"
+ :infinite-scroll-disabled="busy"
+ infinite-scroll-immediate="true"
+ >
+ <div
+ :class="[index % 2 == 1 ? 'table-itemeven' : 'table-item']"
+ v-for="(item, index) in tableList"
+ :key="index"
+ >
<img src="/src/assets/images/home/homeLeft/machinenestlist-sign.png" alt="" />
<div class="middle">
<div class="title">{{ item.nickname }}</div>
@@ -19,14 +31,17 @@
>个 飞行时长：<span>{{ item.hour }}</span
>h
</div>
- <div class="numbering">23HK1453</div>
</div>
- <div class="right" :class="item.status === 'WORKING' ? 'atcive' : item.status === 'OFFLINE'? 'offine' :'freetime' " @click="signMachineNestClick(item)">
+ <div
+ class="right"
+ :class="item.status === 'WORKING' ? 'atcive' : item.status === 'OFFLINE' ? 'offine' : 'freetime'"
+ @click="signMachineNestClick(item)"
+ >
{{ item.status === 'OFFLINE' ? '离线中' : item.status === 'WORKING' ? '作业中' : '空闲中' }}
</div>
</div>
</div>
- <div class="pagination-container">
+ <!-- <div class="pagination-container">
<el-pagination
v-model:current-page="pageParams.current"
v-model:page-size="pageParams.size"
@@ -37,7 +52,7 @@
@current-change="handleCurrentChange"
background
/>
- </div>
+ </div> -->
</div>
</div>
</template>
@@ -49,7 +64,9 @@
import { useStore } from 'vuex'
const store = useStore()
-
+const isMore = ref(true)
+// 控制加载状态
+const busy = ref(false)
const searchText = ref('')
// 分页参数
const pageParams = ref({
@@ -69,11 +86,18 @@
}
selectDevicePage(params).then(res => {
if (res.data.code !== 0) return
- tableList.value = res.data.data.records
- pageParams.value.total = res.data.data.total
+ if (res.data.data.records.length === 0) return (isMore.value = false)
+ pageParams.value.current += 1
+ tableList.value = [...tableList.value, ...res.data.data.records]
+ busy.value = false
})
}
-
+// 加载更多数据
+const loadMore = async () => {
+ busy.value = true
+ if (!isMore.value) return
+ getTableList()
+}
// 搜索数据
const handleSearch = name => {
searchText.value = name
@@ -129,6 +153,13 @@
font-weight: 500;
font-size: 16px;
color: #fff;
+ // 滚动条
+ &::-webkit-scrollbar {
+ width: 0;
+ display: none;
+ }
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
.table-item {
display: flex;
justify-content: space-between;
@@ -136,7 +167,7 @@
padding-top: 6px;
margin-top: 10px;
- height: 120px;
+ height: 100px;
background: linear-gradient(
90deg,
rgba(0, 122, 255, 0) 0%,
@@ -144,7 +175,7 @@
rgba(0, 73, 153, 0) 100%
);
}
- .table-itemeven {
+ .table-itemeven {
display: flex;
justify-content: space-between;
justify-items: center;
@@ -152,7 +183,6 @@
margin-top: 10px;
height: 120px;
-
}
img {
width: 45px;
@@ -182,15 +212,15 @@
cursor: pointer;
font-size: 16px;
}
- // 离线中
- .offine {
- color: #fff;
- }
- // 空闲中
- .freetime{
- color: #FFA768;
- }
- // 作业中
+ // 离线中
+ .offine {
+ color: #fff;
+ }
+ // 空闲中
+ .freetime {
+ color: #ffa768;
+ }
+ // 作业中
.atcive {
color: #04f020;
background: linear-gradient(90deg, rgba(12, 45, 92, 1) 0%, #154671 50%, rgba(12, 45, 92, 1) 100%),
diff --git a/src/views/Home/HomeRight/EventOverview.vue b/src/views/Home/HomeRight/EventOverview.vue
index a8899cd..c9c5d5e 100644
--- a/src/views/Home/HomeRight/EventOverview.vue
+++ b/src/views/Home/HomeRight/EventOverview.vue
@@ -119,7 +119,7 @@
const eventTypeList = ref([
{ name: '待审核', value: 0, img: overviewImg1, color: '#8CFEA7', status: '2' },
- { name: '待分拨', value: 0, img: overviewImg2, color: '#6FCAFF', status: '1' },
+ // { name: '待分拨', value: 0, img: overviewImg2, color: '#6FCAFF', status: '1' },
{ name: '待处理', value: 0, img: overviewImg3, color: '#E36913', status: '0' },
{ name: '处理中', value: 0, img: overviewImg4, color: '#FFC398', status: '3' },
{ name: '已完成', value: 0, img: overviewImg5, color: '#AFD9FB', status: '4' },
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%)'
diff --git a/src/views/SignMachineNest/MachineLeft/MachineLeft.vue b/src/views/SignMachineNest/MachineLeft/MachineLeft.vue
index 08fa7b8..6f9d0b8 100644
--- a/src/views/SignMachineNest/MachineLeft/MachineLeft.vue
+++ b/src/views/SignMachineNest/MachineLeft/MachineLeft.vue
@@ -35,7 +35,7 @@
color: #e7f5ff;
.do-return {
position: absolute;
- top: 50px;
+ top: 40px;
right: -50px;
cursor: pointer;
img {
diff --git a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceEvent.vue b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceEvent.vue
index 15887e9..62b17e1 100644
--- a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceEvent.vue
+++ b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceEvent.vue
@@ -6,7 +6,7 @@
>件
</p>
</div>
- <div class="deviceevent-table">
+ <div class="deviceevent-table ztzf-table">
<el-table :data="list" :row-class-name="tableRowClassName"
style="width: 100%;"
:row-style="{ height: '38px', fontSize: '14px', 'text-align': 'center' }"
@@ -19,8 +19,8 @@
<el-table-column prop="id" label="事件编号" />
<el-table-column prop="event_name" label="事件名称" />
<el-table-column prop="event_name" label="所属单位 " />
- <el-table-column prop="media_type" label="事件内容" />
- <el-table-column prop="ai_types" label="关联算法" />
+ <el-table-column show-overflow-tooltip prop="media_type" label="事件内容" />
+ <el-table-column show-overflow-tooltip prop="ai_types" label="关联算法" />
<el-table-column prop="status" label="事件状态">
<template #default="scope">
<el-tag v-if="scope.row.status === 0" type="info">待处理</el-tag>
@@ -33,7 +33,9 @@
</el-table-column>
<el-table-column label="操作" width="80">
- <div class="view">查看</div>
+ <template #default="scope">
+ <div class="ztzf-view" @click="distribution(scope.row)">查看</div>
+ </template>
<!-- <template #default="scope" >
<el-button type="success" link @click="examine(scope.row)">审核</el-button>
<el-button type="primary" link @click="distribution(scope.row)">查看</el-button>
@@ -42,6 +44,7 @@
</el-table>
</div>
<el-pagination
+ class="ztzf-pagination"
background
:page-sizes="[10, 20, 30, 50]"
v-model:current-page="sizeParams.current"
@@ -83,6 +86,9 @@
list.value = resData.records
total.value = resData.total
})
+
+
+
}
const pageChange = val => {
sizeParams.value.current = val
@@ -100,50 +106,7 @@
getList()
})
</script>
-<style lang="scss">
-.deviceevent-container {
- // 表格
- .el-table__inner-wrapper:before {
- height: 0 !important;
- }
- .el-table .warning-row {
- --el-table-tr-bg-color: rgba(22, 43, 74, 0.79);
- }
- .el-table .warning-row::after {
- position: absolute;
- content: '';
- left: 0;
- width: 100%;
- border-bottom: 1px solid;
- border-image: linear-gradient(
- 90deg,
- rgba(25, 162, 255, 0) 10%,
- rgba(20, 125, 202, 1) 50%,
- rgba(25, 162, 255, 0) 90%
- )
- 2 2 2 2;
- }
- .el-table .success-row {
- --el-table-tr-bg-color: #0b1d38;
- }
- .el-table .success-row::after {
- position: absolute;
- content: '';
- left: 0;
- width: 100%;
- border-bottom: 1px solid;
-
- border-image: linear-gradient(
- 90deg,
- rgba(25, 162, 255, 0) 10%,
- rgba(20, 125, 202, 1) 79%,
- rgba(25, 162, 255, 0) 90%
- )
- 2 2 2 2;
- }
-}
-</style>
<style scoped lang="scss">
// 标题
@@ -171,42 +134,7 @@
.deviceevent-table {
padding: 0 17px;
}
-.el-table {
- color: #fff;
- --el-table-border-color: var(--el-border-color-lighter);
- --el-table-border: none !important;
- --el-table-text-color: #fff !important;
- --el-table-header-text-color: #fff !important;
- --el-table-row-hover-bg-color: none !important;
- --el-table-current-row-bg-color: none !important;
- --el-table-header-bg-color: none !important;
- --el-table-fixed-box-shadow: none !important;
- --el-table-bg-color: none !important;
- --el-table-tr-bg-color: none !important;
- --el-table-expanded-cell-bg-color: none !important;
- --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
- --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
-}
-.el-table__header {
- width: 0 !important;
-}
-.el-table__body {
- border-collapse: collapse;
-}
-:deep(.el-table .el-table__cell) {
- padding: 0 !important;
- text-align: center !important;
-}
-:deep(.el-table .el-table__cell) {
- padding: 0 !important;
-}
-:deep(.el-table thead) {
- border-bottom: 1px solid;
- border: 1px solid;
- border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
- color: var(--el-table-header-text-color);
- background: #102441;
-}
+
// 分页
:deep(.el-pagination) {
display: flex;
@@ -217,51 +145,10 @@
background: center center no-repeat none !important;
color: #8eb8ea !important;
}
-:deep(.el-pager li) {
- background: none !important;
- color: #8eb8ea !important;
-}
-:deep(.el-pager li.is-active) {
- background: #021022 !important;
- border-radius: 0px 0px 0px 0px;
- border: 1px solid #1479ef;
- color: #c7e1ff !important;
-}
-:deep(.el-pagination__goto) {
- color: #c7e1ff !important;
-}
-:deep(.el-pagination__classifier) {
- color: #c7e1ff !important;
-}
-:deep(.el-pager .el-input__wrapper) {
- background: #021022 !important;
- color: #c7e1ff !important;
- border: 1px solid #1479ef !important;
- z-index: 1;
-}
-:deep(.el-input__wrapper) {
- background: #021022 !important;
- box-shadow: none !important;
- border: 1px solid #178bff;
- color: #fff !important;
-}
-:deep(.el-input__inner) {
- color: #fff !important;
-}
+
:deep(.el-tag){
background: none !important;
border:none !important
}
-.view {
- width: 53px;
- height: 27px;
- background: #001f4e;
- border-radius: 0px 0px 0px 0px;
- border: 1px solid #51a8ff;
- font-size: 14px;
- color: #ffffff;
- text-align: center;
- line-height: 27px;
- cursor: pointer;
-}
+
</style>
diff --git a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue
index e53a6e5..c84fc5e 100644
--- a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue
+++ b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue
@@ -6,7 +6,7 @@
>次
</p>
</div>
- <div class="devicelob-table">
+ <div class="devicelob-table ztzf-table">
<el-table
:data="list"
:row-class-name="tableRowClassName"
@@ -20,21 +20,21 @@
</template>
</el-table-column>
<el-table-column prop="id" label="任务编号" />
- <el-table-column prop="name" label="任务名称" />
- <el-table-column prop="industry_type_str" label="任务类型" />
- <el-table-column prop="ai_type_str" label="关联算法" />
- <el-table-column prop="event_number" label="事件工单" />
+ <el-table-column show-overflow-tooltip prop="name" label="任务名称" />
+ <el-table-column show-overflow-tooltip prop="industry_type_str" label="任务类型" />
+ <el-table-column show-overflow-tooltip prop="ai_type_str" label="关联算法" />
+ <el-table-column show-overflow-tooltip prop="event_number" label="事件工单" />
<el-table-column label="操作" width="80">
-
<template #default="scope">
- <div class="view" @click="viewJob(scope.row)">查看</div>
+ <div class="ztzf-view" @click="viewJob(scope.row)">查看</div>
<!-- <el-button type="warning" link @click="viewJob(scope.row)">查看</el-button> -->
</template>
</el-table-column>
</el-table>
</div>
<el-pagination
+ class="ztzf-pagination"
background
:page-sizes="[10, 20, 30, 50]"
v-model:current-page="sizeParams.current"
@@ -99,52 +99,14 @@
<style lang="scss">
.devicejob-container {
// 表格
- .el-table__inner-wrapper:before {
- height: 0 !important;
- }
- .el-table .warning-row {
- --el-table-tr-bg-color: rgba(22, 43, 74, 0.79);
- }
- .el-table .warning-row::after {
- position: absolute;
- content: '';
- left: 0;
- width: 100%;
- border-bottom: 1px solid;
-
- border-image: linear-gradient(
- 90deg,
- rgba(25, 162, 255, 0) 10%,
- rgba(20, 125, 202, 1) 50%,
- rgba(25, 162, 255, 0) 90%
- )
- 2 2 2 2;
- }
- .el-table .success-row {
- --el-table-tr-bg-color: #0b1d38;
- }
- .el-table .success-row::after {
- position: absolute;
- content: '';
- left: 0;
- width: 100%;
- border-bottom: 1px solid;
-
- border-image: linear-gradient(
- 90deg,
- rgba(25, 162, 255, 0) 10%,
- rgba(20, 125, 202, 1) 79%,
- rgba(25, 162, 255, 0) 90%
- )
- 2 2 2 2;
- }
+
}
</style>
<style scoped lang="scss">
// 标题
.machineTableDetailsTitle {
margin: 0 24px;
- // margin-bottom: 16px;
+ margin-bottom: 16px;
background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
background-size: 100% 100%;
p {
@@ -166,93 +128,15 @@
.devicelob-table {
padding: 0 17px;
}
-.el-table {
- color: #fff;
- --el-table-border-color: var(--el-border-color-lighter);
- --el-table-border: none !important;
- --el-table-text-color: #fff !important;
- --el-table-header-text-color: #fff !important;
- --el-table-row-hover-bg-color: none !important;
- --el-table-current-row-bg-color: none !important;
- --el-table-header-bg-color: none !important;
- --el-table-fixed-box-shadow: none !important;
- --el-table-bg-color: none !important;
- --el-table-tr-bg-color: none !important;
- --el-table-expanded-cell-bg-color: none !important;
- --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
- --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
-}
-.el-table__header {
- width: 0 !important;
-}
-.el-table__body {
- border-collapse: collapse;
-}
-:deep(.el-table .el-table__cell) {
- padding: 0 !important;
- text-align: center !important;
-}
-:deep(.el-table .el-table__cell) {
- padding: 0 !important;
-}
-:deep(.el-table thead) {
- border-bottom: 1px solid;
- border: 1px solid;
- border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
- color: var(--el-table-header-text-color);
- background: #102441;
-}
+
+
// 分页
:deep(.el-pagination) {
display: flex;
justify-content: center;
-
}
:deep(.el-pagination button) {
background: center center no-repeat none !important;
color: #8eb8ea !important;
-}
-:deep(.el-pager li) {
- background: none !important;
- color: #8eb8ea !important;
-}
-:deep(.el-pager li.is-active) {
- background: #021022 !important;
- border-radius: 0px 0px 0px 0px;
- border: 1px solid #1479ef;
- color: #c7e1ff !important;
-}
-:deep(.el-pagination__goto) {
- color: #c7e1ff !important;
-}
-:deep(.el-pagination__classifier) {
- color: #c7e1ff !important;
-}
-:deep(.el-pager .el-input__wrapper) {
- background: #021022 !important;
- color: #c7e1ff !important;
- border: 1px solid #1479ef !important;
- z-index: 1;
-}
-:deep(.el-input__wrapper) {
- background: #021022 !important;
- box-shadow: none !important;
- border: 1px solid #178bff;
- color: #fff !important;
-}
-:deep(.el-input__inner) {
- color: #fff !important;
-}
-.view {
- width: 53px;
- height: 27px;
- background: #001f4e;
- border-radius: 0px 0px 0px 0px;
- border: 1px solid #51a8ff;
- font-size: 14px;
- color: #ffffff;
- text-align: center;
- line-height: 27px;
- cursor: pointer;
}
</style>
--
Gitblit v1.9.3