[FE]更改视频监控组件以及用户管理界面新增用户弹出框

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

@@ -15,7 +15,7 @@ const api = {
  getDepartments () {
    return $default.get('/sp/workEmployee/queryAllOrganize')
  },
  // 获取s部门对应场景列表
  // 获取部门对应场景列表
  getMonitorScene (orgId) {
    return $default.get(`/sp/monitorSceneManagement/queryPageMonitorScene?orgId=${orgId}`)
  },

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

@@ -229,24 +229,7 @@ export default {
      // 判断是详情还是处理
      clickdetail: 0,
      // 一页的数据
      data: [{
        'workTaskId': '202012031206570506796', //
        'status': 'INI', // 状态
        'statusTime': '2020-12-03T04:06:58.000+0000', // 状态时间
        'processMemo': null, // 处理详情
        'alarmTypeCode': 'HAT', // 报警类型
        'alarmMemo': '没戴安全帽', // 报警描述
        'resourceToolName': null, // 设备名称
        'resourceToolCode': null, // 设备编号
        'monitorSceneName': '一号工地', // 设备位置
        'aiIdenTime': '2020-12-03T04:06:58.000+0000', // 报警时间l
        'targetEmployeeRoleId': '1001',
        'workEmployeeRoleId': '90001', // 处理人
        'processTime': '', // 处理时间
        'idenPictureUrl': 'http://pic/2970', // 图片url
        'idenVideoUrl': 'http://video/8989' // 视频url
      }
      ],
      data: [],
      // 页数
      page: 1,
      limit: 10,

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

@@ -1,40 +1,44 @@
<template>
  <div>
    <t-modal :visibled="visible">
      <t-form :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>
        <t-form-item label="员工编号：" prop="code">
          <t-input v-model="addUserModal.code" placeholder="请输入员工编号"></t-input>
        </t-form-item>
        <t-form-item label="公司：" prop="field4">
          <t-select v-model="addUserModal.field4" placeholder="请选择公司" clearable>
            <t-option v-for="(item,index) in dataList" :value="item.field4" :key="index">{{ item.name }}</t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="部门：" prop="organizeCode">
          <t-select v-model="addUserModal.organizeCode" placeholder="请选择部门" clearable>
            <t-option v-for="(item,index) in dataList" :value="item.value" :key="index">{{ item.name }}</t-option>
          </t-select>
        </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-select>
        </t-form-item>
        <t-form-item label="年龄：" prop="birthday">
          <t-date-picker v-model="addUserModal.birthday" placeholder="请输入年龄" @date-change="startPickerDateChange"></t-date-picker>
        </t-form-item>
        <t-form-item label="手机：" prop="mainWirelessCall">
          <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-form-item>
      </t-form>
    </t-modal>
  </div>
  <t-modal :visibled.sync="visibled" :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-item label="姓名：" prop="name">
        <t-input v-model="addUserModal.name" placeholder="请输入姓名"></t-input>
      </t-form-item>
      <t-form-item label="员工编号：" prop="code">
        <t-input v-model="addUserModal.code" placeholder="请输入员工编号"></t-input>
      </t-form-item>
      <t-form-item label="公司：" prop="apartments">
        <t-select v-model="addUserModal.apartments" placeholder="请选择公司" clearable>
          <t-option v-for="(item,index) in companyList" :value="item.id" :key="index">{{ item.name }}</t-option>
        </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-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-select>
      </t-form-item>
      <t-form-item label="年龄：" prop="birthday">
        <t-date-picker v-model="addUserModal.birthday" placeholder="请输入年龄" @date-change="startPickerDateChange"></t-date-picker>
      </t-form-item>
      <t-form-item label="手机：" prop="mainWirelessCall">
        <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-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>
    </template>
  </t-modal>
</template>
<script>
@@ -44,13 +48,21 @@ export default {
      type: Boolean,
      default: false
    },
    value: {
      type: Object,
      dafault: () => []
    // 公司列表
    companyList: {
      type: Array,
      default: () => []
    },
    // 公司对应部门列表
    departmentTypesList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 是否为编辑状态
      isEdit: false,
      dataList: [
        {
          name: '数据一',
@@ -105,7 +117,30 @@ export default {
      }
    }
  },
  computed: {
    // 显示/隐藏对话框
    visibled: {
      set(val) {
        this.$emit('visibled', val)
      },
      get() {
        return this.visible
      }
    }
  },
  methods: {
    // 确认新增用户
    submitModalData() {
      this.visible = false
      console.log(this.visibled)
      console.log(this.visible);
    },
    // 重置表单数据
    resetModalData () {
      // this.$refs['activityForm'].resetFields()
      this.imgUrl = ''
      this.visibled = false
    }
  }
}
</script>

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

@@ -64,7 +64,7 @@
        </t-pager>
      </div>
    </t-card>
    <add-user-modal :visible="addDeviceModal"></add-user-modal>
    <add-user-modal :department-types-list="departmentTypesList" :company-list="companyTypesList" :visible.sync="addDeviceModal"></add-user-modal>
    <auditModal :auditshow.sync="auditshow" :auditid="auditid" :company-name="companyName" @refeshUserList="getUserList"></auditModal>
  </div>
</template>
@@ -306,6 +306,7 @@ 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,7 +13,13 @@
    </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;">
        <rtmp-video :list="getVideoPlayList(item)" @goDistinguishRecord="goDistinguishRecord(item.resourceToolId)" @videoReplay="handleReview"></rtmp-video>
        <videoPlayer
          ref="videoPlayer"
          :options="videoOptions"
          :playsinline="true"
          class="vjs-custom-skin videoPlayer"
        />
        <!-- <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>
@@ -47,6 +53,37 @@ export default {
  },
  data () {
    return {
      videoOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        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
        }
      },
      videoCurrent: 1, // 大门分页数据
      videoPageSize: 10, // 大门分页数据
      videoTotal: 100, // 大门分页总数