{"remainingRequest":"D:\\jenkins\\workspace\\jd_cgpt_fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\jd_cgpt_fvue\\src\\views\\BigScreen\\balanceOverview.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\jd_cgpt_fvue\\src\\views\\BigScreen\\balanceOverview.vue","mtime":1701745912029},{"path":"D:\\jenkins\\workspace\\jd_cgpt_fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\jd_cgpt_fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\jd_cgpt_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//\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//\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 * as echarts from 'echarts'\r\nimport headline from './headline.vue'\r\nexport default {\r\n    components: {headline},\r\n    data() {\r\n        return {\r\n            thisMenuValue: '',\r\n            loadingColor: 'rgba(88, 115, 134, 0.3)',\r\n            loading: {\r\n                barChartSource: false,\r\n                barChartResource: false,\r\n                pieChart: false,\r\n                guageChart: false,\r\n            },\r\n            barChartSource: null, // 设备系统来源\r\n            barChartDataSource: [\r\n                {\r\n                    name: '通讯系统',\r\n                    value: 65,\r\n                },\r\n                {\r\n                    name: '收费系统',\r\n                    value: 18,\r\n                },\r\n                {\r\n                    name: '供配电系统',\r\n                    value: 29,\r\n                },\r\n                {\r\n                    name: '监控系统',\r\n                    value: 40,\r\n                },\r\n            ],\r\n            barChartOptionSource: null,\r\n            barChartResource: null, // 站点资产\r\n            barChartDataResource: [\r\n                {\r\n                    name: '车道',\r\n                    value: 8,\r\n                },\r\n                {\r\n                    name: '站机房',\r\n                    value: 7,\r\n                },\r\n                {\r\n                    name: 'UPS房',\r\n                    value: 5,\r\n                },\r\n                {\r\n                    name: '配电房',\r\n                    value: 9,\r\n                },\r\n                {\r\n                    name: '站房',\r\n                    value: 15,\r\n                },\r\n            ],\r\n            barChartOptionResource: null,\r\n            pieChart: null,\r\n            pieChartData: [\r\n                {value: 1048, name: '通讯设备'},\r\n                {value: 735, name: '供电设备'},\r\n                {value: 580, name: '灯具设备'},\r\n                {value: 484, name: '监控设备'},\r\n                {value: 300, name: '显示器设备'},\r\n                {value: 580, name: '收费设备'},\r\n                {value: 484, name: '服务器'},\r\n                {value: 300, name: '工作站'},\r\n            ],\r\n            pieChartOption: null,\r\n            equipmentTotalCount: 4585,\r\n            guageChart: null,\r\n            guageChartData: 50,\r\n            guageChartOpiton: null,\r\n            // 岗位统计\r\n            post: {\r\n                manager: 10,\r\n                monitor: 15,\r\n                collector: 20,\r\n                other: 30,\r\n            },\r\n        }\r\n    },\r\n    mounted() {\r\n        this.thisMenuValue = this.$route.query.thisMenuValue\r\n        this.getData()\r\n    },\r\n    methods: {\r\n        getData() {\r\n            this.drawBarChartSource()\r\n            this.drawBarChartResource()\r\n            this.drawPieChart()\r\n            this.drawGuageChart()\r\n        },\r\n        drawBarChartSource() {\r\n            // chart 已存在则为更新数据\r\n            if (this.barChartSource) {\r\n                this.barChartOptionSource.dataset.source =\r\n                    this.barChartDataSource\r\n                this.barChartSource.setOption(this.barChartOptionSource)\r\n            } else {\r\n                // chart 不存在则为初始化数据和图表\r\n                this.barChartSource = echarts.init(\r\n                    document.getElementById('bar-chart-source')\r\n                )\r\n                this.barChartOptionSource = {\r\n                    dataset: {\r\n                        source: this.barChartDataSource,\r\n                    },\r\n                    tooltip: {\r\n                        trigger: 'axis',\r\n                        backgroundColor: 'rgba(113, 126, 139, 0.9)',\r\n                        borderColor: '#a9b2bc',\r\n                        textStyle: {\r\n                            color: '#fff',\r\n                        },\r\n                        confine: true,\r\n                        position: 'bottom',\r\n                        formatter: function (params) {\r\n                            return (\r\n                                '设备系统来源<br/>' +\r\n                                params[0].data.name +\r\n                                '：' +\r\n                                params[0].data.value +\r\n                                '（个）'\r\n                            )\r\n                        },\r\n                    },\r\n                    grid: [\r\n                        {\r\n                            top: '18%',\r\n                            left: '10%',\r\n                            right: '0',\r\n                            bottom: '10%',\r\n                        },\r\n                    ],\r\n                    xAxis: {\r\n                        type: 'category',\r\n                        axisTick: {\r\n                            show: false,\r\n                            alignWithLabel: true,\r\n                        },\r\n                        axisLine: {\r\n                            show: true,\r\n                            lineStyle: {\r\n                                color: '#808080',\r\n                            },\r\n                        },\r\n                        axisLabel: {\r\n                            show: true,\r\n                            color: 'rgba(255,255,255,0.6)',\r\n                        },\r\n                    },\r\n                    yAxis: {\r\n                        name: '单位（个）',\r\n                        nameTextStyle: {\r\n                            color: 'rgba(255,255,255,0.6)',\r\n                            padding: [0, 0, 0, 20],\r\n                        },\r\n                        type: 'value',\r\n                        axisLine: {\r\n                            show: true,\r\n                            lineStyle: {\r\n                                color: '#808080',\r\n                            },\r\n                        },\r\n                        axisLabel: {\r\n                            show: true,\r\n                            color: 'rgba(255,255,255,0.6)',\r\n                            formatter: (val) => {\r\n                                if (\r\n                                    (val >= 1 && parseInt(val, 10) === val) ||\r\n                                    val == 0\r\n                                ) {\r\n                                    return val\r\n                                } else {\r\n                                    return\r\n                                }\r\n                            },\r\n                        },\r\n                        splitLine: {\r\n                            show: false,\r\n                        },\r\n                    },\r\n                    series: [\r\n                        {\r\n                            type: 'bar',\r\n                            showBackground: true,\r\n                            barWidth: 20,\r\n                            itemStyle: {\r\n                                borderRadius: [5, 5, 0, 0],\r\n                                color: new echarts.graphic.LinearGradient(\r\n                                    0,\r\n                                    0,\r\n                                    0,\r\n                                    1,\r\n                                    [\r\n                                        {offset: 0, color: '#CAAD66'},\r\n                                        {offset: 0.6, color: '#85785c'},\r\n                                        {offset: 1, color: '#4c4d51'},\r\n                                    ]\r\n                                ),\r\n                            },\r\n                        },\r\n                    ],\r\n                }\r\n\r\n                this.barChartOptionSource &&\r\n                    this.barChartSource.setOption(this.barChartOptionSource)\r\n                window.addEventListener('resize', () =>\r\n                    this.barChartSource.resize()\r\n                )\r\n            }\r\n        },\r\n        drawBarChartResource() {\r\n            // chart 已存在则为更新数据\r\n            if (this.barChartResource) {\r\n                this.barChartOptionSource.dataset.source =\r\n                    this.barChartDataResource\r\n                this.barChartResource.setOption(this.barChartOptionSource)\r\n            } else {\r\n                // chart 不存在则为初始化数据和图表\r\n                this.barChartResource = echarts.init(\r\n                    document.getElementById('bar-chart-resource')\r\n                )\r\n                this.barChartOptionResource = {\r\n                    dataset: {\r\n                        source: this.barChartDataResource,\r\n                    },\r\n                    tooltip: {\r\n                        trigger: 'axis',\r\n                        backgroundColor: 'rgba(113, 126, 139, 0.9)',\r\n                        borderColor: '#a9b2bc',\r\n                        textStyle: {\r\n                            color: '#fff',\r\n                        },\r\n                        confine: true,\r\n                        position: 'bottom',\r\n                        formatter: function (params) {\r\n                            return (\r\n                                '站点资产<br/>' +\r\n                                params[0].data.name +\r\n                                '：' +\r\n                                params[0].data.value +\r\n                                '（个）'\r\n                            )\r\n                        },\r\n                    },\r\n                    grid: [\r\n                        {\r\n                            top: '18%',\r\n                            left: '10%',\r\n                            right: '0',\r\n                            bottom: '10%',\r\n                        },\r\n                    ],\r\n                    xAxis: {\r\n                        type: 'category',\r\n                        axisTick: {\r\n                            show: false,\r\n                            alignWithLabel: true,\r\n                        },\r\n                        axisLine: {\r\n                            show: true,\r\n                            lineStyle: {\r\n                                color: '#808080',\r\n                            },\r\n                        },\r\n                        axisLabel: {\r\n                            show: true,\r\n                            color: 'rgba(255,255,255,0.6)',\r\n                        },\r\n                    },\r\n                    yAxis: {\r\n                        name: '单位（个）',\r\n                        nameTextStyle: {\r\n                            color: 'rgba(255,255,255,0.6)',\r\n                            padding: [0, 0, 0, 20],\r\n                        },\r\n                        type: 'value',\r\n                        axisLine: {\r\n                            show: true,\r\n                            lineStyle: {\r\n                                color: '#808080',\r\n                            },\r\n                        },\r\n                        axisLabel: {\r\n                            show: true,\r\n                            color: 'rgba(255,255,255,0.6)',\r\n                            formatter: (val) => {\r\n                                if (\r\n                                    (val >= 1 && parseInt(val, 10) === val) ||\r\n                                    val == 0\r\n                                ) {\r\n                                    return val\r\n                                } else {\r\n                                    return\r\n                                }\r\n                            },\r\n                        },\r\n                        splitLine: {\r\n                            show: false,\r\n                        },\r\n                    },\r\n                    series: [\r\n                        {\r\n                            type: 'bar',\r\n                            showBackground: true,\r\n                            barWidth: 20,\r\n                            itemStyle: {\r\n                                borderRadius: [5, 5, 0, 0],\r\n                                color: new echarts.graphic.LinearGradient(\r\n                                    0,\r\n                                    0,\r\n                                    0,\r\n                                    1,\r\n                                    [\r\n                                        {offset: 0, color: '#49FFB6'},\r\n                                        {offset: 0.6, color: '#50a58a'},\r\n                                        {offset: 1, color: '#516663'},\r\n                                    ]\r\n                                ),\r\n                            },\r\n                        },\r\n                    ],\r\n                }\r\n\r\n                this.barChartOptionResource &&\r\n                    this.barChartResource.setOption(this.barChartOptionResource)\r\n                window.addEventListener('resize', () =>\r\n                    this.barChartResource.resize()\r\n                )\r\n            }\r\n        },\r\n        drawPieChart() {\r\n            // chart 已存在则为更新数据\r\n            if (this.pieChart) {\r\n                this.pieChartOption.series[0].data = this.pieChartData\r\n                this.barChartSource.setOption(this.pieChartOption)\r\n            } else {\r\n                // chart 不存在则为初始化数据和图表\r\n                this.pieChart = echarts.init(\r\n                    document.getElementById('pie-chart')\r\n                )\r\n                this.pieChartOption = {\r\n                    color: [\r\n                        '#6699FF',\r\n                        '#66CCFF',\r\n                        '#00E5E5',\r\n                        '#4DFFFF',\r\n                        '#66FF99',\r\n                        '#80FF66',\r\n                        '#CCFF66',\r\n                        '#FFE666',\r\n                    ],\r\n                    tooltip: {\r\n                        trigger: 'item',\r\n                        backgroundColor: 'rgba(113, 126, 139, 0.9)',\r\n                        borderColor: '#a9b2bc',\r\n                        confine: true,\r\n                        textStyle: {\r\n                            color: '#fff',\r\n                        },\r\n                        formatter: '{a} <br/>{b} : {c}个 ({d}%)',\r\n                    },\r\n                    legend: {\r\n                        type: 'scroll',\r\n                        orient: 'vertical',\r\n                        left: 'right',\r\n                        top: 'middle',\r\n                        icon: 'circle',\r\n                        textStyle: {\r\n                            color: '#E1E9F0',\r\n                        },\r\n                        align: 'left',\r\n                        pageIconColor: '#E1E9F0',\r\n                        pageIconInactiveColor: '#a2a6a8',\r\n                        pageIconSize: 10,\r\n                        pageTextStyle: {\r\n                            color: '#fff',\r\n                        },\r\n                    },\r\n                    series: [\r\n                        {\r\n                            name: '设备统计',\r\n                            type: 'pie',\r\n                            radius: '75%',\r\n                            center: ['40%', '50%'],\r\n                            data: this.pieChartData,\r\n                            label: {show: false},\r\n                            emphasis: {\r\n                                itemStyle: {\r\n                                    shadowBlur: 10,\r\n                                    shadowOffsetX: 0,\r\n                                    shadowColor: 'rgba(0, 0, 0, 0.5)',\r\n                                },\r\n                            },\r\n                        },\r\n                    ],\r\n                }\r\n                this.pieChartOption &&\r\n                    this.pieChart.setOption(this.pieChartOption)\r\n                window.addEventListener('resize', () => this.pieChart.resize())\r\n            }\r\n        },\r\n        drawGuageChart() {},\r\n    },\r\n}\r\n",null]}