點位管理問題修改 (ddcceb1c) · Commits · AI云守 / ai-yunshou-vue · GitLab

src/views/videoControl/pointControl/components/drawPoint.vue

+90 −25

Original line number	Original line	Diff line number	Diff line
	@@ -166,28 +166,57 @@
	</div>		</div>
	<div class="right-draw-content">		<div class="right-draw-content">
	<template v-if="algorithmManage.form.value.liveMap">		<template v-if="algorithmManage.form.value.liveMap">
	<!-- <svg @click="pointDraw" v-if="drawId" class="drawSvg"> -->		<template v-if="drawId">
	<!-- <title>多边形</title> -->		<svg @click="pointDraw" class="drawSvg">
	<!-- <polygon -->		<text
	<!-- :fill="item.fill" -->		x="0"
	<!-- stroke="blue" -->		y="0"
	<!-- stroke-width="1" -->		font-family="Arial"
	<!-- v-for="item in graph[drawId]" -->		font-size="20"
	<!-- :points="item.point" -->		fill="blue"
	<!-- :key="item.key" -->		text-anchor="middle"
	<!-- /> -->		>
	<!-- </svg> -->		多边形
	<svg @click="pointDraw" v-for="(item,key) in graph" :key="item.id" class="drawSvg">		</text>
	<title>{{key}}</title>
	<polygon		<polygon
	:fill="item.fill"		:fill="item.fill"
	stroke="blue"		stroke="blue"
	stroke-width="1"		stroke-width="1"
	v-for="item in graph[key]"		v-for="item in graph[drawId]"
	:points="item.point"		:points="item.point"
	:key="item.key"		:key="item.key"
	/>		/>
	</svg>		</svg>
			</template>
			<template v-else>
			<svg
			@click="pointDraw"
			v-for="(gItem, key) in graph"
			:key="gItem.id"
			class="drawSvg"
			>
			<g :key="item.id" v-for="item in gItem">
			<text
			v-if="item.start"
			:x="item.start[0]"
			:y="item.start[1]"
			font-family="Arial"
			font-size="12"
			fill="blue"
			text-anchor="middle"
			>
			{{ item.title }}
			</text>
			<polygon
			:fill="item.fill"
			stroke="blue"
			stroke-width="1"
			:points="item.point"
			:key="item.key"
			/>
			</g>
			</svg>
			</template>
	<img :src="ImgUrl" class="drawImg" alt="" />		<img :src="ImgUrl" class="drawImg" alt="" />
	</template>		</template>
	<template v-else>		<template v-else>
	@@ -300,6 +329,7 @@ import { computed, onMounted, ref, unref, watch } from "vue";
	import { useIndex } from "../hooks";		import { useIndex } from "../hooks";
	import { colors, base64ToFile } from "../utils";		import { colors, base64ToFile } from "../utils";
	import request from "@/utils/request";		import request from "@/utils/request";
			import { ElMessage, ElMessageBox } from "element-plus";
	import "@/utils/jsmpeg.min";		import "@/utils/jsmpeg.min";
	const { algorithmManage, areaManger } = defineProps({		const { algorithmManage, areaManger } = defineProps({
	algorithmManage: Object,		algorithmManage: Object,
	@@ -373,7 +403,7 @@ watch(
	);		);
	// console.log(algorithmManage.form.value.aiRegionalLocationList)		// console.log(algorithmManage.form.value.aiRegionalLocationList)
	algorithmManage.form.value.aiRegionalLocationList.forEach((val) => {		algorithmManage.form.value.aiRegionalLocationList.forEach((val) => {
	graph[val.id] = JSON.parse(val.drawingArea);		graph[val.id] = val.drawingArea && JSON.parse(val.drawingArea);
	});		});
	}		}
	);		);
	@@ -579,7 +609,17 @@ function getNewPhoto() {
	getVideos();		getVideos();
	});		});
	}		}
			const draw = ref();
	function beginDraw(e) {		function beginDraw(e) {
			if (!algorithmManage.form.value.liveMap) {
			// 添加弹窗
			ElMessage({
			message: "请先拍照取图",
			type: "error",
			});
			return;
			}
			draw.value = e;
	drawId.value = e.id;		drawId.value = e.id;
	if (typeof e.drawingArea == "string" && e.drawingArea) {		if (typeof e.drawingArea == "string" && e.drawingArea) {
	graph[e.id] = JSON.parse(e.drawingArea);		graph[e.id] = JSON.parse(e.drawingArea);
	@@ -587,8 +627,31 @@ function beginDraw(e) {
	drawIndex.value = graph[drawId.value] ? graph[drawId.value].length : 0;		drawIndex.value = graph[drawId.value] ? graph[drawId.value].length : 0;
	}		}
	function clearDraw() {		function clearDraw() {
			if (!drawId.value) {
			ElMessageBox.confirm("是否清空全部重绘？").then((res) => {
			for (let key in graph) {
			graph[key] = [];
			}
			if (unref(algorithmManage.form).id) {
			unref(algorithmManage.form).aiRegionalLocationList.forEach((x) => {
			x.drawingArea = [];
			});
			}
			ElMessage({
			message: "清空成功",
			type: "success",
			});
			});
			} else {
			ElMessageBox.confirm("是否清空当前重绘？").then((res) => {
	graph[drawId.value] = [];		graph[drawId.value] = [];
	drawIndex.value = 0;		drawIndex.value = 0;
			ElMessage({
			message: "清空成功",
			type: "success",
			});
			});
			}
	}		}
	function pointDraw(e) {		function pointDraw(e) {
	if (!graph[drawId.value]) {		if (!graph[drawId.value]) {
	@@ -598,6 +661,8 @@ function pointDraw(e) {
	graph[drawId.value][drawIndex.value] = {		graph[drawId.value][drawIndex.value] = {
	fill: colors(),		fill: colors(),
	point: "",		point: "",
			title: draw.value.algorithmName,
			start: [e.offsetX, e.offsetY],
	};		};
	}		}
	graph[drawId.value][drawIndex.value].point += `${e.offsetX},${e.offsetY} `;		graph[drawId.value][drawIndex.value].point += `${e.offsetX},${e.offsetY} `;

src/views/videoControl/pointControl/index.vue

+10 −2

Original line number	Original line	Diff line number	Diff line
	@@ -2,7 +2,7 @@
	<div class="app-container home">		<div class="app-container home">
	<TabTitle :text="nowText" />		<TabTitle :text="nowText" />
	<div class="add-but">		<div class="add-but">
	<el-button type="primary" icon="Plus" @click="algorithmManage.toAdd" plain		<el-button type="primary" icon="Plus" @click="createPoint" plain
	>新增点位</el-button		>新增点位</el-button
	>		>
	</div>		</div>
	@@ -331,6 +331,15 @@ const aiAlarmPeriodTime = useIndex({
	detail: "/yunshou/aiAlarmPeriodTime/",		detail: "/yunshou/aiAlarmPeriodTime/",
	});		});
	const aiAlarmPeriodTimeList = ref([]);		const aiAlarmPeriodTimeList = ref([]);

			/* 新增点位 */
			function createPoint() {
			const searchValue = unref(algorithmManage.search);
			if (searchValue.regionalId) {
			algorithmManage.form.value.regionalId = searchValue.regionalId;
			}
			algorithmManage.toAdd();
			}
	function configProTime(data) {		function configProTime(data) {
	aiAlarmPeriodTime.getList({ regionalLocationId: data.id });		aiAlarmPeriodTime.getList({ regionalLocationId: data.id });
	algorithmManage.getDetail(data.id).then(({ data }) => {		algorithmManage.getDetail(data.id).then(({ data }) => {
	@@ -375,7 +384,6 @@ const areaManger = useIndex(
	data.parents = data.regionPath.split(",");		data.parents = data.regionPath.split(",");
	},		},
	(data) => {		(data) => {
	algorithmManage.form.value.regionalId = data[0].id;
	algorithmManage.search.value.regionalId = data[0].id;		algorithmManage.search.value.regionalId = data[0].id;
	algorithmManage.getList();		algorithmManage.getList();
	}		}