6.28

src/components/navLeft.vue

@@ -4,22 +4,18 @@
       :default-active="$route.path"
       class="el-menu-vertical-demo"
       :router="true"
-      @select="closeDetails">
+      @select="navClick">
       <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-menu-item :index="'/monitor/' + index" v-for="(item, index) in platInfo">{{item.platform}}</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-menu-item index="/monitor/BTY">BTY</el-menu-item>
+        <el-menu-item index="/monitor/YCC">YCC</el-menu-item>
       </el-submenu>
     </el-menu>
   </div>
@@ -33,9 +29,10 @@
 
       }
     },
+    props: ['platInfo'],
     methods: {
-      closeDetails() {
-        Bus.$emit('closeDetails')
+      navClick() {
+        Bus.$emit('navClick')
       }
     }
   }

src/main.js

@@ -16,6 +16,8 @@ import {
   Switch,
   Row,
   Col,
+  MessageBox,
+  Message,
 } from 'element-ui'
 
 Vue.config.productionTip = false;
@@ -29,7 +31,8 @@ Vue.use(CheckboxGroup);
 Vue.use(Switch);
 Vue.use(Row);
 Vue.use(Col);
-
+Vue.prototype.$confirm = MessageBox.confirm;
+Vue.prototype.$message = Message;
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/views/RobotDetails.vue

@@ -114,7 +114,7 @@
     },
     methods: {
       closeDetails() {
-        Bus.$emit('closeDetails')
+        Bus.$emit('navClick')
       }
     }
   }

src/views/container.vue

@@ -3,10 +3,10 @@
     <pre-header></pre-header>
     <div class="container">
       <div class="aside">
-        <nav-left></nav-left>
+        <nav-left :platInfo="platInfo"></nav-left>
       </div>
       <div class="main">
-        <router-view></router-view>
+        <router-view :platInfo="platInfo"></router-view>
       </div>
     </div>
   </div>
@@ -16,11 +16,33 @@
   import PreHeader from '../components/preHeader'
   import NavLeft from '../components/navLeft'
   export default {
-    name: "container",
+    data() {
+      return {
+        platInfo: [
+          {
+            "platform":"找币",
+            "symbol":["DCR/BTC", "YCC/BTC"],
+            "coin":["DCR", "BTY"]
+          },{
+            "platform":"火币",
+            "symbol":["DCR/BTC", "BTY/BTC"],
+            "coin":["DCR", "YCC"]
+          },{
+            "platform":"币安",
+            "symbol":["DCR/BTC", "YCC/BTC", "BTY/USDT"],
+            "coin":["DCR", "BTC"]
+          },{
+            "platform":"Gateio",
+            "symbol":["DCR/BTC"],
+            "coin":["DCR"]
+          }
+        ]
+      }
+    },
     components: {
       PreHeader,
       NavLeft
-    },
+    }
   }
 </script>
 

src/views/overview.vue

@@ -3,51 +3,41 @@
     <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">
+        <li class="normal" :class="{ 'filter' : robotStatus === 'nomal'}" @click="statusFilter('nomal')">
           <p>87</p>
           <p>正常运行(台)</p>
         </li>
-        <li class="stop">
+        <li class="stop" :class="{ 'filter' : robotStatus === 'stop'}" @click="statusFilter('stop')">
           <p>7</p>
           <p>停止运行(台)</p>
         </li>
-        <li class="abnormal">
+        <li class="abnormal" :class="{ 'filter' : robotStatus === 'profit'}" @click="statusFilter('profit')">
           <p>2</p>
-          <p>运行异常(台)</p>
+          <p>盈利异常(台)</p>
         </li>
-        <li class="abnormal">
-          <p class="space">1</p>
-          <p>今日盈亏</p>
-          <p>低于10%(台)</p>
+        <li class="abnormal" :class="{ 'filter' : robotStatus === 'coin'}" @click="statusFilter('coin')">
+          <p>1</p>
+          <p>目标币数量异常(台)</p>
         </li>
-        <li class="abnormal">
+        <li class="abnormal" :class="{ 'filter' : robotStatus === 'base'}" @click="statusFilter('base')">
           <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>
+          <p>基础币数量异常(台)</p>
         </li>
       </ul>
       <p class="subtitle">所有机器人</p>
+      <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>
       <ul class="robots-box">
         <li class="normal">
           <div class="operations">
@@ -61,7 +51,9 @@
               <el-switch
                 v-model="value1"
                 active-color="rgba(119,146,167,1)"
-                inactive-color="rgba(236,239,241,1)">
+                inactive-color="rgba(236,239,241,1)"
+                @change="clickSwitch"
+                disabled>
               </el-switch>
             </div>
           </div>
@@ -92,49 +84,6 @@
             </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()">
@@ -221,49 +170,6 @@
             </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()">
@@ -325,16 +231,27 @@
         isIndeterminate: true,
         value1: true,
         robotDetails: false,
+        robotStatus: '',
       };
     },
     components: { RobotDetails },
+    props: ['platInfo'],
     created() {
-      Bus.$on('closeDetails', ()=> {
+      this.init();
+      Bus.$on('navClick', ()=> {
         this.robotDetails = false;
+        this.robotStatus = '';
+        setTimeout(()=>{
+          this.init();
+        },100)
       })
     },
     methods: {
-      /*handleCheckAllChange(val) {
+      init() {
+        console.log(this.$route.params.name);
+
+      },
+      handleCheckAllChange(val) {
         this.checkedCities = val ? this.cities : [];
         this.isIndeterminate = false;
       },
@@ -342,10 +259,39 @@
         let checkedCount = value.length;
         this.checkAll = checkedCount === this.cities.length;
         this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
-      },*/
+        console.log(value)
+      },
       showDetails() {
         this.robotDetails = true;
       },
+      clickSwitch(val) {
+        const Tips = val ? '此操作将开启机器人, 是否继续?' : '此操作将关闭机器人, 是否继续?';
+        const Message = val ? '开启机器人成功' : '关闭机器人成功';
+        this.$confirm( Tips, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: Message
+          });
+        }).catch(() => {
+          this.value1 = !val;
+          this.$message({
+            type: 'info',
+            message: '已取消操作'
+          });
+        });
+      },
+      statusFilter(status) {
+        this.robotStatus = status;
+      }
+    },
+    watch:{
+      $route(newVal, oldVal){
+        // console.log(newVal.params.name)
+      }
     }
   };
 </script>
@@ -362,16 +308,12 @@
     font-size:18px;
     color:rgba(51,51,51,1);
   }
-  .select-bar {
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
   ul.classify-overview {
     height: 100px;
     li {
+      position: relative;
       float: left;
-      width: 13%;
+      width: 18.8%;
       height: 100px;
       margin-right: 1.5%;
       text-align: center;
@@ -387,9 +329,6 @@
           font-size:24px;
           margin-bottom: 13px;
         }
-        &.space {
-          margin-bottom: 4px;
-        }
       }
     }
     li.normal {
@@ -407,12 +346,29 @@
       border:1px solid rgba(236,184,184,1);
       color:rgba(217,120,120,1);
     }
+    li.filter {
+      height: 120px;
+      top: -10px;
+      color: #fff;
+      &.normal {
+        background-color: rgba(76,171,115,1);
+      }
+      &.stop {
+        background-color:rgba(121,130,134,1);
+      }
+      &.abnormal {
+        background-color: rgba(217,120,120,1);
+      }
+    }
   }
   .subtitle {
     font-size:18px;
     color:rgba(51,51,51,1);
     margin: 25px 0 10px 0;
   }
+  .select-bar {
+
+  }
   .robots-box {
     width: calc(100% + 20px);
   }