zcloud_gbs
/
zcloud-gbs-bi-react
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

地图

master
LiuJiaNan 2026-01-09 14:48:39 +08:00
parent 1985d615ab
commit 519f73ffea
7 changed files with 356 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/map_bi/content/ico21.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

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

@ -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() {
<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>

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

@ -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;

163
src/pages/Container/Map/components/Content/branchOffice/QiXiang/index.js Normal file
View File

@ -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;

153
src/pages/Container/Map/components/Content/branchOffice/QiXiang/index.less Normal file
View File

@ -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;
}
}
}
}
}
}

3
src/pages/Container/Map/components/Content/index.js
View File

@ -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 = () => {

4
src/pages/Container/Map/js/pointClickEvent.js
View File

@ -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);
};