Skip to content

A
ai-yunshou-vue
Commit 657abc7f authored by wp song's avatar wp song
Browse files
Options

点位管理

parent f98e1f1c
Show whitespace changes
Inline Side-by-side
Showing with 654 additions and 371 deletions
src/views/videoControl/pointControl/components/drawPoint.vue
View file @ 657abc7f
<template> <template>
<el-dialog <el-dialog v-model="algorithmManage.visible.value" width="60%" append-to-body>
v-model="open"
width="1000px"
append-to-body
>
<template v-slot:header> <template v-slot:header>
<div class="cleartitle" style="display: flex;justify-content: flex-start;align-items: center;"> <div
<img src="@/assets/images/logo_video.png" width="25px" alt=""> <span>{{title}}</span> class="cleartitle"
style="display: flex; justify-content: flex-start; align-items: center"
>
<img src="@/assets/images/logo_video.png" width="25px" alt="" />
<span>{{ title }}</span>
</div> </div>
</template> </template>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-row :gutter="10" class="mb8" style="justify-content: space-between;"> <el-row :gutter="10" class="mb8" style="justify-content: space-between">
<el-col :span="1.5"> <el-col :span="1.5">
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;"> <div
class="form-title"
style="
display: flex;
justify-content: flex-start;
align-items: center;
"
>
<span>基础信息</span> <span>基础信息</span>
</div> </div>
</el-col> </el-col>
<el-col :span="6.8" style="display: flex;"> <el-col :span="6.8" style="display: flex"> </el-col>
</el-col>
</el-row> </el-row>
<el-card class="left-list"> <div class="left-form">
<el-table v-loading="loading" :data="algLevelList"> <el-form
<el-table-column label="告警等级名称" align="center" prop="alarmName" /> ref="algLevelRef"
<el-table-column label="告警等级颜色" align="center" prop="alarmColor"> :model="unref(algorithmManage.form)"
:rules="rules"
label-position="left"
label-width="100px"
class="demo-form-inline"
>
<el-form-item
label="摄像头名称"
prop="deviceId"
v-if="unref(device.list).length"
>
<el-select
v-model="unref(algorithmManage.form).deviceId"
placeholder="请选择摄像头"
@change="handleDeviceChange"
>
<el-option
v-for="item in unref(device.list)"
:key="item.id"
:label="item.deviceName"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<!-- RTSP地址 -->
<el-form-item label="RTSP地址" prop="vedioUrl">
<el-input
v-model="unref(algorithmManage.form).videoUrl"
readonly
/>
</el-form-item>
<el-form-item label="是否重新拉流" prop="restartFlow">
<el-switch
v-model="unref(algorithmManage.form).restartFlow"
inline-prompt
active-text="是"
inactive-text="否"
active-value="true"
/>
</el-form-item>
<el-form-item label="重新拉流时间" prop="reStreamingTime">
<el-date-picker
v-model="unref(algorithmManage.form).reStreamingTime"
type="datetime"
/>
</el-form-item>
</el-form>
</div>
<div class="left-list">
<el-table
:data="
unref(algorithmManage.form).aiRegionalLocationList ||
aiAlgorithm.list.value
"
>
<el-table-column
label="算法名称"
align="center"
prop="algorithmName"
/>
<el-table-column label="选择" align="center" prop="alarmColor">
<template #default="scope"> <template #default="scope">
<span> <span>
<el-tag type="success" :style="{backgroundColor: scope.row.alarmColor,width:'50px'}">{{ }}</el-tag> <el-switch
v-model="scope.row.status"
active-value="0"
inactive-value="1"
></el-switch>
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="告警等级展示方式" align="center" prop="alarmShowType" /> <el-table-column
<el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width"> label="识别区域"
width="180"
align="center"
class-name="small-padding fixed-width"
>
<template #default="scope"> <template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button> <el-button
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button> link
type="primary"
@click="beginDraw(scope.row)"
v-hasPermi="['system:post:edit']"
>绘制</el-button
>
<el-button
link
type="primary"
@click="aiConfig(scope.$index,scope.row)"
v-hasPermi="['system:post:remove']"
>配置</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-card> </div>
</el-col>
<el-col :span="11" :offset="1" class="right-draw">
<div>
<el-button
@click="getPhoto"
v-if="!algorithmManage.form.value.liveMap"
>拍照取图</el-button
>
<el-button @click="getNewPhoto" v-else>重新取图</el-button>
<el-button @click="clearDraw">重绘标记</el-button>
<el-button @click="++drawIndex">重绘下一个</el-button>
</div>
<div class="right-draw-content">
<img
v-if="algorithmManage.form.value.liveMap"
:src="algorithmManage.form.value.liveMap"
class="drawImg"
alt=""
/>
<template v-else>
<video controls ref="videoEle" class="drawImg">
<source src="@/assets/movie.mp4" type="video/mp4" />
</video>
<canvas id="canvas"></canvas>
</template>
<svg
@click="pointDraw"
v-if="drawId && algorithmManage.form.value.liveMap"
class="drawSvg"
>
<title>多边形</title>
<polygon
:fill="item.fill"
stroke="blue"
stroke-width="1"
v-for="item in graph[drawId]"
:points="item.point"
:key="item.key"
/>
</svg>
</div>
<div class="right">
<el-button type="primary" @click="submit">确认</el-button>
<el-button type="primary" plain @click="algorithmManage.toClose"
>取消</el-button
>
</div>
</el-col> </el-col>
</el-row> </el-row>
</el-dialog>
<el-dialog title="算法配置" v-model="aiAlgorithm.visible.value" width="30%">
<el-form
ref="algorithmManage.formRef"
:model="aiAlgorithm.form"
label-width="80px"
>
<el-form-item label="算法名称" prop="algorithmName">
<el-input v-model="unref(aiAlgorithm.form).algorithmName" readonly />
</el-form-item>
<el-form-item label="告警间隔" prop="alarmInterval">
<el-input
placeholder="单位/秒"
v-model="unref(aiAlgorithm.form).alarmInterval"
/>
</el-form-item>
<el-form-item label="行为持续多长时间报警" prop="continueWarnTime">
<el-input
placeholder="单位/秒"
v-model="unref(aiAlgorithm.form).continueWarnTime"
/>
</el-form-item>
<el-form-item label="识别间隔（跳帧）" prop="identifyIntervals">
<el-input v-model="unref(aiAlgorithm.form).identifyIntervals" />
</el-form-item>
<el-form-item label="标签阈值" prop="labelThreshold">
<el-input v-model="unref(aiAlgorithm.form).labelThreshold" />
</el-form-item>
<div class="right">
<el-button type="primary" @click="sureConfig">确认</el-button>
<el-button type="primary" plain @click="aiAlgorithm.toClose"
>取消</el-button
>
</div>
</el-form>
</el-dialog> </el-dialog>
</template> </template>
<script setup> <script setup>
import { listAlgLevel, detailAlgLevel , addAlgLevel, updateAlgLevel, deleteAlgLevel} from "@/api/algorithmList/algorithmDown.js"; import { reactify } from "@vueuse/core";
const { proxy } = getCurrentInstance(); import { onMounted, ref, unref } from "vue";
const emit = defineEmits(); const { algorithmManage } = defineProps({ algorithmManage: Object });
const open = ref(false); import { useIndex } from "../hooks";
const openAdd = ref(false); import { colors, drawImage } from "../utils";
const butLoading = ref(false); const device = useIndex({
const title = ref(""); list: "/yunshou/aiDevice/list",
const titleLevel = ref("");
const loading = ref(true);
const algLevelList = ref([]);
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
postCode: undefined,
},
rules: {
alarmName: [{ required: true, message: "告警等级名称不能为空", trigger: "blur" }],
postCode: [{ required: true, message: "岗位编码不能为空", trigger: "blur" }],
postSort: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],
}
}); });
const aiAlgorithm = useIndex({
const { queryParams, form, rules } = toRefs(data); list: "/yunshou/aiAlgorithmConfig/list",
detail: "/yunshou/aiAlgorithmConfig/",
/** 表单重置 */ });
function reset() { function handleDeviceChange(e, index) {
butLoading.value = false; const d = device.list.value.find((x) => x.id == e);
form.value = { algorithmManage.form.value.videoUrl = d.videoUrl;
id: undefined,
alarmName: undefined,
alarmColor: '#409EFF',
alarmShowType: []
};
proxy.resetForm("algLevelRef");
} }
/** 查询算法列表 */ function submit() {
function getLevelList() { let algorithms = [];
loading.value = true; if (algorithmManage.form.value.id) {
listAlgLevel(queryParams.value).then(response => { algorithms = unref(algorithmManage.form).aiRegionalLocationList;
algLevelList.value = response.rows } else {
loading.value = false; algorithmManage.form.value.runningState = 0;
unref(aiAlgorithm.list).forEach((val) => {
algorithms.push({
algorithmId: val.id,
drawingArea: graph[val.id]
? JSON.stringify(graph[val.id])
: val.drawingArea
? val.drawingArea
: "",
status: val.status,
...val.params,
}); });
});
}
algorithmManage.form.value.algorithms = algorithms;
algorithmManage.toSubmit();
} }
const configIndex = ref(0);
/** 新增按钮操作 */ function aiConfig(index,e) {
function handleAdd() { configIndex.value = index;
open.value = true; const current = unref(aiAlgorithm.list)[index];
title.value = "告警等级列表"; aiAlgorithm.form.value = algorithmManage.form.value.id
getLevelList() ? e
: {
algorithmName: current.algorithmName,
};
aiAlgorithm.visible.value = true;
} }
/** 等级新增按钮操作 */ // 确认配置
function handleLevelAdd() { function sureConfig() {
reset(); if (algorithmManage.form.value.id) {
openAdd.value = true; const current = unref(algorithmManage.form).aiRegionalLocationList[
titleLevel.value = "新增告警等级"; configIndex.value
];
unref(algorithmManage.form).aiRegionalLocationList[configIndex.value] = {
...current,
...unref(aiAlgorithm.form),
};
} else {
unref(aiAlgorithm.list)[configIndex.value].params = unref(aiAlgorithm.form);
}
aiAlgorithm.toClose();
} }
let drawId = ref();
let drawIndex = ref(0);
const graph = reactive({});
/** 修改按钮操作 */ const videoEle = ref(null);
function handleUpdate(row) { function getPhoto() {
reset(); algorithmManage.form.value.liveMap = drawImage(videoEle.value);
const id = row.id || ids.value;
detailAlgLevel(id).then(response => {
form.value = response.data;
form.value.alarmShowType=form.value.alarmShowType.split(',')
openAdd.value = true;
titleLevel.value = "修改告警等级";
});
} }
/* 重新取图 */
/** 提交按钮 */ function getNewPhoto() {
function submitForm() { unref(algorithmManage.form).liveMap = "";
proxy.$refs["algLevelRef"].validate(valid => { for (let key in graph) {
if (valid) { graph[key] = [];
form.value.alarmShowType=form.value.alarmShowType.join()
butLoading.value = true;
if (form.value.id != undefined) {
updateAlgLevel(form.value).then(response => {
proxy.$modal.msgSuccess("修改成功");
openAdd.value = false;
butLoading.value = false;
getLevelList();
});
} else {
addAlgLevel(form.value).then(response => {
proxy.$modal.msgSuccess("新增成功");
openAdd.value = false;
butLoading.value = false;
getLevelList();
});
} }
}
function beginDraw(e) {
drawId.value = e.id;
if (typeof e.drawingArea == "string" && e.drawingArea) {
graph[e.id] = JSON.parse(e.drawingArea);
} }
}); drawIndex.value = graph[drawId.value] ? graph[drawId.value].length : 0;
} }
/** 取消按钮 */ function clearDraw() {
function cancel() { graph[drawId.value] = [];
openAdd.value = false; drawIndex.value = 0;
reset();
} }
/** 删除按钮操作 */ function pointDraw(e) {
function handleDelete(row) { if (!graph[drawId.value]) {
const id = row.id || ids.value; graph[drawId.value] = [];
proxy.$modal.confirm('删除后，已配置的告警等级将被清空').then(function() {
return deleteAlgLevel(id);
}).then(() => {
getLevelList();
proxy.$modal.msgSuccess("删除成功");
}).catch(() => {});
} }
defineExpose({ handleAdd , handleUpdate }) if (!graph[drawId.value][drawIndex.value]) {
graph[drawId.value][drawIndex.value] = {
fill: colors(),
point: "",
};
}
graph[drawId.value][drawIndex.value].point += `${e.offsetX},${e.offsetY} `;
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.form-title{ .form-title {
display: flex; display: flex;
align-items:center;/*for vertical align*/ align-items: center; /*for vertical align*/
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
border-radius: 5px; border-radius: 5px;
padding: 0; padding: 0;
} }
.form-title::before{ .form-title::before {
content:""; content: "";
display: inline-block; display: inline-block;
width: 10px; /* 矩形的宽度 */ width: 10px; /* 矩形的宽度 */
height: 30px; /* 矩形的高度 */ height: 30px; /* 矩形的高度 */
background-color: #1890FF; /* 矩形的背景颜色 */ background-color: #1890ff; /* 矩形的背景颜色 */
margin-right: 10px; margin-right: 10px;
border-radius: 8px; border-radius: 8px;
}
.drawImg {
width: 100%;
height: 100%;
}
.right {
text-align: right;
}
.right-draw {
display: grid;
grid-template-rows: 30px 1fr 30px;
gap: 20px;
.right-draw-content {
position: relative;
svg {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
} }
}
</style> </style>
\ No newline at end of file
src/views/videoControl/pointControl/hooks/index.js
View file @ 657abc7f
import { onMounted, ref, watch } from "vue"; import { onMounted, ref, watch } from "vue";
import request from "@/utils/request"; import request from "@/utils/request";
import { ElMessageBox } from "element-plus"; import { ElMessageBox } from "element-plus";
function useIndex(apis) { function useIndex(apis, callback) {
const visible = ref(false); const visible = ref(false);
const search = ref({});
const form = ref({ const form = ref({
regionName:'' regionName: "",
}); });
const list = ref([]); const list = ref([]);
const page = ref({
pageNum: 1,
pageSize: 10,
total: 0,
});
watch( watch(
() => visible, () => visible.value,
(newVal) => { (newVal) => {
if (newVal == false) { if (newVal == false) {
form.value = {}; form.value = {};
...@@ -17,7 +23,9 @@ function useIndex(apis) { ...@@ -17,7 +23,9 @@ function useIndex(apis) {
} }
); );
function toView() {} watch([() => page.value.pageNum, () => page.value.pageSize], (val) => {
getList();
});
function toEdit(data) { function toEdit(data) {
getDetail(data.id); getDetail(data.id);
visible.value = true; visible.value = true;
...@@ -25,24 +33,31 @@ function useIndex(apis) { ...@@ -25,24 +33,31 @@ function useIndex(apis) {
function toAdd() { function toAdd() {
visible.value = true; visible.value = true;
} }
function toDel(data) { function toDel(data, immclose = true) {
//弹框确认 //弹框确认
ElMessageBox.confirm("是否删除该区域？").then(() => { return new Promise((resolve) => {
ElMessageBox.confirm("是否删除？").then(() => {
request({ request({
url: apis.delete + data.id, url: apis.delete + data.id,
method: "delete", method: "delete",
}).then((res) => { }).then((res) => {
if (immclose) {
visible.value = false; visible.value = false;
getList(); getList();
}
resolve();
});
}); });
}); });
} }
function getList() { function getList(params) {
request({ request({
url: apis.list, url: apis.list,
method: "get", method: "get",
params: { ...params, ...page.value, ...search.value },
}).then((res) => { }).then((res) => {
list.value = res.data; list.value = res.data || res.rows;
page.value.total = res.total;
}); });
} }
function getDetail(id) { function getDetail(id) {
...@@ -50,18 +65,24 @@ function useIndex(apis) { ...@@ -50,18 +65,24 @@ function useIndex(apis) {
url: apis.detail + id, url: apis.detail + id,
method: "get", method: "get",
}).then((res) => { }).then((res) => {
callback && callback(res);
form.value = res.data; form.value = res.data;
return res;
}); });
} }
function toSubmit() { function toSubmit(immclose = true) {
return new Promise((resolve, reject) => {
if (form.value.id) { if (form.value.id) {
request({ request({
url: apis.edit, url: apis.edit,
method: "put", method: "put",
data: form.value, data: form.value,
}).then((res) => { }).then((res) => {
if (immclose) {
visible.value = false; visible.value = false;
getList(); getList();
}
resolve();
}); });
} else { } else {
request({ request({
...@@ -69,31 +90,41 @@ function useIndex(apis) { ...@@ -69,31 +90,41 @@ function useIndex(apis) {
method: "post", method: "post",
data: form.value, data: form.value,
}).then((res) => { }).then((res) => {
if (immclose) {
visible.value = false; visible.value = false;
getList(); getList();
}
resolve();
}); });
} }
});
} }
function toClose() { function toClose() {
visible.value = false; visible.value = false;
} }
function toOpen() {
visible.value = false;
}
onMounted(() => { onMounted(() => {
if (apis.list) {
getList(); getList();
}
}); });
return { return {
visible, visible,
form, form,
list, list,
toView, page,
toEdit, toEdit,
toAdd, toAdd,
toDel, toDel,
getDetail, getDetail,
toClose, toClose,
toSubmit, toSubmit,
getList,
toOpen,
}; };
} }
......
src/views/videoControl/pointControl/index.scss
View file @ 657abc7f
.areaNodes{ .areaNodes {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
} }
.pagination-right {
display: flex;
justify-content: flex-end;
width: 100%;
margin-top: 20px;
}
.el-tree {
:deep(.is-current) {
& > .el-tree-node__content {
background-color: var(--el-color-primary-light-9);
}
}
}
src/views/videoControl/pointControl/index.vue
View file @ 657abc7f
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<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="handeAdd" plain <el-button type="primary" icon="Plus" @click="algorithmManage.toAdd" plain
>新增点位 {{ areaManger.visible }}</el-button >新增点位</el-button
> >
</div> </div>
<el-row :gutter="10"> <el-row :gutter="10">
...@@ -73,49 +73,62 @@ ...@@ -73,49 +73,62 @@
<span>{{ nowText }}</span> <span>{{ nowText }}</span>
</div> </div>
</template> </template>
<!-- <el-row :gutter="10" class="mb8"> <el-table v-loading="loading" :data="algorithmManage.list.value">
<el-col :span="1.5"> <el-table-column label="实况图" align="center" prop="postId">
<el-button type="primary" plain @click="handleUpdate">一分屏</el-button> <template #default="scope">
</el-col> <img
<el-col :span="1.5"> :src="scope.row.liveMap"
<el-button type="primary" plain @click="handleUpdate">四分屏</el-button> style="width: 60px; height: 40px"
</el-col> alt=""
<el-col :span="1.5"> />
<el-button type="primary" plain @click="handleDelete">六分屏</el-button> </template>
</el-col> </el-table-column>
</el-row> -->
<el-table v-loading="loading" :data="pointList">
<el-table-column label="实况图" align="center" prop="postId" />
<el-table-column <el-table-column
label="摄像头名称" label="摄像头名称"
align="center" align="center"
prop="postCode" prop="deviceName"
/> />
<el-table-column <el-table-column
label="所属区域" label="所属区域"
align="center" align="center"
prop="postName" prop="regionalName"
/>
<el-table-column
label="推理间隔（秒）"
align="center"
prop="postSort"
/> />
<!-- <el-table-column -->
<!-- label="推理间隔（秒）" -->
<!-- align="center" -->
<!-- prop="inferenceInterval" -->
<!-- /> -->
<el-table-column <el-table-column
label="关联算法" label="关联算法"
align="center" align="center"
prop="postSort" prop="algorithmCount"
/> />
<el-table-column <el-table-column label="时段配置" align="center" prop="postSort">
label="时段配置" <template #default="scope">
align="center" <el-button
prop="postSort" link
/> type="primary"
<el-table-column @click="configProTime(scope.row)"
label="运行状态" >配置</el-button
align="center" >
prop="postSort" </template>
</el-table-column>
<el-table-column label="运行状态" align="center" prop="postSort">
<template #default="scope">
<!-- <el-tag -->
<!-- :type="scope.row.runningState == '1' ? 'success' : 'danger'" -->
<!-- :size="scope.row.runningState == '1' ? 'medium' : 'small'" -->
<!-- >{{ -->
<!-- scope.row.runningState == "1" ? "运行中" : "未运行" -->
<!-- }}</el-tag -->
<!-- > -->
<el-switch
v-model:value="scope.row.runningState"
active-value="0"
inactive-value="1"
/> />
</template>
</el-table-column>
<el-table-column <el-table-column
label="操作" label="操作"
width="180" width="180"
...@@ -127,7 +140,7 @@ ...@@ -127,7 +140,7 @@
link link
type="primary" type="primary"
icon="Edit" icon="Edit"
@click="handleUpdate(scope.row)" @click="algorithmManage.toEdit(scope.row)"
v-hasPermi="['system:post:edit']" v-hasPermi="['system:post:edit']"
>修改</el-button >修改</el-button
> >
...@@ -135,19 +148,27 @@ ...@@ -135,19 +148,27 @@
link link
type="primary" type="primary"
icon="Delete" icon="Delete"
@click="handleDelete(scope.row)" @click="algorithmManage.toDel(scope.row)"
v-hasPermi="['system:post:remove']" v-hasPermi="['system:post:remove']"
>删除</el-button >删除</el-button
> >
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="pagination-right">
<el-pagination
background
v-model:current-page="unref(algorithmManage.page).pageNum"
v-model:page-size="unref(algorithmManage.page).pageSize"
:total="unref(algorithmManage.page).total"
layout="total, sizes, prev, pager, next, jumper"
/>
</div>
</el-card> </el-card>
</el-scrollbar> </el-scrollbar>
</el-col> </el-col>
</el-row> </el-row>
<drawPoint ref="drawPointRef" /> <drawPoint ref="drawPointRef" :algorithmManage="algorithmManage" />
<!-- 添加新增区域弹框 ，包含上级区域，区域名称，区域坐标，区域地址-->
<el-dialog <el-dialog
title="新增区域" title="新增区域"
v-model="areaManger.visible.value" v-model="areaManger.visible.value"
...@@ -163,6 +184,7 @@ ...@@ -163,6 +184,7 @@
:props="{ children: 'children', value: 'id', checkStrictly: true }" :props="{ children: 'children', value: 'id', checkStrictly: true }"
placeholder="请选择上级区域" placeholder="请选择上级区域"
clearable clearable
@change="handleChange"
/> />
</el-form-item> </el-form-item>
<el-form-item label="区域名称" prop="regionName"> <el-form-item label="区域名称" prop="regionName">
...@@ -171,24 +193,6 @@ ...@@ -171,24 +193,6 @@
placeholder="请输入区域名称" placeholder="请输入区域名称"
/> />
</el-form-item> </el-form-item>
<!-- <el-form-item label="区域层级路径" prop="regionPath"> -->
<!-- <el-input -->
<!-- v-model="areaManger.form.regionPath" -->
<!-- placeholder="区域层级路径" -->
<!-- /> -->
<!-- </el-form-item> -->
<!-- <el-form-item label="区域地址" prop="areaAddress"> -->
<!-- <el-input -->
<!-- v-model="areaManger.form.areaAddress" -->
<!-- placeholder="请输入区域地址" -->
<!-- /> -->
<!-- </el-form-item> -->
<!-- <el-form-item label="区域备注" prop="areaRemark"> -->
<!-- <el-input -->
<!-- v-model="areaManger.form.areaRemark" -->
<!-- placeholder="请输入区域备注" -->
<!-- /> -->
<!-- </el-form-item> -->
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
...@@ -197,6 +201,87 @@ ...@@ -197,6 +201,87 @@
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
<el-dialog
title="时段配置"
v-model="aiAlarmPeriodTime.visible.value"
width="45%"
>
<el-button style="margin-bottom: 10px" type="primary" @click="time.toAdd"
>新增时段配置</el-button
>
<el-table v-loading="loading" :data="aiAlarmPeriodTime.list.value">
<el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column label="算法名称" align="center" prop="algorithmName" />
<el-table-column label="告警时段" align="center">
<template #default="scope">
{{ scope.row.startTime }}-{{ scope.row.endTime }}
</template>
</el-table-column>
<el-table-column
label="操作"
width="180"
align="center"
class-name="small-padding fixed-width"
>
<template #default="scope">
<el-button
link
type="primary"
icon="Edit"
@click="timeEdit(scope.row)"
v-hasPermi="['system:post:edit']"
>修改</el-button
>
<el-button
link
type="primary"
icon="Delete"
@click="timeDel(scope.row)"
v-hasPermi="['system:post:remove']"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</el-dialog>
<el-dialog title="时段配置" v-model="time.visible.value" width="20%">
<el-form
ref="aiAlarmPeriodTime.formRef"
:model="aiAlarmPeriodTime.form"
label-width="80px"
>
<el-form-item label="算法名称" prop="algorithmName">
<el-select v-model="unref(aiAlarmPeriodTime.form).algorithmId">
<el-option
v-for="item in aiAlarmPeriodTimeList"
:key="item.id"
:label="item.algorithmName"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="开始时间" prop="alarmInterval">
<el-time-picker
v-model="unref(aiAlarmPeriodTime.form).startTime"
arrow-control
value-format="HH:mm"
/>
</el-form-item>
<el-form-item label="结束时间" prop="alarmInterval">
<el-time-picker
v-model="unref(aiAlarmPeriodTime.form).endTime"
arrow-control
value-format="HH:mm"
/>
</el-form-item>
<div class="right">
<el-button type="primary" @click="timeSure">确认</el-button>
<el-button type="primary" plain @click="time.toClose">取消</el-button>
</div>
</el-form>
</el-dialog>
</div> </div>
</template> </template>
...@@ -205,146 +290,100 @@ import drawPoint from "./components/drawPoint.vue"; ...@@ -205,146 +290,100 @@ import drawPoint from "./components/drawPoint.vue";
import { ArrowDown } from "@element-plus/icons-vue"; import { ArrowDown } from "@element-plus/icons-vue";
import { Search } from "@element-plus/icons-vue"; import { Search } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus"; import { ElMessageBox } from "element-plus";
import { reactive, ref, unref, watch, watchEffect } from "vue"; 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 drawPointRef = ref(null); const drawPointRef = ref(null);
const nowText = ref("点位管理"); const nowText = ref("点位管理");
const deptName = ref(""); const deptName = ref("");
const pointList = ref([]);
const loading = ref(false); const loading = ref(false);
const deptOptions = ref(undefined);
const algorithmList = reactive([
{
name: "我的算法",
value: 1,
},
{
name: "最新算法",
value: 2,
},
{
name: "基础算法",
value: 3,
},
{
name: "智慧煤矿",
value: 4,
},
{
name: "智慧能源",
value: 5,
},
{
name: "智慧校园",
value: 6,
},
{
name: "智慧港口",
value: 7,
},
{
name: "智慧煤矿",
value: 8,
},
{
name: "智慧能源",
value: 9,
},
{
name: "智慧校园",
value: 10,
},
]);
const data = reactive({
form: {
title: "测试测试测试",
},
queryParams: {
postCode: undefined,
searchValue: "",
status: undefined,
},
rules: {
postName: [
{ required: true, message: "岗位名称不能为空", trigger: "blur" },
],
postCode: [
{ required: true, message: "岗位编码不能为空", trigger: "blur" },
],
postSort: [
{ required: true, message: "岗位顺序不能为空", trigger: "blur" },
],
},
});
const { queryParams, form, rules } = toRefs(data);
/** 通过条件过滤节点 */ /** 通过条件过滤节点 */
const filterNode = (value, data) => { 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 areaManger = useIndex({ const time = useIndex({});
const aiAlarmPeriodTime = useIndex({
list: "/yunshou/aiAlarmPeriodTime/list",
add: "/yunshou/aiAlarmPeriodTime",
edit: "/yunshou/aiAlarmPeriodTime/",
delete: "/yunshou/aiAlarmPeriodTime/",
detail: "/yunshou/aiAlarmPeriodTime/",
});
const aiAlarmPeriodTimeList = ref([]);
function configProTime(data) {
aiAlarmPeriodTime.getList({ regionalLocationId: data.id });
algorithmManage.getDetail(data.id).then(({ data }) => {
aiAlarmPeriodTimeList.value = data.aiRegionalLocationList;
aiAlarmPeriodTime.form.value.deviceId = data.deviceId;
aiAlarmPeriodTime.form.value.regionalLocationId = data.id;
});
aiAlarmPeriodTime.toAdd();
}
function timeSure() {
aiAlarmPeriodTime.toSubmit(false).then(() => {
aiAlarmPeriodTime.getList({
regionalLocationId: aiAlarmPeriodTime.form.value.regionalLocationId,
});
aiAlarmPeriodTime.form.value.startTime = "";
aiAlarmPeriodTime.form.value.endTime = "";
aiAlarmPeriodTime.form.value.algorithmId = "";
time.toClose();
});
}
function timeEdit(data) {
aiAlarmPeriodTime.toEdit(data);
time.visible.value = true;
}
function timeDel(data) {
aiAlarmPeriodTime.toDel(data, false).then(() => {
aiAlarmPeriodTime.getList({
regionalLocationId: aiAlarmPeriodTime.form.value.regionalLocationId,
});
time.toClose();
});
}
const areaManger = useIndex(
{
list: "/yunshou/aiRegionManage/list", list: "/yunshou/aiRegionManage/list",
add: "/yunshou/aiRegionManage", add: "/yunshou/aiRegionManage",
edit: "yunshou/aiRegionManage", edit: "yunshou/aiRegionManage",
delete: "yunshou/aiRegionManage/", delete: "yunshou/aiRegionManage/",
detail: "/yunshou/aiRegionManage/", detail: "/yunshou/aiRegionManage/",
}); },
({ data }) => {
data.parents = data.regionPath.split(",").map((x) => Number(x));
}
);
const algorithmManage = useIndex(
{
list: "/yunshou/aiRegionalLocation/list",
add: "/yunshou/aiRegionalLocation",
edit: "/yunshou/aiRegionalLocation/",
delete: "/yunshou/aiRegionalLocation/",
detail: "/yunshou/aiRegionalLocation/",
},
({ data }) => {}
);
function submitAreaForm(e) { function submitAreaForm(e) {
areaManger.form.value.regionPath = areaManger.form.value.parents.join(","); const { form } = areaManger;
if (areaManger.form.value.id) { const valueForm = unref(form);
areaManger.form.value.parentId = valueForm.regionPath = valueForm.parents.join(",");
areaManger.form.parents[areaManger.form.value.parents.length - 2] ?? 0; if (valueForm.id) {
valueForm.parentId = valueForm.parents[valueForm.parents.length - 2] ?? 0;
} else { } else {
areaManger.form.value.parentId = valueForm.parentId = valueForm.parents[valueForm.parents.length - 1] ?? 0;
areaManger.form.parents[areaManger.form.value.parents.length - 1] ?? 0;
} }
areaManger.toSubmit(); areaManger.toSubmit();
// areaManger.value.visible = false;
// areaList();
} }
function handleNodeClick(e) {
function handleNodeClick(row) {} algorithmManage.form.value.regionalId = e.id;
areaManger.form.value.id = e.id;
function handeAdd(row) { algorithmManage.getList({ regionalId: e.id });
drawPointRef.value.handleAdd();
}
function handleSetSize(row) {
console.log(
"%c [ row ]-170",
"font-size:13px; background:pink; color:#bf2c9f;",
row
);
// reset();
// const postId = row.postId || ids.value;
// getPost(postId).then(response => {
// form.value = response.data;
// open.value = true;
// title.value = "修改岗位";
// });
}
function handleUpdate(row) {
// reset();
// const postId = row.postId || ids.value;
// getPost(postId).then(response => {
// form.value = response.data;
// open.value = true;
// title.value = "修改岗位";
// });
}
/** 删除按钮操作 */
function handleDelete(row) {
// const postIds = row.postId || ids.value;
// proxy.$modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？').then(function() {
// return delPost(postIds);
// }).then(() => {
// getList();
// proxy.$modal.msgSuccess("删除成功");
// }).catch(() => {});
} }
</script> </script>
......
src/views/videoControl/pointControl/utils/index.js 0 → 100644
View file @ 657abc7f
// 随机生成十个颜色
export const colors = () => {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
const a = 0.8;
return `rgba(${r},${g},${b},${a})`;
};
export function drawImage(video){
const img = video;
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.offsetWidth;
canvas.height = img.offsetHeight;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // 绘制图片
return canvas.toDataURL("image/jpg")
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment