From 3aaf1dcf015312cdf987b94098005b0f31237a25 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期三, 23 十二月 2020 15:27:01 +0800
Subject: [PATCH] 移除labelMark
---
/dev/null | 14 --------------
public/apps.json | 23 -----------------------
2 files changed, 0 insertions(+), 37 deletions(-)
diff --git a/public/apps.json b/public/apps.json
index 3467881..3117b98 100644
--- a/public/apps.json
+++ b/public/apps.json
@@ -370,29 +370,6 @@
"progressMsg": ""
},
{
- "id": "fa5434ee-70cf-4e22-8a06-c17429fbb70b",
- "name": "鐩告満鏍囧畾",
- "package": "labelMark",
- "type": "2",
- "url": "/view/labelMark/",
- "title": "鐩告満鏍囧畾",
- "width": 1500,
- "height": 750,
- "iconBlob": "",
- "icon": "../../images/app-mid/360.png",
- "version": "1.0.0",
- "create_time": "2020-10-09 14:00:08",
- "create_by": "",
- "update_time": "",
- "update_by": "",
- "isDelete": 0,
- "isDefault": false,
- "remoteVersion": "",
- "installed": true,
- "isUpgrade": false,
- "progressMsg": ""
- },
- {
"id": "fa5674ee-70cf-4e22-8a06-c17429fbb70b",
"name": "鍏ㄦ櫙杩借釜",
"package": "panoramicView",
diff --git a/src/pages/labelMark-copy/components/RightSide.vue b/src/pages/labelMark-copy/components/RightSide.vue
deleted file mode 100644
index a6a86c1..0000000
--- a/src/pages/labelMark-copy/components/RightSide.vue
+++ /dev/null
@@ -1,986 +0,0 @@
-<template>
- <div class="right-side">
-
- <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">
- <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>
- </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>
- </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>
- </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>
- <label for>绌洪棿楂�:</label>
- <el-input v-model="spaceHeight" placeholder="璇疯緭鍏ュ疄闄呯┖闂撮珮" size="small"></el-input>
- </div>
- </div>
- <div class="pos" v-show="isShowCurPos">
- 褰撳墠浣嶇疆:
- <b>{{traceX}}</b>,
- <b>{{traceY}}</b>
- </div>
- </div>
- </div>
- </el-tab-pane>
- </el-tabs>
- </el-tab-pane>
- <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
- 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>
- </div>
- <div class="info">
- <div class="input-area">
- <div>
- <label for>绌洪棿瀹�:</label>
- <el-input v-model="spaceWidth" placeholder="璇疯緭鍏ュ疄闄呯┖闂村" size="small"></el-input>
- </div>
- <div>
- <label for>绌洪棿楂�:</label>
- <el-input v-model="spaceHeight" placeholder="璇疯緭鍏ュ疄闄呯┖闂撮珮" size="small"></el-input>
- </div>
- </div>
- <div class="pos" v-show="isShowCurPos">
- 褰撳墠浣嶇疆:
- <b>{{traceX}}</b>,
- <b>{{traceY}}</b>
- </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"
- 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.name}}</div>
- <div class="details">
- 鎽勫儚鏈�:
- <span
- class="sub"
- v-for="camera in group"
- :key="camera.id"
- >{{camera.name}}</span>
- </div>
- </div>
- </div>
- <div class="bottom">
- <span @click.stop="editGroup(group)">缂栬緫鍒嗙粍</span>
- <span @click.stop="removeGroup(group)">鍒犻櫎鍒嗙粍</span>
- </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"></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">
- <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.cameraArea1" size="small">
- <el-option></el-option>
- </el-select>
- <i class="el-icon-connection"></i>
- <el-select v-model="item.cameraArea2" size="small">
- <el-option></el-option>
- </el-select>
- </div>
- <div class="right">
- <div class="btn-del" @click="delRelation(item)">
- <i class="el-icon-delete"></i>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </el-tab-pane>
- </el-tabs>
- <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.name"></el-input>
- </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-form>
- </el-dialog>
- </div>
- </div>
-</template>
-
-<script>
-import { getCamerasByServer } from '@/api/pollConfig';
-import { getCameraMarks, updateCameraMarks } from '@/api/camera';
-import { getSearchList } from '@/api/search';
-import TreeDataPool from "@/Pool/TreeData";
-import { isNonnegativeInteger } from '@/scripts/validate';
-import { getAllPolygon } from '@/api/polygon';
-import SlideCanvas from './SlideCanvas';
-
-export default {
- components: { SlideCanvas },
- data () {
- return {
- labels: [],
- colorPick: '#79f2fb',
- dotSize: 3,
- isEdit: false,
- isShowPop: false,
- isNewLabel: false,
- // curLabel: {
- // id: '',
- // posX: '',
- // posY: '',
- // x: '',
- // y: ''
- // },
- curLabel: {
- id: '',
- x1: '',
- y1: '',
- x0: '',
- y0: ''
- },
- rules: {
- x1: [
- { validator: isNonnegativeInteger, trigger: 'change' }
- ],
- y1: [
- { validator: isNonnegativeInteger, trigger: 'change' }
- ]
- },
- baseUrl: '',
- snapshot_url: '',
- userImg: '',
- cameraData: [],
- traceX: 0,
- traceY: 0,
- isShowCurPos: false,
- actPage: '1',
- loading: false,
- spaceWidth: '',
- spaceHeight: '',
- curCameraData: {
- cameraId: '',
- coords: []
- },
- relativeCameras: [],
- relativeList: [],
- groupModelVisible: false,
- groupList: [],
- curGroup: {},
- groupForm: {
- name: '',
- cameras: []
- },
- groupCameras: [],
- groupCamera: {
-
- },
-
- }
- },
- computed: {
-
- },
- mounted () {
- this.getAllCameraData();
- //mock鍥炴樉鏍囨敞
- setTimeout(() => {
- 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) {
- let curCamera = this.cameraData.find(item => item.id == n.id);
- //璁剧疆鎽勫儚鏈哄簳鍥�
- this.snapshot_url = curCamera.snapshot_url;
- this.findCameraMarks(n.id);
- },
- deep: true
- },
- 'TreeDataPool.selectedNodes': {
- handler (n, o) {
- debugger
- if (n.length >= 2) {
-
-
- }
- },
- deep: true
- },
- isEdit (n, o) {
- if (n) {
- this.$refs['editBoard'].addEventListener('click', this.bindListen);
- } else {
- this.$refs['editBoard'].removeEventListener('click', this.bindListen);
- }
- }
- },
- methods: {
- addRelation () {
- let obj = { cameraArea1: '', cameraArea2: '' };
- this.relativeList.push(obj)
- },
- swiperOption () {
- return {
- slidesPerView: 1,
- spaceBetween: 0,
- pagination: {
- el: ".swiper-pagination",
- clickable: true
- },
- navigation: {
- nextEl: ".swiper-next-border",
- prevEl: ".swiper-pre-border"
- },
- observer: true,//淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
- observeParents: true,//淇敼swiper鐨勭埗鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
- }
- },
- editGroup (gruop) {
- this.groupModelVisible = true;
- debugger
- this.$refs['groupForm'].resetFields();
- },
- removeGroup (group) {
-
- },
- checkCurrentGroup (group) {
- debugger
- this.curGroup = group;
- },
- confirmGroupDialog () {
- //璇锋眰淇濆瓨鏂板缓鎴栫紪杈戝垎缁�
- let _this = this;
- this.groupForm.cameras.forEach(camera => {
- getAllPolygon({ cameraId: camera.id }).then(res => {
- _this.groupCameras.push(res.data);
- }).catch(e => {
- console.log(e)
- });
- })
- this.groupList.push(this.groupForm);
-
- this.groupModelVisible = false;
- //鏍规嵁鍒嗙粍鍐呮憚鍍忔満id鏌ュ悇鑷尯鍩�
- },
- newGroup () {
- this.groupModelVisible = true;
- this.$nextTick(() => {
- this.$refs['groupForm'].resetFields();
- })
- },
- 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();
- }
- });
- },
- //鑾峰彇鎽勫儚鏈烘爣娉�
- 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 () {
-
- },
- showCurPos (e) {
- console.log(e);
- this.isShowCurPos = true;
- this.traceX = e.offsetX;
- this.traceY = e.offsetY;
- },
- onChange (file, fileList) {
- fileList = [file]
- this.isShowCurPos = false;
- // this.traceX = e.offsetX;
- // this.traceY = e.offsetY;
- //fileList.push(file)
- },
- definedUpload (params) {
- let _file = params.file
- let fileReader = new FileReader()
- fileReader.onload = () => {
- this.userImg = fileReader.result
- }
- if (_file) {
- fileReader.readAsDataURL(_file)
- }
- },
- getAllCameraData () {
- getCamerasByServer().then(res => {
- if (res.success) {
- this.cameraData = res.data;
- debugger
- }
- }).catch(e => {
- console.log(e)
- })
- },
- bindListen (e) {
- this.newLabel(e);
- },
- newLabel (e) {
- console.log('鐐瑰嚮浜嗙敾鏉�')
- if (this.isShowPop) return;
- //鑾峰彇榧犳爣鐩稿浜庣敾鏉跨殑瀹氫綅
- console.log('鑾峰彇褰撳墠瀹氫綅淇℃伅');
- this.$refs['labelForm'].resetFields();
- let target = {
- id: '',
- x0: e.offsetX,
- y0: e.offsetY,
- x1: '',
- y1: ''
- };
- target.id = 'n' + (this.curCameraData.coords.length - 1);
- //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.curCameraData.coords.pop();
- }
- },
- deleteLabel () {
- if (this.curLabel.id) {
- 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>
-
-<style lang="scss">
-.right-side {
- background: #d2dcea;
-
- .figure {
- .el-tabs__content {
- background: #d2dcea;
- height: calc(100vh - 85px);
- }
- }
- .tool-bar {
- //width: 40px;
- height: 100%;
- padding: 10px 0 10px 20px;
- box-sizing: border-box;
- //background: rgb(250, 250, 250);
- background: rgba(26, 45, 74, 0.6);
- //margin-bottom: 40px;
- display: flex;
- align-items: center;
- justify-content: flex-end;
- > div {
- cursor: pointer;
- //background: rgba(245, 245, 245, 0.3);
- padding: 0 5px;
- height: 40px;
- margin: 7px;
- display: flex;
- align-items: center;
- label {
- margin-right: 10px;
- color: rgb(161, 161, 161);
- color: #fff;
- }
- .el-slider {
- width: 110px;
- }
- }
- }
- .shadow-box {
- box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1);
- }
- .action-bar {
- width: 960px;
- margin: auto;
- margin-top: 30px;
- //margin-bottom: 20px;
- text-align: right;
- .drawboard-trigger {
- background: transparent;
- color: #fff;
- border-color: rgba(255, 255, 255, 0.3);
- }
- }
- .drawboard {
- margin: auto;
- width: 960px;
- height: 540px;
- margin-bottom: 130px;
- position: relative;
- //background: #fff;
- background: #f0ffca;
- //box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1);
- .mask {
- position: absolute;
- background: transparent;
- width: 100%;
- height: 100%;
- overflow: hidden;
- &.edit-status-mask {
- background: rgba(20, 181, 255, 0.1);
- }
- .label {
- position: absolute;
- z-index: 2;
- border-radius: 50%;
- }
- }
- img {
- width: 960px;
- height: 540px;
- background: #f0ffca;
- }
- .right-panel {
- width: 150px;
- height: 100%;
- background: rgba(26, 45, 74, 0.7);
- }
- .popBox {
- position: absolute;
- z-index: 99;
- padding: 14px;
- border-radius: 3px;
- color: #fff;
- background: rgba(26, 45, 74, 0.7);
- .title {
- font-weight: bold;
- text-align: left;
- font-size: 15px;
- margin-bottom: 14px;
- letter-spacing: 2px;
- }
- .details {
- .detail-item {
- display: flex;
- margin: 5px 0;
- label {
- color: #a9a9a9;
- width: 65px;
- display: inline-block;
- }
- .left {
- width: 110px;
- text-align: left;
- line-height: 28px;
- .fix-width {
- display: inline-block;
- width: 23px;
- }
- }
- .right {
- width: 160px;
- }
- .devide {
- width: 10px;
- height: 1px;
- background: #a9a9a9;
- 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%;
- }
- }
- }
- }
- .user-upload {
- margin: auto;
- padding: 50px;
- display: flex;
- .info {
- margin-left: 20px;
- margin-top: 20px;
- text-align: left;
- font-size: 15px;
- .input-area {
- width: 300px;
- label {
- width: 80px;
- color: rgba(39, 68, 111, 0.67);
- }
- > div {
- display: flex;
- align-items: center;
- height: 40px;
- }
- }
- .pos {
- margin-top: 10px;
- text-align: left;
- color: rgba(39, 68, 111, 0.67);
- b {
- font-style: italic;
- }
- //color: #4966b7
- }
- }
- .img-card {
- }
- .upload-demo,
- .el-upload {
- height: 100%;
- width: 100%;
- margin: 0 auto;
- }
- .upload-demo .el-upload__input {
- visibility: hidden;
- }
- .upload-demo .el-upload-dragger {
- width: 100%;
- height: 90%;
- width: 962px;
- height: 542px;
- margin: 20px 0 0;
- background: transparent;
- /* border: none; */
- //position: relative;
- overflow: visible;
- }
- .upload-demo .el-upload__text {
- position: absolute;
- top: -24px;
- left: 50%;
- margin-left: -91px;
- }
- .upload-demo .preview {
- object-fit: contain;
- //position: relative;
- // width: 100%;
- // height: 100%;
- }
- .upload-demo .preview img {
- // position: absolute;
- // top: 50%;
- // left: 50%;
- // transform: translate(-50%, -50%);
- // width: 100%;
- // 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: 152px;
- box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
- .top {
- height: 104px;
- display: flex;
- padding-left: 20px;
- align-items: center;
- .icon {
- font-size: 40px;
- }
- .name {
- font-size: 16px;
- padding-left: 14px;
- font-weight: bold;
- }
- }
- .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;
- }
- 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;
- border-color: rgba(42, 56, 93, 71%) !important;
-}
-.el-upload-dragger:hover {
- border-color: rgba(42, 56, 93, 71%) !important;
-}
-</style>
\ No newline at end of file
diff --git a/src/pages/labelMark-copy/components/SlideCanvas.vue b/src/pages/labelMark-copy/components/SlideCanvas.vue
deleted file mode 100644
index 71821f4..0000000
--- a/src/pages/labelMark-copy/components/SlideCanvas.vue
+++ /dev/null
@@ -1,225 +0,0 @@
-<template>
- <div class="swiper-box">
- <p class="task-tip" v-if="cameras.length == 0 "></p>
- <swiper
- ref="cameraSwiper"
- v-if="cameras.length>=1"
- :options="swiperOption"
- class="swiper-box-container"
- >
- <swiper-slide v-for="camera in cameras" :key="camera.id+'s'">
- <div class="swiper-draw-box-title">
- <b>{{camera.name}}</b>
- <b style="margin-left:14px;">缁樺埗鍖哄煙</b>
- <span
- class="el-dropdown-link"
- @click="drawBaseImg(camera.id)"
- style="position: relative;top: 5px; cursor:pointer"
- >
- <i class="iconfont iconbianji1" style="font-size: 28px; "></i>
- </span>
- </div>
- <polygon-canvas
- class="polygon-canvas"
- :ref="`polygonCanvas_${camera.id}`"
- :snapshot_url="camera.snapshot_url"
- :canvasDataShow="camera.canvasData"
- :canvasWidth="576"
- :canvasHeight="324"
- ></polygon-canvas>
- </swiper-slide>
- </swiper>
- <div class="swiper-pre-border" slot="button-prev" @click="pre" >
- <div class="icon-btn" >
- <i class="iconfont iconzuo"></i>
- </div>
- </div>
- <div class="swiper-next-border" slot="button-next" @click="next">
- <div class="icon-btn" >
- <i class="iconfont iconyou1"></i>
- </div>
- </div>
- <!-- <div class="swiper-pre-border" slot="button-prev" @click="pre" >
- <div class="icon-btn" >
- <i class="iconfont iconzuo"></i>
- </div>
- </div>
- <div class="swiper-next-border" slot="button-next" @click="next">
- <div class="icon-btn" >
- <i class="iconfont iconyou1"></i>
- </div>
- </div> -->
- </div>
-</template>
-
-<script>
-import { chunkArr } from '@/scripts/util';
-import PolygonCanvas from '@/components/canvas';
-
-export default {
- //cameras: [{ id: '',snapshot_url:'', canvasData: {} }]
- props: [
- 'cameras',
- //'swiperOption'
- ],
- watch: {
- cameras: {
- handler (n, o) {
- debugger
- },
- deep: true
- }
- },
- components: { PolygonCanvas },
- data () {
- return {
- swiperOption: this.newOption(),
- //mySwiper: {}
- }
- },
- computed: {
- swiper () {
- return this.$refs['cameraSwiper'].swiper
- }
- },
- mounted () {
- debugger
- //this.mySwiper = this.$refs.sceneSwiper.swiper;
- console.log(this.swiper)
- },
- methods: {
- newOption () {
- return {
- slidesPerView: 1,
- spaceBetween: 0,
- pagination: {
- el: ".swiper-pagination",
- clickable: true
- },
- observer: true,//淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
- observeParents: true,//淇敼swiper鐨勭埗鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
- }
- },
-
- pre () {
- this.swiper.activeIndex--
- this.swiper.slideTo(this.swiper.activeIndex)
- },
- next () {
- this.swiper.activeIndex++
- this.swiper.slideTo(this.swiper.activeIndex)
- },
- drawBaseImg (id) {
- this.$refs[`polygonCanvas_${id}`][0].showModal();
- }
- }
-};
-</script>
-
-<style lang="scss">
-.icon {
- width: 1em;
- height: 1em;
- vertical-align: -0.15em;
- fill: currentColor;
- overflow: hidden;
-}
-.task-tip {
- font-family: PingFangSC-Regular;
- font-size: 12px;
- color: #cccccc;
- margin-top: 10%;
-}
-.swiper-box {
- position: relative;
-}
-.swiper-pre-border,
-.swiper-next-border {
- width: 40px;
- height: 40px;
- position: absolute;
- background: #8888;
- top: 50%;
- margin-top: -20px;
- z-index: 99;
- border-radius: 4em;
- outline: none;
- .icon-btn {
- color: rgb(255, 255, 255);
- text-align: center;
- line-height: 38px;
- cursor: pointer;
- }
-}
-.swiper-pre-border {
- left: 10px;
-}
-.swiper-pre-border:hover {
- background: #666;
-}
-.swiper-next-border {
- right: 10px;
-}
-.swiper-next-border:hover {
- background: #666;
-}
-.swiper-draw-box-title {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 24px;
- b {
- font-size: 14px;
- }
-}
-.wrap-box {
- width: 100%;
- display: inline-block;
- .inner {
- width: 90%;
- box-sizing: border-box;
- position: relative;
- font-size: 14px;
- padding: 7px 0 48px;
- transition: all 1s;
- background: #ffffff;
- border: 1px solid #e2e2e2;
- box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
- border-radius: 4px;
- margin: auto;
- &:hover {
- .mask {
- display: block;
- }
- }
- .mask {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.65);
- backdrop-filter: blur(1px) brightness(100%);
- text-align: center;
- z-index: 1;
- border-radius: 3px;
- display: none;
- .tool {
- position: absolute;
- top: 49%;
- left: 50%;
- transform: translate(-50%, -50%);
- i {
- font-size: 50px;
- }
- i:nth-of-type(1) {
- margin-right: 30px;
- }
- i:nth-of-type(2) {
- color: red;
- }
- }
- }
- }
-}
-</style>
\ No newline at end of file
diff --git a/src/pages/labelMark-copy/index/App.vue b/src/pages/labelMark-copy/index/App.vue
deleted file mode 100644
index afbfc81..0000000
--- a/src/pages/labelMark-copy/index/App.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<template>
- <div class="column">
- <!-- <div class="column-left" ref="leftTree">
- <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 RightSide from "../components/RightSide";
-import TreeDataPool from "@/Pool/TreeData";
-export default {
- components: { RightSide },
- data () {
- return {
- screenHeight: 0,
- }
- },
- created(){
- this.TreeDataPool.multiple = true;
- },
- 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: #f5f5f5;
- 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-copy/index/main.ts b/src/pages/labelMark-copy/index/main.ts
deleted file mode 100644
index b9b1993..0000000
--- a/src/pages/labelMark-copy/index/main.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-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 VueAwesomeSwiper from "vue-awesome-swiper";
-import "swiper/dist/css/swiper.css";
-import Mixin from "./mixins";
-
-Vue.use(ElementUI);
-Vue.use(VueAwesomeSwiper as any);
-Vue.mixin(Mixin);
-new Vue({
- el: '#app',
- render: h => h(App)
-});
\ No newline at end of file
diff --git a/src/pages/labelMark-copy/index/mixins.ts b/src/pages/labelMark-copy/index/mixins.ts
deleted file mode 100644
index feda309..0000000
--- a/src/pages/labelMark-copy/index/mixins.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-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
diff --git a/src/pages/labelMark/components/RightSide-COPY.vue b/src/pages/labelMark/components/RightSide-COPY.vue
deleted file mode 100644
index a846575..0000000
--- a/src/pages/labelMark/components/RightSide-COPY.vue
+++ /dev/null
@@ -1,862 +0,0 @@
-<template>
- <div class="right-side">
- <div class="figure s-system-manage">
- <el-tabs
- id="e-basic-setting"
- v-model="actPage"
- v-loading="loading"
- element-loading-text="鍔犺浇涓�"
- type="border-card"
- >
- <el-tab-pane label="鎽勫儚鏈烘爣娉�" name="1">
- <div class v-for="camera in relativeCameras" :key="camera.id">
- <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="camera.colorPick" show-alpha size="mini"></el-color-picker>
- </div>
- <div style="width:250px;">
- <label for>绗旇Е:</label>
- <el-slider v-model="camera.dotSize" :min="1" :max="20"></el-slider>
- </div>
- <div>
- <el-button type="text" @click="editPolygon(camera.id)">缂栬緫鍖哄煙</el-button>
- <el-button @click="editCoor(camera.id)">缂栬緫鏍囨敞淇℃伅</el-button>
- </div>
- <div>
- <el-button
- v-if="!camera.isEdit"
- class="drawboard-trigger"
- size="small"
- @click="editCameraData(camera)"
- icon="el-icon-edit"
- >缂栬緫</el-button>
-
- <el-button
- v-if="camera.isEdit"
- class="drawboard-trigger save"
- size="small"
- @click="submitInfo"
- icon="el-icon-lock"
- >淇濆瓨</el-button>
- </div>
- </div>
- </div>
- <el-dialog :visible.sync="coordsDialogVisible" width="1150px">
- <div class="drawboard shadow-box">
- <div
- class="mask"
- :class="{'edit-status-mask':camera.isEdit}"
- :ref="`editBoard_${camera.id}`"
- >
- <polygon-canvas
- class="polygon-canvas"
- :ref="`polygonCanvas_${camera.id}`"
- :snapshot_url="camera.snapshot_url"
- :canvasWidth="960"
- :canvasHeight="540"
- ></polygon-canvas>
- <!-- <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
- class="label"
- @click="editLabel(item)"
- v-for="(item,index) in camera.coords"
- :key="index"
- :style="{left:`${item.x0}px`, top:`${item.y0}px`, backgroundColor: camera.colorPick, width: `${camera.dotSize}px`, height: `${camera.dotSize}px` }"
- ></div>
- </div>
- <img v-show="camera.snapshot_url" :src="`/httpImage/${camera.snapshot_url}`" alt />
- <div
- class="popBox"
- v-show="camera.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_${camera.id}`">
- <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>
- </el-dialog>
- <!-- <div class="drawboard shadow-box">
- <div class="mask" :class="{'edit-status-mask':camera.isEdit}" :ref="`editBoard_${camera.id}`">
- <polygon-canvas
- class="polygon-canvas"
- :ref="`polygonCanvas_${camera.id}`"
- :snapshot_url="camera.snapshot_url"
- :canvasWidth="960"
- :canvasHeight="540"
- ></polygon-canvas>
- <div
- class="label"
- @click="editLabel(item)"
- v-for="(item,index) in camera.coords"
- :key="index"
- :style="{left:`${item.x0}px`, top:`${item.y0}px`, backgroundColor: camera.colorPick, width: `${camera.dotSize}px`, height: `${camera.dotSize}px` }"
- ></div>
- </div>
- <img v-show="camera.snapshot_url" :src="`/httpImage/${camera.snapshot_url}`" alt />
- <div
- class="popBox"
- v-show="camera.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_${camera.id}`">
- <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>
- </el-tab-pane>
- <el-tab-pane label="杩借釜瀹炴櫙鍧愭爣" name="2">
- <div class="user-upload">
- <canvas id="trackArea" width="960" height="540"></canvas>
- <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>
- </div>
- <div class="info">
- <div class="input-area">
- <div>
- <label for>绌洪棿瀹�:</label>
- <el-input v-model="spaceWidth" placeholder="璇疯緭鍏ュ疄闄呯┖闂村" size="small"></el-input>
- </div>
- <div>
- <label for>绌洪棿楂�:</label>
- <el-input v-model="spaceHeight" placeholder="璇疯緭鍏ュ疄闄呯┖闂撮珮" size="small"></el-input>
- </div>
- </div>
- <div class="pos" v-show="isShowCurPos">
- 褰撳墠浣嶇疆:
- <b>{{traceX}}</b>,
- <b>{{traceY}}</b>
- </div>
- </div>
- </div>
- </el-tab-pane>
- </el-tabs>
- <!-- <el-collapse v-model="actPage">
- <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>
- </div>
- <div class="info" v-show="isShowCurPos">褰撳墠浣嶇疆:{{traceX}},{{traceY}}</div>
- </div>
- </el-collapse-item>
- </el-collapse>-->
- </div>
- </div>
-</template>
-
-<script>
-import { getCamerasByServer } from '@/api/pollConfig';
-import { getCameraMarks, updateCameraMarks } from '@/api/camera';
-import TreeDataPool from "@/Pool/TreeData";
-import { isNonnegativeInteger } from '@/scripts/validate';
-import polygonCanvas from "@/components/canvas";
-export default {
- components: { polygonCanvas },
- data () {
- return {
- labels: [],
- // colorPick: '#79f2fb',
- // dotSize: 3,
- // isEdit: false,
- // isShowPop: false,
- // isNewLabel: false,
- curLabel: {
- id: '',
- x1: '',
- y1: '',
- x0: '',
- y0: ''
- },
- rules: {
- x1: [
- { validator: isNonnegativeInteger, trigger: 'change' }
- ],
- y1: [
- { validator: isNonnegativeInteger, trigger: 'change' }
- ]
- },
- baseUrl: '',
- //snapshot_url: '',
- userImg: '',
- cameraData: [],
- traceX: 0,
- traceY: 0,
- isShowCurPos: false,
- actPage: '1',
- loading: false,
- spaceWidth: '',
- spaceHeight: '',
- curCameraData: {
- cameraId: '',
- coords: []
- },
- relativeCameras: [],
- relativeCamera: {
- colorPick: '#79f2fb',
- cameraId: '',
- snapshot_url: '',
- dotSize: 3,
- isEdit: false,
- isShowPop: false,
- isNewLabel: false,
- coords: [],
- polygons: {}
- },
- trackData: []
- }
- },
- computed: {
-
- },
- mounted () {
- this.getAllCameraData();
- //mock鍥炴樉鏍囨敞
- setTimeout(() => {
- 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;
- //this.trackData = [[950,370],[945,368],[940,360],[936,350],[930,340],[930,340]];
- let tempArr = [];
- for (var i = 0; i < 1000; i++) {
- //let x = 960-i*9, y = 370 - i*3;
- let x = Math.floor(Math.random() * 960);
- let y = Math.floor(Math.random() * 540)
- tempArr.push([x, y])
- }
- this.trackData = tempArr;
- let canvas = document.querySelector('#trackArea');
- let ctx = canvas.getContext('2d');
- ctx.strokeStyle = 'yellow';
- ctx.fillStyle = 'aqua';
- // ctx.globalAlpha=0.5;
- ctx.lineWidth = 1;
- //ctx.lineJoin='round';
- ctx.lineCap = 'round';
- for (var i = 0; i < this.trackData.length; i++) {
- ctx.fillRect(this.trackData[i][0], this.trackData[i][1], 5, 5);
- ctx.lineTo(this.trackData[i][0], this.trackData[i][1]);
- }
- ctx.stroke();
- }, 1000);
- debugger
- },
- watch: {
- // 'TreeDataPool.selectedNode': {
- // handler (n, o) {
- // let curCamera = this.cameraData.find(item => item.id == n.id);
- // //璁剧疆鎽勫儚鏈哄簳鍥�
- // this.snapshot_url = curCamera.snapshot_url;
- // this.findCameraMarks(n.id);
- // },
- // deep: true
- // },
- 'TreeDataPool.selectedNodes': {
- handler (n, o) {
- debugger
- // if (n.length > 2) {
- // this.$notify({
- // type: 'warning',
- // message: '鏈�澶氫粎鑳藉叧鑱斾袱涓憚鍍忔満'
- // });
- // this.TreeDataPool.selectedNodes.length = 2;
- // //鐩綍鏍戣鍥炬湭鏇存柊
- // }
- var tempArr = [];
- //鏍规嵁id鍙栨憚鍍忔満鏍囨敞淇℃伅鍙婂尯鍩�
- let _this = this;
- n.forEach(cameraId => {
- //this.findCameraMarks(cameraId);
- getCameraMarks({ cameraId }).then(res => {
- let obj = _this.newCameraData();
- //Object.assign(obj,)
- //寰呰仈璋�
- tempArr.push(res.data)
- })
- })
- //mock
- tempArr = [
- { id: '81b4c468-9828-41ad-a681-e90feb59490e', isEdit: false, isShowPop: false, colorPick: '#79f2fb', isNewLabel: false, dotSize: 3 },
- { id: '28477df1-78ec-49bc-8734-e977992667cc', isEdit: false, isShowPop: false, colorPick: '#79f2fb', isNewLabel: false, dotSize: 3 }
- ];
- tempArr.forEach(item => {
- this.cameraData.find(camera => {
- if (camera.id == item.id) {
- item.snapshot_url = camera.snapshot_url;
- }
- })
- })
-
- this.relativeCameras = tempArr
- },
- deep: true
- },
- relativeCameras: {
- handler (n, o) {
- var _this = this;
- n.forEach(camera => {
- debugger
- // if(camera.isEdit){
- // _this.$refs[`editBoard_${camera.id}`][0].addEventListener('click', this.bindListen);
- // }else{
- // _this.$refs[`editBoard_${camera.id}`][0].removeEventListener('click', this.bindListen);
- // }
- })
- },
- deep: true
- },
- // isEdit (n, o) {
- // if (n) {
- // this.$refs['editBoard'].addEventListener('click', this.bindListen);
- // } else {
- // this.$refs['editBoard'].removeEventListener('click', this.bindListen);
- // }
- // }
- },
- methods: {
- newCameraData () {
- return {
- colorPick: '#79f2fb',
- id: '',
- snapshot_url: '',
- dotSize: 3,
- isEdit: false,
- isShowPop: false,
- isNewLabel: false,
- coords: [],
- polygons: {}
- }
- },
- editPolygon (cameraId) {
- debugger
- this.$refs[`polygonCanvas_${cameraId}`][0].showModal();
- },
- 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));
- // let editedIndex = _this.relativeCamera.coords.findIndex(one => one.id == _this.curLabel.id);
- // _this.relativeCamera.coords[editedIndex] = 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 (camera) {
- if (!this.TreeDataPool.selectedNode.id) {
- this.$notify({
- message: '璇峰厛閫夋嫨鎽勫儚鏈�',
- type: 'warning'
- });
- return;
- }
- camera.isEdit = !camera.isEdit;
- this.$refs[`editBoard_${camera.id}`][0].addEventListener('click', this.bindListen);
- },
- async submitInfo () {
- this.isEdit = false;
- let res = await updateCameraMarks(this.curCameraData);
- if (res.success) {
- this.findCameraMarks(this.curCameraData.cameraId);
- }
- },
- showCurPos (e) {
- console.log(e);
- this.isShowCurPos = true;
- this.traceX = e.offsetX;
- this.traceY = e.offsetY;
- },
- onChange (file, fileList) {
- fileList = [file]
- this.isShowCurPos = false;
- // this.traceX = e.offsetX;
- // this.traceY = e.offsetY;
- //fileList.push(file)
- },
- definedUpload (params) {
- let _file = params.file
- let fileReader = new FileReader()
- fileReader.onload = () => {
- this.userImg = fileReader.result
- }
- if (_file) {
- fileReader.readAsDataURL(_file)
- }
- },
- getAllCameraData () {
- getCamerasByServer().then(res => {
- if (res.success) {
- this.cameraData = res.data;
- }
- }).catch(e => {
- console.log(e)
- })
- },
- bindListen (e) {
- this.newLabel(e);
- },
- newLabel (e) {
- debugger
- console.log('鐐瑰嚮浜嗙敾鏉�')
- if (this.isShowPop) return;
- //鑾峰彇榧犳爣鐩稿浜庣敾鏉跨殑瀹氫綅
- console.log('鑾峰彇褰撳墠瀹氫綅淇℃伅');
- this.$refs['labelForm'].resetFields();
- let target = {
- id: '',
- x0: e.offsetX,
- y0: e.offsetY,
- x1: '',
- y1: ''
- };
- target.id = 'n' + (this.curCameraData.coords.length - 1);
- //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.curCameraData.coords.pop();
- }
- },
- deleteLabel () {
- if (this.curLabel.id) {
- 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>
-
-<style lang="scss">
-.right-side {
- background: #d2dcea;
- .figure {
- .el-tabs__content {
- background: #d2dcea;
- height: calc(100vh - 85px);
- }
- }
- .tool-bar {
- //width: 40px;
- height: 100%;
- padding: 10px 0 10px 20px;
- box-sizing: border-box;
- //background: rgb(250, 250, 250);
- background: rgba(26, 45, 74, 0.6);
- //margin-bottom: 40px;
- display: flex;
- align-items: center;
- justify-content: flex-end;
- > div {
- cursor: pointer;
- //background: rgba(245, 245, 245, 0.3);
- padding: 0 5px;
- height: 40px;
- margin: 7px;
- display: flex;
- align-items: center;
- label {
- margin-right: 10px;
- color: rgb(161, 161, 161);
- color: #fff;
- }
- .el-slider {
- width: 110px;
- }
- }
- }
- .shadow-box {
- box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1);
- }
- .action-bar {
- width: 960px;
- margin: auto;
- margin-top: 30px;
- //margin-bottom: 20px;
- text-align: right;
- .drawboard-trigger {
- background: transparent;
- color: #fff;
- border-color: rgba(255, 255, 255, 0.3);
- }
- }
- .drawboard {
- margin: auto;
- width: 960px;
- height: 540px;
- margin-bottom: 130px;
- position: relative;
- //background: #fff;
- background: #f0ffca;
- //box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1);
- .mask {
- position: absolute;
- background: transparent;
- width: 100%;
- height: 100%;
- overflow: hidden;
- &.edit-status-mask {
- background: rgba(20, 181, 255, 0.1);
- }
- .label {
- position: absolute;
- z-index: 2;
- border-radius: 50%;
- }
- }
- .polygon-canvas {
- position: absolute;
- top: 0;
- left: 0;
- }
- img {
- width: 960px;
- height: 540px;
- background: #f0ffca;
- }
- .polygon-canvas {
- position: absolute;
- }
- .right-panel {
- width: 150px;
- height: 100%;
- background: rgba(26, 45, 74, 0.7);
- }
- .popBox {
- position: absolute;
- z-index: 99;
- padding: 14px;
- border-radius: 3px;
- color: #fff;
- background: rgba(26, 45, 74, 0.7);
- .title {
- font-weight: bold;
- text-align: left;
- font-size: 15px;
- margin-bottom: 14px;
- letter-spacing: 2px;
- }
- .details {
- .detail-item {
- display: flex;
- margin: 5px 0;
- label {
- color: #a9a9a9;
- width: 65px;
- display: inline-block;
- }
- .left {
- width: 110px;
- text-align: left;
- line-height: 28px;
- .fix-width {
- display: inline-block;
- width: 23px;
- }
- }
- .right {
- width: 160px;
- }
- .devide {
- width: 10px;
- height: 1px;
- background: #a9a9a9;
- 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%;
- }
- }
- }
- }
- .user-upload {
- margin: auto;
- padding: 50px;
- display: flex;
- position: relative;
- #trackArea {
- position: absolute;
- background: rgba(136, 214, 228, 0.1);
- }
- .info {
- margin-left: 20px;
- margin-top: 20px;
- text-align: left;
- font-size: 15px;
- .input-area {
- width: 300px;
- label {
- width: 80px;
- color: rgba(39, 68, 111, 0.67);
- }
- > div {
- display: flex;
- align-items: center;
- height: 40px;
- }
- }
- .pos {
- margin-top: 10px;
- text-align: left;
- color: rgba(39, 68, 111, 0.67);
- b {
- font-style: italic;
- }
- //color: #4966b7
- }
- }
- .img-card {
- }
- .upload-demo,
- .el-upload {
- height: 100%;
- width: 100%;
- margin: 0 auto;
- }
- .upload-demo .el-upload__input {
- visibility: hidden;
- }
- .upload-demo .el-upload-dragger {
- width: 100%;
- height: 90%;
- width: 962px;
- height: 542px;
- margin: 20px 0 0;
- background: transparent;
- /* border: none; */
- //position: relative;
- overflow: visible;
- }
- .upload-demo .el-upload__text {
- position: absolute;
- top: -24px;
- left: 50%;
- margin-left: -91px;
- }
- .upload-demo .preview {
- object-fit: contain;
- //position: relative;
- // width: 100%;
- // height: 100%;
- }
- .upload-demo .preview img {
- // position: absolute;
- // top: 50%;
- // left: 50%;
- // transform: translate(-50%, -50%);
- // width: 100%;
- // height: 100%;
- }
- }
-}
-.el-input__inner:focus {
- outline: none;
- border-color: rgba(42, 56, 93, 71%) !important;
-}
-.el-upload-dragger:hover {
- border-color: rgba(42, 56, 93, 71%) !important;
-}
-</style>
\ No newline at end of file
diff --git a/src/pages/labelMark/components/RightSide.vue b/src/pages/labelMark/components/RightSide.vue
deleted file mode 100644
index d8a4478..0000000
--- a/src/pages/labelMark/components/RightSide.vue
+++ /dev/null
@@ -1,1165 +0,0 @@
-<template>
- <div class="right-side">
- <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">
- <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>
- </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>
- </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>
- </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>
- <label for>绌洪棿楂�:</label>
- <el-input v-model="spaceHeight" placeholder="璇疯緭鍏ュ疄闄呯┖闂撮珮" size="small"></el-input>
- </div>
- </div>
- <div class="pos" v-show="isShowCurPos">
- 褰撳墠浣嶇疆:
- <b>{{traceX}}</b>,
- <b>{{traceY}}</b>
- </div>
- </div>
- </div>
- </el-tab-pane>
- </el-tabs>
- </el-tab-pane>
- <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
- 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>
- </div>
- <div class="info">
- <div class="input-area">
- <div>
- <label for>绌洪棿瀹�:</label>
- <el-input v-model="spaceWidth" placeholder="璇疯緭鍏ュ疄闄呯┖闂村" size="small"></el-input>
- </div>
- <div>
- <label for>绌洪棿楂�:</label>
- <el-input v-model="spaceHeight" placeholder="璇疯緭鍏ュ疄闄呯┖闂撮珮" size="small"></el-input>
- </div>
- </div>
- <div class="pos" v-show="isShowCurPos">
- 褰撳墠浣嶇疆:
- <b>{{traceX}}</b>,
- <b>{{traceY}}</b>
- </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" v-if="groupList.length!==0">
- <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="groupList.length!==0 && 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-dialog class="dialog-group" :title="groupForm.id?'缂栬緫鍒嗙粍':'鏂板缓鍒嗙粍'" :visible.sync="groupModelVisible">
- <el-form :model="groupForm" ref="groupForm">
- <el-form-item>
- <label>鍒嗙粍鍚嶇О</label>
- <div>
- <el-input v-model="groupForm.groupName"></el-input>
- </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-form>
- </el-dialog>
- </div>
- </div>
-</template>
-
-<script>
-import { getCamerasByServer } from '@/api/pollConfig';
-import { getCameraMarks, updateCameraMarks, findCameraGroups, saveCameraGroupInfo, delCameraGroup } from '@/api/camera';
-import { getSearchList } from '@/api/search';
-
-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: [],
- // colorPick: '#79f2fb',
- // dotSize: 3,
- // isEdit: false,
- // isShowPop: false,
- // isNewLabel: false,
- // curLabel: {
- // id: '',
- // x1: '',
- // y1: '',
- // x0: '',
- // y0: ''
- // },
- // rules: {
- // x1: [
- // { validator: isNonnegativeInteger, trigger: 'change' }
- // ],
- // y1: [
- // { validator: isNonnegativeInteger, trigger: 'change' }
- // ]
- // },
- // baseUrl: '',
- // snapshot_url: '',
- // userImg: '',
- // cameraData: [],
- // traceX: 0,
- // traceY: 0,
- // isShowCurPos: false,
- // actPage: '1',
- // loading: false,
- // spaceWidth: '',
- // spaceHeight: '',
- // curCameraData: {
- // cameraId: '',
- // coords: []
- // },
- relativeList: [],
- cameraAreas: [],
- groupModelVisible: false,
- groupList: [],
- curGroup: {},
- groupForm: {
- groupName: '',
- cameras: []
- },
- groupCameras: [],
- groupCamera: {
-
- },
- cameraAndPolygonData: []
- }
- },
- computed: {
-
- },
- mounted () {
- this.getAllCameraData();
- //mock鍥炴樉鏍囨敞
- setTimeout(() => {
- 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) {
- let curCamera = this.cameraData.find(item => item.id == n.id);
- //璁剧疆鎽勫儚鏈哄簳鍥�
- this.snapshot_url = curCamera.snapshot_url;
- this.findCameraMarks(n.id);
- },
- deep: true
- },
-
- isEdit (n, o) {
- if (n) {
- this.$refs['editBoard'].addEventListener('click', this.bindListen);
- } else {
- this.$refs['editBoard'].removeEventListener('click', this.bindListen);
- }
- }
- },
- methods: {
- polygonUpdate(){
- 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()
- }
- })
- },
-
- 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;
- debugger
- //閫変腑绗竴涓�
- this.groupList.length && 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: []
- }
- },
-
-//labelMark start
- sure () {
- let _this = this;
- this.$refs['labelForm'].validate(valid => {
- console.log(valid)
- if (valid) {
- _this.isShowPop = false;
- //缂栬緫纭畾
- 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();
- }
- });
- },
- //鑾峰彇鎽勫儚鏈烘爣娉�
- 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 () {
-
- },
- showCurPos (e) {
- console.log(e);
- this.isShowCurPos = true;
- this.traceX = e.offsetX;
- this.traceY = e.offsetY;
- },
- onChange (file, fileList) {
- fileList = [file]
- this.isShowCurPos = false;
- },
- definedUpload (params) {
- let _file = params.file
- let fileReader = new FileReader()
- fileReader.onload = () => {
- this.userImg = fileReader.result
- }
- if (_file) {
- fileReader.readAsDataURL(_file)
- }
- },
- getAllCameraData () {
- let _this = this;
- getCamerasByServer().then(res => {
- if (res.success) {
- _this.cameraData = res.data;
- _this.getAllGroups();
- }
- }).catch(e => {
- console.log(e)
- })
- },
- bindListen (e) {
- this.newLabel(e);
- },
- newLabel (e) {
- console.log('鐐瑰嚮浜嗙敾鏉�')
- if (this.isShowPop) return;
- //鑾峰彇榧犳爣鐩稿浜庣敾鏉跨殑瀹氫綅
- console.log('鑾峰彇褰撳墠瀹氫綅淇℃伅');
- this.$refs['labelForm'].resetFields();
- let target = {
- id: '',
- x0: e.offsetX,
- y0: e.offsetY,
- x1: '',
- y1: ''
- };
- target.id = 'n' + (this.curCameraData.coords.length - 1);
- //this.labels.push(target);
- this.curCameraData.coords.push(target);
- this.curLabel = target;
- this.isShowPop = true;
- this.isNewLabel = true;
- },
- editLabel (label) {
- if (!this.isEdit) return;
- this.isShowPop = true;
- this.$refs['labelForm'].clearValidate();
- this.curLabel = JSON.parse(JSON.stringify(label));
-
- },
- cancle () {
- this.isShowPop = false;
- //濡傛灉鏄湭淇濆瓨杩囩殑label鐩存帴鍒犻櫎(鏈繚瀛樼殑灏辨槸labels鏁扮粍涓渶鍚庝竴涓�)
- if (this.curLabel.id.startsWith('n')) {
- //this.labels.pop();
- this.curCameraData.coords.pop();
- }
- },
- deleteLabel () {
- if (this.curLabel.id) {
- 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>
-
-<style lang="scss">
-.right-side {
- background: #d2dcea;
- .figure {
- .el-tabs__content {
- background: #d2dcea;
- height: calc(100vh - 85px);
- overflow-y: auto;
- }
- }
- .tool-bar {
- //width: 40px;
- height: 100%;
- padding: 10px 0 10px 20px;
- box-sizing: border-box;
- //background: rgb(250, 250, 250);
- background: rgba(26, 45, 74, 0.6);
- //margin-bottom: 40px;
- display: flex;
- align-items: center;
- justify-content: flex-end;
- > div {
- cursor: pointer;
- //background: rgba(245, 245, 245, 0.3);
- padding: 0 5px;
- height: 40px;
- margin: 7px;
- display: flex;
- align-items: center;
- label {
- margin-right: 10px;
- color: rgb(161, 161, 161);
- color: #fff;
- }
- .el-slider {
- width: 110px;
- }
- }
- }
- .shadow-box {
- box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1);
- }
- .action-bar {
- width: 960px;
- margin: auto;
- margin-top: 30px;
- //margin-bottom: 20px;
- text-align: right;
- .drawboard-trigger {
- background: transparent;
- color: #fff;
- border-color: rgba(255, 255, 255, 0.3);
- }
- }
- .drawboard {
- margin: auto;
- width: 960px;
- height: 540px;
- margin-bottom: 130px;
- position: relative;
- //background: #fff;
- background: #f0ffca;
- //box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1);
- .mask {
- position: absolute;
- background: transparent;
- width: 100%;
- height: 100%;
- overflow: hidden;
- &.edit-status-mask {
- background: rgba(20, 181, 255, 0.1);
- }
- .label {
- position: absolute;
- z-index: 2;
- border-radius: 50%;
- }
- }
- img {
- width: 960px;
- height: 540px;
- background: #f0ffca;
- }
- .right-panel {
- width: 150px;
- height: 100%;
- background: rgba(26, 45, 74, 0.7);
- }
- .popBox {
- position: absolute;
- z-index: 99;
- padding: 14px;
- border-radius: 3px;
- color: #fff;
- background: rgba(26, 45, 74, 0.7);
- .title {
- font-weight: bold;
- text-align: left;
- font-size: 15px;
- margin-bottom: 14px;
- letter-spacing: 2px;
- }
- .details {
- .detail-item {
- display: flex;
- margin: 5px 0;
- label {
- color: #a9a9a9;
- width: 65px;
- display: inline-block;
- }
- .left {
- width: 110px;
- text-align: left;
- line-height: 28px;
- .fix-width {
- display: inline-block;
- width: 23px;
- }
- }
- .right {
- width: 160px;
- }
- .devide {
- width: 10px;
- height: 1px;
- background: #a9a9a9;
- 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%;
- }
- }
- }
- }
- .user-upload {
- margin: auto;
- padding: 50px;
- display: flex;
- .info {
- margin-left: 20px;
- margin-top: 20px;
- text-align: left;
- font-size: 15px;
- .input-area {
- width: 300px;
- label {
- width: 80px;
- color: rgba(39, 68, 111, 0.67);
- }
- > div {
- display: flex;
- align-items: center;
- height: 40px;
- }
- }
- .pos {
- margin-top: 10px;
- text-align: left;
- color: rgba(39, 68, 111, 0.67);
- b {
- font-style: italic;
- }
- //color: #4966b7
- }
- }
- .upload-demo,
- .el-upload {
- height: 100%;
- width: 100%;
- margin: 0 auto;
- }
- .upload-demo .el-upload__input {
- visibility: hidden;
- }
- .upload-demo .el-upload-dragger {
- width: 100%;
- height: 90%;
- width: 962px;
- height: 542px;
- margin: 20px 0 0;
- background: transparent;
- /* border: none; */
- //position: relative;
- overflow: visible;
- }
- .upload-demo .el-upload__text {
- position: absolute;
- top: -24px;
- left: 50%;
- margin-left: -91px;
- }
- .upload-demo .preview {
- object-fit: contain;
- //position: relative;
- // width: 100%;
- // height: 100%;
- }
- .upload-demo .preview img {
- // position: absolute;
- // top: 50%;
- // left: 50%;
- // transform: translate(-50%, -50%);
- // width: 100%;
- // 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;
- border-color: rgba(42, 56, 93, 71%) !important;
-}
-.el-upload-dragger:hover {
- border-color: rgba(42, 56, 93, 71%) !important;
-}
-</style>
\ No newline at end of file
diff --git a/src/pages/labelMark/components/SlideCanvas.vue b/src/pages/labelMark/components/SlideCanvas.vue
deleted file mode 100644
index 14362f4..0000000
--- a/src/pages/labelMark/components/SlideCanvas.vue
+++ /dev/null
@@ -1,231 +0,0 @@
-<template>
- <div class="swiper-box">
- <p class="task-tip" v-if="cameras.length == 0 "></p>
- <swiper
- ref="cameraSwiper"
- v-if="cameras.length>=1"
- :options="swiperOption"
- class="swiper-box-container"
- >
- <swiper-slide v-for="camera in cameras" :key="camera.id+'c'">
- <div class="swiper-draw-box-title">
- <b>{{camera.name}}</b>
- <b style="margin-left:14px;">缁樺埗鍖哄煙</b>
- <span
- class="el-dropdown-link"
- @click="drawBaseImg(camera.id)"
- style="position: relative;top: 5px; cursor:pointer"
- >
- <i class="iconfont iconbianji1" style="font-size: 28px; "></i>
- </span>
- </div>
- <polygon-canvas
- class="polygon-canvas"
- :ref="`polygonCanvas_${camera.id}`"
- :currentCameraId="camera.id"
- :snapshot_url="camera.canvasData.snapshot_url"
- :canvasDataShow="camera.canvasData"
- :canvasWidth="576"
- :canvasHeight="324"
- @fromCanvas="getCanvasData"
- @refresh="refresh"
- ></polygon-canvas>
- </swiper-slide>
- </swiper>
- <div class="swiper-pre-border" slot="button-prev" @click="pre" >
- <div class="icon-btn" >
- <i class="iconfont iconzuo"></i>
- </div>
- </div>
- <div class="swiper-next-border" slot="button-next" @click="next">
- <div class="icon-btn" >
- <i class="iconfont iconyou1"></i>
- </div>
- </div>
-
- </div>
-</template>
-
-<script>
-import { chunkArr } from '@/scripts/util';
-import PolygonCanvas from '@/components/canvas';
-import { savePolygon } from "@/api/polygon";
-export default {
- //cameras: [{ id: '',snapshot_url:'', canvasData: {} }]
- props: [
- 'cameras',
- //'swiperOption'
- ],
- watch:{
- cameras:{
- handler(n,o){
- console.log('slidecanvas cameras',n)
- },
- deep: true
- }
- },
- components: { PolygonCanvas },
- data () {
- return {
- swiperOption: this.newOption(),
- //mySwiper: {}
- }
- },
- computed: {
- swiper () {
- return this.$refs['cameraSwiper'].swiper
- }
- },
- mounted () {
- //this.mySwiper = this.$refs.sceneSwiper.swiper;
- console.log(this.swiper)
- },
- methods: {
- refresh(url,cameraId) {
- this.$emit('polygonDataUpdate')
-
- //let camera = this.cameras.find(one => one.id == cameraId);
- //camera.canvasData.snapshot_url = url;
-
- },
- getCanvasData(data) {
- let _this = this;
- savePolygon(data).then(rsp => {
- _this.$emit('polygonDataUpdate')
- });
- },
- newOption () {
- return {
- slidesPerView: 1,
- spaceBetween: 0,
- pagination: {
- el: ".swiper-pagination",
- clickable: true
- },
- observer: true,//淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
- observeParents: true,//淇敼swiper鐨勭埗鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
- }
- },
-
- pre () {
- this.swiper.activeIndex--
- this.swiper.slideTo(this.swiper.activeIndex);
- },
- next () {
- this.swiper.activeIndex++
- this.swiper.slideTo(this.swiper.activeIndex);
- },
- drawBaseImg (id) {
- this.$refs[`polygonCanvas_${id}`][0].showModal();
- }
- }
-};
-</script>
-
-<style lang="scss">
-.icon {
- width: 1em;
- height: 1em;
- vertical-align: -0.15em;
- fill: currentColor;
- overflow: hidden;
-}
-.task-tip {
- font-family: PingFangSC-Regular;
- font-size: 12px;
- color: #cccccc;
- margin-top: 10%;
-}
-.swiper-box {
- position: relative;
-}
-.swiper-pre-border,
-.swiper-next-border {
- width: 40px;
- height: 40px;
- position: absolute;
- background: #8888;
- top: 50%;
- margin-top: -20px;
- z-index: 99;
- border-radius: 4em;
- outline: none;
- .icon-btn {
- color: rgb(255, 255, 255);
- text-align: center;
- line-height: 38px;
- cursor: pointer;
- }
-}
-.swiper-pre-border {
- left: 10px;
-}
-.swiper-pre-border:hover {
- background: #666;
-}
-.swiper-next-border {
- right: 10px;
-}
-.swiper-next-border:hover {
- background: #666;
-}
-.swiper-draw-box-title {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 24px;
- b {
- font-size: 14px;
- }
-}
-.wrap-box {
- width: 100%;
- display: inline-block;
- .inner {
- width: 90%;
- box-sizing: border-box;
- position: relative;
- font-size: 14px;
- padding: 7px 0 48px;
- transition: all 1s;
- background: #ffffff;
- border: 1px solid #e2e2e2;
- box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
- border-radius: 4px;
- margin: auto;
- &:hover {
- .mask {
- display: block;
- }
- }
- .mask {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.65);
- backdrop-filter: blur(1px) brightness(100%);
- text-align: center;
- z-index: 1;
- border-radius: 3px;
- display: none;
- .tool {
- position: absolute;
- top: 49%;
- left: 50%;
- transform: translate(-50%, -50%);
- i {
- font-size: 50px;
- }
- i:nth-of-type(1) {
- margin-right: 30px;
- }
- i:nth-of-type(2) {
- color: red;
- }
- }
- }
- }
-}
-</style>
\ No newline at end of file
diff --git a/src/pages/labelMark/index/App.vue b/src/pages/labelMark/index/App.vue
deleted file mode 100644
index 2624781..0000000
--- a/src/pages/labelMark/index/App.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<template>
- <div class="column">
- <div class="column-left" ref="leftTree">
- <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 ref="content"/>
- </div>
- </div>
-</template>
-<script>
-import LeftNav from "@/components/LeftNav";
-import RightSide from "../components/RightSide";
-import TreeDataPool from "@/Pool/TreeData";
-export default {
- components: { LeftNav, RightSide },
- data () {
- return {
- screenHeight: 0,
- }
- },
- // created(){
- // this.TreeDataPool.multiple = true;
- // },
- 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: #f5f5f5;
- 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
deleted file mode 100644
index e69de29..0000000
--- a/src/pages/labelMark/index/api.ts
+++ /dev/null
diff --git a/src/pages/labelMark/index/main.ts b/src/pages/labelMark/index/main.ts
deleted file mode 100644
index b9b1993..0000000
--- a/src/pages/labelMark/index/main.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-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 VueAwesomeSwiper from "vue-awesome-swiper";
-import "swiper/dist/css/swiper.css";
-import Mixin from "./mixins";
-
-Vue.use(ElementUI);
-Vue.use(VueAwesomeSwiper as any);
-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
deleted file mode 100644
index feda309..0000000
--- a/src/pages/labelMark/index/mixins.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-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