Skip to content

C
CRM
Commit ebdb05fc authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 8a3ccb8f
Hide whitespace changes
Inline Side-by-side
Showing with 418 additions and 405 deletions
src/components/statistics/Opinionpolls.vue
View file @ ebdb05fc
<style> <style>
.sex{ .sex {
height: calc(100% - 25px); height: calc(100% - 25px);
} }
.statistics-title {
font-size: 24px; .statistics-title {
color: #111; font-size: 24px;
margin-bottom: 30px; color: #111;
font-family: perfectFont; margin-bottom: 30px;
} font-family: perfectFont;
.sex .conten-box{ }
display: flex;
flex-direction: column; .sex .conten-box {
height: calc(100% - 62px); display: flex;
} flex-direction: column;
.sex .conten-box .el-card .el-card__header { height: calc(100% - 62px);
font-weight: normal !important; }
}
.Opinionpolls .conten-box .top{ .sex .conten-box .el-card .el-card__header {
flex: 1!important; font-weight: normal !important;
margin-bottom: 25px; }
}
.sex .conten-box .bottom{ .Opinionpolls .conten-box .top {
flex: .8; flex: 1 !important;
} margin-bottom: 25px;
.sex .conten-box .left{ }
height: 100%;
} .sex .conten-box .bottom {
.sex .conten-box .el-card.blue { flex: .8;
background: #0D2481!important; }
color: #fff !important;
height: calc(100% - 2px); .sex .conten-box .left {
} height: 100%;
.sex .conten-box .el-card .el-card__body { }
padding: 20px;
height: calc(100% - 98px); .sex .conten-box .el-card.blue {
max-height: calc(100% - 98px); background: #0D2481 !important;
} color: #fff !important;
.sex .conten-box .img { height: calc(100% - 2px);
display: flex; }
align-items: flex-end;
text-align: center; .sex .conten-box .el-card .el-card__body {
padding: 20px 70px 10px 70px!important; padding: 20px;
justify-content: space-between; height: calc(100% - 98px);
font-size: 14px; max-height: calc(100% - 98px);
} }
.sex .sjsm{
display: flex; .sex .conten-box .img {
flex-direction: column; display: flex;
} align-items: flex-end;
.sex .sjsm>div{ text-align: center;
margin-bottom: 20px; padding: 20px 70px 10px 70px !important;
} justify-content: space-between;
.sex .sjsm>div{ font-size: 14px;
flex: 1; }
background:rgba(244,245,249,1);
display: flex; .sex .sjsm {
align-items: center; display: flex;
justify-content: space-between; flex-direction: column;
padding: 20px; }
}
.sex .sjsm>div .left{ .sex .sjsm>div {
display: flex; margin-bottom: 20px;
align-items: center; }
}
.sex .sjsm>div .left img{ .sex .sjsm>div {
padding-right: 10px; flex: 1;
} background: rgba(244, 245, 249, 1);
.sex .sjsm>div .right{ display: flex;
text-align: right; align-items: center;
color: #888888; justify-content: space-between;
font-size: 12px; padding: 20px;
} }
.sex .hight-font{
color: #0D2481 !important; .sex .sjsm>div .left {
font-size: 14px; display: flex;
} align-items: center;
.sex .secondDiv .el-card .el-card__header{ }
border: none!important;
font-size: 14px; .sex .sjsm>div .left img {
color:#111111; padding-right: 10px;
font-weight: bold!important; }
padding: 18px 20px 0 18px!important;
} .sex .sjsm>div .right {
.Opinionpolls .countryUl li{ text-align: right;
position: relative; color: #888888;
padding: 30px 0; font-size: 12px;
border-bottom: 1px solid #E2E4EF; }
display: flex;
align-items: center; .sex .hight-font {
} color: #0D2481 !important;
.Opinionpolls .countryUl li .rightSpan{ font-size: 14px;
position: absolute; }
right: 0;
bottom: 32px; .sex .secondDiv .el-card .el-card__header {
} border: none !important;
font-size: 14px;
.Opinionpolls .countryUl li img{ color: #111111;
width:40px; font-weight: bold !important;
height:26px; padding: 18px 20px 0 18px !important;
border-radius:6px; }
} .Opinionpolls .countryUl li {
.Opinionpolls .index{ position: relative;
font-weight: bold; padding: 30px 0;
margin-right:20px; border-bottom: 1px solid #E2E4EF;
} display: flex;
.Opinionpolls .countryUl li:nth-child(1) .index{ align-items: center;
color:#FFA475 }
}
.Opinionpolls .countryUl li:nth-child(2) .index{ .Opinionpolls .countryUl li .rightSpan {
color:#94B877 position: absolute;
} right: 0;
.Opinionpolls .countryUl li:nth-child(3) .index{ bottom: 32px;
color:#0D2481 }
}
.Opinionpolls .countryUl li:nth-child(4) .index{ .Opinionpolls .countryUl li img {
color:#55BDE9 width: 40px;
} height: 26px;
.Opinionpolls .timeUl li{ border-radius: 6px;
position: relative;
}
}
.timeChart{ .Opinionpolls .index {
width: 100%; font-weight: bold;
height: 386px; margin-right: 20px;
} }
.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: 386px;
}
</style> </style>
<template> <template>
<div class="sex Opinionpolls" v-loading="loading"> <div class="sex Opinionpolls" v-loading="loading">
<div class="statistics-title bold18">意见调查统计</div> <div class="statistics-title bold18">意见调查统计</div>
<div class="conten-box"> <div class="conten-box">
<el-row :gutter="25" class="top"> <el-row :gutter="25" class="top">
<el-col :span="6" style="height: 450px"> <el-col :span="6" style="height: 450px">
<el-card style="height: calc(100% - 2px);background:#FFA475"> <el-card style="height: calc(100% - 2px);background:#FFA475">
<p style="color:#FDFEFE;margin-top:15px;font-size:14px" >意见调查总和</p> <p style="color:#FDFEFE;margin-top:15px;font-size:14px">意见调查总和</p>
<div> <div>
<img style="width:80%;display:block;margin:0 auto" src="../../assets/img/tongji/yj1.png" alt=""> <img style="width:80%;display:block;margin:0 auto" src="../../assets/img/tongji/yj1.png"
<img style="width:100%;" src="../../assets/img/tongji/yj2.png" alt=""> alt="">
</div> <img style="width:100%;" src="../../assets/img/tongji/yj2.png" alt="">
</el-card> </div>
</el-col> </el-card>
<el-col :span="18" class="left"> </el-col>
<el-card> <el-col :span="18" class="left">
<div slot="header" class="clearfix"> <el-card>
<span>景点评分（前10名）</span> <div slot="header" class="clearfix">
</div> <span>景点评分（前10名）</span>
<el-row :gutter="80" style="height: 100%;">
<!-- <sexChart v-if="isShowTop" style="height:350px;" :myData="chartData" :strArr="strArr"/> -->
<div id="tenTopchart" style="height:350px;" class="tenTopchart" ref="tenTopchart"></div>
</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 v-if="isShowTop" :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 v-for="(item,index) in dataList.countryList" :key="index">
<span class="index" style="font-size:14px">NO.{{index+1}}</span>
<!-- <img style="margin:0 15px" src="../../assets/img/tongji/cj.png" alt=""> -->
<span style="font-size:18px;">{{item.ItemName}}</span>
<span class="rightSpan">{{item.OrderCount}}<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 dataList.GuestSurveyShopList" :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.SeasonCount}}</span>人，报名均价为<span class="hight-font">{{item.Unit_Price}}</span>元</p>
<!-- ，关联购物金额<span class="hight-font">{{item.TotalMoney}}</span>万 -->
<p>最喜爱产品<span class="hight-font">《{{item.LtName}}》</span></p>
</div>
</div> </div>
</div> <el-row :gutter="80" style="height: 100%;">
</el-card> <div id="tenTopchart" style="height:350px;" class="tenTopchart" ref="tenTopchart"></div>
</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> </el-row>
</div> </el-card>
<div class="situ"> </el-col>
<div class="c">根据对客户意见调查的统计可以，更好的了解客人的喜好，消费能力的判读，从而快速的推荐团队给客人</div>
<div class="bot" @click="drawer = true"> </el-row>
查看更多，参与讨论(1) <el-row :gutter="22" class="secondDiv" style="margin-bottom:30px">
<i class="el-icon-d-arrow-right"></i> <el-col :span="9" style="height: 100%;">
<el-card style="height: calc(100% - 2px);">
<div slot="header" class="clearfix">
<span>首选印象产品</span>
</div>
<shopChart v-if="isShowTop" :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 v-for="(item,index) in dataList.countryList" :key="index">
<span class="index" style="font-size:14px">NO.{{index+1}}</span>
<!-- <img style="margin:0 15px" src="../../assets/img/tongji/cj.png" alt=""> -->
<span style="font-size:18px;">{{item.ItemName}}</span>
<span class="rightSpan">{{item.OrderCount}}<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 dataList.GuestSurveyShopList" :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.SeasonCount}}</span>人，报名均价为<span
class="hight-font">{{item.Unit_Price}}</span>元</p>
<!-- ，关联购物金额<span class="hight-font">{{item.TotalMoney}}</span>万 -->
<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-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> </div>
</div> </el-card>
</el-card> </el-col>
</el-col> </el-row>
</el-row> </div>
<el-drawer size='695px' :visible.sync="drawer" direction="rtl" :with-header="false">
<discussBox :id="discussID" />
</el-drawer>
</div> </div>
<el-drawer
size='695px'
:visible.sync="drawer"
direction="rtl"
:with-header="false">
<discussBox :id="discussID"/>
</el-drawer>
</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() { data() {
return { return {
discussID: 0, discussID: 0,
drawer: false, drawer: false,
chartData: [], chartData: [],
shopChartData: [], shopChartData: [],
SexOrder: [], SexOrder: [],
loading: false, loading: false,
strArr: [], strArr: [],
orders:[], orders: [],
dataList:{}, dataList: {},
isShowTop:false, isShowTop: false,
//出游日期 //出游日期
chuyouDate:[], chuyouDate: [],
chuyouList:[], chuyouList: [],
};
},watch:{
},
mounted() {
this.getData();
},
methods: {
initTimeChart(){
var myChart = this.$echarts.init(document.getElementById('timeChart'));
var option={
xAxis: {
axisTick: {
show: false
},
axisLine: {
show: false
},
type: 'category',
data: this.chuyouDate
},
yAxis: {
show : false,
type: 'value'
},
series: [{
data: this.chuyouList,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
barWidth: '20',
itemStyle: {
color: '#0D2481'
}
}]
}; };
myChart.setOption(option);
}, },
//初始化top10插件 watch: {
initTopTen(){
let myChart = this.$echarts.init(document.getElementById('tenTopchart')); },
let option = { mounted() {
grid: { this.getData();
left: '75',
right: '75' },
}, methods: {
xAxis: { initTimeChart() {
data: this.strArr, var myChart = this.$echarts.init(document.getElementById('timeChart'));
type: 'category', var option = {
axisLabel: { xAxis: {
color: '#999999' axisTick: {
show: false
},
axisLine: {
show: false
},
type: 'category',
data: this.chuyouDate
}, },
axisLine: { yAxis: {
show: false show: false,
type: 'value'
}, },
}, series: [{
yAxis: { data: this.chuyouList,
type: 'value', type: 'bar',
axisLine: { showBackground: true,
show: false backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
barWidth: '20',
itemStyle: {
color: '#0D2481'
}
}]
};
myChart.setOption(option);
},
//初始化top10插件
initTopTen() {
let myChart = this.$echarts.init(document.getElementById('tenTopchart'));
let option = {
grid: {
left: '75',
right: '75'
}, },
axisLabel: { xAxis: {
color: '#999999', data: this.strArr,
formatter: '{value} %' type: 'category',
axisLabel: {
color: '#999999'
},
axisLine: {
show: false
},
}, },
max: 100, yAxis: {
}, type: 'value',
series: [{ axisLine: {
data: this.chartData, show: false
type: 'bar', },
itemStyle: { axisLabel: {
color: '#FFA475', color: '#999999',
formatter: '{value} %'
},
max: 100,
}, },
barWidth: '44' series: [{
}] data: this.chartData,
}; type: 'bar',
myChart.setOption(option); itemStyle: {
}, color: '#FFA475',
getData(){ },
this.loading = true barWidth: '44'
this.apipost("/api/Statistic/GetGuestSurveyList", {}, res => { }]
this.loading=false; };
if(res.data.resultCode==1){ myChart.setOption(option);
this.dataList=res.data.data; },
this.chartData=[]; getData() {
this.strArr=[]; this.loading = true
var totalTenCount=0; this.apipost("/api/Statistic/GetGuestSurveyList", {}, res => {
var totalChuyou=0; this.loading = false;
this.dataList.TopTenScenicList.forEach((x,index) => { if (res.data.resultCode == 1) {
this.strArr.push('TOP'+(index+1)); this.dataList = res.data.data;
totalTenCount+=x.OrderCount; this.chartData = [];
}); this.strArr = [];
this.dataList.TopTenScenicList.forEach((x,index) => { var totalTenCount = 0;
this.chartData.push(); var totalChuyou = 0;
this.chartData.push(parseFloat(((x.OrderCount/totalTenCount)*100).toFixed(2))); this.dataList.TopTenScenicList.forEach((x, index) => {
}); this.strArr.push(x.ItemName);
//获取总的出游首选 totalTenCount += x.OrderCount;
this.dataList.souXuanList.forEach(x=>{ });
totalChuyou+=x.OrderCount; this.dataList.TopTenScenicList.forEach((x, index) => {
}) this.chartData.push();
var hefeng = this.dataList.souXuanList[0].OrderCount this.chartData.push(parseFloat(((x.OrderCount / totalTenCount) * 100)
var xierdunSj = this.dataList.souXuanList[1].OrderCount .toFixed(2)));
var dantuan = this.dataList.souXuanList[2].OrderCount });
var xierdun = this.dataList.souXuanList[3].OrderCount //获取总的出游首选
//和风畅享系列 this.dataList.souXuanList.forEach(x => {
this.shopChartData.push( totalChuyou += x.OrderCount;
{ })
num: Number(((hefeng/totalChuyou)*100).toFixed(0)), var hefeng = this.dataList.souXuanList[0].OrderCount
var xierdunSj = this.dataList.souXuanList[1].OrderCount
var dantuan = this.dataList.souXuanList[2].OrderCount
var xierdun = this.dataList.souXuanList[3].OrderCount
//和风畅享系列
this.shopChartData.push({
num: Number(((hefeng / totalChuyou) * 100).toFixed(0)),
color: "#0D2481", color: "#0D2481",
text: '和风畅享系列' text: '和风畅享系列'
} })
) this.shopChartData.push({
this.shopChartData.push( num: Number(((xierdunSj / totalChuyou) * 100).toFixed(0)),
{
num: Number(((xierdunSj/totalChuyou)*100).toFixed(0)),
color: "#FFA97C", color: "#FFA97C",
text: '希尔顿假期<升级版>' text: '希尔顿假期<升级版>'
} })
) this.shopChartData.push({
this.shopChartData.push( num: Number(((dantuan / totalChuyou) * 100).toFixed(0)),
{
num: Number(((dantuan/totalChuyou)*100).toFixed(0)),
color: "#99BD7B", color: "#99BD7B",
text: '单团小团系列(本州大阪.东京)' text: '单团小团系列(本州大阪.东京)'
} })
) this.shopChartData.push({
this.shopChartData.push( num: Number(((xierdun / totalChuyou) * 100).toFixed(0)),
{
num: Number(((xierdun/totalChuyou)*100).toFixed(0)),
color: "#D2C9F1", color: "#D2C9F1",
text: '希尔顿假期系列' text: '希尔顿假期系列'
} })
)
//遍历出游计划
//遍历出游计划 this.chuyouDate = [];
this.chuyouDate=[]; this.chuyouList = [];
this.chuyouList=[]; this.dataList.chuyouList.forEach(x => {
this.dataList.chuyouList.forEach(x=>{ this.chuyouDate.push(x.ItemName);
this.chuyouDate.push(x.ItemName); this.chuyouList.push(x.OrderCount);
this.chuyouList.push(x.OrderCount); })
})
this.isShowTop = true;
this.isShowTop=true; this.initTimeChart();
this.initTimeChart(); this.initTopTen();
this.initTopTen(); } else {
}else{ this.$message.error(res.data.message);
this.$message.error(res.data.message); }
}
});
}); },
}, }
} }
}
</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