新增标注应用demo,场景配置添加区域判空检测(复制算法可能导致区域为空)

hanbaoshan

2020-10-23 f857a9130f97694c756dc8913e900bf9a74563ef

新增标注应用demo,场景配置添加区域判空检测(复制算法可能导致区域为空)

 src/pages/cameraAccess/components/scene/Editor.vue

@@ -1317,6 +1317,12 @@
          if (Object.keys(sdk.sdkObj).length == 0) {

            return sdk

          }

          //复制算法时检测区域不能为空

          if(!sdk.polygon_id){

            return sdk

          }

          debugger



          //多于两项算法时,算法关系不能为空

          if (sdk.rule_with_pre === '' && index != 0) {

            return sdk


 src/pages/labelMark/components/RightSide.vue

New file
@@ -0,0 +1,120 @@
<template>
  <div class="right-side">
    <div class="tool-bar">
      <div>
        <!-- <input type="color" ref="colorPicker" v-model="color"> -->
        <label for>拾色器:</label>
        <el-color-picker v-model="color" show-alpha size="mini"></el-color-picker>
      </div>
      <div style="width:250px;">
        <label for>笔触:</label>
        <el-slider v-model="dotSize" :min="1" :max="20"></el-slider>
      </div>
    </div>
    <div class="action-bar">
      <el-button type size="mini" @click="newLabel">标注</el-button>
      <el-button type size="mini" @click="isEdit=!isEdit">{{isEdit?'锁定':'编辑'}}</el-button>
    </div>
    <div class="drawboard">
      <div class="mask" v-show="isEdit" ref="editBoard">
        <div class="label" v-for="(item,index) in labels" :key="index" :style="{left:`${item.x}px`, top:`${item.y}px`}"></div>
      </div>
      <img :src="baseUrl" alt />
    </div>
    <el-dialog>
      
    </el-dialog>
  </div>
</template>

<script>
import TreeDataPool from "@/Pool/TreeData";
export default {
  data () {
    return {
      labels: [],
      color: '#79f2fb',
      dotSize: 3,
      isEdit: false,
      isNewLabel: false,
      baseUrl: ''
    }
  },
  computed: {
    
  },
  watch:{
    isEdit(n,o){
      if(n){
        this.$refs['editBoard'].addEventListener('click',(e)=>{
          this.newLabel(e);
        })
      }
    }
  },
  methods: {
    newLabel(e){
      this.labels.push({x,y});
      this.isNewLabel = true;
    }
  }
}
</script>

<style lang="scss">
.right-side {
  height: 100%;
  background: #d2dcea;
  .tool-bar {
    width: 100%;
    height: 60px;
    padding: 10px 20px;
    box-sizing: border-box;
    background: rgb(250, 250, 250);
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    > div {
      cursor: pointer;
      background: rgb(245, 245, 245);
      padding: 0 5px;
      height: 40px;
      margin: 7px;
      display: flex;
      align-items: center;
      label {
        margin-right: 10px;
        color: rgb(161, 161, 161);
      }
      .el-slider {
        width: 110px;
      }
    }
  }
  .action-bar{
    width: 960px;
    margin: auto;
    margin-bottom: 20px;
    text-align: right;
  }
  .drawboard {
    margin: auto;
    width: 960px;
    height: 540px;
    position: relative;
    background: #fff;
    box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1);
    .mask{
      position: absolute;
      background: rgba(20, 181, 255, 0.1);
      width: 100%;
      height: 100%;
    }
    img{
      width: 960px;
      height: 540px;
      background:#f0ffca;
    }
  }
}
</style>

 src/pages/labelMark/index/App.vue

New file
@@ -0,0 +1,116 @@
<template>
  <div class="column">
    <div class="column-left">
      <div class="resize-bar"></div>
      <div class="resize-line"></div>
      <div class="resize-save">
        <left-nav :appName="'Camera'" :height="screenHeight - 40"></left-nav>
      </div>
    </div>
    <div class="column-right">
      <right-side />
    </div>
  </div>
</template>
<script>
import LeftNav from "@/components/LeftNav";
import RightSide from "../components/RightSide";

export default {
  components: { LeftNav, RightSide },
  data () {
    return {
      screenHeight: 0,

    }
  },
  mounted() {
    this.screenHeight = document.documentElement.clientHeight - 20;
    window.onresize = () => {
      return (() => {
        this.screenHeight = document.documentElement.clientHeight - 20;
      })();
    };
  },
}
</script>

<style lang="scss" scoped>

.column {
  overflow: hidden;
  min-width: 1399px;
  height: 100%;
}
.column-left {
  background-color: #fff;
  position: relative;
  float: left;
  height: 100vh;
  //height: inherit;
}
.column-right {
  height: 100vh;
  background-color: #eee;
  box-sizing: border-box;
  //overflow: hidden;
  overflow-x: auto;
  overflow-y: auto;
}
.resize-save {
  position: absolute;
  top: 0;
  right: 5px;
  bottom: 0;
  left: 0;
  padding: 14px;
  overflow-x: hidden;
}
.resize-bar {
  width: 310px;
  height: inherit;
  resize: horizontal;
  cursor: ew-resize;
  opacity: 0;
  overflow: scroll;
  max-width: 500px; //设定最大拉伸长度
  min-width: 33px; //设定最小宽度
}
/* 拖拽线 */
.resize-line {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-right: 2px solid #efefef;
  border-left: 1px solid #e0e0e0;
  pointer-events: none;
}
.resize-bar:hover ~ .resize-line,
.resize-bar:active ~ .resize-line {
  border-left: 1px dashed skyblue;
}
.resize-bar::-webkit-scrollbar {
  width: 200px;
  height: inherit;
}

/* Firefox只有下面一小块区域可以拉伸 */
@supports (-moz-user-select: none) {
  .resize-bar:hover ~ .resize-line,
  .resize-bar:active ~ .resize-line {
    border-left: 1px solid #bbb;
  }
  .resize-bar:hover ~ .resize-line::after,
  .resize-bar:active ~ .resize-line::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    bottom: 0;
    right: -8px;
    // background: url(./resize.svg);
    background-size: 100% 100%;
  }
}
</style>

 src/pages/labelMark/index/api.ts

 src/pages/labelMark/index/main.ts

New file
@@ -0,0 +1,14 @@
import Vue from 'vue';
import App from './App.vue';

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import "@/assets/css/element-variables.scss";
import Mixin from "./mixins";

Vue.use(ElementUI);
Vue.mixin(Mixin);
new Vue({
  el: '#app',
  render: h => h(App)
});

 src/pages/labelMark/index/mixins.ts

New file
@@ -0,0 +1,14 @@
import TreeDataPool from "@/Pool/TreeData";

/* eslint-disable */
const onlyTreeDataPool = new TreeDataPool

const mixin = {
  data() {
    return {
      TreeDataPool: onlyTreeDataPool

    };
  },
};
export default mixin;