地图

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

@@ -0,0 +1,186 @@
+import * as echarts from "echarts";
+
+export const initEcharts1 = (main1Ref, chartInstance, data) => {
+  chartInstance.current = echarts.init(main1Ref.current);
+
+  const option = {
+    color: ["#F1C416", "#0AFCFF"],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+        label: {
+          backgroundColor: "#6a7985",
+        },
+      },
+    },
+    grid: {
+      left: "1%",
+      right: "4%",
+      bottom: "6%",
+      top: 30,
+      padding: "0 0 10 0",
+      containLabel: true,
+    },
+    legend: {
+      right: 10,
+      top: 0,
+      itemGap: 16,
+      itemWidth: 18,
+      itemHeight: 10,
+      textStyle: {
+        color: "#fff",
+        fontStyle: "normal",
+        fontFamily: "微软雅黑",
+        fontSize: 12,
+      },
+    },
+    dataZoom: [
+      {
+        type: "slider",
+        height: 6,
+        bottom: 0,
+        show: true,
+        start: 0,
+        end: 50,
+        handleSize: 3,
+        handleStyle: {
+          color: "#DCE2E8",
+        },
+        xAxisIndex: [0],
+        filterMode: "filter",
+        showDetail: false,
+      },
+    ],
+    xAxis: [
+      {
+        type: "category",
+        boundaryGap: true,
+        data: data.map(item => item.name),
+        axisLabel: {
+          interval: 0,
+          margin: 15,
+          textStyle: {
+            color: "#fff",
+            fontStyle: "normal",
+            fontFamily: "微软雅黑",
+            fontSize: 12,
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#fff",
+            opacity: 0.2,
+          },
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        splitNumber: 5,
+        axisLabel: {
+          textStyle: {
+            color: "#fff",
+            fontStyle: "normal",
+            fontFamily: "微软雅黑",
+            fontSize: 12,
+          },
+        },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: ["#fff"],
+            opacity: 0.06,
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: "单位人员数",
+        type: "pictorialBar",
+        symbol: "roundRect",
+        symbolOffset: [-5, 0],
+        symbolMargin: "1",
+        barWidth: "10%",
+        barMaxWidth: "20%",
+        animationDelay: (dataIndex, params) => {
+          return params.index * 50;
+        },
+        itemStyle: {
+          normal: {
+            color: (params) => {
+              return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+                {
+                  offset: 0,
+                  color: "#F1C416",
+                },
+                {
+                  offset: 1,
+                  color: "#FF2F01",
+                },
+              ]);
+            },
+          },
+        },
+        z: 1,
+        barGap: 0,
+        symbolRepeat: true,
+        symbolSize: [14, 5],
+        data: data.map(item => item.unitCount),
+        animationEasing: "elasticOut",
+        stack: "2",
+      },
+      {
+        name: "相关方人员数",
+        type: "pictorialBar",
+        symbol: "roundRect",
+        barWidth: "10%",
+        symbolOffset: [5, 0],
+        barMaxWidth: "20%",
+        symbolMargin: "1",
+        animationDelay: (dataIndex, params) => {
+          return params.index * 50;
+        },
+        itemStyle: {
+          normal: {
+            color: (params) => {
+              return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+                {
+                  offset: 0,
+                  color: "#0AFCFF",
+                },
+                {
+                  offset: 1,
+                  color: "#0CA1FE",
+                },
+              ]);
+            },
+          },
+        },
+        z: 1,
+        barGap: 0,
+        symbolRepeat: true,
+        symbolSize: [14, 5],
+        data: data.map(item => item.personnelCount),
+        animationEasing: "elasticOut",
+        stack: "1",
+      },
+    ],
+  };
+
+  chartInstance.current.setOption(option);
+};

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

@@ -1,6 +1,157 @@
+import { useMount } from "ahooks";
+import { useRef, useState } from "react";
+import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
+import bg4 from "~/assets/images/map_bi/content/bg4.png";
+import bg5 from "~/assets/images/map_bi/content/bg5.png";
+import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
+import { initEcharts1 } from "./echarts";
+import "./index.less";
+
 function IndexRight() {
+  const [block1List, setBlock1List] = useState([
+    { title: "口门进出统计", label1: "人数", label2: "车数", count1: 123, count2: 123, bgImg: bg4 },
+    { title: "进入申请待审批", label1: "人数", label2: "车数", count1: 123, count2: 123, bgImg: bg4 },
+    { title: "封闭区域人员情况", label1: "区域数", label2: "人数", count1: 123, count2: 123, bgImg: bg5 },
+    { title: "封闭区域作业情况", label1: "区域数", label2: "作业数", count1: 123, count2: 123, bgImg: bg5 },
+  ]);
+  const [block3List, setBlock3List] = useState([
+    { name: "A区", requiredDevices: "入侵检测", anchoredDevices: "2024-01-01 10:00:00", status: "1" },
+    { name: "B区", requiredDevices: "烟雾报警", anchoredDevices: "2024-01-01 10:05:00", status: "2" },
+    { name: "C区", requiredDevices: "温度异常", anchoredDevices: "2024-01-01 10:10:00", status: "1" },
+    { name: "D区", requiredDevices: "门禁异常", anchoredDevices: "2024-01-01 10:15:00", status: "2" },
+    { name: "E区", requiredDevices: "视频遮挡", anchoredDevices: "2024-01-01 10:20:00", status: "1" },
+    { name: "F区", requiredDevices: "入侵检测", anchoredDevices: "2024-01-01 10:25:00", status: "2" },
+    { name: "G区", requiredDevices: "紧急按钮", anchoredDevices: "2024-01-01 10:30:00", status: "1" },
+    { name: "H区", requiredDevices: "烟雾报警", anchoredDevices: "2024-01-01 10:35:00", status: "2" },
+    { name: "I区", requiredDevices: "温度异常", anchoredDevices: "2024-01-01 10:40:00", status: "1" },
+    { name: "J区", requiredDevices: "门禁异常", anchoredDevices: "2024-01-01 10:45:00", status: "2" },
+  ]);
+  const [block4List, setBlock4List] = useState([
+    { department: "技术部", threeOrMoreWork: 12, dangerousWork: 8, newWork: 5 },
+    { department: "生产部", threeOrMoreWork: 15, dangerousWork: 10, newWork: 3 },
+    { department: "安全部", threeOrMoreWork: 5, dangerousWork: 12, newWork: 2 },
+    { department: "质检部", threeOrMoreWork: 8, dangerousWork: 6, newWork: 4 },
+    { department: "设备部", threeOrMoreWork: 10, dangerousWork: 15, newWork: 7 },
+    { department: "维修部", threeOrMoreWork: 18, dangerousWork: 9, newWork: 6 },
+    { department: "仓储部", threeOrMoreWork: 7, dangerousWork: 5, newWork: 3 },
+    { department: "物流部", threeOrMoreWork: 9, dangerousWork: 4, newWork: 2 },
+    { department: "人事部", threeOrMoreWork: 3, dangerousWork: 2, newWork: 1 },
+    { department: "财务部", threeOrMoreWork: 2, dangerousWork: 1, newWork: 0 },
+  ]);
+
+  const chartInstance = useRef(null);
+  const main1Ref = useRef(null);
+
+  useMount(() => {
+    initEcharts1(main1Ref, chartInstance, [
+      { name: "技术部1", unitCount: 95, personnelCount: 92 },
+      { name: "技术部2", unitCount: 95, personnelCount: 92 },
+      { name: "技术部3", unitCount: 95, personnelCount: 92 },
+      { name: "技术部4", unitCount: 95, personnelCount: 92 },
+      { name: "技术部5", unitCount: 95, personnelCount: 92 },
+      { name: "技术部6", unitCount: 95, personnelCount: 92 },
+      { name: "技术部7", unitCount: 95, personnelCount: 92 },
+      { name: "技术部8", unitCount: 95, personnelCount: 92 },
+      { name: "技术部9", unitCount: 95, personnelCount: 92 },
+      { name: "技术部0", unitCount: 95, personnelCount: 92 },
+    ]);
+
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.dispose();
+        chartInstance.current = null;
+      }
+    };
+  });
+
   return (
-    <div className="branch_office_index_right"></div>
+    <div className="branch_office_index_right">
+      <div className="block1">
+        <Title title="口门及封闭区域" />
+        <div className="options">
+          <div className="items">
+            {
+              block1List.map((item, index) => (
+                <div className="item" key={index} style={{ backgroundImage: `url(${item.bgImg})` }}>
+                  <div className="title">{item.title}</div>
+                  <div className="info">
+                    <div>
+                      {item.label1}
+                      ：
+                      {item.count1}
+                    </div>
+                    <div>
+                      {item.label2}
+                      ：
+                      {item.count2}
+                    </div>
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </div>
+      <div className="block2">
+        <Title title="封闭区域人员状态" />
+        <div className="options">
+          <div ref={main1Ref} className="main1_node" style={{ width: "100%", height: "200px" }} />
+        </div>
+      </div>
+      <div className="block3">
+        <Title title="区域告警" />
+        <div className="options">
+          <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.name}</div>
+                    <div className="td">{item.requiredDevices}</div>
+                    <div className="td">{item.anchoredDevices}</div>
+                    <div className="td" style={{ color: item.status === "1" ? "#f18308" : "#60b321" }}>
+                      {item.status === "1" && "待处置"}
+                      {item.status === "2" && "已处置"}
+                    </div>
+                  </div>
+                ))}
+              </SeamlessScroll>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="block4">
+        <Title title="重点作业情况统计" />
+        <div className="options">
+          <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={block4List} step={0.5}>
+                {block4List.map((item, index) => (
+                  <div key={index} className="tr">
+                    <div className="td">{item.department}</div>
+                    <div className="td">{item.threeOrMoreWork}</div>
+                    <div className="td">{item.dangerousWork}</div>
+                    <div className="td">{item.newWork}</div>
+                  </div>
+                ))}
+              </SeamlessScroll>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   );
 }
 

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

@@ -0,0 +1,129 @@
+.branch_office_index_right {
+  .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 {
+        color: #fff;
+        font-size: 12px;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        gap: 10px 20px;
+
+        .item {
+          width: calc(50% - 10px);
+          padding: 5px 20px;
+
+          .title {
+            font-weight: bold;
+            text-align: center;
+          }
+
+          .info {
+            margin-top: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          }
+        }
+      }
+    }
+  }
+
+  .block2 {
+    background-color: rgba(12, 28, 88, 0.4);
+    margin-top: 10px;
+
+    .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-color: rgba(12, 28, 88, 0.4);
+    margin-top: 10px;
+
+    .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;
+
+      .table {
+        margin-top: 5px;
+
+        .scroll {
+          height: 165px;
+          overflow-y: hidden;
+        }
+
+        .tr {
+          margin-top: 5px;
+          display: grid;
+          grid-template-columns: 1.5fr 1fr 2fr 1fr;
+          background-color: rgba(17, 51, 112, 0.8);
+
+          .td {
+            text-align: center;
+            font-size: 12px;
+            color: #fff;
+            padding: 5px;
+          }
+        }
+      }
+    }
+  }
+
+  .block4 {
+    background-color: rgba(12, 28, 88, 0.4);
+    margin-top: 10px;
+
+    .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;
+
+      .table {
+        margin-top: 5px;
+
+        .scroll {
+          height: 165px;
+          overflow-y: hidden;
+        }
+
+        .tr {
+          margin-top: 5px;
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr 1fr;
+          background-color: rgba(17, 51, 112, 0.8);
+
+          .td {
+            text-align: center;
+            font-size: 12px;
+            color: #fff;
+            padding: 5px;
+          }
+        }
+      }
+    }
+  }
+}