Skip to content

Y
yudao-admin-ui
Commit 2020687a by licheng
Options

chore: 删除iot模块

parent 0ff65517
Showing with 0 additions and 8208 deletions
src/api/iot/device/device/index.ts deleted 100644 → 0
import request from '@/config/axios'
// IoT 设备 VO
export interface DeviceVO {
id: number // 设备 ID，主键，自增
deviceKey: string // 设备唯一标识符
deviceName: string // 设备名称
productId: number // 产品编号
productKey: string // 产品标识
deviceType: number // 设备类型
nickname: string // 设备备注名称
gatewayId: number // 网关设备 ID
state: number // 设备状态
onlineTime: Date // 最后上线时间
offlineTime: Date // 最后离线时间
activeTime: Date // 设备激活时间
createTime: Date // 创建时间
ip: string // 设备的 IP 地址
firmwareVersion: string // 设备的固件版本
deviceSecret: string // 设备密钥，用于设备认证，需安全存储
mqttClientId: string // MQTT 客户端 ID
mqttUsername: string // MQTT 用户名
mqttPassword: string // MQTT 密码
authType: string // 认证类型
latitude: number // 设备位置的纬度
longitude: number // 设备位置的经度
areaId: number // 地区编码
address: string // 设备详细地址
serialNumber: string // 设备序列号
config: string // 设备配置
groupIds?: number[] // 添加分组 ID
}
// IoT 设备数据 VO
export interface DeviceDataVO {
deviceId: number // 设备编号
thinkModelFunctionId: number // 物模型编号
productKey: string // 产品标识
deviceName: string // 设备名称
identifier: string // 属性标识符
name: string // 属性名称
dataType: string // 数据类型
updateTime: Date // 更新时间
value: string // 最新值
}
// IoT 设备数据 VO
export interface DeviceHistoryDataVO {
time: number // 时间
data: string // 数据
}
// IoT 设备状态枚举
export enum DeviceStateEnum {
INACTIVE = 0, // 未激活
ONLINE = 1, // 在线
OFFLINE = 2 // 离线
}
// IoT 设备上行 Request VO
export interface IotDeviceUpstreamReqVO {
id: number // 设备编号
type: string // 消息类型
identifier: string // 标识符
data: any // 请求参数
}
// IoT 设备下行 Request VO
export interface IotDeviceDownstreamReqVO {
id: number // 设备编号
type: string // 消息类型
identifier: string // 标识符
data: any // 请求参数
}
// MQTT 连接参数 VO
export interface MqttConnectionParamsVO {
mqttClientId: string // MQTT 客户端 ID
mqttUsername: string // MQTT 用户名
mqttPassword: string // MQTT 密码
}
// 设备 API
export const DeviceApi = {
// 查询设备分页
getDevicePage: async (params: any) => {
return await request.get({ url: `/iot/device/page`, params })
},
// 查询设备详情
getDevice: async (id: number) => {
return await request.get({ url: `/iot/device/get?id=` + id })
},
// 新增设备
createDevice: async (data: DeviceVO) => {
return await request.post({ url: `/iot/device/create`, data })
},
// 修改设备
updateDevice: async (data: DeviceVO) => {
return await request.put({ url: `/iot/device/update`, 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 } })
},
// 获取导入模板
importDeviceTemplate: async () => {
return await request.download({ url: `/iot/device/get-import-template` })
},
// 设备上行
upstreamDevice: async (data: IotDeviceUpstreamReqVO) => {
return await request.post({ url: `/iot/device/upstream`, data })
},
// 设备下行
downstreamDevice: async (data: IotDeviceDownstreamReqVO) => {
return await request.post({ url: `/iot/device/downstream`, data })
},
// 获取设备属性最新数据
getLatestDeviceProperties: async (params: any) => {
return await request.get({ url: `/iot/device/property/latest`, params })
},
// 获取设备属性历史数据
getHistoryDevicePropertyPage: async (params: any) => {
return await request.get({ url: `/iot/device/property/history-page`, params })
},
// 查询设备日志分页
getDeviceLogPage: async (params: any) => {
return await request.get({ url: `/iot/device/log/page`, params })
},
// 获取设备MQTT连接参数
getMqttConnectionParams: async (deviceId: number) => {
return await request.get({ url: `/iot/device/mqtt-connection-params`, params: { deviceId } })
}
}
src/api/iot/device/group/index.ts deleted 100644 → 0
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 = {
// 查询设备分组分页
getDeviceGroupPage: async (params: any) => {
return await request.get({ url: `/iot/device-group/page`, params })
},
// 查询设备分组详情
getDeviceGroup: async (id: number) => {
return await request.get({ url: `/iot/device-group/get?id=` + id })
},
// 新增设备分组
createDeviceGroup: async (data: DeviceGroupVO) => {
return await request.post({ url: `/iot/device-group/create`, data })
},
// 修改设备分组
updateDeviceGroup: async (data: DeviceGroupVO) => {
return await request.put({ url: `/iot/device-group/update`, data })
},
// 删除设备分组
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` })
}
}
src/api/iot/plugin/index.ts deleted 100644 → 0
import request from '@/config/axios'
// IoT 插件配置 VO
export interface PluginConfigVO {
id: number // 主键ID
pluginKey: string // 插件标识
name: string // 插件名称
description: string // 描述
deployType: number // 部署方式
fileName: string // 插件包文件名
version: string // 插件版本
type: number // 插件类型
protocol: string // 设备插件协议类型
status: number // 状态
configSchema: string // 插件配置项描述信息
config: string // 插件配置信息
script: string // 插件脚本
}
// IoT 插件配置 API
export const PluginConfigApi = {
// 查询插件配置分页
getPluginConfigPage: async (params: any) => {
return await request.get({ url: `/iot/plugin-config/page`, params })
},
// 查询插件配置详情
getPluginConfig: async (id: number) => {
return await request.get({ url: `/iot/plugin-config/get?id=` + id })
},
// 新增插件配置
createPluginConfig: async (data: PluginConfigVO) => {
return await request.post({ url: `/iot/plugin-config/create`, data })
},
// 修改插件配置
updatePluginConfig: async (data: PluginConfigVO) => {
return await request.put({ url: `/iot/plugin-config/update`, data })
},
// 删除插件配置
deletePluginConfig: async (id: number) => {
return await request.delete({ url: `/iot/plugin-config/delete?id=` + id })
},
// 修改插件状态
updatePluginStatus: async (data: any) => {
return await request.put({ url: `/iot/plugin-config/update-status`, data })
}
}
src/api/iot/product/category/index.ts deleted 100644 → 0
import request from '@/config/axios'
// IoT 产品分类 VO
export interface ProductCategoryVO {
id: number // 分类 ID
name: string // 分类名字
sort: number // 分类排序
status: number // 分类状态
description: string // 分类描述
}
// IoT 产品分类 API
export const ProductCategoryApi = {
// 查询产品分类分页
getProductCategoryPage: async (params: any) => {
return await request.get({ url: `/iot/product-category/page`, params })
},
// 查询产品分类详情
getProductCategory: async (id: number) => {
return await request.get({ url: `/iot/product-category/get?id=` + id })
},
// 新增产品分类
createProductCategory: async (data: ProductCategoryVO) => {
return await request.post({ url: `/iot/product-category/create`, data })
},
// 修改产品分类
updateProductCategory: async (data: ProductCategoryVO) => {
return await request.put({ url: `/iot/product-category/update`, data })
},
// 删除产品分类
deleteProductCategory: async (id: number) => {
return await request.delete({ url: `/iot/product-category/delete?id=` + id })
},
/** 获取产品分类精简列表 */
getSimpleProductCategoryList: () => {
return request.get({ url: '/iot/product-category/simple-list' })
}
}
src/api/iot/product/product/index.ts deleted 100644 → 0
import request from '@/config/axios'
// IoT 产品 VO
export interface ProductVO {
id: number // 产品编号
name: string // 产品名称
productKey: string // 产品标识
protocolId: number // 协议编号
categoryId: number // 产品所属品类标识符
categoryName?: string // 产品所属品类名称
icon: string // 产品图标
picUrl: string // 产品图片
description: string // 产品描述
validateType: number // 数据校验级别
status: number // 产品状态
deviceType: number // 设备类型
netType: number // 联网方式
protocolType: number // 接入网关协议
dataFormat: number // 数据格式
deviceCount: number // 设备数量
createTime: Date // 创建时间
}
// IOT 数据校验级别枚举类
export enum ValidateTypeEnum {
WEAK = 0, // 弱校验
NONE = 1 // 免校验
}
// IOT 产品设备类型枚举类 0: 直连设备, 1: 网关子设备, 2: 网关设备
export enum DeviceTypeEnum {
DEVICE = 0, // 直连设备
GATEWAY_SUB = 1, // 网关子设备
GATEWAY = 2 // 网关设备
}
// IOT 数据格式枚举类
export enum DataFormatEnum {
JSON = 0, // 标准数据格式（JSON）
CUSTOMIZE = 1 // 透传/自定义
}
// IoT 产品 API
export const ProductApi = {
// 查询产品分页
getProductPage: async (params: any) => {
return await request.get({ url: `/iot/product/page`, params })
},
// 查询产品详情
getProduct: async (id: number) => {
return await request.get({ url: `/iot/product/get?id=` + id })
},
// 新增产品
createProduct: async (data: ProductVO) => {
return await request.post({ url: `/iot/product/create`, data })
},
// 修改产品
updateProduct: async (data: ProductVO) => {
return await request.put({ url: `/iot/product/update`, data })
},
// 删除产品
deleteProduct: async (id: number) => {
return await request.delete({ url: `/iot/product/delete?id=` + id })
},
// 导出产品 Excel
exportProduct: async (params) => {
return await request.download({ url: `/iot/product/export-excel`, params })
},
// 更新产品状态
updateProductStatus: async (id: number, status: number) => {
return await request.put({ url: `/iot/product/update-status?id=` + id + `&status=` + status })
},
// 查询产品（精简）列表
getSimpleProductList() {
return request.get({ url: '/iot/product/simple-list' })
}
}
src/api/iot/rule/databridge/index.ts deleted 100644 → 0
import request from '@/config/axios'
// IoT 数据桥梁 VO
export interface DataBridgeVO {
id?: number // 桥梁编号
name?: string // 桥梁名称
description?: string // 桥梁描述
status?: number // 桥梁状态
direction?: number // 桥梁方向
type?: number // 桥梁类型
config?:
| HttpConfig
| MqttConfig
| RocketMQConfig
| KafkaMQConfig
| RabbitMQConfig
| RedisStreamMQConfig // 桥梁配置
}
interface Config {
type: string
}
/** HTTP 配置 */
export interface HttpConfig extends Config {
url: string
method: string
headers: Record<string, string>
query: Record<string, string>
body: string
}
/** MQTT 配置 */
export interface MqttConfig extends Config {
url: string
username: string
password: string
clientId: string
topic: string
}
/** RocketMQ 配置 */
export interface RocketMQConfig extends Config {
nameServer: string
accessKey: string
secretKey: string
group: string
topic: string
tags: string
}
/** Kafka 配置 */
export interface KafkaMQConfig extends Config {
bootstrapServers: string
username: string
password: string
ssl: boolean
topic: string
}
/** RabbitMQ 配置 */
export interface RabbitMQConfig extends Config {
host: string
port: number
virtualHost: string
username: string
password: string
exchange: string
routingKey: string
queue: string
}
/** Redis Stream MQ 配置 */
export interface RedisStreamMQConfig extends Config {
host: string
port: number
password: string
database: number
topic: string
}
/** 数据桥梁类型 */
// TODO @puhui999：枚举用 number 可以么？
export const IoTDataBridgeConfigType = {
HTTP: '1',
TCP: '2',
WEBSOCKET: '3',
MQTT: '10',
DATABASE: '20',
REDIS_STREAM: '21',
ROCKETMQ: '30',
RABBITMQ: '31',
KAFKA: '32'
} as const
// 数据桥梁 API
export const DataBridgeApi = {
// 查询数据桥梁分页
getDataBridgePage: async (params: any) => {
return await request.get({ url: `/iot/data-bridge/page`, params })
},
// 查询数据桥梁详情
getDataBridge: async (id: number) => {
return await request.get({ url: `/iot/data-bridge/get?id=` + id })
},
// 新增数据桥梁
createDataBridge: async (data: DataBridgeVO) => {
return await request.post({ url: `/iot/data-bridge/create`, data })
},
// 修改数据桥梁
updateDataBridge: async (data: DataBridgeVO) => {
return await request.put({ url: `/iot/data-bridge/update`, data })
},
// 删除数据桥梁
deleteDataBridge: async (id: number) => {
return await request.delete({ url: `/iot/data-bridge/delete?id=` + id })
},
// 导出数据桥梁 Excel
exportDataBridge: async (params) => {
return await request.download({ url: `/iot/data-bridge/export-excel`, params })
}
}
src/api/iot/statistics/index.ts deleted 100644 → 0
import request from '@/config/axios'
/** IoT 统计数据类型 */
export interface IotStatisticsSummaryRespVO {
productCategoryCount: number
productCount: number
deviceCount: number
deviceMessageCount: number
productCategoryTodayCount: number
productTodayCount: number
deviceTodayCount: number
deviceMessageTodayCount: number
deviceOnlineCount: number
deviceOfflineCount: number
deviceInactiveCount: number
productCategoryDeviceCounts: Record<string, number>
}
/** IoT 消息统计数据类型 */
export interface IotStatisticsDeviceMessageSummaryRespVO {
upstreamCounts: Record<number, number>
downstreamCounts: Record<number, number>
}
// IoT 数据统计 API
export const ProductCategoryApi = {
// 查询基础的数据统计
getIotStatisticsSummary: async () => {
return await request.get<IotStatisticsSummaryRespVO>({
url: `/iot/statistics/get-summary`
})
},
// 查询设备上下行消息的数据统计
getIotStatisticsDeviceMessageSummary: async (params: { startTime: number; endTime: number }) => {
return await request.get<IotStatisticsDeviceMessageSummaryRespVO>({
url: `/iot/statistics/get-log-summary`,
params
})
}
}
src/api/iot/thingmodel/index.ts deleted 100644 → 0
import request from '@/config/axios'
/**
* IoT 产品物模型
*/
export interface ThingModelData {
id?: number // 物模型功能编号
identifier?: string // 功能标识
name?: string // 功能名称
description?: string // 功能描述
productId?: number // 产品编号
productKey?: string // 产品标识
dataType: string // 数据类型，与 dataSpecs 的 dataType 保持一致
type: number // 功能类型
property: ThingModelProperty // 属性
event?: ThingModelEvent // 事件
service?: ThingModelService // 服务
}
/**
* IoT 模拟设备
*/
// TODO @super：和 ThingModelSimulatorData 会不会好点
export interface SimulatorData extends ThingModelData {
simulateValue?: string | number // 用于存储模拟值 TODO @super：字段使用 value 会不会好点
}
/**
* ThingModelProperty 类型
*/
export interface ThingModelProperty {
[key: string]: any
}
/**
* ThingModelEvent 类型
*/
export interface ThingModelEvent {
[key: string]: any
}
/**
* ThingModelService 类型
*/
export interface ThingModelService {
[key: string]: any
}
// IoT 产品物模型 API
export const ThingModelApi = {
// 查询产品物模型分页
getThingModelPage: async (params: any) => {
return await request.get({ url: `/iot/thing-model/page`, params })
},
// 获得产品物模型列表
getThingModelList: async (params: any) => {
return await request.get({ url: `/iot/thing-model/list`, params })
},
// 获得产品物模型
getThingModelListByProductId: async (params: any) => {
return await request.get({
url: `/iot/thing-model/list-by-product-id`,
params
})
},
// 查询产品物模型详情
getThingModel: async (id: number) => {
return await request.get({ url: `/iot/thing-model/get?id=` + id })
},
// 新增产品物模型
createThingModel: async (data: ThingModelData) => {
return await request.post({ url: `/iot/thing-model/create`, data })
},
// 修改产品物模型
updateThingModel: async (data: ThingModelData) => {
return await request.put({ url: `/iot/thing-model/update`, data })
},
// 删除产品物模型
deleteThingModel: async (id: number) => {
return await request.delete({ url: `/iot/thing-model/delete?id=` + id })
}
}
src/router/modules/remaining.ts
......@@ -381,49 +381,6 @@ const remainingRouter: AppRouteRecordRaw[] = [
hidden: true,
breadcrumb: false
}
},
{
path: '/iot',
component: Layout,
name: 'IOT',
meta: {
hidden: true
},
children: [
{
path: 'product/product/detail/:id',
name: 'IoTProductDetail',
meta: {
title: '产品详情',
noCache: true,
hidden: true,
activeMenu: '/iot/device/product'
},
component: () => import('@/views/iot/product/product/detail/index.vue')
},
{
path: 'device/detail/:id',
name: 'IoTDeviceDetail',
meta: {
title: '设备详情',
noCache: true,
hidden: true,
activeMenu: '/iot/device/device'
},
component: () => import('@/views/iot/device/device/detail/index.vue')
},
{
path: 'plugin/detail/:id',
name: 'IoTPluginDetail',
meta: {
title: '插件详情',
noCache: true,
hidden: true,
activeMenu: '/iot/plugin'
},
component: () => import('@/views/iot/plugin/detail/index.vue')
}
]
}
]
......
src/views/iot/device/device/DeviceForm.vue deleted 100644 → 0
<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="productId">
<el-select
v-model="formData.productId"
placeholder="请选择产品"
:disabled="formType === 'update'"
clearable
@change="handleProductChange"
>
<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="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"
placeholder="请输入 DeviceName"
:disabled="formType === 'update'"
/>
</el-form-item>
<el-form-item
v-if="formData.deviceType === DeviceTypeEnum.GATEWAY_SUB"
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>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { DeviceApi, DeviceVO } from '@/api/iot/device/device'
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 设备表单 */
defineOptions({ name: 'IoTDeviceForm' })
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,
productId: undefined,
deviceKey: undefined as string | undefined,
deviceName: 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:
'支持英文字母、数字、下划线（_）、中划线（-）、点号（.）、半角冒号（:）和特殊字符@，长度限制为 4~32 个字符',
trigger: 'blur'
}
],
nickname: [
{
validator: (rule, value, callback) => {
if (value === undefined || value === null) {
callback()
return
}
const length = value.replace(/[\u4e00-\u9fa5\u3040-\u30ff]/g, 'aa').length
if (length < 4 || length > 64) {
callback(new Error('备注名称长度限制为 4~64 个字符，中文及日文算 2 个字符'))
} else if (!/^[\u4e00-\u9fa5\u3040-\u30ff_a-zA-Z0-9]+$/.test(value)) {
callback(new Error('备注名称只能包含中文、英文字母、日文、数字和下划线（_）'))
} else {
callback()
}
},
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) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await DeviceApi.getDevice(id)
} 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 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as DeviceVO
if (formType.value === 'create') {
await DeviceApi.createDevice(data)
message.success(t('common.createSuccess'))
} else {
await DeviceApi.updateDevice(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
productId: undefined,
deviceKey: undefined,
deviceName: undefined,
nickname: undefined,
picUrl: undefined,
gatewayId: undefined,
deviceType: undefined,
serialNumber: undefined,
groupIds: []
}
formRef.value?.resetFields()
}
/** 产品选择变化 */
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
}
/** 生成 DeviceKey */
const generateDeviceKey = () => {
formData.value.deviceKey = generateRandomStr(16)
}
</script>
src/views/iot/device/device/DeviceGroupForm.vue deleted 100644 → 0
<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/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>
src/views/iot/device/device/DeviceImportForm.vue deleted 100644 → 0
<template>
<Dialog v-model="dialogVisible" title="设备导入" width="400">
<el-upload
ref="uploadRef"
v-model:file-list="fileList"
:action="importUrl + '?updateSupport=' + updateSupport"
:auto-upload="false"
:disabled="formLoading"
:headers="uploadHeaders"
:limit="1"
:on-error="submitFormError"
:on-exceed="handleExceed"
:on-success="submitFormSuccess"
accept=".xlsx, .xls"
drag
>
<Icon icon="ep:upload" />
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<template #tip>
<div class="el-upload__tip text-center">
<div class="el-upload__tip">
<el-checkbox v-model="updateSupport" />
是否更新已经存在的设备数据
</div>
<span>仅允许导入 xls、xlsx 格式文件。</span>
<el-link
:underline="false"
style="font-size: 12px; vertical-align: baseline"
type="primary"
@click="importTemplate"
>
下载模板
</el-link>
</div>
</template>
</el-upload>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script lang="ts" setup>
import { DeviceApi } from '@/api/iot/device/device'
import { getAccessToken, getTenantId } from '@/utils/auth'
import download from '@/utils/download'
defineOptions({ name: 'IoTDeviceImportForm' })
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中
const uploadRef = ref()
const importUrl =
import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/iot/device/import'
const uploadHeaders = ref() // 上传 Header 头
const fileList = ref([]) // 文件列表
const updateSupport = ref(0) // 是否更新已经存在的设备数据
/** 打开弹窗 */
const open = () => {
dialogVisible.value = true
updateSupport.value = 0
fileList.value = []
resetForm()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const submitForm = async () => {
if (fileList.value.length == 0) {
message.error('请上传文件')
return
}
// 提交请求
uploadHeaders.value = {
Authorization: 'Bearer ' + getAccessToken(),
'tenant-id': getTenantId()
}
formLoading.value = true
uploadRef.value!.submit()
}
/** 文件上传成功 */
const emits = defineEmits(['success'])
const submitFormSuccess = (response: any) => {
if (response.code !== 0) {
message.error(response.msg)
formLoading.value = false
return
}
// 拼接提示语
const data = response.data
let text = '上传成功数量：' + data.createDeviceNames.length + ';'
for (let deviceName of data.createDeviceNames) {
text += '< ' + deviceName + ' >'
}
text += '更新成功数量：' + data.updateDeviceNames.length + ';'
for (const deviceName of data.updateDeviceNames) {
text += '< ' + deviceName + ' >'
}
text += '更新失败数量：' + Object.keys(data.failureDeviceNames).length + ';'
for (const deviceName in data.failureDeviceNames) {
text += '< ' + deviceName + ': ' + data.failureDeviceNames[deviceName] + ' >'
}
message.alert(text)
formLoading.value = false
dialogVisible.value = false
// 发送操作成功的事件
emits('success')
}
/** 上传错误提示 */
const submitFormError = (): void => {
message.error('上传失败，请您重新上传！')
formLoading.value = false
}
/** 重置表单 */
const resetForm = async (): Promise<void> => {
// 重置上传状态和文件
formLoading.value = false
await nextTick()
uploadRef.value?.clearFiles()
}
/** 文件数超出提示 */
const handleExceed = (): void => {
message.error('最多只能上传一个文件！')
}
/** 下载模板操作 */
const importTemplate = async () => {
const res = await DeviceApi.importDeviceTemplate()
download.excel(res, '设备导入模版.xls')
}
</script>
src/views/iot/device/device/detail/DeviceDataDetail.vue deleted 100644 → 0
<!-- 设备物模型 -> 运行状态 -> 查看数据（设备的属性值历史）-->
<template>
<Dialog title="查看数据" v-model="dialogVisible">
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="时间" prop="createTime">
<el-date-picker
v-model="queryParams.times"
value-format="YYYY-MM-DD HH:mm:ss"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
class="!w-350px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" />
搜索
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- TODO @haohao：可参考阿里云 IoT，改成“图标”、“表格”两个选项 -->
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="detailLoading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column
label="时间"
align="center"
prop="updateTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="属性值" align="center" prop="value" />
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
</Dialog>
</template>
<script setup lang="ts">
import { DeviceApi, DeviceHistoryDataVO, DeviceVO } from '@/api/iot/device/device'
import { ProductVO } from '@/api/iot/product/product'
import { beginOfDay, dateFormatter, endOfDay, formatDate } from '@/utils/formatTime'
defineProps<{ product: ProductVO; device: DeviceVO }>()
/** IoT 设备数据详情 */
defineOptions({ name: 'IoTDeviceDataDetail' })
const dialogVisible = ref(false) // 弹窗的是否展示
const detailLoading = ref(false)
const list = ref<DeviceHistoryDataVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
deviceId: -1,
identifier: '',
times: [
// 默认显示最近一周的数据
formatDate(beginOfDay(new Date(new Date().getTime() - 3600 * 1000 * 24 * 7))),
formatDate(endOfDay(new Date()))
]
})
const queryFormRef = ref() // 搜索的表单
/** 获得设备历史数据 */
const getList = async () => {
detailLoading.value = true
try {
const data = await DeviceApi.getHistoryDevicePropertyPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
detailLoading.value = false
}
}
/** 打开弹窗 */
const open = (deviceId: number, identifier: string) => {
dialogVisible.value = true
queryParams.deviceId = deviceId
queryParams.identifier = identifier
getList()
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
src/views/iot/device/device/detail/DeviceDetailConfig.vue deleted 100644 → 0
<!-- 设备配置 -->
<template>
<div>
<el-alert
title="支持远程更新设备的配置文件(JSON 格式)，可以在下方编辑配置模板，对设备的系统参数、网络参数等进行远程配置。配置完成后，需点击「下发」按钮，设备即可进行远程配置。"
type="info"
show-icon
class="my-4"
description="如需编辑文件，请点击下方编辑按钮"
/>
<!-- JSON 编辑器：读模式 -->
<Vue3Jsoneditor
v-if="isEditing"
v-model="config"
:options="editorOptions"
height="500px"
currentMode="code"
@error="onError"
/>
<!-- JSON 编辑器：写模式 -->
<Vue3Jsoneditor
v-else
v-model="config"
:options="editorOptions"
height="500px"
currentMode="view"
v-loading.fullscreen.lock="loading"
@error="onError"
/>
<div class="mt-5 text-center">
<el-button v-if="isEditing" @click="cancelEdit">取消</el-button>
<el-button v-if="isEditing" type="primary" @click="saveConfig" :disabled="hasJsonError">
保存
</el-button>
<el-button v-else @click="enableEdit">编辑</el-button>
<!-- TODO @芋艿：缺一个下发按钮 -->
</div>
</div>
</template>
<script lang="ts" setup>
import Vue3Jsoneditor from 'v3-jsoneditor/src/Vue3Jsoneditor.vue'
import { DeviceApi, DeviceVO } from '@/api/iot/device/device'
import { jsonParse } from '@/utils'
const props = defineProps<{
device: DeviceVO
}>()
const emit = defineEmits<{
(e: 'success'): void // 定义 success 事件，不需要参数
}>()
const message = useMessage()
const loading = ref(false) // 加载中
const config = ref<any>({}) // 只存储 config 字段
const hasJsonError = ref(false) // 是否有 JSON 格式错误
/** 监听 props.device 的变化，只更新 config 字段 */
watchEffect(() => {
config.value = jsonParse(props.device.config)
})
const isEditing = ref(false) // 编辑状态
const editorOptions = computed(() => ({
mainMenuBar: false,
navigationBar: false,
statusBar: false
})) // JSON 编辑器的选项
/** 启用编辑模式的函数 */
const enableEdit = () => {
isEditing.value = true
hasJsonError.value = false // 重置错误状态
}
/** 取消编辑的函数 */
const cancelEdit = () => {
config.value = jsonParse(props.device.config)
isEditing.value = false
hasJsonError.value = false // 重置错误状态
}
/** 保存配置的函数 */
const saveConfig = async () => {
if (hasJsonError.value) {
message.error('JSON格式错误，请修正后再提交！')
return
}
await updateDeviceConfig()
isEditing.value = false
}
/** 更新设备配置 */
const updateDeviceConfig = async () => {
try {
// 提交请求
loading.value = true
await DeviceApi.updateDevice({
id: props.device.id,
config: JSON.stringify(config.value)
} as DeviceVO)
message.success('更新成功！')
// 触发 success 事件
emit('success')
} catch (error) {
console.error(error)
} finally {
loading.value = false
}
}
/** 处理 JSON 编辑器错误的函数 */
const onError = (e: any) => {
console.log('onError', e)
hasJsonError.value = true
}
</script>
src/views/iot/device/device/detail/DeviceDetailsHeader.vue deleted 100644 → 0
<!-- 设备信息（头部） -->
<template>
<div>
<div class="flex items-start justify-between">
<div>
<el-col>
<el-row>
<span class="text-xl font-bold">{{ device.deviceName }}</span>
</el-row>
</el-col>
</div>
<div>
<!-- 右上：按钮 -->
<el-button
@click="openForm('update', device.id)"
v-hasPermi="['iot:device:update']"
v-if="product.status === 0"
>
编辑
</el-button>
</div>
</div>
</div>
<ContentWrap class="mt-10px">
<el-descriptions :column="5" direction="horizontal">
<el-descriptions-item label="产品">
<el-link @click="goToProductDetail(product.id)">{{ product.name }}</el-link>
</el-descriptions-item>
<el-descriptions-item label="ProductKey">
{{ product.productKey }}
<el-button @click="copyToClipboard(product.productKey)">复制</el-button>
</el-descriptions-item>
</el-descriptions>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<DeviceForm ref="formRef" @success="emit('refresh')" />
</template>
<script setup lang="ts">
import DeviceForm from '@/views/iot/device/device/DeviceForm.vue'
import { ProductVO } from '@/api/iot/product/product'
import { DeviceVO } from '@/api/iot/device/device'
const message = useMessage()
const router = useRouter()
const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>()
const emit = defineEmits(['refresh'])
/** 操作修改 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 复制到剪贴板方法 */
const copyToClipboard = async (text: string) => {
try {
await navigator.clipboard.writeText(text)
message.success('复制成功')
} catch (error) {
message.error('复制失败')
}
}
/** 跳转到产品详情页面 */
const goToProductDetail = (productId: number) => {
router.push({ name: 'IoTProductDetail', params: { id: productId } })
}
</script>
src/views/iot/device/device/detail/DeviceDetailsInfo.vue deleted 100644 → 0
<!-- 设备信息 -->
<template>
<ContentWrap>
<el-descriptions :column="3" title="设备信息">
<el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
<el-descriptions-item label="ProductKey">
{{ product.productKey }}
<el-button @click="copyToClipboard(product.productKey)">复制</el-button>
</el-descriptions-item>
<el-descriptions-item label="设备类型">
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
</el-descriptions-item>
<el-descriptions-item label="DeviceName">
{{ device.deviceName }}
<el-button @click="copyToClipboard(device.deviceName)">复制</el-button>
</el-descriptions-item>
<el-descriptions-item label="备注名称">{{ device.nickname }}</el-descriptions-item>
<el-descriptions-item label="创建时间">
{{ formatDate(device.createTime) }}
</el-descriptions-item>
<el-descriptions-item label="当前状态">
<dict-tag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.state" />
</el-descriptions-item>
<el-descriptions-item label="激活时间">
{{ formatDate(device.activeTime) }}
</el-descriptions-item>
<el-descriptions-item label="最后上线时间">
{{ formatDate(device.onlineTime) }}
</el-descriptions-item>
<el-descriptions-item label="最后离线时间" :span="3">
{{ formatDate(device.offlineTime) }}
</el-descriptions-item>
<el-descriptions-item label="MQTT 连接参数">
<el-button type="primary" @click="openMqttParams">查看</el-button>
</el-descriptions-item>
</el-descriptions>
</ContentWrap>
<!-- MQTT 连接参数弹框 -->
<Dialog
title="MQTT 连接参数"
v-model="mqttDialogVisible"
width="50%"
:before-close="handleCloseMqttDialog"
>
<el-form :model="mqttParams" label-width="120px">
<el-form-item label="clientId">
<el-input v-model="mqttParams.mqttClientId" readonly>
<template #append>
<el-button @click="copyToClipboard(mqttParams.mqttClientId)" type="primary">
<Icon icon="ph:copy" />
</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item label="username">
<el-input v-model="mqttParams.mqttUsername" readonly>
<template #append>
<el-button @click="copyToClipboard(mqttParams.mqttUsername)" type="primary">
<Icon icon="ph:copy" />
</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item label="passwd">
<el-input
v-model="mqttParams.mqttPassword"
readonly
:type="passwordVisible ? 'text' : 'password'"
>
<template #append>
<el-button @click="passwordVisible = !passwordVisible" type="primary">
<Icon :icon="passwordVisible ? 'ph:eye-slash' : 'ph:eye'" />
</el-button>
<el-button @click="copyToClipboard(mqttParams.mqttPassword)" type="primary">
<Icon icon="ph:copy" />
</el-button>
</template>
</el-input>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="mqttDialogVisible = false">关闭</el-button>
</template>
</Dialog>
<!-- TODO 待开发：设备标签 -->
<!-- TODO 待开发：设备地图 -->
</template>
<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { ProductVO } from '@/api/iot/product/product'
import { formatDate } from '@/utils/formatTime'
import { DeviceVO } from '@/api/iot/device/device'
import { DeviceApi, MqttConnectionParamsVO } from '@/api/iot/device/device/index'
const message = useMessage() // 消息提示
const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>() // 定义 Props
const emit = defineEmits(['refresh']) // 定义 Emits
const mqttDialogVisible = ref(false) // 定义 MQTT 弹框的可见性
const passwordVisible = ref(false) // 定义密码可见性状态
const mqttParams = ref({
mqttClientId: '',
mqttUsername: '',
mqttPassword: ''
}) // 定义 MQTT 参数对象
/** 复制到剪贴板方法 */
const copyToClipboard = async (text: string) => {
try {
await navigator.clipboard.writeText(text)
message.success('复制成功')
} catch (error) {
message.error('复制失败')
}
}
/** 打开 MQTT 参数弹框的方法 */
const openMqttParams = async () => {
try {
const data = await DeviceApi.getMqttConnectionParams(device.id)
// 根据 API 响应结构正确获取数据
// TODO @haohao：'N/A' 是不是在 ui 里处理哈
mqttParams.value = {
mqttClientId: data.mqttClientId || 'N/A',
mqttUsername: data.mqttUsername || 'N/A',
mqttPassword: data.mqttPassword || 'N/A'
}
// 显示 MQTT 弹框
mqttDialogVisible.value = true
} catch (error) {
console.error('获取 MQTT 连接参数出错：', error)
message.error('获取MQTT连接参数失败，请检查网络连接或联系管理员')
}
}
/** 关闭 MQTT 弹框的方法 */
const handleCloseMqttDialog = () => {
mqttDialogVisible.value = false
}
</script>
src/views/iot/device/device/detail/DeviceDetailsLog.vue deleted 100644 → 0
<!-- 设备日志 -->
<template>
<ContentWrap>
<!-- 搜索区域 -->
<el-form :model="queryParams" inline>
<el-form-item>
<el-select v-model="queryParams.type" placeholder="所有" class="!w-160px">
<el-option label="所有" value="" />
<!-- TODO @super：搞成枚举 -->
<el-option label="状态" value="state" />
<el-option label="事件" value="event" />
<el-option label="属性" value="property" />
<el-option label="服务" value="service" />
</el-select>
</el-form-item>
<el-form-item>
<el-input v-model="queryParams.identifier" placeholder="日志识符" class="!w-200px" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" /> 搜索
</el-button>
<el-switch
size="large"
width="80"
v-model="autoRefresh"
class="ml-20px"
inline-prompt
active-text="定时刷新"
inactive-text="定时刷新"
style="--el-switch-on-color: #13ce66"
/>
</el-form-item>
</el-form>
<!-- 日志列表 -->
<el-table v-loading="loading" :data="list" :stripe="true" class="whitespace-nowrap">
<el-table-column label="时间" align="center" prop="ts" width="180">
<template #default="scope">
{{ formatDate(scope.row.ts) }}
</template>
</el-table-column>
<el-table-column label="类型" align="center" prop="type" width="120" />
<!-- TODO @super：标识符需要翻译 -->
<el-table-column label="标识符" align="center" prop="identifier" width="120" />
<el-table-column label="内容" align="center" prop="content" :show-overflow-tooltip="true" />
</el-table>
<!-- 分页 -->
<div class="mt-10px flex justify-end">
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getLogList"
/>
</div>
</ContentWrap>
</template>
<script setup lang="ts">
import { DeviceApi } from '@/api/iot/device/device'
import { formatDate } from '@/utils/formatTime'
const props = defineProps<{
deviceKey: string
}>()
// 查询参数
const queryParams = reactive({
deviceKey: props.deviceKey,
type: '',
identifier: '',
pageNo: 1,
pageSize: 10
})
// 列表数据
const loading = ref(false)
const total = ref(0)
const list = ref([])
const autoRefresh = ref(false)
let timer: any = null // TODO @super：autoRefreshEnable，autoRefreshTimer；对应上
// 类型映射 TODO @super：需要删除么？
const typeMap = {
lifetime: '生命周期',
state: '设备状态',
property: '属性',
event: '事件',
service: '服务'
}
/** 查询日志列表 */
const getLogList = async () => {
if (!props.deviceKey) return
loading.value = true
try {
const data = await DeviceApi.getDeviceLogPage(queryParams)
total.value = data.total
list.value = data.list
} finally {
loading.value = false
}
}
/** 获取日志名称 */
const getLogName = (log: any) => {
const { type, identifier } = log
let name = '未知'
if (type === 'property') {
if (identifier === 'set_reply') name = '设置回复'
else if (identifier === 'report') name = '上报'
else if (identifier === 'set') name = '设置'
} else if (type === 'state') {
name = identifier === 'online' ? '上线' : '下线'
} else if (type === 'lifetime') {
name = identifier === 'register' ? '注册' : name
}
return `${name}(${identifier})`
}
/** 搜索操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getLogList()
}
/** 监听自动刷新 */
watch(autoRefresh, (newValue) => {
if (newValue) {
timer = setInterval(() => {
getLogList()
}, 5000)
} else {
clearInterval(timer)
timer = null
}
})
/** 监听设备标识变化 */
watch(
() => props.deviceKey,
(newValue) => {
if (newValue) {
handleQuery()
}
}
)
/** 组件卸载时清除定时器 */
onBeforeUnmount(() => {
if (timer) {
clearInterval(timer)
}
})
/** 初始化 */
onMounted(() => {
if (props.deviceKey) {
getLogList()
}
})
</script>
src/views/iot/device/device/detail/DeviceDetailsModel.vue deleted 100644 → 0
<!-- 设备物模型：运行状态（属性）、事件管理、服务调用 -->
<template>
<ContentWrap>
<el-tabs v-model="activeTab">
<el-tab-pane label="运行状态" name="status">
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="标识符" prop="identifier">
<el-input
v-model="queryParams.identifier"
placeholder="请输入标识符"
clearable
class="!w-240px"
/>
</el-form-item>
<el-form-item label="属性名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入属性名称"
clearable
class="!w-240px"
/>
</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-form-item>
</el-form>
</ContentWrap>
<ContentWrap>
<el-tabs>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="属性标识符" align="center" prop="property.identifier" />
<el-table-column label="属性名称" align="center" prop="property.name" />
<el-table-column label="数据类型" align="center" prop="property.dataType" />
<el-table-column label="属性值" align="center" prop="value" />
<el-table-column
label="更新时间"
align="center"
prop="updateTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openDetail(props.device.id, scope.row.property.identifier)"
>
查看数据
</el-button>
</template>
</el-table-column>
</el-table>
</el-tabs>
<!-- 表单弹窗：添加/修改 -->
<DeviceDataDetail ref="detailRef" :device="device" :product="product" />
</ContentWrap>
</el-tab-pane>
<el-tab-pane label="事件管理" name="event">
<p>事件管理</p>
</el-tab-pane>
<el-tab-pane label="服务调用" name="service">
<p>服务调用</p>
</el-tab-pane>
</el-tabs>
</ContentWrap>
</template>
<script setup lang="ts">
import { ProductVO } from '@/api/iot/product/product'
import { DeviceApi, DeviceDataVO, DeviceVO } from '@/api/iot/device/device'
import { dateFormatter } from '@/utils/formatTime'
import DeviceDataDetail from './DeviceDataDetail.vue'
const props = defineProps<{ product: ProductVO; device: DeviceVO }>()
const loading = ref(true) // 列表的加载中
const list = ref<DeviceDataVO[]>([]) // 列表的数据
const queryParams = reactive({
deviceId: -1,
identifier: undefined as string | undefined,
name: undefined as string | undefined
})
const queryFormRef = ref() // 搜索的表单
const activeTab = ref('status') // 默认选中的标签
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
queryParams.deviceId = props.device.id
list.value = await DeviceApi.getLatestDeviceProperties(queryParams)
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
queryParams.identifier = undefined
queryParams.name = undefined
handleQuery()
}
/** 添加/修改操作 */
const detailRef = ref()
const openDetail = (deviceId: number, identifier: string) => {
detailRef.value.open(deviceId, identifier)
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
src/views/iot/device/device/detail/DeviceDetailsSimulator.vue deleted 100644 → 0
<!-- 模拟设备 -->
<template>
<ContentWrap>
<el-row :gutter="20">
<!-- 左侧指令调试区域 -->
<el-col :span="12">
<el-tabs v-model="activeTab" type="border-card">
<!-- 上行指令调试 -->
<el-tab-pane label="上行指令调试" name="up">
<el-tabs v-if="activeTab === 'up'" v-model="subTab">
<!-- 属性上报 -->
<el-tab-pane label="属性上报" name="property">
<ContentWrap>
<el-table
v-loading="loading"
:data="list"
:show-overflow-tooltip="true"
:stripe="true"
>
<!-- TODO @super：每个 colum 搞下宽度，避免 table 每一列最后有个 . -->
<!-- TODO @super：可以左侧 fixed -->
<el-table-column align="center" label="功能名称" prop="name" />
<el-table-column align="center" label="标识符" prop="identifier" />
<el-table-column align="center" label="数据类型" prop="identifier">
<!-- TODO @super：不用翻译，可以减少宽度的占用 -->
<template #default="{ row }">
{{ dataTypeOptionsLabel(row.property?.dataType) ?? '-' }}
</template>
</el-table-column>
<el-table-column align="left" label="数据定义" prop="identifier">
<template #default="{ row }">
<DataDefinition :data="row" />
</template>
</el-table-column>
<!-- TODO @super：可以右侧 fixed -->
<el-table-column align="center" label="值" width="80">
<template #default="scope">
<el-input v-model="scope.row.simulateValue" class="!w-60px" />
</template>
</el-table-column>
</el-table>
<!-- TODO @super：发送按钮，可以放在右侧哈。因为我们的 simulateValue 就在最右侧 -->
<div class="mt-10px">
<el-button type="primary" @click="handlePropertyReport"> 发送</el-button>
</div>
</ContentWrap>
</el-tab-pane>
<!-- 事件上报 -->
<!-- TODO @super：待实现 -->
<el-tab-pane label="事件上报" name="event">
<ContentWrap>
<!-- TODO @super：因为事件是每个 event 去模拟，而不是类似属性的批量上传。所以，可以每一列后面有个“模拟”按钮。另外，“值”使用 textarea，高度 3 -->
<!-- <el-table v-loading="loading" :data="eventList" :stripe="true">
<el-table-column label="功能名称" align="center" prop="name" />
<el-table-column label="标识符" align="center" prop="identifier" />
<el-table-column label="数据类型" align="center" prop="dataType" />
<el-table-column
label="数据定义"
align="center"
prop="specs"
:show-overflow-tooltip="true"
/>
<el-table-column label="值" align="center" width="80">
<template #default="scope">
<el-input v-model="scope.row.simulateValue" class="!w-60px" />
</template>
</el-table-column>
</el-table>
<div class="mt-10px">
<el-button type="primary" @click="handleEventReport">发送</el-button>
</div> -->
</ContentWrap>
</el-tab-pane>
<!-- 状态变更 -->
<el-tab-pane label="状态变更" name="status">
<ContentWrap>
<div class="flex gap-4">
<el-button type="primary" @click="handleDeviceState(DeviceStateEnum.ONLINE)">
设备上线
</el-button>
<el-button type="danger" @click="handleDeviceState(DeviceStateEnum.OFFLINE)">
设备下线
</el-button>
</div>
</ContentWrap>
</el-tab-pane>
</el-tabs>
</el-tab-pane>
<!-- 下行指令调试 -->
<!-- TODO @super：待实现 -->
<el-tab-pane label="下行指令调试" name="down">
<el-tabs v-if="activeTab === 'down'" v-model="subTab">
<!-- 属性调试 -->
<el-tab-pane label="属性调试" name="propertyDebug">
<ContentWrap>
<!-- <el-table v-loading="loading" :data="propertyList" :stripe="true">
<el-table-column label="功能名称" align="center" prop="name" />
<el-table-column label="标识符" align="center" prop="identifier" />
<el-table-column label="数据类型" align="center" prop="dataType" />
<el-table-column
label="数据定义"
align="center"
prop="specs"
:show-overflow-tooltip="true"
/>
<el-table-column label="值" align="center" width="80">
<template #default="scope">
<el-input v-model="scope.row.simulateValue" class="!w-60px" />
</template>
</el-table-column>
</el-table>
<div class="mt-10px">
<el-button type="primary" @click="handlePropertyGet">获取</el-button>
</div> -->
</ContentWrap>
</el-tab-pane>
<!-- 服务调用 -->
<!-- TODO @super：待实现 -->
<el-tab-pane label="服务调用" name="service">
<ContentWrap>
<!-- 服务调用相关内容 -->
</ContentWrap>
</el-tab-pane>
</el-tabs>
</el-tab-pane>
</el-tabs>
</el-col>
<!-- 右侧设备日志区域 -->
<el-col :span="12">
<el-tabs type="border-card">
<el-tab-pane label="设备日志">
<DeviceDetailsLog :device-key="device.deviceKey" />
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</ContentWrap>
</template>
<script lang="ts" setup>
import { ProductVO } from '@/api/iot/product/product'
import { SimulatorData, ThingModelApi } from '@/api/iot/thingmodel'
import { DeviceApi, DeviceStateEnum, DeviceVO } from '@/api/iot/device/device'
import DeviceDetailsLog from './DeviceDetailsLog.vue'
import { getDataTypeOptionsLabel } from '@/views/iot/thingmodel/config'
import { DataDefinition } from '@/views/iot/thingmodel/components'
const props = defineProps<{
product: ProductVO
device: DeviceVO
}>()
const message = useMessage() // 消息弹窗
const activeTab = ref('up') // TODO @super：upstream 上行、downstream 下行
const subTab = ref('property') // TODO @super：upstreamTab
const loading = ref(false)
const queryParams = reactive({
type: undefined, // TODO @super：type 默认给个第一个 tab 对应的，避免下面 watch 爆红
productId: -1
})
const list = ref<SimulatorData[]>([]) // 物模型列表的数据 TODO @super：thingModelList
// TODO @super：dataTypeOptionsLabel 是不是不用定义，直接用 getDataTypeOptionsLabel 在 template 中使用即可？
const dataTypeOptionsLabel = computed(() => (value: string) => getDataTypeOptionsLabel(value)) // 解析数据类型
/** 查询物模型列表 */
// TODO @super：getThingModelList 更精准
const getList = async () => {
loading.value = true
try {
queryParams.productId = props.product?.id || -1
const data = await ThingModelApi.getThingModelList(queryParams)
// 转换数据，添加 simulateValue 字段
// TODO @super：貌似下面的 simulateValue 不设置也可以？
list.value = data.map((item) => ({
...item,
simulateValue: ''
}))
} finally {
loading.value = false
}
}
// // 功能列表数据结构定义
// interface TableItem {
// name: string
// identifier: string
// value: string | number
// }
// // 添加计算属性来过滤物模型数据
// const propertyList = computed(() => {
// return list.value
// .filter((item) => item.type === 'property')
// .map((item) => ({
// name: item.name,
// identifier: item.identifier,
// value: ''
// }))
// })
// const eventList = computed(() => {
// return list.value
// .filter((item) => item.type === 'event')
// .map((item) => ({
// name: item.name,
// identifier: item.identifier,
// value: ''
// }))
// })
/** 监听标签页变化 */
// todo:后续改成查询字典
watch(
[activeTab, subTab],
([newActiveTab, newSubTab]) => {
// 根据标签页设置查询类型
if (newActiveTab === 'up') {
switch (newSubTab) {
case 'property':
queryParams.type = 1
break
case 'event':
queryParams.type = 3
break
// case 'status':
// queryParams.type = 'status'
// break
}
} else if (newActiveTab === 'down') {
switch (newSubTab) {
case 'propertyDebug':
queryParams.type = 1
break
case 'service':
queryParams.type = 2
break
}
}
getList() // 切换标签时重新获取数据
},
{ immediate: true }
)
/** 处理属性上报 */
const handlePropertyReport = async () => {
// TODO @super:数据类型效验
const data: Record<string, object> = {}
list.value.forEach((item) => {
// 只有当 simulateValue 有值时才添加到 content 中
// TODO @super：直接 if (item.simulateValue) 就可以哈，js 这块还是比较灵活的
if (item.simulateValue !== undefined && item.simulateValue !== '') {
// TODO @super：这里有个红色的 idea 告警，觉得去除下
data[item.identifier] = item.simulateValue
}
})
try {
await DeviceApi.upstreamDevice({
id: props.device.id,
type: 'property',
identifier: 'report',
data: data
})
message.success('属性上报成功')
} catch (error) {
message.error('属性上报失败')
}
}
// // 处理事件上报
// const handleEventReport = async () => {
// const contentObj: Record<string, any> = {}
// list.value
// .filter(item => item.type === 'event')
// .forEach((item) => {
// if (item.simulateValue !== undefined && item.simulateValue !== '') {
// contentObj[item.identifier] = item.simulateValue
// }
// })
// const reportData: ReportData = {
// productKey: props.product.productKey,
// deviceKey: props.device.deviceKey,
// type: 'event',
// subType: list.value.find(item => item.type === 'event')?.identifier || '',
// reportTime: new Date().toISOString(),
// content: JSON.stringify(contentObj) // 转换为 JSON 字符串
// }
// try {
// // TODO: 调用API发送数据
// console.log('上报数据:', reportData)
// message.success('事件上报成功')
// } catch (error) {
// message.error('事件上报失败')
// }
// }
/** 处理设备状态 */
const handleDeviceState = async (state: number) => {
try {
await DeviceApi.upstreamDevice({
id: props.device.id,
type: 'state',
identifier: 'report',
data: state
})
message.success(`设备${state === DeviceStateEnum.ONLINE ? '上线' : '下线'}成功`)
} catch (error) {
message.error(`设备${state === DeviceStateEnum.ONLINE ? '上线' : '下线'}失败`)
}
}
// 处理属性获取
const handlePropertyGet = async () => {
// TODO: 实现属性获取逻辑
message.success('属性获取成功')
}
// 初始化
onMounted(() => {
getList()
})
// TODO @芋艿：后续再详细 review 下；
</script>
src/views/iot/device/device/detail/index.vue deleted 100644 → 0
<template>
<DeviceDetailsHeader
:loading="loading"
:product="product"
:device="device"
@refresh="getDeviceData(id)"
/>
<el-col>
<el-tabs v-model="activeTab">
<el-tab-pane label="设备信息" name="info">
<DeviceDetailsInfo v-if="activeTab === 'info'" :product="product" :device="device" />
</el-tab-pane>
<el-tab-pane label="Topic 列表" />
<el-tab-pane label="物模型数据" name="model">
<DeviceDetailsModel v-if="activeTab === 'model'" :product="product" :device="device" />
</el-tab-pane>
<el-tab-pane label="子设备管理" v-if="product.deviceType === DeviceTypeEnum.GATEWAY" />
<el-tab-pane label="设备影子" />
<el-tab-pane label="设备日志" name="log">
<DeviceDetailsLog v-if="activeTab === 'log'" :device-key="device.deviceKey" />
</el-tab-pane>
<el-tab-pane label="模拟设备" name="simulator">
<DeviceDetailsSimulator
v-if="activeTab === 'simulator'"
:product="product"
:device="device"
/>
</el-tab-pane>
<el-tab-pane label="设备配置" name="config">
<DeviceDetailConfig
v-if="activeTab === 'config'"
:device="device"
@success="getDeviceData"
/>
</el-tab-pane>
</el-tabs>
</el-col>
</template>
<script lang="ts" setup>
import { useTagsViewStore } from '@/store/modules/tagsView'
import { DeviceApi, DeviceVO } from '@/api/iot/device/device'
import { DeviceTypeEnum, ProductApi, ProductVO } from '@/api/iot/product/product'
import DeviceDetailsHeader from './DeviceDetailsHeader.vue'
import DeviceDetailsInfo from './DeviceDetailsInfo.vue'
import DeviceDetailsModel from './DeviceDetailsModel.vue'
import DeviceDetailsLog from './DeviceDetailsLog.vue'
import DeviceDetailsSimulator from './DeviceDetailsSimulator.vue'
import DeviceDetailConfig from './DeviceDetailConfig.vue'
defineOptions({ name: 'IoTDeviceDetail' })
const route = useRoute()
const message = useMessage()
const id = route.params.id // 将字符串转换为数字
const loading = ref(true) // 加载中
const product = ref<ProductVO>({} as ProductVO) // 产品详情
const device = ref<DeviceVO>({} as DeviceVO) // 设备详情
const activeTab = ref('info') // 默认激活的标签页
/** 获取设备详情 */
const getDeviceData = async () => {
loading.value = true
try {
device.value = await DeviceApi.getDevice(id)
await getProductData(device.value.productId)
} finally {
loading.value = false
}
}
/** 获取产品详情 */
const getProductData = async (id: number) => {
product.value = await ProductApi.getProduct(id)
}
/** 初始化 */
const { delView } = useTagsViewStore() // 视图操作
const { currentRoute } = useRouter() // 路由
onMounted(async () => {
if (!id) {
message.warning('参数错误，产品不能为空！')
delView(unref(currentRoute))
return
}
await getDeviceData()
activeTab.value = (route.query.tab as string) || 'info'
})
</script>
src/views/iot/device/device/index.vue deleted 100644 → 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_STATE)"
: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="warning" plain @click="handleImport" v-hasPermi="['iot:device:import']">
<Icon icon="ep:upload" /> 导入
</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 relative overflow-hidden"
:body-style="{ padding: '0' }"
>
<!-- 添加渐变背景层 -->
<div
class="absolute top-0 left-0 right-0 h-[50px] pointer-events-none"
:class="[
item.state === DeviceStateEnum.ONLINE
? 'bg-gradient-to-b from-[#eefaff] to-transparent'
: 'bg-gradient-to-b from-[#fff1f1] to-transparent'
]"
>
</div>
<div class="p-4 relative">
<!-- 标题区域 -->
<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 flex-1">{{ item.deviceName }}</div>
<!-- 添加设备状态标签 -->
<div class="inline-flex items-center">
<div
class="w-1 h-1 rounded-full mr-1.5"
:class="
item.state === DeviceStateEnum.ONLINE
? 'bg-[var(--el-color-success)]'
: 'bg-[var(--el-color-danger)]'
"
>
</div>
<el-text
class="!text-xs font-bold"
:type="item.state === DeviceStateEnum.ONLINE ? 'success' : 'danger'"
>
{{ getDictLabel(DICT_TYPE.IOT_DEVICE_STATE, item.state) }}
</el-text>
</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] inline-block align-middle overflow-hidden text-ellipsis whitespace-nowrap max-w-[130px]"
>
{{ 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="openModel(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_STATE" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column
label="最后上线时间"
align="center"
prop="onlineTime"
: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="openModel(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" />
<!-- 导入表单组件 -->
<DeviceImportForm ref="importFormRef" @success="getList" />
</template>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import { DeviceApi, DeviceVO, DeviceStateEnum } from '@/api/iot/device/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'
import DeviceImportForm from './DeviceImportForm.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 openModel = (id: number) => {
push({ name: 'IoTDeviceDetail', params: { id }, query: { tab: 'model' } })
}
/** 设备导入 */
const importFormRef = ref()
const handleImport = () => {
importFormRef.value.open()
}
/** 初始化 **/
onMounted(async () => {
getList()
// 获取产品列表
products.value = await ProductApi.getSimpleProductList()
// 获取分组列表
deviceGroups.value = await DeviceGroupApi.getSimpleDeviceGroupList()
})
</script>
src/views/iot/device/group/DeviceGroupForm.vue deleted 100644 → 0
<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>
src/views/iot/device/group/index.vue deleted 100644 → 0
<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>
src/views/iot/home/index.vue deleted 100644 → 0
<template>
<!-- 第一行：统计卡片行 -->
<el-row :gutter="16" class="mb-4">
<el-col :span="6">
<el-card class="stat-card" shadow="never">
<div class="flex flex-col">
<div class="flex justify-between items-center mb-1">
<span class="text-gray-500 text-base font-medium">分类数量</span>
<Icon icon="ep:menu" class="text-[32px] text-blue-400" />
</div>
<span class="text-3xl font-bold text-gray-700">
{{ statsData.productCategoryCount }}
</span>
<el-divider class="my-2" />
<div class="flex justify-between items-center text-gray-400 text-sm">
<span>今日新增</span>
<span class="text-green-500">+{{ statsData.productCategoryTodayCount }}</span>
</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="stat-card" shadow="never">
<div class="flex flex-col">
<div class="flex justify-between items-center mb-1">
<span class="text-gray-500 text-base font-medium">产品数量</span>
<Icon icon="ep:box" class="text-[32px] text-orange-400" />
</div>
<span class="text-3xl font-bold text-gray-700">{{ statsData.productCount }}</span>
<el-divider class="my-2" />
<div class="flex justify-between items-center text-gray-400 text-sm">
<span>今日新增</span>
<span class="text-green-500">+{{ statsData.productTodayCount }}</span>
</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="stat-card" shadow="never">
<div class="flex flex-col">
<div class="flex justify-between items-center mb-1">
<span class="text-gray-500 text-base font-medium">设备数量</span>
<Icon icon="ep:cpu" class="text-[32px] text-purple-400" />
</div>
<span class="text-3xl font-bold text-gray-700">{{ statsData.deviceCount }}</span>
<el-divider class="my-2" />
<div class="flex justify-between items-center text-gray-400 text-sm">
<span>今日新增</span>
<span class="text-green-500">+{{ statsData.deviceTodayCount }}</span>
</div>
</div>
</el-card>
</el-col>
<el-col :span="6">
<el-card class="stat-card" shadow="never">
<div class="flex flex-col">
<div class="flex justify-between items-center mb-1">
<span class="text-gray-500 text-base font-medium">设备消息数</span>
<Icon icon="ep:message" class="text-[32px] text-teal-400" />
</div>
<span class="text-3xl font-bold text-gray-700">
{{ statsData.deviceMessageCount }}
</span>
<el-divider class="my-2" />
<div class="flex justify-between items-center text-gray-400 text-sm">
<span>今日新增</span>
<span class="text-green-500">+{{ statsData.deviceMessageTodayCount }}</span>
</div>
</div>
</el-card>
</el-col>
</el-row>
<!-- 第二行：图表行 -->
<el-row :gutter="16" class="mb-4">
<el-col :span="12">
<el-card class="chart-card" shadow="never">
<template #header>
<div class="flex items-center">
<span class="text-base font-medium text-gray-600">设备数量统计</span>
</div>
</template>
<div ref="deviceCountChartRef" class="h-[240px]"></div>
</el-card>
</el-col>
<el-col :span="12">
<el-card class="chart-card" shadow="never">
<template #header>
<div class="flex items-center">
<span class="text-base font-medium text-gray-600">设备状态统计</span>
</div>
</template>
<el-row class="h-[240px]">
<el-col :span="8" class="flex flex-col items-center">
<div ref="deviceOnlineCountChartRef" class="h-[160px] w-full"></div>
<div class="text-center mt-2">
<span class="text-sm text-gray-600">在线设备</span>
</div>
</el-col>
<el-col :span="8" class="flex flex-col items-center">
<div ref="deviceOfflineChartRef" class="h-[160px] w-full"></div>
<div class="text-center mt-2">
<span class="text-sm text-gray-600">离线设备</span>
</div>
</el-col>
<el-col :span="8" class="flex flex-col items-center">
<div ref="deviceActiveChartRef" class="h-[160px] w-full"></div>
<div class="text-center mt-2">
<span class="text-sm text-gray-600">待激活设备</span>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<!-- 第三行：消息统计行 -->
<el-row>
<el-col :span="24">
<el-card class="chart-card" shadow="never">
<template #header>
<div class="flex items-center justify-between">
<span class="text-base font-medium text-gray-600">上下行消息量统计</span>
<div class="flex items-center space-x-2">
<el-radio-group v-model="timeRange" @change="handleTimeRangeChange">
<el-radio-button label="1h">最近1小时</el-radio-button>
<el-radio-button label="24h">最近24小时</el-radio-button>
<el-radio-button label="7d">近一周</el-radio-button>
</el-radio-group>
<el-date-picker
v-model="dateRange"
type="datetimerange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
@change="handleDateRangeChange"
/>
</div>
</div>
</template>
<div ref="deviceMessageCountChartRef" class="h-[300px]"></div>
</el-card>
</el-col>
</el-row>
<!-- TODO 第四行：地图 -->
</template>
<script setup lang="ts" name="Index">
import * as echarts from 'echarts/core'
import {
GridComponent,
LegendComponent,
TitleComponent,
ToolboxComponent,
TooltipComponent
} from 'echarts/components'
import { GaugeChart, LineChart, PieChart } from 'echarts/charts'
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import {
IotStatisticsDeviceMessageSummaryRespVO,
IotStatisticsSummaryRespVO,
ProductCategoryApi
} from '@/api/iot/statistics'
import { formatDate } from '@/utils/formatTime'
// TODO @super：参考下 /Users/yunai/Java/yudao-ui-admin-vue3/src/views/mall/home/index.vue，拆一拆组件
/** IoT 首页 */
defineOptions({ name: 'IoTHome' })
// TODO @super：使用下 Echart 组件，参考 yudao-ui-admin-vue3/src/views/mall/home/components/TradeTrendCard.vue 等
echarts.use([
TooltipComponent,
LegendComponent,
PieChart,
CanvasRenderer,
LabelLayout,
TitleComponent,
ToolboxComponent,
GridComponent,
LineChart,
UniversalTransition,
GaugeChart
])
const timeRange = ref('7d') // 修改默认选择为近一周
const dateRange = ref<[Date, Date] | null>(null)
const queryParams = reactive({
startTime: Date.now() - 7 * 24 * 60 * 60 * 1000, // 设置默认开始时间为 7 天前
endTime: Date.now() // 设置默认结束时间为当前时间
})
const deviceCountChartRef = ref() // 设备数量统计的图表
const deviceOnlineCountChartRef = ref() // 在线设备统计的图表
const deviceOfflineChartRef = ref() // 离线设备统计的图表
const deviceActiveChartRef = ref() // 待激活设备统计的图表
const deviceMessageCountChartRef = ref() // 上下行消息量统计的图表
// 基础统计数据
// TODO @super：初始为 -1，然后界面展示先是加载中？试试用 cursor 改哈
const statsData = ref<IotStatisticsSummaryRespVO>({
productCategoryCount: 0,
productCount: 0,
deviceCount: 0,
deviceMessageCount: 0,
productCategoryTodayCount: 0,
productTodayCount: 0,
deviceTodayCount: 0,
deviceMessageTodayCount: 0,
deviceOnlineCount: 0,
deviceOfflineCount: 0,
deviceInactiveCount: 0,
productCategoryDeviceCounts: {}
})
// 消息统计数据
const messageStats = ref<IotStatisticsDeviceMessageSummaryRespVO>({
upstreamCounts: {},
downstreamCounts: {}
})
/** 处理快捷时间范围选择 */
const handleTimeRangeChange = (timeRange: string) => {
const now = Date.now()
let startTime: number
// TODO @super：这个的计算，看看能不能结合 dayjs 简化。因为 1h、24h、7d 感觉是比较标准的。如果没有，抽到 utils/formatTime.ts 作为一个工具方法
switch (timeRange) {
case '1h':
startTime = now - 60 * 60 * 1000
break
case '24h':
startTime = now - 24 * 60 * 60 * 1000
break
case '7d':
startTime = now - 7 * 24 * 60 * 60 * 1000
break
default:
return
}
// 清空日期选择器
dateRange.value = null
// 更新查询参数
queryParams.startTime = startTime
queryParams.endTime = now
// 重新获取数据
getStats()
}
/** 处理自定义日期范围选择 */
const handleDateRangeChange = (value: [Date, Date] | null) => {
if (value) {
// 清空快捷选项
timeRange.value = ''
// 更新查询参数
queryParams.startTime = value[0].getTime()
queryParams.endTime = value[1].getTime()
// 重新获取数据
getStats()
}
}
/** 获取统计数据 */
const getStats = async () => {
// 获取基础统计数据
statsData.value = await ProductCategoryApi.getIotStatisticsSummary()
// 获取消息统计数据
messageStats.value = await ProductCategoryApi.getIotStatisticsDeviceMessageSummary(queryParams)
// 初始化图表
initCharts()
}
/** 初始化图表 */
const initCharts = () => {
// 设备数量统计
echarts.init(deviceCountChartRef.value).setOption({
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
right: '10%',
align: 'left',
orient: 'vertical',
icon: 'circle'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['50%', '80%'],
avoidLabelOverlap: false,
center: ['30%', '50%'],
label: {
show: false,
position: 'outside'
},
emphasis: {
label: {
show: true,
fontSize: 20,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: Object.entries(statsData.value.productCategoryDeviceCounts).map(([name, value]) => ({
name,
value
}))
}
]
})
// 在线设备统计
initGaugeChart(deviceOnlineCountChartRef.value, statsData.value.deviceOnlineCount, '#0d9')
// 离线设备统计
initGaugeChart(deviceOfflineChartRef.value, statsData.value.deviceOfflineCount, '#f50')
// 待激活设备统计
initGaugeChart(deviceActiveChartRef.value, statsData.value.deviceInactiveCount, '#05b')
// 消息量统计
initMessageChart()
}
/** 初始化仪表盘图表 */
const initGaugeChart = (el: any, value: number, color: string) => {
echarts.init(el).setOption({
series: [
{
type: 'gauge',
startAngle: 360,
endAngle: 0,
min: 0,
max: statsData.value.deviceCount || 100, // 使用设备总数作为最大值
progress: {
show: true,
width: 12,
itemStyle: {
color: color
}
},
axisLine: {
lineStyle: {
width: 12,
color: [[1, '#E5E7EB']]
}
},
axisTick: { show: false },
splitLine: { show: false },
axisLabel: { show: false },
pointer: { show: false },
anchor: { show: false },
title: { show: false },
detail: {
valueAnimation: true,
fontSize: 24,
fontWeight: 'bold',
fontFamily: 'Inter, sans-serif',
color: color,
offsetCenter: [0, '0'],
formatter: (value: number) => {
return `${value} 个`
}
},
data: [{ value: value }]
}
]
})
}
/** 初始化消息统计图表 */
const initMessageChart = () => {
// 获取所有时间戳并排序
// TODO @super：一些 idea 里的红色报错，要去处理掉噢。
const timestamps = Array.from(
new Set([
...messageStats.value.upstreamCounts.map((item) => Number(Object.keys(item)[0])),
...messageStats.value.downstreamCounts.map((item) => Number(Object.keys(item)[0]))
])
).sort((a, b) => a - b) // 确保时间戳从小到大排序
// 准备数据
const xdata = timestamps.map((ts) => formatDate(ts, 'YYYY-MM-DD HH:mm'))
const upData = timestamps.map((ts) => {
const item = messageStats.value.upstreamCounts.find(
(count) => Number(Object.keys(count)[0]) === ts
)
return item ? Object.values(item)[0] : 0
})
const downData = timestamps.map((ts) => {
const item = messageStats.value.downstreamCounts.find(
(count) => Number(Object.keys(count)[0]) === ts
)
return item ? Object.values(item)[0] : 0
})
// 配置图表
echarts.init(deviceMessageCountChartRef.value).setOption({
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255, 255, 255, 0.9)',
borderColor: '#E5E7EB',
textStyle: {
color: '#374151'
}
},
legend: {
data: ['上行消息量', '下行消息量'],
textStyle: {
color: '#374151',
fontWeight: 500
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xdata,
axisLine: {
lineStyle: {
color: '#E5E7EB'
}
},
axisLabel: {
color: '#6B7280'
}
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#E5E7EB'
}
},
axisLabel: {
color: '#6B7280'
},
splitLine: {
lineStyle: {
color: '#F3F4F6'
}
}
},
series: [
{
name: '上行消息量',
type: 'line',
smooth: true, // 添加平滑曲线
data: upData,
itemStyle: {
color: '#3B82F6'
},
lineStyle: {
width: 2
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(59, 130, 246, 0.2)' },
{ offset: 1, color: 'rgba(59, 130, 246, 0)' }
])
}
},
{
name: '下行消息量',
type: 'line',
smooth: true, // 添加平滑曲线
data: downData,
itemStyle: {
color: '#10B981'
},
lineStyle: {
width: 2
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(16, 185, 129, 0.2)' },
{ offset: 1, color: 'rgba(16, 185, 129, 0)' }
])
}
}
]
})
}
/** 初始化 */
onMounted(() => {
getStats()
})
</script>
<style lang="scss" scoped></style>
src/views/iot/plugin/PluginConfigForm.vue deleted 100644 → 0
<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="deployType">
<el-select v-model="formData.deployType" placeholder="请选择部署方式">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PLUGIN_DEPLOY_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</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 { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { PluginConfigApi, PluginConfigVO } from '@/api/iot/plugin'
/** IoT 插件配置 表单 */
defineOptions({ name: 'PluginConfigForm' })
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,
deployType: undefined
})
const formRules = reactive({
name: [{ required: true, message: '插件名称不能为空', trigger: 'blur' }],
deployType: [{ required: true, message: '部署方式不能为空', trigger: 'change' }]
})
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 PluginConfigApi.getPluginConfig(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 PluginConfigVO
if (formType.value === 'create') {
await PluginConfigApi.createPluginConfig(data)
message.success(t('common.createSuccess'))
} else {
await PluginConfigApi.updatePluginConfig(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
name: undefined,
deployType: undefined
}
formRef.value?.resetFields()
}
</script>
src/views/iot/plugin/detail/PluginImportForm.vue deleted 100644 → 0
<template>
<Dialog v-model="dialogVisible" title="插件导入" width="400">
<el-upload
ref="uploadRef"
v-model:file-list="fileList"
:action="importUrl + '?id=' + props.id"
:auto-upload="false"
:disabled="formLoading"
:headers="uploadHeaders"
:limit="1"
:on-error="submitFormError"
:on-exceed="handleExceed"
:on-success="submitFormSuccess"
accept=".jar"
drag
>
<Icon icon="ep:upload" />
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script lang="ts" setup>
import { getAccessToken, getTenantId } from '@/utils/auth'
defineOptions({ name: 'PluginImportForm' })
const props = defineProps<{ id: number }>() // 接收 id 作为 props
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中
const uploadRef = ref()
const importUrl =
import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/iot/plugin-config/upload-file'
const uploadHeaders = ref() // 上传 Header 头
const fileList = ref([]) // 文件列表
/** 打开弹窗 */
const open = () => {
dialogVisible.value = true
fileList.value = []
resetForm()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const submitForm = async () => {
if (fileList.value.length == 0) {
message.error('请上传文件')
return
}
// 提交请求
uploadHeaders.value = {
Authorization: 'Bearer ' + getAccessToken(),
'tenant-id': getTenantId()
}
formLoading.value = true
uploadRef.value!.submit()
}
/** 文件上传成功 */
const emits = defineEmits(['success'])
const submitFormSuccess = (response: any) => {
if (response.code !== 0) {
message.error(response.msg)
formLoading.value = false
return
}
message.alert('上传成功')
formLoading.value = false
dialogVisible.value = false
// 发送操作成功的事件
emits('success')
}
/** 上传错误提示 */
const submitFormError = (): void => {
message.error('上传失败，请您重新上传！')
formLoading.value = false
}
/** 重置表单 */
const resetForm = async (): Promise<void> => {
// 重置上传状态和文件
formLoading.value = false
await nextTick()
uploadRef.value?.clearFiles()
}
/** 文件数超出提示 */
const handleExceed = (): void => {
message.error('最多只能上传一个文件！')
}
</script>
src/views/iot/plugin/detail/index.vue deleted 100644 → 0
<template>
<div>
<div class="flex items-start justify-between">
<div>
<el-col>
<el-row>
<span class="text-xl font-bold">插件配置</span>
</el-row>
</el-col>
</div>
</div>
<ContentWrap class="mt-10px">
<el-descriptions :column="2" direction="horizontal">
<el-descriptions-item label="插件名称">
{{ pluginConfig.name }}
</el-descriptions-item>
<el-descriptions-item label="插件标识">
{{ pluginConfig.pluginKey }}
</el-descriptions-item>
<el-descriptions-item label="版本号">
{{ pluginConfig.version }}
</el-descriptions-item>
<el-descriptions-item label="状态">
<el-switch
v-model="pluginConfig.status"
:active-value="1"
:inactive-value="0"
:disabled="pluginConfig.id <= 0"
@change="handleStatusChange"
/>
</el-descriptions-item>
<el-descriptions-item label="插件描述">
{{ pluginConfig.description }}
</el-descriptions-item>
</el-descriptions>
</ContentWrap>
<!-- TODO @haohao：如果是独立部署，也是通过上传插件包哇？ -->
<ContentWrap class="mt-10px">
<el-button type="warning" plain @click="handleImport" v-hasPermi="['system:user:import']">
<Icon icon="ep:upload" /> 上传插件包
</el-button>
</ContentWrap>
</div>
<!-- TODO @haohao：待完成：配置管理 -->
<!-- TODO @haohao：待完成：script 管理；可以最后搞 -->
<!-- TODO @haohao：插件实例的前端展示：底部要不要加个分页，展示运行中的实力？默认勾选，只展示 state 为在线的 -->
<!-- 插件导入对话框 -->
<PluginImportForm
ref="importFormRef"
:id="pluginConfig.id"
@success="getPluginConfig(pluginConfig.id)"
/>
</template>
<script lang="ts" setup>
import { PluginConfigApi, PluginConfigVO } from '@/api/iot/plugin'
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import PluginImportForm from './PluginImportForm.vue'
const message = useMessage()
const route = useRoute()
const pluginConfig = ref<PluginConfigVO>({
id: 0,
pluginKey: '',
name: '',
description: '',
version: '',
status: 0,
deployType: 0,
fileName: '',
type: 0,
protocol: '',
configSchema: '',
config: '',
script: ''
})
/** 获取插件配置 */
const getPluginConfig = async (id: number) => {
pluginConfig.value = await PluginConfigApi.getPluginConfig(id)
}
/** 处理状态变更 */
const handleStatusChange = async (status: number) => {
if (pluginConfig.value.id <= 0) {
return
}
try {
// 修改状态的二次确认
const text = status === 1 ? '启用' : '停用'
await message.confirm('确认要"' + text + '"插件吗?')
await PluginConfigApi.updatePluginStatus({
id: pluginConfig.value.id,
status
})
message.success('更新状态成功')
// 获取配置
await getPluginConfig(pluginConfig.value.id)
} catch (error) {
pluginConfig.value.status = status === 1 ? 0 : 1
message.error('更新状态失败')
}
}
/** 插件导入 */
const importFormRef = ref()
const handleImport = () => {
importFormRef.value.open()
}
/** 初始化插件配置 */
onMounted(() => {
const id = Number(route.params.id)
if (id) {
getPluginConfig(id)
}
})
</script>
src/views/iot/plugin/index.vue deleted 100644 → 0
<!-- TODO @haohao：搞到 config 目录，会不会更好哈 -->
<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="status">
<el-select
v-model="queryParams.status"
placeholder="请选择状态"
clearable
@change="handleQuery"
class="!w-240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PLUGIN_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</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:plugin-config:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<template v-if="viewMode === 'list'">
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="插件名称" align="center" prop="name" />
<el-table-column label="插件标识" align="center" prop="pluginKey" />
<el-table-column label="jar 包" align="center" prop="fileName" />
<el-table-column label="版本号" align="center" prop="version" />
<el-table-column label="部署方式" align="center" prop="deployType">
<template #default="scope">
<dict-tag :type="DICT_TYPE.IOT_PLUGIN_DEPLOY_TYPE" :value="scope.row.deployType" />
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<el-switch
v-model="scope.row.status"
:active-value="1"
:inactive-value="0"
@change="handleStatusChange(scope.row.id, Number($event))"
/>
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
: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:plugin-config:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['iot:plugin-config:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</template>
<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 relative overflow-hidden"
:body-style="{ padding: '0' }"
>
<div class="p-4 relative">
<!-- 标题区域 -->
<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 flex-1">{{ item.name }}</div>
<!-- 添加插件状态标签 -->
<div class="inline-flex items-center">
<div
class="w-1 h-1 rounded-full mr-1.5"
:class="
item.status === 1
? 'bg-[var(--el-color-success)]'
: 'bg-[var(--el-color-danger)]'
"
>
</div>
<el-text
class="!text-xs font-bold"
:type="item.status === 1 ? 'success' : 'danger'"
>
{{ item.status === 1 ? '开启' : '禁用' }}
</el-text>
</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-[#0b1d30] whitespace-normal break-all">
{{ item.pluginKey }}
</span>
</div>
<div class="mb-2.5 last:mb-0">
<span class="text-[#717c8e] mr-2.5">jar 包</span>
<span class="text-[#0b1d30]">{{ item.fileName }}</span>
</div>
<div class="mb-2.5 last:mb-0">
<span class="text-[#717c8e] mr-2.5">版本号</span>
<span class="text-[#0b1d30]">{{ item.version }}</span>
</div>
<div class="mb-2.5 last:mb-0">
<span class="text-[#717c8e] mr-2.5">部署方式</span>
<dict-tag :type="DICT_TYPE.IOT_PLUGIN_DEPLOY_TYPE" :value="item.deployType" />
</div>
</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:plugin-config: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>
<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>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<PluginConfigForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import { PluginConfigApi, PluginConfigVO } from '@/api/iot/plugin'
import PluginConfigForm from './PluginConfigForm.vue'
/** IoT 插件配置 列表 */
defineOptions({ name: 'IoTPlugin' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<PluginConfigVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: undefined,
status: undefined
})
const queryFormRef = ref() // 搜索的表单
const defaultIconUrl = ref('/src/assets/svgs/iot/card-fill.svg') // 默认插件图标
const viewMode = ref<'card' | 'list'>('card') // 视图模式状态
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await PluginConfigApi.getPluginConfigPage(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 { push } = useRouter()
const openDetail = (id: number) => {
push({ name: 'IoTPluginDetail', params: { id } })
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await PluginConfigApi.deletePluginConfig(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 处理状态变更 */
const handleStatusChange = async (id: number, status: number) => {
try {
// 修改状态的二次确认
const text = status === 1 ? '启用' : '停用'
await message.confirm('确认要"' + text + '"插件吗?')
await PluginConfigApi.updatePluginStatus({
id: id,
status
})
message.success('更新状态成功')
getList()
} catch (error) {
message.error('更新状态失败')
}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
src/views/iot/product/category/ProductCategoryForm.vue deleted 100644 → 0
<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="sort">
<el-input v-model="formData.sort" 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 { ProductCategoryApi, ProductCategoryVO } from '@/api/iot/product/category'
import { CommonStatusEnum } from '@/utils/constants'
/** IoT 产品分类 表单 */
defineOptions({ name: 'ProductCategoryForm' })
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,
sort: 0,
status: CommonStatusEnum.ENABLE,
description: undefined
})
const formRules = reactive({
name: [{ required: true, message: '分类名字不能为空', trigger: 'blur' }],
status: [{ required: true, message: '分类状态不能为空', trigger: 'blur' }],
sort: [{ 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 ProductCategoryApi.getProductCategory(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 ProductCategoryVO
if (formType.value === 'create') {
await ProductCategoryApi.createProductCategory(data)
message.success(t('common.createSuccess'))
} else {
await ProductCategoryApi.updateProductCategory(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
name: undefined,
sort: 0,
status: CommonStatusEnum.ENABLE,
description: undefined
}
formRef.value?.resetFields()
}
</script>
src/views/iot/product/category/index.vue deleted 100644 → 0
<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:product-category: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="sort" />
<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" min-width="120px">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['iot:product-category:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['iot:product-category: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>
<!-- 表单弹窗：添加/修改 -->
<ProductCategoryForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import { ProductCategoryApi, ProductCategoryVO } from '@/api/iot/product/category'
import ProductCategoryForm from './ProductCategoryForm.vue'
/** IoT 产品分类列表 */
defineOptions({ name: 'IotProductCategory' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<ProductCategoryVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: undefined,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await ProductCategoryApi.getProductCategoryPage(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 ProductCategoryApi.deleteProductCategory(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
src/views/iot/product/product/ProductForm.vue deleted 100644 → 0
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="110px"
v-loading="formLoading"
>
<el-form-item label="ProductKey" prop="productKey">
<el-input
v-model="formData.productKey"
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="请输入产品名称" />
</el-form-item>
<el-form-item label="产品分类" prop="categoryId">
<el-select v-model="formData.categoryId" placeholder="请选择产品分类" clearable>
<el-option
v-for="category in categoryList"
:key="category.id"
:label="category.name"
:value="category.id"
/>
</el-select>
</el-form-item>
<el-form-item label="设备类型" prop="deviceType">
<el-radio-group v-model="formData.deviceType" :disabled="formType === 'update'">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
v-if="[DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY].includes(formData.deviceType)"
label="联网方式"
prop="netType"
>
<el-select
v-model="formData.netType"
placeholder="请选择联网方式"
:disabled="formType === 'update'"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_NET_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="formData.deviceType === DeviceTypeEnum.GATEWAY_SUB"
label="接入网关协议"
prop="protocolType"
>
<el-select
v-model="formData.protocolType"
placeholder="请选择接入网关协议"
:disabled="formType === 'update'"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PROTOCOL_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="数据格式" prop="dataFormat">
<el-radio-group v-model="formData.dataFormat" :disabled="formType === 'update'">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DATA_FORMAT)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="数据校验级别" prop="validateType">
<el-radio-group v-model="formData.validateType" :disabled="formType === 'update'">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_VALIDATE_TYPE)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-collapse>
<el-collapse-item title="更多配置">
<el-form-item label="产品图标" prop="icon">
<UploadImg v-model="formData.icon" :height="'80px'" :width="'80px'" />
</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="description">
<el-input type="textarea" v-model="formData.description" placeholder="请输入产品描述" />
</el-form-item>
</el-collapse-item>
</el-collapse>
</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 {
ValidateTypeEnum,
ProductApi,
ProductVO,
DataFormatEnum,
DeviceTypeEnum
} from '@/api/iot/product/product'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { ProductCategoryApi, ProductCategoryVO } from '@/api/iot/product/category'
import { UploadImg } from '@/components/UploadFile'
import { generateRandomStr } from '@/utils'
defineOptions({ name: 'IoTProductForm' })
const { t } = useI18n()
const message = useMessage()
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formLoading = ref(false)
const formType = ref('')
const formData = ref({
id: undefined,
name: undefined,
productKey: '',
categoryId: undefined,
icon: undefined,
picUrl: undefined,
description: undefined,
deviceType: undefined,
netType: undefined,
protocolType: undefined,
protocolId: undefined,
dataFormat: DataFormatEnum.JSON,
validateType: ValidateTypeEnum.WEAK
})
const formRules = reactive({
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' }],
netType: [
{
required: true,
message: '联网方式不能为空',
trigger: 'change'
}
],
protocolType: [
{
required: true,
message: '接入网关协议不能为空',
trigger: 'change'
}
],
dataFormat: [{ required: true, message: '数据格式不能为空', trigger: 'change' }],
validateType: [{ required: true, message: '数据校验级别不能为空', trigger: 'change' }]
})
const formRef = ref()
const categoryList = ref<ProductCategoryVO[]>([]) // 产品分类列表
/** 打开弹窗 */
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 ProductApi.getProduct(id)
} finally {
formLoading.value = false
}
} else {
// 新增时，生成随机 productKey
generateProductKey()
}
// 加载分类列表
categoryList.value = await ProductCategoryApi.getSimpleProductCategoryList()
}
defineExpose({ open, close: () => (dialogVisible.value = false) })
/** 提交表单 */
const emit = defineEmits(['success'])
const submitForm = async () => {
await formRef.value.validate()
formLoading.value = true
try {
const data = formData.value as unknown as ProductVO
if (formType.value === 'create') {
await ProductApi.createProduct(data)
message.success(t('common.createSuccess'))
} else {
await ProductApi.updateProduct(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false // 确保关闭弹框
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
name: undefined,
productKey: '',
categoryId: undefined,
icon: undefined,
picUrl: undefined,
description: undefined,
deviceType: undefined,
netType: undefined,
protocolType: undefined,
protocolId: undefined,
dataFormat: DataFormatEnum.JSON,
validateType: ValidateTypeEnum.WEAK
}
formRef.value?.resetFields()
}
/** 生成 ProductKey */
const generateProductKey = () => {
formData.value.productKey = generateRandomStr(16)
}
</script>
src/views/iot/product/product/detail/ProductDetailsHeader.vue deleted 100644 → 0
<template>
<div>
<div class="flex items-start justify-between">
<div>
<el-col>
<el-row>
<span class="text-xl font-bold">{{ product.name }}</span>
</el-row>
</el-col>
</div>
<div>
<!-- 右上：按钮 -->
<el-button
@click="openForm('update', product.id)"
v-hasPermi="['iot:product:update']"
v-if="product.status === 0"
>
编辑
</el-button>
<el-button
type="primary"
@click="confirmPublish(product.id)"
v-hasPermi="['iot:product:update']"
v-if="product.status === 0"
>
发布
</el-button>
<el-button
type="danger"
@click="confirmUnpublish(product.id)"
v-hasPermi="['iot:product:update']"
v-if="product.status === 1"
>
撤销发布
</el-button>
</div>
</div>
</div>
<ContentWrap class="mt-10px">
<el-descriptions :column="5" direction="horizontal">
<el-descriptions-item label="ProductKey">
{{ product.productKey }}
<el-button @click="copyToClipboard(product.productKey)">复制</el-button>
</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="5" direction="horizontal">
<el-descriptions-item label="设备数">
{{ product.deviceCount ?? '加载中...' }}
<el-button @click="goToDeviceList(product.id)">前往管理</el-button>
</el-descriptions-item>
</el-descriptions>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<ProductForm ref="formRef" @success="emit('refresh')" />
</template>
<script setup lang="ts">
import ProductForm from '@/views/iot/product/product/ProductForm.vue'
import { ProductApi, ProductVO } from '@/api/iot/product/product'
const message = useMessage()
const { product } = defineProps<{ product: ProductVO }>() // 定义 Props
/** 复制到剪贴板方法 */
const copyToClipboard = async (text: string) => {
try {
await navigator.clipboard.writeText(text)
message.success('复制成功')
} catch (error) {
message.error('复制失败')
}
}
/** 路由跳转到设备管理 */
const { push } = useRouter()
const goToDeviceList = (productId: number) => {
push({ name: 'IoTDevice', params: { productId } })
}
/** 修改操作 */
const emit = defineEmits(['refresh']) // 定义 Emits
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 发布操作 */
const confirmPublish = async (id: number) => {
try {
await ProductApi.updateProductStatus(id, 1)
message.success('发布成功')
formRef.value.close() // 关闭弹框
emit('refresh')
} catch (error) {
message.error('发布失败')
}
}
/** 撤销发布操作 */
const confirmUnpublish = async (id: number) => {
try {
await ProductApi.updateProductStatus(id, 0)
message.success('撤销发布成功')
formRef.value.close() // 关闭弹框
emit('refresh')
} catch (error) {
message.error('撤销发布失败')
}
}
</script>
src/views/iot/product/product/detail/ProductDetailsInfo.vue deleted 100644 → 0
<template>
<ContentWrap>
<el-descriptions :column="3" title="产品信息">
<el-descriptions-item label="产品名称">{{ product.name }}</el-descriptions-item>
<el-descriptions-item label="所属分类">{{ product.categoryName }}</el-descriptions-item>
<el-descriptions-item label="设备类型">
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE" :value="product.deviceType" />
</el-descriptions-item>
<el-descriptions-item label="创建时间">
{{ formatDate(product.createTime) }}
</el-descriptions-item>
<el-descriptions-item label="数据格式">
<dict-tag :type="DICT_TYPE.IOT_DATA_FORMAT" :value="product.dataFormat" />
</el-descriptions-item>
<el-descriptions-item label="数据校验级别">
<dict-tag :type="DICT_TYPE.IOT_VALIDATE_TYPE" :value="product.validateType" />
</el-descriptions-item>
<el-descriptions-item label="产品状态">
<dict-tag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="product.status" />
</el-descriptions-item>
<el-descriptions-item
label="联网方式"
v-if="[DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY].includes(product.deviceType)"
>
<dict-tag :type="DICT_TYPE.IOT_NET_TYPE" :value="product.netType" />
</el-descriptions-item>
<el-descriptions-item
label="接入网关协议"
v-if="product.deviceType === DeviceTypeEnum.GATEWAY_SUB"
>
<dict-tag :type="DICT_TYPE.IOT_PROTOCOL_TYPE" :value="product.protocolType" />
</el-descriptions-item>
<el-descriptions-item label="产品描述">{{ product.description }}</el-descriptions-item>
</el-descriptions>
</ContentWrap>
</template>
<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { DeviceTypeEnum, ProductVO } from '@/api/iot/product/product'
import { formatDate } from '@/utils/formatTime'
const { product } = defineProps<{ product: ProductVO }>()
</script>
src/views/iot/product/product/detail/ProductTopic.vue deleted 100644 → 0
<template>
<ContentWrap>
<el-tabs>
<el-tab-pane label="基础通信 Topic">
<Table
:columns="basicColumn"
:data="basicData"
:span-method="createSpanMethod(basicData)"
align="left"
headerAlign="left"
border="true"
/>
</el-tab-pane>
<el-tab-pane label="物模型通信 Topic">
<Table
:columns="functionColumn"
:data="functionData"
:span-method="createSpanMethod(functionData)"
align="left"
headerAlign="left"
border="true"
/>
</el-tab-pane>
</el-tabs>
</ContentWrap>
</template>
<script setup lang="ts">
import { ProductVO } from '@/api/iot/product/product'
const props = defineProps<{ product: ProductVO }>()
// TODO 芋艿：不确定未来会不会改，所以先写死
// 基础通信 Topic 列
const basicColumn = reactive([
{ label: '功能', field: 'function', width: 150 },
{ label: 'Topic 类', field: 'topicClass', width: 800 },
{ label: '操作权限', field: 'operationPermission', width: 100 },
{ label: '描述', field: 'description' }
])
// 基础通信 Topic 数据
const basicData = computed(() => {
if (!props.product || !props.product.productKey) return []
return [
{
function: 'OTA 升级',
topicClass: `/ota/device/inform/${props.product.productKey}/\${deviceName}`,
operationPermission: '发布',
description: '设备上报固件升级信息'
},
{
function: 'OTA 升级',
topicClass: `/ota/device/upgrade/${props.product.productKey}/\${deviceName}`,
operationPermission: '订阅',
description: '固件升级信息下行'
},
{
function: 'OTA 升级',
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/ota/firmware/get`,
operationPermission: '发布',
description: '设备上报固件升级进度'
},
{
function: 'OTA 升级',
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/ota/firmware/get`,
operationPermission: '发布',
description: '设备主动拉取固件升级信息'
},
{
function: '设备标签',
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/deviceinfo/update`,
operationPermission: '发布',
description: '设备上报标签数据'
},
{
function: '设备标签',
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/deviceinfo/update_reply`,
operationPermission: '订阅',
description: '云端响应标签上报'
},
{
function: '设备标签',
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/deviceinfo/delete`,
operationPermission: '订阅',
description: '设备删除标签信息'
},
{
function: '设备标签',
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/deviceinfo/delete_reply`,
operationPermission: '订阅',
description: '云端响应标签删除'
},
{
function: '时钟同步',
topicClass: `/ext/ntp/${props.product.productKey}/\${deviceName}/request`,
operationPermission: '发布',
description: 'NTP 时钟同步请求'
},
{
function: '时钟同步',
topicClass: `/ext/ntp/${props.product.productKey}/\${deviceName}/response`,
operationPermission: '订阅',
description: 'NTP 时钟同步响应'
},
{
function: '设备影子',
topicClass: `/shadow/update/${props.product.productKey}/\${deviceName}`,
operationPermission: '发布',
description: '设备影子发布'
},
{
function: '设备影子',
topicClass: `/shadow/get/${props.product.productKey}/\${deviceName}`,
operationPermission: '订阅',
description: '设备接收影子变更'
},
{
function: '配置更新',
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/config/push`,
operationPermission: '订阅',
description: '云端主动下推配置信息'
},
{
function: '配置更新',
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/config/get`,
operationPermission: '发布',
description: '设备端查询配置信息'
},
{
function: '配置更新',
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/config/get_reply`,
operationPermission: '订阅',
description: '云端响应配置信息'
},
{
function: '广播',
topicClass: `/broadcast/${props.product.productKey}/\${identifier}`,
operationPermission: '订阅',
description: '广播 Topic，identifier 为用户自定义字符串'
}
]
})
// 物模型通信 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 [
{
function: '属性上报',
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/event/property/post`,
operationPermission: '发布',
description: '设备属性上报'
},
{
function: '属性上报',
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/event/property/post_reply`,
operationPermission: '订阅',
description: '云端响应属性上报'
},
{
function: '属性设置',
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/service/property/set`,
operationPermission: '订阅',
description: '设备属性设置'
},
{
function: '事件上报',
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/event/\${tsl.event.identifier}/post`,
operationPermission: '发布',
description: '设备事件上报'
},
{
function: '事件上报',
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/event/\${tsl.event.identifier}/post_reply`,
operationPermission: '订阅',
description: '云端响应事件上报'
},
{
function: '服务调用',
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/service/\${tsl.service.identifier}`,
operationPermission: '订阅',
description: '设备服务调用'
},
{
function: '服务调用',
topicClass: `/sys/${props.product.productKey}/\${deviceName}/thing/service/\${tsl.service.identifier}_reply`,
operationPermission: '发布',
description: '设备端响应服务调用'
}
]
})
// 通用的单元格合并方法生成器
const createSpanMethod = (data: any[]) => {
// 预处理，计算每个功能的合并行数
const rowspanMap: Record<number, number> = {}
let currentFunction = ''
let startIndex = 0
let count = 0
data.forEach((item, index) => {
if (item.function !== currentFunction) {
if (count > 0) {
rowspanMap[startIndex] = count
}
currentFunction = item.function
startIndex = index
count = 1
} else {
count++
}
})
// 处理最后一组
if (count > 0) {
rowspanMap[startIndex] = count
}
// 返回 span 方法
return ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
if (columnIndex === 0) {
// 仅对“功能”列进行合并
const rowspan = rowspanMap[rowIndex] || 0
if (rowspan > 0) {
return {
rowspan,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
</script>
src/views/iot/product/product/detail/index.vue deleted 100644 → 0
<template>
<ProductDetailsHeader :loading="loading" :product="product" @refresh="() => getProductData(id)" />
<el-col>
<el-tabs v-model="activeTab">
<el-tab-pane label="产品信息" name="info">
<ProductDetailsInfo v-if="activeTab === 'info'" :product="product" />
</el-tab-pane>
<el-tab-pane label="Topic 类列表" name="topic">
<ProductTopic v-if="activeTab === 'topic'" :product="product" />
</el-tab-pane>
<el-tab-pane label="功能定义" lazy name="thingModel">
<IoTProductThingModel ref="thingModelRef" />
</el-tab-pane>
<el-tab-pane label="消息解析" name="message" />
<el-tab-pane label="服务端订阅" name="subscription" />
</el-tabs>
</el-col>
</template>
<script lang="ts" setup>
import { ProductApi, ProductVO } from '@/api/iot/product/product'
import { DeviceApi } from '@/api/iot/device/device'
import ProductDetailsHeader from './ProductDetailsHeader.vue'
import ProductDetailsInfo from './ProductDetailsInfo.vue'
import ProductTopic from './ProductTopic.vue'
import IoTProductThingModel from '@/views/iot/thingmodel/index.vue'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { useRouter } from 'vue-router'
import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
defineOptions({ name: 'IoTProductDetail' })
const { delView } = useTagsViewStore() // 视图操作
const { currentRoute } = useRouter()
const route = useRoute()
const message = useMessage()
const id = route.params.id // 编号
const loading = ref(true) // 加载中
const product = ref<ProductVO>({} as ProductVO) // 详情
const activeTab = ref('info') // 默认为 info 标签页
provide(IOT_PROVIDE_KEY.PRODUCT, product) // 提供产品信息给产品信息详情页的所有子组件
/** 获取详情 */
const getProductData = async (id: number) => {
loading.value = true
try {
product.value = await ProductApi.getProduct(id)
} finally {
loading.value = false
}
}
/** 查询设备数量 */
const getDeviceCount = async (productId: number) => {
try {
return await DeviceApi.getDeviceCount(productId)
} catch (error) {
console.error('Error fetching device count:', error, 'productId:', productId)
return 0
}
}
/** 初始化 */
onMounted(async () => {
if (!id) {
message.warning('参数错误，产品不能为空！')
delView(unref(currentRoute))
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)
}
})
</script>
src/views/iot/product/product/index.vue deleted 100644 → 0
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
ref="queryFormRef"
:inline="true"
:model="queryParams"
class="-mb-15px"
label-width="68px"
>
<el-form-item label="产品名称" prop="name">
<el-input
v-model="queryParams.name"
class="!w-240px"
clearable
placeholder="请输入产品名称"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="ProductKey" prop="productKey">
<el-input
v-model="queryParams.productKey"
class="!w-240px"
clearable
placeholder="请输入产品标识"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon class="mr-5px" icon="ep:search" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon class="mr-5px" icon="ep:refresh" />
重置
</el-button>
<el-button
v-hasPermi="['iot:product:create']"
plain
type="primary"
@click="openForm('create')"
>
<Icon class="mr-5px" icon="ep:plus" />
新增
</el-button>
<el-button
v-hasPermi="['iot:product:export']"
:loading="exportLoading"
plain
type="success"
@click="handleExport"
>
<Icon class="mr-5px" icon="ep:download" />
导出
</el-button>
</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>
</ContentWrap>
<!-- 卡片视图 -->
<ContentWrap>
<el-row v-if="viewMode === 'card'" :gutter="16">
<el-col v-for="item in list" :key="item.id" :lg="6" :md="12" :sm="12" :xs="24" class="mb-4">
<el-card :body-style="{ padding: '0' }" class="h-full transition-colors">
<!-- 内容区域 -->
<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] inline-block align-middle overflow-hidden text-ellipsis whitespace-nowrap max-w-[140px]">
{{ 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
v-hasPermi="['iot:product:update']"
class="flex-1 !px-2 !h-[32px] text-[13px]"
plain
type="primary"
@click="openForm('update', item.id)"
>
<Icon class="mr-1" icon="ep:edit-pen" />
编辑
</el-button>
<el-button
class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]"
plain
type="warning"
@click="openDetail(item.id)"
>
<Icon class="mr-1" icon="ep:view" />
详情
</el-button>
<el-button
class="flex-1 !px-2 !h-[32px] !ml-[10px] text-[13px]"
plain
type="success"
@click="openObjectModel(item)"
>
<Icon class="mr-1" icon="ep:scale-to-original" />
物模型
</el-button>
<div class="mx-[10px] h-[20px] w-[1px] bg-[#dcdfe6]"></div>
<el-button
v-hasPermi="['iot:product:delete']"
:disabled="item.status === 1"
class="!px-2 !h-[32px] text-[13px]"
plain
type="danger"
@click="handleDelete(item.id)"
>
<Icon icon="ep:delete" />
</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
<!-- 列表视图 -->
<el-table v-else v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
<el-table-column align="center" label="ID" prop="id" />
<el-table-column align="center" label="ProductKey" prop="productKey" />
<el-table-column align="center" label="品类" prop="categoryName" />
<el-table-column align="center" label="设备类型" 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 align="center" label="产品图标" prop="icon">
<template #default="scope">
<el-image
v-if="scope.row.icon"
:preview-src-list="[scope.row.icon]"
:src="scope.row.icon"
class="w-40px h-40px"
/>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column align="center" label="产品图片" prop="picture">
<template #default="scope">
<el-image
v-if="scope.row.picUrl"
:preview-src-list="[scope.row.picture]"
:src="scope.row.picUrl"
class="w-40px h-40px"
/>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column
:formatter="dateFormatter"
align="center"
label="创建时间"
prop="createTime"
width="180px"
/>
<el-table-column align="center" label="操作">
<template #default="scope">
<el-button
v-hasPermi="['iot:product:query']"
link
type="primary"
@click="openDetail(scope.row.id)"
>
查看
</el-button>
<el-button
v-hasPermi="['iot:product:update']"
link
type="primary"
@click="openForm('update', scope.row.id)"
>
编辑
</el-button>
<el-button
v-hasPermi="['iot:product:delete']"
:disabled="scope.row.status === 1"
link
type="danger"
@click="handleDelete(scope.row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
v-model:limit="queryParams.pageSize"
v-model:page="queryParams.pageNo"
:total="total"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<ProductForm ref="formRef" @success="getList" />
</template>
<script lang="ts" setup>
import { dateFormatter } from '@/utils/formatTime'
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({
pageNo: 1,
pageSize: 10,
name: undefined,
productKey: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出加载中
const viewMode = ref<'card' | 'list'>('card') // 视图模式状态
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await ProductApi.getProductPage(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 openDetail = (id: number) => {
push({ name: 'IoTProductDetail', params: { id } })
}
/** 打开物模型 */
const openObjectModel = (item: ProductVO) => {
push({
name: 'IoTProductDetail',
params: { id: item.id },
query: { tab: 'thingModel' }
})
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await ProductApi.deleteProduct(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await ProductApi.exportProduct(queryParams)
download.excel(data, '物联网产品.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 初始化 **/
onMounted(() => {
getList()
// 处理 tab 参数
const { tab } = route.query
if (tab) {
activeName.value = tab as string
}
})
</script>
src/views/iot/rule/databridge/IoTDataBridgeForm.vue deleted 100644 → 0
<template>
<Dialog v-model="dialogVisible" :title="dialogTitle">
<el-form
ref="formRef"
v-loading="formLoading"
:model="formData"
:rules="formRules"
label-width="120px"
>
<el-form-item label="桥梁名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入桥梁名称" />
</el-form-item>
<el-form-item label="桥梁方向" prop="direction">
<el-radio-group v-model="formData.direction">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DATA_BRIDGE_DIRECTION_ENUM)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="桥梁类型" prop="type">
<el-radio-group :model-value="formData.type" @change="handleTypeChange">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DATA_BRIDGE_TYPE_ENUM)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<HttpConfigForm v-if="showConfig(IoTDataBridgeConfigType.HTTP)" v-model="formData.config" />
<MqttConfigForm v-if="showConfig(IoTDataBridgeConfigType.MQTT)" v-model="formData.config" />
<RocketMQConfigForm
v-if="showConfig(IoTDataBridgeConfigType.ROCKETMQ)"
v-model="formData.config"
/>
<KafkaMQConfigForm
v-if="showConfig(IoTDataBridgeConfigType.KAFKA)"
v-model="formData.config"
/>
<RabbitMQConfigForm
v-if="showConfig(IoTDataBridgeConfigType.RABBITMQ)"
v-model="formData.config"
/>
<RedisStreamMQConfigForm
v-if="showConfig(IoTDataBridgeConfigType.REDIS_STREAM)"
v-model="formData.config"
/>
<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 v-model="formData.description" height="150px" type="textarea" />
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script lang="ts" setup>
import { DICT_TYPE, getDictObj, getIntDictOptions } from '@/utils/dict'
import { DataBridgeApi, DataBridgeVO, IoTDataBridgeConfigType } from '@/api/iot/rule/databridge'
import {
HttpConfigForm,
KafkaMQConfigForm,
MqttConfigForm,
RabbitMQConfigForm,
RedisStreamMQConfigForm,
RocketMQConfigForm
} from './config'
/** IoT 数据桥梁的表单 */
defineOptions({ name: 'IoTDataBridgeForm' })
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<DataBridgeVO>({
status: 0,
direction: 1, // TODO @puhui999:枚举类
type: 1, // TODO @puhui999:枚举类
config: {} as any
})
const formRules = reactive({
// 通用字段
name: [{ required: true, message: '桥梁名称不能为空', trigger: 'blur' }],
status: [{ required: true, message: '桥梁状态不能为空', trigger: 'blur' }],
direction: [{ required: true, message: '桥梁方向不能为空', trigger: 'blur' }],
type: [{ required: true, message: '桥梁类型不能为空', trigger: 'change' }],
// HTTP 配置
'config.url': [{ required: true, message: '请求地址不能为空', trigger: 'blur' }],
'config.method': [{ required: true, message: '请求方法不能为空', trigger: 'blur' }],
// MQTT 配置
'config.username': [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
'config.password': [{ required: true, message: '密码不能为空', trigger: 'blur' }],
'config.clientId': [{ required: true, message: '客户端ID不能为空', trigger: 'blur' }],
'config.topic': [{ required: true, message: '主题不能为空', trigger: 'blur' }],
// RocketMQ 配置
'config.nameServer': [{ required: true, message: 'NameServer 地址不能为空', trigger: 'blur' }],
'config.accessKey': [{ required: true, message: 'AccessKey 不能为空', trigger: 'blur' }],
'config.secretKey': [{ required: true, message: 'SecretKey 不能为空', trigger: 'blur' }],
'config.group': [{ required: true, message: '消费组不能为空', trigger: 'blur' }],
// Kafka 配置
'config.bootstrapServers': [{ required: true, message: '服务地址不能为空', trigger: 'blur' }],
'config.ssl': [{ required: true, message: 'SSL 配置不能为空', trigger: 'change' }],
// RabbitMQ 配置
'config.host': [{ required: true, message: '主机地址不能为空', trigger: 'blur' }],
'config.port': [
{ required: true, message: '端口不能为空', trigger: 'blur' },
{ type: 'number', min: 1, max: 65535, message: '端口号范围 1-65535', trigger: 'blur' }
],
'config.virtualHost': [{ required: true, message: '虚拟主机不能为空', trigger: 'blur' }],
'config.exchange': [{ required: true, message: '交换机不能为空', trigger: 'blur' }],
'config.routingKey': [{ required: true, message: '路由键不能为空', trigger: 'blur' }],
'config.queue': [{ required: true, message: '队列不能为空', trigger: 'blur' }],
// Redis Stream 配置
'config.database': [
{ required: true, message: '数据库索引不能为空', trigger: 'blur' },
{ type: 'number', min: 0, message: '数据库索引必须是非负整数', trigger: 'blur' }
]
})
const formRef = ref() // 表单 Ref
const showConfig = computed(() => (val: string) => {
const dict = getDictObj(DICT_TYPE.IOT_DATA_BRIDGE_TYPE_ENUM, formData.value.type)
return dict && dict.value + '' === val
}) // 显示对应的 Config 配置项
/** 打开弹窗 */
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 DataBridgeApi.getDataBridge(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 DataBridgeVO
if (formType.value === 'create') {
await DataBridgeApi.createDataBridge(data)
message.success(t('common.createSuccess'))
} else {
await DataBridgeApi.updateDataBridge(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 处理类型切换事件 */
const handleTypeChange = (val: number) => {
formData.value.type = val
// 切换类型时重置配置
formData.value.config = {} as any
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
// TODO @puhui999：换成枚举值哈
status: 0,
direction: 1,
type: 1,
config: {} as any
}
formRef.value?.resetFields()
}
</script>
src/views/iot/rule/databridge/config/HttpConfigForm.vue deleted 100644 → 0
<template>
<el-form-item label="请求地址" prop="config.url">
<el-input v-model="urlPath" placeholder="请输入请求地址">
<template #prepend>
<el-select v-model="urlPrefix" placeholder="Select" style="width: 115px">
<el-option label="http://" value="http://" />
<el-option label="https://" value="https://" />
</el-select>
</template>
</el-input>
</el-form-item>
<el-form-item label="请求方法" prop="config.method">
<el-select v-model="config.method" placeholder="请选择请求方法">
<el-option label="GET" value="GET" />
<el-option label="POST" value="POST" />
<el-option label="PUT" value="PUT" />
<el-option label="DELETE" value="DELETE" />
</el-select>
</el-form-item>
<el-form-item label="请求头" prop="config.headers">
<key-value-editor v-model="config.headers" add-button-text="添加请求头" />
</el-form-item>
<el-form-item label="请求参数" prop="config.query">
<key-value-editor v-model="config.query" add-button-text="添加参数" />
</el-form-item>
<el-form-item label="请求体" prop="config.body">
<el-input v-model="config.body" placeholder="请输入内容" type="textarea" />
</el-form-item>
</template>
<script lang="ts" setup>
import { HttpConfig, IoTDataBridgeConfigType } from '@/api/iot/rule/databridge'
import { useVModel } from '@vueuse/core'
import { isEmpty } from '@/utils/is'
import KeyValueEditor from './components/KeyValueEditor.vue'
defineOptions({ name: 'HttpConfigForm' })
const props = defineProps<{
modelValue: any
}>()
const emit = defineEmits(['update:modelValue'])
const config = useVModel(props, 'modelValue', emit) as Ref<HttpConfig>
/** URL处理 */
const urlPrefix = ref('http://')
const urlPath = ref('')
const fullUrl = computed(() => {
return urlPath.value ? urlPrefix.value + urlPath.value : ''
})
/** 监听 URL 变化 */
watch([urlPrefix, urlPath], () => {
config.value.url = fullUrl.value
})
/** 组件初始化 */
onMounted(() => {
if (!isEmpty(config.value)) {
// 初始化 URL
if (config.value.url) {
if (config.value.url.startsWith('https://')) {
urlPrefix.value = 'https://'
urlPath.value = config.value.url.substring(8)
} else if (config.value.url.startsWith('http://')) {
urlPrefix.value = 'http://'
urlPath.value = config.value.url.substring(7)
} else {
urlPath.value = config.value.url
}
}
return
}
config.value = {
type: IoTDataBridgeConfigType.HTTP,
url: '',
method: 'POST',
headers: {},
query: {},
body: ''
}
})
</script>
src/views/iot/rule/databridge/config/KafkaMQConfigForm.vue deleted 100644 → 0
<template>
<el-form-item label="服务地址" prop="config.bootstrapServers">
<el-input v-model="config.bootstrapServers" placeholder="请输入服务地址，如：localhost:9092" />
</el-form-item>
<el-form-item label="用户名" prop="config.username">
<el-input v-model="config.username" placeholder="请输入用户名" />
</el-form-item>
<el-form-item label="密码" prop="config.password">
<el-input v-model="config.password" placeholder="请输入密码" show-password type="password" />
</el-form-item>
<el-form-item label="启用 SSL" prop="config.ssl">
<el-switch v-model="config.ssl" />
</el-form-item>
<el-form-item label="主题" prop="config.topic">
<el-input v-model="config.topic" placeholder="请输入主题" />
</el-form-item>
</template>
<script lang="ts" setup>
import { IoTDataBridgeConfigType, KafkaMQConfig } from '@/api/iot/rule/databridge'
import { useVModel } from '@vueuse/core'
import { isEmpty } from '@/utils/is'
defineOptions({ name: 'KafkaMQConfigForm' })
const props = defineProps<{
modelValue: any
}>()
const emit = defineEmits(['update:modelValue'])
const config = useVModel(props, 'modelValue', emit) as Ref<KafkaMQConfig>
/** 组件初始化 */
onMounted(() => {
if (!isEmpty(config.value)) {
return
}
config.value = {
type: IoTDataBridgeConfigType.KAFKA,
bootstrapServers: '',
username: '',
password: '',
ssl: false,
topic: ''
}
})
</script>
src/views/iot/rule/databridge/config/MqttConfigForm.vue deleted 100644 → 0
<template>
<el-form-item label="服务地址" prop="config.url">
<el-input v-model="config.url" placeholder="请输入MQTT服务地址，如：mqtt://localhost:1883" />
</el-form-item>
<el-form-item label="用户名" prop="config.username">
<el-input v-model="config.username" placeholder="请输入用户名" />
</el-form-item>
<el-form-item label="密码" prop="config.password">
<el-input v-model="config.password" placeholder="请输入密码" show-password type="password" />
</el-form-item>
<el-form-item label="客户端ID" prop="config.clientId">
<el-input v-model="config.clientId" placeholder="请输入客户端ID" />
</el-form-item>
<el-form-item label="主题" prop="config.topic">
<el-input v-model="config.topic" placeholder="请输入主题" />
</el-form-item>
</template>
<script lang="ts" setup>
import { IoTDataBridgeConfigType, MqttConfig } from '@/api/iot/rule/databridge'
import { useVModel } from '@vueuse/core'
import { isEmpty } from '@/utils/is'
defineOptions({ name: 'MqttConfigForm' })
const props = defineProps<{
modelValue: any
}>()
const emit = defineEmits(['update:modelValue'])
const config = useVModel(props, 'modelValue', emit) as Ref<MqttConfig>
/** 组件初始化 */
onMounted(() => {
if (!isEmpty(config.value)) {
return
}
config.value = {
type: IoTDataBridgeConfigType.MQTT,
url: '',
username: '',
password: '',
clientId: '',
topic: ''
}
})
</script>
src/views/iot/rule/databridge/config/RabbitMQConfigForm.vue deleted 100644 → 0
<template>
<el-form-item label="主机地址" prop="config.host">
<el-input v-model="config.host" placeholder="请输入主机地址，如：localhost" />
</el-form-item>
<el-form-item label="端口" prop="config.port">
<el-input-number
v-model="config.port"
:max="65535"
:min="1"
controls-position="right"
placeholder="请输入端口"
/>
</el-form-item>
<el-form-item label="虚拟主机" prop="config.virtualHost">
<el-input v-model="config.virtualHost" placeholder="请输入虚拟主机" />
</el-form-item>
<el-form-item label="用户名" prop="config.username">
<el-input v-model="config.username" placeholder="请输入用户名" />
</el-form-item>
<el-form-item label="密码" prop="config.password">
<el-input v-model="config.password" placeholder="请输入密码" show-password type="password" />
</el-form-item>
<el-form-item label="交换机" prop="config.exchange">
<el-input v-model="config.exchange" placeholder="请输入交换机" />
</el-form-item>
<el-form-item label="路由键" prop="config.routingKey">
<el-input v-model="config.routingKey" placeholder="请输入路由键" />
</el-form-item>
<el-form-item label="队列" prop="config.queue">
<el-input v-model="config.queue" placeholder="请输入队列" />
</el-form-item>
</template>
<script lang="ts" setup>
import { IoTDataBridgeConfigType, RabbitMQConfig } from '@/api/iot/rule/databridge'
import { useVModel } from '@vueuse/core'
import { isEmpty } from '@/utils/is'
defineOptions({ name: 'RabbitMQConfigForm' })
const props = defineProps<{
modelValue: any
}>()
const emit = defineEmits(['update:modelValue'])
const config = useVModel(props, 'modelValue', emit) as Ref<RabbitMQConfig>
/** 组件初始化 */
onMounted(() => {
if (!isEmpty(config.value)) {
return
}
config.value = {
type: IoTDataBridgeConfigType.RABBITMQ,
host: '',
port: 5672,
virtualHost: '/',
username: '',
password: '',
exchange: '',
routingKey: '',
queue: ''
}
})
</script>
src/views/iot/rule/databridge/config/RedisStreamMQConfigForm.vue deleted 100644 → 0
<!-- TODO @puhui999：去掉 MQ 关键字哈 -->
<template>
<el-form-item label="主机地址" prop="config.host">
<el-input v-model="config.host" placeholder="请输入主机地址，如：localhost" />
</el-form-item>
<el-form-item label="端口" prop="config.port">
<el-input-number
v-model="config.port"
:max="65535"
:min="1"
controls-position="right"
placeholder="请输入端口"
/>
</el-form-item>
<el-form-item label="密码" prop="config.password">
<el-input v-model="config.password" placeholder="请输入密码" show-password type="password" />
</el-form-item>
<el-form-item label="数据库" prop="config.database">
<el-input-number
v-model="config.database"
:max="15"
:min="0"
controls-position="right"
placeholder="请输入数据库索引"
/>
</el-form-item>
<el-form-item label="主题" prop="config.topic">
<el-input v-model="config.topic" placeholder="请输入主题" />
</el-form-item>
</template>
<script lang="ts" setup>
import { IoTDataBridgeConfigType, RedisStreamMQConfig } from '@/api/iot/rule/databridge'
import { useVModel } from '@vueuse/core'
import { isEmpty } from '@/utils/is'
defineOptions({ name: 'RedisStreamMQConfigForm' })
const props = defineProps<{
modelValue: any
}>()
const emit = defineEmits(['update:modelValue'])
const config = useVModel(props, 'modelValue', emit) as Ref<RedisStreamMQConfig>
/** 组件初始化 */
onMounted(() => {
if (!isEmpty(config.value)) {
return
}
config.value = {
type: IoTDataBridgeConfigType.REDIS_STREAM,
host: '',
port: 6379,
password: '',
database: 0,
topic: ''
}
})
</script>
src/views/iot/rule/databridge/config/RocketMQConfigForm.vue deleted 100644 → 0
<template>
<el-form-item label="NameServer" prop="config.nameServer">
<el-input
v-model="config.nameServer"
placeholder="请输入 NameServer 地址，如：127.0.0.1:9876"
/>
</el-form-item>
<el-form-item label="AccessKey" prop="config.accessKey">
<el-input v-model="config.accessKey" placeholder="请输入 AccessKey" />
</el-form-item>
<el-form-item label="SecretKey" prop="config.secretKey">
<el-input
v-model="config.secretKey"
placeholder="请输入 SecretKey"
show-password
type="password"
/>
</el-form-item>
<el-form-item label="消费组" prop="config.group">
<el-input v-model="config.group" placeholder="请输入消费组" />
</el-form-item>
<el-form-item label="主题" prop="config.topic">
<el-input v-model="config.topic" placeholder="请输入主题" />
</el-form-item>
<el-form-item label="标签" prop="config.tags">
<el-input v-model="config.tags" placeholder="请输入标签" />
</el-form-item>
</template>
<script lang="ts" setup>
import { IoTDataBridgeConfigType, RocketMQConfig } from '@/api/iot/rule/databridge'
import { useVModel } from '@vueuse/core'
import { isEmpty } from '@/utils/is'
defineOptions({ name: 'RocketMQConfigForm' })
const props = defineProps<{
modelValue: any
}>()
const emit = defineEmits(['update:modelValue'])
const config = useVModel(props, 'modelValue', emit) as Ref<RocketMQConfig>
/** 组件初始化 */
onMounted(() => {
if (!isEmpty(config.value)) {
return
}
config.value = {
type: IoTDataBridgeConfigType.ROCKETMQ,
nameServer: '',
accessKey: '',
secretKey: '',
group: '',
topic: '',
tags: ''
}
})
</script>
src/views/iot/rule/databridge/config/components/KeyValueEditor.vue deleted 100644 → 0
<template>
<div v-for="(item, index) in items" :key="index" class="flex mb-2 w-full">
<el-input v-model="item.key" class="mr-2" placeholder="键" />
<el-input v-model="item.value" placeholder="值" />
<el-button class="ml-2" text type="danger" @click="removeItem(index)">
<el-icon>
<Delete />
</el-icon>
删除
</el-button>
</div>
<el-button text type="primary" @click="addItem">
<el-icon>
<Plus />
</el-icon>
{{ addButtonText }}
</el-button>
</template>
<script lang="ts" setup>
import { Delete, Plus } from '@element-plus/icons-vue'
import { isEmpty } from '@/utils/is'
defineOptions({ name: 'KeyValueEditor' })
interface KeyValueItem {
key: string
value: string
}
const props = defineProps<{
modelValue: Record<string, string>
addButtonText: string
}>()
const emit = defineEmits(['update:modelValue'])
const items = ref<KeyValueItem[]>([]) // 内部 key-value 项列表
/** 添加项目 */
const addItem = () => {
items.value.push({ key: '', value: '' })
updateModelValue()
}
/** 移除项目 */
const removeItem = (index: number) => {
items.value.splice(index, 1)
updateModelValue()
}
/** 更新 modelValue */
const updateModelValue = () => {
const result: Record<string, string> = {}
items.value.forEach((item) => {
if (item.key) {
result[item.key] = item.value
}
})
emit('update:modelValue', result)
}
// TODO @puhui999：有告警的地方，尽量用 cursor 处理下
/** 监听项目变化 */
watch(items, updateModelValue, { deep: true })
watch(
() => props.modelValue,
(val) => {
// 列表有值后以列表中的值为准
if (isEmpty(val) || !isEmpty(items.value)) {
return
}
items.value = Object.entries(props.modelValue).map(([key, value]) => ({ key, value }))
}
)
</script>
src/views/iot/rule/databridge/config/index.ts deleted 100644 → 0
import HttpConfigForm from './HttpConfigForm.vue'
import MqttConfigForm from './MqttConfigForm.vue'
import RocketMQConfigForm from './RocketMQConfigForm.vue'
import KafkaMQConfigForm from './KafkaMQConfigForm.vue'
import RabbitMQConfigForm from './RabbitMQConfigForm.vue'
import RedisStreamMQConfigForm from './RedisStreamMQConfigForm.vue'
export {
HttpConfigForm,
MqttConfigForm,
RocketMQConfigForm,
KafkaMQConfigForm,
RabbitMQConfigForm,
RedisStreamMQConfigForm
}
src/views/iot/rule/databridge/index.vue deleted 100644 → 0
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
ref="queryFormRef"
:inline="true"
:model="queryParams"
class="-mb-15px"
label-width="68px"
>
<el-form-item label="桥梁名称" prop="name">
<el-input
v-model="queryParams.name"
class="!w-240px"
clearable
placeholder="请输入桥梁名称"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="桥梁状态" prop="status">
<el-select
v-model="queryParams.status"
class="!w-240px"
clearable
placeholder="请选择桥梁状态"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="桥梁方向" prop="direction">
<el-select
v-model="queryParams.direction"
class="!w-240px"
clearable
placeholder="请选择桥梁方向"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DATA_BRIDGE_DIRECTION_ENUM)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="桥梁类型" prop="type">
<el-select
v-model="queryParams.type"
class="!w-240px"
clearable
placeholder="请选择桥梁类型"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DATA_BRIDGE_TYPE_ENUM)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-220px"
end-placeholder="结束日期"
start-placeholder="开始日期"
type="daterange"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon class="mr-5px" icon="ep:search" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon class="mr-5px" icon="ep:refresh" />
重置
</el-button>
<el-button
v-hasPermi="['iot:data-bridge:create']"
plain
type="primary"
@click="openForm('create')"
>
<Icon class="mr-5px" icon="ep:plus" />
新增
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
<el-table-column align="center" label="桥梁编号" prop="id" />
<el-table-column align="center" label="桥梁名称" prop="name" />
<el-table-column align="center" label="桥梁描述" prop="description" />
<el-table-column align="center" label="桥梁状态" prop="status">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column align="center" label="桥梁方向" prop="direction">
<template #default="scope">
<dict-tag :type="DICT_TYPE.IOT_DATA_BRIDGE_DIRECTION_ENUM" :value="scope.row.direction" />
</template>
</el-table-column>
<el-table-column align="center" label="桥梁类型" prop="type">
<template #default="scope">
<dict-tag :type="DICT_TYPE.IOT_DATA_BRIDGE_TYPE_ENUM" :value="scope.row.type" />
</template>
</el-table-column>
<el-table-column
:formatter="dateFormatter"
align="center"
label="创建时间"
prop="createTime"
width="180px"
/>
<el-table-column align="center" fixed="right" label="操作" width="120px">
<template #default="scope">
<el-button
v-hasPermi="['iot:data-bridge:update']"
link
type="primary"
@click="openForm('update', scope.row.id)"
>
编辑
</el-button>
<el-button
v-hasPermi="['iot:data-bridge:delete']"
link
type="danger"
@click="handleDelete(scope.row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
v-model:limit="queryParams.pageSize"
v-model:page="queryParams.pageNo"
:total="total"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<DataBridgeForm ref="formRef" @success="getList" />
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import { DataBridgeApi, DataBridgeVO } from '@/api/iot/rule/databridge'
import DataBridgeForm from './IoTDataBridgeForm.vue'
/** IoT 数据桥梁 列表 */
defineOptions({ name: 'IotDataBridge' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<DataBridgeVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: undefined,
description: undefined,
status: undefined,
direction: undefined,
type: undefined,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await DataBridgeApi.getDataBridgePage(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 DataBridgeApi.deleteDataBridge(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
src/views/iot/thingmodel/ThingModelEvent.vue deleted 100644 → 0
<!-- 产品的物模型表单（event 项） -->
<template>
<el-form-item
:rules="[{ required: true, message: '请选择事件类型', trigger: 'change' }]"
label="事件类型"
prop="event.type"
>
<el-radio-group v-model="thingModelEvent.type">
<el-radio :value="ThingModelEventType.INFO.value">
{{ ThingModelEventType.INFO.label }}
</el-radio>
<el-radio :value="ThingModelEventType.ALERT.value">
{{ ThingModelEventType.ALERT.label }}
</el-radio>
<el-radio :value="ThingModelEventType.ERROR.value">
{{ ThingModelEventType.ERROR.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="输出参数">
<ThingModelInputOutputParam
v-model="thingModelEvent.outputParams"
:direction="ThingModelParamDirection.OUTPUT"
/>
</el-form-item>
</template>
<script lang="ts" setup>
import ThingModelInputOutputParam from './ThingModelInputOutputParam.vue'
import { useVModel } from '@vueuse/core'
import { ThingModelEvent } from '@/api/iot/thingmodel'
import { ThingModelEventType, ThingModelParamDirection } from './config'
import { isEmpty } from '@/utils/is'
/** IoT 物模型事件 */
defineOptions({ name: 'ThingModelEvent' })
const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean }>()
const emits = defineEmits(['update:modelValue'])
const thingModelEvent = useVModel(props, 'modelValue', emits) as Ref<ThingModelEvent>
// 默认选中，INFO 信息
watch(
() => thingModelEvent.value.type,
(val: string) => isEmpty(val) && (thingModelEvent.value.type = ThingModelEventType.INFO.value),
{ immediate: true }
)
</script>
<style lang="scss" scoped>
:deep(.el-form-item) {
.el-form-item {
margin-bottom: 0;
}
}
</style>
src/views/iot/thingmodel/ThingModelForm.vue deleted 100644 → 0
<!-- 产品的物模型表单 -->
<template>
<Dialog v-model="dialogVisible" :title="dialogTitle">
<el-form
ref="formRef"
v-loading="formLoading"
:model="formData"
:rules="ThingModelFormRules"
label-width="100px"
>
<el-form-item label="功能类型" prop="type">
<el-radio-group v-model="formData.type">
<el-radio-button
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_THING_MODEL_TYPE)"
:key="dict.value"
:value="dict.value"
>
{{ dict.label }}
</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="功能名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入功能名称" />
</el-form-item>
<el-form-item label="标识符" prop="identifier">
<el-input v-model="formData.identifier" placeholder="请输入标识符" />
</el-form-item>
<!-- 属性配置 -->
<ThingModelProperty
v-if="formData.type === ThingModelType.PROPERTY"
v-model="formData.property"
/>
<!-- 服务配置 -->
<ThingModelService
v-if="formData.type === ThingModelType.SERVICE"
v-model="formData.service"
/>
<!-- 事件配置 -->
<ThingModelEvent v-if="formData.type === ThingModelType.EVENT" v-model="formData.event" />
<el-form-item label="描述" prop="description">
<el-input
v-model="formData.description"
:maxlength="200"
:rows="3"
placeholder="请输入属性描述"
type="textarea"
/>
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script lang="ts" setup>
import { ProductVO } from '@/api/iot/product/product'
import ThingModelProperty from './ThingModelProperty.vue'
import ThingModelService from './ThingModelService.vue'
import ThingModelEvent from './ThingModelEvent.vue'
import { ThingModelApi, ThingModelData } from '@/api/iot/thingmodel'
import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
import { DataSpecsDataType, ThingModelFormRules, ThingModelType } from './config'
import { cloneDeep } from 'lodash-es'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { isEmpty } from '@/utils/is'
/** IoT 物模型数据表单 */
defineOptions({ name: 'IoTThingModelForm' })
const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT) // 注入产品信息
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<ThingModelData>({
type: ThingModelType.PROPERTY,
dataType: DataSpecsDataType.INT,
property: {
dataType: DataSpecsDataType.INT,
dataSpecs: {
dataType: DataSpecsDataType.INT
}
},
service: {},
event: {}
})
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 ThingModelApi.getThingModel(id)
// 情况一：属性初始化
if (isEmpty(formData.value.property)) {
formData.value.dataType = DataSpecsDataType.INT
formData.value.property = {
dataType: DataSpecsDataType.INT,
dataSpecs: {
dataType: DataSpecsDataType.INT
}
}
}
// 情况二：服务初始化
if (isEmpty(formData.value.service)) {
formData.value.service = {}
}
// 情况三：事件初始化
if (isEmpty(formData.value.event)) {
formData.value.event = {}
}
} finally {
formLoading.value = false
}
}
}
defineExpose({ open, close: () => (dialogVisible.value = false) })
/** 提交表单 */
const emit = defineEmits(['success'])
const submitForm = async () => {
await formRef.value.validate()
formLoading.value = true
try {
const data = cloneDeep(formData.value) as ThingModelData
// 信息补全
data.productId = product!.value.id
data.productKey = product!.value.productKey
fillExtraAttributes(data)
if (formType.value === 'create') {
await ThingModelApi.createThingModel(data)
message.success(t('common.createSuccess'))
} else {
await ThingModelApi.updateThingModel(data)
message.success(t('common.updateSuccess'))
}
} finally {
dialogVisible.value = false // 确保关闭弹框
emit('success')
formLoading.value = false
}
}
/** 填写额外的属性 */
const fillExtraAttributes = (data: any) => {
// 处理不同类型的情况
// 属性
if (data.type === ThingModelType.PROPERTY) {
removeDataSpecs(data.property)
data.dataType = data.property.dataType
data.property.identifier = data.identifier
data.property.name = data.name
delete data.service
delete data.event
}
// 服务
if (data.type === ThingModelType.SERVICE) {
removeDataSpecs(data.service)
data.dataType = data.service.dataType
data.service.identifier = data.identifier
data.service.name = data.name
delete data.property
delete data.event
}
// 事件
if (data.type === ThingModelType.EVENT) {
removeDataSpecs(data.event)
data.dataType = data.event.dataType
data.event.identifier = data.identifier
data.event.name = data.name
delete data.property
delete data.service
}
}
/** 处理 dataSpecs 为空的情况 */
const removeDataSpecs = (val: any) => {
if (isEmpty(val.dataSpecs)) {
delete val.dataSpecs
}
if (isEmpty(val.dataSpecsList)) {
delete val.dataSpecsList
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
type: ThingModelType.PROPERTY,
dataType: DataSpecsDataType.INT,
property: {
dataType: DataSpecsDataType.INT,
dataSpecs: {
dataType: DataSpecsDataType.INT
}
},
service: {},
event: {}
}
formRef.value?.resetFields()
}
</script>
src/views/iot/thingmodel/ThingModelInputOutputParam.vue deleted 100644 → 0
<!-- 产品的物模型表单（event、service 项里的参数） -->
<template>
<div
v-for="(item, index) in thingModelParams"
:key="index"
class="w-1/1 param-item flex justify-between px-10px mb-10px"
>
<span>参数名称：{{ item.name }}</span>
<div class="btn">
<el-button link type="primary" @click="openParamForm(item)">编辑</el-button>
<el-divider direction="vertical" />
<el-button link type="danger" @click="deleteParamItem(index)">删除</el-button>
</div>
</div>
<el-button link type="primary" @click="openParamForm(null)">+新增参数</el-button>
<!-- param 表单 -->
<Dialog v-model="dialogVisible" :title="dialogTitle" append-to-body>
<el-form
ref="paramFormRef"
v-loading="formLoading"
:model="formData"
:rules="ThingModelFormRules"
label-width="100px"
>
<el-form-item label="参数名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入功能名称" />
</el-form-item>
<el-form-item label="标识符" prop="identifier">
<el-input v-model="formData.identifier" placeholder="请输入标识符" />
</el-form-item>
<!-- 属性配置 -->
<ThingModelProperty v-model="formData.property" is-params />
</el-form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
import ThingModelProperty from './ThingModelProperty.vue'
import { DataSpecsDataType, ThingModelFormRules } from './config'
import { isEmpty } from '@/utils/is'
/** 输入输出参数配置组件 */
defineOptions({ name: 'ThingModelInputOutputParam' })
const props = defineProps<{ modelValue: any; direction: string }>()
const emits = defineEmits(['update:modelValue'])
const thingModelParams = useVModel(props, 'modelValue', emits) as Ref<any[]>
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('新增参数') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const paramFormRef = ref() // 表单 ref
const formData = ref<any>({
dataType: DataSpecsDataType.INT,
property: {
dataType: DataSpecsDataType.INT,
dataSpecs: {
dataType: DataSpecsDataType.INT
}
}
})
/** 打开 param 表单 */
const openParamForm = (val: any) => {
dialogVisible.value = true
resetForm()
if (isEmpty(val)) {
return
}
// 编辑时回显数据
formData.value = {
identifier: val.identifier,
name: val.name,
description: val.description,
property: {
dataType: val.dataType,
dataSpecs: val.dataSpecs,
dataSpecsList: val.dataSpecsList
}
}
}
/** 删除 param 项 */
const deleteParamItem = (index: number) => {
thingModelParams.value.splice(index, 1)
}
/** 添加参数 */
const submitForm = async () => {
// 初始化参数列表
if (isEmpty(thingModelParams.value)) {
thingModelParams.value = []
}
// 校验参数
await paramFormRef.value.validate()
try {
const data = unref(formData)
// 构建数据对象
const item = {
identifier: data.identifier,
name: data.name,
description: data.description,
dataType: data.property.dataType,
paraOrder: 0, // TODO @puhui999: 先写死默认看看后续
direction: props.direction,
dataSpecs:
!!data.property.dataSpecs && Object.keys(data.property.dataSpecs).length > 1
? data.property.dataSpecs
: undefined,
dataSpecsList: isEmpty(data.property.dataSpecsList) ? undefined : data.property.dataSpecsList
}
// 查找是否已有相同 identifier 的项
const existingIndex = thingModelParams.value.findIndex(
(spec) => spec.identifier === data.identifier
)
if (existingIndex > -1) {
// 更新已有项
thingModelParams.value[existingIndex] = item
} else {
// 添加新项
thingModelParams.value.push(item)
}
} finally {
// 隐藏对话框
dialogVisible.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
dataType: DataSpecsDataType.INT,
property: {
dataType: DataSpecsDataType.INT,
dataSpecs: {
dataType: DataSpecsDataType.INT
}
}
}
paramFormRef.value?.resetFields()
}
</script>
<style lang="scss" scoped>
.param-item {
background-color: #e4f2fd;
}
</style>
src/views/iot/thingmodel/ThingModelProperty.vue deleted 100644 → 0
<!-- 产品的物模型表单（property 项） -->
<template>
<el-form-item
:rules="[{ required: true, message: '请选择数据类型', trigger: 'change' }]"
label="数据类型"
prop="property.dataType"
>
<el-select v-model="property.dataType" placeholder="请选择数据类型" @change="handleChange">
<!-- ARRAY 和 STRUCT 类型数据相互嵌套时，最多支持递归嵌套 2 层（父和子） -->
<el-option
v-for="option in getDataTypeOptions"
:key="option.value"
:label="`${option.value}(${option.label})`"
:value="option.value"
/>
</el-select>
</el-form-item>
<!-- 数值型配置 -->
<ThingModelNumberDataSpecs
v-if="
[DataSpecsDataType.INT, DataSpecsDataType.DOUBLE, DataSpecsDataType.FLOAT].includes(
property.dataType || ''
)
"
v-model="property.dataSpecs"
/>
<!-- 枚举型配置 -->
<ThingModelEnumDataSpecs
v-if="property.dataType === DataSpecsDataType.ENUM"
v-model="property.dataSpecsList"
/>
<!-- 布尔型配置 -->
<el-form-item v-if="property.dataType === DataSpecsDataType.BOOL" label="布尔值">
<template v-for="(item, index) in property.dataSpecsList" :key="item.value">
<div class="flex items-center justify-start w-1/1 mb-5px">
<span>{{ item.value }}</span>
<span class="mx-2">-</span>
<el-form-item
:prop="`property.dataSpecsList[${index}].name`"
:rules="[
{ required: true, message: '枚举描述不能为空' },
{ validator: validateBoolName, trigger: 'blur' }
]"
class="flex-1 mb-0"
>
<el-input
v-model="item.name"
:placeholder="`如：${item.value === 0 ? '关' : '开'}`"
class="w-255px!"
/>
</el-form-item>
</div>
</template>
</el-form-item>
<!-- 文本型配置 -->
<el-form-item
v-if="property.dataType === DataSpecsDataType.TEXT"
label="数据长度"
prop="property.dataSpecs.length"
>
<el-input v-model="property.dataSpecs.length" class="w-255px!" placeholder="请输入文本字节长度">
<template #append>字节</template>
</el-input>
</el-form-item>
<!-- 时间型配置 -->
<el-form-item v-if="property.dataType === DataSpecsDataType.DATE" label="时间格式" prop="date">
<el-input class="w-255px!" disabled placeholder="String 类型的 UTC 时间戳（毫秒）" />
</el-form-item>
<!-- 数组型配置-->
<ThingModelArrayDataSpecs
v-if="property.dataType === DataSpecsDataType.ARRAY"
v-model="property.dataSpecs"
/>
<!-- Struct 型配置-->
<ThingModelStructDataSpecs
v-if="property.dataType === DataSpecsDataType.STRUCT"
v-model="property.dataSpecsList"
/>
<el-form-item v-if="!isStructDataSpecs && !isParams" label="读写类型" prop="property.accessMode">
<el-radio-group v-model="property.accessMode">
<el-radio :label="ThingModelAccessMode.READ_WRITE.value">
{{ ThingModelAccessMode.READ_WRITE.label }}
</el-radio>
<el-radio :label="ThingModelAccessMode.READ_ONLY.value">
{{ ThingModelAccessMode.READ_ONLY.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</template>
<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
import {
DataSpecsDataType,
dataTypeOptions,
ThingModelAccessMode,
validateBoolName
} from './config'
import {
ThingModelArrayDataSpecs,
ThingModelEnumDataSpecs,
ThingModelNumberDataSpecs,
ThingModelStructDataSpecs
} from './dataSpecs'
import { ThingModelProperty } from '@/api/iot/thingmodel'
import { isEmpty } from '@/utils/is'
/** IoT 物模型属性 */
defineOptions({ name: 'ThingModelProperty' })
const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean; isParams?: boolean }>()
const emits = defineEmits(['update:modelValue'])
const property = useVModel(props, 'modelValue', emits) as Ref<ThingModelProperty>
const getDataTypeOptions = computed(() => {
return !props.isStructDataSpecs
? dataTypeOptions
: dataTypeOptions.filter(
(item) =>
!([DataSpecsDataType.STRUCT, DataSpecsDataType.ARRAY] as any[]).includes(item.value)
)
}) // 获得数据类型列表
/** 属性值的数据类型切换时初始化相关数据 */
const handleChange = (dataType: any) => {
property.value.dataSpecs = {}
property.value.dataSpecsList = []
// 不是列表型数据才设置 dataSpecs.dataType
![DataSpecsDataType.ENUM, DataSpecsDataType.BOOL, DataSpecsDataType.STRUCT].includes(dataType) &&
(property.value.dataSpecs.dataType = dataType)
switch (dataType) {
case DataSpecsDataType.ENUM:
property.value.dataSpecsList.push({
dataType: DataSpecsDataType.ENUM,
name: '', // 枚举项的名称
value: undefined // 枚举值
})
break
case DataSpecsDataType.BOOL:
for (let i = 0; i < 2; i++) {
property.value.dataSpecsList.push({
dataType: DataSpecsDataType.BOOL,
name: '', // 布尔值的名称
value: i // 布尔值
})
}
break
}
}
// 默认选中读写
watch(
() => property.value.accessMode,
(val: string) => {
if (props.isStructDataSpecs || props.isParams) {
return
}
isEmpty(val) && (property.value.accessMode = ThingModelAccessMode.READ_WRITE.value)
},
{ immediate: true }
)
</script>
<style lang="scss" scoped>
:deep(.el-form-item) {
.el-form-item {
margin-bottom: 0;
}
}
</style>
src/views/iot/thingmodel/ThingModelService.vue deleted 100644 → 0
<!-- 产品的物模型表单（service 项） -->
<template>
<el-form-item
:rules="[{ required: true, message: '请选择调用方式', trigger: 'change' }]"
label="调用方式"
prop="service.callType"
>
<el-radio-group v-model="service.callType">
<el-radio :value="ThingModelServiceCallType.ASYNC.value">
{{ ThingModelServiceCallType.ASYNC.label }}
</el-radio>
<el-radio :value="ThingModelServiceCallType.SYNC.value">
{{ ThingModelServiceCallType.SYNC.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="输入参数">
<ThingModelInputOutputParam
v-model="service.inputParams"
:direction="ThingModelParamDirection.INPUT"
/>
</el-form-item>
<el-form-item label="输出参数">
<ThingModelInputOutputParam
v-model="service.outputParams"
:direction="ThingModelParamDirection.OUTPUT"
/>
</el-form-item>
</template>
<script lang="ts" setup>
import ThingModelInputOutputParam from './ThingModelInputOutputParam.vue'
import { useVModel } from '@vueuse/core'
import { ThingModelService } from '@/api/iot/thingmodel'
import { ThingModelParamDirection, ThingModelServiceCallType } from './config'
import { isEmpty } from '@/utils/is'
/** IoT 物模型服务 */
defineOptions({ name: 'ThingModelService' })
const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean }>()
const emits = defineEmits(['update:modelValue'])
const service = useVModel(props, 'modelValue', emits) as Ref<ThingModelService>
// 默认选中，ASYNC 异步
watch(
() => service.value.callType,
(val: string) => isEmpty(val) && (service.value.callType = ThingModelServiceCallType.ASYNC.value),
{ immediate: true }
)
</script>
<style lang="scss" scoped>
:deep(.el-form-item) {
.el-form-item {
margin-bottom: 0;
}
}
</style>
src/views/iot/thingmodel/components/DataDefinition.vue deleted 100644 → 0
<template>
<!-- 属性 -->
<template v-if="data.type === ThingModelType.PROPERTY">
<!-- 非列表型：数值 -->
<div
v-if="
[DataSpecsDataType.INT, DataSpecsDataType.DOUBLE, DataSpecsDataType.FLOAT].includes(
data.property.dataType
)
"
>
取值范围：{{ `${data.property.dataSpecs.min}~${data.property.dataSpecs.max}` }}
</div>
<!-- 非列表型：文本 -->
<div v-if="DataSpecsDataType.TEXT === data.property.dataType">
数据长度：{{ data.property.dataSpecs.length }}
</div>
<!-- 列表型: 数组、结构、时间（特殊） -->
<div
v-if="
[DataSpecsDataType.ARRAY, DataSpecsDataType.STRUCT, DataSpecsDataType.DATE].includes(
data.property.dataType
)
"
>
-
</div>
<!-- 列表型: 布尔值、枚举 -->
<div v-if="[DataSpecsDataType.BOOL, DataSpecsDataType.ENUM].includes(data.property.dataType)">
<div> {{ DataSpecsDataType.BOOL === data.property.dataType ? '布尔值' : '枚举值' }}：</div>
<div v-for="item in data.property.dataSpecsList" :key="item.value">
{{ `${item.name}-${item.value}` }}
</div>
</div>
</template>
<!-- 服务 -->
<div v-if="data.type === ThingModelType.SERVICE">
调用方式：{{ getCallTypeByValue(data.service!.callType) }}
</div>
<!-- 事件 -->
<div v-if="data.type === ThingModelType.EVENT">
事件类型：{{ getEventTypeByValue(data.event!.type) }}
</div>
</template>
<script lang="ts" setup>
import {
DataSpecsDataType,
getCallTypeByValue,
getEventTypeByValue,
ThingModelType
} from '@/views/iot/thingmodel/config'
import { ThingModelData } from '@/api/iot/thingmodel'
/** 数据定义展示组件 */
defineOptions({ name: 'DataDefinition' })
defineProps<{ data: ThingModelData }>()
</script>
<style lang="scss" scoped></style>
src/views/iot/thingmodel/components/index.ts deleted 100644 → 0
import DataDefinition from './DataDefinition.vue'
export { DataDefinition }
src/views/iot/thingmodel/config.ts deleted 100644 → 0
import { isEmpty } from '@/utils/is'
/** dataSpecs 数值型数据结构 */
export interface DataSpecsNumberDataVO {
dataType: 'int' | 'float' | 'double' // 数据类型，取值为 INT、FLOAT 或 DOUBLE
max: string // 最大值，必须与 dataType 设置一致，且为 STRING 类型
min: string // 最小值，必须与 dataType 设置一致，且为 STRING 类型
step: string // 步长，必须与 dataType 设置一致，且为 STRING 类型
precise?: string // 精度，当 dataType 为 FLOAT 或 DOUBLE 时可选
defaultValue?: string // 默认值，可选
unit: string // 单位的符号
unitName: string // 单位的名称
}
/** dataSpecs 枚举型数据结构 */
export interface DataSpecsEnumOrBoolDataVO {
dataType: 'enum' | 'bool'
defaultValue?: string // 默认值，可选
name: string // 枚举项的名称
value: number | undefined // 枚举值
}
/** 属性值的数据类型 */
export const DataSpecsDataType = {
INT: 'int',
FLOAT: 'float',
DOUBLE: 'double',
ENUM: 'enum',
BOOL: 'bool',
TEXT: 'text',
DATE: 'date',
STRUCT: 'struct',
ARRAY: 'array'
} as const
/** 物体模型数据类型配置项 */
export const dataTypeOptions = [
{ value: DataSpecsDataType.INT, label: '整数型' },
{ value: DataSpecsDataType.FLOAT, label: '单精度浮点型' },
{ value: DataSpecsDataType.DOUBLE, label: '双精度浮点型' },
{ value: DataSpecsDataType.ENUM, label: '枚举型' },
{ value: DataSpecsDataType.BOOL, label: '布尔型' },
{ value: DataSpecsDataType.TEXT, label: '文本型' },
{ value: DataSpecsDataType.DATE, label: '时间型' },
{ value: DataSpecsDataType.STRUCT, label: '结构体' },
{ value: DataSpecsDataType.ARRAY, label: '数组' }
]
/** 获得物体模型数据类型配置项名称 */
export const getDataTypeOptionsLabel = (value: string) => {
if (isEmpty(value)) {
return value
}
const dataType = dataTypeOptions.find((option) => option.value === value)
return dataType && `${dataType.value}(${dataType.label})`
}
// IOT 产品物模型类型枚举类
export const ThingModelType = {
PROPERTY: 1, // 属性
SERVICE: 2, // 服务
EVENT: 3 // 事件
} as const
// IOT 产品物模型访问模式枚举类
export const ThingModelAccessMode = {
READ_WRITE: {
label: '读写',
value: 'rw'
},
READ_ONLY: {
label: '只读',
value: 'r'
}
} as const
// IOT 产品物模型服务调用方式枚举
export const ThingModelServiceCallType = {
ASYNC: {
label: '异步调用',
value: 'async'
},
SYNC: {
label: '同步调用',
value: 'sync'
}
} as const
export const getCallTypeByValue = (value: string): string | undefined =>
Object.values(ThingModelServiceCallType).find((type) => type.value === value)?.label
// IOT 产品物模型事件类型枚举
export const ThingModelEventType = {
INFO: {
label: '信息',
value: 'info'
},
ALERT: {
label: '告警',
value: 'alert'
},
ERROR: {
label: '故障',
value: 'error'
}
} as const
export const getEventTypeByValue = (value: string): string | undefined =>
Object.values(ThingModelEventType).find((type) => type.value === value)?.label
// IOT 产品物模型参数是输入参数还是输出参数
export const ThingModelParamDirection = {
INPUT: 'input', // 输入参数
OUTPUT: 'output' // 输出参数
} as const
/** 公共校验规则 */
export const ThingModelFormRules = {
name: [
{ required: true, message: '功能名称不能为空', trigger: 'blur' },
{
pattern: /^[\u4e00-\u9fa5a-zA-Z0-9][\u4e00-\u9fa5a-zA-Z0-9\-_/\.]{0,29}$/,
message:
'支持中文、大小写字母、日文、数字、短划线、下划线、斜杠和小数点，必须以中文、英文或数字开头，不超过 30 个字符',
trigger: 'blur'
}
],
type: [{ required: true, message: '功能类型不能为空', trigger: 'blur' }],
identifier: [
{ required: true, message: '标识符不能为空', trigger: 'blur' },
{
pattern: /^[a-zA-Z0-9_]{1,50}$/,
message: '支持大小写字母、数字和下划线，不超过 50 个字符',
trigger: 'blur'
},
{
validator: (_: any, value: string, callback: any) => {
const reservedKeywords = ['set', 'get', 'post', 'property', 'event', 'time', 'value']
if (reservedKeywords.includes(value)) {
callback(
new Error(
'set, get, post, property, event, time, value 是系统保留字段，不能用于标识符定义'
)
)
} else if (/^\d+$/.test(value)) {
callback(new Error('标识符不能是纯数字'))
} else {
callback()
}
},
trigger: 'blur'
}
],
'property.dataSpecs.childDataType': [{ required: true, message: '元素类型不能为空' }],
'property.dataSpecs.size': [
{ required: true, message: '元素个数不能为空' },
{
validator: (_: any, value: any, callback: any) => {
if (isEmpty(value)) {
callback(new Error('元素个数不能为空'))
return
}
if (isNaN(Number(value))) {
callback(new Error('元素个数必须是数字'))
return
}
callback()
},
trigger: 'blur'
}
],
'property.dataSpecs.length': [
{ required: true, message: '请输入文本字节长度', trigger: 'blur' },
{
validator: (_: any, value: any, callback: any) => {
if (isEmpty(value)) {
callback(new Error('文本长度不能为空'))
return
}
if (isNaN(Number(value))) {
callback(new Error('文本长度必须是数字'))
return
}
callback()
},
trigger: 'blur'
}
],
'property.accessMode': [{ required: true, message: '请选择读写类型', trigger: 'change' }]
}
/** 校验布尔值名称 */
export const validateBoolName = (_: any, value: string, callback: any) => {
if (isEmpty(value)) {
callback(new Error('布尔值名称不能为空'))
return
}
// 检查开头字符
if (!/^[\u4e00-\u9fa5a-zA-Z0-9]/.test(value)) {
callback(new Error('布尔值名称必须以中文、英文字母或数字开头'))
return
}
// 检查整体格式
if (!/^[\u4e00-\u9fa5a-zA-Z0-9][a-zA-Z0-9\u4e00-\u9fa5_-]*$/.test(value)) {
callback(new Error('布尔值名称只能包含中文、英文字母、数字、下划线和短划线'))
return
}
// 检查长度（一个中文算一个字符）
if (value.length > 20) {
callback(new Error('布尔值名称长度不能超过 20 个字符'))
return
}
callback()
}
src/views/iot/thingmodel/dataSpecs/ThingModelArrayDataSpecs.vue deleted 100644 → 0
<!-- dataType：array 数组类型 -->
<template>
<el-form-item label="元素类型" prop="property.dataSpecs.childDataType">
<el-radio-group v-model="dataSpecs.childDataType" @change="handleChange">
<template v-for="item in dataTypeOptions" :key="item.value">
<el-radio
v-if="
!(
[DataSpecsDataType.ENUM, DataSpecsDataType.ARRAY, DataSpecsDataType.DATE] as any[]
).includes(item.value)
"
:value="item.value"
class="w-1/3"
>
{{ `${item.value}(${item.label})` }}
</el-radio>
</template>
</el-radio-group>
</el-form-item>
<el-form-item label="元素个数" prop="property.dataSpecs.size">
<el-input v-model="dataSpecs.size" placeholder="请输入数组中的元素个数" />
</el-form-item>
<!-- Struct 型配置-->
<ThingModelStructDataSpecs
v-if="dataSpecs.childDataType === DataSpecsDataType.STRUCT"
v-model="dataSpecs.dataSpecsList"
/>
</template>
<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
import { DataSpecsDataType, dataTypeOptions } from '../config'
import ThingModelStructDataSpecs from './ThingModelStructDataSpecs.vue'
/** 数组型的 dataSpecs 配置组件 */
defineOptions({ name: 'ThingModelArrayDataSpecs' })
const props = defineProps<{ modelValue: any }>()
const emits = defineEmits(['update:modelValue'])
const dataSpecs = useVModel(props, 'modelValue', emits) as Ref<any>
/** 元素类型改变时间。当值为 struct 时，对 dataSpecs 中的 dataSpecsList 进行初始化 */
const handleChange = (val: string) => {
if (val !== DataSpecsDataType.STRUCT) {
return
}
dataSpecs.value.dataSpecsList = []
}
</script>
<style lang="scss" scoped></style>
src/views/iot/thingmodel/dataSpecs/ThingModelEnumDataSpecs.vue deleted 100644 → 0
<!-- dataType：enum 数组类型 -->
<template>
<el-form-item
:rules="[{ required: true, validator: validateEnumList, trigger: 'change' }]"
label="枚举项"
>
<div class="flex flex-col">
<div class="flex items-center">
<span class="flex-1"> 参数值 </span>
<span class="flex-1"> 参数描述 </span>
</div>
<div
v-for="(item, index) in dataSpecsList"
:key="index"
class="flex items-center justify-between mb-5px"
>
<el-form-item
:prop="`property.dataSpecsList[${index}].value`"
:rules="[
{ required: true, message: '枚举值不能为空' },
{ validator: validateEnumValue, trigger: 'blur' }
]"
class="flex-1 mb-0"
>
<el-input v-model="item.value" placeholder="请输入枚举值,如'0'" />
</el-form-item>
<span class="mx-2">~</span>
<el-form-item
:prop="`property.dataSpecsList[${index}].name`"
:rules="[
{ required: true, message: '枚举描述不能为空' },
{ validator: validateEnumName, trigger: 'blur' }
]"
class="flex-1 mb-0"
>
<el-input v-model="item.name" placeholder="对该枚举项的描述" />
</el-form-item>
<el-button class="ml-10px" link type="primary" @click="deleteEnum(index)">删除</el-button>
</div>
<el-button link type="primary" @click="addEnum">+添加枚举项</el-button>
</div>
</el-form-item>
</template>
<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
import { DataSpecsDataType, DataSpecsEnumOrBoolDataVO } from '../config'
import { isEmpty } from '@/utils/is'
/** 枚举型的 dataSpecs 配置组件 */
defineOptions({ name: 'ThingModelEnumDataSpecs' })
const props = defineProps<{ modelValue: any }>()
const emits = defineEmits(['update:modelValue'])
const dataSpecsList = useVModel(props, 'modelValue', emits) as Ref<DataSpecsEnumOrBoolDataVO[]>
const message = useMessage()
/** 添加枚举项 */
const addEnum = () => {
dataSpecsList.value.push({
dataType: DataSpecsDataType.ENUM,
name: '', // 枚举项的名称
value: undefined // 枚举值
})
}
/** 删除枚举项 */
const deleteEnum = (index: number) => {
if (dataSpecsList.value.length === 1) {
message.warning('至少需要一个枚举项')
return
}
dataSpecsList.value.splice(index, 1)
}
/** 校验枚举值 */
const validateEnumValue = (_: any, value: any, callback: any) => {
if (isEmpty(value)) {
callback(new Error('枚举值不能为空'))
return
}
if (isNaN(Number(value))) {
callback(new Error('枚举值必须是数字'))
return
}
// 检查枚举值是否重复
const values = dataSpecsList.value.map((item) => item.value)
if (values.filter((v) => v === value).length > 1) {
callback(new Error('枚举值不能重复'))
return
}
callback()
}
/** 校验枚举描述 */
const validateEnumName = (_: any, value: string, callback: any) => {
if (isEmpty(value)) {
callback(new Error('枚举描述不能为空'))
return
}
// 检查开头字符
if (!/^[\u4e00-\u9fa5a-zA-Z0-9]/.test(value)) {
callback(new Error('枚举描述必须以中文、英文字母或数字开头'))
return
}
// 检查整体格式
if (!/^[\u4e00-\u9fa5a-zA-Z0-9][a-zA-Z0-9\u4e00-\u9fa5_-]*$/.test(value)) {
callback(new Error('枚举描述只能包含中文、英文字母、数字、下划线和短划线'))
return
}
// 检查长度（一个中文算一个字符）
if (value.length > 20) {
callback(new Error('枚举描述长度不能超过20个字符'))
return
}
callback()
}
/** 校验整个枚举列表 */
const validateEnumList = (_: any, __: any, callback: any) => {
if (isEmpty(dataSpecsList.value)) {
callback(new Error('请至少添加一个枚举项'))
return
}
// 检查是否存在空值
const hasEmptyValue = dataSpecsList.value.some(
(item) => isEmpty(item.value) || isEmpty(item.name)
)
if (hasEmptyValue) {
callback(new Error('存在未填写的枚举值或描述'))
return
}
// 检查枚举值是否都是数字
const hasInvalidNumber = dataSpecsList.value.some((item) => isNaN(Number(item.value)))
if (hasInvalidNumber) {
callback(new Error('存在非数字的枚举值'))
return
}
// 检查是否有重复的枚举值
const values = dataSpecsList.value.map((item) => item.value)
const uniqueValues = new Set(values)
if (values.length !== uniqueValues.size) {
callback(new Error('存在重复的枚举值'))
return
}
callback()
}
</script>
<style lang="scss" scoped>
:deep(.el-form-item) {
.el-form-item {
margin-bottom: 0;
}
}
</style>
src/views/iot/thingmodel/dataSpecs/ThingModelNumberDataSpecs.vue deleted 100644 → 0
<!-- dataType：number 数组类型 -->
<template>
<el-form-item label="取值范围">
<div class="flex items-center justify-between">
<el-form-item
:rules="[
{ required: true, message: '最小值不能为空' },
{ validator: validateMin, trigger: 'blur' }
]"
class="mb-0"
prop="property.dataSpecs.min"
>
<el-input v-model="dataSpecs.min" placeholder="请输入最小值" />
</el-form-item>
<span class="mx-2">~</span>
<el-form-item
:rules="[
{ required: true, message: '最大值不能为空' },
{ validator: validateMax, trigger: 'blur' }
]"
class="mb-0"
prop="property.dataSpecs.max"
>
<el-input v-model="dataSpecs.max" placeholder="请输入最大值" />
</el-form-item>
</div>
</el-form-item>
<el-form-item
:rules="[
{ required: true, message: '步长不能为空' },
{ validator: validateStep, trigger: 'blur' }
]"
label="步长"
prop="property.dataSpecs.step"
>
<el-input v-model="dataSpecs.step" placeholder="请输入步长" />
</el-form-item>
<el-form-item
:rules="[{ required: true, message: '请选择单位' }]"
label="单位"
prop="property.dataSpecs.unit"
>
<el-select
:model-value="dataSpecs.unit ? dataSpecs.unitName + '-' + dataSpecs.unit : ''"
filterable
placeholder="请选择单位"
class="w-1/1"
@change="unitChange"
>
<el-option
v-for="(item, index) in getStrDictOptions(DICT_TYPE.IOT_THING_MODEL_UNIT)"
:key="index"
:label="item.label + '-' + item.value"
:value="item.label + '-' + item.value"
/>
</el-select>
</el-form-item>
</template>
<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
import { DataSpecsNumberDataVO } from '../config'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
/** 数值型的 dataSpecs 配置组件 */
defineOptions({ name: 'ThingModelNumberDataSpecs' })
const props = defineProps<{ modelValue: any }>()
const emits = defineEmits(['update:modelValue'])
const dataSpecs = useVModel(props, 'modelValue', emits) as Ref<DataSpecsNumberDataVO>
/** 单位发生变化时触发 */
const unitChange = (UnitSpecs: string) => {
const [unitName, unit] = UnitSpecs.split('-')
dataSpecs.value.unitName = unitName
dataSpecs.value.unit = unit
}
/** 校验最小值 */
const validateMin = (_: any, __: any, callback: any) => {
const min = Number(dataSpecs.value.min)
const max = Number(dataSpecs.value.max)
if (isNaN(min)) {
callback(new Error('请输入有效的数值'))
return
}
if (max !== undefined && !isNaN(max) && min >= max) {
callback(new Error('最小值必须小于最大值'))
return
}
callback()
}
/** 校验最大值 */
const validateMax = (_: any, __: any, callback: any) => {
const min = Number(dataSpecs.value.min)
const max = Number(dataSpecs.value.max)
if (isNaN(max)) {
callback(new Error('请输入有效的数值'))
return
}
if (min !== undefined && !isNaN(min) && max <= min) {
callback(new Error('最大值必须大于最小值'))
return
}
callback()
}
/** 校验步长 */
const validateStep = (_: any, __: any, callback: any) => {
const step = Number(dataSpecs.value.step)
if (isNaN(step)) {
callback(new Error('请输入有效的数值'))
return
}
if (step <= 0) {
callback(new Error('步长必须大于0'))
return
}
const min = Number(dataSpecs.value.min)
const max = Number(dataSpecs.value.max)
if (!isNaN(min) && !isNaN(max) && step > max - min) {
callback(new Error('步长不能大于最大值和最小值的差值'))
return
}
callback()
}
</script>
<style lang="scss" scoped>
:deep(.el-form-item) {
.el-form-item {
margin-bottom: 0;
}
}
</style>
src/views/iot/thingmodel/dataSpecs/ThingModelStructDataSpecs.vue deleted 100644 → 0
<!-- dataType：struct 数组类型 -->
<template>
<!-- struct 数据展示 -->
<el-form-item
:rules="[{ required: true, validator: validateList, trigger: 'change' }]"
label="JSON 对象"
>
<div
v-for="(item, index) in dataSpecsList"
:key="index"
class="w-1/1 struct-item flex justify-between px-10px mb-10px"
>
<span>参数名称：{{ item.name }}</span>
<div class="btn">
<el-button link type="primary" @click="openStructForm(item)">编辑</el-button>
<el-divider direction="vertical" />
<el-button link type="danger" @click="deleteStructItem(index)">删除</el-button>
</div>
</div>
<el-button link type="primary" @click="openStructForm(null)">+新增参数</el-button>
</el-form-item>
<!-- struct 表单 -->
<Dialog v-model="dialogVisible" :title="dialogTitle" append-to-body>
<el-form
ref="structFormRef"
v-loading="formLoading"
:model="formData"
:rules="ThingModelFormRules"
label-width="100px"
>
<el-form-item label="参数名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入功能名称" />
</el-form-item>
<el-form-item label="标识符" prop="identifier">
<el-input v-model="formData.identifier" placeholder="请输入标识符" />
</el-form-item>
<!-- 属性配置 -->
<ThingModelProperty v-model="formData.property" is-struct-data-specs />
</el-form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
import ThingModelProperty from '../ThingModelProperty.vue'
import { DataSpecsDataType, ThingModelFormRules } from '../config'
import { isEmpty } from '@/utils/is'
/** Struct 型的 dataSpecs 配置组件 */
defineOptions({ name: 'ThingModelStructDataSpecs' })
const props = defineProps<{ modelValue: any }>()
const emits = defineEmits(['update:modelValue'])
const dataSpecsList = useVModel(props, 'modelValue', emits) as Ref<any[]>
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('新增参数') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const structFormRef = ref() // 表单 ref
const formData = ref<any>({
property: {
dataType: DataSpecsDataType.INT,
dataSpecs: {
dataType: DataSpecsDataType.INT
}
}
})
/** 打开 struct 表单 */
const openStructForm = (val: any) => {
dialogVisible.value = true
resetForm()
if (isEmpty(val)) {
return
}
// 编辑时回显数据
formData.value = {
identifier: val.identifier,
name: val.name,
description: val.description,
property: {
dataType: val.childDataType,
dataSpecs: val.dataSpecs,
dataSpecsList: val.dataSpecsList
}
}
}
/** 删除 struct 项 */
const deleteStructItem = (index: number) => {
dataSpecsList.value.splice(index, 1)
}
/** 添加参数 */
const submitForm = async () => {
await structFormRef.value.validate()
try {
const data = unref(formData)
// 构建数据对象
const item = {
identifier: data.identifier,
name: data.name,
description: data.description,
dataType: DataSpecsDataType.STRUCT,
childDataType: data.property.dataType,
dataSpecs:
!!data.property.dataSpecs && Object.keys(data.property.dataSpecs).length > 1
? data.property.dataSpecs
: undefined,
dataSpecsList: isEmpty(data.property.dataSpecsList) ? undefined : data.property.dataSpecsList
}
// 查找是否已有相同 identifier 的项
const existingIndex = dataSpecsList.value.findIndex(
(spec) => spec.identifier === data.identifier
)
if (existingIndex > -1) {
// 更新已有项
dataSpecsList.value[existingIndex] = item
} else {
// 添加新项
dataSpecsList.value.push(item)
}
} finally {
// 隐藏对话框
dialogVisible.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
property: {
dataType: DataSpecsDataType.INT,
dataSpecs: {
dataType: DataSpecsDataType.INT
}
}
}
structFormRef.value?.resetFields()
}
/** 校验 struct 不能为空 */
const validateList = (_: any, __: any, callback: any) => {
if (isEmpty(dataSpecsList.value)) {
callback(new Error('struct 不能为空'))
return
}
callback()
}
/** 组件初始化 */
onMounted(async () => {
await nextTick()
// 预防 dataSpecsList 空指针
isEmpty(dataSpecsList.value) && (dataSpecsList.value = [])
})
</script>
<style lang="scss" scoped>
.struct-item {
background-color: #e4f2fd;
}
</style>
src/views/iot/thingmodel/dataSpecs/index.ts deleted 100644 → 0
import ThingModelEnumDataSpecs from './ThingModelEnumDataSpecs.vue'
import ThingModelNumberDataSpecs from './ThingModelNumberDataSpecs.vue'
import ThingModelArrayDataSpecs from './ThingModelArrayDataSpecs.vue'
import ThingModelStructDataSpecs from './ThingModelStructDataSpecs.vue'
export {
ThingModelEnumDataSpecs,
ThingModelNumberDataSpecs,
ThingModelArrayDataSpecs,
ThingModelStructDataSpecs
}
src/views/iot/thingmodel/index.vue deleted 100644 → 0
<!-- 产品的物模型列表 -->
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
ref="queryFormRef"
:inline="true"
:model="queryParams"
class="-mb-15px"
label-width="68px"
>
<el-form-item label="功能类型" prop="name">
<el-select
v-model="queryParams.type"
class="!w-240px"
clearable
placeholder="请选择功能类型"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_THING_MODEL_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon class="mr-5px" icon="ep:search" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon class="mr-5px" icon="ep:refresh" />
重置
</el-button>
<el-button
v-hasPermi="[`iot:thing-model:create`]"
plain
type="primary"
@click="openForm('create')"
>
<Icon class="mr-5px" icon="ep:plus" />
添加功能
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-tabs>
<el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
<el-table-column align="center" label="功能类型" prop="type">
<template #default="scope">
<dict-tag :type="DICT_TYPE.IOT_THING_MODEL_TYPE" :value="scope.row.type" />
</template>
</el-table-column>
<el-table-column align="center" label="功能名称" prop="name" />
<el-table-column align="center" label="标识符" prop="identifier" />
<el-table-column align="center" label="数据类型" prop="identifier">
<template #default="{ row }">
{{ dataTypeOptionsLabel(row.property?.dataType) ?? '-' }}
</template>
</el-table-column>
<el-table-column align="left" label="数据定义" prop="identifier">
<template #default="{ row }">
<DataDefinition :data="row" />
</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template #default="scope">
<el-button
v-hasPermi="[`iot:thing-model:update`]"
link
type="primary"
@click="openForm('update', scope.row.id)"
>
编辑
</el-button>
<el-button
v-hasPermi="['iot:thing-model:delete']"
link
type="danger"
@click="handleDelete(scope.row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
v-model:limit="queryParams.pageSize"
v-model:page="queryParams.pageNo"
:total="total"
@pagination="getList"
/>
</el-tabs>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<ThingModelForm ref="formRef" @success="getList" />
</template>
<script lang="ts" setup>
import { ThingModelApi, ThingModelData } from '@/api/iot/thingmodel'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import ThingModelForm from './ThingModelForm.vue'
import { ProductVO } from '@/api/iot/product/product'
import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
import { getDataTypeOptionsLabel } from './config'
import { DataDefinition } from './components'
defineOptions({ name: 'IoTThingModel' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const loading = ref(true) // 列表的加载中
const list = ref<ThingModelData[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
type: undefined,
productId: -1
})
const queryFormRef = ref() // 搜索的表单
const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT) // 注入产品信息
const dataTypeOptionsLabel = computed(() => (value: string) => getDataTypeOptionsLabel(value)) // 解析数据类型
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
queryParams.productId = product?.value?.id || -1
const data = await ThingModelApi.getThingModelPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
queryParams.type = undefined
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 ThingModelApi.deleteThingModel(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>
src/views/iot/utils/constants.ts deleted 100644 → 0
/** iot 依赖注入 KEY */
export const IOT_PROVIDE_KEY = {
PRODUCT: 'IOT_PRODUCT'
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment