<template>
|
<div class="main">
|
<div class="timeSelect">
|
<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('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"
|
@click="toOtherPage('total')"
|
>
|
<div>总交办单</div>
|
<div>{{ responeForm.total }}</div>
|
</div>
|
<div
|
class="circle"
|
@click="toOtherPage('unComplete')"
|
>
|
<div>进行中</div>
|
<div>{{ responeForm.unComplete }}</div>
|
</div>
|
<div
|
class="circle"
|
@click="toOtherPage('complete')"
|
>
|
<div>已完成</div>
|
<div>{{ responeForm.complete }}</div>
|
</div>
|
<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"
|
>
|
<div class="tit">
|
<span>
|
责任单位交办单总览
|
</span>
|
<el-button
|
type="primary"
|
plain
|
size="small"
|
style="float: right;"
|
@click="ecxport"
|
>
|
导出
|
</el-button>
|
</div>
|
<div>
|
<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"
|
>
|
<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-select>
|
</p> -->
|
</div>
|
<div class="chartsTitle">
|
<p>污染分类</p>
|
<p>上报类型</p>
|
</div>
|
<div class="caets">
|
<div>
|
<pollutionClassificationEcharts
|
v-if="activeName === 'second'"
|
ref="leftEcharts"
|
:chart-data="chartData"
|
/>
|
</div>
|
<div>
|
<reportTypeEcharts
|
v-if="activeName === 'second'"
|
ref="rightEcharts"
|
:cylindricality-data="cylindricalityData"
|
/>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</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 () {
|
return {
|
mount: '',
|
timeInterval: [],
|
polluteList: [],
|
unitList: [],
|
activeName: 'first',
|
tableData: [],
|
responsibleUnit: '',
|
searchForm: {
|
number: 1,
|
startTime: '',
|
endTime: ''
|
},
|
unitId: '',
|
responeForm: {
|
total: '',
|
complete: '',
|
unComplete: '',
|
overdue: ''
|
},
|
chartData: [],
|
cylindricalityData: [],
|
tableDataTotal: 0,
|
unitIdlist: []
|
}
|
},
|
computed: {
|
classOption () {
|
let data = this.loadMore()
|
console.log('return ', data)
|
return data
|
}
|
},
|
created () {
|
this.getUnitList()
|
this.getContaminateList()
|
this.handleSearch()
|
},
|
methods: {
|
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',
|
responseType: 'blob',
|
params: {
|
startTime: this.timeInterval[0],
|
endTime: this.timeInterval[1],
|
number: Number(this.searchForm.number),
|
unitId: this.unitIdlist.join(',')
|
}
|
}).then(res => {
|
this.getOutExcel('列表数据导出.xlsx', res)
|
})
|
},
|
getOutExcel (fileName, res) {
|
const blob = new Blob([res], { type: 'application/x-xls' })
|
if (window.navigator.msSaveOrOpenBlob) {
|
// 兼容 IE & EDGE
|
navigator.msSaveBlob(blob, fileName)
|
} else {
|
var link = document.createElement('a')
|
// 兼容不同浏览器的URL对象
|
const url = window.URL || window.webkitURL || window.moxURL
|
// 创建下载链接
|
link.href = url.createObjectURL(blob)
|
// 命名下载名称
|
link.download = fileName
|
// 点击触发下载
|
link.click()
|
// 下载完成进行释放
|
url.revokeObjectURL(link.href)
|
}
|
},
|
unitIdFormatter (val) {
|
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) {
|
console.log(tab)
|
},
|
changeUnitId () {
|
this.$request({
|
url: '/allocation/selectUnitView',
|
method: 'get',
|
params: {
|
startTime: this.timeInterval[0],
|
endTime: this.timeInterval[1],
|
number: Number(this.searchForm.number),
|
unitId: this.unitId
|
}
|
}).then(res => {
|
if (res.code === 0) {
|
this.chartData = []
|
this.chartData = this.cylindricalityData
|
this.chartData = res.data.polluteType
|
this.cylindricalityData = res.data.escalationType
|
} else {
|
this.$message.error(res.message)
|
}
|
})
|
},
|
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.tableDataTotal = this.tableData.length
|
this.chartData = res.data.polluteType
|
this.cylindricalityData = res.data.escalationType
|
} else {
|
this.$message.error(res.message)
|
}
|
})
|
},
|
// 获取责任单位list
|
// 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 => {
|
this.polluteList = res.data
|
})
|
}
|
}
|
}
|
</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');
|
$bgcolorlist: $red $orange $yellow $green;
|
|
.main {
|
/deep/ .el-table__row {
|
font-size: 18px;
|
}
|
background: #bbbbbb;
|
min-height: 800px;
|
padding: 15px 10px;
|
overflow: scroll;
|
|
.timeSelect {
|
width: 100%;
|
height: 80px;
|
line-height: 80px;
|
background-color: rgba(255, 255, 255, 1);
|
color: rgba(16, 16, 16, 1);
|
font-size: 14px;
|
}
|
|
.agentSummary {
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
height: 195px;
|
background-color: rgba(255, 255, 255, 1);
|
margin-top: 20px;
|
|
@for $i from 1 to length($bgcolorlist) + 1 {
|
.circle:nth-child(#{$i}) {
|
background-repeat: no-repeat;
|
background-size: cover;
|
background-position: center center;
|
background-image: nth($bgcolorlist, $i);
|
// background-image: radial-gradient(ellipse farthest-side at bottom right, rgba(153, 212, 255, 1), 50%, transparent 50%, transparent),
|
// radial-gradient(ellipse farthest-side at top right, rgba(153, 212, 255, 1), 30%, transparent 30%, transparent);
|
}
|
}
|
|
.circle {
|
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
|
border-radius: 5px;
|
width: 200px;
|
height: 90px;
|
align-items: center;
|
color: rgba(255, 255, 255, 1);
|
font-size: 20px;
|
font-weight: 700;
|
display: flex;
|
justify-content: center;
|
flex-wrap: wrap;
|
flex-direction: column;
|
cursor: pointer;
|
}
|
}
|
|
.overviewAndDetails {
|
height: 550px;
|
margin-top: 20px;
|
background-color: rgba(255, 255, 255, 1);
|
padding: 15px;
|
|
.tit {
|
width: 100%;
|
display: inline-block;
|
color: rgba(16, 16, 16, 1);
|
font-size: 24px;
|
text-align: center;
|
}
|
|
.tab {
|
margin-top: 10px;
|
}
|
.caets {
|
width: 100%;
|
|
div {
|
display: inline-block;
|
margin-top: 10px;
|
width: 49%;
|
height: 200px;
|
}
|
|
div:nth-child(1) {
|
border-right: 1px dashed rgba(221, 221, 221, 1);
|
}
|
}
|
|
.chartsTitle {
|
width: 100%;
|
|
p {
|
display: inline-block;
|
width: 49%;
|
text-align: center;
|
font-size: 24px;
|
font-weight: 700;
|
}
|
}
|
}
|
.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>
|
