轨迹图添加时间快捷设置

hanbaoshan

2020-12-30 83c379bff0a39dd86ab6fb145c40b22f74978780

轨迹图添加时间快捷设置

 src/pages/panoramicView/components/RelateCamera.vue

@@ -561,6 +561,9 @@
        .right {
          display: flex;
          align-items: center;
          .el-button + .el-button{
            margin-left: 0;
          }
        }
        i {
          font-size: 20px;

 src/pages/panoramicView/components/TracePlot.vue

@@ -4,8 +4,9 @@
      <el-date-picker
        size="small"
        v-model="searchTime"
        @change="searchData"
        @change="checkTime"
        type="datetimerange"
        :picker-options="pickerOptions"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
@@ -64,6 +65,33 @@
        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])
          }
        }]
      },
      timer: null,
      intervalTime: 5000,
      colorArr: ['#F4DA40', '#0092BC', '#97D700', '#D0006F', '#D86018', '#653279', '#A45A2A', '#004B87', '#008C95', '#AA0061'],
@@ -80,29 +108,92 @@
  },
  mounted () {
    this.searchData();
    //this.filterData();
    this.getPanorama();
    

  },
  beforeDestroy () {
    console.log('beforeDestroy')
    clearInterval(this.timer);
  },
  methods: {
    hideAllChange(){
      this.actObjs.forEach(target=>{
    checkTime () {
      debugger
      if (!this.searchTime) {
        this.$notify({
          type: 'warning',
          message: '请选择时间!'
        });
        return;
      }
      //判断是否是查历史数据
      if (this.searchTime[1] < Date.now()) {
        this.filterData()
      } else {
        this.activeObjHashMap = {};
        //实时查
        this.searchData();
      }
    },
    filterData () {
      let _this = this;
      var param = {
        page: 1,
        size: 5000,
        searchTime: this.searchTime,
        alarmlevel: [],
        inputValue: '',
        tabs: [],
        tasks: [],
        treeNodes: [],
        isAll: false
      };
      getSearchList(param).then(res => {
        _this.actObjs = [];
        if (!res.data.datalist) {
          this.$notify({
            type: 'info',
            message: '此时间段内无人员轨迹，请选择其他时间段查看!'
          });
          _this.drawTracePath();

          return;
        }
        res.data.datalist.forEach(obj => {
          obj.activeObject.targetInfo.forEach(target => {
            if (target.targetType == 'UniquelID') {
              let attribute = JSON.parse(target.attribute);
              let someone = _this.actObjs.find(actObj => actObj.id == target.targetId);
              if (someone) {
                someone.posInfo.unshift({ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(obj.activeObject.picDate) });
              } else {
                _this.actObjs.push({ id: target.targetId, picSmUrl: target.picSmUrl, posInfo: [{ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(obj.activeObject.picDate) }] });
              }
            }
          })
        });
        for (var i = 0; i < _this.actObjs.length; i++) {
          _this.actObjs[i].color = _this.colorArr[i % 10];
          this.$set(_this.actObjs[i], 'isHide', _this.actObjs[i].isHide);
        }
        _this.drawTracePath();
      })
    },
    hideAllChange () {
      this.actObjs.forEach(target => {
        target.isHide = this.isHideAll;
      });
      this.drawTracePath();
    },
    invertChange(){
    invertChange () {
      console.log(this.isInvert)
      this.actObjs.forEach(target=>{
      this.actObjs.forEach(target => {
        target.isHide = !target.isHide;
      });
      let showOne = this.actObjs.find(target=>!target.isHide);
      if(!showOne){
      let showOne = this.actObjs.find(target => !target.isHide);
      if (!showOne) {
        this.isHideAll = true;
      }else{
      } else {
        this.isHideAll = false;
      }
      this.drawTracePath();
@@ -134,11 +225,7 @@
      let canvas = this.$refs['trackArea'];
      let ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      //ctx.strokeStyle = 'yellow';
      //ctx.fillStyle = 'aqua';
      //ctx.globalAlpha=0.5;
      ctx.lineWidth = 3;
      //ctx.lineJoin='round';
      ctx.lineCap = 'round';
      this.actObjs.forEach(target => {
        if (!target.isHide) {
@@ -165,38 +252,8 @@
          ctx.stroke();
        }
      })
      // for (var target in this.actObj) {
      //   ctx.beginPath();
      //   //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();
      //   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.fill()
      //   }
      // }
      // 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 = 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);
      //   }
      //   ctx.stroke();
      // }
    },
    searchData () {
      if(!this.searchTime){
        this.$notify({
          type:'warning',
          message:'请选择时间!'
        });
        clearInterval(this.timer);
        return;
      }
      let _this = this;
      var param = {
        page: 1,
@@ -210,27 +267,35 @@
        isAll: false
      };
      getSearchList(param).then(res => {
        let filterArr = [];
        if (!res.data.datalist) {
          _this.activeObjHashMap = {};
          _this.actObj = {};
          //_this.actObj = {};
          _this.actObjs = [];
          this.$notify({
            type: 'info',
            message: '此时间段内无人员轨迹，请选择其他时间段查看!'
          });
          _this.drawTracePath();
          clearInterval(this.timer);
          return;
        }
        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];
            //delete _this.actObj[key];
            let index = _this.actObjs.findIndex(one => one.id == innerKey);
            _this.actObjs.splice(index, 1)
          }
        }

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

        filterArr.forEach(item => {
@@ -258,14 +323,14 @@
        _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]
          }
        }
        // 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]
        //   }
        // }

        for (var i = 0; i < _this.actObjs.length; i++) {
          _this.actObjs[i].posInfo = _this.actObjs[i].posInfo.filter(item => item.timeStamp >= _this.searchStartTimeStamp && item.timeStamp <= _this.searchEndTimeStamp)
@@ -278,17 +343,17 @@
        }
        console.log(new Date(), _this.actObjs);

        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)
        // 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(), _this.actObj)
        _this.drawTracePath();
        _this.timer = setTimeout(()=>{
        _this.timer = setTimeout(() => {
          _this.searchData()
        },_this.intervalTime)
        }, _this.intervalTime)
      })
    }
  }