index.tsx 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. import React, { useState, useEffect, useCallback, useMemo } 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. seasonType?: any;
  20. };
  21. type floorItem = {
  22. value: string;
  23. [key: string]: any;
  24. };
  25. type buildItem = {
  26. value: string;
  27. [key: string]: any;
  28. };
  29. const TopNavigator: React.FC<topNavigatorProps> = ({
  30. navigatorList = [],
  31. type,
  32. navigatorChange,
  33. action,
  34. changeFloorId,
  35. changeBuildId,
  36. selParamObj,
  37. seasonType,
  38. }) => {
  39. //存储的 搜索到空间的buildingId floorId
  40. const { searchBuildId, searchFloorId } = useModel('sagacare_searchInfo');
  41. const { lastBuildId, lastFloorId, changeLastBuildId, changeLastFloorId } =
  42. useModel('sagacare_buildFloor');
  43. const [buildList, setBuildList] = useState<buildItem[]>([]);
  44. const [currentBuild, setCurrentBuild] = useState<string>();
  45. const [floorList, setFloorList] = useState<floorItem[]>([]);
  46. const [currentFloor, setCurrentFloor] = useState<string>();
  47. //则监听searchBuildId的改变 如果buildingId改变 请求楼层列表
  48. useEffect(() => {
  49. if (searchBuildId && searchFloorId) {
  50. if (searchBuildId !== currentBuild) {
  51. //如果搜索的buildId 改变
  52. setCurrentBuild(searchBuildId);
  53. } else {
  54. //如果搜索的buildId 没改变 floorId 改变了
  55. //为了 显示楼层选择
  56. setCurrentFloor(searchFloorId);
  57. //父亲的floorId
  58. //这块 其实只有楼层id改变时调用 建筑id 改变时不调用
  59. changeFloorId && changeFloorId(searchFloorId);
  60. }
  61. }
  62. }, [searchBuildId, searchFloorId]);
  63. var levelObj = useMemo(() => {
  64. let level = 0;
  65. let levelTxt = '';
  66. if (type === 'enviroment') {
  67. var tdbParam = {
  68. Cooling: {
  69. range: [22, 26],
  70. text: ['偏冷', '舒适', '偏热'],
  71. },
  72. Warm: {
  73. range: [18, 24],
  74. text: ['偏冷', '舒适', '偏热'],
  75. },
  76. Transition: {
  77. range: [18, 26],
  78. text: ['偏冷', '舒适', '偏热'],
  79. },
  80. };
  81. let objList = {
  82. Tdb: tdbParam[seasonType],
  83. RH: {
  84. range: [30, 70],
  85. text: ['干燥', '健康', '潮湿'],
  86. },
  87. CO2: {
  88. range: [800, 1000, 1500],
  89. text: ['健康', '达标', '略高', '超标'],
  90. },
  91. PM2d5: {
  92. range: [35, 75, 115, 150, 250],
  93. text: ['健康', '良', '轻度污染', '中度污染', '重度污染', '严重污染'],
  94. },
  95. HCHO: {
  96. range: [0.1],
  97. text: ['健康', '超标'],
  98. },
  99. };
  100. let sortArr = [selParamObj.avgValues, ...objList[selParamObj.id].range].sort((a, b) => {
  101. return a - b;
  102. });
  103. level = sortArr.findIndex((item) => item === selParamObj.avgValues);
  104. levelTxt = objList[selParamObj.id].text[level];
  105. }
  106. return { level, levelTxt };
  107. }, [selParamObj, seasonType]);
  108. //请求建筑的接口
  109. useEffect(() => {
  110. var userObj = UserStorage.getInstance();
  111. const user = userObj.getUser();
  112. console.log('TopNavigator----getBuildingList', user, projectObj.projectId);
  113. if (buildList.length == 0) {
  114. getBuildingList({
  115. criteria: {
  116. projectId: projectObj.projectId,
  117. },
  118. orders: [
  119. {
  120. column: 'localId',
  121. asc: true,
  122. },
  123. ],
  124. }).then((res) => {
  125. var resData = res.content || [];
  126. setBuildList(
  127. (resData || []).map((item) => {
  128. return { label: item.localName, value: item.id };
  129. }),
  130. );
  131. setCurrentBuild(lastBuildId || (resData[0] || {}).id); //设置第一个建筑值
  132. //changeBuildId && changeBuildId(lastBuildId || (resData[0] || {}).id);
  133. });
  134. }
  135. }, []);
  136. //请求楼层列表的接口
  137. useEffect(() => {
  138. async function asyncFunction() {
  139. var res = await getFloorList({
  140. criteria: {
  141. buildingId: currentBuild,
  142. },
  143. orders: [
  144. {
  145. column: 'localId',
  146. asc: true,
  147. },
  148. ],
  149. });
  150. var resData = res.content || [];
  151. setFloorList(
  152. (resData || []).map((item) => {
  153. return { label: item.localName, value: item.id };
  154. }),
  155. );
  156. //如果最后选中的
  157. var lastFilter = resData.filter((item) => {
  158. return item.id == lastFloorId;
  159. });
  160. var lastFloorIdTemp = '';
  161. if (lastFilter.length > 0) {
  162. lastFloorIdTemp = lastFloorId;
  163. }
  164. setCurrentFloor(searchFloorId || lastFloorIdTemp || (resData[0] || {}).id); //如果有搜索的楼层id 则用搜索的结果
  165. changeFloorId && changeFloorId(searchFloorId || lastFloorIdTemp || (resData[0] || {}).id); //改变父组件的floorId的值
  166. }
  167. if (currentBuild) {
  168. changeLastBuildId(currentBuild);
  169. asyncFunction();
  170. }
  171. //console.log('currentBuild22', currentBuild);
  172. return () => {
  173. //console.log('currentBuild111', currentBuild);
  174. };
  175. }, [currentBuild]);
  176. // useEffect(() => {
  177. // //为了 显示楼层选择
  178. // if (floorList.length > 0) {
  179. // debugger;
  180. // setCurrentFloor(searchFloorId || lastFloorId || (floorList[0] || {}).value); //如果有搜索的楼层id 则用搜索的结果
  181. // changeFloorId && changeFloorId(searchFloorId || lastFloorId || (floorList[0] || {}).value); //改变父组件的floorId的值
  182. // }
  183. // }, [floorList]);
  184. const changBuildHandle = useCallback((val) => {
  185. //显示的建筑改变
  186. setCurrentBuild(val);
  187. //父亲的buildId改变
  188. //changeBuildId && changeBuildId(val);
  189. }, []);
  190. const changFloorHandle = useCallback((val) => {
  191. setCurrentFloor(val);
  192. changeFloorId && changeFloorId(val);
  193. }, []);
  194. //当前切换导航条时
  195. const itemClick = (item: navigatorItem) => {
  196. //console.log('itemclick', item);
  197. navigatorChange && navigatorChange(item);
  198. };
  199. return (
  200. <div className={styles.topnavigator}>
  201. <div className={styles.floor}>
  202. <Select
  203. options={buildList}
  204. placeholder="楼栋"
  205. value={currentBuild}
  206. onChange={changBuildHandle}
  207. size="large"
  208. dropdownMatchSelectWidth={true}
  209. style={{ width: '100%' }}
  210. bordered={false}
  211. // labelInValue={true}
  212. // fieldNames={{ label: 'name', value: 'id' }}
  213. />
  214. </div>
  215. <div className={styles.floor}>
  216. <Select
  217. options={floorList}
  218. placeholder="楼层"
  219. value={currentFloor}
  220. onChange={changFloorHandle}
  221. size="large"
  222. dropdownMatchSelectWidth={true}
  223. style={{ width: '100%' }}
  224. bordered={false}
  225. />
  226. </div>
  227. <div className={styles.navigator}>
  228. {navigatorList.map((item, index) => {
  229. return (
  230. <div
  231. className={cx(styles.navItem, { [styles.sel]: item.id === selParamObj.id })}
  232. style={{
  233. borderBottom:
  234. item.id === selParamObj.id ? `3px solid ${item.color}` : '3px solid #fff',
  235. }}
  236. key={'nav' + index}
  237. onClick={() => {
  238. itemClick(item);
  239. }}
  240. >
  241. <img src={item.src} style={{ height: 20 }}></img>
  242. <div className={styles.text}>{item.name}</div>
  243. </div>
  244. );
  245. })}
  246. </div>
  247. {type === 'enviroment' && (
  248. <div className={styles.right}>
  249. <div className={styles.firstLine} style={{ color: selParamObj.color }}>
  250. <span className={styles.value}>{selParamObj.avgValues}</span>
  251. <sup className={styles.unit}>{selParamObj.unit}</sup>
  252. <span className={styles.line}></span>
  253. <span className={styles.level}>{levelObj.levelTxt}</span>
  254. </div>
  255. <div className={styles.text}>
  256. 当前楼层平均{selParamObj.name}
  257. {selParamObj.id == 'CO2' || selParamObj.id == 'PM2d5' || selParamObj.id == 'HCHO'
  258. ? '浓度'
  259. : ''}
  260. </div>
  261. </div>
  262. )}
  263. {type === 'equipment' && action}
  264. {type === 'runtime' && action}
  265. </div>
  266. );
  267. };
  268. export default TopNavigator;