Skip to content

C
CRM
Commit 26ec94cf authored by zhengke's avatar zhengke
Browse files
Options

修改

parent 7bc01a48
Show whitespace changes
Inline Side-by-side
Showing with 149 additions and 115 deletions
src/components/statistics/Opinionpolls.vue
View file @ 26ec94cf
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.sex .sjsm>div:nth-child(1){ .sex .sjsm>div{
margin-bottom: 20px; margin-bottom: 20px;
} }
.sex .sjsm>div{ .sex .sjsm>div{
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
} }
.Opinionpolls .countryUl li{ .Opinionpolls .countryUl li{
position: relative; position: relative;
padding: 20px 0; padding: 30px 0;
border-bottom: 1px solid #E2E4EF; border-bottom: 1px solid #E2E4EF;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
.Opinionpolls .countryUl li .rightSpan{ .Opinionpolls .countryUl li .rightSpan{
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 20px; bottom: 32px;
} }
.Opinionpolls .countryUl li img{ .Opinionpolls .countryUl li img{
...@@ -102,6 +102,10 @@ ...@@ -102,6 +102,10 @@
border-radius:6px; border-radius:6px;
} }
.Opinionpolls .index{
font-weight: bold;
margin-right:20px;
}
.Opinionpolls .countryUl li:nth-child(1) .index{ .Opinionpolls .countryUl li:nth-child(1) .index{
color:#FFA475 color:#FFA475
} }
...@@ -140,10 +144,11 @@ ...@@ -140,10 +144,11 @@
<el-col :span="18" class="left"> <el-col :span="18" class="left">
<el-card> <el-card>
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>季节统计</span> <span>景点评分（前10名）</span>
</div> </div>
<el-row :gutter="80" style="height: 100%;"> <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-row>
</el-card> </el-card>
</el-col> </el-col>
...@@ -155,7 +160,7 @@ ...@@ -155,7 +160,7 @@
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>首选印象产品</span> <span>首选印象产品</span>
</div> </div>
<shopChart :shopChartData="shopChartData"/> <shopChart v-if="isShowTop" :shopChartData="shopChartData"/>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="7"> <el-col :span="7">
...@@ -170,32 +175,14 @@ ...@@ -170,32 +175,14 @@
<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>国家/目的地</span>
</div> </div>
<ul class="countryUl"> <ul class="countryUl">
<li> <li v-for="(item,index) in dataList.countryList" :key="index">
<span class="index" style="font-size:14px">NO.1</span> <span class="index" style="font-size:14px">NO.{{index+1}}</span>
<img style="margin:0 15px" src="../../assets/img/tongji/cj.png" alt=""> <!-- <img style="margin:0 15px" src="../../assets/img/tongji/cj.png" alt=""> -->
<span style="font-size:18px;">日本</span> <span style="font-size:18px;">{{item.ItemName}}</span>
<span class="rightSpan">16520<span class="font-size-12">票</span> </span> <span class="rightSpan">{{item.OrderCount}}<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> </li>
</ul> </ul>
</el-card> </el-card>
...@@ -209,7 +196,7 @@ ...@@ -209,7 +196,7 @@
<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 dataList.GuestSurveyShopList" :key="index">
<div class="left"> <div class="left">
<img v-if="item.SeasonType === 1" src="../../assets/img/tongji/cj.png" alt=""> <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 === 2" src="../../assets/img/tongji/xj.png" alt="">
...@@ -218,7 +205,7 @@ ...@@ -218,7 +205,7 @@
<span class="font-size-12">{{item.SeasonTypeName}}</span> <span class="font-size-12">{{item.SeasonTypeName}}</span>
</div> </div>
<div class="right"> <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> <p>最喜爱产品<span class="hight-font">《{{item.LtName}}》</span></p>
</div> </div>
</div> </div>
...@@ -271,26 +258,29 @@ export default { ...@@ -271,26 +258,29 @@ export default {
return { return {
discussID: 0, discussID: 0,
drawer: false, drawer: false,
chartData: [1,2,3,4], chartData: [],
shopChartData: [], shopChartData: [],
SexOrder: [], SexOrder: [],
loading: false, loading: false,
strArr: ['春季', '夏季', '秋季', '冬季'], strArr: [],
orders:[] orders:[],
dataList:{},
isShowTop:false,
//出游日期
chuyouDate:[],
chuyouList:[],
}; };
},watch:{ },watch:{
}, },
mounted() { mounted() {
// this.GetSexOrderList() this.getData();
this.initTimeChart();
}, },
methods: { methods: {
initTimeChart(){ initTimeChart(){
// let myChart = this.$echarts.init(this.$refs.timeChart);
var myChart = this.$echarts.init(document.getElementById('timeChart')); var myChart = this.$echarts.init(document.getElementById('timeChart'));
console.log("myChart",myChart)
var option={ var option={
xAxis: { xAxis: {
axisTick: { axisTick: {
...@@ -300,100 +290,144 @@ export default { ...@@ -300,100 +290,144 @@ export default {
show: false show: false
}, },
type: 'category', type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] data: this.chuyouDate
}, },
yAxis: { yAxis: {
show : false, show : false,
type: 'value' type: 'value'
}, },
series: [{ series: [{
data: [120, 200, 150, 80, 70, 110, 130], data: this.chuyouList,
type: 'bar', type: 'bar',
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)' color: 'rgba(220, 220, 220, 0.8)'
}, },
barWidth: '20',
itemStyle: { itemStyle: {
color: '#0D2481' color: '#0D2481'
} }
}] }]
}; };
console.log("option",option)
myChart.setOption(option); myChart.setOption(option);
}, },
GetSexOrderList(){ //初始化top10插件
this.loading = true initTopTen(){
this.apipost("/api/Statistic/GetSeasonShopList", {}, res => { let myChart = this.$echarts.init(document.getElementById('tenTopchart'));
console.log("dsafsaf",res); let option = {
let contShop = res.data.data[0].TotalMoney + res.data.data[1].TotalMoney+ res.data.data[2].TotalMoney+ res.data.data[3].TotalMoney, grid: {
one = res.data.data[0].TotalMoney, left: '50',
two = res.data.data[1].TotalMoney, right: '3%'
three = res.data.data[2].TotalMoney, },
four= res.data.data[3].TotalMoney, xAxis: {
contNum = res.data.data[0].SeasonCount + res.data.data[1].SeasonCount+ res.data.data[2].SeasonCount+ res.data.data[3].SeasonCount, data: this.strArr,
oneN = res.data.data[0].SeasonCount, type: 'category',
twoN = res.data.data[1].SeasonCount, axisLabel: {
threeN = res.data.data[2].SeasonCount, color: '#999999'
fourN = res.data.data[3].SeasonCount; },
let chartData = [], shopChartData = []; axisLine: {
chartData.push( show: false
((oneN/contNum)*100).toFixed(2) },
) },
chartData.push( yAxis: {
((twoN/contNum)*100).toFixed(2) type: 'value',
) axisLine: {
chartData.push( show: false
((threeN/contNum)*100).toFixed(2) },
) axisLabel: {
chartData.push( color: '#999999',
((fourN/contNum)*100).toFixed(2) formatter: '{value} %'
) },
shopChartData.push( max: 100,
},
series: [{
data: this.chartData,
type: 'bar',
itemStyle: {
color: '#FFA475',
},
barWidth: '44'
}]
};
myChart.setOption(option);
},
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(((one/contShop)*100).toFixed(2)), num: Number(((hefeng/totalChuyou)*100).toFixed(0)),
color: "#0D2481", color: "#0D2481",
text: '春季' text: '和风畅享系列'
} }
) )
shopChartData.push( this.shopChartData.push(
{ {
num: Number(((two/contShop)*100).toFixed(2)), num: Number(((xierdunSj/totalChuyou)*100).toFixed(0)),
color: "#FFA475", color: "#FFA97C",
text: '夏季' text: '希尔顿假期<升级版>'
} }
) )
shopChartData.push( this.shopChartData.push(
{ {
num: Number(((three/contShop)*100).toFixed(2)), num: Number(((dantuan/totalChuyou)*100).toFixed(0)),
color: "#99BD7B", color: "#99BD7B",
text: '秋季' text: '单团小团系列(本州大阪.东京)'
} }
) )
shopChartData.push( this.shopChartData.push(
{ {
num: Number(((four/contShop)*100).toFixed(2)), num: Number(((xierdun/totalChuyou)*100).toFixed(0)),
color: "#D2C9F1", color: "#D2C9F1",
text: '冬季' text: '希尔顿假期系列'
} }
) )
this.chartData = chartData
this.shopChartData = shopChartData
this.orders=res.data.data;
this.getOrders() //遍历出游计划
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);
}
}); });
}, },
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> </script>
\ No newline at end of file
src/components/statistics/assets.vue
View file @ 26ec94cf
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.sex .sjsm>div:nth-child(1){ .sex .sjsm>div{
margin-bottom: 20px; margin-bottom: 20px;
} }
.sex .sjsm>div{ .sex .sjsm>div{
......
src/components/statistics/gaoxiao.vue
View file @ 26ec94cf
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.sex .sjsm>div:nth-child(1){ .sex .sjsm>div{
margin-bottom: 20px; margin-bottom: 20px;
} }
.sex .sjsm>div{ .sex .sjsm>div{
......
src/components/statistics/roomStatistical.vue
View file @ 26ec94cf
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.sex .sjsm>div:nth-child(1){ .sex .sjsm>div{
margin-bottom: 20px; margin-bottom: 20px;
} }
.sex .sjsm>div{ .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