const herfurl = window.location.href.split('index')[0] //跳转地址 let app = new Vue({ el: '#app', data() { return { time: '', timeout: 15000, // 一分钟发一次心跳 pageindex: 0, comprehensive: [{ title: '年度累计额销售额', number: 0, image: './image/index/01.png', unit: '万' }, { title: '季度累计销售', number: 0, image: './image/index/01.png', unit: '万' }, { title: '本月累计销售额', number: 0, image: './image/index/01.png', unit: '万' }, { title: '累计销售回款率', number: 0, image: './image/index/01.png', unit: '%' }, { title: '年度累计采购支出', number: 0, image: './image/index/01.png', unit: '万' }, { title: '季度累计采购支出', number: 0, image: './image/index/01.png', unit: '万' }, { title: '本月累计采购支出', number: 0, image: './image/index/01.png', unit: '万' }, { title: '累计采购挂帐率', number: 0, image: './image/index/01.png', unit: '%' }], dataList: [], totalCount:0, incomeOrExpenditure:'', expenditureData:{ xData:[], yData:[[],[]] } } }, mounted() { setTimeout(() => { //从链接地址中获取token参数 let token = getQueryVariable('token') //综合概况 get('/mbwb/api/v1/erpscs/ppwStatisticalScreen/getPpwGeneralOverview',{},{ Authorization:token +'=' }).then(res => { this.comprehensive[0].number = res.info.annualCumulativeSales this.comprehensive[1].number = res.info.quarterlyCumulativeSales this.comprehensive[2].number = res.info.monthCumulativeSales this.comprehensive[3].number = res.info.cumulativeSalesReturnRate this.comprehensive[4].number = res.info.annualCumulativePurchasingExpenditure this.comprehensive[5].number = res.info.quarterlyCumulativePurchasingExpenditure this.comprehensive[6].number = res.info.monthCumulativePurchasingExpenditure this.comprehensive[7].number = res.info.cumulativePurchaseUnpaidRate }) //收支情况 get('/mbwb/api/v1/erpscs/ppwStatisticalScreen/getPpwIncomeAndExpenditure',{},{ Authorization:token+'=' }).then(res => { this.expenditureData = res.info this.handleQuantity() }) //累计实际收支 get('/mbwb/api/v1/erpscs/ppwStatisticalScreen/getPpwRealIncomeAndExpenditure',{},{ Authorization:token+'=' }).then(res => { this.incomeOrExpenditure = res.info }) //以单定产 get('/mbwb/api/v1/erpscs/ppwStatisticalScreen/queryPpwSalesOrderProgress',{},{ Authorization:token+'=' }).then(res => { this.dataList = res.infos this.totalCount = res.totalCount }) this.handleTime() }, 0) }, methods: { handleTime() { setInterval(() => { this.time = dayjs().format('YYYY-MM-DD HH:mm:ss') }, 1000) }, handleQuantity() { let chart = echarts.init(document.getElementById('statistics')) let option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { left: '2%', right: '4%', bottom: '14%', top: '16%', containLabel: true }, xAxis: { type: 'category', data: this.expenditureData.xData, axisLine: { lineStyle: { color: 'white' } }, }, //调整两个柱状图的间距 yAxis: { type: 'value', axisLine: { show: false, lineStyle: { color: 'white' } }, splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,0.3)' } }, axisLabel: {} }, series: [{ name: '收入', type: 'bar', barWidth: '10%', itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#165ACC' }, { offset: 1, color: '#051024' }]), barBorderRadius: 10, }, }, data: this.expenditureData.yData[0] }, { name: '支出', type: 'bar', barWidth: '10%', itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FFA900' }, { offset: 1, color: '#051024' }]), barBorderRadius: 10, }, }, data: this.expenditureData.yData[1] }] }; chart.setOption(option, true); tools.loopShowTooltip(chart, option, { nterval: 1000, loopSeries: true }); }, }, })