Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加前置绑定监测点功能

Browse Source
This commit is contained in:
GGJ
2025-04-28 15:52:40 +08:00
parent ec52564874
commit 4aac705a72
6 changed files with 175 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
src/views/pqs/business/terminal/FrontManagement/index.vue
View File

@@ -1,23 +1,65 @@
<template>
<div class="default-main">
<TableHeader>
<template v-slot:select>
<el-form-item label="前置等级">
<el-select v-model="tableStore.table.params.nodeGrade" clearable placeholder="请选择前置等级">
<el-option v-for="item in fontdveoption" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="tableStore.table.params.searchState" clearable placeholder="请选择状态">
<el-option v-for="item in statusoption" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</template>
<template v-slot:operation>
<el-button type="primary" class="ml10" @click="add" icon="el-icon-Plus">新增</el-button>
</template>
</TableHeader>
<Table ref="tableRef"></Table>
<div class="default">
<div style="flex: 1">
<TableHeader>
<template v-slot:select>
<el-form-item label="前置等级">
<el-select
v-model="tableStore.table.params.nodeGrade"
clearable
placeholder="请选择前置等级"
>
<el-option
v-for="item in fontdveoption"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="tableStore.table.params.searchState" clearable placeholder="请选择状态">
<el-option
v-for="item in statusoption"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</template>
<template v-slot:operation>
<el-button type="primary" class="ml10" @click="add" icon="el-icon-Plus">新增</el-button>
</template>
</TableHeader>
<Table
ref="tableRef"
:row-config="{ isCurrent: true, isHover: true }"
@current-change="currentChangeEvent"
></Table>
</div>
<div class="pd10" style="width: 400px">
<el-tree
style="max-width: 600px"
:data="dataSource"
node-key="id"
default-expand-all
:expand-on-click-node="false"
>
<template #default="{ node, data }">
<div class="custom-tree-node">
<span>{{ node.label }}</span>
<div>
<el-button type="primary" link>Append</el-button>
<el-button style="margin-left: 4px" type="danger" link>删除</el-button>
</div>
</div>
</template>
</el-tree>
</div>
</div>
<el-dialog
draggable
:title="dialogTitle"
@@ -52,7 +94,7 @@
></el-input>
</el-form-item>
<el-form-item label="最大进程数:" prop="maxProcessNum" class="top">
<el-input
<el-input
v-model="formData.maxProcessNum"
onkeyup="value = value.replace(/[^0-9]/g,'')"
maxlength="5"
@@ -84,15 +126,20 @@
<el-button type="primary" @click="onSubmit">确 定</el-button>
</template>
</el-dialog>
<!-- 绑定监测点 -->
<Bind ref="bindRef" />
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, nextTick } from 'vue'
import { addNode, delNode, updateNode } from '@/api/device-boot/Business.ts'
import { addNode, delNode, updateNode, nodeDeviceTree } from '@/api/device-boot/Business'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ElButton } from 'element-plus'
import type Node from 'element-plus/es/components/tree/src/model/node'
import Bind from './bind.vue'
defineOptions({
name: 'BusinessAdministrator/TerminalManagement/FrontManagement'
})
@@ -106,8 +153,8 @@ const statusoption: any = ref([
{ id: 0, name: '未启用' },
{ id: 1, name: '启用' }
])
const bindRef = ref()
const tableRef = ref()
const ruleFormRef = ref()
const formData: any = ref({
@@ -228,8 +275,21 @@ const tableStore = new TableStore({
delete tableStore.table.params[key]
}
}
},
loadCallback: () => {
tableRef.value.getRef().setCurrentRow(tableStore.table.data[0])
currentChangeEvent()
}
})
// 点击行
const currentChangeEvent = () => {
nodeDeviceTree().then(res => {})
const row = tableRef.value.getRef().getCurrentRecord()
console.log('🚀 ~ currentChangeEvent ~ row:', row)
}
const bind = () => {}
tableStore.table.params.orderBy = 'desc'
tableStore.table.params.nodeGrade = ''
tableStore.table.params.searchState = ''
@@ -279,7 +339,36 @@ onMounted(() => {
tableStore.index()
}, 100)
})
const dataSource = ref([
{
id: 2,
label: 'Level one 2',
children: [
{
id: 5,
label: 'Level two 2-1'
},
{
id: 6,
label: 'Level two 2-2'
}
]
},
{
id: 3,
label: 'Level one 3',
children: [
{
id: 7,
label: 'Level two 3-1'
},
{
id: 8,
label: 'Level two 3-2'
}
]
}
])
const addMenu = () => {}
</script>
<style lang="scss" scoped>
@@ -308,4 +397,19 @@ const addMenu = () => {}
height: 140px;
}
}
:deep(.default) {
display: flex;
.row--current {
background-color: var(--el-color-primary-light-8) !important;
}
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
width: 300px;
}
</style>