底库新增图表结果展示

hanbaoshan

2020-08-26 21f203a1f24ab2a869ba942a1f1f7c24e80a2b77

底库新增图表结果展示

 src/api/es.ts

@@ -13,3 +13,11 @@
    method: "get"
  })
}

export const getCameraFaceData = (data:any) => {
  return request({
    url: '/data/api-v/es/getFaceData',
    method: "post",
    data
  })
}

 src/pages/library/components/personList.vue

@@ -155,6 +155,9 @@
            <el-tooltip content="查找此人" placement="top" popper-class="atooltip">
              <span class="iconfont iconsousuoren iconStyle1" @click="tosearch(scope.row)"></span>
            </el-tooltip>
            <el-tooltip content="查看详情" placement="top" popper-class="atooltip">
              <span class="iconfont iconsousuoren iconStyle1" @click="showDetail(scope.row)"></span>
            </el-tooltip>
            <fTemplate authority="videoTable:edit">
              <el-tooltip content="复制" placement="top" popper-class="atooltip">
                <span
@@ -197,6 +200,46 @@
        :total="BaseManageData.total"
      ></el-pagination>
    </div>
    <el-dialog title="抓拍详情" :visible.sync="cameraDetailVisible" okText="确定" >
      <div class="top-bar">
        <el-date-picker size="mini" @change="timeChange" v-model="timeRange" value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
        <div style="margin:0 10px;display:flex;"><span style="width:68px;">停留时长:</span><el-input size="mini" style="width: 80px;"  v-model.number="reqCameraParams.thresholdTime"></el-input>s</div> 
          <el-button size="mini" type="primary" @click="postCameraData">查询</el-button>
      </div>
      <p class="member-info">
        <label class="">人员信息:</label>
        <ul>
          <li><span>姓名:</span><span>{{memberInfo.personName}}</span></li>
          <li><span>性别:</span><span>{{memberInfo.sex}}</span></li>
          <li><span>身份证号:</span><span>{{memberInfo.idCard}}</span></li>
          <li><span>意图:</span><span>{{memberInfo.reserved}}</span></li>
        </ul>
      </p>
      <el-table :data="cameraDetailData" border>
        <el-table-column prop="startFacePicUrl" label="抓拍实景" width="160" align="center">
          <template slot-scope="scope">
            <div>
              <img
                v-if="scope.row.startFacePicUrl"
                :src="`/httpImage/`+scope.row.startFacePicUrl"
                style="max-height:84px;width:84px;object-fit:contain;background:rgba(0,0,0,0.35);"
                class="avatar"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="cameraName" label="摄像机名称" width="100" align="center"></el-table-column>
        <el-table-column prop="startTime" label="开始时间"  align="center"></el-table-column>
        <el-table-column prop="endTime" label="结束时间"  align="center"></el-table-column>
        <el-table-column prop="stayTime" label="停留时长" width="99" align="center">
        <template slot-scope="scope">
            <span>{{scope.row.stayTime}} 秒 </span>
        </template>
    </el-table-column>
      </el-table>
      <p style="text-align:right; font-size: 14px;">共{{faceDataCount}}条数据</p>
    </el-dialog>
    <el-dialog
      title="修改信息"
      :visible.sync="dialogFormVisible"
@@ -449,14 +492,49 @@
</template>
<script>
import { updateBasePerson, deleteBasePersons } from "@/api/baseLibrary";
import { getCameraFaceData } from "@/api/es";
import axios from "axios";
// import { findByType } from '@/server/video.js'
import Upload from "./upload";
import fTemplate from "@/components/fTemplate";
import UploadIcon from "@/components/searching/UploadIcon.vue";

Date.prototype.Format = function (fmt) {
  var o = {
    "M+": this.getMonth() + 1, //月份 
    "d+": this.getDate(), //日 
    "H+": this.getHours(), //小时 
    "m+": this.getMinutes(), //分 
    "s+": this.getSeconds(), //秒 
    "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
    "S": this.getMilliseconds() //毫秒 
  };
  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  return fmt;
}

export default {
  data() {
    return {
      timeRange: [new Date(2020, 7, 25, 8), new Date()],
      memberInfo: {
        personName: '',
        sex: '',
        idCard: '',
        reserved: ''
      },
      reqCameraParams: {
        cameraIds: [],
        startDate: new Date(2020, 7, 25, 8).Format("yyyy-MM-dd HH:mm:ss"),
        endDate: new Date().Format("yyyy-MM-dd HH:mm:ss"),
        thresholdTime: 10,
        personIds: []
      },
      cameraDetailData: [],
      cameraDetailVisible: false,

      dialogFormVisible: false,
      copyVisiabled: false,
      moveVisiabled: false,
@@ -499,6 +577,7 @@
      peoperLevel: [],
      oldWidth: "",
      oldHeight: "",
      faceDataCount: 0,
      // 上传后的弹框显示
      dialogVisible: false,
      // 批量上传后的返回结果
@@ -520,6 +599,31 @@
    }
  },
  methods: {
    postCameraData(){
      getCameraFaceData(this.reqCameraParams).then(res=>{
        if(res && res.code == 200){
          this.cameraDetailData = res.data.allSource
      this.faceDataCount = res.data.count
        }
      })
    },
    timeChange(val) {
      console.log(val);
      this.reqCameraParams.startDate = val[0];
      this.reqCameraParams.endDate = val[1];
      
    },
    showDetail(row){
      this.cameraDetailData = []
      this.memberInfo.reserved = row.reserved;
      this.memberInfo.idCard = row.idCard;
      this.memberInfo.personName = row.personName;
      this.memberInfo.sex = row.sex;
      this.reqCameraParams.personIds = [];
      this.reqCameraParams.personIds.push(row.id)
      console.log(this.reqCameraParams)
      this.cameraDetailVisible = true;
    },
    isShow(authority) {
      if (this.isAdmin) {
        return true
@@ -1097,7 +1201,10 @@
  color: #222222;
  text-align: center;
}

.el-table th{
  color: #222;
  background: #ececec;
}
.el-table .cell {
  padding-left: 8px !important;
  padding-right: 0px !important;
@@ -1170,4 +1277,25 @@
  min-height: 152px;
  border: 1px solid #eee;
}
.top-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 30px;
}
.member-info{
  font-size: 13px;
  margin: 10px 0;
  display: flex;
  label{
    color: #999;
    margin-right: 6px;
  }
  ul{
    display: flex;
    li{
      margin-right: 8px;
    }
  }
}
</style>

 vue.config.js

@@ -49,7 +49,8 @@
        changeOrigin: true,
      }, 
      "/api-v": {
        target: 'http://192.168.20.145:8000',
        //target: 'http://192.168.20.145:8000',
        target: 'http://192.168.20.10:8000',
        changeOrigin: true
      },     
      "/api-f": {