增加当前告警数红色

src/styles/view/biz/financialCityLan/index.scss

@@ -171,7 +171,7 @@
     width: calc(100% - 300px);
     height: 100%;
 
-    
+
 
     .paslogy-content {
       // display: flex;
@@ -211,20 +211,19 @@
         opacity: 1;
         margin-right: 42px;
         opacity:1;
-          
+
       }
   }
 
-      
 
       .net-topo-content {
         height: calc(100% - 42px);
-  
+
         .topology-net {
           canvas {
             outline: none;
           }
-  
+
           .tooltip-content {
             width: 200px;
             background: #345fa6;
@@ -232,22 +231,29 @@
             opacity: 1;
             border-radius: 7px;
             padding: 22px 24px;
-  
+
             .tooltip-item {
               height: 24px;
               line-height: 24px;
               font-size: 13px;
               font-weight: bold;
               color: white;
-  
+
               .item-name {
                 display: inline-block;
               }
-  
+
               .item-value {
                 display: inline-block;
                 padding-left: 10px;
               }
+
+              .item-value-alarm {
+                display: inline-block;
+                padding-left: 10px;
+                text-decoration: underline;
+                color: #ff0000;
+              }
             }
           }
         }
@@ -303,9 +309,9 @@
     }
   }
 
- 
 
-  
 
-  
+
+
+
 }

src/view/bank/financialCityLan/TopologyComponent.js

@@ -118,15 +118,17 @@ class TopologyComponent extends Component {
     return width;
   }
 
+  //设置标题高度
   setTitleHeight = (v) => {
     let titleHeight = (v.indexOf('DMZ') !== -1) ? 40 : 25;
     return titleHeight;
   }
 
+  //设置第一行高度
   setLine1Height = (v) => {
     let str = this.getLine1Text(v);
     if (str){
-      return str;
+      return;
     }
     return 0;
   }
@@ -188,10 +190,17 @@ class TopologyComponent extends Component {
     const { detailData } = this.state;
     return (<div id="toolTipDIV" className="tooltip-content" style={{ position: 'absolute', zIndex: 1000, display: 'none' }}>
       {detailData.map(item => {
-        return (<div key={item.name} className="tooltip-item">
-          <div className="item-name">{item.name}: </div>
-          <div className="item-value">{item.value}</div>
-        </div>);
+        if (item.name === '当前告警数'){
+          return (<div key={item.name} className="tooltip-item">
+            <div className="item-name">{item.name}: </div>
+            <div className="item-value-alarm">{item.value}</div>
+          </div>);
+        } else {
+          return (<div key={item.name} className="tooltip-item">
+            <div className="item-name">{item.name}: </div>
+            <div className="item-value">{item.value}</div>
+          </div>);
+        }
       })}
     </div>);
   }