parent
1ba337ecc9
commit
113d47357e
|
After Width: | Height: | Size: 750 KiB |
|
After Width: | Height: | Size: 421 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 7.4 MiB |
@ -0,0 +1,43 @@ |
||||
<template> |
||||
<!-- 投诉信息列表 --> |
||||
<div class="p-message" v-if="propsData.length>0"> |
||||
<base-overflow class="p-message-list" height="calc(100% - 40rem)"> |
||||
<div class="p-message-item" v-for="(item,index) in propsData" :key="item.id"> |
||||
<div class="p-message-box"> |
||||
<div class="p-message-title"> |
||||
<div class="flex-auto">{{ item.date }}</div> |
||||
<div class="p-message-state" :class="$filter.evaluateStyle(item.state)">{{ |
||||
$filter.evaluateText(item.state) |
||||
}} |
||||
</div> |
||||
</div> |
||||
<div class="p-message-body"> |
||||
<div class="p-message-come"> |
||||
<div class="m-r-small p-message-name">{{ item.name }}</div> |
||||
<div class="m-r-small">投诉人：<span class="p-message-text">{{ item.anonymous }}</span></div> |
||||
<div class="m-r-small">渠道：<span class="p-message-text">{{ item.source }}</span></div> |
||||
<div class="m-r-small">类型：<span class="p-message-text">{{ item.grade }}</span></div> |
||||
</div> |
||||
<div class="p-message-content m-t-mini">{{ item.con }}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</base-overflow> |
||||
<!-- 分页 --> |
||||
<el-pagination class="p-pagination" background :total="1000"></el-pagination> |
||||
</div> |
||||
<base-default text="暂无数据" v-else></base-default> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
export default { |
||||
name: "complaint-message", |
||||
props: { |
||||
propsData: { |
||||
type: Array, |
||||
default: () => [], |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
@ -0,0 +1,43 @@ |
||||
<template> |
||||
<!-- 评价信息列表 --> |
||||
<div class="p-message" v-if="propsData.length>0"> |
||||
<base-overflow class="p-message-list" height="calc(100% - 40rem)"> |
||||
<div class="p-message-item" v-for="(item,index) in propsData" :key="item.id"> |
||||
<div class="p-message-box"> |
||||
<div class="p-message-title"> |
||||
<div class="flex-auto">{{ item.date }}</div> |
||||
<div class="p-message-grade"> |
||||
<base-grade :num="item.grade"></base-grade> |
||||
<span class="m-l-mini">（评分：{{ item.grade }}）</span> |
||||
</div> |
||||
</div> |
||||
<div class="p-message-body"> |
||||
<div class="p-message-come"> |
||||
<div class="m-r-small p-message-name">{{ item.name }}</div> |
||||
<div class="m-r-small">评价人：<span class="p-message-text">{{ item.anonymous }}</span></div> |
||||
</div> |
||||
<div class="p-message-content m-t-mini">{{ item.con }}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</base-overflow> |
||||
<!-- 分页 --> |
||||
<el-pagination class="p-pagination" background :total="1000"></el-pagination> |
||||
</div> |
||||
<base-default text="暂无数据" v-else></base-default> |
||||
</template> |
||||
|
||||
<script> |
||||
import BaseGrade from "@/views/components/p-level/BaseGrade"; |
||||
|
||||
export default { |
||||
name: "complaint-message", |
||||
components: {BaseGrade}, |
||||
props: { |
||||
propsData: { |
||||
type: Array, |
||||
default: () => [], |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
@ -0,0 +1,414 @@ |
||||
<template> |
||||
<!-- 投诉评价监测 入口文件--> |
||||
<div class="p-pages-box p-pages-bg"> |
||||
<!-- 页面头部 --> |
||||
<base-header title="投诉评价监测"></base-header> |
||||
<!-- 页面主体 --> |
||||
<div class="p-pages-main p-container"> |
||||
<el-row :gutter="20"> |
||||
|
||||
<el-col :span="6"> |
||||
<!-- 投诉处理统计 --> |
||||
<base-module name="ComplaintHandle" id="ComplaintHandle" class="m-t-large" style="height: 28vh"> |
||||
<base-module-card cardTitle="投诉处理统计" cardType="small"> |
||||
<complaint-handle :propsData="ComplaintHandleData"></complaint-handle> |
||||
</base-module-card> |
||||
</base-module> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<!-- 投诉类型占比统计 --> |
||||
<base-module name="ComplaintType" id="ComplaintType" class="m-t-large" style="height: 28vh"> |
||||
<base-module-card cardTitle="投诉类型占比统计" cardType="small"> |
||||
<base-echarts :propsData="ComplaintTypeData"></base-echarts> |
||||
</base-module-card> |
||||
</base-module> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<!-- 评价满意度 --> |
||||
<base-module name="EvaluationSatisfied" id="EvaluationSatisfied" class="m-t-large" style="height: 28vh"> |
||||
<base-module-card cardTitle="评价满意度" cardType="small"> |
||||
<base-echarts :propsData="EvaluationSatisfiedData"></base-echarts> |
||||
</base-module-card> |
||||
|
||||
</base-module> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<!-- 正面评价维度分析 --> |
||||
<base-module name="EvaluationFace" id="EvaluationFace" class="m-t-large" style="height: 28vh"> |
||||
<base-module-card cardTitle="正面评价维度分析" cardType="small"> |
||||
<base-echarts :propsData="EvaluationFaceData"></base-echarts> |
||||
</base-module-card> |
||||
</base-module> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<!-- 投诉数量占比统计 --> |
||||
<base-module name="ComplaintPercent" id="ComplaintPercent" class="m-t-large" style="height: 28vh"> |
||||
<base-module-card cardTitle="投诉数量占比统计" cardType="small"> |
||||
<base-echarts :propsData="ComplaintPercentData"></base-echarts> |
||||
</base-module-card> |
||||
|
||||
</base-module> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<!-- 投诉数量趋势统计 --> |
||||
<base-module name="ComplaintTrend" id="ComplaintTrend" class="m-t-large" style="height: 28vh"> |
||||
<base-module-card cardTitle="投诉数量趋势统计" cardType="small"> |
||||
<base-echarts :propsData="ComplaintTrendData"></base-echarts> |
||||
</base-module-card> |
||||
</base-module> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<!-- 评价趋势分析 --> |
||||
<base-module name="EvaluationTrend" id="EvaluationTrend" class="m-t-large" style="height: 28vh"> |
||||
<base-module-card cardTitle="评价趋势分析" cardType="small"> |
||||
<base-echarts :propsData="EvaluationTrendData"></base-echarts> |
||||
</base-module-card> |
||||
</base-module> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<!-- 好评数量好评率 --> |
||||
<base-module name="EvaluationGood" id="EvaluationGood" class="m-t-large" style="height: 28vh"> |
||||
<base-module-card cardTitle="好评数量好评率" cardType="small"> |
||||
<base-echarts :propsData="EvaluationGoodData"></base-echarts> |
||||
</base-module-card> |
||||
</base-module> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<!-- 投诉信息列表 --> |
||||
<base-module name="ComplaintMessage" id="ComplaintMessage" class="m-t-large" style="height: 28vh"> |
||||
<base-module-card cardTitle="投诉信息列表" cardType="small"> |
||||
<complaint-message :propsData="ComplaintMessageData"></complaint-message> |
||||
</base-module-card> |
||||
</base-module> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<!-- 评价信息列表 --> |
||||
<base-module name="EvaluationMessage" id="EvaluationMessage" class="m-t-large" style="height: 28vh"> |
||||
<base-module-card cardTitle="评价信息列表" cardType="small"> |
||||
<evaluation-message :propsData="EvaluationMessageData"></evaluation-message> |
||||
</base-module-card> |
||||
</base-module> |
||||
</el-col> |
||||
|
||||
</el-row> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
// 引入 投诉处理统计 模块 |
||||
import complaintHandle from "@/views/picture/complaint-evaluation/complaint-handle"; |
||||
// 引入 投诉信息列表 模块 |
||||
import complaintMessage from "@/views/picture/complaint-evaluation/complaint-message"; |
||||
// 引入 评价信息列表 模块 |
||||
import evaluationMessage from "@/views/picture/complaint-evaluation/evaluation-message"; |
||||
|
||||
export default { |
||||
name: "index", |
||||
components: {complaintHandle, complaintMessage, evaluationMessage}, |
||||
data() { |
||||
return { |
||||
//投诉处理统计 数据 |
||||
ComplaintHandleData: [], |
||||
//投诉类型占比统计 数据 |
||||
ComplaintTypeData: {}, |
||||
//评价满意度 数据 |
||||
EvaluationSatisfiedData: {}, |
||||
//正面评价维度分析 数据 |
||||
EvaluationFaceData: {}, |
||||
//投诉数量占比统计 数据 |
||||
ComplaintPercentData: {}, |
||||
//投诉数量趋势统计 数据 |
||||
ComplaintTrendData: {}, |
||||
//评价趋势分析 数据 |
||||
EvaluationTrendData: {}, |
||||
//好评数量好评率 数据 |
||||
EvaluationGoodData: {}, |
||||
//投诉信息列表 数据 |
||||
ComplaintMessageData: [], |
||||
//评价信息列表 数据 |
||||
EvaluationMessageData: [], |
||||
} |
||||
}, |
||||
created() { |
||||
//获取 投诉处理统计 数据 |
||||
this.getComplaintHandle() |
||||
//获取 投诉类型占比统计 数据 |
||||
this.getComplaintType() |
||||
//获取 评价满意度 数据 |
||||
this.getEvaluationSatisfied() |
||||
//获取 正面评价维度分析 数据 |
||||
this.getEvaluationFace() |
||||
//获取 投诉数量占比统计 数据 |
||||
this.getComplaintPercent() |
||||
//获取 投诉数量趋势统计 数据 |
||||
this.getComplaintTrend() |
||||
//获取 评价趋势分析 数据 |
||||
this.getEvaluationTrend() |
||||
//获取 好评数量好评率 数据 |
||||
this.getEvaluationGood() |
||||
//获取 投诉信息列表 数据 |
||||
this.getComplaintMessage() |
||||
//获取 评价信息列表 数据 |
||||
this.getEvaluationMessage() |
||||
}, |
||||
methods: { |
||||
//获取 投诉处理统计 数据 |
||||
getComplaintHandle() { |
||||
this.ComplaintHandleData = [ |
||||
{name: '待受理', value: '28'}, |
||||
{name: '和解', value: '28'}, |
||||
{name: '其它', value: '28'}, |
||||
{name: '受理中', value: '28'}, |
||||
{name: '不予处理', value: '28'}, |
||||
{name: '调解成功', value: '28'}, |
||||
{name: '调解失败', value: '28'}, |
||||
{name: '赔偿', value: '28'}, |
||||
] |
||||
}, |
||||
//获取 投诉类型占比统计 数据 |
||||
getComplaintType() { |
||||
let ringOpts = { |
||||
type: 'ring', |
||||
grid: [0, 0, 0, 0], |
||||
} |
||||
let eChartOpts = {'eChartOpts': ringOpts} |
||||
let eChartData = {'eChartData': pieChartData} |
||||
this.ComplaintTypeData = Object.assign(eChartOpts, eChartData) |
||||
}, |
||||
//获取 评价满意度 数据 |
||||
getEvaluationSatisfied() { |
||||
let ringOpts = { |
||||
type: 'ring', |
||||
grid: [0, 0, 0, 0], |
||||
} |
||||
let eChartOpts = {'eChartOpts': ringOpts} |
||||
let eChartData = {'eChartData': pieChartData} |
||||
this.EvaluationSatisfiedData = Object.assign(eChartOpts, eChartData) |
||||
}, |
||||
//获取 正面评价维度分析 数据 |
||||
getEvaluationFace() { |
||||
let areaOpts = { |
||||
type: 'area', |
||||
grid: [30, 0, 30, 30], |
||||
unit: '单位：个', |
||||
extra: { |
||||
color: [this.$Colors.blue], |
||||
} |
||||
} |
||||
let eChartOpts = {'eChartOpts': areaOpts} |
||||
let eChartData = {'eChartData': oneChartData} |
||||
this.EvaluationFaceData = Object.assign(eChartOpts, eChartData) |
||||
}, |
||||
//获取 投诉数量占比统计 数据 |
||||
getComplaintPercent() { |
||||
let pieOpts = { |
||||
type: 'pie', |
||||
grid: [30, 0, 30, 30], |
||||
} |
||||
let eChartOpts = {'eChartOpts': pieOpts} |
||||
let eChartData = {'eChartData': pieChartData} |
||||
this.ComplaintPercentData = Object.assign(eChartOpts, eChartData) |
||||
}, |
||||
//获取 投诉数量趋势统计 数据 |
||||
getComplaintTrend() { |
||||
let areaOpts = { |
||||
type: 'area', |
||||
grid: [30, 0, 30, 30], |
||||
unit: '单位：个', |
||||
extra: { |
||||
color: [this.$Colors.green], |
||||
} |
||||
} |
||||
let eChartOpts = {'eChartOpts': areaOpts} |
||||
let eChartData = {'eChartData': oneChartData} |
||||
this.ComplaintTrendData = Object.assign(eChartOpts, eChartData) |
||||
}, |
||||
//获取 评价趋势分析 数据 |
||||
getEvaluationTrend() { |
||||
let mixOpts = { |
||||
type: 'mix', |
||||
grid: [30, 0, 30, 30], |
||||
unit: '单位：个', |
||||
seriesType: ['bar', 'bar', 'line'], |
||||
extra: { |
||||
color: [this.$Colors.green, this.$Colors.blue, this.$Colors.orange], |
||||
} |
||||
} |
||||
let eChartOpts = {'eChartOpts': mixOpts} |
||||
let eChartData = {'eChartData': mixChartData} |
||||
this.EvaluationTrendData = Object.assign(eChartOpts, eChartData) |
||||
}, |
||||
//获取 好评数量好评率 数据 |
||||
getEvaluationGood() { |
||||
let mixOpts = { |
||||
type: 'mix', |
||||
grid: [30, 0, 30, 30], |
||||
unit: '单位：个', |
||||
seriesType: ['bar', 'bar', 'line'], |
||||
extra: { |
||||
color: [this.$Colors.green, this.$Colors.blue, this.$Colors.orange], |
||||
} |
||||
} |
||||
let eChartOpts = {'eChartOpts': mixOpts} |
||||
let eChartData = {'eChartData': mixChartData} |
||||
this.EvaluationGoodData = Object.assign(eChartOpts, eChartData) |
||||
}, |
||||
//获取 投诉信息列表 数据 |
||||
getComplaintMessage() { |
||||
this.ComplaintMessageData = [{ |
||||
name: '少林景区', |
||||
anonymous: '小太阳', |
||||
source: '嵩山少林景区微信', |
||||
grade: '差评', |
||||
date: '2022-05-01 19:20:00', |
||||
state: "1", |
||||
con: '噱头大于实际意义，没有第二次去的想法' |
||||
}, |
||||
{ |
||||
name: '少林景区', |
||||
anonymous: '小太阳', |
||||
source: '嵩山少林景区微信', |
||||
grade: '差评', |
||||
date: '2022-05-01 19:20:00', |
||||
state: "1", |
||||
con: '噱头大于实际意义，没有第二次去的想法' |
||||
}, |
||||
{ |
||||
name: '少林景区', |
||||
anonymous: '小太阳', |
||||
source: '嵩山少林景区微信', |
||||
grade: '差评', |
||||
date: '2022-05-01 19:20:00', |
||||
state: "1", |
||||
con: '噱头大于实际意义，没有第二次去的想法' |
||||
}] |
||||
}, |
||||
//获取 评价信息列表 数据 |
||||
getEvaluationMessage() { |
||||
this.EvaluationMessageData = [{ |
||||
name: '少林景区', |
||||
anonymous: '小太阳', |
||||
grade: '5', |
||||
date: '2022-05-01 19:20:00', |
||||
con: '噱头大于实际意义，没有第二次去的想法' |
||||
}, |
||||
{ |
||||
name: '少林景区', |
||||
anonymous: '小太阳', |
||||
grade: '4', |
||||
date: '2022-05-01 19:20:00', |
||||
con: '噱头大于实际意义，没有第二次去的想法' |
||||
}, |
||||
{ |
||||
name: '少林景区', |
||||
anonymous: '小太阳', |
||||
grade: '1', |
||||
date: '2022-05-01 19:20:00', |
||||
con: '噱头大于实际意义，没有第二次去的想法' |
||||
}] |
||||
}, |
||||
} |
||||
} |
||||
const pieChartData = { |
||||
name: "饼状图", |
||||
seriesData: [ |
||||
{name: "名称1", value: 320}, |
||||
{name: "名称2", value: 240}, |
||||
{name: "名称3", value: 149}, |
||||
{name: "名称4", value: 100}, |
||||
{name: "名称5", value: 59}, |
||||
], |
||||
} |
||||
// 混合数据 |
||||
const mixChartData = { |
||||
name: "折线图", |
||||
categories: [ |
||||
"星期一", |
||||
"星期二", |
||||
"星期三", |
||||
"星期四", |
||||
"星期五", |
||||
"星期六", |
||||
"星期日", |
||||
], |
||||
seriesData: [ |
||||
{ |
||||
name: "收入", |
||||
value: [50, 60, 40, 80, 100, 40, 60], |
||||
}, |
||||
{ |
||||
name: "同比", |
||||
value: [80, 65, 40, 60, 50, 60, 40], |
||||
}, { |
||||
name: "环比", |
||||
value: [50, 60, 40, 80, 100, 40, 60], |
||||
} |
||||
], |
||||
} |
||||
// 单柱状/折线图数据 |
||||
const oneChartData = { |
||||
name: "柱状图/折线图/区域图", |
||||
categories: [ |
||||
"星期一", |
||||
"星期二", |
||||
"星期三", |
||||
"星期四", |
||||
"星期五", |
||||
"星期六", |
||||
"星期日", |
||||
], |
||||
seriesData: [ |
||||
{ |
||||
name: "数量", |
||||
value: [50, 60, 40, 80, 100, 40, 60], |
||||
}, |
||||
], |
||||
} |
||||
// 双柱状/折线图数据 |
||||
const twoChartData = { |
||||
name: "柱状图/折线图", |
||||
categories: [ |
||||
"星期一", |
||||
"星期二", |
||||
"星期三", |
||||
"星期四", |
||||
"星期五", |
||||
"星期六", |
||||
"星期日", |
||||
], |
||||
seriesData: [ |
||||
{ |
||||
name: "收入", |
||||
value: [50, 60, 40, 80, 100, 40, 60], |
||||
}, |
||||
{ |
||||
name: "同比", |
||||
value: [80, 65, 40, 60, 50, 60, 40], |
||||
} |
||||
], |
||||
} |
||||
const pictorialChartData = { |
||||
name: "象形柱图", |
||||
seriesData: [ |
||||
{ |
||||
name: "汽车", |
||||
value: 352, |
||||
}, |
||||
{ |
||||
name: "飞机", |
||||
value: 125, |
||||
}, { |
||||
name: "火车", |
||||
value: 80, |
||||
}, { |
||||
name: "其他", |
||||
value: 50, |
||||
} |
||||
], |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue