Skip to content

C
CRM
Commit c1ca7d40 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

新增三个统计页面 出游类型 婚姻统计 职业类型 未绑定数据

parent 9738f182
Show whitespace changes
Inline Side-by-side
Showing with 932 additions and 58 deletions
src/App.vue
View file @ c1ca7d40
......@@ -30,8 +30,8 @@ export default {
@import './assets/css/tablevoerride.css';
@import './assets/global/font.css';
@import '//at.alicdn.com/t/font_1627123_wc1bt4oc9pm.css';
@import url('//at.alicdn.com/t/font_1627123_8o41o9fvhw2.css');
@import '//at.alicdn.com/t/font_1627123_vi053ljm2xd.css';
@import url('//at.alicdn.com/t/font_1627123_grz80mbm3sv.css');
/* @import './assets/css/common.css'; */
@import './assets/css/init.css';
......
src/components/HomeNav/HomeNavLeft.vue
View file @ c1ca7d40
......@@ -35,7 +35,7 @@
background-color: #f4f5f9;
}
.home-nav .home-menu .home-menu-item > div {
padding: 0 0 0 35px;
padding: 0 0 0 15px;
background-color: rgba(13, 36, 129, 1);
height: 50px;
line-height: 50px;
......
src/components/statistics/job.vue 0 → 100644
View file @ c1ca7d40
<style>
.job{
height: calc(100% - 25px);
}
.statistics-title {
font-size: 24px;
color: #111;
margin-bottom: 30px;
font-family: perfectFont;
}
.job .conten-box{
display: flex;
flex-direction: column;
height: calc(100% - 62px);
}
.job .conten-box .el-card .el-card__header {
font-weight: normal !important;
}
.job .conten-box .top{
flex: 1.2;
margin-bottom: 25px;
}
.job .conten-box .bottom{
flex: .8;
}
.job .conten-box .left{
height: 100%;
}
.job .conten-box .el-card.blue {
background: #0D2481!important;
color: #fff !important;
height: calc(100% - 2px);
}
.job .conten-box .el-card .el-card__body {
padding: 20px;
height: calc(100% - 98px);
max-height: calc(100% - 98px);
}
.job .conten-box .img {
display: flex;
align-items: flex-end;
text-align: center;
padding: 27px 0 0 90px!important;
justify-content: center;
font-size: 14px;
}
.job .sjsm{
height: 198px;
overflow: auto;
}
.job .sjsm>div{
margin-bottom: 20px;
}
.job .sjsm>div:last-child{
margin-bottom: 0px;
}
.job .sjsm>div{
flex: 1;
background:rgba(244,245,249,1);
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
}
.job .sjsm>div .left{
display: flex;
align-items: center;
}
.job .sjsm>div .left img{
padding-right: 10px;
}
.job .sjsm>div .right{
text-align: right;
color: #888888;
font-size: 12px;
}
.job .hight-font{
color: #0D2481 !important;
font-size: 14px;
}
</style>
<template>
<div class="job" 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="24" class="left">
<el-card class="blue">
<div slot="header" class="clearfix">
<span>订单统计</span>
</div>
<el-row :gutter="80" style="height: 100%;">
<el-col :span="6" class="img">
<div>
<div style="margin-bottom: 10px;">
<img src="../../assets/img/tongji/qinzi.png" alt="">
</div>
<p>教育</p>
</div>
</el-col>
<el-col :span="18" style="height: 100%;">
<sexChart :myData="chartData" :strArr="strArr"/>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<el-row :gutter="25" class="bottom" >
<el-col :span="15" 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 9" :key="index">
<div class="left">
<img v-if="item.Sex === 1" src="../../assets/img/tongji/man1.png" alt="">
<img v-else src="../../assets/img/tongji/woman1.png" alt="">
<span class="font-size-12">{{item.SexStr}}士</span>
</div>
<div class="right">
<p>累计报名<span class="hight-font">{{item.SexCount}}</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="9" 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="c">根据对客户年龄段的统计可以，更好的了解不同年龄段客人的喜好，消费能力的判读，从而快速的推荐团队给客人等等等</div>
<div class="bot" @click="drawer = true">
查看更多，参与讨论(19)
<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 sexChart from './model/sexChart'
import shopChart from './model/shopChart'
import discussBox from "./model/discussBox";
export default {
components: {
sexChart,
shopChart,
discussBox
},
data() {
return {
discussID: 0,
drawer: false,
chartData: [50, 30, 20, 10, 60, 30],
shopChartData: [],
SexOrder: [],
loading: false,
strArr: ['教育', '服务', '科研', '农业', '管理', '娱乐']
};
},watch:{
},
mounted() {
// this.GetSexOrderList()
},
methods: {
GetSexOrderList(){
this.loading = true
this.apipost("/api/Statistic/GetSexOrderList", {}, res => {
this.SexOrder = res.data.data
let contShop = res.data.data[0].ShopMoney + res.data.data[1].ShopMoney, man = res.data.data[0].ShopMoney, woman = res.data.data[1].ShopMoney,
contNum = res.data.data[0].SexCount + res.data.data[1].SexCount, manN = res.data.data[0].SexCount, womanN = res.data.data[1].SexCount;
let chartData = [], shopChartData = [];
chartData.push(
((manN/contNum)*100).toFixed(2)
)
chartData.push(
((womanN/contNum)*100).toFixed(2)
)
shopChartData.push(
Number(((man/contShop)*100).toFixed(0))
)
shopChartData.push(
Number(((woman/contShop)*100).toFixed(0))
)
this.chartData = chartData
this.shopChartData = shopChartData
this.loading = false
});
}
}
}
</script>
\ No newline at end of file
src/components/statistics/marriage.vue 0 → 100644
View file @ c1ca7d40
<style>
.marriage{
height: calc(100% - 25px);
}
.statistics-title {
font-size: 24px;
color: #111;
margin-bottom: 30px;
font-family: perfectFont;
}
.marriage .conten-box{
display: flex;
flex-direction: column;
height: calc(100% - 62px);
}
.marriage .conten-box .el-card .el-card__header {
font-weight: normal !important;
}
.marriage .conten-box .top{
flex: 1.2;
margin-bottom: 25px;
}
.marriage .conten-box .bottom{
flex: .8;
}
.marriage .conten-box .left{
height: 100%;
}
.marriage .conten-box .el-card.blue {
background: #ffffff!important;
color: #fff !important;
height: calc(100% - 2px);
}
.marriage .conten-box .el-card .el-card__body {
padding: 20px;
height: calc(100% - 98px);
max-height: calc(100% - 98px);
}
.marriage .conten-box .img {
display: flex;
align-items: flex-end;
text-align: center;
padding: 27px 0 0 40px!important;
justify-content: center;
font-size: 14px;
}
.marriage .sjsm{
height: 198px;
overflow: auto;
}
.marriage .sjsm>div{
margin-bottom: 20px;
}
.marriage .sjsm>div:last-child{
margin-bottom: 0px;
}
.marriage .sjsm>div{
flex: 1;
background:rgba(244,245,249,1);
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
}
.marriage .sjsm>div .left{
display: flex;
align-items: center;
}
.marriage .sjsm>div .left img{
padding-right: 10px;
}
.marriage .sjsm>div .right{
text-align: right;
color: #888888;
font-size: 12px;
}
.marriage .hight-font{
color: #0D2481 !important;
font-size: 14px;
}
</style>
<template>
<div class="marriage" 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="10" class="left">
<el-card class="blue">
<div slot="header" class="clearfix">
<span>报名统计</span>
</div>
<el-row :gutter="80" style="height: 100%;">
<el-col :span="24" style="height: 100%;">
<marriageChart :chartData="chartData" :strArr="strArr"/>
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :span="14" style="height: 100%;">
<el-card style="height: calc(100% - 2px);">
<div slot="header" class="clearfix">
<span>购物统计<span class="font-size-12">（按平均计算）</span></span>
</div>
<marriageLineChart :chartData="chartData" :strArr="strArr"/>
</el-card>
</el-col>
</el-row>
<el-row :gutter="25" class="bottom" >
<el-col :span="15" 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 9" :key="index">
<div class="left">
<img v-if="item.Sex === 1" src="../../assets/img/tongji/man1.png" alt="">
<img v-else src="../../assets/img/tongji/woman1.png" alt="">
<span class="font-size-12">{{item.SexStr}}士</span>
</div>
<div class="right">
<p>累计报名<span class="hight-font">{{item.SexCount}}</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="9" 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="c">根据对客户年龄段的统计可以，更好的了解不同年龄段客人的喜好，消费能力的判读，从而快速的推荐团队给客人等等等</div>
<div class="bot" @click="drawer = true">
查看更多，参与讨论(19)
<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 marriageChart from './model/marriageChart'
import shopChart from './model/shopChart'
import discussBox from "./model/discussBox"
import marriageLineChart from "./model/marriageLineChart"
export default {
components: {
marriageChart,
shopChart,
discussBox,
marriageLineChart
},
data() {
return {
discussID: 0,
drawer: false,
chartData: [50, 30, 20, 10, 60],
shopChartData: [50, 30, 20, 10, 60],
SexOrder: [],
loading: false,
strArr: ['亲子', '蜜月', '夕阳红', '暑期', '寒假']
};
},watch:{
},
mounted() {
// this.GetSexOrderList()
},
methods: {
GetSexOrderList(){
this.loading = true
this.apipost("/api/Statistic/GetSexOrderList", {}, res => {
this.SexOrder = res.data.data
let contShop = res.data.data[0].ShopMoney + res.data.data[1].ShopMoney, man = res.data.data[0].ShopMoney, woman = res.data.data[1].ShopMoney,
contNum = res.data.data[0].SexCount + res.data.data[1].SexCount, manN = res.data.data[0].SexCount, womanN = res.data.data[1].SexCount;
let chartData = [], shopChartData = [];
chartData.push(
((manN/contNum)*100).toFixed(2)
)
chartData.push(
((womanN/contNum)*100).toFixed(2)
)
shopChartData.push(
Number(((man/contShop)*100).toFixed(0))
)
shopChartData.push(
Number(((woman/contShop)*100).toFixed(0))
)
this.chartData = chartData
this.shopChartData = shopChartData
this.loading = false
});
}
}
}
</script>
\ No newline at end of file
src/components/statistics/model/marriageChart.vue 0 → 100644
View file @ c1ca7d40
<style>
.sexChart{
height: 100%;
}
</style>
<template>
<div class="sexChart" ref="sexChart">
</div>
</template>
<script>
export default {
props: ["chartData", "strArr"],
data() {
return {
};
},watch:{
},
mounted() {
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 = {
grid: {
left: '10%',
right: '5%'
},
xAxis: {
data: this.strArr,
type: 'category',
axisLabel: {
color: '#333333'
},
axisLine: {
show: false
},
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
axisLabel: {
color: '#969696',
formatter: '{value} %'
},
max: 100,
},
series: [{
data: this.chartData,
type: 'bar',
itemStyle: {
color: '#0D2481',
},
barWidth: '44'
}]
};
myChart.setOption(option);
}
}
}
</script>
\ No newline at end of file
src/components/statistics/model/marriageLineChart.vue 0 → 100644
View file @ c1ca7d40
<style>
.sexChart{
height: 100%;
}
</style>
<template>
<div class="sexChart" ref="sexChart">
</div>
</template>
<script>
export default {
props: ["chartData", "strArr"],
data() {
return {
};
},watch:{
},
mounted() {
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 = {
grid: {
left: '10%',
right: '5%'
},
xAxis: {
data: this.strArr,
type: 'category',
axisLabel: {
color: '#333333'
},
axisLine: {
show: false
},
boundaryGap : false,
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
axisLabel: {
color: '#969696',
formatter: '{value} %'
},
max: 100,
},
series: [{
data: this.chartData,
type: 'line',
smooth: true,
itemStyle: {
color: '#FFA475',
},
barWidth: '44',
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(255, 164, 117, 1)" },
{ offset: .8, color: "rgba(255, 164, 117, 0)" }
])
}
},
}]
};
myChart.setOption(option);
}
}
}
</script>
\ No newline at end of file
src/components/statistics/model/sexChart.vue
View file @ c1ca7d40
......@@ -11,7 +11,7 @@
</template>
<script>
export default {
props: ["myData"],
props: ["myData", "strArr"],
data() {
return {
......@@ -31,9 +31,11 @@ export default {
let myChart = this.$echarts.init(this.$refs.sexChart);
let option = {
grid: {
left: '20%'
left: '5%',
right: '3%'
},
xAxis: {
data: this.strArr,
type: 'category',
axisLabel: {
color: '#FFFFFF'
......
src/components/statistics/model/shopChart.vue
View file @ c1ca7d40
......@@ -3,6 +3,7 @@
.sexChart{
height: 100%;
text-align: center;
position: relative;
}
.sexChart #myCanvas{
margin-top: 55px;
......@@ -18,26 +19,30 @@
display: inline-block;
width:12px;
height:12px;
background:rgba(13,36,129,1);
border-radius:50%;
margin-right: 10px;
}
.sexChart .lable .radius1{
background:rgba(255,169,124,1);
.sexChart .text{
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 22px;
font-weight: 600;
}
</style>
<template>
<div class="sexChart" ref="sexChart">
<canvas id="myCanvas" width="180" height="180">
<canvas id="myCanvas" width="220" height="220">
当前浏览器版本过低，请使用其他浏览器尝试
</canvas>
<p class="text">100%</p>
<div class="lable">
<div>
<span class="radius"></span> <span>男</span> 40%
</div>
<div>
<span class="radius radius1"></span> <span>女</span> 30%
<template v-for="(item, index) in shopChartData">
<div :key="index" v-if="item.text !== ''">
<span class="radius" :style="{'background': item.color}"></span> <span>{{item.text}}</span> {{item.num}}%
</div>
</template>
</div>
</div>
</template>
......@@ -57,6 +62,15 @@ export default {
},
methods: {
init(){
let d = this.shopChartData.map( (item) =>{
return {
name: item.text,
value: item.num
}
})
let c = this.shopChartData.map( (item) =>
item.color + ''
)
var option = {
type: 'pie', // pie 环形图|| gauge 计量图
tooltip: {
......@@ -69,22 +83,13 @@ export default {
y: "50%",
radius: "30%", // 半径
lineWidth: "15%", // 圆环宽度
data: [{
name: "男",
value: this.shopChartData[0],
}, {
name: "女",
value: this.shopChartData[1],
}, {
name: "",
value: 100 - this.shopChartData[0] - this.shopChartData[1],
}],
data: d,
capType: "round", // 圆角 || butt 平角
selectedStyle: { // 选中时的样式
color: "white", // 包边颜色
borderWidth: 10 // 包边宽度
},
color: ["#E8EAF7", "#596EC4", "#FFB690"],
color: c,
labelCoverTitle: true, // label 是否覆盖标题
backgroundArc: '#999' // 空圆环的颜色
}
......
src/components/statistics/sex.vue
View file @ c1ca7d40
......@@ -41,18 +41,18 @@
display: flex;
align-items: flex-end;
text-align: center;
padding: 20px 70px !important;
padding: 20px 70px 10px 70px!important;
justify-content: space-between;
font-size: 14px;
}
.sjsm{
.sex .sjsm{
display: flex;
flex-direction: column;
}
.sjsm>div:nth-child(1){
.sex .sjsm>div:nth-child(1){
margin-bottom: 20px;
}
.sjsm>div{
.sex .sjsm>div{
flex: 1;
background:rgba(244,245,249,1);
display: flex;
......@@ -60,28 +60,28 @@
justify-content: space-between;
padding: 20px;
}
.sjsm>div .left{
.sex .sjsm>div .left{
display: flex;
align-items: center;
}
.sjsm>div .left img{
.sex .sjsm>div .left img{
padding-right: 10px;
}
.sjsm>div .right{
.sex .sjsm>div .right{
text-align: right;
color: #888888;
font-size: 12px;
}
.hight-font{
.sex .hight-font{
color: #0D2481 !important;
font-size: 14px;
}
</style>
<template>
<div class="sex" >
<div class="sex" v-loading="loading">
<div class="statistics-title bold18">客户性别统计</div>
<div class="conten-box">
<div class="conten-box" v-if="!loading">
<el-row :gutter="25" class="top">
<el-col :span="16" class="left">
<el-card class="blue">
......@@ -91,20 +91,20 @@
<el-row :gutter="80" style="height: 100%;">
<el-col :span="10" class="img">
<div>
<div>
<div style="margin-bottom: 10px;">
<img src="../../assets/img/tongji/man.png" alt="">
</div>
<p>男</p>
</div>
<div>
<div>
<div style="margin-bottom: 10px;">
<img src="../../assets/img/tongji/woman.png" alt="">
</div>
<p>女</p>
</div>
</el-col>
<el-col :span="14" style="height: 100%;">
<sexChart :myData="chartData"/>
<sexChart :myData="chartData" :strArr="strArr"/>
</el-col>
</el-row>
</el-card>
......@@ -125,24 +125,15 @@
<span>数据说明</span>
</div>
<div style="height: 100%;" class="sjsm">
<div>
<div v-for="(item, index) in SexOrder" :key="index">
<div class="left">
<img src="../../assets/img/tongji/man1.png" alt="">
<span class="font-size-12">男士</span>
<img v-if="item.Sex === 1" src="../../assets/img/tongji/man1.png" alt="">
<img v-else src="../../assets/img/tongji/woman1.png" alt="">
<span class="font-size-12">{{item.SexStr}}士</span>
</div>
<div class="right">
<p>累计报名<span class="hight-font">666</span>人，关联购物金额<span class="hight-font">6589.66</span>万，报名均价为<span class="hight-font">6588</span>元</p>
<p>最喜爱产品<span class="hight-font">《私人定制系列》</span></p>
</div>
</div>
<div>
<div class="left">
<img src="../../assets/img/tongji/woman1.png" alt="">
<span class="font-size-12">女士</span>
</div>
<div class="right">
<p>累计报名<span class="hight-font">666</span>人，关联购物金额<span class="hight-font">6589.66</span>万，报名均价为<span class="hight-font">6588</span>元</p>
<p>最喜爱产品<span class="hight-font">《私人定制系列》</span></p>
<p>累计报名<span class="hight-font">{{item.SexCount}}</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>
......@@ -194,17 +185,58 @@ export default {
return {
discussID: 0,
drawer: false,
chartData: [50, 20],
shopChartData: [50, 30]
chartData: [0, 0],
shopChartData: [],
SexOrder: [],
loading: false,
strArr: ['男', '女'],
};
},watch:{
},
mounted() {
this.GetSexOrderList()
},
methods: {
GetSexOrderList(){
this.loading = true
this.apipost("/api/Statistic/GetSexOrderList", {}, res => {
this.SexOrder = res.data.data
let contShop = res.data.data[0].ShopMoney + res.data.data[1].ShopMoney, man = res.data.data[0].ShopMoney, woman = res.data.data[1].ShopMoney,
contNum = res.data.data[0].SexCount + res.data.data[1].SexCount, manN = res.data.data[0].SexCount, womanN = res.data.data[1].SexCount;
let chartData = [], shopChartData = [];
chartData.push(
((manN/contNum)*100).toFixed(2)
)
chartData.push(
((womanN/contNum)*100).toFixed(2)
)
shopChartData.push(
{
num: Number(((man/contShop)*100).toFixed(0)),
color: "#0D2481",
text: '男'
}
)
shopChartData.push(
{
num: Number(((woman/contShop)*100).toFixed(0)),
color: "#FFA475",
text: '女'
}
)
shopChartData.push(
{
num: 100 - (Number(((man/contShop)*100).toFixed(0)) + Number(((woman/contShop)*100).toFixed(0))),
color: "#FFFFFF",
text: ''
}
)
this.chartData = chartData
this.shopChartData = shopChartData
this.loading = false
});
}
}
}
</script>
\ No newline at end of file
src/components/statistics/tourType.vue 0 → 100644
View file @ c1ca7d40
<style>
.tourType{
height: calc(100% - 25px);
}
.statistics-title {
font-size: 24px;
color: #111;
margin-bottom: 30px;
font-family: perfectFont;
}
.tourType .conten-box{
display: flex;
flex-direction: column;
height: calc(100% - 62px);
}
.tourType .conten-box .el-card .el-card__header {
font-weight: normal !important;
}
.tourType .conten-box .top{
flex: 1.2;
margin-bottom: 25px;
}
.tourType .conten-box .bottom{
flex: .8;
}
.tourType .conten-box .left{
height: 100%;
}
.tourType .conten-box .el-card.blue {
background: #0D2481!important;
color: #fff !important;
height: calc(100% - 2px);
}
.tourType .conten-box .el-card .el-card__body {
padding: 20px;
height: calc(100% - 98px);
max-height: calc(100% - 98px);
}
.tourType .conten-box .img {
display: flex;
align-items: flex-end;
text-align: center;
padding: 27px 0 0 40px!important;
justify-content: center;
font-size: 14px;
}
.tourType .sjsm{
height: 198px;
overflow: auto;
}
.tourType .sjsm>div{
margin-bottom: 20px;
}
.tourType .sjsm>div:last-child{
margin-bottom: 0px;
}
.tourType .sjsm>div{
flex: 1;
background:rgba(244,245,249,1);
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
}
.tourType .sjsm>div .left{
display: flex;
align-items: center;
}
.tourType .sjsm>div .left img{
padding-right: 10px;
}
.tourType .sjsm>div .right{
text-align: right;
color: #888888;
font-size: 12px;
}
.tourType .hight-font{
color: #0D2481 !important;
font-size: 14px;
}
</style>
<template>
<div class="tourType" 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%;">
<el-col :span="10" class="img">
<div>
<div style="margin-bottom: 10px;">
<img src="../../assets/img/tongji/qinzi.png" alt="">
</div>
<p>亲子出游</p>
</div>
</el-col>
<el-col :span="14" style="height: 100%;">
<sexChart :myData="chartData" :strArr="strArr"/>
</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>
<shopChart :shopChartData="shopChartData"/>
</el-card>
</el-col>
</el-row>
<el-row :gutter="25" class="bottom" >
<el-col :span="15" 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 9" :key="index">
<div class="left">
<img v-if="item.Sex === 1" src="../../assets/img/tongji/man1.png" alt="">
<img v-else src="../../assets/img/tongji/woman1.png" alt="">
<span class="font-size-12">{{item.SexStr}}士</span>
</div>
<div class="right">
<p>累计报名<span class="hight-font">{{item.SexCount}}</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="9" 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="c">根据对客户年龄段的统计可以，更好的了解不同年龄段客人的喜好，消费能力的判读，从而快速的推荐团队给客人等等等</div>
<div class="bot" @click="drawer = true">
查看更多，参与讨论(19)
<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 sexChart from './model/sexChart'
import shopChart from './model/shopChart'
import discussBox from "./model/discussBox";
export default {
components: {
sexChart,
shopChart,
discussBox
},
data() {
return {
discussID: 0,
drawer: false,
chartData: [50, 30, 20, 10, 60],
shopChartData: [],
SexOrder: [],
loading: false,
strArr: ['亲子', '蜜月', '夕阳红', '暑期', '寒假']
};
},watch:{
},
mounted() {
// this.GetSexOrderList()
},
methods: {
GetSexOrderList(){
this.loading = true
this.apipost("/api/Statistic/GetSexOrderList", {}, res => {
this.SexOrder = res.data.data
let contShop = res.data.data[0].ShopMoney + res.data.data[1].ShopMoney, man = res.data.data[0].ShopMoney, woman = res.data.data[1].ShopMoney,
contNum = res.data.data[0].SexCount + res.data.data[1].SexCount, manN = res.data.data[0].SexCount, womanN = res.data.data[1].SexCount;
let chartData = [], shopChartData = [];
chartData.push(
((manN/contNum)*100).toFixed(2)
)
chartData.push(
((womanN/contNum)*100).toFixed(2)
)
shopChartData.push(
Number(((man/contShop)*100).toFixed(0))
)
shopChartData.push(
Number(((woman/contShop)*100).toFixed(0))
)
this.chartData = chartData
this.shopChartData = shopChartData
this.loading = false
});
}
}
}
</script>
\ No newline at end of file
src/router.js
View file @ c1ca7d40
......@@ -145,6 +145,30 @@ export default new Router({
title: "客户性别统计"
}
},
{
path: "/tourType",
name: "tourType",
component: ()=>import('./components/statistics/tourType.vue'),
meta: {
title: "出游类型统计"
}
},
{
path: "/marriage",
name: "marriage",
component: ()=>import('./components/statistics/marriage.vue'),
meta: {
title: "婚姻统计"
}
},
{
path: "/job",
name: "job",
component: ()=>import('./components/statistics/job.vue'),
meta: {
title: "职业类型统计"
}
},
{
path: "/contractManagement",
name: "contractManagement",
......
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