ZZJ
2021-11-09 ccee429d379e0108b7445f72ade8d97c110a6fb3
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>
@@ -51,7 +52,7 @@
import { getSearchList } from '@/api/search';
import { getPanoramaPic } from "@/api/panorama";
export default {
  data () {
  data() {
    return {
      cW: 0,
      cH: 0,
@@ -68,7 +69,7 @@
      pickerOptions: {
        shortcuts: [{
          text: '近一小时',
          onClick (picker) {
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 60 * 60 * 1000);
@@ -76,7 +77,7 @@
          }
        }, {
          text: '近三小时',
          onClick (picker) {
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 60 * 60 * 1000 * 3);
@@ -84,7 +85,7 @@
          }
        }, {
          text: '近六小时',
          onClick (picker) {
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 60 * 60 * 1000 * 6);
@@ -106,18 +107,17 @@
      isInvert: false,
    }
  },
  mounted () {
  mounted() {
    this.searchData();
    //this.filterData();
    this.getPanorama();
  },
  beforeDestroy () {
    console.log('beforeDestroy')
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    checkTime () {
    checkTime() {
      if (!this.searchTime) {
        this.$notify({
          type: 'warning',
@@ -135,7 +135,7 @@
        this.searchData();
      }
    },
    filterData () {
    filterData() {
      let _this = this;
      var param = {
        page: 1,
@@ -175,19 +175,19 @@
          })
        });
        for (var i = 0; i < _this.actObjs.length; i++) {
          _this.actObjs[i].color = _this.colorArr[i % 10];
          this.$set(_this.actObjs[i], 'color', _this.colorArr[i % 10]);
          this.$set(_this.actObjs[i], 'isHide', _this.actObjs[i].isHide);
        }
        _this.drawTracePath();
      })
    },
    hideAllChange () {
    hideAllChange() {
      this.actObjs.forEach(target => {
        target.isHide = this.isHideAll;
      });
      this.drawTracePath();
    },
    invertChange () {
    invertChange() {
      console.log(this.isInvert)
      this.actObjs.forEach(target => {
        target.isHide = !target.isHide;
@@ -200,12 +200,12 @@
      }
      this.drawTracePath();
    },
    checkTarget (item) {
    checkTarget(item) {
      item.isHide = !item.isHide;
      this.isHideAll = item.isHide;
      this.drawTracePath();
    },
    getPanorama () {
    getPanorama() {
      let _this = this;
      getPanoramaPic().then(res => {
        let { panoramaPath, width, height } = res.data;
@@ -223,8 +223,7 @@
        }
      })
    },
    drawTracePath () {
      console.log(this.actObjs)
    drawTracePath() {
      let canvas = this.$refs['trackArea'];
      let ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -256,7 +255,7 @@
        }
      })
    },
    searchData () {
    searchData() {
      let _this = this;
      var param = {
        page: 1,
@@ -269,7 +268,7 @@
        treeNodes: [],
        isAll: false
      };
      if((new Date() - _this.timeMark)<_this.intervalTime){
      if ((new Date() - _this.timeMark) < _this.intervalTime) {
        return
      }
      getSearchList(param).then(res => {
@@ -338,16 +337,20 @@
          if (!_this.actObjs[i].posInfo.length) {
            _this.actObjs.splice(i, 1);
          }
          _this.actObjs[i].color = _this.colorArr[i % 10];
          this.$set(_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 +361,7 @@
.trace-plot {
  .filter-bar {
    width: 960px;
    margin: 20px auto;
    margin: 20px 10px;
    display: flex;
    align-items: center;
    flex-direction: end;