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

refactor: 部分修改

master
LiuJiaNan 2026-07-16 14:19:58 +08:00
parent 1328d6767c
commit 565670d59a
8 changed files with 157 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/Container/Map/components/Content/IndexInfo/Bottom/index.js
View File

@ -27,15 +27,15 @@ function BottomScreen() {
</div> </div>
<div className="bottom-container"> <div className="bottom-container">
<div className="left"> <div className="left">
<Title title="分子公司考核情况" /> <Title title="相关方单位备案与项目执行统计" />
<div className="main" style={{ backgroundImage: `url(${img2})` }}> <div className="main" style={{ backgroundImage: `url(${img2})` }}>
<div className="table"> <div className="table">
<div className="head"> <div className="head">
<div>公司名称</div> <div>备案类型</div>
<div>检查任务完成情况</div> <div>主管部门</div>
<div>安全会议召开情况</div> <div>相关方单位备案情况</div>
<div>重要事项传达情况</div> <div>项目执行情况统计</div>
<div>专项任务完成情况</div> <div>人员培训情况统计</div>
</div> </div>
<div className="table-container"> <div className="table-container">
<div className="table-item">新益公司</div> <div className="table-item">新益公司</div>

53
src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/echarts.js
View File

@ -6,7 +6,6 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
const companyNames = data.map(item => item.name); const companyNames = data.map(item => item.name);
const hazardCounts = data.map(item => item.hazardCount); const hazardCounts = data.map(item => item.hazardCount);
const unrectifiedCounts = data.map(item => item.unrectifiedCount); const unrectifiedCounts = data.map(item => item.unrectifiedCount);
const rectificationRates = data.map(item => item.rectificationRate);
const option = { const option = {
tooltip: { tooltip: {
@ -22,7 +21,7 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
bottom: "25%", bottom: "25%",
}, },
legend: { legend: {
data: ["隐患数量", "未整改数量", "整改率"], data: ["已评分", "未评分"],
top: "0%", top: "0%",
right: "3%", right: "3%",
textStyle: { textStyle: {
@ -67,7 +66,6 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
yAxis: [ yAxis: [
{ {
type: "value", type: "value",
name: "数量",
nameTextStyle: { nameTextStyle: {
color: "#FFFFFF", color: "#FFFFFF",
fontSize: 12, fontSize: 12,
@ -91,31 +89,10 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
fontSize: 12, fontSize: 12,
}, },
}, },
{
type: "value",
name: "整改率(%)",
nameTextStyle: {
color: "#FFFFFF",
fontSize: 12,
},
min: 0,
max: 100,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
color: "#FFFFFF",
fontSize: 12,
},
},
], ],
series: [ series: [
{ {
name: "隐患数量", name: "已评分",
type: "bar", type: "bar",
barWidth: 10, barWidth: 10,
yAxisIndex: 0, yAxisIndex: 0,
@ -125,7 +102,7 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
data: hazardCounts, data: hazardCounts,
}, },
{ {
name: "未整改数量", name: "未评分",
type: "bar", type: "bar",
barWidth: 10, barWidth: 10,
yAxisIndex: 0, yAxisIndex: 0,
@ -134,30 +111,6 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => {
}, },
data: unrectifiedCounts, data: unrectifiedCounts,
}, },
{
name: "整改率",
type: "line",
yAxisIndex: 1,
showAllSymbol: true,
symbol: "circle",
symbolSize: 10,
itemStyle: {
color: "#33FFFF",
},
label: {
show: true,
position: "top",
formatter: "{c}%",
color: "#FFFFCC",
fontSize: 12,
},
lineStyle: {
color: "#33FFFF",
shadowBlur: 1,
},
z: 18,
data: rectificationRates,
},
], ],
}; };

57
src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/index.js
View File

@ -1,5 +1,5 @@
import { useMount } from "ahooks"; import { useMount } from "ahooks";
import { useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll"; import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import img9 from "~/assets/images/public/bigScreen/bg9.png"; import img9 from "~/assets/images/public/bigScreen/bg9.png";
import img8 from "~/assets/images/public/bigScreen/bg10.png"; import img8 from "~/assets/images/public/bigScreen/bg10.png";
@ -9,12 +9,13 @@ import img5 from "~/assets/images/public/bigScreen/tablebg1.png";
import img6 from "~/assets/images/public/bigScreen/tablebg2.png"; import img6 from "~/assets/images/public/bigScreen/tablebg2.png";
import img3 from "~/assets/images/public/bigScreen/w_ico1.png"; import img3 from "~/assets/images/public/bigScreen/w_ico1.png";
import img4 from "~/assets/images/public/bigScreen/w_ico2.png"; import img4 from "~/assets/images/public/bigScreen/w_ico2.png";
import img2 from "~/assets/images/public/weather/1.png";
import Title from "~/pages/Container/Map/components/Content/IndexInfo/Title"; import Title from "~/pages/Container/Map/components/Content/IndexInfo/Title";
import { getWeather, getWeatherIcon } from "~/utils/weather";
import { initEcharts1 } from "./echarts"; import { initEcharts1 } from "./echarts";
import "./index.less"; import "./index.less";
function LeftScreen() { function LeftScreen() {
const [weather, setWeather] = useState({});
const [block1List, setBlock1List] = useState([ const [block1List, setBlock1List] = useState([
{ id: 1, companyName: "新益公司", status: 0, preventiveMeasures: "远离大树、电线杆、简易房等..." }, { id: 1, companyName: "新益公司", status: 0, preventiveMeasures: "远离大树、电线杆、简易房等..." },
{ id: 2, companyName: "华泰化工", status: 1, preventiveMeasures: "加固设备、检查管道连接..." }, { id: 2, companyName: "华泰化工", status: 1, preventiveMeasures: "加固设备、检查管道连接..." },
@ -43,18 +44,30 @@ function LeftScreen() {
const chartInstance = useRef(null); const chartInstance = useRef(null);
const main1Ref = useRef(null); const main1Ref = useRef(null);
const loadWeather = async () => {
const result = await getWeather();
setWeather({
...result.now,
alertTitle: result.alerts?.[0]?.title || "当前暂无气象预警",
});
};
useEffect(() => {
loadWeather();
}, []);
useMount(() => { useMount(() => {
initEcharts1(main1Ref, chartInstance, [ initEcharts1(main1Ref, chartInstance, [
{ name: "新益公司", hazardCount: 123, unrectifiedCount: 23, rectificationRate: 81.3 }, { name: "新益公司", hazardCount: 123, unrectifiedCount: 23 },
{ name: "华泰化工", hazardCount: 85, unrectifiedCount: 15, rectificationRate: 82.4 }, { name: "华泰化工", hazardCount: 85, unrectifiedCount: 15 },
{ name: "宏达制造", hazardCount: 67, unrectifiedCount: 12, rectificationRate: 82.1 }, { name: "宏达制造", hazardCount: 67, unrectifiedCount: 12 },
{ name: "金鼎能源", hazardCount: 156, unrectifiedCount: 32, rectificationRate: 79.5 }, { name: "金鼎能源", hazardCount: 156, unrectifiedCount: 32 },
{ name: "瑞丰新材料", hazardCount: 42, unrectifiedCount: 8, rectificationRate: 81.0 }, { name: "瑞丰新材料", hazardCount: 42, unrectifiedCount: 8 },
{ name: "恒通物流", hazardCount: 78, unrectifiedCount: 18, rectificationRate: 76.9 }, { name: "恒通物流", hazardCount: 78, unrectifiedCount: 18 },
{ name: "天成建筑", hazardCount: 93, unrectifiedCount: 23, rectificationRate: 75.3 }, { name: "天成建筑", hazardCount: 93, unrectifiedCount: 23 },
{ name: "绿源环保", hazardCount: 56, unrectifiedCount: 11, rectificationRate: 80.4 }, { name: "绿源环保", hazardCount: 56, unrectifiedCount: 11 },
{ name: "安泰消防", hazardCount: 112, unrectifiedCount: 22, rectificationRate: 80.4 }, { name: "安泰消防", hazardCount: 112, unrectifiedCount: 22 },
{ name: "创新科技", hazardCount: 71, unrectifiedCount: 16, rectificationRate: 77.5 }, { name: "创新科技", hazardCount: 71, unrectifiedCount: 16 },
]); ]);
return () => { return () => {
@ -72,32 +85,30 @@ function LeftScreen() {
<Title title="天气预报情况" /> <Title title="天气预报情况" />
<div className="main"> <div className="main">
<div className="list1"> <div className="list1">
<img src={img2} alt="" className="img1" /> <img src={getWeatherIcon(weather?.text)} alt="" className="img1" />
<div>晴</div> <div>{weather?.text || "暂无数据"}</div>
</div> </div>
<div className="list1"> <div className="list1">
<img src={img3} alt="" className="img" /> <img src={img3} alt="" className="img" />
<div className="info"> <div className="info">
<div>温度：</div> <div>温度：</div>
<div className="temp">28.5°</div> <div className="temp">{weather?.temp ? `${weather?.temp}℃` : "--"}</div>
</div> </div>
</div> </div>
<div className="list1"> <div className="list1">
<img src={img4} alt="" className="img" /> <img src={img4} alt="" className="img" />
<div className="info"> <div className="info">
<div>风速：</div> <div>风速：</div>
<div className="temp">8级</div> <div className="temp">{weather?.wind_class || "--"}</div>
</div> </div>
</div> </div>
</div> </div>
<div className="info"> <div className="info">{weather?.alertTitle || "天气数据加载失败"}</div>
秦皇岛市气象台发布大风橙色预警[工级/严重]
</div>
<div className="table"> <div className="table">
<div className="head" style={{ backgroundImage: `url(${img5})` }}> <div className="head" style={{ backgroundImage: `url(${img5})` }}>
<div>公司名称</div> <div>公司名称</div>
<div>处置状态</div> <div>报警处置状态</div>
<div>预防措施</div> <div>应急报警信息</div>
</div> </div>
<div className="scroll"> <div className="scroll">
<SeamlessScroll list={block1List} step={0.5}> <SeamlessScroll list={block1List} step={0.5}>
@ -172,13 +183,13 @@ function LeftScreen() {
</div> </div>
</div> </div>
<div className="block3"> <div className="block3">
<Title title="领域整改情况统计" /> <Title title="领域工作情况统计" />
<div className="main"> <div className="main">
<div ref={main1Ref} style={{ width: "100%", height: "180px" }} /> <div ref={main1Ref} style={{ width: "100%", height: "180px" }} />
</div> </div>
</div> </div>
<div className="block4"> <div className="block4">
<Title title="当前各公司作业中情况" /> <Title title="当前各公司隐患整改情况" />
<div className="main"> <div className="main">
<div className="table"> <div className="table">
<div className="head" style={{ backgroundImage: `url(${img5})` }}> <div className="head" style={{ backgroundImage: `url(${img5})` }}>

20
src/pages/Container/Map/components/Content/IndexInfo/RightPanel/index.js
View File

@ -6,9 +6,9 @@ import img2 from "~/assets/images/public/bigScreen/ico6.png";
import img3 from "~/assets/images/public/bigScreen/ico7.png"; import img3 from "~/assets/images/public/bigScreen/ico7.png";
import img4 from "~/assets/images/public/bigScreen/ico8.png"; import img4 from "~/assets/images/public/bigScreen/ico8.png";
import img7 from "~/assets/images/public/bigScreen/ico9.png"; import img7 from "~/assets/images/public/bigScreen/ico9.png";
import rightbg from "~/assets/images/public/bigScreen/leftbg.png";
import img5 from "~/assets/images/public/bigScreen/tablebg1.png"; import img5 from "~/assets/images/public/bigScreen/tablebg1.png";
import img6 from "~/assets/images/public/bigScreen/tablebg2.png"; import img6 from "~/assets/images/public/bigScreen/tablebg2.png";
import rightbg from "~/assets/images/public/bigScreen/leftbg.png";
import Title from "~/pages/Container/Map/components/Content/IndexInfo/Title"; import Title from "~/pages/Container/Map/components/Content/IndexInfo/Title";
import "./index.less"; import "./index.less";
@ -42,14 +42,14 @@ function RightScreen() {
<div className="right-container"> <div className="right-container">
<div className="right-container_bg" style={{ backgroundImage: `url(${rightbg})` }}></div> <div className="right-container_bg" style={{ backgroundImage: `url(${rightbg})` }}></div>
<div className="block1"> <div className="block1">
<Title title="相关方申请审批管理" /> <Title title="相关方单位情况统计" />
<div className="main"> <div className="main">
<div className="table"> <div className="table">
<div className="head" style={{ backgroundImage: `url(${img5})` }}> <div className="head" style={{ backgroundImage: `url(${img5})` }}>
<div>单位名称</div> <div>相关方单位名称</div>
<div>待审批项目数</div> <div>资质申请情况</div>
<div>待提交培训人员数</div> <div>项目执行情况</div>
<div>待培训人数</div> <div>执行人员情况</div>
</div> </div>
<div className="scroll"> <div className="scroll">
<SeamlessScroll list={block1List} step={0.5}> <SeamlessScroll list={block1List} step={0.5}>
@ -67,7 +67,7 @@ function RightScreen() {
</div> </div>
</div> </div>
<div className="block2"> <div className="block2">
<Title title="当前重点作业统计" /> <Title title="重点作业管理统计" />
<div className="main"> <div className="main">
<div className="item"> <div className="item">
<div className="img"> <div className="img">
@ -157,9 +157,9 @@ function RightScreen() {
<div className="main"> <div className="main">
<div className="table"> <div className="table">
<div className="head" style={{ backgroundImage: `url(${img5})` }}> <div className="head" style={{ backgroundImage: `url(${img5})` }}>
<div>公司名称</div> <div>设备类型</div>
<div>检测系统</div> <div>所属单位</div>
<div>报警原因</div> <div>报警类型</div>
<div>处置状态</div> <div>处置状态</div>
</div> </div>
<div className="scroll"> <div className="scroll">

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

@ -3,67 +3,13 @@ import { useEffect, useRef, useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll"; import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import icon1 from "~/assets/images/public/bigScreen/img10.png"; import icon1 from "~/assets/images/public/bigScreen/img10.png";
import icon2 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";
import ThunderstormIcon from "~/assets/images/public/weather/4.png";
import MildRainIcon from "~/assets/images/public/weather/5.png";
import ModerateRainIcon from "~/assets/images/public/weather/6.png";
import HeavyRainIcon from "~/assets/images/public/weather/7.png";
import StormRainIcon from "~/assets/images/public/weather/8.png";
import SnowIcon from "~/assets/images/public/weather/9.png";
import ModerateSnowIcon from "~/assets/images/public/weather/10.png";
import HeavySnowIcon from "~/assets/images/public/weather/11.png";
import SnowRainIcon from "~/assets/images/public/weather/12.png";
import FogIcon from "~/assets/images/public/weather/13.png";
import HazeIcon from "~/assets/images/public/weather/14.png";
import DustIcon from "~/assets/images/public/weather/15.png";
import DuststormIcon from "~/assets/images/public/weather/16.png";
import Title from "~/pages/Container/Map/components/Content/branchOffice/Title"; import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
import { getAlertColor, getWeather, getWeatherIcon } from "~/utils/weather";
import { initEcharts1 } from "./echarts"; import { initEcharts1 } from "./echarts";
import "./index.less"; import "./index.less";
export const weatherIconMap = {
晴天: SunIcon,
晴: SunIcon,
多云: CloudSunIcon,
阴: CloudIcon,
雷阵雨: ThunderstormIcon,
小雨: MildRainIcon,
中雨: ModerateRainIcon,
大雨: HeavyRainIcon,
暴雨: StormRainIcon,
小雪: SnowIcon,
中雪: ModerateSnowIcon,
大雪: HeavySnowIcon,
雨夹雪: SnowRainIcon,
雾: FogIcon,
霾: HazeIcon,
浮尘: DustIcon,
沙尘暴: DuststormIcon,
默认: 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() { function IndexLeft() {
const [weatherData, setWeatherData] = useState({ const [weatherData, setWeatherData] = useState({});
text: "晴天",
temp: "36.5",
wind_class: "3级",
wind_dir: "西南风",
wind_angle: 229,
});
const [alert, setAlert] = useState([]); const [alert, setAlert] = useState([]);
const [block1List, setBlock1List] = useState([ const [block1List, setBlock1List] = useState([
{ department: "技术部", requiredDevices: 150, anchoredDevices: 142 }, { department: "技术部", requiredDevices: 150, anchoredDevices: 142 },
@ -100,15 +46,9 @@ function IndexLeft() {
const main1Ref = useRef(null); const main1Ref = useRef(null);
const getWeatherData = async () => { const getWeatherData = async () => {
try { const result = await getWeather();
const response = await fetch("https://api.map.baidu.com/weather/v1/?district_id=130300&data_type=all&ak=dIqOi34IlTg5FkNck1vqoBpLhPAj36S1"); setWeatherData(result.now);
const data = await response.json(); setAlert(Array.isArray(result.alerts) ? result.alerts : []);
setWeatherData(data.result.now);
setAlert(Array.isArray(data.result.alerts) ? data.result.alerts : []);
}
catch (error) {
console.error("获取天气数据失败:", error);
}
}; };
const getLevelColor = (level) => { const getLevelColor = (level) => {
@ -151,7 +91,7 @@ function IndexLeft() {
<div className="img"> <div className="img">
<img src={getWeatherIcon(weatherData.text)} alt="" /> <img src={getWeatherIcon(weatherData.text)} alt="" />
</div> </div>
<div className="text">{weatherData.text}</div> <div className="text">{weatherData.text || "暂无数据"}</div>
</div> </div>
<div className="items"> <div className="items">
<div className="item"> <div className="item">
@ -160,7 +100,7 @@ function IndexLeft() {
</div> </div>
<div className="info"> <div className="info">
<div className="label">温度：</div> <div className="label">温度：</div>
<div className="value">{`${weatherData.temp}℃`}</div> <div className="value">{weatherData.temp ? `${weatherData.temp}℃` : "--"}</div>
</div> </div>
</div> </div>
<div className="item"> <div className="item">
@ -169,7 +109,7 @@ function IndexLeft() {
</div> </div>
<div className="info"> <div className="info">
<div className="label">风速：</div> <div className="label">风速：</div>
<div className="value">{weatherData.wind_class}</div> <div className="value">{weatherData.wind_class || "--"}</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -3,19 +3,12 @@ import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import icon3 from "~/assets/images/public/bigScreen/ico21.png"; import icon3 from "~/assets/images/public/bigScreen/ico21.png";
import icon1 from "~/assets/images/public/bigScreen/img10.png"; import icon1 from "~/assets/images/public/bigScreen/img10.png";
import icon2 from "~/assets/images/public/bigScreen/img11.png"; import icon2 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 Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
import { getAlertColor, getWeather, getWeatherIcon } from "~/utils/weather";
import "./index.less"; import "./index.less";
function QiXiang() { function QiXiang() {
const [weatherData, setWeatherData] = useState({ const [weatherData, setWeatherData] = useState({});
text: "晴天",
temp: "36.5",
wind_class: "3级",
wind_dir: "西南风",
wind_angle: 229,
prec_1h: 0,
});
const [alert, setAlert] = useState([]); const [alert, setAlert] = useState([]);
const [block1List, setBlock1List] = useState([ const [block1List, setBlock1List] = useState([
{ department: "技术部", requiredDevices: 150, anchoredDevices: 142 }, { department: "技术部", requiredDevices: 150, anchoredDevices: 142 },
@ -43,15 +36,9 @@ function QiXiang() {
]); ]);
const getWeatherData = async () => { const getWeatherData = async () => {
try { const result = await getWeather();
const response = await fetch("https://api.map.baidu.com/weather/v1/?district_id=130300&data_type=all&ak=dIqOi34IlTg5FkNck1vqoBpLhPAj36S1"); setWeatherData(result.now);
const data = await response.json(); setAlert(Array.isArray(result.alerts) ? result.alerts : []);
setWeatherData(data.result.now);
setAlert(Array.isArray(data.result.alerts) ? data.result.alerts : []);
}
catch (error) {
console.error("获取天气数据失败:", error);
}
}; };
useEffect(() => { useEffect(() => {
@ -68,7 +55,7 @@ function QiXiang() {
<div className="img"> <div className="img">
<img src={getWeatherIcon(weatherData.text)} alt="" /> <img src={getWeatherIcon(weatherData.text)} alt="" />
</div> </div>
<div className="text">{weatherData.text}</div> <div className="text">{weatherData.text || "暂无数据"}</div>
</div> </div>
<div className="items"> <div className="items">
<div className="item"> <div className="item">
@ -77,7 +64,7 @@ function QiXiang() {
</div> </div>
<div className="info"> <div className="info">
<div className="label">温度：</div> <div className="label">温度：</div>
<div className="value">{`${weatherData.temp}℃`}</div> <div className="value">{weatherData.temp ? `${weatherData.temp}℃` : "--"}</div>
</div> </div>
</div> </div>
<div className="item"> <div className="item">
@ -86,7 +73,7 @@ function QiXiang() {
</div> </div>
<div className="info"> <div className="info">
<div className="label">风速：</div> <div className="label">风速：</div>
<div className="value">{weatherData.wind_class}</div> <div className="value">{weatherData.wind_class || "--"}</div>
</div> </div>
</div> </div>
<div className="item"> <div className="item">
@ -95,7 +82,7 @@ function QiXiang() {
</div> </div>
<div className="info"> <div className="info">
<div className="label">降水量：</div> <div className="label">降水量：</div>
<div className="value">{`${weatherData.prec_1h}毫米`}</div> <div className="value">{weatherData.prec_1h ? `${weatherData.prec_1h}毫米` : "--"}</div>
</div> </div>
</div> </div>
</div> </div>

29
src/pages/Container/White/BranchOffice/components/CenterPanel/index.js
View File

@ -1,21 +1,14 @@
import { useEventListener, useMount } from "ahooks"; import { useEventListener, useMount } from "ahooks";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import SeamlessScroll from "zy-react-library/components/SeamlessScroll"; import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
import { getAlertColor, getWeatherIcon } from "~/pages/Container/Map/components/Content/branchOffice/IndexLeft";
import Title from "~/pages/Container/White/BranchOffice/components/Title"; import Title from "~/pages/Container/White/BranchOffice/components/Title";
import { getAlertColor, getWeather, getWeatherIcon } from "~/utils/weather";
import { initEcharts1, initEcharts2, initEcharts3, initEcharts4, initEcharts5 } from "./echarts"; import { initEcharts1, initEcharts2, initEcharts3, initEcharts4, initEcharts5 } from "./echarts";
import "./index.less"; import "./index.less";
const block3_2TabsList = ["年度", "季度"]; const block3_2TabsList = ["年度", "季度"];
function CenterPanel() { function CenterPanel() {
const [weatherData, setWeatherData] = useState({ const [weatherData, setWeatherData] = useState({});
text: "晴天",
temp: "36.5",
wind_class: "3级",
wind_dir: "西南风",
wind_angle: 229,
prec_1h: 0,
});
const [alert, setAlert] = useState([]); const [alert, setAlert] = useState([]);
const [block1_2List, setBlock1_2List] = useState([ const [block1_2List, setBlock1_2List] = useState([
{ department: "技术部", requiredDevices: 150, anchoredDevices: 142 }, { department: "技术部", requiredDevices: 150, anchoredDevices: 142 },
@ -49,15 +42,9 @@ function CenterPanel() {
const main5Ref = useRef(null); const main5Ref = useRef(null);
const getWeatherData = async () => { const getWeatherData = async () => {
try { const result = await getWeather();
const response = await fetch("https://api.map.baidu.com/weather/v1/?district_id=130300&data_type=all&ak=dIqOi34IlTg5FkNck1vqoBpLhPAj36S1"); setWeatherData(result.now);
const data = await response.json(); setAlert(Array.isArray(result.alerts) ? result.alerts : []);
setWeatherData(data.result.now);
setAlert(Array.isArray(data.result.alerts) ? data.result.alerts : []);
}
catch (error) {
console.error("获取天气数据失败:", error);
}
}; };
useEffect(() => { useEffect(() => {
@ -197,19 +184,19 @@ function CenterPanel() {
<div className="img"> <div className="img">
<img src={getWeatherIcon(weatherData.text)} alt="" /> <img src={getWeatherIcon(weatherData.text)} alt="" />
</div> </div>
<div className="text">{weatherData.text}</div> <div className="text">{weatherData.text || "暂无数据"}</div>
</div> </div>
<div className="items"> <div className="items">
<div className="item"> <div className="item">
<div className="info"> <div className="info">
<div className="label">温度：</div> <div className="label">温度：</div>
<div className="value">{`${weatherData.temp}℃`}</div> <div className="value">{weatherData?.temp ? `${weatherData?.temp}℃` : "--"}</div>
</div> </div>
</div> </div>
<div className="item"> <div className="item">
<div className="info"> <div className="info">
<div className="label">风速：</div> <div className="label">风速：</div>
<div className="value">{weatherData.wind_class}</div> <div className="value">{weatherData.wind_class || "--"}</div>
</div> </div>
</div> </div>
</div> </div>

79
src/utils/weather.js Normal file
View File

@ -0,0 +1,79 @@
import { message } from "antd";
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";
import ThunderstormIcon from "~/assets/images/public/weather/4.png";
import MildRainIcon from "~/assets/images/public/weather/5.png";
import ModerateRainIcon from "~/assets/images/public/weather/6.png";
import HeavyRainIcon from "~/assets/images/public/weather/7.png";
import StormRainIcon from "~/assets/images/public/weather/8.png";
import SnowIcon from "~/assets/images/public/weather/9.png";
import ModerateSnowIcon from "~/assets/images/public/weather/10.png";
import HeavySnowIcon from "~/assets/images/public/weather/11.png";
import SnowRainIcon from "~/assets/images/public/weather/12.png";
import FogIcon from "~/assets/images/public/weather/13.png";
import HazeIcon from "~/assets/images/public/weather/14.png";
import DustIcon from "~/assets/images/public/weather/15.png";
import DuststormIcon from "~/assets/images/public/weather/16.png";
const WEATHER_URL = "https://api.map.baidu.com/weather/v1/?district_id=130300&data_type=all&ak=dIqOi34IlTg5FkNck1vqoBpLhPAj36S1";
/**
* 获取秦皇岛市天气数据。
* 统一校验 HTTP 状态和百度接口业务状态，调用方只处理页面展示状态。
* @param {{ signal?: AbortSignal }} options 请求配置，可传入 signal 取消请求。
* @returns {Promise<object>} 百度天气接口 result 数据。
*/
export async function getWeather(options = {}) {
return {}; // TODO: Remove this line
const response = await fetch(WEATHER_URL, { signal: options.signal });
if (!response.ok) {
message.error("天气接口请求失败，请检查网络或稍后再试");
return;
}
const data = await response.json();
if (data.status !== 0 || !data.result?.now) {
message.error(data.message || "天气接口返回数据异常");
return;
}
return data.result;
}
export const weatherIconMap = {
晴天: SunIcon,
晴: SunIcon,
多云: CloudSunIcon,
阴: CloudIcon,
雷阵雨: ThunderstormIcon,
小雨: MildRainIcon,
中雨: ModerateRainIcon,
大雨: HeavyRainIcon,
暴雨: StormRainIcon,
小雪: SnowIcon,
中雪: ModerateSnowIcon,
大雪: HeavySnowIcon,
雨夹雪: SnowRainIcon,
雾: FogIcon,
霾: HazeIcon,
浮尘: DustIcon,
沙尘暴: DuststormIcon,
默认: SunIcon,
};
export const getWeatherIcon = (weatherName) => {
if (!weatherName)
return weatherIconMap["默认"];
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";
};