Skip to content

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

6.27

parent a0f56cf4
Hide whitespace changes
Inline Side-by-side
Showing with 1324 additions and 135 deletions
index.html
View file @ a5337a7a
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>robot-monitor</title> <title>机器人监控</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
package-lock.json
View file @ a5337a7a
...@@ -249,6 +249,14 @@ ...@@ -249,6 +249,14 @@
"integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==", "integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==",
"dev": true "dev": true
}, },
"async-validator": {
"version": "1.8.2",
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.2.tgz",
"integrity": "sha1-t3WXIm6WJC+NUxwNRq4pX2JCK6Q=",
"requires": {
"babel-runtime": "6.26.0"
}
},
"atob": { "atob": {
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.1.tgz", "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.1.tgz",
...@@ -519,8 +527,7 @@ ...@@ -519,8 +527,7 @@
"babel-helper-vue-jsx-merge-props": { "babel-helper-vue-jsx-merge-props": {
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz", "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
"integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==", "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
"dev": true
}, },
"babel-helpers": { "babel-helpers": {
"version": "6.24.1", "version": "6.24.1",
...@@ -1048,7 +1055,6 @@ ...@@ -1048,7 +1055,6 @@
"version": "6.26.0", "version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=", "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
"dev": true,
"requires": { "requires": {
"core-js": "2.5.7", "core-js": "2.5.7",
"regenerator-runtime": "0.11.1" "regenerator-runtime": "0.11.1"
...@@ -1972,8 +1978,7 @@ ...@@ -1972,8 +1978,7 @@
"core-js": { "core-js": {
"version": "2.5.7", "version": "2.5.7",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
"integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==", "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw=="
"dev": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
...@@ -2422,6 +2427,11 @@ ...@@ -2422,6 +2427,11 @@
"integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=", "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=",
"dev": true "dev": true
}, },
"deepmerge": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
},
"define-properties": { "define-properties": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.2.tgz", "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.2.tgz",
...@@ -2707,6 +2717,19 @@ ...@@ -2707,6 +2717,19 @@
"integrity": "sha1-dDi3b5K0G5GfP73TUPvQdX2s3fc=", "integrity": "sha1-dDi3b5K0G5GfP73TUPvQdX2s3fc=",
"dev": true "dev": true
}, },
"element-ui": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.4.1.tgz",
"integrity": "sha512-9+XPH692o+VrhEOFgkdlakT3eEwH2ZMw9RRVDi6WhI1GUKGBnXFgURZlI8Mx8wipxWzuUSyLH/fSSD4zmeqkjQ==",
"requires": {
"async-validator": "1.8.2",
"babel-helper-vue-jsx-merge-props": "2.0.3",
"deepmerge": "1.5.2",
"normalize-wheel": "1.0.1",
"resize-observer-polyfill": "1.5.0",
"throttle-debounce": "1.1.0"
}
},
"elliptic": { "elliptic": {
"version": "6.4.0", "version": "6.4.0",
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.0.tgz", "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.0.tgz",
...@@ -5744,6 +5767,11 @@ ...@@ -5744,6 +5767,11 @@
"sort-keys": "1.1.2" "sort-keys": "1.1.2"
} }
}, },
"normalize-wheel": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
"integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
},
"npm-run-path": { "npm-run-path": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
...@@ -8586,8 +8614,7 @@ ...@@ -8586,8 +8614,7 @@
"regenerator-runtime": { "regenerator-runtime": {
"version": "0.11.1", "version": "0.11.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==", "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
"dev": true
}, },
"regenerator-transform": { "regenerator-transform": {
"version": "0.10.1", "version": "0.10.1",
...@@ -8731,6 +8758,11 @@ ...@@ -8731,6 +8758,11 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true "dev": true
}, },
"resize-observer-polyfill": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz",
"integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg=="
},
"resolve": { "resolve": {
"version": "1.8.1", "version": "1.8.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz",
...@@ -9487,6 +9519,11 @@ ...@@ -9487,6 +9519,11 @@
"integrity": "sha1-mTcqXJmb8t8WCvwNdL7U9HlIzSI=", "integrity": "sha1-mTcqXJmb8t8WCvwNdL7U9HlIzSI=",
"dev": true "dev": true
}, },
"throttle-debounce": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
"integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
},
"through2": { "through2": {
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/through2/-/through2-2.0.3.tgz", "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.3.tgz",
......
package.json
View file @ a5337a7a
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
"build": "node build/build.js" "build": "node build/build.js"
}, },
"dependencies": { "dependencies": {
"element-ui": "^2.4.1",
"vue": "^2.5.2", "vue": "^2.5.2",
"vue-router": "^3.0.1" "vue-router": "^3.0.1"
}, },
......
src/App.vue
View file @ a5337a7a
<template> <template>
<div id="app"> <div id="app">
<img src="./assets/logo.png">
<router-view/> <router-view/>
</div> </div>
</template> </template>
...@@ -12,12 +11,14 @@ export default { ...@@ -12,12 +11,14 @@ export default {
</script> </script>
<style> <style>
#app { #app {
font-family: 'Avenir', Helvetica, Arial, sans-serif; height: 100%;
-webkit-font-smoothing: antialiased; font-family: PingFangSC-Regular,'Avenir', Helvetica, Arial, sans-serif;
-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
text-align: center; -moz-osx-font-smoothing: grayscale;
color: #2c3e50; color: #2c3e50;
margin-top: 60px; }
} html,body{
height: 100%;
}
</style> </style>
src/assets/css/base.css 0 → 100644
View file @ a5337a7a
/*!
* @名称：base.css
* @功能：1、重设浏览器默认样式
* 2、设置通用原子类
*/
/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
html {
/*background:white;*/
color:black;
width: 100%;
}
/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin:0;
padding:0;
}
*{
box-sizing: border-box;
}
/* 要注意表单元素并不继承父级 font 的问题 */
body,button,input,select,textarea {
font:12px/1.5 Microsoft YaHei,tahoma,arial,\5b8b\4f53;
}
input,select,textarea {
font-size:100%;
}
/* 去掉 table cell 的边距并让其边重合 */
table {
border-collapse:collapse;
border-spacing:0;
}
/* ie bug：th 不继承 text-align */
th {
text-align:inherit;
}
/* 去除默认边框 */
fieldset,img {
border:none;
}
/* ie6 7 8(q) bug 显示为行内表现 */
iframe {
display:block;
}
.el-select{
width: 100%;
}
/* 去掉 firefox 下此元素的边框 */
abbr,acronym {
border:none;
font-variant:normal;
}
/* 一致的 del 样式 */
del {
text-decoration:line-through;
}
address,caption,cite,code,dfn,em,th,var {
font-style:normal;
font-weight:500;
}
/* 去掉列表前的标识，li 会继承 */
ol,ul {
list-style:none;
}
/* 对齐是排版最重要的因素，别让什么都居中 */
caption,th {
text-align:left;
}
/* 来自yahoo，让标题都自定义，适应多个系统应用 */
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:500;
}
q:before,q:after {
content:'';
}
/* 统一上标和下标 */
sub,sup {
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline;
}
sup {
top:-0.5em;
}
sub {
bottom:-0.25em;
}
/* 让链接在 hover 状态下不显示下划线 */
a{
color:#333
}
a:hover,a:visited,a:active,a:link {
text-decoration: none!important
}
/* 默认不显示下划线，保持页面简洁 */
ins,a {
text-decoration:none;
}
/* 去除 ie6 & ie7 焦点点状线 */
a:focus,*:focus {
outline:none;
}
/* 清除浮动 */
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
overflow:hidden;
}
.clearfix {
zoom:1; /* for ie6 & ie7 */
}
.clear {
clear:both;
display:block;
font-size:0;
height:0;
line-height:0;
overflow:hidden;
}
.el-loading-mask{
background-color: rgba(255,255,255,1);
z-index: 10;
}
/* 设置显示和隐藏，通常用来与 js 配合 */
.hide {
display:none;
}
.block {
display:block;
}
/* 设置浮动，减少浮动带来的 bug */
.fl,.fr {
display:inline;
}
.fl {
float:left;
}
.fr {
float:right;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0;
}
input[type="number"]{-moz-appearance:textfield;}
.pointer{
cursor: pointer;
}
.el-loading-spinner .el-loading-text{
color: #c81118!important;
}
.el-upload--picture-card {
background-color: #fbfdff;
border: 1px dashed #c0ccda;
border-radius: 6px;
box-sizing: border-box;
width: 200px;
height: 125px;
cursor: pointer;
line-height: 125px;
vertical-align: top;
}
.el-upload-list__item-name{
display: none;
}
.el-message-box__close{
display: block;
}
.el-message-box__close el-icon-close{
display: block;
}
.el-carousel__container{
height: 600px;
z-index: 0;
}
\ No newline at end of file
src/assets/js/bus.js 0 → 100644
View file @ a5337a7a
import Vue from 'vue'
var bus = new Vue();
export default bus;
src/components/HelloWorld.vue deleted 100644 → 0
View file @ a0f56cf4
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/components/navLeft.vue 0 → 100644
View file @ a5337a7a
<template>
<div class="nav-left">
<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
:router="true"
@select="closeDetails">
<el-menu-item index="/monitor/home">
<span slot="title">首页</span>
</el-menu-item>
<el-submenu index="1">
<template slot="title">网站监控</template>
<el-menu-item index="/monitor/zhaobi">找币</el-menu-item>
<el-menu-item index="/monitor/huobi">火币</el-menu-item>
<el-menu-item index="/monitor/bian">币安</el-menu-item>
<el-menu-item index="/monitor/gateio">Gateio</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">币种监控</template>
<el-menu-item index="/monitor/btyusdt">BTY/USDT</el-menu-item>
<el-menu-item index="/monitor/yccbtc">YCC/BTC</el-menu-item>
<el-menu-item index="/monitor/yccusdt">YCC/USDT</el-menu-item>
</el-submenu>
</el-menu>
</div>
</template>
<script>
import Bus from '../assets/js/bus'
export default {
data(){
return{
}
},
methods: {
closeDetails() {
Bus.$emit('closeDetails')
}
}
}
</script>
<style scoped>
.nav-left{
margin-left: 20px;
}
.el-menu-item, .el-submenu__title{
height: 40px;
line-height: 40px;
color:rgba(142,154,158,1);
font-size:16px;
}
.el-menu {
border-right: none;
}
.el-submenu.is-active .el-menu-item {
background:rgba(195,211,223,1);
color:rgba(255,255,255,1);
}
.el-submenu.is-active .el-submenu__title, .el-menu-item.is-active, .el-submenu.is-active .el-menu-item.is-active {
background:rgba(119,146,167,1);
color:rgba(255,255,255,1);
/*border-radius:4px 4px 0px 0px;*/
}
ul.el-menu-vertical-demo>li{
border-radius: 4px;
}
</style>
<style>
.el-submenu.is-active .el-submenu__title {
background:rgba(119,146,167,1);
color:rgba(255,255,255,1);
}
.el-submenu__title i {
color: rgba(192,212,218,1);
}
</style>
src/components/preHeader.vue 0 → 100644
View file @ a5337a7a
<template>
<div class="header">
<span class="title">机器人监控</span>
<div class="contain">
<span class="username">{{username}}</span>
<span class="loginout">退出</span>
</div>
</div>
</template>
<script>
export default {
name: "pre-header",
data(){
return{
username: 'wxk@33.cn',
}
},
}
</script>
<style scoped>
.header{
position: fixed;
top: 0;
width: 100%;
height: 60px;
line-height: 60px;
padding: 0 20px;
margin-bottom: 20px;
background:linear-gradient(-90deg,rgba(63,96,124,1),rgba(57,76,99,1));
box-shadow:0px 2px 10px 6px rgba(237,237,237,0.5);
color:rgba(255,255,255,1);
.title{
font-size:24px;
}
.contain{
float: right;
font-size: 16px;
.username{
margin-right: 20px;
}
.loginout{
cursor: pointer;
}
}
}
</style>
src/main.js
View file @ a5337a7a
...@@ -3,8 +3,32 @@ ...@@ -3,8 +3,32 @@
import Vue from 'vue' import Vue from 'vue'
import App from './App' import App from './App'
import router from './router' import router from './router'
import './assets/css/base.css'
import 'element-ui/lib/theme-chalk/index.css'
import {
Menu,
Submenu,
MenuItem,
MenuItemGroup,
Checkbox,
CheckboxButton,
CheckboxGroup,
Switch,
Row,
Col,
} from 'element-ui'
Vue.config.productionTip = false Vue.config.productionTip = false;
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Row);
Vue.use(Col);
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
......
src/router/index.js
View file @ a5337a7a
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router) Vue.use(Router)
export default new Router({ export default new Router({
routes: [ routes: [
{ {
path: '/', path: '/monitor',
name: 'HelloWorld', redirect: '/monitor/home',
component: HelloWorld component: function(resolve){
require(['../views/container.vue'],resolve);
},
children:
[
{
path:":name",
component: function(resolve){
require(['../views/overview.vue'],resolve);
}
}
]
} }
] ]
}) })
src/views/RobotDetails.vue 0 → 100644
View file @ a5337a7a
<template>
<div class="detail-box">
<div class="back-button" @click="closeDetails()">
<i class="el-icon-arrow-left"></i>
<span>返回</span>
</div>
<el-row :gutter="20" class="operation-area">
<el-col :span="16">
<div class="dashboard abnormal">
<div class="chart-box ">
<p class="title">今日盈亏</p>
<p class="data lose">-30.23%</p>
<div class="type-box">
<p class="type">异常运行</p>
<p>
<span class="result">总盈亏</span>
<span class="data lose">+30.23%</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)">
</el-switch>
</div>
</div>
<div class="dashboard-details">
<p>
<span>机器人名称</span>
<span>YCC/BTC-SMALL-140025</span>
</p>
<p>
<span>交易对</span>
<span>YCC/BTC</span>
</p>
<p>
<span>账户地址</span>
<span>sdlahfoayqwp9yrewhfjksdvkjahdhofysafdoauoidfaosfuosydofiaysdfhvjchkhfiyefsdhksvbzxvihuwo</span>
</p>
<p>
<span>运行状态</span>
<span class="red">异常运行</span>
</p>
<p>
<span>交易所</span>
<span>找币网</span>
</p>
<p>
<span>行情</span>
<span>$7376.84</span>
<span class="cny">≈¥47986.10</span>
<br>
<span class="green">-1.82%</span>
</p>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="handle-box">
<div class="handle-content">
<div class="handle">
<span class="coin-name">BTC</span>
<span class="button">充币</span>
<span class="button">提币</span>
</div>
<p class="item">
<span class="type-name">可用</span>
<span>1234.123456BTC</span>
</p>
<p class="item">
<span class="type-name">冻结</span>
<span>1234.123456BTC</span>
</p>
<p class="item">
<span class="type-name">总量</span>
<span>1234.123456BTC</span>
</p>
</div>
<div class="handle-content">
<div class="handle">
<span class="coin-name">YCC</span>
<span class="button">充币</span>
<span class="button">提币</span>
</div>
<p class="item">
<span class="type-name">可用</span>
<span>1234.123456YCC</span>
</p>
<p class="item">
<span class="type-name">冻结</span>
<span>1234.123456YCC</span>
</p>
<p class="item">
<span class="type-name">总量</span>
<span>1234.123456YCC</span>
</p>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import Bus from '../assets/js/bus'
export default {
data(){
return{
value1: true,
}
},
methods: {
closeDetails() {
Bus.$emit('closeDetails')
}
}
}
</script>
<style scoped>
.back-button {
cursor: pointer;
width: 80px;
height: 40px;
line-height: 40px;
background:rgba(119,146,167,1);
border-radius:4px;
font-size:18px;
color:rgba(255,255,255,1);
i {
position: relative;
left: 5px;
}
}
.operation-area {
margin-top: 20px;
.dashboard {
height: 290px;
border-radius:4px;
}
.normal {
border:1px solid rgba(146,208,171,1);
.chart-box {
border: 3px solid #73C795;
}
.type {
color:rgba(76,171,115,1);
}
}
.stop {
border:1px solid rgba(208,216,220,1);
.chart-box {
border: 3px solid rgba(208,216,220,1);
}
.type {
color:rgba(121,130,134,1);
}
}
.abnormal {
border:1px solid rgba(217,120,120,1);
.chart-box {
border: 3px solid rgba(217,120,120,1);
}
.type {
color:rgba(217,120,120,1);
}
}
}
.dashboard {
position: relative;
}
.chart-box {
float: left;
margin: 43px 0 0 40px;
width: 154px;
box-sizing: border-box;
height: 154px;
border-radius: 50%;
text-align: center;
position: relative;
padding-top: 43px;
.title {
height: 17px;
font-size:12px;
color:rgba(128,128,128,1);
line-height:17px;
}
.data {
font-size:24px;
line-height:33px;
&.gain {
color:rgba(217,120,120,1);
}
&.lose {
color:rgba(76,171,115,1);
}
&.none {
color:rgba(208,216,220,1);
}
}
.type-box {
height: 40px;
width: 100%;
background-color: white;
position: absolute;
bottom: -5px;
.type {
font-size:14px;
color:rgba(76,171,115,1);
line-height:20px;
margin: -10px 0 4px 0;
}
.result {
font-size:12px;
color:rgba(128,128,128,1);
line-height:17px;
}
.data {
font-size:14px;
color:rgba(217,120,120,1);
line-height:20px;
}
}
}
.chart-box .switch {
height: 20px;
position: absolute;
margin-left: 50%;
left: -34px;
bottom: -50px;
}
.dashboard-details {
margin: 43px 0 0 205px;
p {
line-height: 20px;
padding: 0 25px 9px 100px;
position: relative;
.cny {
font-size:12px;
color:rgba(128,128,128,1);
}
.green {
color: #4CAB73;
}
.red {
color: #D97878;
}
.gray {
color: #D0D8DC;
}
span {
font-size:14px;
color:rgba(51,51,51,1);
word-break:break-all;
&:first-child {
position: absolute;
width: 100px;
height: 20px;
left: -10px;
margin-right: 10px;
text-align: right;
font-size:12px;
color:rgba(128,128,128,1);
}
}
}
}
.handle-content {
height: 140px;
border-radius:4px;
border:1px solid rgba(119,146,167,1);
padding: 19px 0 0 20px;
.handle {
height: 25px;
position: relative;
margin-bottom: 14px;
}
.coin-name {
font-size:18px;
font-family:PingFang-SC-Bold;
color:rgba(51,51,51,1);
line-height:25px;
}
.button {
position: absolute;
width:60px;
height:25px;
top: 0;
left: 58px;
background:rgba(119,146,167,1);
border-radius:4px;
line-height: 25px;
text-align: center;
color:rgba(255,255,255,1);
font-size:12px;
cursor: pointer;
&:last-child {
left: 128px;
}
}
&:first-child {
margin-bottom: 10px;
}
.item {
line-height: 20px;
font-size:14px;
color:rgba(51,51,51,1);
margin-bottom: 4px;
.type-name {
display: inline-block;
width: 35px;
font-size:12px;
color:rgba(128,128,128,1);
}
}
}
</style>
src/views/container.vue 0 → 100644
View file @ a5337a7a
<template>
<div class="container-box">
<pre-header></pre-header>
<div class="container">
<div class="aside">
<nav-left></nav-left>
</div>
<div class="main">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
import PreHeader from '../components/preHeader'
import NavLeft from '../components/navLeft'
export default {
name: "container",
components: {
PreHeader,
NavLeft
},
}
</script>
<style scoped>
.container-box{
height: 100%;
padding-top: 80px;
}
.container{
height: 100%;
position: relative;
.aside{
width: 200px;
height: 100%;
float: left;
overflow: hidden;
}
.main{
position: absolute;
top: 0;
bottom: 0;
left: 200px;
right: 0;
min-width: 1000px;
overflow: auto;
}
}
</style>
src/views/overview.vue 0 → 100644
View file @ a5337a7a
<template>
<div class="overview">
<div v-show="!robotDetails">
<div class="overview-title">
<span>机器人监控</span>
<!-- <div class="select-bar">
<div class="exchange">
<el-checkbox-button :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox-button>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
</el-checkbox-group>
</div>
<div class="currency">
</div>
</div>-->
</div>
<ul class="classify-overview">
<li class="normal">
<p>87</p>
<p>正常运行(台)</p>
</li>
<li class="stop">
<p>7</p>
<p>停止运行(台)</p>
</li>
<li class="abnormal">
<p>2</p>
<p>运行异常(台)</p>
</li>
<li class="abnormal">
<p class="space">1</p>
<p>今日盈亏</p>
<p>低于10%(台)</p>
</li>
<li class="abnormal">
<p>0</p>
<p>总盈亏低于10%(台)</p>
</li>
<li class="abnormal">
<p class="space">2</p>
<p>基础币余额</p>
<p>低于100(台)</p>
</li>
<li class="abnormal">
<p>0</p>
<p>币余额低于100(台)</p>
</li>
</ul>
<p class="subtitle">所有机器人</p>
<ul class="robots-box">
<li class="normal">
<div class="operations">
<div class="detail" @click="showDetails()">
<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)">
</el-switch>
</div>
</div>
<p class="robot-name">YCC/BTC-SMALL-140025</p>
<div class="chart-box">
<p class="title">今日盈亏</p>
<p class="data gain">+30.23%</p>
<div>
<p class="type">正常运行</p>
<p>
<span class="result">总盈亏</span>
<span class="data gain">+30.23%</span>
</p>
</div>
</div>
<div class="ycc">
<span>YCC余额</span>
<div class="sum">
<span>123456789.123456</span>
<span>YCC</span>
</div>
</div>
<div class="btc">
<span>BTC余额</span>
<div class="sum">
<span>123456789.123456</span>
<span>BTC</span>
</div>
</div>
</li>
<li class="abnormal">
<div class="operations">
<div class="detail" @click="showDetails()">
<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)">
</el-switch>
</div>
</div>
<p class="robot-name">YCC/BTC-SMALL-140025</p>
<div class="chart-box">
<p class="title">今日盈亏</p>
<p class="data lose">-30.23%</p>
<div>
<p class="type">异常运行</p>
<p>
<span class="result">总盈亏</span>
<span class="data lose">-30.23%</span>
</p>
</div>
</div>
<div class="ycc">
<span>YCC余额</span>
<div class="sum">
<span>123456789.123456</span>
<span>YCC</span>
</div>
</div>
<div class="btc">
<span>BTC余额</span>
<div class="sum">
<span>123456789.123456</span>
<span>BTC</span>
</div>
</div>
</li>
<li class="stop">
<div class="operations">
<div class="detail" @click="showDetails()">
<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)">
</el-switch>
</div>
</div>
<p class="robot-name">YCC/BTC-SMALL-140025</p>
<div class="chart-box">
<p class="title">今日盈亏</p>
<p class="data none">- -</p>
<div>
<p class="type">异常运行</p>
<p>
<span class="result">总盈亏</span>
<span class="data none">- -</span>
</p>
</div>
</div>
<div class="ycc">
<span>YCC余额</span>
<div class="sum">
<span>123456789.123456</span>
<span>YCC</span>
</div>
</div>
<div class="btc">
<span>BTC余额</span>
<div class="sum">
<span>123456789.123456</span>
<span>BTC</span>
</div>
</div>
</li>
<li class="normal">
<div class="operations">
<div class="detail" @click="showDetails()">
<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)">
</el-switch>
</div>
</div>
<p class="robot-name">YCC/BTC-SMALL-140025</p>
<div class="chart-box">
<p class="title">今日盈亏</p>
<p class="data gain">+30.23%</p>
<div>
<p class="type">正常运行</p>
<p>
<span class="result">总盈亏</span>
<span class="data gain">+30.23%</span>
</p>
</div>
</div>
<div class="ycc">
<span>YCC余额</span>
<div class="sum">
<span>123456789.123456</span>
<span>YCC</span>
</div>
</div>
<div class="btc">
<span>BTC余额</span>
<div class="sum">
<span>123456789.123456</span>
<span>BTC</span>
</div>
</div>
</li>
<li class="abnormal">
<div class="operations">
<div class="detail" @click="showDetails()">
<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)">
</el-switch>
</div>
</div>
<p class="robot-name">YCC/BTC-SMALL-140025</p>
<div class="chart-box">
<p class="title">今日盈亏</p>
<p class="data lose">-30.23%</p>
<div>
<p class="type">异常运行</p>
<p>
<span class="result">总盈亏</span>
<span class="data lose">-30.23%</span>
</p>
</div>
</div>
<div class="ycc">
<span>YCC余额</span>
<div class="sum">
<span>123456789.123456</span>
<span>YCC</span>
</div>
</div>
<div class="btc">
<span>BTC余额</span>
<div class="sum">
<span>123456789.123456</span>
<span>BTC</span>
</div>
</div>
</li>
<li class="stop">
<div class="operations">
<div class="detail" @click="showDetails()">
<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)">
</el-switch>
</div>
</div>
<p class="robot-name">YCC/BTC-SMALL-140025</p>
<div class="chart-box">
<p class="title">今日盈亏</p>
<p class="data none">- -</p>
<div>
<p class="type">异常运行</p>
<p>
<span class="result">总盈亏</span>
<span class="data none">- -</span>
</p>
</div>
</div>
<div class="ycc">
<span>YCC余额</span>
<div class="sum">
<span>123456789.123456</span>
<span>YCC</span>
</div>
</div>
<div class="btc">
<span>BTC余额</span>
<div class="sum">
<span>123456789.123456</span>
<span>BTC</span>
</div>
</div>
</li>
</ul>
</div>
<robot-details v-show="robotDetails"></robot-details>
</div>
</template>
<script>
import RobotDetails from './RobotDetails'
import Bus from '../assets/js/bus'
export default {
data() {
return {
checkAll: false,
checkedCities: ['上海', '北京'],
cities: ['上海', '北京', '广州', '深圳'],
isIndeterminate: true,
value1: true,
robotDetails: false,
};
},
components: { RobotDetails },
created() {
Bus.$on('closeDetails', ()=> {
this.robotDetails = false;
})
},
methods: {
/*handleCheckAllChange(val) {
this.checkedCities = val ? this.cities : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
},*/
showDetails() {
this.robotDetails = true;
},
}
};
</script>
<style scoped>
.overview {
padding: 0 20px;
}
.overview-title {
position: relative;
height: 40px;
line-height: 40px;
margin-bottom: 20px;
font-size:18px;
color:rgba(51,51,51,1);
}
.select-bar {
position: absolute;
right: 0;
top: 0;
}
ul.classify-overview {
height: 100px;
li {
float: left;
width: 13%;
height: 100px;
margin-right: 1.5%;
text-align: center;
box-sizing: border-box;
border-radius:4px;
padding-top: 16px;
&:last-child {
margin-right: 0;
}
p {
font-size:12px;
&:first-child {
font-size:24px;
margin-bottom: 13px;
}
&.space {
margin-bottom: 4px;
}
}
}
li.normal {
background:rgba(241,250,244,1);
border:1px solid rgba(166,216,186,1);
color:rgba(76,171,115,1);
}
li.stop {
background:rgba(239,243,245,1);
border:1px solid rgba(199,217,225,1);
color:rgba(121,130,134,1);
}
li.abnormal {
background:rgba(248,243,243,1);
border:1px solid rgba(236,184,184,1);
color:rgba(217,120,120,1);
}
}
.subtitle {
font-size:18px;
color:rgba(51,51,51,1);
margin: 25px 0 10px 0;
}
.robots-box {
width: calc(100% + 20px);
}
ul.robots-box>li{
float: left;
margin: 0 20px 20px 0;
width:306px;
height:340px;
background:rgba(255,255,255,1);
border-radius:4px;
padding: 13px 23px 0 20px;
&.normal {
border:1px solid rgba(146,208,171,1);
.chart-box {
border: 3px solid #73C795;
}
.type {
color:rgba(76,171,115,1);
}
}
&.stop {
border:1px solid rgba(208,216,220,1);
.chart-box {
border: 3px solid rgba(208,216,220,1);
}
.type {
color:rgba(121,130,134,1);
}
}
&.abnormal {
border:1px solid rgba(217,120,120,1);
.chart-box {
border: 3px solid rgba(217,120,120,1);
}
.type {
color:rgba(217,120,120,1);
}
}
}
.operations {
color:rgba(119,146,167,1);
font-size:14px;
line-height: 20px;
}
.operations .detail{
display: inline-block;
cursor: pointer;
}
.operations .switch {
height: 20px;
float: right;
}
.el-icon-caret-right {
color: rgba(192,212,218,1);
}
.robot-name {
font-size:14px;
font-weight: 600;
color:rgba(51,51,51,1);
line-height:20px;
text-align: center;
margin: 12px 0 20px 0;
}
.chart-box {
margin: auto;
width: 154px;
box-sizing: border-box;
height: 154px;
border-radius: 50%;
text-align: center;
position: relative;
padding-top: 43px;
.title {
height: 17px;
font-size:12px;
color:rgba(128,128,128,1);
line-height:17px;
}
.data {
font-size:24px;
line-height:33px;
&.gain {
color:rgba(217,120,120,1);
}
&.lose {
color:rgba(76,171,115,1);
}
&.none {
color:rgba(208,216,220,1);
}
}
div {
height: 40px;
width: 100%;
background-color: white;
position: absolute;
bottom: -5px;
.type {
font-size:14px;
line-height:20px;
margin: -10px 0 4px 0;
}
.result {
font-size:12px;
color:rgba(128,128,128,1);
line-height:17px;
}
.data {
font-size:14px;
line-height:20px;
}
}
}
.ycc,.btc {
height: 20px;
line-height: 20px;
font-size:12px;
color:rgba(128,128,128,1);
.sum {
float: right;
font-size:14px;
color:rgba(51,51,51,1);
}
}
.ycc {
margin: 19px 0 10px 0;
}
</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