From f857a9130f97694c756dc8913e900bf9a74563ef Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期五, 23 十月 2020 09:41:49 +0800
Subject: [PATCH] 新增标注应用demo,场景配置添加区域判空检测(复制算法可能导致区域为空)
---
src/pages/cameraAccess/components/scene/Editor.vue | 6 +
src/pages/labelMark/components/RightSide.vue | 120 ++++++++++++++++++++++++
src/pages/labelMark/index/main.ts | 14 ++
src/pages/labelMark/index/mixins.ts | 14 ++
src/pages/labelMark/index/App.vue | 116 +++++++++++++++++++++++
src/pages/labelMark/index/api.ts | 0
6 files changed, 270 insertions(+), 0 deletions(-)
diff --git a/src/pages/cameraAccess/components/scene/Editor.vue b/src/pages/cameraAccess/components/scene/Editor.vue
index 2e8e7f5..a8e8fff 100644
--- a/src/pages/cameraAccess/components/scene/Editor.vue
+++ b/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
diff --git a/src/pages/labelMark/components/RightSide.vue b/src/pages/labelMark/components/RightSide.vue
new file mode 100644
index 0000000..2839f63
--- /dev/null
+++ b/src/pages/labelMark/components/RightSide.vue
@@ -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>
\ No newline at end of file
diff --git a/src/pages/labelMark/index/App.vue b/src/pages/labelMark/index/App.vue
new file mode 100644
index 0000000..fc31c39
--- /dev/null
+++ b/src/pages/labelMark/index/App.vue
@@ -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>
diff --git a/src/pages/labelMark/index/api.ts b/src/pages/labelMark/index/api.ts
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/pages/labelMark/index/api.ts
diff --git a/src/pages/labelMark/index/main.ts b/src/pages/labelMark/index/main.ts
new file mode 100644
index 0000000..a8cc111
--- /dev/null
+++ b/src/pages/labelMark/index/main.ts
@@ -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)
+});
\ No newline at end of file
diff --git a/src/pages/labelMark/index/mixins.ts b/src/pages/labelMark/index/mixins.ts
new file mode 100644
index 0000000..feda309
--- /dev/null
+++ b/src/pages/labelMark/index/mixins.ts
@@ -0,0 +1,14 @@
+import TreeDataPool from "@/Pool/TreeData";
+
+/* eslint-disable */
+const onlyTreeDataPool = new TreeDataPool
+
+const mixin = {
+ data() {
+ return {
+ TreeDataPool: onlyTreeDataPool
+
+ };
+ },
+};
+export default mixin;
\ No newline at end of file
--
Gitblit v1.8.0