管网泵站

src/components/Overview/WaterPlantMonitoring.js

@@ -7,11 +7,11 @@ class WaterPlantMonitoring extends PureComponent {
     this.state = {
       config: {
         // 表头背景色
-        headerBGC: "#443dc5",
+        headerBGC: "transparent",
         // 奇数行背景色
-        oddRowBGC: "#09184F",
+        oddRowBGC: "#0ab8d952",
         // 偶数行背景色
-        evenRowBGC: "#070C34",
+        evenRowBGC: "transparent",
         // 行号
         index: false,
         // 行号表头
@@ -21,7 +21,7 @@ class WaterPlantMonitoring extends PureComponent {
         // 对其方式
         align: ["center"],
         // 表行数
-        rowNum: 8,
+        rowNum: 6,
       },
     };
   }
@@ -57,7 +57,8 @@ class WaterPlantMonitoring extends PureComponent {
     return (
       <div
         style={{
-          width: "100%",
+          width: "calc(100% - 24px)",
+          margin: "auto",
         }}
       >
         <ScrollBoard

src/components/PineNet/DrainWaterPine.js

@@ -0,0 +1,72 @@
+//大用户用水量排名
+import React, { PureComponent } from "react";
+import { ScrollBoard } from "@jiaminghi/data-view-react";
+
+class DrainWaterPine extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      config: {
+        // 表头背景色
+        headerBGC: "transparent",
+        // 奇数行背景色
+        oddRowBGC: "#0ab8d952",
+        // 偶数行背景色
+        evenRowBGC: "transparent",
+        // 行号
+        index: false,
+        // 行号表头
+        // indexHeader: '序号',
+        // 宽度
+        // columnWidth: [50, 100, 200],
+        // 对其方式
+        align: ["center"],
+        // 表行数
+        rowNum: 6,
+      },
+    };
+  }
+
+  render() {
+    const { height } = this.props;
+    const data = {
+      header: ["名称", "单位", "本月", "同比"],
+      data: [
+        ["管网维修及时率 ", "%", "75", "2.0", "-1"],
+        ["管网维修及时率 ", "%", "75", "2.0", "-1"],
+        ["管网维修及时率 ", "%", "75", "2.0", "-1"],
+        ["管网维修及时率 ", "%", "75", "2.0", "-1"],
+        ["管网维修及时率 ", "%", "75", "2.0", "-1"],
+        ["管网维修及时率 ", "%", "75", "2.0", "-1"],
+        ["管网维修及时率 ", "%", "75", "2.0", "-1"],
+        ["管网维修及时率 ", "%", "75", "2.0", "-1"],
+        ["管网维修及时率 ", "%", "75", "2.0", "-1"],
+        ["管网维修及时率 ", "%", "75", "2.0", "-1"],
+        ["管网维修及时率 ", "%", "75", "2.0", "-1"],
+      ],
+    };
+    const config = {
+      ...this.state.config,
+      ...data,
+    };
+
+    return (
+      <div
+        style={{
+          width: "calc(100% - 24px)",
+          margin: "auto",
+        }}
+      >
+        <ScrollBoard
+          config={config}
+          style={{
+            width: "100%",
+            height: height,
+          }}
+        ></ScrollBoard>
+      </div>
+    );
+  }
+}
+
+export default DrainWaterPine;

src/components/PineNet/PineKindChart.js

@@ -0,0 +1,46 @@
+// 当年防汛统计
+import React, { PureComponent } from "react";
+import Chart from "../../utils/chart";
+
+class PineKindChart extends PureComponent {
+  constructor(props) {
+    super(props);
+  }
+  getOptions() {
+    return {
+      color: ["#5470c6", "#91cc75", "#fac858", "#ee6666"],
+      toolbox: {},
+      series: [
+        {
+          name: "Nightingale Chart",
+          type: "pie",
+          radius: [16, 80],
+          center: ["50%", "50%"],
+          roseType: "area",
+          itemStyle: {
+            borderRadius: 8,
+          },
+          data: [
+            { value: 40, name: "rose 1" },
+            { value: 38, name: "rose 2" },
+            { value: 32, name: "rose 3" },
+          ],
+        },
+      ],
+    };
+  }
+  render() {
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <Chart option={this.getOptions()} />
+      </div>
+    );
+  } //endrender
+}
+
+export default PineKindChart;

src/components/PineNet/WornAnalyze.js

@@ -0,0 +1,96 @@
+// 当年防汛统计
+import React, { PureComponent } from "react";
+import Chart from "../../utils/chart";
+
+class WornAnalyze 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: ["DMA1", "DMA2", "DMA3", "DMA4"],
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+              fontSize: 14,
+            },
+          },
+          axisLine: {
+            symbol: ["none", "arrow"],
+            lineStyle: {
+              color: "#fff",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+      ],
+      yAxis: [
+        {
+          type: "value",
+          name: "漏损率（%）",
+          nameTextStyle: {
+            align: "left",
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: true,
+            symbol: ["none", "arrow"],
+            lineStyle: {
+              color: "#fff",
+            },
+          },
+          axisLabel: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: "受损内涝点数量",
+          type: "bar",
+          barWidth: "50%",
+          data: [12, 26, 9, 16],
+        },
+      ],
+    };
+  }
+  render() {
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <Chart option={this.getOptions()} />
+      </div>
+    );
+  } //endrender
+}
+
+export default WornAnalyze;

src/components/PineNet/indexCenter.js

@@ -0,0 +1,37 @@
+// 污水
+import React, { PureComponent } from "react";
+import { CenterPage, CenterTop, LeftPage, RightPage } from "./style";
+import ChartBox from "../ChartBox";
+import BMap from "../centerPage/charts/BMap";
+
+class index extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: [
+        { name: "产销差率", value: "28%" },
+        { name: "产销差率", value: "28%" },
+        { name: "产销差率", value: "28%" },
+        { name: "产销差率", value: "28%" },
+        { name: "产销差率", value: "28%" },
+      ],
+    };
+  }
+  render() {
+    return (
+      <CenterPage>
+        <CenterTop>
+          {this.state.data.map((item) => (
+            <div className="circle">
+              {item.name}
+              <div className="circle_text">{item.value}</div>
+            </div>
+          ))}
+        </CenterTop>
+        <BMap />
+      </CenterPage>
+    );
+  }
+}
+
+export default index;

src/components/PineNet/indexLeft.js

@@ -0,0 +1,39 @@
+// 污水
+import React, { PureComponent } from "react";
+import { LeftPage, RightPage } from "./style";
+import ChartBox from "../ChartBox";
+import BMap from "../centerPage/charts/BMap";
+import WaterVolumeStat from "../Overview/WaterVolumeStat";
+import PipelineMonitoring from "../Overview/PipelineMonitoring";
+import WornAnalyze from "./WornAnalyze";
+import DrainWaterPine from "./DrainWaterPine";
+
+class index extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <LeftPage>
+        <ChartBox title="当年水量统计" style={{ flex: 1 }}>
+          <WaterVolumeStat />
+        </ChartBox>
+        <ChartBox
+          title="不同分区管网漏损分析"
+          style={{ flex: 1, marginTop: 30 }}
+        >
+          <WornAnalyze />
+        </ChartBox>
+        <ChartBox
+          title="当月管网监测"
+          style={{ flex: 1, marginTop: 30, marginBottom: 30 }}
+        >
+          <PipelineMonitoring />
+        </ChartBox>
+      </LeftPage>
+    );
+  }
+}
+
+export default index;

src/components/PineNet/indexRight.js

@@ -0,0 +1,39 @@
+// 污水
+import React, { PureComponent } from "react";
+import { LeftPage, RightPage } from "./style";
+import ChartBox from "../ChartBox";
+import BMap from "../centerPage/charts/BMap";
+import WaterVolumeStat from "../Overview/WaterVolumeStat";
+import PipelineMonitoring from "../Overview/PipelineMonitoring";
+import WornAnalyze from "./WornAnalyze";
+import DrainWaterPine from "./DrainWaterPine";
+import PineKindChart from "./PineKindChart";
+
+class index extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <div>
+        <RightPage>
+          <ChartBox title="当月管网监测" style={{ flex: 1 }}>
+            <PipelineMonitoring />
+          </ChartBox>
+          <ChartBox
+            title="排水官网种类统计"
+            style={{ flex: 1, marginTop: 30, marginBottom: 30 }}
+          >
+            <PineKindChart />
+          </ChartBox>
+          <ChartBox title="当月管网监测" style={{ flex: 1 }}>
+            <DrainWaterPine height="25vh" />
+          </ChartBox>
+        </RightPage>
+      </div>
+    );
+  }
+}
+
+export default index;

src/components/PineNet/style.js

@@ -0,0 +1,121 @@
+import styled from "styled-components";
+
+export const LeftPage = styled.div`
+  width: 25vw;
+  height: calc(100vh - 60px);
+  padding: 0.2rem;
+  padding-top: 0px;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const RightPage = styled.div`
+  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;
+  width: 100%;
+  margin-bottom: 0.25rem;
+  .right-top {
+    &-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 0.1875rem;
+    }
+    .earth-gif {
+      width: 2.75rem;
+      height: auto;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+  }
+`;
+
+export const RightCenterBox = styled.div`
+  position: relative;
+  height: 3.125rem;
+  width: 100%;
+  margin-bottom: 0.25rem;
+`;
+
+export const RightBottomBox = styled.div`
+  position: relative;
+  height: 6rem;
+  width: 100%;
+  .right-bottom-borderBox13 {
+    padding: 0.25rem 0.1875rem 0.1875rem;
+    .right-bottom {
+      width: 100%;
+      height: 100%;
+      border-radius: 10px;
+      background-color: rgba(19, 25, 47, 0.6);
+      .feedback-box {
+        margin-top: 0.1rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        &-item {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          height: 1.75rem;
+          .dis-text {
+            font-weight: bold;
+            margin-top: 0.0625rem;
+            color: #b2cfee;
+            font-size: 0.2rem;
+            background: linear-gradient(to bottom, #fff, #6176f4);
+            color: transparent;
+            -webkit-background-clip: text;
+            background-clip: text;
+          }
+        }
+      }
+      .offline-portal-box {
+        margin-top: 0.125rem;
+      }
+    }
+  }
+`;
+
+export const CenterPage = styled.div`
+  margin-top: 0.25rem;
+  width: 50vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const CenterTop = styled.div`
+  width: 100%;
+  z-index: 10;
+  position: relative;
+  display: flex;
+  justify-content: space-around;
+  .circle {
+    width: 140px;
+    height: 140px;
+    padding: 20px 0;
+    color: #c3c6c9;
+    font-size: 16px;
+    text-align: center;
+    line-height: 30px;
+    background: transparent;
+    border-radius: 50%;
+    border: 16px solid #0b578d;
+    .circle_text {
+      color: #c3c6c9;
+      font-size: 32px;
+    }
+  }
+`;

src/components/PumpStation/PineKindChart.js

@@ -0,0 +1,46 @@
+// 当年防汛统计
+import React, { PureComponent } from "react";
+import Chart from "../../utils/chart";
+
+class PineKindChart extends PureComponent {
+  constructor(props) {
+    super(props);
+  }
+  getOptions() {
+    return {
+      color: ["#5470c6", "#91cc75", "#fac858", "#ee6666"],
+      toolbox: {},
+      series: [
+        {
+          name: "Nightingale Chart",
+          type: "pie",
+          radius: [16, 80],
+          center: ["50%", "50%"],
+          roseType: "area",
+          itemStyle: {
+            borderRadius: 8,
+          },
+          data: [
+            { value: 40, name: "rose 1" },
+            { value: 38, name: "rose 2" },
+            { value: 32, name: "rose 3" },
+          ],
+        },
+      ],
+    };
+  }
+  render() {
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <Chart option={this.getOptions()} />
+      </div>
+    );
+  } //endrender
+}
+
+export default PineKindChart;

src/components/PumpStation/PumpGeneral.js

@@ -0,0 +1,72 @@
+//大用户用水量排名
+import React, { PureComponent } from "react";
+import { ScrollBoard } from "@jiaminghi/data-view-react";
+
+class PumpGeneral extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      config: {
+        // 表头背景色
+        headerBGC: "transparent",
+        // 奇数行背景色
+        oddRowBGC: "#0ab8d952",
+        // 偶数行背景色
+        evenRowBGC: "transparent",
+        // 行号
+        index: false,
+        // 行号表头
+        // indexHeader: '序号',
+        // 宽度
+        // columnWidth: [50, 100, 200],
+        // 对其方式
+        align: ["center"],
+        // 表行数
+        rowNum: 6,
+      },
+    };
+  }
+
+  render() {
+    const { height } = this.props;
+    const data = {
+      header: ["泵站名称", "运行状态", "流量(m3/h)", "能耗（kWh）", "溢流风险"],
+      data: [
+        ["***泵站 ", "<div style>", "75", "2.0", 1],
+        ["管网维修及时率 ", "%", "75", "2.0", "-1"],
+        ["管网维修及时率 ", "%", "75", "2.0", "-1"],
+        ["管网维修及时率 ", "%", "75", "2.0", "-1"],
+        ["管网维修及时率 ", "%", "75", "2.0", "-1"],
+        ["管网维修及时率 ", "%", "75", "2.0", "-1"],
+        ["管网维修及时率 ", "%", "75", "2.0", "-1"],
+        ["管网维修及时率 ", "%", "75", "2.0", "-1"],
+        ["管网维修及时率 ", "%", "75", "2.0", "-1"],
+        ["管网维修及时率 ", "%", "75", "2.0", "-1"],
+        ["管网维修及时率 ", "%", "75", "2.0", "-1"],
+      ],
+    };
+    const config = {
+      ...this.state.config,
+      ...data,
+    };
+
+    return (
+      <div
+        style={{
+          width: "calc(100% - 24px)",
+          margin: "auto",
+        }}
+      >
+        <ScrollBoard
+          config={config}
+          style={{
+            width: "100%",
+            height: height,
+          }}
+        ></ScrollBoard>
+      </div>
+    );
+  }
+}
+
+export default PumpGeneral;

src/components/PumpStation/indexCenter.js

@@ -0,0 +1,37 @@
+// 污水
+import React, { PureComponent } from "react";
+import { CenterPage, CenterTop, LeftPage, RightPage } from "./style";
+import ChartBox from "../ChartBox";
+import BMap from "../centerPage/charts/BMap";
+
+class index extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: [
+        { name: "产销差率", value: "28%" },
+        { name: "产销差率", value: "28%" },
+        { name: "产销差率", value: "28%" },
+        { name: "产销差率", value: "28%" },
+        { name: "产销差率", value: "28%" },
+      ],
+    };
+  }
+  render() {
+    return (
+      <CenterPage>
+        <CenterTop>
+          {this.state.data.map((item) => (
+            <div className="circle">
+              {item.name}
+              <div className="circle_text">{item.value}</div>
+            </div>
+          ))}
+        </CenterTop>
+        <BMap />
+      </CenterPage>
+    );
+  }
+}
+
+export default index;

src/components/PumpStation/indexLeft.js

@@ -0,0 +1,55 @@
+// 污水
+import React, { PureComponent } from "react";
+import { CircleCon, LeftPage, RightPage } from "./style";
+import ChartBox from "../ChartBox";
+import BMap from "../centerPage/charts/BMap";
+import WaterVolumeStat from "../Overview/WaterVolumeStat";
+import PipelineMonitoring from "../Overview/PipelineMonitoring";
+import PineKindChart from "./PineKindChart";
+
+class index extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: [
+        {
+          name: "工单数量",
+          value: 78,
+        },
+        {
+          name: "工单数量",
+          value: 78,
+        },
+        {
+          name: "工单数量",
+          value: 78,
+        },
+      ],
+    };
+  }
+  render() {
+    return (
+      <LeftPage>
+        <CircleCon>
+          {this.state.data.map((item) => (
+            <div className="circle">
+              {item.value}
+              <div className="circle_text">{item.name}</div>
+            </div>
+          ))}
+        </CircleCon>
+        <ChartBox
+          title="当月管网监测"
+          style={{ flex: 1, marginTop: 30, marginBottom: 30 }}
+        >
+          <PipelineMonitoring />
+        </ChartBox>
+        <ChartBox title="报警统计" style={{ flex: 1 }}>
+          <PineKindChart />
+        </ChartBox>
+      </LeftPage>
+    );
+  }
+}
+
+export default index;

src/components/PumpStation/indexRight.js

@@ -0,0 +1,40 @@
+// 污水
+import React, { PureComponent } from "react";
+import { LeftPage, RightPage } from "./style";
+import ChartBox from "../ChartBox";
+import BMap from "../centerPage/charts/BMap";
+import WaterVolumeStat from "../Overview/WaterVolumeStat";
+import PipelineMonitoring from "../Overview/PipelineMonitoring";
+import PumpGeneral from "./PumpGeneral";
+// import WornAnalyze from "./WornAnalyze";
+// import DrainWaterPine from "./DrainWaterPine";
+// import PineKindChart from "./PineKindChart";
+
+class index extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <div>
+        <RightPage>
+          <ChartBox title="泵站概况" style={{ flex: 1 }}>
+            <PumpGeneral height="25vh" />
+          </ChartBox>
+          <ChartBox
+            title="排水官网种类统计"
+            style={{ flex: 1, marginTop: 30, marginBottom: 30 }}
+          >
+            {/* <PineKindChart /> */}
+          </ChartBox>
+          <ChartBox title="当月管网监测" style={{ flex: 1 }}>
+            {/* <DrainWaterPine height="25vh" /> */}
+          </ChartBox>
+        </RightPage>
+      </div>
+    );
+  }
+}
+
+export default index;

src/components/PumpStation/style.js

@@ -0,0 +1,142 @@
+import styled from "styled-components";
+
+export const LeftPage = styled.div`
+  width: 25vw;
+  height: calc(100vh - 60px);
+  padding: 0.2rem;
+  padding-top: 0px;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const RightPage = styled.div`
+  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;
+  width: 100%;
+  margin-bottom: 0.25rem;
+  .right-top {
+    &-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 0.1875rem;
+    }
+    .earth-gif {
+      width: 2.75rem;
+      height: auto;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+  }
+`;
+
+export const RightCenterBox = styled.div`
+  position: relative;
+  height: 3.125rem;
+  width: 100%;
+  margin-bottom: 0.25rem;
+`;
+
+export const RightBottomBox = styled.div`
+  position: relative;
+  height: 6rem;
+  width: 100%;
+  .right-bottom-borderBox13 {
+    padding: 0.25rem 0.1875rem 0.1875rem;
+    .right-bottom {
+      width: 100%;
+      height: 100%;
+      border-radius: 10px;
+      background-color: rgba(19, 25, 47, 0.6);
+      .feedback-box {
+        margin-top: 0.1rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        &-item {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          height: 1.75rem;
+          .dis-text {
+            font-weight: bold;
+            margin-top: 0.0625rem;
+            color: #b2cfee;
+            font-size: 0.2rem;
+            background: linear-gradient(to bottom, #fff, #6176f4);
+            color: transparent;
+            -webkit-background-clip: text;
+            background-clip: text;
+          }
+        }
+      }
+      .offline-portal-box {
+        margin-top: 0.125rem;
+      }
+    }
+  }
+`;
+
+export const CenterPage = styled.div`
+  margin-top: 0.25rem;
+  width: 50vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const CenterTop = styled.div`
+  width: 100%;
+  z-index: 10;
+  position: relative;
+  display: flex;
+  justify-content: space-around;
+  .circle {
+    width: 140px;
+    height: 140px;
+    padding: 20px 0;
+    color: #c3c6c9;
+    font-size: 16px;
+    text-align: center;
+    line-height: 30px;
+    background: transparent;
+    border-radius: 50%;
+    border: 16px solid #0b578d;
+    .circle_text {
+      color: #c3c6c9;
+      font-size: 32px;
+    }
+  }
+`;
+
+export const CircleCon = styled.div`
+  display: flex;
+  justify-content: space-around;
+  .circle {
+    width: 80px;
+    height: 80px;
+    color: #0b8d14;
+    font-size: 32px;
+    text-align: center;
+    line-height: 70px;
+    background: transparent;
+    border-radius: 50%;
+    border: 4px solid #0b8d14;
+    .circle_text {
+      color: #c3c6c9;
+      font-size: 16px;
+      line-height: 40px;
+    }
+  }
+`;

src/components/Sewage/EnergyConsumption.js

@@ -84,6 +84,11 @@ class EnergyConsumption extends PureComponent {
           },
         },
       },
+
+      grid: {
+        bottom: 30,
+        right: 20,
+      },
       series: [
         {
           data: generateNumbers(),

src/components/Sewage/UserWaterUsage.js

@@ -0,0 +1,72 @@
+//大用户用水量排名
+import React, { PureComponent } from "react";
+import { ScrollBoard } from "@jiaminghi/data-view-react";
+
+class UserWaterUsage extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      config: {
+        // 表头背景色
+        headerBGC: "transparent",
+        // 奇数行背景色
+        oddRowBGC: "#0ab8d952",
+        // 偶数行背景色
+        evenRowBGC: "transparent",
+        // 行号
+        index: false,
+        // 行号表头
+        // indexHeader: '序号',
+        // 宽度
+        // columnWidth: [50, 100, 200],
+        // 对其方式
+        align: ["center"],
+        // 表行数
+        rowNum: 6,
+      },
+    };
+  }
+
+  render() {
+    const { height } = this.props;
+    const data = {
+      header: ["排名", "水厂名称", "分数（分）"],
+      data: [
+        ["NO.1", "第一水厂", "75"],
+        ["NO.1", "第一水厂", "75"],
+        ["NO.1", "第一水厂", "75"],
+        ["NO.1", "第一水厂", "75"],
+        ["NO.1", "第一水厂", "75"],
+        ["NO.1", "第一水厂", "75"],
+        ["NO.1", "第一水厂", "75"],
+        ["NO.1", "第一水厂", "75"],
+        ["NO.1", "第一水厂", "75"],
+        ["NO.1", "第一水厂", "75"],
+        ["NO.1", "第一水厂", "75"],
+      ],
+    };
+    const config = {
+      ...this.state.config,
+      ...data,
+    };
+
+    return (
+      <div
+        style={{
+          width: "calc(100% - 24px)",
+          margin: "auto",
+        }}
+      >
+        <ScrollBoard
+          config={config}
+          style={{
+            width: "100%",
+            height: height,
+          }}
+        ></ScrollBoard>
+      </div>
+    );
+  }
+}
+
+export default UserWaterUsage;

src/components/Sewage/WaterQuality.js

@@ -8,11 +8,11 @@ class UserWaterUsage extends PureComponent {
     this.state = {
       config: {
         // 表头背景色
-        headerBGC: "#443dc5",
+        headerBGC: "transparent",
         // 奇数行背景色
-        oddRowBGC: "#09184F",
+        oddRowBGC: "#0ab8d952",
         // 偶数行背景色
-        evenRowBGC: "#070C34",
+        evenRowBGC: "transparent",
         // 行号
         index: false,
         // 行号表头
@@ -22,7 +22,7 @@ class UserWaterUsage extends PureComponent {
         // 对其方式
         align: ["center"],
         // 表行数
-        rowNum: 10,
+        rowNum: 8,
       },
     };
   }
@@ -60,7 +60,8 @@ class UserWaterUsage extends PureComponent {
     return (
       <div
         style={{
-          width: "100%",
+          width: "calc(100% - 24px)",
+          margin: "auto",
         }}
       >
         <ScrollBoard

src/components/Sewage/index.js

@@ -6,6 +6,7 @@ import WaterQuality from "./WaterQuality";
 import EnergyConsumption from "./EnergyConsumption";
 import ProductionTarget from "./ProductionTarget";
 import BMap from "../centerPage/charts/BMap";
+import UserWaterUsage from "./UserWaterUsage";
 
 class index extends PureComponent {
   constructor(props) {
@@ -16,8 +17,8 @@ class index extends PureComponent {
     return (
       <div>
         <LeftPage>
-          <ChartBox title="当年生产指标" style={{ flex: 1 }}>
-            <ProductionTarget />
+          <ChartBox title="各个水厂水质情况" style={{ flex: 1 }}>
+            <WaterQuality height="25vh" />
           </ChartBox>
           <ChartBox
             title="当月各个水厂耗能"
@@ -25,7 +26,9 @@ class index extends PureComponent {
           >
             <EnergyConsumption />
           </ChartBox>
-          <WaterQuality height="30vh" />
+          <ChartBox title="水厂绩效排名" style={{ flex: 1 }}>
+            <UserWaterUsage height="25vh" />
+          </ChartBox>
         </LeftPage>
         <BMap />
       </div>

src/components/WaterSupply/EnergyConsumption.js

@@ -84,6 +84,10 @@ class EnergyConsumption extends PureComponent {
           },
         },
       },
+      grid: {
+        bottom: 30,
+        right: 20,
+      },
       series: [
         {
           data: generateNumbers(),

src/components/WaterSupply/UserWaterUsage.js

@@ -8,11 +8,11 @@ class UserWaterUsage extends PureComponent {
     this.state = {
       config: {
         // 表头背景色
-        headerBGC: "#443dc5",
+        headerBGC: "transparent",
         // 奇数行背景色
-        oddRowBGC: "#09184F",
+        oddRowBGC: "#0ab8d952",
         // 偶数行背景色
-        evenRowBGC: "#070C34",
+        evenRowBGC: "transparent",
         // 行号
         index: false,
         // 行号表头
@@ -22,7 +22,7 @@ class UserWaterUsage extends PureComponent {
         // 对其方式
         align: ["center"],
         // 表行数
-        rowNum: 10,
+        rowNum: 6,
       },
     };
   }
@@ -30,29 +30,19 @@ class UserWaterUsage extends PureComponent {
   render() {
     const { height } = this.props;
     const data = {
-      header: ["排名", "大用户名称", "用水量（万m3）", "用途"],
+      header: ["排名", "水厂名称", "分数（分）"],
       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", "生活用水"],
+        ["NO.1", "第一水厂", "75"],
+        ["NO.1", "第一水厂", "75"],
+        ["NO.1", "第一水厂", "75"],
+        ["NO.1", "第一水厂", "75"],
+        ["NO.1", "第一水厂", "75"],
+        ["NO.1", "第一水厂", "75"],
+        ["NO.1", "第一水厂", "75"],
+        ["NO.1", "第一水厂", "75"],
+        ["NO.1", "第一水厂", "75"],
+        ["NO.1", "第一水厂", "75"],
+        ["NO.1", "第一水厂", "75"],
       ],
     };
     const config = {
@@ -63,7 +53,8 @@ class UserWaterUsage extends PureComponent {
     return (
       <div
         style={{
-          width: "100%",
+          width: "calc(100% - 24px)",
+          margin: "auto",
         }}
       >
         <ScrollBoard

src/components/WaterSupply/WaterVolume.js

@@ -12,6 +12,12 @@ class WaterVolume extends PureComponent {
   getOptions() {
     return {
       color: ["#3C4FD6", "#F6AC4B"],
+      grid: {
+        top: 30,
+        left: 80,
+        right: 30,
+        bottom: 30,
+      },
       xAxis: {
         max: "dataMax",
         axisLine: {
@@ -83,7 +89,7 @@ class WaterVolume extends PureComponent {
       <div
         style={{
           width: "5.375rem",
-          height: "3.125rem",
+          height: "3rem",
         }}
       >
         <Chart option={this.getOptions()} />

src/components/WaterSupply/index.js

@@ -25,7 +25,9 @@ class index extends PureComponent {
           >
             <EnergyConsumption />
           </ChartBox>
-          <UserWaterUsage height="30vh" />
+          <ChartBox title="水厂绩效排名" style={{ flex: 1 }}>
+            <UserWaterUsage height="22vh" />
+          </ChartBox>
         </LeftPage>
         <BMap />
       </div>

src/components/rightPage/index.jsx

@@ -14,13 +14,18 @@ class index extends PureComponent {
   render() {
     return (
       <RightPage>
-        <ChartBox title="当年水量统计" style={{ flex: 1}}>
+        <ChartBox title="当年水量统计" style={{ flex: 1 }}>
           <WaterVolumeStat />
         </ChartBox>
-        <ChartBox title="当月管网监测" style={{ flex: 1, marginTop: 30, marginBottom: 30 }}>
+        <ChartBox
+          title="当月管网监测"
+          style={{ flex: 1, marginTop: 30, marginBottom: 30 }}
+        >
           <PipelineMonitoring />
         </ChartBox>
-        <WaterPlantMonitoring height="30vh" />
+        <ChartBox title="水厂检测" style={{ flex: 1 }}>
+          <WaterPlantMonitoring height="25vh" />
+        </ChartBox>
       </RightPage>
     );
   }

src/router.jsx

@@ -2,6 +2,8 @@ import React, { Fragment } from "react";
 import { Router, Route, Switch } from "dva/router";
 import IndexPage from "./routes/IndexPage";
 import Sewage from "./routes/Sewage";
+import PineNet from "./routes/PineNet";
+import PumpStation from "./routes/PumpStation";
 import WaterSupply from "./routes/WaterSupply";
 import { Iconstyle } from "./assets/icon/iconfont";
 import { Globalstyle } from "./style/global.js";
@@ -20,6 +22,8 @@ function RouterConfig({ history }) {
           {/* <Route path='/map' exact component={BMap} /> */}
           <Route path="/water-supply" exact component={WaterSupply} />
           <Route path="/sewage" exact component={Sewage} />
+          <Route path="/pine-net" exact component={PineNet} />
+          <Route path="/pump-station" exact component={PumpStation} />
         </Switch>
       </Fragment>
     );

src/routes/PineNet.jsx

@@ -0,0 +1,31 @@
+// 污水
+import React, { Component } from "react";
+import { connect } from "dva";
+import { IndexPageStyle, IndexPageContent } from "./style";
+import TopPage from "../components/topPage";
+import PineNetLeft from "../components/PineNet/indexLeft";
+import PineNetCenter from "../components/PineNet/indexCenter";
+import PineNetRight from "../components/PineNet/indexRight";
+import Nav from "../components/Nav";
+
+class IndexPage extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <IndexPageStyle>
+        <TopPage />
+        <IndexPageContent>
+          <PineNetLeft />
+          <PineNetCenter className="center-page" />
+          <PineNetRight />
+        </IndexPageContent>
+        <Nav />
+      </IndexPageStyle>
+    );
+  }
+}
+
+export default connect()(IndexPage);

src/routes/PumpStation.jsx

@@ -0,0 +1,31 @@
+// 污水
+import React, { Component } from "react";
+import { connect } from "dva";
+import { IndexPageStyle, IndexPageContent } from "./style";
+import TopPage from "../components/topPage";
+import PumpLeft from "../components/PumpStation/indexLeft";
+import PumpCenter from "../components/PumpStation/indexCenter";
+import PumpRight from "../components/PumpStation/indexRight";
+import Nav from "../components/Nav";
+
+class PumpStation extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <IndexPageStyle>
+        <TopPage />
+        <IndexPageContent>
+          <PumpLeft />
+          <PumpCenter className="center-page" />
+          <PumpRight />
+        </IndexPageContent>
+        <Nav />
+      </IndexPageStyle>
+    );
+  }
+}
+
+export default connect()(PumpStation);