| | |
| | | <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"> |
| | | <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" /> |
| | | </div> |
| | | <div class="agentSummary"> |
| | | <div class="circle"> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="overviewAndDetails"> |
| | | <el-tabs |
| | | v-model="activeName" |
| | | @tab-click="handleClick" |
| | | > |
| | | <el-tab-pane |
| | | label="总览" |
| | | name="first" |
| | | > |
| | | <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 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="{ |
| | | <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-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" |
| | | > |
| | | <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-option v-for="item in unitList" :key="item.unitId" :label="item.unitName" :value="item.unitId" /> |
| | | </el-select> |
| | | </p> |
| | | </div> |
| | |
| | | </div> |
| | | <div class="caets"> |
| | | <div> |
| | | <pollutionClassificationEcharts |
| | | v-if="activeName === 'second'" |
| | | ref="leftEcharts" |
| | | :chart-data="chartData" |
| | | /> |
| | | <pollutionClassificationEcharts v-if="activeName === 'second'" ref="leftEcharts" :chart-data="chartData" /> |
| | | </div> |
| | | <div> |
| | | <reportTypeEcharts |
| | | v-if="activeName === 'second'" |
| | | ref="rightEcharts" |
| | | :cylindricality-data="cylindricalityData" |
| | | /> |
| | | <reportTypeEcharts v-if="activeName === 'second'" ref="rightEcharts" :cylindricality-data="cylindricalityData" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | endTime: this.timeInterval[1], |
| | | number: Number(this.searchForm.number) |
| | | } |
| | | }).then((res) => { |
| | | }).then(res => { |
| | | this.getOutExcel('列表数据导出.xlsx', res) |
| | | }) |
| | | }, |
| | |
| | | } |
| | | }, |
| | | unitIdFormatter(val) { |
| | | const data = this.unitList.find(item => item && item.unitId === val.unitId) |
| | | const data = this.unitList.find( |
| | | item => item && item.unitId === val.unitId |
| | | ) |
| | | return data ? data.unitName : '' |
| | | }, |
| | | changeNumber(val) { |
| | |
| | | number: Number(this.searchForm.number), |
| | | unitId: this.unitId |
| | | } |
| | | }).then((res) => { |
| | | }).then(res => { |
| | | if (res.code === 0) { |
| | | this.chartData = [] |
| | | this.chartData = this.cylindricalityData |
| | |
| | | endTime: this.timeInterval[1], |
| | | number: Number(this.searchForm.number) |
| | | } |
| | | }).then((res) => { |
| | | }).then(res => { |
| | | if (res.code === 0) { |
| | | this.responeForm = res.data |
| | | this.tableData = res.data.unitView |
| | |
| | | this.$request({ |
| | | url: '/allocation/unit', |
| | | method: 'get' |
| | | }).then((res) => { |
| | | }).then(res => { |
| | | this.unitList = res.data |
| | | console.log(' JSON.stringify(this.unitList)', this.unitList) |
| | | }) |
| | |
| | | this.$request({ |
| | | url: '/allocation/contaminate', |
| | | method: 'get' |
| | | }).then((res) => { |
| | | }).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'); |
| | | $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; |