index.tsx 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. // 设备管理 导航条的右侧
  2. import React, { useState, useEffect } from 'react';
  3. import { Dropdown, Menu, Modal } 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. export type topNavRightProps = {
  10. selNavObj: navigatorItem;
  11. navigatorList: navigatorItem[];
  12. };
  13. const TopNavRight: React.FC<topNavRightProps> = ({ selNavObj, navigatorList }) => {
  14. // const { equip_air, equip_lamp, equip_water } = equipImageMap;
  15. const [modalvisible, setModalvisible] = useState<boolean>(false);
  16. const [allList, setAllList] = useState<navigatorItem[]>([]);
  17. useEffect(() => {
  18. setAllList(navigatorList.slice(1));
  19. }, []);
  20. const menuClick = (key) => {
  21. console.log('key', key);
  22. };
  23. const showModal = () => {
  24. console.log('showModal');
  25. // setModalvisible(true);
  26. Modal.confirm({
  27. title: '',
  28. icon: <ExclamationCircleOutlined />,
  29. content: '确认全部关闭吗?',
  30. okText: '确认',
  31. cancelText: '取消',
  32. });
  33. };
  34. const hideModal = () => {
  35. console.log('hideModal');
  36. //setModalvisible(false);
  37. };
  38. return (
  39. <>
  40. {/* 全部设备 */}
  41. {selNavObj.id === 'all' && (
  42. <div className={styles.right}>
  43. <div className={styles.title}>运行中的设备</div>
  44. <div className={styles.allList}>
  45. {allList.map(function (litem, index) {
  46. return (
  47. <div className={styles.item} key={'run' + index}>
  48. <img src={litem.src} style={{ height: 20 }}></img>
  49. <div className={styles.num}>{litem.num}</div>
  50. </div>
  51. );
  52. })}
  53. </div>
  54. </div>
  55. )}
  56. {/* 设备 */}
  57. {selNavObj.id !== 'all' && (
  58. <div className={styles.right}>
  59. <div className={styles.title}>运行中的设备</div>
  60. <div className={styles.onlyNum}>{selNavObj.num}</div>
  61. <div className={styles.closeButton} onClick={showModal}>
  62. {/* <Button type="primary" size={'large'} icon={<Icon type="closeall" style={{color:'red',fontSize:20}} />} style={{'background':'rgba(196, 196, 196, 0.2)',border:'none'}} >
  63. 全部关闭
  64. </Button> */}
  65. <Icon className="" type="closeall" style={{ fontSize: 20 }} />
  66. <span className={styles.text}>全部关闭</span>
  67. </div>
  68. <div className={styles.moreWrap}>
  69. {/* ...下拉菜单 */}
  70. <Dropdown
  71. trigger="click"
  72. placement="bottomLeft"
  73. overlay={
  74. <Menu style={{ width: 160 }} onClick={({ key }) => menuClick(key)}>
  75. <Menu.Item key="open">全部开启</Menu.Item>
  76. </Menu>
  77. }
  78. >
  79. <span className={styles.trigger}>
  80. <EllipsisOutlined style={{ fontSize: 20 }} />
  81. </span>
  82. </Dropdown>
  83. </div>
  84. </div>
  85. )}
  86. {/* <Modal
  87. title="确认"
  88. visible={modalvisible}
  89. onOk={hideModal}
  90. onCancel={hideModal}
  91. okText="确认"
  92. cancelText="取消"
  93. >
  94. <p>确定全部开启吗</p>
  95. </Modal> */}
  96. </>
  97. );
  98. };
  99. export default TopNavRight;