Commit c1312b20 authored by 黄媛媛's avatar 黄媛媛

update

parent 7b2532e1
<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;
}
.Opinionpolls .conten-box .top{
flex: 1!important;
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;
}
.sex .secondDiv .el-card .el-card__header{
border: none!important;
font-size: 14px;
color:#111111;
font-weight: bold!important;
padding: 18px 20px 0 18px!important;
}
.Opinionpolls .countryUl li{
position: relative;
padding: 20px 0;
border-bottom: 1px solid #E2E4EF;
display: flex;
align-items: center;
}
.Opinionpolls .countryUl li .rightSpan{
position: absolute;
right: 0;
bottom: 20px;
}
.Opinionpolls .countryUl li img{
width:40px;
height:26px;
border-radius:6px;
}
.Opinionpolls .countryUl li:nth-child(1) .index{
color:#FFA475
}
.Opinionpolls .countryUl li:nth-child(2) .index{
color:#94B877
}
.Opinionpolls .countryUl li:nth-child(3) .index{
color:#0D2481
}
.Opinionpolls .countryUl li:nth-child(4) .index{
color:#55BDE9
}
.Opinionpolls .timeUl li{
position: relative;
}
.timeChart{
width: 100%;
height: 300px;
}
</style>
<template>
<div class="sex Opinionpolls" 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="6" style="height: 100%;">
<el-card style="height: calc(100% - 2px);background:#FFA475">
<p style="color:#FDFEFE;margin-top:15px;font-size:14px" >意见调查总和</p>
<div>
<img style="width:80%;display:block;margin:0 auto" src="../../assets/img/tongji/yj1.png" alt="">
<img style="width:100%;" src="../../assets/img/tongji/yj2.png" alt="">
</div>
</el-card>
</el-col>
<el-col :span="18" class="left">
<el-card>
<div slot="header" class="clearfix">
<span>季节统计</span>
</div>
<el-row :gutter="80" style="height: 100%;">
<sexChart :myData="chartData" :strArr="strArr"/>
</el-row>
</el-card>
</el-col>
</el-row>
<el-row :gutter="22" class="secondDiv" style="margin-bottom:30px">
<el-col :span="9" style="height: 100%;">
<el-card style="height: calc(100% - 2px);">
<div slot="header" class="clearfix">
<span>首选印象产品</span>
</div>
<shopChart :shopChartData="shopChartData"/>
</el-card>
</el-col>
<el-col :span="7">
<el-card style="height: calc(100% - 2px);">
<div slot="header" class="clearfix">
<span>下次出行时间</span>
</div>
<!-- <sexChart :myData="chartData" :strArr="strArr"/> -->
<div id="timeChart" class="timeChart" ref="timeChart"></div>
</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>
</div>
<ul class="countryUl">
<li>
<span class="index" style="font-size:14px">NO.1</span>
<img style="margin:0 15px" src="../../assets/img/tongji/cj.png" alt="">
<span style="font-size:18px;">日本</span>
<span class="rightSpan">16520<span class="font-size-12"></span> </span>
</li>
<li>
<span class="index" style="font-size:14px">NO.1</span>
<img style="margin:0 15px" src="../../assets/img/tongji/cj.png" alt="">
<span style="font-size:18px;">日本</span>
<span class="rightSpan">16520<span class="font-size-12"></span> </span>
</li>
<li>
<span class="index" style="font-size:14px">NO.1</span>
<img style="margin:0 15px" src="../../assets/img/tongji/cj.png" alt="">
<span style="font-size:18px;">日本</span>
<span class="rightSpan">16520<span class="font-size-12"></span> </span>
</li>
<li>
<span class="index" style="font-size:14px">NO.1</span>
<img style="margin:0 15px" src="../../assets/img/tongji/cj.png" alt="">
<span style="font-size:18px;">日本</span>
<span class="rightSpan">16520<span class="font-size-12"></span> </span>
</li>
</ul>
</el-card>
</el-col>
</el-row>
<el-row :gutter="22" 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 orders" :key="index">
<div class="left">
<img v-if="item.SeasonType === 1" src="../../assets/img/tongji/cj.png" alt="">
<img v-if="item.SeasonType === 2" src="../../assets/img/tongji/xj.png" alt="">
<img v-if="item.SeasonType === 3" src="../../assets/img/tongji/qj.png" alt="">
<img v-if="item.SeasonType === 4" src="../../assets/img/tongji/dj.png" alt="">
<span class="font-size-12">{{item.SeasonTypeName}}</span>
</div>
<div class="right">
<p>累计报名<span class="hight-font">{{item.StudentCount}}</span>人,关联购物金额<span class="hight-font">{{item.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: [1,2,3,4],
shopChartData: [],
SexOrder: [],
loading: false,
strArr: ['春季', '夏季', '秋季', '冬季'],
orders:[]
};
},watch:{
},
mounted() {
this.GetSexOrderList()
this.initTimeChart();
},
methods: {
initTimeChart(){
// let myChart = this.$echarts.init(this.$refs.timeChart);
var myChart = this.$echarts.init(document.getElementById('timeChart'));
console.log("myChart",myChart)
let option={
xAxis: {
// show : false,
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
// show : false,
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};
console.log("option",option)
myChart.setOption(option);
},
GetSexOrderList(){
this.loading = true
this.apipost("/api/Statistic/GetSeasonShopList", {}, res => {
console.log("dsafsaf",res);
let contShop = res.data.data[0].TotalMoney + res.data.data[1].TotalMoney+ res.data.data[2].TotalMoney+ res.data.data[3].TotalMoney,
one = res.data.data[0].TotalMoney,
two = res.data.data[1].TotalMoney,
three = res.data.data[2].TotalMoney,
four= res.data.data[3].TotalMoney,
contNum = res.data.data[0].SeasonCount + res.data.data[1].SeasonCount+ res.data.data[2].SeasonCount+ res.data.data[3].SeasonCount,
oneN = res.data.data[0].SeasonCount,
twoN = res.data.data[1].SeasonCount,
threeN = res.data.data[2].SeasonCount,
fourN = res.data.data[3].SeasonCount;
let chartData = [], shopChartData = [];
chartData.push(
((oneN/contNum)*100).toFixed(2)
)
chartData.push(
((twoN/contNum)*100).toFixed(2)
)
chartData.push(
((threeN/contNum)*100).toFixed(2)
)
chartData.push(
((fourN/contNum)*100).toFixed(2)
)
shopChartData.push(
{
num: Number(((one/contShop)*100).toFixed(2)),
color: "#0D2481",
text: '春季'
}
)
shopChartData.push(
{
num: Number(((two/contShop)*100).toFixed(2)),
color: "#FFA475",
text: '夏季'
}
)
shopChartData.push(
{
num: Number(((three/contShop)*100).toFixed(2)),
color: "#99BD7B",
text: '秋季'
}
)
shopChartData.push(
{
num: Number(((four/contShop)*100).toFixed(2)),
color: "#D2C9F1",
text: '冬季'
}
)
this.chartData = chartData
this.shopChartData = shopChartData
this.orders=res.data.data;
this.getOrders()
});
},
getOrders(){
this.apipost("/api/Statistic/GetSeasonOrderList", {}, res => {
console.log(res)
res.data.data.forEach(x => {
this.orders[x.NewSeasonType - 1].LtName = x.LtName;
this.orders[x.NewSeasonType - 1].Unit_Price = x.Unit_Price;
});
this.loading = false
});
}
}
}
</script>
\ No newline at end of file
...@@ -219,9 +219,9 @@ export default { ...@@ -219,9 +219,9 @@ export default {
this.strArr=[]; this.strArr=[];
let data=res.data.data; let data=res.data.data;
// data.forEach(item=>{ data.forEach(item=>{
// this.strArr.push(item.TravelTypeName) this.strArr.push(item.TravelTypeName)
// }) })
let contShop = res.data.data[0].TotalMoney + res.data.data[1].TotalMoney+ res.data.data[2].TotalMoney+ res.data.data[3].TotalMoney+ res.data.data[4].TotalMoney, let contShop = res.data.data[0].TotalMoney + res.data.data[1].TotalMoney+ res.data.data[2].TotalMoney+ res.data.data[3].TotalMoney+ res.data.data[4].TotalMoney,
one = res.data.data[0].TotalMoney, one = res.data.data[0].TotalMoney,
two = res.data.data[1].TotalMoney, two = res.data.data[1].TotalMoney,
...@@ -305,6 +305,7 @@ export default { ...@@ -305,6 +305,7 @@ export default {
} }
this.chartData = chartData this.chartData = chartData
console.log("this.chartData",this.chartData)
this.shopChartData = shopChartData this.shopChartData = shopChartData
this.orders=res.data.data; this.orders=res.data.data;
......
...@@ -227,6 +227,15 @@ export default new Router({ ...@@ -227,6 +227,15 @@ export default new Router({
title: "季节" title: "季节"
} }
}, },
{
path: "/Opinionpolls",
name: "Opinionpolls",
component: ()=>import('./components/statistics/Opinionpolls.vue'),
meta: {
title: "意见调查"
}
},
{ {
path: "/unit", path: "/unit",
name: "unit", name: "unit",
......
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