Merge branch 'developer' of http://git.censoft.com.cn/ai-yunshou/ai-yunshou-vue into developer (961d388e) · Commits · AI云守 / ai-yunshou-vue · GitLab

dist.zip

+408 B (3.69 MiB)

File changed.

No diff preview for this file type.

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

+101 −37

Original line number	Original line	Diff line number	Diff line
	@@ -37,7 +37,7 @@
	>		>
	<el-form-item		<el-form-item
	label="区域管理"		label="区域管理"
	prop="deviceId"		prop="regionalId"
	v-if="unref(device.list).length"		v-if="unref(device.list).length"
	>		>
	<el-cascader		<el-cascader
	@@ -51,7 +51,6 @@
	}"		}"
	placeholder="请选择上级区域"		placeholder="请选择上级区域"
	clearable		clearable
	@change="handleChange"
	/>		/>
	</el-form-item>		</el-form-item>
	<el-form-item label="点位名称" prop="locationName">		<el-form-item label="点位名称" prop="locationName">
	@@ -167,8 +166,18 @@
	</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">
			<text
			x="0"
			y="0"
			font-family="Arial"
			font-size="20"
			fill="blue"
			text-anchor="middle"
			>
			多边形
			</text>
	<polygon		<polygon
	:fill="item.fill"		:fill="item.fill"
	stroke="blue"		stroke="blue"
	@@ -178,10 +187,39 @@
	: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>
	<!-- v-else -->
	<canvas id="video-canvas" class="drawImg"></canvas>		<canvas id="video-canvas" class="drawImg"></canvas>
	<canvas id="canvas" style="display: none"></canvas>		<canvas id="canvas" style="display: none"></canvas>
	</template>		</template>
	@@ -288,14 +326,15 @@

	<script setup>		<script setup>
	import { computed, onMounted, ref, unref, watch } from "vue";		import { computed, onMounted, ref, unref, watch } from "vue";
	const { algorithmManage, areaManger } = defineProps({
	algorithmManage: Object,
	areaManger: Object,
	});
	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({
			algorithmManage: Object,
			areaManger: Object,
			});
	const device = useIndex({		const device = useIndex({
	list: "/yunshou/aiDevice/list",		list: "/yunshou/aiDevice/list",
	});		});
	@@ -309,10 +348,6 @@ const aiAlgorithm = useIndex(
	false		false
	);		);

	onMounted(() => {
	aiAlgorithm.search.value.algorithmStatus = 0;
	aiAlgorithm.getList();
	});
	const rules = {		const rules = {
	// 区域管理		// 区域管理
	regionalId: [{ required: true, message: "请选择上级区域" }],		regionalId: [{ required: true, message: "请选择上级区域" }],
	@@ -339,19 +374,7 @@ const rules = {
	],		],
	};		};
	const algLevelRef = ref(null);		const algLevelRef = ref(null);
	watch(
	() => algorithmManage.visible.value,
	() => {
	if (algorithmManage.visible.value) {
	setTimeout(() => {
	algLevelRef.value.resetFields();
	algorithmManage.form.value = {
	regionalId: algorithmManage.search.value.regionalId,
	};
	});
	}
	}
	);
	const isEdit = false;		const isEdit = false;
	let aiAlgorithmLabel = useIndex(		let aiAlgorithmLabel = useIndex(
	//新增调用算法label		//新增调用算法label
	@@ -378,6 +401,10 @@ watch(
	null,		null,
	false		false
	);		);
			// console.log(algorithmManage.form.value.aiRegionalLocationList)
			algorithmManage.form.value.aiRegionalLocationList.forEach((val) => {
			graph[val.id] = val.drawingArea && JSON.parse(val.drawingArea);
			});
	}		}
	);		);
	function handleDeviceChange(e, index) {		function handleDeviceChange(e, index) {
	@@ -387,6 +414,8 @@ function handleDeviceChange(e, index) {
	}		}
	onMounted(() => {		onMounted(() => {
	getVideos();		getVideos();
			aiAlgorithm.search.value.algorithmStatus = 0;
			aiAlgorithm.getList();
	});		});

	const ImgUrl = computed(() => {		const ImgUrl = computed(() => {
	@@ -580,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);
	@@ -588,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]) {
	@@ -599,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/hooks/index.js

+1 −1

Original line number	Original line	Diff line number	Diff line
	@@ -143,7 +143,7 @@ function useIndex(apis, callback, listReady, immList = true) {
	getList,		getList,
	toOpen,		toOpen,
	search,		search,
	editSubmit		editSubmit,
	};		};
	}		}

src/views/videoControl/pointControl/index.vue

+37 −21

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>
	@@ -10,13 +10,13 @@
	<el-col :xs="0" :sm="2" :md="3" :lg="4">		<el-col :xs="0" :sm="2" :md="3" :lg="4">
	<el-card class="left-list">		<el-card class="left-list">
	<div class="head-container">		<div class="head-container">
	<!-- <el-input -->		<el-input
	<!-- v-model="deptName" -->		v-model="deptName"
	<!-- placeholder="请输入" -->		placeholder="请输入"
	<!-- clearable -->		clearable
	<!-- prefix-icon="Search" -->		prefix-icon="Search"
	<!-- style="margin-bottom: 20px" -->		style="margin-bottom: 20px"
	<!-- /> -->		/>
	</div>		</div>
	<div class="head-container">		<div class="head-container">
	<el-tree		<el-tree
	@@ -30,10 +30,10 @@
	default-expand-all		default-expand-all
	@node-click="handleNodeClick"		@node-click="handleNodeClick"
	>		>
	<template #default="{ node, data }">		<template #default="{ node, data, index }">
	<span class="areaNodes">		<span class="areaNodes">
	<span>{{ data.label }}</span>		<span>{{ data.label }}</span>
	<span>		<span @click.stop>
	<!-- 添加dropdown -->		<!-- 添加dropdown -->
	<el-dropdown trigger="click">		<el-dropdown trigger="click">
	<el-dropdown-link class="dropdown-link">		<el-dropdown-link class="dropdown-link">
	@@ -51,7 +51,9 @@
	<el-dropdown-item @click="areaManger.toEdit(data)"		<el-dropdown-item @click="areaManger.toEdit(data)"
	>编辑该区域</el-dropdown-item		>编辑该区域</el-dropdown-item
	>		>
	<el-dropdown-item @click="areaManger.toDel(data)"		<el-dropdown-item
			v-if="node.level != 1"
			@click="areaManger.toDel(data)"
	>删除该区域</el-dropdown-item		>删除该区域</el-dropdown-item
	>		>
	</el-dropdown-menu>		</el-dropdown-menu>
	@@ -305,7 +307,7 @@ import { onMounted, reactive, ref, unref, watch, watchEffect } from "vue";
	import request from "@/utils/request";		import request from "@/utils/request";
	import { useIndex } from "./hooks";		import { useIndex } from "./hooks";
	const { proxy } = getCurrentInstance();		const { proxy } = getCurrentInstance();
	const globalScreenHeight = inject('globalScreenHeight');		const globalScreenHeight = inject("globalScreenHeight");
	const drawPointRef = ref(null);		const drawPointRef = ref(null);
	const nowText = ref("点位管理");		const nowText = ref("点位管理");
	const deptName = ref("");		const deptName = ref("");
	@@ -315,7 +317,10 @@ const filterNode = (value, data) => {
	if (!value) return true;		if (!value) return true;
	return data.label.indexOf(value) !== -1;		return data.label.indexOf(value) !== -1;
	};		};
			const deptTreeRef = ref(null);
			watch(deptName, (val) => {
			deptTreeRef.value.filter(val);
			});
	const time = useIndex({});		const time = useIndex({});

	const aiAlarmPeriodTime = useIndex({		const aiAlarmPeriodTime = useIndex({
	@@ -326,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 }) => {
	@@ -367,10 +381,9 @@ const areaManger = useIndex(
	detail: "/yunshou/aiRegionManage/",		detail: "/yunshou/aiRegionManage/",
	},		},
	({ data }) => {		({ data }) => {
	data.parents = data.regionPath.split(",").map((x) => Number(x));		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();
	}		}
	@@ -391,15 +404,18 @@ const algorithmManage = useIndex(
	function submitAreaForm(e) {		function submitAreaForm(e) {
	const { form } = areaManger;		const { form } = areaManger;
	const valueForm = unref(form);		const valueForm = unref(form);
	valueForm.regionPath = valueForm.parents.join(",");		if (valueForm.parents) {
			valueForm.regionPath = valueForm.parents?.join(",");
	if (valueForm.id) {		if (valueForm.id) {
	valueForm.parentId = valueForm.parents[valueForm.parents.length - 2] ?? 0;		valueForm.parentId = valueForm.parents[valueForm.parents.length - 2] ?? 0;
	} else {		} else {
	valueForm.parentId = valueForm.parents[valueForm.parents.length - 1] ?? 0;		valueForm.parentId = valueForm.parents[valueForm.parents.length - 1] ?? 0;
	}		}
			}
	areaManger.toSubmit();		areaManger.toSubmit();
	}		}
	function handleNodeClick(e) {		function handleNodeClick(e) {
			console.log(e);
	algorithmManage.form.value.regionalId = e.id;		algorithmManage.form.value.regionalId = e.id;
	algorithmManage.search.value.regionalId = e.id;		algorithmManage.search.value.regionalId = e.id;
	algorithmManage.search.value.status = 0;		algorithmManage.search.value.status = 0;