瀏覽代碼

[FE]删除无关视频组件

luoxu5 4 年之前
父節點
當前提交
4bc4f36460

+ 0 - 118
security-protection-platform/src/components/VideoPlayer/index.vue

@ -1,118 +0,0 @@
1
<template>
2
  <div>
3
    <video ref="player" class="video-js vjs-default-skin vjs-big-play-centered"></video>
4
  </div>
5
</template>
6
7
<script>
8
import videojs from 'video'
9
window.videojs = videojs
10
require('videojs-playlist')
11
require('video.js/dist/lang/zh-CN.js')
12
require('video.js/dist/video-js.min.css')
13
const defaultPlayerOptions = {
14
  controls: true,
15
  autoplay: true,
16
  muted: true,
17
  language: 'zh-CN',
18
  fluid: true,
19
  // liveui: true,
20
  controlBar: {
21
    children: [
22
      {name: 'currentTimeDisplay'}, // 当前已播放时间
23
      {name: 'durationDisplay'}, // 总时间
24
      { // 倍数播放
25
        name: 'playbackRateMenuButton',
26
        playbackRates: [0.5, 1, 1.5, 2, 2.5]
27
      },
28
      {name: 'FullscreenToggle'} // 全屏
29
    ]
30
  }
31
}
32
33
export default {
34
  name: 'VideoPlayer',
35
  props: {
36
    sources: {
37
      type: Array,
38
      default: () => []
39
    },
40
    options: {
41
      type: Object,
42
      default () { return {} }
43
    },
44
    autoadvance: {
45
      type: Number,
46
      default: null
47
    }
48
  },
49
  data () {
50
    const playerOptions = Object.assign({}, defaultPlayerOptions, this.options)
51
    return {
52
      player: null,
53
      playerOptions
54
    }
55
  },
56
  computed: {
57
    playlist () {
58
      return this.sources
59
    }
60
  },
61
  watch: {
62
    playlist: {
63
      handler (list) {
64
        if (!this.player) return
65
        this.player.playlist(list)
66
        if (list.length > 0) {
67
          this.player.playlist.autoadvance(this.autoadvance)
68
          // this.player.playlist.first();
69
        }
70
        this.$emit('playlistchange', list)
71
      },
72
      immediate: true
73
    }
74
  },
75
  mounted () {
76
    this.init()
77
  },
78
  beforeDestroy () {
79
    if (this.player) {
80
      this.player.dispose()
81
    }
82
  },
83
  methods: {
84
    init () {
85
      const player = videojs(this.$refs.player, this.playerOptions)
86
      this.player = player
87
      this.player.on('playlistitem', (...args) => {
88
        this.$emit('playlistitem', ...args)
89
      })
90
      this.$emit('player-inited', player)
91
    }
92
  }
93
}
94
</script>
95
96
<style lang="scss">
97
.vjs-paused .vjs-big-play-button,
98
.vjs-paused.vjs-has-started .vjs-big-play-button {
99
  display: block;
100
}
101
102
.vjs-slider-vertical .vjs-volume-level:before {
103
  top: -0.4em;
104
  left: -0.4em;
105
}
106
107
.video-js {
108
  .vjs-play-progress:before {
109
    top: -0.5em;
110
    transform-origin: center;
111
  }
112
  .vjs-progress-control:hover {
113
    .vjs-play-progress:before {
114
      transform: translateY(0.17em);
115
    }
116
  }
117
}
118
</style>

+ 129 - 145
security-protection-platform/src/modules/dashboard/index.vue

@ -1,16 +1,13 @@
1 1
<template>
2 2
  <div class="index" style="overflow:hidden">
3
    <div :style="`background-image: url(${imgBg})`" class="top" >
4
      <img src="@/assets/images/AsiainfoLogo.png" class="top-logo">
5
      <div style="position: absolute;
6
      top:50%;
7
      left:54%;
8
      transform: translate(-50%,-50%);
9
      vertical-align: middle; color: white; font-size: 14px"><b> | AISI安防一体化平台</b></div>
3
    <div :style="`background-image: url(${imgBg})`" class="top">
4
      <img src="@/assets/images/brand.png" class="top-logo">
10 5
    </div>
11 6
    <div>
12 7
      <div class="time"><span style="color: #00d8f3;font-size: 21px;">{{ nowDate | dateFormat }}</span></div>
13
      <div class="goto" @click="gotoSystem"><t-icon icon="arrow-right-outline"></t-icon>进入系统</div>
8
      <div class="goto" @click="gotoSystem">
9
        <t-icon icon="arrow-right-outline"></t-icon>进入系统
10
      </div>
14 11
    </div>
15 12
    <div class="body">
16 13
      <div class="body-left">
@ -34,7 +31,8 @@
34 31
            <t-row v-for="(item,index) in topData" :gutter="2" align="center" class="top4-row">
35 32
              <t-col span="6">
36 33
                <div :style="`background-image: url(${polygon})`" class="polygon">{{ index + 1 }}</div>
37
                &nbsp;&nbsp;{{ item.name }}</t-col>
34
                &nbsp;&nbsp;{{ item.name }}
35
              </t-col>
38 36
              <t-col span="2" offset="4">{{ item.value }}个</t-col>
39 37
            </t-row>
40 38
          </div>
@ -45,12 +43,7 @@
45 43
          <span class="title-span">重点区域监控</span>
46 44
        </div>
47 45
        <!--        <video-player ref="videoPlayer" :options="videoOptions" :playsinline="true" class="vjs-custom-skin videoPlayer"></video-player>-->
48
        <video-player v-if="videoOptions !== {}"
49
          ref="videoPlayer"
50
          :options="videoOptions"
51
          :playsinline="true"
52
          class="vjs-custom-skin videoPlayer"
53
        ></video-player>
46
        <video-player v-if="videoOptions !== {}" ref="videoPlayer" :options="videoOptions" :playsinline="true" class="vjs-custom-skin videoPlayer"></video-player>
54 47
        <div class="videoPlayers">
55 48
          <div v-for="(item,index) in videoOptionsList" class="videoPlayer-sm" @click="videoSwitchover(item,index)">
56 49
            <!--            <video-player ref="videoPlayer"-->
@ -59,16 +52,7 @@
59 52
            <!--                          :style="`padding: 0 2.5% 2.5% 2%;border-radius: 5px;border: ${1-index}px solid #009bf3;`"-->
60 53
            <!--                          class="vjs-custom-skin videoPlayer">-->
61 54
            <!--            </video-player>-->
62
            <video-player
63
              ref="videoPlayer"
64
              :playsinline="false"
65
              :events="events"
66
              :options="item.options"
67
              :style="`padding: 0 2.5% 2.5% 2%;border-radius: 5px;`"
68
              :class="{ 'checkedIndex': index == checkedIndex }"
69
              class="vjs-custom-skin videoPlayer"
70
              @dblclick="handlefullscreenchange"
71
            ></video-player>
55
            <video-player ref="videoPlayer" :playsinline="false" :events="events" :options="item.options" :style="`padding: 0 2.5% 2.5% 2%;border-radius: 5px;`" :class="{ 'checkedIndex': index == checkedIndex }" class="vjs-custom-skin videoPlayer" @dblclick="handlefullscreenchange"></video-player>
72 56
            <div style="color: white;text-align: center;">{{ item.name }}</div>
73 57
          </div>
74 58
        </div>
@ -106,7 +90,9 @@ import border from '@/assets/images/border.png'
106 90
import echarts from 'echarts'
107 91
import dasapi from '@/api/dashboard'
108 92
import sysapi from '@/api/system'
109
import RtmpVideo from '../videoSurveillance/components/rtmpVideoPlay'
93
import 'video.js/dist/video-js.css'
94
import 'vue-video-player/src/custom-theme.css'
95
import 'videojs-flash'
110 96
import videojs from 'video.js'
111 97
window.videojs = videojs
112 98
@ -115,40 +101,37 @@ require('video.js/dist/video-js.min.css')
115 101
116 102
export default {
117 103
  filters: {
118
    dateFormat(value) {
104
    dateFormat (value) {
119 105
      var year = value.getFullYear()
120 106
      var month = value.getMonth() + 1
121 107
      month >= 10 ? month : '0' + month
122 108
      var day = value.getDate() >= 10 ? value.getDate() : '0' + value.getDate()
123 109
      var hours =
124
          value.getHours() >= 10 ? value.getHours() : '0' + value.getHours()
110
        value.getHours() >= 10 ? value.getHours() : '0' + value.getHours()
125 111
      var minutes =
126
          value.getMinutes() >= 10
127
            ? value.getMinutes()
128
            : '0' + value.getMinutes()
112
        value.getMinutes() >= 10
113
          ? value.getMinutes()
114
          : '0' + value.getMinutes()
129 115
      var seconds =
130
          value.getSeconds() >= 10
131
            ? value.getSeconds()
132
            : '0' + value.getSeconds()
116
        value.getSeconds() >= 10
117
          ? value.getSeconds()
118
          : '0' + value.getSeconds()
133 119
      return (
134 120
        year +
135
          '年' +
136
          month +
137
          '月' +
138
          day +
139
          '日 ' +
140
          hours +
141
          ':' +
142
          minutes +
143
          ':' +
144
          seconds
121
        '年' +
122
        month +
123
        '月' +
124
        day +
125
        '日 ' +
126
        hours +
127
        ':' +
128
        minutes +
129
        ':' +
130
        seconds
145 131
      )
146 132
    }
147 133
  },
148
  components: {
149
    RtmpVideo
150
  },
151
  data() {
134
  data () {
152 135
    return {
153 136
      checkedIndex: 0,
154 137
      events: ['fullscreenchange'],
@ -170,7 +153,7 @@ export default {
170 153
    }
171 154
  },
172 155
  computed: {
173
    player() {
156
    player () {
174 157
      return this.$refs.videoPlayer1.player
175 158
    }
176 159
  },
@ -211,12 +194,12 @@ export default {
211 194
        })
212 195
      })
213 196
    },
214
    handlefullscreenchange(val) {
197
    handlefullscreenchange (val) {
215 198
      // 因为我是又封装了一个组件,打印val会有相应所需的属性,全屏状态为:isFullscreen_
216 199
      val.isFullscreen_ = !val.isFullscreen_
217 200
      // this.$emit('fullscreenchange', val)
218 201
    },
219
    initVideo() {
202
    initVideo () {
220 203
      sysapi.getTerminalRel(2).then(res => {
221 204
        this.videoOptions = {
222 205
          autoplay: true, // 如果true,浏览器准备好时开始回放。
@ -286,14 +269,14 @@ export default {
286 269
        })
287 270
      })
288 271
    },
289
    videoSwitchover(itme,index) {
272
    videoSwitchover (itme, index) {
290 273
      this.videoOptions.sources = itme.options.sources
291 274
      this.checkedIndex = index
292 275
    },
293
    gotoSystem() {
294
      this.$router.push({name: 'videoSurveillance'})
276
    gotoSystem () {
277
      this.$router.push({ name: 'videoSurveillance' })
295 278
    },
296
    initAttendance() {
279
    initAttendance () {
297 280
      this.attendanceData = dasapi.queryAttendanceChart().then(res => {
298 281
        this.population = res.data.totalSize
299 282
        res.data.dataList.forEach(e => {
@ -311,7 +294,7 @@ export default {
311 294
        this.initAttendanceData()
312 295
      })
313 296
    },
314
    initAlarm() {
297
    initAlarm () {
315 298
      this.population = dasapi.queryAlarmAnalysisChart().then(res => {
316 299
        res.data.forEach(e => {
317 300
          this.alarmDataX.push(e.name)
@ -320,7 +303,7 @@ export default {
320 303
        this.initAlarmData()
321 304
      })
322 305
    },
323
    init24Top() {
306
    init24Top () {
324 307
      this.topData = dasapi.queryAlarmAnalysisTopList().then(res => {
325 308
        this.topData = []
326 309
        for (var i = 0; i < 5; i++) {
@ -330,8 +313,8 @@ export default {
330 313
        }
331 314
      })
332 315
    },
333
    initRecognition() {
334
      dasapi.queryHomeLastInAndOutRecord({monitorSceneId: 3}).then(res => {
316
    initRecognition () {
317
      dasapi.queryHomeLastInAndOutRecord({ monitorSceneId: 3 }).then(res => {
335 318
        var data = res.data.data
336 319
        if (data.length > 4) {
337 320
          data = data.slice(0, 4)
@ -344,17 +327,17 @@ export default {
344 327
          imgObject.setAttribute('crossOrigin', 'anonymous')
345 328
          imgObject.src = e.idenPictureUrl
346 329
          imgObject.onLoad = onImgLoaded()
347
          function onImgLoaded() {
330
          function onImgLoaded () {
348 331
            if (loadTimer != null) clearTimeout(loadTimer)
349 332
            if (!imgObject.complete) {
350
              loadTimer = setTimeout(function() {
333
              loadTimer = setTimeout(function () {
351 334
                onImgLoaded()
352 335
              }, 3)
353 336
            } else {
354 337
              e.newImg = getImagePortion(imgObject, e.face_box[2] - e.face_box[0], e.face_box[3] - e.face_box[1], e.face_box[0], e.face_box[1])
355 338
            }
356 339
          }
357
          function getImagePortion(imgObj, newWidth, newHeight, startX, startY) {
340
          function getImagePortion (imgObj, newWidth, newHeight, startX, startY) {
358 341
            var tnCanvas = document.createElement('canvas')
359 342
            var tnCanvasContext = tnCanvas.getContext('2d')
360 343
            tnCanvas.width = newWidth; tnCanvas.height = newHeight
@ -370,7 +353,7 @@ export default {
370 353
        this.distinguishData = data
371 354
      })
372 355
    },
373
    initAttendanceData() {
356
    initAttendanceData () {
374 357
      var dom = document.getElementById('doughnut')
375 358
      var myChart = echarts.init(dom)
376 359
      var option = null
@ -428,7 +411,7 @@ export default {
428 411
        myChart.setOption(option, true)
429 412
      }
430 413
    },
431
    legendFormatter(data) {
414
    legendFormatter (data) {
432 415
      var legend
433 416
      this.attendanceData.forEach(e => {
434 417
        if (data === e.name) {
@ -437,7 +420,7 @@ export default {
437 420
      })
438 421
      return data + ': ' + legend + '人'
439 422
    },
440
    initAlarmData() {
423
    initAlarmData () {
441 424
      var dom = document.getElementById('bar')
442 425
      var myChart = echarts.init(dom)
443 426
      var option = null
@ -517,14 +500,14 @@ export default {
517 500
                color: new echarts.graphic.LinearGradient(
518 501
                  0, 0, 0, 1,
519 502
                  [
520
                    {offset: 0, color: '#00FEFF'},
521
                    {offset: 1, color: '#0C7EFC'}
503
                    { offset: 0, color: '#00FEFF' },
504
                    { offset: 1, color: '#0C7EFC' }
522 505
                  ]
523 506
                ),
524 507
                label: {
525 508
                  show: true, // 是否展示
526 509
                  position: 'top', // 在上方显示
527
                  formatter: function(name) {
510
                  formatter: function (name) {
528 511
                    return name.value + '个'
529 512
                  },
530 513
                  textStyle: {
@ -547,16 +530,16 @@ export default {
547 530
</script>
548 531
549 532
<style lang="scss">
550
.index{
551
  height:100vh;
533
.index {
534
  height: 100vh;
552 535
  background-color: #011d40;
553
  .time{
536
  .time {
554 537
    width: 500px;
555 538
    height: 28px;
556 539
    padding-left: 48px;
557 540
    margin-top: -14px;
558 541
  }
559
  .goto{
542
  .goto {
560 543
    cursor: pointer;
561 544
    margin-top: -30px;
562 545
    width: 8%;
@ -568,56 +551,56 @@ export default {
568 551
    align-items: center;
569 552
    text-align: center;
570 553
    padding-top: 6px;
571
    color:#00d8f3;
554
    color: #00d8f3;
572 555
    font-size: 18px;
573 556
  }
574
  .top{
575
    -moz-background-size:100% 100%;
576
    background-size:100% 100%;
557
  .top {
558
    -moz-background-size: 100% 100%;
559
    background-size: 100% 100%;
577 560
    display: flex;
578 561
    align-items: center;
579 562
    text-align: center;
580 563
    height: 6%;
581 564
    overflow: hidden;
582 565
    position: relative;
583
    .top-logo{
566
    .top-logo {
584 567
      position: absolute;
585
      top:50%;
586
      left:46%;
587
      transform: translate(-50%,-50%);
568
      top: 50%;
569
      left: 50%;
570
      transform: translate(-50%, -50%);
588 571
      height: 50%;
589
      width: 5%;
590
      vertical-align: middle
572
      width: 25%;
573
      vertical-align: middle;
591 574
    }
592 575
  }
593
  .body{
576
  .body {
594 577
    display: flex;
595 578
    height: 90%;
596 579
    padding-top: 1%;
597 580
    justify-content: space-around;
598
    .body-left{
581
    .body-left {
599 582
      width: 23%;
600 583
      height: 96%;
601
      .body-left-item{
584
      .body-left-item {
602 585
        width: 100%;
603 586
        border-radius: 5px;
604 587
        background-color: #011d40; /* 浏览器不支持的时候显示 */
605 588
        box-shadow: 0 0 30px -10px #009bf3 inset;
606
        .top4{
589
        .top4 {
607 590
          padding-left: 15px;
608 591
          padding-right: 15px;
609 592
          color: #00d8f3;
610 593
          font-size: 15px;
611 594
          height: 100%;
612
          .top4-row{
595
          .top4-row {
613 596
            border: 0 none;
614 597
            border-bottom: 2px dotted #00466b;
615 598
            height: 16%;
616
            .col-6{
599
            .col-6 {
617 600
              display: flex;
618
              .polygon{
619
                -moz-background-size:100% 100%;
620
                background-size:100% 100%;
601
              .polygon {
602
                -moz-background-size: 100% 100%;
603
                background-size: 100% 100%;
621 604
                align-items: center;
622 605
                text-align: center;
623 606
                height: 100%;
@ -628,22 +611,22 @@ export default {
628 611
        }
629 612
      }
630 613
    }
631
    .body-center{
614
    .body-center {
632 615
      width: 50%;
633 616
      height: 96%;
634 617
      border-radius: 5px;
635 618
      background-color: #011d40; /* 浏览器不支持的时候显示 */
636 619
      box-shadow: 0 0 30px -10px #009bf3 inset;
637 620
    }
638
    .body-right{
621
    .body-right {
639 622
      width: 23%;
640 623
      height: 96%;
641 624
      border-radius: 5px;
642 625
      background-color: #011d40; /* 浏览器不支持的时候显示 */
643 626
      box-shadow: 0 0 30px -10px #009bf3 inset;
644
      .distinguish{
645
        -moz-background-size:100% 100%;
646
        background-size:100% 100%;
627
      .distinguish {
628
        -moz-background-size: 100% 100%;
629
        background-size: 100% 100%;
647 630
        width: 88%;
648 631
        height: 22%;
649 632
        margin-left: 6%;
@ -652,7 +635,7 @@ export default {
652 635
        padding-right: 1%;
653 636
        padding-top: 1%;
654 637
        padding-bottom: 1%;
655
        .distinguish-title{
638
        .distinguish-title {
656 639
          align-items: center;
657 640
          text-align: center;
658 641
          height: 28px;
@ -661,40 +644,40 @@ export default {
661 644
          font-size: 16px;
662 645
          color: #00d8f3;
663 646
          //background-color: #003C74; 100%
664
          background: linear-gradient(to right, #011d40,#003C74,#011D40);
647
          background: linear-gradient(to right, #011d40, #003c74, #011d40);
665 648
        }
666
        .distinguish-row{
649
        .distinguish-row {
667 650
          display: flex;
668 651
          color: #00d8f3;
669 652
          width: 100%;
670 653
          height: 100%;
671 654
          position: relative;
672
          .similarity{
655
          .similarity {
673 656
            position: absolute;
674
            left:22%;
675
            top:27%;
676
            border: 2px solid  #00d8f3;
657
            left: 22%;
658
            top: 27%;
659
            border: 2px solid #00d8f3;
677 660
            width: 30px;
678 661
            height: 30px;
679 662
            background: #090404;
680 663
            opacity: 0.5;
681 664
            border-radius: 50%;
682 665
            padding-top: 1%;
683
            filter:alpha(opacity=50); /*支持IE */
684
            -moz-opacity:0.5; /*支持FF */
666
            filter: alpha(opacity=50); /*支持IE */
667
            -moz-opacity: 0.5; /*支持FF */
685 668
            //opacity:0.5;
686
            .p{
687
              position:relative;
669
            .p {
670
              position: relative;
688 671
              color: #00d8f3;
689
              font-size: 10px
672
              font-size: 10px;
690 673
            }
691 674
          }
692
          .distinguish-col{
675
          .distinguish-col {
693 676
            width: 27%;
694 677
            margin-top: 2%;
695 678
            height: 70%;
696 679
          }
697
          .distinguish-col-row{
680
          .distinguish-col-row {
698 681
            padding-left: 5%;
699 682
            padding-top: 5%;
700 683
            height: 40%;
@ -706,15 +689,15 @@ export default {
706 689
      }
707 690
    }
708 691
  }
709
  .title{
710
    -moz-background-size:100% 100%;
711
    background-size:100% 100%;
692
  .title {
693
    -moz-background-size: 100% 100%;
694
    background-size: 100% 100%;
712 695
    align-items: center;
713 696
    text-align: center;
714 697
    height: 28px;
715 698
    width: 100%;
716 699
    margin: 0 auto;
717
    .title-span{
700
    .title-span {
718 701
      height: 28px;
719 702
      align-items: center;
720 703
      text-align: center;
@ -723,15 +706,15 @@ export default {
723 706
      margin: auto;
724 707
    }
725 708
  }
726
  .titleWide{
727
    -moz-background-size:100% 100%;
728
    background-size:100% 100%;
709
  .titleWide {
710
    -moz-background-size: 100% 100%;
711
    background-size: 100% 100%;
729 712
    align-items: center;
730 713
    text-align: center;
731 714
    height: 28px;
732 715
    width: 47%;
733 716
    margin: 0 auto;
734
    .title-span{
717
    .title-span {
735 718
      height: 28px;
736 719
      align-items: center;
737 720
      text-align: center;
@ -740,66 +723,67 @@ export default {
740 723
      margin: auto;
741 724
    }
742 725
  }
743
  .videoPlayer{
726
  .videoPlayer {
744 727
    width: 100%;
745 728
    padding: 1.5% 2.5% 0.5% 2.5%;
746 729
  }
747
  .videoPlayers{
730
  .videoPlayers {
748 731
    display: flex;
749 732
    width: 100%;
750 733
    height: 25%;
751 734
    padding: 0 2.5% 0.5% 2.5%;
752 735
    justify-content: space-around;
753
    .videoPlayer-sm{
754
      z-index:9999;
736
    .videoPlayer-sm {
737
      z-index: 9999;
755 738
      cursor: pointer;
756 739
      width: 23%;
757 740
      height: 95%;
758 741
    }
759 742
  }
760
  .vjs-progress-control{
761
    visibility:hidden
743
  .vjs-progress-control {
744
    visibility: hidden;
762 745
  }
763
  .checkedIndex{
746
  .checkedIndex {
764 747
    border: 1px solid #009bf3;
765 748
  }
766 749
}
767
.vjs-error-display{
768
  display:none
750
.vjs-error-display {
751
  display: none;
769 752
}
770
.vjs-big-play-button{
771
  display:none
753
.vjs-big-play-button {
754
  display: none;
772 755
}
773
.vjs-custom-skin > .video-js .vjs-control-bar .vjs-fullscreen-control{
774
  height:38px !important;
756
.vjs-custom-skin > .video-js .vjs-control-bar .vjs-fullscreen-control {
757
  height: 38px !important;
775 758
}
776
.video-js .vjs-control{
759
.video-js .vjs-control {
777 760
  cursor: pointer;
778 761
  width: 28px;
779
  margin-right:12px;
762
  margin-right: 12px;
780 763
}
781
.vjs-control-bar{
764
.vjs-control-bar {
782 765
  display: flex;
783 766
  justify-content: center;
784 767
  align-items: center;
785 768
}
786
.video-js button{
787
  font-size:16px;
769
.video-js button {
770
  font-size: 16px;
788 771
}
789
.aidicon-image-outline:hover{
772
.aidicon-image-outline:hover {
790 773
  color: #0089d4 !important;
791 774
}
792
.aidicon-piechart-outline:hover{
775
.aidicon-piechart-outline:hover {
793 776
  color: #0089d4 !important;
794 777
}
795
.vjs-icon-placeholder:hover{
778
.vjs-icon-placeholder:hover {
796 779
  color: #0089d4 !important;
797
}.vjs-icon-placeholder{
798
   font-size: 13px;
799
   display: flex;
800
   justify-content: center;
801
   align-items: center;
802
 }
780
}
781
.vjs-icon-placeholder {
782
  font-size: 13px;
783
  display: flex;
784
  justify-content: center;
785
  align-items: center;
786
}
803 787
.vjs-tech {
804 788
  pointer-events: none;
805 789
}

+ 0 - 172
security-protection-platform/src/modules/videoSurveillance/components/rtmpVideoPlay/index.vue

@ -1,172 +0,0 @@
1
<template>
2
  <div class="replayer">
3
    <div class="replayer-video">
4
      <t-loading v-model="loadVideo">
5
        <span class="text-md text-info">获取视频资源...</span>
6
      </t-loading>
7
      <video-player :sources="videoList" :autoadvance="0" :style="{opacity: loadVideo ? 0: 1}" @player-inited="handlePlayerInited" @playlistitem="handlePlayerCurrentChange" />
8
    </div>
9
  </div>
10
</template>
11
12
<script>
13
import VideoPlayer from '@/components/VideoPlayer'
14
15
export default {
16
  components: { VideoPlayer },
17
  props: {
18
    list: {
19
      type: Array,
20
      default: () => []
21
    },
22
    visibled: {
23
      type: Boolean,
24
      default: false
25
    }
26
  },
27
  data () {
28
    return {
29
      currentTab: null,
30
      loadVideo: false,
31
      videoList: [],
32
      $player: null
33
    }
34
  },
35
  computed: {
36
    visible: {
37
      get () { return this.visibled },
38
      set (val) {
39
        if (!val) this.$player.pause()
40
        this.$emit('update:visibled', val)
41
      }
42
    }
43
  },
44
  watch: {
45
    list: {
46
      handler (val) {
47
        console.warn(`list Change`)
48
        this.resetVideoList()
49
        if (val.length > 0) {
50
          this.currentTab = val[0].fileId
51
          // 手动触发第一个tab点击事件
52
          this.handleTabChange(null, 0)
53
        }
54
      },
55
      immediate: true
56
    }
57
  },
58
  methods: {
59
    // 初始化
60
    handlePlayerInited (player) {
61
      this.$player = player
62
      window.player = this
63
      let distinguishBtn = player.controlBar.addChild('button')
64
      distinguishBtn.addClass('aidicon')
65
      distinguishBtn.addClass('aidicon-image-outline')
66
      distinguishBtn.setAttribute('title', '识别记录')
67
      distinguishBtn.size = '20'
68
      distinguishBtn.on('click', () => {
69
        this.$emit('goDistinguishRecord')
70
      })
71
      let repalyBtn = player.controlBar.addChild('button')
72
      repalyBtn.addClass('aidicon')
73
      repalyBtn.addClass('aidicon-piechart-outline')
74
      repalyBtn.setAttribute('title', '视频回放')
75
      repalyBtn.on('click', () => {
76
        this.$emit('videoReplay', this.list[0].id)
77
      })
78
    },
79
    async handleTabChange (name, index) {
80
      this.$player.pause()
81
      await this.preloadOriVideoUrl(index)
82
      this.play(index)
83
    },
84
    handlePlayerCurrentChange (e, item) {
85
      const { index, fileId } = item
86
      this.currentTab = fileId
87
      this.preloadOriVideoUrl(index)
88
    },
89
    resetVideoList () {
90
      const videoList = this.list.map((item, index) => {
91
        const { fileId, fileType } = item
92
        return {
93
          index,
94
          fileId,
95
          fileType,
96
          loaded: false
97
        }
98
      })
99
100
      this.videoList = videoList
101
    },
102
    play (index) {
103
      console.log(`播放:index=${index}`)
104
      // 调用额外的currentItem方法以避免currentItem在首次不生效
105
      // https://github.com/brightcove/videojs-playlist/blob/master/docs/api.md
106
      this.$player.playlist.currentItem()
107
      this.$player.playlist.currentItem(index)
108
      this.$player.play()
109
    },
110
    /**
111
     *  从index开始预载videoList的视频地址
112
     *  此方法将在获取index对应的地址后就立即返回
113
     */
114
    preloadOriVideoUrl (index = 0, maxLength = 5) {
115
      return new Promise((resolve, reject) => {
116
        for (let i = index; i in this.videoList && i - index < maxLength; i++) {
117
          console.log(`预载地址:index=${i}`)
118
          const item = this.videoList[i]
119
          const task = item.loaded
120
            ? Promise.resolve()
121
            : this.getOriVideoUrl(item.fileId).then(resp => {
122
              console.log(`预载完成,更新播放源:index=${i}`)
123
              item.loaded = true
124
              item.sources = [{
125
                src: resp.url,
126
                type: item.fileType
127
              }]
128
            })
129
          if (i === index) {
130
            this.loadVideo = !item.loaded
131
            task.then(() => {
132
              resolve()
133
            }).finally(() => {
134
              this.loadVideo = false
135
            })
136
          }
137
        }
138
      })
139
    },
140
    /*
141
     * 获取真实视频地址
142
     */
143
    getOriVideoUrl (fileId) {
144
      console.log(`请求地址:${fileId}`)
145
      // fake
146
      return new Promise((resolve, reject) => {
147
        setTimeout(() => {
148
          const url = fileId || 'rtmp://10.19.90.34:2935/live?token=039b6232ce6548210722a4c0de19c62e/1'
149
          resolve({
150
            url
151
          })
152
        }, 1000)
153
      })
154
    }
155
  }
156
}
157
</script>
158
159
<style lang="scss">
160
.replayer {
161
  display: flex;
162
  &-list {
163
    margin-right: 20px;
164
    // width: 200px;
165
  }
166
167
  &-video {
168
    position: relative;
169
    flex: auto;
170
  }
171
}
172
</style>

+ 31 - 45
security-protection-platform/src/modules/videoSurveillance/index.vue

@ -14,16 +14,8 @@
14 14
15 15
    <div class="page-bottom grid-demo">
16 16
      <t-col v-for="(item,index) in videoList" :span="viewLayoutSpan" :key="index" :value="item.resourceToolId" style="margin-top:24px">
17
        <video-player
18
          :ref="'video'+index"
19
          :options="videoOptions[index]"
20
          :playsinline="false"
21
          :events="events"
22
          class="vjs-custom-skin videoPlayer"
23
          @dblclick="handlefullscreenchange"
24
        ></video-player>
17
        <video-player :ref="'video'+index" :options="videoOptions[index]" :playsinline="false" :events="events" class="vjs-custom-skin videoPlayer" @dblclick="handlefullscreenchange"></video-player>
25 18
      </t-col>
26
      <!-- <rtmp-video :list="getVideoPlayList(item)" @goDistinguishRecord="goDistinguishRecord(item.resourceToolId)" @videoReplay="handleReview"></rtmp-video> -->
27 19
    </div>
28 20
    <t-pager :page-size="videoPageSize" :current="videoCurrent" :total="videoTotal" :sizer-range="[ 1, 4, 9, 16 ]" class="pager" show-elevator @on-change="onChangeGate"></t-pager>
29 21
    <replay-dialog :list="replayList" :visibled.sync="showReplayDialog" @get-list="queryMonitorVideoLog" />
@ -31,7 +23,6 @@
31 23
</template>
32 24
<script>
33 25
import sysapi from '@/api/videoSurveillance'
34
import RtmpVideo from './components/rtmpVideoPlay'
35 26
import ReplayDialog from './components/ReplayDialog'
36 27
import formatDateTime from '@/utils/formatDateTime.js'
37 28
import videojs from 'video.js'
@ -41,7 +32,7 @@ require('video.js/dist/lang/zh-CN.js')
41 32
require('video.js/dist/video-js.min.css')
42 33
43 34
export default {
44
  components: { ReplayDialog, RtmpVideo },
35
  components: { ReplayDialog },
45 36
  filters: {
46 37
    handleText (value) {
47 38
      if (!value) return ''
@ -79,7 +70,7 @@ export default {
79 70
    }
80 71
  },
81 72
  computed: {
82
    player() {
73
    player () {
83 74
      return this.$refs.videoPlayer1.player
84 75
    }
85 76
  },
@ -212,7 +203,7 @@ export default {
212 203
        console.log(err)
213 204
      })
214 205
    },
215
    handlefullscreenchange(val) {
206
    handlefullscreenchange (val) {
216 207
      // 因为我是又封装了一个组件,打印val会有相应所需的属性,全屏状态为:isFullscreen_
217 208
      val.isFullscreen_ = !val.isFullscreen_
218 209
      // this.$emit('fullscreenchange', val)
@ -330,49 +321,44 @@ export default {
330 321
      }
331 322
    }
332 323
  }
333
.pager {
324
  .pager {
334 325
    margin-right: auto;
335 326
    margin: 21px 0px 24px 0;
336 327
    float: right;
337 328
  }
338
.vjs-custom-skin > .video-js .vjs-control-bar .vjs-fullscreen-control{
339
  height:38px !important;
340
}
341
.video-js .vjs-control{
329
  .vjs-custom-skin > .video-js .vjs-control-bar .vjs-fullscreen-control {
330
    height: 38px !important;
331
  }
332
  .video-js .vjs-control {
342 333
    cursor: pointer;
343 334
    width: 28px;
344
    margin-right:12px;
335
    margin-right: 12px;
345 336
  }
346
.vjs-control-bar{
337
  .vjs-control-bar {
338
    display: flex;
339
    justify-content: center;
340
    align-items: center;
341
  }
342
  .video-js button {
343
    font-size: 16px;
344
  }
345
  .aidicon-image-outline:hover {
346
    color: #0089d4 !important;
347
  }
348
  .aidicon-piechart-outline:hover {
349
    color: #0089d4 !important;
350
  }
351
  .vjs-icon-placeholder:hover {
352
    color: #0089d4 !important;
353
  }
354
  .vjs-icon-placeholder {
355
    font-size: 13px;
347 356
    display: flex;
348 357
    justify-content: center;
349 358
    align-items: center;
350
}
351
.video-js button{
352
  font-size:16px;
353
}
354
.aidicon-image-outline:hover{
355
  color: #0089d4 !important;
356
}
357
.aidicon-piechart-outline:hover{
358
  color: #0089d4 !important;
359
}
360
.vjs-icon-placeholder:hover{
361
  color: #0089d4 !important;
362
}.vjs-icon-placeholder{
363
  font-size: 13px;
364
  display: flex;
365
  justify-content: center;
366
  align-items: center;
367
}
368
.vjs-tech {
369
  pointer-events: none;
370
}
371
  .vjs-error-display{
372
    display:none
373 359
  }
374
  .vjs-big-play-button{
375
    display:none
360
  .vjs-tech {
361
    pointer-events: none;
376 362
  }
377 363
}
378 364
</style>