154 lines
5.7 KiB
Vue
154 lines
5.7 KiB
Vue
<template>
|
|
<el-dialog destroy-on-close title="绑定摄像头" v-model="visible" width="80%" :close-on-click-modal="false" draggable>
|
|
<div class="mb12" style="width: 100%">
|
|
<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog(
|
|
state.queryForm.houseId
|
|
)">
|
|
绑定相机
|
|
</el-button>
|
|
</div>
|
|
<el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
|
|
:header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
|
|
@sort-change="sortChangeHandle">
|
|
<el-table-column type="selection" width="40" align="center" />
|
|
<el-table-column type="index" label="#" width="80" />
|
|
<el-table-column prop="uniqueCode" width="200" show-overflow-tooltip label="空间">
|
|
<template #default="{ row }">
|
|
<div>{{ row.uniqueCode }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="空间">
|
|
<el-table-column prop="areaName" label="空间名" />
|
|
<el-table-column prop="areaUniqueCode" width="120" label="空间编码" />
|
|
</el-table-column>
|
|
<el-table-column label="位置">
|
|
<el-table-column prop="x" label="x" width="100" />
|
|
<el-table-column prop="y" label="y" width="100" />
|
|
<el-table-column prop="z" label="z" width="100" />
|
|
<el-table-column prop="cameraDirection" label="方向（度）" width="140">
|
|
<template #default="{ row }">
|
|
<span v-if="row.cameraDirection !== null && row.cameraDirection !== undefined">
|
|
{{ row.cameraDirection }}°
|
|
</span>
|
|
<span v-else>默认朝向视角</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column label="房屋">
|
|
<el-table-column prop="houseName" label="房屋名" />
|
|
<el-table-column prop="houseCode" label="房号" />
|
|
<el-table-column prop="houseNoFloor" label="楼层">
|
|
<template #default="{ row }">
|
|
{{ row.houseNoFloor }}楼
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column label="设备">
|
|
<el-table-column prop="deviceName" width="160" label="设备名" />
|
|
<el-table-column prop="channelName" width="160" label="通道名" />
|
|
<el-table-column prop="deviceIp" width="120" label="ip" />
|
|
<el-table-column prop="devicePort" width="120" label="端口" />
|
|
<el-table-column prop="deviceIsOnline" width="120" label="状态">
|
|
<template #default="{ row }">
|
|
<tag-online :isOnline="row.deviceIsOnline == 1" />
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="200" fixed="right">
|
|
<template #default="{ row }">
|
|
<el-button icon="edit-pen" text type="primary" v-auth="'area_areaHouse_edit'"
|
|
@click="formDialogRef.openDialog(state.queryForm.houseId, row.id)">编辑</el-button>
|
|
<el-button icon="delete" text type="primary" v-auth="'area_areaHouse_del'"
|
|
@click="handleDelete([row.id])">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
|
|
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="visible = false">取消</el-button>
|
|
</span>
|
|
</template>
|
|
|
|
<BindCameraFormDialog ref="formDialogRef" @refresh="getDataList" />
|
|
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts" name="BindCameraTable">
|
|
import { CopyDocument } from "@element-plus/icons-vue"
|
|
|
|
import { BasicTableProps, useTable } from "/@/hooks/table";
|
|
import { useMessage, useMessageBox } from "/@/hooks/message";
|
|
|
|
import * as AreaHouseApi from '/@/api/area/areaHouse'
|
|
|
|
// 引入组件
|
|
const BindCameraFormDialog = defineAsyncComponent(() => import('./bindCameraForm.vue'));
|
|
|
|
// 定义变量内容
|
|
const formDialogRef = ref()
|
|
|
|
const dataFormRef = ref();
|
|
const visible = ref(false)
|
|
const loading = ref(false)
|
|
|
|
// 多选变量
|
|
const selectObjs = ref([]) as any
|
|
const multiple = ref(true)
|
|
|
|
const state: BasicTableProps = reactive<BasicTableProps>({
|
|
createdIsNeed: false,
|
|
queryForm: {},
|
|
pageList: AreaHouseApi.houseDevicePage
|
|
})
|
|
// table hook
|
|
const {
|
|
getDataList,
|
|
currentChangeHandle,
|
|
sizeChangeHandle,
|
|
sortChangeHandle,
|
|
downBlobFile,
|
|
tableStyle
|
|
} = useTable(state)
|
|
|
|
|
|
// 多选事件
|
|
const selectionChangHandle = (objs: { id: string }[]) => {
|
|
selectObjs.value = objs.map(({ id }) => id);
|
|
multiple.value = !objs.length;
|
|
};
|
|
|
|
// 打开弹窗
|
|
const openDialog = (id: string) => {
|
|
visible.value = true
|
|
// 获取areaHouse信息
|
|
if (id) {
|
|
state.queryForm.houseId = id
|
|
getDataList()
|
|
}
|
|
};
|
|
|
|
// 删除操作
|
|
const handleDelete = async (ids: string[]) => {
|
|
try {
|
|
await useMessageBox().confirm('此操作将永久删除');
|
|
} catch {
|
|
return;
|
|
}
|
|
try {
|
|
await AreaHouseApi.delBindDevice(ids);
|
|
getDataList();
|
|
useMessage().success('删除成功');
|
|
} catch (err: any) {
|
|
useMessage().error(err.msg);
|
|
}
|
|
};
|
|
|
|
// 暴露变量
|
|
defineExpose({
|
|
openDialog
|
|
});
|
|
</script>
|