<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>
|
<el-date-picker
|
v-model="timeInterval"
|
el-time-picker
|
type="daterange"
|
value-format="yyyy-MM-dd"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
@change="changeNumber"
|
/>
|
</div>
|
<div class="agentSummary">
|
<div class="circle">
|
<div>总交办单</div>
|
<div>{{ responeForm.total }}</div>
|
</div>
|
<div class="circle">
|
<div>进行中</div>
|
<div>{{ responeForm.unComplete }}</div>
|
</div>
|
<div class="circle">
|
<div>已完成</div>
|
<div>{{ responeForm.complete }}</div>
|
</div>
|
<div class="circle">
|
<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>
|
<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>
|
</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 pollutionClassificationEcharts from '@/views/toCarryOutLegislativeReforms/summaryPage/components/pollutionClassificationEcharts'
|
import reportTypeEcharts from '@/views/toCarryOutLegislativeReforms/summaryPage/components/reportTypeEcharts'
|
export default {
|
components: {
|
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: []
|
}
|
},
|
created() {
|
this.getUnitList()
|
this.getContaminateList()
|
this.handleSearch()
|
},
|
methods: {
|
ecxport() {
|
this.$request({
|
url: '/allocation/unitExel',
|
method: 'get',
|
responseType: 'blob',
|
params: {
|
startTime: this.timeInterval[0],
|
endTime: this.timeInterval[1],
|
number: Number(this.searchForm.number)
|
}
|
}).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) {
|
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],
|
number: Number(this.searchForm.number)
|
}
|
}).then((res) => {
|
if (res.code === 0) {
|
this.responeForm = res.data
|
this.tableData = res.data.unitView
|
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;
|
}
|
}
|
|
.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;
|
}
|
}
|
}
|
}
|
</style>
|
