Skip to content

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

fix

parent 96254d43
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 76 additions and 580 deletions
fan.json deleted 100644 → 0
View file @ 96254d43
This diff is collapsed.
src/app.tsx
View file @ 5eac97ee
......@@ -5,7 +5,7 @@ import '@/i18n';
import composeLayout from './composeLayout';
import { SdmProvider } from '@ray-js/sdm-react';
import { devices } from '@/devices';
import { ProductName } from '@/constants';
// import { ProductName } from '@/constants';
const { initPanelEnvironment } = kit;
......@@ -14,7 +14,7 @@ interface Props {
}
initPanelEnvironment({ useDefaultOffline: true });
class App extends React.Component<Props> {
class App extends React.Component<Props>{
componentDidMount() {
console.info('app did mount ');
}
......@@ -25,7 +25,7 @@ class App extends React.Component<Props> {
render() {
return <SdmProvider value={devices[ProductName]} >{this.props.children}</SdmProvider>;
return <SdmProvider value={devices.fan} >{this.props.children}</SdmProvider>;
}
}
......
src/components/light-panel/index.module.less
View file @ 5eac97ee
......@@ -9,23 +9,28 @@
// position: absolute;
// top: calc(50vh - 175px);
margin-top: 90px;
padding: 20px 0 40px;
padding: 0 0 40px;
color: #000000;
z-index: 9999;
}
.lightModalTop {
display: flex;
align-items: center;
padding: 0 20px;
// padding: 0 20px;
width: 100%;
justify-content: space-between;
font-size: 16px;
margin-bottom: 40px;
}
.lightCloseBg {
padding: 20px 20px 0;
}
.lightModalClose {
width: 24px;
height: 24px;
}
.lightMiddle {
// width: 100%;
height: 155px;
......@@ -86,6 +91,7 @@
top: 1px;
bottom: 1px;
z-index: 2;
border-radius: 0 0 0 16px;
}
.lightBtn {
width: 310px;
......
src/components/light-panel/index.tsx
View file @ 5eac97ee
......@@ -23,7 +23,7 @@ export const LightPanel = React.memo<Props>(props => {
const brightCode = 'bright_value'
const temperatureCode = 'temp_value'
const switchCode = 'switch_led'
const switchCode = 'light'
let { isShow, setModal} = props;
const brightVal = useSdmProps(dpState => {
......@@ -33,8 +33,8 @@ export const LightPanel = React.memo<Props>(props => {
});
const temperatureVal = useSdmProps(dpState => {
const val = dpState[temperatureCode]
const percent = getValueInRange(val || 0, cctRange).percent
return percent
// const percent = getValueInRange(val || 0, cctRange).percent
return val
});
const switchVal = useSdmProps(dpState => dpState[switchCode]);
......@@ -44,12 +44,14 @@ 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: getOrignPointX(), pageY: 234})
const [point, setPoint] = useState({pageX: getOrignPointX(), pageY: 250})
const [selectColor, setColor] = useState(pointToRGB(point.pageX))
function getOrignPointX() {
const percent = getValueInRange(temperatureVal || 10, cctRange).percent
return 28 + 319 * Number((percent / 100).toFixed())
const originX = 28 + 319 * (percent / 100)
console.log(temperatureVal, percent, originX);
return originX
}
//0-value是值 1-value是百分比 左边最小值是0，右边最大值range[1]，起始位置rang[0]
function getValueInRange(value, range, type = 0) {
......@@ -61,21 +63,15 @@ export const LightPanel = React.memo<Props>(props => {
}
function touchStart(e) {
console.log(e, 'start touch');
handlePoint(e)
handlePoint(e)
}
function handleTouch(e) {
// console.log(e, 'handle touch');
// const point = e.changedTouches.length && e.changedTouches[0]
// console.log(point, 'pppppppoint');
// handlePoint(e)
handlePoint(e)
}
function touchEnd(e) {
console.log(e, 'end touch');
handlePoint(e)
handlePoint(e)
}
function handlePoint(e) {
......@@ -145,7 +141,7 @@ export const LightPanel = React.memo<Props>(props => {
function progressMove(e) {
console.log(e, 'progressMove');
// handleProgress(e)
handleProgress(e)
}
function progressEnd(e) {
......@@ -172,11 +168,12 @@ export const LightPanel = React.memo<Props>(props => {
<View className={styles.modalback} style={{background:'rgba(0, 0, 0, 0.1)',backdropFilter:'blur(35px)', visibility: isShow ? 'visible':'hidden' }}>
<View className={styles.lightModal}>
<View className={styles.lightModalTop}>
<View>Light
</View>
<View className={styles.lightCloseBg}>Light</View>
<View className={styles.lightCloseBg}>
<Image className={styles.lightModalClose} src={iconClose} onClick={() => {
setModal(false)
}}></Image>
</View>
</View>
<View
className={styles.lightMiddle}
......@@ -190,7 +187,7 @@ export const LightPanel = React.memo<Props>(props => {
onTouchEnd={progressEnd}>
<Image className={styles.progressSun} src={iconSun}></Image>
<View className={styles.progressTitle}>{brightVal}%</View>
<View className={styles.progressBar} style={{width: brightVal + '%'}}></View>
<View className={styles.progressBar} style={{width: (brightVal - 0.5) + '%', borderBottomRightRadius: brightVal == 100 ? '16px':'0'}}></View>
</View>
<View className={styles.lightBtn} style={{backgroundColor: switchVal ? '#6395F6':'rgba(0,0,0,0.5)'}} onClick={handleLightOn}>
<Image className={styles.lightBtnIcon} src={iconLightWhite}></Image>
......
src/pages/home/index.module.less
View file @ 5eac97ee
......@@ -105,19 +105,24 @@
position: relative;
}
.modalBg {
position: absolute;
left: 0;
right: 0;
bottom: 101px;
// position: absolute;
// left: 0;
// right: 0;
margin-bottom: -164px;
display: flex;
flex-direction: column;
// align-items: flex-end;
background-color: white;
min-height: 127px;
flex-direction: column;
width: 90vw;
z-index: 999;
box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.05);
box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.05);
border-radius: 24px;
align-self: center;
}
.swiper {
width: 100%;
......@@ -128,6 +133,7 @@
width: 36px;
height: 16px;
margin-bottom: -1px;
z-index: 10000;
}
.sliderBg {
......
src/pages/home/index.tsx
View file @ 5eac97ee
......@@ -16,7 +16,7 @@ import { Text, View, Swiper, SwiperItem} from '@ray-js/components';
// openTimerPage,
// } from '@ray-js/api';
// import { hooks } from '@ray-js/panel-sdk';
import { router, usePageEvent, setNavigationBarTitle } from '@ray-js/ray';
import { router, usePageEvent, setNavigationBarTitle} from '@ray-js/ray';
import React from 'react';
import { useSelector } from '@/redux';
import styles from './index.module.less';
......@@ -63,7 +63,9 @@ export function Home() {
const fanModeCode = 'mode'
const currentTempCode = 'temp_current'
const isOpen = useSdmProps((props) => props[fanSwitchCode])
const isOpen = useSdmProps((props) => {
return Boolean(props[fanSwitchCode])
})
const spinSpeed = useSdmProps((props) => Number(props[fanSpeedCode]))
const fanModeVal = useSdmProps((props) => props[fanModeCode])
......@@ -191,7 +193,20 @@ export function Home() {
</View>
)
}
const toggleModal = () => {
console.log('toggleModal');
// setModal(false)
setMenuIndex(null)
};
const modalSetting = {
show: true,
position: 'center',
overlay:true,
onClickOverlay: toggleModal,
overlayStyle: {backgroundColor: 'transparent'}
}
return (
<View className={styles.page}>
......@@ -208,16 +223,18 @@ export function Home() {
</View>
<View className={styles.sliderBg}>
<Slider
activeColor='linear-gradient(180deg, #87ABF2 11.62%, #4B7EE2 100%)'
activeColor='linear-gradient(-90deg, #87ABF2 11.62%, #4B7EE2 100%)'
blockColor='white'
blockSize={28}
min={0}
min={1}
max={100}
value={spinSpeed}
step={1}
disabled={!isOpen}
onChange={(e) => {
console.log('SliderChange', e)
speedAction.set(e.value)
}}
onChanging={(e) => {
speedAction.set(e.value)
}}
/>
......@@ -236,7 +253,8 @@ export function Home() {
>
{
menuIndex == 1 ?
<View className={styles.modalBg}>
<Modal show={true} position='center' overlay={true} onClickOverlay={toggleModal} overlayStyle={{backgroundColor: 'transparent'}}>
<View className={styles.modalBg} >
<Swiper dots={true} dotActiveColor='#6395F6' dotColor='rgba(99,149,246, 0.2)'>
<SwiperItem>
<View className={styles.swiperItem}>
......@@ -262,10 +280,14 @@ export function Home() {
</View>
</SwiperItem>
</Swiper>
</View>
: menuIndex == 3 ? <View className={styles.modalBg} style={{height: '213px', display: 'flex', flexDirection:'column', padding:'16px 16px 0', gap:'12px'}}>
</View>
</Modal>
: menuIndex == 3 ?
<Modal show={true} position='center' overlay={true} onClickOverlay={toggleModal} overlayStyle={{backgroundColor: 'transparent'}}>
<View className={styles.modalBg} style={{height: '213px', display: 'flex', flexDirection:'column', padding:'16px 16px 0', gap:'12px', marginBottom:'-102px'}}>
<FanVertical></FanVertical>
</View>
</View>
</Modal>
: null
}
<Image className={styles.middleware} src={middleware} style={{visibility: menuIndex == index ? 'visible':'hidden'}} />
......
src/routes.config.ts
View file @ 5eac97ee
......@@ -5,7 +5,8 @@ export const routes: Routes = [
route: '/',
path: '/pages/home/index',
name: 'Home',
},
id:'home'
}
// {
// route: '/common/page4/index',
// path: '/pages/common/page4/index',
......
typings/sdm.d.ts
View file @ 5eac97ee
......@@ -3,10 +3,10 @@ import { ProductName } from '@/constants';
type SmartDeviceSchema = typeof import('@/devices/schema').fanSchema;
type SmartDevices = {
[ProductName]?: import('@tuya-miniapp/sdm').SmartDeviceModel<SmartDeviceSchema>;
fan?: import('@tuya-miniapp/sdm').SmartDeviceModel<SmartDeviceSchema>;
};
declare module '@ray-js/sdm-react' {
// declare module '@ray-js/sdm-react' {
// export const SdmProvider: React.FC<{
// value: SmartDeviceModel<SmartDeviceSchema>;
// children: React.ReactNode;
......@@ -27,5 +27,5 @@ declare module '@ray-js/sdm-react' {
// selector: (device: SmartDeviceInstanceData) => Device,
// equalityFn?: (a: Device, b: Device) => boolean
// ): Device;
export function useActions(): SmartDevices[ProductName]['model']['actions'];
}
// export function useActions(): SmartDevices[ProductName]['model']['actions'];
// }
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