修改设备管理的列表和详情
This commit is contained in:
parent
e3993aefb8
commit
840adcafce
@ -1,51 +1,55 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
// 设备 VO
|
||||
export interface DeviceVO {
|
||||
id: number // 主键ID
|
||||
devicename: string // 设备名称
|
||||
devicecode: string // 设备ID/编号
|
||||
devicetype: string // 设备类型
|
||||
location: string // 设备位置
|
||||
devicestatus: number // 设备状态(0:待激活 1 在线 2 离线 ,3 禁用 )
|
||||
orgid: number // 机构ID
|
||||
orgname: string // 机构名称
|
||||
description: string // 设备描述
|
||||
createtime: Date // 创建时间
|
||||
updatetime: Date // 更新时间
|
||||
createby: string // 创建人
|
||||
updateby: string // 更新人
|
||||
}
|
||||
|
||||
// 设备 API
|
||||
export const DeviceApi = {
|
||||
// 查询设备分页
|
||||
getDevicePage: async (params: any) => {
|
||||
return await request.get({ url: `/system/device/page`, params })
|
||||
},
|
||||
|
||||
// 查询设备详情
|
||||
getDevice: async (id: number) => {
|
||||
return await request.get({ url: `/system/device/get?id=` + id })
|
||||
},
|
||||
|
||||
// 新增设备
|
||||
createDevice: async (data: DeviceVO) => {
|
||||
return await request.post({ url: `/system/device/create`, data })
|
||||
},
|
||||
|
||||
// 修改设备
|
||||
updateDevice: async (data: DeviceVO) => {
|
||||
return await request.put({ url: `/system/device/update`, data })
|
||||
},
|
||||
|
||||
// 删除设备
|
||||
deleteDevice: async (id: number) => {
|
||||
return await request.delete({ url: `/system/device/delete?id=` + id })
|
||||
},
|
||||
|
||||
// 导出设备 Excel
|
||||
exportDevice: async (params) => {
|
||||
return await request.download({ url: `/system/device/export-excel`, params })
|
||||
},
|
||||
}
|
||||
import request from '@/config/axios'
|
||||
|
||||
// 设备 VO
|
||||
export interface DeviceVO {
|
||||
id: number // 主键ID
|
||||
devicename: string // 设备名称
|
||||
devicecode: number // 设备ID/编号
|
||||
devicetype: string // 设备类型
|
||||
location: string // 设备位置
|
||||
devicestatus: number // 设备状态(0:待激活 1 在线 2 离线 ,3 禁用 )
|
||||
orgid: number // 机构ID
|
||||
orgname: string // 机构名称
|
||||
description: string // 设备描述
|
||||
createtime: Date // 创建时间
|
||||
updatetime: Date // 更新时间
|
||||
createby: string // 创建人
|
||||
updateby: string // 更新人
|
||||
}
|
||||
|
||||
// 设备 API
|
||||
export const DeviceApi = {
|
||||
// 查询设备分页
|
||||
getDevicePage: async (params: any) => {
|
||||
return await request.get({ url: `/system/device/page`, params })
|
||||
},
|
||||
|
||||
// 查询设备详情
|
||||
getDevice: async (id: number) => {
|
||||
return await request.get({ url: `/system/device/get?id=` + id })
|
||||
},
|
||||
// 查询设备详情
|
||||
getDeviceId: async (devicecode: number) => {
|
||||
return await request.get({ url: `/system/device/getDeviceId?devicecode=` + devicecode })
|
||||
},
|
||||
|
||||
// 新增设备
|
||||
createDevice: async (data: DeviceVO) => {
|
||||
return await request.post({ url: `/system/device/create`, data })
|
||||
},
|
||||
|
||||
// 修改设备
|
||||
updateDevice: async (data: DeviceVO) => {
|
||||
return await request.put({ url: `/system/device/update`, data })
|
||||
},
|
||||
|
||||
// 删除设备
|
||||
deleteDevice: async (id: number) => {
|
||||
return await request.delete({ url: `/system/device/delete?id=` + id })
|
||||
},
|
||||
|
||||
// 导出设备 Excel
|
||||
exportDevice: async (params) => {
|
||||
return await request.download({ url: `/system/device/export-excel`, params })
|
||||
},
|
||||
}
|
||||
|
||||
@ -244,5 +244,8 @@ export enum DICT_TYPE {
|
||||
IOT_PLUGIN_STATUS = 'iot_plugin_status', // IOT 插件状态
|
||||
IOT_PLUGIN_TYPE = 'iot_plugin_type', // IOT 插件类型
|
||||
IOT_DATA_BRIDGE_DIRECTION_ENUM = 'iot_data_bridge_direction_enum', // 桥梁方向
|
||||
IOT_DATA_BRIDGE_TYPE_ENUM = 'iot_data_bridge_type_enum' // 桥梁类型
|
||||
IOT_DATA_BRIDGE_TYPE_ENUM = 'iot_data_bridge_type_enum', // 桥梁类型
|
||||
//===================设备类型===================
|
||||
IOT_DEVICE_TYPE = 'iot_device_type', // 设备类型
|
||||
IOT_DEVICE_STATUS = 'iot_device_status', // 设备状态
|
||||
}
|
||||
|
||||
@ -8,25 +8,25 @@
|
||||
:disabled="true"
|
||||
>
|
||||
<el-form-item label="设备ID">
|
||||
<span>{{ formData.deviceKey }}</span>
|
||||
<span>{{ formData.devicecode }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备名称">
|
||||
<span>{{ formData.deviceName }}</span>
|
||||
<span>{{ formData.devicename }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属机构">
|
||||
<span>{{ getOrgName(formData.productId) }}</span>
|
||||
<span>{{ formData.orgname }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型">
|
||||
<span>{{ getDeviceTypeName(formData.deviceType) }}</span>
|
||||
<span>{{ getDeviceTypeName(formData.devicetype) }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备位置">
|
||||
<span>{{ formData.address }}</span>
|
||||
<span>{{ formData.location }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备状态">
|
||||
<span>{{ getDeviceStateName(formData.state) }}</span>
|
||||
<span>{{ getDeviceStatusName(formData.devicestatus) }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备描述">
|
||||
<span>{{ formData.description || '-' }}</span>
|
||||
<span>{{ formData.description }}</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
@ -36,67 +36,46 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import * as DeviceApi from '@/api/iot/device/device'
|
||||
import * as ProductApi from '@/api/iot/product/product'
|
||||
import { DeviceStateEnum } from '@/api/iot/device/device'
|
||||
import { DeviceApi } from '@/api/device'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
defineOptions({ name: 'DeviceDetailsForm' })
|
||||
|
||||
// 设备类型映射
|
||||
const getDeviceTypeName = (type: string) => {
|
||||
const typeMap: Record<string, string> = {
|
||||
'ECG': '心电设备',
|
||||
'BP': '血压设备',
|
||||
'SPO2': '血氧设备',
|
||||
'TEMP': '体温设备',
|
||||
'WEIGHT': '体重设备'
|
||||
}
|
||||
return typeMap[type] || type
|
||||
}
|
||||
|
||||
// 设备状态映射
|
||||
const getDeviceStatusName = (status: string | number) => {
|
||||
const statusMap: Record<string | number, string> = {
|
||||
0: '待激活',
|
||||
1: '在线',
|
||||
2: '离线'
|
||||
}
|
||||
return statusMap[status] || '未知状态'
|
||||
}
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中
|
||||
const formData = ref<DeviceApi.DeviceVO>({
|
||||
id: 0,
|
||||
deviceKey: '',
|
||||
deviceName: '',
|
||||
productId: 0,
|
||||
productKey: '',
|
||||
deviceType: 0,
|
||||
nickname: '',
|
||||
gatewayId: 0,
|
||||
state: DeviceStateEnum.INACTIVE,
|
||||
onlineTime: new Date(),
|
||||
offlineTime: new Date(),
|
||||
activeTime: new Date(),
|
||||
createTime: new Date(),
|
||||
ip: '',
|
||||
firmwareVersion: '',
|
||||
deviceSecret: '',
|
||||
mqttClientId: '',
|
||||
mqttUsername: '',
|
||||
mqttPassword: '',
|
||||
authType: '',
|
||||
latitude: 0,
|
||||
longitude: 0,
|
||||
areaId: 0,
|
||||
address: '',
|
||||
serialNumber: '',
|
||||
config: '',
|
||||
description: '',
|
||||
groupIds: []
|
||||
const formData = ref({
|
||||
devicecode: undefined,
|
||||
devicename: '',
|
||||
orgname: '',
|
||||
devicetype: '',
|
||||
location: '',
|
||||
devicestatus: '',
|
||||
description: ''
|
||||
})
|
||||
|
||||
const productList = ref<ProductApi.ProductVO[]>([]) // 产品列表
|
||||
|
||||
// 获取机构名称
|
||||
const getOrgName = (productId: number) => {
|
||||
const product = productList.value.find(item => item.id === productId)
|
||||
return product?.name || '-'
|
||||
}
|
||||
|
||||
// 获取设备类型名称
|
||||
const getDeviceTypeName = (type: number) => {
|
||||
const dict = getIntDictOptions(DICT_TYPE.IOT_DEVICE_TYPE).find(item => item.value === type)
|
||||
return dict?.label || '-'
|
||||
}
|
||||
|
||||
// 获取设备状态名称
|
||||
const getDeviceStateName = (state: number) => {
|
||||
const dict = getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATE).find(item => item.value === state)
|
||||
return dict?.label || '-'
|
||||
}
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (id: number) => {
|
||||
dialogVisible.value = true
|
||||
@ -106,38 +85,8 @@ const open = async (id: number) => {
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
// 这里模拟获取设备数据，实际项目中应该调用API
|
||||
const mockDeviceData = {
|
||||
id: id,
|
||||
deviceKey: 'Device' + id,
|
||||
deviceName: '测试设备' + id,
|
||||
deviceType: 1,
|
||||
state: DeviceStateEnum.INACTIVE,
|
||||
address: '北京市/海淀区/中关村',
|
||||
description: '这是一个测试设备的描述信息',
|
||||
productId: 1,
|
||||
productKey: 'product_key_' + id,
|
||||
nickname: '设备昵称' + id,
|
||||
gatewayId: 1,
|
||||
onlineTime: new Date(),
|
||||
offlineTime: new Date(),
|
||||
activeTime: new Date(),
|
||||
createTime: new Date(),
|
||||
ip: '192.168.1.1',
|
||||
firmwareVersion: '1.0.0',
|
||||
deviceSecret: 'secret_' + id,
|
||||
mqttClientId: 'client_' + id,
|
||||
mqttUsername: 'username_' + id,
|
||||
mqttPassword: 'password_' + id,
|
||||
authType: 'password',
|
||||
latitude: 39.123456,
|
||||
longitude: 117.123456,
|
||||
areaId: 1,
|
||||
serialNumber: 'SN' + id,
|
||||
config: '{}',
|
||||
groupIds: []
|
||||
}
|
||||
formData.value = mockDeviceData
|
||||
const res = await DeviceApi.getDeviceId(id)
|
||||
formData.value = res
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
@ -148,34 +97,13 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: 0,
|
||||
deviceKey: '',
|
||||
deviceName: '',
|
||||
productId: 0,
|
||||
productKey: '',
|
||||
deviceType: 0,
|
||||
nickname: '',
|
||||
gatewayId: 0,
|
||||
state: DeviceStateEnum.INACTIVE,
|
||||
onlineTime: new Date(),
|
||||
offlineTime: new Date(),
|
||||
activeTime: new Date(),
|
||||
createTime: new Date(),
|
||||
ip: '',
|
||||
firmwareVersion: '',
|
||||
deviceSecret: '',
|
||||
mqttClientId: '',
|
||||
mqttUsername: '',
|
||||
mqttPassword: '',
|
||||
authType: '',
|
||||
latitude: 0,
|
||||
longitude: 0,
|
||||
areaId: 0,
|
||||
address: '',
|
||||
serialNumber: '',
|
||||
config: '',
|
||||
description: '',
|
||||
groupIds: []
|
||||
devicecode: undefined,
|
||||
devicename: '',
|
||||
orgname: '',
|
||||
devicetype: '',
|
||||
location: '',
|
||||
devicestatus: '',
|
||||
description: ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,64 +1,77 @@
|
||||
<template>
|
||||
<el-card class="device-card" :body-style="{ padding: '20px' }" :data-status="deviceInfo.status">
|
||||
<!-- 设备卡片组件 -->
|
||||
<el-card class="device-card" :body-style="{ padding: '20px' }" :data-status="deviceInfo.devicestatus">
|
||||
<div class="card-content">
|
||||
<!-- 设备基本信息区域 -->
|
||||
<div class="device-info">
|
||||
<!-- 设备名称和操作按钮区域 -->
|
||||
<div class="name-section">
|
||||
<h3 class="device-name">{{ deviceInfo.name }}</h3>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
class="detail-btn"
|
||||
text
|
||||
@click="handleAction('details')"
|
||||
>
|
||||
详情
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
class="data-btn"
|
||||
text
|
||||
@click="handleAction('data')"
|
||||
>
|
||||
数据
|
||||
</el-button>
|
||||
<h3 class="device-name">{{ deviceInfo.devicename }}</h3>
|
||||
<!-- 详情和数据按钮 -->
|
||||
<div class="button-group">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
class="detail-btn"
|
||||
text
|
||||
@click="handleAction('details')"
|
||||
>
|
||||
详情
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
class="data-btn"
|
||||
text
|
||||
@click="handleAction('data')"
|
||||
>
|
||||
数据
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="device-status" :class="deviceInfo.status">
|
||||
{{ deviceInfo.statusText }}
|
||||
<!-- 设备状态显示 -->
|
||||
<p class="device-status" :class="getStatusClass(deviceInfo.devicestatus)">
|
||||
{{ getStatusText(deviceInfo.devicestatus) }}
|
||||
</p>
|
||||
</div>
|
||||
<!-- 设备详细信息区域 -->
|
||||
<div class="device-details">
|
||||
<p class="detail-item">
|
||||
<span class="label">设备ID：</span>
|
||||
<span class="value">{{ deviceInfo.id }}</span>
|
||||
<span class="value">{{ deviceInfo.devicecode }}</span>
|
||||
</p>
|
||||
<p class="detail-item">
|
||||
<span class="label">类型：</span>
|
||||
<span class="value">{{ deviceInfo.type }}</span>
|
||||
<span class="value">{{ getDeviceTypeName(deviceInfo.devicetype) }}</span>
|
||||
</p>
|
||||
<p class="detail-item">
|
||||
<span class="label">位置：</span>
|
||||
<span class="value">{{ deviceInfo.address }}</span>
|
||||
<span class="value">{{ deviceInfo.location }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- 分隔线 -->
|
||||
<div class="divider"></div>
|
||||
<!-- 设备操作按钮区域 -->
|
||||
<div class="action-buttons">
|
||||
<!-- 启用按钮 -->
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:disabled="deviceInfo.status === 'normal'"
|
||||
:disabled="deviceInfo.devicestatus === 1"
|
||||
@click="handleAction('enable')"
|
||||
>
|
||||
启用
|
||||
</el-button>
|
||||
<!-- 停用按钮 -->
|
||||
<el-button
|
||||
type="warning"
|
||||
size="small"
|
||||
:disabled="deviceInfo.status === 'error'"
|
||||
:disabled="deviceInfo.devicestatus === 2"
|
||||
@click="handleAction('disable')"
|
||||
>
|
||||
停用
|
||||
</el-button>
|
||||
<!-- 设置按钮 -->
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
@ -66,6 +79,7 @@
|
||||
>
|
||||
设置
|
||||
</el-button>
|
||||
<!-- 删除按钮 -->
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
@ -79,36 +93,95 @@
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script lang="ts" setup>
|
||||
import { defineProps, defineEmits } from 'vue'
|
||||
import { Delete } from '@element-plus/icons-vue'
|
||||
|
||||
// 定义组件属性
|
||||
const props = defineProps({
|
||||
deviceInfo: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({
|
||||
id: '',
|
||||
name: '',
|
||||
type: '',
|
||||
address: '',
|
||||
status: 'normal',
|
||||
statusText: '正常'
|
||||
id: '', // 设备ID
|
||||
devicename: '', // 设备名称
|
||||
devicetype: '', // 设备类型
|
||||
location: '', // 设备位置
|
||||
devicestatus: 0, // 设备状态：0-待激活，1-在线，2-离线，3-禁用
|
||||
statusText: '待激活' // 状态文本
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// 定义事件
|
||||
const emit = defineEmits(['action'])
|
||||
|
||||
/**
|
||||
* 获取设备状态文本
|
||||
* @param {number} status - 设备状态码
|
||||
* @returns {string} 状态文本
|
||||
*/
|
||||
const getStatusText = (status) => {
|
||||
switch (status) {
|
||||
case 0:
|
||||
return '待激活'
|
||||
case 1:
|
||||
return '在线'
|
||||
case 2:
|
||||
return '离线'
|
||||
case 3:
|
||||
return '禁用'
|
||||
default:
|
||||
return '未知'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取设备状态对应的样式类名
|
||||
* @param {number} status - 设备状态码
|
||||
* @returns {string} 样式类名
|
||||
*/
|
||||
const getStatusClass = (status) => {
|
||||
switch (status) {
|
||||
case 0:
|
||||
return 'warning' // 待激活状态 - 黄色
|
||||
case 1:
|
||||
return 'normal' // 在线状态 - 绿色
|
||||
case 2:
|
||||
return 'error' // 离线状态 - 灰色
|
||||
case 3:
|
||||
return 'disabled' // 禁用状态 - 红色
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理设备操作事件
|
||||
* @param {string} action - 操作类型
|
||||
*/
|
||||
const handleAction = (action) => {
|
||||
emit('action', {
|
||||
action,
|
||||
deviceId: props.deviceInfo.id
|
||||
deviceId: props.deviceInfo.devicecode
|
||||
})
|
||||
}
|
||||
|
||||
// 设备类型映射
|
||||
const getDeviceTypeName = (type: string) => {
|
||||
const typeMap: Record<string, string> = {
|
||||
'ECG': '心电设备',
|
||||
'BP': '血压设备',
|
||||
'SPO2': '血氧设备',
|
||||
'TEMP': '体温设备',
|
||||
'WEIGHT': '体重设备'
|
||||
}
|
||||
return typeMap[type] || type
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 设备卡片基础样式 */
|
||||
.device-card {
|
||||
width: 300px;
|
||||
margin: 10px;
|
||||
@ -119,70 +192,94 @@ const handleAction = (action) => {
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
/* 卡片悬停效果 */
|
||||
.device-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
/* 卡片内容布局 */
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 设备信息区域样式 */
|
||||
.device-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
/* 名称区域样式 */
|
||||
.name-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
flex: 1;
|
||||
min-width: 0; /* 防止子元素溢出 */
|
||||
}
|
||||
|
||||
/* 设备名称样式 */
|
||||
.device-name {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
color: #303133;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease;
|
||||
white-space: nowrap; /* 防止文字换行 */
|
||||
overflow: hidden; /* 超出部分隐藏 */
|
||||
text-overflow: ellipsis; /* 显示省略号 */
|
||||
max-width: 150px; /* 最大宽度 */
|
||||
}
|
||||
|
||||
/* 设备名称悬停效果 */
|
||||
.device-card:hover .device-name {
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
/* 设备状态基础样式 */
|
||||
.device-status {
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap; /* 防止文字换行 */
|
||||
}
|
||||
|
||||
/* 在线状态样式 */
|
||||
.device-status.normal {
|
||||
background-color: #67C23A;
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(103, 194, 58, 0.3);
|
||||
}
|
||||
|
||||
/* 待激活状态样式 */
|
||||
.device-status.warning {
|
||||
background-color: #F7BA2A;
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(247, 186, 42, 0.3);
|
||||
}
|
||||
|
||||
/* 离线状态样式 */
|
||||
.device-status.error {
|
||||
background-color: #909399;
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(144, 147, 153, 0.3);
|
||||
}
|
||||
|
||||
/* 禁用状态样式 */
|
||||
.device-status.disabled {
|
||||
background-color: #F56C6C;
|
||||
color: white;
|
||||
box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
|
||||
}
|
||||
|
||||
/* 设备详情区域样式 */
|
||||
.device-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -190,6 +287,7 @@ const handleAction = (action) => {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
/* 详情项样式 */
|
||||
.detail-item {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
@ -197,128 +295,91 @@ const handleAction = (action) => {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* 详情项悬停效果 */
|
||||
.device-card:hover .detail-item {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
/* 标签样式 */
|
||||
.label {
|
||||
color: #909399;
|
||||
margin-right: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 值样式 */
|
||||
.value {
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 分隔线样式 */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, #b7b7bb, transparent);
|
||||
margin: 5px 0;
|
||||
background: linear-gradient(to right, transparent, #DCDFE6, transparent);
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
/* 操作按钮区域样式 */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.action-buttons .el-button {
|
||||
flex: 1;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.action-buttons .el-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
padding: 0 !important;
|
||||
background-color: #f38787 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
background-color: #f38787 !important;
|
||||
}
|
||||
|
||||
.delete-btn .el-icon {
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.detail-btn {
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
height: auto;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.detail-btn:hover {
|
||||
color: #79bbff;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.data-btn {
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
height: auto;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #67C23A;
|
||||
}
|
||||
|
||||
.data-btn:hover {
|
||||
color: #71d440;
|
||||
background: none;
|
||||
border: none;
|
||||
/* 按钮图标样式 */
|
||||
.el-icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
/* 在线状态卡片样式 */
|
||||
.device-card[data-status="normal"] {
|
||||
.device-card[data-status="1"] {
|
||||
background: linear-gradient(145deg, #e6f3ff, #fafafa);
|
||||
border: 1px solid rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 在线状态卡片悬停效果 */
|
||||
.device-card[data-status="normal"]:hover {
|
||||
.device-card[data-status="1"]:hover {
|
||||
background: linear-gradient(145deg, #d9edff, #fafafa);
|
||||
box-shadow: 0 8px 30px rgba(64, 158, 255, 0.15);
|
||||
}
|
||||
|
||||
/* 待激活状态卡片样式 */
|
||||
.device-card[data-status="warning"] {
|
||||
/* 淡粉色渐变背景，从淡粉色过渡到纯白色 */
|
||||
.device-card[data-status="0"] {
|
||||
background: linear-gradient(145deg, #f7ecec, #fafafa);
|
||||
/* 淡粉色边框 */
|
||||
border: 1px solid rgba(247, 186, 42, 0.2);
|
||||
}
|
||||
|
||||
/* 待激活状态卡片悬停效果 */
|
||||
.device-card[data-status="warning"]:hover {
|
||||
/* 悬停时加深粉色渐变效果 */
|
||||
.device-card[data-status="0"]:hover {
|
||||
background: linear-gradient(145deg, #f7ecec, #fafafa);
|
||||
/* 添加淡粉色阴影效果 */
|
||||
box-shadow: 0 8px 30px rgba(247, 186, 42, 0.15);
|
||||
}
|
||||
|
||||
/* 离线状态卡片样式 */
|
||||
.device-card[data-status="error"] {
|
||||
.device-card[data-status="2"] {
|
||||
background: linear-gradient(145deg, #e4e4e4, #fafafa);
|
||||
border: 1px solid rgba(247, 186, 42, 0.2);
|
||||
}
|
||||
|
||||
/* 离线状态卡片悬停效果 */
|
||||
.device-card[data-status="error"]:hover {
|
||||
.device-card[data-status="2"]:hover {
|
||||
background: linear-gradient(145deg, #e4e4e4, #fafafa);
|
||||
box-shadow: 0 8px 30px rgba(247, 186, 42, 0.15);
|
||||
}
|
||||
/* 禁用状态卡片样式 */
|
||||
.device-card[data-status="3"] {
|
||||
background: linear-gradient(145deg, #f09393, #fafafa);
|
||||
border: 1px solid rgba(245, 108, 108, 0.2);
|
||||
}
|
||||
|
||||
/* 禁用状态卡片悬停效果 */
|
||||
.device-card[data-status="3"]:hover {
|
||||
background: linear-gradient(145deg, #f09393, #fafafa);
|
||||
box-shadow: 0 8px 30px rgba(245, 108, 108, 0.15);
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
>
|
||||
<el-form-item label="设备名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
v-model="queryParams.devicename"
|
||||
placeholder="请输入设备名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
@ -19,13 +19,13 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="设备状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
v-model="queryParams.devicestatus"
|
||||
placeholder="请选择设备状态"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
@ -35,13 +35,13 @@
|
||||
<!-- 设备类型 -->
|
||||
<el-form-item label="设备类型" prop="type">
|
||||
<el-select
|
||||
v-model="queryParams.type"
|
||||
v-model="queryParams.devicetype"
|
||||
placeholder="请选择设备类型"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
v-for="dict in getStrDictOptions(DICT_TYPE.IOT_DEVICE_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
@ -72,6 +72,13 @@
|
||||
@action="handleDeviceAction"
|
||||
/>
|
||||
</div>
|
||||
<!-- 分页组件 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="handleQuery"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 设备表单 -->
|
||||
@ -82,60 +89,38 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton } from 'element-plus'
|
||||
import { getIntDictOptions } from '@/utils/dict'
|
||||
import { getIntDictOptions,getStrDictOptions } from '@/utils/dict'
|
||||
import { DICT_TYPE } from '@/utils/dict'
|
||||
import DeviceCard from '../devices/devices_cards.vue'
|
||||
import DeviceForm from './DevFrom.vue'
|
||||
import DetailsForm from './DetailsForm.vue'
|
||||
|
||||
import { DeviceApi } from '@/api/device'
|
||||
import { getUserProfile } from '@/api/system/user/profile'
|
||||
// 查询参数
|
||||
interface QueryParams {
|
||||
name: string
|
||||
status: number | undefined
|
||||
type: number | undefined
|
||||
devicename: string
|
||||
devicestatus: number | undefined
|
||||
devicetype: string | undefined
|
||||
pageNo: number
|
||||
pageSize: number
|
||||
orgid: number
|
||||
}
|
||||
|
||||
const queryParams = reactive<QueryParams>({
|
||||
name: '',
|
||||
status: undefined,
|
||||
type: undefined
|
||||
devicename: '',
|
||||
devicestatus: undefined,
|
||||
devicetype: '',
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
orgid: 0
|
||||
})
|
||||
|
||||
// 总数据量
|
||||
const total = ref(0)
|
||||
// 用户信息
|
||||
const userProfile = ref()
|
||||
// 设备列表数据
|
||||
const deviceList = ref([
|
||||
{
|
||||
id: 'ECG001',
|
||||
name: '心电设备',
|
||||
type: '心电设备',
|
||||
address: '北京市/市辖区/西城区',
|
||||
status: 'normal',
|
||||
statusText: '在线'
|
||||
},
|
||||
{
|
||||
id: 'Blood001',
|
||||
name: '血压仪',
|
||||
type: '血压仪',
|
||||
address: '天津市/市辖区/西青区/精武镇',
|
||||
status: 'normal',
|
||||
statusText: '在线'
|
||||
},
|
||||
{
|
||||
id: 'Glucose001',
|
||||
name: '血糖仪',
|
||||
type: '血糖仪',
|
||||
address: '河北省/廊坊市/安次区',
|
||||
status: 'warning',
|
||||
statusText: '待激活'
|
||||
},
|
||||
{
|
||||
id: 'Oxygen001',
|
||||
name: '血氧仪',
|
||||
type: '血氧仪',
|
||||
address: '四川省/绵阳市/涪城区',
|
||||
status: 'error',
|
||||
statusText: '离线'
|
||||
}
|
||||
])
|
||||
const deviceList = ref([])
|
||||
|
||||
// 查询表单引用
|
||||
const queryFormRef = ref()
|
||||
@ -145,14 +130,25 @@ const deviceFormRef = ref()
|
||||
const detailsFormRef = ref()
|
||||
|
||||
// 查询方法
|
||||
const handleQuery = () => {
|
||||
// TODO: 实现查询逻辑
|
||||
console.log('查询参数：', queryParams)
|
||||
const handleQuery = async () => {
|
||||
try {
|
||||
//指定查询当前登录用户的机构ID
|
||||
queryParams.orgid = userProfile.value.dept.id
|
||||
const res = await DeviceApi.getDevicePage(queryParams)
|
||||
deviceList.value = res.list
|
||||
total.value = res.total
|
||||
} catch (error) {
|
||||
console.error('获取设备列表失败：', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields()
|
||||
queryParams.devicename = ''
|
||||
queryParams.devicestatus = undefined
|
||||
queryParams.devicetype = ''
|
||||
queryParams.pageNo = 1
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
@ -163,6 +159,7 @@ const openForm = (type: string) => {
|
||||
|
||||
// 处理设备操作
|
||||
const handleDeviceAction = (action: any) => {
|
||||
console.log('设备操作：', action)
|
||||
if (action.action === 'details') {
|
||||
// 打开表单并加载设备数据
|
||||
detailsFormRef.value?.open(action.deviceId)
|
||||
@ -172,9 +169,10 @@ const handleDeviceAction = (action: any) => {
|
||||
}
|
||||
|
||||
// 页面加载时获取数据
|
||||
onMounted(() => {
|
||||
// TODO: 实现获取设备列表数据
|
||||
// 这里可以添加实际的API调用
|
||||
onMounted(async () => {
|
||||
// 首先获取用户信息
|
||||
userProfile.value = await getUserProfile()
|
||||
handleQuery()
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -185,4 +183,10 @@ onMounted(() => {
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user