sisweb/src/assets/js/lossBenchmarking/fiveLossRates.js

import FiveLossRatesPieChart from '@views/lossBenchmarking/fiveLossRatesPieChart';
import FiveLossRatesHistogramChart from '@views/lossBenchmarking/fiveLossRatesHistogramChart.vue';
export default {
    data() {
        return {
            formInline: {
                windfarm: "",
                project: "",
                line: "",
            },
            timedate: [
                // {beginDate:'2021-01-01'},
                // {endDate:'2021-01-04'}
            ],
            isAsc: 'asc',
            beginDate: '',
            endDate: '',
            gridData: [],
            multipleSelection: [],
            sortInOrder: [],
            sortInOrderTop: [],
            sortInOrde2: [],
            getTableData: [],
            sortInOrderTop2: [],
            fdcName1: '',
            fdcName2: '',
            currentPage2: 1,
            pagesize: 10,
            fdcLineData: '',
            classification: [{
                id: 'qf',
                label: '弃风率'
            }, {
                id: 'gz',
                label: '故障损失率'
            },
            {
                id: 'jx',
                label: '检修损失率'
            },
            {
                id: 'xn',
                label: '性能损失率'
            },
            {
                id: 'sl',
                label: '受累损失率'
            }],
            options: [{
                value: 'MHS_FDC',
                label: '麻黄山风电场'
            }, {
                value: 'NSS_FDC',
                label: '牛首山风电场'
            },
            {
                value: 'SBQ_FDC',
                label: '石板泉风电场'
            },
            {
                value: 'QS_FDC',
                label: '青山风电场'
            },
            {
                value: 'XS_FDC',
                label: '香山风电场'
            }],
            value: '',
            value2: 'gz',
            wpId: [],
            wpName: [],
            updateTime1: '',
            updateTime: '',
            orderByColumn: '',
            dialogTableVisible: false,
            lineDataOption: [],
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            },
            {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            },
            {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]

        }
    },
    components: {
        FiveLossRatesPieChart: FiveLossRatesPieChart,
        FiveLossRatesHistogramChart: FiveLossRatesHistogramChart
    },
    created() {
        this.API.get('/powercompare/windfarmAjax').then((res) => {
            this.options = res.data;
        })
        this.FiveLossInformation();
    },
    methods: {
        headStyle() {
            return "text-align:center"
        },
        onSubmit() {
            console.log("submit!");
        },
        handleClick() { },
        deleteRow(index, rows) {
            rows.splice(index, 1);
        },
        queryApData() {
            this.FiveLossInformation();
        },
        handleEdit(a, b) {
            this.wpId = [];
            this.lineDataOption = [];
            if (this.multipleSelection.length == 2) {
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    this.wpId.push(this.multipleSelection[i].wpId)
                    this.wpName.push(this.multipleSelection[i].wpName)
                    this.lineDataOption.push({ id: this.multipleSelection[i].wpId, name: this.multipleSelection[i].wpName })
                }
                console.log(this.lineDataOption)
                this.$router.push({
                    path: '/fiveLossLineTable',
                    query: {
                        wpId: this.wpId,
                        beginDate: this.beginDate,
                        endDate: this.endDate,
                        wpName: this.wpName,
                        select: this.lineDataOption
                    }
                })
            } else {
                console.log(b)
                this.lineDataOption.push({ id: b.wpId, name: b.wpName })
                console.log(this.lineDataOption)
                this.$router.push({
                    path: '/fiveLossLineTable',
                    query: {
                        wpId: b.wpId,
                        beginDate: this.beginDate,
                        endDate: this.endDate,
                        wpName: b.wpName,
                        select: this.lineDataOption
                    }
                })
            }
        },
        checkwindfarm() {
            if (this.formInline.windfarm == "") {
                this.$message.error("请选择风场！");
                return;
            }
        },
        checkproject() {
            if (this.formInline.project == "") {
                this.$message.error("请选择项目！");
                return;
            }
            if (new Date(this.timedate) == null) {
                this.$message.error("请选择时间");
                return;
            }
        },
        queryApDataMx() {
            this.dialogTableVisible = true;
            this.$nextTick(function () {
                this.drawPie('leiDaTu')
            })
            this.$nextTick(function () {
                this.drawPie2('leiDaTu2')
            })
        },
        handleSelectionChange(val) {
            this.sortInOrder = [];
            this.sortInOrderTop = [];
            this.getTableData = [];
            this.sortInOrde2 = [];
            this.multipleSelection = val;
            if (this.multipleSelection.length == 2) {
                this.fdcName1 = this.multipleSelection[0].wpName;
                this.fdcName2 = this.multipleSelection[1].wpName;
                this.sortInOrder.push(this.multipleSelection[0].fnlyl, this.multipleSelection[0].xqjsl,
                    this.multipleSelection[0].ztzhjsl, this.multipleSelection[0].fwjsl, this.multipleSelection[0].slssl,
                    this.multipleSelection[0].xnssl, this.multipleSelection[0].qfl, this.multipleSelection[0].jxssl,
                    this.multipleSelection[0].gzssl);
                this.sortInOrderTop.push(this.multipleSelection[1].fnlyl, this.multipleSelection[1].xqjsl,
                    this.multipleSelection[1].ztzhjsl, this.multipleSelection[1].fwjsl, this.multipleSelection[1].slssl,
                    this.multipleSelection[1].xnssl, this.multipleSelection[1].qfl, this.multipleSelection[1].jxssl,
                    this.multipleSelection[1].gzssl);
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    this.sortInOrde2.push({
                        product: this.multipleSelection[i].wpName, '限电损失电量单位:万KWh': this.multipleSelection[i].xdss,
                        '故障损失电量单位:万KWh': this.multipleSelection[i].gzss, '检修损失电量单位:万KWh': this.multipleSelection[i].jxssl,
                        '性能损失电量单位:万KWh': this.multipleSelection[i].xnssl, '受累损失电量单位:万KWh': this.multipleSelection[i].slss
                    });
                }
                this.getTableData.push({ index: '发电量', data1: this.multipleSelection[0].fdl, data2: this.multipleSelection[1].fdl });
                this.getTableData.push({ index: '故障损失电量', data1: this.multipleSelection[0].gzss, data2: this.multipleSelection[1].gzss });
                this.getTableData.push({ index: '检修损失电量', data1: this.multipleSelection[0].jxssl, data2: this.multipleSelection[1].jxssl });
                this.getTableData.push({ index: '性能未达标损失电量', data1: this.multipleSelection[0].xnsslfraction, data2: this.multipleSelection[1].xnsslfraction });
                this.getTableData.push({ index: '受累损失电量', data1: this.multipleSelection[0].slss, data2: this.multipleSelection[1].slss });
                this.getTableData.push({ index: '风能利用率', data1: this.multipleSelection[0].fnlyl, data2: this.multipleSelection[1].fnlyl });
                this.getTableData.push({ index: '故障损失率', data1: this.multipleSelection[0].gzssl, data2: this.multipleSelection[1].gzssl });
                this.getTableData.push({ index: '检修损失率', data1: this.multipleSelection[0].jxssl, data2: this.multipleSelection[1].jxssl });
                this.getTableData.push({ index: '弃风率', data1: this.multipleSelection[0].qfl, data2: this.multipleSelection[1].qfl });
                this.getTableData.push({ index: '性能损失率', data1: this.multipleSelection[0].xnssl, data2: this.multipleSelection[1].xnssl });
                this.getTableData.push({ index: '受累损失率', data1: this.multipleSelection[0].slssl, data2: this.multipleSelection[1].slssl });
                this.getTableData.push({ index: '复位及时率', data1: this.multipleSelection[0].fwjsl, data2: this.multipleSelection[1].fwjsl });
                this.getTableData.push({ index: '消缺及时率', data1: this.multipleSelection[0].xqjsl, data2: this.multipleSelection[1].xqjsl });
                this.getTableData.push({ index: '状态转换率', data1: this.multipleSelection[0].ztzhjsl, data2: this.multipleSelection[1].ztzhjsl });
            }
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pagesize = val;
        },
        changeTableSort(column) {
            this.orderByColumn = column.prop;
            if (column.order == "descending") {
                this.isAsc = 'desc';
            } else if (column.order == "ascending") {
                this.isAsc = "asc";
            }
            this.FiveLossInformation();
        },
        FiveLossInformation() {
            let that = this;
            const nowDate = new Date();
            const date = {
                year: nowDate.getFullYear(),
                month: nowDate.getMonth() + 1,
                date: nowDate.getDate(),
            }
            const newmonth = date.month > 10 ? date.month : '0' + date.month
            const day = date.date > 10 ? date.date : '0' + date.date
            const day1 = date.date > 10 ? date.date - 1 : '0' + date.date
            this.updateTime = date.year + '-' + newmonth + '-' + day
            this.updateTime1 = date.year + '-' + newmonth + '-' + day1
            if (this.timedate == '') {
                this.timedate[0] = this.updateTime1;
                this.timedate[1] = this.updateTime;
                this.beginDate = this.timedate[0];
                this.endDate = this.timedate[1];
            } else {
                this.beginDate = this.timedate[0];
                this.endDate = this.timedate[1];
            }
            var fiveLossData = new URLSearchParams();
            fiveLossData.append('pageNum', this.currentPage2);
            fiveLossData.append('pageSize', this.pagesize);
            fiveLossData.append('orderByColumn', this.orderByColumn);
            fiveLossData.append('isAsc', this.isAsc);
            fiveLossData.append('wpId', this.value);
            fiveLossData.append('beginDate', this.beginDate);
            fiveLossData.append('endDate', this.endDate);
            this.API.post('/contrast/benchmarkLossList', fiveLossData).then((res) => {
                that.gridData = res.data;
                that.$refs.FiveLossRatesPieChart.getPackageData(that.gridData,that.value2);
                that.$refs.FiveLossRatesHistogramChart.getPackageData2(that.gridData);
            })
        },
        drawPie() {
            var charts;
            if (charts != null && charts != "" && charts != undefined) {
                charts.dispose();
            }
            charts = this.$echarts.init(document.getElementById('leiDaTu'));
            let option = {
                title: {
                    // text: '对标排名分析',
                    left: 'center'
                },
                tooltip: {},
                // legend: {
                //     data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
                //     left: 'right'
                // },
                radar: {
                    // shape: 'circle',
                    name: {
                        textStyle: {
                            color: '#fff',
                            backgroundColor: '#999',
                            borderRadius: 3,
                            padding: [3, 5]
                        }
                    },
                    indicator: [
                        { name: '风能利用率', max: 150 },
                        { name: '消缺及时率', max: 150 },
                        { name: '状态转换率', max: 150 },
                        { name: '复位及时率', max: 150 },
                        { name: '受累损失率', max: 150 },
                        { name: '性能损失率', max: 150 },
                        { name: '弃风率', max: 150 },
                        { name: '检修损失率', max: 150 },
                        { name: '故障损失率', max: 150 },
                    ]
                },
                series: [{
                    name: '预算 vs 开销（Budget vs spending）',
                    type: 'radar',
                    // areaStyle: {normal: {}},
                    data: [
                        {
                            value: this.sortInOrder,
                            name: this.fdcName1
                        },
                        {
                            value: this.sortInOrderTop,
                            name: this.fdcName2
                        }
                    ]
                }]
            }
            charts.clear();
            charts.setOption(option);

        },
        drawPie2() {
            var charts2;
            if (charts2 != null && charts2 != "" && charts2 != undefined) {
                charts2.dispose();
            }
            charts2 = this.$echarts.init(document.getElementById('leiDaTu2'));
            let option2 = {
                legend: {
                    orient: 'vertical',
                    left: 'right'
                },
                tooltip: {},
                dataset: {
                    dimensions: ['product', '限电损失电量单位:万KWh', '故障损失电量单位:万KWh', '检修损失电量单位:万KWh', '性能损失电量单位:万KWh', '受累损失电量单位:万KWh'],
                    source: this.sortInOrde2
                },
                xAxis: { type: 'category' },
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {
                        // barGap:'100%',/*多个并排柱子设置柱子之间的间距*/
                        type: 'bar',
                        barWidth: 30,
                        itemStyle: {
                            normal: {
                                color: '#D201D8'
                            }
                        }
                    },
                    {

                        type: 'bar',
                        barWidth: 30,
                        itemStyle: {
                            normal: {
                                color: '#FD0100'
                            }
                        }
                    },
                    {

                        type: 'bar',
                        barWidth: 30,
                        itemStyle: {
                            normal: {
                                color: '#FF7B16'
                            }
                        }
                    },
                    {

                        type: 'bar',
                        barWidth: 30,
                        itemStyle: {
                            normal: {
                                color: '#8085E9'
                            }
                        }
                    },
                    {
                        type: 'bar',
                        barWidth: 30,
                        itemStyle: {
                            normal: {
                                color: '#A6A6A6'
                            }
                        }
                    },
                ]
            }
            charts2.clear();
            charts2.setOption(option2);

        },
        toExcel() { }
    },
}