|
|
@@ -34,10 +34,10 @@
|
|
|
<span class="card-title">内部数据</span>
|
|
|
</template>
|
|
|
<template v-slot:extra>
|
|
|
- <lay-button class="card-button" @click="handleSwitchRun">{{ predictorSwitchRun ? "暂停" : "运行" }}</lay-button>
|
|
|
+ <lay-button class="card-button" @click="handleDownData()">下载</lay-button>
|
|
|
</template>
|
|
|
<template v-slot:body>
|
|
|
- <div class="predictor-chart" ref="predictorChartRef"></div>
|
|
|
+ <div class="card-body-wp">内部数据较大,请下载观看。</div>
|
|
|
</template>
|
|
|
</lay-card>
|
|
|
|
|
|
@@ -61,9 +61,8 @@
|
|
|
import { ref, reactive, onMounted, onUnmounted, shallowRef } from "vue";
|
|
|
import { useRoute } from "vue-router";
|
|
|
import * as echarts from "echarts";
|
|
|
-import dayjs from "dayjs";
|
|
|
import LogText from "./components/LogText.vue";
|
|
|
-import { get_as_robot_detail, get_robot_detail, get_robot_logs, get_remaining_detail } from "@/api";
|
|
|
+import { get_robot_detail, get_robot_logs, get_remaining_detail } from "@/api";
|
|
|
|
|
|
const ROBOT_STATUS: any = reactive({
|
|
|
STOPPED: "已停止",
|
|
|
@@ -78,7 +77,6 @@ const ROBOT_STATUS: any = reactive({
|
|
|
const apiList = ref(window.sessionStorage.getItem("_4L_API_LIST"));
|
|
|
|
|
|
const balanceChartRef = ref();
|
|
|
-const predictorChartRef = ref();
|
|
|
const logtextRef = ref();
|
|
|
|
|
|
const route = useRoute();
|
|
|
@@ -111,311 +109,8 @@ let robotDetail = ref<any>({});
|
|
|
let balanceList = ref([]);
|
|
|
let balanceChart = shallowRef();
|
|
|
let predictorChart = shallowRef();
|
|
|
-let predictorInterval = ref();
|
|
|
-let predictorSwitchRun = ref(true);
|
|
|
-let requestLimit = ref(false);
|
|
|
let timer = ref();
|
|
|
|
|
|
-const getPredictorState = () => {
|
|
|
- const params = { botId: route.params.id, startTime: +new Date() - 7 * 24 * 60 * 60 * 1000, endTime: +new Date() };
|
|
|
- if (pageConfig.predictorLoading) return;
|
|
|
- pageConfig.predictorLoading = true;
|
|
|
- get_as_robot_detail(params, (data: any) => {
|
|
|
- pageConfig.predictorLoading = false;
|
|
|
- if (data.code == 200 && data.data != null) !predictorChart.value ? initPredictorChart(data.data) : updatePredictorChart(data.data);
|
|
|
- requestLimit.value = false;
|
|
|
- });
|
|
|
-};
|
|
|
-
|
|
|
-const initPredictorChart = (data: any) => {
|
|
|
- if (predictorChart.value != null && !predictorChart.value.isDisposed()) echarts.dispose(predictorChart.value);
|
|
|
- predictorChart.value = echarts.init(predictorChartRef.value);
|
|
|
-
|
|
|
- window.removeEventListener("resize", () => predictorChart.value.resize());
|
|
|
- window.addEventListener("resize", () => predictorChart.value.resize());
|
|
|
- updatePredictorChart(data);
|
|
|
-};
|
|
|
-const updatePredictorChart = (data: any) => {
|
|
|
- predictorChart.value.clear();
|
|
|
- const xData = data.map((item: any) => dayjs(item.update_time * 1).format("MM-DD HH:mm:ss:SSS"));
|
|
|
- const option = {
|
|
|
- dataZoom: [
|
|
|
- {
|
|
|
- type: "inside",
|
|
|
- xAxisIndex: [0, 1, 2, 3, 4, 5],
|
|
|
- start: 0,
|
|
|
- end: 100,
|
|
|
- },
|
|
|
- {
|
|
|
- xAxisIndex: [0, 1, 2, 3, 4, 5],
|
|
|
- start: 0,
|
|
|
- end: 100,
|
|
|
- },
|
|
|
- ],
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- formatter: (value: any) => {
|
|
|
- return `时间:${value[0].name}<br />${value.map((item: any) => `${item.marker}${item.seriesName}:${item.value}`).join("<br/>")}`;
|
|
|
- },
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- feature: {
|
|
|
- dataZoom: {},
|
|
|
- brush: {
|
|
|
- type: ["rect", "clear"],
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- legend: [
|
|
|
- {
|
|
|
- data: ["mid_price", "ask_price", "bid_price", "optimal_ask_price", "optimal_bid_price", "ref_price"],
|
|
|
- top: "230px",
|
|
|
- },
|
|
|
- {
|
|
|
- data: ["inventory"],
|
|
|
- top: "380px",
|
|
|
- },
|
|
|
- {
|
|
|
- data: ["spread", "delta_plus", "spread_max", "spread_min"],
|
|
|
- top: "630px",
|
|
|
- },
|
|
|
- {
|
|
|
- data: ["sigma_square"],
|
|
|
- top: "780px",
|
|
|
- },
|
|
|
- {
|
|
|
- data: ["gamma"],
|
|
|
- top: "930px",
|
|
|
- },
|
|
|
- {
|
|
|
- data: ["kappa"],
|
|
|
- top: "1080px",
|
|
|
- },
|
|
|
- ],
|
|
|
-
|
|
|
- grid: [
|
|
|
- {
|
|
|
- top: "50px",
|
|
|
- left: "60px",
|
|
|
- right: "60px",
|
|
|
- height: "150px", // 主图高度
|
|
|
- },
|
|
|
- {
|
|
|
- top: "300px",
|
|
|
- left: "60px",
|
|
|
- right: "60px",
|
|
|
- height: "50px",
|
|
|
- },
|
|
|
- {
|
|
|
- top: "450px",
|
|
|
- left: "60px",
|
|
|
- right: "60px",
|
|
|
- height: "150px",
|
|
|
- },
|
|
|
- {
|
|
|
- top: "700px",
|
|
|
- left: "60px",
|
|
|
- right: "60px",
|
|
|
- height: "50px",
|
|
|
- },
|
|
|
- {
|
|
|
- top: "850px",
|
|
|
- left: "60px",
|
|
|
- right: "60px",
|
|
|
- height: "50px",
|
|
|
- },
|
|
|
- {
|
|
|
- top: "1000px",
|
|
|
- left: "60px",
|
|
|
- right: "60px",
|
|
|
- height: "50px",
|
|
|
- },
|
|
|
- ],
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- type: "category",
|
|
|
- data: xData,
|
|
|
- },
|
|
|
- {
|
|
|
- gridIndex: 1, // 第1个网格的 x 轴
|
|
|
- type: "category",
|
|
|
- data: xData,
|
|
|
- },
|
|
|
- {
|
|
|
- gridIndex: 2, // 第2个网格的 x 轴
|
|
|
- type: "category",
|
|
|
- data: xData,
|
|
|
- },
|
|
|
- {
|
|
|
- gridIndex: 3, // 第3个网格的 x 轴
|
|
|
- type: "category",
|
|
|
- data: xData,
|
|
|
- },
|
|
|
- {
|
|
|
- gridIndex: 4, // 第4个网格的 x 轴
|
|
|
- type: "category",
|
|
|
- data: xData,
|
|
|
- },
|
|
|
- {
|
|
|
- gridIndex: 5, // 第5个网格的 x 轴
|
|
|
- type: "category",
|
|
|
- data: xData,
|
|
|
- },
|
|
|
- ],
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: "value",
|
|
|
- min: "dataMin",
|
|
|
- },
|
|
|
- {
|
|
|
- gridIndex: 1, // 第1个网格的 y 轴
|
|
|
- type: "value",
|
|
|
- min: "dataMin",
|
|
|
- },
|
|
|
- {
|
|
|
- gridIndex: 2, // 第2个网格的 y 轴
|
|
|
- type: "value",
|
|
|
- min: "dataMin",
|
|
|
- },
|
|
|
- {
|
|
|
- gridIndex: 3, // 第3个网格的 y 轴
|
|
|
- type: "value",
|
|
|
- min: "dataMin",
|
|
|
- },
|
|
|
- {
|
|
|
- gridIndex: 4, // 第4个网格的 y 轴
|
|
|
- type: "value",
|
|
|
- min: "dataMin",
|
|
|
- },
|
|
|
- {
|
|
|
- gridIndex: 5, // 第5个网格的 y 轴
|
|
|
- type: "value",
|
|
|
- min: "dataMin",
|
|
|
- },
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "mid_price",
|
|
|
- type: "line",
|
|
|
- data: data.map((item: any) => item.mid_price),
|
|
|
- },
|
|
|
- {
|
|
|
- name: "ask_price",
|
|
|
- type: "line",
|
|
|
- data: data.map((item: any) => item.ask_price),
|
|
|
- },
|
|
|
- {
|
|
|
- name: "bid_price",
|
|
|
- type: "line",
|
|
|
- data: data.map((item: any) => item.bid_price),
|
|
|
- },
|
|
|
- {
|
|
|
- name: "optimal_ask_price",
|
|
|
- type: "line",
|
|
|
- data: data.map((item: any) => item.optimal_ask_price),
|
|
|
- lineStyle: {
|
|
|
- type: "dashed",
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: "optimal_bid_price",
|
|
|
- type: "line",
|
|
|
- data: data.map((item: any) => item.optimal_bid_price),
|
|
|
- lineStyle: {
|
|
|
- type: "dashed",
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: "ref_price",
|
|
|
- type: "line",
|
|
|
- data: data.map((item: any) => item.ref_price),
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- name: "inventory",
|
|
|
- type: "line",
|
|
|
- xAxisIndex: 1,
|
|
|
- yAxisIndex: 1,
|
|
|
- data: data.map((item: any) => item.inventory),
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- name: "spread",
|
|
|
- type: "line",
|
|
|
- xAxisIndex: 2,
|
|
|
- yAxisIndex: 2,
|
|
|
- data: data.map((item: any) => item.spread),
|
|
|
- },
|
|
|
- {
|
|
|
- name: "delta_plus",
|
|
|
- type: "line",
|
|
|
- xAxisIndex: 2,
|
|
|
- yAxisIndex: 2,
|
|
|
- data: data.map((item: any) => item.delta_plus),
|
|
|
- },
|
|
|
- {
|
|
|
- name: "spread_max",
|
|
|
- type: "line",
|
|
|
- xAxisIndex: 2,
|
|
|
- yAxisIndex: 2,
|
|
|
- data: data.map((item: any) => item.spread_max),
|
|
|
- },
|
|
|
- {
|
|
|
- name: "spread_min",
|
|
|
- type: "line",
|
|
|
- xAxisIndex: 2,
|
|
|
- yAxisIndex: 2,
|
|
|
- data: data.map((item: any) => item.spread_min),
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- name: "sigma_square",
|
|
|
- type: "line",
|
|
|
- xAxisIndex: 3,
|
|
|
- yAxisIndex: 3,
|
|
|
- data: data.map((item: any) => item.sigma_square),
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- name: "gamma",
|
|
|
- type: "line",
|
|
|
- xAxisIndex: 4,
|
|
|
- yAxisIndex: 4,
|
|
|
- data: data.map((item: any) => item.gamma),
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- name: "kappa",
|
|
|
- type: "line",
|
|
|
- xAxisIndex: 5,
|
|
|
- yAxisIndex: 5,
|
|
|
- data: data.map((item: any) => item.kappa),
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- predictorChart.value.setOption(option, true);
|
|
|
-};
|
|
|
-
|
|
|
-const startPredictorInterval = () => {
|
|
|
- if (!predictorInterval.value) {
|
|
|
- getPredictorState();
|
|
|
- predictorInterval.value = setInterval(() => {
|
|
|
- if (!requestLimit.value) {
|
|
|
- requestLimit.value = true;
|
|
|
- getPredictorState();
|
|
|
- }
|
|
|
- }, 5000);
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// 停止定时请求
|
|
|
-const stopPredictorInterval = () => {
|
|
|
- if (predictorInterval.value) {
|
|
|
- clearInterval(predictorInterval.value);
|
|
|
- predictorInterval.value = null; // 释放定时器
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
// 获取机器人详情
|
|
|
const getRobotDetail = () => {
|
|
|
const params = { id: route.params.id };
|
|
|
@@ -486,16 +181,6 @@ const showLog = (data: any) => {
|
|
|
logtextRef.value.show(data);
|
|
|
};
|
|
|
|
|
|
-const handleSwitchRun = () => {
|
|
|
- if (predictorSwitchRun.value) {
|
|
|
- predictorSwitchRun.value = false;
|
|
|
- stopPredictorInterval();
|
|
|
- } else {
|
|
|
- predictorSwitchRun.value = true;
|
|
|
- startPredictorInterval();
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
const handlePageInfo = (data: any) => {
|
|
|
let infoList = data;
|
|
|
let result = infoList.map((item: string) => {
|
|
|
@@ -566,8 +251,11 @@ timer.value = setInterval(() => {
|
|
|
|
|
|
getLogsInfo();
|
|
|
|
|
|
+const handleDownData = () => {
|
|
|
+ window.open(`https://4lapi.skyfffire.com/downloadDataFile?url=http://${robotDetail.value.serverIp}:3000/downloadDataFile&id=${robotDetail.value.id}`, "_blank");
|
|
|
+};
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
- startPredictorInterval();
|
|
|
getRobotDetail();
|
|
|
});
|
|
|
|
|
|
@@ -575,11 +263,13 @@ onUnmounted(() => {
|
|
|
window.removeEventListener("resize", () => balanceChart.value.resize());
|
|
|
clearInterval(timer.value);
|
|
|
predictorChart.value.dispose();
|
|
|
- stopPredictorInterval();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.card-body-wp{
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
.card-button {
|
|
|
padding: 2px 18px;
|
|
|
}
|