jugou load

src/views/Jugou/Jugou.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="Jugou">
+    <el-loading></el-loading>
     <el-card>
       <el-form ref="form" size="small" :inline="true" label-width="120px">
         <el-form-item label="日期">
@@ -12,10 +13,7 @@
           />
         </el-form-item>
         <el-form-item label="频道">
-          <el-select
-            v-model="select"
-            placeholder="请选择频道"
-          >
+          <el-select v-model="select" placeholder="请选择频道">
             <el-option
               v-for="item in list"
               :key="item.channelId || ''"
@@ -43,7 +41,7 @@
           <div
             class="chart"
             ref="chart"
-            style="width: 100%;min-height: 100px;"
+            style="width: 100%;min-height: 300px;"
           ></div>
           <div class="lineinfobackground" :style="'left:' + leftNum + 'px'">
             <div style="position: relative;width: 100%;height: 100%">
@@ -108,6 +106,8 @@
 import { defaultAjax, leverAudience } from "@/api/index";
 
 import { markRaw } from "vue";
+const ElLoading = require("element-plus/lib/el-loading/index");
+import "element-plus/lib/theme-chalk/el-loading.css";
 
 import * as echarts from "echarts";
 // import config from "@/config/index";
@@ -122,13 +122,9 @@ export default {
   name: "Channel",
   data() {
     return {
-      list: [
-        {
-          channelName: "陕西2套",
-        },
-      ],
+      list: [],
       select: -1,
-      channel: "陕西2套",
+      channel: "",
       leftNum: 50,
       videoUrl: "",
       date: "",
@@ -137,9 +133,11 @@ export default {
       nowItem: {},
       left: [],
       right: [],
+      load: undefined,
     };
   },
   mounted() {
+    this.load = ElLoading.default.service();
     leverAudience().then(res => {
       this.list = res || [];
       this.select = this.list[0].channelId || "";
@@ -158,6 +156,7 @@ export default {
   computed: {},
   methods: {
     getData() {
+      if (!this.load) this.load = ElLoading.default.service();
       let item = {},
         d = this.date.replace(/-/g, "");
       for (let i = 0; i < this.list.length; i++) {
@@ -173,35 +172,60 @@ export default {
       let videoUrl = item.videoUrl;
       videoUrl = videoUrl
         .replace("/{yyyyMMdd}/", "/" + d + "/")
-        .replace(/^https?:/, location.protocol );
-      this.videoUrl = videoUrl.replace("{yyyyMMddHH}", d+'16');
-      console.log(this.videoUrl);
+        .replace(/^https?:/, location.protocol);
+      this.videoUrl = videoUrl.replace("{yyyyMMddHH}", d + "16");
       defaultAjax({
         url,
-      }).then(res => {
-        let org = res || {},
-          li = [];
-        Object.keys(org).map(v => {
-          org[v].date = v;
-          li.push(org[v]);
+      })
+        .then(res => {
+          this.load.close();
+          let org = res || {},
+            li = [];
+          Object.keys(org).map(v => {
+            org[v].date = v;
+            li.push(org[v]);
+          });
+          if (!li.length) return;
+          this.orgLi = li;
+          this.nowItem = li[0];
+          this.left = li[0].lrTop || [];
+          this.right = li[0].lcTop || [];
+          return this.chart();
+        })
+        .catch(() => {
+          this.load.close();
         });
-        if (!li.length) return;
-        this.orgLi = li;
-        this.nowItem = li[0];
-        this.left = li[0].lrTop || [];
-        this.right = li[0].lcTop || [];
-        return this.chart();
-      });
     },
     selectChannel(item) {
       if (this.channel === item.channelName) return;
       this.channel = item.channelName;
     },
     chart() {
-      this.myChart = markRaw(echarts.init(this.$refs.chart));
-      this.myChart.resize({
-        height: 300,
-      });
+      if (!this.myChart) {
+        this.myChart = markRaw(echarts.init(this.$refs.chart));
+        this.myChart.resize({
+          height: 300,
+        });
+        this.myChart.on("datazoom", () => {
+          if (isClick) return;
+          isClick = true;
+          let funisplay = !this.$refs.video.paused;
+          if (timeout) clearTimeout(timeout), (timeout = undefined);
+          this.$refs.video.pause();
+          this.leftNum = 50;
+          timeout = setTimeout(() => {
+            clearTimeout(timeout);
+            timeout = undefined;
+            isClick = false;
+            //  拖拽后的事件
+            isplay = funisplay;
+            this.leftNum = 50;
+            this.$refs.video.currentTime = this.myChart.getOption().dataZoom[0].startValue;
+            if (isplay) this.$refs.video.play();
+            else this.$refs.video.pause();
+          }, 200);
+        });
+      }
       let timeAll = [],
         Irdata = [],
         Icdata = [],
@@ -350,25 +374,6 @@ export default {
           },
         ],
       });
-      this.myChart.on("datazoom", () => {
-        if (isClick) return;
-        isClick = true;
-        let funisplay = !this.$refs.video.paused;
-        if (timeout) clearTimeout(timeout), (timeout = undefined);
-        this.$refs.video.pause();
-        this.leftNum = 50;
-        timeout = setTimeout(() => {
-          clearTimeout(timeout);
-          timeout = undefined;
-          isClick = false;
-          //  拖拽后的事件
-          isplay = funisplay;
-          this.leftNum = 50;
-          this.$refs.video.currentTime = this.myChart.getOption().dataZoom[0].startValue;
-          if (isplay) this.$refs.video.play();
-          else this.$refs.video.pause();
-        }, 200);
-      });
     },
     timeupdate(v) {
       if (sec === Math.floor(v.srcElement.currentTime)) return;