123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104 |
- // 设备管理 导航条的右侧
- import React, { useState, useEffect } from 'react';
- import { Dropdown, Menu, Modal } from 'antd';
- import Icon from '@/tenants-ui/Icon';
- import { EllipsisOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
- import styles from './index.less';
- //import { equipImageMap } from '@/config/image.js';
- import type { navigatorItem } from '@/pages/Environment/index';
- export type topNavRightProps = {
- selNavObj: navigatorItem;
- navigatorList: navigatorItem[];
- };
- const TopNavRight: React.FC<topNavRightProps> = ({ selNavObj, navigatorList }) => {
- // const { equip_air, equip_lamp, equip_water } = equipImageMap;
- const [modalvisible, setModalvisible] = useState<boolean>(false);
- const [allList, setAllList] = useState<navigatorItem[]>([]);
- useEffect(() => {
- setAllList(navigatorList.slice(1));
- }, []);
- const menuClick = (key) => {
- console.log('key', key);
- };
- const showModal = () => {
- console.log('showModal');
- // setModalvisible(true);
- Modal.confirm({
- title: '',
- icon: <ExclamationCircleOutlined />,
- content: '确认全部关闭吗?',
- okText: '确认',
- cancelText: '取消',
- });
- };
- const hideModal = () => {
- console.log('hideModal');
- //setModalvisible(false);
- };
- return (
- <>
- {/* 全部设备 */}
- {selNavObj.id === 'all' && (
- <div className={styles.right}>
- <div className={styles.title}>运行中的设备</div>
- <div className={styles.allList}>
- {allList.map(function (litem, index) {
- return (
- <div className={styles.item} key={'run' + index}>
- <img src={litem.src} style={{ height: 20 }}></img>
- <div className={styles.num}>{litem.num}</div>
- </div>
- );
- })}
- </div>
- </div>
- )}
- {/* 设备 */}
- {selNavObj.id !== 'all' && (
- <div className={styles.right}>
- <div className={styles.title}>运行中的设备</div>
- <div className={styles.onlyNum}>{selNavObj.num}</div>
- <div className={styles.closeButton} onClick={showModal}>
- {/* <Button type="primary" size={'large'} icon={<Icon type="closeall" style={{color:'red',fontSize:20}} />} style={{'background':'rgba(196, 196, 196, 0.2)',border:'none'}} >
- 全部关闭
- </Button> */}
- <Icon className="" type="closeall" style={{ fontSize: 20 }} />
- <span className={styles.text}>全部关闭</span>
- </div>
- <div className={styles.moreWrap}>
- {/* ...下拉菜单 */}
- <Dropdown
- trigger="click"
- placement="bottomLeft"
- overlay={
- <Menu style={{ width: 160 }} onClick={({ key }) => menuClick(key)}>
- <Menu.Item key="open">全部开启</Menu.Item>
- </Menu>
- }
- >
- <span className={styles.trigger}>
- <EllipsisOutlined style={{ fontSize: 20 }} />
- </span>
- </Dropdown>
- </div>
- </div>
- )}
- {/* <Modal
- title="确认"
- visible={modalvisible}
- onOk={hideModal}
- onCancel={hideModal}
- okText="确认"
- cancelText="取消"
- >
- <p>确定全部开启吗</p>
- </Modal> */}
- </>
- );
- };
- export default TopNavRight;
|