elink-star
/
tduck-front
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

dd

old
13176889840 4 years ago
parent
bd05f97801
commit
03930127ed
2 changed files with 274 additions and 199 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/components/form/ProvinceCity/index.vue
  2. 472
      src/views/form/statistics/analysis.vue

1
src/components/form/ProvinceCity/index.vue
View File

@ -16,6 +16,7 @@ export default {
name: 'ProvinceCity', name: 'ProvinceCity',
data() { data() {
return { return {
value: '',
options: city, options: city,
props: { props: {
label: 'n', label: 'n',

472
src/views/form/statistics/analysis.vue
View File

@ -1,12 +1,14 @@
<template> <template>
<div class="analysis"> <div class="analysis">
<div v-if="list.length && list.length !== 0"> <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="content">
<div class="title"> <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> <!-- <div>
<span>图表类型：</span> <span>图表类型：</span>
<el-select v-model="item.chartType" placeholder="请选择"> <el-select v-model="item.chartType" placeholder="请选择">
<el-option <el-option
@ -17,201 +19,234 @@
/> />
</el-select> </el-select>
</div> --> </div> -->
</div> </div>
<!-- <line-chart <!-- <line-chart
class="chart" class="chart"
:chart-option="getCharData(item)" :chart-option="getCharData(item)"
:width="'90vw'" :width="'90vw'"
/> --> /> -->
<div v-if="computedCount(item.type)" class="cell-type"> <div v-if="computedCount(item.type)" class="cell-type" @click="handleOpen(item)">
<span>共收集 {{ item.detail.collectionTotal }} 条，</span> <span>共收集 {{ item.detail.collectionTotal }} 条，</span>
<span>有效 {{ item.detail.validTotal }} 条</span> <span>有效 {{ item.detail.validTotal }} 条</span>
<span v-if="item.type === 'NUMBER_INPUT'">，总计 {{ item.detail.sumTotal }} </span> <span v-if="item.type === 'NUMBER_INPUT'"
<span v-if="item.type === 'SWITCH'">，开 {{ item.detail.openTotal }} 条，关 {{ item.detail.closedTotal }} 条</span> >，总计 {{ item.detail.sumTotal }}
</div> </span>
<div v-else-if="item.type === 'RATE'" class="cell-rate"> <span v-if="item.type === 'SWITCH'"
<div v-for="(n, i) in item.detail.maxStarNum" :key="i" class="rate-item"> >，开 {{ item.detail.openTotal }} 条，关
<div class="rate-item-icon"> {{ item.detail.closedTotal }} 条</span
<el-rate >
:value="n" </div>
disabled <div v-else-if="item.type === 'RATE'" class="cell-rate">
text-color="#ff9900" <div
> v-for="(n, i) in item.detail.maxStarNum"
</el-rate> :key="i"
</div> class="rate-item"
<div class="rate-item-num">{{ item.detail.starProfile[n] || 0 }} 次</div> >
</div> <div class="rate-item-icon">
<div class="rate-item"> <el-rate :value="n" disabled text-color="#ff9900"> </el-rate>
<div class="rate-item-avg">平均星数</div> </div>
<div class="rate-item-icon"> <div class="rate-item-num">
<el-rate {{ item.detail.starProfile[n] || 0 }} 次
:value="item.detail.avgStarNum" </div>
disabled </div>
text-color="#ff9900" <div class="rate-item">
> <div class="rate-item-avg">平均星数</div>
</el-rate> <div class="rate-item-icon">
</div> <el-rate
:value="item.detail.avgStarNum"
</div> disabled
</div> text-color="#ff9900"
<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"> </el-rate>
<div class="cell-label">{{ n.label }}</div> </div>
<div class="cell-value"> </div>
<div class="cell-progress"> </div>
<el-progress :stroke-width="20" :show-text="false" :percentage="computedPercent(n.currentCount, item.detail.totalCount)" /> <div
</div> v-else-if="
<div class="cell-percent"> item.type === 'RADIO' ||
{{ computedPercent(n.currentCount, item.detail.totalCount).toFixed(2) }}% item.type === 'CHECKBOX' ||
</div> item.type === 'SELECT'
<div class="cell-num">{{ n.currentCount }}次</div> "
</div> class="cell-wrapper"
</div> >
</div> <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>
<el-divider /> <div class="cell-num">{{ n.currentCount }}次</div>
</div>
</div> </div>
</div>
</div> </div>
<data-empty v-else style="padding: 20px" desc="暂无数据分析" /> <el-divider />
</div>
</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> </template>
<script> <script>
import LineChart from '@/components/echarts/LineChart' import LineChart from '@/components/echarts/LineChart'
export default { export default {
components: { components: {
LineChart LineChart
}, },
data() { data() {
return { return {
barChartOptionData: { dialogTableVisible: false,
tooltip: { dialogTitle: '',
trigger: 'axis', dialogData: [],
backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度 dialogHeader: [],
color: 'black', barChartOptionData: {
borderWidth: '1', tooltip: {
borderColor: 'rgb(156,209,255)', trigger: 'axis',
textStyle: { backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度
color: 'black' color: 'black',
}, borderWidth: '1',
axisPointer: { borderColor: 'rgb(156,209,255)',
type: 'shadow' textStyle: {
} color: 'black'
}, },
grid: { axisPointer: {
left: '3%', type: 'shadow'
right: '4%', }
bottom: '3%', },
containLabel: true grid: {
}, left: '3%',
xAxis: [ right: '4%',
{ bottom: '3%',
type: 'category', containLabel: true
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], },
axisTick: { xAxis: [
alignWithLabel: true {
} type: 'category',
} data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
], axisTick: {
yAxis: [ alignWithLabel: true
{ }
type: 'value' }
} ],
], yAxis: [
series: [ {
{ type: 'value'
name: '数量', }
type: 'line', ],
barWidth: '40%', series: [
data: [10, 52, 200, 334, 390, 330, 220] {
} name: '数量',
] type: 'line',
}, barWidth: '40%',
list: [], data: [10, 52, 200, 334, 390, 330, 220]
options: [ }
{ ]
value: 'pie', },
label: '饼图' list: [],
}, options: [
/* { {
value: 'pie',
label: '饼图'
},
/* {
value: "ring", value: "ring",
label: "环形图", label: "环形图",
}, */ }, */
{ {
value: 'bar', value: 'bar',
label: '柱状图' label: '柱状图'
}, },
{ {
value: 'line', value: 'line',
label: '折线图' 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
})
}, },
mounted() { getCharData(data) {
this.getData() const config = {
}, tooltip: {
methods: { backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度
getData() { color: 'black',
// `${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/report/analysis` borderWidth: '1',
// params: { projectKey: this.$route.query.key } borderColor: 'rgb(156,209,255)',
this.$api textStyle: {
.post('/data/aggregator/questionnaire/analysisreport', { color: 'black'
projectKey: this.$route.query.key }
}) },
.then(res => { grid: {
this.list = res.data left: '3%',
}) right: '4%',
bottom: '3%',
containLabel: true
}, },
getCharData(data) { xAxis: [
const config = { {
tooltip: { type: 'category',
backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度 axisTick: {
color: 'black', alignWithLabel: true
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' yAxis: [
} {
config.tooltip.trigger = 'axis' type: 'value'
config.xAxis[0].data = data.fieldName }
config.series[0].data = data.data ],
config.series[0].type = data.chartType series: [
} else { {
// 环形图暂时不用 无法切换到饼图 name: '数量',
/* if ("ring" === data.chartType) { 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].radius = ["40%", "70%"];
config.series[0].emphasis = { config.series[0].emphasis = {
@ -225,22 +260,62 @@ export default {
delete config.series[0].radius delete config.series[0].radius
delete config.series[0].label delete config.series[0].label
} */ } */
config.series[0].data = [] config.series[0].data = []
Object.keys(data.map).forEach(key => { Object.keys(data.map).forEach((key) => {
config.series[0].data.push({ name: key, value: data.map[key] }) config.series[0].data.push({ name: key, value: data.map[key] })
}) })
// config.series[0].data = data.map // 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
} }
return config })
}, })
computedCount(type) { },
const arr = ['PROVINCE_CITY', 'NUMBER_INPUT', 'SWITCH', 'INPUT', 'TEXTAREA', 'INPUT_MAP', 'TIME', 'DATE_RANGE', 'DATE', 'TIME_RANGE'] async handleOpen(item) {
return arr.includes(type) if (item.type === 'SWITCH' || item.type === 'NUMBER_INPUT') return false
}, this.dialogTitle = item.label
computedPercent(num, count) { this.dialogHeader.push(item)
return ((num * 100) / count) 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> </script>
@ -275,7 +350,8 @@ export default {
.cell-wrapper { .cell-wrapper {
width: 100%; width: 100%;
border: 1px solid #eee; border: 1px solid #eee;
.cell, .cell-value { .cell,
.cell-value {
widows: 100%; widows: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -289,7 +365,6 @@ export default {
width: 60%; width: 60%;
box-sizing: border-box; box-sizing: border-box;
padding-left: 10px; padding-left: 10px;
} }
.cell-value { .cell-value {
width: 40%; width: 40%;
@ -325,6 +400,5 @@ export default {
font-size: 14rpx; font-size: 14rpx;
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save