Skip to content

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

页面修改

parent 8a3ccb8f
Show whitespace changes
Inline Side-by-side
Showing with 418 additions and 405 deletions
src/components/statistics/Opinionpolls.vue
View file @ ebdb05fc
<style>
.sex{
.sex {
height: calc(100% - 25px);
}
.statistics-title {
}
.statistics-title {
font-size: 24px;
color: #111;
margin-bottom: 30px;
font-family: perfectFont;
}
.sex .conten-box{
}
.sex .conten-box {
display: flex;
flex-direction: column;
height: calc(100% - 62px);
}
.sex .conten-box .el-card .el-card__header {
}
.sex .conten-box .el-card .el-card__header {
font-weight: normal !important;
}
.Opinionpolls .conten-box .top{
flex: 1!important;
}
.Opinionpolls .conten-box .top {
flex: 1 !important;
margin-bottom: 25px;
}
.sex .conten-box .bottom{
}
.sex .conten-box .bottom {
flex: .8;
}
.sex .conten-box .left{
}
.sex .conten-box .left {
height: 100%;
}
.sex .conten-box .el-card.blue {
background: #0D2481!important;
}
.sex .conten-box .el-card.blue {
background: #0D2481 !important;
color: #fff !important;
height: calc(100% - 2px);
}
.sex .conten-box .el-card .el-card__body {
}
.sex .conten-box .el-card .el-card__body {
padding: 20px;
height: calc(100% - 98px);
max-height: calc(100% - 98px);
}
.sex .conten-box .img {
}
.sex .conten-box .img {
display: flex;
align-items: flex-end;
text-align: center;
padding: 20px 70px 10px 70px!important;
padding: 20px 70px 10px 70px !important;
justify-content: space-between;
font-size: 14px;
}
.sex .sjsm{
}
.sex .sjsm {
display: flex;
flex-direction: column;
}
.sex .sjsm>div{
}
.sex .sjsm>div {
margin-bottom: 20px;
}
.sex .sjsm>div{
}
.sex .sjsm>div {
flex: 1;
background:rgba(244,245,249,1);
background: rgba(244, 245, 249, 1);
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
}
.sex .sjsm>div .left{
}
.sex .sjsm>div .left {
display: flex;
align-items: center;
}
.sex .sjsm>div .left img{
}
.sex .sjsm>div .left img {
padding-right: 10px;
}
.sex .sjsm>div .right{
}
.sex .sjsm>div .right {
text-align: right;
color: #888888;
font-size: 12px;
}
.sex .hight-font{
}
.sex .hight-font {
color: #0D2481 !important;
font-size: 14px;
}
.sex .secondDiv .el-card .el-card__header{
border: none!important;
}
.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{
color: #111111;
font-weight: bold !important;
padding: 18px 20px 0 18px !important;
}
.Opinionpolls .countryUl li {
position: relative;
padding: 30px 0;
border-bottom: 1px solid #E2E4EF;
display: flex;
align-items: center;
}
.Opinionpolls .countryUl li .rightSpan{
}
.Opinionpolls .countryUl li .rightSpan {
position: absolute;
right: 0;
bottom: 32px;
}
}
.Opinionpolls .countryUl li img {
width: 40px;
height: 26px;
border-radius: 6px;
.Opinionpolls .countryUl li img{
width:40px;
height:26px;
border-radius:6px;
}
}
.Opinionpolls .index{
.Opinionpolls .index {
font-weight: bold;
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{
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{
}
.timeChart {
width: 100%;
height: 386px;
}
}
</style>
<template>
<div class="sex Opinionpolls" v-loading="loading">
......@@ -134,9 +159,10 @@
<el-row :gutter="25" class="top">
<el-col :span="6" style="height: 450px">
<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>
<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"
alt="">
<img style="width:100%;" src="../../assets/img/tongji/yj2.png" alt="">
</div>
</el-card>
......@@ -147,7 +173,6 @@
<span>景点评分（前10名）</span>
</div>
<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>
......@@ -160,7 +185,7 @@
<div slot="header" class="clearfix">
<span>首选印象产品</span>
</div>
<shopChart v-if="isShowTop" :shopChartData="shopChartData"/>
<shopChart v-if="isShowTop" :shopChartData="shopChartData" />
</el-card>
</el-col>
<el-col :span="7">
......@@ -189,7 +214,7 @@
</el-col>
</el-row>
<el-row :gutter="22" class="bottom" >
<el-row :gutter="22" class="bottom">
<el-col :span="16" style="height: 100%;">
<el-card style="height: 100%;">
<div slot="header" class="clearfix">
......@@ -205,7 +230,8 @@
<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>
<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>
......@@ -220,9 +246,6 @@
<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">
......@@ -236,20 +259,16 @@
</el-col>
</el-row>
</div>
<el-drawer
size='695px'
:visible.sync="drawer"
direction="rtl"
:with-header="false">
<discussBox :id="discussID"/>
<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 {
import sexChart from './model/sexChart'
import shopChart from './model/shopChart'
import discussBox from "./model/discussBox";
export default {
components: {
sexChart,
shopChart,
......@@ -264,15 +283,16 @@ export default {
SexOrder: [],
loading: false,
strArr: [],
orders:[],
dataList:{},
isShowTop:false,
orders: [],
dataList: {},
isShowTop: false,
//出游日期
chuyouDate:[],
chuyouList:[],
chuyouDate: [],
chuyouList: [],
};
},watch:{
},
watch: {
},
mounted() {
......@@ -280,9 +300,9 @@ export default {
},
methods: {
initTimeChart(){
initTimeChart() {
var myChart = this.$echarts.init(document.getElementById('timeChart'));
var option={
var option = {
xAxis: {
axisTick: {
show: false
......@@ -294,7 +314,7 @@ export default {
data: this.chuyouDate
},
yAxis: {
show : false,
show: false,
type: 'value'
},
series: [{
......@@ -314,7 +334,7 @@ export default {
myChart.setOption(option);
},
//初始化top10插件
initTopTen(){
initTopTen() {
let myChart = this.$echarts.init(document.getElementById('tenTopchart'));
let option = {
grid: {
......@@ -353,79 +373,72 @@ export default {
};
myChart.setOption(option);
},
getData(){
getData() {
this.loading = true
this.apipost("/api/Statistic/GetGuestSurveyList", {}, res => {
this.loading=false;
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.loading = false;
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(x.ItemName);
totalTenCount += x.OrderCount;
});
this.dataList.TopTenScenicList.forEach((x,index) => {
this.dataList.TopTenScenicList.forEach((x, index) => {
this.chartData.push();
this.chartData.push(parseFloat(((x.OrderCount/totalTenCount)*100).toFixed(2)));
this.chartData.push(parseFloat(((x.OrderCount / totalTenCount) * 100)
.toFixed(2)));
});
//获取总的出游首选
this.dataList.souXuanList.forEach(x=>{
totalChuyou+=x.OrderCount;
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)),
this.shopChartData.push({
num: Number(((hefeng / totalChuyou) * 100).toFixed(0)),
color: "#0D2481",
text: '和风畅享系列'
}
)
this.shopChartData.push(
{
num: Number(((xierdunSj/totalChuyou)*100).toFixed(0)),
})
this.shopChartData.push({
num: Number(((xierdunSj / totalChuyou) * 100).toFixed(0)),
color: "#FFA97C",
text: '希尔顿假期<升级版>'
}
)
this.shopChartData.push(
{
num: Number(((dantuan/totalChuyou)*100).toFixed(0)),
})
this.shopChartData.push({
num: Number(((dantuan / totalChuyou) * 100).toFixed(0)),
color: "#99BD7B",
text: '单团小团系列(本州大阪.东京)'
}
)
this.shopChartData.push(
{
num: Number(((xierdun/totalChuyou)*100).toFixed(0)),
})
this.shopChartData.push({
num: Number(((xierdun / totalChuyou) * 100).toFixed(0)),
color: "#D2C9F1",
text: '希尔顿假期系列'
}
)
})
//遍历出游计划
this.chuyouDate=[];
this.chuyouList=[];
this.dataList.chuyouList.forEach(x=>{
this.chuyouDate = [];
this.chuyouList = [];
this.dataList.chuyouList.forEach(x => {
this.chuyouDate.push(x.ItemName);
this.chuyouList.push(x.OrderCount);
})
this.isShowTop=true;
this.isShowTop = true;
this.initTimeChart();
this.initTopTen();
}else{
} else {
this.$message.error(res.data.message);
}
});
},
}
}
}
</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