liaoxinyu
/
kline_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改k线为多个页面 修改变为移动端时进行刷新 修改左侧菜单颜色定位

layui
liaoxinyu 2 years ago
parent
f54002315d
commit
9b1b816c3a
9 changed files with 259 additions and 82 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      public/index.html
  2. 2
      public/static/kline/src/klineCharts.js
  3. 37
      src/components/GqlUsdt.vue
  4. 37
      src/components/OigeUsdt.vue
  5. 15
      src/components/PytnUsdt.vue
  6. 37
      src/components/RpnUsdt.vue
  7. 51
      src/router/index.js
  8. 5
      src/views/AboutView.vue
  9. 154
      src/views/HomeView.vue

3
public/index.html
View File

@ -5,12 +5,12 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="./layui/css/layui.css" />
<!-- <script src="../static/kline/src/klinecharts.min.js"></script> -->
<script src="<%= BASE_URL %>static/kline/src/jquery-3.4.1.min.js"></script>
<script src="<%= BASE_URL %>static/kline/src/klinecharts.min.js"></script>
<script src="<%= BASE_URL %>static/kline/src/klinecharts.js"></script>
<script src="<%= BASE_URL %>static/kline/src/lang.js"></script>
<link rel="stylesheet" href="./layui/css/layui.css" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
@ -20,5 +20,6 @@
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="./layui/layui.js"></script>
<script src="<%= BASE_URL %>static/kline/src/index.js"></script>
</body>
</html>

2
public/static/kline/src/klineCharts.js
View File

@ -89,7 +89,7 @@ function loadMoreKline(data, is_first, key){
}
})
console.log(dataArr);
kcHistoryKeyId++;
// kcHistoryKeyId++;
if (dataArr.length <= 0) {
kcChart.applyMoreData(dataArr, false);
} else {

37
src/components/GqlUsdt.vue
View File

@ -0,0 +1,37 @@
<template>
<div>
<div id="kc-container"></div>
</div>
</template>
<script>
// import $ from 'jquery';
export default {
name: "GqlUsdt",
props: ["title"],
data() {
return {
loadingIndex: null
}
},
mounted() {
this.init()
},
methods: {
init() {
kcStart({
containerId: 'kc-container',
symbol: this.title,
coinScale: parseInt('5'), // 计价币种精度
volumeScale: parseInt('5'), // 成交量精度保留
interval: '15',
timezone: "America/Toronto",
language: 'zh_TW'
})
}
},
};
</script>
<style scoped>
</style>

37
src/components/OigeUsdt.vue
View File

@ -0,0 +1,37 @@
<template>
<div>
<div id="kc-container"></div>
</div>
</template>
<script>
// import $ from 'jquery';
export default {
name: "OigeUsdt",
props: ["title"],
data() {
return {
loadingIndex: null
}
},
mounted() {
this.init()
},
methods: {
init() {
kcStart({
containerId: 'kc-container',
symbol: this.title,
coinScale: parseInt('5'), // 计价币种精度
volumeScale: parseInt('5'), // 成交量精度保留
interval: '15',
timezone: "America/Toronto",
language: 'zh_TW'
})
}
},
};
</script>
<style scoped>
</style>

15
src/components/HelloWorld.vue → src/components/PytnUsdt.vue
View File

@ -6,25 +6,14 @@
<script>
// import $ from 'jquery';
// import kline from '../../static/kline/src/klineCharts.js';
export default {
name: "HelloWorld",
props: ["name"],
props: ["title"],
data() {
return {
loadingIndex: null
}
},
watch:{
name(){
this.init()
console.log('111');
// if(name){
// console.log('111');
// this.init()
// }
}
},
mounted() {
this.init()
},
@ -32,7 +21,7 @@
init() {
kcStart({
containerId: 'kc-container',
symbol: this.name,
symbol: this.title,
coinScale: parseInt('5'), // 计价币种精度
volumeScale: parseInt('5'), // 成交量精度保留
interval: '15',

37
src/components/RpnUsdt.vue
View File

@ -0,0 +1,37 @@
<template>
<div>
<div id="kc-container"></div>
</div>
</template>
<script>
// import $ from 'jquery';
export default {
name: "RpnUsdt",
props: ["title"],
data() {
return {
loadingIndex: null
}
},
mounted() {
this.init()
},
methods: {
init() {
kcStart({
containerId: 'kc-container',
symbol: this.title,
coinScale: parseInt('5'), // 计价币种精度
volumeScale: parseInt('5'), // 成交量精度保留
interval: '15',
timezone: "America/Toronto",
language: 'zh_TW'
})
}
},
};
</script>
<style scoped>
</style>

51
src/router/index.js
View File

@ -5,22 +5,45 @@ import HomeView from "../views/HomeView.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "home",
component: HomeView,
},
{
path: "/about",
name: "about",
component: () => import("../views/AboutView.vue"),
},
{
path: "",
redirect: "/PytnUsdt",
},
{
path: "/",
// name: "home",
component: HomeView,
children: [
// {
// path: '',
// name: 'PyttnUsdt', // 默认子路由名称
// redirect: 'PyttnUsdt'
// },
{
path: 'PytnUsdt',
// name: 'PyttnUsdt', // 默认子路由名称
component: () => import("../components/PytnUsdt.vue")
},
{
path: 'OigeUsdt',
component: () => import("../components/OigeUsdt.vue")
},
{
path: 'GqlUsdt',
component: () => import("../components/GqlUsdt.vue")
},
{
path: 'RpnUsdt',
component: () => import("../components/RpnUsdt.vue")
}
]
}
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
mode: "history",
base: process.env.BASE_URL,
routes,
});
export default router;
export default router;

5
src/views/AboutView.vue
View File

@ -1,5 +0,0 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

154
src/views/HomeView.vue
View File

@ -8,10 +8,14 @@
<a href="oige.html"><p class="market_list border-bottom-grey">OIGEUSDT</p></a>
<a href="gql.html"><p class="market_list border-bottom-grey">GQLUSDT</p></a>
<a href="rpn.html"><p class="market_list border-bottom-grey">RPNUSDT</p></a> -->
<p class="market_list border-bottom-grey" @click="handleClick('PYTN')" :style="{'color': title=='PYTN'?'red':'white'}">PYTNUSDT</p>
<p class="market_list border-bottom-grey" @click="handleClick('OIGE')" :style="{'color': title=='OIGE'?'red':'white'}">OIGEUSDT</p>
<p class="market_list border-bottom-grey" @click="handleClick('GQL')" :style="{'color': title=='GQL'?'red':'white'}">GQLUSDT</p>
<p class="market_list border-bottom-grey" @click="handleClick('RPN')" :style="{'color': title=='RPN'?'red':'white'}">RPNUSDT</p>
<p class="market_list border-bottom-grey" @click="handleClick('PYTN')"
:style="{'color': fullPath =='PytnUsdt'?'red':'white'}">PYTNUSDT</p>
<p class="market_list border-bottom-grey" @click="handleClick('OIGE')"
:style="{'color': fullPath =='OigeUsdt'?'red':'white'}">OIGEUSDT</p>
<p class="market_list border-bottom-grey" @click="handleClick('GQL')"
:style="{'color': fullPath =='GqlUsdt'?'red':'white'}">GQLUSDT</p>
<p class="market_list border-bottom-grey" @click="handleClick('RPN')"
:style="{'color': fullPath =='RpnUsdt'?'red':'white'}">RPNUSDT</p>
</div>
<!-- 右侧内容 -->
<div class="layui-body" style="top: 0 !important;bottom:0">
@ -45,9 +49,11 @@
</button>
</blockquote>
<HelloWorld :name='title'></HelloWorld>
<router-view :title="title" />
</div>
</div>
<div class="site-tree-mobile"><i class="layui-icon"></i></div>
<div class="site-mobile-shade"></div>
</div>
</template>
@ -55,63 +61,115 @@
import $ from 'jquery';
// import 'layui-src/src/layui.js';
// import 'layui-src/src/css/layui.css';
import HelloWorld from '@/components/HelloWorld.vue';
import PytnUsdt from '@/components/PytnUsdt.vue';
// import '../../static/kline/src/klineCharts.js';
export default {
name: "HomeView",
components: {
HelloWorld
PytnUsdt
},
data() {
return {
title:"PYTN"
title: "PYTN",
fullPath:""
};
},
computed: {
isMobile() {
return window.innerWidth <= 768; // 根据你的需求设置移动端的判断条件
}
},
mounted() {
$('.interval_btn').on('click', function(){
if(kcChart != null || kcChart != undefined){
var _this = $(this);
kcCurrentData.interval = _this.attr('data-interval');
// 请求历史数据
kcHistoryKeyId = 1;
var rang = setKLineVisibleRange(parseInt(Date.now() / 1000));
$.ajax({
url: "https://dfmg.dficoins.com/api/getkkline",
type: 'get',
async: false,
data: {
symbol: getSymbol(),
interval: getSecondsByInterval(kcCurrentData.interval),
times: kcHistoryKeyId,
from: rang.from,
to: rang.to + (365 * 86400)
},
beforeSend: function(){
loading_index = layer.load(1, {
shade: [0.1, '#fff'] //0.1透明度的白色背景
});
},
success:function (result) { //成功回调
console.log(result);
if(result.status){
loadMoreKline(result.data, true, result.code);
$('.interval_btn').removeClass('active');
_this.addClass('active');
}else{
}
layer.close(loading_index);
},
error: function(xhr){
layer.close(loading_index);
}
});
}
$('.interval_btn').on('click', function() {
if (kcChart != null || kcChart != undefined) {
var _this = $(this);
kcCurrentData.interval = _this.attr('data-interval');
// 请求历史数据
kcHistoryKeyId = 1;
var rang = setKLineVisibleRange(parseInt(Date.now() / 1000));
$.ajax({
url: "https://dfmg.dficoins.com/api/getkkline",
type: 'get',
async: false,
data: {
symbol: getSymbol(),
interval: getSecondsByInterval(kcCurrentData.interval),
times: kcHistoryKeyId,
from: rang.from,
to: rang.to + (365 * 86400)
},
beforeSend: function() {
loading_index = layer.load(1, {
shade: [0.1, '#fff'] //0.1透明度的白色背景
});
},
success: function(result) { //成功回调
console.log(result);
if (result.status) {
loadMoreKline(result.data, true, result.code);
$('.interval_btn').removeClass('active');
_this.addClass('active');
} else {
}
layer.close(loading_index);
},
error: function(xhr) {
layer.close(loading_index);
}
});
}
})
//手机设备的简单适配
$('.site-tree-mobile').on('click', function() {
$('body').addClass('site-mobile');
});
$('.site-mobile-shade').on('click', function() {
$('body').removeClass('site-mobile');
});
window.addEventListener('resize', this.handleResize);
// 初始化设置 fullPath
this.fullPath = this.$route.fullPath.split('/')[1];
// 监听路由改变
this.$router.afterEach((to, from) => {
this.fullPath = to.fullPath.split('/')[1];
});
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
methods: {
handleClick(name){
handleResize() {
if (this.isMobile) {
location.reload();
}
},
handleClick(name) {
this.title = name
switch (name) {
case 'PYTN':
this.$router.push({
path: '/PytnUsdt'
});
break;
case 'OIGE':
this.$router.push({
path: '/OigeUsdt'
});
break;
case 'GQL':
this.$router.push({
path: '/GqlUsdt'
});
break;
default:
this.$router.push({
path: '/RpnUsdt'
});
break;
}
$('body').removeClass('site-mobile');
}
}
};

Write Preview
Loading…
Cancel
Save