tongji

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@antv/g2plot": "^1.1.6",
     "axios": "^0.19.2",
     "core-js": "^3.6.5",
     "element-ui": "^2.13.2",

src/store/index.js

@@ -4,6 +4,7 @@ import login from './login';
 import roomuser from './roomuser';
 import role from './role';
 import room from './room';
+import lookuser from './lookuser';
 import gensign from './gensign';
 import * as ustate from './user/state';
 import * as umutations from './user/mutations';
@@ -19,6 +20,7 @@ export default new Vuex.Store({
     roomuser,
     role,
     room,
+    lookuser,
     gensign,
   },
 });

src/store/lookuser.js

@@ -0,0 +1,51 @@
+// 主播
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  roomuserInfo: `/api/onlive/lookuser`,
+  looknumberInfo: `/api/onlive/lookuser/looknumber`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit = 10, ...info } = {}) {
+    const res = await this.$axios.$get(api.roomuserInfo, {
+      skip,
+      limit,
+      ...info,
+    });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.roomuserInfo}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.roomuserInfo}/${payload}`);
+    return res;
+  },
+  async update({ commit }, { id, ...info } = {}) {
+    const res = await this.$axios.$post(`${api.roomuserInfo}/update/${id}`, {
+      ...info,
+    });
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.roomuserInfo}/${payload}`);
+    return res;
+  },
+  async looknumber({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.looknumberInfo}`);
+    return res;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/views/index.vue

@@ -2,11 +2,9 @@
   <div id="index">
     <el-row>
       <el-col :span="24">
-        <el-col :span="24" class="top">
-          头部assdfsfsdf
-        </el-col>
+        <el-col :span="24" class="top"> </el-col>
         <el-col :span="24" class="main">
-          nihaosdsdfsaedlfk
+          <div id="canvas"></div>
         </el-col>
       </el-col>
     </el-row>
@@ -14,16 +12,57 @@
 </template>
 
 <script>
+import { Bar } from '@antv/g2plot';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: lookuser } = createNamespacedHelpers('lookuser');
 export default {
   name: 'index',
   props: {},
   components: {},
   data: function() {
-    return {};
+    return {
+      roomInfo: [],
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  // mounted() {
+  //   this.tongji();
+  // },
+  methods: {
+    ...lookuser(['looknumber']),
+    async search() {
+      const data = await this.looknumber();
+      this.$set(this, `roomInfo`, data.data);
+      console.log(this.roomInfo);
+      this.tongji();
+    },
+    tongji() {
+      const data = [];
+      console.log(this.roomInfo);
+
+      for (const room of this.roomInfo) {
+        data.push({ 房间号: room.name, 观看人数: room.number });
+      }
+      const barPlot = new Bar('canvas', {
+        title: {
+          visible: true,
+          text: '各直播房间观看人数',
+        },
+        forceFit: true,
+        pixelRatio: 4,
+        data,
+        xField: '观看人数',
+        yField: '房间号',
+        xAxis: {
+          formatter: v => v + '人',
+        },
+      });
+
+      barPlot.render();
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
     pageTitle() {

src/views/stat/index.vue

@@ -6,9 +6,7 @@
           <topInfo :topTitle="pageTitle"></topInfo>
         </el-col>
         <el-col :span="24" class="main">
-          <el-col :span="8" class="left">
-            统计
-          </el-col>
+          <el-col :span="8" class="left"> </el-col>
           <el-col :span="8" class="left">
             统计
           </el-col>
@@ -32,6 +30,7 @@
 
 <script>
 import topInfo from '@/layout/public/top.vue';
+
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
@@ -43,6 +42,7 @@ export default {
     return {};
   },
   created() {},
+
   methods: {},
   computed: {
     ...mapState(['user']),