update

package.json

@@ -15,6 +15,7 @@
     "@stomp/stompjs": "^5.4.3",
     "axios": "^0.19.1",
     "core-js": "^3.4.4",
+    "echarts": "^4.7.0",
     "element-ui": "^2.13.0",
     "jsonwebtoken": "^8.5.1",
     "lodash": "^4.17.15",

src/router/index.js

@@ -61,6 +61,20 @@ const newPlan = [
     component: () => import('@/views/new-plan/class/name-list.vue'),
   },
 ];
+const statistics = [
+  {
+    path: '/statistics/question/index',
+    name: 'statistics_question',
+    meta: { title: '问卷统计' },
+    component: () => import('@/views/statistics/index.vue'),
+  },
+  {
+    path: '/statistics/question/detail',
+    name: 'statistics_question_detail',
+    meta: { title: '问卷统计' },
+    component: () => import('@/views/statistics/detail.vue'),
+  },
+];
 
 const routes = [
   {
@@ -69,6 +83,7 @@ const routes = [
     component: () => import('@/views/index.vue'),
     children: [
       ...newPlan,
+      ...statistics,
       {
         path: '/list',
         name: 'test_list',

src/views/questionnaire/detail.vue

@@ -16,7 +16,7 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="状态" required prop="type">
-          <el-radio-group v-model="info.type">
+          <el-radio-group v-model="info.status">
             <el-radio label="0" v-if="isNew == true">草稿</el-radio>
             <el-radio label="1">发布</el-radio>
             <el-radio label="2">禁用</el-radio>

src/views/statistics/charts/line-bar.vue

@@ -0,0 +1,103 @@
+<template>
+  <div id="line-bar">
+    <div id="chartLinebar" class="" style="height:350px;"></div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import echarts from 'echarts/lib/echarts';
+import 'echarts/lib/chart/line';
+import 'echarts/lib/chart/bar';
+import 'echarts/lib/component/title';
+import 'echarts/lib/component/legend';
+import 'echarts/lib/component/toolbox';
+import 'echarts/lib/component/markPoint';
+import 'echarts/lib/component/tooltip';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'line-bar',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      mychart: null,
+    };
+  },
+  created() {
+    this.$nextTick(() => {
+      this.init();
+    });
+  },
+  methods: {
+    init() {
+      let data = [];
+      for (let index = 0; index < 4; index++) {
+        data.push(_.round(_.random(50, true)));
+      }
+      let data2 = [];
+      for (let index = 0; index < 4; index++) {
+        data2.push(_.round(_.random(50, true)));
+      }
+      const option = {
+        title: { text: '满意度调查' },
+        tooltip: { trigger: 'axis' },
+        legend: {
+          data: ['满意度调查'],
+        },
+        xAxis: {
+          boundaryGap: true,
+          nameLocation: 'center',
+          data: ['满意', '一般', '强差人意', '不满意'],
+        },
+        yAxis: {},
+        series: [
+          {
+            name: '满意度',
+            step: true,
+            label: {
+              show: true,
+              position: 'top',
+            },
+            type: 'line',
+            data: data,
+            color: ['#333ceb'],
+          },
+          {
+            name: '满意度',
+            label: {
+              show: true,
+              position: 'top',
+            },
+            type: 'line',
+            data: data2,
+            color: ['#acaecce'],
+          },
+        ],
+        toolbox: {
+          show: true,
+          feature: {
+            dataView: { readOnly: false },
+            saveAsImage: {},
+            restore: {},
+            magicType: { type: ['bar'] },
+          },
+        },
+      };
+      this.mychart = echarts.init(document.getElementById('chartLinebar'));
+      this.mychart.setOption(option);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/statistics/charts/pie.vue

@@ -0,0 +1,97 @@
+<template>
+  <div id="pie">
+    <el-row>
+      <el-col :span="24" style="padding:10px">
+        <el-radio-group v-model="myPieRadio" @change="init('reload')">
+          <el-radio label="year">按年统计</el-radio>
+          <el-radio label="term">按期统计</el-radio>
+          <el-radio label="class">按班统计</el-radio>
+        </el-radio-group>
+      </el-col>
+      <el-col :span="24">
+        <div id="chartPie" class="" style="height:350px;"></div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import echarts from 'echarts/lib/echarts';
+import 'echarts/lib/chart/pie';
+import 'echarts/lib/component/title';
+import 'echarts/lib/component/legend';
+import 'echarts/lib/component/toolbox';
+import 'echarts/lib/component/markPoint';
+import 'echarts/lib/component/tooltip';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'pie',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      myPie: null,
+      myPieRadio: 'year',
+    };
+  },
+  created() {
+    this.$nextTick(() => {
+      this.init();
+    });
+  },
+  methods: {
+    init(type) {
+      if (type) this.myPie.dispose();
+      let data = [];
+      for (let index = 0; index < 4; index++) {
+        data.push(_.round(_.random(50, true)));
+      }
+      this.myPie = echarts.init(document.getElementById('chartPie'));
+      const option = {
+        title: { text: '满意度调查' },
+        tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' },
+        legend: {
+          data: ['满意', '一般', '强差人意', '不满意'],
+        },
+        series: [
+          {
+            name: '统计',
+            label: {
+              show: true,
+              position: 'top',
+            },
+            type: 'pie',
+            data: [
+              { name: '满意', value: data[0] || 0, itemStyle: { color: '#7cb5ec' } },
+              { name: '一般', value: data[1] || 0, itemStyle: { color: '#ffa94b' } },
+              { name: '强差人意', value: data[2] || 0, itemStyle: { color: '#346da4' } },
+              { name: '不满意', value: data[3] || 0, itemStyle: { color: '#abcdef' } },
+            ],
+            animationType: 'scale',
+          },
+        ],
+        toolbox: {
+          show: true,
+          feature: {
+            dataView: { readOnly: false },
+            saveAsImage: {},
+          },
+        },
+      };
+      this.myPie.setOption(option);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/statistics/detail.vue

@@ -0,0 +1,57 @@
+<template>
+  <div id="detail">
+    <detail-frame :title="pageTitle" returns="./index">
+      <el-card>
+        <el-row type="flex" align="middle" justify="center" :gutter="20">
+          <el-col :span="10">
+            <pie></pie>
+          </el-col>
+          <el-col :span="10">
+            <line-bar></line-bar>
+          </el-col>
+        </el-row>
+      </el-card>
+    </detail-frame>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import pie from './charts/pie.vue';
+import lineBar from './charts/line-bar.vue';
+import echarts from 'echarts/lib/echarts';
+import 'echarts/lib/chart/pie';
+import 'echarts/lib/component/title';
+import 'echarts/lib/component/legend';
+import 'echarts/lib/component/toolbox';
+import 'echarts/lib/component/markPoint';
+import 'echarts/lib/component/tooltip';
+import detailFrame from '@frame/layout/admin/detail-frame';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'detail',
+  props: {},
+  components: { detailFrame, pie, lineBar },
+  data: function() {
+    return {
+      mylb: null,
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/statistics/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div id="index">
+    <list-frame title="问卷列表页" @query="search" :total="total" :filter="filFields" :needAdd="false">
+      <data-table :fields="fields" :data="list" :opera="opera" @data="toData"></data-table>
+    </list-frame>
+  </div>
+</template>
+
+<script>
+import listFrame from '@frame/layout/admin/list-frame';
+import dataTable from '@frame/components/data-table';
+import { createNamespacedHelpers } from 'vuex';
+const { mapActions: questionnaire } = createNamespacedHelpers('questionnaire');
+
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    listFrame,
+    dataTable,
+  },
+  data: () => ({
+    opera: [
+      {
+        label: '查看结果',
+        icon: 'el-icon-s-data',
+        method: 'data',
+      },
+    ],
+    fields: [
+      { label: '问卷序号', prop: 'num' },
+      { label: '问卷标题', prop: 'name' },
+      { label: '问卷类型', prop: 'type', format: i => (i == '0' ? '常用问卷' : i == '1' ? '非常用问题' : '教师问卷') },
+    ],
+    filFields: [
+      { label: '问卷名', model: 'name' },
+      { label: '问卷序号', model: 'id' },
+    ],
+    list: [],
+    total: 0,
+  }),
+
+  created() {
+    this.search();
+  },
+  computed: {},
+  methods: {
+    ...questionnaire(['query', 'delete']),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      const res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+    toData({ data }) {
+      this.$router.push({ path: './detail', query: { id: data.id } });
+    },
+    async toDelete({ data }) {
+      const res = await this.delete(data.id);
+      this.$checkRes(res, '删除成功', '删除失败');
+      this.search();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>