|
@@ -3,21 +3,22 @@
|
|
|
:show-close="false" :modal="false">
|
|
|
|
|
|
<div class="JNPF-common-layout">
|
|
|
- <div class="JNPF-common-layout-center">
|
|
|
+ <div class="JNPF-common-layout-center" v-if="visible">
|
|
|
<div class="top">
|
|
|
- <div class="top-title" v-if="visible">
|
|
|
+ <div class="top-title">
|
|
|
<div style="opacity: 0.5;">问卷统计</div> /
|
|
|
<div style="font-size: 20px;font-weight: bold;margin-right: 30px;">
|
|
|
- {{questionnaire.name}}
|
|
|
+ {{questionnaire.topic}}
|
|
|
</div>
|
|
|
- <el-tag style="margin-right: 20px;">匿名</el-tag>
|
|
|
+ <el-tag style="margin-right: 20px;"
|
|
|
+ v-if="questionnaire.anonymity">匿名</el-tag>
|
|
|
<div>
|
|
|
<span>下发数量:</span>
|
|
|
- <span>100</span>
|
|
|
+ <span>{{ questionnaire.pushCount }}</span>
|
|
|
</div>
|
|
|
<div>
|
|
|
<span>收回数量:</span>
|
|
|
- <span>100</span>
|
|
|
+ <span>{{ questionnaire.retractCount }}</span>
|
|
|
</div>
|
|
|
<div>
|
|
|
<span>结束倒计时:</span>
|
|
@@ -30,25 +31,69 @@
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <el-row class="JNPF-common-search-box" :gutter="16">
|
|
|
+ <el-form @submit.native.prevent>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="题目标题">
|
|
|
+ <el-input v-model="query.title" placeholder="请输入问卷标题" clearable>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search"
|
|
|
+ @click="getList()">查询</el-button>
|
|
|
+ <el-button icon="el-icon-refresh-right"
|
|
|
+ @click="reset()">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form>
|
|
|
+ </el-row>
|
|
|
<div class="JNPF-common-layout-main JNPF-flex-main">
|
|
|
- <JNPF-table v-loading="listLoading" :data="tableData">
|
|
|
- <el-table-column prop="num" label="题号" align="left" show-overflow-tooltip>
|
|
|
+ <JNPF-table v-loading="listLoading" :data="tableData" :hasNO="false">
|
|
|
+ <el-table-column prop="questionNumber" label="题号" align="center" width="100"
|
|
|
+ show-overflow-tooltip>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="title" label="题目" align="left" show-overflow-tooltip>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="" label="题目类型" align="left" show-overflow-tooltip>
|
|
|
+ <el-table-column prop="" label="题目类型" align="center" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ getQuestionType(scope.row.code.split('_')[0]) }}</span>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="" label="选项" align="left" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="!scope.row.questionnaireOption.length">--</span>
|
|
|
+ <template v-else>
|
|
|
+ <div v-for="(item,index) in scope.row.questionnaireOption"
|
|
|
+ :key="index">{{ item.optionContent}}</div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="" label="各选项数量" align="left" show-overflow-tooltip>
|
|
|
+ <el-table-column prop="" label="各选项数量" align="center" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="!scope.row.questionnaireOption.length">--</span>
|
|
|
+ <template v-else>
|
|
|
+ <div v-for="(item,index) in scope.row.questionnaireOption"
|
|
|
+ :key="index">{{ item.questionnaireOptionSubCount}}</div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="" label="百分比" align="left" show-overflow-tooltip>
|
|
|
+ <el-table-column prop="" label="百分比" align="center" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="!scope.row.questionnaireOption.length">--</span>
|
|
|
+ <template v-else>
|
|
|
+ <div v-for="(item,index) in scope.row.questionnaireOption"
|
|
|
+ :key="index">{{ item.percentage}}</div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="操作" fixed="right" width="150">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-button type="text" @click="openChart(scope.row)">预览
|
|
|
+ <el-button type="text" v-if="scope.row.questionnaireOption.length"
|
|
|
+ @click="openChart(scope.row)">预览
|
|
|
</el-button>
|
|
|
- <el-button type="text" @click="openStatistics(scope.row.id)">详情
|
|
|
+ <el-button type="text" @click="openAnswerList(scope.row)">详情
|
|
|
</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
@@ -59,10 +104,12 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="dialogChart">
|
|
|
- <el-dialog title="收货地址" :visible.sync="dialogChartVisible" :modal="false">
|
|
|
- <div class="" style="height: 300px"></div>
|
|
|
+ <el-dialog title="题目预览" :visible.sync="dialogChartVisible" :modal="false">
|
|
|
+ <div id="basic_dashboard" style="width: 100%;height: 400px;"></div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
+ <titleDetails v-if="titleDetailsVisible" ref="titleDetails" @close="closeTitleDetails" />
|
|
|
+
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
|
|
@@ -70,44 +117,105 @@
|
|
|
|
|
|
import mixin from '@/mixins/generator/form'
|
|
|
import dayjs from 'dayjs'
|
|
|
+import titleDetails from './titleDetails.vue'
|
|
|
+
|
|
|
|
|
|
import {
|
|
|
- getSuggestionsList
|
|
|
-} from "@/api/governmentCloud/suggestions/suggestions";
|
|
|
-import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
|
|
|
+ getQuestionnaireStats
|
|
|
+} from "@/api/governmentCloud/questionnaireInvestigation/questionnaireInvestigation";
|
|
|
|
|
|
|
|
|
export default {
|
|
|
mixins: [mixin],
|
|
|
- components: {},
|
|
|
+ components: { titleDetails },
|
|
|
data() {
|
|
|
return {
|
|
|
visible: false,
|
|
|
showContent: false,
|
|
|
- questionnaire: {
|
|
|
- name: '默认问卷'
|
|
|
- },
|
|
|
countSecond: null,
|
|
|
- endDate: 1725089581000,
|
|
|
+ endDate: null,
|
|
|
listLoading: false,
|
|
|
- tableData: [{
|
|
|
- title: '123',
|
|
|
- num: 1
|
|
|
- }],
|
|
|
+ tableData: [],
|
|
|
total: 0,
|
|
|
query: {
|
|
|
currentPage: 1,
|
|
|
pageSize: 20,
|
|
|
- dataType: "0"
|
|
|
+ dataType: "0",
|
|
|
+ sidx: "-createTime",
|
|
|
+ title: null
|
|
|
},
|
|
|
- dialogChartVisible: false
|
|
|
+ titleDetailsVisible: false,
|
|
|
+ dialogChartVisible: false,
|
|
|
+ questionnaire: null,
|
|
|
}
|
|
|
},
|
|
|
async created() {
|
|
|
-
|
|
|
-
|
|
|
},
|
|
|
methods: {
|
|
|
+ openAnswerList(item) {
|
|
|
+ this.titleDetailsVisible = true
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.titleDetails.init(item, this.questionnaire.id)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ closeTitleDetails() {
|
|
|
+ this.titleDetailsVisible = false
|
|
|
+ },
|
|
|
+ basic_dashboard_type(item) {
|
|
|
+ var chartDom = document.getElementById('basic_dashboard');
|
|
|
+ var myChart = this.$echarts.init(chartDom);
|
|
|
+
|
|
|
+ // 组装选项数据
|
|
|
+ let data = []
|
|
|
+ item.questionnaireOption.forEach(element => {
|
|
|
+ data.push(
|
|
|
+ { value: element.questionnaireOptionSubCount, name: element.optionContent },
|
|
|
+ )
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ var option = {
|
|
|
+ title: {
|
|
|
+ text: item.title,
|
|
|
+ subtext: '选项比例',
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'horizontal',
|
|
|
+ right: 'center',
|
|
|
+ bottom: '5%'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '题目预览',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '50%',
|
|
|
+ data: data,
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ this.query = {
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ dataType: "0",
|
|
|
+ sidx: "-createTime",
|
|
|
+ title: null
|
|
|
+ }
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
getDate(time) {
|
|
|
let str = time ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : '无数据'
|
|
|
return str
|
|
@@ -119,6 +227,7 @@ export default {
|
|
|
let end = Number(endDate);
|
|
|
//let endDate = new Date(this.assistActivityEndTime); // this.assistActivityEndTime需要倒计时的日期
|
|
|
let leftTime = end - now; // 倒计时时间差
|
|
|
+
|
|
|
// 定义变量 d,h,m,s保存倒计时的时间
|
|
|
if (leftTime >= 0) {
|
|
|
// 天
|
|
@@ -141,7 +250,7 @@ export default {
|
|
|
this.min = "00";
|
|
|
this.second = "00";
|
|
|
this.countSecond = this.hour + ':' + this.min + ':' + this.second
|
|
|
-
|
|
|
+ this.countSecond = '已结束'
|
|
|
}
|
|
|
// 等于0的时候不调用
|
|
|
if (
|
|
@@ -159,23 +268,60 @@ export default {
|
|
|
setTimeout(this.countTime, 1000);
|
|
|
}
|
|
|
},
|
|
|
- async init(id) {
|
|
|
- this.visible = true
|
|
|
+ getQuestionType(type) {
|
|
|
+ console.log(type)
|
|
|
+ let str = ''
|
|
|
+ if (type == 'TEXTAREA') {
|
|
|
+ str = '多行输入'
|
|
|
+ } else if (type == 'RADIO') {
|
|
|
+ str = '单选'
|
|
|
+ } else if (type == 'CHECKBOX') {
|
|
|
+ str = '多选'
|
|
|
+ }
|
|
|
+ return str
|
|
|
+ },
|
|
|
+ async init(questionnaire) {
|
|
|
+ this.questionnaire = questionnaire
|
|
|
+ console.log(this.questionnaire)
|
|
|
this.getList()
|
|
|
- this.countTime()
|
|
|
},
|
|
|
//返回列表页面
|
|
|
closeDialog() {
|
|
|
this.$emit("close");
|
|
|
},
|
|
|
getList() {
|
|
|
+ let params = {
|
|
|
+ ...this.query,
|
|
|
+ id: this.questionnaire.id
|
|
|
+ }
|
|
|
this.listLoading = true;
|
|
|
- setTimeout(() => {
|
|
|
- this.listLoading = false
|
|
|
- }, 1000)
|
|
|
+ getQuestionnaireStats(params).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.tableData = res.data.questionnaireTopic
|
|
|
+
|
|
|
+ console.log(this.tableData)
|
|
|
+
|
|
|
+ this.questionnaire.retractCount = res.data.retractCount
|
|
|
+ this.questionnaire.pushCount = res.data.pushCount
|
|
|
+ this.total = res.data.total
|
|
|
+ this.endDate = res.data.endTime
|
|
|
+ this.listLoading = false
|
|
|
+ this.visible = true
|
|
|
+
|
|
|
+ this.countTime()
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.listLoading = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
},
|
|
|
- openChart() {
|
|
|
+ openChart(questionnaire) {
|
|
|
this.dialogChartVisible = true
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.basic_dashboard_type(questionnaire)
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
}
|