应急指挥及样式优化

_mock/apps.js

+import Mock from 'mockjs';
+
+export const appdatas = () =>{
+  return Mock.mock({
+    'dataList|10-20': [{
+      'key|+1': 1,
+      'text|1': '@ctitle(2, 4)',
+      'count': function() {
+        return this.children.length;
+      },
+      'children|5-10': [{
+        'key': '@id',
+        'title': '@ctitle(3, 5)',
+        'funcIcon|+1': [
+          '/src/assets/funcicon/search.png',
+          '/src/assets/funcicon/text.png',
+          '/src/assets/funcicon/think.png',
+          '/src/assets/funcicon/print.png',
+          '/src/assets/funcicon/calender.png',
+          '/src/assets/funcicon/calc.png'
+        ]
+      }]
+    }]
+  });
+};
+
+export const recommends = () => {
+  return Mock.mock({
+    'dataList|1-6': [{
+      'key': '@id',
+      'title': '@ctitle(3, 5)',
+      'itemPath': '@word(2, 3) / @word(3, 5)',
+      'funcIcon|+1': [
+        '/src/assets/funcicon/search.png',
+        '/src/assets/funcicon/text.png',
+        '/src/assets/funcicon/think.png',
+        '/src/assets/funcicon/print.png',
+        '/src/assets/funcicon/calender.png',
+        '/src/assets/funcicon/calc.png'
+      ]
+    }]
+  });
+};
+
+// 输出结果

_mock/title.js

+import Mock from 'mockjs';
+
+// @title  @ctitle
+// @sentence  @sentence(3, 5)
+// @csentence
+// @cparagraph
+
+export default function accounts(){
+  return Mock.mock('@ctitle');
+}

amos.config.js

@@ -8,7 +8,7 @@
 
     httpURI: {
       //业务系统地址
-      baseURI: 'http://172.16.11.38:8899/',
+      baseURI: 'http://172.16.11.36:10005/',
       //安全平台地址
       securityBaseURI: 'http://172.16.10.72:10005/',
       //基础平台

package.json

@@ -69,7 +69,7 @@
     "amos-pluggable": "^1.0.6",
     "cross-env": "^5.2.0",
     "eslint-config-ray": "^1.0.25",
-    "mockjs": "^1.0.1-beta3",
+    "mockjs": "^1.1.0",
     "stylelint-config-ray": "^2.x",
     "ws": "^4.0.0"
   }

src/consts/image.js

+export default {
+  disasterImg: {
+    d1: require('./../assets/images/3d1.png'),
+    d2: require('./../assets/images/3d2.png'),
+    d3: require('./../assets/images/3d3.png'),
+    empty: require('./../assets/images/empty.png'),
+    gfh: require('./../assets/images/gfh.png'),
+    left: require('./../assets/images/left.png'),
+    middle: require('./../assets/images/middle.png'),
+    right: require('./../assets/images/right.png'),
+    miao: require('./../assets/images/miao.png'),
+    miao_bg: require('./../assets/images/miao_bg.png'),
+    people: require('./../assets/images/people.png'),
+    plays: require('./../assets/images/plays.png'),
+    switchs: require('./../assets/images/switchs.png'),
+    title_bg: require('./../assets/images/title_bg.png'),
+    tu: require('./../assets/images/tu.png'),
+    player: require('./../assets/images/player.png'),
+    stops: require('./../assets/images/stops.png'),
+    scroll_bg: require('./../assets/images/scroll_bg.png')
+  }
+};
\ No newline at end of file

src/consts/urlConsts.js

@@ -18,7 +18,12 @@ export const secBaseUrl = {
 };
 
 export const OltSerUrl = {
-
+  disasterUrl: completePrefix(baseURI,'disaster'), //get
+  deviceUrl: completePrefix(baseURI,'device'), //get
+  contactUrl: completePrefix(baseURI,'contact'), //get
+  detailUrl: completePrefix(baseURI,'detail'), //get
+  recordUrl: completePrefix(baseURI,'record'), //get
+  planUrl: completePrefix(baseURI,'plan') //get
 };
 export const loginURI = endConf.loginURI;
 export const sysName = AmosConfig.sysConf.name;

src/routes/asyncRoutes.js

@@ -36,7 +36,7 @@ const progressStart = () => {
 const rootRoutes = menus => {
   return {
     path: '/',
-    onChange: progressStart,
+    // onChange: progressStart,
     indexRedirect: AsyncLogin,
     indexRoute: {
       component: AsyncLogin,

src/routes/index.js

@@ -4,6 +4,7 @@ import calcRoutes from './calcRoutes';
 import addCustomRoutes, { customRoutes } from './customRoutes';
 import pageCompontent, { RootView,RootBizView,businessRouts } from './view';
 
+
 const groups = [
   'main', 'biz'
 ];
@@ -34,7 +35,7 @@ const progressStart = () => {
 const rootRoutes = menus => {
   return {
     path: '/',
-    onChange: progressStart,
+    // onChange: progressStart,
     indexRoute: {
       onEnter(nextState, replace) {
         window.location.href = loginURI;

src/routes/view.js

@@ -16,6 +16,9 @@ import FireVehicle from './../view/strength/fireVehicle/index';
 import StationFireMan from './../view/strength/stationFireMan/index';
 import StationFireTeam from './../view/strength/stationFireTeam/index';
 import StationDuty from './../view/strength/stationDuty/index';
+import Disaster from './../view/biz/emergency/disaster';
+import History from './../view/biz/emergency/history';
+import EmergencyPlan from './../view/biz/emergency/plan';
 
 const Routes = {
   main: RootView,
@@ -24,6 +27,11 @@ const Routes = {
   situationDetail: SituationDetail,
   regulate: Regulate,
   bills: Bills,
+  //应急指挥
+  emergency: Duty,
+  disaster: Disaster,
+  history: History,
+  plan: EmergencyPlan,
 
   safetyTraining: SafetyTraining,
   dailyTrain: DaliyTraining,
@@ -49,6 +57,9 @@ export const businessRouts = [
   { path: 'stationFireMan',group: 'biz',component: StationFireMan, childRoutes: [] },
   { path: 'stationFireTeam',group: 'biz',component: StationFireTeam, childRoutes: [] },
   { path: 'stationDuty',group: 'biz',component: StationDuty, childRoutes: [] },
+  { path: 'disaster', group: 'biz', component: Disaster, childRoutes: [] },
+  { path: 'history', group: 'biz', component: History, childRoutes: [] },
+  { path: 'plan', group: 'biz', component: EmergencyPlan, childRoutes: [] }
 ];
 const pageCompontent = key => {
   return Routes[key] || EmptyPage;

src/services/disasterApi.js

+import { commonGet } from './../utils/request';
+import UrlConsts from './../consts/urlConsts';
+
+export const getDisasterInfo = () => {
+  return commonGet(UrlConsts.disasterUrl);
+};
+
+export const getDeviceInfo = () => {
+  return commonGet(UrlConsts.deviceUrl);
+};
+
+export const getContectInfo = () => {
+  return commonGet(UrlConsts.contactUrl);
+};
+
+export const getDeviceDetail = () => {
+  return commonGet(UrlConsts.detailUrl);
+};
+
+export const getDisasterRecord = () => {
+  return commonGet(UrlConsts.recordUrl);
+};
+
+export const getPlanData = () => {
+  return commonGet(UrlConsts.planUrl);
+};
\ No newline at end of file

src/styles/view/disaster/history.scss

+.layout {
+  display: flex;
+  justify-content: center;
+  padding: 0 39px;
+    
+  .lefts {
+    flex: 1;
+    height: 85vh;
+    border: 1px solid rgba(95,255,253,1);
+    font-size: 20px;
+    color: white;
+    overflow: hidden;
+
+
+    .left-top {
+      height: 110px;
+      background: rgba(82,237,242,0.1);
+      box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
+      padding-top: 15px;
+
+      .date {
+        width: 95%;
+      }
+      .search {
+        width: 95%;
+        margin-top: 13px;
+      }
+
+      .ant-calendar-picker {
+        width: 30%;
+        margin: 0 4px;
+      }
+
+      .ant-calendar-picker-icon {
+        top: 58%;
+      }
+
+      .ant-calendar-picker-icon:after {
+        color: rgb(89,240,251);
+      }
+
+      .ant-input {
+        background-color: rgba(0,185,255,0.3);
+        border-radius: 6px;
+        font-size: 16px;
+        color: rgba(225,225,225,1);
+        border: 0;
+        line-height: 16px;
+      }
+    }
+
+    .scroll-box {
+      overflow:hidden;
+      
+      .lefts-content {
+        overflow-x: hidden;
+        overflow-y: auto;
+        padding-top: 10px;
+        text-align: left;
+        .items {
+          width: 392px;
+          height: 40px;
+          background: rgba(82,237,242,0.05);
+          box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
+          line-height: 40px;
+          margin: 0 auto;
+          margin-top: 6px;
+          cursor: pointer;
+
+          .items-date {
+            font-size: 16px;
+          }
+        }
+        .items:nth-of-type(2n) {
+          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);
+        }
+      }
+
+       .lefts-content::-webkit-scrollbar {
+        background-image: url('../../../assets/images/scroll_bg.png');
+        background-size: cover;
+        width: 14px;
+      }
+
+      .lefts-content::-webkit-scrollbar-thumb {
+        background-image: url('../../../assets/images/scroll_bar.png');
+      }
+
+    }
+
+
+  }
+    
+  .rights {
+    margin-left: 37px;
+    flex: 3.1;
+    font-size: 20px;
+
+    .info-title {
+      z-index: 999;
+      display: flex;
+      
+      .title-bg {
+        // transform: skewX(2deg);
+        margin-right: 28px;
+        background-image: url('../../../assets/images/title_bg.png');
+        background-size: cover;
+        height: 31px;
+        width: 188px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        line-height: 31px;
+        color: rgba(255,255,255,1);
+        text-shadow: 0px 0px 4px rgba(9,35,61,1);
+        cursor: pointer;
+        border: 1px solid rgba(95,255,253,1);
+        border-bottom: 1px solid rgba(17,12,48,1);
+      }
+      
+    }
+
+    .right-content {
+      position: relative;
+      margin-top: -1px;
+      height: 82vh;
+      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;
+
+      .history {
+        width: 20vw;
+        margin: 30vh auto;
+
+        .desc {
+          padding-top: 17px;
+          font-size: 35px;
+          font-family: Microsoft YaHei UI;
+          font-weight: 400;
+          line-height: 40px;
+          color: rgba(89,240,251,1);
+        }
+      }
+
+      .right-bottom {
+        bottom: 0;
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 110px;
+        width: 100%;
+        background: rgba(82,237,242,0.1);
+        box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
+
+        .plan {
+          background: rgba(82,237,242,0.1);
+          padding-top: 19px;
+          width: 188px;
+          height: 110px;
+          margin-left: 4px;
+          cursor: pointer;
+
+          .plan-text {
+            margin-top: 9px;
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

src/styles/view/disaster/index.scss

+.demo {
+  text-align: center;
+  background-image: url('../../../assets/images/index_bg.png');
+  background-size: cover;
+
+  .bg {
+    background:linear-gradient(180deg,rgba(17,12,48,1) 0%,rgba(0,0,0,0.19) 100%);
+    opacity:1;
+    height: 100vh;
+    width: 100vw;
+    padding-top: 12px;
+    color: white;
+  }
+}
+
+.layout {
+  display: flex;
+  justify-content: center;
+  padding: 0 39px;
+
+  .left {
+    flex: 1;
+    height: 87vh;
+
+    .title {
+      height: 62px;
+      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;
+      align-items: center;
+      padding: 0 9px 0 12px;
+      font-size: 20px;
+      position: relative;
+
+      .current {
+        width: 107px;
+        height: 41px;
+        background: rgba(245,54,54,1);
+        box-shadow: 0px 0px 10px rgba(225,0,0,0.78);
+        line-height: 41px;
+      }
+
+      .current-name {
+        margin-left: 31px;
+        height: 41px;
+        line-height: 41px;
+        width: 164px;
+        text-align: left;
+      }
+
+      .switch {
+        position: absolute;
+        right: 11px;
+        width: 40px;
+        height: 40px;
+        background: rgba(0,0,0,0.57);
+        line-height: 40px;
+        cursor: pointer;
+      }
+    }
+
+    .amos-tabs-list {
+      margin-top: 18px;
+      height: 31px;
+      font-size: 20px;
+      padding: 0;
+      
+      .amos-tabs-tabitem:nth-of-type(2n) {
+        margin-left: 17px;
+      }
+      .amos-tabs-tabitem-active {
+        border: 1px solid rgba(95,255,253,1);
+        border-bottom: 1px solid black;
+        background: rgba(0,0,0,0.57);
+
+        .amos-tabs-tabitem-inner {
+          background-color: transparent !important;
+        }
+      }
+      .amos-tabs-tabitem {
+        width: 183px;
+        height: 31px;
+        .amos-tabs-tabitem-inner:hover {
+          background-color: transparent;
+        }
+        .amos-tabs-tabitem-inner {
+          height: 30px;
+          width: 181px;
+          background-image: url('../../../assets/images/title_bg.png');
+          background-size: cover;
+
+          .amos-tabs-tabitem-content {
+            margin-top: -12px;
+            color: white;
+          }
+        }
+  
+      }
+    }
+
+    
+    .info:nth-of-type(2) {
+      margin-top: 20px;
+    }
+
+
+    .info {
+      height: 36vh;
+      margin-top: -10px;
+      .info-title {
+        display: flex;
+        justify-content: center;
+
+        .title-bg {
+          transform: skewX(2deg);
+          background-image: url('../../../assets/images/title_bg.png');
+          background-size: cover;
+          height: 31px;
+          width: 188px;
+          font-size: 20px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          line-height: 31px;
+          color: rgba(255,255,255,1);
+          text-shadow: 0px 0px 4px rgba(9,35,61,1);
+          cursor: pointer;
+          border-top: 1px solid transparent;
+        }
+        
+      }
+
+      .info-titles {
+        .text-bg {
+          border: 0;
+          background: rgba(0,0,0,0.57);
+          width: 188px;
+          z-index: 999;
+          margin-right: 28px;
+          .title-bg {          
+            transform: skewX(2deg);
+            background-image: url('../../../assets/images/title_bg.png');
+            background-size: cover;
+            height: 31px;
+            width: 188px;
+            font-size: 20px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            line-height: 31px;
+            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);            
+          }
+        }        
+      }
+
+      .info-card {
+        margin-top: -1px;
+        height: 36vh;
+        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%);
+        padding: 27px 26px 29px 41px;
+        font-size: 20px;
+        
+        .contact {
+          display: flex;
+          align-items: center;
+          margin-top: 7px;
+          width: 370px;
+
+          .img_bg {
+            background: rgba(82,237,242,0.05);
+            width: 88px;
+            height: 88px;
+            padding-top: 4px;
+          }
+          .contact-detail {
+            width: 277px;
+            height: 88px;
+            background: rgba(82,237,242,0.1);
+            box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
+            margin-left: 4px;
+            text-align: left;
+
+            .job {
+              margin: 14px 0 0 15px;             
+              font-family: Microsoft YaHei;
+              font-weight: bold;
+              line-height: 26px;
+              color: rgba(89,240,251,1);
+            }
+
+            .name {
+              margin: 9px 0 0 15px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              line-height: 26px;
+              color: rgba(255,255,255,1);
+            }
+          }
+        }
+
+        .device {
+          position: relative;
+          display: flex;
+          align-items: center;
+          height: 40px;
+          width: 370px;
+          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);
+          margin-top: 7px;
+
+          .front {
+            width: 9px;
+            height: 40px;
+            background: rgba(0,185,255,0.59);
+            opacity: 1;
+          }
+
+          .device-name {
+            margin-left: 33px;
+          }
+
+          .device-des {
+            margin-right: 0;
+            position: absolute;
+            right: 28px;
+          }
+
+        }
+        .device:nth-of-type(2n) {
+          background: rgba(82,237,242,0.05);
+          box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
+        }
+
+        .item-detail {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-size: 20px;
+          margin-bottom: 6px;
+          
+          .dec {
+            padding-left: 16px;
+            text-align: left;
+            width: 253px;
+            height: 40px;
+            background: rgba(82,237,242,0.05);
+            box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
+            line-height: 40px;
+          }
+
+          .deco {
+            padding-left: 16px;
+            text-align: left;
+            width: 253px;
+            height: 40px;
+            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;
+          }
+        }
+      }
+    }
+  }
+
+  .right-view {
+    margin-left: 37px;
+    flex: 3.1;
+    font-size: 20px;
+
+    .amos-tabs-list {
+      margin-top: 18px;
+      height: 31px;
+      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;
+        background: rgba(0,0,0,0.57);
+        z-index: 1000;
+
+        .amos-tabs-tabitem-inner {
+          background-color: transparent !important;
+        }
+      }
+
+      .amos-tabs-tabitem {
+        width: 183px;
+        height: 31px;
+        margin-right: 28px;
+
+        .amos-tabs-tabitem-inner:hover {
+          background-color: transparent;
+        }
+        .amos-tabs-tabitem-inner {
+          height: 30px;
+          width: 181px;
+          background-image: url('../../../assets/images/title_bg.png');
+          background-size: cover;
+
+          .amos-tabs-tabitem-content {
+            margin-top: -12px;
+            color: white;
+          }
+        }
+  
+      }
+    }
+
+    .info-title {
+      display: flex;
+      
+      .title-bg {
+        transform: skewX(2deg);
+        margin-right: 28px;
+        background-image: url('../../../assets/images/title_bg.png');
+        background-size: cover;
+        height: 31px;
+        width: 188px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        line-height: 31px;
+        color: rgba(255,255,255,1);
+        text-shadow: 0px 0px 4px rgba(9,35,61,1);
+        border-top: 1px solid transparent;
+        cursor: pointer;
+      }
+      
+    }
+
+    .right-container {
+      border: 1px solid rgba(95,255,253,1);
+      margin-Top: -1px;
+
+      .right-content {
+        position: relative;
+        //margin-top: -1px;
+        height: 82.5vh;
+        //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;
+              height:110px;
+              background:rgba(82,237,242,0.1);
+              box-shadow:0px 3px 6px rgba(0,0,0,0.16);
+              border-radius: 0;
+            }
+          }
+          .slick-active {
+            background:rgba(0,185,255,0.59);
+          }
+        }
+  
+        .history {
+          margin: 0 auto;
+          padding: 25vh 0;
+  
+          .desc {
+            padding-top: 17px;
+            font-size: 35px;
+            font-family: Microsoft YaHei UI;
+            font-weight: 400;
+            line-height: 40px;
+            color: rgba(89,240,251,1);
+          }
+        }
+  
+        .miao_bg {
+          background-image: url('../../../assets/images/miao_bg.png');
+          background-size: cover;
+          height: 66vh;
+        }
+        .right-bottom {
+          bottom: 0;
+          position: absolute;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height:110px;
+          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;
+            width: 60px;
+            height: 109px;
+            background: rgba(82,237,242,0.1);
+            line-height: 109px;
+            cursor: pointer;
+          }
+  
+          .to-right {
+            position: absolute;
+            right: 0;
+            width: 60px;
+            height: 109px;
+            background: rgba(82,237,242,0.1);
+            line-height: 109px;
+            cursor: pointer;
+          }
+  
+          .plan {
+            background: rgba(82,237,242,0.1);
+            padding-top: 19px;
+            width: 188px;
+            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;
+            width: 110px;
+            height: 110px;
+            margin-left: 4px;
+            cursor: pointer;
+  
+            .plan-text {
+              margin-top: 9px;
+            }
+          }
+        }
+      }
+    }
+    .right-content {
+      position: relative;
+      //margin-top: -1px;
+      height: 82.5vh;
+      //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;
+
+      .amos-tabs-panel {
+        position: absolution;
+        height: 82.5vh;
+      }
+
+      .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;
+            height:110px;
+            background:rgba(82,237,242,0.1);
+            box-shadow:0px 3px 6px rgba(0,0,0,0.16);
+            border-radius: 0;
+          }
+        }
+        .slick-active {
+          background:rgba(0,185,255,0.59);
+        }
+      }
+
+      .history {
+        margin: 0 auto;
+        padding: 25vh 0;
+
+        .desc {
+          padding-top: 17px;
+          font-size: 35px;
+          font-family: Microsoft YaHei UI;
+          font-weight: 400;
+          line-height: 40px;
+          color: rgba(89,240,251,1);
+        }
+      }
+
+      .miao_bg {
+        background-image: url('../../../assets/images/miao_bg.png');
+        background-size: cover;
+        height: 66vh;
+      }
+      .right-bottom {
+        bottom: 0;
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height:110px;
+        width: 100%;
+        background:rgba(82,237,242,0.1);
+        box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
+
+        .bg-style {
+          background: rgba(0,185,255,0.59) !important;
+        }
+
+        .to-left{
+          position: absolute;
+          left: 0;
+          width: 60px;
+          height: 109px;
+          background: rgba(82,237,242,0.1);
+          line-height: 109px;
+          cursor: pointer;
+        }
+
+        .to-right {
+          position: absolute;
+          right: 0;
+          width: 60px;
+          height: 109px;
+          background: rgba(82,237,242,0.1);
+          line-height: 109px;
+          cursor: pointer;
+        }
+
+        .plan {
+          background: rgba(82,237,242,0.1);
+          padding-top: 19px;
+          width: 188px;
+          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;
+          width: 110px;
+          height: 110px;
+          margin-left: 4px;
+          cursor: pointer;
+
+          .plan-text {
+            margin-top: 9px;
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

src/styles/view/disaster/plan.scss

+.layout {
+  display: flex;
+  justify-content: center;
+  padding: 0 39px;
+    
+  .lefts {
+    flex: 1;
+    height: 85vh;
+    border: 1px solid rgba(95,255,253,1);
+    font-size: 20px;
+    color: white;
+    overflow: hidden;
+    background: linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%);
+
+
+    .left-top {
+      height: 110px;
+      background: rgba(82,237,242,0.1);
+      box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
+      padding-top: 15px;
+
+      .date {
+        width: 95%;
+      }
+
+      .search {
+        margin-top: 13px;
+        width: 95%;
+        .ant-input-search-icon {
+          color: rgb(82,222,252);
+        }
+      }
+
+      .select-scroll-wrapper {
+        width: 63.5%;
+        margin: 0 4px;        
+      }
+
+      .ant-select{
+        width: 100%;    
+      }
+
+      .ant-select-selection {
+        background-color: rgba(0,185,255,0.3);
+        color: rgba(225,225,225,1);
+        border: 0;
+        font-size: 16px;
+
+        .ant-select-arrow  {
+          color: rgb(82,222,252);
+          right: 12px;
+        }
+      }
+
+      .ant-input {
+        background-color: rgba(0,185,255,0.3);
+        border-radius: 6px;
+        font-size: 16px;
+        color: rgba(225,225,225,1);
+        border: 0;
+        line-height: 16px;
+      }
+    }
+
+    .scroll-box {
+      overflow: hidden;
+
+      
+      .lefts-content {
+        overflow-x: hidden;
+        overflow-y: auto;
+        padding-top: 13px;
+        text-align: left;
+
+        .ant-tree-title {
+          font-size: 20px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;          
+        }
+
+        .ant-tree-node-content-wrapper {
+          color: white;
+        }
+
+        .ant-tree-node-content-wrapper:hover {
+          background: none;
+          
+        }
+
+        .ant-tree-node-selected {
+          background: none;
+          color: yellow;
+        }
+
+        .ant-tree-switcher {
+          background-color: rgb(82,222,252);
+          color: white;
+        }
+      }
+
+       .lefts-content::-webkit-scrollbar {
+        background-image: url('../../../assets/images/scroll_bg.png');
+        background-size: cover;
+        width: 14px;
+      }
+
+      .lefts-content::-webkit-scrollbar-thumb {
+        background-image: url('../../../assets/images/scroll_bar.png');
+      }
+
+    }
+  }
+    
+  .rights {
+    margin-left: 37px;
+    flex: 3.1;
+    font-size: 20px;
+
+    .info-title {
+      z-index: 999;
+      display: flex;
+      
+      .title-bg {
+        // transform: skewX(2deg);
+        margin-right: 28px;
+        background-image: url('../../../assets/images/title_bg.png');
+        background-size: cover;
+        height: 31px;
+        width: 188px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        line-height: 31px;
+        color: rgba(255,255,255,1);
+        text-shadow: 0px 0px 4px rgba(9,35,61,1);
+        cursor: pointer;
+        border: 1px solid rgba(95,255,253,1);
+        border-bottom: 1px solid rgba(17,12,48,1);
+      }
+      
+    }
+
+    .right-content {
+      position: relative;
+      margin-top: -1px;
+      height: 82vh;
+      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;
+
+      .history {
+        width: 20vw;
+        margin: 30vh auto;
+
+        .desc {
+          padding-top: 17px;
+          font-size: 35px;
+          font-family: Microsoft YaHei UI;
+          font-weight: 400;
+          line-height: 40px;
+          color: rgba(89,240,251,1);
+        }
+      }
+
+      .right-bottom {
+        bottom: 0;
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 110px;
+        width: 100%;
+        background: rgba(82,237,242,0.1);
+        box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
+
+        .plan {
+          background: rgba(82,237,242,0.1);
+          padding-top: 19px;
+          width: 188px;
+          height: 110px;
+          margin-left: 4px;
+          cursor: pointer;
+
+          .plan-text {
+            margin-top: 9px;
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

src/styles/view/disaster/toptab.scss

+.demo {
+  text-align: center;
+  background-image: url('../../../assets/images/index_bg.png');
+  background-size: cover;
+
+  .bg {
+    background:linear-gradient(180deg,rgba(17,12,48,1) 0%,rgba(0,0,0,0.19) 100%);
+    opacity:1;
+    height: 100vh;
+    width: 100vw;
+    padding-top: 12px;
+    color: white;
+  }
+}
+
+.toptab {
+  color: white;    
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 42px;
+  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);
+  margin-bottom: 40px;
+  
+  .navs {      
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 42px;
+    margin-left: 20px;
+
+    .navlink-check {
+      background:rgba(82,237,242,0.3);
+      box-shadow:0px 3px 6px rgba(0,0,0,0.16);
+      transform: skewX(-20deg);
+    }
+    .navlink {
+      width: 176px;
+      text-align: center;
+
+      a {
+        text-decoration: none;
+      }
+
+      .link {
+        font-size: 25px;
+        color: #00CACE;
+        border-bottom: 2px solid transparent;
+        text-align: center;
+        margin: 0 36px;
+      }
+    
+      .link:hover {
+        color: #F7FF00;
+        border-bottom: 2px solid #F7FF00;
+      }
+
+      .link-check {
+        color: #F7FF00;
+        border-bottom: 2px solid #F7FF00;
+        transform: skewX(20deg);
+      }
+    }
+  }
+
+  .time {
+    width: 400px;
+    padding-right: 42px;
+    line-height: 42px;
+    font-size: 20px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: rgba(0,202,206,1);
+    -webkit-text-stroke: 1 rgba(0,0,0,0.00);
+    opacity: 1;
+  }
+}
\ No newline at end of file

src/styles/view/fixed/header.scss

@@ -73,6 +73,12 @@
       margin-left: pxToRem(-32.24px);
       background: url('/src/assets/logo/nav.png') no-repeat;
       background-size: 100% 100%;
+      .amos-nav-horizontal .amos-nav-item.amos-nav-item-active {
+        transition-duration: 0s !important;
+      }
+      .amos-nav-horizontal .amos-nav-item:hover {
+        transition-duration: 0s !important;
+      }
       .amos-nav-horizontal .amos-nav-item:hover > a::after,
       .amos-nav-horizontal .amos-nav-item.amos-nav-item-active > a::after {
         background: none;

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

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * 左侧设备信息组件
+ *
+ * @class DisasterInfo
+ * @extends {Component}
+ */
+
+class DeviceInfos extends Component {
+
+  render() {
+    const { deviceData = [] } = this.props;
+    return (
+      <div className="info-card">
+        <div className="info-item">
+          {
+            deviceData.map((item, index) =>
+              (<div className="item-detail" key={index}>
+                <div>{(item || {}).title}</div> <div className={index % 2 === 1 ? 'deco' : 'dec'}>{item.status}</div>
+              </div>)
+            )
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+DeviceInfos.propTypes = {
+  deviceData: PropTypes.array
+};
+
+export default DeviceInfos;
\ No newline at end of file

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

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import staticImg from './../../../../consts/image';
+
+/**
+ * 灾情内容切换组件
+ *
+ * @class DisasterContents
+ * @extends {Component}
+ */
+
+class DisasterContents extends Component {
+
+  render() {
+    const { contentSwitch, handleChange } = this.props;
+    const ImgView = (props) => {
+      return (
+        <div style={{ margin: 18, height: '66vh' }}>
+          <img src={props.imgSrc} alt="" width='100%' height='100%' />
+        </div>
+      );
+    };
+
+    const ImgSwitch = (props) => {
+      return (
+        <div className={`plan ${props.contentSwitch === props.flag ? 'bg-style' : null}`} onClick={() => props.handleChange(props.flag)}>
+          <img src={props.imgSrc} alt="" height='40' width='40' />
+          <div className="plan-text">{props.text}</div>
+        </div>
+      );
+    };
+    console.log(contentSwitch);
+
+    return (
+      <div>
+        {
+          contentSwitch === 0 ? <ImgView imgSrc={staticImg.disasterImg.people} /> : null
+        }
+        {
+          contentSwitch === 1 ? <ImgView imgSrc={staticImg.disasterImg.miao} /> : null
+        }
+        {
+          contentSwitch === 2 ?
+            <div className="history">
+              <div> <img src={staticImg.disasterImg.plays} alt="" width='110' height='110' /> </div>
+              <div className="desc">预案播放完毕记录已保存</div>
+            </div> : null
+        }
+        <div className="right-bottom">
+          <ImgSwitch contentSwitch={contentSwitch} imgSrc={staticImg.disasterImg.right} text='获取预案' handleChange={handleChange} flag={0} />
+          <ImgSwitch contentSwitch={contentSwitch} imgSrc={staticImg.disasterImg.left} text='关闭预案' handleChange={handleChange} flag={1} />
+          <ImgSwitch contentSwitch={contentSwitch} imgSrc={staticImg.disasterImg.middle} text='录制预案' handleChange={handleChange} flag={2} />
+        </div>
+      </div>
+    );
+  }
+}
+
+DisasterContents.propTypes = {
+  contentSwitch: PropTypes.number,
+  handleChange: PropTypes.func
+};
+
+export default DisasterContents;
\ No newline at end of file

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

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * 左侧灾情信息组件
+ *
+ * @class DisasterInfo
+ * @extends {Component}
+ */
+
+class DisasterInfos extends Component {
+
+
+  render() {
+    const { disasterInfo = {} } = this.props;
+    const DisasterDetail = (props) => {
+      return (
+        <div className="item-detail">
+          <div>{props.title}</div> <div className={props.class}>{props.disasterInfo}</div>
+        </div>
+      );
+    };
+    return (
+      <div className="info-card">
+        <div className="info-item">
+          <DisasterDetail title='发生时间' disasterInfo={disasterInfo.time} class='dec' />
+          <DisasterDetail title='着火区域' disasterInfo={disasterInfo.area} class='deco' />
+          <DisasterDetail title='着火部分' disasterInfo={disasterInfo.part} class='dec' />
+          <DisasterDetail title='救援人员' disasterInfo={disasterInfo.people} class='deco' />
+          <DisasterDetail title='救援车辆' disasterInfo={disasterInfo.car} class='dec' />
+          <DisasterDetail title='应急预案' disasterInfo={disasterInfo.emergency} class='deco' />
+        </div>
+      </div>
+    );
+  }
+}
+
+DisasterInfos.propTypes = {
+  disasterInfo: PropTypes.object
+};
+
+export default DisasterInfos;
\ No newline at end of file

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

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import staticImg from './../../../../consts/image';
+
+/**
+ * 图纸内容切换组件
+ *
+ * @class ModelContents
+ * @extends {Component}
+ */
+
+class ModelContents extends Component {
+
+  render() {
+    const { modelSwitch, handleChangeModel } = this.props;
+    const ImgView = (props) => {
+      return (
+        <div style={{ margin: 18, height: '66vh' }}>
+          <img src={props.imgSrc} alt="" width='100%' height='100%' />
+        </div>
+      );
+    };
+
+    const ImgSwitch = (props) => {
+      return (
+        <div className={`three ${props.modelSwitch === props.flag ? 'bg-style' : null}`} onClick={() => props.handleChange(props.flag)}>
+          <img src={props.imgSrc} alt="" height='40' width='40' />
+          <div className="plan-text">{props.text}</div>
+        </div>
+      );
+    };
+    console.log(modelSwitch);
+
+    return (
+      <div>
+        {
+          modelSwitch === 0 ? <ImgView imgSrc={staticImg.disasterImg.miao} /> : null
+        }
+        {
+          modelSwitch === 1 ? <ImgView imgSrc={staticImg.disasterImg.tu} /> : null
+        }
+        {
+          modelSwitch === 2 ? <ImgView imgSrc={staticImg.disasterImg.people} /> : null
+        }
+        <div className="right-bottom">
+          <ImgSwitch modelSwitch={modelSwitch} imgSrc={staticImg.disasterImg.d1} text='实体' handleChange={handleChangeModel} flag={0} />
+          <ImgSwitch modelSwitch={modelSwitch} imgSrc={staticImg.disasterImg.d2} text='线框' handleChange={handleChangeModel} flag={1} />
+          <ImgSwitch modelSwitch={modelSwitch} imgSrc={staticImg.disasterImg.d3} text='透明' handleChange={handleChangeModel} flag={2} />
+        </div>
+      </div>
+    );
+  }
+}
+
+ModelContents.propTypes = {
+  modelSwitch: PropTypes.number,
+  handleChangeModel: PropTypes.func
+};
+
+export default ModelContents;
\ No newline at end of file

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

+import React, { Component } from 'react';
+import staticImg from './../../../../consts/image';
+
+/**
+ * 无灾情页面组件
+ *
+ * @class DisasterInfo
+ * @extends {Component}
+ */
+
+class NoDisaster extends Component {
+  render() {
+    return (
+      <div>
+        <div className="history">
+          <div> <img src={staticImg.disasterImg.empty} alt="" /> </div>
+          <div className="desc">暂无火灾</div>
+        </div>
+        <div className="right-bottom">
+          <div className="plan" style={{ background: 'rgba(0,185,255,0.59)' }}>
+            <img src={staticImg.disasterImg.right} alt="" height='40' width='40' />
+            <div className="plan-text">获取预案</div>
+          </div>
+          <div className="plan">
+            <img src={staticImg.disasterImg.left} alt="" height='40' width='40' />
+            <div className="plan-text">关闭预案</div>
+          </div>
+          <div className="plan">
+            <img src={staticImg.disasterImg.middle} alt="" height='40' width='40' />
+            <div className="plan-text">录制预案</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default NoDisaster;
\ No newline at end of file

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

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from 'amos-framework';
+import staticImg from './../../../../consts/image';
+
+
+/**
+ * 图纸内容切换组件
+ *
+ * @class PaperContents
+ * @extends {Component}
+ */
+
+class PaperContents extends Component {
+
+  render() {
+    const { paperSwitch, handleChangePaper, handleToLeft, handleToRight } = this.props;
+    const ImgView = (props) => {
+      return (
+        <div style={{ margin: 18, height: '66vh' }}>
+          <img src={props.imgSrc} alt="" width='100%' height='100%' />
+        </div>
+      );
+    };
+
+    const ImgSwitch = (props) => {
+      return (
+        <div className={`plan ${props.paperSwitch === props.flag ? 'bg-style' : null}`} onClick={() => props.handleChange(props.flag)}>
+          <img src={props.imgSrc} alt="" height='65' width='118' />
+        </div>
+      );
+    };
+    console.log(paperSwitch);
+
+    return (
+      <div>
+        {
+          paperSwitch === 0 ? <ImgView imgSrc={staticImg.disasterImg.tu} /> : null
+        }
+        {
+          paperSwitch === 1 ? <ImgView imgSrc={staticImg.disasterImg.miao} /> : null
+        }
+        {
+          paperSwitch === 2 ? <ImgView imgSrc={staticImg.disasterImg.people} /> : null
+        }
+        <div className="right-bottom">
+          <div className="to-left" onClick={() => handleToLeft(paperSwitch)}>
+            <Icon icon="left" style={{ fontSize: 40, color: 'rgba(82,222,252)', fontWeight: 'bolder' }} />
+          </div>
+          <ImgSwitch paperSwitch={paperSwitch} imgSrc={staticImg.disasterImg.tu}  handleChange={handleChangePaper} flag={0} />
+          <ImgSwitch paperSwitch={paperSwitch} imgSrc={staticImg.disasterImg.tu}  handleChange={handleChangePaper} flag={1} />
+          <ImgSwitch paperSwitch={paperSwitch} imgSrc={staticImg.disasterImg.tu}  handleChange={handleChangePaper} flag={2} />
+          <div className="to-right" onClick={() => handleToRight(paperSwitch)}>
+            <Icon icon="right" style={{ fontSize: 40, color: 'rgba(82,222,252)', fontWeight: 'bolder' }} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+PaperContents.propTypes = {
+  paperSwitch: PropTypes.number,
+  handleChangePaper: PropTypes.func,
+  handleToLeft: PropTypes.func,
+  handleToRight: PropTypes.func
+};
+
+export default PaperContents;
\ No newline at end of file

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

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import staticImg from './../../../../consts/image';
+
+/**
+ * 左侧设备信息组件
+ *
+ * @class SwitchInfo
+ * @extends {Component}
+ */
+
+class SwitchInfo extends Component {
+
+  render() {
+    const { flag, switchFlag, contactInfo, deviceInfo } = this.props;
+    return (
+      <div>
+        <div className="info-titles">
+          <div className="text-bg">
+            <div className="title-bg">
+              {flag ? '现场联系人' : '消防设备信息'}
+            </div>
+          </div>
+        </div>
+        <div className="info-card">
+          {switchFlag ? <div>
+            {
+              flag ?
+                <div className="contacts">
+                  {contactInfo.map((item) => {
+                    return (
+                      <div className="contact" key={item.phone}>
+                        <div className="img_bg"><img src={staticImg.disasterImg.gfh} alt="" weight="80" height="80" /></div>
+                        <div className="contact-detail">
+                          <div className="job">{item.position}</div>
+                          <div className="name">{item.name}  {item.phone}</div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+                :
+                <div>
+                  {deviceInfo.map((item,index) => {
+                    return (
+                      <div className="device" key={item.id}>
+                        <div className="front" />
+                        <div className="device-name">{item.name}</div>
+                        <div className="device-des">{item.value}</div>
+                      </div>
+                    );
+                  })}
+                </div>
+            }
+          </div> :
+          <div className="contacts">
+            {contactInfo.map((item, index) => {
+              return (
+                <div className="contact" key={item.phone}>
+                  <div className="img_bg" />
+                  <div className="contact-detail">
+                    <div className="job" />
+                    <div className="name" />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+SwitchInfo.propTypes = {
+  flag: PropTypes.bool,
+  switchFlag: PropTypes.bool,
+  contactInfo: PropTypes.array,
+  deviceInfo: PropTypes.array
+};
+
+export default SwitchInfo;
\ No newline at end of file

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

+import React from 'react';
+import { Tabs } from 'amos-framework';
+import './../../../../styles/view/disaster/index.scss';
+import staticImg from './../../../../consts/image';
+import { getDisasterInfo, getDeviceInfo, getContectInfo, getDeviceDetail } from '../../../../services/disasterApi';
+import NoDisaster from './NoDisaster';
+import DisasterInfos from './DisasterInfos';
+import DeviceInfos from './DeviceInfos';
+import SwitchInfo from './SwitchInfo';
+import DisasterContents from './DisasterContents';
+import PaperContents from './PaperContents';
+import ModelContents from './ModelContents';
+
+
+const { TabList, Tab, TabPanel } = Tabs;
+
+/**
+ * 灾情实况组件主界面
+ *
+ * @class DisasterSituation
+ * @extends {Component}
+ */
+
+class DisasterSituation extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      // 控制左侧菜单切换
+      flag: true,
+      switchFlag: true,
+      // 灾情信息数据
+      disasterInfo: {},
+      // 联系人数据
+      contactInfo: [],
+      // 设备数据
+      deviceInfo: [],
+      deviceData: [],
+      contentSwitch: 0,
+      paperSwitch: 0,
+      modelSwitch: 0
+    };
+  }
+
+  componentDidMount() {
+    this.fetchDisasterData();
+    this.fetchContactData();
+    this.fetchDeviceData();
+    this.fetchDeviceDetailData();
+  }
+
+  fetchDisasterData = () => {
+    getDisasterInfo().then(res => {
+      console.log(res);
+      this.setState({ disasterInfo: res });
+    }).catch((err) => {
+      console.log('请求失败');
+    });
+  }
+
+  fetchDeviceData = () => {
+    getDeviceInfo().then(res => {
+      console.log(res);
+      this.setState({ deviceData: res.deviceInfo });
+    });
+  }
+
+  fetchContactData = () => {
+    getContectInfo().then(res => {
+      console.log(res);
+      this.setState({ contactInfo: res.contactInfo });
+    });
+  }
+
+  fetchDeviceDetailData = () => {
+    getDeviceDetail().then(res => {
+      console.log(res);
+      this.setState({ deviceInfo: res.detailInfo });
+    });
+  }
+
+  selectDisaster = () => {
+    this.setState({ flag: true });
+  }
+
+  selectDevice = () => {
+    this.setState({ flag: false });
+  }
+
+  handleSwitch = () => {
+    this.setState({
+      switchFlag: !this.state.switchFlag,
+      flag: true,
+      disasterInfo: {},
+      deviceData: []
+    }, () => {
+      if (this.state.switchFlag) {
+        this.fetchDisasterData();
+        this.fetchContactData();
+        this.fetchDeviceData();
+        this.fetchDeviceDetailData();
+      }
+    });
+  }
+
+  handleChange = (flag) => {
+    this.setState({ contentSwitch: flag });
+  }
+
+  handleChangePaper = (flag) => {
+    this.setState({ paperSwitch: flag });
+  }
+
+  handleChangeModel = (flag) => {
+    this.setState({ modelSwitch: flag });
+  }
+
+  handleToLeft = (flag) => {
+    flag = flag - 1;
+    if ( flag < 0 ) { flag = 2; }
+    this.setState({ paperSwitch: flag });
+  }
+
+  handleToRight = (flag) => {
+    flag = flag + 1;
+    if ( flag > 2 ) { flag = 0; }
+    this.setState({ paperSwitch: flag });
+  }
+
+  render() {
+    const { flag, switchFlag, disasterInfo = {}, contactInfo = [], deviceInfo = [], deviceData = [], contentSwitch, paperSwitch, modelSwitch } = this.state;
+    return (
+      <div className="demo">
+        <div className="bg">
+          <div className="layout">
+            <div className="left">
+              <div className="title">
+                <div className="current">当前灾情</div>
+                <div className="current-name">{switchFlag ? '伊克昭换流站火灾' : '暂无火灾'}</div>
+                <div className="switch" onClick={this.handleSwitch}>
+                  <img src={staticImg.disasterImg.switchs} alt="" width='40' height='40' />
+                </div>
+              </div>
+              <Tabs closeAnimate>
+                <TabList style={{ border: 'none' }}>
+                  <Tab onClick={this.selectDisaster}>灾情信息</Tab>
+                  <Tab onClick={this.selectDevice}>设备信息</Tab>
+                </TabList>
+                <div className="info">
+                  <TabPanel>
+                    <DisasterInfos disasterInfo={disasterInfo} />
+                  </TabPanel>
+                  <TabPanel>
+                    <DeviceInfos deviceData={deviceData} />
+                  </TabPanel>
+                </div>
+                <div className="info">
+                  <SwitchInfo
+                    flag={flag}
+                    switchFlag={switchFlag}
+                    contactInfo={contactInfo}
+                    deviceInfo={deviceInfo}
+                  />
+                </div>
+              </Tabs>
+            </div>
+            <div className="right-view">
+              <Tabs closeAnimate>
+                <TabList>
+                  <Tab>灾情信息</Tab>
+                  <Tab>图纸集合</Tab>
+                  {!flag ? <Tab>沙盘模型</Tab> : null}
+                  <Tab>视频会商</Tab>
+                  <Tab>现场视频</Tab>
+                </TabList>
+                <div className="right-container">
+                  <div className="right-content">
+                    {switchFlag ?
+                      <div>
+                        <TabPanel>
+                          <DisasterContents contentSwitch={contentSwitch} handleChange={this.handleChange} />
+                        </TabPanel>
+                        <TabPanel>
+                          <PaperContents
+                            paperSwitch={paperSwitch}
+                            handleChangePaper={this.handleChangePaper}
+                            handleToLeft={this.handleToLeft}
+                            handleToRight={this.handleToRight}
+                          />
+                        </TabPanel>
+                        <TabPanel>
+                          {!flag ? <ModelContents modelSwitch={modelSwitch} handleChangeModel={this.handleChangeModel} /> : null}
+                        </TabPanel>
+                      </div> :
+                      <NoDisaster />
+                    }
+                  </div>
+                </div>
+              </Tabs>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default DisasterSituation;
\ No newline at end of file

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

+import React from 'react';
+import { DatePicker, Input } from 'amos-antd';
+import { Icon } from 'amos-framework';
+import '../../../../styles/view/disaster/history.scss';
+import staticImg from './../../../../consts/image';
+import { getDisasterRecord } from '../../../../services/disasterApi';
+
+const Search = Input.Search;
+
+
+/**
+ * 历史灾情组件
+ *
+ * @class HistoricalDisaster
+ * @extends {Component}
+ */
+
+class HistoricalDisaster extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      stratTime: '',
+      endTime: '',
+      id: 0,
+      disasterRecord: []
+    };
+  }
+
+  componentDidMount() {
+    this.fetchDisasterRecordData();
+  }
+
+
+  getStartDate = (d) => {
+    console.log(d);
+    this.setState({ stratTime: d });
+  }
+
+  getEndDate = (d) => {
+    console.log(d);
+    this.setState({ endTime: d });
+  }
+
+  fetchDisasterRecordData = () => {
+    getDisasterRecord().then(res => {
+      console.log(res);
+      this.setState({ disasterRecord: res.disasterRecord });
+    });
+  }
+
+  handleSearch = (value) => {
+    const { stratTime, endTime } = this.state;
+    const payload = {
+      stratTime,
+      endTime,
+      keyword: value
+    };
+    console.log(payload);
+  }
+
+
+  render() {
+    const { id, disasterRecord = [] } = this.state;
+
+    return (
+      <div className="demo">
+        <div className="bg">
+          <div className="layout">
+            <div className="lefts">
+              <div className="left-top">
+                <div className="date">
+                  <span>日期：</span>
+                  <DatePicker format="YYYY-MM-DD" placeholder='年-月-日' onChange={(d) => this.getStartDate(d)} />
+                  -
+                  <DatePicker format="YYYY-MM-DD" placeholder='年-月-日' onChange={(d) => this.getEndDate(d)} />
+                </div>
+                <div className="search">
+                  <span>搜索：</span>
+                  <Search
+                    placeholder=""
+                    style={{ width: '63.5%', margin: '0 4px' }}
+                    onSearch={value => this.handleSearch(value)}
+                  />
+                </div>
+              </div>
+              <div className="scroll-box">
+                <div style={{ height: '72vh' }} className="lefts-content">
+                  {disasterRecord.map((item) => {
+                    return (
+                      <div key={item.id} className="items" onClick={() => this.setState({ id: item.id })}>
+                        <Icon icon="video-camera" style={{ fontSize: 20,color: '#59F0FB',marginLeft: 9 }} /> { item.name }
+                        <span className="items-date"> {`(${item.date})`}</span>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+            <div className="rights">
+              <div className="info-title">
+                <div style={{ background: 'rgba(0,0,0,0.57)', width: 188, zIndex: 999 }}>
+                  <div className="title-bg">{id !== 0 ? '预案播放' : '预案同步'}</div>
+                </div>
+              </div>
+              <div className="right-content">
+                {id === 0 ?
+                  <div className="history">
+                    <div> <img src={staticImg.disasterImg.empty} alt="" /> </div>
+                    <div className="desc">请选择历史灾情</div>
+                  </div>
+                    :
+                  <div style={{ margin: 18, height: '66vh' }}>
+                    <img src={staticImg.disasterImg.people} alt="" width='100%' height='100%' />
+                  </div>}
+
+                <div className="right-bottom">
+                  <div className="plan" style={{ background: 'rgba(0,185,255,0.59)' }}>
+                    <img src={staticImg.disasterImg.player} alt="" height='40' width='40' />
+                    <div className="plan-text">播放</div>
+                  </div>
+                  <div className="plan">
+                    <img src={staticImg.disasterImg.stops} alt="" height='40' width='40' />
+                    <div className="plan-text">暂停</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default HistoricalDisaster;
\ No newline at end of file

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

+import React from 'react';
+import { Select, Input, Tree } from 'amos-antd';
+import '../../../../styles/view/disaster/plan.scss';
+import staticImg from './../../../../consts/image';
+import { getPlanData } from '../../../../services/disasterApi';
+
+const Search = Input.Search;
+const Option = Select.Option;
+const TreeNode = Tree.TreeNode;
+
+/**
+ * 应急预案组件
+ *
+ * @class ContingencyPlan
+ * @extends {Component}
+ */
+
+
+class ContingencyPlan extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      type: '',
+      id: 0,
+      treeData: []
+    };
+  }
+
+  componentDidMount() {
+    this.fetchPlanData();
+  }
+
+  onSelect = (selectedKeys, info) => {
+    console.log('selected', selectedKeys, info);
+    this.setState({ id: selectedKeys[0] });
+  };
+
+  handleChange = (value) => {
+    console.log(`selected ${value}`);
+    this.setState({ type: value });
+  }
+
+  handleSearch = (value) => {
+    const { type } = this.state;
+    const payload = {
+      type,
+      keyword: value
+    };
+    console.log(payload);
+  }
+
+  fetchPlanData = () => {
+    getPlanData().then(res => {
+      console.log(res);
+      this.setState({ treeData: res.planData });
+    });
+  }
+
+  renderTreeNodes = (data) => {
+    return data.map((item) => {
+      if (item.children) {
+        return (
+          <TreeNode selectable={false} title={item.title} key={item.key}>
+            {this.renderTreeNodes(item.children)}
+          </TreeNode>
+        );
+      }
+      return <TreeNode title={item.title} key={item.key} />;
+    });
+  }
+
+  render() {
+    const { id, treeData = [] } = this.state;
+    return (
+      <div className="demo">
+        <div className="bg">
+          <div className="layout">
+            <div className="lefts">
+              <div className="left-top">
+                <div className="date">
+                  <span>类型：</span>
+                  <Select defaultValue="1"  onChange={this.handleChange}>
+                    <Option value="1">应急预案</Option>
+                    <Option value="lucy">Lucy</Option>
+                    <Option value="disabled">Disabled</Option>
+                    <Option value="Yiminghe">yiminghe</Option>
+                  </Select>
+                </div>
+                <div className="search">
+                  <span>搜索：</span>
+                  <Search
+                    placeholder=""
+                    style={{ width: '63.5%', margin: '0 4px' }}
+                    onSearch={value => this.handleSearch(value)}
+                  />
+                </div>
+              </div>
+              <div className="scroll-box">
+                <div style={{ height: '680px', margin: '27px 0 0 31px' }} className="lefts-content">
+                  <Tree showLine showIcon onSelect={this.onSelect}>
+                    {this.renderTreeNodes(treeData)}
+                  </Tree>
+                </div>
+              </div>
+            </div>
+            <div className="rights">
+              <div className="info-title">
+                <div style={{ background: 'rgba(0,0,0,0.57)', width: 188, zIndex: 999 }}>
+                  <div className="title-bg">{id !== 0 ? '预案播放' : '预案同步'}</div>
+                </div>
+              </div>
+              <div className="right-content">
+                {id === 0 ?
+                  <div className="history">
+                    <div> <img src={staticImg.disasterImg.empty} alt="" /> </div>
+                    <div className="desc">请选择一个预案</div>
+                  </div>
+                    :
+                  <div style={{ margin: 18, height: '66vh' }}>
+                    <img src={staticImg.disasterImg.people} alt="" width='100%' height='100%' />
+                  </div>}
+                <div className="right-bottom">
+                  <div className="plan" style={{ background: 'rgba(0,185,255,0.59)' }}>
+                    <img src={staticImg.disasterImg.player} alt="" height='40' width='40' />
+                    <div className="plan-text">播放</div>
+                  </div>
+                  <div className="plan">
+                    <img src={staticImg.disasterImg.stops} alt="" height='40' width='40' />
+                    <div className="plan-text">暂停</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ContingencyPlan;
\ No newline at end of file

src/view/common/commonCard/CommonCard.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import './index.scss';
+
+
+class CommonCard extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+
+  render() {
+    const { title, children, position } = this.props;
+    return (
+      <div className="common-card">
+        <div className={`card-title ${position === 'center' ? 'center-title' : null}`} >
+          <div className="title-contain">
+            <div className="title-bg">{title}</div>
+          </div>
+        </div>
+        <div className="card-content">
+          {children}
+        </div>
+      </div>
+    );
+  }
+}
+
+CommonCard.propTypes = {
+  title: PropTypes.string,
+  position: PropTypes.string,
+  children: PropTypes.node
+};
+
+export default CommonCard;
\ No newline at end of file

src/view/common/commonCard/index.scss

+.common-card {
+  width: 20vw;
+  height: 40vh; 
+  font-size: 20px;
+
+  .card-title {
+    display: flex;
+
+    .title-contain {
+      background: rgba(0,0,0,0.57);
+      width: 188px;
+
+      .title-bg {
+        margin: 0 auto;
+        background-image: url('./images/title_bg.png');
+        background-size: cover;
+        height: 31px;
+        width: 188px;
+        line-height: 31px;
+        color: rgba(255,255,255,1);
+        text-shadow: 0px 0px 4px rgba(9,35,61,1);
+        cursor: pointer;
+        border: 1px solid rgba(95,255,253,1);
+        border-bottom: 1px solid rgb(0,0,0);
+      }
+    }
+      
+    }
+  
+  .card-content {
+    margin-top: -1px;
+    height: 35vh;
+    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%);
+  }
+
+  
+}
+
+.center-title {
+  display: flex;
+  justify-content: center;
+}

src/view/common/page/CurrentTime.js

+import React, { Component } from 'react';
+import moment from 'moment';
+
+const timeSpan = 1000;
+const today = ['日', '一', '二', '三', '四', '五', '六'];
+
+class CurrentTime extends Component {
+  state = {
+    time: ''
+  }
+
+  componentDidMount() {
+    this.timer = setInterval(()=>{
+      const time = `${moment().format('YYYY-MM-DD HH:mm:ss')} 星期${today[moment().day()]}  [西安]`;
+      this.setState({ time });
+    }, timeSpan);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timer);
+  }
+
+  render() {
+    return (
+      <div className="time">{this.state.time}</div>
+    );
+  }
+}
+
+export default CurrentTime;
\ No newline at end of file

src/view/common/page/TopTab.js

+import React, { Component } from 'react';
+import { Link } from 'amos-react-router';
+import PropTypes from 'prop-types';
+import CurrentTime from './CurrentTime';
+import '../../../styles/view/disaster/toptab.scss';
+
+
+class TopTab extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      bgFlag: ''
+    };
+
+  }
+
+  handleChecked = (flag) => {
+    this.setState({ bgFlag: flag });
+  }
+
+  render() {
+    const { bgFlag } = this.state;
+    const NavTab = (props) => {
+      return (
+        <div
+          className={`navlink ${props.bgFlag === props.flag ? 'navlink-check' : ''}`}
+        >
+          <Link to={props.link} onClick={() => props.handleChecked(props.flag)}>
+            <div className={`link ${props.bgFlag === props.flag ? 'link-check' : ''}`}>{props.text}</div>
+          </Link>
+        </div>
+      );
+    };
+    return (
+      <div className="demo">
+        <div className="bg">
+          <div className="toptab">
+            <div className="navs">
+              <NavTab bgFlag={bgFlag} link='/view/disaster' flag={0} text='灾情实况' handleChecked={this.handleChecked} />
+              <NavTab bgFlag={bgFlag} link='/view/history' flag={1} text='历史灾情' handleChecked={this.handleChecked} />
+              <NavTab bgFlag={bgFlag} link='/view/plan' flag={2} text='应急预案' handleChecked={this.handleChecked} />
+            </div>
+            <CurrentTime />
+          </div>
+          <div>{this.props.children}</div>
+        </div>
+      </div>
+    );
+  }
+}
+
+TopTab.propTypes = {
+  children: PropTypes.node
+};
+
+export default TopTab;
\ No newline at end of file

src/view/contingencyPlan/index.jsx

+import React from 'react';
+import { Select, Input, Tree } from 'amos-antd';
+import '../../styles/view/disaster/plan.scss';
+import staticImg from './../../consts/image';
+import { getPlanData } from '../../services/disasterApi';
+
+const Search = Input.Search;
+const Option = Select.Option;
+const TreeNode = Tree.TreeNode;
+
+/**
+ * 应急预案组件
+ *
+ * @class ContingencyPlan
+ * @extends {Component}
+ */
+
+
+class ContingencyPlan extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      type: '',
+      id: 0,
+      treeData: []
+    };
+  }
+
+  componentDidMount() {
+    this.fetchPlanData();
+  }
+
+  onSelect = (selectedKeys, info) => {
+    console.log('selected', selectedKeys, info);
+    this.setState({ id: selectedKeys[0] });
+  };
+
+  handleChange = (value) => {
+    console.log(`selected ${value}`);
+    this.setState({ type: value });
+  }
+
+  handleSearch = (value) => {
+    const { type } = this.state;
+    const payload = {
+      type,
+      keyword: value
+    };
+    console.log(payload);
+  }
+
+  fetchPlanData = () => {
+    getPlanData().then(res => {
+      console.log(res);
+      this.setState({ treeData: res.planData });
+    });
+  }
+
+  renderTreeNodes = (data) => {
+    return data.map((item) => {
+      if (item.children) {
+        return (
+          <TreeNode selectable={false} title={item.title} key={item.key}>
+            {this.renderTreeNodes(item.children)}
+          </TreeNode>
+        );
+      }
+      return <TreeNode title={item.title} key={item.key} />;
+    });
+  }
+
+  render() {
+    const { id, treeData = [] } = this.state;
+    return (
+      <div>
+        <div className="layout">
+          <div className="lefts">
+            <div className="left-top">
+              <div className="date">
+                <span>类型：</span>
+                <Select defaultValue="1"  onChange={this.handleChange}>
+                  <Option value="1">应急预案</Option>
+                  <Option value="lucy">Lucy</Option>
+                  <Option value="disabled">Disabled</Option>
+                  <Option value="Yiminghe">yiminghe</Option>
+                </Select>
+              </div>
+              <div className="search">
+                <span>搜索：</span>
+                <Search
+                  placeholder=""
+                  style={{ width: '63.5%', margin: '0 4px' }}
+                  onSearch={value => this.handleSearch(value)}
+                />
+              </div>
+            </div>
+            <div className="scroll-box">
+              <div style={{ height: '680px', margin: '27px 0 0 31px' }} className="lefts-content">
+                <Tree showLine showIcon onSelect={this.onSelect}>
+                  {this.renderTreeNodes(treeData)}
+                </Tree>
+              </div>
+            </div>
+          </div>
+          <div className="rights">
+            <div className="info-title">
+              <div style={{ background: 'rgba(0,0,0,0.57)', width: 188, zIndex: 999 }}>
+                <div className="title-bg">{id !== 0 ? '预案播放' : '预案同步'}</div>
+              </div>
+            </div>
+            <div className="right-content">
+              {id === 0 ?
+                <div className="history">
+                  <div> <img src={staticImg.disasterImg.empty} alt="" /> </div>
+                  <div className="desc">请选择一个预案</div>
+                </div>
+                :
+                <div style={{ margin: 18, height: '66vh' }}>
+                  <img src={staticImg.disasterImg.people} alt="" width='100%' height='100%' />
+                </div>}
+              <div className="right-bottom">
+                <div className="plan" style={{ background: 'rgba(0,185,255,0.59)' }}>
+                  <img src={staticImg.disasterImg.player} alt="" height='40' width='40' />
+                  <div className="plan-text">播放</div>
+                </div>
+                <div className="plan">
+                  <img src={staticImg.disasterImg.stops} alt="" height='40' width='40' />
+                  <div className="plan-text">暂停</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ContingencyPlan;
\ No newline at end of file

src/view/disasterSituation/DeviceInfos.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * 左侧设备信息组件
+ *
+ * @class DisasterInfo
+ * @extends {Component}
+ */
+
+class DeviceInfos extends Component {
+
+  render() {
+    const { deviceData = [] } = this.props;
+    return (
+      <div className="info-card">
+        <div className="info-item">
+          {
+            deviceData.map((item, index) =>
+              (<div className="item-detail" key={index}>
+                <div>{(item || {}).title}</div> <div className={index % 2 === 1 ? 'deco' : 'dec'}>{item.status}</div>
+              </div>)
+            )
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+DeviceInfos.propTypes = {
+  deviceData: PropTypes.array
+};
+
+export default DeviceInfos;
\ No newline at end of file

src/view/disasterSituation/DisasterContents.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import staticImg from './../../consts/image';
+
+/**
+ * 灾情内容切换组件
+ *
+ * @class DisasterContents
+ * @extends {Component}
+ */
+
+class DisasterContents extends Component {
+
+  render() {
+    const { contentSwitch, handleChange } = this.props;
+    const ImgView = (props) => {
+      return (
+        <div style={{ margin: 18, height: '66vh' }}>
+          <img src={props.imgSrc} alt="" width='100%' height='100%' />
+        </div>
+      );
+    };
+
+    const ImgSwitch = (props) => {
+      return (
+        <div className={`plan ${props.contentSwitch === props.flag ? 'bg-style' : null}`} onClick={() => props.handleChange(props.flag)}>
+          <img src={props.imgSrc} alt="" height='40' width='40' />
+          <div className="plan-text">{props.text}</div>
+        </div>
+      );
+    };
+    console.log(contentSwitch);
+
+    return (
+      <div>
+        {
+          contentSwitch === 0 ? <ImgView imgSrc={staticImg.disasterImg.people} /> : null
+        }
+        {
+          contentSwitch === 1 ? <ImgView imgSrc={staticImg.disasterImg.miao} /> : null
+        }
+        {
+          contentSwitch === 2 ?
+            <div className="history">
+              <div> <img src={staticImg.disasterImg.plays} alt="" width='110' height='110' /> </div>
+              <div className="desc">预案播放完毕记录已保存</div>
+            </div> : null
+        }
+        <div className="right-bottom">
+          <ImgSwitch contentSwitch={contentSwitch} imgSrc={staticImg.disasterImg.right} text='获取预案' handleChange={handleChange} flag={0} />
+          <ImgSwitch contentSwitch={contentSwitch} imgSrc={staticImg.disasterImg.left} text='关闭预案' handleChange={handleChange} flag={1} />
+          <ImgSwitch contentSwitch={contentSwitch} imgSrc={staticImg.disasterImg.middle} text='录制预案' handleChange={handleChange} flag={2} />
+        </div>
+      </div>
+    );
+  }
+}
+
+DisasterContents.propTypes = {
+  contentSwitch: PropTypes.number,
+  handleChange: PropTypes.func
+};
+
+export default DisasterContents;
\ No newline at end of file

src/view/disasterSituation/DisasterInfos.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * 左侧灾情信息组件
+ *
+ * @class DisasterInfo
+ * @extends {Component}
+ */
+
+class DisasterInfos extends Component {
+
+
+  render() {
+    const { disasterInfo = {} } = this.props;
+    const DisasterDetail = (props) => {
+      return (
+        <div className="item-detail">
+          <div>{props.title}</div> <div className={props.class}>{props.disasterInfo}</div>
+        </div>
+      );
+    };
+    return (
+      <div className="info-card">
+        <div className="info-item">
+          <DisasterDetail title='发生时间' disasterInfo={disasterInfo.time} class='dec' />
+          <DisasterDetail title='着火区域' disasterInfo={disasterInfo.area} class='deco' />
+          <DisasterDetail title='着火部分' disasterInfo={disasterInfo.part} class='dec' />
+          <DisasterDetail title='救援人员' disasterInfo={disasterInfo.people} class='deco' />
+          <DisasterDetail title='救援车辆' disasterInfo={disasterInfo.car} class='dec' />
+          <DisasterDetail title='应急预案' disasterInfo={disasterInfo.emergency} class='deco' />
+        </div>
+      </div>
+    );
+  }
+}
+
+DisasterInfos.propTypes = {
+  disasterInfo: PropTypes.object
+};
+
+export default DisasterInfos;
\ No newline at end of file

src/view/disasterSituation/ModelContents.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import staticImg from './../../consts/image';
+
+/**
+ * 图纸内容切换组件
+ *
+ * @class ModelContents
+ * @extends {Component}
+ */
+
+class ModelContents extends Component {
+
+  render() {
+    const { modelSwitch, handleChangeModel } = this.props;
+    const ImgView = (props) => {
+      return (
+        <div style={{ margin: 18, height: '66vh' }}>
+          <img src={props.imgSrc} alt="" width='100%' height='100%' />
+        </div>
+      );
+    };
+
+    const ImgSwitch = (props) => {
+      return (
+        <div className={`three ${props.modelSwitch === props.flag ? 'bg-style' : null}`} onClick={() => props.handleChange(props.flag)}>
+          <img src={props.imgSrc} alt="" height='40' width='40' />
+          <div className="plan-text">{props.text}</div>
+        </div>
+      );
+    };
+    console.log(modelSwitch);
+
+    return (
+      <div>
+        {
+          modelSwitch === 0 ? <ImgView imgSrc={staticImg.disasterImg.miao} /> : null
+        }
+        {
+          modelSwitch === 1 ? <ImgView imgSrc={staticImg.disasterImg.tu} /> : null
+        }
+        {
+          modelSwitch === 2 ? <ImgView imgSrc={staticImg.disasterImg.people} /> : null
+        }
+        <div className="right-bottom">
+          <ImgSwitch modelSwitch={modelSwitch} imgSrc={staticImg.disasterImg.d1} text='实体' handleChange={handleChangeModel} flag={0} />
+          <ImgSwitch modelSwitch={modelSwitch} imgSrc={staticImg.disasterImg.d2} text='线框' handleChange={handleChangeModel} flag={1} />
+          <ImgSwitch modelSwitch={modelSwitch} imgSrc={staticImg.disasterImg.d3} text='透明' handleChange={handleChangeModel} flag={2} />
+        </div>
+      </div>
+    );
+  }
+}
+
+ModelContents.propTypes = {
+  modelSwitch: PropTypes.number,
+  handleChangeModel: PropTypes.func
+};
+
+export default ModelContents;
\ No newline at end of file

src/view/disasterSituation/NoDisaster.js

+import React, { Component } from 'react';
+import staticImg from './../../consts/image';
+
+/**
+ * 无灾情页面组件
+ *
+ * @class DisasterInfo
+ * @extends {Component}
+ */
+
+class NoDisaster extends Component {
+  render() {
+    return (
+      <div>
+        <div className="history">
+          <div> <img src={staticImg.disasterImg.empty} alt="" /> </div>
+          <div className="desc">暂无火灾</div>
+        </div>
+        <div className="right-bottom">
+          <div className="plan" style={{ background: 'rgba(0,185,255,0.59)' }}>
+            <img src={staticImg.disasterImg.right} alt="" height='40' width='40' />
+            <div className="plan-text">获取预案</div>
+          </div>
+          <div className="plan">
+            <img src={staticImg.disasterImg.left} alt="" height='40' width='40' />
+            <div className="plan-text">关闭预案</div>
+          </div>
+          <div className="plan">
+            <img src={staticImg.disasterImg.middle} alt="" height='40' width='40' />
+            <div className="plan-text">录制预案</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default NoDisaster;
\ No newline at end of file

src/view/disasterSituation/PaperContents.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from 'amos-framework';
+import staticImg from './../../consts/image';
+
+
+/**
+ * 图纸内容切换组件
+ *
+ * @class PaperContents
+ * @extends {Component}
+ */
+
+class PaperContents extends Component {
+
+  render() {
+    const { paperSwitch, handleChangePaper, handleToLeft, handleToRight } = this.props;
+    const ImgView = (props) => {
+      return (
+        <div style={{ margin: 18, height: '66vh' }}>
+          <img src={props.imgSrc} alt="" width='100%' height='100%' />
+        </div>
+      );
+    };
+
+    const ImgSwitch = (props) => {
+      return (
+        <div className={`plan ${props.paperSwitch === props.flag ? 'bg-style' : null}`} onClick={() => props.handleChange(props.flag)}>
+          <img src={props.imgSrc} alt="" height='65' width='118' />
+        </div>
+      );
+    };
+    console.log(paperSwitch);
+
+    return (
+      <div>
+        {
+          paperSwitch === 0 ? <ImgView imgSrc={staticImg.disasterImg.tu} /> : null
+        }
+        {
+          paperSwitch === 1 ? <ImgView imgSrc={staticImg.disasterImg.miao} /> : null
+        }
+        {
+          paperSwitch === 2 ? <ImgView imgSrc={staticImg.disasterImg.people} /> : null
+        }
+        <div className="right-bottom">
+          <div className="to-left" onClick={() => handleToLeft(paperSwitch)}>
+            <Icon icon="left" style={{ fontSize: 40, color: 'rgba(82,222,252)', fontWeight: 'bolder' }} />
+          </div>
+          <ImgSwitch paperSwitch={paperSwitch} imgSrc={staticImg.disasterImg.tu}  handleChange={handleChangePaper} flag={0} />
+          <ImgSwitch paperSwitch={paperSwitch} imgSrc={staticImg.disasterImg.tu}  handleChange={handleChangePaper} flag={1} />
+          <ImgSwitch paperSwitch={paperSwitch} imgSrc={staticImg.disasterImg.tu}  handleChange={handleChangePaper} flag={2} />
+          <div className="to-right" onClick={() => handleToRight(paperSwitch)}>
+            <Icon icon="right" style={{ fontSize: 40, color: 'rgba(82,222,252)', fontWeight: 'bolder' }} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+PaperContents.propTypes = {
+  paperSwitch: PropTypes.number,
+  handleChangePaper: PropTypes.func,
+  handleToLeft: PropTypes.func,
+  handleToRight: PropTypes.func
+};
+
+export default PaperContents;
\ No newline at end of file

src/view/disasterSituation/SwitchInfo.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import staticImg from './../../consts/image';
+
+/**
+ * 左侧设备信息组件
+ *
+ * @class SwitchInfo
+ * @extends {Component}
+ */
+
+class SwitchInfo extends Component {
+
+  render() {
+    const { flag, switchFlag, contactInfo, deviceInfo } = this.props;
+    return (
+      <div>
+        <div className="info-titles">
+          <div className="text-bg">
+            <div className="title-bg">
+              {flag ? '现场联系人' : '消防设备信息'}
+            </div>
+          </div>
+        </div>
+        <div className="info-card">
+          {switchFlag ? <div>
+            {
+              flag ?
+                <div className="contacts">
+                  {contactInfo.map((item) => {
+                    return (
+                      <div className="contact" key={item.phone}>
+                        <div className="img_bg"><img src={staticImg.disasterImg.gfh} alt="" weight="80" height="80" /></div>
+                        <div className="contact-detail">
+                          <div className="job">{item.position}</div>
+                          <div className="name">{item.name}  {item.phone}</div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+                :
+                <div>
+                  {deviceInfo.map((item,index) => {
+                    return (
+                      <div className="device" key={item.id}>
+                        <div className="front" />
+                        <div className="device-name">{item.name}</div>
+                        <div className="device-des">{item.value}</div>
+                      </div>
+                    );
+                  })}
+                </div>
+            }
+          </div> :
+          <div className="contacts">
+            {contactInfo.map((item, index) => {
+              return (
+                <div className="contact" key={item.phone}>
+                  <div className="img_bg" />
+                  <div className="contact-detail">
+                    <div className="job" />
+                    <div className="name" />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+SwitchInfo.propTypes = {
+  flag: PropTypes.bool,
+  switchFlag: PropTypes.bool,
+  contactInfo: PropTypes.array,
+  deviceInfo: PropTypes.array
+};
+
+export default SwitchInfo;
\ No newline at end of file

src/view/disasterSituation/index.js

+import React from 'react';
+import { Tabs } from 'amos-framework';
+import './../../styles/view/disaster/index.scss';
+import staticImg from './../../consts/image';
+import { getDisasterInfo, getDeviceInfo, getContectInfo, getDeviceDetail } from '../../services/disasterApi';
+import NoDisaster from './NoDisaster';
+import DisasterInfos from './DisasterInfos';
+import DeviceInfos from './DeviceInfos';
+import SwitchInfo from './SwitchInfo';
+import DisasterContents from './DisasterContents';
+import PaperContents from './PaperContents';
+import ModelContents from './ModelContents';
+
+
+const { TabList, Tab, TabPanel } = Tabs;
+
+/**
+ * 灾情实况组件主界面
+ *
+ * @class DisasterSituation
+ * @extends {Component}
+ */
+
+class DisasterSituation extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      // 控制左侧菜单切换
+      flag: true,
+      switchFlag: true,
+      // 灾情信息数据
+      disasterInfo: {},
+      // 联系人数据
+      contactInfo: [],
+      // 设备数据
+      deviceInfo: [],
+      deviceData: [],
+      contentSwitch: 0,
+      paperSwitch: 0,
+      modelSwitch: 0
+    };
+  }
+
+  componentDidMount() {
+    this.fetchDisasterData();
+    this.fetchContactData();
+    this.fetchDeviceData();
+    this.fetchDeviceDetailData();
+  }
+
+  fetchDisasterData = () => {
+    getDisasterInfo().then(res => {
+      console.log(res);
+      this.setState({ disasterInfo: res });
+    }).catch((err) => {
+      console.log('请求失败');
+    });
+  }
+
+  fetchDeviceData = () => {
+    getDeviceInfo().then(res => {
+      console.log(res);
+      this.setState({ deviceData: res.deviceInfo });
+    });
+  }
+
+  fetchContactData = () => {
+    getContectInfo().then(res => {
+      console.log(res);
+      this.setState({ contactInfo: res.contactInfo });
+    });
+  }
+
+  fetchDeviceDetailData = () => {
+    getDeviceDetail().then(res => {
+      console.log(res);
+      this.setState({ deviceInfo: res.detailInfo });
+    });
+  }
+
+  selectDisaster = () => {
+    this.setState({ flag: true });
+  }
+
+  selectDevice = () => {
+    this.setState({ flag: false });
+  }
+
+  handleSwitch = () => {
+    this.setState({
+      switchFlag: !this.state.switchFlag,
+      flag: true,
+      disasterInfo: {},
+      deviceData: []
+    }, () => {
+      if (this.state.switchFlag) {
+        this.fetchDisasterData();
+        this.fetchContactData();
+        this.fetchDeviceData();
+        this.fetchDeviceDetailData();
+      }
+    });
+  }
+
+  handleChange = (flag) => {
+    this.setState({ contentSwitch: flag });
+  }
+
+  handleChangePaper = (flag) => {
+    this.setState({ paperSwitch: flag });
+  }
+
+  handleChangeModel = (flag) => {
+    this.setState({ modelSwitch: flag });
+  }
+
+  handleToLeft = (flag) => {
+    flag = flag - 1;
+    if ( flag < 0 ) { flag = 2; }
+    this.setState({ paperSwitch: flag });
+  }
+
+  handleToRight = (flag) => {
+    flag = flag + 1;
+    if ( flag > 2 ) { flag = 0; }
+    this.setState({ paperSwitch: flag });
+  }
+
+  render() {
+    const { flag, switchFlag, disasterInfo = {}, contactInfo = [], deviceInfo = [], deviceData = [], contentSwitch, paperSwitch, modelSwitch } = this.state;
+    return (
+      <div>
+        <div className="layout">
+          <div className="left">
+            <div className="title">
+              <div className="current">当前灾情</div>
+              <div className="current-name">{switchFlag ? '伊克昭换流站火灾' : '暂无火灾'}</div>
+              <div className="switch" onClick={this.handleSwitch}>
+                <img src={staticImg.disasterImg.switchs} alt="" width='40' height='40' />
+              </div>
+            </div>
+            <Tabs closeAnimate>
+              <TabList style={{ border: 'none' }}>
+                <Tab onClick={this.selectDisaster}>灾情信息</Tab>
+                <Tab onClick={this.selectDevice}>设备信息</Tab>
+              </TabList>
+              <div className="info">
+                <TabPanel>
+                  <DisasterInfos disasterInfo={disasterInfo} />
+                </TabPanel>
+                <TabPanel>
+                  <DeviceInfos deviceData={deviceData} />
+                </TabPanel>
+              </div>
+              <div className="info">
+                <SwitchInfo
+                  flag={flag}
+                  switchFlag={switchFlag}
+                  contactInfo={contactInfo}
+                  deviceInfo={deviceInfo}
+                />
+              </div>
+            </Tabs>
+          </div>
+          <div className="right-view">
+            <Tabs closeAnimate>
+              <TabList>
+                <Tab>灾情信息</Tab>
+                <Tab>图纸集合</Tab>
+                {!flag ? <Tab>沙盘模型</Tab> : null}
+                <Tab>视频会商</Tab>
+                <Tab>现场视频</Tab>
+              </TabList>
+              <div className="right-container">
+                <div className="right-content">
+                  {switchFlag ?
+                    <div>
+                      <TabPanel>
+                        <DisasterContents contentSwitch={contentSwitch} handleChange={this.handleChange} />
+                      </TabPanel>
+                      <TabPanel>
+                        <PaperContents
+                          paperSwitch={paperSwitch}
+                          handleChangePaper={this.handleChangePaper}
+                          handleToLeft={this.handleToLeft}
+                          handleToRight={this.handleToRight}
+                        />
+                      </TabPanel>
+                      <TabPanel>
+                        {!flag ? <ModelContents modelSwitch={modelSwitch} handleChangeModel={this.handleChangeModel} /> : null}
+                      </TabPanel>
+                    </div> :
+                    <NoDisaster />
+                  }
+                </div>
+              </div>
+            </Tabs>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default DisasterSituation;
\ No newline at end of file

src/view/historicalDisaster/index.jsx

+import React from 'react';
+import { DatePicker, Input } from 'amos-antd';
+import { Icon } from 'amos-framework';
+import '../../styles/view/disaster/history.scss';
+import staticImg from './../../consts/image';
+import { getDisasterRecord } from '../../services/disasterApi';
+
+const Search = Input.Search;
+
+
+/**
+ * 历史灾情组件
+ *
+ * @class HistoricalDisaster
+ * @extends {Component}
+ */
+
+class HistoricalDisaster extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      stratTime: '',
+      endTime: '',
+      id: 0,
+      disasterRecord: []
+    };
+  }
+
+  componentDidMount() {
+    this.fetchDisasterRecordData();
+  }
+
+
+  getStartDate = (d) => {
+    console.log(d);
+    this.setState({ stratTime: d });
+  }
+
+  getEndDate = (d) => {
+    console.log(d);
+    this.setState({ endTime: d });
+  }
+
+  fetchDisasterRecordData = () => {
+    getDisasterRecord().then(res => {
+      console.log(res);
+      this.setState({ disasterRecord: res.disasterRecord });
+    });
+  }
+
+  handleSearch = (value) => {
+    const { stratTime, endTime } = this.state;
+    const payload = {
+      stratTime,
+      endTime,
+      keyword: value
+    };
+    console.log(payload);
+  }
+
+
+  render() {
+    const { id, disasterRecord = [] } = this.state;
+
+    return (
+      <div>
+        <div className="layout">
+          <div className="lefts">
+            <div className="left-top">
+              <div className="date">
+                <span>日期：</span>
+                <DatePicker format="YYYY-MM-DD" placeholder='年-月-日' onChange={(d) => this.getStartDate(d)} />
+                -
+                <DatePicker format="YYYY-MM-DD" placeholder='年-月-日' onChange={(d) => this.getEndDate(d)} />
+              </div>
+              <div className="search">
+                <span>搜索：</span>
+                <Search
+                  placeholder=""
+                  style={{ width: '63.5%', margin: '0 4px' }}
+                  onSearch={value => this.handleSearch(value)}
+                />
+              </div>
+            </div>
+            <div className="scroll-box">
+              <div style={{ height: '72vh' }} className="lefts-content">
+                {disasterRecord.map((item) => {
+                  return (
+                    <div key={item.id} className="items" onClick={() => this.setState({ id: item.id })}>
+                      <Icon icon="video-camera" style={{ fontSize: 20,color: '#59F0FB',marginLeft: 9 }} /> { item.name }
+                      <span className="items-date"> {`(${item.date})`}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>       
+          <div className="rights">
+            <div className="info-title">
+              <div style={{ background: 'rgba(0,0,0,0.57)', width: 188, zIndex: 999 }}>
+                <div className="title-bg">{id !== 0 ? '预案播放' : '预案同步'}</div>
+              </div>
+            </div>
+            <div className="right-content">
+              {id === 0 ?
+                <div className="history">
+                  <div> <img src={staticImg.disasterImg.empty} alt="" /> </div>
+                  <div className="desc">请选择历史灾情</div>
+                </div>
+                :
+                <div style={{ margin: 18, height: '66vh' }}>
+                  <img src={staticImg.disasterImg.people} alt="" width='100%' height='100%' />
+                </div>}
+
+              <div className="right-bottom">
+                <div className="plan" style={{ background: 'rgba(0,185,255,0.59)' }}>
+                  <img src={staticImg.disasterImg.player} alt="" height='40' width='40' />
+                  <div className="plan-text">播放</div>
+                </div>
+                <div className="plan">
+                  <img src={staticImg.disasterImg.stops} alt="" height='40' width='40' />
+                  <div className="plan-text">暂停</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default HistoricalDisaster;
\ No newline at end of file