111

src/components/common-comp-alarm-list/src/components/AlarmList.vue

@@ -12,25 +12,8 @@
     }"
   >
     <div ref="target" class="input-bg">
-      <div class="input-box">
-        <!-- 修改批量操作按钮，使其切换showSelectAll的值 -->
-        <el-button
-            class="iconfont_tools icon-icon_shuaxin"
-            @click="toggleSelectAll"
-        >
-          {{ showSelectAll ? '取消批量' : '批量操作' }}
-        </el-button>
-        <div class="select-all-container" v-if="showSelectAll">
-          <!-- 将复选框改为按钮形式 -->
-          <el-button
-              type="text"
-              class="select-all-button"
-              @click="handleSelectAllChange"
-          >
-            {{ isAllSelected ? '反选' : '全选' }}
-          </el-button>
-        </div>
-      </div>
+
+
       <div class="input-box">
         <el-input
           placeholder="输入关键字"
@@ -100,6 +83,34 @@
         @filterStatusChange="handleFilterStatusChange"
       />
     </div>
+    <!--    固定按钮位置  -->
+    <div class="allBut">
+      <el-button class="yujingA">真警</el-button>
+      <el-button class="yujingB">误报</el-button>
+      <el-button class="yujingC">重复告警</el-button>
+      <el-button class="yujingD">关闭</el-button>
+    </div>
+    <!--    固定按钮位置end  -->
+    <div class="input-box">
+      <!-- 修改批量操作按钮，使其切换showSelectAll的值 -->
+      <el-button
+          class="iconfont_tools icon-icon_shuaxin pLbut"
+          @click="toggleSelectAll"
+      >
+        {{ showSelectAll ? '取消批量' : '批量操作' }}
+      </el-button>
+      <span class="xianshisj">已选32条</span>
+      <div class="select-all-container" v-if="showSelectAll" style="float: right;">
+        <!-- 将复选框改为按钮形式 -->
+        <el-button
+            type="text"
+            class="select-all-button quanxuan"
+            @click="handleSelectAllChange"
+        >
+          {{ isAllSelected ? '反选' : '全选' }}
+        </el-button>
+      </div>
+    </div>
     <div id="table-all" class="table-all">
       <div
         class="table-body"
@@ -1126,3 +1137,74 @@ export default {
 @import '~@component-gallery/theme-chalk/src/alarmList/index';
 @import '~@component-gallery/theme-chalk/src/mixins/px-to-rem';
 </style>
+<style>
+.pLbut,.pLbut:hover{
+  background: #153056 linear-gradient(180deg, #47a7f1, rgba(78, 133, 209, 0)) !important;
+  color: #fff;
+  float: left;
+}
+.input-box{
+  overflow: hidden;
+  padding: 0.1rem 0.15rem;
+}
+.alarm-list-item-box{
+  padding: 0 0.12rem;
+}
+.quanxuan{
+  float: right;
+  line-height: 0.25rem;
+}
+.xianshisj{
+  font-size: 0.15rem;
+  color: #a8c1d3;
+  float: left;
+  line-height: 0.45rem;
+  margin: 0 0 0 0.1rem;
+}
+.allBut{
+  position: fixed;
+  right: 0.2rem;
+  bottom: 0.3rem;
+  width: 3.7rem;
+  z-index: 9999;
+  padding: 0 0.1rem;
+}
+.table-all{
+  height: calc(90% - 0.34rem) !important;
+}
+.yujingA {
+  border: .02rem solid transparent;
+  border-radius: .08rem;
+  background-clip: padding-box, border-box;
+  background-origin: padding-box, border-box;
+  background-image: linear-gradient(180deg, rgba(23, 37, 55, .7), rgba(54, 121, 218, .7)), linear-gradient(180deg, rgba(176, 212, 255, .35), #b0d4ff);
+  color: #E8F3FE;
+}
+.yujingB{
+  border: .02rem solid transparent;
+  border-radius: .08rem;
+  background-clip: padding-box, border-box;
+  background-origin: padding-box, border-box;
+  background-image: linear-gradient(180deg, rgb(122 183 232), rgba(54, 121, 218, .7)), linear-gradient(180deg, rgba(176, 212, 255, .35), #b0d4ff);
+  color: #E8F3FE;
+}
+.yujingC{
+  border: .02rem solid transparent;
+  border-radius: .08rem;
+  background-clip: padding-box, border-box;
+  background-origin: padding-box, border-box;
+  background-image:linear-gradient(180deg, rgb(122 232 195), rgb(6 132 132 / 70%)), linear-gradient(180deg, rgba(176, 212, 255, .35), #b0d4ff);
+  color: #E8F3FE;
+}
+.yujingD{
+  border: .02rem solid transparent;
+  border-radius: .08rem;
+  background-clip: padding-box, border-box;
+  background-origin: padding-box, border-box;
+  background-image: linear-gradient(180deg, rgb(122 139 232), rgb(54 85 218 / 70%)), linear-gradient(180deg, rgba(176, 212, 255, .35), #b0d4ff);
+  color: #E8F3FE;
+}
+.yujingA:hover,.yujingB:hover,.yujingC:hover,.yujingD:hover{
+  color: #fff;
+}
+</style>