Browse Source

feat(): 添加弹框设备

anxiaoxia 3 years ago
parent
commit
c9b5699e27
26 changed files with 499 additions and 2 deletions
  1. 1 0
      config/config.dev.ts
  2. BIN
      src/assets/images/page-equipment/airClose.png
  3. BIN
      src/assets/images/page-equipment/airOpen.png
  4. 3 0
      src/assets/images/page-equipment/arrow-down.svg
  5. 3 0
      src/assets/images/page-equipment/arrow-up.svg
  6. 3 0
      src/assets/images/page-equipment/expend-down.svg
  7. 3 0
      src/assets/images/page-equipment/expend-up.svg
  8. BIN
      src/assets/images/page-equipment/lamp-close.png
  9. BIN
      src/assets/images/page-equipment/lamp-open.png
  10. 3 0
      src/assets/images/page-equipment/temp-down.svg
  11. BIN
      src/assets/images/page-equipment/temp-keep.png
  12. 19 0
      src/assets/images/page-equipment/temp-keep.svg
  13. 3 0
      src/assets/images/page-equipment/temp-up.svg
  14. 3 0
      src/assets/images/page-equipment/wind-down.svg
  15. 3 0
      src/assets/images/page-equipment/wind-up.svg
  16. 15 0
      src/config/image.js
  17. 126 0
      src/pages/Equipment/components/deviceModal/airEq/index.jsx
  18. 113 0
      src/pages/Equipment/components/deviceModal/airEq/index.less
  19. 16 0
      src/pages/Equipment/components/deviceModal/anSwitch/index.jsx
  20. 35 0
      src/pages/Equipment/components/deviceModal/anSwitch/index.less
  21. 78 0
      src/pages/Equipment/components/deviceModal/common.less
  22. 0 0
      src/pages/Equipment/components/deviceModal/curtainEq/index.jsx
  23. 0 0
      src/pages/Equipment/components/deviceModal/curtainEq/index.less
  24. 6 2
      src/pages/Equipment/components/deviceModal/index.jsx
  25. 60 0
      src/pages/Equipment/components/deviceModal/lampEq/index.jsx
  26. 6 0
      src/pages/Equipment/components/deviceModal/lampEq/index.less

+ 1 - 0
config/config.dev.ts

@@ -12,4 +12,5 @@ export default defineConfig({
     babelPlugins: [],
     babelOptions: {},
   },
+  mfsu: {},
 });

BIN
src/assets/images/page-equipment/airClose.png


BIN
src/assets/images/page-equipment/airOpen.png


+ 3 - 0
src/assets/images/page-equipment/arrow-down.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.6251 2.5C10.6251 2.15482 10.3453 1.875 10.0001 1.875C9.6549 1.875 9.37508 2.15482 9.37508 2.5V15.9911L4.60869 11.2247C4.36461 10.9806 3.96888 10.9806 3.72481 11.2247C3.48073 11.4688 3.48073 11.8645 3.72481 12.1086L9.55814 17.9419C9.80222 18.186 10.1979 18.186 10.442 17.9419L16.2754 12.1086C16.5194 11.8645 16.5194 11.4688 16.2754 11.2247C16.0313 10.9806 15.6356 10.9806 15.3915 11.2247L10.6251 15.9911V2.5Z" fill="#4D5262"/>
+</svg>

+ 3 - 0
src/assets/images/page-equipment/arrow-up.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3915 8.77528C15.6356 9.01935 16.0313 9.01935 16.2754 8.77528C16.5194 8.5312 16.5194 8.13547 16.2754 7.89139L10.442 2.05806C10.1979 1.81398 9.80222 1.81398 9.55814 2.05806L3.72481 7.89139C3.48073 8.13547 3.48073 8.5312 3.72481 8.77528C3.96888 9.01935 4.36461 9.01935 4.60869 8.77528L9.37508 4.00888V17.5C9.37508 17.8452 9.6549 18.125 10.0001 18.125C10.3453 18.125 10.6251 17.8452 10.6251 17.5V4.00888L15.3915 8.77528Z" fill="#4D5262"/>
+</svg>

+ 3 - 0
src/assets/images/page-equipment/expend-down.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.93055 8.68055C6.19904 8.41207 6.63434 8.41207 6.90282 8.68055L11 12.7777L15.0972 8.68055C15.3657 8.41207 15.801 8.41207 16.0695 8.68055C16.338 8.94904 16.338 9.38434 16.0695 9.65282L11.4862 14.2362C11.2177 14.5046 10.7824 14.5046 10.5139 14.2362L5.93055 9.65282C5.66207 9.38434 5.66207 8.94904 5.93055 8.68055Z" fill="#9FB7CD"/>
+</svg>

+ 3 - 0
src/assets/images/page-equipment/expend-up.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.93055 13.3195C6.19904 13.588 6.63434 13.588 6.90282 13.3195L11 9.22227L15.0972 13.3195C15.3657 13.588 15.801 13.588 16.0695 13.3195C16.338 13.051 16.338 12.6157 16.0695 12.3472L11.4862 7.76386C11.2177 7.49538 10.7824 7.49538 10.5139 7.76386L5.93055 12.3472C5.66207 12.6157 5.66207 13.051 5.93055 13.3195Z" fill="#9FB7CD"/>
+</svg>

BIN
src/assets/images/page-equipment/lamp-close.png


BIN
src/assets/images/page-equipment/lamp-open.png


File diff suppressed because it is too large
+ 3 - 0
src/assets/images/page-equipment/temp-down.svg


BIN
src/assets/images/page-equipment/temp-keep.png


+ 19 - 0
src/assets/images/page-equipment/temp-keep.svg

@@ -0,0 +1,19 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_8_13543)">
+<path d="M10.9 4.5H4.5C4.225 4.5 4 4.275 4 4C4 3.725 4.225 3.5 4.5 3.5H10.9C11.47 3.5 11.9 3.07 11.9 2.5C11.9 1.93 11.47 1.5 10.9 1.5C10.47 1.5 10.11 1.76 9.975 2.16C9.89 2.42 9.605 2.565 9.345 2.475C9.085 2.39 8.94 2.105 9.03 1.845C9.295 1.04 10.045 0.5 10.9 0.5C12.02 0.5 12.9 1.38 12.9 2.5C12.9 3.62 12.02 4.5 10.9 4.5Z" fill="#00DC23"/>
+<path d="M7.9 11.5C7.045 11.5 6.295 10.96 6.025 10.16C5.94 9.9 6.08 9.615 6.34 9.53C6.605 9.44 6.885 9.585 6.975 9.845C7.11 10.24 7.47 10.5 7.9 10.5C8.47 10.5 8.9 10.07 8.9 9.5C8.9 8.93 8.47 8.5 7.9 8.5H4.5C4.225 8.5 4 8.275 4 8C4 7.725 4.225 7.5 4.5 7.5H7.9C9.02 7.5 9.9 8.38 9.9 9.5C9.9 10.62 9.02 11.5 7.9 11.5Z" fill="#00DC23"/>
+<path d="M14 9.5C13.145 9.5 12.395 8.96 12.125 8.16C12.04 7.9 12.18 7.615 12.44 7.53C12.705 7.44 12.985 7.585 13.075 7.845C13.21 8.24 13.57 8.5 14 8.5C14.57 8.5 15 8.07 15 7.5C15 6.93 14.57 6.5 14 6.5H4.5C4.225 6.5 4 6.275 4 6C4 5.725 4.225 5.5 4.5 5.5H14C15.12 5.5 16 6.38 16 7.5C16 8.62 15.12 9.5 14 9.5Z" fill="#00DC23"/>
+</g>
+<defs>
+<filter id="filter0_d_8_13543" x="0" y="0" width="20" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8_13543"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8_13543" result="shape"/>
+</filter>
+</defs>
+</svg>

File diff suppressed because it is too large
+ 3 - 0
src/assets/images/page-equipment/temp-up.svg


File diff suppressed because it is too large
+ 3 - 0
src/assets/images/page-equipment/wind-down.svg


File diff suppressed because it is too large
+ 3 - 0
src/assets/images/page-equipment/wind-up.svg


+ 15 - 0
src/config/image.js

@@ -31,4 +31,19 @@ export const equipImageMap = {
   envir_humidification: require('@/assets/images/page-enviroment/humidification.svg'),
 
   maptemp6: require('@/assets/images/page-enviroment/maptemp6.png'),
+
+  // 设备
+airClose: require('@/assets/images/page-equipment/airClose.png'),
+airOpen: require('@/assets/images/page-equipment/airOpen.png'),
+temp_down: require('@/assets/images/page-equipment/temp-down.svg'),
+temp_up: require('@/assets/images/page-equipment/temp-up.svg'),
+temp_keep: require('@/assets/images/page-equipment/temp-keep.png'),
+arrow_down: require('@/assets/images/page-equipment/arrow-down.svg'),
+arrow_up: require('@/assets/images/page-equipment/arrow-up.svg'),
+wind_up: require('@/assets/images/page-equipment/wind-up.svg'),
+wind_down: require('@/assets/images/page-equipment/wind-down.svg'),
+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'),
 };

+ 126 - 0
src/pages/Equipment/components/deviceModal/airEq/index.jsx

@@ -0,0 +1,126 @@
+import React, { useState, useEffect } from 'react';
+import styles from './index.less';
+import commonStyles from '../common.less';
+import { equipImageMap } from '@/config/image.js';
+import AnSwitch from '../anSwitch';
+
+export default () => {
+  const {
+    airOpen,
+    airClose,
+    temp_down,
+    temp_up,
+    temp_keep,
+    arrow_down,
+    arrow_up,
+    wind_up,
+    wind_down,
+  } = equipImageMap;
+  const hasAir = true;
+  const [isOpen, setIsOpen] = useState(true); // 12 开, 10关
+  const temperature = '11';
+  const airExpend = [
+    {
+      title: '温度调节',
+      type: 'temp',
+      downType: 4,
+      upType: 2,
+      leftImg: arrow_down,
+      rightImg: arrow_up,
+    },
+    {
+      title: '风量调节',
+      type: 'wind',
+      downType: 5,
+      upType: 6,
+      leftImg: wind_down,
+      rightImg: wind_up,
+    },
+  ];
+  const airData = {
+    spaceStatus: true,
+    icon: 2,
+  };
+
+  const airStatusImg = () => {
+    switch (airData.icon) {
+      case 1:
+        return temp_keep;
+        break;
+      case 2:
+        return temp_down;
+        break;
+      case 3:
+        return temp_up;
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  function changeSwitch(val) {
+    setIsOpen(val);
+  }
+
+  const AirExpend = () => {
+    const changeTemp = (type) => {
+      console.log(type, 'win 风蛋糕');
+    };
+    if (isOpen) {
+      return (
+        <>
+          <div className={styles.expend}>
+            {airExpend.map((items, idx) => {
+              return (
+                <div className={styles.item} key={idx}>
+                  <div>{items.title}</div>
+                  <div className={styles.itemRight}>
+                    <div className={styles.itemBg} onClick={() => changeTemp(items.downType)}>
+                      <img className={styles.itemImg} src={items.leftImg} />
+                    </div>
+                    <div className={styles.itemBg} onClick={() => changeTemp(items.upType)}>
+                      <img className={styles.itemImg} src={items.rightImg} />
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </>
+      );
+    } else {
+      return <></>;
+    }
+  };
+
+  return (
+    <div className={styles.box}>
+      <div className={styles.content}>
+        <div className={styles.env}>
+          <div className={styles.envLeft}>
+            <span className={commonStyles.eqTitle}>空调</span>
+            <div className={styles.envnum}>
+              {temperature ? temperature : '--'}
+              <span className={styles.unit}>℃</span>
+            </div>
+            <div className={styles.airStatus}>
+              <span>{isOpen ? '空调已开启' : '空调已关闭'}</span>
+              <div className={styles.airStatusbox}>
+                <img className={styles.airStatusImg} src={airStatusImg()} />
+                <span className={styles.statusText}>正在全力降温中的对方的身份</span>
+              </div>
+            </div>
+          </div>
+          <div className={styles.envRight}>
+            <img className={styles.roomAirImg} src={isOpen ? airOpen : airClose} />
+          </div>
+          <div className={commonStyles.eqBtn}>
+            <AnSwitch isOpen={isOpen} changeSwitch={changeSwitch} />
+          </div>
+        </div>
+      </div>
+      <AirExpend></AirExpend>
+    </div>
+  );
+};

+ 113 - 0
src/pages/Equipment/components/deviceModal/airEq/index.less

@@ -0,0 +1,113 @@
+.box {
+  width: 331px;
+  margin-bottom: 15px;
+  background: hsl(0, 0%, 100%);
+  border-radius: 25px;
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
+  .content {
+    .env {
+      position: relative;
+      display: flex;
+      .envLeft {
+        flex: 1 1 auto;
+        height: 140px;
+        padding-top: 24px;
+        padding-left: 30px;
+        .envnum {
+          display: flex;
+          flex-direction: row;
+          align-items: flex-start;
+          padding-top: 5px;
+          padding-bottom: 5px;
+          color: #1b144e;
+          font-weight: 400;
+          font-size: 32px;
+          font-family: Montserrat;
+          line-height: 32px;
+          .unit {
+            color: #c4c4c4;
+            font-weight: 800;
+            font-size: 12px;
+            font-family: Mulish;
+            font-style: normal;
+            line-height: 15px;
+          }
+        }
+      }
+      .envRight {
+        width: 165px;
+        height: 140px;
+        .roomAirImg {
+          width: 165px;
+          height: 140px;
+        }
+      }
+    }
+    .airStatus {
+      padding-top: 5px;
+      color: rgba(196, 196, 196, 1);
+      font-weight: 400;
+      font-size: 14px;
+      font-family: PingFang SC;
+      line-height: 20px;
+      .airStatusbox {
+        display: flex;
+        align-items: center;
+        .airStatusImg {
+          width: 12px;
+          height: 12px;
+          margin-right: 3px;
+        }
+        .statusText {
+          display: inline-block;
+          width: 96px;
+          overflow: hidden;
+          font-size: 11px;
+          line-height: 18px;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+    .airBtn {
+      position: absolute;
+      top: 103px;
+      right: 15px;
+    }
+  }
+  .expend {
+    .item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 60px;
+      padding-right: 14px;
+      padding-left: 27px;
+      color: rgba(196, 196, 196, 1);
+      font-weight: 400;
+
+      font-size: 14px;
+      line-height: 20px;
+      border-top: 1px solid rgba(196, 196, 196, 0.4);
+      .itemRight {
+        display: flex;
+      }
+      .itemBg {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 42px;
+        height: 42px;
+        background: rgba(196, 196, 196, 0.2);
+        border-radius: 50%;
+      }
+      .itemBg:nth-child(1) {
+        margin-right: 20px;
+      }
+      .itemImg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+}

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

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

+ 35 - 0
src/pages/Equipment/components/deviceModal/anSwitch/index.less

@@ -0,0 +1,35 @@
+.box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 54px;
+  height: 30px;
+  .content {
+    position: relative;
+    width: 48px;
+    height: 24px;
+    padding: 3px;
+    background: #ffe823;
+    border-radius: 12px;
+    transition: background-color 0.3s;
+    &.closeBg {
+      background: #c4c4c433;
+      transition: background-color 0.3s;
+    }
+    .point {
+      position: absolute;
+      top: 0;
+      width: 24px;
+      height: 24px;
+      background: #ffffff;
+      border: 1px solid #c4c4c4;
+      border-radius: 50%;
+      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.03);
+      transform: translate(90%, 0%);
+      transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
+      &.closePt {
+        transform: translate(-10%, 0%);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,78 @@
+.box {
+  width: 331px;
+  margin-bottom: 15px;
+  background: hsl(0, 0%, 100%);
+  border-radius: 25px;
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
+  .content {
+    .env {
+      position: relative;
+      display: flex;
+      .envLeft {
+        flex: 1 1 auto;
+        height: 140px;
+        padding-top: 24px;
+        padding-left: 30px;
+      }
+      .envRight {
+        width: 165px;
+        height: 140px;
+        .roomEqImg {
+          width: 165px;
+          height: 140px;
+        }
+      }
+    }
+  }
+}
+
+.eqTitle {
+  color: #4d5262;
+  font-weight: 600;
+  font-size: 16px;
+  font-family: PingFang SC;
+  font-style: normal;
+  line-height: 22px;
+  letter-spacing: 0em;
+  text-align: left;
+}
+.eqStatus {
+  padding-top: 5px;
+  color: rgba(196, 196, 196, 1);
+  font-weight: 400;
+  font-size: 14px;
+  font-family: PingFang SC;
+  line-height: 20px;
+}
+
+.eqBtn {
+  position: absolute;
+  top: 103px;
+  right: 15px;
+}
+
+.flexBetween {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.showAll {
+  display: flex;
+  padding-top: 30px;
+  color: #c4c4c4;
+  .showAllText {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+  }
+  .showImg {
+    width: 22px;
+    height: 22px;
+    margin-right: 5px;
+  }
+}
+
+.pdt10 {
+  padding-top: 10px;
+}

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


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


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

@@ -5,6 +5,8 @@ import Icon from '@/tenants-ui/Icon';
 import styles from './index.less';
 import { EditOutlined } from '@ant-design/icons';
 import { equipImageMap } from '@/config/image.js';
+import AirEq from './airEq';
+import LampEq from './lampEq';
 
 const typeList = [
   {
@@ -200,10 +202,12 @@ export default ({ onClose }) => {
             <div className={styles.devices}>
               <Row gutter={[12, 18]}>
                 <Col span={12}>
-                  <img style={{ width: '100%' }} src={airTemp}></img>
+                  {/* <img style={{ width: '100%' }} src={airTemp}></img> */}
+                  <AirEq></AirEq>
                 </Col>
                 <Col span={12}>
-                  <img style={{ width: '100%' }} src={lampTemp}></img>
+                  {/* <img style={{ width: '100%' }} src={lampTemp}></img> */}
+                  <LampEq></LampEq>
                 </Col>
                 <Col span={12}>
                   <img style={{ width: '100%' }} src={waterTemp}></img>

+ 60 - 0
src/pages/Equipment/components/deviceModal/lampEq/index.jsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } 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;
+export default () => {
+  const [isMore, setIsMore] = useState(true);
+
+  const lampArr = [
+    { id: '1', title: '主灯', sta: true },
+    { id: '2', title: '顶灯', sta: false },
+  ];
+
+  const [flagSvg, setFlagSvg] = useState(false);
+  function handleExpend() {
+    setFlagSvg(!flagSvg);
+  }
+
+  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={lamp_open} />
+          </div>
+          {!flagSvg && (
+            <div className={commonStyles.eqBtn}>
+              <AnSwitch isOpen={true} />
+            </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>
+                <AnSwitch isOpen={item.sta}></AnSwitch>
+              </div>
+            </div>
+          );
+        }
+      })}
+    </div>
+  );
+};

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

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