变频器台账信息

frontend/.env.development

@@ -19,9 +19,9 @@ VITE_API_URL=/api
 
 # 开发环境跨域代理，支持配置多个
 
-VITE_PROXY=[["/api","http://127.0.0.1:18093/"]]
+VITE_PROXY=[["/api","http://127.0.0.1:18092/"]]
 #VITE_PROXY=[["/api","http://192.168.1.124:18092/"]]
 #VITE_PROXY=[["/api","http://192.168.2.125:18092/"]]
 # VITE_PROXY=[["/api","http://192.168.1.138:8080/"]]张文
 # 开启激活验证
-VITE_ACTIVATE_OPEN=true
+VITE_ACTIVATE_OPEN=false

frontend/.env.production

@@ -23,6 +23,6 @@ VITE_PWA=true
 
 # 线上环境接口地址
 #VITE_API_URL="/api" # 打包时用
-VITE_API_URL="http://127.0.0.1:18093/"
+VITE_API_URL="http://127.0.0.1:18092/"
 # 开启激活验证
-VITE_ACTIVATE_OPEN=true
+VITE_ACTIVATE_OPEN=false

frontend/src/api/device/freqConverter/index.ts

@@ -0,0 +1,29 @@
+import type {FreqConverter} from '@/api/device/interface/freqConverter'
+import http from '@/api'
+
+/**
+ * @name 变频器管理模块
+ */
+
+//获取设备类型
+export const getFreqConverterList = (params: FreqConverter.ReqFreqConverterParams) => {
+    return http.post(`/freqConverter/list`, params)
+}
+
+//添加设备类型
+export const addFreqConverter = (params: FreqConverter.ResFreqConverter) => {
+    return http.post(`/freqConverter/add`, params)
+}
+
+//编辑设备类型
+export const updateFreqConverter = (params: FreqConverter.ResFreqConverter) => {
+    return http.post(`/freqConverter/update`, params)
+}
+
+//删除设备类型
+export const deleteFreqConverter = (params: string[]) => {
+    return http.post(`/freqConverter/delete`, params)
+}
+
+
+

frontend/src/api/device/interface/freqConverter.ts

@@ -0,0 +1,40 @@
+import type {ReqPage, ResPage} from '@/api/interface'
+
+// 变频器模块
+export namespace FreqConverter {
+
+    /**
+     * 变频器数据表格分页查询参数
+     */
+    export interface ReqFreqConverterParams extends ReqPage {
+        name?: string; // 名称
+    }
+
+    /**
+     * 变频器新增、修改、根据id查询返回的对象
+     */
+    export interface ResFreqConverter {
+        id?: string;     //变频器ID
+        name: string;//变频器名称
+        portName: string; //串口名称
+        slaveAddress: number; //从机地址
+        baudRate: number; //波特率
+        parity: string; //奇偶校验类型
+        dataBits: number; //数据位
+        stopBits: number; //停止位
+        timeoutMs: number; //超时时间（毫秒）
+        suffix?: number; //数据表后缀
+        state?: number;
+        createBy?: string | null; //创建用户
+        createTime?: string | null; //创建时间
+        updateBy?: string | null; //更新用户
+        updateTime?: string | null; //更新时间
+    }
+
+    /**
+     * 变频器表格查询分页返回的对象；
+     */
+    export interface ResFreqConverterPage extends ResPage<ResFreqConverter> {
+
+    }
+}

frontend/src/views/authority/role/index.vue

@@ -18,7 +18,7 @@
       <template #operation='scope'>
         <el-button v-auth.role="'edit'" type='primary' link :icon='EditPen' @click="openDrawer('edit', scope.row)" :disabled="scope.row.code == 'root'">编辑</el-button>
         <el-button v-auth.role="'delete'"  type='primary' link :icon='Delete' @click='deleteAccount(scope.row)' :disabled="scope.row.code == 'root'">删除</el-button>
-        <el-button v-auth.role="'SetPermissions'" type='primary' link :icon='Share' @click="openDrawer('设置权限', scope.row)" :disabled="scope.row.code == 'root'">设置权限</el-button>
+        <el-button v-auth.role="'SetPermissions'" type='primary' link :icon='Share' @click="openDrawer('设置权限', scope.row)">设置权限</el-button>
       </template>
 
     </ProTable>

frontend/src/views/machine/freqConverter/components/freqConverterPopup.vue

@@ -0,0 +1,192 @@
+<template>
+  <!-- 基础信息弹出框 -->
+  <el-dialog :model-value="dialogVisible" :title="dialogTitle" v-bind="dialogMiddle" @close="close" align-center>
+    <div>
+      <el-form :model="formContent" ref='dialogFormRef' :rules='baseRules' class="form-two">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model='formContent.name' placeholder="请输入变频器名称" maxlength="32" show-word-limit/>
+        </el-form-item>
+        <el-form-item label="串口名称" prop="portName">
+          <el-input v-model='formContent.portName' placeholder="请输入串口名称" maxlength="32" show-word-limit/>
+        </el-form-item>
+        <el-form-item label="从机地址" prop="slaveAddress">
+          <el-input v-model='formContent.slaveAddress' placeholder="请输入从机地址" maxlength="32" show-word-limit/>
+        </el-form-item>
+        <el-form-item label="波特率" prop="baudRate">
+          <el-select v-model="formContent.baudRate" clearable placeholder="请选择波特率">
+            <el-option
+                v-for="item in baudRateList"
+                :key="item"
+                :label="item"
+                :value="item"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="奇偶校验类型" prop="parity">
+          <el-select v-model="formContent.parity" clearable placeholder="请选择奇偶校验类型">
+            <el-option key="None" label="None" :value="'None'"/>
+            <el-option key="Even" label="Even" :value="'Even'"/>
+            <el-option key="Odd" label="Odd" :value="'Odd'"/>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="数据位" prop="dataBits">
+          <el-select v-model="formContent.dataBits" clearable placeholder="请选择数据位">
+            <el-option key="4" label="4" :value="4"/>
+            <el-option key="5" label="5" :value="5"/>
+            <el-option key="6" label="6" :value="6"/>
+            <el-option key="7" label="7" :value="7"/>
+            <el-option key="8" label="8" :value="8"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="停止位" prop="stopBits">
+          <el-select v-model="formContent.stopBits" clearable placeholder="请选择停止位">
+            <el-option key="1" label="1" :value="1"/>
+            <el-option key="2" label="2" :value="2"/>
+          </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 FormItemRule} from 'element-plus'
+import {computed, ref} from 'vue'
+import {type FreqConverter} from '@/api/device/interface/freqConverter'
+import {dialogMiddle} from '@/utils/elementBind'
+import {addFreqConverter, updateFreqConverter} from '@/api/device/freqConverter/index.ts'
+
+// 定义弹出组件元信息
+const dialogFormRef = ref()
+
+function useMetaInfo() {
+  const dialogVisible = ref(false)
+  const titleType = ref('add')
+  const formContent = ref<FreqConverter.ResFreqConverter>({
+    id: '',
+    name: '',   //名称
+    portName: '',//串口名称
+    slaveAddress: 1, //从机地址
+    baudRate: 9600, //波特率
+    parity: 'None', //奇偶校验类型
+    dataBits: 8, //数据位
+    stopBits: 1, //停止位
+    timeoutMs: 500, //超时时间（毫秒）
+  })
+  const baudRateList = [75, 110, 134, 150, 300, 600, 1200, 1800, 2400, 4800, 7200, 9600, 14400, 19200, 38400, 57600, 115200, 128000]
+  return {dialogVisible, titleType, formContent, baudRateList}
+}
+
+const {dialogVisible, titleType, formContent, baudRateList} = useMetaInfo()
+
+
+// 清空formContent
+const resetFormContent = () => {
+  formContent.value = {
+    id: '',
+    name: '',   //名称
+    portName: '',//串口名称
+    slaveAddress: 1, //从机地址
+    baudRate: 9600, //波特率
+    parity: 'None', //奇偶校验类型
+    dataBits: 8, //数据位
+    stopBits: 1, //停止位
+    timeoutMs: 500, //超时时间（毫秒）
+  }
+}
+
+let dialogTitle = computed(() => {
+  return titleType.value === 'add' ? '新增变频器' : '编辑变频器'
+})
+
+
+//定义校验规则
+const baseRules: Record<string, Array<FormItemRule>> = {
+  name: [{required: true, message: '名称必填！', trigger: 'blur'}],
+  portName: [
+    {required: true, message: '串口名称必填！', trigger: 'blur'}
+  ],
+  slaveAddress: [
+    {required: true, message: '从机地址必填！', trigger: 'blur'}
+  ],
+  baudRate: [
+    {required: true, message: '波特率必填！', trigger: 'blur'}
+  ],
+  parity: [
+    {required: true, message: '奇偶校验类型必选！', trigger: 'change'}
+  ],
+  dataBits: [
+    {required: true, message: '数据位必填！', trigger: 'blur'}
+  ],
+  stopBits: [
+    {required: true, message: '停止位必填！', trigger: 'blur'}
+  ],
+  timeoutMs: [
+    {required: true, message: '超时时间必填！', trigger: 'blur'}
+  ]
+};
+
+
+// 关闭弹窗
+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) {
+          debugger;;
+          await updateFreqConverter(formContent.value);
+        } else {
+          await addFreqConverter(formContent.value);
+        }
+        ElMessage.success({message: `${dialogTitle.value}成功！`})
+        close()
+        // 刷新表格
+        await props.refreshTable!()
+      }
+    })
+  } catch (err) {
+    //error('验证过程中出现错误', err)
+  }
+}
+
+// 打开弹窗，可能是新增，也可能是编辑
+const open = async (sign: string, data: FreqConverter.ResFreqConverter) => {
+  // 重置表单
+  dialogFormRef.value?.resetFields()
+  titleType.value = sign
+  dialogVisible.value = true
+
+  if (data.id) {
+    formContent.value = {...data}
+  } else {
+    resetFormContent()
+  }
+}
+
+// 对外映射
+defineExpose({open})
+const props = defineProps<{
+  refreshTable: (() => Promise<void>) | undefined;
+}>()
+
+</script>

frontend/src/views/machine/freqConverter/index.vue

@@ -0,0 +1,116 @@
+<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.freqConverter="'add'" type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
+        <el-button v-auth.freqConverter="'delete'" type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
+                   @click='batchDelete(scope.selectedListIds)'>
+          删除
+        </el-button>
+      </template>
+      <!-- 表格操作 -->
+      <template #operation='scope'>
+        <el-button v-auth.freqConverter="'edit'" type='primary' link :icon='EditPen' :model-value='false' @click="openDialog('edit', scope.row)">编辑
+        </el-button>
+        <el-button v-auth.freqConverter="'delete'" type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除
+        </el-button>
+        <el-button v-auth.freqConverter="'test'" type='primary' link :icon='Stopwatch' @click='handleTest(scope.row)'>检测
+        </el-button>
+        <el-button v-auth.freqConverter="'result'" type='primary' link :icon='Coin' @click='handleResult(scope.row)'>结果
+        </el-button>
+      </template>
+
+    </ProTable>
+  </div>
+  <FreqConverterPopup :refresh-table='proTable?.getTableList' ref='freqConverterPopup'/>
+</template>
+
+<script setup lang='tsx' name='freqConverter'>
+import {type FreqConverter} from '@/api/device/interface/freqConverter'
+import {useHandleData} from '@/hooks/useHandleData'
+import ProTable from '@/components/ProTable/index.vue'
+import {type ColumnProps, type ProTableInstance} from '@/components/ProTable/interface'
+import {CirclePlus, Coin, Delete, EditPen, Stopwatch} from '@element-plus/icons-vue'
+import {deleteFreqConverter, getFreqConverterList} from '@/api/device/freqConverter/index.ts'
+import {reactive, ref} from 'vue'
+
+// ProTable 实例
+const proTable = ref<ProTableInstance>()
+const freqConverterPopup = ref()
+
+const getTableList = async (params: any) => {
+  let newParams = JSON.parse(JSON.stringify(params))
+  return getFreqConverterList(newParams)
+}
+
+
+// 表格配置项
+const columns = reactive<ColumnProps<FreqConverter.ResFreqConverter>[]>([
+  {type: 'selection', fixed: 'left', width: 70},
+  {type: 'index', fixed: 'left', width: 70, label: '序号'},
+  {prop: 'name', label: '名称', search: {el: 'input'}, minWidth: 100},
+  {prop: 'portName', label: '串口名称', minWidth: 90},
+  {prop: 'slaveAddress', label: '从机地址', minWidth: 90},
+  {prop: 'baudRate', label: '波特率', minWidth: 80},
+  {prop: 'parity', label: '奇偶校验类型', minWidth: 120},
+  {prop: 'dataBits', label: '数据位', minWidth: 80},
+  {prop: 'stopBits', label: '停止位', minWidth: 80},
+  {prop: 'timeoutMs', label: '超时时间(MS)', minWidth: 120},
+  {
+    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: 280},
+])
+
+// 打开 drawer(新增、编辑)
+const openDialog = (titleType: string, row: Partial<FreqConverter.ResFreqConverter> = {}) => {
+  freqConverterPopup.value?.open(titleType, row)
+}
+
+
+// 批量删除设备类型
+const batchDelete = async (id: string[]) => {
+  await useHandleData(deleteFreqConverter, id, '删除所选变频器')
+  proTable.value?.clearSelection()
+  proTable.value?.getTableList()
+}
+
+// 删除设备类型
+const handleDelete = async (params: FreqConverter.ResFreqConverter) => {
+  await useHandleData(deleteFreqConverter, [params.id], `删除【${params.name}】变频器`)
+  proTable.value?.getTableList()
+}
+
+const handleTest = async (params: FreqConverter.ResFreqConverter) => {
+  await useHandleData(deleteFreqConverter, [params.id], `删除【${params.name}】变频器`)
+  proTable.value?.getTableList()
+}
+
+const handleResult = async (params: FreqConverter.ResFreqConverter) => {
+  await useHandleData(deleteFreqConverter, [params.id], `删除【${params.name}】变频器`)
+  proTable.value?.getTableList()
+}
+
+</script>
+