parent
47f9230ab1
commit
8dffb3fe8f
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,385 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-card shadow="never"> |
||||
<template #header> |
||||
<div class="flex justify-between"> |
||||
<div style="display: flex; align-items: center"> |
||||
<el-icon><Grid /></el-icon> <span |
||||
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||
>设备参数树</span |
||||
> |
||||
</div> |
||||
<div style="display: flex; align-items: center" v-if="loading"> |
||||
<div class="rotate mr-0.5"> |
||||
<el-icon><Loading /></el-icon> |
||||
</div> |
||||
<span style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||
>正在加载，请稍后...</span |
||||
> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<el-scrollbar max-height="300"> |
||||
<el-tree |
||||
ref="deviceTreeRef" |
||||
:highlight-current="true" |
||||
:data="treeList" |
||||
:props="{ |
||||
children: 'children', |
||||
label: 'label', |
||||
}" |
||||
:expand-on-click-node="false" |
||||
default-expand-all |
||||
> |
||||
<template #default="{ node, data }"> |
||||
<div class="custom-tree-node"> |
||||
<div style="display: flex; justify-content: flex-start"> |
||||
<div v-if="data.childNode === true"> |
||||
<div style="margin-top: 1px" @click="handleNodeClick(data)"> |
||||
<svg-icon class="mr-5px" size="15" icon-class="folder" /> |
||||
</div> |
||||
</div> |
||||
<div v-else> |
||||
<div style="margin-top: 1px"> |
||||
<svg-icon class="mr-5px" size="15" icon-class="file" /> |
||||
</div> |
||||
</div> |
||||
<div @click="changeCurrentTree(data)">{{ node.label }}</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</el-tree> |
||||
</el-scrollbar> |
||||
</el-card> |
||||
<el-card shadow="never" class="mt-1"> |
||||
<template #header> |
||||
<div style="display: flex; align-items: center"> |
||||
<el-icon><Grid /></el-icon> <span |
||||
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||
>设备操作</span |
||||
> |
||||
</div> |
||||
</template> |
||||
<div v-if="currentTree.childNode === false"> |
||||
<el-form :model="currentTree" v-loading="loading"> |
||||
<el-descriptions :column="1" border> |
||||
<el-descriptions-item |
||||
label="参数名称" |
||||
label-align="left" |
||||
align="left" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="15px" |
||||
> |
||||
{{ currentTree?.nodePath }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="参数值" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="15px" |
||||
> |
||||
<el-form-item> |
||||
<el-input v-model="currentTree.value" /> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
</el-descriptions> |
||||
</el-form> |
||||
</div> |
||||
|
||||
<div v-else> |
||||
<el-descriptions :column="1" border> |
||||
<el-descriptions-item |
||||
label="路径" |
||||
label-align="center" |
||||
align="left" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="15px" |
||||
> |
||||
{{ currentTree?.nodePath }} |
||||
</el-descriptions-item> |
||||
</el-descriptions> |
||||
</div> |
||||
<template #footer> |
||||
<div class="flex-center"> |
||||
<div v-if="!currentTree.childNode"> |
||||
<el-button type="primary" @click="saveParam">保存参数</el-button> |
||||
<el-button type="primary" @click="openParamAttribute" |
||||
>参数属性</el-button |
||||
> |
||||
</div> |
||||
<div v-else> |
||||
<div v-if="currentTree.label != 'InternetGatewayDevice'"> |
||||
<el-button type="primary" @click="addInstanceNode" |
||||
>新增实例</el-button |
||||
> |
||||
<el-button type="primary" @click="deleteInstanceNode" |
||||
>删除实例</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
<div class="ml-2"> |
||||
<el-button type="danger" plain @click="reboot">远程重启</el-button> |
||||
<el-button type="danger" plain @click="factoryReset" |
||||
>恢复出厂</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</el-card> |
||||
<tree-param-attribute ref="treeParamAttributeRef" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { Grid, Loading } from "@element-plus/icons-vue"; |
||||
import { OptionTree } from "@/api/remote/types"; |
||||
import { |
||||
remoteAddInstanceNode, |
||||
remoteDeleteInstanceNode, |
||||
remoteFactoryReset, |
||||
remoteGetParameterValues, |
||||
remoteReboot, |
||||
remoteSetParameterValues, |
||||
remoteTreeNode, |
||||
} from "@/api/remote"; |
||||
import { confirm } from "@/utils/confirm"; |
||||
import TreeParamAttribute from "@/views/family/operate/remote-operation/components/TreeParamAttribute.vue"; |
||||
|
||||
const route = useRoute(); |
||||
let devId: number = parseInt(<string>route.params.devId); |
||||
const treeParamAttributeRef = ref(); |
||||
const deviceTreeRef = ref(); |
||||
const loading = ref<boolean>(false); |
||||
const treeList = ref<OptionTree[]>([ |
||||
{ |
||||
label: "InternetGatewayDevice", |
||||
nodePath: "InternetGatewayDevice.", |
||||
childNode: true, |
||||
children: [], |
||||
}, |
||||
]); |
||||
const currentTree = ref<OptionTree>({ |
||||
label: "InternetGatewayDevice", |
||||
nodePath: "InternetGatewayDevice.", |
||||
childNode: true, |
||||
children: [], |
||||
}); |
||||
const handleNodeClick = (data_: OptionTree) => { |
||||
loading.value = true; |
||||
let nodePath = data_.nodePath; |
||||
remoteTreeNode(devId, nodePath) |
||||
.then(({ data }) => { |
||||
if (!data_.children) { |
||||
data_.children = []; |
||||
} |
||||
data_.children = data; |
||||
treeList.value = [...treeList.value]; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
|
||||
const changeCurrentTree = (data: OptionTree) => { |
||||
currentTree.value = data; |
||||
if (data.childNode) { |
||||
return; |
||||
} |
||||
let nodePath = data.nodePath; |
||||
loading.value = true; |
||||
remoteGetParameterValues(devId, nodePath) |
||||
.then(({ data }) => { |
||||
currentTree.value.value = data.value; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
const saveParam = () => { |
||||
confirm("确定保存该节点参数", () => { |
||||
loading.value = true; |
||||
remoteSetParameterValues( |
||||
devId, |
||||
currentTree.value.nodePath, |
||||
<string>currentTree.value.value |
||||
) |
||||
.then(() => { |
||||
ElMessage({ |
||||
message: "操作成功", |
||||
duration: 1000, |
||||
type: "success", |
||||
}); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}); |
||||
}; |
||||
const openParamAttribute = () => { |
||||
treeParamAttributeRef.value.open(devId, currentTree.value.nodePath); |
||||
}; |
||||
const childNode = ref<OptionTree>({}); |
||||
const addInstanceNode = () => { |
||||
confirm("确定添加实例吗", () => { |
||||
loading.value = true; |
||||
remoteAddInstanceNode(devId, currentTree.value.nodePath) |
||||
.then(({ data }) => { |
||||
childNode.value = data; |
||||
addInstanceNode_(treeList.value[0], currentTree.value.nodePath); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}); |
||||
}; |
||||
const deleteInstanceNode = () => { |
||||
confirm(`确定删除${currentTree.value.label}实例吗`, () => { |
||||
loading.value = true; |
||||
remoteDeleteInstanceNode(devId, currentTree.value.nodePath) |
||||
.then(() => { |
||||
removeInstanceNode_(treeList.value[0], currentTree.value.nodePath); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}); |
||||
}; |
||||
// 查找节点函数 |
||||
const addInstanceNode_ = (tree: OptionTree, nodePath?: string) => { |
||||
// 如果当前节点的 nodePath 匹配，返回当前节点 |
||||
if (tree.nodePath === nodePath) { |
||||
if (!tree.children) { |
||||
tree.children = []; |
||||
} |
||||
tree.children?.push(childNode.value); |
||||
console.log(treeList.value[0]); |
||||
return; |
||||
} |
||||
// 如果当前节点有子节点，则递归查找子节点 |
||||
if (tree.children) { |
||||
for (const child of tree.children) { |
||||
const result = addInstanceNode_(child, nodePath); |
||||
if (result) { |
||||
return; |
||||
} |
||||
} |
||||
} |
||||
// 如果未找到匹配节点，返回 undefined |
||||
return undefined; |
||||
}; |
||||
const removeInstanceNode_ = (tree: OptionTree, nodePath?: string) => { |
||||
if (!tree.children) return false; |
||||
|
||||
for (let i = 0; i < tree.children.length; i++) { |
||||
const child = tree.children[i]; |
||||
if (child.nodePath === nodePath) { |
||||
// 找到并删除节点 |
||||
tree.children.splice(i, 1); |
||||
return true; |
||||
} |
||||
// 递归删除子节点 |
||||
const result = removeInstanceNode_(child, nodePath); |
||||
if (result) { |
||||
return true; |
||||
} |
||||
} |
||||
return false; |
||||
}; |
||||
const reboot = () => { |
||||
confirm("确认重启设备吗", () => { |
||||
loading.value = true; |
||||
remoteReboot(devId) |
||||
.then(() => { |
||||
ElMessage({ |
||||
message: "操作成功", |
||||
duration: 1000, |
||||
type: "success", |
||||
}); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}); |
||||
}; |
||||
const factoryReset = () => { |
||||
confirm("确认恢复出厂设置吗", () => { |
||||
loading.value = true; |
||||
remoteFactoryReset(devId) |
||||
.then(() => { |
||||
ElMessage({ |
||||
message: "操作成功", |
||||
duration: 1000, |
||||
type: "success", |
||||
}); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}); |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
:deep(.el-card__body) { |
||||
padding: 10px 0; |
||||
} |
||||
:deep(.my-label) { |
||||
width: 50px !important; |
||||
text-align: center !important; |
||||
background: var(--el-color-white) !important; |
||||
} |
||||
.rotate { |
||||
animation: rotate 10s linear infinite; |
||||
-webkit-animation: rotate 10s linear infinite; |
||||
} |
||||
@keyframes rotate { |
||||
0% { |
||||
transform: rotate(0); |
||||
} |
||||
|
||||
25% { |
||||
transform: rotate(90deg); |
||||
} |
||||
|
||||
50% { |
||||
transform: rotate(180deg); |
||||
} |
||||
|
||||
75% { |
||||
transform: rotate(270deg); |
||||
} |
||||
|
||||
100% { |
||||
transform: rotate(360deg); |
||||
} |
||||
} |
||||
|
||||
@-webkit-keyframes rotate { |
||||
0% { |
||||
transform: rotate(0); |
||||
} |
||||
|
||||
25% { |
||||
transform: rotate(90deg); |
||||
} |
||||
|
||||
50% { |
||||
transform: rotate(180deg); |
||||
} |
||||
|
||||
75% { |
||||
transform: rotate(270deg); |
||||
} |
||||
|
||||
100% { |
||||
transform: rotate(360deg); |
||||
} |
||||
} |
||||
:deep(.el-form-item--default) { |
||||
margin-bottom: 0; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,165 @@ |
||||
<template> |
||||
<el-dialog class="com-dialog" v-model="openFlag" title="修改参数属性"> |
||||
<el-form :model="formData" v-loading="loading"> |
||||
<el-descriptions :column="1" border> |
||||
<el-descriptions-item |
||||
label="参数名称" |
||||
label-align="center" |
||||
align="left" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="15px" |
||||
> |
||||
InternetGatewayDevice.DeviceSummary |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="NotificationChange" |
||||
label-align="center" |
||||
align="left" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="15px" |
||||
> |
||||
<div class="flex justify-between"> |
||||
<el-form-item> |
||||
<el-checkbox-group v-model="formData.notification"> |
||||
<el-checkbox value="true">Notification</el-checkbox> |
||||
</el-checkbox-group> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-radio-group |
||||
v-model="formData.param1" |
||||
:disabled="formData.notification?.length != 1" |
||||
> |
||||
<el-radio value="0">OFF</el-radio> |
||||
<el-radio value="1">PASSIVE</el-radio> |
||||
<el-radio value="2">ACTIVE</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
</div> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="AccessListChange" |
||||
label-align="center" |
||||
align="left" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="15px" |
||||
> |
||||
<div class="flex justify-between"> |
||||
<el-form-item> |
||||
<el-checkbox-group v-model="formData.accessList"> |
||||
<el-checkbox value="true">AccessList</el-checkbox> |
||||
</el-checkbox-group> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-checkbox-group |
||||
v-model="formData.param2" |
||||
:disabled="formData.accessList?.length != 1" |
||||
> |
||||
<el-checkbox value="Subscriber">Subscriber</el-checkbox> |
||||
<el-checkbox value="customAttribute" |
||||
><el-input v-model="customAttribute" style="width: 130px" |
||||
/></el-checkbox> |
||||
</el-checkbox-group> |
||||
</el-form-item> |
||||
</div> |
||||
</el-descriptions-item> |
||||
</el-descriptions> |
||||
</el-form> |
||||
<template #footer> |
||||
<el-button type="primary" @click="submitForm">确定</el-button> |
||||
<el-button @click="openFlag = false">取消</el-button> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { |
||||
remoteGetParameterAttributes, |
||||
remoteSetParameterAttributes, |
||||
} from "@/api/remote"; |
||||
import { confirm } from "@/utils/confirm"; |
||||
|
||||
interface ParamAttribute { |
||||
accessList?: string[]; |
||||
notification?: string[]; |
||||
param1?: string; |
||||
param2?: string[]; |
||||
} |
||||
const devId = ref<number>(0); |
||||
const nodePath = ref<string>(""); |
||||
const loading = ref<boolean>(false); |
||||
const openFlag = ref<boolean>(false); |
||||
const formData = ref<ParamAttribute>({}); |
||||
const customAttribute = ref<string>(""); |
||||
const open = (devId_: number, nodePath_: string) => { |
||||
formData.value = { |
||||
accessList: [], |
||||
notification: [], |
||||
}; |
||||
devId.value = devId_; |
||||
nodePath.value = nodePath_; |
||||
getData(devId_, nodePath_); |
||||
openFlag.value = true; |
||||
}; |
||||
const getData = (devId?: number, nodePath?: string) => { |
||||
loading.value = true; |
||||
remoteGetParameterAttributes(devId, nodePath) |
||||
.then(({ data }) => { |
||||
let value_: string = <string>data.value; |
||||
let attributes = value_.split("|"); |
||||
formData.value.param1 = attributes[0]; |
||||
formData.value.param2 = [attributes[1]]; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
defineExpose({ open }); |
||||
const submitForm = () => { |
||||
confirm("确定修改参数属性吗", () => { |
||||
let argValue = []; |
||||
if (formData.value.notification?.length === 1) { |
||||
argValue.push("true"); |
||||
} else { |
||||
argValue.push("false"); |
||||
} |
||||
argValue.push(formData.value.param1); |
||||
if (formData.value.accessList?.length === 1) { |
||||
argValue.push("true"); |
||||
} else { |
||||
argValue.push("false"); |
||||
} |
||||
if (formData.value.param2?.length === 1) { |
||||
argValue.push(formData.value.param2[0]); |
||||
} else if (formData.value.param2?.length === 2) { |
||||
argValue.push(formData.value.param2[0] + "~" + customAttribute.value); |
||||
} |
||||
loading.value = true; |
||||
remoteSetParameterAttributes( |
||||
devId.value, |
||||
nodePath.value, |
||||
argValue.join("|") |
||||
) |
||||
.then(() => { |
||||
ElMessage({ |
||||
message: "操作成功", |
||||
duration: 1000, |
||||
type: "success", |
||||
}); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}); |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
:deep(.my-label) { |
||||
width: 50px !important; |
||||
text-align: center !important; |
||||
background: var(--el-color-white) !important; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue