21 changed files with 3430 additions and 4 deletions
@ -0,0 +1,242 @@ |
|||
<template> |
|||
<view class="d-flex flex-col"> |
|||
<view style="height: var(--status-bar-height)"></view> |
|||
<!-- <view class="d-flex justify-center p-t-md"> |
|||
<view class="d-flex bg-form-panel-4 rounded-lg overflow-scroll"> |
|||
<view |
|||
:class="{ 'bg-gradient-blue color-plain rounded-lg': tab == 0 }" |
|||
@click="tab = 0" |
|||
class="p-y-xs p-x-lg min-w-60 fn-center" |
|||
>{{$t('exchange.a0')}}</view |
|||
> |
|||
<view |
|||
:class="{ 'bg-gradient-blue color-plain rounded-lg': tab == 1 }" |
|||
@click="tab = 1" |
|||
class="p-y-xs p-x-lg min-w-60 fn-center" |
|||
>{{$t('exchange.a1')}}</view |
|||
> |
|||
</view> |
|||
</view> --> |
|||
<!-- 币币 --> |
|||
<template v-if="tab == 0"> |
|||
<!-- 币币交易 --> |
|||
<view |
|||
class="coin-exchange-box flex-fill d-flex flex-col overflow-hidden border-b" |
|||
> |
|||
<!-- <van-tabs |
|||
:ellipsis="false" |
|||
:border="false" |
|||
:active="tab1" |
|||
@change="tab1 = $event.detail.name" |
|||
> |
|||
<van-tab class="height-max" :title="$t('exchange.a3')"></van-tab> |
|||
<van-tab class="height-max" :title="$t('exchange.a4')"></van-tab> |
|||
<van-tab class="height-max" :title="$t('exchange.a5')"></van-tab> |
|||
</van-tabs> --> |
|||
<!-- 交易表单 --> |
|||
<exchange-transaction |
|||
@symbol="symbolListShow = true" |
|||
:marketList="marketList" |
|||
:collect="collect" |
|||
:query="query" |
|||
@option="option" |
|||
:isShow="isShow" |
|||
:tabs="tabs" |
|||
:increase="increase" |
|||
class="layout-main" |
|||
v-if="tab1 == 0 && query.symbol" |
|||
/> |
|||
<!-- 当前委托 --> |
|||
<current-commission class="layout-main" v-if="tab1 == 1" /> |
|||
<!-- 历史委托 --> |
|||
<history-commisson class="layout-main" v-if="tab1 == 2" /> |
|||
|
|||
</view> |
|||
</template> |
|||
<!-- 申购 --> |
|||
<template v-if="tab == 1"> |
|||
<purchase /> |
|||
</template> |
|||
<!-- 左侧的弹窗 --> |
|||
<van-popup |
|||
:show="symbolListShow" |
|||
@close="symbolListShow = false" |
|||
close-on-popstate |
|||
position="left" |
|||
custom-style="height:100%;width:70%" |
|||
> |
|||
<symbol-list |
|||
:collect="collect" |
|||
:marketList="marketList" |
|||
:heyue="0" |
|||
@check-symbol="checkSymbol" |
|||
:symbols="symbols" |
|||
/> |
|||
</van-popup> |
|||
<van-toast id="van-toast" /> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
import exchangeTransaction from "@/pages/stockexchange/exchange-transaction"; |
|||
import currentCommission from "@/pages/stockexchange/current-commission"; |
|||
import historyCommisson from "@/pages/stockexchange/history-commisson"; |
|||
import symbolList from "@/pages/stockexchange/symbol-list"; |
|||
import purchase from "@/pages/purchase/index"; |
|||
import Market from "@/api/market"; |
|||
import Home from "@/api/home"; |
|||
import { mapState } from "vuex"; |
|||
export default { |
|||
name: "stockexchange-operation", |
|||
props: { |
|||
isShow: { |
|||
default: false, |
|||
type: Boolean, |
|||
required: false, |
|||
}, |
|||
tabs: { |
|||
default: '', |
|||
type: String, |
|||
required: false, |
|||
}, |
|||
}, |
|||
components: { |
|||
exchangeTransaction, |
|||
currentCommission, |
|||
historyCommisson, |
|||
symbolList, |
|||
purchase, |
|||
}, |
|||
data() { |
|||
return { |
|||
tab: 0, |
|||
tab1: 0, |
|||
symbolListShow: false, |
|||
marketList: [], |
|||
collect: [], |
|||
query: {}, |
|||
msg: "exchangeMarketList", |
|||
increase:{}, |
|||
symbols:'' |
|||
}; |
|||
}, |
|||
watch: { |
|||
isShow(n) { |
|||
if (n) { |
|||
setTimeout(() => { |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: this.msg, |
|||
}); |
|||
}, 200); |
|||
} else { |
|||
this.ws.send({ |
|||
cmd: "unsub", |
|||
msg: this.msg, |
|||
}); |
|||
} |
|||
}, |
|||
}, |
|||
computed: { |
|||
...mapState({ |
|||
ws: "ws", |
|||
}), |
|||
isLogin() { |
|||
return Boolean(uni.getStorageSync("token")); |
|||
}, |
|||
}, |
|||
methods: { |
|||
// 获取市场行情 |
|||
getMarketList() { |
|||
Market.getstockMarketList().then((res) => { |
|||
this.marketList = res.data; |
|||
this.$nextTick(() => { |
|||
this.linkSocket(); |
|||
}); |
|||
if (!this.query.symbol) { |
|||
let parentItem = this.marketList[0].marketInfoList[0]; |
|||
this.checkSymbol(parentItem); |
|||
} |
|||
}); |
|||
}, |
|||
// 获取自选列表 |
|||
getCollect() { |
|||
if (!this.isLogin) return; |
|||
Home.getCollect() |
|||
.then((res) => { |
|||
this.collect = res.data || []; |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
// |
|||
checkSymbol(obj) { |
|||
this.symbols=obj.coin_name |
|||
this.symbolListShow = false; |
|||
if (obj.pair_name == this.query.symbol) return; |
|||
this.query = { symbol: obj.pair_name }; |
|||
// this._router.replace({ query: { symbol: obj.pair_name } }); |
|||
}, |
|||
// 添加自选 |
|||
option() { |
|||
let data = { |
|||
pair_name: this.query.symbol, |
|||
}; |
|||
Home.option(data) |
|||
.then((res) => { |
|||
this.getCollect(); |
|||
if (res.data) { |
|||
this.$toast(this.$t("exchange.a6")); |
|||
} else { |
|||
this.$toast(this.$t("exchange.a7")); |
|||
} |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
// 链接socket |
|||
linkSocket() { |
|||
let msg = this.msg; |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg, |
|||
}); |
|||
this.ws.on("message", (res) => { |
|||
let { data, sub } = res; |
|||
if (sub == msg) { |
|||
this.marketList = data; |
|||
var symbol=this.query.symbol.split('/') |
|||
// console.log(symbol) |
|||
var market=this.marketList.find((item) => item.coin_name == symbol[1]) |
|||
this.increase=market.marketInfoList.find((item) => item.coin_name == symbol[0])||{} |
|||
|
|||
} |
|||
}); |
|||
}, |
|||
// 获取参数 |
|||
getQuery() { |
|||
let curPage = getCurPage(); |
|||
let curParam = curPage.options || curPage.$route.query; |
|||
function getCurPage() { |
|||
let pages = getCurrentPages(); |
|||
let curPage = pages[pages.length - 1]; |
|||
return curPage; |
|||
} |
|||
return curParam; |
|||
}, |
|||
}, |
|||
created() { |
|||
this.query = this.getQuery(); |
|||
if (this.query.symbol) { |
|||
this.query.symbol = decodeURIComponent(this.query.symbol); |
|||
} |
|||
this.getMarketList(); |
|||
this.getCollect(); |
|||
}, |
|||
destroyed() { |
|||
this.ws.send({ |
|||
cmd: "unsub", |
|||
msg: 'exchangeMarketList', |
|||
}) |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -0,0 +1,96 @@ |
|||
<template> |
|||
<div> |
|||
<div class="coin p-md color-light fn-20"> |
|||
<img :src="detail.coin_icon" width="20" height="20" alt=""> |
|||
{{detail.full_name}} |
|||
</div> |
|||
<div class="list"> |
|||
<div class="d-flex justify-between p-x-md p-y-xs"> |
|||
<div>{{$t('exchange.a8')}}</div> |
|||
<div class="color-light"> |
|||
{{detail.total_issuance}} |
|||
</div> |
|||
</div> |
|||
<div class="d-flex justify-between p-x-md p-y-xs"> |
|||
<div>{{$t('exchange.a9')}}</div> |
|||
<div class="color-light"> |
|||
{{detail.total_circulation}} |
|||
</div> |
|||
</div> |
|||
<div class="d-flex justify-between p-x-md p-y-xs"> |
|||
<div>{{$t('exchange.b0')}}</div> |
|||
<div class="color-light"> |
|||
{{detail.crowdfunding_price}} |
|||
</div> |
|||
</div> |
|||
<div class="d-flex justify-between p-x-md p-y-xs"> |
|||
<div>{{$t('exchange.b1')}}</div> |
|||
<div class="color-light"> |
|||
{{detail.publish_time}} |
|||
</div> |
|||
</div> |
|||
<div class="d-flex justify-between p-x-md p-y-xs"> |
|||
<div class="flex-shrink">{{$t('exchange.b2')}}</div> |
|||
<div class="color-light d-flex"> |
|||
<div class="address eps-1 p-r-xs m-r-xs border-r fn-wrap"> |
|||
{{detail.white_paper_link}} |
|||
</div> |
|||
<div class="color-sell flex-shrink" @click="$copy(detail.white_paper_link)">{{$t('common.copy')}}</div> |
|||
</div> |
|||
</div> |
|||
<div class="d-flex justify-between p-x-md p-y-xs"> |
|||
<div class="flex-shrink">{{$t('exchange.b3')}}</div> |
|||
<div class="color-light d-flex"> |
|||
<div class="address eps-1 p-r-xs m-r-xs border-r fn-wrap"> |
|||
{{detail.official_website_link}} |
|||
</div> |
|||
<div class="color-sell flex-shrink" @click="$copy(detail.official_website_link)">{{$t('common.copy')}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="p-md"> |
|||
<div class="fn-20 color-light"> |
|||
{{$t('exchange.b4')}} |
|||
</div> |
|||
<div class="p-y-md edit-content" v-html="detail.coin_content"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Market from '@/api/market' |
|||
export default { |
|||
props:{ |
|||
query:{ |
|||
default:{} |
|||
} |
|||
}, |
|||
data(){ |
|||
return { |
|||
detail:{} |
|||
} |
|||
}, |
|||
watch:{ |
|||
['query.code'](){ |
|||
this.getCoinInfo() |
|||
} |
|||
}, |
|||
methods:{ |
|||
getCoinInfo(){ |
|||
let data = { |
|||
coin_name:this.query.code.split('/')[0], |
|||
lang:uni.getStorageSync('language')=='zh-CN'?'zh-CN':'en' |
|||
} |
|||
Market.getstockCoinInfo(data).then(res=>{ |
|||
this.detail = res.data |
|||
}) |
|||
} |
|||
}, |
|||
created(){ |
|||
this.getCoinInfo() |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,90 @@ |
|||
<template> |
|||
<v-paging :ajax="getCurrentEntrust" ref="list" tag="div"> |
|||
<template #box="list"> |
|||
<not-data v-if="!$list(list).length"></not-data> |
|||
<div v-for="item in $list(list)" class="item bg-panel-4 m-md rounded-sm box-shadow" :key="item.order_no"> |
|||
<div class="head d-flex align-center border-b p-x-md p-y-xs justify-between"> |
|||
<div class="d-flex"> |
|||
<div v-if="item.entrust_type==1" class="suatus color-buy fn-20 m-r-xs rounded">{{$t('exchange.b5')}}</div> |
|||
<div v-if="item.entrust_type==2" class="suatus color-sell fn-20 m-r-xs rounded">{{$t('exchange.b6')}}</div> |
|||
<div> |
|||
<div class="color-light fn-20">{{item.symbol}}</div> |
|||
<div class="fn-10">{{item.created_at}}</div> |
|||
</div> |
|||
</div> |
|||
<div class="d-flex"> |
|||
<span>{{item.status_text}}</span> |
|||
</div> |
|||
</div> |
|||
<div class="p-x-md p-y-xs"> |
|||
<div class="row d-flex m-y-xs justify-between"> |
|||
<div class="label fn-sm">{{$t('exchange.b7')}}</div> |
|||
<div class="color-light">{{item.entrust_price}}</div> |
|||
</div> |
|||
<div class="row d-flex m-y-xs justify-between"> |
|||
<div class="label fn-sm">{{$t('exchange.b8')}}</div> |
|||
<div class="color-light"> |
|||
<template v-if="item.type==1">{{$t('exchange.b9')}}</template> |
|||
<template v-if="item.type==2">{{$t('exchange.c0')}}</template> |
|||
</div> |
|||
</div> |
|||
<div class="row d-flex m-y-xs justify-between"> |
|||
<div class="label fn-sm">{{$t('exchange.c1')}}</div> |
|||
<div class="color-buy">{{item.traded_amount}}</div> |
|||
</div> |
|||
<div class="row d-flex m-y-xs justify-between"> |
|||
<div class="label fn-sm">{{$t('exchange.c2')}}</div> |
|||
<div class="color-light">{{item.amount}}</div> |
|||
</div> |
|||
<div class="row d-flex m-y-xs justify-between"> |
|||
<div class="label fn-sm">{{$t('exchange.g3')}}</div> |
|||
<div class="color-light"> |
|||
<v-button type="red" class="rounded-xs" size="mini" @click="ifCancel(item)">{{$t('exchange.g4')}}</v-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</v-paging> |
|||
</template> |
|||
<script> |
|||
import Order from "@/api/order"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
getCurrentEntrust: Order.getstockCurrentEntrust, |
|||
}; |
|||
}, |
|||
methods: { |
|||
ifCancel(item) { |
|||
this.$dialog |
|||
.confirm({ |
|||
title: this.$t('common.tips'), |
|||
message: this.$t('exchange.g5')+'?', |
|||
confirmButtonText: this.$t("common.confirm"), |
|||
cancelButtonText: this.$t("common.cancel") |
|||
}) |
|||
.then(() => { |
|||
this.cancelEntrust(item); |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
// 撤销委托 |
|||
cancelEntrust(item) { |
|||
let data = { |
|||
entrust_id: item.id, |
|||
entrust_type: item.entrust_type, |
|||
symbol: item.symbol, |
|||
}; |
|||
Order.stockcancelEntrust(data).then(() => { |
|||
this.$toast.success(this.$t('exchange.g6')); |
|||
this.$refs.list.list.forEach((ele, idx) => { |
|||
if (item.id == ele.id) { |
|||
this.$refs.list.list.splice(idx, 1); |
|||
} |
|||
}); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,202 @@ |
|||
<template> |
|||
<div |
|||
:prop="config" |
|||
:change:prop="depthmap.changeConfig" |
|||
class="depthMap bg-panel-1" |
|||
ref="depthMap" |
|||
></div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props: { |
|||
serveSellList: { |
|||
default() { |
|||
return []; |
|||
}, |
|||
type: Array, |
|||
}, |
|||
serveBuyList: { |
|||
default() { |
|||
return []; |
|||
}, |
|||
type: Array, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
config:{} |
|||
}; |
|||
}, |
|||
computed: { |
|||
mapConfig() { |
|||
return { |
|||
chart: { |
|||
type: "areaspline", |
|||
spacingRight: 0, |
|||
spacingLeft: 0, |
|||
zoomType: "xy", |
|||
backgroundColor: "transparent", |
|||
}, |
|||
title: { text: null }, |
|||
credits: { |
|||
enabled: false, |
|||
}, |
|||
tooltip: { |
|||
// enabled: false, |
|||
}, |
|||
xAxis: { |
|||
visible: false, |
|||
}, |
|||
yAxis: { |
|||
visible: false, |
|||
}, |
|||
legend: { |
|||
floating: true, |
|||
verticalAlign: "top", |
|||
// rtl: true, |
|||
}, |
|||
plotOptions: { |
|||
area: { |
|||
fillOpacity: 0.2, |
|||
lineWidth: 1, |
|||
step: "center", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: this.$t("exchange.b5"), |
|||
lineWidth: 1, |
|||
data: [], |
|||
marker: { |
|||
enabled: false, |
|||
}, |
|||
color: "#00c162", |
|||
|
|||
fillColor: { |
|||
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, |
|||
stops: [ |
|||
[0, "rgba(2,150,82,.5)"], |
|||
[1, "rgba(2,150,82,.2)"], |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
name: this.$t("exchange.b6"), |
|||
lineWidth: 1, |
|||
data: [], |
|||
marker: { |
|||
enabled: false, |
|||
}, |
|||
color: "#dd1900", |
|||
fillColor: { |
|||
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, |
|||
stops: [ |
|||
[0, "rgba(221,25,0,.5)"], |
|||
[1, "rgba(221,25,0,.2)"], |
|||
], |
|||
}, |
|||
|
|||
// fillColor:'#00c162' |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
}, |
|||
watch: { |
|||
serveSellList() { |
|||
this.resetData(); |
|||
}, |
|||
serveBuyList() { |
|||
this.resetData(); |
|||
}, |
|||
}, |
|||
methods: { |
|||
getConfig(){ |
|||
return { |
|||
type:'initPage', |
|||
sellList:this.serveSellList, |
|||
buyList:this.serveBuyList, |
|||
config:this.mapConfig |
|||
} |
|||
}, |
|||
resetData(){ |
|||
this.config = { |
|||
type:'resetData', |
|||
sellList:this.serveSellList, |
|||
buyList:this.serveBuyList, |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
this.config = this.getConfig() |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<script module="depthmap" lang="renderjs"> |
|||
import Highcharts from "highcharts/highstock"; |
|||
export default { |
|||
data(){ |
|||
return { |
|||
buyList:[], |
|||
sellList:[], |
|||
chartConfig:{}, |
|||
chart: undefined, |
|||
} |
|||
}, |
|||
methods: { |
|||
initMap() { |
|||
this.chart = Highcharts.chart(this.$refs.depthMap, this.chartConfig); |
|||
}, |
|||
getBuyList() { |
|||
let arr = this.buyList |
|||
.map((item) => { |
|||
return [item.price*1, item.amount]; |
|||
}) |
|||
.sort((a, b) => a[0] - b[0]); |
|||
return arr; |
|||
}, |
|||
getSellList() { |
|||
let arr = this.sellList |
|||
.map((item) => { |
|||
return [item.price*1, item.amount]; |
|||
}) |
|||
.sort((a, b) => a[0] - b[0]); |
|||
return arr; |
|||
}, |
|||
setData(){ |
|||
this.chart.series[0].setData(this.getBuyList()); |
|||
this.chart.series[1].setData(this.getSellList()); |
|||
}, |
|||
changeConfig(n){ |
|||
this.task(n) |
|||
}, |
|||
task(obj){ |
|||
switch (obj.type) { |
|||
case 'initPage': |
|||
this.buyList = obj.buyList |
|||
this.sellList = obj.sellList |
|||
this.chartConfig = obj.config |
|||
break; |
|||
case 'resetData': |
|||
this.buyList = obj.buyList; |
|||
this.sellList = obj.sellList |
|||
this.setData() |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.task(this.config) |
|||
this.initMap(); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.depthMap { |
|||
height: 200px; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,177 @@ |
|||
<template> |
|||
<v-page class="layout-main"> |
|||
<v-header :title="$t('first.a6')"></v-header> |
|||
<view class="d-flex border-b"> |
|||
<view class="d-flex rounded-lg justify-between w-max p-b-xs"> |
|||
<view |
|||
@click="active = 0" |
|||
class="p-y-xs p-x-lg fn-center w-50" |
|||
> |
|||
<text :class="{ 'color-theme-1 active p-b-xs': active == 0 }">{{$t('first.a7')}}</text> |
|||
</view> |
|||
<view |
|||
@click="active = 1" |
|||
class="p-y-xs p-x-lg fn-center w-50" |
|||
> |
|||
<text :class="{ 'color-theme-1 active p-b-xs': active == 1 }">{{$t('first.a8')}}</text> |
|||
</view |
|||
> |
|||
</view> |
|||
</view> |
|||
<v-paging :ajax="getCurrentEntrust" :key="1" ref="list" tag="div" v-if="active==0"> |
|||
<template #box="list"> |
|||
<not-data v-if="!$list(list).length"></not-data> |
|||
<div v-for="item in $list(list)" class="item bg-panel-4 m-md rounded-sm box-shadow" :key="item.order_no"> |
|||
<div class="head d-flex align-center border-b p-x-md p-y-xs justify-between"> |
|||
<div class="d-flex"> |
|||
<div v-if="item.entrust_type==1" class="suatus color-buy fn-20 m-r-xs rounded">{{$t('exchange.b5')}}</div> |
|||
<div v-if="item.entrust_type==2" class="suatus color-sell fn-20 m-r-xs rounded">{{$t('exchange.b6')}}</div> |
|||
<div> |
|||
<div class="color-light fn-20">{{item.symbol}}</div> |
|||
<div class="fn-10">{{item.created_at}}</div> |
|||
</div> |
|||
</div> |
|||
<div class="d-flex"> |
|||
<span>{{item.status_text}}</span> |
|||
</div> |
|||
</div> |
|||
<div class="p-x-md p-y-xs"> |
|||
<div class="row d-flex m-y-xs justify-between"> |
|||
<div class="label fn-sm">{{$t('exchange.b7')}}</div> |
|||
<div class="color-light">{{item.entrust_price}}</div> |
|||
</div> |
|||
<div class="row d-flex m-y-xs justify-between"> |
|||
<div class="label fn-sm">{{$t('exchange.b8')}}</div> |
|||
<div class="color-light"> |
|||
<template v-if="item.type==1">{{$t('exchange.b9')}}</template> |
|||
<template v-if="item.type==2">{{$t('exchange.c0')}}</template> |
|||
</div> |
|||
</div> |
|||
<div class="row d-flex m-y-xs justify-between"> |
|||
<div class="label fn-sm">{{$t('exchange.c1')}}</div> |
|||
<div class="color-buy">{{item.traded_amount}}</div> |
|||
</div> |
|||
<div class="row d-flex m-y-xs justify-between"> |
|||
<div class="label fn-sm">{{$t('exchange.c2')}}</div> |
|||
<div class="color-light">{{item.amount}}</div> |
|||
</div> |
|||
<div class="row d-flex m-y-xs justify-between"> |
|||
<div class="label fn-sm">{{$t('exchange.g3')}}</div> |
|||
<div class="color-light"> |
|||
<v-button type="red" class="rounded-xs" size="mini" @click="ifCancel(item)">{{$t('exchange.g4')}}</v-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</v-paging> |
|||
|
|||
<v-paging class="layout-main" :key="2" :ajax="getHistoryEntrust" v-if="active==1"> |
|||
<template #box="list"> |
|||
<not-data v-if="!$list(list).length"></not-data> |
|||
<div v-for="item in $list(list)" class="item bg-panel-4 m-md rounded-sm box-shadow" :key="item.order_no"> |
|||
<div class="head d-flex align-center border-b p-x-md p-y-xs justify-between"> |
|||
<div class="d-flex"> |
|||
<div v-if="item.entrust_type==1" class="suatus color-buy fn-20 m-r-xs rounded">{{$t('exchange.b5')}}</div> |
|||
<div v-if="item.entrust_type==2" class="suatus color-sell fn-20 m-r-xs rounded">{{$t('exchange.b6')}}</div> |
|||
<div> |
|||
<div class="color-light fn-20">{{item.symbol}}</div> |
|||
<div class="fn-10">{{item.created_at}}</div> |
|||
</div> |
|||
</div> |
|||
<div>{{item.status_text}}</div> |
|||
</div> |
|||
<div class="p-x-md p-y-xs"> |
|||
<div class="row d-flex m-y-xs justify-between"> |
|||
<div class="label fn-sm">{{$t('exchange.b7')}}</div> |
|||
<div class="color-light">{{item.entrust_price}}</div> |
|||
</div> |
|||
<div class="row d-flex m-y-xs justify-between"> |
|||
<div class="label fn-sm">{{$t('exchange.b8')}}</div> |
|||
<div class="color-light"> |
|||
<template v-if="item.type==1">{{$t('exchange.b9')}}</template> |
|||
<template v-if="item.type==2">{{$t('exchange.c0')}}</template> |
|||
</div> |
|||
</div> |
|||
<div class="row d-flex m-y-xs justify-between"> |
|||
<div class="label fn-sm">{{$t('exchange.c1')}}</div> |
|||
<div class="color-buy">{{item.traded_amount}}</div> |
|||
</div> |
|||
<div class="row d-flex m-y-xs justify-between"> |
|||
<div class="label fn-sm">{{$t('exchange.e2')}}</div> |
|||
<div class="color-light">{{item.avg_price}}</div> |
|||
</div> |
|||
|
|||
<div class="row d-flex m-y-xs justify-between"> |
|||
<div class="label fn-sm">{{$t('exchange.c2')}}</div> |
|||
<div class="color-light">{{item.amount}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</v-paging> |
|||
</v-page> |
|||
</template> |
|||
<script> |
|||
import Order from "@/api/order"; |
|||
import math from '@/utils/class/math' |
|||
export default { |
|||
data(){ |
|||
return { |
|||
active: 0, |
|||
getHistoryEntrust: Order.getstockHistoryEntrust, |
|||
getCurrentEntrust: Order.getstockCurrentEntrust, |
|||
} |
|||
}, |
|||
methods:{ |
|||
division:math.division, |
|||
ifCancel(item) { |
|||
this.$dialog |
|||
.confirm({ |
|||
title: this.$t('common.tips'), |
|||
message: this.$t('exchange.g5')+'?', |
|||
confirmButtonText: this.$t("common.confirm"), |
|||
cancelButtonText: this.$t("common.cancel") |
|||
}) |
|||
.then(() => { |
|||
this.cancelEntrust(item); |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
// 撤销委托 |
|||
cancelEntrust(item) { |
|||
let data = { |
|||
entrust_id: item.id, |
|||
entrust_type: item.entrust_type, |
|||
symbol: item.symbol, |
|||
}; |
|||
Order.stockcancelEntrust(data).then(() => { |
|||
this.$toast.success(this.$t('exchange.g6')); |
|||
this.$refs.list.list.forEach((ele, idx) => { |
|||
if (item.id == ele.id) { |
|||
this.$refs.list.list.splice(idx, 1); |
|||
} |
|||
}); |
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.active{ |
|||
position: relative; |
|||
// border-bottom: 1px solid $theme-1; |
|||
} |
|||
.active:after{ |
|||
position: absolute; |
|||
content: ""; |
|||
width: 30%; |
|||
height: 2px; |
|||
background-color: $theme-1; |
|||
bottom: 0; |
|||
left: 35%; |
|||
} |
|||
.w-50{ |
|||
width: 50%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,60 @@ |
|||
<template> |
|||
<v-paging :ajax="getHistoryEntrust"> |
|||
<template #box="list"> |
|||
<not-data v-if="!$list(list).length"></not-data> |
|||
<div v-for="item in $list(list)" class="item bg-panel-4 m-md rounded-sm box-shadow" :key="item.order_no"> |
|||
<div class="head d-flex align-center border-b p-x-md p-y-xs justify-between"> |
|||
<div class="d-flex"> |
|||
<div v-if="item.entrust_type==1" class="suatus color-buy fn-20 m-r-xs rounded">{{$t('exchange.b5')}}</div> |
|||
<div v-if="item.entrust_type==2" class="suatus color-sell fn-20 m-r-xs rounded">{{$t('exchange.b6')}}</div> |
|||
<div> |
|||
<div class="color-light fn-20">{{item.symbol}}</div> |
|||
<div class="fn-10">{{item.created_at}}</div> |
|||
</div> |
|||
</div> |
|||
<div>{{item.status_text}}</div> |
|||
</div> |
|||
<div class="p-x-md p-y-xs"> |
|||
<div class="row d-flex m-y-xs justify-between"> |
|||
<div class="label fn-sm">{{$t('exchange.b7')}}</div> |
|||
<div class="color-light">{{item.entrust_price}}</div> |
|||
</div> |
|||
<div class="row d-flex m-y-xs justify-between"> |
|||
<div class="label fn-sm">{{$t('exchange.b8')}}</div> |
|||
<div class="color-light"> |
|||
<template v-if="item.type==1">{{$t('exchange.b9')}}</template> |
|||
<template v-if="item.type==2">{{$t('exchange.c0')}}</template> |
|||
</div> |
|||
</div> |
|||
<div class="row d-flex m-y-xs justify-between"> |
|||
<div class="label fn-sm">{{$t('exchange.c1')}}</div> |
|||
<div class="color-buy">{{item.traded_amount}}</div> |
|||
</div> |
|||
<div class="row d-flex m-y-xs justify-between"> |
|||
<div class="label fn-sm">{{$t('exchange.e2')}}</div> |
|||
<div class="color-buy">{{(item.traded_money/item.traded_amount).toFixed(4)*1||'--'}}</div> |
|||
</div> |
|||
|
|||
<div class="row d-flex m-y-xs justify-between"> |
|||
<div class="label fn-sm">{{$t('exchange.c2')}}</div> |
|||
<div class="color-light">{{item.amount}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</v-paging> |
|||
</template> |
|||
<script> |
|||
import Order from "@/api/order"; |
|||
import math from '@/utils/class/math' |
|||
export default { |
|||
data(){ |
|||
return { |
|||
getHistoryEntrust: Order.getstockHistoryEntrust, |
|||
} |
|||
}, |
|||
methods:{ |
|||
division:math.division |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,566 @@ |
|||
<template> |
|||
<v-page> |
|||
<v-header :leftClick="() => {}" :left-arrow="false"> |
|||
<template #left> |
|||
<view @click="$back(-1)"> |
|||
<i class="van-icon van-icon-arrow-left van-nav-bar__arrow"></i> |
|||
</view> |
|||
<view |
|||
class="fn-20 color-light m-l-xs" |
|||
@click.stop="symbolListShow = true" |
|||
> |
|||
<i class="iconfont color-theme-1"></i> |
|||
{{ query.code }} |
|||
</view> |
|||
</template> |
|||
<template #right> |
|||
<view class="fn-lg" @click="option"> |
|||
<van-icon v-if="isCoolect" class="color-theme-1" name="star" /> |
|||
<van-icon v-else name="star-o" /> |
|||
</view> |
|||
</template> |
|||
</v-header> |
|||
<view class="layout-main"> |
|||
<view |
|||
class="price-data d-flex p-t-xs p-x-md justify-between bg-panel-3 rounded-xs" |
|||
> |
|||
<view class="col"> |
|||
<view class="num fn-26 color-light"> |
|||
{{ activeCoin.price }} |
|||
</view> |
|||
<view class="d-flex"> |
|||
<view |
|||
class="m-l-xs fn-20" |
|||
:class="activeCoin.increase < 0 ? 'color-sell' : 'color-buy'" |
|||
> |
|||
{{ activeCoin.increaseStr }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="col fn-right justify-center d-flex flex-col"> |
|||
<table> |
|||
<tr> |
|||
<td>24h {{ $t("exchange.e3") }}</td> |
|||
<td class="color-light">{{ activeCoin.high }}</td> |
|||
</tr> |
|||
<tr> |
|||
<td>24h {{ $t("exchange.e4") }}</td> |
|||
<td class="color-light">{{ activeCoin.low }}</td> |
|||
</tr> |
|||
<tr v-if="!query.contract"> |
|||
<td>24h {{ $t("exchange.e5") }}</td> |
|||
<!-- <td class="color-light">{{ (activeCoin.vol).toFixed(4)}}</td> --> |
|||
<td class="color-light">{{activeCoin.vol}}</td> |
|||
</tr> |
|||
</table> |
|||
</view> |
|||
</view> |
|||
|
|||
<van-tabs |
|||
:border="false" |
|||
:active="activeTime" |
|||
animated |
|||
:ellipsis="false" |
|||
@change="tabInterval($event.detail.name)" |
|||
> |
|||
<van-tab |
|||
v-for="item in resolutions" |
|||
:name="item.value" |
|||
:title="item.label" |
|||
:key="item.label" |
|||
> |
|||
</van-tab> |
|||
</van-tabs> |
|||
<view class="chart-box"> |
|||
<iframe |
|||
class="chart-tradingview" |
|||
:src="`${mobileBase}static/tradingview.html?${setQuery( |
|||
iframeQuery |
|||
)}`" |
|||
|
|||
></iframe> |
|||
</view> |
|||
<van-tabs |
|||
animated |
|||
swipeable |
|||
v-model="active" |
|||
sticky |
|||
:ellipsis="false" |
|||
offset-top="1.22667rem" |
|||
> |
|||
<van-tab :title="$t('exchange.e6')"> |
|||
<sale :buyList="buyList" :sellList="sellList" :query="query"/> |
|||
</van-tab> |
|||
<van-tab :title="$t('exchange.d3')"> |
|||
<latest-transaction :tradeList="tradeList" /> |
|||
</van-tab> |
|||
<van-tab :title="$t('exchange.e7')"> |
|||
<coin-info :query="query" /> |
|||
</van-tab> |
|||
</van-tabs> |
|||
</view> |
|||
<!-- 左侧的弹窗 --> |
|||
<van-popup |
|||
class="bg-panel-4" |
|||
:show="symbolListShow" |
|||
@close="symbolListShow = false" |
|||
close-on-popstate |
|||
position="left" |
|||
custom-style="height:100%;width:70%" |
|||
> |
|||
<symbol-list |
|||
:collect="collect" |
|||
:marketList="marketList" |
|||
:title="query.contract ? $t('contract.a4') : ''" |
|||
@check-symbol="checkSymbol" |
|||
/> |
|||
</van-popup> |
|||
<view class="btn-group d-flex p-md"> |
|||
<v-button |
|||
block |
|||
class="flex-fill m-r-md rounded-lg" |
|||
type="green" |
|||
replace |
|||
:to="{ |
|||
path: '/pages/base/index', |
|||
query: { |
|||
symbol: query.code, |
|||
direction: 'buy', |
|||
tel: query.contract ? 'contract' : 'exchange-operation', |
|||
}, |
|||
}" |
|||
>{{ $t("exchange.c3") }}</v-button |
|||
> |
|||
<v-button |
|||
block |
|||
class="flex-fill rounded-lg" |
|||
type="blue" |
|||
replace |
|||
:to="{ |
|||
path: '/pages/base/index', |
|||
query: { |
|||
symbol: query.code, |
|||
direction: 'sell', |
|||
tel: query.contract ? 'contract' : 'exchange-operation', |
|||
}, |
|||
}" |
|||
>{{ $t("exchange.c4") }}</v-button |
|||
> |
|||
</view> |
|||
<van-toast id="van-toast" /> |
|||
</v-page> |
|||
</template> |
|||
<script> |
|||
import sale from "./sale"; |
|||
import symbolList from "./symbol-list"; |
|||
import latestTransaction from "./latest-transaction"; |
|||
import coinInfo from "./coin-info"; |
|||
import Market from "@/api/market"; |
|||
import Contract from "@/api/contract"; |
|||
import Home from "@/api/home"; |
|||
import { mapState } from "vuex"; |
|||
import math from "@/utils/class/math"; |
|||
import Exchange from "@/api/exchange"; |
|||
import qs from "qs"; |
|||
import app from "app.js"; |
|||
// 所使用的请求 |
|||
let ajaxExchangeMap = { |
|||
getMarketList: Market.getstockMarketList, |
|||
getBooks: Market.getstockBooks, |
|||
sell: "sellList_", |
|||
sellList: "sellList", |
|||
buy: "buyList_", |
|||
buyList: "buyList", |
|||
trade: "tradeList_", |
|||
tradeList: "tradeList", |
|||
market: "exchangeMarketList", |
|||
getSymbol(name) { |
|||
return name; |
|||
}, |
|||
}; |
|||
let contractExchangeMap = { |
|||
getMarketList: Contract.getMarketList, |
|||
getBooks: Contract.getMarketInfo, |
|||
sell: "swapSellList_", |
|||
sellList: "swapSellList", |
|||
buy: "swapBuyList_", |
|||
buyList: "swapBuyList", |
|||
trade: "swapTradeList_", |
|||
tradeList: "swapTradeList", |
|||
market: "swapMarketList", |
|||
getSymbol(name) { |
|||
return name.split("/")[0]; |
|||
}, |
|||
}; |
|||
|
|||
export default { |
|||
components: { |
|||
sale, |
|||
symbolList, |
|||
latestTransaction, |
|||
coinInfo, |
|||
}, |
|||
data() { |
|||
return { |
|||
timeFilter: false, |
|||
indexFilter: false, |
|||
symbolListShow: false, |
|||
active: 0, |
|||
buyList: [], |
|||
sellList: [], |
|||
tradeList: [], |
|||
activeTime: "1D", |
|||
// activeTime: "60", |
|||
index: "", |
|||
marketList: [], |
|||
collect: [], |
|||
unSymbol: "", |
|||
query: {}, |
|||
isLoad: false, |
|||
isShow: true, |
|||
price_cny: 0, |
|||
app |
|||
}; |
|||
}, |
|||
watch: { |
|||
timeFilter(n) { |
|||
if (n) this.indexFilter = false; |
|||
}, |
|||
indexFilter(n) { |
|||
if (n) this.timeFilter = false; |
|||
}, |
|||
}, |
|||
computed: { |
|||
resolutions() { |
|||
let arr = [ |
|||
{ |
|||
label: "1" + this.$t("exchange.e8"), |
|||
value: "1", |
|||
}, |
|||
{ |
|||
label: "5" + this.$t("exchange.e8"), |
|||
value: "5", |
|||
}, |
|||
{ |
|||
label: "15" + this.$t("exchange.e8"), |
|||
value: "15", |
|||
}, |
|||
{ |
|||
label: "30" + this.$t("exchange.e8"), |
|||
value: "30", |
|||
}, |
|||
{ |
|||
label: "1" + this.$t("exchange.e9"), |
|||
value: "60", |
|||
}, |
|||
// { |
|||
// label: "4" + this.$t("exchange.e9"), |
|||
// value: "240", |
|||
// }, |
|||
{ |
|||
label: "1" + this.$t("exchange.f0"), |
|||
value: "1D", |
|||
}, |
|||
{ |
|||
label: "1" + this.$t("exchange.f1"), |
|||
value: "1W", |
|||
}, |
|||
{ |
|||
label: "1" + this.$t("exchange.f2"), |
|||
value: "1M", |
|||
}, |
|||
]; |
|||
return arr; |
|||
}, |
|||
activeTimeObj() { |
|||
return this.resolutions.find((item) => item.value == this.activeTime); |
|||
}, |
|||
isLogin() { |
|||
return Boolean(uni.getStorageSync("token")); |
|||
}, |
|||
// 当前选中的coin |
|||
activeCoin() { |
|||
if (!this.marketList.length) return {}; |
|||
let list = []; |
|||
this.marketList.forEach((parentItem) => { |
|||
parentItem.marketInfoList.forEach((item) => { |
|||
list.push(item); |
|||
}); |
|||
}); |
|||
return list.find((item) => item.pair_name == this.query.code); |
|||
}, |
|||
// 是否为自选 |
|||
isCoolect() { |
|||
return this.collect |
|||
.map((item) => item.pair_name) |
|||
.includes(this.query.code); |
|||
}, |
|||
...mapState({ |
|||
socket: "ws", |
|||
socket1: "ws1", |
|||
socket2: "ws2", |
|||
theme:'theme' |
|||
}), |
|||
ajax() { |
|||
return this.query.contract ? contractExchangeMap : ajaxExchangeMap; |
|||
}, |
|||
ws() { |
|||
// return this.query.contract ? this.socket1 : this.socket; |
|||
return this.query.contract ? this.socket2 : this.socket; |
|||
}, |
|||
iframeQuery() { |
|||
if (this.query.contract) { |
|||
return { |
|||
getLinkUrl: this.app.baseUrl + "/api/app/contract/getKline", |
|||
symbol: this.query.code.split("/")[0], |
|||
theme: this.theme, |
|||
ws: this.app.socketUrl2, |
|||
interval: this.activeTime, |
|||
resolutions: this.resolutions.map((item) => item.value), |
|||
contract: 1, |
|||
// lang:uni.getStorageSync('language')||'zh-CN' |
|||
lang:'en' |
|||
}; |
|||
} else { |
|||
return { |
|||
// getLinkUrl: this.app.baseUrl + "/api/app/contract/getKline", |
|||
// symbol: this.query.code.split("/")[0], |
|||
// theme: this.theme, |
|||
// ws: this.app.socketUrl2, |
|||
// interval: this.activeTime, |
|||
// resolutions: this.resolutions.map((item) => item.value), |
|||
// contract: 1, |
|||
// lang:uni.getStorageSync('language')||'zh-CN', |
|||
lang:'en', |
|||
getLinkUrl: this.app.baseUrl + "/api/app/option/getStockKline", |
|||
// getLinkUrl: this.app.baseUrl + "/api/app/option/getKline", |
|||
symbol: this.query.code, |
|||
theme: this.theme, |
|||
ws: this.app.socketUrl, |
|||
interval: this.activeTime, |
|||
resolutions: this.resolutions.map((item) => item.value), |
|||
}; |
|||
} |
|||
}, |
|||
mobileBase() { |
|||
// #ifdef APP-PLUS |
|||
if (plus.os.name == "Android") { |
|||
return ""; |
|||
} else { |
|||
return this.app.mobile+'/'; |
|||
} |
|||
// #endif |
|||
// #ifdef H5 |
|||
return '/'; |
|||
// #endif |
|||
}, |
|||
}, |
|||
methods: { |
|||
division:math.division, |
|||
setQuery: qs.stringify, |
|||
omitTo: math.omitTo, |
|||
// 页面通知图形 |
|||
tabInterval(idx) { |
|||
// if (this.isLoad) return; |
|||
// this.isLoad = true; |
|||
this.activeTime = idx; |
|||
}, |
|||
// 图形通知页面 |
|||
changeInterval($ev) { |
|||
this.activeTime = $ev; |
|||
setTimeout(() => { |
|||
this.isLoad = false; |
|||
}, 300); |
|||
}, |
|||
getBooks() { |
|||
this.ajax.getBooks({ |
|||
symbol: this.ajax.getSymbol(this.query.code), |
|||
}) |
|||
.then((res) => { |
|||
this.buyList = res.data[this.ajax.buyList]; |
|||
this.sellList = res.data[this.ajax.sellList]; |
|||
this.tradeList = res.data[this.ajax.tradeList]; |
|||
}); |
|||
}, |
|||
// 获取市场行情 |
|||
getMarketList() { |
|||
this.ajax.getMarketList().then((res) => { |
|||
this.marketList = res.data; |
|||
this.linkSocket(this.activeCoin.symbol); |
|||
this.symbolListSocket(); |
|||
}); |
|||
}, |
|||
// 获取自选列表 |
|||
getCollect() { |
|||
if (!this.isLogin) return; |
|||
Home.getCollect() |
|||
.then((res) => { |
|||
this.collect = res.data || []; |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
// 切换币种 |
|||
checkSymbol(obj) { |
|||
this.symbolListShow = false; |
|||
if (obj.pair_name == this.query.code) return; |
|||
// this.query = {code:obj.pair_name}; |
|||
this._router.replace({ |
|||
path: "/pages/stockexchange/index", |
|||
query: { code: obj.pair_name, contract: this.query.contract }, |
|||
}); |
|||
this.getBooks(); |
|||
}, |
|||
// 添加自选 |
|||
option() { |
|||
let data = { |
|||
pair_name: this.query.code, |
|||
}; |
|||
Home.option(data) |
|||
.then((res) => { |
|||
this.getCollect(); |
|||
if (res.data) { |
|||
this.$toast(this.$t("exchange.a6")); |
|||
} else { |
|||
this.$toast(this.$t("exchange.a7")); |
|||
} |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
// 获取汇率 |
|||
getCurrencyExCny() { |
|||
Exchange.getCurrencyExCny({ |
|||
coin_name: this.query.code.split("/")[1], |
|||
}).then((res) => { |
|||
this.price_cny = res.data.price_cny; |
|||
}); |
|||
}, |
|||
// 链接socket |
|||
linkSocket(symbol) { |
|||
this.unSymbol = symbol; |
|||
// 订阅买线 |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: `${this.ajax.buy}${symbol}`, |
|||
}); |
|||
// 订阅卖线 |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: `${this.ajax.sell}${symbol}`, |
|||
}); |
|||
// 订阅成交 |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: `${this.ajax.trade}${symbol}`, |
|||
}); |
|||
}, |
|||
// 取消订阅 |
|||
unLink(symbol) { |
|||
// 取消买线 |
|||
this.ws.send({ |
|||
cmd: "unsub", |
|||
msg: `${this.ajax.buy}${symbol}`, |
|||
}); |
|||
// 取消卖线 |
|||
this.ws.send({ |
|||
cmd: "unsub", |
|||
msg: `${this.ajax.sell}${symbol}`, |
|||
}); |
|||
// 取消成交 |
|||
this.ws.send({ |
|||
cmd: "unsub", |
|||
msg: `${this.ajax.trade}${symbol}`, |
|||
}); |
|||
}, |
|||
// 左侧的socket 不做切换要单独开来 |
|||
symbolListSocket() { |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: this.ajax.market, |
|||
}); |
|||
}, |
|||
// 接受socket |
|||
socketMessage() { |
|||
this.ws.on("message", (res) => { |
|||
if (!this.isShow) return; |
|||
let { data, sub } = res; |
|||
let arr=this.query.code.replace("/","") |
|||
let arr1=arr.substring(0,arr.length-4) |
|||
let symbol = !this.query.contract?this.query.code.replace("/", "").toLocaleLowerCase():arr1; |
|||
if (sub == this.ajax.market) { |
|||
this.marketList=JSON.parse(JSON.stringify(data)) |
|||
} |
|||
if (sub == `${this.ajax.buy}${symbol}`) { |
|||
this.buyList=JSON.parse(JSON.stringify(data)) |
|||
} |
|||
if (sub == `${this.ajax.sell}${symbol}`) { |
|||
this.sellList=JSON.parse(JSON.stringify(data)) |
|||
} |
|||
if (sub == `${this.ajax.trade}${symbol}`) { |
|||
this.tradeList.unshift(data); |
|||
this.tradeList.pop(); |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
onUnload() { |
|||
this.isShow = false; |
|||
this.unLink(this.unSymbol); |
|||
}, |
|||
onLoad(query) { |
|||
this.query = query; |
|||
this.isShow = true; |
|||
this.getBooks(); |
|||
this.getMarketList(); |
|||
this.getCollect(); |
|||
this.socketMessage(); |
|||
this.getCurrencyExCny(); |
|||
}, |
|||
destroyed() { |
|||
this.ws.send({ |
|||
cmd: "unsub", |
|||
msg: this.ajax.market, |
|||
}); |
|||
this.unLink(this.unSymbol); |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.price-data { |
|||
position: relative; |
|||
.filter { |
|||
label { |
|||
.button { |
|||
border: none; |
|||
background: none; |
|||
&:active { |
|||
color: $theme-1; |
|||
} |
|||
} |
|||
input { |
|||
display: none; |
|||
} |
|||
|
|||
.filter-panel { |
|||
position: absolute; |
|||
top: 103%; |
|||
left: $padding-md; |
|||
right: $padding-md; |
|||
overflow: hidden; |
|||
|
|||
button { |
|||
background: none; |
|||
border: none; |
|||
&.active, |
|||
&:active { |
|||
color: $theme-1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.chart-tradingview { |
|||
height: 370px; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,46 @@ |
|||
<template> |
|||
<table class="w-max"> |
|||
<thead> |
|||
<tr class="fn-sm"> |
|||
<th class="p-l-md p-y-xs fn-left">{{$t('exchange.d4')}}</th> |
|||
<th class="fn-left">{{$t('exchange.d5')}}</th> |
|||
<th class="fn-right">{{$t('exchange.d2')}}</th> |
|||
<th class="p-r-md p-y-xs fn-right">{{$t('exchange.c5')}}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody class="color-light"> |
|||
<tr v-for="(item,idx) in tradeList" :key="idx"> |
|||
<td class="p-l-md p-y-xs">{{parseTime(item.ts,false,'{h}:{i}:{s}')}}</td> |
|||
<td> |
|||
<span class="color-buy" v-if="item.direction=='buy'"> |
|||
{{$t('exchange.b5')}} |
|||
</span> |
|||
<span class="color-sell" v-else> |
|||
{{$t('exchange.b6')}} |
|||
</span> |
|||
</td> |
|||
<td class="fn-right">{{item.price}}</td> |
|||
<td class="p-r-md p-y-xs fn-right">{{omitTo(item.amount,8)*1}}</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</template> |
|||
<script> |
|||
import math from "@/utils/class/math"; |
|||
import date from "@/utils/class/date"; |
|||
export default { |
|||
props: { |
|||
tradeList: { |
|||
default() { |
|||
return []; |
|||
}, |
|||
type: Array, |
|||
required: false, |
|||
}, |
|||
}, |
|||
methods:{ |
|||
parseTime:date.parseTime, |
|||
omitTo:math.omitTo, |
|||
} |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,92 @@ |
|||
<template> |
|||
<div> |
|||
<!-- 深度图 --> |
|||
<!-- <div class="depth-map"> |
|||
<depth-map :serveSellList="sellList" :serveBuyList="buyList" /> |
|||
</div> --> |
|||
<div class="d-flex fn-sm buy-and-sell"> |
|||
<div :class="query.code!='GITP/USDT'?'w-6/12 buy':'w-12/12 buy'"> |
|||
<div class="d-flex justify-between p-xs"> |
|||
<div>{{$t('exchange.c5')}}</div> |
|||
<div>{{$t('exchange.f3')}}</div> |
|||
</div> |
|||
<div class="d-flex item justify-between p-xs" v-for="(item,idx) in buyList" :key="idx"> |
|||
<div class="progress bg-buy-transparent transition-default" :style="{width:getValue(item.amount)+'%'}"></div> |
|||
<div class="color-light">{{item.amount}}</div> |
|||
|
|||
<div class="color-buy">{{item.price}}</div> |
|||
</div> |
|||
</div> |
|||
<div class="w-6/12 sell"> |
|||
<div class="d-flex justify-between p-xs"> |
|||
<div>{{$t('exchange.c5')}}</div> |
|||
<div>{{$t('exchange.f4')}}{{sellList.length}}</div> |
|||
</div> |
|||
<div class="d-flex item justify-between p-xs" v-for="(item,idx) in sellList" :key="idx"> |
|||
<div class="progress bg-sell-transparent transition-default" :style="{width:getValue(item.amount)+'%'}"></div> |
|||
<div class="color-light">{{item.amount}}</div> |
|||
|
|||
<div class="color-sell">{{item.price}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import depthMap from "./depth-map"; |
|||
import math from "@/utils/class/math"; |
|||
export default { |
|||
props: { |
|||
sellList: { |
|||
default() { |
|||
return []; |
|||
}, |
|||
type: Array, |
|||
}, |
|||
buyList: { |
|||
default() { |
|||
return []; |
|||
}, |
|||
type: Array, |
|||
}, |
|||
query:{ |
|||
default:{} |
|||
} |
|||
}, |
|||
components: { |
|||
depthMap, |
|||
}, |
|||
methods: { |
|||
// 计算深度 当前数量 / 买卖最大值 |
|||
getValue(amount) { |
|||
const arr = this.buyList.concat(this.sellList).map((item) => item.amount); |
|||
let max = Math.max(...arr); |
|||
return math.division(amount, max, 2) * 100; |
|||
}, |
|||
}, |
|||
mounted() { |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.buy-and-sell { |
|||
.item { |
|||
position: relative; |
|||
.progress { |
|||
position: absolute; |
|||
height: 100%; |
|||
top: 0; |
|||
} |
|||
} |
|||
.buy { |
|||
.progress { |
|||
left: 0; |
|||
} |
|||
} |
|||
.sell { |
|||
.progress { |
|||
right: 0; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,132 @@ |
|||
<template> |
|||
<div class="p-l-xs d-flex flex-col dep-list"> |
|||
<!-- 卖 --> |
|||
<div class="d-flex justify-between fn-xs m-b-xs"> |
|||
<span>{{$t('exchange.d2')}}</span> |
|||
<span>{{$t('exchange.c5')}}</span> |
|||
</div> |
|||
<div class=" overflow-scroll rotatebox" v-if="symbol!='GITP/USDT'"> |
|||
<div class="rotateZ"> |
|||
<div |
|||
class="d-flex justify-between h-24 align-center row" |
|||
v-for="(item,idx) in showSellList" |
|||
:key="idx" |
|||
@click="$emit('price',item.price)" |
|||
> |
|||
<span class="color-sell">{{item.price}}</span> |
|||
<!-- <span class="color-sell" v-if="item.price>100">{{omitTo(item.price,2)}}</span> |
|||
<span class="color-sell" v-if="item.price>1&&item.price<100">{{omitTo(item.price,4)}}</span> |
|||
<span class="color-sell" v-if="item.price<1">{{omitTo(item.price,6)}}</span> --> |
|||
<span class="p-r-xs">{{omitTo(item.amount,2)}}</span> |
|||
<div |
|||
class="proagess h-max bg-sell-transparent" |
|||
:style="{width:getValue(item.amount)+'%'}" |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="border-t border-b p-y-xs"> |
|||
<slot/> |
|||
</div> |
|||
<div class=" overflow-scroll"> |
|||
<div |
|||
class="d-flex justify-between h-24 align-center row" |
|||
v-for="(item,idx) in showBuyList" |
|||
:key="idx" |
|||
@click="$emit('price',item.price)" |
|||
> |
|||
<span class="color-buy">{{item.price}}</span> |
|||
<!-- <span class="color-buy" v-if="item.price>100">{{omitTo(item.price,2)}}</span> |
|||
<span class="color-buy" v-if="item.price>1&&item.price<100">{{omitTo(item.price,4)}}</span> |
|||
<span class="color-buy" v-if="item.price<1">{{omitTo(item.price,6)}}</span> --> |
|||
<span class="p-r-xs">{{omitTo(item.amount,2)}}</span> |
|||
<div class="proagess h-max bg-buy-transparent" :style="{width:getValue(item.amount)+'%'}"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import date from "@/utils/class/date"; |
|||
import math from "@/utils/class/math"; |
|||
export default { |
|||
name: "buy-and-sell", |
|||
props: { |
|||
buyList: { |
|||
default:()=> [], |
|||
required: true, |
|||
type: Array, |
|||
}, |
|||
sellList: { |
|||
default: ()=>[], |
|||
required: true, |
|||
type: Array, |
|||
}, |
|||
max:{ |
|||
default:undefined, |
|||
type:Number, |
|||
required:false |
|||
}, |
|||
contract:{ |
|||
default:undefined, |
|||
type:Number, |
|||
required:false |
|||
}, |
|||
symbol: { |
|||
default: undefined, |
|||
type: String, |
|||
required: false, |
|||
}, |
|||
}, |
|||
components: {}, |
|||
computed: { |
|||
showBuyList(){ |
|||
if(this.max){ |
|||
return this.buyList.splice(0,this.max) |
|||
} |
|||
return this.buyList |
|||
}, |
|||
showSellList(){ |
|||
if(this.max&&this.contract==1){ |
|||
return this.sellList.splice(this.sellList.length-this.max,this.max) |
|||
} |
|||
if(this.max&&this.contract==0){ |
|||
return this.sellList.splice(0,this.max) |
|||
} |
|||
return this.sellList |
|||
} |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
parseTime: date.parseTime, |
|||
omitTo: math.omitTo, |
|||
// 计算深度 |
|||
getValue(amount) { |
|||
const arr = this.showBuyList.concat(this.showSellList).map((item) => item.amount); |
|||
let max = Math.max(...arr); |
|||
return math.division(amount, max, 2) * 100; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.dep-list { |
|||
max-height: 456px; |
|||
.row { |
|||
position: relative; |
|||
.proagess { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
transition: width 0.3s; |
|||
} |
|||
} |
|||
} |
|||
.rotatebox { |
|||
transform: rotateZ(-180deg); |
|||
.rotateZ { |
|||
transform: rotateZ(180deg); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,177 @@ |
|||
<template> |
|||
<view class="symbol-list"> |
|||
<view class="w-max" style="height: var(--status-bar-height)"></view> |
|||
<view class="title fn-18 p-md color-light">{{ title||$t("exchange.f5") }}</view> |
|||
<van-search |
|||
background="transparent" |
|||
:value="filterText" |
|||
@change="filterText = $event.detail" |
|||
:placeholder="$t('exchange.f6')" |
|||
/> |
|||
<van-tabs :active="active"> |
|||
<van-tab |
|||
:title="heyue==1&&parentItem.coin_name=='USDT'?$t('first.b8'):parentItem.coin_name" |
|||
v-for="parentItem in showMarketList" |
|||
:key="parentItem.coin_name" |
|||
> |
|||
|
|||
<view class="p-x-xs m-t-md"> |
|||
<table class="w-max"> |
|||
<thead v-if="heyue==0"> |
|||
<tr class="fn-sm"> |
|||
<th class="p-l-md p-y-xs fn-left">{{ $t("exchange.f7") }}</th> |
|||
<th class="fn-left">{{ $t("exchange.f8") }}</th> |
|||
<th class="p-r-md p-y-xs fn-right">{{ $t("exchange.f9") }}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr |
|||
class="p-y-md" |
|||
:class="symbols==item.coin_name&&heyue==1?'bg-panel':''" |
|||
v-for="item in parentItem.marketInfoList" |
|||
:key="item.symbol" |
|||
v-show="isShow(item.pair_name)" |
|||
@click="$emit('check-symbol', item)" |
|||
> |
|||
<td class="p-l-md p-y-md w-40"> |
|||
<template v-if="parentItem.isCollect"> |
|||
<span class="color-light">{{ item.pair_name }}</span> |
|||
</template> |
|||
<template v-else> |
|||
<span class="color-light">{{ item.coin_name||item.symbol }}/{{ parentItem.coin_name }}</span> |
|||
</template> |
|||
</td> |
|||
<td class="w-30 fn-center"> |
|||
<template v-if="heyue==0" :class="item.increase < 0 ? 'color-sell' : 'color-buy'"> |
|||
{{ item.price }} |
|||
</template> |
|||
<template v-else> |
|||
{{$t('first.b8')}} |
|||
</template> |
|||
</td> |
|||
<td |
|||
v-if="heyue==0" |
|||
:class="item.increase < 0 ? 'color-sell' : 'color-buy'" |
|||
class="p-r-md p-y-xs fn-right w-30" |
|||
> |
|||
{{ item.increaseStr }} |
|||
</td> |
|||
<td |
|||
v-if="heyue==1" |
|||
:class="item.increase < 0 ? 'color-sell' : 'color-buy'" |
|||
class="p-r-md p-y-xs fn-right" |
|||
> |
|||
{{ item.price }} |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</view> |
|||
</van-tab> |
|||
</van-tabs> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props: { |
|||
marketList: { |
|||
default() { |
|||
return []; |
|||
}, |
|||
type: Array, |
|||
required: false, |
|||
}, |
|||
collect: { |
|||
default() { |
|||
return []; |
|||
}, |
|||
type: Array, |
|||
required: false, |
|||
}, |
|||
title:{ |
|||
default:'' |
|||
}, |
|||
heyue:{ |
|||
default: 1, |
|||
type: Number, |
|||
required: false, |
|||
}, |
|||
symbols:{ |
|||
default: '', |
|||
type: String, |
|||
required: false, |
|||
} |
|||
}, |
|||
computed: { |
|||
showMarketList() { |
|||
let collect = this.collect.map((item) => item.pair_name); |
|||
let collects = []; |
|||
this.marketList.forEach((parentItem) => { |
|||
// if(this.contract==1&&parentItem.coin_name=='USDT'){ |
|||
// parentItem.coin_name=this.$t('first.b8') |
|||
// } |
|||
// console.log(parentItem.coin_name,this.contract) |
|||
parentItem.marketInfoList.forEach((item) => { |
|||
if (collect.includes(item.pair_name)) { |
|||
collects.push(item); |
|||
} |
|||
}); |
|||
}); |
|||
let arr = [ |
|||
|
|||
...this.marketList, |
|||
{ |
|||
coin_name: this.$t("exchange.g0"), |
|||
isCollect: true, |
|||
marketInfoList: collects, |
|||
}, |
|||
]; |
|||
// console.info(arr) |
|||
return arr; |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
active: 0, |
|||
filterText: "", |
|||
}; |
|||
}, |
|||
methods: { |
|||
isShow(str) { |
|||
return ( |
|||
str.toLocaleLowerCase().indexOf(this.filterText.toLocaleLowerCase()) != |
|||
-1 |
|||
); |
|||
}, |
|||
}, |
|||
created() {}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.table-list { |
|||
tr:nth-of-type(2n-1) { |
|||
td { |
|||
background: $panel-3; |
|||
} |
|||
} |
|||
} |
|||
/deep/ .van-tabs__line::before{ |
|||
width: 35px; |
|||
height: 2px; |
|||
border-radius:5px; |
|||
background-color: $theme-1; |
|||
} |
|||
table{ |
|||
border-collapse:collapse |
|||
|
|||
} |
|||
.w-40{ |
|||
width: 40%; |
|||
} |
|||
.w-30{ |
|||
width: 30%; |
|||
} |
|||
.w-30{ |
|||
width: 30%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,339 @@ |
|||
<template> |
|||
<div id="chart122" :prop="config" :change:prop="highstock.changeConfig" class="chart-box"></div> |
|||
</template> |
|||
<script> |
|||
import { mapState } from "vuex"; |
|||
export default { |
|||
props: { |
|||
tradeList: { |
|||
default() { |
|||
return []; |
|||
}, |
|||
type: Array, |
|||
required: false, |
|||
}, |
|||
query: { |
|||
default: {}, |
|||
type: Object, |
|||
required: false, |
|||
}, |
|||
}, |
|||
computed: { |
|||
...mapState({ |
|||
serveTheme: "theme", |
|||
}), |
|||
}, |
|||
watch: {}, |
|||
data() { |
|||
return { |
|||
config: {}, |
|||
}; |
|||
}, |
|||
methods: { |
|||
resetData(){ |
|||
this.config = ''; |
|||
this.$nextTick(()=>{ |
|||
this.config = { |
|||
type:'resetList', |
|||
list:this.tradeList, |
|||
date:new Date() |
|||
} |
|||
}) |
|||
}, |
|||
addPoint(data){ |
|||
this.config = { |
|||
type:'addPoint', |
|||
point:data, |
|||
date:new Date() |
|||
} |
|||
}, |
|||
getConfig() { |
|||
return { |
|||
type: "initPage", |
|||
list: this.tradeList, |
|||
theme:this.serveTheme |
|||
}; |
|||
}, |
|||
}, |
|||
created() { |
|||
this.config = this.getConfig(); |
|||
}, |
|||
}; |
|||
</script> |
|||
<script module="highstock" lang="renderjs"> |
|||
import highstock from "highcharts/highstock"; |
|||
export default { |
|||
|
|||
computed: { |
|||
list() { |
|||
return this.chartTradList.map((item) => { |
|||
return [item.ts, item.price*1]; |
|||
}); |
|||
}, |
|||
|
|||
}, |
|||
watch: {}, |
|||
data() { |
|||
return { |
|||
chart: undefined, |
|||
chartTradList:[], |
|||
theme:'light' |
|||
}; |
|||
}, |
|||
methods: { |
|||
changeConfig(config){ |
|||
this.task(config) |
|||
}, |
|||
task(config){ |
|||
switch (config.type) { |
|||
case 'resetList': |
|||
this.chartTradList = config.list; |
|||
this.setData(this.list) |
|||
break; |
|||
case 'addPoint': |
|||
this.webAddPoint(config.point) |
|||
break; |
|||
case 'initPage': |
|||
this.chartTradList = config.list; |
|||
this.theme = config.theme; |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}, |
|||
|
|||
isDSTByRules() { |
|||
const now = new Date(); |
|||
const year = now.getUTCFullYear(); |
|||
// 计算夏令时开始时间（3月第二个周日 2:00 AM EDT） |
|||
const dstStart = this.getNthSunday(year, 2, 2, 2); // 月份从 0 开始（2=3月） |
|||
|
|||
// 计算夏令时结束时间（11月第一个周日 2:00 AM EST） |
|||
const dstEnd = this.getNthSunday(year, 10, 1, 2); // 月份从 0 开始（10=11月） |
|||
return now >= dstStart && now < dstEnd; |
|||
}, |
|||
|
|||
// 辅助函数：获取某年第n个月的第m个周日（月份从0开始） |
|||
getNthSunday(year, month, occurrence, hour) { |
|||
if (month === 10 && occurrence === 1) { |
|||
const date = new Date(year, 10, 3); // 11月3日 |
|||
date.setHours(hour, 0, 0, 0); |
|||
return date; |
|||
} |
|||
let date = new Date(year, month, 1); |
|||
let count = 0; |
|||
|
|||
while (true) { |
|||
if (date.getDay() === 0) { |
|||
if (++count === occurrence) { |
|||
date.setHours(hour); |
|||
return date; |
|||
} |
|||
} |
|||
date.setDate(date.getDate() + 1); |
|||
} |
|||
}, |
|||
|
|||
intiChart($box) { |
|||
let timeData = this.isDSTByRules() |
|||
highstock.setOptions({ |
|||
global: { |
|||
timezoneOffset: timeData ? 16 * 60 : 16 * 60, |
|||
}, |
|||
}); |
|||
|
|||
this.chart = highstock.stockChart($box, { |
|||
chart: { |
|||
marginTop: 0, |
|||
// marginLeft: 0, |
|||
marginBottom: 20, |
|||
padding: 0, |
|||
panning: false, //禁用放大 |
|||
pinchType: "", //禁用手势操作 |
|||
zoomType: "", |
|||
panKey: "shift", |
|||
backgroundColor: "transparent", |
|||
borderColor: "transparent", |
|||
borderWidth: "1", |
|||
plotBackgroundColor: "transparent", |
|||
Point: { |
|||
visible: !1, |
|||
}, |
|||
}, |
|||
rangeSelector: { |
|||
enabled: false, |
|||
}, |
|||
navigator: { |
|||
enabled: false, |
|||
}, |
|||
scrollbar: { |
|||
enabled: false, |
|||
}, |
|||
exporting: { |
|||
enabled: !0, |
|||
}, |
|||
credits: { |
|||
enabled: !1, |
|||
}, |
|||
mapNavigation: { |
|||
enabled: !1, |
|||
enableButtons: !1, |
|||
}, |
|||
navigation: { |
|||
enabled: !1, |
|||
buttonOptions: {}, |
|||
}, |
|||
title: { |
|||
text: null, |
|||
}, |
|||
yAxis: { |
|||
gridLineWidth: 1, |
|||
tickWidth: 0, |
|||
tickColor: "#22222d", |
|||
tickAmount: 7, |
|||
// lineWidth: 1, |
|||
lineColor: "#1E2E3F", |
|||
labels: { |
|||
align: "center", |
|||
x: 0, |
|||
style: { |
|||
color: this.theme=='light'?"#333":"#dcdee0", |
|||
fontSize: "8px", |
|||
}, |
|||
useHTML: !0, |
|||
formatter: (ev) => { |
|||
return this.nFormatter(ev.value, 3); |
|||
}, |
|||
}, |
|||
opposite: false, |
|||
gridLineColor: "transparent", |
|||
}, |
|||
xAxis: { |
|||
type: "datetime", |
|||
dateTimeLabelFormats: { |
|||
millisecond: "%H:%M:%S.%L", |
|||
second: "%H:%M:%S", |
|||
minute: "%H:%M", |
|||
hour: "%H:%M", |
|||
day: "%m-%d", |
|||
week: "%m-%d", |
|||
month: "%Y-%m", |
|||
year: "%Y", |
|||
}, |
|||
tickWidth: 0, |
|||
lineWidth: "0", |
|||
tickLength: 0, |
|||
labels: { |
|||
style: { |
|||
color: this.theme=='light'?"#333":"#dcdee0", |
|||
fontSize: "10px", |
|||
}, |
|||
y: 10, |
|||
}, |
|||
}, |
|||
tooltip: { |
|||
enabled: false, |
|||
dateTimeLabelFormats: { |
|||
millisecond: "%H:%M:%S.%L", |
|||
second: "%H:%M:%S", |
|||
minute: "%H:%M", |
|||
hour: "%H:%M", |
|||
day: "%Y-%m-%d", |
|||
week: "%m-%d", |
|||
month: "%Y-%m", |
|||
year: "%Y", |
|||
}, |
|||
}, |
|||
legend: { |
|||
enabled: !1, |
|||
}, |
|||
plotOptions: { |
|||
areaspline: { |
|||
allowPointSelect:false, |
|||
fillColor: { |
|||
linearGradient: { |
|||
x1: 0, |
|||
y1: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
}, |
|||
stops: [ |
|||
[0, "rgba(192,96,194,.58)"], |
|||
[1, "rgba(90,99,251,.13)"], |
|||
], |
|||
}, |
|||
marker: { |
|||
radius: 2, |
|||
}, |
|||
lineWidth: 2, |
|||
threshold: null, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
marker: { |
|||
radius: 0, |
|||
lineWidth: 0, |
|||
lineColor: "#fba845", |
|||
fillColor: "#fba845", |
|||
states: {}, |
|||
}, |
|||
type: "areaspline", |
|||
name: "", |
|||
data: this.list, |
|||
color: { |
|||
linearGradient:{ |
|||
x1:'0%', |
|||
y1:'0%', |
|||
x2:'100%', |
|||
y2:'100%' |
|||
}, |
|||
stops:[ |
|||
[0, '#C060C2'], |
|||
[1, '#5A63FB'], |
|||
] |
|||
}, |
|||
}, |
|||
], |
|||
}); |
|||
}, |
|||
nFormatter(num, digits) { |
|||
const si = [ |
|||
{ value: 1, symbol: "" }, |
|||
{ value: 1e3, symbol: "K" }, |
|||
{ value: 1e6, symbol: "M" }, |
|||
{ value: 1e9, symbol: "G" }, |
|||
{ value: 1e12, symbol: "T" }, |
|||
{ value: 1e15, symbol: "P" }, |
|||
{ value: 1e18, symbol: "E" }, |
|||
]; |
|||
const rx = /\.0+$|(\.[0-9]*[1-9])0+$/; |
|||
let i; |
|||
for (i = si.length - 1; i > 0; i--) { |
|||
if (num >= si[i].value) { |
|||
break; |
|||
} |
|||
} |
|||
return ( |
|||
(num / si[i].value).toFixed(digits).replace(rx, "$1") + si[i].symbol |
|||
); |
|||
}, |
|||
setData(arr) { |
|||
if(this.chart) this.chart.series[0].setData(arr); |
|||
}, |
|||
webAddPoint(obj){ |
|||
if(this.chart) this.chart.series[0].addPoint(obj,true,true) |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.task(this.config) |
|||
this.intiChart(document.getElementById("chart122")); |
|||
}, |
|||
destroyed() {}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.chart-box { |
|||
height: 100%; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue