Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit 503ad61a by hank
Options

我的设备 模板详情

parent 98b57ce9
Showing with 370 additions and 12 deletions
postcss.config.js
......@@ -3,9 +3,9 @@ module.exports = {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
// 'postcss-pxtorem': {
// rootValue: 100,
// propList: ['*']
// }
'postcss-pxtorem': {
rootValue: 130,
propList: ['*']
}
}
}
src/router/index.js
......@@ -5,6 +5,7 @@ import Device from '@/views/device/index.vue'
import DeviceDetail from '@/views/device/detail.vue'
import Tempaltes from '@/views/tempaltes/index.vue'
import TempalteEdit from '@/views/tempaltes/edit.vue'
import TempalteDetail from '@/views/tempaltes/detail.vue'
Vue.use(Router)
const router = new Router({
......@@ -16,6 +17,7 @@ const router = new Router({
{ path: '/', name: 'Home', component: Tempaltes, meta: { keepAlive: true }, redirect: '/tempaltes' },
{ path: '/tempaltes', name: 'Tempaltes', component: Tempaltes, meta: { keepAlive: true } },
{ path: '/tempaltes/edit', name: 'TempaltesEdit', component: TempalteEdit, meta: { keepAlive: true } },
{ path: '/tempaltes/detial', name: 'TempalteDetail', component: TempalteDetail, meta: { keepAlive: false } },
{ path: '/devices', name: 'Home', component: Home, meta: { keepAlive: true } },
{ path: '/device', name: 'Device', component: Device, meta: { keepAlive: true } },
{ path: '/device/detail', name: 'DeviceDetail', component: DeviceDetail, meta: { keepAlive: true } },
......
src/views/device/des.vue 0 → 100644
<template>
<div class="common-tips">
<div>欢迎进入我的「设备」，您可以：</div>
<div>
1 添加一个设备；
</div>
<div>
2 可以选择已绑定设备，进行模板编辑或其他设置；
</div>
<div>
3 您可以为在线设备补充更多模板；
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
.common-tips {
color:rgba(51,51,51,0.8);
text-align: left;
font-size: 19px;
line-height: 34px;
position: fixed;
left: 54px;
bottom: 100px;
z-index: -1;
}
</style>
src/views/device/detail.vue
......@@ -10,13 +10,34 @@
</div>
<div class="right-container">
<div class="right-item">
<div class="right-item-title">
<img src="../../../public/img/ps/name.png" alt="">
<span>设备名称</span>
</div>
<div class="bottom">
<span>Maxrocky</span>
<span class="p-btn">[修改]</span>
</div>
</div>
<div class="right-item">
<div class="right-item-title">
<img src="../../../public/img/ps/status.png" alt="">
<span>设备状态</span>
</div>
<div class="bottom">
<span>在线</span>
<span class="p-btn">[修改]</span>
<span class="del-btn">[解除绑定]</span>
</div>
</div>
<div class="right-item">
<div class="right-item-title">
<img src="../../../public/img/ps/time.png" alt="">
<span>首次绑定时间</span>
</div>
<div class="bottom">
<span>2019.06.30 13:43</span>
</div>
</div>
</div>
</div>
......@@ -189,6 +210,7 @@ export default {
font-weight: bold;
}
.device-detail-top {
display: flex;
.icon {
width: 178.5px;
height: 114.5px;
......@@ -202,6 +224,54 @@ export default {
height:92px;
}
}
.right-container {
padding-left: 10px;
padding-top: 11px;
display: flex;
.right-item {
position: relative;
padding-left: 56.5px;
padding-right: 50px;
color:rgba(51,51,51,1);
font-size: 21px;
// min-width: 224px;
&::after{
content: "";
width:1.5px;
height:39px;
background:rgba(132,132,132,1);
position: absolute;
top: 28px;
left: 0;
}
&:first-child::after {
display: none;
}
.right-item-title {
display: flex;
align-items: center;
padding-bottom: 20px;
img {
width: 45px;
height: 45px;
margin-right: 12px;
}
}
.bottom {
line-height: 25px;
.p-btn {
color: #6A92F9;
}
.del-btn {
color: #F74B39;
}
span {
padding-right: 15px;
}
}
}
}
}
.device-detail-use {
......
src/views/device/index.vue
......@@ -28,15 +28,36 @@
1楼东侧楼梯
</div>
</div>
<div class="device-item" v-for="(item, index) in 0" :key="index">
<div class="device-item-top" @click="goDetail">
<div class="device-item-img" style="background: url(../../../img/ps/img.png) no-repeat center">
</div>
<div class="device-status">
<div class="device-icon" style="background-image: url(../../../img/ps/box.png) ">
</div>
<div class="status">
在线
</div>
</div>
</div>
<div class="device-title">
1楼东侧楼梯
</div>
</div>
</div>
<Des></Des>
</div>
</template>
<script>
import NavBar from '@/views/layout/navbar'
import Des from './des.vue'
export default {
components: {
NavBar
NavBar,
Des
},
methods: {
goDetail() {
......
src/views/layout/navbar.vue
......@@ -2,8 +2,8 @@
<van-nav-bar :title="title" :left-arrow="typeof leftArrow !== 'undefined' ? true : false"
@click-left="onClickLeft"
@click-right="onClickRight">
<div slot="right">
<van-icon name="chat-o" />
<div slot="right" >
<van-icon name="chat-o" size="25" />
<slot></slot>
</div>
</van-nav-bar>
......@@ -33,5 +33,7 @@ export default {
</script>
<style>
.van-nav-bar__title {
font-size: 22px;
}
</style>
src/views/tempaltes/detail.vue
<template>
<div class="edit-container">
<NavBar title="模板详情" left-arrow></NavBar>
<div class="content">
<div class="content-left">
<div class="content-left-top">
<div class="top-left">
<!-- <div class="left-item">
<van-icon name="description" />保存至我的草稿
</div>-->
<div class="left-item" @click="goEdit">
<van-icon name="edit"/><span>编辑</span>
</div>
<div class="left-item" @click="pub">
<van-icon name="add-o"/>
<span>添加至我的模板</span>
</div>
</div>
</div>
<img
class="iframe"
:src="templateData.templateUrl"
frameborder="0"
/>
</div>
</div>
</div>
</template>
<script>
import NavBar from "@/views/layout/navbar";
import {
getTempalteDetail,
getFilmDetail,
updateFilmInfo,
createFilm
} from "@/api/api";
import axios from "axios";
import { setTimeout } from 'timers';
export default {
data() {
return {
templateData: {
height: 450,
width: 800,
resourceId: "string",
frameId: "string",
filmId: "",
templateUrl: '',
frameUrl:
"http://visual-clouds.bdideal.com/html/156050648981560a2f35feda34d66afe6765526670da2.html",
listData: []
}
};
},
created() {
if (this.$route.query.filmId) {
this.mode = "film";
this.getFilmDetail();
}
if (this.$route.query.templateId) {
this.mode = "template";
this.getTempalteDetail();
}
},
mounted() {
},
methods: {
getTempalteDetail() {
getTempalteDetail(this.$route.query.templateId).then(res => {
this.templateData.frameId = res.data.frameId;
this.templateData.resourceUrl = res.data.resourceUrl;
this.templateData.resourceId = res.data.resourceId;
this.templateData.templateUrl = res.data.templateUrl;
this.templateData.frameUrl = res.data.frameUrl;
console.log("模板详情");
axios.get('http://visual-clouds.bdideal.com/html/156076616690429b1f3072101465b906a536cf608f824.txt').then(res => {
console.log(res.data);
});
});
},
getFilmDetail() {
getFilmDetail(this.$route.query.filmId).then(res => {
console.log(res.data, "影片详情");
this.templateData.filmId = res.data.filmId;
this.name = res.data.filmName
this.templateData.resourceUrl = res.data.resourceUrl;
this.templateData.frameUrl = res.data.frameUrl;
this.templateData.listData = JSON.parse(res.data.filmData);
});
},
publish() {
console.log(this.templateData.listData)
if (this.mode === "film") {
updateFilmInfo(
this.$route.query.filmId,
JSON.stringify(this.templateData.listData)
).then(res => {
this.show = false;
console.log(res, "更新影片成功");
this.$router.back();
});
}
if (this.mode === "template") {
this.message
createFilm({
clientId: "maxrocky",
clientSecret: "maxrocky",
templateId: this.$route.query.templateId,
resourceId: this.templateData.resourceId,
frameId: this.templateData.frameId,
filmData: JSON.stringify(this.templateData.listData),
filmName: this.name
}).then(res => {
console.log(res, "创建影片成功");
this.show = false;
// updateFilmInfo(res.data.filmId, "数据").then(res => {
// console.log(res, "更新影片成功");
// this.$router.back();
// });
// this.$router.back();
});
}
},
pub() {
if (!this.name) {
this.$toast('请填写方案名称')
} else {
this.show = true;
}
},
enterSubmit() {
this.message({
type: 'getList'
})
setTimeout(() => {
this.publish()
}, 500)
},
goEdit() {
this.$router.push({
path: '/tempaltes/edit',
query: {
templateId: this.$route.query.templateId
}
})
}
},
components: {
NavBar
}
};
</script>
<style lang="scss" scoped>
.edit-container {
.content {
display: flex;
justify-content: space-between;
.content-left {
flex: 1;
padding: 50px 50px 0 50px;
background: white;
height: calc(100vh - 96px);
box-sizing: border-box;
text-align: left;
.content-left-top {
display: flex;
font-size: 21px;
color: #333333;
justify-content: space-between;
.top-left {
display: flex;
.left-item {
display: flex;
align-items: center;
span {
padding-left: 5px;
margin-top: -3px;
}
// height: ;
margin-right: 68px;
.van-icon {
margin-right: 5px;
}
}
}
.top-right {
line-height: 1;
.im {
color: #fe1515;
vertical-align: bottom;
}
input {
border-left: none;
border-top: none;
border-right: none;
padding-left: 5px;
border-bottom: 1px solid #dddddd;
outline: none;
width: 195px;
background: none;
}
}
}
.iframe {
padding-top: 40px;
width: 100%;
height: auto;
}
}
}
}
</style>
src/views/tempaltes/edit.vue
......@@ -200,6 +200,7 @@ export default {
JSON.stringify(this.templateData.listData)
).then(res => {
this.show = false;
this.$toast.success('发布成功');
console.log(res, "更新影片成功");
this.$router.back();
});
......@@ -215,6 +216,7 @@ export default {
filmData: JSON.stringify(this.templateData.listData),
filmName: this.name
}).then(res => {
this.$toast.success('发布成功');
console.log(res, "创建影片成功");
this.show = false;
// updateFilmInfo(res.data.filmId, "数据").then(res => {
......
src/views/tempaltes/index.vue
......@@ -20,7 +20,7 @@
<div class="template-list">
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<!-- slides -->
<swiper-slide v-for="(item, index) in list" :key="index" @click.native="goEdit(item)">
<swiper-slide v-for="(item, index) in list" :key="index" @click.native="goDetail(item)">
<div class="template-item">
<div class="template-item-top" :style="{
'background-image': 'url(' + (item.templateUrl ? item.templateUrl : '../../img/ps/box.png') + ')'
......@@ -111,6 +111,14 @@ export default {
templateId: item.templateId
}
})
},
goDetail(item) {
this.$router.push({
path: '/tempaltes/detial',
query: {
templateId: item.templateId
}
})
}
},
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