111

src/components/nannyData.vue

@@ -188,9 +188,9 @@
               <div class="chart-title-left">城市数据汇总</div>
               <div class="chart-title-right">
                 <el-radio-group
-                  v-model="cityDataType"
+                  v-model="cityDateType"
                   size="mini"
-                  @input="cityDataChange"
+                  @input="cityDateChange"
                 >
                   <el-radio-button label="1">昨日</el-radio-button>
                   <el-radio-button label="2">当月</el-radio-button>
@@ -200,7 +200,7 @@
             </div>
             <div class="chart-title chart-title1">
               <div class="chart-yeji">
-                <el-tabs v-model="activeTabb" @tab-click="handleClickChange">
+                <el-tabs v-model="cityDataType" @tab-click="cityDataChange">
                   <el-tab-pane label="业绩" name="1"></el-tab-pane>
                   <el-tab-pane label="订单量" name="2"></el-tab-pane>
                   <el-tab-pane label="客单价" name="3"></el-tab-pane>
@@ -209,11 +209,17 @@
               </div>
 
               <div>
-                <el-select v-model="value" clearable placeholder="全部渠道"  @change="handleSelectChange" >
+                <el-select
+                  v-model="channel"
+                  clearable
+                  placeholder="全部渠道"
+                  @change="handleSelectChange"
+                >
                   <el-option
                     v-for="item in sourceList"
                     :key="item.id"
                     :value="item.sourceName"
+                    :label="item.sourceName"
                   >
                   </el-option>
                 </el-select>
@@ -265,30 +271,18 @@
                     </template>
                   </el-table-column>
 
-                  <el-table-column prop="name">
+                  <el-table-column prop="serviceModel">
                     <template slot-scope="scope">
                       <span style="margin-left: 10px">{{
-                        scope.row.name
+                        scope.row.serviceModel
                       }}</span>
                     </template>
                   </el-table-column>
-                  <el-table-column
-                    prop="averageOrderValue"
-                    label="客单价"
-                    width="80"
-                  >
+                  <el-table-column prop="kdj" label="客单价" width="80">
                   </el-table-column>
-                  <el-table-column
-                    prop="contractStatus"
-                    label="合同状态"
-                    width="80"
-                  >
+                  <el-table-column prop="count" label="成单数量" width="80">
                   </el-table-column>
-                  <el-table-column
-                    prop="contractedAmount"
-                    label="签约金额"
-                    width="80"
-                  >
+                  <el-table-column prop="payAmount" label="签约金额" width="80">
                   </el-table-column>
                 </el-table>
               </div>
@@ -320,12 +314,12 @@ export default {
   },
   data() {
     return {
-      serviceOrderType: 1,
-      cityDataType: 1,
-      activeTabb: 1,
-      value: "",
-
       activeTab: "1",
+      serviceOrderType: 3,
+      cityDateType: 3,
+      cityDataType: "1",
+      channel: "",
+      channelId: "",
       charts: null,
       options: {
         tooltip: {
@@ -358,22 +352,7 @@ export default {
             margin: 10
           },
           type: "category",
-          data: [
-            "上海",
-            "正山门",
-            "观音崖",
-            "感恩阁",
-            "仙桥",
-            "上海",
-            "正山门",
-            "观音崖",
-            "感恩阁",
-            "仙桥",
-            "上海",
-            "正山门",
-            "观音崖",
-            "感恩阁"
-          ],
+          data: [],
           axisTick: {
             //y轴刻度线
             show: false
@@ -424,7 +403,7 @@ export default {
               }
             },
             label: {
-              formatter: "{c}人",
+              formatter: "{c}",
               right: "3%",
               show: true,
               textStyle: {
@@ -436,23 +415,7 @@ export default {
             },
             //设置柱的宽度
             barWidth: 18,
-            data: [
-              820,
-              832,
-              901,
-              934,
-              500,
-              500,
-              600,
-              500,
-              820,
-              832,
-              901,
-              934,
-              500,
-              500,
-              600
-            ]
+            data: []
           }
         ]
       },
@@ -483,83 +446,11 @@ export default {
             label: {
               formatter: "{b}: {d}%"
             },
-            data: [
-              {
-                value: 1048,
-                name: "搜索引擎"
-              },
-              {
-                value: 735,
-                name: "直接访问"
-              },
-              {
-                value: 580,
-                name: "邮件营销"
-              },
-              {
-                value: 484,
-                name: "联盟广告"
-              },
-              {
-                value: 300,
-                name: "视频广告"
-              },
-              {
-                value: 484,
-                name: "月嫂广告"
-              },
-              {
-                value: 300,
-                name: "代办广告"
-              }
-            ]
+            data: []
           }
         ]
       },
-      tableData: [
-        {
-          name: "代班钟点工",
-          averageOrderValue: "2255",
-          contractStatus: "12",
-          contractedAmount: "525856"
-        },
-        {
-          name: "钟点工",
-          averageOrderValue: "2255",
-          contractStatus: "12",
-          contractedAmount: "525856"
-        },
-        {
-          name: "普通家务保姆",
-          averageOrderValue: "2255",
-          contractStatus: "12",
-          contractedAmount: "525856"
-        },
-        {
-          name: "代班保姆工",
-          averageOrderValue: "2255",
-          contractStatus: "12",
-          contractedAmount: "525856"
-        },
-        {
-          name: "育儿嫂",
-          averageOrderValue: "2255",
-          contractStatus: "12",
-          contractedAmount: "525856"
-        },
-        {
-          name: "代班保姆工",
-          averageOrderValue: "2255",
-          contractStatus: "12",
-          contractedAmount: "525856"
-        },
-        {
-          name: "月嫂",
-          averageOrderValue: "2255",
-          contractStatus: "12",
-          contractedAmount: "525856"
-        }
-      ],
+      tableData: [],
       citydata: null,
       serviceData: null,
       nannyData: {},
@@ -593,7 +484,7 @@ export default {
       Service.$axiosGetNannyData()
         .then(res => {
           this.nannyData = res.data.data;
-          console.log(res.data.data);
+          // console.log(res.data.data);
         })
         .catch(err => {
           console.log(err);
@@ -601,12 +492,17 @@ export default {
     },
     getCityData() {
       let params = {
-        dateType: 1,
-        dataType: 1
+        dateType: this.cityDateType,
+        dataType: this.cityDataType,
+        channelId: this.channelId
       };
       Service.$axiosGetNannyCityStation(params)
         .then(res => {
-          console.log(res.data);
+          if (res.data.errno == 0) {
+            this.options.yAxis.data = res.data.data.cityList.reverse();
+            this.options.series[0].data = res.data.data.data.reverse();
+            this.initBarChart();
+          }
         })
         .catch(err => {
           console.log(err);
@@ -614,34 +510,49 @@ export default {
     },
     getServiceData() {
       let params = {
-        dateType: 1
+        dateType: this.serviceOrderType
       };
       Service.$axiosGetNannyServiceMode(params)
-        .then(res => {})
+        .then(res => {
+          if (res.data.errno == 0) {
+            // console.log("服务模式", res.data.data);
+            // console.log("服务模式1", res.data.data.serviceModelZb);
+            // console.log("服务模式2", res.data.data.serviceModel);
+            this.tableData = res.data.data.serviceModel.reverse();
+            this.option.series[0].data = res.data.data.serviceModelZb.reverse();
+            this.initPieChart();
+          }
+        })
         .catch(err => {});
     },
- 
-    handleClickChange(tab, event) {
-      console.log("activeTabb",this.activeTabb);
-      // console.log(tab, event);
-      console.log(tab.name);
-      // if (tab.name == 2) {
-      //   this.getServiceOrderPic(1, this.serviceOrderType);
-      // } else if (tab.name == 3) {
-      //   this.getServiceOrderPic(2, this.finishOrderType);
-      // }
+
+    cityDataChange(tab, event) {
+      console.log("cityDataType", this.cityDataType);
+      this.getCityData();
+    },
+    cityDateChange(val) {
+      console.log(this.cityDateType);
+      this.getCityData();
     },
-    cityDataChange(val) {
-      console.log(val);
+    //选中的渠道id
+    handleSelectChange(newValue) {
+      // newValue是当前选中的sourceName
+      const selectedOption = this.sourceList.find(
+        item => item.sourceName === newValue
+      );
+      if (selectedOption) {
+        const id = selectedOption.id;
+        console.log("选中项的ID是:", id);
+        this.channelId = id;
+        console.log(this.channelId);
+        this.getCityData();
+      }
     },
     serviceOrderChange(val) {
-      console.log(val);
+      // console.log(val);
+      console.log(this.serviceOrderType);
+      this.getServiceData();
     },
-    handleSelectChange(newVal) {
-    // 处理选中变化的逻辑
-    console.log('选中的渠道名称是:', newVal);
-    // 根据新的选中值执行操作
-  },
     handleTabClick(tab) {},
     initPieChart() {
       this.chartInstance = echarts.init(this.$refs.chartContainer);
@@ -662,15 +573,6 @@ export default {
         this.charts.dispose();
         this.charts = null;
       }
-    },
-    fn(index) {
-      this.num = index;
-    },
-    changeCityData(index) {
-      this.citydata = index;
-    },
-    changeServiceData(index) {
-      this.serviceData = index;
     }
   }
 };
@@ -705,7 +607,10 @@ export default {
   width: 0;
   height: 0;
   border: 8px solid transparent;
-  border-bottom: 8px solid red;
+  border-top: 8px solid red;
+  margin-top: 4px;
+  position: relative;
+  top: 6px;
 }
 .reda {
   color: red;