|
|
@@ -1,70 +1,92 @@
|
|
|
<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', 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)">
|
|
|
+ {{ handleNoneValue(selectedRow.ask) }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="numBlock">
|
|
|
+ <div class="first">卖量</div>
|
|
|
+ <div class="last">{{ handleNoneValue(selectedRow.askvolume) }}</div>
|
|
|
+ </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 class="inlineBar start">
|
|
|
+ <div class="redBar red1">
|
|
|
+ <div class="numBlock">
|
|
|
+ <div class="first">买价</div>
|
|
|
+ <div class="last"
|
|
|
+ :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)">
|
|
|
+ {{ handleNoneValue(selectedRow.bid) }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="numBlock">
|
|
|
+ <div class="first">买量</div>
|
|
|
+ <div class="last">{{ handleNoneValue(selectedRow.bidvolume) }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</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>
|
|
|
+ <BtnList :btnList="btnListData"
|
|
|
+ :record="selectedRow"
|
|
|
+ @click="openComponent" />
|
|
|
+ </div>
|
|
|
</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>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
@@ -88,7 +110,7 @@ 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 } from '@/common/setup/table/tableQuote';
|
|
|
+import { handleSubcriteOnDemandQuote, handleQuotePriceColor, quoteChange, quoteAmplitude, quoteAmplituOfVibration, handleNoneValue } from '@/common/setup/table/tableQuote';
|
|
|
|
|
|
export default defineComponent({
|
|
|
emits: ['cancel', 'update'],
|
|
|
@@ -174,6 +196,7 @@ export default defineComponent({
|
|
|
cancelAction,
|
|
|
handleSubcriteOnDemandQuote,
|
|
|
handleQuotePriceColor,
|
|
|
+ handleNoneValue,
|
|
|
quoteChange,
|
|
|
quoteAmplitude,
|
|
|
quoteAmplituOfVibration,
|