Merge remote-tracking branch 'yudao/feature/iot' into feature/iot
puhui999
commit
5ea792d333
|
|
@ -0,0 +1,43 @@
|
|||
import request from '@/config/axios'
|
||||
|
||||
// IoT 设备分组 VO
|
||||
export interface DeviceGroupVO {
|
||||
id: number // 分组 ID
|
||||
name: string // 分组名字
|
||||
status: number // 分组状态
|
||||
description: string // 分组描述
|
||||
deviceCount?: number // 设备数量
|
||||
}
|
||||
|
||||
// IoT 设备分组 API
|
||||
export const DeviceGroupApi = {
|
||||
// 查询IoT 设备分组分页
|
||||
getDeviceGroupPage: async (params: any) => {
|
||||
return await request.get({ url: `/iot/device-group/page`, params })
|
||||
},
|
||||
|
||||
// 查询IoT 设备分组详情
|
||||
getDeviceGroup: async (id: number) => {
|
||||
return await request.get({ url: `/iot/device-group/get?id=` + id })
|
||||
},
|
||||
|
||||
// 新增IoT 设备分组
|
||||
createDeviceGroup: async (data: DeviceGroupVO) => {
|
||||
return await request.post({ url: `/iot/device-group/create`, data })
|
||||
},
|
||||
|
||||
// 修改IoT 设备分组
|
||||
updateDeviceGroup: async (data: DeviceGroupVO) => {
|
||||
return await request.put({ url: `/iot/device-group/update`, data })
|
||||
},
|
||||
|
||||
// 删除IoT 设备分组
|
||||
deleteDeviceGroup: async (id: number) => {
|
||||
return await request.delete({ url: `/iot/device-group/delete?id=` + id })
|
||||
},
|
||||
|
||||
// 获取设备分组的精简信息列表
|
||||
getSimpleDeviceGroupList: async () => {
|
||||
return await request.get({ url: `/iot/device-group/simple-list` })
|
||||
}
|
||||
}
|
||||
|
|
@ -28,6 +28,7 @@ export interface DeviceVO {
|
|||
areaId: number // 地区编码
|
||||
address: string // 设备详细地址
|
||||
serialNumber: string // 设备序列号
|
||||
groupIds?: number[] // 添加分组 ID
|
||||
}
|
||||
|
||||
export interface DeviceUpdateStatusVO {
|
||||
|
|
@ -81,16 +82,39 @@ export const DeviceApi = {
|
|||
return await request.put({ url: `/iot/device/update-status`, data })
|
||||
},
|
||||
|
||||
// 删除设备
|
||||
// 修改设备分组
|
||||
updateDeviceGroup: async (data: {
|
||||
ids: number[]
|
||||
groupIds: number[]
|
||||
}) => {
|
||||
return await request.put({ url: `/iot/device/update-group`, data })
|
||||
},
|
||||
|
||||
// 删除单个设备
|
||||
deleteDevice: async (id: number) => {
|
||||
return await request.delete({ url: `/iot/device/delete?id=` + id })
|
||||
},
|
||||
|
||||
// 删除多个设备
|
||||
deleteDeviceList: async (ids: number[]) => {
|
||||
return await request.delete({ url: `/iot/device/delete-list`, params: { ids: ids.join(',') } })
|
||||
},
|
||||
|
||||
// 导出设备
|
||||
exportDeviceExcel: async (params: any) => {
|
||||
return await request.download({ url: `/iot/device/export-excel`, params })
|
||||
},
|
||||
|
||||
// 获取设备数量
|
||||
getDeviceCount: async (productId: number) => {
|
||||
return await request.get({ url: `/iot/device/count?productId=` + productId })
|
||||
},
|
||||
|
||||
// 获取设备的精简信息列表
|
||||
getSimpleDeviceList: async (deviceType?: number) => {
|
||||
return await request.get({ url: `/iot/device/simple-list?`, params: { deviceType } })
|
||||
},
|
||||
|
||||
// 获取设备属性最新数据
|
||||
getDevicePropertiesLatestData: async (params: any) => {
|
||||
return await request.get({ url: `/iot/device/data/latest`, params })
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ export interface ProductVO {
|
|||
protocolId: number // 协议编号
|
||||
categoryId: number // 产品所属品类标识符
|
||||
categoryName?: string // 产品所属品类名称
|
||||
icon: string // 产品图标
|
||||
picUrl: string // 产品图片
|
||||
description: string // 产品描述
|
||||
validateType: number // 数据校验级别
|
||||
status: number // 产品状态
|
||||
|
|
@ -17,7 +19,6 @@ export interface ProductVO {
|
|||
dataFormat: number // 数据格式
|
||||
deviceCount: number // 设备数量
|
||||
createTime: Date // 创建时间
|
||||
picUrl: string // 产品图片 URL
|
||||
}
|
||||
|
||||
// IOT 数据校验级别枚举类
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" class="design-iconfont" viewBox="0 0 12 12"><path fill="url(#a)" fill-rule="evenodd" d="M1 0a1 1 0 0 0-1 1v3.538a1 1 0 0 0 1 1h3.538a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1H1Zm0 6.462a1 1 0 0 0-1 1V11a1 1 0 0 0 1 1h3.538a1 1 0 0 0 1-1V7.462a1 1 0 0 0-1-1H1ZM6.462 1a1 1 0 0 1 1-1H11a1 1 0 0 1 1 1v3.538a1 1 0 0 1-1 1H7.462a1 1 0 0 1-1-1V1Zm1 5.462a1 1 0 0 0-1 1V11a1 1 0 0 0 1 1H11a1 1 0 0 0 1-1V7.462a1 1 0 0 0-1-1H7.462Z" clip-rule="evenodd"/><defs><linearGradient id="a" x1="0" x2="12" y1="0" y2="12" gradientUnits="userSpaceOnUse"><stop stop-color="#1B3149"/><stop offset="1" stop-color="#717D8A"/></linearGradient></defs></svg>
|
||||
|
After Width: | Height: | Size: 697 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 12 12"><g clip-path="url(#a)"><path fill="url(#b)" fill-rule="evenodd" d="M6.958.42C6.444.216 5.61.216 5.098.42L1.15 1.975c-.77.304-.77.797 0 1.1l3.947 1.558c.514.202 1.347.202 1.86 0l3.948-1.557c.77-.304.77-.797 0-1.1L6.958.418ZM4.715 11.788a.857.857 0 0 0 .3.056c.383 0 .671-.295.671-.7V6.404c0-.49-.364-1.007-.817-1.177L1.09 3.805a.808.808 0 0 0-.284-.056c-.353 0-.581.275-.581.7V9.19c0 .508.33 1.014.763 1.177l3.726 1.422Zm2.229-.024h-.02l.073.003c.074.004.154.009.227-.019L11 10.367c.45-.168.83-.686.83-1.177V4.45c0-.413-.29-.7-.673-.7a.965.965 0 0 0-.317.055l-3.72 1.422c-.44.165-.75.67-.75 1.177v4.74c0 .42.218.621.575.621Z" clip-rule="evenodd"/></g><defs><linearGradient id="b" x1=".226" x2="11.803" y1=".267" y2="11.871" gradientUnits="userSpaceOnUse"><stop stop-color="#1B3149"/><stop offset="1" stop-color="#717D8A"/></linearGradient><clipPath id="a"><path fill="#fff" d="M0 0h12v12H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 1011 B |
|
|
@ -13,6 +13,7 @@
|
|||
placeholder="请选择产品"
|
||||
:disabled="formType === 'update'"
|
||||
clearable
|
||||
@change="handleProductChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="product in products"
|
||||
|
|
@ -22,6 +23,19 @@
|
|||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="DeviceKey" prop="deviceKey">
|
||||
<el-input
|
||||
v-model="formData.deviceKey"
|
||||
placeholder="请输入 DeviceKey"
|
||||
:disabled="formType === 'update'"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="generateDeviceKey" :disabled="formType === 'update'">
|
||||
重新生成
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="DeviceName" prop="deviceName">
|
||||
<el-input
|
||||
v-model="formData.deviceName"
|
||||
|
|
@ -29,9 +43,40 @@
|
|||
:disabled="formType === 'update'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注名称" prop="nickname">
|
||||
<el-input v-model="formData.nickname" placeholder="请输入备注名称" />
|
||||
<el-form-item v-if="formData.deviceType === 1" label="网关设备" prop="gatewayId">
|
||||
<el-select v-model="formData.gatewayId" placeholder="子设备可选择父设备" clearable>
|
||||
<el-option
|
||||
v-for="gateway in gatewayDevices"
|
||||
:key="gateway.id"
|
||||
:label="gateway.nickname || gateway.deviceName"
|
||||
:value="gateway.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-collapse>
|
||||
<el-collapse-item title="更多配置">
|
||||
<el-form-item label="备注名称" prop="nickname">
|
||||
<el-input v-model="formData.nickname" placeholder="请输入备注名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备图片" prop="picUrl">
|
||||
<UploadImg v-model="formData.picUrl" :height="'120px'" :width="'120px'" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备分组" prop="groupIds">
|
||||
<el-select v-model="formData.groupIds" placeholder="请选择设备分组" multiple clearable>
|
||||
<el-option
|
||||
v-for="group in deviceGroups"
|
||||
:key="group.id"
|
||||
:label="group.name"
|
||||
:value="group.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备序列号" prop="serialNumber">
|
||||
<el-input v-model="formData.serialNumber" placeholder="请输入设备序列号" />
|
||||
</el-form-item>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
|
|
@ -41,13 +86,16 @@
|
|||
</template>
|
||||
<script setup lang="ts">
|
||||
import { DeviceApi, DeviceVO } from '@/api/iot/device'
|
||||
import { ProductApi } from '@/api/iot/product/product'
|
||||
import { DeviceGroupApi } from '@/api/iot/device/group'
|
||||
import { DeviceTypeEnum, ProductApi, ProductVO } from '@/api/iot/product/product'
|
||||
import { UploadImg } from '@/components/UploadFile'
|
||||
import { generateRandomStr } from '@/utils'
|
||||
|
||||
/** IoT 设备 表单 */
|
||||
/** IoT 设备表单 */
|
||||
defineOptions({ name: 'IoTDeviceForm' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
const message = useMessage() // 消息窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
|
|
@ -56,12 +104,27 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
|||
const formData = ref({
|
||||
id: undefined,
|
||||
productId: undefined,
|
||||
deviceKey: undefined as string | undefined,
|
||||
deviceName: undefined,
|
||||
nickname: undefined
|
||||
nickname: undefined,
|
||||
picUrl: undefined,
|
||||
gatewayId: undefined,
|
||||
deviceType: undefined as number | undefined,
|
||||
serialNumber: undefined,
|
||||
groupIds: [] as number[]
|
||||
})
|
||||
const formRules = reactive({
|
||||
productId: [{ required: true, message: '产品不能为空', trigger: 'blur' }],
|
||||
deviceKey: [
|
||||
{ required: true, message: 'DeviceKey 不能为空', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^[a-zA-Z0-9]+$/,
|
||||
message: 'DeviceKey 只能包含字母和数字',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
deviceName: [
|
||||
{ required: true, message: 'DeviceName 不能为空', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^[a-zA-Z0-9_.\-:@]{4,32}$/,
|
||||
message:
|
||||
|
|
@ -87,9 +150,19 @@ const formRules = reactive({
|
|||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
serialNumber: [
|
||||
{
|
||||
pattern: /^[a-zA-Z0-9-_]+$/,
|
||||
message: '序列号只能包含字母、数字、中划线和下划线',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
const products = ref<ProductVO[]>([]) // 产品列表
|
||||
const gatewayDevices = ref<DeviceVO[]>([]) // 网关设备列表
|
||||
const deviceGroups = ref<any[]>([])
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
|
|
@ -97,6 +170,7 @@ const open = async (type: string, id?: number) => {
|
|||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
|
|
@ -105,6 +179,24 @@ const open = async (type: string, id?: number) => {
|
|||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
} else {
|
||||
generateDeviceKey()
|
||||
}
|
||||
|
||||
// 加载网关设备列表
|
||||
try {
|
||||
gatewayDevices.value = await DeviceApi.getSimpleDeviceList(DeviceTypeEnum.GATEWAY)
|
||||
} catch (error) {
|
||||
console.error('加载网关设备列表失败:', error)
|
||||
}
|
||||
// 加载产品列表
|
||||
products.value = await ProductApi.getSimpleProductList()
|
||||
|
||||
// 加载设备分组列表
|
||||
try {
|
||||
deviceGroups.value = await DeviceGroupApi.getSimpleDeviceGroupList()
|
||||
} catch (error) {
|
||||
console.error('加载设备分组列表失败:', error)
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
|
@ -138,19 +230,30 @@ const resetForm = () => {
|
|||
formData.value = {
|
||||
id: undefined,
|
||||
productId: undefined,
|
||||
deviceKey: undefined,
|
||||
deviceName: undefined,
|
||||
nickname: undefined
|
||||
nickname: undefined,
|
||||
picUrl: undefined,
|
||||
gatewayId: undefined,
|
||||
deviceType: undefined,
|
||||
serialNumber: undefined,
|
||||
groupIds: []
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
/** 查询字典下拉列表 */
|
||||
const products = ref()
|
||||
const getProducts = async () => {
|
||||
products.value = await ProductApi.getSimpleProductList()
|
||||
/** 产品选择变化 */
|
||||
const handleProductChange = (productId: number) => {
|
||||
if (!productId) {
|
||||
formData.value.deviceType = undefined
|
||||
return
|
||||
}
|
||||
const product = products.value?.find((item) => item.id === productId)
|
||||
formData.value.deviceType = product?.deviceType
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getProducts()
|
||||
})
|
||||
/** 生成 DeviceKey */
|
||||
const generateDeviceKey = () => {
|
||||
formData.value.deviceKey = generateRandomStr(16)
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<Dialog :title="'添加设备到分组'" v-model="dialogVisible">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item label="设备分组" prop="groupIds">
|
||||
<el-select v-model="formData.groupIds" placeholder="请选择设备分组" multiple clearable>
|
||||
<el-option
|
||||
v-for="group in deviceGroups"
|
||||
:key="group.id"
|
||||
:label="group.name"
|
||||
:value="group.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DeviceApi } from '@/api/iot/device'
|
||||
import { DeviceGroupApi } from '@/api/iot/device/group'
|
||||
|
||||
defineOptions({ name: 'IoTDeviceGroupForm' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const formLoading = ref(false) // 表单的加载中
|
||||
const formData = ref({
|
||||
ids: [] as number[],
|
||||
groupIds: [] as number[]
|
||||
})
|
||||
const formRules = reactive({
|
||||
groupIds: [{ required: true, message: '设备分组不能为空', trigger: 'change' }]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
const deviceGroups = ref<any[]>([]) // 设备分组列表
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (ids: number[]) => {
|
||||
dialogVisible.value = true
|
||||
resetForm()
|
||||
formData.value.ids = ids
|
||||
|
||||
// 加载设备分组列表
|
||||
try {
|
||||
deviceGroups.value = await DeviceGroupApi.getSimpleDeviceGroupList()
|
||||
} catch (error) {
|
||||
console.error('加载设备分组列表失败:', error)
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
await formRef.value.validate()
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
await DeviceApi.updateDeviceGroup(formData.value)
|
||||
message.success(t('common.updateSuccess'))
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
ids: [],
|
||||
groupIds: []
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,469 @@
|
|||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="产品" prop="productId">
|
||||
<el-select
|
||||
v-model="queryParams.productId"
|
||||
placeholder="请选择产品"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
:label="product.name"
|
||||
:value="product.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="DeviceName" prop="deviceName">
|
||||
<el-input
|
||||
v-model="queryParams.deviceName"
|
||||
placeholder="请输入 DeviceName"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注名称" prop="nickname">
|
||||
<el-input
|
||||
v-model="queryParams.nickname"
|
||||
placeholder="请输入备注名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型" prop="deviceType">
|
||||
<el-select
|
||||
v-model="queryParams.deviceType"
|
||||
placeholder="请选择设备类型"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="请选择设备状态"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备分组" prop="groupId">
|
||||
<el-select
|
||||
v-model="queryParams.groupId"
|
||||
placeholder="请选择设备分组"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="group in deviceGroups"
|
||||
:key="group.id"
|
||||
:label="group.name"
|
||||
:value="group.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="float-right !mr-0 !mb-0">
|
||||
<el-button-group>
|
||||
<el-button :type="viewMode === 'card' ? 'primary' : 'default'" @click="viewMode = 'card'">
|
||||
<Icon icon="ep:grid" />
|
||||
</el-button>
|
||||
<el-button :type="viewMode === 'list' ? 'primary' : 'default'" @click="viewMode = 'list'">
|
||||
<Icon icon="ep:list" />
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon icon="ep:search" class="mr-5px" />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon icon="ep:refresh" class="mr-5px" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['iot:device:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" />
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
v-hasPermi="['iot:device:export']"
|
||||
>
|
||||
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
@click="openGroupForm"
|
||||
:disabled="selectedIds.length === 0"
|
||||
v-hasPermi="['iot:device:update']"
|
||||
>
|
||||
<Icon icon="ep:folder-add" class="mr-5px" /> 添加到分组
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
@click="handleDeleteList"
|
||||
:disabled="selectedIds.length === 0"
|
||||
v-hasPermi="['iot:device:delete']"
|
||||
>
|
||||
<Icon icon="ep:delete" class="mr-5px" /> 批量删除
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<template v-if="viewMode === 'card'">
|
||||
<el-row :gutter="16">
|
||||
<el-col v-for="item in list" :key="item.id" :xs="24" :sm="12" :md="12" :lg="6" class="mb-4">
|
||||
<el-card class="h-full transition-colors" :body-style="{ padding: '0' }">
|
||||
<div class="p-4">
|
||||
<!-- 标题区域 -->
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="mr-2.5 flex items-center">
|
||||
<el-image :src="defaultIconUrl" class="w-[18px] h-[18px]" />
|
||||
</div>
|
||||
<div class="text-[16px] font-600">{{ item.deviceName }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 信息区域 -->
|
||||
<div class="flex items-center text-[14px]">
|
||||
<div class="flex-1">
|
||||
<div class="mb-2.5 last:mb-0">
|
||||
<span class="text-[#717c8e] mr-2.5">所属产品</span>
|
||||
<span class="text-[#0070ff]">{{
|
||||
products.find((p) => p.id === item.productId)?.name
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="mb-2.5 last:mb-0">
|
||||
<span class="text-[#717c8e] mr-2.5">设备类型</span>
|
||||
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="item.deviceType" />
|
||||
</div>
|
||||
<div class="mb-2.5 last:mb-0">
|
||||
<span class="text-[#717c8e] mr-2.5">DeviceKey</span>
|
||||
<span class="text-[#0b1d30]">{{ item.deviceKey }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[100px] h-[100px]">
|
||||
<el-image :src="defaultPicUrl" class="w-full h-full" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<el-divider class="!my-3" />
|
||||
|
||||
<!-- 按钮组 -->
|
||||
<div class="flex items-center px-0">
|
||||
<el-button
|
||||
class="flex-1 !px-2 !h-[32px] text-[13px]"
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('update', item.id)"
|
||||
v-hasPermi="['iot:device:update']"
|
||||
>
|
||||
<Icon icon="ep:edit-pen" class="mr-1" />
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]"
|
||||
type="warning"
|
||||
plain
|
||||
@click="openDetail(item.id)"
|
||||
>
|
||||
<Icon icon="ep:view" class="mr-1" />
|
||||
详情
|
||||
</el-button>
|
||||
<el-button
|
||||
class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]"
|
||||
type="info"
|
||||
plain
|
||||
@click="openLog(item.id)"
|
||||
>
|
||||
<Icon icon="ep:tickets" class="mr-1" />
|
||||
日志
|
||||
</el-button>
|
||||
<div class="mx-[10px] h-[20px] w-[1px] bg-[#dcdfe6]"></div>
|
||||
<el-button
|
||||
class="!px-2 !h-[32px] text-[13px]"
|
||||
type="danger"
|
||||
plain
|
||||
@click="handleDelete(item.id)"
|
||||
v-hasPermi="['iot:device:delete']"
|
||||
>
|
||||
<Icon icon="ep:delete" />
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<!-- 列表视图 -->
|
||||
<el-table
|
||||
v-else
|
||||
v-loading="loading"
|
||||
:data="list"
|
||||
:stripe="true"
|
||||
:show-overflow-tooltip="true"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column label="DeviceName" align="center" prop="deviceName">
|
||||
<template #default="scope">
|
||||
<el-link @click="openDetail(scope.row.id)">{{ scope.row.deviceName }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注名称" align="center" prop="nickname" />
|
||||
<el-table-column label="所属产品" align="center" prop="productId">
|
||||
<template #default="scope">
|
||||
{{ products.find((p) => p.id === scope.row.productId)?.name || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备类型" align="center" prop="deviceType">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="scope.row.deviceType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="所属分组" align="center" prop="groupId">
|
||||
<template #default="scope">
|
||||
<template v-if="scope.row.groupIds?.length">
|
||||
<el-tag v-for="id in scope.row.groupIds" :key="id" class="ml-5px" size="small">
|
||||
{{ deviceGroups.find((g) => g.id === id)?.name }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.IOT_DEVICE_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="最后上线时间"
|
||||
align="center"
|
||||
prop="lastOnlineTime"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="操作" align="center" min-width="120px">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openDetail(scope.row.id)"
|
||||
v-hasPermi="['iot:product:query']"
|
||||
>
|
||||
查看
|
||||
</el-button>
|
||||
<el-button link type="primary" @click="openLog(scope.row.id)"> 日志 </el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
v-hasPermi="['iot:device:update']"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
v-hasPermi="['iot:device:delete']"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<DeviceForm ref="formRef" @success="getList" />
|
||||
<!-- 分组表单组件 -->
|
||||
<DeviceGroupForm ref="groupFormRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import { DeviceApi, DeviceVO } from '@/api/iot/device'
|
||||
import DeviceForm from './DeviceForm.vue'
|
||||
import { ProductApi, ProductVO } from '@/api/iot/product/product'
|
||||
import { DeviceGroupApi, DeviceGroupVO } from '@/api/iot/device/group'
|
||||
import download from '@/utils/download'
|
||||
import DeviceGroupForm from './DeviceGroupForm.vue'
|
||||
|
||||
/** IoT 设备列表 */
|
||||
defineOptions({ name: 'IoTDevice' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<DeviceVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
deviceName: undefined,
|
||||
productId: undefined,
|
||||
deviceType: undefined,
|
||||
nickname: undefined,
|
||||
status: undefined,
|
||||
groupId: undefined
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出加载状态
|
||||
const products = ref<ProductVO[]>([]) // 产品列表
|
||||
const deviceGroups = ref<DeviceGroupVO[]>([]) // 设备分组列表
|
||||
const selectedIds = ref<number[]>([]) // 选中的设备编号数组
|
||||
const viewMode = ref<'card' | 'list'>('card') // 视图模式状态
|
||||
const defaultPicUrl = ref('/src/assets/imgs/iot/device.png') // 默认设备图片
|
||||
const defaultIconUrl = ref('/src/assets/svgs/iot/card-fill.svg') // 默认设备图标
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await DeviceApi.getDevicePage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
selectedIds.value = [] // 清空选择
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 打开详情 */
|
||||
const { push } = useRouter()
|
||||
const openDetail = (id: number) => {
|
||||
push({ name: 'IoTDeviceDetail', params: { id } })
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 起删除
|
||||
await DeviceApi.deleteDevice(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 导出方法 */
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
// 导出的二次确认
|
||||
await message.exportConfirm()
|
||||
// 发起导出
|
||||
exportLoading.value = true
|
||||
const data = await DeviceApi.exportDeviceExcel(queryParams)
|
||||
download.excel(data, '物联网设备.xls')
|
||||
} catch {
|
||||
} finally {
|
||||
exportLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: DeviceVO[]) => {
|
||||
selectedIds.value = selection.map((item) => item.id)
|
||||
}
|
||||
|
||||
/** 批量删除按钮操作 */
|
||||
const handleDeleteList = async () => {
|
||||
try {
|
||||
await message.delConfirm()
|
||||
// 执行批量删除
|
||||
await DeviceApi.deleteDeviceList(selectedIds.value)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 添加到分组操作 */
|
||||
const groupFormRef = ref()
|
||||
const openGroupForm = () => {
|
||||
groupFormRef.value.open(selectedIds.value)
|
||||
}
|
||||
|
||||
/** 打开日志 */
|
||||
const openLog = (id: number) => {
|
||||
push({ name: 'IoTDeviceDetail', params: { id }, query: { tab: 'log' } })
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(async () => {
|
||||
getList()
|
||||
|
||||
// 获取产品列表
|
||||
products.value = await ProductApi.getSimpleProductList()
|
||||
// 获取分组列表
|
||||
deviceGroups.value = await DeviceGroupApi.getSimpleDeviceGroupList()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item label="分组名字" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入分组名字" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分组状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="分组描述" prop="description">
|
||||
<el-input type="textarea" v-model="formData.description" placeholder="请输入分组描述" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { DeviceGroupApi, DeviceGroupVO } from '@/api/iot/device/group'
|
||||
|
||||
/** IoT 设备分组 表单 */
|
||||
defineOptions({ name: 'IoTDeviceGroupForm' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
status: undefined,
|
||||
description: undefined
|
||||
})
|
||||
const formRules = reactive({
|
||||
name: [{ required: true, message: '分组名字不能为空', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '分组状态不能为空', trigger: 'blur' }]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await DeviceGroupApi.getDeviceGroup(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
await formRef.value.validate()
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = formData.value as unknown as DeviceGroupVO
|
||||
if (formType.value === 'create') {
|
||||
await DeviceGroupApi.createDeviceGroup(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await DeviceGroupApi.updateDeviceGroup(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
status: undefined,
|
||||
description: undefined
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="分组名字" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入分组名字"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间" prop="createTime">
|
||||
<el-date-picker
|
||||
v-model="queryParams.createTime"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||
class="!w-220px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['iot:device-group:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column label="分组 ID" align="center" prop="id" />
|
||||
<el-table-column label="分组名字" align="center" prop="name" />
|
||||
<el-table-column label="分组状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="分组描述" align="center" prop="description" />
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="设备数量" align="center" prop="deviceCount" />
|
||||
<el-table-column label="操作" align="center" min-width="120px">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
v-hasPermi="['iot:device-group:update']"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
v-hasPermi="['iot:device-group:delete']"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<DeviceGroupForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import { DeviceGroupApi, DeviceGroupVO } from '@/api/iot/device/group'
|
||||
import DeviceGroupForm from './DeviceGroupForm.vue'
|
||||
|
||||
/** IoT 设备分组列表 */
|
||||
defineOptions({ name: 'IoTDeviceGroup' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<DeviceGroupVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
name: undefined,
|
||||
createTime: []
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await DeviceGroupApi.getDeviceGroupPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await DeviceGroupApi.deleteDeviceGroup(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,267 +0,0 @@
|
|||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="产品" prop="productId">
|
||||
<el-select
|
||||
v-model="queryParams.productId"
|
||||
placeholder="请选择产品"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
:label="product.name"
|
||||
:value="product.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="DeviceName" prop="deviceName">
|
||||
<el-input
|
||||
v-model="queryParams.deviceName"
|
||||
placeholder="请输入 DeviceName"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注名称" prop="nickname">
|
||||
<el-input
|
||||
v-model="queryParams.nickname"
|
||||
placeholder="请输入备注名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型" prop="deviceType">
|
||||
<el-select
|
||||
v-model="queryParams.deviceType"
|
||||
placeholder="请选择设备类型"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="请选择设备状态"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon icon="ep:search" class="mr-5px" />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon icon="ep:refresh" class="mr-5px" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['iot:device:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" />
|
||||
新增
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
<el-table-column label="DeviceName" align="center" prop="deviceName">
|
||||
<template #default="scope">
|
||||
<el-link @click="openDetail(scope.row.id)">{{ scope.row.deviceName }}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="备注名称" align="center" prop="nickname" />
|
||||
<el-table-column label="设备所属产品" align="center" prop="productId">
|
||||
<template #default="scope">
|
||||
{{ productMap[scope.row.productId] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备类型" align="center" prop="deviceType">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="scope.row.deviceType" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.IOT_DEVICE_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="最后上线时间"
|
||||
align="center"
|
||||
prop="lastOnlineTime"
|
||||
:formatter="dateFormatter"
|
||||
width="180px"
|
||||
/>
|
||||
<el-table-column label="操作" align="center" min-width="120px">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openDetail(scope.row.id)"
|
||||
v-hasPermi="['iot:product:query']"
|
||||
>
|
||||
查看
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
v-hasPermi="['iot:device:update']"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
v-hasPermi="['iot:device:delete']"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 表单弹窗：添加/修改 -->
|
||||
<DeviceForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import { DeviceApi, DeviceVO } from '@/api/iot/device'
|
||||
import DeviceForm from './DeviceForm.vue'
|
||||
import { ProductApi } from '@/api/iot/product/product'
|
||||
|
||||
/** IoT 设备 列表 */
|
||||
defineOptions({ name: 'IoTDevice' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<DeviceVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
deviceName: undefined,
|
||||
productId: undefined,
|
||||
deviceType: undefined,
|
||||
nickname: undefined,
|
||||
status: undefined
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
|
||||
/** 产品标号和名称的映射 */
|
||||
const productMap = reactive({})
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await DeviceApi.getDevicePage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
// 获取产品ID列表
|
||||
const productIds = [...new Set(data.list.map((device) => device.productId))]
|
||||
// 获取产品名称
|
||||
// TODO @haohao：最好后端拼接哈
|
||||
const products = await Promise.all(productIds.map((id) => ProductApi.getProduct(id)))
|
||||
products.forEach((product) => {
|
||||
productMap[product.id] = product.name
|
||||
})
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 打开详情 */
|
||||
const { push } = useRouter()
|
||||
const openDetail = (id: number) => {
|
||||
push({ name: 'IoTDeviceDetail', params: { id } })
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await DeviceApi.deleteDevice(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 查询字典下拉列表 */
|
||||
const products = ref()
|
||||
const getProducts = async () => {
|
||||
products.value = await ProductApi.getSimpleProductList()
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
getProducts()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -7,12 +7,18 @@
|
|||
label-width="110px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item label="产品标识" prop="productKey">
|
||||
<el-form-item label="ProductKey" prop="productKey">
|
||||
<el-input
|
||||
v-model="formData.productKey"
|
||||
placeholder="请输入产品标识"
|
||||
placeholder="请输入 ProductKey"
|
||||
:readonly="formType === 'update'"
|
||||
/>
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="generateProductKey" :disabled="formType === 'update'">
|
||||
重新生成
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入产品名称" />
|
||||
|
|
@ -145,7 +151,7 @@ const formData = ref({
|
|||
validateType: ValidateTypeEnum.WEAK
|
||||
})
|
||||
const formRules = reactive({
|
||||
productKey: [{ required: true, message: '产品标识不能为空', trigger: 'blur' }],
|
||||
productKey: [{ required: true, message: 'ProductKey 不能为空', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
|
||||
categoryId: [{ required: true, message: '产品分类不能为空', trigger: 'change' }],
|
||||
deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
|
||||
|
|
@ -184,7 +190,7 @@ const open = async (type: string, id?: number) => {
|
|||
}
|
||||
} else {
|
||||
// 新增时，生成随机 productKey
|
||||
formData.value.productKey = generateRandomStr(16)
|
||||
generateProductKey()
|
||||
}
|
||||
// 加载分类列表
|
||||
categoryList.value = await ProductCategoryApi.getSimpleProductCategoryList()
|
||||
|
|
@ -231,4 +237,9 @@ const resetForm = () => {
|
|||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
/** 生成 ProductKey */
|
||||
const generateProductKey = () => {
|
||||
formData.value.productKey = generateRandomStr(16)
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
<el-tabs>
|
||||
<el-tab-pane label="基础通信 Topic">
|
||||
<Table
|
||||
:columns="columns1"
|
||||
:data="data1"
|
||||
:span-method="createSpanMethod(data1)"
|
||||
:columns="basicColumn"
|
||||
:data="basicData"
|
||||
:span-method="createSpanMethod(basicData)"
|
||||
align="left"
|
||||
headerAlign="left"
|
||||
border="true"
|
||||
|
|
@ -13,9 +13,9 @@
|
|||
</el-tab-pane>
|
||||
<el-tab-pane label="物模型通信 Topic">
|
||||
<Table
|
||||
:columns="columns2"
|
||||
:data="data2"
|
||||
:span-method="createSpanMethod(data2)"
|
||||
:columns="functionColumn"
|
||||
:data="functionData"
|
||||
:span-method="createSpanMethod(functionData)"
|
||||
align="left"
|
||||
headerAlign="left"
|
||||
border="true"
|
||||
|
|
@ -29,23 +29,18 @@ import { ProductVO } from '@/api/iot/product/product'
|
|||
|
||||
const props = defineProps<{ product: ProductVO }>()
|
||||
|
||||
// 定义列
|
||||
const columns1 = reactive([
|
||||
// TODO 芋艿：不确定未来会不会改，所以先写死
|
||||
|
||||
// 基础通信 Topic 列
|
||||
const basicColumn = reactive([
|
||||
{ label: '功能', field: 'function', width: 150 },
|
||||
{ label: 'Topic 类', field: 'topicClass', width: 800 },
|
||||
{ label: '操作权限', field: 'operationPermission', width: 100 },
|
||||
{ label: '描述', field: 'description' }
|
||||
])
|
||||
|
||||
const columns2 = reactive([
|
||||
{ label: '功能', field: 'function', width: 150 },
|
||||
{ label: 'Topic 类', field: 'topicClass', width: 800 },
|
||||
{ label: '操作权限', field: 'operationPermission', width: 100 },
|
||||
{ label: '描述', field: 'description' }
|
||||
])
|
||||
|
||||
// TODO @haohao：这个，有没可能写到一个枚举里，方便后续维护？ /Users/yunai/Java/yudao-ui-admin-vue3/src/views/ai/utils/constants.ts
|
||||
const data1 = computed(() => {
|
||||
// 基础通信 Topic 数据
|
||||
const basicData = computed(() => {
|
||||
if (!props.product || !props.product.productKey) return []
|
||||
return [
|
||||
{
|
||||
|
|
@ -147,7 +142,16 @@ const data1 = computed(() => {
|
|||
]
|
||||
})
|
||||
|
||||
const data2 = computed(() => {
|
||||
// 物模型通信 Topic 列
|
||||
const functionColumn = reactive([
|
||||
{ label: '功能', field: 'function', width: 150 },
|
||||
{ label: 'Topic 类', field: 'topicClass', width: 800 },
|
||||
{ label: '操作权限', field: 'operationPermission', width: 100 },
|
||||
{ label: '描述', field: 'description' }
|
||||
])
|
||||
|
||||
// 物模型通信 Topic 数据
|
||||
const functionData = computed(() => {
|
||||
if (!props.product || !props.product.productKey) return []
|
||||
return [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ const message = useMessage()
|
|||
const id = Number(route.params.id) // 编号
|
||||
const loading = ref(true) // 加载中
|
||||
const product = ref<ProductVO>({} as ProductVO) // 详情
|
||||
const activeTab = ref('info') // 默认激活的标签页
|
||||
const activeTab = ref('info') // 默认为 info 标签页
|
||||
|
||||
provide(IOT_PROVIDE_KEY.PRODUCT, product) // 提供产品信息给产品信息详情页的所有子组件
|
||||
|
||||
|
|
@ -69,6 +69,11 @@ onMounted(async () => {
|
|||
return
|
||||
}
|
||||
await getProductData(id)
|
||||
// 处理 tab 参数
|
||||
const { tab } = route.query
|
||||
if (tab) {
|
||||
activeTab.value = tab as string
|
||||
}
|
||||
// 查询设备数量
|
||||
if (product.value.id) {
|
||||
product.value.deviceCount = await getDeviceCount(product.value.id)
|
||||
|
|
|
|||
|
|
@ -63,52 +63,89 @@
|
|||
|
||||
<!-- 卡片视图 -->
|
||||
<ContentWrap>
|
||||
<div
|
||||
v-if="viewMode === 'card'"
|
||||
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
|
||||
>
|
||||
<el-card
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
class="cursor-pointer hover:shadow-lg transition-shadow"
|
||||
@click="openDetail(item.id)"
|
||||
>
|
||||
<div class="flex items-center mb-4">
|
||||
<el-image
|
||||
:src="item.picUrl || '/src/assets/default-product.png'"
|
||||
class="w-12 h-12 mr-4"
|
||||
fit="cover"
|
||||
/>
|
||||
<div class="flex-1">
|
||||
<div class="font-bold text-lg">{{ item.name }}</div>
|
||||
<div class="text-gray-500 text-sm">{{ item.productKey }}</div>
|
||||
<el-row v-if="viewMode === 'card'" :gutter="16">
|
||||
<el-col v-for="item in list" :key="item.id" :xs="24" :sm="12" :md="12" :lg="6" class="mb-4">
|
||||
<el-card class="h-full transition-colors" :body-style="{ padding: '0' }">
|
||||
<!-- 内容区域 -->
|
||||
<div class="p-4">
|
||||
<!-- 标题区域 -->
|
||||
<div class="flex items-center mb-3">
|
||||
<div class="mr-2.5 flex items-center">
|
||||
<el-image :src="item.icon || defaultIconUrl" class="w-[35px] h-[35px]" />
|
||||
</div>
|
||||
<div class="text-[16px] font-600">{{ item.name }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 信息区域 -->
|
||||
<div class="flex items-center text-[14px]">
|
||||
<div class="flex-1">
|
||||
<div class="mb-2.5 last:mb-0">
|
||||
<span class="text-[#717c8e] mr-2.5">产品分类</span>
|
||||
<span class="text-[#0070ff]">{{ item.categoryName }}</span>
|
||||
</div>
|
||||
<div class="mb-2.5 last:mb-0">
|
||||
<span class="text-[#717c8e] mr-2.5">产品类型</span>
|
||||
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="item.deviceType" />
|
||||
</div>
|
||||
<div class="mb-2.5 last:mb-0">
|
||||
<span class="text-[#717c8e] mr-2.5">产品标识</span>
|
||||
<span class="text-[#0b1d30]">{{ item.productKey }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[100px] h-[100px]">
|
||||
<el-image :src="item.picUrl || defaultPicUrl" class="w-full h-full" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<el-divider class="!my-3" />
|
||||
|
||||
<!-- 按钮组 -->
|
||||
<div class="flex items-center px-0">
|
||||
<el-button
|
||||
class="flex-1 !px-2 !h-[32px] text-[13px]"
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('update', item.id)"
|
||||
v-hasPermi="['iot:product:update']"
|
||||
>
|
||||
<Icon icon="ep:edit-pen" class="mr-1" />
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]"
|
||||
type="warning"
|
||||
plain
|
||||
@click="openDetail(item.id)"
|
||||
>
|
||||
<Icon icon="ep:view" class="mr-1" />
|
||||
详情
|
||||
</el-button>
|
||||
<el-button
|
||||
class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]"
|
||||
type="success"
|
||||
plain
|
||||
@click="openObjectModel(item)"
|
||||
>
|
||||
<Icon icon="ep:scale-to-original" class="mr-1" />
|
||||
物模型
|
||||
</el-button>
|
||||
<div class="mx-[10px] h-[20px] w-[1px] bg-[#dcdfe6]"></div>
|
||||
<el-button
|
||||
class="!px-2 !h-[32px] text-[13px]"
|
||||
type="danger"
|
||||
plain
|
||||
@click="handleDelete(item.id)"
|
||||
v-hasPermi="['iot:product:delete']"
|
||||
:disabled="item.status === 1"
|
||||
>
|
||||
<Icon icon="ep:delete" />
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm text-gray-500">
|
||||
<span>{{ item.categoryName }}</span>
|
||||
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="item.deviceType" />
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click.stop="openForm('update', item.id)"
|
||||
v-hasPermi="['iot:product:update']"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click.stop="handleDelete(item.id)"
|
||||
v-hasPermi="['iot:product:delete']"
|
||||
:disabled="item.status === 1"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 列表视图 -->
|
||||
<el-table v-else v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
|
||||
|
|
@ -199,14 +236,19 @@ import { ProductApi, ProductVO } from '@/api/iot/product/product'
|
|||
import ProductForm from './ProductForm.vue'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import download from '@/utils/download'
|
||||
import defaultPicUrl from '@/assets/imgs/iot/device.png'
|
||||
import defaultIconUrl from '@/assets/svgs/iot/cube.svg'
|
||||
|
||||
/** iot 产品列表 */
|
||||
defineOptions({ name: 'IoTProduct' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
const { push } = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const activeName = ref('info') // 当前激活的标签页
|
||||
const list = ref<ProductVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const queryParams = reactive({
|
||||
|
|
@ -216,7 +258,7 @@ const queryParams = reactive({
|
|||
productKey: undefined
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
const exportLoading = ref(false) // 导出加载中
|
||||
const viewMode = ref<'card' | 'list'>('card') // 视图模式状态
|
||||
|
||||
/** 查询列表 */
|
||||
|
|
@ -250,11 +292,19 @@ const openForm = (type: string, id?: number) => {
|
|||
}
|
||||
|
||||
/** 打开详情 */
|
||||
const { push } = useRouter()
|
||||
const openDetail = (id: number) => {
|
||||
push({ name: 'IoTProductDetail', params: { id } })
|
||||
}
|
||||
|
||||
/** 打开物模型 */
|
||||
const openObjectModel = (item: ProductVO) => {
|
||||
push({
|
||||
name: 'IoTProductDetail',
|
||||
params: { id: item.id },
|
||||
query: { tab: 'function' }
|
||||
})
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
|
|
@ -286,5 +336,10 @@ const handleExport = async () => {
|
|||
/** 初始化 **/
|
||||
onMounted(() => {
|
||||
getList()
|
||||
// 处理 tab 参数
|
||||
const { tab } = route.query
|
||||
if (tab) {
|
||||
activeName.value = tab as string
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue