图表

src/assets/nav_bg.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="143px" height="44px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -665 -1024 )">
+    <path d="M 666.985012634425 1066.5  L 679.285012634425 1025.5  L 806.014987365575 1025.5  L 793.714987365575 1066.5  L 666.985012634425 1066.5  Z " fill-rule="nonzero" fill="#141415" stroke="none" />
+    <path d="M 665 1068  L 678.2 1024  L 808 1024  L 794.8 1068  L 665 1068  Z M 679.646683512566 1026  L 667.646683512566 1066  L 793.353316487434 1066  L 805.353316487434 1026  L 679.646683512566 1026  Z " fill-rule="nonzero" fill="#027db3" stroke="none" />
+  </g>
+</svg>

src/components/ChartBox/index.js

@@ -0,0 +1,27 @@
+import React, { useMemo, useState } from "react";
+import { ModelBox } from "./style";
+
+export default (props) => {
+  const { title, children, style } = props;
+
+  return (
+    <ModelBox style={style}>
+      <div className="main">
+        <div className="titleLeft">
+          <img
+            className="titleImg"
+            src={require("../../assets/chartBox/titleBefor.png")}
+          />
+          <span className="title">{title}</span>
+        </div>
+        <div className="titleRight"></div>
+
+        <img
+          className="titleBorder"
+          src={require("../../assets/chartBox/titleBorder.png")}
+        />
+      </div>
+      {children}
+    </ModelBox>
+  );
+};

src/components/ChartBox/style.js

@@ -0,0 +1,104 @@
+import styled from "styled-components";
+
+export const ModelBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  line-height: 1;
+  font-size: 0.14rem;
+  background: linear-gradient(rgba(29, 56, 104, 0.72), rgba(4, 18, 51, 0.76));
+  border: 1px solid;
+  border-image: linear-gradient(
+      45deg,
+      rgba(74, 196, 253, 0.45),
+      rgba(173, 219, 240, 0.34),
+      rgba(146, 213, 249, 0.28)
+    )
+    1;
+  opacity: 1;
+
+  .tabBox {
+    width: 100%;
+    padding: 0.16rem;
+    padding-bottom: 0;
+  }
+  ::-webkit-scrollbar {
+    background: transparent;
+  }
+  .main {
+    padding: 10px 14px 0;
+    width: 100%;
+    height: 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    margin-bottom: 10px;
+
+    .titleImg {
+      width: 4px;
+      height: 30px;
+      margin-right: 18px;
+    }
+    .titleBg {
+      width: 100%;
+      height: 46.5px;
+    }
+
+    .title {
+      font-size: 18px;
+      // font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+      font-weight: 500;
+      color: #c9efff;
+      letter-spacing: 2px;
+      margin-top: -4px;
+    }
+    .icon {
+      width: 20px;
+      height: 20px;
+      pointer-events: initial;
+      flex-shrink: 0;
+    }
+
+    .titleBorder {
+      position: absolute;
+      top: 40px;
+      left: 13px;
+      width: 100%;
+      height: 1px;
+    }
+
+    .arrow {
+      position: absolute;
+      right: 14px;
+      top: 29px;
+      width: 26px;
+      height: 26px;
+      pointer-events: initial;
+      transition: transform 0.2s;
+    }
+
+    .titleBg {
+      height: 47px;
+      width: 100%;
+      background: url(${require("../../assets/chartBox/title-bg.png")});
+      background-size: 100% 100%;
+    }
+    .titleBgMini {
+      background-image: url(${require("../../assets/chartBox/title-bg-mini.png")});
+    }
+
+    .titleLeft {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      vertical-align: middle;
+      display: flex;
+      align-items: center;
+    }
+    .titleRight {
+      flex-shrink: 0;
+      width: 50px;
+    }
+  }
+`;

src/components/Nav/index.js

@@ -0,0 +1,59 @@
+import React from "react";
+import styled from "styled-components";
+export const Navbar = styled.div`
+  position: fixed;
+  bottom: 0;
+  width: 60%;
+  left: 50%;
+  transform: translateX(-50%);
+
+  height: 70px;
+  font-size: 18px;
+  z-index: 999;
+  &:hover {
+    .content {
+      width: 100%;
+      transform: translateY(0);
+    }
+  }
+  .content {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    transition: all 0.4s;
+    transform: translateY(100%);
+  }
+`;
+export const NavItem = styled.a`
+  color: #fff;
+  text-align: center;
+  cursor: pointer;
+  font-family: "Roboto", sans-serif;
+  font-weight: bold;
+  letter-spacing: 1px;
+  transition: all 0.3s ease-in-out;
+  background: url(${require("../../assets/nav_bg.svg")}) no-repeat center;
+  background-size: 100% 100%;
+  flex: 1;
+  height: 70px;
+  line-height: 70px;
+  &:hover {
+    transform: scale(1.1);
+  }
+`;
+const NavigationBar = () => {
+  return (
+    <Navbar>
+      <div className="content">
+        <NavItem href="/#/">综合展示</NavItem>
+        <NavItem href="/#/water-supply">供水</NavItem>
+        <NavItem href="/#/sewage">污水</NavItem>
+        <NavItem>管网</NavItem>
+        <NavItem>泵站</NavItem>
+        <NavItem>防汛调度</NavItem>
+      </div>
+    </Navbar>
+  );
+};
+export default NavigationBar;

src/components/Overview/EnergyRanking .js

@@ -0,0 +1,49 @@
+// 水厂能耗排名
+import React, { PureComponent } from "react";
+import { CapsuleChart } from "@jiaminghi/data-view-react";
+
+class EnergyRanking extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      config: {
+        // 单位
+        unit: "",
+        showValue: false,
+        data: [],
+      },
+    };
+  }
+  render() {
+    const userIdentityCategory = {
+      data: [
+        { value: 100, name: "第三水厂" },
+        { value: 90, name: "第五水厂" },
+        { value: 85, name: "第二水厂" },
+        { value: 84, name: "第一水厂" },
+        { value: 70, name: "第七水厂" },
+      ],
+    };
+    const config = {
+      ...this.state.config,
+      ...userIdentityCategory,
+    };
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <CapsuleChart
+          config={config}
+          style={{
+            height: "100%",
+          }}
+        />
+      </div>
+    );
+  }
+}
+
+export default EnergyRanking;

src/components/Overview/FloodStat.js

@@ -0,0 +1,98 @@
+// 当年防汛统计
+import React, { PureComponent } from "react";
+import Chart from "../../utils/chart";
+
+class FloodStat extends PureComponent {
+  constructor(props) {
+    super(props);
+  }
+  getOptions() {
+    return {
+      color: ["#38b3ff", "#00CA95"],
+      tooltip: {},
+      legend: {
+        data: ["内涝点数量", "受损内涝点数量"],
+        textStyle: {
+          color: "#fff",
+        },
+      },
+      grid: {
+        top: 35,
+        left: "3%",
+        right: "4%",
+        bottom: "3%",
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: "category",
+          data: [
+            "区域1",
+            "区域2",
+            "区域3",
+            "区域4",
+            "区域5",
+            "区域6",
+            "区域7",
+            "区域8",
+          ],
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+              fontSize: 14,
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#fff",
+            },
+          },
+        },
+      ],
+      yAxis: [
+        {
+          type: "value",
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+              fontSize: 14,
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#fff",
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: "内涝点数量",
+          type: "line",
+          smooth: true,
+          data: [20, 35, 18, 25, 30, 28, 36, 42],
+        },
+        {
+          name: "受损内涝点数量",
+          type: "bar",
+          barWidth: "50%",
+          data: [12, 26, 9, 16, 21, 12, 28, 18],
+        },
+      ],
+    };
+  }
+  render() {
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <Chart option={this.getOptions()} />
+      </div>
+    );
+  } //endrender
+}
+
+export default FloodStat;

src/components/Overview/PipelineMonitoring.js

@@ -0,0 +1,113 @@
+// 当月管网监测
+import React, { PureComponent } from "react";
+import Chart from "../../utils/chart";
+
+class PipelineMonitoring extends PureComponent {
+  constructor(props) {
+    super(props);
+  }
+  getOptions() {
+    return {
+      color: ["#38b3ff", "#00CA95"],
+      tooltip: {},
+      legend: {
+        textStyle: {
+          color: "#fff",
+        },
+      },
+      grid: {
+        left: "3%",
+        right: "3%",
+        bottom: "3%",
+        top: 35,
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: "category",
+          data: [
+            "03-01",
+            "03-02",
+            "03-03",
+            "03-04",
+            "03-05",
+            "03-06",
+            "03-07",
+            "03-08",
+            "03-09",
+            "03-10",
+            "03-11",
+            "03-12",
+            "03-13",
+          ],
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+              fontSize: 14,
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#fff",
+            },
+          },
+        },
+      ],
+      yAxis: [
+        {
+          type: "value",
+          name: "流量（m3/h）",
+          axisLine: {
+            lineStyle: "#fff",
+          },
+          axisLabel: {
+            color: "#fff",
+          },
+        },
+        {
+          name: "压力（m3/h）",
+          type: "value",
+          splitLine: { show: false },
+          axisLabel: {
+            color: "#fff",
+          },
+          axisLine: {
+            lineStyle: "#fff",
+          },
+        },
+      ],
+      series: [
+        {
+          name: "压力",
+          type: "line",
+          smooth: true,
+          symbol: "none",
+          data: [20, 25, 18, 25, 20, 18, 26, 12, 20, 18, 16, 22, 16],
+        },
+        {
+          name: "流量",
+          type: "line",
+          smooth: true,
+          symbol: "none",
+          areaStyle: {},
+          yAxisIndex: 1,
+          data: [25, 30, 28, 36, 42, 20, 28, 36, 42, 30, 35, 18, 16],
+        },
+      ],
+    };
+  }
+  render() {
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <Chart option={this.getOptions()} />
+      </div>
+    );
+  } //endrender
+}
+
+export default PipelineMonitoring;

src/components/Overview/WaterPlantMonitoring.js

@@ -0,0 +1,75 @@
+import React, { PureComponent } from "react";
+import { ScrollBoard } from "@jiaminghi/data-view-react";
+
+class WaterPlantMonitoring extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      config: {
+        // 表头背景色
+        headerBGC: "#443dc5",
+        // 奇数行背景色
+        oddRowBGC: "#09184F",
+        // 偶数行背景色
+        evenRowBGC: "#070C34",
+        // 行号
+        index: false,
+        // 行号表头
+        // indexHeader: '序号',
+        // 宽度
+        // columnWidth: [50, 100, 200],
+        // 对其方式
+        align: ["center"],
+        // 表行数
+        rowNum: 8,
+      },
+    };
+  }
+
+  render() {
+    const { height } = this.props;
+    const userSitua = {
+      header: ["水厂名称", "处理量", "COD", "氨氯", "pH"],
+      data: [
+        ["第一水厂", "1530m³/L", "33mg/L", "41mg/L", "7.8"],
+        ["第一水厂", "1530m³/L", "33mg/L", "41mg/L", "7.8"],
+        ["第一水厂", "1530m³/L", "33mg/L", "41mg/L", "7.8"],
+        ["第一水厂", "1530m³/L", "33mg/L", "41mg/L", "7.8"],
+        ["第一水厂", "1530m³/L", "33mg/L", "41mg/L", "7.8"],
+        ["第一水厂", "1530m³/L", "33mg/L", "41mg/L", "7.8"],
+        ["第一水厂", "1530m³/L", "33mg/L", "41mg/L", "7.8"],
+        ["第一水厂", "1530m³/L", "33mg/L", "41mg/L", "7.8"],
+        ["第一水厂", "1530m³/L", "33mg/L", "41mg/L", "7.8"],
+        ["第一水厂", "1530m³/L", "33mg/L", "41mg/L", "7.8"],
+        ["第一水厂", "1530m³/L", "33mg/L", "41mg/L", "7.8"],
+        ["第一水厂", "1530m³/L", "33mg/L", "41mg/L", "7.8"],
+        ["第一水厂", "1530m³/L", "33mg/L", "41mg/L", "7.8"],
+        ["第一水厂", "1530m³/L", "33mg/L", "41mg/L", "7.8"],
+        ["第一水厂", "1530m³/L", "33mg/L", "41mg/L", "7.8"],
+        ["第一水厂", "1530m³/L", "33mg/L", "41mg/L", "7.8"],
+      ],
+    };
+    const config = {
+      ...this.state.config,
+      ...userSitua,
+    };
+
+    return (
+      <div
+        style={{
+          width: "100%",
+        }}
+      >
+        <ScrollBoard
+          style={{
+            width: "100%",
+            height: height,
+          }}
+          config={config}
+        ></ScrollBoard>
+      </div>
+    );
+  }
+}
+
+export default WaterPlantMonitoring;

src/components/Overview/WaterUsage.js

@@ -0,0 +1,70 @@
+// 当年自来水主要使用用途
+import React, { PureComponent } from "react";
+import Chart from "../../utils/chart";
+
+class WaterUsage extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      renderer: "canvas",
+    };
+  }
+  getOptions() {
+    return {
+      legend: {
+        orient: "vertical", // 设置为垂直布局
+        right: "8%", // 设置到最右侧
+        top: "center", // 设置垂直居中
+        textStyle: {
+          color: "#ffffff", // 将字体颜色设置为白色
+        },
+      },
+
+      series: [
+        {
+          name: "用水类型",
+          type: "pie",
+          radius: ["50%", "70%"],
+          avoidLabelOverlap: false,
+          label: {
+            show: false,
+            position: "center",
+          },
+          center: ["35%","48%"],
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: "14",
+              fontWeight: "bold",
+            },
+          },
+          labelLine: {
+            show: false,
+          },
+          data: [
+            { value: 120, name: "饮用水" },
+            { value: 220, name: "生活用水" },
+            { value: 150, name: "工业用水" },
+            { value: 50, name: "农业用水" },
+            { value: 100, name: "绿化灌溉" },
+            { value: 80, name: "水源存储" },
+          ],
+        },
+      ],
+    };
+  }
+  render() {
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <Chart option={this.getOptions()} />
+      </div>
+    );
+  } //endrender
+}
+
+export default WaterUsage;

src/components/Overview/WaterVolumeStat.js

@@ -0,0 +1,133 @@
+// 当年水量统计
+import React, { PureComponent } from "react";
+import Chart from "../../utils/chart";
+
+class WaterVolumeStat extends PureComponent {
+  constructor(props) {
+    super(props);
+  }
+  getOptions() {
+    return {
+      color: ["#38b3ff", "#00CA95", "#8400FF"],
+      tooltip: {
+        // trigger: "axis",
+        // axisPointer: {
+        //   type: "cross",
+        // },
+      },
+      legend: {
+        // data: ["水量（m³）", "产销差（%）"],
+        textStyle: {
+          color: "#fff",
+        },
+      },
+      grid: {
+        left: "3%",
+        right: "4%",
+        bottom: "3%",
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: "category",
+          data: [
+            "1月",
+            "2月",
+            "3月",
+            "4月",
+            "5月",
+            "6月",
+            "7月",
+            "8月",
+            "9月",
+            "10月",
+            "11月",
+            "12月",
+          ],
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+              fontSize: 14,
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#fff",
+            },
+          },
+        },
+      ],
+      yAxis: [
+        {
+          type: "value",
+          name: "水量（m³）",
+          alignTicks: true,
+          inside: true,
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+              fontSize: 14,
+            },
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: "#fff",
+            },
+          },
+        },
+        {
+          name: "产销差",
+          type: "value",
+          position: "right",
+          alignTicks: true,
+          axisLabel: {
+            color: "#fff",
+            fontSize: 14,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: "#fff",
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: "产水量",
+          type: "bar",
+          barWidth: "20%",
+          smooth: true,
+          data: [20, 35, 18, 25, 30, 28, 36, 42, 30, 28, 36, 42],
+        },
+        {
+          name: "销水量",
+          type: "bar",
+          barWidth: "20%",
+          smooth: true,
+          data: [25, 30, 28, 36, 42, 20, 28, 36, 42, 30, 35, 18],
+        },
+        {
+          type: "line",
+          name: "产销差率",
+          data: [12, 26, 9, 16, 21, 12, 28, 18, 26, 9, 16, 21],
+        },
+      ],
+    };
+  }
+  render() {
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <Chart option={this.getOptions()} />
+      </div>
+    );
+  } //endrender
+}
+
+export default WaterVolumeStat;

src/components/Sewage/EnergyConsumption.js

@@ -0,0 +1,146 @@
+// 当月各个水厂耗能
+import React, { PureComponent } from "react";
+import Chart from "../../utils/chart";
+
+class EnergyConsumption extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      renderer: "canvas",
+    };
+  }
+  getOptions() {
+    function generateNumbers() {
+      var numbers = [];
+      for (var i = 0; i < 30; i++) {
+        numbers.push(Math.floor(Math.random() * 100));
+      }
+      return numbers;
+    }
+    return {
+      // color: ["#3C4FD6", "#F6AC4B"],
+      xAxis: {
+        type: "category",
+        data: [
+          "1日",
+          "2日",
+          "3日",
+          "4日",
+          "5日",
+          "6日",
+          "7日",
+          "8日",
+          "9日",
+          "10日",
+          "11日",
+          "12日",
+          // "13日",
+          // "14日",
+          // "15日",
+          // "16日",
+          // "17日",
+          // "18日",
+          // "19日",
+          // "20日",
+          // "21日",
+          // "22日",
+          // "23日",
+          // "24日",
+          // "25日",
+          // "26日",
+          // "27日",
+          // "28日",
+          // "29日",
+          // "30日",
+          // "31日",
+        ],
+        axisLabel: {
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+          },
+        },
+        grid: {
+          top: 60,
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#fff",
+          },
+        },
+      },
+      yAxis: {
+        type: "value",
+        name: "能耗（kWh）",
+        axisLabel: {
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#fff",
+          },
+        },
+      },
+      series: [
+        {
+          data: generateNumbers(),
+          name: "第一水厂",
+          type: "line",
+          smooth: true,
+          symbol: "none",
+        },
+        {
+          data: generateNumbers(),
+          name: "第二水厂",
+          type: "line",
+          smooth: true,
+          symbol: "none",
+        },
+        {
+          data: generateNumbers(),
+          name: "第三水厂",
+          type: "line",
+          smooth: true,
+          symbol: "none",
+        },
+        {
+          data: generateNumbers(),
+          name: "第四水厂",
+          type: "line",
+          smooth: true,
+          symbol: "none",
+        },
+        {
+          data: generateNumbers(),
+          name: "第五水厂",
+          type: "line",
+          smooth: true,
+          symbol: "none",
+        },
+      ],
+      legend: {
+        show: true,
+        textStyle: {
+          color: "#fff",
+        },
+      },
+    };
+  }
+  render() {
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <Chart option={this.getOptions()} />
+      </div>
+    );
+  } //endrender
+}
+
+export default EnergyConsumption;

src/components/Sewage/ProductionTarget.js

@@ -0,0 +1,102 @@
+// 当年生产指标
+import React, { PureComponent } from "react";
+import Chart from "../../utils/chart";
+
+class WaterVolume extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      renderer: "canvas",
+    };
+  }
+  getOptions() {
+    return {
+      color: ["#3C4FD6", "#F6AC4B"],
+      grid: {
+        top: 35,
+        right: 36,
+        left: "3%",
+        bottom: "3%",
+        containLabel: true,
+      },
+      xAxis: {
+        max: "dataMax",
+        axisLine: {
+          show: false, // 取消横轴轴线
+          lineStyle: {
+            color: "#fff",
+          },
+        },
+        splitLine: {
+          show: false, // 取消横轴刻度线
+        },
+        axisLabel: {
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+          },
+        },
+      },
+      yAxis: {
+        type: "category",
+        data: ["第一水厂", "第二水厂", "第三水厂", "第四水厂", "第五水厂"],
+        inverse: true,
+        axisLabel: {
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#fff",
+          },
+        },
+      },
+      series: [
+        {
+          realtimeSort: true,
+          name: "污水处理量",
+          type: "bar",
+          data: [100, 120, 30, 40, 50],
+          label: {
+            show: true,
+            position: "right",
+            valueAnimation: true,
+          },
+        },
+        {
+          realtimeSort: true,
+          name: "产泥量",
+          type: "bar",
+          data: [100, 120, 30, 40, 50],
+          label: {
+            show: true,
+            position: "right",
+            valueAnimation: true,
+          },
+        },
+      ],
+      legend: {
+        show: true,
+        textStyle: {
+          color: "#fff",
+        },
+      },
+    };
+  }
+  render() {
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <Chart option={this.getOptions()} />
+      </div>
+    );
+  } //endrender
+}
+
+export default WaterVolume;

src/components/Sewage/WaterQuality.js

@@ -0,0 +1,78 @@
+// 各个水厂水质情况
+import React, { PureComponent } from "react";
+import { ScrollBoard } from "@jiaminghi/data-view-react";
+
+class UserWaterUsage extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      config: {
+        // 表头背景色
+        headerBGC: "#443dc5",
+        // 奇数行背景色
+        oddRowBGC: "#09184F",
+        // 偶数行背景色
+        evenRowBGC: "#070C34",
+        // 行号
+        index: false,
+        // 行号表头
+        // indexHeader: '序号',
+        // 宽度
+        // columnWidth: [50, 100, 200],
+        // 对其方式
+        align: ["center"],
+        // 表行数
+        rowNum: 10,
+      },
+    };
+  }
+
+  render() {
+    const { height } = this.props;
+    const data = {
+      header: ["水厂名称", "进水水量", "进厂COD", "进厂氨氮", "进厂pH"],
+      data: [
+        ["第一水厂", "进水水量", "150mg/L", "21mg/L", "7.8"],
+        ["第一水厂", "进水水量", "150mg/L", "21mg/L", "7.8"],
+        ["第一水厂", "进水水量", "150mg/L", "21mg/L", "7.8"],
+        ["第一水厂", "进水水量", "150mg/L", "21mg/L", "7.8"],
+        ["第一水厂", "进水水量", "150mg/L", "21mg/L", "7.8"],
+        ["第一水厂", "进水水量", "150mg/L", "21mg/L", "7.8"],
+        ["第一水厂", "进水水量", "150mg/L", "21mg/L", "7.8"],
+        ["第一水厂", "进水水量", "150mg/L", "21mg/L", "7.8"],
+        ["第一水厂", "进水水量", "150mg/L", "21mg/L", "7.8"],
+        ["第一水厂", "进水水量", "150mg/L", "21mg/L", "7.8"],
+        ["第一水厂", "进水水量", "150mg/L", "21mg/L", "7.8"],
+        ["第一水厂", "进水水量", "150mg/L", "21mg/L", "7.8"],
+        ["第一水厂", "进水水量", "150mg/L", "21mg/L", "7.8"],
+        ["第一水厂", "进水水量", "150mg/L", "21mg/L", "7.8"],
+        ["第一水厂", "进水水量", "150mg/L", "21mg/L", "7.8"],
+        ["第一水厂", "进水水量", "150mg/L", "21mg/L", "7.8"],
+        ["第一水厂", "进水水量", "150mg/L", "21mg/L", "7.8"],
+        ["第一水厂", "进水水量", "150mg/L", "21mg/L", "7.8"],
+      ],
+    };
+    const config = {
+      ...this.state.config,
+      ...data,
+    };
+
+    return (
+      <div
+        style={{
+          width: "100%",
+        }}
+      >
+        <ScrollBoard
+          config={config}
+          style={{
+            width: "100%",
+            height: height,
+          }}
+        ></ScrollBoard>
+      </div>
+    );
+  }
+}
+
+export default UserWaterUsage;

src/components/Sewage/index.js

@@ -0,0 +1,36 @@
+// 污水
+import React, { PureComponent } from "react";
+import { LeftPage } from "./style";
+import ChartBox from "../ChartBox";
+import WaterQuality from "./WaterQuality";
+import EnergyConsumption from "./EnergyConsumption";
+import ProductionTarget from "./ProductionTarget";
+import BMap from "../centerPage/charts/BMap";
+
+class index extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <div>
+        <LeftPage>
+          <ChartBox title="当年生产指标" style={{ flex: 1 }}>
+            <ProductionTarget />
+          </ChartBox>
+          <ChartBox
+            title="当月各个水厂耗能"
+            style={{ flex: 1, marginTop: 30, marginBottom: 30 }}
+          >
+            <EnergyConsumption />
+          </ChartBox>
+          <WaterQuality height="30vh" />
+        </LeftPage>
+        <BMap />
+      </div>
+    );
+  }
+}
+
+export default index;

src/components/Sewage/style.js

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const LeftPage = styled.div`
+  width: 25vw;
+  height: calc(100vh - 60px);
+  padding: 0.2rem;
+  padding-top: 0px;
+  position: fixed;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  top: 60px;
+`;

src/components/WaterSupply/EnergyConsumption.js

@@ -0,0 +1,146 @@
+// 当月各个水厂耗能
+import React, { PureComponent } from "react";
+import Chart from "../../utils/chart";
+
+class EnergyConsumption extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      renderer: "canvas",
+    };
+  }
+  getOptions() {
+    function generateNumbers() {
+      var numbers = [];
+      for (var i = 0; i < 30; i++) {
+        numbers.push(Math.floor(Math.random() * 100));
+      }
+      return numbers;
+    }
+    return {
+      // color: ["#3C4FD6", "#F6AC4B"],
+      xAxis: {
+        type: "category",
+        data: [
+          "1日",
+          "2日",
+          "3日",
+          "4日",
+          "5日",
+          "6日",
+          "7日",
+          "8日",
+          "9日",
+          "10日",
+          "11日",
+          "12日",
+          // "13日",
+          // "14日",
+          // "15日",
+          // "16日",
+          // "17日",
+          // "18日",
+          // "19日",
+          // "20日",
+          // "21日",
+          // "22日",
+          // "23日",
+          // "24日",
+          // "25日",
+          // "26日",
+          // "27日",
+          // "28日",
+          // "29日",
+          // "30日",
+          // "31日",
+        ],
+        axisLabel: {
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+          },
+        },
+        grid: {
+          top: 60,
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#fff",
+          },
+        },
+      },
+      yAxis: {
+        type: "value",
+        name: "能耗（kWh）",
+        axisLabel: {
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#fff",
+          },
+        },
+      },
+      series: [
+        {
+          data: generateNumbers(),
+          name: "第一水厂",
+          type: "line",
+          smooth: true,
+          symbol: "none",
+        },
+        {
+          data: generateNumbers(),
+          name: "第二水厂",
+          type: "line",
+          smooth: true,
+          symbol: "none",
+        },
+        {
+          data: generateNumbers(),
+          name: "第三水厂",
+          type: "line",
+          smooth: true,
+          symbol: "none",
+        },
+        {
+          data: generateNumbers(),
+          name: "第四水厂",
+          type: "line",
+          smooth: true,
+          symbol: "none",
+        },
+        {
+          data: generateNumbers(),
+          name: "第五水厂",
+          type: "line",
+          smooth: true,
+          symbol: "none",
+        },
+      ],
+      legend: {
+        show: true,
+        textStyle: {
+          color: "#fff",
+        },
+      },
+    };
+  }
+  render() {
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <Chart option={this.getOptions()} />
+      </div>
+    );
+  } //endrender
+}
+
+export default EnergyConsumption;

src/components/WaterSupply/UserWaterUsage.js

@@ -0,0 +1,81 @@
+//大用户用水量排名
+import React, { PureComponent } from "react";
+import { ScrollBoard } from "@jiaminghi/data-view-react";
+
+class UserWaterUsage extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      config: {
+        // 表头背景色
+        headerBGC: "#443dc5",
+        // 奇数行背景色
+        oddRowBGC: "#09184F",
+        // 偶数行背景色
+        evenRowBGC: "#070C34",
+        // 行号
+        index: false,
+        // 行号表头
+        // indexHeader: '序号',
+        // 宽度
+        // columnWidth: [50, 100, 200],
+        // 对其方式
+        align: ["center"],
+        // 表行数
+        rowNum: 10,
+      },
+    };
+  }
+
+  render() {
+    const { height } = this.props;
+    const data = {
+      header: ["排名", "大用户名称", "用水量（万m3）", "用途"],
+      data: [
+        ["1", "**物业有限公司", "321", "生活用水"],
+        ["1", "**物业有限公司", "321", "生活用水"],
+        ["1", "**物业有限公司", "321", "生活用水"],
+        ["1", "**物业有限公司", "321", "生活用水"],
+        ["1", "**物业有限公司", "321", "生活用水"],
+        ["1", "**物业有限公司", "321", "生活用水"],
+        ["1", "**物业有限公司", "321", "生活用水"],
+        ["1", "**物业有限公司", "321", "生活用水"],
+        ["1", "**物业有限公司", "321", "生活用水"],
+        ["1", "**物业有限公司", "321", "生活用水"],
+        ["1", "**物业有限公司", "321", "生活用水"],
+        ["1", "**物业有限公司", "321", "生活用水"],
+        ["1", "**物业有限公司", "321", "生活用水"],
+        ["1", "**物业有限公司", "321", "生活用水"],
+        ["1", "**物业有限公司", "321", "生活用水"],
+        ["1", "**物业有限公司", "321", "生活用水"],
+        ["1", "**物业有限公司", "321", "生活用水"],
+        ["1", "**物业有限公司", "321", "生活用水"],
+        ["1", "**物业有限公司", "321", "生活用水"],
+        ["1", "**物业有限公司", "321", "生活用水"],
+        ["1", "**物业有限公司", "321", "生活用水"],
+      ],
+    };
+    const config = {
+      ...this.state.config,
+      ...data,
+    };
+
+    return (
+      <div
+        style={{
+          width: "100%",
+        }}
+      >
+        <ScrollBoard
+          config={config}
+          style={{
+            width: "100%",
+            height: height,
+          }}
+        ></ScrollBoard>
+      </div>
+    );
+  }
+}
+
+export default UserWaterUsage;

src/components/WaterSupply/WaterVolume.js

@@ -0,0 +1,95 @@
+// 当年水量统计
+import React, { PureComponent } from "react";
+import Chart from "../../utils/chart";
+
+class WaterVolume extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      renderer: "canvas",
+    };
+  }
+  getOptions() {
+    return {
+      color: ["#3C4FD6", "#F6AC4B"],
+      xAxis: {
+        max: "dataMax",
+        axisLine: {
+          show: false, // 取消横轴轴线
+          lineStyle: {
+            color: "#fff",
+          },
+        },
+        splitLine: {
+          show: false, // 取消横轴刻度线
+        },
+        axisLabel: {
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+          },
+        },
+      },
+      yAxis: {
+        type: "category",
+        data: ["第一水厂", "第二水厂", "第三水厂", "第四水厂", "第五水厂"],
+        inverse: true,
+        axisLabel: {
+          textStyle: {
+            color: "#fff",
+            fontSize: 14,
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#fff",
+          },
+        },
+      },
+      series: [
+        {
+          realtimeSort: true,
+          name: "产水量",
+          type: "bar",
+          data: [100, 120, 30, 40, 50],
+          label: {
+            show: true,
+            position: "right",
+            valueAnimation: true,
+          },
+        },
+        {
+          realtimeSort: true,
+          name: "供水量",
+          type: "bar",
+          data: [100, 120, 30, 40, 50],
+          label: {
+            show: true,
+            position: "right",
+            valueAnimation: true,
+          },
+        },
+      ],
+      legend: {
+        show: true,
+        textStyle: {
+          color: "#fff",
+        },
+      },
+    };
+  }
+  render() {
+    return (
+      <div
+        style={{
+          width: "5.375rem",
+          height: "3.125rem",
+        }}
+      >
+        <Chart option={this.getOptions()} />
+      </div>
+    );
+  } //endrender
+}
+
+export default WaterVolume;

src/components/WaterSupply/index.js

@@ -0,0 +1,36 @@
+// 污水
+import React, { PureComponent } from "react";
+import { LeftPage } from "./style";
+import ChartBox from "../ChartBox";
+import UserWaterUsage from "./UserWaterUsage";
+import EnergyConsumption from "./EnergyConsumption";
+import WaterVolume from "./WaterVolume";
+import BMap from "../centerPage/charts/BMap";
+
+class index extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <div>
+        <LeftPage>
+          <ChartBox title="当年水量统计" style={{ flex: 1 }}>
+            <WaterVolume />
+          </ChartBox>
+          <ChartBox
+            title="当月各个水厂耗能"
+            style={{ flex: 1, marginTop: 30, marginBottom: 30 }}
+          >
+            <EnergyConsumption />
+          </ChartBox>
+          <UserWaterUsage height="30vh" />
+        </LeftPage>
+        <BMap />
+      </div>
+    );
+  }
+}
+
+export default index;

src/components/WaterSupply/style.js

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const LeftPage = styled.div`
+  width: 25vw;
+  height: calc(100vh - 60px);
+  padding: 0.2rem;
+  padding-top: 0px;
+  position: fixed;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  top: 60px;
+`;

src/components/centerPage/charts/Map.js

@@ -144,8 +144,8 @@ class Map extends PureComponent {
     return (
       <div
         style={{
-          width: "10.625rem",
-          height: "8.125rem",
+          width: "100%",
+          height: "calc(100% - 3.5rem)",
         }}
       >
         {this.renderChart()}

src/components/centerPage/style.js

@@ -1,7 +1,8 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
 export const CenterPage = styled.div`
   margin-top: 0.25rem;
+  width: 50vw;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -10,7 +11,7 @@ export const CenterPage = styled.div`
 export const CenterBottom = styled.div`
   display: flex;
   margin-bottom: 0.25rem;
-  margin-top: 0.875rem;
+  /* margin-top: 0.875rem; */
   width: 100%;
   height: 3.25rem;
   position: relative;

src/components/leftPage/charts/TrafficSituation.jsx

@@ -1,12 +1,12 @@
-import React, { PureComponent } from 'react';
-import Chart from '../../../utils/chart';
-import { trafficOptions } from './options';
+import React, { PureComponent } from "react";
+import Chart from "../../../utils/chart";
+import { trafficOptions } from "./options";
 
 class TrafficSituation extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
-      renderer: 'canvas',
+      renderer: "canvas",
     };
   }
 
@@ -16,13 +16,14 @@ class TrafficSituation extends PureComponent {
     return (
       <div
         style={{
-          width: '5.375rem',
-          height: '3.125rem',
-        }}>
+          width: "100%",
+          height: "3.125rem",
+        }}
+      >
         {trafficSitua ? (
           <Chart renderer={renderer} option={trafficOptions(trafficSitua)} />
         ) : (
-          ''
+          ""
         )}
       </div>
     );

src/components/leftPage/index.jsx

@@ -1,12 +1,11 @@
 import React, { PureComponent } from "react";
-import { LeftPage, LeftTopBox, LeftBottomBox } from "./style";
-import { ModuleTitle } from "../../style/globalStyledSet";
-import { BorderBox12, BorderBox13 } from "@jiaminghi/data-view-react";
-import TrafficSituation from "./charts/TrafficSituation";
-import UserSituation from "./charts/UserSituation";
+import { LeftPage } from "./style";
 import { connect } from "dva";
+import ChartBox from "../ChartBox";
 
-import EnergyRang from "../EnergyRang";
+import EnergyRanking from "../Overview/EnergyRanking ";
+import WaterUsage from "../Overview/WaterUsage";
+import FloodStat from "../Overview/FloodStat";
 
 class index extends PureComponent {
   constructor(props) {
@@ -14,47 +13,26 @@ class index extends PureComponent {
     this.state = {};
   }
   render() {
-    const { userSitua, trafficSitua, accessFrequency, peakFlow } = this.props;
     return (
       <LeftPage>
         {/* 顶部图表 */}
-        <LeftTopBox>
-          <BorderBox12 className="left-top-borderBox12">
-            <div className="left-top">
-              <ModuleTitle>
-                <i className="iconfont">&#xe78f;</i>
-                <span>当月供水管网监测</span>
-              </ModuleTitle>
-              {/* <div className="title-dis">
-                <span>
-                  平均接纳次数(小时):
-                  <span className="title-dis-keyword">{accessFrequency}次</span>
-                </span>
-                <span>
-                  流量峰值:
-                  <span className="title-dis-keyword">{peakFlow}M</span>
-                </span>
-              </div> */}
-              {/* 图表 */}
-              <TrafficSituation trafficSitua={trafficSitua}></TrafficSituation>
-              {/* <EnergyRang /> */}
-            </div>
-          </BorderBox12>
-        </LeftTopBox>
-
-        {/* 底部图表 */}
-        <LeftBottomBox>
-          <BorderBox13 className="left-bottom-borderBox13">
-            <div className="left-bottom">
-              <ModuleTitle>
-                <i className="iconfont">&#xe88e;</i>
-                <span>水厂监测</span>
-              </ModuleTitle>
-              {/* 图表 */}
-              <UserSituation userSitua={userSitua}></UserSituation>
-            </div>
-          </BorderBox13>
-        </LeftBottomBox>
+        <ChartBox
+          title="当年水厂能耗排名统计"
+          style={{
+            flex: 1,
+          }}
+        >
+          <EnergyRanking />
+        </ChartBox>
+        <ChartBox
+          title="当年自来水主要使用用途"
+          style={{ flex: 1, marginTop: 30 }}
+        >
+          <WaterUsage />
+        </ChartBox>
+        <ChartBox title="当年防汛统计" style={{ flex: 1, marginTop: 30 }}>
+          <FloodStat />
+        </ChartBox>
       </LeftPage>
     );
   }

src/components/leftPage/style.js

@@ -1,12 +1,14 @@
 import styled from 'styled-components';
 
 export const LeftPage = styled.div`
-  width: 6.25rem;
-  height: auto;
+  width: 25vw;
+  height: calc(100vh - 60px);
   padding: 0.2rem;
-  padding-bottom: 0px;
+  padding-top: 0px;
   position: relative;
   z-index: 10;
+  display: flex;
+  flex-direction: column;
 `;
 
 export const LeftTopBox = styled.div`

src/components/rightPage/index.jsx

@@ -1,17 +1,10 @@
-import React, { PureComponent } from 'react';
-import { BorderBox13 } from '@jiaminghi/data-view-react';
-import BrowseCategories from './charts/BrowseCategories';
-import UserIdentityCategory from './charts/UserIdentityCategory';
-import OfflinePortal from './charts/OfflinePortal';
-import Feedback from './charts/Feedback';
-import { ModuleTitle } from '../../style/globalStyledSet';
-import { connect } from 'dva';
-import {
-  RightPage,
-  RightTopBox,
-  RightCenterBox,
-  RightBottomBox,
-} from './style';
+import React, { PureComponent } from "react";
+import { connect } from "dva";
+import { RightPage } from "./style";
+import ChartBox from "../ChartBox";
+import WaterPlantMonitoring from "../Overview/WaterPlantMonitoring";
+import WaterVolumeStat from "../Overview/WaterVolumeStat";
+import PipelineMonitoring from "../Overview/PipelineMonitoring";
 
 class index extends PureComponent {
   constructor(props) {
@@ -19,75 +12,21 @@ class index extends PureComponent {
     this.state = {};
   }
   render() {
-    const { offline, browseCategories, userIdentityCategory } = this.props;
     return (
       <RightPage>
-        <RightTopBox>
-          <div className='right-top'>
-            <ModuleTitle>
-              <i className='iconfont'>&#xe7f7;</i>
-              <span>当年自来水主要使用用途</span>
-            </ModuleTitle>
-            <div className='right-top-content'>
-              <BrowseCategories
-                browseCategories={browseCategories}></BrowseCategories>
-              <img
-                alt='地球'
-                className='earth-gif'
-                src={require('../../assets/images/earth-rotate.gif')}
-              />
-            </div>
-          </div>
-        </RightTopBox>
-
-        <RightCenterBox>
-          <ModuleTitle>
-            <i className='iconfont'>&#xe7fd;</i>
-            <span>水厂能耗排名</span>
-          </ModuleTitle>
-          <UserIdentityCategory
-            userIdentityCategory={userIdentityCategory}></UserIdentityCategory>
-        </RightCenterBox>
-
-        <RightBottomBox>
-          <BorderBox13 className='right-bottom-borderBox13'>
-            <div className='right-bottom'>
-              <ModuleTitle>
-                <i className='iconfont'>&#xe790;</i>
-                <span>今日线下门户流量</span>
-              </ModuleTitle>
-              {/* 反馈 */}
-              <div className='feedback-box'>
-                {offline
-                  ? offline.feedback.map((item, index) => {
-                      return (
-                        <div className='feedback-box-item' key={index}>
-                          <Feedback FeedbackData={item}></Feedback>
-                          <span className='dis-text'>{item.title}</span>
-                        </div>
-                      );
-                    })
-                  : ''}
-              </div>
-              {/* 门店 */}
-              <div className='offline-portal-box'>
-                {offline ? (
-                  <OfflinePortal
-                    offlinePortalData={offline.offlinePortalData}
-                  />
-                ) : (
-                  ''
-                )}
-              </div>
-            </div>
-          </BorderBox13>
-        </RightBottomBox>
+        <ChartBox title="当年水量统计" style={{ flex: 1}}>
+          <WaterVolumeStat />
+        </ChartBox>
+        <ChartBox title="当月管网监测" style={{ flex: 1, marginTop: 30, marginBottom: 30 }}>
+          <PipelineMonitoring />
+        </ChartBox>
+        <WaterPlantMonitoring height="30vh" />
       </RightPage>
     );
   }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state) => {
   return {
     browseCategories: state.rightPage.browseCategories,
     userIdentityCategory: state.rightPage.userIdentityCategory,
@@ -95,6 +34,6 @@ const mapStateToProps = state => {
   };
 };
 
-const mapStateToDispatch = dispatch => ({});
+const mapStateToDispatch = (dispatch) => ({});
 
 export default connect(mapStateToProps, mapStateToDispatch)(index);

src/components/rightPage/style.js

@@ -1,16 +1,18 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
 export const RightPage = styled.div`
-  width: 6.25rem;
-  height: auto;
-  padding: 0px 0.2rem;
+  width: 25vw;
+  height: calc(100vh - 60px);
+  padding: 0.2rem;
+  padding-top: 0px;
   position: relative;
   z-index: 10;
+  display: flex;
+  flex-direction: column;
 `;
 
 export const RightTopBox = styled.div`
   position: relative;
-  height: 3rem;
   width: 100%;
   margin-bottom: 0.25rem;
   .right-top {
@@ -62,7 +64,7 @@ export const RightBottomBox = styled.div`
             margin-top: 0.0625rem;
             color: #b2cfee;
             font-size: 0.2rem;
-            background: linear-gradient(to bottom, #fff, #6176F4);
+            background: linear-gradient(to bottom, #fff, #6176f4);
             color: transparent;
             -webkit-background-clip: text;
             background-clip: text;

src/components/topPage/style.js

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
-import { TitleColor } from '../../style/color'
+import styled from "styled-components";
+import { TitleColor } from "../../style/color";
 
 export const TopBox = styled.div`
   position: relative;
@@ -7,9 +7,7 @@ export const TopBox = styled.div`
   .top_box {
     display: flex;
     justify-content: center;
-    po
-
-    .top_decoration10 {
+    po .top_decoration10 {
       position: relative;
       width: 33.3%;
       height: 0.0625rem;
@@ -63,10 +61,10 @@ export const TopBox = styled.div`
 export const TimeBox = styled.div`
   position: absolute;
   right: 0.375rem;
-  top: 0.5rem;
+  top: 10px;
   text-align: right;
   color: #fff;
-  h3{
+  h3 {
     font-size: 0.225rem;
     color: ${TitleColor};
   }

src/router.jsx

@@ -1,9 +1,10 @@
-import React, { Fragment } from 'react';
-import { Router, Route, Switch } from 'dva/router';
-import IndexPage from './routes/IndexPage';
-import BMap from './components/centerPage/charts/BMap';
-import { Iconstyle } from './assets/icon/iconfont';
-import { Globalstyle } from './style/global.js';
+import React, { Fragment } from "react";
+import { Router, Route, Switch } from "dva/router";
+import IndexPage from "./routes/IndexPage";
+import Sewage from "./routes/Sewage";
+import WaterSupply from "./routes/WaterSupply";
+import { Iconstyle } from "./assets/icon/iconfont";
+import { Globalstyle } from "./style/global.js";
 
 function RouterConfig({ history }) {
   const route = () => {
@@ -15,8 +16,10 @@ function RouterConfig({ history }) {
 
         {/* 路由管理 */}
         <Switch>
-          <Route path='/' exact component={IndexPage} />
-          <Route path='/map' exact component={BMap} />
+          <Route path="/" exact component={IndexPage} />
+          {/* <Route path='/map' exact component={BMap} /> */}
+          <Route path="/water-supply" exact component={WaterSupply} />
+          <Route path="/sewage" exact component={Sewage} />
         </Switch>
       </Fragment>
     );

src/routes/IndexPage.jsx

@@ -5,6 +5,7 @@ import TopPage from '../components/topPage';
 import LeftPage from '../components/leftPage';
 import CenterPage from '../components/centerPage';
 import RightPage from '../components/rightPage';
+import Nav from '../components/Nav';
 
 class IndexPage extends Component {
   constructor(props) {
@@ -23,6 +24,7 @@ class IndexPage extends Component {
           {/* 右侧内容 */}
           <RightPage />
         </IndexPageContent>
+        <Nav />
       </IndexPageStyle>
     );
   }

src/routes/Sewage.jsx

@@ -0,0 +1,27 @@
+// 污水
+import React, { Component } from "react";
+import { connect } from "dva";
+import { IndexPageStyle, IndexPageContent } from "./style";
+import TopPage from "../components/topPage";
+import Sewage from "../components/Sewage";
+import Nav from "../components/Nav";
+
+class IndexPage extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <IndexPageStyle>
+        <TopPage />
+        <IndexPageContent>
+          <Sewage />
+        </IndexPageContent>
+        <Nav />
+      </IndexPageStyle>
+    );
+  }
+}
+
+export default connect()(IndexPage);

src/routes/WaterSupply.jsx

@@ -0,0 +1,27 @@
+// 污水
+import React, { Component } from "react";
+import { connect } from "dva";
+import { IndexPageStyle, IndexPageContent } from "./style";
+import TopPage from "../components/topPage";
+import WaterSupply from "../components/WaterSupply";
+import Nav from "../components/Nav";
+
+class IndexPage extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <IndexPageStyle>
+        <TopPage />
+        <IndexPageContent>
+          <WaterSupply />
+        </IndexPageContent>
+        <Nav />
+      </IndexPageStyle>
+    );
+  }
+}
+
+export default connect()(IndexPage);