|
|
@@ -1,169 +1,133 @@
|
|
|
<template>
|
|
|
- <!-- 交易图表 -->
|
|
|
- <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-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-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>
|
|
|
- <div class="chart-content__footer"></div>
|
|
|
- </div>
|
|
|
- <div class="chart-slider">
|
|
|
- <div class="chart-slider__button"></div>
|
|
|
- </div>
|
|
|
- <div class="chart-tips">
|
|
|
- <div>
|
|
|
- <div class="chart-tips__nav">
|
|
|
- <div class="content content--left">{{ selectedRow.goodscode }}</div>
|
|
|
- <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--right">
|
|
|
- <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="8">{{ handleNoneValue(selectedRow.ask) }}</a-col>
|
|
|
- <a-col :class="handleQuotePriceColor(selectedRow.askvolume, 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="8">{{ handleNoneValue(selectedRow.bid) }}</a-col>
|
|
|
- <a-col :class="handleQuotePriceColor(selectedRow.bidvolume, selectedRow.presettle)"
|
|
|
- :span="8">{{ handleNoneValue(selectedRow.bidvolume) }}</a-col>
|
|
|
- </a-row>
|
|
|
+ <!-- 交易图表 -->
|
|
|
+ <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-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-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>
|
|
|
+ <div class="chart-content__footer"></div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="chart-tips__tik">
|
|
|
- <div class="row-header">
|
|
|
- <h4>分时成交</h4>
|
|
|
- <a-row>
|
|
|
- <a-col :span="8">时间</a-col>
|
|
|
- <a-col :span="8">价格</a-col>
|
|
|
- <a-col :span="8">现量</a-col>
|
|
|
- </a-row>
|
|
|
+ <div class="chart-slider">
|
|
|
+ <div class="chart-slider__button"></div>
|
|
|
</div>
|
|
|
- <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 }}</a-col>
|
|
|
- <a-col :class="handleQuotePriceColor(item.Vol, selectedRow.presettle)"
|
|
|
- :span="8">{{ item.Vol }}</a-col>
|
|
|
- </a-row>
|
|
|
+ <div class="chart-tips">
|
|
|
+ <div>
|
|
|
+ <div class="chart-tips__nav">
|
|
|
+ <div class="content content--left">{{ selectedRow.goodscode }}</div>
|
|
|
+ <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--right">
|
|
|
+ <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="8">{{ handleNoneValue(selectedRow.ask) }}</a-col>
|
|
|
+ <a-col :class="handleQuotePriceColor(selectedRow.askvolume, 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="8">{{ handleNoneValue(selectedRow.bid) }}</a-col>
|
|
|
+ <a-col :class="handleQuotePriceColor(selectedRow.bidvolume, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.bidvolume) }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chart-tips__tik">
|
|
|
+ <div class="row-header">
|
|
|
+ <h4>分时成交</h4>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="8">时间</a-col>
|
|
|
+ <a-col :span="8">价格</a-col>
|
|
|
+ <a-col :span="8">现量</a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ <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 }}</a-col>
|
|
|
+ <a-col :class="handleQuotePriceColor(item.Vol, selectedRow.presettle)" :span="8">{{ item.Vol }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <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 :span="4">均价</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 :span="4">今开</a-col>
|
|
|
+ <a-col :class="handleQuotePriceColor(selectedRow.opened, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.opened) }}</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 :span="4">最高</a-col>
|
|
|
+ <a-col :class="handleQuotePriceColor(selectedRow.highest, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.highest) }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="4">总量</a-col>
|
|
|
+ <a-col :span="8">{{ handleNoneValue(selectedRow.totalvolume) }}</a-col>
|
|
|
+ <a-col :span="4">最低</a-col>
|
|
|
+ <a-col :class="handleQuotePriceColor(selectedRow.lowest, selectedRow.presettle)" :span="8">{{ handleNoneValue(selectedRow.lowest) }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="4">金额</a-col>
|
|
|
+ <a-col :span="8" style="color: #0d96ff">{{ changeUnit(selectedRow.totalturnover) }}</a-col>
|
|
|
+ <a-col :span="4">量比</a-col>
|
|
|
+ <a-col :span="8">{{ '--' }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="4">涨停</a-col>
|
|
|
+ <a-col class="red1" :span="8">{{ handleNoneValue(selectedRow.limitup) }}</a-col>
|
|
|
+ <a-col :span="4">跌停</a-col>
|
|
|
+ <a-col class="green" :span="8">{{ handleNoneValue(selectedRow.limitdown) }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="4">外盘</a-col>
|
|
|
+ <a-col :span="8">{{ handleNoneValue(selectedRow.totalbidvolume) }}</a-col>
|
|
|
+ <a-col :span="4">内盘</a-col>
|
|
|
+ <a-col :span="8">{{ handleNoneValue(selectedRow.totalaskvolume) }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="4">持仓</a-col>
|
|
|
+ <a-col :span="8">{{ handleNoneValue(selectedRow.holdvolume) }}</a-col>
|
|
|
+ <a-col :span="4">结算</a-col>
|
|
|
+ <a-col :span="8">{{ handleNoneValue(selectedRow.settle) }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="4">仓差</a-col>
|
|
|
+ <a-col :span="8">{{ '--' }}</a-col>
|
|
|
+ <a-col :span="4">昨结</a-col>
|
|
|
+ <a-col :span="8">{{ handleNoneValue(selectedRow.presettle) }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="4">日增</a-col>
|
|
|
+ <a-col :span="8">{{ '--' }}</a-col>
|
|
|
+ <a-col :span="4">开平</a-col>
|
|
|
+ <a-col :span="8">{{ '--' }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ <div @click="watchMore" class="watchMore">查看更多</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <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 :span="4">均价</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 :span="4">今开</a-col>
|
|
|
- <a-col :class="handleQuotePriceColor(selectedRow.opened, selectedRow.presettle)"
|
|
|
- :span="8">{{ handleNoneValue(selectedRow.opened) }}</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 :span="4">最高</a-col>
|
|
|
- <a-col :class="handleQuotePriceColor(selectedRow.highest, selectedRow.presettle)"
|
|
|
- :span="8">{{ handleNoneValue(selectedRow.highest) }}</a-col>
|
|
|
- </a-row>
|
|
|
- <a-row>
|
|
|
- <a-col :span="4">总量</a-col>
|
|
|
- <a-col :span="8">{{ handleNoneValue(selectedRow.totalvolume) }}</a-col>
|
|
|
- <a-col :span="4">最低</a-col>
|
|
|
- <a-col :class="handleQuotePriceColor(selectedRow.lowest, selectedRow.presettle)"
|
|
|
- :span="8">{{ handleNoneValue(selectedRow.lowest) }}</a-col>
|
|
|
- </a-row>
|
|
|
- <a-row>
|
|
|
- <a-col :span="4">金额</a-col>
|
|
|
- <a-col :span="8"
|
|
|
- style="color: #0d96ff">{{ changeUnit(selectedRow.totalturnover) }}</a-col>
|
|
|
- <a-col :span="4">量比</a-col>
|
|
|
- <a-col :span="8">{{ '--' }}</a-col>
|
|
|
- </a-row>
|
|
|
- <a-row>
|
|
|
- <a-col :span="4">涨停</a-col>
|
|
|
- <a-col class="red1"
|
|
|
- :span="8">{{ handleNoneValue(selectedRow.limitup) }}</a-col>
|
|
|
- <a-col :span="4">跌停</a-col>
|
|
|
- <a-col class="green"
|
|
|
- :span="8">{{ handleNoneValue(selectedRow.limitdown) }}</a-col>
|
|
|
- </a-row>
|
|
|
- <a-row>
|
|
|
- <a-col :span="4">外盘</a-col>
|
|
|
- <a-col :span="8">{{ handleNoneValue(selectedRow.totalbidvolume) }}</a-col>
|
|
|
- <a-col :span="4">内盘</a-col>
|
|
|
- <a-col :span="8">{{ handleNoneValue(selectedRow.totalaskvolume) }}</a-col>
|
|
|
- </a-row>
|
|
|
- <a-row>
|
|
|
- <a-col :span="4">持仓</a-col>
|
|
|
- <a-col :span="8">{{ handleNoneValue(selectedRow.holdvolume) }}</a-col>
|
|
|
- <a-col :span="4">结算</a-col>
|
|
|
- <a-col :span="8">{{ handleNoneValue(selectedRow.settle) }}</a-col>
|
|
|
- </a-row>
|
|
|
- <a-row>
|
|
|
- <a-col :span="4">仓差</a-col>
|
|
|
- <a-col :span="8">{{ '--' }}</a-col>
|
|
|
- <a-col :span="4">昨结</a-col>
|
|
|
- <a-col :span="8">{{ handleNoneValue(selectedRow.presettle) }}</a-col>
|
|
|
- </a-row>
|
|
|
- <a-row>
|
|
|
- <a-col :span="4">日增</a-col>
|
|
|
- <a-col :span="8">{{ '--' }}</a-col>
|
|
|
- <a-col :span="4">开平</a-col>
|
|
|
- <a-col :span="8">{{ '--' }}</a-col>
|
|
|
- </a-row>
|
|
|
- </div>
|
|
|
- <div @click="watchMore"
|
|
|
- class="watchMore">查看更多</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
@@ -221,11 +185,12 @@ export default defineComponent({
|
|
|
};
|
|
|
|
|
|
// Tik列表
|
|
|
- const getHistoryTikDatas = (endTime: string) => {
|
|
|
+ const getHistoryTikDatas = (startTime: string, endTime: string) => {
|
|
|
if (!tradedList.value.length) {
|
|
|
const param = {
|
|
|
goodsCode: props.selectedRow.goodscode,
|
|
|
count: 20,
|
|
|
+ startTime: moment(startTime).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
endTime: moment(endTime).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
};
|
|
|
QueryHistoryTikDatas(param).then((res) => {
|