修改污区图

This commit is contained in:
GGJ
2025-04-29 14:31:25 +08:00
parent 4aac705a72
commit 1018de896e
3 changed files with 108 additions and 45 deletions

View File

@@ -151,9 +151,10 @@ export function getList(data: any) {
}) })
} }
//查询前置-进程-设备-设备树 //查询前置-进程-设备-设备树
export function nodeDeviceTree() { export function nodeDeviceTree(data: any) {
return createAxios({ return createAxios({
url: '/device-boot/nodeDevice/nodeDeviceTree', url: '/device-boot/nodeDevice/nodeDeviceTree',
method: 'post', method: 'post',
params: data
}) })
} }

View File

@@ -39,27 +39,42 @@
@current-change="currentChangeEvent" @current-change="currentChangeEvent"
></Table> ></Table>
</div> </div>
<div class="pd10" style="width: 400px"> <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 <el-tree
style="max-width: 600px" :style="height"
style="overflow-y: auto"
:data="dataSource" :data="dataSource"
node-key="id" node-key="id"
ref="treeRef"
default-expand-all default-expand-all
:expand-on-click-node="false" :props="defaultProps"
:filter-node-method="filterNode"
> >
<template #default="{ node, data }"> <template #default="{ node, data }">
<div class="custom-tree-node"> <div class="custom-tree-node">
<span>{{ node.label }}</span> <span>{{ node.label }}</span>
<div> <div>
<el-button type="primary" link>Append</el-button> <!-- <el-button type="primary" v-if="data.id == undefined" link icon="el-icon-Plus" ></el-button> -->
<el-button style="margin-left: 4px" type="danger" link>删除</el-button> <el-button
style="margin-left: 4px"
icon="el-icon-Edit"
v-if="data.id"
type="primary"
@click="edit(data)"
link
></el-button>
</div> </div>
</div> </div>
</template> </template>
</el-tree> </el-tree>
</div> </div>
</div> </div>
<el-dialog <el-dialog
draggable draggable
:title="dialogTitle" :title="dialogTitle"
@@ -126,8 +141,25 @@
<el-button type="primary" @click="onSubmit"> </el-button> <el-button type="primary" @click="onSubmit"> </el-button>
</template> </template>
</el-dialog> </el-dialog>
<!-- 绑定监测点 --> <!-- 绑定监测点 -->
<Bind ref="bindRef" /> <Bind ref="bindRef" />
<!-- 绑定进程号 -->
<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> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -138,12 +170,12 @@ import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue' import TableHeader from '@/components/table/header/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus' import { ElMessage, ElMessageBox } from 'element-plus'
import { ElButton } from 'element-plus' import { ElButton } from 'element-plus'
import type Node from 'element-plus/es/components/tree/src/model/node' import { mainHeight } from '@/utils/layout'
import Bind from './bind.vue' import Bind from './bind.vue'
defineOptions({ defineOptions({
name: 'BusinessAdministrator/TerminalManagement/FrontManagement' name: 'BusinessAdministrator/TerminalManagement/FrontManagement'
}) })
const filterText = ref('')
const fontdveoption: any = ref([ const fontdveoption: any = ref([
{ id: 0, name: '极重要' }, { id: 0, name: '极重要' },
{ id: 1, name: '普通' }, { id: 1, name: '普通' },
@@ -153,10 +185,18 @@ const statusoption: any = ref([
{ id: 0, name: '未启用' }, { id: 0, name: '未启用' },
{ id: 1, name: '启用' } { id: 1, name: '启用' }
]) ])
const height = mainHeight(70)
const bindRef = ref() const bindRef = ref()
const loading = ref(false)
const popUps = ref(false)
const tableRef = ref() const tableRef = ref()
const processNo = ref('')
const ruleFormRef = ref() const ruleFormRef = ref()
const dataSource = ref([])
const defaultProps = {
children: 'deviceInfoList',
label: 'name'
}
const formData: any = ref({ const formData: any = ref({
name: '', name: '',
ip: '', ip: '',
@@ -283,11 +323,61 @@ const tableStore = new TableStore({
}) })
// 点击行 // 点击行
const currentChangeEvent = () => { const currentChangeEvent = () => {
nodeDeviceTree().then(res => {}) loading.value = true
const row = tableRef.value.getRef().getCurrentRecord() dataSource.value = []
console.log('🚀 ~ currentChangeEvent ~ row:', row) nodeDeviceTree({
nodeId: tableRef.value.getRef().getCurrentRecord().id
}).then(res => {
dataSource.value = res.data.processDeviceList.filter(item => (item.name = item.processNo + ''))
loading.value = false
})
// const row = tableRef.value.getRef().getCurrentRecord()
}
const treeRef = ref()
// 树过滤
const change = val => {
treeRef.value!.filter(filterText.value)
}
const edit = (data: any) => {
console.log("🚀 ~ edit ~ data:", data)
processNo.value = data.processNo
popUps.value = true
}
const bindTheProcess = () => {}
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
}
const bind = () => {} const bind = () => {}
tableStore.table.params.orderBy = 'desc' tableStore.table.params.orderBy = 'desc'
@@ -339,36 +429,7 @@ onMounted(() => {
tableStore.index() tableStore.index()
}, 100) }, 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 = () => {} const addMenu = () => {}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@@ -16,7 +16,7 @@
<template #default="scope"> <template #default="scope">
<span v-if="scope.row.data == 3.14159" type="primary" size="small">暂无数据</span> <span v-if="scope.row.data == 3.14159" type="primary" size="small">暂无数据</span>
<span v-else type="primary" size="small"> <span v-else type="primary" size="small">
{{ scope.row.data }} {{ parseFloat(scope.row.data.toFixed(2)) }}
</span> </span>
</template> </template>
</vxe-column> </vxe-column>
@@ -77,13 +77,14 @@ const title = ref('')
const key = ref(0) const key = ref(0)
const statisticalName = ref('') const statisticalName = ref('')
const open = (row: any, flag: boolean, params: any) => { const open = (row: any, flag: boolean, params: any) => {
console.log("🚀 ~ open ~ row:", row)
voltageLevelFlag.value = flag voltageLevelFlag.value = flag
loading.value = true loading.value = true
title.value = row.name + '详情' title.value = row.name + '详情'
statisticalName.value = params.statisticalType.name + '(%)' statisticalName.value = params.statisticalType.name + '(%)'
tableData.value = [] tableData.value = []
if (flag) { if (flag) {
getLineInfoById({ ...params, deptIndex: row.pid, id: row.id }).then((res: any) => { getLineInfoById({ ...params, deptIndex: row.pid, id: row.id ,powerFlag: row.powerFlag }).then((res: any) => {
tableData.value = res.data tableData.value = res.data
loading.value = false loading.value = false
}).catch(() => { }).catch(() => {