Merge branch 'developer' of 172.16.10.76:station/station-elec-manage-view into developer

src/_mock/rczsData/geo.js

+
 //地图数据
-const provienceData = [
-  { name: '黑龙江', area: '东北大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '吉林', area: '东北大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '辽宁', area: '东北大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '内蒙古', area: '其他', type: 'areaCenterCity', InValue: '0' },
-  { name: '北京', area: '华北大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '天津', area: '华北大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '河北', area: '华北大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '山东', area: '华北大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '山西', area: '华北大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '江苏', area: '华东大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '上海', area: '华东大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '浙江', area: '华东大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '福建', area: '华南大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '广东', area: '华南大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '海南', area: '华南大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '台湾', area: '其他', type: 'areaCenterCity', InValue: '0' },
-  { name: '香港', area: '其他', type: 'areaCenterCity', InValue: '0' },
-  { name: '澳门', area: '其他', type: 'areaCenterCity', InValue: '0' },
-  { name: '河南', area: '华北大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '安徽', area: '华中大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '江西', area: '华中大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '广东', area: '华南大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '陕西', area: '华西大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '湖北', area: '华中大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '湖南', area: '华中大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '广西', area: '华南大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '宁夏', area: '华西大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '重庆', area: '华西大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '贵州', area: '华西大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '四川', area: '华西大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '云南', area: '华西大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '甘肃', area: '华西大区', type: 'areaCenterCity', InValue: '0' },
-  { name: '青海', area: '其他', type: 'areaCenterCity', InValue: '0' },
-  { name: '西藏', area: '其他', type: 'areaCenterCity', InValue: '0' },
-  { name: '新疆', area: '其他', type: 'areaCenterCity', InValue: '0' }
+export const dataList = [
+  { name: '南海诸岛', value: 0 },
+  { name: '北京', value: Math.round(Math.random() * 1000) },
+  { name: '天津', value: Math.round(Math.random() * 1000) },
+  { name: '上海', value: Math.round(Math.random() * 1000) },
+  { name: '重庆', value: Math.round(Math.random() * 1000) },
+  { name: '河北', value: Math.round(Math.random() * 1000) },
+  { name: '河南', value: Math.round(Math.random() * 1000) },
+  { name: '云南', value: Math.round(Math.random() * 1000) },
+  { name: '辽宁', value: Math.round(Math.random() * 1000) },
+  { name: '黑龙江', value: Math.round(Math.random() * 1000) },
+  { name: '湖南', value: Math.round(Math.random() * 1000) },
+  { name: '安徽', value: Math.round(Math.random() * 1000) },
+  { name: '山东', value: Math.round(Math.random() * 1000) },
+  { name: '新疆', value: Math.round(Math.random() * 1000) },
+  { name: '江苏', value: Math.round(Math.random() * 1000) },
+  { name: '浙江', value: Math.round(Math.random() * 1000) },
+  { name: '江西', value: Math.round(Math.random() * 1000) },
+  { name: '湖北', value: Math.round(Math.random() * 1000) },
+  { name: '广西', value: Math.round(Math.random() * 1000) },
+  { name: '甘肃', value: Math.round(Math.random() * 1000) },
+  { name: '山西', value: Math.round(Math.random() * 1000) },
+  { name: '内蒙古', value: Math.round(Math.random() * 1000) },
+  { name: '陕西', value: Math.round(Math.random() * 1000) },
+  { name: '吉林', value: Math.round(Math.random() * 1000) },
+  { name: '福建', value: Math.round(Math.random() * 1000) },
+  { name: '贵州', value: Math.round(Math.random() * 1000) },
+  { name: '广东', value: Math.round(Math.random() * 1000) },
+  { name: '青海', value: Math.round(Math.random() * 1000) },
+  { name: '西藏', value: Math.round(Math.random() * 1000) },
+  { name: '四川', value: Math.round(Math.random() * 1000) },
+  { name: '宁夏', value: Math.round(Math.random() * 1000) },
+  { name: '海南', value: Math.round(Math.random() * 1000) },
+  { name: '台湾', value: Math.round(Math.random() * 1000) },
+  { name: '香港', value: Math.round(Math.random() * 1000) },
+  { name: '澳门', value: Math.round(Math.random() * 1000) }
 ];
 
-const geoCoordMap = {
-  黑龙江: [126.6433411, 45.74149323],
-  吉林: [125.3154297, 43.89256287],
-  辽宁: [123.4116821, 41.7966156],
-  内蒙古: [111.6632996, 40.82094193],
-  北京: [116.3809433, 39.9236145],
-  天津: [117.2034988, 39.13111877],
-  河北: [114.4897766, 38.04512787],
-  山东: [117.0056, 36.6670723],
-  山西: [112.5693512, 37.87111282],
-  江苏: [118.7727814, 32.04761505],
-  上海: [121.4692688, 31.23817635],
-  浙江: [120.1592484, 30.26599503],
-  福建: [119.2978134, 26.07859039],
-  广东: [113.2614288, 23.11891174],
-  海南: [110.3465118, 19.03179359],
-  台湾: [120.960515, 23.69781],
-  香港: [114.109497, 22.396428],
-  澳门: [110.5440083, 21.20167546],
-  河南: [113.6500473, 34.7570343],
-  安徽: [117.2757034, 31.86325455],
-  江西: [115.8999176, 28.67599106],
-  陕西: [108.949028, 34.26168442],
-  湖北: [114.2919388, 30.56751442],
-  湖南: [112.9812698, 28.20082474],
-  广西: [108.3117676, 22.80654335],
-  宁夏: [106.2719421, 38.46800995],
-  重庆: [106.5103378, 29.55817604],
-  贵州: [106.7113724, 26.57687378],
-  四川: [104.0817566, 30.66105652],
-  云南: [102.704567, 25.04384422],
-  甘肃: [95.832762, 40.067241],
-  青海: [95.786324, 36.629144],
-  西藏: [91.11445308, 29.64411352],
-  新疆: [89.1895474, 42.95130195],
-  五指山市: [110.72, 19.61],
-  文昌市: [110.72, 19.61],
-  琼海市: [110.46, 19.25],
-  万宁市: [110.39, 18.8],
-  东方市: [108.64, 19.09],
-  定安县: [110.31, 19.68],
-  临高县: [109.69, 19.91],
-  澄迈县: [110, 19.75],
-  白沙黎族自治县: [109.44, 19.23],
-  江黎族自治县: [102.188043, 38.520089],
-  乐东黎族自治县: [109.17, 18.73],
-  保亭黎族苗族自治县: [109.7, 18.64],
-  中苗族黎族自治县: [119.46, 35.42],
-  海门: [121.15, 31.89],
-  鄂尔多斯: [109.781327, 39.608266],
-  招远: [120.38, 37.35],
-  舟山: [122.207216, 29.985295],
-  齐齐哈尔: [123.97, 47.33],
-  盐城: [120.13, 33.38],
-  赤峰: [118.87, 42.28],
-  青岛: [120.33, 36.07],
-  乳山: [121.52, 36.89],
-  金昌: [102.188043, 38.520089],
-  泉州: [118.58, 24.93],
-  莱西: [120.53, 36.86],
-  日照: [119.46, 35.42],
-  胶南: [119.97, 35.88],
-  南通: [121.05, 32.08],
-  拉萨: [91.11, 29.97],
-  云浮: [112.02, 22.93],
-  梅州: [116.1, 24.55],
-  文登: [122.05, 37.2],
-  攀枝花: [101.718637, 26.582347],
-  威海: [122.1, 37.5],
-  承德: [117.93, 40.97],
-  厦门: [118.1, 24.46],
-  汕尾: [115.375279, 22.786211],
-  潮州: [116.63, 23.68],
-  丹东: [124.37, 40.13],
-  太仓: [121.1, 31.45],
-  曲靖: [103.79, 25.51],
-  烟台: [121.39, 37.52],
-  福州: [119.3, 26.08],
-  瓦房店: [121.979603, 39.627114],
-  即墨: [120.45, 36.38],
-  抚顺: [123.97, 41.97],
-  玉溪: [102.52, 24.35],
-  张家口: [114.87, 40.82],
-  阳泉: [113.57, 37.85],
-  莱州: [119.942327, 37.177017],
-  湖州: [120.1, 30.86],
-  汕头: [116.69, 23.39],
-  昆山: [120.95, 31.39],
-  宁波: [121.56, 29.86],
-  湛江: [110.359377, 21.270708],
-  揭阳: [116.35, 23.55],
-  荣成: [122.41, 37.16],
-  连云港: [119.16, 34.59],
-  葫芦岛: [120.836932, 40.711052],
-  常熟: [120.74, 31.64],
-  东莞: [113.75, 23.04],
-  河源: [114.68, 23.73],
-  淮安: [119.15, 33.5],
-  泰州: [119.9, 32.49],
-  南宁: [108.33, 22.84],
-  营口: [122.18, 40.65],
-  惠州: [114.4, 23.09],
-  江阴: [120.26, 31.91],
-  蓬莱: [120.75, 37.8],
-  韶关: [113.62, 24.84],
-  嘉峪关: [98.289152, 39.77313],
-  广州: [113.23, 23.16],
-  延安: [109.47, 36.6],
-  太原: [112.53, 37.87],
-  清远: [113.01, 23.7],
-  中山: [113.38, 22.52],
-  昆明: [102.73, 25.04],
-  寿光: [118.73, 36.86],
-  盘锦: [122.070714, 41.119997],
-  长治: [113.08, 36.18],
-  深圳: [114.07, 22.62],
-  珠海: [113.52, 22.3],
-  宿迁: [118.3, 33.96],
-  咸阳: [108.72, 34.36],
-  铜川: [109.11, 35.09],
-  平度: [119.97, 36.77],
-  佛山: [113.11, 23.05],
-  海口: [110.35, 20.02],
-  江门: [113.06, 22.61],
-  章丘: [117.53, 36.72],
-  肇庆: [112.44, 23.05],
-  大连: [121.62, 38.92],
-  临汾: [111.5, 36.08],
-  吴江: [120.63, 31.16],
-  石嘴山: [106.39, 39.04],
-  沈阳: [123.38, 41.8],
-  苏州: [120.62, 31.32],
-  茂名: [110.88, 21.68],
-  嘉兴: [120.76, 30.77],
-  长春: [125.35, 43.88],
-  胶州: [120.03336, 36.264622],
-  银川: [106.27, 38.47],
-  张家港: [120.555821, 31.875428],
-  三门峡: [111.19, 34.76],
-  锦州: [121.15, 41.13],
-  南昌: [115.89, 28.68],
-  柳州: [109.4, 24.33],
-  三亚: [109.511909, 18.252847],
-  自贡: [104.778442, 29.33903],
-  阳江: [111.95, 21.85],
-  泸州: [105.39, 28.91],
-  西宁: [101.74, 36.56],
-  宜宾: [104.56, 29.77],
-  呼和浩特: [111.65, 40.82],
-  成都: [104.06, 30.67],
-  大同: [113.3, 40.12],
-  镇江: [119.44, 32.2],
-  桂林: [110.28, 25.29],
-  张家界: [110.479191, 29.117096],
-  宜兴: [119.82, 31.36],
-  北海: [109.12, 21.49],
-  西安: [108.95, 34.27],
-  金坛: [119.56, 31.74],
-  东营: [118.49, 37.46],
-  牡丹江: [129.58, 44.6],
-  遵义: [106.9, 27.7],
-  绍兴: [120.58, 30.01],
-  扬州: [119.42, 32.39],
-  常州: [119.95, 31.79],
-  潍坊: [119.1, 36.62],
-  台州: [121.420757, 28.656386],
-  南京: [118.78, 32.04],
-  滨州: [118.03, 37.36],
-  贵阳: [106.71, 26.57],
-  无锡: [120.29, 31.59],
-  本溪: [123.73, 41.3],
-  克拉玛依: [84.77, 45.59],
-  渭南: [109.5, 34.52],
-  马鞍山: [118.48, 31.56],
-  宝鸡: [107.15, 34.38],
-  焦作: [113.21, 35.24],
-  句容: [119.16, 31.95],
-  徐州: [117.2, 34.26],
-  衡水: [115.72, 37.72],
-  包头: [110, 40.58],
-  绵阳: [104.73, 31.48],
-  乌鲁木齐: [87.68, 43.77],
-  枣庄: [117.57, 34.86],
-  杭州: [120.19, 30.26],
-  淄博: [118.05, 36.78],
-  鞍山: [122.85, 41.12],
-  溧阳: [119.48, 31.43],
-  库尔勒: [86.06, 41.68],
-  安阳: [114.35, 36.1],
-  开封: [114.35, 34.79],
-  济南: [117, 36.65],
-  德阳: [104.37, 31.13],
-  温州: [120.65, 28.01],
-  九江: [115.97, 29.71],
-  邯郸: [114.47, 36.6],
-  临安: [119.72, 30.23],
-  兰州: [103.73, 36.03],
-  沧州: [116.83, 38.33],
-  临沂: [118.35, 35.05],
-  南充: [106.110698, 30.837793],
-  富阳: [119.95, 30.07],
-  泰安: [117.13, 36.18],
-  诸暨: [120.23, 29.71],
-  郑州: [113.65, 34.76],
-  哈尔滨: [126.63, 45.75],
-  聊城: [115.97, 36.45],
-  芜湖: [118.38, 31.33],
-  唐山: [118.02, 39.63],
-  平顶山: [113.29, 33.75],
-  邢台: [114.48, 37.05],
-  德州: [116.29, 37.45],
-  济宁: [116.59, 35.38],
-  荆州: [112.239741, 30.335165],
-  宜昌: [111.3, 30.7],
-  义乌: [120.06, 29.32],
-  丽水: [119.92, 28.45],
-  洛阳: [112.44, 34.7],
-  秦皇岛: [119.57, 39.95],
-  株洲: [113.16, 27.83],
-  石家庄: [114.48, 38.03],
-  莱芜: [117.67, 36.19],
-  常德: [111.69, 29.05],
-  保定: [115.48, 38.85],
-  湘潭: [112.91, 27.87],
-  金华: [119.64, 29.12],
-  岳阳: [113.09, 29.37],
-  长沙: [113, 28.21],
-  衢州: [118.88, 28.97],
-  廊坊: [116.7, 39.53],
-  菏泽: [115.480656, 35.23375],
-  合肥: [117.27, 31.86],
-  武汉: [114.31, 30.52],
-  大庆: [125.03, 46.58]
-};
-
 
-//地图标点用
-const dmtData = [
-  { latitude: 30.67, longitude: 104.07 },
-  { latitude: 34.76, longitude: 113.65 },
-  { latitude: 29.65, longitude: 91.13 },
-  { latitude: 43.82, longitude: 87.62 }
-];
 
+//黄色点
+export const geoCoordMap = {
+  '上海':[121.48,31.22],
+  '北京':[116.46,39.92],
+  '天津':[117.2,39.13],
+  '吉林':[126.57,43.87]
+};
 
-export { provienceData, geoCoordMap, dmtData };
+//闪烁
+export const redoordMap = {
+  '上海':[121.48,31.22],
+  '北京':[116.46,39.92],
+  '天津':[117.2,39.13],
+  '吉林':[126.57,43.87]
+};

src/styles/view/biz/detail/detail.scss

+@function vw($px) {
+  @return ($px/ 1920) * 100vw;
+}
+
+@function vh($px) {
+  @return ($px/ 1080) * 100vh;
+}
+
+
 .mainContent{
     width: 100%;
     height: 100%;
     background: url('../../assets/detail/bgImg.png') no-repeat;
     background-size: cover;
-    margin: -60px 0;
+    margin: vh(-60) 0;
     position: absolute;
     z-index: 9999;
     overflow-y:auto;
@@ -15,81 +24,101 @@
       .contentHeader{
          padding: 0;
          width:100%;
-         height: 64px;
+         height: vh(64);
          background: url('../../assets/detail/bg-header.png') no-repeat;
          background-size: cover;
          box-shadow:0px 3px 6px rgba(0,0,0,0.16);
          opacity:1;
         .headerLeft{
-          width: 280px;
-          height: 55px;
-          font-size: 25px;
-          margin-top: 22px;
+          width: vw(280);
+          height: vh(55);
+          font-size: pxToRem(25px);
+          margin-top: vh(22);
           color: #F7FF00;
-          line-height: 32px;
+          line-height: vh(32);
           float: left;
-          margin-left: 50px;
+          margin-left: vw(50);
         }
         .headerRight{
-          margin-top: 15px;
-          width: 42px;
-          height:42px;
+          margin-top: vh(15);
+          width: vw(42);
+          height:vh(42);
           float: right;
+          .img-headerRight {
+            margin-top: vh(3),
+            width：vw(42);
+          }
         }
        }
        .content{
-         padding: 0px 22.5px;
+         padding:vh(0) vw(22.5);
          background:linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%);
          opacity:1;
+
           .contentInfo{
             border:1px solid rgba(95,255,253,1);
-            height: 980px; 
+            height: vh(980);
             opacity: 1;
-            margin-top: 18px;
+            margin-top: vh(18);
             .infoHeader{
               background:rgba(0,35,51,1);
-              height: 89px; 
+              height: vh(89);
               opacity: 1;
               .amos-search{
                 border: 0;
-                height:35px ;
-                width: 290px ; 
+                height:vh(35);
+                width: vw(290);
                 background:rgba(0,185,255,0.3);
-                border-radius:17px; 
-                top: 30px;
+                border-radius:17px;
+                top: vh(30);
                 color: #5FFFFD;
                 .amos-search-icon-right{
-                   left: 255px;     
+                   left: vw(255);
                 }
                 .amos-search-inner{
                     color: white;
                     display: block;
-                    height: 37px;
+                    height: vh(37);
                     background: transparent;
                     border-radius: 17px;
                 }
-              } 
+              }
               .selectDiv{
                 position: relative;
-                right: -900px;
-                margin-left: 20px;
-                color: white;  
+                right: vw(-990);
+                margin-left: vw(-20);
+                color: white;
+                .amos-select-dropdown {
+                  border: 0;
+                  min-width: 7em;
+                  line-height: vh(32);
+                  background-color: rgba(0,185,255,0.3);
+                  border-radius: 15px;
+                  top: vh(-3);
+                }
+              }
+
+              .selectDiv1{
+                position: relative;
+                right: vw(-1051);
+                margin-left: vw(-40);
+                color: white;
                 .amos-select-dropdown {
-                  border: 0; 
+                  border: 0;
                   min-width: 7em;
-                  line-height: 32px;
+                  line-height: vh(32);
                   background-color: rgba(0,185,255,0.3);
                   border-radius: 15px;
-                  top: -3px;
+                  top: vh(-3);
                 }
               }
-             
+
             }
             .infoContent{
-             height:888px;
+             height:vh(888);
              opacity: 1;
              .ant-table-content{
-                height: 800px;
+                height: vh(800);
                 opacity:1;
                 .ant-table-placeholder{
                  background:rgba(14,127,180,0.29);
@@ -99,23 +128,23 @@
                    width: 100%;
                    height: 100%;
                    .ant-table-row{
-                     margin-left: 13px;
-                     width: 100% ;  
-                   }       
+                     margin-left: vw(13);
+                     width: 100% ;
+                   }
                }
                table {
-                   width: 100%; 
+                   width: 100%;
                }
                .ant-table-body>.clickRowStyl:hover>td {
                  background-color: #00b4ed;
-               }           
+               }
              }
              .ant-table-pagination{
                  float: none;
                  text-align: center;
                .ant-pagination-total-text{
                    color: white;
-                   font-size: 13px;
+                   font-size: pxToRem(13px);
                  }
              }
              .ant-table-pagination > li {
@@ -124,9 +153,9 @@
                 opacity:1;
                 margin:0;
                 display: inline-block;
-                width: 24px;
+                width: vw(24);
              }
-            }        
+            }
           }
        }
        /**
@@ -140,110 +169,131 @@
         width: 95%;
         height: 59%;
         margin: 1% 2%;
-        background-color:transparent; 
+        background-color:transparent;
         .oneChildHeader{
-            height:40px;
-            width: 256px;
+            height:vh(40);
+            width: vw(256);
             border:1px solid rgba(95,255,253,1);
         }
         .oneHeaderContent{
             border:1px solid rgba(95,255,253,1);
             text-align: center;
-            height:550px;
+            height:vh(550);
             background:linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%);
+
+            .image-div {
+              width: vw(922);
+              height:vh(503);
+              margin-top: vh(35);
+              margin-left: vw(160)
+
+            }
         }
     }
     .blockOneContent{
         width:46%;
-        height: 370px;
-        margin: 45px 0 0 30px;
+        height: vh(370);
+        margin: vh(45) 0 0 vw(30);
         display: inline-block;
+        position: relative;
+        top: vh(-51);
         .oneChildLayout {
              background: transparent;
-             height: 360px;
+             height: vh(360);
             .oneChildSider{
-                background-color:transparent; 
-                height: 360px; 
+                background-color:transparent;
+                height: vh(360);
                 .twoChildHeader{
                     background:'none';
-                    height:40px;
-                    width: 277px;
-                    border:1px solid rgba(95,255,253,1);      
+                    height:vh(40);
+                    width: vw(277);
+                    border:1px solid rgba(95,255,253,1);
                 }
                 .twoHeaderContent{
-                    height:320px;
-                    width: 648px;
+                    height:vh(322);
+                    width: vw(648);
                     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%);
                 }
             }
-        } 
+        }
     }
     .blockTwoContent{
         width:46%;
-        height: 370px;
+        height: vh(370);
         display: inline-block;
-        margin: 45px 0 0 35px;
+        position: relative;
+        top: vh(-49);
+        left: vw(50);
         .oneChildLayout {
-             height: 360px;
+             height: vh(360);
              background: transparent;
             .oneChildSider{
-                background-color:transparent; 
-                height: 360px; 
+                background-color:transparent;
+                height: vh(360);
                 .twoChildHeader{
                     background:'none';
-                    height: 40px;
-                    width: 277px;
-                    border:1px solid rgba(95,255,253,1);      
+                    height: vh(40);
+                    width: vw(277);
+                    border:1px solid rgba(95,255,253,1);
                 }
                 .twoHeaderContent{
-                    height:320px;
-                    width: 648px;
+                    height:vh(320);
+                    width: vw(648);
                     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%);
                     .risk-incidence-severity-matrix{
                         height: 95%;
+
+                        .div-severity-echarts {
+                          height: vh(330) !important;
+                          width: vw(660) !important;
+                        }
                     }
                 }
             }
-        } 
+        }
     }
        .amos-layout-header{
            padding: 0;
        }
-     }   
+     }
      .risksider{
-         height:970px;
-         flex: 0 0 456px!important;
-         width: 456px!important;
-         margin: 6px 40px 0px 0px;
+         height:vh(970);
+         flex: 0 0 vh(456)!important;
+         width: vw(456) !important;
+         margin: vh(6) vw(40) vh(0) vw(0);
          background: transparent;
+
          .amos-layout-sider-children{
-             margin-top: 10px;
+             margin-top: vh(10);
            .risksiderHeader{
-               height:35px;
+               height:vh(35);
                background: transparent;
-               margin-left: -50px;
+               margin-left: vw(-50);
             }
            .risksiderHeader >img{
-             width: 256px;
-             height: 40px;
+             width: vw(256);
+             height: vh(40);
              margin: 0px;
              border:1px solid rgba(95,255,253,1);
-           }  
-           
+           }
+
            .risksiderContent{
-               height:939px; 
+               height:vh(939);
                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%);
+               position: relative;
+               top: vh(4);
+               left: vw(1.6);
             }
-         }     
+         }
      }
- 
+
  }
- 
+
  .tableDetail{
-     height: 46px;
+     height: vh(46);
      width: 100%;
      .ant-table-thead > tr > th {
          background:rgba(0,185,255,0.38)!important;
@@ -252,62 +302,62 @@
          font-weight:bold;
          color:rgba(255,255,255,1);
          text-align: center;
-         padding: 9px 10px!important;
+         padding: vh(9) vw(10)!important;
          opacity: 1;
        }
        .ant-table-body > tr{
-        margin: 0px 14px!important;
+        margin: 0px vw(14)!important;
        }
        .ant-table-tbody > tr > td{
-         font-size:20px!important;
+         font-size: pxToRem(20px)!important;
          font-family:Microsoft YaHei;
          color:rgba(255,255,255,1);
          font-weight:bold;
          border: 0;
          text-align: center;
-         padding: 9px 10px!important;
-       } 
+         padding:vh(9) vw(10)!important;
+       }
  }
- 
+
  .ant-table-wrapper {
      .ant-table-row:hover>td  {
-          background-color:#00B9FF; 
-        } 
+          background-color:#00B9FF;
+        }
  }
- 
+
  .light-row{
     background-color: rgba(14,127,180,0.29);;
  }
- 
+
      .blockTwoContent{
-         width: 699px;
-         height: 342px;
+         width: vw(699);
+         height: vh(342);
          display: inline-block;
          .oneChildLayout {
-              height: 342px;
+              height: vh(342);
              .oneChildSider{
-                 background-color:transparent; 
-                 height: 342px; 
+                 background-color:transparent;
+                 height: vh(342);
                  .twoChildHeader{
                      background:'none';
-                     height:38px;
-                     width: 277px;
+                     height:vh(38);
+                     width: vh(277);
                      border:1px solid rgba(95,255,253,1);
                  }
                  .twoHeaderContent{
-                     height:304px;
-                     width: 661px;
+                     height:vh(304);
+                     width:vh(661);
                      border:1px solid rgba(95,255,253,1);
                  }
              }
-         } 
+         }
      }
      .situation-map-legend {
          color: ivory;
-         font-size: 18px;
+         font-size: pxToRem(18px);
          display: inline-block;
-         margin-top: 380px;
-         margin-left: 80px;
+         margin-top: vh(380);
+         margin-left: vw(80);
          position: initial;
          width: 108px;
          height:30px;
@@ -315,23 +365,23 @@
             height:30px;
              .situation-map-legend-block{
                  float: left;
-                 width: 20px;
-                 height: 15px;
-                 margin-right: -10px;
-             } 
+                 width: vw(20);
+                 height: vh(15);
+                 margin-right: vw(-10);
+             }
              div{
-                 height: 30px;
-                 line-height: 15px;
-             } 
+                 height: vh(30);
+                 line-height: vh(15);
+             }
          }
-        
-      }  
+
+      }
  }
 
  .risk-degree-pie-child {
     display: inline-block;
     width: 100%;
-    height: 310px;;
+    height: vh(310);;
 
     .risk-degree-pie1 {
       display: inline-block;
@@ -358,11 +408,11 @@
 
   .risk-top-ten-content{
       color: '#fff';
-      font-size: 14px;
+      font-size: pxToRem(14px);
       width: 100%;
       height: 100%;
     .top-ten-content{
-      padding:pxToRem(30px) pxToRem(20px);
+      padding:vh(30) vw(20);
       display: flex;
       flex-direction: column;
       justify-content: space-around;
@@ -372,39 +422,39 @@
         justify-content: space-between;
         align-items: center;
         color: #fff;
-        font-size: 15px;
+        font-size: pxToRem(15px);
         .top-risk{
           display: block;
-          margin-left:  pxToRem(16px);
-          width: pxToRem(320px);
+          margin-left: vw(16);
+          width: vw(320);
           .top-ten-item-middle{
-            width:pxToRem(248px);
-            height: pxToRem(16px);
+            width: vw(248);
+            height: vh(16);
             display: flex;
             justify-content: center;
             background-color: #1C6264;
             .top-ten-item-middlelinear{
               display: flex;
-              height: pxToRem(16px)!important;
+              height: vh(16)!important;
               background-image: linear-gradient(to right, #1C6264 , #00FFF7);
             }
           }
           .top-ten-item-middleRed{
-            margin-top: pxToRem(15px);
-            width:pxToRem(248px);
-            height: pxToRem(16px);
+            margin-top: vh(15);
+            width:vw(248);
+            height:vh(16);
             display: flex;
             justify-content: center;
             background-color: #1C6264;
             .top-ten-item-middlelinearRed{
               display: flex;
-              height: pxToRem(16px)!important;
+              height: vh(16)!important;
               background-image: linear-gradient(172deg,rgba(255,0,0,1) 0%,rgba(255,128,0,0) 100%);
             }
           }
         }
         .top-ten-item-bottom{
-          width:pxToRem(36px);
+          width:vw(36);
           display: pxToRem(16px);
           flex-direction:row;
           justify-content: flex-end;
@@ -412,4 +462,3 @@
       }
     }
   }
- 
\ No newline at end of file

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

@@ -166,6 +166,14 @@
     height: vh(600);
     position: relative;
 
+
+    .div-map-echarts {
+      margin-left: 2%;
+      height: 91% !important;
+      width: 95% !important;
+      top: 8%;
+    }
+
     .statistics-banner {
       position: absolute;
       left: vw(95);
@@ -176,6 +184,8 @@
       justify-content: space-between;
       z-index: 2;
 
+
+
       .statistics-banner-content {
         height: vh(100);
         width: vw(380);
@@ -222,6 +232,8 @@
         }
       }
     }
+
+
   }
 
   .risk-trend-view {

src/styles/view/monitor/homePage.scss

@@ -178,7 +178,7 @@
   }
 
   .sou {
-    height: 10%;
+    height: vh(66);
     width: 100%;
     display: flex;
     top: -2%;
@@ -284,7 +284,7 @@
       position: relative;
       text-align: center;
       /* vertical-align: middle; */
-      top: 29%;
+      top: 27%;
       margin-left: 12%;
 
       .search-one-button {
@@ -446,6 +446,7 @@
         bottom: vh(1);
         right: vw(-2);
         content: '' !important;
+        top: vh(-5);
       }
 
       .three-font {

src/view/biz/duty/detail/echarts/IncidenceSeverityMatrix.js

@@ -140,7 +140,7 @@ class IncidenceSeverityMatrix extends Component {
     const option = this.getOptions();
     return (
       <div className="risk-incidence-severity-matrix">
-        <AmosEcharts option={option} style={{ height: '330px', width: '660px' }} />
+        <AmosEcharts option={option} className ="div-severity-echarts" />
       </div>
     );
   }

src/view/biz/duty/detail/index.js

@@ -533,7 +533,7 @@ class CentralInfoView extends Component {
                           <Option value="收点">收点</Option>
                         </Select>
                       </div>
-                      <div className="selectDiv" style={{ display: 'inline-block' }}>
+                      <div className="selectDiv1" style={{ display: 'inline-block' }}>
                         统计类别：
                         <Select defaultValue="全部" onChange={this.onSumClazzChange}>
                           <Option value="全部">全部</Option>

src/view/biz/duty/detail/riskDetail.js

@@ -50,7 +50,7 @@ class RiskAssessment extends Component {
               {this.props.detailTitle}
             </div>
             <div className="headerRight" style={{ display: 'inline' }}>
-              <img src="/src/assets/detail/return.png" onClick={this.onClick} width="42px" style={{ marginTop: 3 }} />
+              <img src="/src/assets/detail/return.png" onClick={this.onClick} className="img-headerRight" />
             </div>
           </Header>
           <Layout>
@@ -60,7 +60,7 @@ class RiskAssessment extends Component {
                   <img src="/src/assets/detail/secondTitle4.png" style={{ width: 256, height: 38, margin: 0 }} />
                 </Header>
                 <Content className="oneHeaderContent">
-                  <img src="/src/assets/detail/RPNr.png" style={{ width: 922, height: 503, marginTop: 35, marginLeft: 160 }} />
+                   <img className="image-div" src="/src/assets/detail/RPNr.png"  />
                   {this.getLegend()}
                 </Content>
               </Header>

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

 import React, { Component } from 'react';
-import echarts from 'echarts/lib/echarts';
+import ReactEcharts from 'amos-viz/lib/echarts';
+//此项必须导入，否则地图无法显示
 import 'echarts/map/js/china';
-import geoJson from 'echarts/map/json/china.json';
-import { geoCoordMap, provienceData,dmtData } from './../../../../_mock/rczsData/geo';
+// import * as echarts from 'echarts';
+// import geoJson from 'echarts/map/json/china.json';
+import { dataList, geoCoordMap, redoordMap } from './../../../../_mock/rczsData/geo';
 import CommonCard from '../../../common/commonCard/CommonCard';
 import { alarmMapdata } from './../../../../_mock/rczsData/data';
 
+/**
+ * 日常值守地图
+ */
 class Statistics extends Component {
   constructor(props) {
     super(props);
     this.state = {};
   }
 
-  componentDidMount() {
-    this.initalECharts();
-  }
+  componentDidMount() {}
 
-  initalECharts() {
-    const data = provienceData;
-    echarts.registerMap('china', geoJson);
+  //黄色点
+  convertData = data => {
+    var res = [];
+    for (var i = 0; i < data.length; i++) {
+      var geoCoord = geoCoordMap[data[i].name];
+      if (geoCoord) {
+        res.push({
+          name: data[i].name,
+          value: geoCoord.concat(data[i].value),
+          visualMap: false
+        });
+      }
+    }
+    return res;
+  };
 
-    for (const item of provienceData) {
-      if (item.area === '东北大区') {
-        item.itemStyle = {
-          normal: {
-            areaColor: '#3CA2FC'
-          },
-          emphasis: {
-            areaColor: '#3CA2FC'
-          }
-        };
-      } else if (item.area === '华北大区') {
-        item.itemStyle = {
-          normal: {
-            areaColor: '#6CAFBE'
-          },
-          emphasis: {
-            areaColor: '#6CAFBE'
-          }
-        };
-      } else if (item.area === '华中大区') {
-        item.itemStyle = {
-          normal: {
-            areaColor: '#ADD03C'
-          },
-          emphasis: {
-            areaColor: '#ADD03C'
-          }
-        };
-      } else if (item.area === '华东大区') {
-        item.itemStyle = {
-          normal: {
-            areaColor: '#A13614'
-          },
-          emphasis: {
-            areaColor: '#A13614'
-          }
-        };
-      } else if (item.area === '华西大区') {
-        item.itemStyle = {
-          normal: {
-            areaColor: '#FFBA00'
-          },
-          emphasis: {
-            areaColor: '#FFBA00'
-          }
-        };
-      } else if (item.area === '华南大区') {
-        item.itemStyle = {
-          normal: {
-            areaColor: '#001AC5'
-          },
-          emphasis: {
-            areaColor: '#001AC5'
-          }
-        };
-      } else if (item.area === '南海诸岛') {
-        item.itemStyle = {
-          normal: {
-            borderColor: '#fff', // 区域边框颜色
-            areaColor: '#fff' // 区域颜色
-          },
-          emphasis: {
-            show: false
-            // borderColor: '#fff',
-            // areaColor:"#fff",
-          }
-        };
-      } else {
-        item.itemStyle = {
-          normal: {
-            areaColor: '#D9D9D9'
-          },
-          emphasis: {
-            areaColor: '#D9D9D9'
-          }
-        };
+  //红色点
+  redConvertData = data => {
+    var res = [];
+    for (var i = 0; i < data.length; i++) {
+      var geoCoord = redoordMap[data[i].name];
+      if (geoCoord) {
+        res.push({
+          name: data[i].name,
+          value: geoCoord.concat(data[i].value),
+          visualMap: false
+        });
       }
     }
-    const myChart = echarts.init(document.getElementById('mainMap'));
-    myChart.setOption({
+    return res;
+  };
+
+  randomValue = () => {
+    return Math.round(Math.random() * 1000);
+  };
+
+  getOption = () => {
+    return {
       tooltip: {
-        show: false, // 不显示提示标签
-        // formatter: '{b}', // 提示标签格式
-        //鼠标放地图的某一块，显示的提示框
-        formatter(params, ticket, callback) {
-          console.log(params);
-          return `'告警数'<br />${params.name}：${params.data.InValue}`;
-        },
-        backgroundColor: '#ff7f50', // 提示标签背景颜色
-        textStyle: { color: '#fff' } // 提示标签字体颜色
+        formatter: function(params, ticket, callback) {
+          return params.seriesName + '<br />' + params.name + '：' + params.value;
+        } //数据格式化
       },
-      grid: {
-        left: '10%',
-        right: '10%',
-        top: '10%',
-        bottom: '10%',
-        containLabel: true
+      visualMap: {
+        min: 0,
+        max: 1500,
+        left: 'left',
+        top: 'bottom',
+        text: ['高', '低'], //取值范围的文字
+        inRange: {
+          color: ['#001AC5', '#00FFF7'] //取值范围的颜色
+        },
+        show: true, //图注
+        itemWidth: 12,
+        itemHeight: 163,
+        textStyle: {
+          color: 'rgba(0,238,232,1)',
+          fontSize: 14,
+          fontWeight: 400,
+          fontFamily: 'Microsoft YaHei'
+        }
       },
+
       geo: {
         map: 'china',
-        roam: false,
-        zoom: 1.2,
-        tooltip: {
-          show: false // 不显示提示标签
-        },
+        zlevel: 3, //柱状图所有图形的 zlevel 值。
+        z: 3,
+        roam: true,
         label: {
           normal: {
-            show: false, // 显示省份标签
-            textStyle: { color: '#c71585' } // 省份标签字体颜色
-          },
-          emphasis: {
-            // 对应的鼠标悬浮效果
-            show: false,
-            textStyle: { color: '#800080' }
+            textStyle: {
+              color: 'rgba(0,0,0,0.4)'
+            }
           }
         },
         itemStyle: {
           normal: {
-            borderWidth: 0.5, // 区域边框宽度
-            borderColor: '#000', // 区域边框颜色
-            areaColor: '#ffefd5', // 区域颜色
-            label: { show: false }
+            borderColor: '#2AC9FE',
+            borderWidth: 1.5
           },
           emphasis: {
-            show: false,
-            borderWidth: 0.5,
-            borderColor: '#4b0082',
-            areaColor: '#ffdead'
+            areaColor: null,
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowBlur: 20,
+            borderWidth: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
           }
         }
       },
-
       series: [
         {
+          name: '坐标',
           type: 'scatter',
+          zlevel: 5, //柱状图所有图形的 zlevel 值。
+          z: 5,
           coordinateSystem: 'geo',
-          data: this.convertData(data),
-          symbolSize: 1,
-          symbolRotate: 40,
+          data: this.convertData(dataList),
+          symbolSize: 5,
+          symbol: '',
+          symbolRotate: 35,
           label: {
             normal: {
               formatter: '{b}',
-              position: 'top',
-              show: true
+              position: 'right',
+              show: false
             },
             emphasis: {
-              show: false
+              show: true
             }
           },
-          tooltip: {
-            show: false, // 不显示提示标签
-            // 显示提示的标签
-            formatter(name) {
-              return `Legend ${name}`;
-            }, // 提示标签格式
-            backgroundColor: '#fff', // 提示标签背景颜色
-            borderColor: '#ccc',
-            borderWidth: 5,
-            textStyle: { color: '#000' } // 提示标签字体颜色
-          },
           itemStyle: {
             normal: {
-              color: 'black'
+              color: 'yellow'
             }
           }
         },
         {
-          type: 'map',
-          mapType: 'china',
-          roam: false,
-          zoom: 1.2,
-          tooltip: {
-            show: false // 不显示提示标签
-          },
+          name: '坐标',
+          zlevel: 4, //柱状图所有图形的 zlevel 值。
+          z: 4, //柱状图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
+          type: 'effectScatter',
+          coordinateSystem: 'geo',
+          data: this.redConvertData(dataList),
+          symbolSize: 5,
+          symbol: '',
+          symbolRotate: 35,
           label: {
             normal: {
-              show: false // 显示省份标签
+              formatter: '{b}',
+              position: 'right',
+              show: false
             },
             emphasis: {
-              show: false
+              show: true
             }
           },
+          rippleEffect: {
+            //动画的时间
+            period: 4,
+            //动画中波纹的最大缩放比例
+            scale: 18,
+            //波纹的绘制方式可选 'stroke' 和 'fill'
+            brushType: 'fill'
+          },
+
           itemStyle: {
             normal: {
-              borderWidth: 0.5, // 区域边框宽度
-              borderColor: '#fff', // 区域边框颜色
-              label: { show: false }
-            },
-            emphasis: {
-              show: false
+              color: 'red'
             }
-          },
-          // geoIndex: 0,
-          //鼠标放入地图显示提示框
-          tooltip: { show: true },
-          data: provienceData
+          }
         },
-        //根据经纬度在地图上描点
         {
-          type: 'effectScatter',
-          coordinateSystem: 'geo',
-          // animation: true,
-          rippleEffect: {
-            brushType: 'stroke'
-          },
-          symbolSize: function(val, params) {
-            return 30;
-          },
-          data: dmtData.map(function(itemOpt) {
-            return {
-              // name: itemOpt.name,
-              value: [
-                itemOpt.longitude,
-                itemOpt.latitude
-                // itemOpt.value //数量
-              ],
-              label: {
-                emphasis: {
-                  position: 'right',
-                  show: false
-                }
-              },
-              itemStyle: {
-                normal: {
-                  // color: itemOpt.color //色值
-                  color: 'red'
-                }
+          name: '信息量',
+          type: 'map',
+          geoIndex: 0,
+          data: dataList
+        },
+        {
+          type: 'map',
+          map: 'china',
+          zlevel: 0, //柱状图所有图形的 zlevel 值。
+          z: 0,
+          roam: true,
+          label: {
+            normal: {
+              textStyle: {
+                color: 'rgba(0,0,0,0.4)'
               }
-            };
-          }),
-          symbolSize: function(val) {
-            return 5; //描点的大小
+            }
+          },
+          itemStyle: {
+            normal: {
+              borderColor: '#001AC5',
+              borderWidth: 8
+            }
+
           }
+
         }
       ]
-    });
-
-    // 鼠标放上颜色变红
-    // myChart.on('mouseover', params => {
-    //     params.color = '#d50000'
-    //     params.event.target.style.fill = '#d50000'
-    // });
-
-    myChart.on('click', params => {
-      if (params.name === '海南') {
-        this.props.history.push('/Dashboard/map2');
-      }
-    });
-  }
-
-  convertData(data) {
-    const res = [];
-    for (let i = 0; i < data.length; i++) {
-      const geoCoord = geoCoordMap[data[i].name];
-      if (geoCoord) {
-        res.push({
-          name: data[i].name,
-          value: geoCoord.concat(data[i].area),
-          area: data[i].area,
-          type: data[i].type,
-          InValue: data[i].InValue
-        });
-      }
-    }
-    return res;
-  }
+    };
+  };
 
   convert() {
     return '1';
   }
 
   render() {
-    let data  = alarmMapdata;
-
     return (
       <div className="statistics-view common-margin">
         {/*         <div className='statistics-title  statistics-title-content'>全国</div> */}
@@ -303,19 +217,22 @@ class Statistics extends Component {
               <div className="statistics-banner-item">
                 <div className="statistics-banner-itemblock">
                   <div className="statistics-text-number">
-                    {alarmMapdata.xygjCount}<span>{alarmMapdata.xygjCount}↑</span>
+                    {alarmMapdata.xygjCount}
+                    <span>{alarmMapdata.xygjCount}↑</span>
                   </div>
                   <p>现有告警</p>
                 </div>
                 <div className="statistics-banner-itemblock">
                   <div className="statistics-text-number">
-                  {alarmMapdata.ljgjCount}<span>{alarmMapdata.ljgjCountbh}↑</span>
+                    {alarmMapdata.ljgjCount}
+                    <span>{alarmMapdata.ljgjCountbh}↑</span>
                   </div>
                   <p>累计告警</p>
                 </div>
                 <div className="statistics-banner-itemblock">
                   <div className="statistics-text-number">
-                  {alarmMapdata.xqgjCount}<span> {alarmMapdata.xqgjCountbh}↑</span>
+                    {alarmMapdata.xqgjCount}
+                    <span> {alarmMapdata.xqgjCountbh}↑</span>
                   </div>
                   <p>消缺告警</p>
                 </div>
@@ -325,19 +242,22 @@ class Statistics extends Component {
               <div className="statistics-banner-item">
                 <div className="statistics-banner-itemblock">
                   <div className="statistics-text-number">
-                  {alarmMapdata.xyyhCount}<span> {alarmMapdata.xyyhCountbh}↑</span>
+                    {alarmMapdata.xyyhCount}
+                    <span> {alarmMapdata.xyyhCountbh}↑</span>
                   </div>
                   <p>现有隐患</p>
                 </div>
                 <div className="statistics-banner-itemblock">
                   <div className="statistics-text-number">
-                  {alarmMapdata.ljyhCount}<span>{alarmMapdata.ljyhCountbh}↑</span>
+                    {alarmMapdata.ljyhCount}
+                    <span>{alarmMapdata.ljyhCountbh}↑</span>
                   </div>
                   <p>累计隐患</p>
                 </div>
                 <div className="statistics-banner-itemblock">
                   <div className="statistics-text-number">
-                  {alarmMapdata.zlyhCount}<span>{alarmMapdata.zlyhCountbh}↑</span>
+                    {alarmMapdata.zlyhCount}
+                    <span>{alarmMapdata.zlyhCountbh}↑</span>
                   </div>
                   <p>治理隐患</p>
                 </div>
@@ -345,7 +265,7 @@ class Statistics extends Component {
             </div>
           </div>
           {/* <MapChart option={option123}  style={{ height: '100%', width: '100%' }} /> */}
-          <div id="mainMap" style={{ width: '90%', height: '86%', margin: '0 auto', paddingTop: '3%' }}></div>
+          <ReactEcharts option={this.getOption()} className="div-map-echarts" />
         </CommonCard>
       </div>
     );