[FE]增加了Ai报警和进出口记录界面

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

@@ -0,0 +1,174 @@
const Mock = require('mockjs')
const { data } = Mock.mock({
  'data|10-80': [{
    'type|1': ['进入', '离开'],
    employee_name: '@cname',
    employee_number: '@integer(1,99999)',
    company: '1#风场',
    department: '设备管理处',
    job: '运维人员',
    similarity: '85.66%',
    time: '@date("yyyy-MM-dd HH:mm:ss")',
    location: 'xxx风场集控室',
    terminal_name: '1#人脸终端',
    terminal_number: 'ZD00001',
    arrest_main_url: 'http://img95.699pic.com/photo/50028/0321.jpg_wh300.jpg',
    arrest_part_url: 'http://img95.699pic.com/photo/50028/0321.jpg_wh300.jpg',
    face_url: 'http://img95.699pic.com/photo/50028/0321.jpg_wh300.jpg'
  }]
})
module.exports = [
  {
    url: /\/access\/getaccesslist/,
    method: 'get',
    type: 'func',
    response: option => {
      option.url = decodeURIComponent(option.url)
      const TypeName = ['进入', '离开']
      //获取page
      var page = getQuery(option.url, 'page')
      //获取limit
      var limit = getQuery(option.url, 'limit')
      //获取开始时间
      var starttime = +new Date(getQuery(option.url, 'starttime'))
      //获取结束时间
      var endtime = +new Date(getQuery(option.url, 'endtime'))
      //获取进出类型
      var typeid = getQuery(option.url, 'typeid')
      //获取员工姓名
      var username = getQuery(option.url, 'username')
      var start = (page - 1) * limit
      var end = page * limit
      var result = data
      if (typeid) {
        result = result.filter((item) => { return item.type == TypeName[parseInt(typeid)] })
      }
      if (starttime) {
        result = result.filter((item) => { return +new Date(item.time) >= starttime })
      }
      if (endtime) {
        result = result.filter((item) => { return +new Date(item.time) <= endtime })
      }
      if (username) {
        result = result.filter((item) => { return item.employee_name.indexOf(username) != -1 })
      }
      return {
        data: result.slice(start, end),
        total: result.length,
        "success": true,
      }
    }
  },
  {
    url: '/access/getaccesstype',
    method: 'get',
    type: 'func',
    response: () => {
      return Mock.mock({
        'data|2': [{
          'id|+1': 0,
          'name|+1': ['进入', '离开']
        }]
      })
    }
  }
]
// Mock.mock(/\/access\/getaccesslist/, 'get', (option) => {
//   option.url = decodeURIComponent(option.url)
//   const TypeName = ['进入', '离开']
//   //获取page
//   var page = getQuery(option.url, 'page')
//   //获取limit
//   var limit = getQuery(option.url, 'limit')
//   //获取开始时间
//   var starttime = +new Date(getQuery(option.url, 'starttime'))
//   //获取结束时间
//   var endtime = +new Date(getQuery(option.url, 'endtime'))
//   //获取进出类型
//   var typeid = getQuery(option.url, 'typeid')
//   //获取员工姓名
//   var username = getQuery(option.url, 'username')
//   var start = (page - 1) * limit
//   var end = page * limit
//   var result = data
//   if (typeid) {
//     result = result.filter((item) => { return item.type == TypeName[parseInt(typeid)] })
//   }
//   if (starttime) {
//     result = result.filter((item) => { return +new Date(item.time) >= starttime })
//   }
//   if (endtime) {
//     result = result.filter((item) => { return +new Date(item.time) <= endtime })
//   }
//   if (username) {
//     result = result.filter((item) => { return item.employee_name.indexOf(username) != -1 })
//   }
//   return {
//     data: result.slice(start, end),
//     total: result.length,
//     msg: '测试成功'
//   }
// })
// Mock.mock('/access/getaccesstype', 'get', () => {
//   return Mock.mock({
//     'data|2': [{
//       'id|+1': 0,
//       'name|+1': ['进入', '离开']
//     }]
//   })
// })
//获取url的参数值
const getQuery = (url, name) => {
  const index = url.indexOf('?')
  if (index !== -1) {
    const queryStrArr = url.substr(index + 1).split('&')
    for (var i = 0; i < queryStrArr.length; i++) {
      const itemArr = queryStrArr[i].split('=')
      if (itemArr[0] === name) {
        return itemArr[1]
      }
    }
  }
  return null
}

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

@@ -0,0 +1,236 @@
const Mock = require('mockjs')
const { data } = Mock.mock({
  'data|10-80': [
    {
      id: '@id',
      'state|1': ['处理中', '未确认', '已处理'],
      'type|1': ['身份异常', '穿戴异常', '潜在危险', '违规违章', '仪表异常'],
      'describe|1': ['报警描述', '未授权车辆', '电梯门未关闭',],
      equipment_name: '1#人脸终端',
      equipment_number: 's00001',
      equipment_location: '1#风场SVG室',
      alarm_time: '@date("yyyy-MM-dd HH:mm:ss")',
      Handler: '@cname',
      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'
    },
  ]
})
module.exports = [
  {
    url: /\/aialarm\/getaialarmlist/,
    method: 'get',
    type: 'func',
    response: (option) => {
      const TypeName = ['身份异常', '穿戴异常', '潜在危险', '违规违章', '仪表异常']
      //获取page
      var page = getQuery(option.url, 'page')
      //获取limit
      var limit = getQuery(option.url, 'limit')
      //获取开始时间
      var starttime = +new Date(getQuery(option.url, 'starttime'))
      //获取结束时间
      var endtime = +new Date(getQuery(option.url, 'endtime'))
      //获取报警类型
      var typeid = getQuery(option.url, 'typeid')
      var start = (page - 1) * limit
      var end = page * limit
      // console.log(option)
      var result = data
      if (typeid) {
        result = result.filter((item) => { return item.type == TypeName[parseInt(typeid)] })
      }
      if (starttime) {
        result = result.filter((item) => { return +new Date(item.time) >= starttime })
      }
      if (endtime) {
        result = result.filter((item) => { return +new Date(item.time) <= endtime })
      }
      return {
        data: result.slice(start, end),
        total: result.length,
        msg: '测试成功'
      }
    }
  },
  {
    url: '/aialarm/getaialarmtype',
    method: 'get',
    type: 'func',
    response: () => {
      return Mock.mock({
        'data|5': [{
          'id|+1': 0,
          'name|+1': ['身份异常', '穿戴异常', '潜在危险', '违规违章', '仪表异常']
        }]
      })
    }
  },
  {
    url: /\/aialarm\/dispose/,
    method: 'put',
    type: 'func',
    response: (req) => {
      var res = JSON.parse(req.body)
      // console.log(res)
      var id = res.id
      var msg = res.msg
      for (var i = 0; i < data.length; i++) {
        if (data[i].id == id) {
          judgeradio(data[i], msg)
          return {
            success: true,
            msg: '处理成功',
            data: data[i]
          }
        }
      }
    }
  }
]
// Mock.mock(/\/aialarm\/getaialarmlist/, 'get', (option) => {
//   const TypeName = ['身份异常', '穿戴异常', '潜在危险', '违规违章', '仪表异常']
//   //获取page
//   var page = getQuery(option.url, 'page')
//   //获取limit
//   var limit = getQuery(option.url, 'limit')
//   //获取开始时间
//   var starttime = +new Date(getQuery(option.url, 'starttime'))
//   //获取结束时间
//   var endtime = +new Date(getQuery(option.url, 'endtime'))
//   //获取报警类型
//   var typeid = getQuery(option.url, 'typeid')
//   var start = (page - 1) * limit
//   var end = page * limit
//   // console.log(option)
//   var result = data
//   if (typeid) {
//     result = result.filter((item) => { return item.type == TypeName[parseInt(typeid)] })
//   }
//   if (starttime) {
//     result = result.filter((item) => { return +new Date(item.time) >= starttime })
//   }
//   if (endtime) {
//     result = result.filter((item) => { return +new Date(item.time) <= endtime })
//   }
//   return {
//     data: result.slice(start, end),
//     total: result.length,
//     msg: '测试成功'
//   }
// })
// Mock.mock('/aialarm/getaialarmtype', 'get', () => {
//   return Mock.mock({
//     'data|5': [{
//       'id|+1': 0,
//       'name|+1': ['身份异常', '穿戴异常', '潜在危险', '违规违章', '仪表异常']
//     }]
//   })
// })
// Mock.mock(/\/aialarm\/dispose/, 'put', (req) => {
//   // console.log(typeof req.body)
//   var res = JSON.parse(req.body)
//   // console.log(res)
//   var id = res.id
//   var msg = res.msg
//   for (var i = 0; i < data.length; i++) {
//     if (data[i].id == id) {
//       judgeradio(data[i], msg)
//       return {
//         success: true,
//         msg: '处理成功',
//         data: data[i]
//       }
//     }
//   }
// })
/**
{
  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',
},
*/
const judgeradio = (item, msg) => {
  //未确认的模态框选择了确认
  if (msg == '确认') {
    console.log(item)
    // this.data[this.currentdata.index].state = '处理中'
    item.state = '处理中'
    console.log(item)
  }
  //未确认的模态框选择了误判
  if (msg == '误判') {
    // this.$Message.info('未确认的模态框选择了误判')
    item.state = '处理中'
  }
  //处理中的模态框选择了关闭按钮
  if (msg == '关闭') {
    // this.data[this.currentdata.index].state = '已处理'
    item.state = '已处理'
  }
}
//获取url的参数值
const getQuery = (url, name) => {
  const index = url.indexOf('?')
  if (index !== -1) {
    const queryStrArr = url.substr(index + 1).split('&')
    for (var i = 0; i < queryStrArr.length; i++) {
      const itemArr = queryStrArr[i].split('=')
      if (itemArr[0] === name) {
        return itemArr[1]
      }
    }
  }
  return null
}

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

@@ -0,0 +1,16 @@
import http from '@/http'
const { $http } = http
const api = {
  getaccesslist (params) {
    return $http.get('/access/getaccesslist', params)
  },
  getaccesstype () {
    return $http.get('/access/getaccesstype')
  }
}
export default api

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

@@ -0,0 +1,21 @@
import http from '@/http'
const { $http } = http
const api = {
  getaialarmlist (params) {
    return $http.get('/aialarm/getaialarmlist/', params)
  },
  getaialarmtype () {
    return $http.get('/aialarm/getaialarmtype')
  },
  dispose (params) {
    return $http.put('/aialarm/dispose/', params)
  }
}
export default api

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

@@ -0,0 +1,371 @@
<template>
  <div class="access">
    <div class="access_header">
      <div>
        <span class="title">开始时间 : </span>
        <t-date-picker :confirm="false" v-model="searchdata.starttime" 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>
      </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>
    <div class="access_header">
      <div class="alarm_people">
        <span class="title">员工 : </span>
        <t-input v-model="searchdata.username" placeholder="员工姓名、编号关键字" style="width: 200px"></t-input>
      </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>
      <t-table-column label="员工编号" prop="employee_number" width="80px">
      </t-table-column>
      <t-table-column label="公司" prop="company" width="69px">
      </t-table-column>
      <t-table-column label="部门" prop="department" width="94px">
      </t-table-column>
      <t-table-column label="职务" prop="job" 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>
      <t-table-column label="位置" prop="location" width="122px">
      </t-table-column>
      <t-table-column label="终端名称" prop="terminal_name" width="97px">
      </t-table-column>
      <t-table-column label="终端编号" prop="terminal_number" width="72px">
      </t-table-column>
      <t-table-column label="操作" width="80px">
        <template slot-scope="scope">
          <a href="javascript:void(0)" size="sm" style="color:#0089D4" @click="handleClick(scope)">识别详情</a>
        </template>
      </t-table-column>
    </t-table>
    <!-- 分页 -->
    <t-pager :total="total" :current="page" show-elevator class="pager" @on-change="onChange"></t-pager>
    <!-- 模态框 -->
    <t-modal :visibled.sync="detail_modal" title="识别详情" width="840px" height="538px">
      <div style="text-align:center">
        <div class="detail_content">
          <div class="detail_item1">
            <div>抓拍图片</div>
            <div>
              <img :src="rowdata.arrest_main_url" 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; ">
                <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;">
                <div class="bottomimg">人脸底库</div>
              </div>
            </div>
            <div class="describe">
              <div>
                <t-icon icon="user-outline"></t-icon> {{ rowdata.employee_name }}（{{ rowdata.employee_number }}）
              </div>
              <div>
                <t-icon icon="map-marker"></t-icon> {{ rowdata.location }}
              </div>
              <div>
                <t-icon icon="clock-outline"></t-icon> {{ rowdata.time }}
              </div>
              <div>
                <t-icon icon="team-outline"></t-icon> 相似度：{{ rowdata.similarity }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <t-button type="danger" long @click="detail_modal = false">关闭</t-button>
      </div>
    </t-modal>
  </div>
</template>
<script>
import accessapi from '@/api/access'
export default {
  data () {
    return {
      // 进出类型
      accesstype: [],
      // 页码
      total: 0,
      // 选择的数据
      selectdata: [],
      // 模态框显示
      detail_modal: false,
      // 当前行数据
      rowdata: {},
      // 查询的参数
      searchdata: {
        typeid: '',
        username: '',
        starttime: '',
        endtime: ''
      },
      // 一页的数据
      data: [
      ],
      // 当前页
      page: 1,
      limit: 10
    }
  },
  mounted () {
    this.gettype()
    this.search()
  },
  methods: {
    // 表格中的选择数据
    handleSelectionChange (val) {
      this.selectdata = val
    },
    // 点击详情
    handleClick (scope) {
      this.detail_modal = true
      this.rowdata = scope.row
      console.log(this.rowdata)
    },
    // 分页
    onChange (val) {
      this.page = val
      this.search()
    },
    // 点击查询按钮
    btnsearch () {
      if (this.page === 1) {
        this.search()
      } else {
        this.page = 1
      }
    },
    // 获取进出类型
    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)
      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)
        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
        }
      } else {
        this.$Message.danger('开始时间不能在结束时间的后面')
      }
    },
    // 重置数据
    reset () {
      for (var index in this.searchdata) {
        this.searchdata[index] = ''
      }
      this.page = 1
      this.$Message.success('数据重置成功')
    },
    // 字符串更改为时间类型
    stringtodate (date) {
      date = date.substring(0, 19)
      date = date.replace(/-/g, '/')
      var timestamp = new Date(date).getTime()
      return timestamp
    },
    // 验证开始时间·和结束时间
    startreend (startdate, enddate) {
      startdate = this.stringtodate(startdate)
      enddate = this.stringtodate(enddate)
      if (startdate > enddate) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.access {
  font-size: 14px;
  padding: 6px 24px;
  height: 702px;
  .upload {
    font-size: 14px;
    line-height: 22px;
    margin: 29px 0 25px 0;
  }
  .table th,
  .table td {
    font-size: 14px;
    padding: 0 0 0 18px;
  }
  .access_header {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    .title {
      display: inline-block;
      width: 70px;
      height: 20px;
      font-size: 14px;
      text-align: right;
      color: rgba($color: #000000, $alpha: 0.65);
    }
  }
  .pager {
    float: right;
    margin-top: 26px;
  }
}
.detail_content {
  width: 100%;
  height: 376px;
  display: flex;
  justify-content: space-between;
  .detail_item1 {
    width: 45%;
    text-align: left;
    > div:nth-child(1) {
      margin: 0 0 20px 0;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
    }
    > div:nth-child(2) {
      width: 100%;
      height: 240px;
      border-radius: 5px;
      overflow: hidden;
    }
  }
  .detail_item2 {
    width: 50%;
    text-align: left;
    > div:nth-child(1) {
      margin: 0 0 20px 0;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
    }
    > div:nth-child(2) {
      width: 100%;
      height: 190px;
      display: flex;
      justify-content: space-between;
      .bottomimg {
        margin-top: 12px;
        width: 100%;
        text-align: center;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.65);
      }
      > div:nth-child(1) {
        width: 120px;
        height: 100%;
      }
      > div:nth-child(2) {
        width: 117.76px;
        height: 160px;
        line-height: 160px;
        img {
          width: 100%;
          height: 84.32px;
        }
      }
      > div:nth-child(3) {
        height: 100%;
        width: 120px;
      }
    }
    .describe {
      margin-top: 20px;
      width: 100%;
      height: 148px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      > div {
        width: 100%;
        height: 22px;
        font-size: 14px;
      }
    }
  }
}
</style>

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

@@ -0,0 +1,481 @@
<template>
  <div class="ai_alarm">
    <!-- 顶部的查询组件 -->
    <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>
      </div>
      <div>
        <span class="title">开始时间 : </span>
        <t-date-picker :confirm="false" v-model="searchdata.starttime" 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>
      </div>
    </div>
    <div class="alarm_header">
      <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-option value="世界">选项2</t-option>
        </t-select>
      </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="50"></t-table-column>
      <t-table-column label="状态" width="110">
        <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>
        </template>
      </t-table-column>
      <t-table-column label="报警类型" prop="type">
      </t-table-column>
      <t-table-column label="报警描述" prop="describe" width="110">
      </t-table-column>
      <t-table-column label="设备名称" prop="equipment_name" width="110">
      </t-table-column>
      <t-table-column label="设备编号" prop="equipment_number" width="90">
      </t-table-column>
      <t-table-column label="设备位置" prop="equipment_location" width="120">
      </t-table-column>
      <t-table-column label="报警时间" prop="alarm_time" width="148px">
      </t-table-column>
      <t-table-column label="处理人" prop="Handler" width="70">
      </t-table-column>
      <t-table-column label="处理时间" prop="processing_time" 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>
        </template>
      </t-table-column>
    </t-table>
    <!-- 分页 -->
    <t-pager :total="total" :current="page" show-elevator class="pager" @on-change="onChange"></t-pager>
    <!-- 模态框-->
    <t-modal :visibled.sync="details_modal" :title="clickdetail==0?'报警详情':'报警处理'" width="732px">
      <div style="text-align:center">
        <div class="details_item1">
          <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>
            </div>
          </div>
          <div class="detail">
            <label class="detail_title">报警类型：</label>
            <div class="detail_content">{{ currentdata.data.type }}</div>
          </div>
          <div class="detail">
            <label class="detail_title">报警描述：</label>
            <div class="detail_content">{{ currentdata.data.describe }}</div>
          </div>
          <div class="detail">
            <label class="detail_title">报警时间：</label>
            <div class="detail_content">{{ currentdata.data.alarm_time }}</div>
          </div>
          <div class="detail">
            <label class="detail_title">设备编号：</label>
            <div class="detail_content">{{ currentdata.data.equipment_name }}</div>
          </div>
          <div class="detail">
            <label class="detail_title">设备位置：</label>
            <div class="detail_content">{{ currentdata.data.equipment_location }}</div>
          </div>
          <div class="detail">
            <label class="detail_title">处理人：</label>
            <div class="detail_content">{{ currentdata.data.Handler }}</div>
          </div>
          <div class="detail">
            <label class="detail_title">处理时间：</label>
            <div>{{ currentdata.data.processing_time }}</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>
          <div>
            <div>识别视频</div>
            <div>
              <video :src="currentdata.data.video_url" class="video" controls></video>
            </div>
          </div>
        </div>
        <div v-if="clickdetail==1">
          <div v-if="currentdata.data.state!='已处理'" class="radio">
            <div>报警处理 : </div>
            <div v-if="currentdata.data.state=='未确认'">
              <t-radio-group v-model="msg">
                <t-radio label="确认">
                  <span>确认</span>
                </t-radio>
                <t-radio label="误判">
                  <span>误判</span>
                </t-radio>
              </t-radio-group>
            </div>
            <div v-if="currentdata.data.state=='处理中'">
              <t-radio-group v-model="msg">
                <t-radio label="关闭">关闭</t-radio>
              </t-radio-group>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <div v-if="clickdetail==1">
          <div>
            <t-button @click="details_modal=false">取消</t-button>
            <t-button color="primary" @click="confimclick">确认</t-button>
          </div>
        </div>
        <div v-else>
          <t-button type="danger" long @click="details_modal=false">关闭</t-button>
        </div>
      </div>
    </t-modal>
  </div>
</template>
<script>
import aialarmapi from '@/api/aialarm'
export default {
  data () {
    return {
      searchdata: {
        typeid: '', // 报警类型
        Police: '', // 报警人
        starttime: '', // 开始时间
        endtime: '' // 结束时间
      },
      // 报警类型
      alarmtypelist: [],
      // 报警人
      // 模态框中的单选按钮
      msg: '',
      // 模态框
      details_modal: false,
      // 当前行的数据
      currentdata: {
        index: '',
        data: {}
      },
      // 选择的数据
      selectdata: [],
      // 判断是详情还是处理
      clickdetail: 0,
      // 一页的数据
      data: [
        // {
        //   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',
        // },
      ],
      // 页数
      page: 1,
      limit: 10,
      total: 0
    }
  },
  mounted () {
    this.gettype()
    this.search()
  },
  methods: {
    // 选择行
    handleSelectionChange (val) {
      // console.log(val)
      this.selectdata = val
    },
    // 点击详情
    handleClick (scope, val) {
      this.clickdetail = val
      // 去除模态框中的单选项
      this.msg = ''
      this.details_modal = true // 打开模态框
      this.currentdata.data = scope.row // 获取当前行的数据
      this.currentdata.index = scope.$index // 获取当前行的索引
      console.log(this.currentdata.data)
    },
    // 未确认状态的模态框的确认按钮 || 处理中状态的模态框的确认按钮
    confimclick () {
      // 获取单选框中的值
      // console.log(this.msg)
      // 判断是否选择了单选框
      if (this.msg) {
        // 向后端发送数据
        this.alarmdispose(this.currentdata.data.id, this.msg)
        // 关闭模态框
        this.details_modal = false
      } else {
        this.$Message.warning('请选择按钮')
      }
    },
    async alarmdispose (id, msg) {
      var res = await aialarmapi.dispose({ 'id': id, 'msg': msg })
      console.log(res)
      if (res.status === 200) {
        // console.log(res.data.data)
        this.judgeradio(msg)
      } 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
      this.search()
    },
    // 点击查询按钮
    btnsearch () {
      if (this.page === 1) {
        this.search()
      } else {
        this.page = 1
      }
    },
    // 获取报警类型 以及报警人
    async gettype () {
      var res = await aialarmapi.getaialarmtype()
      // console.log(res)
      if (res.status === 200) {
        this.alarmtypelist = res.data.data
        console.log(this.alarmtypelist)
      }
    },
    // 查询数据时
    async search () {
      var flag = this.startreend(this.searchdata.starttime, this.searchdata.endtime)
      console.log(flag)
      if (flag) {
        // 查询
        var params = this.searchdata
        params.page = this.page
        params.limit = this.limit
        var res = await aialarmapi.getaialarmlist({
          params: params
        })
        // console.log(res)
        if (res.status === 200) {
          this.data = res.data.data
          this.total = Math.ceil(res.data.total / this.limit) * 5
        } else {
          this.$Message.danger('数据获取失败')
        }
      } else {
        this.$Message.danger('开始时间不能在结束时间的后面')
      }
    },
    // 重置
    reset () {
      for (var index in this.searchdata) {
        this.searchdata[index] = ''
      }
      // console.log(this.searchdata)
      this.page = 1
      this.$Message.success('数据重置成功')
    },
    // 字符串更改为时间类型
    stringtodate (date) {
      date = date.substring(0, 19)
      date = date.replace(/-/g, '/')
      var timestamp = new Date(date).getTime()
      return timestamp
    },
    // 验证开始时间·和结束时间
    startreend (startdate, enddate) {
      startdate = this.stringtodate(startdate)
      enddate = this.stringtodate(enddate)
      if (startdate > enddate) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>
<style lang='scss' >
.ai_alarm {
  font-size: 14px;
  padding: 6px 24px;
  .upload {
    font-size: 14px;
    line-height: 22px;
    margin: 29px 0 25px 0;
  }
  .table th,
  .table td {
    padding: 0 0 0 21px;
  }
  .alarm_header {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    .title {
      display: inline-block;
      width: 70px;
      height: 20px;
      font-size: 14px;
      text-align: right;
      color: rgba($color: #000000, $alpha: 0.65);
    }
  }
}
.pager {
  float: right;
  margin-top: 26px;
}
.details_item1 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 192px;
  align-items: center;
  border-radius: 4px;
  background-color: rgba(245, 245, 245, 1);
  padding: 0 16px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  .detail {
    width: 49%;
    display: flex;
    .detail_title {
      display: block;
      width: 70px;
      height: 22px;
      text-align: right;
    }
    .detail_content {
      flex: 1;
      text-align: left;
    }
  }
}
.details_item2 {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  > div {
    width: 49%;
    > div:nth-child(1) {
      text-align: left;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
      margin-bottom: 8px;
    }
    > div:nth-child(2) {
      height: 250px;
      // border: 1px solid black;
      border-radius: 5px;
      overflow: hidden;
    }
  }
}
.radio {
  margin-top: 19px;
  float: left;
  display: flex;
  align-items: center;
  > div:nth-child(1) {
    margin-right: 5px;
  }
}
.video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
</style>

security-protection-platform/src/routes.js

@@ -66,6 +66,19 @@ export const constantRoutes = [
        meta: { title: '假勤管理', icon: 'home' }
      }
    ]
  },
  {
    path: '/alarm',
    component: Layout,
    meta: { icon: 'bell' },
    children: [
      {
        name: 'ai_alarm',
        path: '',
        component: () => import(/* webpackChunkName: "sys_attendance" */ './modules/aialarm/index.vue'),
        meta: { title: 'AI报警', icon: 'bell' }
      }
    ]
  }, {
    path: '/system',
    component: Layout,
@@ -92,6 +105,19 @@ export const constantRoutes = [
        meta: { title: '监控布局' }
      }
    ]
  },
  {
    path: '/access',
    component: Layout,
    meta: { icon: 'home' },
    children: [
      {
        name: 'access',
        path: '',
        component: () => import(/* webpackChunkName: "sys_attendance" */ './modules/access/index.vue'),
        meta: { title: '进出记录', icon: 'home' }
      }
    ]
  }, {
    path: '*',
    hidden: true,