yangjun
/
hldy_yunwei_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

摄像头、温湿度计、水表页面优化

This commit is contained in:
曹磊 2026-03-02 17:38:15 +08:00
parent 8f51ec9a69
commit 71a590f029
10 changed files with 181 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/views/iot/tplink/camera/camera.data.ts
View File

@ -4,6 +4,11 @@ import dayjs from 'dayjs';
//列表数据
export const columns: BasicColumn[] = [
{
title: '序号',
align: "center",
dataIndex: 'id'
},
{
title: '设备序号',
align: "center",
@ -19,6 +24,11 @@ export const columns: BasicColumn[] = [
align: "center",
dataIndex: 'deviceModel'
},
{
title: '设备维度',
align: "center",
dataIndex: 'dimension'
},
{
title: '设备类型',
align: "center",
@ -264,7 +274,7 @@ export const formSchema: FormSchema[] = [
}
},
{
label: 'FTP用户',
label: 'FTP账户',
field: 'ftpUsername',
component: 'Input',
show: ({model})=>{

2
src/views/iot/tplink/camera/components/CameraInfoForm.vue
View File

@ -75,7 +75,7 @@
</a-row>
<a-row v-if="formData.deviceType=='SURVEILLANCECAMERA'">
<a-col :span="24">
<a-form-item label="FTP用户">
<a-form-item label="FTP账户">
<a-input v-model:value="formData.ftpUsername"></a-input>
</a-form-item>
</a-col>

4
src/views/iot/tplink/camera/components/ConfigInfoForm.vue
View File

@ -12,7 +12,7 @@
</a-row>
<a-row>
<a-col :span="24">
<a-form-item label="用户">
<a-form-item label="账户">
<a-input v-model:value="formData.tumsUsername"></a-input>
</a-form-item>
</a-col>
@ -40,7 +40,7 @@
</a-row>
<a-row>
<a-col :span="24">
<a-form-item label="FTP用户">
<a-form-item label="FTP账户">
<a-input v-model:value="formData.ftpUsername"></a-input>
</a-form-item>
</a-col>

2
src/views/iot/tplink/network/components/ConfigInfoForm.vue
View File

@ -40,7 +40,7 @@
</a-row>
<a-row>
<a-col :span="24">
<a-form-item label="FTP用户">
<a-form-item label="FTP账户">
<a-input v-model:value="formData.ftpUsername"></a-input>
</a-form-item>
</a-col>

11
src/views/iot/tplink/network/network.data.ts
View File

@ -1,9 +1,13 @@
import {BasicColumn} from '/@/components/Table';
import {FormSchema} from '/@/components/Table';
import dayjs from 'dayjs';
//列表数据
export const columns: BasicColumn[] = [
{
title: '序号',
align: "center",
dataIndex: 'id'
},
{
title: '设备序号',
align: "center",
@ -19,6 +23,11 @@ export const columns: BasicColumn[] = [
align: "center",
dataIndex: 'deviceModel'
},
{
title: '设备维度',
align: "center",
dataIndex: 'dimension'
},
{
title: '设备类型',
align: "center",

11
src/views/iot/tq/water/index.vue
View File

@ -6,6 +6,7 @@
<template #tableTitle>
<a-button type="primary" preIcon="ant-design:sync-outlined" @click="handleSyncDevice"> 拉取设备</a-button>
<a-button type="primary" preIcon="ant-design:sync-outlined" @click="handleSyncCollector"> 更新在线状态</a-button>
<a-button type="primary" preIcon="ant-design:setting-outlined" @click="handleConfig"> 配置管理</a-button>
</template>
<template #bodyCell="{ column, record, index, text }">
<!-- <template v-if="column.dataIndex === 'address'">
@ -59,7 +60,7 @@
<HldyUtilsModal ref="hldyUtilsModal" @success="handleHldyParams" ></HldyUtilsModal>
<ApiLogModal ref="apiLogModal"></ApiLogModal>
<SyncLogListModal ref="syncLogModal"></SyncLogListModal>
<ConfigModal ref="configModal"></ConfigModal>
<a-modal v-model:visible="tipVisible" width="300px">
<template #title>
<Icon icon="ant-design:info-circle-outlined" :size="20" style="margin-right:10px;color:white;background:#1ea0fa;border-radius:10px;"/>{{tipTitle}}
@ -92,6 +93,7 @@
const apiLogModal = ref();
const syncLogModal = ref();
const hldyUtilsModal = ref();
const configModal = ref();
const tipVisible = ref(false);
const tipTitle = ref('提示');
const tipContent = ref('');
@ -116,7 +118,7 @@
],
},
actionColumn: {
width: 290,
width: 200,
fixed:'right'
},
beforeFetch: (params) => {
@ -287,4 +289,9 @@
syncLogModal.value.init(record);
}
function handleConfig(){
configModal.value.disableSubmit = false;
configModal.value.edit();
}
</script>

121
src/views/iot/tq/water/water.data.ts
View File

@ -14,7 +14,12 @@ export const columns: BasicColumn[] = [
// dataIndex: 'nuName'
// },
{
title: '设备号',
title: '序号',
align: "center",
dataIndex: 'id'
},
{
title: '设备序号',
align: "center",
dataIndex: 'address'
},
@ -29,6 +34,11 @@ export const columns: BasicColumn[] = [
// align: "center",
// dataIndex: 'cid'
// },
{
title: '设备维度',
align: "center",
dataIndex: 'dimension'
},
{
title: '设备状态',
align: "center",
@ -37,6 +47,26 @@ export const columns: BasicColumn[] = [
return record.relayState?(record.relayState=='1'?'合闸':'拉闸'):'';
},
},
{
title: '在线状态',
align: "center",
dataIndex: 'online',
customRender:({record})=>{
return record.online?(record.online=='true'?'在线':'离线'):'';
},
},
{
title: '分配状态',
align: "center",
dataIndex: 'izAllocate',
customRender:({record})=>{
if(record.izAllocate=='Y'){
return "已分配";
}else{
return "未分配";
}
},
},
// {
// title: '电池状态',
// align: "center",
@ -45,32 +75,24 @@ export const columns: BasicColumn[] = [
// return record.batteryState?(record.batteryState=='0'?'正常':'低电'):'';
// },
// },
{
title: '在线状态',
align: "center",
dataIndex: 'online',
customRender:({record})=>{
return record.online?(record.online=='true'?'在线':'离线'):'';
},
},
{
title: '信号强度',
align: "center",
dataIndex: 'csq',
customRender:({record})=>{
if(record.csq){
if(record.csq < 10){
return '低';
}else if(record.csq > 20){
return '高';
}else{
return '中';
}
}else{
return '';
}
}
},
// {
// title: '信号强度',
// align: "center",
// dataIndex: 'csq',
// customRender:({record})=>{
// if(record.csq){
// if(record.csq < 10){
// return '低';
// }else if(record.csq > 20){
// return '高';
// }else{
// return '中';
// }
// }else{
// return '';
// }
// }
// },
{
title: '用水量m³',
align: "center",
@ -119,12 +141,12 @@ export const searchFormSchema: FormSchema[] = [
// },
// colProps: { span: 6 },
// },
{
label: '设备号',
field: 'address',
component: 'Input',
colProps: { span: 4 },
},
// {
// label: '设备号',
// field: 'address',
// component: 'Input',
// colProps: { span: 4 },
// },
{
label: '设备状态',
field: 'relayState',
@ -136,7 +158,7 @@ export const searchFormSchema: FormSchema[] = [
{ label: '拉闸', value: '0' },
],
},
colProps: { span: 4 },
// colProps: { span: 4 },
},
{
label: '在线状态',
@ -149,20 +171,33 @@ export const searchFormSchema: FormSchema[] = [
{ label: '离线', value: 'false' },
],
},
colProps: { span: 4 },
// colProps: { span: 4 },
},
// {
// label: '信号强度',
// field: 'csq',
// component: 'JDictSelectTag',
// componentProps: {
// placeholder: '请选择强度',
// options: [
// { label: '高', value: '1' },
// { label: '中', value: '2' },
// { label: '低', value: '3' },
// ],
// },
// colProps: { span: 4 },
// },
{
label: '信号强度',
field: 'csq',
label: '分配状态',
field: 'izAllocate',
component: 'JDictSelectTag',
componentProps: {
placeholder: '请选择强度',
placeholder: '请选择分配状态',
options: [
{ label: '高', value: '1' },
{ label: '中', value: '2' },
{ label: '低', value: '3' },
{label: '已分配', value: 'Y'},
{label: '未分配', value: 'N'},
],
},
colProps: { span: 4 },
},
//colProps: { span: 4 },
}
];

8
src/views/iot/yiweilian/humid/humid.api.ts
View File

@ -10,6 +10,8 @@ enum Api {
logList = '/iot/yiweilian/humidDevice/logList',
alarmList = '/iot/yiweilian/humidAlarm/list',
syncDevicesStatus = '/iot/yiweilian/humidDevice/syncDevicesStatus',
getConfig = '/iot/yiweilian/config/getConfig',
addConfig = '/iot/yiweilian/config/add',
editConfig = '/iot/yiweilian/config/edit',
@ -52,6 +54,12 @@ export const getDeviceParameters = (params?) => defHttp.get({ url: Api.getDevice
*/
export const updateDeviceRealTime = (params?) => defHttp.get({ url: Api.updateDeviceRealTime, params });
/**
* 在线状态同步
* @param params
*/
export const syncDevicesStatus = (params?) => defHttp.get({ url: Api.syncDevicesStatus, params });
/**
* 操作日志
* @param params

52
src/views/iot/yiweilian/humid/humid.data.ts
View File

@ -12,14 +12,18 @@ export const columns: BasicColumn[] = [
// title: '单元名称',
// align: "center",
// dataIndex: 'nuName'
// },
{
title: '设备号',
title: '序号',
align: "center",
dataIndex: 'id'
},
{
title: '设备序号',
align: "center",
dataIndex: 'sn'
},
{
title: '设备名称',
title: '设备标识',
align: "center",
dataIndex: 'deviceName'
},
@ -28,6 +32,11 @@ export const columns: BasicColumn[] = [
// align: "center",
// dataIndex: 'departName'
// },
{
title: '设备维度',
align: "center",
dataIndex: 'dimension'
},
{
title: '在线状态',
align: "center",
@ -36,6 +45,18 @@ export const columns: BasicColumn[] = [
return record.status?(record.status=='0'?'在线':'离线'):'';
},
},
{
title: '分配状态',
align: "center",
dataIndex: 'izAllocate',
customRender:({record})=>{
if(record.izAllocate=='Y'){
return "已分配";
}else{
return "未分配";
}
},
},
// {
// title: '启用状态',
// align: "center",
@ -111,7 +132,7 @@ export const searchFormSchema: FormSchema[] = [
label: '设备号',
field: 'sn',
component: 'Input',
colProps: { span: 4 },
// colProps: { span: 4 },
},
{
label: '在线状态',
@ -124,8 +145,21 @@ export const searchFormSchema: FormSchema[] = [
{ label: '离线', value: '1' },
],
},
colProps: { span: 4 },
// colProps: { span: 4 },
},
{
label: '分配状态',
field: 'izAllocate',
component: 'JDictSelectTag',
componentProps: {
placeholder: '请选择分配状态',
options: [
{label: '已分配', value: 'Y'},
{label: '未分配', value: 'N'},
],
},
//colProps: { span: 6 },
}
];
export const formSchema: FormSchema[] = [
@ -226,10 +260,10 @@ export const formSchema: FormSchema[] = [
required: true,
labelWidth: '160px',
rules: [{ required: true },
{
pattern: /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/,
message: '请输入有效的HH:mm格式时间（如08:30）',
trigger: 'blur'
{
pattern: /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/,
message: '请输入有效的HH:mm格式时间（如08:30）',
trigger: 'blur'
}
]
},

21
src/views/iot/yiweilian/humid/index.vue
View File

@ -1,10 +1,12 @@
<template>
<a-spin :spinning="confirmLoading">
<div>
<!--引用表格-->
<BasicTable @register="registerTable">
<!--插槽:table标题-->
<template #tableTitle>
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleInsert"> 添加设备</a-button>
<a-button type="primary" preIcon="ant-design:sync-outlined" @click="handleSyncStatus"> 更新在线状态</a-button>
<a-button type="primary" preIcon="ant-design:setting-outlined" @click="handleConfig"> 配置管理</a-button>
</template>
<template #bodyCell="{ column, record, index, text }">
@ -40,6 +42,7 @@
<!-- <HldyUtilsModal ref="hldyUtilsModal" @success="handleHldyParams" ></HldyUtilsModal>-->
<!-- <DeviceSyncLogListModal ref="syncLogModal"></DeviceSyncLogListModal>-->
</div>
</a-spin>
</template>
<script lang="ts" name="iot-nuIotRegionInfo" setup>
@ -48,7 +51,7 @@
import { useListPage } from '/@/hooks/system/useListPage';
import { useUserStore } from '/@/store/modules/user';
import {Modal} from "ant-design-vue";
import {list, delFlagDevice, updateDeviceRealTime} from './humid.api';
import {list, delFlagDevice, updateDeviceRealTime,syncDevicesStatus} from './humid.api';
import { columns, searchFormSchema } from './humid.data';
import {useModal} from "@/components/Modal";
import {useDrawer} from "@/components/Drawer";
@ -62,6 +65,7 @@
// const hldyUtilsModal = ref();
// const syncLogModal = ref();
const configModal = ref();
const confirmLoading = ref<boolean>(false);
//注册drawer
const [registerDrawer, { openDrawer }] = useDrawer();
const queryParam = reactive<any>({});
@ -86,7 +90,7 @@
],
},
actionColumn: {
width: 290,
width: 180,
fixed:'right'
},
beforeFetch: (params) => {
@ -115,7 +119,7 @@
ifShow: ()=>{ return record.delFlag == 0 }
},
{
label: '编辑',
label: '参数配置',
onClick: handleEdit.bind(null, record),
ifShow: ()=>{ return record.delFlag == 0 }
},
@ -219,6 +223,17 @@
// syncLogModal.value.init(record);
// }
/**
* 更新在线状态
*/
async function handleSyncStatus(){
confirmLoading.value = true;
await syncDevicesStatus({}).then((res) => {
confirmLoading.value = false;
reload();
});
}
function handleConfig(){
configModal.value.disableSubmit = false;
configModal.value.edit();