feat:更新ai任务界面&视频监控界面

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

@@ -9,25 +9,18 @@ let totalData = Mock.mock({
      'org|1':['河东风场', '河西风场', '河南风场', '河北风场', '邵阳风场']// 风场名称
    }],
  },
  'gateFieldData':{
    'success':true,
    'data|100-150': [{
    'videoId|+1':012013, //视频id
	  'url':'/static/images/demo.png', // 图片url 临时
    'videoDetail|1':['东门（安全帽识别、人脸识别）','西门（安全帽识别、人脸识别））','配电室（安全帽识别、人脸识别、抽烟识别）','南门（车辆识别）','集控室（人脸识别、玩手机识别）','1#电梯（人员摔倒识别 电梯门闭合识别)'], // 视频内容
    'id|+1':'101100', // 风场id
    'options1|+1':{ content: '识别记录', placement: 'top'},
    'options2|+1':{ content: '视频回放', placement: 'top'},
    'options3|+1':{ content: '全屏', placement: 'top'}
    }]
  },
  'centerControlRoomData':{
  'videoSurveillanceData':{
    'success':true,
    'departments|2':[{ //风场具体位置信息
      'depName|+1':['风场大门','集控室'],
      'depId|+1':0001
    }],
    'data|150': [{
    'videoId|+1':012013, //视频id
	  'url':'/static/images/demo.png', // 图片url 临时
    'videoDetail|1':['东门（安全帽识别、人脸识别）','西门（安全帽识别、人脸识别））','配电室（安全帽识别、人脸识别、抽烟识别）','南门（车辆识别）','集控室（人脸识别、玩手机识别）','1#电梯（人员摔倒识别 电梯门闭合识别)'], // 视频内容
    'id|+1':'101100', // 风场id
    'departmentId|1':[1,2], // 所属位置id
    'options1|+1':{ content: '识别记录', placement: 'top'},
    'options2|+1':{ content: '视频回放', placement: 'top'},
    'options3|+1':{ content: '全屏', placement: 'top'}
@@ -45,25 +38,31 @@ let totalData = Mock.mock({
  },
})
module.exports = [
  {
  url: '/videoSurveillance/getOrganizationData',
  method: 'get',
  type: 'func',
  response: req => {
    return totalData.organizationData
  }
},
{
  url: '/videoSurveillance/getGateFieldData',
  url: '/videoSurveillance/getVideoSurveillanceData',
  method: 'get',
  type: 'func',
  response: req => {
    const url = parseQueryString(req.url)
    const current = parseInt(url.page)
    const limit = parseInt(url.limit)
    const total = totalData.gateFieldData.data.length
    let total = 0
    const department = totalData.videoSurveillanceData.departments.map(item=>{
      total = 0
      for(let i=0;i<totalData.videoSurveillanceData.data.length;i++){
          if( totalData.videoSurveillanceData.data[i].departmentId===item.depId){
            total+=1
          }
      }
      return {
      depName:item.depName,
      depId:item.depId,
      total:total
      }
    })
    let data = {
        data:totalData.gateFieldData.data.slice((current-1)*limit,(current)*limit),
        data:totalData.videoSurveillanceData.data.slice((current-1)*limit,(current)*limit),
        departments: department,
        page:current,
        success:true,
        limit:limit,
@@ -73,25 +72,6 @@ module.exports = [
    }
},
{
  url: '/videoSurveillance/getCenterRoomData',
  method: 'get',
  type: 'func',
  response: req => {
    const url = parseQueryString(req.url)
    const current = parseInt(url.page)
    const limit = parseInt(url.limit)
    const total = totalData.gateFieldData.data.length
    let data = {
        data:totalData.gateFieldData.data.slice((current-1)*limit,(current)*limit),
        page:current,
        success:true,
        limit:limit,
        total:total
    }
  return data
  }
},
{
  url: '/videoSurveillance/getDistinguishData',
  method: 'get',
  type: 'func',

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

@@ -2,25 +2,13 @@ import http from '@/http'
const { $http } = http
const api = {
  // 获取视频监控风场列表数据
  getOrganizationData() {
    return $http.get('/videoSurveillance/getOrganizationData')
  },
  // 获取风场大门表格数据
  getGateFieldData(params) {
    return $http.get('/videoSurveillance/getGateFieldData', params)
  },
  // 获取集控室表格数据
  getCenterRoomData(params) {
    return $http.get('/videoSurveillance/getCenterRoomData', params)
  getVideoSurveillanceData(params) {
    return $http.get('/videoSurveillance/getVideoSurveillanceData', params)
  },
  // 获取识别记录数据
  getDistinguishData(params) {
    return $http.get('/videoSurveillance/getDistinguishData', params)
  },
  // 获取考勤月报详情数据
  getAttendanceDetail(params) {
    return $http.get('/attendance/getMonthReportDetail', params)
  }
}
export default api

security-protection-platform/src/modules/system/assignment/index.vue

@@ -0,0 +1,330 @@
<template>
  <div class="device-manage-page">
    <t-card class="page-card">
      <div class="select-confidtion-box row">
        <div class="col-3">任务名称：
          <t-select v-model="taskName" width="200px">
            <t-option v-for="item in taskNameList" :key="item.id" :value="item.id">{{ item.name }}</t-option>
          </t-select>
        </div>
        <div class="col-3">匹配模型：
          <t-select v-model="matchingType" width="200px">
            <t-option v-for="item in matchingTypeList" :key="item.id" :value="item.id">{{ item.name }}</t-option>
          </t-select>
        </div>
        <div class="col-3">任务状态：
          <t-select v-model="taskStatus" width="200px">
            <t-option v-for="item in taskStatusList" :key="item.id" :value="item.id">{{ item.name }}</t-option>
          </t-select>
        </div>
        <div class="col-2 offset-1 select-button-box" align="end">
          <t-button color="primary" @click="selectHandle">查询</t-button>
          <t-button @click="resetData">重置</t-button>
        </div>
      </div>
      <div class="function-button-box">
        <t-button color="primary">
          <t-icon icon="plus-circle-outline" size="16"></t-icon>新增
        </t-button>
        <t-button @click="multDeleteDeviceData">
          <t-icon icon="trash" size="16"></t-icon>删除
        </t-button>
      </div>
      <div class="table-box">
        <t-table :data="taskDataList" line @selection-change="selectChange">
          <t-table-column type="selection" width="70"></t-table-column>
          <t-table-column prop="taskName" label="任务名称" width="110"></t-table-column>
          <t-table-column prop="taskId" label="任务编号" width="120"></t-table-column>
          <t-table-column prop="matchingType" label="匹配模型" width="120"></t-table-column>
          <t-table-column prop="executionDevice" label="执行设备" width="220"></t-table-column>
          <t-table-column prop="configurationTime" label="配置时间" width="180"></t-table-column>
          <t-table-column prop="status" style="background-color:#000" label="状态" width="120">
            <template v-slot="{row}">
              <div :class="getTypecellClass(row.status)" class="tag-cell">
                <span class="status-ball"></span>{{ row.status }}
              </div>
            </template>
          </t-table-column>
          <t-table-column label="操作">
            <template v-slot="{row}">
              <a href="javascript:;" style="color:#0089D4;">编辑</a>
              <a href="javascript:;" style="color:#0089D4;" @click="deleteDeviceData(row)">删除</a>
              <a href="javascript:;" style="color:#0089D4;">执行</a>
              <a href="javascript:;" style="color:#0089D4;">停止</a>
            </template>
          </t-table-column>
        </t-table>
      </div>
      <div class="table-pager">
        <t-pager :current.sync="page" :total="total" :page-size="limit" :sizer-range="[10,20,50,100]" show-elevator show-sizer @on-size-change="onSizeChange" @on-change="onChange">>
        </t-pager>
      </div>
    </t-card>
    <!-- 指令下发对话框 -->
    <!-- <template>
      <send-order-modal :data="currentDeviceData"></send-order-modal>
    </template> -->
  </div>
</template>
<script>
import sysapi from '@/api/system'
// import sendOrderModal from './components/modal/sendordermodal.vue'
export default {
  components: {
    // sendOrderModal
  },
  data () {
    return {
      // 设备类型id
      taskName: '',
      // 任务名称列表
      taskNameList: [],
      // 匹配模型列表
      matchingTypeList: [],
      // 任务状态列表
      taskStatusList: [],
      // 任务数据列表
      taskDataList: [],
      // 匹配模型
      matchingType: '',
      // 任务状态
      taskStatus: '',
      // 当前页
      page: 1,
      // 当前页的数据个数
      limit: 10,
      // 数据总数
      total: 100,
      // 批量删除的设备id
      deletetaskStatus: [],
      // 当前设备数据
      currentDeviceData: {}
    }
  },
  created () {
    this.getDeviceData()
    this.getDeviceTypes()
  },
  methods: {
    testStyle(a, b, c) {
      console.log(b)
      a.className = 'test'
    },
    getTypecellClass (orderTypeName) {
      let typecellClass = ''
      switch (orderTypeName) {
        case '摄像头':
        case '门禁':
          typecellClass = 'tag-cell-executing'
          break
        case '人脸终端':
          typecellClass = 'tag-cell-stoped'
          break
      }
      return typecellClass
    },
    // 获取设备列表数据
    async getDeviceData () {
      const res = await sysapi.getDeviceData({ params: { page: this.page, limit: this.limit, taskName: this.taskName, matchingType: this.matchingType, taskStatus: this.taskStatus } }
      )
      if (res.status === 200) {
        console.log(res.data.data)
        const list = res.data.data.data
        let dataList = list.map(item => {
          return {
            taskName: item.deviceName,
            status: item.deviceType
          }
        })
        console.log(dataList)
        this.taskDataList = dataList
        this.total = res.data.total
      } else {
        this.$Message.danger('设备数据列表获取失败！')
      }
    },
    // 向服务器发送请求获取设备类型列表数据
    async getDeviceTypes () {
      const res = await sysapi.getDeviceTypes()
      if (res.status === 200) {
        this.taskNameList = res.data.data
      } else {
        this.$Message.danger('设备类型列表数据获取失败！')
      }
    },
    // 查询数据
    selectHandle () {
      this.page = 1
      this.getDeviceData()
    },
    // 重置查询数据
    resetData () {
      this.page = 1
      this.taskName = ''
      this.taskStatus = ''
      this.matchingType = ''
      this.getDeviceData()
    },
    // 当前页改变 触发事件
    onChange (page) {
      this.page = page
      this.getDeviceData()
    },
    // 当前页数据总数改变 触发事件
    onSizeChange (pageSize) {
      this.limit = pageSize
      this.getDeviceData()
    },
    // 删除数据
    deleteDeviceData (row) {
      this.$Confirm.confirm({
        title: '正在准备删除...',
        content: '<p>确定要删除？</p><p>删除后将无法还原！</p>',
        ok: async () => {
          const res = await sysapi.deleteDeviceData({ taskStatus: row.taskStatus })
          if (res.status === 200) {
            this.getDeviceData()
            this.$Message.success('删除成功！')
          } else {
            this.$Message.danger('删除失败！')
          }
        },
        cancel: () => {
          this.$Message.info('已取消删除！')
        }
      })
    },
    // 当复选框发生改变时 触发事件
    selectChange (data) {
      const arr = []
      data.forEach(item => arr.push(item.taskStatus))
      this.deletetaskStatus = arr
    },
    // 批量删除数据
    multDeleteDeviceData () {
      if (this.deletetaskStatus.length === 0) {
        return this.$Message.warning('请选择要删除的数据！')
      }
      this.$Confirm.confirm({
        title: '正在准备删除...',
        content: '<p>确定要删除？</p><p>删除后将无法还原！</p>',
        ok: async () => {
          const res = await sysapi.deleteDeviceData({ taskStatus: this.deletetaskStatus })
          if (res.status === 200) {
            this.getDeviceData()
            this.$Message.success('删除成功！')
          } else {
            this.$Message.danger('删除失败！')
          }
        },
        cancel: () => {
          this.$Message.info('已取消删除！')
        }
      })
    }
  }
}
</script>
<style lang="scss">
.tag-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: 4px;
  &-executing {
      .status-ball{
     width:6px;
     height:6px;
     border-radius:60px;
     margin-right:8px;
     background-color: rgba(20, 123, 209, 100);
    }
    border-radius: 16px;
    color:rgba(20, 123, 209, 100);
    background-color: rgba(20, 123, 209, 0.1);
  }
  &-stoped {
    border-radius: 16px;
    opacity: 0.25;
    color:rgba(0, 0, 0, 1);
    background-color: rgba(0, 0, 0, 0.1);
    .status-ball{
     background-color:rgba(0, 0, 0, 1);
     width:6px;
     height:6px;
     border-radius:60px;
     margin-right:8px
    }
  }
}
.device-manage-page {
    .test{
        background-color: #0089d4;
    }
  .card-block {
    padding: 0px 24px !important;
  }
  .tabs {
    overflow: inherit;
  }
  .tabs-list {
    .tabs-list__content {
      display: flex;
      justify-content: flex-end;
      margin-top: -10px;
      .tabs-list__nav {
        height: 32px;
        line-height: 16px;
      }
    }
    .tabs-tab {
      margin: 0;
      padding: 0 25px;
      font-size: 14px;
    }
    .tabs-tab.checked {
      border-bottom: 3px solid #2d98ff;
    }
  }
  .select-button-box {
    padding: 0;
    button {
      margin-left: 5px;
    }
  }
  .select-confidtion-box {
    margin: 24px 0;
    .col-3 {
      padding: 0;
    }
  }
  .function-button-box {
    line-height: 32px;
    button {
      margin-right: 12px;
      i {
        line-height: 32px;
        margin-right: 8px;
      }
    }
    a {
      color: #0089d4;
      i {
        line-height: 32px !important;
        margin-left: 4px;
      }
    }
  }
  .table-box {
    margin: 20px 0;
  }
  .table-pager {
    display: flex;
    justify-content: flex-end;
  }
}
</style>

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

@@ -1,18 +1,18 @@
<template>
  <div class="page-main">
    <t-button-group class="top-btn">
      <t-button :color="tabType === 'gate' ? 'primary' : 'secondary'" @click="tabClick('gate')">风场大门</t-button>
      <t-button :color="tabType === 'room' ? 'primary' : 'secondary'" @click="tabClick('room')">集控室</t-button>
      <t-button :color="tabId === 1 ? 'primary' : 'secondary'" @click="tabClick(1)">风场大门</t-button>
      <t-button :color="tabId === 2 ? 'primary' : 'secondary'" @click="tabClick(2)">集控室</t-button>
    </t-button-group>
    <div class="page-top">
      <span>风场:</span>
      <t-select v-model="gateFieldData" @change="getWindFieldData">
      <t-select v-model="gateFieldData" clearable @change="getVideoSurveillanceData(true)">
        <t-option v-for="(item,index) in organizationList" :key="index" :value="item.id">{{ item.org }}</t-option>
      </t-select>
    </div>
    <div v-if="tabType==='gate'" >
      <div class="page-bottom">
        <t-card v-for="(item,index) in gateList" :key="index" :class="index%3===0?'card-video-first':'card-video'">
    <div class="page-bottom">
      <div v-for="(item,index) in videoList" :key="index">
        <t-card :class="index%3===0?'card-video-first':'card-video'">
          <img :src="item.url" class="card-image">
          <div slot="foot" class="bottom">
            <span v-tooltip="item.videoDetail">{{ item.videoDetail.content | handleText }}</span>
@@ -24,24 +24,8 @@
          </div>
        </t-card>
      </div>
      <t-pager :page-size="gatePageSize" :current="gateCurrent" :total="gateTotal" :sizer-range="[ 5, 10, 20, 30 ]" class="pager" show-elevator @on-change="onChangeGate"></t-pager>
    </div>
    <div v-if="tabType==='room'" >
      <div class="page-bottom">
        <t-card v-for="(item,index) in roomList" :key="index" :class="index%3===0?'card-video-first':'card-video'">
          <img :src="item.url" class="card-image">
          <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"><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>
      </div>
      <t-pager :page-size="roomPageSize" :current="roomCurrent" :total="roomTotal" :sizer-range="[ 5, 10, 20, 30 ]" class="pager" show-elevator @on-change="onChangeRoom"></t-pager>
    </div>
    <t-pager :page-size="videoPageSize" :current="videoCurrent" :total="videoTotal" :sizer-range="[ 5, 10, 20, 30 ]" class="pager" show-elevator @on-change="onChangeGate"></t-pager>
  </div>
</template>
<script>
@@ -59,34 +43,33 @@ export default {
  },
  data() {
    return {
      gateCurrent: 1, // 大门分页数据
      gatePageSize: 10, // 大门分页数据
      gateTotal: 100, // 大门分页总数
      roomCurrent: 1, // 集控室分页数据
      roomPageSize: 10, // 集控室分页数据
      roomTotal: 100, // 集控室分页总数
      tabType: 'gate',
      videoCurrent: 1, // 大门分页数据
      videoPageSize: 10, // 大门分页数据
      videoTotal: 100, // 大门分页总数
      tabId: 1,
      paramsObj: { // 接口请求数据
        page: 0,
        limit: 10
      },
      departments: '',
      organizationList: [], // 风场数据
      gateFieldData: 101101,
      gateList: [],
      videoList: [],
      totalList: [],
      roomList: []
    }
  },
  mounted() {
    this.getWindFiledList() // 获取风场列表
    this.getWindFieldData()
    this.getCenterRoomData()
    this.getVideoSurveillanceData() // 获取视频监控界面数据
  },
  methods: {
    tabClick(name) {
      this.gateFieldData = ''
      this.gateCurrent = 1
      this.roomCurrent = 1
      if (name === 'gate') {
        this.tabType = 'gate'
      } else {
        this.tabType = 'room'
      }
    async tabClick(id) {
      this.paramsObj.page = 0
      this.videoList = []
      this.tabId = id
      this.videoCurrent = 1
      this.getVideoSurveillanceData()
    },
    getWindFiledList() {
      commonapi.getDepartments().then(resp => {
@@ -104,43 +87,31 @@ export default {
      })
    },
    // 获得风场大门数据
    getWindFieldData() {
      let obj = {
        page: this.gateCurrent,
        limit: this.gatePageSize
    getVideoSurveillanceData(isWind) {
      if (isWind) {
        this.videoList = []
      }
      sysapi.getGateFieldData({params: obj}).then(res => {
        this.gateList = res.data.data
        this.gateTotal = res.data.total
        this.gateList.forEach(element => {
          const txt = element.videoDetail
          element.videoDetail = {}
          element.videoDetail.content = txt
          element.videoDetail.placement = 'top'
      if (this.videoList.length <= 10) {
        this.paramsObj.page = this.videoCurrent
        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) => {
            if (element.departmentId === this.tabId) {
              this.videoList.push(element)
            }
          })
          this.videoList.forEach(element => {
            if (typeof (element.videoDetail) === 'object') {
              var txt = element.videoDetail.content
            } else { txt = element.videoDetail }
            element.videoDetail = {}
            element.videoDetail.content = txt
            element.videoDetail.placement = 'top'
          })
          this.getVideoSurveillanceData()
        })
      })
    },
    // 获得集控室数据
    getCenterRoomData() {
      let obj = {
        page: this.roomCurrent,
        limit: this.roomPageSize
      }
      sysapi.getCenterRoomData({params: obj}).then(res => {
        this.roomList = res.data.data
        this.roomTotal = res.data.total
        this.roomList.forEach(element => {
          const txt = element.videoDetail
          element.videoDetail = {}
          element.videoDetail.content = txt
          element.videoDetail.placement = 'top'
        })
      })
    },
    // 集控室分页
    onChangeRoom (val) {
      this.roomCurrent = val
      this.getCenterRoomData()
    },
    // 进入识别记录界面
    goDistinguishRecord(id) {
@@ -148,8 +119,9 @@ export default {
    },
    // 风场大门分页
    onChangeGate(val) {
      this.gateCurrent = val
      this.getWindFieldData()
      this.videoList = []
      this.videoCurrent = val
      this.getVideoSurveillanceData()
    }
  }
}
@@ -166,8 +138,8 @@ export default {
        flex-wrap: wrap;
        .card-video-first, .card-video{
          width:397px;
          margin-top: 20px;
          height:245px;
          margin-top: 20px;
            .card-image{
                width: 100%;
                height: 100%;

security-protection-platform/src/routes.js

@@ -93,16 +93,22 @@ export const constantRoutes = [
        meta: { title: '设备管理' }
      },
      {
        name: 'sys_attendance',
        path: 'attendance',
        component: () => import(/* webpackChunkName: "sys_attendance" */ './modules/system/attendance'),
        meta: { title: '考勤配置' }
        name: 'sys_task',
        path: 'assignment',
        component: () => import(/* webpackChunkName: "sys_attendance" */ './modules/system/assignment'),
        meta: { title: 'AI任务' }
      },
      {
        name: 'sys_monitor',
        path: 'monitor',
        component: () => import(/* webpackChunkName: "sys_monitor" */ './modules/system/monitor'),
        meta: { title: '监控布局' }
      },
      {
        name: 'sys_attendance',
        path: 'attendance',
        component: () => import(/* webpackChunkName: "sys_attendance" */ './modules/system/attendance'),
        meta: { title: '考勤配置' }
      }
    ]
  },