物联设备管理

This commit is contained in:
曹磊 2026-03-12 09:45:12 +08:00
parent 4ea50fcab3
commit adc9ffd7e8
19 changed files with 1303 additions and 39 deletions

View File

@ -13,11 +13,11 @@ export const columns: BasicColumn[] = [
// align: "center",
// dataIndex: 'nuName'
// },
{
title: '序号',
align: "center",
dataIndex: 'id'
},
// {
// title: '序号',
// align: "center",
// dataIndex: 'id'
// },
{
title: '设备序号',
align: "center",

View File

@ -68,7 +68,7 @@
api: list,
columns,
canResize:false,
// showIndexColumn: true,
showIndexColumn: true,
formConfig: {
//labelWidth: 120,
schemas: searchFormSchema,

View File

@ -4,11 +4,11 @@ import dayjs from 'dayjs';
//列表数据
export const columns: BasicColumn[] = [
{
title: '序号',
align: "center",
dataIndex: 'id'
},
// {
// title: '序号',
// align: "center",
// dataIndex: 'id'
// },
{
title: '设备序号',
align: "center",

View File

@ -81,14 +81,12 @@ import { columns, searchFormSchema } from './camera.data';
import {getImageCommon, getDeviceDetails, list, syncAllDevices,syncDevicesStatus} from './camera.api';
import { useUserStore } from '/@/store/modules/user';
// import { useDrawer } from "@/components/Drawer";
import { useRouter } from 'vue-router';
import CameraPreviewModal from './components/CameraPreviewModal.vue'
import DrawerModal from './components/DrawerModal.vue'
import CameraPictureConfigModal from './components/CameraPictureConfigModal.vue';
//drawer
// const [registerDrawer, { openDrawer }] = useDrawer();
let router = useRouter();
const formRef = ref();
const queryParam = reactive<any>({});
const registerModal = ref();
@ -105,6 +103,7 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
api: list,
columns,
canResize: false,
showIndexColumn: true,
formConfig: {
// labelWidth: 200,
schemas: searchFormSchema,

View File

@ -111,7 +111,7 @@
api: list,
columns,
canResize:false,
// showIndexColumn: true,
showIndexColumn: true,
formConfig: {
//labelWidth: 120,
schemas: searchFormSchema,

View File

@ -13,11 +13,11 @@ export const columns: BasicColumn[] = [
// align: "center",
// dataIndex: 'nuName'
// },
{
title: '序号',
align: "center",
dataIndex: 'id'
},
// {
// title: '序号',
// align: "center",
// dataIndex: 'id'
// },
{
title: '设备序号',
align: "center",

View File

@ -12,11 +12,11 @@ export const columns: BasicColumn[] = [
// title: '单元名称',
// align: "center",
// dataIndex: 'nuName'
{
title: '序号',
align: "center",
dataIndex: 'id'
},
// {
// title: '序号',
// align: "center",
// dataIndex: 'id'
// },
{
title: '设备序号',
align: "center",

View File

@ -78,7 +78,7 @@
api: list,
columns,
canResize:false,
// showIndexColumn: true,
showIndexColumn: true,
formConfig: {
//labelWidth: 120,
schemas: searchFormSchema,

View File

@ -0,0 +1,202 @@
<template>
<div class="p-2">
<!--查询区域-->
<div class="jeecg-basic-table-form-container">
<a-form ref="formRef" :model="queryParam" :label-col="labelCol"
:wrapper-col="wrapperCol">
<a-row :gutter="24">
<a-col :lg="6">
<a-form-item name="nuName">
<template #label><span title="区域名称">名称</span></template>
<a-input v-model:value="queryParam.nuName" placeholder="请输入区域名称" allow-clear />
</a-form-item>
</a-col>
<a-col :lg="6">
<a-form-item name="areaFlag">
<template #label><span title="机构名称">属性</span></template>
<j-dict-select-tag type='list' v-model:value="queryParam.areaFlag" dictCode="nu_type"
placeholder="请选择区域属性" allow-clear />
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
<a-col :lg="6">
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
style="margin-left: 8px">重置</a-button>
</a-col>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!--引用表格-->
<BasicTable @register="registerTable">
<!--插槽:table标题-->
<template #tableTitle>
<a-button type="primary" preIcon="ant-design:unlock-outlined" @click="handleOrgUnbind"> 机构解绑</a-button>
</template>
<!--操作栏-->
<template #action="{ record }">
<TableAction :actions="getTableAction(record)"/>
</template>
<template v-slot:bodyCell="{ column, record, index, text }">
</template>
</BasicTable>
<!-- 表单区域 -->
<DeviceModal ref="registerDrawer" @success="handleSuccess" />
</div>
</template>
<script lang="ts" name="iotManager-areaList" setup>
import {ref, reactive, defineExpose, nextTick, createVNode} from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { nuColumns } from '../manager.data';
import { areaList,unbindOrg } from '../manager.api';
import { useUserStore } from '/@/store/modules/user';
import DeviceModal from './DeviceModal.vue';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import {Modal} from "ant-design-vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
const formRef = ref();
const queryParam = reactive<any>({});
const registerDrawer = ref();
const orgCode = ref<any>('');
const departId = ref<any>('');
const userStore = useUserStore();
//table
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
title: '区域设备管理',
api: areaList,
columns: nuColumns,
canResize: false,
useSearchForm: false,
showIndexColumn: true,
actionColumn: {
width: 180,
fixed: 'right',
},
beforeFetch: async (params) => {
return Object.assign(params, queryParam);
},
},
});
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
const labelCol = reactive({
xs:24,
sm:4,
xl:6,
xxl:4
});
const wrapperCol = reactive({
xs: 24,
sm: 20,
});
function handleOrgUnbind(){
let param = {"orgCode":orgCode.value};
Modal.confirm({
title: '机构解绑',
width: '500px',
icon: createVNode(ExclamationCircleOutlined),
content: createVNode('div', { style: 'color:red;' }, '解除当前机构已绑定的所有设备,确定要解绑该机构吗?'),
okText: '确定',
onOk() {
unbindOrg(param).then((res) => {}).catch(() =>{}).finally(() => {});
},
onCancel() {
},
class: 'test',
});
}
/**
* 成功回调
*/
function handleSuccess() {
reload();
}
/**
* 操作栏
*/
function getTableAction(record) {
return [
{
label: '设备管理',
onClick: deviceManager.bind(null, record),
},
];
}
/**
* 设备管理
*/
function deviceManager(record: Recordable){
registerDrawer.value.disableSubmit = true;
registerDrawer.value.edit(record);
}
/**
* 查询
*/
function searchQuery() {
queryParam.sysOrgCode = orgCode.value;
reload();
}
/**
* 重置
*/
function searchReset() {
formRef.value.resetFields();
//
searchQuery();
}
//
function init(record) {
orgCode.value = record.orgCode;
searchQuery();
}
defineExpose({
init
});
</script>
<style lang="less" scoped>
.jeecg-basic-table-form-container {
padding: 0;
.table-page-search-submitButtons {
display: block;
margin-bottom: 24px;
white-space: nowrap;
}
.query-group-cust{
min-width: 100px !important;
}
.query-group-split-cust{
width: 30px;
display: inline-block;
text-align: center
}
.ant-form-item:not(.ant-form-item-with-help){
margin-bottom: 16px;
height: 32px;
}
:deep(.ant-picker),:deep(.ant-input-number){
width: 100%;
}
}
.p-2{
height: calc(100vh - 120px);
}
</style>

View File

@ -0,0 +1,82 @@
<template>
<a-drawer :title="title" :width="width" :visible="visible" :closable="true" :footer-style="{ textAlign: 'right' }"
:bodyStyle="{ padding: '14px' }" @close="handleCancel">
<template #footer>
<a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
<a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button>
</template>
<AreaList v-if="visible" ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit"
:formBpm="false">
</AreaList>
</a-drawer>
</template>
<script lang="ts" setup>
import { ref, nextTick, defineExpose } from 'vue';
import AreaList from './AreaList.vue'
const title = ref<string>('');
const width = ref<number>(1200);
const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false);
const registerForm = ref();
const emit = defineEmits(['register', 'success']);
/**
* 新增
*/
function add() {
title.value = '新增';
visible.value = true;
nextTick(() => {
registerForm.value.add();
});
}
/**
* 编辑
* @param record
*/
function edit(record) {
title.value = disableSubmit.value ? '区域信息' : '编辑';
visible.value = true;
nextTick(() => {
registerForm.value.init(record);
});
}
/**
* 确定按钮点击事件
*/
function handleOk() {
registerForm.value.submitForm();
}
/**
* form保存回调事件
*/
function submitCallback() {
handleCancel();
emit('success');
}
/**
* 取消按钮回调事件
*/
function handleCancel() {
visible.value = false;
}
defineExpose({
add,
edit,
disableSubmit,
});
</script>
<style lang="less">
/**隐藏样式-modal确定按钮 */
.jee-hidden {
display: none !important;
}
</style>
<style lang="less" scoped></style>

View File

@ -0,0 +1,234 @@
<template>
<a-spin :spinning="confirmLoading">
<div class="p-2">
<!--查询区域-->
<div class="jeecg-basic-table-form-container">
<a-form ref="formRef" :model="queryParam" :label-col="labelCol"
:wrapper-col="wrapperCol">
<a-row :gutter="24">
<a-col :lg="6">
<a-form-item name="dimension">
<template #label><span title="设备维度">维度</span></template>
<a-select v-model:value="queryParam.dimension" placeholder="请选择设备维度" allow-clear>
<a-select-option value="区域维度">区域维度</a-select-option>
<a-select-option value="机构维度">机构维度</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6">
<a-form-item name="deviceType">
<template #label><span title="设备类型">类型</span></template>
<a-select v-model:value="queryParam.deviceType" placeholder="请选择设备类型" allow-clear>
<a-select-option value="摄像头">摄像头</a-select-option>
<a-select-option value="录像机">录像机</a-select-option>
<a-select-option value="交换机">交换机</a-select-option>
<a-select-option value="路由器">路由器</a-select-option>
<a-select-option value="无线AP">无线AP</a-select-option>
<a-select-option value="智能电表">智能电表</a-select-option>
<a-select-option value="智能水表">智能水表</a-select-option>
<a-select-option value="温湿度计">温湿度计</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6">
<a-form-item name="izAllocate">
<template #label><span title="分配状态">状态</span></template>
<a-select v-model:value="queryParam.izAllocate" placeholder="请选择在线状态" allow-clear>
<a-select-option value="未分配">未分配</a-select-option>
<a-select-option value="释放">释放</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6">
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
<a-col :lg="6">
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
style="margin-left: 8px">重置</a-button>
</a-col>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!--引用表格-->
<BasicTable @register="registerTable" :rowSelection="rowSelection">
<!--插槽:table标题-->
<template #tableTitle>
<a-button v-if="selectedRowKeys.length > 0" type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 绑定设备</a-button>
</template>
<!--操作栏-->
<template #action="{ record }">
<TableAction :actions="getTableAction(record)"/>
</template>
<template v-slot:bodyCell="{ column, record, index, text }">
</template>
</BasicTable>
<a-modal
ref="modalRef"
v-model:visible="visible"
:wrap-style="{ overflow: 'hidden', background:'transparent'}"
:bodyStyle="{ padding:'12px' }"
@ok="handleOk"
>
<a-textarea v-model:value="remarks" placeholder="请输入备注" :rows="4" />
<template #title>
<div ref="modalTitleRef" style="width: 100%; cursor: move">备注</div>
</template>
</a-modal>
</div>
</a-spin>
</template>
<script lang="ts" name="iotManager-deviceAddList" setup>
import {ref, reactive, defineExpose, nextTick} from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { deviceAddColumns } from '../manager.data';
import { canAddList,addBatch } from '../manager.api';
import { useUserStore } from '/@/store/modules/user';
const formRef = ref();
const confirmLoading = ref<boolean>(false);
const queryParam = reactive<any>({});
const departId = ref<any>('');
const nuId = ref<any>('');
const orgCode = ref<any>('');
const remarks = ref<any>('');
const visible = ref<any>();
const userStore = useUserStore();
//table
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
title: '添加设备',
api: canAddList,
columns: deviceAddColumns,
canResize: false,
useSearchForm: false,
showIndexColumn: true,
showActionColumn: false,
actionColumn: {
width: 180,
fixed: 'right',
},
beforeFetch: async (params) => {
return Object.assign(params, queryParam);
},
},
});
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;
const labelCol = reactive({
xs:24,
sm:4,
xl:6,
xxl:4
});
const wrapperCol = reactive({
xs: 24,
sm: 20,
});
/**
* 成功回调
*/
function handleSuccess() {
reload();
}
/**
* 操作栏
*/
function getTableAction(record) {
return [
{
},
];
}
/**
* 查询
*/
function searchQuery() {
queryParam.departId = departId.value;
reload();
}
/**
* 重置
*/
function searchReset() {
formRef.value.resetFields();
selectedRowKeys.value = [];
//
searchQuery();
}
function handleCreate(){
visible.value = true;
}
function handleOk(){
confirmLoading.value = true;
let record = {
"deviceList": selectedRows.value,
"remarks": remarks.value,
"nuId": nuId.value,
"departId": departId.value,
"orgCode": orgCode.value,
}
addBatch(record)
.then((res) => {
searchQuery();
}).catch(() =>{})
.finally(() => {
confirmLoading.value = false;
visible.value = false;
});
}
//
function init(record) {
departId.value = record.departId;
nuId.value = record.nuId;
orgCode.value = record.orgCode;
searchQuery();
}
defineExpose({
init
});
</script>
<style lang="less" scoped>
.jeecg-basic-table-form-container {
padding: 0;
.table-page-search-submitButtons {
display: block;
margin-bottom: 24px;
white-space: nowrap;
}
.query-group-cust{
min-width: 100px !important;
}
.query-group-split-cust{
width: 30px;
display: inline-block;
text-align: center
}
.ant-form-item:not(.ant-form-item-with-help){
margin-bottom: 16px;
height: 32px;
}
:deep(.ant-picker),:deep(.ant-input-number){
width: 100%;
}
}
.p-2{
height: calc(100vh - 120px);
}
</style>

View File

@ -0,0 +1,83 @@
<template>
<a-drawer :title="title" :width="width" :visible="visible" :closable="true" :footer-style="{ textAlign: 'right' }"
:bodyStyle="{ padding: '14px' }" @close="handleCancel">
<template #footer>
<a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
<a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button>
</template>
<DeviceAddList v-if="visible" ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit"
:formBpm="false">
</DeviceAddList>
</a-drawer>
</template>
<script lang="ts" setup>
import { ref, nextTick, defineExpose } from 'vue';
import DeviceAddList from './DeviceAddList.vue'
const title = ref<string>('');
const width = ref<number>(1500);
const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false);
const registerForm = ref();
const emit = defineEmits(['register', 'success']);
/**
* 新增
*/
function add() {
title.value = '新增';
visible.value = true;
nextTick(() => {
registerForm.value.add();
});
}
/**
* 编辑
* @param record
*/
function edit(record) {
title.value = disableSubmit.value ? '添加设备' : '编辑';
visible.value = true;
nextTick(() => {
registerForm.value.init(record);
});
}
/**
* 确定按钮点击事件
*/
function handleOk() {
registerForm.value.submitForm();
}
/**
* form保存回调事件
*/
function submitCallback() {
handleCancel();
emit('success');
}
/**
* 取消按钮回调事件
*/
function handleCancel() {
visible.value = false;
emit('success');
}
defineExpose({
add,
edit,
disableSubmit,
});
</script>
<style lang="less">
/**隐藏样式-modal确定按钮 */
.jee-hidden {
display: none !important;
}
</style>
<style lang="less" scoped></style>

View File

@ -0,0 +1,223 @@
<template>
<div class="p-2">
<!--查询区域-->
<div class="jeecg-basic-table-form-container">
<a-form ref="formRef" :model="queryParam" :label-col="labelCol"
:wrapper-col="wrapperCol">
<a-row :gutter="24">
<a-col :lg="5">
<a-form-item name="nuName">
<template #label><span title="区域名称">区域名称</span></template>
<a-input v-model:value="queryParam.nuName" placeholder="请输入区域名称" allow-clear/>
</a-form-item>
</a-col>
<a-col :lg="5">
<a-form-item name="dimension">
<template #label><span title="设备维度">设备维度</span></template>
<a-select v-model:value="queryParam.dimension" placeholder="请选择设备维度" allow-clear>
<a-select-option value="区域维度">区域维度</a-select-option>
<a-select-option value="机构维度">机构维度</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="5">
<a-form-item name="deviceType">
<template #label><span title="设备类型">设备类型</span></template>
<a-select v-model:value="queryParam.deviceType" placeholder="请选择设备类型" allow-clear>
<a-select-option value="摄像头">摄像头</a-select-option>
<a-select-option value="录像机">录像机</a-select-option>
<a-select-option value="交换机">交换机</a-select-option>
<a-select-option value="路由器">路由器</a-select-option>
<a-select-option value="无线AP">无线AP</a-select-option>
<a-select-option value="智能电表">智能电表</a-select-option>
<a-select-option value="智能水表">智能水表</a-select-option>
<a-select-option value="温湿度计">温湿度计</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="5">
<a-form-item name="deviceStatus">
<template #label><span title="在线状态">在线状态</span></template>
<a-select v-model:value="queryParam.deviceStatus" placeholder="请选择在线状态" allow-clear>
<a-select-option value="在线">在线</a-select-option>
<a-select-option value="离线">离线</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="4">
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
<a-col :lg="6">
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
style="margin-left: 8px">重置</a-button>
</a-col>
</span>
</a-col>
</a-row>
</a-form>
</div>
<!--引用表格-->
<BasicTable @register="registerTable">
<!--插槽:table标题-->
<template #tableTitle>
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd"> 添加设备</a-button>
</template>
<!--操作栏-->
<template #action="{ record }">
<TableAction :actions="getTableAction(record)"/>
</template>
<template v-slot:bodyCell="{ column, record, index, text }">
</template>
</BasicTable>
<!-- 表单区域 -->
<DeviceAddModal ref="registerDrawer" @success="handleSuccess" />
<LogModal ref="logDrawer" @success="handleSuccess" />
</div>
</template>
<script lang="ts" name="iotManager-deviceList" setup>
import {ref, reactive, defineExpose, nextTick} from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { deviceColumns } from '../manager.data';
import { deviceList } from '../manager.api';
import { useUserStore } from '/@/store/modules/user';
import DeviceAddModal from './DeviceAddModal.vue';
import LogModal from './LogModal.vue';
const formRef = ref();
const queryParam = reactive<any>({});
const registerDrawer = ref();
const logDrawer = ref();
const departId = ref<any>('');
const nuId = ref<any>('');
const orgCode = ref<any>('');
const userStore = useUserStore();
//table
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
title: '设备管理',
api: deviceList,
columns: deviceColumns,
canResize: false,
useSearchForm: false,
showIndexColumn: true,
actionColumn: {
width: 180,
fixed: 'right',
},
beforeFetch: async (params) => {
return Object.assign(params, queryParam);
},
},
});
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
const labelCol = reactive({
xs:24,
sm:4,
xl:6,
xxl:4
});
const wrapperCol = reactive({
xs: 24,
sm: 20,
});
/**
* 成功回调
*/
function handleSuccess() {
reload();
}
/**
* 操作栏
*/
function getTableAction(record) {
return [
{
label: '设备日志',
onClick: deviceLog.bind(null, record),
},
];
}
/**
* 设备管理
*/
function handleAdd(){
let record = { "departId" : departId.value,"nuId":nuId.value,"orgCode":orgCode.value };
registerDrawer.value.disableSubmit = true;
registerDrawer.value.edit(record);
}
/**
* 设备日志
*/
function deviceLog(record: Recordable){
logDrawer.value.disableSubmit = true;
logDrawer.value.edit(record);
}
/**
* 查询
*/
function searchQuery() {
queryParam.nuId = nuId.value;
reload();
}
/**
* 重置
*/
function searchReset() {
formRef.value.resetFields();
//
searchQuery();
}
//
function init(record) {
nuId.value = record.nuId;
departId.value = record.departId;
orgCode.value = record.sysOrgCode;
searchQuery();
}
defineExpose({
init
});
</script>
<style lang="less" scoped>
.jeecg-basic-table-form-container {
padding: 0;
.table-page-search-submitButtons {
display: block;
margin-bottom: 24px;
white-space: nowrap;
}
.query-group-cust{
min-width: 100px !important;
}
.query-group-split-cust{
width: 30px;
display: inline-block;
text-align: center
}
.ant-form-item:not(.ant-form-item-with-help){
margin-bottom: 16px;
height: 32px;
}
:deep(.ant-picker),:deep(.ant-input-number){
width: 100%;
}
}
.p-2{
height: calc(100vh - 120px);
}
</style>

View File

@ -0,0 +1,82 @@
<template>
<a-drawer :title="title" :width="width" :visible="visible" :closable="true" :footer-style="{ textAlign: 'right' }"
:bodyStyle="{ padding: '14px' }" @close="handleCancel">
<template #footer>
<a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
<a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button>
</template>
<DeviceList v-if="visible" ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit"
:formBpm="false">
</DeviceList>
</a-drawer>
</template>
<script lang="ts" setup>
import { ref, nextTick, defineExpose } from 'vue';
import DeviceList from './DeviceList.vue'
const title = ref<string>('');
const width = ref<number>(1800);
const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false);
const registerForm = ref();
const emit = defineEmits(['register', 'success']);
/**
* 新增
*/
function add() {
title.value = '新增';
visible.value = true;
nextTick(() => {
registerForm.value.add();
});
}
/**
* 编辑
* @param record
*/
function edit(record) {
title.value = disableSubmit.value ? '设备管理' : '编辑';
visible.value = true;
nextTick(() => {
registerForm.value.init(record);
});
}
/**
* 确定按钮点击事件
*/
function handleOk() {
registerForm.value.submitForm();
}
/**
* form保存回调事件
*/
function submitCallback() {
handleCancel();
emit('success');
}
/**
* 取消按钮回调事件
*/
function handleCancel() {
visible.value = false;
}
defineExpose({
add,
edit,
disableSubmit,
});
</script>
<style lang="less">
/**隐藏样式-modal确定按钮 */
.jee-hidden {
display: none !important;
}
</style>
<style lang="less" scoped></style>

View File

@ -0,0 +1,137 @@
<template>
<div class="p-2">
<!--引用表格-->
<BasicTable @register="registerTable">
<!--插槽:table标题-->
<template #tableTitle>
</template>
<!--操作栏-->
<template #action="{ record }">
<TableAction :actions="getTableAction(record)"/>
</template>
<template v-slot:bodyCell="{ column, record, index, text }">
</template>
</BasicTable>
</div>
</template>
<script lang="ts" name="iotManager-deviceLog" setup>
import {ref, reactive, defineExpose, nextTick} from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { logColumns } from '../manager.data';
import { logList } from '../manager.api';
import { useUserStore } from '/@/store/modules/user';
const formRef = ref();
const queryParam = reactive<any>({});
const registerDrawer = ref();
const deviceId = ref<any>('');
const userStore = useUserStore();
//table
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
title: '设备日志',
api: logList,
columns: logColumns,
canResize: false,
useSearchForm: false,
showIndexColumn: true,
showActionColumn: false,
actionColumn: {
width: 180,
fixed: 'right',
},
beforeFetch: async (params) => {
return Object.assign(params, queryParam);
},
},
});
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
const labelCol = reactive({
xs:24,
sm:4,
xl:6,
xxl:4
});
const wrapperCol = reactive({
xs: 24,
sm: 20,
});
/**
* 成功回调
*/
function handleSuccess() {
reload();
}
/**
* 操作栏
*/
function getTableAction(record) {
return [
];
}
/**
* 查询
*/
function searchQuery() {
queryParam.deviceId = deviceId.value;
reload();
}
/**
* 重置
*/
function searchReset() {
formRef.value.resetFields();
//
reload();
}
//
function init(record) {
deviceId.value = record.sn;
searchQuery();
}
defineExpose({
init
});
</script>
<style lang="less" scoped>
.jeecg-basic-table-form-container {
padding: 0;
.table-page-search-submitButtons {
display: block;
margin-bottom: 24px;
white-space: nowrap;
}
.query-group-cust{
min-width: 100px !important;
}
.query-group-split-cust{
width: 30px;
display: inline-block;
text-align: center
}
.ant-form-item:not(.ant-form-item-with-help){
margin-bottom: 16px;
height: 32px;
}
:deep(.ant-picker),:deep(.ant-input-number){
width: 100%;
}
}
.p-2{
height: calc(100vh - 120px);
}
</style>

View File

@ -0,0 +1,82 @@
<template>
<a-drawer :title="title" :width="width" :visible="visible" :closable="true" :footer-style="{ textAlign: 'right' }"
:bodyStyle="{ padding: '14px' }" @close="handleCancel">
<template #footer>
<a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
<a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button>
</template>
<LogList v-if="visible" ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit"
:formBpm="false">
</LogList>
</a-drawer>
</template>
<script lang="ts" setup>
import { ref, nextTick, defineExpose } from 'vue';
import LogList from './LogList.vue'
const title = ref<string>('');
const width = ref<number>(1800);
const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false);
const registerForm = ref();
const emit = defineEmits(['register', 'success']);
/**
* 新增
*/
function add() {
title.value = '新增';
visible.value = true;
nextTick(() => {
registerForm.value.add();
});
}
/**
* 编辑
* @param record
*/
function edit(record) {
console.log(record);
title.value = disableSubmit.value ? '设备日志' : '编辑';
visible.value = true;
nextTick(() => {
registerForm.value.init(record);
});
}
/**
* 确定按钮点击事件
*/
function handleOk() {
registerForm.value.submitForm();
}
/**
* form保存回调事件
*/
function submitCallback() {
handleCancel();
emit('success');
}
/**
* 取消按钮回调事件
*/
function handleCancel() {
visible.value = false;
}
defineExpose({
edit,
disableSubmit,
});
</script>
<style lang="less">
/**隐藏样式-modal确定按钮 */
.jee-hidden {
display: none !important;
}
</style>
<style lang="less" scoped></style>

View File

@ -9,19 +9,19 @@
<a-form-item name="orgCode">
<template #label><span title="机构名称">机构名称</span></template>
<j-dict-select-tag type='list' v-model:value="queryParam.orgCode" dictCode="sys_depart,depart_name,org_code"
placeholder="请选择机构" />
placeholder="请选择机构" allow-clear />
</a-form-item>
</a-col>
<a-col :lg="6">
<a-form-item name="orgLeader">
<template #label><span title="负责人">负责人</span></template>
<a-input v-model:value="queryParam.orgLeader" placeholder="请输入机构负责人" />
<a-input v-model:value="queryParam.orgLeader" placeholder="请输入机构负责人" allow-clear />
</a-form-item>
</a-col>
<a-col :lg="6">
<a-form-item name="orgLeaderPhone">
<template #label><span title="电话">电话</span></template>
<a-input v-model:value="queryParam.orgLeaderPhone" placeholder="请输入负责人电话" />
<a-input v-model:value="queryParam.orgLeaderPhone" placeholder="请输入负责人电话" allow-clear />
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
@ -49,32 +49,33 @@
</template>
</BasicTable>
<!-- 表单区域 -->
<!-- <DrawerModal ref="registerDrawer" @success="handleSuccess" />-->
<AreaModal ref="registerModal" @success="handleSuccess" />
</div>
</template>
<script lang="ts" name="iot-nuIotCameraInfo" setup>
<script lang="ts" name="iotManager-index" setup>
import { ref, reactive } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { columns } from './manager.data';
import { orgList } from './manager.api';
import { useUserStore } from '/@/store/modules/user';
// import DrawerModal from './components/DrawerModal.vue';
import AreaModal from './components/AreaModal.vue';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
const formRef = ref();
const queryParam = reactive<any>({});
const registerDrawer = ref();
const registerModal = ref();
const userStore = useUserStore();
//table
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
title: '设备管理',
title: '机构设备管理',
api: orgList,
columns,
canResize: false,
useSearchForm: false,
showIndexColumn: true,
actionColumn: {
width: 180,
fixed: 'right',
@ -119,7 +120,8 @@ function getTableAction(record) {
* 设备管理
*/
function deviceManager(record: Recordable){
console.log(record);
registerModal.value.disableSubmit = true;
registerModal.value.edit(record);
}
/**

View File

@ -2,8 +2,12 @@ import { defHttp } from '/@/utils/http/axios';
enum Api {
orgList = '/iot/manager/org/list',
orgAllList = '/iot/manager/org/allList',
areaList = '/iot/manager/area/list',
deviceList = '/iot/manager/device/list',
canAddList = '/iot/manager/device/canAddList',
addBatch = '/iot/manager/device/addBatch',
unbindOrg = '/iot/manager/device/unbindOrg',
logList = '/iot/manager/log/list',
}
/**
@ -15,4 +19,28 @@ export const orgList = (params) => defHttp.get({ url: Api.orgList, params });
*
* @param params
*/
export const orgAllList = (params) => defHttp.get({ url: Api.orgAllList, params });
export const areaList = (params) => defHttp.get({ url: Api.areaList, params });
/**
*
* @param params
*/
export const deviceList = (params) => defHttp.get({ url: Api.deviceList, params });
/**
*
* @param params
*/
export const canAddList = (params) => defHttp.get({ url: Api.canAddList, params });
/**
*
* @param params
*/
export const addBatch = (params) => defHttp.post({ url: Api.addBatch, params }, { joinParamsToUrl: true });
/**
*
*/
export const unbindOrg = (params) => defHttp.post({ url: Api.unbindOrg, params });
/**
*
* @param params
*/
export const logList = (params) => defHttp.get({ url: Api.logList, params });

View File

@ -1,6 +1,4 @@
import {BasicColumn} from '/@/components/Table';
import {FormSchema} from '/@/components/Table';
import dayjs from 'dayjs';
//列表数据
export const columns: BasicColumn[] = [
@ -27,4 +25,116 @@ export const columns: BasicColumn[] = [
dataIndex: 'orgLeaderPhone',
width: 200
},
{
title: '加盟日期',
align: "center",
dataIndex: 'franchiseTime',
width: 200
},
];
//列表数据
export const nuColumns: BasicColumn[] = [
{
title: '区域名称',
align: "center",
dataIndex: 'nuName'
},
{
title: '区域编码',
align: "center",
dataIndex: 'nuId',
},
{
title: '区域属性',
align: "center",
dataIndex: 'areaFlag_dictText',
},
];
//列表数据
export const deviceColumns: BasicColumn[] = [
{
title: '区域名称',
align: "center",
dataIndex: 'nuName'
},
{
title: '区域编码',
align: "center",
dataIndex: 'nuId',
},
{
title: '设备标识',
align: "center",
dataIndex: 'sn',
},
{
title: '设备维度',
align: "center",
dataIndex: 'dimension',
},
{
title: '设备类型',
align: "center",
dataIndex: 'deviceType',
},
{
title: '在线状态',
align: "center",
dataIndex: 'deviceStatus',
},
{
title: '分配状态',
align: "center",
dataIndex: 'izAllocate',
},
];
//列表数据
export const deviceAddColumns: BasicColumn[] = [
{
title: '设备标识',
align: "center",
dataIndex: 'sn',
},
{
title: '设备维度',
align: "center",
dataIndex: 'dimension',
},
{
title: '设备类型',
align: "center",
dataIndex: 'deviceType',
},
{
title: '在线状态',
align: "center",
dataIndex: 'deviceStatus',
},
{
title: '分配状态',
align: "center",
dataIndex: 'izAllocate',
},
];
//列表数据
export const logColumns: BasicColumn[] = [
{
title: '维护类型',
align: "center",
dataIndex: 'optType'
},
{
title: '备注',
align: "center",
dataIndex: 'remark',
},
{
title: '时间',
align: "center",
dataIndex: 'updateDate',
}
];