From 519f73ffeacb767a44a506dda1f1c2e8735ac014 Mon Sep 17 00:00:00 2001 From: LiuJiaNan <15703339975@163.com> Date: Fri, 9 Jan 2026 14:48:39 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/map_bi/content/ico21.png | Bin 0 -> 3494 bytes .../Content/branchOffice/IndexLeft/index.js | 34 ++-- .../Content/branchOffice/IndexLeft/index.less | 2 +- .../Content/branchOffice/QiXiang/index.js | 163 ++++++++++++++++++ .../Content/branchOffice/QiXiang/index.less | 153 ++++++++++++++++ .../Container/Map/components/Content/index.js | 3 + src/pages/Container/Map/js/pointClickEvent.js | 38 ++-- 7 files changed, 356 insertions(+), 37 deletions(-) create mode 100644 src/assets/images/map_bi/content/ico21.png create mode 100644 src/pages/Container/Map/components/Content/branchOffice/QiXiang/index.js create mode 100644 src/pages/Container/Map/components/Content/branchOffice/QiXiang/index.less diff --git a/src/assets/images/map_bi/content/ico21.png b/src/assets/images/map_bi/content/ico21.png new file mode 100644 index 0000000000000000000000000000000000000000..91e271e0d2118873b7b8a46a734ef5b4925cc15d GIT binary patch literal 3494 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 { + 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() {
- +
温度：
@@ -165,7 +165,7 @@ function IndexLeft() {
- +
风速：
diff --git a/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/index.less b/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/index.less index 9bea5cc..4f60fe2 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/index.less +++ b/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; diff --git a/src/pages/Container/Map/components/Content/branchOffice/QiXiang/index.js b/src/pages/Container/Map/components/Content/branchOffice/QiXiang/index.js new file mode 100644 index 0000000..b99f725 --- /dev/null +++ b/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="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; diff --git a/src/pages/Container/Map/components/Content/branchOffice/QiXiang/index.less b/src/pages/Container/Map/components/Content/branchOffice/QiXiang/index.less new file mode 100644 index 0000000..a7c0545 --- /dev/null +++ b/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; + } + } + } + } + } +} diff --git a/src/pages/Container/Map/components/Content/index.js b/src/pages/Container/Map/components/Content/index.js index 6fe12ec..f110526 100644 --- a/src/pages/Container/Map/components/Content/index.js +++ b/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 = () => { diff --git a/src/pages/Container/Map/js/pointClickEvent.js b/src/pages/Container/Map/js/pointClickEvent.js index cb8c5c8..a37aea5 100644 --- a/src/pages/Container/Map/js/pointClickEvent.js +++ b/src/pages/Container/Map/js/pointClickEvent.js @@ -66,25 +66,25 @@ export default class PointClickEvent { #clickPortPointEnter = (data) => { this.closePopup(); this.#mapMethods.removePortPoint(); - setTimeout(() => { - if (data.id === "00003") { - this.#mapMethods.flyTo({ longitude: data.position.x, latitude: data.position.y, height: 10000 }); - this.#mapMethods.addBranchOfficePoint(); - mitt.emit(clickPortPointMittKey, data); - } - else { - this.#mapMethods.flyTo({ longitude: data.position.x, latitude: data.position.y, height: 2000 }); - this.#mapMethods.addBranchOfficePoint("", { - corpName: data.name, - corpinfoId: data.corpinfoId, - longitude: data.position.x, - latitude: data.position.y, - }); - mitt.emit(clickPortPointMittKey, data); - mitt.emit(clickBranchOfficePointMittKey, data); - sessionStorage.setItem("mapCurrentBranchOfficeId", data.corpinfoId); - } - }, 2000); + // setTimeout(() => { + if (data.id === "00003") { + this.#mapMethods.flyTo({ longitude: data.position.x, latitude: data.position.y, height: 10000 }); + this.#mapMethods.addBranchOfficePoint(); + mitt.emit(clickPortPointMittKey, data); + } + else { + this.#mapMethods.flyTo({ longitude: data.position.x, latitude: data.position.y, height: 2000 }); + this.#mapMethods.addBranchOfficePoint("", { + corpName: data.name, + corpinfoId: data.corpinfoId, + longitude: data.position.x, + latitude: data.position.y, + }); + mitt.emit(clickPortPointMittKey, data); + mitt.emit(clickBranchOfficePointMittKey, data); + sessionStorage.setItem("mapCurrentBranchOfficeId", data.corpinfoId); + } + // }, 2000); mitt.emit(resetBottomCurrentIndexMittKey); mitt.emit(resetAllBottomUtilsCheckMittKey); };