|
|
@@ -1,78 +1,6 @@
|
|
|
<style lang="scss">
|
|
|
-.preview {
|
|
|
- .el-form-item {
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
- label,
|
|
|
- p {
|
|
|
- line-height: 25px !important;
|
|
|
- }
|
|
|
-}
|
|
|
-.el-cascader {
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-a {
|
|
|
- text-decoration: none;
|
|
|
- color: #409eff;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-// 右边
|
|
|
-.item-main {
|
|
|
- // margin:34px;
|
|
|
- // height:600px;
|
|
|
- // background: #FFFFFF;
|
|
|
- border: 1px solid #dddddd;
|
|
|
- box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.13);
|
|
|
- border-radius: 20px;
|
|
|
- .el-form.over_y {
|
|
|
- max-height: calc(100vh - 340px);
|
|
|
- }
|
|
|
- /deep/.el-form-item__label {
|
|
|
- float: none;
|
|
|
- }
|
|
|
-}
|
|
|
-// label样式
|
|
|
-.edit_label {
|
|
|
- /deep/.el-input__inner {
|
|
|
- background: #f5faff;
|
|
|
- border: 0px;
|
|
|
- padding: 0px;
|
|
|
- }
|
|
|
-}
|
|
|
-/deep/.opicon {
|
|
|
- font-weight: bold;
|
|
|
- padding: 5px;
|
|
|
- color: #3895fe;
|
|
|
-}
|
|
|
-.tpl_title {
|
|
|
- font-size: 18px;
|
|
|
- margin: 20px 0;
|
|
|
-}
|
|
|
-.tpl_form {
|
|
|
- margin: 20px;
|
|
|
- border: 1px solid #ccc;
|
|
|
- border-radius: 20px;
|
|
|
- /deep/.el-form-item {
|
|
|
- background: none;
|
|
|
- }
|
|
|
- /deep/.el-form-item__content {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-}
|
|
|
-.survey_logo {
|
|
|
- position: relative;
|
|
|
- top: 15px;
|
|
|
- left: 20px;
|
|
|
-}
|
|
|
-.result_dialog .el-dialog{
|
|
|
- width: 40%;
|
|
|
- margin-top:20vh!important;
|
|
|
-}
|
|
|
-.result-item{
|
|
|
- height: 35px;
|
|
|
- .label{
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
+.content{
|
|
|
+ // height: 80vh;
|
|
|
}
|
|
|
// 新
|
|
|
.item{
|
|
|
@@ -83,16 +11,24 @@ a {
|
|
|
color:#606266;
|
|
|
.title-num{
|
|
|
display: inline-block;
|
|
|
- width:60px;
|
|
|
+ // width:50px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .title-header{
|
|
|
+ // font-weight: 600;
|
|
|
}
|
|
|
.title-type{
|
|
|
- margin-left:50px;
|
|
|
+ margin-left:10px;
|
|
|
}
|
|
|
}
|
|
|
.item-content{
|
|
|
- margin-left:60px;
|
|
|
+ // margin-left:60px;
|
|
|
display:flex;
|
|
|
- .el-table,div{
|
|
|
+ .el-table{
|
|
|
+ flex:1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ div{
|
|
|
flex:1;
|
|
|
}
|
|
|
}
|
|
|
@@ -104,24 +40,28 @@ a {
|
|
|
<div class="content">
|
|
|
<div class='item' v-for='(item,index) in results' :key='index'>
|
|
|
<div class='item-title'>
|
|
|
- <span class='title-num'>第{{index+1}}题</span>
|
|
|
- <span class='title-header'>{{item.header}}</span>
|
|
|
+ <span class='title-num'>第{{index+1}}题：</span>
|
|
|
+ <span class='title-header'>{{item.label}}</span>
|
|
|
<span class='title-type'>{{item.type|getType}}</span>
|
|
|
</div>
|
|
|
- <div class='item-content' v-if='item.type=="input"'>{{item.content}}</div>
|
|
|
- <div class='item-content' v-if='item.type=="radio"'>
|
|
|
- <el-table :data="item.content">
|
|
|
- <el-table-column prop="name" label="选项"> </el-table-column>
|
|
|
- <el-table-column prop="count" label="次数"> </el-table-column>
|
|
|
- <el-table-column prop="sale" label="比例"> </el-table-column>
|
|
|
+ <div class='item-content' v-if='item.type=="input"||item.type=="textarea"'>
|
|
|
+ 【答案】：<span v-for="(item1,index) in item.result" :key="index">{{item1}}{{index==item.result.length-1?'':"、"}}</span>
|
|
|
+ </div>
|
|
|
+ <div class='item-content' v-if='item.type=="radio"||item.type=="checkbox"'>
|
|
|
+ <el-table
|
|
|
+ :data="item.items"
|
|
|
+ border
|
|
|
+ >
|
|
|
+ <el-table-column prop="label" label="选项"> </el-table-column>
|
|
|
+ <el-table-column prop="times" label="次数"> </el-table-column>
|
|
|
+ <el-table-column prop="sale" label="比例">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-progress :percentage="scope.row.sale"></el-progress>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
</el-table>
|
|
|
- <!-- <el-button v-show='!item.echartShow' type='primary' style='height:40px;margin-left:10px;' @click='item.echartShow = true'>查看图表</el-button>
|
|
|
- <div v-show='item.echartShow'>查看柱状图
|
|
|
- <div :ref='index' style="width:100%;height:250px;"></div>
|
|
|
- </div> -->
|
|
|
- <!-- <div>查看饼图</div> -->
|
|
|
- <div :id="`chart${index}`" style="width:300px;height:200px;"></div>
|
|
|
-
|
|
|
+ <div :id="`chartPie${index}`" style="width:300px;"></div>
|
|
|
+ <div :id="`chartBar${index}`" style="width:300px;"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -139,33 +79,47 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
// checked: [],
|
|
|
- results:[
|
|
|
- {header:'请输入您的姓名',content:"张东升 李来喜",type:'input'},
|
|
|
- {header:'标题222',type:'radio',echartShow:false,content:[
|
|
|
- {name:'选项1',count:'1',sale:'25%'},
|
|
|
- {name:'选项2',count:'1',sale:'25%'},
|
|
|
- {name:'选项3',count:'2',sale:'50%'}
|
|
|
- ],}
|
|
|
- ],
|
|
|
-
|
|
|
+ loading: false,
|
|
|
+ results:[],
|
|
|
};
|
|
|
},
|
|
|
filters:{
|
|
|
getType(val){
|
|
|
- if(val=='input' | val=='textara' ){
|
|
|
- return '[填空题]'
|
|
|
+ if(val=='input' | val=='textarea' ){
|
|
|
+ return '【填空题】'
|
|
|
}else if(val== 'radio'){
|
|
|
- return '[单选题]'
|
|
|
+ return '【单选题】'
|
|
|
}else if(val == 'checkbox'){
|
|
|
- return '[多选题]'
|
|
|
+ return '【多选题】'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
+ getData() {
|
|
|
+ let message_id = this.$route.query.id
|
|
|
+ let type = this.$route.query.type
|
|
|
+ this.$api.getMessageSurveyQuestionAnalyse({id:message_id,type:type}).then((res) => {
|
|
|
+ this.results = res.data.data;
|
|
|
+ this.results.forEach((item,index)=>{
|
|
|
+ this.$nextTick(function(){
|
|
|
+ this.getEcharts(item,index);
|
|
|
+ })
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
getEcharts(item,index){
|
|
|
- var myChart = this.$echarts.init(document.getElementById(`chart${index}`));
|
|
|
- let option1 = {
|
|
|
+ var myChart = this.$echarts.init(document.getElementById(`chartBar${index}`));
|
|
|
+ var myChart1 = this.$echarts.init(document.getElementById(`chartPie${index}`));
|
|
|
+ let dataPie = []
|
|
|
+ let dataBarX = []
|
|
|
+ let dataBarY = []
|
|
|
+ item.items.forEach((item,index)=>{
|
|
|
+ dataPie.push({name:item.label,value:item.times})
|
|
|
+ dataBarX.push(item.label)
|
|
|
+ dataBarY.push(item.times)
|
|
|
+ })
|
|
|
+ let option = {
|
|
|
color: ['#5066FF'],
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
@@ -183,7 +137,7 @@ export default {
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: 'category',
|
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu'],
|
|
|
+ data: dataBarX,
|
|
|
|
|
|
axisTick: {
|
|
|
alignWithLabel: true
|
|
|
@@ -196,10 +150,10 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
axisLabel:{
|
|
|
- formatter:function(val) {
|
|
|
- console.log(val,"")
|
|
|
- return '中国科' //对每个标签处理后的结果（通过js字符串方法处理）
|
|
|
- },
|
|
|
+ // formatter:function(val) {
|
|
|
+ // console.log(val,"")
|
|
|
+ // return '中国科' //对每个标签处理后的结果（通过js字符串方法处理）
|
|
|
+ // },
|
|
|
// x轴字体颜色
|
|
|
textStyle: {
|
|
|
color: '#999999',
|
|
|
@@ -240,10 +194,10 @@ export default {
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
- name: '直接访问',
|
|
|
+ name: '次数',
|
|
|
type: 'bar',
|
|
|
- barWidth: '40%',
|
|
|
- data: [10, 52, 200, 334],
|
|
|
+ barWidth: '30px',
|
|
|
+ data: dataBarY,
|
|
|
itemStyle: {
|
|
|
//柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
|
|
|
normal: {
|
|
|
@@ -254,7 +208,56 @@ export default {
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
- myChart.setOption(option1)
|
|
|
+ let option1 = {
|
|
|
+ // backgroundColor: '#dddddd',
|
|
|
+ // title: {
|
|
|
+ // text: 'Customized Pie',
|
|
|
+ // left: 'center',
|
|
|
+ // top: 20,
|
|
|
+ // textStyle: {
|
|
|
+ // color: '#ccc'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ color:['#9379ff','#62A2FF', '#FFD053', '#FF9F41','#FF542C'],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
|
+ },
|
|
|
+
|
|
|
+ series: [{
|
|
|
+ name: '访问来源',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '75%',
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ data:dataPie.sort(function (a, b) { return a.value - b.value; }),
|
|
|
+ roseType: 'radius',
|
|
|
+ label: {
|
|
|
+ color: 'rgba(102, 102, 102,1)',
|
|
|
+ fontSize:14
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(000, 000, 000, 0.1)'
|
|
|
+ },
|
|
|
+ smooth: 0.2,
|
|
|
+ length: 20,
|
|
|
+ length2: 8
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ // color: '#c23531',
|
|
|
+ // shadowBlur: 200,
|
|
|
+ // shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ },
|
|
|
+
|
|
|
+ animationType: 'scale',
|
|
|
+ animationEasing: 'elasticOut',
|
|
|
+ animationDelay: function (idx) {
|
|
|
+ return Math.random() * 200;
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ myChart.setOption(option)
|
|
|
+ myChart1.setOption(option1)
|
|
|
},
|
|
|
},
|
|
|
mounted(){
|
|
|
@@ -265,7 +268,7 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
created() {
|
|
|
-
|
|
|
+ this.getData()
|
|
|
},
|
|
|
};
|
|
|
</script>
|
xjc