{"remainingRequest":"D:\\jenkins\\workspace\\cssc-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\cssc-fvue\\src\\views\\OperationInfo\\components\\ChartDialog.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\cssc-fvue\\src\\views\\OperationInfo\\components\\ChartDialog.vue","mtime":1667804639665},{"path":"D:\\jenkins\\workspace\\cssc-fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\cssc-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\cssc-fvue\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\nimport {Chart} from '@antv/g2'\r\nexport default {\r\n    name: 'chart-dialog',\r\n    data() {\r\n        return {\r\n            co2: 0,\r\n            cost: 0,\r\n            befortotalcost: 0, // 优化前费用\r\n            aftertotalcost: 0, // 优化后总费用\r\n            statisticsRate: {}, //环图统计列表\r\n            statisticsTotal: [], //柱状图统计列表\r\n            statisticsData: {},\r\n            beforeData: [\r\n                {item: '交通成本', count: 0, percent: 0},\r\n                {item: '人工成本', count: 0, percent: 0},\r\n                {item: '发电损失', count: 0, percent: 0},\r\n            ],\r\n            afterData: [\r\n                {item: '交通成本', count: 0, percent: 0},\r\n                {item: '人工成本', count: 0, percent: 0},\r\n                {item: '发电损失', count: 0, percent: 0},\r\n            ],\r\n            chartBefore: null,\r\n            chartAfter: null,\r\n            dataOrigin: {\r\n                aftertotalcost: 0,\r\n                afterhumancostrate: 0,\r\n                afterroutecostrate: 0,\r\n                afterwindpowerrate: 0,\r\n                befortotalcost: 0,\r\n                beforhumancostrate: 0,\r\n                beforroutecostrate: 0,\r\n                beforwindpowerrate: 0,\r\n            },\r\n            barChart: null,\r\n            barData: [{date: '', costvalue: 0}],\r\n            optimization: 0\r\n        }\r\n    },\r\n    mounted() {\r\n        this.$nextTick(() => {\r\n            this.initChart()\r\n            this.initChart1()\r\n            this.initChart2()\r\n        })\r\n    },\r\n    methods: {\r\n        changeData(data) {\r\n            this.formatStatistics(data.statisticsRate)\r\n            if (data.statisticsTotal) {\r\n                this.barData = data.statisticsTotal\r\n                this.calculateData(data.statisticsTotal)\r\n            } else {\r\n                this.barData = [{date: '', costvalue: 0}]\r\n            }\r\n            this.barChart.changeData(this.barData)\r\n        },\r\n        calculateData(data) {\r\n            this.co2 = 0\r\n            this.cost = 0\r\n            let beforewindpower = 0\r\n            let windpower = 0\r\n            let beforeroutecost = 0\r\n            let routecost = 0\r\n            data.forEach((item) => {\r\n                this.cost += item.costvalue\r\n                beforewindpower += item.beforewindpower\r\n                windpower += item.windpower\r\n                beforeroutecost += item.beforeroutecost\r\n                routecost += item.routecost\r\n            })\r\n            this.co2 = (\r\n                ((beforewindpower - windpower) / 0.85 +\r\n                    ((beforeroutecost - routecost) * 2.63) / 7) /\r\n                10000\r\n            ).toFixed(2)\r\n            this.cost = (this.cost / 10000).toFixed(2)\r\n            console.log(\r\n                this.co2,\r\n                this.cost,\r\n                beforewindpower,\r\n                windpower,\r\n                beforeroutecost,\r\n                routecost\r\n            )\r\n        },\r\n        formatStatistics(data) {\r\n            if (data && data.befortotalcost && data.aftertotalcost) {\r\n                for (let key in data) {\r\n                    data[key] = parseFloat(data[key])\r\n                }\r\n\r\n                this.befortotalcost = data.befortotalcost\r\n                this.aftertotalcost = data.aftertotalcost\r\n\r\n                this.beforeData[0].count = data.beforroutecostrate\r\n                this.beforeData[0].percent = (\r\n                    data.beforroutecostrate / data.befortotalcost\r\n                ).toFixed(4)\r\n\r\n                this.beforeData[1].count = data.beforhumancostrate\r\n                this.beforeData[1].percent = (\r\n                    data.beforhumancostrate / data.befortotalcost\r\n                ).toFixed(4)\r\n\r\n                this.beforeData[2].count = data.beforwindpowerrate\r\n                this.beforeData[2].percent = (\r\n                    data.beforwindpowerrate / data.befortotalcost\r\n                ).toFixed(4)\r\n\r\n                this.afterData[0].count = data.afterroutecostrate\r\n                this.afterData[0].percent = (\r\n                    data.afterroutecostrate / data.aftertotalcost\r\n                ).toFixed(4)\r\n\r\n                this.afterData[1].count = data.afterhumancostrate\r\n                this.afterData[1].percent = (\r\n                    data.afterhumancostrate / data.aftertotalcost\r\n                ).toFixed(4)\r\n\r\n                this.afterData[2].count = data.afterwindpowerrate\r\n                this.afterData[2].percent = (\r\n                    data.afterwindpowerrate / data.aftertotalcost\r\n                ).toFixed(4);\r\n\r\n                this.optimization = ((1 - this.aftertotalcost / this.befortotalcost) *  100).toFixed(2)\r\n            } else {\r\n                this.befortotalcost = 0\r\n                this.aftertotalcost = 0\r\n                this.optimization = 0\r\n                this.beforeData = [\r\n                    {item: '交通成本', count: 0, percent: 0},\r\n                    {item: '人工成本', count: 0, percent: 0},\r\n                    {item: '发电损失', count: 0, percent: 0},\r\n                ]\r\n                this.afterData = [\r\n                    {item: '交通成本', count: 0, percent: 0},\r\n                    {item: '人工成本', count: 0, percent: 0},\r\n                    {item: '发电损失', count: 0, percent: 0},\r\n                ]\r\n            }\r\n\r\n            console.log(this.beforeData, 'this.beforeData', this.afterData)\r\n            this.chartBefore.changeData(this.beforeData)\r\n            this.chartAfter.changeData(this.afterData)\r\n        },\r\n        initChart() {\r\n            this.chartBefore = new Chart({\r\n                container: 'container',\r\n                autoFit: true,\r\n                height: 500,\r\n            })\r\n\r\n            this.chartBefore.coordinate('theta', {\r\n                radius: 0.6,\r\n                innerRadius: 0.6,\r\n            })\r\n            this.chartBefore.data(this.beforeData)\r\n            this.chartBefore.scale('count', {\r\n                formatter: (val) => {\r\n                    return val\r\n                },\r\n            })\r\n            this.chartBefore.legend('item', {\r\n                itemName: {\r\n                    style: {\r\n                        fill: '#ccf2ff',\r\n                    },\r\n                },\r\n                itemValue: {\r\n                    style: {\r\n                        fill: '#23bbff',\r\n                    }, // 配置 itemValue 样式\r\n                    formatter: (text, item, index) => {\r\n                        let textShow =\r\n                            (\r\n                                parseFloat(this.beforeData[index].percent) * 100\r\n                            ).toFixed(2) + ''\r\n                        return textShow.slice(0, 5) + '%'\r\n                    },\r\n                },\r\n                position: 'right', // 配置图例显示位置\r\n                offsetX: -45,\r\n                offsetY: 15,\r\n            })\r\n            this.chartBefore\r\n                .annotation()\r\n                .text({\r\n                    position: ['70%', '40%'],\r\n                    content: '总费用：',\r\n                    style: {\r\n                        fontSize: 14,\r\n                        fill: '#ccf2ff',\r\n                    },\r\n                    offsetX: 47,\r\n                    offsetY: -25,\r\n                })\r\n                .text({\r\n                    position: ['85%', '40%'],\r\n                    content: (obj) => {\r\n                        return this.befortotalcost + '元'\r\n                    },\r\n                    style: {\r\n                        fontSize: 14,\r\n                        fill: '#23bbff',\r\n                    },\r\n                    offsetX: 50,\r\n                    offsetY: -25,\r\n                })\r\n            this.chartBefore.tooltip({\r\n                showTitle: false,\r\n                showMarkers: false,\r\n                domStyles: {\r\n                    'g2-tooltip': {\r\n                        background: 'rgba(0,0,0, 0.8)',\r\n                        color: '#d6e0ec',\r\n                    },\r\n                },\r\n            })\r\n            this.chartBefore\r\n                .interval()\r\n                .position('count')\r\n                .color('item')\r\n                .adjust('stack')\r\n            this.chartBefore.interaction('element-active')\r\n            this.chartBefore.render()\r\n        },\r\n        initChart1() {\r\n            this.chartAfter = new Chart({\r\n                container: 'container1',\r\n                autoFit: true,\r\n                height: 500,\r\n            })\r\n            this.chartAfter.coordinate('theta', {\r\n                radius: 0.6,\r\n                innerRadius: 0.6,\r\n            })\r\n            this.chartAfter.data(this.afterData)\r\n            this.chartAfter.scale('count', {\r\n                formatter: (val) => {\r\n                    return val\r\n                },\r\n            })\r\n            this.chartAfter.legend('item', {\r\n                itemName: {\r\n                    style: {\r\n                        fill: '#ccf2ff',\r\n                    },\r\n                },\r\n                itemValue: {\r\n                    style: {\r\n                        fill: '#23bbff',\r\n                    }, // 配置 itemValue 样式\r\n                    formatter: (text, item, index) => {\r\n                        let showText =\r\n                            (\r\n                                parseFloat(this.afterData[index].percent) * 100\r\n                            ).toFixed(2) + ''\r\n                        return showText.slice(0, 5) + '%'\r\n                    }, // 格式化 itemValue 内容\r\n                },\r\n                position: 'right', // 配置图例显示位置\r\n                offsetX: -45, //图例与图表的距离\r\n                offsetY: 15,\r\n            })\r\n            this.chartAfter.tooltip({\r\n                showTitle: false,\r\n                showMarkers: false,\r\n                domStyles: {\r\n                    'g2-tooltip': {\r\n                        background: 'rgba(0,0,0, 0.8)',\r\n                        color: '#d6e0ec',\r\n                    },\r\n                },\r\n            })\r\n            this.chartAfter\r\n                .annotation()\r\n                .text({\r\n                    position: ['70%', '35%'],\r\n                    content: '总费用：',\r\n                    style: {\r\n                        fontSize: 14,\r\n                        fill: '#ccf2ff',\r\n                    },\r\n                    offsetX: 47,\r\n                    offsetY: -25,\r\n                })\r\n                .text({\r\n                    position: ['85%', '35%'],\r\n                    content: () => this.aftertotalcost + '元',\r\n                    style: {\r\n                        fontSize: 14,\r\n                        fill: '#23bbff',\r\n                    },\r\n                    offsetX: 50,\r\n                    offsetY: -25,\r\n                })\r\n                .text({\r\n                    position: ['70%', '35%'],\r\n                    content: '优化率：',\r\n                    style: {\r\n                        fontSize: 14,\r\n                        fill: '#ccf2ff',\r\n                    },\r\n                    offsetX: 47,\r\n                    offsetY: -2,\r\n                })\r\n                .text({\r\n                    position: ['85%', '35%'],\r\n                    content: () => this.optimization + '%',\r\n                    style: {\r\n                        fontSize: 14,\r\n                        fill: '#23bbff',\r\n                    },\r\n                    offsetX: 50,\r\n                    offsetY: -2,\r\n                })\r\n            this.chartAfter\r\n                .interval()\r\n                .position('count')\r\n                .color('item')\r\n                .adjust('stack')\r\n            this.chartAfter.interaction('element-active')\r\n            this.chartAfter.render()\r\n        },\r\n        initChart2() {\r\n            this.barChart = new Chart({\r\n                container: 'container2',\r\n                autoFit: true,\r\n                height: 500,\r\n            })\r\n            this.barChart.data(this.barData)\r\n\r\n            this.barChart.scale('costvalue', {\r\n                tickLine: null,\r\n                alias: '成本',\r\n                nice: true,\r\n            })\r\n            this.barChart.axis('date', {\r\n                tickLine: null,\r\n            })\r\n\r\n            this.barChart.axis('costvalue', {\r\n                label: {\r\n                    style: {\r\n                        fill: '#979ba4',\r\n                    },\r\n                },\r\n                line: {\r\n                    style: {\r\n                        stroke: '#414959',\r\n                    },\r\n                },\r\n                grid: {\r\n                    line: {\r\n                        style: {\r\n                            stroke: '#414959',\r\n                            lineWidth: 1,\r\n                            lineDash: [3, 3],\r\n                        },\r\n                    },\r\n                    alignTick: true,\r\n                },\r\n            })\r\n\r\n            this.barChart.legend(false)\r\n            this.barChart.tooltip({\r\n                shared: false,\r\n                showMarkers: false,\r\n                domStyles: {\r\n                    'g2-tooltip': {\r\n                        background: 'rgba(0,0,0, 0.8)',\r\n                        color: '#d6e0ec',\r\n                    },\r\n                },\r\n            })\r\n\r\n            this.barChart.interaction('active-region')\r\n\r\n            this.barChart.interval().position('date*costvalue')\r\n\r\n            this.barChart.render()\r\n        },\r\n    },\r\n}\r\n",null]}