修复全景跟踪bug

zhangzengfei

2021-05-21 08897690839edae6546d56661c95d78629f70ecb

修复全景跟踪bug

 src/pages/panoramicView/components/History.vue

New file
@@ -0,0 +1,241 @@
<template>
  <div class="p-histroy">
    <div class="filter-bar">
      <el-date-picker
        size="small"
        v-model="searchTime"
        @change="checkTime"
        type="datetimerange"
        :picker-options="pickerOptions"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        :default-time="['00:00:00','23:59:59']"
      ></el-date-picker>
      <el-button @click="checkTime" size="small" type="primary" class="btn-search">查 询</el-button>
    </div>

    <div class="persons">
      <div class="board">
        <b>历史追踪人员</b>
        <span>共 10 条数据</span>
      </div>
      <div class="target-list">
        <div
          class="list-item"
          v-for="item in personList"
          :key="item.id"
          :style="selectedID == item.id ? 'border-color:#3D68E1': ''"
          @click="checkTarget(item)"
        >
          <!-- <img src alt :style="{backgroundColor:item.color}"/> -->
          <img :src="'/httpImage/' + item.picSmUrl" />
        </div>
      </div>
    </div>
    <div class="videos">
      <div class="video-item" v-for="v in videoList" :key="v.name">
        <video :src="'/httpImage/' + v.videoUrl" controls="controls" width="480px" height="270px"></video>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "histroy",
  data() {
    return {
      searchTime: [
        this.$moment().format("YYYY-MM-DD 00:00:00"),
        this.$moment().format("YYYY-MM-DD 23:59:59")
        //this.$moment().format("YYYY-MM-DD HH:mm:ss")
      ],
      pickerOptions: {
        shortcuts: [{
          text: '近一小时',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 60 * 60 * 1000);
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '近三小时',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 60 * 60 * 1000 * 3);
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '近六小时',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 60 * 60 * 1000 * 6);
            picker.$emit('pick', [start, end])
          }
        }]
      },
      selectedID: "",
      personList: [
        {
          id: "0",
          picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
        },
        {
          id: "1",
          picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
        },
        {
          id: "2",
          picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
        },
        {
          id: "3",
          picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
        },
        {
          id: "4",
          picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
        },
        {
          id: "5",
          picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
        },
        {
          id: "6",
          picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
        },
      ],
      videoList: [
        {
          name: "1",
          videoUrl: "192.168.20.10:6700/52369,cddbfed6886fc0?collection=2021-05-18-DSVAD010120190622-video",
          pathImg: "192.168.20.10:6700/52360,cddbfc05f6d697?collection=2021-05-18-DSVAD010120190622-picture"
        },
        {
          name: "2",
          videoUrl: "192.168.20.10:6700/52369,cddbfed6886fc0?collection=2021-05-18-DSVAD010120190622-video",
          pathImg: "192.168.20.10:6700/52360,cddbfc05f6d697?collection=2021-05-18-DSVAD010120190622-picture"
        },
        {
          name: "3",
          videoUrl: "192.168.20.10:6700/52369,cddbfed6886fc0?collection=2021-05-18-DSVAD010120190622-video",
          pathImg: "192.168.20.10:6700/52360,cddbfc05f6d697?collection=2021-05-18-DSVAD010120190622-picture"
        },
        {
          name: "4",
          videoUrl: "192.168.20.10:6700/52369,cddbfed6886fc0?collection=2021-05-18-DSVAD010120190622-video",
          pathImg: "192.168.20.10:6700/52360,cddbfc05f6d697?collection=2021-05-18-DSVAD010120190622-picture"
        },
      ]
    }
  },
  methods: {
    checkTime() {
      if (!this.searchTime) {
        this.$notify({
          type: 'warning',
          message: '请选择时间!'
        });
        return;
      }
      clearInterval(this.timer);
      //判断是否是查历史数据
      if (Date.parse(this.searchTime[1]) < Date.now()) {
        this.filterData()
      } else {
        this.activeObjHashMap = {};
        //实时查
        this.searchData();
      }

    },
    checkTarget(item) {
      this.selectedID = item.id;
    }
  }
}
</script>

<style lang="scss">
.p-histroy {
  height: 800px;
  background: inherit;
  background-color: rgba(240, 242, 245, 1);

  .filter-bar {
    text-align: left;
    padding: 15px 10px;
    height: 35px;
    background-color: #fff;
  }

  .persons {
    width: 18%;
    height: 670px;
    background-color: #fff;
    margin: 10px 10px;
    float: left;
    .board {
      height: 70px;
      line-height: 50px;
      text-align: left;
      padding: 0px 10px;
      b {
        font-size: 14px;
      }
      span {
        margin-left: 160px;
      }
    }
    .target-list {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      width: 375px;
      overflow: auto;
      height: auto;
      .list-item {
        width: 70px;
        height: 70px;
        /* margin-bottom: 10px; */
        margin: 5px 4px;
        border: 2px solid #dedede;
        border-radius: 50%;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
          display: block;
          border-radius: 50%;
        }
        &.deact {
          opacity: 0.5;
          background: rgba(0, 0, 0, 0.3);
        }
      }
    }
  }

  .videos {
    width: 80%;
    margin: 10px 10px;
    height: 88%;
    display: flex;
    flex-wrap: wrap;
    .video-item {
      width: 500px;
      height: 320px;
      margin-left: 10px;
      background-color: #fff;

      video {
        margin: 10px;
      }
    }
  }
}
</style>

 src/pages/panoramicView/components/LabelMark.vue

@@ -319,7 +319,6 @@
    sure() {
      let _this = this;
      this.$refs['labelForm'].validate(valid => {
        console.log(valid)
        if (valid) {
          _this.isShowPop = false;
          //编辑确定
@@ -328,7 +327,6 @@
            _this.curCameraData.coords[editedIndex] = JSON.parse(JSON.stringify(_this.curLabel));

          }
          console.log(_this.curCameraData.coords)
          this.$refs['labelForm'].clearValidate();
        }
      });
@@ -394,7 +392,6 @@
      })
    },
    showCurPos(e) {
      console.log(e);
      this.isShowCurPos = true;
      this.traceX = e.offsetX;
      this.traceY = e.offsetY;
@@ -424,10 +421,8 @@
      this.newLabel(e);
    },
    newLabel(e) {
      console.log('点击了画板')
      if (this.isShowPop) return;
      //获取鼠标相对于画板的定位
      console.log('获取当前定位信息');
      this.$refs['labelForm'].resetFields();
      let target = {
        id: '',

 src/pages/panoramicView/components/RelateCamera.vue

@@ -40,6 +40,7 @@
      </div>
    </div>
    <!-- <div class="part" v-if="groupList.length"> -->
    <el-divider></el-divider>
    <div class="part" v-if="groupList.length!==0 && Object.keys(curGroup)">
      <div class="title">绘制区域(用于算法分析)</div>
      <div class="relative-partment" v-if="curGroup.cameras&&curGroup.cameras.length">
@@ -48,6 +49,7 @@
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="part relative-config" v-if="Object.keys(curGroup)">
      <div class="title">
        <div class="left">
@@ -142,7 +144,7 @@

export default {
  components: { SlideCanvas },
  data () {
  data() {
    return {
      cameraData: [],
      relativeList: [],
@@ -161,11 +163,11 @@
      cameraAndPolygonData: []
    }
  },
  mounted () {
  mounted() {
    this.getAllCameraData();
  },
  methods: {
    getAllCameraData () {
    getAllCameraData() {
      let _this = this;
      getCamerasByServer().then(res => {
        if (res.success) {
@@ -176,10 +178,10 @@
        console.log(e)
      })
    },
    polygonUpdate () {
    polygonUpdate() {
      this.getAllGroups();
    },
    delRelation (item, index) {
    delRelation(item, index) {
      let _this = this;
      if (item.id) {
        delRelation(item.id).then(res => {
@@ -191,12 +193,12 @@
            _this.findRelationByGroup();
          }
        })
      }else{
        this.relativeList.splice(index,1);
      } else {
        this.relativeList.splice(index, 1);
      }

    },
    findRelationByGroup () {
    findRelationByGroup() {
      let _this = this;
      findByGroup({ groupId: this.curGroup.id }).then(res => {

@@ -213,7 +215,7 @@
        })
      })
    },
    saveRelativePolygon (item) {
    saveRelativePolygon(item) {
      // debugger
      if (!item.sourceObj || !item.targetObj) {
        this.$notify({
@@ -250,17 +252,21 @@
      })
    },

    async findPolygonByIds (cameras) {
    async findPolygonByIds(cameras) {
      for (var i = 0; i < cameras.length; i++) {
        if (Object.keys(cameras[i]).length == 0)
          continue
        let res = await getAllPolygon({ cameraId: cameras[i].id });
        cameras[i].canvasData = res.data;
      }
      return cameras
    },

    async getAllGroupInfo () {
    async getAllGroupInfo() {
      let _this = this;
      console.log("_this.cameraData", _this.cameraData)
      let res = await findCameraGroups();
      console.log("res", res);
      let groupArr = res.data.map(item => {
        let obj = {}; //group
        obj.groupName = item.groupName;
@@ -303,9 +309,10 @@
    //     _this.checkCurrentGroup(_this.groupList[0]);
    //   })
    // },
    async getAllGroups () {
    async getAllGroups() {
      let _this = this;
      let groups = await this.getAllGroupInfo();
      console.log("groups", groups)
      for (var i = 0; i < groups.length; i++) {
        groups[i].cameras = await _this.findPolygonByIds(groups[i].cameras)
      }
@@ -316,36 +323,36 @@
        this.groupList.length && this.checkCurrentGroup(_this.groupList[0]);
      } else {
        let group = this.groupList.find(one => one.id == this.groupForm.id);
        if(group){
        if (group) {
          this.groupList.length && this.checkCurrentGroup(group);
        }else{
        } else {
          this.groupList.length && this.checkCurrentGroup(_this.groupList[0]);
        }
        

      }


    },

    addRelation () {
    addRelation() {
      let obj = { cameraArea1: '', cameraArea2: '' };
      this.relativeList.push(obj)
    },

    editGroup (group) {
    editGroup(group) {
      // debugger
      this.groupModelVisible = true;
      //this.$refs['groupForm'].resetFields();
      //this.groupForm = group;
      this.groupForm = JSON.parse(JSON.stringify(group));
    },
    removeGroup (group) {
    removeGroup(group) {
      let _this = this;
      delCameraGroup(group.id).then(res => {
        _this.getAllGroups()
      })
    },
    checkCurrentGroup (group) {
    checkCurrentGroup(group) {
      this.groupList.forEach(group => {
        group.checked = false;
      });
@@ -375,10 +382,9 @@
          tempArr = tempArr.concat(cameraArea)
        });
        this.cameraAreas = tempArr;
        console.log(this.cameraAreas)
      })
    },
    confirmGroupDialog () {
    confirmGroupDialog() {
      //请求保存新建或编辑分组
      let _this = this;
      let params = {
@@ -413,7 +419,7 @@
      })
      //this.groupList.push(this.groupForm);
      saveCameraGroupInfo(params).then(res => {
        if(res.success){
        if (res.success) {
          this.$notify({
            type: 'success',
            message: '保存成功!'
@@ -424,7 +430,7 @@
      this.groupModelVisible = false;

    },
    newGroup () {
    newGroup() {
      this.groupModelVisible = true;
      this.$nextTick(() => {
        this.$refs['groupForm'].resetFields();
@@ -509,7 +515,7 @@
      position: relative;
      display: flex;
      &:after {
        content: '';
        content: "";
        position: absolute;
        font-size: 0;
        width: 1px;
@@ -531,7 +537,7 @@
    margin-bottom: 20px;
    .relative-partment {
      width: 1200px;
      margin: 0 auto;
      // margin: 0 auto;
      display: flex;
      justify-content: space-between;
      .area-wrap {
@@ -561,7 +567,7 @@
        .right {
          display: flex;
          align-items: center;
          .el-button + .el-button{
          .el-button + .el-button {
            margin-left: 0;
          }
        }

 src/pages/panoramicView/components/SlideCanvas.vue

@@ -59,39 +59,39 @@
  ],
  watch: {
    cameras: {
      handler (n, o) {
      handler(n, o) {
        console.log('slidecanvas cameras', n)
      },
      deep: true
    }
  },
  components: { PolygonCanvas },
  data () {
  data() {
    return {
      swiperOption: this.newOption(),
      //mySwiper: {}
    }
  },
  computed: {
    swiper () {
    swiper() {
      return this.$refs['cameraSwiper'].swiper
    }
  },
  mounted () {
  mounted() {
    //this.mySwiper = this.$refs.sceneSwiper.swiper;
    console.log(this.swiper)
    // console.log(this.swiper)
  },
  methods: {
    refresh (url, cameraId) {
    refresh(url, cameraId) {
      this.$emit('polygonDataUpdate')
    },
    getCanvasData (data) {
    getCanvasData(data) {
      let _this = this;
      savePolygon(data).then(rsp => {
        _this.$emit('polygonDataUpdate')
      });
    },
    newOption () {
    newOption() {
      return {
        slidesPerView: 1,
        spaceBetween: 0,
@@ -104,21 +104,21 @@
      }
    },

    pre () {
    pre() {
      this.swiper.activeIndex--;
      if (this.swiper.activeIndex == -1) {
        this.swiper.activeIndex = this.cameras.length - 1;
      }
      this.swiper.slideTo(this.swiper.activeIndex);
    },
    next () {
    next() {
      this.swiper.activeIndex++;
      if (this.swiper.activeIndex == this.cameras.length) {
        this.swiper.activeIndex = 0;
      }
      this.swiper.slideTo(this.swiper.activeIndex);
    },
    drawBaseImg (id) {
    drawBaseImg(id) {
      this.$refs[`polygonCanvas_${id}`][0].showModal();
    }
  }
@@ -181,7 +181,7 @@
  b {
    font-size: 14px;
  }
  .left-fixed{
  .left-fixed {
    position: absolute;
    left: 0;
    top: -6px;

 src/pages/panoramicView/components/TracePlot.vue

@@ -29,6 +29,7 @@
          @click="checkTarget(item)"
        >
          <!-- <img src alt :style="{backgroundColor:item.color}"/> -->
          <img :src="'/httpImage/'+item.picSmUrl" />
        </div>
      </div>
    </div>
@@ -113,7 +114,6 @@

  },
  beforeDestroy() {
    console.log('beforeDestroy')
    clearInterval(this.timer);
  },
  methods: {
@@ -224,7 +224,6 @@
      })
    },
    drawTracePath() {
      console.log(this.actObjs)
      let canvas = this.$refs['trackArea'];
      let ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -341,13 +340,15 @@
          _this.actObjs[i].color = _this.colorArr[i % 10];
          this.$set(_this.actObjs[i], 'isHide', _this.actObjs[i].isHide);
        }
        console.log(new Date(), _this.actObjs);

        console.log(_this.actObjs)
        _this.drawTracePath();
        _this.timeMark = new Date();
        _this.timer = setTimeout(() => {
          _this.searchData()
        }, _this.intervalTime)


      })
    }
  }
@@ -358,7 +359,7 @@
.trace-plot {
  .filter-bar {
    width: 960px;
    margin: 20px auto;
    margin: 20px 10px;
    display: flex;
    align-items: center;
    flex-direction: end;

 src/pages/panoramicView/index/App.vue

@@ -11,12 +11,16 @@
        mode="horizontal"
        @select="checkMenu"
      >
        <el-menu-item index="0">历史记录查询</el-menu-item>
        <el-menu-item index="1">位置标定</el-menu-item>
        <el-menu-item index="2">轨迹图</el-menu-item>
        <el-menu-item index="3">关联摄像机</el-menu-item>
      </el-menu>
    </div>
    <div class="act-view">
      <template v-if="actMenuIndex=='0'">
        <History />
      </template>
      <template v-if="actMenuIndex=='1'">
        <label-mark></label-mark>
      </template>
@@ -34,15 +38,16 @@
import LabelMark from '../components/LabelMark';
import TracePlot from '../components/TracePlot';
import RelateCamera from '../components/RelateCamera';
import History from '../components/History';
export default {
  components: { LabelMark, TracePlot, RelateCamera },
  data () {
  components: { LabelMark, TracePlot, RelateCamera, History },
  data() {
    return {
      actMenuIndex: '1',
      actMenuIndex: '0',
    }
  },
  methods: {
    checkMenu (key, keyPath) {
    checkMenu(key, keyPath) {
      this.actMenuIndex = key;
    }
  }
@@ -61,10 +66,10 @@
      width: 310px;
      display: flex;
      align-items: center;
      .icon{
      .icon {
        width: 50px;
      }
      .title{
      .title {
        text-decoration: none;
        margin-left: 10px;
        font-size: 17px;
@@ -79,7 +84,7 @@
    .el-menu--horizontal > .el-menu-item {
      border-bottom: 0;
      color: #fff;
      &:hover{
      &:hover {
        color: #fff;
        background: rgb(24, 35, 182);
      }