|  |  |  | 
|---|
|  |  |  | <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"> | 
|---|
|  |  |  | 
|---|
|  |  |  | 导出 | 
|---|
|  |  |  | </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" 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="totalPoints" label="总得分" /> | 
|---|
|  |  |  | </el-table> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </el-tab-pane> | 
|---|
|  |  |  | <el-tab-pane label="明细" name="second"> | 
|---|
|  |  |  | 
|---|
|  |  |  | </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 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 
|---|
|  |  |  | overdue: '' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | chartData: [], | 
|---|
|  |  |  | cylindricalityData: [] | 
|---|
|  |  |  | cylindricalityData: [], | 
|---|
|  |  |  | tableDataTotal: 0 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | computed: { | 
|---|
|  |  |  | classOption() { | 
|---|
|  |  |  | let data = this.loadMore() | 
|---|
|  |  |  | console.log('return ', data) | 
|---|
|  |  |  | return data | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | created() { | 
|---|
|  |  |  | 
|---|
|  |  |  | 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', | 
|---|
|  |  |  | 
|---|
|  |  |  | return data ? data.unitName : '' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | changeNumber(val) { | 
|---|
|  |  |  | if (val === 'timeValue') { | 
|---|
|  |  |  | this.searchForm.number = null | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | this.timeInterval = [] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | this.handleSearch() | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | handleClick(tab, event) { | 
|---|
|  |  |  | 
|---|
|  |  |  | }).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 { | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .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> | 
|---|