|
|
@@ -0,0 +1,234 @@
|
|
|
+<template>
|
|
|
+ <div class="annualLeagueTable">
|
|
|
+ <el-dialog v-model="dialogVisible" width="50vw" :close-on-click-modal="false">
|
|
|
+ <template #header>
|
|
|
+ <div class="yearHeader">
|
|
|
+ <span style="font-size:14px;color:#fff">年度排行榜</span>
|
|
|
+ <el-select v-model="optionName" placeholder="请选择板块" @change="changeOption">
|
|
|
+ <el-option
|
|
|
+ v-for="item in optionArr"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-row class="yearFrom">
|
|
|
+ <el-col :span="12" style="border-right: 1px solid #E1E3EA;">
|
|
|
+ <div class="yearFromHeader">
|
|
|
+ <div class="headerNameTit">
|
|
|
+ <div class="headerNameTit_left">
|
|
|
+ <span>排名</span>
|
|
|
+ <span style="margin-left: 20px">单位名称</span>
|
|
|
+ </div>
|
|
|
+ <div class="headerNameTit_right">
|
|
|
+ <span>级别</span>
|
|
|
+ <span style="margin-left: 20px">得分</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex" v-for="(item, index) in evaluationYearDataLeft" :key="index">
|
|
|
+ <div class="yearFromMsg">
|
|
|
+ <div class="msgProgress">
|
|
|
+ <span>{{item.rank}}</span>
|
|
|
+ <span>{{item.company}}</span>
|
|
|
+ <span>{{item.grade}}</span>
|
|
|
+ <span>{{item.score}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="yearFromHeader">
|
|
|
+ <div class="headerNameTit">
|
|
|
+ <div class="headerNameTit_left">
|
|
|
+ <span>排名</span>
|
|
|
+ <span style="margin-left: 20px">单位名称</span>
|
|
|
+ </div>
|
|
|
+ <div class="headerNameTit_right">
|
|
|
+ <span>级别</span>
|
|
|
+ <span style="margin-left: 20px">得分</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex" v-for="(item, index) in evaluationYearDataRight" :key="index">
|
|
|
+ <div class="yearFromMsg">
|
|
|
+ <div class="msgProgress">
|
|
|
+ <span>{{item.rank}}</span>
|
|
|
+ <span>{{item.company}}</span>
|
|
|
+ <span>{{item.grade}}</span>
|
|
|
+ <span>{{item.score}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {apiGetevaluationportallist} from '../../api/api'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogVisible: false,
|
|
|
+ evaluationYearDataLeft: [],
|
|
|
+ evaluationYearDataRight: [],
|
|
|
+ optionArr: [],
|
|
|
+ optionName: '',
|
|
|
+ yearData: '',
|
|
|
+ seasonData: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.optionArr = [
|
|
|
+ {
|
|
|
+ label: '火电板块',
|
|
|
+ value: 'HD'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '水电板块',
|
|
|
+ value: 'SD'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '新能源',
|
|
|
+ value: 'XNYFG'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '海外业务',
|
|
|
+ value: 'GJYE'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init(name, year, season) {
|
|
|
+ this.dialogVisible = true
|
|
|
+ this.optionName = name
|
|
|
+ this.yearData = year
|
|
|
+ this.seasonData = season
|
|
|
+ this.evaluationYearDataLeft = []
|
|
|
+ this.evaluationYearDataRight = []
|
|
|
+ this.getYearData(name, year, season)
|
|
|
+ },
|
|
|
+ changeOption(val) {
|
|
|
+ this.evaluationYearDataLeft = []
|
|
|
+ this.evaluationYearDataRight = []
|
|
|
+ this.getYearData(val, this.yearData, this.seasonData)
|
|
|
+ },
|
|
|
+ getYearData(name, year, season) {
|
|
|
+ let that = this
|
|
|
+ let params = {
|
|
|
+ binSection: name,
|
|
|
+ year: year,
|
|
|
+ season: season === '第一季度' ? '1' : season === '第二季度' ? '2' : '3'
|
|
|
+ }
|
|
|
+ apiGetevaluationportallist(params).then(datas =>{
|
|
|
+ if (datas && datas.data && datas.data.year) {
|
|
|
+ if (datas.data.year[name].length>0) {
|
|
|
+ datas.data.year[name].forEach((item, index) =>{
|
|
|
+ item.rank = index+1
|
|
|
+ })
|
|
|
+ if (datas.data.year[name].length>10) {
|
|
|
+ that.evaluationYearDataLeft = datas.data.year[name].splice(0, 10)
|
|
|
+ that.evaluationYearDataRight = datas.data.year[name]
|
|
|
+
|
|
|
+ } else {
|
|
|
+ that.evaluationYearDataLeft = datas.data.year[name]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.annualLeagueTable{
|
|
|
+ .el-overlay{
|
|
|
+ .el-dialog{
|
|
|
+ margin-top: 5vh !important;
|
|
|
+ .el-dialog__header{
|
|
|
+ .yearHeader{
|
|
|
+ width: 97%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .el-select{
|
|
|
+ width: 120px;
|
|
|
+ .el-input__inner{
|
|
|
+ height:28px;
|
|
|
+ }
|
|
|
+ .el-input__suffix{
|
|
|
+ .el-select__caret{
|
|
|
+ line-height:28px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .yearFrom{
|
|
|
+ padding: 0 20px;
|
|
|
+ .yearFromHeader{
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1px solid #E1E3EA;
|
|
|
+ .headerNameTit{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 8px 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #414141;
|
|
|
+ }
|
|
|
+ .headerTit{
|
|
|
+ position: relative;
|
|
|
+ top: 10px;
|
|
|
+ left: 150px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .yearFromMsg{
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 35px;
|
|
|
+ background: #F6F7FA;
|
|
|
+ margin: 5px 8px;
|
|
|
+ padding: 2px 10px 0;
|
|
|
+ border-radius: 5px;
|
|
|
+ .msgProgress{
|
|
|
+ margin-top: 5px;
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ span{
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ }
|
|
|
+ span:nth-child(1){
|
|
|
+ display: inline-block;
|
|
|
+ width: 10%;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #666;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ span:nth-child(2){
|
|
|
+ display: inline-block;
|
|
|
+ width: 68%;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ span:nth-child(3){
|
|
|
+ font-weight: 600;
|
|
|
+ margin-right: 30px;
|
|
|
+ color: #F65177;
|
|
|
+ }
|
|
|
+ span:nth-child(4){
|
|
|
+ font-weight: 600;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
