Commit 26ec94cf authored by zhengke's avatar zhengke

修改

parent 7bc01a48
......@@ -49,7 +49,7 @@
display: flex;
flex-direction: column;
}
.sex .sjsm>div:nth-child(1){
.sex .sjsm>div{
margin-bottom: 20px;
}
.sex .sjsm>div{
......@@ -85,7 +85,7 @@
}
.Opinionpolls .countryUl li{
position: relative;
padding: 20px 0;
padding: 30px 0;
border-bottom: 1px solid #E2E4EF;
display: flex;
align-items: center;
......@@ -93,7 +93,7 @@
.Opinionpolls .countryUl li .rightSpan{
position: absolute;
right: 0;
bottom: 20px;
bottom: 32px;
}
.Opinionpolls .countryUl li img{
......@@ -102,6 +102,10 @@
border-radius:6px;
}
.Opinionpolls .index{
font-weight: bold;
margin-right:20px;
}
.Opinionpolls .countryUl li:nth-child(1) .index{
color:#FFA475
}
......@@ -140,10 +144,11 @@
<el-col :span="18" class="left">
<el-card>
<div slot="header" class="clearfix">
<span>季节统计</span>
<span>景点评分(前10名)</span>
</div>
<el-row :gutter="80" style="height: 100%;">
<sexChart :myData="chartData" :strArr="strArr"/>
<!-- <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>
......@@ -155,7 +160,7 @@
<div slot="header" class="clearfix">
<span>首选印象产品</span>
</div>
<shopChart :shopChartData="shopChartData"/>
<shopChart v-if="isShowTop" :shopChartData="shopChartData"/>
</el-card>
</el-col>
<el-col :span="7">
......@@ -170,32 +175,14 @@
<el-col :span="8" style="height: 100%;">
<el-card style="height: calc(100% - 2px);">
<div slot="header" class="clearfix">
<span>下次出行首选国家</span>
<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 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>
......@@ -209,7 +196,7 @@
<span>数据说明</span>
</div>
<div style="height: 100%;" class="sjsm">
<div v-for="(item, index) in orders" :key="index">
<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="">
......@@ -218,7 +205,7 @@
<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.SeasonCount}}</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>
......@@ -271,26 +258,29 @@ export default {
return {
discussID: 0,
drawer: false,
chartData: [1,2,3,4],
chartData: [],
shopChartData: [],
SexOrder: [],
loading: false,
strArr: ['春季', '夏季', '秋季', '冬季'],
orders:[]
strArr: [],
orders:[],
dataList:{},
isShowTop:false,
//出游日期
chuyouDate:[],
chuyouList:[],
};
},watch:{
},
mounted() {
// this.GetSexOrderList()
this.initTimeChart();
this.getData();
},
methods: {
initTimeChart(){
// let myChart = this.$echarts.init(this.$refs.timeChart);
var myChart = this.$echarts.init(document.getElementById('timeChart'));
console.log("myChart",myChart)
var option={
xAxis: {
axisTick: {
......@@ -300,100 +290,144 @@ export default {
show: false
},
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
data: this.chuyouDate
},
yAxis: {
show : false,
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
data: this.chuyouList,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
barWidth: '20',
itemStyle: {
color: '#0D2481'
}
}]
};
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()
});
//初始化top10插件
initTopTen(){
let myChart = this.$echarts.init(document.getElementById('tenTopchart'));
let option = {
grid: {
left: '50',
right: '3%'
},
xAxis: {
data: this.strArr,
type: 'category',
axisLabel: {
color: '#999999'
},
axisLine: {
show: false
},
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
axisLabel: {
color: '#999999',
formatter: '{value} %'
},
max: 100,
},
series: [{
data: this.chartData,
type: 'bar',
itemStyle: {
color: '#FFA475',
},
barWidth: '44'
}]
};
myChart.setOption(option);
},
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
getData(){
// this.loading = true
this.apipost("/api/Statistic/GetGuestSurveyList", {}, res => {
console.log(res,'ressssss');
if(res.data.resultCode==1){
this.dataList=res.data.data;
this.chartData=[];
this.strArr=[];
var totalTenCount=0;
var totalChuyou=0;
this.dataList.TopTenScenicList.forEach((x,index) => {
this.strArr.push('TOP'+(index+1));
totalTenCount+=x.OrderCount;
});
this.dataList.TopTenScenicList.forEach((x,index) => {
this.chartData.push();
this.chartData.push(parseFloat(((x.OrderCount/totalTenCount)*100).toFixed(2)));
});
//获取总的出游首选
this.dataList.souXuanList.forEach(x=>{
totalChuyou+=x.OrderCount;
})
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",
text: '和风畅享系列'
}
)
this.shopChartData.push(
{
num: Number(((xierdunSj/totalChuyou)*100).toFixed(0)),
color: "#FFA97C",
text: '希尔顿假期<升级版>'
}
)
this.shopChartData.push(
{
num: Number(((dantuan/totalChuyou)*100).toFixed(0)),
color: "#99BD7B",
text: '单团小团系列(本州大阪.东京)'
}
)
this.shopChartData.push(
{
num: Number(((xierdun/totalChuyou)*100).toFixed(0)),
color: "#D2C9F1",
text: '希尔顿假期系列'
}
)
//遍历出游计划
this.chuyouDate=[];
this.chuyouList=[];
this.dataList.chuyouList.forEach(x=>{
this.chuyouDate.push(x.ItemName);
this.chuyouList.push(x.OrderCount);
})
this.isShowTop=true;
this.initTimeChart();
this.initTopTen();
console.log(this.chartData,'chartData');
console.log(this.strArr,'strArr');
console.log(this.dataList,'datalist');
}else{
this.$message.error(res.data.message);
}
});
}
},
}
}
</script>
\ No newline at end of file
......@@ -49,7 +49,7 @@
display: flex;
flex-direction: column;
}
.sex .sjsm>div:nth-child(1){
.sex .sjsm>div{
margin-bottom: 20px;
}
.sex .sjsm>div{
......
......@@ -49,7 +49,7 @@
display: flex;
flex-direction: column;
}
.sex .sjsm>div:nth-child(1){
.sex .sjsm>div{
margin-bottom: 20px;
}
.sex .sjsm>div{
......
......@@ -49,7 +49,7 @@
display: flex;
flex-direction: column;
}
.sex .sjsm>div:nth-child(1){
.sex .sjsm>div{
margin-bottom: 20px;
}
.sex .sjsm>div{
......
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