hh

src/store/index.js

@@ -9,6 +9,7 @@ import gensign from './gensign';
 import chat from './chat';
 import question from './question';
 import questionnaire from './questionnaire';
+import uploadquestion from './uploadquestion';
 import * as ustate from './user/state';
 import * as umutations from './user/mutations';
 
@@ -28,5 +29,6 @@ export default new Vuex.Store({
     chat,
     question,
     questionnaire,
+    uploadquestion,
   },
 });

src/store/uploadquestion.js

@@ -0,0 +1,68 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+import axios from 'axios';
+Vue.use(Vuex);
+const api = {
+  interface: `/api/onlive/uploadquestion`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async completion({ commit }, { ...info } = {}) {
+    const res = await this.$axios.$get(`${api.interface}/completion`, { ...info });
+    return res;
+  },
+  async query({ commit }, { skip = 0, limit, ...info } = {}) {
+    const res = await this.$axios.$get(`${api.interface}`, { skip, limit, ...info });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.interface}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.interface}/${payload}`);
+    return res;
+  },
+  async update({ commit }, { id, ...data }) {
+    const res = await this.$axios.$post(`${api.interface}/update/${id}`, data);
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.interface}/${payload}`);
+    return res;
+  },
+  async mergeRequest({ commit, dispatch }, { method, data }) {
+    let toRequest = () => {
+      let res = [];
+      for (const i of data) {
+        res.push(dispatch(method, i));
+      }
+      return res;
+    };
+    let result = await axios.all(toRequest());
+    let newFilter = data => {
+      let res = data.map(i => {
+        let type = _.isArray(i);
+        if (!type) {
+          //fetch的多个请求 是object 将errcode为0的data取出来
+          return _.get(i, `data`, i);
+        } else {
+          //query的多个请求 array 将此数据再次走这个方法
+          return newFilter(i);
+        }
+      });
+      return res;
+    };
+    let returns = _.flattenDeep(newFilter(result));
+    return returns;
+  },
+};
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/views/question/part/tongji.vue

@@ -1,18 +1,89 @@
 <template>
   <div id="tongji">
-    <p>tongji</p>
+    <div id="container"></div>
+    <div id="contque"></div>
   </div>
 </template>
 
 <script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+import { Bar, StackedBar, Donut, Column, StateManager, GroupedColumn } from '@antv/g2plot';
+const { mapActions: uploadquestion } = createNamespacedHelpers('uploadquestion');
+
 export default {
   name: 'tongji',
   props: {},
   components: {},
-  data: () => ({}),
-  created() {},
+  data: () => ({
+    roomList: [],
+    queList: [],
+  }),
+  created() {
+    this.search();
+  },
   computed: {},
-  methods: {},
+  methods: {
+    ...uploadquestion({ completion: 'completion' }),
+    async search() {
+      const info = { type: '0' };
+      const data = await this.completion(info);
+      this.$set(this, `roomList`, data.data);
+      const infoque = { type: '1' };
+      const dataque = await this.completion(infoque);
+      this.$set(this, `queList`, dataque.data);
+      this.tongjiroom();
+      this.tongjique();
+    },
+    tongjiroom() {
+      const data = [];
+      for (const room of this.roomList) {
+        data.push({ 房间号: room.roomname, 人数: room.upcount, countname: '答题' });
+        data.push({ 房间号: room.roomname, 人数: room.lcount, countname: '观看' });
+      }
+      console.log(data);
+      const columnPlot = new GroupedColumn(document.getElementById('container'), {
+        title: {
+          visible: true,
+          text: '直播间问卷统计',
+        },
+        forceFit: true,
+        data,
+        xField: '房间号',
+        yField: '人数',
+        yAxis: {
+          min: 0,
+        },
+        label: {
+          visible: true,
+        },
+        groupField: 'countname',
+        color: ['#1ca9e6', '#f88c24'],
+      });
+      columnPlot.render();
+    },
+    tongjique() {
+      const data = [];
+      for (const que of this.queList) {
+        data.push({ 问卷: que.name, 人数: que.upcount });
+      }
+      const barPlot = new Bar(document.getElementById('contque'), {
+        title: {
+          visible: true,
+          text: '问卷统计图',
+        },
+        forceFit: true,
+        data,
+        xField: '人数',
+        yField: '问卷',
+        label: {
+          visible: true,
+          formatter: v => Math.round(v) + '人',
+        },
+      });
+
+      barPlot.render();
+    },
+  },
 };
 </script>