1.公告滚动,40s更新一次
2.echarts图标 左右轮播 60s更新一次
3.table 表格
typescript
import { useState, useEffect } from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick-theme.css';
import 'slick-carousel/slick/slick.css';
import Layout from './Layout1';
import Kpi from './components/Kpi';
import Profile from './components/Profile';
import useData, { useLineData, useSeriesDataInterval } from './hooks/useSeriesData';
import styles from './index.less';
import './index.scss';
import {
getPanoramicViewCoreData,
getPanoramicViewConsum,
getPanoramicViewTonConsum,
alarmRuleReport,
} from '@/services/Fullview/index';
import Bar from './components/Column/components/Bar';
import TabAndChart from './components/Column/components/TabAndChart';
import MapUI from './components/Map/components/MapUI';
import config from './config/index';
import _ from 'lodash';
import { getUserInfo } from '@/services/session';
import { useRequest } from '@umijs/max';
import { response } from 'express';
const path = 'fullview';
let flag1 = 1;
let flagRight1 = 1;
const pageConfig = config[path];
const ruleTypeOptions = [
{ label: '表计异常', value: 1 },
{ label: '服务器异常', value: 2 },
{ label: '能耗超标', value: 3 },
{ label: '设备异常', value: 4 },
{ label: '数据异常', value: 5 },
];
function Fullview() {
const [leftSlider, setLeftSlider] = useState(null);
const [rightSlider, setRightSlider] = useState(null);
const [refSlider, setRefSlider] = useState(null);
const [kpiEnergyList, setKpiEnergyList] = useState(null);
const [consumList, setConsumList] = useState(null);
const [consumListRight, setConsumListRight] = useState(null);
const [current, setCurrent] = useState(0);
const [state, setState] = useState([]);
const [target, setTarget] = useState([]);
const [flag, setFlag] = useState(1);
const [flagRight, setFlagRight] = useState(1);
const [type, setType] = useState(1);
// const [flagType, setflagType] = useState(0);
const { data = {} } = useData(path);
const { singleData = {} } = data;
const { data: intervalDatas = {} } = useSeriesDataInterval(path);
const { data: lineData = {} } = useLineData(path);
const { month = {}, year = {} } = lineData;
const [timerId, setTimerId] = useState<number | null>(0 || null);
const [limits, setLimits] = useState<{ [key: string]: [number, number] }>({
// 'xinye#Management.Eng_Elec_Cons_1': [110, 160],
// 'xinye#Management.Eng_All_Cons_1': [120, 180],
});
// 轮播
const syncSlides = (toSlider: { slickGoTo: (arg0: number) => void } | null, next: number) => {
console.log('rightSlider', toSlider);
if (toSlider) {
toSlider.slickGoTo(next);
}
};
const leftSliderSettings = {
dots: true,
infinite: true,
// How many slides to show in one frame
slidesToShow: 1,
// How many slides to scroll at once
slidesToScroll: 1,
autoplay: false,
speed: 300,
// 10s播一次
autoplaySpeed: 10000,
centerMode: true,
centerPadding: '0px',
beforeChange: (_: any, next: number) => {
syncSlides(rightSlider, next);
},
};
const rightSliderSettings = {
...leftSliderSettings, // 使用左侧轮播器的设置
beforeChange: (_, next: number) => {
syncSlides(leftSlider, next);
},
};
const getData = (type: any) => {
getPanoramicViewCoreData(type).then((res) => {
// debugger;
if (res.code === 200) {
// 中间最上边
let data =
res.data.firstRowMetricList?.map((item: { geo: string; flag: string; icon: string }) => {
item.geo = 'xinye';
if (item.flag === 'E') {
item.icon = './fullview/map/electric.png';
} else if (item.flag === 'GREEN') {
item.icon = './fullview/map/green-electric.png';
} else if (item.flag === 'G') {
item.icon = './fullview/map/gas.png';
} else if (item.flag === 'W') {
item.icon = './fullview/map/water.png';
} else if (item.flag === 'ENG_ALL_CONS') {
item.icon = './fullview/map/coal.png';
} else if (item.flag === 'ENG_ALL_CARBON') {
item.icon = './fullview/map/co2.png';
}
// item.domainMetric = "xinye";
return item;
}) || [];
pageConfig.keyMetrics = data?.length > 0 ? data : pageConfig.keyMetrics;
// 最中间的值
res.data.deptResVoList?.forEach(
(element: {
[x: string]: { left: number; top: number };
deptName: string;
itemValueList: any;
}) => {
element['dpt'] = element.deptName;
element['position'] = {
left: 0,
top: 2,
};
element['metrics'] = element.itemValueList;
if (element.deptName === '经典薄片车间') {
element['position'] = {
left: 0,
top: 2,
};
element['geo'] = 'xinye|joint_workshop|classics_sheet_workshop';
} else if (element.deptName === '公辅车间') {
element['position'] = {
left: 312,
top: 0,
};
element['geo'] = 'xinye|joint_workshop|classics_sheet_workshop';
} else if (element.deptName === '行政楼') {
element['position'] = {
left: 38,
top: 320,
};
} else if (element.deptName === '老车间') {
element['position'] = {
left: 729,
top: 6,
};
} else if (element.deptName === '其他区域') {
element['position'] = {
left: 729,
top: 317,
};
}
// element['dpt'] =
},
);
pageConfig.areas = res.data.deptResVoList;
setKpiEnergyList(res.data.kpiEnergyList);
}
});
};
const getView = (flag: any, type: any) => {
getPanoramicViewConsum(flag, type).then((res) => {
if (res.code === 200) {
res.data.forEach((element: { [x: string]: string; name: string }) => {
element['geo'] = 'xinye|old_workshop|newstyle_sheet_workshop';
if (element.name === '电力') {
element['domainMetric'] = 'Management.Eng_Elec_Cons_1';
} else if (element.name === '天然气') {
element['domainMetric'] = 'Management.Eng_NG_Cons_1';
} else if (element.name === '工业水') {
element['domainMetric'] = 'Management.Eng_Water_Cons_1';
} else if (element.name === '"蒸汽') {
element['domainMetric'] = 'Management.Eng_Steam_Cons_1';
}
});
let data = res.data.map((item: { geo: string }) => {
item.geo = 'xinye';
// item.name = item.
// item.domainMetric = "xinye";
return item;
});
pageConfig.metricsRight = data;
pageConfig.consumList = data;
// 耗量
pageConfig.deptCons = data;
console.log(pageConfig.deptCons);
setConsumList(data);
}
});
};
const getPanoraTonConsum = (flag: any, type: any) => {
getPanoramicViewTonConsum(flag, type).then((res) => {
if (res.code === 200) {
res.data.forEach((element: { [x: string]: string; name: string }) => {
element['geo'] = 'xinye|old_workshop|newstyle_sheet_workshop';
if (element.name === '电力') {
element['domainMetric'] = 'Management.Eng_Elec_Cons_1';
} else if (element.name === '天然气') {
element['domainMetric'] = 'Management.Eng_NG_Cons_1';
} else if (element.name === '工业水') {
element['domainMetric'] = 'Management.Eng_Water_Cons_1';
} else if (element.name === '"蒸汽') {
element['domainMetric'] = 'Management.Eng_Steam_Cons_1';
}
});
let data = res.data.map((item: { geo: string }) => {
item.geo = 'xinye';
// item.name = item.
// item.domainMetric = "xinye";
return item;
});
pageConfig.metrics = data;
pageConfig.consumList = data;
pageConfig.deptCons1 = data;
setConsumListRight(data);
// console.log(pageConfig, intervalDatas);
}
});
};
const getType = (type: any) => {
ruleTypeOptions.map((res) => {
let lable = '';
if (res.value === parseInt(type)) {
lable = res.label;
}
console.log(lable, 'lable');
return lable;
});
};
const getAlarmRuleReport = () => {
let status = 1;
getUserInfo().then((res) => {
if (res.code === 200) {
let id = res?.data?.user?.userId;
let num = 0;
alarmRuleReport(id, status, '').then((response) => {
if (response.code === 200) {
console.log(response, 'current === index');
setState(response.data);
// let data = [{
// id: 1,
// ruleType: 1,
// alarmContent: 'iPhone11挥泪降价1600元 iPhone12出道即巅峰?5G手机',
// },
// {
// id: 2,
// ruleType: 1,
// alarmContent: 'VR式体验奔驰博物馆重新开张 广东最惨的"88888"车牌'
// },
// {
// id: 3,
// ruleType: 1,
// alarmContent: '4年5队的落选秀太香了 巅峰2.6帽!力压魔兽夺最佳新秀'
// },
// {
// id: 4,
// ruleType: 1,
// alarmContent: '你好世界:寻找心中的风景 [征集]寻找中式风景禅意美'
// }]
// setState(data)
if (data.length > 0) {
const timer: NodeJS.Timeout = setInterval(() => {
let currentNum = (num + 1) % data.length;
num = currentNum;
setCurrent(_.cloneDeep(currentNum));
console.log(currentNum, current, num, 'currentcurrentcurrentcurrent');
// getAlarmRuleReport()
}, 10000);
return () => {
clearInterval(timer); // 组件卸载时清除定时器
};
}
}
});
}
});
};
useEffect(() => {
getView(flag, type);
getAlarmRuleReport();
getData(type);
setFlag(_.cloneDeep(flag));
}, [flag]);
useEffect(() => {
getData(type);
getPanoraTonConsum(flagRight, type);
setFlagRight(_.cloneDeep(flagRight));
}, [flagRight]);
useEffect(() => {
const id: NodeJS.Timeout = setInterval(() => {
getData(type);
getView(flag1, type);
getPanoraTonConsum(flagRight1, type);
}, 60 * 1000);
return () => {
clearInterval(id); // 组件卸载时清除定时器
};
}, []);
// 告警
useEffect(() => {
// const timer: NodeJS.Timeout = setInterval(() => {
// setAnimate(true)
// getAlarmRuleReport()
// }, 1500);
const id: NodeJS.Timeout = setInterval(() => {
getAlarmRuleReport();
}, 40 * 1000);
return () => {
clearInterval(id); // 组件卸载时清除定时器
// clearInterval(timer); // 组件卸载时清除定时器
};
}, []);
return (
<Layout>
<div className={styles.view}>
<div className={styles.content}>
{/* 头像 */}
{/* <Profile /> */}
<div className={styles.title}>全景视图</div>
{/* <div className={styles.warning}>warning</div> */}
<div className="cl-seamless-container" style={{ color: '#4cdced' }}>
<span className="image"></span>
<ul className="cl-seamless-list">
{state?.map((item, index) => (
<li className={styles.consulationNewsItem} key={index} style={{ fontSize: '18px' }}>
{current === index ? (
<>
<span
style={{
background: '#0c465a',
border: '2px solid #0da1b7',
padding: '2px 10px',
marginRight: '20px',
borderRadius: '6px',
fontSize: '14px',
}}
>
{ruleTypeOptions?.map((res) =>
parseInt(item?.ruleType) === res.value ? <>{res.label}</> : <></>,
)}
</span>
{item?.alarmContent}
</>
) : (
<></>
)}
</li>
))}
</ul>
</div>
<div className={styles.main}>
<div className={styles.left}>
{consumList ? (
<Slider
{...leftSliderSettings}
ref={(slider) => {
setLeftSlider(slider);
}}
className="left-column"
>
{/* 左侧内容轮播项 */}
{pageConfig.metrics.map((m, i) => (
<div key={i}>
<TabAndChart
type="耗量"
unit={m.unit}
metricName={m.name}
// todo:4个页面变化
area={m.name}
limits={limits[`${m.geo}#${m.domainMetric}`]}
dayData={intervalDatas.minute?.[`${m.geo}#${m.domainMetric}`] || []}
monthData={month?.[`${m.geo}#${m.domainMetric}`]}
yearData={year?.[`${m.geo}#${m.domainMetric}`]}
listData={consumList}
getFlag={(value: any) => {
console.log(value);
if (value === 'day') {
flag1 = 1;
setFlag(_.cloneDeep(1));
}
if (value === 'month') {
flag1 = 2;
setFlag(_.cloneDeep(2));
}
if (value === 'year') {
flag1 = 3;
setFlag(_.cloneDeep(3));
}
console.log(flag);
}}
/>
{/* <Bar
type="耗量"
metric={m.domainMetric}
dpts={pageConfig.deptCons}
actuals={actual}
targets={target}
/> */}
</div>
))}
</Slider>
) : (
<></>
)}
</div>
<div className={styles.middle}>
<MapUI
bg={pageConfig.bg}
keyMetrics={pageConfig.keyMetrics}
data={singleData}
intervalData={intervalDatas.day}
areas={pageConfig.areas}
type={0}
/>
<Kpi kpiEnergyList={kpiEnergyList} />
</div>
<div className={styles.right}>
{consumListRight ? (
<Slider
{...rightSliderSettings}
ref={(slider) => setRightSlider(slider)}
className="right-column"
>
{pageConfig.metricsRight.map((m, i) => (
<div key={i}>
<TabAndChart
type="单耗"
unit={m.unit}
metricName={m.name}
area={m.name}
limits={limits[`${m.geo}#${m.domainMetric}`]}
dayData={intervalDatas.minute?.[`${m.geo}#${m.domainMetric}`] || []}
monthData={month?.[`${m.geo}#${m.domainMetric}`]}
yearData={year?.[`${m.geo}#${m.domainMetric}`]}
listData={consumListRight}
getFlag={(value: any) => {
if (value === 'day') {
flagRight1 = 1;
setFlagRight(_.cloneDeep(1));
}
if (value === 'month') {
flagRight1 = 2;
setFlagRight(_.cloneDeep(2));
}
if (value === 'year') {
flagRight1 = 3;
setFlagRight(_.cloneDeep(3));
}
}}
/>
{/* <Bar
type="单耗"
metric={m.domainMetric}
dpts={pageConfig.deptCons1}
actuals={singleData}
targets={[]}
/> */}
</div>
))}
</Slider>
) : (
<></>
)}
</div>
</div>
</div>
</div>
</Layout>
);
}
export default Fullview;