Skip to content

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

监控组件完成

parent dafa19ef
Hide whitespace changes
Inline Side-by-side
Showing with 267 additions and 28 deletions
src/views/overview.vue
View file @ 3886c93d
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<span>机器人监控</span> <span>机器人监控</span>
</div> </div>
<ul class="classify-overview"> <ul class="classify-overview">
<li class="normal" :class="{ 'filter' : robotStatus === 'nomal'}" @click="statusFilter('nomal')"> <li class="normal" :class="{ 'filter' : robotStatus === 'normal'}" @click="statusFilter('normal')">
<p>87</p> <p>87</p>
<p>正常运行(台)</p> <p>正常运行(台)</p>
</li> </li>
...@@ -26,18 +26,56 @@ ...@@ -26,18 +26,56 @@
<p>基础币数量异常(台)</p> <p>基础币数量异常(台)</p>
</li> </li>
</ul> </ul>
<p class="subtitle">所有机器人</p> <div class="filter-box clearfix">
<div class="select-bar"> <span class="subtitle">{{subtitle}}</span>
<div class="exchange"> <div class="select-bar clearfix" v-show="!robotStatus">
<el-checkbox-button :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox-button> <div v-show="showWebFilter" class="select-bar-content exchange" :class="{'unfold' : !foldExchange}">
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"> <span class="title">交易所</span>
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button> <div class="fr">
</el-checkbox-group> <span class="ellipsis" v-show="webs.length>3 && foldExchange">...</span>
</div> <span class="amount">{{checkedWebs.length}}</span>
<div class="currency"> <i class="fold-button"
:class="{'el-icon-caret-left' : foldExchange, 'el-icon-caret-bottom' : !foldExchange}"
</div> v-show="webs.length>3"
</div> @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"> <ul class="robots-box">
<li class="normal"> <li class="normal">
<div class="operations"> <div class="operations">
...@@ -225,13 +263,29 @@ ...@@ -225,13 +263,29 @@
export default { export default {
data() { data() {
return { return {
checkAll: false, value1: true, //是否开启机器人
checkedCities: ['上海', '北京'], robotDetails: false, //是否查看机器人详情
cities: ['上海', '北京', '广州', '深圳'], robotStatus: '', //机器人状态
subtitle: '所有机器人', //副标题
checkAll: false, //交易所筛选
checkedWebs: [],
webs: [],
isIndeterminate: true, isIndeterminate: true,
value1: true, foldExchange: true,
robotDetails: false, checkAll0: false, //币种筛选
robotStatus: '', checkedCurrencies: [],
allCurrencies: [],//所有币种
currencies: [],
isIndeterminate0: true,
foldExchange0: true,
checkAll1: false, //交易对筛选
checkedPairs: [],
pairs: [],
isIndeterminate1: true,
foldExchange1: true,
showWebFilter: false,//是否显示交易所过滤
showCurrencyFilter: false,//是否显示币种过滤
showPairFilter: false,//是否显示交易对过滤
}; };
}, },
components: { RobotDetails }, components: { RobotDetails },
...@@ -241,25 +295,100 @@ ...@@ -241,25 +295,100 @@
Bus.$on('navClick', ()=> { Bus.$on('navClick', ()=> {
this.robotDetails = false; this.robotDetails = false;
this.robotStatus = ''; this.robotStatus = '';
this.subtitle = '所有机器人';
this.checkAll = false; //交易所筛选
this.checkedWebs = [];
this.webs = [];
this.isIndeterminate = true;
this.foldExchange = true;
this.checkAll0 = false; //币种筛选
this.checkedCurrencies = [];
this.currencies = [];
this.sIndeterminate0 = true;
this.foldExchange0 = true;
this.checkAll1 = false; //交易对筛选
this.checkedPairs = [];
this.pairs = [];
this.isIndeterminate1 = true;
this.foldExchange1 = true;
setTimeout(()=>{ setTimeout(()=>{
this.init(); this.init();
},100) },0)
}) })
}, },
methods: { methods: {
init() { init() {
console.log(this.$route.params.name); //获取所有的交易所和币种
for (let item of this.platInfo){
this.webs.push(item.platform);
this.currencies = this.allCurrencies = [...new Set(this.currencies.concat(item.coin))];
}
const RoutePath = this.$route.params.name;
// console.log(RoutePath);
switch (RoutePath) {
case 'home':
this.showWebFilter = this.showCurrencyFilter = true;
this.showPairFilter = false;
break;
case 'BTY':
case 'YCC':
this.showWebFilter = true;
this.showCurrencyFilter = this.showPairFilter = false;
break;
default:
this.showPairFilter = true;
this.showWebFilter = this.showCurrencyFilter = false;
var index = +RoutePath;
this.pairs = this.platInfo[index].symbol;
}
}, },
//交易所过滤
handleCheckAllChange(val) { handleCheckAllChange(val) {
this.checkedCities = val ? this.cities : []; this.checkedWebs = val ? this.webs : [];
this.isIndeterminate = false; this.isIndeterminate = false;
this.currencies = this.allCurrencies;
this.checkedCurrencies = [];
this.checkAll0 = false;
},
handleCheckedChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.webs.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.webs.length;
this.checkedCurrencies = [];
this.checkAll0 = false;
//动态筛选币种
if (value.length === 0) {
this.currencies = this.allCurrencies;
}else {
this.currencies = [];
for (let item of value) {
for (let platItem of this.platInfo) {
if (platItem.platform === item) {
this.currencies = [...new Set(this.currencies.concat(platItem.coin))];
}
}
}
}
},
//币种过滤
handleCheckAllChange0(val) {
this.checkedCurrencies = val ? this.currencies : [];
this.isIndeterminate0 = false;
},
handleCheckedChange0(value) {
let checkedCount = value.length;
this.checkAll0 = checkedCount === this.webs.length;
this.isIndeterminate0 = checkedCount > 0 && checkedCount < this.currencies.length;
},
//交易对过滤
handleCheckAllChange1(val) {
this.checkedPairs = val ? this.pairs : [];
this.isIndeterminate1 = false;
}, },
handleCheckedCitiesChange(value) { handleCheckedChange1(value) {
let checkedCount = value.length; let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length; this.checkAll1 = checkedCount === this.pairs.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length; this.isIndeterminate1 = checkedCount > 0 && checkedCount < this.pairs.length;
console.log(value)
}, },
showDetails() { showDetails() {
this.robotDetails = true; this.robotDetails = true;
...@@ -284,8 +413,29 @@ ...@@ -284,8 +413,29 @@
}); });
}); });
}, },
//通过机器人状态筛选
statusFilter(status) { statusFilter(status) {
this.robotStatus = status; this.robotStatus = status;
this.subtitle = status === 'normal' ? '正常运行机器人' :
(status === 'stop' ? '停止运行机器人' :
(status === 'profit' ? '盈利异常机器人' :
(status === 'coin' ? '目标币异常机器人' :
(status === 'base' ? '基础币异常机器人':'所有机器人'))));
},
clickFoldExchange(type) {
switch (type) {
case 'web':
this.foldExchange = !this.foldExchange;
break;
case 'currency':
this.foldExchange0 = !this.foldExchange0;
break;
case 'pair':
this.foldExchange1 = !this.foldExchange1;
break;
default:
break
}
} }
}, },
watch:{ watch:{
...@@ -311,6 +461,7 @@ ...@@ -311,6 +461,7 @@
ul.classify-overview { ul.classify-overview {
height: 100px; height: 100px;
li { li {
cursor: pointer;
position: relative; position: relative;
float: left; float: left;
width: 18.8%; width: 18.8%;
...@@ -361,13 +512,53 @@ ...@@ -361,13 +512,53 @@
} }
} }
} }
.filter-box {
position: relative;
z-index: 10;
margin: 25px 0 20px 0;
}
.subtitle { .subtitle {
font-size:18px; font-size:18px;
color:rgba(51,51,51,1); color:rgba(51,51,51,1);
margin: 25px 0 10px 0;
} }
.select-bar { .select-bar {
float: right;
.select-bar-content {
float: left;
margin-right: 10px;
width: 410px;
padding: 5px 10px 0 65px;
background-color: #fff;
border-radius:4px;
border:1px solid rgba(224,224,224,1);
z-index: 100;
height: 38px;
overflow: hidden;
.amount {
line-height: 26px;
}
.ellipsis {
position: relative;
top: -3px;
left: -13px;
}
&.unfold {
height: auto;
}
.title {
display: inline-block;
width: 65px;
text-align: center;
position: relative;
left: -65px;
}
.fold-button {
cursor: pointer;
line-height: 26px;
color: rgba(192,212,218,1);
}
}
} }
.robots-box { .robots-box {
width: calc(100% + 20px); width: calc(100% + 20px);
...@@ -497,3 +688,51 @@ ...@@ -497,3 +688,51 @@
margin: 19px 0 10px 0; margin: 19px 0 10px 0;
} }
</style> </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>
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