Skip to content

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

1

parent e644e1e2
Hide whitespace changes
Inline Side-by-side
Showing with 335 additions and 0 deletions
src/components/work/todayData.vue 0 → 100644
View file @ 6c7fe394
<style lang="scss" scoped>
.todayData {
background-color: #F7F7F7;
height: 100%;
padding: 0 20px 20px 20px;
margin-top: 20px;
}
.todayTop {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
align-items: center;
}
.Check_Content {
display: flex;
background-color: #fff;
padding: 20px 32px;
height: 64px;
box-sizing: border-box;
border-radius: 12px;
}
.Check_ListContent {
display: flex;
justify-content: flex-start;
align-items: center;
}
.Check_Item {
margin-right: 30px;
font-size: 17px;
color: rgba(0, 0, 0, .55);
font-weight: 400;
cursor: pointer;
}
.ckedClass {
font-weight: 500;
color: rgba(0, 0, 0, .9);
}
.check_Title {
font-size: 17px;
font-weight: 500;
margin: 20px 0;
}
.Data_ListContent {
display: flex;
flex-wrap: wrap;
display: -webkit-flex;
}
.Data_List {
box-sizing: border-box;
flex: 1;
padding: 32px;
background-color: #fff;
margin-right: 24px;
font-size: 14px;
}
.Data_Inner {
height: 136px;
}
.Data_Title {
font-size: 17px;
font-weight: 500;
}
.Data_Time {
font-size: 14px;
color: rgba(0, 0, 0, .5);
margin-top: 3px;
}
.Data_wrapper {
display: flex;
height: 84px;
justify-content: space-around;
align-items: flex-end;
}
.Data_Left {
flex: 1;
margin-right: 10px;
color: rgba(0, 0, 0, .9);
}
.Data_Span {
font-size: 24px;
vertical-align: text-bottom;
}
.Data_Ci {
font-size: 14px;
color: #999;
vertical-align: 2px;
margin-left: 8px;
}
.Data_Right {
width: 95px;
}
.Data_One {
margin-top: 3px;
display: flex;
font-size: 14px;
}
.label_Day {
color: rgba(0, 0, 0, .5);
font-size: 14px;
width: 20px;
}
.label_Number {
flex: 1 1 0%;
color: #fa5151;
}
.label_Cule{
flex:1 1 0%;
color:#fa5151;
}
.greenClass{
color:#00ce8b!important;
}
</style>
<template>
<div class="todayData">
<div class="todayTop">
<div class="q-my-md text-dark" style="font-size:20px">
平台数据
</div>
<div>
<el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</div>
</div>
<div class="Check_Content">
<div class="Check_ListContent">
<div class="Check_Item" @click="getCheck(1)" :class="{'ckedClass':comType==1}">市场部数据统计</div>
<div class="Check_Item" @click="getCheck(2)" :class="{'ckedClass':comType==2}">课程顾问部统计</div>
</div>
</div>
<div class="Check_Map">
<div class="check_Title">今日实时数据</div>
<div class="">
<VueApexCharts type="line" height="350" :options="chartOptions" ref="apex" :series="series"></VueApexCharts>
</div>
</div>
<div class="Check_Map" v-if="yesData">
<div class="check_Title">访问核心数据</div>
<div class="Data_ListContent" style="width:300px;">
<div class="Data_List">
<div class="Data_Inner">
<div class="Data_Title">日访问人数</div>
<div class="Data_Time">{{yesData.DayStr}} 周四</div>
<div class="Data_wrapper">
<div class="Data_Left">
<span class="Data_Span">{{yesData.VisitCount}}</span>
<span class="Data_Ci">次</span>
</div>
<div class="Data_Right">
<div class="Data_One">
<span class="label_Day">日</span>
<span class="label_Cule" :class="{'greenClass':getVisitCount(yesData.ClueCount,yesData.YestodayVisit)>0}">
{{getVisitCount(yesData.ClueCount,yesData.YestodayVisit)}}%
</span>
</div>
<div class="Data_One">
<span class="label_Day">周</span>
<span class="label_Cule" :class="{'greenClass':getVisitCount(yesData.CurWeekVisit,yesData.LastWeekVisit)>0}">
{{getVisitCount(yesData.CurWeekVisit,yesData.LastWeekVisit)}}%
</span>
</div>
<div class="Data_One">
<span class="label_Day">月</span>
<span class="label_Cule" :class="{'greenClass':getVisitCount(yesData.CurMonthVisit,yesData.LastMonthVisit)>0}">
{{getVisitCount(yesData.CurMonthVisit,yesData.LastMonthVisit)}}%
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import VueApexCharts from "vue-apexcharts";
import {
MarketStatic
} from '../../api/work/index'
export default {
components: {
VueApexCharts
},
data() {
return {
value2: "",
comType: 1,
series: [{
name: "新增条数",
data: []
},
{
name: "到访人数",
data: []
},
{
name: '试听人数',
data: []
}
],
chartOptions: {
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
},
background: '#fff'
},
dataLabels: {
enabled: false
},
stroke: {
width: [2, 2, 2],
curve: 'smooth',
// dashArray: [0, 8, 5] //虚线展示
},
title: {
text: '数据统计',
align: 'left'
},
legend: {
tooltipHoverFormatter: function (val, opts) {
return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + ''
}
},
markers: {
size: 0,
hover: {
sizeOffset: 6
}
},
xaxis: {
type: 'datetime', //设置X轴的类型 三种可选：category、datetime、numeric
labels: {
format: "MM-dd" //设置X轴时间格式
}
},
//设置X轴的时间
labels: [],
tooltip: {
y: [{
title: {
formatter: function (val) {
return val
}
}
},
{
title: {
formatter: function (val) {
return val
}
}
},
{
title: {
formatter: function (val) {
return val;
}
}
}
]
},
grid: {
borderColor: '#f1f1f1'
},
},
yesData: {}, //昨日数据
};
},
mounted() {
this.getData();
},
computed:{
},
methods: {
//获取访问量
getVisitCount(num,total){
if(this.yesData){
num = parseFloat(num);
total = parseFloat(total);
if (isNaN(num) || isNaN(total)) {
return "-";
}
return total <= 0 ? "0" : (Math.round(num / total * 10000) / 100.00);
}
},
//点击
getCheck(type) {
this.comType = type;
},
//获取数据
getData() {
MarketStatic({}).then(res => {
if (res.Code == 1) {
let tempData = res.Data.dayList;
this.yesData = res.Data.YesDataObj;
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.labels.push(x.DayStr);
})
setTimeout(() => {
this.$refs.apex.updateSeries(this.series)
}, 100)
}
});
}
}
}
</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