预览页

guoshilong

2023-03-17 a533c94a9ee64d8b1fdf322170562d4bce1c88b5

预览页

 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"
  },

 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>

 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

 src/views/modules/function.vue

@@ -1,27 +1,30 @@
<template>
  <div>

    {{ modules.id}}--{{modules.name}}
    <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 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="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,9 +44,19 @@
      <!--右侧预览-->
      <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>
@@ -57,6 +70,38 @@
          <!--视频-->
          <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>
          <!--结束页-->
          <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: '',
      // 是否展示弹框
@@ -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.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>

 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>

 src/views/modules/modulesView.vue

New file
@@ -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>

 vue.config.js

@@ -1,7 +1,7 @@
module.exports = {
  //路径前缀
  publicPath: "/",
  lintOnSave: true,
  lintOnSave: false,
  productionSourceMap: false,
  chainWebpack: (config) => {
    //忽略的打包文件