[FE]联调视频回放接口，修改考勤管理、部门目录树显示逻辑

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

@@ -1,5 +1,8 @@
import http from '@/http'
import { keysMappingReverse } from '@/utils/keysMapping'
const mapping = {
  id: 'code'
}
const $default = http.$default
const api = {
  /**
@@ -11,44 +14,55 @@ const api = {
        'name':'发电部'
      }]
   */
  getDepartments() {
    return $default.get('/sp/workEmployee/queryAllOrganize').then(resp => {
  getDepartments () {
    return $default.get('/sp/workEmployee/queryAllOrganize').then((resp) => {
      const data = resp.data.data
      if (!Array.isArray(data)) return resp
      console.log(data)
      // eslint-disable-next-line one-var
      const newData = [], map = {}, queue = []
      data.forEach(item => {
        if (item.parentCode === '-1') {
          const dep = { id: item.code, name: item.name, departments: [] }
          map[item.code] = newData.length
          newData.push(dep)
        } else {
          queue.push(item)
        }
      })
      queue.forEach(item => {
        if (!(item.parentCode in map)) return
        const dep = { id: item.code, name: item.name }
        newData[map[item.parentCode]].departments.push(dep)
      })
      resp.data = newData
      console.log('queryAllOrganize', resp)
      // const newData = [],
      //   map = {},
      //   queue = []
      // console.log(data)
      // data.forEach((item) => {
      //   if (item.parentCode === '-1') {
      //     const dep = { id: item.code, name: item.name, departments: [] }
      //     map[item.code] = newData.length
      //     newData.push(dep)
      //   } else {
      //     queue.push(item)
      //   }
      // })
      // queue.forEach((item) => {
      //   if (!(item.parentCode in map)) return
      //   const dep = { id: item.code, name: item.name }
      //   newData[map[item.parentCode]].departments.push(dep)
      // })
      // resp.data = newData
      // console.log(newData)
      // console.log('queryAllOrganize', resp)
      resp.data = keysMappingReverse(nest(data), mapping)
      return resp
    })
  },
  getEmployeeByOrgid(orgCode) {
    return $default.get(`/sp/workEmployee/queryEmployeeByOrg?orgCode=${orgCode}`).then(resp => {
      const data = resp.data.data || []
      resp.data = data.map(row => {
        return {
          name: row.name,
          userid: row.id
        }
  getEmployeeByOrgid (orgCode) {
    return $default
      .get(`/sp/workEmployee/queryEmployeeByOrg?orgCode=${orgCode}`)
      .then((resp) => {
        const data = resp.data.data || []
        resp.data = data.map((row) => {
          return {
            name: row.name,
            userid: row.id
          }
        })
        return resp
      })
      return resp
    })
  }
}
function nest (items, code = '-1', link = 'parentCode') {
  return items.filter(item => item[link] === code).map(item => ({ ...item, departments: nest(items, item.code) }))
}
export default api

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

@@ -1,5 +1,10 @@
import http from '@/http'
const { $http, $default } = http
import { keysMapping, keysMappingReverse } from '@/utils/keysMapping'
const videoMapping = {
  fileName: 'beginTime',
  fileId: 'videoUrl'
}
const api = {
  // 获取风场大门表格数据
@@ -11,8 +16,11 @@ const api = {
    return $http.get('/videoSurveillance/getDistinguishData', params)
  },
  // 视频回放
  getVideoPlayBack (id) {
    return $default.get(`/sp/uploadFile/getFileUrl?fileName=${id}`).catch((err) => { return err })
  queryMonitorVideoLog (data) {
    return $default.get(`/sp/monitorVideoLog/queryMonitorVideoLog`, data).then(resp => {
      resp.data = keysMappingReverse(resp.data, videoMapping)
      return resp
    }).catch((err) => { return err })
  }
}
export default api

security-protection-platform/src/modules/system/attendance/components/AttendancePanel/index.vue

@@ -108,12 +108,7 @@
                <t-option :value="0">本月</t-option>
              </t-select>
              <t-select v-model="form.monthStart.day" style="margin-bottom:18px;width:84px">
                <t-option
                  v-for="item in dayOptions"
                  :key="item.value"
                  :value="item.value"
                  :disabled="item.value===1&&form.monthStart.type===-1"
                >
                <t-option v-for="item in dayOptions" :key="item.value" :value="item.value" :disabled="item.value===1&&form.monthStart.type===-1">
                  {{ item.label }}
                </t-option>
              </t-select>
@@ -125,12 +120,7 @@
                <t-option :value="1" :disabled="form.monthEnd.day===31">下月</t-option>
              </t-select>
              <t-select v-model="form.monthEnd.day" style="margin-bottom:18px;width:84px">
                <t-option
                  v-for="item in dayOptions"
                  :key="item.value"
                  :value="item.value"
                  :disabled="item.value===31&&form.monthEnd.type===1"
                >
                <t-option v-for="item in dayOptions" :key="item.value" :value="item.value" :disabled="item.value===31&&form.monthEnd.type===1">
                  {{ item.label }}
                </t-option>
              </t-select>
@@ -157,7 +147,7 @@ import commonapi from '@/api/common'
export default {
  components: { ShiftsItem, IntegerOnlyInput },
  data() {
  data () {
    return {
      filterValue: '',
      loadSubmit: false,
@@ -176,10 +166,10 @@ export default {
  },
  computed: {
    currentSchedule() {
    currentSchedule () {
      return this.schedules.find(item => item.scheduleId === this.form.scheduleId) || {}
    },
    dayOptions() {
    dayOptions () {
      const options = []
      for (let i = 1; i <= 31; i++) {
        options.push({
@@ -190,13 +180,13 @@ export default {
      return options
    },
    startDayValue: {
      get() {
      get () {
        const monthStart = this.form.monthStart || this.getDefaultForm().monthStart
        const type = parseInt(monthStart.type)
        const day = parseInt(monthStart.day)
        return type * 31 + day
      },
      set(val) {
      set (val) {
        if (this.form.monthStart == null) this.form.monthStart = {}
        const type = val < 1 ? -1 : 0
        this.form.monthStart.day = val - type * 31
@@ -204,13 +194,13 @@ export default {
      }
    },
    endDayValue: {
      get() {
      get () {
        const monthEnd = this.form.monthEnd || this.getDefaultForm().monthEnd
        const type = parseInt(monthEnd.type)
        const day = parseInt(monthEnd.day)
        return type * 31 + day
      },
      set(val) {
      set (val) {
        if (this.form.monthEnd == null) this.form.monthEnd = {}
        const type = val > 31 ? 1 : 0
        this.form.monthEnd.day = val - type * 31
@@ -220,54 +210,90 @@ export default {
  },
  watch: {
    // 处理开始日期和结束日期的联动
    startDayValue(val) {
    startDayValue (val) {
      this.endDayValue = val + 31 - 1
    },
    endDayValue(val) {
    endDayValue (val) {
      this.startDayValue = val - 31 + 1
    }
  },
  created() {
  created () {
    this.getDepartments()
    this.getSchedules()
  },
  methods: {
    getDepartments() {
    // 如果部门还有下级 递归
    nextDepartment (data, arr) {
      if (data.length > 0) {
        data.forEach(item => {
          arr.push({
            id: item.id + '',
            label: item.name,
            pid: item.parentCode
          })
          // 如果没有中值 默认选中一个值 这里是一般是公司的考勤
          if (this.treeValue.length === 0) this.handleDeptChange([item.id + ''])
          this.nextDepartment(item.departments, arr)
        })
      }
    },
    // 获取部门的考勤规则
    getDepartments () {
      this.loadDepts = true
      commonapi.getDepartments().then(resp => {
        const data = []
        console.log(resp)
        resp.data.forEach(item => {
          const orgId = item.id + ''
          data.push({
            id: orgId,
            label: item.name,
            disabled: true
          })
          item.departments.forEach(dept => {
            const deptId = dept.id + ''
            data.push({
              id: deptId,
              label: dept.name,
              pid: orgId
            })
            if (this.treeValue.length === 0) this.handleDeptChange([deptId])
          })
        // console.log(resp.data)
        // resp.data.forEach(item => {
        //   const orgId = item.id + ''
        //   data.push({
        //     id: orgId,
        //     label: item.name
        //     // disabled: true
        //   })
        //   item.departments.forEach(dept => {
        //     const deptId = dept.id + ''
        //     data.push({
        //       id: deptId,
        //       label: dept.name,
        //       pid: orgId
        //     })
        //     if (this.treeValue.length === 0) this.handleDeptChange([deptId])
        //     if (dept.departments.length > 0) {
        //       dept.departments.forEach(child => {
        //         const childId = child.id + ''
        //         data.push({
        //           id: childId,
        //           label: child.name,
        //           pid: deptId
        //         })
        //         this.handleDeptChange([childId])
        //       })
        //     }
        //   })
        // })
        // 递归
        this.nextDepartment(resp.data, data)
        // 删除pid为"-1"的的pid属性，否则tree渲染的时候没有根节点渲染不出来
        data.forEach(item => {
          if (item.pid === '-1') {
            delete item.pid
          }
        })
        this.treeData = data
      }).finally(() => {
        this.loadDepts = false
      })
    },
    getSchedules() {
    getSchedules () {
      sysapi.getSchedules().then(resp => {
        this.schedules = resp.data || []
        // this.scheduleId = this.schedules.length ? this.schedules[0].scheduleId : ''
      })
    },
    getDefaultForm() {
    getDefaultForm () {
      return {
        scheduleId: '',
        attendanceMonth: this.ENUM_NAT,
@@ -281,7 +307,7 @@ export default {
        }
      }
    },
    getDepAttendanceRules(id) {
    getDepAttendanceRules (id) {
      this.loadForm = true
      sysapi.getDepAttendanceRules(id).then(resp => {
        this.form = resp.data.scheduleId === null ? this.getDefaultForm() : resp.data
@@ -289,9 +315,9 @@ export default {
        this.loadForm = false
      })
    },
    submitAttendance() {
    submitAttendance () {
      this.loadSubmit = true
      sysapi.submitAttendanceRule({depId: this.treeValue[0], ...this.form }).then(resp => {
      sysapi.submitAttendanceRule({ depId: this.treeValue[0], ...this.form }).then(resp => {
        this.form = Object.assign(resp.data)
        this.$Message.success('修改成功')
      }, err => {
@@ -301,15 +327,15 @@ export default {
        this.loadSubmit = false
      })
    },
    handleDeptChange(target) {
    handleDeptChange (target) {
      const deptId = target[0]
      this.treeValue[0] = deptId
      this.getDepAttendanceRules(deptId)
    },
    handleReset() {
    handleReset () {
      this.form = this.getDefaultForm()
    },
    handleSubmit() {
    handleSubmit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.submitAttendance()
@@ -318,6 +344,7 @@ export default {
    }
  }
}
</script>
<style lang="scss">

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

@@ -2,8 +2,20 @@
  <t-modal :visibled.sync="visible" :header-visibled="false" :footer-visibled="false" :no-padding="true" width="100%">
    <div class="replayer">
      <div class="replayer-list">
        <t-tabs v-model="currentTab" mode="scrollY" orientation="vertical" width="150px" @change="handleTabChange">
          <t-tab-panel v-for="item in list" :key="item.fileId" :label="item.fileName" :panel-id="item.fileId" />
        <div class="date-select-box row-12">
          <div class="col-12">
            <t-date-picker v-model="beginDay" type="dateTime" style="width:200px" placeholder="请选择开始时间"></t-date-picker>
          </div>
          <div class="col-12">
            <t-date-picker v-model="endDay" type="dateTime" style="width:200px" placeholder="请选择结束时间"></t-date-picker>
          </div>
          <div class="col-12 button-box" align="end">
            <t-button color="primary" @click="getData">查询</t-button>
            <t-button @click="resetData">重置</t-button>
          </div>
        </div>
        <t-tabs v-model="currentTab" mode="scrollY" orientation="vertical" width="100%" @change="handleTabChange">
          <t-tab-panel v-for="item in list" :key="item.monitorVideoLogId" :label="item.fileName|formatDateTime" :panel-id="item.fileId" />
        </t-tabs>
      </div>
@@ -11,13 +23,7 @@
        <t-loading v-model="loadVideo">
          <span class="text-md text-info">获取视频资源...</span>
        </t-loading>
        <video-player
          :sources="videoList"
          :autoadvance="0"
          :style="{opacity: loadVideo ? 0: 1}"
          @player-inited="handlePlayerInited"
          @playlistitem="handlePlayerCurrentChange"
        />
        <video-player :sources="videoList" :autoadvance="0" :style="{opacity: loadVideo ? 0: 1}" @player-inited="handlePlayerInited" @playlistitem="handlePlayerCurrentChange" />
      </div>
    </div>
  </t-modal>
@@ -25,39 +31,53 @@
<script>
import VideoPlayer from '@/components/VideoPlayer'
import formatDateTime from '@/utils/formatDateTime.js'
import sysapi from '@/api/videoSurveillance'
export default {
  filters: {
    formatDateTime
  },
  components: { VideoPlayer },
  props: {
    list: {
      type: Array,
      default: () => []
    replayId: {
      type: String
    },
    visibled: {
      type: Boolean,
      default: false
    }
  },
  data() {
  data () {
    return {
      currentTab: null,
      loadVideo: false,
      list: [],
      videoList: [],
      $player: null
      $player: null,
      // beginDay: formatDateTime(new Date(+new Date() - 10 * 60 * 1000), 'yyyy-MM-dd hh:mm:ss'),
      // endDay: formatDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss')
      beginDay: '2020-12-18 17:19:00',
      endDay: '2020-12-18 17:19:59'
    }
  },
  computed: {
    visible: {
      get() { return this.visibled },
      set(val) {
      get () { return this.visibled },
      set (val) {
        if (!val) this.$player.pause()
        this.$emit('update:visibled', val)
      }
    }
  },
  watch: {
    replayId (val) {
      this.replayId = val
      this.getData()
    },
    list: {
      handler(val) {
      handler (val) {
        this.list = val
        console.warn(`list Change`)
        this.resetVideoList()
        if (val.length > 0) {
@@ -69,22 +89,49 @@ export default {
      immediate: true
    }
  },
  mounted () {
    // this.list = [{
    //   fileName: '12月14日 16:55',
    //   fileId: 'ai-video_5A02296PAKA885B-video20201214165526.mp4',
    //   fileType: 'video/mp4'
    // }, {
    //   fileName: '12月14日 16:56',
    //   fileId: 'ai-video_5A02296PAKA885B-video20201214165527.mp4',
    //   fileType: 'video/mp4'
    // }, {
    //   fileName: '12月14日 16:57',
    //   fileId: 'ai-video_5A02296PAKA885B-video20201214165528.mp4',
    //   fileType: 'video/mp4'
    // }, {
    //   fileName: '12月14日 16:58',
    //   fileId: 'ai-video_5A02296PAKA885B-video20201214165529.mp4',
    //   fileType: 'video/mp4'
    // }, {
    //   fileName: '12月14日 16:59',
    //   fileId: 'ai-video_5A02296PAKA885B-video20201214165530.mp4',
    //   fileType: 'video/mp4'
    // }, {
    //   fileName: '12月14日 17:00',
    //   fileId: 'ai-video_5A02296PAKA885B-video20201214165531.mp4',
    //   fileType: 'video/mp4'
    // }]
  },
  methods: {
    handlePlayerInited(player) {
    handlePlayerInited (player) {
      this.$player = player
      window.player = this
    },
    async handleTabChange(name, index) {
    async handleTabChange (name, index) {
      this.$player.pause()
      await this.preloadOriVideoUrl(index)
      this.play(index)
    },
    handlePlayerCurrentChange(e, item) {
    handlePlayerCurrentChange (e, item) {
      const { index, fileId } = item
      this.currentTab = fileId
      this.preloadOriVideoUrl(index)
    },
    resetVideoList() {
    resetVideoList () {
      const videoList = this.list.map((item, index) => {
        const { fileId, fileType } = item
        return {
@@ -97,7 +144,7 @@ export default {
      this.videoList = videoList
    },
    play(index) {
    play (index) {
      console.log(`播放:index=${index}`)
      // 调用额外的currentItem方法以避免currentItem在首次不生效
      // https://github.com/brightcove/videojs-playlist/blob/master/docs/api.md
@@ -106,10 +153,10 @@ export default {
      this.$player.play()
    },
    /**
     *  从index开始预载videoList的视频地址
     *  此方法将在获取index对应的地址后就立即返回
     */
    preloadOriVideoUrl(index = 0, maxLength = 5) {
   *  从index开始预载videoList的视频地址
   *  此方法将在获取index对应的地址后就立即返回
   */
    preloadOriVideoUrl (index = 0, maxLength = 5) {
      return new Promise((resolve, reject) => {
        for (let i = index; i in this.videoList && i - index < maxLength; i++) {
          console.log(`预载地址:index=${i}`)
@@ -136,9 +183,9 @@ export default {
      })
    },
    /*
     * 获取真实视频地址
     */
    getOriVideoUrl(fileId) {
   * 获取真实视频地址
   */
    getOriVideoUrl (fileId) {
      console.log(`请求地址:${fileId}`)
      // fake
      return new Promise((resolve, reject) => {
@@ -152,6 +199,18 @@ export default {
          })
        }, 1000)
      })
    },
    async getData () {
      const res = await sysapi.queryMonitorVideoLog({ params: { id: this.replayId, beginDay: this.beginDay, endDay: this.endDay } })
      if (res.status === 200) {
        this.list = res.data.data
      } else {
        this.$Message.danger('视频列表数据获取失败！')
      }
    },
    resetData () {
      this.beginDay = formatDateTime(new Date(+new Date() - 10 * 60 * 1000), 'yyyy-MM-dd hh:mm:ss')
      this.endDay = formatDateTime(new Date(), 'yyyy-MM-dd hh:mm:ss')
    }
  }
}
@@ -160,9 +219,16 @@ export default {
<style lang="scss">
.replayer {
  display: flex;
  &-list {
    margin-right: 20px;
    // width: 200px;
    .date-select-box {
      margin-top: 15px;
      > div {
        margin-bottom: 15px;
      }
    }
  }
  &-video {

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

@@ -32,7 +32,7 @@
      </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>
    <replay-dialog :list="replayList" :visibled.sync="showReplayDialog" />
    <replay-dialog :replay-id="replayId" :visibled.sync="showReplayDialog" />
  </div>
</template>
<script>
@@ -69,7 +69,7 @@ export default {
      roomList: [],
      showReplayDialog: false,
      replayList: []
      replayId: ''
    }
  },
  mounted () {
@@ -77,45 +77,19 @@ export default {
    this.getVideoSurveillanceData() // 获取视频监控界面数据
  },
  methods: {
    async handleReview (id) {
      // const res = await sysapi.getVideoPlayBack(id)
      // console.log(res)
      this.replayList = [{
        fileName: '12月14 16:55',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165526.mp4',
        fileType: 'video/mp4'
      }, {
        fileName: '12月14 16:56',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165527.mp4',
        fileType: 'video/mp4'
      }, {
        fileName: '12月14 16:57',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165528.mp4',
        fileType: 'video/mp4'
      }, {
        fileName: '12月14 16:58',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165529.mp4',
        fileType: 'video/mp4'
      }, {
        fileName: '12月14 16:59',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165530.mp4',
        fileType: 'video/mp4'
      }, {
        fileName: '12月14 17:00',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165531.mp4',
        fileType: 'video/mp4'
      }]
      this.replayList = [{
        sources: [{
          src: 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4',
          type: 'video/mp4'
        }]
      }, {
        sources: [{
          src: 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4',
          type: 'video/mp4'
        }]
      }]
    handleReview (id) {
      this.replayId = '900'
      // this.replayList = [{
      //   sources: [{
      //     src: 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4',
      //     type: 'video/mp4'
      //   }]
      // }, {
      //   sources: [{
      //     src: 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4',
      //     type: 'video/mp4'
      //   }]
      // }]
      this.showReplayDialog = true
    },
    async tabClick (id) {