[FE]：合并冲突

security-protection-platform/.aid/mock/aialarm.js

@@ -11,7 +11,7 @@ const { data } = Mock.mock({
      equipment_number: 's00001',
      equipment_location: '1#风场SVG室',
      alarm_time: '@date("yyyy-MM-dd HH:mm:ss")',
      Handler: '@cname',
      'Handler|1': ['张三', '李四', '王五', '何六'],
      processing_time: '@date("yyyy-MM-dd HH:mm:ss")',
      picture_url: 'http://img95.699pic.com/photo/50028/0321.jpg_wh300.jpg',
      video_url: 'https://video.pearvideo.com/mp4/adshort/20201113/cont-1706887-15482034_adpkg-ad_hd.mp4'
@@ -27,6 +27,7 @@ module.exports = [
    type: 'func',
    response: (option) => {
      const TypeName = ['身份异常', '穿戴异常', '潜在危险', '违规违章', '仪表异常']
      const handlername = ['张三', '李四', '王五', '何六']
      //获取page
      var page = getQuery(option.url, 'page')
      //获取limit
@@ -39,22 +40,30 @@ module.exports = [
      //获取报警类型
      var typeid = getQuery(option.url, 'typeid')
      //获取报警人
      var handler = getQuery(option.url, 'handler')
      // console.log('报警人:', handler)
      var start = (page - 1) * limit
      var end = page * limit
      // console.log(option)
      var result = data
      // console.log(result)
      if (typeid) {
        result = result.filter((item) => { return item.type == TypeName[parseInt(typeid)] })
      }
      if (starttime) {
        result = result.filter((item) => { return +new Date(item.time) >= starttime })
        result = result.filter((item) => { return +new Date(item.alarm_time) >= starttime })
      }
      if (endtime) {
        result = result.filter((item) => { return +new Date(item.time) <= endtime })
        result = result.filter((item) => { return +new Date(item.alarm_time) <= endtime })
      }
      if (handler) {
        result = result.filter((item) => { return item.Handler == handlername[parseInt(handler)] })
      }
@@ -79,6 +88,19 @@ module.exports = [
    }
  },
  {
    url: '/aialarm/getaialarmhandler',
    method: 'get',
    type: 'func',
    response: () => {
      return Mock.mock({
        'data|4': [{
          'id|+1': 0,
          'alarmhandler|+1': ['张三', '李四', '王五', '何六'],
        }]
      })
    }
  },
  {
    url: /\/aialarm\/dispose/,
    method: 'put',
    type: 'func',

security-protection-platform/package.json

@@ -79,6 +79,8 @@
    "video.js": "7.10.2",
    "videojs-playlist": "4.3.1",
    "videojs-flash": "2.2.1",
    "echarts": "^4.9.0"
    "vue-video-player": "5.0.2",
    "echarts": "^4.9.0",
    "videojs-contrib-hls": "5.15.0"
  }
}
}

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

@@ -1,10 +1,9 @@
import http from '@/http'
const { $http } = http
const { $http, $default } = http
const api = {
  getaccesslist (params) {
    return $http.get('/access/getaccesslist', params)
    return $default.get('/sp/inAndOutRecord/queryPageInAndOutRecord', params)
  },
  getaccesstype () {
@@ -13,4 +12,4 @@ const api = {
}
export default api
export default api

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

@@ -1,21 +1,23 @@
import http from '@/http'
const { $http } = http
const { $default, $http } = http
const api = {
  // 获取报警记录列表
  getaialarmlist (params) {
    return $http.get('/aialarm/getaialarmlist/', params)
    return $default.get('/sp/aiAlarmManage/queryPageAiAlarm', params)
  },
  // 获取报警类型查询下拉框
  getaialarmtype () {
    return $http.get('/aialarm/getaialarmtype')
    return $default.get('/sp/charSpec/getCharSpecList?charSpecCode=AI_ALARM_TYPE')
  },
  getaialarmhandler () {
    return $http.get('/aialarm/getaialarmhandler')
  },
  dispose (params) {
    return $http.put('/aialarm/dispose/', params)
    return $default.post('/sp/aiAlarmManage/changeTaskStatus', params)
  }
}
export default api
export default api

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

@@ -6,7 +6,7 @@ const { $default } = http
const mapping = {
  userid: 'id',
  current: 'pageNumber',
  orgId: 'orgCode',
  // orgId: 'orgCode',
  duty: 'mainJobPositionId',
  daysAttendance: 'clockingDays', // 出勤天数
  timesLate: 'lateDays', // 迟到次数
@@ -21,31 +21,31 @@ const mapping = {
const api = {
  // 获取考勤日报表格数据
  // 新接口合并了 depId和orgId
  getDayAttendance({params}) {
  getDayAttendance ({ params }) {
    params.orgId = params.depId || params.orgId
    delete params.depId
    params = keysMapping(params, mapping)
    return $default.get('/sp/attendanceReport/queryDailyAttendanceReport', {params}).then(resp => {
    return $default.get('/sp/attendanceReport/queryDailyAttendanceReport', { params }).then(resp => {
      console.log('queryDailyAttendanceReport', resp)
      resp.data = keysMappingReverse(resp.data.data, mapping)
      return resp
    })
  },
  // 获取考勤月报表格数据
  getMonthAttendance({params}) {
  getMonthAttendance ({ params }) {
    params.orgId = params.depId || params.orgId
    delete params.depId
    params = keysMapping(params, mapping)
    return $default.get('/sp/attendanceReport/queryMonthlyAttendanceReport', {params}).then(resp => {
    return $default.get('/sp/attendanceReport/queryMonthlyAttendanceReport', { params }).then(resp => {
      console.log('queryMonthlyAttendanceReport', resp)
      resp.data = keysMappingReverse(resp.data.data, mapping)
      return resp
    })
  },
  // 获取考勤月报详情数据
  getAttendanceDetail({params}) {
  getAttendanceDetail ({ params }) {
    params = keysMapping(params, mapping)
    return $default.get('/sp/attendanceReport/queryAttendanceDetailReport', {params}).then(resp => {
    return $default.get('/sp/attendanceReport/queryAttendanceDetailReport', { params }).then(resp => {
      resp.data = resp.data.data
      return resp
    })

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,56 @@ 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 = nest(data)
      // 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 (orgId) {
    return $default
      .get(`/sp/workEmployee/queryEmployeeByOrg?orgId=${orgId}`)
      .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 = {
  // 获取风场大门表格数据
@@ -15,8 +20,11 @@ const api = {
    return $default.get('/sp/monitorSceneManagement/queryPageMonitorScene', 0)
  },
  // 视频回放
  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/access/index.vue

@@ -12,59 +12,56 @@
        <t-date-picker :confirm="false" v-model="searchdata.endtime" placeholder="请选择结束时间" style="width:200px;height:32px"></t-date-picker>
      </div>
      <div>
      <!-- <div>
        <span class="title">进出类型 : </span>
        <t-select v-model="searchdata.typeid" style="width:200px;height:32px">
          <t-option v-for="item in accesstype" :value="item.id" :key="item.id">{{ item.name }}</t-option>
        </t-select>
      </div> -->
      <div class="alarm_people">
        <span class="title">员工 : </span>
        <t-input v-model="searchdata.relateEmployeeNameAsLike" placeholder="员工姓名、编号关键字" style="width: 200px"></t-input>
      </div>
    </div>
    <div class="access_header">
      <div class="alarm_people">
        <span class="title">员工 : </span>
        <t-input v-model="searchdata.username" placeholder="员工姓名、编号关键字" style="width: 200px"></t-input>
      <!-- 导出excel -->
      <div>
        <t-button color="primary" icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
      </div>
      <div>
        <t-button color="primary" @click="btnsearch">查询</t-button>
        <t-button @click="reset">重置</t-button>
      </div>
    </div>
    <!-- 导出excel -->
    <div>
      <t-button color="primary" icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
    </div>
    <t-table :data="data" line @selection-change="handleSelectionChange">
      <t-table-column type="selection" width="34px"></t-table-column>
      <t-table-column label="进出类型" width="80px">
        <template slot-scope="scope">
          <t-tag v-if="scope.row.type=== '离开'" state="info">{{ scope.row.type }}</t-tag>
          <t-tag v-if="scope.row.type=== '进入'" state="success">{{ scope.row.type }}</t-tag>
        </template>
      </t-table-column>
      <t-table-column label="姓名" prop="employee_name" width="66px">
      <t-table-column label="姓名" prop="relateEmployeeRoleName" width="60px">
      </t-table-column>
      <t-table-column label="员工编号" prop="employee_number" width="80px">
      <t-table-column label="员工编号" prop="code" width="80px">
      </t-table-column>
      <t-table-column label="公司" prop="company" width="69px">
      <t-table-column label="公司" prop="orgName" width="94px">
      </t-table-column>
      <t-table-column label="部门" prop="department" width="94px">
      <t-table-column label="部门" prop="orgName" width="94px">
      </t-table-column>
      <t-table-column label="职务" prop="job" width="80px">
      <t-table-column label="职务" prop="mainJobPosition" width="80px">
      </t-table-column>
      <t-table-column label="相似度" prop="similarity" width="75px">
      </t-table-column>
      <t-table-column label="进出时间" prop="time" width="169px">
      <t-table-column label="进出时间" prop="taskExecuteTime" width="160px">
      </t-table-column>
      <t-table-column label="位置" prop="location" width="122px">
      <t-table-column label="位置" prop="terminalPosition" width="122px">
      </t-table-column>
      <t-table-column label="终端名称" prop="terminal_name" width="97px">
      <t-table-column label="终端名称" prop="resourceToolName" width="97px">
      </t-table-column>
      <t-table-column label="终端编号" prop="terminal_number" width="72px">
      <t-table-column label="终端编号" prop="resourceToolCode" width="72px">
      </t-table-column>
      <t-table-column label="操作" width="80px">
        <template slot-scope="scope">
@@ -85,33 +82,33 @@
          <div class="detail_item1">
            <div>抓拍图片</div>
            <div>
              <img :src="rowdata.arrest_main_url" alt="" srcset="" style="width:100%;height:100%">
              <img :src="rowdata.idenVideoUrl" alt="" srcset="" style="width:100%;height:100%">
            </div>
          </div>
          <div class="detail_item2">
            <div>识别结果</div>
            <div>
              <div>
                <img :src="rowdata.arrest_part_url" alt="" srcset="" style="width:120px;height:160px;border-radius: 5px; ">
                <img :src="rowdata.idenPictureUrl" 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.face_url" alt="" srcset="" style="width:100%;height:160px; border-radius: 5px;">
                <img :src="rowdata.headerUrl" 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.employee_name }}（{{ rowdata.employee_number }}）
                <t-icon icon="user-outline"></t-icon> {{ rowdata.relateEmployeeRoleName }}（{{ rowdata.code }}）
              </div>
              <div>
                <t-icon icon="map-marker"></t-icon> {{ rowdata.location }}
                <t-icon icon="map-marker"></t-icon> {{ rowdata.terminalPosition }}
              </div>
              <div>
                <t-icon icon="clock-outline"></t-icon> {{ rowdata.time }}
                <t-icon icon="clock-outline"></t-icon> {{ rowdata.taskExecuteTime }}
              </div>
              <div>
                <t-icon icon="team-outline"></t-icon> 相似度：{{ rowdata.similarity }}
@@ -130,6 +127,7 @@
<script>
import accessapi from '@/api/access'
import formatDateTime from '@/utils/formatDateTime.js'
export default {
  data () {
@@ -147,10 +145,10 @@ export default {
      // 查询的参数
      searchdata: {
        typeid: '',
        username: '',
        starttime: '',
        endtime: ''
        relateEmployeeNameAsLike: '',
        beginTime: '',
        endTime: ''
      },
      // 一页的数据
      data: [
@@ -164,7 +162,7 @@ export default {
  },
  mounted () {
    this.gettype()
    // this.gettype()
    this.search()
  },
  methods: {
@@ -193,31 +191,32 @@ export default {
      }
    },
    // 获取进出类型
    gettype () {
      accessapi.getaccesstype().then((res) => {
        this.accesstype = res.data.data
        console.log(this.accesstype)
      })
    },
    // gettype () {
    //   accessapi.getaccesstype().then((res) => {
    //     this.accesstype = res.data.data
    //     console.log(this.accesstype)
    //   })
    // },
    // 查询数据
    async search () {
      // 检验数据
      var flag = this.startreend(this.searchdata.starttime, this.searchdata.endtime)
      var flag = this.startreend(this.searchdata.beginTime, this.searchdata.endTime)
      if (flag) {
        // console.log(this.page)
        // console.log(this.searchdata)
        var params = this.searchdata
        params.page = this.page
        params.limit = this.limit
        console.log(params)
        params.pageNumber = this.page
        params.pageSize = this.limit
        // console.log(params)
        var res = await accessapi.getaccesslist({ params: params })
        // console.log(res)
        if (res.status === 200) {
          console.log(res)
          this.data = res.data.data
          // console.log(this.data)
          this.total = Math.ceil(res.data.total / this.limit) * 5
          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
        }
      } else {
        this.$Message.danger('开始时间不能在结束时间的后面')
@@ -262,7 +261,6 @@ export default {
  .upload {
    font-size: 14px;
    line-height: 22px;
    margin: 29px 0 25px 0;
  }
  .table th,
  .table td {
@@ -273,6 +271,7 @@ export default {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    margin-bottom: 24px;
    .title {
      display: inline-block;
      width: 70px;

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

@@ -5,30 +5,36 @@
    <div class="alarm_header">
      <div>
        <span class="title">报警类型 : </span>
        <t-select v-model="searchdata.typeid" style="width:200px;height:32px">
          <t-option v-for="(item,index) in alarmtypelist" :key="index" :value="item.id">{{ item.name }}</t-option>
        <t-select v-model="searchdata.alarmTypeCode" style="width:200px;height:32px">
          <t-option v-for="item in alarmtypelist" :key="item.code" :value="item.code">{{ item.value }}</t-option>
        </t-select>
      </div>
      <div>
        <span class="title">开始时间 : </span>
        <t-date-picker :confirm="false" v-model="searchdata.starttime" placeholder="请选择开始时间" style="width:200px;height:32px"></t-date-picker>
        <t-date-picker :confirm="false" v-model="searchdata.beginTime" 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.endTime" placeholder="请选择结束时间" style="width:200px;height:32px"></t-date-picker>
      </div>
    </div>
    <div class="alarm_header">
      <div class="alarm_people">
      <!-- <div class="alarm_people">
        <span class="title">报警人 : </span>
        <t-select v-model="searchdata.Police" style="width:200px;height:32px">
          <t-option value="你好">选项1</t-option>
        <t-select v-model="searchdata.handler" style="width:200px;height:32px">
           <t-option value="你好">选项1</t-option>
          <t-option value="世界">选项2</t-option>
          <t-option v-for="item in aialarmhandlerlist" :value="item.id" :key="item.id">{{ item.alarmhandler }}</t-option>
        </t-select>
      </div> -->
      <!-- 导出excel组件 -->
      <div>
        <t-button color="primary" icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
      </div>
      <div>
@@ -37,44 +43,40 @@
      </div>
    </div>
    <!-- 导出excel组件 -->
    <div>
      <t-button color="primary" icon="upload" style="width:128px;height:32px" class="upload">导出至Excel</t-button>
    </div>
    <!-- 表格 -->
    <t-table :data="data" line @selection-change="handleSelectionChange">
      <t-table-column type="selection" width="50"></t-table-column>
      <t-table-column label="状态" width="110">
      <t-table-column label="状态" width="100">
        <template slot-scope="scope">
          <t-tag v-if="scope.row.state=== '处理中'" state="info">{{ scope.row.state }}</t-tag>
          <t-tag v-if="scope.row.state=== '未确认'" state="warning">{{ scope.row.state }}</t-tag>
          <t-tag v-if="scope.row.state=== '已处理'" state="success">{{ scope.row.state }}</t-tag>
          <t-tag v-if="scope.row.status=== 'RUN'" state="info">处理中</t-tag>
          <t-tag v-if="scope.row.status=== 'INI'" state="warning">未确认</t-tag>
          <t-tag v-if="scope.row.status=== 'END'" state="success">已处理</t-tag>
          <t-tag v-if="scope.row.status=== 'FAL'" state="danger">误报</t-tag>
        </template>
      </t-table-column>
      <t-table-column label="报警类型" prop="type">
      <t-table-column label="报警类型" prop="alarmTypeName">
      </t-table-column>
      <t-table-column label="报警描述" prop="describe" width="110">
      <t-table-column label="报警描述" prop="alarmMemo" width="110">
      </t-table-column>
      <t-table-column label="设备名称" prop="equipment_name" width="110">
      <t-table-column label="设备名称" prop="resourceToolName" width="110">
      </t-table-column>
      <t-table-column label="设备编号" prop="equipment_number" width="90">
      <t-table-column label="设备编号" prop="resourceToolCode" width="90">
      </t-table-column>
      <t-table-column label="设备位置" prop="equipment_location" width="120">
      <t-table-column label="设备位置" prop="monitorSceneName" width="120">
      </t-table-column>
      <t-table-column label="报警时间" prop="alarm_time" width="148px">
      <t-table-column label="报警时间" prop="aiIdenTime" width="148px">
      </t-table-column>
      <t-table-column label="处理人" prop="Handler" width="70">
      <t-table-column label="处理人" prop="workEmployeeRoleName" width="70">
      </t-table-column>
      <t-table-column label="处理时间" prop="processing_time" width="148px">
      <t-table-column label="处理时间" prop="processTime" width="148px">
      </t-table-column>
      <t-table-column label="操作">
        <template slot-scope="scope">
          <a href="javascript:void(0)" size="sm" style="color:#0089D4" @click="handleClick(scope,0)">详情</a>
          <a v-if="scope.row.state=='处理中'" style="color:#0089D4" @click="handleClick(scope,1)">关闭</a>
          <a v-if="scope.row.state=='未确认'" style="color:#0089D4" @click="handleClick(scope,1)">处理</a>
          <a v-if="scope.row.status=='RUN'||scope.row.status=='FAL'" style="color:#0089D4" @click="handleClick(scope,1)">关闭</a>
          <a v-if="scope.row.status=='INI'" style="color:#0089D4" @click="handleClick(scope,1)">处理</a>
        </template>
      </t-table-column>
    </t-table>
@@ -90,67 +92,68 @@
          <div class="detail">
            <label class="detail_title">状态：</label>
            <div class="detail_content">
              <t-tag v-if="currentdata.data.state==='未确认'" state="warning">{{ currentdata.data.state }}</t-tag>
              <t-tag v-if="currentdata.data.state==='已处理'" state="success">{{ currentdata.data.state }}</t-tag>
              <t-tag v-if="currentdata.data.state==='处理中'" state="info">{{ currentdata.data.state }}</t-tag>
              <t-tag v-if="currentdata.data.status==='INI'" state="warning">未确认</t-tag>
              <t-tag v-if="currentdata.data.status==='END'" state="success">已处理</t-tag>
              <t-tag v-if="currentdata.data.status==='RUN'" state="info">处理中</t-tag>
              <t-tag v-if="currentdata.data.status==='FAL'" state="danger">误报</t-tag>
            </div>
          </div>
          <div class="detail">
            <label class="detail_title">报警类型：</label>
            <div class="detail_content">{{ currentdata.data.type }}</div>
            <div class="detail_content">{{ currentdata.data.alarmTypeName }}</div>
          </div>
          <div class="detail">
            <label class="detail_title">报警描述：</label>
            <div class="detail_content">{{ currentdata.data.describe }}</div>
            <div class="detail_content">{{ currentdata.data.alarmMemo }}</div>
          </div>
          <div class="detail">
            <label class="detail_title">报警时间：</label>
            <div class="detail_content">{{ currentdata.data.alarm_time }}</div>
            <div class="detail_content">{{ currentdata.data.aiIdenTime }}</div>
          </div>
          <div class="detail">
            <label class="detail_title">设备编号：</label>
            <div class="detail_content">{{ currentdata.data.equipment_name }}</div>
            <div class="detail_content">{{ currentdata.data.resourceToolCode }}</div>
          </div>
          <div class="detail">
            <label class="detail_title">设备位置：</label>
            <div class="detail_content">{{ currentdata.data.equipment_location }}</div>
            <div class="detail_content">{{ currentdata.data.monitorSceneName }}</div>
          </div>
          <div class="detail">
            <label class="detail_title">处理人：</label>
            <div class="detail_content">{{ currentdata.data.Handler }}</div>
            <div class="detail_content">{{ currentdata.data.workEmployeeRoleName }}</div>
          </div>
          <div class="detail">
            <label class="detail_title">处理时间：</label>
            <div>{{ currentdata.data.processing_time }}</div>
            <div>{{ currentdata.data.processTime }}</div>
          </div>
        </div>
        <div class="details_item2">
          <div>
            <div>识别图片</div>
            <div><img :src="currentdata.data.picture_url" alt="" srcset="" style="width:100%;height:100%"></div>
            <div><img :src="currentdata.data.idenPictureUrl" alt="" srcset="" style="width:100%;height:100%"></div>
          </div>
          <div>
            <div>识别视频</div>
            <div>
              <video :src="currentdata.data.video_url" class="video" controls></video>
              <video :src="currentdata.data.idenVideoUrl" class="video" controls></video>
            </div>
          </div>
        </div>
        <div v-if="clickdetail==1">
          <div v-if="currentdata.data.state!='已处理'" class="radio">
          <div v-if="currentdata.data.status!='END'" class="radio">
            <div>报警处理 : </div>
            <div v-if="currentdata.data.state=='未确认'">
              <t-radio-group v-model="msg">
                <t-radio label="确认">
            <div v-if="currentdata.data.status=='INI'">
              <t-radio-group v-model="status">
                <t-radio label="RUN">
                  <span>确认</span>
                </t-radio>
                <t-radio label="误判">
                <t-radio label="FAL">
                  <span>误判</span>
                </t-radio>
@@ -158,9 +161,9 @@
              </t-radio-group>
            </div>
            <div v-if="currentdata.data.state=='处理中'">
              <t-radio-group v-model="msg">
                <t-radio label="关闭">关闭</t-radio>
            <div v-if="currentdata.data.status=='RUN'||currentdata.data.status=='FAL'">
              <t-radio-group v-model="status">
                <t-radio label="END">关闭</t-radio>
              </t-radio-group>
            </div>
@@ -188,21 +191,22 @@
<script>
import aialarmapi from '@/api/aialarm'
import formatDateTime from '@/utils/formatDateTime.js'
export default {
  data () {
    return {
      searchdata: {
        typeid: '', // 报警类型
        Police: '', // 报警人
        starttime: '', // 开始时间
        endtime: '' // 结束时间
        alarmTypeCode: '', // 报警类型
        beginTime: '', // 开始时间
        endTime: '' // 结束时间
      },
      // 报警类型
      alarmtypelist: [],
      // 报警人
      aialarmhandlerlist: [],
      // 模态框中的单选按钮
      msg: '',
      status: '',
      // 模态框
      details_modal: false,
      // 当前行的数据
@@ -215,20 +219,23 @@ export default {
      // 判断是详情还是处理
      clickdetail: 0,
      // 一页的数据
      data: [
        orkTaskId': '202012031206570506796', // {
        //   state: '处理中',
        //   type: '身份异常',
        //   describe: '未授权车辆',
        //   equipment_name: '1#人脸终端',
        //   equipment_number: 's00001',
        //   equipment_location: '1#风场SVG室',
        //   alarm_time: '2020-09-21 16:07:09',
        //   Handler: '张三',
        //   processing_time: '2020-09-21 16:07:09',
        // },
      data: [{
        'workTaskId': '202012031206570506796', orkTaskId': '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
      }
      ],
      // 页数
      page: 1,
@@ -254,12 +261,12 @@ export default {
      this.clickdetail = val
      // 去除模态框中的单选项
      this.msg = ''
      this.status = ''
      this.details_modal = true // 打开模态框
      this.currentdata.data = scope.row // 获取当前行的数据
      this.currentdata.index = scope.$index // 获取当前行的索引
      console.log(this.currentdata.data)
      // console.log(this.currentdata.data)
    },
    // 未确认状态的模态框的确认按钮 || 处理中状态的模态框的确认按钮
@@ -267,9 +274,11 @@ export default {
      // 获取单选框中的值
      // console.log(this.msg)
      // 判断是否选择了单选框
      if (this.msg) {
      if (this.status) {
        // 向后端发送数据
        this.alarmdispose(this.currentdata.data.id, this.msg)
        this.alarmdispose(this.currentdata.data.workTaskId, this.status)
        // console.log(this.status)
        // console.log(this.currentdata.data.workTaskId)
        // 关闭模态框
        this.details_modal = false
      } else {
@@ -277,32 +286,21 @@ export default {
      }
    },
    async alarmdispose (id, msg) {
      var res = await aialarmapi.dispose({ 'id': id, 'msg': msg })
      console.log(res)
    async alarmdispose (id, status, processMemo) {
      const dict = { 'END': '已解决', 'RUN': '处理中', 'FAL': '误报' }
      var res = await aialarmapi.dispose({ 'workTaskId': id, 'status': status, 'processMemo': dict.status })
      // console.log(res)
      if (res.status === 200) {
        this.$Message.success('操作成功')
        // console.log(res.data.data)
        this.judgeradio(msg)
        this.data[this.currentdata.index].status = res.data.data.status
        this.data[this.currentdata.index].processTime = res.data.data.doneDate
      } else {
        this.$Message.danger('处理失败')
      }
    },
    // 判断选择了哪个单选按钮
    judgeradio (msg) {
      // 未确认的模态框选择了确认
      if (msg === '确认') {
        this.data[this.currentdata.index].state = '处理中'
      }
      // 未确认的模态框选择了误判
      if (msg === '误判') {
        this.$Message.info('未确认的模态框选择了误判')
      }
      // 处理中的模态框选择了关闭按钮
      if (msg === '关闭') {
        this.data[this.currentdata.index].state = '已处理'
      }
    },
    onChange (val) {
      // console.log(val)
      this.page = val
@@ -318,25 +316,27 @@ export default {
      }
    },
    // 获取报警类型 以及报警人
    // 获取报警类型
    async gettype () {
      var res = await aialarmapi.getaialarmtype()
      // console.log(res)
      if (res.status === 200) {
        this.alarmtypelist = res.data.data
        console.log(this.alarmtypelist)
        // this.alarmtypelist = res.data.data
        // console.log(this.alarmtypelist)
        // console.log(res.data)
        this.alarmtypelist = res.data
      }
    },
    // 查询数据时
    async search () {
      var flag = this.startreend(this.searchdata.starttime, this.searchdata.endtime)
      console.log(flag)
      var flag = this.startreend(this.searchdata.beginTime, this.searchdata.endTime)
      // console.log(flag)
      if (flag) {
        // 查询
        var params = this.searchdata
        params.page = this.page
        params.limit = this.limit
        params.pageNumber = this.page
        params.pageSize = this.limit
        var res = await aialarmapi.getaialarmlist({
          params: params
@@ -344,8 +344,12 @@ export default {
        // console.log(res)
        if (res.status === 200) {
          this.data = res.data.data
          this.total = Math.ceil(res.data.total / this.limit) * 5
          this.data = res.data.data.data
          // console.log('数据是:', this.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
        } else {
          this.$Message.danger('数据获取失败')
        }
@@ -393,7 +397,6 @@ export default {
  .upload {
    font-size: 14px;
    line-height: 22px;
    margin: 29px 0 25px 0;
  }
  .table th,
  .table td {
@@ -403,6 +406,7 @@ export default {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    margin-bottom: 24px;
    .title {
      display: inline-block;
      width: 70px;

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

@@ -5,7 +5,7 @@
    </div>
    <div>
      <div class="time"><span style="color: #00d8f3;font-size: 21px;">{{ nowDate | dateFormat }}</span></div>
      <div class="goto"><t-icon icon="arrow-right-outline"></t-icon>进入系统</div>
      <div class="goto" @click="gotoSystem"><t-icon icon="arrow-right-outline"></t-icon>进入系统</div>
    </div>
    <div class="body">
      <div class="body-left">
@@ -57,7 +57,9 @@
        <div :style="`background-image: url(${titleImgBg})`" class="title" style="width: 370px;">
          <span class="title-span">重点区域监控</span>
        </div>
        <img src="@/assets/images/indexT1.png" style="width: 730px;height: 730px;padding-left: 20px;padding-top: 10px;">
        <video-player ref="videoPlayer" :options="videoOptions" class="vjs-custom-skin videoPlayer" :playsinline="true"></video-player>
<!--        <img src="@/assets/images/indexT1.png" style="width: 730px;height: 730px;padding-left: 20px;padding-top: 10px;">-->
      </div>
      <div class="body-right">
        <div :style="`background-image: url(${titleImgBg})`" class="title" style="width: 330px;">
@@ -75,6 +77,10 @@ import titleImgBg from '@/assets/images/indexTitle.png'
import polygon from '@/assets/images/polygon.png'
import echarts from 'echarts'
import dasapi from '@/api/dashboard'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'
export default {
  filters: {
@@ -108,10 +114,13 @@ export default {
      )
    }
  },
  components: {},
  components: {
    videoPlayer
  },
  data() {
    return {
      nowDate: new Date(),
      videoOptions: {},
      imgBg: imgBg,
      titleImgBg: titleImgBg,
      polygon: polygon,
@@ -120,15 +129,42 @@ export default {
      alarmDataX: [],
      alarmDataY: [],
      topData: [
        {name: '未戴安全帽', value: 0},
        {name: '人员聚集', value: 0},
        {name: '吸烟', value: 0},
        {name: '摔倒', value: 0}]
        {name: '未戴安全帽', value: ''},
        {name: '人员聚集', value: ''},
        {name: '吸烟', value: ''},
        {name: '摔倒', value: ''}],
      topData1: []
    }
  },
  computed: {
  },
  mounted () {
    this.videoOptions = {
      live: true,
      autoplay: true,
      fluid: true,
      notSupportedMessage: '暂时无法播放',
      controlBar: {
        timeDivider: true,
        durationDisplay: true,
        remainingTimeDisplay: false,
        fullscreenToggle: true // 全屏按钮
      },
      techOrder: ['flash'],
      flash: {
        hls: { withCredentials: false },
        swf: 'static/video-js.swf' // 引入静态文件swf
      },
      sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
        type: 'rtmp/mp4',
        src: 'rtmp://58.200.131.2:1935/livetv/hunantv' 
      }]
    }
    setInterval(() => { // 当前时间
      this.nowDate = new Date()
    }, 1000)
@@ -137,10 +173,12 @@ export default {
    this.init24Top()
  },
  methods: {
    gotoSystem() {
      this.$router.push({name:'videoSurveillance'})
    },
    initAttendance() {
      debugger
      this.attendanceData = dasapi.queryAttendanceChart().then(res => {
        debugger
        this.population = res.data.totalSize
        res.data.dataList.forEach(e => {
          if (e.name === '在岗') {
@@ -158,9 +196,7 @@ export default {
      })
    },
    initAlarm() {
      debugger
      this.population = dasapi.queryAlarmAnalysisChart().then(res => {
        debugger
        res.data.forEach(e => {
          this.alarmDataX.push(e.name)
          this.alarmDataY.push(e.value)
@@ -169,10 +205,11 @@ export default {
      })
    },
    init24Top() {
      debugger
      this.topData = dasapi.queryAlarmAnalysisTopList().then(res => {
        debugger
        this.topData = res.data
      this.topData1 = dasapi.queryAlarmAnalysisTopList().then(res => {
        this.topData1 = res.data
        if (res.data.length>3){
          this.topData = this.topData1
        }
      })
    },
    initAttendanceData() {
@@ -251,12 +288,14 @@ export default {
      var wordNum = parseInt((gridWidth / this.alarmDataX.length) / fontsize);
      var flag = 0
      this.alarmDataX.forEach(value => {
        var strs = value.split('')
        var str = ''
        for (var i = 0, s; s = strs[i++];) {
          str += s
          if (!(i % wordNum)) {
            flag = -20
        if (value){
          var strs = value.split('')
          var str = ''
          for (var i = 0, s; s = strs[i++];) {
            str += s
            if (!(i % wordNum)) {
              flag = -20
            }
          }
        }
      })

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/routes.js

@@ -18,14 +18,14 @@ export const constantRoutes = [
    hidden: true
  },
  {
    name: 'dashboard',
    path: '/dashboard',
    component: Layout,
    meta: { icon: 'home' },
    component: () => import(/* webpackChunkName: "dashboard" */ './modules/dashboard'),
    meta: { title: '首页', icon: 'home' },
    children: [
      {
        name: 'dashboard',
        name: 'dashboardch',
        path: '',
        component: () => import(/* webpackChunkName: "dashboard" */ './modules/dashboard'),
        meta: { title: '首页', icon: 'home' }
      }
    ]
@@ -40,12 +40,6 @@ export const constantRoutes = [
        path: '',
        component: () => import(/* webpackChunkName: "videoSurveillance" */ './modules/videoSurveillance'),
        meta: { title: '视频监控', icon: 'home' }
      },
      {
        name: 'videoSurveillance/distinguishRecord',
        path: '/videoSurveillance/distinguishRecord',
        component: () => import(/* webpackChunkName: "distinguishRecord" */ './modules/videoSurveillance/distinguishRecord'),
        hidden: true
      }
    ]
  },