链路状态

ui/dasadmin/src/views/backend/linkMonitor/index.vue

@@ -46,12 +46,7 @@
                             <el-table-column prop="status" :label="LinkMonitorFieldsEnums['status']" align="center" width="80">
                                 <template #default="scope">
                                     <div class="status-container">
-                                        <span
-                                            :class="{
-                                                'status-dot-online': !scope.row.status,
-                                                'status-dot-offline': scope.row.status,
-                                            }"
-                                        ></span>
+                                        <span :class="scope.row.status == 0 ? 'status-dot-online' : 'status-dot-offline'"></span>
                                     </div>
                                 </template>
                             </el-table-column>
@@ -102,13 +97,13 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, nextTick } from 'vue'
+import { reactive, ref, nextTick, onUnmounted } from 'vue'
 import { ElContainer, ElAside, ElHeader, ElMain, ElTree, ElInput, ElMessage, ElButton, ElTable, TreeInstance } from 'element-plus'
 import { Search } from '@element-plus/icons-vue'
 import { LinkMonitorFieldsEnums, LinkMonitorTreeType, LinkMonitorTableType } from './type'
 import { getNodeListReq, getLinkListReq } from '/@/api/backend/linkMonitor/request'
 import { debounce, cloneDeep } from 'lodash'
-
+import { protocolList } from '/@/views/backend/node/utils'
 const LinkTreePropReplace = {
     label: 'nodeName',
     children: 'children',
@@ -184,7 +179,8 @@ const getlinkTreeList = () => {
 getlinkTreeList().then((res) => {
     curContextMenuTreeData.value = cloneDeep(res as LinkMonitorTreeType)
     linkTreeRef.value?.setCurrentKey(curContextMenuTreeData.value!.id!)
-    getlinkMonitorList(curContextMenuTreeData.value!.id!, linkMonitorInputValue.value)
+    createTimer()
+    // getlinkMonitorList(curContextMenuTreeData.value!.id!, linkMonitorInputValue.value)
 })
 
 const searchLinkTree = () => {
@@ -249,7 +245,8 @@ const linkTreeNodeCollapse = (node: any) => {
 }
 const linkTreeNodeClick = (target: LinkMonitorTreeType) => {
     curContextMenuTreeData.value = cloneDeep(target)
-    getlinkMonitorList(curContextMenuTreeData.value!.id!, linkMonitorInputValue.value)
+    createTimer()
+    // getlinkMonitorList(curContextMenuTreeData.value!.id!, linkMonitorInputValue.value)
 }
 const renderContent = (h: any, { node, data }: any) => {
     const label = node.label || ''
@@ -266,10 +263,12 @@ const renderContent = (h: any, { node, data }: any) => {
 const linkMonitorInputValue = ref('')
 const searchLinkMonitor = () => {
     if (linkMonitorInputValue.value === '') {
-        getlinkMonitorList(curContextMenuTreeData.value!.id!)
+        // getlinkMonitorList(curContextMenuTreeData.value!.id!)
+        createTimer()
         return
     }
-    getlinkMonitorList(curContextMenuTreeData.value!.id!, linkMonitorInputValue.value)
+    createTimer()
+    // getlinkMonitorList(curContextMenuTreeData.value!.id!, linkMonitorInputValue.value)
 }
 
 const linkMonitorTableData = ref<LinkMonitorTableType[]>([])
@@ -282,17 +281,23 @@ const paginationOptions = reactive({
     pageSizes: [20, 50, 100],
 })
 const getcurrentPage = () => {
-    getlinkMonitorList(curContextMenuTreeData.value!.id!, linkMonitorInputValue.value)
+    // getlinkMonitorList(curContextMenuTreeData.value!.id!, linkMonitorInputValue.value)
+    createTimer()
 }
-const protocolList = [
-    { label: 'IEC104主 *', value: 8 },
-    { label: 'IEC104从 *', value: 9 },
-    { label: 'MODBUSRTU主 *', value: 12 },
-    { label: 'MODBUSTCP主 *', value: 16 },
-]
+
+// const protocolList = [
+//     // *  代表需要配置的协议
+//     { label: 'IEC104从 *', value: 9 },
+//     { label: 'MODBUSTCP从 *', value: 17 },
+//     { label: 'MODBUS', value: 80 },
+//     { label: 'ADS', value: 81 },
+// ]
 const getlinkMonitorList = (nodeId: string, linkName?: string) => {
-    getLinkListReq({ nodeId, linkName, pageNum: paginationOptions.current, pageSize: paginationOptions.pageSize })
+    getLinkListReq({ nodeId, linkName, pageNum: paginationOptions.current, pageSize: paginationOptions.pageSize, withStatus: 1 })
         .then((res) => {
+            if (!res.rows.length) {
+                clearTimer()
+            }
             if (res.rows) {
                 linkMonitorTableData.value = res.rows.map((item) => {
                     return {
@@ -303,10 +308,12 @@ const getlinkMonitorList = (nodeId: string, linkName?: string) => {
                 paginationOptions.total = res.total
             } else {
                 ElMessage.error(res.msg ?? '查询失败')
+                clearTimer()
             }
         })
         .catch((err) => {
             ElMessage.error(err?.response?.data?.msg ?? '查询失败')
+            clearTimer()
         })
 }
 
@@ -323,6 +330,22 @@ const startLink = (val: LinkMonitorTableType) => {
 const stopLink = (val: LinkMonitorTableType) => {
     console.log('stopLink')
 }
+let timer: any = null
+const createTimer = () => {
+    getlinkMonitorList(curContextMenuTreeData.value!.id!, linkMonitorInputValue.value)
+    timer && clearInterval(timer)
+    timer = null
+    timer = setInterval(() => {
+        getlinkMonitorList(curContextMenuTreeData.value!.id!, linkMonitorInputValue.value)
+    }, 5000)
+}
+const clearTimer = () => {
+    timer && clearInterval(timer)
+    timer = null
+}
+onUnmounted(() => {
+    clearTimer()
+})
 </script>
 
 <style lang="scss" scoped>

ui/dasadmin/src/views/backend/linkMonitor/type.ts

@@ -35,6 +35,7 @@ export type GetLinkMonitorTableParam = {
     linkName?: string
     pageNum: number
     pageSize: number
+    withStatus?: number
 }
 
 export enum LinkMonitorFieldsEnums {