|
@@ -15,6 +15,7 @@ import {
|
|
|
queryDeviceData,
|
|
|
queryDeviceRunTime,
|
|
|
queryHomeInfo,
|
|
|
+ queryMapJson,
|
|
|
queryUserChart,
|
|
|
queryUserData,
|
|
|
} from '@/services/dataBoardService';
|
|
@@ -124,6 +125,7 @@ const DataBoard: React.FC = () => {
|
|
|
const [userChartsData, setUserChartsData] = useState([]);
|
|
|
const [deviceChartsData, setDeviceChartsData] = useState([]);
|
|
|
const [areaDeviceList, setAreaDeviceList] = useState([]);
|
|
|
+ const [mapJson, setMapJson] = useState({});
|
|
|
|
|
|
const settings = {
|
|
|
dots: false, //圆点显示(false隐藏)
|
|
@@ -141,7 +143,7 @@ const DataBoard: React.FC = () => {
|
|
|
if (res?.code === 0) {
|
|
|
// 设备数
|
|
|
setDeviceNum((data) => {
|
|
|
- data.number = [90];
|
|
|
+ data.number = [res.data.device_count];
|
|
|
return { ...data };
|
|
|
});
|
|
|
// 故障设备数
|
|
@@ -151,19 +153,17 @@ const DataBoard: React.FC = () => {
|
|
|
});
|
|
|
// 主控数量
|
|
|
setMasterControlNum((data) => {
|
|
|
- // data.number = [res.data.master_count];
|
|
|
- data.number = [90]; // 假数据 回头删
|
|
|
+ data.number = [res.data.master_count];
|
|
|
return { ...data };
|
|
|
});
|
|
|
// 分控数量
|
|
|
setSubControlNum((data) => {
|
|
|
- // data.number = [res.data.sub_count];
|
|
|
- data.number = [90 * 3]; // 假数据 回头删
|
|
|
+ data.number = [res.data.sub_count];
|
|
|
return { ...data };
|
|
|
});
|
|
|
// 设备数统计
|
|
|
setDeviceStatistics((data) => {
|
|
|
- data.number = [90]; // 假数据 回头删
|
|
|
+ data.number = [res.data.device_count];
|
|
|
return { ...data };
|
|
|
});
|
|
|
}
|
|
@@ -176,25 +176,22 @@ const DataBoard: React.FC = () => {
|
|
|
if (res?.code === 0) {
|
|
|
// 注册用户数
|
|
|
setUserNum((data) => {
|
|
|
- data.number = [res.data.user_count * 2]; // 假数据 回头删
|
|
|
+ data.number = [res.data.user_count];
|
|
|
return { ...data };
|
|
|
});
|
|
|
// 家庭数量
|
|
|
setHomeNum((data) => {
|
|
|
- // data.number = [res.data.home_count];
|
|
|
- data.number = [108]; // 假数据 回头删
|
|
|
+ data.number = [res.data.home_count];
|
|
|
return { ...data };
|
|
|
});
|
|
|
// 在线设备数
|
|
|
setOnlineDeviceNum((data) => {
|
|
|
- // data.number = [res.data.device_online];
|
|
|
- data.number = [90];
|
|
|
+ data.number = [res.data.device_online];
|
|
|
return { ...data };
|
|
|
});
|
|
|
// 离线设备数
|
|
|
setOfflineDeviceNum((data) => {
|
|
|
- // data.number = [res.data.device_offline];
|
|
|
- data.number = [0];
|
|
|
+ data.number = [res.data.device_offline];
|
|
|
return { ...data };
|
|
|
});
|
|
|
}
|
|
@@ -206,7 +203,7 @@ const DataBoard: React.FC = () => {
|
|
|
queryDeviceRunTime().then((res) => {
|
|
|
if (res.code === 0) {
|
|
|
setAllRunTime((data) => {
|
|
|
- data.number = [res.data.total_run_time * 2.2];
|
|
|
+ data.number = [res.data.total_run_time];
|
|
|
return { ...data };
|
|
|
});
|
|
|
setTodayRunTime((data) => {
|
|
@@ -221,30 +218,7 @@ const DataBoard: React.FC = () => {
|
|
|
const getAreaData = () => {
|
|
|
queryAreaData({ region_type: '1' }).then((res) => {
|
|
|
if (res?.code === 0) {
|
|
|
- // 假数据 回头删
|
|
|
- const arr: any = [
|
|
|
- {
|
|
|
- name: '济南',
|
|
|
- value: 22,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '菏泽',
|
|
|
- value: 15,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '泰安',
|
|
|
- value: 11,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '济宁',
|
|
|
- value: 9,
|
|
|
- },
|
|
|
- {
|
|
|
- name: '潍坊',
|
|
|
- value: 9,
|
|
|
- },
|
|
|
- ];
|
|
|
- setAreaDeviceList(arr);
|
|
|
+ setAreaDeviceList(res.data);
|
|
|
}
|
|
|
});
|
|
|
};
|
|
@@ -253,11 +227,6 @@ const DataBoard: React.FC = () => {
|
|
|
const deviceCharts = () => {
|
|
|
queryDeviceChart({ time_type: deviceTypeValue }).then((res) => {
|
|
|
if (res?.code === 0) {
|
|
|
- // 假数据 回头删
|
|
|
- const arr = res.data;
|
|
|
- for (let i = 0; i < arr.length; i++) {
|
|
|
- arr[i].value = arr[i].value * 9;
|
|
|
- }
|
|
|
setDeviceChartsData(res.data);
|
|
|
}
|
|
|
});
|
|
@@ -267,11 +236,6 @@ const DataBoard: React.FC = () => {
|
|
|
const userCharts = () => {
|
|
|
queryUserChart({ time_type: userTypeValue }).then((res) => {
|
|
|
if (res?.code === 0) {
|
|
|
- // 假数据 回头删
|
|
|
- const arr = res.data;
|
|
|
- for (let i = 0; i < arr.length; i++) {
|
|
|
- arr[i].value = arr[i].value * 2;
|
|
|
- }
|
|
|
setUserChartsData(res.data);
|
|
|
}
|
|
|
});
|
|
@@ -295,6 +259,15 @@ const DataBoard: React.FC = () => {
|
|
|
}, interval);
|
|
|
};
|
|
|
|
|
|
+ // 获取地图json数据
|
|
|
+ const getMapJson = () => {
|
|
|
+ queryMapJson().then((res) => {
|
|
|
+ if (res && res.code === 0) {
|
|
|
+ setMapJson(res.data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
useEffect(() => {
|
|
|
// 组件挂载时立即获取一次数据
|
|
|
getAreaData();
|
|
@@ -304,6 +277,7 @@ const DataBoard: React.FC = () => {
|
|
|
deviceCharts();
|
|
|
userCharts();
|
|
|
getHomeListInfo();
|
|
|
+ getMapJson();
|
|
|
|
|
|
timerFun(() => {
|
|
|
getAreaData();
|
|
@@ -509,9 +483,10 @@ const DataBoard: React.FC = () => {
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ {/* 地图 */}
|
|
|
{areaDeviceList && areaDeviceList.length ? (
|
|
|
<Suspense fallback={<div>loading</div>}>
|
|
|
- <MapComponent userData={userNum} areaList={areaDeviceList} />
|
|
|
+ <MapComponent mapJson={mapJson} userData={userNum} areaList={areaDeviceList} />
|
|
|
</Suspense>
|
|
|
) : (
|
|
|
<datav.Loading style={{ position: 'absolute' }}>Loading...</datav.Loading>
|