修改

src/components/work/todayData.vue

@@ -57,7 +57,7 @@
   .Data_List {
     box-sizing: border-box;
     flex: 0 0 18.5%;
-    padding: 32px;
+    padding: 21px;
     background-color: #fff;
     margin: 0 24px 24px 0;
     font-size: 14px;
@@ -671,19 +671,29 @@
         </div>
       </div>
     </div>
-    <div style="display:none;">
+    <div v-if="comType==1">
       <div class="Check_Map">
         <div class="check_Title">统计数据</div>
         <div class="Data_TotalTu">
           <div class="Data_ListBottom" style="flex: 0 0 60%;">
+            <div style="margin-bottom:20px;">
+              <el-button size="mini" :type="btnHui2" @click="getBar(1)">回单</el-button>
+              <el-button size="mini" :type="btnVisit2" @click="getBar(2)">到访</el-button>
+              <el-button size="mini" :type="btnHetong2" @click="getBar(3)">合同</el-button>
+            </div>
             <div>
               <VueApexCharts width="90%" height="405" ref="zhu" :options="chartOptions5" :series="series5">
               </VueApexCharts>
             </div>
           </div>
           <div class="Data_ListBottom" style="flex: 0 0 35%;">
-            <div>
-              <VueApexCharts width="80%" height="105" ref="bing" :options="chartOptions4" :series="series4">
+            <div style="margin-bottom:40px;">
+              <el-button size="mini" :type="btnHui" @click="getPie(1)">回单</el-button>
+              <el-button size="mini" :type="btnVisit" @click="getPie(2)">到访</el-button>
+              <el-button size="mini" :type="btnHetong" @click="getPie(3)">合同</el-button>
+            </div>
+            <div style="margin-left:50px;">
+              <VueApexCharts width="80%" height="205" ref="bing" :options="chartOptions4" :series="series4">
               </VueApexCharts>
             </div>
           </div>
@@ -794,9 +804,9 @@
             borderColor: '#f1f1f1'
           },
         },
-        series4: [4, 3, 2],
+        series4: [],
         chartOptions4: {
-          labels: ["名单人数", "开单奖励", "线索奖励"],
+          labels: ['个人直客','同业介绍','学员转介绍','内部介绍'],
           chart: {
             type: "donut",
             width: 40,
@@ -819,7 +829,7 @@
           }
         },
         series5: [{
-          data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
+          data: []
         }],
         chartOptions5: {
           plotOptions: {
@@ -836,9 +846,7 @@
             enabled: false
           },
           xaxis: {
-            categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
-              'United States', 'China', 'Germany'
-            ],
+            categories: [],
           },
         },
         yesData: {}, //昨日数据
@@ -853,6 +861,14 @@
             return time.getTime() > Date.now() - 8.64e6
           }
         },
+        pieData:[], //饼数据
+        btnHui:'primary',
+        btnVisit:'',
+        btnHetong:'',
+        btnHui2:'primary',
+        btnVisit2:'',
+        btnHetong2:'',
+        barData:[] //柱状图数据
       };
     },
     created() {
@@ -898,6 +914,96 @@
       this.searchData();
     },
     methods: {
+      //点击饼切换
+      getPie(type){
+        if(type==1){
+          this.btnHui='primary'
+          this.btnVisit=''
+          this.btnHetong=''
+          this.series4=[]
+          if(this.pieData.ClueData&&this.pieData.ClueData.length>0){
+            this.pieData.ClueData.forEach(x=>{
+              this.series4.push(x.ClueCount)
+            })
+          }
+        }
+        if(type==2){
+          this.btnVisit='primary'
+          this.btnHui=''
+          this.btnHetong=''
+          this.series4=[]
+          if(this.pieData.VisitData&&this.pieData.VisitData.length>0){
+            this.pieData.VisitData.forEach(x=>{
+              this.series4.push(x.VisitCount)
+            })
+          }
+        }
+        if(type==3){
+          this.btnVisit=''
+          this.btnHui=''
+          this.btnHetong='primary'
+          this.series4=[]
+          if(this.pieData.OrderData&&this.pieData.OrderData.length>0){
+            this.pieData.OrderData.forEach(x=>{
+              this.series4.push(x.OrderCount)
+            })
+          }
+        }
+      },
+      //切换柱状图
+      getBar(type){
+        if(type==1){
+          this.btnHui2='primary'
+          this.btnVisit2=''
+          this.btnHetong2=''
+          this.series5[0].data=[]
+          this.chartOptions5.xaxis.categories=[]
+          if(this.barData.ClueData&&this.barData.ClueData.length>0){
+            this.barData.ClueData.forEach(x=>{
+              this.series5[0].data.push(x.ClueCount)
+              this.chartOptions5.xaxis.categories.push(x.ChannelName)
+            })
+          }
+          setTimeout(() => {
+            this.$refs.zhu.updateOptions(this.chartOptions5)
+            this.$refs.zhu.updateSeries(this.series5)
+          }, 100)
+        }
+        if(type==2){
+          this.btnVisit2='primary'
+          this.btnHui2=''
+          this.btnHetong2=''
+          this.series5[0].data=[]
+          this.chartOptions5.xaxis.categories=[]
+          if(this.barData.VisitData&&this.barData.VisitData.length>0){
+            this.barData.VisitData.forEach(x=>{
+              this.series5[0].data.push(x.VisitCount)
+              this.chartOptions5.xaxis.categories.push(x.ChannelName)
+            })
+          }
+          setTimeout(() => {
+            this.$refs.zhu.updateOptions(this.chartOptions5)
+            this.$refs.zhu.updateSeries(this.series5)
+          }, 100)
+        }
+        if(type==3){
+          this.btnVisit2=''
+          this.btnHui2=''
+          this.btnHetong2='primary'
+          this.series5[0].data=[]
+          this.chartOptions5.xaxis.categories=[]
+          if(this.barData.OrderData&&this.barData.OrderData.length>0){
+            this.barData.OrderData.forEach(x=>{
+              this.series5[0].data.push(x.OrderCount)
+              this.chartOptions5.xaxis.categories.push(x.ChannelName)
+            })
+          }
+          setTimeout(() => {
+            this.$refs.zhu.updateOptions(this.chartOptions5)
+            this.$refs.zhu.updateSeries(this.series5)
+          }, 100)
+        }
+      },
       //点击市场和课程顾问切换
       getSwitch(type) {
         this.comType = type;
@@ -978,16 +1084,42 @@
             this.series[0].data = [];
             this.series[1].data = [];
             this.series[2].data = [];
+            this.series4 = [];
+            this.series5[0].data = [];
+            this.chartOptions5.xaxis.categories=[];
+            this.btnHui='primary'
+            this.btnVisit=''
+            this.btnHetong=''
+            this.btnHui2='primary'
+            this.btnVisit2=''
+            this.btnHetong2=''
             tempData.forEach(x => {
               this.series[0].data.push(x.ClueCount);
               this.series[1].data.push(x.VisitCount);
               this.series[2].data.push(x.TrialLessonCount);
               this.chartOptions.xaxis.categories.push(x.DayStr);
             })
-
+            this.pieData = res.Data.PieData;
+            this.barData = res.Data.BarData;
+            if(this.pieData.ClueData&&this.pieData.ClueData.length>0){
+              this.pieData.ClueData.forEach(x=>{
+                this.series4.push(x.ClueCount)
+              })
+            }
+            if(this.barData.ClueData&&this.barData.ClueData.length>0){
+              this.barData.ClueData.forEach(x=>{
+                this.series5[0].data.push(x.ClueCount)
+                this.chartOptions5.xaxis.categories.push(x.ChannelName);
+              })
+            }
             setTimeout(() => {
               this.$refs.apex.updateOptions(this.chartOptions)
               this.$refs.apex.updateSeries(this.series)
+
+              this.$refs.zhu.updateOptions(this.chartOptions5)
+              this.$refs.zhu.updateSeries(this.series5)
+
+              this.$refs.bing.updateSeries(this.series4)
             }, 500)
           }
         });

src/pages/sale/channelDetail.vue

@@ -7,6 +7,9 @@
   .Sysuser_Date .el-range-editor .el-range-input {
     background: transparent !important;
   }
+  .makeOutDiv .el-table th{
+    background: #f5f6f7;
+  }
 </style>
 <template>
   <div class="page-body">
@@ -34,30 +37,32 @@
         </div>
       </div>
     </div>
-    <el-table :data="dataList" ref="table" style="width: 100%;" :height="tableHeight">
-      <el-table-column label="序号" type="index">
-      </el-table-column>
-      <el-table-column prop="ChannelName" label="渠道名">
-      </el-table-column>
-      <el-table-column prop="ClueCount" label="回单" sortable>
-      </el-table-column>
-      <el-table-column prop="VisitCount" label="到访" sortable>
-      </el-table-column>
-      <el-table-column prop="OrderCount" label="合同数" sortable>
-      </el-table-column>
-      <el-table-column prop="OrderIncome" label="新业绩金额" sortable>
-      </el-table-column>
-      <el-table-column prop="VisitingRate" label="到访率" sortable>
-        <template slot-scope="scope">
-          <span>{{scope.row.VisitingRate}}%</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="ContractRate" label="合同转化率" sortable>
-        <template slot-scope="scope">
-          <span>{{scope.row.ContractRate}}%</span>
-        </template>
-      </el-table-column>
-    </el-table>
+    <div class="makeOutDiv">
+      <el-table :data="dataList" ref="table" style="width: 100%;" :height="tableHeight">
+        <el-table-column label="序号" type="index">
+        </el-table-column>
+        <el-table-column prop="ChannelName" label="渠道名">
+        </el-table-column>
+        <el-table-column prop="ClueCount" label="回单" sortable>
+        </el-table-column>
+        <el-table-column prop="VisitCount" label="到访" sortable>
+        </el-table-column>
+        <el-table-column prop="OrderCount" label="合同数" sortable>
+        </el-table-column>
+        <el-table-column prop="OrderIncome" label="新业绩金额" sortable>
+        </el-table-column>
+        <el-table-column prop="VisitingRate" label="到访率" sortable>
+          <template slot-scope="scope">
+            <span>{{scope.row.VisitingRate}}%</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="ContractRate" label="合同转化率" sortable>
+          <template slot-scope="scope">
+            <span>{{scope.row.ContractRate}}%</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
   </div>
 </template>
 <script>

src/pages/sale/makeupRate.vue

@@ -106,6 +106,10 @@
   .Sysuser_Date .el-range-editor .el-range-input {
     background: transparent !important;
   }
+  .makeOutDiv .el-table th{
+    background: #f5f6f7;
+  }
+
 </style>
 <template>
   <div class="page-body">

src/pages/sale/visitTransform.vue

-<style>
+<style lang="scss">
   .Sysuser_Date .el-input__inner {
     background: transparent !important;
     border: 0 !important;
@@ -7,6 +7,9 @@
   .Sysuser_Date .el-range-editor .el-range-input {
     background: transparent !important;
   }
+  .makeOutDiv .el-table th{
+    background: #f5f6f7;
+  }
 </style>
 <template>
   <div class="page-body">