| | |
| | | <template> |
| | | <div class="right-side"> |
| | | <div class="figure"> |
| | | <div class="action-bar"> |
| | | <el-button |
| | | class="drawboard-trigger" |
| | | size="small" |
| | | @click="isEdit=!isEdit" |
| | | :icon="isEdit?'el-icon-lock':'el-icon-edit'" |
| | | >{{isEdit?'锁定':'编辑'}}</el-button> |
| | | </div> |
| | | <div class="drawboard"> |
| | | <div class="mask" :class="{'edit-status-mask':isEdit}" ref="editBoard"> |
| | | <div |
| | | class="label" |
| | | @click="editLabel(item)" |
| | | v-for="(item,index) in labels" |
| | | :key="index" |
| | | :style="{left:`${item.x}px`, top:`${item.y}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }" |
| | | ></div> |
| | | </div> |
| | | <img :src="`/httpImage/${snapshot_url}`" alt /> |
| | | <div |
| | | class="popBox" |
| | | v-show="isShowPop" |
| | | :style="`top:${curLabel.y + 22}px;left:${curLabel.x}px`" |
| | | > |
| | | <div class="title">标注信息</div> |
| | | <div class="details"> |
| | | <div class="detail-item"> |
| | | <div class="left"> |
| | | <label for>平面坐标X:</label> |
| | | <span class="fix-width">{{curLabel.x}}</span> |
| | | <i>px</i> |
| | | <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> |
| | | <span class="devide"></span> |
| | | <div class="right"> |
| | | <label for>实际坐标X:</label> |
| | | <el-input type="text" size="mini" style="width:90px" v-model="curLabel.posX"></el-input> |
| | | </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="detail-item"> |
| | | <div class="left"> |
| | | <label for>平面坐标Y:</label> |
| | | <span class="fix-width">{{curLabel.y}}</span> |
| | | <i>px</i> |
| | | <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> |
| | | <span class="devide"></span> |
| | | <div class="right"> |
| | | <label for>实际坐标Y:</label> |
| | | <el-input type="text" size="mini" style="width:90px" v-model="curLabel.posY"></el-input> |
| | | <div class="pos" v-show="isShowCurPos"> |
| | | 当前位置: |
| | | <b>{{traceX}}</b>, |
| | | <b>{{traceY}}</b> |
| | | </div> |
| | | </div> |
| | | <div class="btns"> |
| | | <el-button size="mini" type="danger" @click="deleteLabel">删除</el-button> |
| | | <el-button size="mini" type="primary" @click="cancle">取消</el-button> |
| | | <el-button size="mini" type="success" @click="submitInfo">确定</el-button> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <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> |
| | | </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-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> |
| | | </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 { getCamerasByServer } from '@/api/pollConfig'; |
| | | 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 { |
| | | data() { |
| | | components: { SlideCanvas }, |
| | | data () { |
| | | return { |
| | | labels: [], |
| | | colorPick: '#79f2fb', |
| | |
| | | isEdit: false, |
| | | isShowPop: false, |
| | | isNewLabel: false, |
| | | // curLabel: { |
| | | // id: '', |
| | | // posX: '', |
| | | // posY: '', |
| | | // x: '', |
| | | // y: '' |
| | | // }, |
| | | curLabel: { |
| | | id: '', |
| | | posX: '', |
| | | posY: '', |
| | | x: '', |
| | | y: '' |
| | | x1: '', |
| | | y1: '', |
| | | x0: '', |
| | | y0: '' |
| | | }, |
| | | rules: { |
| | | x1: [ |
| | | { validator: isNonnegativeInteger, trigger: 'change' } |
| | | ], |
| | | y1: [ |
| | | { validator: isNonnegativeInteger, trigger: 'change' } |
| | | ] |
| | | }, |
| | | baseUrl: '', |
| | | snapshot_url: '', |
| | | userImg: '', |
| | | cameraData: [], |
| | | traceX: 0, |
| | | traceY: 0, |
| | | isShowCurPos: false, |
| | | actPage: '1', |
| | | loading: false, |
| | | spaceWidth: '', |
| | | spaceHeight: '', |
| | | curCameraData: { |
| | | cameraId: '', |
| | | coords: [] |
| | | }, |
| | | relativeCameras: [], |
| | | relativeList: [], |
| | | cameraAreas: [], |
| | | groupModelVisible: false, |
| | | groupList: [], |
| | | curGroup: {}, |
| | | groupForm: { |
| | | groupName: '', |
| | | cameras: [] |
| | | }, |
| | | groupCameras: [], |
| | | groupCamera: { |
| | | |
| | | }, |
| | | cameraAndPolygonData: [] |
| | | } |
| | | }, |
| | | computed: { |
| | |
| | | }, |
| | | mounted () { |
| | | this.getAllCameraData(); |
| | | //mock回显标注 |
| | | setTimeout(() => { |
| | | let mockData = [{ id: 'a1', x: 15, y: 33, posX: 150, posY: 330 }, { id: 'b2', x: 56, y: 87, posX: 560, posY: 870 }]; |
| | | this.labels = mockData; |
| | | let mockData = [{ id: 'a1', x0: 15, y0: 33, x1: 150, y1: 330 }, { id: 'b2', x0: 56, y0: 87, x1: 560, y1: 870 }]; |
| | | //this.curCameraData.coords = mockData; |
| | | }, 1000); |
| | | }, |
| | | watch: { |
| | | 'TreeDataPool.selectedNode': { |
| | | handler (n, o) { |
| | | debugger |
| | | let curCamera = this.cameraData.find(item => item.id == n.id); |
| | | //设置摄像机底图 |
| | | this.snapshot_url = curCamera.snapshot_url; |
| | | this.findCameraMarks(n.id); |
| | | }, |
| | | deep: true |
| | | }, |
| | | 'TreeDataPool.selectedNodes': { |
| | | handler (n, o) { |
| | | |
| | | }, |
| | | deep: true |
| | | }, |
| | |
| | | } |
| | | }, |
| | | 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; |
| | | //编辑确定 |
| | | 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 () { |
| | | let _this = this; |
| | | getCamerasByServer().then(res => { |
| | | if (res.success) { |
| | | debugger |
| | | 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); |
| | | }, |
| | |
| | | if (this.isShowPop) return; |
| | | //获取鼠标相对于画板的定位 |
| | | console.log('获取当前定位信息'); |
| | | this.$refs['labelForm'].resetFields(); |
| | | let target = { |
| | | id: '', |
| | | x: e.offsetX, |
| | | y: e.offsetY, |
| | | posX: '', |
| | | posY: '' |
| | | x0: e.offsetX, |
| | | y0: e.offsetY, |
| | | x1: '', |
| | | y1: '' |
| | | }; |
| | | this.labels.push(target); |
| | | 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; |
| | |
| | | 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(); |
| | | if (this.curLabel.id.startsWith('n')) { |
| | | //this.labels.pop(); |
| | | this.curCameraData.coords.pop(); |
| | | } |
| | | }, |
| | | deleteLabel () { |
| | | if (this.curLabel.id) { |
| | | //请求后台删除 |
| | | } else { |
| | | this.labels.pop(); |
| | | this.isShowPop = false; |
| | | } |
| | | }, |
| | | submitInfo () { |
| | | let index = this.curCameraData.coords.findIndex(item => item.id == this.curLabel.id); |
| | | this.curCameraData.coords.splice(index, 1); |
| | | |
| | | } |
| | | } else { |
| | | //this.labels.pop(); |
| | | this.curCameraData.coords.pop(); |
| | | } |
| | | this.isShowPop = false; |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | .right-side { |
| | | height: 100%; |
| | | background: #d2dcea; |
| | | .figure{ |
| | | float: left; |
| | | .figure { |
| | | .el-tabs__content { |
| | | background: #d2dcea; |
| | | height: calc(100vh - 85px); |
| | | overflow-y: auto; |
| | | } |
| | | } |
| | | .tool-bar { |
| | | float: right; |
| | | width: 40px; |
| | | //width: 40px; |
| | | height: 100%; |
| | | padding: 10px 20px; |
| | | padding: 10px 0 10px 20px; |
| | | box-sizing: border-box; |
| | | background: rgb(250, 250, 250); |
| | | margin-bottom: 40px; |
| | | //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: rgb(245, 245, 245); |
| | | //background: rgba(245, 245, 245, 0.3); |
| | | padding: 0 5px; |
| | | height: 40px; |
| | | margin: 7px; |
| | |
| | | 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-bottom: 20px; |
| | | margin-top: 30px; |
| | | //margin-bottom: 20px; |
| | | text-align: right; |
| | | .drawboard-trigger { |
| | | background: transparent; |
| | |
| | | margin: auto; |
| | | width: 960px; |
| | | height: 540px; |
| | | margin-bottom: 130px; |
| | | position: relative; |
| | | background: #fff; |
| | | box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1); |
| | | //background: #fff; |
| | | background: #f0ffca; |
| | | //box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1); |
| | | .mask { |
| | | position: absolute; |
| | | background: transparent; |
| | |
| | | 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(0, 0, 0, 0.7); |
| | | 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; |
| | | align-items: center; |
| | | margin: 5px 0; |
| | | label { |
| | | color: #a9a9a9; |
| | |
| | | width: 10px; |
| | | height: 1px; |
| | | background: #a9a9a9; |
| | | margin: 0 3px; |
| | | margin: 14px 3px; |
| | | } |
| | | } |
| | | .btns { |
| | | margin-top: 10px; |
| | | } |
| | | .el-form-item { |
| | | margin-bottom: 12px; |
| | | } |
| | | .el-form-item__content { |
| | | font-size: 12px; |
| | | line-height: 30px; |
| | | } |
| | | .el-form-item__error { |
| | | left: 70px; |
| | | top: 94%; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .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: 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> |