解决冲突

src/common/methods/format/index.ts

@@ -57,28 +57,30 @@ export function formatValue(value: number | string) {
     }
 }
 
-type TIME = 's' | 'm' | 'd'
+type TIME = 's' | 'm' | 'd' | 'hm'
 /**
  * 格式化时间
- * @param value 
+ * @param value
  * @param type 's' => 格式: YYYY-MM-DD HH:mm:ss ;  'm'  => 格式: YYYY-MM-DD HH:mm ;  'd' => 'YYYY-MM-DD'
- * @returns 
+ * @returns
  */
-export function formatTime(value: string | Date | Moment, type: TIME) {
+export function formatTime(value: string | Date | Moment, type?: TIME) {
     let str = 'YYYY-MM-DD HH:mm:ss';
     if (type === 'd') {
         str = 'YYYY-MM-DD'
     } else if (type === 'm') {
-        'YYYY-MM-DD HH:mm'
+        str = 'YYYY-MM-DD HH:mm'
+    } else if (type === 'hm') {
+        str = 'HH:mm'
     }
-    if(value === '--') return '';
+    if (value === '--') return '';
     if (value) return moment(value).format(str);
     return value;
 }
 
 
 export function formatNumber(value: number, decimals: number): string {
-    if(value === undefined){
+    if (value === undefined) {
         return "0"
     }
     return value.toFixed(decimals)

src/common/setup/request/index.ts

@@ -0,0 +1,30 @@
+import { message } from "ant-design-vue";
+import { ref } from "vue";
+
+type PromoiseFn = (param?: any) => Promise<any>
+
+// 通用 查询数据 hooks
+export function useQueryData<T>(fn: PromoiseFn, param?: any) {
+    const loading = ref<boolean>(true)
+    const list = ref<T[]>([])
+    function update() {
+        if (param) {
+            console.log('查询数据 参数', param)
+            fn(param).then(res => {
+                console.log(' 查询数据 hooks', res)
+                list.value = res
+            })
+                .catch(err => message.error(err))
+                .finally(() => loading.value = false)
+        } else {
+            fn().then(res => {
+                console.log(' 查询数据 hooks', res)
+                list.value = res
+            })
+                .catch(err => message.error(err))
+                .finally(() => loading.value = false)
+        }
+    }
+    update()
+    return { loading, list, update }
+}

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

@@ -1,88 +1,100 @@
 <template>
-    <!-- 买卖大厅 -->
-    <div class="buy-sell-market">
-        <div class="buy-sell-market-title">
-            <a class="backIcon" @click="cancelAction">
-                <LeftOutlined />
-            </a>
-            <div class="titleBtn">
-                <div class="name">{{selectedRow.goodscode}} {{selectedRow.goodsname}}</div>
-                <div class="arrowRightIcon"></div>
+  <!-- 买卖大厅 -->
+  <div class="buy-sell-market">
+    <div class="buy-sell-market-title">
+      <a class="backIcon"
+         @click="cancelAction">
+        <LeftOutlined />
+      </a>
+      <div class="titleBtn">
+        <div class="name">{{selectedRow.goodscode}} {{selectedRow.goodsname}}</div>
+        <div class="arrowRightIcon"></div>
+      </div>
+      <div class="inlineBar">
+        <div class="valNums bdf1 ml10">
+          <!-- 最新价 -->
+          <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="ml20"
+                 :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">
+              {{quoteAmplituOfVibration(selectedRow, selectedRow.decimalplace)}}</div>
+          </div>
+        </div>
+        <div class="priceBar ml20">
+          <div class="inlineBar start">
+            <div class="greenBar green">
+              <div class="numBlock ml15">
+                <div class="first">卖价</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>
+            </div>
+            <div class="greenBar green">
+              <div class="numBlock ml15">
+                <div class="first">卖价</div>
+                <div class="last">{{selectedRow.sellprice}}</div>
+              </div>
+              <div class="numBlock">
+                <div class="first">卖量</div>
+                <div class="last">{{selectedRow.sellqty}}</div>
+              </div>
             </div>
-            <div class="inlineBar">
-                <div class="valNums bdf1 ml10">
-                    <!-- 最新价 -->
-                    <div class="firstNum start red1">1255.00</div>
-                    <div class="lastNum start">
-                        <!-- 涨跌值 -->
-                        <div class="red1">1255.00</div>
-                        <!-- 涨跌幅 -->
-                        <div class="red1 ml20">1255.00</div>
-                    </div>
-                </div>
-                <div class="priceBar ml20">
-                    <div class="inlineBar start">
-                        <div class="greenBar green">
-                            <div class="numBlock ml15">
-                                <div class="first">卖价</div>
-                                <div class="last">{{selectedRow.sellprice}}</div>
-                            </div>
-                            <div class="numBlock">
-                                <div class="first">卖量</div>
-                                <div class="last">{{selectedRow.sellqty}}</div>
-                            </div>
-                        </div>
-                        <div class="greenBar green">
-                            <div class="numBlock ml15">
-                                <div class="first">卖价</div>
-                                <div class="last">{{selectedRow.sellprice}}</div>
-                            </div>
-                            <div class="numBlock">
-                                <div class="first">卖量</div>
-                                <div class="last">{{selectedRow.sellqty}}</div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="inlineBar start">
-                        <div class="redBar red1">
-                            <div class="numBlock">
-                                <div class="first">买价</div>
-                                <div class="last">{{selectedRow.buyprice}}</div>
-                            </div>
-                            <div class="numBlock">
-                                <div class="first">买量</div>
-                                <div class="last">{{selectedRow.buyqty}}</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+          </div>
+          <div class="inlineBar start">
+            <div class="redBar red1">
+              <div class="numBlock">
+                <div class="first">买价</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>
             </div>
-            <BtnList :btnList="btnListData" :record="selectedRow" @click="openComponent" />
+          </div>
         </div>
-        <!-- 交易图表 -->
-        <Chart v-if="showComponentsId === ComponentType.chart" @update="changeComponent" />
-        <!-- 买卖大厅内容 -->
-        <a-row class="buySellHall" v-if="showComponentsId === ComponentType.marketContent">
-            <a-col :span="12">
-                <Sell ref="sellRef" :parantSelectedRow="deliverGoods" />
-            </a-col>
-            <a-col :span="12">
-                <Buy ref="buyRef" :parantSelectedRow="deliverGoods" />
-            </a-col>
-        </a-row>
-        <!-- 成交明细 -->
-        <StockExchange
-            :deliverGoods="deliverGoods"
-            v-if="showComponentsId === ComponentType.tradeDetail"
-        />
-        <component
-            :is="componentId"
-            v-if="componentId"
-            :selectedRow="deliverGoods"
-            :parantSelectedRow="deliverGoods"
-            @cancel="closeComponent"
-        ></component>
+      </div>
     </div>
+    <!-- 交易图表 -->
+    <Chart v-if="showComponentsId === ComponentType.chart"
+           @update="changeComponent"
+           :deliverGoods="deliverGoods" />
+    <!-- 买卖大厅内容 -->
+    <a-row class="buySellHall"
+           v-if="showComponentsId === ComponentType.marketContent">
+      <a-col :span="12">
+        <Sell ref="sellRef"
+              :parantSelectedRow="deliverGoods" />
+      </a-col>
+      <a-col :span="12">
+        <Buy ref="buyRef"
+             :parantSelectedRow="deliverGoods" />
+      </a-col>
+    </a-row>
+    <!-- 成交明细 -->
+    <StockExchange :deliverGoods="deliverGoods"
+                   v-if="showComponentsId === ComponentType.tradeDetail" />
+    <component :is="componentId"
+               v-if="componentId"
+               :selectedRow="deliverGoods"
+               :parantSelectedRow="deliverGoods"
+               @cancel="closeComponent"></component>
+  </div>
 </template>
 
 <script lang="ts">
@@ -105,6 +117,7 @@ import { QueryDeliveryRelationRsp } from '@/services/go/delivery/interface';
 import StockExchange from '../stock-exchange/index.vue';
 import Chart from '../chart/index.vue';
 import { ComponentType } from '../../setup';
+import { handleSubcriteOnDemandQuote, handleQuotePriceColor, quoteChange, quoteAmplitude, quoteAmplituOfVibration } from '@/common/setup/table/tableQuote';
 
 export default defineComponent({
     emits: ['cancel', 'update'],
@@ -188,6 +201,11 @@ export default defineComponent({
             ComponentType,
             showComponentsId,
             cancelAction,
+            handleSubcriteOnDemandQuote,
+            handleQuotePriceColor,
+            quoteChange,
+            quoteAmplitude,
+            quoteAmplituOfVibration,
         };
     },
 });

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

@@ -1,97 +1,50 @@
 <template>
-    <!-- 交易图表  -->
-    <div class="chart-container">
-        <div class="chart-content"></div>
-        <div class="chart-tips">
-            <a-tabs class="chartTabs" v-model:activeKey="activeKey">
-                <a-tab-pane key="1" tab="卖挂">
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                    <div class="chartRow">
-                        <div class="left">江**铜</div>
-                        <div class="middle">6287</div>
-                        <div class="right">30</div>
-                    </div>
-                </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" class="watchMore">查看更多</div>
-        </div>
+  <!-- 交易图表  -->
+  <div class="chart-container">
+    <div class="chart-content"></div>
+    <div class="chart-tips">
+      <a-tabs class="chartTabs"
+              v-model:activeKey="activeKey"
+              @change="change">
+        <a-tab-pane key="1"
+                    ref="tabRef1"
+                    tab="卖挂">
+          <div class="chartRow"
+               v-for="(item, index) in sellList"
+               :key="index + '11'">
+            <div class="left">{{item.username}}</div>
+            <div class="middle">{{item.orderqty}}</div>
+            <div class="right">{{item.orderprice}}</div>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="2"
+                    class="chartTabs"
+                    tab="买挂">
+          <div class="chartRow"
+               v-for="(item, index) in buyList"
+               :key="index + '11'">
+            <div class="left">{{item.username}}</div>
+            <div class="middle">{{item.orderqty}}</div>
+            <div class="right">{{item.orderprice}}</div>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="3"
+                    class="chartTabs"
+                    tab="成交">
+          成交
+          <div class="chartRow"
+               v-for="(item, index) in tradedList"
+               :key="index + '11'">
+            <div class="left">{{formatTime(item.TS, 'hm')}}</div>
+            <div class="middle">{{item.PE}}</div>
+            <div class="right">{{item.Vol}}</div>
+          </div>
+        </a-tab-pane>
+      </a-tabs>
+      <div @click="watchMore"
+           class="watchMore">查看更多</div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -103,12 +56,10 @@ import { QueryHistoryTikDatasRsp, QueryQuoteDayRsp } from '@/services/go/quote/i
 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' },
-];
+import { WrTradeOrderDetailReq } from '@/services/go/wrtrade/interface';
+import { useQueryData } from '@/common/setup/request';
+import { queryWrTradeOrderDetail } from '@/services/go/wrtrade';
+import { formatTime } from '@/common/methods';
 
 export default defineComponent({
     emits: ['cancel', 'update'],
@@ -128,48 +79,43 @@ export default defineComponent({
             const type: ComponentType = activeKey.value === '3' ? ComponentType.tradeDetail : ComponentType.marketContent;
             context.emit('update', type);
         }
-        const param = {
-            goodsCode: props.deliverGoods.goodscode,
+        const { goodsid, goodscode } = props.deliverGoods;
+        // 买挂
+        const param: WrTradeOrderDetailReq = {
+            buyorsell: 0,
+            goodsid,
+        };
+        const { list: buyList, update: buyUpdate } = useQueryData(queryWrTradeOrderDetail, param);
+
+        // 卖挂
+        const sellParam: WrTradeOrderDetailReq = {
+            buyorsell: 1,
+            goodsid,
         };
-        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]);
-                        }
-                    }
-                }
+        const { list: sellList, update: sellUpdate } = useQueryData(queryWrTradeOrderDetail, sellParam);
+
+        // 成交
+        const { list: tradedList, update: tradedUpdate } = useQueryData(QueryHistoryTikDatas, { goodsCode: goodscode });
+        function change(activeKey: string) {
+            if (activeKey === '1') {
+                sellUpdate();
+            } else if (activeKey === '2') {
+                buyUpdate();
+            } else {
+                tradedUpdate();
             }
-            return result;
         }
         return {
             cancel,
             visible,
-            tableList,
-            columnsList,
+            buyList,
+            sellList,
+            tradedList,
+            change,
             loading,
             activeKey,
             watchMore,
+            formatTime,
         };
     },
 });

src/views/market/spot_trade/spot_trade_order_transaction/components/stock-exchange/index.vue

@@ -42,6 +42,7 @@ 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 { formatTime } from '@/common/methods';
 
 const columnsList = [
     { title: '时间', key: 'TS', dataIndex: 'TS', align: 'center' },
@@ -67,6 +68,7 @@ export default defineComponent({
         };
         const tableList = ref<QueryHistoryTikDatasRsp[][]>([]);
         QueryHistoryTikDatas(param).then((res) => {
+            res.forEach((el) => (el.TS = formatTime(el.TS)));
             tableList.value = getHisList(res);
         });
         function getHisList(list: QueryHistoryTikDatasRsp[]) {

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

@@ -0,0 +1,83 @@
+<template>
+  <!-- 交易图表  -->
+  <div class="chart-container">
+    <div class="chart-content"></div>
+    <div class="chart-tips">
+      <div>
+        <div class="chartRow"
+             v-for="(item, index) in tradedList"
+             :key="index + '11'">
+          <div class="left">{{formatTime(item.TS, 'hm')}}</div>
+          <div class="middle">{{item.PE}}</div>
+          <div class="right">{{item.Vol}}</div>
+        </div>
+      </div>
+      <div @click="watchMore"
+           class="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 { WrTradeOrderDetailReq } from '@/services/go/wrtrade/interface';
+import { useQueryData } from '@/common/setup/request';
+import { queryWrTradeOrderDetail } from '@/services/go/wrtrade';
+import { formatTime } from '@/common/methods';
+import { ComponentType } from '../setup';
+
+export default defineComponent({
+    emits: ['cancel', 'update'],
+    name: 'stock-exchange',
+    props: {
+        selectedRow: {
+            type: Object as PropType<QueryQuoteDayRsp>,
+            default: {},
+        },
+    },
+
+    setup(props, context) {
+        const loading = ref<boolean>(false);
+        const { visible, cancel } = _closeModal(context);
+        const activeKey = ref('1');
+        function watchMore() {
+            context.emit('update', ComponentType.tradeDetail);
+        }
+        const { goodscode } = props.selectedRow;
+
+        // 成交
+        const { list: tradedList } = useQueryData(QueryHistoryTikDatas, { goodsCode: goodscode });
+        return {
+            cancel,
+            visible,
+
+            tradedList,
+            loading,
+            activeKey,
+            watchMore,
+            formatTime,
+        };
+    },
+});
+</script>
+<style lang="less">
+.chart-container {
+    display: flex;
+    width: 100%;
+    height: calc(100% - 41px);
+    .chart-content {
+        flex: 1;
+        height: 100%;
+    }
+    .chart-tips {
+        width: 300px;
+        height: 100%;
+    }
+}
+</style>

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

@@ -0,0 +1,188 @@
+<template>
+  <!-- 买卖大厅 -->
+  <div class="buy-sell-market">
+    <div class="buy-sell-market-title">
+      <a class="backIcon"
+         @click="cancelAction">
+        <LeftOutlined />
+      </a>
+      <div class="titleBtn">
+        <div class="name">{{selectedRow.goodscode}} {{selectedRow.goodsname}}</div>
+        <div class="arrowRightIcon"></div>
+      </div>
+      <div class="inlineBar">
+        <div class="valNums bdf1 ml10">
+          <!-- 最新价 -->
+          <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="ml20"
+                 :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">
+              {{quoteAmplituOfVibration(selectedRow, selectedRow.decimalplace)}}</div>
+          </div>
+        </div>
+        <div class="priceBar ml20">
+          <div class="inlineBar start">
+            <div class="greenBar green">
+              <div class="numBlock ml15">
+                <div class="first">卖价</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>
+            </div>
+            <div class="greenBar green">
+              <div class="numBlock ml15">
+                <div class="first">卖价</div>
+                <div class="last">{{selectedRow.sellprice}}</div>
+              </div>
+              <div class="numBlock">
+                <div class="first">卖量</div>
+                <div class="last">{{selectedRow.sellqty}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="inlineBar start">
+            <div class="redBar red1">
+              <div class="numBlock">
+                <div class="first">买价</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>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 交易图表 -->
+    <Chart v-if="showComponentsId === ComponentType.chart"
+           @update="changeComponent"
+           :selectedRow="selectedRow" />
+    <!-- 成交明细 -->
+    <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 { _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 { 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';
+import { handleSubcriteOnDemandQuote, handleQuotePriceColor, quoteChange, quoteAmplitude, quoteAmplituOfVibration } from '@/common/setup/table/tableQuote';
+
+export default defineComponent({
+    emits: ['cancel', 'update'],
+    name: 'buy-sell-market',
+    props: {
+        selectedRow: {
+            type: Object as PropType<QueryQuoteDayRsp>,
+            default: {},
+        },
+    },
+    components: {
+        Chart,
+        LeftOutlined,
+        StockExchange,
+    },
+    setup(props, context) {
+        const loading = ref<boolean>(false);
+        const { visible, cancel } = _closeModal(context);
+
+        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;
+            }
+        }
+        return {
+            cancel,
+            visible,
+            changeComponent,
+            ComponentType,
+            showComponentsId,
+            cancelAction,
+            handleSubcriteOnDemandQuote,
+            handleQuotePriceColor,
+            quoteChange,
+            quoteAmplitude,
+            quoteAmplituOfVibration,
+        };
+    },
+});
+</script>
+<style lang="less">
+.valNums {
+    .flex;
+    flex-direction: column;
+    padding-left: 20px;
+    .firstNum {
+        font-size: 18px;
+        line-height: 18px;
+        font-weight: 400;
+    }
+    .lastNum {
+        margin-top: 2px;
+        display: inline-flex;
+        font-size: 12px;
+        line-height: 12px;
+        font-weight: 300;
+    }
+}
+.inlineBar {
+    display: inline-flex;
+}
+.priceBar {
+    .flex;
+    flex-direction: column;
+    height: 32px;
+    .greenBar,
+    .redBar {
+        height: 16px;
+        line-height: 16px;
+    }
+}
+.start {
+    align-self: flex-start !important;
+    align-items: flex-start !important;
+}
+</style>

src/views/market/spot_trade/spot_trade_reference_market/components/setup.ts

@@ -0,0 +1,4 @@
+export enum ComponentType {
+    chart,
+    tradeDetail,
+}

src/views/market/spot_trade/spot_trade_reference_market/components/stock-exchange/index.vue

@@ -0,0 +1,112 @@
+<template>
+  <!-- 成交明细  -->
+  <a-row>
+    <a-col :span="8">
+      <a-table :columns="columnsList"
+               class="srcollYTable"
+               :pagination="false"
+               :loading="loading"
+               rowKey="key"
+               ref="tableRef"
+               :data-source="tableList[0]">
+      </a-table>
+    </a-col>
+    <a-col :span="8">
+      <a-table :columns="columnsList"
+               class="srcollYTable"
+               :pagination="false"
+               :loading="loading"
+               rowKey="key"
+               ref="tableRef"
+               :data-source="tableList[1]">
+      </a-table>
+    </a-col>
+    <a-col :span="8">
+      <a-table :columns="columnsList"
+               class="srcollYTable"
+               :pagination="false"
+               :loading="loading"
+               rowKey="key"
+               ref="tableRef"
+               :data-source="tableList[2]">
+      </a-table>
+    </a-col>
+  </a-row>
+</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 { formatTime } from '@/common/methods';
+
+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: {
+        selectedRow: {
+            type: Object as PropType<QueryQuoteDayRsp>,
+            default: {},
+        },
+    },
+
+    setup(props, context) {
+        const loading = ref<boolean>(false);
+        const { visible, cancel } = _closeModal(context);
+        const param = {
+            goodsCode: props.selectedRow.goodscode,
+        };
+        const tableList = ref<QueryHistoryTikDatasRsp[][]>([]);
+        QueryHistoryTikDatas(param).then((res) => {
+            res.forEach((el) => (el.TS = formatTime(el.TS)));
+            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,
+        };
+    },
+});
+</script>
+<style lang="less">
+</style>

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

@@ -110,7 +110,7 @@ export default defineComponent({
         contextMenu,
         // [ModalEnum.spot_trade_warehouse_detail]: defineAsyncComponent(() => import('../../components/detail/index.vue')),
         // [ModalEnum.spot_trade_warehouse_post_buying]: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
-        buyAndSell: defineAsyncComponent(() => import('../components/buy-sell-market/index.vue')),
+        buyAndSell: defineAsyncComponent(() => import('./components/container/index.vue')),
         // postBuying: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
     },
     setup() {

src/views/order/commodity_contract/components/commodity_contract_summary/components/commodity_contract_summary_settlement/index.vue

@@ -1,128 +1,124 @@
 <template>
-    <!-- 交收-->
-    <Drawer
-        :title="'交收'"
-        :placement="'right'"
-        class="bottom486"
-        :visible="visible"
-        @cancel="cancel"
-    >
-        <div class="listed c_c_s_s">
-            <a-form class="inlineForm dialogForm" ref="formRef" :model="formState" :rules="rules">
-                <div class="formBar">
-                    <div class="formtop">
-                        <div class="firstTitle">
-                            <span>合约数量 10，</span>
-                            <span>可交收数量 50 吨</span>
-                        </div>
-                        <div class="secondLine">
-                            <div class="left">持有人/商品/仓库</div>
-                            <div class="middle">升贴水/数量</div>
-                            <div class="right">选择数量</div>
-                        </div>
-                        <a-checkbox-group class="commonCheckboxGroup">
-                            <div class="lineBar">
-                                <div class="line1">
-                                    <div class>
-                                        <a-checkbox></a-checkbox>
-                                    </div>
-                                    <div class="name">南**业</div>
-                                </div>
-                                <div class="line2">
-                                    <div class="left">
-                                        <div>铜杆-12mm-江铜</div>
-                                        <div>蛇口仓库</div>
-                                    </div>
-                                    <div class="middle">
-                                        <div>2</div>
-                                        <div>50吨</div>
-                                    </div>
-                                    <div class="right">
-                                        <template class="inputNumberBlock">
-                                            <a-input-number
-                                                class="dialogInput dialogInput34"
-                                                style="width: 100px !important; height: 34px;"
-                                                :min="0"
-                                            ></a-input-number>
-                                            <MinusOutlined />
-                                            <PlusOutlined />
-                                        </template>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="lineBar">
-                                <div class="line1">
-                                    <div class>
-                                        <a-checkbox></a-checkbox>
-                                    </div>
-                                    <div class="name">南**业</div>
-                                </div>
-                                <div class="line2">
-                                    <div class="left">
-                                        <div>铜杆-12mm-江铜</div>
-                                        <div>蛇口仓库</div>
-                                    </div>
-                                    <div class="middle">
-                                        <div>2</div>
-                                        <div>50吨</div>
-                                    </div>
-                                    <div class="right">
-                                        <template class="inputNumberBlock disabled">
-                                            <a-input-number
-                                                class="dialogInput dialogInput34"
-                                                style="width: 100px !important; height: 34px;"
-                                                :min="0"
-                                                disabled
-                                            ></a-input-number>
-                                            <MinusOutlined />
-                                            <PlusOutlined />
-                                        </template>
-                                    </div>
-                                </div>
-                            </div>
-                        </a-checkbox-group>
-                    </div>
-                    <div class="formbottom">
-                        <div class="line1">
-                            <div>
-                                <span>已点选数量</span>
-                                <span class="white">40吨</span>
-                                <span>，需合约数量</span>
-                                <span class="white">8</span>
-                            </div>
-                            <div class="yellow">升贴水1100</div>
-                        </div>
-                        <div class="line2">
-                            <div>点价合约</div>
-                            <div class="right">
-                                <div>C2109</div>
-                                <div>1398.00</div>
-                            </div>
-                        </div>
-                        <div class="line3">预估贷款：71,000.00</div>
-                    </div>
+  <!-- 交收-->
+  <Drawer :title="'交收'"
+          :placement="'right'"
+          class="bottom486"
+          :visible="visible"
+          @cancel="cancel">
+    <div class="listed c_c_s_s">
+      <a-form class="inlineForm dialogForm"
+              ref="formRef"
+              :model="formState"
+              :rules="rules">
+        <div class="formBar">
+          <div class="formtop">
+            <div class="firstTitle">
+              <span>合约数量 10，</span>
+              <span>可交收数量 50 吨</span>
+            </div>
+            <div class="secondLine">
+              <div class="left">持有人/商品/仓库</div>
+              <div class="middle">升贴水/数量</div>
+              <div class="right">选择数量</div>
+            </div>
+            <a-checkbox-group class="commonCheckboxGroup">
+              <div class="lineBar">
+                <div class="line1">
+                  <div class>
+                    <a-checkbox></a-checkbox>
+                  </div>
+                  <div class="name">南**业</div>
                 </div>
-                <a-row :gutter="24">
-                    <a-col :span="24" class="fixedBtns">
-                        <a-form-item class="btnCenter">
-                            <a-button
-                                class="listedBtn"
-                                :loading="loading"
-                                :disabled="loading"
-                                @click="submit"
-                            >提交</a-button>
-                        </a-form-item>
-                    </a-col>
-                </a-row>
-            </a-form>
+                <div class="line2">
+                  <div class="left">
+                    <div>铜杆-12mm-江铜</div>
+                    <div>蛇口仓库</div>
+                  </div>
+                  <div class="middle">
+                    <div>2</div>
+                    <div>50吨</div>
+                  </div>
+                  <div class="right">
+                    <template class="inputNumberBlock">
+                      <a-input-number class="dialogInput dialogInput34"
+                                      style="width: 100px !important; height: 34px;"
+                                      :min="0"></a-input-number>
+                      <MinusOutlined />
+                      <PlusOutlined />
+                    </template>
+                  </div>
+                </div>
+              </div>
+              <div class="lineBar">
+                <div class="line1">
+                  <div class>
+                    <a-checkbox></a-checkbox>
+                  </div>
+                  <div class="name">南**业</div>
+                </div>
+                <div class="line2">
+                  <div class="left">
+                    <div>铜杆-12mm-江铜</div>
+                    <div>蛇口仓库</div>
+                  </div>
+                  <div class="middle">
+                    <div>2</div>
+                    <div>50吨</div>
+                  </div>
+                  <div class="right">
+                    <template class="inputNumberBlock disabled">
+                      <a-input-number class="dialogInput dialogInput34"
+                                      style="width: 100px !important; height: 34px;"
+                                      :min="0"
+                                      disabled></a-input-number>
+                      <MinusOutlined />
+                      <PlusOutlined />
+                    </template>
+                  </div>
+                </div>
+              </div>
+            </a-checkbox-group>
+          </div>
+          <div class="formbottom">
+            <div class="line1">
+              <div>
+                <span>已点选数量</span>
+                <span class="white">40吨</span>
+                <span>，需合约数量</span>
+                <span class="white">8</span>
+              </div>
+              <div class="yellow">升贴水1100</div>
+            </div>
+            <div class="line2">
+              <div>点价合约</div>
+              <div class="right">
+                <div>C2109</div>
+                <div>1398.00</div>
+              </div>
+            </div>
+            <div class="line3">预估贷款：71,000.00</div>
+          </div>
         </div>
-    </Drawer>
+        <a-row :gutter="24">
+          <a-col :span="24"
+                 class="fixedBtns">
+            <a-form-item class="btnCenter">
+              <a-button class="listedBtn"
+                        :loading="loading"
+                        :disabled="loading"
+                        @click="submit">提交</a-button>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+  </Drawer>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType, ref } from 'vue';
 import Drawer from '@/common/components/drawer/index.vue';
-import { WrPerformancePlan, WrPosition } from '@/services/go/wrtrade/interface';
+import { QueryWrDeliveryAvalidHoldLBReq, WrDeliveryAvalidHoldLB, WrPerformancePlan, WrPosition } from '@/services/go/wrtrade/interface';
 import { ModalEnum } from '@/common/constants/modalNameEnum';
 import { _closeModal } from '@/common/setup/modal/modal';
 // import { handleForm } from './setup';
@@ -137,6 +133,11 @@ import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo
 import { performanceContractedApply, performanceDelayApply } from '@/services/proto/performance';
 import { BuyOrSell } from '@/common/constants/enumCommon';
 import Long from 'long';
+import { queryTableList } from '@/common/setup/table';
+import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
+import { useQueryData } from '@/common/setup/request';
+import { queryWrDeliveryAvalidHoldLB } from '@/services/go/wrtrade';
+import { QueryTradePositionRsp } from '@/services/go/ermcp/order/interface';
 import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
 
 export default defineComponent({
@@ -145,7 +146,7 @@ export default defineComponent({
     emits: ['cancel', 'update'],
     props: {
         selectedRow: {
-            type: Object as PropType<WrPerformancePlan>,
+            type: Object as PropType<QueryTradePositionRsp>,
             default: {},
         },
         buyOrSell: {
@@ -155,7 +156,12 @@ export default defineComponent({
     },
     setup(props, context) {
         const { visible, cancel } = _closeModal(context);
-        const loading = ref<boolean>(false);
+        const param: QueryWrDeliveryAvalidHoldLBReq = {
+            goodsid: props.selectedRow.goodsid,
+            accountid: getSelectedAccountId(),
+        };
+        const { loading, list } = useQueryData<WrDeliveryAvalidHoldLB>(queryWrDeliveryAvalidHoldLB, param);
+        console.log('listddd', list);
         // const { rules, formState, formRef } = handleForm();
         function submit() {
             // validateAction<FormState>(formRef, formState).then((param) => {