JZZBigScreen/js/index.js

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
      });
    },


  },
})