首页及日常值守样式优化

_mock/apps.js

@@ -42,4 +42,175 @@ export const recommends = () => {
   });
 };
 
+const disasterData = () => {
+  return Mock.mock({
+    'disasterInfo': {
+      'time': '2020-4-9 10:30:34',
+      'area': '极1高端换流阀厅',
+      'part': '#3联络变',
+      'people': '16人',
+      'car': '3辆',
+      'emergency': '有'
+    }
+  });
+};
+
+const deviceData = () => {
+  return Mock.mock({
+    'deviceInfo': [
+      {
+        'title': '#3联络变', 'status': '已停止'
+      },
+      {
+        'title': '#1泡沫炮', 'status': '未启动'
+      },
+      {
+        'title': '#2泡沫炮', 'status': '已启动'
+      }
+    ]
+  });
+};
+
+const contactData = () => {
+  return Mock.mock({
+    'contactInfo': [
+      {
+        'position': '值班长',
+        'name': '王丽泽熙',
+        'phone': '18300021232'
+      },
+      {
+        'position': '值班副长',
+        'name': '王丽泽熙',
+        'phone': '18300022345'
+      },
+      {
+        'position': '值班副长',
+        'name': '王丽泽熙',
+        'phone': '18300023215'
+      }
+    ]
+  });
+};
+
+const detailData = () => {
+  return Mock.mock({
+    'detailInfo': [
+      { 'name': '3#泡沫炮', 'value': '13L/s', 'id': 1 },
+      { 'name': '1#消防水池', 'value': '1300mm', 'id': 2 },
+      { 'name': '2#消防水池', 'value': '1300mm', 'id': 3 },
+      { 'name': '红外火焰探测器', 'value': '50辆', 'id': 4 },
+      { 'name': '消防器材', 'value': '20000件', 'id': 5 },
+      { 'name': '红外火焰探测器', 'value': '50辆',  'id': 6 }
+    ]
+  });
+};
+
+const recordData = () => {
+  return Mock.mock({
+    'disasterRecord': [
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-1', id: 1 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-2', id: 2 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-3', id: 3 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-4', id: 4 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-5', id: 5 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-6', id: 6 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-7', id: 7 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-8', id: 8 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-9', id: 9 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-10', id: 10 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-11', id: 11 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-12', id: 12 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-13', id: 13 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-14', id: 14 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-15', id: 15 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-16', id: 16 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-17', id: 117 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-18', id: 18 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-19', id: 19 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-20', id: 20 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-21', id: 21 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-22', id: 22 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-23', id: 23 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-24', id: 24 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-25', id: 25 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-26', id: 26 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-27', id: 27 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-28', id: 28 }
+    ]
+  });
+};
+
+const planData = () => {
+  return Mock.mock({
+    'planData': [
+      {
+        title: '伊克昭换流站',
+        key: '1',
+        children: [
+          { title: '应急预案-1', key: '1-1' },
+          { title: '应急预案-2', key: '1-2' },
+          { title: '应急预案-3', key: '1-3' },
+          { title: '应急预案-4', key: '1-4' },
+          { title: '应急预案-5', key: '1-5' },
+          { title: '应急预案-6', key: '1-6' },
+          { title: '应急预案-7', key: '1-7' },
+          { title: '应急预案-8', key: '1-8' }
+        ]
+      },
+      {
+        title: '复龙换流站',
+        key: '2',
+        children: [
+          { title: '应急预案-1', key: '2-1' },
+          { title: '应急预案-2', key: '2-2' },
+          { title: '应急预案-3', key: '2-3' },
+          { title: '应急预案-4', key: '2-4' },
+          { title: '应急预案-5', key: '2-5' },
+          { title: '应急预案-6', key: '2-6' },
+          { title: '应急预案-7', key: '2-7' },
+          { title: '应急预案-8', key: '2-8' }
+        ]
+      },
+      {
+        title: '奉贤换流站',
+        key: '3',
+        children: [
+          { title: '应急预案-1', key: '3-1' },
+          { title: '应急预案-2', key: '3-2' },
+          { title: '应急预案-3', key: '3-3' },
+          { title: '应急预案-4', key: '3-4' },
+          { title: '应急预案-5', key: '3-5' },
+          { title: '应急预案-6', key: '3-6' },
+          { title: '应急预案-7', key: '3-7' },
+          { title: '应急预案-8', key: '3-8' }
+        ]
+      },
+      {
+        title: '锦屏换流站',
+        key: '4',
+        children: [
+          { title: '应急预案-1', key: '4-1' },
+          { title: '应急预案-2', key: '4-2' },
+          { title: '应急预案-3', key: '4-3' },
+          { title: '应急预案-4', key: '4-4' },
+          { title: '应急预案-5', key: '4-5' },
+          { title: '应急预案-6', key: '4-6' },
+          { title: '应急预案-7', key: '4-7' },
+          { title: '应急预案-8', key: '4-8' }
+        ]
+      },
+    ]
+  });
+};
+
 // 输出结果
+
+module.exports = {
+  disasterData,
+  deviceData,
+  contactData,
+  detailData,
+  recordData,
+  planData
+};

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

@@ -9,8 +9,23 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
+
+  .content-detail {
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: rgb(89, 240, 251);
+    line-height: 60%;
+    text-align: center;
+    font-size: 22px;
+    width: 28px;
+    height: 28px;
+    background: linear-gradient(180deg,rgba(95,255,253,0.6) 0%,rgba(95,255,253,0.1) 100%);
+    cursor: pointer;
+  }
+
   .common-margin{
-    margin-top: pxToRem(19px);
+    margin-top: pxToRem(29px);
   }
   .daily-title{
     font-size:pxToRem(20px);
@@ -29,6 +44,7 @@
     flex-direction: column;
     justify-content: space-around;
     height: 100%;
+
     .top-ten-item{
       display: flex;
       flex-direction: row;
@@ -61,16 +77,17 @@
     // background-image: url('../../assets/dailyDuties/leftTop.png');
     background-repeat: no-repeat;
     width:pxToRem(412px);
-    height:pxToRem(469px);
+    height:pxToRem(390px);
   }
   .growth-statistics-view{
     // background-image: url('../../assets/dailyDuties/leftBottom.png');
     background-repeat: no-repeat;
     width:pxToRem(411px);
-    height:pxToRem(474px);
+    height:pxToRem(444px);
     .growth-content{
       padding:pxToRem(30px) pxToRem(24px);
       height: 100%;
+
       .growth-item-header{
         font-size: pxToRem(20px);
         color: #52EDF2;
@@ -118,13 +135,14 @@
     // background-image: url('../../assets/dailyDuties/middleTop.png');
     background-repeat: no-repeat;
     width:pxToRem(999px);
-    height:pxToRem(615px);
+    height:pxToRem(533px);
     position: relative;
+
     .statistics-banner{
      position: absolute;
      left:pxToRem(95px);
      right: pxToRem(95px);
-     top:pxToRem(68px);
+     top: 3%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
@@ -175,7 +193,7 @@
     // background-image: url('../../assets/dailyDuties/middleBottom.png');
     background-repeat: no-repeat;
     width:pxToRem(1002px);
-    height:pxToRem(325px);
+    height:pxToRem(289px);
     position: relative;
     .buttongroup-style{
       position: absolute;
@@ -201,13 +219,13 @@
     // background-image: url('../../assets/dailyDuties/leftTop.png');
     background-repeat: no-repeat;
     width:pxToRem(412px);
-    height:pxToRem(469px);
+    height:pxToRem(390px);
   }
   .recent-statistics-view{
     // background-image: url('../../assets/dailyDuties/rightBottom.png');
     background-repeat: no-repeat;
     width:pxToRem(411px);
-    height:pxToRem(474px);
+    height:pxToRem(444px);
     position: relative;
     .buttongroup-style{
       position: absolute;

src/styles/view/disaster/index.scss

@@ -30,7 +30,7 @@
       display: flex;
       align-items: center;
       padding: 0 9px 0 12px;
-      font-size: 20px;
+      font-size: 0.2rem;
       position: relative;
 
       .current {
@@ -64,7 +64,7 @@
       height: 31px;
       font-size: 20px;
       padding: 0;
-      
+
       .amos-tabs-tabitem:nth-of-type(2n) {
         margin-left: 17px;
       }
@@ -78,14 +78,14 @@
         }
       }
       .amos-tabs-tabitem {
-        width: 44%;
-        height: 100%;
+        width: 183px;
+        height: 31px;
         .amos-tabs-tabitem-inner:hover {
           background-color: transparent;
         }
         .amos-tabs-tabitem-inner {
-          height: 98%;
-          width: 100%;
+          height: 30px;
+          width: 181px;
           background-image: url('../../../assets/images/title_bg.png');
           background-size: cover;
 
@@ -94,11 +94,11 @@
             color: white;
           }
         }
-  
+
       }
     }
 
-    
+
     .info:nth-of-type(2) {
       margin-top: 20px;
     }
@@ -126,7 +126,7 @@
           cursor: pointer;
           border-top: 1px solid transparent;
         }
-        
+
       }
 
       .info-titles {
@@ -136,7 +136,7 @@
           width: 188px;
           z-index: 999;
           margin-right: 28px;
-          .title-bg {          
+          .title-bg {
             transform: skewX(2deg);
             background-image: url('../../../assets/images/title_bg.png');
             background-size: cover;
@@ -149,9 +149,9 @@
             color: rgba(255,255,255,1);
             text-shadow: 0px 0px 4px rgba(9,35,61,1);
             border: 1px solid rgba(95,255,253,1);
-            border-bottom: 1px solid rgba(17,12,48,1);            
+            border-bottom: 1px solid rgba(17,12,48,1);
           }
-        }        
+        }
       }
 
       .info-card {
@@ -161,7 +161,7 @@
         background: linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%);
         padding: 27px 26px 29px 41px;
         font-size: 20px;
-        
+
         .contact {
           display: flex;
           align-items: center;
@@ -183,7 +183,7 @@
             text-align: left;
 
             .job {
-              margin: 14px 0 0 15px;             
+              margin: 14px 0 0 15px;
               font-family: Microsoft YaHei;
               font-weight: bold;
               line-height: 26px;
@@ -239,7 +239,7 @@
           align-items: center;
           font-size: 20px;
           margin-bottom: 6px;
-          
+
           .dec {
             padding-left: 16px;
             text-align: left;
@@ -275,7 +275,7 @@
       font-size: 20px;
       padding: 0;
       border-bottom: 0;
-      
+
       .amos-tabs-tabitem-active {
         border: 1px solid rgba(95,255,253,1);
         border-bottom: 1px solid black;
@@ -306,13 +306,13 @@
             color: white;
           }
         }
-  
+
       }
     }
 
     .info-title {
       display: flex;
-      
+
       .title-bg {
         transform: skewX(2deg);
         margin-right: 28px;
@@ -328,7 +328,7 @@
         border-top: 1px solid transparent;
         cursor: pointer;
       }
-      
+
     }
 
     .right-container {
@@ -342,17 +342,17 @@
         //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%);
         opacity: 1;
-  
+
         .slick-list {
           height: 68vh;
         }
-  
+
         .slick-dots {
           height: 110px;
           margin-bottom: -140px;
           background:rgba(82,237,242,0.1);
           box-shadow:0px 3px 6px rgba(0,0,0,0.16);
-  
+
           li {
             button {
               width:188px;
@@ -366,11 +366,11 @@
             background:rgba(0,185,255,0.59);
           }
         }
-  
+
         .history {
           margin: 0 auto;
           padding: 25vh 0;
-  
+
           .desc {
             padding-top: 17px;
             font-size: 35px;
@@ -380,7 +380,7 @@
             color: rgba(89,240,251,1);
           }
         }
-  
+
         .miao_bg {
           background-image: url('../../../assets/images/miao_bg.png');
           background-size: cover;
@@ -396,7 +396,7 @@
           width: 100%;
           background:rgba(82,237,242,0.1);
           box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
-  
+
           .to-left{
             position: absolute;
             left: 0;
@@ -406,7 +406,7 @@
             line-height: 109px;
             cursor: pointer;
           }
-  
+
           .to-right {
             position: absolute;
             right: 0;
@@ -416,7 +416,7 @@
             line-height: 109px;
             cursor: pointer;
           }
-  
+
           .plan {
             background: rgba(82,237,242,0.1);
             padding-top: 19px;
@@ -424,13 +424,13 @@
             height: 110px;
             margin-left: 4px;
             cursor: pointer;
-  
+
             .plan-text {
               margin-top: 9px;
               font-size: 20px;
             }
           }
-  
+
           .three {
             background:rgba(82,237,242,0.1);
             padding-top: 19px;
@@ -438,7 +438,7 @@
             height: 110px;
             margin-left: 4px;
             cursor: pointer;
-  
+
             .plan-text {
               margin-top: 9px;
             }
@@ -566,4 +566,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}

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

@@ -9,8 +9,8 @@ class GrowthStatistics extends Component {
       <div className="growth-statistics-view common-margin">
         {/*         <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>
+          <div className="growth-content" style={{ position: 'relative' }}>
+            <div className="content-detail" onClick={this.props.onWarnClick}>...</div>
             <div className="growth-item growth-item-header">
               <div>日期</div>
               <div>告警/隐患</div>

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

@@ -34,8 +34,8 @@ class RecentStatistics extends Component {
             <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} />
           </ButtonGroup>
-          <div className="recent-statistics-content">
-            <div style={{ position: 'initial', width: 28, height: 28, marginTop: -19, marginLeft: 362 }} onClick={this.props.onStatisticClick}></div>
+          <div className="recent-statistics-content" style={{position: 'relative'}}>
+            <div className="content-detail" onClick={this.props.onStatisticClick}>...</div>
             <ReactEcharts option={recentData} style={{ height: '100%', width: '100%' }} />
           </div>
         </CommonCard>

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

@@ -10,8 +10,8 @@ class RiskFailure extends Component {
       <div className="risk-failure-view common-margin daily-title">
         {/*         <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>
+          <div className="top-ten-content" style={{ position: 'relative' }}>
+            <div className="content-detail" onClick={this.props.onRiskClick}>...</div>
             {riskFailureData.map((item, index) => (
               <div className="top-ten-item" key={index}>
                 <OverFlowText>

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

@@ -7,28 +7,29 @@ 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='safety-rate-view common-margin daily-title'>
+{/*         <div className='daily-title-content'>
              安全指数 TOP10
         </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>
-            {SafetyRateData.map((item, index) => (
-              <div className="top-ten-item" key={index}>
+          <div className='top-ten-content' style={{ position: 'relative' }}>
+            <div className="content-detail"
+            onClick={this.props.onClick}>...</div>
+          {
+            SafetyRateData.map((item,index)=>
+              <div className='top-ten-item' key={index}>
                 <OverFlowText>
                   <p style={{ width: '80px' }}>{item.name}</p>
                 </OverFlowText>
-                <div className="top-ten-item-middle">
-                  <div className="top-ten-item-middlelinear" style={{ height: 8, width: `${item.value}%` }}>
-                    {' '}
-                  </div>
+                <div className='top-ten-item-middle'>
+                  <div className='top-ten-item-middlelinear' style={{height:8,width:`${item.value}%`}}> </div>
                 </div>
-                <div className="top-ten-item-bottom">
+                <div className ='top-ten-item-bottom'>
                   <span>{item.value}</span>
-                </div>
+                  </div>
               </div>
-            ))}
+            )
+          }
           </div>
         </CommonCard>
       </div>

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

@@ -388,7 +388,7 @@ class Statistics extends Component {
             </div>
           </div>
           {/* <MapChart option={option123}  style={{ height: '100%', width: '100%' }} /> */}
-          <div id="mainMap" style={{ width: '100%', height: '86%' }}></div>
+          <div id="mainMap" style={{ width: '90%', height: '86%', margin: '0 auto', paddingTop: '3%' }}></div>
         </CommonCard>
       </div>
     );

src/view/biz/emergency/disaster/index.js

@@ -10,6 +10,7 @@ import SwitchInfo from './SwitchInfo';
 import DisasterContents from './DisasterContents';
 import PaperContents from './PaperContents';
 import ModelContents from './ModelContents';
+import { disasterData, deviceData, contactData, detailData } from '../../../../../_mock/apps';
 
 
 const { TabList, Tab, TabPanel } = Tabs;
@@ -127,6 +128,7 @@ class DisasterSituation extends React.Component {
   }
 
   render() {
+    console.log(disasterData);
     const { flag, switchFlag, disasterInfo = {}, contactInfo = [], deviceInfo = [], deviceData = [], contentSwitch, paperSwitch, modelSwitch } = this.state;
     return (
       <div className="demo">
@@ -204,4 +206,4 @@ class DisasterSituation extends React.Component {
   }
 }
 
-export default DisasterSituation;
\ No newline at end of file
+export default DisasterSituation;