index.tsx 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. import React, { useState, useEffect, useCallback, useRef } from 'react';
  2. import styles from './index.less';
  3. import cx from 'classnames';
  4. import { Select } from 'antd';
  5. import type { navigatorItem } from '@/pages/Environment/index';
  6. import { getBuildingList, getFloorList } from '@/services/sagacare_service/environment';
  7. import { projectObj } from '@/config/api.js';
  8. import { useModel } from 'umi';
  9. import UserStorage from '@/config/sagacare/sagacare_user';
  10. export type topNavigatorProps = {
  11. navigatorList?: navigatorItem[];
  12. type: string;
  13. navigatorChange?: (item: navigatorItem) => void;
  14. // action?: React.ReactElement<topNavRightProps>[];
  15. action?: React.ReactNode;
  16. changeFloorId?: (data: string) => void;
  17. changeBuildId?: (data: string) => void;
  18. selParamObj?: any;
  19. };
  20. type floorItem = {
  21. value: string;
  22. [key: string]: any;
  23. };
  24. type buildItem = {
  25. value: string;
  26. [key: string]: any;
  27. };
  28. const TopNavigator: React.FC<topNavigatorProps> = ({
  29. navigatorList = [],
  30. type,
  31. navigatorChange,
  32. action,
  33. changeFloorId,
  34. changeBuildId,
  35. selParamObj,
  36. }) => {
  37. //存储的 搜索到空间的buildingId floorId
  38. const { searchBuildId, searchFloorId } = useModel('sagacare_searchInfo');
  39. const { lastBuildId, lastFloorId, changeLastBuildId, changeLastFloorId } =
  40. useModel('sagacare_buildFloor');
  41. const [buildList, setBuildList] = useState<buildItem[]>([]);
  42. const [currentBuild, setCurrentBuild] = useState<string>();
  43. const [floorList, setFloorList] = useState<floorItem[]>([]);
  44. const [currentFloor, setCurrentFloor] = useState<string>();
  45. //则监听searchBuildId的改变 如果buildingId改变 请求楼层列表
  46. useEffect(() => {
  47. if (searchBuildId && searchFloorId) {
  48. if (searchBuildId !== currentBuild) {
  49. //如果搜索的buildId 改变
  50. setCurrentBuild(searchBuildId);
  51. } else {
  52. //如果搜索的buildId 没改变 floorId 改变了
  53. //为了 显示楼层选择
  54. setCurrentFloor(searchFloorId);
  55. //父亲的floorId
  56. //这块 其实只有楼层id改变时调用 建筑id 改变时不调用
  57. changeFloorId && changeFloorId(searchFloorId);
  58. }
  59. }
  60. }, [searchBuildId, searchFloorId]);
  61. //请求建筑的接口
  62. useEffect(() => {
  63. var userObj = UserStorage.getInstance();
  64. const user = userObj.getUser();
  65. console.log('TopNavigator----getBuildingList', user, projectObj.projectId);
  66. if (buildList.length == 0) {
  67. getBuildingList({
  68. criteria: {
  69. projectId: projectObj.projectId,
  70. },
  71. orders: [
  72. {
  73. column: 'localId',
  74. asc: true,
  75. },
  76. ],
  77. }).then((res) => {
  78. var resData = res.content || [];
  79. setBuildList(
  80. (resData || []).map((item) => {
  81. return { label: item.localName, value: item.id };
  82. }),
  83. );
  84. setCurrentBuild(lastBuildId || (resData[0] || {}).id); //设置第一个建筑值
  85. //changeBuildId && changeBuildId(lastBuildId || (resData[0] || {}).id);
  86. });
  87. }
  88. }, []);
  89. //请求楼层列表的接口
  90. useEffect(() => {
  91. async function asyncFunction() {
  92. var res = await getFloorList({
  93. criteria: {
  94. buildingId: currentBuild,
  95. },
  96. orders: [
  97. {
  98. column: 'localId',
  99. asc: true,
  100. },
  101. ],
  102. });
  103. var resData = res.content || [];
  104. setFloorList(
  105. (resData || []).map((item) => {
  106. return { label: item.localName, value: item.id };
  107. }),
  108. );
  109. //如果最后选中的
  110. var lastFilter = resData.filter((item) => {
  111. return item.id == lastFloorId;
  112. });
  113. var lastFloorIdTemp = '';
  114. if (lastFilter.length > 0) {
  115. lastFloorIdTemp = lastFloorId;
  116. }
  117. setCurrentFloor(searchFloorId || lastFloorIdTemp || (resData[0] || {}).id); //如果有搜索的楼层id 则用搜索的结果
  118. changeFloorId && changeFloorId(searchFloorId || lastFloorIdTemp || (resData[0] || {}).id); //改变父组件的floorId的值
  119. }
  120. if (currentBuild) {
  121. changeLastBuildId(currentBuild);
  122. asyncFunction();
  123. }
  124. //console.log('currentBuild22', currentBuild);
  125. return () => {
  126. //console.log('currentBuild111', currentBuild);
  127. };
  128. }, [currentBuild]);
  129. // useEffect(() => {
  130. // //为了 显示楼层选择
  131. // if (floorList.length > 0) {
  132. // debugger;
  133. // setCurrentFloor(searchFloorId || lastFloorId || (floorList[0] || {}).value); //如果有搜索的楼层id 则用搜索的结果
  134. // changeFloorId && changeFloorId(searchFloorId || lastFloorId || (floorList[0] || {}).value); //改变父组件的floorId的值
  135. // }
  136. // }, [floorList]);
  137. const changBuildHandle = useCallback((val) => {
  138. //显示的建筑改变
  139. setCurrentBuild(val);
  140. //父亲的buildId改变
  141. //changeBuildId && changeBuildId(val);
  142. }, []);
  143. const changFloorHandle = useCallback((val) => {
  144. setCurrentFloor(val);
  145. changeFloorId && changeFloorId(val);
  146. }, []);
  147. //当前切换导航条时
  148. const itemClick = (item: navigatorItem) => {
  149. //console.log('itemclick', item);
  150. navigatorChange && navigatorChange(item);
  151. };
  152. return (
  153. <div className={styles.topnavigator}>
  154. <div className={styles.floor}>
  155. <Select
  156. options={buildList}
  157. placeholder="楼栋"
  158. value={currentBuild}
  159. onChange={changBuildHandle}
  160. size="large"
  161. dropdownMatchSelectWidth={true}
  162. style={{ width: '100%' }}
  163. bordered={false}
  164. // labelInValue={true}
  165. // fieldNames={{ label: 'name', value: 'id' }}
  166. />
  167. </div>
  168. <div className={styles.floor}>
  169. <Select
  170. options={floorList}
  171. placeholder="楼层"
  172. value={currentFloor}
  173. onChange={changFloorHandle}
  174. size="large"
  175. dropdownMatchSelectWidth={true}
  176. style={{ width: '100%' }}
  177. bordered={false}
  178. />
  179. </div>
  180. <div className={styles.navigator}>
  181. {navigatorList.map((item, index) => {
  182. return (
  183. <div
  184. className={cx(styles.navItem, { [styles.sel]: item.id === selParamObj.id })}
  185. style={{
  186. borderBottom:
  187. item.id === selParamObj.id ? `3px solid ${item.color}` : '3px solid #fff',
  188. }}
  189. key={'nav' + index}
  190. onClick={() => {
  191. itemClick(item);
  192. }}
  193. >
  194. <img src={item.src} style={{ height: 20 }}></img>
  195. <div className={styles.text}>{item.name}</div>
  196. </div>
  197. );
  198. })}
  199. </div>
  200. {type === 'enviroment' && (
  201. <div className={styles.right}>
  202. <div className={styles.firstLine} style={{ color: selParamObj.color }}>
  203. <span className={styles.value}>{selParamObj.avgValues}</span>
  204. <span className={styles.unit}>{selParamObj.unit}</span>
  205. </div>
  206. <div className={styles.text}>
  207. 当前楼层平均{selParamObj.name}
  208. {selParamObj.id == 'CO2' || selParamObj.id == 'PM2d5' || selParamObj.id == 'HCHO'
  209. ? '浓度'
  210. : ''}
  211. </div>
  212. </div>
  213. )}
  214. {type === 'equipment' && action}
  215. {type === 'runtime' && action}
  216. </div>
  217. );
  218. };
  219. export default TopNavigator;