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

前置管理

Browse Source
This commit is contained in:
sjl
2025-10-17 09:55:43 +08:00
parent d9def45a8b
commit 1211277a0d
6 changed files with 825 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/api/cs-device-boot/frontManagement.ts Normal file
View File

@@ -0,0 +1,56 @@
import createAxios from '@/utils/request'
// 新增前置机
export function addNode(data: any) {
return createAxios({
url: '/cs-device-boot/node/addNode',
method: 'post',
data: data
})
}
//修改前置机
export function updateNode(data: any) {
return createAxios({
url: '/cs-device-boot/node/updateNode',
method: 'put',
data: data
})
}
//删除前置机
export function delNode(data: any) {
return createAxios({
url: '/cs-device-boot/node/delNode',
method: 'post',
params: { id: data }
})
}
//查询前置-进程-设备-设备树
export function nodeDeviceTree(data: any) {
return createAxios({
url: '/cs-device-boot/node/getProcessNoAndDeviceById',
method: 'get',
params: data
})
}
//重启前置机进程
export function restartProcess(data: any) {
return createAxios({
url: '/cs-device-boot/node/restartProcess',
method: 'post',
params: data
})
}
//更新进程号
export function updateProcess(data: any) {
return createAxios({
url: '/cs-device-boot/node/updateDevProcessNo',
method: 'post',
params: data
})
}

1
src/components/tree/govern/cloudDeviceEntryTree.vue
View File

@@ -29,7 +29,6 @@ const width = ref('')
const info = (selectedNodeId?: string) => {
console.log('tree.value:', selectedNodeId);
tree.value = []
let arr1: any[] = []
getCldTree().then(res => {

266
src/views/govern/cloudDeviceEntry/index.vue
View File

@@ -69,6 +69,7 @@
label-width="120px"
:inline="true"
ref="mainForm"
>
<el-form-item
id="id100"
@@ -97,14 +98,15 @@
class="form-item"
label="省:"
v-if="nodeLevel > 0 || pageStatus == 2"
:rules="[{ required: true, message: '请选择省', trigger: 'change' }]"
prop="'engineeringParam.province'"
:rules="{ required: true, message: '请选择省', trigger: 'change' }"
>
<el-select
filterable
v-model="engineeringParam.province"
:disabled="!((nodeLevel == 1 && pageStatus == 3) || (nodeLevel == 0 && pageStatus == 2))"
placeholder="请选择省"
@change="provinceChange"
filterable
v-model="engineeringParam.province"
:disabled="!((nodeLevel == 1 && pageStatus == 3) || (nodeLevel == 0 && pageStatus == 2))"
placeholder="请选择省"
@change="provinceChange"
>
<el-option
v-for="item in provinceOptions"
@@ -120,7 +122,8 @@
class="form-item"
label="市:"
v-if="(nodeLevel > 0 || pageStatus == 2)"
:rules="[{ required: true, message: '请选择市', trigger: 'change' }]"
:prop="'engineeringParam.city'"
:rules="{ required: true, message: '请选择市', trigger: 'change' }"
>
<el-select
filterable
@@ -141,7 +144,8 @@
class="form-item"
label="工程名称:"
v-if="nodeLevel > 0 || pageStatus == 2"
:rules="[{ required: true, message: '请输入工程名称', trigger: 'blur' }]"
:prop="'name'"
:rules="{ required: true, message: '请输入工程名称', trigger: 'blur' }"
>
<el-input
v-model="engineeringParam.name"
@@ -166,7 +170,8 @@
<el-tabs
v-model="deviceIndex"
type="card"
:editable="pageStatus != 1"
:addable="false"
:closable="pageStatus != 1"
@edit="handleDeviceTabsEdit"
@tab-click="tabChange('deviceIndex')"
>
@@ -180,6 +185,7 @@
<el-form-item
class="form-item"
label="项目名称:"
:prop="'projectInfoList.' + index + '.name'"
:rules="[{ required: true, message: '请输入项目名称', trigger: 'blur' }]"
>
<el-input
@@ -216,11 +222,12 @@
</div>
<!--设备-->
<div style="width: 100%" v-if="nodeLevel > 1 || pageStatus == 2">
<div style="width: 100%" v-if="(nodeLevel > 1 || pageStatus == 2) && (nodeLevel >= 2 || pageStatus == 2)">
<el-tabs
v-model="busBarIndex"
type="card"
:editable="pageStatus != 1"
:addable="false"
:closable="pageStatus != 1"
@edit="handleBusBarTabsEdit"
@tab-click="tabChange('busBarIndex')"
>
@@ -366,11 +373,12 @@
</div>
<!--监测点-->
<div style="width: 100%" v-if="nodeLevel > 2 || pageStatus == 2">
<div style="width: 100%" v-if="(nodeLevel > 2 || pageStatus == 2) && (nodeLevel >= 3 || pageStatus == 2)">
<el-tabs
type="card"
v-model="lineIndex"
:editable="pageStatus != 1"
:addable="false"
:closable="pageStatus != 1"
@edit="handleLineTabsEdit"
@tab-click="tabChange('lineIndex')"
>
@@ -714,12 +722,10 @@ const nodeDataList=ref()
const nodeEventList=ref()
const nodeClick = (e: anyObj, data: any) => {
console.log(e, data)
nodeDataList.value = data
nodeEventList.value = e
treeClickCount.value++
if (treeClickCount.value > 2) return
if (treeClickCount.value > 2) return
if (treeClickCount.value == 1) {
if (pageStatus.value == 2 || pageStatus.value == 3) {
if (pageStatus.value == 3 || pageStatus.value == 2) {
@@ -749,12 +755,54 @@ const nodeClick = (e: anyObj, data: any) => {
}else if(nodeData.value.level == 4){ //监测点
nodeLevel.value = 4
}
// 根据节点层级清理不需要的数据
cleanUnnecessaryData()
/**不是根节点请求数据 */
queryNodeContent()
treeClickCount.value = 0
}
/**
* 根据当前节点层级清理不需要的数据
*/
const cleanUnnecessaryData = () => {
// 根据当前节点层级清理不需要的数据
switch(nodeLevel.value) {
case 0: // 根节点
// 清理所有数据
projectInfoList.value = []
deviceInfoList.value = []
lineInfoList.value = []
break
case 1: // 工程节点
// 清理设备和监测点数据
deviceInfoList.value = []
lineInfoList.value = []
break
case 2: // 项目节点
// 清理监测点数据
lineInfoList.value = []
break
case 3: // 设备节点
// 不清理任何数据
break
case 4: // 监测点节点
// 不清理任何数据
break
}
// 重置tab索引
if (nodeLevel.value < 2) {
deviceIndex.value = '0'
}
if (nodeLevel.value < 3) {
busBarIndex.value = '0'
}
if (nodeLevel.value < 4) {
lineIndex.value = '0'
}
}
const getparentsNode = (node: any) => {
// 检查node是否存在以及是否有parent属性
if (!node || !node.parent) {
@@ -818,6 +866,10 @@ const add = () => {
engineeringParam.value.description = ''
engineeringParam.value.name = ''
engineeringParam.value.province = ''
// 清理其他层级数据
projectInfoList.value = []
deviceInfoList.value = []
lineInfoList.value = []
break
case 1: // 新增项目，添加一个新的项目tab
// 添加一个新的空项目到projectInfoList
@@ -827,6 +879,9 @@ const add = () => {
description: ''
})
deviceIndex.value = (projectInfoList.value.length - 1).toString()
// 清理设备和监测点数据
deviceInfoList.value = []
lineInfoList.value = []
break
case 2: // 新增设备，添加一个新的设备tab
// 添加一个新的空设备到deviceInfoList
@@ -842,6 +897,8 @@ const add = () => {
sort: 0
})
busBarIndex.value = (deviceInfoList.value.length - 1).toString()
// 清理监测点数据
lineInfoList.value = []
break
case 3: // 新增监测点，添加一个新的监测点tab
// 添加一个新的空监测点到lineInfoList
@@ -943,7 +1000,7 @@ const updateProjectFunc = (id: any) => {
message: '修改项目成功'
})
pageStatus.value = 1
TerminalRef.value.info()
treedata()
})
}
/**
@@ -1037,7 +1094,7 @@ const updateLineFunc = (id: any) => {
message: '修改监测点成功'
})
pageStatus.value = 1
TerminalRef.value.info()
treedata()
})
}
@@ -1088,14 +1145,13 @@ const remove = () => {
case 2: // 项目层级
// 删除项目后选中工程节点
const engineeringId = nodeData.value.pids ? nodeData.value.pids.split(',')[1] : null
console.log(engineeringId)
deleteProject(nodeData.value.id,'','','', 0).then((res: any) => {
ElMessage({
type: 'success',
message: res.message
})
reaseStatus()
console.log('engineeringId',engineeringId)
if (engineeringId) {
setTimeout(() => {
treedata(engineeringId)
@@ -1159,74 +1215,85 @@ const remove = () => {
}
// 下一步
const next = async () => {
// 在新增模式下（pageStatus == 2）保存当前数据并创建下一个层级的Tab
switch (nodeLevel.value) {
case 0: // 工程层级，下一步创建项目Tab
// 保存当前工程信息到临时存储
tempAllLevelData.value.engineering = { ...engineeringParam.value }
// 创建新的项目Tab
projectInfoList.value.push({
name: '',
area: '',
description: '',
})
deviceIndex.value = (projectInfoList.value.length - 1).toString()
nextfalg.value = false
nodeLevel.value = 1
break
case 1: // 项目层级，下一步创建设备Tab
// 保存当前项目信息到临时存储
const currentProject = { ...projectInfoList.value[deviceIndex.value] }
tempAllLevelData.value.projects[deviceIndex.value] = currentProject
// 创建新的设备Tab
deviceInfoList.value.push({
name: '',
devModel: '',
devType: '',
devAccessMethod: 'CLD',
mac: '',
ndid: '',
nodeId: '',
cntractNo: '',
sort: 0
})
busBarIndex.value = (deviceInfoList.value.length - 1).toString()
nextfalg.value = false
nodeLevel.value = 2
break
case 2: // 设备层级，下一步创建监测点Tab
// 保存当前设备信息到临时存储
const currentDevice = { ...deviceInfoList.value[busBarIndex.value] }
tempAllLevelData.value.devices[busBarIndex.value] = currentDevice
// 创建新的监测点Tab
lineInfoList.value.push({
name: '',
lineNo: 1,
conType: 0,
lineInterval: 1,
ptRatio: 0,
pt2Ratio: 0,
ctRatio: 0,
ct2Ratio: 0,
volGrade: '',
devMac: '',
})
lineIndex.value = (lineInfoList.value.length - 1).toString()
nextfalg.value = false
nodeLevel.value = 3
break
case 3: // 监测点层级
// 保存当前监测点信息到临时存储
const currentLine = { ...lineInfoList.value[lineIndex.value] }
tempAllLevelData.value.lines[lineIndex.value] = currentLine
nextfalg.value = true
nodeLevel.value = 4
break
}
console.log('mainForm',mainForm.value.validate)
await mainForm.value?.validate((valid: boolean) => {
console.log('valid', valid)
if (valid) {
}
})
}
const executeNextStep = () => {
// 在新增模式下（pageStatus == 2）保存当前数据并创建下一个层级的Tab
switch (nodeLevel.value) {
case 0: // 工程层级，下一步创建项目Tab
// 保存当前工程信息到临时存储
tempAllLevelData.value.engineering = { ...engineeringParam.value }
// 创建新的项目Tab
projectInfoList.value.push({
name: '',
area: '',
description: '',
})
deviceIndex.value = (projectInfoList.value.length - 1).toString()
nextfalg.value = false
nodeLevel.value = 1
break
case 1: // 项目层级，下一步创建设备Tab
// 保存当前项目信息到临时存储
const currentProject = { ...projectInfoList.value[deviceIndex.value] }
tempAllLevelData.value.projects[deviceIndex.value] = currentProject
// 创建新的设备Tab
deviceInfoList.value.push({
name: '',
devModel: '',
devType: '',
devAccessMethod: 'CLD',
mac: '',
ndid: '',
nodeId: '',
cntractNo: '',
sort: 0
})
busBarIndex.value = (deviceInfoList.value.length - 1).toString()
nextfalg.value = false
nodeLevel.value = 2
break
case 2: // 设备层级，下一步创建监测点Tab
// 保存当前设备信息到临时存储
const currentDevice = { ...deviceInfoList.value[busBarIndex.value] }
tempAllLevelData.value.devices[busBarIndex.value] = currentDevice
// 创建新的监测点Tab
lineInfoList.value.push({
name: '',
lineNo: 1,
conType: 0,
lineInterval: 1,
ptRatio: 0,
pt2Ratio: 0,
ctRatio: 0,
ct2Ratio: 0,
volGrade: '',
devMac: '',
})
lineIndex.value = (lineInfoList.value.length - 1).toString()
nextfalg.value = false
nodeLevel.value = 3
break
case 3: // 监测点层级
// 保存当前监测点信息到临时存储
const currentLine = { ...lineInfoList.value[lineIndex.value] }
tempAllLevelData.value.lines[lineIndex.value] = currentLine
nextfalg.value = true
nodeLevel.value = 4
break
}
}
// 撤销
@@ -1823,8 +1890,8 @@ const handleDeviceTabsEdit = (targetName: any, action: any) => {
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 如果是编辑现有项目
if (pageStatus.value === 3 && projectInfoList.value[deviceIndex.value]?.id) {
// 删除项目
if (projectInfoList.value[deviceIndex.value]?.id) {
deleteProject(
projectInfoList.value[deviceIndex.value].id,
projectInfoList.value[deviceIndex.value].name,
@@ -1845,7 +1912,8 @@ const handleDeviceTabsEdit = (targetName: any, action: any) => {
// 重置相关索引
busBarIndex.value = '0'
lineIndex.value = '0'
TerminalRef.value.info()
pageStatus.value = 1
treedata()
})
} else {
// 如果是新增模式下删除未保存的项目
@@ -1895,7 +1963,7 @@ const handleBusBarTabsEdit = (targetName: any, action: any) => {
type: 'warning'
}).then(() => {
// 如果是编辑现有设备
if (pageStatus.value === 3 && deviceInfoList.value[busBarIndex.value]?.id) {
if ( deviceInfoList.value[busBarIndex.value]?.id) {
deleteEquipment(deviceInfoList.value[busBarIndex.value].id).then((res: any) => {
ElMessage({
type: 'success',
@@ -1908,7 +1976,8 @@ const handleBusBarTabsEdit = (targetName: any, action: any) => {
? (deviceInfoList.value.length - 1).toString()
: '0'
lineIndex.value = '0'
TerminalRef.value.info()
pageStatus.value = 1
treedata()
})
} else {
// 如果是新增模式下删除未保存的设备
@@ -1958,8 +2027,8 @@ const handleLineTabsEdit = (targetName: any, action: any) => {
type: 'warning'
}).then(() => {
// 如果是编辑现有监测点
if (pageStatus.value === 3 && lineInfoList.value[lineIndex.value]?.id) {
deleteLine(lineInfoList.value[lineIndex.value].id).then((res: any) => {
if (lineInfoList.value[lineIndex.value]?.lineId) {
deleteLine(lineInfoList.value[lineIndex.value].lineId).then((res: any) => {
ElMessage({
type: 'success',
message: res.message
@@ -1970,7 +2039,8 @@ const handleLineTabsEdit = (targetName: any, action: any) => {
lineIndex.value = lineInfoList.value.length
? (lineInfoList.value.length - 1).toString()
: '0'
TerminalRef.value.info()
pageStatus.value = 1
treedata()
})
} else {
// 如果是新增模式下删除未保存的监测点
@@ -1991,6 +2061,7 @@ const handleLineTabsEdit = (targetName: any, action: any) => {
})
}
}
const tabChange = (type: string) => {
if (type == 'deviceIndex') {
busBarIndex.value = '0'
@@ -2006,6 +2077,9 @@ const treedata = (selectedNodeId?: string) => {
} else {
TerminalRef.value.info();
}
titleList.value = []
titleList.value.unshift('在线设备')
}
/**
* 重置初始状态

7
src/views/govern/device/control/index.vue
View File

@@ -983,10 +983,8 @@ const getRealDataMqttMsg = async () => {
// JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
// )
let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
// console.log("🚀 ~ mqttRef.value.on ~ obj:", obj)
if (lineId.value != obj.lineId && adminInfo.userIndex != obj.userId) return
// console.log("🚀 ~ mqttRef.value.on ~ obj:", obj)
// console.log("🚀 ~ mqttRef.value.on ~ formInline.dataLevel:", obj.dataLevel, formInline.dataLevel)
if (lineId.value != obj.lineId || adminInfo.userIndex != obj.userId) return
//处理mqtt数据 1转2除 2转1乘
//如果消息返回值是二次值，下拉框是二次值只需要单位换算 除以1000
@@ -1101,6 +1099,7 @@ const getRealDataMqttMsg = async () => {
}
if (obj.hasOwnProperty('pA') && obj.hasOwnProperty('pB')) {
mqttMessage.value = obj
//更新实时数据主页面值
realTimeFlag.value && realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value)
tableLoading.value = false

4
src/views/govern/device/control/tabs/event.vue
View File

@@ -56,6 +56,7 @@ const tableStore: any = new TableStore({
title: '持续时间(s)',
minWidth: 100,
formatter: (row: any) => {
console.log('row.cellValue', row.cellValue)
row.cellValue = row.cellValue ? row.cellValue.toFixed(2) : '/'
return row.cellValue
}, sortable: true
@@ -65,7 +66,8 @@ const tableStore: any = new TableStore({
title: '暂降(聚升)幅值(%)',
width: 100,
formatter: (row: any) => {
row.cellValue = row.cellValue + '' ? row.cellValue.toFixed(2) : '/'
//row.cellValue = row.cellValue + '' ? row.cellValue.toFixed(2) : '/'
row.cellValue = row.cellValue != null ? Number(row.cellValue).toFixed(2) : '/'
if (String(row.cellValue).split('.')[1] == '00') {
row.cellValue = String(row.cellValue).split('.')[0]
}

593
src/views/govern/setting/frontManagement/index.vue Normal file
View File

@@ -0,0 +1,593 @@
<template>
<div class="default-main">
<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" v-loading="loading">
<el-input v-model="filterText" placeholder="请输入内容" clearable show-word-limit @input="change">
<template #prefix>
<Icon name="el-icon-Search" style="font-size: 16px" />
</template>
</el-input>
<el-tree
:style="height"
style="overflow-y: auto"
:data="dataSource"
node-key="id"
ref="treeRef"
default-expand-all
:props="defaultProps"
:filter-node-method="filterNode"
>
<template #default="{ node, data }">
<div class="custom-tree-node">
<span>
<span v-if="data.processState != null">
{{ node.label }}
</span>
<span v-else>{{ data.subName }}_{{ data.name }}</span>
<span
v-if="data.processState != null"
class="iconSpan"
:style="{ background: data.processState == 0 ? '#ff0000' : '#00b07d' }"
></span>
</span>
<div>
<!-- <el-button type="primary" v-if="data.id == undefined" link icon="el-icon-Plus" ></el-button> -->
<el-button
style="margin-left: 4px"
icon="el-icon-Edit"
v-if="data.id"
type="primary"
@click="edit(data)"
link
></el-button>
<el-popconfirm
v-else
class="box-item"
title="确定重启吗？"
placement="bottom"
@confirm="restart(data)"
>
<template #actions="{ confirm, cancel }">
<el-button size="small" @click="cancel">取消</el-button>
<el-button type="warning" size="small" @click="confirm">确认</el-button>
</template>
<template #reference>
<el-button
style="margin-left: 4px"
icon="el-icon-Refresh"
type="warning"
link
@click.stop
></el-button>
</template>
</el-popconfirm>
</div>
</div>
</template>
</el-tree>
</div>
</div>
<!-- 重启确认对话框 -->
<el-dialog
draggable
title="重启确认"
v-model="restartDialogVisible"
:close-on-click-modal="false"
width="400px"
:before-close="cancelRestart"
>
<el-form :model="restartForm" label-width="80px" :rules="restartRules" ref="restartFormRef">
<el-form-item label="密码:" prop="password">
<el-input
v-model="restartForm.password"
type="password"
placeholder="请输入密码"
show-password
></el-input>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="cancelRestart">取 消</el-button>
<el-button type="primary" @click="confirmRestart">确 定</el-button>
</template>
</el-dialog>
<el-dialog
draggable
:title="dialogTitle"
v-model="dialogFormVisible"
:close-on-click-modal="false"
width="700px"
:before-close="resetForm"
>
<el-form :model="formData" label-width="120px" :rules="rules" ref="ruleFormRef">
<el-form-item label="名称:" prop="name">
<el-input
v-model="formData.name"
placeholder="请输入名称"
maxlength="32"
show-word-limit
@input="handleInput"
></el-input>
</el-form-item>
<el-form-item label="IP:" prop="ip" class="top">
<el-input v-model="formData.ip" placeholder="请输入Ip"></el-input>
</el-form-item>
<el-form-item label="等级:" prop="nodeGrade" class="top">
<el-select v-model="formData.nodeGrade" placeholder="请选择等级" style="width: 100%">
<el-option
v-for="item in fontdveoption"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="最大终端数:" prop="nodeDevNum" class="top">
<el-input
v-model="formData.nodeDevNum"
onkeyup="value = value.replace(/[^0-9]/g,'')"
maxlength="5"
placeholder="请输入最大终端数"
></el-input>
</el-form-item>
<el-form-item label="最大进程数:" prop="maxProcessNum" class="top">
<el-input
v-model="formData.maxProcessNum"
onkeyup="value = value.replace(/[^0-9]/g,'')"
maxlength="5"
placeholder="请根据监测点规模填写合适进程数（1个进程最大可承载200个监测点）"
></el-input>
<!-- <el-select v-model="formData.maxProcessNum" placeholder="请选择等级" style="width: 100%">
<el-option
v-for="item in NumList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select> -->
</el-form-item>
<el-form-item label="排序:" prop="sort" class="top">
<el-input v-model="formData.sort" placeholder="请输入排序"></el-input>
</el-form-item>
<el-form-item label="描述:" prop="remark" class="top">
<el-input
v-model="formData.remark"
:autosize="{ minRows: 2, maxRows: 4 }"
type="textarea"
placeholder="请输入描述"
></el-input>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="resetForm">取 消</el-button>
<el-button type="primary" @click="onSubmit">确 定</el-button>
</template>
</el-dialog>
<!-- 绑定进程号 -->
<el-dialog draggable title="绑定进程号" v-model="popUps" :close-on-click-modal="false" width="400px">
<el-select v-model="processNo" placeholder="请选择进程号" style="width: 100%">
<el-option
v-for="item in dataSource"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
<template #footer>
<el-button @click="popUps = false">取 消</el-button>
<el-button type="primary" @click="bindTheProcess">确 定</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { mainHeight } from '@/utils/layout'
import TableStore from '@/utils/tableStore'
import { ElMessage } from 'element-plus'
import { ref, onMounted, provide, reactive, nextTick } from 'vue'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { ElButton } from 'element-plus'
import {addNode,updateNode,delNode,nodeDeviceTree,restartProcess,updateProcess} from '@/api/cs-device-boot/frontManagement'
defineOptions({
name: 'govern/setting/frontManagement'
})
const filterText = ref('')
const fontdveoption: any = ref([
{ id: 0, name: '极重要' },
{ id: 1, name: '普通' },
{ id: 2, name: '备用' }
])
const statusoption: any = ref([
{ id: 0, name: '未启用' },
{ id: 1, name: '启用' }
])
const height = mainHeight(70)
const loading = ref(false)
const popUps = ref(false)
const tableRef = ref()
const processNo = ref('')
const ruleFormRef = ref()
const dataSource: any = ref([])
const defaultProps = {
children: 'deviceInfoList',
label: 'name'
}
const formData: any = ref({
name: '',
ip: '',
nodeGrade: '',
nodeDevNum: '',
sort: '',
remark: '',
maxProcessNum: ''
})
const rules = reactive({
name: [{ required: true, message: '名称不可为空', trigger: 'blur' }],
ip: [{ required: true, message: 'ip不可为空', trigger: 'blur' }],
nodeGrade: [{ required: true, message: '等级不可为空', trigger: 'blur' }],
nodeDevNum: [{ required: true, message: '最大终端数不可为空', trigger: 'blur' }],
maxProcessNum: [{ required: true, message: '最大进程数不可为空', trigger: 'blur' }],
sort: [{ required: true, message: '排序不可为空', trigger: 'blur' }],
remark: [{ required: true, message: '描述不可为空', trigger: 'blur' }]
})
const dialogFormVisible = ref(false)
const dialogTitle = ref('新增前置机')
const processId = ref('')
const tableStore = new TableStore({
url: '/cs-device-boot/node/nodeList',
method: 'POST',
column: [
{ title: '名称', field: 'name' },
{ title: 'IP', field: 'ip' },
{
title: '等级',
field: 'nodeGrade',
render: 'tag',
custom: {
0: 'success',
1: 'warning',
2: 'info'
},
replaceValue: {
0: '极重要',
1: '普通',
2: '备用'
}
},
{
title: '最大监测点数量',
field: 'nodeDevNum'
},
{
title: '最大进程数',
field: 'maxProcessNum'
},
{
title: '排序',
field: 'sort'
},
{
title: '状态',
field: 'state',
render: 'tag',
custom: {
0: 'warning',
1: 'success'
},
replaceValue: {
0: '未启用',
1: '启用'
}
},
{ title: '描述', field: 'remark' },
{
title: '操作',
align: 'center',
width: '180',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: async row => {
dialogFormVisible.value = true
dialogTitle.value = '前置机修改'
formData.value = JSON.parse(JSON.stringify(row))
}
},
{
name: 'del',
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定删除吗？'
},
click: row => {
delNode(row.id).then(res => {
ElMessage.success('删除成功')
tableStore.index()
})
}
}
]
}
],
beforeSearchFun: () => {
for (let key in tableStore.table.params) {
if (tableStore.table.params[key] === '' && key !== 'nodeGrade' && key !== 'searchState') {
delete tableStore.table.params[key]
}
}
},
loadCallback: () => {
tableRef.value.getRef().setCurrentRow(tableStore.table.data[0])
currentChangeEvent()
}
})
const nodeId = ref('')
// 点击行
const currentChangeEvent = () => {
// 确保 tableRef 和当前记录存在
if (!tableRef.value || !tableRef.value.getRef().getCurrentRecord()) {
loading.value = false
dataSource.value = []
return
}
loading.value = true
dataSource.value = []
nodeDeviceTree({
id: tableRef.value.getRef().getCurrentRecord().id
})
.then(res => {
nodeId.value = tableRef.value.getRef().getCurrentRecord().id
// 检查返回的数据是否存在且不为空
if (res.data && res.data.processDeviceList) {
dataSource.value = res.data.processDeviceList.filter(item => (item.name = item.processNo + ''))
} else {
dataSource.value = []
}
loading.value = false
})
.catch(() => {
// 添加错误处理，确保 loading 状态也能关闭
dataSource.value = []
loading.value = false
})
}
// 重启进程
const restart = (data: any) => {
console.log('🚀 ~ restart ~ data:', data)
restartProcess({
deviceRebootType: data.processNo,
nodeId: nodeId.value,
processNo: 2
}).then(res => {
ElMessage.success('重启成功')
currentChangeEvent()
})
}
const treeRef = ref()
// 树过滤
const change = (val: any) => {
treeRef.value!.filter(filterText.value)
}
const edit = (data: any) => {
processNo.value = data.nodeProcess
processId.value = data.id
popUps.value = true
}
// 更新进程号
const bindTheProcess = () => {
updateProcess({
id: processId.value,
processNo: processNo.value
}).then((res: any) => {
ElMessage.success('修改成功！')
popUps.value = false
currentChangeEvent()
})
}
const filterNode = (value: string, data: any, node: any) => {
if (!value) return true
// return data.name.includes(value)
if (data.name) {
return chooseNode(value, data, node)
}
}
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
const chooseNode = (value: string, data: any, node: any) => {
if (data.name.indexOf(value) !== -1) {
return true
}
const level = node.level
// 如果传入的节点本身就是一级节点就不用校验了
if (level === 1) {
return false
}
// 先取当前节点的父节点
let parentData = node.parent
// 遍历当前节点的父节点
let index = 0
while (index < level - 1) {
// 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
if (parentData.data.name.indexOf(value) !== -1) {
return true
}
// 否则的话再往上一层做匹配
parentData = parentData.parent
index++
}
// 没匹配到返回false
return false
}
tableStore.table.params.orderBy = 'desc'
tableStore.table.params.nodeGrade = ''
tableStore.table.params.searchState = ''
provide('tableStore', tableStore)
// 新增
const add = () => {
dialogFormVisible.value = true
dialogTitle.value = '新增前置机'
}
// 确认
const onSubmit = () => {
ruleFormRef.value.validate((valid: any) => {
if (valid) {
if (dialogTitle.value == '新增前置机') {
addNode(formData.value).then(res => {
ElMessage.success('新增前置机')
resetForm()
tableStore.onTableAction('search', {})
})
} else {
updateNode(formData.value).then(res => {
ElMessage.success('修改成功')
resetForm()
tableStore.onTableAction('search', {})
})
}
}
})
}
// 清空表格
const resetForm = () => {
dialogFormVisible.value = false
formData.value = {
name: '',
ip: '',
nodeGrade: '',
nodeDevNum: '',
sort: '',
remark: ''
}
}
const handleInput = (val: string) => {
formData.value.name = val.replace(/\s+/g, '')
}
onMounted(() => {
setTimeout(() => {
tableStore.index()
}, 100)
})
</script>
<style lang="scss" scoped>
.qrcode-label {
position: absolute;
top: 0;
right: 0;
z-index: -99;
display: flex;
align-items: center;
justify-content: center;
width: 180px;
height: 180px;
padding: 10px;
background: #fff;
flex-direction: column;
.qrcode-label-title {
margin-bottom: 10px;
font-size: 14px;
font-weight: bold;
}
.qrcode-label-img {
width: 140px;
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;
}
.iconSpan {
display: inline-block;
width: 8px;
height: 8px;
margin-left: 3px;
border-radius: 50%;
margin-bottom: 2px;
}
</style>