projectionscreenPc/src/views/release/release_trade.vue

<template>
	<div class="ce-warp">
		<div class="ce-warp1 ex-content-top">
			<!-- 左侧部分 -->
			<div class="ce-div1 hc-bgColor1" v-if="sideShow">
				<div class="list-div1 hc-bgColor3">
					<div class="list-div1-div1">
						<h2>{{$t('净资产折合')}}:</h2>
						<p>
							{{tradeCoinBalance}} {{currentPair.dealCoin}}
							<span class="hc-color hc-colors">≈0 CNY</span>
						</p>
						<div class="hide">
							<i class="fa-eye"></i>
						</div>
					</div>
				</div>

				<release-pair @updateOrder="updateOrder"></release-pair>
			</div>

			<!-- 中间部分 -->
			<div class="ce-div2 hc-bgColor1" :class="{'active': !sideShow}">
				<release-update @sideToggle="sideToggle"></release-update>

				<div class="qushi-box">
					<!-- K线 -->
					<div class="trade-chart-box" style="width: 100%;height: 100%;"><component ref="tradingViewChart" v-bind:is="tradingviewContainer" /></div>
				</div>
				
				<!-- 交易表单 -->
				<release-form :mainCoinBalance="mainCoinBalance" :tradeCoinBalance="tradeCoinBalance" @updateOrder="updateOrder"></release-form>
			</div>
			
			<div class="ce-div3 hc-bgColor1">
				<!-- 盘口数据 -->
				<release-depth :depthValue="depthValue" @chooseDepth="chooseDepth"></release-depth>
			</div>
			
			<div class="ce-div4 hc-bgColor1">
				<!-- 成交数据 -->
				<release-deal></release-deal>
			</div>
		</div>
		
		<div class="ce-warp1">
			<!-- 委托订单 -->
			<release-order ref="order"></release-order>
		</div>
		<div class="clear"></div>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import '@/charting_library/loading.css'; //loading样式加载图
	import tradingView from '@/components/tv.vue'; //K线模块
	import tv_setting from '@/store/tv_option.js'; //K线vuex
	import releasePair from './components/release_pair_list'
	import releaseUpdate from './components/release_data_update'
	import releaseForm from './components/release_form'
	import releaseDepth from './components/release_depth'
	import releaseDeal from './components/release_deal'
	import releaseOrder from './components/release_order_list'
	export default {
		name: 'releaseTrade',
		components: {
			releasePair, //交易对列表
			releaseUpdate, //最新交易对数据
			releaseForm, //交易表单
			releaseDepth, //交易盘口
			releaseDeal, //交易成交数据
			releaseOrder, //委托订单
		},
		data() {
			return {
				/*---------- K线图相关 -----------*/
				tradingviewContainer: '',
				skin: this.getsetting().skin,
				
				/*---------- 自定义 -----------*/
				symbolId:'',//uniapp传来的交易对(小写)
				symbolIdLine:'UBSC-USDT',//当前交易对(大写)(xxx-xxx格式)
				token: '', //uniapp传来的token
				sub: null, //当前交易对信息
				depth: { sellList: [], buyList: [] }, //当前交易对信息
				
				sideShow: true, //展开币种列表
				
				mainCoinBalance: '0', //主币余额
				tradeCoinBalance: '0', //交易币余额
				
				depthValue: 0,
				
				timers: '', //定时器
			}
		},
		computed: {
			...mapState('trend', ['allPairList', 'currentPair']),
		},
		watch:{
			currentPair(val,old){
				if(val.symbolId!==old.symbolId) this.restart()
			}
		},
		methods: {
			/* ----------------  以下是K线图配置  --------------------*/
			
			//K线vuex数据
			getsetting() {
				if (!this.$store.state.tv_set) {
					this.$store.state.tv_setting = tv_setting;
				}
				return this.$store.state.tv_setting;
			},
			
			//重启K线图
			restart() {
				this.$store.state.tv_setting.symbol = this.currentPair.symbolId; //K线版块(交易对)
				this.$refs.tradingViewChart.symbolTab();
			},
			
			//初始化K线图
			KlinFunc() {
				if (!this.getsetting().wsurl) {
					this.$store.state.tv_setting.skin = 'white'; //K线颜色 white \ black
					this.$store.state.tv_setting.symbol = this.currentPair.symbolId; //K线版块(交易对)
					this.load();
					console.log(11111111)
					this.$store.state.tv_setting.wsurl = 'ws://119.23.49.169:10803/ws/coin/exchange';
					this.$store.state.tv_setting.wsCompression = 0;
					this.tradingviewContainer = tradingView;
				} else {
					this.tradingviewContainer = tradingView;
				}
			},
			setloadingstyle(tv_option) {
				let loading_screen = tv_option.loading_screen(this.skin);
				let bodyd = document.getElementById('tradingView');
				if (loading_screen.backgroundColor) {
					bodyd.style.background = loading_screen.backgroundColor;
				}
			},
			load() {
				if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) || this.$route.name == 'mobile') {
					//手机端
					let _option = () => import('@/store/tv_option_mobile.js');
					_option().then(res => {
						this.$store.state.tv_option = res.default;
						//this.componentsContainer = tv;
						this.setloadingstyle(res.default);
					});
				} else {
					let _option = () => import('@/store/tv_option_pc.js');
					_option().then(res => {
						this.$store.state.tv_option = res.default;
						//this.componentsContainer = tv;
						this.setloadingstyle(res.default);
					});
				}
			},
			initCoin() { //获取初始币种
				this.getAxios('/api/coin/case/all')
					.then(data => {
						let list = data.data;
						let coin;
						
						if(this.$route.query.id) { //从其他页面，路由跳转过来
							list.forEach(item => {
								item.childen.forEach(item2 => {
									item2.prices.forEach(item3 => {
										if(item3.dealCoin == this.$route.query.id) {
											coin = item3;
										}
									})
								})
							});
						} else {
							list.forEach(item => {
								if(item.caseCode == 3) {
									coin = item.childen[0].prices[0];
								}
							})
						}
						
						this.$store.dispatch('trend/getNewPair', coin);
						this.getBalance();
					})
			},
			getBalance() { //获取余额
				this.getAxios('/api/user/assets/list?type=COIN_TO_COIN')
					.then(data => {
						let list = data.data;
						list.forEach(item => {
							if (item.coinId == this.currentPair.convertType) {
								this.mainCoinBalance = item.normalAmount;
							}
							if (item.coinId == this.currentPair.dealCoin) {
								this.tradeCoinBalance = item.normalAmount;
							}
						})
					})
			},
			
			sideToggle(val) { //左侧币种列表展开/收起
				this.sideShow = val;
			},
			
			getDepth() { //获取深度
				this.$store.dispatch('trend/getDepth', {
					symbol: this.currentPair.symbolId,
					depth: this.depthValue
				});
			},
			chooseDepth(val) { //切换深度
				this.depthValue = val;
			},
			updateOrder() { //更新订单
				this.$refs.order.getOrderList(1);
				this.getBalance();
			},
		},
		beforeDestroy() {
			clearInterval(this.timers);
		},
		created() {
			this.initCoin();
			this.KlinFunc()
			this.timers = setInterval(() => {
				this.$store.dispatch('trend/getAllPair');
				this.$store.dispatch('trend/getTransactions');
				this.$emit('updateOrder');
				this.getDepth();
			}, 1000);
		}
	}
</script>

<style scoped>
	.clear {
		width: 100%;
		height: 10px;
		background: #f9f9f9;
		overflow: hidden;
		clear: both;
	}
</style>