index.tsx 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  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 { useModel } from 'umi';
  10. import { changeCurtain, changeAllAir, changeLight } from '@/pages/Equipment/equipmentControl.js';
  11. export type topNavRightProps = {
  12. selNavObj: navigatorItem;
  13. navigatorList: navigatorItem[];
  14. mapList: API.MapInfo[];
  15. };
  16. const TopNavRight: React.FC<topNavRightProps> = ({ selNavObj, navigatorList, mapList }) => {
  17. //const [modalvisible, setModalvisible] = useState<boolean>(false);
  18. //去掉全部设备的 设备列表
  19. const { projectId } = useModel('spaceFunc');
  20. const [deviceList, setDeviceList] = useState<navigatorItem[]>([]);
  21. useEffect(() => {
  22. setDeviceList(navigatorList.slice(1));
  23. }, []);
  24. const allOpenClick = (key) => {
  25. //debugger;
  26. console.log('key', key);
  27. confirm({
  28. title: '请确认',
  29. icon: <ExclamationCircleOutlined />,
  30. content: `确认要全部开启${selNavObj.name}吗?`,
  31. okText: '确认',
  32. cancelText: '取消',
  33. onOk() {
  34. console.log('mapListmapList', mapList);
  35. //筛选 没有开启的空间
  36. var filterSpaceArr = mapList.filter((item) => {
  37. return item[selNavObj.id] !== 1;
  38. });
  39. return;
  40. //如果是空调
  41. if (selNavObj.id == 'airConditioner') {
  42. changeAllAir(filterSpaceArr, () => {}, '打开');
  43. }
  44. if (selNavObj.id == 'light') {
  45. changeLight('all', filterSpaceArr, () => {}, '打开');
  46. }
  47. if (selNavObj.id == 'curtain') {
  48. changeCurtain('all', filterSpaceArr, () => {}, '打开'); // '关闭' : '打开';
  49. }
  50. },
  51. onCancel() {
  52. //console.log('Cancel');
  53. },
  54. });
  55. };
  56. const { confirm } = Modal;
  57. const allCloseClick = () => {
  58. console.log('showModal');
  59. // setModalvisible(true);
  60. confirm({
  61. title: '请确认',
  62. icon: <ExclamationCircleOutlined />,
  63. content: `确认要全部关闭${selNavObj.name}吗?`,
  64. okText: '确认',
  65. cancelText: '取消',
  66. onOk() {
  67. var filterSpaceArr = mapList.filter((item) => {
  68. return item[selNavObj.id] !== 0;
  69. });
  70. return;
  71. //如果是空调
  72. if (selNavObj.id == 'airConditioner') {
  73. changeAllAir(filterSpaceArr, () => {}, '打开');
  74. }
  75. if (selNavObj.id == 'light') {
  76. changeLight('all', filterSpaceArr, () => {}, '关闭');
  77. }
  78. if (selNavObj.id == 'curtain') {
  79. changeCurtain('all', filterSpaceArr, () => {}, '关闭');
  80. }
  81. },
  82. onCancel() {
  83. //console.log('Cancel');
  84. },
  85. });
  86. };
  87. return (
  88. <>
  89. {/* 全部设备 */}
  90. {selNavObj.id === 'all' && (
  91. <div className={styles.right}>
  92. <div className={styles.title}>运行中的设备</div>
  93. <div className={styles.allList}>
  94. {deviceList.map(function (litem, index) {
  95. return (
  96. <div className={styles.item} key={'run' + index}>
  97. <img src={litem.src} style={{ height: 20 }}></img>
  98. <div className={styles.num}>{litem.num}</div>
  99. </div>
  100. );
  101. })}
  102. </div>
  103. </div>
  104. )}
  105. {/* 设备 */}
  106. {selNavObj.id !== 'all' && (
  107. <div className={styles.right}>
  108. <div className={styles.title}>运行中的设备</div>
  109. <div className={styles.onlyNum}>{selNavObj.num}</div>
  110. <div className={styles.closeButton} onClick={allCloseClick}>
  111. {/* <Button type="primary" size={'large'} icon={<Icon type="closeall" style={{color:'red',fontSize:20}} />} style={{'background':'rgba(196, 196, 196, 0.2)',border:'none'}} >
  112. 全部关闭
  113. </Button> */}
  114. <Icon className="" type="closeall" style={{ fontSize: 20 }} />
  115. <span className={styles.text}>全部关闭</span>
  116. </div>
  117. <div className={styles.moreWrap}>
  118. {/* ...下拉菜单 */}
  119. <Dropdown
  120. trigger="click"
  121. placement="bottomLeft"
  122. overlay={
  123. <Menu style={{ width: 160 }} onClick={({ key }) => allOpenClick(key)}>
  124. <Menu.Item key="open">全部开启</Menu.Item>
  125. </Menu>
  126. }
  127. >
  128. <span className={styles.trigger}>
  129. <EllipsisOutlined style={{ fontSize: 20 }} />
  130. </span>
  131. </Dropdown>
  132. </div>
  133. </div>
  134. )}
  135. {/* <Modal
  136. title="确认"
  137. visible={modalvisible}
  138. onOk={hideModal}
  139. onCancel={hideModal}
  140. okText="确认"
  141. cancelText="取消"
  142. >
  143. <p>确定全部开启吗</p>
  144. </Modal> */}
  145. </>
  146. );
  147. };
  148. export default TopNavRight;