#1822 #1670

src/common/components/echart/echart-base/setup.ts

@@ -1,4 +1,4 @@
-import { onActivated, onDeactivated, onUnmounted, SetupContext } from "vue";
+import { onActivated, onDeactivated, onUnmounted, SetupContext, onMounted } from "vue";
 import { debounce } from "@/utils/time"
 import { getTheme, ThemeEnum } from '@/common/config/theme';
 import * as echarts from 'echarts'
@@ -14,12 +14,7 @@ const createIframe = (parent: HTMLElement): HTMLIFrameElement => {
     return iframe;
 }
 
-type UseEchart = {
-    setOptions: (options: echarts.EChartsOption[], notMerge?: boolean) => void,
-    showLoading: (loading: boolean) => void,
-}
-
-export function useEchart(el: HTMLElement): UseEchart {
+export function useEchart(el: HTMLElement) {
     const iframe = createIframe(el);
     const echartMap: echarts.ECharts[] = [];
 
@@ -73,14 +68,63 @@ export function useEchart(el: HTMLElement): UseEchart {
         }, 50);
     };
 
+    // 键盘上下左右键控制图表
+    const onKeyup = (e: KeyboardEvent) => {
+        echartMap.forEach((chart) => {
+            const datazoom = chart.getOption().dataZoom as echarts.DataZoomComponentOption[];
+            if (datazoom && datazoom.length) {
+                const start = datazoom[0].start!;
+                const end = datazoom[0].end!;
+                switch (e.key) {
+                    case 'ArrowLeft':
+                        if (start > 0) {
+                            chart.setOption({
+                                dataZoom: [
+                                    {
+                                        start: start - 1,
+                                        end: end - 1,
+                                    }
+                                ]
+                            });
+                        }
+                        break;
+                    case 'ArrowUp':
+                        console.log('上');
+                        break;
+                    case 'ArrowRight':
+                        if (end < 100) {
+                            chart.setOption({
+                                dataZoom: [
+                                    {
+                                        start: start + 1,
+                                        end: end + 1,
+                                    }
+                                ]
+                            });
+                        }
+                        break;
+                    case 'ArrowDown':
+                        console.log('下');
+                        break;
+                    default:
+                        console.log(e);
+                }
+            }
+        });
+    };
+
     const addEventListener = () => {
         // 监听 iframe 变化重置图表尺寸
         iframe.contentWindow?.addEventListener('resize', onresize);
+        // 监听键盘事件
+        document.addEventListener('keyup', onKeyup);
     }
 
     const removeEventListener = () => {
         // 移除 iframe 监听事件
         iframe.contentWindow?.removeEventListener('resize', onresize);
+        // 移除键盘监听事件
+        document.removeEventListener('keyup', onKeyup);
     }
 
     addEventListener();

src/common/components/echart/echart-kline/index.vue

@@ -245,51 +245,56 @@ export default defineComponent({
             }
 
             const diffTime = newTime.valueOf() - lastTime.valueOf(); // 计算时间差
-            // 判断时间差是否大于周期时间
-            if (diffTime > cycleMilliseconds) {
-                lastTime.add(cycleMilliseconds, 'ms');
-                // 添加历史行情
-                source.push({
-                    date: lastTime.format('YYYY-MM-DD HH:mm:ss'),
-                    open: newPrice,
-                    close: newPrice,
-                    lowest: newPrice,
-                    highest: newPrice,
-                    ma5: '-',
-                    ma10: '-',
-                    ma15: '-',
-                    vol: 0,
-                    macd: '-',
-                    dif: '-',
-                    dea: '-',
-                    k: '-',
-                    d: '-',
-                    j: '-',
-                    cci: '-',
-                });
-                historyIndexs.push(lastIndex + 1); // 添加历史行情索引
+
+            if (diffTime > cycleMilliseconds * 2) {
+                // 时间间隔超过两个周期，重新请求历史数据
             } else {
-                const lastData = source[lastIndex];
-                if (lastData.lowest > newPrice) {
-                    lastData.lowest = newPrice; //更新最低价
-                }
-                if (lastData.highest < newPrice) {
-                    lastData.highest = newPrice; //更新最高价
+                // 判断时间差是否大于周期时间
+                if (diffTime > cycleMilliseconds) {
+                    lastTime.add(cycleMilliseconds, 'ms');
+                    // 添加历史行情
+                    source.push({
+                        date: lastTime.format('YYYY-MM-DD HH:mm:ss'),
+                        open: newPrice,
+                        close: newPrice,
+                        lowest: newPrice,
+                        highest: newPrice,
+                        ma5: '-',
+                        ma10: '-',
+                        ma15: '-',
+                        vol: 0,
+                        macd: '-',
+                        dif: '-',
+                        dea: '-',
+                        k: '-',
+                        d: '-',
+                        j: '-',
+                        cci: '-',
+                    });
+                    historyIndexs.push(lastIndex + 1); // 添加历史行情索引
+                } else {
+                    const lastData = source[lastIndex];
+                    if (lastData.lowest > newPrice) {
+                        lastData.lowest = newPrice; //更新最低价
+                    }
+                    if (lastData.highest < newPrice) {
+                        lastData.highest = newPrice; //更新最高价
+                    }
+                    lastData.close = newPrice; //更新收盘价
                 }
-                lastData.close = newPrice; //更新收盘价
-            }
 
-            calcMA('ma5', 5);
-            calcMA('ma10', 10);
-            calcMA('ma15', 15);
-            calcMACD();
-            calcKDJ();
-            clacCCI();
+                calcMA('ma5', 5);
+                calcMA('ma10', 10);
+                calcMA('ma15', 15);
+                calcMACD();
+                calcKDJ();
+                clacCCI();
 
-            // 延迟图表更新，减少卡顿
-            debounce(() => {
-                updateOptions(props.seriesType);
-            }, 1000);
+                // 延迟图表更新，减少卡顿
+                debounce(() => {
+                    updateOptions(props.seriesType);
+                }, 1000);
+            }
         };
 
         // 监听行情最新价推送
@@ -335,25 +340,6 @@ export default defineComponent({
             });
         });
 
-        // document.onkeydown = (e) => {
-        //     switch (e.key) {
-        //         case '37':
-        //             console.log('左');
-        //             break;
-        //         case '38':
-        //             console.log('上');
-        //             break;
-        //         case '39':
-        //             console.log('右');
-        //             break;
-        //         case '40':
-        //             console.log('下');
-        //             break;
-        //         default:
-        //             console.log(e.key);
-        //     }
-        // };
-
         return {
             loading,
             isEmpty,

src/common/components/echart/echart-timeline/index.vue

@@ -24,7 +24,7 @@ export default defineComponent({
             required: true,
         },
     },
-    setup(props) {
+    setup(props, { emit }) {
         const loading = ref(false);
         const isEmpty = ref(false);
         const historyIndexs: number[] = []; // 行情历史数据中所有非补充数据的索引位置(用于计算均线)
@@ -170,6 +170,8 @@ export default defineComponent({
                 if (res.historyDatas.length) {
                     isEmpty.value = false;
                     handleData(res);
+                    // 调用父级函数查询tik数据 (不合理的逻辑处理，待优化)
+                    emit('change', res.endTime);
                 } else {
                     isEmpty.value = true;
                 }

src/common/components/echart/echart-timeline/setup.ts

@@ -55,7 +55,11 @@ export function handleEchart() {
 
     // 计算涨跌幅百分比，涨跌幅=(今日收盘价-昨日收盘价)/昨日收盘价*100%
     const calcRatio = (val: number) => {
-        const result = (Number(val) - chartData.value.yestclose) / chartData.value.yestclose * 100;
+        const num = Number(val);
+        if (isNaN(num)) {
+            return "-";
+        }
+        const result = (num - chartData.value.yestclose) / chartData.value.yestclose * 100;
         return toDecimalFull(result) + '%';
     }
 
@@ -123,7 +127,6 @@ export function handleEchart() {
                 axisLabel: {
                     showMinLabel: true,
                     showMaxLabel: true,
-                    interval: 50,
                 }
             },
             yAxis: [

src/common/setup/table/tableQuote.ts

@@ -166,4 +166,9 @@ export function quoteAmplituOfVibration(record: QueryQuoteDayRsp, decimalplace =
         }
     }
     return result
+}
+
+// 处理行情数值显示
+export function quoteValue(value: number) {
+    return value || '--';
 }

src/views/market/spot_trade/components/goods-chart/chart/index.less

@@ -38,28 +38,31 @@
                 margin-left: 20px;
             }
 
-            .ant-radio-button-wrapper {
-                height          : 22px;
-                line-height     : 20px;
-                color           : #7a8a94;
-                border-color    : var(--tab-border-color, #22292c) !important;
-                background-color: transparent;
-
-                &:not(:first-child)::before {
-                    background-color: var(--tab-border-color, #22292c) !important;
-                }
-            }
-
-            .ant-radio-button-wrapper-checked {
-                color           : var(--tab-checked-color, #0866b8);
-                background-color: var(--tab-checked-bgcolor, #0e2f4c);
-
-                &:not(.ant-radio-button-wrapper-disabled)::before {
-                    background-color: var(--tab-border-color, #22292c) !important;
-                }
-
-                &:not(.ant-radio-button-wrapper-disabled):focus-within {
-                    box-shadow: none;
+            display         : inline-block;
+            background-color: transparent;
+            line-height     : normal;
+            border-bottom   : 0;
+            border          : 1px solid var(--tab-border-color, #22292c);
+            border-radius   : 1.02px;
+            border-right    : 0;
+            overflow        : hidden;
+            margin-top      : 0;
+
+            .ant-menu-item {
+                height       : 22px;
+                line-height  : 22px;
+                color        : #7a8a94;
+                border-bottom: 0;
+                border-right : 1px solid var(--tab-border-color, #22292c);
+                margin-top   : 0;
+                top          : 0;
+                padding      : 0 16px;
+
+                &-active,
+                &-selected {
+                    color           : var(--tab-checked-color, #0866b8);
+                    background-color: var(--tab-checked-bgcolor, #0e2f4c);
+                    border-bottom   : 0;
                 }
             }
         }

src/views/market/spot_trade/components/goods-chart/chart/index.vue

@@ -1,167 +1,133 @@
 <template>
-  <!-- 交易图表  -->
-  <div class="chart-container">
-    <div class="chart-content">
-      <div class="chart-content__header">
-        <a-radio-group class="chart-content__tabs"
-                       v-model:value="activeCycleType">
-          <template v-for="item in chartType"
-                    :key="item.type">
-            <a-radio-button :value="item.type">{{ item.name }}</a-radio-button>
-          </template>
-        </a-radio-group>
-        <a-radio-group class="chart-content__tabs"
-                       v-model:value="activeSeriesType"
-                       v-show="activeCycleType !== CycleType.time">
-          <a-radio-button value="MACD">MACD</a-radio-button>
-          <a-radio-button value="VOL">VOL</a-radio-button>
-          <a-radio-button value="KDJ">KDJ</a-radio-button>
-          <a-radio-button value="CCI">CCI</a-radio-button>
-        </a-radio-group>
-      </div>
-      <echart-time class="chart-content__main"
-                   :quote-data="selectedRow"
-                   v-if="activeCycleType === CycleType.time"></echart-time>
-      <echart-kline class="chart-content__main"
-                    :quote-data="selectedRow"
-                    :cycle-type="activeCycleType"
-                    :series-type="activeSeriesType"
-                    v-else></echart-kline>
-      <div class="chart-content__footer"></div>
-    </div>
-    <div class="chart-slider">
-      <div class="chart-slider__button"></div>
-    </div>
-    <div class="chart-tips">
-      <div>
-        <div class="chart-tips__nav">
-          <div class="content content--left">{{ selectedRow.goodscode }}</div>
-          <div class="content content--right">{{ selectedRow.goodsname }}</div>
-        </div>
-        <div class="chart-tips__last">
-          <div
-               :class="['content content--left', handleQuotePriceColor(selectedRow.last, selectedRow.presettle)]">
-            {{ selectedRow.last }}</div>
-          <div class="content content--right">
-            <span
-                  :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteChange(selectedRow) }}</span>
-            <span
-                  :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteAmplitude(selectedRow) }}</span>
-          </div>
+    <!-- 交易图表  -->
+    <div class="chart-container">
+        <div class="chart-content">
+            <div class="chart-content__header">
+                <a-menu class="chart-content__tabs" v-model:selectedKeys="activeCycleName" mode="horizontal" @click="changeCycleType">
+                    <a-menu-item v-for="item in chartType" :key="item.name">{{ item.label }}</a-menu-item>
+                </a-menu>
+                <a-menu class="chart-content__tabs" v-model:selectedKeys="activeSeriesType" mode="horizontal" v-show="activeCycleType !== CycleType.time">
+                    <a-menu-item key="MACD">MACD</a-menu-item>
+                    <a-menu-item key="VOL">VOL</a-menu-item>
+                    <a-menu-item key="KDJ">KDJ</a-menu-item>
+                    <a-menu-item key="CCI">CCI</a-menu-item>
+                </a-menu>
+            </div>
+            <echart-time class="chart-content__main" :quote-data="selectedRow" @change="getHistoryTikDatas" v-if="activeCycleType === CycleType.time"></echart-time>
+            <echart-kline class="chart-content__main" :quote-data="selectedRow" :cycle-type="activeCycleType" :series-type="activeSeriesType[0]" v-else></echart-kline>
+            <div class="chart-content__footer"></div>
         </div>
-        <div class="chart-tips__volume">
-          <a-row>
-            <a-col :span="8">卖一</a-col>
-            <a-col :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)"
-                   :span="8">{{ selectedRow.ask }}</a-col>
-            <a-col :class="handleQuotePriceColor(selectedRow.askvolume, selectedRow.presettle)"
-                   :span="8">{{ selectedRow.askvolume }}</a-col>
-          </a-row>
-          <a-row>
-            <a-col :span="8">买一</a-col>
-            <a-col :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)"
-                   :span="8">{{ selectedRow.bid }}</a-col>
-            <a-col :class="handleQuotePriceColor(selectedRow.bidvolume, selectedRow.presettle)"
-                   :span="8">{{ selectedRow.bidvolume }}</a-col>
-          </a-row>
+        <div class="chart-slider">
+            <div class="chart-slider__button"></div>
         </div>
-      </div>
-      <div class="chart-tips__tik">
-        <div class="row-header">
-          <h4>分时成交</h4>
-          <a-row>
-            <a-col :span="8">时间</a-col>
-            <a-col :span="8">价格</a-col>
-            <a-col :span="8">现量</a-col>
-          </a-row>
+        <div class="chart-tips">
+            <div>
+                <div class="chart-tips__nav">
+                    <div class="content content--left">{{ selectedRow.goodscode }}</div>
+                    <div class="content content--right">{{ selectedRow.goodsname }}</div>
+                </div>
+                <div class="chart-tips__last">
+                    <div :class="['content content--left', handleQuotePriceColor(selectedRow.last, selectedRow.presettle)]"> {{ quoteValue(selectedRow.last) }}</div>
+                    <div class="content content--right">
+                        <span :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteChange(selectedRow) }}</span>
+                        <span :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteAmplitude(selectedRow) }}</span>
+                    </div>
+                </div>
+                <div class="chart-tips__volume">
+                    <a-row>
+                        <a-col :span="8">卖一</a-col>
+                        <a-col :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)" :span="8">{{ quoteValue(selectedRow.ask) }}</a-col>
+                        <a-col :class="handleQuotePriceColor(selectedRow.askvolume, selectedRow.presettle)" :span="8">{{ quoteValue(selectedRow.askvolume) }}</a-col>
+                    </a-row>
+                    <a-row>
+                        <a-col :span="8">买一</a-col>
+                        <a-col :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)" :span="8">{{ quoteValue(selectedRow.bid) }}</a-col>
+                        <a-col :class="handleQuotePriceColor(selectedRow.bidvolume, selectedRow.presettle)" :span="8">{{ quoteValue(selectedRow.bidvolume) }}</a-col>
+                    </a-row>
+                </div>
+            </div>
+            <div class="chart-tips__tik">
+                <div class="row-header">
+                    <h4>分时成交</h4>
+                    <a-row>
+                        <a-col :span="8">时间</a-col>
+                        <a-col :span="8">价格</a-col>
+                        <a-col :span="8">现量</a-col>
+                    </a-row>
+                </div>
+                <div class="row-content">
+                    <a-row v-for="(item, index) in tradedList" :key="index + '11'">
+                        <a-col :span="8">{{ formatTime(item.TS, 'hm') }}</a-col>
+                        <a-col :class="handleQuotePriceColor(item.PE, selectedRow.presettle)" :span="8">{{ item.PE }}</a-col>
+                        <a-col :class="handleQuotePriceColor(item.Vol, selectedRow.presettle)" :span="8">{{ item.Vol }}</a-col>
+                    </a-row>
+                </div>
+            </div>
+            <div class="chart-tips__info">
+                <a-row>
+                    <a-col :span="4">最新</a-col>
+                    <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)" :span="8">{{ quoteValue(selectedRow.last) }}</a-col>
+                    <a-col :span="4">均价</a-col>
+                    <a-col :class="handleQuotePriceColor(selectedRow.averageprice, selectedRow.presettle)" :span="8">{{ quoteValue(selectedRow.averageprice) }}</a-col>
+                </a-row>
+                <a-row>
+                    <a-col :span="4">涨跌</a-col>
+                    <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)" :span="8">{{ quoteChange(selectedRow) }}</a-col>
+                    <a-col :span="4">今开</a-col>
+                    <a-col :class="handleQuotePriceColor(selectedRow.opened, selectedRow.presettle)" :span="8">{{ quoteValue(selectedRow.opened) }}</a-col>
+                </a-row>
+                <a-row>
+                    <a-col :span="4">涨幅</a-col>
+                    <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)" :span="8">{{ quoteAmplitude(selectedRow) }}</a-col>
+                    <a-col :span="4">最高</a-col>
+                    <a-col :class="handleQuotePriceColor(selectedRow.highest, selectedRow.presettle)" :span="8">{{ quoteValue(selectedRow.highest) }}</a-col>
+                </a-row>
+                <a-row>
+                    <a-col :span="4">总量</a-col>
+                    <a-col :span="8">{{ quoteValue(selectedRow.totalvolume) }}</a-col>
+                    <a-col :span="4">最低</a-col>
+                    <a-col :class="handleQuotePriceColor(selectedRow.lowest, selectedRow.presettle)" :span="8">{{ quoteValue(selectedRow.lowest) }}</a-col>
+                </a-row>
+                <a-row>
+                    <a-col :span="4">金额</a-col>
+                    <a-col :span="8" style="color: #0d96ff">{{ changeUnit(selectedRow.totalturnover) }}</a-col>
+                    <a-col :span="4">量比</a-col>
+                    <a-col :span="8">{{ '--' }}</a-col>
+                </a-row>
+                <a-row>
+                    <a-col :span="4">涨停</a-col>
+                    <a-col class="red1" :span="8">{{ quoteValue(selectedRow.limitup) }}</a-col>
+                    <a-col :span="4">跌停</a-col>
+                    <a-col class="green" :span="8">{{ quoteValue(selectedRow.limitdown) }}</a-col>
+                </a-row>
+                <a-row>
+                    <a-col :span="4">外盘</a-col>
+                    <a-col :span="8">{{ quoteValue(selectedRow.totalbidvolume) }}</a-col>
+                    <a-col :span="4">内盘</a-col>
+                    <a-col :span="8">{{ quoteValue(selectedRow.totalaskvolume) }}</a-col>
+                </a-row>
+                <a-row>
+                    <a-col :span="4">持仓</a-col>
+                    <a-col :span="8">{{ quoteValue(selectedRow.holdvolume) }}</a-col>
+                    <a-col :span="4">结算</a-col>
+                    <a-col :span="8">{{ quoteValue(selectedRow.settle) }}</a-col>
+                </a-row>
+                <a-row>
+                    <a-col :span="4">仓差</a-col>
+                    <a-col :span="8">{{ '--' }}</a-col>
+                    <a-col :span="4">昨结</a-col>
+                    <a-col :span="8">{{ quoteValue(selectedRow.presettle) }}</a-col>
+                </a-row>
+                <a-row>
+                    <a-col :span="4">日增</a-col>
+                    <a-col :span="8">{{ '--' }}</a-col>
+                    <a-col :span="4">开平</a-col>
+                    <a-col :span="8">{{ '--' }}</a-col>
+                </a-row>
+            </div>
+            <div @click="watchMore" class="watchMore">查看更多</div>
         </div>
-        <div class="row-content">
-          <a-row v-for="(item, index) in tradedList"
-                 :key="index + '11'">
-            <a-col :span="8">{{ formatTime(item.TS, 'hm') }}</a-col>
-            <a-col :class="handleQuotePriceColor(item.PE, selectedRow.presettle)"
-                   :span="8">{{ item.PE }}</a-col>
-            <a-col :class="handleQuotePriceColor(item.Vol, selectedRow.presettle)"
-                   :span="8">{{ item.Vol }}</a-col>
-          </a-row>
-        </div>
-      </div>
-      <div class="chart-tips__info">
-        <a-row>
-          <a-col :span="4">最新</a-col>
-          <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"
-                 :span="8">{{ selectedRow.last }}</a-col>
-          <a-col :span="4">均价</a-col>
-          <a-col :class="handleQuotePriceColor(selectedRow.averageprice, selectedRow.presettle)"
-                 :span="8">{{ selectedRow.averageprice }}</a-col>
-        </a-row>
-        <a-row>
-          <a-col :span="4">涨跌</a-col>
-          <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"
-                 :span="8">{{ quoteChange(selectedRow) }}</a-col>
-          <a-col :span="4">今开</a-col>
-          <a-col :class="handleQuotePriceColor(selectedRow.opened, selectedRow.presettle)"
-                 :span="8">{{ selectedRow.opened }}</a-col>
-        </a-row>
-        <a-row>
-          <a-col :span="4">涨幅</a-col>
-          <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"
-                 :span="8">{{ quoteAmplitude(selectedRow) }}</a-col>
-          <a-col :span="4">最高</a-col>
-          <a-col :class="handleQuotePriceColor(selectedRow.highest, selectedRow.presettle)"
-                 :span="8">{{ selectedRow.highest }}</a-col>
-        </a-row>
-        <a-row>
-          <a-col :span="4">总量</a-col>
-          <a-col :span="8">{{ selectedRow.totalvolume }}</a-col>
-          <a-col :span="4">最低</a-col>
-          <a-col :class="handleQuotePriceColor(selectedRow.lowest, selectedRow.presettle)"
-                 :span="8">{{ selectedRow.lowest }}</a-col>
-        </a-row>
-        <a-row>
-          <a-col :span="4">金额</a-col>
-          <a-col :span="8"
-                 style="color: #0d96ff">{{ changeUnit(selectedRow.totalturnover) }}</a-col>
-          <a-col :span="4">量比</a-col>
-          <a-col :span="8">{{ '--' }}</a-col>
-        </a-row>
-        <a-row>
-          <a-col :span="4">涨停</a-col>
-          <a-col class="red1"
-                 :span="8">{{ selectedRow.limitup }}</a-col>
-          <a-col :span="4">跌停</a-col>
-          <a-col class="green"
-                 :span="8">{{ selectedRow.limitdown }}</a-col>
-        </a-row>
-        <a-row>
-          <a-col :span="4">外盘</a-col>
-          <a-col :span="8">{{ selectedRow.totalbidvolume }}</a-col>
-          <a-col :span="4">内盘</a-col>
-          <a-col :span="8">{{ selectedRow.totalaskvolume }}</a-col>
-        </a-row>
-        <a-row>
-          <a-col :span="4">持仓</a-col>
-          <a-col :span="8">{{ selectedRow.holdvolume }}</a-col>
-          <a-col :span="4">结算</a-col>
-          <a-col :span="8">{{ selectedRow.settle }}</a-col>
-        </a-row>
-        <a-row>
-          <a-col :span="4">仓差</a-col>
-          <a-col :span="8">{{ '--' }}</a-col>
-          <a-col :span="4">昨结</a-col>
-          <a-col :span="8">{{ selectedRow.presettle }}</a-col>
-        </a-row>
-        <a-row>
-          <a-col :span="4">日增</a-col>
-          <a-col :span="8">{{ '--' }}</a-col>
-          <a-col :span="4">开平</a-col>
-          <a-col :span="8">{{ '--' }}</a-col>
-        </a-row>
-      </div>
-      <div @click="watchMore"
-           class="watchMore">查看更多</div>
     </div>
-  </div>
 </template>
 
 <script lang="ts">
@@ -174,8 +140,9 @@ import { formatTime } from '@/common/methods';
 import { changeUnit } from '@/utils/qt/common';
 import { ComponentType } from '@/views/market/spot_trade/spot_trade_order_transaction/setup';
 import { EchartKline, EchartTime } from '@/common/components/echart';
-import { handleQuotePriceColor, quoteChange, quoteAmplitude } from '@/common/setup/table/tableQuote';
+import { handleQuotePriceColor, quoteChange, quoteValue, quoteAmplitude } from '@/common/setup/table/tableQuote';
 import { useQueryData } from '@/common/setup/request';
+import moment from 'moment';
 
 export default defineComponent({
     emits: ['cancel', 'update'],
@@ -191,53 +158,69 @@ export default defineComponent({
         },
     },
     setup(props, context) {
-        const { visible, cancel } = _closeModal(context);
-        const activeCycleType = ref<CycleType>(CycleType.time);
-        const activeSeriesType = ref('MACD');
+        const { visible, cancel } = _closeModal(context),
+            activeCycleName = ref<string[]>(['time']),
+            activeCycleType = ref<CycleType>(CycleType.time),
+            activeSeriesType = ref<string[]>(['MACD']),
+            tradedList = ref<QueryHistoryTikDatasRsp[]>([]);
 
         function watchMore() {
             context.emit('update', ComponentType.marketContent);
         }
-        const { goodscode } = props.selectedRow;
 
         // 周期类型
         const chartType = [
-            { name: '分时', type: CycleType.time },
-            { name: '1分钟', type: CycleType.minutes },
-            { name: '5分钟', type: CycleType.minutes5 },
-            { name: '30分钟', type: CycleType.minutes30 },
-            { name: '60分钟', type: CycleType.minutes60 },
-            { name: '4小时', type: CycleType.Hours4 },
-            { name: '日 K', type: CycleType.days },
+            { label: '分时', name: 'time', value: CycleType.time },
+            { label: '1分钟', name: 'minutes', value: CycleType.minutes },
+            { label: '5分钟', name: 'minutes5', value: CycleType.minutes5 },
+            { label: '30分钟', name: 'minutes30', value: CycleType.minutes30 },
+            { label: '60分钟', name: 'minutes60', value: CycleType.minutes60 },
+            { label: '4小时', name: 'Hours4', value: CycleType.Hours4 },
+            { label: '日 K', name: 'days', value: CycleType.days },
         ];
 
+        // 切换图表周期类型
+        const changeCycleType = (e: { key: string }) => {
+            activeCycleType.value = chartType.find((item) => item.name === e.key)!.value;
+        };
+
         // Tik列表
-        const { list: tradedList } = useQueryData<QueryHistoryTikDatasRsp>(QueryHistoryTikDatas, {
-            goodsCode: goodscode,
-            count: 20,
-        });
+        const getHistoryTikDatas = (endTime: string) => {
+            if (!tradedList.value.length) {
+                const param = {
+                    goodsCode: props.selectedRow.goodscode,
+                    count: 20,
+                    endTime: moment(endTime).format('YYYY-MM-DD HH:mm:ss'),
+                };
+                QueryHistoryTikDatas(param).then((res) => {
+                    tradedList.value = res;
+                });
+            }
+        };
 
         // 监听行情变化刷Tik列表
         watch(
             () => props.selectedRow.last,
             () => {
-                // 移除列表最后一条记录
-                tradedList.value.pop();
-                // 向列表开头添加新纪录
-                tradedList.value.unshift({
-                    AV: 0,
-                    Ask: 0,
-                    BV: 0,
-                    Bid: 0,
-                    HI: 0,
-                    HV: 0,
-                    PE: props.selectedRow.last,
-                    TDR: 0,
-                    TK: 0,
-                    TS: props.selectedRow.lasttime,
-                    TT: 0,
-                    Vol: props.selectedRow.lastvolume,
-                });
+                if (tradedList.value.length) {
+                    // 移除列表最后一条记录
+                    tradedList.value.pop();
+                    // 向列表开头添加新纪录
+                    tradedList.value.unshift({
+                        AV: 0,
+                        Ask: 0,
+                        BV: 0,
+                        Bid: 0,
+                        HI: 0,
+                        HV: 0,
+                        PE: props.selectedRow.last,
+                        TDR: 0,
+                        TK: 0,
+                        TS: props.selectedRow.lasttime,
+                        TT: 0,
+                        Vol: props.selectedRow.lastvolume,
+                    });
+                }
             }
         );
 
@@ -247,14 +230,18 @@ export default defineComponent({
             chartType,
             tradedList,
             CycleType,
+            activeCycleName,
             activeCycleType,
             activeSeriesType,
             changeUnit,
             watchMore,
             formatTime,
             quoteChange,
+            quoteValue,
             quoteAmplitude,
             handleQuotePriceColor,
+            changeCycleType,
+            getHistoryTikDatas,
         };
     },
 });