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

物联设备设备管理优化

This commit is contained in:
曹磊 2026-03-18 18:10:29 +08:00
parent 6a8fd1c89f
commit 5c88ee83d9
15 changed files with 431 additions and 349 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/Form/src/jeecg/components/JDictSelectTag.vue
View File

@ -1,10 +1,10 @@
<template>
<a-radio-group v-if="compType === CompTypeEnum.Radio" v-bind="attrs" v-model:value="state"
@change="handleChangeRadio">
@change="handleChangeRadio">
<template v-for="item in dictOptions" :key="`${item.value}`">
<a-radio :value="item.value" :disabled="item.disabled">
<span :class="[useDicColor && item.color ? 'colorText' : '']"
:style="{ backgroundColor: `${useDicColor && item.color}` }">
:style="{ backgroundColor: `${useDicColor && item.color}` }">
{{ item.label }}
</span>
</a-radio>
@ -12,7 +12,7 @@
</a-radio-group>
<a-radio-group v-else-if="compType === CompTypeEnum.RadioButton" v-bind="attrs" v-model:value="state"
buttonStyle="solid" @change="handleChangeRadio">
buttonStyle="solid" @change="handleChangeRadio">
<template v-for="item in dictOptions" :key="`${item.value}`">
<a-radio-button :value="item.value" :disabled="item.disabled">
{{ item.label }}
@ -28,13 +28,14 @@
</template>
</a-input>
<a-select v-else :placeholder="placeholder" v-bind="attrs" v-model:value="state" :filterOption="handleFilterOption"
:getPopupContainer="getPopupContainer" :style="style" @change="handleChange">
:getPopupContainer="getPopupContainer" :style="style" @change="handleChange">
<a-select-option v-if="showChooseOption" :value="null">请选择…</a-select-option>
<template v-for="item in dictOptions" :key="`${item.value}`">
<a-select-option :value="item.value" :disabled="!ignoreDisabled && item.disabled">
<span :class="[useDicColor && item.color ? 'colorText' : '']"
:style="{ backgroundColor: `${useDicColor && item.color}` }" :title="item.label">
{{ item.label }}<span style="color:rgb(255 39 39);">{{ ignoreDisabled && item.disabled ? '(已停用)' : '' }}</span>
:style="{ backgroundColor: `${useDicColor && item.color}` }" :title="item.label">
{{ item.label }}<span style="color:rgb(255 39 39);">{{ ignoreDisabled && item.disabled ? '(已停用)' : ''
}}</span>
</span>
</a-select-option>
</template>
@ -76,9 +77,10 @@ export default defineComponent({
},
style: propTypes.any,
ignoreDisabled: propTypes.bool.def(false),
orgCode:'',//组织机构编码 会切换数据源
orgCode: '',//组织机构编码 会切换数据源
showLabel: propTypes.bool.def(true)
},
emits: ['options-change', 'change', 'update:value'],
emits: ['options-change', 'change', 'update:value', 'upDictCode', 'currentText'],
setup(props, { emit, refs }) {
const dictOptions = ref<any[]>([]);
const attrs = useAttrs();
@ -127,21 +129,25 @@ export default defineComponent({
async function initDictData() {
let { dictCode, stringToNumber } = props;
//根据字典Code, 初始化字典数组
const dictData = await initDictOptions(dictCode,props.orgCode);
const dictData = await initDictOptions(dictCode, props.orgCode);
dictOptions.value = dictData.reduce((prev, next) => {
if (next) {
const value = next['value'];
prev.push({
const value1 = {
label: next['text'] || next['label'],
value: stringToNumber ? +value : value,
disabled: next['status'] == 1,
color: next['color'],
...omit(next, ['text', 'value', 'color']),
});
}
if(!props.showLabel&&next['status'] == 1){
}else{
prev.push(value1);
}
}
return prev;
}, []);
emit('upDictCode', dictOptions.value)
}
function handleChange(e) {
@ -162,6 +168,11 @@ export default defineComponent({
}
} else {
changeValue = e?.target?.value ?? e;
if (!e) {
emit('currentText', null)
} else {
emit('currentText', dictOptions.value.filter(item => item.value == changeValue)[0].label)
}
}
state.value = changeValue;

25
src/views/iotManager/components/AreaDeviceAddList.vue
View File

@ -9,24 +9,15 @@
<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>
<j-dict-select-tag v-model:value="queryParam.deviceType" :showLabel="false" dictCode="tplink_device_type" placeholder="请选择设备类型" allow-clear />
</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-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>
@ -78,6 +69,7 @@ import { useListPage } from '/@/hooks/system/useListPage';
import { deviceAddColumns } from '../manager.data';
import { canAddList,addBatch } from '../manager.api';
import { useUserStore } from '/@/store/modules/user';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
const formRef = ref();
const confirmLoading = ref<boolean>(false);
@ -103,7 +95,8 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
fixed: 'right',
},
beforeFetch: async (params) => {
queryParam.dimension = '区域维度';
// queryParam.dimension = '区域维度';
queryParam.departId = departId.value;
return Object.assign(params, queryParam);
},
},

2
src/views/iotManager/components/AreaDeviceAddModal.vue
View File

@ -16,7 +16,7 @@ import { ref, nextTick, defineExpose } from 'vue';
import AreaDeviceAddList from './AreaDeviceAddList.vue'
const title = ref<string>('');
const width = ref<number>(1500);
const width = ref<number>(1200);
const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false);
const registerForm = ref();

45
src/views/iotManager/components/AreaDeviceList.vue
View File

@ -5,28 +5,19 @@
<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-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="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>
<j-dict-select-tag v-model:value="queryParam.deviceType" :showLabel="false" dictCode="tplink_device_type" placeholder="请选择设备类型" allow-clear />
</a-form-item>
</a-col>
<a-col :lg="5">
<a-col :lg="6">
<a-form-item name="deviceStatus">
<template #label><span title="在线状态">在线状态</span></template>
<a-select v-model:value="queryParam.deviceStatus" placeholder="请选择在线状态" allow-clear>
@ -35,7 +26,7 @@
</a-select>
</a-form-item>
</a-col>
<a-col :lg="4">
<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>
@ -51,7 +42,6 @@
<BasicTable @register="registerTable">
<!--插槽:table标题-->
<template #tableTitle>
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd"> 添加区域设备</a-button>
</template>
<!--操作栏-->
<template #action="{ record }">
@ -61,7 +51,6 @@
</template>
</BasicTable>
<!-- 表单区域 -->
<AreaDeviceAddModal ref="registerDrawer" @success="handleSuccess" />
<LogModal ref="logDrawer" @success="handleSuccess" />
</div>
</template>
@ -73,12 +62,11 @@ import { useListPage } from '/@/hooks/system/useListPage';
import { areaDeviceColumns } from '../manager.data';
import { deviceList } from '../manager.api';
import { useUserStore } from '/@/store/modules/user';
import AreaDeviceAddModal from './AreaDeviceAddModal.vue';
import LogModal from './LogModal.vue';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
const formRef = ref();
const queryParam = reactive<any>({});
const registerDrawer = ref();
const logDrawer = ref();
const departId = ref<any>('');
const nuId = ref<any>('');
@ -87,7 +75,7 @@ const userStore = useUserStore();
//注册table数据
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
title: '设备管理',
title: '设备预览',
api: deviceList,
columns: areaDeviceColumns,
canResize: false,
@ -99,6 +87,7 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
},
beforeFetch: async (params) => {
queryParam.dimension = '区域维度';
queryParam.departId = departId.value;
return Object.assign(params, queryParam);
},
},
@ -134,14 +123,6 @@ function getTableAction(record) {
];
}
/**
* 设备管理
*/
function handleAdd(){
let record = { "departId" : departId.value,"nuId":nuId.value,"orgCode":orgCode.value };
registerDrawer.value.disableSubmit = true;
registerDrawer.value.edit(record);
}
/**
* 设备日志

4
src/views/iotManager/components/AreaDeviceModal.vue
View File

@ -16,7 +16,7 @@ import { ref, nextTick, defineExpose } from 'vue';
import AreaDeviceList from './AreaDeviceList.vue'
const title = ref<string>('');
const width = ref<number>(1800);
const width = ref<number>(1200);
const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false);
const registerForm = ref();
@ -37,7 +37,7 @@ function add() {
* @param record
*/
function edit(record) {
title.value = disableSubmit.value ? '设备管理' : '编辑';
title.value = disableSubmit.value ? '设备预览' : '编辑';
visible.value = true;
nextTick(() => {
registerForm.value.init(record);

44
src/views/iotManager/components/AreaList.vue
View File

@ -34,8 +34,6 @@
<BasicTable @register="registerTable">
<!--插槽:table标题-->
<template #tableTitle>
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd"> 添加机构设备</a-button>
<a-button type="primary" preIcon="ant-design:unlock-outlined" @click="handleOrgUnbind"> 机构解绑</a-button>
</template>
<!--操作栏-->
<template #action="{ record }">
@ -45,7 +43,7 @@
</template>
</BasicTable>
<!-- 表单区域 -->
<OrgDeviceModal ref="orgDrawer" @success="handleSuccess" />
<AreaDeviceAddModal ref="areaAddDrawer" @success="handleSuccess" />
<AreaDeviceModal ref="areaDrawer" @success="handleSuccess" />
</div>
</template>
@ -58,14 +56,14 @@ import { nuColumns } from '../manager.data';
import { areaList,unbindOrg } from '../manager.api';
import { useUserStore } from '/@/store/modules/user';
import AreaDeviceModal from './AreaDeviceModal.vue';
import OrgDeviceModal from './OrgDeviceModal.vue';
import AreaDeviceAddModal from './AreaDeviceAddModal.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 orgDrawer = ref();
const areaAddDrawer = ref();
const areaDrawer = ref();
const orgCode = ref<any>('');
const departId = ref<any>('');
@ -100,23 +98,6 @@ const wrapperCol = reactive({
sm: 16,
});
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',
});
}
/**
* 成功回调
*/
@ -130,25 +111,28 @@ function handleSuccess() {
function getTableAction(record) {
return [
{
label: '设备管理',
label: '添加设备',
onClick: deviceManager.bind(null, record),
},
{
label: '设备预览',
onClick: handlePreview.bind(null, record),
},
];
}
/**
* 设备管理
* 添加设备
*/
function handleAdd(){
let record = { "departId" : departId.value,"orgCode":orgCode.value };
orgDrawer.value.disableSubmit = true;
orgDrawer.value.edit(record);
function deviceManager(record: Recordable){
areaAddDrawer.value.disableSubmit = true;
areaAddDrawer.value.edit(record);
}
/**
* 设备管理
* 区域设备预览
*/
function deviceManager(record: Recordable){
function handlePreview(record: Recordable){
areaDrawer.value.disableSubmit = true;
areaDrawer.value.edit(record);
}

2
src/views/iotManager/components/LogModal.vue
View File

@ -16,7 +16,7 @@ import { ref, nextTick, defineExpose } from 'vue';
import LogList from './LogList.vue'
const title = ref<string>('');
const width = ref<number>(1800);
const width = ref<number>(1400);
const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false);
const registerForm = ref();

26
src/views/iotManager/components/OrgDeviceAddList.vue
View File

@ -9,24 +9,15 @@
<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>
<j-dict-select-tag v-model:value="queryParam.deviceType" :showLabel="false" dictCode="tplink_device_type" placeholder="请选择设备类型" allow-clear />
</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-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>
@ -78,6 +69,7 @@ import { useListPage } from '/@/hooks/system/useListPage';
import { deviceAddColumns } from '../manager.data';
import { canAddList,addOrgBatch } from '../manager.api';
import { useUserStore } from '/@/store/modules/user';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
const formRef = ref();
const confirmLoading = ref<boolean>(false);
@ -102,7 +94,7 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
fixed: 'right',
},
beforeFetch: async (params) => {
queryParam.dimension = '机构维度';
// queryParam.dimension = '机构维度';
queryParam.departId = departId.value;
return Object.assign(params, queryParam);
},
@ -180,7 +172,7 @@ function handleOk(){
//初始化
function init(record) {
departId.value = record.departId;
departId.value = record.id;
orgCode.value = record.orgCode;
searchQuery();
}

2
src/views/iotManager/components/OrgDeviceAddModal.vue
View File

@ -16,7 +16,7 @@ import { ref, nextTick, defineExpose } from 'vue';
import OrgDeviceAddList from './OrgDeviceAddList.vue'
const title = ref<string>('');
const width = ref<number>(1500);
const width = ref<number>(1200);
const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false);
const registerForm = ref();

207
src/views/iotManager/components/OrgDeviceList.vue
View File

@ -1,207 +0,0 @@
<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="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>
<!-- 表单区域 -->
<OrgDeviceAddModal 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 { orgDeviceColumns } from '../manager.data';
import { deviceList } from '../manager.api';
import { useUserStore } from '/@/store/modules/user';
import OrgDeviceAddModal from './OrgDeviceAddModal.vue';
import LogModal from './LogModal.vue';
const formRef = ref();
const queryParam = reactive<any>({});
const registerDrawer = ref();
const logDrawer = ref();
const departId = ref<any>('');
const orgCode = ref<any>('');
const userStore = useUserStore();
//注册table数据
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
tableProps: {
title: '设备管理',
api: deviceList,
columns: orgDeviceColumns,
canResize: false,
useSearchForm: false,
showIndexColumn: true,
actionColumn: {
width: 180,
fixed: 'right',
},
beforeFetch: async (params) => {
queryParam.dimension = '机构维度';
queryParam.departId = departId.value;
return Object.assign(params, queryParam);
},
},
});
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
const labelCol = reactive({
xs:24,
sm:8,
xl:8,
xxl:8
});
const wrapperCol = reactive({
xs: 24,
sm: 16,
});
/**
* 成功回调
*/
function handleSuccess() {
reload();
}
/**
* 操作栏
*/
function getTableAction(record) {
return [
{
label: '设备日志',
onClick: deviceLog.bind(null, record),
},
];
}
/**
* 设备管理
*/
function handleAdd(){
let record = { "departId" : departId.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() {
reload();
}
/**
* 重置
*/
function searchReset() {
formRef.value.resetFields();
//刷新数据
searchQuery();
}
//初始化
function init(record) {
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>

226
src/views/iotManager/components/PreviewList.vue Normal file
View File

@ -0,0 +1,226 @@
<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="nuId">-->
<!-- <a-select ref="select"-->
<!-- placeholder="请选择区域"-->
<!-- v-model:value="queryParam.nuId">-->
<!-- <a-select-option :value="item.nuId" v-for="item in nuInfos" :key="item.nuId">{{item.nuId}}</a-select-option>-->
<!-- </a-select>-->
<!-- <j-dict-select-tag type='list' v-model:value="queryParam.nuId" :dictCode="getNuList()"-->
<!-- placeholder="请选择区域" allow-clear />-->
<!-- </a-form-item>-->
<a-form-item name="nuName">
<template #label><span title="区域名称">区域名称</span></template>
<a-input placeholder="请输入区域名称" v-model:value="queryParam.nuName" allow-clear ></a-input>
</a-form-item>
</a-col>
<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>
<j-dict-select-tag v-model:value="queryParam.deviceType" :showLabel="false" dictCode="tplink_device_type" placeholder="请选择设备类型" allow-clear />
</a-form-item>
</a-col>
<a-col :lg="6">
<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="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>
</template>
<!--操作栏-->
<template #action="{ record }">
<TableAction :actions="getTableAction(record)"/>
</template>
<template v-slot:bodyCell="{ column, record, index, text }">
</template>
</BasicTable>
</div>
</a-spin>
</template>
<script lang="ts" name="iotManager-previewList" setup>
import {ref, reactive, defineExpose, nextTick} from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { orgDeviceColumns } from '../manager.data';
import { previewList } from '../manager.api';
import { useUserStore } from '/@/store/modules/user';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
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: previewList,
columns: orgDeviceColumns,
canResize: false,
useSearchForm: false,
showIndexColumn: true,
actionColumn: {
width: 100,
fixed: 'right',
},
beforeFetch: async (params) => {
queryParam.departId = departId.value;
return Object.assign(params, queryParam);
},
},
});
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys, selectedRows }] = tableContext;
const labelCol = reactive({
xs:24,
sm:8,
xl:8,
xxl:8
});
const wrapperCol = reactive({
xs: 24,
sm: 16,
});
/**
* 成功回调
*/
function handleSuccess() {
reload();
}
/**
* 操作栏
*/
function getTableAction(record) {
return [
{
label: '更换',
// onClick: deviceOrgManager.bind(null, record),
},
{
label: '释放',
// onClick: deviceManager.bind(null, record),
ifShow: () => {
return record.izAllocate == '已分配';
},
},
{
label: '删除',
// onClick: devicePreview.bind(null, record),
ifShow: () => {
return record.izAllocate == '释放';
},
},
];
}
/**
* 查询
*/
function searchQuery() {
reload();
}
/**
* 重置
*/
function searchReset() {
formRef.value.resetFields();
selectedRowKeys.value = [];
//刷新数据
searchQuery();
}
function handleCreate(){
visible.value = true;
}
// function getNuList(){
// return 'nu_base_info,nu_name,nu_id,sys_org_code = \'' + orgCode.value + '\' order by nu_id asc'
// }
//初始化
function init(record) {
departId.value = record.id;
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>

11
src/views/iotManager/components/OrgDeviceModal.vue → src/views/iotManager/components/PreviewModal.vue
View File

@ -5,18 +5,18 @@
<a-button type="primary" style="margin-right: 8px" @click="handleCancel">关闭</a-button>
<a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button>
</template>
<OrgDeviceList v-if="visible" ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit"
<PreviewList v-if="visible" ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit"
:formBpm="false">
</OrgDeviceList>
</PreviewList>
</a-drawer>
</template>
<script lang="ts" setup>
import { ref, nextTick, defineExpose } from 'vue';
import OrgDeviceList from './OrgDeviceList.vue'
import PreviewList from './PreviewList.vue'
const title = ref<string>('');
const width = ref<number>(1800);
const width = ref<number>(1200);
const visible = ref<boolean>(false);
const disableSubmit = ref<boolean>(false);
const registerForm = ref();
@ -37,7 +37,7 @@ function add() {
* @param record
*/
function edit(record) {
title.value = disableSubmit.value ? '设备管理' : '编辑';
title.value = disableSubmit.value ? '设备预览' : '编辑';
visible.value = true;
nextTick(() => {
registerForm.value.init(record);
@ -64,6 +64,7 @@ function submitCallback() {
*/
function handleCancel() {
visible.value = false;
emit('success');
}
defineExpose({

71
src/views/iotManager/index.vue
View File

@ -49,23 +49,31 @@
</template>
</BasicTable>
<!-- 表单区域 -->
<AreaModal ref="registerModal" @success="handleSuccess" />
<OrgDeviceAddModal ref="orgModal" @success="handleSuccess" />
<AreaModal ref="areaModal" @success="handleSuccess" />
<PreviewModal ref="previewModal" @success="handleSuccess" />
</div>
</template>
<script lang="ts" name="iotManager-index" setup>
import { ref, reactive } from 'vue';
import {ref, reactive, createVNode} 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 {orgList, unbindOrg} from './manager.api';
import { useUserStore } from '/@/store/modules/user';
import OrgDeviceAddModal from './components/OrgDeviceAddModal.vue';
import AreaModal from './components/AreaModal.vue';
import PreviewModal from './components/PreviewModal.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 registerModal = ref();
const orgModal = ref();
const areaModal = ref();
const previewModal = ref();
const userStore = useUserStore();
//注册table数据
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
@ -77,7 +85,7 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
useSearchForm: false,
showIndexColumn: true,
actionColumn: {
width: 180,
width: 300,
fixed: 'right',
},
beforeFetch: async (params) => {
@ -110,18 +118,61 @@ function handleSuccess() {
function getTableAction(record) {
return [
{
label: '设备管理',
label: '机构添加',
onClick: deviceOrgManager.bind(null, record),
},
{
label: '区域添加',
onClick: deviceManager.bind(null, record),
},
];
{
label: '设备预览',
onClick: devicePreview.bind(null, record),
},
{
label: '机构解绑',
onClick: handleOrgUnbind.bind(null, record),
}, ];
}
/**
* 设备管理
* 添加机构设备
*/
function deviceOrgManager(record: Recordable){
orgModal.value.disableSubmit = true;
orgModal.value.edit(record);
}
/**
* 添加区域设备
*/
function deviceManager(record: Recordable){
registerModal.value.disableSubmit = true;
registerModal.value.edit(record);
areaModal.value.disableSubmit = true;
areaModal.value.edit(record);
}
function handleOrgUnbind(record: Recordable){
let param = {"orgCode":record.orgCode};
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 devicePreview(record: Recordable){
previewModal.value.disableSubmit = true;
previewModal.value.edit(record);
}
/**

7
src/views/iotManager/manager.api.ts
View File

@ -4,6 +4,7 @@ enum Api {
orgList = '/iot/manager/org/list',
areaList = '/iot/manager/area/list',
deviceList = '/iot/manager/device/list',
previewList = '/iot/manager/device/previewList',
canAddList = '/iot/manager/device/canAddList',
addBatch = '/iot/manager/device/addBatch',
addOrgBatch = '/iot/manager/device/addOrgBatch',
@ -26,11 +27,17 @@ 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 previewList = (params) => defHttp.get({ url: Api.previewList, params });
/**
* 列表接口
* @param params
*/
export const canAddList = (params) => defHttp.get({ url: Api.canAddList, params });
/**
* 添加
* @param params

73
src/views/iotManager/manager.data.ts
View File

@ -35,16 +35,16 @@ export const columns: BasicColumn[] = [
//列表数据
export const nuColumns: BasicColumn[] = [
{
title: '区域名称',
align: "center",
dataIndex: 'nuName'
},
{
title: '区域编码',
align: "center",
dataIndex: 'nuId',
},
{
title: '区域名称',
align: "center",
dataIndex: 'nuName'
},
{
title: '区域属性',
align: "center",
@ -54,6 +54,22 @@ export const nuColumns: BasicColumn[] = [
//列表数据
export const orgDeviceColumns: BasicColumn[] = [
{
title: '区域编码',
align: "center",
dataIndex: 'nuId',
},
{
title: '区域名称',
align: "center",
dataIndex: 'nuName'
},
{
title: '区域属性',
align: "center",
dataIndex: 'areaFlag_dictText',
width: 100
},
{
title: '设备标识',
align: "center",
@ -63,36 +79,59 @@ export const orgDeviceColumns: BasicColumn[] = [
title: '设备维度',
align: "center",
dataIndex: 'dimension',
width: 100
},
{
title: '设备类型',
align: "center",
dataIndex: 'deviceType',
dataIndex: 'deviceType_dictText',
width: 100
},
{
title: '在线状态',
align: "center",
dataIndex: 'deviceStatus',
width: 100
},
{
title: '分配状态',
align: "center",
dataIndex: 'izAllocate',
width: 100
},
{
title: '报修状态',
align: "center",
dataIndex: 'maintainStatus',
customRender:({record})=>{
if(record.maintainStatus=='0'){
return "正常";
}
if(record.maintainStatus=='1'){
return "损坏";
}
},
width: 100
},
];
//列表数据
export const areaDeviceColumns: BasicColumn[] = [
{
title: '区域编码',
align: "center",
dataIndex: 'nuId',
},
{
title: '区域名称',
align: "center",
dataIndex: 'nuName'
},
{
title: '区域编码',
title: '区域属性',
align: "center",
dataIndex: 'nuId',
dataIndex: 'areaFlag_dictText',
},
{
title: '设备标识',
@ -103,21 +142,25 @@ export const areaDeviceColumns: BasicColumn[] = [
title: '设备维度',
align: "center",
dataIndex: 'dimension',
width: 100
},
{
title: '设备类型',
align: "center",
dataIndex: 'deviceType',
dataIndex: 'deviceType_dictText',
width: 100
},
{
title: '在线状态',
align: "center",
dataIndex: 'deviceStatus',
width: 100
},
{
title: '分配状态',
align: "center",
dataIndex: 'izAllocate',
width: 100
},
];
@ -128,15 +171,15 @@ export const deviceAddColumns: BasicColumn[] = [
align: "center",
dataIndex: 'sn',
},
{
title: '设备维度',
align: "center",
dataIndex: 'dimension',
},
// {
// title: '设备维度',
// align: "center",
// dataIndex: 'dimension',
// },
{
title: '设备类型',
align: "center",
dataIndex: 'deviceType',
dataIndex: 'deviceType_dictText'
},
{
title: '在线状态',