update

src/assets/styles/mixin.less

@@ -550,12 +550,12 @@
                 box-shadow: 0px 1px 0px 0px @m-black17;
 
                 th {
-                    line-height   : 36px;
+                    line-height   : 28px;
                     background    : @m-grey11;
                     padding-top   : 0;
                     padding-bottom: 0;
                     color         : @m-grey2;
-                    font-size     : 16px;
+                    font-size     : 14px;
                     border-right  : 1px solid @m-grey20;
                     border-bottom : 1px solid @m-grey20;
                     white-space   : nowrap;
@@ -3595,7 +3595,7 @@ input:-internal-autofill-selected {
         display: block;
 
         .anticon {
-            width      : 15px;
+            width      : 32px;
             height     : 32px;
             line-height: 37px;
             font-size  : 15px;
@@ -3605,15 +3605,15 @@ input:-internal-autofill-selected {
 
         .anticon-minus {
             position: absolute;
-            top     : 0px;
-            left    : 9px;
+            top     : 0;
+            left    : 0;
             z-index : 1;
         }
 
         .anticon-plus {
             position: absolute;
-            top     : 0px;
-            right   : 9px;
+            top     : 0;
+            right   : 0;
             z-index : 1;
         }
 

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

@@ -70,47 +70,47 @@ export function useEchart(el: HTMLElement) {
 
     // 键盘上下左右键控制图表
     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);
-                }
-            }
-        });
+        // 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 = () => {

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

@@ -1,5 +1,5 @@
 <template>
-    <echart-base :options="[options]" :empty="isEmpty" v-model:loading="loading"></echart-base>
+  <echart-base :options="[options]" :empty="isEmpty" v-model:loading="loading"></echart-base>
 </template>
 
 <script lang="ts">
@@ -83,9 +83,9 @@ export default defineComponent({
 
             if (source.length >= count) {
                 // 均线起始位置
-                const startIndex = historyIndexs[count - 1] ?? count;
+                const startIndex = historyIndexs[count - 1];
                 for (let i = 0; i < source.length; i++) {
-                    if (i > startIndex) {
+                    if (startIndex !== undefined && i > startIndex) {
                         const j = historyIndexs.findIndex((val) => val === i);
                         // 判断是否补充数据
                         if (j === -1) {

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

@@ -1,5 +1,5 @@
 <template>
-    <echart-base :options="[options]" :empty="isEmpty" v-model:loading="loading"></echart-base>
+  <echart-base :options="[options]" :empty="isEmpty" v-model:loading="loading"></echart-base>
 </template>
 
 <script lang="ts">
@@ -14,6 +14,7 @@ import moment from 'moment';
 
 export default defineComponent({
     name: 'EchartTime',
+    emits: ['change'],
     components: {
         EchartBase,
     },
@@ -24,7 +25,7 @@ export default defineComponent({
             required: true,
         },
     },
-    setup(props) {
+    setup(props, { emit }) {
         const loading = ref(false);
         const isEmpty = ref(false);
         const historyIndexs: number[] = []; // 行情历史数据中所有非补充数据的索引位置(用于计算均线)
@@ -104,9 +105,9 @@ export default defineComponent({
             const result: string[] = [];
             if (data.length >= count) {
                 // 均线起始位置
-                const startIndex = historyIndexs[count - 1] ?? count;
+                const startIndex = historyIndexs[count - 1];
                 for (let i = 0; i < data.length; i++) {
-                    if (i < startIndex) {
+                    if (startIndex === undefined || i < startIndex) {
                         result.push('-');
                     } else {
                         const j = historyIndexs.findIndex((val) => val === i);
@@ -170,6 +171,8 @@ export default defineComponent({
                 if (res.historyDatas.length) {
                     isEmpty.value = false;
                     handleData(res);
+                    // 调用父级函数查询tik数据 (不合理的逻辑处理，待优化)
+                    emit('change', res.startTime, res.endTime);
                 } else {
                     isEmpty.value = true;
                 }

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

@@ -55,12 +55,17 @@ export function handleEchart() {
 
     // 计算涨跌幅百分比，涨跌幅=(今日收盘价-昨日收盘价)/昨日收盘价*100%
     const calcRatio = (val: number) => {
+        const yestclose = chartData.value.yestclose;
         const num = Number(val);
+
         if (isNaN(num)) {
             return "-";
         }
-        const result = (num - chartData.value.yestclose) / chartData.value.yestclose * 100;
-        return toDecimalFull(result) + '%';
+        if (yestclose > 0) {
+            const result = (num - yestclose) / yestclose * 100;
+            return toDecimalFull(result) + '%';
+        }
+        return '0%';
     }
 
     // 初始化图表配置

src/common/components/thirdMenu/index.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, PropType, watchEffect } from 'vue';
+import { defineComponent, ref, PropType } from 'vue';
 
 interface Key {
     [propName: string]: string;
@@ -34,10 +34,8 @@ export default defineComponent({
     },
     components: {},
     setup(props, context) {
-        const current = ref<string>('1');
-        watchEffect(() => {
-            current.value = props.selectedKey.toString();
-        });
+        const current = ref<string>(props.selectedKey.toString());
+
         function menuClick(value: string) {
             const index = +value;
             const item = props.list[index];

src/common/setup/form/validateAction.ts

@@ -1,6 +1,5 @@
 import { ValidateErrorEntity } from "ant-design-vue/lib/form/interface";
 import { Ref, toRaw, UnwrapRef } from "vue";
-let timer: number | null = null
 /**
  * 表单验证
  * @param formRef
@@ -12,18 +11,7 @@ export function validateAction<T>(formRef: Ref<any>, formState: UnwrapRef<T>): P
         .validate()
         .then(() => {
             const param = toRaw(formState);
-            console.log('请求参数：', param);
-            if (timer) {
-                // 节流 2秒
-                const now = new Date().getTime()
-                if (now - timer > 2 * 1000) {
-                    timer = new Date().getTime()
-                    return param
-                }
-            } else {
-                timer = new Date().getTime()
-                return param
-            }
+            return param;
         })
         .catch((error: ValidateErrorEntity<T>) => {
             console.error('表单验证错误：', error);

src/common/setup/table/interface.ts

@@ -1,37 +1,6 @@
 import { EnumRouterName } from "@/common/constants/enumRouterName";
 import { ColumnType, TableKey } from "@/common/methods/table/interface";
-import { OperationTabMenu, OperationTabMenuAuth } from "@/services/go/commonService/interface";
-import { Ref, UnwrapRef } from 'vue';
-
-/**
- * 表格详情
- */
-interface QuoteDetail {
-    goodsid: number; // 商品ID
-    goodscode: string; // 商品代码
-    goodsname: string; // 商品名称
-    decimalplace: number;
-    marketid: number; // 市场ID
-    last?: Ref; // 最新价
-    bid?: Ref; // 买价
-    ask?: Ref; // 卖价
-    bidvolume?: Ref; // 买量
-    askvolume?: Ref; // 卖量
-    totalvolume?: Ref; // 总量
-    lastvolume?: Ref; // 现量
-    holdvolume?: Ref; // 持仓量
-    holdincrement?: Ref; // 日增
-    presettle?: Ref; // 昨结价
-    totalturnover?: Ref; // 金额
-    opened?: Ref; // 开盘
-    highest?: Ref; // 最高
-    lowest?: Ref; // 最低
-}
-
-/**
- * 表格行情
- */
-export type TableQuote = UnwrapRef<QuoteDetail>;
+import { OperationTabMenuAuth } from "@/services/go/commonService/interface";
 
 export interface TableEventCB {
     clickCB?: Function; // 单击事件回调函数

src/common/setup/table/tableQuote.ts

@@ -5,7 +5,96 @@ import { v4 } from 'uuid';
 import { onBeforeUnmount, onMounted, Ref, ref, watchEffect } from "vue";
 
 /**
- * 处理行情按需订阅
+ * 订阅商品行情
+ * @param goodsCodes 需要订阅的商品 code
+ * @param itemTableHeight 表格每一行的高度
+ * @param selector 当前的滚动区域的选择器
+ */
+export function subcriteGoodsQuote(goodsCodes: string[], itemTableHeight = 31, selector = '.ant-table-body') {
+    const beforeScrollTop = ref<number>(0)
+    const uuid = v4();
+    onMounted(() => {
+        listenSrcoll(document.querySelector(selector)!)
+    });
+    onBeforeUnmount(() => {
+        stopSubcribe()
+    })
+
+    // 第一次自动订阅当前可视区域的数据
+    const stop = watchEffect(() => {
+        const len = goodsCodes.length
+        if (len) {
+            const end = len > 16 ? 16 : len;
+            subscribeAction(0, end)
+        }
+    })
+    // 停止订阅
+    function stopSubcribe() {
+        removeSubscribeQuotation(uuid);
+        TimerUtils.clearTimeout('subscribeQuote')
+        stop()
+    }
+    function listenSrcoll(ele: Element) {
+        ele.addEventListener('scroll', (event: any) => {
+            stop && stop()
+            debounceSroll(event)
+        }, true)
+    }
+    // 判断滚动方向
+    function srollDrection(event: any) {
+        const { scrollTop, offsetHeight } = event.target
+        const diffSrollTop = scrollTop - beforeScrollTop.value
+        if (diffSrollTop === 0) {
+            // 横向滚动
+            return
+        } else if (diffSrollTop > 0) {
+            // 向下滚动
+            caclcuteSubcribeNum(scrollTop, offsetHeight)
+        } else {
+            // 向上滚动
+            caclcuteSubcribeNum(scrollTop, offsetHeight)
+        }
+        beforeScrollTop.value = scrollTop
+    }
+    /**
+     *
+     * @param scrollTop 当前滚动条所处的位置
+     * @param offsetHeight 当前滚动范围的可视区域的高度
+     */
+    function caclcuteSubcribeNum(scrollTop: number, offsetHeight: number) {
+        // 可视区域的列表行数
+        const rowNum = Math.ceil(offsetHeight / itemTableHeight) - 1;
+        const tableIndex = scrollTop < itemTableHeight ? 0 : Math.ceil(scrollTop / itemTableHeight)
+        // 开始订阅
+        subscribeAction(tableIndex, tableIndex + rowNum)
+    }
+    // 防抖
+    function debounceSroll(event: any) {
+        TimerUtils.clearTimeout('subscribeQuote')
+        TimerUtils.setTimeout(() => {
+            srollDrection(event)
+        }, 200, 'subscribeQuote')
+    }
+    // 开始订阅
+    function subscribeAction(start: number, end: number) {
+        removeSubscribeQuotation(uuid);
+        const result: Array<{ exchangeCode: 250, goodsCode: string, subState: 0 }> = []
+        for (let i = start; i < end; i++) {
+            const code = goodsCodes[i]
+            result.push({
+                exchangeCode: 250,
+                goodsCode: code,
+                subState: 0
+            })
+        }
+        console.log('开始订阅', result)
+        addSubscribeQuotation(uuid, result);
+    }
+    return stopSubcribe
+}
+
+/**
+ * 处理行情按需订阅 ------------------------------------------------------------------------ 待废弃
  * @param tableList 全部表格数据
  * @param codeKey 需要订阅商品code对应的key
  * @param itemTableHeight 表格每一行的高度
@@ -82,12 +171,11 @@ export function handleSubcriteOnDemandQuote<T extends object>(tableList: Ref<T[]
         const result: Array<{ exchangeCode: 250, goodsCode: string, subState: 0 }> = []
         for (let i = start; i < end; i++) {
             const obj = tableList.value[i] as unknown as any
-            if (Object.prototype.hasOwnProperty.call(obj, codeKey)) {
+            if (obj && Reflect.has(obj, codeKey)) {
                 result.push({ exchangeCode: 250, goodsCode: obj[codeKey], subState: 0 })
             } else {
                 console.warn(`订阅商品的code对应的key${codeKey}不存在，请手动传入！`)
             }
-
         }
         console.log('开始订阅', result)
         addSubscribeQuotation(uuid, result);
@@ -180,4 +268,9 @@ export function quoteAmplituOfVibration(record: QueryQuoteDayRsp, decimalplace =
         }
     }
     return result
+}
+
+// 处理 空值  或者 0的时候，显示 --  的情况，
+export function handleNoneValue(value: number | string) {
+    return value ? value : '--'
 }

src/services/bus/goods.ts

@@ -1,8 +1,8 @@
 import { TradeMode } from '@/common/constants/enumCommon';
 import { initData } from '@/common/methods';
 import APP from '@/services';
-import { Ref, ref } from 'vue';
-import { Goods } from '../go/ermcp/goodsInfo/interface';
+import { Ref, ref, UnwrapRef, toRefs } from 'vue';
+import { Goods, GoodsQuote } from '../go/ermcp/goodsInfo/interface';
 import { QueryQuoteDayRsp } from '../go/quote/interface';
 import { Goodsgroup, Market } from '../go/useInfo/interface';
 import { getMarketByTradeMode } from './market';
@@ -55,7 +55,7 @@ export function getQutoGoodsByTradeMode(trademode: TradeMode) {
 }
 
 export function getGoodsByCode(goodsCode: string): Goods | undefined {
-    return getGoodsList().find(e => e.goodscode === goodsCode)
+    return getGoodsList().find(e => e.goodscode.toLowerCase() === goodsCode.toLowerCase())
 }
 
 // 获取全部盘面信息
@@ -132,4 +132,75 @@ export function getGoodsAgreeunitByGoodsCode(goodscode: string): number {
 export function findGoodsTradeModeById(goodsid: number) {
     const marketid = getGoodsById(goodsid)!.marketid
     return APP.get('markets').find((el: Market) => el.marketid === marketid).trademode
+}
+
+// 获取商品行情列表
+export function getGoodsQuoteList(exchangeId?: number): GoodsQuote[] {
+    let goodsList: Goods[] = [];
+    const goodsGroups = getAllGoodsGroups();
+
+    if (exchangeId) {
+        // 根据交易所 id 查找对应的商品组
+        const exchangeGoodsGroups = goodsGroups.filter(e => e.exexchangeid === exchangeId).map(el => el.goodsgroupid);
+        // 过滤出对应的商品
+        goodsList = getGoodsList().filter(e => e.goodsstatus === 3 && exchangeGoodsGroups.includes(e.goodsgroupid));
+    } else {
+        goodsList = getGoodsList();
+    }
+
+    return goodsList.map((el) => {
+        const item: GoodsQuote = {
+            goodsid: el.goodsid,
+            goodscode: el.goodscode,
+            goodsname: el.goodsname,
+            decimalplace: el.decimalplace,
+            marketid: el.marketid,
+            quoteminunit: el.quoteminunit,
+            outerdealmode: el.outerdealmode,
+            last: 0, // 最新价
+            bid: 0,// 买价
+            ask: 0, // 卖价
+            bidvolume: 0, // 买量
+            askvolume: 0, // 卖量
+            totalvolume: 0, // 总量
+            lastvolume: 0, // 现量
+            holdvolume: 0, // 持仓量
+            holdincrement: 0, // 日增
+            presettle: 0, // 昨结价
+            totalturnover: 0, // 金额
+            opened: 0, // 开盘
+            highest: 0, // 最高
+            lowest: 0, // 最低
+            limitup: 0,
+            limitdown: 0,
+            totalbidvolume: 0,
+            totalaskvolume: 0,
+            settle: 0,
+        }
+        // 找出已订阅的盘面数据
+        const quote = getQuoteDayInfoByCode(el.goodscode);
+        if (quote) {
+            const refs = toRefs(quote)
+            item.last = refs.last; // 最新价
+            item.bid = refs.bid; // 买价
+            item.ask = refs.ask; // 卖价
+            item.bidvolume = refs.bidvolume; // 买量
+            item.askvolume = refs.askvolume; // 卖量
+            item.totalvolume = refs.totalvolume; // 总量
+            item.lastvolume = refs.lastvolume; // 现量
+            item.holdvolume = refs.holdvolume; // 持仓量
+            item.holdincrement = refs.holdincrement; // 日增
+            item.presettle = refs.presettle; // 昨结价
+            item.totalturnover = refs.totalturnover; // 金额
+            item.opened = refs.opened; // 开盘
+            item.highest = refs.highest; // 最高
+            item.lowest = refs.lowest; // 最低
+            item.limitup = refs.limitup;
+            item.limitdown = refs.limitdown;
+            item.totalbidvolume = refs.totalbidvolume;
+            item.totalaskvolume = refs.totalaskvolume;
+            item.settle = refs.settle;
+        }
+        return item;
+    })
 }

src/services/go/ermcp/account/interface.ts

@@ -219,6 +219,7 @@ export interface ErmcpTaAccountInfo {
     wrstandardcode: string;//品类代码
     wrstandardid: number;//现货商品ID
     wrstandardname: string;//品类名称
+    ismain: number;//是否母账号 0:不是母账户 1:是母账户
 }
 
 

src/services/go/ermcp/futures/interface.ts

@@ -18,6 +18,8 @@ export interface QueryErmcpTradePositionRsp {
     decimalplace: number; // 报价小数位
     enableqty: number; // 可用（总仓可用）
     exexchangename: string; // 外部交易所名称
+    exexchangecode: string; // 外部交易所代码
+    exexchangeid: number; // 外部交易所id
     goodscode: string; // 商品代码(内部)
     goodsid: number; // 商品ID(自增ID SEQ_GOODS)
     goodsname: string; // 商品名称

src/services/go/ermcp/goodsInfo/interface.ts

@@ -1,3 +1,5 @@
+import { Ref, UnwrapRef } from 'vue';
+
 /**
  * 查询现货商品
  */
@@ -320,3 +322,34 @@ export interface ErmcpMiddleGoodsChangeLog {
     updatetime: string;//更新时间
 }
 
+/**
+ * 商品行情
+ */
+export interface GoodsQuote {
+    goodsid: number; // 商品ID
+    goodscode: string; // 商品代码
+    goodsname: string; // 商品名称
+    decimalplace: number;
+    marketid: number; // 市场ID
+    quoteminunit: number;//行情最小变动单位 [整数，报价小数位一起使用]
+    outerdealmode: number;//外部成交方式[通道交易]- 1:净头寸 2:开平 3:平今
+    last: UnwrapRef<Ref>; // 最新价
+    bid: UnwrapRef<Ref>; // 买价
+    ask: UnwrapRef<Ref>; // 卖价
+    bidvolume: UnwrapRef<Ref>; // 买量
+    askvolume: UnwrapRef<Ref>; // 卖量
+    totalvolume: UnwrapRef<Ref>; // 总量
+    lastvolume: UnwrapRef<Ref>; // 现量
+    holdvolume: UnwrapRef<Ref>; // 持仓量
+    holdincrement: UnwrapRef<Ref>; // 日增
+    presettle: UnwrapRef<Ref>; // 昨结价
+    totalturnover: UnwrapRef<Ref>; // 金额
+    opened: UnwrapRef<Ref>; // 开盘
+    highest: UnwrapRef<Ref>; // 最高
+    lowest: UnwrapRef<Ref>; // 最低
+    limitup: UnwrapRef<Ref>;
+    limitdown: UnwrapRef<Ref>;
+    totalbidvolume: UnwrapRef<Ref>;
+    totalaskvolume: UnwrapRef<Ref>;
+    settle: UnwrapRef<Ref>;
+}

src/views/market/futures/compoments/futures-trade/index.less

@@ -1,12 +1,18 @@
+.top.dialog-trade .ant-drawer-content-wrapper {
+    height: auto;
+}
+
 .futures_trade {
-    display: flex;
-    height : 100%;
-    padding: 20px;
+    display  : flex;
+    height   : 100%;
+    max-width: 450px;
+    padding  : 20px;
 
     &__left {
         flex          : 1;
         display       : flex;
         flex-direction: column;
+        max-width     : 100%;
     }
 
     &__form {
@@ -26,8 +32,9 @@
     }
 
     &__submit {
-        display    : flex;
-        align-items: center;
+        display      : flex;
+        align-items  : center;
+        margin-bottom: 21px;
 
         .ant-btn {
             display        : flex;
@@ -57,4 +64,9 @@
             }
         }
     }
+
+    &__table {
+        width     : 100%;
+        overflow-x: auto;
+    }
 }

src/views/market/futures/compoments/futures-trade/index.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 期货交易 -->
-  <Drawer :title="'期货交易'" :placement="'right'" :visible="visible" @cancel="cancel" class="top">
+  <Drawer class="top dialog-trade" title="期货交易" placement="right" :visible="visible" @cancel="cancel">
     <div class="futures_trade">
       <div class="futures_trade__left">
         <div class="futures_trade__form">
@@ -12,17 +12,17 @@
             </a-form-item>
             <a-form-item label="合约">
               <a-select class="inlineFormSelect" placeholder="请选择" v-model:value="formData.GoodsID" @change="goodsChange">
-                <a-select-option v-for="item in tableList" :value="item.goodsid" :key="item.goodsid">{{ item.goodsname }}</a-select-option>
+                <a-select-option v-for="item in goodsList" :value="item.goodsid" :key="item.goodsid">{{ item.goodsname }}</a-select-option>
               </a-select>
             </a-form-item>
             <a-form-item label="价格类型">
-              <a-select class="inlineFormSelect" placeholder="请选择" v-model:value="selectedPriceMode" @change="priceModeChange">
-                <a-select-option v-for="item in priceModeList" :value="item.priceType" :key="item.priceType">{{ item.priceName }}</a-select-option>
+              <a-select class="inlineFormSelect" placeholder="请选择" v-model:value="selectedPriceType" @change="priceTypeChange">
+                <a-select-option v-for="item in priceTypeList" :value="item.priceType" :key="item.priceType">{{ item.priceName }}</a-select-option>
               </a-select>
             </a-form-item>
             <a-form-item class="inputIconBox" label="交易价格" name="OrderPrice">
               <!-- 限价可修改 -->
-              <template v-if="selectedPriceMode === 3">
+              <template v-if="selectedPriceType === 3">
                 <a-input-number class="commonInput" v-model:value="formData.OrderPrice" style="width:100%" />
                 <MinusOutlined />
                 <PlusOutlined />
@@ -33,8 +33,8 @@
             </a-form-item>
             <a-form-item class="inputIconBox" label="交易数量" name="OrderQty">
               <a-input-number class="commonInput" :min="1" v-model:value="formData.OrderQty" style="width:100%" />
-              <MinusOutlined />
-              <PlusOutlined />
+              <MinusOutlined @click="minusQty" />
+              <PlusOutlined @click="plusQty" />
             </a-form-item>
           </a-form>
         </div>
@@ -47,11 +47,15 @@
             <span>{{sellPrice}}</span>
             <span>卖出</span>
           </a-button>
-          <a-button :loading="loading" @click="submit('close')">
+          <!--如果有持仓则显示按钮-->
+          <a-button :loading="loading" @click="submit('close')" v-show="positionList.length">
             <span>优先平今</span>
             <span>平仓</span>
           </a-button>
         </div>
+        <div class="futures_trade__table tableDatas" v-show="positionList.length">
+          <a-table class="dialogTable" :columns="getColumns()" :data-source="positionList" :rowKey="(record,index)=>index" :pagination="false" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type:'radio' }"></a-table>
+        </div>
       </div>
       <div class="futures_trade__right"></div>
     </div>
@@ -59,49 +63,63 @@
 </template>
 
 <script lang="ts">
+import APP from '@/services';
+import { Systemparam } from '@/services/go/useInfo/interface';
 import { Des } from '@/common/components/commonDes';
 import Drawer from '@/common/components/drawer/index.vue';
 import { _closeModal } from '@/common/setup/modal/modal';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
-import { defineComponent, PropType, ref } from 'vue';
+import { defineComponent, ref, computed } from 'vue';
 import { handleForm } from './setup';
 import { channelOrderReq } from '@/services/proto/futures';
 import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
 import { BuyOrSell, BuildType, PriceType } from '@/common/constants/enumCommon';
-import { TableQuote } from '@/common/setup/table/interface';
 import { validateAction } from '@/common/setup/form';
+import { GoodsQuote } from '@/services/go/ermcp/goodsInfo/interface';
+import { getGoodsQuoteList } from '@/services/bus/goods';
+import { getColumns } from '@/views/order/futures_information/components/futures_information_position/columns';
+import { QueryErmcpTradePositionRsp } from '@/services/go/ermcp/futures/interface';
+import { message } from 'ant-design-vue';
 
 export default defineComponent({
     emits: ['cancel', 'update'],
     name: 'trader',
     components: { Des, Drawer, PlusOutlined, MinusOutlined },
     props: {
-        selectedRow: {
-            type: Object as PropType<TableQuote>,
-            default: {},
+        // 商品ID
+        goodsId: {
+            type: Number,
+            default: 0,
         },
-        tableList: {
-            type: Array as PropType<TableQuote[]>,
-            default: [],
+        // 交易所ID
+        exchangeId: {
+            type: Number,
+            default: 0,
         },
     },
     setup(props, context) {
+        const goodsList = getGoodsQuoteList(props.exchangeId);
+        const getGoods = (id: number) => goodsList.find((item) => item.goodsid === id)!;
+        // 当前选中的商品合约
+        const selectedGoods = ref<GoodsQuote>(getGoods(props.goodsId));
+
         const { visible, cancel } = _closeModal(context);
-        const { rules, formData, accountList } = handleForm(props.selectedRow);
+        const { rules, formData, accountList, allPositionList } = handleForm(selectedGoods.value);
         const formRef = ref();
         const loading = ref<boolean>(false);
 
-        // 买价
-        const buyPrice = ref(0);
-        // 卖价
-        const sellPrice = ref(0);
+        // 表格选中的 rowKey 数据 :rowKey="(record,index)=>index"
+        const selectedRowKeys = ref<number[]>([]);
+        const onSelectChange = (keys: number[]) => {
+            selectedRowKeys.value = keys;
+        };
 
-        // 选中的商品合约
-        const selectedGoods = ref<TableQuote>(props.selectedRow);
+        // 持仓列表
+        const positionList = computed(() => allPositionList.value.filter((item) => item.goodsid === selectedGoods.value.goodsid));
         // 选中的价格类型
-        const selectedPriceMode = ref(0);
+        const selectedPriceType = ref(0);
         // 价格类型列表
-        const priceModeList = [
+        const priceTypeList = [
             {
                 priceType: 0,
                 priceName: '最新价',
@@ -124,63 +142,127 @@ export default defineComponent({
             },
         ];
 
-        // 选择商品合约
-        function goodsChange(value: number) {
-            selectedGoods.value = props.tableList.find((item) => item.goodsid === value)!;
-        }
+        // 买价
+        const buyPrice = computed(() => getPrice(BuyOrSell.buy));
+        // 卖价
+        const sellPrice = computed(() => getPrice(BuyOrSell.sell));
 
-        // 选择价格类型
-        function priceModeChange(priceType: number) {
-            // 除了市价，其它价格类型都属于限价
-            if (priceType === 1) {
-                formData.PriceMode = PriceType.market;
-            } else {
-                formData.PriceMode = PriceType.limit;
+        // 减少交易数量
+        function minusQty() {
+            if (formData.OrderQty > 1) {
+                formData.OrderQty--;
             }
+        }
+
+        // 增加交易数量
+        function plusQty() {
+            formData.OrderQty++;
+        }
 
-            const { last } = selectedGoods.value;
-            switch (priceType) {
+        // 根据买卖方向返回价格
+        function getPrice(direction: BuyOrSell): number {
+            const { last, bid, ask, decimalplace, quoteminunit } = selectedGoods.value;
+            switch (selectedPriceType.value) {
                 // 最新价
-                case 1: {
-                    formData.OrderPrice = last;
-                    break;
+                case 0: {
+                    return last;
                 }
                 // 市价
-                case 2: {
+                case 1: {
+                    return direction === BuyOrSell.buy ? bid : ask;
                 }
                 // 对手价
-                case 3: {
+                case 2: {
+                    return direction === BuyOrSell.buy ? ask : bid;
                 }
                 // 限价
-                case 4: {
+                case 3: {
+                    return formData.OrderPrice;
                 }
                 // 超价
-                case 5: {
+                case 4: {
+                    // 系统参数
+                    const paramValue = APP.get('systemParams').find((el: Systemparam) => el.paramcode === '148')?.paramvalue ?? '0';
+                    // 点数
+                    const point = decimalplace > 0 ? -decimalplace * quoteminunit * Number(paramValue) : 1;
+                    const num = Math.pow(10, point);
+                    return direction === BuyOrSell.buy ? ask + num : bid - num;
+                }
+                default: {
+                    return 0;
                 }
             }
         }
 
+        // 选择商品合约
+        function goodsChange(id: number) {
+            selectedRowKeys.value = [];
+            selectedGoods.value = getGoods(id);
+        }
+
+        // 选择价格类型
+        function priceTypeChange(priceType: number) {
+            // 除了市价，其它价格类型都属于限价
+            if (priceType === 1) {
+                formData.PriceMode = PriceType.market;
+            } else {
+                formData.PriceMode = PriceType.limit;
+            }
+        }
+
         function submit(submitType: 'buy' | 'sell' | 'close') {
+            let successMsg = '成功';
+            let failMsg = '失败';
+
+            const positionIndex = selectedRowKeys.value[0]; // 选中的表格单据索引
+            if (submitType === 'close' && positionIndex === undefined) {
+                message.error('请选择需要平仓的单据');
+                return;
+            }
+
             // 按钮提交类型
             switch (submitType) {
                 case 'buy': {
+                    successMsg = '买入成功';
+                    failMsg = '买入失败';
                     formData.BuyOrSell = BuyOrSell.buy;
                     formData.ChannelBuildType = BuildType.open;
+                    formData.OrderPrice = buyPrice.value;
                     break;
                 }
                 case 'sell': {
+                    successMsg = '卖出成功';
+                    failMsg = '卖出失败';
                     formData.BuyOrSell = BuyOrSell.sell;
                     formData.ChannelBuildType = BuildType.open;
+                    formData.OrderPrice = sellPrice.value;
                     break;
                 }
                 case 'close': {
+                    successMsg = '平仓成功';
+                    failMsg = '平仓失败';
+
+                    const { outerdealmode, bid, ask } = selectedGoods.value!;
+                    const { curtdpositionenabled, buyorsell } = positionList.value[positionIndex];
+
+                    formData.BuyOrSell = buyorsell === BuyOrSell.buy ? BuyOrSell.sell : BuyOrSell.buy; // 如果单据方向是买，平仓方向就是卖，如果是卖，平仓方向就是买
                     formData.ChannelBuildType = BuildType.close;
+                    formData.OrderPrice = buyorsell ? ask : bid;
+                    formData.CloseTodayQty = curtdpositionenabled;
+
+                    const account = accountList.find((el) => el.accountid === formData.AccountID)!;
+                    // 判断是否母账号
+                    if (account.ismain) {
+                        if (formData.ChannelBuildType === BuildType.close && outerdealmode === 3) {
+                            formData.CloseTodayQty = 1;
+                        }
+                    }
                     break;
                 }
             }
             // 表单验证
             validateAction(formRef, formData).then((res) => {
-                requestResultLoadingAndInfo(channelOrderReq, res, loading, ['成功', '失败:']).then(() => {
+                requestResultLoadingAndInfo(channelOrderReq, res, loading, [successMsg, failMsg]).then(() => {
                     cancel(true);
                 });
             });
@@ -191,17 +273,24 @@ export default defineComponent({
             loading,
             visible,
             accountList,
+            positionList,
             rules,
             formRef,
             formData,
+            goodsList,
             buyPrice,
             sellPrice,
             selectedGoods,
             goodsChange,
-            priceModeList,
+            selectedRowKeys,
+            priceTypeList,
             PriceType,
-            selectedPriceMode,
-            priceModeChange,
+            selectedPriceType,
+            priceTypeChange,
+            getColumns,
+            onSelectChange,
+            minusQty,
+            plusQty,
         };
     },
 });

src/views/market/futures/compoments/futures-trade/setup.ts

@@ -1,6 +1,6 @@
 import moment from "moment";
-import { reactive } from "vue";
-import { TableQuote } from '@/common/setup/table/interface';
+import { reactive, ref } from "vue";
+import { GoodsQuote } from '@/services/go/ermcp/goodsInfo/interface';
 import { ChannelOrderReq } from '@/services/proto/futures/interface';
 import { v4 as uuidv4 } from 'uuid';
 import { PriceType } from '@/common/constants/enumCommon';
@@ -8,8 +8,10 @@ import { geLoginID_number } from '@/services/bus/login';
 import { getUserId } from '@/services/bus/user';
 import { RuleObject } from 'ant-design-vue/es/form/interface';
 import { getAccountTypeList } from '@/services/bus/account';
+import { queryErmcpTradePosition } from '@/services/go/ermcp/futures';
+import { QueryErmcpTradePositionRsp } from '@/services/go/ermcp/futures/interface';
 
-export function handleForm(selectedRow: TableQuote) {
+export function handleForm(selectedRow: GoodsQuote) {
     // 数据初始化
     const formData = reactive<ChannelOrderReq>({
         ClientSerialNo: uuidv4(), // string 客户端流水号
@@ -39,6 +41,12 @@ export function handleForm(selectedRow: TableQuote) {
         formData.AccountID = accountList[0].accountid;
     }
 
+    // 所有持仓列表
+    const allPositionList = ref<QueryErmcpTradePositionRsp[]>([]);
+    queryErmcpTradePosition().then((res) => {
+        allPositionList.value = res;
+    })
+
     // 验证交易价格
     const verifyOrderPrice = async (rule: RuleObject, value: number) => {
         if (value) {
@@ -56,6 +64,7 @@ export function handleForm(selectedRow: TableQuote) {
     return {
         rules,
         accountList,
+        allPositionList,
         formData,
     }
 }

src/views/market/futures/index.vue

@@ -1,25 +1,23 @@
 <template>
   <!--期货-->
   <div class="futures topTableHeight">
-    <a-table :columns="getColumnsList()" :class="['srcollYTable', isBottom ? 'futures-table-up' : 'futures-table-down', tableList.length ? 'noPlaceHolder' : 'hasPlaceHolder']" :scroll="{ x: '100%', y: 'auto' }" :pagination="false" :loading="loading" :customRow="Rowclick" rowKey="goodscode" :data-source="tableList">
+    <a-table :columns="getColumnsList()" :class="['srcollYTable', isBottom ? 'futures-table-up' : 'futures-table-down', tableList.length ? 'noPlaceHolder' : 'hasPlaceHolder']" :scroll="{ x: '100%', y: 'auto' }" :pagination="false" :loading="loading" :customRow="Rowclick" :rowKey="(record,index)=>index" :data-source="tableList">
       <template #index="{ index }">
         <span>{{index + 1}}</span>
       </template>
     </a-table>
-    <ThridMenu :list="tabList" :selectedKey="index" @selectMenu="changeTab" />
+    <ThridMenu :list="tabList" @selectMenu="changeTab" />
     <!-- 右键 -->
     <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="buttons"></contextMenu>
-    <component :is="componentId" v-if="componentId" :tableList="tableList" :selectedRow="selectedRow" @cancel="closeComponent"></component>
+    <component :is="componentId" v-if="componentId" :exchangeId="exchangeId" :selectedRow="selectedRow" :goodsId="selectedRow.goodsid" @cancel="closeComponent"></component>
   </div>
 </template>
 
 <script lang="ts">
-import { TabList } from '@/common/components/description/interface';
 import ThridMenu from '@/common/components/thirdMenu/index.vue';
 import { getShowBottomValue } from '@/common/config/constrolBottom';
 import { handleModalComponent } from '@/common/setup/asyncComponent';
-import { handleSubcriteOnDemandQuote } from '@/common/setup/table/tableQuote';
-import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
+import { GoodsQuote } from '@/services/go/ermcp/goodsInfo/interface';
 import { getColumnsList, useExternalexchange } from './setup';
 import { getTableButton } from '@/common/setup/table/button';
 import { contextMenu, defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
@@ -34,38 +32,28 @@ export default defineComponent({
     components: {
         ThridMenu,
         contextMenu,
+        chart: defineAsyncComponent(() => import('../spot_trade/components/goods-chart/index.vue')),
         trade: defineAsyncComponent(() => import('./compoments/futures-trade/index.vue')),
     },
     setup() {
         const isBottom = getShowBottomValue();
         const buttons = getTableButton();
-        console.log('buttons', buttons);
-        const { index, loading, tabList, tableList, quoteList, hanldeQuoteData, hanldeTableData } = useExternalexchange();
-        // 行情按需订阅
-        let stopSubcribe = handleSubcriteOnDemandQuote<QueryQuoteDayRsp>(quoteList);
-        hanldeTableData();
-
-        function changeTab(index: number, current: TabList) {
-            hanldeQuoteData(index);
-            console.log(index, current);
-            // 停止上次订阅
-            stopSubcribe();
-            // 重新发起订阅
-            stopSubcribe = handleSubcriteOnDemandQuote<QueryQuoteDayRsp>(quoteList);
-            hanldeTableData();
-        }
+        const { loading, exchangeId, tabList, tableList, changeTab } = useExternalexchange();
 
         // 右键逻辑
         const { contextMenu, closeContext: closeContextAction } = handleContextMenu();
         // 右键回调函数
         const eventsCB: TableEventCB = {
-            contextmenuCB: (record: QueryQuoteDayRsp, value: ContextMenuTemp) => {
+            clickCB: (record: GoodsQuote) => {
+                componentId.value = 'chart';
+            },
+            contextmenuCB: (record: GoodsQuote, value: ContextMenuTemp) => {
                 // 控制打开右键
                 contextMenu.value = value;
             },
         };
         // 表格事件
-        const { selectedRow, Rowclick } = getTableEvent<QueryQuoteDayRsp>(eventsCB);
+        const { selectedRow, Rowclick } = getTableEvent<GoodsQuote>(eventsCB);
         // 控制异步组件
         const { componentId, closeComponent, openComponent } = handleModalComponent(() => {}, selectedRow);
         // 关闭右键
@@ -77,8 +65,8 @@ export default defineComponent({
         }
 
         return {
-            index,
             loading,
+            exchangeId,
             tabList,
             changeTab,
             tableList,

src/views/market/futures/setup.tsx

@@ -1,25 +1,25 @@
 import { TabList } from '@/common/components/description/interface';
 import { initData } from '@/common/methods';
 import APP from '@/services';
-import { getQuoteDayInfoByCode } from '@/services/bus/goods';
-import { Ermcp3GoodsGroup, Goods } from '@/services/go/ermcp/goodsInfo/interface';
-import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
+import { GoodsQuote } from '@/services/go/ermcp/goodsInfo/interface';
 import { Externalexchange } from '@/services/go/useInfo/interface';
-import { ref, toRefs } from 'vue';
+import { ref } from 'vue';
 import { quoteChange, quoteAmplitude } from '@/common/setup/table/tableQuote';
-import { TableQuote } from '@/common/setup/table/interface';
+import { getGoodsQuoteList } from '@/services/bus/goods';
+import { subcriteGoodsQuote } from '@/common/setup/table/tableQuote';
+import { changeUnit } from '@/utils/qt/common'
 
 /**
  * 处理空数据
  */
-function formatValue<Key extends keyof TableQuote>(value: TableQuote[Key]) {
+function formatValue<Key extends keyof GoodsQuote>(value: GoodsQuote[Key]) {
     return value > 0 ? value : '--';
 }
 
 /**
  * 处理行情价格颜色
  */
-function handleQuotePriceColor<T, Key extends keyof TableQuote>(text: T, value: TableQuote[Key], presettle: TableQuote['presettle']) {
+function handleQuotePriceColor<T, Key extends keyof GoodsQuote>(text: T, value: GoodsQuote[Key], presettle: GoodsQuote['presettle']) {
     let className = ''
     if (presettle && value !== presettle) {
         if (value > presettle) {
@@ -49,7 +49,7 @@ export function getColumnsList() {
         {
             title: '最新价',
             key: 'last',
-            customRender: ({ record }: { record: TableQuote }) => {
+            customRender: ({ record }: { record: GoodsQuote }) => {
                 const text = formatValue(record.last);
                 return handleQuotePriceColor(text, record.last, record.presettle);
             }
@@ -57,7 +57,7 @@ export function getColumnsList() {
         {
             title: '涨跌幅%',
             key: 'amplitude',
-            customRender: ({ record }: { record: TableQuote }) => {
+            customRender: ({ record }: { record: GoodsQuote }) => {
                 const text = quoteAmplitude(record);
                 return handleQuotePriceColor(text, record.last, record.presettle);
             }
@@ -65,7 +65,7 @@ export function getColumnsList() {
         {
             title: '涨跌额',
             key: 'change',
-            customRender: ({ record }: { record: TableQuote }) => {
+            customRender: ({ record }: { record: GoodsQuote }) => {
                 const text = quoteChange(record, record.decimalplace);
                 return handleQuotePriceColor(text, record.last, record.presettle);
             }
@@ -73,7 +73,7 @@ export function getColumnsList() {
         {
             title: '买价',
             key: 'bid',
-            customRender: ({ record }: { record: TableQuote }) => {
+            customRender: ({ record }: { record: GoodsQuote }) => {
                 const text = formatValue(record.bid);
                 return handleQuotePriceColor(text, record.bid, record.presettle);
             }
@@ -81,7 +81,7 @@ export function getColumnsList() {
         {
             title: '卖价',
             key: 'ask',
-            customRender: ({ record }: { record: TableQuote }) => {
+            customRender: ({ record }: { record: GoodsQuote }) => {
                 const text = formatValue(record.ask);
                 return handleQuotePriceColor(text, record.ask, record.presettle);
             }
@@ -89,7 +89,7 @@ export function getColumnsList() {
         {
             title: '买量',
             key: 'bidvolume',
-            customRender: ({ record }: { record: TableQuote }) => {
+            customRender: ({ record }: { record: GoodsQuote }) => {
                 const text = formatValue(record.bidvolume);
                 return handleQuotePriceColor(text, record.bidvolume, record.presettle);
             }
@@ -97,7 +97,7 @@ export function getColumnsList() {
         {
             title: '卖量',
             key: 'askvolume',
-            customRender: ({ record }: { record: TableQuote }) => {
+            customRender: ({ record }: { record: GoodsQuote }) => {
                 const text = formatValue(record.askvolume);
                 return handleQuotePriceColor(text, record.askvolume, record.presettle);
             }
@@ -105,14 +105,14 @@ export function getColumnsList() {
         {
             title: '总量',
             key: 'totalvolume',
-            customRender: ({ record }: { record: TableQuote }) => {
+            customRender: ({ record }: { record: GoodsQuote }) => {
                 return formatValue(record.totalvolume);
             }
         },
         {
             title: '现量',
             key: 'lastvolume',
-            customRender: ({ record }: { record: TableQuote }) => {
+            customRender: ({ record }: { record: GoodsQuote }) => {
                 const text = formatValue(record.lastvolume);
                 return handleQuotePriceColor(text, record.lastvolume, record.presettle);
             }
@@ -120,14 +120,14 @@ export function getColumnsList() {
         {
             title: '持仓量',
             key: 'holdvolume',
-            customRender: ({ record }: { record: TableQuote }) => {
+            customRender: ({ record }: { record: GoodsQuote }) => {
                 return formatValue(record.holdvolume);
             }
         },
         {
             title: '日增',
             key: 'holdincrement',
-            customRender: ({ record }: { record: TableQuote }) => {
+            customRender: ({ record }: { record: GoodsQuote }) => {
                 const text = formatValue(record.holdincrement);
                 return handleQuotePriceColor(text, record.holdincrement, record.presettle);
             }
@@ -135,21 +135,24 @@ export function getColumnsList() {
         {
             title: '昨结价',
             key: 'presettle',
-            customRender: ({ record }: { record: TableQuote }) => {
+            customRender: ({ record }: { record: GoodsQuote }) => {
                 return formatValue(record.presettle);
             }
         },
         {
             title: '金额',
             key: 'totalturnover',
-            customRender: ({ record }: { record: TableQuote }) => {
+            customRender: ({ record }: { record: GoodsQuote }) => {
+                if (record.totalturnover > 0) {
+                    return changeUnit(record.totalturnover);
+                }
                 return formatValue(record.totalturnover);
             }
         },
         {
             title: '开盘',
             key: 'opened',
-            customRender: ({ record }: { record: TableQuote }) => {
+            customRender: ({ record }: { record: GoodsQuote }) => {
                 const text = formatValue(record.opened);
                 return handleQuotePriceColor(text, record.opened, record.presettle);
             }
@@ -157,7 +160,7 @@ export function getColumnsList() {
         {
             title: '最高',
             key: 'highest',
-            customRender: ({ record }: { record: TableQuote }) => {
+            customRender: ({ record }: { record: GoodsQuote }) => {
                 const text = formatValue(record.highest);
                 return handleQuotePriceColor(text, record.highest, record.presettle);
             }
@@ -165,7 +168,7 @@ export function getColumnsList() {
         {
             title: '最低',
             key: 'lowest',
-            customRender: ({ record }: { record: TableQuote }) => {
+            customRender: ({ record }: { record: GoodsQuote }) => {
                 const text = formatValue(record.lowest);
                 return handleQuotePriceColor(text, record.lowest, record.presettle);
             }
@@ -185,26 +188,32 @@ export function getColumnsList() {
 
 // 外部交易所
 export const useExternalexchange = () => {
-    const loading = ref<boolean>(false)
-    const index = ref<string>('0');
-    // 盘面数据
-    const quoteList = ref<QueryQuoteDayRsp[]>([]);
+    let stopSubcribe: () => void;
+    const loading = ref(false)
+    // 交易所ID
+    const exchangeId = ref(0);
     // 表格数据
-    const tableList = ref<TableQuote[]>([]);
+    const tableList = ref<GoodsQuote[]>([]);
     // 外部交易所 数据
     const externalexchangeList = ref<Externalexchange[]>([])
-    const tabList = ref<TabList[]>([])
+    // 交易所标签
+    const tabList = ref<TabList[]>([]);
 
-    // 获取 商品数据
-    const useGoodsList = (exchareaid: number) => {
-        // 商品列表
-        const goodsList = APP.get('Goods') as Goods[];
-        const goodsGroups = APP.get('goodsgroups') as Ermcp3GoodsGroup[]
-        // 商品组
-        const selectedGoodsGroups = goodsGroups.filter(e => e.exexchangeid === exchareaid).map(el => el.goodsgroupid)
-        return goodsList.filter(e => {
-            return e.goodsstatus === 3 && selectedGoodsGroups.includes(e.goodsgroupid)
-        })
+    function hanldeQuoteData(index: number) {
+        exchangeId.value = externalexchangeList.value[index].autoid;
+        tableList.value = getGoodsQuoteList(exchangeId.value);
+
+        const codes = tableList.value.map((el) => el.goodscode);
+        // 行情按需订阅
+        stopSubcribe = subcriteGoodsQuote(codes);
+    }
+
+    // 切换交易所标签
+    function changeTab(index: number, current: TabList) {
+        // 停止上次订阅
+        stopSubcribe();
+        hanldeQuoteData(index);
+        console.log(index, current);
     }
 
     initData(() => {
@@ -218,64 +227,6 @@ export const useExternalexchange = () => {
             hanldeQuoteData(0)
         }
     })
-    function hanldeQuoteData(index: number) {
-        const id = getExternalId(index)
-        // 找到 交易所 下的商品列表
-        const goodsList = useGoodsList(id)
-
-        // 重置表格数据
-        tableList.value = goodsList.map((el) => {
-            return {
-                goodsid: el.goodsid,
-                goodscode: el.goodscode,
-                goodsname: el.goodsname,
-                decimalplace: el.decimalplace,
-                marketid: el.marketid,
-            }
-        })
-
-        // 找到 盘面数据
-        getQuoteData(goodsList)
-    }
-    function getQuoteData(goodsList: Goods[]) {
-        quoteList.value.length = 0
-        // 找到盘面数据
-        goodsList.forEach(el => {
-            const quote = getQuoteDayInfoByCode(el.goodscode);
-            if (quote) {
-                quoteList.value.push(quote)
-            }
-        })
-    }
-
-    // 处理表格行情数据
-    function hanldeTableData() {
-        quoteList.value.forEach((quote) => {
-            const refs = toRefs(quote);
-            const index = tableList.value.findIndex((e) => e.goodscode === quote.goodscode);
-            if (index > -1) {
-                const item = tableList.value[index];
-                item.last = refs.last; // 最新价
-                item.bid = refs.bid; // 买价
-                item.ask = refs.ask; // 卖价
-                item.bidvolume = refs.bidvolume; // 买量
-                item.askvolume = refs.askvolume; // 卖量
-                item.totalvolume = refs.totalvolume; // 总量
-                item.lastvolume = refs.lastvolume; // 现量
-                item.holdvolume = refs.holdvolume; // 持仓量
-                item.holdincrement = refs.holdincrement; // 日增
-                item.presettle = refs.presettle; // 昨结价
-                item.totalturnover = refs.totalturnover; // 金额
-                item.opened = refs.opened; // 开盘
-                item.highest = refs.highest; // 最高
-                item.lowest = refs.lowest; // 最低
-            }
-        });
-    }
-
-    function getExternalId(index: number) {
-        return externalexchangeList.value[index].autoid
-    }
 
-    return { index, loading, tabList, tableList, quoteList, hanldeQuoteData, hanldeTableData }
+    return { loading, exchangeId, tabList, tableList, changeTab, }
 }

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

@@ -58,11 +58,14 @@
                 top          : 0;
                 padding      : 0 16px;
 
+                &::after {
+                    border: 0 !important;
+                }
+
                 &-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,133 +1,135 @@
 <template>
-    <!-- 交易图表  -->
-    <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" 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 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-if="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-slider">
+      <div class="chart-slider__button"></div>
+    </div>
+    <div class="chart-tips" v-if="showExchange">
+      <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)]">{{ handleNoneValue(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-slider">
-            <div class="chart-slider__button"></div>
+        <div class="chart-tips__volume">
+          <a-row>
+            <a-col :span="8">卖一</a-col>
+            <a-col :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.ask) }}</a-col>
+            <a-col :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.askvolume) }}</a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="8">买一</a-col>
+            <a-col :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.bid) }}</a-col>
+            <a-col :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.bidvolume) }}</a-col>
+          </a-row>
         </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>
-                <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>
-            </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">{{ 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 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">{{ handleNoneValue(selectedRow.last) }}</a-col>
+          <a-col :span="4">均价</a-col>
+          <a-col :class="handleQuotePriceColor(selectedRow.averageprice, selectedRow.presettle)" :span="8">{{ handleNoneValue(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">{{ handleNoneValue(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">{{ handleNoneValue(selectedRow.highest) }}</a-col>
+        </a-row>
+        <a-row>
+          <a-col :span="4">总量</a-col>
+          <a-col :span="8">{{ handleNoneValue(selectedRow.totalvolume) }}</a-col>
+          <a-col :span="4">最低</a-col>
+          <a-col :class="handleQuotePriceColor(selectedRow.lowest, selectedRow.presettle)" :span="8">{{ handleNoneValue(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">{{ handleNoneValue(selectedRow.limitup) }}</a-col>
+          <a-col :span="4">跌停</a-col>
+          <a-col class="green" :span="8">{{ handleNoneValue(selectedRow.limitdown) }}</a-col>
+        </a-row>
+        <a-row>
+          <a-col :span="4">外盘</a-col>
+          <a-col :span="8">{{ handleNoneValue(selectedRow.totalbidvolume) }}</a-col>
+          <a-col :span="4">内盘</a-col>
+          <a-col :span="8">{{ handleNoneValue(selectedRow.totalaskvolume) }}</a-col>
+        </a-row>
+        <a-row>
+          <a-col :span="4">持仓</a-col>
+          <a-col :span="8">{{ handleNoneValue(selectedRow.holdvolume) }}</a-col>
+          <a-col :span="4">结算</a-col>
+          <a-col :span="8">{{ handleNoneValue(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">{{ handleNoneValue(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">
+        <strong>查看更多</strong>
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -140,8 +142,8 @@ 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 { useQueryData } from '@/common/setup/request';
+import { handleQuotePriceColor, quoteChange, handleNoneValue, quoteAmplitude } from '@/common/setup/table/tableQuote';
+import moment from 'moment';
 
 export default defineComponent({
     emits: ['cancel', 'update'],
@@ -155,17 +157,21 @@ export default defineComponent({
             type: Object as PropType<QueryQuoteDayRsp>,
             default: {},
         },
+        showExchange: {
+            type: Boolean,
+            default: true,
+        },
     },
     setup(props, context) {
-        const { visible, cancel } = _closeModal(context);
-        const activeCycleName = ref<string[]>(['time']);
-        const activeCycleType = ref<CycleType>(CycleType.time);
-        const activeSeriesType = ref<string[]>(['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 = [
@@ -184,32 +190,43 @@ export default defineComponent({
         };
 
         // Tik列表
-        const { list: tradedList } = useQueryData<QueryHistoryTikDatasRsp>(QueryHistoryTikDatas, {
-            goodsCode: goodscode,
-            count: 20,
-        });
+        const getHistoryTikDatas = (startTime: string, endTime: string) => {
+            if (!tradedList.value.length) {
+                const param = {
+                    goodsCode: props.selectedRow.goodscode,
+                    count: 20,
+                    startTime: moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
+                    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,
+                    });
+                }
             }
         );
 
@@ -226,9 +243,11 @@ export default defineComponent({
             watchMore,
             formatTime,
             quoteChange,
+            handleNoneValue,
             quoteAmplitude,
             handleQuotePriceColor,
             changeCycleType,
+            getHistoryTikDatas,
         };
     },
 });

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

@@ -12,36 +12,56 @@
             <div class="inlineBar">
                 <div class="valNums bdf1 ml10">
                     <!-- 最新价 -->
-                    <div class="firstNum start" :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"> {{ selectedRow.last }}</div>
+                    <div
+                        class="firstNum start"
+                        :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"
+                    >{{ selectedRow.last }}</div>
                     <div class="lastNum start">
                         <!-- 涨跌值 -->
-                        <div :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"> {{ quoteChange(selectedRow, selectedRow.decimalplace) }}</div>
+                        <div
+                            :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"
+                        >{{ quoteChange(selectedRow, selectedRow.decimalplace) }}</div>
                         <!-- 涨跌幅 -->
-                        <div class="ml20" :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"> {{ quoteAmplitude(selectedRow, selectedRow.decimalplace) }}</div>
+                        <div
+                            class="ml20"
+                            :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)"
+                        >{{ quoteAmplitude(selectedRow, selectedRow.decimalplace) }}</div>
                     </div>
                 </div>
                 <div class="priceBar ml20">
                     <div class="inlineBar start">
-                        <div class="greenBar green">
+                        <div class="greenBar">
                             <div class="numBlock ml15">
-                                <div class="first">卖价</div>
-                                <div class="last" :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)"> {{ selectedRow.ask }}</div>
+                                <div class="first grey">卖价</div>
+                                <div
+                                    class="last"
+                                    :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)"
+                                >{{ selectedRow.ask }}</div>
                             </div>
                             <div class="numBlock">
-                                <div class="first">卖量</div>
-                                <div class="last">{{ selectedRow.askvolume }}</div>
+                                <div class="first grey">卖量</div>
+                                <div
+                                    class="last"
+                                    :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)"
+                                >{{ selectedRow.askvolume }}</div>
                             </div>
                         </div>
                     </div>
                     <div class="inlineBar start">
-                        <div class="redBar red1">
+                        <div class="redBar">
                             <div class="numBlock">
-                                <div class="first">买价</div>
-                                <div class="last" :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)"> {{ selectedRow.bid }}</div>
+                                <div class="first grey">买价</div>
+                                <div
+                                    class="last"
+                                    :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)"
+                                >{{ selectedRow.bid }}</div>
                             </div>
                             <div class="numBlock">
-                                <div class="first">买量</div>
-                                <div class="last">{{ selectedRow.bidvolume }}</div>
+                                <div class="first grey">买量</div>
+                                <div
+                                    class="last"
+                                    :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)"
+                                >{{ selectedRow.bidvolume }}</div>
                             </div>
                         </div>
                     </div>
@@ -49,34 +69,30 @@
             </div>
         </div>
         <!-- 交易图表 -->
-        <Chart v-if="showComponentsId === ComponentType.chart" @update="changeComponent" :selectedRow="selectedRow" />
+        <Chart
+            v-if="showComponentsId === ComponentType.chart"
+            @update="changeComponent"
+            :selectedRow="selectedRow"
+        />
         <!-- 成交明细 -->
-        <StockExchange :selectedRow="selectedRow" v-if="showComponentsId === ComponentType.tradeDetail" />
+        <StockExchange
+            :selectedRow="selectedRow"
+            v-if="showComponentsId === ComponentType.tradeDetail"
+        />
     </div>
 </template>
 
 <script lang="ts">
-import { EnumRouterName } from '@/common/constants/enumRouterName';
-import { defineAsyncComponent, defineComponent, BtnList } from '@/common/export/commonTable';
+import { defineComponent } from '@/common/export/commonTable';
 import { _closeModal } from '@/common/setup/modal/modal';
-import { WrOrderQuote } from '@/services/go/wrtrade/interface';
-import { LeftOutlined } from '@ant-design/icons-vue';
-import Buy from '../buy-market/index.vue';
-import Sell from '../sell-market/index.vue';
-import { handleModalComponent } from '@/common/setup/asyncComponent';
-import { onBeforeUnmount, onMounted, PropType, ref } from 'vue';
-
-import Bus from '@/utils/eventBus/index';
-import TimerUtils from '@/utils/timer/timerUtil';
-import { BtnListType } from '@/common/components/btnList/interface';
-import moment, { Moment } from 'moment';
+import { handleQuotePriceColor, handleSubcriteOnDemandQuote, quoteAmplitude, quoteAmplituOfVibration, quoteChange } from '@/common/setup/table/tableQuote';
 import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
-import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
-import StockExchange from './stock-exchange/index.vue';
-import { getQuoteDayInfoByCode } from '@/services/bus/goods';
+import { LeftOutlined } from '@ant-design/icons-vue';
+import { PropType, ref } from 'vue';
 import Chart from './chart/index.vue';
 import { ComponentType } from './setup';
-import { handleSubcriteOnDemandQuote, handleQuotePriceColor, quoteChange, quoteAmplitude, quoteAmplituOfVibration } from '@/common/setup/table/tableQuote';
+import StockExchange from './stock-exchange/index.vue';
+
 
 export default defineComponent({
     emits: ['cancel', 'update'],

src/views/order/futures_information/components/futures_information_position/index.vue

@@ -7,12 +7,12 @@
         <BtnList :btnList="btnList" :record="record" class="btn-list-sticky" @click="openComponent" />
       </template>
     </a-table>
-    <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" @cancel="closeComponent"></component>
+    <component :is="componentId" v-if="componentId" :goodsId="selectedRow.goodsid" @cancel="closeComponent"></component>
   </section>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import { queryTableList, BtnList } from '@/common/export/commonTable';
 import { handleComposeOrderTable } from '@/common/setup/table/compose';
 import { ComposeOrderTableParam } from '@/common/setup/table/interface';
@@ -26,6 +26,7 @@ import Bus from '@/utils/eventBus/index';
 export default defineComponent({
     components: {
         BtnList,
+        close: defineAsyncComponent(() => import('@/views/market/futures/compoments/futures-trade/index.vue')),
     },
     setup() {
         // 表格列表数据