diff --git a/README.md b/README.md
index 5469c98..93787ab 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
 
+<h1 align="center">智能一体机管理系统</h1>
 <p align="center">后台管理系统基础模板 --- 无登录无权限无系统管理</p>
 
 ## 简要说明

diff --git a/README.md b/README.md
index 5469c98..93787ab 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
 
+<h1 align="center">智能一体机管理系统</h1>
 <p align="center">后台管理系统基础模板 --- 无登录无权限无系统管理</p>
 
 ## 简要说明
diff --git a/public/config/config.json b/public/config/config.json
new file mode 100644
index 0000000..ec87af0
--- /dev/null
+++ b/public/config/config.json
@@ -0,0 +1,6 @@
+{
+  "title":"智能一体机管理系统",
+  "baseUrl": "http://localhost:9001",
+  "version": "1.0.1",
+  "node": "16.18.1"
+}

diff --git a/README.md b/README.md
index 5469c98..93787ab 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
 
+<h1 align="center">智能一体机管理系统</h1>
 <p align="center">后台管理系统基础模板 --- 无登录无权限无系统管理</p>
 
 ## 简要说明
diff --git a/public/config/config.json b/public/config/config.json
new file mode 100644
index 0000000..ec87af0
--- /dev/null
+++ b/public/config/config.json
@@ -0,0 +1,6 @@
+{
+  "title":"智能一体机管理系统",
+  "baseUrl": "http://localhost:9001",
+  "version": "1.0.1",
+  "node": "16.18.1"
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 6239617..2ae434a 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -9,7 +9,7 @@
 }
 
 const request = axios.create({
-  baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
+  baseURL: window.localStorage.getItem('IntegratedFront') as string,
   timeout: 1000 * 60,
   responseType: 'json',
 })

diff --git a/README.md b/README.md
index 5469c98..93787ab 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
 
+<h1 align="center">智能一体机管理系统</h1>
 <p align="center">后台管理系统基础模板 --- 无登录无权限无系统管理</p>
 
 ## 简要说明
diff --git a/public/config/config.json b/public/config/config.json
new file mode 100644
index 0000000..ec87af0
--- /dev/null
+++ b/public/config/config.json
@@ -0,0 +1,6 @@
+{
+  "title":"智能一体机管理系统",
+  "baseUrl": "http://localhost:9001",
+  "version": "1.0.1",
+  "node": "16.18.1"
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 6239617..2ae434a 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -9,7 +9,7 @@
 }
 
 const request = axios.create({
-  baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
+  baseURL: window.localStorage.getItem('IntegratedFront') as string,
   timeout: 1000 * 60,
   responseType: 'json',
 })
diff --git a/src/api/page/device.ts b/src/api/page/device.ts
new file mode 100644
index 0000000..9c30884
--- /dev/null
+++ b/src/api/page/device.ts
@@ -0,0 +1,13 @@
+/**
+ * 设备管理接口
+ */
+import request from '../index'
+
+// 列表
+export function getDeviceList(params: object) {
+  return request({
+    url: '/api/device/page',
+    method: 'get',
+    params,
+  })
+}

diff --git a/README.md b/README.md
index 5469c98..93787ab 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
 
+<h1 align="center">智能一体机管理系统</h1>
 <p align="center">后台管理系统基础模板 --- 无登录无权限无系统管理</p>
 
 ## 简要说明
diff --git a/public/config/config.json b/public/config/config.json
new file mode 100644
index 0000000..ec87af0
--- /dev/null
+++ b/public/config/config.json
@@ -0,0 +1,6 @@
+{
+  "title":"智能一体机管理系统",
+  "baseUrl": "http://localhost:9001",
+  "version": "1.0.1",
+  "node": "16.18.1"
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 6239617..2ae434a 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -9,7 +9,7 @@
 }
 
 const request = axios.create({
-  baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
+  baseURL: window.localStorage.getItem('IntegratedFront') as string,
   timeout: 1000 * 60,
   responseType: 'json',
 })
diff --git a/src/api/page/device.ts b/src/api/page/device.ts
new file mode 100644
index 0000000..9c30884
--- /dev/null
+++ b/src/api/page/device.ts
@@ -0,0 +1,13 @@
+/**
+ * 设备管理接口
+ */
+import request from '../index'
+
+// 列表
+export function getDeviceList(params: object) {
+  return request({
+    url: '/api/device/page',
+    method: 'get',
+    params,
+  })
+}
diff --git a/src/main.ts b/src/main.ts
index ad69d36..dc79e1b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
+import axios from 'axios'
 // import print from 'vue3-print-nb'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import App from './App.vue'
@@ -20,17 +21,19 @@
 // if (useSettingsStore().app.iconifyOfflineUse) {
 downloadAndInstall()
 // }
+axios.get(`./config/config.json?ts=${new Date().getTime()}`).then((res) => {
+  console.log(res.data, 'json文件')
+  window.localStorage.setItem('IntegratedFront', res.data.baseUrl)
+  const app = createApp(App)
+  // app.config.globalProperties.hasPerm = hasPermission
+  // app.use(print)
+  app.use(ElementPlus)
+  app.use(pinia)
+  app.use(router)
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+  directive(app)
+  app.mount('#app')
+})
 
-const app = createApp(App)
-// app.config.globalProperties.hasPerm = hasPermission
-// app.use(print)
-app.use(ElementPlus)
-app.use(pinia)
-
-app.use(router)
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
-directive(app)
-
-app.mount('#app')

diff --git a/README.md b/README.md
index 5469c98..93787ab 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
 
+<h1 align="center">智能一体机管理系统</h1>
 <p align="center">后台管理系统基础模板 --- 无登录无权限无系统管理</p>
 
 ## 简要说明
diff --git a/public/config/config.json b/public/config/config.json
new file mode 100644
index 0000000..ec87af0
--- /dev/null
+++ b/public/config/config.json
@@ -0,0 +1,6 @@
+{
+  "title":"智能一体机管理系统",
+  "baseUrl": "http://localhost:9001",
+  "version": "1.0.1",
+  "node": "16.18.1"
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 6239617..2ae434a 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -9,7 +9,7 @@
 }
 
 const request = axios.create({
-  baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
+  baseURL: window.localStorage.getItem('IntegratedFront') as string,
   timeout: 1000 * 60,
   responseType: 'json',
 })
diff --git a/src/api/page/device.ts b/src/api/page/device.ts
new file mode 100644
index 0000000..9c30884
--- /dev/null
+++ b/src/api/page/device.ts
@@ -0,0 +1,13 @@
+/**
+ * 设备管理接口
+ */
+import request from '../index'
+
+// 列表
+export function getDeviceList(params: object) {
+  return request({
+    url: '/api/device/page',
+    method: 'get',
+    params,
+  })
+}
diff --git a/src/main.ts b/src/main.ts
index ad69d36..dc79e1b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
+import axios from 'axios'
 // import print from 'vue3-print-nb'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import App from './App.vue'
@@ -20,17 +21,19 @@
 // if (useSettingsStore().app.iconifyOfflineUse) {
 downloadAndInstall()
 // }
+axios.get(`./config/config.json?ts=${new Date().getTime()}`).then((res) => {
+  console.log(res.data, 'json文件')
+  window.localStorage.setItem('IntegratedFront', res.data.baseUrl)
+  const app = createApp(App)
+  // app.config.globalProperties.hasPerm = hasPermission
+  // app.use(print)
+  app.use(ElementPlus)
+  app.use(pinia)
+  app.use(router)
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+  directive(app)
+  app.mount('#app')
+})
 
-const app = createApp(App)
-// app.config.globalProperties.hasPerm = hasPermission
-// app.use(print)
-app.use(ElementPlus)
-app.use(pinia)
-
-app.use(router)
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
-directive(app)
-
-app.mount('#app')
diff --git a/src/views/page/device/components/addDialog.vue b/src/views/page/device/components/addDialog.vue
new file mode 100644
index 0000000..4ae8bcc
--- /dev/null
+++ b/src/views/page/device/components/addDialog.vue
@@ -0,0 +1,114 @@
+<!--
+  Description: 设备管理 - 新建/编辑
+  Author: 李亚光
+  Date: 2024-11-01
+ -->
+<script lang="ts" setup name="DeviceManageEdit">
+import drawArea from './drawArea.vue'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+
+}) // 表单
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+  detail: '详情',
+} // 表头显示标题
+const btnLoading = ref(false) // 保存按钮的加载中状态
+const rules: FormRules = {
+  id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+  }
+}
+
+// 初始化对话框
+const initDialog = (row: any, dialogStatusValue: string) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+
+const cancel = () => {
+  dialogFormVisible.value = false
+  // this.$emit('watchChild')
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="textMap[dialogStatus]" append-to-body width="1000px">
+    <el-form
+      v-if="dialogFormVisible" ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right"
+      label-width="120px"
+    >
+      <el-row :gutter="24">
+        <el-col :span="10">
+          <el-form-item label="摄像头名称" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <el-form-item label="摄像头编号" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <el-form-item label="一体机编号" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <el-form-item label="RTSP地址" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <el-form-item label="识别间隔" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <el-form-item label="告警间隔" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <!-- <el-form-item label="算法关联" prop=""> -->
+          <!-- <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" /> -->
+          <!-- </el-form-item> -->
+        </el-col>
+        <el-col :span="14">
+          <div id="draw-area" class="draw">
+            <draw-area />
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+
+.draw {
+  height: 300px;
+  width: 533.333px;
+  border: 2px solid #000;
+  padding: 0;
+  margin: 0;
+  box-sizing: content-box;
+  position: relative;
+}
+</style>

diff --git a/README.md b/README.md
index 5469c98..93787ab 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
 
+<h1 align="center">智能一体机管理系统</h1>
 <p align="center">后台管理系统基础模板 --- 无登录无权限无系统管理</p>
 
 ## 简要说明
diff --git a/public/config/config.json b/public/config/config.json
new file mode 100644
index 0000000..ec87af0
--- /dev/null
+++ b/public/config/config.json
@@ -0,0 +1,6 @@
+{
+  "title":"智能一体机管理系统",
+  "baseUrl": "http://localhost:9001",
+  "version": "1.0.1",
+  "node": "16.18.1"
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 6239617..2ae434a 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -9,7 +9,7 @@
 }
 
 const request = axios.create({
-  baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
+  baseURL: window.localStorage.getItem('IntegratedFront') as string,
   timeout: 1000 * 60,
   responseType: 'json',
 })
diff --git a/src/api/page/device.ts b/src/api/page/device.ts
new file mode 100644
index 0000000..9c30884
--- /dev/null
+++ b/src/api/page/device.ts
@@ -0,0 +1,13 @@
+/**
+ * 设备管理接口
+ */
+import request from '../index'
+
+// 列表
+export function getDeviceList(params: object) {
+  return request({
+    url: '/api/device/page',
+    method: 'get',
+    params,
+  })
+}
diff --git a/src/main.ts b/src/main.ts
index ad69d36..dc79e1b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
+import axios from 'axios'
 // import print from 'vue3-print-nb'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import App from './App.vue'
@@ -20,17 +21,19 @@
 // if (useSettingsStore().app.iconifyOfflineUse) {
 downloadAndInstall()
 // }
+axios.get(`./config/config.json?ts=${new Date().getTime()}`).then((res) => {
+  console.log(res.data, 'json文件')
+  window.localStorage.setItem('IntegratedFront', res.data.baseUrl)
+  const app = createApp(App)
+  // app.config.globalProperties.hasPerm = hasPermission
+  // app.use(print)
+  app.use(ElementPlus)
+  app.use(pinia)
+  app.use(router)
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+  directive(app)
+  app.mount('#app')
+})
 
-const app = createApp(App)
-// app.config.globalProperties.hasPerm = hasPermission
-// app.use(print)
-app.use(ElementPlus)
-app.use(pinia)
-
-app.use(router)
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
-directive(app)
-
-app.mount('#app')
diff --git a/src/views/page/device/components/addDialog.vue b/src/views/page/device/components/addDialog.vue
new file mode 100644
index 0000000..4ae8bcc
--- /dev/null
+++ b/src/views/page/device/components/addDialog.vue
@@ -0,0 +1,114 @@
+<!--
+  Description: 设备管理 - 新建/编辑
+  Author: 李亚光
+  Date: 2024-11-01
+ -->
+<script lang="ts" setup name="DeviceManageEdit">
+import drawArea from './drawArea.vue'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+
+}) // 表单
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+  detail: '详情',
+} // 表头显示标题
+const btnLoading = ref(false) // 保存按钮的加载中状态
+const rules: FormRules = {
+  id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+  }
+}
+
+// 初始化对话框
+const initDialog = (row: any, dialogStatusValue: string) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+
+const cancel = () => {
+  dialogFormVisible.value = false
+  // this.$emit('watchChild')
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="textMap[dialogStatus]" append-to-body width="1000px">
+    <el-form
+      v-if="dialogFormVisible" ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right"
+      label-width="120px"
+    >
+      <el-row :gutter="24">
+        <el-col :span="10">
+          <el-form-item label="摄像头名称" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <el-form-item label="摄像头编号" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <el-form-item label="一体机编号" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <el-form-item label="RTSP地址" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <el-form-item label="识别间隔" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <el-form-item label="告警间隔" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <!-- <el-form-item label="算法关联" prop=""> -->
+          <!-- <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" /> -->
+          <!-- </el-form-item> -->
+        </el-col>
+        <el-col :span="14">
+          <div id="draw-area" class="draw">
+            <draw-area />
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+
+.draw {
+  height: 300px;
+  width: 533.333px;
+  border: 2px solid #000;
+  padding: 0;
+  margin: 0;
+  box-sizing: content-box;
+  position: relative;
+}
+</style>
diff --git a/src/views/page/device/components/drawArea.vue b/src/views/page/device/components/drawArea.vue
new file mode 100644
index 0000000..b0c40cb
--- /dev/null
+++ b/src/views/page/device/components/drawArea.vue
@@ -0,0 +1,178 @@
+<!--
+  Description: 设备管理 - 区域绘制（电子围栏）
+  Author: 李亚光
+  Date: 2024-11-01
+ -->
+
+<script lang="ts" setup name="DrawArea">
+// const props = defineProps({
+//   width: {
+//     type: Number,
+//     required: true,
+//   },
+//   height: {
+//     type: Number,
+//     required: true,
+//   },
+// })
+
+const points = ref([
+  { x: 50, y: 50 },
+  { x: 480, y: 50 },
+  { x: 480, y: 250 },
+  { x: 50, y: 250 },
+])
+onMounted(() => {
+  const canvas = document.getElementById('myCanvas')
+  const container = document.getElementById('draw-area')
+  const ctx = canvas.getContext('2d')
+  ctx.clearRect(0, 0, container.clientWidth, container.clientHeight)
+  // 初始位置
+  function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    ctx.beginPath()
+    ctx.moveTo(points.value[0].x, points.value[0].y)
+    ctx.lineTo(points.value[1].x, points.value[1].y)
+    ctx.lineTo(points.value[2].x, points.value[2].y)
+    ctx.lineTo(points.value[3].x, points.value[3].y)
+    ctx.closePath()
+    ctx.strokeStyle = 'red'
+    ctx.lineWidth = 1
+    ctx.stroke()
+  }
+
+  function drag(e, pointIndex) {
+    e = e || window.event
+    e.preventDefault()
+    var mousePos = { x: e.clientX - canvas.getBoundingClientRect().left, y: e.clientY - canvas.getBoundingClientRect().top }
+    console.log(mousePos, 'mousePos')
+    // 限制在指定区域内
+    if (mousePos.x < 0) {
+      mousePos.x = 0
+    }
+    else if (mousePos.x > 533) {
+      mousePos.x = 533
+    }
+    if (mousePos.y < 0) {
+      mousePos.y = 0
+    }
+    else if (mousePos.y > 300) {
+      mousePos.y = 300
+    }
+    points.value[pointIndex].x = mousePos.x
+    points.value[pointIndex].y = mousePos.y
+    draw()
+  }
+
+  function addDragEvents() {
+    var dragEvents = {
+      dragStart(e) {
+        e = e || window.event
+        var target = e.target || e.srcElement
+        var pointIndex = parseInt(target.getAttribute('data-point-index'), 10)
+        if (isNaN(pointIndex)) { return }
+        document.onmouseup = function () {
+          document.onmouseup = null
+          document.onmousemove = null
+        }
+        document.onmousemove = function (e) {
+          drag(e, pointIndex)
+        }
+      },
+    }
+
+    var pointsElements = document.getElementsByClassName('point')
+    for (var i = 0; i < pointsElements.length; i++) {
+      pointsElements[i].addEventListener('mousedown', dragEvents.dragStart)
+      pointsElements[i].setAttribute('data-point-index', i)
+    }
+  }
+
+  function init() {
+    draw()
+    addDragEvents()
+  }
+  init()
+})
+
+const style = ref([
+  {
+    top: `${points.value[0].y - 5}px`,
+    left: `${points.value[0].x - 5}px`,
+  },
+  {
+    top: `${points.value[1].y - 5}px`,
+    left: `${points.value[1].x - 5}px`,
+  },
+  {
+    top: `${points.value[2].y - 5}px`,
+    left: `${points.value[2].x - 5}px`,
+  },
+  {
+    top: `${points.value[3].y - 5}px`,
+    left: `${points.value[3].x - 5}px`,
+  },
+])
+
+watch(() => points.value, () => {
+  style.value = [
+    {
+      top: `${points.value[0].y - 5}px`,
+      left: `${points.value[0].x - 5}px`,
+    },
+    {
+      top: `${points.value[1].y - 5}px`,
+      left: `${points.value[1].x - 5}px`,
+    },
+    {
+      top: `${points.value[2].y - 5}px`,
+      left: `${points.value[2].x - 5}px`,
+    },
+    {
+      top: `${points.value[3].y - 5}px`,
+      left: `${points.value[3].x - 5}px`,
+    },
+  ]
+}, {
+  deep: true,
+})
+</script>
+
+<template>
+  <div style="width: 533px;height: 300px;">
+    <canvas id="myCanvas" width="533" height="300" class="canvans" />
+    <div v-for="(item, index) in points" :key="index" class="point" :style="style[index]" />
+  </div>
+</template>
+
+<style scoped>
+.canvans {
+  padding: 0;
+  margin: 0;
+
+  /* position: absolute; */
+
+  /* width: 100%;
+  height: 100%; */
+
+  /* left: 0;
+  top: 0; */
+  position: relative;
+}
+
+.point {
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  border-radius: 50%;
+  background-color: red;
+  opacity: 0.5;
+  top: 0;
+  left: 0;
+  z-index: 99;
+
+  &:hover {
+    cursor: move;
+  }
+}
+</style>

diff --git a/README.md b/README.md
index 5469c98..93787ab 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
 
+<h1 align="center">智能一体机管理系统</h1>
 <p align="center">后台管理系统基础模板 --- 无登录无权限无系统管理</p>
 
 ## 简要说明
diff --git a/public/config/config.json b/public/config/config.json
new file mode 100644
index 0000000..ec87af0
--- /dev/null
+++ b/public/config/config.json
@@ -0,0 +1,6 @@
+{
+  "title":"智能一体机管理系统",
+  "baseUrl": "http://localhost:9001",
+  "version": "1.0.1",
+  "node": "16.18.1"
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 6239617..2ae434a 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -9,7 +9,7 @@
 }
 
 const request = axios.create({
-  baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
+  baseURL: window.localStorage.getItem('IntegratedFront') as string,
   timeout: 1000 * 60,
   responseType: 'json',
 })
diff --git a/src/api/page/device.ts b/src/api/page/device.ts
new file mode 100644
index 0000000..9c30884
--- /dev/null
+++ b/src/api/page/device.ts
@@ -0,0 +1,13 @@
+/**
+ * 设备管理接口
+ */
+import request from '../index'
+
+// 列表
+export function getDeviceList(params: object) {
+  return request({
+    url: '/api/device/page',
+    method: 'get',
+    params,
+  })
+}
diff --git a/src/main.ts b/src/main.ts
index ad69d36..dc79e1b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
+import axios from 'axios'
 // import print from 'vue3-print-nb'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import App from './App.vue'
@@ -20,17 +21,19 @@
 // if (useSettingsStore().app.iconifyOfflineUse) {
 downloadAndInstall()
 // }
+axios.get(`./config/config.json?ts=${new Date().getTime()}`).then((res) => {
+  console.log(res.data, 'json文件')
+  window.localStorage.setItem('IntegratedFront', res.data.baseUrl)
+  const app = createApp(App)
+  // app.config.globalProperties.hasPerm = hasPermission
+  // app.use(print)
+  app.use(ElementPlus)
+  app.use(pinia)
+  app.use(router)
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+  directive(app)
+  app.mount('#app')
+})
 
-const app = createApp(App)
-// app.config.globalProperties.hasPerm = hasPermission
-// app.use(print)
-app.use(ElementPlus)
-app.use(pinia)
-
-app.use(router)
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
-directive(app)
-
-app.mount('#app')
diff --git a/src/views/page/device/components/addDialog.vue b/src/views/page/device/components/addDialog.vue
new file mode 100644
index 0000000..4ae8bcc
--- /dev/null
+++ b/src/views/page/device/components/addDialog.vue
@@ -0,0 +1,114 @@
+<!--
+  Description: 设备管理 - 新建/编辑
+  Author: 李亚光
+  Date: 2024-11-01
+ -->
+<script lang="ts" setup name="DeviceManageEdit">
+import drawArea from './drawArea.vue'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+
+}) // 表单
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+  detail: '详情',
+} // 表头显示标题
+const btnLoading = ref(false) // 保存按钮的加载中状态
+const rules: FormRules = {
+  id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+  }
+}
+
+// 初始化对话框
+const initDialog = (row: any, dialogStatusValue: string) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+
+const cancel = () => {
+  dialogFormVisible.value = false
+  // this.$emit('watchChild')
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="textMap[dialogStatus]" append-to-body width="1000px">
+    <el-form
+      v-if="dialogFormVisible" ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right"
+      label-width="120px"
+    >
+      <el-row :gutter="24">
+        <el-col :span="10">
+          <el-form-item label="摄像头名称" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <el-form-item label="摄像头编号" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <el-form-item label="一体机编号" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <el-form-item label="RTSP地址" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <el-form-item label="识别间隔" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <el-form-item label="告警间隔" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <!-- <el-form-item label="算法关联" prop=""> -->
+          <!-- <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" /> -->
+          <!-- </el-form-item> -->
+        </el-col>
+        <el-col :span="14">
+          <div id="draw-area" class="draw">
+            <draw-area />
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+
+.draw {
+  height: 300px;
+  width: 533.333px;
+  border: 2px solid #000;
+  padding: 0;
+  margin: 0;
+  box-sizing: content-box;
+  position: relative;
+}
+</style>
diff --git a/src/views/page/device/components/drawArea.vue b/src/views/page/device/components/drawArea.vue
new file mode 100644
index 0000000..b0c40cb
--- /dev/null
+++ b/src/views/page/device/components/drawArea.vue
@@ -0,0 +1,178 @@
+<!--
+  Description: 设备管理 - 区域绘制（电子围栏）
+  Author: 李亚光
+  Date: 2024-11-01
+ -->
+
+<script lang="ts" setup name="DrawArea">
+// const props = defineProps({
+//   width: {
+//     type: Number,
+//     required: true,
+//   },
+//   height: {
+//     type: Number,
+//     required: true,
+//   },
+// })
+
+const points = ref([
+  { x: 50, y: 50 },
+  { x: 480, y: 50 },
+  { x: 480, y: 250 },
+  { x: 50, y: 250 },
+])
+onMounted(() => {
+  const canvas = document.getElementById('myCanvas')
+  const container = document.getElementById('draw-area')
+  const ctx = canvas.getContext('2d')
+  ctx.clearRect(0, 0, container.clientWidth, container.clientHeight)
+  // 初始位置
+  function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    ctx.beginPath()
+    ctx.moveTo(points.value[0].x, points.value[0].y)
+    ctx.lineTo(points.value[1].x, points.value[1].y)
+    ctx.lineTo(points.value[2].x, points.value[2].y)
+    ctx.lineTo(points.value[3].x, points.value[3].y)
+    ctx.closePath()
+    ctx.strokeStyle = 'red'
+    ctx.lineWidth = 1
+    ctx.stroke()
+  }
+
+  function drag(e, pointIndex) {
+    e = e || window.event
+    e.preventDefault()
+    var mousePos = { x: e.clientX - canvas.getBoundingClientRect().left, y: e.clientY - canvas.getBoundingClientRect().top }
+    console.log(mousePos, 'mousePos')
+    // 限制在指定区域内
+    if (mousePos.x < 0) {
+      mousePos.x = 0
+    }
+    else if (mousePos.x > 533) {
+      mousePos.x = 533
+    }
+    if (mousePos.y < 0) {
+      mousePos.y = 0
+    }
+    else if (mousePos.y > 300) {
+      mousePos.y = 300
+    }
+    points.value[pointIndex].x = mousePos.x
+    points.value[pointIndex].y = mousePos.y
+    draw()
+  }
+
+  function addDragEvents() {
+    var dragEvents = {
+      dragStart(e) {
+        e = e || window.event
+        var target = e.target || e.srcElement
+        var pointIndex = parseInt(target.getAttribute('data-point-index'), 10)
+        if (isNaN(pointIndex)) { return }
+        document.onmouseup = function () {
+          document.onmouseup = null
+          document.onmousemove = null
+        }
+        document.onmousemove = function (e) {
+          drag(e, pointIndex)
+        }
+      },
+    }
+
+    var pointsElements = document.getElementsByClassName('point')
+    for (var i = 0; i < pointsElements.length; i++) {
+      pointsElements[i].addEventListener('mousedown', dragEvents.dragStart)
+      pointsElements[i].setAttribute('data-point-index', i)
+    }
+  }
+
+  function init() {
+    draw()
+    addDragEvents()
+  }
+  init()
+})
+
+const style = ref([
+  {
+    top: `${points.value[0].y - 5}px`,
+    left: `${points.value[0].x - 5}px`,
+  },
+  {
+    top: `${points.value[1].y - 5}px`,
+    left: `${points.value[1].x - 5}px`,
+  },
+  {
+    top: `${points.value[2].y - 5}px`,
+    left: `${points.value[2].x - 5}px`,
+  },
+  {
+    top: `${points.value[3].y - 5}px`,
+    left: `${points.value[3].x - 5}px`,
+  },
+])
+
+watch(() => points.value, () => {
+  style.value = [
+    {
+      top: `${points.value[0].y - 5}px`,
+      left: `${points.value[0].x - 5}px`,
+    },
+    {
+      top: `${points.value[1].y - 5}px`,
+      left: `${points.value[1].x - 5}px`,
+    },
+    {
+      top: `${points.value[2].y - 5}px`,
+      left: `${points.value[2].x - 5}px`,
+    },
+    {
+      top: `${points.value[3].y - 5}px`,
+      left: `${points.value[3].x - 5}px`,
+    },
+  ]
+}, {
+  deep: true,
+})
+</script>
+
+<template>
+  <div style="width: 533px;height: 300px;">
+    <canvas id="myCanvas" width="533" height="300" class="canvans" />
+    <div v-for="(item, index) in points" :key="index" class="point" :style="style[index]" />
+  </div>
+</template>
+
+<style scoped>
+.canvans {
+  padding: 0;
+  margin: 0;
+
+  /* position: absolute; */
+
+  /* width: 100%;
+  height: 100%; */
+
+  /* left: 0;
+  top: 0; */
+  position: relative;
+}
+
+.point {
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  border-radius: 50%;
+  background-color: red;
+  opacity: 0.5;
+  top: 0;
+  left: 0;
+  z-index: 99;
+
+  &:hover {
+    cursor: move;
+  }
+}
+</style>
diff --git a/src/views/page/device/index.vue b/src/views/page/device/index.vue
index ca77803..6084ef7 100644
--- a/src/views/page/device/index.vue
+++ b/src/views/page/device/index.vue
@@ -1,3 +1,120 @@
+<!--
+  Description: 设备管理
+  Author: 李亚光
+  Date: 2024-11-01
+ -->
+<script lang="ts" setup name="DeviceManageList">
+import addDialog from './components/addDialog.vue'
+import { getDeviceList } from '@/api/page/device'
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 20,
+  offset: 1,
+})
+const list = ref<any[]>([])
+const total = ref(0)
+const columns = ref([
+  { text: '摄像头名称', value: 'name', align: 'center' },
+  { text: '摄像头编号', value: 'code', align: 'center' },
+  { text: '一体机编号', value: 'deviceTypeName', align: 'center' },
+  { text: 'RTSP地址', value: 'output_stream_url', align: 'center' },
+  { text: '识别间隔', value: 'deviceTypeName', align: 'center' },
+  { text: '告警间隔', value: 'deviceTypeName', align: 'center' },
+  { text: '关联算法', value: 'deviceTypeName', align: 'center' },
+  { text: '在线状态', value: 'type', align: 'center' },
+])
+const fetchData = () => {
+  loadingTable.value = true
+  getDeviceList(listQuery.value).then((res) => {
+    console.log(res.data, '')
+    list.value = res.data.items
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+fetchData()
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+const reset = () => {
+  listQuery.value = {
+    limit: 20,
+    offset: 1,
+  }
+  fetchData()
+}
+
+const addRef = ref()
+const editRow = (row: any, type: string) => {
+  addRef.value.initDialog(row, type)
+}
+</script>
+
 <template>
-  设备管理
+  <!-- 布局 -->
+  <app-container>
+    <add-dialog ref="addRef" @refresh="fetchData" />
+    <search-area :need-clear="true" @search="fetchData" @clear="reset">
+      <search-item>
+        <el-input v-model.trim="listQuery.position" placeholder="设备名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.processStatus" placeholder="在线状态" clearable class="select" style="width: 192px;">
+          <el-option v-for="item in []" :key="item.id" :value="item.value" :label="item.name" />
+        </el-select>
+      </search-item>
+    </search-area>
+    <!-- 表头标题 -->
+    <table-container>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary" @click="editRow({}, 'create')">
+            新建
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" align="center" width="160">
+            <template #default="scope">
+              <el-button type="primary" link size="small" @click="editRow(scope.row, 'detail')">
+                查看
+              </el-button>
+              <el-button type="primary" link size="small" @click="editRow(scope.row, 'update')">
+                编辑
+              </el-button>
+              <el-button type="primary" link size="small">
+                预览
+              </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </app-container>
 </template>

diff --git a/README.md b/README.md
index 5469c98..93787ab 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
 
+<h1 align="center">智能一体机管理系统</h1>
 <p align="center">后台管理系统基础模板 --- 无登录无权限无系统管理</p>
 
 ## 简要说明
diff --git a/public/config/config.json b/public/config/config.json
new file mode 100644
index 0000000..ec87af0
--- /dev/null
+++ b/public/config/config.json
@@ -0,0 +1,6 @@
+{
+  "title":"智能一体机管理系统",
+  "baseUrl": "http://localhost:9001",
+  "version": "1.0.1",
+  "node": "16.18.1"
+}
diff --git a/src/api/index.ts b/src/api/index.ts
index 6239617..2ae434a 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -9,7 +9,7 @@
 }
 
 const request = axios.create({
-  baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
+  baseURL: window.localStorage.getItem('IntegratedFront') as string,
   timeout: 1000 * 60,
   responseType: 'json',
 })
diff --git a/src/api/page/device.ts b/src/api/page/device.ts
new file mode 100644
index 0000000..9c30884
--- /dev/null
+++ b/src/api/page/device.ts
@@ -0,0 +1,13 @@
+/**
+ * 设备管理接口
+ */
+import request from '../index'
+
+// 列表
+export function getDeviceList(params: object) {
+  return request({
+    url: '/api/device/page',
+    method: 'get',
+    params,
+  })
+}
diff --git a/src/main.ts b/src/main.ts
index ad69d36..dc79e1b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
+import axios from 'axios'
 // import print from 'vue3-print-nb'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import App from './App.vue'
@@ -20,17 +21,19 @@
 // if (useSettingsStore().app.iconifyOfflineUse) {
 downloadAndInstall()
 // }
+axios.get(`./config/config.json?ts=${new Date().getTime()}`).then((res) => {
+  console.log(res.data, 'json文件')
+  window.localStorage.setItem('IntegratedFront', res.data.baseUrl)
+  const app = createApp(App)
+  // app.config.globalProperties.hasPerm = hasPermission
+  // app.use(print)
+  app.use(ElementPlus)
+  app.use(pinia)
+  app.use(router)
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+  directive(app)
+  app.mount('#app')
+})
 
-const app = createApp(App)
-// app.config.globalProperties.hasPerm = hasPermission
-// app.use(print)
-app.use(ElementPlus)
-app.use(pinia)
-
-app.use(router)
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
-directive(app)
-
-app.mount('#app')
diff --git a/src/views/page/device/components/addDialog.vue b/src/views/page/device/components/addDialog.vue
new file mode 100644
index 0000000..4ae8bcc
--- /dev/null
+++ b/src/views/page/device/components/addDialog.vue
@@ -0,0 +1,114 @@
+<!--
+  Description: 设备管理 - 新建/编辑
+  Author: 李亚光
+  Date: 2024-11-01
+ -->
+<script lang="ts" setup name="DeviceManageEdit">
+import drawArea from './drawArea.vue'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+
+}) // 表单
+const textMap: { [key: string]: string } = {
+  update: '编辑',
+  create: '新增',
+  detail: '详情',
+} // 表头显示标题
+const btnLoading = ref(false) // 保存按钮的加载中状态
+const rules: FormRules = {
+  id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+  }
+}
+
+// 初始化对话框
+const initDialog = (row: any, dialogStatusValue: string) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+
+const cancel = () => {
+  dialogFormVisible.value = false
+  // this.$emit('watchChild')
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="textMap[dialogStatus]" append-to-body width="1000px">
+    <el-form
+      v-if="dialogFormVisible" ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right"
+      label-width="120px"
+    >
+      <el-row :gutter="24">
+        <el-col :span="10">
+          <el-form-item label="摄像头名称" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <el-form-item label="摄像头编号" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <el-form-item label="一体机编号" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <el-form-item label="RTSP地址" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <el-form-item label="识别间隔" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <el-form-item label="告警间隔" prop="">
+            <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" />
+          </el-form-item>
+          <!-- <el-form-item label="算法关联" prop=""> -->
+          <!-- <el-input v-model.trim="dataForm.a" type="text" placeholder="必填" /> -->
+          <!-- </el-form-item> -->
+        </el-col>
+        <el-col :span="14">
+          <div id="draw-area" class="draw">
+            <draw-area />
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button :loading="btnLoading" type="primary" @click="saveData">
+          保存
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+
+.draw {
+  height: 300px;
+  width: 533.333px;
+  border: 2px solid #000;
+  padding: 0;
+  margin: 0;
+  box-sizing: content-box;
+  position: relative;
+}
+</style>
diff --git a/src/views/page/device/components/drawArea.vue b/src/views/page/device/components/drawArea.vue
new file mode 100644
index 0000000..b0c40cb
--- /dev/null
+++ b/src/views/page/device/components/drawArea.vue
@@ -0,0 +1,178 @@
+<!--
+  Description: 设备管理 - 区域绘制（电子围栏）
+  Author: 李亚光
+  Date: 2024-11-01
+ -->
+
+<script lang="ts" setup name="DrawArea">
+// const props = defineProps({
+//   width: {
+//     type: Number,
+//     required: true,
+//   },
+//   height: {
+//     type: Number,
+//     required: true,
+//   },
+// })
+
+const points = ref([
+  { x: 50, y: 50 },
+  { x: 480, y: 50 },
+  { x: 480, y: 250 },
+  { x: 50, y: 250 },
+])
+onMounted(() => {
+  const canvas = document.getElementById('myCanvas')
+  const container = document.getElementById('draw-area')
+  const ctx = canvas.getContext('2d')
+  ctx.clearRect(0, 0, container.clientWidth, container.clientHeight)
+  // 初始位置
+  function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    ctx.beginPath()
+    ctx.moveTo(points.value[0].x, points.value[0].y)
+    ctx.lineTo(points.value[1].x, points.value[1].y)
+    ctx.lineTo(points.value[2].x, points.value[2].y)
+    ctx.lineTo(points.value[3].x, points.value[3].y)
+    ctx.closePath()
+    ctx.strokeStyle = 'red'
+    ctx.lineWidth = 1
+    ctx.stroke()
+  }
+
+  function drag(e, pointIndex) {
+    e = e || window.event
+    e.preventDefault()
+    var mousePos = { x: e.clientX - canvas.getBoundingClientRect().left, y: e.clientY - canvas.getBoundingClientRect().top }
+    console.log(mousePos, 'mousePos')
+    // 限制在指定区域内
+    if (mousePos.x < 0) {
+      mousePos.x = 0
+    }
+    else if (mousePos.x > 533) {
+      mousePos.x = 533
+    }
+    if (mousePos.y < 0) {
+      mousePos.y = 0
+    }
+    else if (mousePos.y > 300) {
+      mousePos.y = 300
+    }
+    points.value[pointIndex].x = mousePos.x
+    points.value[pointIndex].y = mousePos.y
+    draw()
+  }
+
+  function addDragEvents() {
+    var dragEvents = {
+      dragStart(e) {
+        e = e || window.event
+        var target = e.target || e.srcElement
+        var pointIndex = parseInt(target.getAttribute('data-point-index'), 10)
+        if (isNaN(pointIndex)) { return }
+        document.onmouseup = function () {
+          document.onmouseup = null
+          document.onmousemove = null
+        }
+        document.onmousemove = function (e) {
+          drag(e, pointIndex)
+        }
+      },
+    }
+
+    var pointsElements = document.getElementsByClassName('point')
+    for (var i = 0; i < pointsElements.length; i++) {
+      pointsElements[i].addEventListener('mousedown', dragEvents.dragStart)
+      pointsElements[i].setAttribute('data-point-index', i)
+    }
+  }
+
+  function init() {
+    draw()
+    addDragEvents()
+  }
+  init()
+})
+
+const style = ref([
+  {
+    top: `${points.value[0].y - 5}px`,
+    left: `${points.value[0].x - 5}px`,
+  },
+  {
+    top: `${points.value[1].y - 5}px`,
+    left: `${points.value[1].x - 5}px`,
+  },
+  {
+    top: `${points.value[2].y - 5}px`,
+    left: `${points.value[2].x - 5}px`,
+  },
+  {
+    top: `${points.value[3].y - 5}px`,
+    left: `${points.value[3].x - 5}px`,
+  },
+])
+
+watch(() => points.value, () => {
+  style.value = [
+    {
+      top: `${points.value[0].y - 5}px`,
+      left: `${points.value[0].x - 5}px`,
+    },
+    {
+      top: `${points.value[1].y - 5}px`,
+      left: `${points.value[1].x - 5}px`,
+    },
+    {
+      top: `${points.value[2].y - 5}px`,
+      left: `${points.value[2].x - 5}px`,
+    },
+    {
+      top: `${points.value[3].y - 5}px`,
+      left: `${points.value[3].x - 5}px`,
+    },
+  ]
+}, {
+  deep: true,
+})
+</script>
+
+<template>
+  <div style="width: 533px;height: 300px;">
+    <canvas id="myCanvas" width="533" height="300" class="canvans" />
+    <div v-for="(item, index) in points" :key="index" class="point" :style="style[index]" />
+  </div>
+</template>
+
+<style scoped>
+.canvans {
+  padding: 0;
+  margin: 0;
+
+  /* position: absolute; */
+
+  /* width: 100%;
+  height: 100%; */
+
+  /* left: 0;
+  top: 0; */
+  position: relative;
+}
+
+.point {
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  border-radius: 50%;
+  background-color: red;
+  opacity: 0.5;
+  top: 0;
+  left: 0;
+  z-index: 99;
+
+  &:hover {
+    cursor: move;
+  }
+}
+</style>
diff --git a/src/views/page/device/index.vue b/src/views/page/device/index.vue
index ca77803..6084ef7 100644
--- a/src/views/page/device/index.vue
+++ b/src/views/page/device/index.vue
@@ -1,3 +1,120 @@
+<!--
+  Description: 设备管理
+  Author: 李亚光
+  Date: 2024-11-01
+ -->
+<script lang="ts" setup name="DeviceManageList">
+import addDialog from './components/addDialog.vue'
+import { getDeviceList } from '@/api/page/device'
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 20,
+  offset: 1,
+})
+const list = ref<any[]>([])
+const total = ref(0)
+const columns = ref([
+  { text: '摄像头名称', value: 'name', align: 'center' },
+  { text: '摄像头编号', value: 'code', align: 'center' },
+  { text: '一体机编号', value: 'deviceTypeName', align: 'center' },
+  { text: 'RTSP地址', value: 'output_stream_url', align: 'center' },
+  { text: '识别间隔', value: 'deviceTypeName', align: 'center' },
+  { text: '告警间隔', value: 'deviceTypeName', align: 'center' },
+  { text: '关联算法', value: 'deviceTypeName', align: 'center' },
+  { text: '在线状态', value: 'type', align: 'center' },
+])
+const fetchData = () => {
+  loadingTable.value = true
+  getDeviceList(listQuery.value).then((res) => {
+    console.log(res.data, '')
+    list.value = res.data.items
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+fetchData()
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+const reset = () => {
+  listQuery.value = {
+    limit: 20,
+    offset: 1,
+  }
+  fetchData()
+}
+
+const addRef = ref()
+const editRow = (row: any, type: string) => {
+  addRef.value.initDialog(row, type)
+}
+</script>
+
 <template>
-  设备管理
+  <!-- 布局 -->
+  <app-container>
+    <add-dialog ref="addRef" @refresh="fetchData" />
+    <search-area :need-clear="true" @search="fetchData" @clear="reset">
+      <search-item>
+        <el-input v-model.trim="listQuery.position" placeholder="设备名称" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.processStatus" placeholder="在线状态" clearable class="select" style="width: 192px;">
+          <el-option v-for="item in []" :key="item.id" :value="item.value" :label="item.name" />
+        </el-select>
+      </search-item>
+    </search-area>
+    <!-- 表头标题 -->
+    <table-container>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary" @click="editRow({}, 'create')">
+            新建
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" align="center" width="160">
+            <template #default="scope">
+              <el-button type="primary" link size="small" @click="editRow(scope.row, 'detail')">
+                查看
+              </el-button>
+              <el-button type="primary" link size="small" @click="editRow(scope.row, 'update')">
+                编辑
+              </el-button>
+              <el-button type="primary" link size="small">
+                预览
+              </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </app-container>
 </template>
diff --git a/vite.config.ts b/vite.config.ts
index 8589a2e..86d03ca 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -25,7 +25,8 @@
     // 开发服务器选项 https://cn.vitejs.dev/config/#server-options
     server: {
       open: true,
-      port: 9000,
+      port: 9010,
+      host: '0.0.0.0', // 设置ip分享
       proxy: {
         '/proxy': {
           target: env.VITE_APP_API_BASEURL,