BusinessBenchmark/src/components/assessment/evaluationBenchmarkingIndicPage.vue

<template>
    <div class="benchmarkingIndicator">
        <div class="benchmarkingIndicatorBtn">
            <div class="collectSeach" :style="$utils.collectSeachSty()">
                <div style="display: flex;width:65%">
                    <div class="exceed">
                        <span class="exceedSpan" style="margin-left: 10px;width: 50px">阶段：</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: 50px">指标：</span>
                        <el-select v-model="indicatorIds" placeholder="请选择指标类型">
                            <el-option v-for="item in indicatorTypeData" :key="item.id" :label="item.typeName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="exceed">
                        <span class="exceedSpan" style="margin-left: 10px;width: 50px">类型：</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: 50px">时间：</span>
                        <el-date-picker v-model="timeIds" type="month" value-format="YYYY-MM" placeholder="选择时间" />
                    </div>
                </div>
                <seachs @handleSeach="getSeachData" @handleRest="resetSeach"></seachs>
                <el-button type="info" icon="Download" size="mini" @click="handleExport" style="margin-left:30px">导出
                </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%" ref="benchmark" :border="true">
                        <el-table-column type="index" label="排名" align="center"></el-table-column>
                        <el-table-column label="考评单位" prop="organization_name" width="200" sortable>
                            <template #default="scope">
                                <el-tooltip class="box-item" effect="customized" :content="scope.row.organization_name"
                                    placement="right">
                                    <span class="tooltipCC">{{scope.row.organization_name}}</span>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column label="综合得分" prop="score_total" sortable />
                        <el-table-column v-for="(it, index) in benchmarkingIndicatorHeader" :key="index"
                            :label="it.name" align="center">
                            <el-table-column sortable :sort-method="(a,b)=>sortMethods(a,b,iv.code)"
                                v-for="(iv, index) in it.children" :key="index" :label="iv.key" align="center">
                                <template #default="scope">
                                    <span style="font-weight: bold"
                                        :style="scope.row[iv.code+'_flag'] === '1'?'color:#3B7AD1': scope.row[iv.code+'_flag'] === '-1'?'color:#F65177':'color:#666666'">{{scope.row[iv.code]}}</span>
                                </template>
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                </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 seachs from '../seachGroup.vue'

    import * as XLSX from 'xlsx'
    import {
        saveAs
    } from 'file-saver'
    import * as XLSXD from 'xlsx-js-style'

    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 {
        apiGetscoreCountevaluationList,
        apiGetbinstageList,
        apiGetIndicatorTypeList
    } from '../../api/api'
    export default {
        components: {
            btns,
            seachs
        },
        data() {
            return {
                benchmarkingIndicatorData: [],
                benchmarkingIndicatorHeader: [],
                indicatorTypeData: [],
                stageData: [],
                companyDatas: [],
                periodId: '',
                stageIds: '',
                indicatorIds: '',
                timeIds: '',
                timeStr: 'JDKP',
                binSectionStr: 'HD',
                page: {
                    pagesize: 12,
                    currentPage: 1,
                    total: 0
                },
                titleMsgArr: [],
                timerData: [],
            }
        },
        created() {
            let year = new Date().getFullYear()
            let month = new Date().getMonth() + 1
            if (month < 10) {
                this.timeIds = (year + '-0' + month).toString()
            } else {
                this.timeIds = (year + '-' + month).toString()
            }
            this.timerData = [{
                    label: '年度',
                    value: 'NDKP'
                },
                {
                    label: '季度',
                    value: 'JDKP'
                },
                {
                    label: '月度',
                    value: 'YDKP'
                }
            ]
            this.titleMsgArr = [{
                    isClass: 'huoDef',
                    isClassC: 'huoCha',
                    isName: '火电',
                    isNameEn: 'HD',
                    img: huoDef,
                    clickImg: huoCha,
                    showClick: true
                },
                {
                    isClass: 'shuiDef',
                    isClassC: 'shuiCha',
                    isName: '水电',
                    isNameEn: 'SD',
                    img: shuiDef,
                    clickImg: shuiCha,
                    showClick: false
                },
                {
                    isClass: 'xinDef',
                    isClassC: 'xinCha',
                    isName: '新能源',
                    isNameEn: 'XNYFG',
                    img: xinDef,
                    clickImg: xinCha,
                    showClick: false
                },
                {
                    isClass: 'meiDef',
                    isClassC: 'meiCha',
                    isName: '煤电一体化',
                    isNameEn: 'MDYTH',
                    img: meiDef,
                    clickImg: meiCha,
                    showClick: false
                },
                {
                    isClass: 'guoDef',
                    isClassC: 'guoCha',
                    isName: '国际业务',
                    isNameEn: 'GJYW',
                    img: guoDef,
                    clickImg: guoCha,
                    showClick: false
                },
                {
                    isClass: 'zongDef',
                    isClassC: 'zongCha',
                    isName: '综合支持',
                    isNameEn: 'ZHZC',
                    img: zongDef,
                    clickImg: zongCha,
                    showClick: false
                }
            ]
            this.getBinstageAndType()
        },
        methods: {
            // 查询考评对标分析数据
            getEvalBenchmarkingIndicData() {
                let that = this
                let binSectionFin = ''
                if (that.binSectionStr === 'XNYFG') {
                    if (that.timeStr === 'YDKP' || that.timeStr === 'JDKP') {
                        binSectionFin = 'FD'
                    } else {
                        binSectionFin = 'XNYFG'
                    }
                } else {
                    binSectionFin = that.binSectionStr
                }
                let params = {
                    condition: that.timeStr,
                    date: that.timeIds,
                    type: that.indicatorIds,
                    binSection: binSectionFin,
                    binStage: that.stageIds
                }
                apiGetscoreCountevaluationList(params).then(datas => {
                    if (datas && datas.data) {
                        that.benchmarkingIndicatorData = []
                        if (datas.data.title) {
                            let header = []
                            for (let i in datas.data.title) {
                                let obj = {
                                    name: i,
                                    children: datas.data.title[i]
                                }
                                header.push(obj)
                            }
                            that.benchmarkingIndicatorHeader = header
                        }
                        if (datas.data.value.length > 0) {
                            let arr = datas.data.value
                            for (let i = 0; i < arr.length - 1; i++) {
                                for (let j = 0; j < arr.length - 1 - i; j++) {
                                    if (arr[j] > arr[j + 1]) {
                                        const temp = arr[j]
                                        arr[j] = arr[j + 1]
                                        arr[j + 1] = temp
                                    }
                                }
                            }
                            that.benchmarkingIndicatorData = arr
                            console.log('arr', arr)
                        }
                    }
                })
            },
            sortMethods(a, b, it) {
                if (a[it] < b[it]) {
                    return -1
                }
            },
            // 获取阶段数据及指标类型数据
            getBinstageAndType() {
                let that = this
                apiGetbinstageList().then(datas => {
                    if (datas && datas.data) {
                        that.stageData = datas.data
                        datas.data.forEach(it => {
                            if (it.stageName === '生产经营') {
                                that.stageIds = it.id
                            }
                        })
                    }
                })
                apiGetIndicatorTypeList({
                    type: 2
                }).then(datas => {
                    if (datas && datas.data) {
                        that.indicatorTypeData = datas.data
                    }
                })
                that.getEvalBenchmarkingIndicData()
            },
            changType(data) {
                this.titleMsgArr.forEach(it => {
                    it.showClick = false
                    if (it.isName === data.isName) {
                        it.showClick = true
                        this.binSectionStr = it.isNameEn
                    }
                })
                this.getEvalBenchmarkingIndicData()
            },
            getSeachData() {
                this.page.currentPage = 1
                this.getEvalBenchmarkingIndicData()
            },
            resetSeach() {
                this.page.currentPage = 1
                this.indicatorIds = ''
                this.stageIds = ''
                this.getEvalBenchmarkingIndicData()
            },
            handleExport() {
                let $e = this.$refs.benchmark.$el
                try {
                    let $table = $e.querySelector('.el-table__fixed')
                    if (!$table) {
                        $table = $e
                    }
                    const wb = XLSX.utils.table_to_book($table, {
                        raw: true
                    })

                    const wbout = XLSXD.write(wb, {
                        bookType: 'xlsx',
                        bookSST: true,
                        type: 'array'
                    })
                    saveAs(
                        new Blob([wbout], {
                            type: 'application/octet-stream'
                        }),
                        `考评对标分析数据导出.xlsx`,
                    )
                } catch (e) {
                    if (typeof console !== 'undefined') console.error(e)
                }
            },
        }
    }
</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-date-editor {
                        width: 68%;
                    }

                    .el-select {
                        width: 70%;
                    }

                    .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: flex-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;
            width: 100%;
            margin-top: 20px;

            .tableMain {
                width: calc(100% - 100px);

                .el-table {
                    .el-table__header-wrapper {
                        .el-table__header {
                            .el-table__cell {
                                border-bottom: none !important;
                            }

                            thead {
                                tr {
                                    th {
                                        .cell {
                                            line-height: 16px;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .el-table__body-wrapper {
                        height: 68vh !important;

                        .el-scrollbar {
                            .is-horizontal {
                                .el-scrollbar__thumb {
                                    width: 100% !important;
                                }
                            }

                            .el-table__body {
                                tr {
                                    td {
                                        padding: 0;

                                        .cell {
                                            background: #F6F7FA;
                                            line-height: 47px;
                                            height: 47px;
                                        }
                                    }

                                    td:hover {
                                        line-height: 45px;
                                        height: 45px;
                                    }
                                }
                            }
                        }
                    }

                    .el-table--border .el-table__cell {
                        border: none;
                    }

                    .el-table thead.is-group th.el-table__cell {
                        background: transparent;
                    }

                    .tooltipCC {
                        width: 180px;
                        display: inline-block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }

                .el-pagination {
                    margin-top: 20px;
                    text-align: end;
                    position: relative;
                }
            }

            .tableSeach {
                width: 81px;
                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>