|
|
@ -1,12 +1,11 @@ |
|
|
|
<template> |
|
|
|
<div class="analysis"> |
|
|
|
<div v-if="list.length && list.length !== 0"> |
|
|
|
<div v-for="(item, index) in list" :key="index"> |
|
|
|
<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 |
|
|
|
> |
|
|
|
<span style="font-size: 16px; font-weight: bold">Q{{ index + 1 }} :{{ item.label }}({{ item.type }})</span> |
|
|
|
|
|
|
|
<!-- <div> |
|
|
|
<span>图表类型:</span> |
|
|
@ -25,31 +24,31 @@ |
|
|
|
:chart-option="getCharData(item)" |
|
|
|
:width="'90vw'" |
|
|
|
/> --> |
|
|
|
<div v-if="computedCount(item.type)" class="cell-type" @click="handleOpen(item)"> |
|
|
|
<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 v-if="item.type === 'NUMBER_INPUT'">,总计 {{ item.detail.sumTotal }} |
|
|
|
</span> |
|
|
|
<span v-if="item.type === 'SWITCH'" |
|
|
|
>,开 {{ item.detail.openTotal }} 条,关 |
|
|
|
{{ item.detail.closedTotal }} 条</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" |
|
|
|
<div v-else-if="item.type === 'RATE'" |
|
|
|
class="cell-rate"> |
|
|
|
<div v-for="(n, i) in item.detail.maxStarNum" |
|
|
|
:key="i" |
|
|
|
class="rate-item" |
|
|
|
> |
|
|
|
class="rate-item"> |
|
|
|
<div class="rate-item-icon"> |
|
|
|
<el-rate :value="n" disabled text-color="#ff9900"> </el-rate> |
|
|
|
<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"> |
|
|
|
<div class="rate-item-avg">平均星数</div> |
|
|
|
<div class="rate-item-icon"> |
|
|
|
<el-rate |
|
|
@ -59,20 +58,26 @@ |
|
|
|
> |
|
|
|
</el-rate> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
<div class="rate-item"> |
|
|
|
<div class="rate-item-avg">平均星数</div> |
|
|
|
<div class="rate-item-icon"> |
|
|
|
<span>{{item.detail.avgStarNum}}</span> |
|
|
|
|
|
|
|
</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"> |
|
|
|
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" |
|
|
|
<el-progress :stroke-width="20" |
|
|
|
:show-text="false" |
|
|
|
:percentage="computedPercent(n.currentCount, item.detail.totalCount)" |
|
|
|
/> |
|
|
|
:percentage="computedPercent(n.currentCount, item.detail.totalCount)" /> |
|
|
|
</div> |
|
|
|
<div class="cell-percent"> |
|
|
|
{{ computedPercent(n.currentCount, item.detail.totalCount).toFixed(2) }}% |
|
|
@ -81,16 +86,17 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-else-if="item.type === 'CASCADER'" class="cell-wrapper"> |
|
|
|
<div v-for="(n, i) in item.detail.profile" :key="i" class="cell"> |
|
|
|
<div v-else-if="item.type === 'CASCADER'" |
|
|
|
class="cell-wrapper"> |
|
|
|
<div v-for="(n, i) in item.detail.profile" |
|
|
|
:key="i" |
|
|
|
class="cell"> |
|
|
|
<div class="cell-label">{{ i }}</div> |
|
|
|
<div class="cell-value"> |
|
|
|
<div class="cell-progress"> |
|
|
|
<el-progress |
|
|
|
:stroke-width="20" |
|
|
|
<el-progress :stroke-width="20" |
|
|
|
:show-text="false" |
|
|
|
:percentage="computedPercent(n, item.detail.totalCount)" |
|
|
|
/> |
|
|
|
:percentage="computedPercent(n, item.detail.totalCount)" /> |
|
|
|
</div> |
|
|
|
<div class="cell-percent"> |
|
|
|
{{ computedPercent(n, item.detail.totalCount).toFixed(2) }}% |
|
|
@ -103,16 +109,29 @@ |
|
|
|
<el-divider /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<data-empty v-else style="padding: 20px" desc="暂无数据分析" /> |
|
|
|
<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" label="序号" width="50" align="center"> |
|
|
|
<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" |
|
|
|
label="序号" |
|
|
|
width="50" |
|
|
|
align="center"> |
|
|
|
<!-- <template slot-scope="scope"> |
|
|
|
{{ scope.row.index }} |
|
|
|
</template> --> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column v-for="item in dialogHeader" :key="item.formItemId" :prop="item.formItemId" :label="item.label" /> |
|
|
|
<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> |
|
|
@ -127,7 +146,7 @@ export default { |
|
|
|
components: { |
|
|
|
LineChart |
|
|
|
}, |
|
|
|
data() { |
|
|
|
data () { |
|
|
|
return { |
|
|
|
dialogTableVisible: false, |
|
|
|
dialogTitle: '', |
|
|
@ -197,11 +216,11 @@ export default { |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
mounted () { |
|
|
|
this.getData() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getData() { |
|
|
|
getData () { |
|
|
|
// `${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/report/analysis` |
|
|
|
// params: { projectKey: this.$route.query.key } |
|
|
|
this.$api |
|
|
@ -212,7 +231,7 @@ export default { |
|
|
|
this.list = res.data |
|
|
|
}) |
|
|
|
}, |
|
|
|
getCharData(data) { |
|
|
|
getCharData (data) { |
|
|
|
const config = { |
|
|
|
tooltip: { |
|
|
|
backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度 |
|
|
@ -282,7 +301,7 @@ export default { |
|
|
|
} |
|
|
|
return config |
|
|
|
}, |
|
|
|
getInputList(id, type) { |
|
|
|
getInputList (id, type) { |
|
|
|
|
|
|
|
this.$api |
|
|
|
.post('/data/aggregator/questionnaire/itemresdetail-list', { |
|
|
@ -302,7 +321,7 @@ export default { |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
getConcatList() { |
|
|
|
getConcatList () { |
|
|
|
|
|
|
|
this.$api |
|
|
|
.post('/data/aggregator/questionnaire/itemresdetail-concat', { |
|
|
@ -313,7 +332,7 @@ export default { |
|
|
|
this.dialogHeader = res.data.tableHeaderList |
|
|
|
}) |
|
|
|
}, |
|
|
|
async handleOpen(item) { |
|
|
|
async handleOpen (item) { |
|
|
|
if (item.type === 'SWITCH' || item.type === 'NUMBER_INPUT') return false |
|
|
|
|
|
|
|
|
|
|
@ -328,13 +347,13 @@ export default { |
|
|
|
|
|
|
|
this.dialogTableVisible = true |
|
|
|
}, |
|
|
|
handleClose() { |
|
|
|
handleClose () { |
|
|
|
this.dialogHeader = [] |
|
|
|
this.dialogTitle = '' |
|
|
|
this.dialogData = [] |
|
|
|
this.dialogTableVisible = false |
|
|
|
}, |
|
|
|
computedCount(type) { |
|
|
|
computedCount (type) { |
|
|
|
const arr = [ |
|
|
|
'PROVINCE_CITY', |
|
|
|
'NUMBER_INPUT', |
|
|
@ -349,7 +368,7 @@ export default { |
|
|
|
] |
|
|
|
return arr.includes(type) |
|
|
|
}, |
|
|
|
computedPercent(num, count) { |
|
|
|
computedPercent (num, count) { |
|
|
|
return (num * 100) / count |
|
|
|
} |
|
|
|
} |
|
|
@ -383,7 +402,7 @@ export default { |
|
|
|
.cell-type { |
|
|
|
padding-left: 10px; |
|
|
|
font-size: 14px; |
|
|
|
color: #409EFF; |
|
|
|
color: #409eff; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.cell-wrapper { |
|
|
|