Forráskód Böngészése

告警功能调整+首页告警功能

tl 6 hónapja
szülő
commit
25673fb6d4

+ 28 - 3
cpp-admin/src/main/java/com/cpp/web/controller/alarm/AbnormalAlarmController.java

@@ -1,5 +1,6 @@
 package com.cpp.web.controller.alarm;
 
+import com.baomidou.mybatisplus.core.metadata.OrderItem;
 import com.baomidou.mybatisplus.core.toolkit.Wrappers;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.cpp.common.core.domain.R;
@@ -31,7 +32,20 @@ public class AbnormalAlarmController {
 
     @GetMapping("/acknowledgeByStationCode")
     public R acknowledgeByStationCode(String stationCode) {
-        return R.ok(abnormalAlarmService.updateAllStatus1(stationCode));
+        return R.ok(abnormalAlarmService.updateStationStatus1(stationCode));
+    }
+
+    @GetMapping("/dashboard")
+    public R dashboard(Long currentPage, Long pageSize, AlarmEnum alarmType) {
+        Page page = new Page(currentPage, pageSize);
+        page.setMaxLimit((long) -1);
+        return R.ok(abnormalAlarmService.page(page, abnormalAlarmService.dashboard(alarmType)).addOrder(OrderItem.desc("start_time")));
+    }
+
+
+    @GetMapping("/acknowledgeAll")
+    public R acknowledgeAll() {
+        return R.ok(abnormalAlarmService.updateAllStatus1());
     }
 
     @PostMapping("/save")
@@ -39,10 +53,21 @@ public class AbnormalAlarmController {
         return R.ok(abnormalAlarmService.saveOrUpdate(abnormalAlarm));
     }
 
+    @PostMapping("/updateStatus1")
+    public R updateStatus1(@RequestBody AbnormalAlarm abnormalAlarm) {
+        return R.ok(abnormalAlarmService.updateStatus1ById(abnormalAlarm.getId()));
+    }
+
 
     @GetMapping("/getCountByStatusAndStationCode")
-    public R getCountByStatus(Integer status,String stationCode) {
-        return R.ok(abnormalAlarmService.countByStatusAndStationCode(status,stationCode));
+    public R getCountByStatus(Integer status, String stationCode) {
+        return R.ok(abnormalAlarmService.countByStatusAndStationCode(status, stationCode));
+    }
+
+
+    @GetMapping("/alarmCountStatus1")
+    public R dashboard() {
+        return R.ok(abnormalAlarmService.alarmCountStatus1());
     }
 
 }

+ 5 - 3
cpp-admin/src/main/java/com/cpp/web/mapper/alarm/AbnormalAlarmMapper.java

@@ -18,8 +18,10 @@ import org.apache.ibatis.annotations.Update;
 public interface AbnormalAlarmMapper extends BaseMapper<AbnormalAlarm> {
 
     @Update("update cpp_abnormal_alarm set status = 1 where status = 0 and station_code = '${stationCode}'")
-    Boolean updateAllStatus1(@Param("stationCode") String stationCode);
+    Boolean updateStationStatus1(@Param("stationCode") String stationCode);
 
-    @Select("select count(*) from cpp_abnormal_alarm where status = ${status} and station_code = '${stationCode}'")
-    int countByStatusAndStationCode(@Param("status") Integer status, @Param("stationCode") String stationCode);
+
+
+    @Update("update cpp_abnormal_alarm set status = 1 where status = 0 ")
+    Boolean updateAllStatus1();
 }

+ 21 - 2
cpp-admin/src/main/java/com/cpp/web/service/alarm/AbnormalAlarmService.java

@@ -6,6 +6,7 @@ import com.cpp.web.domain.Alarm.AbnormalAlarm;
 import com.cpp.web.domain.enums.AlarmEnum;
 
 import java.util.Date;
+import java.util.Map;
 
 /**
  * 告警信息业务层接口
@@ -17,7 +18,25 @@ public interface AbnormalAlarmService extends IService<AbnormalAlarm> {
 
     QueryWrapper<AbnormalAlarm> findByTimeBetweenAndAlarmTypeAndStationCode(Date startTime, Date endTime, AlarmEnum alarmType, String stationCode);
 
-    Boolean updateAllStatus1(String stationCode);
+    Boolean updateStationStatus1(String stationCode);
 
-    int countByStatusAndStationCode(Integer status, String stationCode);
+    Long countByStatusAndStationCode(Integer status, String stationCode);
+
+
+    /**
+     * 提供给首页告警的方法
+     * @return
+     */
+    QueryWrapper<AbnormalAlarm> dashboard(AlarmEnum alarmType);
+
+    /**
+     * 提供给首页得告警未确认数量
+     * @return
+     */
+    Long alarmCountStatus1();
+
+
+    Boolean updateAllStatus1();
+
+    Boolean updateStatus1ById(Long id);
 }

+ 8 - 1
cpp-admin/src/main/java/com/cpp/web/service/alarm/AlarmLog.java

@@ -34,7 +34,14 @@ public class AlarmLog {
         private static final AlarmLog INSTANCE = new AlarmLog();
     }
 
-
+    /**
+     * 告警日志打印+存储
+     *
+     * @param alarmSource
+     * @param alarmType
+     * @param info
+     * @param stationCode
+     */
     public void info(DataSourcesEnum alarmSource, AlarmEnum alarmType, String info, String stationCode) {
 
         String key = alarmSource.getCode() + "_" + alarmType.getCode() + "_" + info + "_" + stationCode;

+ 58 - 11
cpp-admin/src/main/java/com/cpp/web/service/alarm/impl/AbnormalAlarmServiceImpl.java

@@ -2,16 +2,23 @@ package com.cpp.web.service.alarm.impl;
 
 
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
+import com.baomidou.mybatisplus.core.toolkit.Wrappers;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
 import com.cpp.web.domain.Alarm.AbnormalAlarm;
 import com.cpp.web.domain.enums.AlarmEnum;
 import com.cpp.web.mapper.alarm.AbnormalAlarmMapper;
 import com.cpp.web.service.alarm.AbnormalAlarmService;
+import com.cpp.web.utils.DateTimeUtil;
 import lombok.AllArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
+import org.apache.ibatis.annotations.Param;
+import org.apache.ibatis.annotations.Select;
+import org.apache.ibatis.annotations.Update;
 import org.springframework.stereotype.Service;
 
 import java.util.Date;
+import java.util.Map;
 
 /**
  * 告警信息层实现类
@@ -27,14 +34,13 @@ public class AbnormalAlarmServiceImpl extends ServiceImpl<AbnormalAlarmMapper, A
     @Override
     public QueryWrapper<AbnormalAlarm> findByTimeBetweenAndAlarmTypeAndStationCode(Date startTime, Date endTime, AlarmEnum alarmType, String stationCode) {
 
-
         QueryWrapper<AbnormalAlarm> wrapper = new QueryWrapper<>();
-        if (startTime != null && !endTime.equals("")&& endTime != null && !endTime.equals("")) {
-            wrapper.and(a->a.or(w->w.isNull("end_time").le("start_time",endTime))
-                    .or(w->w.isNotNull("end_time").le("start_time",endTime).gt("end_time",startTime))
-                    .or(w->w.isNotNull("end_time").le("start_time",endTime).gt("start_time",startTime))
-                    .or(w->w.isNotNull("end_time").le("end_time",endTime).gt("start_time",endTime))
-                    .or(w->w.isNotNull("end_time").le("start_time",startTime).gt("end_time",endTime)));
+        if (startTime != null && !endTime.equals("") && endTime != null && !endTime.equals("")) {
+            wrapper.and(a -> a.or(w -> w.isNull("end_time").le("start_time", endTime))
+                    .or(w -> w.isNotNull("end_time").le("start_time", endTime).gt("end_time", startTime))
+                    .or(w -> w.isNotNull("end_time").le("start_time", endTime).gt("start_time", startTime))
+                    .or(w -> w.isNotNull("end_time").le("end_time", endTime).gt("start_time", endTime))
+                    .or(w -> w.isNotNull("end_time").le("start_time", startTime).gt("end_time", endTime)));
         }
         if (alarmType != null && !alarmType.equals("")) {
             wrapper.eq("alarm_type", alarmType);
@@ -47,13 +53,54 @@ public class AbnormalAlarmServiceImpl extends ServiceImpl<AbnormalAlarmMapper, A
     }
 
     @Override
-    public Boolean updateAllStatus1(String stationCode) {
-        return baseMapper.updateAllStatus1(stationCode);
+    public Boolean updateStationStatus1(String stationCode) {
+        return baseMapper.updateStationStatus1(stationCode);
+    }
+
+
+    @Override
+    public Boolean updateAllStatus1() {
+        return baseMapper.updateAllStatus1();
     }
 
     @Override
-    public int countByStatusAndStationCode(Integer status, String stationCode) {
-        return baseMapper.countByStatusAndStationCode(status,stationCode);
+    public Boolean updateStatus1ById(Long id) {
+
+        UpdateWrapper<AbnormalAlarm> wrapper = new UpdateWrapper<>();
+
+        wrapper.eq("id",id).set("status",1);
+
+        return update(wrapper);
+    }
+
+    @Override
+    public Long countByStatusAndStationCode(Integer status, String stationCode) {
+
+        QueryWrapper<AbnormalAlarm> wrapper = new QueryWrapper<>();
+        wrapper.eq("status", status);
+        wrapper.eq("station_code", stationCode);
+
+        return baseMapper.selectCount(wrapper);
+    }
+
+    @Override
+    public QueryWrapper<AbnormalAlarm> dashboard(AlarmEnum alarmType) {
+
+        QueryWrapper<AbnormalAlarm> wrapper = new QueryWrapper<>();
+        if (alarmType != null && !alarmType.equals("")) {
+            wrapper.eq("alarm_type", alarmType);
+        }
+
+        wrapper.eq("status", 0);
+
+        return wrapper;
+    }
+
+    @Override
+    public Long alarmCountStatus1() {
+        QueryWrapper<AbnormalAlarm> wrapper = new QueryWrapper<>();
+        wrapper.eq("status", 0);
+        return baseMapper.selectCount(wrapper);
     }
 
 }

+ 1 - 1
cpp-admin/src/main/java/com/cpp/web/service/cloud/CloudFileParsing.java

@@ -442,7 +442,7 @@ public class CloudFileParsing {
      * @param time
      */
     public Integer calcHowLongAgo(Date baseTime, Date time) {
-        return ((int) ((time.getTime() - baseTime.getTime()) / 86400000L)) + 1;
+        return ((int) ((time.getTime() - baseTime.getTime()) / 86400000L));
     }
 
 

+ 14 - 4
cpp-ui/src/views/abnormalAlarm/index.vue

@@ -205,7 +205,7 @@ export default {
       })
     },
     acknowledgeByStationCode() {
-      this.$confirm('是否确认执行当前场站全部确认操作?', '提示', {
+      this.$confirm('是否确认对 【场站:'+this.formatStation(this.stationCode)+'】 进行"全部确认"操作?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -224,20 +224,30 @@ export default {
       })
     },
     acknowledge(row) {
-      this.$confirm('是否确认执行【' + row.msg + '】确认操作?', '提示', {
+      this.$confirm('是否对【' + row.msg + '】进行确认操作?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
         row.status = 1
-        this.$axios.post('/abnormalAlarm/save', row).then(response => {
+        this.$axios.post('/abnormalAlarm/updateStatus1', row).then(response => {
           this.$message.info("【" + row.msg + "】 已确认!")
           this.beforeQuery()
         }).catch(() => {
           this.loading = false
         })
       })
-    }
+    },
+    formatStation(stationCode) {
+      let name= '未知场站名称'
+      this.stationList.forEach(s=>{
+        if(stationCode == s.value){
+          name = s.label
+          return
+        }
+      })
+      return name
+    },
   }
 }
 </script>

+ 1 - 1
cpp-ui/src/views/cloudDataQuery/index.vue

@@ -10,7 +10,7 @@
             range-separator="至"
             start-placeholder="开始日期"
             end-placeholder="结束日期"
-            :default-time="['00:00:00', '23:45:00']" popper-class="cpp-popper"
+            :default-time="['00:00:00', '23:59:59']" popper-class="cpp-popper"
           />
         </el-form-item>
         <el-form-item label="场站名称">

+ 174 - 61
cpp-ui/src/views/largeScreen/index.vue

@@ -79,58 +79,67 @@
       <el-dialog width="50%" style="top:15%" :visible.sync="outerVisible" :close-on-click-modal="false">
         <div slot="title" class="dialog-title flex justify-between">
           <div>
-            <el-button>全部确认</el-button>
-            <el-button @click="filterInfo(null)">全部告警</el-button>
-            <el-button @click="filterInfo('tunnel')">通道告警</el-button>
-            <el-button @click="filterInfo('report')">上报告警</el-button>
+            <el-button  @click="acknowledgeAll()">全部确认</el-button>
+            <el-button @click="getAbnormalAlarms('')">全部告警</el-button>
+            <el-button @click="getAbnormalAlarms('E1')">通道告警</el-button>
+            <el-button @click="getAbnormalAlarms('E2')">上报告警</el-button>
+            <el-button @click="getAbnormalAlarms('E3')">站端硬件告警</el-button>
+            <el-button @click="getAbnormalAlarms('E4')">中心解析告警</el-button>
+            <el-button @click="getAbnormalAlarms('E5')">通用告警</el-button>
             <el-button @click="innerVisible = true">报警配置</el-button>
           </div>
           <div class="dialog-title-badge flex justify-between">
-            <el-badge :value="badgeValue.alarm">
+            <el-badge :value="this.badgeValue.alarm">
               <img src="../../assets/images/svg/remind.svg" width="20px"/>
             </el-badge>
-            <el-badge :value="badgeValue.confirm">
-              <img src="../../assets/images/svg/right.svg" width="20px"/>
-            </el-badge>
+<!--            <el-badge :value="badgeValue.confirm">-->
+<!--              <img src="../../assets/images/svg/right.svg" width="20px"/>-->
+<!--            </el-badge>-->
           </div>
         </div>
         <div>
           <el-table
-            :data="tableData.slice((this.page.currentPage - 1)*this.page.pageSize,this.page.currentPage * this.page.pageSize)"
+            :data="tableDataAlarm"
             border max-height="300px"
+            v-loading="loadingAlarm"
             style="width: 100%">
             <el-table-column
-              prop="name" align="center"
+              prop="stationCode" align="center"  :formatter="formatStation"
               label="场站名称"
             >
             </el-table-column>
             <el-table-column
-              prop="date" align="center"
-              label="报警时间" :formatter="formatDate"
+              prop="startTime" align="center"
+              label="报警开始时间" :formatter="formatStartDate"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="endTime" align="center"
+              label="报警结束时间" :formatter="formatEndDate"
             >
             </el-table-column>
             <el-table-column
-              prop="describe" align="center"
+              prop="msg" align="center"
               label="报警描述">
             </el-table-column>
             <el-table-column
               prop="operate" align="center"
               label="操作">
-              <template slot-scope="scope">
-                <img src="../../assets/images/svg/remind.svg" width="20px" v-if="scope.row.operate === 1"/>
-                <img src="../../assets/images/svg/right.svg" width="20px" v-if="scope.row.operate === 0"/>
+              <template  v-slot="{ row }">
+                <img src="../../assets/images/svg/remind.svg" @click="acknowledge(row)" width="20px"/>
+<!--                <img src="../../assets/images/svg/right.svg" width="20px"/>-->
               </template>
             </el-table-column>
           </el-table>
           <div class="block">
             <el-pagination
-              @size-change="handleSizeChange"
-              @current-change="handleCurrentChange"
-              :current-page=this.page.currentPage
+              @size-change="handleSizeChangeAlarm"
+              @current-change="handleCurrentChangeAlarm"
+              :current-page=this.alarmPage.currentPage
               :page-sizes="[10, 15, 30, 50]"
-              :page-size=this.page.pageSize
+              :page-size=this.alarmPage.pageSize
               layout="total, sizes, prev, pager, next, jumper"
-              :total=this.page.total>
+              :total=this.alarmPage.total>
             </el-pagination>
           </div>
         </div>
@@ -139,7 +148,7 @@
           title="通道告警"
           :visible.sync="innerVisible"
           append-to-body>
-<!--  TODO 移植v3        -->
+          <!--  TODO 移植v3        -->
 
         </el-dialog>
       </el-dialog>
@@ -161,8 +170,9 @@ export default {
       sysInterval: null,
       outerVisible: false,
       innerVisible: false,
-      tableData:[],
-      tableDataBak:[],
+      tableDataAlarm: [],
+      loadingAlarm:false,
+      tableDataAlarmBak: [],
       digitalDisk: [{
         name: '实际功率',
         num: '13591'
@@ -189,15 +199,23 @@ export default {
         rate: 999
       },
       // 告警统计值
-      badgeValue:{
-        alarm:0,
-        confirm:0
+      badgeValue: {
+        alarm: 0,
+        confirm: 0
       },
       page: {
         total: 0, // 总页数
         currentPage: 1, // 当前页数
         pageSize: 10 // 每页显示多少条
       },
+      alarmPage: {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 10 // 每页显示多少条
+      },
+      stationList:[],
+      alarmType: ''
+
     }
   },
   mounted() {
@@ -215,43 +233,88 @@ export default {
       this.$router.push({path: "/configManager/electricField"})
     },
     openAlarm() {
+      this.alarmPage = {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 10 // 每页显示多少条
+      }
+      this.getAbnormalAlarms("")
       this.outerVisible = true
     },
     init() {
-     this.drawTable()
+      this.getStationCode()
+      this.drawTable()
       this.drawChart()
     },
-    drawTable(){
-      let data = [
-        {name:'xxx',date:1728700191000,describe:'xxxx',operate:1,type:'report'},
-        {name:'xxx',date:1728613791000,describe:'xxxx',operate:1,type:'tunnel'},
-        {name:'xxx',date:1728440991000,describe:'xxxx',operate:1,type:'report'},
-        {name:'xxx',date:1728527391000,describe:'xxxx',operate:1,type:''},
-        {name:'xxx',date:1728354591000,describe:'xxxx',operate:0,type:''}
-      ]
-      this.tableDataBak = data
-      this.tableData = data
-      this.page.total = this.tableData.length
-      this.badgeValue.confirm = this.tableData.filter(w=>w.operate === 0).length
-      this.badgeValue.alarm = this.tableData.filter(w=>w.operate === 1).length
+    async getStationCode() {
+      await this.$axios({url: '/electricfield/all', method: 'get'}).then(response => {
+        this.stationList = response.data
+      })
+    },
+    drawTable() {
+      // let data = [
+      //   {name: 'xxx', date: 1728700191000, describe: 'xxxx', operate: 1, type: 'report'},
+      //   {name: 'xxx', date: 1728613791000, describe: 'xxxx', operate: 1, type: 'tunnel'},
+      //   {name: 'xxx', date: 1728440991000, describe: 'xxxx', operate: 1, type: 'report'},
+      //   {name: 'xxx', date: 1728527391000, describe: 'xxxx', operate: 1, type: ''},
+      //   {name: 'xxx', date: 1728354591000, describe: 'xxxx', operate: 0, type: ''}
+      // ]
+      // this.tableDataAlarmBak = data
+      // this.tableDataAlarm = data
+      // this.page.total = this.tableDataAlarm.length
+      this.getAlarmSize()
+
+      // this.badgeValue.confirm = this.tableDataAlarm.filter(w => w.operate === 0).length
+      // this.badgeValue.alarm = this.tableDataAlarm.filter(w => w.operate === 1).length
+    },
+    getAlarmSize(){
+      this.$axios.get('/abnormalAlarm/alarmCountStatus1').then(response => {
+        this.badgeValue.alarm = response.data
+      }).catch(() => {
+
+      })
+    },
+    getAbnormalAlarms(prop){
+      this.alarmPage = {
+        total: 0, // 总页数
+        currentPage: 1, // 当前页数
+        pageSize: 10 // 每页显示多少条
+      }
+      this.alarmType = prop
+      this.filterInfo()
     },
-    filterInfo(prop){
-      if(prop !== null){
-        this.tableData = this.tableDataBak.filter(w=>w.type === prop)
-      }else{
-        this.tableData = JSON.parse(JSON.stringify(this.tableDataBak))
+    filterInfo() {
+      this.getAlarmSize()
+      this.loadingAlarm = true
+      let queryParams = {
+        currentPage: this.alarmPage.currentPage,
+        pageSize: this.alarmPage.pageSize,
+        alarmType: this.alarmType
       }
+      this.$axios.get('/abnormalAlarm/dashboard', {params: queryParams}).then(response => {
+        this.tableDataAlarm = response.data.records
+        this.alarmPage.total = response.data.total
+        this.loadingAlarm = false
+      }).catch(() => {
+        this.loadingAlarm = false
+      })
+
+      // if (prop !== null) {
+      //   this.tableDataAlarm  = this.tableDataAlarmBak.filter(w => w.type === prop)
+      // } else {
+      //   this.tableDataAlarm = JSON.parse(JSON.stringify(this.tableDataAlarmBak))
+      // }
 
     },
     /*模拟数据*/
-    mockData(num){
+    mockData(num) {
       let data = []
-      for(let i=0;i<=96;i++){
-        data.push(Math.floor(Math.round(Math.random() *10) * num,2))
+      for (let i = 0; i <= 96; i++) {
+        data.push(Math.floor(Math.round(Math.random() * 10) * num, 2))
       }
       return data
     },
-    drawChart(){
+    drawChart() {
       gaugeOption.series[0].data[0].value = 10
       gaugeOption.series[1].data[0].value = 10
       gaugeOption.series[0].max = 39
@@ -270,18 +333,64 @@ export default {
         myChart1.zhChart.resize();
       });
     },
-    formatDate(row){
-      return formatToDateTime(new Date(row.date))
+    formatStartDate(row) {
+      return formatToDateTime(row.startTime)
+    },
+    formatEndDate(row){
+      if(row.endTime){
+        return formatToDateTime(row.startTime)
+      }else {
+        return "未结束"
+      }
     },
-    handleSizeChange(val) {
-      this.page.pageSize = val
-      this.page.currentPage = 1
-      // this.getTableList()
+    formatStation(row) {
+      let name= '未知场站名称'
+      this.stationList.forEach(s=>{
+        if(row.stationCode == s.value){
+          name = s.label
+          return
+        }
+      })
+      return name
+    },
+    handleSizeChangeAlarm(val) {
+      this.alarmPage.pageSize = val
+      this.alarmPage.currentPage = 1
+      this.filterInfo()
 
     },
-    handleCurrentChange(val) {
-      this.page.currentPage = val
-      // this.getTableList()
+    handleCurrentChangeAlarm(val) {
+      this.alarmPage.currentPage = val
+      this.filterInfo()
+    },
+    acknowledgeAll(){
+      this.$confirm('是否确认执行"所有场站告警全部确认"操作?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$axios.get('/abnormalAlarm/acknowledgeAll').then(response => {
+          this.filterInfo()
+          this.$message.info("确认成功!")
+        }).catch(() => {
+          this.loading = false
+        })
+      })
+    },
+    acknowledge(row) {
+      this.$confirm('是否对 【' + this.formatStation(row) + ':' +row.msg + '】进行"确认"操作?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        row.status = 1
+        this.$axios.post('/abnormalAlarm/updateStatus1', row).then(response => {
+          this.$message.info("【" + row.msg + "】 已确认!")
+          this.filterInfo()
+        }).catch(() => {
+          this.loading = false
+        })
+      })
     }
   }
 
@@ -442,15 +551,19 @@ $top-container-height: 8rem;
   background-position: center;
   background-repeat: no-repeat;
 }
-.dialog-title{
+
+.dialog-title {
   width: 90%;
 }
-.dialog-title-badge{
+
+.dialog-title-badge {
   width: 10%;
+
   ::v-deep .el-badge__content.is-fixed {
     top: 10px;
     right: 5px;
   }
+
   ::v-deep .el-badge__content {
     background-color: transparent;
     font-size: 14px;