设备类型

This commit is contained in:
sjl
2025-02-11 10:40:34 +08:00
parent e46e9e1d3a
commit 4adc28a055
7 changed files with 516 additions and 2 deletions

View File

@@ -0,0 +1,29 @@
import type { DevType } from '@/api/device/interface/devType'
import http from '@/api'
/**
* @name 设备类型管理模块
*/
//获取设备类型
export const getDevTypeList = (params: DevType.ReqPqDevTypeParams) => {
return http.post(`/devType/list`, params)
}
//添加设备类型
export const addDevType = (params: DevType.ResPqDevType) => {
return http.post(`/devType/add`, params)
}
//编辑设备类型
export const updateDevType = (params: DevType.ResPqDevType) => {
return http.post(`/devType/update`, params)
}
//删除设备类型
export const deleteDevType = (params: string[]) => {
return http.post(`/devType/delete`, params)
}

View File

@@ -0,0 +1,38 @@
import type { ICD } from '@/api/device/interface/icd'
import http from '@/api'
import { pa } from 'element-plus/es/locale/index.mjs'
/**
* @name ICD管理模块
*/
//获取ICD分页
export const getICDList = (params: ICD.ReqICDParams) => {
return http.get(`/icd/listAll`,params)
}
//获取ICD
export const getICDAllList = (params: ICD.ResICD) => {
return http.get(`/icd/listAll`,params)
}
//添加ICD
export const addICD = (params: ICD.ResICD) => {
return http.post(`/icd/add`, params)
}
//编辑ICD
export const updateICD = (params: ICD.ResICD) => {
return http.post(`/icd/update`, params)
}
//删除ICD
export const deleteICD = (params: string[]) => {
return http.post(`/icd/delete`, params)
}

View File

@@ -0,0 +1,40 @@
import type { ReqPage, ResPage } from '@/api/interface'
// 设备类型模块
export namespace DevType {
/**
* 设备类型数据表格分页查询参数
*/
export interface ReqPqDevTypeParams extends ReqPage {
id: string; // 装置序号id 必填
devType?: string; // 设备名称
createTime?: string; //创建时间
}
/**
* 设备类型新增、修改、根据id查询返回的对象
*/
export interface ResPqDevType {
id: string; //设备类型ID
name: string;//设备类型名称
icd: string| null;//设备关联的ICD
power: string| null;//工作电源
devVolt: number; //额定电压V
devCurr: number; //额定电流A
devChns: number; //设备通道数
reportName: string| null;//报告模版名称
state: number;
createBy?: string| null; //创建用户
createTime?: string| null; //创建时间
updateBy?: string| null; //更新用户
updateTime?: string| null; //更新时间
}
/**
* 设备类型表格查询分页返回的对象;
*/
export interface ResPqDevTypePage extends ResPage<ResPqDevType> {
}
}

View File

@@ -0,0 +1,35 @@
import type { ReqPage, ResPage } from '@/api/interface'
// ICD模块
export namespace ICD {
/**
* ICD表格分页查询参数
*/
export interface ReqICDParams extends ReqPage {
id: string; // 装置序号id 必填
devType?: string; // 设备名称
createTime?: string; //创建时间
}
/**
* ICD新增、修改、根据id查询返回的对象
*/
export interface ResICD {
id: string; //icdID
name: string;//icd名称
path: string;//icd存储地址
state: number;
createBy?: string| null; //创建用户
createTime?: string| null; //创建时间
updateBy?: string| null; //更新用户
updateTime?: string| null; //更新时间
}
/**
* ICD表格查询分页返回的对象
*/
export interface ResICDPage extends ResPage<ResICD> {
}
}

View File

@@ -0,0 +1,222 @@
<template>
<!-- 基础信息弹出框 -->
<el-dialog :model-value="dialogVisible" :title="dialogTitle" v-bind="dialogSmall" @close="close" >
<div>
<el-form :model="formContent" ref='dialogFormRef' :rules='rules' >
<el-form-item label="名称" prop="name" >
<el-input v-model='formContent.name' placeholder="请输入设备类型名称"/>
</el-form-item>
<el-form-item label="工作电源" prop="power" >
<el-select v-model="formContent.power" clearable placeholder="请选择工作电源">
<el-option
v-for="item in dictStore.getDictData('Dev_Power')"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label="通道数" prop="devChns" >
<el-select v-model="formContent.devChns" clearable placeholder="请选择设备通道数">
<el-option
v-for="item in dictStore.getDictData('Dev_Chns')"
:key="item.id"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label="额定电压(V)" prop="devVolt" >
<el-select v-model="formContent.devVolt" clearable placeholder="请选择额定电压">
<el-option
v-for="item in dictStore.getDictData('Dev_Volt')"
:key="item.id"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label="额定电流(A)" prop="devCurr" >
<el-select v-model="formContent.devCurr" clearable placeholder="请选择额定电流">
<el-option
v-for="item in dictStore.getDictData('Dev_Curr')"
:key="item.id"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label="报告模版名称" prop="reportName" >
<el-select v-model="formContent.reportName" clearable placeholder="请选择报告模版">
<el-option
v-for="item in dictStore.getDictData('Report_Template')"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label="设备关联ICD" prop="icd" >
<el-select v-model="formContent.icd" clearable placeholder="请选择ICD">
<el-option
v-for="item in icdOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-form>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="close()">取消</el-button>
<el-button type="primary" @click="save()" >
保存
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import{ ElMessage, type FormInstance,type FormItemRule } from 'element-plus'
import type { ProTableInstance } from '@/components/ProTable/interface'
import { ref,computed, Ref } from 'vue'
import { type DevType } from '@/api/device/interface/devType'
import { type ICD } from '@/api/device/interface/icd'
import {dialogSmall} from '@/utils/elementBind'
import { useDictStore } from '@/stores/modules/dict'
import {addDevType,updateDevType} from '@/api/device/devType'
import {getICDAllList} from '@/api/device/icd'
const dictStore = useDictStore()
// 定义弹出组件元信息
const dialogFormRef = ref()
const icdOptions = ref<ICD.ResICD[]>([])
function useMetaInfo() {
const dialogVisible = ref(false)
const titleType = ref('add')
const formContent = ref<DevType.ResPqDevType>({
id: '', //设备类型ID
name: '',//设备类型名称
icd: '',//设备关联的ICD
power: 'AC/DC 110V-220V',//工作电源
devVolt: 57.74, //额定电压V
devCurr: 5, //额定电流A
devChns: 1, //设备通道数
reportName: '',//报告模版名称
state: 1,
})
return { dialogVisible, titleType, formContent }
}
const { dialogVisible, titleType, formContent } = useMetaInfo()
// 清空formContent
const resetFormContent = () => {
formContent.value = {
id: '', //设备类型ID
name: '',//设备类型名称
icd: '',//设备关联的ICD
power: 'AC/DC 110V-220V',//工作电源
devVolt: 57.74, //额定电压V
devCurr: 5, //额定电流A
devChns: 1, //设备通道数
reportName: '',//报告模版名称
state: 1,
}
}
let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增设备类型' : '编辑设备类型'
})
//定义规则
const formRuleRef = ref<FormInstance>()
//定义校验规则
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
name: [{ required: true, message: '设备类型名称必填!', trigger: 'blur' }],
power: [
{ required: true, message: '工作电源必选!', trigger: 'change' }
],
devChns: [
{ required: true, message: '设备通道数必选!', trigger: 'change' }
],
devVolt: [
{ required: true, message: '额定电压必选!', trigger: 'change' }
],
devCurr: [
{ required: true, message: '额定电流必选!', trigger: 'change' }
],
})
// 关闭弹窗
const close = () => {
dialogVisible.value = false
// 清空dialogForm中的值
resetFormContent()
// 重置表单
dialogFormRef.value?.resetFields()
}
// 保存数据
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
if (formContent.value.id) {
await updateDevType(formContent.value);
} else {
await addDevType(formContent.value);
}
ElMessage.success({ message: `${dialogTitle.value}成功!` })
close()
// 刷新表格
await props.refreshTable!()
}
})
} catch (err) {
//error('验证过程中出现错误', err)
}
}
// 打开弹窗,可能是新增,也可能是编辑
const open = async (sign: string, data: DevType.ResPqDevType) => {
// 重置表单
dialogFormRef.value?.resetFields()
titleType.value = sign
dialogVisible.value = true
const response = await getICDAllList({
id: '',
name: '',
path: '',
state: 1
})
icdOptions.value = (response.data as ICD.ResICD[]).map(item => ({
id: item.id,
name: item.name,
path: item.path,
state: item.state,
}))
if (data.id) {
formContent.value = { ...data }
} else {
resetFormContent()
}
}
// 对外映射
defineExpose({ open })
const props = defineProps<{
refreshTable: (() => Promise<void>) | undefined;
}>()
</script>

View File

@@ -0,0 +1,148 @@
<template>
<div class='table-box' ref='popupBaseView'>
<ProTable
ref='proTable'
:columns='columns'
:request-api='getTableList'
>
<!-- :requestApi="getRoleList" -->
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
<el-button v-auth.devType="'add'" type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
<el-button v-auth.devType="'delete'" type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
@click='batchDelete(scope.selectedListIds)'>
删除
</el-button>
</template>
<!-- 表格操作 -->
<template #operation='scope'>
<el-button v-auth.devType="'edit'" type='primary' link :icon='EditPen' :model-value='false'
@click="openDialog('edit', scope.row)">编辑
</el-button>
<el-button v-auth.devType="'delete'" type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除
</el-button>
</template>
</ProTable>
</div>
<DevTypePopup :refresh-table='proTable?.getTableList' ref='devTypePopup' />
</template>
<script setup lang='tsx' name='useRole'>
import TimeControl from '@/components/TimeControl/index.vue'
import { type DevType } from '@/api/device/interface/devType'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
import ProTable from '@/components/ProTable/index.vue'
import { type ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, Delete, EditPen, Download, Upload } from '@element-plus/icons-vue'
import { useDictStore } from '@/stores/modules/dict'
import {
getDevTypeList,
deleteDevType,
} from '@/api/device/devType/index.ts'
import { reactive, ref } from 'vue'
import { useModeStore, useAppSceneStore } from '@/stores/modules/mode'
defineOptions({
name: 'devType',
})
const modeStore = useModeStore()
const dictStore = useDictStore()
// ProTable 实例
const proTable = ref<ProTableInstance>()
const devTypePopup = ref()
const getTableList = async (params: any) => {
let newParams = JSON.parse(JSON.stringify(params))
// newParams.searchEndTime = endDate.value
// newParams.searchBeginTime = startDate.value
// const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id//获取数据字典中对应的id
// newParams.pattern = patternId
return getDevTypeList(newParams)
}
// 表格配置项
const columns = reactive<ColumnProps<DevType.ResPqDevType>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
{
prop: 'name',
label: '名称',
search: { el: 'input' },
minWidth: 200,
},
{
prop: 'devChns',
label: '通道数',
minWidth: 110,
},
{
prop: 'devVolt',
label: '额定电压V',
minWidth: 130,
},
{
prop: 'devCurr',
label: '额定电流A',
minWidth: 130,
},
{
prop: 'createTime',
label: '创建时间',
width: 200,
render: scope => {
if (scope.row.createTime) {
const date = new Date(scope.row.createTime);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
return '';
}
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 200 },
])
// 处理日期变化的回调函数
const startDate = ref('')
const endDate = ref('')
const handleDateChange = (startDateTemp: string, endDateTemp: string) => {
startDate.value = startDateTemp
endDate.value = endDateTemp
}
// 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<DevType.ResPqDevType> = {}) => {
devTypePopup.value?.open(titleType, row)
}
// 批量删除设备
const batchDelete = async (id: string[]) => {
const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''//获取数据字典中对应的id
await useHandleData(deleteDevType, id, '删除所选设备类型')
proTable.value?.clearSelection()
proTable.value?.getTableList()
}
// 删除设备
const handleDelete = async (params: DevType.ResPqDevType) => {
const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id//获取数据字典中对应的id
await useHandleData(deleteDevType, [params.id] , `删除【${params.name}】设备类型`)
proTable.value?.getTableList()
}
</script>

View File

@@ -253,8 +253,7 @@ const baseRules: Record<string, Array<FormItemRule>> = {
{ required: true, message: '额定电流必填!', trigger: 'blur' }, { required: true, message: '额定电流必填!', trigger: 'blur' },
{ pattern: /^\d+(\.\d+)?$/, message: '额定电流格式错误', trigger: 'blur' } { pattern: /^\d+(\.\d+)?$/, message: '额定电流格式错误', trigger: 'blur' }
], ],
createId: [{ required: true, message: '装置编号必填!', trigger: 'blur' }, createId: [{ required: true, message: '装置编号必填!', trigger: 'blur' }
{ pattern: /^\d+$/, message: '装置编号为数字', trigger: 'blur' }
], ],
ip: [ ip: [
{ required: true, message: 'IP地址必填', trigger: 'blur' }, { required: true, message: 'IP地址必填', trigger: 'blur' },
@@ -279,6 +278,9 @@ const rules = computed(() => {
} }
if (scene.value === '1'){//只有楼下出厂需要展示 if (scene.value === '1'){//只有楼下出厂需要展示
dynamicRules.preinvestmentPlan= [{ required: true, message: '预投计划必选!', trigger: 'change' }]; dynamicRules.preinvestmentPlan= [{ required: true, message: '预投计划必选!', trigger: 'change' }];
dynamicRules.createId= [{ required: true, message: '装置编号必填!', trigger: 'blur' },
{ pattern: /^\d+$/, message: '装置编号为数字', trigger: 'blur' }
];
} }
if (scene.value !== '0') { if (scene.value !== '0') {
dynamicRules.name = [{ required: true, message: '设备名称必填!', trigger: 'blur' }]; dynamicRules.name = [{ required: true, message: '设备名称必填!', trigger: 'blur' }];