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 0000000..91e271e Binary files /dev/null and b/src/assets/images/map_bi/content/ico21.png differ diff --git a/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/index.js b/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/index.js index 2d36939..8578154 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/index.js +++ b/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 windSpeed from "~/assets/images/public/bigScreen/img11.png"; +import icon1 from "~/assets/images/public/bigScreen/img10.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() {
- +
温度：
@@ -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); };