{"remainingRequest":"D:\\jenkins\\workspace\\reform-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\reform-fvue\\src\\views\\BigScreen\\components\\subComponents\\projectTrendChart.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\reform-fvue\\src\\views\\BigScreen\\components\\subComponents\\projectTrendChart.vue","mtime":1702263619964},{"path":"D:\\jenkins\\workspace\\reform-fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\reform-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\reform-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\r\nimport * as echarts from 'echarts'\r\nimport apiList from '@/api/bigScreen/projectSub.js'\r\nexport default {\r\n name: 'projectTrendChart',\r\n data() {\r\n return {\r\n loadingColor: 'rgba(6, 46, 106, 1)',\r\n loading: false,\r\n trendChart: null,\r\n trendChartOption: null,\r\n legendData: [],\r\n xAxisData: [],\r\n seriesData: [],\r\n valueData: [],\r\n rateData: null,\r\n }\r\n },\r\n beforeDestroy() {\r\n this.$bus.$off('changeDate')\r\n },\r\n mounted() {\r\n this.$emit('searchDateChange')\r\n this.loadData()\r\n this.$bus.$on('changeDate', () => {\r\n this.loadData()\r\n })\r\n },\r\n methods: {\r\n initTrendChart() {\r\n let chartDom = document.getElementById('trend-chart')\r\n this.trendChart = echarts.init(chartDom)\r\n this.trendChartOption = {\r\n tooltip: {\r\n trigger: 'axis',\r\n backgroundColor: 'rgba(6, 47, 107, 1)',\r\n borderColor: 'rgba(2, 115, 233, 1)',\r\n textStyle: {\r\n color: '#fff',\r\n fontSize: 18,\r\n },\r\n formatter: (arg) => {\r\n let str = arg[0].axisValue + ''\r\n arg.forEach((item) => {\r\n if (\r\n Object.keys(this.valueData[item.dataIndex])\r\n .length\r\n ) {\r\n str =\r\n str +\r\n '' +\r\n item.seriesName +\r\n '' +\r\n '' +\r\n ' 月度实际累计完成值' +\r\n ' : ' +\r\n item.data +\r\n '' +\r\n item.marker +\r\n '已完成当月目标值/未完成当月目标值' +\r\n ' : ' +\r\n this.valueData[item.dataIndex][\r\n item.seriesName\r\n ].addValue +\r\n '/' +\r\n this.valueData[item.dataIndex][\r\n item.seriesName\r\n ].unStartAddValue +\r\n '' +\r\n ' 已完成年度目标值/未完成年度目标值' +\r\n ' : ' +\r\n this.valueData[item.dataIndex][\r\n item.seriesName\r\n ].value +\r\n '/' +\r\n this.valueData[item.dataIndex][\r\n item.seriesName\r\n ].unStartValue +\r\n ''\r\n } else {\r\n str =\r\n str +\r\n '' +\r\n item.seriesName +\r\n '' +\r\n '' +\r\n ' 月度实际完成值' +\r\n ' : ' +\r\n item.data +\r\n '' +\r\n item.marker +\r\n '已完成当月目标值/未完成当月目标值' +\r\n ' : ' +\r\n 0 +\r\n '/' +\r\n 0 +\r\n '' +\r\n ' 已完成年度目标值/未完成年度目标值' +\r\n ' : ' +\r\n 0 +\r\n '/' +\r\n 0 +\r\n ''\r\n }\r\n })\r\n return str\r\n },\r\n },\r\n legend: {\r\n top: '0',\r\n left: 'center',\r\n type: 'plain',\r\n icon: 'rect',\r\n inactiveColor: '#333333',\r\n itemWidth: 20,\r\n itemHeight: 6,\r\n textStyle: {\r\n color: '#B1E3FF',\r\n fontSize: 16,\r\n },\r\n data: this.legendData,\r\n },\r\n grid: {\r\n left: '1%',\r\n right: '2%',\r\n bottom: '2%',\r\n containLabel: true,\r\n },\r\n\r\n xAxis: {\r\n type: 'category',\r\n type: 'category',\r\n boundaryGap: ['0%', '0%'],\r\n axisLine: {\r\n lineStyle: {\r\n color: 'rgba(154,199,220, 0.2)',\r\n },\r\n },\r\n axisLabel: {\r\n color: '#D7F1FF',\r\n align: 'center',\r\n fontSize: 16,\r\n padding: [0, 0, 0, 10],\r\n },\r\n boundaryGap: false,\r\n data: this.xAxisData,\r\n splitLine: {\r\n show: false,\r\n },\r\n },\r\n yAxis: {\r\n type: 'value',\r\n axisLabel: {\r\n color: '#D7F1FF',\r\n interval: 0,\r\n showMinLabel: true,\r\n showMaxLabel: true,\r\n fontSize: 16,\r\n },\r\n axisLine: {\r\n lineStyle: {\r\n color: 'rgba(154,199,220, 0.2)',\r\n },\r\n },\r\n splitLine: {\r\n lineStyle: {\r\n color: 'rgba(154,199,220, 0.2)',\r\n },\r\n },\r\n },\r\n series: this.seriesData,\r\n }\r\n this.trendChartOption &&\r\n this.trendChart.setOption(this.trendChartOption)\r\n window.addEventListener('resize', () => this.trendChart.resize())\r\n },\r\n loadData() {\r\n this.loading = true\r\n this.$nextTick(this.initTrendChart())\r\n let data = JSON.parse(sessionStorage.getItem('searchDate'))\r\n data.projectId = this.$route.query.id\r\n this.getTwoRate(data)\r\n apiList.getTrendChartData(data, (res) => {\r\n this.xAxisData = res.map((item) => {\r\n if (item.month < 10) {\r\n item.date = item.year + '/0' + item.month\r\n } else {\r\n item.date = item.year + '/' + item.month\r\n }\r\n return item.date\r\n })\r\n this.xAxisData.reverse()\r\n this.legendData = res[0].quantitativeObjectivesVoList.map(\r\n (item) => item.objectIvesName\r\n )\r\n let arr = res.map((item) => {\r\n let obj = {}\r\n item.quantitativeObjectivesVoList.forEach((item1) => {\r\n obj[item1.objectIvesName] = item1\r\n })\r\n return obj\r\n })\r\n this.valueData = JSON.parse(JSON.stringify(arr.reverse()))\r\n this.legendData.forEach((item, index) => {\r\n this.seriesData[index] = {\r\n name: item,\r\n stack: 'Total',\r\n type: 'line',\r\n data: arr.map((item1) => {\r\n return item1[item] ? item1[item].addValue : 0\r\n }),\r\n }\r\n })\r\n this.initTrendChart()\r\n this.loading = false\r\n })\r\n },\r\n getTwoRate(data) {\r\n apiList.getTwoRate(data, (res) => {\r\n this.rateData = res\r\n })\r\n },\r\n },\r\n}\r\n",null]}