|
@@ -0,0 +1,167 @@
|
|
|
+import React, { useState, useEffect, useCallback } from 'react';
|
|
|
+import styles from './index.less';
|
|
|
+import cx from 'classnames';
|
|
|
+import { Select } from 'antd';
|
|
|
+
|
|
|
+import type { navigatorItem } from '@/pages/Environment/index';
|
|
|
+import { getBuildingList, getFloorList } from '@/services/ant-design-pro/environment';
|
|
|
+
|
|
|
+export type topNavigatorProps = {
|
|
|
+ navigatorList?: navigatorItem[];
|
|
|
+ type: string;
|
|
|
+ navigatorChange?: (item: navigatorItem) => void;
|
|
|
+ // action?: React.ReactElement<topNavRightProps>[];
|
|
|
+ action?: React.ReactNode;
|
|
|
+ changeFloorId?: (data: string) => void;
|
|
|
+};
|
|
|
+type floorItem = {
|
|
|
+ value: string;
|
|
|
+ [key: string]: any;
|
|
|
+};
|
|
|
+type buildItem = {
|
|
|
+ value: string;
|
|
|
+ [key: string]: any;
|
|
|
+};
|
|
|
+const TopNavigator: React.FC<topNavigatorProps> = ({
|
|
|
+ navigatorList = [],
|
|
|
+ type,
|
|
|
+ navigatorChange,
|
|
|
+ action,
|
|
|
+ changeFloorId,
|
|
|
+}) => {
|
|
|
+ const [buildList, setBuildList] = useState<buildItem[]>([]);
|
|
|
+ const [currentBuild, setCurrentBuild] = useState<any>();
|
|
|
+
|
|
|
+ const [floorList, setFloorList] = useState<floorItem[]>([]);
|
|
|
+ const [currentFloor, setCurrentFloor] = useState<string>();
|
|
|
+ const [selParamObj, setSelParamObj] = useState(navigatorList[0]);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ //console.log('TopNavigator----getBuildingList');
|
|
|
+ //请求建筑的接口
|
|
|
+ getBuildingList({
|
|
|
+ criteria: {
|
|
|
+ projectId: 'Pj1101080259',
|
|
|
+ },
|
|
|
+ }).then((res) => {
|
|
|
+ //debugger;
|
|
|
+ var resData = res.content || [];
|
|
|
+ setBuildList(
|
|
|
+ (resData || []).map((item) => {
|
|
|
+ return { label: item.localName, value: item.id };
|
|
|
+ }),
|
|
|
+ );
|
|
|
+ //debugger;
|
|
|
+ setCurrentBuild((resData[0] || {}).id); //设置第一个值
|
|
|
+ });
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (currentBuild) {
|
|
|
+ getFloorList({
|
|
|
+ criteria: {
|
|
|
+ projectId: 'Pj1101080259',
|
|
|
+ buildId: currentBuild,
|
|
|
+ //buildingId: 'Bd1101080259317347f00d0811ebb06b1d2749356f83',
|
|
|
+ },
|
|
|
+ }).then((res) => {
|
|
|
+ //请求楼层的接口
|
|
|
+ //debugger;
|
|
|
+ var resData = res.content || [];
|
|
|
+ setFloorList(
|
|
|
+ (resData || []).map((item) => {
|
|
|
+ return { label: item.localName, value: item.id };
|
|
|
+ }),
|
|
|
+ );
|
|
|
+ setCurrentFloor((resData[0] || {}).id); //设置第一个值
|
|
|
+ changeFloorId && changeFloorId((resData[0] || {}).id);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, [currentBuild]);
|
|
|
+
|
|
|
+ const changBuildHandle = useCallback((val) => {
|
|
|
+ //console.log('select-onChange', val);
|
|
|
+ //debugger;
|
|
|
+ setCurrentBuild(val);
|
|
|
+ }, []);
|
|
|
+ const changFloorHandle = useCallback((val) => {
|
|
|
+ //console.log('select-onChange', val);
|
|
|
+ //debugger;
|
|
|
+ setCurrentFloor(val);
|
|
|
+ console.log('changeFloorId', changeFloorId);
|
|
|
+ changeFloorId && changeFloorId(val);
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ //当前切换导航条时
|
|
|
+ const itemClick = (item: navigatorItem) => {
|
|
|
+ setSelParamObj(item);
|
|
|
+ console.log('itemclick', item);
|
|
|
+ navigatorChange && navigatorChange(item);
|
|
|
+ };
|
|
|
+
|
|
|
+ console.log('top渲染');
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className={styles.topnavigator}>
|
|
|
+ <div className={styles.floor}>
|
|
|
+ <Select
|
|
|
+ options={buildList}
|
|
|
+ placeholder="楼栋"
|
|
|
+ value={currentBuild}
|
|
|
+ onChange={changBuildHandle}
|
|
|
+ size="large"
|
|
|
+ dropdownMatchSelectWidth={true}
|
|
|
+ style={{ width: '100%' }}
|
|
|
+ bordered={false}
|
|
|
+ // labelInValue={true}
|
|
|
+ // fieldNames={{ label: 'name', value: 'id' }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div className={styles.floor}>
|
|
|
+ <Select
|
|
|
+ options={floorList}
|
|
|
+ placeholder="楼层"
|
|
|
+ value={currentFloor}
|
|
|
+ onChange={changFloorHandle}
|
|
|
+ size="large"
|
|
|
+ dropdownMatchSelectWidth={true}
|
|
|
+ style={{ width: '100%' }}
|
|
|
+ bordered={false}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div className={styles.navigator}>
|
|
|
+ {navigatorList.map((item, index) => {
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ className={cx(styles.navItem, { [styles.sel]: item.id === selParamObj.id })}
|
|
|
+ style={{
|
|
|
+ borderBottom:
|
|
|
+ item.id === selParamObj.id ? `3px solid ${item.color}` : '3px solid #ffffff',
|
|
|
+ }}
|
|
|
+ key={'nav' + index}
|
|
|
+ onClick={() => {
|
|
|
+ itemClick(item);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <img src={item.src} style={{ height: 20 }}></img>
|
|
|
+ <div className={styles.text}>{item.name}</div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ {type === 'enviroment' && (
|
|
|
+ <div className={styles.right}>
|
|
|
+ <div className={styles.firstLine} style={{ color: selParamObj.color }}>
|
|
|
+ <span className={styles.value}>{selParamObj.num}</span>{' '}
|
|
|
+ <span className={styles.unit}>{selParamObj.unit}</span>
|
|
|
+ </div>
|
|
|
+ <div className={styles.text}>当前楼层平均{selParamObj.name}</div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ {type === 'equipment' && action}
|
|
|
+ {type === 'runtime' && action}
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+export default TopNavigator;
|