[FE]首页直播组件

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

@@ -21,5 +21,11 @@ const api = {
      return resp.data
    })
  }
  // 直播流
  // queryMonitorSceneTerminalRel () {
  //   return $default.get('/sp/monitorSceneTerminal/queryMonitorSceneTerminalRel', {monitorSceneId:2}).then(resp => {
  //     return resp.data
  //   })
  // }
}
export default api

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

@@ -9,46 +9,28 @@
    </div>
    <div class="body">
      <div class="body-left">
        <div :style="`height:260px`" class="body-left-item">
        <div :style="`height:34%`" class="body-left-item">
          <div :style="`background-image: url(${titleImgBg})`" class="title">
            <span class="title-span">出勤统计</span>
          </div>
          <div id="doughnut" style="height: 100%"></div>
          <div id="doughnut" style="height: 100%;width: 100%"></div>
        </div>
        <div :style="`height:260px;margin-top: 24px;`" class="body-left-item">
        <div :style="`height:34%;margin-top: 3%;`" class="body-left-item">
          <div :style="`background-image: url(${titleImgBg})`" class="title">
            <span class="title-span">告警分析</span>
          </div>
          <div id="bar" style="height: 100%"></div>
          <div id="bar" style="height: 100%;width: 100%"></div>
        </div>
        <div :style="`height:220px;margin-top: 24px;`" class="body-left-item">
        <div :style="`height:29%;margin-top: 3%;`" class="body-left-item">
          <div :style="`background-image: url(${titleImgBg})`" class="title">
            <span class="title-span">近24h告警</span>
          </div>
          <div class="top4">
            <t-row :gutter="2" align="center" class="top4-row">
            <t-row v-for="(item,index) in topData" :gutter="2" align="center" class="top4-row">
              <t-col span="6">
                <div :style="`background-image: url(${polygon})`" class="polygon">1</div>
                &nbsp;&nbsp;{{ topData[0].name }}</t-col>
              <t-col span="2" offset="4">{{ topData[0].value }}个</t-col>
            </t-row>
            <t-row :gutter="2" align="center" class="top4-row">
              <t-col span="6">
                <div :style="`background-image: url(${polygon})`" class="polygon">2</div>
                &nbsp;&nbsp;{{ topData[1].name }}</t-col>
              <t-col span="2" offset="4">{{ topData[1].value }}个</t-col>
            </t-row>
            <t-row :gutter="2" align="center" class="top4-row">
              <t-col span="6">
                <div :style="`background-image: url(${polygon})`" class="polygon">3</div>
                &nbsp;&nbsp;{{ topData[2].name }}</t-col>
              <t-col span="2" offset="4">{{ topData[2].value }}个</t-col>
            </t-row>
            <t-row :gutter="2" align="center" class="top4-row">
              <t-col span="6">
                <div :style="`background-image: url(${polygon})`" class="polygon">4</div>
                &nbsp;&nbsp;{{ topData[3].name }}</t-col>
              <t-col span="2" offset="4">{{ topData[3].value }}个</t-col>
                <div :style="`background-image: url(${polygon})`" class="polygon">{{ index + 1 }}</div>
                &nbsp;&nbsp;{{ item.name }}</t-col>
              <t-col span="2" offset="4">{{ item.value }}个</t-col>
            </t-row>
          </div>
        </div>
@@ -57,15 +39,24 @@
        <div :style="`background-image: url(${titleImgBg})`" class="title" style="width: 370px;">
          <span class="title-span">重点区域监控</span>
        </div>
        <video-player ref="videoPlayer" :options="videoOptions" class="vjs-custom-skin videoPlayer" :playsinline="true"></video-player>
<!--        <img src="@/assets/images/indexT1.png" style="width: 730px;height: 730px;padding-left: 20px;padding-top: 10px;">-->
        <video-player ref="videoPlayer" :options="videoOptions" :playsinline="true" class="vjs-custom-skin videoPlayer"></video-player>
        <div class="videoPlayers">
          <div v-for="(item,index) in videoOptionsList" class="videoPlayer-sm" @click="videoSwitchover(item)">
            <video-player ref="videoPlayer"
                          :options="item.options"
                          :playsinline="true"
                          :style="`padding: 0 2.5% 2.5% 2%;border-radius: 5px;border: ${1-index}px solid #009bf3;`"
                          class="vjs-custom-skin videoPlayer">
            </video-player>
            <div style="color: white;text-align: center;">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="body-right">
        <div :style="`background-image: url(${titleImgBg})`" class="title" style="width: 330px;">
          <span class="title-span">人员进出识别</span>
        </div>
        <img src="@/assets/images/indexT2.png" style="width: 325px;height: 730px;padding-left: 15px;padding-top: 10px;">
        <img src="@/assets/images/indexT2.png" style="width: 95%;height: 95%;padding-left: 15px;padding-top: 10px;">
      </div>
    </div>
  </div>
@@ -77,6 +68,7 @@ import titleImgBg from '@/assets/images/indexTitle.png'
import polygon from '@/assets/images/polygon.png'
import echarts from 'echarts'
import dasapi from '@/api/dashboard'
import sysapi from '@/api/system'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import { videoPlayer } from 'vue-video-player'
@@ -121,6 +113,7 @@ export default {
    return {
      nowDate: new Date(),
      videoOptions: {},
      videoOptionsList: [],
      imgBg: imgBg,
      titleImgBg: titleImgBg,
      polygon: polygon,
@@ -128,43 +121,14 @@ export default {
      population: 0,
      alarmDataX: [],
      alarmDataY: [],
      topData: [
        {name: '未戴安全帽', value: ''},
        {name: '人员聚集', value: ''},
        {name: '吸烟', value: ''},
        {name: '摔倒', value: ''}],
      topData: [],
      topData1: []
    }
  },
  computed: {
  },
  mounted () {
    this.videoOptions = {
      live: true,
      autoplay: true,
      fluid: true,
      notSupportedMessage: '暂时无法播放',
      controlBar: {
        timeDivider: true,
        durationDisplay: true,
        remainingTimeDisplay: false,
        fullscreenToggle: true // 全屏按钮
      },
      techOrder: ['flash'],
      flash: {
        hls: { withCredentials: false },
        swf: 'static/video-js.swf' // 引入静态文件swf
      },
      sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
        type: 'rtmp/mp4',
        src: 'rtmp://58.200.131.2:1935/livetv/hunantv' 
      }]
    }
    this.initVideo()
    setInterval(() => { // 当前时间
      this.nowDate = new Date()
    }, 1000)
@@ -173,7 +137,58 @@ export default {
    this.init24Top()
  },
  methods: {
    initVideo() {
      sysapi.getTerminalRel(2).then(res => {
        this.videoOptions = {
          live: true,
          autoplay: true,
          fluid: false,
          height: document.documentElement.clientHeight * 0.60,
          notSupportedMessage: '暂时无法播放',
          controlBar: {
            timeDivider: false,
            durationDisplay: false,
            remainingTimeDisplay: false,
            fullscreenToggle: true // 全屏按钮
          },
          techOrder: ['flash'],
          flash: {
            hls: { withCredentials: false },
            swf: 'static/video-js.swf' // 引入静态文件swf
          },
          sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
            type: 'rtmp/mp4',
            src: res.data.data[0].videoUrl
          }]
        }
        this.videoOptionsList = []
        res.data.data.forEach(e => {
          this.videoOptionsList.push({
            options:{
              live: true,
              autoplay: true,
              fluid: false,
              height: document.documentElement.clientHeight * 0.15,
              notSupportedMessage: '暂时无法播放',
              controls: false,
              techOrder: ['flash'],
              flash: {
                hls: { withCredentials: false },
                swf: 'static/video-js.swf' // 引入静态文件swf
              },
              sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
                type: 'rtmp/mp4',
                src: e.videoUrl
              }]
            },
            name: e.resourceToolName
          })
        })
      })
    },
    videoSwitchover(itme){
      this.videoOptions.sources = itme.options.sources
    },
    gotoSystem() {
      this.$router.push({name:'videoSurveillance'})
    },
@@ -205,11 +220,8 @@ export default {
      })
    },
    init24Top() {
      this.topData1 = dasapi.queryAlarmAnalysisTopList().then(res => {
        this.topData1 = res.data
        if (res.data.length>3){
          this.topData = this.topData1
        }
      this.topData = dasapi.queryAlarmAnalysisTopList().then(res => {
        this.topData = res.data
      })
    },
    initAttendanceData() {
@@ -389,8 +401,7 @@ export default {
<style lang="scss">
.index{
  width: 1500px;
  height: 880px;
  height:100vh;
  background-color: #011d40;
  .time{
    width: 500px;
@@ -399,15 +410,14 @@ export default {
    margin-top: -14px;
  }
  .goto{
    display:block;
    float:right;
    cursor: pointer;
    margin-top: -30px;
    width: 122px;
    width: 8%;
    height: 40px;
    border-radius: 5px;
    background-color: #011d40; /* 浏览器不支持的时候显示 */
    box-shadow: 0 0 30px -10px #009bf3 inset;
    margin-right: 10px;
    margin-left: 91%;
    align-items: center;
    text-align: center;
    padding-top: 6px;
@@ -420,8 +430,7 @@ export default {
    display: flex;
    align-items: center;
    text-align: center;
    height: 45.1px;
    width: 1500px;
    height: 6%;
    overflow: hidden;
    position: relative;
    .top-logo{
@@ -429,21 +438,21 @@ export default {
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
      height: 24px;
      width: 400px;
      height: 50%;
      width: 25%;
      vertical-align: middle
    }
  }
  .body{
    display: flex;
    width: 1500px;
    padding-top: 5px;
    height: 90%;
    padding-top: 1%;
    justify-content: space-around;
    .body-left{
      width: 340px;
      height: 788px;
      width: 23%;
      height: 96%;
      .body-left-item{
        width: 340px;
        width: 100%;
        border-radius: 5px;
        background-color: #011d40; /* 浏览器不支持的时候显示 */
        box-shadow: 0 0 30px -10px #009bf3 inset;
@@ -452,7 +461,6 @@ export default {
          padding-right: 15px;
          color: #00d8f3;
          font-size: 15px;
          font-family: "Microsoft YaHei";
          height: 100%;
          .top4-row{
            border: 0 none;
@@ -474,15 +482,15 @@ export default {
      }
    }
    .body-center{
      width: 750px;
      height: 788px;
      width: 50%;
      height: 96%;
      border-radius: 5px;
      background-color: #011d40; /* 浏览器不支持的时候显示 */
      box-shadow: 0 0 30px -10px #009bf3 inset;
    }
    .body-right{
      width: 340px;
      height: 788px;
      width: 23%;
      height: 96%;
      border-radius: 5px;
      background-color: #011d40; /* 浏览器不支持的时候显示 */
      box-shadow: 0 0 30px -10px #009bf3 inset;
@@ -494,7 +502,7 @@ export default {
    align-items: center;
    text-align: center;
    height: 28px;
    width: 340px;
    width: 100%;
    margin: 0 auto;
    .title-span{
      height: 28px;
@@ -511,7 +519,7 @@ export default {
    align-items: center;
    text-align: center;
    height: 28px;
    width: 350px;
    width: 47%;
    margin: 0 auto;
    .title-span{
      height: 28px;
@@ -522,6 +530,25 @@ export default {
      margin: auto;
    }
  }
  .videoPlayer{
    width: 100%;
    padding: 1.5% 2.5% 0.5% 2.5%;
  }
  .videoPlayers{
    display: flex;
    width: 100%;
    height: 25%;
    padding: 0 2.5% 0.5% 2.5%;
    justify-content: space-around;
    .videoPlayer-sm{
      z-index:9999;
      cursor: pointer;
      width: 23%;
      height: 95%;
    }
  }
  .vjs-progress-control{
    visibility:hidden
  }
}
</style>