update

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,171 @@
+<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 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>
+    <!-- 交易图表 -->
+    <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';
+
+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,
+        };
+    },
+});
+</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

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