|
|
@@ -2,7 +2,7 @@
|
|
|
<!-- 买卖大厅 -->
|
|
|
<div class="buy-sell-market">
|
|
|
<div class="buy-sell-market-title">
|
|
|
- <a class="backIcon" @click="cancelAction">
|
|
|
+ <a class="backIcon" @click="cancel()">
|
|
|
<LeftOutlined />
|
|
|
</a>
|
|
|
<div class="titleBtn">
|
|
|
@@ -51,12 +51,19 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <BtnList :btnList="handleBtnList()" :record="selectedRow" @click="openComponent" />
|
|
|
+ <BtnList :btnList="handleBtnList()" :record="selectedRow" @click="openComponent">
|
|
|
+ <template #after>
|
|
|
+ <a-button class="operBtn ant-btn" @click="changeComponent">
|
|
|
+ <span v-if="showComponentsId === ComponentType.marketContent">图表</span>
|
|
|
+ <span v-else>买卖大厅</span>
|
|
|
+ </a-button>
|
|
|
+ </template>
|
|
|
+ </BtnList>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 交易图表 -->
|
|
|
- <!-- <Chart v-if="showComponentsId === ComponentType.chart" @update="changeComponent" :deliverGoods="deliverGoods" /> -->
|
|
|
- <Chart v-if="showComponentsId === ComponentType.chart" @update="changeComponent" :selectedRow="selectedRow" />
|
|
|
+ <!-- <Chart v-if="showComponentsId === ComponentType.chart" :deliverGoods="deliverGoods" /> -->
|
|
|
+ <Chart v-if="showComponentsId === ComponentType.chart" :selectedRow="selectedRow" />
|
|
|
<!-- 买卖大厅内容 -->
|
|
|
<a-row class="buySellHall" v-if="showComponentsId === ComponentType.marketContent">
|
|
|
<a-col :span="12">
|
|
|
@@ -68,30 +75,25 @@
|
|
|
</a-row>
|
|
|
<!-- 成交明细 -->
|
|
|
<StockExchange :deliverGoods="deliverGoods" v-if="showComponentsId === ComponentType.tradeDetail" />
|
|
|
- <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" :deliverGoods="deliverGoods" @cancel="closeComponent"></component>
|
|
|
+ <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" :deliverGoods="deliverGoods"
|
|
|
+ @cancel="closeComponent"></component>
|
|
|
</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 { onBeforeUnmount, 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 Chart from '../../../components/goods-chart/chart/index.vue'; // 暂用组件,待优化
|
|
|
import { ComponentType } from '../../setup';
|
|
|
import { handleSubcriteOnDemandQuote, handleQuotePriceColor, quoteChange, quoteAmplitude, quoteAmplituOfVibration, handleNoneValue } from '@/common/setup/table/tableQuote';
|
|
|
import { Tradesfer } from '../../spot_trade_order_transaction_listing_transfer/interface';
|
|
|
@@ -113,14 +115,14 @@ export default defineComponent({
|
|
|
Buy,
|
|
|
Sell,
|
|
|
BtnList,
|
|
|
- Chart,
|
|
|
+ Chart: defineAsyncComponent(() => import('../../../components/goods-chart/chart/index.vue')),
|
|
|
LeftOutlined,
|
|
|
Listing: defineAsyncComponent(() => import('../listing/index.vue')),
|
|
|
Detail: defineAsyncComponent(() => import('../detail/index.vue')),
|
|
|
StockExchange,
|
|
|
},
|
|
|
setup(props, context) {
|
|
|
- const loading = ref<boolean>(false);
|
|
|
+ const loading = ref(false);
|
|
|
const { visible, cancel } = _closeModal(context);
|
|
|
function handleBtnList() {
|
|
|
const result: BtnListType[] = [{ lable: '挂牌求购', code: 'Listing', className: 'operBtn' }];
|
|
|
@@ -142,18 +144,14 @@ export default defineComponent({
|
|
|
};
|
|
|
const { componentId, closeComponent, openComponent } = handleModalComponent(queryFn, ref({}));
|
|
|
|
|
|
- const showComponentsId = ref<ComponentType>(ComponentType.chart);
|
|
|
+ const showComponentsId = ref<ComponentType>(ComponentType.marketContent);
|
|
|
|
|
|
// 切换组件
|
|
|
- function changeComponent(type: ComponentType) {
|
|
|
- showComponentsId.value = type;
|
|
|
- }
|
|
|
- // 返回上层组件
|
|
|
- function cancelAction() {
|
|
|
- if (showComponentsId.value === ComponentType.chart) {
|
|
|
- cancel();
|
|
|
+ function changeComponent() {
|
|
|
+ if (showComponentsId.value === ComponentType.marketContent) {
|
|
|
+ showComponentsId.value = ComponentType.chart
|
|
|
} else {
|
|
|
- showComponentsId.value = ComponentType.chart;
|
|
|
+ showComponentsId.value = ComponentType.marketContent
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -172,6 +170,7 @@ export default defineComponent({
|
|
|
})
|
|
|
|
|
|
return {
|
|
|
+ loading,
|
|
|
buyRef,
|
|
|
sellRef,
|
|
|
cancel,
|
|
|
@@ -182,7 +181,6 @@ export default defineComponent({
|
|
|
changeComponent,
|
|
|
ComponentType,
|
|
|
showComponentsId,
|
|
|
- cancelAction,
|
|
|
handleSubcriteOnDemandQuote,
|
|
|
handleQuotePriceColor,
|
|
|
handleNoneValue,
|
|
|
@@ -196,37 +194,43 @@ export default defineComponent({
|
|
|
</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;
|
|
|
- }
|
|
|
+ .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;
|
|
|
+ display: inline-flex;
|
|
|
}
|
|
|
+
|
|
|
.priceBar {
|
|
|
- .flex;
|
|
|
- flex-direction: column;
|
|
|
- height: 32px;
|
|
|
- .greenBar,
|
|
|
- .redBar {
|
|
|
- height: 16px;
|
|
|
- line-height: 16px;
|
|
|
- }
|
|
|
+ .flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 32px;
|
|
|
+
|
|
|
+ .greenBar,
|
|
|
+ .redBar {
|
|
|
+ height: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
.start {
|
|
|
- align-self: flex-start !important;
|
|
|
- align-items: flex-start !important;
|
|
|
+ align-self: flex-start !important;
|
|
|
+ align-items: flex-start !important;
|
|
|
}
|
|
|
</style>
|