添加trades数据

.env.development

@@ -1,5 +1,5 @@
 VITE_APP_ENV = development
 
-# VITE_API_BASE_URL = "https://4lapi.skyfffire.com"
-# VITE_API_BASE_URL = "http://t4lapi.skyfffire.com"
-VITE_API_BASE_URL = "http://192.168.1.5:18888"
+# VITE_API_BASE_URL = "http://4lapi.skyfffire.com"
+VITE_API_BASE_URL = "http://t4lapi.skyfffire.com"
+# VITE_API_BASE_URL = "http://192.168.1.5:18888"

src/views/bot/manage/index.vue

@@ -196,7 +196,7 @@ const columns = ref([
   { title: "ID", width: "60px", key: "id" },
   { title: "名称", width: "90px", key: "name", customSlot: "name", ellipsisTooltip: true },
   { title: "账户", width: "90px", key: "account", customSlot: "account", ellipsisTooltip: true },
-  { title: "币对", width: "90px", key: "pair", customSlot: "pair", align: "center" },
+  { title: "币对", width: "90px", key: "pair", customSlot: "pair", align: "center", ellipsisTooltip: true },
   { title: "起始", width: "90px", key: "startAmount", align: "center" },
   { title: "收益", width: "90px", key: "earningRate", customSlot: "earningRate", align: "center" },
   { title: "状态", width: "90px", key: "status", customSlot: "status", align: "center" },

src/views/indicator/msv/components/Trades.vue

@@ -0,0 +1,179 @@
+<template>
+  <lay-layer zIndex="9999999" :title="modelConfig.title" v-model="modelConfig.visible" area="auto">
+    <div class="width-1000 custom-layer" style="padding: 20px">
+      <lay-loading :loading="modelConfig.loading">
+        <div class="chart" ref="chartRef"></div>
+      </lay-loading>
+    </div>
+  </lay-layer>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, shallowRef, onUnmounted } from "vue";
+import * as echarts from "echarts";
+import dayjs from "dayjs";
+import { get_indicator } from "@/api";
+
+const chartRef = ref();
+
+interface ModelConfig {
+  title: string;
+  visible: boolean;
+  isUpdate: boolean;
+  loading: boolean;
+}
+
+interface ModelParams {
+  exchange?: String;
+  symbol?: String;
+  start_time_mills?: String;
+  end_time_mills?: String;
+}
+
+let modelConfig: ModelConfig = reactive({ title: "", visible: false, isUpdate: false, loading: false });
+let modelParams: ModelParams = reactive({});
+
+let tradesInfo = ref();
+let tradesChart = shallowRef();
+
+const show = (params?: any) => {
+  modelConfig.visible = true;
+  modelConfig.title = "Trades数据";
+  modelParams = params;
+  setTimeout(() => {
+    getIndicatorInfo(params);
+  }, 500);
+};
+
+// 获取trades数据
+const getIndicatorInfo = (value: any) => {
+  const params = { indicator: "trades", query: value };
+  modelConfig.loading = true;
+  get_indicator(params, (data: any) => {
+    modelConfig.loading = false;
+    if (data.code == 200) {
+      tradesInfo.value = data.data;
+      initChart(data.data);
+    }
+  });
+};
+
+const initChart = (data: any) => {
+  tradesChart.value = echarts.init(chartRef.value);
+
+  window.removeEventListener("resize", () => {
+    tradesChart.value.resize();
+  });
+  window.addEventListener("resize", () => {
+    tradesChart.value.resize();
+  });
+
+  let buy_list: any = [];
+  let sell_list: any = [];
+  data.map((item: any) => {
+    const info = [item.time, item.price, item.size, item.side];
+    Number(item.size) > 0 ? buy_list.push(info) : sell_list.push(info);
+  });
+  const chartOption = {
+    title: {
+      text: `${modelParams.exchange} Trades`,
+      subtext: `币对:${modelParams.symbol?.toUpperCase()} 时间:${dayjs(Number(modelParams.start_time_mills)).format("MM-DD HH:mm:ss")} ~ ${dayjs(Number(modelParams.end_time_mills)).format(
+        "MM-DD HH:mm:ss"
+      )}`,
+    },
+    grid: {
+      top: "80px",
+      left: "60px",
+      right: "40px",
+      bottom: "100px",
+    },
+    tooltip: {
+      // trigger: 'axis',
+      showDelay: 0,
+      formatter: (params: any) => {
+        if (params.value.length <= 0) return "";
+        var time = dayjs(params.value[0] * 1).format("YYYY-MM-DD HH:mm:ss.SSS");
+        return `${params.seriesName}:<br/>时间: ${time}<br/>价格: ${params.value[1]}<br/>数量: ${params.value[2]}`;
+      },
+      axisPointer: {
+        show: true,
+        type: "cross",
+        lineStyle: {
+          type: "dashed",
+          width: 1,
+        },
+      },
+    },
+    toolbox: {
+      feature: {
+        dataZoom: {},
+        brush: {
+          type: ["rect", "clear"],
+        },
+      },
+    },
+    xAxis: [
+      {
+        type: "value",
+        scale: true,
+        axisLabel: {
+          formatter: (value: any) => {
+            var time = dayjs(value).format("MM-DD HH:mm:ss");
+            return time;
+          },
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        scale: true,
+      },
+    ],
+    series: [
+      {
+        name: "买",
+        type: "scatter",
+        symbol: "triangle",
+        symbolSize: 6,
+        itemStyle: {
+          color: "transparent",
+          borderColor: "rgb(14, 203, 129)",
+          borderWidth: 1,
+        },
+        data: buy_list.reverse(),
+      },
+      {
+        name: "卖",
+        type: "scatter",
+        symbol: "triangle",
+        symbolRotate: 180,
+        symbolSize: 6,
+        itemStyle: {
+          color: "transparent",
+          borderColor: "rgb(246, 70, 93)",
+          borderWidth: 1,
+        },
+        data: sell_list.reverse(),
+      },
+    ],
+  };
+  tradesChart.value.setOption(chartOption);
+};
+onUnmounted(() => {
+  window.removeEventListener("resize", tradesChart.value.resize());
+});
+
+defineExpose({ show });
+</script>
+
+<style lang="scss" scoped>
+.chart {
+  padding-top: 20px;
+  min-width: 350px;
+  min-height: 500px;
+}
+</style>

src/views/indicator/msv/index.vue

@@ -34,15 +34,18 @@
       </div>
     </template>
   </lay-card>
+  <Trades ref="tradesRef" />
 </template>
 
 <script lang="ts" setup name="IndicatorMsv">
 import { ref, reactive, onUnmounted, shallowRef } from "vue";
 import * as echarts from "echarts";
 import dayjs from "dayjs";
+import Trades from "./components/Trades.vue";
 import { get_indicator } from "@/api";
 
 const chartRef = ref();
+const tradesRef = ref();
 
 interface PageConfig {
   loading: boolean;
@@ -136,13 +139,11 @@ const initChart = (data: any) => {
     },
     yAxis: {
       type: "value",
-      boundaryGap: [0, "100%"],
     },
     series: [
       {
         name: "价格",
         type: "line",
-        symbol: "none",
         sampling: "lttb",
         itemStyle: {
           color: "rgb(55, 162, 255)",
@@ -164,6 +165,15 @@ const initChart = (data: any) => {
     ],
   };
   msvChart.value.setOption(chartOption);
+  msvChart.value.on("click", (params: any) => {
+    const query = {
+      exchange: pageParams.exchange,
+      symbol: pageParams.symbol,
+      start_time_mills: (params.name * 1 - 60000).toString(),
+      end_time_mills: (params.name * 1 + 60000).toString(),
+    };
+    tradesRef.value.show(query);
+  });
 };
 
 onUnmounted(() => {