云设备录入

package.json

@@ -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",

src/App.vue

@@ -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 () => {

src/api/cs-device-boot/cloudDeviceEntry.ts

@@ -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
+    })
+}
+

src/api/cs-device-boot/csLedger.ts

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

src/api/cs-device-boot/edData.ts

@@ -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',

src/components/form/mac/MacAddressInput.vue

@@ -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>

src/components/tree/cloudDevice.vue

@@ -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>

src/components/tree/device.vue

@@ -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(() => {

src/components/tree/govern/cloudDeviceEntryTree.vue

@@ -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>

src/components/tree/govern/deviceTree.vue

@@ -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
         }

src/components/tree/govern/pointTree.vue

@@ -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
             }
         })
     })

src/components/tree/index.vue

@@ -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) {

src/components/tree/point.vue

@@ -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(() => {
-    //     // setTimeout(() => {
+        if (zlDeviceData.value.length != 0) {
-    //     // }, 500)
+            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>

src/utils/router.ts

@@ -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!',

src/views/govern/alarm/Front.vue

@@ -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>

src/views/govern/alarm/index.vue

@@ -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">
+            <el-tab-pane label="前置告警" name="2">
-                <Steady v-if="activeName == '2'" :deviceTree="deviceTree" :key="key" />
+                <Front v-if="activeName == '2'" :deviceTree="deviceTree" :key="key" />
             </el-tab-pane>
-            <el-tab-pane label="暂态事件" name="3">
+            <el-tab-pane label="稳态越限告警" name="3">
-                <Transient v-if="activeName == '3'" :deviceTree="deviceTree" :key="key" />
+                <Steady v-if="activeName == '3'" :deviceTree="deviceTree" :key="key" />
             </el-tab-pane>
-            <el-tab-pane label="异常事件" name="4">
+            <el-tab-pane label="暂态事件" name="4">
-                <Abnormal v-if="activeName == '4'" :deviceTree="deviceTree" :key="key" />
+                <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'

src/views/govern/device/control/index.vue

@@ -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)
         }

src/views/govern/device/control/tabs/components/harmonicSpectrum.vue

@@ -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;
 

src/views/govern/manage/factory.vue

@@ -141,10 +141,10 @@
                 <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"
+                            :label="item.label || item.name"
-                            :value="item.value"
+                            :value="item.value || item.id"
                         ></el-option>
                     </el-select>
                 </el-form-item>
@@ -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,6 +248,18 @@ const dialogTitle = ref('新增设备')
 const loading = ref<boolean>(false)
 const devModelOptions: any = ref([])
 const queryTheDictionary = () => {
+        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
+                        }
+                    })
+            })
+        }).then(() => {
              queryByCode('Device_Type').then(async res => {
                 const id = res.data.id
                 await queryCsDictTree(id).then(res => {
@@ -256,6 +270,7 @@ const queryTheDictionary = () => {
                             ...item
                         }
                     })
+                    
                     // let index = devTypeOptions.value.findIndex((item: any) => {
                     //     return item.name == '网关'
                     // })
@@ -277,6 +292,10 @@ const queryTheDictionary = () => {
                 })
                 await tableStore.index()
             })
+        }).catch(error => {
+            console.error('查询过程中出现错误:', error)
+        })
+   
 }
 const devModelOptionsFilter = computed(() => {
     return devModelOptions.value.filter((item: any) => {
@@ -287,7 +306,17 @@ const devModelOptionsFilter = computed(() => {
         }
     })
 })
+
 const formDevModelOptionsFilter = computed(() => {
+    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
@@ -295,7 +324,21 @@ const formDevModelOptionsFilter = computed(() => {
                     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
     }
 })

vite.config.ts

@@ -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,