销售数据新增订单产品类别占比分析

src/views/salesData/index.vue

@@ -54,8 +54,8 @@
           <orderTrendAnalysis ref="orderTrendAnalysis" :dataid="departmentid" :windowWidth="windowWidth" :scrollHeight="scrollData" @backFull="backFull"></orderTrendAnalysis>
           <!--  订单类型占比分析      -->
           <orderType ref="orderType" :dataid="departmentid" :scrollHeight="scrollData" :windowWidth="windowWidth" @backFull="backFull"></orderType>
-          <!--  订单产品类别占比分析      -->
-          <!--        <orderProductCategory ref="orderProductCategory" :dataid="departmentid"></orderProductCategory>-->
+          <!--订单产品类别占比分析-->
+          <orderProductCategory ref="orderProductCategory" :dataid="departmentid" :scrollHeight="scrollData" :windowWidth="windowWidth" @backFull="backFull"></orderProductCategory>
           <!--  出货趋势分析      -->
           <shippingTrendAnalysis ref="shippingTrendAnalysis" :dataid="departmentid" :windowWidth="windowWidth" :scrollHeight="scrollData" @backFull="backFull"></shippingTrendAnalysis>
           <!--  近12月延期出货情况分析      -->
@@ -179,6 +179,11 @@ export default {
       this.$refs.orderType.$refs.departmentSalesperson.person = userName
       this.$refs.orderType.$refs.departmentSalesperson.deplist = this.deplist
       this.$refs.orderType.$refs.departmentSalesperson.personnelList = this.personnelList
+      /*订单产品类别占比分析*/
+      this.$refs.orderProductCategory.listData(dataid)
+      this.$refs.orderProductCategory.$refs.departmentSalesperson.person = userName
+      this.$refs.orderProductCategory.$refs.departmentSalesperson.deplist = this.deplist
+      this.$refs.orderProductCategory.$refs.departmentSalesperson.personnelList = this.personnelList
       /*出货趋势分析*/
       this.$refs.shippingTrendAnalysis.listData(dataid)
       this.$refs.shippingTrendAnalysis.$refs.departmentSalesperson.person = userName
@@ -278,6 +283,13 @@ export default {
       this.$refs.orderType.$refs.departmentSalesperson.deplist = this.deplist
       this.$refs.orderType.$refs.departmentSalesperson.person = type == '0'?dataid:''
       this.$refs.orderType.$refs.departmentSalesperson.personnelList = this.personnelList
+      /*订单产品类别占比分析*/
+      this.$refs.orderProductCategory.param.content.type = type
+      this.$refs.orderProductCategory.queryModel(dataid,isleave)
+      this.$refs.orderProductCategory.$refs.departmentSalesperson.depment = type == '1'?dataid:''
+      this.$refs.orderProductCategory.$refs.departmentSalesperson.deplist = this.deplist
+      this.$refs.orderProductCategory.$refs.departmentSalesperson.person = type == '0'?dataid:''
+      this.$refs.orderProductCategory.$refs.departmentSalesperson.personnelList = this.personnelList
       /*出货趋势分析*/
       this.$refs.shippingTrendAnalysis.param.content.type = type
       this.$refs.shippingTrendAnalysis.queryModel(dataid,isleave)

src/views/salesData/modules/orderProductCategory.vue

@@ -1,22 +1,435 @@
 <template>
-  <div class="div-new-box-new">
-    <div class="content">
-      <div class="div-line"></div>
-      <div class="title"> 订单产品类别占比分析</div>
-    </div>
+  <div class="div-box-new-margin">
+    <div class="div-border-box" id="orderTypeFull">
+      <div class="out">
+        <div>
+          <div class="div-line div-line-right"></div>
+          <div class="title" style="min-width: 220px;"> 订单产品类别占比分析</div>
+        </div>
+        <div class="in">
+          <div class="inline-16 mt-10">
+            <departmentSalesperson ref="departmentSalesperson" @depSelect="depSelect" @personSelect="personSelect" :isFull="isFull"></departmentSalesperson>
+          </div>
+          <div class="mt-10 inline-16">
+            <p class="search__label">状态:</p>
+            <el-select v-model="param.content.where.isleave" clearable style="margin-right:10px" size="small" placeholder="请选择状态" @change="queryModel(param.content.dataid,param.content.where.isleave)" :disabled="param.content.type == '0'">
+              <el-option label="在职" value="1"></el-option>
+              <el-option label="离职" value="2"></el-option>
+            </el-select>
+          </div>
+
+          <div class="mt-10 inline-16">
+            <p class="search__label">订单类型:</p>
+            <el-select v-model="param.content.where.type" clearable style="margin-right:10px" size="small" placeholder="请选择订单类型" @change="queryModel(param.content.dataid,param.content.where.type)" >
+              <el-option v-for="item in ordertypeList" :key="item.index" :label="item.value" :value="item.value"></el-option>
+            </el-select>
+          </div>
+          <div class="mt-10 inline-16">
+            <p class="search__label">领域:</p>
+            <el-select v-model="param.content.where.tradefield" clearable style="margin-right:10px" size="small" placeholder="请选择领域" @change="queryModel(param.content.dataid,param.content.where.tradefield)" >
+              <el-option v-for="item in tradefieldList" :key="item.index" :label="item.value" :value="item.value"></el-option>
+            </el-select>
+          </div>
+          <div class="mt-10 inline-16">
+            <p class="search__label">品牌:</p>
+            <el-select v-model="param.content.where.sa_brandid" clearable style="margin-right:10px" size="small" placeholder="请选择品牌" @change="queryModel(param.content.dataid,param.content.where.sa_brandid)" >
+              <el-option v-for="item in brandList" :key="item.rowindex" :label="item.brandname" :value="item.sa_brandid"></el-option>
+            </el-select>
+          </div>
+          <div class="mt-10 inline-16">
+            <p class="search__label">营销类别:</p>
+            <el-select v-model="param.content.itemclass" clearable style="margin-right:10px" size="small" placeholder="请选择营销类别" @change="queryModel(param.content.dataid,param.content.where.itemclass)" >
+              <el-option label="一级类别" value="一级类别"></el-option>
+              <el-option label="二级类别" value="二级类别"></el-option>
+            </el-select>
+          </div>
 
-    <div class="chart">
-      <!--      <div id="orderAnalysisChart" style="height: 300px;"></div>-->
+          <div class="inline-16 mt-10">
+            <el-button-group >
+              <el-button size="small" :type="type === '金额'?'primary':''" @click="changeType('金额')">金额</el-button>
+              <el-button size="small" :type="type === '数量'?'primary':''" @click="changeType('数量')">数量</el-button>
+            </el-button-group>
+          </div>
+          <div class="inline-16 mt-10">
+            <el-button-group >
+              <el-button size="small" :type="dateType === '全部'?'primary':''" @click="changeTypeDate('全部')">全部</el-button>
+              <el-button size="small" :type="dateType === '本年'?'primary':''" @click="changeTypeDate('本年')">本年</el-button>
+              <el-button size="small" :type="dateType === '本月'?'primary':''" @click="changeTypeDate('本月')">本月</el-button>
+            </el-button-group>
+          </div>
+          <div class="inline-16 mt-10">
+            <el-date-picker
+                v-model="monthDate"
+                type="monthrange"
+                :append-to-body="!isFull"
+                @change="changMonth"
+                :clearable="false"
+                format="yyyy-MM"
+                value-format="yyyy-MM"
+                size="small"
+                range-separator="至"
+                start-placeholder="开始月份"
+                end-placeholder="结束月份">
+            </el-date-picker>
+          </div>
+          <div class="inline-15 mt-10">
+            <exportFile  :param="param" :columns="tablecols" fileName="订单类型占比分析" :dataid="param.content.dataid"></exportFile>
+          </div>
+
+          <fullScreen  domId="orderTypeFull" @onFull="onFull" @backFull="backFull"></fullScreen>
+        </div>
+      </div>
+      <div class="chart" style="height: 416px">
+        <div id="orderProductCategoryChart" style="height: 400px;" :style="{height:heightChart,width:windowWidth < 1355?'48%':windowWidth<1533?'41%':windowWidth<1919?'35%':'35%',float:'left'}"></div>
+        <div style="float: right;" :style="windowWidth<1355?'width:52%':windowWidth<1533?'width:59%':windowWidth<1919?'width:65%':'width:65%'">
+          <tableTemplate style="margin-top: 10px" ref="table" :layout="tablecols" :data="list" :opwidth="200" :custom="true" :height="heightTable" fixedName="operation">
+            <template v-slot:customcol="scope">
+              <p v-if="scope.column.columnname === 'operation'">
+              </p>
+              <p v-else-if="scope.column.columnname === 'qty'">
+                <span> {{scope.column.data[scope.column.columnname] == 0?0:scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:'--'}}</span>
+              </p>
+              <p v-else-if="scope.column.columnname === 'itemclassqty'">
+                <span> {{scope.column.data[scope.column.columnname] == 0?0:scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:'--'}}</span>
+              </p>
+              <p v-else-if="scope.column.columnname === 'amount'">
+                <span>¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}</span>
+              </p>
+              <p v-else-if="scope.column.columnname === 'itemclassamount'">
+                <span>¥{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}</span>
+              </p>
+              <p v-else>{{scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:'--'}}</p>
+            </template>
+            <template v-slot:opreation="scope">
+              <el-button size="mini" type="text"  @click="goDetail(scope.data)" :disabled="isFull">详情</el-button>
+            </template>
+          </tableTemplate>
+          <div  class="container normal-panel" style="text-align:right;float: right">
+            <el-pagination
+                background
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="currentPage"
+                :pager-count="3"
+                :page-sizes="[20, 50,100, 200]"
+                :page-size="20"
+                layout="total,sizes, prev, pager, next, jumper"
+                :total="total">
+            </el-pagination>
+          </div>
+        </div>
+      </div>
     </div>
+
   </div>
 </template>
 
 <script>
+import { Pie,G2,measureTextWidth } from '@antv/g2plot';
+import tableTemplate from '@/views/salesData/components/table';
+import fullScreen from "@/views/salesData/components/fullScreen";
+import exportFile from '@/components/export_file/index'
+import departmentSalesperson from "@/views/salesData/components/departmentSalesperson";
+const G = G2.getEngine('canvas');
 export default {
-  name: "orderProductCategory" //订单产品类别
+  name: "orderProductCategory", //订单产品类别
+  props:['dataid','scrollHeight','windowWidth'],
+  components:{tableTemplate,fullScreen,exportFile,departmentSalesperson},
+  data(){
+    return {
+      chartPie:null,
+      type:'金额',
+      dateType:'全部',
+      monthDate:[],
+      list:[],
+      tablecols:[],
+      currentPage:0,
+      total:0,
+      param:{
+        "id": 20240524160004,
+        "content": {
+          "type": 0,
+          "dataid": 54,
+          "dateType": "",// 本年 本月 日期筛选时为空
+          "dataType":"金额",//金额 数量
+          "itemclass":'一级类别',
+          "pageSize":20,
+          "pageNumber":1,
+          "where":{
+            "begdate":"",
+            "tradefield":"",
+            "enddate":"",
+            "type":"", //订单类型
+            "isleave":"",
+            "itemclassid":'',
+            "sa_brandid":''
+          }
+        }
+      },
+      chartData:[],
+      heightChart:'98%',
+      heightTable:'352px',
+      isFull:false,
+      ordertypeList:[],
+      tradefieldList:[],
+      brandList:[]
+    }
+  },
+  methods:{
+    async listData(val){
+      this.param.content.dataid = val || this.dataid
+      this.param.content.dataType = this.type
+      this.param.content.dateType = this.dateType === '全部'?'':this.dateType
+      const res = await this.$api.requested(this.param)
+      if (res.data.length ===1){
+        if (res.data[0].isEmpty === 1){
+          this.list = []
+          this.total = 0
+          this.currentPage = 0
+        }else {
+          this.list = res.data
+          this.total = res.total
+          this.currentPage = res.pageNumber
+        }
+      }else {
+        this.list = res.data
+        this.total = res.total
+        this.currentPage = res.pageNumber
+      }
+      if (this.type === '金额'){
+        this.totalamount = '¥'+this.tool.formatAmount(res.data[0].ratio[0].total/10000,2)+'万'
+      }else {
+        this.totalamount = res.data[0].ratio[0].total
+      }
+      this.chartData = res.data[0].ratio.map(item=>{
+        return {
+          "totalamount": this.totalamount,//值
+          "type": item.itemclassfullname,
+          "rowindex": item.rowindex,
+          "ratio": Math.round(((item.ratio * 100)*100)/100) //比例
+        }
+      })
+      this.renderPie(val)
+    },
+    async queryModel(val,type){
+      this.param.content.dataid = val || this.dataid
+      this.param.content.where.isleave = type
+      this.param.content.dataType = this.type
+      this.param.content.dateType = this.dateType === '全部'?'':this.dateType
+      const res = await this.$api.requested(this.param)
+      if (res.data.length === 1){
+        if (res.data[0].isEmpty === 1){
+          this.list = []
+          this.total = 0
+          this.currentPage = 0
+        }else {
+          this.list = res.data
+          this.total = res.total
+          this.currentPage = res.pageNumber
+        }
+      }else {
+        this.list = res.data
+        this.total = res.total
+        this.currentPage = res.pageNumber
+      }
+      if (this.type === '金额'){
+        this.totalamount = '¥'+this.tool.formatAmount(res.data[0].ratio[0].total/10000,2)+'万'
+      }else {
+        this.totalamount = res.data[0].ratio[0].total
+      }
+      this.chartData = res.data[0].ratio.map(item=>{
+        return {
+          "totalamount": this.totalamount,//值
+          "type": item.itemclassfullname,
+          "rowindex": item.rowindex,
+          "ratio": Math.round(((item.ratio * 100)*100)/100), //比例
+          "value":item.value
+        }
+      })
+      this.chartPie.changeData(this.chartData)
+    },
+    async queryTable(val,isleave){
+      this.param.content.dataid = val || this.dataid
+      this.param.content.where.isleave = isleave
+      this.param.content.dataType = this.type
+      this.param.content.dateType = this.dateType
+      const res = await this.$api.requested(this.param)
+      this.list = res.data
+      this.total = res.total
+      this.currentPage = res.pageNumber
+    },
+    renderPie(val){
+      console.log(val,'33333')
+      this.chartPie = new Pie('orderProductCategoryChart',{
+        appendPadding: 10,
+        data:this.chartData,
+        angleField: 'ratio',
+        colorField: 'type',
+        radius: 1,
+        innerRadius: 0.6,
+        legend:{
+          position:'bottom',
+          style:{
+            marginLeft:'80px'
+          }
+
+        },
+        label:{
+          /*type: 'inner',
+          offset: '-50%',
+          style: {
+            textAlign: 'center',
+          },
+          autoRotate: false,*/
+          formatter: (datum) => `${datum.ratio}%`,
+        },
+        tooltip: {
+          formatter: (datum) => {
+            return { name: datum.type, value: datum.ratio + '%' };
+          },
+        },
+        interactions: [{ type: 'element-single-selected' },{ type: 'element-active' }],
+        statistic: {
+          title: {
+            offsetY: -4,
+            style: {
+              fontSize:'16px'
+            },
+            content: '总计'
+          },
+          content: {
+            offsetY: 4,
+            style: {
+              whiteSpace: 'pre-wrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              fontSize:'16px'
+            },
+            customHtml: (container, view, datum, data) => {
+              const text = data[0].totalamount;
+              return text;
+            },
+          },
+        },
+      })
+      this.chartPie.on('plot:click',ev=>{
+        const states = this.chartPie.getStates()
+        this.param.content.where.type = states.length ===0 ? '':ev.data.data.type
+        this.param.content.pageNumber = 1
+        this.queryTable(this.param.content.dataid,this.param.content.where.isleave)
+      })
+      this.chartPie.render()
+      this.queryModel(val,this.param.content.where.isleave)
+    },
+    changeType(val){
+      this.type = val
+      this.queryModel(this.param.content.dataid,this.param.content.where.isleave)
+    },
+    /*切换年月*/
+    changeTypeDate(val){
+      this.param.content.where.begdate = ''
+      this.param.content.where.enddate = ''
+      if (val === '本年'){
+        this.monthDate = [new Date().getFullYear() + '-1',new Date().getFullYear() + '-12']
+      }else if (val === '本月'){
+        this.monthDate[0] = new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
+        this.monthDate[1] = new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
+        this.monthDate = [new Date().getFullYear() + '-' + (new Date().getMonth() + 1),new Date().getFullYear() + '-' + (new Date().getMonth() + 1)]
+      }else {
+        this.monthDate[0] = ''
+        this.monthDate[1] = ''
+        this.monthDate = []
+      }
+      this.dateType = val
+      this.queryModel(this.param.content.dataid,this.param.content.where.isleave)
+    },
+    changMonth(){
+      this.dateType = ''
+      this.param.content.where.begdate = this.monthDate[0]
+      this.param.content.where.enddate = this.monthDate[1]
+      this.queryModel(this.param.content.dataid,this.param.content.where.isleave)
+    },
+    handleSizeChange(val) {
+      // console.log(`每页 ${val} 条`);
+      this.param.content.pageSize = val
+      this.queryTable(this.param.content.dataid,this.param.content.where.isleave)
+    },
+    handleCurrentChange(val) {
+      // console.log(`当前页: ${val}`);
+      this.param.content.pageNumber = val
+      this.queryTable(this.param.content.dataid,this.param.content.where.isleave)
+    },
+    goDetail(data){
+      setTimeout(() => {
+        this.$store.dispatch('changeDetailDrawer',true)
+        let route = this.$route
+        if (route.path !== '/orderdetail') {
+          this.oldRoute = {path:route.path,query:route.query}
+          this.$store.dispatch('setHistoryRouter',this.oldRoute)
+        }
+        this.$router.push({
+          path:'/orderdetail',
+          query:{
+            id:data.sa_orderid,
+            portrait:''
+          }
+        })
+      })
+    },
+    /*全屏*/
+    onFull(){
+      this.heightChart = 'calc(100vh - 85px)'
+      this.heightTable ='calc(100vh - 125px)'
+      this.isFull = true
+    },
+    /*退出全屏*/
+    backFull(val){
+      this.heightChart = '98%'
+      this.heightTable = '352px'
+      this.isFull = false
+      this.$emit('backFull',val)
+    },
+    /*选择部门*/
+    depSelect(val){
+      this.param.content.type = 1
+      this.param.content.dataid = val
+      this.queryModel(val,this.param.content.where.isleave,this.param.content.where.isleave)
+    },
+    /*选择业务员*/
+    personSelect(val){
+      this.param.content.where.isleave = ''
+      this.param.content.type = 0
+      this.param.content.dataid = val
+      this.queryModel(val,this.param.content.where.isleave,this.param.content.where.isleave)
+    },
+
+  },
+  async mounted() {
+    /*获取领域*/
+    const res = await this.$store.dispatch('optiontypeselect','tradefield')
+    /*获取订单类型*/
+    const res1 = await this.$store.dispatch('optiontypeselect','ordertype')
+    this.tradefieldList = res.data
+    console.log(this.tradefieldList,'领域')
+    this.ordertypeList = res1.data
+    console.log(this.ordertypeList,'订单类型')
+    /*获取品牌*/
+    let param = {
+      "id": 20240527112804,
+      "content": {
+      }
+    }
+    const res2 = await this.$api.requested(param)
+    this.brandList = res2.data
+    console.log(this.brandList,'品牌')
+  },
+  created() {
+    this.tablecols = this.tool.tabelCol(this.$route.name).orderProductCategoryTable.tablecols
+  }
 }
 </script>
 
+
 <style scoped>
 
 </style>