zxl
2025-06-12 9f16b5c553b479ea12fe368a7ecc748872ea8b98
web_src/src/components/CloudRecordDetail.vue
@@ -37,16 +37,15 @@
          <div class="record-list-box" :style="recordListStyle">
            <ul v-if="detailFiles.length >0" class="infinite-list record-list" v-infinite-scroll="infiniteScroll" >
              <li v-for="(item,index) in detailFiles" :key="index" class="infinite-list-item record-list-item" >
                <el-tag v-if="choosedFile !== item.filename" @click="chooseFile(item)">
                <el-tag v-if="choosedFile !== item.fileName" @click="chooseFile(item)">
                  <i class="el-icon-video-camera"  ></i>
                  {{ item.fileName.substring(0, 17) }}
                  {{ getFileShowName(item) }}
                </el-tag>
                <el-tag type="danger" v-if="choosedFile === item.filename">
                <el-tag type="danger" v-if="choosedFile === item.fileName">
                  <i class="el-icon-video-camera"  ></i>
                  {{ item.fileName.substring(0, 17) }}
                  {{ getFileShowName(item) }}
                </el-tag>
                <a class="el-icon-download" style="color: #409EFF;font-weight: 600;margin-left: 10px;"
                   :href="`${getFileBasePath(item)}/download.html?url=download/${app}/${stream}/${chooseDate}/${item.fileName}`"
                <a class="el-icon-download" @click="downloadFile(item)" style="color: #409EFF;font-weight: 600;margin-left: 10px;"
                   target="_blank"/>
              </li>
            </ul>
@@ -135,7 +134,7 @@
<script>
  // TODO 根据查询的时间列表设置滑轨的最大值与最小值,
   import uiHeader from '../layout/UiHeader.vue'
   import player from './dialog/easyPlayer.vue'
   import player from './common/easyPlayer.vue'
  import moment  from 'moment'
  import axios from "axios";
   export default {
@@ -230,9 +229,6 @@
      mounted() {
      this.recordListStyle.height = this.winHeight + "px";
      this.playerStyle["height"] = this.winHeight + "px";
      console.log(this.app)
      console.log(this.stream)
      console.log(this.mediaServerId)
      // 查询当年有视频的日期
      this.getDateInYear(()=>{
        if (Object.values(this.dateFilesObj).length > 0){
@@ -314,18 +310,61 @@
        });
      },
      chooseFile(file){
        console.log(file)
           if (file == null) {
          this.videoUrl = "";
          this.choosedFile = "";
        }else {
          this.choosedFile = file.fileName;
          this.videoUrl = `${this.getFileBasePath(file)}/download/${this.app}/${this.stream}/${this.chooseDate}/${this.choosedFile}`
          console.log(this.videoUrl)
          this.$axios({
            method: 'get',
            url: `/api/cloud/record/play/path`,
            params: {
              recordId: file.id,
            }
          }).then((res) => {
            console.log(res)
            if (res.data.code === 0) {
              if (location.protocol === "https:") {
                this.videoUrl = res.data.data.httpsPath;
              }else {
                this.videoUrl = res.data.data.httpPath;
              }
            }
          }).catch((error) => {
            console.log(error);
          });
        }
      },
      downloadFile(file){
        console.log(file)
        this.$axios({
          method: 'get',
          url: `/api/cloud/record/play/path`,
          params: {
            recordId: file.id,
          }
        }).then((res) => {
          console.log(res)
          const link = document.createElement('a');
          link.target = "_blank";
          if (res.data.code === 0) {
            if (location.protocol === "https:") {
              link.href = res.data.data.httpsPath + "&save_name=" + file.fileName;
            }else {
              link.href = res.data.data.httpPath + "&save_name=" + file.fileName;
            }
            link.click();
          }
        }).catch((error) => {
          console.log(error);
        });
      },
      backToList() {
        this.$router.back()
      },
      getFileShowName(item) {
          return  moment(item.startTime).format('HH:mm:ss') + "-" + moment(item.endTime).format('HH:mm:ss')
      },
      chooseMediaChange() {
@@ -372,13 +411,8 @@
      },
      getTimeForFile(file){
        console.log(file)
        let timeStr = file.fileName.substring(0, 17);
        if(timeStr.indexOf("~") > 0){
          timeStr = timeStr.replaceAll("-",":")
        }
        let timeArr = timeStr.split("-");
        let starTime = new Date(this.chooseDate + " " + timeArr[0]);
        let endTime = new Date(this.chooseDate + " " + timeArr[1]);
        let starTime = new Date(file.startTime * 1000);
        let endTime = new Date(file.endTime * 1000);
        if(this.checkIsOver24h(starTime,endTime)){
           endTime = new Date(this.chooseDate + " " + "23:59:59");
        }
@@ -482,12 +516,13 @@
        let that = this;
        this.$axios({
          method: 'get',
          url:`/record_proxy/${that.mediaServerId}/api/record/file/download/task/add`,
          url:`/api/cloud/record/task/add`,
          params: {
            app: that.app,
            stream: that.stream,
            startTime: moment(this.taskTimeRange[0]).format('YYYY-MM-DD HH:mm:ss'),
            endTime: moment(this.taskTimeRange[1]).format('YYYY-MM-DD HH:mm:ss'),
              app: this.app,
              stream: this.stream,
              mediaServerId: this.mediaServerId,
              startTime: moment(this.taskTimeRange[0]).format('YYYY-MM-DD HH:mm:ss'),
              endTime: moment(this.taskTimeRange[1]).format('YYYY-MM-DD HH:mm:ss'),
          }
        }).then(function (res) {
          if (res.data.code === 0 ) {
@@ -507,8 +542,9 @@
        let that = this;
        this.$axios({
          method: 'get',
          url:`/record_proxy/${that.mediaServerId}/api/record/file/download/task/list`,
          url:`/api/cloud/record/task/list`,
          params: {
            mediaServerId: this.mediaServerId,
            isEnd: isEnd,
          }
        }).then(function (res) {