修改日常值守样式

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

-.daily-duties-content{
-  position:absolute;
-  left:0;
-  top:pxToRem(68px);
-  right:0;
-  bottom:0;  //left,top,right,bottom都为0，充满真个页面
-  overflow-y:auto;
-  overflow-x:hidden; //设置Y轴出现滚动条，X轴隐藏
+@function vw($px) {
+  @return ($px/ 1920) * 100vw;
+}
+
+@function vh($px) {
+  @return ($px/ 1080) * 100vh;
+}
+
+
+.daily-duties-content {
+  position: absolute;
+  left: 0;
+  top: vh(68);
+  right: 0;
+  bottom: 0; //left,top,right,bottom都为0，充满真个页面
+  overflow-y: auto;
+  overflow-x: hidden; //设置Y轴出现滚动条，X轴隐藏
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -17,232 +26,281 @@
     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%);
+    font-size: pxToRem(22px);
+    width: vw(28);
+    height: vh(28);
+    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(29px);
+  .common-margin {
+    margin-top: vh(29);
   }
-  .daily-title{
-    font-size:pxToRem(20px);
+
+  .daily-title {
+    font-size: pxToRem(20px);
     color: #ffffff;
   }
-  .daily-title-content{
-    width:pxToRem(257px);
+
+  .daily-title-content {
+    width: vw(257);
     display: flex;
     flex-direction: row;
     justify-content: center;
   }
 
-  .top-ten-content{
-    padding:pxToRem(30px) pxToRem(30px);
+  .top-ten-content {
+    padding: vh(30) vw(30);
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     height: 100%;
 
-    .top-ten-item{
+    .top-ten-item {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
-      .top-ten-item-middle{
-        width:pxToRem(208px);
-        height: pxToRem(16px);
+
+      .top-ten-item-middle {
+        width: vw(208);
+        height: vh(16);
         display: flex;
         flex-direction: column;
         justify-content: center;
         background-color: #1C6264;
-        .top-ten-item-middlelinear{
-          background-image: linear-gradient(to right, #1C6264 , #00FFF7);
+
+        .top-ten-item-middlelinear {
+          background-image: linear-gradient(to right, #1C6264, #00FFF7);
         }
       }
-      .top-ten-item-bottom{
-        width:pxToRem(36px);
+
+      .top-ten-item-bottom {
+        width: vw(36);
         display: flex;
-        flex-direction:row;
+        flex-direction: row;
         justify-content: flex-end;
       }
     }
   }
 
 }
-.class-Situation .daily-duties-left{
+
+.class-Situation .daily-duties-left {
   height: 100%;
-  .safety-rate-view{
+  position: relative;
+  left: 1%;
+
+  .safety-rate-view {
     // background-image: url('../../assets/dailyDuties/leftTop.png');
     background-repeat: no-repeat;
-    width:pxToRem(412px);
-    height:pxToRem(390px);
+    width: vw(412);
+    height: vh(450);
   }
-  .growth-statistics-view{
+
+  .growth-statistics-view {
     // background-image: url('../../assets/dailyDuties/leftBottom.png');
     background-repeat: no-repeat;
-    width:pxToRem(411px);
-    height:pxToRem(444px);
-    .growth-content{
-      padding:pxToRem(30px) pxToRem(24px);
+    width: vw(411);
+    height: vh(450);
+    margin-top: vh(47);
+
+    .growth-content {
+      padding: vh(30) vw(24);
       height: 100%;
 
-      .growth-item-header{
+      .growth-item-header {
         font-size: pxToRem(20px);
         color: #52EDF2;
       }
-      .growth-item-text{
+
+      .growth-item-text {
         font-size: pxToRem(20px);
         color: #ffffff;
       }
-      .growth-item-datatext{
+
+      .growth-item-datatext {
         font-size: pxToRem(20px);
         color: #00CACE;
       }
-      .growth-item{
+
+      .growth-item {
         display: flex;
         flex-direction: row;
         justify-content: space-around;
         align-items: center;
-        height:pxToRem(42px);
-        width: pxToRem(362px);
-        background-color:#1C6264 ;
-        margin-top:pxToRem(5px);
+        height: vh(42);
+        width: vw(340);
+        background-color: #1C6264;
+        margin-top: vh(5);
       }
-      .growth-item:hover{
-        background-color:#00B9FF ;
+
+      .growth-item:hover {
+        background-color: #00B9FF;
       }
     }
   }
 }
 
-.class-Situation .daily-duties-middle{
+.class-Situation .daily-duties-middle {
   height: 100%;
-  margin-left: pxToRem(19px);
-  margin-right: pxToRem(19px);
-  .statistics-title{
+  margin-left: vw(25);
+  margin-right: vw(-18);
+
+  .statistics-title {
     font-size: pxToRem(32px);
     color: #00EEE8;
   }
-  .statistics-title-content{
-    width:100%;
+
+  .statistics-title-content {
+    width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: center;
   }
-  .statistics-view{
+
+  .statistics-view {
     // background-image: url('../../assets/dailyDuties/middleTop.png');
     background-repeat: no-repeat;
-    width:pxToRem(999px);
-    height:pxToRem(533px);
+    width: vw(999);
+    height: vh(600);
     position: relative;
 
-    .statistics-banner{
+    .statistics-banner {
       position: absolute;
-     left:pxToRem(95px);
-     right: pxToRem(95px);
+      left: vw(95);
+      right: vw(95);
       top: 3%;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       z-index: 2;
-     .statistics-banner-content{
-       height: pxToRem(100px);
-       width:pxToRem(380px);
-       background-color:rgba(28, 98, 100, 0.5) ;
+
+      .statistics-banner-content {
+        height: vh(100);
+        width: vw(380);
+        background-color: rgba(28, 98, 100, 0.5);
         border-radius: pxToRem(5px);
-       .statistics-banner-item{
-         height: pxToRem(100px);
-         margin-left: pxToRem(32px);
-         margin-right: pxToRem(32px);
+
+        .statistics-banner-item {
+          height: vh(100);
+          margin-left: vw(32);
+          margin-right: vw(32);
           display: flex;
           flex-direction: row;
           justify-content: space-between;
           align-items: center;
-         .statistics-banner-itemblock{
+
+          .statistics-banner-itemblock {
             text-align: center;
-          .statistics-text-number{
+
+            .statistics-text-number {
               font-weight: bold;
               font-size: pxToRem(35px);
-            color:#00EEE8 ;
-            letter-spacing:pxToRem(5px);
-            height: pxToRem(44px);
+              color: #00EEE8;
+              letter-spacing: pxToRem(5px);
+              height: vh(44);
               display: flex;
-            flex-direction:row;
+              flex-direction: row;
               justify-content: flex-start;
 
             }
-          span{
+
+            span {
               font-weight: bold;
               font-size: pxToRem(20px);
-            color:#FF0000 ;
-            letter-spacing:pxToRem(5px);
-            padding-top: pxToRem(9px);
+              color: #FF0000;
+              letter-spacing: pxToRem(5px);
+              padding-top: vh(9);
             }
-          p{
+
+            p {
               font-size: pxToRem(14px);
-            color:#FFF ;
+              color: #FFF;
             }
           }
         }
       }
     }
   }
-  .risk-trend-view{
+
+  .risk-trend-view {
     // background-image: url('../../assets/dailyDuties/middleBottom.png');
     background-repeat: no-repeat;
-    width:pxToRem(1002px);
-    height:pxToRem(289px);
+    width: vw(1002);
+    height: vh(307);
     position: relative;
-    .buttongroup-style{
+
+    .buttongroup-style {
       position: absolute;
-      right:pxToRem(50px);
-      top:pxToRem(56px);
-      z-index:2 ;
-      .button-style{
+      right: vw(50);
+      top: 14%;
+      z-index: 2;
+
+      .button-style {
         border-width: pxToRem(1px);
         border-color: #45FEFE;
-        width:pxToRem(80px);
+        width: vw(80);
       }
     }
-    .risk-trend-content{
-      padding:pxToRem(20px);
-      width:100%;
+
+    .risk-trend-content {
+      padding: pxToRem(20px);
+      width: 100%;
       height: 100%;
+
+      .div-echars {
+        margin-left: vw(-45);
+        height: vh(300) !important;
+        width: 100% !important;
+      }
     }
   }
 }
-.class-Situation .daily-duties-right{
+
+.class-Situation .daily-duties-right {
   height: 100%;
-  .risk-failure-view{
-    // background-image: url('../../assets/dailyDuties/leftTop.png');
-    background-repeat: no-repeat;
-    width:pxToRem(412px);
-    height:pxToRem(390px);
+
+  .risk-failure-view {
+
+    width: vw(450);
+    height: vh(450);
+    position: relative;
+    top: vh(15);
   }
-  .recent-statistics-view{
+
+  .recent-statistics-view {
     // background-image: url('../../assets/dailyDuties/rightBottom.png');
     background-repeat: no-repeat;
-    width:pxToRem(411px);
-    height:pxToRem(444px);
+    width: vw(450);
+    height: vh(440);
     position: relative;
-    .buttongroup-style{
+    top:vh(24);
+
+    .buttongroup-style {
       position: absolute;
-      right:pxToRem(50px);
-      top:pxToRem(56px);
-      z-index:2 ;
-      .button-style{
-        border-width: pxToRem(1px);
+      right: vw(20);
+      top: 11%;
+      z-index: 2;
+
+      .button-style {
+        border-width: vw(1);
         border-color: #45FEFE;
-        width:pxToRem(80px)
+        width: vw(80)
       }
     }
 
-    .recent-statistics-content{
-      padding:pxToRem(20px);
-      width:100%;
+    .recent-statistics-content {
+      padding: pxToRem(20px);
+      width: 100%;
       height: 100%;
+
+      .div-echars-style {
+
+        height: vh(430) !important;
+        width: 100% !important;
+        background-position: vw(60) vh(14) !important;
+      }
     }
   }
 }

src/styles/view/monitor/homePage.scss

@@ -1186,7 +1186,7 @@
         margin-left: vw(17);
         height: vh(260) !important;
         width: 82% !important;
-        background-position: 60px vh(14) !important;
+        background-position: vw(60) vh(14) !important;
       }
 
       .jiantou {

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

@@ -36,7 +36,7 @@ class RecentStatistics extends Component {
           </ButtonGroup>
           <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%' }} />
+            <ReactEcharts option={recentData} className="div-echars-style" />
           </div>
         </CommonCard>
       </div>

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

@@ -32,7 +32,7 @@ class RiskTrend extends Component {
             <Button size="sm" children={<span>治理数</span>} className="button-style" value="4" style={value == '4' ? select : noselect} />
           </ButtonGroup>
           <div className="risk-trend-content">
-            <ReactEcharts option={riskTrendData} style={{ height: '100%', width: '100%' }} />
+             <ReactEcharts option={riskTrendData}  className="div-echars"  />
           </div>
         </CommonCard>
       </div>

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

@@ -64,7 +64,7 @@ class Statistics extends Component {
       { name: '新疆', area: '其他', type: 'areaCenterCity', InValue: '0' }
     ];
     echarts.registerMap('china', geoJson);
-    debugger;
+
     for (const item of provienceData) {
       if (item.area === '东北大区') {
         item.itemStyle = {

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

@@ -41,23 +41,7 @@ export const riskTrendData = {
       fontSize: 14
     }
   },
-  dataZoom: [
-    {
-      show: true,
-      realtime: true,
-      backgroundColor: '#00B9ff',
-      borderColor: '#00B9ff',
-      left: 40,
-      height: 14,
-      width: 996,
-      bottom: 5
-    },
-    {
-      type: 'inside',
-      realtime: true,
-      textStyle: false
-    }
-  ],
+
   xAxis: {
     type: 'category',
     boundaryGap: false,