anxiaoxia 3 years ago
parent
commit
71c7385eb8

+ 1 - 1
config/config.ts

@@ -67,7 +67,7 @@ export default defineConfig({
     },
   ],
   nodeModulesTransform: { type: 'none' },
-  //   mfsu: {},
+  mfsu: {},
   webpack5: {},
   exportStatic: {},
 });

File diff suppressed because it is too large
+ 3 - 0
src/assets/images/page-equipment/curtain-close-icon-row.svg


File diff suppressed because it is too large
+ 3 - 0
src/assets/images/page-equipment/curtain-open-icon-row.svg


BIN
src/assets/images/page-equipment/curtain-open-row.png


+ 3 - 0
src/config/image.js

@@ -46,4 +46,7 @@ lamp_open: require('@/assets/images/page-equipment/lamp-open.png'),
 lamp_close: require('@/assets/images/page-equipment/lamp-close.png'),
 expend_down: require('@/assets/images/page-equipment/expend-down.svg'),
 expend_up: require('@/assets/images/page-equipment/expend-up.svg'),
+curtain_open_row: require('@/assets/images/page-equipment/curtain-open-row.png'),
+curtain_open_icon_row: require('@/assets/images/page-equipment/curtain-open-icon-row.svg'),
+curtain_close_icon_row: require('@/assets/images/page-equipment/curtain-close-icon-row.svg'),
 };

+ 5 - 5
src/pages/Equipment/components/deviceModal/anSwitch/index.jsx

@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import './index.less';
 
-export default ({ isOpen, changeSwitch }) => {
-  const cb = () => {
-    changeSwitch(!isOpen);
-  };
+export default ({ isOpen }) => {
+  //   const cb = () => {
+  //     changeSwitch(!isOpen, 'total');
+  //   };
 
   return (
-    <div className="box" onClick={cb}>
+    <div className="box">
       <div className={`content ${isOpen ? null : 'closeBg'}`}>
         <div className={`point  ${isOpen ? null : 'closePt'}`}></div>
       </div>

+ 32 - 0
src/pages/Equipment/components/deviceModal/common.less

@@ -76,3 +76,35 @@
 .pdt10 {
   padding-top: 10px;
 }
+
+.dsflex {
+  display: flex;
+}
+
+.eqCirculBtn {
+  position: absolute;
+  top: 86px;
+  right: 15px;
+  display: flex;
+}
+
+.mgr20 {
+  margin-right: 20px;
+}
+
+.circulBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: rgba(196, 196, 196, 0.2);
+  border-radius: 50%;
+  &.yell {
+    background: #ffe823;
+  }
+  .btnIcon {
+    width: 20px;
+    height: 20px;
+  }
+}

+ 62 - 0
src/pages/Equipment/components/deviceModal/curtainEq/curtainBtn.jsx

@@ -0,0 +1,62 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import commonStyles from '../common.less';
+import { equipImageMap } from '@/config/image.js';
+const { curtain_close_icon_row, curtain_open_icon_row } = equipImageMap;
+
+export default (id, index) => {
+  const [downFlag, setDownFlag] = useState(false);
+  const [upFlag, setUpFlag] = useState(false);
+  const [count, setCount] = useState();
+  let setTimer = useRef(null);
+  const handleCurtain = (setType, id, index) => {
+    if (downFlag || upFlag) return; // 左右按钮互称
+    if (setType == 'EquipOffSet') {
+      setDownFlag(true);
+      setUpFlag(false);
+    } else {
+      setUpFlag(true);
+      setDownFlag(false);
+    }
+    setCount(2);
+    setTimer.current = setInterval(() => {
+      setCount((count) => {
+        return count - 1;
+      });
+    }, 1000);
+  };
+
+  useEffect(() => {
+    if (count === 0) {
+      setDownFlag(false);
+      setUpFlag(false);
+      clearInterval(setTimer.current);
+    }
+  }, [count]);
+  return (
+    <>
+      <div
+        onClick={() => {
+          handleCurtain('EquipOffSet', id, 1);
+        }}
+        className={`${commonStyles.circulBtn} ${commonStyles.mgr20} ${
+          downFlag ? commonStyles.yell : ''
+        }`}
+      >
+        {downFlag && <div>{count}</div>}
+        {!downFlag && <img className={commonStyles.btnIcon} src={curtain_close_icon_row}></img>}
+      </div>
+
+      <div
+        onClick={() => {
+          handleCurtain('EquipOnSet', id, 2);
+        }}
+        className={`${commonStyles.circulBtn} ${commonStyles.mgr20} ${
+          upFlag ? commonStyles.yell : ''
+        }`}
+      >
+        {upFlag && <div>{count}</div>}
+        {!upFlag && <img className={commonStyles.btnIcon} src={curtain_open_icon_row}></img>}
+      </div>
+    </>
+  );
+};

+ 79 - 0
src/pages/Equipment/components/deviceModal/curtainEq/index.jsx

@@ -0,0 +1,79 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import styles from './index.less';
+import commonStyles from '../common.less';
+import { equipImageMap } from '@/config/image.js';
+import CurtainBtn from './curtainBtn';
+import { getObjectDataEqpGroupHttp } from '@/services/ant-design-pro/equipment';
+
+const { curtain_open_row, expend_down, expend_up } = equipImageMap;
+
+export default () => {
+  const [isMore, setIsMore] = useState(true);
+  const [flagSvg, setFlagSvg] = useState(true);
+  const [suspendDownFlag, setSuspendDownFlag] = useState(true); // 总向下暂停
+  const [suspendUpFlag, setSuspendUpFlag] = useState(false); // 总向下暂停
+  const [count, setCount] = useState(2); // 倒计时
+  const [countText, setCountText] = useState(); // 倒计时文案
+
+  const lampArr = [
+    { id: '1', title: '主灯', sta: true },
+    { id: '2', title: '顶灯', sta: false },
+  ];
+  function handleExpend() {
+    setFlagSvg(!flagSvg);
+  }
+  useEffect(() => {
+    const params = {
+      criteria: {
+        projectId: 'Pj1101080259',
+        spaceId: 'Sp1101080259c4434730d12144ba890fe11f796d3143',
+        type: 0,
+      },
+      orders: [{ column: 'sortNum', asc: true }],
+    };
+    getObjectDataEqpGroupHttp(params).then((res) => {
+      debugger;
+    });
+  }, []);
+
+  return (
+    <div className={commonStyles.box}>
+      <div className={commonStyles.content}>
+        <div className={commonStyles.env}>
+          <div className={commonStyles.envLeft}>
+            <span className={commonStyles.eqTitle}>窗帘</span>
+            <div className={`${commonStyles.eqStatus} ${commonStyles.pdt10}`}>
+              <span>窗帘已开启</span>
+            </div>
+            {isMore && (
+              <div className={commonStyles.showAll} onClick={handleExpend}>
+                <img className={commonStyles.showImg} src={flagSvg ? expend_up : expend_down}></img>
+                <div className={commonStyles.showAllText}>显示全部</div>
+              </div>
+            )}
+          </div>
+          <div className={commonStyles.envRight}>
+            <img className={commonStyles.roomEqImg} src={curtain_open_row} />
+          </div>
+          {!flagSvg && (
+            <div className={commonStyles.eqCirculBtn}>
+              <CurtainBtn downFlag={suspendDownFlag}></CurtainBtn>
+            </div>
+          )}
+        </div>
+      </div>
+      {lampArr.map((item, idx) => {
+        if (flagSvg) {
+          return (
+            <div className={`${styles.lampChild} ${commonStyles.flexBetween}`} key={item.id}>
+              <div className={commonStyles.eqTitle}>{item.title}</div>
+              <div className={commonStyles.dsflex}>
+                <CurtainBtn></CurtainBtn>
+              </div>
+            </div>
+          );
+        }
+      })}
+    </div>
+  );
+};

+ 6 - 0
src/pages/Equipment/components/deviceModal/curtainEq/index.less

@@ -0,0 +1,6 @@
+.lampChild {
+  height: 60px;
+  padding-right: 12px;
+  padding-left: 30px;
+  border-top: 1px solid rgba(196, 196, 196, 0.4);
+}

+ 5 - 3
src/pages/Equipment/components/deviceModal/index.jsx

@@ -7,6 +7,7 @@ import { EditOutlined } from '@ant-design/icons';
 import { equipImageMap } from '@/config/image.js';
 import AirEq from './airEq';
 import LampEq from './lampEq';
+import CurtainEq from './curtainEq';
 
 const typeList = [
   {
@@ -209,11 +210,12 @@ export default ({ onClose }) => {
                   {/* <img style={{ width: '100%' }} src={lampTemp}></img> */}
                   <LampEq></LampEq>
                 </Col>
-                <Col span={12}>
+                {/* <Col span={12}>
                   <img style={{ width: '100%' }} src={waterTemp}></img>
-                </Col>
+                </Col> */}
                 <Col span={12}>
-                  <img style={{ width: '100%' }} src={curtainTemp}></img>
+                  {/* <img style={{ width: '100%' }} src={curtainTemp}></img> */}
+                  <CurtainEq></CurtainEq>
                 </Col>
               </Row>
 

+ 19 - 6
src/pages/Equipment/components/deviceModal/lampEq/index.jsx

@@ -1,11 +1,12 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import styles from './index.less';
 import commonStyles from '../common.less';
 import { equipImageMap } from '@/config/image.js';
 import AnSwitch from '../anSwitch';
-const { lamp_open, expend_down, expend_up } = equipImageMap;
+const { lamp_open, lamp_close, expend_down, expend_up } = equipImageMap;
 export default () => {
   const [isMore, setIsMore] = useState(true);
+  const [isOpen, setIsOpen] = useState(true); // 12 开, 10关
 
   const lampArr = [
     { id: '1', title: '主灯', sta: true },
@@ -17,6 +18,9 @@ export default () => {
     setFlagSvg(!flagSvg);
   }
 
+  function changeSwitch(val, type) {
+    setIsOpen(val);
+  }
   return (
     <div className={commonStyles.box}>
       <div className={commonStyles.content}>
@@ -34,11 +38,16 @@ export default () => {
             )}
           </div>
           <div className={commonStyles.envRight}>
-            <img className={commonStyles.roomEqImg} src={lamp_open} />
+            <img className={commonStyles.roomEqImg} src={isOpen ? lamp_open : lamp_close} />
           </div>
           {!flagSvg && (
-            <div className={commonStyles.eqBtn}>
-              <AnSwitch isOpen={true} />
+            <div
+              className={commonStyles.eqBtn}
+              onClick={() => {
+                changeSwitch(!isOpen, 'total');
+              }}
+            >
+              <AnSwitch isOpen={isOpen} />
             </div>
           )}
         </div>
@@ -48,7 +57,11 @@ export default () => {
           return (
             <div className={`${styles.lampChild} ${commonStyles.flexBetween}`} key={item.id}>
               <div className={commonStyles.eqTitle}>{item.title}</div>
-              <div>
+              <div
+                onClick={() => {
+                  changeSwitch(!item.sta, 'child');
+                }}
+              >
                 <AnSwitch isOpen={item.sta}></AnSwitch>
               </div>
             </div>

+ 2 - 2
src/pages/Equipment/index.tsx

@@ -22,7 +22,7 @@ import type { navigatorItem } from '@/pages/Environment/index';
 const Environment: React.FC = () => {
   const { envir_all, equip_air, equip_lamp, envir_curtain } = equipImageMap;
   const [searchText, setSearchText] = useState<string>('');
-  const [showModal, setShowModal] = useState<boolean>(false);
+  const [showModal, setShowModal] = useState<boolean>(true);
   const [navigatorList] = useState<navigatorItem[]>([
     {
       name: '全部设备',
@@ -201,7 +201,7 @@ const Environment: React.FC = () => {
       {showModal && (
         <DeviceModal
           onClose={() => {
-            setShowModal(false);
+            setShowModal(true);
           }}
         ></DeviceModal>
       )}

File diff suppressed because it is too large
+ 40 - 0
src/services/ant-design-pro/equipment.js