page.vue

<template>
  <d2-container class="business">
    <headerLayout></headerLayout>
    <div class="section">
      <div class="leftBlock">
        <div class="boxHeight-3">
          <div class="title">商机统计</div>
          <div class="businessStatistics d-flex">
            <div class="circle">商机统计</div>
            <div class="circle circleOut"></div>
            <div class="flex-1">
              <div class="box">
                <div class="boxTitle">商机总数<span>（个）</span></div>
                <div class="boxValue">{{totalObj.opportunitiesNumber}}</div>
              </div>
              <div class="box">
                <div class="boxTitle">整体预算<span>（百万）</span></div>
                <div class="boxValue">{{totalObj.budget| numFilter}}</div>
              </div>
            </div>
            <div class="horizontal"></div>
            <div class="flex-1">
              <div class="box">
                <div class="boxTitle">本月新增<span>（个）</span></div>
                <div class="boxValue">{{(totalObj.newOpportunities|| 0)}}</div>
              </div>
              <div class="box">
                <div class="boxTitle">预计毛利<span>（百万）</span></div>
                <div class="boxValue">{{totalObj.budgetGrossProfit | numFilter }}</div>
              </div>
            </div>
            <div class="horizontal"></div>
            <div class="flex-1">
              <div class="box">
                <div class="boxTitle">售前参与<span>（个）</span></div>
                <div class="boxValue">{{totalObj.saler}}</div>
              </div>
              <div class="box">
                <div class="boxTitle">预计成本<span>（百万）</span></div>
                <div class="boxValue">{{totalObj.budgetCost | numFilter }}</div>
              </div>
            </div>
            <div class="horizontal horizontal1 "></div>
            <div class="horizontal horizontal1 horizontal2"></div>
            <div class="vertical"></div>
          </div>
        </div>
        <div class="boxHeight-3 mt-2">
          <div class="title">行业分布</div>
          <pieChart @downData="downDistributeData" :message="typeDistribute" idstr="typeDistribute" class="heightCut44"></pieChart>
        </div>
        <div class="boxHeight-3 mt-2">
          <div class="title">商机分布</div>
          <barChart :message="bussionDistribute" idstr="bussionDistribute" class="heightCut44 mt-2"></barChart>
        </div>
      </div>
      <div class="centerBlock">
        <div class="centerBoxHeight-32 d-flex flex-column">
          <div class="select-box mt-2">
              <div class="tab-chart">
                  <span class="tab-button" @click="chartActive=1" :class="{'is-active':chartActive=== 1 }">数量</span>
                  <span class="tab-button" @click="chartActive=2" :class="{'is-active':chartActive=== 2 }">金额</span>
              </div>
          </div>
          <div class="flex-1 d-flex">
            <div class="flex-1">
              <div class="title">商机阶段分析</div>
              <funnel :message="bussionStep" :idstr="'bussionStep'" class="heightCut44"></funnel>
            </div>
            <div class="flex-1">
              <div class="title">商机类型</div>
              <pieChart :message="bussionType" idstr="bussionType" class="heightCut44"></pieChart>
            </div>
          </div>
          <div class="flex-1">
            <doubleYBarChart @downData="downData" :message="bussionAnalysis" idstr="bussionAnalysis" class="heightCut44 mt-1"></doubleYBarChart>
          </div>
        </div>
        <div class="centerBoxHeight-3 mt-2">
          <div class="title">合同税率分布</div>
          <doubleYBarChart :message="taxRateDistribute" idstr="taxRateDistribute" class="heightCut44 mt-1"></doubleYBarChart>
        </div>
      </div>
      <div class="rightBlock">
        <div class="boxHeight-3">
          <div class="title">商机成功率</div>
          <doubleYBarChart :message="successRatio" idstr="successRatio" class="heightCut44 mt-1"></doubleYBarChart>
        </div>
        <div class="boxHeight-3 mt-2">
          <div class="title">新商机分析</div>
          <doubleYBarChart :message="newBussAnalysis" idstr="newBussAnalysis" class="heightCut44 mt-1"></doubleYBarChart>
        </div>
        <div class="boxHeight-3 mt-2">
          <div class="title">产品类型分析</div>
          <pieChart @downData="downTypeData" :message="typeAnalysis" idstr="typeAnalysis" class="heightCut44"></pieChart>
        </div>
      </div>
    </div>
  </d2-container>
</template>

<script>
import headerLayout from '@/components/headerLayout/index' // 公共头部
import pieChart from '@/components/echarts/pieChart' // 行业分布-饼图
import barChart from '@/components/echarts/barChart' // 商机分布-柱图
import doubleYBarChart from '@/components/echarts/doubleYBarChart' // 新商机分析-柱加折线图
import funnel from '@/components/echarts/funnel' // 梯形图
import * as API_BUSSINESS from '@/api/con.business.js'
export default {
  components: { headerLayout, pieChart, barChart, doubleYBarChart, funnel },
  data () {
    return {
      chartActive: 1,
      totalObj: {}, // 商机统计
      industry: '',
      // 行业分布
      typeDistribute: {},
      productType: '',
      // 产品类型分析
      typeAnalysis: {},
      // 商机分布
      bussionDistribute: {},
      // 新商机分析
      newBussAnalysis: {},
      // 合同税率分布
      taxRateDistribute: {},
      // 商机预算及硬蛋率
      successRatio: {},
      // 商机分析-中间图
      bussionAnalysis: {
        legend: ['初步接洽', '需求确定', '方案/报价', '谈判审核', '赢单'],
        xAxis: ['运营管理中心', '解决方案中心', '智能制造中心', '生态合作中心', '客户运营中心', 'XXXX中心'],
        yAxis: ['单位：个', '赢单率：%'],
        data: [
          {
            name: '初步接洽',
            type: 'bar',
            data: [
              { value: 123.2, isLeaf: false, parent: '' },
              { value: 125.6, isLeaf: false, parent: '' },
              { value: 176.7, isLeaf: false, parent: '' },
              { value: 135.6, isLeaf: false, parent: '' },
              { value: 162.2, isLeaf: false, parent: '' },
              { value: 200, isLeaf: false, parent: '' }
            ]
          }, {
            name: '需求确定',
            type: 'bar',
            data: [
              { value: 83.2, isLeaf: false, parent: '' },
              { value: 75.6, isLeaf: false, parent: '' },
              { value: 86.7, isLeaf: false, parent: '' },
              { value: 85.6, isLeaf: false, parent: '' },
              { value: 62.2, isLeaf: false, parent: '' },
              { value: 90, isLeaf: false, parent: '' }
            ]
          }, {
            name: '方案/报价',
            type: 'bar',
            yAxisIndex: 1,
            data: [
              { value: 74.5, isLeaf: false, parent: '' },
              { value: 66.3, isLeaf: false, parent: '' },
              { value: 70.2, isLeaf: false, parent: '' },
              { value: 80.3, isLeaf: false, parent: '' },
              { value: 53.4, isLeaf: false, parent: '' },
              { value: 87, isLeaf: false, parent: '' }
            ]
          }, {
            name: '谈判审核',
            type: 'bar',
            yAxisIndex: 1,
            data: [
              { value: 64.5, isLeaf: false, parent: '' },
              { value: 56.3, isLeaf: false, parent: '' },
              { value: 60.2, isLeaf: false, parent: '' },
              { value: 70.3, isLeaf: false, parent: '' },
              { value: 43.4, isLeaf: false, parent: '' },
              { value: 77, isLeaf: false, parent: '' }
            ]
          }, {
            name: '赢单',
            type: 'bar',
            yAxisIndex: 1,
            data: [
              { value: 54.5, isLeaf: false, parent: '' },
              { value: 46.3, isLeaf: false, parent: '' },
              { value: 50.2, isLeaf: false, parent: '' },
              { value: 60.3, isLeaf: false, parent: '' },
              { value: 33.4, isLeaf: false, parent: '' },
              { value: 65, isLeaf: false, parent: '' }
            ]
          }, {
            name: '赢单率',
            type: 'line',
            yAxisIndex: 1,
            data: [
              { value: 4.5, isLeaf: false, parent: '' },
              { value: 6.3, isLeaf: false, parent: '' },
              { value: 10.2, isLeaf: false, parent: '' },
              { value: 20.3, isLeaf: false, parent: '' },
              { value: 23.4, isLeaf: false, parent: '' },
              { value: 30.2, isLeaf: false, parent: '' }
            ]
          }
        ]
      },
      // 商机类型
      bussionType: {
        legend: ['服务续签', '其他', '特殊事项'],
        data: [
          { value: 335, name: '服务续签' },
          { value: 310, name: '其他' },
          { value: 234, name: '特殊事项' }
        ]
      },
      // 商机阶段分析
      bussionStep: {
        legend: ['初步接洽', '需求确定', '方案/报价', '谈判审核', '赢单', '输单', '终止', '暂停'],
        data: [
          { value: 335, name: '初步接洽' },
          { value: 280, name: '需求确定' },
          { value: 234, name: '方案/报价' },
          { value: 190, name: '谈判审核' },
          { value: 185, name: '赢单' },
          { value: 120, name: '输单' },
          { value: 89, name: '终止' },
          { value: 23, name: '暂停' }
        ]
      }
    }
  },
  mounted () {
    this.getOpportunitiesStatistics()
    this.getDistribution()
    this.getOpportunitiesDistribution()
    this.getTaxRate()
    this.getProductType()
    this.getNewOpportunities()
    this.getBillRate()
  },
  filters: {
    numFilter (value) {
      value = value / 1000000
      // 截取当前数据到小数点后两位(以百万元为单位)
      const realVal = parseFloat(value).toFixed(2)
      return realVal
    }
  },
  methods: {
    // 商机统计
    async  getOpportunitiesStatistics () {
      const _data = await API_BUSSINESS.getOpportunitiesStatistics()
      this.totalObj = _data.data[0]
    },
    // 行业分布
    async getDistribution () {
      const _data = await API_BUSSINESS.getDistribution({ industry: this.industry || null })
      const _distribute = {
        legend: _data.data.legend,
        data: _data.data.data.map(item => {
          return {
            name: item.industry,
            value: Number(item.value)
          }
        })
      }
      this.typeDistribute = _distribute
    },
    // 商机分布
    async getOpportunitiesDistribution () {
      const _data = await API_BUSSINESS.getOpportunitiesDistribution()
      this.bussionDistribute = _data.data
    },
    // 合同税率
    async getTaxRate () {
      const _data = await API_BUSSINESS.getTaxRate()
      this.taxRateDistribute = _data.data
      this.taxRateDistribute.data = this.taxRateDistribute.data.map(item => {
        item.barWidth = '25%'
        return item
      })
    },
    // 产品类型分析
    async getProductType () {
      const _data = await API_BUSSINESS.getProductType({ type: this.productType || null })
      const _typeAnalysis = {
        legend: _data.data.legend,
        data: _data.data.data.map(item => {
          return {
            name: item.productType || item.name,
            value: Number(item.number)
          }
        })
      }
      this.typeAnalysis = _typeAnalysis
    },
    // 新商机分析
    async getNewOpportunities () {
      const _data = await API_BUSSINESS.getNewOpportunities()
      this.newBussAnalysis = _data.data
      this.newBussAnalysis.data = this.newBussAnalysis.data.map(item => {
        item.barWidth = '25%'
        return item
      })
    },
    // 商机成功率
    async getBillRate () {
      const _data = await API_BUSSINESS.getBillRate()
      this.successRatio = _data.data
    },
    // 行业分布下钻数据
    downDistributeData (item) {
      console.log('传来的值:', item)
      this.industry = item
      this.getDistribution()
    },
    // 产品类型分析下钻数据
    downTypeData (item) {
      console.log('pie传来的值:', item)
      this.productType = item
      this.getProductType()
    },
    downData (item) {

    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~@/assets/style/business.scss';
</style>