关联摄像机交互优化

hanbaoshan

2020-12-29 c2a36b585d1f00aa400c761e03d80535a4c7c6cb

关联摄像机交互优化

 src/components/treeMenu/jsTree/tree.vue

@@ -262,6 +262,7 @@
                  }
                }
                var dataItem = self.initializeDataItem(data[i]);
                debugger
                self.$set(oriParent, i, dataItem);
              }
            } else {
@@ -334,6 +335,7 @@
    this.initializeData(this.data);
  },
  mounted() {
    debugger
    if (this.async) {
      this.$set(this.data, 0, this.initializeLoading());
      this.handleAsyncLoad(this.data, this);

 src/pages/panoramicView/components/RelateCamera.vue

@@ -58,7 +58,7 @@
        </div>
      </div>
      <div class="relative-list">
        <div class="relative-item" v-for="item in relativeList" :key="item.id">
        <div class="relative-item" v-for="(item,index) in relativeList" :key="item.id">
          <div class="left">
            <el-select v-model="item.sourceObj" value-key="polygonId" size="small">
              <el-option
@@ -80,9 +80,18 @@
          </div>
          <div class="right">
            <el-button type="text" @click="saveRelativePolygon(item)">保存</el-button>
            <div class="btn-del" @click="delRelation(item)">
              <i class="el-icon-delete"></i>
            </div>

            <el-popconfirm title="确定删除该配置吗?" @onConfirm="delRelation(item)" v-if="item.id">
              <el-button class="btn-del" slot="reference" type="text" icon="el-icon-delete"></el-button>
            </el-popconfirm>
            <el-button
              @click="delRelation(item,index)"
              class="btn-del"
              slot="reference"
              type="text"
              icon="el-icon-delete"
              v-else
            ></el-button>
          </div>
        </div>
      </div>
@@ -170,17 +179,22 @@
    polygonUpdate () {
      this.getAllGroups();
    },
    delRelation (item) {
    delRelation (item, index) {
      let _this = this;
      delRelation(item.id).then(res => {
        if (res.success) {
          this.$notify({
            type: 'success',
            message: res.data
          });
          _this.findRelationByGroup();
        }
      })
      if (item.id) {
        delRelation(item.id).then(res => {
          if (res.success) {
            this.$notify({
              type: 'success',
              message: res.data
            });
            _this.findRelationByGroup();
          }
        })
      }else{
        this.relativeList.splice(index,1);
      }

    },
    findRelationByGroup () {
      let _this = this;
@@ -201,6 +215,20 @@
    },
    saveRelativePolygon (item) {
      debugger
      if (!item.sourceObj || !item.targetObj) {
        this.$notify({
          type: 'warning',
          message: '请完善关联区域信息!'
        });
        return;
      }
      if (item.sourceObj.cameraId == item.targetObj.cameraId) {
        this.$notify({
          type: 'warning',
          message: '相同摄像机不存在关联区域，请重新选择!'
        });
        return;
      }
      let _this = this;
      let params = {
        groupId: this.curGroup.id,
@@ -282,8 +310,20 @@
        groups[i].cameras = await _this.findPolygonByIds(groups[i].cameras)
      }
      this.groupList = groups;
      //选中第一个
      this.groupList.length && this.checkCurrentGroup(_this.groupList[0]);
      this.groupList.reverse();
      //如果刚新建则选中第一个,编辑则选中编辑的那条
      if (!this.groupForm.id) {
        this.groupList.length && this.checkCurrentGroup(_this.groupList[0]);
      } else {
        let group = this.groupList.find(one => one.id == this.groupForm.id);
        if(group){
          this.groupList.length && this.checkCurrentGroup(group);
        }else{
          this.groupList.length && this.checkCurrentGroup(_this.groupList[0]);
        }
        
      }


    },

@@ -293,6 +333,7 @@
    },

    editGroup (group) {
      debugger
      this.groupModelVisible = true;
      //this.$refs['groupForm'].resetFields();
      //this.groupForm = group;
@@ -307,8 +348,9 @@
    checkCurrentGroup (group) {
      this.groupList.forEach(group => {
        group.checked = false;
      })
      });
      this.curGroup = group;
      this.groupForm = JSON.parse(JSON.stringify(group));
      this.curGroup.checked = true;
      this.findRelationByGroup();
      //查询第一个分组下摄像机区域
@@ -371,6 +413,12 @@
      })
      //this.groupList.push(this.groupForm);
      saveCameraGroupInfo(params).then(res => {
        if(res.success){
          this.$notify({
            type: 'success',
            message: '保存成功!'
          })
        }
        _this.getAllGroups();
      })
      this.groupModelVisible = false;
@@ -441,8 +489,8 @@
      .details {
        display: -webkit-box;
        overflow: hidden;
        text-overflow:ellipsis;
        word-break:break-all;
        text-overflow: ellipsis;
        word-break: break-all;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        //flex-wrap: wrap;

 src/pages/panoramicView/components/SlideCanvas.vue

@@ -83,10 +83,6 @@
  methods: {
    refresh(url,cameraId) {
      this.$emit('polygonDataUpdate')

      //let camera = this.cameras.find(one => one.id == cameraId);
      //camera.canvasData.snapshot_url = url;

    },
    getCanvasData(data) {
      let _this = this;
@@ -108,11 +104,17 @@
    },

    pre () {
      this.swiper.activeIndex--
      this.swiper.activeIndex--;
      if(this.swiper.activeIndex == -1){
        this.swiper.activeIndex = this.cameras.length-1;
      }
      this.swiper.slideTo(this.swiper.activeIndex);
    },
    next () {
      this.swiper.activeIndex++
      this.swiper.activeIndex++;
      if(this.swiper.activeIndex == this.cameras.length){
        this.swiper.activeIndex = 0;
      }
      this.swiper.slideTo(this.swiper.activeIndex);
    },
    drawBaseImg (id) {