提交

src/views/History/index.vue

@@ -91,64 +91,24 @@
     <el-card class="box-card">
       <div class="head" v-if="oriData.total">
         <div
+          v-for="(item, i) in oriData.total"
+          :key="i + item.key"
           class="head-item"
-          @click="
-            () => type !== 'activeUser' && changeData('activeUser', '活跃用户')
-          "
+          @click="() => type !== item.key && changeData(item.key, '活跃用户')"
           :style="{
-            borderTopColor: type === 'activeUser' ? '#396fff' : '#fff',
+            borderTopColor: type === item.key ? '#396fff' : '#fff',
           }"
         >
-          <div>活跃用户</div>
+          <div>{{ item.name }}</div>
           <div class="value">
             <!-- oriData.total.activeUser -->
             <countTo
+              v-if="!item.isNum"
               :startVal="0"
-              :endVal="oriData.total.activeUser"
+              :endVal="item.value"
               :duration="1500"
             ></countTo>
-          </div>
-        </div>
-        <div
-          class="head-item"
-          @click="() => type !== 'newUser' && changeData('newUser', '新增用户')"
-          :style="{ borderTopColor: type === 'newUser' ? '#396fff' : '#fff' }"
-        >
-          <div>新增用户</div>
-          <div class="value">
-            <countTo
-              :startVal="0"
-              :endVal="oriData.total.newUser"
-              :duration="1500"
-            ></countTo>
-          </div>
-        </div>
-        <div
-          class="head-item"
-          @click="
-            () => type !== 'totalUser' && changeData('totalUser', '累计用户')
-          "
-          :style="{ borderTopColor: type === 'totalUser' ? '#396fff' : '#fff' }"
-        >
-          <div>累计用户</div>
-          <div class="value">
-            <countTo
-              :startVal="0"
-              :endVal="oriData.total.totalUser"
-              :duration="1500"
-            ></countTo>
-          </div>
-        </div>
-        <div
-          class="head-item"
-          @click="
-            () => type !== 'duration' && changeData('duration', '人均使用时长')
-          "
-          :style="{ borderTopColor: type === 'duration' ? '#396fff' : '#fff' }"
-        >
-          <div>人均使用时长</div>
-          <div class="value">
-            {{ timeFormat(oriData.total.duration) }}
+            <span v-if="item.isNum" v-text="item.value"></span>
           </div>
         </div>
       </div>
@@ -188,9 +148,23 @@
             ></countTo>
           </template>
         </el-table-column>
+        <el-table-column prop="startTimes" label="启动次数">
+          <template #default="scope">
+            <countTo
+              :startVal="scope.row.startTimes"
+              :endVal="scope.row.startTimes"
+              :duration="100"
+            ></countTo>
+          </template>
+        </el-table-column>
         <el-table-column prop="duration" label="人均使用时长">
           <template #default="scope">
-            {{ timeFormat(scope.row.duration) }}
+            {{ timeFormat(scope.row.durationUser) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="duration" label="次均使用时长">
+          <template #default="scope">
+            {{ timeFormat(scope.row.durationTimes) }}
           </template>
         </el-table-column>
       </el-table>
@@ -220,6 +194,7 @@ import {
   TooltipComponent,
   GridComponent,
   ToolboxComponent,
+  LegendComponent,
 } from "echarts/components";
 import { CanvasRenderer } from "echarts/renderers";
 echarts.use([
@@ -229,6 +204,7 @@ echarts.use([
   LineChart,
   CanvasRenderer,
   ToolboxComponent,
+  LegendComponent,
 ]);
 
 // import config from "@/config/index";
@@ -237,7 +213,7 @@ export default {
   name: "RealOnline",
   data() {
     return {
-      type: "activeUser",
+      type: "",
       lastParams: {},
       page: 1,
       form: {
@@ -315,8 +291,31 @@ export default {
       getHistory(this.lastParams)
         .then(r => {
           if (!this.$refs.realLineChart) return;
-          this.oriData = r || {};
-          this.changeData("activeUser", "活跃用户");
+          let oriData = r || {};
+          const total = oriData.total || {},
+            keys = Object.keys(total),
+            color = ["rgb(244, 127, 146)", "rgb(17, 160, 248)"],
+            p = [];
+          for (let i = 0; i < keys.length; i++) {
+            const v = keys[i];
+            if (typeof total[v].value !== "number") continue;
+            let isNum = /duration/g.test(v);
+            let value = isNum
+              ? this.timeFormat(total[v].value)
+              : total[v].value;
+            p.push({
+              name: total[v].name,
+              value,
+              color: color[i % 2],
+              key: v,
+              isNum,
+            });
+          }
+          this.oriData = {
+            list: oriData.list || [],
+            total: p,
+          };
+          this.changeData(p[0].key, p[0].name);
           chart.hideLoading();
           this.page = 1;
           this.pushShowList();
@@ -341,7 +340,7 @@ export default {
     createImage(keyList, valueList, title) {
       !chart && (chart = echarts.init(this.$refs.realLineChart));
       chart.resize({
-        height: (this.$refs.realLineChart.offsetWidth * 6) / 16,
+        height: (this.$refs.realLineChart.offsetWidth * 4) / 16,
       });
       const _this = this;
       chart.setOption({
@@ -362,6 +361,9 @@ export default {
             },
           },
         },
+        legend: {
+          data: [title],
+        },
         grid: {
           left: "3%",
           right: "4%",
@@ -370,7 +372,7 @@ export default {
         },
         xAxis: {
           type: "category",
-          boundaryGap: false,
+          boundaryGap: true,
           data: keyList,
         },
         yAxis: {
@@ -394,6 +396,7 @@ export default {
         },
         series: [
           {
+            name: title,
             data: valueList,
             symbolSize: 0,
             lineStyle: {

src/views/RealOnline/index.vue

@@ -44,6 +44,24 @@
       </el-form>
     </el-card>
     <br />
+    <el-card>
+      <div class="totalText" style="display: flex; text-align: center">
+        <div
+          class="totalItem"
+          v-for="(item, i) in total"
+          :key="i + item"
+          :style="{ color: item.color }"
+        >
+          <countTo
+            :startVal="0"
+            :endVal="item.value"
+            :duration="1500"
+          ></countTo>
+          <p v-text="item.name" style="font-size: 16px;color: #000;"></p>
+        </div>
+      </div>
+    </el-card>
+    <br />
     <el-card class="box-card">
       <div class="realLineChart" ref="realLineChart"></div>
     </el-card>
@@ -52,6 +70,7 @@
 
 <script>
 // @ is an alias to /src
+import countTo from "@/components/counto/vue-countTo.vue";
 import {
   getRealAppOnline,
   getRule,
@@ -65,7 +84,8 @@ import {
   TitleComponent,
   TooltipComponent,
   GridComponent,
-  ToolboxComponent 
+  ToolboxComponent,
+  LegendComponent,
 } from "echarts/components";
 import { CanvasRenderer } from "echarts/renderers";
 echarts.use([
@@ -74,7 +94,8 @@ echarts.use([
   GridComponent,
   LineChart,
   CanvasRenderer,
-  ToolboxComponent
+  ToolboxComponent,
+  LegendComponent,
 ]);
 
 // import config from "@/config/index";
@@ -88,9 +109,11 @@ export default {
         app: "",
         lidu: "",
       },
+      total: {},
       tableData: [],
       cycle: [],
       lidu: [],
+      realForm: {},
     };
   },
   mounted() {
@@ -122,44 +145,65 @@ export default {
     },
     regularData() {
       if (time) clearInterval(time);
+      this.realForm = {
+        appName: this.form.app,
+        minute: this.form.lidu,
+      };
       this.onSubmit();
-      time = setInterval(this.onSubmit, 30000);
+      time = setInterval(this.onSubmit, 5000);
     },
     onSubmit() {
-      getRealAppOnline({ appName: this.form.app, minute: this.form.lidu })
+      getRealAppOnline(this.realForm)
         .then(r => {
           if (!this.$refs.realLineChart) return;
-
+          const li = r.list || [],
+            T = r.total || {},
+            keys = Object.keys(T),
+            total = [],
+            color = ["rgb(244, 127, 146)", "rgb(17, 160, 248)"];
           const keyList = [],
-            valueList = [];
-          (r || []).map(v => {
+            valueList_active = [],
+            valueList_newUser = [];
+          for (let i = 0; i < keys.length; i++) {
+            const v = keys[i];
+            if (typeof T[v].value !== "number") continue;
+            let p = {
+              name: T[v].name,
+              value: T[v].value,
+              color: color[i % 2],
+            };
+            total.push(p);
+          }
+          this.total = total;
+          li.map(v => {
             const key = v.recMinute.split(" ")[1] || "";
             keyList.push(key);
-            valueList.push(v.total);
+            valueList_active.push(v.active);
+            valueList_newUser.push(v.newUser);
           });
-          this.createImage(keyList, valueList);
+          this.createImage(keyList, valueList_active, valueList_newUser);
         })
         .catch(() => {
           if (!chart) return;
           chart.clear();
         });
     },
-    createImage(keyList, valueList) {
+    createImage(keyList, valueList_active, valueList_newUser) {
       !chart && (chart = echarts.init(this.$refs.realLineChart));
       chart.resize({
-        height: (this.$refs.realLineChart.offsetWidth * 6) / 16,
+        height: (this.$refs.realLineChart.offsetWidth * 4) / 16,
       });
       chart.setOption({
         tooltip: {
           trigger: "axis",
         },
-        toolbox:{
-            feature:{ 
-                saveAsImage: {
-                    type: 'jpg',
-                    name: '实时'
-                }
-            }
+        toolbox: {
+          feature: {
+            saveAsImage: {
+              type: "jpg",
+              name: "实时",
+            },
+          },
         },
         grid: {
           left: "3%",
@@ -167,9 +211,12 @@ export default {
           bottom: "3%",
           containLabel: true,
         },
+        legend: {
+          data: ["活跃用户", "新增用户"],
+        },
         xAxis: {
           type: "category",
-          boundaryGap: false,
+          boundaryGap: true,
           data: keyList,
         },
         yAxis: {
@@ -183,14 +230,14 @@ export default {
               } else if (val >= 10000) {
                 val = (val / 10000).toFixed(2) + "万";
               }
-              return val
+              return val;
             },
           },
         },
         series: [
           {
-            name: this.form.app,
-            data: valueList,
+            name: "活跃用户",
+            data: valueList_active,
             symbolSize: 0,
             lineStyle: {
               width: 1,
@@ -219,6 +266,37 @@ export default {
               },
             },
           },
+          {
+            name: "新增用户",
+            data: valueList_newUser,
+            symbolSize: 0,
+            lineStyle: {
+              width: 1,
+            },
+            type: "line",
+            smooth: true,
+            color: "rgba(145,204,117,.9)",
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(145,204,117, 0.8)", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(145,204,117, 0.1)", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+          },
         ],
       });
     },
@@ -266,7 +344,7 @@ export default {
       return { r, li, lidu };
     },
   },
-  components: {},
+  components: { countTo },
 };
 </script>
 
@@ -277,4 +355,24 @@ export default {
 .RealOnline .has-seconds .el-time-spinner__wrapper:last-child {
   display: none;
 }
+.totalText {
+  display: flex;
+}
+.totalText .totalItem {
+  flex: 1;
+  position: relative;
+  font-size: 42px;
+  font-weight: 700;
+  font-family: sans-serif;
+}
+.totalText .totalItem:not(:last-child)::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  content: "";
+  display: block;
+  width: 1px;
+  background: #e7eef0;
+}
 </style>