From 6738d48087c2c89d136eaf2a494c61392e087b54 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Tue, 21 Nov 2023 14:50:02 +0800
Subject: [PATCH] fix:表格滚动修改
---
package-lock.json | 13 +++
src/views/toCarryOutLegislativeReforms/summaryPage/components/reportTypeEcharts.vue | 81 +++++++++++---------
package.json | 1
src/views/toCarryOutLegislativeReforms/reform/index.vue | 3
src/views/toCarryOutLegislativeReforms/summaryPage/index.vue | 115 +++++++++++++++++++++++++---
5 files changed, 160 insertions(+), 53 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index afc1401..95be09d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5106,6 +5106,11 @@
}
}
},
+ "comutils": {
+ "version": "1.1.19",
+ "resolved": "https://registry.npmmirror.com/comutils/-/comutils-1.1.19.tgz",
+ "integrity": "sha512-JxXB67juILiwhdLwOsYyjUqwWEhHdObI0EClOPk+JDtEuTbac59s0pxGpfCBnNNQ5JommifmcMGneW/4Cg7YWw=="
+ },
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz",
@@ -20265,6 +20270,14 @@
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.0.6.tgz?cache=0&sync_timestamp=1615477493682&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.0.6.tgz",
"integrity": "sha1-Lk8PnLsLltAgWrJpDP5YiTUTasM="
},
+ "vue-seamless-scroll": {
+ "version": "1.1.23",
+ "resolved": "https://registry.npmmirror.com/vue-seamless-scroll/-/vue-seamless-scroll-1.1.23.tgz",
+ "integrity": "sha512-HBjUub8WwsKJzbFCrwKPDrZn4e+SSbkKgwWtjKtfLwesiFGwSsVxP44/Z6d3kpXy94qIFOiflJH6l0/9pj7SGA==",
+ "requires": {
+ "comutils": "^1.1.9"
+ }
+ },
"vue-style-loader": {
"version": "4.1.3",
"resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.3.tgz",
diff --git a/package.json b/package.json
index 5628a09..13f30d4 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
"vue-json-excel": "^0.3.0",
"vue-mapvgl": "^0.0.32",
"vue-router": "3.0.6",
+ "vue-seamless-scroll": "^1.1.23",
"vuex": "3.1.0",
"xlsx": "^0.16.9",
"xlsx-style": "^0.8.13"
diff --git a/src/views/toCarryOutLegislativeReforms/reform/index.vue b/src/views/toCarryOutLegislativeReforms/reform/index.vue
index aef1464..8863d35 100644
--- a/src/views/toCarryOutLegislativeReforms/reform/index.vue
+++ b/src/views/toCarryOutLegislativeReforms/reform/index.vue
@@ -548,6 +548,7 @@
})
},
handleSearchBut(obj) {
+ let pageSize = this.pagination.pageSize
this.pagination = {
currentPage: 1,
// ������������������������������������������(���������������������������)
@@ -555,7 +556,7 @@
// ������������������������������
pageSizes: [10, 30, 60, 100],
// ������������������������������������������
- pageSize: 10
+ pageSize: pageSize
}
this.handleSearch(obj)
},
diff --git a/src/views/toCarryOutLegislativeReforms/summaryPage/components/reportTypeEcharts.vue b/src/views/toCarryOutLegislativeReforms/summaryPage/components/reportTypeEcharts.vue
index a81c9a0..3521a45 100644
--- a/src/views/toCarryOutLegislativeReforms/summaryPage/components/reportTypeEcharts.vue
+++ b/src/views/toCarryOutLegislativeReforms/summaryPage/components/reportTypeEcharts.vue
@@ -36,7 +36,7 @@
}
},
watch: {
- 'cylindricalityData': {
+ cylindricalityData: {
handler(newVal) {
console.log('newVal', newVal)
this.seriesData = []
@@ -44,15 +44,18 @@
const arr = []
newVal.forEach(item => {
- arr.push({
- name: item.name,
- type: 'bar',
- barWidth: '40%',
- data: [item.value]
- })
+ arr.push(item.value)
this.namelist.push(item.name)
})
- this.seriesData = arr
+ this.seriesData = [
+ {
+ type: 'bar',
+ barWidth: '40%',
+ data: arr
+ }
+ ]
+ console.log('this.seriesData', this.seriesData)
+ console.log('this.namelist', this.namelist)
this.$nextTick(() => {
this.initChart()
})
@@ -110,37 +113,41 @@
bottom: '3%',
containLabel: true
},
- xAxis: [{
- type: 'category',
- data: this.namelist,
- axisTick: {
- show: false,
- alignWithLabel: true
- },
- axisLine: {
- show: false
- },
- axisLabel: {
- color: '#989898'
- }
- }],
- yAxis: [{
- type: 'value',
- axisTick: {
- show: false
- },
- axisLine: {
- show: false
- },
- splitLine: {
- lineStyle: {
- color: '#ebebeb'
+ xAxis: [
+ {
+ type: 'category',
+ data: this.namelist,
+ axisTick: {
+ show: false,
+ alignWithLabel: true
+ },
+ axisLine: {
+ show: false
+ },
+ axisLabel: {
+ color: '#989898'
}
- },
- axisLabel: {
- color: '#8c8c8c'
}
- }],
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ lineStyle: {
+ color: '#ebebeb'
+ }
+ },
+ axisLabel: {
+ color: '#8c8c8c'
+ }
+ }
+ ],
series: this.seriesData
},
true
diff --git a/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue b/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue
index c1f050c..d53fbe1 100644
--- a/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue
+++ b/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue
@@ -1,14 +1,14 @@
<template>
<div class="main">
<div class="timeSelect">
- <el-radio-group v-model="searchForm.number" style="margin-left:20px" @input="changeNumber">
+ <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">
@@ -40,20 +40,48 @@
������
</el-button>
</div>
- <div class="tab">
- <el-table :data="tableData" border max-height="400" style="width: 100%" :header-cell-style="{
+ <div class="min">
+ <div class="tab" style="display: inline-block; width: 100%">
+ <el-table :data="tableData" class="top" border 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>
+ <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 :data="tableData" v-if="tableData.length>5" ref="scroll3" :pause="true" class="seamless-warp" style="width: 100%;" :class-option="classOption">
+ <el-table :data="tableData" v-if="tableData.length>0" class="bottom" 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 :data="tableData" v-else class="bottom" 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">
@@ -86,10 +114,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
},
@@ -115,7 +145,15 @@
overdue: ''
},
chartData: [],
- cylindricalityData: []
+ cylindricalityData: [],
+ tableDataTotal: 0
+ }
+ },
+ computed: {
+ classOption() {
+ let data = this.loadMore()
+ console.log('return ', data)
+ return data
}
},
created() {
@@ -124,6 +162,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',
@@ -164,6 +228,11 @@
return data ? data.unitName : ''
},
changeNumber(val) {
+ if (val === 'timeValue') {
+ this.searchForm.number = null
+ } else {
+ this.timeInterval = []
+ }
this.handleSearch()
},
handleClick(tab, event) {
@@ -202,7 +271,8 @@
}).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 {
@@ -336,5 +406,20 @@
}
}
}
+ .seamless-warp {
+ height: 380px;
+ overflow: hidden;
+ }
+ .min {
+ display: flex;
+ width: 100%;
+ }
+ .top /deep/.el-table__body-wrapper {
+ display: none;
+ }
+ .bottom /deep/.el-table__header-wrapper {
+ display: none;
+ width: 100%;
+ }
}
</style>
--
Gitblit v1.8.0