From 761dc97c8ac017e5d57b331f7bcf3cfaf1ca1159 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 08 Nov 2024 15:44:06 +0800
Subject: [PATCH] fix: 无人机轨迹修改
---
src/views/toCarryOutLegislativeReforms/summaryPage/index.vue | 492 +++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 429 insertions(+), 63 deletions(-)
diff --git a/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue b/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue
index c1f050c..1833507 100644
--- a/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue
+++ b/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue
@@ -1,70 +1,303 @@
<template>
<div class="main">
<div class="timeSelect">
- <el-radio-group v-model="searchForm.number" style="margin-left:20px" @input="changeNumber">
- <el-radio-button label="1">���1������</el-radio-button>
- <el-radio-button label="2">���2������</el-radio-button>
- <el-radio-button label="3">���3������</el-radio-button>
- <el-radio-button label="6">���6������</el-radio-button>
- <el-radio-button label="12">���12������</el-radio-button>
+ <el-radio-group
+ v-model="searchForm.number"
+ style="margin-left:20px"
+ @input="changeNumber('timeMouted')"
+ >
+ <el-radio-button label="1">
+ ���1������
+ </el-radio-button>
+ <el-radio-button label="2">
+ ���2������
+ </el-radio-button>
+ <el-radio-button label="3">
+ ���3������
+ </el-radio-button>
+ <el-radio-button label="6">
+ ���6������
+ </el-radio-button>
+ <el-radio-button label="12">
+ ���12������
+ </el-radio-button>
</el-radio-group>
- <el-date-picker v-model="timeInterval" el-time-picker type="daterange" value-format="yyyy-MM-dd" range-separator="���" start-placeholder="������������" end-placeholder="������������" @change="changeNumber" />
+ <el-date-picker
+ v-model="timeInterval"
+ el-time-picker
+ type="daterange"
+ value-format="yyyy-MM-dd"
+ range-separator="���"
+ start-placeholder="������������"
+ end-placeholder="������������"
+ @change="changeNumber('timeValue')"
+ />
+ <el-cascader
+ collapse-tags
+ placeholder="������������"
+ :show-all-levels="false"
+ :options="unitList"
+ :props="{ multiple: true, value:'unitId',label:'unitName',children:'children'}"
+ @change="changeUid"
+ />
</div>
<div class="agentSummary">
- <div class="circle">
+ <div
+ class="circle"
+ @click="toOtherPage('total')"
+ >
<div>������������</div>
<div>{{ responeForm.total }}</div>
</div>
- <div class="circle">
+ <div
+ class="circle"
+ @click="toOtherPage('unComplete')"
+ >
<div>���������</div>
<div>{{ responeForm.unComplete }}</div>
</div>
- <div class="circle">
+ <div
+ class="circle"
+ @click="toOtherPage('complete')"
+ >
<div>���������</div>
<div>{{ responeForm.complete }}</div>
</div>
- <div class="circle">
+ <div
+ class="circle"
+ @click="toOtherPage('overdue')"
+ >
<div>������</div>
<div>{{ responeForm.overdue }}</div>
</div>
</div>
<div class="overviewAndDetails">
- <el-tabs v-model="activeName" @tab-click="handleClick">
- <el-tab-pane label="������" name="first">
+ <el-tabs
+ v-model="activeName"
+ @tab-click="handleClick"
+ >
+ <el-tab-pane
+ label="������"
+ name="first"
+ >
+ <div class="tit">
+ <span>
+ ���������������������������
+ </span>
+ <el-button
+ type="primary"
+ plain
+ size="small"
+ style="float: right;"
+ @click="ecxport"
+ >
+ ������
+ </el-button>
+ </div>
<div>
- <div class="tit">
- <span>
- ���������������������������
- </span>
- <el-button type="primary" plain size="small" style="float: right;" @click="ecxport">
- ������
- </el-button>
- </div>
- <div class="tab">
- <el-table :data="tableData" border max-height="400" style="width: 100%" :header-cell-style="{
- background: '#99D4FF', color: '#101111', fontSize: '16px'
- }">
- <el-table-column align="center" prop="unitName" label="������������" />
- <el-table-column align="center" prop="total" label="���������" />
- <el-table-column align="center" prop="number" label="���������" />
- <el-table-column align="center" prop="unNumber" label="���������" />
- <el-table-column align="center" prop="rate" label="���������" />
- <el-table-column align="center" prop="deduction" label="������" />
- <el-table-column align="center" prop="marks" label="������" />
- <el-table-column align="center" prop="totalPoints" label="���������" />
- </el-table>
+ <div class="min">
+ <div
+ class="tab"
+ style="display: inline-block; width: 100%"
+ >
+ <el-table
+ :data="tableData"
+ class="topTable"
+ border
+ style="width: 100%"
+ :header-cell-style="{
+ background: '#99D4FF', color: '#101111', fontSize: '16px'
+ }"
+ >
+ <el-table-column
+ align="center"
+ type="index"
+ width="60"
+ label="������"
+ />
+ <el-table-column
+ align="center"
+ prop="unitName"
+ label="������������"
+ />
+ <el-table-column
+ align="center"
+ prop="total"
+ label="���������"
+ />
+ <el-table-column
+ align="center"
+ prop="number"
+ label="���������"
+ />
+ <el-table-column
+ align="center"
+ prop="unNumber"
+ label="���������"
+ />
+ <el-table-column
+ align="center"
+ prop="rate"
+ label="���������"
+ />
+ <el-table-column
+ align="center"
+ prop="deduction"
+ label="������"
+ />
+ <el-table-column
+ align="center"
+ prop="marks"
+ label="������"
+ />
+ <el-table-column
+ align="center"
+ prop="totalPoints"
+ label="���������"
+ />
+ </el-table>
+ <vueSeamless
+ v-if="tableData.length>5"
+ ref="scroll3"
+ :data="tableData"
+ :pause="true"
+ class="seamless-warp"
+ style="width: 100%;"
+ :class-option="classOption"
+ >
+ <el-table
+ v-if="tableData.length>0"
+ :data="tableData"
+ class="bottomTable"
+ border
+ style="width: 100%;margin-bottom:50px"
+ >
+ <el-table-column
+ align="center"
+ type="index"
+ width="60"
+ />
+ <el-table-column
+ align="center"
+ prop="unitName"
+ label="������������"
+ />
+ <el-table-column
+ align="center"
+ prop="total"
+ label="���������"
+ />
+ <el-table-column
+ align="center"
+ prop="number"
+ label="���������"
+ />
+ <el-table-column
+ align="center"
+ prop="unNumber"
+ label="���������"
+ />
+ <el-table-column
+ align="center"
+ prop="rate"
+ label="���������"
+ />
+ <el-table-column
+ align="center"
+ prop="deduction"
+ label="������"
+ />
+ <el-table-column
+ align="center"
+ prop="marks"
+ label="������"
+ />
+ <el-table-column
+ align="center"
+ prop="totalPoints"
+ label="���������"
+ />
+ </el-table>
+ </vueSeamless>
+ <el-table
+ v-else
+ :data="tableData"
+ class="bottomTable"
+ border
+ style="width: 100%;margin-bottom:50px"
+ >
+ <el-table-column
+ align="center"
+ type="index"
+ width="60"
+ />
+ <el-table-column
+ align="center"
+ prop="unitName"
+ label="������������"
+ />
+ <el-table-column
+ align="center"
+ prop="total"
+ label="���������"
+ />
+ <el-table-column
+ align="center"
+ prop="number"
+ label="���������"
+ />
+ <el-table-column
+ align="center"
+ prop="unNumber"
+ label="���������"
+ />
+ <el-table-column
+ align="center"
+ prop="rate"
+ label="���������"
+ />
+ <el-table-column
+ align="center"
+ prop="deduction"
+ label="������"
+ />
+ <el-table-column
+ align="center"
+ prop="marks"
+ label="������"
+ />
+ <el-table-column
+ align="center"
+ prop="totalPoints"
+ label="���������"
+ />
+ </el-table>
+ </div>
</div>
</div>
</el-tab-pane>
- <el-tab-pane label="������" name="second">
+ <el-tab-pane
+ label="������"
+ name="second"
+ >
<div>
<div>
- <p style="text-align: center;">
+ <!-- <p style="text-align: center;">
���������������
- <el-select v-model="unitId" size="small" placeholder="���������" @change="changeUnitId">
- <el-option v-for="item in unitList" :key="item.unitId" :label="item.unitName" :value="item.unitId" />
+ <el-select
+ v-model="unitId"
+ size="small"
+ placeholder="���������"
+ @change="changeUnitId"
+ >
+ <el-option
+ v-for="item in unitList"
+ :key="item.unitId"
+ :label="item.unitName"
+ :value="item.unitId"
+ />
</el-select>
- </p>
+ </p> -->
</div>
<div class="chartsTitle">
<p>������������</p>
@@ -72,10 +305,18 @@
</div>
<div class="caets">
<div>
- <pollutionClassificationEcharts v-if="activeName === 'second'" ref="leftEcharts" :chart-data="chartData" />
+ <pollutionClassificationEcharts
+ v-if="activeName === 'second'"
+ ref="leftEcharts"
+ :chart-data="chartData"
+ />
</div>
<div>
- <reportTypeEcharts v-if="activeName === 'second'" ref="rightEcharts" :cylindricality-data="cylindricalityData" />
+ <reportTypeEcharts
+ v-if="activeName === 'second'"
+ ref="rightEcharts"
+ :cylindricality-data="cylindricalityData"
+ />
</div>
</div>
</div>
@@ -86,14 +327,16 @@
</template>
<script>
+import vueSeamless from 'vue-seamless-scroll'
import pollutionClassificationEcharts from '@/views/toCarryOutLegislativeReforms/summaryPage/components/pollutionClassificationEcharts'
import reportTypeEcharts from '@/views/toCarryOutLegislativeReforms/summaryPage/components/reportTypeEcharts'
export default {
components: {
+ vueSeamless,
pollutionClassificationEcharts,
reportTypeEcharts
},
- data() {
+ data () {
return {
mount: '',
timeInterval: [],
@@ -115,16 +358,115 @@
overdue: ''
},
chartData: [],
- cylindricalityData: []
+ cylindricalityData: [],
+ tableDataTotal: 0,
+ unitIdlist: []
}
},
- created() {
+ computed: {
+ classOption () {
+ let data = this.loadMore()
+ console.log('return ', data)
+ return data
+ }
+ },
+ created () {
this.getUnitList()
this.getContaminateList()
this.handleSearch()
},
methods: {
- ecxport() {
+ toOtherPage (val) {
+ console.log('val', val)
+ let startTime = ''
+ let endTime = ''
+
+ if (this.searchForm.number) {
+ startTime = this.getPeriods(Number(this.searchForm.number))[0]
+ endTime = this.getPeriods(Number(this.searchForm.number))[1]
+ } else {
+ startTime = this.timeInterval[0]
+ endTime = this.timeInterval[1]
+ }
+ this.$router.push({ path: '/toCarryOutLegislativeReforms/toCarryOutLegislativeReforms/reform',
+ query: {
+ type: val,
+ startTime: startTime,
+ endTime: endTime
+ }
+ })
+ },
+ getPeriods (month) {
+ const today = new Date()
+ const end = new Date(new Date())
+ // ������������������������������
+ const oneMonthAgo = new Date(today)
+ oneMonthAgo.setMonth(oneMonthAgo.getMonth() - month)
+ const startTime = oneMonthAgo.toISOString().substring(0, 10)
+ const endTime = end.toISOString().substring(0, 10)
+ console.log('startTime', startTime, 'endTime', endTime)
+ return [startTime, endTime]
+ },
+ changeUid (val) {
+ this.unitIdlist = this.uniqueArrayReduce(val)
+ this.handleSearch()
+ },
+ uniqueArrayReduce (arrays) {
+ return arrays.reduce((acc, curr) => {
+ return acc.concat(curr.filter(item => !acc.includes(item)))
+ }, [])
+ },
+ removeEmptyArrays (obj) {
+ if (Array.isArray(obj)) {
+ return obj
+ .map(item => this.removeEmptyArrays(item)) // ������������������������
+ .filter(item => !Array.isArray(item) || item.length > 0) // ���������������
+ } else if (typeof obj === 'object' && obj !== null) {
+ Object.keys(obj).forEach(key => {
+ obj[key] = this.removeEmptyArrays(obj[key]) // ������������������������
+ if (Array.isArray(obj[key]) && obj[key].length === 0) {
+ delete obj[key] // ���������������������
+ }
+ })
+ }
+ return obj
+ },
+ // ������������������list
+ getUnitList () {
+ this.$request({
+ url: '/allocation/unitQuery',
+ method: 'get'
+ }).then(res => {
+ this.unitList = this.removeEmptyArrays(res.data)
+ })
+ },
+ loadMore () {
+ let data = {}
+ if (this.tableDataTotal > 5) {
+ data = {
+ step: 0.8, // ������������������������������
+ limitMoveNum: this.tableData.length, // ������������������������������ this.tableData
+ hoverStop: true, // ������������������������stop
+ autoPlay: true,
+ direction: 1, // 0������ 1������ 2������ 3������
+ openWatch: true, // ������������������������������dom
+ singleHeight: 30, // ���������������������������(���������0���������������������������) direction => 0/1
+ singleWidth: 0, // ���������������������������(���������0���������������������������) direction => 2/3
+ waitTime: 1000 // ���������������������������(���������1000ms)
+ }
+ } else {
+ this.$refs.scroll3 && this.$refs.scroll3._cancle()
+
+ data = {
+ step: 0, // ������������������������������
+ limitMoveNum: this.tableData.length,
+ openWatch: true
+ }
+ }
+ console.log('data', data)
+ return data
+ },
+ ecxport () {
this.$request({
url: '/allocation/unitExel',
method: 'get',
@@ -132,13 +474,14 @@
params: {
startTime: this.timeInterval[0],
endTime: this.timeInterval[1],
- number: Number(this.searchForm.number)
+ number: Number(this.searchForm.number),
+ unitId: this.unitIdlist.join(',')
}
}).then(res => {
this.getOutExcel('������������������.xlsx', res)
})
},
- getOutExcel(fileName, res) {
+ getOutExcel (fileName, res) {
const blob = new Blob([res], { type: 'application/x-xls' })
if (window.navigator.msSaveOrOpenBlob) {
// ������ IE & EDGE
@@ -157,19 +500,24 @@
url.revokeObjectURL(link.href)
}
},
- unitIdFormatter(val) {
+ unitIdFormatter (val) {
const data = this.unitList.find(
item => item && item.unitId === val.unitId
)
return data ? data.unitName : ''
},
- changeNumber(val) {
+ changeNumber (val) {
+ if (val === 'timeValue') {
+ this.searchForm.number = null
+ } else {
+ this.timeInterval = []
+ }
this.handleSearch()
},
- handleClick(tab, event) {
+ handleClick (tab, event) {
console.log(tab)
},
- changeUnitId() {
+ changeUnitId () {
this.$request({
url: '/allocation/selectUnitView',
method: 'get',
@@ -190,19 +538,21 @@
}
})
},
- handleSearch() {
+ handleSearch () {
this.$request({
url: '/allocation/selectUnitView',
method: 'get',
params: {
startTime: this.timeInterval[0],
endTime: this.timeInterval[1],
+ unitId: this.unitIdlist.join(','),
number: Number(this.searchForm.number)
}
}).then(res => {
if (res.code === 0) {
this.responeForm = res.data
- this.tableData = res.data.unitView
+ this.tableData = res.data.unitView || []
+ this.tableDataTotal = this.tableData.length
this.chartData = res.data.polluteType
this.cylindricalityData = res.data.escalationType
} else {
@@ -211,16 +561,16 @@
})
},
// ������������������list
- getUnitList() {
- this.$request({
- url: '/allocation/unit',
- method: 'get'
- }).then(res => {
- this.unitList = res.data
- console.log(' JSON.stringify(this.unitList)', this.unitList)
- })
- },
- getContaminateList() {
+ // getUnitList () {
+ // this.$request({
+ // url: '/allocation/unit',
+ // method: 'get'
+ // }).then(res => {
+ // this.unitList = res.data
+ // console.log(' JSON.stringify(this.unitList)', this.unitList)
+ // })
+ // },
+ getContaminateList () {
this.$request({
url: '/allocation/contaminate',
method: 'get'
@@ -289,6 +639,7 @@
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
+ cursor: pointer;
}
}
@@ -336,5 +687,20 @@
}
}
}
+ .seamless-warp {
+ height: 380px;
+ overflow: hidden;
+ }
+ .min {
+ display: flex;
+ width: 100%;
+ }
+ .topTable /deep/.el-table__body-wrapper {
+ display: none;
+ }
+ .bottomTable /deep/.el-table__header-wrapper {
+ display: none;
+ width: 100%;
+ }
}
</style>
--
Gitblit v1.8.0