update

src/components/input/SlidngScale.tsx

@@ -23,28 +23,37 @@ export default function Component(props: {
     updateStatus: Function,
     special: any
 }) {
-    debugger
     const scrollViewRef = useRef<any>();
-    const isFT_IN = props.special == 'FT_IN'
-    const minNum: number = props.min;//props.step < 1 ?props.default_value-2:props.default_value-20//
-    const maxNum: number = props.max;//props.step < 1 ?props.default_value+2:props.default_value+20//
-    const min = props.min//(props.default_value - props.step * 20) < props.min ? props.min : props.default_value - props.step * 20
-    const max = props.max//(props.default_value + props.step * 20) > props.max ? props.max : props.default_value + props.step * 20
-    // const [minNum, setMinNum] = useState(min)
-    // const [maxNum, setMaxNum] = useState(max)
+
+    const minNum: number = props.min;
+    const maxNum: number = props.max;
+    const min = props.min
+    const max = props.max
 
     const stepNum: number = props.step * 10;
     const jingdu: number = props.step < 0.1 ? 100 : props.step < 1 ? 10 : 1;
     const list: any[] = [];
-    // const [list, setList] = useState([])
 
     const slidngWidth = 10
 
+    const [isFT_IN, setIsFT_IN] = useState(props.special == 'FT_IN')
     const [current, setCurrent] = useState(props.default_value)
     const [left, setLeft] = useState((props.default_value - min) * slidngWidth * (isFT_IN ? 1.2 : 1) / props.step - 0.5);
     const [isDraging, setIsDraging] = useState(false)
     const [isEnd, setIsEnd] = useState(true)
     const [enableText, setEnableText] = useState(true)
+    const [isChanging, setIsChanging] = useState(false)
+
+    useEffect(() => {
+        setCurrent(props.default_value)
+        setIsFT_IN(props.special == 'FT_IN')
+        setLeft((props.default_value - min) * slidngWidth * (props.special == 'FT_IN' ? 1.2 : 1) / props.step - 0.5)
+        setIsChanging(true)
+        setTimeout(() => {
+            setIsChanging(false)
+        }, 700)
+    }, [props.unit, props.default_value,props.special])
+
 
     if (isFT_IN) {
         for (var i: number = minNum; i <= maxNum * 1.2; i += props.step) {
@@ -59,7 +68,7 @@ export default function Component(props: {
         }
     }
     else {
-        
+
         for (var i: number = minNum; i <= maxNum; i += props.step) {
             var value: number = parseFloat(i.toFixed(props.scale == 0 ? 1 : props.scale));
             var isBig: boolean = Math.round((value - minNum) * jingdu) % Math.round(stepNum * jingdu) == 0;
@@ -74,11 +83,6 @@ export default function Component(props: {
     }
 
 
-    // const [showScrollView, setShowScrollView] = useState(false)
-
-    useEffect(() => {
-    }, [])
-
     useEffect(() => {
         if (process.env.TARO_ENV == 'weapp') {
             if (isEnd && !isDraging) {
@@ -93,6 +97,9 @@ export default function Component(props: {
     }, [isEnd, isDraging])
 
     function scrollContent(e) {
+        if (isChanging) {
+            return
+        }
         if (process.env.TARO_ENV == 'rn') {
             update(e)
             setIsDraging(false)
@@ -218,7 +225,7 @@ export default function Component(props: {
         var obj = list[i];
         if (obj.showBig) {
             //字体设置参考 https://segmentfault.com/a/1190000006110417
-            svgNumber += `<text x="${i * (isFT_IN ? 12 : 10) + 1 + 30}" y="${rpxToPx(2 + 36)}" text-anchor="middle" fill="white" font-family="PingFang SC,Helvetica Neue,Helvetica,Arial,Hiragino Sans GB,Heiti SC,Microsoft YaHei" font-size="${rpxToPx(36)}">${isFT_IN ?parseInt('' + obj.value / 12):obj.value}</text>`
+            svgNumber += `<text x="${i * (isFT_IN ? 12 : 10) + 1 + 30}" y="${rpxToPx(2 + 36)}" text-anchor="middle" fill="white" font-family="PingFang SC,Helvetica Neue,Helvetica,Arial,Hiragino Sans GB,Heiti SC,Microsoft YaHei" font-size="${rpxToPx(36)}">${isFT_IN ? parseInt('' + obj.value / 12) : obj.value}</text>`
         }
     }
     svgLine += `</svg>`
@@ -249,6 +256,7 @@ export default function Component(props: {
     <rect width="100%" height="100%" fill="url(#pattern)" />
   </svg>`
 
+    console.log(current)
     return <View className="slidng">
         {
             isFT_IN && <View className="number_bg" style={{ opacity: enableText ? 1 : 0.4 }}>
@@ -330,13 +338,7 @@ export default function Component(props: {
 
             </ScrollView>
 
-            {/* <VirtualList height={rpxToPx(300)} width={rpxToPx(750)} onScroll={handleScroll} layout="horizontal"
-                initialScrollOffset={left}
-                itemCount={list.length}
-                item={itemContent}
-                itemSize={10}
-                itemData={list}
-            /> */}
+
 
             <Image className="center_line" src={require('@assets/images/scale_center.png')} />
             {/* <View className="center_line" /> */}

src/components/input/SlidngScale_副本.tsx

@@ -20,9 +20,11 @@ export default function Component(props: {
     scale: number,
     changed: Function, unit: string
     themeColor: string,
-    updateStatus: Function
+    updateStatus: Function,
+    special: any
 }) {
     const scrollViewRef = useRef<any>();
+    const isFT_IN = props.special == 'FT_IN'
     const minNum: number = props.min;//props.step < 1 ?props.default_value-2:props.default_value-20//
     const maxNum: number = props.max;//props.step < 1 ?props.default_value+2:props.default_value+20//
     const min = props.min//(props.default_value - props.step * 20) < props.min ? props.min : props.default_value - props.step * 20
@@ -38,13 +40,17 @@ export default function Component(props: {
     const slidngWidth = 10
 
     const [current, setCurrent] = useState(props.default_value)
-    const [left, setLeft] = useState((props.default_value - min) * slidngWidth / props.step - 0.5);
+    const [left, setLeft] = useState((props.default_value - min) * slidngWidth * (isFT_IN ? 1.2 : 1) / props.step - 0.5);
     const [isDraging, setIsDraging] = useState(false)
     const [isEnd, setIsEnd] = useState(true)
     const [enableText, setEnableText] = useState(true)
 
-    for (var i: number = minNum; i <= maxNum; i += props.step) {
-        if (props.unit == 'in') {
+    useEffect(()=>{
+    },[props.unit])
+
+
+    if (isFT_IN) {
+        for (var i: number = minNum; i <= maxNum * 1.2; i += props.step) {
             var value: number = parseFloat(i.toFixed(props.scale == 0 ? 1 : props.scale));
             var isBig: boolean = i % 12 == 0;
             var isMiddle: boolean = i % 6 == 0 && !isBig
@@ -54,7 +60,10 @@ export default function Component(props: {
                 showMiddle: isMiddle
             })
         }
-        else {
+    }
+    else {
+        
+        for (var i: number = minNum; i <= maxNum; i += props.step) {
             var value: number = parseFloat(i.toFixed(props.scale == 0 ? 1 : props.scale));
             var isBig: boolean = Math.round((value - minNum) * jingdu) % Math.round(stepNum * jingdu) == 0;
             var isMiddle: boolean = (Math.round((value - minNum) * jingdu) * 2) % Math.round(stepNum * jingdu) == 0;
@@ -65,19 +74,9 @@ export default function Component(props: {
                 showMiddle: isMiddle && !isBig && i >= minNum && i <= maxNum
             })
         }
-        
-
-
-
     }
 
 
-    // const [showScrollView, setShowScrollView] = useState(false)
-
-    useEffect(() => {
-        debugger
-    }, [])
-
     useEffect(() => {
         if (process.env.TARO_ENV == 'weapp') {
             if (isEnd && !isDraging) {
@@ -147,8 +146,11 @@ export default function Component(props: {
 
     function update(e) {
         const { scrollLeft } = e.detail;
-
+        debugger
         var count = scrollLeft / slidngWidth;
+        if (isFT_IN) {
+            count = count / 1.2
+        }
         var strValue = (minNum + Math.round(count) * props.step).toFixed(props.scale == 0 ? 1 : props.scale);
         if ((strValue as any) < minNum) {
             strValue = minNum as any;
@@ -193,34 +195,28 @@ export default function Component(props: {
     const scrollEnd = (e) => {
     }
 
-    function itemContent(data) {
-        var item = list[data.index]
-        var index = data.index
-        return <View style={{ width: 2, height: 100, backgroundColor: 'red', marginRight: 8 }}></View>
-    }
-
-    var svgLine = `<svg xmlns="http://www.w3.org/2000/svg" width="${props.unit=='in'?120:100}" height="${rpxToPx(28)}">`;
+    var svgLine = `<svg xmlns="http://www.w3.org/2000/svg" width="${isFT_IN ? 144 : 100}" height="${rpxToPx(28)}">`;
     var svgNumber = `<svg xmlns="http://www.w3.org/2000/svg" width="${list.length * 10 - 8 + 60}" height="${rpxToPx(38)}">`;
-    if  (props.unit=='in'){
+    if (isFT_IN) {
         for (var i = 0; i < 12; i++) {
             var obj = list[i];
             svgLine += `<line x1="${i * 12 + 1}" y1="0" x2="${i * 12 + 1}" y2="${obj.showBig ? rpxToPx(28) : obj.showMiddle ? rpxToPx(24) : rpxToPx(16)}" stroke="${props.themeColor}"  stroke-width="2"/>`
-    
+
         }
     }
     else {
         for (var i = 0; i < 10; i++) {
             var obj = list[i];
             svgLine += `<line x1="${i * 10 + 1}" y1="0" x2="${i * 10 + 1}" y2="${obj.showBig ? rpxToPx(28) : obj.showMiddle ? rpxToPx(24) : rpxToPx(16)}" stroke="${props.themeColor}"  stroke-width="2"/>`
-    
+
         }
     }
-    
+
     for (var i = 0; i < list.length; i++) {
         var obj = list[i];
         if (obj.showBig) {
             //字体设置参考 https://segmentfault.com/a/1190000006110417
-            svgNumber += `<text x="${i * 10 + 1 + 30}" y="${rpxToPx(2 + 36)}" text-anchor="middle" fill="white" font-family="PingFang SC,Helvetica Neue,Helvetica,Arial,Hiragino Sans GB,Heiti SC,Microsoft YaHei" font-size="${rpxToPx(36)}">${obj.value}</text>`
+            svgNumber += `<text x="${i * (isFT_IN ? 12 : 10) + 1 + 30}" y="${rpxToPx(2 + 36)}" text-anchor="middle" fill="white" font-family="PingFang SC,Helvetica Neue,Helvetica,Arial,Hiragino Sans GB,Heiti SC,Microsoft YaHei" font-size="${rpxToPx(36)}">${isFT_IN ?parseInt('' + obj.value / 12):obj.value}</text>`
         }
     }
     svgLine += `</svg>`
@@ -232,9 +228,9 @@ export default function Component(props: {
     var imgNum = `url("data:image/svg+xml,${basestr2}");`
 
     var svgLine2 = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">`
-    svgLine2 += `<pattern id="pattern" width="${props.unit=='in'?120:100}" height="${rpxToPx(28)}" patternUnits="userSpaceOnUse">`
+    svgLine2 += `<pattern id="pattern" width="${isFT_IN ? 120 : 100}" height="${rpxToPx(28)}" patternUnits="userSpaceOnUse">`
 
-    if  (props.unit=='in'){
+    if (isFT_IN) {
         for (var i = 0; i < 12; i++) {
             var obj = list[i];
             svgLine2 += `<line x1="${i * 12 + 1}" y1="0" x2="${i * 12 + 1}" y2="${obj.showBig ? rpxToPx(28) : obj.showMiddle ? rpxToPx(24) : rpxToPx(16)}" stroke="${props.themeColor}"  stroke-width="2"/>`
@@ -246,24 +242,41 @@ export default function Component(props: {
             svgLine2 += `<line x1="${i * 10 + 1}" y1="0" x2="${i * 10 + 1}" y2="${obj.showBig ? rpxToPx(28) : obj.showMiddle ? rpxToPx(24) : rpxToPx(16)}" stroke="${props.themeColor}"  stroke-width="2"/>`
         }
     }
-    
+
     svgLine2 += `</pattern>
     <rect width="100%" height="100%" fill="url(#pattern)" />
   </svg>`
 
+    return <View className="slidng">
+        {
+            isFT_IN && <View className="number_bg" style={{ opacity: enableText ? 1 : 0.4 }}>
+                {
+                    parseInt(current / 12 + '') > 0 && (process.env.TARO_ENV == 'weapp' ? <Text className="number" style={{ fontFamily: "PingFang SC,Helvetica Neue, Helvetica, Arial, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;" }}>{parseInt(current / 12 + '')}</Text> :
+                        <Text className="number">{parseInt(current / 12 + '')}</Text>)
+                }
 
+                {parseInt(current / 12 + '') > 0 && <Text className="unit" style={{ marginRight: 2 }}>ft</Text>}
+                {
+                    current % 12 > 0 && (process.env.TARO_ENV == 'weapp' ? <Text className="number" style={{ fontFamily: "PingFang SC,Helvetica Neue, Helvetica, Arial, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;" }}>{current % 12}</Text> :
+                        <Text className="number">{current % 12}</Text>)
+                }
 
-    const isLeonTest = true
+                {
+                    current % 12 > 0 && <Text className="unit">in</Text>
+                }
+            </View>
+        }
+        {
+            !isFT_IN && <View className="number_bg" style={{ opacity: enableText ? 1 : 0.4 }}>
+                {
+                    process.env.TARO_ENV == 'weapp' ? <Text className="number" style={{ fontFamily: "PingFang SC,Helvetica Neue, Helvetica, Arial, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;" }}>{current}</Text> :
+                        <Text className="number">{current}</Text>
+                }
 
-    return <View className="slidng">
-        <View className="number_bg" style={{ opacity: enableText ? 1 : 0.4 }}>
-            {
-                process.env.TARO_ENV == 'weapp' ? <Text className="number" style={{ fontFamily: "PingFang SC,Helvetica Neue, Helvetica, Arial, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;" }}>{current}</Text> :
-                    <Text className="number">{current}</Text>
-            }
+                <Text className="unit">{props.unit}</Text>
+            </View>
+        }
 
-            <Text className="unit">{props.unit}</Text>
-        </View>
 
         <View className="scroll_bg">
             <View className="shadow_top" />
@@ -287,37 +300,26 @@ export default function Component(props: {
                 <View className="scrollContent">
                     <View className="scrollPadding" style={{ width: rpxToPx(372) }} />
                     <View className="content">
-                        {
-                            !isLeonTest && list.map((item, index) => {
-                                return <View className={(item as any).showBig ? 'slidng_item_big' : (item as any).showMiddle ? 'slidng_item_middle' : 'slidng_item'}
-                                    style={{ width: 2, marginRight: list.length - 1 == index ? 0 : 8, backgroundColor: props.themeColor, zIndex: 0 }} key={index}>
-                                    {
-                                        (item as any).showBig ? <Text className="slidng_text">{(item as any).value}</Text> : null
-                                    }
-                                </View>
-                            })
-                        }
-                        {
-                            isLeonTest && <View>
-                                <View style={{ width: list.length * 10 - 8, height: 100 }}>
-                                    {
-                                        process.env.TARO_ENV == 'weapp' && <View style={{ width: list.length * 10 - 8, height: rpxToPx(28), backgroundImage: imgLines }} />
-                                    }
-                                    {
-                                        process.env.TARO_ENV == 'rn' && <SvgXml xml={svgLine2} width={list.length * 10 - 8} height={rpxToPx(28)} />
-                                    }
-
-                                    {process.env.TARO_ENV == 'weapp' &&
-                                        <View style={{ width: list.length * 10 - 8 + 60, marginLeft: -30, height: rpxToPx(38), backgroundImage: imgNum }} />}
-                                    {
-                                        process.env.TARO_ENV == 'rn' &&
-                                        <View style={{ flexDirection: 'row', marginLeft: -30, height: rpxToPx(40) }}>
-                                            <SvgXml xml={svgNumber} width={list.length * 10 - 8 + 60} height={rpxToPx(40)} />
-                                        </View>
-                                    }
-                                </View>
+                        <View>
+                            <View style={{ width: list.length * 10 - 8, height: 100 }}>
+                                {
+                                    process.env.TARO_ENV == 'weapp' && <View style={{ width: isFT_IN ? list.length * 10 - 8 : list.length * 10 - 8, height: rpxToPx(28), backgroundImage: imgLines, overflow: 'hidden' }} />
+                                }
+                                {
+                                    process.env.TARO_ENV == 'rn' && <SvgXml xml={svgLine2} width={list.length * 10 - 8} height={rpxToPx(28)} />
+                                }
+
+                                {process.env.TARO_ENV == 'weapp' &&
+                                    <View style={{ width: list.length * 10 - 8 + 60, marginLeft: -30, height: rpxToPx(38), backgroundImage: imgNum }} />}
+                                {
+                                    process.env.TARO_ENV == 'rn' &&
+                                    <View style={{ flexDirection: 'row', marginLeft: -30, height: rpxToPx(40) }}>
+                                        <SvgXml xml={svgNumber} width={list.length * 10 - 8 + 60} height={rpxToPx(40)} />
+                                    </View>
+                                }
                             </View>
-                        }
+                        </View>
+
 
                     </View>
                     <View className="scrollPadding" />

src/features/trackSomething/components/MetricHistory.tsx

@@ -1,7 +1,7 @@
 import { View, Text, Image } from "@tarojs/components";
 import './MetricHistory.scss'
 import RecordItem from "@/features/common/RecordItem";
-import { deleteMetricRecord, updateMetricStandard } from "@/services/trackSomething";
+import { deleteMetricRecord, metricRecord, updateMetricStandard } from "@/services/trackSomething";
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { TimeFormatter } from "@/utils/time_format";
@@ -12,6 +12,7 @@ import Taro from "@tarojs/taro";
 export default function Component(props: { records: any[] }) {
     const user = useSelector((state: any) => state.user);
     const [list, setList] = useState(props.records)
+    const [selIndex, setSelIndex] = useState([-1, -1])
     const [selReference, setSelReference] = useState(global.selMetricItem && global.selMetricItem.references.length > 0 ? global.selMetricItem.references[0] : null)
     useEffect(() => {
         setList(props.records)
@@ -68,6 +69,28 @@ export default function Component(props: { records: any[] }) {
         })
     }
 
+    function tapItem(index, j) {
+        var data = global.selMetricItem;
+        if (data.type == 'basic' && data.schemas[0].unit_options.length > 0) {
+            setSelIndex([index, j])
+        }
+    }
+
+    function changeUnit(index){
+        var data = global.selMetricItem;
+        var unit = data.schemas[0].unit_options[index].unit;
+        const indexs = selIndex;
+        var temps = JSON.parse(JSON.stringify(list))
+        var array = temps[indexs[0]]
+        var selItem = array.records[indexs[1]]
+        const {id} = selItem
+        metricRecord(id,{show_unit:unit}).then(res=>{
+            temps[indexs[0]].records[indexs[1]] = res
+            setList(temps)
+            setSelIndex([-1,-1])
+        })
+    }
+
 
 
 
@@ -127,7 +150,7 @@ export default function Component(props: { records: any[] }) {
             metricStandard()
         }
         {
-            (list as any).map(item => {
+            (list as any).map((item, index) => {
                 var showYear = lastYearStr != TimeFormatter.getYearByDate(item.date)
                 lastYearStr = TimeFormatter.getYearByDate(item.date)
                 return <View style={{ display: 'flex', flexDirection: 'column' }}>
@@ -136,17 +159,56 @@ export default function Component(props: { records: any[] }) {
                     }
                     <Text className="operate_day" style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>{TimeFormatter.getMonthAndDayByDate(item.date)}</Text>
                     {
-                        item.records.map(record => {
+                        item.records.map((record, j) => {
                             return <RecordItem delete={() => deleteRecord(record)}>
-                                <View className="operate_item1">
-                                    <Text className="value" style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>{record.type == 'composite' ? record.value : record.items[0].value}</Text>
+                                <View className="operate_item1" onClick={() => tapItem(index, j)} style={{ position: 'relative' }}>
                                     {
-                                        record.type == 'basic' && record.items.length > 1 && <Text className="value">/{record.items[1].value}</Text>
+                                        index == selIndex[0] && j == selIndex[1] && <View style={{ position: 'absolute', right: 20, zIndex: 1000000 }}>
+                                            <View style={{ display: 'flex', flexDirection: 'column', position: 'absolute', top: 30, right: 0, backgroundColor: 'red' }}>
+                                                {
+                                                    global.selMetricItem.schemas[0].unit_options.map((obj, k) => {
+                                                        return <View key={k * 1000} onClick={() => {
+
+                                                            changeUnit(k)
+                                                            setSelIndex([-1,-1])
+                                                            // var dt = JSON.parse(JSON.stringify(metricItem))
+                                                            // dt.schemas[index].chosen_unit = obj.unit
+                                                            // setMetricItem(dt)
+
+                                                            // setChangeIndex(index)
+                                                            // setTimeout(() => {
+                                                            //     setChangeIndex(-1)
+                                                            // }, 100)
+                                                        }}>
+                                                            <Text>{obj.unit}</Text>
+                                                        </View>
+                                                    })
+                                                }
+                                            </View>
+
+                                        </View>
                                     }
                                     {
-                                        record.type == 'basic' && record.items.length > 2 && <Text className="value">/{record.items[2].value}</Text>
+                                        record.items[0].special == 'FT_IN' ?
+                                            <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-end' }}>
+                                                <Text className="value" style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>{parseInt(record.items[0].value/12+'')}</Text>
+                                                <Text className="unit" style={{ marginBottom: 3, marginLeft: 3, marginRight: 3 }}>ft</Text>
+                                                <Text className="value" style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>{record.items[0].value%12}</Text>
+                                                <Text className="unit" style={{ marginBottom: 3, marginLeft: 3 }}>in</Text>
+                                            </View> :
+                                            <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-end' }}>
+                                                <Text className="value" style={{ backgroundColor: global.isDebug ? 'red' : 'transparent' }}>{record.type == 'composite' ? record.value : record.items[0].value}</Text>
+                                                {
+                                                    record.type == 'basic' && record.items.length > 1 && <Text className="value">/{record.items[1].value}</Text>
+                                                }
+                                                {
+                                                    record.type == 'basic' && record.items.length > 2 && <Text className="value">/{record.items[2].value}</Text>
+                                                }
+                                                <Text className="unit" style={{ marginBottom: 3,marginLeft:3 }}>{record.type == 'composite' ? record.unit ? record.unit : '' : record.items[0].unit}</Text>
+                                            </View>
                                     }
-                                    <Text className="unit">{record.type == 'composite' ? record.unit ? record.unit : '' : record.items[0].unit}</Text>
+
+
                                     <View style={{ flex: 1 }} />
                                     <Text className="time">{formateHourMinutes(record.timestamp)}</Text>
 

src/features/trackSomething/components/MetricModalAdd.tsx

@@ -9,6 +9,8 @@ export default function Component(props: { item: any, strTime: string, showPicke
     const [metricItem, setMetricItem] = useState(props.item)
     const [enable, setEnable] = useState(true)
     const [currentSel, setCurrentSel] = useState<any>({})
+    const [selUnit,setSelUnit] = useState(-1)
+    const [changeIndex,setChangeIndex] = useState(-1)
     // const [disableCode,setDisableCode] = useState(0)
     const { t } = useTranslation()
 
@@ -45,8 +47,30 @@ export default function Component(props: { item: any, strTime: string, showPicke
                                 }}>{item.name}</Text>
                             }
                             {
-                                unit_options && unit_options.length > 1 && <View style={{position:'absolute',right:20,}}>
-                                    <Text style={{color:'#fff'}}>切换</Text>
+                                unit_options && unit_options.length > 1 && <View style={{position:'absolute',right:20,zIndex:1000000}}>
+                                    <Text style={{color:'#fff'}} onClick={()=>{
+                                        setSelUnit(index)
+                                    }}>切换</Text>
+                                    {
+                                        selUnit==index && <View style={{display:'flex',flexDirection:'column',position:'absolute',top:30,right:0,backgroundColor:'red'}}>
+                                            {
+                                                unit_options.map((obj,j)=>{
+                                                    return <View key={j*1000} onClick={()=>{
+                                                        var dt = JSON.parse(JSON.stringify(metricItem))
+                                                        dt.schemas[index].chosen_unit = obj.unit
+                                                        setMetricItem(dt)
+
+                                                        setChangeIndex(index)
+                                                        setTimeout(()=>{
+                                                            setChangeIndex(-1)
+                                                        },100)
+                                                    }}>
+                                                        <Text>{obj.unit}</Text>
+                                                    </View>
+                                                })
+                                            }
+                                        </View>
+                                    }
                                 </View>
                             }
                             <SlidngScale step={obj.step} min={obj.min} max={obj.max}

src/pages/common/RecordsHistory.tsx

@@ -220,6 +220,8 @@ export default function Page() {
             })
         }
         else if (router.params.type == 'metric') {
+            // var data = global.selMetricItem;
+            // debugger
             metricRecords(
                 {
                     page: page,

src/services/trackSomething.tsx

@@ -151,6 +151,17 @@ export const metricRecords = (params) => {
     })
 }
 
+export const metricRecord = (id,params) => {
+    return new Promise((resolve) => {
+        request({
+            url: API_METRIC_RECORDS+`/${id}`, method: 'GET', data: { ...params }
+        }).then(res => {
+            resolve(res);
+            // dispatch(loginSuccess(res));
+        })
+    })
+}
+
 export const metricFollows = (params) => {
     return new Promise((resolve) => {
         request({