摄像机标注获取/更新及相关校验

hanbaoshan

2020-11-06 88d6488825e42e6b49abb20c2364671a62b3333d

摄像机标注获取/更新及相关校验

 src/api/camera.ts

@@ -171,4 +171,22 @@
    method: "post",
    data
  })
}

//获取摄像机的坐标标定信息
export const getCameraMarks = (query:any) => {
  return request({
    url: '/data/api-v/camera/coord',
    method: "get",
    params: query
  })
}

//更新摄像机的坐标标定信息
export const updateCameraMarks = (data:any) => {
  return request({
    url: '/data/api-v/camera/updateCoord',
    method: 'post',
    data
  })
}

 src/pages/labelMark/components/RightSide.vue

@@ -23,11 +23,20 @@
                </div>
                <div>
                  <el-button
                    v-if="!isEdit"
                    class="drawboard-trigger"
                    size="small"
                    @click="isEdit=!isEdit"
                    :icon="isEdit?'el-icon-lock':'el-icon-edit'"
                  >{{isEdit?'锁定':'编辑'}}</el-button>
                    @click="editCameraData"
                    icon="el-icon-edit"
                  >编辑</el-button>

                  <el-button
                    v-if="isEdit"
                    class="drawboard-trigger save"
                    size="small"
                    @click="submitInfo"
                    icon="el-icon-lock"
                  >保存</el-button>
                </div>
              </div>
            </div>
@@ -36,48 +45,68 @@
                <div
                  class="label"
                  @click="editLabel(item)"
                  v-for="(item,index) in labels"
                  v-for="(item,index) in curCameraData.coords"
                  :key="index"
                  :style="{left:`${item.x}px`, top:`${item.y}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }"
                  :style="{left:`${item.x0}px`, top:`${item.y0}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }"
                ></div>
              </div>
              <img v-show="snapshot_url" :src="`/httpImage/${snapshot_url}`" alt />
              <div
                class="popBox"
                v-show="isShowPop"
                :style="`top:${curLabel.y + 22}px;left:${curLabel.x}px`"
                :style="`top:${curLabel.y0 + 22}px;left:${curLabel.x0}px`"
              >
                <div class="title">标注信息</div>
                <div class="details">
                  <div class="detail-item">
                    <div class="left">
                      <label for>平面坐标X:</label>
                      <span class="fix-width">{{curLabel.x}}</span>
                      <i>px</i>
                  <el-form :model="curLabel" :rules="rules" ref="labelForm">
                    <div class="detail-item">
                      <div class="left">
                        <el-form-item prop="X0">
                          <label for>平面坐标X:</label>
                          <span class="fix-width">{{curLabel.x0}}</span>
                          <i>px</i>
                        </el-form-item>
                      </div>
                      <span class="devide"></span>
                      <div class="right">
                        <el-form-item prop="x1">
                          <label for>实际坐标X:</label>
                          <el-input
                            type="text"
                            size="mini"
                            style="width:90px"
                            v-model.number="curLabel.x1"
                          ></el-input>
                        </el-form-item>
                      </div>
                    </div>
                    <span class="devide"></span>
                    <div class="right">
                      <label for>实际坐标X:</label>
                      <el-input type="text" size="mini" style="width:90px" v-model="curLabel.posX"></el-input>
                    <div class="detail-item">
                      <div class="left">
                        <el-form-item prop="y0">
                          <label for>平面坐标Y:</label>
                          <span class="fix-width">{{curLabel.y0}}</span>
                          <i>px</i>
                        </el-form-item>
                      </div>
                      <span class="devide"></span>
                      <div class="right">
                        <el-form-item prop="y1">
                          <label for>实际坐标Y:</label>
                          <el-input
                            type="text"
                            size="mini"
                            style="width:90px"
                            v-model.number="curLabel.y1"
                          ></el-input>
                        </el-form-item>
                      </div>
                    </div>
                  </div>
                  <div class="detail-item">
                    <div class="left">
                      <label for>平面坐标Y:</label>
                      <span class="fix-width">{{curLabel.y}}</span>
                      <i>px</i>
                    <div class="btns">
                      <el-button size="mini" type="danger" @click="deleteLabel">删除</el-button>
                      <el-button size="mini" type="primary" @click="cancle">取消</el-button>
                      <el-button size="mini" type="success" @click="sure">确定</el-button>
                    </div>
                    <span class="devide"></span>
                    <div class="right">
                      <label for>实际坐标Y:</label>
                      <el-input type="text" size="mini" style="width:90px" v-model="curLabel.posY"></el-input>
                    </div>
                  </div>
                  <div class="btns">
                    <el-button size="mini" type="danger" @click="deleteLabel">删除</el-button>
                    <el-button size="mini" type="primary" @click="cancle">取消</el-button>
                    <el-button size="mini" type="success" @click="submitInfo">确定</el-button>
                  </div>
                  </el-form>
                </div>
              </div>
            </div>
@@ -166,8 +195,10 @@
</template>

<script>
import { getCamerasByServer } from '@/api/pollConfig'
import { getCamerasByServer } from '@/api/pollConfig';
import { getCameraMarks, updateCameraMarks } from '@/api/camera';
import TreeDataPool from "@/Pool/TreeData";
import { isNonnegativeInteger } from '@/scripts/validate';
export default {
  data () {
    return {
@@ -177,12 +208,27 @@
      isEdit: false,
      isShowPop: false,
      isNewLabel: false,
      // curLabel: {
      //   id: '',
      //   posX: '',
      //   posY: '',
      //   x: '',
      //   y: ''
      // },
      curLabel: {
        id: '',
        posX: '',
        posY: '',
        x: '',
        y: ''
        x1: '',
        y1: '',
        x0: '',
        y0: ''
      },
      rules: {
        x1: [
          { validator: isNonnegativeInteger, trigger: 'change' }
        ],
        y1: [
          { validator: isNonnegativeInteger, trigger: 'change' }
        ]
      },
      baseUrl: '',
      snapshot_url: '',
@@ -194,7 +240,11 @@
      actPage: '1',
      loading: false,
      spaceWidth: '',
      spaceHeight: ''
      spaceHeight: '',
      curCameraData: {
        cameraId: '',
        coords: []
      }
    }
  },
  computed: {
@@ -202,17 +252,19 @@
  },
  mounted () {
    this.getAllCameraData();
    //mock回显标注
    setTimeout(() => {
      let mockData = [{ id: 'a1', x: 15, y: 33, posX: 150, posY: 330 }, { id: 'b2', x: 56, y: 87, posX: 560, posY: 870 }];
      this.labels = mockData;
      let mockData = [{ id: 'a1', x0: 15, y0: 33, x1: 150, y1: 330 }, { id: 'b2', x0: 56, y0: 87, x1: 560, y1: 870 }];
      //this.curCameraData.coords = mockData;
    }, 1000);
  },
  watch: {
    'TreeDataPool.selectedNode': {
      handler (n, o) {
        debugger
        let curCamera = this.cameraData.find(item => item.id == n.id);
        //设置摄像机底图
        this.snapshot_url = curCamera.snapshot_url;
        this.findCameraMarks(n.id);
      },
      deep: true
    },
@@ -225,6 +277,51 @@
    }
  },
  methods: {
    sure () {
      let _this = this;
      this.$refs['labelForm'].validate(valid => {
        console.log(valid)
        if (valid) {
          _this.isShowPop = false;
          debugger
          if (_this.curLabel.id) {
            let editedIndex = _this.curCameraData.coords.findIndex(one => one.id == _this.curLabel.id);
            _this.curCameraData.coords[editedIndex] = JSON.parse(JSON.stringify(_this.curLabel));
            //editedOne = JSON.parse(JSON.stringify(_this.curLabel));
          }
          console.log(_this.curCameraData.coords)
          this.$refs['labelForm'].clearValidate();
        }
      });
    },
    //获取摄像机标注
    findCameraMarks (id) {
      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 }));
        }
      }).catch(e => {
        console.log(e)
      });
    },
    editCameraData () {
      if (!this.TreeDataPool.selectedNode.id) {
        this.$notify({
          message: '请先选择摄像机',
          type: 'warning'
        });
        return;
      }
      this.isEdit = !this.isEdit;
    },
    async submitInfo () {
      this.isEdit = false;
      let res = await updateCameraMarks(this.curCameraData);
      if (res.success) {
        this.findCameraMarks(this.curCameraData.cameraId);
      }
    },
    chnageActPage () {

    },
@@ -254,7 +351,6 @@
    getAllCameraData () {
      getCamerasByServer().then(res => {
        if (res.success) {
          debugger
          this.cameraData = res.data;
        }
      }).catch(e => {
@@ -269,42 +365,48 @@
      if (this.isShowPop) return;
      //获取鼠标相对于画板的定位
      console.log('获取当前定位信息');
      //this.$refs['labelForm'].clearValidate();
      this.$refs['labelForm'].resetFields();
      let target = {
        id: '',
        x: e.offsetX,
        y: e.offsetY,
        posX: '',
        posY: ''
        x0: e.offsetX,
        y0: e.offsetY,
        x1: '',
        y1: ''
      };
      this.labels.push(target);
      //this.labels.push(target);
      this.curCameraData.coords.push(target);
      this.curLabel = target;
      this.isShowPop = true;
      this.isNewLabel = true;
    },
    editLabel (label) {
      debugger
      if (!this.isEdit) return;
      this.isShowPop = true;
      this.$refs['labelForm'].clearValidate();
      this.curLabel = JSON.parse(JSON.stringify(label));
      console.log(this.curLabel)
      //this.curLabel = label;
    },
    cancle () {
      this.isShowPop = false;
      //如果是未保存过的label直接删除(未保存的就是labels数组中最后一个)
      if (!this.curLabel.id) {
        this.labels.pop();
        //this.labels.pop();
        this.curCameraData.coords.pop();
      }
    },
    deleteLabel () {
      if (this.curLabel.id) {
        //请求后台删除
      } else {
        this.labels.pop();
        this.isShowPop = false;
      }
    },
    submitInfo () {
        let index = this.curCameraData.coords.findIndex(item => item.id == this.curLabel.id);
        this.curCameraData.coords.splice(index, 1);

    }
      } else {
        //this.labels.pop();
        this.curCameraData.coords.pop();
      }
      this.isShowPop = false;
    },
  }
}
</script>
@@ -407,11 +509,12 @@
        font-weight: bold;
        text-align: left;
        font-size: 15px;
        margin-bottom: 14px;
        letter-spacing: 2px;
      }
      .details {
        .detail-item {
          display: flex;
          align-items: center;
          margin: 5px 0;
          label {
            color: #a9a9a9;
@@ -434,11 +537,22 @@
            width: 10px;
            height: 1px;
            background: #a9a9a9;
            margin: 0 3px;
            margin: 14px 3px;
          }
        }
        .btns {
          margin-top: 10px;
        }
        .el-form-item {
          margin-bottom: 12px;
        }
        .el-form-item__content {
          font-size: 12px;
          line-height: 30px;
        }
        .el-form-item__error {
          left: 70px;
          top: 94%;
        }
      }
    }
@@ -468,7 +582,7 @@
        margin-top: 10px;
        text-align: left;
        color: rgba(39, 68, 111, 0.67);
        b{
        b {
          font-style: italic;
        }
        //color: #4966b7

 src/scripts/validate.ts

@@ -92,4 +92,16 @@
export function vaildHost(str) {
  let re = /^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$/
  return re.test(str)
}

//校验自然数(非负整数)
export function isNonnegativeInteger(rule, value, callback) {
  if(!value){
    return callback(new Error('输入不能为空'));
  }
  const reg = /^\d+$/;
  if(!reg.test(value)){
    return callback(new Error('请输入非负整数'));
  }
  return callback()
}