预览页整合flipbook

guoshilong

2023-03-16 6926dbab01be34206f8ed9940e60efea5f77b0a1

预览页整合flipbook

 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": {

 src/api/modules/function.js

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


 src/api/modules/modules.js

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


 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),

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

 src/views/controller.vue

File was renamed from src/views/controllerPage.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>

 src/views/funcView.vue

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

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

 src/views/view.vue

File was renamed from src/views/viewPage.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>