Skip to content

C
CRM
Commit 9137a792 authored by 罗超's avatar 罗超
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/huaguohao/crm

parents d1daf2bd c45eb387
Hide whitespace changes
Inline Side-by-side
Showing with 351 additions and 319 deletions
src/components/statistics/gaoxiao.vue
View file @ 9137a792
...@@ -121,16 +121,19 @@ ...@@ -121,16 +121,19 @@
<span>数据说明</span> <span>数据说明</span>
</div> </div>
<div style="height: 100%;" class="sjsm"> <div style="height: 100%;" class="sjsm">
<div v-for="(item, index) in orders" :key="index"> <div v-for="(item, index) in orderList" :key="index">
<div class="left"> <div class="left">
<img v-if="item.StudentType === 1" src="../../assets/img/tongji/zaidu.png" alt /> <img v-if="index === 0" src="../../assets/img/tongji/zaidu.png" alt />
<img v-if="item.StudentType === 2" src="../../assets/img/tongji/biye.png" alt /> <img v-else src="../../assets/img/tongji/biye.png" alt />
<span class="font-size-12">{{item.StudentTypeName}}</span> <span class="font-size-12">{{item.StudentTypeName}}</span>
</div> </div>
<div class="right"> <div class="right">
<p> <p>
累计报名 累计报名
<span class="hight-font">{{item.StudentCount}}</span>人，报名均价为 <span class="hight-font">
<span v-if="orders[index] && orders[index].StudentCount">{{orders[index].StudentCount}}</span>
<span v-else>0</span>
</span>人，报名均价为
<span class="hight-font">{{item.Unit_Price}}</span>元 <span class="hight-font">{{item.Unit_Price}}</span>元
</p> </p>
<!-- 关联购物金额<span class="hight-font">{{item.TotalMoney}}</span>万， --> <!-- 关联购物金额<span class="hight-font">{{item.TotalMoney}}</span>万， -->
...@@ -193,7 +196,9 @@ export default { ...@@ -193,7 +196,9 @@ export default {
orders: [], orders: [],
discussID: 12, discussID: 12,
BbsList: [], BbsList: [],
topOne: {} topOne: {},
colorArr:["#0D2481","#FFA475","#99BD7B","#D2C9F1","#6EBCE2"],
orderList:[],
}; };
}, },
watch: {}, watch: {},
...@@ -222,52 +227,85 @@ export default { ...@@ -222,52 +227,85 @@ export default {
}, },
GetSexOrderList() { GetSexOrderList() {
this.loading = true; this.loading = true;
let that=this;
this.apipost("/api/Statistic/GetStudentShopList", {}, res => { this.apipost("/api/Statistic/GetStudentShopList", {}, res => {
// this.SexOrder = res.data.data // this.SexOrder = res.data.data
console.log(res.data.data) console.log(res.data.data)
let m=3-res.data.data.length
if(res.data.data.length<3){ let chartData = [], shopChartData = [];
for (let i = 0; i < m; i++) { let data=res.data.data;
res.data.data.push({ if(data.length==0){
TotalMoney:0, chartData = [0, 0, 0, 0, 0];
StudentCount:0 let strArr = this.strArr;
}) for (let i = 0; i < 5; i++) {
} shopChartData.push({
} num: 0,
let contShop = color: that.colorArr[i],
res.data.data[0].TotalMoney + text: strArr[i]
res.data.data[1].TotalMoney + });
res.data.data[2].TotalMoney, }
zai = res.data.data[0].TotalMoney, }
bi = res.data.data[1].TotalMoney, else{
ot = res.data.data[2].TotalMoney, this.strArr=[];
contNum = let contHouse=0;
res.data.data[0].StudentCount + let contNum=0;
res.data.data[1].StudentCount + data.forEach(item=>{
res.data.data[2].StudentCount, this.strArr.push(item.StudentTypeName);
zaiN = res.data.data[0].StudentCount, contHouse+=item.StudentCount;
biN = res.data.data[1].StudentCount, contNum+=item.TotalMoney;
otN = res.data.data[2].StudentCount; })
let chartData = [], data.forEach((item,i)=>{
shopChartData = []; chartData.push(parseFloat(((item.StudentCount/contHouse)*100).toFixed(2)));
chartData.push(((zaiN / contNum) * 100).toFixed(2)); shopChartData.push({
chartData.push(((biN / contNum) * 100).toFixed(2)); num: parseFloat(((item.TotalMoney/contNum)*100).toFixed(2)),
chartData.push(((otN / contNum) * 100).toFixed(2)); color: that.colorArr[i],
shopChartData.push({ text: that.strArr[i]
num: Number(((zai / contShop) * 100).toFixed(2)), });
color: "#0D2481", })
text: "高校在读生" }
}); // let m=3-res.data.data.length
shopChartData.push({ // if(res.data.data.length<3){
num: Number(((bi / contShop) * 100).toFixed(2)), // for (let i = 0; i < m; i++) {
color: "#FFA475", // res.data.data.push({
text: "高校毕业生" // TotalMoney:0,
}); // StudentCount:0
shopChartData.push({ // })
num: Number(((ot / contShop) * 100).toFixed(2)), // }
color: "#999", // }
text: "非高校" // let contShop =
}); // res.data.data[0].TotalMoney +
// res.data.data[1].TotalMoney +
// res.data.data[2].TotalMoney,
// zai = res.data.data[0].TotalMoney,
// bi = res.data.data[1].TotalMoney,
// ot = res.data.data[2].TotalMoney,
// contNum =
// res.data.data[0].StudentCount +
// res.data.data[1].StudentCount +
// res.data.data[2].StudentCount,
// zaiN = res.data.data[0].StudentCount,
// biN = res.data.data[1].StudentCount,
// otN = res.data.data[2].StudentCount;
// let chartData = [],
// shopChartData = [];
// chartData.push(((zaiN / contNum) * 100).toFixed(2));
// chartData.push(((biN / contNum) * 100).toFixed(2));
// chartData.push(((otN / contNum) * 100).toFixed(2));
// shopChartData.push({
// num: Number(((zai / contShop) * 100).toFixed(2)),
// color: "#0D2481",
// text: "高校在读生"
// });
// shopChartData.push({
// num: Number(((bi / contShop) * 100).toFixed(2)),
// color: "#FFA475",
// text: "高校毕业生"
// });
// shopChartData.push({
// num: Number(((ot / contShop) * 100).toFixed(2)),
// color: "#999",
// text: "非高校"
// });
this.chartData = chartData; this.chartData = chartData;
this.shopChartData = shopChartData; this.shopChartData = shopChartData;
this.orders = res.data.data; this.orders = res.data.data;
...@@ -277,10 +315,10 @@ export default { ...@@ -277,10 +315,10 @@ export default {
}, },
getOrders() { getOrders() {
this.apipost("/api/Statistic/GetStudentOrderList", {}, res => { this.apipost("/api/Statistic/GetStudentOrderList", {}, res => {
console.log(res);
res.data.data.forEach(x => { res.data.data.forEach(x => {
this.orders[x.NewStudentType - 1].LtName = x.LtName; this.orderList=res.data.data;
this.orders[x.NewStudentType - 1].Unit_Price = x.Unit_Price; // this.orders[x.NewStudentType - 1].LtName = x.LtName;
// this.orders[x.NewStudentType - 1].Unit_Price = x.Unit_Price;
}); });
this.loading = false; this.loading = false;
}); });
......
src/components/statistics/roomStatistical.vue
View file @ 9137a792
<style> <style>
.sex { .sex{
height: calc(100% - 25px); height: calc(100% - 25px);
} }
.statistics-title { .statistics-title {
...@@ -9,309 +9,303 @@ ...@@ -9,309 +9,303 @@
margin-bottom: 30px; margin-bottom: 30px;
font-family: perfectFont; font-family: perfectFont;
} }
.sex .conten-box { .sex .conten-box{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100% - 62px); height: calc(100% - 62px);
} }
.sex .conten-box .el-card .el-card__header { .sex .conten-box .el-card .el-card__header {
font-weight: normal !important; font-weight: normal !important;
} }
.sex .conten-box .top { .sex .conten-box .top{
flex: 1.2; flex: 1.2;
margin-bottom: 25px; margin-bottom: 25px;
} }
.sex .conten-box .bottom { .sex .conten-box .bottom{
flex: 0.8; flex: .8;
} }
.sex .conten-box .left { .sex .conten-box .left{
height: 100%; height: 100%;
} }
.sex .conten-box .el-card.blue { .sex .conten-box .el-card.blue {
background: #0d2481 !important; background: #0D2481!important;
color: #fff !important; color: #fff !important;
height: calc(100% - 2px); height: calc(100% - 2px);
} }
.sex .conten-box .el-card .el-card__body { .sex .conten-box .el-card .el-card__body {
padding: 20px; padding: 20px;
height: calc(100% - 98px); height: calc(100% - 98px);
max-height: calc(100% - 98px); max-height: calc(100% - 98px);
} }
.sex .conten-box .img { .sex .conten-box .img {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
text-align: center; text-align: center;
padding: 20px 70px 10px 70px !important; padding: 20px 70px 10px 70px!important;
justify-content: space-between; justify-content: space-between;
font-size: 14px; font-size: 14px;
} }
.sex .sjsm { .sex .sjsm{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.sex .sjsm > div { .sex .sjsm>div{
margin-bottom: 20px; margin-bottom: 20px;
} }
.sex .sjsm > div { .sex .sjsm>div{
flex: 1; flex: 1;
background: rgba(244, 245, 249, 1); background:rgba(244,245,249,1);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 20px; padding: 20px;
} }
.sex .sjsm > div .left { .sex .sjsm>div .left{
display: flex; display: flex;
align-items: center; align-items: center;
} }
.sex .sjsm > div .left img { .sex .sjsm>div .left img{
padding-right: 10px; padding-right: 10px;
} }
.sex .sjsm > div .right { .sex .sjsm>div .right{
text-align: right; text-align: right;
color: #888888; color: #888888;
font-size: 12px; font-size: 12px;
} }
.sex .hight-font { .sex .hight-font{
color: #0d2481 !important; color: #0D2481 !important;
font-size: 14px; font-size: 14px;
}
.sex .situ {
/* width: 100%;*/
height: 100%;
}
.sex .situ .head {
height: 36px;
display: flex;
line-height: 36px;
margin: 10px 0;
/* border-bottom: 1px solid #EEE; */
}
.sex .situ .c {
font-size: 14px;
color: #333;
height: calc(100% - 20px);
overflow-y: auto;
}
.sex .situ .bot {
height: 20px;
line-height: 20px;
/* text-decoration: underline; */
cursor: pointer;
color: rgb(13, 36, 129);
font-size: 12px;
text-align: right;
} }
</style> </style>
<template> <template>
<div class="sex" v-loading="loading"> <div class="sex" v-loading="loading">
<div class="statistics-title bold18">住房统计</div> <div class="statistics-title bold18">住房统计</div>
<div class="conten-box" v-if="!loading"> <div class="conten-box" v-if="!loading">
<el-row :gutter="25" class="top"> <el-row :gutter="25" class="top">
<el-col :span="16" class="left"> <el-col :span="16" class="left">
<el-card class="blue"> <el-card class="blue">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>住房统计</span> <span>住房统计</span>
</div> </div>
<el-row :gutter="80" style="height: 100%;"> <el-row :gutter="80" style="height: 100%;">
<el-col :span="10" class="img"> <el-col :span="10" class="img">
<div> <div>
<div style="margin-bottom: 10px;"> <div style="margin-bottom: 10px;">
<img src="../../assets/img/tongji/zhufang.png" alt /> <img src="../../assets/img/tongji/zhufang.png" alt="">
</div> </div>
<p>住房</p> <p>住房</p>
</div> </div>
</el-col> </el-col>
<el-col :span="14" style="height: 100%;"> <el-col :span="14" style="height: 100%;">
<sexChart :myData="chartData" :strArr="strArr" /> <sexChart :myData="chartData" :strArr="strArr"/>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="8" style="height: 100%;"> <el-col :span="8" style="height: 100%;">
<el-card style="height: calc(100% - 2px);"> <el-card style="height: calc(100% - 2px);">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span> <span>购物统计<span class="font-size-12">（按平均计算）</span></span>
购物统计 </div>
<span class="font-size-12">（按平均计算）</span> <shopChart :shopChartData="shopChartData"/>
</span> </el-card>
</div> </el-col>
<shopChart :shopChartData="shopChartData" /> </el-row>
</el-card> <el-row :gutter="25" class="bottom" >
</el-col> <el-col :span="16" style="height: 100%;">
</el-row> <el-card style="height: 100%;">
<el-row :gutter="25" class="bottom"> <div slot="header" class="clearfix">
<el-col :span="16" style="height: 100%;"> <span>数据说明</span>
<el-card style="height: 100%;"> </div>
<div slot="header" class="clearfix"> <div style="height: 100%;" class="sjsm">
<span>数据说明</span> <div v-for="(item, index) in orderList" :key="index">
</div> <div class="left">
<div style="height: 100%;" class="sjsm"> <img v-if="item.NewHouseType==1" src="../../assets/img/tongji/room1.png" alt="">
<div v-for="(item, index) in orderList" :key="index"> <img v-if="item.NewHouseType==2" src="../../assets/img/tongji/room2.png" alt="">
<div class="left"> <img v-if="item.NewHouseType==3" src="../../assets/img/tongji/room3.png" alt="">
<img v-if="item.NewHouseType==1" src="../../assets/img/tongji/room1.png" alt /> <img v-if="item.NewHouseType==5" src="../../assets/img/tongji/room4.png" alt="">
<img v-if="item.NewHouseType==2" src="../../assets/img/tongji/room2.png" alt /> <span class="font-size-12">{{item.HouseTypeName}}</span>
<img v-if="item.NewHouseType==3" src="../../assets/img/tongji/room3.png" alt /> </div>
<img v-if="item.NewHouseType==5" src="../../assets/img/tongji/room4.png" alt /> <div class="right">
<span class="font-size-12">{{item.HouseTypeName}}</span> <p>累计报名<span class="hight-font">
</div> <span v-if="orders[index] && orders[index].HouseCount">{{orders[index].HouseCount}}</span>
<div class="right"> <span v-else>0</span>
<p> </span>人，关联购物金额<span class="hight-font">
累计报名 <span v-if="orders[index] && orders[index].TotalMoney">{{orders[index].TotalMoney}}</span>
<span class="hight-font">{{orders[index].HouseCount}}</span>人，报名均价为 <span v-else>0</span>
<span class="hight-font">{{item.Unit_Price}}</span>元 </span>万，报名均价为<span class="hight-font">{{item.Unit_Price}}</span>元</p>
</p> <p>最喜爱产品<span class="hight-font">《{{item.LtName}}》</span></p>
<!-- 关联购物金额<span class="hight-font">{{orders[index].TotalMoney}}</span>万， --> </div>
<p> </div>
最喜爱产品 </div>
<span class="hight-font">《{{item.LtName}}》</span> </el-card>
</p> </el-col>
</div> <el-col :span="8" style="height: 100%;">
</div> <el-card style="height: 100%;">
</div> <div slot="header" class="clearfix">
</el-card> <el-row style="width:100%">
</el-col> <el-col :span="12" size="30">
<el-col :span="8" style="height: 100%;"> 推荐解答
<el-card style="height: 100%;"> </el-col>
<div slot="header" class="clearfix"> <!-- <el-col :span="12" class="right-title">
<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> 点赞 <i class="iconfont icondianzan1"></i> 点赞
</el-col>--> </el-col> -->
</el-row> </el-row>
</div> </div>
<div class="situ"> <div class="situ">
<div class="c">{{topOne && topOne.Content ? topOne.Content : '暂无'}}</div> <div class="c">根据对客户年龄段的统计，可以更好的了解不同年龄段客 人的喜根据对客户年龄段的统计。根据对客户年龄段的统 计，可以更好的了解不同年龄段客人的喜根据对客户年龄 段的统计</div>
<div class="bot" @click="drawer = true"> <div class="bot" @click="drawer = true">
{{BbsList.length ? '查看更多，参与讨论('+ BbsList.length +')' : '暂时还没有讨论，快来发起讨论吧~'}} 查看更多，参与讨论(1)
<i <i class="el-icon-d-arrow-right"></i>
class="el-icon-d-arrow-right" </div>
></i> </div>
</div> </el-card>
</div> </el-col>
</el-card> </el-row>
</el-col>
</el-row>
</div> </div>
<el-drawer size="695px" :visible.sync="drawer" direction="rtl" :with-header="false"> <el-drawer
<discussBox :type="discussID" /> size='695px'
:visible.sync="drawer"
direction="rtl"
:with-header="false">
<discussBox :id="discussID"/>
</el-drawer> </el-drawer>
</div> </div>
</template> </template>
<script> <script>
import sexChart from "./model/sexChart"; import sexChart from './model/sexChart'
import shopChart from "./model/shopChart"; import shopChart from './model/shopChart'
import discussBox from "./model/discussBox"; import discussBox from "./model/discussBox";
export default { export default {
components: { components: {
sexChart, sexChart,
shopChart, shopChart,
discussBox discussBox
},
data() {
return {
discussID: 0,
drawer: false,
chartData: [0, 0],
shopChartData: [],
loading: false,
strArr: ["70平米以下", "71-90平米", "91-120平米", "未知"],
orders: [],
orderList: [],
discussID: 15,
BbsList: [],
topOne: {}
};
},
watch: {},
mounted() {
this.GetSexOrderList();
this.getOrderInfo();
this.GetBbsListByType()
},
methods: {
GetBbsListByType() {
this.apipost(
"/api/Customer/GetBbsListByType",
{ t: this.discussID },
res => {
this.BbsList = res.data.data;
if (this.BbsList && this.BbsList.length > 0) {
this.topOne = this.BbsList[0];
this.BbsList.forEach(x => {
if (x.Likes > this.topOne.Likes) {
this.topOne = x;
}
});
}
}
);
}, },
GetSexOrderList() { data() {
this.loading = true; return {
this.apipost("/api/Statistic/GetHouseShopList", {}, res => { discussID: 0,
this.loading = false; drawer: false,
if (res.data.resultCode == 1) { chartData: [0, 0],
let contHouse = shopChartData: [],
res.data.data[0].HouseCount + loading: false,
res.data.data[1].HouseCount + strArr: ["70平米以下","71-90平米","91-120平米","未知"],
res.data.data[2].HouseCount + orders:[],
res.data.data[3].HouseCount, orderList:[],
one = res.data.data[0].HouseCount, colorArr:["#0D2481","#FFA475","#99BD7B","#D2C9F1","#6EBCE2"],
two = res.data.data[1].HouseCount, };
three = res.data.data[2].HouseCount, },watch:{
four = res.data.data[3].HouseCount,
contNum = },
res.data.data[0].TotalMoney + mounted() {
res.data.data[1].TotalMoney + this.GetSexOrderList();
res.data.data[2].TotalMoney + this.getOrderInfo();
res.data.data[3].TotalMoney,
oneN = res.data.data[0].TotalMoney,
twoN = res.data.data[1].TotalMoney,
threeN = res.data.data[2].TotalMoney,
fourN = res.data.data[3].TotalMoney;
let chartData = [],
shopChartData = [];
chartData.push(((one / contHouse) * 100).toFixed(2));
chartData.push(((two / contHouse) * 100).toFixed(2));
chartData.push(((three / contHouse) * 100).toFixed(2));
chartData.push(((four / contHouse) * 100).toFixed(2));
shopChartData.push({
num: Number(((oneN / contNum) * 100).toFixed(2)),
color: "#0D2481",
text: "70平米以下"
});
shopChartData.push({
num: Number(((twoN / contNum) * 100).toFixed(2)),
color: "#FFA475",
text: "71-90平米"
});
shopChartData.push({
num: Number(((threeN / contNum) * 100).toFixed(2)),
color: "#99BD7B",
text: "91-120平米"
});
shopChartData.push({
num: Number(((fourN / contNum) * 100).toFixed(2)),
color: "#D2C9F1",
text: "未知"
});
this.chartData = chartData;
this.shopChartData = shopChartData;
this.orders = res.data.data;
} else {
}
});
}, },
getOrderInfo() { methods: {
this.apipost("/api/Statistic/GetHouseOrderList", {}, res => { GetSexOrderList(){
if (res.data.resultCode == 1) { let that=this;
this.orderList = res.data.data; this.loading = true
this.apipost("/api/Statistic/GetHouseShopList", {}, res => {
this.loading = false;
if(res.data.resultCode==1){
let chartData = [], shopChartData = [];
let data=res.data.data;
if(data.length==0){
chartData = [0, 0, 0, 0, 0];
let strArr = this.strArr;
for (let i = 0; i < 5; i++) {
shopChartData.push({
num: 0,
color: that.colorArr[i],
text: strArr[i]
});
}
}
else{
this.strArr=[];
let contHouse=0;
let contNum=0;
data.forEach(item=>{
this.strArr.push(item.HouseTypeName);
contHouse+=item.HouseCount;
contNum+=item.TotalMoney;
})
data.forEach((item,i)=>{
chartData.push(parseFloat(((item.HouseCount/contHouse)*100).toFixed(2)));
shopChartData.push({
num: parseFloat(((item.TotalMoney/contNum)*100).toFixed(2)),
color: that.colorArr[i],
text: that.strArr[i]
});
})
}
// let contHouse = res.data.data[0].HouseCount + res.data.data[1].HouseCount+ res.data.data[2].HouseCount+ res.data.data[3].HouseCount,
// one = res.data.data[0].HouseCount,
// two = res.data.data[1].HouseCount,
// three = res.data.data[2].HouseCount,
// four= res.data.data[3].HouseCount,
// contNum = res.data.data[0].TotalMoney + res.data.data[1].TotalMoney+ res.data.data[2].TotalMoney+ res.data.data[3].TotalMoney,
// oneN = res.data.data[0].TotalMoney,
// twoN = res.data.data[1].TotalMoney,
// threeN = res.data.data[2].TotalMoney,
// fourN = res.data.data[3].TotalMoney;
// chartData.push(
// ((one/contHouse)*100).toFixed(2)
// )
// chartData.push(
// ((two/contHouse)*100).toFixed(2)
// )
// chartData.push(
// ((three/contHouse)*100).toFixed(2)
// )
// chartData.push(
// ((four/contHouse)*100).toFixed(2)
// )
// shopChartData.push(
// {
// num: Number(((oneN/contNum)*100).toFixed(2)),
// color: "#0D2481",
// text: '70平米以下'
// }
// )
// shopChartData.push(
// {
// num: Number(((twoN/contNum)*100).toFixed(2)),
// color: "#FFA475",
// text: '71-90平米'
// }
// )
// shopChartData.push(
// {
// num: Number(((threeN/contNum)*100).toFixed(2)),
// color: "#99BD7B",
// text: '91-120平米'
// }
// )
// shopChartData.push(
// {
// num: Number(((fourN/contNum)*100).toFixed(2)),
// color: "#D2C9F1",
// text: '未知'
// }
// )
this.chartData = chartData
this.shopChartData = shopChartData
this.orders=res.data.data;
}
});
},
getOrderInfo(){
this.apipost("/api/Statistic/GetHouseOrderList", {}, res => {
if(res.data.resultCode==1){
this.orderList=res.data.data;
}
});
} }
});
} }
} }
};
</script> </script>
\ No newline at end of file
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