指标添加loading

src/assets/css/index.scss

@@ -117,6 +117,11 @@ body,
     }
   }
 }
+.custom-loading {
+  .layui-loading-spinning {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
 
 .custom-layer {
   max-height: 600px;

src/views/indicator/msv/index.vue

@@ -5,32 +5,32 @@
     </template>
 
     <template v-slot:body>
-      <div class="custom-form-layout">
-        <lay-form class="form-wp" :model="pageParams" mode="inline" size="sm">
-          <lay-form-item label="币对" prop="symbol">
-            <lay-input v-model="pageParams.symbol" />
-          </lay-form-item>
-          <lay-form-item label="盘口" prop="exchange">
-            <lay-select v-model="pageParams.exchange" :show-search="true" allowClear>
-              <lay-select-option v-for="item of iaExchanges" :value="item" :label="item" />
-            </lay-select>
-          </lay-form-item>
-          <lay-form-item label="查询时间" prop="minute_time_range">
-            <lay-input v-model="pageParams.minute_time_range" placeholder="查询时间(分钟)" />
-          </lay-form-item>
-          <lay-form-item label="回溯时间" prop="mills_back">
-            <lay-input v-model="pageParams.mills_back" placeholder="回溯时间(毫秒)" />
-          </lay-form-item>
-          <div class="form-button-wp">
-            <lay-button @click="getMsvData()">查询</lay-button>
-          </div>
-        </lay-form>
-      </div>
-      <div>
-        <lay-loading :loading="pageConfig.loading">
+      <lay-loading class="custom-loading" :loading="pageConfig.loading">
+        <div class="custom-form-layout">
+          <lay-form class="form-wp" :model="pageParams" mode="inline" size="sm">
+            <lay-form-item label="币对" prop="symbol">
+              <lay-input v-model="pageParams.symbol" />
+            </lay-form-item>
+            <lay-form-item label="盘口" prop="exchange">
+              <lay-select v-model="pageParams.exchange" :show-search="true" allowClear>
+                <lay-select-option v-for="item of iaExchanges" :value="item" :label="item" />
+              </lay-select>
+            </lay-form-item>
+            <lay-form-item label="查询时间" prop="minute_time_range">
+              <lay-input v-model="pageParams.minute_time_range" placeholder="查询时间(分钟)" />
+            </lay-form-item>
+            <lay-form-item label="回溯时间" prop="mills_back">
+              <lay-input v-model="pageParams.mills_back" placeholder="回溯时间(毫秒)" />
+            </lay-form-item>
+            <div class="form-button-wp">
+              <lay-button @click="getMsvData()">查询</lay-button>
+            </div>
+          </lay-form>
+        </div>
+        <div>
           <div class="chart" ref="chartRef"></div>
-        </lay-loading>
-      </div>
+        </div>
+      </lay-loading>
     </template>
   </lay-card>
   <Trades ref="tradesRef" />

src/views/indicator/sybmol_filter/index.vue

@@ -4,96 +4,98 @@
       <span class="card-title">币对筛选器</span>
     </template>
     <template v-slot:body>
-      <div class="custom-form-layout">
-        <div class="custom-checkbox">
-          <div class="label">交易所</div>
-          <div class="checkbox-group">
-            <div class="checkbox-wp">
-              <lay-checkcard-group v-model="pageParams.exchanges">
-                <lay-checkcard v-for="item of iaExchanges" :value="item" :title="item" />
-              </lay-checkcard-group>
+      <lay-loading class="custom-loading" :loading="pageConfig.loading">
+        <div class="custom-form-layout">
+          <div class="custom-checkbox">
+            <div class="label">交易所</div>
+            <div class="checkbox-group">
+              <div class="checkbox-wp">
+                <lay-checkcard-group v-model="pageParams.exchanges">
+                  <lay-checkcard v-for="item of iaExchanges" :value="item" :title="item" />
+                </lay-checkcard-group>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="custom-checkbox">
-          <div class="label">参考时间</div>
-          <div class="checkbox-group">
-            <div class="checkbox-wp">
-              <lay-input v-model="pageParams.minute_time_range" placeholder="单位(分钟)" />
+          <div class="custom-checkbox">
+            <div class="label">参考时间</div>
+            <div class="checkbox-group">
+              <div class="checkbox-wp">
+                <lay-input v-model="pageParams.minute_time_range" placeholder="单位(分钟)" />
+              </div>
             </div>
           </div>
-        </div>
-        <div class="custom-card-checkbox">
-          <div class="label">指标模式</div>
-          <div class="checkbox-group">
-            <div class="checkbox-wp">
-              <lay-radio-group name="action" v-model="pageParams.mode">
-                <lay-radio value="or">或</lay-radio>
-                <lay-radio value="and">与</lay-radio>
-              </lay-radio-group>
+          <div class="custom-card-checkbox">
+            <div class="label">指标模式</div>
+            <div class="checkbox-group">
+              <div class="checkbox-wp">
+                <lay-radio-group name="action" v-model="pageParams.mode">
+                  <lay-radio value="or">或</lay-radio>
+                  <lay-radio value="and">与</lay-radio>
+                </lay-radio-group>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="custom-card-checkbox">
-          <div class="label">指标</div>
-          <div class="checkbox-group">
-            <div class="checkbox-wp">
-              <lay-checkbox name="like" skin="primary" v-model="pageParams.rise" />
-              <span>上涨幅度大于</span><lay-input v-model="pageParams.rise_value" size="xs" class="checkbox-input" /><span>%</span>
-            </div>
-            <div class="checkbox-wp">
-              <lay-checkbox name="like" skin="primary" v-model="pageParams.rise_abs" />
-              <span>涨跌幅度绝对值大于</span><lay-input v-model="pageParams.rise_abs_value" size="xs" class="checkbox-input" /><span>%</span>
-            </div>
-            <div class="checkbox-wp">
-              <lay-checkbox name="like" skin="primary" v-model="pageParams.amp" />
-              <span>振幅大于</span><lay-input size="xs" v-model="pageParams.amp_value" class="checkbox-input" /><span>%</span>
-            </div>
-            <div class="checkbox-wp">
-              <lay-checkbox name="like" skin="primary" v-model="pageParams.volume" />
-              <span>交易量大于</span><lay-input size="xs" v-model="pageParams.volume_value" class="checkbox-input" /><span>百万</span>
-            </div>
-            <div class="checkbox-wp">
-              <lay-checkbox name="like" skin="primary" v-model="pageParams.tc" />
-              <span>交易次数大于</span><lay-input size="xs" v-model="pageParams.tc_value" class="checkbox-input" /><span>次</span>
+          <div class="custom-card-checkbox">
+            <div class="label">指标</div>
+            <div class="checkbox-group">
+              <div class="checkbox-wp">
+                <lay-checkbox name="like" skin="primary" v-model="pageParams.rise" />
+                <span>上涨幅度大于</span><lay-input v-model="pageParams.rise_value" size="xs" class="checkbox-input" /><span>%</span>
+              </div>
+              <div class="checkbox-wp">
+                <lay-checkbox name="like" skin="primary" v-model="pageParams.rise_abs" />
+                <span>涨跌幅度绝对值大于</span><lay-input v-model="pageParams.rise_abs_value" size="xs" class="checkbox-input" /><span>%</span>
+              </div>
+              <div class="checkbox-wp">
+                <lay-checkbox name="like" skin="primary" v-model="pageParams.amp" />
+                <span>振幅大于</span><lay-input size="xs" v-model="pageParams.amp_value" class="checkbox-input" /><span>%</span>
+              </div>
+              <div class="checkbox-wp">
+                <lay-checkbox name="like" skin="primary" v-model="pageParams.volume" />
+                <span>交易量大于</span><lay-input size="xs" v-model="pageParams.volume_value" class="checkbox-input" /><span>百万</span>
+              </div>
+              <div class="checkbox-wp">
+                <lay-checkbox name="like" skin="primary" v-model="pageParams.tc" />
+                <span>交易次数大于</span><lay-input size="xs" v-model="pageParams.tc_value" class="checkbox-input" /><span>次</span>
+              </div>
             </div>
           </div>
+          <div class="form-button-wp">
+            <lay-button @click="getPageInfo()">搜索</lay-button>
+          </div>
         </div>
-        <div class="form-button-wp">
-          <lay-button @click="getPageInfo()">搜索</lay-button>
-        </div>
-      </div>
-      <div>
-        <lay-table :page="tablePage" :columns="columns" resize :data-source="dataShowSource" :loading="pageConfig.loading" @change="handleCurrentChange" @sortChange="handleSortChange">
-          <template v-slot:rise="{ row }">
-            <div>
-              <div v-for="(value, key) of row.rise">{{ key }}:{{ value }}%</div>
-            </div>
-          </template>
-          <template v-slot:amp="{ row }">
-            <div>
-              <div v-for="(value, key) of row.amp">{{ key }}:{{ value }}%</div>
-            </div>
-          </template>
-          <template v-slot:volume="{ row }">
-            <div>
-              <div v-for="(value, key) of row.volume">{{ key }}:{{ value }}M</div>
-            </div>
-          </template>
-          <template v-slot:tc="{ row }">
-            <div>
-              <div v-for="(value, key) of row.tc">{{ key }}:{{ value }}次</div>
-            </div>
-          </template>
-          <template v-slot:operator="{ row }">
-            <div>
+        <div>
+          <lay-table :page="tablePage" :columns="columns" resize :data-source="dataShowSource" :loading="pageConfig.loading" @change="handleCurrentChange" @sortChange="handleSortChange">
+            <template v-slot:rise="{ row }">
               <div>
-                <TableButton v-for="(_value, key) of row.rise" v-if="apiList?.includes('/ia/get_indicator')" :text="`查看 ${key} MSV`" @click="toJump(row.symbol, key)" />
+                <div v-for="(value, key) of row.rise">{{ key }}:{{ value }}%</div>
               </div>
-            </div>
-          </template>
-        </lay-table>
-      </div>
+            </template>
+            <template v-slot:amp="{ row }">
+              <div>
+                <div v-for="(value, key) of row.amp">{{ key }}:{{ value }}%</div>
+              </div>
+            </template>
+            <template v-slot:volume="{ row }">
+              <div>
+                <div v-for="(value, key) of row.volume">{{ key }}:{{ value }}M</div>
+              </div>
+            </template>
+            <template v-slot:tc="{ row }">
+              <div>
+                <div v-for="(value, key) of row.tc">{{ key }}:{{ value }}次</div>
+              </div>
+            </template>
+            <template v-slot:operator="{ row }">
+              <div>
+                <div>
+                  <TableButton v-for="(_value, key) of row.rise" v-if="apiList?.includes('/ia/get_indicator')" :text="`查看 ${key} MSV`" @click="toJump(row.symbol, key)" />
+                </div>
+              </div>
+            </template>
+          </lay-table>
+        </div>
+      </lay-loading>
     </template>
   </lay-card>
 </template>