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/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

@@ -13,13 +13,15 @@
    </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"
        <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> -->
          @dblclick="handlefullscreenchange"
        ></video-player>
      <!-- <rtmp-video :list="getVideoPlayList(item)" @goDistinguishRecord="goDistinguishRecord(item.resourceToolId)" @videoReplay="handleReview"></rtmp-video> -->
      </div>
    </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>
@@ -30,18 +32,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 +52,8 @@ 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
        }
      },
      events: ['fullscreenchange'],
      videoOptions: [],
      videoCurrent: 1, // 大门分页数据
      videoPageSize: 10, // 大门分页数据
      videoTotal: 0, // 大门分页总数
@@ -105,16 +76,61 @@ 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')
        bars.forEach((item, index) => {
          time.forEach(item => {
            item.remove()
          })
          start.forEach(item => {
            item.remove()
          })
          volume.forEach(item => {
            item.remove()
          })
          text.forEach(item => {
            item.remove()
          })
          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('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 () {
@@ -170,15 +186,51 @@ 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()
      })
    },
    // 进入识别记录界面
@@ -247,37 +299,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>