添加组

src/router/index.js

@@ -6,6 +6,7 @@ import User from '@/views/user/index.vue'
 import About from '@/views/user/about.vue'
 import Device from  '@/views/device/index.vue'
 import Groups from  '@/views/groups/index.vue'
+import GroupsAdd from  '@/views/groups/add.vue'
 import DeviceDetail from  '@/views/device/detail.vue'
 import DeviceAdd from  '@/views/device/add.vue'
 import Tempaltes from  '@/views/tempaltes/index.vue'
@@ -24,7 +25,8 @@ const router =  new Router({
         { path: '/tempaltes', name: 'Tempaltes', component: Tempaltes, meta: { keepAlive: true } },
         { path: '/tempaltes/edit', name: 'TempaltesEdit', component: TempalteEdit, meta: { keepAlive: false } },
         { path: '/tempaltes/detial', name: 'TempalteDetail', component: TempalteDetail, meta: { keepAlive: false } },
-        { path: '/devices', name: 'Groups', component: Groups, meta: { keepAlive: true } },
+        { path: '/groups', name: 'Groups', component: Groups, meta: { keepAlive: true } },
+        { path: '/groups/add', name: 'GroupsAdd', component: GroupsAdd, meta: { keepAlive: false } },
         { path: '/device', name: 'Device', component: Device, meta: { keepAlive: true } },
         { path: '/device/detail', name: 'DeviceDetail', component: DeviceDetail, meta: { keepAlive: false } },
         { path: '/device/add', name: 'DeviceAdd', component: DeviceAdd, meta: { keepAlive: false } },

src/views/groups/add.vue

+<template>
+  <div class="device-detail-container">
+    <NavBar title="添加设备组" left-arrow></NavBar>
+    <div class="content-top">
+        <div class="left"><input type="text" v-model="name" placeholder="填写设备组名称"></div>
+        <div class="right">
+          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 60 60">
+          
+          <image id="baocun" width="60" height="60" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAilBMVEVCmuX///9CmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuVCmuUAAADSmF1SAAAALHRSTlMAADCcwGH815WQs6yXyAhQQBDQgBs8D1LsIrZ5vIN7AVd+UUd/+EgN7Y/PyXGlq3IAAAABYktHRC3N2kE9AAAACXBIWXMAAAsSAAALEgHS3X78AAAAB3RJTUUH4wYUECozwKL4qgAAAP1JREFUSMft18kOgjAQBuApKFD3fd9FS7Xv/3wyVYmJtpThZvpfaGb4kl4gMwAQhA1CwoAxgGakSImaDAKizXUAIdUqFUIDH3HCdfDc4oa0sdvRxyTGc1fjuAfPYKkPhgywO2Q6PdQjjROoihkvMK+Ox654Mp2R8TxSiyUVr/Limorfb3j833iTF7dUvMuLUyreH45oiV/VKy74ZMJnB5yacOqAL+l18CPn9IJdYcZZ2d82AzOWZVhasLjZ7U1YMAhpuXkmBdgw+qEhQrftuCQee+yxxx5/jczuWBa4GNad8cewrmI+rhSp14R7vQWl1mpUaynDdbA7qpw7roMPU2DK58/JrkAAAAAASUVORK5CYII="/>
+          </svg>
+
+          <span>保存</span>
+        </div>
+    </div>
+    <div class="device-list">
+      <div class="device-item" v-for="(item, index) in list" :key="index">
+        <label >
+          <div class="icon"></div>
+          <div class="name">  <img :src="checked.indexOf(item) !== -1 ? './img/ps/checked.png' : './img/ps/check.png'" alt=""> {{item.deviceName}}</div>
+          <input type="checkbox" name="device" v-model="checked" :value="item">
+        </label>
+      </div>
+    </div>
+    <div class="title">
+      <span class="bold">模版选择</span>
+      <span>（设备组模版将应用于所有组内设备，原有模版将被保存于“我的模版”中）</span>
+    </div>
+    <div class="tempalte-view">
+        <div class="add">
+          <van-icon style="font-size: 52px;" name="plus"/>
+        </div>
+        <div >
+
+        </div>
+    </div>
+    <!-- <div>{{checked}}</div> -->
+  </div>
+</template>
+
+<script>
+import NavBar from "@/views/layout/navbar";
+import "swiper/dist/css/swiper.css";
+import { getFilmList } from "@/api/api";
+export default {
+  data() {
+    return {
+      swiperOption: {
+        slidesPerView: "auto"
+      },
+      name: '',
+      checked: [],
+      list: [
+        {
+          deviceName: "Maxrocky",
+          templateUrl:
+            "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg"
+        },
+        {
+          deviceName: "MaxrockyB",
+          templateUrl:
+            "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg"
+        }
+      ]
+    };
+  },
+  components: {
+    NavBar
+  },
+  computed: {},
+  created() {},
+  methods: {
+    callback() {},
+    getList() {
+      getFilmList().then(res => {
+        console.log(res);
+        this.list = res.data.list;
+      });
+    },
+    addTemplate() {
+      this.$router.push({
+        path: "/tempaltes"
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.device-detail-container {
+  text-align: left;
+
+  .content-top {
+    display: flex;
+    padding-left: 47px;
+    padding-top: 28px;
+    align-items: center;
+    justify-content: space-between;
+    .left {
+      input {
+        width:198px;
+        height:55px;
+        border:1px solid rgba(181,181,181,1);
+        border-radius:3px;
+        padding-left: 20px;
+        color: #B5B5B5;
+      }
+    }
+    .right {
+      padding-right: 50px;
+      font-size:24px;
+      display: flex;
+      align-items: center;
+      svg {
+        margin-right: 12px;
+      }
+    }
+  }
+  .device-list {
+    padding-left: 47px;
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: 68px;
+    
+    .device-item {
+      margin-top: 47px;
+      margin-right: 68px;
+      text-align: center;
+      input {
+        display: none;
+      }
+      label {
+        display: block;
+      }
+      .icon {
+        width:191px;
+        height:67px;
+        background: white no-repeat center;
+        background-image: url('../../../public/img/ps/box.png');
+        background-size: auto 100%;
+      }
+      .name {
+        padding-top: 46px;
+        background-size: auto 100%;
+        font-size:21px;
+        color: #333333;
+        line-height: 21px;
+        img {
+          width: 20px;
+          height: 20px;
+          vertical-align: bottom;
+          transition: all 0.5s ease-in;
+          
+        }
+      }
+    }
+  }
+  .title {
+    padding-left: 47px;
+    padding-top: 65px;
+    font-weight:500;
+    line-height: 24px;
+    .bold {
+      color:rgba(51,51,51,1);
+      font-size:24px;
+      padding-right: 22px;
+    }
+    span {
+      color:rgba(51,51,51,.8);
+      font-size:21px;
+    }
+  }
+  .tempalte-view {
+    padding-left: 47px;
+    padding-top: 38px;
+    .add {
+      width:498px;
+      height:304px;
+      border:1px solid rgba(132,132,132,1);
+      display: flex;
+      font-size: 52px;
+      align-items: center;
+      justify-content: center;
+      color: #848484;
+    }
+  }
+}
+</style>

src/views/groups/index.vue

@@ -2,7 +2,7 @@
   <div class="device-container">
     <NavBar title="设备组"></NavBar>
     <div class="device-list">
-      <div class="device-item">
+      <div class="device-item" @click="addGroups">
         <div class="device-item-create">
           <van-icon style="font-size: 52px;" name="plus"/>
         </div>
@@ -16,7 +16,7 @@
           ></div>
         </div>
         <div class="device-title">设备组A</div>
-        <div class="clear-btn">解除该组</div>
+        <div class="clear-btn" @click="delGroup">解除该组</div>
       </div>
     </div>
     <Des></Des>
@@ -41,6 +41,15 @@ export default {
         }
       });
     },
+    addGroups(){
+      this.$router.push({
+        path: "/groups/add",
+        query: {
+          clientId: "maxrocky",
+          clientSecret: "maxrocky"
+        }
+      });
+    },
     delGroup() {
       this.$dialog
         .confirm({
@@ -101,7 +110,6 @@ export default {
       padding-bottom: 20px;
     }
     .clear-btn {
-
       width:133px;
       height:44px;
       margin:  0 auto;

src/views/layout/index.vue

@@ -7,10 +7,22 @@
       
     </div>
     <van-tabbar route >
-      <van-tabbar-item replace to="/tempaltes" active icon="home-o">模板库</van-tabbar-item>
-      <van-tabbar-item replace to="/devices" icon="cluster-o">设备组</van-tabbar-item>
-      <van-tabbar-item replace to="/device" icon="setting-o">我的设备</van-tabbar-item>
-      <van-tabbar-item replace to="/user" icon="friends-o">个人中心</van-tabbar-item>
+      <van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/tempaltes')  }" replace :to="{
+        path: '/tempaltes',
+        exact: false
+      }" active icon="home-o">模板库</van-tabbar-item>
+      <van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/groups')  }" replace :to="{
+        path: '/groups',
+        exact: false
+      }" icon="cluster-o">设备组</van-tabbar-item>
+      <van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/device')  }" replace :to="{
+        path: '/device',
+        exact: false
+      }" icon="setting-o">我的设备</van-tabbar-item>
+      <van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/user')  }" replace :to="{
+        path: '/user',
+        exact: false
+      }" icon="friends-o">个人中心</van-tabbar-item>
     </van-tabbar>
   </div>
 </template>
@@ -19,7 +31,13 @@
 export default {
   data() {
     return {
-      index: 0
+      index: 0,
+      currentPath: ''
+    }
+  },
+  watch: {
+    $route: function(val) {
+      this.currentPath = val.path
     }
   },
   components: {