st-comp 0.0.246 → 0.0.248

package/src/pages/KlinePlus/KlineDialog/MultiCycle.vue

@@ -0,0 +1,312 @@
+<script setup>
+import dayjs from "dayjs";
+import { ref, onMounted, nextTick } from "vue";
+import { formatLabel, estimateKlineTime, getTimeRange } from "./tools";
+import { getCycleList } from "./api.js";
+
+const emit = defineEmits(["goToSingleCycle"]);
+const props = defineProps({
+  varietyCode: { type: String, required: true },
+  varietyStock: { type: Number, required: true }, // 品种市场类型 0-期货, 1-股票, 2-期权
+  indicatorStore: { type: Object, required: true }, // 指标配置Store
+  userKlineConfig: { type: Object, required: true }, // 用户自定义的K线配置
+
+  // 交互选项
+  sellBuy: { type: Number, default: 1 },
+  rightType: { type: Number, default: null },
+  klineType: { type: Number, default: null },
+  initTimeRange: { type: Array, required: true },
+  mainIndicator: { type: String, required: true },
+
+  // 绘制数据: 成交
+  tradeLog: { type: Array, default: () => [] }, // 成交数据
+  // 绘制数据: 净值
+  netPositionData: { type: Array, default: () => [] }, // 净值数据
+
+  // 功能: 强制定位高亮(非必填)
+  positionTime: { type: [String, null], default: null },
+});
+const chartList = ref([]); // 图表列表
+const chartDomRefList = ref([]); // 图表Dom列表
+const cycleOptions = ref([]);
+const menuList = [{ key: "syncBrushRangeOtherKline", label: "同步其它K线范围" }]; // 菜单列表
+
+// 同步刷选范围
+const syncBrushRange = ref({
+  cycleList: [], // 需要进行刷选的周期
+  startTime: null,
+  endTime: null,
+});
+
+// 清除单个图表的同步刷选
+const handleClearSyncBrush = (cycle) => {
+  if (syncBrushRange.value.cycleList.includes(cycle)) {
+    const index = syncBrushRange.value.cycleList.findIndex((i) => i === cycle);
+    syncBrushRange.value.cycleList.splice(index, 1);
+  }
+};
+
+// 绑定图表Ref
+const handleSetChartDomRef = (el, index) => {
+  if (el) chartDomRefList.value[index] = el;
+};
+
+// 点击菜单项
+const handleClickMenuItem = (menu, item, index) => {
+  switch (menu.key) {
+    // 同步刷选范围
+    case "syncBrushRangeOtherKline": {
+      const { screenTimeRange, contextmenuKlineTime } = chartDomRefList.value[index];
+      // 生成同步刷选的时间范围
+      switch (item.cycle) {
+        // 大周期将contextmenuKlineTime按周期拆成范围, 再使用
+        case "6": {
+          syncBrushRange.value = {
+            cycleList: [],
+            startTime: dayjs(contextmenuKlineTime).format("YYYY-MM-DD 00:00:00"),
+            endTime: dayjs(contextmenuKlineTime).format("YYYY-MM-DD 23:59:59"),
+          };
+          break;
+        }
+        case "7": {
+          syncBrushRange.value = {
+            cycleList: [],
+            startTime: dayjs(contextmenuKlineTime).startOf("week").add(1, "day").format("YYYY-MM-DD 00:00:00"),
+            endTime: dayjs(contextmenuKlineTime).endOf("week").add(1, "day").format("YYYY-MM-DD 23:59:59"),
+          };
+          break;
+        }
+        case "8": {
+          syncBrushRange.value = {
+            cycleList: [],
+            startTime: dayjs(contextmenuKlineTime).startOf("month").format("YYYY-MM-DD 00:00:00"),
+            endTime: dayjs(contextmenuKlineTime).endOf("month").format("YYYY-MM-DD 23:59:59"),
+          };
+          break;
+        }
+        // 小周期直接用screenTimeRange
+        default: {
+          syncBrushRange.value = {
+            cycleList: [],
+            startTime: screenTimeRange[0],
+            endTime: screenTimeRange[1],
+          };
+        }
+      }
+      // 图表重绘
+      chartList.value.forEach((citem, cindex) => {
+        if (cindex !== index) {
+          syncBrushRange.value.cycleList.push(citem.cycle);
+          const startTime = estimateKlineTime(syncBrushRange.value.startTime, "before", 200, citem.cycle);
+          const endTime = estimateKlineTime(syncBrushRange.value.endTime, "after", 200, citem.cycle);
+          citem.initTimeRange = [startTime, endTime];
+        }
+        nextTick(() => chartDomRefList.value[index].reDraw());
+      });
+      break;
+    }
+  }
+};
+
+onMounted(async () => {
+  cycleOptions.value = (await getCycleList()).body[1002].map((item) => ({ label: item.dictName, value: item.dictCode }));
+  const { multiCycleNum, multiCycleList } = props.userKlineConfig;
+  chartList.value = multiCycleList.slice(0, multiCycleNum).map((cycle) => {
+    const params = {
+      type: "reset",
+      cycle,
+      startTime: props.tradeLog[0].openTime,
+      endTime: props.positionTime ? props.positionTime : props.tradeLog.at(-1).closeTime,
+    };
+    const initTimeRange = getTimeRange(params);
+    return { cycle, initTimeRange };
+  });
+});
+defineExpose({
+  changeTimeRange: (type) => {
+    chartList.value = chartList.value.map((item) => {
+      const params = {
+        type,
+        cycle: item.cycle,
+        startTime: props.tradeLog[0].openTime,
+        endTime: props.positionTime ? props.positionTime : props.tradeLog.at(-1).closeTime,
+      };
+      return {
+        ...item,
+        initTimeRange: getTimeRange(params),
+      };
+    });
+    // 同步刷选范围
+    switch (type) {
+      case "week": {
+        const startDate = dayjs().startOf("week").add(1, "day").format("YYYY-MM-DD 00:00:00");
+        const endDate = dayjs().endOf("week").add(1, "day").format("YYYY-MM-DD 23:59:59");
+        syncBrushRange.value = {
+          cycleList: ["6", "7", "8"],
+          startTime: startDate,
+          endTime: endDate,
+        };
+        break;
+      }
+      case "month": {
+        const startDate = dayjs().startOf("month").format("YYYY-MM-DD 00:00:00");
+        const endDate = dayjs().endOf("month").format("YYYY-MM-DD 23:59:59");
+        syncBrushRange.value = {
+          cycleList: ["6", "7", "8"],
+          startTime: startDate,
+          endTime: endDate,
+        };
+        break;
+      }
+      case "reset": {
+        syncBrushRange.value = {
+          cycleList: [],
+          startTime: null,
+          endTime: null,
+        };
+        break;
+      }
+    }
+  },
+});
+</script>
+
+<template>
+  <div :class="`kline-multi grid-${userKlineConfig.multiCycleNum}`">
+    <div
+      class="box"
+      v-for="(item, index) in chartList"
+      @dblclick="emit('goToSingleCycle', item)"
+    >
+      <div class="cycleName">
+        <span>{{ formatLabel(item.cycle, cycleOptions) }}</span>
+        <el-select
+          v-model="item.cycle"
+          popper-class="element-dark"
+          :popper-append-to-body="false"
+          @change="handleClearSyncBrush(item.cycle)"
+        >
+          <el-option
+            v-for="(item, index) in cycleOptions"
+            :key="index"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+      <st-contextmenu>
+        <st-klinePlus
+          :ref="(el) => handleSetChartDomRef(el, index)"
+          :varietyCode="varietyCode"
+          :varietyStock="varietyStock"
+          :indicatorStore="indicatorStore"
+          :userKlineConfig="userKlineConfig"
+          :cycle="item.cycle"
+          :sellBuy="sellBuy"
+          :rightType="rightType"
+          :klineType="klineType"
+          :initTimeRange="item.initTimeRange"
+          :mainIndicator="mainIndicator"
+          :tradeLog="tradeLog"
+          :netPositionData="netPositionData"
+          :positionTime="positionTime"
+          :syncBrushRange="syncBrushRange"
+        />
+        <template #popover>
+          <el-menu
+            :style="{
+              borderRadius: '4px',
+              overflow: 'hidden',
+              background: '#fff',
+              borderRight: 0,
+            }"
+          >
+            <el-menu-item
+              v-for="menuItem in menuList"
+              style="height: 36px"
+              :key="menuItem.key"
+              :index="menuItem.key"
+              @click="handleClickMenuItem(menuItem, item, index)"
+            >
+              {{ menuItem.label }}
+            </el-menu-item>
+          </el-menu>
+        </template>
+      </st-contextmenu>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.kline-multi {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 2px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(150px, 1fr));
+  grid-template-rows: repeat(2, minmax(100px, 1fr));
+  grid-gap: 2px;
+  .box {
+    position: relative;
+    border: 1px solid var(--el-border-color);
+    transition: 0.2s;
+    &:hover {
+      border: 1px solid var(--el-color-primary);
+    }
+    .cycleName {
+      color: white;
+      font-size: 12px;
+      padding: 1px 4px;
+      background-color: var(--el-color-primary);
+      display: flex;
+      align-items: center;
+      border-bottom-left-radius: 4px;
+      position: absolute;
+      z-index: 999;
+      right: 0px;
+      top: 0px;
+      :deep(.el-select) {
+        margin-left: 4px;
+        width: 14px;
+        .el-select__icon {
+          margin-left: 0;
+          color: black;
+          width: 14px;
+          height: 14px;
+        }
+        .el-select__wrapper {
+          border-radius: 50%;
+          background: #ccc;
+          padding: 0;
+          gap: 0;
+          min-height: 14px;
+          line-height: 14px;
+        }
+        .el-select__input {
+          min-width: 0 !important;
+          width: 0 !important;
+        }
+      }
+    }
+  }
+}
+.grid-2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(1, minmax(80px, 1fr));
+  grid-gap: 2px;
+}
+.grid-4 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, minmax(80px, 1fr));
+  grid-gap: 2px;
+}
+.grid-6 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, minmax(80px, 1fr));
+  grid-gap: 2px;
+}
+</style>

package/src/pages/KlinePlus/KlineDialog/api.js

@@ -0,0 +1,108 @@
+import axios from "axios";
+
+// 测试环境
+// const userid = 103;
+// const token = "490cebe77872589fc6f670d30983b268";
+// export const host = "http://192.168.12.38:5173";
+
+// 线上环境
+const userid = 200;
+const token = "02e233681c5cecaf788525e70c380ed5";
+export const host = "//investapi.hzyotoy.com";
+
+// 获取数据: 指标列表
+export const getIndicator = async (data) => {
+  const res = await axios({
+    method: "post",
+    headers: { token, userid },
+    url: `${host}/middleLayer/kline/getIndicator`,
+    data,
+  });
+  return res.data;
+};
+
+// 获取周期列表
+export const getCycleList = async () => {
+  const res = await axios({
+    method: "post",
+    headers: { token, userid },
+    url: `${host}/middleLayer/post/common/qt/getDict`,
+    data: { dictIds: [1002] },
+  });
+  return res.data;
+};
+
+// 查询品种是否股票
+export const queryContractType = async (data) => {
+  const res = await axios({
+    method: "post",
+    headers: { token, userid },
+    url: `${host}/middleLayer/bjpost/invest/analysis/queryContractType`,
+    data,
+  });
+  return res.data;
+};
+
+// 获取净值曲线数据
+export const queryVarietyNetPositionValue = async (data) => {
+  const res = await axios({
+    method: "post",
+    headers: { token, userid },
+    url: `${host}/middleLayer/bjpost/invest/analysis/queryVarietyNetPositionValue`,
+    data,
+  });
+  return res.data;
+};
+
+// 获取交易订单数据
+export const queryPairedRecordByVariety = async (data) => {
+  const res = await axios({
+    method: "post",
+    headers: { token, userid },
+    url: `${host}/middleLayer/bjpost/invest/analysis/queryPairedRecordByVariety`,
+    data,
+  });
+  return res.data;
+};
+
+// 获取篮子品种对应的价差指数
+export const queryJCVariety = async (data) => {
+  const res = await axios({
+    method: "post",
+    headers: { token, userid },
+    url: `${host}/middleLayer/bjpost/invest/analysis/queryJCVariety`,
+    data,
+  });
+  return res.data;
+};
+
+export const getUserConfig = async (data) => {
+  const res = await axios({
+    method: "post",
+    headers: { token, userid },
+    url: `${host}/middleLayer/bjpost/common/qt/getUserConfig`,
+    data,
+  });
+  return res.data;
+};
+
+// 获取配置
+export const getConfig = async () => {
+  const res = await axios({
+    method: "get",
+    headers: { token, userid },
+    url: `${host}/middleLayer/get/invest/sys/frontconfig/info`,
+  });
+  return res.data;
+};
+
+// 设置配置
+export const setConfig = async (data) => {
+  const res = await axios({
+    method: "post",
+    headers: { token, userid },
+    url: `${host}/middleLayer/post/invest/sys/frontconfig/save`,
+    data,
+  });
+  return res.data;
+};