index.tsx 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. // 设备管理 导航条的右侧
  2. import React, { useState, useEffect } from 'react';
  3. import { Dropdown, Menu, Modal, message } from 'antd';
  4. import Icon from '@/tenants-ui/Icon';
  5. import { EllipsisOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
  6. import styles from './index.less';
  7. //import { equipImageMap } from '@/config/image.js';
  8. import type { navigatorItem } from '@/pages/Environment/index';
  9. import { projectId } from '@/config/api.js';
  10. import { changeCurtain, changeAllAir, changeLight } from '@/pages/Equipment/equipmentControl';
  11. export type topNavRightProps = {
  12. selNavObj: navigatorItem;
  13. navigatorList: navigatorItem[];
  14. mapList: API.MapInfo[];
  15. queryDeviceManage: () => Promise<any>;
  16. };
  17. const TopNavRight: React.FC<topNavRightProps> = ({
  18. selNavObj,
  19. navigatorList,
  20. mapList,
  21. queryDeviceManage,
  22. }) => {
  23. //const [modalvisible, setModalvisible] = useState<boolean>(false);
  24. //去掉全部设备的 设备列表
  25. const [deviceList, setDeviceList] = useState<navigatorItem[]>([]);
  26. useEffect(() => {
  27. setDeviceList(navigatorList.slice(1));
  28. }, []);
  29. const allOpenClick = (key) => {
  30. //debugger;
  31. console.log('key', key);
  32. confirm({
  33. title: '请确认',
  34. icon: <ExclamationCircleOutlined />,
  35. content: `确认要全部开启${selNavObj.name}吗?`,
  36. okText: '确认',
  37. cancelText: '取消',
  38. onOk() {
  39. console.log('mapListmapList', mapList);
  40. //筛选 没有开启的空间
  41. var filterSpaceArr = mapList.filter((item) => {
  42. return item[selNavObj.id] == 0;
  43. });
  44. var filterSpaceArr2 = mapList.filter((item) => {
  45. return item.localName == '上格云3' || item.localName == '上格云休闲区';
  46. });
  47. console.log('开启filterSpaceArr', filterSpaceArr2);
  48. var flag = 1;
  49. //现在加上循环调用 所以把查询关了
  50. function getDeviceStatus() {
  51. // flag = flag + 1;
  52. // queryDeviceManage().then((res) => {
  53. // if (flag < 13) {
  54. // setTimeout(() => {
  55. // getDeviceStatus();
  56. // }, 800);
  57. // } else {
  58. // flag = 1;
  59. // }
  60. // });
  61. }
  62. //如果是空调
  63. if (filterSpaceArr.length == 0) return;
  64. if (selNavObj.id == 'airConditioner') {
  65. changeAllAir(filterSpaceArr, getDeviceStatus, '打开', projectId);
  66. }
  67. if (selNavObj.id == 'light') {
  68. changeLight('all', filterSpaceArr, getDeviceStatus, '打开');
  69. }
  70. if (selNavObj.id == 'curtain') {
  71. changeCurtain('all', filterSpaceArr, getDeviceStatus, '打开'); // '关闭' : '打开';
  72. }
  73. },
  74. onCancel() {
  75. //console.log('Cancel');
  76. },
  77. });
  78. };
  79. const { confirm } = Modal;
  80. const allCloseClick = () => {
  81. console.log('showModal');
  82. // setModalvisible(true);
  83. confirm({
  84. title: '请确认',
  85. icon: <ExclamationCircleOutlined />,
  86. content: `确认要全部关闭${selNavObj.name}吗?`,
  87. okText: '确认',
  88. cancelText: '取消',
  89. onOk() {
  90. var filterSpaceArr = mapList.filter((item) => {
  91. return item[selNavObj.id] == 1 || item[selNavObj.id] == 2;
  92. });
  93. var filterSpaceArr2 = mapList.filter((item) => {
  94. return item.localName == '上格云3' || item.localName == '上格云休闲区';
  95. });
  96. console.log('关闭filterSpaceArr', filterSpaceArr);
  97. var flag = 1;
  98. function getDeviceStatus() {
  99. // flag = flag + 1;
  100. // queryDeviceManage().then((res) => {
  101. // if (flag < 13) {
  102. // setTimeout(() => {
  103. // getDeviceStatus();
  104. // }, 800);
  105. // } else {
  106. // flag = 1;
  107. // }
  108. // });
  109. }
  110. //如果是空调
  111. if (selNavObj.id == 'airConditioner') {
  112. changeAllAir(filterSpaceArr, getDeviceStatus, '关闭', projectId);
  113. }
  114. if (selNavObj.id == 'light') {
  115. changeLight('all', filterSpaceArr, getDeviceStatus, '关闭');
  116. }
  117. if (selNavObj.id == 'curtain') {
  118. changeCurtain('all', filterSpaceArr, getDeviceStatus, '关闭');
  119. }
  120. },
  121. onCancel() {
  122. //console.log('Cancel');
  123. },
  124. });
  125. };
  126. return (
  127. <>
  128. {/* 全部设备 */}
  129. {selNavObj.id === 'all' && (
  130. <div className={styles.right}>
  131. <div className={styles.title}>运行中的设备</div>
  132. <div className={styles.allList}>
  133. {deviceList.map(function (litem, index) {
  134. return (
  135. <div className={styles.item} key={'run' + index}>
  136. <img src={litem.src} style={{ height: 20 }}></img>
  137. <div className={styles.num}>{litem.num}</div>
  138. </div>
  139. );
  140. })}
  141. </div>
  142. </div>
  143. )}
  144. {/* 设备 */}
  145. {selNavObj.id !== 'all' && (
  146. <div className={styles.right}>
  147. <div className={styles.title}>运行中的设备</div>
  148. <div className={styles.onlyNum}>{selNavObj.num}</div>
  149. <div className={styles.closeButton} onClick={allCloseClick}>
  150. {/* <Button type="primary" size={'large'} icon={<Icon type="closeall" style={{color:'red',fontSize:20}} />} style={{'background':'rgba(196, 196, 196, 0.2)',border:'none'}} >
  151. 全部关闭
  152. </Button> */}
  153. <Icon className="" type="closeall" style={{ fontSize: 20 }} />
  154. <span className={styles.text}>全部关闭</span>
  155. </div>
  156. <div className={styles.moreWrap}>
  157. {/* ...下拉菜单 */}
  158. <Dropdown
  159. trigger="click"
  160. placement="bottomLeft"
  161. overlay={
  162. <Menu style={{ width: 160 }} onClick={({ key }) => allOpenClick(key)}>
  163. <Menu.Item key="open">全部开启</Menu.Item>
  164. </Menu>
  165. }
  166. >
  167. <span className={styles.trigger}>
  168. <EllipsisOutlined style={{ fontSize: 20 }} />
  169. </span>
  170. </Dropdown>
  171. </div>
  172. </div>
  173. )}
  174. {/* <Modal
  175. title="确认"
  176. visible={modalvisible}
  177. onOk={hideModal}
  178. onCancel={hideModal}
  179. okText="确认"
  180. cancelText="取消"
  181. >
  182. <p>确定全部开启吗</p>
  183. </Modal> */}
  184. </>
  185. );
  186. };
  187. export default TopNavRight;