Skip to content

C
CRM
Commit 68cb7a01 authored by zhengke's avatar zhengke
Browse files
Options

增加特殊节假日统计

parent 93165a34
Show whitespace changes
Inline Side-by-side
Showing with 409 additions and 0 deletions
src/components/statistics/festivalOrderList.vue 0 → 100644
View file @ 68cb7a01
<style>
.festivalOrder{
height: calc(100% - 25px);
}
.statistics-title {
font-size: 24px;
color: #111;
margin-bottom: 30px;
font-family: perfectFont;
}
.festivalOrder .conten-box{
display: flex;
flex-direction: column;
height: calc(100% - 62px);
}
.festivalOrder .conten-box .el-card .el-card__header {
font-weight: normal !important;
}
.festivalOrder .conten-box .top{
flex: 1.2;
margin-bottom: 25px;
}
.festivalOrder .conten-box .bottom{
flex: .8;
}
.festivalOrder .conten-box .left{
height: 100%;
}
.festivalOrder .conten-box .el-card.blue {
background: #0D2481!important;
color: #fff !important;
height: calc(100% - 2px);
}
.festivalOrder .conten-box .el-card .el-card__body {
padding:0 20px 20px 20px;
height: calc(100% - 98px);
max-height: calc(100% - 98px);
}
.festivalOrder .conten-box .img {
display: flex;
align-items: flex-end;
text-align: center;
padding: 27px 0 0 40px!important;
justify-content: center;
font-size: 14px;
}
.festivalOrder .sjsm{
height: 198px;
overflow: auto;
}
.festivalOrder .sjsm>div{
margin-bottom: 20px;
}
.festivalOrder .sjsm>div:last-child{
margin-bottom: 0px;
}
.festivalOrder .sjsm>div{
flex: 1;
background:rgba(244,245,249,1);
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
}
.festivalOrder .sjsm>div .left{
display: flex;
align-items: center;
font-size: 14px;
font-family: 'perfectFont';
font-weight: 900;
}
.festivalOrder .sjsm>div .left img{
padding-right: 10px;
}
.festivalOrder .sjsm>div .right{
text-align: right;
color: #888888;
font-size: 12px;
}
.festivalOrder .hight-font{
color: #0D2481 !important;
font-size: 14px;
}
.fesIcon{
display:inline-block;
width:12px;
height:12px;
border-radius: 50%;
position: relative;
top:1px;
}
.fes1{
background-color: #FFAF86;
}
.fes2{
background-color: #97BC7A;
}
.fes3{
background-color: #D2C9F1;
}
.fes4{
background-color: #24B896;
}
.fes5{
background-color: #ED70E9;
}
.fes6{
background-color: #F3C108;
}
.fes7{
background-color: #6EBCE2;
}
.fesList{
float:left;
margin-right:90px;
font-size:14px;
font-family: '微软雅黑';
}
.fesSpan2{
display:inline-block;
margin:0 30px 30px 8px;
}
.fesList:nth-of-type(even){
margin-right:0!important;
}
.botTaolun{
position: absolute;
bottom:15px;
right:25px;
cursor: pointer;
color:#FFA475;
font-size:12px;
}
.fesRemind{
color:#111111;
font-size:12px;
line-height: 20px;
margin-top:15px;
}
.comListDiv{
float:left;
width:10%;
height:30px;
}
.clearfix:after {content: "\0020";display: block;height: 0;clear: both;}
</style>
<template>
<div class="festivalOrder" v-loading="loading">
<div class="statistics-title bold18">特殊节假日统计</div>
<div class="conten-box" v-if="!loading">
<el-row :gutter="25" class="top">
<el-col :span="16" class="left">
<el-card class="blue">
<div slot="header" class="clearfix">
<span>特殊节假日统计</span>
</div>
<el-row :gutter="80" style="height: 100%;margin-top:60px;">
<el-col :span="10" class="img">
<div>
<div style="margin-bottom: 10px;">
<img src="../../assets/img/tongji/jieri.png" alt="">
</div>
<!-- <p>亲子出游</p> -->
</div>
</el-col>
<el-col :span="14" style="height: 100%;">
<div class="clearfix" style="width:350px;">
<div class="fesList" v-for="(item,index) in dataList" :key="index">
<span class="fesIcon" :class="{'fes1': item.FestivalName=='元旦', 'fes2': item.FestivalName=='春节','fes3': item.FestivalName=='清明',
'fes4': item.FestivalName=='端午','fes5': item.FestivalName=='中秋','fes6': item.FestivalName=='国庆','fes7': item.FestivalName=='劳动',
}"></span><span class="fesSpan2">{{item.FestivalName}}</span>
<span>{{getPercent(item)}}</span>
</div>
</div>
<div class="clearfix" style="width:350px;margin-top:20px;">
<div class="comListDiv" :class="{'fes1': item.FestivalName=='元旦', 'fes2': item.FestivalName=='春节','fes3': item.FestivalName=='清明',
'fes4': item.FestivalName=='端午','fes5': item.FestivalName=='中秋','fes6': item.FestivalName=='国庆','fes7': item.FestivalName=='劳动',
}" v-for="(item,index) in dataList" :key="index" :style="{'width': getPercent(item)}"></div>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :span="8" style="height: 100%;">
<el-card style="height: calc(100% - 2px);">
<div slot="header" class="clearfix">
<span>购物统计<span class="font-size-12">（按平均计算）</span></span>
</div>
<festivalChart v-if="isShowFeature" :dataList="dataList" :totalCount="totalCount"/>
</el-card>
</el-col>
</el-row>
<el-row :gutter="25" class="bottom" >
<el-col :span="16" style="height: 100%;">
<el-card style="height: 100%;">
<div slot="header" class="clearfix">
<span>数据说明</span>
</div>
<div class="sjsm">
<div v-for="(item,index) in dataList" :key="index">
<div class="left">
<img :src="getImgSrc(item.FestivalName)" alt="">
<p>{{item.FestivalName}}</p>
</div>
<div class="right">
<p>累计报名<span class="hight-font">{{item.OrderCount}}</span>人，关联购物金额<span class="hight-font">{{item.ShopMoney}}</span>万，报名均价为<span class="hight-font">{{item.Unit_Price}}</span>元</p>
<p>最喜爱产品<span class="hight-font">{{item.LtName}}</span></p>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="8" style="height: 100%;">
<el-card style="height: 100%;">
<div slot="header" class="clearfix">
<el-row style="width:100%">
<el-col :span="12" size="30">
推荐解答
</el-col>
<el-col :span="12" class="right-title">
<i class="iconfont icondianzan1"></i> 点赞
</el-col>
</el-row>
</div>
<div class="situ">
<div class="fesRemind">根据对客户年龄段的统计，可以更好的了解不同年龄段客 人的喜根据对客户年龄段的统计。根据对客户年龄段的统 计，可以更好的了解不同年龄段客人的喜根据对客户年龄 段的统计</div>
<div class="botTaolun" @click="drawer = true">
查看更多，参与讨论(1)
<i class="el-icon-d-arrow-right"></i>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
<el-drawer
size='695px'
:visible.sync="drawer"
direction="rtl"
:with-header="false">
<discussBox :id="discussID"/>
</el-drawer>
</div>
</template>
<script>
import festivalChart from './model/festivalChart'
import discussBox from "./model/discussBox";
export default {
components: {
festivalChart,
discussBox
},
data() {
return {
loading: false,
dataList:[],
totalCount:0,
discussID: 0,
drawer: false,
isShowFeature:false,
};
},watch:{
},
mounted() {
this.GetSexOrderList()
},
methods: {
GetSexOrderList(){
this.loading = true
this.apipost("/api/Statistic/GetFestivalOrderList", {}, res => {
this.loading=false;
this.dataList=res.data.data;
this.isShowFeature=true;
this.totalCount=0;
if(this.dataList&&this.dataList.length>0){
this.dataList.forEach(x=>{
this.totalCount+=x.OrderCount;
})
}
});
},
//获取对应节日图片
getImgSrc(item){
let str=''
switch(item) {
case '元旦':
str=require('../../assets/img/tongji/yuandan.png')
break;
case '中秋':
str=require('../../assets/img/tongji/zhongqiu.png')
break;
case '劳动':
str=require('../../assets/img/tongji/laodong.png')
break;
case '国庆':
str=require('../../assets/img/tongji/guoqing.png')
break;
case '春节':
str=require('../../assets/img/tongji/chunjie.png')
break;
case '清明':
str=require('../../assets/img/tongji/qingmin.png')
break;
case '端午':
str=require('../../assets/img/tongji/duanwu.png')
break;
}
return str;
},
//获取百分百
getPercent(item){
return (Math.round(item.OrderCount / this.totalCount * 10000) / 100.00).toFixed(1) + "%"
}
}
}
</script>
\ No newline at end of file
src/components/statistics/model/festivalChart.vue 0 → 100644
View file @ 68cb7a01
<style>
.sexChart{
height: 100%;
}
</style>
<template>
<div class="sexChart" ref="sexChart">
</div>
</template>
<script>
export default {
props: ["dataList","totalCount"],
data() {
return {
nameList:[],
data:[],
};
},watch:{
},
mounted() {
if(this.dataList&&this.dataList.length>0){
this.data=[];
this.dataList.forEach(x => {
this.nameList.push(x.FestivalName);
let obj={
value:0,
name:''
}
// obj.value=((x.OrderCount / this.totalCount * 10000) / 100.00).toFixed(1);
obj.value=x.OrderCount;
obj.name=x.FestivalName
this.data.push(obj);
});
}
this.init()
let myChart = this.$echarts.init(this.$refs.sexChart);
window.addEventListener("resize", () => {
myChart.resize();
});
},
methods: {
init(){
let myChart = this.$echarts.init(this.$refs.sexChart);
let option = {
title: {
text: '',
subtext: '',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: []
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: this.data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
}
}
}
</script>
\ No newline at end of file
src/router.js
View file @ 68cb7a01
......@@ -155,6 +155,14 @@ export default new Router({
title: "出游类型统计"
}
},
{
path: "/festivalOrderList",
name: "festivalOrderList",
component: ()=>import('./components/statistics/festivalOrderList.vue'),
meta: {
title: "特殊节假日统计"
}
},
{
path: "/marriage",
name: "marriage",
......
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