更新调查列表

package.json

@@ -43,26 +43,28 @@
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.18.1",
     "clipboard": "2.0.4",
-    "crypto-js": "^4.0.0",
     "core-js": "3.6.5",
+    "crypto-js": "^4.0.0",
     "echarts": "4.2.1",
     "element-ui": "2.13.2",
     "file-saver": "2.0.1",
-    "js-beautify": "1.10.2",
     "fuse.js": "3.4.4",
+    "js-beautify": "1.10.2",
     "js-cookie": "2.2.0",
     "jsencrypt": "3.0.0-rc.1",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "quill": "1.3.7",
     "screenfull": "4.2.0",
     "sortablejs": "1.8.4",
+    "v-viewer": "^1.6.4",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
-    "quill": "1.3.7",
     "vue-cropper": "0.4.9",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
+    "vue-video-player": "^5.0.2",
     "vuedraggable": "2.20.0",
     "vuex": "3.1.0"
   },

src/main.js

@@ -4,6 +4,15 @@ import Cookies from 'js-cookie'
 
 import 'normalize.css/normalize.css' // a modern alternative to CSS resets
 
+// 图片方法的组件
+import Viewer from 'v-viewer'
+import 'viewerjs/dist/viewer.css'
+
+//视频播放组件
+import VideoPlayer from 'vue-video-player'
+require('video.js/dist/video-js.css')
+require('vue-video-player/src/custom-theme.css')
+
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
 
@@ -52,6 +61,30 @@ Vue.component('RightToolbar', RightToolbar)
 
 Vue.use(permission)
 
+//视频播放组件
+Vue.use(VideoPlayer)
+
+// 图片放大的组件
+Vue.use(Viewer)
+Viewer.setDefaults({
+  Options: {
+    'inline': true,
+    'button': true,
+    'navbar': true,
+    'title': true,
+    'toolbar': true,
+    'tooltip': true,
+    'movable': true,
+    'zoomable': true,
+    'rotatable': true,
+    'scalable': true,
+    'transition': true,
+    'fullscreen': true,
+    'keyboard': true,
+    'url': 'data-source'
+  }
+})
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

src/views/backstage/job/detail.vue

@@ -20,12 +20,42 @@
         <div style="margin-top: 20px" v-if="item.ttarget.type=='2'"><span>减分项:</span><span style="margin-left: 20px">{{item.ttarget.plusReduceItem}}</span></div>
         <div style="margin-top: 20px"><span>每项分值:</span><span style="margin-left: 20px">{{item.ttarget.plusReduceItemEvery}}分</span></div>
 
-        <div style="margin-top: 20px" v-for="image in item.ttarget.tjobPicVedios">{{image.url}}图片（需分类普通问题亮点）备注</div>
-        <div style="margin-top: 20px">视频</div>
+        <div style="margin-top: 20px">
+          <span style="color: red">注：备注黑色为普通；有问题的为红色；有亮点的为蓝色</span>
+        </div>
+        <div style="margin-top: 20px;margin-left: 60px" >
+
+            <div v-viewer v-for="image in item.tjobPicVedios"  v-if="image.mediaType == '1'"
+                 style="display: inline-block; width: 20%; margin-left: 10px;vertical-align: middle;text-align: center;">
+              <img
+                :src="image.url"
+                style="width: 100px;height: 100px; cursor:pointer"/>
+              <div style="margin-top: 20px" v-if="image.type == null">备注：{{image.remark}}</div>
+              <div style="margin-top: 20px" v-else>
+                <div v-if="image.type == '1'? imageColor = 'red' : imageColor = 'blue'" :style="{color:imageColor}">备注：{{image.remark}}</div>
+              </div>
+            </div>
+
+
+          <div v-for="image in item.tjobPicVedios" v-if="image.mediaType == '2'" style="display: inline-block; width: 20%; margin-left: 10px;vertical-align: middle;text-align: center;">
+
+            <div >
+                 <video-player class="video-player vjs-custom-skin"
+                               ref="videoPlayer"
+                               :playsinline="true"
+                               :options="playerOptions"
+                 ></video-player>
+               <div style="margin-top: 20px" v-if="image.type == null">备注：{{image.remark}}</div>
+               <div style="margin-top: 20px" v-else>
+                  <div v-if="image.type == '1'? imageColor = 'red' : imageColor = 'blue'" :style="{color:imageColor}">备注：{{image.remark}}</div>
+               </div>
+            </div>
+
+          </div>
 
+      </div>
 
         <el-divider></el-divider>
-      </div>
 
 
       <div style="font-size: 20px;margin-top: 50px">
@@ -44,7 +74,7 @@
 
     </div>
 
-
+    </div>
 
 
   </div>
@@ -57,6 +87,7 @@
       name: "jobDetail",
       data(){
           return{
+            imageColor:'black',
             jobId:null,
             form:{},
             targetList:[],
@@ -64,6 +95,31 @@
             reduceScoreCount:0,
             isCheckFlag: false,
             gps:'',
+            // 视频播放
+            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: "",
+                src: 'http://vjs.zencdn.net/v/oceans.mp4'//url地址
+                // src: "" //url地址
+              }],
+              poster: "", //你的封面地址
+              width: '400px', // 播放器宽度
+              notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+              controlBar: {
+                timeDivider: true,
+                durationDisplay: true,
+                remainingTimeDisplay: false,
+                fullscreenToggle: true  //全屏按钮
+              }
+            }
           }
       },
       created() {
@@ -87,10 +143,21 @@
           this.$router.go(-1)
           // this.$router.push("/job/job")
         },
+        apply(){
+          // this.$refs.videoPlayer.play()
+          // this.playerOptions.width = 600
+        }
       }
     }
 </script>
 
-<style scoped>
-
+<style scoped >
+  /*.video-js .vjs-icon-placeholder {*/
+  /*  width: 80%;*/
+  /*  height: 80%;*/
+  /*  display: block;*/
+  /*}*/
+  /* .video-player {
+    width: 50%;
+  } */
 </style>