ccy_DIB/pages/earlyWarning/carCharts.vue

<template>
  <view class="main">
    <view class="carChartsBox">
      <view class="bigBox">
        <view class="bigImg">
          <qiunDataCharts
              type="mix"
              :opts="opts"
              :chartData="chartData"
              :animation="false"
              :canvas2d="true"
              :inScrollView="true"
              :reshow="isSuccess"
          />
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import request from '@/util/index.js'
import qiunDataCharts
  from "./component/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
export default {
  name: "carCharts",
  components: {qiunDataCharts},
  data(){
    return {
      id: '',
      StartDate: '',
      EndDate: '',
      thisYear: '',
      thisMonth:'',
      opts:{},
      chartData: {},
      menu:{},
      isSuccess: false
    }
  },
  onLoad(query){
    this.menu = uni.getSystemInfoSync()
    console.log('this.menu',this.menu)
    console.log('query',query)
    if (query.id){
      this.id = query.id
    }
    const date = new Date()
    let y = date.getFullYear()
    let m = date.getMonth() + 1
    this.thisYear = y
    this.thisMonth = m
    // if (query.date){
    //   const date = new Date()
    //   // 找到月字说明选的是单月的 默认直接今年
    //   if (query.date && query.date.indexOf('月')!==-1){
    //     let y = date.getFullYear()
    //     this.thisYear = y
    //     let monthTextIndex = query.date.indexOf('月')
    //     let monthText = query.date.slice(0,monthTextIndex)
    //     console.log('monthText',monthText)
    //     this.thisMonth = monthText
    //   }else if (query.date && query.date.indexOf('-')!==-1){
    //     let endTime = query.date.split('-')[1]
    //     this.thisYear = endTime.slice(0,4)
    //     this.thisMonth = endTime.slice(4,6)
    //   }
    // }
    this.handleGetPageData()
  },
  methods:{
    async handleGetPageData(){
      uni.showLoading({
        title: '正在加载...'
      })
      const cReq = {
        StatisticsDate: this.$moment().format('YYYY-MM-DD'),
        StartDate: `${this.thisYear}-01-01`,
        EndDate: this.$moment(`${this.thisYear}-${this.thisMonth<10?`0${this.thisMonth}`:this.thisMonth}`).endOf('months').format('YYYY-MM-DD'),
        Serverpart_ID: this.id
      }
      const lReq = {
        StatisticsDate: this.$moment().format('YYYY-MM-DD'),
        StartDate:`${this.thisYear - 1}-01-01`,
        EndDate:`${this.thisYear - 1}-12-31`,
        Serverpart_ID: this.id
      }

      console.log('cReq',cReq)
      console.log('lReq',lReq)

      const cData = await request.$webGet('/CommercialApi/BigData/GetMonthAnalysis',cReq)
      const lData = await request.$webGet('/CommercialApi/BigData/GetMonthAnalysis',lReq)

      let cList = cData.Result_Data.List
      let lList = lData.Result_Data.List


      console.log('cList',cList)
      console.log('lList',lList)
      let columnsRevenue = []
      let lineCar = []
      let _this = this

      let cColumn = []
      let cLine = []
      let lColumn = []
      let lLine = []

      let columnsMax = 0
      let lineMax = 0
      if (cList && cList.length>0){
        cList.forEach(item=>{
          if (columnsMax<this.$util.getMoney(item.RevenueAmount / 10000)){
            columnsMax = this.$util.getMoney(item.RevenueAmount / 10000)
          }
          if (lineMax<this.$util.getMoney(item.Vehicle_Count / 10000)){
            lineMax = this.$util.getMoney(item.Vehicle_Count / 10000)
          }

          cColumn.push(this.$util.getMoney(item.RevenueAmount / 10000))
          cLine.push(this.$util.getMoney(item.Vehicle_Count / 10000))
        })
      }
      if (lList && lList.length>0){
        lList.forEach(item=>{
          if (columnsMax<this.$util.getMoney(item.RevenueAmount / 10000)){
            columnsMax = this.$util.getMoney(item.RevenueAmount / 10000)
          }
          if (lineMax<this.$util.getMoney(item.Vehicle_Count / 10000)){
            lineMax = this.$util.getMoney(item.Vehicle_Count / 10000)
          }
          lColumn.push(this.$util.getMoney(item.RevenueAmount / 10000))
          lLine.push(this.$util.getMoney(item.Vehicle_Count / 10000))
        })
      }
      console.log('columnsRevenue',columnsRevenue)
      console.log('lineCar',lineCar)

      let res = {
        categories: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
        series:[
          {
            name: `${_this.thisYear}营业额`,
            type: 'column',
            data: cColumn,
            index: 0
          },
          {
            name: `${_this.thisYear}车流量`,
            type: 'line',
            data: cLine,
            index: 1
          },
          {
            name: `${_this.thisYear - 1}营业额`,
            type: 'column',
            data: lColumn,
            index: 0
          },
          {
            name: `${_this.thisYear - 1}车流量`,
            type: 'line',
            data: lLine,
            index: 1
          }
        ]
      }
      this.chartData = res


      // screenHeight
      // screenWidth
      this.opts = {
        color: [],
        padding: [15,10,0,10],
        enableScroll: false,
        legend: {},
        rotate: true,
        rotateLock: true,
        dataLabel: false,
        xAxis: {
          disableGrid: true,
          // title: "单位：万元/万辆",
        },
        yAxis: {
          splitNumber: 5,
          gridType: "dash",
          padding: 10,
          showTitle: true,
          data: [
            {
              position:'left',
              title:'营收/万元',
              min: 0,
              max: _this.getSplitNumber(columnsMax)
            },
            {
              position:'right',
              title:'车流/万辆',
              min: 0,
              max: _this.getSplitNumber(lineMax)
            }
          ]
        },
        extra: {
          mix: {
            column: {
              width: 15,
            }
          }
        }
      }
      setTimeout(()=>{
        this.isSuccess = true
      },500)
      uni.hideLoading()
    },
    getSplitNumber(value){
      if (value === 0 || value<5){
        let num = Math.ceil(Number(value))
        return num
      }else{
        let sum = Number(value) + Number(value) *0.2
        return  Number((Math.ceil(sum / 100)).toFixed(0)) * 100
      }
    },
  }
}
</script>
<style scoped lang="scss">
.main{
  width: 100%;
  height: 100vh;
  background: #F3F4F9;
  box-sizing: border-box;
  .carChartsBox{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vh;
    height: 100vh;
    background: black;
    .bigBox{
      width: 100vw;
      height: 100vh;
      background: #fff;
      .bigImg{
        width: 100vw;
        height: calc(100vh - 50rpx);
        background: #fff;
      }
    }
  }
}
</style>