st-comp 0.0.43 → 0.0.45

package/src/pages/Kline/components/SingleCycleSingleVariety.vue

@@ -7,7 +7,14 @@ import isSameOrAfter from "dayjs/plugin/isSameOrAfter";
 import { ElMessage } from "element-plus";
 import "element-plus/dist/index.css";
 import { formatValue } from "../../../../packages/Kline/utils";
-import { getSingleCycleSingleVariety, getDict, getNetPositionData, queryPairedRecordByVariety } from "../api.ts";
+import {
+  getDiffKLine,
+  queryDiffLineRevelance,
+  getDiffSubKLine,
+  getDict,
+  getNetPositionData,
+  queryPairedRecordByVariety,
+} from "../api.ts";
 import { mainIndicatorList } from "st-func";
 
 dayjs.extend(isSameOrAfter);
@@ -51,9 +58,16 @@ const sellBuyTypeOptions = ref<any>([
   { label: "买卖", value: 2 },
 ]);
 
+const otherChart = ref("价差分布图");
+const otherChartOptions = ["二腿价格走势图", "二腿价格走势百分比图", "二腿相关度", "价差周期性", "价差分布图"];
+
 // 接口原生-点位数据
 const originPointData = ref<any>([]);
-
+// 接口原生-二腿相关度数据
+const relevanceOriginData = ref<any>([]);
+// 接口原生-二腿价格趋势数据
+const priceTrendOriginData = ref<any>([]);
+const priceTrendPercentOriginData = ref<any>([]);
 // K线组件入参
 const isSelect = ref(false);
 const klineData = ref<any>([]);
@@ -67,9 +81,47 @@ const defaultMenuData = ref([
     callBack: (echartsInstance: any, cursorPenVisible: any) => createWarning(echartsInstance, cursorPenVisible),
   },
 ]);
+const relevanceData = computed(() => {
+  let result = [];
+  result = relevanceOriginData.value.reduce((res: any[], item: any) => {
+    res.push([
+      dayjs(item.genTime).format(cycle.value === "6" ? "YYYY-MM-DDT00:00:00" : "YYYY-MM-DDT15:00:00"),
+      item.rel,
+    ]);
+    return res;
+  }, []);
+  return result;
+});
+const priceTrendData = computed(() => {
+  let result = [];
+  result = priceTrendOriginData.value.reduce((res: any[], item: any) => {
+    res.push({
+      name: item.name,
+      data: item.infos.map((i) => {
+        return [dayjs(i.genTime).format("YYYY-MM-DDTHH:mm:ss"), i.close];
+      }),
+    });
+    return res;
+  }, []);
+  return result;
+});
+const priceTrendPercentData = computed(() => {
+  let result = [];
+  result = priceTrendPercentOriginData.value.reduce((res: any[], item: any) => {
+    res.push({
+      name: item.name,
+      data: item.infos.map((i) => {
+        return [dayjs(i.genTime).format("YYYY-MM-DDTHH:mm:ss"), i.close];
+      }),
+    });
+    return res;
+  }, []);
+  return result;
+});
 const config = ref({
-  totalBarCount: 2000,
-  preBarCount: 100,
+  totalBarCount: 2000, // 会被渲染的K线条数
+  preBarCount: 100, // 预加载K线条数
+  // 左上角Tips配置
   tipsConfig: {
     open: true,
     heigh: true,
@@ -79,77 +131,76 @@ const config = ref({
     riseAndFall: true,
     netPosition: true,
   },
+  // 动态数据加载配置
   dynamicLoadConfig: {
     historyVisible: true,
     historyLoadCallBack: async (historyIsAllLoad: any) => {
       const { totalBarCount, preBarCount } = config.value;
-      // 1.如果当前K线数据量就小于API希望得到的数量,说明已经没有数据了,将API得到的数据作全部展示
-      // 并且打上标记,此K线数据已无更多
+      // 前置判断: 如果 [K线数据量 < 期望总渲染条数 + 预请求数] ,则标记完毕
       if (klineData.value.length < totalBarCount + preBarCount) {
         config.value.totalBarCount = klineData.value.length;
-        console.log("K线数据已无更多-1");
         historyIsAllLoad.value = true;
         return;
       }
-      // 2.已当前存储的K线数据第一条时间作为结束时间,往前再次请求
-      const params = {
-        right: 1, // 复权方式
-        variety: "au8888", // 品种
-        cycle: cycle.value, // 周期
-        endTime: klineData.value[0][0], // 结束时间
-        limit: 2000, // 总条数
-        queryType: 1, // 0-按时间，1-按结束时间，2-按开始时间
-      };
-      const res = await getSingleCycleSingleVariety(params);
+      // 运算过程：
+      // 1.计算出当前K线数据中,第一根K线时间点
+      // 2.请求接口,获取历史K线数据,并拼接
+      // 3.如果请求到的数据量小于期望获得的条数,或当前数据总根数大于限制的10000条数, 则标记完毕
+      const endTime = dayjs(klineData.value[0][0]).format("YYYY-MM-DD HH:mm:ss");
+      const params = { diffId: 1481, cycle: cycle.value, limit: 2800, endTime, queryType: 1 };
+      const res = await getDiffKLine(params);
       const apiData = res.data.body.slice(0, res.data.body.length - 1);
       klineData.value = [...apiData, ...klineData.value];
-      config.value.totalBarCount = config.value.totalBarCount + apiData.length;
-      // 3.如果请求到的数据量小于期望的条数,或者当前数据总根数大于限制的10000条数
-      // 也打上标记,此K线数据已无更多
-      if (apiData.length < 2000 - 1 || config.value.totalBarCount > 6000) {
-        console.log("K线数据已无更多-2");
+      config.value.totalBarCount = klineData.value.length;
+      if (apiData.length < 2800 - 1 || config.value.totalBarCount > 10000) {
         historyIsAllLoad.value = true;
       }
     },
-    futureVisible: true,
-    futureLoadCallBack: async (futureIsAllLoad: any) => {
-      const { totalBarCount, preBarCount } = config.value;
-      // 1.如果当前K线数据量就小于API希望得到的数量,说明已经没有数据了,将API得到的数据作全部展示
-      // 并且打上标记,此K线数据已无更多
-      // if (klineData.value.length < totalBarCount + preBarCount) {
-      //   config.value.totalBarCount = klineData.value.length;
-      //   console.log("K线数据已无更多-1");
-      //   futureIsAllLoad.value = true;
-      //   return;
-      // }
-      // 2.已当前存储的K线数据最后一条时间作为开始时间,往后再次请求
-      const params = {
-        contractType: 0,
-        right: 0, // 复权方式
-        variety: "FU", // 品种
-        cycle: cycle.value, // 周期
-        startTime: klineData.value[klineData.value.length - 1][0], // 开始
-        limit: 20, // 总条数
-        queryType: 2, // 0-按时间，1-按结束时间，2-按开始时间
-      };
-      const res = await getSingleCycleSingleVariety(params);
-      const apiData = res.data.body.slice(1); // 取掉重复数据
-      klineData.value = [...klineData.value, ...apiData];
-      config.value.totalBarCount = config.value.totalBarCount + apiData.length;
-      // 3.如果请求到的数据量小于期望的条数,或者当前数据总根数大于限制的10000条数
-      // 也打上标记,此K线数据已无更多
-      if (apiData.length < 20 - 1 || config.value.totalBarCount > 6000) {
-        console.log("K线数据已无更多-2");
-        futureIsAllLoad.value = true;
-      }
-    },
   },
-  zoomLock: true,
+  isOpenDS: false,
 });
 
-onMounted(() => {
-  console.log("---------单品种单周期组件: onMounted挂载成功---------");
-});
+watch(
+  otherChart,
+  (newValue: string) => {
+    config.value.isOpenDS = false;
+    relevanceOriginData.value = [];
+    priceTrendOriginData.value = [];
+    priceTrendPercentOriginData.value = [];
+    const callBackMap = new Map([
+      [
+        "二腿价格走势图",
+        async () => {
+          await getPriceTrendData("value");
+        },
+      ],
+      [
+        "二腿价格走势百分比图",
+        async () => {
+          await getPriceTrendData("percent");
+        },
+      ],
+      [
+        "二腿相关度",
+        async () => {
+          await getRelevanceData();
+        },
+      ],
+      ["价差周期性", async () => {}],
+      [
+        "价差分布图",
+        async () => {
+          config.value.isOpenDS = true;
+        },
+      ],
+    ]);
+    const callBack = callBackMap.get(newValue);
+    callBack instanceof Function && callBack();
+  },
+  {
+    immediate: true,
+  }
+);
 
 // 初始化
 const componentInit = async () => {
@@ -157,8 +208,8 @@ const componentInit = async () => {
     loading.value = true;
     await getDictCycle();
     await getKlineData();
-    await getKlinePointData();
-    await getKlineNetPositionData();
+    // await getKlinePointData();
+    // await getKlineNetPositionData();
     loading.value = false;
     await getKlineExtendData();
   } catch (error) {
@@ -185,20 +236,11 @@ const getDictCycle = async () => {
   });
 };
 /**
- * @description: 获取K线数据
+ * @description: 获取K线数据(价差)
  */
 const getKlineData = async () => {
-  const params = {
-    contractType: 0,
-    cycle: cycle.value,
-    endTime: "2024-03-28 15:00:00",
-    preLimit: 800,
-    queryType: 0,
-    right: 0,
-    startTime: "2024-01-28 15:00:00",
-    variety: "RU",
-  };
-  const res = await getSingleCycleSingleVariety(params);
+  const params = { diffId: 1481, cycle: cycle.value, limit: 2800, endTime: "2024-04-08 17:02:19", queryType: 1 };
+  const res = await getDiffKLine(params);
   klineData.value = res.data.body;
 };
 /**
@@ -251,18 +293,18 @@ const getKlinePointData = async () => {
       part: null, // 份数
       profitAndLoss: item.profitAndLoss,
       time: openTime, // 匹配到X轴的时间
-      markLineTarget: []
+      markLineTarget: [],
     };
     // 连线逻辑,当天的不连
     if (openTime !== closeTime) {
       openItem.markLineTarget = [
-        { 
+        {
           time: closeTime,
           name: `平${item.tradeDirection ? "空" : "多"}`,
           lineStyle: {
-            color: item.profitAndLoss >= 0 ? '#FF0000' : '#389e0d'
-          }
-        }
+            color: item.profitAndLoss >= 0 ? "#FF0000" : "#389e0d",
+          },
+        },
       ];
     }
     const closeItem = {
@@ -515,6 +557,30 @@ const getKlineNetPositionData = async () => {
   }
   netPositionData.value = klineData.value.map((item: any) => netPositionMap.get(item[0]) ?? null);
 };
+/**
+ * @description: 获取二腿相关度数据
+ */
+const getRelevanceData = async () => {
+  const params = {
+    diffId: 1481,
+  };
+  const res = await queryDiffLineRevelance(params);
+  const { body } = res.data;
+  relevanceOriginData.value = body;
+};
+/**
+ * @description: 获取二腿价格走势数据
+ */
+const getPriceTrendData = async (type: string) => {
+  const params = { diffId: 1481, cycle: cycle.value, limit: 2800, endTime: "2024-04-08 17:02:19", queryType: 1 };
+  const res = await getDiffSubKLine(params);
+  const { body } = res.data;
+  if (type === "value") {
+    priceTrendOriginData.value = body;
+  } else {
+    priceTrendPercentOriginData.value = body;
+  }
+};
 
 /**
  * @description: 周期切换
@@ -524,7 +590,8 @@ const cycleChange = async () => {
     loading.value = true;
     config.value.totalBarCount = 2000;
     await getKlineData();
-    await getKlinePointData();
+    // await getPriceTrendData();
+    // await getKlinePointData();
     loading.value = false;
   } catch (error) {
     console.log(error);
@@ -713,6 +780,13 @@ const reFresh = () => {
             />
           </el-select>
         </div>
+        <!-- 价差额外图表展示 + 选择 -->
+        <div class="kline-header-item sellBuySelect">
+          <span>{{ otherChart }}</span>
+          <el-select v-model="otherChart" popper-class="element-dark" @change="sellBuyTypeChange">
+            <el-option v-for="item in otherChartOptions" :key="item" :label="item" :value="item" />
+          </el-select>
+        </div>
       </div>
       <!-- K线本体 -->
       <st-kline
@@ -724,6 +798,9 @@ const reFresh = () => {
         :lineData="lineData"
         :brushRange="brushRange"
         :netPositionData="netPositionData"
+        :relevanceData="relevanceData"
+        :priceTrendData="priceTrendData"
+        :priceTrendPercentData="priceTrendPercentData"
         :defaultMenuData="defaultMenuData"
         :isSelect="isSelect"
         :config="config"

package/src/pages/KlineNew/index.vue

@@ -1,10 +1,50 @@
 <template>
-  <div style="width: 100%; height: 100%;">
-    <st-klineNew />    
+  <div style="width: 100%; height: 42px;">
+    <el-select v-model="freqId" :style="{ width: '120px', marginRight: '12px' }">
+      <el-option
+        v-for="item in freqOption"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+    <el-select v-model="mainIndicator" :style="{ width: '120px', marginRight: '12px' }">
+      <el-option
+        v-for="item in mainIndicatorList"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </div>
+  <div style="width: 100%; height: calc(100% - 42px);">
+    <st-klineNew
+      :code="'RU'"
+      :freqId="freqId"
+      :freqDict="freqOption"
+      :mainIndicator="mainIndicator"
+      :mainIndicatorList="mainIndicatorList"
+      :subIndicatorList="subIndicatorList"
+    />    
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+import { mainIndicatorList, subIndicatorList } from "st-func"
+
+const freqOption = [
+  { value: "1", label: "1m" },
+  { value: "2", label: "5m" },
+  { value: "3", label: "15m" },
+  { value: "4", label: "30m" },
+  { value: "5", label: "60m" },
+  { value: "6", label: "1d" },
+  { value: "7", label: "1w" },
+  { value: "8", label: "1mon" }
+]
+const freqId = ref('5')
+const mainIndicator = ref('DKX_EMA')
 </script>
 
 <style lang="scss" scoped>