告警面板实现

src/designer/viewWidgets/alarm/AlarmView.vue

@@ -11,46 +11,66 @@
     </span>
   </div>
   <div class="calc-right-panel">
-    AlarmView_1<br />
+    <div class="alarm-wrap">
-    AlarmView_2<br />
+      <div class="alarm-toolbar">
-    AlarmView_3<br />
+        <span class="alarm-toolbar-icon">
-    AlarmView_4<br />
+          <component  :is="renderIcon('fa HourglassStart')"></component>
-    AlarmView_5<br />
+        </span>
-    AlarmView_6<br />
+        <span class="alarm-toolbar-icon">
-    AlarmView_7<br />
+          <component  :is="renderIcon('fa LightbulbRegular')"></component>
-    AlarmView_8<br />
+        </span>
-    AlarmView_9<br />
+        <el-checkbox v-model="filter">应用过滤</el-checkbox>
-    AlarmView_10<br />
+        <span class="alarm-toolbar-icon">
-    AlarmView_11<br />
+          <component  :is="renderIcon('antd PauseOutlined')"></component>
-    AlarmView_12<br />
+        </span>
-    AlarmView_13<br />
+        <span class="alarm-toolbar-icon">
-    AlarmView_14<br />
+          <component  :is="renderIcon('element CaretRight')"></component>
-    AlarmView_15<br />
+        </span>
-    AlarmView_16<br />
+        <span class="alarm-toolbar-icon">
-    AlarmView_17<br />
+          <component  :is="renderIcon('element Document')"></component>
-    AlarmView_18<br />
+        </span>
-    AlarmView_19<br />
+        <span class="alarm-toolbar-icon">
-    AlarmView_20<br />
+          <component  :is="renderIcon('element Delete')"></component>
-    AlarmView_21<br />
+        </span>
-    AlarmView_22<br />
+        <span>显示数量：1</span>
-    AlarmView_23<br />
+      </div>
-    AlarmView_24<br />
+      <div class="alarm-content">
-    AlarmView_25<br />
+        <div class="alarm-row">
-    AlarmView_26<br />
+          <div class="alarm-row-infor alarm-row-header">
-    AlarmView_27<br />
+            <div class="alarm-row-left">
-    AlarmView_28<br />
+              <span class="num">1</span>
-    AlarmView_29<br />
+              打开文件成功
-    AlarmView_30<br />
+              <span class="text-bold">系统</span>
-    AlarmView_31<br />
+            </div>
-    AlarmView_32<br />
+            <div class="alarm-row-right">05-23 09:05:05 607</div>
-    AlarmView_33<br />
+          </div>
-    AlarmView_34<br />
+          <div class="alarm-row-infor">
-    AlarmView_35<br />
+            <div class="alarm-row-left"></div>
-    AlarmView_36<br />
+            <div class="alarm-row-right">等级1</div>
-    AlarmView_37<br />
+          </div>
-    AlarmView_38<br />
+          <div class="alarm-row-infor alarm-row-footer">
-    AlarmView_39<br />
+            <div class="alarm-row-left">打开文件成功</div>
-    AlarmView_40<br />
+          </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>
+<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>