Merge branch 'master' of http://10.1.235.20:3000/asiainfo/ebc.git

ebc-middle-platform/src/assets/locals/zh-CN.json

@@ -81,7 +81,7 @@
      "hello": "您好",
      "welcome": "欢迎登录",
      "system": "系统",
      "demo": "系统名称",
      "demo": "人员定位与搜救",
      "username": "用户名",
      "account": "账户名",
      "password": "密码",

ebc-middle-platform/src/components/loginer.vue

@@ -158,11 +158,23 @@ export default {
            this.$test
              .post(services.login.FIND_MENUS, {userCode: data.RESULT.CODE})
              .then((data) => {
                localStorage.setItem('menus',  JSON.stringify(data))
                var map = new Map()
                data.RESULT.forEach(e => {
                  if (e.ROOT_MENU){
                    map.set(e.ROOT_MENU[0].NAME,e.ROOT_MENU[0].ID)
                  }
                  map.set(e.NAME,e.ID)
                  if (e.menu_list) {
                    e.menu_list.forEach( m => {
                      map.set(m.NAME,m.ID)
                    })
                  }
                })
                debugger
                localStorage.setItem('menus',  JSON.stringify(map))
                store.dispatch(`permission/${GENERATE_ROUTES}`, roles)
                this.$router.push({ name: this.homeName })
              })
            this.$router.push({ name: this.homeName })
          }).catch((e) => {
            this.loging = false
            this.$Message.danger(e)

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

@@ -8,6 +8,13 @@ const api = {
  getaccesstype () {
    return $http.get('/access/getaccesstype')
  },
  getOneInAndOutRecord (params) {
    return $default.get('/sp/inAndOutRecord/queryOneInAndOutRecord', params)
  },
  // 获取公司
  getcompanyTypesList () {
    return $default.get('sp/employeeManagement/queryCompanyList')
  }
}

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

@@ -20,6 +20,10 @@ const api = {
    return $default.get('/sp/homePage/queryAlarmAnalysisTopList', {}).then(resp => {
      return resp.data
    })
  },
  // 进出识别
  queryHomeLastInAndOutRecord (data) {
    return $default.get('/sp/inAndOutRecord/queryHomeLastInAndOutRecord?monitorSceneId=3', data)
  }
  // 直播流
  // queryMonitorSceneTerminalRel () {

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

@@ -50,7 +50,14 @@ const api = {
      return $default.delete(`/sp/employeeManagement/deleteEmployee?employeeId=${data.employeeId}`).catch((err) => { return err })
    }
  },
  // 新增用户
  creteEmployee(params) {
    return $default.post('/sp/employeeManagement/createEmployee', params)
  },
  // 获取职务列表
  getJobPositionList() {
    return $default.post('/sp/employeeManagement/queryJobPositionList')
  },
  // 获取单个用户信息
  getOneEmployee (params) {
    return $default.get('/sp/employeeManagement/queryOneEmployee', params)

security-protection-platform/src/components/VideoPlayer/index.vue

@@ -19,19 +19,13 @@ const defaultPlayerOptions = {
  // liveui: true,
  controlBar: {
    children: [
      { name: 'playToggle' }, // 播放按钮
      { name: 'currentTimeDisplay' }, // 当前已播放时间
      { name: 'progressControl' }, // 播放进度条
      { name: 'durationDisplay' }, // 总时间
      {name: 'currentTimeDisplay'}, // 当前已播放时间
      {name: 'durationDisplay'}, // 总时间
      { // 倍数播放
        name: 'playbackRateMenuButton',
        playbackRates: [0.5, 1, 1.5, 2, 2.5]
      },
      {
        name: 'volumePanel', // 音量控制
        inline: true // 不使用水平方式
      },
      { name: 'FullscreenToggle' } // 全屏
      {name: 'FullscreenToggle'} // 全屏
    ]
  }
}

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

@@ -1,15 +1,16 @@
<template>
s<template>
  <div class="access">
    <div class="access_header">
      <div>
        <span class="title">开始时间 : </span>
        <t-date-picker :confirm="false" v-model="searchdata.beginTime" placeholder="请选择开始时间" style="width:200px;height:32px"></t-date-picker>
        <t-date-picker :confirm="false" v-model="searchdata.beginDay" placeholder="请选择开始时间" style="width:200px;height:32px"></t-date-picker>
      </div>
      <div>
        <span class="title">结束时间 : </span>
        <t-date-picker :confirm="false" v-model="searchdata.endTime" placeholder="请选择结束时间" style="width:200px;height:32px"></t-date-picker>
        <t-date-picker :confirm="false" v-model="searchdata.endDay" placeholder="请选择结束时间" style="width:200px;height:32px"></t-date-picker>
      </div>
      <!-- <div>
@@ -21,7 +22,7 @@
      </div> -->
      <div class="alarm_people">
        <span class="title">员工 : </span>
        <t-input v-model="searchdata.relateEmployeeNameAsLike" placeholder="员工姓名、编号关键字" style="width: 200px"></t-input>
        <t-input v-model="searchdata.nameAsLike" placeholder="员工姓名" style="width: 200px"></t-input>
      </div>
    </div>
@@ -42,17 +43,17 @@
    <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 label="姓名" prop="employeeName" width="60px">
      </t-table-column>
      <t-table-column label="员工编号" prop="employeeCode" width="80px">
      </t-table-column>
      <t-table-column label="公司" prop="organizationName" width="94px">
      <t-table-column label="公司" prop="companyname" width="94px">
      </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="employeePositionZh" width="80px">
      </t-table-column>
      <t-table-column l="相似度" prop="similarity" width="75px">
      <t-table-column prop="simi" l="相似度" width="75px">
      </t-table-column>
      <t-table-column label="进出时间" prop="taskExecuteTime" width="160px">
      </t-table-column>
@@ -60,7 +61,7 @@
      </t-table-column>
      <t-table-column label="终端名称" prop="resourceToolName" width="97px">
      </t-table-column>
      <t-table-column label="终端编号" prop="resourceToolCode" width="72px">
      <t-table-column label="终端编号" prop="resourceToolCode" width="90px">
      </t-table-column>
      <t-table-column label="操作" width="80px">
        <template slot-scope="scope">
@@ -71,7 +72,7 @@
    </t-table>
    <!-- 分页 -->
    <t-pager :total="total" :current="page" show-elevator class="pager" @on-change="onChange"></t-pager>
    <t-pager :total="total" :current="page" :page-size="limit" show-elevator class="pager" @on-change="onChange"></t-pager>
    <!-- 模态框 -->
    <t-modal :visibled.sync="detail_modal" title="识别详情" width="840px" height="538px">
@@ -81,36 +82,42 @@
          <div class="detail_item1">
            <div>抓拍图片</div>
            <div>
              <img :src="rowdata.idenVideoUrl" alt="" srcset="" style="width:100%;height:100%">
              <img :src="rowdata.pictureInfo.fileUrl" alt="" srcset="" style="width:100%;height:100%">
            </div>
          </div>
          <div class="detail_item2">
            <div>识别结果</div>
            <div>
              <div>
                <img :src="rowdata.idenPictureUrl" alt="" srcset="" style="width:120px;height:160px;border-radius: 5px; ">
                <!-- 修改-->
                <img src="" alt="" srcset="" style="width:120px;height:160px;border-radius: 5px; ">
                <div class="bottomimg">抓拍图片</div>
              </div>
              <div>
                <!-- 修改-->
                <img src="http://img95.699pic.com/photo/50028/0321.jpg_wh300.jpg" alt="" srcset="">
              </div>
              <div>
                <img :src="rowdata.headerUrl" alt="" srcset="" style="width:100%;height:160px; border-radius: 5px;">
                <img :src="rowdata.alarmInfo.headerImage" alt="" srcset="" style="width:100%;height:160px; border-radius: 5px;">
                <div class="bottomimg">人脸底库</div>
              </div>
            </div>
            <div class="describe">
              <div>
                <t-icon icon="user-outline"></t-icon> {{ rowdata.relateEmployeeRoleName }}（{{ rowdata.code }}）
                <t-icon icon="user-outline"></t-icon>
                {{ rowdata.alarmInfo.employeeName }}（{{ rowdata.alarmInfo.employeeCode }}）
              </div>
              <div>
                <t-icon icon="map-marker"></t-icon> {{ rowdata.terminalPosition }}
                <t-icon icon="map-marker"></t-icon>
                {{ rowdata.alarmInfo.terminalPosition || '--' }}
              </div>
              <div>
                <t-icon icon="clock-outline"></t-icon> {{ rowdata.taskExecuteTime }}
                <t-icon icon="clock-outline"></t-icon>
                {{ rowdata.alarmInfo.taskExecuteTime }}
              </div>
              <div>
                <t-icon icon="team-outline"></t-icon> 相似度：{{ rowdata.similarity }}
                <t-icon icon="team-outline"></t-icon> 相似度：
                {{ rowdata.alarmInfo.simi }}
              </div>
            </div>
          </div>
@@ -126,9 +133,9 @@
<script>
import accessapi from '@/api/access'
import formatDateTime from '@/utils/formatDateTime.js'
export default {
  data () {
    return {
      // 进出类型
@@ -140,14 +147,19 @@ export default {
      // 模态框显示
      detail_modal: false,
      // 当前行数据
      rowdata: {},
      rowdata: {
        alarmInfo: {},
        pictureInfo: {}
      },
      // 公司列表
      companyTypesList: [],
      // 查询的参数
      searchdata: {
        relateEmployeeNameAsLike: '',
        beginTime: '',
        endTime: ''
        nameAsLike: '',
        beginDay: '',
        endDay: ''
      },
      // 一页的数据
      data: [
@@ -162,18 +174,42 @@ export default {
  mounted () {
    // this.gettype()
    this.search()
    this.getcompanyTypesList()
    // this.search()
  },
  methods: {
    // 表格中的选择数据
    handleSelectionChange (val) {
      this.selectdata = val
    },
    // 获取公司
    async getcompanyTypesList () {
      var res = await accessapi.getcompanyTypesList()
      // console.log('公司信息是', res)
      if (res.status === 200) {
        this.companyTypesList = res.data.data
        this.search()
      } else {
        this.$Message.danger('获取数据失败')
      }
    },
    // 点击详情
    handleClick (scope) {
      this.detail_modal = true
      this.rowdata = scope.row
      console.log(this.rowdata)
    async handleClick (scope) {
      // this.rowdata = scope.row
      // console.log(this.rowdata)
      // console.log('id是', scope.row.aiIdenLogId)
      var res = await accessapi.getOneInAndOutRecord({ params: { aiIdenLogId: scope.row.aiIdenLogId } })
      if (res.data.success) {
        this.detail_modal = true
        // this.rowdata = res.data.data
        this.rowdata.pictureInfo = res.data.data.pictureInfo
        this.rowdata.alarmInfo = res.data.data.alarmInfo
        // console.log(res.data.data)
        // console.log('详情数据是', this.rowdata)
      } else {
        this.$Message.danger('获取数据失败')
      }
    },
    // 分页
    onChange (val) {
@@ -199,7 +235,7 @@ export default {
    // 查询数据
    async search () {
      // 检验数据
      var flag = this.startreend(this.searchdata.beginTime, this.searchdata.endTime)
      var flag = this.startreend(this.searchdata.beginDay, this.searchdata.endDay)
      if (flag) {
        // console.log(this.page)
        // console.log(this.searchdata)
@@ -211,17 +247,45 @@ export default {
        var res = await accessapi.getaccesslist({ params: params })
        // console.log(res)
        if (res.status === 200) {
          console.log(res)
          // console.log(res)
          this.data = res.data.data.data
          this.data = this.data.map((item) => { item.taskExecuteTime = formatDateTime(item.taskExecuteTime); return item })
          console.log(this.data)
          this.total = Math.ceil(res.data.data.total / res.data.data.size) * 5
          this.data = this.data.map((item) => {
            // 处理进出时间
            // item.taskExecuteTime = formatDateTime(item.taskExecuteTime)
            // 处理相似度
            // item.simi = this.percentagedata(item.simi)
            // console.log('公司的数据是', this.companyTypesList)
            // console.log('公司id', item)
            // console.log('公司名字是', this.companyTypesList.filter((item1) => { return item1.id === 10000 }))
            item.companyinfo = this.companyTypesList.filter((item1) => { return item1.id === item.companyId })
            if (item.companyinfo.length > 0) {
              item.companyname = item.companyinfo[0].name
            } else {
              item.companyname = ''
            }
            return item
          })
          // this.total = Math.ceil(res.data.data.total / res.data.data.size) * 5
          // console.log(this.total)
          this.total = res.data.data.total
          // console.log('数据是', this.data)
        }
      } else {
        this.$Message.danger('开始时间不能在结束时间的后面')
      }
    },
    percentagedata (point) {
      if (point === 0) {
        return 0
      }
      var str = Number(point * 100).toFixed(1)
      str += '%'
      return str
    },
    // 重置数据
    reset () {
      for (var index in this.searchdata) {

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

@@ -82,7 +82,7 @@
    </t-table>
    <!-- 分页 -->
    <t-pager :total="total" :current="page" show-elevator class="pager" @on-change="onChange"></t-pager>
    <t-pager :total="total" :current="page" :page-size="limit" show-elevator class="pager" @on-change="onChange"></t-pager>
    <!-- 模态框-->
    <t-modal :visibled.sync="details_modal" :title="clickdetail==0?'报警详情':'报警处理'" width="732px">
@@ -390,8 +390,9 @@ export default {
          this.data = res.data.data.data
          this.data = this.data.map((item) => { item.aiIdenTime = formatDateTime(item.aiIdenTime); return item })
          console.log(this.data)
          this.total = Math.ceil(res.data.data.total / res.data.data.size) * 5
          console.log('数据是', res)
          // this.total = Math.ceil(res.data.data.total / res.data.data.size) * 5
          this.total = res.data.data.total
        } else {
          this.$Message.danger('数据获取失败')
        }

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

@@ -1,5 +1,5 @@
<template>
  <div class="index">
  <div class="index" style="overflow:hidden">
    <div :style="`background-image: url(${imgBg})`" class="top" >
      <img src="@/assets/images/brand.png" class="top-logo">
    </div>
@@ -40,27 +40,30 @@
          <span class="title-span">重点区域监控</span>
        </div>
        <!--        <video-player ref="videoPlayer" :options="videoOptions" :playsinline="true" class="vjs-custom-skin videoPlayer"></video-player>-->
        <videoPlayer
        <video-player v-if="videoOptions !== {}"
          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)">
          <div v-for="(item,index) in videoOptionsList" class="videoPlayer-sm" @click="videoSwitchover(item,index)">
            <!--            <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
            <video-player
              ref="videoPlayer"
              :options="videoOptions"
              :playsinline="true"
              :style="`padding: 0 2.5% 2.5% 2%;border-radius: 5px;border: ${1-index}px solid #009bf3;`"
              :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>
            <div style="color: white;text-align: center;">{{ item.name }}</div>
          </div>
        </div>
@@ -70,17 +73,16 @@
          <span class="title-span">人员进出识别</span>
        </div>
        <div v-for="(item,index) in distinguishData" :style="`background-image: url(${border})`" class="distinguish">
          <div class="distinguish-title"> {{ item.name }} </div>
          <div class="distinguish-title"> {{ item.monitorSceneName }} </div>
          <div class="distinguish-row">
            <div class="similarity">
              <p style="opacity: 1;font-size: 12px">70%</p>
              <p class="p">{{ item.simi }}</p>
            </div>
            <img src="@/assets/images/indexT1.png" class="distinguish-col">
            <img src="@/assets/images/indexT1.png" class="distinguish-col">
            <img :src="item.newImg" alt="" class="distinguish-col">
            <img :src="item.headerImage" 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 class="distinguish-col-row">{{ item.employeeName }}({{ item.employeeCode }})</div>
              <div class="distinguish-col-row">{{ item.taskExecuteTime }}</div>
            </div>
          </div>
        </div>
@@ -92,6 +94,7 @@
<script>
import imgBg from '@/assets/images/indexTop.png'
import avatar from '@/assets/images/avatar.png'
import titleImgBg from '@/assets/images/indexTitle.png'
import polygon from '@/assets/images/polygon.png'
import border from '@/assets/images/border.png'
@@ -100,9 +103,13 @@ 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 'videojs-flash'
import VideoPlayer from '@/components/VideoPlayer'
import RtmpVideo from '../videoSurveillance/components/rtmpVideoPlay'
import videojs from 'video.js'
window.videojs = videojs
require('video.js/dist/lang/zh-CN.js')
require('video.js/dist/video-js.min.css')
export default {
  filters: {
@@ -137,43 +144,18 @@ export default {
    }
  },
  components: {
    VideoPlayer
    RtmpVideo
  },
  data() {
    return {
      checkedIndex: 0,
      events: ['fullscreenchange'],
      nowDate: new Date(),
      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 // 全屏按钮
        }
      },
      videoOptions: {},
      videoOptionsList: [],
      imgBg: imgBg,
      titleImgBg: titleImgBg,
      avatar: avatar,
      polygon: polygon,
      border: border,
      attendanceData: [],
@@ -182,75 +164,129 @@ export default {
      alarmDataY: [],
      topData: [],
      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'}]
      distinguishData: []
    }
  },
  computed: {
    player() {
      return this.$refs.videoPlayer1.player
    }
  },
  mounted () {
    this.initVideo()
    setInterval(() => { // 当前时间
      this.nowDate = new Date()
    }, 1000)
    this.initRecognition()
    this.initAttendance()
    this.initAlarm()
    this.init24Top()
    setInterval(() => { // 识别记录
      this.initRecognition()
    }, 10000)
  },
  methods: {
    async createMyButton () {
      this.$nextTick(() => {
        const bars = document.querySelectorAll('.vjs-control-bar')
        let time = document.getElementsByClassName('vjs-current-time vjs-time-control vjs-control')
        let start = document.getElementsByClassName('vjs-play-control vjs-control vjs-button')
        let volume = document.getElementsByClassName('vjs-volume-panel vjs-control vjs-volume-panel-horizontal')
        let text = document.getElementsByClassName('vjs-live-control vjs-control')
        bars.forEach((item, index) => {
          time.forEach(item => {
            item.remove()
          })
          start.forEach(item => {
            item.remove()
          })
          volume.forEach(item => {
            item.remove()
          })
          text.forEach(item => {
            item.remove()
          })
        })
      })
    },
    handlefullscreenchange(val) {
      // 因为我是又封装了一个组件，打印val会有相应所需的属性，全屏状态为：isFullscreen_
      val.isFullscreen_ = !val.isFullscreen_
      // this.$emit('fullscreenchange', val)
    },
    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 = {
          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: '300px',
          sources: [{
            withCredentials: false,
            type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: res.data.data[0].videoUrl // url地址
          }],
          flash: { hls: { withCredentials: false } },
          html5: { hls: { withCredentials: false } },
          notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: false,
            durationDisplay: false,
            remainingTimeDisplay: false,
            fullscreenToggle: true, // 全屏按钮,
            pictureInPictureToggle: false
          }
        }
        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
              }]
              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: e.videoUrl // url地址
              }],
              flash: { hls: { withCredentials: false } },
              html5: { hls: { withCredentials: false } },
              notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
              controlBar: {
                timeDivider: false,
                durationDisplay: false,
                remainingTimeDisplay: false,
                fullscreenToggle: false // 全屏按钮
              }
            },
            name: e.resourceToolName
          })
          this.createMyButton()
        })
      })
    },
    videoSwitchover(itme) {
    videoSwitchover(itme,index) {
      this.videoOptions.sources = itme.options.sources
      this.checkedIndex = index
    },
    gotoSystem() {
      this.$router.push({name: 'videoSurveillance'})
@@ -292,6 +328,46 @@ export default {
        }
      })
    },
    initRecognition() {
      dasapi.queryHomeLastInAndOutRecord({monitorSceneId: 3}).then(res => {
        var data = res.data.data
        if (data.length > 4) {
          data = data.slice(0, 4)
        }
        data.forEach(e => {
          e.simi = e.simi.split('.')[0] + '%'
          e.newImg = e.idenPictureUrl
          var loadTimer
          var imgObject = new Image()
          imgObject.setAttribute('crossOrigin', 'anonymous')
          imgObject.src = e.idenPictureUrl
          imgObject.onLoad = onImgLoaded()
          function onImgLoaded() {
            if (loadTimer != null) clearTimeout(loadTimer)
            if (!imgObject.complete) {
              loadTimer = setTimeout(function() {
                onImgLoaded()
              }, 3)
            } else {
              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])
            }
          }
          function getImagePortion(imgObj, newWidth, newHeight, startX, startY) {
            var tnCanvas = document.createElement('canvas')
            var tnCanvasContext = tnCanvas.getContext('2d')
            tnCanvas.width = newWidth; tnCanvas.height = newHeight
            var bufferCanvas = document.createElement('canvas')
            var bufferContext = bufferCanvas.getContext('2d')
            bufferCanvas.width = imgObj.width
            bufferCanvas.height = imgObj.height
            bufferContext.drawImage(imgObj, 0, 0)
            tnCanvasContext.drawImage(bufferCanvas, startX, startY, newWidth, newHeight, 0, 0, newWidth, newHeight)
            return tnCanvas.toDataURL()
          }
        })
        this.distinguishData = data
      })
    },
    initAttendanceData() {
      var dom = document.getElementById('doughnut')
      var myChart = echarts.init(dom)
@@ -602,6 +678,14 @@ export default {
            opacity: 0.5;
            border-radius: 50%;
            padding-top: 1%;
            filter:alpha(opacity=50); /*支持IE */
            -moz-opacity:0.5; /*支持FF */
            //opacity:0.5;
            .p{
              position:relative;
              color: #00d8f3;
              font-size: 10px
            }
          }
          .distinguish-col{
            width: 27%;
@@ -610,7 +694,8 @@ export default {
          }
          .distinguish-col-row{
            padding-left: 5%;
            height: 30%;
            padding-top: 5%;
            height: 40%;
            width: 130%;
            color: white;
            font-size: 14px;
@@ -673,5 +758,8 @@ export default {
  .vjs-progress-control{
    visibility:hidden
  }
  .checkedIndex{
    border: 1px solid #009bf3;
  }
}
</style>

security-protection-platform/src/modules/usermana/components/modal/addUser.vue

@@ -1,9 +1,9 @@
<template>
  <t-modal :visibled.sync="visibled" :mask-closable="false">
  <t-modal :visibled.sync="isVisibled" :mask-closable="false">
    <template slot="header">
      <div class="device-modal-title">{{ isEdit?'用户编辑':'新增用户' }}</div>
    </template>
    <t-form :model="addUserModal" :rules="addUserModalRules" label-position="right">
    <t-form ref="addUserModal" :model="addUserModal" :rules="addUserModalRules" label-position="right">
      <t-form-item label="姓名：" prop="name">
        <t-input v-model="addUserModal.name" placeholder="请输入姓名"></t-input>
      </t-form-item>
@@ -16,11 +16,11 @@
        </t-select>
      </t-form-item>
      <t-form-item v-if="addUserModal.apartments!==''" label="部门：" prop="organizeCode">
        <t-select-tree v-model="addUserModal.organizeCode" :node-data="departmentTypesList" width="200px" node-key="id"></t-select-tree>
        <t-select-tree v-model="addUserModal.organizeCode" :node-data="departmentTypesList" node-key="id"></t-select-tree>
      </t-form-item>
      <t-form-item label="职务：" prop="mainJobPosition">
        <t-select v-model="addUserModal.mainJobPosition" placeholder="请选择职务" clearable>
          <t-option v-for="(item,index) in dataList" :value="item.value" :key="index">{{ item.name }}</t-option>
          <t-option v-for="(item,index) in jobPoisitonList" :value="item.code" :key="index">{{ item.value }}</t-option>
        </t-select>
      </t-form-item>
      <t-form-item label="年龄：" prop="birthday">
@@ -30,18 +30,37 @@
        <t-input v-model="addUserModal.mainWirelessCall" placeholder="请输入11位手机号"></t-input>
      </t-form-item>
      <t-form-item label="人脸图片：" prop="facePicture">
        <t-input v-model="addUserModal.facePicture" placeholder="请输入手机号"></t-input>
        <t-upload
          ref="uploader"
          :show-uploaded="true"
          :allowed-ext="['jpg','jpeg','png']"
          :max-size="2048"
          :before-upload="$_onUploadBeforeUpload"
          :data="{picture:'11d'}"
          multiple
          style="width:120px;height:160px;background-color:#FFFFFF;"
          type="drag"
          action="http://10.19.90.34:8018/sp/employeeManagement/uploadEmployeePicture"
          class="demo-upload-list"
        >
          <div class="picture-upload">
            <t-icon class="upload-icon" icon="plus-outline"></t-icon>
            <span style="color:rgba(0, 0, 0, 0.45)">上传照片</span>
          </div>
        </t-upload>
        <span style="color:rgba(0, 0, 0, 0.45);font-size:12px">照片格式：jpg、png或bmp文件，且不超过2M</span>
      </t-form-item>
    </t-form>
    <template slot="footer">
      <t-button @click="resetModalData">取消</t-button>
      <t-button v-if="isEdit" :loading="loadingSubmit" color="primary" @click="submitModalData">修改</t-button>
      <t-button v-else :loading="loadingSubmit" color="primary" @click="submitModalData">提交</t-button>
      <t-button v-else color="primary" @click="submitModalData">提交</t-button>
    </template>
  </t-modal>
</template>
<script>
import sysapi from '@/api/usermana'
export default {
  props: {
    visible: {
@@ -52,31 +71,27 @@ export default {
    companyList: {
      type: Array,
      default: () => []
    },
    // 公司对应部门列表
    departmentTypesList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    // 手机号验证
    // const VALIDATEPASSCHECK = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请输入11位手机号'))
    //   } else if (value.length > 0 & value.length !== 11) {
    //     callback(new Error('手机号格式不正确'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      // 是否为编辑状态
      isEdit: false,
      dataList: [
        {
          name: '数据一',
          value: 1
        },
        {
          name: '数据二',
          value: 2
        },
        {
          name: '数据三',
          value: 3
        }
      ],
      // 部门列表
      departmentTypesList: [],
      // 职务列表
      uploadList: [],
      jobPoisitonList: [],
      // 新增用户表单
      addUserModal: {
        name: '',
@@ -86,7 +101,7 @@ export default {
        mainJobPosition: '',
        birthday: '',
        mainWirelessCall: '',
        facePicture: ''
        facePicture: '123'
      },
      // 新增用户表单规则
      addUserModalRules: {
@@ -96,7 +111,7 @@ export default {
        code: [
          { required: true, message: '员工编号不能为空', trigger: 'blur' }
        ],
        field4: [
        apartments: [
          { required: true, message: '公司不能为空' }
        ],
        organizeCode: [
@@ -109,7 +124,7 @@ export default {
          { required: true, message: '年龄不能为空', trigger: 'blur' }
        ],
        mainWirelessCall: [
          { required: true, message: '手机不能为空', trigger: 'blur' }
          { required: true, message: '请输入11位手机号', trigger: 'blur' }
        ],
        facePicture: [
          { required: true, message: '图片不能为空', trigger: 'blur' }
@@ -118,33 +133,201 @@ export default {
    }
  },
  computed: {
    // 显示/隐藏对话框
    visibled: {
      set(val) {
        this.$emit('visibled', val)
    isVisibled: {
      set (val) {
        this.$emit('update:visible', val)
      },
      get() {
      get () {
        this.getJobPositionList()
        return this.visible
      }
    }
  },
  watch: {
    'addUserModal.apartments' (val) {
      // 重置部门回显
      this.addUserModal.organizeCode = ''
      // 查询部门列表
      this.queryCycleChildOrg(val)
    }
  },
  mounted() {
    this.getJobPositionList()
  },
  methods: {
    // 确认新增用户
    submitModalData() {
      this.visible = false
      console.log(this.visibled)
      console.log(this.visible);
      this.$refs['addUserModal'].validate((valid) => {
        if (valid) {
          this.isVisibled = false
          let obj = {
            name: this.addUserModal.name, // 员工姓名
            code: this.addUserModal.code, // 员工编号
            organizeCode: this.addUserModal.organizeCode, // 部门CODE
            mainWirelessCall: this.addUserModal.mainWirelessCall, // 手机号码
            mainJobPosition: this.addUserModal.mainJobPosition, // 职务
            field1: this.addUserModal.facePicture, // 照片标识
            field4: this.addUserModal.apartments, // 公司ID
            birthday: Math.round(new Date() / 1000) // 生日(时间戳)
          }
          sysapi.creteEmployee({params: obj}).then(res => {
            console.log(res)
            if (res.data.success === true) {
              this.$Message.success('新增成功')
            } else {
              console.log(res.data.fail.message)
              this.$Message.success(res.data.fail.message)
            }
          })
        }
      })
    },
    // 重置表单数据
    resetModalData () {
      // this.$refs['activityForm'].resetFields()
      this.$refs['addUserModal'].resetFields()
      this.imgUrl = ''
      this.visibled = false
      this.isVisibled = false
    },
    // 查询职务列表
    async getJobPositionList() {
      const res = await sysapi.getJobPositionList()
      if (res.status === 200) {
        this.jobPoisitonList = res.data.data
      } else {
        this.$Message.danger('职务类型列表数据获取失败！')
      }
    },
    // 查询部门列表
    async queryCycleChildOrg (id) {
      const res = await sysapi.queryCycleChildOrg(id)
      if (res.status === 200) {
        const data = []
        // 递归 实现tree组件所需部门数据结构
        this.nextDepartment(res.data, data)
        // 深拷贝data
        const data1 = JSON.parse(JSON.stringify(data))
        // 用部门id映射关系代替code与parentCode父子映射关系
        data.forEach(item => {
          // 删除pid为"-1"的的pid属性，否则tree渲染的时候没有根节点渲染不出来
          if (item.pid === '-1') {
            delete item.pid
          }
          item.id = item.orgId
          data1.some((item1) => {
            if (item.pid === item1.id) {
              item.pid = item1.orgId
            } else {
              return false
            }
          })
        })
        // eslint-disable-next-line no-return-assign
        this.departmentTypesList = data.filter(item => item.data = item.id)
      } else {
        this.$Message.danger('部门类型列表数据获取失败！')
      }
    },
    startPickerDateChange() {
    },
    // 如果部门还有下级 递归
    nextDepartment (data, arr) {
      if (data.length > 0) {
        data.forEach(item => {
          arr.push({
            orgId: item.id + '',
            id: item.code,
            label: item.name,
            pid: item.parentCode
          })
          this.nextDepartment(item.departments, arr)
        })
      }
    },
    $_onDeleteIconClick (file) {
      this.$refs.uploader.removeFile(file)
    },
    $_onUploadRemoveFlie (file, fileList) {
      this.uploadList = fileList
    },
    $_onUploadPreviewFlie (file) {
      console.log(file)
    },
    $_onUploadProgress (e, file) {
      console.log(e)
      console.log(file)
    },
    $_onUploadSuccess (res, file) {
      this.imgUrl = res.data.data.toolPictureUrl
      this.addDeviceModalForm.pictureUrl = res.data.data.pictureUrl
      // 因为演示用的上传服务器返回数据格式的原因，这里模拟添加 url
      console.log(file)
      this.uploadList.push(file)
    },
    $_onUploadRemoveFile () { },
    $_onUploadExceededSize () { },
    $_onUploadError (errMsg, response, file) {
      console.log(file)
      console.log(errMsg.message)
      this.$Notice.warning({
        title: `文件${file.name}上传失败`,
        desc:
          '原因：' + errMsg
      })
    },
    $_onUploadFileExtError (file, files) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc:
          '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
      })
      console.log(files)
    },
    $_onUploadFileExceededSize (file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
      })
    },
    $_onUploadFormatError () { },
    $_onUploadBeforeUpload () {
      const check = this.uploadList.length < 5
      if (!check) {
        this.$Notice.warning({
          title: '最多只能上传 5 张图片。'
        })
      }
      return check
    }
  }
}
</script>
<style>
<style lang="scss" scoped>
.demo-upload-list{
  .upload--drag{
  background-color:#FFFFFF
}
}
.picture-upload{
  display:flex;
  flex-direction:column;
  width:100%;
  height: 100%;
  justify-content: center;
  .upload-icon{
    align-items:center;
    justify-content:center;
    color:white;
    display: flex;
  }
  .aidicon.aidicon-plus-outline:before{
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #D0D0D0;
    border-radius:45px;
  }
}
</style>

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

@@ -64,7 +64,7 @@
        </t-pager>
      </div>
    </t-card>
    <add-user-modal :department-types-list="departmentTypesList" :company-list="companyTypesList" :visible.sync="addDeviceModal"></add-user-modal>
    <add-user-modal :company-list="companyTypesList" :visible.sync="addDeviceModal"></add-user-modal>
    <auditModal :auditshow.sync="auditshow" :auditid="auditid" :company-name="companyName" @refeshUserList="getUserList"></auditModal>
  </div>
</template>
@@ -306,7 +306,6 @@ export default {
    // 显示新增设备对话框
    showAddDeviceModal () {
      this.addDeviceModal = true
      console.log(this.addDeviceModal)
    },
    async editDeviceData (id) {
      const res = await sysapi.getDeviceInfo(id)

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

@@ -11,18 +11,21 @@
        <t-option v-for="(item,index) in organizationList" :key="index" :value="item.id">{{ item.name }}</t-option>
      </t-select>
    </div>
    <div class="page-bottom">
      <div v-for="(item,index) in videoList" :key="index" :value="item.resourceToolId" style="width:400px;margin:24px 0px 0 24px;">
        <videoPlayer
          ref="videoPlayer"
          :options="videoOptions"
          :playsinline="true"
    <div class="page-bottom grid-demo">
      <t-col v-for="(item,index) in videoList" :span="viewLayoutSpan" :key="index" :value="item.resourceToolId" style="margin-top:24px">
        <video-player
          :ref="'video'+index"
          :options="videoOptions[index]"
          :playsinline="false"
          :events="events"
          class="vjs-custom-skin videoPlayer"
        />
        <!-- <rtmp-video :list="getVideoPlayList(item)" @goDistinguishRecord="goDistinguishRecord(item.resourceToolId)" @videoReplay="handleReview"></rtmp-video> -->
      </div>
          @dblclick="handlefullscreenchange"
        ></video-player>
      </t-col>
      <!-- <rtmp-video :list="getVideoPlayList(item)" @goDistinguishRecord="goDistinguishRecord(item.resourceToolId)" @videoReplay="handleReview"></rtmp-video> -->
    </div>
    <t-pager :page-size="videoPageSize" :current="videoCurrent" :total="videoTotal" :sizer-range="[ 5, 10, 20, 30 ]" class="pager" show-elevator @on-change="onChangeGate"></t-pager>
    <t-pager :page-size="videoPageSize" :current="videoCurrent" :total="videoTotal" :sizer-range="[ 1, 4, 9, 16 ]" class="pager" show-elevator @on-change="onChangeGate"></t-pager>
    <replay-dialog :list="replayList" :visibled.sync="showReplayDialog" @get-list="queryMonitorVideoLog" />
  </div>
</template>
@@ -30,18 +33,15 @@
import sysapi from '@/api/videoSurveillance'
import RtmpVideo from './components/rtmpVideoPlay'
import ReplayDialog from './components/ReplayDialog'
import VideoPlayer from '@/components/VideoPlayer'
import formatDateTime from '@/utils/formatDateTime.js'
import videojs from 'video.js'
window.videojs = videojs
require('videojs-flash')
require('videojs-playlist')
require('video.js/dist/lang/zh-CN.js')
require('video.js/dist/video-js.min.css')
export default {
  components: { ReplayDialog, VideoPlayer, RtmpVideo },
  components: { ReplayDialog, RtmpVideo },
  filters: {
    handleText (value) {
      if (!value) return ''
@@ -53,36 +53,9 @@ export default {
  },
  data () {
    return {
      videoOptions: {
        autoplay: true, // 如果true,浏览器准备好时开始回放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '13:10', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        // 是否流体自适应容器宽高
        fluid: true,
        // // 设置视频播放器的显示宽度（以像素为单位）
        // width: '100px',
        // // 设置视频播放器的显示高度（以像素为单位）
        // height: '300px',
        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: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, // 全屏按钮,
          pictureInPictureToggle: false
        }
      },
      viewLayoutSpan: 3,
      events: ['fullscreenchange'],
      videoOptions: [],
      videoCurrent: 1, // 大门分页数据
      videoPageSize: 10, // 大门分页数据
      videoTotal: 0, // 大门分页总数
@@ -105,16 +78,60 @@ export default {
      // endDay: '2020-12-19 20:14:00'
    }
  },
  computed: {
    player() {
      return this.$refs.videoPlayer1.player
    }
  },
  mounted () {
    this.getWindFiledList() // 获取风场列表
  },
  methods: {
    getVideoPlayList (item) {
      return [{
        fileId: item.videoUrl,
        fileType: 'rtmp/flv',
        id: item.resourceToolId
      }]
    // 修改视频组件控制栏的元素以及样式
    async createMyButton () {
      this.$nextTick(() => {
        const bars = document.querySelectorAll('.vjs-control-bar')
        let time = document.getElementsByClassName('vjs-current-time vjs-time-control vjs-control')
        let start = document.getElementsByClassName('vjs-play-control vjs-control vjs-button')
        let volume = document.getElementsByClassName('vjs-volume-panel vjs-control vjs-volume-panel-horizontal')
        let text = document.getElementsByClassName('vjs-live-control vjs-control')
        time.forEach(item => {
          item.remove()
        })
        start.forEach(item => {
          item.remove()
        })
        volume.forEach(item => {
          item.remove()
        })
        text.forEach(item => {
          item.remove()
        })
        bars.forEach((item, index) => {
          let txt = document.createElement('span')
          txt.innerHTML = '集控室（人脸识别）'
          txt.style.marginLeft = '12px'
          let btn = document.createElement('button')
          btn.style.color = 'white'
          btn.style.cursor = 'pointer'
          btn.style.marginLeft = 'auto'
          btn.className = 'aidicon aidicon-image-outline'
          btn.setAttribute('resourceToolId', item.value)
          btn.setAttribute('title', '识别记录')
          btn.addEventListener('click', this.goDistinguishRecord)
          let btn1 = document.createElement('button')
          btn1.style.color = 'white'
          btn1.style.cursor = 'pointer'
          btn1.className = 'aidicon aidicon-piechart-outline'
          btn1.setAttribute('title', '视频回放')
          btn1.addEventListener('click', () => {
            this.handleReview(this.videoList[index].id)
          })
          item.appendChild(txt)
          item.appendChild(btn)
          item.appendChild(btn1)
        })
      })
    },
    // 获取场景列表
    getSceneList () {
@@ -124,6 +141,19 @@ export default {
        if (element.id === this.gateFieldData) {
          sysapi.getMonitorScene(this.organizationList[index].id).then((resp) => {
            this.sceneList = resp.data.data || []
            if (resp.data.data[0].monitorViewLayout === '1X1') {
              this.viewLayoutSpan = 10
              this.videoPageSize = 1
            } else if (resp.data.data[0].monitorViewLayout === '2X2') {
              this.viewLayoutSpan = 6
              this.videoPageSize = 4
            } else if (resp.data.data[0].monitorViewLayout === '3X3') {
              this.viewLayoutSpan = 4
              this.videoPageSize = 9
            } else if (resp.data.data[0].monitorViewLayout === '4X4') {
              this.viewLayoutSpan = 3
              this.videoPageSize = 16
            }
            this.tabClick(this.sceneList[0].monitorSceneId)
          })
        }
@@ -170,19 +200,56 @@ export default {
        console.log(err)
      })
    },
    handlefullscreenchange(val) {
      // 因为我是又封装了一个组件，打印val会有相应所需的属性，全屏状态为：isFullscreen_
      val.isFullscreen_ = !val.isFullscreen_
      // this.$emit('fullscreenchange', val)
    },
    // 获得风场大门数据
    getVideoSurveillanceData () {
      var id = this.tabId
      this.paramsObj.page = this.videoCurrent
      sysapi.getVideoSurveillanceDataForPage({ params: { monitorSceneId: id, pageNumber: this.videoCurrent, pageSize: this.videoPageSize} })
      .then(res => {
        debugger
        this.videoList = res.data.data.data
        this.videoTotal = res.data.data.total
      sysapi.getVideoSurveillanceData({ params: { monitorSceneId: id } }).then(res => {
        this.videoList = res.data.data
        for (let i in res.data.data) {
          let obj = {
            autoplay: true, // 如果true,浏览器准备好时开始回放。
            muted: true, // 默认情况下将会消除任何音频。
            loop: false, // 导致视频一结束就重新开始。
            preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
            language: 'zh-CN',
            aspectRatio: '13:10', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
            // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
            // 是否流体自适应容器宽高
            fluid: true,
            // // 设置视频播放器的显示宽度（以像素为单位）
            // width: '100px',
            // // 设置视频播放器的显示高度（以像素为单位）
            // height: '300px',
            sources: [{
              withCredentials: false,
              type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
              src: res.data.data[i].videoUrl // url地址
            }],
            flash: { hls: { withCredentials: false } },
            html5: { hls: { withCredentials: false } },
            notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
            controlBar: {
              timeDivider: false,
              durationDisplay: false,
              remainingTimeDisplay: false,
              fullscreenToggle: true, // 全屏按钮,
              pictureInPictureToggle: false
            }
          }
          this.videoOptions.push(obj)
        }
        this.createMyButton()
      })
    },
    // 进入识别记录界面
    goDistinguishRecord (id) {
    goDistinguishRecord (e) {
      var id = e.target.getAttribute('resourceToolId')
      this.$router.push({ path: '/videoSurveillance/distinguishRecord', query: { videoId: id } })
    },
    // 风场大门分页
@@ -247,37 +314,43 @@ export default {
      }
    }
  }
  .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] {
    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 {
    background: none;
  }
  .video-js .vjs-control:focus, .video-js .vjs-control:focus:before, .video-js .vjs-control:hover:before{
    color:#0089d4;
    text-shadow: none;
  }
  .vjs-control-bar{
    justify-content: flex-end;
  }
  .video-js .vjs-control{
.vjs-custom-skin > .video-js .vjs-control-bar .vjs-fullscreen-control{
  height:38px !important;
}
.video-js .vjs-control{
    cursor: pointer;
    width: 28px;
    margin-right:12px;
  }
.video-js .vjs-fullscreen-control{
  order:2;
.vjs-control-bar{
    display: flex;
    justify-content: center;
    align-items: center;
}
.video-js button{
  font-size:16px;
}
.aidicon-image-outline:hover{
  color: #0089d4 !important;
}
.aidicon-piechart-outline:hover{
  color: #0089d4 !important;
}
.vjs-icon-placeholder:hover{
  color: #0089d4 !important;
}.vjs-icon-placeholder{
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vjs-tech {
  pointer-events: none;
}
}
</style>