|
|
@@ -0,0 +1,256 @@
|
|
|
+<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-if="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" v-if="showExchange">
|
|
|
+ <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.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="8">{{ handleNoneValue(selectedRow.bid) }}</a-col>
|
|
|
+ <a-col :class="handleQuotePriceColor(selectedRow.bid, 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">
|
|
|
+ <strong>查看更多</strong>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import { defineComponent } from '@/common/export/commonTable';
|
|
|
+import { _closeModal } from '@/common/setup/modal/modal';
|
|
|
+import { PropType, ref, watch } from 'vue';
|
|
|
+import { QueryQuoteDayRsp, QueryHistoryTikDatasRsp, CycleType } from '@/services/go/quote/interface';
|
|
|
+import { QueryHistoryTikDatas } from '@/services/go/quote';
|
|
|
+import { formatTime } from '@/common/methods';
|
|
|
+import { changeUnit } from '@/utils/qt/common';
|
|
|
+import { ComponentType } from '@/views/market/spot_trade/spot_trade_order_transaction/setup';
|
|
|
+import { EchartKline, EchartTime } from '@/common/components/echart';
|
|
|
+import { handleQuotePriceColor, quoteChange, handleNoneValue, quoteAmplitude } from '@/common/setup/table/tableQuote';
|
|
|
+import moment from 'moment';
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ emits: ['cancel', 'update'],
|
|
|
+ name: 'stock-exchange',
|
|
|
+ components: {
|
|
|
+ EchartKline,
|
|
|
+ EchartTime,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ selectedRow: {
|
|
|
+ type: Object as PropType<QueryQuoteDayRsp>,
|
|
|
+ default: {},
|
|
|
+ },
|
|
|
+ showExchange: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ setup(props, context) {
|
|
|
+ const { visible, cancel } = _closeModal(context),
|
|
|
+ activeCycleName = ref<string[]>(['time']),
|
|
|
+ activeCycleType = ref<CycleType>(CycleType.time),
|
|
|
+ activeSeriesType = ref<string[]>(['MACD']),
|
|
|
+ tradedList = ref<QueryHistoryTikDatasRsp[]>([]);
|
|
|
+
|
|
|
+ function watchMore() {
|
|
|
+ context.emit('update', ComponentType.marketContent);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 周期类型
|
|
|
+ const chartType = [
|
|
|
+ { label: '分时', name: 'time', value: CycleType.time },
|
|
|
+ { label: '1分钟', name: 'minutes', value: CycleType.minutes },
|
|
|
+ { label: '5分钟', name: 'minutes5', value: CycleType.minutes5 },
|
|
|
+ { label: '30分钟', name: 'minutes30', value: CycleType.minutes30 },
|
|
|
+ { label: '60分钟', name: 'minutes60', value: CycleType.minutes60 },
|
|
|
+ { label: '4小时', name: 'Hours4', value: CycleType.Hours4 },
|
|
|
+ { label: '日 K', name: 'days', value: CycleType.days },
|
|
|
+ ];
|
|
|
+
|
|
|
+ // 切换图表周期类型
|
|
|
+ const changeCycleType = (e: { key: string }) => {
|
|
|
+ activeCycleType.value = chartType.find((item) => item.name === e.key)!.value;
|
|
|
+ };
|
|
|
+
|
|
|
+ // Tik列表
|
|
|
+ const getHistoryTikDatas = (startTime: string, endTime: string) => {
|
|
|
+ const param = {
|
|
|
+ goodsCode: props.selectedRow.goodscode.toUpperCase(),
|
|
|
+ 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) => {
|
|
|
+ tradedList.value = res;
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ // 监听行情变化刷Tik列表
|
|
|
+ watch(
|
|
|
+ () => props.selectedRow.last,
|
|
|
+ () => {
|
|
|
+ if (tradedList.value.length > 19) {
|
|
|
+ // 移除列表最后一条记录
|
|
|
+ tradedList.value.pop();
|
|
|
+ }
|
|
|
+ // 向列表开头添加新纪录
|
|
|
+ tradedList.value.unshift({
|
|
|
+ AV: 0,
|
|
|
+ Ask: 0,
|
|
|
+ BV: 0,
|
|
|
+ Bid: 0,
|
|
|
+ HI: 0,
|
|
|
+ HV: 0,
|
|
|
+ PE: props.selectedRow.last,
|
|
|
+ TDR: 0,
|
|
|
+ TK: 0,
|
|
|
+ TS: props.selectedRow.lasttime,
|
|
|
+ TT: 0,
|
|
|
+ Vol: props.selectedRow.lastvolume,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ return {
|
|
|
+ cancel,
|
|
|
+ visible,
|
|
|
+ chartType,
|
|
|
+ tradedList,
|
|
|
+ CycleType,
|
|
|
+ activeCycleName,
|
|
|
+ activeCycleType,
|
|
|
+ activeSeriesType,
|
|
|
+ changeUnit,
|
|
|
+ watchMore,
|
|
|
+ formatTime,
|
|
|
+ quoteChange,
|
|
|
+ handleNoneValue,
|
|
|
+ quoteAmplitude,
|
|
|
+ handleQuotePriceColor,
|
|
|
+ changeCycleType,
|
|
|
+ getHistoryTikDatas,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+@import './index.less';
|
|
|
+</style>
|
huangbin