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

<template>
  <div>
    <borderTemplate borderBox="width: 33.333vw;height: 35.417vw;" title="销售漏斗" detailTitle="查看详情">
      <template slot="content">
        <div style="display: flex;justify-content: space-between">
          <div>
            <el-checkbox v-model="param.content.where.unfinish">包含失败、结案项目</el-checkbox>
          </div>
          <div>
            <el-select v-model="param.content.dateType"  class="inline-16" size="small" @change="listData" :popper-append-to-body="false">
              <el-option :label="$t('全部')" value="全部"></el-option>
              <el-option :label="$t('本年')" value="本年"></el-option>
              <el-option :label="$t('本季')" value="本季"></el-option>
              <el-option :label="$t('本月')" value="本月"></el-option>
              <el-option :label="$t('去年')" value="去年"></el-option>
            </el-select>
          </div>
        </div>
        <div>
          <funnelBox style="margin-top: 0.625vw;" v-for="(item,index) in colorSet"  :key="item.index" :width="width - (index * 1.042)" :background="item"></funnelBox>
        </div>
      </template>
    </borderTemplate>
  </div>
</template>

<script>
import borderTemplate from '../components/borderTemplate'
import funnelBox from "../components/funnelBox";
export default {
  name: "salesFunnel",
  components:{borderTemplate,funnelBox},
  data(){
    return {
      param:{
        id:20230630151504,
        content:{
          dataid:'',
          dateType:'',
          type:"",
          where:{
            isleave:'1',
            unfinish:''
          }
        }
      },
      list:[],
      width:'23.958',
      colorSet:['#40DCF2','#3685FC','#7367F2','#6CD2A1','#ECB937','#EC6D37']
    }
  },
  methods:{
    async listData(){
      const res = await this.$api.requested(this.param)
      this.list = res.data
    }
  }
}
</script>

<style scoped>

</style>