diff --git a/src/designer/viewWidgets/alarm/AlarmView.vue b/src/designer/viewWidgets/alarm/AlarmView.vue
index 0163ca9..6125bd4 100644
--- a/src/designer/viewWidgets/alarm/AlarmView.vue
+++ b/src/designer/viewWidgets/alarm/AlarmView.vue
@@ -11,46 +11,66 @@
     </span>
   </div>
   <div class="calc-right-panel">
-    AlarmView_1<br />
-    AlarmView_2<br />
-    AlarmView_3<br />
-    AlarmView_4<br />
-    AlarmView_5<br />
-    AlarmView_6<br />
-    AlarmView_7<br />
-    AlarmView_8<br />
-    AlarmView_9<br />
-    AlarmView_10<br />
-    AlarmView_11<br />
-    AlarmView_12<br />
-    AlarmView_13<br />
-    AlarmView_14<br />
-    AlarmView_15<br />
-    AlarmView_16<br />
-    AlarmView_17<br />
-    AlarmView_18<br />
-    AlarmView_19<br />
-    AlarmView_20<br />
-    AlarmView_21<br />
-    AlarmView_22<br />
-    AlarmView_23<br />
-    AlarmView_24<br />
-    AlarmView_25<br />
-    AlarmView_26<br />
-    AlarmView_27<br />
-    AlarmView_28<br />
-    AlarmView_29<br />
-    AlarmView_30<br />
-    AlarmView_31<br />
-    AlarmView_32<br />
-    AlarmView_33<br />
-    AlarmView_34<br />
-    AlarmView_35<br />
-    AlarmView_36<br />
-    AlarmView_37<br />
-    AlarmView_38<br />
-    AlarmView_39<br />
-    AlarmView_40<br />
+    <div class="alarm-wrap">
+      <div class="alarm-toolbar">
+        <span class="alarm-toolbar-icon">
+          <component  :is="renderIcon('fa HourglassStart')"></component>
+        </span>
+        <span class="alarm-toolbar-icon">
+          <component  :is="renderIcon('fa LightbulbRegular')"></component>
+        </span>
+        <el-checkbox v-model="filter">应用过滤</el-checkbox>
+        <span class="alarm-toolbar-icon">
+          <component  :is="renderIcon('antd PauseOutlined')"></component>
+        </span>
+        <span class="alarm-toolbar-icon">
+          <component  :is="renderIcon('element CaretRight')"></component>
+        </span>
+        <span class="alarm-toolbar-icon">
+          <component  :is="renderIcon('element Document')"></component>
+        </span>
+        <span class="alarm-toolbar-icon">
+          <component  :is="renderIcon('element Delete')"></component>
+        </span>
+        <span>显示数量：1</span>
+      </div>
+      <div class="alarm-content">
+        <div class="alarm-row">
+          <div class="alarm-row-infor alarm-row-header">
+            <div class="alarm-row-left">
+              <span class="num">1</span>
+              打开文件成功
+              <span class="text-bold">系统</span>
+            </div>
+            <div class="alarm-row-right">05-23 09:05:05 607</div>
+          </div>
+          <div class="alarm-row-infor">
+            <div class="alarm-row-left"></div>
+            <div class="alarm-row-right">等级1</div>
+          </div>
+          <div class="alarm-row-infor alarm-row-footer">
+            <div class="alarm-row-left">打开文件成功</div>
+          </div>
+        </div>
+        <div class="alarm-row selected">
+          <div class="alarm-row-infor alarm-row-header">
+            <div class="alarm-row-left">
+              <span class="num">1</span>
+              打开文件成功
+              <span class="text-bold">系统</span>
+            </div>
+            <div class="alarm-row-right">05-23 09:05:05 607</div>
+          </div>
+          <div class="alarm-row-infor">
+            <div class="alarm-row-left"></div>
+            <div class="alarm-row-right">等级1</div>
+          </div>
+          <div class="alarm-row-infor alarm-row-footer">
+            <div class="alarm-row-left">全局数据恢复完成</div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 
 </template>
@@ -63,8 +83,86 @@ export default {
   mixins: [IWidgets],
   data() {
     return {
-      searchKeyword: ''
+      searchKeyword: '',
+      filter:''
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
+<style lang="less">
+.alarm-wrap{
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  .alarm-toolbar{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    border-bottom:1px solid #dcdcdc;
+    align-items: center;
+    font-size: 14px;
+    .alarm-toolbar-icon{
+      display:inline-flex;
+      align-items: center;
+      padding:0 5px;
+      background: #747a80;
+      margin:2px 3px;
+      height:28px;
+      .el-icon{
+        font-size: 16px;
+        color: #ffc80e;
+      }
+    }
+    .el-checkbox{
+      margin:0 3px;
+      .el-checkbox__label{
+        padding-left:2px;
+      }
+    }
+  }
+  .alarm-content{
+    flex:1;
+    overflow: auto;
+    .alarm-row{
+      border:1px solid #dcdcdc;
+      margin:5px;
+      &.selected{
+        border:1px solid #0e75ff;
+      }
+      .alarm-row-infor{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        padding:5px;
+        font-size: 13px;
+        background: #efefef;
+        .alarm-row-left{
+          width:60%;
+          .num{
+            display: inline-block;
+            padding:0 6px;
+            background: #b1b1b1;
+            border-radius: 3px;
+            color:#fff;
+            font-weight: bold;
+          }
+          .text-bold{
+            font-weight: bold;
+            font-size: 14px;
+          }
+        }
+        .alarm-row-right{
+          flex:1;
+        }
+      }
+      .alarm-row-header{
+        background: #dbdbdc;
+      }
+      .alarm-row-footer{
+        border-top:1px solid #e1e1e1;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/designer/viewWidgets/task/TaskView.vue b/src/designer/viewWidgets/task/TaskView.vue
index 6d8e331..c3a85a0 100644
--- a/src/designer/viewWidgets/task/TaskView.vue
+++ b/src/designer/viewWidgets/task/TaskView.vue
@@ -11,26 +11,82 @@
     </span>
   </div>
   <div class="calc-bottom-panel">
-    TaskView1<br />
-    TaskView2<br />
-    TaskView3<br />
-    TaskView4<br />
-    TaskView5<br />
-    TaskView6<br />
-    TaskView7<br />
-    TaskView8<br />
-    TaskView9<br />
-    TaskView10<br />
-    TaskView11<br />
-    TaskView12<br />
-    TaskView13<br />
-    TaskView14<br />
-    TaskView15<br />
-    TaskView16<br />
-    TaskView17<br />
-    TaskView18<br />
-    TaskView19<br />
-    TaskView20<br />
+    <el-tabs type="border-card" class="task-view-tabs">
+      <el-tab-pane>
+        <template #label>
+        <span class="tabs-title-label">
+          <component :is="renderIcon('element Lightning')"></component>
+          <span>执行中</span>
+        </span>
+        </template>
+        <div class="task-tab-wrap">
+          <div class="tab-row">
+            <div class="tab-row-icon">
+              <component :is="renderIcon('antd NodeIndexOutlined')"></component>
+            </div>
+            <div class="tab-row-content">
+              <div class="tab-row-infor">
+                <component  :is="renderIcon('antd AppstoreOutlined')"></component>
+                [结束]导航到目的点
+              </div>
+              <div class="tab-row-infor">
+                <component  :is="renderIcon('antd FireFilled')"></component>
+                [结束]按照导航路径移动到目标点
+              </div>
+              <div class="tab-row-infor">
+                <component  :is="renderIcon('element AlarmClock')"></component>
+                23日 16:10:09:103 - 23日  16:40:39:103
+              </div>
+              <div class="tab-row-infor">
+                <component  :is="renderIcon('fa LuggageCart')"></component>
+                <span class="blue">Agv-1 30 32 当前目标点 32</span>
+              </div>
+            </div>
+          </div>
+          <div class="tab-row selected">
+            <div class="tab-row-icon">
+              <component :is="renderIcon('antd NodeIndexOutlined')"></component>
+            </div>
+            <div class="tab-row-content">
+              <div class="tab-row-infor">
+                <component  :is="renderIcon('antd AppstoreOutlined')"></component>
+                [结束]导航到目的点
+              </div>
+              <div class="tab-row-infor">
+                <component  :is="renderIcon('antd FireFilled')"></component>
+                [结束]按照导航路径移动到目标点
+              </div>
+              <div class="tab-row-infor">
+                <component  :is="renderIcon('element AlarmClock')"></component>
+                23日 16:10:09:103 - 23日  16:40:39:103
+              </div>
+              <div class="tab-row-infor">
+                <component  :is="renderIcon('fa LuggageCart')"></component>
+                <span class="blue">Agv-1 30 32 当前目标点 32</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane>
+        <template #label>
+        <span class="tabs-title-label">
+          <component :is="renderIcon('element CircleCheck')"></component>
+          <span>执行中</span>
+        </span>
+        </template>
+        <div class=""></div>
+      </el-tab-pane>
+      <el-tab-pane>
+        <template #label>
+        <span class="tabs-title-label">
+          <component :is="renderIcon('element Warning')"></component>
+          <span>执行中</span>
+        </span>
+        </template>
+        <div class=""></div>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 <script>
@@ -46,4 +102,82 @@ export default {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
+<style lang="less">
+.task-view-wrap{
+  height: 100%;
+}
+.task-view-tabs {
+  height: 100%;
+  &.el-tabs--border-card{
+    border: none;
+    &>.el-tabs__header{
+      background: #efefef;
+      .tabs-title-label span {
+        vertical-align: middle;
+        margin-left: 4px;
+        color: #333;
+      }
+     .tabs-title-label .el-icon {
+        vertical-align: middle;
+      }
+      .el-tabs__item{
+        height: 30px;
+        &.is-active{
+          .tabs-title-label span {;
+            color: var(--el-color-primary);
+            font-weight: bold;
+          }
+        }
+      }
+    }
+    &> .el-tabs__content {
+      padding:2px 5px;
+      color: #6b778c;
+      font-size: 32px;
+      font-weight: 600;
+      overflow: auto;
+      .task-tab-wrap{
+        .tab-row{
+          display: flex;
+          flex-direction: row;
+          margin:3px 0;
+          padding:10px;
+          background: #efefef;
+          &.selected{
+            background: #f5eed8;
+          }
+          .tab-row-icon{
+            flex-shrink: 0;
+            width: 75px;
+            height: 75px;
+            background: #747a80;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color:#fff
+          }
+          .tab-row-content{
+            flex: 1;
+            margin-left:10px;
+            .tab-row-infor{
+              font-size: 13px;
+              margin-bottom: 5px;
+              color:#222;
+              .el-icon {
+                font-size: 14px;
+                position: relative;
+                top:3px;
+                margin-right: 5px;
+              }
+              .blue{
+                color:#00beff;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file