diff --git a/PVDEMCSUI/src/Utils/helper.ts b/PVDEMCSUI/src/Utils/helper.ts
index e3bab19..3971970 100644
--- a/PVDEMCSUI/src/Utils/helper.ts
+++ b/PVDEMCSUI/src/Utils/helper.ts
@@ -433,4 +433,21 @@ export default class helper {
     }
     return textStatus;
   };
+
+  static params = (obj: any) => {
+    let result = '';
+    let item;
+    for (item in obj) {
+      if (
+        (obj[item] && String(obj[item])) ||
+        (item == 'activated' && obj[item] != undefined)
+      ) {
+        result += `&${item}=${obj[item]}`;
+      }
+    }
+    if (result) {
+      result = '?' + result.slice(1);
+    }
+    return result;
+  };
 }
diff --git a/PVDEMCSUI/src/api/device/deviceApi.ts b/PVDEMCSUI/src/api/device/deviceApi.ts
new file mode 100644
index 0000000..68b2102
--- /dev/null
+++ b/PVDEMCSUI/src/api/device/deviceApi.ts
@@ -0,0 +1,112 @@
+import helper from 'src/Utils/helper';
+import { request } from '../../boot/axios';
+import { Pagination } from '../class';
+import {
+  DeivceSearchEntity,
+  DeivceEntity,
+  DeivcePointSearchEntity,
+  DeivcePointEntity
+} from './model/deivce';
+const pathName = 'Device/';
+
+class DeviceApi {
+  // PLC控制器 分页
+  getDevicePageList = (val: Pagination<DeivceSearchEntity>) => {
+    let format = `?page=${val.page}&size=${val.rowsPerPage}`;
+    if (val.data.deviceCode) {
+      format += `&deviceCode=${val.data.deviceCode}`;
+    }
+    if (val.data.deviceName) {
+      format += `&deviceName=${val.data.deviceName}`;
+    }
+    if (val.data.activated != undefined && val.data.activated != null) {
+      format += `&activated=${val.data.activated}`;
+    }
+    return request.get(`${pathName}GetDevicePageList${format}`);
+  };
+
+  // 添加PLC控制器
+  addDevice = (val: DeivceEntity) => {
+    return request.post(`${pathName}AddDevice`, val);
+  };
+  // 修改PLC控制器
+  updateDevice = (val: DeivceEntity) => {
+    return request.post(`${pathName}UpdateDevice`, val);
+  };
+  // 删除PLC控制器
+  deleteDevice = (val: any) => {
+    return request.post(`${pathName}DeleteDevice?id=${val}`);
+  };
+
+  // 获取PLC控制器列表
+  getDeviceInfoList = (val: DeivceSearchEntity) => {
+    const format = helper.params(val);
+    return request.get(`${pathName}GetDeviceInfoList${format}`);
+  };
+
+  // 获取PLC控制器明细
+  getDeviceDetail = (val: any) => {
+    return request.get(`${pathName}GetDeviceDetail?id=${val}`);
+  };
+
+  // PLC控制器点位 分页
+  getDevicePointPageList = (val: Pagination<DeivcePointSearchEntity>) => {
+    let format = `?page=${val.page}&size=${val.rowsPerPage}`;
+    if (val.data.deviceId) {
+      format += `&deviceId=${val.data.deviceId}`;
+    }
+    if (val.data.deviceCode) {
+      format += `&deviceCode=${val.data.deviceCode}`;
+    }
+    if (val.data.deviceName) {
+      format += `&deviceName=${val.data.deviceName}`;
+    }
+    if (val.data.equipmentName) {
+      format += `&equipmentName=${val.data.equipmentName}`;
+    }
+    if (val.data.equipmentCode) {
+      format += `&equipmentCode=${val.data.equipmentCode}`;
+    }
+    if (val.data.equipmentType) {
+      format += `&equipmentType=${val.data.equipmentType}`;
+    }
+    if (val.data.pointCode) {
+      format += `&pointCode=${val.data.pointCode}`;
+    }
+    if (val.data.pointName) {
+      format += `&pointName=${val.data.pointName}`;
+    }
+    if (val.data.activated != undefined && val.data.activated != null) {
+      format += `&activated=${val.data.activated}`;
+    }
+    return request.get(`${pathName}GetDevicePointPageList${format}`);
+  };
+
+  // 获取PLC控制器点位列表
+  getDevicePointList = (val: DeivcePointSearchEntity) => {
+    debugger;
+    const format = helper.params(val);
+    return request.get(`${pathName}GetDevicePointList${format}`);
+  };
+
+  // 获取PLC控制器点位明细
+  getDevicePointDetail = (val: any) => {
+    return request.get(`${pathName}GetDevicePointDetail?id=${val}`);
+  };
+
+  // 添加PLC控制器点位
+  addDevicePoint = (val: DeivcePointEntity) => {
+    return request.post(`${pathName}AddDevicePoint`, val);
+  };
+  // 修改PLC控制器点位
+  updateDevicePoint = (val: DeivcePointEntity) => {
+    return request.post(`${pathName}UpdateDevicePoint`, val);
+  };
+  // 删除PLC控制器点位
+  deleteDevicePoint = (val: any) => {
+    return request.post(`${pathName}DeleteDevicePoint?id=${val}`);
+  };
+}
+const deviceApi = new DeviceApi();
+
+export { deviceApi };
diff --git a/PVDEMCSUI/src/api/device/model/device.ts b/PVDEMCSUI/src/api/device/model/device.ts
new file mode 100644
index 0000000..7a9104f
--- /dev/null
+++ b/PVDEMCSUI/src/api/device/model/device.ts
@@ -0,0 +1,52 @@
+// PLC控制器
+export class DeivceSearchEntity {
+  deviceCode!: string;
+  deviceName!: string;
+  activated!: boolean;
+}
+
+// PLC控制器
+export class DeivceEntity {
+  id!: string;
+  deviceCode!: string; // 控制器编号
+  deviceName!: string; // 控制器名称
+  activated!: boolean; // 控制器状态,1：启用，0：停用
+  protocol!: string; // 控制器协议:PLC,HTTP,Socket
+  host!: string; // 控制器主机地址
+  port!: number; // 控制器主机端口
+  remark!: string; // 备注
+  isConnected!: boolean; // 设备连接状态
+}
+
+// PLC控制器点位
+export class DeivcePointSearchEntity {
+  deviceId!: string;
+  deviceCode!: string;
+  deviceName!: string;
+  equipmentName!: string;
+  equipmentCode!: string;
+  equipmentType!: string;
+  pointCode!: string;
+  pointName!: string;
+  activated!: boolean;
+}
+
+// PLC控制器点位
+export class DeivcePointEntity {
+  id!: string;
+  deviceId!: string;
+  deviceCode!: string;
+  deviceName!: string;
+  equipmentId!: string;
+  equipmentCode!: string;
+  equipmentName!: string;
+  equipmentType!: string;
+  actionType!: string;
+  pointCode!: string;
+  pointName!: string;
+  address!: string;
+  dataType!: string;
+  activated!: boolean;
+  remark!: string;
+  objectValue!: string;
+}
diff --git a/PVDEMCSUI/src/api/equipment/equipmentApi.ts b/PVDEMCSUI/src/api/equipment/equipmentApi.ts
index 2c47db7..d2fe3f7 100644
--- a/PVDEMCSUI/src/api/equipment/equipmentApi.ts
+++ b/PVDEMCSUI/src/api/equipment/equipmentApi.ts
@@ -1,3 +1,4 @@
+import helper from 'src/Utils/helper';
 import { request } from '../../boot/axios';
 import { Pagination } from '../class';
 import { EquipmentSearchEntity, EquipmentEntity } from './model/equipment';
@@ -16,11 +17,24 @@ class EquipmentApi {
     if (val.data.equipmentType) {
       format += `&equipmentType=${val.data.equipmentType}`;
     }
-    if (val.data.activated) {
+    if (val.data.activated != undefined && val.data.activated != null) {
       format += `&activated=${val.data.activated}`;
     }
     return request.get(`${pathName}GetEquipmentPageList${format}`);
   };
+
+  // 获取设备列表
+  getEquipmentList = (val: EquipmentSearchEntity) => {
+    debugger;
+    const format = helper.params(val);
+    return request.get(`${pathName}GetEquipmentList${format}`);
+  };
+
+  // 获取设备明细
+  getEquipmentDetail = (val: any) => {
+    return request.get(`${pathName}GetEquipmentDetail?id=${val}`);
+  };
+
   // 添加
   add = (val: EquipmentEntity) => {
     return request.post(`${pathName}AddEquipment`, val);
diff --git a/PVDEMCSUI/src/layouts/MainScreenLayout.vue b/PVDEMCSUI/src/layouts/MainScreenLayout.vue
index 233564f..7acde8f 100644
--- a/PVDEMCSUI/src/layouts/MainScreenLayout.vue
+++ b/PVDEMCSUI/src/layouts/MainScreenLayout.vue
@@ -78,10 +78,10 @@
                                 <div class="text-subtitle2 q-mt-sm q-mb-sm">
                                     Hi! {{ user.userName }}
                                 </div>
-                                <q-btn color="primary" label="设备管理" push v-close-popup icon="img:statics/icons/PLC.png"
-                                    :to="{ name: 'equipment' }">
+                                <q-btn color="primary" label="PLC管理" push v-close-popup icon="img:statics/icons/PLC.png"
+                                    :to="{ name: 'device' }">
                                     <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
-                                        content-style="font-size: 12px">设备管理</q-tooltip>
+                                        content-style="font-size: 12px">PLC控制器管理</q-tooltip>
                                 </q-btn>
                                 <q-btn style="margin-top: 5px" color="primary" label="设备管理" push v-close-popup icon="apps"
                                     :to="{ name: 'equipment' }">
diff --git a/PVDEMCSUI/src/pages/device/components/addOrEditDevicePointDialog.vue b/PVDEMCSUI/src/pages/device/components/addOrEditDevicePointDialog.vue
new file mode 100644
index 0000000..34f7787
--- /dev/null
+++ b/PVDEMCSUI/src/pages/device/components/addOrEditDevicePointDialog.vue
@@ -0,0 +1,147 @@
+<template>
+    <q-dialog v-model="visible">
+        <q-card class="shadow-24" style="max-width: 40vw">
+            <q-card-section class="no-padding">
+                <q-card-actions class="bg-light-blue-10 text-white">
+                    <q-card-actions class="text-h6">{{ addOrEditFormTitle }}</q-card-actions>
+                    <q-space />
+                    <q-btn dense flat round icon="close" @click="clickForm()">
+                        <q-tooltip content-class="bg-amber text-black shadow-4">关闭</q-tooltip>
+                    </q-btn>
+                </q-card-actions>
+            </q-card-section>
+            <q-card-section style="max-width: 40vw" class="scroll">
+                <q-form ref="myForm">
+                    <div class="row q-col-gutter-md">
+                        <div class="col-xl-6 col-lg-12 col-sm-12">
+                            <q-input class="text-h6" outlined v-model="addOrEditFormData.deviceCode" disable
+                                label="控制器编号" />
+                        </div>
+                        <div class="col-xl-6 col-lg-12 col-sm-12">
+                            <q-input class="text-h6" outlined v-model="addOrEditFormData.deviceName" disable
+                                label="控制器名称" />
+                        </div>
+                        <div class="col-xl-6 col-lg-12 col-sm-12">
+                            <q-input class="text-h6" outlined label="设备编码" readonly
+                                v-model.trim="addOrEditFormData.equipmentCode" ref="equipmentCodeRef" :rules="[
+                                    (val) => (val !== null && val !== '' && val != undefined) || '请选择设备编码',
+                                ]">
+                                <template v-slot:append>
+                                    <q-btn icon="search" round flat color="primary" @click="equipmentClick">
+                                        <q-tooltip>选择设备</q-tooltip>
+                                    </q-btn>
+                                </template>
+                            </q-input>
+
+                        </div>
+                        <div class="col-xl-6 col-lg-12 col-sm-12">
+                            <q-input class="text-h6" outlined v-model="addOrEditFormData.equipmentName" disable
+                                label="设备名称" />
+                        </div>
+                        <div class="col-xl-6 col-lg-12 col-sm-12">
+                            <q-input class="text-h6" outlined v-model="addOrEditFormData.pointCode" label="点位编号"
+                                :rules="[(val) => (val && val.length > 0) || '请填写点位编号']" />
+                        </div>
+                        <div class="col-xl-6 col-lg-12 col-sm-12">
+                            <q-input class="text-h6" outlined v-model="addOrEditFormData.pointName" label="点位名称"
+                                :rules="[(val) => (val && val.length > 0) || '请填写点位名称']" />
+                        </div>
+                        <div class="col-xl-6 col-lg-12 col-sm-12">
+                            <q-select class="text-h6" outlined v-model="addOrEditFormData.activated"
+                                :options="activatedList" emit-value map-options label="PLC点位是否启用" />
+                        </div>
+                        <div class="col-xl-6 col-lg-12 col-sm-12">
+                            <q-input class="text-h6" outlined v-model="addOrEditFormData.remark" label="备注"
+                                :rules="[(val) => (val && val.length > 0) || '请填写备注']" />
+                        </div>
+                    </div>
+                </q-form>
+            </q-card-section>
+            <q-separator />
+            <q-card-actions align="right">
+                <q-btn color="white" text-color="black" style="margin-right: 25px" @click="clickForm()">{{ '取消' }}</q-btn>
+                <q-btn color="primary" @click="submitForm()">提交</q-btn>
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+    <!-- 设备选择 -->
+    <equipmentDialog ref="selectEquipmentRef" @returnEquipment="returnEquipment" />
+</template>
+<script lang="ts" setup>
+import { deviceApi } from 'src/api/device/deviceApi';
+import { DeivcePointEntity } from 'src/api/device/model/device';
+import { ref } from 'vue';
+import equipmentDialog from './equipmentDialog.vue'
+
+// const props = defineProps<{
+//   areaPropertyList: any[];
+//   warehouseList: any[];
+// }>();
+const emit = defineEmits(['refresh']);
+
+const activatedList = ref([
+    { label: '停用', value: false },
+    { label: '启用', value: true },
+])
+
+//新增或修改
+const visible = ref(false);
+const addOrEditFormTitle = ref('');
+
+const addOrEditFormData = ref(new DeivcePointEntity());
+const clickForm = (e?: any) => {
+    if (visible.value) {
+        addOrEditFormData.value = new DeivcePointEntity();
+    } else {
+        if (e.id) {
+            //获取class 添加弹窗文本（新增/编辑）
+            addOrEditFormData.value = JSON.parse(JSON.stringify(e)); // 改为深拷贝;
+            addOrEditFormTitle.value = '修改PLC点位';
+        } else {
+            addOrEditFormTitle.value = '新增PLC点位';
+            addOrEditFormData.value.deviceId = e.id;
+            addOrEditFormData.value.deviceCode = e.deviceCode
+            addOrEditFormData.value.deviceName = e.deviceName
+            addOrEditFormData.value.activated = true;
+        }
+    }
+    visible.value = !visible.value;
+};
+
+const myForm = ref();
+const submitForm = () => {
+    myForm.value.validate().then((success: any) => {
+        if (success) {
+            if (addOrEditFormData.value.id !== undefined) {
+                deviceApi.updateDevicePoint(addOrEditFormData.value).then(() => {
+                    clickForm();
+                    emit('refresh');
+                });
+            } else {
+                deviceApi.addDevicePoint(addOrEditFormData.value).then(() => {
+                    clickForm();
+                    emit('refresh');
+                });
+            }
+        }
+    });
+};
+
+const selectEquipmentRef = ref();
+const equipmentClick = () => {
+    selectEquipmentRef.value.clickForm();
+}
+
+// 接收返回选择的设备并赋值
+const returnEquipment = (row: any) => {
+    addOrEditFormData.value.equipmentId = row.id
+    addOrEditFormData.value.equipmentCode = row.equipmentCode
+    addOrEditFormData.value.equipmentName = row.equipmentName
+    addOrEditFormData.value.equipmentType = row.equipmentType
+}
+
+
+defineExpose({
+    clickForm,
+});
+</script>
\ No newline at end of file
diff --git a/PVDEMCSUI/src/pages/device/components/addOrEditDialog.vue b/PVDEMCSUI/src/pages/device/components/addOrEditDialog.vue
new file mode 100644
index 0000000..94ca7d9
--- /dev/null
+++ b/PVDEMCSUI/src/pages/device/components/addOrEditDialog.vue
@@ -0,0 +1,120 @@
+<template>
+    <q-dialog v-model="visible">
+        <q-card class="shadow-24" style="max-width: 40vw">
+            <q-card-section class="no-padding">
+                <q-card-actions class="bg-light-blue-10 text-white">
+                    <q-card-actions class="text-h6">{{ addOrEditFormTitle }}</q-card-actions>
+                    <q-space />
+                    <q-btn dense flat round icon="close" @click="clickForm()">
+                        <q-tooltip content-class="bg-amber text-black shadow-4">关闭</q-tooltip>
+                    </q-btn>
+                </q-card-actions>
+            </q-card-section>
+            <q-card-section style="max-width: 40vw" class="scroll">
+                <q-form ref="myForm">
+                    <div class="row q-col-gutter-md">
+                        <div class="col-xl-6 col-lg-12 col-sm-12">
+                            <q-input class="text-h6" outlined v-model="addOrEditFormData.deviceCode" label="控制器编号"
+                                :rules="[(val) => (val && val.length > 0) || '请填写控制器编号']" />
+                        </div>
+                        <div class="col-xl-6 col-lg-12 col-sm-12">
+                            <q-input class="text-h6" outlined v-model="addOrEditFormData.deviceName" label="控制器名称"
+                                :rules="[(val) => (val && val.length > 0) || '请填写控制器名称']" />
+                        </div>
+                        <div class="col-xl-6 col-lg-12 col-sm-12">
+                            <q-input class="text-h6" outlined v-model="addOrEditFormData.host" label="控制器主机地址"
+                                :rules="[(val) => (val && val.length > 0) || '请填写控制器主机地址']" />
+                        </div>
+                        <div class="col-xl-6 col-lg-12 col-sm-12">
+                            <q-input class="text-h6" type="number" outlined v-model="addOrEditFormData.port" label="控制器主机端口"
+                                :rules="[(val) => (val != null && val != undefined && val != '') || '请填写控制器主机端口']" />
+                        </div>
+                        <div class="col-xl-6 col-lg-12 col-sm-12">
+                            <q-select class="text-h6" outlined v-model="addOrEditFormData.protocol" :options="protocolList"
+                                emit-value map-options label="控制器协议"
+                                :rules="[(val) => (val && val.length > 0) || '请选择控制器协议']" />
+                        </div>
+                        <div class="col-xl-6 col-lg-12 col-sm-12">
+                            <q-select class="text-h6" outlined v-model="addOrEditFormData.activated"
+                                :options="activatedList" emit-value map-options label="控制器状态" />
+                        </div>
+                        <div class="col-xl-6 col-lg-12 col-sm-12">
+                            <q-input class="text-h6" outlined v-model="addOrEditFormData.remark" label="备注"
+                                :rules="[(val) => (val && val.length > 0) || '请填写备注']" />
+                        </div>
+                    </div>
+                </q-form>
+            </q-card-section>
+            <q-separator />
+            <q-card-actions align="right">
+                <q-btn color="white" text-color="black" style="margin-right: 25px" @click="clickForm()">{{ '取消' }}</q-btn>
+                <q-btn color="primary" @click="submitForm()">提交</q-btn>
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+</template>
+<script lang="ts" setup>
+import { deviceApi } from 'src/api/device/deviceApi';
+import { DeivceEntity } from 'src/api/device/model/device';
+import { ref } from 'vue';
+
+// const props = defineProps<{
+//   areaPropertyList: any[];
+//   warehouseList: any[];
+// }>();
+const emit = defineEmits(['refresh']);
+
+const protocolList = ref([
+    { label: 'PLC', value: 'PLC' },
+    { label: 'HTTP', value: 'HTTP' },
+    { label: 'Socket', value: 'Socket' },
+])
+
+const activatedList = ref([
+    { label: '停用', value: false },
+    { label: '启用', value: true },
+])
+
+//新增或修改
+const visible = ref(false);
+const addOrEditFormTitle = ref('');
+
+const addOrEditFormData = ref(new DeivceEntity());
+const clickForm = (e?: any) => {
+    if (visible.value) {
+        addOrEditFormData.value = new DeivceEntity();
+    } else {
+        if (e) {
+            //获取class 添加弹窗文本（新增/编辑）
+            addOrEditFormData.value = JSON.parse(JSON.stringify(e)); // 改为深拷贝;
+            addOrEditFormTitle.value = '修改PLC控制器';
+        } else {
+            addOrEditFormTitle.value = '新增PLC控制器';
+            addOrEditFormData.value.activated = true;
+        }
+    }
+    visible.value = !visible.value;
+};
+
+const myForm = ref();
+const submitForm = () => {
+    myForm.value.validate().then((success: any) => {
+        if (success) {
+            if (addOrEditFormData.value.id !== undefined) {
+                deviceApi.updateDevice(addOrEditFormData.value).then(() => {
+                    clickForm();
+                    emit('refresh');
+                });
+            } else {
+                deviceApi.addDevice(addOrEditFormData.value).then(() => {
+                    clickForm();
+                    emit('refresh');
+                });
+            }
+        }
+    });
+};
+defineExpose({
+    clickForm,
+});
+</script>
\ No newline at end of file
diff --git a/PVDEMCSUI/src/pages/device/components/devicePointDialog.vue b/PVDEMCSUI/src/pages/device/components/devicePointDialog.vue
new file mode 100644
index 0000000..3e655cd
--- /dev/null
+++ b/PVDEMCSUI/src/pages/device/components/devicePointDialog.vue
@@ -0,0 +1,262 @@
+<template>
+    <q-dialog v-model="visible" persistent>
+        <q-card style="max-width: 90vw">
+            <q-card-section class="no-padding">
+                <q-card-actions class="bg-light-blue-10 text-white">
+                    <q-card-actions class="text-h6">PLC点位详情</q-card-actions>
+                    <q-space />
+                    <q-btn dense flat round icon="close" v-close-popup>
+                        <q-tooltip content-class="bg-amber text-black shadow-4">{{
+                            $t('index.close')
+                        }}</q-tooltip>
+                    </q-btn>
+                </q-card-actions>
+            </q-card-section>
+            <q-card-section>
+                <div class="row q-col-gutter-md">
+                    <!-- 刷新 查询 -->
+                    <div class="col-xl-3 col-lg-3 col-sm-12">
+                        <q-btn-group push glossy>
+                            <q-btn push label="新增" icon="add" @click="addOrEditForm(null)">
+                                <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
+                                    content-style="font-size: 12px">{{
+                                        '新增一条数据' }}</q-tooltip>
+                            </q-btn>
+                            <q-btn push label="刷新" icon="refresh" @click="reFresh()">
+                                <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
+                                    content-style="font-size: 12px">清空所有条件并，刷新数据</q-tooltip>
+                            </q-btn>
+                            <q-btn push label="查询" icon="search" @click="getPage()">
+                                <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
+                                    content-style="font-size: 12px">按条件查询数据</q-tooltip>
+                            </q-btn>
+                        </q-btn-group>
+                    </div>
+                    <!-- 搜索条件 -->
+                    <div class="col-xl-2 col-lg-2 col-sm-12">
+                        <q-input dense label="控制器编号" outlined v-model="pagination.data.deviceCode" />
+                    </div>
+                    <div class="col-xl-2 col-lg-2 col-sm-12">
+                        <q-input dense label="控制器名称" outlined v-model="pagination.data.deviceName" />
+                    </div>
+                    <div class="col-xl-2 col-lg-2 col-sm-12">
+                        <q-input dense label="设备编号" outlined v-model="pagination.data.equipmentCode" />
+                    </div>
+                    <div class="col-xl-2 col-lg-2 col-sm-12">
+                        <q-input dense label="设备名称" outlined v-model="pagination.data.equipmentName" />
+                    </div>
+                    <div class="col-xl-2 col-lg-2 col-sm-12">
+                        <q-select dense outlined v-model="pagination.data.equipmentType" :options="equipmentTypeList"
+                            emit-value map-options label="设备类型" />
+                    </div>
+                    <div class="col-xl-2 col-lg-2 col-sm-12">
+                        <q-input dense label="点位编码" outlined v-model="pagination.data.pointCode" />
+                    </div>
+                    <div class="col-xl-2 col-lg-2 col-sm-12">
+                        <q-input dense label="点位名称" outlined v-model="pagination.data.pointName" />
+                    </div>
+                    <div class="col-xl-2 col-lg-2 col-sm-12">
+                        <q-select dense outlined v-model="pagination.data.activated" :options="activatedList" emit-value
+                            map-options label="PLC点位是否启用" />
+                    </div>
+                </div>
+            </q-card-section>
+            <q-separator />
+            <q-card-section style="width: 90vw" class="scroll">
+                <q-table class="my-sticky-header-column-table" :rows="tableData" row-key="id" separator="cell"
+                    :loading="loading" :columns="columns" v-model:pagination="pagination" :table-style="{ height: '500px' }"
+                    @request="onRequest" flat bordered>
+                    <template v-slot:body="props">
+                        <q-tr :props="props" class="tr_hover">
+                            <q-td style="font-size: 16px;" key="index" :props="props">{{ props.rowIndex + 1
+                            }}</q-td>
+                            <q-td key="deviceCode" :props="props">{{
+                                props.row.deviceCode
+                            }}</q-td>
+                            <q-td key="deviceName" :props="props">{{
+                                props.row.deviceName
+                            }}</q-td>
+                            <q-td key="equipmentCode" :props="props">{{ props.row.equipmentCode }}</q-td>
+                            <q-td key="equipmentName" :props="props">{{ props.row.equipmentName }}</q-td>
+                            <q-td key="equipmentType" :props="props">{{ props.row.equipmentType }}</q-td>
+                            <q-td key="pointCode" :props="props">
+                                {{ props.row.pointCode }}
+                            </q-td>
+                            <q-td key="pointName" :props="props">{{
+                                props.row.pointName
+                            }}</q-td>
+                            <q-td key="activated" :props="props">{{
+                                props.row.activated
+                            }}</q-td>
+                            <q-td key="storageSapFlag" :props="props">{{
+                                props.row.storageSapFlag
+                            }}</q-td>
+                            <q-td key="remark" :props="props">{{
+                                props.row.remark
+                            }}</q-td>
+                            <q-td key="action" :props="props" style="width: 100px">
+                                <q-btn round flat push color="info" icon="edit" @click="addOrEditForm(props.row)">
+                                    <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
+                                        content-style="font-size: 12px">编辑这条数据</q-tooltip>
+                                </q-btn>
+                                <q-btn round flat push color="negative" icon="delete" @click="openDelDialog(props.row)">
+                                    <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
+                                        content-style="font-size: 12px">删除这条数据</q-tooltip>
+                                </q-btn>
+                            </q-td>
+                        </q-tr>
+                    </template>
+                </q-table>
+            </q-card-section>
+            <q-separator />
+            <q-card-actions align="right">
+                <q-btn color="white" text-color="black" v-close-popup>关闭</q-btn>
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+    <!-- 添加修改 PLC点位 -->
+    <addOrEditDevicePointDialog ref="addOrEditDevicePointDialogRef" @refresh="getPage" />
+    <!-- 删除弹窗 -->
+    <customDialog ref="deleteDialogRef" @func="delFunc" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Pagination, cconvert } from 'src/api/class';
+import { DeivcePointSearchEntity } from 'src/api/device/model/device';
+import { deviceApi } from 'src/api/device/deviceApi';
+import addOrEditDevicePointDialog from './addOrEditDevicePointDialog.vue'
+import customDialog from 'src/components/customDialog.vue';
+import helper from 'src/Utils/helper';
+
+//公共变量
+const visible = ref(false);
+let loading = ref(false);
+let tableData: any = ref([]);
+const columns: any = ref([
+    {
+        name: 'index',
+        label: '#',
+        field: 'index',
+        align: 'center',
+        headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
+    },
+    {
+        name: 'deviceCode',
+        align: 'center',
+        label: '控制器编号',
+        field: 'deviceCode',
+        headerClasses: 'text-h4 text-weight-bold',
+        headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
+    },
+    { name: 'deviceName', align: 'center', label: '控制器名称', field: 'deviceName', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
+    { name: 'equipmentCode', align: 'center', label: '设备编码', field: 'equipmentCode', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
+    { name: 'equipmentName', align: 'center', label: '设备名称', field: 'equipmentName', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
+    { name: 'equipmentType', align: 'center', label: '设备类型', field: 'equipmentType', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
+    { name: 'pointCode', align: 'center', label: '点位编号', field: 'pointCode', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
+    { name: 'pointName', align: 'center', label: '点位名称', field: 'pointName', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
+    { name: 'activated', align: 'center', label: 'PLC点位是否启用', field: 'activated', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
+    { name: 'remark', align: 'center', label: '备注', field: 'remark', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
+    { name: 'action', align: 'center', label: '操作', field: 'action', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' }
+]);
+const pagination = ref(new Pagination(new DeivcePointSearchEntity()));
+
+//公共变量
+const deviceInfo = ref();
+const equipmentTypeList = ref([
+    { label: 'Ionbond', value: 'Ionbond' },
+    { label: 'Balzers', value: 'Balzers' },
+    { label: 'Cemecon', value: 'Cemecon' },
+])
+const activatedList = ref([
+    { label: '停用', value: false },
+    { label: '启用', value: true },
+])
+
+const clickForm = (e: any) => {
+    visible.value = true;
+    deviceInfo.value = JSON.parse(JSON.stringify(e)); // 改为深拷贝;
+    pagination.value.data.deviceId = e.id;
+    getPage();
+}
+
+const getPage = () => {
+    loading.value = true;
+    deviceApi.getDevicePointPageList(pagination.value).then((res: any) => {
+        tableData.value = res.data;
+        cconvert(pagination.value, res);
+    }).finally(() => {
+        loading.value = false;
+    });
+};
+
+const onRequest = (props: any) => {
+    const { page, rowsPerPage, rowsNumber } = props.pagination;
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = rowsPerPage != 0 ? rowsPerPage : rowsNumber;
+    getPage();
+};
+
+const reFresh = () => {
+    pagination.value.data.deviceCode = undefined
+    pagination.value.data.deviceName = undefined
+    pagination.value.data.equipmentCode = undefined
+    pagination.value.data.equipmentName = undefined
+    pagination.value.data.equipmentType = undefined
+    pagination.value.data.pointCode = undefined
+    pagination.value.data.pointName = undefined
+    pagination.value.data.activated = undefined
+    getPage();
+};
+
+
+const addOrEditDevicePointDialogRef = ref();
+const addOrEditForm = (row: any) => {
+    let e = {};
+    if (row == null) {
+        e = {
+            devicdeId: deviceInfo.value.deviceId,
+            deviceCode: deviceInfo.value.deviceCode,
+            deviceName: deviceInfo.value.deviceCode
+        }
+    } else {
+        e = row
+    }
+    addOrEditDevicePointDialogRef.value.clickForm(e);
+};
+
+const deleteDialogRef = ref();
+const openDelDialog = (row: any) => {
+    deleteDialogRef.value.open(row);
+}
+
+const delFunc = (e: any) => {
+    deviceApi.deleteDevicePoint(e.id).then(() => {
+        getPage();
+    });
+};
+
+defineExpose({
+    clickForm
+})
+</script>
+
+<style scoped>
+/* .tr_hover {
+      background: #aaaaaa;
+    } */
+
+.tr_hover:hover {
+    background: #e8e8e8;
+}
+
+
+.click-hover {
+    cursor: pointer;
+    color: #1976d2;
+}
+
+.click-hover:hover {
+    color: #2196f3;
+    /* background-color: yellow; */
+}
+</style>
\ No newline at end of file
diff --git a/PVDEMCSUI/src/pages/device/components/equipmentDialog.vue b/PVDEMCSUI/src/pages/device/components/equipmentDialog.vue
new file mode 100644
index 0000000..212dacb
--- /dev/null
+++ b/PVDEMCSUI/src/pages/device/components/equipmentDialog.vue
@@ -0,0 +1,205 @@
+<template>
+    <q-dialog v-model="visible" persistent>
+        <q-card style="max-width: 80vw">
+            <q-card-section class="no-padding">
+                <q-card-actions class="bg-light-blue-10 text-white">
+                    <q-card-actions class="text-h6">选择设备</q-card-actions>
+                    <q-space />
+                    <q-btn dense flat round icon="close" v-close-popup>
+                        <q-tooltip content-class="bg-amber text-black shadow-4">{{
+                            $t('index.close')
+                        }}</q-tooltip>
+                    </q-btn>
+                </q-card-actions>
+            </q-card-section>
+            <q-card-section>
+                <div class="row q-col-gutter-md items-center">
+                    <!-- 搜索条件 -->
+                    <div class="col-xl-2 col-lg-2 col-sm-12">
+                        <q-input dense label="设备编码" outlined v-model="equipmentSearchEntity.equipmentCode" />
+                    </div>
+                    <div class="col-xl-2 col-lg-2 col-sm-12">
+                        <q-input dense label="设备名称" outlined v-model="equipmentSearchEntity.equipmentName" />
+                    </div>
+                    <div class="col-xl-2 col-lg-2 col-sm-12">
+                        <q-select dense outlined v-model="equipmentSearchEntity.equipmentType" :options="equipmentTypeList"
+                            emit-value map-options label="设备类型" />
+                    </div>
+                    <div class="col-xl-2 col-lg-2 col-sm-12">
+                        <q-select dense outlined v-model="equipmentSearchEntity.activated" :options="activatedList"
+                            emit-value map-options label="设备启停用" />
+                    </div>
+                    <div class="col-xl-3 col-lg-3 col-sm-12">
+                        <q-btn label="查询" glossy rounded size="lg" color="primary" icon="search" class=" q-mr-md"
+                            @click="getPage()" />
+                        <q-btn label="重置" glossy rounded size="lg" icon="youtube_searched_for" @click="reFresh()">
+                            <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
+                                content-style="font-size: 12px">清空所有条件并，刷新数据</q-tooltip>
+                        </q-btn>
+                    </div>
+                </div>
+            </q-card-section>
+            <q-separator />
+            <q-card-section style="width: 80vw" class="scroll">
+                <!-- <div class="text-subtitle1 q-pb-md">
+                    TIPS：双击行自动带出物料凭证
+                    TIPS：选中行后<kbd>双击</kbd>
+                </div> -->
+                <!-- @rowDblclick="rowDoubleClick" -->
+                <q-table class="my-sticky-header-column-table" :rows="tableData" row-key="id" separator="cell"
+                    :loading="loading" :columns="columns" :table-style="{ height: '520px' }" flat bordered>
+                    <template v-slot:body="props">
+                        <q-tr :props="props" class="tr_hover">
+                            <q-td style="font-size: 16px;" key="index" :props="props">{{ props.rowIndex + 1
+                            }}</q-td>
+                            <q-td key="equipmentCode" :props="props">{{ props.row.equipmentCode }}</q-td>
+                            <q-td key="equipmentName" :props="props">{{ props.row.equipmentName }}</q-td>
+                            <q-td key="equipmentType" :props="props">{{ props.row.equipmentType }}</q-td>
+                            <q-td key="state" :props="props">{{ helper.getEquipmentState(props.row.state) }}</q-td>
+                            <q-td style="font-size: 16px;" key="activated" :props="props">{{ props.row.activated ==
+                                true ? '启用' : '停用'
+                            }}</q-td>
+                            <q-td key="remark" :props="props">{{ props.row.remark }}</q-td>
+                            <q-td key="action" :props="props" style="width: 100px, position:sticky">
+                                <q-btn round flat push color="positive" icon="done" @click="select(props.row)">
+                                    <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
+                                        content-style="font-size: 12px">选择</q-tooltip>
+                                </q-btn>
+                            </q-td>
+                        </q-tr>
+                    </template>
+                </q-table>
+            </q-card-section>
+            <q-separator />
+            <q-card-actions align="right">
+                <q-btn color="white" text-color="black" v-close-popup>关闭</q-btn>
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { EquipmentSearchEntity } from 'src/api/equipment/model/equipment';
+import { equipmentApi } from 'src/api/equipment/equipmentApi';
+import helper from 'src/Utils/helper';
+
+const emit = defineEmits(['returnEquipment']);
+
+//公共变量
+const equipmentTypeList = ref([
+    { label: 'Ionbond', value: 'Ionbond' },
+    { label: 'Balzers', value: 'Balzers' },
+    { label: 'Cemecon', value: 'Cemecon' },
+])
+const activatedList = ref([
+    { label: '停用', value: false },
+    { label: '启用', value: true },
+])
+const visible = ref(false);
+let loading = ref(false);
+let tableData: any = ref();
+const columns: any = ref([
+    {
+        name: 'index',
+        label: '#',
+        field: 'index',
+        align: 'center',
+        headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
+    },
+    { name: 'equipmentCode', align: 'center', label: '设备编码', field: 'equipmentCode', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
+    { name: 'equipmentName', align: 'center', label: '设备名称', field: 'equipmentName', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
+    { name: 'equipmentType', align: 'center', label: '设备类型', field: 'equipmentType', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
+    { name: 'state', align: 'center', label: '设备状态', field: 'state', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
+    { name: 'activated', align: 'center', label: '设备启停用', field: 'activated', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
+    { name: 'remark', align: 'center', label: '备注', field: 'remark', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
+    { name: 'action', align: 'center', label: '操作', field: 'action', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' }
+]);
+const equipmentSearchEntity = ref(new EquipmentSearchEntity());
+
+//公共变量
+
+const clickForm = () => {
+    visible.value = true;
+    getPage();
+}
+
+const rowDoubleClick = (evt, row, index) => {
+    // if (row.executeFlag == 1) {
+    //     Notify.create({
+    //         position: 'top',
+    //         message: '该物料凭证已被冲销过，请重新选择！',
+    //         icon: 'close',
+    //         color: 'negative',
+    //     })
+    //     return
+    // }
+    visible.value = false;
+    emit('returnEquipment', row)
+}
+
+
+const select = (row: any) => {
+    // if (row.executeFlag == 1) {
+    //     Notify.create({
+    //         position: 'top',
+    //         message: '该物料凭证已被冲销过，请重新选择！',
+    //         icon: 'close',
+    //         color: 'negative',
+    //     })
+    //     return
+    // }
+    visible.value = false;
+    emit('returnEquipment', row)
+}
+
+const getPage = () => {
+    loading.value = true;
+    equipmentApi.getEquipmentList(equipmentSearchEntity.value).then((res) => {
+        tableData.value = res;
+    }).finally(() => {
+        loading.value = false;
+    });
+};
+
+const reFresh = () => {
+    equipmentSearchEntity.value = new EquipmentSearchEntity();
+    getPage();
+};
+
+defineExpose({
+    clickForm
+})
+</script>
+<style scoped>
+/* .tr_hover {
+      background: #aaaaaa;
+    } */
+
+.tr_hover:hover {
+    background: #e8e8e8;
+}
+
+.click-hover {
+    cursor: pointer;
+    color: #1976d2;
+}
+
+.click-hover:hover {
+    color: #2196f3;
+    /* background-color: yellow; */
+}
+
+kbd {
+    white-space: nowrap;
+    display: inline-block;
+    padding: 2px 4px 4px;
+    line-height: 1;
+    font-size: 0.8em;
+    color: #616161;
+    background: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
+    border-radius: 4px;
+    box-shadow: inset 0 -2px #cdcde6, inset 0 0 1px 1px #fff,
+        0 1px 2px 1px #1e235a66;
+    margin: 0 0.2em;
+}
+</style>
\ No newline at end of file
diff --git a/PVDEMCSUI/src/pages/device/index.vue b/PVDEMCSUI/src/pages/device/index.vue
new file mode 100644
index 0000000..4d99898
--- /dev/null
+++ b/PVDEMCSUI/src/pages/device/index.vue
@@ -0,0 +1,209 @@
+<template>
+    <transition appear enter-active-class="animated fadeIn">
+        <q-card class="shadow-24">
+            <!-- 搜索条件 -->
+            <q-card-section>
+                <div class="row q-col-gutter-md">
+                    <!-- 刷新 查询 -->
+                    <div class="col-xl-2 col-lg-2 col-sm-12">
+                        <q-btn-group push glossy>
+                            <q-btn push label="新增" icon="add" @click="addOrEditForm()">
+                                <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
+                                    content-style="font-size: 12px">{{
+                                        '新增一条数据' }}</q-tooltip>
+                            </q-btn>
+                            <q-btn push label="刷新" icon="refresh" @click="reFresh()">
+                                <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
+                                    content-style="font-size: 12px">清空所有条件并，刷新数据</q-tooltip>
+                            </q-btn>
+                            <q-btn push label="查询" icon="search" @click="getPage()">
+                                <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
+                                    content-style="font-size: 12px">按条件查询数据</q-tooltip>
+                            </q-btn>
+                        </q-btn-group>
+                    </div>
+                    <!-- 搜索条件 -->
+                    <div class="col-xl-2 col-lg-2 col-sm-12">
+                        <q-input dense label="控制器编号" outlined v-model="pagination.data.deviceCode" />
+                    </div>
+                    <div class="col-xl-2 col-lg-2 col-sm-12">
+                        <q-input dense label="控制器名称" outlined v-model="pagination.data.deviceName" />
+                    </div>
+                    <div class="col-xl-2 col-lg-2 col-sm-12">
+                        <q-select dense outlined v-model="pagination.data.activated" :options="activatedList" emit-value
+                            map-options label="控制器状态" />
+                    </div>
+                </div>
+            </q-card-section>
+            <q-card-section style="padding:0 10px 15px 10px;">
+                <div class="row q-col-gutter-md">
+                    <div class="col-xl-12 col-lg-12 col-sm-12">
+                        <q-table class="my-sticky-header-column-table" :rows="list" row-key="id" separator="cell"
+                            :loading="loading" :columns="columns" @request="onRequest" v-model:pagination="pagination"
+                            :table-style="{ height: Screen.height - 190 + 'px' }" flat bordered
+                            :rows-per-page-options="[20, 30, 40, 50, 100]">
+                            <template v-slot:body="props">
+                                <q-tr :props="props" class="tr_hover">
+                                    <q-td style="font-size: 16px;" key="index" :props="props">{{ props.rowIndex + 1
+                                    }}</q-td>
+                                    <q-td style="font-size: 16px;" key="deviceCode" :props="props">{{
+                                        props.row.deviceCode
+                                    }}</q-td>
+                                    <q-td style="font-size: 16px;" key="deviceName" :props="props">{{
+                                        props.row.deviceName
+                                    }}</q-td>
+                                    <q-td style="font-size: 16px;" key="protocol" :props="props">{{
+                                        props.row.protocol
+                                    }}</q-td>
+                                    <q-td style="font-size: 16px;" key="host" :props="props">{{
+                                        props.row.host
+                                    }}</q-td>
+                                    <q-td style="font-size: 16px;" key="port" :props="props">{{
+                                        props.row.port
+                                    }}</q-td>
+                                    <q-td style="font-size: 16px;" key="activated" :props="props">{{ props.row.activated ==
+                                        true ? '启用' : '停用'
+                                    }}</q-td>
+                                    <q-td style="font-size: 16px;" key="remark" :props="props">{{ props.row.remark }}</q-td>
+                                    <q-td key="action" :props="props" style="width: 100px">
+                                        <q-btn round flat push color="accent" icon="menu" @click="toDetail(props.row)"
+                                            class="text-weight-bold click-hover">
+                                            <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
+                                                content-style="font-size: 12px">查看PLC点位</q-tooltip>
+                                        </q-btn>
+                                        <q-btn round flat push color="info" icon="edit" @click="addOrEditForm(props.row)">
+                                            <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
+                                                content-style="font-size: 12px">编辑这条数据</q-tooltip>
+                                        </q-btn>
+                                        <q-btn round flat push color="negative" icon="delete"
+                                            @click="openDelDialog(props.row)">
+                                            <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
+                                                content-style="font-size: 12px">删除这条数据</q-tooltip>
+                                        </q-btn>
+                                    </q-td>
+                                </q-tr>
+                            </template>
+                        </q-table>
+                    </div>
+                </div>
+            </q-card-section>
+        </q-card>
+    </transition>
+    <!-- PLC点位 -->
+    <devicePointDialog ref="devicePointDialogRef" />
+    <!-- 系统参数设置 -->
+    <addOrEditDialog ref="addOrEdit" @refresh="getPage" />
+    <!-- 删除弹窗 -->
+    <customDialog ref="deleteDialogRef" @func="delFunc" />
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { Notify, Screen } from 'quasar';
+import { deviceApi } from 'src/api/device/deviceApi';
+import { DeivceSearchEntity } from '../../api/device/model/device';
+import { Pagination, cconvert } from 'src/api/class';
+import customDialog from 'src/components/customDialog.vue';
+import addOrEditDialog from 'src/pages/device/components/addOrEditDialog.vue'
+import devicePointDialog from './components/devicePointDialog.vue'
+import helper from 'src/Utils/helper';
+
+//公共
+const activatedList = ref([
+    { label: '停用', value: false },
+    { label: '启用', value: true },
+])
+const pagination = ref(new Pagination(new DeivceSearchEntity()));
+const loading = ref(false);
+
+const columns = ref([
+    {
+        name: 'index',
+        label: '#',
+        field: 'index',
+        align: 'center',
+        headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
+    },
+    {
+        name: 'deviceCode',
+        align: 'center',
+        label: '控制器编号',
+        field: 'deviceCode',
+        headerClasses: 'text-h4 text-weight-bold',
+        headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
+    },
+    { name: 'deviceName', align: 'center', label: '控制器名称', field: 'deviceName', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
+    { name: 'protocol', align: 'center', label: '控制器协议', field: 'protocol', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
+    { name: 'host', align: 'center', label: '控制器主机地址', field: 'host', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
+    { name: 'port', align: 'center', label: '控制器主机端口', field: 'port', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
+    { name: 'activated', align: 'center', label: '控制器状态', field: 'activated', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
+    { name: 'remark', align: 'center', label: '备注', field: 'remark', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
+    { name: 'action', align: 'center', label: '操作', field: 'action', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' }
+])
+
+const list = ref([]);
+
+onMounted(() => {
+    getPage();
+})
+
+const reFresh = () => {
+    pagination.value.data = new DeivceSearchEntity();
+    getPage();
+};
+
+const onRequest = (props: any) => {
+    const { page, rowsPerPage, rowsNumber } = props.pagination;
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = rowsPerPage != 0 ? rowsPerPage : rowsNumber;
+    getPage();
+};
+
+const getPage = () => {
+    deviceApi.getDevicePageList(pagination.value).then((res: any) => {
+        list.value = res.data;
+        cconvert(pagination.value, res);
+    });
+}
+
+const addOrEdit = ref();
+const addOrEditForm = (row?: any) => {
+    addOrEdit.value.clickForm(row);
+};
+
+const deleteDialogRef = ref();
+const openDelDialog = (row: any) => {
+    deleteDialogRef.value.open(row);
+}
+
+const delFunc = (e: any) => {
+    deviceApi.deleteDevice(e.id).then(() => {
+        getPage();
+    });
+};
+
+const devicePointDialogRef = ref();
+const toDetail = (row: any) => {
+    devicePointDialogRef.value.clickForm(row);
+}
+
+</script>
+<style scoped>
+/* .tr_hover {
+    background: #aaaaaa;
+  } */
+
+.tr_hover:hover {
+    background: #e8e8e8;
+}
+
+.click-hover {
+    cursor: pointer;
+    color: #1976d2;
+}
+
+.click-hover:hover {
+    color: #2196f3;
+    /* background-color: yellow; */
+}
+</style>
\ No newline at end of file
diff --git a/PVDEMCSUI/src/pages/screen/screenTab.vue b/PVDEMCSUI/src/pages/screen/screenTab.vue
index f39e7c4..57655a5 100644
--- a/PVDEMCSUI/src/pages/screen/screenTab.vue
+++ b/PVDEMCSUI/src/pages/screen/screenTab.vue
@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
     <q-page>
         <q-card-section class="q-pa-md flex flex-top">
             <q-tabs v-model="detaillink">
@@ -26,4 +26,4 @@
 import { ref } from 'vue';
 const detaillink = ref('screen1');
 </script>
-  
\ No newline at end of file
+   -->
\ No newline at end of file
diff --git a/PVDEMCSUI/src/router/routes.ts b/PVDEMCSUI/src/router/routes.ts
index ad7899b..b018e74 100644
--- a/PVDEMCSUI/src/router/routes.ts
+++ b/PVDEMCSUI/src/router/routes.ts
@@ -51,6 +51,12 @@ const routes: RouteRecordRaw[] = [
         component: () => import('pages/screen/screen4/index.vue'),
         children: []
       },
+      {
+        path: 'device',
+        name: 'device',
+        component: () => import('pages/device/index.vue'),
+        children: []
+      },
       {
         path: 'equipment',
         name: 'equipment',