|
@@ -3,39 +3,12 @@
|
|
|
<div class="chart-container">
|
|
<div class="chart-container">
|
|
|
<div class="chart-content">
|
|
<div class="chart-content">
|
|
|
<div class="chart-content__header">
|
|
<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>
|
|
|
|
|
|
|
+ <mtp-tabbar theme="menu" :data="chartType" v-model:active="activeCycleType" @change="changeCycleType" />
|
|
|
</div>
|
|
</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>
|
|
|
|
|
|
|
+ <!-- K线 -->
|
|
|
|
|
+ <mtp-echarts-timeline class="chart-content__main" :goodscode="selectedRow.goodscode" @ready="getHistoryTikDatas" v-if="chartType[activeCycleType].code === CycleType.time" />
|
|
|
|
|
+ <!-- 分时线 -->
|
|
|
|
|
+ <mtp-echarts-kline class="chart-content__main" :cycle-type="activeCycleType" :goodscode="selectedRow.goodscode" v-else />
|
|
|
<div class="chart-content__footer"></div>
|
|
<div class="chart-content__footer"></div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="chart-slider">
|
|
<div class="chart-slider">
|
|
@@ -48,40 +21,22 @@
|
|
|
<div class="content content--right">{{ selectedRow.goodsname }}</div>
|
|
<div class="content content--right">{{ selectedRow.goodsname }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="chart-tips__last">
|
|
<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) }}</div>
|
|
|
<div class="content content--right">
|
|
<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>
|
|
</div>
|
|
|
<div class="chart-tips__volume">
|
|
<div class="chart-tips__volume">
|
|
|
<a-row>
|
|
<a-row>
|
|
|
<a-col :span="8">卖一</a-col>
|
|
<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-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-row>
|
|
<a-row>
|
|
|
<a-col :span="8">买一</a-col>
|
|
<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-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>
|
|
</a-row>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -97,62 +52,35 @@
|
|
|
<div class="row-content">
|
|
<div class="row-content">
|
|
|
<a-row v-for="(item, index) in tradedList" :key="index + '11'">
|
|
<a-row v-for="(item, index) in tradedList" :key="index + '11'">
|
|
|
<a-col :span="8">{{ formatTime(item.TS, 'hm') }}</a-col>
|
|
<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-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>
|
|
</a-row>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="chart-tips__info">
|
|
<div class="chart-tips__info">
|
|
|
<a-row>
|
|
<a-row>
|
|
|
<a-col :span="4">最新</a-col>
|
|
<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) }}</a-col>
|
|
|
<a-col :span="4">均价</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-row>
|
|
<a-row>
|
|
|
<a-col :span="4">涨跌</a-col>
|
|
<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 :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) }}</a-col>
|
|
|
</a-row>
|
|
</a-row>
|
|
|
<a-row>
|
|
<a-row>
|
|
|
<a-col :span="4">涨幅</a-col>
|
|
<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 :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) }}</a-col>
|
|
|
</a-row>
|
|
</a-row>
|
|
|
<a-row>
|
|
<a-row>
|
|
|
<a-col :span="4">总量</a-col>
|
|
<a-col :span="4">总量</a-col>
|
|
|
<a-col :span="8">{{ handleNoneValue(selectedRow.totalvolume) }}</a-col>
|
|
<a-col :span="8">{{ handleNoneValue(selectedRow.totalvolume) }}</a-col>
|
|
|
<a-col :span="4">最低</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) }}</a-col>
|
|
|
</a-row>
|
|
</a-row>
|
|
|
<a-row>
|
|
<a-row>
|
|
|
<a-col :span="4">金额</a-col>
|
|
<a-col :span="4">金额</a-col>
|
|
@@ -202,21 +130,25 @@
|
|
|
import { defineComponent } from '@/common/export/commonTable';
|
|
import { defineComponent } from '@/common/export/commonTable';
|
|
|
import { _closeModal } from '@/common/setup/modal/modal';
|
|
import { _closeModal } from '@/common/setup/modal/modal';
|
|
|
import { PropType, ref, watch } from 'vue';
|
|
import { PropType, ref, watch } from 'vue';
|
|
|
-import { QueryQuoteDayRsp, QueryHistoryTikDatasRsp, CycleType } from '@/services/go/quote/interface';
|
|
|
|
|
|
|
+import { QueryQuoteDayRsp, QueryHistoryTikDatasRsp } from '@/services/go/quote/interface';
|
|
|
import { QueryHistoryTikDatas } from '@/services/go/quote';
|
|
import { QueryHistoryTikDatas } from '@/services/go/quote';
|
|
|
import { formatTime } from '@/common/methods';
|
|
import { formatTime } from '@/common/methods';
|
|
|
import { changeUnit } from '@/utils/qt/common';
|
|
import { changeUnit } from '@/utils/qt/common';
|
|
|
import { ComponentType } from '@/views/market/market-spot/spot_trade_order_transaction/setup';
|
|
import { ComponentType } from '@/views/market/market-spot/spot_trade_order_transaction/setup';
|
|
|
-import { EchartKline, EchartTime } from '@/common/components/echart';
|
|
|
|
|
import { handleQuotePriceColor, quoteChange, handleNoneValue, quoteAmplitude } from '@/common/setup/table/tableQuote';
|
|
import { handleQuotePriceColor, quoteChange, handleNoneValue, quoteAmplitude } from '@/common/setup/table/tableQuote';
|
|
|
import moment from 'moment';
|
|
import moment from 'moment';
|
|
|
|
|
+import { CycleType } from '@/common/components/echarts/echarts-kline/type';
|
|
|
|
|
+import MtpEchartsKline from '@/common/components/echarts/echarts-kline/index.vue';
|
|
|
|
|
+import MtpEchartsTimeline from '@/common/components/echarts/echarts-timeline/index.vue';
|
|
|
|
|
+import MtpTabbar from '@/common/components/tabbar/index.vue';
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
|
emits: ['cancel', 'update'],
|
|
emits: ['cancel', 'update'],
|
|
|
name: 'stock-exchange',
|
|
name: 'stock-exchange',
|
|
|
components: {
|
|
components: {
|
|
|
- EchartKline,
|
|
|
|
|
- EchartTime,
|
|
|
|
|
|
|
+ MtpEchartsKline,
|
|
|
|
|
+ MtpEchartsTimeline,
|
|
|
|
|
+ MtpTabbar,
|
|
|
},
|
|
},
|
|
|
props: {
|
|
props: {
|
|
|
selectedRow: {
|
|
selectedRow: {
|
|
@@ -230,9 +162,7 @@ export default defineComponent({
|
|
|
},
|
|
},
|
|
|
setup(props, context) {
|
|
setup(props, context) {
|
|
|
const { visible, cancel } = _closeModal(context),
|
|
const { visible, cancel } = _closeModal(context),
|
|
|
- activeCycleName = ref<string[]>(['time']),
|
|
|
|
|
- activeCycleType = ref<CycleType>(CycleType.time),
|
|
|
|
|
- activeSeriesType = ref<string[]>(['MACD']),
|
|
|
|
|
|
|
+ activeCycleType = ref(0), // 当前选中的图表周期
|
|
|
tradedList = ref<QueryHistoryTikDatasRsp[]>([]);
|
|
tradedList = ref<QueryHistoryTikDatasRsp[]>([]);
|
|
|
|
|
|
|
|
function watchMore() {
|
|
function watchMore() {
|
|
@@ -241,18 +171,18 @@ export default defineComponent({
|
|
|
|
|
|
|
|
// 周期类型
|
|
// 周期类型
|
|
|
const chartType = [
|
|
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 },
|
|
|
|
|
|
|
+ { code: CycleType.time, label: '分时' },
|
|
|
|
|
+ { code: CycleType.minutes, label: '1分钟' },
|
|
|
|
|
+ { code: CycleType.minutes5, label: '5分钟' },
|
|
|
|
|
+ { code: CycleType.minutes30, label: '30分钟' },
|
|
|
|
|
+ { code: CycleType.minutes60, label: '60分钟' },
|
|
|
|
|
+ { code: CycleType.Hours4, label: '4小时' },
|
|
|
|
|
+ { code: CycleType.days, label: '日K' },
|
|
|
];
|
|
];
|
|
|
|
|
|
|
|
// 切换图表周期类型
|
|
// 切换图表周期类型
|
|
|
- const changeCycleType = (e: { key: string }) => {
|
|
|
|
|
- activeCycleType.value = chartType.find((item) => item.name === e.key)!.value;
|
|
|
|
|
|
|
+ const changeCycleType = (index: number) => {
|
|
|
|
|
+ activeCycleType.value = index;
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
// Tik列表
|
|
// Tik列表
|
|
@@ -300,9 +230,7 @@ export default defineComponent({
|
|
|
chartType,
|
|
chartType,
|
|
|
tradedList,
|
|
tradedList,
|
|
|
CycleType,
|
|
CycleType,
|
|
|
- activeCycleName,
|
|
|
|
|
activeCycleType,
|
|
activeCycleType,
|
|
|
- activeSeriesType,
|
|
|
|
|
changeUnit,
|
|
changeUnit,
|
|
|
watchMore,
|
|
watchMore,
|
|
|
formatTime,
|
|
formatTime,
|
|
@@ -318,5 +246,5 @@ export default defineComponent({
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less">
|
|
<style lang="less">
|
|
|
-@import "./index.less";
|
|
|
|
|
|
|
+@import './index.less';
|
|
|
</style>
|
|
</style>
|