index.jsx 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
  2. import { Modal } from 'antd';
  3. import './index.less';
  4. import Draggable from 'react-draggable';
  5. import Slider from '../../Slider';
  6. import Icon from '@/tenants-ui/SgIcon';
  7. import { changeManualTempHttp } from '@/services/sagacare_service/equipment';
  8. export default ({ hideColour, colourObj }) => {
  9. const [startTime, setStartTime] = useState(0);
  10. const [renew, setRenew] = useState(true);
  11. const [disabled, setDisabled] = useState(false);
  12. const [bounds, setBounds] = useState({
  13. left: 0,
  14. top: 0,
  15. bottom: 0,
  16. right: 0,
  17. });
  18. // useEffect(() => {
  19. // console.log('colourObj', colourObj);
  20. // }, [colourObj]);
  21. // 下发色温指令
  22. const setHeatOrder = (vobj) => {
  23. var paramsArr = [];
  24. paramsArr.push({
  25. id: colourObj.id,
  26. code: colourObj.tempSetCode,
  27. value: vobj.value,
  28. });
  29. console.log('每个温度请求参数', paramsArr);
  30. // changeManualTempHttp(paramsArr).then((res) => {
  31. // getHeat(); //todo
  32. // });
  33. };
  34. // 滑动
  35. const silderVal = (obj) => {
  36. const endTime = Date.parse(new Date());
  37. const dx = endTime - startTime;
  38. if (dx === 1000) {
  39. setStartTime(endTime);
  40. setHeatOrder(obj);
  41. }
  42. };
  43. // 滑动开始
  44. const mouseStart = () => {
  45. let nowTime = Date.parse(new Date());
  46. setStartTime(nowTime);
  47. setRenew(false);
  48. };
  49. // 滑动停止
  50. const mouseEnd = (obj) => {
  51. setHeatOrder(obj);
  52. };
  53. const draggleRef = useRef(null);
  54. const onStart = (_event, uiData) => {
  55. _event.stopPropagation();
  56. const { clientWidth, clientHeight } = window.document.documentElement;
  57. const targetRect = draggleRef.current?.getBoundingClientRect();
  58. if (!targetRect) {
  59. return;
  60. }
  61. setBounds({
  62. left: -targetRect.left + uiData.x,
  63. right: clientWidth - (targetRect.right - uiData.x),
  64. top: -targetRect.top + uiData.y,
  65. bottom: clientHeight - (targetRect.bottom - uiData.y),
  66. });
  67. };
  68. return (
  69. <Modal
  70. open
  71. mask={false}
  72. centered
  73. footer={null}
  74. style={{
  75. width: '100%',
  76. }}
  77. modalRender={(modal) => (
  78. <Draggable
  79. disabled={disabled}
  80. bounds={bounds}
  81. onStart={(event, uiData) => onStart(event, uiData)}
  82. >
  83. <div ref={draggleRef}>{modal}</div>
  84. </Draggable>
  85. )}
  86. closable={false}
  87. >
  88. <div className="heatModal">
  89. <div
  90. className="closeIcon"
  91. onClick={() => {
  92. hideColour();
  93. }}
  94. >
  95. <Icon type="close" />
  96. </div>
  97. <div className="modalTitle">{colourObj.localName}</div>
  98. <div className="modalCont">
  99. <Slider
  100. onlyLine={true}
  101. typeValue={colourObj.tempSet || colourObj.minTempSet}
  102. minValue={colourObj.minTempSet}
  103. maxValue={colourObj.maxTempSet}
  104. type={'underfloorHeat'}
  105. silderPercentValue={silderVal}
  106. silderMouseEnd={mouseEnd}
  107. silderMouseStart={mouseStart}
  108. ></Slider>
  109. </div>
  110. </div>
  111. </Modal>
  112. );
  113. };