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-11 10:35:25 +08:00
parent 2e58e58c73
commit a3b6a5c0be
23 changed files with 9302 additions and 3827 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4051
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@@ -18,6 +18,7 @@
"@wangeditor/editor-for-vue": "^5.1.12",
"axios": "^1.6.2",
"crypto-js": "^4.2.0",
"dayjs": "^1.11.18",
"echarts": "^5.4.3",
"echarts-gl": "^2.0.9",
"echarts-liquidfill": "^3.1.0",

5709
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

3
src/App.vue
View File

@@ -11,7 +11,8 @@ import { provide, onMounted, ref } from 'vue'
//线上mqtt
// let buildUrl = 'wss://pqmcn.com:8087/mqtt'//102
let buildUrl = 'ws://pqmcn.com:8073/mqtt' //27
// let buildUrl = 'ws://pqmcn.com:8073/mqtt' //27
let buildUrl = 'ws://192.168.1.103:8083/mqtt' //27
// 从 Nginx 获取 MQTT URL
const fetchMqttUrl = async () => {

132
src/api/cs-device-boot/cloudDeviceEntry.ts Normal file
View File

@@ -0,0 +1,132 @@
import createAxios from "@/utils/request";
//根据Id获取台账信息
export function getInfoById(id: any) {
let form = new FormData()
form.append('id', id)
return createAxios({
url: '/cs-device-boot/icd/getLedgerById',
method: 'POST',
data: form
})
}
//工程查询通过id获取
export function getEngineerById(id: any) {
let form = new FormData()
form.append('id', id)
return createAxios({
url: '/cs-device-boot/engineering/queryEngineeringById',
method: 'POST',
data: form
})
}
//项目查询通过id获取
export function getProjectById(id: any) {
let form = new FormData()
form.append('ids', id)
return createAxios({
url: '/cs-device-boot/project/queryProjectById',
method: 'POST',
data: form
})
}
//设备查询通过id获取
export function getEquipmentById(id: any) {
let form = new FormData()
form.append('ids', id)
return createAxios({
url: '/cs-device-boot/EquipmentDelivery/queryEquipmentById',
method: 'POST',
data: form
})
}
//根据监测点id获取监测点详情
export function getById(id: any) {
let form = new FormData()
form.append('lineId', id)
return createAxios({
url: '/cs-device-boot/csline/getById',
method: 'POST',
data: form
})
}
//获取前置机
export function nodeAllList() {
return createAxios({
url: '/cs-device-boot/node/nodeAllList',
method: 'get'
})
}
//新增台账信息
export function addLedger(data: any) {
return createAxios({
url: '/cs-device-boot/icd/addLedgerInfo',
method: 'post',
data: data
})
}
//修改-删除项目
export function deleteProject(id: any,name:any,area:any,description:any,status:any) {
let form = new FormData()
form.append('id', id)
form.append('name', name)
form.append('area', area)
form.append('description', description)
form.append('status', status)
return createAxios({
url: '/cs-device-boot/project/auditAppProject',
method: 'post',
data: form
})
}
//删除设备
export function deleteEquipment(id: any) {
let form = new FormData()
form.append('id', id)
return createAxios({
url: '/cs-device-boot/EquipmentDelivery/delCldDev',
method: 'POST',
data: form
})
}
//删除监测点
export const deleteLine = (id: any) => {
let form = new FormData()
form.append('id', id)
return createAxios({
url: '/cs-device-boot/csline/delCldLine',
method: 'POST',
data: form
})
}
//修改设备
export function updateEquipment(data: any) {
return createAxios({
url: '/cs-device-boot/EquipmentDelivery/updateCldDev',
method: 'post',
data: data
})
}
//修改监测点
export function updateLine(data: any) {
return createAxios({
url: '/cs-device-boot/csline/updateCldLine',
method: 'post',
data: data
})
}

10
src/api/cs-device-boot/csLedger.ts
View File

@@ -15,3 +15,13 @@ export function getLineTree() {
method: 'POST'
})
}
//云设备录入树
export function getCldTree() {
return createAxios({
url: '/cs-device-boot/csLedger/cldTree',
method: 'POST'
})
}

7
src/api/cs-device-boot/edData.ts
View File

@@ -22,17 +22,16 @@ export const auditEdData = (data) => {
data: data,
})
}
// 修改工程
export const auditEngineering = (data) => {
// 修改-删除工程
export const auditEngineering = (data:any)=> {
return request({
url: '/cs-device-boot/engineering/auditEngineering',
method: 'post',
data: data,
})
}
// 修改项目
export const updateProject = (data) => {
export const updateProject = (data:any) => {
return request({
url: '/cs-device-boot/project/updateProject',
method: 'post',

250
src/components/form/mac/MacAddressInput.vue Normal file
View File

@@ -0,0 +1,250 @@
<template>
<div class="mac-address-input" :class="{ disabled: disabled }">
<template v-for="n in 6" :key="n">
<el-input
ref="inputRefs"
v-model="segments[n - 1]"
type="text"
maxlength="2"
:disabled="disabled"
@input="handleInput(n - 1)"
@keydown="handleKeydown(n - 1,$event)"
@focus="handleFocus(n - 1)"
@blur="handleBlur"
@paste="handlePaste(n - 1, $event)"
/>
<span v-if="n < 6" class="separator">:</span>
</template>
</div>
</template>
<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'
interface Props {
modelValue?: string
disabled?: boolean
}
interface Emits {
(e: 'update:modelValue', value: string): void
}
const props = withDefaults(defineProps<Props>(), {
modelValue: '',
disabled: false
})
const emit = defineEmits<Emits>()
// 创建6个输入框的引用
const inputRefs = ref<InstanceType<typeof import('element-plus').ElInput>[]>([])
// MAC地址的6个段
const segments = ref<string[]>(Array(6).fill(''))
// 解析传入的MAC地址
const parseMacAddress = (mac: string): string[] => {
if (!mac) return Array(6).fill('')
// 移除非十六进制字符并转为大写
const cleanMac = mac.replace(/[^0-9a-fA-F]/g, '').toUpperCase()
// 分割成6段，每段2个字符
const result: string[] = []
for (let i = 0; i < 6; i++) {
result.push(cleanMac.substr(i * 2, 2))
}
return result
}
// 格式化MAC地址段
const formatSegment = (value: string): string => {
// 只保留前两个十六进制字符并转为大写
return value.replace(/[^0-9a-fA-F]/g, '').toUpperCase().substr(0, 2)
}
// 当前聚焦的输入框索引
const focusedIndex = ref<number | null>(null)
// 处理输入事件
const handleInput = (index: number) => {
// 格式化输入值
const formatted = formatSegment(segments.value[index])
segments.value[index] = formatted
// 如果当前段已满2个字符且不是最后一段，自动跳转到下一个输入框
if (formatted.length === 2 && index < 5) {
// 获取下一个输入框的DOM元素
setTimeout(() => {
const nextInput = inputRefs.value[index + 1]
if (nextInput) {
const inputEl = nextInput.$el.querySelector('input')
if (inputEl) {
inputEl.focus()
inputEl.select()
}
}
}, 0)
}
// 更新v-model值
updateModelValue()
}
// 处理键盘事件
const handleKeydown = (index: number, event: KeyboardEvent) => {
const target = event.target as HTMLInputElement
// 处理退格键
if (event.key === 'Backspace' && target.selectionStart === 0 && target.selectionEnd === 0) {
if (segments.value[index] === '' && index > 0) {
// 如果当前段为空，跳转到前一个输入框
event.preventDefault()
const prevInput = inputRefs.value[index - 1]
if (prevInput) {
const inputEl = prevInput.$el.querySelector('input')
if (inputEl) {
inputEl.focus()
// 将光标移到末尾
setTimeout(() => {
inputEl.selectionStart = inputEl.value.length
inputEl.selectionEnd = inputEl.value.length
}, 0)
}
}
}
}
// 处理左箭头键
if (event.key === 'ArrowLeft' && target.selectionStart === 0) {
if (index > 0) {
event.preventDefault()
const prevInput = inputRefs.value[index - 1]
if (prevInput) {
const inputEl = prevInput.$el.querySelector('input')
if (inputEl) {
inputEl.focus()
}
}
}
}
// 处理右箭头键和制表符
if ((event.key === 'ArrowRight' && target.selectionStart === target.value.length) || event.key === 'Tab') {
if (index < 5) {
event.preventDefault()
const nextInput = inputRefs.value[index + 1]
if (nextInput) {
const inputEl = nextInput.$el.querySelector('input')
if (inputEl) {
inputEl.focus()
}
}
}
}
}
// 处理焦点事件
const handleFocus = (index: number) => {
focusedIndex.value = index
}
// 处理失焦事件
const handleBlur = () => {
focusedIndex.value = null
}
// 处理粘贴事件
const handlePaste = (index: number, event: ClipboardEvent) => {
event.preventDefault()
const pastedText = event.clipboardData?.getData('text') || ''
// 清理粘贴的文本
const cleanText = parseMacAddress(pastedText)
// 填充各段
for (let i = 0; i < 6; i++) {
segments.value[i] = cleanText[i] || ''
}
// 更新v-model值
updateModelValue()
// 聚焦到最后一个非空段或最后一个段
setTimeout(() => {
let focusIndex = 5
for (let i = 5; i >= 0; i--) {
if (segments.value[i] !== '') {
focusIndex = i
break
}
}
const inputToFocus = inputRefs.value[focusIndex]
if (inputToFocus) {
const inputEl = inputToFocus.$el.querySelector('input')
if (inputEl) {
inputEl.focus()
inputEl.select()
}
}
}, 0)
}
// 更新v-model值
const updateModelValue = () => {
// 过滤掉空段，然后用冒号连接
const nonEmptySegments = segments.value.filter(s => s !== '')
const mac = nonEmptySegments.join(':')
emit('update:modelValue', mac)
}
// 监听modelValue变化
watch(
() => props.modelValue,
(newVal) => {
if (newVal !== segments.value.filter(s => s !== '').join(':')) {
segments.value = parseMacAddress(newVal || '')
}
},
{ immediate: true }
)
</script>
<style scoped lang="scss">
.mac-address-input {
display: flex;
align-items: center;
gap: 4px;
&.disabled {
opacity: 0.7;
}
input {
width: 40px;
height: 32px;
text-align: center;
border: 1px solid #dcdfe6;
border-radius: 4px;
outline: none;
font-size: 14px;
text-transform: uppercase;
&:focus {
border-color: #409eff;
}
&:disabled {
background-color: #f5f7fa;
cursor: not-allowed;
}
}
.separator {
user-select: none;
font-weight: 500;
}
}
</style>

138
src/components/tree/cloudDevice.vue Normal file
View File

@@ -0,0 +1,138 @@
<template>
<div :style="{ width: menuCollapse ? '40px' : props.width }" style='transition: all 0.3s; overflow: hidden;'>
<Icon v-show='menuCollapse' @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 mt20 menu-collapse'
style='cursor: pointer' />
<div class='cn-tree' :style='{ opacity: menuCollapse ? 0 : 1 }'>
<div style='display: flex; align-items: center' class='mb10'>
<el-input maxlength="32" show-word-limit v-model.trim='filterText' placeholder='请输入内容' clearable>
<template #prefix>
<Icon name='el-icon-Search' style='font-size: 16px' />
</template>
</el-input>
<!-- <Icon @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 menu-collapse'
style='cursor: pointer' v-if='props.canExpand' /> -->
</div>
<el-tree :style="{ height: 'calc(100vh - 200px)' }"
style=' overflow: auto;' ref='treeRef' :props='defaultProps' highlight-current
@check-change="checkTreeNodeChange" :filter-node-method='filterNode' node-key='id' v-bind='$attrs'>
<template #default='{ node, data }'>
<span class='custom-tree-node'>
<Icon :name='data.icon' style='font-size: 16px' :style='{ color: data.color }'
v-if='data.icon' />
<span style='margin-left: 4px'>{{ node.label }}</span>
</span>
</template>
</el-tree>
</div>
</div>
</template>
<script lang='ts' setup>
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElTree } from 'element-plus'
import { emit } from 'process';
import { ref, watch } from 'vue'
defineOptions({
name: 'govern/tree'
})
interface Props {
width?: string
canExpand?: boolean
}
const props = withDefaults(defineProps<Props>(), {
width: '280px',
canExpand: true
})
const { proxy } = useCurrentInstance()
const menuCollapse = ref(false)
const filterText = ref('')
const defaultProps = {
label: 'name',
value: 'id'
}
const emit = defineEmits(['checkTreeNodeChange'])
watch(filterText, val => {
treeRef.value!.filter(val)
})
const onMenuCollapse = () => {
menuCollapse.value = !menuCollapse.value
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
}
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 checkTreeNodeChange = () => {
// console.log(treeRef.value?.getCheckedNodes(), "ikkkkkiisiiisis");
emit('checkTreeNodeChange', treeRef.value?.getCheckedNodes())
}
const treeRef = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef })
</script>
<style lang='scss' scoped>
.cn-tree {
flex-shrink: 0;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 10px;
height: 100%;
width: 100%;
:deep(.el-tree) {
border: 1px solid var(--el-border-color);
}
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
background-color: var(--el-color-primary-light-7);
}
.menu-collapse {
color: var(--el-color-primary);
}
}
.custom-tree-node {
display: flex;
align-items: center;
}
</style>

55
src/components/tree/device.vue
View File

@@ -99,6 +99,32 @@
</template>
</el-tree>
</el-collapse-item>
<el-collapse-item title="云前置设备" name="2" v-if="frontDeviceData.length != 0">
<el-tree
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 280px)' : 'calc(100vh - 238px)' }"
ref="treeRef3"
:props="defaultProps"
highlight-current
default-expand-all
:filter-node-method="filterNode"
node-key="id"
:data="frontDeviceData"
v-bind="$attrs"
style="overflow: auto"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<Icon
:name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
</el-tree>
</el-collapse-item>
</el-collapse>
</div>
</div>
@@ -140,6 +166,8 @@ const zlDeviceData = ref([])
const zlDevList = ref<any>([])
//便携式设备数据
const bxsDeviceData = ref([])
//前置设备数据
const frontDeviceData = ref([])
watch(
() => props.data,
(val, oldVal) => {
@@ -153,6 +181,11 @@ watch(
item.children.map((vv: any) => {
bxsDeviceData.value.push(vv)
})
}else if (item.name == '云前置设备') {
item.children.map((vv: any) => {
frontDeviceData.value.push(vv)
})
}
})
}
@@ -166,8 +199,10 @@ watch(
watch(filterText, val => {
if (activeName.value == '0') {
treeRef1.value!.filter(val)
} else {
} else if(activeName.value == '1'){
treeRef2.value!.filter(val)
}else {
treeRef3.value!.filter(val)
}
})
watch(process, val => {
@@ -242,6 +277,7 @@ const chooseNode = (value: string, data: any, node: any) => {
}
const changeDevice = (val: any) => {
console.log('changeDevice', val)
let arr1: any = []
//zlDeviceData
@@ -258,6 +294,14 @@ const changeDevice = (val: any) => {
arr2.push(item)
// })
})
let arr3: any = []
frontDeviceData.value.forEach((item: any) => {
item.children.forEach((item2: any) => {
item2.children.forEach((item3: any) => {
arr3.push(item3)
})
})
})
if (val == '0') {
arr2.map((item: any) => {
item.checked = false
@@ -272,11 +316,20 @@ const changeDevice = (val: any) => {
treeRef2.value && treeRef2.value.setCurrentKey(arr2[0].id)
emit('changeDeviceType', activeName.value, arr2[0])
}
if (val == '2') {
arr3.map((item: any) => {
item.checked = false
})
treeRef3.value && treeRef3.value.setCurrentKey(arr3[0].id)
emit('changeDeviceType', activeName.value, arr3[0])
}
}
//治理
const treeRef1 = ref<InstanceType<typeof ElTree>>()
//便携式
const treeRef2 = ref<InstanceType<typeof ElTree>>()
//前置
const treeRef3 = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef1, treeRef2 })
onMounted(() => {
setTimeout(() => {

171
src/components/tree/govern/cloudDeviceEntryTree.vue Normal file
View File

@@ -0,0 +1,171 @@
<template>
<Tree ref="treRef" :width="width" :data="tree" default-expand-all @changePointType="changePointType" />
</template>
<script lang="ts" setup>
import { ref, nextTick, onMounted, defineProps } from 'vue'
import Tree from '../index.vue'
import { getLineTree,getCldTree } from '@/api/cs-device-boot/csLedger'
import { useConfig } from '@/stores/config'
import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
import { useDictData } from '@/stores/dictData'
interface Props {
template?: boolean
}
const props = withDefaults(defineProps<Props>(), {
template: false
})
defineOptions({
name: 'govern/deviceTree'
})
const emit = defineEmits(['init', 'checkChange', 'pointTypeChange', 'Policy'])
const config = useConfig()
const tree = ref()
const dictData = useDictData()
const treRef = ref()
const width = ref('')
const info = (selectedNodeId?: string) => {
console.log('tree.value:', selectedNodeId);
tree.value = []
let arr1: any[] = []
getCldTree().then(res => {
try {
// 检查响应数据结构
let rootData = null;
if (Array.isArray(res.data)) {
// 旧的数据结构 - 数组
rootData = res.data.find((item: any) => item.name == '云前置设备');
} else if (res.data && res.data.name == '云前置设备') {
// 新的数据结构 - 单个对象
rootData = res.data;
}
// 治理设备
if (rootData) {
rootData.icon = 'el-icon-Menu'
rootData.level = 0
rootData.color = config.getColorVal('elementUiPrimary')
// 确保根节点的 children 是数组
if (!Array.isArray(rootData.children)) {
rootData.children = []
}
rootData.children.forEach((item: any) => {
item.icon = 'el-icon-HomeFilled'
item.level = 1
item.color = config.getColorVal('elementUiPrimary')
// 确保 children 是数组
if (!Array.isArray(item.children)) {
item.children = []
}
item.children.forEach((item2: any) => {
item2.icon = 'el-icon-List'
item2.level = 2
item2.color = config.getColorVal('elementUiPrimary')
// 确保 children 是数组
if (!Array.isArray(item2.children)) {
item2.children = []
}
item2.children.forEach((item3: any) => {
item3.icon = 'el-icon-Platform'
item3.level = 3
item3.color =
item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
// 确保 children 是数组
if (!Array.isArray(item3.children)) {
item3.children = []
}
item3.children.forEach((item4: any) => {
item4.icon = 'el-icon-Platform'
item4.level = 4
item4.color =
item4.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
arr1.push(item4)
})
})
})
})
tree.value = [rootData] // 确保 tree.value 是数组
} else {
tree.value = []
}
nextTick(() => {
if (arr1.length) {
// 安全检查 treRef 和 treeRef1 是否存在
if (treRef.value && treRef.value.treeRef1 && treRef.value.treeRef1.setCurrentKey) {
// 如果传入了要选中的节点ID，则选中该节点，否则选中第一个节点
console.log('selectedNodeId:', selectedNodeId);
if (selectedNodeId) {
treRef.value.treeRef1.setCurrentKey(selectedNodeId);
// 查找对应的节点数据并触发事件
let selectedNode = null;
const findNode = (nodes: any[]) => {
for (const node of nodes) {
if (node.id === selectedNodeId) {
selectedNode = node;
return true;
}
if (node.children && findNode(node.children)) {
return true;
}
}
return false;
};
findNode(tree.value);
if (selectedNode) {
emit('init', {
level: selectedNode.level,
...selectedNode
});
}
} else {
// 初始化选中第一个节点
treRef.value.treeRef1.setCurrentKey(arr1[0].id);
emit('init', {
level: 2,
...arr1[0]
});
}
}
} else {
}
})
} catch (error) {
console.error('Error in processing getCldTree response:', error)
}
})
}
const changePointType = (val: any, obj: any) => {
emit('pointTypeChange', val, obj)
}
if (props.template) {
getTemplateByDept({ id: dictData.state.area[0].id })
.then((res: any) => {
emit('Policy', res.data)
info()
})
.catch(err => {
info()
})
} else {
info()
}
// 暴露 info 方法给父组件调用
defineExpose({
info
})
onMounted(() => {})
</script>

35
src/components/tree/govern/deviceTree.vue
View File

@@ -38,6 +38,7 @@ const changeDeviceType = (val: any, obj: any) => {
getDeviceTree().then(res => {
let arr: any[] = []
let arr2: any[] = []
let arr3: any[] = []
//治理设备
res.data.map((item: any) => {
if (item.name == '治理设备') {
@@ -58,7 +59,6 @@ getDeviceTree().then(res => {
})
})
} else if (item.name == '便携式设备') {
// console.log(11111)
item.children.forEach((item: any) => {
item.icon = 'el-icon-Platform'
item.color = config.getColorVal('elementUiPrimary')
@@ -82,9 +82,28 @@ getDeviceTree().then(res => {
// })
})
})
}else if (item.name == '云前置设备') {
item.children.forEach((item: any) => {
item.icon = 'el-icon-HomeFilled'
item.color = config.getColorVal('elementUiPrimary')
item.children.forEach((item2: any) => {
item2.icon = 'el-icon-List'
item2.color = config.getColorVal('elementUiPrimary')
item2.children.forEach((item3: any) => {
item3.icon = 'el-icon-Platform'
item3.color = config.getColorVal('elementUiPrimary')
if (item3.comFlag === 1) {
item3.color = '#e26257 !important'
}
arr3.push(item3)
})
})
})
}
})
console.log("🚀 ~ file: deviceTree.vue ~ line 18 ~ getDeviceTree ~ tree:", arr,arr2,arr3)
tree.value = res.data
nextTick(() => {
if (arr.length) {
treRef.value.treeRef1.setCurrentKey(arr[0].id)
@@ -103,7 +122,19 @@ getDeviceTree().then(res => {
...arr2[0]
})
return
} else {
}
console.log("🚀 ~ file: deviceTree.vue ~ line 33 ~ getDeviceTree ~ tree:", arr3.length)
if (arr3.length) {
console.log("🚀 ~ file: deviceTree.vue ~ line 33 ~ getDeviceTree ~ tree:", arr3)
treRef.value.treeRef3.setCurrentKey(arr3[0].id)
// 注册父组件事件
emit('init', {
level: 2,
...arr3[0]
})
return
}
else {
emit('init')
return
}

57
src/components/tree/govern/pointTree.vue
View File

@@ -31,6 +31,7 @@ const info = () => {
tree.value = []
let arr1: any[] = []
let arr2: any[] = []
let arr3: any[] = []
getLineTree().then(res => {
//治理设备
res.data.map((item: any) => {
@@ -70,10 +71,33 @@ const info = () => {
arr2.push(item2)
})
})
} else if (item.name == '云前置设备') {
item.children.forEach((item: any) => {
item.icon = 'el-icon-HomeFilled'
item.level = 1
item.color = config.getColorVal('elementUiPrimary')
item.children.forEach((item2: any) => {
item2.icon = 'el-icon-List'
item2.level = 1
item2.color = config.getColorVal('elementUiPrimary')
item2.children.forEach((item3: any) => {
item3.icon = 'el-icon-Platform'
item3.level = 1
item3.color =
item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
item3.children.forEach((item4: any) => {
item4.icon = 'el-icon-Platform'
item4.color =
item4.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
// item4.color = '#e26257 !important'
arr3.push(item4)
})
})
})
})
}
})
tree.value = res.data
nextTick(() => {
if (arr1.length) {
//初始化选中
@@ -83,18 +107,29 @@ const info = () => {
level: 2,
...arr1[0]
})
return
}
if (arr2.length) {
//初始化选中
treRef.value.treeRef2.setCurrentKey(arr2[0].id)
// 注册父组件事件
emit('init', {
level: 2,
...arr2[0]
})
return
}
if(arr3.length){
treRef.value.treeRef3.setCurrentKey(arr3[0].id)
emit('init', {
level: 2,
...arr3[0]
})
return
}
// if (arr2.length) {
// //初始化选中
// treRef.value.treeRef2.setCurrentKey(arr2[0].id)
// // 注册父组件事件
// emit('init', {
// level: 2,
// ...arr2[0]
// })
// }
else {
emit('init', arr2[0])
emit('init')
return
}
})
})

9
src/components/tree/index.vue
View File

@@ -10,11 +10,12 @@
<Icon name='el-icon-Search' style='font-size: 16px' />
</template>
</el-input>
<Icon @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
<!-- <Icon @click='onMenuCollapse' :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''" size='18' class='fold ml10 menu-collapse'
style='cursor: pointer' v-if='props.canExpand' />
style='cursor: pointer' v-if='props.canExpand' /> -->
</div>
<el-tree style='flex: 1; overflow: auto;' ref='treeRef' :props='defaultProps' highlight-current
<el-tree :style="{ height: 'calc(100vh - 200px)' }"
style=' overflow: auto;' ref='treeRef' :props='defaultProps' highlight-current
@check-change="checkTreeNodeChange" :filter-node-method='filterNode' node-key='id' v-bind='$attrs'>
<template #default='{ node, data }'>
<span class='custom-tree-node'>
@@ -33,6 +34,7 @@ import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElTree } from 'element-plus'
import { emit } from 'process';
import { ref, watch } from 'vue'
import { t } from 'vxe-table';
defineOptions({
name: 'govern/tree'
@@ -63,6 +65,7 @@ const onMenuCollapse = () => {
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
}
const filterNode = (value: string, data: any, node: any) => {
console.log(value, data, node, 'filterNode');
if (!value) return true
// return data.name.includes(value)
if (data.name) {

94
src/components/tree/point.vue
View File

@@ -68,7 +68,7 @@
</el-collapse-item>
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
<el-tree
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 280px)' : 'calc(100vh - 238px)' }"
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 330px)' : 'calc(100vh - 238px)' }"
ref="treeRef2"
:props="defaultProps"
highlight-current
@@ -92,6 +92,32 @@
</template>
</el-tree>
</el-collapse-item>
<el-collapse-item title="云前置设备" name="2" v-if="yqfDeviceData.length != 0">
<el-tree
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 330px)' : 'calc(100vh - 238px)' }"
ref="treeRef3"
:props="defaultProps"
highlight-current
default-expand-all
:filter-node-method="filterNode"
node-key="id"
:data="yqfDeviceData"
v-bind="$attrs"
style="overflow: auto"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<Icon
:name="data.icon"
style="font-size: 16px"
:style="{ color: data.color }"
v-if="data.icon"
/>
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
</el-tree>
</el-collapse-item>
</el-collapse>
</div>
</div>
@@ -100,6 +126,7 @@
<script lang="ts" setup>
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElTree } from 'element-plus'
import { el } from 'element-plus/es/locale'
import { ref, watch, defineEmits, onMounted, nextTick, computed } from 'vue'
import { useRoute } from 'vue-router'
defineOptions({
@@ -134,6 +161,8 @@ const zlDeviceData = ref<any>([])
const zlDevList = ref<any>([])
//便携式设备数据
const bxsDeviceData = ref<any>([])
//云前置设备数据
const yqfDeviceData = ref<any>([])
watch(
() => props.data,
(val, oldVal) => {
@@ -148,21 +177,13 @@ watch(
item.children.map((vv: any) => {
bxsDeviceData.value.push(vv)
})
}else if (item.name == '云前置设备') {
item.children.map((vv: any) => {
yqfDeviceData.value.push(vv)
})
}
})
if (zlDeviceData.value.length != 0) {
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
activeName.value = '0'
}
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
activeName.value = '1'
}
if (!zlDeviceData.value && !bxsDeviceData.value) {
activeName.value = ''
}
nextTick(() => {
changeDevice(activeName.value)
})
}
},
{
@@ -174,8 +195,10 @@ watch(
watch(filterText, val => {
if (activeName.value == '0') {
treeRef1.value!.filter(val)
} else {
} else if(activeName.value == '1') {
treeRef2.value!.filter(val)
}else {
treeRef3.value!.filter(val)
}
})
watch(process, val => {
@@ -190,6 +213,7 @@ watch(process, val => {
})
const changeDevice = (val: any) => {
console.log('changeDevice', val)
let arr1: any = []
//zlDeviceData
zlDevList.value.forEach((item: any) => {
@@ -207,6 +231,16 @@ const changeDevice = (val: any) => {
arr2.push(item2)
})
})
let arr3: any = []
yqfDeviceData.value.forEach((item: any) => {
item.children.forEach((item2: any) => {
item2.children.forEach((item3: any) => {
item3.children.forEach((item4: any) => {
arr3.push(item4)
})
})
})
})
activeName.value = val
if (val == '0') {
arr2.map((item: any) => {
@@ -222,6 +256,13 @@ const changeDevice = (val: any) => {
treeRef2?.value && treeRef2.value.setCurrentKey(arr2[0]?.id)
emit('changePointType', activeName.value, arr2[0])
}
if(val == '2'){
arr3.map((item: any) => {
item.checked = false
})
treeRef3?.value && treeRef3.value.setCurrentKey(arr3[0]?.id)
emit('changePointType', activeName.value, arr3[0])
}
// if(activeName.value){
// emit('changePointType', activeName.value)
// }
@@ -290,12 +331,25 @@ const chooseNode = (value: string, data: any, node: any) => {
const treeRef1 = ref<InstanceType<typeof ElTree>>()
//便携式
const treeRef2 = ref<InstanceType<typeof ElTree>>()
//云前置
const treeRef3 = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef1, treeRef2 })
onMounted(() => {
// nextTick(() => {
// // setTimeout(() => {
// // }, 500)
// })
setTimeout(() => {
if (zlDeviceData.value.length != 0) {
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
activeName.value = '0'
}
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
activeName.value = '1'
}
if (!zlDeviceData.value && !bxsDeviceData.value) {
activeName.value = ''
}
nextTick(() => {
changeDevice(activeName.value)
})
}, 500)
})
</script>
@@ -327,4 +381,6 @@ onMounted(() => {
display: flex;
align-items: center;
}
</style>

1
src/utils/router.ts
View File

@@ -17,6 +17,7 @@ import { log } from 'console'
export const routePush = async (to: RouteLocationRaw) => {
try {
const failure = await router.push(to)
if (isNavigationFailure(failure, NavigationFailureType.aborted)) {
ElNotification({
message: 'utils.Navigation failed, navigation guard intercepted!',

80
src/views/govern/alarm/Front.vue Normal file
View File

@@ -0,0 +1,80 @@
<template>
<TableHeader datePicker ref="refheader" showExport>
<template v-slot:select>
<el-form-item label="关键词">
<el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" placeholder="请输入前置服务器名称，ip" />
</el-form-item>
</template>
</TableHeader>
<!-- <div style="height: 300px;"> -->
<Table ref="tableRef" :isGroup="true" />
<!-- </div> -->
</template>
<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { mainHeight } from '@/utils/layout'
const props = defineProps(['deviceTree'])
const refheader = ref()
const tableStore = new TableStore({
url: '/cs-harmonic-boot/eventUser/frontWarnInfo',
method: 'POST',
exportName: '前置告警',
publicHeight: 65,
column: [
{
title: '序号',
width: 80,
formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{ title: '前置服务器名称', field: 'lineId', align: 'center' },
{ title: '前置服务器ip', field: 'wavePath', align: 'center' },
{ title: '进程号', field: 'clDid', align: 'center' },
{ title: '发生时刻', field: 'startTime', align: 'center', minWidth: 80, sortable: true },
{
title: '事件描述',
field: 'tag',
minWidth: 350
},
{
title: '告警代码',
field: 'code',
align: 'center',
formatter: (row: any) => {
return row.cellValue ? row.cellValue : '/'
},
sortable: true
},
],
beforeSearchFun: () => {}
})
provide('tableStore', tableStore)
tableStore.table.params.searchValue = ''
const deviceTreeOptions = ref<any>(props.deviceTree)
deviceTreeOptions.value.map((item: any, index: any) => {
if (item.children.length == 0) {
deviceTreeOptions.value.splice(index, 1)
}
})
onMounted(() => {
tableStore.index()
})
setTimeout(() => {
// tableStore.table.height = mainHeight(200).height as any
}, 0)
</script>
<style></style>

16
src/views/govern/alarm/index.vue
View File

@@ -4,14 +4,17 @@
<el-tab-pane label="设备告警" name="1">
<Device v-if="activeName == '1'" :deviceTree="deviceTree" :key="key" />
</el-tab-pane>
<el-tab-pane label="稳态越限告警" name="2">
<Steady v-if="activeName == '2'" :deviceTree="deviceTree" :key="key" />
<el-tab-pane label="前置告警" name="2">
<Front v-if="activeName == '2'" :deviceTree="deviceTree" :key="key" />
</el-tab-pane>
<el-tab-pane label="暂态事件" name="3">
<Transient v-if="activeName == '3'" :deviceTree="deviceTree" :key="key" />
<el-tab-pane label="稳态越限告警" name="3">
<Steady v-if="activeName == '3'" :deviceTree="deviceTree" :key="key" />
</el-tab-pane>
<el-tab-pane label="异常事件" name="4">
<Abnormal v-if="activeName == '4'" :deviceTree="deviceTree" :key="key" />
<el-tab-pane label="暂态事件" name="4">
<Transient v-if="activeName == '4'" :deviceTree="deviceTree" :key="key" />
</el-tab-pane>
<el-tab-pane label="异常事件" name="5">
<Abnormal v-if="activeName == '5'" :deviceTree="deviceTree" :key="key" />
</el-tab-pane>
</el-tabs>
</div>
@@ -22,6 +25,7 @@ import Steady from './Steady.vue'
import Transient from './Transient.vue'
import Device from './Device.vue'
import Abnormal from './Abnormal.vue'
import Front from './Front.vue'
import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
defineOptions({
name: 'govern/alarm/index'

2133
src/views/govern/cloudDeviceEntry/index.vue Normal file
View File

File diff suppressed because it is too large Load Diff

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

@@ -732,14 +732,14 @@ const handleHarmonicSpectrum = async () => {
// getRealDataMqttMsg()
await getBasicRealData(lineId.value).then((res: any) => {
if (res.code == 'A0000') {
// ElMessage.success('装置应答成功')
ElMessage.success('装置应答成功')
// mqttMessage.value = {}
realDataTimer.value = window.setInterval(() => {
if (!dataSet.value.includes('_realtimedata')) return
getBasicRealData(lineId.value).then((res: any) => {
// console.log(res, '获取基础实时数据')
console.log(res, '获取基础实时数据')
})
}, 30000)
}

25
src/views/govern/device/control/tabs/components/harmonicSpectrum.vue
View File

@@ -269,9 +269,20 @@ const childRefs: any = {}
const init = () => {
loading.value = true
//循环渲染图表
xAixsTimeList.value.push(mqttMessage.value.dataTime.split(" ")[1])
// 限制x轴数据点数量，避免过多数据点导致性能问题和显示重复
if (xAixsTimeList.value.length > 50) {
xAixsTimeList.value.shift()
}
searchForm.value.index.map((item: any, index: any) => {
item?.children.map((vv: any, vvs: any) => {
if (mqttMessage.value[vv.name] != undefined) {
// 清空当前时间点的数据（如果存在），防止重复
const currentTime = mqttMessage.value.dataTime.split(" ")[1];
vv.yMethodList = vv.yMethodList.filter((point: any) => point[0] !== currentTime);
item.data.push({
// time: mqttMessage.value.dataTime,
@@ -280,14 +291,16 @@ const init = () => {
})
allDataList.value.push(mqttMessage.value[vv.name])
vv.data.push(mqttMessage.value[vv.name])
vv.yMethodList.push([mqttMessage.value.dataTime.split(" ")[1], mqttMessage.value[vv.name] + '', vv.phase])
// 更新yMethodList数据，确保与xAixsTimeList保持同步
vv.yMethodList.push([currentTime, mqttMessage.value[vv.name] + '', vv.phase])
// 限制数据点数量，避免过多数据点导致性能问题和显示重复
if (vv.yMethodList.length > 50) {
vv.yMethodList.shift()
}
}
})
})
//循环渲染图表
xAixsTimeList.value.push(mqttMessage.value.dataTime.split(" ")[1])
searchForm.value.index.map((item: any, index: any) => {
@@ -378,7 +391,7 @@ defineExpose({ resetData, setHarmonicSpectrumData })
.harmonic {
width: 100%;
// height: 100%;
display: flex;
display: 'flex';
flex-direction: column;
position: relative;

142
src/views/govern/manage/factory.vue
View File

@@ -141,17 +141,17 @@
<el-form-item label="设备类型:" prop="devType" class="top">
<el-select v-model.trim="form.devType" placeholder="请选择" @change="formDevTypeChange" clearable>
<el-option
v-for="item in devTypeOptions"
v-for="item in formDevTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
:label="item.label || item.name"
:value="item.value || item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备型号:" prop="devModel" class="top">
<el-select v-model.trim="form.devModel" filterable placeholder="请选择" clearable>
<el-option
v-for="item in formDevModelOptionsFilter"
v-for="item in formDevModelOptionsFilter "
:key="item.value"
:label="item.label"
:value="item.value"
@@ -159,7 +159,7 @@
</el-select>
</el-form-item>
<el-form-item label="通讯协议:" prop="devAccessMethod" class="top">
<el-select v-model.trim="form.devAccessMethod" placeholder="请选择" clearable>
<el-select v-model.trim="form.devAccessMethod" placeholder="请选择" clearable disabled>
<el-option label="MQTT" value="MQTT"></el-option>
<el-option label="CLD" value="CLD"></el-option>
</el-select>
@@ -219,6 +219,8 @@ defineOptions({
})
const showQrCode = ref(false)
const devTypeOptions: any = ref([])
const devTypeOptions2: any = ref([])
const devModelOptions2: any = ref([])
const deivce: any = ref({})
const ruleFormRef = ref()
const form = reactive({
@@ -246,37 +248,54 @@ const dialogTitle = ref('新增设备')
const loading = ref<boolean>(false)
const devModelOptions: any = ref([])
const queryTheDictionary = () => {
queryByCode('Device_Type').then(async res => {
const id = res.data.id
await queryCsDictTree(id).then(res => {
devTypeOptions.value = res.data.map((item: any) => {
return {
value: item.id,
label: item.name,
...item
}
queryByCode('DEV_CLD').then(res => {
devTypeOptions2.value = res.data
return queryCsDictTree(res.data.id).then(res => {
devModelOptions2.value = res.data.map((item: any) => {
return {
value: item.id,
label: item.name,
...item
}
})
})
// let index = devTypeOptions.value.findIndex((item: any) => {
// return item.name == '网关'
// })
// devTypeOptions.value.splice(index, 1)
}).then(() => {
queryByCode('Device_Type').then(async res => {
const id = res.data.id
await queryCsDictTree(id).then(res => {
devTypeOptions.value = res.data.map((item: any) => {
return {
value: item.id,
label: item.name,
...item
}
})
// let index = devTypeOptions.value.findIndex((item: any) => {
// return item.name == '网关'
// })
// devTypeOptions.value.splice(index, 1)
})
await queryByid(id).then(res => {
res.data.map((item: any, index: any) => {
if (item.pid == id) {
res.data.splice(index, 1)
}
})
devModelOptions.value = res.data.map((item: any, index: any) => {
return {
value: item.id,
label: item.name,
...item
}
})
})
await tableStore.index()
})
}).catch(error => {
console.error('查询过程中出现错误:', error)
})
await queryByid(id).then(res => {
res.data.map((item: any, index: any) => {
if (item.pid == id) {
res.data.splice(index, 1)
}
})
devModelOptions.value = res.data.map((item: any, index: any) => {
return {
value: item.id,
label: item.name,
...item
}
})
})
await tableStore.index()
})
}
const devModelOptionsFilter = computed(() => {
return devModelOptions.value.filter((item: any) => {
@@ -287,15 +306,39 @@ const devModelOptionsFilter = computed(() => {
}
})
})
const formDevModelOptionsFilter = computed(() => {
return devModelOptions.value.filter((item: any) => {
if (form.devType) {
return item.pid == form.devType
} else {
return true
}
})
if(form.devAccessMethod === 'CLD'){
return devModelOptions2.value.filter((item: any) => {
if (form.devType) {
return item.pid == form.devType
} else {
return true
}
})
}else{
return devModelOptions.value.filter((item: any) => {
if (form.devType) {
return item.pid == form.devType
} else {
return true
}
})
}
})
const formDevTypeOptions = computed(() => {
// 如果协议是CLD，使用devTypeOptions2，否则使用devTypeOptions
if (form.devAccessMethod === 'CLD') {
// 对于devTypeOptions2，使用id和name字段
return [devTypeOptions2.value]
} else {
// 对于devTypeOptions，使用value和label字段
return devTypeOptions.value
}
})
const tableStore = new TableStore({
url: '/cs-device-boot/EquipmentDelivery/list',
method: 'POST',
@@ -314,21 +357,29 @@ const tableStore = new TableStore({
},
{ title: '设备名称', field: 'name', minWidth: 120 },
{ title: '网络设备ID', field: 'ndid', minWidth: 120 },
{
title: '设备类型',
field: 'devType',
formatter: row => {
return devTypeOptions.value.find((item: any) => item.value == row.cellValue).label
if (row.row.devAccessMethod === 'CLD') {
// 遍历devTypeOptions2查找匹配
return devTypeOptions2.value.name
}
// 如果是MQTT协议，使用devTypeOptions查找
else if (row.row.devAccessMethod === 'MQTT') {
const item = devTypeOptions.value.find((item: any) => item.value == row.cellValue);
return item ? item.label : '/';
}
},
minWidth: 120
},
{
title: '设备型号',
field: 'devModel',
formatter: row => {
return devModelOptions.value.find((item: any) => item.value == row.cellValue).label
const options = row.row.devAccessMethod === 'MQTT' ? devModelOptions.value : devModelOptions2.value
const item = options.find((item: any) => item.value == row.cellValue);
return item ? item.label : '/';
},
minWidth: 120
},
@@ -690,6 +741,7 @@ const tableStore = new TableStore({
: ''
}
})
console.log('🚀 ~ loadCallback ~ tableStore.table:', tableStore.table)
tableKey.value += 1
}
})

2
vite.config.ts
View File

@@ -17,7 +17,7 @@ export default defineConfig({
// target: 'http://192.168.1.122:10215', //gfh
// target: 'http://192.168.1.127:10215', //cdf
// target: 'http://192.168.1.125:10215',
target: 'http://192.168.1.126:10215',
target: 'http://192.168.1.103:10215',
// target: 'https://pqmcn.com:8092/api', //治理
// target:'http://www.zhilitest.com:8089/api',
changeOrigin: true,