|
@@ -0,0 +1,132 @@
|
|
|
+<template>
|
|
|
+ <div id="quest-chart">
|
|
|
+ <el-row type="flex" align="middle" justify="start" class="btn_bar">
|
|
|
+ <el-col :span="10"> {{ data.topic }} [{{ data.type | topicType }}] </el-col>
|
|
|
+ </el-row>
|
|
|
+ <template v-if="data.type != 2">
|
|
|
+ <el-row type="flex" align="middle" justify="center" v-if="btnModel.table">
|
|
|
+ <el-col :span="16">
|
|
|
+ <el-table :data="data.option" size="mini" border stripe>
|
|
|
+ <el-table-column align="center" label="选项" prop="opname"></el-table-column>
|
|
|
+ <el-table-column align="center" label="小计" prop="value"></el-table-column>
|
|
|
+ <el-table-column align="center" label="比例">
|
|
|
+ <template v-slot="{ row, $index }">
|
|
|
+ <el-progress :text-inside="true" :stroke-width="20" :percentage="getPercent(row.value)" :color="getPS(getPercent(row.value))"></el-progress>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row type="flex" align="middle" justify="center" class="btn_bar" :gutter="10" v-if="!nodata">
|
|
|
+ <el-col :span="3" v-for="(i, index) in btnList" :key="index">
|
|
|
+ <el-button :type="btnModel[i.model] ? 'primary' : ''" size="mini" @click="changeModel(i.model)">
|
|
|
+ {{ i.text }}
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row type="flex" align="middle" justify="center">
|
|
|
+ <el-col :span="16" v-if="btnModel.column">
|
|
|
+ <g2column :data="data.option" :axis="axis" :gid="data._id"></g2column>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16" v-if="btnModel.pie">
|
|
|
+ <g2pie :data="data.option" :axis="axis" :gid="data._id"></g2pie>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16" v-if="btnModel.donut">
|
|
|
+ <g2donut :data="data.option" :axis="axis" :gid="data._id"></g2donut>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16" v-if="btnModel.bar">
|
|
|
+ <g2bar :data="data.option" :axis="axis" :gid="data._id"></g2bar>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div style="margin:10px">见详情</div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import _ from 'lodash';
|
|
|
+import g2column from '@frame/parts/statistics/column.vue';
|
|
|
+import g2pie from '@frame/parts/statistics/pie.vue';
|
|
|
+import g2donut from '@frame/parts/statistics/donut.vue';
|
|
|
+import g2bar from '@frame/parts/statistics/bar.vue';
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+export default {
|
|
|
+ name: 'quest-chart',
|
|
|
+ props: {
|
|
|
+ data: { type: [Object, Array], default: () => [] },
|
|
|
+ nodata: { type: Boolean, default: false },
|
|
|
+ },
|
|
|
+ components: { g2column, g2pie, g2donut, g2bar },
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ axis: {
|
|
|
+ x: 'opname',
|
|
|
+ xAlias: '选项',
|
|
|
+ y: 'value',
|
|
|
+ yAlias: '数量',
|
|
|
+ },
|
|
|
+ btnModel: {
|
|
|
+ table: true,
|
|
|
+ pie: false,
|
|
|
+ dount: false,
|
|
|
+ column: false,
|
|
|
+ bar: false,
|
|
|
+ },
|
|
|
+ btnList: [
|
|
|
+ { text: '表格', model: 'table' },
|
|
|
+ { text: '饼状图', model: 'pie' },
|
|
|
+ { text: '圆环图', model: 'donut' },
|
|
|
+ { text: '柱状图', model: 'column' },
|
|
|
+ { text: '条形图', model: 'bar' },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ methods: {
|
|
|
+ changeModel(model) {
|
|
|
+ if (model !== 'table') {
|
|
|
+ let keys = Object.keys(this.btnModel);
|
|
|
+ for (const key of keys) {
|
|
|
+ if (key != 'table' && key != model) {
|
|
|
+ this.btnModel[key] = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.btnModel[model] = !this.btnModel[model];
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+ getPercent(num) {
|
|
|
+ let all = this.data.option.reduce((prev, next) => prev + next.value * 1 || 0, 0);
|
|
|
+ if (all == 0) return 0;
|
|
|
+ let percent = (num * 1) / all;
|
|
|
+ percent = _.round(percent, 4) * 100;
|
|
|
+ return percent;
|
|
|
+ },
|
|
|
+ getPS(percent) {
|
|
|
+ if (percent >= 70) return 'red';
|
|
|
+ if (_.inRange(percent, 30, 70)) return 'blue';
|
|
|
+ if (percent <= 30) return 'gray';
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ pageTitle() {
|
|
|
+ return `${this.$route.meta.title}`;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ topicType(val) {
|
|
|
+ if (val == 0) return '单选题';
|
|
|
+ if (val == 1) return '多选题';
|
|
|
+ if (val == 2) return '简答题';
|
|
|
+ },
|
|
|
+ },
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped></style>
|