BusinessBenchmark/src/components/assessment/benchmarkingIndicBasicPage.vue

<template>
    <div class="benchmarkBasicPage">
        <div class="benchmarkBasicPageBtn">
            <div class="collectSeach" :style="$utils.collectSeachSty()">
                <div class="exceed exceedCas">
                    <span class="exceedSpan" style="width: 50px">机构：</span>
                    <el-tree-select v-model="orgVal" :data="orgSelectArr" @change="changeCas" multiple clearable
                        collapse-tags show-checkbox check-strictly check-on-click-node />
                </div>
                <div class="exceed exceedWidth">
                    <span class="exceedSpan" style="width: 50px">指标：</span>
                    <el-select v-model="itemVal" placeholder="请选择指标" @change="changeItemVal">
                        <el-option v-for="item in itemSelectArr" :key="item.irn" :label="item.itemFieldName"
                            :value="item.irn">
                        </el-option>
                    </el-select>
                </div>
                <div class="exceed">
                    <span class="exceedSpan" style="width: 70px">指标项：</span>
                    <el-select v-model="evalVal" placeholder="请选择指标项" filterable>
                        <el-option v-for="item in evalSelectArr" :key="item.itemsCode" :label="item.itemsName"
                            :value="item.itemsCode">
                        </el-option>
                    </el-select>
                </div>
                <div class="exceed exceedWidth">
                    <span class="exceedSpan" style="width: 50px">频度：</span>
                    <el-select v-model="rangeVal" placeholder="请选择频度" filterable>
                        <el-option v-for="item in rangeArr" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="exceed">
                    <span class="exceedSpan" style="width: 50px">时间：</span>
                    <el-date-picker v-model="resAnnual" value-format="YYYY-MM-DD" type="daterange"
                        placeholder="请选择时间" />
                </div>
                <!-- <seachs @handleSeach="getSeachData" :showRest="false"></seachs> -->
                <el-row :gutter="10" class="btnsA">
                    <el-col :span="1.5">
                        <el-button type="primary" size="mini" @click="getSeachData('1')">
                            <span>对标</span>
                        </el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="primary" size="mini" @click="getSeachData('2')">
                            <span>同期</span>
                        </el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="primary" size="mini" @click="getSeachData('3')">
                            <span>上期</span>
                        </el-button>
                    </el-col>
                </el-row>
            </div>
            <div class="benchmarkBasicPageTableData">
                <el-table :data="benchmarkBasicPageData" style="width: 100%" :class="unitRatingTableSty()"
                    v-if="showType === '1'">
                    <el-table-column type="index" label="序号" align="center"></el-table-column>
                    <el-table-column v-for="(it, index) in benchmarkBasicHeader" :key="index" :label="it.name"
                        align="center">
                        <template #default="scope">
                            <span>{{scope.row[it.code]}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table :data="benchmarkBasicPageData" style="width: 100%" :class="unitRatingTableSty()" v-else>
                    <el-table-column type="index" label="序号" align="center"></el-table-column>
                    <el-table-column prop="time" label="频度" align="center"></el-table-column>
                    <el-table-column v-for="(it, index) in benchmarkBasicHeader" :key="index" :label="it.name"
                        align="center">

                        <el-table-column prop="state" label="本期" align="center">
                            <template #default="scope">
                                <span>{{scope.row[it.code+'_b']}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="city" label="同期" v-if="showType === '2'" align="center">
                            <template #default="scope">
                                <span>{{scope.row[it.code+'_t']}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="city" label="上期" v-if="showType === '3'" align="center">
                            <template #default="scope">
                                <span>{{scope.row[it.code]}}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table>
                <div id="basicEcharts" style="width: 100%; height: 40vh"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import seachs from '../seachGroup.vue'
    // import baxicjson from '../basicJSON.json'
    // import baxic2json from '../basic2JSON.json'
    import {
        apiPostbenchmarkBasicList,
        apiPostbenchmarkcontemporaneousData,
        apiPostbenchmarkpreviousPeriodData,
        apiPostTreeSelectList1015,
        apiPostTreeSelectList1019,
        apiPostTreeSelectList1020
    } from '../../api/api'
    export default {
        components: {
            seachs
        },
        data() {
            return {
                statesVisible: false,
                benchmarkBasicPageData: [],
                benchmarkBasicHeader: [],
                orgVal: [],
                itemVal: '',
                evalVal: '',
                rangeVal: 'M',
                resAnnual: [],
                orgSelectArr: [],
                itemSelectArr: [],
                evalSelectArr: [],
                rangeArr: [],
                winPix: window.devicePixelRatio,
                innerWidth: window.innerWidth,
                showType: '1',
                // baxicjson: baxicjson,
                // baxic2json: baxic2json
            }
        },
        created() {
            this.rangeArr = [{
                    label: '日',
                    value: 'D'
                },
                {
                    label: '月',
                    value: 'M'
                },
                {
                    label: '年',
                    value: 'Y'
                }
            ]
        },
        mounted() {
            this.getorgSelectList()
            this.getbenchmarkBasicList('1')
            this.resAnnual = [this.getTime(new Date(new Date().getTime() - 6 * 30 * 24 * 60 * 60 * 1000)), this.getTime(
                new Date(new Date().getTime()))]
        },
        methods: {
            // 获取组织机构数据
            getorgSelectList() {
                let that = this
                let params = {
                    type: 1015,
                    map: {
                        orgLevel: "3"
                    }
                }
                apiPostTreeSelectList1015(params).then(datas => {
                    if (datas && datas.data) {
                        let arr = []
                        datas.data.forEach(it => {
                            let obj = {
                                value: it.orgCode,
                                label: it.orgName,
                                children: it.children ? that.changeSelect(it.children) : []
                            }
                            arr.push(obj)
                        })
                        that.orgSelectArr = arr
                        that.orgVal = [datas.data[0].orgCode, datas.data[1].orgCode]
                        that.getfiledDatatypeList()
                    }
                })
            },
            changeSelect(child) {
                let arr = []
                child.forEach(it => {
                    let obj = {
                        value: it.orgCode,
                        label: it.orgName,
                        children: it.children ? this.changeSelect(it.children) : []
                    }
                    arr.push(obj)
                })
                return arr
            },
            changeItemVal(val) {
                this.evalSelectArr = []
                this.getevalDatatypeList(val)
            },
            //查询主题域
            getfiledDatatypeList() {
                let that = this
                let params = {
                    type: 1019,
                    map: {
                        pId: ""
                    }
                }
                apiPostTreeSelectList1019(params).then(datas => {
                    if (datas && datas.data.data) {
                        that.itemSelectArr = datas.data.data
                        // that.itemVal = datas.data.data[0].itemFieldCode
                        that.itemVal = datas.data.data[1].irn
                        that.getevalDatatypeList(that.itemVal)
                    }
                })
            },
            //查询指标项
            getevalDatatypeList(val) {
                let that = this
                let params = {
                    type: 1020,
                    map: {
                        irn: val
                    }
                }
                apiPostTreeSelectList1020(params).then(datas => {
                    if (datas && datas.data.data) {
                        that.evalSelectArr = datas.data.data
                        that.evalVal = datas.data.data[0].itemsCode
                        that.getbenchmarkBasicList('1')
                    }
                })
            },
            //获取指标数据
            getbenchmarkBasicList(type) {
                let that = this
                let params = {
                    type: '1011',
                    map: {
                        sysCode: that.orgVal,
                        itemCode: [that.evalVal],
                        fdlx: [
                            "FDLX100",
                            "FDLX400",
                            "FDLX200"
                        ],
                        range: that.rangeVal,
                        dataType: '429668',
                        kj: 'JT',
                        startTime: that.resAnnual[0],
                        endTime: that.resAnnual[1]
                    }
                }
                if (type === '1') {
                    apiPostbenchmarkBasicList(params).then(datas => {
                        that.changeData(datas)
                    })
                } else if (type === '2') {
                    apiPostbenchmarkcontemporaneousData(params).then(datas => {
                        that.changeData(datas)
                    })
                } else if (type === '3') {
                    apiPostbenchmarkpreviousPeriodData(params).then(datas => {
                        that.changeData(datas)
                    })
                }
            },
            changeData(showData) {
                if (showData.data.title) {
                    that.benchmarkBasicHeader = showData.data.title
                }
                if (showData.data.list) {
                    that.benchmarkBasicPageData = showData.data.list
                    let xaxisArr = []
                    let seriesArr = []
                    that.benchmarkBasicPageData.forEach(it => {
                        xaxisArr.push(it.time)
                    })
                    that.benchmarkBasicHeader.forEach(iv => {
                        if (iv.code !== 'time') {
                            let seriesitemArr = []
                            that.benchmarkBasicPageData.forEach(item => {
                                seriesitemArr.push(item[iv.code])
                            })
                            let obj = {
                                name: iv.name,
                                type: type === '1' ? 'line' : 'bar',
                                data: seriesitemArr
                            }
                            if (type === '1') {
                                obj.symbol = 'none'
                            }
                            seriesArr.push(obj)
                        }
                    })
                    that.getEchartsData(xaxisArr, seriesArr)
                }
            },
            //获取echarts数据
            getEchartsData(xaxisArr, seriesArr) {
                let option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '5%',
                        right: '5%'
                    },
                    xAxis: {
                        type: 'category',
                        data: xaxisArr
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: seriesArr
                }
                let dom = document.getElementById('basicEcharts');
                dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
                let chat = this.$echarts.init(dom)
                chat.setOption(option);
                window.addEventListener("resize", function () {
                    chat.resize()
                })
            },
            getPowerBar(xAxis, series) {
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '2%',
                        right: '2%',
                        bottom: '5%',
                        height: '90px',
                        containLabel: true
                    },
                    legend: {
                        right: '20',
                        top: '20',
                        itemWidth: 5,
                        itemHeight: 5,
                        data: ['日发电量', '上网电量', '购网电量']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        data: xAxis
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: series
                };
                // 基于准备好的dom，初始化echarts实例
                let dom = document.getElementById('basicEcharts');
                dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
                let myChart = this.$echarts.init(dom);
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize()
                })
            },
            getTime(date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let timeF = y + '-' + m + '-' + d
                return timeF
            },
            getSeachData(type) {
                this.showType = type
                this.getbenchmarkBasicList(type)
            },
            unitRatingTableSty() {
                if (this.winPix === 1.25 || this.innerWidth < 1800) {
                    return 'unitRating125Table'
                } else {
                    return 'unitRating100Table'
                }
            }
        }
    }
</script>

<style lang="less">
    .benchmarkBasicPage {
        .benchmarkBasicPageBtn {
            .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;
                        height: 40px;

                        .el-input__inner {
                            height: 40px;
                        }

                        .el-input__suffix {
                            .el-select__caret {
                                line-height: 30px;
                            }
                        }
                    }

                    .el-date-editor {
                        height: 40px;
                    }
                }

                .btnsA {
                    .el-button {
                        width: 80px !important;
                    }
                }

                .exceedWidth {
                    .el-select {
                        width: 70px;
                    }
                }

                .exceedCas {
                    .el-cascader {
                        width: 230px;

                        .el-cascader__tags {
                            .el-tag {
                                .el-tag__content {
                                    width: 30px;
                                }
                            }

                            .is-closable {
                                .el-tag__content {
                                    width: 100px;
                                }
                            }
                        }
                    }
                }

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

                    .el-input__inner {
                        height: 30px;
                    }

                    .el-input__suffix {
                        .el-select__caret {
                            line-height: 30px;
                        }
                    }
                }
            }

            span {
                font-size: 14px;
            }

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

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

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

            .benchmarkBasicPageTableData {
                .unitRating125Table {
                    .el-table__body-wrapper {
                        height: 30vh !important;
                    }
                }

                .unitRating100Table {
                    .el-table__body-wrapper {
                        height: 35vh !important;
                    }
                }

                .el-table {
                    .el-input__inner {
                        height: 30px !important;
                    }

                    .el-radio__label {
                        display: none;
                    }

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

                    .tooltipCCDes {
                        width: 50px;
                        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;
                }
            }

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

                        .periodFrom {

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

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

                        .flowSty {
                            width: 100%;
                            height: 70vh;
                        }
                    }
                }
            }
        }

    }
</style>