Skip to content

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

feat点位管理，页面初始化，新增页面int

parent 0d01993a
Show whitespace changes
Inline Side-by-side
Showing with 452 additions and 0 deletions
src/views/videoControl/pointControl/components/drawPoint.vue 0 → 100644
View file @ 7043e66a
<template>
<el-dialog
v-model="open"
width="1000px"
append-to-body
>
<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=""> <span>{{title}}</span>
</div>
</template>
<el-row>
<el-col :span="12">
<el-row :gutter="10" class="mb8" style="justify-content: space-between;">
<el-col :span="1.5">
<div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
<span>基础信息</span>
</div>
</el-col>
<el-col :span="6.8" style="display: flex;">
</el-col>
</el-row>
<el-card class="left-list">
<el-table v-loading="loading" :data="algLevelList">
<el-table-column label="告警等级名称" align="center" prop="alarmName" />
<el-table-column label="告警等级颜色" align="center" prop="alarmColor">
<template #default="scope">
<span>
<el-tag type="success" :style="{backgroundColor: scope.row.alarmColor,width:'50px'}">{{ }}</el-tag>
</span>
</template>
</el-table-column>
<el-table-column label="告警等级展示方式" align="center" prop="alarmShowType" />
<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="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
</el-dialog>
</template>
<script setup>
import { listAlgLevel, detailAlgLevel , addAlgLevel, updateAlgLevel, deleteAlgLevel} from "@/api/algorithmList/algorithmDown.js";
const { proxy } = getCurrentInstance();
const emit = defineEmits();
const open = ref(false);
const openAdd = ref(false);
const butLoading = ref(false);
const title = ref("");
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 { queryParams, form, rules } = toRefs(data);
/** 表单重置 */
function reset() {
butLoading.value = false;
form.value = {
id: undefined,
alarmName: undefined,
alarmColor: '#409EFF',
alarmShowType: []
};
proxy.resetForm("algLevelRef");
}
/** 查询算法列表 */
function getLevelList() {
loading.value = true;
listAlgLevel(queryParams.value).then(response => {
algLevelList.value = response.rows
loading.value = false;
});
}
/** 新增按钮操作 */
function handleAdd() {
open.value = true;
title.value = "告警等级列表";
getLevelList()
}
/** 等级新增按钮操作 */
function handleLevelAdd() {
reset();
openAdd.value = true;
titleLevel.value = "新增告警等级";
}
/** 修改按钮操作 */
function handleUpdate(row) {
reset();
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 submitForm() {
proxy.$refs["algLevelRef"].validate(valid => {
if (valid) {
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 cancel() {
openAdd.value = false;
reset();
}
/** 删除按钮操作 */
function handleDelete(row) {
const id = row.id || ids.value;
proxy.$modal.confirm('删除后，已配置的告警等级将被清空').then(function() {
return deleteAlgLevel(id);
}).then(() => {
getLevelList();
proxy.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
defineExpose({ handleAdd , handleUpdate })
</script>
<style scoped lang="scss">
.form-title{
display: flex;
align-items:center;/*for vertical align*/
font-size: 16px;
font-weight: 600;
border-radius: 5px;
padding: 0;
}
.form-title::before{
content:"";
display: inline-block;
width: 10px; /* 矩形的宽度 */
height: 30px; /* 矩形的高度 */
background-color: #1890FF; /* 矩形的背景颜色 */
margin-right: 10px;
border-radius: 8px;
}
</style>
\ No newline at end of file
src/views/videoControl/pointControl/index.vue 0 → 100644
View file @ 7043e66a
<template>
<div class="app-container home">
<TabTitle :text="nowText" />
<div class="add-but">
<el-button type="primary" icon="Plus" @click="handeAdd" plain>新增点位</el-button>
</div>
<el-row :gutter="10">
<el-col :xs="0" :sm="2" :md="3" :lg="4">
<el-card class="left-list">
<div class="head-container">
<el-input
v-model="deptName"
placeholder="请输入部门名称"
clearable
prefix-icon="Search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container">
<el-tree
:data="deptOptions"
:props="{ label: 'label', children: 'children' }"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="deptTreeRef"
node-key="id"
highlight-current
default-expand-all
@node-click="handleNodeClick"
/>
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="16" :md="16" :lg="20">
<el-scrollbar height="700px">
<el-card class="right-list">
<template v-slot:header>
<div class="cleartitle" style="justify-content: flex-start">
<img src="@/assets/images/logo_video.png" width="25px" alt />
<span>{{ nowText }}</span>
</div>
</template>
<!-- <el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain @click="handleUpdate">一分屏</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="primary" plain @click="handleUpdate">四分屏</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="primary" plain @click="handleDelete">六分屏</el-button>
</el-col>
</el-row> -->
<el-table v-loading="loading" :data="pointList">
<el-table-column label="实况图" align="center" prop="postId" />
<el-table-column label="摄像头名称" align="center" prop="postCode" />
<el-table-column label="所属区域" align="center" prop="postName" />
<el-table-column label="推理间隔（秒）" align="center" prop="postSort" />
<el-table-column label="关联算法" align="center" prop="postSort" />
<el-table-column label="时段配置" align="center" prop="postSort" />
<el-table-column label="运行状态" align="center" prop="postSort" />
<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="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</el-scrollbar>
</el-col>
</el-row>
<drawPoint ref="drawPointRef" />
</div>
</template>
<script setup name="Index">
import drawPoint from './components/drawPoint.vue'
import { ArrowDown } from "@element-plus/icons-vue";
import { Search } from "@element-plus/icons-vue";
const { proxy } = getCurrentInstance();
const drawPointRef = ref(null);
const nowText = ref("点位管理");
const deptName = ref("");
const pointList = ref([]);
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) => {
if (!value) return true;
return data.label.indexOf(value) !== -1;
};
// function closeNow(){
// 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) {
}
function handeAdd(row) {
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>
<style scoped lang="scss">
.left-list {
min-height: 700px;
}
.add-but{
position: absolute;
display: flex;
top: 30px;
right: 30px;
}
.right-list {
min-height: 700px;
.alg-list {
display: grid;
// grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
.el-card {
border: 1px soild #ff6700;
}
.alg-item {
width: 100%;
// min-height: 350px;
position: relative;
}
}
}
.danger-list{
min-height: 700px;
.alg-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
.el-card {
border: 1px soild #ff6700;
}
.alg-item {
width: 100%;
// min-height: 350px;
cursor: pointer;
position: relative;
}
.el-form-item--default,.el-form-item {
font-size: 12px;
margin-bottom: 0px;
}
}
}
.cleartitle {
font-size: 16px;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
\ 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