123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155 |
- // 设备管理 导航条的右侧
- import React, { useState, useEffect } from 'react';
- import { Dropdown, Menu, Modal, message } 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';
- import { useModel } from 'umi';
- import { changeCurtain, changeAllAir, changeLight } from '@/pages/Equipment/equipmentControl.js';
- export type topNavRightProps = {
- selNavObj: navigatorItem;
- navigatorList: navigatorItem[];
- mapList: API.MapInfo[];
- };
- const TopNavRight: React.FC<topNavRightProps> = ({ selNavObj, navigatorList, mapList }) => {
- //const [modalvisible, setModalvisible] = useState<boolean>(false);
- //去掉全部设备的 设备列表
- const { projectId } = useModel('spaceFunc');
- const [deviceList, setDeviceList] = useState<navigatorItem[]>([]);
- useEffect(() => {
- setDeviceList(navigatorList.slice(1));
- }, []);
- const allOpenClick = (key) => {
- //debugger;
- console.log('key', key);
- confirm({
- title: '请确认',
- icon: <ExclamationCircleOutlined />,
- content: `确认要全部开启${selNavObj.name}吗?`,
- okText: '确认',
- cancelText: '取消',
- onOk() {
- console.log('mapListmapList', mapList);
- //筛选 没有开启的空间
- var filterSpaceArr = mapList.filter((item) => {
- return item[selNavObj.id] !== 1;
- });
- return;
- //如果是空调
- if (selNavObj.id == 'airConditioner') {
- changeAllAir(filterSpaceArr, () => {}, '打开');
- }
- if (selNavObj.id == 'light') {
- changeLight('all', filterSpaceArr, () => {}, '打开');
- }
- if (selNavObj.id == 'curtain') {
- changeCurtain('all', filterSpaceArr, () => {}, '打开'); // '关闭' : '打开';
- }
- },
- onCancel() {
- //console.log('Cancel');
- },
- });
- };
- const { confirm } = Modal;
- const allCloseClick = () => {
- console.log('showModal');
- // setModalvisible(true);
- confirm({
- title: '请确认',
- icon: <ExclamationCircleOutlined />,
- content: `确认要全部关闭${selNavObj.name}吗?`,
- okText: '确认',
- cancelText: '取消',
- onOk() {
- var filterSpaceArr = mapList.filter((item) => {
- return item[selNavObj.id] !== 0;
- });
- return;
- //如果是空调
- if (selNavObj.id == 'airConditioner') {
- changeAllAir(filterSpaceArr, () => {}, '打开');
- }
- if (selNavObj.id == 'light') {
- changeLight('all', filterSpaceArr, () => {}, '关闭');
- }
- if (selNavObj.id == 'curtain') {
- changeCurtain('all', filterSpaceArr, () => {}, '关闭');
- }
- },
- onCancel() {
- //console.log('Cancel');
- },
- });
- };
- return (
- <>
- {/* 全部设备 */}
- {selNavObj.id === 'all' && (
- <div className={styles.right}>
- <div className={styles.title}>运行中的设备</div>
- <div className={styles.allList}>
- {deviceList.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={allCloseClick}>
- {/* <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 }) => allOpenClick(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;
|