1078-支持设备录像检索播放

src/main/java/com/genersoft/iot/vmp/jt1078/proc/request/J1205.java

@@ -7,6 +7,7 @@ import com.genersoft.iot.vmp.jt1078.proc.response.Rs;
 import com.genersoft.iot.vmp.jt1078.service.Ijt1078Service;
 import com.genersoft.iot.vmp.jt1078.session.Session;
 import com.genersoft.iot.vmp.jt1078.session.SessionManager;
+import com.genersoft.iot.vmp.utils.DateUtil;
 import io.netty.buffer.ByteBuf;
 import io.netty.buffer.ByteBufUtil;
 import org.springframework.context.ApplicationEvent;
@@ -35,8 +36,10 @@ public class J1205 extends Re {
         for (int i = 0; i < size; i++) {
             JRecordItem item = new JRecordItem();
             item.setChannelId(buf.readUnsignedByte());
-            item.setStartTime(ByteBufUtil.hexDump(buf.readSlice(6)));
+            String startTime = ByteBufUtil.hexDump(buf.readSlice(6));
-            item.setEndTime(ByteBufUtil.hexDump(buf.readSlice(6)));
+            item.setStartTime(DateUtil.jt1078Toyyyy_MM_dd_HH_mm_ss(startTime));
+            String endTime = ByteBufUtil.hexDump(buf.readSlice(6));
+            item.setEndTime(DateUtil.jt1078Toyyyy_MM_dd_HH_mm_ss(endTime));
             item.setWarn(buf.readLong());
             item.setMediaType(buf.readUnsignedByte());
             item.setStreamType(buf.readUnsignedByte());

src/main/java/com/genersoft/iot/vmp/jt1078/service/impl/jt1078ServiceImpl.java

@@ -241,6 +241,14 @@ public class jt1078ServiceImpl implements Ijt1078Service {
     public void stopPlay(String phoneNumber, Integer channelId) {
         String playKey = VideoManagerConstants.INVITE_INFO_1078_PLAY + phoneNumber + ":" + channelId;
         dynamicTask.stop(playKey);
+        // 清理回调
+        List<GeneralCallback<StreamInfo>> generalCallbacks = inviteErrorCallbackMap.get(playKey);
+        if (generalCallbacks != null && !generalCallbacks.isEmpty()) {
+            for (GeneralCallback<StreamInfo> callback : generalCallbacks) {
+                callback.run(InviteErrorCode.ERROR_FOR_FINISH.getCode(), InviteErrorCode.ERROR_FOR_FINISH.getMsg(), null);
+            }
+        }
+        jt1078Template.checkTerminalStatus(phoneNumber);
         StreamInfo streamInfo = (StreamInfo) redisTemplate.opsForValue().get(playKey);
         // 发送停止命令
         J9102 j9102 = new J9102();
@@ -256,13 +264,7 @@ public class jt1078ServiceImpl implements Ijt1078Service {
             mediaServerService.closeRTPServer(streamInfo.getMediaServerId(), streamInfo.getStream());
             redisTemplate.delete(playKey);
         }
-        // 清理回调
+
-        List<GeneralCallback<StreamInfo>> generalCallbacks = inviteErrorCallbackMap.get(playKey);
-        if (generalCallbacks != null && !generalCallbacks.isEmpty()) {
-            for (GeneralCallback<StreamInfo> callback : generalCallbacks) {
-                callback.run(InviteErrorCode.ERROR_FOR_FINISH.getCode(), InviteErrorCode.ERROR_FOR_FINISH.getMsg(), null);
-            }
-        }
     }
 
     @Override
@@ -445,7 +447,7 @@ public class jt1078ServiceImpl implements Ijt1078Service {
 
     @Override
     public void stopPlayback(String phoneNumber, Integer channelId) {
-        playbackControl(phoneNumber, channelId, 2, null, String.valueOf(0));
+        playbackControl(phoneNumber, channelId, 2, null, null);
     }
 
     private Map<String, GeneralCallback<String>> fileUploadMap = new ConcurrentHashMap<>();

web_src/src/components/JTChannelList.vue

@@ -186,7 +186,6 @@ export default {
       this.isLoging = true;
       let channelId = itemData.channelId;
       console.log("通知设备推流1：" + this.device.phoneNumber + " : " + channelId);
-      console.log(this.device);
       this.$axios({
         method: 'get',
         url: '/api/jt1078/live/start',
@@ -196,12 +195,9 @@ export default {
           type: 0,
         }
       }).then((res)=> {
-        console.log(res)
         this.isLoging = false;
         if (res.data.code === 0) {
-
           setTimeout(() => {
-
             let snapId = this.device.phoneNumber + "_" + channelId;
             this.loadSnap[this.device.phoneNumber + channelId] = 0;
             this.getSnapErrorEvent(snapId)
@@ -232,10 +228,7 @@ export default {
       }
     },
     queryRecords: function (itemData) {
-      let deviceId = this.deviceId;
+      this.$router.push(`/jtRecordDetail/${this.device.phoneNumber}/${itemData.channelId}`)
-      let channelId = itemData.channelId;
-
-      this.$router.push(`/gbRecordDetail/${deviceId}/${channelId}`)
     },
     queryCloudRecords: function (itemData) {
       let deviceId = this.deviceId;
@@ -244,7 +237,6 @@ export default {
       this.$router.push(`/cloudRecordDetail/rtp/${deviceId}_${channelId}`)
     },
     stopDevicePush: function (itemData) {
-      var that = this;
       this.$axios({
         method: 'get',
         url: '/api/jt1078/live/stop',
@@ -252,14 +244,15 @@ export default {
           phoneNumber: this.device.phoneNumber,
           channelId: itemData.channelId,
         }
-      }).then(function (res) {
+      }).then((res)=> {
-        that.initData();
+        console.log(res)
-      }).catch(function (error) {
+        if (res.data.code === 0) {
-        if (error.response.status === 402) { // 已经停止过
+          this.initData();
-          that.initData();
+        }else {
-        } else {
+          this.$message.error(res.data.msg);
-          console.log(error)
         }
+      }).catch(function (error) {
+        console.error(error)
       });
     },
     getSnap: function (row) {
@@ -291,18 +284,6 @@ export default {
         this.initData();
       })
     },
-    changeSubchannel(itemData) {
-      this.beforeUrl = this.$router.currentRoute.path;
-
-      var url = `/${this.$router.currentRoute.name}/${this.$router.currentRoute.params.deviceId}/${itemData.channelId}`
-      this.$router.push(url).then(() => {
-        this.searchSrt = "";
-        this.channelType = "";
-        this.online = "";
-        this.initParam();
-        this.initData();
-      })
-    },
     search: function () {
       this.currentPage = 1;
       this.total = 0;
@@ -331,66 +312,6 @@ export default {
         setTimeout(this.getList, 200)
       })
     },
-    treeNodeClickEvent: function (device, data, isCatalog) {
-      console.log(device)
-      if (!!!data.channelId) {
-        this.parentChannelId = device.deviceId;
-      } else {
-        this.parentChannelId = data.channelId;
-      }
-      this.initData();
-    },
-    // 保存
-    handleSave(row) {
-      if (row.location) {
-        const segements = row.location.split(",");
-        if (segements.length !== 2) {
-          this.$message.warning("位置信息格式有误，例：117.234,36.378");
-          return;
-        } else {
-          row.customLongitude = parseFloat(segements[0]);
-          row.custom_latitude = parseFloat(segements[1]);
-          if (!(row.longitude && row.latitude)) {
-            this.$message.warning("位置信息格式有误，例：117.234,36.378");
-            return;
-          }
-        }
-      } else {
-        delete row.longitude;
-        delete row.latitude;
-      }
-      Object.keys(row).forEach(key => {
-        const value = row[key];
-        if (value === null || value === undefined || (typeof value === "string" && value.trim() === "")) {
-          delete row[key];
-        }
-      });
-      this.$axios({
-        method: 'post',
-        url: `/api/device/query/channel/update/${this.deviceId}`,
-        params: row
-      }).then(response => {
-        if (response.data.code === 0) {
-          this.$message.success("修改成功！");
-          this.initData();
-        } else {
-          this.$message.error("修改失败！");
-        }
-      }).catch(_ => {
-        this.$message.error("修改失败！");
-      })
-    },
-    // 是否正在编辑
-    isEdit() {
-      let editing = false;
-      this.deviceChannelList.forEach(e => {
-        if (e.edit) {
-          editing = true;
-        }
-      });
-
-      return editing;
-    },
     // 编辑
     handleEdit(row) {
       this.$refs.channelEdit.openDialog(row, this.deviceId, () => {
@@ -406,57 +327,3 @@ export default {
   }
 };
 </script>
-
-<style>
-.videoList {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-}
-
-.video-item {
-  position: relative;
-  width: 15rem;
-  height: 10rem;
-  margin-right: 1rem;
-  background-color: #000000;
-}
-
-.video-item-img {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-  width: 100%;
-  height: 100%;
-}
-
-.video-item-img:after {
-  content: "";
-  display: inline-block;
-  position: absolute;
-  z-index: 2;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-  width: 3rem;
-  height: 3rem;
-  background-image: url("../assets/loading.png");
-  background-size: cover;
-  background-color: #000000;
-}
-
-.video-item-title {
-  position: absolute;
-  bottom: 0;
-  color: #000000;
-  background-color: #ffffff;
-  line-height: 1.5rem;
-  padding: 0.3rem;
-  width: 14.4rem;
-}
-</style>

web_src/src/components/JTRecordDetail.vue

@@ -0,0 +1,556 @@
+<template>
+	<div style="width: 100%">
+    <div class="page-header" >
+      <div class="page-title">
+        <el-page-header @back="goBack" content="部标录像"></el-page-header>
+      </div>
+    </div>
+		<el-container>
+      <el-aside width="300px">
+        <div class="record-list-box-box">
+          <el-date-picker size="mini" v-model="chooseDate" type="date" value-format="yyyy-MM-dd" placeholder="日期" @change="dateChange()"></el-date-picker>
+          <div class="record-list-box" v-loading="recordsLoading" :style="recordListStyle">
+            <ul v-if="detailFiles.length >0" class="infinite-list record-list" >
+              <li v-for="item in detailFiles" class="infinite-list-item record-list-item" >
+
+                <el-tag v-if="chooseFile !== item" @click="checkedFile(item)">
+                  <i class="el-icon-video-camera"  ></i>
+                  {{ moment(item.startTime).format('HH:mm:ss')}}-{{ moment(item.endTime).format('HH:mm:ss')}}
+                </el-tag>
+                <el-tag v-if="chooseFile === item" type="danger" >
+                  <i class="el-icon-video-camera"  ></i>
+                  {{ moment(item.startTime).format('HH:mm:ss')}}-{{ moment(item.endTime).format('HH:mm:ss')}}
+                </el-tag>
+                <i style="color: #409EFF;margin-left: 5px;" class="el-icon-download" @click="downloadRecord(item)" ></i>
+              </li>
+            </ul>
+          </div>
+          <div size="mini" v-if="detailFiles.length ==0" class="record-list-no-val" >暂无数据</div>
+        </div>
+
+      </el-aside>
+			<el-main style="padding-bottom: 10px;">
+        <div class="playBox" :style="playerStyle">
+          <player ref="recordVideoPlayer"
+                  :videoUrl="videoUrl"
+                  :error="videoError"
+                  :message="videoError"
+                  :hasAudio="hasAudio"
+                  style="max-height: 100%"
+                  fluent autoplay live ></player>
+        </div>
+        <div class="player-option-box">
+          <div>
+            <el-button-group >
+              <el-time-picker
+                size="mini"
+                is-range
+                align="left"
+                v-model="timeRange"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                range-separator="至"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                @change="timePickerChange"
+                placeholder="选择时间范围">
+              </el-time-picker>
+            </el-button-group>
+
+            <el-button-group >
+              <el-button size="mini" class="iconfont icon-zanting" title="开始" @click="gbPause()"></el-button>
+              <el-button size="mini" class="iconfont icon-kaishi" title="暂停" @click="gbPlay()"></el-button>
+              <el-dropdown size="mini" title="播放倍速"  @command="gbScale">
+                <el-button size="mini">
+                  倍速 <i class="el-icon-arrow-down el-icon--right"></i>
+                </el-button>
+                <el-dropdown-menu  slot="dropdown">
+                  <el-dropdown-item command="0.25">0.25倍速</el-dropdown-item>
+                  <el-dropdown-item command="0.5">0.5倍速</el-dropdown-item>
+                  <el-dropdown-item command="1.0">1倍速</el-dropdown-item>
+                  <el-dropdown-item command="2.0">2倍速</el-dropdown-item>
+                  <el-dropdown-item command="4.0">4倍速</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+              <el-button size="mini" class="iconfont icon-xiazai1" title="下载选定录像" @click="downloadRecord()"></el-button>
+              <el-button v-if="sliderMIn === 0 && sliderMax === 86400" size="mini" class="iconfont icon-slider" title="放大滑块" @click="setSliderFit()"></el-button>
+              <el-button v-if="sliderMIn !== 0 || sliderMax !== 86400" size="mini" class="iconfont icon-slider-right" title="恢复滑块" @click="setSliderFit()"></el-button>
+            </el-button-group>
+          </div>
+          <el-slider
+            class="playtime-slider"
+            v-model="playTime"
+            id="playtimeSlider"
+            :disabled="detailFiles.length === 0"
+            :min="sliderMIn"
+            :max="sliderMax"
+            :range="true"
+            :format-tooltip="playTimeFormat"
+            @change="playTimeChange"
+            :marks="playTimeSliderMarks">
+          </el-slider>
+          <div class="slider-val-box">
+            <div class="slider-val" v-for="item of detailFiles" :style="'width:' + getDataWidth(item) + '%; left:' + getDataLeft(item) + '%'"></div>
+          </div>
+        </div>
+
+			</el-main>
+		</el-container>
+    <recordDownload ref="recordDownload"></recordDownload>
+	</div>
+</template>
+
+
+<script>
+	import uiHeader from '../layout/UiHeader.vue'
+  import player from './common/jessibuca.vue'
+  import moment  from 'moment'
+  import recordDownload from './dialog/recordDownload.vue'
+  import JTDeviceService from "./service/JTDeviceService";
+	export default {
+		name: 'app',
+		components: {
+			uiHeader, player,recordDownload
+		},
+		data() {
+			return {
+        phoneNumber: this.$route.params.phoneNumber,
+        channelId: this.$route.params.channelId,
+        deviceService: new JTDeviceService(),
+        recordsLoading: false,
+        streamId: "",
+        hasAudio: false,
+			  detailFiles: [],
+        chooseDate: null,
+        videoUrl: null,
+        chooseFile: null,
+        streamInfo: null,
+        app: null,
+        mediaServerId: null,
+        ssrc: null,
+
+        sliderMIn: 0,
+        sliderMax: 86400,
+        autoPlay: true,
+        taskUpdate: null,
+        tabVal: "running",
+        recordListStyle: {
+			    height: this.winHeight + "px",
+          overflow: "auto",
+          margin: "10px auto 10px auto"
+        },
+        playerStyle: {
+			    "margin": "0 auto 20px auto",
+          "height": this.winHeight + "px",
+        },
+        winHeight: window.innerHeight - 240,
+        playTime: null,
+        timeRange: null,
+        startTime: null,
+        endTime: null,
+        playTimeSliderMarks: {
+			    0: "00:00",
+			    3600: "01:00",
+			    7200: "02:00",
+			    10800: "03:00",
+			    14400: "04:00",
+			    18000: "05:00",
+			    21600: "06:00",
+			    25200: "07:00",
+			    28800: "08:00",
+			    32400: "09:00",
+			    36000: "10:00",
+          39600: "11:00",
+			    43200: "12:00",
+			    46800: "13:00",
+			    50400: "14:00",
+			    54000: "15:00",
+			    57600: "16:00",
+			    61200: "17:00",
+			    64800: "18:00",
+			    68400: "19:00",
+          72000: "20:00",
+			    75600: "21:00",
+			    79200: "22:00",
+			    82800: "23:00",
+          86400: "24:00",
+        },
+			};
+		},
+		computed: {
+
+		},
+		mounted() {
+      this.recordListStyle.height = this.winHeight + "px";
+      this.playerStyle["height"] = this.winHeight + "px";
+      this.chooseDate = moment().format('YYYY-MM-DD')
+      this.dateChange();
+      window.addEventListener('beforeunload', this.stopPlayRecord)
+		},
+		destroyed() {
+			this.$destroy('recordVideoPlayer');
+      window.removeEventListener('beforeunload', this.stopPlayRecord)
+		},
+		methods: {
+      dateChange(){
+        if (!this.chooseDate) {
+          return;
+        }
+
+        this.setTime(this.chooseDate + " 00:00:00", this.chooseDate + " 23:59:59");
+        this.recordsLoading = true;
+        this.detailFiles = [];
+        this.$axios({
+          method: 'get',
+          url: '/api/jt1078/record/list',
+          params: {
+            phoneNumber: this.phoneNumber,
+            channelId: this.channelId,
+            startTime: this.startTime,
+            endTime: this.endTime,
+          }
+        }).then((res)=>{
+          this.recordsLoading = false;
+          if(res.data.code === 0) {
+            // 处理时间信息
+            this.detailFiles = res.data.data;
+          }else {
+            this.$message({
+              showClose: true,
+              message: res.data.msg,
+              type: "error",
+            });
+          }
+
+        }).catch((e)=> {
+          this.recordsLoading = false;
+          // that.videoHistory.searchHistoryResult = falsificationData.recordData;
+        });
+      },
+      moment: function (v) {
+        return moment(v)
+      },
+      setTime: function (startTime, endTime){
+        this.startTime = startTime;
+        this.endTime = endTime;
+        let start = (new Date(this.startTime).getTime() - new Date(this.chooseDate + " 00:00:00").getTime())/1000;
+        let end = (new Date(this.endTime).getTime() - new Date(this.chooseDate + " 00:00:00").getTime())/1000;
+        console.log(start)
+        console.log(end)
+        this.playTime = [start, end];
+        this.timeRange = [startTime, endTime];
+      },
+      videoError: function (e) {
+        console.log("播放器错误：" + JSON.stringify(e));
+      },
+      checkedFile(file){
+        this.chooseFile = file;
+        this.setTime(file.startTime, file.endTime);
+			  // 开始回放
+        this.playRecord()
+      },
+      playRecord: function () {
+
+        if (this.streamId !== "") {
+          this.stopPlayRecord(()=> {
+            this.streamId = "";
+            this.playRecord();
+          })
+        } else {
+          this.$axios({
+            method: 'get',
+            url: '/api/jt1078/playback/start/',
+            params: {
+              phoneNumber: this.phoneNumber,
+              channelId: this.channelId,
+              startTime: this.startTime,
+              endTime: this.endTime,
+              type: 0,
+              rate: 0,
+              playbackType: 0,
+              playbackSpeed: 0
+            }
+          }).then((res)=> {
+            if (res.data.code === 0) {
+              this.streamInfo = res.data.data;
+              this.app = this.streamInfo.app;
+              this.streamId = this.streamInfo.stream;
+              this.mediaServerId = this.streamInfo.mediaServerId;
+              this.ssrc = this.streamInfo.ssrc;
+              this.videoUrl = this.getUrlByStreamInfo();
+              this.hasAudio = this.streamInfo.tracks && this.streamInfo.tracks.length > 1
+            }else {
+              this.$message({
+                showClose: true,
+                message: res.data.msg,
+                type: "error",
+              });
+            }
+          });
+        }
+      },
+      gbPlay(){
+        console.log('前端控制：播放');
+        this.$axios({
+          method: 'get',
+          url: '/api/playback/resume/' + this.streamId
+        }).then((res)=> {
+          this.$refs["recordVideoPlayer"].play(this.videoUrl)
+        });
+      },
+      gbPause(){
+        console.log('前端控制：暂停');
+        this.$axios({
+          method: 'get',
+          url: '/api/playback/pause/' + this.streamId
+        }).then(function (res) {});
+      },
+      gbScale(command){
+        console.log('前端控制：倍速 ' + command);
+        this.$axios({
+          method: 'get',
+          url: `/api/playback/speed/${this.streamId }/${command}`
+        }).then(function (res) {});
+      },
+      downloadRecord: function (row) {
+        if (!row) {
+          let startTimeStr = moment(new Date(this.chooseDate + " 00:00:00").getTime() + this.playTime[0]*1000).format("YYYY-MM-DD HH:mm:ss");
+          let endTimeStr = moment(new Date(this.chooseDate + " 00:00:00").getTime() + this.playTime[1]*1000).format("YYYY-MM-DD HH:mm:ss");
+          console.log(startTimeStr);
+          console.log(endTimeStr);
+          row = {
+            startTime: startTimeStr,
+            endTime: endTimeStr
+          }
+        }
+        if (this.streamId !== "") {
+          this.stopPlayRecord(()=> {
+            this.streamId = "";
+            this.downloadRecord(row);
+          })
+        }else {
+          this.$axios({
+            method: 'get',
+            url: '/api/jt1078/playback/start/',
+            params: {
+              phoneNumber: this.phoneNumber,
+              channelId: this.channelId,
+              startTime: this.startTime,
+              endTime: this.endTime,
+              type: 0,
+              rate: 0,
+              playbackType: 0,
+              playbackSpeed: 0
+            }
+          }).then( (res)=> {
+            if (res.data.code === 0) {
+              let streamInfo = res.data.data;
+              this.$refs.recordDownload.openDialog(this.deviceId, this.channelId, streamInfo.app, streamInfo.stream, streamInfo.mediaServerId);
+            }else {
+              this.$message({
+                showClose: true,
+                message: res.data.msg,
+                type: "error",
+              });
+            }
+          });
+        }
+      },
+      stopDownloadRecord: function (callback) {
+        this.$refs["recordVideoPlayer"].pause();
+        this.videoUrl = '';
+        this.$axios({
+          method: 'get',
+          url: '/api/gb_record/download/stop/' + this.deviceId + "/" + this.channelId+ "/" + this.streamId
+        }).then((res)=> {
+          if (callback) callback(res)
+        });
+      },
+      stopPlayRecord: function (callback) {
+        console.log("停止录像回放")
+        if (this.streamId !== "") {
+          this.$refs["recordVideoPlayer"].pause();
+          this.videoUrl = '';
+          this.$axios({
+            method: 'get',
+            url: '/api/jt1078/playback/stop/',
+            params: {
+              phoneNumber: this.phoneNumber,
+              channelId: this.channelId,
+              streamId: this.streamId
+            }
+          }).then(function (res) {
+            if (callback) callback()
+          });
+        }
+
+      },
+      getDataWidth(item){
+        let timeForFile = this.getTimeForFile(item);
+        let result = (timeForFile[2])/((this.sliderMax - this.sliderMIn)*1000)
+        return result*100
+      },
+      getDataLeft(item){
+        let timeForFile = this.getTimeForFile(item);
+        let differenceTime = timeForFile[0].getTime() - new Date(this.chooseDate + " 00:00:00").getTime()
+        return parseFloat((differenceTime - this.sliderMIn * 1000)/((this.sliderMax - this.sliderMIn)*1000))*100   ;
+      },
+      getUrlByStreamInfo(){
+        if (location.protocol === "https:") {
+          this.videoUrl = this.streamInfo["wss_flv"]
+        }else {
+          this.videoUrl = this.streamInfo["ws_flv"]
+        }
+        return this.videoUrl;
+
+      },
+      timePickerChange: function (val){
+        this.setTime(val[0], val[1])
+      },
+      playTimeChange(val){
+        console.log(val)
+
+        let startTimeStr = moment(new Date(this.chooseDate + " 00:00:00").getTime() + val[0]*1000).format("YYYY-MM-DD HH:mm:ss");
+        let endTimeStr = moment(new Date(this.chooseDate + " 00:00:00").getTime() + val[1]*1000).format("YYYY-MM-DD HH:mm:ss");
+
+        this.setTime(startTimeStr, endTimeStr)
+
+        this.playRecord();
+      },
+      setSliderFit() {
+        if (this.sliderMIn === 0 && this.sliderMax === 86400) {
+          if (this.detailFiles.length > 0){
+            let timeForFile = this.getTimeForFile(this.detailFiles[0]);
+            let lastTimeForFile = this.getTimeForFile(this.detailFiles[this.detailFiles.length - 1]);
+            let timeNum = timeForFile[0].getTime() - new Date(this.chooseDate + " " + "00:00:00").getTime()
+            let lastTimeNum = lastTimeForFile[1].getTime() - new Date(this.chooseDate + " " + "00:00:00").getTime()
+
+            this.playTime = parseInt(timeNum/1000)
+            this.sliderMIn = parseInt(timeNum/1000 - timeNum/1000%(60*60))
+            this.sliderMax = parseInt(lastTimeNum/1000 - lastTimeNum/1000%(60*60)) + 60*60
+
+            this.playTime = [this.sliderMIn, this.sliderMax];
+          }
+        }else {
+          this.sliderMIn = 0;
+          this.sliderMax = 86400;
+        }
+      },
+      getTimeForFile(file){
+        let startTime = new Date(file.startTime);
+        let endTime = new Date(file.endTime);
+        return [startTime, endTime, endTime.getTime() - startTime.getTime()];
+      },
+      playTimeFormat(val){
+        let h = parseInt(val/3600);
+        let m = parseInt((val - h*3600)/60);
+        let s = parseInt(val - h*3600 - m*60);
+
+        let hStr = h;
+        let mStr = m;
+        let sStr = s;
+        if (h < 10) {
+          hStr = "0" + hStr;
+        }
+        if (m < 10) {
+          mStr = "0" + mStr;s
+        }
+        if (s < 10) {
+          sStr = "0" + sStr;
+        }
+        return hStr + ":" + mStr + ":" + sStr
+      },
+      goBack(){
+        // 如果正在进行录像回放则，发送停止
+        if (this.streamId !== "") {
+          this.stopPlayRecord(()=> {
+            this.streamId = "";
+          })
+        }
+        window.history.go(-1);
+      },
+		}
+	};
+</script>
+
+<style>
+  .el-slider__runway {
+    background-color:rgba(206, 206, 206, 0.47) !important;
+  }
+  .el-slider__bar {
+    background-color: rgba(153, 153, 153, 0) !important;
+  }
+  .playtime-slider {
+    position: relative;
+    z-index: 100;
+  }
+  .data-picker-true{
+
+  }
+  .data-picker-true:after{
+    content: "";
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    background-color: #606060;
+    border-radius: 4px;
+    left: 45%;
+    top: 74%;
+
+  }
+  .data-picker-false{
+
+  }
+  .slider-val-box{
+    height: 6px;
+    position: relative;
+    top: -22px;
+  }
+  .slider-val{
+    height: 6px;
+    background-color: #007CFF;
+    position: absolute;
+  }
+  .record-list-box-box{
+    width: 250px;
+    float: left;
+  }
+  .record-list-box{
+    overflow: auto;
+    width: 220px;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    margin-top: 0px;
+    padding: 1rem 0;
+    background-color: #FFF;
+    margin-top: 10px;
+  }
+  .record-list{
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    background-color: #FFF;
+
+  }
+  .record-list-no-val {
+    position: absolute;
+    color: #9f9f9f;
+    top: 50%;
+    left: 110px;
+  }
+  .record-list-item{
+    padding: 0;
+    margin: 0;
+    margin: 0.5rem 0;
+    cursor: pointer;
+  }
+  .record-list-option {
+    width: 10px;
+    float: left;
+    margin-top: 39px;
+
+  }
+  .player-option-box{
+    padding: 0 20px;
+  }
+</style>

web_src/src/router/index.js

@@ -6,6 +6,7 @@ import console from '../components/console.vue'
 import deviceList from '../components/DeviceList.vue'
 import jtDeviceList from '../components/JTDeviceList.vue'
 import jtChannelList from '../components/JTChannelList.vue'
+import jtRecordDetail from '../components/JTRecordDetail.vue'
 import channelList from '../components/channelList.vue'
 import gbRecordDetail from '../components/GBRecordDetail.vue'
 import pushVideoList from '../components/PushVideoList.vue'
@@ -81,6 +82,11 @@ export default new VueRouter({
           name: 'gbRecordDetail',
           component: gbRecordDetail,
         },
+        {
+          path: '/jtRecordDetail/:phoneNumber/:channelId/',
+          name: 'jtRecordDetail',
+          component: jtRecordDetail,
+        },
         {
           path: '/parentPlatformList/:count/:page',
           name: 'parentPlatformList',