修复全景跟踪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">
@@ -252,6 +254,8 @@

    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;
      }
@@ -260,7 +264,9 @@

    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;
@@ -306,6 +312,7 @@
    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)
      }
@@ -375,7 +382,6 @@
          tempArr = tempArr.concat(cameraArea)
        });
        this.cameraAreas = tempArr;
        console.log(this.cameraAreas)
      })
    },
    confirmGroupDialog () {
@@ -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 {

 src/pages/panoramicView/components/SlideCanvas.vue

@@ -79,7 +79,7 @@
  },
  mounted () {
    //this.mySwiper = this.$refs.sceneSwiper.swiper;
    console.log(this.swiper)
    // console.log(this.swiper)
  },
  methods: {
    refresh (url, cameraId) {

 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,11 +38,12 @@
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 },
  components: { LabelMark, TracePlot, RelateCamera, History },
  data () {
    return {
      actMenuIndex: '1',
      actMenuIndex: '0',
    }
  },
  methods: {