diff --git a/web_src/package.json b/web_src/package.json
index c314b9ba..78582b87 100644
--- a/web_src/package.json
+++ b/web_src/package.json
@@ -15,6 +15,7 @@
     "@liveqing/liveplayer": "^2.7.10",
     "@wchbrad/vue-easy-tree": "^1.0.12",
     "axios": "^0.24.0",
+    "byte-weektime-picker": "^1.1.1",
     "core-js": "^2.6.5",
     "echarts": "^4.9.0",
     "element-ui": "^2.15.14",
diff --git a/web_src/src/components/RecordPLan.vue b/web_src/src/components/RecordPLan.vue
index ed4215fd..a31917ce 100755
--- a/web_src/src/components/RecordPLan.vue
+++ b/web_src/src/components/RecordPLan.vue
@@ -81,6 +81,12 @@
             </div>
           </template>
         </el-table-column>
+        <el-table-column label="操作" width="200" fixed="right">
+          <template v-slot:default="scope">
+            <el-button size="medium" icon="el-icon-edit" type="text" v-if="scope.row.recordPlan" @click="edit(scope.row)">编辑</el-button>
+            <el-button size="medium" icon="el-icon-plus" type="text" v-else @click="edit(scope.row)">添加</el-button>
+          </template>
+        </el-table-column>
       </el-table>
       <el-pagination
         style="text-align: right"
@@ -92,15 +98,18 @@
         layout="total, sizes, prev, pager, next"
         :total="total">
       </el-pagination>
+    <editRecordPlan ref="editRecordPlan"></editRecordPlan>
   </div>
 </template>
 
 <script>
 import uiHeader from '../layout/UiHeader.vue'
+import EditRecordPlan from "./dialog/editRecordPlan.vue";
 
 export default {
   name: 'recordPLan',
   components: {
+    EditRecordPlan,
     uiHeader,
   },
   data() {
@@ -182,6 +191,11 @@ export default {
     onChannelChange: function (deviceId) {
       //
     },
+    edit: function (channel) {
+      this.$refs.editRecordPlan.openDialog(channel, ()=>{
+        this.initData()
+      })
+    },
   }
 };
 </script>
diff --git a/web_src/src/components/dialog/editRecordPlan.vue b/web_src/src/components/dialog/editRecordPlan.vue
new file mode 100644
index 00000000..3b54b1b6
--- /dev/null
+++ b/web_src/src/components/dialog/editRecordPlan.vue
@@ -0,0 +1,98 @@
+<template>
+  <div id="editRecordPlan" v-loading="loading" style="text-align: left;">
+    <el-dialog
+      title="录制计划"
+      width="700px"
+      top="2rem"
+      :close-on-click-modal="false"
+      :visible.sync="showDialog"
+      :destroy-on-close="true"
+      @close="close()"
+    >
+      <div id="shared" style="margin-right: 20px;">
+        <ByteWeektimePicker v-model="byteTime" name="name"/>
+        <el-form status-icon label-width="80px">
+          <el-form-item>
+            <div style="float: right;">
+              <el-button type="primary" @click="onSubmit">保存</el-button>
+              <el-button @click="close">取消</el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { ByteWeektimePicker } from 'byte-weektime-picker'
+
+
+export default {
+  name: "editRecordPlan",
+  props: {},
+  components: {ByteWeektimePicker},
+  created() {
+  },
+  data() {
+    return {
+      value:"",
+      options: [],
+      loading: false,
+      showDialog: false,
+      channel: "",
+      deviceDbId: "",
+      endCallback: "",
+      byteTime: "",
+    };
+  },
+  methods: {
+    openDialog: function (channel, deviceDbId, endCallback) {
+      this.channel = channel;
+      this.deviceDbId = deviceDbId;
+      this.endCallback = endCallback;
+      this.showDialog = true;
+    },
+    onSubmit: function () {
+      this.$axios({
+        method: 'post',
+        url: "/api/user/add",
+        params: {
+          username: this.username,
+          password: this.password,
+          roleId: this.roleId
+        }
+      }).then((res) => {
+        if (res.data.code === 0) {
+          this.$message({
+            showClose: true,
+            message: '添加成功',
+            type: 'success',
+
+          });
+          this.showDialog = false;
+          this.listChangeCallback()
+
+        } else {
+          this.$message({
+            showClose: true,
+            message: res.data.msg,
+            type: 'error'
+          });
+        }
+      }).catch((error) => {
+        console.error(error)
+      });
+    },
+    close: function () {
+      console.log(this.byteTime)
+      this.channel = "";
+      this.deviceDbId = "";
+      this.showDialog = false;
+      if(this.endCallback) {
+        this.endCallback();
+      }
+    },
+  },
+};
+</script>