地图

src/pages/Container/Map/components/Content/branchOffice/MenJin/echarts.js

@@ -0,0 +1,132 @@
+import * as echarts from "echarts";
+
+export const initEcharts1 = (main1Ref, chartInstance, data) => {
+  chartInstance.current = echarts.init(main1Ref.current);
+
+  const inData = data.map(item => Number.parseInt(item.IN));
+  const outData = data.map(item => Number.parseInt(item.OUT));
+  const names = data.map(item => item.NAME);
+
+  const option = {
+    color: ["#1A64F8"],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "none",
+      },
+    },
+    legend: {
+      data: ["进", "出"],
+      top: "0%",
+      right: "0%",
+      textStyle: {
+        color: "#fff",
+        fontSize: 14,
+      },
+      itemWidth: 12,
+      itemHeight: 10,
+    },
+    dataZoom: [
+      {
+        type: "slider",
+        height: 6,
+        bottom: "7%",
+        show: true,
+        start: 0,
+        end: 50,
+        handleSize: 5,
+        handleStyle: {
+          color: "#DCE2E8",
+        },
+        xAxisIndex: [0],
+        filterMode: "filter",
+        showDetail: false,
+      },
+    ],
+    grid: {
+      left: "10%",
+      right: "5%",
+      top: "10%",
+      bottom: "20%",
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: names,
+        axisTick: {
+          alignWithLabel: true,
+        },
+        axisLabel: {
+          color: "#fff",
+        },
+      },
+    ],
+    yAxis: {
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dashed",
+        },
+      },
+    },
+    series: [
+      {
+        name: "进",
+        type: "bar",
+        backgroundStyle: {
+          color: "rgba(216, 229, 247, 0.55)",
+          borderRadius: [8, 8, 0, 0],
+        },
+        itemStyle: {
+          borderRadius: [12, 12, 0, 0],
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 1,
+              color: "rgba(121,103,255,0.7)",
+            },
+            {
+              offset: 0,
+              color: "#7967FF",
+            },
+          ]),
+        },
+        barWidth: "10",
+        data: inData,
+      },
+      {
+        name: "出",
+        type: "bar",
+        backgroundStyle: {
+          color: "rgba(216, 229, 247, 0.55)",
+          borderRadius: [8, 8, 0, 0],
+        },
+        itemStyle: {
+          borderRadius: [12, 12, 0, 0],
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 1,
+              color: "rgba(255,198,124,0.7)",
+            },
+            {
+              offset: 0,
+              color: "#FFC67C",
+            },
+          ]),
+        },
+        barWidth: "10",
+        data: outData,
+      },
+    ],
+  };
+
+  chartInstance.current.setOption(option);
+};

src/pages/Container/Map/components/Content/branchOffice/MenJin/index.js

@@ -0,0 +1,174 @@
+import { useMount } from "ahooks";
+import { useRef, useState } from "react";
+import CountUp from "react-countup";
+import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
+import icon1 from "~/assets/images/map_bi/content/ico15.png";
+import icon2 from "~/assets/images/map_bi/content/ico16.png";
+import icon3 from "~/assets/images/map_bi/content/ico17.png";
+import icon4 from "~/assets/images/map_bi/content/ico18.png";
+import icon5 from "~/assets/images/map_bi/content/icon32.png";
+import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
+import { initEcharts1 } from "./echarts";
+import "./index.less";
+
+const block2OptionsNavList = ["人员", "车辆"];
+const block3OptionsNavList = ["人员", "车辆"];
+function MenJin() {
+  const [block1List, setBlock1List] = useState([
+    { label: "封闭区域数", count: 123, icon: icon1 },
+    { label: "车行通道数", count: 123, icon: icon2 },
+    { label: "人行通道数", count: 123, icon: icon3 },
+    { label: "封闭区域当前人数", count: 123, icon: icon4 },
+  ]);
+  const [block2Index, setBlock2Index] = useState(0);
+  const [block3Index, setBlock3Index] = useState(0);
+  const [block3List, setBlock3List] = useState([
+    { permissionRange: "A区", status: "1", applicant: "张三", approver: "李主管" },
+    { permissionRange: "B区", status: "1", applicant: "李四", approver: "王经理" },
+    { permissionRange: "C区", status: "1", applicant: "王五", approver: "赵主任" },
+    { permissionRange: "D区", status: "0", applicant: "赵六", approver: "钱总监" },
+    { permissionRange: "E区", status: "0", applicant: "钱七", approver: "孙部长" },
+    { permissionRange: "F区", status: "0", applicant: "孙八", approver: "周经理" },
+    { permissionRange: "G区", status: "0", applicant: "周九", approver: "吴主任" },
+    { permissionRange: "H区", status: "1", applicant: "吴十", approver: "郑主管" },
+    { permissionRange: "I区", status: "0", applicant: "郑一", approver: "王总监" },
+    { permissionRange: "J区", status: "1", applicant: "王二", approver: "张部长" },
+  ]);
+
+  const chartInstance = useRef(null);
+  const main1Ref = useRef(null);
+
+  useMount(() => {
+    initEcharts1(main1Ref, chartInstance, [
+      { NAME: "零号门", IN: "0", OUT: "0" },
+      { NAME: "一号门", IN: "15", OUT: "12" },
+      { NAME: "二号门", IN: "8", OUT: "10" },
+      { NAME: "三号门", IN: "22", OUT: "18" },
+      { NAME: "四号门", IN: "5", OUT: "7" },
+      { NAME: "五号门", IN: "30", OUT: "25" },
+      { NAME: "六号门", IN: "12", OUT: "14" },
+      { NAME: "七号门", IN: "18", OUT: "16" },
+      { NAME: "八号门", IN: "9", OUT: "11" },
+      { NAME: "九号门", IN: "25", OUT: "20" },
+    ]);
+
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.dispose();
+        chartInstance.current = null;
+      }
+    };
+  });
+
+  const block2OptionsClick = (index) => {
+    if (index === block2Index)
+      return;
+    setBlock2Index(index);
+  };
+
+  const block3OptionsClick = (index) => {
+    if (index === block3Index)
+      return;
+    setBlock3Index(index);
+  };
+
+  return (
+    <div className="branch_office_menjin">
+      <div className="block1">
+        <Title title="封闭区域统计" />
+        <div className="options">
+          <div className="items">
+            {
+              block1List.map((item, index) => (
+                <div className="item" key={index}>
+                  <div className="img">
+                    <img src={item.icon} alt="" />
+                  </div>
+                  <div className="info">
+                    <div className="label">{item.label}</div>
+                    <div className="count">
+                      <CountUp end={+item.count}></CountUp>
+                    </div>
+                  </div>
+                  <div className="corner-img top-left-img">
+                    <img src={icon5} alt="" />
+                  </div>
+                  <div className="corner-img top-right-img">
+                    <img src={icon5} alt="" />
+                  </div>
+                  <div className="corner-img bottom-left-img">
+                    <img src={icon5} alt="" />
+                  </div>
+                  <div className="corner-img bottom-right-img">
+                    <img src={icon5} alt="" />
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </div>
+      <div className="block2">
+        <Title
+          title="封闭区域进出情况统计"
+          extra={(
+            <div className="tabs">
+              {block2OptionsNavList.map((item, index) => (
+                <div
+                  key={index}
+                  className={`tab ${index === block2Index ? "active" : ""}`}
+                  onClick={() => block2OptionsClick(index)}
+                >
+                  {item}
+                </div>
+              ))}
+            </div>
+          )}
+        />
+        <div className="options">
+          <div ref={main1Ref} className="main1_node" style={{ width: "100%", height: "300px" }} />
+        </div>
+      </div>
+      <div className="block3">
+        <Title
+          title="口门申请记录"
+          extra={(
+            <div className="tabs">
+              {block3OptionsNavList.map((item, index) => (
+                <div
+                  key={index}
+                  className={`tab ${index === block3Index ? "active" : ""}`}
+                  onClick={() => block3OptionsClick(index)}
+                >
+                  {item}
+                </div>
+              ))}
+            </div>
+          )}
+        />
+        <div className="table">
+          <div className="tr">
+            <div className="td">权限范围</div>
+            <div className="td">申请类型</div>
+            <div className="td">申请人</div>
+            <div className="td">审批人</div>
+          </div>
+          <div className="scroll">
+            <SeamlessScroll list={block3List} step={0.5}>
+              {block3List.map((item, index) => (
+                <div key={index} className="tr">
+                  <div className="td">{item.permissionRange}</div>
+                  <div className="td" style={{ color: item.status === "1" ? "#FC6B13" : "#fff" }}>{item.status === "1" ? "临时" : "长期"}</div>
+                  <div className="td">{item.applicant}</div>
+                  <div className="td">{item.approver}</div>
+                </div>
+              ))}
+            </SeamlessScroll>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default MenJin;

src/pages/Container/Map/components/Content/branchOffice/MenJin/index.less

@@ -0,0 +1,168 @@
+.branch_office_menjin {
+  .tabs-style() {
+    display: flex;
+
+    .tab {
+      background-color: rgba(36, 115, 239, 0.27);
+      padding: 2px 12px;
+      border-radius: 2px;
+      color: #fff;
+      font-size: 12px;
+      border: 1px solid #5d718c;
+      cursor: pointer;
+
+      &.active {
+        background-color: #2473ef;
+        border: 1px solid #2473ef;
+      }
+    }
+  }
+
+  .block1 {
+    background-color: rgba(12, 28, 88, 0.4);
+
+    .options {
+      padding: 10px 15px;
+      border: 1px solid;
+      border-image: linear-gradient(to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)) 1;
+      border-top: none;
+
+      .items {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        gap: 10px 20px;
+
+        .item {
+          position: relative;
+          width: calc(50% - 10px);
+          display: flex;
+          align-items: center;
+          color: #fff;
+          padding: 9px 0 9px 9px;
+          background-color: rgba(1, 56, 154, 0.26);
+          border: 1px solid #2091F3;
+
+          .img {
+            background-color: #102561;
+            border: 1px solid #19455B;
+            border-radius: 4px;
+            padding: 8px;
+            margin-right: 10px;
+
+            img {
+              width: 35px;
+              height: 30px;
+            }
+          }
+
+          .info {
+            .label {
+              font-weight: bold;
+            }
+
+            .count {
+            }
+          }
+
+          .corner-img {
+            position: absolute;
+            width: 12px;
+            height: 12px;
+
+            &.top-left-img {
+              top: -10px;
+              left: -3px;
+            }
+
+            &.top-right-img {
+              transform: rotate(90deg);
+              top: -3px;
+              right: -10px;
+            }
+
+            &.bottom-left-img {
+              transform: rotate(270deg);
+              bottom: -3px;
+              left: -10px;
+            }
+
+            &.bottom-right-img {
+              transform: rotate(180deg);
+              bottom: -10px;
+              right: -3px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .block2 {
+    background-color: rgba(12, 28, 88, 0.4);
+    margin-top: 10px;
+
+    .tabs {
+      .tabs-style();
+    }
+
+    .options {
+      padding: 10px 15px;
+      border: 1px solid;
+      border-image: linear-gradient(to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)) 1;
+      border-top: none;
+    }
+  }
+
+  .block3 {
+    background-image: linear-gradient(to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8));
+    margin-top: 10px;
+
+    .tabs {
+      .tabs-style();
+    }
+
+    .table {
+      padding: 10px;
+
+      .scroll {
+        height: 300px;
+        overflow-y: hidden;
+
+        .tr {
+          &:nth-child(odd) {
+            background-color: transparent;
+          }
+        }
+      }
+
+      .tr {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        background-color: rgba(42, 86, 158, 0.53);
+
+        .td {
+          text-align: center;
+          font-size: 12px;
+          color: #fff;
+          padding: 5px;
+
+          &.green {
+            color: #7ccf41;
+          }
+
+          &.yellow {
+            color: #ffcb05;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/Container/Map/components/Content/branchOffice/Title/index.js

@@ -7,6 +7,7 @@ function Title(props) {
       <div className="basic">
         <div className="label">{props.title}</div>
       </div>
+      <div className="extra">{props.extra}</div>
     </div>
   );
 }

src/pages/Container/Map/components/Content/branchOffice/Title/index.less

@@ -18,4 +18,8 @@
       padding-left: 25px;
     }
   }
+
+  .extra {
+    margin-right: 5px;
+  }
 }

src/pages/Container/Map/components/Content/index.js

@@ -7,6 +7,7 @@ import { branchOfficeUtilsList } from "~/pages/Container/Map/components/BottomUt
 import { portUtilsList } from "~/pages/Container/Map/components/BottomUtils/portUtilsList";
 import BranchOfficeIndexLeft from "~/pages/Container/Map/components/Content/branchOffice/IndexLeft";
 import BranchOfficeIndexRight from "~/pages/Container/Map/components/Content/branchOffice/IndexRight";
+import BranchMenJin from "~/pages/Container/Map/components/Content/branchOffice/MenJin";
 import BranchWeiXian from "~/pages/Container/Map/components/Content/branchOffice/WeiXian";
 import IndexInfo from "~/pages/Container/Map/components/Content/IndexInfo";
 import PortFengBi from "~/pages/Container/Map/components/Content/port/FengBi";
@@ -52,6 +53,8 @@ function Content() {
       return <BranchOfficeIndexLeft />;
     if (bottomUtilsCurrentType === "danger")
       return <BranchWeiXian />;
+    if (bottomUtilsCurrentType === "door")
+      return <BranchMenJin />;
   };
 
   const renderBranchOfficeContentRight = () => {

src/pages/Container/Map/components/popup/components/BranchOffice.js

@@ -4,7 +4,7 @@ import "./index.less";
 
 const BranchOffice = ({ info, close, enter }) => {
   return (
-    <div className="box">
+    <div className="map_content_box">
       <div className="box-wrap">
         <div className="area">
           <div></div>

src/pages/Container/Map/components/popup/components/Port.js

@@ -4,7 +4,7 @@ import "./index.less";
 
 const Port = ({ info, close, enter }) => {
   return (
-    <div className="box">
+    <div className="map_content_box">
       <div className="box-wrap">
         <div className="area">
           <div></div>

src/pages/Container/Map/components/popup/components/index.less

@@ -1,4 +1,4 @@
-.box {
+.map_content_box {
   width: 300px;
   position: relative;
   bottom: 0;
@@ -13,7 +13,7 @@
     border: 1px solid #42698f;
     background-color: rgb(35 53 93 / 74%);
     box-shadow: 0 0 10px 2px #000000;
-    animation: slide-in-elliptic-bottom-fwd 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+    animation: map_content_box-slide-in-elliptic-bottom-fwd 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
 
     .area {
       padding: 5px 10px;
@@ -95,7 +95,7 @@
   }
 }
 
-@keyframes slide-in-elliptic-bottom-fwd {
+@keyframes map_content_box-slide-in-elliptic-bottom-fwd {
   0% {
     transform: translateY(300px) rotate(10deg) scale(0.3);
     transform-origin: 50% 100%;