From 10bc47a275dfd896ba4e72f073d9f901c5390597 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Wed, 22 Mar 2023 16:05:14 +0800
Subject: [PATCH] 模块不绑定设备编码，设备编码绑定模块
---
src/views/modules/modulesView.vue | 111 +++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 95 insertions(+), 16 deletions(-)
diff --git a/src/views/modules/modulesView.vue b/src/views/modules/modulesView.vue
index 981c688..2d64799 100644
--- a/src/views/modules/modulesView.vue
+++ b/src/views/modules/modulesView.vue
@@ -5,9 +5,12 @@
<!-- 头部左侧按钮模块 -->
<div class="avue-crud__left">
<el-button size="small" class="button" icon="el-icon-back" @click="backModules">返回模块列表</el-button>
+ <el-button size="small" class="button" icon="el-icon-back" @click="backStartPage">回到开始页</el-button>
</div>
</div>
+
<div class="content-view">
+ <!--开始页-->
<div v-if="currentIndex==1" class="start">
<img class="start-img" :src="startPage.fileUrl[0].value">
<div class="start-button-group">
@@ -17,7 +20,8 @@
</div>
</div>
- <div style="height: 100%;width: 100%" v-if="currentIndex==2" class="content">
+ <!--内容页-->
+ <div style="height: 100%;width: 100%;background-color: #404040" v-if="currentIndex==2" class="content">
<!--flash-->
<div v-if="content.type == 1">
@@ -25,7 +29,7 @@
</div>
<!--图册-->
- <Flipbook v-if="content.type == 2" class="flipbook"
+ <FlipBook v-if="content.type == 2" class="flipbook"
:pages="flipConfig.pages"
:startPage="flipConfig.pageNum"
v-slot="flipbook"
@@ -55,7 +59,7 @@
@click="flipbook.flipRight"
/>
</div>
- </Flipbook>
+ </FlipBook>
<!--视频-->
<iframe v-if="content.type == 3" style="height: 100%;width: 100%" class="view-iframe" :src="iframePath"/>
@@ -69,7 +73,7 @@
<script>
import {getAll} from "@/api/modules/function";
-// import Flipbook from 'flipbook-vue/vue2'
+import FlipBook from "flipbook-vue/dist/vue2/flipbook";
import LeftIcon from 'vue-material-design-icons/ChevronLeftCircle'
import RightIcon from 'vue-material-design-icons/ChevronRightCircle'
import PlusIcon from 'vue-material-design-icons/PlusCircle'
@@ -78,7 +82,7 @@
export default {
name: "modulesView",
props:['modules'],
- components: {LeftIcon, RightIcon, PlusIcon, MinusIcon},
+ components: {FlipBook,LeftIcon, RightIcon, PlusIcon, MinusIcon},
data() {
return {
funList:[],
@@ -89,16 +93,14 @@
content:{},
iframePath:"",
flipConfig: {
- pages: [
- 'http://dev.jxpskj.com:9000/multimedia/upload/20230316/4de7aac224ce2a8f4ed8b025740405d4.png'
- ],
+ pages: [],
pagesHiRes: [],
hasMouse: true,
pageNum: null,
},
}
},
- mounted() {
+ created() {
this.getAllFunc()
},
methods: {
@@ -114,7 +116,6 @@
getAll(params).then(res => {
if (res.data.code == 200) {
let data = res.data.data
- this.funList = data
data.forEach(e=>{
if (e.property == 1){
this.startPage = e
@@ -134,13 +135,22 @@
} else if (data.type == 2) {
let fileArray = data.fileUrl
- fileArray.forEach(e => {
- this.flipConfig.pages.push(e.value)
- })
+ this.flipConfig.pages = []
+ if (fileArray.length>0){
+ fileArray.forEach(e => {
+ this.flipConfig.pages.push(e.value)
+ })
+ }
} else if (data.type == 3) {
- let url = data.fileUrl[0].value
- this.iframePath = 'http://192.168.0.200:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url))
+ if (data.fileUrl.length>0){
+ let url = data.fileUrl[0].value
+ this.iframePath = 'http://192.168.0.200:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url))
+ }
}
+ },
+ backStartPage(){
+ this.currentIndex = 1
+ this.content = this.startPage
}
}
}
@@ -164,7 +174,76 @@
.start-button-group {
position: relative;
+ display: flex;
top: -25%;
- left: 42%;
+ justify-content: center;
+}
+/**
+翻页
+ */
+.flipbook {
+ width: 100%;
+ height: 100%;
+}
+
+.page-num {
+ color: white;
+}
+
+.action-bar {
+ width: 100%;
+ height: 30px;
+ padding: 10px 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.action-bar .btn {
+ font-size: 30px;
+ color: #999;
+}
+
+.action-bar .btn svg {
+ bottom: 0;
+}
+
+.action-bar .btn:not(:first-child) {
+ margin-left: 10px;
+}
+
+.has-mouse .action-bar .btn:hover {
+ color: #ccc;
+ filter: drop-shadow(1px 1px 5px #000);
+ cursor: pointer;
+}
+
+.action-bar .btn:active {
+ filter: none !important;
+}
+
+.action-bar .btn.disabled {
+ color: #666;
+ pointer-events: none;
+}
+
+.action-bar .page-num {
+ font-size: 12px;
+ margin-left: 10px;
+}
+
+.flipbook .viewport {
+ width: 90vw !important;
+ height: calc(100vh - 800px - 40px) !important;
+}
+
+.flipbook .bounding-box {
+ box-shadow: 0 0 20px #000;
+}
+
+.credit {
+ font-size: 12px;
+ line-height: 20px;
+ margin: 10px;
}
</style>
--
Gitblit v1.9.3