Skip to content

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

fix

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