提交

src/utils/request.js

@@ -40,7 +40,8 @@ export default function (ori) {
       xhttp.send(JSON.stringify(ori.data));
     } else xhttp.send();
     xhttp.onreadystatechange = function () {
-      if (this.readyState != 4 || this.status != 200) return;
+      if (this.readyState != 4) return;
+      if (this.status != 200) return reject(this.status);
       let data = {};
       try {
         data =

src/views/History/index.vue

@@ -23,6 +23,7 @@
             range-separator="-"
             start-placeholder="开始日期"
             end-placeholder="结束日期"
+            :clearable="false"
           >
           </el-date-picker>
         </el-form-item>
@@ -91,7 +92,9 @@
       <div class="head" v-if="oriData.total">
         <div
           class="head-item"
-          @click="() => type !== 'activeUser' && changeData('activeUser', '活跃用户')"
+          @click="
+            () => type !== 'activeUser' && changeData('activeUser', '活跃用户')
+          "
           :style="{
             borderTopColor: type === 'activeUser' ? '#396fff' : '#fff',
           }"
@@ -122,7 +125,9 @@
         </div>
         <div
           class="head-item"
-          @click="() => type !== 'totalUser' && changeData('totalUser', '累计用户')"
+          @click="
+            () => type !== 'totalUser' && changeData('totalUser', '累计用户')
+          "
           :style="{ borderTopColor: type === 'totalUser' ? '#396fff' : '#fff' }"
         >
           <div>累计用户</div>
@@ -136,7 +141,9 @@
         </div>
         <div
           class="head-item"
-          @click="() => type !== 'duration' && changeData('duration', '人均使用时长')"
+          @click="
+            () => type !== 'duration' && changeData('duration', '人均使用时长')
+          "
           :style="{ borderTopColor: type === 'duration' ? '#396fff' : '#fff' }"
         >
           <div>人均使用时长</div>
@@ -212,6 +219,7 @@ import {
   TitleComponent,
   TooltipComponent,
   GridComponent,
+  ToolboxComponent,
 } from "echarts/components";
 import { CanvasRenderer } from "echarts/renderers";
 echarts.use([
@@ -220,11 +228,11 @@ echarts.use([
   GridComponent,
   LineChart,
   CanvasRenderer,
+  ToolboxComponent,
 ]);
 
 // import config from "@/config/index";
-let chart = undefined,
-  time = undefined;
+let chart = undefined;
 export default {
   name: "RealOnline",
   data() {
@@ -241,25 +249,46 @@ export default {
       cycle: [],
       oriData: {},
       showList: [],
-      version: [
-        {
-          label: "不限",
-          value: -1,
-        },
-      ],
-      channel: [
-        {
-          label: "不限",
-          value: -1,
-        },
-      ],
+      version: [],
+      channel: [],
     };
   },
-  mounted() {
-    this.init();
+  async mounted() {
+    if (chart && chart.dispose) chart.dispose();
+    const { source, appV, appC, appli, appCLi, appVLi } =
+      await this.getAppListFunc();
+    const keys = {
+      value: "mname",
+      label: "mname",
+    };
+    this.cycle = this.verifyList(appli, source, keys, false);
+    this.channel = this.verifyList(appCLi, appC, keys, true);
+    this.version = this.verifyList(appVLi, appV, keys, true);
+    this.form = {
+      app: (this.cycle[0] || { value: "" }).value,
+      version: [(this.version[0] || { value: "" }).value],
+      channel: [(this.channel[0] || { value: "" }).value],
+      date: [new Date(Date.now() - 604800000), new Date(Date.now() - 86400000)],
+    };
+    this.onSubmit();
   },
   computed: {},
   methods: {
+    verifyList(list, verify, obj, more) {
+      if (!obj) return;
+      let li = list || [];
+      const out = [];
+      more && out.push({ value: -1, label: "不限" });
+      for (let i = 0; i < li.length; i++) {
+        const v = li[i];
+        if (verify.length !== 0 && !verify[v.mcode]) continue;
+        out.push({
+          value: v[obj.value],
+          label: v[obj.label],
+        });
+      }
+      return out;
+    },
     pagechange(p) {
       this.page = p;
       this.pushShowList();
@@ -275,64 +304,11 @@ export default {
       }
       this.showList = out;
     },
-    async init() {
-      if (chart && chart.dispose) chart.dispose();
-      const { source, appV, appC, appli, appCLi, appVLi } =
-        await this.getAppListFunc();
-      appli.map(v => {
-        if ((source.length && source[v.mcode]) || source.length === 0)
-          this.cycle.push({
-            value: v.mname,
-            label: v.mname,
-          });
-      });
-      appCLi.map(v => {
-        if ((appC.length && appC[v.mcode]) || appC.length === 0)
-          this.channel.push({
-            value: v.mname,
-            label: v.mname,
-          });
-      });
-      appVLi.map(v => {
-        if ((appV.length && appV[v.mcode]) || appV.length === 0)
-          this.version.push({
-            value: v.mname,
-            label: v.mname,
-          });
-      });
-      const T = new Date(Date.now() - 86400000);
-      const lT = new Date(Date.now() - 604800000);
-      this.form = {
-        app: (this.cycle[0] || { value: "" }).value,
-        version: [(this.version[0] || { value: "" }).value],
-        channel: [(this.channel[0] || { value: "" }).value],
-        date: [lT, T],
-      };
-      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();
-    },
     onSubmit() {
-      const S = this.form.date[0]
-        ? this.FormData(this.form.date[0])
-        : undefined;
-      const E = this.form.date[1]
-        ? this.FormData(this.form.date[1])
-        : undefined;
       this.lastParams = {
         app: this.form.app,
-        start: S,
-        end: E,
+        start: this.FormData(this.form.date[0]),
+        end: this.FormData(this.form.date[1]),
         manufacturer: this.form.channel == -1 ? undefined : this.form.channel,
         version: this.form.version == -1 ? undefined : this.form.version,
       };
@@ -346,6 +322,7 @@ export default {
           this.pushShowList();
         })
         .catch(() => {
+          this.oriData = {};
           this.pushShowList();
           chart && chart.clear() && chart.hideLoading();
         });
@@ -374,16 +351,16 @@ export default {
             const item = v[0] || {};
             let val = item.data || 0;
             if (_this.type === "duration") val = _this.timeFormat(val);
-            return item.axisValue + "<br />" + title + '：' + val;
+            return item.axisValue + "<br />" + title + "：" + val;
           },
         },
-        toolbox:{
-            feature:{ 
-                saveAsImage: {
-                    type: 'jpg',
-                    name: '趋势'
-                }
-            }
+        toolbox: {
+          feature: {
+            saveAsImage: {
+              type: "jpg",
+              name: "趋势",
+            },
+          },
         },
         grid: {
           left: "3%",
@@ -520,8 +497,8 @@ export default {
       const d = new Date(date || Date.now() - 86400000);
       const year = d.getFullYear();
       const month =
-        d.getMonth() < 8 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
-      const day = d.getDate() < 9 ? "0" + d.getDate() : d.getDate();
+        d.getMonth() <= 8 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
+      const day = d.getDate() <= 9 ? "0" + d.getDate() : d.getDate();
       return [year, month, day].join("-");
     },
     timeFormat(t) {
@@ -534,8 +511,8 @@ export default {
       min = min <= 9 ? "0" + min : min;
       son = son <= 9 ? "0" + son : son;
       let out = [];
-      if(hour*1 > 0) out.push(hour);
-      out.push(...[min,son]);
+      if (hour * 1 > 0) out.push(hour);
+      out.push(...[min, son]);
       return out.join(":");
     },
     change() {
@@ -643,9 +620,9 @@ export default {
         link.setAttribute("href", encodeURI(strcsv));
         link.setAttribute(
           "download",
-          p.app + "用户趋势" + S + ":" + E + ".csv"
+          p.app + "用户趋势" + S + "_" + E + ".csv"
         );
-        document.body.appendChild(link);
+        // document.body.appendChild(link);
         link.click();
       });
     },