[FE]添加AL报警详情视频倍数播放功能

ebc-middle-platform/src/modules/page/PageLayout.vue

@@ -1,13 +1,48 @@
<template>
  <div>
    <div>123</div>
    <button @click="showaudit">点击</button>
    <audit :auditshow.sync="auditshow"></audit>
  </div>
</template>
<script>
import audit from './components/modal/audit'
export default {
  name: 'PageLayout'
  components: {
    audit
  },
  data () {
    return {
      auditshow: false
    }
  },
  methods: {
    showaudit () {
      // console.log(123)
      this.auditshow = true
    }
  }
}
</script>
<style scoped>
  <style>
.video {
  width: 425px;
  height: 300px;
  border: 1px solid black;
}
.vjs-control-bar .vjs-picture-in-picture-control .vjs-control .vjs-button {
  width: 0;
}
.vjs-seek-to-live-control .vjs-control {
  width: 0;
}
</style>

security-protection-platform/src/main.js

@@ -18,6 +18,11 @@ import PKGJson from '../package.json'
import '@/styles/index.scss' // global css
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)
// 安装组件库插件
Vue.use(aid, {
  local: i18nManager.language,

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

@@ -139,8 +139,10 @@
          </div>
          <div>
            <div>识别视频</div>
            <div>
              <video :src="videoDetailData.videoFileUrl" class="video" controls></video>
            <div class="video">
              <!-- <video :src="videoDetailData.videoFileUrl" class="video" controls></video> -->
              <video-player ref="videoPlayer" :playsinline="true" :options="playerOptions" class="video-player vjs-custom-skin"></video-player>
            </div>
          </div>
        </div>
@@ -249,10 +251,40 @@ export default {
      page: 1,
      limit: 10,
      total: 0
      total: 0,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果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: [{
          type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: '' // url地址
        }],
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          // durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, // 全屏按钮,
          pictureInPictureToggle: false
        }
      }
    }
  },
  mounted () {
    this.gettype()
    this.search()
@@ -267,11 +299,13 @@ export default {
    async handleClick (scope, val) {
      this.clickdetail = val
      // 去除模态框中的单选项
      let res = await aialarmapi.getAlarmDetail({params: {'workTaskId': scope.row.workTaskId}})
      let res = await aialarmapi.getAlarmDetail({ params: { 'workTaskId': scope.row.workTaskId } })
      if (res.status === 200) {
        this.alarmDetailData = res.data.data.alarmInfo
        this.pictureDetailData = res.data.data.pictureInfo
        this.videoDetailData = res.data.data.videoInfo
        this.playerOptions.sources[0].src = this.videoDetailData.videoFileUrl
        // console.log(this.playerOptions.sources[0].src)
      } else { this.$Message.danger('处理失败') }
      this.status = ''
      this.details_modal = true // 打开模态框
@@ -487,6 +521,6 @@ export default {
.video {
  width: 100%;
  height: 100%;
  object-fit: fill;
  margin: 0 auto;
}
</style>

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

@@ -0,0 +1,193 @@
<template>
  <div>
    <t-modal :visibled.sync="visibled" width="600px" height="696px">
      <p slot="header">
        <span>人脸审核</span>
      </p>
      <div style="text-align:center">
        <div class="infobody">
          <div>
            <span>姓名 :</span>
            <span>张三</span>
          </div>
          <div>
            <span>员工编号 :</span>
            <span>zhangsan</span>
          </div>
          <div>
            <span>公司 :</span>
            <span>xx风场</span>
          </div>
          <div>
            <span>部门 :</span>
            <span>设备管理处</span>
          </div>
          <div>
            <span>职务 :</span>
            <span>运维人员</span>
          </div>
          <div>
            <span>年龄 :</span>
            <span>28</span>
          </div>
          <div style="width:100%">
            <span>手机 :</span>
            <span>188888888</span>
          </div>
          <div style="height:160px">
            <div>人脸照片 :</div>
            <div>
              <img src="http://img95.699pic.com/photo/50028/0321.jpg_wh300.jpg" alt="" srcset="">
            </div>
          </div>
        </div>
        <div class="faceaudit">
          <t-form :model="formItem" :label-span="1.5" :rules="ruleValidate" label-position="right">
            <t-form-item label="人脸审核" prop="audit">
              <t-radio-group v-model="formItem.audit" class="col-5">
                <t-radio label="yes">通过</t-radio>
                <t-radio label="no">不通过</t-radio>
              </t-radio-group>
            </t-form-item>
            <!-- <t-form-item label="审核意见" prop="opinion">
              <t-input v-model="formItem.opinion" :rows="3" :maxlength="100" type="textarea" placeholder="请输入审核意见" count></t-input>
            </t-form-item> -->
          </t-form>
          <div class="opinion">
            <div>审核意见</div>
            <div>
              <t-input v-model="formItem.opinion" :rows="3" :maxlength="100" type="textarea" placeholder="请输入审核意见" count></t-input>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <t-button long @click="visibled=false">取消</t-button>
        <t-button color="primary" long @click="submit">提交</t-button>
      </div>
    </t-modal>
  </div>
</template>
<script>
export default {
  props: {
    // 显示 / 隐藏导入工单对话框
    auditshow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      formItem: {
        audit: '',
        opinion: ''
      },
      ruleValidate: {
        audit: [{ required: true, message: '请选择操作', trigger: 'change' }]
      }
    }
  },
  computed: {
    visibled: {
      set (val) {
        this.$emit('update:auditshow', val)
      },
      get () {
        return this.auditshow
      }
    }
  },
  watch: {
    visibled () {
      this.formItem.audit = ''
      this.formItem.opinion = ''
      if (this.visibled === true) {
        // console.log('打开了')
        /**
         *
         *向后端获取modal数据
         *
         */
      }
    }
  },
  methods: {
    submit () {
      console.log(this.formItem)
      /*
        向后端发送post请求
     */
      this.visibled = false
    }
  }
}
</script>
<style lang='scss' scoped>
.infobody {
  width: 552px;
  height: 376px;
  border-radius: 4px;
  background-color: rgba(245, 245, 245, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  margin-bottom: 20px;
  > div {
    width: 250px;
    height: 22px;
    text-align: left;
    span {
      margin-right: 5px;
    }
    > span:nth-child(2) {
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
    }
  }
  > div:nth-last-child(1) {
    display: flex;
    > div:nth-child(2) {
      margin-left: 5px;
      img {
        width: 120px;
        height: 160px;
        border-radius: 5px;
      }
    }
  }
}
.opinion {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  > div:nth-child(1) {
    width: 70px;
    height: 20px;
    margin-right: 22px;
  }
  > div:nth-child(2) {
    flex: 1;
  }
}
</style>