From 6926dbab01be34206f8ed9940e60efea5f77b0a1 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Thu, 16 Mar 2023 11:07:16 +0800
Subject: [PATCH] 预览页整合flipbook
---
src/router/page/index.js | 6
src/api/modules/modules.js | 50 +++++++
src/main.js | 5
src/views/controller.vue | 2
src/views/socket-demo.vue | 8
package.json | 3
src/api/modules/function.js | 60 ++++++++
src/views/view.vue | 4
src/views/funcView.vue | 248 +++++++++++++++++++++++++++++++++++
9 files changed, 377 insertions(+), 9 deletions(-)
diff --git a/package.json b/package.json
index 90c7aa2..245d89f 100644
--- a/package.json
+++ b/package.json
@@ -8,13 +8,16 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
+ "@smallwei/avue": "^2.10.10",
"axios": "^1.3.4",
"core-js": "^3.8.3",
"element-ui": "^2.15.13",
+ "flipbook-vue": "^1.0.0-beta.4",
"socket.io": "^4.6.1",
"socket.io-client": "^2.4.0",
"vue": "^2.6.14",
"vue-axios": "^3.5.2",
+ "vue-material-design-icons": "^5.2.0",
"vue-router": "^3.0.1"
},
"devDependencies": {
diff --git a/src/api/modules/function.js b/src/api/modules/function.js
new file mode 100644
index 0000000..dff6a36
--- /dev/null
+++ b/src/api/modules/function.js
@@ -0,0 +1,60 @@
+import request from '@/router/axios';
+
+export const getList = (current, size, params) => {
+ return request({
+ url: '/api/function/function/list',
+ method: 'get',
+ params: {
+ ...params,
+ current,
+ size,
+ }
+ })
+}
+
+export const getAll = (params) => {
+ return request({
+ url: '/api/function/function/all',
+ method: 'get',
+ params: {
+ ...params,
+ }
+ })
+}
+
+export const getDetail = (id) => {
+ return request({
+ url: '/api/function/function/detail',
+ method: 'get',
+ params: {
+ id
+ }
+ })
+}
+
+export const remove = (ids) => {
+ return request({
+ url: '/api/function/function/remove',
+ method: 'post',
+ params: {
+ ids,
+ }
+ })
+}
+
+export const add = (row) => {
+ return request({
+ url: '/api/function/function/submit',
+ method: 'post',
+ data: row
+ })
+}
+
+export const update = (row) => {
+ return request({
+ url: '/api/function/function/submit',
+ method: 'post',
+ data: row
+ })
+}
+
diff --git a/src/api/modules/modules.js b/src/api/modules/modules.js
new file mode 100644
index 0000000..07a7636
--- /dev/null
+++ b/src/api/modules/modules.js
@@ -0,0 +1,50 @@
+import request from '@/router/axios';
+
+export const getList = (current, size, params) => {
+ return request({
+ url: '/api/modules/modules/list',
+ method: 'get',
+ params: {
+ ...params,
+ current,
+ size,
+ }
+ })
+}
+
+export const getDetail = (id) => {
+ return request({
+ url: '/api/modules/modules/detail',
+ method: 'get',
+ params: {
+ id
+ }
+ })
+}
+
+export const remove = (ids) => {
+ return request({
+ url: '/api/modules/modules/remove',
+ method: 'post',
+ params: {
+ ids,
+ }
+ })
+}
+
+export const add = (row) => {
+ return request({
+ url: '/api/modules/modules/submit',
+ method: 'post',
+ data: row
+ })
+}
+
+export const update = (row) => {
+ return request({
+ url: '/api/modules/modules/submit',
+ method: 'post',
+ data: row
+ })
+}
+
diff --git a/src/main.js b/src/main.js
index f3d99e8..aecf736 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,13 +4,16 @@
import App from './App.vue';
//路由配置
import router from "./router/router";
-
+//引入Avue
+import Avue from '@smallwei/avue';
+import '@smallwei/avue/lib/index.css';
import axios from 'axios'//引入axios
import VueAxios from 'vue-axios'
Vue.prototype.$axios = axios;//把axios挂载到vue上
Vue.config.productionTip = false
Vue.use(ElementUI);
+Vue.use(Avue);
new Vue({
render: h => h(App),
diff --git a/src/router/page/index.js b/src/router/page/index.js
index c51c13a..bdc7c19 100644
--- a/src/router/page/index.js
+++ b/src/router/page/index.js
@@ -1,17 +1,17 @@
export const pageRoute = [
{
path: '/',
- redirect: '/socket',
+ redirect: '/view',
},
{
path:"/view",
name:"view",
- component: () => import( /* webpackChunkName: "views" */ '@/views/viewPage')
+ component: () => import( /* webpackChunkName: "views" */ '@/views/funcView')
},
{
path:"/controller",
name:"controller",
- component: () => import( /* webpackChunkName: "views" */ '@/views/controllerPage')
+ component: () => import( /* webpackChunkName: "views" */ '@/views/controller')
},
{
path:"/socket",
diff --git a/src/views/controllerPage.vue b/src/views/controller.vue
similarity index 98%
rename from src/views/controllerPage.vue
rename to src/views/controller.vue
index 60444aa..60f9433 100644
--- a/src/views/controllerPage.vue
+++ b/src/views/controller.vue
@@ -24,7 +24,7 @@
</div>
<div class="button-group">
- <el-button @click="controller(data)" v-for="data in multiMediaList">{{data.name}}</el-button>
+ <el-button @click="controller(data)" v-for="data in multiMediaList" :key="data.id">{{data.name}}</el-button>
</div>
</div>
</template>
diff --git a/src/views/funcView.vue b/src/views/funcView.vue
new file mode 100644
index 0000000..16e85c9
--- /dev/null
+++ b/src/views/funcView.vue
@@ -0,0 +1,248 @@
+<template>
+ <div class="base-container">
+ <el-row>
+ <el-col :span="4">
+ <div class="search">
+ <avue-form :option="option" v-model="form" @submit="handleSubmit">
+ <template slot-scope="{}" slot="modulesIdLabel">
+ <span></span>
+ </template>
+ </avue-form>
+ </div>
+
+ <div class="menu-list">
+ <el-menu
+ :default-active="defaultActive"
+ class="el-menu-vertical-demo"
+ @select="handleSelect"
+ background-color="#545c64"
+ text-color="#fff"
+ ref="elMenu"
+ active-text-color="#ffd04b">
+ <el-menu-item v-for="data in menuList" :index="data.id" :key="data.id">
+ <span slot="title">{{ data.name }}</span>
+ </el-menu-item>
+ </el-menu>
+ </div>
+
+ </el-col>
+ <el-col :span="20">
+ <div class="show">
+ <Flipbook v-if="viewType == 2" class="flipbook"
+ :pages="flipConfig.pages"
+ :startPage="flipConfig.pageNum"
+ v-slot="flipbook"
+ ref="flipbook">
+ <div class="action-bar">
+ <left-icon
+ class="btn left"
+ :class="{ disabled: !flipbook.canFlipLeft }"
+ @click="flipbook.flipLeft"
+ />
+ <plus-icon
+ class="btn plus"
+ :class="{ disabled: !flipbook.canZoomIn }"
+ @click="flipbook.zoomIn"
+ />
+ <span class="page-num">
+ Page {{ flipbook.page }} of {{ flipbook.numPages }}
+ </span>
+ <minus-icon
+ class="btn minus"
+ :class="{ disabled: !flipbook.canZoomOut }"
+ @click="flipbook.zoomOut"
+ />
+ <right-icon
+ class="btn right"
+ :class="{ disabled: !flipbook.canFlipRight }"
+ @click="flipbook.flipRight"
+ />
+ </div>
+ </Flipbook>
+ <iframe v-if="viewType == 3" class="view-iframe" :src="path"/>
+ </div>
+
+ </el-col>
+ </el-row>
+ </div>
+</template>
+
+<script>
+import {getAll} from "@/api/modules/function";
+import Flipbook from 'flipbook-vue/vue2'
+import LeftIcon from 'vue-material-design-icons/ChevronLeftCircle'
+import RightIcon from 'vue-material-design-icons/ChevronRightCircle'
+import PlusIcon from 'vue-material-design-icons/PlusCircle'
+import MinusIcon from 'vue-material-design-icons/MinusCircle'
+
+export default {
+ name: "funcView",
+ components: {Flipbook, LeftIcon, RightIcon, PlusIcon, MinusIcon},
+ data() {
+ return {
+ form: {},
+ option: {
+ menuSpan: 6,
+ emptyBtn: false,
+ submitText: '连接',
+ column: [
+ {
+ label: "模块id",
+ labelWidth: 15,
+ prop: "modulesId",
+ type: "input",
+ span: 16,
+ labelslot: true,
+ rules: [{
+ required: true,
+ message: "请输入模块id",
+ trigger: "blur"
+ }],
+ },
+ ]
+ },
+ defaultActive: "",
+ menuList: [],
+ path: "",
+ imgPages: [],
+ viewType: "",
+
+ flipConfig: {
+ pages: [],
+ pagesHiRes: [],
+ hasMouse: true,
+ pageNum: null,
+ }
+ }
+ },
+ mounted() {
+ },
+ methods: {
+ handleSubmit(form, done) {
+ getAll(form).then(res => {
+ if (res.data.code == 200) {
+ let data = res.data.data
+ this.menuList = data
+ done()
+ }
+ })
+ },
+ handleSelect(index) {
+ let selectData = this.menuList.filter(e => {
+ return e.id == index
+ })
+ this.viewFile(selectData[0])
+ },
+ //文件预览
+ viewFile(data) {
+ this.viewType = data.type
+ let url
+ if (data.type == 2) {
+ let fileArray = data.fileUrl
+ fileArray.forEach(e => {
+ this.flipConfig.pages.push(e.value)
+ })
+ } else if (data.type == 3) {
+ url = data.fileUrl[0].value
+ this.path = 'http://192.168.0.200:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url))
+ }else if (data.type == 1){
+ url = data.fileUrl[0].value
+ this.path = 'http://192.168.0.200:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url))
+ }
+
+ },
+ }
+}
+</script>
+
+<style scoped>
+.show{
+ background: #404040;
+ width: 100%;
+ height: 100vh;
+}
+
+.el-select {
+ width: 100%
+}
+
+.el-row {
+ height: 100%;
+}
+
+.el-col {
+ height: 100%;
+}
+
+.view-iframe {
+ width: 100%;
+ height: 100%;
+}
+
+.flipbook {
+ width: 100%;
+ height: 100vh;
+}
+
+.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 - 50px - 40px) !important;
+}
+
+.flipbook .bounding-box {
+ box-shadow: 0 0 20px #000;
+}
+
+.credit {
+ font-size: 12px;
+ line-height: 20px;
+ margin: 10px;
+}
+
+</style>
diff --git a/src/views/socket-demo.vue b/src/views/socket-demo.vue
index 31d251c..35f1a79 100644
--- a/src/views/socket-demo.vue
+++ b/src/views/socket-demo.vue
@@ -3,7 +3,8 @@
<h1>{{ msg }}</h1>
<button @click="connect">连接</button>
<button @click="disconnect">断开连接</button>
- <button @click="sendMessage">发送消息</button>
+ <button @click="sendMessage">msg</button>
+ <button @click="sendMessage2">msg2</button>
</div>
</template>
@@ -15,7 +16,7 @@
data () {
return {
socketIoClient: null,
- msg: 'Welcome to Your Vue.js App'
+ msg: 'Socket.io 测试页'
}
},
methods: {
@@ -42,6 +43,9 @@
},
sendMessage(){
this.socketIoClient.emit("msg","99999999999")
+ },
+ sendMessage2(){
+ this.socketIoClient.emit("msg2","00000")
}
},
}
diff --git a/src/views/viewPage.vue b/src/views/view.vue
similarity index 98%
rename from src/views/viewPage.vue
rename to src/views/view.vue
index 78182a8..7e95a25 100644
--- a/src/views/viewPage.vue
+++ b/src/views/view.vue
@@ -11,7 +11,7 @@
<!-- :value="item.id">-->
<!-- </el-option>-->
<!-- </el-select>-->
- <el-input v-model="equipmentCode" placeholder="请输入要连接的设备码"></el-input>
+ <el-input v-model="equipmentCode" placeholder="请输入要连接的模块id"></el-input>
<el-button type="primary" @click="getAllMultiMedia">连接</el-button>
</div>
@@ -23,7 +23,7 @@
text-color="#fff"
ref="elMenu"
active-text-color="#ffd04b">
- <el-menu-item v-for="data in dataList" :index="data.id">
+ <el-menu-item v-for="data in dataList" :index="data.id" :key="data.id">
<span slot="title">{{ data.name }}</span>
</el-menu-item>
</el-menu>
--
Gitblit v1.9.3