在頁面中選擇間隔時間自動重新整理,並顯示重新整理進度條:

HTML:

 <poptip word-wrap title="重新整理間隔設定" placement="left-start" width="80">
                            <h4>自動重新整理:</h4>
                            <div class="refresh_config" slot="content">

                                <radio-group v-model="timeValue" @on-change="current_selected" vertical>
                                    <radio label="10S"></radio>
                                    <radio label="20S"></radio>
                                    <radio label="30S"></radio>
                                    <radio label="1min"></radio>
                                    <radio label="5min"></radio>
                                    <radio label="10min"></radio>
                                    <radio label="30min"></radio>
                                    <radio label="1hour"></radio>
                                </radio-group>
                            </div>
                        </poptip>
                        <i-switch size="large" v-model="switch1" @on-change="change_switch">
                            <span slot="open">開啟</span>
                            <span slot="close">關閉</span>
                        </i-switch>
                    </div>
                    <!-- <i-input class="search" v-model="input_data3" id="yk" placeholder="請輸入要查詢的關鍵詞" icon="ios-search-strong"
                        @on-enter="search" @on-click="search" @on-change="inputChanged"></i-input> -->
                    <i-progress :percent="percent" class="progress" status="active" :stroke-width="1" :hide-info="true"></i-progress>
 

JS:

 // 更新進度
        updateProgress: function() {
          // 初始化後加載進度  step=2,
          let step = this.step;
          this.timer = setInterval(() => {
            this.percent = this.percent + step;
            // 載入完前進度條最多到stopVal的這個百分值
            if (this.percent >= this.stopVal) {
              this.percent = 0;
              this.aaa();
              // clearInterval(this.timer)
            }
          }, this.timeUpdate / 100);
        },
 

計時器開關狀態

 // switch 狀態
        change_switch: function(val) {
          if (val == false) {
            window.clearInterval(this.a6);
            this.percent = 0;
            window.clearInterval(this.timer);
          } else {
            this.transform_time(val);
            this.updateProgress();
          }
        },
 

當前選擇重新整理間隔

 // 當前選擇改變
        current_selected: function(val) {
          window.clearInterval(this.a6);
          this.transform_time(val);
          this.percent = 0;
          window.clearInterval(this.timer);
          this.updateProgress();
        },

重新整理

 aaa: function() {
          console.log(11111);
          let k = this;
          this.download(
            k.building,
            k.floor,
            k.type,
            k.section,
            k.lines,
            k.current_num,
            k.pageSize,
            function(data) {
              k.data1 = data.detail;
            }
          );
        },

執行演示: