update

public/config/app.config.json

@@ -1,3 +1,3 @@
 {
-    "apiUrl": "http://103.40.249.123:28280/cfg?key=mtp_20"
+    "apiUrl": "http://192.168.31.139:8080/cfg?key=test_139"
 }

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

@@ -48,7 +48,7 @@ export default defineComponent({
             rawData.forEach((item, index) => {
                 const { o, c, h, l, ts, tv } = item;
                 datas.push([o, c, l, h]);
-                times.push(moment(ts).format('YYYY/MM/DD HH:mm:ss'));
+                times.push(moment(ts).format('YYYY-MM-DD HH:mm:ss'));
                 volume.push(tv);
                 if (!item.f) historyIndexs.push(index); // 排除补充数据
             });
@@ -205,7 +205,7 @@ export default defineComponent({
 
         // 更新图表K线数据
         const updateChartData = () => {
-            const { datas, times, volume, kdj } = chartData,
+            const { datas, times, volume } = chartData,
                 lastIndex = datas.length - 1, // 历史行情最后索引位置
                 lastTime = moment(times[times.length - 1]), // 历史行情最后时间
                 newTime = moment(props.quoteData.lasttime), // 实时行情最新时间
@@ -238,7 +238,7 @@ export default defineComponent({
             // 判断时间差是否大于周期时间
             if (diffTime > cycleMilliseconds) {
                 lastTime.add(cycleMilliseconds, 'ms');
-                times.push(lastTime.format('YYYY/MM/DD HH:mm:ss')); // 添加历史行情时间
+                times.push(lastTime.format('YYYY-MM-DD HH:mm:ss')); // 添加历史行情时间
                 datas.push([newPrice, newPrice, newPrice, newPrice]); // 添加历史行情数据
                 volume.push(0);
                 historyIndexs.push(lastIndex + 1); // 添加历史行情索引

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

@@ -38,13 +38,15 @@ export default defineComponent({
                 yestclose = rawData.preSettle,
                 decimal = rawData.decimalPlace;
 
+            // 历史行情日期
             rawData.historyDatas.forEach((item, index) => {
                 const { c, ts } = item;
                 datas.push(c);
-                times.push(moment(ts).format('YYYY/MM/DD HH:mm:ss'));
+                times.push(moment(ts).format('YYYY-MM-DD HH:mm:ss'));
                 if (!item.f) historyIndexs.push(index);
             });
 
+            // 时间轴(开盘交易时间)
             rawData.runSteps.forEach((item) => {
                 const { start, end } = item;
                 const rangeTime = getRangeTime(start, end, 'HH:mm', 'm');
@@ -138,19 +140,20 @@ export default defineComponent({
             // 判断时间差是否大于周期时间
             if (diffTime > cycleMilliseconds) {
                 lastTime.add(cycleMilliseconds, 'ms');
-                times.push(lastTime.format('YYYY/MM/DD HH:mm:ss')); // 添加历史行情时间
+                times.push(lastTime.format('YYYY-MM-DD HH:mm:ss')); // 添加历史行情时间
                 datas.push(newPrice); // 添加历史行情数据
                 historyIndexs.push(lastIndex + 1); // 添加历史行情索引
             } else {
                 datas[lastIndex] = newPrice; // 更新历史行情数据
             }
 
+            const { min, max } = calcDataLine(datas, chartData.value.yestclose);
+            chartData.value.ma5 = calcMA(datas, 5, chartData.value.decimal);
+            chartData.value.min = min;
+            chartData.value.max = max;
+
             // 延迟图表更新，减少卡顿
             debounce(() => {
-                const { min, max } = calcDataLine(datas, chartData.value.yestclose);
-                chartData.value.ma5 = calcMA(datas, 5, chartData.value.decimal);
-                chartData.value.min = min;
-                chartData.value.max = max;
                 updateOptions();
             }, 1000);
         };

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

@@ -49,7 +49,7 @@ export function handleEchart() {
         ma5: []
     });
 
-    // 计算涨跌幅百分比
+    // 计算涨跌幅百分比，涨跌幅=(今日收盘价-昨日收盘价)/昨日收盘价*100%
     const calcRatio = (val: number) => {
         const result = (Number(val) - chartData.value.yestclose) / chartData.value.yestclose * 100;
         return toDecimalFull(result) + '%';

src/views/market/spot_trade/spot_trade_reference_market/components/chart/index.less

@@ -10,6 +10,8 @@
         --row-border-color   : #dae5ec;
         --row-title-color    : #acb8c0;
         --row-content-color  : #3c454b;
+        --tik-title-bgcolor  : #ECF2F5;
+        --tik-title-color    : #7A8A94;
     }
 
     display         : flex;
@@ -87,11 +89,6 @@
         width         : 300px;
         height        : 100%;
 
-        &__tik {
-            flex      : 1;
-            overflow-y: auto;
-        }
-
         &__nav {
             display        : flex;
             justify-content: center;
@@ -154,12 +151,60 @@
             }
         }
 
+        &__tik {
+            flex          : 1;
+            display       : flex;
+            flex-direction: column;
+            overflow-y    : auto;
+
+            .ant-row {
+                padding: 0 8px;
+
+                .ant-col {
+                    text-align: right;
+
+                    &:first-child {
+                        text-align: left;
+                    }
+                }
+            }
+
+            .row-header {
+                h4 {
+                    text-align      : left;
+                    line-height     : 30px;
+                    color           : var(--tik-title-color, #7A8A94);
+                    background-color: var(--tik-title-bgcolor, #171B1D);
+                    padding         : 0 8px;
+                }
+
+                .ant-row {
+                    .ant-col {
+                        color: var(--row-title-color, #3c454b);
+                    }
+                }
+            }
+
+            .row-content {
+                flex      : 1;
+                overflow-y: auto;
+
+                .ant-row {
+                    margin-top: 4px;
+
+                    .ant-col {
+                        color: var(--row-content-color, #ACB8C0);
+                    }
+                }
+            }
+        }
+
         &__info {
             border-top: 1px solid var(--row-border-color, #171B1D);
             padding   : 8px 8px 8px 0;
 
             .ant-row {
-                margin-top: 8px;
+                margin-top: 4px;
 
                 .ant-col {
                     text-align: left;

src/views/market/spot_trade/spot_trade_reference_market/components/chart/index.vue

@@ -8,7 +8,7 @@
                         <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-if="activeCycleType !== CycleType.time">
+                <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>
@@ -17,7 +17,6 @@
             </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>
-            <!-- <component :is="componentId" v-if="componentId" :quote-data="selectedRow"></component> -->
             <div class="chart-content__footer"></div>
         </div>
         <div class="chart-slider">
@@ -50,11 +49,20 @@
                 </div>
             </div>
             <div class="chart-tips__tik">
-                <div class="title">分时成交</div>
-                <div class="chartRow" v-for="(item, index) in tradedList" :key="index + '11'">
-                    <div class="left">{{ formatTime(item.TS, 'hm') }}</div>
-                    <div class="middle">{{ item.PE }}</div>
-                    <div class="right">{{ item.Vol }}</div>
+                <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">
@@ -109,8 +117,8 @@
                 <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-col :span="4">昨结</a-col>
+                    <a-col :span="8">{{ selectedRow.presettle }}</a-col>
                 </a-row>
                 <a-row>
                     <a-col :span="4">日增</a-col>
@@ -127,8 +135,8 @@
 <script lang="ts">
 import { defineComponent } from '@/common/export/commonTable';
 import { _closeModal } from '@/common/setup/modal/modal';
-import { PropType, ref } from 'vue';
-import { QueryQuoteDayRsp, CycleType } from '@/services/go/quote/interface';
+import { PropType, ref, watch } from 'vue';
+import { QueryQuoteDayRsp, QueryHistoryTikDatasRsp, CycleType } from '@/services/go/quote/interface';
 import { QueryHistoryTikDatas } from '@/services/go/quote';
 import { formatTime } from '@/common/methods';
 import { changeUnit } from '@/utils/qt/common';
@@ -171,11 +179,36 @@ export default defineComponent({
             { name: '日 K', type: CycleType.days },
         ];
 
-        const { list: tradedList } = useQueryData(QueryHistoryTikDatas, {
+        // Tik列表
+        const { list: tradedList } = useQueryData<QueryHistoryTikDatasRsp>(QueryHistoryTikDatas, {
             goodsCode: goodscode,
-            count: 10,
+            count: 20,
         });
 
+        // 监听行情变化刷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,
+                });
+            }
+        );
+
         return {
             cancel,
             visible,

src/views/market/spot_trade/spot_trade_reference_market/index.vue

@@ -1,63 +1,50 @@
 <template>
-  <!--参考行情-->
-  <div class="topTableHeight">
-    <a-table :columns="columns"
-             :class="['srcollYTable', isBottom ? '' : 'srcollYTableNoBottom', goodsList.length ? 'noPlaceHolder' : 'hasPlaceHolder']"
-             :scroll="{ x: '100%', y: isBottom ? 'calc(100vh - 378px)' :  'calc(100vh - 138px)'}"
-             :pagination="false"
-             :loading="loading"
-             :expandedRowKeys="expandedRowKeys"
-             :customRow="Rowclick"
-             rowKey="goodscode"
-             ref="tableRef"
-             :data-source="goodsList">
-      <template #totalturnover="{ text }">
-        <span>{{changeUnit(text)}}</span>
-      </template>
-      <!-- 涨跌 -->
-      <template #change="{ record }">
-        <span>{{quoteChange(record, record.decimalplace)}}</span>
-      </template>
-      <!-- 幅度 -->
-      <template #amplitude="{ record }">
-        <span>{{quoteAmplitude(record, record.decimalplace)}}</span>
-      </template>
-      <!-- 振幅 -->
-      <template #vibration="{ record }">
-        <span>{{quoteAmplituOfVibration(record, record.decimalplace)}}</span>
-      </template>
-      <template #index="{ index }">
-        <span>{{index + 1}}</span>
-      </template>
-      <!-- 买价 -->
-      <template #bid="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
-      </template>
-      <!-- 卖价 -->
-      <template #ask="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
-      </template>
-      <!-- 最新价 -->
-      <template #last="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
-      </template>
-      <!-- 最低价 -->
-      <template #lowest="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
-      </template>
-      <!-- 最高价 -->
-      <template #highest="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
-      </template>
-    </a-table>
-    <!-- 右键 -->
-    <!-- <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="firstBtn"></contextMenu> -->
-    <component :is="componentId"
-               v-if="componentId"
-               :enumName="name"
-               :selectedRow="selectedRow"
-               @cancel="closeComponent"></component>
-  </div>
+    <!--参考行情-->
+    <div class="topTableHeight">
+        <a-table :columns="columns" :class="['srcollYTable', isBottom ? '' : 'srcollYTableNoBottom', goodsList.length ? 'noPlaceHolder' : 'hasPlaceHolder']" :scroll="{ x: '100%', y: isBottom ? 'calc(100vh - 378px)' : 'calc(100vh - 138px)' }" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" rowKey="goodscode" ref="tableRef" :data-source="goodsList">
+            <template #totalturnover="{ text }">
+                <span>{{ changeUnit(text) }}</span>
+            </template>
+            <!-- 涨跌 -->
+            <template #change="{ record }">
+                <span>{{ quoteChange(record, record.decimalplace) }}</span>
+            </template>
+            <!-- 幅度 -->
+            <template #amplitude="{ record }">
+                <span>{{ quoteAmplitude(record, record.decimalplace) }}</span>
+            </template>
+            <!-- 振幅 -->
+            <template #vibration="{ record }">
+                <span>{{ quoteAmplituOfVibration(record, record.decimalplace) }}</span>
+            </template>
+            <template #index="{ index }">
+                <span>{{ index + 1 }}</span>
+            </template>
+            <!-- 买价 -->
+            <template #bid="{ text, record }">
+                <span :class="handleQuotePriceColor(text, record.presettle)">{{ text }}</span>
+            </template>
+            <!-- 卖价 -->
+            <template #ask="{ text, record }">
+                <span :class="handleQuotePriceColor(text, record.presettle)">{{ text }}</span>
+            </template>
+            <!-- 最新价 -->
+            <template #last="{ text, record }">
+                <span :class="handleQuotePriceColor(text, record.presettle)">{{ text }}</span>
+            </template>
+            <!-- 最低价 -->
+            <template #lowest="{ text, record }">
+                <span :class="handleQuotePriceColor(text, record.presettle)">{{ text }}</span>
+            </template>
+            <!-- 最高价 -->
+            <template #highest="{ text, record }">
+                <span :class="handleQuotePriceColor(text, record.presettle)">{{ text }}</span>
+            </template>
+        </a-table>
+        <!-- 右键 -->
+        <!-- <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="firstBtn"></contextMenu> -->
+        <component :is="componentId" v-if="componentId" :enumName="name" :selectedRow="selectedRow" @cancel="closeComponent"></component>
+    </div>
 </template>
 
 <script lang="ts">