zhangzengfei
2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09
src/pages/panoramicView/components/RelateCamera.vue
@@ -32,7 +32,7 @@
          </div>
          <div class="bottom">
            <span @click.stop="editGroup(group)">编辑分组</span>
            <el-popconfirm title="确定删除该分组吗?" @onConfirm="removeGroup(group)">
            <el-popconfirm title="确定删除该分组吗?" @confirm="removeGroup(group)">
              <el-button slot="reference" type="text">删除分组</el-button>
            </el-popconfirm>
          </div>
@@ -40,6 +40,7 @@
      </div>
    </div>
    <!-- <div class="part" v-if="groupList.length"> -->
    <el-divider></el-divider>
    <div class="part" v-if="groupList.length!==0 && Object.keys(curGroup)">
      <div class="title">绘制区域(用于算法分析)</div>
      <div class="relative-partment" v-if="curGroup.cameras&&curGroup.cameras.length">
@@ -48,6 +49,7 @@
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="part relative-config" v-if="Object.keys(curGroup)">
      <div class="title">
        <div class="left">
@@ -58,7 +60,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 +82,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="确定删除该配置吗?" @confirm="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>
@@ -133,7 +144,7 @@
export default {
  components: { SlideCanvas },
  data () {
  data() {
    return {
      cameraData: [],
      relativeList: [],
@@ -152,11 +163,11 @@
      cameraAndPolygonData: []
    }
  },
  mounted () {
  mounted() {
    this.getAllCameraData();
  },
  methods: {
    getAllCameraData () {
    getAllCameraData() {
      let _this = this;
      getCamerasByServer().then(res => {
        if (res.success) {
@@ -167,22 +178,27 @@
        console.log(e)
      })
    },
    polygonUpdate () {
    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.msg
            });
            _this.findRelationByGroup();
          }
        })
      } else {
        this.relativeList.splice(index, 1);
      }
    },
    findRelationByGroup () {
    findRelationByGroup() {
      let _this = this;
      findByGroup({ groupId: this.curGroup.id }).then(res => {
@@ -199,8 +215,22 @@
        })
      })
    },
    saveRelativePolygon (item) {
      debugger
    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,
@@ -222,17 +252,21 @@
      })
    },
    async findPolygonByIds (cameras) {
    async findPolygonByIds(cameras) {
      for (var i = 0; i < cameras.length; i++) {
        if (Object.keys(cameras[i]).length == 0)
          continue
        let res = await getAllPolygon({ cameraId: cameras[i].id });
        cameras[i].canvasData = res.data;
      }
      return cameras
    },
    async getAllGroupInfo () {
    async getAllGroupInfo() {
      let _this = this;
      console.log("_this.cameraData", _this.cameraData)
      let res = await findCameraGroups();
      console.log("res", res);
      let groupArr = res.data.map(item => {
        let obj = {}; //group
        obj.groupName = item.groupName;
@@ -275,39 +309,63 @@
    //     _this.checkCurrentGroup(_this.groupList[0]);
    //   })
    // },
    async getAllGroups () {
    async getAllGroups() {
      let _this = this;
      let groups = await this.getAllGroupInfo();
      console.log("groups", groups)
      for (var i = 0; i < groups.length; i++) {
        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]);
        }
      }
    },
    addRelation () {
    addRelation() {
      let obj = { cameraArea1: '', cameraArea2: '' };
      this.relativeList.push(obj)
    },
    editGroup (group) {
    editGroup(group) {
      // debugger
      this.groupModelVisible = true;
      //this.$refs['groupForm'].resetFields();
      this.groupForm = group;
      //this.groupForm = group;
      this.groupForm = JSON.parse(JSON.stringify(group));
    },
    removeGroup (group) {
    removeGroup(group) {
      let _this = this;
      delCameraGroup(group.id).then(res => {
        _this.getAllGroups()
        if (res.success) {
          this.$notify.success(res.msg)
          _this.getAllGroups()
        }else{
          this.$notify.error("删除失败")
        }
      }).catch((err) => {
          this.$notify.error("删除失败")
      })
    },
    checkCurrentGroup (group) {
    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();
      //查询第一个分组下摄像机区域
@@ -332,10 +390,9 @@
          tempArr = tempArr.concat(cameraArea)
        });
        this.cameraAreas = tempArr;
        console.log(this.cameraAreas)
      })
    },
    confirmGroupDialog () {
    confirmGroupDialog() {
      //请求保存新建或编辑分组
      let _this = this;
      let params = {
@@ -370,12 +427,18 @@
      })
      //this.groupList.push(this.groupForm);
      saveCameraGroupInfo(params).then(res => {
        if (res.success) {
          this.$notify({
            type: 'success',
            message: '保存成功!'
          })
        }
        _this.getAllGroups();
      })
      this.groupModelVisible = false;
    },
    newGroup () {
    newGroup() {
      this.groupModelVisible = true;
      this.$nextTick(() => {
        this.$refs['groupForm'].resetFields();
@@ -440,8 +503,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;
@@ -460,7 +523,7 @@
      position: relative;
      display: flex;
      &:after {
        content: '';
        content: "";
        position: absolute;
        font-size: 0;
        width: 1px;
@@ -482,7 +545,7 @@
    margin-bottom: 20px;
    .relative-partment {
      width: 1200px;
      margin: 0 auto;
      // margin: 0 auto;
      display: flex;
      justify-content: space-between;
      .area-wrap {
@@ -512,6 +575,9 @@
        .right {
          display: flex;
          align-items: center;
          .el-button + .el-button {
            margin-left: 0;
          }
        }
        i {
          font-size: 20px;