设备类型
This commit is contained in:
29
frontend/src/api/device/devType/index.ts
Normal file
29
frontend/src/api/device/devType/index.ts
Normal 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)
|
||||
}
|
||||
|
||||
|
||||
|
||||
38
frontend/src/api/device/icd/index.ts
Normal file
38
frontend/src/api/device/icd/index.ts
Normal 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)
|
||||
}
|
||||
|
||||
|
||||
|
||||
40
frontend/src/api/device/interface/devType.ts
Normal file
40
frontend/src/api/device/interface/devType.ts
Normal 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> {
|
||||
|
||||
}
|
||||
}
|
||||
35
frontend/src/api/device/interface/icd.ts
Normal file
35
frontend/src/api/device/interface/icd.ts
Normal 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> {
|
||||
|
||||
}
|
||||
}
|
||||
222
frontend/src/views/machine/devType/components/devTypePopup.vue
Normal file
222
frontend/src/views/machine/devType/components/devTypePopup.vue
Normal 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>
|
||||
148
frontend/src/views/machine/devType/index.vue
Normal file
148
frontend/src/views/machine/devType/index.vue
Normal 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>
|
||||
|
||||
@@ -253,8 +253,7 @@ const baseRules: Record<string, Array<FormItemRule>> = {
|
||||
{ required: true, message: '额定电流必填!', trigger: 'blur' },
|
||||
{ pattern: /^\d+(\.\d+)?$/, message: '额定电流格式错误', trigger: 'blur' }
|
||||
],
|
||||
createId: [{ required: true, message: '装置编号必填!', trigger: 'blur' },
|
||||
{ pattern: /^\d+$/, message: '装置编号为数字', trigger: 'blur' }
|
||||
createId: [{ required: true, message: '装置编号必填!', trigger: 'blur' }
|
||||
],
|
||||
ip: [
|
||||
{ required: true, message: 'IP地址必填!', trigger: 'blur' },
|
||||
@@ -279,6 +278,9 @@ const rules = computed(() => {
|
||||
}
|
||||
if (scene.value === '1'){//只有楼下出厂需要展示
|
||||
dynamicRules.preinvestmentPlan= [{ required: true, message: '预投计划必选!', trigger: 'change' }];
|
||||
dynamicRules.createId= [{ required: true, message: '装置编号必填!', trigger: 'blur' },
|
||||
{ pattern: /^\d+$/, message: '装置编号为数字', trigger: 'blur' }
|
||||
];
|
||||
}
|
||||
if (scene.value !== '0') {
|
||||
dynamicRules.name = [{ required: true, message: '设备名称必填!', trigger: 'blur' }];
|
||||
|
||||
Reference in New Issue
Block a user