全景追踪更新

hanbaoshan

2020-12-24 bdc01327df1bfd88e2024175532a657d2170c13f

全景追踪更新

 src/pages/panoramicView/components/LabelMark.vue

@@ -122,6 +122,7 @@
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              :http-request="definedUpload"
              accept=".jpg"
              :on-change="onChange"
              :show-file-list="false"
            >
@@ -148,7 +149,7 @@
              <div>
                <label for>空间高:</label>
                <el-input v-model="spaceHeight" placeholder="请输入实际空间高" size="small"></el-input>
              </div> -->
              </div>-->
            </div>
            <div class="pos" v-show="isShowCurPos">
              当前位置:
@@ -222,7 +223,7 @@
      })();
    };
  },
  

  watch: {
    'TreeDataPool.selectedNode': {
      handler (n, o) {
@@ -298,9 +299,9 @@
        this.findCameraMarks(this.curCameraData.cameraId);
      }
    },
    getPanorama(){
    getPanorama () {
      let _this = this;
      getPanoramaPic().then(res=>{
      getPanoramaPic().then(res => {
        _this.panoramaPath = res.data.panoramaPath
      })
    },
@@ -311,17 +312,20 @@
      this.traceY = e.offsetY;
    },
    onChange (file, fileList) {
      fileList = [file]
      this.isShowCurPos = false;
      if (file.raw.type == "image/jpeg") {
        fileList = [file]
        this.isShowCurPos = false;
      }

    },
    definedUpload (params) {
      let _this = this;
      let _file = params.file;
      let param = new FormData();
      param.append('file', params.file)
      putPanoramaPic(param).then(res=>{
        _this.panoramaPath = res.data.panoramaPath+'?'+Math.random()
        console.log(_this.panoramaPath)
      putPanoramaPic(param).then(res => {
        _this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
        _this.$parent.$refs['tracePlot'] && _this.$parent.$refs['tracePlot'].getPanorama();
      })
      // let fileReader = new FileReader()
      // fileReader.onload = () => {
@@ -445,7 +449,7 @@
.label-mark {
  background: #d2dcea;
  height: calc(100vh - 61px);
  &>.el-tabs--border-card > .el-tabs__content {
  & > .el-tabs--border-card > .el-tabs__content {
    background: #d2dcea;
    padding: 0;
    height: calc(100vh - 100px);

 src/pages/panoramicView/components/RelateCamera.vue

@@ -295,7 +295,8 @@
    editGroup (group) {
      this.groupModelVisible = true;
      //this.$refs['groupForm'].resetFields();
      this.groupForm = group;
      //this.groupForm = group;
      this.groupForm = JSON.parse(JSON.stringify(group));
    },
    removeGroup (group) {
      let _this = this;

 src/pages/panoramicView/components/TracePlot.vue

@@ -10,24 +10,16 @@
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        :default-time="['00:00:00','23:59:59']"

      ></el-date-picker>
      <el-button @click="searchData" size="small" type="primary" class="btn-search">查 询</el-button>
    </div>
    <!-- <p class="p-date" style="width:19%;vertical-align: top;">
      <el-date-picker
        size="mini"
        v-model="searchTime"
        @change="searchData"
        type="datetimerange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        :default-time="['00:00:00','23:59:59']"
        style="width:99%;min-width:200px"
      ></el-date-picker>
    </p> -->
    <canvas ref="trackArea" width="960" height="540" :style="{backgroundImage:`url(${panoramaPath})`}"></canvas>

    <canvas
      ref="trackArea"
      :width="cW"
      :height="cH"
      :style="{backgroundImage:`url(${panoramaPath})`}"
    ></canvas>
  </div>
</template>

@@ -37,7 +29,9 @@
export default {
  data () {
    return {
      panoramaPath:'',
      cW: 0,
      cH: 0,
      panoramaPath: '',
      trackData: [],
      activeObjHashMap: {},
      actObj: {},
@@ -51,42 +45,63 @@
  },
  mounted () {
    this.searchData();
    this.getPanoramaPic();
    this.timer = setInterval(()=>{
    this.getPanorama();
    this.timer = setInterval(() => {
      this.searchData();
    },7000);
    }, 7000);
  },
  beforeDestroy(){
  beforeDestroy () {
    console.log('beforeDestroy')
    clearInterval(this.timer);
  },
  methods: {
    getPanoramaPic () {
    getPanorama () {
      let _this = this;
      getPanoramaPic().then(res=>{
        _this.panoramaPath = res.data.panoramaPath
      getPanoramaPic().then(res => {
        let { panoramaPath, width, height } = res.data;
        _this.panoramaPath = panoramaPath;
        _this.cW = width;
        _this.cH = height;

      })
    },
    drawTracePath () {
      //let canvas = document.querySelector('#trackArea');
      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);
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.strokeStyle = 'yellow';
      ctx.fillStyle = 'aqua';
      //ctx.globalAlpha=0.5;
      ctx.lineWidth = 2;
      ctx.lineWidth = 3;
      //ctx.lineJoin='round';
      ctx.lineCap = 'round';
      for (var target in this.actObj) {
        debugger
        ctx.beginPath();
        ctx.fillStyle = `rgb(${Math.floor(Math.random() * 20 + 220)},${Math.floor(Math.random() * 35 + 200)},${Math.floor(Math.random() * 55 + 200)})`;
        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.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.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.fillRect(this.actObj[target][0].globalCoordX, this.actObj[target][0].globalCoordY, 9, 9);
        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.fillRect(this.actObj[target][i].globalCoordX, this.actObj[target][i].globalCoordY, 9, 9);
        }
        ctx.stroke();
      }
@@ -95,18 +110,18 @@
      let _this = this;
      var param = {
        page: 1,
        size: 70,
        size: 15,
        searchTime: this.searchTime,
        alarmlevel: [],
        inputValue: '',
        tabs: [],
        tasks: [],
        treeNodes: [],
        isAll: true
        isAll: false
      };
      getSearchList(param).then(res => {
        let filterArr = [];
        res.data.datalist&&res.data.datalist.forEach(obj => {
        res.data.datalist && res.data.datalist.forEach(obj => {
          if (_this.activeObjHashMap[obj.activeObject.id] !== 1) {
            _this.activeObjHashMap[obj.activeObject.id] = 1
            filterArr.push(obj)
@@ -117,14 +132,14 @@
            if (target.targetType == 'UniquelID') {
              let attribute = JSON.parse(target.attribute)
              if (_this.actObj[target.targetId]) {
                _this.actObj[target.targetId].push({ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY });
                _this.actObj[target.targetId].unshift({ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY });
              } else {
                _this.actObj[target.targetId] = [{ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY }];
              }
            }
          })
        });
        console.log(_this.actObj)
        console.log(new Date().getTime(),_this.actObj)
        _this.drawTracePath()
      })
    }
@@ -134,20 +149,19 @@

<style lang="scss">
.trace-plot {
  .filter-bar{
  .filter-bar {
    width: 960px;
    margin: 20px auto;
    display: flex;
    align-items: center;
    flex-direction: end;
    .btn-search{
      margin-left:20px;
    .btn-search {
      margin-left: 20px;
    }
  }
  canvas {
    background: lightsteelblue;
    background-repeat: no-repeat;
    
  }
}
</style>

 src/pages/panoramicView/index/App.vue

@@ -21,7 +21,7 @@
        <label-mark></label-mark>
      </template>
      <template v-if="actMenuIndex=='2'">
        <trace-plot></trace-plot>
        <trace-plot ref="tracePlot"></trace-plot>
      </template>
      <template v-if="actMenuIndex=='3'">
        <relate-camera></relate-camera>
@@ -62,13 +62,12 @@
      display: flex;
      align-items: center;
      .icon{
        width: 100px;
        
        width: 50px;
      }
      .title{
        text-decoration: none;
        margin-left: 10px;
        font-size: 18px;
        font-size: 17px;
        color: #fff;
        letter-spacing: 2px;
      }