feat:修改识别记录界面

(cherry picked from commit ebd0bdd8ad2b738b2c0694d58c1c53d93cd5866c)

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

@@ -1,161 +0,0 @@
<template>
  <div class="page-main">
    <div class="page-top row-12">
      <div class="col-4">开始时间：<t-date-picker v-model="startDate" style="width:200px" placeholder="请选择开始时间"></t-date-picker>
      </div>
      <div class="col-4">结束时间：<t-date-picker v-model="endDate" style="width:200px" placeholder="请选择结束时间"></t-date-picker>
      </div>
      <div class="col-4 button-box" align="end">
        <t-button color="primary" @click="getData">查询</t-button>
        <t-button>重置</t-button>
      </div>
    </div>
    <div class="page-content">
      <div class="distinguish">
        识别图片<img class="distinguish-img" src="/static/images/demo.png">
      </div>
      <div class="distinguish">
        识别视频<img class="distinguish-img" src="/static/images/demo.png">
      </div>
    </div>
    <div class="page-bottom">
      <div>
        识别结果
        <div class="bottom-result">
          <div class="page-top row-12">
            <div class="result-txt col-6">设备位置:{{ devicePosition }}</div>
            <div class="result-txt col-6">抓拍时间:{{ captureTIme }}</div>
          </div>
          <div class="result-txt" style="margin-top:24px">识别结果:{{ defineResult }}</div>
        </div>
      </div>
      <div class="img-viewer">
        <div v-for="(item,index) in dataImg" :key="index" :src="item.url" class="image-carousel">
          <img :src="item.url" class="img-viewer-size">
          <span>{{ item.date }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import sysapi from '@/api/videoSurveillance'
export default {
  data() {
    return {
      startDate: '',
      endDate: '',
      videoId: '', // 视频ID
      captureTIme: '',
      defineResult: '',
      devicePosition: '',
      dataImg: [
        {
          url: '/static/images/demo.png'
        },
        {
          url: '/static/images/demo.png'
        },
        {
          url: '/static/images/demo.png'
        },
        {
          url: '/static/images/demo.png'
        },
        {
          url: '/static/images/demo.png'
        },
        {
          url: '/static/images/demo.png'
        },
        {
          url: '/static/images/demo.png'
        },
        {
          url: '/static/images/demo.png'
        }
      ]
    }
  },
  mounted() {
    this.videoId = this.$route.query.videoId
    this.getData()
  },
  methods: {
    // 获取识别记录查询数据
    getData() {
      let obj = {
        startDate: this.startDate,
        endDate: this.endDate,
        videoId: this.videoId
      }
      sysapi.getDistinguishData({params: obj}).then(res => {
        console.log(res.data)
        this.devicePosition = res.data.devicePosition
        this.defineResult = res.data.defineResult
        this.captureTIme = res.data.captureTIme
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.page-main{
    padding: 24px;
    .page-top{
        display: flex;
        .col-4{
            padding: 0;
        }
        .col-6{
            padding: 0;
        }
        .button-box{
        display: flex;
        justify-content: flex-end;
        & button{
            margin-left: 8px;
        }
    }
    }
    .page-content{
        margin-left: -24px;
        padding: 24px 0;
        display: flex;
        .distinguish{
            margin-left: 24px;
            display: flex;
            flex-direction: column;
            .distinguish-img{
                border-radius: 4px;
                margin-top: 10px;
                height: 380px;
                width: 100%;;
            }
        }
    }
    .page-bottom{
        .bottom-result{
            margin-top: 12px;
            padding: 24px;
            border: 1px solid rgba(233, 233, 233, 1);
            .result-txt{
                color: rgba(0, 0, 0, 0.45)
            }
        }
        .img-viewer{
            margin-top: 24px;
            display: flex;
            .image-carousel{
                display: flex;
                flex-direction: column;
                .img-viewer-size{
                width: 132px;
                height: 88px;
                margin-right: 14px;
            }
            }
        }
    }
}
</style>

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

@@ -82,6 +82,8 @@ export default {
  methods: {
    tabClick(name) {
      this.gateFieldData = ''
      this.gateCurrent = 1
      this.roomCurrent = 1
      if (name === 'gate') {
        this.tabType = 'gate'
      } else {
@@ -108,8 +110,8 @@ export default {
    // 获得集控室数据
    getCenterRoomData() {
      let obj = {
        page: this.gateCurrent,
        limit: this.gatePageSize
        page: this.roomCurrent,
        limit: this.roomPageSize
      }
      sysapi.getCenterRoomData({params: obj}).then(res => {
        this.roomList = res.data.data
@@ -124,7 +126,7 @@ export default {
    },
    // 集控室分页
    onChangeRoom (val) {
      this.gateCurrent = val
      this.roomCurrent = val
      this.getCenterRoomData()
    },
    // 进入识别记录界面
@@ -133,7 +135,7 @@ export default {
    },
    // 风场大门分页
    onChangeGate(val) {
      this.roomCurrent = val
      this.gateCurrent = val
      this.getWindFieldData()
    }
  }