index.tsx 8.8 KB

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