币对排行榜修改

src/assets/css/index.scss

@@ -5,16 +5,23 @@
   --button-warm-color: #ffb800;
   --button-danger-color: #ff5722;
   --button-checked-color: #16b777;
-  --normal-color: #1e9fff;
   --primary-color: rgb(28, 175, 131);
+  --normal-color: #1e9fff;
+  --warm-color: #ffb800;
   --danger-color: #ff5722;
 }
-.danger-color{
-  color: var(--danger-color);
-}
 .primary-color{
   color: var(--primary-color);
 }
+.normal-color{
+  color: var(--normal-color);
+}
+.warm-color{
+  color: var(--warm-color);
+}
+.danger-color{
+  color: var(--danger-color);
+}
 * {
   padding: 0;
   margin: 0;

src/views/indicator/symbol_rank/index.vue

@@ -4,29 +4,51 @@
       <span class="card-title">币对分数排名</span>
     </template>
     <template v-slot:body>
-      <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="exchange">
-              <lay-select v-model="pageParams.exchange" :show-search="true" allowClear>
-                <lay-select-option v-for="item of rkExchanges" :value="item" :label="item" />
-              </lay-select>
-            </lay-form-item>
-            <div class="form-button-wp">
-              <lay-button @click="getPageInfo()">搜索</lay-button>
+      <div class="custom-form-layout">
+        <lay-form class="form-wp" :model="pageParams" mode="inline" size="sm">
+          <lay-form-item label="盘口" prop="exchange">
+            <lay-select v-model="pageParams.exchange" :show-search="true" allowClear>
+              <lay-select-option v-for="item of rkExchanges" :value="item" :label="item" />
+            </lay-select>
+          </lay-form-item>
+          <lay-form-item label="波动分数≥" prop="msvScore">
+            <lay-input v-model="pageParams.msvScore" />
+          </lay-form-item>
+          <lay-form-item label="交易量分数≥" prop="liquidityScore">
+            <lay-input v-model="pageParams.liquidityScore" />
+          </lay-form-item>
+          <lay-form-item label="交易频次分数≥" prop="frequencyScore">
+            <lay-input v-model="pageParams.frequencyScore" />
+          </lay-form-item>
+          <lay-form-item label="总评分≥" prop="sumScore">
+            <lay-input v-model="pageParams.sumScore" />
+          </lay-form-item>
+          <div class="form-button-wp">
+            <lay-button @click="getPageInfo()">搜索</lay-button>
+          </div>
+        </lay-form>
+      </div>
+      <div>
+        <lay-table :page="tablePage" size="sm" :columns="columns" resize :data-source="dataShowSource" :loading="pageConfig.loading" @change="handleCurrentChange" @sortChange="handleSortChange">
+          <template v-slot:msvScore="{ row }">
+            <span class="primary-color">{{ row.msv_score }}</span>
+          </template>
+          <template v-slot:liquidityScore="{ row }">
+            <span class="normal-color">{{ row.liquidity_score }}</span>
+          </template>
+          <template v-slot:frequencyScore="{ row }">
+            <span class="warm-color">{{ row.frequency_score }}</span>
+          </template>
+          <template v-slot:score="{ row }">
+            <span class="danger-color">{{ row.score }}</span>
+          </template>
+          <template v-slot:operator="{ row }">
+            <div>
+              <TableButton text="查看MSV" @click="toJump(row)" />
             </div>
-          </lay-form>
-        </div>
-        <div>
-          <lay-table :page="tablePage" size="sm" :columns="columns" resize :data-source="dataShowSource" :loading="pageConfig.loading" @change="handleCurrentChange" @sortChange="handleSortChange">
-            <template v-slot:operator="{ row }">
-              <div>
-                <TableButton text="查看MSV" @click="toJump(row)" />
-              </div>
-            </template>
-          </lay-table>
-        </div>
-      </lay-loading>
+          </template>
+        </lay-table>
+      </div>
     </template>
   </lay-card>
 </template>
@@ -49,8 +71,12 @@ let pageConfig: PageConfig = reactive({
 
 interface FormItem {
   exchange?: string;
+  msvScore?: string;
+  liquidityScore?: string;
+  frequencyScore?: string;
+  sumScore?: string;
 }
-const pageParams: FormItem = reactive({ exchange: "" });
+const pageParams: FormItem = reactive({ exchange: "gate_usdt_swap" });
 
 interface TablePage {
   current: number;
@@ -66,12 +92,12 @@ const columns = ref([
   { title: "平均行情推动量", key: "liquidity_avg" },
   { title: "Sum(Abs(波动率))", key: "msv_abs_total" },
   { title: "Sum(预期利润)", key: "epr_total" },
-  { title: "波动分数", width: "80", key: "msv_score", ellipsisTooltip: true },
-  { title: "交易量分数", width: "100", key: "liquidity_score" },
-  { title: "交易频次分数", width: "100", key: "frequency_score" },
-  { title: "总评分", width: "80", key: "score", sort: "desc", ellipsisTooltip: true },
+  { title: "波动分数", width: "80", key: "msv_score", customSlot: "msvScore", ellipsisTooltip: true },
+  { title: "交易量分数", width: "100", key: "liquidity_score", customSlot: "liquidityScore" },
+  { title: "交易频次分数", width: "100", key: "frequency_score", customSlot: "frequencyScore" },
+  { title: "总评分", width: "80", key: "score", customSlot: "score", sort: "desc" },
   { title: "开仓值", width: "90", key: "coverted_open_base", ellipsisTooltip: true },
-  { title: "操作", width: "90",key: "operator", customSlot: "operator" },
+  { title: "操作", width: "90", key: "operator", customSlot: "operator" },
 ]);
 let dataSource = ref<any>([]);
 let dataShowSource = ref<any>([]);
@@ -104,12 +130,20 @@ const getPageInfo = () => {
   get_symbols_rank(params, (data: any) => {
     pageConfig.loading = false;
     if (data.code == 200) {
-      tablePage.total = data.data.length;
-      dataSource.value = data.data;
+      let source = data.data.filter((item: any) => {
+        let msvScore = parseFloat(pageParams.msvScore || "0");
+        let liquidityScore = parseFloat(pageParams.liquidityScore || "0");
+        let frequencyScore = parseFloat(pageParams.frequencyScore || "0");
+        let sumScore = parseFloat(pageParams.sumScore || "0");
+        return item.msv_score >= msvScore && item.liquidity_score >= liquidityScore && item.frequency_score >= frequencyScore && item.score >= sumScore;
+      });
+      tablePage.total = source.length;
+      dataSource.value = source;
       handleSortChange(sortInfo.value.key, sortInfo.value.sort);
     }
   });
 };
+getPageInfo();
 
 const toJump = (value: any) => {
   router.push({ path: "/indicator/msv", query: { symbol: value.symbol, exchange: pageParams.exchange, minute_time_range: 70 } });