You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
404 lines
10 KiB
404 lines
10 KiB
<template>
|
|
<div class="analysis">
|
|
<div v-if="list.length && list.length !== 0">
|
|
<div v-for="(item, index) in list" :key="index">
|
|
<div class="content">
|
|
<div class="title">
|
|
<span style="font-size: 16px; font-weight: bold"
|
|
>Q{{ index + 1 }} ：{{ item.label }}（{{ item.type }}）</span
|
|
>
|
|
|
|
<!-- <div>
|
|
<span>图表类型：</span>
|
|
<el-select v-model="item.chartType" placeholder="请选择">
|
|
<el-option
|
|
v-for="subItem in options"
|
|
:key="subItem.value"
|
|
:label="subItem.label"
|
|
:value="subItem.value"
|
|
/>
|
|
</el-select>
|
|
</div> -->
|
|
</div>
|
|
<!-- <line-chart
|
|
class="chart"
|
|
:chart-option="getCharData(item)"
|
|
:width="'90vw'"
|
|
/> -->
|
|
<div v-if="computedCount(item.type)" class="cell-type" @click="handleOpen(item)">
|
|
<span>共收集 {{ item.detail.collectionTotal }} 条，</span>
|
|
<span>有效 {{ item.detail.validTotal }} 条</span>
|
|
<span v-if="item.type === 'NUMBER_INPUT'"
|
|
>，总计 {{ item.detail.sumTotal }}
|
|
</span>
|
|
<span v-if="item.type === 'SWITCH'"
|
|
>，开 {{ item.detail.openTotal }} 条，关
|
|
{{ item.detail.closedTotal }} 条</span
|
|
>
|
|
</div>
|
|
<div v-else-if="item.type === 'RATE'" class="cell-rate">
|
|
<div
|
|
v-for="(n, i) in item.detail.maxStarNum"
|
|
:key="i"
|
|
class="rate-item"
|
|
>
|
|
<div class="rate-item-icon">
|
|
<el-rate :value="n" disabled text-color="#ff9900"> </el-rate>
|
|
</div>
|
|
<div class="rate-item-num">
|
|
{{ item.detail.starProfile[n] || 0 }} 次
|
|
</div>
|
|
</div>
|
|
<div class="rate-item">
|
|
<div class="rate-item-avg">平均星数</div>
|
|
<div class="rate-item-icon">
|
|
<el-rate
|
|
:value="item.detail.avgStarNum"
|
|
disabled
|
|
text-color="#ff9900"
|
|
>
|
|
</el-rate>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-else-if="
|
|
item.type === 'RADIO' ||
|
|
item.type === 'CHECKBOX' ||
|
|
item.type === 'SELECT'
|
|
"
|
|
class="cell-wrapper"
|
|
>
|
|
<div v-for="(n, i) in item.detail.options" :key="i" class="cell">
|
|
<div class="cell-label">{{ n.label }}</div>
|
|
<div class="cell-value">
|
|
<div class="cell-progress">
|
|
<el-progress
|
|
:stroke-width="20"
|
|
:show-text="false"
|
|
:percentage="computedPercent(n.currentCount, item.detail.totalCount)"
|
|
/>
|
|
</div>
|
|
<div class="cell-percent">
|
|
{{ computedPercent(n.currentCount, item.detail.totalCount).toFixed(2) }}%
|
|
</div>
|
|
<div class="cell-num">{{ n.currentCount }}次</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-divider />
|
|
</div>
|
|
</div>
|
|
<data-empty v-else style="padding: 20px" desc="暂无数据分析" />
|
|
|
|
<el-dialog :title="dialogTitle" :visible.sync="dialogTableVisible" :close-on-click-modal="false" @close="handleClose">
|
|
<el-table :data="dialogData" max-height="400" border>
|
|
<el-table-column
|
|
type="index"
|
|
width="50">
|
|
</el-table-column>
|
|
<el-table-column v-for="item in dialogHeader" :key="item.formItemId" :prop="item.formItemId" :label="item.label" />
|
|
<!-- <el-table-column property="name" label="姓名" width="200"></el-table-column>
|
|
<el-table-column property="address" label="地址"></el-table-column> -->
|
|
</el-table>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import LineChart from '@/components/echarts/LineChart'
|
|
export default {
|
|
components: {
|
|
LineChart
|
|
},
|
|
data() {
|
|
return {
|
|
dialogTableVisible: false,
|
|
dialogTitle: '',
|
|
dialogData: [],
|
|
dialogHeader: [],
|
|
barChartOptionData: {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度
|
|
color: 'black',
|
|
borderWidth: '1',
|
|
borderColor: 'rgb(156,209,255)',
|
|
textStyle: {
|
|
color: 'black'
|
|
},
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'line',
|
|
barWidth: '40%',
|
|
data: [10, 52, 200, 334, 390, 330, 220]
|
|
}
|
|
]
|
|
},
|
|
list: [],
|
|
options: [
|
|
{
|
|
value: 'pie',
|
|
label: '饼图'
|
|
},
|
|
/* {
|
|
value: "ring",
|
|
label: "环形图",
|
|
}, */
|
|
{
|
|
value: 'bar',
|
|
label: '柱状图'
|
|
},
|
|
{
|
|
value: 'line',
|
|
label: '折线图'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
getData() {
|
|
// `${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/report/analysis`
|
|
// params: { projectKey: this.$route.query.key }
|
|
this.$api
|
|
.post('/data/aggregator/questionnaire/analysisreport', {
|
|
projectKey: this.$route.query.key
|
|
})
|
|
.then((res) => {
|
|
this.list = res.data
|
|
})
|
|
},
|
|
getCharData(data) {
|
|
const config = {
|
|
tooltip: {
|
|
backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度
|
|
color: 'black',
|
|
borderWidth: '1',
|
|
borderColor: 'rgb(156,209,255)',
|
|
textStyle: {
|
|
color: 'black'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'pie',
|
|
barWidth: '40%'
|
|
}
|
|
]
|
|
}
|
|
if (['bar', 'line'].includes(data.chartType)) {
|
|
config.tooltip.axisPointer = {
|
|
type: 'line'
|
|
}
|
|
config.tooltip.trigger = 'axis'
|
|
config.xAxis[0].data = data.fieldName
|
|
config.series[0].data = data.data
|
|
config.series[0].type = data.chartType
|
|
} else {
|
|
// 环形图暂时不用 无法切换到饼图
|
|
/* if ("ring" === data.chartType) {
|
|
config.series[0].radius = ["40%", "70%"];
|
|
|
|
config.series[0].emphasis = {
|
|
label: {
|
|
show: true,
|
|
fontSize: '25',
|
|
fontWeight: 'bold'
|
|
}
|
|
}
|
|
}else{
|
|
delete config.series[0].radius
|
|
delete config.series[0].label
|
|
} */
|
|
config.series[0].data = []
|
|
Object.keys(data.map).forEach((key) => {
|
|
config.series[0].data.push({ name: key, value: data.map[key] })
|
|
})
|
|
// config.series[0].data = data.map
|
|
}
|
|
return config
|
|
},
|
|
getDetail(id, type) {
|
|
|
|
this.$api
|
|
.post('/data/aggregator/questionnaire/itemresdetail-list', {
|
|
projectKey: this.$route.query.key,
|
|
formItemId: id,
|
|
type
|
|
})
|
|
.then((res) => {
|
|
this.dialogData = res.data.map(item => {
|
|
return {
|
|
[id]: item
|
|
}
|
|
})
|
|
})
|
|
},
|
|
async handleOpen(item) {
|
|
if (item.type === 'SWITCH' || item.type === 'NUMBER_INPUT') return false
|
|
this.dialogTitle = item.label
|
|
this.dialogHeader.push(item)
|
|
await this.getDetail(item.formItemId, item.type)
|
|
this.dialogTableVisible = true
|
|
},
|
|
handleClose() {
|
|
this.dialogHeader = []
|
|
this.dialogTitle = ''
|
|
this.dialogData = []
|
|
this.dialogTableVisible = false
|
|
},
|
|
computedCount(type) {
|
|
const arr = [
|
|
'PROVINCE_CITY',
|
|
'NUMBER_INPUT',
|
|
'SWITCH',
|
|
'INPUT',
|
|
'TEXTAREA',
|
|
'INPUT_MAP',
|
|
'TIME',
|
|
'DATE_RANGE',
|
|
'DATE',
|
|
'TIME_RANGE'
|
|
]
|
|
return arr.includes(type)
|
|
},
|
|
computedPercent(num, count) {
|
|
return (num * 100) / count
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.analysis {
|
|
width: 100%;
|
|
// padding: 20px;
|
|
.content {
|
|
padding: 20px;
|
|
width: 100%;
|
|
.title {
|
|
font-size: 14px;
|
|
// padding: 0 30px;
|
|
height: 54px;
|
|
line-height: 54px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.select {
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.cell-type {
|
|
padding-left: 10px;
|
|
font-size: 14px;
|
|
}
|
|
.cell-wrapper {
|
|
width: 100%;
|
|
border: 1px solid #eee;
|
|
.cell,
|
|
.cell-value {
|
|
widows: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.cell {
|
|
justify-content: space-between;
|
|
padding: 10px 0;
|
|
font-size: 14px;
|
|
border-bottom: 1px solid #eee;
|
|
.cell-label {
|
|
width: 60%;
|
|
box-sizing: border-box;
|
|
padding-left: 10px;
|
|
}
|
|
.cell-value {
|
|
width: 40%;
|
|
.cell-progress {
|
|
// flex: 1;
|
|
width: 180px;
|
|
}
|
|
.cell-percent {
|
|
margin-left: 10px;
|
|
}
|
|
.cell-num {
|
|
width: 40%;
|
|
flex-shrink: 0;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
.cell:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.rate-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
.rate-item-avg {
|
|
margin-right: 30px;
|
|
font-size: 14rpx;
|
|
}
|
|
.rate-item-num {
|
|
margin-left: 60px;
|
|
font-size: 14rpx;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|