|
|
@@ -1,95 +1,91 @@
|
|
|
<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)">
|
|
|
+ {{selectedRow.ask}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="numBlock">
|
|
|
+ <div class="first">卖量</div>
|
|
|
+ <div class="last">{{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)"
|
|
|
- >{{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>
|
|
|
- <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)">
|
|
|
+ {{selectedRow.bid}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="numBlock">
|
|
|
+ <div class="first">买量</div>
|
|
|
+ <div class="last">{{selectedRow.bidvolume}}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </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="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" />
|
|
|
+ <!-- 买卖大厅内容 -->
|
|
|
+ <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">
|