st-comp 0.0.245 → 0.0.246

package/src/pages/KlineBasic/api.js

@@ -1,7 +1,12 @@
 import axios from "axios";
 
-const token = "8461980aa5ae69587e642326d4c030a2";
-const host = "http://192.168.12.38:5173";
+// 测试环境
+// const token = "dc4eb64816effa53ccee0de7a02e777b";
+// export const host = "http://192.168.12.38:5173";
+
+// 线上环境
+const token = "10831ed6ce9ff2652a732f63c5d79c5c";
+export const host = "//investapi.hzyotoy.com";
 
 // 获取指标线配置
 export const getIndicator = async () => {
@@ -21,7 +26,6 @@ export const getConfig = async () => {
   });
   return res.data;
 }
-
 // 设置配置
 export const setConfig = async (data) => {
   const res = await axios({
@@ -32,7 +36,6 @@ export const setConfig = async (data) => {
   });
   return res.data;
 }
-
 // 获取周期列表
 export const getCycleList = async () => {
   const res = await axios({

package/src/pages/KlineBasic/index.vue

@@ -1,76 +1,366 @@
 <template>
-  <div style="width: 100%;height: 100%;">
-    <div style="height: 42px">
-      <el-input v-model="variety" style="width: 120px; margin-right: 12px;" />
-      <el-input v-model="varietyName" style="width: 120px; margin-right: 12px;" />
-      <el-input v-model="featureId" style="width: 120px; margin-right: 12px;" />
-      <el-input v-model="featureType" style="width: 120px; margin-right: 12px;" />
-      <el-select v-model="cycle" style="width: 120px; margin-right: 12px;" >
-        <el-option
-          v-for="item in cycleOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
+  <div style="width: 100%;height: 100%; display: flex; flex-direction: column;">
+    <!-- 工具栏 -->
+    <div style="height: 42px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 12px; flex-shrink: 0;">
+      <el-radio-group v-model="displayMode" size="small" @change="handleModeChange">
+        <el-radio-button value="single">单周期</el-radio-button>
+        <el-radio-button value="multi">多周期</el-radio-button>
+      </el-radio-group>
+      
+      <el-divider direction="vertical" />
+      
+      <!-- 单周期模式下的配置 -->
+      <template v-if="displayMode === 'single'">
+        <el-input 
+          v-model="singleConfig.variety" 
+          placeholder="品种代码" 
+          size="small"
+          style="width: 120px;"
         />
-      </el-select>
-      <el-select v-model="mainIndicator" style="width: 120px;" >
-        <el-option
-          v-for="(item, index) in indicatorStore.mainIndicatorList"
-          :key="index"
-          :label="item.label"
-          :value="item.value"
+        <el-input 
+          v-model="singleConfig.varietyName" 
+          placeholder="品种名称" 
+          size="small"
+          style="width: 120px;"
         />
-      </el-select>
+        <el-input 
+          v-model="singleConfig.featureId" 
+          placeholder="合约ID" 
+          size="small"
+          style="width: 120px;"
+        />
+        <el-input 
+          v-model="singleConfig.featureType" 
+          placeholder="合约类型" 
+          size="small"
+          style="width: 120px;"
+        />
+        <el-select 
+          v-model="singleConfig.cycle" 
+          placeholder="周期" 
+          size="small"
+          style="width: 120px;"
+        >
+          <el-option
+            v-for="item in cycleOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-select 
+          v-model="singleConfig.mainIndicator" 
+          placeholder="主图指标" 
+          size="small"
+          style="width: 120px;"
+        >
+          <el-option
+            v-for="(item, index) in indicatorStore.mainIndicatorList"
+            :key="index"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </template>
+      
+      <!-- 多周期模式下的配置（共用基础信息） -->
+      <template v-if="displayMode === 'multi'">
+        <el-input 
+          v-model="multiBaseConfig.variety" 
+          placeholder="品种代码" 
+          size="small"
+          style="width: 120px;"
+          @change="refreshMultiCharts"
+        />
+        <el-input 
+          v-model="multiBaseConfig.varietyName" 
+          placeholder="品种名称" 
+          size="small"
+          style="width: 120px;"
+          @change="refreshMultiCharts"
+        />
+        <el-input 
+          v-model="multiBaseConfig.featureId" 
+          placeholder="合约ID" 
+          size="small"
+          style="width: 120px;"
+          @change="refreshMultiCharts"
+        />
+        <el-input 
+          v-model="multiBaseConfig.featureType" 
+          placeholder="合约类型" 
+          size="small"
+          style="width: 120px;"
+          @change="refreshMultiCharts"
+        />
+        <el-select 
+          v-model="multiBaseConfig.mainIndicator" 
+          placeholder="主图指标" 
+          size="small"
+          style="width: 120px;"
+          @change="refreshMultiCharts"
+        >
+          <el-option
+            v-for="(item, index) in indicatorStore.mainIndicatorList"
+            :key="index"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </template>
     </div>
-    <div style="height: calc(100% - 42px);" v-if="show">
-      <st-klineBasic
-        :variety="variety"
-        :varietyName="varietyName"
-        :featureId="featureId"
-        :featureType="featureType"
-        :cycle="cycle"
-        :mainIndicator="mainIndicator"
-        :indicatorStore="indicatorStore"
-        :config="config"
-        :env="{ VITE_BASE_URL: 'http://192.168.12.38:5173' }"
-        :brushRange="['2025-06-03 00:00:00', '2025-06-05 23:59:59']"
-      />
+    
+    <!-- 图表展示区域 -->
+    <div 
+      class="charts-container" 
+      :style="{
+        height: 'calc(100% - 42px)',
+        overflow: 'auto'
+      }"
+    >
+      <!-- 单周期模式：单个图表 -->
+      <div 
+        v-if="displayMode === 'single' && show"
+        class="single-chart"
+      >
+        <st-klineBasic
+          :key="singleChartKey"
+          :variety="singleConfig.variety"
+          :varietyName="singleConfig.varietyName"
+          :featureId="singleConfig.featureId"
+          :featureType="singleConfig.featureType"
+          :cycle="singleConfig.cycle"
+          :mainIndicator="singleConfig.mainIndicator"
+          :indicatorStore="indicatorStore"
+          :env="{ VITE_BASE_URL: host }"
+          :brushRange="['2025-06-03 00:00:00', '2025-06-05 23:59:59']"
+        />
+      </div>
+      
+      <!-- 多周期模式：6个图表网格布局 -->
+      <div 
+        v-if="displayMode === 'multi' && show"
+        class="multi-charts-grid"
+      >
+        <div 
+          v-for="(chart, index) in multiCharts" 
+          :key="`${chart.cycle}-${multiBaseConfig.variety}`"
+          class="multi-chart-item"
+        >
+          <div class="multi-chart-header">
+            <span class="multi-chart-title">{{ chart.cycleLabel }}</span>
+          </div>
+          <div class="multi-chart-content">
+            <st-klineBasic
+              :ref="(el) => setChartRef(el, chart.cycle)"
+              :variety="multiBaseConfig.variety"
+              :varietyName="multiBaseConfig.varietyName"
+              :featureId="multiBaseConfig.featureId"
+              :featureType="multiBaseConfig.featureType"
+              :cycle="chart.cycle"
+              :mainIndicator="multiBaseConfig.mainIndicator"
+              :indicatorStore="indicatorStore"
+              :env="{ VITE_BASE_URL: host }"
+              :brushRange="['2025-06-03 00:00:00', '2025-06-05 23:59:59']"
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, reactive, computed, onMounted, watch } from 'vue';
 import useIndicatorStore from './indicator';
-import { getCycleList } from './api';
-
-const freqOptions = ['1m', '5m', '15m', '30m', '60m', '1d', '1w', '1mon']
+import { getCycleList, host } from './api';
 
 const indicatorStore = useIndicatorStore();
 
-const show = ref(false)
-const variety = ref('000001');
-const varietyName = ref('平安银行');
-const featureId = ref('88')
-const featureType = ref('3')
+// 显示模式
+const displayMode = ref('single'); // single: 单周期, multi: 多周期
+const show = ref(false);
+
+// 周期映射
+const cycleMap = {
+  '15m': { value: '1', label: '15分钟' },
+  '30m': { value: '2', label: '30分钟' },
+  '60m': { value: '3', label: '60分钟' },
+  '1d': { value: '6', label: '日线' },
+  '1w': { value: '7', label: '周线' },
+  '1mon': { value: '8', label: '月线' }
+};
+
+// 多周期展示的周期列表
+const multiCycleList = [
+  { cycle: '1', cycleLabel: '15分钟' },   // 15m
+  { cycle: '2', cycleLabel: '30分钟' },   // 30m
+  { cycle: '3', cycleLabel: '60分钟' },   // 60m
+  { cycle: '6', cycleLabel: '日线' },     // 1d
+  { cycle: '7', cycleLabel: '周线' },     // 1w
+  { cycle: '8', cycleLabel: '月线' }      // 1mon
+];
+
+// 周期选项
 const cycleOptions = ref([]);
-const cycle = ref('');
-const mainIndicator = ref('DKX_EMA')
-const config = ref({
-  defaultShowCounts: 500, // 默认展示条数
-  maxShowCounts: 5000, // 单页最大展示条数
-  showSubChart: true, // 是否展示副图
-})
 
+// 单周期配置
+const singleConfig = reactive({
+  variety: '000001',
+  varietyName: '平安银行',
+  featureId: 88,
+  featureType: '3',
+  cycle: '',
+  mainIndicator: 'DKX_EMA'
+});
+
+// 多周期基础配置（共用）
+const multiBaseConfig = reactive({
+  variety: '000001',
+  varietyName: '平安银行',
+  featureId: 88,
+  featureType: '3',
+  mainIndicator: 'DKX_EMA'
+});
+
+// 多周期图表数据
+const multiCharts = ref(multiCycleList);
+
+// 存储图表实例引用（用于需要时手动刷新）
+const chartRefs = ref({});
+
+// 单图表刷新key
+const singleChartKey = ref(0);
+
+// 设置图表引用
+const setChartRef = (el, cycle) => {
+  if (el) {
+    chartRefs.value[cycle] = el;
+  }
+};
+
+// 刷新多周期图表
+const refreshMultiCharts = () => {
+  // 通过重新生成key来强制刷新
+  multiCharts.value = [...multiCycleList];
+};
+
+// 模式切换处理
+const handleModeChange = () => {
+  // 切换模式时不需要额外操作，Vue会自动重新渲染
+};
+
+// 监听单周期配置变化，刷新图表
+watch(
+  () => [singleConfig.variety, singleConfig.cycle, singleConfig.mainIndicator],
+  () => {
+    if (displayMode.value === 'single') {
+      singleChartKey.value++;
+    }
+  }
+);
+
+// 监听多周期基础配置变化，刷新所有图表
+watch(
+  () => [multiBaseConfig.variety, multiBaseConfig.mainIndicator],
+  () => {
+    if (displayMode.value === 'multi') {
+      refreshMultiCharts();
+    }
+  }
+);
+
+// 初始化
 onMounted(async () => {
-  await indicatorStore.init()
-  const res = await getCycleList()
-  cycleOptions.value = res?.body?.[1002].map(item => ({ label: item.dictName, value: item.dictCode }))
-  cycle.value = cycleOptions.value[1].value
-  show.value = true
-})
+  await indicatorStore.init();
+  const res = await getCycleList();
+  cycleOptions.value = res?.body?.[1002].map(item => ({ 
+    label: item.dictName, 
+    value: item.dictCode 
+  }));
+  
+  // 设置默认周期（取第二个选项，通常是日线）
+  if (cycleOptions.value.length > 1) {
+    singleConfig.cycle = cycleOptions.value[1].value;
+  } else if (cycleOptions.value.length > 0) {
+    singleConfig.cycle = cycleOptions.value[0].value;
+  }
+  
+  show.value = true;
+});
 </script>
 
 <style lang="scss" scoped>
+.charts-container {
+  flex: 1;
+  overflow: auto;
+  padding: 12px;
+  background: #f5f5f5;
+}
+
+// 单周期模式
+.single-chart {
+  width: 100%;
+  height: 100%;
+  min-height: 600px;
+  background: #000;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+// 多周期模式 - 网格布局
+.multi-charts-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  width: 100%;
+}
 
-</style>
+// 多周期模式 - 6宫格布局
+.multi-charts-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); // 3列
+  grid-template-rows: repeat(2, 1fr); // 2行，每行占满剩余空间
+  gap: 12px;
+  width: 100%;
+  height: 100%; // 占满父容器高度
+  min-height: 0; // 确保grid可以正确收缩
+  
+  .multi-chart-item {
+    background: #000;
+    border-radius: 4px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    min-height: 0; // 确保flex子项可以正确收缩
+    height: 100%; // 占满grid单元格高度
+    
+    .multi-chart-header {
+      height: 32px;
+      padding: 0 12px;
+      background: #1a1a1a;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #333;
+      flex-shrink: 0; // 头部固定高度，不收缩
+      
+      .multi-chart-title {
+        font-size: 14px;
+        font-weight: 500;
+        color: #fff;
+      }
+    }
+    
+    .multi-chart-content {
+      flex: 1; // 占满剩余空间
+      min-height: 0; // 确保内容区域可以正确收缩
+      position: relative;
+      
+      // 确保K线组件占满容器
+      :deep(.klineBasic) {
+        height: 100%;
+      }
+    }
+  }
+}
+</style>