st-comp 0.0.42 → 0.0.44

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "st-comp",
   "public": true,
-  "version": "0.0.42",
+  "version": "0.0.44",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/packages/KlineNew/index.ts

@@ -0,0 +1,8 @@
+import { App } from "vue";
+import StKlineNew from "./index.vue";
+
+export default {
+  install(app: App) {
+    app.component("st-klineNew", StKlineNew);
+  },
+}

package/packages/KlineNew/index.vue

@@ -0,0 +1,310 @@
+<template>
+  <div
+    class="kline"
+    @mousemove="isSelect = true"
+    @mouseout="isSelect = false"
+  >
+    <div class="kline-mainChart" ref="mainChartRef"></div>
+    <div class="kline-subChart" ref="subChartRef"></div>
+    <div class="kline-slideChart" ref="slideChartRef"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue"
+import * as echarts from 'echarts'
+import type { EChartsType } from 'echarts'
+import { getMainOption, getSubOption, getSlideOption } from './option.js'
+import { getKlineDataApi } from './utils.js'
+import dayjs from "dayjs"
+
+const config = {
+  defaultShowDays: 50, // 默认展示天数
+  preLoadDays: 50, // 预加载天数
+  preLoadCount: 800, // 预加载数据条数(用于计算指标线)
+  loadCheckCount: 500, // 加载数据检查条数
+}
+let mainChart: EChartsType
+let subChart: EChartsType
+let slideChart: EChartsType
+let mainDataZoomTimer: any = null
+let slideDataZoomTimer: any = null
+let isLoadHistory: boolean = false // 是否正在加载历史数据
+let isloadAllHistory: boolean = false // 是否加载完全部历史数据
+let isLoadNew: boolean = false // 是否正在加载新数据
+let isloadAllNew: boolean = false // 是否加载完全部新数据
+let resizeRo: any
+let slideData: any[] = [] // 拖动轴数据
+let klineData: any[] = [] // 时间轴数据
+
+const mainChartRef = ref<HTMLElement>()
+const subChartRef = ref<HTMLElement>()
+const slideChartRef = ref<HTMLElement>()
+const isSelect = ref(false)
+
+onMounted(async () => {
+  // 请求滚动条数据
+  slideData = await getKlineData({
+    queryType: '0',
+    startTime: `${dayjs().subtract(5, 'year').format("YYYY-MM-DD")} 00:00:00`,
+    endTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+    cycle: '6',
+  })
+  // 请求首屏k线数据
+  const { startTime, showStartTime, endTime, showEndTime } = getTime(slideData.length - 1 - config.defaultShowDays, slideData.length - 1)
+  klineData = await getKlineData({
+    queryType: '0',
+    startTime: `${startTime} 00:00:00`,
+    endTime: `${endTime} 24:00:00`,
+    cycle: '5',
+  })
+  init()
+  addEventListener()
+  draw('main', { showStartTime, showEndTime })
+  draw('sub', { showStartTime, showEndTime })
+  draw('slide')
+  // 绑定resize事件
+  let isFirst: boolean | null = true
+  resizeRo = new ResizeObserver(() => {
+    if (isFirst) {
+      isFirst = null
+      return
+    }
+    mainChart.resize()
+    subChart.resize()
+    slideChart.resize()
+  })
+  resizeRo.observe(mainChartRef.value)
+  window.addEventListener('keydown', keyDownEvent)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', keyDownEvent)
+  mainChart.dispose()
+  subChart.dispose()
+  slideChart.dispose()
+  resizeRo.disconnect()
+  resizeRo = null
+})
+
+const init = () => {
+  mainChart = echarts.init(mainChartRef.value)
+  subChart = echarts.init(subChartRef.value)
+  slideChart = echarts.init(slideChartRef.value)
+  echarts.connect([mainChart, subChart])
+}
+
+const addEventListener = () => {
+  mainChart.on('datazoom', (params: any) => {
+    clearTimeout(mainDataZoomTimer)
+    mainDataZoomTimer = setTimeout(() => {
+      let startIndex = 0
+      let endIndex = 0
+      if (params.batch) {
+        const { start, end } = params.batch[0]
+        startIndex = Math.floor(start * klineData.length / 100)
+        endIndex = end === 100 ? klineData.length - 1 : Math.floor(end * klineData.length / 100)
+      } else {
+        startIndex = params.startValue
+        endIndex = params.endValue
+      }
+      // 加载数据
+      if (startIndex < config.loadCheckCount && isLoadHistory === false && isloadAllHistory === false) {
+        // 左侧数据小于1000条，加载左侧数据
+        isLoadHistory = true
+        getMoreData({
+          queryType: '1',
+          endTime: klineData[0][0],
+          cycle: '5',
+          limit: 2000,
+        })
+      }
+      if (endIndex > klineData.length - config.loadCheckCount && isLoadNew === false && isloadAllNew === false) {
+        // 右侧数据小于1000条，加载右侧数据
+        isLoadNew = true
+        getMoreData({
+          queryType: '2',
+          startTime: klineData[klineData.length - 1][0],
+          cycle: '5',
+          limit: 2000,
+        })
+      }
+      // 重置滚动条
+      const { startValue, endValue } = (mainChart.getOption().dataZoom as any[])[0]
+      const startTime = (klineData[startValue][0] as string).split(' ')[0]
+      const endTime = (klineData[endValue][0] as string).split(' ')[0]
+      const slideTime = slideData.map(item => (item[0] as string).split(' ')[0])
+      slideChart.dispatchAction({
+        type: 'dataZoom',
+        startValue: slideTime.indexOf(startTime),
+        endValue: slideTime.indexOf(endTime)
+      })
+      clearTimeout(mainDataZoomTimer)
+    }, 300)
+  })
+  slideChart.on('datazoom', (params: any) => {
+    if(!params.dataZoomId) return
+    clearTimeout(slideDataZoomTimer)
+    slideDataZoomTimer = setTimeout(async() => {
+      const { start, end } = params
+      const startIndex = Math.floor(start * slideData.length / 100)
+      const endIndex = end === 100 ? slideData.length - 1 : Math.floor(end * slideData.length / 100)
+      const { startTime, showStartTime, endTime, showEndTime } = getTime(startIndex, endIndex)
+      klineData = await getKlineData({
+        queryType: '0',
+        startTime: `${startTime} 00:00:00`,
+        endTime: `${endTime} 24:00:00`,
+        cycle: '5',
+      })
+      isLoadHistory = false
+      isloadAllHistory = false
+      isLoadNew = false
+      isloadAllNew = false
+      draw('main', { showStartTime, showEndTime })
+      draw('sub', { showStartTime, showEndTime })
+      clearTimeout(slideDataZoomTimer)
+    }, 100)
+  })
+}
+
+  // 键盘事件 
+  const keyDownEvent = e => {
+    // 只有选中或者按ctrl才激活按键
+    if (!(e.ctrlKey || isSelect.value)) return
+    const option = mainChart.getOption()
+    let { startValue, endValue } = (option.dataZoom as any)[0]
+    if (e.code === 'ArrowLeft') {
+      // 左按键
+      if (startValue === 0) {
+        return
+      }
+      startValue = startValue - 1
+      endValue = endValue - 1
+      mainChart.dispatchAction({
+        type: 'highlight',
+        dataIndex: endValue,
+      })
+    } else if (e.code === 'ArrowRight') {
+      // 右按键
+      if (endValue === (option.xAxis as any)[0].data.length - 1) {
+        return
+      }
+      startValue = startValue + 1
+      endValue = endValue + 1
+      mainChart.dispatchAction({
+        type: 'highlight',
+        dataIndex: endValue,
+      })
+    } else if (e.code === 'ArrowUp') {
+      // 上按键-放大 最少保持5条数据
+      if(endValue - startValue < 5) {
+        return
+      }
+      const diff = Math.floor((endValue - startValue) / 2) + 1
+      startValue = startValue + diff
+      if (endValue - startValue < 5) {
+        startValue = endValue - 4
+      }
+    } else if (e.code === 'ArrowDown') {
+      // 下按键-缩小
+      const diff = Math.min(500, (endValue - startValue))
+      startValue = startValue - diff - 1
+    }
+    mainChart.dispatchAction({
+      type: 'dataZoom',
+      startValue,
+      endValue
+    })
+  }
+
+const getTime = (startIndex: number, endIndex: number) => {
+  const startTime = (slideData[startIndex - config.preLoadDays < 0 ? 0 : startIndex - config.preLoadDays][0] as string).split(' ')[0]
+  const showStartTime = (slideData[startIndex][0] as string).split(' ')[0]
+  const endTime = (slideData[endIndex + config.preLoadDays > slideData.length ? slideData.length - 1 : endIndex + config.preLoadDays][0] as string).split(' ')[0]
+  const showEndTime = (slideData[endIndex][0] as string).split(' ')[0]
+  return { startTime, showStartTime, endTime, showEndTime }
+}
+
+const getMoreData = async(params: any) => {
+  const { startValue, endValue } = (mainChart.getOption().dataZoom as any[])[0]
+  const showStartTime = klineData[startValue][0]
+  const showEndTime = klineData[endValue][0]
+  const res = await getKlineData(params)
+  if (params.queryType === '1') {
+    // 加载历史数据
+    if (new Date(slideData[0][0]) > new Date(res[0][0])) {
+      // 表示历史数据已加载完
+      isloadAllHistory = true
+      klineData = [
+        ...res.filter(item => new Date(item[0]) >= new Date(slideData[0][0])),
+        ...klineData.slice(1)
+      ]
+    } else {
+      klineData = [...res, ...klineData.slice(1)]
+    }
+    isLoadHistory = false
+  } else {
+    // 加载新数据
+    if (res.length === 0) {
+      // 表示已经加载完全部新数据
+      isloadAllNew = true
+      isLoadNew = false
+      return
+    }
+    klineData = [...klineData, ...res.slice(1)]
+  }
+  draw('main', { showStartTime, showEndTime })
+  draw('sub', { showStartTime, showEndTime })
+}
+
+const getKlineData = async(params: any) => {
+  const res = await getKlineDataApi({
+    contractType: 0, // 合约类型 0-主连 1-加权
+    variety: "RU", // 品种
+    preLimit: 0, // 向前多查询数量
+    postLimit: 0, // 向后多查询数量
+    right: 0, // 0-不复权 1-前复权 2-后复权
+    ...params,
+  })
+  return res
+}
+
+const draw = (type: string, params: any = {}) => {
+  const { showStartTime, showEndTime } = params
+  const { defaultShowDays } = config
+  const callBackMap = new Map([
+    [ "main", () => {
+      mainChart.setOption(getMainOption({ data: klineData, showStartTime, showEndTime }))
+    }],
+    [ "sub", () => {
+      subChart.setOption(getSubOption({ data: klineData, showStartTime, showEndTime }))
+    }],
+    [ "slide", () => {
+      slideChart.setOption(getSlideOption({ data: slideData, defaultShowDays }))
+    }],
+  ]);
+  const callBack = callBackMap.get(type);
+  if (callBack instanceof Function) {
+    callBack();
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.kline {
+  width: 100%;
+  height: 100%;
+  &-mainChart {
+    width: 100%;
+    height: 60%;
+  }
+  &-subChart {
+    width: 100%;
+    height: calc(40% - 50px);
+  }
+  &-slideChart {
+    width: 100%;
+    height: 50px;
+  }
+}
+</style>

package/packages/KlineNew/option.ts

@@ -0,0 +1,150 @@
+export const getMainOption = (config: any) => {
+  const { data, showStartTime, showEndTime } = config
+  const xAxisData: any[] = []
+  const klineData: any[] = []
+  let startValue = -1
+  let endValue = -1
+  data.forEach((item: any, index: number) => {
+    xAxisData.push(item[0])
+    klineData.push([ item[1], item[4], item[3], item[2] ])
+    if (new Date(item[0]) >= new Date(showStartTime) && startValue === -1) {
+      startValue = index
+    }
+    if (new Date(item[0]) <= new Date(showEndTime)) {
+      endValue = index
+    }
+  })
+  return {
+    animation: false,
+    grid: {
+      left: '50px',
+      top: '20px',
+      right: '20px',
+      bottom: '20px',
+    },
+    dataZoom: [
+      {
+        type: 'inside',
+        realtime: true,
+        startValue,
+        endValue,
+      }
+    ],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "cross",
+      },
+    },
+    xAxis: {
+      type: 'category',
+      data: xAxisData
+    },
+    yAxis: {
+      type: 'value',
+      min: (value: any) => value.min,
+      max: (value: any) => value.max,
+    },
+    series: [
+      {
+        type: 'candlestick',
+        data: klineData,
+      }
+    ]
+  }
+}
+
+export const getSubOption = (config: any) => {
+  const { data, showStartTime, showEndTime } = config
+  const xAxisData: any[] = []
+  const barData: any[] = []
+  let startValue = -1
+  let endValue = -1
+  data.forEach((item: any, index: number) => {
+    xAxisData.push(item[0])
+    barData.push(item[5])
+    if (new Date(item[0]) >= new Date(showStartTime) && startValue === -1) {
+      startValue = index
+    }
+    if (new Date(item[0]) <= new Date(showEndTime)) {
+      endValue = index
+    }
+  })
+  return {
+    animation: false,
+    grid: {
+      left: '50px',
+      top: '20px',
+      right: '20px',
+      bottom: '20px',
+    },
+    dataZoom: [
+      {
+        type: 'inside',
+        realtime: true,
+        startValue,
+        endValue,
+      }
+    ],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "cross",
+      },
+    }, 
+    xAxis: {
+      type: 'category',
+      data: xAxisData
+    },
+    yAxis: {
+      type: 'value',
+    },
+    series: [
+      {
+        data: barData,
+        type: 'bar'
+      }
+    ]
+  }
+}
+
+export const getSlideOption = (config: any) => {
+  const { data, defaultShowDays } = config
+  const xAxisData = data.map((item: any) => item[0].split(' ')[0])
+  const lineData = data.map((item: any) => item[4])
+  return {
+    grid: {
+      height: 0,
+      left: '80px',
+      right: '80px',
+    },
+    dataZoom: [
+      {
+        show: true,
+        realtime: true,
+        startValue: data.length - 1 - defaultShowDays,
+        endValue: data.length - 1,
+      },
+      {
+        type: 'inside',
+        realtime: true,
+        startValue: data.length - 1 - defaultShowDays,
+        endValue: data.length - 1,
+      }
+    ],
+    xAxis: {
+      type: 'category',
+      data: xAxisData,
+      show: false,
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        data: lineData,
+        type: 'line'
+      }
+    ]
+  }
+}

package/packages/KlineNew/utils.ts

@@ -0,0 +1,13 @@
+import axios from 'axios'
+
+export const getKlineDataApi = async(params: any) => {
+  const res = await axios({
+    method: 'post',
+    headers: {
+      token: '78e4d78065e760bb3d0dcc3d442e6a0e',
+    },
+    url: 'http://192.168.12.49/common/qt/getSingleCycleSingleVariety',
+    data: params,
+  })
+  return res.data.body
+}

package/packages/VarSeach/components/ModalQuery/index.vue

@@ -74,9 +74,12 @@
             <span>自定义：</span>
             <el-input
               v-model="start"
+              :class="startStatus ? 'border-red' : ''"
               style="width: 150px"
               @input="
                 () => {
+                  startStatus = false;
+                  endStatus = false;
                   orderByInfoObj.children = orderByInfoObj.children.map(
                     (item) => ({
                       ...item,
@@ -110,9 +113,12 @@
             <el-input
               v-model="end"
               controls-position="right"
+              :class="endStatus ? 'border-red' : ''"
               style="width: 150px"
               @input="
                 () => {
+                  startStatus = false;
+                  endStatus = false;
                   orderByInfoObj.children = orderByInfoObj.children.map(
                     (item) => ({
                       ...item,
@@ -148,6 +154,7 @@
           <span>自定义：</span>
           <el-input-number
             v-model="tFeaturelncomes.withFewYears"
+            :class="withFewYearsStatus ? 'border-red' : ''"
             size="small"
             :min="-9999999"
             :max="9999999"
@@ -155,6 +162,7 @@
             style="width: 70px"
             @change="
               () => {
+                withFewYearsStatus = false
                 orderByInfoObj.children = orderByInfoObj.children.map(
                   (item) => ({ ...item, active: false })
                 );
@@ -180,6 +188,7 @@
           <span> 年以上盈利超过 </span>
           <el-input-number
             v-model="tFeaturelncomes.netProfit"
+            :class="netProfitStatus ? 'border-red' : ''"
             size="small"
             :min="0"
             :max="9999999"
@@ -187,6 +196,7 @@
             style="width: 80px"
             @change="
               () => {
+                netProfitStatus = false
                 orderByInfoObj.children = orderByInfoObj.children.map(
                   (item) => ({ ...item, active: false })
                 );
@@ -234,18 +244,18 @@
         <span v-else>
           {{
             item.start !== null && item.end !== null
-              ? `${item.start}${item.startUnit} ~ ${item.end}${item.endUnit}`
+              ? `${item.start === null || item.start === undefined ? '-':item.start}${item.startUnit} ~ ${item.end === null || item.end === undefined ? '-':item.end}${item.endUnit}`
               : ""
           }}
           {{
             item.start === null && item.end !== null
-              ? `< ${item.end}${item.endUnit}`
+              ? `< ${item.end === null || item.end === undefined ? '-':item.end}${item.endUnit}`
               : ""
           }}
           {{
             item.end === null && item.start !== null
               ? `
-            ${item.start}${item.startUnit}>`
+            ${item.start}${item.start === null || item.start === undefined ? '-':item.startUnit}>`
               : ""
           }}
           {{ item.ase ? `从小到大` : "" }}
@@ -294,6 +304,10 @@ const title = ref("");
 const hasSt = ref("");
 const start = ref(null);
 const end = ref(null);
+const startStatus = ref(false);
+const endStatus = ref(false);
+const withFewYearsStatus = ref(false);
+const netProfitStatus = ref(false);
 const column = ref("floatMarketCapital");
 const tFeaturelncomes = ref({
   yearsCount: null,
@@ -369,12 +383,30 @@ const confirmOk = () => {
   if (column.value === "tFeaturelncomes") {
     if (
       tFeaturelncomes.value.netProfit === null ||
-      tFeaturelncomes.value.withFewYears === null
+      tFeaturelncomes.value.netProfit === undefined ||
+      tFeaturelncomes.value.withFewYears === null || 
+      tFeaturelncomes.value.withFewYears === undefined
     ) {
+      withFewYearsStatus.value = (!tFeaturelncomes.value.withFewYears && tFeaturelncomes.value.withFewYears !==0) ? true:false
+      netProfitStatus.value = (!tFeaturelncomes.value.netProfit && tFeaturelncomes.value.netProfit !==0) ? true:false
       ElMessage.error("请输入必填项");
       return;
     }
     hasTFeaturelncomes = true;
+  }else if(column.value === "st"){
+    if(hasSt.value !== 0 && hasSt.value !== 1){
+      ElMessage.error("请选择是否ST");
+      return;
+    }
+  }else{
+    if(!start.value && !end.value ){
+      if(start.value !== 0 &&end.value !==0){
+        endStatus.value = (!end.value && end.value !==0) ? true:false
+        startStatus.value = (!start.value && start.value !==0) ? true:false
+        ElMessage.error("请输入必填项");
+        return;
+      }
+    }
   }
   const data = {
     column: column.value,
@@ -418,7 +450,12 @@ const handleClose = (row) => {
   queryList.value = queryList.value.filter((item) => item.key !== row.key);
 };
 </script>
-
+<style>
+.border-red .el-input__wrapper,
+.border-red .el-select__wrapper {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+</style>
 <style lang="scss" scoped>
 .title {
   font-size: 16px;

package/packages/index.ts

@@ -3,6 +3,7 @@ import StChartLayout from "./ChartLayout/index.ts"
 import StDialog from "./Dialog/index.ts"
 import StHeatMap from "./HeatMap/index.ts"
 import StKline from "./Kline/index.ts"
+import StKlineNew from "./KlineNew/index.ts"
 import StLinearLegend from "./LinearLegend/index.ts"
 import StMap from "./Map/index.ts"
 import StPagination from "./Pagination/index.ts"
@@ -17,6 +18,7 @@ export default {
     StDialog.install(app)
     StHeatMap.install(app)
     StKline.install(app)
+    StKlineNew.install(app)
     StLinearLegend.install(app)
     StMap.install(app)
     StPagination.install(app)

package/src/pages/KlineNew/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div style="width: 100%; height: 100%;">
+    <st-klineNew />    
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/src/router/routes.ts

@@ -19,6 +19,11 @@ export default [
     name: 'Kline',
     component: () => import('../pages/Kline/index.vue'),
   },
+  {
+    path: '/klineNew',
+    name: 'KlineNew',
+    component: () => import('../pages/KlineNew/index.vue'),
+  },
   {
     path: '/linearLegend',
     name: 'LinearLegend',