Browse Source

星数

master
jiangyy 4 years ago
parent
commit
73868c39dc
  1. 113
      src/views/form/statistics/analysis.vue

113
src/views/form/statistics/analysis.vue

@ -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 {

Loading…
Cancel
Save