|
|
@@ -26,73 +26,142 @@ import {
|
|
|
|
|
|
// 数据大屏
|
|
|
const DataBoard: React.FC = () => {
|
|
|
- const [typeValue, setTypeValue] = useState(1);
|
|
|
- const [userNum, setUserNum] = useState({});
|
|
|
- const [homeNum, setHomeNum] = useState({});
|
|
|
- const [onlineDeviceNum, setOnlineDeviceNum] = useState({});
|
|
|
- const [offlineDeviceNum, setOfflineDeviceNum] = useState({});
|
|
|
- const [deviceNum, setDeviceNum] = useState({});
|
|
|
- const [errorDeviceNum, setErrorDeviceNum] = useState({});
|
|
|
- const [masterControlNum, setMasterControlNum] = useState({});
|
|
|
- const [subControlNum, setSubControlNum] = useState({});
|
|
|
- const [deviceStatistics, setDeviceStatistics] = useState({});
|
|
|
- const [allRunTime, setAllRunTime] = useState({});
|
|
|
- const [todayRunTime, setTodayRunTime] = useState({});
|
|
|
+ const [deviceTypeValue, setDeviceTypeValue] = useState(1);
|
|
|
+ const [userTypeValue, setUserTypeValue] = useState(1);
|
|
|
+ const [userNum, setUserNum] = useState({
|
|
|
+ number: [0],
|
|
|
+ content: '{nt}',
|
|
|
+ style: {
|
|
|
+ fontSize: 28,
|
|
|
+ fill: '#2ff8ff',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const [homeNum, setHomeNum] = useState({
|
|
|
+ number: [0],
|
|
|
+ content: '{nt}',
|
|
|
+ style: {
|
|
|
+ fontSize: 28,
|
|
|
+ fill: '#2ff8ff',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const [onlineDeviceNum, setOnlineDeviceNum] = useState({
|
|
|
+ number: [0],
|
|
|
+ content: '{nt}',
|
|
|
+ style: {
|
|
|
+ fontSize: 20,
|
|
|
+ fill: '#2ff8ff',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const [offlineDeviceNum, setOfflineDeviceNum] = useState({
|
|
|
+ number: [0],
|
|
|
+ content: '{nt}',
|
|
|
+ style: {
|
|
|
+ fontSize: 20,
|
|
|
+ fill: '#2ff8ff',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const [deviceNum, setDeviceNum] = useState({
|
|
|
+ number: [0],
|
|
|
+ content: '{nt}',
|
|
|
+ style: {
|
|
|
+ fontSize: 20,
|
|
|
+ fill: '#2ff8ff',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const [errorDeviceNum, setErrorDeviceNum] = useState({
|
|
|
+ number: [0],
|
|
|
+ content: '{nt}',
|
|
|
+ style: {
|
|
|
+ fontSize: 20,
|
|
|
+ fill: '#2ff8ff',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const [masterControlNum, setMasterControlNum] = useState({
|
|
|
+ number: [0],
|
|
|
+ content: '{nt}',
|
|
|
+ style: {
|
|
|
+ fontSize: 20,
|
|
|
+ fill: '#2ff8ff',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const [subControlNum, setSubControlNum] = useState({
|
|
|
+ number: [0],
|
|
|
+ content: '{nt}',
|
|
|
+ style: {
|
|
|
+ fontSize: 20,
|
|
|
+ fill: '#2ff8ff',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const [deviceStatistics, setDeviceStatistics] = useState({
|
|
|
+ number: [0],
|
|
|
+ content: '{nt}',
|
|
|
+ style: {
|
|
|
+ fontSize: 33,
|
|
|
+ fill: '#08c7f1',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const [allRunTime, setAllRunTime] = useState({
|
|
|
+ number: [0],
|
|
|
+ content: '{nt}',
|
|
|
+ toFixed: 2,
|
|
|
+ style: {
|
|
|
+ fontSize: 33,
|
|
|
+ fill: '#ffb026',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const [todayRunTime, setTodayRunTime] = useState({
|
|
|
+ number: [0],
|
|
|
+ content: '{nt}',
|
|
|
+ toFixed: 2,
|
|
|
+ style: {
|
|
|
+ fontSize: 33,
|
|
|
+ fill: '#0dde79',
|
|
|
+ },
|
|
|
+ });
|
|
|
const [homeInfo, setHomeInfo] = useState([]);
|
|
|
const [userChartsData, setUserChartsData] = useState([]);
|
|
|
const [deviceChartsData, setDeviceChartsData] = useState([]);
|
|
|
+ const [areaDeviceList, setAreaDeviceList] = useState([]);
|
|
|
|
|
|
const settings = {
|
|
|
dots: false, //圆点显示（false隐藏）
|
|
|
infinite: true, //无限的环绕内容
|
|
|
- autoplay: true, //自动播放，速度默认为（3000毫秒）
|
|
|
+ autoplay: false, //自动播放，速度默认为（3000毫秒）
|
|
|
speed: 500, //自动播放速度（毫秒）
|
|
|
slidesToShow: 2, //在一帧中显示2张卡片
|
|
|
slidesToScroll: 1, //一次滚动2张卡片
|
|
|
variableWidth: true,
|
|
|
};
|
|
|
|
|
|
- //地区设备数量Top5
|
|
|
- const getAreaData = () => {
|
|
|
- queryAreaData({ region_type: '1' }).then((res) => {
|
|
|
- if (res?.code === 0) {
|
|
|
- console.log(res);
|
|
|
- }
|
|
|
- });
|
|
|
- };
|
|
|
// 设备统计
|
|
|
const getDeviceData = () => {
|
|
|
queryDeviceData().then((res) => {
|
|
|
if (res?.code === 0) {
|
|
|
- const common = {
|
|
|
- content: '{nt}',
|
|
|
- style: {
|
|
|
- fontSize: 20,
|
|
|
- fill: '#2ff8ff',
|
|
|
- },
|
|
|
- };
|
|
|
- const device = {
|
|
|
- content: '{nt}',
|
|
|
- style: {
|
|
|
- fontSize: 33,
|
|
|
- fill: '#08c7f1',
|
|
|
- },
|
|
|
- };
|
|
|
// 设备数
|
|
|
- const deviceData = { number: [res.data.device_count], ...common };
|
|
|
+ setDeviceNum((data) => {
|
|
|
+ data.number = [res.data.device_count];
|
|
|
+ return { ...data };
|
|
|
+ });
|
|
|
// 故障设备数
|
|
|
- const errorDeviceData = { number: [res.data.failure_device], ...common };
|
|
|
+ setErrorDeviceNum((data) => {
|
|
|
+ data.number = [res.data.failure_device];
|
|
|
+ return { ...data };
|
|
|
+ });
|
|
|
// 主控数量
|
|
|
- const masterControlData = { number: [res.data.master_count], ...common };
|
|
|
+ setMasterControlNum((data) => {
|
|
|
+ data.number = [res.data.master_count];
|
|
|
+ return { ...data };
|
|
|
+ });
|
|
|
// 分控数量
|
|
|
- const subControlData = { number: [res.data.sub_count], ...common };
|
|
|
- // 顶部设备数统计
|
|
|
- const deviceSta = { number: [res.data.device_count], ...device };
|
|
|
- setDeviceNum(deviceData);
|
|
|
- setErrorDeviceNum(errorDeviceData);
|
|
|
- setMasterControlNum(masterControlData);
|
|
|
- setSubControlNum(subControlData);
|
|
|
- setDeviceStatistics(deviceSta);
|
|
|
+ setSubControlNum((data) => {
|
|
|
+ data.number = [res.data.sub_count];
|
|
|
+ return { ...data };
|
|
|
+ });
|
|
|
+ // 设备数统计
|
|
|
+ setDeviceStatistics((data) => {
|
|
|
+ data.number = [res.data.device_count];
|
|
|
+ return { ...data };
|
|
|
+ });
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
@@ -101,32 +170,26 @@ const DataBoard: React.FC = () => {
|
|
|
const userNumData = () => {
|
|
|
queryUserData().then((res) => {
|
|
|
if (res?.code === 0) {
|
|
|
- const userCommon = {
|
|
|
- content: '{nt}',
|
|
|
- style: {
|
|
|
- fontSize: 28,
|
|
|
- fill: '#2ff8ff',
|
|
|
- },
|
|
|
- };
|
|
|
- const deviceCommon = {
|
|
|
- content: '{nt}',
|
|
|
- style: {
|
|
|
- fontSize: 20,
|
|
|
- fill: '#2ff8ff',
|
|
|
- },
|
|
|
- };
|
|
|
// 注册用户数
|
|
|
- const userData = { number: [res.data.user_count], ...userCommon };
|
|
|
+ setUserNum((data) => {
|
|
|
+ data.number = [res.data.user_count];
|
|
|
+ return { ...data };
|
|
|
+ });
|
|
|
// 家庭数量
|
|
|
- const homeData = { number: [res.data.home_count], ...userCommon };
|
|
|
+ setHomeNum((data) => {
|
|
|
+ data.number = [res.data.home_count];
|
|
|
+ return { ...data };
|
|
|
+ });
|
|
|
// 在线设备数
|
|
|
- const onlineData = { number: [res.data.device_online], ...deviceCommon };
|
|
|
+ setOnlineDeviceNum((data) => {
|
|
|
+ data.number = [res.data.device_online];
|
|
|
+ return { ...data };
|
|
|
+ });
|
|
|
// 离线设备数
|
|
|
- const offlineData = { number: [res.data.device_offline], ...deviceCommon };
|
|
|
- setUserNum(userData);
|
|
|
- setHomeNum(homeData);
|
|
|
- setOnlineDeviceNum(onlineData);
|
|
|
- setOfflineDeviceNum(offlineData);
|
|
|
+ setOfflineDeviceNum((data) => {
|
|
|
+ data.number = [res.data.device_offline];
|
|
|
+ return { ...data };
|
|
|
+ });
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
@@ -135,36 +198,30 @@ const DataBoard: React.FC = () => {
|
|
|
const getRunTime = () => {
|
|
|
queryDeviceRunTime().then((res) => {
|
|
|
if (res.code === 0) {
|
|
|
- const common = { content: '{nt}' };
|
|
|
- // 总运行时长（小时）
|
|
|
- const allTime = {
|
|
|
- number: [res.data.total_run_time],
|
|
|
- toFixed: 2,
|
|
|
- style: {
|
|
|
- fontSize: 33,
|
|
|
- fill: '#ffb026',
|
|
|
- },
|
|
|
- ...common,
|
|
|
- };
|
|
|
- // 今日运行时长（小时）
|
|
|
- const todayTime = {
|
|
|
- number: [res.data.day_run_time],
|
|
|
- toFixed: 2,
|
|
|
- style: {
|
|
|
- fontSize: 33,
|
|
|
- fill: '#0dde79',
|
|
|
- },
|
|
|
- ...common,
|
|
|
- };
|
|
|
- setAllRunTime(allTime);
|
|
|
- setTodayRunTime(todayTime);
|
|
|
+ setAllRunTime((data) => {
|
|
|
+ data.number = [res.data.total_run_time];
|
|
|
+ return { ...data };
|
|
|
+ });
|
|
|
+ setTodayRunTime((data) => {
|
|
|
+ data.number = [res.data.day_run_time];
|
|
|
+ return { ...data };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ //地区设备数量Top5
|
|
|
+ const getAreaData = () => {
|
|
|
+ queryAreaData({ region_type: '1' }).then((res) => {
|
|
|
+ if (res?.code === 0) {
|
|
|
+ setAreaDeviceList(res?.data);
|
|
|
}
|
|
|
});
|
|
|
};
|
|
|
|
|
|
// 设备增长趋势
|
|
|
- const deviceCharts = (item: number) => {
|
|
|
- queryDeviceChart({ time_type: item }).then((res) => {
|
|
|
+ const deviceCharts = () => {
|
|
|
+ queryDeviceChart({ time_type: deviceTypeValue }).then((res) => {
|
|
|
if (res?.code === 0) {
|
|
|
setDeviceChartsData(res.data);
|
|
|
}
|
|
|
@@ -173,7 +230,7 @@ const DataBoard: React.FC = () => {
|
|
|
|
|
|
// 用户增长趋势
|
|
|
const userCharts = () => {
|
|
|
- queryUserChart({ time_type: 1 }).then((res) => {
|
|
|
+ queryUserChart({ time_type: userTypeValue }).then((res) => {
|
|
|
if (res?.code === 0) {
|
|
|
setUserChartsData(res.data);
|
|
|
}
|
|
|
@@ -189,27 +246,13 @@ const DataBoard: React.FC = () => {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
- // 初始化
|
|
|
- // useEffect(() => {
|
|
|
- // getAreaData();
|
|
|
- // userNumData();
|
|
|
- // getDeviceData();
|
|
|
- // const intervalId = setInterval(() => {
|
|
|
- // getAreaData();
|
|
|
- // userNumData();
|
|
|
- // getDeviceData();
|
|
|
- // setTypeValue((prevValue) => (prevValue === 1 ? 2 : 1));
|
|
|
- // }, 1000 * 100);
|
|
|
- // return () => clearInterval(intervalId);
|
|
|
- // }, []);
|
|
|
-
|
|
|
useEffect(() => {
|
|
|
// 组件挂载时立即获取一次数据
|
|
|
getAreaData();
|
|
|
userNumData();
|
|
|
getDeviceData();
|
|
|
getRunTime();
|
|
|
- deviceCharts(1);
|
|
|
+ deviceCharts();
|
|
|
userCharts();
|
|
|
getHomeListInfo();
|
|
|
|
|
|
@@ -218,36 +261,46 @@ const DataBoard: React.FC = () => {
|
|
|
getAreaData();
|
|
|
userNumData();
|
|
|
getDeviceData();
|
|
|
- userCharts();
|
|
|
}, 10 * 60 * 1000); // 10分钟，单位为毫秒
|
|
|
|
|
|
+ // 两秒刷新一次顶部的时长数据
|
|
|
const timer_two = setInterval(() => {
|
|
|
getRunTime();
|
|
|
}, 1000 * 2);
|
|
|
|
|
|
- const timer_three = setInterval(() => {
|
|
|
- setTypeValue((prevValue) => {
|
|
|
- deviceCharts(prevValue === 1 ? 2 : 1);
|
|
|
- return prevValue === 1 ? 2 : 1;
|
|
|
- });
|
|
|
- }, 1000 * 2);
|
|
|
-
|
|
|
// 组件卸载时清除定时器
|
|
|
return () => {
|
|
|
clearInterval(timer);
|
|
|
clearInterval(timer_two);
|
|
|
- clearInterval(timer_three);
|
|
|
};
|
|
|
}, []); // 传入一个空数组作为第二个参数，确保只在组件挂载和卸载时执行一次
|
|
|
|
|
|
+ // 设备增长趋势切换
|
|
|
+ useEffect(() => {
|
|
|
+ deviceCharts();
|
|
|
+ const interval = setInterval(() => {
|
|
|
+ setDeviceTypeValue((prevParam) => (prevParam === 1 ? 2 : 1));
|
|
|
+ }, 1000 * 10);
|
|
|
+ return () => clearInterval(interval);
|
|
|
+ }, [deviceTypeValue]);
|
|
|
+
|
|
|
+ // 用户增长趋势切换
|
|
|
+ useEffect(() => {
|
|
|
+ userCharts();
|
|
|
+ const interval = setInterval(() => {
|
|
|
+ setUserTypeValue((prevParam) => (prevParam === 1 ? 2 : 1));
|
|
|
+ }, 1000 * 10);
|
|
|
+ return () => clearInterval(interval);
|
|
|
+ }, [userTypeValue]);
|
|
|
+
|
|
|
return (
|
|
|
<datav.FullScreenContainer>
|
|
|
<div className={styles.container}>
|
|
|
- <img src={dataBoardBg_two} className={styles.dataBoardBg_two} alt="" />
|
|
|
+ <img src={dataBoardBg_two} className={styles.dataBoardBg_two} alt="背景边框" />
|
|
|
{/* 顶部 */}
|
|
|
<div className={styles.dataTitleItem}>
|
|
|
- <img src={dataBoardTitle} alt="" />
|
|
|
- <img src={decoration_three} style={{ width: '50%' }} alt="" />
|
|
|
+ <img src={dataBoardTitle} alt="顶部标题背景" />
|
|
|
+ <img src={decoration_three} style={{ width: '50%' }} alt="顶部标题背景装饰" />
|
|
|
<div className={styles.title}>山东永续绿建五恒环境科技有限公司</div>
|
|
|
</div>
|
|
|
{/* 中间内容 */}
|
|
|
@@ -287,7 +340,7 @@ const DataBoard: React.FC = () => {
|
|
|
className={styles.device_num}
|
|
|
style={{ width: '200px', height: '50px' }}
|
|
|
/>
|
|
|
- <img src={decoration_two} className={styles.device_bg} alt="" />
|
|
|
+ <img src={decoration_two} className={styles.device_bg} alt="装饰背景" />
|
|
|
<div className={styles.device_title}>设备数</div>
|
|
|
</div>
|
|
|
<div className={styles.device_item}>
|
|
|
@@ -296,7 +349,7 @@ const DataBoard: React.FC = () => {
|
|
|
className={styles.device_num}
|
|
|
style={{ width: '200px', height: '50px' }}
|
|
|
/>
|
|
|
- <img src={decoration_two} className={styles.device_bg} alt="" />
|
|
|
+ <img src={decoration_two} className={styles.device_bg} alt="装饰背景" />
|
|
|
<div className={styles.device_title}>在线设备数</div>
|
|
|
</div>
|
|
|
<div className={styles.device_item}>
|
|
|
@@ -305,7 +358,7 @@ const DataBoard: React.FC = () => {
|
|
|
className={styles.device_num}
|
|
|
style={{ width: '200px', height: '50px' }}
|
|
|
/>
|
|
|
- <img src={decoration_two} className={styles.device_bg} alt="" />
|
|
|
+ <img src={decoration_two} className={styles.device_bg} alt="装饰背景" />
|
|
|
<div className={styles.device_title}>离线设备数</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -316,7 +369,7 @@ const DataBoard: React.FC = () => {
|
|
|
className={styles.device_num}
|
|
|
style={{ width: '200px', height: '50px' }}
|
|
|
/>
|
|
|
- <img src={decoration_two} className={styles.device_bg} alt="" />
|
|
|
+ <img src={decoration_two} className={styles.device_bg} alt="装饰背景" />
|
|
|
<div className={styles.device_title}>故障设备数</div>
|
|
|
</div>
|
|
|
<div className={styles.device_item}>
|
|
|
@@ -325,7 +378,7 @@ const DataBoard: React.FC = () => {
|
|
|
className={styles.device_num}
|
|
|
style={{ width: '200px', height: '50px' }}
|
|
|
/>
|
|
|
- <img src={decoration_two} className={styles.device_bg} alt="" />
|
|
|
+ <img src={decoration_two} className={styles.device_bg} alt="装饰背景" />
|
|
|
<div className={styles.device_title}>主控数量</div>
|
|
|
</div>
|
|
|
<div className={styles.device_item}>
|
|
|
@@ -334,7 +387,7 @@ const DataBoard: React.FC = () => {
|
|
|
className={styles.device_num}
|
|
|
style={{ width: '200px', height: '50px' }}
|
|
|
/>
|
|
|
- <img src={decoration_two} className={styles.device_bg} alt="" />
|
|
|
+ <img src={decoration_two} className={styles.device_bg} alt="装饰背景" />
|
|
|
<div className={styles.device_title}>分控数量</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -345,13 +398,12 @@ const DataBoard: React.FC = () => {
|
|
|
<div className={styles.decoration_left_2}>
|
|
|
<img src={border} alt="边框" />
|
|
|
<div className={styles.title_text}>用户增长趋势</div>
|
|
|
- {/* TODO 改一下样式 */}
|
|
|
- <div className={styles.radio_style}>
|
|
|
- {typeValue === 1 && <span style={{ color: '#fff' }}>月</span>}
|
|
|
- {typeValue === 2 && <span style={{ color: '#fff' }}>日</span>}
|
|
|
- </div>
|
|
|
<div className={styles.user_charts}>
|
|
|
- <LineChartsCommon width={23} height={23} data={userChartsData} />
|
|
|
+ {userChartsData && userChartsData.length ? (
|
|
|
+ <LineChartsCommon width={23} height={23} data={userChartsData} />
|
|
|
+ ) : (
|
|
|
+ <datav.Loading style={{ position: 'absolute' }}>Loading...</datav.Loading>
|
|
|
+ )}
|
|
|
</div>
|
|
|
</div>
|
|
|
{/* 中间内容-----地图 */}
|
|
|
@@ -359,7 +411,7 @@ const DataBoard: React.FC = () => {
|
|
|
{/* 数据统计 */}
|
|
|
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
|
|
|
<div className={styles.data_show}>
|
|
|
- <img src={decoration_five} alt="" />
|
|
|
+ <img src={decoration_five} alt="背景边框" />
|
|
|
<datav.DigitalFlop
|
|
|
config={deviceStatistics}
|
|
|
className={styles.data_show_num}
|
|
|
@@ -370,7 +422,7 @@ const DataBoard: React.FC = () => {
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={styles.data_show}>
|
|
|
- <img src={decoration_five} alt="" />
|
|
|
+ <img src={decoration_five} alt="背景边框" />
|
|
|
<datav.DigitalFlop
|
|
|
config={allRunTime}
|
|
|
className={styles.data_show_num}
|
|
|
@@ -381,7 +433,7 @@ const DataBoard: React.FC = () => {
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={styles.data_show}>
|
|
|
- <img src={decoration_five} alt="" />
|
|
|
+ <img src={decoration_five} alt="背景边框" />
|
|
|
<datav.DigitalFlop
|
|
|
config={todayRunTime}
|
|
|
className={styles.data_show_num}
|
|
|
@@ -392,21 +444,27 @@ const DataBoard: React.FC = () => {
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <MapComponent />
|
|
|
+ {areaDeviceList && areaDeviceList.length ? (
|
|
|
+ <MapComponent userData={userNum} areaList={areaDeviceList} />
|
|
|
+ ) : (
|
|
|
+ <datav.Loading style={{ position: 'absolute' }}>Loading...</datav.Loading>
|
|
|
+ )}
|
|
|
</div>
|
|
|
{/* 中间内容-----右侧 */}
|
|
|
{/* 中间内容-----右侧--地区设备数量统计 */}
|
|
|
<div className={styles.decoration_right_3}>
|
|
|
<img src={border} alt="边框" />
|
|
|
<div className={styles.title_text}>地区设备数量统计</div>
|
|
|
- <AreaDeviceData />
|
|
|
+ {areaDeviceList && areaDeviceList.length && <AreaDeviceData data={areaDeviceList} />}
|
|
|
</div>
|
|
|
{/* 中间内容-----右侧--设备增长趋势*/}
|
|
|
<div className={styles.decoration_right_4}>
|
|
|
<img src={border} alt="边框" />
|
|
|
<div className={styles.title_text}>设备增长趋势</div>
|
|
|
- {deviceChartsData && deviceChartsData.length && (
|
|
|
+ {deviceChartsData && deviceChartsData.length ? (
|
|
|
<LineChartsCommon width={23} height={25} data={deviceChartsData} />
|
|
|
+ ) : (
|
|
|
+ <datav.Loading style={{ position: 'absolute' }}>Loading...</datav.Loading>
|
|
|
)}
|
|
|
</div>
|
|
|
</div>
|
shylock
