标注页面添加实景坐标回显,轨迹图添加人员筛选相关功能

hanbaoshan

2020-12-29 c9e0ab6e5150243d1e193a0f919a55f3c327710c

标注页面添加实景坐标回显,轨迹图添加人员筛选相关功能

 src/pages/panoramicView/components/LabelMark.vue

@@ -20,7 +20,7 @@
                </div>
                <div style="width:250px;">
                  <label for>笔触:</label>
                  <el-slider v-model="dotSize" :min="1" :max="20"></el-slider>
                  <el-slider v-model="dotSize" :min="1" :max="15"></el-slider>
                </div>
                <div>
                  <el-button
@@ -111,6 +111,38 @@
                </div>
              </div>
            </div>
            <div class="panorama-info">
              <div
                class="img-wrap"
                v-if="panoramaPath"
                :style="{width:fixedW+'px',height:fixedH+'px'}"
              >
                <img
                  v-if="panoramaPath"
                  :style="{width:imgW+'px',height:imgH+'px'}"
                  :src="panoramaPath"
                  @mousemove="showCurPos"
                  @mouseout="isShowCurPos=false"
                />
                <div
                  class="label"
                  @mouseover="labelOver(item)"
                  @mouseout="item.isShow=false"
                  v-for="item in curCameraData.panoramaCoords"
                  :key="item.id"
                  :style="{left:`${item.x}px`, top:`${item.y}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }"
                >
                  <span class="text" v-show="item.isShow">
                    <b>{{item.x}},</b>&nbsp;<b>{{item.y}}</b>
                  </span>
                </div>
              </div>
              <div class="pos" v-show="isShowCurPos">
                当前位置:
                <b>{{traceX}}</b>,
                <b>{{traceY}}</b>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
@@ -134,8 +166,18 @@
                @mousemove="showCurPos"
                @mouseout="isShowCurPos=false"
              ></el-image>-->
              <div class="img-wrap" v-if="panoramaPath" :style="{width:fixedW+'px',height:fixedH+'px'}">
                <img v-if="panoramaPath" :style="{width:imgW+'px',height:imgH+'px'}" :src="panoramaPath" @mousemove="showCurPos" @mouseout="isShowCurPos=false">
              <div
                class="img-wrap"
                v-if="panoramaPath"
                :style="{width:fixedW+'px',height:fixedH+'px'}"
              >
                <img
                  v-if="panoramaPath"
                  :style="{width:imgW+'px',height:imgH+'px'}"
                  :src="panoramaPath"
                  @mousemove="showCurPos"
                  @mouseout="isShowCurPos=false"
                />
              </div>

              <div class="el-upload__text">
@@ -217,7 +259,8 @@
      spaceHeight: '',
      curCameraData: {
        cameraId: '',
        coords: []
        coords: [],
        panoramaCoords: []
      },
    }
  },
@@ -251,6 +294,15 @@
    }
  },
  methods: {
    labelOver (item) {
      debugger
      this.$nextTick(() => {
        item.isShow = true;
      })
    },
    labelout (item) {
      item.isShow = false;
    },
    getAllCameraData () {
      let _this = this;
      getCamerasByServer().then(res => {
@@ -284,7 +336,11 @@
      getCameraMarks({ cameraId: id }).then(res => {
        if (res.success) {
          this.curCameraData.cameraId = id;
          this.curCameraData.coords = res.data.map((item, index) => ({ id: 'm' + index, x0: item.x0, y0: item.y0, x1: item.x1, y1: item.y1 }));
          this.curCameraData.coords = res.data.coords.map((item, index) => ({ id: 'm' + index, x0: item.x0, y0: item.y0, x1: item.x1, y1: item.y1 }));
          this.curCameraData.panoramaCoords = res.data.panoramaCoords.map((item, index) => ({ id: 'p' + index, x: item.x, y: item.y }));
          this.curCameraData.panoramaCoords.forEach(coord => {
            this.$set(coord, 'isShow', false)
          })
        }
      }).catch(e => {
        console.log(e)
@@ -311,13 +367,13 @@
      let _this = this;
      getPanoramaPic().then(res => {
        //判断长宽比
        let ratio = res.data.width/res.data.height;
        if(ratio > (_this.fixedW/_this.fixedH)){
        let ratio = res.data.width / res.data.height;
        if (ratio > (_this.fixedW / _this.fixedH)) {
          _this.imgW = _this.fixedW;
          _this.imgH = _this.imgW*res.data.height/res.data.width;
        }else{
          _this.imgH = _this.imgW * res.data.height / res.data.width;
        } else {
          _this.imgH = _this.fixedH;
          _this.imgW = res.data.width*_this.imgH/res.data.height;
          _this.imgW = res.data.width * _this.imgH / res.data.height;
        }
        _this.panoramaPath = res.data.panoramaPath + '?' + Math.random();
      })
@@ -466,15 +522,19 @@
    background: #d2dcea;
    padding: 0;
    height: calc(100vh - 100px);
    overflow: auto;
    //overflow: auto;
    .mark-interface {
      display: flex;
      .left-tree {
        position: relative;
        float: left;
        //float: left;
        height: calc(100vh - 20px);
        overflow: auto;
        background: #fff;
      }
      .tree-right {
        flex: 1;
        height: calc(100vh - 90px);
        overflow: auto;
      }
    }
@@ -616,6 +676,25 @@
      }
    }
  }
  .panorama-info {
    width: 1070px;
    margin: 0 auto;
    display: flex;
    padding-bottom: 30px;
    .img-wrap {
      position: relative;
      .label {
        position: absolute;
        border-radius: 50%;
        .text {
          color: aqua;
          font-size: 14px;
          position: absolute;
          bottom: 15px;
        }
      }
    }
  }
  .user-upload {
    margin: auto;
    padding: 50px;

 src/pages/panoramicView/components/TracePlot.vue

@@ -13,7 +13,24 @@
      ></el-date-picker>
      <el-button @click="searchData" size="small" type="primary" class="btn-search">查 询</el-button>
    </div>

    <div class="check-target" :style="{height:fixedH+'px'}">
      <div class="controller">
        <el-checkbox v-model="isHideAll" @change="hideAllChange">隐藏全部</el-checkbox>
        <el-checkbox v-model="isInvert" @change="invertChange">反选</el-checkbox>
      </div>
      <div class="target-list">
        <div
          class="list-item"
          v-for="item in actObjs"
          :key="item.id"
          :class="{'deact':item.isHide}"
          :style="{borderColor:item.isHide?'#ccc':item.color}"
          @click="checkTarget(item)"
        >
          <!-- <img src alt :style="{backgroundColor:item.color}"/> -->
        </div>
      </div>
    </div>
    <!-- <canvas
      ref="trackArea"
      :width="cW"
@@ -41,6 +58,7 @@
      trackData: [],
      activeObjHashMap: {},
      actObj: {},
      actObjs: [],
      searchTime: [
        this.$moment().format("YYYY-MM-DD 00:00:00"),
        this.$moment().format("YYYY-MM-DD 23:59:59")
@@ -53,7 +71,10 @@
      fixedW: 960,
      fixedH: 700,
      bgW: 0,
      bgH: 0
      bgH: 0,
      targetChecked: [],
      isHideAll: false,
      isInvert: false,
    }
  },
  mounted () {
@@ -68,6 +89,30 @@
    clearInterval(this.timer);
  },
  methods: {
    hideAllChange(){
      this.actObjs.forEach(target=>{
        target.isHide = this.isHideAll;
      });
      this.drawTracePath();
    },
    invertChange(){
      console.log(this.isInvert)
      this.actObjs.forEach(target=>{
        target.isHide = !target.isHide;
      });
      let showOne = this.actObjs.find(target=>!target.isHide);
      if(!showOne){
        this.isHideAll = true;
      }else{
        this.isHideAll = false;
      }
      this.drawTracePath();
    },
    checkTarget (item) {
      item.isHide = !item.isHide;
      this.isHideAll = item.isHide;
      this.drawTracePath();
    },
    getPanorama () {
      let _this = this;
      getPanoramaPic().then(res => {
@@ -90,40 +135,65 @@
      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.strokeStyle = 'yellow';
      //ctx.fillStyle = 'aqua';
      //ctx.globalAlpha=0.5;
      ctx.lineWidth = 3;
      //ctx.lineJoin='round';
      ctx.lineCap = 'round';
      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++) {
      this.actObjs.forEach(target => {
        if (!target.isHide) {
          ctx.beginPath();
          ctx.arc(this.actObj[target][i].globalCoordX, this.actObj[target][i].globalCoordY, 3, 0, Math.PI * 2);
          ctx.fill()
          ctx.fillStyle = target.color;
          ctx.arc(target.posInfo[0].globalCoordX, target.posInfo[0].globalCoordY, 3, 0, Math.PI * 2);
          ctx.fill();
          for (var i = 1; i < target.posInfo.length; i++) {
            ctx.beginPath();
            ctx.arc(target.posInfo[i].globalCoordX, target.posInfo[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);

      });
      this.actObjs.forEach(target => {
        if (!target.isHide) {
          ctx.beginPath();
          ctx.strokeStyle = target.color;
          ctx.moveTo(target.posInfo[0].globalCoordX, target.posInfo[0].globalCoordY);
          for (var i = 1; i < target.posInfo.length; i++) {
            ctx.lineTo(target.posInfo[i].globalCoordX, target.posInfo[i].globalCoordY)
          }
          ctx.stroke();
        }
        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 () {
      let _this = this;
      var param = {
        page: 1,
        size: 500,
        size: 5000,
        searchTime: this.searchTime,
        alarmlevel: [],
        inputValue: '',
@@ -134,15 +204,18 @@
      };
      getSearchList(param).then(res => {
        let filterArr = [];
        if(!res.data.datalist){
        if (!res.data.datalist) {
          _this.activeObjHashMap = {};
          _this.actObj = {}
          _this.actObj = {};
          _this.actObjs = [];
        }
        for(var key in _this.activeObjHashMap){
          let innerKey = res.data.datalist&&res.data.datalist.find(obj => obj.activeObject.id == key);
          if(!innerKey){
        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];
            let index = _this.actObjs.findIndex(one => one.id == innerKey);
            _this.actObjs.splice(index, 1)
          }
        }

@@ -152,16 +225,24 @@
            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, timeStamp: Date.parse(item.activeObject.picDate) });
              let attribute = JSON.parse(target.attribute);
              let someone = _this.actObjs.find(obj => obj.id == target.targetId);
              if (someone) {
                someone.posInfo.unshift({ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(item.activeObject.picDate) });
              } else {
                _this.actObj[target.targetId] = [{ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(item.activeObject.picDate) }];
                _this.actObjs.push({ id: target.targetId, picSmUrl: target.picSmUrl, posInfo: [{ globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(item.activeObject.picDate) }] });
              }

              if (_this.actObj[target.targetId]) {
                _this.actObj[target.targetId].unshift({ picSmUrl: target.picSmUrl, globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(item.activeObject.picDate) });

              } else {
                _this.actObj[target.targetId] = [{ picSmUrl: target.picSmUrl, globalCoordX: attribute.globalCoordX, globalCoordY: attribute.globalCoordY, timeStamp: Date.parse(item.activeObject.picDate) }];

              }
            }
          })
@@ -174,10 +255,22 @@
          _this.actObj[target] = _this.actObj[target].filter(item =>
            item.timeStamp >= _this.searchStartTimeStamp && item.timeStamp <= _this.searchEndTimeStamp
          )
          if(_this.actObj[target].length == 0){
          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)

          if (!_this.actObjs[i].posInfo.length) {
            _this.actObjs.splice(i, 1);
          }
          _this.actObjs[i].color = _this.colorArr[i % 10];
          this.$set(_this.actObjs[i], 'isHide', _this.actObjs[i].isHide);
        }
        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 => {
@@ -204,6 +297,37 @@
      margin-left: 20px;
    }
  }
  .check-target {
    padding: 30px;
    box-sizing: border-box;
    overflow: auto;
    background: #f1f4f9;
    float: left;
    .target-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 300px;

      .list-item {
        width: 80px;
        height: 80px;
        margin-bottom: 10px;
        border: 3px solid yellow;
        border-radius: 50%;
        img {
          width: 100%;
          height: 100%;
          display: block;
          border-radius: 50%;
        }
        &.deact {
          opacity: 0.5;
          background: rgba(0, 0, 0, 0.3);
        }
      }
    }
  }
  canvas {
    //background: lightsteelblue;
    background-repeat: no-repeat;

 src/pages/panoramicView/index/App.vue

@@ -69,7 +69,7 @@
        margin-left: 10px;
        font-size: 17px;
        color: #fff;
        letter-spacing: 2px;
        letter-spacing: 5px;
      }
    }
    .el-menu--horizontal {