Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit adf3cf96 by hanjixin
Options

Merge branch 'master' into 'test' 

初步定版

![image](/uploads/a7bf119b7e012325f4ed27d711d4b5ad/image.png)

See merge request !1
parents 07f75bba 23fe7361
Showing with 389 additions and 122 deletions
.env.develop
NODE_ENV='development'
VUE_APP_BASE_API='https://server.bdideal.com'
\ No newline at end of file
VUE_APP_BASE_API='https://dev-server.bdideal.com'
\ No newline at end of file
.env.production
NODE_ENV='production'
VUE_APP_BASE_API='//127.0.0.1:8082'
\ No newline at end of file
VUE_APP_BASE_API='https://server.bdideal.com'
\ No newline at end of file
.env.test
NODE_ENV='production'
VUE_APP_BASE_API='https://server.bdideal.com'
\ No newline at end of file
VUE_APP_BASE_API='https://dev-server.bdideal.com'
\ No newline at end of file
package.json
......@@ -8,7 +8,7 @@
"start": "npm run serve",
"build": "vue-cli-service build --mode production",
"build:test": "vue-cli-service build --mode test",
"postbuild:test": "sh ./uploadTest.sh",
"postbuild:test": "",
"lint": "vue-cli-service lint",
"fixlint": "vue-cli-service lint --fix",
"test:unit": "vue-cli-service test:unit"
......
public/index.html
......@@ -8,11 +8,11 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/vue2-animate/dist/vue2-animate.min.css"/>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<title>Vmatrix</title>
<script>
window.jsbridge && window.jsbridge.init()
// console.log(jsbridge)
// arr[index-1] ? arr[index-1].img : '没有了'
window.jsbridge && window.jsbridge.init();
</script>
</head>
<body>
......
src/api/api.js
......@@ -131,6 +131,19 @@ export function deleteFilm(filmId) {
// 删除视片
return get(`/template/del/film/info/${filmId}`)
}
export function createdSchedule(data) {
// 创建任务
return post('/calendar/add/info', data)
}
export function updateSchedule(data) {
// 修改任务
return post('/calendar/update/info', data)
}
export function getScheduleDetail(id) {
return get(`/calendar/get/info/${id}`)
// 修改任务
}
export function getUserInfo() {
// 获取用户信息
return get(`/user/get/info`)
......
src/router/index.js
......@@ -32,6 +32,7 @@ const router = new Router({
return { x: 0, y: 0 }
}
},
mode: 'history',
routes: [
{
path: '',
......
src/views/tempaltes/editMenu.vue
......@@ -26,7 +26,12 @@
/>
<div class="checkbox">
<label v-if="item.enableDisplay">
<input type="checkbox" style="display: inline;" v-model="schemaData[item.dataKey].visbility" @change="checkboxChange" />是否隐藏
<input
type="checkbox"
style="display: inline;"
v-model="schemaData[item.dataKey].visbility"
@change="checkboxChange"
/>是否隐藏
</label>
</div>
<input
......@@ -74,13 +79,16 @@
@click.native="uploadListItem(item.dataKey,index2, index3)"
:after-read="uploadAfter"
>
<van-button icon="photo" type="info">上传图片</van-button>
<van-button icon="photo" type="info">上传</van-button>
</van-uploader>
</div>
</div>
</div>
</div>
<div class="create-btn-container">
<div
class="create-btn-container"
v-if="!item.listLimit || (item.listLimit && schemaData[item.dataKey].length < !item.listLimit)"
>
<van-button class="create-btn" type="info" @click="addItem(item)">添加</van-button>
</div>
</div>
......@@ -91,17 +99,21 @@
@click.native="uploadItem(item.dataKey)"
:after-read="uploadAfter"
>
<van-button icon="photo" type="info">上传图片</van-button>
<van-button icon="photo" type="info">上传</van-button>
<br />
</van-uploader>
<van-button type="info" v-if="item.selectList && item.type !== 'list'" @click="setSelectData(item, index)">选择默认数据</van-button>
</div>
</van-collapse-item>
</van-collapse>
<selectDataCom :selectList="selectData" @changeSelcetData="changeSelcetData" v-if="selectData.show"></selectDataCom>
</div>
</template>
<script>
import { upload } from "@/api/api";
import { getHostUrl } from "@/utils/index";
import selectDataCom from "./selectData";
export default {
name: "editMenu",
props: {
......@@ -118,6 +130,9 @@ export default {
default: () => {}
}
},
components: {
selectDataCom
},
created() {
console.log(this.schemaData);
},
......@@ -126,7 +141,10 @@ export default {
activeName: "",
dataKey: "",
listIndex: "",
itemKey: ""
itemKey: "",
selectData: {
show: false
}
};
},
methods: {
......@@ -145,7 +163,7 @@ export default {
console.log(key, index, itemKey, "dsadadsa");
},
isSchemaIndex(item) {
console.log(item);
// console.log(item);
return item["schemaIndex"] ? item["schemaIndex"] : 0;
},
toObj(obj) {
......@@ -191,7 +209,7 @@ export default {
});
},
checkboxChange(value) {
console.log( this.schemaData, value)
console.log(this.schemaData, value);
},
setSchemaData(value) {
this.schemaData[this.dataKey].value = value;
......@@ -205,6 +223,26 @@ export default {
deleteItem(index, arr) {
arr.splice(index, 1);
this.$emit("setList", this.schemaData);
},
setSelectData(item, index) {
const myItem = JSON.parse(JSON.stringify(item))
this.selectData.show = true;
this.selectData.item = myItem;
this.selectData.index = index;
this.selectData.item.selectList = [
"http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg",
"http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg",
"http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg",
"http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg"
];
console.log(this.selectData)
},
changeSelcetData(data) {
console.log(data);
this.dataKey = data.item.dataKey
this.setSchemaData(data.val)
this.selectData.show = false
}
}
};
......
src/views/tempaltes/editMore.vue
......@@ -15,7 +15,7 @@
视片描述：
<input type="text" v-model="templateData.filmDescribe" />
</div>
</div> -->
</div>-->
</div>
<iframe
class="iframe"
......@@ -164,7 +164,13 @@
import NavBar from "@/views/layout/navbar";
import preview from "./preview";
import slider from "./slider";
import { getFilmDetail, updateFilmInfo, upload } from "@/api/api";
import {
getFilmDetail,
updateFilmInfo,
upload,
getTempalteDetail,
createFilm
} from "@/api/api";
import axios from "axios";
import draggable from "vuedraggable";
import editMenu from "./editMenu";
......@@ -183,7 +189,7 @@ export default {
filmName: "",
filmDescribe: "",
filmId: "",
templateShow: '',
templateShow: "",
frameUrl: "",
listData: [{}],
defaultData: [],
......@@ -214,14 +220,25 @@ export default {
},
computed: {
poppupList() {
return (this.show || this.pageViews) || this.isPreview;
return this.show || this.pageViews || this.isPreview;
}
},
created() {
window.onunload = function() {
window.wx.miniProgram.navigateBack({});
};
window.addEventListener("popstate", () => {
window.wx.miniProgram.navigateBack();
console.log("wx.miniProgram.navigateBack()");
});
let vm = this;
if(sessionStorage.getItem('is_mini_token')) {
this.is_mini_token = true
if (sessionStorage.getItem("is_mini_token")) {
this.is_mini_token = true;
}
if (this.$route.query.token) {
sessionStorage.setItem("is_mini_token", this.$route.query.token);
this.is_mini_token = true;
}
window.addEventListener(
"message",
......@@ -246,10 +263,10 @@ export default {
this.mode = "film";
this.getFilmDetail();
}
// if (this.$route.query.templateId) {
// this.mode = "template";
// this.getTempalteDetail();
// }
if (this.$route.query.templateId) {
this.mode = "template";
this.getTempalteDetail();
}
},
beforeRouteLeave(to, from, next) {
console.log(this.poppupList);
......@@ -263,7 +280,7 @@ export default {
}
},
mounted() {
document.title = '编辑视片'
document.title = "编辑视片";
},
methods: {
message(data) {
......@@ -403,6 +420,7 @@ export default {
});
},
getFilmDetail() {
if (this.$route.query.filmId) {
getFilmDetail(this.$route.query.filmId).then(res => {
console.log(res.data, "视片详情");
this.templateData.filmId = res.data.filmId;
......@@ -412,7 +430,9 @@ export default {
this.templateData.filmDescribe = res.data.filmDescribe;
this.templateData.templateShow = res.data.templateShow;
this.templateData.listData = JSON.parse(res.data.filmData).pageList;
this.templateData.templateInfo = JSON.parse(res.data.filmData).templateInfo
this.templateData.templateInfo = JSON.parse(
res.data.filmData
).templateInfo;
// this.setList()
axios
.get(
......@@ -446,29 +466,83 @@ export default {
// console.log()
// this.setList()
});
}
},
getTempalteDetail() {
getTempalteDetail(this.$route.query.templateId).then(res => {
console.log(res.data, "模板详情");
this.templateData.filmId = "";
this.templateData.filmName = res.data.templateName;
this.templateData.resourceUrl = res.data.resourceUrl;
this.templateData.frameUrl = res.data.frameUrl;
this.templateData.filmDescribe = res.data.templateDescribe;
this.templateData.templateShow = res.data.templateShow;
axios
.get(
res.data.resourceUrl.replace(
"visual-clouds.bdideal.com",
"visual-clouds.oss-cn-beijing.aliyuncs.com"
)
)
.then(res => {
// alert();
this.templateData.listData = res.data.pageList;
this.templateData.templateInfo = res.data.templateInfo;
// this.setList()
var pagesData = res.data.pageList;
this.templateData.defaultData = pagesData;
this.setList();
});
this.loaded = true;
});
},
publish() {
if (!this.templateData.listData.length) {
alert("数据为空");
return;
}
if (this.mode === "film") {
if (this.mode === "film" || window.sessionStorage.getItem("filmId")) {
const filmId = this.$route.query.filmId || window.sessionStorage.getItem("filmId")
updateFilmInfo(
this.$route.query.filmId,
filmId,
JSON.stringify({
templateInfo: this.templateData.templateInfo,
pageList: this.templateData.listData
}),
this.templateData.filmName,
this.templateData.filmDescribe
).then(res => {
).then(() => {
this.show = false;
this.$toast.success("更新成功");
console.log(res, "更新视片成功");
this.$router.back();
// window.sessionStorage.setItem("filmId");
this.navToWx(filmId)
// this.$router.back();
});
} else {
// "templateId": "string",
// "resourceId": "string",
// "frameId": "string",
// "filmData": "string",
// "filmName": "string"
createFilm({
templateId: this.$route.query.templateId,
filmData: JSON.stringify({
templateInfo: this.templateData.templateInfo,
pageList: this.templateData.listData
}),
filmName: this.templateData.filmName,
filmDescribe: this.templateData.filmDescribe
}).then(res => {
window.sessionStorage.setItem("filmId", res.data.data);
this.navToWx(res.data.data);
});
}
},
navToWx(filmId) {
window.wx.miniProgram.navigateTo({
url: `/pages/home/film/schedule_add/components/device/index?fId=${filmId}`
});
},
enterSubmit() {
this.message({
type: "getList"
......
src/views/tempaltes/filmDetail.vue
......@@ -15,7 +15,7 @@
class="custom-indicator"
slot="indicator"
>{{ current + 1 }}/{{templateData.templateUrl.length}}</div>
</van-swipe> -->
</van-swipe>-->
<iframe
class="iframe"
v-if="loaded"
......@@ -26,7 +26,7 @@
:style="
templateData.templateShow === 'VERTICAL' ? 'height:160vw;' : 'height:70vw;'
"
:src="templateData.frameUrl+'?filmId='+templateData.filmId+ '&date=' + Date.now()"
:src="templateData.frameUrl+'?filmId='+templateData.filmId"
frameborder="0"
></iframe>
<div class="temp-name pl15">
......@@ -38,7 +38,7 @@
templateData.filmDescribe}}
</div>
</div>
<div class="bgeee"></div>
<!-- <div class="bgeee"></div>
<div class="myfilms">
<div class="title">投放设备 ({{list.length}})</div>
<van-list v-model="loading" :finished="finished" finished-text @load="onLoad">
......@@ -54,7 +54,7 @@
</div>
</div>
</van-list>
</div>
</div>-->
</div>
<div class="createBtn">
<van-button type="info" style="width:45%" @click="goEdit">修改视片</van-button>
......@@ -87,7 +87,7 @@ export default {
data() {
return {
show: false,
title: '视片详情',
title: "视片详情",
current: 0,
page: 1,
list: [],
......@@ -107,11 +107,15 @@ export default {
filmDescribe: "",
frameUrl:
"https://visual-clouds.bdideal.com/html/156050648981560a2f35feda34d66afe6765526670da2.html",
listData: []
listData: [],
calendarId: null
}
};
},
created() {
window.onunload = function() {
window.wx.miniProgram.navigateBack({});
};
if (this.$route.query.token) {
sessionStorage.setItem("is_mini_token", this.$route.query.token);
this.is_mini_token = true;
......@@ -127,6 +131,10 @@ export default {
},
mounted() {
document.title = "视片详情";
window.addEventListener("popstate", () => {
window.wx.miniProgram.navigateBack();
console.log('wx.miniProgram.navigateBack()')
});
},
methods: {
getFilmList() {
......@@ -153,13 +161,12 @@ export default {
this.templateData.frameUrl = res.data.frameUrl;
this.templateData.filmDescribe = res.data.filmDescribe;
this.templateData.templateShow = res.data.templateShow;
this.templateData.calendarId = res.data.calendarId;
this.templateData.listData = JSON.parse(res.data.filmData);
this.loaded = true
this.loaded = true;
});
},
setList() {
},
setList() {},
onChange(index) {
console.log(index);
this.current = index + 1;
......@@ -198,11 +205,9 @@ export default {
}
},
goDevices() {
this.$router.push({
path: "/tempaltes/filmdevice",
query: {
filmId: this.$route.query.filmId
}
let _this = this;
window.wx.miniProgram.navigateTo({
url: `/pages/home/film/schedule_add/components/device/index?cId=${_this.templateData.calendarId}&fId=${_this.templateData.filmId}`
});
},
goEdit() {
......
src/views/tempaltes/filmDevice.vue
......@@ -4,10 +4,45 @@
<div class="content">
<div class="myfilms">
<div class="title">
已绑定设备 ({{list.length}})
<van-button type="info" @click="show=true">添加设备</van-button>
设备列表
<!-- 已绑定设备 ({{list.length}})
<van-button type="info" @click="show=true">添加设备</van-button> -->
</div>
<van-list v-model="loading" :finished="finished" finished-text @load="onLoad">
<!-- <div class>设备列表</div> -->
<div class="device-list" >
<van-checkbox-group v-model="deviceChecked">
<div
class="device-item"
v-for="(item, index) in dataList"
:key="item.equipmentId"
@click="toggle(index, item)"
>
<div class="left" v-if="item.isUse">已使用</div>
<div class="left" v-else>
<van-checkbox :name="item.equipmentId" ref="checkboxes"></van-checkbox>
</div>
<div class="icon">
<img :src="item.equipmentUrl" alt />
</div>
<div class="right">
<div class="device-name">{{item.equipmentName}}</div>
<div class="device-online">{{item.equipmentState === 'ONLINE' ? '在线' : '离线'}}</div>
</div>
</div>
<!-- <div>{{deviceChecked}}</div> -->
</van-checkbox-group>
</div>
<div class="dialog-bottom">
<div class="left">
<input type="checkbox" @change="checkAll" v-model="isCheck" />
<span>全选，共选择{{deviceChecked.length}}台</span>
</div>
<div class="right">
<van-button type="info" @click="enter">确定</van-button>
</div>
</div>
<!-- <van-list v-model="loading" :finished="finished" finished-text @load="onLoad">
<div class="device-list">
<div v-for="item in list" :key="item.equipmentId">
<van-swipe-cell>
......@@ -32,7 +67,7 @@
</van-swipe-cell>
</div>
</div>
</van-list>
</van-list> -->
</div>
<van-dialog
:before-close="beforeClose"
......@@ -44,42 +79,11 @@
v-model="show"
>
<van-nav-bar title="设备管理">
<div slot="right"> <span @click="show=false">关闭</span></div>
<div slot="right">
<span @click="show=false">关闭</span>
</div>
</van-nav-bar>
<div class>设备列表</div>
<div class="device-list" v-if="show">
<van-checkbox-group v-model="deviceChecked">
<div
class="device-item"
v-for="(item, index) in dataList"
:key="item.equipmentId"
@click="toggle(index)"
>
<div class="left" v-if="item.isUse">已使用</div>
<div class="left" v-else>
<van-checkbox :name="item.equipmentId" ref="checkboxes"></van-checkbox>
</div>
<div class="icon">
<img :src="item.equipmentUrl" alt />
</div>
<div class="right">
<div class="device-name">{{item.equipmentName}}</div>
<div class="device-online">{{item.equipmentState === 'ONLINE' ? '在线' : '离线'}}</div>
</div>
</div>
<!-- <div>{{deviceChecked}}</div> -->
</van-checkbox-group>
</div>
<div class="dialog-bottom">
<div class="left">
<input type="checkbox" @change="checkAll" v-model="isCheck" />
<span>全选，共选择{{deviceChecked.length}}台</span>
</div>
<div class="right">
<van-button type="info" @click="enter">确定</van-button>
</div>
</div>
</van-dialog>
</div>
</div>
......@@ -88,10 +92,11 @@
<script>
import NavBar from "@/views/layout/navbar";
import {
getFilmDeviceList,
getFilmAddDeviceList,
bindDeviceToFilm,
createdSchedule,
getScheduleDetail,
updateSchedule
} from "@/api/api";
export default {
......@@ -110,9 +115,11 @@ export default {
};
},
created() {
if(sessionStorage.getItem('is_mini_token')) {
if (sessionStorage.getItem("is_mini_token")) {
this.is_mini_token = true;
}
this.calendarId = this.$route.query.calendarId;
this.calendarId && this.getScheduleDetail()
this.getFilmAddDeviceList();
},
computed: {
......@@ -128,23 +135,16 @@ export default {
}
},
mounted() {
document.title = '视片设备列表'
document.title = "视片设备列表";
},
methods: {
getFilmList() {
getFilmDeviceList(this.$route.query.filmId, this.page)
.then(res => {
console.log(res.data, "device list");
this.list = this.list.concat(res.data.list);
if (res.data.list.length < 10) {
this.finished = true;
this.loading = false;
}
getScheduleDetail() {
getScheduleDetail(this.calendarId).then(res => {
const arr = res.data.equipmentInfos.map(item => {
return item.equipmentId
})
this.deviceChecked = arr
})
.catch(() => {
this.finished = true;
this.loading = false;
});
},
getFilmAddDeviceList() {
getFilmAddDeviceList().then(res => {
......@@ -167,13 +167,12 @@ export default {
.then(() => {
bindDeviceToFilm([item.equipmentId]).then(() => {
this.$toast.success("解绑成功");
this.page = 0
this.finished = false
this.list = []
this.getFilmAddDeviceList()
this.page = 0;
this.finished = false;
this.list = [];
this.getFilmAddDeviceList();
});
});
},
checkAll() {
console.log("checkAll");
......@@ -192,8 +191,11 @@ export default {
console.log(this.deviceChecked);
}
},
toggle(index) {
console.log(index, this.deviceChecked, this.$refs.checkboxes)
toggle(index, item) {
if(item.calendarId) {
this.$toast.success("设备已存在播放任务，此操作覆盖前任务？");
}
console.log(index, this.deviceChecked, this.$refs.checkboxes);
this.$refs.checkboxes[index].toggle();
},
onLoad() {
......@@ -201,19 +203,51 @@ export default {
this.page++;
},
enter() {
let equipmentTopicList = [];
let equipmentsIds = [];
this.dataList.map(item => {
equipmentsIds.push(item.equipmentId);
equipmentTopicList.push(item.mqttTopic);
});
if (this.deviceChecked.length) {
bindDeviceToFilm(this.deviceChecked, this.$route.query.filmId).then(
() => {
let obj = {
calendarName: "DEFAULstring",
filmInfos: [
{
filmId: this.$route.query.filmId,
time: "00:00"
}
],
equipmentsIds: equipmentsIds,
equipmentTopicList: equipmentTopicList,
calendarType: this.calendarId ? 'CUSTOME' : "DEFAUL"
};
if (!this.calendarId) {
createdSchedule(obj).then(() => {
this.$toast.success("绑定成功");
this.show = false;
this.page = 0;
this.list = [];
this.finished = false;
this.deviceChecked = []
this.isCheck = []
this.$router.back();
});
} else {
obj.calendarId = this.calendarId;
updateSchedule(obj).then(() => {
this.$toast.success("绑定成功");
this.$router.back();
});
}
);
// bindDeviceToFilm(this.deviceChecked, this.$route.query.filmId).then(
// () => {
// this.$toast.success("绑定成功");
// this.show = false;
// this.page = 0;
// this.list = [];
// this.finished = false;
// this.deviceChecked = [];
// this.isCheck = [];
// }
// );
} else {
this.$toast.success("请选择设备");
this.show = false;
}
}
......
src/views/tempaltes/selectData.vue 0 → 100644
<template>
<div v-if="selectList.item && selectList.show">
<van-popup
v-model="selectList.show"
position="bottom"
:style="{ height: '300px' }"
v-if="selectList.item"
>
<div class="select-container" v-if="selectList.item.type === 'image'">
<img
class="selectImage"
v-for="(image, index) in selectList.item.selectList"
:key="index"
:src="image"
alt
@click="ItemClick(image)"
/>
</div>
<div class="select-container" v-if="selectList.item.type === 'video'">
<video
class="selectVideo"
v-for="(image, index) in selectList.item.selectList"
:key="index"
:src="image"
alt
@click="ItemClick(image)"
></video>
</div>
<div class="select-container" v-if="selectList.item.type === 'text'">
<div
class="selectText"
v-for="(image, index) in selectList.item.selectList"
:key="index"
:src="image"
@click="ItemClick(image)"
>{{image}}</div>
</div>
</van-popup>
</div>
</template>
<script>
export default {
data() {
return {
show: false
};
},
created() {
// console.log(this.selectList);
},
methods: {
ItemClick(val) {
this.$emit('changeSelcetData', {
val,
index: this.selectList.index,
item: this.selectList.item
} )
}
},
props: ["selectList"],
watch: {
selectList: function(val) {
console.log(val);
}
}
};
</script>
<style lang="scss" scoped>
.select-container {
// overflow: hidden;
height: 100%;
overflow-y: auto;
box-sizing: border-box;
width: 100%;
padding: 20px;
// display: flex;
.selectImage {
display: inline-block;
// height: calc(100% - 20px);
width: 100%;
margin-bottom: 30px;
}
.selectVideo {
display: inline-block;
// height: calc(100% - 20px);
width: 100%;
margin-bottom: 30px;
}
.selectText {
display: block;
word-break: break-all;
// height: calc(100% - 20px);
width: 100%;
margin-bottom: 30px;
}
}
</style>
\ No newline at end of file
uploadD.sh 0 → 100644
scp -r ./dist/* root@39.97.179.60:/data/html
# MaxRocky5721
\ No newline at end of file
uploadTest.sh
scp -r ./dist/* root@39.105.231.218:/data/html
scp -r ./dist/* root@39.96.26.20:/data/html
# MaxRocky5721
\ No newline at end of file
vue.config.js
......@@ -8,7 +8,7 @@ function resolve(dir) {
}
module.exports = {
publicPath: './',
publicPath: '/',
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
//是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
......
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