[FE]初步联调视频回放接口

security-protection-platform/src/api/dashboard/index.js

@@ -4,20 +4,19 @@ const { $default } = http
const api = {
  // 出勤(饼状图)
  queryAttendanceChart() {
  queryAttendanceChart () {
    return $default.get('/sp/homePage/queryAttendanceChart', {}).then(resp => {
      debugger
      return resp.data
    })
  },
  // 报警(柱状图)
  queryAlarmAnalysisChart() {
  queryAlarmAnalysisChart () {
    return $default.get('/sp/homePage/queryAlarmAnalysisChart', {}).then(resp => {
      return resp.data
    })
  },
  // 报警(TOP4)
  queryAlarmAnalysisTopList() {
  queryAlarmAnalysisTopList () {
    return $default.get('/sp/homePage/queryAlarmAnalysisTopList', {}).then(resp => {
      return resp.data
    })

security-protection-platform/src/api/videoSurveillance/index.js

@@ -1,14 +1,18 @@
import http from '@/http'
const { $http } = http
const { $http, $default } = http
const api = {
  // 获取风场大门表格数据
  getVideoSurveillanceData(params) {
  getVideoSurveillanceData (params) {
    return $http.get('/videoSurveillance/getVideoSurveillanceData', params)
  },
  // 获取识别记录数据
  getDistinguishData(params) {
  getDistinguishData (params) {
    return $http.get('/videoSurveillance/getDistinguishData', params)
  },
  // 视频回放
  getVideoPlayBack (id) {
    return $default.get(`/sp/uploadFile/getFileUrl?fileName=${id}`).catch((err) => { return err })
  }
}
export default api

security-protection-platform/src/modules/videoSurveillance/index.vue

@@ -17,9 +17,15 @@
          <div slot="foot" class="bottom">
            <span v-tooltip="item.videoDetail">{{ item.videoDetail.content | handleText }}</span>
            <div style="margin-left:auto">
              <t-button v-tooltip="item.options1" class="bottom-btn" @click="goDistinguishRecord(item.videoId)"><t-icon size="16" icon="image-outline"></t-icon></t-button>
              <t-button v-tooltip="item.options2" class="bottom-btn" @click="handleReview(item.videoId)"><t-icon size="16" icon="piechart-outline"></t-icon></t-button>
              <t-button v-tooltip="item.options3" class="bottom-btn"><t-icon size="16" icon="arrow-expand-all-outline"></t-icon></t-button>
              <t-button v-tooltip="item.options1" class="bottom-btn" @click="goDistinguishRecord(item.videoId)">
                <t-icon size="16" icon="image-outline"></t-icon>
              </t-button>
              <t-button v-tooltip="item.options2" class="bottom-btn" @click="handleReview(item.videoId)">
                <t-icon size="16" icon="piechart-outline"></t-icon>
              </t-button>
              <t-button v-tooltip="item.options3" class="bottom-btn">
                <t-icon size="16" icon="arrow-expand-all-outline"></t-icon>
              </t-button>
            </div>
          </div>
        </t-card>
@@ -37,7 +43,7 @@ import ReplayDialog from './components/ReplayDialog'
export default {
  components: { ReplayDialog },
  filters: {
    handleText(value) {
    handleText (value) {
      if (!value) return ''
      if (value.length > 13) {
        return value.slice(0, 13) + '...'
@@ -45,7 +51,7 @@ export default {
      return value
    }
  },
  data() {
  data () {
    return {
      videoCurrent: 1, // 大门分页数据
      videoPageSize: 10, // 大门分页数据
@@ -66,12 +72,14 @@ export default {
      replayList: []
    }
  },
  mounted() {
  mounted () {
    this.getWindFiledList() // 获取风场列表
    this.getVideoSurveillanceData() // 获取视频监控界面数据
  },
  methods: {
    handleReview() {
    async handleReview (id) {
      // const res = await sysapi.getVideoPlayBack(id)
      // console.log(res)
      this.replayList = [{
        fileName: '12月14 16:55',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165526.mp4',
@@ -97,27 +105,27 @@ export default {
        fileId: 'ai-video_5A02296PAKA885B-video20201214165531.mp4',
        fileType: 'video/mp4'
      }]
      // this.replayList = [{
      //   sources: [{
      //     src: 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4',
      //     type: 'video/mp4'
      //   }]
      // }, {
      //   sources: [{
      //     src: 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4',
      //     type: 'video/mp4'
      //   }]
      // }]
      this.replayList = [{
        sources: [{
          src: 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4',
          type: 'video/mp4'
        }]
      }, {
        sources: [{
          src: 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4',
          type: 'video/mp4'
        }]
      }]
      this.showReplayDialog = true
    },
    async tabClick(id) {
    async tabClick (id) {
      this.paramsObj.page = 0
      this.videoList = []
      this.tabId = id
      this.videoCurrent = 1
      this.getVideoSurveillanceData()
    },
    getWindFiledList() {
    getWindFiledList () {
      commonapi.getDepartments().then(resp => {
        this.organizationList = []
        console.log(resp)
@@ -133,13 +141,13 @@ export default {
      })
    },
    // 获得风场大门数据
    getVideoSurveillanceData(isWind) {
    getVideoSurveillanceData (isWind) {
      if (isWind) {
        this.videoList = []
      }
      if (this.videoList.length <= 10) {
        this.paramsObj.page = this.videoCurrent
        sysapi.getVideoSurveillanceData({params: this.paramsObj}).then(res => {
        sysapi.getVideoSurveillanceData({ params: this.paramsObj }).then(res => {
          this.departments = res.data.departments
          this.videoTotal = this.departments[this.tabId - 1].total
          res.data.data.forEach((element, index) => {
@@ -160,11 +168,11 @@ export default {
      }
    },
    // 进入识别记录界面
    goDistinguishRecord(id) {
      this.$router.push({path: '/videoSurveillance/distinguishRecord', query: {videoId: id}})
    goDistinguishRecord (id) {
      this.$router.push({ path: '/videoSurveillance/distinguishRecord', query: { videoId: id } })
    },
    // 风场大门分页
    onChangeGate(val) {
    onChangeGate (val) {
      this.videoList = []
      this.videoCurrent = val
      this.getVideoSurveillanceData()
@@ -173,69 +181,77 @@ export default {
}
</script>
<style lang="scss" scoped>
.page-main{
    padding:30px 24px 24px 24px;
    .top-btn{
        float: right;
    }
    .page-bottom{
        display: flex;
.page-main {
  padding: 30px 24px 24px 24px;
  .top-btn {
    float: right;
  }
  .page-bottom {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    margin-left: -24px;
    .card-video-first,
    .card-video {
      width: 354px;
      height: 240px;
      margin-top: 20px;
      .card-image {
        width: 100%;
        flex-wrap: wrap;
        margin-left: -24px;
        .card-video-first, .card-video{
          width:354px;
          height:240px;
          margin-top: 20px;
            .card-image{
                width: 100%;
                height: 100%;
            }
            .bottom{
                padding: 0 12px;
                display: flex;
                align-items: center;
                background-color: rgba(0, 0, 0, 0.5);
                height: 40px;
                color: #fff;
                font-size: 14px;
                .bottom-btn{
                    color: #fff;
                    border: none;
                    padding:0 !important;
                    &:hover{
                        color: #0089d4;
                    }
                }
            }
        }
        .card-video{
          .card-footer{
            padding: 0px 0 0 24px !important;
            background: none;
            width: 100%;
            position: absolute;
            border-top: none;
            bottom: 0px;
            }
            .card-block, .card-video-block{
              margin-left: 24px;
              padding:0 !important;
            }
        height: 100%;
      }
      .bottom {
        padding: 0 12px;
        display: flex;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.5);
        height: 40px;
        color: #fff;
        font-size: 14px;
        .bottom-btn {
          color: #fff;
          border: none;
          padding: 0 !important;
          &:hover {
            color: #0089d4;
          }
        }
      }
    }
    .card-video {
      .card-footer {
        padding: 0px 0 0 24px !important;
        background: none;
        width: 100%;
        position: absolute;
        border-top: none;
        bottom: 0px;
      }
      .card-block,
      .card-video-block {
        margin-left: 24px;
        padding: 0 !important;
      }
    }
    .pager{
  }
  .pager {
    margin-right: auto;
    margin: 21px 0px 24px 0;
    float: right;
  }
.btn-primary, .radio-group-button .form-radio:checked, .radio-group-button .form-radio[checked]{
  .btn-primary,
  .radio-group-button .form-radio:checked,
  .radio-group-button .form-radio[checked] {
    color: #0089d4;
    background-color: #fff;
    border: 1px solid #0089d4;
}
.btn-secondary, .radio-group-button .form-radio, .checkbox-group--button .form-checkbox .form-checkbox__inner, .btn-dashed-secondary, .btn-outline-secondary{
  }
  y,
  .radio-group-button .form-radio,
  .checkbox-group--button .form-checkbox .form-checkbox__inner,
  .btn-dashed-secondary,
  .btn-outline-secondary {
    background: none;
}
  }
}
</style>