From a533c94a9ee64d8b1fdf322170562d4bce1c88b5 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Fri, 17 Mar 2023 10:26:14 +0800
Subject: [PATCH] 预览页
---
src/views/modules/function.vue | 249 +++++++++++++++++++++++++-----
vue.config.js | 2
public/index.html | 2
package.json | 2
src/views/equipment/equipment.vue | 1
src/views/modules/modulesView.vue | 170 +++++++++++++++++++++
src/views/modules/modules.vue | 47 ++++-
7 files changed, 411 insertions(+), 62 deletions(-)
diff --git a/package.json b/package.json
index 7a9dddb..d7b7a3b 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
"classlist-polyfill": "^1.2.0",
"crypto-js": "^4.0.0",
"element-ui": "^2.15.6",
+ "flipbook-vue": "^1.0.0-beta.4",
"js-base64": "^2.5.1",
"js-cookie": "^2.2.0",
"js-md5": "^0.7.3",
@@ -28,6 +29,7 @@
"vue": "^2.6.10",
"vue-axios": "^2.1.2",
"vue-i18n": "^8.7.0",
+ "vue-material-design-icons": "^5.2.0",
"vue-router": "^3.0.1",
"vuex": "^3.1.1"
},
diff --git a/public/index.html b/public/index.html
index 6f10c56..c94d201 100644
--- a/public/index.html
+++ b/public/index.html
@@ -18,6 +18,8 @@
<link rel="stylesheet" href="<%= BASE_URL %>cdn/avue/2.9.12/index.css">
<script src="<%= BASE_URL %>cdn/xlsx/FileSaver.min.js"></script>
<script src="<%= BASE_URL %>cdn/xlsx/xlsx.full.min.js"></script>
+ <!--文件预览-->
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>
<link rel="icon" href="<%= BASE_URL %>favicon.png">
<title>Saber企业平台</title>
<style>
diff --git a/src/views/equipment/equipment.vue b/src/views/equipment/equipment.vue
index e716a1b..fb40930 100644
--- a/src/views/equipment/equipment.vue
+++ b/src/views/equipment/equipment.vue
@@ -38,7 +38,6 @@
export default {
data() {
var validateCode = (rule, value, callback) => {
-
if (value) {
getAll(value).then(res => {
let data = res.data.data
diff --git a/src/views/modules/function.vue b/src/views/modules/function.vue
index e95c4e5..4ebc722 100644
--- a/src/views/modules/function.vue
+++ b/src/views/modules/function.vue
@@ -1,27 +1,30 @@
<template>
<div>
-
- {{ modules.id}}--{{modules.name}}
+ {{ modules.id }}--{{ modules.name }}
+ <!--头部按钮-->
+ <div class="avue-crud__menu">
+ <!-- 头部左侧按钮模块 -->
+ <div class="avue-crud__left">
+ <el-button size="small" class="button" icon="el-icon-back" @click="backModules">返回</el-button>
+ <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
+ </div>
+ <!-- 头部右侧按钮模块 -->
+ <div class="avue-crud__right">
+ <div v-if="content.property== 2" class="model-type">
+ <el-radio-group v-model="modelType">
+ <el-radio-button label="管理"></el-radio-button>
+ <el-radio-button label="预览"></el-radio-button>
+ </el-radio-group>
+ </div>
+ </div>
+ </div>
<el-row>
-
<!--左侧列表-->
<el-col :span="6">
<div class="func">
- <div class="avue-crud__menu">
- <!-- 头部左侧按钮模块 -->
- <div class="avue-crud__left">
- <el-button size="small" class="button" icon="el-icon-back" @click="backModules">返回</el-button>
- <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
- </div>
- </div>
<!--列表展示-->
<div class="list">
- <el-tree v-if="funList.length >0"
- :data="funList"
- :props="defaultProps"
- node-key="id"
- @node-click="handleNodeClick"
- >
+ <el-tree v-if="funList.length >0" :data="funList" :props="defaultProps" node-key="id" @node-click="handleNodeClick">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ data.name }}</span>
<span>
@@ -41,22 +44,64 @@
<!--右侧预览-->
<el-col :span="17">
<div class="func-content">
- <div class="header">
+ <!--开始页-->
+ <div class="start" v-if="content.property == 1">
+ <img class="start-img" :src="content.fileUrl[0].value">
+ <div class="start-button-group">
+ <el-button disabled size="small" v-for="data in contentFunList" :index="data.id" :key="data.id">
+ {{ data.name }}
+ </el-button>
+ </div>
+ </div>
+ <!--内容页-->
+ <div style="height: 100%;width: 100%" v-if="content.property == 2">
+
+ <div style="height: 100%;width: 100%" class="manage" v-if="modelType=='管理'">
+ <!--flash-->
+ <div v-if="content.type == 1">
+ <avue-form :option="flashOption" v-model="flashForm" @submit="handleSubmitFile"></avue-form>
+ </div>
+
+ <!--图册-->
+ <div v-if="content.type == 2">
+ <avue-form :option="imgOption" v-model="imgForm" @submit="handleSubmitFile"></avue-form>
+ </div>
+
+ <!--视频-->
+ <div v-if="content.type == 3">
+ <avue-form :option="videoOption" v-model="videoForm" @submit="handleSubmitFile"></avue-form>
+ </div>
+ </div>
+
+ <div style="height: 100%;width: 100%" class="view" v-else>
+ <!--flash-->
+ <div v-if="content.type == 1">
+
+ </div>
+
+ <!--图册-->
+ <div style="height: 100%;width: 100%" v-if="content.type == 2">
+ <Flipbook 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>
+ </div>
+
+ <!--视频-->
+ <div style="height: 100%;width: 100%" v-if="content.type == 3">
+ <iframe class="view-iframe" :src="iframePath"/>
+ </div>
+ </div>
</div>
- <!--flash-->
- <div v-if="content.type == 1">
- <avue-form :option="flashOption" v-model="flashForm" @submit="handleSubmitFile"></avue-form>
- </div>
-
- <!--图册-->
- <div v-if="content.type == 2">
- <avue-form :option="imgOption" v-model="imgForm" @submit="handleSubmitFile"></avue-form>
- </div>
-
- <!--视频-->
- <div v-if="content.type == 3">
- <avue-form :option="videoOption" v-model="videoForm" @submit="handleSubmitFile"></avue-form>
+ <!--结束页-->
+ <div class="end" v-if="content.property == 3">
+ <img class="end-img" :src="content.fileUrl[0].value">
</div>
</div>
</el-col>
@@ -76,13 +121,20 @@
<script>
import {getAll, add, update, remove} from "@/api/modules/function";
+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: "function",
props: ['modules'],
+ components: {LeftIcon, RightIcon, PlusIcon, MinusIcon},
data() {
return {
+ //所有功能集合
funList: [],
+ contentFunList: [],
// 弹框标题
title: '',
// 是否展示弹框
@@ -159,9 +211,9 @@
{
label: "排序",
prop: "sort",
- min:1,
- max:999999,
- type:'number',
+ min: 1,
+ max: 999999,
+ type: 'number',
span: 24,
display: false,
rules: [{
@@ -258,15 +310,15 @@
},
imgForm: {},
- flashOption:{
- column:[
+ flashOption: {
+ column: [
{
label: 'flash上传',
prop: 'url',
type: 'upload',
span: 24,
dragFile: true,
- limit:1,
+ limit: 1,
propsHttp: {
res: 'data',
url: 'link'
@@ -275,7 +327,7 @@
},
]
},
- flashForm:{},
+ flashForm: {},
videoOption: {
column: [
@@ -286,7 +338,7 @@
span: 24,
dragFile: true,
accept: 'video/mp4',
- limit:1,
+ limit: 1,
listType: "picture-card",
propsHttp: {
res: 'data',
@@ -303,6 +355,15 @@
label: 'name'
},
content: {},
+ modelType:'管理',
+
+ flipConfig: {
+ pages: [],
+ pagesHiRes: [],
+ hasMouse: true,
+ pageNum: null,
+ },
+ iframePath:"",
}
},
watch: {
@@ -335,13 +396,15 @@
},
//获取当前模块id下的所有子功能
getAllFunc() {
- console.log(this.modules)
let params = {
modulesId: this.modules.id
}
getAll(params).then(res => {
if (res.data.code == 200) {
this.funList = res.data.data
+ this.contentFunList = res.data.data.filter(e => {
+ return e.property == 2
+ })
}
})
},
@@ -349,23 +412,23 @@
form.modulesId = this.modules.id
if (!form.id) {
add(form).then(() => {
- this.box = false;
this.getAllFunc()
this.$message({
type: "success",
message: "操作成功!"
});
done()
+ this.box = false;
});
} else {
update(form).then(() => {
- this.box = false;
this.getAllFunc()
this.$message({
type: "success",
message: "操作成功!"
});
done()
+ this.box = false;
})
}
},
@@ -418,12 +481,20 @@
// 节点点击事件
handleNodeClick(data) {
this.content = data
- if (data.type == 1) {
- this.flashForm.url = data.fileUrl
- }else if (data.type ==2){
- this.imgForm.url = data.fileUrl
- }else if (data.type == 3){
- this.videoForm.url = data.fileUrl
+ if (data.property == 2) {
+ if (data.type == 1) {
+ this.flashForm.url = data.fileUrl
+ } else if (data.type == 2) {
+ this.imgForm.url = data.fileUrl
+ let fileArray = data.fileUrl
+ fileArray.forEach(e => {
+ this.flipConfig.pages.push(e.value)
+ })
+ } else if (data.type == 3) {
+ this.videoForm.url = data.fileUrl
+ let url = data.fileUrl[0].value
+ this.iframePath = 'http://192.168.0.200:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url))
+ }
}
},
// 图片提交
@@ -454,4 +525,88 @@
font-size: 14px;
padding-right: 8px;
}
+
+.start, .end {
+ width: 100%;
+ height: 100%;
+}
+
+.start-img, .end-img {
+ width: 100%;
+ height: 100%;
+}
+
+.start-button-group {
+ position: relative;
+ top: -25%;
+ left: 42%;
+}
+
+.model-type{
+ display: flex;
+ justify-content: flex-end;
+}
+
+
+.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;
+}
+
+.credit {
+ font-size: 12px;
+ line-height: 20px;
+ margin: 10px;
+}
</style>
diff --git a/src/views/modules/modules.vue b/src/views/modules/modules.vue
index d06e8d3..a300148 100644
--- a/src/views/modules/modules.vue
+++ b/src/views/modules/modules.vue
@@ -1,6 +1,6 @@
<template>
<basic-container>
- <div v-if="!isFunction" class="avue-crud">
+ <div v-if="!isFunction && !isView" class="avue-crud">
<!--按钮-->
<el-row>
<div class="avue-crud__menu">
@@ -27,7 +27,7 @@
<div style="padding: 14px;">
<span>{{ o.name }}</span>
<div class="bottom clearfix">
- <el-button type="text" class="button">预览</el-button>
+ <el-button type="text" class="button" @click="handleView(o)">预览</el-button>
<el-button type="text" class="button" @click="handleDelete(o.id)">删除</el-button>
<el-button type="text" class="button" @click="handleEdit(o)">编辑</el-button>
</div>
@@ -58,6 +58,9 @@
</div>
<!-- 功能详情-->
<Function ref="func" v-if="isFunction" :modules="modules" @backModules="backModules"></Function>
+
+ <!--功能预览-->
+ <ModulesView v-if="isView" ref="modulesView" :modules="modules" @backModules="backModules"></ModulesView>
</basic-container>
</template>
@@ -65,9 +68,10 @@
import {getList, getDetail, add, update, remove} from "@/api/modules/modules";
import {mapGetters} from "vuex";
import Function from "@/views/modules/function";
+import ModulesView from "@/views/modules/modulesView";
export default {
- components: {Function},
+ components: {ModulesView, Function},
data() {
return {
// 弹框标题
@@ -117,6 +121,24 @@
}],
},
{
+ label: "设备编码",
+ prop: "equipmentId",
+ span:24,
+ type: "select",
+ dicUrl: `/api/equipment/equipment/all?type=1`,
+ props: {
+ label: "code",
+ value: "id"
+ },
+ rules: [
+ {
+ required: true,
+ message: '请选择设备',
+ trigger: 'blur'
+ }
+ ]
+ },
+ {
label: "宽",
prop: "width",
type: "input",
@@ -156,6 +178,7 @@
// 表单列表
data: [],
isFunction: false,
+ isView:false,
modules: "",
}
},
@@ -227,14 +250,7 @@
this.fileList = this.form.background
});
},
- handleView(row) {
- this.title = '查看'
- this.view = true;
- this.box = true;
- getDetail(row.id).then(res => {
- this.form = res.data.data;
- });
- },
+
handleDelete(id) {
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
@@ -308,8 +324,13 @@
},
//返回模块页
backModules() {
- this.isFunction = !this.isFunction
- }
+ this.isFunction = false
+ this.isView = false
+ },
+ handleView(data) {
+ this.modules = data
+ this.isView = !this.isView
+ },
}
};
</script>
diff --git a/src/views/modules/modulesView.vue b/src/views/modules/modulesView.vue
new file mode 100644
index 0000000..981c688
--- /dev/null
+++ b/src/views/modules/modulesView.vue
@@ -0,0 +1,170 @@
+<template>
+ <div>
+ <!--头部按钮-->
+ <div class="avue-crud__menu">
+ <!-- 头部左侧按钮模块 -->
+ <div class="avue-crud__left">
+ <el-button size="small" class="button" icon="el-icon-back" @click="backModules">返回模块列表</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">
+ <el-button size="small" v-for="data in contentFunList" :index="data.id" :key="data.id" @click="jumpToContent(data)">
+ {{ data.name }}
+ </el-button>
+ </div>
+ </div>
+
+ <div style="height: 100%;width: 100%" v-if="currentIndex==2" class="content">
+
+ <!--flash-->
+ <div v-if="content.type == 1">
+
+ </div>
+
+ <!--图册-->
+ <Flipbook v-if="content.type == 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="content.type == 3" style="height: 100%;width: 100%" class="view-iframe" :src="iframePath"/>
+
+ </div>
+
+ </div>
+
+ </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: "modulesView",
+ props:['modules'],
+ components: {LeftIcon, RightIcon, PlusIcon, MinusIcon},
+ data() {
+ return {
+ funList:[],
+ startPage:{},
+ contentFunList:[],
+ endPage:[],
+ currentIndex:1,
+ content:{},
+ iframePath:"",
+ flipConfig: {
+ pages: [
+ 'http://dev.jxpskj.com:9000/multimedia/upload/20230316/4de7aac224ce2a8f4ed8b025740405d4.png'
+ ],
+ pagesHiRes: [],
+ hasMouse: true,
+ pageNum: null,
+ },
+ }
+ },
+ mounted() {
+ this.getAllFunc()
+ },
+ methods: {
+ //返回模块列表页
+ backModules() {
+ this.$emit('backModules')
+ },
+ //获取当前模块id下的所有子功能
+ getAllFunc() {
+ let params = {
+ modulesId: this.modules.id
+ }
+ 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
+ }else if (e.property == 2){
+ this.contentFunList.push(e)
+ }else if (e.property == 3){
+ this.endPage = e
+ }
+ })
+ }
+ })
+ },
+ jumpToContent(data){
+ this.currentIndex = 2
+ this.content = data
+ if (data.type == 1) {
+
+ } else if (data.type == 2) {
+ let fileArray = data.fileUrl
+ 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))
+ }
+ }
+ }
+}
+</script>
+
+<style scoped>
+.content-view{
+ width: 100%;
+ height: 77vh;
+}
+
+.start{
+ width: 100%;
+ height: 100%;
+}
+
+.start-img, .end-img {
+ width: 100%;
+ height: 100%;
+}
+
+.start-button-group {
+ position: relative;
+ top: -25%;
+ left: 42%;
+}
+</style>
diff --git a/vue.config.js b/vue.config.js
index 73b8a3f..50896ca 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,7 +1,7 @@
module.exports = {
//路径前缀
publicPath: "/",
- lintOnSave: true,
+ lintOnSave: false,
productionSourceMap: false,
chainWebpack: (config) => {
//忽略的打包文件
--
Gitblit v1.9.3