Skip to content

R
robot-monitor
Commit b1e9eaf2 authored by wxk's avatar wxk
Browse files
Options

页面布局重构

parent 80a0119b
Hide whitespace changes
Inline Side-by-side
Showing with 257 additions and 162 deletions
src/components/navLeft.vue
View file @ b1e9eaf2
......@@ -17,6 +17,9 @@
<el-menu-item index="BTY">BTY</el-menu-item>
<el-menu-item index="YCC">YCC</el-menu-item>
</el-submenu>
<el-menu-item index="account">
<span slot="title">账户监控</span>
</el-menu-item>
</el-menu>
</div>
</template>
......@@ -26,17 +29,22 @@
export default {
data(){
return{
platInfo: JSON.parse(sessionStorage.getItem('platInfo')),
active: ''
}
},
props: ['platInfo'],
created() {
this.active = this.$route.params.name;
this.active = this.$route.params.name || 'account';
},
methods: {
navClick() {
this.$router.push('/monitor/' + this.active)
Bus.$emit('navClick')
if(this.active != 'account'){
this.$router.push('/monitor/' + this.active)
Bus.$emit('navClick')
}else{
this.active = 'account';
this.$router.push('/monitor/account');
}
}
},
watch: {
......
src/router/index.js
View file @ b1e9eaf2
......@@ -24,9 +24,15 @@ export default new Router({
children:
[
{
path: 'account',
component: function(resolve){
require(['../views/account.vue'],resolve);
},
},
{
path:":name",
component: function(resolve){
require(['../views/overview.vue'],resolve);
require(['../views/RobotContainer.vue'],resolve);
},
children: [
{
......
src/views/Login.vue
View file @ b1e9eaf2
......@@ -104,6 +104,7 @@ import ApiConfig from "../config/api-config";
export default {
data(){
return {
salt: 'fzm_salt',//md5加盐值
show:true,
count:'',
timer:null,
......@@ -115,8 +116,8 @@ export default {
forget_password:'',//新密码
forget_rppassword:'',//确认新密码
forget_yzm:'',//忘记密码验证码
islogin:1,//1是登陆，2是注册 3是忘记密码
loginBody: {//登陆的数据
islogin:1,//1是登录，2是注册 3是忘记密码
loginBody: {//登录的数据
email: "",
password: "",
},
......@@ -213,7 +214,7 @@ export default {
if(res.data.code === 200){
this.$notify({
title: '提示',
message: "注册成功，请返回登陆",
message: "注册成功，请返回登录",
type: 'success',
duration:'2000',
});
......@@ -255,7 +256,7 @@ export default {
if(res.data.code === 200){
this.$notify({
title: '提示',
message: "登陆成功",
message: "登录成功",
type: 'success',
duration:'2000',
});
......@@ -280,7 +281,7 @@ export default {
.catch(err=>{
this.$notify({
title: '提示',
message: "登陆失败，请稍后再试",
message: "登录失败，请稍后再试",
type: 'error',
duration:'2000',
});
......@@ -338,7 +339,7 @@ export default {
if(res.data.code === 200){
this.$notify({
title: '提示',
message: "重置密码成功，请返回登陆",
message: "重置密码成功，请返回登录",
type: 'success',
duration:'2000',
});
......
src/views/RobotContainer.vue 0 → 100644
View file @ b1e9eaf2
<template>
<div class="box">
<overview v-if="$route.path.split('/').pop() !== 'RobotDetail'" :platInfo="platInfo"></overview>
<router-view></router-view>
</div>
</template>
<script>
import overview from './overview'
export default {
data() {
return {
}
},
props: ['platInfo'],
components: { overview },
}
</script>
<style scoped>
.box {
padding: 0 20px;
}
</style>
src/views/RobotDetails.vue
View file @ b1e9eaf2
......@@ -462,6 +462,7 @@
export default {
data(){
return{
robotBankList: JSON.parse(sessionStorage.getItem('robotBankList')),
robotDetailInfo: JSON.parse(sessionStorage.getItem('robotDetailInfo')),
robotInfo: {},
ticketInfo: '',//行情
......@@ -510,7 +511,6 @@
recordsLoading: false,//交易记录查询加载
}
},
props: ['robotBankList'],
created() {
this.init();
},
......@@ -1094,6 +1094,54 @@
</style>
<style>
/*select组件样式覆盖*/
.select-bar-content {
padding: 2px 0 0 65px;
.el-checkbox-button:last-child .el-checkbox-button__inner, .el-checkbox-button:first-child .el-checkbox-button__inner {
border-radius: 3px;
}
&.pair {
.el-checkbox-button__inner{
width: 85px;
}
.el-checkbox-group .el-checkbox-button:first-child {
margin-left: 90px;
}
}
.el-checkbox-button__inner {
padding: 5px 0;
width: 58px;
text-align: center;
background-color: #C3D3DF;
border-color: #C3D3DF;
box-shadow: none;
color: #fff;
border-radius: 3px;
font-size: 12px;
}
.el-checkbox-button {
margin: 0 10px 10px 0;
border-radius: 3px;
}
.el-checkbox-button.is-checked .el-checkbox-button__inner {
background-color: #7792A7;
border-color: #7792A7;
}
.el-checkbox-button.is-focus .el-checkbox-button__inner {
border-color: #dcdfe6;
}
&>.el-checkbox-button {
margin-left: -69px;
}
.el-checkbox-group {
margin-top: -34px;
.el-checkbox-button:first-child {
margin-left: 70px;
}
}
}
</style>
<style>
/*select组件样式覆盖*/
.record-box {
.select-bar-content {
padding: 0 0 0 40px;
......
src/views/account.vue 0 → 100644
View file @ b1e9eaf2
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
src/views/container.vue
View file @ b1e9eaf2
......@@ -48,17 +48,10 @@
})
},
getRobotBank() {
const params = {
"class":"bank", //账户级别 有robot bank admin三个返回数据也不同
"coin":[], //目标币种，用于首页里的筛选和币种监控 可选参数
"symbol":[], //币种对，用于网站监控里的筛选 可选参数
"status":"", //机器人运行状态 可选参数
"abnormal":"", //有profit,coin,base这三种异常类别 可选参数
"platform":[] //交易所种类 可选参数
}
axios.post(ApiConfig.GetRobotBank,params).then( res => {
axios.post(ApiConfig.GetRobotBank,{class : "bank"}).then( res => {
if (res.data.code === 200) {
// console.log(res.data.data);
sessionStorage.setItem('robotBankList',JSON.stringify(res.data.data))
this.robotBankList = res.data.data
}
})
......
src/views/overview.vue
View file @ b1e9eaf2
<template>
<div class="overview">
<div v-if="$route.path.split('/').pop() !== 'RobotDetail'">
<div class="overview-title">
<span>机器人监控</span>
<div class="overview-title">
<span>机器人监控</span>
</div>
<ul class="classify-overview">
<li class="normal" :class="{ 'filter' : robotStatus === 'normal'}" @click="statusFilter('normal')">
<p>{{robotStatusList.status_normal}}</p>
<p>正在运行(台)</p>
</li>
<li class="stop" :class="{ 'filter' : robotStatus === 'stop'}" @click="statusFilter('stop')">
<p>{{robotStatusList.status_stop}}</p>
<p>停止运行(台)</p>
</li>
<li class="abnormal" :class="{ 'filter' : robotStatus === 'profit'}" @click="statusFilter('profit')">
<p>{{robotStatusList.profit_status_abnormal}}</p>
<p>盈利异常(台)</p>
</li>
<li class="abnormal" :class="{ 'filter' : robotStatus === 'coin'}" @click="statusFilter('coin')">
<p>{{robotStatusList.coin_status_abnormal}}</p>
<p>目标币数量异常(台)</p>
</li>
<li class="abnormal" :class="{ 'filter' : robotStatus === 'base'}" @click="statusFilter('base')">
<p>{{robotStatusList.base_status_abnormal}}</p>
<p>基础币数量异常(台)</p>
</li>
</ul>
<div class="filter-box clearfix">
<span class="subtitle">{{subtitle}}</span>
<div class="select-bar clearfix" v-show="!robotStatus">
<div v-show="showWebFilter" class="select-bar-content exchange" :class="{'unfold' : !foldExchange}">
<span class="title">交易所</span>
<div class="fr">
<span class="ellipsis" v-show="webs.length>3 && foldExchange">...</span>
<span class="amount">{{checkedWebs.length}}</span>
<i class="fold-button"
:class="{'el-icon-caret-left' : foldExchange, 'el-icon-caret-bottom' : !foldExchange}"
v-show="webs.length>3"
@click="clickFoldExchange('web')"></i>
</div>
<el-checkbox-button :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全部</el-checkbox-button>
<el-checkbox-group v-model="checkedWebs" @change="handleCheckedChange">
<el-checkbox-button v-for="web in webs" :label="web" :key="web">{{web}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div v-show="showCurrencyFilter" class="select-bar-content currency" :class="{'unfold' : !foldExchange0}">
<span class="title">币种</span>
<div class="fr">
<span class="ellipsis" v-show="currencies.length>3 && foldExchange0">...</span>
<span class="amount">{{checkedCurrencies.length}}</span>
<i class="fold-button"
:class="{'el-icon-caret-left' : foldExchange0, 'el-icon-caret-bottom' : !foldExchange0}"
v-show="currencies.length>3"
@click="clickFoldExchange('currency')"></i>
</div>
<el-checkbox-button :indeterminate="isIndeterminate0" v-model="checkAll0" @change="handleCheckAllChange0">全部</el-checkbox-button>
<el-checkbox-group v-model="checkedCurrencies" @change="handleCheckedChange0">
<el-checkbox-button v-for="currency in currencies" :label="currency" :key="currency">{{currency}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div v-show="showPairFilter" class="select-bar-content pair" :class="{'unfold' : !foldExchange1}">
<span class="title">交易对</span>
<div class="fr">
<span class="ellipsis" v-show="pairs.length>3 && foldExchange1">...</span>
<span class="amount">{{checkedPairs.length}}</span>
<i class="fold-button"
:class="{'el-icon-caret-left' : foldExchange1, 'el-icon-caret-bottom' : !foldExchange1}"
v-show="pairs.length>2"
@click="clickFoldExchange('pair')"></i>
</div>
<el-checkbox-button :indeterminate="isIndeterminate1" v-model="checkAll1" @change="handleCheckAllChange1">全部交易对</el-checkbox-button>
<el-checkbox-group v-model="checkedPairs" @change="handleCheckedChange1">
<el-checkbox-button v-for="pair in pairs" :label="pair" :key="pair">{{pair}}</el-checkbox-button>
</el-checkbox-group>
</div>
</div>
<ul class="classify-overview">
<li class="normal" :class="{ 'filter' : robotStatus === 'normal'}" @click="statusFilter('normal')">
<p>{{robotStatusList.status_normal}}</p>
<p>正在运行(台)</p>
</li>
<li class="stop" :class="{ 'filter' : robotStatus === 'stop'}" @click="statusFilter('stop')">
<p>{{robotStatusList.status_stop}}</p>
<p>停止运行(台)</p>
</li>
<li class="abnormal" :class="{ 'filter' : robotStatus === 'profit'}" @click="statusFilter('profit')">
<p>{{robotStatusList.profit_status_abnormal}}</p>
<p>盈利异常(台)</p>
</li>
<li class="abnormal" :class="{ 'filter' : robotStatus === 'coin'}" @click="statusFilter('coin')">
<p>{{robotStatusList.coin_status_abnormal}}</p>
<p>目标币数量异常(台)</p>
</li>
<li class="abnormal" :class="{ 'filter' : robotStatus === 'base'}" @click="statusFilter('base')">
<p>{{robotStatusList.base_status_abnormal}}</p>
<p>基础币数量异常(台)</p>
</li>
</ul>
<div class="filter-box clearfix">
<span class="subtitle">{{subtitle}}</span>
<div class="select-bar clearfix" v-show="!robotStatus">
<div v-show="showWebFilter" class="select-bar-content exchange" :class="{'unfold' : !foldExchange}">
<span class="title">交易所</span>
<div class="fr">
<span class="ellipsis" v-show="webs.length>3 && foldExchange">...</span>
<span class="amount">{{checkedWebs.length}}</span>
<i class="fold-button"
:class="{'el-icon-caret-left' : foldExchange, 'el-icon-caret-bottom' : !foldExchange}"
v-show="webs.length>3"
@click="clickFoldExchange('web')"></i>
</div>
<el-checkbox-button :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全部</el-checkbox-button>
<el-checkbox-group v-model="checkedWebs" @change="handleCheckedChange">
<el-checkbox-button v-for="web in webs" :label="web" :key="web">{{web}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div v-show="showCurrencyFilter" class="select-bar-content currency" :class="{'unfold' : !foldExchange0}">
<span class="title">币种</span>
<div class="fr">
<span class="ellipsis" v-show="currencies.length>3 && foldExchange0">...</span>
<span class="amount">{{checkedCurrencies.length}}</span>
<i class="fold-button"
:class="{'el-icon-caret-left' : foldExchange0, 'el-icon-caret-bottom' : !foldExchange0}"
v-show="currencies.length>3"
@click="clickFoldExchange('currency')"></i>
</div>
<el-checkbox-button :indeterminate="isIndeterminate0" v-model="checkAll0" @change="handleCheckAllChange0">全部</el-checkbox-button>
<el-checkbox-group v-model="checkedCurrencies" @change="handleCheckedChange0">
<el-checkbox-button v-for="currency in currencies" :label="currency" :key="currency">{{currency}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div v-show="showPairFilter" class="select-bar-content pair" :class="{'unfold' : !foldExchange1}">
<span class="title">交易对</span>
<div class="fr">
<span class="ellipsis" v-show="pairs.length>3 && foldExchange1">...</span>
<span class="amount">{{checkedPairs.length}}</span>
<i class="fold-button"
:class="{'el-icon-caret-left' : foldExchange1, 'el-icon-caret-bottom' : !foldExchange1}"
v-show="pairs.length>2"
@click="clickFoldExchange('pair')"></i>
</div>
<el-checkbox-button :indeterminate="isIndeterminate1" v-model="checkAll1" @change="handleCheckAllChange1">全部交易对</el-checkbox-button>
<el-checkbox-group v-model="checkedPairs" @change="handleCheckedChange1">
<el-checkbox-button v-for="pair in pairs" :label="pair" :key="pair">{{pair}}</el-checkbox-button>
</el-checkbox-group>
</div>
</div>
</div>
<ul class="robots-box">
<li v-for="(item,index) in robotList" :key="item.tag"
:class="[(item.base_status==='abnormal' ||item.coin_status==='abnormal' || item.profit_status === 'abnormal') ? 'abnormal' : item.status || 'normal']">
<div class="operations">
<div class="detail" @click="showDetails(index)">
<span>查看详情</span>
<i class="el-icon-caret-right"></i>
</div>
<div class="switch">
<span v-show="value1">关闭</span>
<span v-show="!value1">开启</span>
<el-switch
v-model="value1"
active-color="rgba(119,146,167,1)"
inactive-color="rgba(236,239,241,1)"
@change="clickSwitch"
disabled>
</el-switch>
</div>
</div>
<ul class="robots-box">
<li v-for="(item,index) in robotList" :key="item.tag"
:class="[(item.base_status==='abnormal' ||item.coin_status==='abnormal' || item.profit_status === 'abnormal') ? 'abnormal' : item.status || 'normal']">
<div class="operations">
<div class="detail" @click="showDetails(index)">
<span>查看详情</span>
<i class="el-icon-caret-right"></i>
</div>
<p class="robot-name">{{item.tag}}</p>
<div class="chart-box">
<p class="title">今日盈亏</p>
<p v-show="item.today_profit>0" class="data gain">+{{(item.today_profit*100).toFixed(2)}}%</p>
<p v-show="item.today_profit<0" class="data lose">-{{(item.today_profit*100).toFixed(2)}}%</p>
<p v-show="item.today_profit==0" class="data none">- -</p>
<div>
<p v-show="item.status==='normal'" class="type">正在运行</p>
<p v-show="item.status==='stop'" class="type">停止运行</p>
<p>
<span class="result">总盈亏</span>
<span v-show="item.all_profit>0" class="data gain">+{{(item.all_profit*100).toFixed(2)}}%</span>
<span v-show="item.all_profit<0" class="data lose">-{{(item.all_profit*100).toFixed(2)}}%</span>
<span v-show="item.all_profit==0" class="data none">- -</span>
</p>
</div>
<div class="switch">
<span v-show="value1">关闭</span>
<span v-show="!value1">开启</span>
<el-switch
v-model="value1"
active-color="rgba(119,146,167,1)"
inactive-color="rgba(236,239,241,1)"
@change="clickSwitch"
disabled>
</el-switch>
</div>
<div class="coin">
<span>{{item.coin}}余额</span>
<div class="sum">
<span>{{item.base_amount}}</span>
<span>{{item.coin}}</span>
</div>
</div>
<p class="robot-name">{{item.tag}}</p>
<div class="chart-box">
<p class="title">今日盈亏</p>
<p v-show="item.today_profit>0" class="data gain">+{{(item.today_profit*100).toFixed(2)}}%</p>
<p v-show="item.today_profit<0" class="data lose">-{{(item.today_profit*100).toFixed(2)}}%</p>
<p v-show="item.today_profit==0" class="data none">- -</p>
<div>
<p v-show="item.status==='normal'" class="type">正在运行</p>
<p v-show="item.status==='stop'" class="type">停止运行</p>
<p>
<span class="result">总盈亏</span>
<span v-show="item.all_profit>0" class="data gain">+{{(item.all_profit*100).toFixed(2)}}%</span>
<span v-show="item.all_profit<0" class="data lose">-{{(item.all_profit*100).toFixed(2)}}%</span>
<span v-show="item.all_profit==0" class="data none">- -</span>
</p>
</div>
<div class="base">
<span>{{item.base}}余额</span>
<div class="sum">
<span>{{item.coin_amount}}</span>
<span>{{item.base}}</span>
</div>
</div>
<div class="coin">
<span>{{item.coin}}余额</span>
<div class="sum">
<span>{{item.base_amount}}</span>
<span>{{item.coin}}</span>
</div>
</li>
</ul>
<p v-if="robotList === null" class="no-data">暂无数据</p>
</div>
<router-view :robotBankList="robotBankList"></router-view>
</div>
<div class="base">
<span>{{item.base}}余额</span>
<div class="sum">
<span>{{item.coin_amount}}</span>
<span>{{item.base}}</span>
</div>
</div>
</li>
</ul>
<p v-if="robotList === null" class="no-data">暂无数据</p>
</div>
</template>
<script>
import RobotDetails from './RobotDetails'
import Bus from '../assets/js/bus'
import axios from 'axios';
import ApiConfig from "../config/api-config";
......@@ -178,8 +174,7 @@
showPairFilter: false,//是否显示交易对过滤
};
},
components: { RobotDetails },
props: ['platInfo','robotBankList'],
props: ['platInfo'],
created() {
this.init();
Bus.$on('navClick', ()=> {
......@@ -205,6 +200,8 @@
},
methods: {
init() {
this.webs = this.webs.length === 0 && sessionStorage.getItem('webs') ? JSON.parse(sessionStorage.getItem('webs')) : this.webs;
this.currencies = this.currencies.length === 0 && sessionStorage.getItem('currencies') ? JSON.parse(sessionStorage.getItem('currencies')) : this.currencies;
const RoutePath = this.$route.params.name;
// console.log(RoutePath);
var StatusParams = {platform: '', coin: ''};//预警状态查询入参
......@@ -224,14 +221,16 @@
this.RobotListParams.platform = [];
break;
default:
this.showPairFilter = true;
this.showWebFilter = this.showCurrencyFilter = false;
var index = +RoutePath;
this.pairs = JSON.parse(sessionStorage.getItem('platInfo'))[index].symbol;
this.platform = JSON.parse(sessionStorage.getItem('platInfo'))[index].platform;
StatusParams.platform = this.platform;
this.RobotListParams.platform = [this.platform];
this.RobotListParams.coin = [];
if (RoutePath) {
this.showPairFilter = true;
this.showWebFilter = this.showCurrencyFilter = false;
var index = +RoutePath;
this.pairs = JSON.parse(sessionStorage.getItem('platInfo'))[index].symbol;
this.platform = JSON.parse(sessionStorage.getItem('platInfo'))[index].platform;
StatusParams.platform = this.platform;
this.RobotListParams.platform = [this.platform];
this.RobotListParams.coin = [];
}
break;
}
this.getRobotStatus(StatusParams);
......@@ -401,10 +400,13 @@
// console.log(newVal.params.name)
},
platInfo(val){
this.webs = [];
//获取所有的交易所和币种
for (let item of this.platInfo){
this.webs.push(item.platform);
this.currencies = this.allCurrencies = [...new Set(this.currencies.concat(item.coin))];
sessionStorage.setItem('webs', JSON.stringify(this.webs));
sessionStorage.setItem('currencies', JSON.stringify(this.currencies));
}
}
}
......@@ -412,9 +414,6 @@
</script>
<style scoped>
.overview {
padding: 0 20px;
}
.overview-title {
position: relative;
height: 40px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment