index.tsx 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  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] !== 1;
  43. // });
  44. var filterSpaceArr2 = mapList.filter((item) => {
  45. return item.localName == '火卫一' || item.localName == '火卫二';
  46. });
  47. console.log('开启filterSpaceArr', filterSpaceArr2);
  48. var flag = 1;
  49. function getDeviceStatus() {
  50. flag = flag + 1;
  51. queryDeviceManage().then((res) => {
  52. if (flag < 13) {
  53. setTimeout(() => {
  54. getDeviceStatus();
  55. }, 800);
  56. } else {
  57. flag = 1;
  58. }
  59. });
  60. }
  61. //如果是空调
  62. //if (filterSpaceArr.length == 0) return;
  63. if (selNavObj.id == 'airConditioner') {
  64. changeAllAir(mapList, getDeviceStatus, '打开', projectId);
  65. }
  66. if (selNavObj.id == 'light') {
  67. changeLight('all', mapList, getDeviceStatus, '打开');
  68. }
  69. if (selNavObj.id == 'curtain') {
  70. changeCurtain('all', mapList, getDeviceStatus, '打开'); // '关闭' : '打开';
  71. }
  72. },
  73. onCancel() {
  74. //console.log('Cancel');
  75. },
  76. });
  77. };
  78. const { confirm } = Modal;
  79. const allCloseClick = () => {
  80. console.log('showModal');
  81. // setModalvisible(true);
  82. confirm({
  83. title: '请确认',
  84. icon: <ExclamationCircleOutlined />,
  85. content: `确认要全部关闭${selNavObj.name}吗?`,
  86. okText: '确认',
  87. cancelText: '取消',
  88. onOk() {
  89. // var filterSpaceArr = mapList.filter((item) => {
  90. // return item[selNavObj.id] !== 0;
  91. // });
  92. var filterSpaceArr2 = mapList.filter((item) => {
  93. return item.localName == '火卫一' || item.localName == '火卫二';
  94. });
  95. console.log('关闭filterSpaceArr', filterSpaceArr2);
  96. //return;
  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. // setTimeout(() => {
  110. // console.log('setTimeout');
  111. // clearInterval(interval);
  112. // }, 60000);
  113. }
  114. //如果是空调
  115. if (selNavObj.id == 'airConditioner') {
  116. changeAllAir(mapList, getDeviceStatus, '关闭', projectId);
  117. }
  118. if (selNavObj.id == 'light') {
  119. changeLight('all', mapList, getDeviceStatus, '关闭');
  120. }
  121. if (selNavObj.id == 'curtain') {
  122. changeCurtain('all', mapList, getDeviceStatus, '关闭');
  123. }
  124. },
  125. onCancel() {
  126. //console.log('Cancel');
  127. },
  128. });
  129. };
  130. return (
  131. <>
  132. {/* 全部设备 */}
  133. {selNavObj.id === 'all' && (
  134. <div className={styles.right}>
  135. <div className={styles.title}>运行中的设备</div>
  136. <div className={styles.allList}>
  137. {deviceList.map(function (litem, index) {
  138. return (
  139. <div className={styles.item} key={'run' + index}>
  140. <img src={litem.src} style={{ height: 20 }}></img>
  141. <div className={styles.num}>{litem.num}</div>
  142. </div>
  143. );
  144. })}
  145. </div>
  146. </div>
  147. )}
  148. {/* 设备 */}
  149. {selNavObj.id !== 'all' && (
  150. <div className={styles.right}>
  151. <div className={styles.title}>运行中的设备</div>
  152. <div className={styles.onlyNum}>{selNavObj.num}</div>
  153. <div className={styles.closeButton} onClick={allCloseClick}>
  154. {/* <Button type="primary" size={'large'} icon={<Icon type="closeall" style={{color:'red',fontSize:20}} />} style={{'background':'rgba(196, 196, 196, 0.2)',border:'none'}} >
  155. 全部关闭
  156. </Button> */}
  157. <Icon className="" type="closeall" style={{ fontSize: 20 }} />
  158. <span className={styles.text}>全部关闭</span>
  159. </div>
  160. <div className={styles.moreWrap}>
  161. {/* ...下拉菜单 */}
  162. <Dropdown
  163. trigger="click"
  164. placement="bottomLeft"
  165. overlay={
  166. <Menu style={{ width: 160 }} onClick={({ key }) => allOpenClick(key)}>
  167. <Menu.Item key="open">全部开启</Menu.Item>
  168. </Menu>
  169. }
  170. >
  171. <span className={styles.trigger}>
  172. <EllipsisOutlined style={{ fontSize: 20 }} />
  173. </span>
  174. </Dropdown>
  175. </div>
  176. </div>
  177. )}
  178. {/* <Modal
  179. title="确认"
  180. visible={modalvisible}
  181. onOk={hideModal}
  182. onCancel={hideModal}
  183. okText="确认"
  184. cancelText="取消"
  185. >
  186. <p>确定全部开启吗</p>
  187. </Modal> */}
  188. </>
  189. );
  190. };
  191. export default TopNavRight;