物联设备页面和接口优化

This commit is contained in:
曹磊 2026-03-16 16:08:56 +08:00
parent ba002eba94
commit decc293cdf
10 changed files with 57 additions and 36 deletions

BIN
src/assets/iot/ap.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 328 KiB

BIN
src/assets/iot/lxj.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 198 KiB

BIN
src/assets/iot/router.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 242 KiB

BIN
src/assets/iot/switch.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 247 KiB

View File

@ -8,7 +8,7 @@
<template #title> <template #title>
<a-row style="font-weight: normal;"> <a-row style="font-weight: normal;">
<a-col :span="18" style="font-size: 14px;"> <a-col :span="18" style="font-size: 14px;">
<div>SN<span style="font-weight: bold;">{{ item.sn }}</span></div> <div>SN<span style="font-weight: bold;">{{ item.mac }}</span></div>
<div style="font-size: 12px;">名称{{ item.deviceName }}</div> <div style="font-size: 12px;">名称{{ item.deviceName }}</div>
</a-col> </a-col>
<a-col :span="6" style="display: flex; justify-content: flex-end;"> <a-col :span="6" style="display: flex; justify-content: flex-end;">
@ -25,9 +25,19 @@
{{item.nuName?item.nuName:'未配置'}} {{item.nuName?item.nuName:'未配置'}}
</a-col> --> </a-col> -->
<a-col :span="24" style="text-align: center;font-size: 44px;font-weight: bold;margin-top:10px;"> <a-col :span="24" style="text-align: center;font-size: 44px;font-weight: bold;margin-top:10px;">
<img src="../../../../assets/iot/sxt.png" style="width:80px;" /> <img v-if="item.deviceType == 'NETWORKVIDEORECORDER'" src="../../../../assets/iot/lxj.png" style="width:80px;" />
<img v-if="item.deviceType == 'SURVEILLANCECAMERA'" src="../../../../assets/iot/sxt.png" style="width:80px;" />
<img v-if="item.deviceType == 'ROUTER'" src="../../../../assets/iot/router.png" style="width:80px;" />
<img v-if="item.deviceType == 'SWITCH'" src="../../../../assets/iot/switch.png" style="width:80px;" />
<img v-if="item.deviceType == 'AP'" src="../../../../assets/iot/ap.png" style="width:80px;" />
</a-col>
<a-col :span="12" style="margin-top: -1px;">
<a-tag v-if="item.deviceType == 'NETWORKVIDEORECORDER'" color="purple">录像机</a-tag>
<a-tag v-if="item.deviceType == 'SURVEILLANCECAMERA'" color="purple">摄像头</a-tag>
<a-tag v-if="item.deviceType == 'ROUTER'" color="purple">路由器</a-tag>
<a-tag v-if="item.deviceType == 'SWITCH'" color="purple">交换机</a-tag>
<a-tag v-if="item.deviceType == 'AP'" color="purple">无线AP</a-tag>
</a-col> </a-col>
<a-col :span="12" style="margin-top: -1px;"><a-tag color="purple">摄像头</a-tag></a-col>
<a-col :span="12" style="margin-top: -11px;text-align:right;"> <a-col :span="12" style="margin-top: -11px;text-align:right;">
<span v-if="item.maintainStatus == 0" style="font-weight:700;font-size:16px;">正常</span> <span v-if="item.maintainStatus == 0" style="font-weight:700;font-size:16px;">正常</span>
<span v-if="item.maintainStatus == 1" style="font-weight:700;font-size:16px;color:red;">维修中</span> <span v-if="item.maintainStatus == 1" style="font-weight:700;font-size:16px;color:red;">维修中</span>
@ -38,7 +48,7 @@
<a-divider style="margin: 10px 0 20px 0" /> <a-divider style="margin: 10px 0 20px 0" />
<p style="text-align:center;margin-bottom:5px !important"> <p style="text-align:center;margin-bottom:5px !important">
<span style="display:inline-block;cursor: pointer;" @click="handlePreview(item)"> <span style="display:inline-block;cursor: pointer;" @click="handlePreview(item)" v-if="item.deviceType == 'SURVEILLANCECAMERA'">
<span class="tbClass"><img src="../../../../assets/iot/a14.png" style="width:20px;" /></span><br /> <span class="tbClass"><img src="../../../../assets/iot/a14.png" style="width:20px;" /></span><br />
<span class="antTitle">预览</span> <span class="antTitle">预览</span>
</span> </span>
@ -400,8 +410,7 @@ function getWsdj(record) {
// //
async function handleRead(record) { async function handleRead(record) {
const params = { const params = {
'cid': record.cid, 'sn': record.sn,
'address': record.address,
}; };
await eleRead(params); await eleRead(params);
setTimeout(() => { setTimeout(() => {
@ -422,9 +431,8 @@ async function handleControlLz(record) {
return; return;
} }
const params = { const params = {
'cid': record.cid, 'sn' : record.sn,
'address': record.address, 'type': '10'
'type': '10',
}; };
await eleControl(params); await eleControl(params);
setTimeout(() => { setTimeout(() => {
@ -445,8 +453,7 @@ async function handleControlHz(record) {
return; return;
} }
const params = { const params = {
'cid': record.cid, 'sn' : record.sn,
'address': record.address,
'type': '11', 'type': '11',
}; };
await eleControl(params); await eleControl(params);
@ -458,8 +465,7 @@ async function handleControlHz(record) {
// //
async function handleReset(record) { async function handleReset(record) {
const params = { const params = {
'cid': record.cid, 'sn': record.sn,
'address': record.address,
}; };
await eleReset(params); await eleReset(params);
setTimeout(() => { setTimeout(() => {
@ -597,6 +603,7 @@ function showWsdjApiLog(record) {
* 摄像头预览 * 摄像头预览
*/ */
function handlePreview(record: Recordable) { function handlePreview(record: Recordable) {
record.streamType = 1;
previewModal.value.disableSubmit = true; previewModal.value.disableSubmit = true;
previewModal.value.edit(record); previewModal.value.edit(record);
} }

View File

@ -18,7 +18,7 @@ export const columns: BasicColumn[] = [
{ {
title: '设备标识', title: '设备标识',
align: "center", align: "center",
dataIndex: 'deviceIndex' dataIndex: 'sn'
}, },
{ {
title: '设备型号', title: '设备型号',

View File

@ -176,6 +176,7 @@ import CameraPreviewModal from '/@/views/iot/tplink/camera/components/CameraPrev
* 摄像头预览 * 摄像头预览
*/ */
function handlePreview(record: Recordable) { function handlePreview(record: Recordable) {
record.streamType = 1;
previewModal.value.disableSubmit = true; previewModal.value.disableSubmit = true;
previewModal.value.edit(record); previewModal.value.edit(record);
} }

View File

@ -1,5 +1,5 @@
<template> <template>
<a-spin :spinning="confirmLoading"> <!-- <a-spin :spinning="confirmLoading">-->
<a-row> <a-row>
<a-col :span="24"> <a-col :span="24">
<div id="video-container-preview" style="min-height: 400px;"></div> <div id="video-container-preview" style="min-height: 400px;"></div>
@ -156,7 +156,7 @@
</span> </span>
</a-col> --> </a-col> -->
</a-row> </a-row>
</a-spin> <!-- </a-spin>-->
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -211,7 +211,7 @@ const formData = reactive<Record<string, any>>({
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } }); const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } }); const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false); // const confirmLoading = ref<boolean>(false);
// //
const validatorRules = reactive({ const validatorRules = reactive({
@ -235,7 +235,7 @@ const disabled = computed(() => {
*/ */
async function edit(record) { async function edit(record) {
await nextTick(() => { await nextTick(() => {
confirmLoading.value = true; // confirmLoading.value = true;
resetFields(); resetFields();
const tmpData = {}; const tmpData = {};
Object.keys(formData).forEach((key) => { Object.keys(formData).forEach((key) => {
@ -246,8 +246,8 @@ async function edit(record) {
// //
Object.assign(formData, tmpData); Object.assign(formData, tmpData);
}); });
createPreview(); // createPreview();
getSwitch(); // getSwitch();
} }
/** /**
@ -259,7 +259,7 @@ async function createPreview() {
formData.backupUrl = res.backupUrl; formData.backupUrl = res.backupUrl;
formData.wsUrl = res.wsUrl; formData.wsUrl = res.wsUrl;
formData.wssUrl = res.wssUrl; formData.wssUrl = res.wssUrl;
confirmLoading.value = false; // confirmLoading.value = false;
}); });
if (player.value) { if (player.value) {
player.value.destroy().then(() => { player.value.destroy().then(() => {

View File

@ -137,6 +137,7 @@ const { resetFields, validate, validateInfos } = useForm(formData, validatorRule
*/ */
async function edit(record) { async function edit(record) {
console.log(record);
title.value = record.deviceName; title.value = record.deviceName;
showCamera.value = true; showCamera.value = true;
visible.value = true; visible.value = true;
@ -178,7 +179,8 @@ function submitCallback() {
function handleCancel() { function handleCancel() {
visible.value = false; visible.value = false;
nextTick(() => { nextTick(() => {
registerForm.value.destroy(); // registerForm.value.destroy();
destroy();
showCamera.value = false; showCamera.value = false;
}); });
} }
@ -212,6 +214,7 @@ function stopPhone() {
* 创建预览 * 创建预览
*/ */
async function createPreview() { async function createPreview() {
console.log("🌊 ~ createPreview ~ a:", formData)
await getPreviewUrl({ "deviceIndex": formData.deviceIndex, "streamType": formData.streamType }).then(res => { await getPreviewUrl({ "deviceIndex": formData.deviceIndex, "streamType": formData.streamType }).then(res => {
formData.url = res.url; formData.url = res.url;
formData.backupUrl = res.backupUrl; formData.backupUrl = res.backupUrl;
@ -224,7 +227,6 @@ async function createPreview() {
}); // }); //
player.value = null; player.value = null;
} }
console.log("🌊 ~ createPreview ~ a:", formData)
const TumsPlayer = window['tums-player'].default; const TumsPlayer = window['tums-player'].default;
player.value = new TumsPlayer('video-container-preview', { player.value = new TumsPlayer('video-container-preview', {
type: "rtsp", // rtsp type: "rtsp", // rtsp
@ -361,6 +363,17 @@ function recordingEnd() {
}); });
} }
/**
* 销毁
*/
function destroy() {
if (player) {
player.value.destroy().then(() => {
}); //
player.value = null;
}
}
defineExpose({ defineExpose({
edit, edit,
disableSubmit, disableSubmit,

View File

@ -8,7 +8,7 @@ export const columns: BasicColumn[] = [
{ {
title: 'SN', title: 'SN',
align: "center", align: "center",
dataIndex: 'address' dataIndex: 'cid'
}, },
// { // {
// title: '类型', // title: '类型',
@ -58,7 +58,7 @@ export const columns2: BasicColumn[] = [
{ {
title: 'SN', title: 'SN',
align: "center", align: "center",
dataIndex: 'address' dataIndex: 'cid'
}, },
{ {
title: '操作时间', title: '操作时间',