地图

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

@@ -1,8 +1,8 @@
 import { useMount } from "ahooks";
 import { useEffect, useRef, useState } from "react";
 import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
-import temperature from "~/assets/images/public/bigScreen/img10.png";
+import icon1 from "~/assets/images/public/bigScreen/img10.png";
-import windSpeed from "~/assets/images/public/bigScreen/img11.png";
+import icon2 from "~/assets/images/public/bigScreen/img11.png";
 import SunIcon from "~/assets/images/public/weather/1.png";
 import CloudIcon from "~/assets/images/public/weather/2.png";
 import CloudSunIcon from "~/assets/images/public/weather/3.png";
@@ -23,7 +23,7 @@ import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
 import { initEcharts1 } from "./echarts";
 import "./index.less";
 
-const weatherIconMap = {
+export const weatherIconMap = {
   晴天: SunIcon,
   晴: SunIcon,
   多云: CloudSunIcon,
@@ -44,6 +44,18 @@ const weatherIconMap = {
   默认: SunIcon,
 };
 
+export const getWeatherIcon = (weatherName) => {
+  for (const [key, icon] of Object.entries(weatherIconMap)) {
+    if (weatherName.includes(key))
+      return icon;
+  }
+  return weatherIconMap["默认"];
+};
+
+export const getAlertColor = (level) => {
+  return { 蓝色预警: "#1E90FF", 黄色预警: "#FFA500", 橙色预警: "#FF4500", 红色预警: "#FF0000" }[level] || "#fff";
+};
+
 function IndexLeft() {
   const [weatherData, setWeatherData] = useState({
     text: "晴天",
@@ -99,18 +111,6 @@ function IndexLeft() {
     }
   };
 
-  const getWeatherIcon = (weatherName) => {
-    for (const [key, icon] of Object.entries(weatherIconMap)) {
-      if (weatherName.includes(key))
-        return icon;
-    }
-    return weatherIconMap["默认"];
-  };
-
-  const getAlertColor = (level) => {
-    return { 蓝色预警: "#1E90FF", 黄色预警: "#FFA500", 橙色预警: "#FF4500", 红色预警: "#FF0000" }[level] || "#fff";
-  };
-
   const getLevelColor = (level) => {
     return { 重大风险: "#FF0000", 较大风险: "#FF3C00", 一般风险: "#E5E72F", 低风险: "#0E7DFA" }[level];
   };
@@ -156,7 +156,7 @@ function IndexLeft() {
             <div className="items">
               <div className="item">
                 <div className="img">
-                  <img src={temperature} alt="" />
+                  <img src={icon1} alt="" />
                 </div>
                 <div className="info">
                   <div className="label">温度：</div>
@@ -165,7 +165,7 @@ function IndexLeft() {
               </div>
               <div className="item">
                 <div className="img">
-                  <img src={windSpeed} alt="" />
+                  <img src={icon2} alt="" />
                 </div>
                 <div className="info">
                   <div className="label">风速：</div>

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

@@ -98,7 +98,7 @@
           margin-top: 5px;
           display: grid;
           grid-template-columns: repeat(3, 1fr);
-          background-image: linear-gradient(to bottom, #002a55, rgba(1, 37, 74, 0.47), rgba(4, 38, 87, 0));
+          background-image: linear-gradient(to bottom, rgba(0, 42, 85, 0.38), rgba(1, 37, 74, 0.47), rgba(4, 38, 87, 0));
           border: 1px solid;
           border-image: linear-gradient(to top, rgba(8, 41, 87, 0.5), rgba(64, 152, 255, 0.5)) 1;
           border-bottom: none;

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

@@ -0,0 +1,163 @@
+import { useEffect, useState } from "react";
+import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
+import icon1 from "~/assets/images/public/bigScreen/img10.png";
+import icon2 from "~/assets/images/public/bigScreen/img11.png";
+import icon3 from "~/assets/images/public/bigScreen/img11.png";
+import { getAlertColor, getWeatherIcon } from "~/pages/Container/Map/components/Content/branchOffice/IndexLeft";
+import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
+import "./index.less";
+
+function QiXiang() {
+  const [weatherData, setWeatherData] = useState({
+    text: "晴天",
+    temp: "36.5",
+    wind_class: "3级",
+    wind_dir: "西南风",
+    wind_angle: 229,
+    prec_1h: 0,
+  });
+  const [alert, setAlert] = useState([]);
+  const [block1List, setBlock1List] = useState([
+    { department: "技术部", requiredDevices: 150, anchoredDevices: 142 },
+    { department: "销售部", requiredDevices: 80, anchoredDevices: 76 },
+    { department: "市场部", requiredDevices: 60, anchoredDevices: 58 },
+    { department: "运营部", requiredDevices: 120, anchoredDevices: 115 },
+    { department: "客服部", requiredDevices: 90, anchoredDevices: 88 },
+    { department: "财务部", requiredDevices: 30, anchoredDevices: 29 },
+    { department: "人事部", requiredDevices: 25, anchoredDevices: 24 },
+    { department: "研发部", requiredDevices: 200, anchoredDevices: 195 },
+    { department: "质量部", requiredDevices: 45, anchoredDevices: 42 },
+    { department: "采购部", requiredDevices: 35, anchoredDevices: 33 },
+  ]);
+  const [block2List, setBlock2List] = useState([
+    { source: "国家气象局", level: "蓝色", area: "北京市朝阳区" },
+    { source: "地方气象台", level: "黄色", area: "上海市浦东新区" },
+    { source: "中央气象台", level: "橙色", area: "广州市天河区" },
+    { source: "区域气象中心", level: "红色", area: "深圳市南山区" },
+    { source: "国家气象局", level: "蓝色", area: "杭州市西湖区" },
+    { source: "地方气象台", level: "黄色", area: "成都市锦江区" },
+    { source: "中央气象台", level: "橙色", area: "武汉市江汉区" },
+    { source: "区域气象中心", level: "红色", area: "西安市雁塔区" },
+    { source: "国家气象局", level: "蓝色", area: "南京市鼓楼区" },
+    { source: "地方气象台", level: "黄色", area: "重庆市渝中区" },
+  ]);
+
+  const getWeatherData = async () => {
+    try {
+      const response = await fetch("https://api.map.baidu.com/weather/v1/?district_id=130300&data_type=all&ak=dIqOi34IlTg5FkNck1vqoBpLhPAj36S1");
+      const data = await response.json();
+      setWeatherData(data.result.now);
+      setAlert(Array.isArray(data.result.alerts) ? data.result.alerts : []);
+    }
+    catch (error) {
+      console.error("获取天气数据失败:", error);
+    }
+  };
+
+  useEffect(() => {
+    getWeatherData();
+  }, []);
+
+  return (
+    <div className="branch_office_qixiang">
+      <div className="block1">
+        <Title title="天气预防情况" />
+        <div className="options">
+          <div className="weather">
+            <div className="icon">
+              <div className="img">
+                <img src={getWeatherIcon(weatherData.text)} alt="" />
+              </div>
+              <div className="text">{weatherData.text}</div>
+            </div>
+            <div className="items">
+              <div className="item">
+                <div className="img">
+                  <img src={icon1} alt="" />
+                </div>
+                <div className="info">
+                  <div className="label">温度：</div>
+                  <div className="value">{`${weatherData.temp}℃`}</div>
+                </div>
+              </div>
+              <div className="item">
+                <div className="img">
+                  <img src={icon2} alt="" />
+                </div>
+                <div className="info">
+                  <div className="label">风速：</div>
+                  <div className="value">{weatherData.wind_class}</div>
+                </div>
+              </div>
+              <div className="item">
+                <div className="img">
+                  <img src={icon3} alt="" />
+                </div>
+                <div className="info">
+                  <div className="label">降水量：</div>
+                  <div className="value">{`${weatherData.prec_1h}毫米`}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="alert">
+            <div className="scroll">
+              <SeamlessScroll list={alert} step={0.5} limitScrollNum={2} singleHeight={22}>
+                {
+                  alert.map((item, index) => (
+                    <div className="item" key={index}>
+                      <div className="title" style={{ color: getAlertColor(item.level) }}>{item.title}</div>
+                    </div>
+                  ))
+                }
+              </SeamlessScroll>
+            </div>
+          </div>
+          <div className="table">
+            <div className="tr">
+              <div className="td">部门名称</div>
+              <div className="td">需锚定设备数</div>
+              <div className="td">已锚定设备数</div>
+            </div>
+            <div className="scroll">
+              <SeamlessScroll list={block1List} step={0.5}>
+                {block1List.map((item, index) => (
+                  <div key={index} className="tr">
+                    <div className="td">{item.department}</div>
+                    <div className="td">{item.requiredDevices}</div>
+                    <div className="td">{item.anchoredDevices}</div>
+                  </div>
+                ))}
+              </SeamlessScroll>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="block2">
+        <Title title="气象告警信息" />
+        <div className="options">
+          <div className="table">
+            <div className="tr">
+              <div className="td">预警信息来源</div>
+              <div className="td">预警级别</div>
+              <div className="td">影响区域</div>
+            </div>
+            <div className="scroll">
+              <SeamlessScroll list={block2List} step={0.5}>
+                {block2List.map((item, index) => (
+                  <div key={index} className="tr">
+                    <div className="td">{item.source}</div>
+                    <div className="td">{item.level}</div>
+                    <div className="td">{item.area}</div>
+                  </div>
+                ))}
+              </SeamlessScroll>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default QiXiang;

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

@@ -0,0 +1,153 @@
+.branch_office_qixiang{
+  .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;
+
+      .weather {
+        display: flex;
+        gap: 40px;
+
+        .icon {
+          padding: 10px;
+          display: flex;
+          gap: 5px;
+
+          .img {
+            img {
+              width: 40px;
+              height: 40px;
+            }
+          }
+
+          .text {
+            color: #fff;
+            writing-mode: vertical-lr;
+            letter-spacing: 5px;
+          }
+        }
+
+        .items {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          flex-wrap: wrap;
+          gap: 20px 10px;
+
+          .item {
+            width: calc((100% / 2) - 10px);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+
+            .img {
+              img {
+                width: 42px;
+                height: 42px;
+              }
+            }
+
+            .info {
+              .label {
+                font-size: 12px;
+                color: #fff;
+              }
+
+              .value {
+                font-size: 18px;
+                color: #00e7ff;
+                font-weight: bold;
+              }
+            }
+          }
+        }
+      }
+
+      .alert {
+        margin-top: 10px;
+
+        .scroll {
+          height: 20px;
+          overflow-y: hidden;
+
+          .item {
+            .title {
+              font-weight: bold;
+              font-size: 14px;
+            }
+          }
+        }
+      }
+
+      .table {
+        margin-top: 5px;
+
+        .scroll {
+          height: 200px;
+          overflow-y: hidden;
+        }
+
+        .tr {
+          margin-top: 5px;
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          background-image: linear-gradient(to bottom, rgba(0, 42, 85, 0.38), rgba(1, 37, 74, 0.47), rgba(4, 38, 87, 0));
+          border: 1px solid;
+          border-image: linear-gradient(to top, rgba(8, 41, 87, 0.5), rgba(64, 152, 255, 0.5)) 1;
+          border-bottom: none;
+
+          .td {
+            text-align: center;
+            font-size: 12px;
+            color: #fff;
+            padding: 5px;
+          }
+        }
+      }
+    }
+  }
+
+  .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;
+
+      .table {
+        margin-top: 5px;
+
+        .scroll {
+          height: 300px;
+          overflow-y: hidden;
+        }
+
+        .tr {
+          margin-top: 5px;
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          background-color: rgba(17, 51, 112, 0.8);
+
+          .td {
+            text-align: center;
+            font-size: 12px;
+            color: #fff;
+            padding: 5px;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -8,6 +8,7 @@ import { portUtilsList } from "~/pages/Container/Map/components/BottomUtils/port
 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 BranchQiXiang from "~/pages/Container/Map/components/Content/branchOffice/QiXiang";
 import BranchRenYuan from "~/pages/Container/Map/components/Content/branchOffice/RenYuan";
 import BranchWeiXian from "~/pages/Container/Map/components/Content/branchOffice/WeiXian";
 import BranchXiaoFang from "~/pages/Container/Map/components/Content/branchOffice/XiaoFang";
@@ -61,6 +62,8 @@ function Content() {
       return <BranchXiaoFang />;
     if (bottomUtilsCurrentType === "people")
       return <BranchRenYuan />;
+    if (bottomUtilsCurrentType === "weather")
+      return <BranchQiXiang />;
   };
 
   const renderBranchOfficeContentRight = () => {

src/pages/Container/Map/js/pointClickEvent.js

@@ -66,7 +66,7 @@ export default class PointClickEvent {
   #clickPortPointEnter = (data) => {
     this.closePopup();
     this.#mapMethods.removePortPoint();
-    setTimeout(() => {
+    // setTimeout(() => {
     if (data.id === "00003") {
       this.#mapMethods.flyTo({ longitude: data.position.x, latitude: data.position.y, height: 10000 });
       this.#mapMethods.addBranchOfficePoint();
@@ -84,7 +84,7 @@ export default class PointClickEvent {
       mitt.emit(clickBranchOfficePointMittKey, data);
       sessionStorage.setItem("mapCurrentBranchOfficeId", data.corpinfoId);
     }
-    }, 2000);
+    // }, 2000);
     mitt.emit(resetBottomCurrentIndexMittKey);
     mitt.emit(resetAllBottomUtilsCheckMittKey);
   };