Skip to content

F
fanLight
Commit a1d2e9dd authored by sliao's avatar sliao
Browse files
Options

fix

parent b3623798
Expand all Show whitespace changes
Inline Side-by-side
Showing with 317 additions and 97 deletions
package.json
View file @ a1d2e9dd
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
}, },
"dependencies": { "dependencies": {
"@ray-js/build-plugin-router": "^0.6.15", "@ray-js/build-plugin-router": "^0.6.15",
"@ray-js/components-ty-lamp": "^1.3.0",
"@ray-js/panel-sdk": "^1.2.1", "@ray-js/panel-sdk": "^1.2.1",
"@ray-js/ray": "^0.6.13", "@ray-js/ray": "^0.6.13",
"ahooks": "^3.7.1", "ahooks": "^3.7.1",
......
src/components/light-panel/index.module.less
View file @ a1d2e9dd
...@@ -6,12 +6,13 @@ ...@@ -6,12 +6,13 @@
height: 424px; height: 424px;
background-color: white; background-color: white;
border-radius: 24px; border-radius: 24px;
align-items: center;
// position: absolute; // position: absolute;
// top: calc(50vh - 175px); // top: calc(50vh - 175px);
margin-top: 90px; margin-top: 90px;
padding: 0 0 40px; padding: 0 0 40px;
color: #000000; color: #000000;
z-index: 9999; z-index: 99999;
} }
.lightModalTop { .lightModalTop {
display: flex; display: flex;
...@@ -50,6 +51,7 @@ ...@@ -50,6 +51,7 @@
display: flex; display: flex;
// align-items: center; // align-items: center;
justify-content: center; justify-content: center;
overflow: hidden;
} }
.moveCircle { .moveCircle {
...@@ -74,6 +76,7 @@ ...@@ -74,6 +76,7 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
margin: 0 3px; margin: 0 3px;
width: 336px;
} }
.progressSun { .progressSun {
width: 21px; width: 21px;
......
src/components/light-panel/index.tsx
View file @ a1d2e9dd
...@@ -9,7 +9,8 @@ import { Image, View } from '@ray-js/components'; ...@@ -9,7 +9,8 @@ import { Image, View } from '@ray-js/components';
import iconClose from '../../../public/icon-close.png'; import iconClose from '../../../public/icon-close.png';
import iconLightWhite from '../../../public/icon-light-white.png'; import iconLightWhite from '../../../public/icon-light-white.png';
import iconSun from '../../../public/icon-sun.png'; import iconSun from '../../../public/icon-sun.png';
// import { usePageEvent } from '@ray-js/ray'; import { LampRectWhitePicker } from '@ray-js/components-ty-lamp';
import { usePageEvent } from '@ray-js/ray';
export interface Props { export interface Props {
isShow: boolean; isShow: boolean;
setModal: (boolean) => void; setModal: (boolean) => void;
...@@ -30,11 +31,7 @@ export const LightPanel = React.memo<Props>(props => { ...@@ -30,11 +31,7 @@ export const LightPanel = React.memo<Props>(props => {
return percent; return percent;
}); });
const temperatureVal = useSdmProps(dpState => { const temperatureVal = useSdmProps(dpState => dpState[temperatureCode]);
const val = dpState[temperatureCode];
const originX = getOrignPointX(val);
return originX;
});
const switchVal = useSdmProps(dpState => dpState[switchCode]); const switchVal = useSdmProps(dpState => dpState[switchCode]);
const device = devices.fan; const device = devices.fan;
...@@ -43,9 +40,27 @@ export const LightPanel = React.memo<Props>(props => { ...@@ -43,9 +40,27 @@ export const LightPanel = React.memo<Props>(props => {
const brightAction = actions[brightCode] as DpCommonAction<number>; const brightAction = actions[brightCode] as DpCommonAction<number>;
const temperatureAction = actions[temperatureCode] as DpCommonAction<number>; const temperatureAction = actions[temperatureCode] as DpCommonAction<number>;
const [point, setPoint] = useState({ pageX: temperatureVal, pageY: 250 }); // const [point, setPoint] = useState({ pageX: temperatureVal, pageY: 250 });
const [brightPercent, setBrightPercent] = useState(brightVal); const [brightPercent, setBrightPercent] = useState(brightVal);
const [temperature, setTemp] = useState(temperatureVal);
// useEffect(() => {
// if (temperatureVal !== temperature) {
// setTemp(temperatureVal)
// }
// })
// const handleMove = (v: number) => {
// setTemp(v);
// };
// const handleEnd = (v: number) => {
// setTemp(v);
// };
usePageEvent('onShow', () => {
console.log('light panel');
setTemp(temperatureVal)
})
useEffect(() => { useEffect(() => {
if (brightVal !== brightPercent) { if (brightVal !== brightPercent) {
setBrightPercent(brightVal); setBrightPercent(brightVal);
...@@ -58,12 +73,12 @@ export const LightPanel = React.memo<Props>(props => { ...@@ -58,12 +73,12 @@ export const LightPanel = React.memo<Props>(props => {
// } // }
// }, [temperatureVal]) // }, [temperatureVal])
function getOrignPointX(val = temperatureVal) { // function getOrignPointX(val = temperatureVal) {
const percent = getValueInRange(val || 10, cctRange).percent; // const percent = getValueInRange(val || 10, cctRange).percent;
const originX = 28 + 319 * (percent / 100); // const originX = 28 + 319 * (percent / 100);
console.log(val, percent, originX); // console.log(val, percent, originX);
return originX; // return originX;
} // }
//0-value是值 1-value是百分比 左边最小值是0，右边最大值range[1]，起始位置rang[0] //0-value是值 1-value是百分比 左边最小值是0，右边最大值range[1]，起始位置rang[0]
function getValueInRange(value, range, type = 0) { function getValueInRange(value, range, type = 0) {
const percent = type == 0 ? value / range[1] : value / 100; const percent = type == 0 ? value / range[1] : value / 100;
...@@ -73,50 +88,48 @@ export const LightPanel = React.memo<Props>(props => { ...@@ -73,50 +88,48 @@ export const LightPanel = React.memo<Props>(props => {
}; };
} }
// function touchStart(e) {
// // e.origin.stopPropagation();
// // handlePoint(e);
// }
// function handleTouch(e) {
// // e.origin.stopPropagation();
// handlePoint(e, false);
// }
function touchStart(e) { // function touchEnd(e) {
// e.origin.stopPropagation(); // console.log(e, 'touchEnd');
// handlePoint(e); // handlePoint(e);
} // }
function handleTouch(e) {
// e.origin.stopPropagation();
handlePoint(e, false);
}
function touchEnd(e) {
console.log(e, 'touchEnd');
handlePoint(e);
}
function handlePoint(e, isAction = true) { // function handlePoint(e, isAction = true) {
const { pageX, pageY } = e.changedTouches.length && e.changedTouches[0]; // const { pageX, pageY } = e.changedTouches.length && e.changedTouches[0];
let x = pageX; // let x = pageX;
let y = pageY; // let y = pageY;
const xRange = [28, 347]; // const xRange = [28, 347];
if (pageX < xRange[0]) { // if (pageX < xRange[0]) {
x = xRange[0]; // x = xRange[0];
} // }
if (pageX > xRange[1]) { // if (pageX > xRange[1]) {
x = xRange[1]; // x = xRange[1];
} // }
if (pageY < 197) { // if (pageY < 197) {
y = 197; // y = 197;
} // }
if (pageY > 320) { // if (pageY > 320) {
y = 320; // y = 320;
} // }
setPoint({ pageX: x, pageY: y }); // setPoint({ pageX: x, pageY: y });
console.log(x, y, 'xxxxxxyyyyyyyy'); // console.log(x, y, 'xxxxxxyyyyyyyy');
const percent = (x - xRange[0]) / (xRange[1] - xRange[0]); // const percent = (x - xRange[0]) / (xRange[1] - xRange[0]);
const value = Number((cctRange[1] * percent).toFixed()); // const value = Number((cctRange[1] * percent).toFixed());
// setColor(pointToRGB(x)); // // setColor(pointToRGB(x));
if (isAction) { // if (isAction) {
temperatureAction.set(value); // temperatureAction.set(value);
} // }
} // }
// function pointToRGB(pageX) { // function pointToRGB(pageX) {
// const half = (347 - 28) / 2; // const half = (347 - 28) / 2;
...@@ -166,7 +179,6 @@ export const LightPanel = React.memo<Props>(props => { ...@@ -166,7 +179,6 @@ export const LightPanel = React.memo<Props>(props => {
function progressEnd(e) { function progressEnd(e) {
console.log(e, 'progressEnd'); console.log(e, 'progressEnd');
handleProgress(e); handleProgress(e);
} }
function handleProgress(e, isAction = true) { function handleProgress(e, isAction = true) {
...@@ -209,12 +221,31 @@ export const LightPanel = React.memo<Props>(props => { ...@@ -209,12 +221,31 @@ export const LightPanel = React.memo<Props>(props => {
></Image> ></Image>
</View> </View>
</View> </View>
<View <LampRectWhitePicker
className={styles.lightMiddle} canvasId="rectPicker"
onTouchStart={touchStart} rectWidth={336}
onTouchMove={handleTouch} rectHeight={155}
onTouchEnd={touchEnd} thumbWidth={14}
></View> temperature={temperature}
direction="right"
isShowColorTip={false}
containerStyle={{
borderRadius: '16px 16px 0 0',
overflow: 'hidden',
width:'336px',
height:'155px'
}}
onTouchStart={(_temp: number) => {
setTemp(_temp);
}}
onTouchMove={(_temp: number) => {
setTemp(_temp);
}}
onTouchEnd={(_temp: number) => {
setTemp(_temp);
temperatureAction.set(_temp);
}}
/>
<View <View
className={styles.progressBg} className={styles.progressBg}
onTouchStart={progressStart} onTouchStart={progressStart}
...@@ -242,11 +273,12 @@ export const LightPanel = React.memo<Props>(props => { ...@@ -242,11 +273,12 @@ export const LightPanel = React.memo<Props>(props => {
</View> </View>
</View> </View>
<View <View
className={styles.moveCircle} className={styles.modalback}
style={{ style={{
top: point.pageY - 14 + 'px', // background: 'rgba(0, 0, 0, 0.1)',
left: point.pageX - 14 + 'px', filter: 'blur(35px)',
backgroundColor: 'transparent', '-webkit-filter':'blur(35px)',
visibility: isShow ? 'visible' : 'hidden',
}} }}
></View> ></View>
</View> </View>
......
src/pages/home/index.module.less
View file @ a1d2e9dd
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
overflow-y: hidden;
} }
.header { .header {
......
src/pages/home/index.tsx
View file @ a1d2e9dd
...@@ -20,7 +20,7 @@ import { router, usePageEvent, setNavigationBarTitle, Slider } from '@ray-js/ray ...@@ -20,7 +20,7 @@ import { router, usePageEvent, setNavigationBarTitle, Slider } from '@ray-js/ray
import React from 'react'; import React from 'react';
import { useSelector } from '@/redux'; import { useSelector } from '@/redux';
import styles from './index.module.less'; import styles from './index.module.less';
import { Image} from '@ray-js/components'; import { Image } from '@ray-js/components';
import iconTempr from '../../../public/icon-temperature.png'; import iconTempr from '../../../public/icon-temperature.png';
import iconFanBg from '../../../public/icon-fan-bg.png'; import iconFanBg from '../../../public/icon-fan-bg.png';
import iconFan from '../../../public/icon-fan.png'; import iconFan from '../../../public/icon-fan.png';
...@@ -65,14 +65,14 @@ export function Home() { ...@@ -65,14 +65,14 @@ export function Home() {
return Boolean(props[fanSwitchCode]); return Boolean(props[fanSwitchCode]);
}); });
const fanSpeedVal = useSdmProps(props => { const fanSpeedVal = useSdmProps(props => {
return Number(props[fanSpeedCode]) return Number(props[fanSpeedCode]);
}); });
const [sliderValue, setSliderValue] = useState(fanSpeedVal); const [sliderValue, setSliderValue] = useState(fanSpeedVal);
useEffect(() => { useEffect(() => {
if (fanSpeedVal !== sliderValue) { if (fanSpeedVal !== sliderValue) {
setSliderValue(fanSpeedVal) setSliderValue(fanSpeedVal);
} }
}, [fanSpeedVal]) }, [fanSpeedVal]);
const fanModeVal = useSdmProps(props => props[fanModeCode]); const fanModeVal = useSdmProps(props => props[fanModeCode]);
const currentTempVal = useSdmProps(props => props[currentTempCode]); const currentTempVal = useSdmProps(props => props[currentTempCode]);
...@@ -83,8 +83,6 @@ export function Home() { ...@@ -83,8 +83,6 @@ export function Home() {
const speedAction = actions[fanSpeedCode] as DpCommonAction<number>; const speedAction = actions[fanSpeedCode] as DpCommonAction<number>;
const fanModeAction = actions[fanModeCode] as DpCommonAction<string>; const fanModeAction = actions[fanModeCode] as DpCommonAction<string>;
const menu = [ const menu = [
{ {
title: 'Switch', title: 'Switch',
...@@ -287,9 +285,18 @@ export function Home() { ...@@ -287,9 +285,18 @@ export function Home() {
); );
})} })}
</View> </View>
<View
className={styles.modalOverlay}
style={{ visibility: menuIndex == 1 ? 'visible' : 'hidden' }}
onClick={toggleModal}
>
<View
className={styles.modalBg}
style={{ visibility: menuIndex == 1 ? 'visible' : 'hidden' }}
onClick={stopFurtherClick}
>
{menuIndex == 1 && ( {menuIndex == 1 && (
<View className={styles.modalOverlay} onClick={toggleModal}>
<View className={styles.modalBg} onClick={stopFurtherClick}>
<Swiper dots={true} dotActiveColor="#6395F6" dotColor="rgba(99,149,246, 0.2)"> <Swiper dots={true} dotActiveColor="#6395F6" dotColor="rgba(99,149,246, 0.2)">
<SwiperItem> <SwiperItem>
<View className={styles.swiperItem}> <View className={styles.swiperItem}>
...@@ -302,11 +309,16 @@ export function Home() { ...@@ -302,11 +309,16 @@ export function Home() {
</View> </View>
</SwiperItem> </SwiperItem>
</Swiper> </Swiper>
)}
</View> </View>
</View> </View>
)} {/* )} */}
{menuIndex == 3 && ( {/* {menuIndex == 3 && ( */}
<View className={styles.modalOverlay} onClick={toggleModal}> <View
className={styles.modalOverlay}
style={{ visibility: menuIndex == 3 ? 'visible' : 'hidden' }}
onClick={toggleModal}
>
<View <View
className={styles.modalBg} className={styles.modalBg}
style={{ style={{
...@@ -322,7 +334,7 @@ export function Home() { ...@@ -322,7 +334,7 @@ export function Home() {
<FanVertical></FanVertical> <FanVertical></FanVertical>
</View> </View>
</View> </View>
)} {/* )} */}
<LightPanel isShow={isShowModal} setModal={setModal}></LightPanel> <LightPanel isShow={isShowModal} setModal={setModal}></LightPanel>
</View> </View>
); );
......
yarn.lock
View file @ a1d2e9dd
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment