<template>
<div class="Feedbackchart">
<div style="margin:0 auto;width:1200px">
<div style="font-size:14px;color:#666666;margin:10px 0">
<span>线路：{{msg.lineName}}</span>
<span>系列：{{msg.LineteamName}}</span>
<span>发团日期：
<span v-if="msg.reStartDate!=''">{{msg.reStartDate}} - {{msg.reEndDate}}</span>
<span v-else>不限</span>
</span>
</div>
<div class="bannerList">
<div v-show="index=='整体评分'" v-for="(item,index) in ScoreJson" class="Item">
<img src="../../../assets/img/fk/1.png" alt="">
<p class="num">{{ScoreJson[index]}}</p>
<p style="font-size:14px;color:#666666;">{{index}}</p>
</div>
<div v-show="index!='整体评分'" v-for="(item,index) in ScoreJson" class="Item">
<img src="../../../assets/img/fk/1.png" alt="">
<p class="num">{{ScoreJson[index]}}</p>
<p style="font-size:14px;color:#666666;">{{index}}</p>
</div>
</div>
<div class="pieChart" style="width:100%">
<div>
<div class="title">
下次出游计划
</div>
<div class="zhanbitu" id="chart1"></div>
</div>
<div>
<div class="title">
印象产品优先
</div>
<div class="zhanbitu" id="chart2"></div>
</div>
</div>
<div style="margin-top:30px;background:#fff;padding:20px;box-sizing:border-box">
<p style="color:#111111;padding-bottom:20px;font-size:18px">出游目的地</p>
<div style="width:100%;height:480px" id="chart3"></div>
</div>
<div class="people">
<p>
<span>用户建议</span>
<span @click="goUrl('Usersuggest')" style="float:right;font-size:12px;color:#333333;cursor:pointer">查看全部</span>
</p>
<ul>
<li v-for="(item,index) in SuggestList" :key="index">
<img style="width:40px;height:40px" src="../../../assets/img/fk/8.png" alt="">
<div class="Item">
<p style="color:#3751FE">({{item.TCNUM}}){{item.OrderID}}</p>
<p>{{item.TextContent}}</p>
</div>
</li>
<div v-if="SuggestList.length==0" style="text-align:center;padding:40px 0;">
<i style="font-size:80px" class="iconfont icon-wushuju"></i>
</div>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Feedbackchart',
data (){
return{
zChartcolor:["#3751FE","#7C8DFF","#04E38A","#9DFF86","#FFE689","#FDF39E","#FF918E"],
msg:{},
ScoreJson:{},
planList:[],
priorityList:[],
destinationList:[],
arr:[{name:"暂无数据",value:100}],
SuggestList:[],
arrZ:[{ name: "暂无数据",type: 'bar',color:"#3751FE",data: [10]}]
}
},
created(){
if(this.$route.query.msg){
this.msg=JSON.parse(this.$route.query.msg);
}
this.getSurveyAnalyze();
this.getNextPlan();
this.getpriority();
this.destination();
this.getSuggest();
},
mounted(){
},
methods:{
getSuggest() {
this.apiJavaPost("/api/erp/survey/getSuggest", this.msg, res => {
if (res.data.resultCode === 1) {
this.SuggestList=res.data.data.pageData;
} else {
this.Error(res.data.message)
}
}, null);
},
// 下次出游目的地
destination() {
this.apiJavaPost("/api/erp/survey/destination", this.msg, res => {
if (res.data.resultCode === 1) {
this.destinationList=[];
let data=res.data.data;
data.forEach(item=>{
let a=Math.ceil(Math.random()*this.zChartcolor.length);
let obj={
name: item.TextContent,
type: 'bar',
color:this.zChartcolor[a],
data: [item.num]
};
this.destinationList.push(obj)
})
if(this.destinationList.length==0){
this.destinationList=this.arrZ
}
this.creatChart3();
} else {
this.Error(res.data.message)
}
}, null);
},
// 印象优先
getpriority() {
this.apiJavaPost("/api/erp/survey/getpriority", this.msg, res => {
if (res.data.resultCode === 1) {
this.priorityList=res.data.data;
this.priorityList.forEach(item=>{
item.value=item.num;
})
if(this.priorityList.length==0){
this.priorityList=this.arr;
}
this.creatChart2();
} else {
this.Error(res.data.message)
}
}, null);
},
// 计划出游
getNextPlan() {
this.apiJavaPost("/api/erp/survey/getNextPlan", this.msg, res => {
if (res.data.resultCode === 1) {
this.planList=res.data.data;
this.planList.forEach(item=>{
item.value=item.num;
})
if(this.planList.length==0){
this.planList=this.arr;
}
this.creatChart1();
} else {
this.Error(res.data.message)
}
}, null);
},
// 旅客反馈评分
getSurveyAnalyze() {
this.apiJavaPost("/api/erp/survey/getSurveyAnalyze", this.msg, res => {
if (res.data.resultCode === 1) {
this.ScoreJson=res.data.data;
} else {
this.Error(res.data.message)
}
}, null);
},
goUrl(path){
this.$router.push({ name:path,query:{"msg":JSON.stringify(this.msg),blank: 'y'} })
},
creatChart1() {
let myChart = this.$echarts.init(document.getElementById("chart1"));
let option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
calculable: true,
graphic: [
{
type: "text",
left: "43%",
top: "45%",
style: {
text: `100%`,
textAlign: "center",
fill: "#2C3343", //文字的颜色
fontSize: 36,
fontFamily: "pingfangR"
}
}
],
series: [
{
name: "下次出游计划",
type: "pie",
radius: ["50%", "70%"],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
borderWidth: 2,
borderColor: "#fff",
color: function(params) {
//自定义颜色
var colorList = [
"#FFB822",
"#34BFA3",
"#FD3995",
"#5D78FF",
"#8e44ad"
];
return colorList[params.dataIndex];
}
},
emphasis: {
label: {
show: true,
textStyle: {
fontSize: "20",
fontFamily: "pingfangR"
}
}
}
},
data: this.planList
}
]
};
myChart.setOption(option);
},
creatChart2() {
let myChart = this.$echarts.init(document.getElementById("chart2"));
let option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
calculable: true,
graphic: [
{
type: "text",
left: "43%",
top: "45%",
style: {
text: "100%",
textAlign: "center",
fill: "#2C3343", //文字的颜色
fontSize: 36,
fontFamily: "pingfangR"
}
}
],
series: [
{
name: "印象产品优先",
type: "pie",
radius: ["50%", "70%"],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
borderWidth: 2,
borderColor: "#fff",
color: function(params) {
//自定义颜色
var colorList = [
"#FFB822",
"#34BFA3",
"#FD3995",
"#5D78FF",
"#8e44ad"
];
return colorList[params.dataIndex];
}
},
emphasis: {
label: {
show: true,
textStyle: {
fontSize: "20",
fontFamily: "pingfangR"
}
}
}
},
data:this.priorityList
}
]
};
myChart.setOption(option);
},
creatChart3() {
let myChart = this.$echarts.init(document.getElementById("chart3"));
let option = {
title: {
text: '',
},
tooltip: {
// trigger: 'axis',
},
legend: {
// orient: 'vertical', //垂直显示
// y: 'center', //延Y轴居中
x: 'right', //居右显示
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['目的地']
},
series: this.destinationList
};
myChart.setOption(option);
},
}
}
</script>
<style scoped>
.people li{
padding:15px 0;
border-bottom: 1px dashed #DCDCDC;
display: flex;
align-items: center;
}
.people .Item{
font-size: 12px;
display: inline-block;
margin-left:10px;
width:90%;
}
.people{
background:rgba(255,255,255,1);
border:2px solid rgba(235, 237, 244, 1);
border-radius:8px;
margin-top: 32px;
padding: 30px;
box-sizing: border-box;
}
.pieChart{
display: flex;
justify-content: space-around;
margin-top: 30px;
box-sizing: border-box
}
.pieChart>div{
background: #fff;
border-radius: 8px;
width: 586px;
display: inline-block;
}
.pieChart .title{
height:88px;
line-height:88px;
color:#111111;
padding-left:30px;
border-bottom: 1px solid #E9E9E9;
font-family: "PingFangR"
}
.bannerList{
margin-top: 40px;
}
.bannerList .Item .num{
font-size: 36px;
color:#333;
margin-top: 20px;
}
.bannerList .Item{
display: inline-block;
width: 46px;
height: 46px;
box-sizing: border-box
}
.bannerList .Item:last-child{
margin:0;
}
.bannerList .Item{
display: inline-flex;
width:150px;
height:174px;
background:rgba(255,255,255,1);
border:2px solid rgba(235, 237, 244, 1);
border-radius:8px;
align-items: center;
justify-content: center;
flex-direction: column;
margin-right: 20px;
box-sizing: border-box;
margin-bottom:20px;
}
.zhanbitu{
height: 548px;
width: 100%;
}
</style>