提交

src/views/History/index.vue

@@ -91,7 +91,7 @@
       <div class="head" v-if="oriData.total">
         <div
           class="head-item"
-          @click="() => changeData('activeUser')"
+          @click="() => type !== 'activeUser' && changeData('activeUser', '活跃用户')"
           :style="{
             borderTopColor: type === 'activeUser' ? '#396fff' : '#fff',
           }"
@@ -108,7 +108,7 @@
         </div>
         <div
           class="head-item"
-          @click="() => changeData('newUser')"
+          @click="() => type !== 'newUser' && changeData('newUser', '新增用户')"
           :style="{ borderTopColor: type === 'newUser' ? '#396fff' : '#fff' }"
         >
           <div>新增用户</div>
@@ -122,7 +122,7 @@
         </div>
         <div
           class="head-item"
-          @click="() => changeData('totalUser')"
+          @click="() => type !== 'totalUser' && changeData('totalUser', '累计用户')"
           :style="{ borderTopColor: type === 'totalUser' ? '#396fff' : '#fff' }"
         >
           <div>累计用户</div>
@@ -136,7 +136,7 @@
         </div>
         <div
           class="head-item"
-          @click="() => changeData('duration')"
+          @click="() => type !== 'duration' && changeData('duration', '人均使用时长')"
           :style="{ borderTopColor: type === 'duration' ? '#396fff' : '#fff' }"
         >
           <div>人均使用时长</div>
@@ -148,7 +148,8 @@
 
       <div class="realLineChart" ref="realLineChart"></div>
       <el-table
-        :data="table()"
+        v-if="this.oriData && this.oriData.list && this.oriData.list.length"
+        :data="showList"
         style="width: 100%"
         :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
       >
@@ -239,6 +240,7 @@ export default {
       },
       cycle: [],
       oriData: {},
+      showList: [],
       version: [
         {
           label: "不限",
@@ -258,18 +260,20 @@ export default {
   },
   computed: {},
   methods: {
-    table() {
+    pagechange(p) {
+      this.page = p;
+      this.pushShowList();
+    },
+    pushShowList() {
       let s = this.page - 1 < 0 ? 0 : (this.page - 1) * 10;
       let e = this.page * 10;
-      let li = this.oriData.list || [];
+      let li = JSON.parse(JSON.stringify(this.oriData.list || []));
       let out = [];
+      li = li.reverse();
       for (let i = s; i < e; i++) {
         li[i] && out.push(li[i]);
       }
-      return out;
-    },
-    pagechange(p) {
-      this.page = p;
+      this.showList = out;
     },
     async init() {
       if (chart && chart.dispose) chart.dispose();
@@ -336,15 +340,17 @@ export default {
         .then(r => {
           if (!this.$refs.realLineChart) return;
           this.oriData = r || {};
-          this.changeData("activeUser");
+          this.changeData("activeUser", "活跃用户");
           chart.hideLoading();
           this.page = 1;
+          this.pushShowList();
         })
         .catch(() => {
+          this.pushShowList();
           chart && chart.clear() && chart.hideLoading();
         });
     },
-    changeData(type) {
+    changeData(type, title) {
       this.type = type;
       const keyList = [],
         valueList = [];
@@ -353,16 +359,31 @@ export default {
         valueList.push(v[this.type]);
       });
       chart && chart.clear();
-      this.createImage(keyList, valueList);
+      this.createImage(keyList, valueList, title);
     },
-    createImage(keyList, valueList) {
+    createImage(keyList, valueList, title) {
       !chart && (chart = echarts.init(this.$refs.realLineChart));
       chart.resize({
         height: (this.$refs.realLineChart.offsetWidth * 6) / 16,
       });
+      const _this = this;
       chart.setOption({
         tooltip: {
           trigger: "axis",
+          formatter(v) {
+            const item = v[0] || {};
+            let val = item.data || 0;
+            if (_this.type === "duration") val = _this.timeFormat(val);
+            return item.axisValue + "<br />" + title + '：' + val;
+          },
+        },
+        toolbox:{
+            feature:{ 
+                saveAsImage: {
+                    type: 'jpg',
+                    name: '趋势'
+                }
+            }
         },
         grid: {
           left: "3%",
@@ -377,7 +398,22 @@ export default {
         },
         yAxis: {
           type: "value",
+          scale: true,
           minInterval: 1,
+          axisLabel: {
+            formatter(v) {
+              let val = v;
+              if (_this.type === "duration") val = _this.timeFormat(val);
+              else {
+                if (val >= 100000000) {
+                  val = (val / 100000000).toFixed(2) + "亿";
+                } else if (val >= 10000) {
+                  val = (val / 10000).toFixed(2) + "万";
+                }
+              }
+              return val;
+            },
+          },
         },
         series: [
           {
@@ -497,7 +533,10 @@ export default {
       hour = hour <= 9 ? "0" + hour : hour;
       min = min <= 9 ? "0" + min : min;
       son = son <= 9 ? "0" + son : son;
-      return [hour, min, son].join(":");
+      let out = [];
+      if(hour*1 > 0) out.push(hour);
+      out.push(...[min,son]);
+      return out.join(":");
     },
     change() {
       const roleid = JSON.parse(

src/views/RealOnline/index.vue

@@ -15,10 +15,7 @@
         class="demo-form-inline"
       >
         <el-form-item label="应用">
-          <el-select
-            v-model="form.app"
-            placeholder="请选择时段"
-          >
+          <el-select v-model="form.app" placeholder="请选择时段">
             <el-option
               v-for="item in cycle"
               :key="item.value"
@@ -30,10 +27,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="粒度">
-          <el-select
-            v-model="form.lidu"
-            placeholder="请选择粒度"
-          >
+          <el-select v-model="form.lidu" placeholder="请选择粒度">
             <el-option
               v-for="item in lidu"
               :key="item.value"
@@ -71,6 +65,7 @@ import {
   TitleComponent,
   TooltipComponent,
   GridComponent,
+  ToolboxComponent 
 } from "echarts/components";
 import { CanvasRenderer } from "echarts/renderers";
 echarts.use([
@@ -79,6 +74,7 @@ echarts.use([
   GridComponent,
   LineChart,
   CanvasRenderer,
+  ToolboxComponent
 ]);
 
 // import config from "@/config/index";
@@ -90,7 +86,7 @@ export default {
     return {
       form: {
         app: "",
-        lidu: ""
+        lidu: "",
       },
       tableData: [],
       cycle: [],
@@ -112,43 +108,25 @@ export default {
             label: v.mname,
           });
       });
-      this.lidu = lidu.map(v=>{
+      this.lidu = lidu.map(v => {
         return {
-            value: v.mcode,
-            label: v.mname,
-        }
+          value: v.mcode,
+          label: v.mname,
+        };
       });
       this.form = {
         app: (this.cycle[0] || { value: "" }).value,
-        lidu: (this.lidu[0] || { value: "" }).value
+        lidu: (this.lidu[0] || { value: "" }).value,
       };
       this.regularData();
     },
     regularData() {
       if (time) clearInterval(time);
-      chart &&
-        chart.showLoading({
-          text: "loading",
-          color: "rgba(58,132,255,.9)",
-          textColor: "#000",
-          maskColor: "rgba(255, 255, 255, 0.2)",
-          zlevel: 0,
-        });
       this.onSubmit();
-      time = setInterval(() => {
-        chart &&
-          chart.showLoading({
-            text: "loading",
-            color: "rgba(58,132,255,.9)",
-            textColor: "#000",
-            maskColor: "rgba(255, 255, 255, 0.2)",
-            zlevel: 0,
-          });
-        this.onSubmit();
-      }, 60000);
+      time = setInterval(this.onSubmit, 30000);
     },
     onSubmit() {
-      getRealAppOnline({ appName: this.form.app,minute: this.form.lidu })
+      getRealAppOnline({ appName: this.form.app, minute: this.form.lidu })
         .then(r => {
           if (!this.$refs.realLineChart) return;
 
@@ -160,12 +138,10 @@ export default {
             valueList.push(v.total);
           });
           this.createImage(keyList, valueList);
-          chart.hideLoading();
         })
         .catch(() => {
           if (!chart) return;
           chart.clear();
-          chart.hideLoading();
         });
     },
     createImage(keyList, valueList) {
@@ -177,6 +153,14 @@ export default {
         tooltip: {
           trigger: "axis",
         },
+        toolbox:{
+            feature:{ 
+                saveAsImage: {
+                    type: 'jpg',
+                    name: '实时'
+                }
+            }
+        },
         grid: {
           left: "3%",
           right: "4%",
@@ -191,9 +175,21 @@ export default {
         yAxis: {
           type: "value",
           minInterval: 1,
+          axisLabel: {
+            formatter(v) {
+              let val = v;
+              if (val >= 100000000) {
+                val = (val / 100000000).toFixed(2) + "亿";
+              } else if (val >= 10000) {
+                val = (val / 10000).toFixed(2) + "万";
+              }
+              return val
+            },
+          },
         },
         series: [
           {
+            name: this.form.app,
             data: valueList,
             symbolSize: 0,
             lineStyle: {