update

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

@@ -74,7 +74,7 @@ export default defineComponent({
             const ma: string[] = [];
             if (data.length >= count) {
                 // 均线起始位置
-                const startIndex = historyIndexs[count - 1];
+                const startIndex = historyIndexs[count - 1] ?? count;
                 for (let i = 0; i < data.length; i++) {
                     if (i < startIndex) {
                         ma.push('-');
@@ -303,9 +303,11 @@ export default defineComponent({
             // 查询K线数据
             queryHistoryDatas(params).then((res) => {
                 loading.value = false;
-                // 日期升序排序
-                const kdata = res.sort((a, b) => moment(a.ts).valueOf() - moment(b.ts).valueOf());
-                handleData(kdata);
+                if (res.length) {
+                    // 日期升序排序
+                    const kdata = res.sort((a, b) => moment(a.ts).valueOf() - moment(b.ts).valueOf());
+                    handleData(kdata);
+                }
                 initOptions(props.seriesType);
             });
         });

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

@@ -231,7 +231,7 @@ export function handleEchart() {
                         data: [
                             {
                                 // 当前价
-                                yAxis: datas[datas.length - 1][1],
+                                yAxis: datas.length ? datas[datas.length - 1][1] : 0,
                             },
                         ],
                     },
@@ -401,7 +401,7 @@ export function handleEchart() {
                             data: [
                                 {
                                     // 当前价
-                                    yAxis: datas[datas.length - 1][1],
+                                    yAxis: datas.length ? datas[datas.length - 1][1] : 0,
                                 },
                             ],
                         },

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

@@ -97,16 +97,16 @@ export default defineComponent({
         };
 
         // 计算平均线
-        const calcMA = (datas: number[], count: number, decimal: number) => {
+        const calcMA = (data: number[], count: number, decimal: number) => {
             const result: string[] = [];
-            if (datas.length >= count) {
+            if (data.length >= count) {
                 // 均线起始位置
-                const startIndex = historyIndexs[count - 1];
-                datas.forEach((item, index) => {
-                    if (index < startIndex) {
+                const startIndex = historyIndexs[count - 1] ?? count;
+                for (let i = 0; i < data.length; i++) {
+                    if (i < startIndex) {
                         result.push('-');
                     } else {
-                        const j = historyIndexs.findIndex((val) => val === index);
+                        const j = historyIndexs.findIndex((val) => val === i);
                         // 判断是否补充数据
                         if (j === -1) {
                             // 取上个平均值
@@ -115,13 +115,13 @@ export default defineComponent({
                             // 向后取MA数
                             const maIndexs = historyIndexs.slice(j - (count - 1), j + 1);
                             // 计算总价
-                            const total = maIndexs.reduce((sum, val) => sum + datas[val], 0);
+                            const total = maIndexs.reduce((sum, val) => sum + data[val], 0);
                             // 计算均线
                             const ma = toDecimalFull(total / count, decimal);
                             result.push(ma);
                         }
                     }
-                });
+                }
             }
             return result;
         };
@@ -162,9 +162,11 @@ export default defineComponent({
             loading.value = true;
             // 查询分时数据
             QueryTSData(props.quoteData.goodscode).then((res) => {
-                handleData(res);
-                initOptions();
                 loading.value = false;
+                if (res.historyDatas.length) {
+                    handleData(res);
+                }
+                initOptions();
             });
         });
 

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

@@ -1,113 +1,85 @@
 <template>
-  <!-- 买卖大厅 -->
-  <div class="buy-sell-market">
-    <div class="buy-sell-market-title">
-      <a class="backIcon"
-         @click="cancel">
-        <LeftOutlined />
-      </a>
-      <div class="titleBtn">
-        <div class="name">{{selectedRow.deliverygoodsname}}</div>
-        <div class="arrowRightIcon"></div>
-      </div>
-      <div class="titleBtn titleBtn2">
-        <div class="arrowLeftIcon"></div>
-        <div class="name">{{selectedRow.wrgoodsname}}</div>
-        <div class="arrowRightIcon"></div>
-      </div>
-      <div class="titleBtn titleBtn2">
-        <div class="arrowLeftIcon"></div>
-        <div class="name">{{selectedRow.warehousename}}</div>
-        <div class="arrowRightIcon"></div>
-      </div>
-      <div class="titleBtn titleBtn3"
-           v-if="!isWR(enumName)">
-        <div class="arrowLeftIcon"></div>
-        <div class="name">
-          <a-month-picker :allowClear="false"
-                          v-model:value="time"
-                          @change="timeChange"
-                          class="commonDatePicker conditionPicker" />
-        </div>
-        <DownOutlined />
-      </div>
+    <!-- 买卖大厅 -->
+    <div class="buy-sell-market">
+        <div class="buy-sell-market-title">
+            <a class="backIcon" @click="cancel">
+                <LeftOutlined />
+            </a>
+            <div class="titleBtn">
+                <div class="name">{{ selectedRow.deliverygoodsname }}</div>
+                <div class="arrowRightIcon"></div>
+            </div>
+            <div class="titleBtn titleBtn2">
+                <div class="arrowLeftIcon"></div>
+                <div class="name">{{ selectedRow.wrgoodsname }}</div>
+                <div class="arrowRightIcon"></div>
+            </div>
+            <div class="titleBtn titleBtn2">
+                <div class="arrowLeftIcon"></div>
+                <div class="name">{{ selectedRow.warehousename }}</div>
+                <div class="arrowRightIcon"></div>
+            </div>
+            <div class="titleBtn titleBtn3" v-if="!isWR(enumName)">
+                <div class="arrowLeftIcon"></div>
+                <div class="name">
+                    <a-month-picker :allowClear="false" v-model:value="time" @change="timeChange" class="commonDatePicker conditionPicker" />
+                </div>
+                <DownOutlined />
+            </div>
 
-      <div class="priceBar bdf1 ml20">
-        <div class="greenBar green">
-          <div class="numBlock"
-               v-if="isFloat()">
-            <div class="first">卖基差</div>
-            <div class="last">{{selectedRow.sellpricemove}}</div>
-          </div>
-          <div class="numBlock"
-               v-else>
-            <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="redBar red">
-          <div class="numBlock"
-               v-if="isFloat()">
-            <div class="first">买基差</div>
-            <div class="last">{{selectedRow.buypricemove}}</div>
-          </div>
-          <div class="numBlock ml15"
-               v-else>
-            <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 class="priceBar bdf1 ml20">
+                <div class="greenBar green">
+                    <div class="numBlock" v-if="isFloat()">
+                        <div class="first">卖基差</div>
+                        <div class="last">{{ selectedRow.sellpricemove }}</div>
+                    </div>
+                    <div class="numBlock" v-else>
+                        <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="redBar red">
+                    <div class="numBlock" v-if="isFloat()">
+                        <div class="first">买基差</div>
+                        <div class="last">{{ selectedRow.buypricemove }}</div>
+                    </div>
+                    <div class="numBlock ml15" v-else>
+                        <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>
+            <a-button class="market" v-if="isFloat()" @click="openChartComponent">
+                <div class="first">{{ selectedRow.goodscode }}</div>
+                <div class="last red">{{ getGoodsPrice() }}</div>
+                <LineChartOutlined />
+            </a-button>
+            <!-- 历史走势按钮 -->
+            <a-button class="historyBtn" @click="openComponent({ code: 'HisChart' })">
+                历史走势
+                <LineChartOutlined />
+            </a-button>
+            <BtnList :btnList="firstBtn" :record="selectedRow" @click="openComponent" />
         </div>
-      </div>
-      <div class="market"
-           v-if="isFloat()">
-        <div class="first">{{selectedRow.goodscode}}</div>
-        <div class="last red">{{getGoodsPrice()}}</div>
-        <LineChartOutlined />
-      </div>
-      <!-- 历史走势按钮 -->
-      <a-button class="historyBtn"
-                @click="openComponent({code: 'HisChart'})">
-        历史走势
-        <LineChartOutlined />
-      </a-button>
-      <BtnList :btnList="firstBtn"
-               :record="selectedRow"
-               @click="openComponent" />
+        <a-row class="buySellHall">
+            <a-col :span="12" v-if="sellMarket.isMarket">
+                <Sell :enumName="enumName" ref="sellRef" :parantSelectedRow="selectedRow" :time="time" :btnList="handleBtnList(sellMarket.btnList)" />
+            </a-col>
+            <a-col :span="12" v-if="buyMarket.isMarket">
+                <Buy :enumName="enumName" ref="buyRef" :time="time" :parantSelectedRow="selectedRow" :btnList="handleBtnList(buyMarket.btnList)" />
+            </a-col>
+        </a-row>
+        <GoodsChart v-if="showChartComponent" :enumName="enumName" :selectedRow="quoteDayInfo" @cancel="closeChartComponent" />
+        <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" :goodsPrice="getGoodsPrice()" :enumName="enumName" :time="time" @cancel="closeComponent"> </component>
     </div>
-    <a-row class="buySellHall">
-      <a-col :span="12"
-             v-if="sellMarket.isMarket">
-        <Sell :enumName="enumName"
-              ref="sellRef"
-              :parantSelectedRow="selectedRow"
-              :time="time"
-              :btnList="handleBtnList(sellMarket.btnList)" />
-      </a-col>
-      <a-col :span="12"
-             v-if="buyMarket.isMarket">
-        <Buy :enumName="enumName"
-             ref="buyRef"
-             :time="time"
-             :parantSelectedRow="selectedRow"
-             :btnList="handleBtnList(buyMarket.btnList)" />
-      </a-col>
-    </a-row>
-    <component :is="componentId"
-               v-if="componentId"
-               :selectedRow="selectedRow"
-               :goodsPrice="getGoodsPrice()"
-               :enumName="enumName"
-               :time="time"
-               @cancel="closeComponent"></component>
-  </div>
 </template>
 
 <script lang="ts">
@@ -126,11 +98,12 @@ import { handleSpotBtnList } from '../../setup';
 import { v4 } from 'uuid';
 import { addSubscribeQuotation, removeSubscribeQuotation } from '@/services/socket/quota';
 import Bus from '@/utils/eventBus/index';
-import { getQuoteDayInfoByCodeFindPrice } from '@/services/bus/goods';
+import { getQuoteDayInfoByCodeFindPrice, getQuoteDayInfoByCode } from '@/services/bus/goods';
 import TimerUtils from '@/utils/timer/timerUtil';
 import { BtnListType } from '@/common/components/btnList/interface';
 import moment, { Moment } from 'moment';
 import { BuyOrSell } from '@/common/constants/enumCommon';
+import { QueryQuoteDayRsp } from '@/services/go/quote/interface';
 
 export default defineComponent({
     emits: ['cancel', 'update'],
@@ -155,12 +128,16 @@ export default defineComponent({
         [ModalEnum.spot_trade_warehouse_detail]: defineAsyncComponent(() => import('../detail/index.vue')),
         [ModalEnum.spot_trade_warehouse_post_buying]: defineAsyncComponent(() => import('../post_buying/index.vue')),
         HisChart: defineAsyncComponent(() => import('../history-chart/index.vue')),
+        GoodsChart: defineAsyncComponent(() => import('../goods-chart/index.vue')), // 待优化
     },
     setup(props, context) {
         const time = ref<Moment>(moment(props.selectedRow.deliverymonth)); // string 交收月
         const loading = ref<boolean>(false);
         const { visible, cancel } = _closeModal(context);
 
+        const showChartComponent = ref(false); // 显示/隐藏图表
+        const quoteDayInfo = ref<QueryQuoteDayRsp>(); // 盘口数据
+
         const { isWR, isFloat } = handleIs(props.enumName, BuyOrSell.buy);
         // 买卖大厅 配置数据
         // 表格操作按钮列表
@@ -217,6 +194,19 @@ export default defineComponent({
         // 单据挂牌成功 通知买大厅刷新数据
         Bus.$on('spotTrade', queryFn);
 
+        const openChartComponent = () => {
+            quoteDayInfo.value = getQuoteDayInfoByCode(props.selectedRow.goodscode);
+            if (quoteDayInfo.value) {
+                showChartComponent.value = true;
+            } else {
+                console.error('盘口数据获取失败');
+            }
+        };
+
+        const closeChartComponent = () => {
+            showChartComponent.value = false;
+        };
+
         return {
             time,
             buyRef,
@@ -235,6 +225,10 @@ export default defineComponent({
             handleBtnList,
             isWR,
             timeChange,
+            quoteDayInfo,
+            showChartComponent,
+            openChartComponent,
+            closeChartComponent,
         };
     },
 });

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

@@ -0,0 +1,164 @@
+<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)"> {{ quoteAmplitude(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>
+                    <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 { getQuoteDayInfoByCode } from '@/services/bus/goods';
+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_order_transaction/components/buy-sell-market/index.vue

@@ -1,91 +1,70 @@
 <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', 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)">
-              {{quoteAmplitude(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 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>
-          <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 class="inlineBar">
+                <div class="valNums bdf1 ml10">
+                    <!-- 最新价 -->
+                    <div :class="['firstNum', 'start', 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)"> {{ quoteAmplitude(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>
+                    <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>
+                <BtnList :btnList="btnListData" :record="selectedRow" @click="openComponent" />
             </div>
-          </div>
         </div>
-        <BtnList :btnList="btnListData"
-                 :record="selectedRow"
-                 @click="openComponent" />
-      </div>
+        <!-- 交易图表 -->
+        <!-- <Chart v-if="showComponentsId === ComponentType.chart" @update="changeComponent" :deliverGoods="deliverGoods" /> -->
+        <Chart v-if="showComponentsId === ComponentType.chart" @update="changeComponent" :selectedRow="selectedRow" />
+        <!-- 买卖大厅内容 -->
+        <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="selectedRow" :deliverGoods="deliverGoods" @cancel="closeComponent"></component>
     </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="selectedRow"
-               :deliverGoods="deliverGoods"
-               @cancel="closeComponent"></component>
-  </div>
 </template>
 
 <script lang="ts">
@@ -106,7 +85,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 Chart from '../chart/index.vue';
+import Chart from '../../../components/goods-chart/chart/index.vue'; // 暂用组件，待优化
 import { ComponentType } from '../../setup';
 import { handleSubcriteOnDemandQuote, handleQuotePriceColor, quoteChange, quoteAmplitude, quoteAmplituOfVibration } from '@/common/setup/table/tableQuote';
 

src/views/market/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_listing_transfer/index.vue

@@ -1,65 +1,50 @@
 <template>
-  <!--订单交易 挂牌转让-->
-  <div class="topTableHeight">
-    <a-table :columns="columns"
-             :class="['srcollYTable', isBottom ? 'secondTabTable' : 'secondTabTableNoBottom', getQuoteList().length ? 'noPlaceHolder' : 'hasPlaceHolder']"
-             :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 407px)' : 'calc(100vh - 167px)' }"
-             :pagination="false"
-             :loading="loading"
-             :expandedRowKeys="expandedRowKeys"
-             :customRow="Rowclick"
-             rowKey="goodscode"
-             ref="tableRef"
-             :data-source="getQuoteList()">
-      <template #totalturnover="{ text }">
-        <span>{{changeUnit(text)}}</span>
-      </template>
-      <!-- 涨跌 -->
-      <template #change="{ record }">
-        <span>{{quoteChange(record, record.decimalplace)}}</span>
-      </template>
-      <!-- 幅度 -->
-      <template #amplitude="{ record }">
-        <span>{{quoteAmplitude(record, record.decimalplace)}}</span>
-      </template>
-      <!-- 振幅 -->
-      <template #vibration="{ record }">
-        <span>{{quoteAmplituOfVibration(record, record.decimalplace)}}</span>
-      </template>
-      <template #index="{ index }">
-        <span>{{index + 1}}</span>
-      </template>
-      <!-- 买价 -->
-      <template #bid="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
-      </template>
-      <!-- 卖价 -->
-      <template #ask="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
-      </template>
-      <!-- 最新价 -->
-      <template #last="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
-      </template>
-      <!-- 最低价 -->
-      <template #lowest="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
-      </template>
-      <!-- 最高价 -->
-      <template #highest="{ text, record }">
-        <span :class="handleQuotePriceColor(text, record.presettle)">{{text}}</span>
-      </template>
-    </a-table>
-    <!-- 右键 -->
-    <contextMenu :contextMenu="contextMenu"
-                 @cancel="closeContext"
-                 :list="btnList"></contextMenu>
-    <component :is="componentId"
-               v-if="componentId"
-               :selectedRow="selectedRow"
-               :deliverGoods="findDeilverGoodsByGoodsCode(selectedRow.goodscode)"
-               @cancel="closeComponent"></component>
-  </div>
+    <!--订单交易 挂牌转让-->
+    <div class="topTableHeight">
+        <a-table :columns="columns" :class="['srcollYTable', isBottom ? 'secondTabTable' : 'secondTabTableNoBottom', getQuoteList().length ? 'noPlaceHolder' : 'hasPlaceHolder']" :scroll="{ x: '100%', y: isBottom ? 'calc(100vh- 407px)' : 'calc(100vh - 167px)' }" :pagination="false" :loading="loading" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" rowKey="goodscode" ref="tableRef" :data-source="getQuoteList()">
+            <template #totalturnover="{ text }">
+                <span>{{ changeUnit(text) }}</span>
+            </template>
+            <!-- 涨跌 -->
+            <template #change="{ record }">
+                <span>{{ quoteChange(record, record.decimalplace) }}</span>
+            </template>
+            <!-- 幅度 -->
+            <template #amplitude="{ record }">
+                <span>{{ quoteAmplitude(record, record.decimalplace) }}</span>
+            </template>
+            <!-- 振幅 -->
+            <template #vibration="{ record }">
+                <span>{{ quoteAmplituOfVibration(record, record.decimalplace) }}</span>
+            </template>
+            <template #index="{ index }">
+                <span>{{ index + 1 }}</span>
+            </template>
+            <!-- 买价 -->
+            <template #bid="{ text, record }">
+                <span :class="handleQuotePriceColor(text, record.presettle)">{{ text }}</span>
+            </template>
+            <!-- 卖价 -->
+            <template #ask="{ text, record }">
+                <span :class="handleQuotePriceColor(text, record.presettle)">{{ text }}</span>
+            </template>
+            <!-- 最新价 -->
+            <template #last="{ text, record }">
+                <span :class="handleQuotePriceColor(text, record.presettle)">{{ text }}</span>
+            </template>
+            <!-- 最低价 -->
+            <template #lowest="{ text, record }">
+                <span :class="handleQuotePriceColor(text, record.presettle)">{{ text }}</span>
+            </template>
+            <!-- 最高价 -->
+            <template #highest="{ text, record }">
+                <span :class="handleQuotePriceColor(text, record.presettle)">{{ text }}</span>
+            </template>
+        </a-table>
+        <!-- 右键 -->
+        <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="btnList"></contextMenu>
+        <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" :deliverGoods="findDeilverGoodsByGoodsCode(selectedRow.goodscode)" @cancel="closeComponent"></component>
+    </div>
 </template>
 
 <script lang="ts">

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

@@ -1,176 +0,0 @@
-<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)">
-              {{ quoteAmplitude(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>
-          <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/index.vue

@@ -93,7 +93,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/container/index.vue')),
+        buyAndSell: defineAsyncComponent(() => import('../components/goods-chart/index.vue')),
         // postBuying: defineAsyncComponent(() => import('../../components/post_buying/index.vue')),
     },
     setup() {