波动率指标trades数据添加翻页

src/views/bot/manage/index.vue

@@ -236,16 +236,16 @@ const columns = ref([
   { 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", ellipsisTooltip: true },
-  { title: "起始", width: "90px", key: "startAmount", align: "center" },
+  { title: "起始", width: "70px", key: "startAmount", align: "center" },
   { title: "收益", width: "70px", key: "earningRate", customSlot: "earningRate", align: "center" },
   { title: "状态", width: "90px", key: "status", customSlot: "status", align: "center" },
   { title: "参数", key: "configs", customSlot: "configs" },
-  { title: "IP:编号", width: "120px", key: "ip", customSlot: "ip", ellipsisTooltip: true },
-  { title: "通讯", width: "80px", key: "lastReportTime", customSlot: "lastReportTime", align: "center" },
+  { title: "IP:编号", width: "100px", key: "ip", customSlot: "ip", ellipsisTooltip: true },
+  { title: "通讯", width: "80px", key: "lastReportTime", customSlot: "lastReportTime", align: "center", ellipsisTooltip: true },
   { title: "持仓信息", width: "80px", key: "posNum", customSlot: "posNum", align: "center", ellipsisTooltip: true },
-  { title: "开机币对数", width: "90px", key: "pairNum", customSlot: "pairNum", align: "center" },
-  { title: "修改", width: "90px", key: "updateTime", customSlot: "updateTime", align: "center" },
-  { title: "所属人", width: "80px", key: "userName", align: "center", ellipsisTooltip: true },
+  { title: "开机数", width: "60px", key: "pairNum", customSlot: "pairNum", align: "center" },
+  { title: "修改", width: "80px", key: "updateTime", customSlot: "updateTime", align: "center", ellipsisTooltip: true },
+  { title: "所属人", width: "70px", key: "userName", align: "center", ellipsisTooltip: true },
   {
     title: "操作",
     width: "160px",

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

@@ -4,6 +4,8 @@
       <lay-loading :loading="modelConfig.loading">
         <div class="chart" ref="chartRef"></div>
       </lay-loading>
+      <div class="chart-button upper" @click="handleUpper()"><</div>
+      <div class="chart-button down" @click="handleDown()">></div>
     </div>
   </lay-layer>
 </template>
@@ -41,36 +43,52 @@ const show = (params?: any) => {
   modelConfig.title = "Trades数据";
   modelParams = params;
   setTimeout(() => {
-    getIndicatorInfo(params);
+    getIndicatorInfo(params, false);
   }, 500);
 };
 
+const handleUpper = () => {
+  modelParams.start_time_mills = (Number(modelParams.start_time_mills) - 90000).toString();
+  modelParams.end_time_mills = (Number(modelParams.end_time_mills) - 90000).toString();
+  getIndicatorInfo(modelParams, true);
+};
+const handleDown = () => {
+  modelParams.start_time_mills = (Number(modelParams.start_time_mills) + 90000).toString();
+  modelParams.end_time_mills = (Number(modelParams.end_time_mills) + 90000).toString();
+  getIndicatorInfo(modelParams, true);
+};
+
 // 获取trades数据
-const getIndicatorInfo = (value: any) => {
+const getIndicatorInfo = (value: any, isUpdate: boolean) => {
   const params = { indicator: "trades", query: value };
-  modelConfig.loading = true;
+  modelConfig.loading = true && !isUpdate;
   get_indicator(params, (data: any) => {
     modelConfig.loading = false;
     if (data.code == 200) {
       tradesInfo.value = data.data;
-      initChart(data.data);
+      console.log(data.data);
+      if (data.code == 200 && data.data != null) !tradesChart.value ? initChart(data.data) : updateChart(data.data);
     }
   });
 };
 
 const initChart = (data: any) => {
+  if (tradesChart.value != null && !tradesChart.value.isDisposed()) echarts.dispose(tradesChart.value);
   tradesChart.value = echarts.init(chartRef.value);
 
   window.removeEventListener("resize", () => tradesChart.value.resize());
   window.addEventListener("resize", () => tradesChart.value.resize());
-
+  updateChart(data);
+};
+const updateChart = (data: any) => {
+  tradesChart.value.clear();
   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 = {
+  const option = {
     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(
@@ -162,7 +180,7 @@ const initChart = (data: any) => {
       },
     ],
   };
-  tradesChart.value.setOption(chartOption);
+  tradesChart.value.setOption(option, true);
 };
 onUnmounted(() => {
   window.removeEventListener("resize", () => tradesChart.value.resize());
@@ -173,8 +191,34 @@ defineExpose({ show });
 
 <style lang="scss" scoped>
 .chart {
+  padding: 0 30px;
   padding-top: 20px;
   min-width: 350px;
   min-height: 500px;
 }
+.chart-button {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 30px;
+  height: 100px;
+  line-height: 100px;
+  text-align: center;
+  font-size: 20px;
+  display: inline-block;
+  border: 1px solid #aaa;
+  color: #aaa;
+  z-index: 10px;
+  &:hover {
+    border: 1px solid #333;
+    color: #333;
+  }
+}
+.upper {
+  left: 20px;
+}
+.down {
+  right: 20px;
+}
 </style>