其他页面图表

package.json

@@ -7,7 +7,9 @@
     "precommit": "npm run lint"
   },
   "dependencies": {
+    "@ant-design/icons": "^5.0.1",
     "@jiaminghi/data-view-react": "^1.2.4",
+    "antd": "4",
     "bmap-draw": "^1.0.9",
     "dva": "^2.4.1",
     "echarts": "^4.9.0",

src/components/FloodControl/MaterialsPrepare.js

@@ -0,0 +1,90 @@
+// 当年防汛统计
+import React, { PureComponent } from "react";
+import Chart from "../../utils/chart";
+
+class MaterialsPrepare extends PureComponent {
+  constructor(props) {
+    super(props);
+  }
+  getOptions() {
+    return {
+      color: ["#38b3ff", "#00CA95", "#B8741A"],
+      tooltip: {},
+      grid: {
+        top: 35,
+        left: "3%",
+        right: "4%",
+        bottom: "3%",
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: "category",
+          data: ["沙袋", "反光锥", "警示灯", "吸污车", "水泵", "泵车", "皮卡"],
+          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: "aha",
+          type: "bar",
+          barWidth: "50%",
+          data: [12, 26, 9, 16, 7, 30, 5],
+        },
+      ],
+    };
+  }
+  render() {
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <Chart option={this.getOptions()} />
+      </div>
+    );
+  } //endrender
+}
+
+export default MaterialsPrepare;

src/components/FloodControl/PersonManagement.jsx

@@ -0,0 +1,186 @@
+import { Component } from "react";
+import { Collapse } from "antd";
+import { CustomCollapse, PersonCon } from "./style";
+const { Panel } = Collapse;
+
+const PersonManagement = () => {
+  const data = [
+    {
+      name: "管理中心",
+      children: [
+        {
+          name: "官网中心",
+          children: [
+            {
+              name: "李某某",
+              phone: "132999900900",
+              state: "在线",
+            },
+            {
+              name: "李某某",
+              phone: "132999900900",
+              state: "在线",
+            },
+            {
+              name: "李某某",
+              phone: "132999900900",
+              state: "在线",
+            },
+            {
+              name: "李某某",
+              phone: "132999900900",
+              state: "在线",
+            },
+            {
+              name: "李某某",
+              phone: "132999900900",
+              state: "在线",
+            },
+          ],
+        },
+        {
+          name: "官网中心2",
+          children: [
+            {
+              name: "李某某",
+              phone: "132999900900",
+              state: "在线",
+            },
+            {
+              name: "李某某",
+              phone: "132999900900",
+              state: "在线",
+            },
+            {
+              name: "李某某",
+              phone: "132999900900",
+              state: "在线",
+            },
+            {
+              name: "李某某",
+              phone: "132999900900",
+              state: "在线",
+            },
+            {
+              name: "李某某",
+              phone: "132999900900",
+              state: "在线",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "泵站运维",
+      children: [
+        {
+          name: "李某某",
+          phone: "132999900900",
+          state: "在线",
+        },
+        {
+          name: "李某某",
+          phone: "132999900900",
+          state: "在线",
+        },
+        {
+          name: "李某某",
+          phone: "132999900900",
+          state: "在线",
+        },
+        {
+          name: "李某某",
+          phone: "132999900900",
+          state: "在线",
+        },
+        {
+          name: "李某某",
+          phone: "132999900900",
+          state: "在线",
+        },
+      ],
+    },
+    {
+      name: "官网运维",
+      children: [
+        {
+          name: "李某某",
+          phone: "132999900900",
+          state: "在线",
+        },
+        {
+          name: "李某某",
+          phone: "132999900900",
+          state: "在线",
+        },
+        {
+          name: "李某某",
+          phone: "132999900900",
+          state: "在线",
+        },
+        {
+          name: "李某某",
+          phone: "132999900900",
+          state: "在线",
+        },
+        {
+          name: "李某某",
+          phone: "132999900900",
+          state: "在线",
+        },
+        {
+          name: "李某某",
+          phone: "132999900900",
+          state: "在线",
+        },
+        {
+          name: "李某某",
+          phone: "132999900900",
+          state: "在线",
+        },
+        {
+          name: "李某某",
+          phone: "132999900900",
+          state: "在线",
+        },
+        {
+          name: "李某某",
+          phone: "132999900900",
+          state: "在线",
+        },
+      ],
+    },
+  ];
+  const CollapseRender = (data) => {
+    return data.map((item, idx) => {
+      if (item.children?.length > 0) {
+        return (
+          <CustomCollapse defaultActiveKey={[`${item.name}_${idx}`]}>
+            <Panel key={`${item.name}_${idx}`} header={item.name}>
+              {CollapseRender(item.children)}
+            </Panel>
+          </CustomCollapse>
+        );
+      } else {
+        return (
+          <div
+            style={{
+              color: "#fff",
+              padding: "0 26px",
+              display: "flex",
+              justifyContent: "space-around",
+            }}
+          >
+            <div>{item.name}</div>
+            <div>{item.phone}</div>
+            <div>{item.state}</div>
+          </div>
+        );
+      }
+    });
+  };
+
+  return <PersonCon>{CollapseRender(data)}</PersonCon>;
+};
+
+export default PersonManagement;

src/components/FloodControl/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: "雨水管网" },
+            { value: 38, name: "雨污管网" },
+            { value: 32, name: "污水管网" },
+          ],
+        },
+      ],
+    };
+  }
+  render() {
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <Chart option={this.getOptions()} />
+      </div>
+    );
+  } //endrender
+}
+
+export default PineKindChart;

src/components/FloodControl/WarnMessage.js

@@ -0,0 +1,68 @@
+//大用户用水量排名
+import React, { PureComponent } from "react";
+import { ScrollBoard } from "@jiaminghi/data-view-react";
+
+class WarnMessage 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,
+        waitTime: 200000,
+      },
+    };
+  }
+  render() {
+    const { height } = this.props;
+    const data = {
+      header: ["报警内容", "泵站名称", "报警时间", "处理人员"],
+      data: [
+        ["水质COD超标", "***泵站", "2023-02-18 10:00", "张先生"],
+        ["水质COD超标", "***泵站", "2023-02-18 10:00", "张先生"],
+        ["水质COD超标", "***泵站", "2023-02-18 10:00", "张先生"],
+        ["水质COD超标", "***泵站", "2023-02-18 10:00", "张先生"],
+        ["水质COD超标", "***泵站", "2023-02-18 10:00", "张先生"],
+        ["水质COD超标", "***泵站", "2023-02-18 10:00", "张先生"],
+        ["水质COD超标", "***泵站", "2023-02-18 10:00", "张先生"],
+      ],
+    };
+    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 WarnMessage;

src/components/FloodControl/WaterLevel.js

@@ -0,0 +1,117 @@
+// 当年防汛统计
+import React, { PureComponent } from "react";
+import Chart from "../../utils/chart";
+
+class WaterLevel extends PureComponent {
+  constructor(props) {
+    super(props);
+  }
+  getOptions() {
+    return {
+      color: ["#5470c6", "#91cc75", "#fac858", "#ee6666"],
+      toolbox: {},
+      grid: {
+        top: 35,
+        left: "3%",
+        right: "4%",
+        bottom: "3%",
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: "category",
+          data: ["8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00"],
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+              fontSize: 14,
+            },
+          },
+          axisLine: {
+            symbol: ["none", "arrow"],
+            lineStyle: {
+              color: "#fff",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+      ],
+      yAxis: [
+        {
+          type: "value",
+          name: "积水点液位（m）",
+          nameTextStyle: {
+            align: "left",
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: true,
+            symbol: ["none", "arrow"],
+            lineStyle: {
+              color: "#fff",
+            },
+          },
+          axisLabel: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: "区域1",
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+          type: "line",
+          smooth: true,
+          showSymbol: false, //不展示拐点圆圈
+        },
+        {
+          name: "区域2",
+          data: [560, 672, 561, 254, 1230, 1460, 1640],
+          type: "line",
+          smooth: true,
+          showSymbol: false, //不展示拐点圆圈
+        },
+        {
+          name: "区域3",
+          data: [460, 472, 561, 654, 830, 1860, 1740],
+          type: "line",
+          smooth: true,
+          showSymbol: false, //不展示拐点圆圈
+        },
+      ],
+      legend: {
+        //图例配置
+        // icon:'arrow',
+        // width:'2',
+        itemHeight: 0, //远点宽度为0不显示原点
+        // right: '10%',
+        data: ["区域1", "区域2", "区域3"],
+        textStyle: {
+          color: "#c9d2d2",
+        },
+        lineStyle: {},
+      },
+    };
+  }
+  render() {
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <Chart option={this.getOptions()} />
+      </div>
+    );
+  } //endrender
+}
+
+export default WaterLevel;

src/components/FloodControl/indexCenter.js

@@ -0,0 +1,43 @@
+// 污水
+import React, { PureComponent } from "react";
+import {
+  CenterFloodTop,
+  CenterPage,
+  FloodItem,
+  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%" },
+      ],
+    };
+  }
+  render() {
+    return (
+      <CenterPage>
+        <CenterFloodTop>
+          {this.state.data.map((item, idx) => (
+            <FloodItem
+              color={idx ? "#9f6d0b" : "#3598df"}
+              right={`${idx * 180 + 50}px`}
+            >
+              {item.name}
+              <div className="text">{item.value}</div>
+            </FloodItem>
+          ))}
+        </CenterFloodTop>
+        <BMap />
+      </CenterPage>
+    );
+  }
+}
+
+export default index;

src/components/FloodControl/indexLeft.js

@@ -0,0 +1,76 @@
+// 污水
+import React, { PureComponent } from "react";
+import { Circle, CircleCon, LeftPage, Line, RightPage } from "./style";
+import ChartBox from "../ChartBox";
+import MaterialsPrepare from "./MaterialsPrepare";
+import WaterLevel from "./WaterLevel";
+import WarnMessage from "./WarnMessage";
+
+class index extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: [
+        {
+          name: "现在",
+          value: require("../../assets/sun.png"),
+        },
+        {
+          name: "15:00",
+          value: require("../../assets/smallRain.png"),
+        },
+        {
+          name: "17:00",
+          value: require("../../assets/bigRain.png"),
+        },
+        {
+          name: "17:00",
+          value: require("../../assets/bigRain.png"),
+        },
+        {
+          name: "17:00",
+          value: require("../../assets/bigRain.png"),
+        },
+        {
+          name: "17:00",
+          value: require("../../assets/bigRain.png"),
+        },
+      ],
+    };
+  }
+  render() {
+    return (
+      <LeftPage>
+        <CircleCon>
+          {this.state.data.map((item, idx) => (
+            <>
+              {idx !== 0 && <Line></Line>}
+              <div style={{ textAlign: "center", color: "#fff" }}>
+                <div>{item.name}</div>
+                <img className="image" src={item.value} />
+              </div>
+            </>
+          ))}
+        </CircleCon>
+        <ChartBox
+          title="重点区域积水点液位"
+          style={{ flex: 1, marginTop: 10, marginBottom: 30 }}
+        >
+          <WaterLevel />
+        </ChartBox>
+
+        <ChartBox
+          title="汛前物资准备统计"
+          style={{ flex: 1, marginBottom: 30 }}
+        >
+          <MaterialsPrepare />
+        </ChartBox>
+        <ChartBox title="报警信息" style={{ flex: 1 }}>
+          <WarnMessage height="20vh" />
+        </ChartBox>
+      </LeftPage>
+    );
+  }
+}
+
+export default index;

src/components/FloodControl/indexRight.js

@@ -0,0 +1,49 @@
+// 污水
+import React, { PureComponent } from "react";
+import { LeftPage, RightPage, TopCon, TopItem, TopItemText } from "./style";
+import ChartBox from "../ChartBox";
+import PersonManagement from "./PersonManagement";
+
+class index extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      src1: require("../../assets/icon3.png"),
+      src2: require("../../assets/icon3.png"),
+    };
+  }
+  render() {
+    return (
+      <div>
+        <RightPage>
+          <TopCon>
+            <TopItem color="#2ed9cb42">
+              <img src={this.state.src1} />
+              <TopItemText>
+                <div>在线车辆</div>
+                <div>38 辆</div>
+              </TopItemText>
+            </TopItem>
+            <TopItem color="#f1f00c42">
+              <img src={this.state.src1} />
+              <TopItemText>
+                <div>在线车辆</div>
+                <div>38 辆</div>
+              </TopItemText>
+            </TopItem>
+          </TopCon>
+
+          <ChartBox title="人员管理" style={{ flex: 1, marginTop: "8px" }}>
+            <PersonManagement />
+          </ChartBox>
+          <ChartBox
+            title="重点区域视频"
+            style={{ flex: 1, marginTop: "30px" }}
+          ></ChartBox>
+        </RightPage>
+      </div>
+    );
+  }
+}
+
+export default index;

src/components/FloodControl/style.js

@@ -0,0 +1,273 @@
+import styled from "styled-components";
+import { Collapse } from "antd";
+
+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;
+  height: 50px;
+  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_purple {
+    width: 80px;
+    height: 80px;
+    color: #9545cf;
+    font-size: 32px;
+    text-align: center;
+    line-height: 70px;
+    background: transparent;
+    border-radius: 50%;
+    border: 4px solid #9545cf;
+  }
+  .circle_yellow {
+    width: 80px;
+    height: 80px;
+    color: #d7b728;
+    font-size: 32px;
+    text-align: center;
+    line-height: 70px;
+    background: transparent;
+    border-radius: 50%;
+    border: 4px solid #d7b728;
+  }
+  .circle_text {
+    color: #c3c6c9;
+    font-size: 16px;
+    line-height: 40px;
+  }
+  .image {
+    width: 30px;
+    margin-top: 6px;
+  }
+`;
+export const Circle = styled.div`
+  width: 80px;
+  height: 80px;
+  color: ${(props) => props.color};
+  font-size: 32px;
+  text-align: center;
+  line-height: 70px;
+  background: transparent;
+  border-radius: 50%;
+  border: 4px solid ${(props) => props.color};
+`;
+
+export const Line = styled.div`
+  width: 1px;
+  height: 44px;
+  background-color: #c3c6c9;
+`;
+
+export const TopCon = styled.div`
+  display: flex;
+  height: 60px;
+  justify-content: space-between;
+`;
+export const TopItem = styled.div`
+  display: flex;
+  width: 49%;
+  padding: 10px;
+  background-color: ${(props) => props.color};
+  border: 1px solid #999494;
+`;
+export const TopItemText = styled.div`
+  text-align: center;
+  color: #fff;
+  flex-grow: 1;
+  font-size: 20px;
+`;
+
+export const CenterFloodTop = styled.div`
+  width: 100%;
+  z-index: 10;
+  position: relative;
+`;
+export const FloodItem = styled.div`
+  width: 140px;
+  height: 140px;
+  position: absolute;
+  right: ${(props) => props.right};
+  padding: 20px 0;
+  color: #c3c6c9;
+  font-size: 16px;
+  text-align: center;
+  line-height: 30px;
+  background: transparent;
+  border-radius: 50%;
+  border: 16px solid ${(props) => props.color};
+  .text {
+    color: #c3c6c9;
+    font-size: 32px;
+  }
+`;
+
+export const CustomCollapse = styled(Collapse)`
+  background-color: transparent;
+  border: none;
+  color: #fff;
+
+  &.ant-collapse > .ant-collapse-item {
+    border-bottom: none;
+  }
+  &.ant-collapse > .ant-collapse-item > .ant-collapse-header {
+    color: #fff;
+    padding: 2px 16px !important;
+  }
+  & .ant-collapse-content {
+    background-color: transparent;
+    border-top: none;
+  }
+  &.ant-collapse > .ant-collapse-item > .ant-collapse-header {
+    color: #fff;
+  }
+  &.ant-collapse > .ant-collapse-content > .ant-collapse-content-box {
+    padding: 6px 16px;
+  }
+  & .ant-collapse-content > .ant-collapse-content-box {
+    padding: 2px 16px;
+  }
+`;
+
+export const PersonCon = styled.div`
+  height: 45vh;
+  overflow-y: scroll;
+  width: 100%;
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: #1890ff;
+    border-radius: 10px;
+  }
+`;

src/components/PineNet/CircleProgressBar.js

@@ -0,0 +1,66 @@
+// 当年防汛统计
+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: "Access From",
+          type: "pie",
+          radius: ["40%", "70%"],
+          avoidLabelOverlap: false,
+          startAngle: 180,
+          label: {
+            show: false,
+            position: "center",
+          },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: 40,
+              fontWeight: "bold",
+            },
+          },
+          labelLine: {
+            show: false,
+          },
+          data: [
+            { name: "", value: 80 },
+            {
+              value: 10,
+              name: "Search Engine",
+              itemStyle: {
+                // stop the chart from rendering this piece
+                color: "none",
+                decal: {
+                  symbol: "none",
+                },
+              },
+            },
+          ],
+        },
+      ],
+    };
+  }
+  render() {
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <Chart option={this.getOptions()} />
+      </div>
+    );
+  } //endrender
+}
+
+export default PineKindChart;

src/components/PineNet/PineKindChart.js

@@ -21,9 +21,9 @@ class PineKindChart extends PureComponent {
             borderRadius: 8,
           },
           data: [
-            { value: 40, name: "rose 1" },
-            { value: 38, name: "rose 2" },
-            { value: 32, name: "rose 3" },
+            { value: 40, name: "雨水管网" },
+            { value: 38, name: "雨污管网" },
+            { value: 32, name: "污水管网" },
           ],
         },
       ],

src/components/PineNet/indexLeft.js

@@ -26,7 +26,7 @@ class index extends PureComponent {
           <WornAnalyze />
         </ChartBox>
         <ChartBox
-          title="当月管网监测"
+          title="当月供水管网监测"
           style={{ flex: 1, marginTop: 30, marginBottom: 30 }}
         >
           <PipelineMonitoring />

src/components/PineNet/indexRight.js

@@ -18,7 +18,7 @@ class index extends PureComponent {
     return (
       <div>
         <RightPage>
-          <ChartBox title="当月管网监测" style={{ flex: 1 }}>
+          <ChartBox title="当月排水管网监测" style={{ flex: 1 }}>
             <PipelineMonitoring />
           </ChartBox>
           <ChartBox
@@ -27,7 +27,7 @@ class index extends PureComponent {
           >
             <PineKindChart />
           </ChartBox>
-          <ChartBox title="当月管网监测" style={{ flex: 1 }}>
+          <ChartBox title="排水管网报表" style={{ flex: 1 }}>
             <DrainWaterPine height="25vh" />
           </ChartBox>
         </RightPage>

src/components/PumpStation/OpsStatistics.js

@@ -0,0 +1,90 @@
+//大用户用水量排名
+import React, { PureComponent } from "react";
+import { ScrollBoard } from "@jiaminghi/data-view-react";
+
+class OpsStatistics 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: 8,
+        waitTime: 200000,
+      },
+    };
+  }
+  render() {
+    const { height } = this.props;
+    const data = {
+      header: ["工单类型", "执行时间", "执行部门", "执行状态", "详情"],
+      data: [
+        [
+          "日常巡检",
+          "2023-03-01",
+          "泵站小组",
+          "<span style='color:#0af250;'>进行中</span>",
+          ">>",
+        ],
+        ["日常巡检", "2023-03-01", "泵站小组", "已完成", ">>"],
+        ["日常巡检", "2023-03-01", "泵站小组", "已完成", ">>"],
+        ["日常巡检", "2023-03-01", "泵站小组", "已完成", ">>"],
+        ["日常巡检", "2023-03-01", "泵站小组", "已完成", ">>"],
+        ["日常巡检", "2023-03-01", "泵站小组", "已完成", ">>"],
+        ["日常巡检", "2023-03-01", "泵站小组", "已完成", ">>"],
+        [
+          "日常巡检",
+          "2023-03-01",
+          "泵站小组",
+          "<span style='color:#0af250;'>进行中</span>",
+          ">>",
+        ],
+        ["日常巡检", "2023-03-01", "泵站小组", "已完成", ">>"],
+        [
+          "日常巡检",
+          "2023-03-01",
+          "泵站小组",
+          "<span style='color:#0af250;'>进行中</span>",
+          ">>",
+        ],
+        ["日常巡检", "2023-03-01", "泵站小组", "已完成", ">>"],
+      ],
+    };
+    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 OpsStatistics;

src/components/PumpStation/PineKindChart.js

@@ -21,9 +21,9 @@ class PineKindChart extends PureComponent {
             borderRadius: 8,
           },
           data: [
-            { value: 40, name: "rose 1" },
-            { value: 38, name: "rose 2" },
-            { value: 32, name: "rose 3" },
+            { value: 40, name: "雨水管网" },
+            { value: 38, name: "雨污管网" },
+            { value: 32, name: "污水管网" },
           ],
         },
       ],

src/components/PumpStation/WarnMessage.js

@@ -0,0 +1,68 @@
+//大用户用水量排名
+import React, { PureComponent } from "react";
+import { ScrollBoard } from "@jiaminghi/data-view-react";
+
+class WarnMessage 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,
+        waitTime: 200000,
+      },
+    };
+  }
+  render() {
+    const { height } = this.props;
+    const data = {
+      header: ["报警内容", "泵站名称", "报警时间", "处理人员"],
+      data: [
+        ["水质COD超标", "***泵站", "2023-02-18 10:00", "张先生"],
+        ["水质COD超标", "***泵站", "2023-02-18 10:00", "张先生"],
+        ["水质COD超标", "***泵站", "2023-02-18 10:00", "张先生"],
+        ["水质COD超标", "***泵站", "2023-02-18 10:00", "张先生"],
+        ["水质COD超标", "***泵站", "2023-02-18 10:00", "张先生"],
+        ["水质COD超标", "***泵站", "2023-02-18 10:00", "张先生"],
+        ["水质COD超标", "***泵站", "2023-02-18 10:00", "张先生"],
+      ],
+    };
+    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 WarnMessage;

src/components/PumpStation/indexLeft.js

@@ -1,11 +1,14 @@
 // 污水
 import React, { PureComponent } from "react";
-import { CircleCon, LeftPage, RightPage } from "./style";
+import { Circle, 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";
+import { Table } from "antd";
+import { DoubleRightOutlined } from "@ant-design/icons";
+import OpsStatistics from "./OpsStatistics";
 
 class index extends PureComponent {
   constructor(props) {
@@ -15,14 +18,94 @@ class index extends PureComponent {
         {
           name: "工单数量",
           value: 78,
+          color: "#0b8d14",
         },
         {
           name: "工单数量",
           value: 78,
+          color: "#9545cf",
         },
         {
           name: "工单数量",
           value: 78,
+          color: "#d7b728",
+        },
+      ],
+      dataSource: [
+        {
+          key: "1",
+          type: "日常巡检",
+          tiem: "2023-03-01",
+          dep: "泵站小组",
+          status: "进行中",
+        },
+        {
+          key: "2",
+          type: "日常巡检",
+          tiem: "2023-03-01",
+          dep: "泵站小组",
+          status: "进行中",
+        },
+        {
+          key: "3",
+          type: "日常巡检",
+          tiem: "2023-03-01",
+          dep: "泵站小组",
+          status: "进行中",
+        },
+        {
+          key: "4",
+          type: "日常巡检",
+          tiem: "2023-03-01",
+          dep: "泵站小组",
+          status: "进行中",
+        },
+        {
+          key: "5",
+          type: "日常巡检",
+          tiem: "2023-03-01",
+          dep: "泵站小组",
+          status: "进行中",
+        },
+        {
+          key: "6",
+          type: "日常巡检",
+          tiem: "2023-03-01",
+          dep: "泵站小组",
+          status: "进行中",
+        },
+        {
+          key: "7",
+          type: "日常巡检",
+          tiem: "2023-03-01",
+          dep: "泵站小组",
+          status: "进行中",
+        },
+      ],
+      columns: [
+        {
+          title: "工单类型",
+          dataIndex: "type",
+          key: "type",
+        },
+        {
+          title: "执行时间",
+          dataIndex: "time",
+          key: "time",
+        },
+        {
+          title: "执行部门",
+          dataIndex: "dep",
+          key: "dep",
+        },
+        {
+          title: "执行状态",
+          dataIndex: "status",
+          key: "status",
+        },
+        {
+          title: "详情",
+          render: () => <DoubleRightOutlined />,
         },
       ],
     };
@@ -31,18 +114,18 @@ class index extends PureComponent {
     return (
       <LeftPage>
         <CircleCon>
-          {this.state.data.map((item) => (
-            <div className="circle">
-              {item.value}
-              <div className="circle_text">{item.name}</div>
+          {this.state.data.map((item, idx) => (
+            <div style={{ textAlign: "center" }}>
+              <Circle color={item.color}>{item.value}</Circle>
+              <div className="circle_text">{item.name}</div>{" "}
             </div>
           ))}
         </CircleCon>
         <ChartBox
-          title="当月管网监测"
+          title="近一个月运维统计"
           style={{ flex: 1, marginTop: 30, marginBottom: 30 }}
         >
-          <PipelineMonitoring />
+          <OpsStatistics height="35vh" />
         </ChartBox>
         <ChartBox title="报警统计" style={{ flex: 1 }}>
           <PineKindChart />

src/components/PumpStation/indexRight.js

@@ -6,6 +6,7 @@ import BMap from "../centerPage/charts/BMap";
 import WaterVolumeStat from "../Overview/WaterVolumeStat";
 import PipelineMonitoring from "../Overview/PipelineMonitoring";
 import PumpGeneral from "./PumpGeneral";
+import WarnMessage from "./WarnMessage";
 // import WornAnalyze from "./WornAnalyze";
 // import DrainWaterPine from "./DrainWaterPine";
 // import PineKindChart from "./PineKindChart";
@@ -23,13 +24,14 @@ class index extends PureComponent {
             <PumpGeneral height="25vh" />
           </ChartBox>
           <ChartBox
-            title="排水官网种类统计"
+            title="视频监控"
             style={{ flex: 1, marginTop: 30, marginBottom: 30 }}
           >
             {/* <PineKindChart /> */}
           </ChartBox>
-          <ChartBox title="当月管网监测" style={{ flex: 1 }}>
+          <ChartBox title="报警信息" style={{ flex: 1 }}>
             {/* <DrainWaterPine height="25vh" /> */}
+            <WarnMessage height="25vh" />
           </ChartBox>
         </RightPage>
       </div>

src/components/PumpStation/style.js

@@ -133,10 +133,43 @@ export const CircleCon = styled.div`
     background: transparent;
     border-radius: 50%;
     border: 4px solid #0b8d14;
-    .circle_text {
-      color: #c3c6c9;
-      font-size: 16px;
-      line-height: 40px;
-    }
   }
+  .circle_purple {
+    width: 80px;
+    height: 80px;
+    color: #9545cf;
+    font-size: 32px;
+    text-align: center;
+    line-height: 70px;
+    background: transparent;
+    border-radius: 50%;
+    border: 4px solid #9545cf;
+  }
+  .circle_yellow {
+    width: 80px;
+    height: 80px;
+    color: #d7b728;
+    font-size: 32px;
+    text-align: center;
+    line-height: 70px;
+    background: transparent;
+    border-radius: 50%;
+    border: 4px solid #d7b728;
+  }
+  .circle_text {
+    color: #c3c6c9;
+    font-size: 16px;
+    line-height: 40px;
+  }
+`;
+export const Circle = styled.div`
+  width: 80px;
+  height: 80px;
+  color: ${(props) => props.color};
+  font-size: 32px;
+  text-align: center;
+  line-height: 70px;
+  background: transparent;
+  border-radius: 50%;
+  border: 4px solid ${(props) => props.color};
 `;

src/components/Sewage/EnergyConsumption.js

@@ -84,7 +84,6 @@ class EnergyConsumption extends PureComponent {
           },
         },
       },
-
       grid: {
         bottom: 30,
         right: 20,

src/index.js

@@ -1,5 +1,6 @@
-import dva from 'dva';
-import './utils/flexible';
+import dva from "dva";
+import "./utils/flexible";
+import "antd/dist/antd.css";
 
 // 1. Initialize
 const app = dva();
@@ -8,12 +9,12 @@ const app = dva();
 // app.use({});
 
 // 3. Model
-app.model(require('./models/leftPage').default);
-app.model(require('./models/centerPage').default);
-app.model(require('./models/rightPage').default);
+app.model(require("./models/leftPage").default);
+app.model(require("./models/centerPage").default);
+app.model(require("./models/rightPage").default);
 
 // 4. Router
-app.router(require('./router').default);
+app.router(require("./router").default);
 
 // 5. Start
-app.start('#root');
+app.start("#root");

src/router.jsx

@@ -7,6 +7,7 @@ import PumpStation from "./routes/PumpStation";
 import WaterSupply from "./routes/WaterSupply";
 import { Iconstyle } from "./assets/icon/iconfont";
 import { Globalstyle } from "./style/global.js";
+import FloodControl from "./routes/FloodControl";
 
 function RouterConfig({ history }) {
   const route = () => {
@@ -24,6 +25,7 @@ function RouterConfig({ history }) {
           <Route path="/sewage" exact component={Sewage} />
           <Route path="/pine-net" exact component={PineNet} />
           <Route path="/pump-station" exact component={PumpStation} />
+          <Route path="/flood-control" exact component={FloodControl} />
         </Switch>
       </Fragment>
     );

src/routes/FloodControl.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 FloodLeft from "../components/FloodControl/indexLeft";
+import FloodCenter from "../components/FloodControl/indexCenter";
+import FloodRight from "../components/FloodControl/indexRight";
+import Nav from "../components/Nav";
+
+class FloodControl extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <IndexPageStyle>
+        <TopPage />
+        <IndexPageContent>
+          <FloodLeft />
+          <FloodCenter className="center-page" />
+          <FloodRight />
+        </IndexPageContent>
+        <Nav />
+      </IndexPageStyle>
+    );
+  }
+}
+
+export default connect()(FloodControl);

src/routes/PineNet.jsx

@@ -8,7 +8,7 @@ import PineNetCenter from "../components/PineNet/indexCenter";
 import PineNetRight from "../components/PineNet/indexRight";
 import Nav from "../components/Nav";
 
-class IndexPage extends Component {
+class PineNet extends Component {
   constructor(props) {
     super(props);
     this.state = {};
@@ -28,4 +28,4 @@ class IndexPage extends Component {
   }
 }
 
-export default connect()(IndexPage);
+export default connect()(PineNet);

yarn.lock

@@ -10,6 +10,58 @@
     "@jridgewell/gen-mapping" "^0.1.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@ant-design/colors@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@ant-design/colors/-/colors-6.0.0.tgz#9b9366257cffcc47db42b9d0203bb592c13c0298"
+  integrity sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==
+  dependencies:
+    "@ctrl/tinycolor" "^3.4.0"
+
+"@ant-design/colors@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@ant-design/colors/-/colors-7.0.0.tgz#eb7eecead124c3533aea05d61254f0a17f2b61b3"
+  integrity sha512-iVm/9PfGCbC0dSMBrz7oiEXZaaGH7ceU40OJEfKmyuzR9R5CRimJYPlRiFtMQGQcbNMea/ePcoIebi4ASGYXtg==
+  dependencies:
+    "@ctrl/tinycolor" "^3.4.0"
+
+"@ant-design/icons-svg@^4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz#8630da8eb4471a4aabdaed7d1ff6a97dcb2cf05a"
+  integrity sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw==
+
+"@ant-design/icons@^4.7.0":
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-4.8.0.tgz#3084e2bb494cac3dad6c0392f77c1efc90ee1fa4"
+  integrity sha512-T89P2jG2vM7OJ0IfGx2+9FC5sQjtTzRSz+mCHTXkFn/ELZc2YpfStmYHmqzq2Jx55J0F7+O6i5/ZKFSVNWCKNg==
+  dependencies:
+    "@ant-design/colors" "^6.0.0"
+    "@ant-design/icons-svg" "^4.2.1"
+    "@babel/runtime" "^7.11.2"
+    classnames "^2.2.6"
+    rc-util "^5.9.4"
+
+"@ant-design/icons@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-5.0.1.tgz#febb1fdc5776f58187b2c953ac9a4496069d045b"
+  integrity sha512-ZyF4ksXCcdtwA/1PLlnFLcF/q8/MhwxXhKHh4oCHDA4Ip+ZzAHoICtyp4wZWfiCVDP0yuz3HsjyvuldHFb3wjA==
+  dependencies:
+    "@ant-design/colors" "^7.0.0"
+    "@ant-design/icons-svg" "^4.2.1"
+    "@babel/runtime" "^7.11.2"
+    classnames "^2.2.6"
+    rc-util "^5.9.4"
+
+"@ant-design/react-slick@~0.29.1":
+  version "0.29.2"
+  resolved "https://registry.yarnpkg.com/@ant-design/react-slick/-/react-slick-0.29.2.tgz#53e6a7920ea3562eebb304c15a7fc2d7e619d29c"
+  integrity sha512-kgjtKmkGHa19FW21lHnAfyyH9AAoh35pBdcJ53rHmQ3O+cfFHGHnUbj/HFrRNJ5vIts09FKJVAD8RpaC+RaWfA==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    classnames "^2.2.5"
+    json2mq "^0.2.0"
+    lodash "^4.17.21"
+    resize-observer-polyfill "^1.5.1"
+
 "@babel/code-frame@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.0.0-beta.44.tgz#2a02643368de80916162be70865c97774f3adbd9"
@@ -974,7 +1026,7 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.7", "@babel/runtime@^7.18.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.0", "@babel/runtime@^7.20.7", "@babel/runtime@^7.4.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.21.0"
   resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
   integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
@@ -1050,6 +1102,11 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
+"@ctrl/tinycolor@^3.4.0":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.6.0.tgz#53fa5fe9c34faee89469e48f91d51a3766108bc8"
+  integrity sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ==
+
 "@emotion/is-prop-valid@^1.1.0":
   version "1.2.0"
   resolved "https://registry.npmmirror.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
@@ -1156,6 +1213,15 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@rc-component/portal@^1.0.0-6", "@rc-component/portal@^1.0.0-8", "@rc-component/portal@^1.0.2":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@rc-component/portal/-/portal-1.1.0.tgz#6b94450d2c2b00d50b141bd7a0be23bd96503dbe"
+  integrity sha512-tbXM9SB1r5FOuZjRCljERFByFiEUcMmCWMXLog/NmgCzlAzreXyf23Vei3ZpSMxSMavzPnhCovfZjZdmxS3d1w==
+  dependencies:
+    "@babel/runtime" "^7.18.0"
+    classnames "^2.3.2"
+    rc-util "^5.24.4"
+
 "@turf/along@^6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@turf/along/-/along-6.5.0.tgz#ab12eec58a14de60fe243a62d31a474f415c8fef"
@@ -2642,6 +2708,55 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
+antd@4:
+  version "4.24.8"
+  resolved "https://registry.yarnpkg.com/antd/-/antd-4.24.8.tgz#22f34de6857556868780dfa5fe7b374b0b71b517"
+  integrity sha512-wrNy2Hi27uM3948okG3n2GwzQKBFUn1Qn5mn2I/ALcR28rC6cTjHYOuA248Zl9ECzz3jo4TY2R0SIa+5GZ/zGA==
+  dependencies:
+    "@ant-design/colors" "^6.0.0"
+    "@ant-design/icons" "^4.7.0"
+    "@ant-design/react-slick" "~0.29.1"
+    "@babel/runtime" "^7.18.3"
+    "@ctrl/tinycolor" "^3.4.0"
+    classnames "^2.2.6"
+    copy-to-clipboard "^3.2.0"
+    lodash "^4.17.21"
+    moment "^2.29.2"
+    rc-cascader "~3.7.0"
+    rc-checkbox "~2.3.0"
+    rc-collapse "~3.4.2"
+    rc-dialog "~9.0.2"
+    rc-drawer "~6.1.0"
+    rc-dropdown "~4.0.0"
+    rc-field-form "~1.27.0"
+    rc-image "~5.13.0"
+    rc-input "~0.1.4"
+    rc-input-number "~7.3.9"
+    rc-mentions "~1.13.1"
+    rc-menu "~9.8.0"
+    rc-motion "^2.6.1"
+    rc-notification "~4.6.0"
+    rc-pagination "~3.2.0"
+    rc-picker "~2.7.0"
+    rc-progress "~3.4.1"
+    rc-rate "~2.9.0"
+    rc-resize-observer "^1.2.0"
+    rc-segmented "~2.1.0"
+    rc-select "~14.1.13"
+    rc-slider "~10.0.0"
+    rc-steps "~5.0.0-alpha.2"
+    rc-switch "~3.2.0"
+    rc-table "~7.26.0"
+    rc-tabs "~12.5.6"
+    rc-textarea "~0.4.5"
+    rc-tooltip "~5.2.0"
+    rc-tree "~5.7.0"
+    rc-tree-select "~5.5.0"
+    rc-trigger "^5.2.10"
+    rc-upload "~4.3.0"
+    rc-util "^5.22.5"
+    scroll-into-view-if-needed "^2.2.25"
+
 any-promise@^1.0.0:
   version "1.3.0"
   resolved "https://registry.npmmirror.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
@@ -2782,6 +2897,11 @@ array-reduce@~0.0.0:
   resolved "https://registry.npmmirror.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
   integrity sha512-8jR+StqaC636u7h3ye1co3lQRefgVVUQUhuAmRbDqIMeR2yuXzRvkCNQiQ5J/wbREmoBLNtp13dhaaVpZQDRUw==
 
+array-tree-filter@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz#873ac00fec83749f255ac8dd083814b4f6329190"
+  integrity sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==
+
 array-union@^1.0.1:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
@@ -2942,6 +3062,11 @@ async-limiter@~1.0.0:
   resolved "https://registry.npmmirror.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
   integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
 
+async-validator@^4.1.0:
+  version "4.2.5"
+  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-4.2.5.tgz#c96ea3332a521699d0afaaceed510a54656c6339"
+  integrity sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==
+
 async@^2.1.2, async@^2.1.4, async@^2.4.1, async@^2.6.4:
   version "2.6.4"
   resolved "https://registry.npmmirror.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
@@ -4052,6 +4177,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@2.x, classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1, classnames@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 clean-css@4.2.x:
   version "4.2.4"
   resolved "https://registry.npmmirror.com/clean-css/-/clean-css-4.2.4.tgz#733bf46eba4e607c6891ea57c24a989356831178"
@@ -4260,6 +4390,11 @@ compression@^1.7.3:
     safe-buffer "5.1.2"
     vary "~1.1.2"
 
+compute-scroll-into-view@^1.0.20:
+  version "1.0.20"
+  resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz#1768b5522d1172754f5d0c9b02de3af6be506a43"
+  integrity sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -4366,6 +4501,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.npmmirror.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==
 
+copy-to-clipboard@^3.2.0:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
+  integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 copy-webpack-plugin@^4.2.0:
   version "4.6.0"
   resolved "https://registry.npmmirror.com/copy-webpack-plugin/-/copy-webpack-plugin-4.6.0.tgz#e7f40dd8a68477d405dd1b7a854aae324b158bae"
@@ -4724,6 +4866,16 @@ data-urls@^1.0.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
+date-fns@2.x:
+  version "2.29.3"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
+  integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
+
+dayjs@1.x:
+  version "1.11.7"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
+  integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -4975,6 +5127,11 @@ doctrine@^2.1.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-align@^1.7.0:
+  version "1.12.4"
+  resolved "https://registry.yarnpkg.com/dom-align/-/dom-align-1.12.4.tgz#3503992eb2a7cfcb2ed3b2a6d21e0b9c00d54511"
+  integrity sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==
+
 dom-converter@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmmirror.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -8280,6 +8437,13 @@ json-stringify-safe@~5.0.1:
   resolved "https://registry.npmmirror.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
 
+json2mq@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
+  integrity sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==
+  dependencies:
+    string-convert "^0.2.0"
+
 json3@^3.3.2:
   version "3.3.3"
   resolved "https://registry.npmmirror.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81"
@@ -8948,6 +9112,11 @@ mixin-deep@^1.2.0:
   dependencies:
     minimist "^1.2.6"
 
+moment@^2.24.0, moment@^2.29.2:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
 moo@^0.5.0:
   version "0.5.2"
   resolved "https://registry.npmmirror.com/moo/-/moo-0.5.2.tgz#f9fe82473bc7c184b0d32e2215d3f6e67278733c"
@@ -10539,6 +10708,377 @@ rbush@^3.0.1:
   dependencies:
     quickselect "^2.0.0"
 
+rc-align@^4.0.0:
+  version "4.0.15"
+  resolved "https://registry.yarnpkg.com/rc-align/-/rc-align-4.0.15.tgz#2bbd665cf85dfd0b0244c5a752b07565e9098577"
+  integrity sha512-wqJtVH60pka/nOX7/IspElA8gjPNQKIx/ZqJ6heATCkXpe1Zg4cPVrMD2vC96wjsFFL8WsmhPbx9tdMo1qqlIA==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    dom-align "^1.7.0"
+    rc-util "^5.26.0"
+    resize-observer-polyfill "^1.5.1"
+
+rc-cascader@~3.7.0:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/rc-cascader/-/rc-cascader-3.7.1.tgz#a0cea44ce0debd6a8b929b4a9f08394538438a46"
+  integrity sha512-LDFq2NjGNLjg83YF3iwkPBcw7SS3fZPUasBgEOp/Yg5gyM1dLGwPsnUBq4bQBXo3TMWZvGrhZXs+gPlVMF+QDw==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    array-tree-filter "^2.1.0"
+    classnames "^2.3.1"
+    rc-select "~14.1.0"
+    rc-tree "~5.7.0"
+    rc-util "^5.6.1"
+
+rc-checkbox@~2.3.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/rc-checkbox/-/rc-checkbox-2.3.2.tgz#f91b3678c7edb2baa8121c9483c664fa6f0aefc1"
+  integrity sha512-afVi1FYiGv1U0JlpNH/UaEXdh6WUJjcWokj/nUN2TgG80bfG+MDdbfHKlLcNNba94mbjy2/SXJ1HDgrOkXGAjg==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.1"
+
+rc-collapse@~3.4.2:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/rc-collapse/-/rc-collapse-3.4.2.tgz#1310be7ad4cd0dcfc622c45f6c3b5ffdee403ad7"
+  integrity sha512-jpTwLgJzkhAgp2Wpi3xmbTbbYExg6fkptL67Uu5LCRVEj6wqmy0DHTjjeynsjOLsppHGHu41t1ELntZ0lEvS/Q==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    rc-motion "^2.3.4"
+    rc-util "^5.2.1"
+    shallowequal "^1.1.0"
+
+rc-dialog@~9.0.0, rc-dialog@~9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/rc-dialog/-/rc-dialog-9.0.2.tgz#aadfebdeba145f256c1fac9b9f509f893cdbb5b8"
+  integrity sha512-s3U+24xWUuB6Bn2Lk/Qt6rufy+uT+QvWkiFhNBcO9APLxcFFczWamaq7x9h8SCuhfc1nHcW4y8NbMsnAjNnWyg==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    "@rc-component/portal" "^1.0.0-8"
+    classnames "^2.2.6"
+    rc-motion "^2.3.0"
+    rc-util "^5.21.0"
+
+rc-drawer@~6.1.0:
+  version "6.1.4"
+  resolved "https://registry.yarnpkg.com/rc-drawer/-/rc-drawer-6.1.4.tgz#6c1e7df38f92390c8ace0c92a6866574329c1ce3"
+  integrity sha512-tuRk2Hzecczt4zSH09ZQkAPzvi28HxvTgsTJtqUHgPPezhE+UBypyNls1hLVehD8fpFbsA12flophT2rKT/W8Q==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    "@rc-component/portal" "^1.0.0-6"
+    classnames "^2.2.6"
+    rc-motion "^2.6.1"
+    rc-util "^5.21.2"
+
+rc-dropdown@~4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/rc-dropdown/-/rc-dropdown-4.0.1.tgz#f65d9d3d89750241057db59d5a75e43cd4576b68"
+  integrity sha512-OdpXuOcme1rm45cR0Jzgfl1otzmU4vuBVb+etXM8vcaULGokAKVpKlw8p6xzspG7jGd/XxShvq+N3VNEfk/l5g==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    classnames "^2.2.6"
+    rc-trigger "^5.3.1"
+    rc-util "^5.17.0"
+
+rc-field-form@~1.27.0:
+  version "1.27.4"
+  resolved "https://registry.yarnpkg.com/rc-field-form/-/rc-field-form-1.27.4.tgz#53600714af5b28c226c70d34867a8c52ccd64d44"
+  integrity sha512-PQColQnZimGKArnOh8V2907+VzDCXcqtFvHgevDLtqWc/P7YASb/FqntSmdS8q3VND5SHX3Y1vgMIzY22/f/0Q==
+  dependencies:
+    "@babel/runtime" "^7.18.0"
+    async-validator "^4.1.0"
+    rc-util "^5.8.0"
+
+rc-image@~5.13.0:
+  version "5.13.0"
+  resolved "https://registry.yarnpkg.com/rc-image/-/rc-image-5.13.0.tgz#1ed9b852a40b5eff34786ba7d2f0e9d26eeab874"
+  integrity sha512-iZTOmw5eWo2+gcrJMMcnd7SsxVHl3w5xlyCgsULUdJhJbnuI8i/AL0tVOsE7aLn9VfOh1qgDT3mC2G75/c7mqg==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    "@rc-component/portal" "^1.0.2"
+    classnames "^2.2.6"
+    rc-dialog "~9.0.0"
+    rc-motion "^2.6.2"
+    rc-util "^5.0.6"
+
+rc-input-number@~7.3.9:
+  version "7.3.11"
+  resolved "https://registry.yarnpkg.com/rc-input-number/-/rc-input-number-7.3.11.tgz#c7089705a220e1a59ba974fabf89693e00dd2442"
+  integrity sha512-aMWPEjFeles6PQnMqP5eWpxzsvHm9rh1jQOWXExUEIxhX62Fyl/ptifLHOn17+waDG1T/YUb6flfJbvwRhHrbA==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.5"
+    rc-util "^5.23.0"
+
+rc-input@~0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/rc-input/-/rc-input-0.1.4.tgz#45cb4ba209ae6cc835a2acb8629d4f8f0cb347e0"
+  integrity sha512-FqDdNz+fV2dKNgfXzcSLKvC+jEs1709t7nD+WdfjrdSaOcefpgc7BUJYadc3usaING+b7ediMTfKxuJBsEFbXA==
+  dependencies:
+    "@babel/runtime" "^7.11.1"
+    classnames "^2.2.1"
+    rc-util "^5.18.1"
+
+rc-mentions@~1.13.1:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/rc-mentions/-/rc-mentions-1.13.1.tgz#c884b70e1505a197f1b32a7c6b39090db6992a72"
+  integrity sha512-FCkaWw6JQygtOz0+Vxz/M/NWqrWHB9LwqlY2RtcuFqWJNFK9njijOOzTSsBGANliGufVUzx/xuPHmZPBV0+Hgw==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.6"
+    rc-menu "~9.8.0"
+    rc-textarea "^0.4.0"
+    rc-trigger "^5.0.4"
+    rc-util "^5.22.5"
+
+rc-menu@~9.8.0:
+  version "9.8.2"
+  resolved "https://registry.yarnpkg.com/rc-menu/-/rc-menu-9.8.2.tgz#179df4ea0fc46fffb7a21e18d3cddb901ce35986"
+  integrity sha512-EahOJVjLuEnJsThoPN+mGnVm431RzVzDLZWHRS/YnXTQULa7OsgdJa/Y7qXxc3Z5sz8mgT6xYtgpmBXLxrZFaQ==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    rc-motion "^2.4.3"
+    rc-overflow "^1.2.8"
+    rc-trigger "^5.1.2"
+    rc-util "^5.27.0"
+
+rc-motion@^2.0.0, rc-motion@^2.0.1, rc-motion@^2.2.0, rc-motion@^2.3.0, rc-motion@^2.3.4, rc-motion@^2.4.3, rc-motion@^2.4.4, rc-motion@^2.6.1, rc-motion@^2.6.2:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/rc-motion/-/rc-motion-2.6.3.tgz#e6d8ca06591c2c1bcd3391a8e7a822ebc4d94e9c"
+  integrity sha512-xFLkes3/7VL/J+ah9jJruEW/Akbx5F6jVa2wG5o/ApGKQKSOd5FR3rseHLL9+xtJg4PmCwo6/1tqhDO/T+jFHA==
+  dependencies:
+    "@babel/runtime" "^7.11.1"
+    classnames "^2.2.1"
+    rc-util "^5.21.0"
+
+rc-notification@~4.6.0:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/rc-notification/-/rc-notification-4.6.1.tgz#068e8674f4bd7926a447eca512915d4b41b15c91"
+  integrity sha512-NSmFYwrrdY3+un1GvDAJQw62Xi9LNMSsoQyo95tuaYrcad5Bn9gJUL8AREufRxSQAQnr64u3LtP3EUyLYT6bhw==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    rc-motion "^2.2.0"
+    rc-util "^5.20.1"
+
+rc-overflow@^1.0.0, rc-overflow@^1.2.8:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/rc-overflow/-/rc-overflow-1.3.0.tgz#964f7db14aab611c3047788d3b8ee472732fee09"
+  integrity sha512-p2Qt4SWPTHAYl4oAao1THy669Fm5q8pYBDBHRaFOekCvcdcrgIx0ByXQMEkyPm8wUDX4BK6aARWecvCRc/7CTA==
+  dependencies:
+    "@babel/runtime" "^7.11.1"
+    classnames "^2.2.1"
+    rc-resize-observer "^1.0.0"
+    rc-util "^5.19.2"
+
+rc-pagination@~3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/rc-pagination/-/rc-pagination-3.2.0.tgz#4f2fdba9fdac0f48e5c9fb1141973818138af7e1"
+  integrity sha512-5tIXjB670WwwcAJzAqp2J+cOBS9W3cH/WU1EiYwXljuZ4vtZXKlY2Idq8FZrnYBz8KhN3vwPo9CoV/SJS6SL1w==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.1"
+
+rc-picker@~2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/rc-picker/-/rc-picker-2.7.0.tgz#3c19881da27a0c5ee4c7e7504e21b552bd43a94c"
+  integrity sha512-oZH6FZ3j4iuBxHB4NvQ6ABRsS2If/Kpty1YFFsji7/aej6ruGmfM7WnJWQ88AoPfpJ++ya5z+nVEA8yCRYGKyw==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.1"
+    date-fns "2.x"
+    dayjs "1.x"
+    moment "^2.24.0"
+    rc-trigger "^5.0.4"
+    rc-util "^5.4.0"
+    shallowequal "^1.1.0"
+
+rc-progress@~3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/rc-progress/-/rc-progress-3.4.1.tgz#a9ffe099e88a4fc03afb09d8603162bf0760d743"
+  integrity sha512-eAFDHXlk8aWpoXl0llrenPMt9qKHQXphxcVsnKs0FHC6eCSk1ebJtyaVjJUzKe0233ogiLDeEFK1Uihz3s67hw==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.6"
+    rc-util "^5.16.1"
+
+rc-rate@~2.9.0:
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/rc-rate/-/rc-rate-2.9.2.tgz#4a58965d1ecf91896ebae01d458b59056df0b4ea"
+  integrity sha512-SaiZFyN8pe0Fgphv8t3+kidlej+cq/EALkAJAc3A0w0XcPaH2L1aggM8bhe1u6GAGuQNAoFvTLjw4qLPGRKV5g==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.5"
+    rc-util "^5.0.1"
+
+rc-resize-observer@^1.0.0, rc-resize-observer@^1.1.0, rc-resize-observer@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/rc-resize-observer/-/rc-resize-observer-1.3.1.tgz#b61b9f27048001243617b81f95e53d7d7d7a6a3d"
+  integrity sha512-iFUdt3NNhflbY3mwySv5CA1TC06zdJ+pfo0oc27xpf4PIOvfZwZGtD9Kz41wGYqC4SLio93RVAirSSpYlV/uYg==
+  dependencies:
+    "@babel/runtime" "^7.20.7"
+    classnames "^2.2.1"
+    rc-util "^5.27.0"
+    resize-observer-polyfill "^1.5.1"
+
+rc-segmented@~2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/rc-segmented/-/rc-segmented-2.1.2.tgz#14c9077a1dae9c2ccb2ef5fbc5662c1c48c7ce8e"
+  integrity sha512-qGo1bCr83ESXpXVOCXjFe1QJlCAQXyi9KCiy8eX3rIMYlTeJr/ftySIaTnYsitL18SvWf5ZEHsfqIWoX0EMfFQ==
+  dependencies:
+    "@babel/runtime" "^7.11.1"
+    classnames "^2.2.1"
+    rc-motion "^2.4.4"
+    rc-util "^5.17.0"
+
+rc-select@~14.1.0, rc-select@~14.1.13:
+  version "14.1.16"
+  resolved "https://registry.yarnpkg.com/rc-select/-/rc-select-14.1.16.tgz#0cc4b5a1fc551a2db7c96bc1ece0896317ecdd47"
+  integrity sha512-71XLHleuZmufpdV2vis5oituRkhg2WNvLpVMJBGWRar6WGAVOHXaY9DR5HvwWry3EGTn19BqnL6Xbybje6f8YA==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    rc-motion "^2.0.1"
+    rc-overflow "^1.0.0"
+    rc-trigger "^5.0.4"
+    rc-util "^5.16.1"
+    rc-virtual-list "^3.2.0"
+
+rc-slider@~10.0.0:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-10.0.1.tgz#7058c68ff1e1aa4e7c3536e5e10128bdbccb87f9"
+  integrity sha512-igTKF3zBet7oS/3yNiIlmU8KnZ45npmrmHlUUio8PNbIhzMcsh+oE/r2UD42Y6YD2D/s+kzCQkzQrPD6RY435Q==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.5"
+    rc-util "^5.18.1"
+    shallowequal "^1.1.0"
+
+rc-steps@~5.0.0-alpha.2:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/rc-steps/-/rc-steps-5.0.0.tgz#2e2403f2dd69eb3966d65f461f7e3a8ee1ef69fe"
+  integrity sha512-9TgRvnVYirdhbV0C3syJFj9EhCRqoJAsxt4i1rED5o8/ZcSv5TLIYyo4H8MCjLPvbe2R+oBAm/IYBEtC+OS1Rw==
+  dependencies:
+    "@babel/runtime" "^7.16.7"
+    classnames "^2.2.3"
+    rc-util "^5.16.1"
+
+rc-switch@~3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/rc-switch/-/rc-switch-3.2.2.tgz#d001f77f12664d52595b4f6fb425dd9e66fba8e8"
+  integrity sha512-+gUJClsZZzvAHGy1vZfnwySxj+MjLlGRyXKXScrtCTcmiYNPzxDFOxdQ/3pK1Kt/0POvwJ/6ALOR8gwdXGhs+A==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.1"
+    rc-util "^5.0.1"
+
+rc-table@~7.26.0:
+  version "7.26.0"
+  resolved "https://registry.yarnpkg.com/rc-table/-/rc-table-7.26.0.tgz#9d517e7fa512e7571fdcc453eb1bf19edfac6fbc"
+  integrity sha512-0cD8e6S+DTGAt5nBZQIPFYEaIukn17sfa5uFL98faHlH/whZzD8ii3dbFL4wmUDEL4BLybhYop+QUfZJ4CPvNQ==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.5"
+    rc-resize-observer "^1.1.0"
+    rc-util "^5.22.5"
+    shallowequal "^1.1.0"
+
+rc-tabs@~12.5.6:
+  version "12.5.10"
+  resolved "https://registry.yarnpkg.com/rc-tabs/-/rc-tabs-12.5.10.tgz#0e41c723fac66c4f0bcad3271429fff6653b0721"
+  integrity sha512-Ay0l0jtd4eXepFH9vWBvinBjqOpqzcsJTerBGwJy435P2S90Uu38q8U/mvc1sxUEVOXX5ZCFbxcWPnfG3dH+tQ==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    classnames "2.x"
+    rc-dropdown "~4.0.0"
+    rc-menu "~9.8.0"
+    rc-motion "^2.6.2"
+    rc-resize-observer "^1.0.0"
+    rc-util "^5.16.0"
+
+rc-textarea@^0.4.0, rc-textarea@~0.4.5:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/rc-textarea/-/rc-textarea-0.4.7.tgz#627f662d46f99e0059d1c1ebc8db40c65339fe90"
+  integrity sha512-IQPd1CDI3mnMlkFyzt2O4gQ2lxUsnBAeJEoZGJnkkXgORNqyM9qovdrCj9NzcRfpHgLdzaEbU3AmobNFGUznwQ==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.1"
+    rc-resize-observer "^1.0.0"
+    rc-util "^5.24.4"
+    shallowequal "^1.1.0"
+
+rc-tooltip@~5.2.0:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/rc-tooltip/-/rc-tooltip-5.2.2.tgz#e5cafa8ecebf78108936a0bcb93c150fa81ac93b"
+  integrity sha512-jtQzU/18S6EI3lhSGoDYhPqNpWajMtS5VV/ld1LwyfrDByQpYmw/LW6U7oFXXLukjfDHQ7Ju705A82PRNFWYhg==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    classnames "^2.3.1"
+    rc-trigger "^5.0.0"
+
+rc-tree-select@~5.5.0:
+  version "5.5.5"
+  resolved "https://registry.yarnpkg.com/rc-tree-select/-/rc-tree-select-5.5.5.tgz#d28b3b45da1e820cd21762ba0ee93c19429bb369"
+  integrity sha512-k2av7jF6tW9bIO4mQhaVdV4kJ1c54oxV3/hHVU+oD251Gb5JN+m1RbJFTMf1o0rAFqkvto33rxMdpafaGKQRJw==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    rc-select "~14.1.0"
+    rc-tree "~5.7.0"
+    rc-util "^5.16.1"
+
+rc-tree@~5.7.0:
+  version "5.7.3"
+  resolved "https://registry.yarnpkg.com/rc-tree/-/rc-tree-5.7.3.tgz#5da576ba87039486d59092eb4490831690b8b3b5"
+  integrity sha512-Oql2S9+ZmT+mfTp5SNo1XM0QvkENjc0mPRFsHWRFSPuKird0OYMZZKmLznUJ+0aGDeFFWN42wiUZJtMFhrLgLw==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    rc-motion "^2.0.1"
+    rc-util "^5.16.1"
+    rc-virtual-list "^3.4.8"
+
+rc-trigger@^5.0.0, rc-trigger@^5.0.4, rc-trigger@^5.1.2, rc-trigger@^5.2.10, rc-trigger@^5.3.1:
+  version "5.3.4"
+  resolved "https://registry.yarnpkg.com/rc-trigger/-/rc-trigger-5.3.4.tgz#6b4b26e32825677c837d1eb4d7085035eecf9a61"
+  integrity sha512-mQv+vas0TwKcjAO2izNPkqR4j86OemLRmvL2nOzdP9OWNWA1ivoTt5hzFqYNW9zACwmTezRiN8bttrC7cZzYSw==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    classnames "^2.2.6"
+    rc-align "^4.0.0"
+    rc-motion "^2.0.0"
+    rc-util "^5.19.2"
+
+rc-upload@~4.3.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/rc-upload/-/rc-upload-4.3.4.tgz#83ff7d3867631c37adbfd72ea3d1fd7e97ca84af"
+  integrity sha512-uVbtHFGNjHG/RyAfm9fluXB6pvArAGyAx8z7XzXXyorEgVIWj6mOlriuDm0XowDHYz4ycNK0nE0oP3cbFnzxiQ==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    classnames "^2.2.5"
+    rc-util "^5.2.0"
+
+rc-util@^5.0.1, rc-util@^5.0.6, rc-util@^5.15.0, rc-util@^5.16.0, rc-util@^5.16.1, rc-util@^5.17.0, rc-util@^5.18.1, rc-util@^5.19.2, rc-util@^5.2.0, rc-util@^5.2.1, rc-util@^5.20.1, rc-util@^5.21.0, rc-util@^5.21.2, rc-util@^5.22.5, rc-util@^5.23.0, rc-util@^5.24.4, rc-util@^5.26.0, rc-util@^5.27.0, rc-util@^5.4.0, rc-util@^5.6.1, rc-util@^5.8.0, rc-util@^5.9.4:
+  version "5.29.2"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.29.2.tgz#a3741fca57b3dce78f315574ed099945f367b222"
+  integrity sha512-xHT9Dr3RD6tyvCibnH10l3mudC6TJjWNr9UDy3CrOGZqTY354OfdwP87ahKNe0b3A1dsysDldvx0SBuswhlOeA==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    react-is "^16.12.0"
+
+rc-virtual-list@^3.2.0, rc-virtual-list@^3.4.8:
+  version "3.4.13"
+  resolved "https://registry.yarnpkg.com/rc-virtual-list/-/rc-virtual-list-3.4.13.tgz#20acc934b263abcf7b7c161f50ef82281b2f7e8d"
+  integrity sha512-cPOVDmcNM7rH6ANotanMDilW/55XnFPw0Jh/GQYtrzZSy3AmWvCnqVNyNC/pgg3lfVmX2994dlzAhuUrd4jG7w==
+  dependencies:
+    "@babel/runtime" "^7.20.0"
+    classnames "^2.2.6"
+    rc-resize-observer "^1.0.0"
+    rc-util "^5.15.0"
+
 rc@^1.0.1, rc@^1.1.6:
   version "1.2.8"
   resolved "https://registry.npmmirror.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@@ -10601,7 +11141,7 @@ react-error-overlay@^4.0.1:
   resolved "https://registry.npmmirror.com/react-error-overlay/-/react-error-overlay-4.0.1.tgz#417addb0814a90f3a7082eacba7cee588d00da89"
   integrity sha512-xXUbDAZkU08aAkjtUvldqbvI04ogv+a1XdHxvYuHPYKIVk/42BIOD0zSKTHAWV4+gDy3yGm283z2072rA2gdtw==
 
-react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.6:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -11056,6 +11596,11 @@ reselect@^3.0.1:
   resolved "https://registry.npmmirror.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
   integrity sha512-b/6tFZCmRhtBMa4xGqiiRp9jh9Aqi2A687Lo265cN0/QohJQEBPiQ52f4QB6i0eF3yp3hmLL21LSGBcML2dlxA==
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmmirror.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -11332,6 +11877,13 @@ schema-utils@^2.6.1, schema-utils@^2.6.5:
     ajv "^6.12.4"
     ajv-keywords "^3.5.2"
 
+scroll-into-view-if-needed@^2.2.25:
+  version "2.2.31"
+  resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz#d3c482959dc483e37962d1521254e3295d0d1587"
+  integrity sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==
+  dependencies:
+    compute-scroll-into-view "^1.0.20"
+
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.npmmirror.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -11869,6 +12421,11 @@ strict-uri-encode@^1.0.0:
   resolved "https://registry.npmmirror.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
   integrity sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ==
 
+string-convert@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
+  integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==
+
 string-length@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmmirror.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
@@ -12350,6 +12907,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
+
 toidentifier@1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"