视频回放

src/apps/AppIntelligentSecurity/SlwVideo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="slw">
     <iframe v-if="isShow" :id="iframeId" style="width: 100%; height: 100%;" :src="`https://cdn.cunwuyun.cn/slw2.0/index.html?url=${src}`"></iframe>
-    <div class="slw-bottom" v-if="isShowBar">
+    <div class="slw-bottom" :class="[isShowBar ? '' : 'active']" @click.stop="() =>{}">
       <Timeline class="Timeline" v-if="times.length" :times="times" @replay="onReplay" :isLiveing="isLiveing" ref="timeline" :style="{width: width}"></Timeline>
       <div class="action-bar">
         <div class="left">
@@ -10,7 +10,7 @@
               :src="isPause ? 'https://cdn.cunwuyun.cn/slw2.0/images/play.png' : 'https://cdn.cunwuyun.cn/slw2.0/images/pause.png'"
               @click="changePlayStatus">
           </div>
-          <div
+          <!-- <div
             class="volume"
             @mouseleave.stop="isShowVolume = false">
             <img 
@@ -18,7 +18,7 @@
               src="https://cdn.cunwuyun.cn/slw2.0/images/sound.png">
             <div class="volume-slider" :class="[isShowVolume ? 'active' : '']">
             </div>
-          </div>
+          </div> -->
           <div class="play-status">
             <div class="live" v-if="isLiveing">
               <span class="label"></span>
@@ -29,10 +29,14 @@
           </div>
         </div>
         <div class="right">
-          <img src="https://cdn.cunwuyun.cn/slw2.0/images/date.png" @click="isShowDate = true">
+          <picker mode="date" @change="onDateChange">
+            <img src="https://cdn.cunwuyun.cn/slw2.0/images/date.png">
+          </picker>
+          <!-- <img src="https://cdn.cunwuyun.cn/slw2.0/images/date.png" @click="isShowDate = true"> -->
         </div>
       </div>
     </div>
+    <u-picker mode="time" v-model="isShowDate" :params="params" @confirm="onDateChange"></u-picker>
   </div>
 </template>
 
@@ -54,13 +58,19 @@
         liveingUrl: '',
         replayUrl: '',
         times: [],
+				params: {
+					year: true,
+					month: true,
+					day: true,
+					hour: false,
+					minute: false,
+					second: false
+				},
+        isShowDate: false,
         isPause: false,
         isShowVolume: false,
         isShowBar: true,
         date: '',
-        form: {
-          date: ''
-        },
         isLiveing: true
       }
     },
@@ -92,7 +102,6 @@
     },
 
     mounted () {
-      this.form.date = this.$dayjs(new Date()).format('YYYY-MM-DD')
       this.date = this.$dayjs(new Date()).format('YYYY-MM-DD')
       this.getSlwPlaybackTime()
       this.width = document.querySelector(`.slw`).offsetWidth + 'px'
@@ -104,7 +113,20 @@
 
     methods: {
       backLiveing () {
+        this.date = this.$dayjs(new Date()).format('YYYY-MM-DD')
         this.getLiveingUrl()
+        this.getSlwPlaybackTime()
+      },
+
+      onClick () {
+        alert(2)
+      },
+
+      onDateChange (e) {
+        this.date = `${e.detail.value}`
+        // this.date = `${e.year}-${e.month}-${e.day}`
+
+        this.getSlwPlaybackTime()
       },
 
       onReplay (e) {
@@ -112,8 +134,8 @@
         this.$http.post(`/app/appzyvideoequipment/getSlwPlaybackUrl`, null, {
           params: {
             ids: this.id,
-            startTime: `${this.form.date} ${e}`,
-            endTime: this.form.date + ` ${Number(e.substr(0, 2)) + 6 > 9 ? Number(e.substr(0, 2)) + 6 : '0' + (Number(e.substr(0, 2)) + 6)}:00:00`,
+            startTime: `${this.date} ${e}`,
+            endTime: this.date + ` ${Number(e.substr(0, 2)) + 6 > 9 ? Number(e.substr(0, 2)) + 6 : '0' + (Number(e.substr(0, 2)) + 6)}:00:00`,
             nvrCodes: ''
           }
         }).then(res => {
@@ -144,7 +166,7 @@
       },
 
       getSlwPlaybackTime () {
-        this.isLoading = true
+        this.$loading()
         this.$http.post(`/app/appzyvideoequipment/getSlwPlaybackTime`, null, {
           params: {
             ids: this.id,
@@ -169,10 +191,10 @@
               })
             }
 
-            this.isLoading = false
+            this.$hideLoading()
           }
         }).catch(() => {
-          this.isLoading = false
+          this.$hideLoading()
         })
       },
 
@@ -220,6 +242,10 @@
       width: 100%;
       transition: all ease-in-out 0.5s;
 
+      &.active {
+        transform: translateY(100%);
+      }
+
       .action-bar {
         display: flex;
         align-items: center;

src/apps/AppIntelligentSecurity/components/Timeline.vue

@@ -1,13 +1,14 @@
 <template>
-  <div :class="wrapper" class="canvas" v-if="isInit" @click="onClick">
+  <div :class="wrapper" class="canvas" v-if="isInit" style="height: 52px">
     <canvas
       class="canvas"
       :id="id"
       :canvas-id="id"
-      :style="{height: '52px'}"
+      :style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}"
       v-if="canvasWidth"
       :width="canvasWidth"
-      height="52">
+      @click.stop="onClick"
+      :height="canvasHeight">
     </canvas>
     <img
       class="drag-img"
@@ -85,7 +86,7 @@
       },
 
       onClick (e) {
-        this.x = e.target.x
+        this.x = e.target.y
         clearInterval(this.timer)
         this.timer = null
         const time = this.secTotime((24 * 60 * 60) / this.canvasWidth * this.x)
@@ -135,14 +136,11 @@
         this.$nextTick(() => {
           this.isInit = true
           this.$nextTick(() => {
-            this.canvasWidth = document.querySelector(`.${this.wrapper}`).offsetWidth
+            this.canvasWidth = uni.getSystemInfoSync().windowHeight
             this.canvasHeight = document.querySelector(`.${this.wrapper}`).offsetHeight 
-
             this.$nextTick(() => {
               const el = document.querySelector(`#${this.id}`)
               this.ctx = uni.createCanvasContext(`${this.id}`)
-              // this.ctx.width  = document.querySelector('.canvas').offsetWidth
-              // this.ctx.height  = document.querySelector('.canvas').offsetHeight
 
               if (this.x > 0) {
                 this.x = this.ratioW * this.canvasWidth