拆分各页面显示内容及按钮

src/components/FloodControl/WaterLevel.js

@@ -88,10 +88,7 @@ class WaterLevel extends PureComponent {
       ],
       legend: {
         //图例配置
-        // icon:'arrow',
-        // width:'2',
         itemHeight: 0, //远点宽度为0不显示原点
-        // right: '10%',
         data: ["区域1", "区域2", "区域3"],
         textStyle: {
           color: "#c9d2d2",

src/components/FloodControl/indexCenter.js

@@ -9,6 +9,7 @@ import {
 } from "./style";
 import ChartBox from "../ChartBox";
 import BMap from "../centerPage/charts/BMap";
+import { ShowIconType } from "../Map/MockData";
 
 class index extends PureComponent {
   constructor(props) {
@@ -34,7 +35,15 @@ class index extends PureComponent {
             </FloodItem>
           ))}
         </CenterFloodTop>
-        <BMap />
+        <BMap
+          actives={[
+            ShowIconType.Personnel,
+            ShowIconType.Car,
+            ShowIconType.Waterlogging,
+            ShowIconType.Video,
+            ShowIconType.All,
+          ]}
+        />
       </CenterPage>
     );
   }

src/components/Map/Legend.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 function Legend(props) {
   const { list, style, active, onClick } = props;
-
+  console.log(list);
   return (
     <Box style={style}>
       {list.map((item) => (
@@ -26,7 +26,7 @@ const Box = styled.ul`
   z-index: 999;
   color: #fff;
   font-size: 16px;
-  top: 100px;
+  top: 40%;
   text-align: center;
   left: 26vw;
 `;

src/components/Map/MockData.js

@@ -4,10 +4,91 @@ const ItemType = {
   pump: 2,
 };
 
+export const ShowIconType = {
+  WaterWorks: 0, //水厂
+  Pump: 1, //泵
+  PipeNet: 2, //官网
+  BigUserCompany: 3, //企业
+  BigUserWaterMeter: 4, //水表
+  Waterlogging: 5, //内涝
+  Flow: 6, //流量泵
+  Rainfall: 7, //降雨量
+  Video: 8, //视频
+  Personnel: 9, //人员
+  Car: 10, //企业
+  All: -1, //全部
+
+  InPipeNet: 21, //供水官网
+  OutPipeNet: 22, //排水官网
+};
+
+export const IconType = {
+  WaterWorks: "iconWater",
+  Pump: "iconPump",
+  PipeNet: null,
+  BigUserCompany: "iconCompany",
+  BigUserWaterMeter: "iconCompany",
+  Waterlogging: "iconWater2",
+  Flow: "iconWaterPump",
+  Rainfall: "iconRainfall",
+  Video: null,
+  Personnel: "iconPerson",
+  Car: "iconCar",
+};
+
+export const PipeData = [
+  {
+    type: ShowIconType.InPipeNet,
+    name: "供水管网",
+    icon: IconType.PipeNet,
+    data: [
+      {
+        strokeColor: "red",
+        strokeWeight: 2,
+        fillColor: "#0ab8d9",
+        fillOpacity: 0.3,
+        position: [
+          { lng: 116.39829290421633, lat: 40.18892017402776 },
+          { lng: 116.25916334683096, lat: 40.169957230404016 },
+          { lng: 116.12003378944557, lat: 40.150988945208915 },
+          { lng: 116.13440667760521, lat: 40.04060244030742 },
+          { lng: 116.14877956576487, lat: 39.930035509314486 },
+          { lng: 116.19799852535938, lat: 39.8634192849549 },
+          { lng: 116.24721748495391, lat: 39.796737802722014 },
+        ],
+      },
+    ],
+  },
+  {
+    type: ShowIconType.OutPipeNet,
+    name: "排水管网",
+    icon: IconType.PipeNet,
+    data: [
+      {
+        strokeColor: "#66ccff",
+        strokeWeight: 2,
+        fillColor: "#0ab8d9",
+        fillOpacity: 0.3,
+        position: [
+          { lng: 116.24721748495391, lat: 39.796737802722014 },
+          { lng: 116.322837465736, lat: 39.78383959531996 },
+          { lng: 116.39845744651808, lat: 39.77093895027502 },
+          { lng: 116.53865456380538, lat: 39.74764618546205 },
+          { lng: 116.67885168109265, lat: 39.724345479834405 },
+          { lng: 116.68690049846205, lat: 39.924723760492924 },
+          { lng: 116.69494931583147, lat: 40.12451264487721 },
+          { lng: 116.5466211100239, lat: 40.15672410636046 },
+        ],
+      },
+    ],
+  },
+];
+
 export default [
   {
     type: 0,
     name: "水厂",
+    icon: IconType.WaterWorks,
     data: [
       {
         name: "第一水厂",
@@ -95,6 +176,7 @@ export default [
   {
     type: 1,
     name: "泵站",
+    icon: IconType.Pump,
     data: [
       {
         name: "第一泵站",
@@ -116,6 +198,7 @@ export default [
   {
     type: 2,
     name: "管网",
+    icon: IconType.PipeNet,
     data: [
       {
         strokeColor: "red",
@@ -153,6 +236,7 @@ export default [
   {
     type: 3,
     name: "大用户企业",
+    icon: IconType.BigUserCompany,
     data: [
       {
         name: "第一泵站",
@@ -181,6 +265,7 @@ export default [
   {
     type: 4,
     name: "大用户水表",
+    icon: IconType.BigUserWaterMeter,
     data: [
       {
         name: "XX物业公司",
@@ -209,6 +294,7 @@ export default [
   {
     type: 5,
     name: "内涝点",
+    icon: IconType.Waterlogging,
     data: [
       {
         name: "XX区域",
@@ -230,6 +316,7 @@ export default [
   {
     type: 6,
     name: "流量",
+    icon: IconType.Flow,
     data: [
       {
         name: "水泵",
@@ -264,6 +351,7 @@ export default [
     type: 7,
     name: "降雨量",
     current: "分钟级：0.2mm",
+    icon: IconType.Rainfall,
     data: [
       {
         name: "XX区域",
@@ -274,6 +362,7 @@ export default [
   {
     type: 8,
     name: "视频",
+    icon: IconType.Video,
     data: [
       {
         name: "XX区域",
@@ -284,6 +373,7 @@ export default [
   {
     type: 9,
     name: "人员",
+    icon: IconType.Personnel,
     data: [
       {
         name: "张三",
@@ -313,6 +403,7 @@ export default [
   {
     type: 10,
     name: "车辆",
+    icon: IconType.Car,
     data: [
       {
         name: "抢修车01",

src/components/PineNet/indexCenter.js

@@ -3,6 +3,7 @@ import React, { PureComponent } from "react";
 import { CenterPage, CenterTop, LeftPage, RightPage } from "./style";
 import ChartBox from "../ChartBox";
 import BMap from "../centerPage/charts/BMap";
+import { ShowIconType } from "../Map/MockData";
 
 class index extends PureComponent {
   constructor(props) {
@@ -28,7 +29,7 @@ class index extends PureComponent {
             </div>
           ))}
         </CenterTop>
-        <BMap />
+        <BMap actives={[ShowIconType.PipeNet, ShowIconType.All]} />
       </CenterPage>
     );
   }

src/components/PumpStation/indexCenter.js

@@ -3,6 +3,7 @@ import React, { PureComponent } from "react";
 import { CenterPage, CenterTop, LeftPage, RightPage } from "./style";
 import ChartBox from "../ChartBox";
 import BMap from "../centerPage/charts/BMap";
+import { ShowIconType } from "../Map/MockData";
 
 class index extends PureComponent {
   constructor(props) {
@@ -28,7 +29,7 @@ class index extends PureComponent {
             </div>
           ))}
         </CenterTop>
-        <BMap />
+        <BMap actives={[ShowIconType.Pump]} />
       </CenterPage>
     );
   }

src/components/Sewage/index.js

@@ -7,6 +7,7 @@ import EnergyConsumption from "./EnergyConsumption";
 import ProductionTarget from "./ProductionTarget";
 import BMap from "../centerPage/charts/BMap";
 import UserWaterUsage from "./UserWaterUsage";
+import { ShowIconType } from "../Map/MockData";
 
 class index extends PureComponent {
   constructor(props) {
@@ -30,7 +31,14 @@ class index extends PureComponent {
             <UserWaterUsage height="25vh" />
           </ChartBox>
         </LeftPage>
-        <BMap />
+        <BMap
+          actives={[
+            ShowIconType.WaterWorks,
+            ShowIconType.Pump,
+            ShowIconType.BigUserCompany,
+            ShowIconType.All,
+          ]}
+        />
       </div>
     );
   }

src/components/WaterSupply/index.js

@@ -6,6 +6,7 @@ import UserWaterUsage from "./UserWaterUsage";
 import EnergyConsumption from "../Sewage/EnergyConsumption";
 import WaterVolume from "./WaterVolume";
 import BMap from "../centerPage/charts/BMap";
+import { ShowIconType } from "../Map/MockData";
 
 class index extends PureComponent {
   constructor(props) {
@@ -29,7 +30,14 @@ class index extends PureComponent {
             <UserWaterUsage height="22vh" />
           </ChartBox>
         </LeftPage>
-        <BMap />
+        <BMap
+          actives={[
+            ShowIconType.WaterWorks,
+            ShowIconType.Pump,
+            ShowIconType.BigUserCompany,
+            ShowIconType.All,
+          ]}
+        />
       </div>
     );
   }

src/components/centerPage/charts/BMap.js

@@ -5,7 +5,7 @@ import { styleJson } from "./BMapConfig";
 import styled from "styled-components";
 import Project, { IconType } from "../../Map/Project";
 import ArrowPolyline from "../../Map/ArrowPolyline";
-import MockData from "../../Map/MockData";
+import MockData, { PipeData, ShowIconType } from "../../Map/MockData";
 import Legend from "../../Map/Legend";
 const { BMapGL, BMapGLLib } = window;
 
@@ -18,6 +18,8 @@ class BMap extends PureComponent {
       infoData: null,
       MockData: [...MockData, { type: -1, name: "全部" }],
       active: -1,
+
+      data: this.initData(),
     };
     this.randomParams = this.randomParams.bind(this);
     // this.draw = this.draw.bind(this);
@@ -28,6 +30,7 @@ class BMap extends PureComponent {
   lineLayer = null;
 
   componentDidMount() {
+    // this.initData();
     // var styleOptions = {
     //   strokeColor: "#5E87DB", // 边线颜色
     //   fillColor: "#5E87DB", // 填充颜色。当参数为空时，圆形没有填充颜色
@@ -86,8 +89,29 @@ class BMap extends PureComponent {
     if (active == -1) {
     }
   }
+
+  showIcon(type) {
+    const { active } = this.state;
+    if (active == -1 || active == type) return true;
+    return false;
+  }
+
+  initData() {
+    const { actives } = this.props;
+    //如果显示中有管网需要把官网去掉，然后增加供水管网和排水官网按钮
+    const list = MockData.filter(
+      (item) =>
+        this.props.actives.findIndex(
+          (cur) => cur == item.type && cur != ShowIconType.PipeNet
+        ) !== -1
+    );
+    if (actives.findIndex((item) => item == ShowIconType.PipeNet) !== -1)
+      return [...PipeData, ...list];
+    return list;
+  }
+
   render() {
-    const { MockData, active } = this.state;
+    const { MockData, active, data } = this.state;
     return (
       <BMapBox>
         <Map
@@ -99,143 +123,55 @@ class BMap extends PureComponent {
             height: "100%",
           }}
           center={new BMapGL.Point(116.402544, 39.928216)} //{ lng: 116.402544, lat: 39.928216 }
-          minZoom={11}
+          minZoom={12}
           zoom={11}
           mapStyleV2={{
             styleJson,
           }}
           enableScrollWheelZoom
         >
-          {/* 水厂 */}
-          {(active == -1 || active === 0) &&
-            MockData[0].data?.map((item, index) => (
-              <Project
-                key={`0_${index}`}
-                title={item.name}
-                position={item.position}
-                data={item.data}
-                icon={IconType.WaterWorks}
-              />
-            ))}
-
-          {/* 泵站 */}
-          {(active == -1 || active === 1) &&
-            MockData[1].data?.map((item, index) => (
-              <Project
-                key={`1_${index}`}
-                title={item.name}
-                position={item.position}
-                data={item.data}
-                icon={IconType.Pump}
-              />
-            ))}
-
-          {/* 管网 */}
-          {(active == -1 || active === 2) &&
-            MockData[2].data?.map((item, index) => (
-              <ArrowPolyline
-                key={`2_${index}`}
-                points={item.position}
-                strokeColor={item.strokeColor}
-                strokeWeight={item.strokeWeight}
-                fillColor={item.fillColor}
-                fillOpacity={item.fillOpacity}
-              />
-            ))}
-
-          {/* 大用户企业 */}
-          {(active == -1 || active === 3) &&
-            MockData[3].data?.map((item, index) => (
-              <Project
-                key={`3_${index}`}
-                title={item.name}
-                position={item.position}
-                data={item.data}
-                icon={IconType.Company}
-              />
-            ))}
-
-          {/* 大用户水表 */}
-          {(active == -1 || active === 4) &&
-            MockData[4].data?.map((item, index) => (
-              <Project
-                key={`4_${index}`}
-                title={item.name}
-                position={item.position}
-                data={item.data}
-                icon={IconType.Company}
-              />
-            ))}
-
-          {/* 内涝点 */}
-          {(active == -1 || active === 5) &&
-            MockData[5].data?.map((item, index) => (
-              <Project
-                key={`5_${index}`}
-                title={item.current || item.name}
-                position={item.position}
-                data={item.data}
-                icon={IconType.Water}
-              />
-            ))}
-          {/*  流量 */}
-          {(active == -1 || active === 6) &&
-            MockData[6].data?.map((item, index) => (
-              <Project
-                key={`6_${index}`}
-                showLushu={true}
-                title={item.name}
-                position={item.position}
-                points={item.points}
-                data={item.data}
-                icon={IconType.WaterPump}
-              />
-            ))}
-
-          {/* 降雨量 */}
-          {(active == -1 || active === 7) &&
-            MockData[7].data?.map((item, index) => (
-              <Project
-                key={`7_${index}`}
-                title={item.current || item.name}
-                position={item.position}
-                data={item.data}
-                icon={IconType.Rainfall}
-              />
-            ))}
-          {/* TODO: 视频 */}
-
-          {/* 人员 */}
-          {(active == -1 || active === 9) &&
-            MockData[9].data?.map((item, index) => (
-              <Project
-                key={`9_${index}`}
-                showLushu={true}
-                icon={IconType.Person}
-                title={item.name}
-                position={item.position}
-                points={item.points}
-                data={item.data}
-              />
-            ))}
-
-          {/* 车辆 */}
-          {(active == -1 || active === 10) &&
-            MockData[10].data?.map((item, index) => (
-              <Project
-                key={`10_${index}`}
-                showLushu={true}
-                icon={IconType.Car}
-                title={item.name}
-                position={item.position}
-                points={item.points}
-                data={item.data}
-              />
-            ))}
+          {data.map((cur) => {
+            if (
+              cur.type == ShowIconType.InPipeNet ||
+              cur.type == ShowIconType.OutPipeNet
+            )
+              return (
+                this.showIcon(cur.type) &&
+                cur.data?.map((item, index) => (
+                  <ArrowPolyline
+                    key={`cur_${index}`}
+                    points={item.position}
+                    strokeColor={item.strokeColor}
+                    strokeWeight={item.strokeWeight}
+                    fillColor={item.fillColor}
+                    fillOpacity={item.fillOpacity}
+                  />
+                ))
+              );
+            return (
+              this.showIcon(cur.type) &&
+              cur?.data?.map((item, index) => {
+                let lushu = {};
+                if (item.points)
+                  //是否可以展示运动轨迹
+                  lushu = { showLushu: true, points: item.points };
+                return (
+                  <Project
+                    key={`${item}_${index}`}
+                    title={item.name}
+                    position={item.position}
+                    data={item.data}
+                    icon={cur.icon}
+                    {...lushu}
+                  />
+                );
+              })
+            );
+          })}
         </Map>
 
         <Legend
-          list={MockData}
+          list={[...data, { type: -1, name: "全部" }]}
           active={active}
           onClick={(active) => this.setState({ active: active })}
         />