Commit 00eb0497 authored by zhengke's avatar zhengke

增加住房统计

parent 69dc0802
...@@ -30,7 +30,7 @@ export default { ...@@ -30,7 +30,7 @@ export default {
@import './assets/css/tablevoerride.css'; @import './assets/css/tablevoerride.css';
@import './assets/global/font.css'; @import './assets/global/font.css';
@import '//at.alicdn.com/t/font_1627123_79sjd75n6du.css'; @import '//at.alicdn.com/t/font_1627123_c80k77dlq7f.css';
@import url('//at.alicdn.com/t/font_1627123_grz80mbm3sv.css'); @import url('//at.alicdn.com/t/font_1627123_grz80mbm3sv.css');
/* @import './assets/css/common.css'; */ /* @import './assets/css/common.css'; */
@import './assets/css/init.css'; @import './assets/css/init.css';
......
...@@ -197,7 +197,7 @@ ...@@ -197,7 +197,7 @@
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>数据说明</span> <span>数据说明</span>
</div> </div>
<div class="sjsm"> <div class="sjsm" style="height:225px;">
<div v-for="(item,index) in dataList" :key="index"> <div v-for="(item,index) in dataList" :key="index">
<div class="left"> <div class="left">
<img :src="getImgSrc(item.FestivalName)" alt=""> <img :src="getImgSrc(item.FestivalName)" alt="">
...@@ -279,6 +279,7 @@ export default { ...@@ -279,6 +279,7 @@ export default {
this.totalCount+=x.OrderCount; this.totalCount+=x.OrderCount;
}) })
} }
}); });
}, },
//获取对应节日图片 //获取对应节日图片
......
...@@ -30,7 +30,7 @@ export default { ...@@ -30,7 +30,7 @@ export default {
name:'' name:''
} }
// obj.value=((x.OrderCount / this.totalCount * 10000) / 100.00).toFixed(1); // obj.value=((x.OrderCount / this.totalCount * 10000) / 100.00).toFixed(1);
obj.value=x.OrderCount; obj.value=x.ShopMoney;
obj.name=x.FestivalName obj.name=x.FestivalName
this.data.push(obj); this.data.push(obj);
}); });
......
<style>
.sex{
height: calc(100% - 25px);
}
.statistics-title {
font-size: 24px;
color: #111;
margin-bottom: 30px;
font-family: perfectFont;
}
.sex .conten-box{
display: flex;
flex-direction: column;
height: calc(100% - 62px);
}
.sex .conten-box .el-card .el-card__header {
font-weight: normal !important;
}
.sex .conten-box .top{
flex: 1.2;
margin-bottom: 25px;
}
.sex .conten-box .bottom{
flex: .8;
}
.sex .conten-box .left{
height: 100%;
}
.sex .conten-box .el-card.blue {
background: #0D2481!important;
color: #fff !important;
height: calc(100% - 2px);
}
.sex .conten-box .el-card .el-card__body {
padding: 20px;
height: calc(100% - 98px);
max-height: calc(100% - 98px);
}
.sex .conten-box .img {
display: flex;
align-items: flex-end;
text-align: center;
padding: 20px 70px 10px 70px!important;
justify-content: space-between;
font-size: 14px;
}
.sex .sjsm{
display: flex;
flex-direction: column;
}
.sex .sjsm>div:nth-child(1){
margin-bottom: 20px;
}
.sex .sjsm>div{
flex: 1;
background:rgba(244,245,249,1);
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
}
.sex .sjsm>div .left{
display: flex;
align-items: center;
}
.sex .sjsm>div .left img{
padding-right: 10px;
}
.sex .sjsm>div .right{
text-align: right;
color: #888888;
font-size: 12px;
}
.sex .hight-font{
color: #0D2481 !important;
font-size: 14px;
}
</style>
<template>
<div class="sex" 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/zhufang.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="16" style="height: 100%;">
<el-card style="height: 100%;">
<div slot="header" class="clearfix">
<span>数据说明</span>
</div>
<div style="height: 100%;" class="sjsm">
<div v-for="(item, index) in orderList" :key="index">
<div class="left">
<img v-if="item.NewHouseType==1" src="../../assets/img/tongji/room1.png" alt="">
<img v-if="item.NewHouseType==2" src="../../assets/img/tongji/room2.png" alt="">
<img v-if="item.NewHouseType==3" src="../../assets/img/tongji/room3.png" alt="">
<img v-if="item.NewHouseType==5" src="../../assets/img/tongji/room4.png" alt="">
<span class="font-size-12">{{item.HouseTypeName}}</span>
</div>
<div class="right">
<p>累计报名<span class="hight-font">{{orders[index].HouseCount}}</span>人,关联购物金额<span class="hight-font">{{orders[index].TotalMoney}}</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="c">根据对客户年龄段的统计,可以更好的了解不同年龄段客 人的喜根据对客户年龄段的统计。根据对客户年龄段的统 计,可以更好的了解不同年龄段客人的喜根据对客户年龄 段的统计</div>
<div class="bot" @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 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: [0, 0],
shopChartData: [],
loading: false,
strArr: ["70平米以下","71-90平米","91-120平米","未知"],
orders:[],
orderList:[],
};
},watch:{
},
mounted() {
this.GetSexOrderList();
this.getOrderInfo();
},
methods: {
GetSexOrderList(){
this.loading = true
this.apipost("/api/Statistic/GetHouseShopList", {}, res => {
this.loading = false;
if(res.data.resultCode==1){
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;
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(){
this.apipost("/api/Statistic/GetHouseOrderList", {}, res => {
if(res.data.resultCode==1){
this.orderList=res.data.data;
}
});
}
}
}
</script>
\ No newline at end of file
...@@ -203,6 +203,14 @@ export default new Router({ ...@@ -203,6 +203,14 @@ export default new Router({
title: "资产" title: "资产"
} }
}, },
{
path: "/roomStatistical",
name: "roomStatistical",
component: ()=>import('./components/statistics/roomStatistical.vue'),
meta: {
title: "住房统计"
}
},
{ {
path: "/season", path: "/season",
name: "season", name: "season",
......
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