样式优化

src/styles/view/biz/index.scss

@@ -28,6 +28,11 @@
       align-items: center;
       margin-left: pxToRem(23px);
       height: pxToRem(54.35px);
+
+      .amos-nav-item.amos-nav-item-active:hover {
+        background-color: transparent;
+      } 
+
     }
 
     & > .amos-nav-horizontal > ul {

src/styles/view/biz/situation/situation.scss

@@ -58,13 +58,13 @@
 .class-Situation .daily-duties-left{
   height: 100%;
   .safety-rate-view{
-    background-image: url('../../assets/dailyDuties/leftTop.png');
+    // background-image: url('../../assets/dailyDuties/leftTop.png');
     background-repeat: no-repeat;
     width:pxToRem(412px);
     height:pxToRem(469px);
   }
   .growth-statistics-view{
-    background-image: url('../../assets/dailyDuties/leftBottom.png');
+    // background-image: url('../../assets/dailyDuties/leftBottom.png');
     background-repeat: no-repeat;
     width:pxToRem(411px);
     height:pxToRem(474px);
@@ -115,7 +115,7 @@
     justify-content: center;
   }
   .statistics-view{
-    background-image: url('../../assets/dailyDuties/middleTop.png');
+    // background-image: url('../../assets/dailyDuties/middleTop.png');
     background-repeat: no-repeat;
     width:pxToRem(999px);
     height:pxToRem(615px);
@@ -172,7 +172,7 @@
     }
   }
   .risk-trend-view{
-    background-image: url('../../assets/dailyDuties/middleBottom.png');
+    // background-image: url('../../assets/dailyDuties/middleBottom.png');
     background-repeat: no-repeat;
     width:pxToRem(1002px);
     height:pxToRem(325px);
@@ -198,13 +198,13 @@
 .class-Situation .daily-duties-right{
   height: 100%;
   .risk-failure-view{
-    background-image: url('../../assets/dailyDuties/leftTop.png');
+    // background-image: url('../../assets/dailyDuties/leftTop.png');
     background-repeat: no-repeat;
     width:pxToRem(412px);
     height:pxToRem(469px);
   }
   .recent-statistics-view{
-    background-image: url('../../assets/dailyDuties/rightBottom.png');
+    // background-image: url('../../assets/dailyDuties/rightBottom.png');
     background-repeat: no-repeat;
     width:pxToRem(411px);
     height:pxToRem(474px);

src/styles/view/disaster/index.scss

@@ -24,6 +24,7 @@
 
     .title {
       height: 62px;
+      width: 100%;
       border: 1px solid rgba(245,54,54,1);
       background-color: linear-gradient(180deg,rgba(17,12,48,1) 0%,rgba(0,0,0,0.19) 100%);
       display: flex;
@@ -33,7 +34,7 @@
       position: relative;
 
       .current {
-        width: 107px;
+        width: 28%;
         height: 41px;
         background: rgba(245,54,54,1);
         box-shadow: 0px 0px 10px rgba(225,0,0,0.78);
@@ -41,10 +42,9 @@
       }
 
       .current-name {
-        margin-left: 31px;
+        margin-left: 4%;
         height: 41px;
         line-height: 41px;
-        width: 164px;
         text-align: left;
       }
 
@@ -78,14 +78,14 @@
         }
       }
       .amos-tabs-tabitem {
-        width: 183px;
-        height: 31px;
+        width: 44%;
+        height: 100%;
         .amos-tabs-tabitem-inner:hover {
           background-color: transparent;
         }
         .amos-tabs-tabitem-inner {
-          height: 30px;
-          width: 181px;
+          height: 98%;
+          width: 100%;
           background-image: url('../../../assets/images/title_bg.png');
           background-size: cover;
 
@@ -243,21 +243,21 @@
           .dec {
             padding-left: 16px;
             text-align: left;
-            width: 253px;
-            height: 40px;
+            width: 65%;
+            height: 35px;
             background: rgba(82,237,242,0.05);
             box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
-            line-height: 40px;
+            line-height: 35px;
           }
 
           .deco {
             padding-left: 16px;
             text-align: left;
-            width: 253px;
-            height: 40px;
+            width: 65%;
+            height: 35px;
             background: linear-gradient(90deg,rgba(82,237,242,0.1) 0%,rgba(28,98,100,0.31) 100%);
             box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
-            line-height: 40px;
+            line-height: 35px;
           }
         }
       }

src/styles/view/monitor/homePage.scss

@@ -623,7 +623,7 @@
     margin-top: 10%;
       height: 29.9%;
       width: 100%;
-      background-image: url('/src/assets/homePage/3120.png');
+      // background-image: url('/src/assets/homePage/3120.png');
       background-repeat: no-repeat;
       background-size: 100% 100%;
      -moz-background-size: 100% 100%;
@@ -651,6 +651,10 @@
         width:9%;
         float: right;
         height:14%;
+        color: rgb(89, 240, 251);
+        line-height: 9%;
+        text-align: center;
+        font-size: 22px;
         //border:1px solid rgba(23,186,252,1);
       }
       .AlarmControl_2_2{
@@ -771,7 +775,7 @@
     margin-top: 10%;
     height: 29.9%;
     width: 100%;
-    background-image: url('/src/assets/homePage/3120.png');
+    // background-image: url('/src/assets/homePage/3120.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
    -moz-background-size: 100% 100%;
@@ -799,6 +803,10 @@
       width:9%;
       float: right;
       height:14%;
+      color: rgb(89, 240, 251);
+      line-height: 9%;
+      text-align: center;
+      font-size: 22px;
      // border:1px solid rgba(23,186,252,1);
     }
     .DangerControl_2_2{
@@ -926,7 +934,7 @@
   .RiskControl {
     height: 32.6%;
     width: 100%;  
-    background-image: url('/src/assets/homePage/3119.png');
+    // background-image: url('/src/assets/homePage/3119.png');
     background-repeat: no-repeat;
     background-size: 100% 100%;
    -moz-background-size: 100% 100%;
@@ -955,6 +963,10 @@
         width:9%;
         float: right;
         height:18%;
+        color: rgb(89, 240, 251);
+        line-height: 9%;
+        text-align: center;
+        font-size: 22px;
         //border:1px solid rgba(23,186,252,1);
       }
       .RiskControl_2_2{
@@ -1122,7 +1134,7 @@
     }
 
     .all-safety-content {
-      background-image: url('/src/assets/homePage/ztxf.png');
+      // background-image: url('/src/assets/homePage/ztxf.png');
       background-repeat: no-repeat !important;
       height: 100%;
       width: 100%;
@@ -1247,11 +1259,14 @@
     margin-top: 10%;
     height: 34%;
     width: 100%;
-  
+    .common-card .card-content .card-contain .card-corner {
+      bottom: 12px !important;
+    }
   
 
     .fire-safety-content {
-      background-image: url('/src/assets/homePage/xfsl.png');
+      // background-image: url('/src/assets/homePage/xfsl.png');
+      margin-top: 12px;
       background-repeat: no-repeat !important;
       height: 100%;
       width: 100%;
@@ -1374,7 +1389,9 @@
     margin-top: 10%;
     height: 34%;
     width: 100%;
-   
+    .common-card .card-content .card-contain .card-corner {
+      bottom: 11px !important;
+    }
 
     .strength-safety-font {
       height: 11%;
@@ -1453,7 +1470,7 @@
       }
 
     .strength-safety-content {
-      background-image: url('/src/assets/homePage/xfsl.png');
+      // background-image: url('/src/assets/homePage/xfsl.png');
       background-repeat: no-repeat !important;
       height: 100%;
       width: 100%;

src/view/biz/duty/situation/GrowthStatistics.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {growthData} from './data';
+import CommonCard from '../../../common/commonCard/CommonCard';
+
 class GrowthStatistics extends Component {
   render() {
     return (
       <div className='growth-statistics-view common-margin'>
-        <div className='daily-title  daily-title-content'>告警隐患周增幅统计</div>
+{/*         <div className='daily-title  daily-title-content'>告警隐患周增幅统计</div> */}
+        <CommonCard title="告警隐患周增幅统计">
           <div className='growth-content'>
           <div style={{position:"initial",width:28,height:28,marginTop:-28,marginLeft:358}}
             onClick={this.props.onWarnClick}></div>
@@ -25,6 +28,7 @@ class GrowthStatistics extends Component {
             )
             }
           </div>
+        </CommonCard>
       </div>
     );
   }

src/view/biz/duty/situation/RecentStatistics.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import ReactEcharts from 'amos-viz/lib/echarts';
 import {recentData1,recentData2} from './data';
 import { Button } from 'amos-framework';
+import CommonCard from '../../../common/commonCard/CommonCard';
+
 const ButtonGroup = Button.Group;
 class RecentStatistics extends Component {
   constructor(props) {
@@ -28,7 +30,8 @@ class RecentStatistics extends Component {
     const noselect={backgroundColor:'rgba(12, 133, 177, 0)',color:'#45FEFE' }
     return (
       <div className='recent-statistics-view common-margin'>
-         <div className='daily-title  daily-title-content'>最近 7 日风险统计</div>
+         {/* <div className='daily-title  daily-title-content'>最近 7 日风险统计</div> */}
+         <CommonCard title="最近 7 日风险统计">
           <ButtonGroup className='buttongroup-style' defaultValue="1" onChange={this.handleChange}>
             <Button size='sm' children={<span>告警</span>} className='button-style' value="1" style={(value == '1')?select:noselect} />
             <Button size='sm' children={<span>隐患</span>} className='button-style'  value="2" style={(value == '2')?select:noselect}/>
@@ -38,6 +41,7 @@ class RecentStatistics extends Component {
                 onClick={this.props.onStatisticClick}></div>
             <ReactEcharts option={recentData}  style={{ height: '100%', width: '100%' }} />
           </div>
+         </CommonCard>
       </div>
     );
   }

src/view/biz/duty/situation/RiskFailure.js

@@ -2,11 +2,15 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {riskFailureData} from './data'
 import { OverFlowText } from 'amos-framework';
+import CommonCard from '../../../common/commonCard/CommonCard';
+
+
 class RiskFailure extends Component {
   render() {
     return (
       <div className='risk-failure-view common-margin daily-title'>
-        <div className='daily-title  daily-title-content'>安全风险失效 TOP10</div>
+{/*         <div className='daily-title  daily-title-content'>安全风险失效 TOP10</div> */}
+        <CommonCard title="安全风险失效 TOP10">
           <div className='top-ten-content'>
           <div style={{position:"initial",width:28,height:28,marginTop:-35,marginLeft:352}}
             onClick={this.props.onRiskClick}></div>
@@ -26,6 +30,7 @@ class RiskFailure extends Component {
             )
           }
           </div>
+        </CommonCard>
       </div>
     );
   }

src/view/biz/duty/situation/RiskTrend.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import ReactEcharts from 'amos-viz/lib/echarts';
 import {riskTrendData} from './data'
 import { Button } from 'amos-framework';
+import CommonCard from '../../../common/commonCard/CommonCard';
+
 const ButtonGroup = Button.Group;
 class RiskTrend extends Component {
   constructor(props) {
@@ -21,7 +23,8 @@ class RiskTrend extends Component {
     const noselect={backgroundColor:'rgba(12, 133, 177, 0)',color:'#45FEFE' }
     return (
       <div className='risk-trend-view common-margin'>
-        <div className='daily-title  daily-title-content'>安全风险总体趋势</div>
+        {/* <div className='daily-title  daily-title-content'>安全风险总体趋势</div> */}
+        <CommonCard title="安全风险总体趋势">
           <ButtonGroup className='buttongroup-style' defaultValue="1" onChange={this.handleChange}>
             <Button size='sm' children={<span>总数</span>} className='button-style' value="1" style={(value == '1')?select:noselect} />
             <Button size='sm' children={<span>换流站</span>} className='button-style'  value="2" style={(value == '2')?select:noselect}/>
@@ -29,8 +32,9 @@ class RiskTrend extends Component {
             <Button size='sm' children={<span>治理数</span>} className='button-style'  value="4" style={(value == '4')?select:noselect}/>
           </ButtonGroup>
           <div className='risk-trend-content'>
-           <ReactEcharts option={riskTrendData}  style={{ height: '280px', width: '1100px',left:'-60px'}} />
+            <ReactEcharts option={riskTrendData}  style={{ height: '100%', width: '100%'}} />
           </div>
+        </CommonCard>
       </div>
     );
   }

src/view/biz/duty/situation/SafetyRate.js

@@ -2,14 +2,17 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import {SafetyRateData} from './data';
 import { OverFlowText, Button } from 'amos-framework';
+import CommonCard from '../../../common/commonCard/CommonCard';
+
 class SafetyRate extends Component {
 
   render() {
     return (
       <div className='safety-rate-view common-margin daily-title'>
-        <div className='daily-title-content'>
+{/*         <div className='daily-title-content'>
              安全指数 TOP10
-        </div>
+        </div> */}
+        <CommonCard title="安全指数 TOP10">
           <div className='top-ten-content' style={{position:"initial"}}>
             <div style={{position:"initial",width:28,height:28,marginTop:-36,marginLeft:352}}
             onClick={this.props.onClick}></div>
@@ -29,6 +32,7 @@ class SafetyRate extends Component {
             )
           }
           </div>
+        </CommonCard>
       </div>
     );
   }

src/view/biz/duty/situation/Statistics.js

@@ -6,6 +6,7 @@ import echarts from 'echarts/lib/echarts';
 import 'echarts/map/js/china';
 import geoJson from 'echarts/map/json/china.json';
 import { geoCoordMap, provienceData } from "./geo";
+import CommonCard from '../../../common/commonCard/CommonCard';
 
 export const dmtData = [
   { 'latitude': 30.67, 'longitude': 104.07 },
@@ -341,7 +342,8 @@ class Statistics extends Component {
   render() {
     return (
       <div className='statistics-view common-margin'>
-        <div className='statistics-title  statistics-title-content'>全国</div>
+{/*         <div className='statistics-title  statistics-title-content'>全国</div> */}
+        <CommonCard title="全国" position="center">
           <div className='statistics-banner'>
             <div className='statistics-banner-content'>
               <div className='statistics-banner-item'>
@@ -378,6 +380,7 @@ class Statistics extends Component {
           </div>
           {/* <MapChart option={option123}  style={{ height: '100%', width: '100%' }} /> */}
           <div id="mainMap" style={{ width: '100%', height: '86%' }}></div>
+        </CommonCard>
       </div>
     );
   }

src/view/common/commonCard/CommonCard.js

@@ -13,13 +13,20 @@ class CommonCard extends Component {
     const { title, children, position } = this.props;
     return (
       <div className="common-card">
-        <div className={`card-title ${position === 'center' ? 'center-title' : null}`} >
+        <div className={`card-title ${position === 'center' ? 'center-title' : ''}`} >
           <div className="title-contain">
-            <div className="title-bg">{title}</div>
+            <div className="title-bg">
+              <div className="title-shape">
+                <div className="title-text">{title}</div>
+              </div>
+            </div>
           </div>
         </div>
         <div className="card-content">
+          <div className="card-contain">
             {children}
+            <div className="card-corner" />
+          </div>
         </div>
       </div>
     );

src/view/common/commonCard/index.scss

 .common-card {
-  width: 20vw;
-  height: 40vh; 
-  font-size: 20px;
+  width: 95%;
+  height: 95%; 
 
   .card-title {
     display: flex;
@@ -9,9 +8,9 @@
     .title-contain {
       background: rgba(0,0,0,0.57);
       width:  188px;
+      text-align: center;
 
       .title-bg {
-        margin: 0 auto;
         background-image: url('./images/title_bg.png');
         background-size: cover;
         height: 31px;
@@ -21,20 +20,46 @@
         text-shadow: 0px 0px 4px rgba(9,35,61,1);
         cursor: pointer;
         border: 1px solid rgba(95,255,253,1);
+        border-right: 0;
+        border-top: 0;
         border-bottom: 1px solid rgb(0,0,0);
+        
+        .title-shape {
+          background-color: transparent;
+          border-right: 1px solid rgba(95,255,253,1);
+          border-top: 1px solid rgba(95,255,253,1);
+          transform: skewX(5deg);
+          height: 31px;
+          .title-text {
+            transform: skewX(-5deg);
+            font-size: 18px;
+          }
+        }
       }
     }      
-      
   }
   
   .card-content {
     margin-top: -1px;
-    height: 35vh;
+    height: 100%;
     border: 1px solid rgba(95,255,253,1);
     background: linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%);
-  }
 
+    .card-contain {
+      position: relative;
+      height: 100%;
 
+      .card-corner {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: 12px;
+        height: 12px;
+        border-right: 2px solid rgba(0,255,229,1);
+        border-bottom: 2px solid rgba(0,255,229,1);
+      }
+    }
+  }
 }
 
 .center-title {

src/view/monitor/statistical/AlarmControl.js

 import React, { Component } from 'react';
 import ReactEcharts from 'amos-viz/lib/echarts';
+import CommonCard from '../../common/commonCard/CommonCard';
 
 /**
  * 告警管控
@@ -123,11 +124,12 @@ if(dates){
     
     return (
       <div className="AlarmControl">
-            <div className="AlarmControl_1">
+{/*             <div className="AlarmControl_1">
                <div className="AlarmControl_1_1"><span>告警管控情况</span></div>
-             </div>
+             </div> */}
+             <CommonCard title="告警管控情况">
              <div className="AlarmControl_2">
-             <div className="AlarmControl_2_1" onClick={this.ondetails}> </div>
+             <div className="AlarmControl_2_1" onClick={this.ondetails}>...</div>
              <div className="AlarmControl_2_2">
                <div  className="AlarmControl_2_2_1">
 
@@ -166,6 +168,7 @@ if(dates){
                </div>
              </div>
              </div>
+             </CommonCard>
       </div>
     );
   }

src/view/monitor/statistical/AllSafety.js

 import React, { Component } from 'react';
 import ReactEcharts from 'amos-viz/lib/echarts';
 import echarts from 'echarts/lib/echarts';
+import CommonCard from '../../common/commonCard/CommonCard';
 //import { AllSafetyAction } from './../../../services/centerLevelService';
 
 
@@ -139,7 +140,8 @@ class AllSafety extends Component {
 
 
         <div className="all-safety-content">
-          <div className="all-safety-font">总体消防安全情况</div>
+          {/* <div className="all-safety-font">总体消防安全情况</div> */}
+          <CommonCard title="总体消防安全情况">
             <div className="content-detail">
               <div className="all-safety-left">
                 <ReactEcharts option={this.getOptionsx()} className="div-echars" />
@@ -160,7 +162,7 @@ class AllSafety extends Component {
 
               </div>
             </div>
-
+          </CommonCard>
 
 
         </div>

src/view/monitor/statistical/DangerControl.js

 import React, { Component } from 'react';
 import imgStatic from './../../../consts/imgStatic';
-
+import CommonCard from '../../common/commonCard/CommonCard';
 import ReactEcharts from 'amos-viz/lib/echarts';
 const centerLevelIcon = imgStatic.centerLevelIcon;
 
@@ -124,11 +124,12 @@ export default class DangerControl extends Component {
     const {  yq,sw,zl,jd} = this.state;
    return (
       <div className='DangerControl'>
-              <div className="DangerControl_1">
+{/*               <div className="DangerControl_1">
                <div className="DangerControl_1_1"><span>隐患管控情况</span></div>
-             </div>
+             </div> */}
+             <CommonCard title="隐患管控情况">
              <div className="DangerControl_2">
-             <div className="DangerControl_2_1" onClick={this.ondetails}></div>
+             <div className="DangerControl_2_1" onClick={this.ondetails}>...</div>
              <div className="DangerControl_2_2">
               <div  className="DangerControl_2_2_1">
               <div className="AlarmControl8">
@@ -172,7 +173,7 @@ export default class DangerControl extends Component {
               </div>
              </div>
              </div>
-            
+             </CommonCard>
       </div>
     );
   }

src/view/monitor/statistical/FireSafety.js

 import React, { Component } from 'react';
 import { sessionConsts } from './../../../consts/storageConsts';
 import { browerSupport, consts, Store, LocationParam } from 'amos-tool';
+import CommonCard from '../../common/commonCard/CommonCard';
+
 const lsTool = Store.lsTool;
 
 
@@ -56,8 +58,10 @@ class FireSafety extends Component {
 
     return (
       <div className="FireSafety">
+        <CommonCard title="消防安全管理(累计)">
           <div className="fire-safety-content">
-          <div className="fire-safety-font">消防安全管理(累计)</div>
+            {/* <div className="fire-safety-font">消防安全管理(累计)</div> */}
+            
             <div className="fire-safety-tongji" >
               <div className="content-tongji" onClick={this.onClick}>
                 <div className="left-div">
@@ -112,7 +116,7 @@ class FireSafety extends Component {
             
             {/**分割线 */}
           </div>
-
+        </CommonCard>
       </div>
     );
   }

src/view/monitor/statistical/FireStrength.js

@@ -3,6 +3,8 @@ import { Modal } from 'amos-framework';
 import FireStrengthDetail from'./../firestrength/FireStrengthDetail';
 import { sessionConsts } from './../../../consts/storageConsts';
 import {Store, } from 'amos-tool';
+import CommonCard from '../../common/commonCard/CommonCard';
+
 const lsTool = Store.lsTool;
 /**
  * 消防实力统计
@@ -40,8 +42,9 @@ class FireStrength extends Component {
     return (
       <div className="FireStrength">
         {/* <FireStrengthDetail /> */}
+        <CommonCard title="消防实力情况(累计)">
          <div className="strength-safety-content">
-          <div className="strength-safety-font">消防实力情况(累计)         </div>
+          {/* <div className="strength-safety-font">消防实力情况(累计)         </div> */}
         
          
             {/* <div className="item" style={{marginTop:"0%"}} onClick={this.onClick} >
@@ -112,6 +115,7 @@ class FireStrength extends Component {
           </div>
           
         </div>
+        </CommonCard>
         <Modal
         width={1000}
         height={1000}

src/view/monitor/statistical/RiskControl.js

 import React, { Component } from 'react';
 import ReactEcharts from 'amos-viz/lib/echarts';
+import CommonCard from '../../common/commonCard/CommonCard';
 
 /**
  * 风险管控
@@ -137,11 +138,12 @@ export default class RiskControl extends Component {
     const {  shikong,shoukong,shikongx,shoukongx,yiji,erji,sanji,siji} = this.state;
     return (
       <div className="RiskControl">
-             <div className="RiskControl_1">
+{/*              <div className="RiskControl_1">
                <div className="RiskControl_1_1"><span>风险管控情况</span></div>
-             </div>
+             </div> */}
+             <CommonCard title="风险管控情况">
               <div className="RiskControl_2">
-             <div className="RiskControl_2_1" onClick={this.ondetails}></div>
+              <div className="RiskControl_2_1" onClick={this.ondetails}>...</div>
               <div className="RiskControl_2_2">
                     <div className="RiskControl_2_2_1">
                       
@@ -194,6 +196,7 @@ export default class RiskControl extends Component {
                       <div className="RiskControl_3_1_5"></div>
                   </div>
               </div>
+             </CommonCard>
       </div>
     );
   }