添加as选币排行榜

src/api/index.ts

@@ -525,6 +525,20 @@ export const del_symbols_black = (params: any, callback: any) => {
   });
 };
 
+// 情报中心-AS排行榜
+export const get_as_rank_list = (params: any, callback: any) => {
+  return http.request("/rk_trend14400/get_rank_list", "get", params).then((data) => {
+    if (data) callback && callback(data);
+  });
+};
+// 情报中心-AS排行榜获取交易所
+export const get_as_rank_exchange = (params: any, callback: any) => {
+  return http.request("/rk_trend14400/get_exchanges", "get", params).then((data) => {
+    if (data) callback && callback(data);
+  });
+};
+
+
 // 资金曲线
 // 资金曲线-按用户
 export const get_user_balance = (params: any, callback: any) => {

src/router/routes.ts

@@ -100,6 +100,12 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import("@/views/indicator/symbol_rank/index.vue"),
         meta: { title: "币对排行", keepAlive: true },
       },
+      {
+        path: "/indicator/as_rank",
+        name: "IndicatorAsRank",
+        component: () => import("@/views/indicator/as_rank/index.vue"),
+        meta: { title: "AS选币排行", keepAlive: true },
+      },
       {
         path: "/indicator/blacklists",
         name: "IndicatorBlacklists",

src/views/indicator/as_rank/index.vue

@@ -0,0 +1,198 @@
+<template>
+  <lay-card class="custom-card">
+    <template v-slot:title>
+      <span class="card-title">AS选币排行</span>
+    </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="exchange">
+            <lay-select v-model="pageParams.exchange" :show-search="true">
+              <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>
+        </lay-form>
+      </div>
+      <div>
+        <lay-table :page="tablePage" :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>
+          </template>
+        </lay-table>
+      </div>
+    </template>
+  </lay-card>
+</template>
+
+<script lang="ts" setup name="IndicatorSymbolRank">
+import { ref, reactive } from "vue";
+import { useRouter } from "vue-router";
+import TableButton from "@/components/TableButton.vue";
+import { get_as_rank_list, get_as_rank_exchange } from "@/api";
+
+const router = useRouter();
+
+interface PageConfig {
+  loading: boolean;
+}
+
+let pageConfig: PageConfig = reactive({
+  loading: false,
+});
+
+interface FormItem {
+  exchange?: string;
+  hour_num?: number;
+  msvScore?: string;
+  liquidityScore?: string;
+  frequencyScore?: string;
+  sumScore?: string;
+}
+const pageParams: FormItem = reactive({ exchange: "bybit_usdt_swap", hour_num: 1 });
+
+interface TablePage {
+  current: number;
+  limit: number;
+  total: number;
+}
+const tablePage: TablePage = reactive({ current: 1, limit: 20, total: 0, limits: [20, 50, 100, 200, 500] });
+const columns = ref([
+  { title: "币对",  key: "symbol", ellipsisTooltip: true },
+  { title: "趋势强度", key: "trend_strength" },
+  { title: "分数", key: "score" },
+]);
+let dataSource = ref<any>([]);
+let dataShowSource = ref<any>([]);
+let dataSortSource = ref<any>([]);
+let sortInfo = ref<any>({});
+
+let rkExchanges = ref<any>([]);
+
+const getRkExchanges = () => {
+  const params = {};
+  pageConfig.loading = true;
+  get_as_rank_exchange(params, (data: any) => {
+    pageConfig.loading = false;
+    if (data.code == 200) {
+      rkExchanges.value = data.data;
+    }
+  });
+};
+getRkExchanges();
+
+// 请求交易所列表
+const getPageInfo = () => {
+  tablePage.current = 1;
+  tablePage.total = 0;
+  dataSource.value = [];
+  const params = {
+    exchange: pageParams.exchange,
+  };
+  pageConfig.loading = true;
+  get_as_rank_list(params, (data: any) => {
+    pageConfig.loading = false;
+    if (data.code == 200) {
+      tablePage.total = data.data.length;
+      dataSource.value = data.data;
+      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 } });
+};
+
+// 分页设置
+const handleCurrentChange = (val: any) => {
+  dataShowSource.value = [...dataSortSource.value.slice((val.current - 1) * val.limit, val.current * val.limit)];
+};
+
+// 排序
+const handleSortChange = (key: any, sort: any) => {
+  sortInfo.value = { key, sort };
+  if (!sort) {
+    dataSortSource.value = [...dataSource.value];
+    dataShowSource.value = [...dataSource.value.slice((tablePage.current - 1) * tablePage.limit, tablePage.current * tablePage.limit)];
+    return;
+  }
+  dataSortSource.value = [...dataSource.value].sort((a: any, b: any) => {
+    let maxA = -9999999;
+    let maxB = -9999999;
+    Object.values(a[key]).map((item) => (maxA = Number(item) > maxA ? Number(item) : maxA));
+    Object.values(b[key]).map((item) => (maxB = Number(item) > maxB ? Number(item) : maxB));
+    return maxA - maxB;
+  });
+  if (sort == "desc") dataSortSource.value.reverse();
+  dataShowSource.value = [...dataSortSource.value.slice((tablePage.current - 1) * tablePage.limit, tablePage.current * tablePage.limit)];
+};
+</script>
+
+<style lang="scss" scoped>
+.custom-form-layout {
+  .custom-card-checkbox,
+  .custom-checkbox {
+    display: inline-flex;
+    align-items: center;
+    margin-bottom: 16px;
+    padding-right: 20px;
+    .label {
+      display: flex;
+      padding-right: 15px;
+    }
+    .checkbox-group {
+      display: flex;
+      .checkbox-wp {
+        display: flex;
+        align-items: center;
+        margin-right: 10px;
+        line-height: 38px;
+        :deep(.layui-checkbox-label) {
+          padding: 0;
+        }
+        :deep(.layui-form-radio) {
+          margin-top: 0;
+        }
+        :deep(.layui-checkcard) {
+          padding: 0 10px;
+          width: auto;
+          margin: 0 10px 0 0;
+          .layui-checkcard-content {
+            padding: 0;
+          }
+        }
+        .checkbox-input {
+          width: 40px;
+        }
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+  .custom-card-checkbox {
+    .checkbox-wp {
+      padding: 0 20px;
+      border: 1px solid #d9d9d9;
+    }
+  }
+}
+</style>