From ebf10826d6bba0d3b542dce64531aa71bc2fd77e Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 23 Nov 2023 11:00:29 +0800
Subject: [PATCH] fix:导出修改
---
src/views/toCarryOutLegislativeReforms/summaryPage/index.vue | 307 ++++++++++++++++++++++++++------------------------
1 files changed, 161 insertions(+), 146 deletions(-)
diff --git a/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue b/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue
index 7b84de2..31f4d67 100644
--- a/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue
+++ b/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue
@@ -1,139 +1,105 @@
<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')" />
</div>
<div class="agentSummary">
<div class="circle">
- <span>������������</span>
- <span>{{ responeForm.total }}</span>
+ <div>������������</div>
+ <div>{{ responeForm.total }}</div>
</div>
<div class="circle">
- <span>���������</span>
- <span>{{ responeForm.total }}</span>
+ <div>���������</div>
+ <div>{{ responeForm.unComplete }}</div>
</div>
<div class="circle">
- <span>���������</span>
- <span>{{ responeForm.complete }}</span>
+ <div>���������</div>
+ <div>{{ responeForm.complete }}</div>
</div>
<div class="circle">
- <span>������</span>
- <span>{{ responeForm.overdue }}</span>
+ <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;">
���������������
<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-option v-for="item in unitList" :key="item.unitId" :label="item.unitName" :value="item.unitId" />
</el-select>
</p>
</div>
@@ -143,18 +109,10 @@
</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>
@@ -165,10 +123,12 @@
</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
},
@@ -194,7 +154,15 @@
overdue: ''
},
chartData: [],
- cylindricalityData: []
+ cylindricalityData: [],
+ tableDataTotal: 0
+ }
+ },
+ computed: {
+ classOption() {
+ let data = this.loadMore()
+ console.log('return ', data)
+ return data
}
},
created() {
@@ -203,6 +171,32 @@
this.handleSearch()
},
methods: {
+ 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',
@@ -213,7 +207,7 @@
endTime: this.timeInterval[1],
number: Number(this.searchForm.number)
}
- }).then((res) => {
+ }).then(res => {
this.getOutExcel('������������������.xlsx', res)
})
},
@@ -237,10 +231,17 @@
}
},
unitIdFormatter(val) {
- const data = this.unitList.find(item => item && item.unitId === val.unitId)
+ const data = this.unitList.find(
+ item => item && item.unitId === val.unitId
+ )
return data ? data.unitName : ''
},
changeNumber(val) {
+ if (val === 'timeValue') {
+ this.searchForm.number = null
+ } else {
+ this.timeInterval = []
+ }
this.handleSearch()
},
handleClick(tab, event) {
@@ -256,7 +257,7 @@
number: Number(this.searchForm.number),
unitId: this.unitId
}
- }).then((res) => {
+ }).then(res => {
if (res.code === 0) {
this.chartData = []
this.chartData = this.cylindricalityData
@@ -276,10 +277,11 @@
endTime: this.timeInterval[1],
number: Number(this.searchForm.number)
}
- }).then((res) => {
+ }).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 {
@@ -292,7 +294,7 @@
this.$request({
url: '/allocation/unit',
method: 'get'
- }).then((res) => {
+ }).then(res => {
this.unitList = res.data
console.log(' JSON.stringify(this.unitList)', this.unitList)
})
@@ -301,7 +303,7 @@
this.$request({
url: '/allocation/contaminate',
method: 'get'
- }).then((res) => {
+ }).then(res => {
this.polluteList = res.data
})
}
@@ -310,16 +312,16 @@
</script>
<style scoped lang="scss">
-$red: url('~@/assets/images/1.jpg') ;
-$orange:url('~@/assets/images/2.png');
-$yellow:url('~@/assets/images/3.jpg');
-$green:url('~@/assets/images/4.png');
+$red: url('~@/assets/images/1.jpg');
+$orange: url('~@/assets/images/2.png');
+$yellow: url('~@/assets/images/3.jpg');
+$green: url('~@/assets/images/4.png');
$bgcolorlist: $red $orange $yellow $green;
.main {
- /deep/ .el-table__row{
- font-size: 18px;
-}
+ /deep/ .el-table__row {
+ font-size: 18px;
+ }
background: #bbbbbb;
min-height: 800px;
padding: 15px 10px;
@@ -343,7 +345,7 @@
margin-top: 20px;
@for $i from 1 to length($bgcolorlist) + 1 {
- div:nth-child(#{$i}) {
+ .circle:nth-child(#{$i}) {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
@@ -359,15 +361,13 @@
width: 200px;
height: 90px;
align-items: center;
- padding-top: 20px;
-
- span {
- margin: 10px 20px;
- display: block;
- color: rgba(255, 255, 255, 1);
- font-size: 20px;
- font-weight: 700;
- }
+ color: rgba(255, 255, 255, 1);
+ font-size: 20px;
+ font-weight: 700;
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ flex-direction: column;
}
}
@@ -415,5 +415,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