修改

src/components/work/todayData.vue

@@ -51,7 +51,9 @@
     flex-wrap: wrap;
     display: -webkit-flex;
   }
-
+  .Data_TotalTu{
+    display:flex;
+  }
   .Data_List {
     box-sizing: border-box;
     flex: 0 0 18.5%;
@@ -60,7 +62,8 @@
     margin: 0 24px 24px 0;
     font-size: 14px;
   }
-  .Data_List2{
+
+  .Data_List2 {
     box-sizing: border-box;
     flex: 0 0 18.5%;
     padding: 32px;
@@ -68,6 +71,7 @@
     margin: 0 19px 24px 0;
     font-size: 14px;
   }
+
   .Data_Inner {
     height: 136px;
   }
@@ -125,7 +129,7 @@
     width: 30px;
     display: inline-block;
     text-align: right;
-    margin-right:5px;
+    margin-right: 5px;
   }
 
   .label_Number {
@@ -145,20 +149,23 @@
     display: inline-block;
     width: 60px;
   }
+
   .topselect {
     ::v-deep {
       .el-input__inner {
-        height: 40px!important;
+        height: 40px !important;
       }
     }
   }
-  .Data_ListBottom{
+
+  .Data_ListBottom {
     box-sizing: border-box;
     padding: 32px;
     background-color: #fff;
     margin: 0 24px 24px 0;
     font-size: 14px;
   }
+
 </style>
 <template>
   <div class="todayData">
@@ -167,8 +174,9 @@
         平台数据
       </div>
       <div style="display:flex;">
-        <el-date-picker v-model="dateList" style="width:380px;" type="daterange" :picker-options="pickerOptions0" align="right" value-format="yyyy-MM-dd" @change="searchData"
-          unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+        <el-date-picker v-model="dateList" style="width:380px;" type="daterange" :picker-options="pickerOptions0"
+          align="right" value-format="yyyy-MM-dd" @change="searchData" unlink-panels range-separator="至"
+          start-placeholder="开始日期" end-placeholder="结束日期">
         </el-date-picker>
         <el-select v-if="IsShowEmpQuery" class="topselect" v-model="msg.empList" @change="searchData"
           style="width:180px;margin-left:10px;" collapse-tags multiple filterable placeholder="请选择">
@@ -177,12 +185,13 @@
         </el-select>
       </div>
     </div>
-    <div class="Check_Content" v-if="(IsQueryAuth||CurrentUserInfo.IsMarket==1)||(IsQueryAuth||CurrentUserInfo.IsCourseConsultant==1)">
+    <div class="Check_Content"
+      v-if="(IsQueryAuth||CurrentUserInfo.IsMarket==1)||(IsQueryAuth||CurrentUserInfo.IsCourseConsultant==1)">
       <div class="Check_ListContent">
         <div class="Check_Item" v-if="IsQueryAuth||CurrentUserInfo.IsMarket==1" @click="getSwitch(1)"
           :class="{'toDayCkclass':comType==1}">市场部数据统计</div>
-        <div class="Check_Item" v-if="IsQueryAuth||CurrentUserInfo.IsCourseConsultant==1"
-          @click="getSwitch(2)" :class="{'toDayCkclass':comType==2}">课程顾问部统计</div>
+        <div class="Check_Item" v-if="IsQueryAuth||CurrentUserInfo.IsCourseConsultant==1" @click="getSwitch(2)"
+          :class="{'toDayCkclass':comType==2}">课程顾问部统计</div>
       </div>
     </div>
     <div v-show="comType==1">
@@ -665,15 +674,17 @@
     <div style="display:none;">
       <div class="Check_Map">
         <div class="check_Title">统计数据</div>
-        <div class="Data_ListContent">
-          <div class="Data_ListBottom" style="width:400px;">
+        <div class="Data_TotalTu">
+          <div class="Data_ListBottom" style="flex: 0 0 60%;">
             <div>
-              <VueApexCharts width="80%" height="105" ref="bing" :options="chartOptions4" :series="series4"></VueApexCharts>
+              <VueApexCharts width="90%" height="405" ref="zhu" :options="chartOptions5" :series="series5">
+              </VueApexCharts>
             </div>
           </div>
-          <div class="Data_ListBottom" style="width:700px;">
+          <div class="Data_ListBottom" style="flex: 0 0 35%;">
             <div>
-              <VueApexCharts width="90%" height="405" ref="zhu" :options="chartOptions5" :series="series5"></VueApexCharts>
+              <VueApexCharts width="80%" height="105" ref="bing" :options="chartOptions4" :series="series4">
+              </VueApexCharts>
             </div>
           </div>
         </div>
@@ -807,49 +818,28 @@
             show: true,
           }
         },
-        series5:[{
-          name: 'Net Profit',
-          data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
-        }, {
-          name: 'Revenue',
-          data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
-        }, {
-          name: 'Free Cash Flow',
-          data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
+        series5: [{
+          data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
         }],
         chartOptions5: {
-          bar: {
-            horizontal: false,
-            columnWidth: '55%',
-            endingShape: 'rounded'
+          plotOptions: {
+            bar: {
+              borderRadius: 4,
+              horizontal: true
+            }
           },
           chart: {
             type: 'bar',
             height: 350
           },
-          stroke: {
-            show: true,
-            width: 2,
-            colors: ['transparent']
+          dataLabels: {
+            enabled: false
           },
           xaxis: {
-            categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
-          },
-          yaxis: {
-            title: {
-              text: '$ (thousands)'
-            }
+            categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
+              'United States', 'China', 'Germany'
+            ],
           },
-           fill: {
-            opacity: 1
-          },
-          tooltip: {
-            y: {
-              formatter: function (val) {
-                return "$ " + val + " thousands"
-              }
-            }
-          }
         },
         yesData: {}, //昨日数据
         employeeList: [],
@@ -862,7 +852,7 @@
           disabledDate(time) {
             return time.getTime() > Date.now() - 8.64e6
           }
-        },  
+        },
       };
     },
     created() {
@@ -896,22 +886,22 @@
       var month = now.getMonth() + 1;
       var day = now.getDate();
       if (month >= 1 && month <= 9) {
-          month = "0" + month;
+        month = "0" + month;
       }
       if (day >= 1 && day <= 9) {
-          day = "0" + day;
+        day = "0" + day;
       }
       this.msg.startTime = year + strLink + month + strLink + '01';
-      this.msg.endTime = year + strLink + month + strLink + day; 
+      this.msg.endTime = year + strLink + month + strLink + day;
       this.dateList.push(year + strLink + month + strLink + '01');
-      this.dateList.push(year + strLink + month + strLink + day); 
+      this.dateList.push(year + strLink + month + strLink + day);
       this.searchData();
     },
     methods: {
       //点击市场和课程顾问切换
-      getSwitch(type){
-        this.comType=type;
-        this.msg.empList=[];
+      getSwitch(type) {
+        this.comType = type;
+        this.msg.empList = [];
         this.searchData();
       },
       //获取员工列表
@@ -977,7 +967,7 @@
         if (this.dateList && this.dateList.length > 0) {
           this.msg.startTime = this.dateList[0];
           this.msg.endTime = this.dateList[1];
-        }else{
+        } else {
           this.msg.startTime = "";
           this.msg.endTime = "";
         }
@@ -994,7 +984,7 @@
               this.series[2].data.push(x.TrialLessonCount);
               this.chartOptions.xaxis.categories.push(x.DayStr);
             })
-            
+
             setTimeout(() => {
               this.$refs.apex.updateOptions(this.chartOptions)
               this.$refs.apex.updateSeries(this.series)
@@ -1004,4 +994,5 @@
       },
     }
   }
-</script>
\ No newline at end of file
+
+</script>