全景追踪过滤数据

hanbaoshan

2020-12-25 027d977d6b89cf4706fa6d07279014bb44fdd363

 src/pages/panoramicView/components/TracePlot.vue

@@ -14,11 +14,17 @@
      <el-button @click="searchData" size="small" type="primary" class="btn-search">查 询</el-button>
    </div>

    <canvas
    <!-- <canvas
      ref="trackArea"
      :width="cW"
      :height="cH"
      :style="{backgroundImage:`url(${panoramaPath})`}"
    ></canvas>-->
    <canvas
      ref="trackArea"
      :width="fixedW"
      :height="fixedH"
      :style="{backgroundImage:`url(${panoramaPath})`,backgroundSize:`${bgW}px ${bgH}px`}"
    ></canvas>
  </div>
</template>
@@ -41,6 +47,13 @@
        //this.$moment().format("YYYY-MM-DD HH:mm:ss")
      ],
      timer: null,
      colorArr: ['#F4DA40', '#0092BC', '#97D700', '#D0006F', '#D86018', '#653279', '#A45A2A', '#004B87', '#008C95', '#AA0061'],
      searchStartTimeStamp: 0,
      searchEndTimeStamp: 0,
      fixedW: 960,
      fixedH: 700,
      bgW: 0,
      bgH: 0
    }
  },
  mounted () {
@@ -59,14 +72,21 @@
      let _this = this;
      getPanoramaPic().then(res => {
        let { panoramaPath, width, height } = res.data;
        _this.panoramaPath = panoramaPath;
        _this.panoramaPath = panoramaPath + '?' + Math.random();
        _this.cW = width;
        _this.cH = height;

        //判断长宽比
        let ratio = res.data.width / res.data.height;
        if (ratio > (_this.fixedW / _this.fixedH)) {
          _this.bgW = _this.fixedW;
          _this.bgH = _this.bgW * res.data.height / res.data.width;
        } else {
          _this.bgH = _this.fixedH;
          _this.bgW = res.data.width * _this.bgH / res.data.height;
        }
      })
    },
    drawTracePath () {
      let colorArr = ['#F4DA40','#0092BC','#97D700','#D0006F','#D86018','#653279','#A45A2A','#004B87','#008C95','#AA0061'];
      let canvas = this.$refs['trackArea'];
      let ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -77,28 +97,21 @@
      //ctx.lineJoin='round';
      ctx.lineCap = 'round';
      for (var target in this.actObj) {
        debugger
        ctx.beginPath();
        ctx.fillStyle = `rgb(${Math.floor(Math.random() * 55 + 150)},${Math.floor(Math.random() * 55 + 150)},${Math.floor(Math.random() * 55 + 150)})`;
       
        //ctx.fillRect(this.actObj[target][0].globalCoordX+3, this.actObj[target][0].globalCoordY+3, 6, 6);
        ctx.arc(this.actObj[target][0].globalCoordX, this.actObj[target][0].globalCoordY, 3, 0, Math.PI*2);
        //ctx.fillStyle = `rgb(${Math.floor(Math.random() * 55 + 150)},${Math.floor(Math.random() * 55 + 150)},${Math.floor(Math.random() * 55 + 150)})`;
        ctx.fillStyle = this.actObj[target][0].color;
        ctx.arc(this.actObj[target][0].globalCoordX, this.actObj[target][0].globalCoordY, 3, 0, Math.PI * 2);
        ctx.fill();
        //ctx.beginPath();
        //ctx.moveTo(this.actObj[target][0].globalCoordX, this.actObj[target][0].globalCoordY);
        for (var i = 1; i < this.actObj[target].length; i++) {
          ctx.beginPath();
          ctx.arc(this.actObj[target][i].globalCoordX, this.actObj[target][i].globalCoordY, 3, 0, Math.PI*2);
          ctx.arc(this.actObj[target][i].globalCoordX, this.actObj[target][i].globalCoordY, 3, 0, Math.PI * 2);
          ctx.fill()
          //ctx.lineTo(this.actObj[target][i].globalCoordX, this.actObj[target][i].globalCoordY);
          
          //ctx.fillRect(this.actObj[target][i].globalCoordX, this.actObj[target][i].globalCoordY, 9, 9);
        }
        //ctx.stroke();
      }
      for (var target in this.actObj) {
        ctx.beginPath();
        ctx.strokeStyle = `rgb(${Math.floor(Math.random() * 20 + 220)},${Math.floor(Math.random() * 20 + 210)},${Math.floor(Math.random() * 55 + 200)})`;
        //ctx.strokeStyle = `rgb(${Math.floor(Math.random() * 20 + 220)},${Math.floor(Math.random() * 20 + 210)},${Math.floor(Math.random() * 55 + 200)})`;
        ctx.strokeStyle = this.actObj[target][0].color;
        ctx.moveTo(this.actObj[target][0].globalCoordX, this.actObj[target][0].globalCoordY);
        for (var i = 1; i < this.actObj[target].length; i++) {
          ctx.lineTo(this.actObj[target][i].globalCoordX, this.actObj[target][i].globalCoordY);
@@ -110,7 +123,7 @@
      let _this = this;
      var param = {
        page: 1,
        size: 15,
        size: 500,
        searchTime: this.searchTime,
        alarmlevel: [],
        inputValue: '',
@@ -121,25 +134,57 @@
      };
      getSearchList(param).then(res => {
        let filterArr = [];
        if(!res.data.datalist){
          _this.activeObjHashMap = {};
          _this.actObj = {}
        }
        for(var key in _this.activeObjHashMap){
          let innerKey = res.data.datalist&&res.data.datalist.find(obj => obj.activeObject.id == key);
          if(!innerKey){
            delete _this.activeObjHashMap[key];
            delete _this.actObj[key];
          }
        }

        res.data.datalist && res.data.datalist.forEach(obj => {
          if (_this.activeObjHashMap[obj.activeObject.id] !== 1) {
            _this.activeObjHashMap[obj.activeObject.id] = 1
            filterArr.push(obj)
          }
        });
        console.log(_this.actObj)

        filterArr.forEach(item => {
          item.activeObject.targetInfo.forEach(target => {
            if (target.targetType == 'UniquelID') {
              let attribute = JSON.parse(target.attribute)
              if (_this.actObj[target.targetId]) {
                _this.actObj[target.targetId].unshift({ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY });
                _this.actObj[target.targetId].unshift({ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(item.activeObject.picDate) });
              } else {
                _this.actObj[target.targetId] = [{ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY }];
                _this.actObj[target.targetId] = [{ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(item.activeObject.picDate) }];
              }
            }
          })
        });
        console.log(new Date().getTime(),_this.actObj)

        _this.searchStartTimeStamp = Date.parse(_this.searchTime[0]);
        _this.searchEndTimeStamp = Date.parse(_this.searchTime[1]);

        for (var target in _this.actObj) {
          _this.actObj[target] = _this.actObj[target].filter(item =>
            item.timeStamp >= _this.searchStartTimeStamp && item.timeStamp <= _this.searchEndTimeStamp
          )
          if(_this.actObj[target].length == 0){
            delete _this.actObj[target]
          }
        }
        var keyArr = Object.keys(_this.actObj);
        for (var i = 0; i < keyArr.length; i++) {
          _this.actObj[keyArr[i]].forEach(dot => {
            dot.color = _this.colorArr[i % 10];
          })
        }
        console.log(new Date().getTime(), _this.actObj)
        _this.drawTracePath()
      })
    }
@@ -160,7 +205,7 @@
    }
  }
  canvas {
    background: lightsteelblue;
    //background: lightsteelblue;
    background-repeat: no-repeat;
  }
}