Merge branch 'dev' of http://39.105.222.208:1024/compliance_management/ruoyi-ui into dev

# Conflicts: # src/views/system/orginfo/index.vue

Merge branch 'dev' of http://39.105.222.208:1024/compliance_management/ruoyi-ui into dev
# Conflicts: # src/views/system/orginfo/index.vue
雷海东
package.json
src/assets/images/home.png
src/main.js
src/router/index.js
src/views/compliancemanagement/compliancetraining/trainingcourse/index.vue
src/views/compliancemanagement/compliancetraining/trainingcourse/play.vue
src/views/index.vue
src/views/system/orginfo/index.vue
src/views/system/orginfo/orginfoCertificate/index.vue
--- a/package.json
查看文件 @c13e48e
+++ b/package.json
查看文件 @c13e48e
@@ -53,12 +53,14 @@
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
+    "video.js": "^8.16.1",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",
     "vue-pdf": "^4.3.0",
     "vue-router": "3.4.9",
+    "vue-video-player": "^5.0.2",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0",
     "xml-js": "1.6.11"
--- a/src/assets/images/home.png 0 → 100644
查看文件 @c13e48e
+++ b/src/assets/images/home.png 0 → 100644
查看文件 @c13e48e
--- a/src/main.js
查看文件 @c13e48e
+++ b/src/main.js
查看文件 @c13e48e
@@ -38,6 +38,10 @@ import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
+// import VideoPlayer from 'vue-video-player'
+// // import 'vue-video-player/src/custom-theme.css'
+// import 'video.js/dist/video-js.css'
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
@@ -62,6 +66,7 @@ Vue.component('ImagePreview', ImagePreview)
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)
+// Vue.use(VideoPlayer)
 DictData.install()
 /**
--- a/src/router/index.js
查看文件 @c13e48e
+++ b/src/router/index.js
查看文件 @c13e48e
@@ -113,8 +113,20 @@ export const constantRoutes = [
         meta: { title: '证照管理', icon: '' }
       }
     ]
+  },
+  {
+    path: '/compliance/compliancemanagement/compliancetraining',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: 'trainingcourse/play',
+        component: () => import('@/views/compliancemanagement/compliancetraining/trainingcourse/play'),
+        name: 'orginfoCertificate',
+        meta: { title: '培训课程', icon: '' }
+      }
+    ]
   }
-  // /contract/compliancemanagement/orginfoCertificate
 ]
 // 动态路由，基于用户权限动态去加载
--- a/src/views/compliancemanagement/compliancetraining/trainingcourse/index.vue
查看文件 @c13e48e
+++ b/src/views/compliancemanagement/compliancetraining/trainingcourse/index.vue
查看文件 @c13e48e
@@ -107,6 +107,11 @@
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:trainingcourse:remove']"
           >删除</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            @click="handlePlayer(scope.row)"
+          >播放视频</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -229,13 +234,17 @@ export default {
         id: [
           { required: true, message: "不能为空", trigger: "blur" }
         ]
-      }
+      },
     };
   },
   created() {
     this.getList();
   },
   methods: {
+//视频播放
+    handlePlayer(){
+      this.$router.push({ path: '/compliance/compliancemanagement/compliancetraining/trainingcourse/play'});
+    },
     /** 查询【请填写功能名称】列表 */
     getList() {
       this.loading = true;
--- a/src/views/compliancemanagement/compliancetraining/trainingcourse/play.vue 0 → 100644
查看文件 @c13e48e
+++ b/src/views/compliancemanagement/compliancetraining/trainingcourse/play.vue 0 → 100644
查看文件 @c13e48e
+<template>
+    <div class="info">
+      <div class="container">
+        <div class="play">
+          <el-row>
+            <el-col :span="24">
+              <video-player
+                id="video"
+                class="video-player vjs-custom-skin"
+                ref="videoPlayer"
+                @ended="videoEnded"
+              @timeupdate="videoTimeUp"
+              @loadeddata="videoLoaded"
+              @seeking="videoSeeking"
+              @seeked="videoSeeked"
+                :events="['seeking', 'seeked']"
+                :playsinline="true"
+                :options="playerOptions"
+              ></video-player>
+              <!-- <h3 id="text-progress">{{ this.progress }}</h3> -->
+            </el-col>
+            <!-- <el-col :span="6" class="text"> -->
+            <!-- </el-col> -->
+          </el-row>
+        </div>
+      </div>
+    </div>
+  </template>  
+  
+  <script>
+  import Vue from 'vue'
+  import VideoPlayer from 'vue-video-player'
+import 'video.js/dist/video-js.css'
+import 'vue-video-player/src/custom-theme.css'
+Vue.use(VideoPlayer)
+  export default  {
+    data() {
+    return {
+            classHour : [],
+            data : [],
+            userId :'',
+            videoInformation : [],
+            progress : '0.00%',
+            durationTime : '' ,// 视频总时常
+            currentTime : '' ,// 当前播放进度时长
+            saveDurationTime : '', // 视频总时常
+            saveCurrentTime:'', // 当前播放进度时长
+            isShowSubs: false,
+            recodrTime :null,
+            playerOptions:{  
+                playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+                autoplay: false, //如果true,浏览器准备好时开始回放。
+                muted: false, // 默认情况下将会消除任何音频。
+                loop: false, // 导致视频一结束就重新开始。
+                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+                language: 'zh-CN',
+                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+                sources: [
+                    {
+                    type: 'video/mp4', //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
+                    src: 'http://vjs.zencdn.net/v/oceans.mp4' //url地址
+                    }
+                ],
+                poster: '', //你的封面地址
+                // width: document.documentElement.clientWidth, //播放器宽度
+                notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+                controlBar: {
+                    timeDivider: true,
+                    durationDisplay: true,
+                    remainingTimeDisplay: false,
+                    fullscreenToggle: true //全屏按钮
+                }
+            }
+        }
+    },
+    created() {
+    },
+    methods: {
+    // 视频信息加载完成，获取总时长，若接口返回进度，断点播放
+    videoLoaded(item) {
+      this.durationTime = item.cache_.duration
+      this.videoInformation = item
+      // console.log('progress', this.progress)
+      if (this.progress > '0.00%') {
+        item.currentTime(Number(this.currentTime))
+      }
+      // console.log('视频信息videoLoaded：', this.videoInformation)
+    },
+    // 当前播放进度
+    videoTimeUp(item) {
+      this.currentTime = item.cache_.currentTime
+      this.progress = ((this.currentTime.toFixed(2) / item.cache_.duration.toFixed(2)) * 100).toFixed(2) + '%'
+      // console.log('当前播放进度', item)
+    },
+    // 正在拖动
+    videoSeeking(item) {
+      // console.log('正在拖动',item)
+      this.isSeeking = true
+    },
+    // 拖动结束
+    videoSeeked(item) {
+      // console.log('拖动结束',item)
+      this.isSeeking = false
+    },
+  
+    // 点击播放
+    videoPlay() {
+      //清除定时器
+      if (this.pauseTimer) {
+        clearTimeout(this.pauseTimer)
+      }
+    },
+    // 触发暂停
+    videoPause(item) {
+      //利用定时器延迟
+      this.pauseTimer = setTimeout(() => {
+        if (this.isVideoEnd) return
+        if (this.isSeeking) return
+        // 展示蒙层
+        this.isShowSubs = true
+      }, 100)
+    },
+    // 播放结束
+    videoEnded() {
+      this.isVideoEnd = true
+    }
+  }
+  }
+  </script>
+  <style lang="scss" scoped>
+  $width: 1140px;
+  .info {
+    width: 100%;
+  }
+  .container {
+    width: $width;
+    margin: auto;
+    .breadcrumb {
+      padding-top: 20px;
+      padding-bottom: 20px;
+    }
+    .play {
+      box-shadow: 0 4px 8px 0 rgba(28, 31, 33, 0.1);
+      background-color: #26262b;
+      .text {
+        font-size: 15px;
+        color: #fff;
+        text-align: left;
+        .title {
+          padding: 12px 15px;
+        }
+        .teacher {
+          padding: 12px 0 12px 10px;
+          background: #2d2d2d;
+        }
+        .list {
+          height: 393px;
+          width: 283px;
+          .name1 {
+            cursor: pointer;
+            background: #2d2d2d;
+            font-size: 15px;
+            padding: 10px 0 10px 47px;
+            margin-top: 2px;
+          }
+          .name2 {
+            cursor: pointer;
+            color: rgb(61, 231, 112);
+            background: #2d2d2d;
+            font-size: 15px;
+            padding: 10px 0 10px 47px;
+            margin-top: 2px;
+          }
+        }
+      }
+    }
+   // .biref {
+   //   box-shadow: 0 4px 8px 0 rgba(28, 31, 33, 0.1);
+   //   background-color: #ffffff;
+   //   font-size: 15px;
+   //   text-align: left;
+   //   color: #5e5e5e;
+   //   padding: 25px 20px;
+   //   margin: 30px 0;
+    //  img {
+    //    vertical-align: middle;
+   //     margin-right: 5px;
+   //   }
+   // }
+ }
+  </style>
+  <style>
+  body {
+    background-color: #f7f9fc !important;
+    /* background-color: #d7e4f7 !important; */
+  }
+  .vjs-custom-skin > .video-js .vjs-big-play-button {
+    width: 70px;
+    border-radius: 50%;
+  }
+  .el-breadcrumb__inner {
+    color: #2c3e50 !important;
+  }
+  .el-scrollbar__wrap {
+    overflow: hidden;
+    position: relative;
+  }
+  </style>
--- a/src/views/index.vue
查看文件 @c13e48e
+++ b/src/views/index.vue
查看文件 @c13e48e
 <template>
   <div class="app-container home">
     <el-row :gutter="20">
-      <el-col :sm="24" :lg="12" style="padding-left: 20px">
+      <!-- <el-col :sm="24" :lg="12" style="padding-left: 20px">
         <h2>合规管理系统</h2>
-        </el-col>
+        </el-col> -->
+        <img src="@/assets/images/home.png" style="width: 100%;"/>
     </el-row>
   </div>
 </template>
--- a/src/views/system/orginfo/index.vue
查看文件 @c13e48e
+++ b/src/views/system/orginfo/index.vue
查看文件 @c13e48e
@@ -198,9 +198,8 @@ export default {
   },
   methods: {
     toOrginfoCertificateList(row){
-    console.log('row=====',row)
-    this.$router.push({ path: '/system/orginfo/orginfoCertificate/orginfoCertificate/index', query: {orgcode: row.orgcode }});
-  },
+      this.$router.push({ path: '/system/orginfo/orginfoCertificate/orginfoCertificate/index', query: {orgcode: row.orgcode }});
+    },
     /** 查询【请填写功能名称】列表 */
     getList() {
       this.loading = true;
--- a/src/views/system/orginfo/orginfoCertificate/index.vue
查看文件 @c13e48e
+++ b/src/views/system/orginfo/orginfoCertificate/index.vue
查看文件 @c13e48e
@@ -17,7 +17,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="认证机构名称" prop="certificationName">
+      <el-form-item label="认证机构名称" prop="certificationName" label-width="150">
         <el-input
           v-model="queryParams.certificationName"
           placeholder="请输入认证机构名称"
@@ -33,7 +33,7 @@
           placeholder="请选择发证时间">
         </el-date-picker>
       </el-form-item>
-      <el-form-item label="证书有效期" prop="certificateValidityPeriod">
+      <el-form-item label="证书有效期" prop="certificateValidityPeriod" label-width="100px">
         <el-date-picker clearable
           v-model="queryParams.certificateValidityPeriod"
           type="date"
@@ -41,14 +41,14 @@
           placeholder="请选择证书有效期">
         </el-date-picker>
       </el-form-item>
-      <el-form-item label="证书附件" prop="certificateAttachment">
+      <!-- <el-form-item label="证书附件" prop="certificateAttachment">
         <el-input
           v-model="queryParams.certificateAttachment"
           placeholder="请输入证书附件"
           clearable
           @keyup.enter.native="handleQuery"
         />
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -118,8 +118,7 @@
         </template>
       </el-table-column>
       <el-table-column label="证书附件" align="center" prop="certificateAttachment" >
-        <template slot-scope="scope">
-          
+        <template slot-scope="scope">   
           <img src="@/assets/images/PDF.png" @click="openFile(scope.row.certificateAttachment)" width="40px" height="auto" style="cursor: pointer"/>
         </template>
       </el-table-column>
@@ -151,9 +150,12 @@
       @pagination="getList"
     />
+    <el-dialog title="预览" :visible.sync="dialogVisible" width="50%" center :before-close="handleClose">
+      <vue-pdf :src="currentFile" type="application/pdf" width="100%" height="800px" />
+    </el-dialog>
     <!-- 添加或修改单位证照表对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
         <el-form-item label="单位编号" prop="orgcode">
           <el-input v-model="this.orgcode" placeholder="请输入单位编号" :disabled="true"/>
         </el-form-item>
@@ -225,6 +227,9 @@ import { getToken } from "@/utils/auth";
 import VuePdf from 'vue-pdf';
 export default {
   name: "OrginfoCertificate",
+  components: {
+    VuePdf
+  },
   data() {
     return {
       // 设置上传的请求头部
@@ -233,6 +238,9 @@ export default {
       url: process.env.VUE_APP_BASE_API + "/common/uploads",
       // urlhead: "http://joycart.zgftlm.com",
       urlhead:process.env.VUE_APP_BASE_API,
+      baseUrl:process.env.VUE_APP_BASE_API,
+      dialogVisible:false,
+      currentFile:'',
       fileList: [],
       file:[],
       // 按钮loading
@@ -304,7 +312,7 @@ export default {
   methods: {
     //根据单位编号查询列表
     getorgcode(orgcode){
-      console.log(orgcode)
+      // console.log(orgcode)
       selectByOrgnCode(orgcode).then(response =>{
         console.log(response.data)
         this.orginfoCertificateList = response.data
@@ -429,12 +437,15 @@ export default {
     },
     openFile(filePath) {
-      
-      this.currentFile = this.urlhead+filePath;
+      this.currentFile = this.baseUrl+filePath;
       console.log(this.currentFile)
       this.dialogVisible = true; 
     },
+    handleClose() {
+        this.currentFile = ''
+        this.dialogVisible = false
+      },
     beforeUpload(file) {
       const isPDF = file.type === 'application/pdf';
     const isLt5M = file.size / 1024 / 1024 < 5;