2022-11-28

hybrid/html/js/kline.js

@@ -68,7 +68,9 @@ var app = new Vue({
 			data: [],
 			dates: [],
 			volumes: [],
-		}
+		},
+		// 保存初始未处理的时间数据
+		oldDataKLine: ''
 
 	},
 	created() {
@@ -82,7 +84,7 @@ var app = new Vue({
 	mounted() {
 		myChart = echarts.init(document.getElementById('main'));
 		this.draw()
-		this.getKline();
+		this.getKline((new Date()).getTime());
 		// 获取成交记录
 		this.getDealHis();
 	},
@@ -167,7 +169,15 @@ var app = new Vue({
 
 			});
 			that.webSocket.onclose = function(event) {
-				console.log("WebSocket is closed now.");
+				that.$nextTick(() => {
+					that.scoketInit()
+					that.dataKLine = {
+						data: [],
+						dates: [],
+						volumes: [],
+					};
+					that.getKline((new Date()).getTime())
+				})
 			};
 		},
 		// 获取24小时交易数据统计
@@ -185,9 +195,9 @@ var app = new Vue({
 			}
 			if (type == 2) {
 				items = data.map(function(item) {
-					console.log(
-						`[${+item[1]},${+item[2]},${+item[3]},${+item[4]},${+item[5]}, ${+item[1] > +item[2] ? 1 : -1}]`,
-						'数据结果');
+					// console.log(
+					// 	`[${+item[1]},${+item[2]},${+item[3]},${+item[4]},${+item[5]}, ${+item[1] > +item[2] ? 1 : -1}]`,
+					// 	'数据结果');
 					return [+item[1], +item[4], +item[3], +item[2], +item[5]];
 				});
 			}
@@ -221,34 +231,33 @@ var app = new Vue({
 			return fmt;
 		},
 		// 获取k线数据,生成k线
-		getKline() {
+		getKline(time) {
 			console.log('qq');
 			const that = this;
 			// const tiemt = (new Date()).getTime() - (1000*60*60*24*6);
 			// console.log(tiemt,'k闲时间')
 			axiosGet('/index/history', {
-			// axiosGet('/api/v5/market/history-candles', {
-				// after:tiemt,
+				// axiosGet('/api/v5/market/history-candles', {
+				after: time,
 				instId: that.typeId,
 				bar: that.current,
-				limit: 300
 			}).then((res) => {
-
+				// 保存初始返回res对象
+				that.oldDataKLine = res[res.length-1][0];
+				// console.log(that.initDay(new Date(+that.oldDataKLine), "YYYY-mm-dd HH:MM:SS"))
+				// console.log(that.initDay(new Date(+res[0][0]), "YYYY-mm-dd HH:MM:SS"))
 				const ar = res.map((e) => {
 					let dateTime = new Date(+e[0]);
 					e[0] = that.initDay(dateTime, "YYYY-mm-dd HH:MM:SS");
 					return e
 				}).reverse()
-
-				that.dataKLine = {
-					dates: that.dataInit(ar, 1),
-					data: that.dataInit(ar, 2),
-					volumes: that.dataInit(ar, 3),
-				}
+				that.dataKLine.dates.unshift(...that.dataInit(ar, 1))
+				that.dataKLine.data.unshift(...that.dataInit(ar, 2))
+				that.dataKLine.volumes.unshift(...that.dataInit(ar, 3))
 				// that.dataKLine = {
-				// 	dates: dates,
-				// 	data:data,
-				// 	volumes: volumes,
+				// 	dates: that.dataInit(ar, 1),
+				// 	data: that.dataInit(ar, 2),
+				// 	volumes: that.dataInit(ar, 3),
 				// }
 
 				that.setKline()
@@ -328,7 +337,7 @@ var app = new Vue({
 		getDealHis() {
 			const that = this;
 			axiosGet('/index/deal', {
-			// axiosGet('/api/v5/market/trades', {
+				// axiosGet('/api/v5/market/trades', {
 				instId: that.typeId,
 				limit: 150
 			}).then((res) => {
@@ -361,10 +370,7 @@ var app = new Vue({
 			};
 			that.current = val;
 			that.webSocket.close()
-			that.$nextTick(() => {
-				that.scoketInit()
-			})
-			that.getKline()
+
 		},
 		// 切换类目
 		switchCategory(val) {
@@ -714,10 +720,10 @@ var app = new Vue({
 								color: 'rgba(255,255,255,.87)',
 								offset: [3, 0],
 								fontSize: 10,
-								position:"left", 
+								position: "left",
 								align: 'right',
 								formatter: function(params) {
-									console.log(params.value,'传入的处理数值');
+									// console.log(params.value,'传入的处理数值');
 									// return Number(params.value).toFixed(2)
 									return Number(params.value)
 								}
@@ -829,6 +835,8 @@ var app = new Vue({
 				let num = params.batch[0]['start'];
 				if (num == 0) {
 					console.log('到最左边了')
+					// console.log(that.initDay(new Date(+that.oldDataKLine), "YYYY-mm-dd HH:MM:SS"));
+					// that.getKline(that.oldDataKLine)
 				}
 			})
 			window.addEventListener('resize', () => {

hybrid/html/local.html

@@ -18,7 +18,7 @@
 					<div class="head-item-cell">
 						<span class="hic-label">漲跌幅</span>
 						<span class="hic-value"
-							:class="txData.upFlag==1?'price-green':'price-red'">{{txData.upRate || 0}}</span>
+							:class="txData.upFlag==1?'price-green':'price-red'">{{txData.upRate || 0}}%</span>
 					</div>
 					<div class="head-item-cell">
 						<span class="hic-label">高</span>