From ecb6cadc3f016cf9968f48e0cc77479a1e56365b Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期日, 20 十二月 2020 17:32:06 +0800
Subject: [PATCH] 标定添加关联摄像机tab,绘制区域组件参数更新
---
src/pages/labelMark/components/RightSide.vue | 831 +++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 697 insertions(+), 134 deletions(-)
diff --git a/src/pages/labelMark/components/RightSide.vue b/src/pages/labelMark/components/RightSide.vue
index e1f2177..e243da4 100644
--- a/src/pages/labelMark/components/RightSide.vue
+++ b/src/pages/labelMark/components/RightSide.vue
@@ -3,116 +3,166 @@
<div class="figure s-system-manage">
<el-tabs
id="e-basic-setting"
+ @tab-click="changeTab"
v-model="actPage"
v-loading="loading"
element-loading-text="鍔犺浇涓�"
type="border-card"
>
- <el-tab-pane label="鎽勫儚鏈烘爣娉�" name="1">
- <div class>
- <div class="action-bar">
- <div class="tool-bar">
- <div>
- <!-- <input type="color" ref="colorPicker" v-model="color"> -->
- <label for>鎷捐壊鍣�:</label>
- <el-color-picker v-model="colorPick" 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>
- <el-button
- v-if="!isEdit"
- class="drawboard-trigger"
- size="small"
- @click="editCameraData"
- icon="el-icon-edit"
- >缂栬緫</el-button>
+ <el-tab-pane label="浣嶇疆鏍囨敞" name="1">
+ <el-tabs type="border-card">
+ <el-tab-pane label="鎽勫儚鏈烘爣娉�" name="11">
+ <div class>
+ <div class="action-bar">
+ <div class="tool-bar">
+ <div>
+ <!-- <input type="color" ref="colorPicker" v-model="color"> -->
+ <label for>鎷捐壊鍣�:</label>
+ <el-color-picker v-model="colorPick" 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>
+ <el-button
+ v-if="!isEdit"
+ class="drawboard-trigger"
+ size="small"
+ @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>
+ <el-button
+ v-if="isEdit"
+ class="drawboard-trigger save"
+ size="small"
+ @click="submitInfo"
+ icon="el-icon-lock"
+ >淇濆瓨</el-button>
+ </div>
+ </div>
+ </div>
+ <div class="drawboard shadow-box">
+ <div class="mask" :class="{'edit-status-mask':isEdit}" ref="editBoard">
+ <div
+ class="label"
+ @click="editLabel(item)"
+ v-for="(item,index) in curCameraData.coords"
+ :key="index"
+ :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.y0 + 22}px;left:${curLabel.x0}px`"
+ >
+ <div class="title">鏍囨敞淇℃伅</div>
+ <div class="details">
+ <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>
+ <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 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>
+ </el-form>
+ </div>
+ </div>
</div>
</div>
- </div>
- <div class="drawboard shadow-box">
- <div class="mask" :class="{'edit-status-mask':isEdit}" ref="editBoard">
- <div
- class="label"
- @click="editLabel(item)"
- v-for="(item,index) in curCameraData.coords"
- :key="index"
- :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.y0 + 22}px;left:${curLabel.x0}px`"
- >
- <div class="title">鏍囨敞淇℃伅</div>
- <div class="details">
- <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>
+ </el-tab-pane>
+ <el-tab-pane label="瀹炴櫙鍧愭爣" name="12">
+ <div class="user-upload">
+ <div class="img-card">
+ <el-upload
+ class="upload-demo"
+ drag
+ action="https://jsonplaceholder.typicode.com/posts/"
+ :http-request="definedUpload"
+ :on-change="onChange"
+ :show-file-list="false"
+ >
+ <el-image
+ class="preview"
+ v-if="userImg"
+ :src="userImg"
+ fit="contain"
+ @mousemove="showCurPos"
+ @mouseout="isShowCurPos=false"
+ ></el-image>
+ <div class="el-upload__text">
+ 灏嗘枃浠舵嫋鍒版澶勶紝鎴�
+ <em>鐐瑰嚮涓婁紶</em>
</div>
- <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>
+ </el-upload>
+ </div>
+ <div class="info">
+ <div class="input-area">
+ <div>
+ <label for>绌洪棿瀹�:</label>
+ <el-input v-model="spaceWidth" placeholder="璇疯緭鍏ュ疄闄呯┖闂村" size="small"></el-input>
</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="sure">纭畾</el-button>
+ <div>
+ <label for>绌洪棿楂�:</label>
+ <el-input v-model="spaceHeight" placeholder="璇疯緭鍏ュ疄闄呯┖闂撮珮" size="small"></el-input>
</div>
- </el-form>
+ </div>
+ <div class="pos" v-show="isShowCurPos">
+ 褰撳墠浣嶇疆:
+ <b>{{traceX}}</b>,
+ <b>{{traceY}}</b>
+ </div>
</div>
</div>
- </div>
- </div>
+ </el-tab-pane>
+ </el-tabs>
</el-tab-pane>
- <el-tab-pane label="杩借釜瀹炴櫙鍧愭爣" name="2">
+ <el-tab-pane label="杞ㄨ抗鍥�" name="2"></el-tab-pane>
+ <!-- <el-tab-pane label="杩借釜瀹炴櫙鍧愭爣" name="2">
<div class="user-upload">
<div class="img-card">
<el-upload
@@ -155,51 +205,155 @@
</div>
</div>
</div>
+ </el-tab-pane>-->
+ <el-tab-pane label="鍏宠仈鎽勫儚鏈�" name="3">
+ <div class="tab-relation">
+ <div class="part">
+ <div class="title">
+ <span>鍏宠仈璁惧鍒嗙粍</span>
+ <el-button @click="newGroup" icon="el-icon-plus" size="mini" type="primary">鏂板缓鍒嗙粍</el-button>
+ </div>
+ <el-alert
+ type="info"
+ title="鎻愮ず:璇风偣鍑讳笂鏂�'鏂板缓鍒嗙粍'鎸夐挳寤虹珛鍒嗙粍"
+ show-icon
+ v-if="groupList.length==0"
+ ></el-alert>
+ <div class="flex-box">
+ <div
+ class="group-card"
+ :class="{'checked':group.checked}"
+ v-for="(group,index) in groupList"
+ :key="index"
+ @click="checkCurrentGroup(group)"
+ >
+ <div class="top">
+ <div class="left">
+ <span class="icon el-icon-video-camera"></span>
+ </div>
+ <div class="right">
+ <div class="name">{{group.groupName}}</div>
+ <div class="details">
+ <label>鎽勫儚鏈�:</label>
+ <span
+ class="sub"
+ v-for="(camera,index) in group.cameras"
+ :key="camera.id"
+ >{{camera.name}} {{index!==group.cameras.length-1?'/':''}}</span>
+ </div>
+ </div>
+ </div>
+ <div class="bottom">
+ <span @click.stop="editGroup(group)">缂栬緫鍒嗙粍</span>
+ <el-popconfirm title="纭畾鍒犻櫎鏀瑰垎缁勫悧?" @onConfirm="removeGroup(group)">
+ <el-button slot="reference" type="text">鍒犻櫎鍒嗙粍</el-button>
+ </el-popconfirm>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- <div class="part" v-if="groupList.length"> -->
+ <div class="part" v-if="Object.keys(curGroup)">
+ <div class="title">缁樺埗鍖哄煙(鐢ㄤ簬绠楁硶鍒嗘瀽)</div>
+ <div class="relative-partment" v-if="curGroup.cameras&&curGroup.cameras.length">
+ <div class="area-wrap" v-for="i in 2" :key="'sc'+i">
+ <slide-canvas :cameras="curGroup.cameras" @polygonDataUpdate="polygonUpdate"></slide-canvas>
+ </div>
+ </div>
+ </div>
+ <div class="part relative-config" v-if="Object.keys(curGroup)">
+ <div class="title">
+ <div class="left">
+ <span>鍏宠仈鍖哄煙閰嶇疆</span>
+ </div>
+ <div class="right" v-if="curGroup.id">
+ <el-button
+ icon="el-icon-plus"
+ size="mini"
+ type="primary"
+ @click="addRelation"
+ >娣诲姞鍏宠仈</el-button>
+ </div>
+ </div>
+ <div class="relative-list">
+ <div class="relative-item" v-for="(item,index) in relativeList" :key="index">
+ <div class="left">
+ <el-select v-model="item.sourceObj" value-key="polygonId" size="small">
+ <el-option
+ v-for="area in cameraAreas"
+ :key="area.polygonId"
+ :label="area.name"
+ :value="area"
+ ></el-option>
+ </el-select>
+ <i class="el-icon-connection"></i>
+ <el-select v-model="item.targetObj" value-key="polygonId" size="small">
+ <el-option
+ v-for="area in cameraAreas"
+ :key="area.polygonId"
+ :label="area.name"
+ :value="area"
+ ></el-option>
+ </el-select>
+ </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>
+ </div>
+ </div>
+ </div>
+ <!-- <div class="btns">
+ <el-button size="small" >鍙栨秷</el-button>
+ <el-button size="small" type="primary" @click="saveRelativeList">淇濆瓨</el-button>
+ </div>-->
+ </div>
+ </div>
</el-tab-pane>
</el-tabs>
- <!-- <el-collapse v-model="actPage" @change="chnageActPage">
- <el-collapse-item title="鎽勫儚鏈烘爣娉�" name="1">
-
- </el-collapse-item>
- <el-collapse-item title="杩借釜瀹炴櫙鍧愭爣" name="2">
- <div class="user-upload">
- <div class="img-card">
- <el-upload
- class="upload-demo"
- drag
- action="https://jsonplaceholder.typicode.com/posts/"
- :http-request="definedUpload"
- :on-change="onChange"
- :show-file-list="false"
- >
- <el-image
- class="preview"
- v-if="userImg"
- :src="userImg"
- fit="contain"
- @mousemove="showCurPos"
- @mouseout="isShowCurPos=false"
- ></el-image>
- <div class="el-upload__text">
- 灏嗘枃浠舵嫋鍒版澶勶紝鎴�
- <em>鐐瑰嚮涓婁紶</em>
- </div>
- </el-upload>
+ <el-dialog class="dialog-group" title="鏂板缓鍒嗙粍" :visible.sync="groupModelVisible">
+ <el-form :model="groupForm" ref="groupForm">
+ <el-form-item>
+ <label>鍒嗙粍鍚嶇О</label>
+ <div>
+ <el-input v-model="groupForm.groupName"></el-input>
</div>
- <div class="info" v-show="isShowCurPos">褰撳墠浣嶇疆:{{traceX}},{{traceY}}</div>
+ </el-form-item>
+ <el-form-item>
+ <label>閫夋嫨鎽勫儚鏈�</label>
+ <div>
+ <el-select v-model="groupForm.cameras" value-key="id" multiple>
+ <el-option
+ :label="camera.name"
+ :value="camera"
+ v-for="camera in cameraData"
+ :key="camera.id"
+ ></el-option>
+ </el-select>
+ </div>
+ </el-form-item>
+ <div class="btns">
+ <el-button @click="groupModelVisible=false;">鍙栨秷</el-button>
+ <el-button type="primary" @click="confirmGroupDialog">纭畾</el-button>
</div>
- </el-collapse-item>
- </el-collapse>-->
+ </el-form>
+ </el-dialog>
</div>
</div>
</template>
<script>
import { getCamerasByServer } from '@/api/pollConfig';
-import { getCameraMarks, updateCameraMarks } from '@/api/camera';
+import { getCameraMarks, updateCameraMarks, findCameraGroups, saveCameraGroupInfo, delCameraGroup } from '@/api/camera';
+import { getSearchList } from '@/api/search';
import TreeDataPool from "@/Pool/TreeData";
import { isNonnegativeInteger } from '@/scripts/validate';
+import { getAllPolygon, saveRelationPolygon, findByCamGroup, findByGroup, delRelation } from '@/api/polygon';
+import SlideCanvas from './SlideCanvas';
+
export default {
+ components: { SlideCanvas },
data () {
return {
labels: [],
@@ -244,7 +398,22 @@
curCameraData: {
cameraId: '',
coords: []
- }
+ },
+ relativeCameras: [],
+ relativeList: [],
+ cameraAreas: [],
+ groupModelVisible: false,
+ groupList: [],
+ curGroup: {},
+ groupForm: {
+ groupName: '',
+ cameras: []
+ },
+ groupCameras: [],
+ groupCamera: {
+
+ },
+ cameraAndPolygonData: []
}
},
computed: {
@@ -268,6 +437,12 @@
},
deep: true
},
+ 'TreeDataPool.selectedNodes': {
+ handler (n, o) {
+
+ },
+ deep: true
+ },
isEdit (n, o) {
if (n) {
this.$refs['editBoard'].addEventListener('click', this.bindListen);
@@ -277,18 +452,248 @@
}
},
methods: {
+ polygonUpdate(){
+ debugger
+ this.getAllGroups();
+ },
+ delRelation (item) {
+ let _this = this;
+ delRelation(item.id).then(res => {
+ if (res.success) {
+ this.$notify({
+ type: 'success',
+ message: res.data
+ });
+ _this.findRelationByGroup();
+ }
+ })
+ },
+ findRelationByGroup () {
+ let _this = this;
+ findByGroup({ groupId: this.curGroup.id }).then(res => {
+
+ _this.relativeList = res.data.map(relation => {
+ let obj = { sourceObj: {}, targetObj: {} };
+ obj.sourceObj.cameraId = relation.source_camera_id;
+ obj.sourceObj.polygonId = relation.source_polygon_id;
+ obj.targetObj.cameraId = relation.target_camera_id;
+ obj.targetObj.polygonId = relation.target_polygon_id;
+ obj.sourceObj.name = relation.source_polygon.name;
+ obj.targetObj.name = relation.target_polygon.name;
+ obj.id = relation.id;
+ return obj;
+ })
+ })
+ },
+ saveRelativePolygon (item) {
+ let _this = this;
+ let params = {
+ groupId: this.curGroup.id,
+ source_camera_id: item.sourceObj.cameraId,
+ target_camera_id: item.targetObj.cameraId,
+ source_polygon_id: item.sourceObj.polygonId,
+ target_polygon_id: item.targetObj.polygonId,
+ id: item.id || ''
+ }
+
+ saveRelationPolygon(params).then(res => {
+ if (res.success) {
+ this.$notify({
+ type: 'success',
+ message: '淇濆瓨鎴愬姛',
+ });
+ _this.findRelationByGroup()
+ }
+ })
+ },
+ saveRelativeList () {
+ let params = {
+ groupId: this.curGroup.id,
+
+ }
+ //saveRelationPolygon().then()
+ },
+ async findPolygonByIds (cameras) {
+ for (var i = 0; i < cameras.length; i++) {
+ let res = await getAllPolygon({ cameraId: cameras[i].id });
+ cameras[i].canvasData = res.data;
+ }
+ return cameras
+ },
+
+ async getAllGroupInfo () {
+ let _this = this;
+ let res = await findCameraGroups();
+ let groupArr = res.data.map(item => {
+ let obj = {}; //group
+ obj.groupName = item.groupName;
+ obj.id = item.id;
+ let cameras = []; //cameras
+ item.cameraIds.forEach(id => {
+ let camera = {};
+ _this.cameraData.find(one => {
+ if (one.id == id) {
+ camera.name = one.name;
+ camera.id = id;
+ }
+ });
+ cameras.push(camera)
+ });
+ //cameras [{id,name}]
+ obj.cameras = cameras;
+ return obj;
+
+ });
+ return groupArr;
+ },
+ // async getAllGroups () {
+ // let _this = this;
+ // let groups = await this.getAllGroupInfo();
+ // let promiseArr = [];
+ // for (var i = 0; i < groups.length; i++) {
+ // let pro = new Promise(resolve => {
+ // resolve(_this.findPolygonByIds(groups[i].cameras))
+ // });
+ // promiseArr.push(pro)
+ // }
+ // Promise.allSettled(promiseArr).then(camerasArr => {
+
+ // for (var i = 0; i < camerasArr.length; i++) {
+ // groups[i].cameras = camerasArr[i].value
+ // }
+ // _this.groupList = groups;
+ // //閫変腑绗竴涓�
+ // _this.checkCurrentGroup(_this.groupList[0]);
+ // })
+ // },
+ async getAllGroups(){
+ let _this = this;
+ let groups = await this.getAllGroupInfo();
+ for(var i = 0; i< groups.length; i++){
+ groups[i].cameras = await _this.findPolygonByIds(groups[i].cameras)
+ }
+ this.groupList = groups
+ //閫変腑绗竴涓�
+ this.checkCurrentGroup(_this.groupList[0]);
+ },
+
+ addRelation () {
+ let obj = { cameraArea1: '', cameraArea2: '' };
+ this.relativeList.push(obj)
+ },
+
+ editGroup (group) {
+ this.groupModelVisible = true;
+ //this.$refs['groupForm'].resetFields();
+ this.groupForm = group;
+ },
+ removeGroup (group) {
+ let _this = this;
+ delCameraGroup(group.id).then(res => {
+ _this.getAllGroups()
+ })
+ },
+ checkCurrentGroup (group) {
+ this.groupList.forEach(group => {
+ group.checked = false;
+ })
+ this.curGroup = group;
+ this.curGroup.checked = true;
+ this.findRelationByGroup();
+ //鏌ヨ绗竴涓垎缁勪笅鎽勫儚鏈哄尯鍩�
+ findByCamGroup({ groupId: group.id }).then(res => {
+ let tempArr = [];
+ res.data.forEach(camera => {
+ let cameraArea = [];
+ camera.polygon.forEach(item => {
+ let area = {};
+ area.name = camera.camera_name + '' + item.name;
+ area.cameraId = camera.camera_id;
+ area.polygonId = item.id;
+ cameraArea.push(area);
+ });
+ camera.rect.forEach(item => {
+ let area = {};
+ area.name = camera.camera_name + '' + item.name;
+ area.cameraId = camera.camera_id;
+ area.polygonId = item.id;
+ cameraArea.push(area);
+ });
+ tempArr = tempArr.concat(cameraArea)
+ });
+ this.cameraAreas = tempArr;
+ console.log(this.cameraAreas)
+ })
+ },
+ confirmGroupDialog () {
+ //璇锋眰淇濆瓨鏂板缓鎴栫紪杈戝垎缁�
+ let _this = this;
+ let params = {
+ cameraIds: [],
+ groupName: '',
+ id: ''
+ };
+ if (!this.groupForm.groupName.trim()) {
+ this.$notify({
+ type: 'warning',
+ message: '璇疯緭鍏ュ垎缁勫悕绉�'
+ });
+ return
+ }
+ if (this.groupForm.cameras.length < 2) {
+ this.$notify({
+ type: 'warning',
+ message: '璇烽�夋嫨鑷冲皯涓や釜鎽勫儚鏈�'
+ });
+ return
+ }
+ params.groupName = this.groupForm.groupName;
+ params.id = this.groupForm.id || '';
+ this.groupForm.cameras.forEach(camera => {
+ params.cameraIds.push(camera.id);
+ //鏍规嵁鍒嗙粍鍐呮憚鍍忔満id鏌ュ悇鑷尯鍩�
+ getAllPolygon({ cameraId: camera.id }).then(res => {
+ _this.groupCameras.push(res.data);
+ }).catch(e => {
+ console.log(e)
+ });
+ })
+ //this.groupList.push(this.groupForm);
+ saveCameraGroupInfo(params).then(res => {
+ _this.getAllGroups();
+ })
+ this.groupModelVisible = false;
+
+ },
+ newGroup () {
+ this.groupModelVisible = true;
+ this.$nextTick(() => {
+ this.$refs['groupForm'].resetFields();
+ })
+ this.groupForm = {
+ groupName: '',
+ cameras: []
+ }
+
+ },
+ changeTab () {
+ if (this.actPage == '1') {
+ this.$parent.$children[0].$el.parentNode.parentElement.style.display = 'block';
+ } else {
+ this.$parent.$children[0].$el.parentNode.parentElement.style.display = 'none';
+ }
+ },
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));
-
+
}
console.log(_this.curCameraData.coords)
this.$refs['labelForm'].clearValidate();
@@ -350,14 +755,28 @@
}
},
getAllCameraData () {
+ let _this = this;
getCamerasByServer().then(res => {
if (res.success) {
- this.cameraData = res.data;
+ _this.cameraData = res.data;
+ _this.getAllGroups();
}
}).catch(e => {
console.log(e)
})
},
+ // async getAllCameraData () {
+ // let res = await getCamerasByServer();
+ // this.cameraData = res.data;
+ // let tempArr = [];
+ // this.cameraData.forEach(camera=>{
+ // getAllPolygon({ cameraId: camera.id }).then(res=>{
+ // tempArr.push(res.data);
+ // })
+ // });
+ // this.cameraAndPolygonData = tempArr;
+ // console.log(this.cameraAndPolygonData)
+ // },
bindListen (e) {
this.newLabel(e);
},
@@ -374,7 +793,7 @@
x1: '',
y1: ''
};
- target.id = 'n'+(this.curCameraData.coords.length-1);
+ target.id = 'n' + (this.curCameraData.coords.length - 1);
//this.labels.push(target);
this.curCameraData.coords.push(target);
this.curLabel = target;
@@ -393,7 +812,7 @@
cancle () {
this.isShowPop = false;
//濡傛灉鏄湭淇濆瓨杩囩殑label鐩存帴鍒犻櫎(鏈繚瀛樼殑灏辨槸labels鏁扮粍涓渶鍚庝竴涓�)
- if (!this.curLabel.id) {
+ if (this.curLabel.id.startsWith('n')) {
//this.labels.pop();
this.curCameraData.coords.pop();
}
@@ -420,6 +839,7 @@
.el-tabs__content {
background: #d2dcea;
height: calc(100vh - 85px);
+ overflow-y: auto;
}
}
.tool-bar {
@@ -633,6 +1053,149 @@
// height: 100%;
}
}
+ .tab-relation {
+ .el-alert--info {
+ background: rgba(230, 247, 255, 1);
+ border-color: rgba(145, 213, 255, 1);
+ color: #666;
+ .el-alert__icon.el-icon-info {
+ color: #1890ff;
+ }
+ }
+ .title {
+ text-align: left;
+ font-size: 15px;
+ line-height: 40px;
+ .el-button {
+ margin-left: 14px;
+ }
+ }
+ .group-card {
+ background: #fff;
+ width: 293px;
+ height: 153px;
+ margin-right: 10px;
+ box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+ border: 1px solid transparent;
+ &.checked {
+ border-color: #1890ff;
+ }
+ .top {
+ height: 104px;
+ display: flex;
+ padding-left: 20px;
+ padding-top: 20px;
+ box-sizing: border-box;
+ //align-items: center;
+ .right {
+ text-align: left;
+ padding-left: 14px;
+ }
+ .icon {
+ font-size: 40px;
+ }
+ .name {
+ font-size: 16px;
+ margin-bottom: 10px;
+ font-weight: bold;
+ }
+ .details {
+ display: flex;
+ flex-wrap: wrap;
+ label {
+ width: 46px;
+ }
+ .sub {
+ }
+ }
+ }
+ .bottom {
+ border-top: 1px solid #e9e9e9;
+ height: 48px;
+ line-height: 48px;
+ background: #f7f9fa;
+ position: relative;
+ display: flex;
+ &:after {
+ content: '';
+ position: absolute;
+ font-size: 0;
+ width: 1px;
+ height: 14px;
+ background: #0000006d;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ span {
+ cursor: pointer;
+ width: 50%;
+ font-size: 14px;
+ color: #0000006d;
+ }
+ }
+ }
+ .part {
+ margin-bottom: 20px;
+ .relative-partment {
+ width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ .area-wrap {
+ width: 576px;
+ }
+ }
+ }
+ .relative-config {
+ width: 700px;
+ .title {
+ display: flex;
+ justify-content: space-between;
+ }
+ .relative-list {
+ .relative-item {
+ width: 680px;
+ height: 48px;
+ padding-left: 20px;
+ background: #ecf2f5;
+ margin-bottom: 6px;
+ display: flex;
+ align-items: center;
+ .left {
+ width: 650px;
+ text-align: left;
+ }
+ .right {
+ display: flex;
+ align-items: center;
+ }
+ i {
+ font-size: 20px;
+ padding: 0 10px;
+ cursor: pointer;
+ }
+ }
+ }
+ }
+ }
+ .dialog-group {
+ .el-form {
+ .el-form-item__content {
+ display: flex;
+ label {
+ width: 80px;
+ text-align: left;
+ }
+ & > div {
+ flex: 1;
+ .el-select {
+ width: 100%;
+ }
+ }
+ }
+ }
+ }
}
.el-input__inner:focus {
outline: none;
--
Gitblit v1.8.0