Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit 04393c77 by hank
Options

添加组

parent 9f55c673
Showing with 224 additions and 9 deletions
src/router/index.js
...@@ -6,6 +6,7 @@ import User from '@/views/user/index.vue' ...@@ -6,6 +6,7 @@ import User from '@/views/user/index.vue'
import About from '@/views/user/about.vue' import About from '@/views/user/about.vue'
import Device from '@/views/device/index.vue' import Device from '@/views/device/index.vue'
import Groups from '@/views/groups/index.vue' import Groups from '@/views/groups/index.vue'
import GroupsAdd from '@/views/groups/add.vue'
import DeviceDetail from '@/views/device/detail.vue' import DeviceDetail from '@/views/device/detail.vue'
import DeviceAdd from '@/views/device/add.vue' import DeviceAdd from '@/views/device/add.vue'
import Tempaltes from '@/views/tempaltes/index.vue' import Tempaltes from '@/views/tempaltes/index.vue'
...@@ -24,7 +25,8 @@ const router = new Router({ ...@@ -24,7 +25,8 @@ const router = new Router({
{ path: '/tempaltes', name: 'Tempaltes', component: Tempaltes, meta: { keepAlive: true } }, { path: '/tempaltes', name: 'Tempaltes', component: Tempaltes, meta: { keepAlive: true } },
{ path: '/tempaltes/edit', name: 'TempaltesEdit', component: TempalteEdit, meta: { keepAlive: false } }, { path: '/tempaltes/edit', name: 'TempaltesEdit', component: TempalteEdit, meta: { keepAlive: false } },
{ path: '/tempaltes/detial', name: 'TempalteDetail', component: TempalteDetail, 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', name: 'Device', component: Device, meta: { keepAlive: true } },
{ path: '/device/detail', name: 'DeviceDetail', component: DeviceDetail, meta: { keepAlive: false } }, { path: '/device/detail', name: 'DeviceDetail', component: DeviceDetail, meta: { keepAlive: false } },
{ path: '/device/add', name: 'DeviceAdd', component: DeviceAdd, meta: { keepAlive: false } }, { path: '/device/add', name: 'DeviceAdd', component: DeviceAdd, meta: { keepAlive: false } },
......
src/views/groups/add.vue 0 → 100644
<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 @@ ...@@ -2,7 +2,7 @@
<div class="device-container"> <div class="device-container">
<NavBar title="设备组"></NavBar> <NavBar title="设备组"></NavBar>
<div class="device-list"> <div class="device-list">
<div class="device-item"> <div class="device-item" @click="addGroups">
<div class="device-item-create"> <div class="device-item-create">
<van-icon style="font-size: 52px;" name="plus"/> <van-icon style="font-size: 52px;" name="plus"/>
</div> </div>
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
></div> ></div>
</div> </div>
<div class="device-title">设备组A</div> <div class="device-title">设备组A</div>
<div class="clear-btn">解除该组</div> <div class="clear-btn" @click="delGroup">解除该组</div>
</div> </div>
</div> </div>
<Des></Des> <Des></Des>
...@@ -41,6 +41,15 @@ export default { ...@@ -41,6 +41,15 @@ export default {
} }
}); });
}, },
addGroups(){
this.$router.push({
path: "/groups/add",
query: {
clientId: "maxrocky",
clientSecret: "maxrocky"
}
});
},
delGroup() { delGroup() {
this.$dialog this.$dialog
.confirm({ .confirm({
...@@ -101,7 +110,6 @@ export default { ...@@ -101,7 +110,6 @@ export default {
padding-bottom: 20px; padding-bottom: 20px;
} }
.clear-btn { .clear-btn {
width:133px; width:133px;
height:44px; height:44px;
margin: 0 auto; margin: 0 auto;
......
src/views/layout/index.vue
...@@ -7,10 +7,22 @@ ...@@ -7,10 +7,22 @@
</div> </div>
<van-tabbar route > <van-tabbar route >
<van-tabbar-item replace to="/tempaltes" active icon="home-o">模板库</van-tabbar-item> <van-tabbar-item :class="{ 'van-tabbar-item--active' : currentPath.includes('/tempaltes') }" replace :to="{
<van-tabbar-item replace to="/devices" icon="cluster-o">设备组</van-tabbar-item> path: '/tempaltes',
<van-tabbar-item replace to="/device" icon="setting-o">我的设备</van-tabbar-item> exact: false
<van-tabbar-item replace to="/user" icon="friends-o">个人中心</van-tabbar-item> }" 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> </van-tabbar>
</div> </div>
</template> </template>
...@@ -19,7 +31,13 @@ ...@@ -19,7 +31,13 @@
export default { export default {
data() { data() {
return { return {
index: 0 index: 0,
currentPath: ''
}
},
watch: {
$route: function(val) {
this.currentPath = val.path
} }
}, },
components: { components: {
......
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 sign in to comment