|
|
@@ -54,7 +54,6 @@
|
|
|
<RightCircleTwoTone v-else />
|
|
|
</a-button>
|
|
|
</template>
|
|
|
-
|
|
|
<!-- 嵌套表格 -->
|
|
|
<template #expandedRowRender="{ record }">
|
|
|
<a-table
|
|
|
@@ -75,6 +74,21 @@
|
|
|
</template>
|
|
|
</a-table>
|
|
|
</template>
|
|
|
+ <template #bodyCell="{ column, record }">
|
|
|
+ <template v-if="column.key === 'netStatus'">
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ color: record.netStatus ? '#52c41a' : '#ddd',
|
|
|
+ fontWeight: '500',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ record.netStatus ? '在线' : '断开' }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ {{ record[column.dataIndex] }}
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
</a-table>
|
|
|
</div>
|
|
|
<div class="right-box" v-else-if="activeKey == 'history'">
|
|
|
@@ -99,7 +113,8 @@ import { RightCircleTwoTone, DownCircleTwoTone } from '@ant-design/icons-vue';
|
|
|
import { alignElement } from 'dom-align';
|
|
|
import { active } from 'sortablejs';
|
|
|
import { stubTrue } from 'lodash';
|
|
|
-
|
|
|
+import { useRoute } from 'vue-router';
|
|
|
+let route = useRoute();
|
|
|
const { hasPermission } = usePermission();
|
|
|
let activeKey = ref('device');
|
|
|
const treeData = ref<TreeProps['treeData']>([]);
|
|
|
@@ -211,10 +226,13 @@ const onSelect: TreeProps['onSelect'] = (keys, e) => {
|
|
|
getDeviceList(deviceType.value);
|
|
|
};
|
|
|
// 获取所有节点key的函数
|
|
|
-const getAllNodeKeys = (nodes) => {
|
|
|
+const getAllNodeKeys = (nodes, type) => {
|
|
|
const keys = [];
|
|
|
const traverse = (nodeList) => {
|
|
|
nodeList.forEach((node) => {
|
|
|
+ if (node.type === type) {
|
|
|
+ selectedKeys.value.push(node.key);
|
|
|
+ }
|
|
|
keys.push(node.key);
|
|
|
if (node.children && node.children.length > 0) {
|
|
|
traverse(node.children);
|
|
|
@@ -226,8 +244,9 @@ const getAllNodeKeys = (nodes) => {
|
|
|
};
|
|
|
|
|
|
// 获取树形菜单数据
|
|
|
-async function getDeviceType() {
|
|
|
+async function getDeviceType(type?) {
|
|
|
const result = await getDeviceTypeList({});
|
|
|
+
|
|
|
if (result.length > 0) {
|
|
|
const dataSource = [];
|
|
|
let key = '0';
|
|
|
@@ -247,21 +266,38 @@ async function getDeviceType() {
|
|
|
|
|
|
treeData.value = getData(result, dataSource, key);
|
|
|
// 数据就绪后设置展开key数组
|
|
|
- expandedKeys.value = getAllNodeKeys(treeData.value);
|
|
|
+ expandedKeys.value = getAllNodeKeys(treeData.value, type);
|
|
|
+ console.log(expandedKeys.value, '22222');
|
|
|
}
|
|
|
}
|
|
|
+// 获取当前选择节点
|
|
|
// 根据选择设备获取设备列表
|
|
|
-async function getDeviceList(deviceTypeVal?) {
|
|
|
- if (!deviceTypeVal) return;
|
|
|
+async function getDeviceList(deviceTypeVal?: any) {
|
|
|
+ // 1. 如果没有设备类型值，停止定时器并返回（不再重复请求）
|
|
|
+ if (!deviceTypeVal) {
|
|
|
+ if (timer) {
|
|
|
+ clearInterval(timer);
|
|
|
+ timer = undefined;
|
|
|
+ }
|
|
|
+ return;
|
|
|
+ }
|
|
|
if (timer) {
|
|
|
clearInterval(timer);
|
|
|
timer = undefined;
|
|
|
}
|
|
|
- const params: any = {
|
|
|
- devKind: deviceTypeVal,
|
|
|
+ const fetchDeviceData = async () => {
|
|
|
+ const params: any = {
|
|
|
+ devKind: deviceTypeVal,
|
|
|
+ };
|
|
|
+ try {
|
|
|
+ const result = await getDeviceListByType(params);
|
|
|
+ deviceList.value = result.records; // 更新设备列表
|
|
|
+ } catch (error) {
|
|
|
+ console.error('定时请求设备列表失败：', error);
|
|
|
+ }
|
|
|
};
|
|
|
- const result = await getDeviceListByType(params);
|
|
|
- deviceList.value = result.records;
|
|
|
+ await fetchDeviceData();
|
|
|
+ timer = setInterval(fetchDeviceData, 2000); // 2000ms = 2秒
|
|
|
}
|
|
|
|
|
|
// 外层表格列配置
|
|
|
@@ -289,10 +325,6 @@ const outerColumns = [
|
|
|
dataIndex: 'netStatus',
|
|
|
key: 'netStatus',
|
|
|
align: 'center',
|
|
|
- customRender: ({ text }) => {
|
|
|
- text = '在线';
|
|
|
- return `${text}`;
|
|
|
- },
|
|
|
},
|
|
|
];
|
|
|
|
|
|
@@ -370,7 +402,13 @@ async function refreshData(deviceId: string) {
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
- getDeviceType();
|
|
|
+ const path = route.query.deviceType;
|
|
|
+ if (path) {
|
|
|
+ getDeviceType(path);
|
|
|
+ getDeviceList(path);
|
|
|
+ } else {
|
|
|
+ getDeviceType();
|
|
|
+ }
|
|
|
});
|
|
|
onUnmounted(() => {
|
|
|
if (timer) {
|
|
|
@@ -458,6 +496,8 @@ watch(
|
|
|
box-sizing: border-box;
|
|
|
background: url('/@/assets/images/fire/bj1.png') no-repeat center;
|
|
|
background-size: 100% 100%;
|
|
|
+ border: 3px, solid, #0b69b6;
|
|
|
+ border-radius: 5px;
|
|
|
}
|
|
|
|
|
|
.right-box {
|
|
|
@@ -467,6 +507,8 @@ watch(
|
|
|
box-sizing: border-box;
|
|
|
background: url('/@/assets/images/fire/bj1.png') no-repeat center;
|
|
|
background-size: 100% 100%;
|
|
|
+ border: 3px, solid, #0b69b6;
|
|
|
+ border-radius: 5px;
|
|
|
|
|
|
.right-title {
|
|
|
display: flex;
|
|
|
@@ -557,8 +599,8 @@ watch(
|
|
|
}
|
|
|
|
|
|
.device-select-box {
|
|
|
- margin-top: 60px;
|
|
|
- width: 220px;
|
|
|
+ margin-top: 30px;
|
|
|
+ width: 300px;
|
|
|
height: calc(100% - 70px);
|
|
|
overflow-y: auto;
|
|
|
color: #fff;
|
|
|
@@ -606,6 +648,17 @@ watch(
|
|
|
pointer-events: auto;
|
|
|
padding: 20px 10px 30px 10px;
|
|
|
}
|
|
|
+/* 在线状态 - 绿色 */
|
|
|
+.status-online {
|
|
|
+ color: #36d399; /* 可替换为其他绿色，如 #00C48C */
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+/* 断开状态 - 灰色（可选调整为红色） */
|
|
|
+.status-offline {
|
|
|
+ color: #999;
|
|
|
+ /* 若想断开显示红色：color: #F5222D; */
|
|
|
+}
|
|
|
</style>
|
|
|
<style>
|
|
|
div[aria-hidden='true'] {
|
