vertoryao/iot-gateway_fontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(iot): 优化设备和产品详情页面布局

Browse Source 
-调整设备和产品详情页面的布局结构
- 添加设备和产品预览图片
- 优化事件记录展示方式
- 增加设备编辑功能
- 重构事件记录查询接口
This commit is contained in:
Kven 2025-03-24 20:47:06 +08:00
parent eed0d9c99a
commit 7328db1a23
9 changed files with 214 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -55,6 +55,7 @@
"vue": "^3.2.40", "vue": "^3.2.40",
"vue-echarts": "^6.2.3", "vue-echarts": "^6.2.3",
"vue-i18n": "^9.2.2", "vue-i18n": "^9.2.2",
"vue-json-pretty": "^2.4.0",
"vue-quill-editor": "^3.0.6", "vue-quill-editor": "^3.0.6",
"vue-router": "^4.0.14", "vue-router": "^4.0.14",
"xlsx": "^0.18.5" "xlsx": "^0.18.5"

4
src/api/device.ts
View File

@ -11,11 +11,13 @@ export interface DeviceRecord {
pageable?: string; pageable?: string;
longitude?: number; longitude?: number;
latitude?: number; latitude?: number;
icon?: string; icon?: object;
hardwareVersion?: string; hardwareVersion?: string;
firmwareVersion?: string; firmwareVersion?: string;
productName?: string; productName?: string;
id?: number; id?: number;
warning?: string;
iconId?: number;
} }
export interface DeviceCreateRecord { export interface DeviceCreateRecord {

8
src/api/tsl.ts
View File

@ -52,12 +52,8 @@ export function queryEventList(data: eventRecord) {
} }
// 事件记录 // 事件记录
export function queryEventLog(data: eventRecord) { export function queryEventLog(clientId: number) {
return axios({ return axios.get(`/api/rest/tsl/event/${clientId}/log`)
url: '/api/rest/tsl/event/log',
method: 'get',
params: data,
});
} }
export function createServe(data: any) { export function createServe(data: any) {

147
src/views/iot/device/components/device-detail.vue
View File

@ -2,9 +2,11 @@
<div class="container"> <div class="container">
<Breadcrumb :items="['物联网管理', '设备管理', '设备详情']" /> <Breadcrumb :items="['物联网管理', '设备管理', '设备详情']" />
<a-card class="general-card" title=" "> <a-card class="general-card" title=" ">
<a-descriptions v-model="renderData" size="large"> <a-row :gutter="16">
<template #title <a-col :span="16">
><h3 style="margin-top: -15px" <a-descriptions v-model="renderData" size="large">
<template #title
><h3 style="margin-top: -15px"
><a-button ><a-button
class="nav-btn" class="nav-btn"
type="outline" type="outline"
@ -13,26 +15,31 @@
> >
<icon-undo /> <icon-undo />
</a-button> </a-button>
设备详情</h3 设备详情</h3
> >
</template> </template>
<a-descriptions-item label="设备名称">{{ <a-descriptions-item label="设备名称">{{
renderData.name renderData.name
}}</a-descriptions-item> }}</a-descriptions-item>
<a-descriptions-item label="硬件版本">{{ <a-descriptions-item label="硬件版本">{{
renderData.hardwareVersion renderData.hardwareVersion
}}</a-descriptions-item> }}</a-descriptions-item>
<a-descriptions-item label="固件版本">{{ <a-descriptions-item label="固件版本">{{
renderData.firmwareVersion renderData.firmwareVersion
}}</a-descriptions-item> }}</a-descriptions-item>
<a-descriptions-item label="所属产品">{{ <a-descriptions-item label="所属产品">{{
renderData.productName renderData.productName
}}</a-descriptions-item> }}</a-descriptions-item>
<!-- <a-descriptions-item label="备注">{{renderData.remark }}</a-descriptions-item>--> <!-- <a-descriptions-item label="备注">{{renderData.remark }}</a-descriptions-item>-->
<a-descriptions-item label="创建时间">{{ <a-descriptions-item label="创建时间">{{
dayjs(renderData.createTime).format('YYYY-MM-DD HH:mm:ss') dayjs(renderData.createTime).format('YYYY-MM-DD HH:mm:ss')
}}</a-descriptions-item> }}</a-descriptions-item>
</a-descriptions> </a-descriptions>
</a-col>
<a-col :span="4">
<a-image :src="previewUrl" width="100px" />
</a-col>
</a-row>
</a-card> </a-card>
<a-card class="general-card" style="margin-top: 10px"> <a-card class="general-card" style="margin-top: 10px">
<a-tabs <a-tabs
@ -89,14 +96,8 @@
<div>{{ dayjs(record.recordTime).format('YYYY-MM-DD HH:mm:ss') }}</div> <div>{{ dayjs(record.recordTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
</template> </template>
<template #content="{ record }"> <template #content="{ record }">
<div v-if="record.content"> <vue-json-pretty v-if="record.content" :data="record.content" :deep="0" />
<span v-for="(value, key, index) in record.content" :key="key"> <div v-else>/</div>
<template v-if="index === 0">
<strong>{{ key }}:</strong> {{ value }}
</template>
</span>
<span v-if="Object.keys(record.content).length > 1">. . . . . .</span>
</div>
</template> </template>
<template #operations="{ record }"> <template #operations="{ record }">
<a-button type="text" @click="openDetailModal(record)"> <a-button type="text" @click="openDetailModal(record)">
@ -108,8 +109,16 @@
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="5" tab="事件记录" title="事件记录"> <a-tab-pane key="5" tab="事件记录" title="事件记录">
<a-table :columns="deviceEventColumns" :data="deviceEventData" > <a-table :columns="deviceEventColumns" :data="deviceEventData" >
<template #recordTime="{ record }">
<div>{{ dayjs(record.recordData.recordTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
</template>
<template #content="{ record }">
<vue-json-pretty v-if="record.recordData.content" :data="record.recordData.content" :deep="0" >
</vue-json-pretty>
<div v-else>/</div>
</template>
<template #operations="{ record }"> <template #operations="{ record }">
<a-button type="text" @click="openDetailModal(record)"> <a-button type="text" @click="openEventDetailModal(record)">
<icon-list /> <icon-list />
详情 详情
</a-button> </a-button>
@ -150,11 +159,33 @@
<a-button @click="closeDetailModal">关闭</a-button> <a-button @click="closeDetailModal">关闭</a-button>
</template> </template>
<div v-if="selectedRecord"> <div v-if="selectedRecord">
<p><strong>上报时间:</strong> {{ dayjs(selectedRecord.recordTime).format('YYYY-MM-DD HH:mm:ss') }}</p> <p>
<div v-if="selectedRecord.content"> <strong>上报时间:</strong> {{ dayjs(selectedRecord.recordTime).format('YYYY-MM-DD HH:mm:ss') }}
<div v-for="(value, key) in selectedRecord.content" :key="key"> </p>
<strong>{{ key }}:</strong> {{ value }} <strong>内容:</strong>
</div> <div style="border: 1px solid #e5e5e5; border-radius: 4px; padding: 8px; margin-top: 8px;">
<vue-json-pretty :data="selectedRecord.content" :deep="1" />
</div>
</div>
</a-modal>
<!-- 事件记录详情模态框 -->
<a-modal
:visible="eventDetailVisible"
@cancel="closeEventDetailModal"
title="事件记录详情"
>
<template #footer>
<a-button @click="closeEventDetailModal">关闭</a-button>
</template>
<div v-if="selectedEventRecord">
<strong>事件名称:</strong> {{ selectedEventRecord.name }}
<p>
<strong>发生时间:</strong> {{ dayjs(selectedEventRecord.recordData.recordTime).format('YYYY-MM-DD HH:mm:ss') }}
</p>
<strong>内容:</strong>
<div style="border: 1px solid #e5e5e5; border-radius: 4px; padding: 8px; margin-top: 8px;">
<vue-json-pretty :data="selectedEventRecord.recordData.content" :deep="1" />
</div> </div>
</div> </div>
</a-modal> </a-modal>
@ -164,13 +195,15 @@
<script lang="ts" setup> <script lang="ts" setup>
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue'; import { onMounted, reactive, ref } from 'vue';
import { Message } from '@arco-design/web-vue'; import { Message } from '@arco-design/web-vue';
import { queryDeviceDetail, queryDeviceRecord, sendCommand } from '@/api/device'; import { queryDeviceDetail, queryDeviceRecord, sendCommand } from '@/api/device';
import { queryEventLog, queryServeDetail, queryServeList } from '@/api/tsl'; import { queryEventLog, queryServeDetail, queryServeList } from '@/api/tsl';
import useVisible from '@/hooks/visible'; import useVisible from '@/hooks/visible';
import VueJsonPretty from 'vue-json-pretty';
import dynamicForm from './dynamic-form.vue'; import dynamicForm from './dynamic-form.vue';
import DeviceMap from './device-map.vue'; import DeviceMap from './device-map.vue';
import 'vue-json-pretty/lib/styles.css';
const route = useRoute(); const route = useRoute();
const { visible, setVisible } = useVisible(); const { visible, setVisible } = useVisible();
@ -207,6 +240,7 @@
title: '内容', title: '内容',
dataIndex: 'content', dataIndex: 'content',
slotName: 'content', slotName: 'content',
ellipsis: true,
}, },
{ {
title: '操作', title: '操作',
@ -237,6 +271,16 @@
dataIndex: 'name', dataIndex: 'name',
slotName: 'name', slotName: 'name',
}, },
{
title: '发生时间',
dataIndex: 'recordData.recordTime',
slotName: 'recordTime',
},
{
title: '内容',
dataIndex: 'recordData.content',
slotName: 'content',
},
{ {
title: '操作', title: '操作',
dataIndex: 'operations', dataIndex: 'operations',
@ -244,10 +288,15 @@
}, },
];; ];;
const activeKey = ref('1'); const activeKey = ref('1');
const previewUrl = ref('');
const detailVisible = ref(false); const detailVisible = ref(false);
const selectedRecord = ref<any>(null); const selectedRecord = ref<any>(null);
// 事件记录详情模态框状态
const eventDetailVisible = ref(false);
const selectedEventRecord = ref<any>(null);
const openDetailModal = (record: any) => { const openDetailModal = (record: any) => {
selectedRecord.value = record; selectedRecord.value = record;
detailVisible.value = true; detailVisible.value = true;
@ -262,6 +311,9 @@
{ {
clientId: 0, clientId: 0,
productId: 0, productId: 0,
preview: {
url: '',
},
} }
); );
const deviceReportData = ref([]); const deviceReportData = ref([]);
@ -274,6 +326,7 @@
// 1. 先获取设备详情 // 1. 先获取设备详情
const detailRes = await queryDeviceDetail(Id); const detailRes = await queryDeviceDetail(Id);
renderData.value = detailRes.data; renderData.value = detailRes.data;
previewUrl.value = renderData.value.preview.url;
// 2. 根据设备详情中的 clientId 和 productId 调用其他接口 // 2. 根据设备详情中的 clientId 和 productId 调用其他接口
const [recordRes, serveRes, eventRes] = await Promise.all([ const [recordRes, serveRes, eventRes] = await Promise.all([
@ -287,11 +340,7 @@
size: 10, size: 10,
current: 1, current: 1,
}), }),
queryEventLog({ queryEventLog(renderData.value.clientId),
clientId: renderData.value.clientId,
size: 10,
current: 1,
}),
]); ]);
// 3. 更新其他数据 // 3. 更新其他数据
@ -355,6 +404,18 @@
} }
}; };
// 打开事件记录详情模态框
const openEventDetailModal = (record: any) => {
selectedEventRecord.value = record;
eventDetailVisible.value = true;
};
// 关闭事件记录详情模态框
const closeEventDetailModal = () => {
eventDetailVisible.value = false;
selectedEventRecord.value = null;
};
onMounted(() => { onMounted(() => {
fetchData(id); fetchData(id);
}); });

39
src/views/iot/device/components/device-edit.vue
View File

@ -61,6 +61,21 @@
> >
<a-input v-model="formData.name" placeholder="请输入设备名称" /> <a-input v-model="formData.name" placeholder="请输入设备名称" />
</a-form-item> </a-form-item>
<!-- 客户机序列号 -->
<a-form-item
field="clientId"
label="客户机ID"
:rules="[
{ max: 12, message: '客户机ID不能超过12位' }
]"
:validate-trigger="['change']"
>
<a-input
v-model="formData.clientId"
placeholder="请输入客户机ID"
:max-length="12"
/>
</a-form-item>
<!-- 硬件版本 --> <!-- 硬件版本 -->
<a-form-item <a-form-item
field="hardwareVersion" field="hardwareVersion"
@ -85,6 +100,29 @@
placeholder="请输入固件版本" placeholder="请输入固件版本"
/> />
</a-form-item> </a-form-item>
<!-- 纬度 -->
<a-form-item
field="latitude"
label="纬度"
:validate-trigger="['change']"
>
<a-input
v-model="formData.latitude"
placeholder="请输入纬度"
/>
</a-form-item>
<!-- 经度 -->
<a-form-item
field="longitude"
label="经度"
:validate-trigger="['change']"
>
<a-input
v-model="formData.longitude"
placeholder="请输入经度"
/>
</a-form-item>
<a-form-item field="remark" label="备注"> <a-form-item field="remark" label="备注">
<a-textarea v-model="formData.remark" placeholder="请输入描述" /> <a-textarea v-model="formData.remark" placeholder="请输入描述" />
</a-form-item> </a-form-item>
@ -157,7 +195,6 @@
import '@wangeditor/editor/dist/css/style.css'; import '@wangeditor/editor/dist/css/style.css';
import { import {
createDevice, createDevice,
queryDeviceByName,
queryDeviceDetail, queryProductByName, queryDeviceDetail, queryProductByName,
updateDevice updateDevice
} from '@/api/device'; } from '@/api/device';

2
src/views/iot/device/index.vue
View File

@ -47,7 +47,7 @@
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="10"> <a-col :span="10">
<a-form-item field="isOnline" label="在线"> <a-form-item field="online" label="在线">
<a-select <a-select
v-model="formModel.isOnline" v-model="formModel.isOnline"
style="width: 360px" style="width: 360px"

45
src/views/iot/deviceMap/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<a-layout> <a-layout>
<a-layout-sider style="width:300px;" :resize-directions="['right']"> <a-layout-sider style="width:300px;background-color: transparent;" :resize-directions="['right']">
<!-- 搜索框 --> <!-- 搜索框 -->
<a-card> <a-card>
<a-input-search <a-input-search
@ -35,8 +35,7 @@
:size="70" :size="70"
> >
<a-image <a-image
:src=device.previewUrl :src="getImageUrl(device.previewId)"
@error="handleImageError"
/> />
</a-avatar> </a-avatar>
<a-descriptions layout="inline-horizontal" :style="{ marginLeft: '10px'}"> <a-descriptions layout="inline-horizontal" :style="{ marginLeft: '10px'}">
@ -50,23 +49,6 @@
</a-card> </a-card>
</a-col> </a-col>
</a-row> </a-row>
<!-- <a-list>-->
<!-- <a-list-item v-for="device in deviceList" :key="device.id" @click="selectDevice(device)">-->
<!-- <a-list-item-meta-->
<!-- :title="device.name"-->
<!-- :description="device.name"-->
<!-- >-->
<!-- <template #avatar>-->
<!-- <a-avatar shape="square">-->
<!-- <img-->
<!-- alt="avatar"-->
<!-- src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"-->
<!-- />-->
<!-- </a-avatar>-->
<!-- </template>-->
<!-- </a-list-item-meta>-->
<!-- </a-list-item>-->
<!-- </a-list>-->
</a-layout-sider> </a-layout-sider>
<a-layout-content> <a-layout-content>
<div id="container"></div> <div id="container"></div>
@ -92,6 +74,15 @@
}; };
// 获取图片 URL 的函数
const getImageUrl = (previewId: string) => {
if (!previewId) {
return 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp';
}
return `/api/rest/attachment/${previewId}`;
};
// 防抖搜索函数 // 防抖搜索函数
const handleSearch = debounce(async (value: string) => { const handleSearch = debounce(async (value: string) => {
try { try {
@ -113,10 +104,10 @@
} }
}, 300); // 防抖时间设置为 300ms }, 300); // 防抖时间设置为 300ms
const handleImageError = (event: Event) => { // const handleImageError = (event: Event) => {
const img = event.target as HTMLImageElement; // const img = event.target as HTMLImageElement;
img.src = 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp'; // 替换为默认图片 // img.src = 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp'; // 替换为默认图片
}; // };
AMapLoader.load({ AMapLoader.load({
key: 'a4e80eed798a56451b226dcfca81b846', // 申请好的Web端开发者Key，首次调用 load 时必填 key: 'a4e80eed798a56451b226dcfca81b846', // 申请好的Web端开发者Key，首次调用 load 时必填
@ -136,9 +127,11 @@
const lngLat = [device.longitude, device.latitude]; const lngLat = [device.longitude, device.latitude];
const content = document.createElement('div'); const content = document.createElement('div');
content.className = 'custom-content-marker'; content.className = 'custom-content-marker';
content.innerHTML = ` const markerIcon = device.warning === '1'
<img src="https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png" alt="标记点" />`; ? `/api/rest/attachment/${device.icon?.url}` // 警告标记
: `/api/rest/attachment/${device.icon?.url}`; // 默认标记
content.innerHTML = `<img src="${markerIcon}" alt="标记点" />`;
// 创建标记点 // 创建标记点
const marker = new AMap.Marker({ const marker = new AMap.Marker({
position: lngLat, position: lngLat,

74
src/views/iot/product/components/product-detail.vue
View File

@ -2,39 +2,45 @@
<div class="container"> <div class="container">
<Breadcrumb :items="['物联网管理', '产品管理', '产品详情']" /> <Breadcrumb :items="['物联网管理', '产品管理', '产品详情']" />
<a-card class="general-card" title=" "> <a-card class="general-card" title=" ">
<a-descriptions v-model="renderData" size="large"> <a-row :gutter="10">
<template #title <a-col :span="16">
><h3 style="margin-top: -15px"> <a-descriptions v-model="renderData" size="large">
<a-button <template #title
class="nav-btn" ><h3 style="margin-top: -15px">
type="outline" <a-button
:shape="'circle'" class="nav-btn"
@click="() => $router.go(-1)" type="outline"
> :shape="'circle'"
<icon-undo /> @click="() => $router.go(-1)"
</a-button> >
产品详情</h3 <icon-undo />
> </a-button>
</template> 产品详情</h3>
<a-descriptions-item label="产品名称">{{ </template>
renderData.name <a-descriptions-item label="产品名称">{{
}}</a-descriptions-item> renderData.name
<a-descriptions-item label="产品类型">{{ }}</a-descriptions-item>
renderData.productType <a-descriptions-item label="产品类型">{{
}}</a-descriptions-item> renderData.productType
<a-descriptions-item label="产品型号">{{ }}</a-descriptions-item>
renderData.model <a-descriptions-item label="产品型号">{{
}}</a-descriptions-item> renderData.model
<a-descriptions-item label="通讯协议">{{ }}</a-descriptions-item>
renderData.link <a-descriptions-item label="通讯协议">{{
}}</a-descriptions-item> renderData.link
<a-descriptions-item label="备注">{{ }}</a-descriptions-item>
renderData.remark <a-descriptions-item label="备注">{{
}}</a-descriptions-item> renderData.remark
<a-descriptions-item label="创建时间">{{ }}</a-descriptions-item>
dayjs(renderData.createTime).format('YYYY-MM-DD HH:mm:ss') <a-descriptions-item label="创建时间">{{
}}</a-descriptions-item> dayjs(renderData.createTime).format('YYYY-MM-DD HH:mm:ss')
</a-descriptions> }}</a-descriptions-item>
</a-descriptions>
</a-col>
<a-col :span="4">
<a-image :src="previewUrl" width="100px" />
</a-col>
</a-row>
</a-card> </a-card>
<a-card class="general-card" style="margin-top: 10px"> <a-card class="general-card" style="margin-top: 10px">
<a-tabs <a-tabs
@ -88,9 +94,11 @@
]; ];
const activeKey = ref('1'); const activeKey = ref('1');
const renderData = ref([]); const renderData = ref([]);
const previewUrl = ref('');
const fetchData = async (Id: number) => { const fetchData = async (Id: number) => {
const res = await queryProductDetail(Id); const res = await queryProductDetail(Id);
renderData.value = res.data; renderData.value = res.data;
previewUrl.value = res.data.preview.url;
}; };
const handleMenuClick = (e: any) => { const handleMenuClick = (e: any) => {
activeKey.value = e; activeKey.value = e;

8
src/views/iot/product/components/product-edit.vue
View File

@ -84,6 +84,7 @@
<a-upload <a-upload
show-file-list show-file-list
:file-list="previewList" :file-list="previewList"
image-preview
:limit="1" :limit="1"
list-type="picture-card" list-type="picture-card"
:custom-request="(option: any) => customRequest(option, 'preview')" :custom-request="(option: any) => customRequest(option, 'preview')"
@ -96,6 +97,7 @@
> >
<a-upload <a-upload
show-file-list show-file-list
list-type="picture"
:file-list="iconList" :file-list="iconList"
:limit="1" :limit="1"
:custom-request="(option: any) => customRequest(option, 'icon')" :custom-request="(option: any) => customRequest(option, 'icon')"
@ -275,11 +277,11 @@
onSuccess(res.data); onSuccess(res.data);
if (type === 'preview') { if (type === 'preview') {
formData.value.preview = formData.value.preview || []; formData.value.preview = formData.value.preview || [];
formData.value.preview.push(res.data); formData.value.preview = res.data;
formData.value.previewId = res.data.id; formData.value.previewId = res.data.id;
} else if (type === 'icon') { } else if (type === 'icon') {
formData.value.icon = formData.value.icon || []; formData.value.icon = formData.value.icon || [];
formData.value.icon.push(res.data); formData.value.icon = res.data;
formData.value.iconId = res.data.id; formData.value.iconId = res.data.id;
} }
} else { } else {
@ -295,7 +297,7 @@
} }
// 调用删除接口 // 调用删除接口
const res = await deleteAttachment(fileId); const res = await deleteAttachment(fileId);
if (res.status === 200) { if (res.data === true) {
// 删除成功后 // 删除成功后
Message.success('删除成功'); Message.success('删除成功');
} else { } else {