update

src/services/go/wrtrade/index.ts

@@ -25,6 +25,7 @@ import {
     QueryWrTradeDetailReq,
     WrAverageTradePriceQsp,
     WrAverageTradePriceQsq,
+    WrBsGoodsInfo,
     WrBuybackDetail,
     WrDeliveryAvalidHoldLB,
     WrDeliveryDetail,
@@ -158,6 +159,16 @@ export function queryWrGoodsInfo(req: QueryWrGoodsInfoReq): Promise<WrGoodsInfo[
 }
 
 /**
+ * 查询合约交易买卖大厅详情 /WrTrade2/QueryWrBsGoodsInfo
+ * @param req
+ */
+export function queryWrBsGoodsInfo(goodsid: number): Promise<WrBsGoodsInfo[]> {
+    return commonSearch_go('/WrTrade2/QueryWrBsGoodsInfo', { goodsid }).catch((err) => {
+        throw new Error(`查询合约交易买卖大厅详情: ${err}`);
+    });
+}
+
+/**
  * 查询市场交易参数配置 /WrTrade2/QueryWrMarketTradeConfig
  * @param req
  */

src/services/go/wrtrade/interface.ts

@@ -280,6 +280,13 @@ export interface WrGoodsInfo {
     marketid: number//                         市场id
 }
 
+export interface WrBsGoodsInfo {
+    buyorsell: 0 | 1 // 买卖方向 0-买 1-卖
+    goodsid: number // 交易合约ID
+    lstitem: WrTypeItem[] //                   商品信息项
+    lststep: WrGoodsPerformanceStep[]//        履约规则
+}
+
 /**
  * 查询指定成交请求
  */
@@ -967,30 +974,30 @@ export interface QueryWrDeliveryAvalidHoldLBReq {
 }
 
 
-export interface WrDeliveryAvalidHoldLB{
-    accountid	:number;//资金账号
-    avalidqty	:number;//数量(可点选数量)
-    deliverygoodsid	:number;//品种id
-    enumdicname	:string;//单位名称
-    goodsid	:number;//x合约商品id
-    ladingbillid	:string;//提单id
-    pgoodscode	:string;//p商品代码(点价合约)
-    pgoodsid	:number;//p商品id(点价合约)
-    pgoodsname	:string;//p商品名称(点价合约)
-    pricemove	:number;//升贴水
-    subnum	:number;//提单子id
-    userid	:number;//用户id
-    username	:string;//仓单持有人
-    warehousecode	:string;//仓库代码
-    warehouseid	:number;//仓库id
-    warehousename	:string;//仓库名称
-    wrfactortypeid	:string;//仓单要素id
-    wrstandardcode	:string;//品代码
-    wrstandardid	:number;//品类d
-    wrstandardname	:string;//品类名称
-    wrtypename	:string;//商品
-    xgoodscode	:string;//x合约代码
-    xgoodsname	:string;//x合约名称
+export interface WrDeliveryAvalidHoldLB {
+    accountid: number;//资金账号
+    avalidqty: number;//数量(可点选数量)
+    deliverygoodsid: number;//品种id
+    enumdicname: string;//单位名称
+    goodsid: number;//x合约商品id
+    ladingbillid: string;//提单id
+    pgoodscode: string;//p商品代码(点价合约)
+    pgoodsid: number;//p商品id(点价合约)
+    pgoodsname: string;//p商品名称(点价合约)
+    pricemove: number;//升贴水
+    subnum: number;//提单子id
+    userid: number;//用户id
+    username: string;//仓单持有人
+    warehousecode: string;//仓库代码
+    warehouseid: number;//仓库id
+    warehousename: string;//仓库名称
+    wrfactortypeid: string;//仓单要素id
+    wrstandardcode: string;//品代码
+    wrstandardid: number;//品类d
+    wrstandardname: string;//品类名称
+    wrtypename: string;//商品
+    xgoodscode: string;//x合约代码
+    xgoodsname: string;//x合约名称
 }
 export interface WrAverageTradePriceQsq {
     page?: number; //	页码

src/views/market/spot_trade/spot_trade_order_transaction/components/buy-sell-market/index.vue

@@ -3,7 +3,7 @@
   <div class="buy-sell-market">
     <div class="buy-sell-market-title">
       <a class="backIcon"
-         @click="cancel">
+         @click="cancelAction">
         <LeftOutlined />
       </a>
       <div class="titleBtn">
@@ -11,8 +11,15 @@
         <div class="arrowRightIcon"></div>
       </div>
       <div class="priceBar bdf1 ml20">
-        <div class="greenBar green"
-             @click="changeMarketOrDetail">
+        <div>
+          <!-- 最新价 -->
+          <span>1255.00</span>
+          <!-- 涨跌值 -->
+          <span>1255.00</span>
+          <!-- 涨跌幅 -->
+          <span>1255.00</span>
+        </div>
+        <div class="greenBar green">
           <div class="numBlock ml15">
             <div class="first">卖价</div>
             <div class="last">{{selectedRow.sellprice}}</div>
@@ -22,8 +29,7 @@
             <div class="last">{{selectedRow.sellqty}}</div>
           </div>
         </div>
-        <div class="greenBar green"
-             @click="changeMarketOrDetail">
+        <div class="greenBar green">
           <div class="numBlock ml15">
             <div class="first">卖价</div>
             <div class="last">{{selectedRow.sellprice}}</div>
@@ -48,8 +54,12 @@
                :record="selectedRow"
                @click="openComponent" />
     </div>
+    <!-- 交易图表 -->
+    <Chart v-if="showComponentsId === ComponentType.chart"
+           @update="changeComponent" />
+    <!-- 买卖大厅内容 -->
     <a-row class="buySellHall"
-           v-if="showMarketOrDetail">
+           v-if="showComponentsId === ComponentType.marketContent">
       <a-col :span="12">
         <Sell ref="sellRef"
               :parantSelectedRow="deliverGoods" />
@@ -59,8 +69,9 @@
              :parantSelectedRow="deliverGoods" />
       </a-col>
     </a-row>
+    <!-- 成交明细 -->
     <StockExchange :deliverGoods="deliverGoods"
-                   v-else />
+                   v-if="showComponentsId === ComponentType.tradeDetail" />
     <component :is="componentId"
                v-if="componentId"
                :selectedRow="deliverGoods"
@@ -87,6 +98,8 @@ import moment, { Moment } from 'moment';
 import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
 import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
 import StockExchange from '../stock-exchange/index.vue';
+import Chart from '../chart/index.vue';
+import { ComponentType } from '../../setup';
 
 export default defineComponent({
     emits: ['cancel', 'update'],
@@ -105,6 +118,7 @@ export default defineComponent({
         Buy,
         Sell,
         BtnList,
+        Chart,
         LeftOutlined,
         Listing: defineAsyncComponent(() => import('../listing/index.vue')),
         Detail: defineAsyncComponent(() => import('../detail/index.vue')),
@@ -131,9 +145,19 @@ export default defineComponent({
         };
         const { componentId, closeComponent, openComponent } = handleModalComponent(queryFn, ref({}));
 
-        const showMarketOrDetail = ref<boolean>(true);
-        function changeMarketOrDetail() {
-            showMarketOrDetail.value = !showMarketOrDetail.value;
+        const showComponentsId = ref<ComponentType>(ComponentType.chart);
+
+        // 切换组件
+        function changeComponent(type: ComponentType) {
+            showComponentsId.value = type;
+        }
+        // 返回上层组件
+        function cancelAction() {
+            if (showComponentsId.value === ComponentType.chart) {
+                cancel();
+            } else {
+                showComponentsId.value = ComponentType.chart;
+            }
         }
 
         TimerUtils.setInterval(
@@ -155,8 +179,10 @@ export default defineComponent({
             closeComponent,
             openComponent,
             btnListData,
-            showMarketOrDetail,
-            changeMarketOrDetail,
+            changeComponent,
+            ComponentType,
+            showComponentsId,
+            cancelAction,
         };
     },
 });

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

@@ -0,0 +1,109 @@
+<template>
+  <!-- 交易图表  -->
+  <div class="chart-container">
+    <div class="chart-content"></div>
+    <div class="chart-tips">
+      <a-tabs v-model:activeKey="activeKey">
+        <a-tab-pane key="1"
+                    tab="卖挂">Tab 1</a-tab-pane>
+        <a-tab-pane key="2"
+                    tab="买挂">Tab 2</a-tab-pane>
+        <a-tab-pane key="3"
+                    tab="成交">Tab 3</a-tab-pane>
+      </a-tabs>
+      <div @click="watchMore">查看更多</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineAsyncComponent, defineComponent } from '@/common/export/commonTable';
+import { _closeModal } from '@/common/setup/modal/modal';
+import { PropType, ref } from 'vue';
+
+import { QueryHistoryTikDatasRsp, QueryQuoteDayRsp } from '@/services/go/quote/interface';
+import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
+import { QueryHistoryTikDatas } from '@/services/go/quote';
+import { ComponentType } from '../../setup';
+
+const columnsList = [
+    { title: '时间', key: 'TS', dataIndex: 'TS', align: 'center' },
+    { title: '成交价', key: 'Vol', dataIndex: 'Vol', align: 'center' },
+    { title: '成交量', key: 'PE', dataIndex: 'PE', align: 'center' },
+];
+
+export default defineComponent({
+    emits: ['cancel', 'update'],
+    name: 'stock-exchange',
+    props: {
+        deliverGoods: {
+            type: Object as PropType<QueryDeliveryRelationRsp>,
+            default: {},
+        },
+    },
+
+    setup(props, context) {
+        const loading = ref<boolean>(false);
+        const { visible, cancel } = _closeModal(context);
+        const activeKey = ref('1');
+        function watchMore() {
+            const type: ComponentType = activeKey.value === '3' ? ComponentType.tradeDetail : ComponentType.marketContent;
+            context.emit('update', type);
+        }
+        const param = {
+            goodsCode: props.deliverGoods.goodscode,
+        };
+        const tableList = ref<QueryHistoryTikDatasRsp[][]>([]);
+        QueryHistoryTikDatas(param).then((res) => {
+            tableList.value = getHisList(res);
+        });
+        function getHisList(list: QueryHistoryTikDatasRsp[]) {
+            const len = list.length;
+            const result: QueryHistoryTikDatasRsp[][] = [[], [], []];
+            if (len) {
+                if (len === 1) {
+                    result[0] = list;
+                } else if (len === 2) {
+                    result[0].push(list[0]);
+                    result[1].push(list[1]);
+                } else {
+                    const temp = Math.floor(len / 3);
+                    result[0] = list.slice(0, temp);
+                    result[1] = list.slice(temp, 2 * temp);
+                    result[2] = list.slice(temp * 2, temp * 3);
+                    const last = len - temp;
+                    if (last) {
+                        if (last === 1) {
+                            result[0].push(list[len - 1]);
+                        } else {
+                            result[0].push(list[len - 2]);
+                            result[1].push(list[len - 1]);
+                        }
+                    }
+                }
+            }
+            return result;
+        }
+        return {
+            cancel,
+            visible,
+            tableList,
+            columnsList,
+            loading,
+            activeKey,
+            watchMore,
+        };
+    },
+});
+</script>
+<style lang="less">
+.chart-container {
+    display: flex;
+    .chart-content {
+        flex: 1;
+    }
+    .chart-tips {
+        width: 300px;
+    }
+}
+</style>

src/views/market/spot_trade/spot_trade_order_transaction/components/detail/index.vue

@@ -1,23 +1,46 @@
 <template>
-    <Drawer
-        :title="'详情'"
-        :placement="'right'"
-        :visible="visible"
-        width="486px"
-        height="479px"
-        @cancel="cancel"
-        class="top"
-    >
-        <div class="delisting"></div>
-    </Drawer>
+  <!-- 买卖大厅详情 -->
+  <Drawer :title="'详情'"
+          :placement="'right'"
+          :visible="visible"
+          class="top top486"
+          @cancel="cancel">
+    <div class="detailCont">
+      <div class="rows">
+        <div class="row"
+             v-for="item in lstitem"
+             :key="item.name">
+          <div class="left">{{item.name}}</div>
+          <div class="right">{{item.value}}</div>
+        </div>
+      </div>
+      <div class="ruleTitle">履约规则：</div>
+      <div class="rulesCont">
+        <a-row>
+          <a-col :span="24"
+                 class="ruleCol">
+            <div class="line"
+                 v-for="item in lststep"
+                 :key="item.autoid">
+              <!-- <div class="no">{{index + 1}}</div> -->
+              <div class="name">{{item.steptypename}}</div>
+              <div class="time">{{item.stepdate}}</div>
+            </div>
+          </a-col>
+        </a-row>
+      </div>
+    </div>
+  </Drawer>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType, ref } from 'vue';
 import Drawer from '@/common/components/drawer/index.vue';
-import { WrOrderQuote } from '@/services/go/wrtrade/interface';
-
+import { QueryWrGoodsInfoReq, WrGoodsPerformanceStep, WrTypeItem } from '@/services/go/wrtrade/interface';
+import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
 import { _closeModal } from '@/common/setup/modal/modal';
+import { queryWrBsGoodsInfo, queryWrGoodsInfo } from '@/services/go/wrtrade';
+import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
 
 export default defineComponent({
@@ -30,13 +53,21 @@ export default defineComponent({
             default: {},
         },
     },
-
     setup(props, context) {
-        const { visible, cancel } = _closeModal(context);
-
         const loading = ref<boolean>(false);
+        const { visible, cancel } = _closeModal(context);
+        const lstitem = ref<WrTypeItem[]>();
+        const lststep = ref<WrGoodsPerformanceStep[]>();
+        queryResultLoadingAndInfo(queryWrBsGoodsInfo, loading, props.parantSelectedRow.goodsid).then((res) => {
+            if (res.length) {
+                lstitem.value = res[0].lstitem;
+                lststep.value = res[0].lststep;
+            }
+        });
 
         return {
+            lstitem,
+            lststep,
             visible,
             cancel,
         };
@@ -44,125 +75,100 @@ export default defineComponent({
 });
 </script>
 
-<style lang="less">
-.delisting {
-    width: 100%;
-    height: 100%;
-    .flex;
-    flex-direction: column;
-    overflow: hidden;
-    .condition {
+<style lang="less" scoped>
+.detailCont {
+    padding: 10px;
+    .rows {
+        .flex;
+        flex-direction: column;
         width: 100%;
-        height: 48px;
-        margin: 0 16px;
-        padding: 10px 0;
-        border-bottom: 1px solid @m-black6;
-        .inlineflex;
-        .conditionBtn {
-            align-self: center;
-            align-items: center;
-            border: 0;
-            min-width: 80px;
-            height: 28px;
-            line-height: 28px;
-            background: @m-black7;
-            .rounded-corners(3px);
-            font-size: 14px;
-            color: @m-blue0;
-            &:hover {
-                background: @m-black7-hover;
-                color: @m-blue0-hover;
+        border: 1px solid @m-black6;
+        background: @m-black13;
+        .row {
+            display: inline-flex;
+            width: 100%;
+            height: 38px;
+            line-height: 38px;
+            border-bottom: 1px solid @m-black6;
+            > div {
+                text-align: center;
+                font-size: 16px;
+            }
+            .left {
+                width: 126px;
+                color: @m-grey1;
+                border-right: 1px solid @m-black6;
+            }
+            .right {
+                flex: 1;
+                color: @m-white11;
             }
-        }
-        .conditionBtn + .conditionBtn {
-            margin-left: 10px;
         }
     }
-    .ant-form {
-        height: 100%;
+    .ruleTitle {
+        width: 100%;
+        height: 30px;
+        line-height: 30px;
+        margin-top: 10px;
+        font-size: 16px;
+        color: @m-grey1;
     }
-}
-::v-deep.ant-input-suffix {
-    position: absolute;
-    right: -25px;
-}
-.unit {
-    margin-left: 70px;
-    width: 260px;
-    .flex;
-    justify-content: space-between;
-    font-size: 14px;
-    color: @m-grey41;
-    height: 14px;
-    line-height: 14px;
-}
-.listedBtn {
-    width: 120px;
-    height: 30px;
-    line-height: 30px;
-    background: linear-gradient(0deg, @m-blue2 0%, @m-blue0 100%);
-    border-radius: 3px;
-    color: @m-white0;
-    font-size: 14px;
-    text-align: center;
-    border: 0;
-    &:hover {
-        background: linear-gradient(0deg, @m-blue0-hover 0%, @m-blue2-hover 100%);
-        color: @m-white0-hover;
+    .rulesCont {
+        margin-top: 10px;
+        .flex;
+        overflow-x: auto;
+        overflow-y: hidden;
+        max-width: 450px;
+        .ruleCol.ant-col {
+            margin-bottom: 10px;
+        }
     }
 }
-.cancelBtn:extend(.listedBtn) {
-    background: linear-gradient(0deg, @m-grey12 0%, @m-grey13 100%) !important;
-    &:hover {
-        background: linear-gradient(0deg, @m-grey12-hover 0%, @m-grey13-hover 100%) !important;
-        color: @m-white0-hover;
+.ant-row {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    .ant-col {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        margin-bottom: 20px;
+        .rounded-corners(3px);
+        display: inline-flex;
+        .line {
+            width: 100%;
+            .flex;
+            flex-direction: column;
+            .name {
+                min-width: 120px;
+                height: 30px;
+                background: @m-blue28;
+                border: 1px solid @m-black37;
+                .rounded-corners(3px);
+                text-align: center;
+                font-size: 16px;
+                color: @m-white6;
+            }
+
+            .time {
+                margin: 6px auto 0;
+                width: 50px;
+                height: 28px;
+                background: @m-black38;
+                .rounded-corners(5px);
+                color: @m-blue26;
+                font-size: 14px;
+                text-align: center;
+            }
+        }
+        .line:nth-child(2n) {
+            .name {
+                background: @m-yellow4;
+                border-color: @m-yellow5;
+            }
+        }
+
+        .line + .line {
+            margin-left: 5px;
+        }
     }
 }
-.ml10 {
-    margin-left: 10px;
-}
-.ant-form.dialogForm .ant-row.ant-form-item {
-    margin-bottom: 14px;
-}
-.mt20 {
-    margin-top: 20px;
-}
-.mt-20 {
-    margin-top: -20px;
-}
-.labelTip {
-    font-size: 14px;
-    color: @m-blue16;
-    position: absolute;
-    top: 15px;
-    left: -66px;
-}
-.minusBtn,
-.plusBtn {
-    width: 15px;
-    height: 32px;
-    line-height: 32px;
-    font-size: 15px;
-    color: @m-blue15;
-    cursor: pointer;
-}
-.minusBtn {
-    position: absolute;
-    top: -6px;
-    left: 14px;
-    z-index: 1;
-}
-.plusBtn {
-    position: absolute;
-    top: -6px;
-    right: 14px;
-    z-index: 1;
-}
-.stepper {
-    padding-left: 30px;
-    padding-right: 30px;
-    text-align: center;
-    color: @m-yellow1;
-    font-size: 16px;
-}
-</style>;
+</style>

src/views/market/spot_trade/spot_trade_order_transaction/setup.ts

@@ -82,3 +82,9 @@ export const columnsList = [
     // { title: '日增', key: 'holdincrement' },
     // { title: '金额', key: 'totalturnover' },
 ];
+
+export enum ComponentType {
+    chart,
+    marketContent,
+    tradeDetail,
+}