BusinessBenchmark/src/components/assessment/evaluationBenchmarkingIndicPage.vue

<template>
    <div class="benchmarkingIndicator">
        <div class="benchmarkingIndicatorBtn">
            <div class="collectSeach">
                <div class="exceed">
                    <span class="exceedSpan" style="margin-left: 10px;width: 80px">业务阶段：</span>
                    <el-select v-model="stageIds" placeholder="请选择业务阶段">
                        <el-option
                        v-for="item in stageData"
                        :key="item.id"
                        :label="item.stageName"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="exceed">
                    <span class="exceedSpan" style="margin-left: 10px;width: 80px">指标类型：</span>
                    <el-select v-model="indicatorIds" placeholder="请选择指标类型">
                        <el-option
                        v-for="item in indicatorData"
                        :key="item.id"
                        :label="item.sectionName"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="exceed">
                    <span class="exceedSpan" style="margin-left: 10px;width: 80px">时间类型：</span>
                    <el-select v-model="timeStr" placeholder="请选择时间类型">
                        <el-option
                        v-for="item in timerData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="exceed">
                    <span class="exceedSpan" style="margin-left: 10px;width: 80px">选择时间：</span>
                    <el-date-picker
                        v-model="timeIds"
                        type="month"
                        value-format="YYYY-MM"
                        placeholder="选择时间"
                    />
                </div>
                <el-button type="primary" style="margin-left: 10px;" @click="getSeachData">搜索</el-button>
                <el-button style="margin-left: 10px;" @click="resetSeach">重置</el-button>
            </div>
            <div class="PeriodBtn">
                <btns 
                    :showImport="false" :showExport="true" 
                    :showAdd="false"
                    :showSave="false"
                    :showDelete="false"
                    :disSave="true"
                    :disDelete="true" :disImport="true" :disExport="true"
                    @handleAdd="handleAdd" @handleEdit="handleEdit" @handleDelete="handleDelete"
                    @handleImport="handleImport" @handleExport="handleExport"></btns>
            </div>
            <div class="benchmarkingIndicatorTableData">
                <div class="tableMain">
                    <el-table :data="benchmarkingIndicatorData" style="width: 100%">
                        <el-table-column type="index" label="序号" align="center"></el-table-column>
                        <el-table-column label="考评单位" prop="organizationShortName" width="200">
                            <template #default="scope">
                                <el-tooltip class="box-item" effect="customized" :content="scope.row.organizationShortName"
                                    placement="right">
                                    <span class="tooltipCC">{{scope.row.organizationShortName}}</span>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column label="排名" prop="organizationType" />
                        <el-table-column label="综合得分" prop="evaluationCycle" />
                        <el-table-column label="经营回报" align="center">
                            <el-table-column label="净利润" prop="zzc" />
                            <el-table-column label="EBITDA" prop="k1" />
                            <el-table-column label="售电成本" prop="k1" />
                        </el-table-column>
                        <el-table-column label="生产运营及协同指标" align="center">
                            <el-table-column label="财务'一集中三加强'" prop="zzc" />
                            <el-table-column label="发电量" prop="k1" />
                            <el-table-column label="市场占有率" prop="k1" />
                            <el-table-column label="电力营销" prop="k1" />
                            <el-table-column label="供电煤耗" prop="k1" />
                            <el-table-column prop="k1">
                                <template #header>
                                    <div>综合厂</div>
                                    <div>用电率</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="非计划停运和出力受阻" prop="k1" />
                            <el-table-column prop="k1">
                                <template #header>
                                    <div>内部煤炭</div>
                                    <div>接卸量</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="k1">
                                <template #header>
                                    <div>外部煤炭</div>
                                    <div>采购量</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="k1">
                                <template #header>
                                    <div>入厂入炉</div>
                                    <div>标单差</div>
                                </template>
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="page.currentPage" :page-size="page.pagesize"
                        layout="total, prev, pager, next, jumper" :total="page.total">
                    </el-pagination>
                </div>
                <div class="tableSeach">
                    <div class="seachType" v-for="item in titleMsgArr" :key="item.isName"
                     :class="item.showClick? 'seachTypeCha':''" @click="changType(item)">
                        <img :src="item.img" alt="" v-if="!item.showClick">
                        <img :src="item.clickImg" alt="" v-else>
                        <p :style="item.showClick? 'color: #3B7AD1' : ''">{{item.isName}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import btns from '../elbuttonS.vue'
import huoDef from '../../assets/benchmarkImg/huoDef.png'
import shuiDef from '../../assets/benchmarkImg/shuiDef.png'
import xinDef from '../../assets/benchmarkImg/xinDef.png'
import meiDef from '../../assets/benchmarkImg/meiDef.png'
import guoDef from '../../assets/benchmarkImg/guoDef.png'
import zongDef from '../../assets/benchmarkImg/zongDef.png'

import huoCha from '../../assets/benchmarkImg/huoCha.png'
import shuiCha from '../../assets/benchmarkImg/shuiCha.png'
import xinCha from '../../assets/benchmarkImg/xinCha.png'
import meiCha from '../../assets/benchmarkImg/meiCha.png'
import guoCha from '../../assets/benchmarkImg/guoCha.png'
import zongCha from '../../assets/benchmarkImg/zongCha.png'
import {apiGetOrganizationList} from '../../api/api'
export default {
    components: {btns},
    data() {
        return {
            benchmarkingIndicatorData: [],
            indicatorData: [],
            stageData: [],
            companyDatas: [],
            periodId: '',
            stageIds: '',
            indicatorIds: '',
            timeIds: '',
            page: {
                pagesize: 12,
                currentPage: 1,
                total: 0
            },
            titleMsgArr: [],
            timerData: []
        }
    },
    created() {
        this.timerData = [
            {
                label: '年度',
                value: '1'
            },
            {
                label: '季度',
                value: '2'
            },
            {
                label: '月度',
                value: '3'
            }
        ]
        this.titleMsgArr = [
            {
                isClass: 'huoDef',
                isClassC: 'huoCha',
                isName: '火电',
                img: huoDef,
                clickImg: huoCha,
                showClick: true
            },
            {
                isClass: 'shuiDef',
                isClassC: 'shuiCha',
                isName: '水电',
                img: shuiDef,
                clickImg: shuiCha,
                showClick: false
            },
            {
                isClass: 'xinDef',
                isClassC: 'xinCha',
                isName: '新能源',
                img: xinDef,
                clickImg: xinCha,
                showClick: false
            },
            {
                isClass: 'meiDef',
                isClassC: 'meiCha',
                isName: '煤电一体化',
                img: meiDef,
                clickImg: meiCha,
                showClick: false
            },
            {
                isClass: 'guoDef',
                isClassC: 'guoCha',
                isName: '国际业务',
                img: guoDef,
                clickImg: guoCha,
                showClick: false
            },
            {
                isClass: 'zongDef',
                isClassC: 'zongCha',
                isName: '综合支持',
                img: zongDef,
                clickImg: zongCha,
                showClick: false
            }
        ]
        this.getEvalCompanyData()
    },
    methods: {
        // 查询单位数据
        getEvalCompanyData() {
            let that = this
            debugger
            let params = {
                pageNum: that.page.currentPage,
                pageSize: that.page.pagesize,
                organizationType: 'DWKP',
                organizationName: that.companyS,
                binSection: that.binSectionIds,
                binStage: that.stageIds,
                evaluationCycle: that.periodId
            }
            apiGetOrganizationList(params).then(datas => {
                if (datas && datas.data) {
                    that.benchmarkingIndicatorData = datas.data.records
                    that.page.total = datas.data.total
                }
            })
        },
        changType(data) {
            this.titleMsgArr.forEach(it =>{
                it.showClick = false
                if (it.isName === data.isName) {
                    it.showClick = true
                }
            })
        },
        getSeachData() {
            this.page.currentPage = 1
            this.getEvalCompanyData()
        },
        resetSeach() {
            this.page.currentPage = 1
            this.companyS = ''
            this.periodId = ''
            this.stageIds = ''
            this.binSectionIds = ''
            this.getEvalCompanyData()
        },
        handleSizeChange(val) {
            this.page.pagesize = val
            this.getEvalCompanyData()
        },
        handleCurrentChange(val) {
            this.page.currentPage = val
            this.getEvalCompanyData()
        }
    }
}
</script>

<style lang="less">
    .benchmarkingIndicator {
        .benchmarkingIndicatorBtn {
            .collectSeach {
                display: flex;
                padding: 24px 20px;
                border-bottom: 1px solid#D6DBEA;

                .exceed {
                    display: flex;

                    .exceedSpan {
                        width: 100px;
                        height: 12px;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #8991B0;
                        line-height: 12px;
                        margin-top: 14px;
                    }

                    .el-input {
                        margin-right: 10px;

                        .el-input__inner {
                            height: 30px;
                        }

                        .el-input__suffix {
                            .el-select__caret {
                                line-height: 30px;
                            }
                        }
                    }
                    .el-select{
                        line-height: 40px !important;
                        .el-input__inner, .is-disabled{
                            height:40px !important;
                        }
                        .el-input__suffix{
                            .el-select__caret{
                                line-height:40px;
                            }
                        }
                    }
                    .el-date-editor--month{
                        height: 40px;
                    }
                }

            }

            span {
                font-size: 14px;
            }

            .PeriodBtn {
                display: flex;
                justify-content: end;
                padding: 20px 0;
            }

            .el-button {
                height: 30px;
                // width:100px;
                padding: 0 30px;

                // padding-top: 8px;
                span {
                    margin: 0;
                }
            }

            .indexdialog {
                .el-overlay {
                    .el-dialog {
                        .el-dialog__body {
                            padding: 30px 60px 30px 20px !important;

                            .periodFrom {

                                .el-select,
                                .el-input {
                                    width: 100%;
                                }

                                .el-input {
                                    height: 30px;
                                }
                            }
                        }
                    }
                }
            }
        }

        .benchmarkingIndicatorTableData {
            display: flex;
            .tableMain{
                width: 95%;
                .el-table {
                    .el-table__body-wrapper {
                        height: 55vh !important;
                    }
    
                    .el-input__inner {
                        height: 30px !important;
                    }
    
                    .el-radio__label {
                        display: none;
                    }
    
                    .tooltipCC {
                        width: 300px;
                        display: inline-block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
    
                    .indicitem {
                        color: #409EFF;
                        font-size: 12px;
                        margin-right: 20px;
                        cursor: pointer;
    
                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }
                .el-pagination {
                    margin-top: 20px;
                    text-align: end;
                    position: relative;
                }
            }
            .tableSeach{
                height: 100%;
                margin-left: 10px;
                border: 1px solid #D6DBEA;
                padding: 5px 0;
                border-radius: 5px;
                .seachType{
                    width: 78px;
                    height: 78px;
                    cursor: pointer;
                    border-left: 3px solid transparent;
                    img{
                        margin-top: 17px;
                        margin-left: 27px;
                    }
                    p{
                        text-align: center;
                        font-size: 14px;
                    }
                }
                .seachTypeCha{
                    background: #E6EBF5;
                    cursor: pointer;
                    border-left: 3px solid #3B7AD1;
                }
            }
        }

    }
</style>