| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
- import { Modal } from 'antd';
- import './index.less';
- import Draggable from 'react-draggable';
- import Slider from '../../Slider';
- import Icon from '@/tenants-ui/SgIcon';
- import { changeManualTempHttp } from '@/services/sagacare_service/equipment';
- export default ({ hideColour, colourObj }) => {
- const [startTime, setStartTime] = useState(0);
- const [renew, setRenew] = useState(true);
- const [disabled, setDisabled] = useState(false);
- const [bounds, setBounds] = useState({
- left: 0,
- top: 0,
- bottom: 0,
- right: 0,
- });
- // useEffect(() => {
- // console.log('colourObj', colourObj);
- // }, [colourObj]);
- // 下发色温指令
- const setHeatOrder = (vobj) => {
- var paramsArr = [];
- paramsArr.push({
- id: colourObj.id,
- code: colourObj.tempSetCode,
- value: vobj.value,
- });
- console.log('每个温度请求参数', paramsArr);
- // changeManualTempHttp(paramsArr).then((res) => {
- // getHeat(); //todo
- // });
- };
- // 滑动
- const silderVal = (obj) => {
- const endTime = Date.parse(new Date());
- const dx = endTime - startTime;
- if (dx === 1000) {
- setStartTime(endTime);
- setHeatOrder(obj);
- }
- };
- // 滑动开始
- const mouseStart = () => {
- let nowTime = Date.parse(new Date());
- setStartTime(nowTime);
- setRenew(false);
- };
- // 滑动停止
- const mouseEnd = (obj) => {
- setHeatOrder(obj);
- };
- const draggleRef = useRef(null);
- const onStart = (_event, uiData) => {
- _event.stopPropagation();
- const { clientWidth, clientHeight } = window.document.documentElement;
- const targetRect = draggleRef.current?.getBoundingClientRect();
- if (!targetRect) {
- return;
- }
- setBounds({
- left: -targetRect.left + uiData.x,
- right: clientWidth - (targetRect.right - uiData.x),
- top: -targetRect.top + uiData.y,
- bottom: clientHeight - (targetRect.bottom - uiData.y),
- });
- };
- return (
- <Modal
- open
- mask={false}
- centered
- footer={null}
- style={{
- width: '100%',
- }}
- modalRender={(modal) => (
- <Draggable
- disabled={disabled}
- bounds={bounds}
- onStart={(event, uiData) => onStart(event, uiData)}
- >
- <div ref={draggleRef}>{modal}</div>
- </Draggable>
- )}
- closable={false}
- >
- <div className="heatModal">
- <div
- className="closeIcon"
- onClick={() => {
- hideColour();
- }}
- >
- <Icon type="close" />
- </div>
- <div className="modalTitle">{colourObj.localName}</div>
- <div className="modalCont">
- <Slider
- onlyLine={true}
- typeValue={colourObj.tempSet || colourObj.minTempSet}
- minValue={colourObj.minTempSet}
- maxValue={colourObj.maxTempSet}
- type={'underfloorHeat'}
- silderPercentValue={silderVal}
- silderMouseEnd={mouseEnd}
- silderMouseStart={mouseStart}
- ></Slider>
- </div>
- </div>
- </Modal>
- );
- };
|