物联设备设备管理换绑

This commit is contained in:
曹磊 2026-03-20 16:07:01 +08:00
parent 1bb8c1576c
commit 0ac4842f4b
8 changed files with 419 additions and 34 deletions

View File

@ -38,6 +38,7 @@ enum Api {
getPlaybackUrlList = '/iot/tplink/cameraInfo/getPlaybackUrlList',
deletePlaybackChn = '/iot/tplink/cameraInfo/deletePlaybackChn',
getMultitransUrl = '/iot/tplink/cameraInfo/getMultitransUrl',
requestBidirectionStream = '/iot/tplink/cameraInfo/requestBidirectionStream',
getRecordCfgs = '/iot/tplink/cameraInfo/getRecordCfgs',
setRecordCfgs = '/iot/tplink/cameraInfo/setRecordCfgs',
getBatchProgress = '/iot/tplink/cameraInfo/getBatchProgress',
@ -277,6 +278,12 @@ export const deletePlaybackChn = (params) => defHttp.get({ url: Api.deletePlayba
*/
export const getMultitransUrl = (params) => defHttp.get({ url: Api.getMultitransUrl, params });
/**
* URL
* @param params
*/
export const requestBidirectionStream = (params) => defHttp.get({ url: Api.requestBidirectionStream, params });
/**
* --
* @param params

View File

@ -82,6 +82,7 @@ import {
getImageSwitch,
setImageSwitch,
getMultitransUrl,
requestBidirectionStream,
getPreviewUrl,
testAudio
} from "../camera.api";
@ -188,12 +189,17 @@ function handleCancel() {
* 开始电话
*/
function startPhone() {
getMultitransUrl({
// getMultitransUrl({
requestBidirectionStream({
"videoDevId": formData.deviceIndex
}).then(res => {
console.log("url:"+res.url);
console.log("wssUrl:"+res.wssUrl);
console.log("slpData:"+res.slpData);
player.value.startVoiceIntercom({
"url": res.url, // url
"wssUrl": res.wssUrl,
"slpData": res.slpData,//requestBidirectionStreamresult(使getMultitransUrlurl)
"mode": "half_duplex"
});
izPhone.value = true;
@ -233,7 +239,7 @@ async function createPreview() {
socket: formData.wssUrl, // websocket, getPreviewUrl
pluginPath: '/static', // sdkpluginPath
talkEnable: true,
useMultitrans: true,
useMultitrans: false,
});
let isPlaying = player.value.isPlaying();

View File

@ -0,0 +1,216 @@
<template>
<a-spin :spinning="confirmLoading">
<JFormContainer :disabled="disabled">
<template #detail>
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-row >
<a-col :span="24">
<a-form-item label="设备维度">
<a-select ref="select"
placeholder="请选择设备纬度"
v-model:value="formData.dimension">
<a-select-option value="机构维度">机构维度</a-select-option>
<a-select-option value="区域维度">区域维度</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row >
<a-col :span="24" v-if="formData.dimension == '区域维度'">
<a-form-item label="选择区域">
<a-select ref="select"
placeholder="请选择区域"
v-model:value="formData.nuId">
<a-select-option :value="item.nuId" v-for="item in nuInfos" :key="item.nuId">{{item.nuName}}</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
</a-form>
</template>
</JFormContainer>
<a-modal
ref="modalRef"
v-model:visible="visible"
:wrap-style="{ overflow: 'hidden', background:'transparent'}"
:bodyStyle="{ padding:'12px' }"
@ok="handleOk"
>
<a-textarea v-model:value="formData.remarks" placeholder="请输入备注" :rows="4" />
<template #title>
<div ref="modalTitleRef" style="width: 100%; cursor: move">备注</div>
</template>
</a-modal>
</a-spin>
</template>
<script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { getValueType } from '/@/utils';
import { updateBindDevice,nulist } from '../manager.api';
import { Form } from 'ant-design-vue';
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
import { useMessage } from '/@/hooks/web/useMessage';
const { createMessage } = useMessage();
const props = defineProps({
formDisabled: { type: Boolean, default: false },
formData: { type: Object, default: ()=>{} },
formBpm: { type: Boolean, default: true }
});
const formRef = ref();
const nuInfos = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({
sn: '',
orgCode: '',
departId: '',
nuId: '',
dimension: '',
deviceType: '',
deviceCategory: '',
oldNuId: '',
oldDimension: '',
remarks: ''
});
const visible = ref<any>();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false);
//
const validatorRules = {
// remarks: [{ required: true, message: '!'},],
};
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });
//
const disabled = computed(()=>{
if(props.formBpm === true){
if(props.formData.disabled === false){
return false;
}else{
return true;
}
}
return props.formDisabled;
});
/**
* 新增
*/
function add() {
let record = {};
edit(record);
}
/**
* 编辑
*/
function edit(record) {
record.oldNuId = record.nuId;
record.oldDimension = record.dimension;
nextTick(() => {
resetFields();
//
const tmpData = {};
Object.keys(formData).forEach((key) => {
if(record.hasOwnProperty(key)){
tmpData[key] = record[key]
}
})
//
Object.assign(formData, tmpData);
});
getNuInfos();
}
/**
* 提交数据
*/
function submitForm() {
if(formData.dimension=='区域维度'){
if(formData.nuId == null || formData.nuId ==''){
createMessage.warning('请选择要换绑的区域');
return;
}
if(formData.nuId == formData.oldNuId){
createMessage.warning('当前数据没变化无需保存');
return;
}
}
if(formData.dimension=='机构维度'){
if(formData.dimension == formData.oldDimension){
createMessage.warning('当前数据没变化无需保存');
return;
}
}
visible.value = true;
}
async function handleOk(){
try {
//
await validate();
} catch ({ errorFields }) {
if (errorFields) {
const firstField = errorFields[0];
if (firstField) {
formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
}
}
return Promise.reject(errorFields);
}
confirmLoading.value = true;
const isUpdate = ref<boolean>(false);
//
let model = formData;
if (model.id) {
isUpdate.value = true;
}
//
for (let data in model) {
//
if (model[data] instanceof Array) {
let valueType = getValueType(formRef.value.getProps, data);
//
if (valueType === 'string') {
model[data] = model[data].join(',');
}
}
}
await updateBindDevice(model)
.then((res) => {
visible.value = false;
emit('ok');
}).catch(() =>{})
.finally(() => {
confirmLoading.value = false;
});
}
async function getNuInfos(){
var params = {"orgCode":formData.orgCode};
nuInfos.value = await nulist({params});
}
defineExpose({
add,
edit,
submitForm,
});
</script>
<style lang="less" scoped>
.tbClass {
background: #fff;
padding: 80px;
border-radius: 5px;
display: flex;
justify-content: space-evenly;
border: 1px solid #d9d9d9;
}
</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>
<DeviceUpdateForm v-if="visible" ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit"
:formBpm="false">
</DeviceUpdateForm>
</a-drawer>
</template>
<script lang="ts" setup>
import { ref, nextTick, defineExpose } from 'vue';
import DeviceUpdateForm from "@/views/iotManager/components/DeviceUpdateForm.vue";
const title = ref<string>('');
const width = ref<number>(800);
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.edit(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

@ -70,6 +70,19 @@
</template>
</BasicTable>
</div>
<DeviceUpdateModal ref="deviceUpdateModal" @success="handleSuccess" />
<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>
</a-spin>
</template>
@ -78,20 +91,24 @@ import {ref, reactive, defineExpose, nextTick, createVNode} from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { orgDeviceColumns } from '../manager.data';
import {previewList, releaseDevice, unbindDevice} from '../manager.api';
import {previewList, releaseDevice, unbindDevice, unbindOrg} from '../manager.api';
import { useUserStore } from '/@/store/modules/user';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import {Modal} from "ant-design-vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
import DeviceUpdateModal from './DeviceUpdateModal.vue';
const formRef = ref();
const confirmLoading = ref<boolean>(false);
const queryParam = reactive<any>({});
const deviceUpdateModal = ref();
const departId = ref<any>('');
const nuId = ref<any>('');
const orgCode = ref<any>('');
const remarks = ref<any>('');
const visible = ref<any>();
const optType = ref();
const params = ref();
const userStore = useUserStore();
//table
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
@ -159,40 +176,57 @@ function getTableAction(record) {
//
function deviceUpBindManager(record: Recordable){
deviceUpdateModal.value.disableSubmit = false;
deviceUpdateModal.value.edit(record);
}
//
function deviceReleaseManager(record: Recordable){
Modal.confirm({
title: '设备释放',
width: '500px',
icon: createVNode(ExclamationCircleOutlined),
content: createVNode('div', { style: 'color:red;' }, '确定要释放该设备吗?'),
okText: '确定',
onOk() {
releaseDevice(record).then((res) => {}).catch(() =>{}).finally(() => {reload();});
},
onCancel() {
},
class: 'test',
});
optType.value = '释放';
visible.value = true;
params.value = record;
// Modal.confirm({
// title: '',
// width: '500px',
// icon: createVNode(ExclamationCircleOutlined),
// content: createVNode('div', { style: 'color:red;' }, ''),
// okText: '',
// onOk() {
// releaseDevice(record).then((res) => {}).catch(() =>{}).finally(() => {reload();});
// },
// onCancel() {
// },
// class: 'test',
// });
}
function deviceUnBindManager(record: Recordable){
Modal.confirm({
title: '设备解绑',
width: '500px',
icon: createVNode(ExclamationCircleOutlined),
content: createVNode('div', { style: 'color:red;' }, '确定要解绑该设备吗?'),
okText: '确定',
onOk() {
unbindDevice(record).then((res) => {}).catch(() =>{}).finally(() => {reload();});
},
onCancel() {
},
class: 'test',
});
optType.value = '解绑';
visible.value = true;
params.value = record;
// Modal.confirm({
// title: '',
// width: '500px',
// icon: createVNode(ExclamationCircleOutlined),
// content: createVNode('div', { style: 'color:red;' }, ''),
// okText: '',
// onOk() {
// unbindDevice(record).then((res) => {}).catch(() =>{}).finally(() => {reload();});
// },
// onCancel() {
// },
// class: 'test',
// });
}
function handleOk(){
let param = params.value;
param["remarks"] = remarks.value;
if(optType.value == '释放'){
releaseDevice(param).then((res) => {}).catch(() =>{}).finally(() => {visible.value = false;remarks.value='';reload();});
}else{
unbindDevice(param).then((res) => {}).catch(() =>{}).finally(() => {visible.value = false;remarks.value='';reload();});
}
}
/**

View File

@ -52,6 +52,18 @@
<OrgDeviceAddModal ref="orgModal" @success="handleSuccess" />
<AreaModal ref="areaModal" @success="handleSuccess" />
<PreviewModal ref="previewModal" @success="handleSuccess" />
<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>
</template>
@ -60,7 +72,7 @@ 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, unbindOrg} from './manager.api';
import {addBatch, orgList, unbindOrg} from './manager.api';
import { useUserStore } from '/@/store/modules/user';
import OrgDeviceAddModal from './components/OrgDeviceAddModal.vue';
import AreaModal from './components/AreaModal.vue';
@ -73,7 +85,10 @@ const formRef = ref();
const queryParam = reactive<any>({});
const orgModal = ref();
const areaModal = ref();
const visible = ref<any>();
const previewModal = ref();
const orgCode = ref();
const remarks = ref<any>('');
const userStore = useUserStore();
//table
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
@ -151,7 +166,6 @@ function deviceManager(record: Recordable){
}
function handleOrgUnbind(record: Recordable){
let param = {"orgCode":record.orgCode};
Modal.confirm({
title: '机构解绑',
width: '500px',
@ -159,7 +173,7 @@ function handleOrgUnbind(record: Recordable){
content: createVNode('div', { style: 'color:red;' }, '解除当前机构已绑定的所有设备,确定要解绑该机构吗?'),
okText: '确定',
onOk() {
unbindOrg(param).then((res) => {}).catch(() =>{}).finally(() => {});
unbindAll(record);
},
onCancel() {
},
@ -167,6 +181,19 @@ function handleOrgUnbind(record: Recordable){
});
}
function unbindAll(record: Recordable){
visible.value = true;
orgCode.value = record.orgCode;
}
function handleOk(){
let param = {
"remarks": remarks.value,
"orgCode": orgCode.value,
}
unbindOrg(param).then((res) => {}).catch(() =>{}).finally(() => {visible.value = false;});
}
/**
* 设备预览
*/

View File

@ -11,7 +11,9 @@ enum Api {
unbindOrg = '/iot/manager/device/unbindOrg',
releaseDevice = '/iot/manager/device/releaseDevice',
unbindDevice = '/iot/manager/device/unbindDevice',
updateBindDevice = '/iot/manager/device/updateBindDevice',
logList = '/iot/manager/log/list',
nulist = '/iot/manager/device/queryNuList',
}
/**
@ -50,6 +52,11 @@ export const addOrgBatch = (params) => defHttp.post({ url: Api.addOrgBatch, para
*
*/
export const unbindOrg = (params) => defHttp.post({ url: Api.unbindOrg, params });
/**
*
* @param params
*/
export const updateBindDevice = (params) => defHttp.post({ url: Api.updateBindDevice, params });
/**
*
* @param params
@ -63,3 +70,8 @@ export const releaseDevice = (params) => defHttp.post({ url: Api.releaseDevice,
*
*/
export const unbindDevice = (params) => defHttp.post({ url: Api.unbindDevice, params });
/**
*
* @param params
*/
export const nulist = (params) => defHttp.get({ url: Api.nulist, params });

View File

@ -100,7 +100,7 @@ export const orgDeviceColumns: BasicColumn[] = [
width: 100
},
{
title: '报修状态',
title: '设备状态',
align: "center",
dataIndex: 'maintainStatus',
customRender:({record})=>{