[FE] 首页直播组件更换

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

    <t-table :data="data" line @selection-change="handleSelectionChange">
      <t-table-column type="selection" width="34px"></t-table-column>
      <t-table-column label="姓名" prop="relateEmployeeRoleName" width="60px">
      </t-table-column>
      <t-table-column label="员工编号" prop="code" width="80px">
      <t-table-column label="员工编号" prop="employeeCode" width="80px">
      </t-table-column>
      <t-table-column label="公司" prop="orgName" width="94px">
      <t-table-column label="公司" prop="organizationName" width="94px">
      </t-table-column>
      <t-table-column label="部门" prop="orgName" width="94px">
      </t-table-column>
      <t-table-column label="职务" prop="mainJobPosition" width="80px">
      <t-table-column label="职务" prop="employeePositionZh" width="80px">
      </t-table-column>
      <t-table-column label="相似度" prop="similarity" width="75px">
      </t-table-column>

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

        <div :style="`background-image: url(${titleImgBg})`" class="title" style="width: 370px;">
          <span class="title-span">重点区域监控</span>
        </div>
        <video-player ref="videoPlayer" :options="videoOptions" :playsinline="true" class="vjs-custom-skin videoPlayer"></video-player>
        <!--        <video-player ref="videoPlayer" :options="videoOptions" :playsinline="true" class="vjs-custom-skin videoPlayer"></video-player>-->
        <videoPlayer
          ref="videoPlayer"
          :options="videoOptions"
          :playsinline="true"
          class="vjs-custom-skin videoPlayer"
        />
        <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>
            <!--            <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>-->
            <videoPlayer
              ref="videoPlayer"
              :options="videoOptions"
              :playsinline="true"
              :style="`padding: 0 2.5% 2.5% 2%;border-radius: 5px;border: ${1-index}px solid #009bf3;`"
              class="vjs-custom-skin videoPlayer"
            />
            <div style="color: white;text-align: center;">{{ item.name }}</div>
          </div>
        </div>
        <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: 95%;height: 95%;padding-left: 15px;padding-top: 10px;">
        <div v-for="(item,index) in distinguishData" :style="`background-image: url(${border})`" class="distinguish">
          <div class="distinguish-title"> {{ item.name }} </div>
          <div class="distinguish-row">
            <div class="similarity">
              <p style="opacity: 1;font-size: 12px">70%</p>
            </div>
            <img src="@/assets/images/indexT1.png" class="distinguish-col">
            <img src="@/assets/images/indexT1.png" class="distinguish-col">
            <div style="width: 40%;margin-top: 4%;height: 79%;">
              <div class="distinguish-col-row">王小明(00220)</div>
              <div class="distinguish-col-row">已佩戴口罩</div>
              <div class="distinguish-col-row">2021.01.05 12:11:00</div>
            </div>
          </div>
        </div>
        <!--        <img src="@/assets/images/indexT2.png" style="width: 95%;height: 95%;padding-left: 15px;padding-top: 10px;">-->
      </div>
    </div>
  </div>
import imgBg from '@/assets/images/indexTop.png'
import titleImgBg from '@/assets/images/indexTitle.png'
import polygon from '@/assets/images/polygon.png'
import border from '@/assets/images/border.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'
// import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'
import VideoPlayer from '@/components/VideoPlayer'
export default {
  filters: {
    }
  },
  components: {
    videoPlayer
    VideoPlayer
  },
  data() {
    return {
      nowDate: new Date(),
      videoOptions: {},
      videoOptions: {
        autoplay: true, // 如果true,浏览器准备好时开始回放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:10', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        // 是否流体自适应容器宽高
        fluid: true,
        // // 设置视频播放器的显示宽度（以像素为单位）
        // width: '100px',
        // // 设置视频播放器的显示高度（以像素为单位）
        // height: '400px',
        sources: [{
          withCredentials: false,
          type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: 'http://10.19.90.34:1080/live/1.m3u8' // url地址
        }],
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: false,
          durationDisplay: false,
          remainingTimeDisplay: false,
          fullscreenToggle: false // 全屏按钮
        }
      },
      videoOptionsList: [],
      imgBg: imgBg,
      titleImgBg: titleImgBg,
      polygon: polygon,
      border: border,
      attendanceData: [],
      population: 0,
      alarmDataX: [],
      alarmDataY: [],
      topData: [],
      topData1: []
      topData1: [],
      distinguishData: [{name: '1风场', url: '@/assets/images/indexT1.png', url2: '@/assets/images/indexT1.png'},
        {name: '2风场', url: '@/assets/images/indexT1.png', url2: '@/assets/images/indexT1.png'},
        {name: '3风场', url: '@/assets/images/indexT1.png', url2: '@/assets/images/indexT1.png'},
        {name: '2风场', url: '@/assets/images/indexT1.png', url2: '@/assets/images/indexT1.png'}]
    }
  },
  computed: {
  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.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:{
            options: {
              live: true,
              autoplay: true,
              fluid: false,
        })
      })
    },
    videoSwitchover(itme){
    videoSwitchover(itme) {
      this.videoOptions.sources = itme.options.sources
    },
    gotoSystem() {
      this.$router.push({name:'videoSurveillance'})
      this.$router.push({name: 'videoSurveillance'})
    },
    initAttendance() {
      this.attendanceData = dasapi.queryAttendanceChart().then(res => {
    init24Top() {
      this.topData = dasapi.queryAlarmAnalysisTopList().then(res => {
        this.topData = []
        for (var i = 0; i < 4; i++) {
        for (var i = 0; i < 5; i++) {
          if (res.data[i]) {
            this.topData.push(res.data[i])
          }
      var option = null
      var gridWidth = 320 // 可以根据canvas的宽度和grid的right,left,width进行计算
      var fontsize = 12 // 字体大小
      var wordNum = parseInt((gridWidth / this.alarmDataX.length) / fontsize);
      var wordNum = parseInt((gridWidth / this.alarmDataX.length) / fontsize)
      var flag = 0
      this.alarmDataX.forEach(value => {
        if (value){
        if (value) {
          var strs = value.split('')
          var str = ''
          for (var i = 0, s; s = strs[i++];) {
        yAxis: [
          {
            type: 'value',
            minInterval: 1,
            axisLabel: {
              show: true,
              textStyle: {
                  show: true, // 是否展示
                  position: 'top', // 在上方显示
                  formatter: function(name) {
                    return name.value + '人'
                    return name.value + '个'
                  },
                  textStyle: {
                    fontSize: 14,
          .top4-row{
            border: 0 none;
            border-bottom: 2px dotted #00466b;
            height: 20%;
            height: 16%;
            .col-6{
              display: flex;
              .polygon{
                align-items: center;
                text-align: center;
                height: 100%;
                width: 16%;
                width: 15%;
              }
            }
          }
      border-radius: 5px;
      background-color: #011d40; /* 浏览器不支持的时候显示 */
      box-shadow: 0 0 30px -10px #009bf3 inset;
      .distinguish{
        -moz-background-size:100% 100%;
        background-size:100% 100%;
        width: 88%;
        height: 22%;
        margin-left: 6%;
        margin-top: 3%;
        padding-left: 1%;
        padding-right: 1%;
        padding-top: 1%;
        padding-bottom: 1%;
        .distinguish-title{
          align-items: center;
          text-align: center;
          height: 28px;
          width: 100%;
          margin: 0 auto;
          font-size: 16px;
          color: #00d8f3;
          //background-color: #003C74; 100%
          background: linear-gradient(to right, #011d40,#003C74,#011D40);
        }
        .distinguish-row{
          display: flex;
          color: #00d8f3;
          width: 100%;
          height: 100%;
          position: relative;
          .similarity{
            position: absolute;
            left:22%;
            top:27%;
            border: 2px solid  #00d8f3;
            width: 30px;
            height: 30px;
            background: #090404;
            opacity: 0.5;
            border-radius: 50%;
            padding-top: 1%;
          }
          .distinguish-col{
            width: 27%;
            margin-top: 2%;
            height: 70%;
          }
          .distinguish-col-row{
            padding-left: 5%;
            height: 30%;
            width: 130%;
            color: white;
            font-size: 14px;
          }
        }
      }
    }
  }
  .title{