Skip to content

A
ai-yunshou-vue
Commit 89befeef authored by 胡占生's avatar 胡占生 🇨🇳
Browse files
Options

Merge branch 'developer' of http://git.censoft.com.cn/ai-yunshou/ai-yunshou-vue into developer

parents e48045d6 0dbe1947
Hide whitespace changes
Inline Side-by-side
Showing with 830 additions and 301 deletions
src/views/videoControl/pointControl/components/drawPoint.vue
View file @ 89befeef
<template> <template>
<el-dialog <el-dialog v-model="algorithmManage.visible.value" width="60%" append-to-body>
v-model="open" <template v-slot:header>
width="1000px" <div
append-to-body class="cleartitle"
> style="display: flex; justify-content: flex-start; align-items: center"
<template v-slot:header> >
<div class="cleartitle" style="display: flex;justify-content: flex-start;align-items: center;"> <img src="@/assets/images/logo_video.png" width="25px" alt="" />
<img src="@/assets/images/logo_video.png" width="25px" alt=""> <span>{{title}}</span> <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
<span>基础信息</span> class="form-title"
</div> style="
</el-col> display: flex;
<el-col :span="6.8" style="display: flex;"> justify-content: flex-start;
align-items: center;
"
>
<span>基础信息</span>
</div>
</el-col> </el-col>
<el-col :span="6.8" style="display: flex"> </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="识别区域"
<template #default="scope"> width="180"
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button> align="center"
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button> class-name="small-padding fixed-width"
</template> >
<template #default="scope">
<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>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-card> </div>
</el-col> </el-col>
</el-row> <el-col :span="11" :offset="1" class="right-draw">
<div>
</el-dialog> <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-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>
</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) { function beginDraw(e) {
updateAlgLevel(form.value).then(response => { drawId.value = e.id;
proxy.$modal.msgSuccess("修改成功"); if (typeof e.drawingArea == "string" && e.drawingArea) {
openAdd.value = false; graph[e.id] = JSON.parse(e.drawingArea);
butLoading.value = false; }
getLevelList(); drawIndex.value = graph[drawId.value] ? graph[drawId.value].length : 0;
});
} else {
addAlgLevel(form.value).then(response => {
proxy.$modal.msgSuccess("新增成功");
openAdd.value = false;
butLoading.value = false;
getLevelList();
});
}
}
});
} }
/** 取消按钮 */ 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); if (!graph[drawId.value][drawIndex.value]) {
}).then(() => { graph[drawId.value][drawIndex.value] = {
getLevelList(); fill: colors(),
proxy.$modal.msgSuccess("删除成功"); point: "",
}).catch(() => {}); };
} }
defineExpose({ handleAdd , handleUpdate }) 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 0 → 100644
View file @ 89befeef
import { onMounted, ref, watch } from "vue";
import request from "@/utils/request";
import { ElMessageBox } from "element-plus";
function useIndex(apis, callback) {
const visible = ref(false);
const search = ref({});
const form = ref({
regionName: "",
});
const list = ref([]);
const page = ref({
pageNum: 1,
pageSize: 10,
total: 0,
});
watch(
() => visible.value,
(newVal) => {
if (newVal == false) {
form.value = {};
}
}
);
watch([() => page.value.pageNum, () => page.value.pageSize], (val) => {
getList();
});
function toEdit(data) {
getDetail(data.id);
visible.value = true;
}
function toAdd() {
visible.value = true;
}
function toDel(data, immclose = true) {
//弹框确认
return new Promise((resolve) => {
ElMessageBox.confirm("是否删除？").then(() => {
request({
url: apis.delete + data.id,
method: "delete",
}).then((res) => {
if (immclose) {
visible.value = false;
getList();
}
resolve();
});
});
});
}
function getList(params) {
request({
url: apis.list,
method: "get",
params: { ...params, ...page.value, ...search.value },
}).then((res) => {
list.value = res.data || res.rows;
page.value.total = res.total;
});
}
function getDetail(id) {
return request({
url: apis.detail + id,
method: "get",
}).then((res) => {
callback && callback(res);
form.value = res.data;
return res;
});
}
function toSubmit(immclose = true) {
return new Promise((resolve, reject) => {
if (form.value.id) {
request({
url: apis.edit,
method: "put",
data: form.value,
}).then((res) => {
if (immclose) {
visible.value = false;
getList();
}
resolve();
});
} else {
request({
url: apis.add,
method: "post",
data: form.value,
}).then((res) => {
if (immclose) {
visible.value = false;
getList();
}
resolve();
});
}
});
}
function toClose() {
visible.value = false;
}
function toOpen() {
visible.value = false;
}
onMounted(() => {
if (apis.list) {
getList();
}
});
return {
visible,
form,
list,
page,
toEdit,
toAdd,
toDel,
getDetail,
toClose,
toSubmit,
getList,
toOpen,
};
}
export { useIndex };
src/views/videoControl/pointControl/index.scss 0 → 100644
View file @ 89befeef
.areaNodes {
display: flex;
justify-content: space-between;
align-items: center;
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 @ 89befeef
...@@ -2,7 +2,9 @@ ...@@ -2,7 +2,9 @@
<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> <el-button type="primary" icon="Plus" @click="algorithmManage.toAdd" plain
>新增点位</el-button
>
</div> </div>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :xs="0" :sm="2" :md="3" :lg="4"> <el-col :xs="0" :sm="2" :md="3" :lg="4">
...@@ -10,7 +12,7 @@ ...@@ -10,7 +12,7 @@
<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"
...@@ -18,8 +20,8 @@ ...@@ -18,8 +20,8 @@
</div> </div>
<div class="head-container"> <div class="head-container">
<el-tree <el-tree
:data="deptOptions" :data="areaManger.list"
:props="{ label: 'label', children: 'children' }" :props="{ children: 'children' }"
:expand-on-click-node="false" :expand-on-click-node="false"
:filter-node-method="filterNode" :filter-node-method="filterNode"
ref="deptTreeRef" ref="deptTreeRef"
...@@ -27,7 +29,38 @@ ...@@ -27,7 +29,38 @@
highlight-current highlight-current
default-expand-all default-expand-all
@node-click="handleNodeClick" @node-click="handleNodeClick"
/> >
<template #default="{ node, data }">
<span class="areaNodes">
<span>{{ data.label }}</span>
<span>
<!-- 添加dropdown -->
<el-dropdown trigger="click">
<el-dropdown-link class="dropdown-link">
<el-button type="text" size="small">
<el-icon size="20" color="#333333"
><Setting
/></el-icon>
</el-button>
</el-dropdown-link>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="areaManger.toAdd(data)"
>新增子区域</el-dropdown-item
>
<el-dropdown-item @click="areaManger.toEdit(data)"
>编辑该区域</el-dropdown-item
>
<el-dropdown-item @click="areaManger.toDel(data)"
>删除该区域</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
</span>
</span>
</template></el-tree
>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
...@@ -40,182 +73,326 @@ ...@@ -40,182 +73,326 @@
<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-column
<el-table v-loading="loading" :data="pointList"> label="摄像头名称"
<el-table-column label="实况图" align="center" prop="postId" /> align="center"
<el-table-column label="摄像头名称" align="center" prop="postCode" /> prop="deviceName"
<el-table-column label="所属区域" align="center" prop="postName" /> />
<el-table-column label="推理间隔（秒）" align="center" prop="postSort" /> <el-table-column
<el-table-column label="关联算法" align="center" prop="postSort" /> label="所属区域"
<el-table-column label="时段配置" align="center" prop="postSort" /> align="center"
<el-table-column label="运行状态" align="center" prop="postSort" /> prop="regionalName"
<el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width"> />
<template #default="scope"> <!-- <el-table-column -->
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button> <!-- label="推理间隔（秒）" -->
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button> <!-- align="center" -->
</template> <!-- prop="inferenceInterval" -->
</el-table-column> <!-- /> -->
</el-table> <el-table-column
label="关联算法"
align="center"
prop="algorithmCount"
/>
<el-table-column label="时段配置" align="center" prop="postSort">
<template #default="scope">
<el-button
link
type="primary"
@click="configProTime(scope.row)"
>配置</el-button
>
</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
label="操作"
width="180"
align="center"
class-name="small-padding fixed-width"
>
<template #default="scope">
<el-button
link
type="primary"
icon="Edit"
@click="algorithmManage.toEdit(scope.row)"
v-hasPermi="['system:post:edit']"
>修改</el-button
>
<el-button
link
type="primary"
icon="Delete"
@click="algorithmManage.toDel(scope.row)"
v-hasPermi="['system:post:remove']"
>删除</el-button
>
</template>
</el-table-column>
</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
title="新增区域"
v-model="areaManger.visible.value"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="50%"
>
<el-form ref="areaMangerRef" :model="areaManger.form" label-width="120px">
<el-form-item label="上级区域" prop="regionPath">
<el-cascader
v-model="unref(areaManger.form).parents"
:options="areaManger.list.value"
:props="{ children: 'children', value: 'id', checkStrictly: true }"
placeholder="请选择上级区域"
clearable
@change="handleChange"
/>
</el-form-item>
<el-form-item label="区域名称" prop="regionName">
<el-input
v-model="unref(areaManger.form).regionName"
placeholder="请输入区域名称"
/>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="areaManger.toClose">取 消</el-button>
<el-button type="primary" @click="submitAreaForm">确 定</el-button>
</span>
</template>
</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>
<script setup name="Index"> <script setup name="Index">
import drawPoint from './components/drawPoint.vue' 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 { onMounted, reactive, ref, unref, watch, watchEffect } from "vue";
import request from "@/utils/request";
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;
}; };
// function closeNow(){ const time = useIndex({});
// const routerArr=useTagsViewStore().visitedViews
// const nowPath=location.pathname
// return routerArr.filter(item=>{return item.path==nowPath })[0]
// }
// setTimeout(() => {
// nowText=closeNow()awdasa
// }, 500);
// function goTarget(url) {
// window.open(url, '__blank')
// }
function handleNodeClick(row) { 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() {
function handeAdd(row) { aiAlarmPeriodTime.toSubmit(false).then(() => {
drawPointRef.value.handleAdd(); aiAlarmPeriodTime.getList({
regionalLocationId: aiAlarmPeriodTime.form.value.regionalLocationId,
});
aiAlarmPeriodTime.form.value.startTime = "";
aiAlarmPeriodTime.form.value.endTime = "";
aiAlarmPeriodTime.form.value.algorithmId = "";
time.toClose();
});
} }
function timeEdit(data) {
function handleSetSize(row) { aiAlarmPeriodTime.toEdit(data);
console.log( time.visible.value = true;
"%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) { function timeDel(data) {
// reset(); aiAlarmPeriodTime.toDel(data, false).then(() => {
// const postId = row.postId || ids.value; aiAlarmPeriodTime.getList({
// getPost(postId).then(response => { regionalLocationId: aiAlarmPeriodTime.form.value.regionalLocationId,
// form.value = response.data; });
// open.value = true; time.toClose();
// title.value = "修改岗位"; });
// });
} }
const areaManger = useIndex(
{
list: "/yunshou/aiRegionManage/list",
add: "/yunshou/aiRegionManage",
edit: "yunshou/aiRegionManage",
delete: "yunshou/aiRegionManage/",
detail: "/yunshou/aiRegionManage/",
},
({ data }) => {
data.parents = data.regionPath.split(",").map((x) => Number(x));
}
);
/** 删除按钮操作 */ const algorithmManage = useIndex(
function handleDelete(row) { {
// const postIds = row.postId || ids.value; list: "/yunshou/aiRegionalLocation/list",
// proxy.$modal.confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？').then(function() { add: "/yunshou/aiRegionalLocation",
// return delPost(postIds); edit: "/yunshou/aiRegionalLocation/",
// }).then(() => { delete: "/yunshou/aiRegionalLocation/",
// getList(); detail: "/yunshou/aiRegionalLocation/",
// proxy.$modal.msgSuccess("删除成功"); },
// }).catch(() => {}); ({ data }) => {}
);
function submitAreaForm(e) {
const { form } = areaManger;
const valueForm = unref(form);
valueForm.regionPath = valueForm.parents.join(",");
if (valueForm.id) {
valueForm.parentId = valueForm.parents[valueForm.parents.length - 2] ?? 0;
} else {
valueForm.parentId = valueForm.parents[valueForm.parents.length - 1] ?? 0;
}
areaManger.toSubmit();
}
function handleNodeClick(e) {
algorithmManage.form.value.regionalId = e.id;
areaManger.form.value.id = e.id;
algorithmManage.getList({ regionalId: e.id });
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import url("./index.scss");
.left-list { .left-list {
min-height: 700px; min-height: 700px;
} }
.add-but{ .add-but {
position: absolute; position: absolute;
display: flex; display: flex;
top: 30px; top: 30px;
...@@ -237,7 +414,7 @@ function handleDelete(row) { ...@@ -237,7 +414,7 @@ function handleDelete(row) {
} }
} }
} }
.danger-list{ .danger-list {
min-height: 700px; min-height: 700px;
.alg-list { .alg-list {
display: grid; display: grid;
...@@ -252,7 +429,8 @@ function handleDelete(row) { ...@@ -252,7 +429,8 @@ function handleDelete(row) {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
} }
.el-form-item--default,.el-form-item { .el-form-item--default,
.el-form-item {
font-size: 12px; font-size: 12px;
margin-bottom: 0px; margin-bottom: 0px;
} }
......
src/views/videoControl/pointControl/utils/index.js 0 → 100644
View file @ 89befeef
// 随机生成十个颜色
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
vite.config.js
View file @ 89befeef
...@@ -25,7 +25,7 @@ export default defineConfig(({ mode, command }) => { ...@@ -25,7 +25,7 @@ export default defineConfig(({ mode, command }) => {
}, },
// vite 相关配置 // vite 相关配置
server: { server: {
port: 80, port: 8090,
host: true, host: true,
open: true, open: true,
proxy: { proxy: {
...@@ -33,6 +33,7 @@ export default defineConfig(({ mode, command }) => { ...@@ -33,6 +33,7 @@ export default defineConfig(({ mode, command }) => {
'/dev-api': { '/dev-api': {
// target: 'http://192.168.14.43:8111/ai', // target: 'http://192.168.14.43:8111/ai',
target: 'http://192.168.4.206:80/ai', target: 'http://192.168.4.206:80/ai',
// target:'http://192.168.14.43:8111/ai',
changeOrigin: true, changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, '') rewrite: (p) => p.replace(/^\/dev-api/, '')
}, },
......
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