Skip to content

C
confucius
Commit a44e32b0 authored by zhengke's avatar zhengke
Browse files
Options

修改

parent aa562e82
Hide whitespace changes
Inline Side-by-side
Showing with 50 additions and 59 deletions
src/components/work/todayData.vue
View file @ a44e32b0
...@@ -51,7 +51,9 @@ ...@@ -51,7 +51,9 @@
flex-wrap: wrap; flex-wrap: wrap;
display: -webkit-flex; display: -webkit-flex;
} }
.Data_TotalTu{
display:flex;
}
.Data_List { .Data_List {
box-sizing: border-box; box-sizing: border-box;
flex: 0 0 18.5%; flex: 0 0 18.5%;
...@@ -60,7 +62,8 @@ ...@@ -60,7 +62,8 @@
margin: 0 24px 24px 0; margin: 0 24px 24px 0;
font-size: 14px; font-size: 14px;
} }
.Data_List2{
.Data_List2 {
box-sizing: border-box; box-sizing: border-box;
flex: 0 0 18.5%; flex: 0 0 18.5%;
padding: 32px; padding: 32px;
...@@ -68,6 +71,7 @@ ...@@ -68,6 +71,7 @@
margin: 0 19px 24px 0; margin: 0 19px 24px 0;
font-size: 14px; font-size: 14px;
} }
.Data_Inner { .Data_Inner {
height: 136px; height: 136px;
} }
...@@ -125,7 +129,7 @@ ...@@ -125,7 +129,7 @@
width: 30px; width: 30px;
display: inline-block; display: inline-block;
text-align: right; text-align: right;
margin-right:5px; margin-right: 5px;
} }
.label_Number { .label_Number {
...@@ -145,20 +149,23 @@ ...@@ -145,20 +149,23 @@
display: inline-block; display: inline-block;
width: 60px; width: 60px;
} }
.topselect { .topselect {
::v-deep { ::v-deep {
.el-input__inner { .el-input__inner {
height: 40px!important; height: 40px !important;
} }
} }
} }
.Data_ListBottom{
.Data_ListBottom {
box-sizing: border-box; box-sizing: border-box;
padding: 32px; padding: 32px;
background-color: #fff; background-color: #fff;
margin: 0 24px 24px 0; margin: 0 24px 24px 0;
font-size: 14px; font-size: 14px;
} }
</style> </style>
<template> <template>
<div class="todayData"> <div class="todayData">
...@@ -167,8 +174,9 @@ ...@@ -167,8 +174,9 @@
平台数据 平台数据
</div> </div>
<div style="display:flex;"> <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" <el-date-picker v-model="dateList" style="width:380px;" type="daterange" :picker-options="pickerOptions0"
unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> align="right" value-format="yyyy-MM-dd" @change="searchData" unlink-panels range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker> </el-date-picker>
<el-select v-if="IsShowEmpQuery" class="topselect" v-model="msg.empList" @change="searchData" <el-select v-if="IsShowEmpQuery" class="topselect" v-model="msg.empList" @change="searchData"
style="width:180px;margin-left:10px;" collapse-tags multiple filterable placeholder="请选择"> style="width:180px;margin-left:10px;" collapse-tags multiple filterable placeholder="请选择">
...@@ -177,12 +185,13 @@ ...@@ -177,12 +185,13 @@
</el-select> </el-select>
</div> </div>
</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_ListContent">
<div class="Check_Item" v-if="IsQueryAuth||CurrentUserInfo.IsMarket==1" @click="getSwitch(1)" <div class="Check_Item" v-if="IsQueryAuth||CurrentUserInfo.IsMarket==1" @click="getSwitch(1)"
:class="{'toDayCkclass':comType==1}">市场部数据统计</div> :class="{'toDayCkclass':comType==1}">市场部数据统计</div>
<div class="Check_Item" v-if="IsQueryAuth||CurrentUserInfo.IsCourseConsultant==1" <div class="Check_Item" v-if="IsQueryAuth||CurrentUserInfo.IsCourseConsultant==1" @click="getSwitch(2)"
@click="getSwitch(2)" :class="{'toDayCkclass':comType==2}">课程顾问部统计</div> :class="{'toDayCkclass':comType==2}">课程顾问部统计</div>
</div> </div>
</div> </div>
<div v-show="comType==1"> <div v-show="comType==1">
...@@ -665,15 +674,17 @@ ...@@ -665,15 +674,17 @@
<div style="display:none;"> <div style="display:none;">
<div class="Check_Map"> <div class="Check_Map">
<div class="check_Title">统计数据</div> <div class="check_Title">统计数据</div>
<div class="Data_ListContent"> <div class="Data_TotalTu">
<div class="Data_ListBottom" style="width:400px;"> <div class="Data_ListBottom" style="flex: 0 0 60%;">
<div> <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> </div>
<div class="Data_ListBottom" style="width:700px;"> <div class="Data_ListBottom" style="flex: 0 0 35%;">
<div> <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> </div>
</div> </div>
...@@ -807,49 +818,28 @@ ...@@ -807,49 +818,28 @@
show: true, show: true,
} }
}, },
series5:[{ series5: [{
name: 'Net Profit', data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
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]
}], }],
chartOptions5: { chartOptions5: {
bar: { plotOptions: {
horizontal: false, bar: {
columnWidth: '55%', borderRadius: 4,
endingShape: 'rounded' horizontal: true
}
}, },
chart: { chart: {
type: 'bar', type: 'bar',
height: 350 height: 350
}, },
stroke: { dataLabels: {
show: true, enabled: false
width: 2,
colors: ['transparent']
}, },
xaxis: { xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'], categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
}, 'United States', 'China', 'Germany'
yaxis: { ],
title: {
text: '$ (thousands)'
}
}, },
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return "$ " + val + " thousands"
}
}
}
}, },
yesData: {}, //昨日数据 yesData: {}, //昨日数据
employeeList: [], employeeList: [],
...@@ -862,7 +852,7 @@ ...@@ -862,7 +852,7 @@
disabledDate(time) { disabledDate(time) {
return time.getTime() > Date.now() - 8.64e6 return time.getTime() > Date.now() - 8.64e6
} }
}, },
}; };
}, },
created() { created() {
...@@ -896,22 +886,22 @@ ...@@ -896,22 +886,22 @@
var month = now.getMonth() + 1; var month = now.getMonth() + 1;
var day = now.getDate(); var day = now.getDate();
if (month >= 1 && month <= 9) { if (month >= 1 && month <= 9) {
month = "0" + month; month = "0" + month;
} }
if (day >= 1 && day <= 9) { if (day >= 1 && day <= 9) {
day = "0" + day; day = "0" + day;
} }
this.msg.startTime = year + strLink + month + strLink + '01'; 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 + '01');
this.dateList.push(year + strLink + month + strLink + day); this.dateList.push(year + strLink + month + strLink + day);
this.searchData(); this.searchData();
}, },
methods: { methods: {
//点击市场和课程顾问切换 //点击市场和课程顾问切换
getSwitch(type){ getSwitch(type) {
this.comType=type; this.comType = type;
this.msg.empList=[]; this.msg.empList = [];
this.searchData(); this.searchData();
}, },
//获取员工列表 //获取员工列表
...@@ -977,7 +967,7 @@ ...@@ -977,7 +967,7 @@
if (this.dateList && this.dateList.length > 0) { if (this.dateList && this.dateList.length > 0) {
this.msg.startTime = this.dateList[0]; this.msg.startTime = this.dateList[0];
this.msg.endTime = this.dateList[1]; this.msg.endTime = this.dateList[1];
}else{ } else {
this.msg.startTime = ""; this.msg.startTime = "";
this.msg.endTime = ""; this.msg.endTime = "";
} }
...@@ -994,7 +984,7 @@ ...@@ -994,7 +984,7 @@
this.series[2].data.push(x.TrialLessonCount); this.series[2].data.push(x.TrialLessonCount);
this.chartOptions.xaxis.categories.push(x.DayStr); this.chartOptions.xaxis.categories.push(x.DayStr);
}) })
setTimeout(() => { setTimeout(() => {
this.$refs.apex.updateOptions(this.chartOptions) this.$refs.apex.updateOptions(this.chartOptions)
this.$refs.apex.updateSeries(this.series) this.$refs.apex.updateSeries(this.series)
...@@ -1004,4 +994,5 @@ ...@@ -1004,4 +994,5 @@
}, },
} }
} }
</script>
\ No newline at end of file </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment