|
|
@@ -1,169 +1,11 @@
|
|
|
-import { View, Text, CoverView, Button } from "@tarojs/components";
|
|
|
-import { useState } from "react";
|
|
|
-import Modal from "@/components/Modal";
|
|
|
-import PickerViews from "@/components/PickerViews";
|
|
|
-import LimitPickers from "@/components/LimitPickers";
|
|
|
+import { View, Text} from "@tarojs/components";
|
|
|
import Metric from "@/features/trackSomething/components/Metric";
|
|
|
|
|
|
export default function Page() {
|
|
|
- const [isModalOpen, setIsModalOpen] = useState(false);
|
|
|
- const [isTimePickerOpen, setIsTimePickerOpen] = useState(false);
|
|
|
- const [pickerValue, setPickerValue] = useState([]);
|
|
|
- const [pickerItems, setPickerItems] = useState([]);
|
|
|
- const [isPoint, setIsPoint] = useState(false)
|
|
|
-
|
|
|
- global.refresh=()=>{
|
|
|
- console.log('refresh')
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- const openModal = () => {
|
|
|
- setIsModalOpen(true);
|
|
|
- };
|
|
|
-
|
|
|
- const closeModal = () => {
|
|
|
- setIsModalOpen(false);
|
|
|
- };
|
|
|
-
|
|
|
- function singlePicker() {
|
|
|
- var min = 5
|
|
|
- var max = 200
|
|
|
- var step = 1
|
|
|
- var value = 99
|
|
|
-
|
|
|
- var items: number[] = []
|
|
|
- for (var i = min; i <= max; i += step) {
|
|
|
- if (i == value) {
|
|
|
- setPickerValue([i - min] as any)
|
|
|
- }
|
|
|
- items.push(i)
|
|
|
- }
|
|
|
-
|
|
|
- setPickerItems([items] as any)
|
|
|
- setIsPoint(false)
|
|
|
-
|
|
|
- openModal()
|
|
|
- }
|
|
|
-
|
|
|
- function multiPicker() {
|
|
|
- var min = 5
|
|
|
- var max = 200
|
|
|
- var step = 1
|
|
|
- var value0 = 99
|
|
|
- var value1 = 111
|
|
|
-
|
|
|
- var items: number[] = []
|
|
|
- var items2: number[] = []
|
|
|
-
|
|
|
- var value0Index = 0
|
|
|
- var value1Index = 0
|
|
|
- for (var i = min; i <= max; i += step) {
|
|
|
- if (i == value0) {
|
|
|
- value0Index = i - min
|
|
|
- }
|
|
|
- if (i == value1) {
|
|
|
- value1Index = i - min
|
|
|
- }
|
|
|
- items.push(i)
|
|
|
- items2.push(i)
|
|
|
- }
|
|
|
-
|
|
|
- setPickerValue([value0Index, value1Index] as any)
|
|
|
- setPickerItems([items, items2] as any)
|
|
|
- setIsPoint(false)
|
|
|
- openModal()
|
|
|
- }
|
|
|
-
|
|
|
- function pointPicker() {
|
|
|
- var min = 5
|
|
|
- var max = 200
|
|
|
- var step = 0.1
|
|
|
- var value = 88.7
|
|
|
- var items: number[] = []
|
|
|
- var items2: number[] = []
|
|
|
-
|
|
|
- var value0Index = 0
|
|
|
- var value1Index = 0
|
|
|
-
|
|
|
- for (var i = min; i <= max; i++) {
|
|
|
- if (i == Math.floor(value)) {
|
|
|
- value0Index = i - min
|
|
|
- }
|
|
|
- items.push(i)
|
|
|
- // items2.push(i)
|
|
|
- }
|
|
|
-
|
|
|
- for (var i = 0; i <= 9; i++) {
|
|
|
- items2.push(i)
|
|
|
- }
|
|
|
- value1Index = 10 * (value - Math.floor(value));
|
|
|
-
|
|
|
- setPickerValue([value0Index, value1Index] as any)
|
|
|
- setPickerItems([items, items2] as any)
|
|
|
- setIsPoint(true)
|
|
|
-
|
|
|
- openModal()
|
|
|
- }
|
|
|
- function pickerChanged(e) {
|
|
|
- console.log(e)
|
|
|
- closeModal()
|
|
|
- }
|
|
|
-
|
|
|
- function showTimePicker() {
|
|
|
- setIsTimePickerOpen(true)
|
|
|
- }
|
|
|
-
|
|
|
|
|
|
return <View className="container">
|
|
|
<Text>Metric Page</Text>
|
|
|
<Metric />
|
|
|
<View style={{height:100,flexShrink:0,display:'flex'}}/>
|
|
|
</View>
|
|
|
-
|
|
|
- const limit = new Date().getTime() - 7 * 3600 * 1000 * 24;
|
|
|
- return (
|
|
|
- <View className="container">
|
|
|
- <Text onClick={openModal}>Metric Page</Text>
|
|
|
- <Text onClick={singlePicker}>单列Picker</Text>
|
|
|
- <Text onClick={multiPicker}>双列Picker</Text>
|
|
|
- <Text onClick={pointPicker}>小数1位Picker</Text>
|
|
|
-
|
|
|
- {
|
|
|
- isModalOpen && <Modal dismiss={closeModal}>
|
|
|
- <View style={{
|
|
|
- backgroundColor: 'white',
|
|
|
- display: 'flex', flexDirection: 'column',
|
|
|
- width: '100%', height: '50%', color: '#000'
|
|
|
- }}>
|
|
|
- <Text style={{ textAlign: 'center' }}>指标Title</Text>
|
|
|
- <Text style={{ textAlign: 'center' }} onClick={showTimePicker}>22:22</Text>
|
|
|
- <View style={{ position: 'relative' }}>
|
|
|
- <PickerViews onChange={pickerChanged}
|
|
|
- items={pickerItems}
|
|
|
- value={pickerValue}
|
|
|
- height={200} showBtns={true}
|
|
|
- onCancel={closeModal} />
|
|
|
- {isPoint && <View style={{
|
|
|
- position: 'absolute', width: '20%', height: 50, backgroundColor: 'transparent', left: '40%', top: 75,
|
|
|
- display: 'flex', alignItems: 'center', justifyContent: 'center'
|
|
|
- }}>
|
|
|
- <Text style={{ color: '#000', fontSize: 16, fontWeight: 'bold' }}>.</Text>
|
|
|
- </View>}
|
|
|
- </View>
|
|
|
-
|
|
|
- </View>
|
|
|
- </Modal>
|
|
|
- }
|
|
|
- {
|
|
|
-
|
|
|
- isTimePickerOpen && <Modal dismiss={() => setIsTimePickerOpen(false)}>
|
|
|
- <LimitPickers limit={limit} onCancel={()=>{setIsTimePickerOpen(false)}} onChange={(e) => {
|
|
|
- console.log(new Date(e))
|
|
|
- // pickerConfirm(e)
|
|
|
- // hidePicker()
|
|
|
- }} />
|
|
|
- </Modal>
|
|
|
- }
|
|
|
- </View>
|
|
|
- )
|
|
|
}
|