yos_web/src/HManagement/serviceDataScreen/modules/marketingExpenseStatistics.vue

<template>
  <div>
    <borderTemplate borderBox="width: 17.083vw;height: 12.500vw;" title="营销费用统计" detailTitle="查看详情" @dialog="$emit('dialog')" systemappid="290" push_path="/salerpriceData">
      <template slot="content">
        <div>
          <div style="display: flex;justify-content: space-between;margin-bottom: 0.364vw">
            <el-button type="text" class="inline-16 btn-title-style" @click="onChange(true)" >{{$t(`切换`)}}{{$t(btnTitle)}}</el-button>
            <el-select v-model="param.content.dateType"  class="inline-16" size="small" @change="onChange(false)" :popper-append-to-body="false" >
              <el-option :label="$t('全部')" value="全部"></el-option>
              <el-option :label="$t('本年')" value="本年"></el-option>
            </el-select>
          </div>
          <div v-show="btnTitle == '项目'" style="width: 16.025vw;height: 6.633vw;margin-top: 0.264vw;" ref="customerRefChar">
          </div>
          <div v-show="btnTitle == '客户'" style="width: 16.025vw;height: 6.633vw;margin-top: 0.264vw;" ref="projectRefChar">
          </div>
        </div>
      </template>
    </borderTemplate>
  </div>
</template>

<script>
import borderTemplate from '../components/borderTemplate'
import {Pie} from "@antv/g2plot";
export default {
  name: "marketingExpenseStatistics",
  components:{borderTemplate},
  data(){
    return {
      dateType:'本年',
      btnTitle:'项目',
      param:{
        id:2024062615133802,
        content:{
          dataid:'',
          dateType:'本年',
          ownertable:'sa_customers',
          type:'',
          where:{
            isleave:'1',
          }
        }
      },
      cusData:'',
      proData:'',
      cusMap:'',
      proMap:''
    }
  },
  methods:{
    async cusInit(init){
      this.param.id = 2024062615133802
      this.param.content.ownertable = 'sa_customers'
      let res = await this.$api.requested(this.param)
      // this.mapData = res.data[0].ratio
      this.cusData = res.data[0].ratio.map(item=>{
        return {
          "totalamount": res.data[0].ratio[0].total,//值
          "type": item.type,
          "rowindex": item.rowindex,
          "ratio": Math.round(((item.ratio * 100)*100)/100), //比例
          "value":item.value
        }
      })
      console.log('客户类型数据',this.cusData)
      if (init) {
        this.cusMap = new Pie(this.$refs.customerRefChar, {
          appendPadding: 2,
          data:this.cusData,
          angleField: 'ratio',
          colorField: 'type',
          radius: 1,
          innerRadius: 0.79,
          label:{
            style:{
              fill:'#CFDCE5'
            },
            /*type: 'inner',
            offset: '-50%',
            style: {
              textAlign: 'center',
            },
            autoRotate: false,*/
            formatter: (datum) => `${datum.ratio}%`
          },
          tooltip:{
            formatter: (datum) => {
              return { name: datum.type, value: datum.ratio + '%' };
            },
            style: {
              fontSize:'0.733vw',
              color:'#f60b44'
            },
          },
          statistic: {
            title: {
              offsetY: -4,
              style: {
                fontSize:'0.733vw',
                color:'#E6F4FF'
              },
              content:'客户营销费用'
            },
            content: {
              offsetY: 4,
              style: {
                whiteSpace: 'pre-wrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                fontSize:'0.833vw',
                color:'#FFFFFF'
              },
              customHtml: (container, view, datum, data) => {
                const text = '¥'+this.tool.formatAmount(this.tool.unitConversion(data[0].totalamount,10000),2)+this.$t('万')
                return text
              },
            },
          },
          legend: {
            position:'right',
            offsetY:2,
            itemName:{
              style:{
                fill:'#CFDCE5'
              }
            },
            pageNavigator:{
              marker: {
                style: {
                  // 非激活，不可点击态时的填充色设置
                  inactiveFill: '#fff',
                  inactiveOpacity: 1,
                  // 默认填充色设置
                  fill: '#fff',
                  opacity: 1,
                  size: 10,
                },
              },
              text: {
                style: {
                  // 非激活，不可点击态时的填充色设置
                  inactiveFill: '#fff',
                  inactiveOpacity: 1,
                  // 默认填充色设置
                  fill: '#fff',
                  opacity: 1,
                  size: 10,
                },
              },
            }
          },
          // 添加 中心统计文本 交互
          // interactions: [{ type: 'element-single-selected' },{ type: 'element-active' }],
        });
        this.cusMap.render();
      } else {
        this.cusMap.changeData(this.cusData)
      }
    },
    async proInit(init){
      this.param.id = 2024062915152702
      this.param.content.ownertable = 'sa_project'
      let res = await this.$api.requested(this.param)
      // this.mapData = res.data[0].ratio
      this.proData = res.data[0].ratio.map(item=>{
        return {
          "totalamount": res.data[0].ratio[0].total,//值
          "type": item.type,
          "rowindex": item.rowindex,
          "ratio": Math.round(((item.ratio * 100)*100)/100), //比例
          "value":item.value
        }
      })
      console.log('项目类型数据',this.proData)
      if (init) {
        this.proMap = new Pie(this.$refs.projectRefChar, {
          appendPadding: 2,
          data:this.proData,
          angleField: 'ratio',
          colorField: 'type',
          radius: 1,
          innerRadius: 0.79,
          label:{
            style:{
              fill:'#CFDCE5'
            },
            /*type: 'inner',
            offset: '-50%',
            style: {
              textAlign: 'center',
            },
            autoRotate: false,*/
            formatter: (datum) => `${datum.ratio}%`
          },
          tooltip:{
            formatter: (datum) => {
              return { name: datum.type, value: datum.ratio + '%' };
            },
          },
          statistic: {
            title: {
              offsetY: -4,
              style: {
                fontSize:'0.733vw',
                color:'#E6F4FF'
              },
              content:'项目营销费用'
            },
            content: {
              offsetY: 4,
              style: {
                whiteSpace: 'pre-wrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                fontSize:'0.833vw',
                color:'#FFFFFF'
              },
              customHtml: (container, view, datum, data) => {
                const text = '¥'+this.tool.formatAmount(this.tool.unitConversion(data[0].totalamount,10000),2)+this.$t('万')
                return text
              },
            },
          },
          legend: {
            position:'right',
            offsetY:2,
            itemName:{
              style:{
                fill:'#CFDCE5'
              }
            },
            pageNavigator:{
              marker: {
                style: {
                  // 非激活，不可点击态时的填充色设置
                  inactiveFill: '#fff',
                  inactiveOpacity: 1,
                  // 默认填充色设置
                  fill: '#fff',
                  opacity: 1,
                  size: 10,
                },
                text: {
                  style: {
                    // 非激活，不可点击态时的填充色设置
                    inactiveFill: '#fff',
                    inactiveOpacity: 1,
                    // 默认填充色设置
                    fill: '#fff',
                    opacity: 1,
                    size: 10,
                  },
                },
              },
            }
          },
          // 添加 中心统计文本 交互
          // interactions: [{ type: 'element-single-selected' },{ type: 'element-active' }],
        });
        this.proMap.render();
      } else {
        this.proMap.changeData(this.proData)
      }
    },
    onChange(init){
      if (this.btnTitle == '客户'){
        if (init){
          this.btnTitle = '项目'
          this.cusInit(false)
        }else {
          this.proInit(false)
        }
      }else {
        if (init){
          this.btnTitle = '客户'
          this.proInit(false)
        }else {
          this.cusInit(false)
        }
      }
    }
  }
}
</script>

<style scoped>
.btn-title-style{
  font-weight: 400;
  font-size: 0.729vw;
  color: #6CD2A1;
  text-decoration:underline
}
</style>