Merge branch 'dev-security' of http://10.1.235.20:3000/asiainfo/ebc into dev-security

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/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/dashboard/index.js

@@ -4,20 +4,19 @@ const { $default } = http
const api = {
  // 出勤(饼状图)
  queryAttendanceChart() {
  queryAttendanceChart () {
    return $default.get('/sp/homePage/queryAttendanceChart', {}).then(resp => {
      debugger
      return resp.data
    })
  },
  // 报警(柱状图)
  queryAlarmAnalysisChart() {
  queryAlarmAnalysisChart () {
    return $default.get('/sp/homePage/queryAlarmAnalysisChart', {}).then(resp => {
      return resp.data
    })
  },
  // 报警(TOP4)
  queryAlarmAnalysisTopList() {
  queryAlarmAnalysisTopList () {
    return $default.get('/sp/homePage/queryAlarmAnalysisTopList', {}).then(resp => {
      return resp.data
    })

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

@@ -1,14 +1,18 @@
import http from '@/http'
const { $http } = http
const { $http, $default } = http
const api = {
  // 获取风场大门表格数据
  getVideoSurveillanceData(params) {
  getVideoSurveillanceData (params) {
    return $http.get('/videoSurveillance/getVideoSurveillanceData', params)
  },
  // 获取识别记录数据
  getDistinguishData(params) {
  getDistinguishData (params) {
    return $http.get('/videoSurveillance/getDistinguishData', params)
  },
  // 视频回放
  getVideoPlayBack (id) {
    return $default.get(`/sp/uploadFile/getFileUrl?fileName=${id}`).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/videoSurveillance/index.vue

@@ -17,9 +17,15 @@
          <div slot="foot" class="bottom">
            <span v-tooltip="item.videoDetail">{{ item.videoDetail.content | handleText }}</span>
            <div style="margin-left:auto">
              <t-button v-tooltip="item.options1" class="bottom-btn" @click="goDistinguishRecord(item.videoId)"><t-icon size="16" icon="image-outline"></t-icon></t-button>
              <t-button v-tooltip="item.options2" class="bottom-btn" @click="handleReview(item.videoId)"><t-icon size="16" icon="piechart-outline"></t-icon></t-button>
              <t-button v-tooltip="item.options3" class="bottom-btn"><t-icon size="16" icon="arrow-expand-all-outline"></t-icon></t-button>
              <t-button v-tooltip="item.options1" class="bottom-btn" @click="goDistinguishRecord(item.videoId)">
                <t-icon size="16" icon="image-outline"></t-icon>
              </t-button>
              <t-button v-tooltip="item.options2" class="bottom-btn" @click="handleReview(item.videoId)">
                <t-icon size="16" icon="piechart-outline"></t-icon>
              </t-button>
              <t-button v-tooltip="item.options3" class="bottom-btn">
                <t-icon size="16" icon="arrow-expand-all-outline"></t-icon>
              </t-button>
            </div>
          </div>
        </t-card>
@@ -37,7 +43,7 @@ import ReplayDialog from './components/ReplayDialog'
export default {
  components: { ReplayDialog },
  filters: {
    handleText(value) {
    handleText (value) {
      if (!value) return ''
      if (value.length > 13) {
        return value.slice(0, 13) + '...'
@@ -45,7 +51,7 @@ export default {
      return value
    }
  },
  data() {
  data () {
    return {
      videoCurrent: 1, // 大门分页数据
      videoPageSize: 10, // 大门分页数据
@@ -66,12 +72,14 @@ export default {
      replayList: []
    }
  },
  mounted() {
  mounted () {
    this.getWindFiledList() // 获取风场列表
    this.getVideoSurveillanceData() // 获取视频监控界面数据
  },
  methods: {
    handleReview() {
    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',
@@ -97,27 +105,27 @@ export default {
        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'
      //   }]
      // }]
      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) {
    async tabClick (id) {
      this.paramsObj.page = 0
      this.videoList = []
      this.tabId = id
      this.videoCurrent = 1
      this.getVideoSurveillanceData()
    },
    getWindFiledList() {
    getWindFiledList () {
      commonapi.getDepartments().then(resp => {
        this.organizationList = []
        console.log(resp)
@@ -133,13 +141,13 @@ export default {
      })
    },
    // 获得风场大门数据
    getVideoSurveillanceData(isWind) {
    getVideoSurveillanceData (isWind) {
      if (isWind) {
        this.videoList = []
      }
      if (this.videoList.length <= 10) {
        this.paramsObj.page = this.videoCurrent
        sysapi.getVideoSurveillanceData({params: this.paramsObj}).then(res => {
        sysapi.getVideoSurveillanceData({ params: this.paramsObj }).then(res => {
          this.departments = res.data.departments
          this.videoTotal = this.departments[this.tabId - 1].total
          res.data.data.forEach((element, index) => {
@@ -160,11 +168,11 @@ export default {
      }
    },
    // 进入识别记录界面
    goDistinguishRecord(id) {
      this.$router.push({path: '/videoSurveillance/distinguishRecord', query: {videoId: id}})
    goDistinguishRecord (id) {
      this.$router.push({ path: '/videoSurveillance/distinguishRecord', query: { videoId: id } })
    },
    // 风场大门分页
    onChangeGate(val) {
    onChangeGate (val) {
      this.videoList = []
      this.videoCurrent = val
      this.getVideoSurveillanceData()
@@ -173,69 +181,77 @@ export default {
}
</script>
<style lang="scss" scoped>
.page-main{
    padding:30px 24px 24px 24px;
    .top-btn{
        float: right;
    }
    .page-bottom{
        display: flex;
.page-main {
  padding: 30px 24px 24px 24px;
  .top-btn {
    float: right;
  }
  .page-bottom {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    margin-left: -24px;
    .card-video-first,
    .card-video {
      width: 354px;
      height: 240px;
      margin-top: 20px;
      .card-image {
        width: 100%;
        flex-wrap: wrap;
        margin-left: -24px;
        .card-video-first, .card-video{
          width:354px;
          height:240px;
          margin-top: 20px;
            .card-image{
                width: 100%;
                height: 100%;
            }
            .bottom{
                padding: 0 12px;
                display: flex;
                align-items: center;
                background-color: rgba(0, 0, 0, 0.5);
                height: 40px;
                color: #fff;
                font-size: 14px;
                .bottom-btn{
                    color: #fff;
                    border: none;
                    padding:0 !important;
                    &:hover{
                        color: #0089d4;
                    }
                }
            }
        }
        .card-video{
          .card-footer{
            padding: 0px 0 0 24px !important;
            background: none;
            width: 100%;
            position: absolute;
            border-top: none;
            bottom: 0px;
            }
            .card-block, .card-video-block{
              margin-left: 24px;
              padding:0 !important;
            }
        height: 100%;
      }
      .bottom {
        padding: 0 12px;
        display: flex;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.5);
        height: 40px;
        color: #fff;
        font-size: 14px;
        .bottom-btn {
          color: #fff;
          border: none;
          padding: 0 !important;
          &:hover {
            color: #0089d4;
          }
        }
      }
    }
    .card-video {
      .card-footer {
        padding: 0px 0 0 24px !important;
        background: none;
        width: 100%;
        position: absolute;
        border-top: none;
        bottom: 0px;
      }
      .card-block,
      .card-video-block {
        margin-left: 24px;
        padding: 0 !important;
      }
    }
    .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]{
  .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{
  }
  y,
  .radio-group-button .form-radio,
  .checkbox-group--button .form-checkbox .form-checkbox__inner,
  .btn-dashed-secondary,
  .btn-outline-secondary {
    background: none;
}
  }
}
</style>