|
|
@@ -3,18 +3,22 @@
|
|
|
<div class="chart-container">
|
|
|
<div class="chart-content">
|
|
|
<div class="chart-content__header">
|
|
|
- <a-menu class="chart-content__tabs" v-model:selectedKeys="activeCycleName" mode="horizontal" @click="changeCycleType">
|
|
|
+ <a-menu class="chart-content__tabs" v-model:selectedKeys="activeCycleName" mode="horizontal"
|
|
|
+ @click="changeCycleType">
|
|
|
<a-menu-item v-for="item in chartType" :key="item.name">{{ item.label }}</a-menu-item>
|
|
|
</a-menu>
|
|
|
- <a-menu class="chart-content__tabs" v-model:selectedKeys="activeSeriesType" mode="horizontal" v-show="activeCycleType !== CycleType.time">
|
|
|
+ <a-menu class="chart-content__tabs" v-model:selectedKeys="activeSeriesType" mode="horizontal"
|
|
|
+ v-show="activeCycleType !== CycleType.time">
|
|
|
<a-menu-item key="MACD">MACD</a-menu-item>
|
|
|
<!-- <a-menu-item key="VOL">VOL</a-menu-item> -->
|
|
|
<a-menu-item key="KDJ">KDJ</a-menu-item>
|
|
|
<a-menu-item key="CCI">CCI</a-menu-item>
|
|
|
</a-menu>
|
|
|
</div>
|
|
|
- <echart-time class="chart-content__main" :quote-data="selectedRow" @change="getHistoryTikDatas" v-if="activeCycleType === CycleType.time"></echart-time>
|
|
|
- <echart-kline class="chart-content__main" :quote-data="selectedRow" :cycle-type="activeCycleType" :series-type="activeSeriesType[0]" v-else></echart-kline>
|
|
|
+ <echart-time class="chart-content__main" :quote-data="selectedRow" @change="getHistoryTikDatas"
|
|
|
+ v-if="activeCycleType === CycleType.time"></echart-time>
|
|
|
+ <echart-kline class="chart-content__main" :quote-data="selectedRow" :cycle-type="activeCycleType"
|
|
|
+ :series-type="activeSeriesType[0]" v-else></echart-kline>
|
|
|
<div class="chart-content__footer"></div>
|
|
|
</div>
|
|
|
<div class="chart-slider">
|
|
|
@@ -27,21 +31,29 @@
|
|
|
<div class="content content--right">{{ selectedRow.goodsname }}</div>
|
|
|
</div>
|
|
|
<div class="chart-tips__last">
|
|
|
- <div :class="['content content--left', handleQuotePriceColor(selectedRow.last, selectedRow.presettle)]">{{ handleNoneValue(selectedRow.last) }}</div>
|
|
|
+ <div :class="['content content--left', handleQuotePriceColor(selectedRow.last, selectedRow.presettle)]">{{
|
|
|
+ handleNoneValue(selectedRow.last, selectedRow.decimalplace)
|
|
|
+ }}</div>
|
|
|
<div class="content content--right">
|
|
|
- <span :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteChange(selectedRow) }}</span>
|
|
|
- <span :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteAmplitude(selectedRow) }}</span>
|
|
|
+ <span :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteChange(selectedRow)
|
|
|
+ }}</span>
|
|
|
+ <span :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteAmplitude(selectedRow)
|
|
|
+ }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="chart-tips__volume">
|
|
|
<a-row>
|
|
|
<a-col :span="8">卖一</a-col>
|
|
|
- <a-col :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)" :span="16">{{ handleNoneValue(selectedRow.ask) }}</a-col>
|
|
|
+ <a-col :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)" :span="16">{{
|
|
|
+ handleNoneValue(selectedRow.ask, selectedRow.decimalplace)
|
|
|
+ }}</a-col>
|
|
|
<!-- <a-col :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.askvolume) }}</a-col> -->
|
|
|
</a-row>
|
|
|
<a-row>
|
|
|
<a-col :span="8">买一</a-col>
|
|
|
- <a-col :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)" :span="16">{{ handleNoneValue(selectedRow.bid) }}</a-col>
|
|
|
+ <a-col :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)" :span="16">{{
|
|
|
+ handleNoneValue(selectedRow.bid, selectedRow.decimalplace)
|
|
|
+ }}</a-col>
|
|
|
<!-- <a-col :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.bidvolume) }}</a-col> -->
|
|
|
</a-row>
|
|
|
</div>
|
|
|
@@ -60,7 +72,10 @@
|
|
|
<div class="row-content">
|
|
|
<a-row v-for="(item, index) in tradedList" :key="index + '11'">
|
|
|
<a-col :span="8">{{ formatTime(item.TS, 'hm') }}</a-col>
|
|
|
- <a-col :class="handleQuotePriceColor(item.PE, selectedRow.presettle)" :span="8">{{ item.PE.toFixed(2) }}</a-col>
|
|
|
+ <a-col :class="handleQuotePriceColor(item.PE, selectedRow.presettle)" :span="8">{{ handleNoneValue(item.PE,
|
|
|
+ selectedRow.decimalplace)
|
|
|
+ }}
|
|
|
+ </a-col>
|
|
|
<a-col :class="handleQuotePriceColor(item.Vol, selectedRow.presettle)" :span="8">
|
|
|
<!-- {{ item.Vol }} -->
|
|
|
</a-col>
|
|
|
@@ -70,27 +85,41 @@
|
|
|
<div class="chart-tips__info">
|
|
|
<a-row>
|
|
|
<a-col :span="4">最新</a-col>
|
|
|
- <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.last) }}</a-col>
|
|
|
+ <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)" :span="8">{{
|
|
|
+ handleNoneValue(selectedRow.last, selectedRow.decimalplace)
|
|
|
+ }}</a-col>
|
|
|
<a-col :span="4">均价</a-col>
|
|
|
- <a-col :class="handleQuotePriceColor(selectedRow.averageprice, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.averageprice) }}</a-col>
|
|
|
+ <a-col :class="handleQuotePriceColor(selectedRow.averageprice, selectedRow.presettle)" :span="8">{{
|
|
|
+ handleNoneValue(selectedRow.averageprice)
|
|
|
+ }}</a-col>
|
|
|
</a-row>
|
|
|
<a-row>
|
|
|
<a-col :span="4">涨跌</a-col>
|
|
|
- <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)" :span="8">{{ quoteChange(selectedRow) }}</a-col>
|
|
|
+ <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)" :span="8">{{
|
|
|
+ quoteChange(selectedRow)
|
|
|
+ }}</a-col>
|
|
|
<a-col :span="4">今开</a-col>
|
|
|
- <a-col :class="handleQuotePriceColor(selectedRow.opened, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.opened) }}</a-col>
|
|
|
+ <a-col :class="handleQuotePriceColor(selectedRow.opened, selectedRow.presettle)" :span="8">{{
|
|
|
+ handleNoneValue(selectedRow.opened, selectedRow.decimalplace)
|
|
|
+ }}</a-col>
|
|
|
</a-row>
|
|
|
<a-row>
|
|
|
<a-col :span="4">涨幅</a-col>
|
|
|
- <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)" :span="8">{{ quoteAmplitude(selectedRow) }}</a-col>
|
|
|
+ <a-col :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)" :span="8">{{
|
|
|
+ quoteAmplitude(selectedRow)
|
|
|
+ }}</a-col>
|
|
|
<a-col :span="4">最高</a-col>
|
|
|
- <a-col :class="handleQuotePriceColor(selectedRow.highest, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.highest) }}</a-col>
|
|
|
+ <a-col :class="handleQuotePriceColor(selectedRow.highest, selectedRow.presettle)" :span="8">{{
|
|
|
+ handleNoneValue(selectedRow.highest, selectedRow.decimalplace)
|
|
|
+ }}</a-col>
|
|
|
</a-row>
|
|
|
<a-row>
|
|
|
<a-col :span="4">结算</a-col>
|
|
|
<a-col :span="8">{{ handleNoneValue(selectedRow.settle) }}</a-col>
|
|
|
<a-col :span="4">最低</a-col>
|
|
|
- <a-col :class="handleQuotePriceColor(selectedRow.lowest, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.lowest) }}</a-col>
|
|
|
+ <a-col :class="handleQuotePriceColor(selectedRow.lowest, selectedRow.presettle)" :span="8">{{
|
|
|
+ handleNoneValue(selectedRow.lowest, selectedRow.decimalplace)
|
|
|
+ }}</a-col>
|
|
|
</a-row>
|
|
|
<!-- <a-row>
|
|
|
<a-col :span="4">金额</a-col>
|