From 43bd29ccb06c689327edd88cf32be659c9abc0a5 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 06 Sep 2024 11:15:25 +0800
Subject: [PATCH] fix: 责任单位修改
---
src/views/toCarryOutLegislativeReforms/summaryPage/index.vue | 492 ++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 367 insertions(+), 125 deletions(-)
diff --git a/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue b/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue
index 7b84de2..a8d8b97 100644
--- a/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue
+++ b/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue
@@ -4,13 +4,23 @@
<el-radio-group
v-model="searchForm.number"
style="margin-left:20px"
- @input="changeNumber"
+ @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-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"
@@ -20,25 +30,33 @@
range-separator="���"
start-placeholder="������������"
end-placeholder="������������"
- @change="changeNumber"
+ @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">
- <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">
@@ -50,72 +68,199 @@
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"
+ <div class="min">
+ <div
+ class="tab"
+ style="display: inline-block; width: 100%"
>
- ������
- </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>
+ <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>
@@ -125,9 +270,14 @@
>
<div>
<div>
- <p style="text-align: center;">
+ <!-- <p style="text-align: center;">
���������������
- <el-select v-model="unitId" size="small" placeholder="���������" @change="changeUnitId">
+ <el-select
+ v-model="unitId"
+ size="small"
+ placeholder="���������"
+ @change="changeUnitId"
+ >
<el-option
v-for="item in unitList"
:key="item.unitId"
@@ -135,7 +285,7 @@
:value="item.unitId"
/>
</el-select>
- </p>
+ </p> -->
</div>
<div class="chartsTitle">
<p>������������</p>
@@ -165,14 +315,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: [],
@@ -194,16 +346,84 @@
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() {
+ 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',
@@ -213,11 +433,11 @@
endTime: this.timeInterval[1],
number: Number(this.searchForm.number)
}
- }).then((res) => {
+ }).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
@@ -236,17 +456,24 @@
url.revokeObjectURL(link.href)
}
},
- unitIdFormatter(val) {
- const data = this.unitList.find(item => item && item.unitId === val.unitId)
+ 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',
@@ -256,7 +483,7 @@
number: Number(this.searchForm.number),
unitId: this.unitId
}
- }).then((res) => {
+ }).then(res => {
if (res.code === 0) {
this.chartData = []
this.chartData = this.cylindricalityData
@@ -267,19 +494,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) => {
+ }).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 {
@@ -288,20 +517,20 @@
})
},
// ������������������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'
- }).then((res) => {
+ }).then(res => {
this.polluteList = res.data
})
}
@@ -310,16 +539,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 +572,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 +588,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 +642,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