高级搜索

src/app.tsx

@@ -1,13 +1,26 @@
-import { MovableArea, View } from '@tarojs/components'
+import { Component } from 'react'
+import ContextBlueTooth from "@/use/contextBlueTooth"
+
 import './app.scss'
 
+class App extends Component {
 
-const App = ({ children }) => {
+  componentDidMount () {}
-  return (
+
-    <>
+  componentDidShow () {}
-        {children}
+
-    </>
+  componentDidHide () {}
-  )
+
+  componentDidCatchError () {}
+
+  // this.props.children 是将要会渲染的页面
+  render () {
+    return (
+      <ContextBlueTooth>
+        {this.props.children}
+      </ContextBlueTooth>
+    )
+  }
 }
 
 export default App

src/common/bluetooth/color/colorDiff.js

@@ -0,0 +1,86 @@
+module.exports = function(lab1, lab2){
+	
+	var rgb2labArray1 = lab1;
+	var rgb2labArray2 = lab2;
+	
+	var l1 = rgb2labArray1[0];
+	var a1 = rgb2labArray1[1];
+	var b1 = rgb2labArray1[2];
+	
+	var l2 = rgb2labArray2[0];
+	var a2 = rgb2labArray2[1];
+	var b2 = rgb2labArray2[2];
+	
+	
+	var avg_lp 		= (l1 + l2) / 2;
+	var c1 			= Math.sqrt(Math.pow(a1, 2) + Math.pow(b1, 2));
+	var c2 			= Math.sqrt(Math.pow(a2, 2) + Math.pow(b2, 2));
+	var avg_c 		= (c1 + c2) / 2;
+	var g 			= (1- Math.sqrt(Math.pow(avg_c, 7) / (Math.pow(avg_c, 7) + Math.pow(25, 7)))) / 2;
+	
+	var a1p 		= a1 * (1 + g);
+	var a2p 		= a2 * (1 + g);
+	
+	var c1p 		= Math.sqrt(Math.pow(a1p, 2) + Math.pow(b1, 2));
+	var c2p 		= Math.sqrt(Math.pow(a2p, 2) + Math.pow(b2, 2));
+	
+	var avg_cp 		= (c1p + c2p) / 2;
+	
+	var h1p 		= rad2deg(Math.atan2(b1, a1p));
+	if(h1p < 0){
+	
+		h1p = h1p + 360;
+	}
+	
+	var h2p 		= rad2deg(Math.atan2(b2, a2p));
+	if(h2p < 0){
+		
+		h2p = h2p + 360;
+	}
+	
+	var avg_hp 		= Math.abs(h1p - h2p) > 180 ? (h1p + h2p + 360) / 2 : (h1p + h1p) / 2;
+	
+	var t 			= 1 - 0.17 * Math.cos(deg2rad(avg_hp - 30)) + 0.24 * Math.cos(deg2rad(2 * avg_hp)) + 0.32 * Math.cos(deg2rad(3 * avg_hp + 6)) - 0.2 * Math.cos(deg2rad(4 * avg_hp - 63))
+	
+	var delta_hp 	= h2p - h1p;
+	if(Math.abs(delta_hp) > 180){
+		if (h2p <= h1p) {
+                delta_hp += 360;
+            }
+            else {
+                delta_hp -= 360;
+            }
+	}
+	
+	var delta_lp 	= l2 - l1;
+	var delta_cp 	= c2p - c1p;
+	
+	delta_hp 		= 2 * Math.sqrt(c1p * c2p) * Math.sin(deg2rad(delta_hp) / 2);
+	
+	var s_l 		= 1 + ((0.015 * Math.pow(avg_lp - 50, 2)) / Math.sqrt(20 + Math.pow(avg_lp - 50, 2)));
+	var s_c 		= 1 + 0.045 * avg_cp
+	var s_h 		= 1 + 0.015 * avg_cp * t;
+	
+	var delta_ro 	= 30 * Math.exp( - (Math.pow((avg_hp - 275) / 25, 2)));
+	var r_c 		= 2 * Math.sqrt(Math.pow(avg_cp, 7) / (Math.pow(avg_cp, 7) + Math.pow(25, 7)));
+	var r_t			= -r_c * Math.sin(2 * deg2rad(delta_ro));
+	
+	var kl = 1, kc =1, kh = 1;
+
+	var delta_e = Math.sqrt(Math.pow(delta_lp / (kl * s_l), 2) + Math.pow(delta_cp / (kc * s_c), 2) + Math.pow(delta_hp / (kh * s_h), 2) + r_t * (delta_cp / (kc * s_c)) * (delta_hp / (kh * s_h)))
+
+    return delta_e
+	
+	
+	function rad2deg(rad){
+		
+		return 360 * rad / (2 * Math.PI);
+	}
+	function deg2rad(deg){
+		
+		return (2 * Math.PI * deg) / 360;
+	}
+}
+
+
+

src/common/bluetooth/color/colorSpace.js

@@ -0,0 +1,13 @@
+
+import LabCom from './lab'
+import XyzCom from './xyz'
+import ColorDiff from './colorDiff'
+
+export const toRgb = (lab) => {
+    let xyz = LabCom.xyz(lab)
+    return XyzCom.rgb(xyz)
+}
+
+export const Ediff = (lab1, lab2) => {
+    return ColorDiff(lab1, lab2)
+}

src/common/bluetooth/color/lab.js

@@ -0,0 +1,54 @@
+
+var xyz = require('./xyz');
+
+module.exports = {
+	name: 'lab',
+	min: [0,-100,-100],
+	max: [100,100,100],
+	channel: ['lightness', 'a', 'b'],
+	alias: ['LAB', 'cielab'],
+
+	xyz: function(lab) {
+		var l = lab[0],
+				a = lab[1],
+				b = lab[2],
+				x, y, z, y2;
+
+		if (l <= 8) {
+			y = (l * 100) / 903.3;
+			y2 = (7.787 * (y / 100)) + (16 / 116);
+		} else {
+			y = 100 * Math.pow((l + 16) / 116, 3);
+			y2 = Math.pow(y / 100, 1/3);
+		}
+
+		x = x / 95.047 <= 0.008856 ? x = (95.047 * ((a / 500) + y2 - (16 / 116))) / 7.787 : 95.047 * Math.pow((a / 500) + y2, 3);
+
+		z = z / 108.883 <= 0.008859 ? z = (108.883 * (y2 - (b / 200) - (16 / 116))) / 7.787 : 108.883 * Math.pow(y2 - (b / 200), 3);
+
+		return [x, y, z];
+	}
+};
+
+
+//extend xyz
+xyz.lab = function(xyz){
+	var x = xyz[0],
+			y = xyz[1],
+			z = xyz[2],
+			l, a, b;
+
+	x /= 95.047;
+	y /= 100;
+	z /= 108.883;
+
+	x = x > 0.008856 ? Math.pow(x, 1/3) : (7.787 * x) + (16 / 116);
+	y = y > 0.008856 ? Math.pow(y, 1/3) : (7.787 * y) + (16 / 116);
+	z = z > 0.008856 ? Math.pow(z, 1/3) : (7.787 * z) + (16 / 116);
+
+	l = (116 * y) - 16;
+	a = 500 * (x - y);
+	b = 200 * (y - z);
+
+	return [l, a, b];
+};

src/common/bluetooth/color/rgb.js

@@ -0,0 +1,9 @@
+
+
+module.exports = {
+	name: 'rgb',
+	min: [0,0,0],
+	max: [255,255,255],
+	channel: ['red', 'green', 'blue'],
+	alias: ['RGB']
+};

src/common/bluetooth/color/xyz.js

@@ -0,0 +1,138 @@
+
+var rgb = require('./rgb');
+
+var xyz = {
+	name: 'xyz',
+	min: [0,0,0],
+	channel: ['X','Y','Z'],
+	alias: ['XYZ', 'ciexyz', 'cie1931']
+};
+
+
+/**
+ * Whitepoint reference values with observer/illuminant
+ *
+ * http://en.wikipedia.org/wiki/Standard_illuminant
+ */
+xyz.whitepoint = {
+	//1931 2°
+	2: {
+		//incadescent
+		A:[109.85, 100, 35.585],
+		// B:[],
+		C: [98.074, 100, 118.232],
+		D50: [96.422, 100, 82.521],
+		D55: [95.682, 100, 92.149],
+		//daylight
+		D65: [95.045592705167, 100, 108.9057750759878],
+		D75: [94.972, 100, 122.638],
+		//flourescent
+		// F1: [],
+		F2: [99.187, 100, 67.395],
+		// F3: [],
+		// F4: [],
+		// F5: [],
+		// F6:[],
+		F7: [95.044, 100, 108.755],
+		// F8: [],
+		// F9: [],
+		// F10: [],
+		F11: [100.966, 100, 64.370],
+		// F12: [],
+		E: [100,100,100]
+	},
+
+	//1964  10°
+	10: {
+		//incadescent
+		A:[111.144, 100, 35.200],
+		C: [97.285, 100, 116.145],
+		D50: [96.720, 100, 81.427],
+		D55: [95.799, 100, 90.926],
+		//daylight
+		D65: [94.811, 100, 107.304],
+		D75: [94.416, 100, 120.641],
+		//flourescent
+		F2: [103.280, 100, 69.026],
+		F7: [95.792, 100, 107.687],
+		F11: [103.866, 100, 65.627],
+		E: [100,100,100]
+	}
+};
+
+
+/**
+ * Top values are the whitepoint’s top values, default are D65
+ */
+xyz.max = xyz.whitepoint[2].D65;
+
+
+/**
+ * Transform xyz to rgb
+ *
+ * @param {Array} xyz Array of xyz values
+ *
+ * @return {Array} RGB values
+ */
+xyz.rgb = function (_xyz, white) {
+	//FIXME: make sure we have to divide like this. Probably we have to replace matrix as well then
+	white = white || xyz.whitepoint[2].E;
+
+	var x = _xyz[0] / white[0],
+		y = _xyz[1] / white[1],
+		z = _xyz[2] / white[2],
+		r, g, b;
+
+	// assume sRGB
+	// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
+	r = (x * 3.240969941904521) + (y * -1.537383177570093) + (z * -0.498610760293);
+	g = (x * -0.96924363628087) + (y * 1.87596750150772) + (z * 0.041555057407175);
+	b = (x * 0.055630079696993) + (y * -0.20397695888897) + (z * 1.056971514242878);
+
+	r = r > 0.0031308 ? ((1.055 * Math.pow(r, 1.0 / 2.4)) - 0.055)
+		: r = (r * 12.92);
+
+	g = g > 0.0031308 ? ((1.055 * Math.pow(g, 1.0 / 2.4)) - 0.055)
+		: g = (g * 12.92);
+
+	b = b > 0.0031308 ? ((1.055 * Math.pow(b, 1.0 / 2.4)) - 0.055)
+		: b = (b * 12.92);
+
+	r = Math.min(Math.max(0, r), 1);
+	g = Math.min(Math.max(0, g), 1);
+	b = Math.min(Math.max(0, b), 1);
+
+	return [r * 255, g * 255, b * 255];
+}
+
+
+
+/**
+ * RGB to XYZ
+ *
+ * @param {Array} rgb RGB channels
+ *
+ * @return {Array} XYZ channels
+ */
+rgb.xyz = function(rgb, white) {
+	var r = rgb[0] / 255,
+			g = rgb[1] / 255,
+			b = rgb[2] / 255;
+
+	// assume sRGB
+	r = r > 0.04045 ? Math.pow(((r + 0.055) / 1.055), 2.4) : (r / 12.92);
+	g = g > 0.04045 ? Math.pow(((g + 0.055) / 1.055), 2.4) : (g / 12.92);
+	b = b > 0.04045 ? Math.pow(((b + 0.055) / 1.055), 2.4) : (b / 12.92);
+
+	var x = (r * 0.41239079926595) + (g * 0.35758433938387) + (b * 0.18048078840183);
+	var y = (r * 0.21263900587151) + (g * 0.71516867876775) + (b * 0.072192315360733);
+	var z = (r * 0.019330818715591) + (g * 0.11919477979462) + (b * 0.95053215224966);
+
+	white = white || xyz.whitepoint[2].E;
+
+	return [x * white[0], y * white[1], z * white[2]];
+};
+
+
+
+module.exports = xyz;

src/common/bluetooth/command.js

@@ -0,0 +1,146 @@
+import { uint32ToUint8Array, uint8ArrayToHex } from "./utils";
+
+export class Command {
+    // 测量序号
+    static measureId = 1;
+
+    // 命令完整响应的长度
+    responseSize = 0;
+    // 命令发送的数据
+    content = new Uint8Array(0);
+    // 命令响应的数据
+    response = new Uint8Array(0);
+    // 等待响应的超时时间
+    timeout = 3000;
+    // 发送的数据是否需要生成和校验值
+    needSign = true;
+    
+
+    /**
+     * @param {Uint8Array|ArrayBuffer|number[]} content
+     * @param {number} responseSize 
+     * @param {number} timeout 
+     * @param {boolean} needSign
+     */
+    constructor(content, responseSize, timeout = 3000, needSign = true) {
+        if (content instanceof Uint8Array) {
+            this.content = content;
+        } else {
+            this.content = new Uint8Array(content);
+        }
+        this.responseSize = responseSize;
+        if (typeof timeout === 'number' && timeout >= 0) {
+            this.timeout = timeout;
+        }
+        this.needSign = needSign;
+    }
+    
+    /**
+     * 返回一个 ArrayBuffer 数组, 用于发送
+     * @returns {ArrayBuffer[]}
+     */
+    get data() {
+        if (this.content.length === 0) throw new Error('正文内容不能为空');
+        const data = [];
+        const b = new Uint8Array(this.content.buffer);
+        if (this.needSign) {
+            b[b.length - 1] = Command.getSign(b);
+        }
+        for (let i = 0; i < b.length; i += 20) {
+            data.push(b.slice(i, i + 20).buffer);
+        }
+        return data;
+    }
+
+    /** 是否接收完成 */
+    get isComplete() {
+        return this.response.length >= this.responseSize;
+    }
+
+    /** 是否有效 */
+    get isValid() {
+        return Command.getSign(this.response) === this.response[this.response.length - 1];
+    }
+
+    /**
+     * 填充响应数组
+     * @param {ArrayBuffer} buffer 
+     */
+    fillResponse(buffer) {
+        this.response = new Uint8Array([...this.response, ...(new Uint8Array(buffer))]);
+    }
+
+
+    /**
+     * 获取和校验值
+     * @param {ArrayBuffer|Uint8Array} buffer 
+     */
+    static getSign(buffer) {
+        const _b = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
+        let sum = 0;
+        _b.slice(0, _b.length - 1).forEach(i => sum += i);
+        return new Uint8Array([sum])[0];
+    }
+
+    // 唤醒命令
+    static WakeUp = new Command([0xf0], 0, 0, false);
+
+    /**
+     * 获取测量命令
+     * @param {number} mode 
+     */
+    static measure(mode = 0) {
+        Command.measureId += 1;
+        const measureId = uint32ToUint8Array(Command.measureId);
+        return new Command([0xbb, 1, mode, ...measureId, 0, 0xff, 0], 10, 1500);
+    }
+
+    /**
+     * 获取测量数据 (Lab)
+     * @param {number} mode 
+     */
+    static getLab(mode = 0) {
+        return new Command([0xbb, 3, mode, 0, 0, 0, 0, 0, 0xff, 0], 20, 1500);
+    }
+
+    /**
+     * 获取测量数据 (RGB)
+     * @param {number} mode 
+     */
+    static getRGB(mode = 0) {
+        return new Command([0xbb, 4, mode, 0, 0, 0, 0, 0, 0xff, 0], 20, 1500);
+    }
+
+    /**
+     * 获取测量的光谱数据
+     * @param {number} mode
+     */
+    static getSpectral(mode = 0) {
+        return new Command([0xbb, 2, 0x10 + mode, 0, 0, 0 ,0 ,0, 0xff, 0], 200, 5000);
+    }
+
+    /**
+     *  白校准
+     * @param {number} check 是否判断校准成功 1 判断 0 不判断
+     */
+    static whiteCalibrate(check = 1) {
+        return new Command([0xbb, 0x11, check, 0, 0, 0, 0, 0, 0xff, 0], 10, 1500);
+    }
+
+
+    /**
+     * 黑校准
+     * @param {number} check 是否判断校准成功
+     */
+    static blackCalibrate(check = 1) {
+        return new Command([0xbb, 0x10, check, 0, 0, 0, 0, 0, 0xff, 0], 10, 1500);
+    }
+
+
+    /** 获取校准状态 */
+    static GetCalibrationInf = new Command([0xbb, 0x1e, 0, 0, 0, 0, 0, 0, 0xff, 0], 20, 1500);
+
+
+
+    static GetDeviceInf = new Command([0xbb, 0x12, 0x01, 0, 0, 0, 0, 0, 0xff, 0], 200, 5000);
+}

src/common/bluetooth/utils.js

@@ -0,0 +1,70 @@
+/**
+ * Uint32 转 Uint8 数组
+ * @param {number} n 
+ */
+export function uint32ToUint8Array(n) {
+    return new Uint8Array(new Uint32Array([n]).buffer);
+}
+
+/**
+ * Uint8 数组 转 Float32
+ * @param {Uint8Array} raw 
+ */
+export function uint8ArrayToFloat32(raw) {
+    return new Float32Array(raw.buffer)[0];
+}
+
+
+/**
+ * Uint8 数组 转 Uint16
+ * @param {Uint8Array} raw 
+ */
+export function uint8ArrayToUint16(raw) {
+    return new Uint16Array(raw.buffer)[0];
+}
+
+
+/**
+ * Uint8 数组转 Uint32
+ * @param {Uint8Array} raw 
+ * @returns 
+ */
+export function uint8ArrayToUnit32(raw) {
+    return new Uint32Array(raw.buffer)[0];
+}
+
+
+/**
+ * 等待指定时长
+ * @param {number} duration 
+ */
+export function waitFor(duration) {
+    return new Promise(resolve => {
+        setTimeout(resolve, duration);
+    });
+}
+
+
+/**
+ * uint8 数组转 hex 字符串
+ * @param {Uint8Array} raw 
+ */
+export function uint8ArrayToHex(raw) {
+    const s = [];
+    raw.forEach(i => {
+        const b = i.toString(16);
+        s.push(b.length > 1 ? b : `0${b}`);
+    });
+    return s.join(' ');
+}
+
+
+// 二进制转字符串(ascii)
+export function bufferToString(buffer) {
+    let str = "";
+    for (let code of buffer) {
+        if (code === 0) break;
+        str += utf82string(code);
+    }
+    return str;
+}

src/components/bluetooth/LinkBlueTooth.tsx

@@ -0,0 +1,90 @@
+import { View } from "@tarojs/components";
+import { memo, useEffect, useMemo, useState } from "react";
+import Taro from "@tarojs/taro";
+import {useBluetooth} from "@/use/contextBlueTooth"
+import SearchInput from "@/components/searchInput";
+import Popup from "@/components/bluetooth/Popup"
+import classnames from "classnames";
+import styles from "./css/linkBlueTooth.module.scss"
+
+export default memo(() => {
+    const {state, init, startScan, connect, disconnect} = useBluetooth()
+
+    useEffect(() => {
+        init()
+    }, [])
+
+    const [linkStatus, setLinkStatus] = useState(1)
+    useEffect(() => {
+        if(!state.available) {
+            setLinkStatus(1)
+        } else if(state.available&&state.connected?.name) {
+            setLinkStatus(3)
+        } else {
+            setLinkStatus(2)
+        }
+        console.log('aaa:::',state.connected)
+    }, [state.available, state.connected])
+
+    const linkName = useMemo(() => {
+        return state.connected?.localName||''
+    }, [state.connected])
+
+    //链接设备
+    const onLinkListen = (item) => {
+        if(!state.connected&&!state.connecting)
+            connect(item)
+    }
+
+    const [popupShow, setPopupShow] = useState(false)
+    //显示设备列表
+    const onFindDevice = () => {
+        if(linkStatus == 1) {
+            Taro.showToast({
+                title:'请打开蓝牙',
+                icon:'none'
+            })
+        } else {
+            setPopupShow(true)
+            onFindEven()
+        }
+        
+    }
+    const onFindEven = () => {
+        if(!state.discovering&&!state.connected&&!state.connecting)
+            startScan()
+    }
+
+    //断开链接
+    const onDisconnect = () => {
+        disconnect()
+        setPopupShow(false)
+    }
+
+    return (
+        <>
+            <View className={styles.main}>
+                <SearchInput title="蓝牙设备" showIcon={true}>
+                    <View className={styles.bluetooth_link} onClick={onFindDevice}>
+                        <View className={classnames(styles.link_status, linkStatus == 3 &&styles.link_statused, linkStatus == 2&&styles.link_statused_no)}></View>
+                        {
+                            linkStatus == 1&&<View className={classnames(styles.link_name, styles.link_name_no)}>请开启蓝牙</View>||
+                            linkStatus == 2&&<View className={classnames(styles.link_name,styles.link_name_no_link) }>未连接设备</View>||
+                            linkStatus == 3&&<View className={classnames(styles.link_name)}>{linkName}</View>
+                        }
+                    </View>
+                </SearchInput>
+                <Popup 
+                    state={state} 
+                    show={popupShow} 
+                    onClose={() => setPopupShow(false)} 
+                    onLink={item => onLinkListen(item)}
+                    onOff={onDisconnect}
+                    onFind={onFindEven}
+                />
+            </View>
+        </>
+        
+    );
+
+})

src/components/bluetooth/Popup.tsx

@@ -0,0 +1,73 @@
+import { ScrollView, View } from "@tarojs/components"
+import { memo, useEffect, useState } from "react"
+import Loading from "@/components/loading"
+import style from "./css/popup.module.scss"
+
+interface params {
+    state: any,
+    show: Boolean,
+    onClose: (Boolean) => void,
+    onLink: (any) => void,
+    children?: React.ReactNode
+    onOff: () => void,
+    onFind: () => void,
+}
+
+export default memo(({state, show=false, onClose, onLink, onOff, onFind}:params) => {
+    const [popupShow, setPopupShow] = useState(show)
+    useEffect(() => {
+        setPopupShow(show)
+    }, [show])
+    const onCloseListener = () => {
+        onClose(false)
+    }
+    
+    return (
+        <>
+            {
+                popupShow&&<View className={style.popup}>
+                    <View className={style.content}>
+                        <View className={style.title}>搜索设备</View>
+                        <View className={style.list}>
+                            <ScrollView scrollY className={style.scroll}>
+                                {
+                                    (state.devices&&state.devices.length > 0)&&state?.devices.map(item => {
+                                        return (
+                                            <View className={style.item} onClick={() => onLink(item)}>
+                                                <View>{item.name}</View>
+                                                {
+                                                    (!state.connecting&&!state.connected)&&<View >链接</View>||
+                                                    (state.connecting&&item.deviceId == state.connecting.deviceId)&&<View className={style.link_ing}>正在链接...</View>||
+                                                    (state.connected&&item.deviceId == state.connected.deviceId)&&<View className={style.link_success}>链接成功</View>
+                                                }
+                                            </View>
+                                        )
+                                    })||
+                                    <View className={style.noDevice}>
+                                        {
+                                            (!state.discovering)&& <>
+                                                <View>暂无设备,请按以下条件检查</View>
+                                                <View className={style.n_item}>1.请确保取色仪处于激活状态</View>
+                                                <View className={style.n_item}>2.请确保取色仪没有链接其他设备</View>
+                                                <View className={style.n_item}>3.请打开手机定位</View>
+                                            </>||
+                                            <View>设备搜索中</View>
+                                        }
+                                        
+                                    </View>
+                                    
+                                }
+                            </ScrollView>
+                        </View>
+                        {
+                            state.connected&&<View className={`${style.footer} ${style.footer_off}`} onClick={onOff}>断开链接</View>||
+                            (!state.connected&&state.discovering)&&<View className={`${style.footer} ${style.finding}`}>搜索中<Loading width={30} color='orange'/></View>||
+                            <View className={style.footer} onClick={onFind}>重新搜索</View>
+                        }
+                    </View>
+                    <View className={style.mask} onClick={onCloseListener}></View>
+                </View>
+            }
+        </>
+    )
+})

src/components/bluetooth/css/linkBlueTooth.module.scss

@@ -0,0 +1,30 @@
+
+.main{
+    .bluetooth_link{
+        display: flex;
+        align-items: center;
+        .link_status{
+            width: 12px;
+            height: 12px;
+            background: #f02409;
+            border-radius: 50%;
+        }
+        .link_statused{
+            background: #07C160;
+        }
+        .link_statused_no{
+            background: #f0ec09;
+        }
+        .link_name{
+            font-size: $font_size;
+            margin-left: 20px;
+            
+        }
+        .link_name_no{
+            color: #f02409;
+        }
+        .link_name_no_link{
+            color: #f0ec09;
+        }
+    }
+}

src/components/bluetooth/css/popup.module.scss

@@ -0,0 +1,90 @@
+.popup{
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+    .mask{
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0,0,0,0.5);
+        position: fixed;
+        top:0;
+        left:0;
+        z-index: 9;
+    }
+    .content{
+        z-index: 99;
+        background-color: #fff;
+        width: 75vw;
+        height: 600px;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        border-radius: 20px;
+        transform: translateX(-50%) translateY(-50%);
+        display: flex;
+        flex-direction: column;
+        font-size: 28px;
+        .title{
+            text-align: center;
+            margin: 20px;
+        }
+        .list{
+            height: 480px;
+            padding: 0 20px;
+            .scroll{
+               height: 100%; 
+            }
+            .item{
+                margin-bottom: 20px;
+                display: flex;
+                justify-content: space-between;
+                border-bottom: 1px dashed #ccc;
+                padding: 15px 0;
+                color: #3b3b3b;
+                @mixin link{
+                    font-size: 25px;
+                }
+                .link_success{
+                    @include link;
+                    color: green;
+                }
+                .link_ing {
+                    color: orange;
+                }
+            }
+            .noDevice{
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                color: #a8a8a8;
+                .n_item{
+                    width: 100%;
+                    text-align: left;
+                    margin-top: 20px;
+                    padding: 0 30px;
+                    box-sizing: border-box;
+                }
+            }
+            
+        }
+        .footer{
+            text-align: center;
+            padding: 20px 0;
+            background-color: #f1f1f1;
+            border-radius: 0 0 10px 10px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .finding{
+            color: orange;
+        }
+        .footer_off{
+            color: red;
+        }
+    }
+}

src/components/search/index.module.scss

@@ -20,6 +20,7 @@
             border-radius: 50px;
             padding: 0 60px;
             box-sizing: border-box;
+            z-index:0;
             &::-webkit-input-placeholder { /* WebKit browsers */
                 color: #999;
                 font-size: 16px;
@@ -55,7 +56,7 @@
         position: absolute;
         left: 10px;
         margin-right: 0;
-        
+        z-index: 10;
     }
     .icon_out{
         margin-right: 10px;

src/components/searchInput/index.module.scss

@@ -4,20 +4,24 @@
     align-items: center;
     min-height: 62px;
     padding: 10px 0;
-    border-bottom: 1px solid #f3f3f3;
+    border-bottom: 1px solid #F0F0F0;
     .searchInput_title {
         width: 150px;
+        min-height: 50px;
         font-size: 28px;
-        border-right: 1px solid #f3f3f3;
+        border-right: 1px solid #F0F0F0;
-        color: $color_font_on;
+        color: $color_font_two;
         margin-right: 20px;
         padding-left: 20px;
-        &::before{
+        display: flex;
-            content: "";
+        align-items: center;
-            height: 50px;
+
-            width: 1px;
+        // &::before{
-            background-color: #f3f3f3;
+        //     content: "";
-        }
+        //     height: 50px;
+        //     width: 1px;
+        //     background-color: #F0F0F0;
+        // }
     }
     .searchInput_con{
         flex:1;

src/components/searchInput/index.tsx

@@ -1,5 +1,5 @@
 import { Input, View } from "@tarojs/components";
-import { memo, useDebugValue, useMemo } from "react";
+import { memo, ReactHTMLElement, ReactNode, useDebugValue, useMemo } from "react";
 import styles from  './index.module.scss';
 
 type Params = {
@@ -10,7 +10,8 @@ type Params = {
     showTitle?: false|true,
     showBorder?: false|true,
     changeOnInput?: (string) => void,
-    clickOnInput?: () => void
+    clickOnInput?: () => void,
+    children?: ReactNode
 
 }
 
@@ -37,9 +38,11 @@ export default memo((props: Params) => {
         <View className={styles.searchInput_main} style={stylen}>
             {showTitle&&<View className={styles.searchInput_title}>{title}</View>}
             <View className={styles.searchInput_con}>
-                <Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/>
+                {!props.children&&<Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/>
+                    ||<View>{props.children}</View>
+                }
             </View>
-            {showIcon&&<View className={`iconfont icon-more ${styles.icon_more_self}`}></View>}
+            {showIcon&&<View className={`iconfont icon-jiantou ${styles.icon_more_self}`}></View>}
         </View>
     )
 })

src/components/tabs/index.module.scss

@@ -1,20 +1,28 @@
 .tabs_main{
     display: flex;
+    width: 100%;
     .tabs_scroll{
         width: 100%;
         display: flex;
         white-space: nowrap;
-        border-bottom: 1px solid $color_font_two;
+        ::-webkit-scrollbar {
-        border-top: 1px solid $color_font_two;
+            display:none;
-        height: 102px;
+            width:0;
-        
+            height:0;
+            color:transparent;
+        }
         .tabs_item{
             flex:1;
             display: inline-block;
-            padding: 10px 20px;
+            font-size: 24rpx;
-            height: 100%;
+            background-color: #F0F0F0;
-            box-sizing: border-box;
+            border-radius: 24rpx;
-            position: relative;
+            min-width: 126rpx;
+            height: 46.93rpx;
+            text-align: center;
+            line-height: 46.93rpx;
+            color: #707070;
+            margin-right: 20px;
             .tabs_item_con{
                 height: 100%;
                 display: flex;

src/components/tabs/index.tsx

@@ -13,10 +13,12 @@ type Params = {
     list?: ListProps[],
     defaultValue?: number|string,
     children?: ReactNode,
-    tabsOnClick?: (ListProps) => void
+    tabsOnClick?: (ListProps) => void,
+    style?:Object,
+
 }
 
-export default memo(({list = [], defaultValue = 0, tabsOnClick}: Params) => {
+export default memo(({list = [], defaultValue = 0, tabsOnClick, style={}}: Params) => {
     
     const [selected, setSelected] = useState(defaultValue)
     const [tabId, setTabId] = useState('')
@@ -46,8 +48,7 @@ export default memo(({list = [], defaultValue = 0, tabsOnClick}: Params) => {
                             list.map((item, index) => {
                                 return (
                                     <View key={item.value} id={`tabs_${item.value}`} className={styles.tabs_item} onClick={() => clickEvent({item,index})}>
-                                        <View className={classnames(styles.tabs_item_con, {[styles.tabs_item_select]:selected == item.value})}>{item.title}</View>
+                                        <View  className={classnames(styles.tabs_item_con, {[styles.tabs_item_select]:selected == item.value})}>{item.title}</View>
-                                        {(selected == item.value) && <View className={styles.tabs_index}></View>}
                                     </View>
                                 )
                             })

src/pages/classList/index.module.scss

@@ -15,6 +15,8 @@
             color: $color_font_three;
             .text_one{
                 color: $color_main;
+                display: flex;
+                align-items: center;
             }
             .text_two{
                 position: relative;
@@ -33,20 +35,11 @@
                 }
             }
         }
-        .filter_btn{
+        .filter_btns{
             display: flex;
             justify-content: space-between;
             padding: 20px;
-            view{
+            
-                font-size: $font_size_medium;
-                background-color: #F0F0F0;
-                border-radius: 24px;
-                width: 126px;
-                height: 46.93px;
-                text-align: center;
-                line-height: 46.93px;
-                color: $color_font_three;
-            }
             .selected{
                 background-color: #ecf5ff;
                 border: 2px solid #cde5ff;

src/pages/classList/index.tsx

@@ -7,9 +7,22 @@ import Popup from "@/components/popup";
 import styles  from './index.module.scss'
 import { useState } from "react";
 import Filter from "./components/filter";
+import Tabs from "@/components/tabs";
+import SortBtn from "@/components/sortBtn";
 
 export default () => {
     const [showPopup, setShowPopup] = useState(false)
+    const [selectList, setSelectList] = useState([
+        {title: '系列', value:1},
+        {title: '系列', value:2},
+        {title: '系列', value:3},
+        {title: '系列', value:4},
+        {title: '系列', value:6},
+        {title: '系列', value:7},
+        {title: '系列', value:8},
+        {title: '系列', value:9},
+        {title: '系列', value:10},
+    ])
     return (
         <View className={styles.main}>
             <View className={styles.search}>
@@ -17,17 +30,17 @@ export default () => {
             </View>
             <View className={styles.filter}>
                 <View className={styles.filter_all}>
-                    <View className={styles.text_one}>综合</View>
+                    <View className={styles.text_one}>
+                        <Text>综合</Text>
+                        <SortBtn status="top"/>
+                    </View>
                     <View className={styles.text_two} onClick={() => setShowPopup(true)}>
                         <Text>筛选</Text>
                         <Text className={classnames('iconfont icon-bianji_bianji', styles.miconfont)}></Text>
                     </View>
                 </View>
-                <View className={styles.filter_btn}>
+                <View className={styles.filter_btns}>
-                    <View>系列</View>
+                    <Tabs list={selectList} style={{}}/>
-                    <View>幅宽</View>
-                    <View>克重</View>
-                    <View className={styles.selected}>成分</View>
                 </View>
             </View>
             <View className={styles.list}>

src/pages/searchList/components/selectData/index.module.scss

@@ -0,0 +1,49 @@
+.tabs_main{
+    display: flex;
+    width: 100%;
+    .tabs_scroll{
+        width: 100%;
+        display: flex;
+        white-space: nowrap;
+        ::-webkit-scrollbar {
+            display:none;
+            width:0;
+            height:0;
+            color:transparent;
+        }
+        .tabs_item{
+            flex:1;
+            display: inline-block;
+            font-size: 24rpx;
+            background-color: #F0F0F0;
+            border-radius: 24rpx;
+            min-width: 126rpx;
+            height: 46.93rpx;
+            text-align: center;
+            line-height: 46.93rpx;
+            color: #707070;
+            margin-right: 20px;
+            .tabs_item_con{
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: $font_size_medium;
+            }
+            .tabs_index{
+                height: 5px;
+                width: 100%;
+                background-color:$color_main;
+                position:absolute;
+                bottom: 0;
+                left:0;
+                border-radius: 50px;
+            }
+            .tabs_item_select{
+                color: $color_main;
+            }
+        }
+        
+        
+    }
+}

src/pages/searchList/components/selectData/index.tsx

@@ -0,0 +1,57 @@
+import { ScrollView, View } from "@tarojs/components";
+import { memo, useState, ReactNode, useEffect } from "react";
+import classnames from "classnames";
+import styles from './index.module.scss'
+
+
+type ListProps = {
+    title: string,
+    value: number
+}
+
+type Params = {
+    list?: ListProps[],
+    defaultValue?: number|string,
+    children?: ReactNode,
+    tabsOnClick?: (ListProps) => void,
+
+}
+
+export default memo(({list = [], defaultValue = 0, tabsOnClick}: Params) => {
+    
+    const [tabId, setTabId] = useState('')
+
+    useEffect(() => {
+        const index = list?.findIndex(item => {
+            return item.value == defaultValue 
+        })
+        if(index !== -1) {
+            const num = index > 0?( index - 1) : 0
+            setTabId(list[num].value.toString())
+        }
+    }, [])
+
+    const clickEvent = ({item, index}: {item:ListProps, index:number}) => {
+        tabsOnClick?.(item)
+        setTabId(index.toString())
+    }
+    return (
+        <>
+            <View className={styles.tabs_main} id="tabs_main_ref">
+                <ScrollView className={styles.tabs_scroll} scrollX scrollWithAnimation={true} scrollIntoView={`tabs_${tabId}`}>
+                    <View className={styles.tabs_scroll}>
+                        {
+                            list.map((item, index) => {
+                                return (
+                                    <View key={index} id={`tabs_${index}`} className={styles.tabs_item} onClick={() => clickEvent({item,index})}>
+                                        <View  className={classnames(styles.tabs_item_con)}>{item.title}</View>
+                                    </View>
+                                )
+                            })
+                        }
+                    </View>
+                </ScrollView>
+            </View>
+        </>
+    )
+})

src/pages/searchList/hightSearchList.module.scss

@@ -5,13 +5,30 @@
     background-color: $color_bg_one;
     .search{
         padding: 20px;
+        .SearchInput{
+            background-color: #fff;
+            padding: 10px 20px;
+            box-sizing: border-box;
+            border-radius: 10px;
+        }
+        
+        .bluetooth_color{
+            .color_bock{
+                width: 100px;
+                height: 46px;
+            }
+            .color_bock_no{
+                font-size: $font_size_medium;
+                color: $color_font_three;
+            }
+        }
     }
     .filter{
         .filter_all {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            padding: 20px 50px;
+            padding: 20px 130px;
             font-size: $font_size_medium;
             color: $color_font_three;
             .text_zh, .text_sc{
@@ -149,6 +166,23 @@
                     height: 224px;
                     background: #e5ad3a;
                     border-radius: 20px 20px 0px 0px;
+                    position: relative;
+                    image{
+                        width: 100%;
+                        height: 100%;
+                        border-radius: 20px 20px 0px 0px;
+                    }
+                    .color_num {
+                        background: rgba(0,0,0, 0.5);
+                        border-radius: 0px 50px 0px 0px;
+                        font-size: $font_size_min;
+                        color: #fff;
+                        position: absolute;
+                        left:0;
+                        bottom:0;
+                        padding: 5px 20px;
+                        box-sizing: border-box;
+                    }
                 }
             }
             .product_info{

src/pages/searchList/hightSearchList.tsx

@@ -1,12 +1,17 @@
-import { ScrollView, Text, View } from "@tarojs/components"
+import { Image, ScrollView, Text, View } from "@tarojs/components"
 import classnames from "classnames";
 import Search from '@/components/search'
 import Filter from "@/components/filter";
 import InfiniteScroll from '@/components/infiniteScroll'
 import SortBtn from "@/components/sortBtn";
+import SearchInput from "@/components/searchInput";
+import LinkBlueTooth from "@/components/bluetooth/LinkBlueTooth";
+import {useBluetooth} from "@/use/contextBlueTooth"
+import {toRgb} from '@/common/bluetooth/color/colorSpace'
 import Tabs from "@/components/tabs";
 import styles  from './hightSearchList.module.scss'
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
+import Taro, { useReady } from "@tarojs/taro";
 
 export default () => {
     const [showFilter, setShowFilter] = useState(false)
@@ -29,10 +34,40 @@ export default () => {
             setScrollStatus(false)
         }
     },[])
+
+    const {state, measureAndGetLab} = useBluetooth()
+    const getLab = () => {
+        if(state.connected) {
+            measureAndGetLab()
+        } else {
+            Taro.showToast({
+                title: '请链接设备',
+                icon: 'none'
+            })
+        }
+    }
+
+    const [blueToothColor, setBlueToothColor] = useState('')
+    useEffect(() => {
+        if(state.deviceLab) {
+            console.log('颜色：',state.deviceLab)
+            const rgb = toRgb([state.deviceLab.L, state.deviceLab.a, state.deviceLab.b])
+            setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
+        }
+    }, [state.deviceLab])
     return (
         <View className={styles.main}>
             <View className={styles.search}>
-                <Search placeIcon="out"  btnStyle={{color: '#007AFF'}}/>
+                <View className={styles.SearchInput}>
+                    <LinkBlueTooth/>
+                    <SearchInput title="提取颜色" showBorder={false}>
+                        <View className={styles.bluetooth_color} onClick={() => getLab()}>
+                            {blueToothColor&&<View className={classnames(styles.color_bock)} style={{background:blueToothColor}}></View>||
+                                <View className={classnames(styles.color_bock_no)} >请取色</View>
+                            }
+                        </View>
+                    </SearchInput>
+                </View>
             </View>
             <View className={styles.filter}>
                 <View className={styles.filter_all}>
@@ -44,10 +79,7 @@ export default () => {
                         <Text>收藏</Text>
                         <SortBtn status="top"/>
                     </View>
-                    <View className={styles.text_ss} >
+                    
-                        <Text>高级搜索</Text>
-                        <Text className={classnames('iconfont icon-sousuo', styles.miconfont)}></Text>
-                    </View>
                 </View>
                 <View className={styles.filter_btn_con}>
                     <ScrollView scrollX className={styles.filter_scroll}>
@@ -76,14 +108,13 @@ export default () => {
                         <View className={styles.product_list}>
                             {new Array(9).fill(' ').map(item => {
                                 return <View className={styles.product_item}>
-                                    <View className={styles.product_img}></View>
+                                    <View className={styles.product_img}>
+                                        <Image mode="aspectFill" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d"></Image>
+                                        <View className={styles.color_num}>25色</View>
+                                    </View>
                                     <View className={styles.product_info}>
                                         <View className={styles.title}>0770#21S精棉平纹</View>
-                                        <View className={styles.tag_list}>
+                                        <View className={styles.introduce}>平纹系列</View>
-                                            <View className={styles.tag}>160cm</View>
-                                            <View className={styles.tag}>110g</View>
-                                        </View>
-                                        <View className={styles.introduce}>67.6%棉24%涤纶6.4%氨纶</View>
                                     </View>
                                 </View>
                             })}

src/pages/searchList/searchList.module.scss

@@ -57,6 +57,7 @@
         .filter_scroll{
             flex:1;
             width: 0;
+            padding-left: 20px;
             ::-webkit-scrollbar {
                 display:none;
                 width:0;
@@ -149,6 +150,23 @@
                     height: 224px;
                     background: #e5ad3a;
                     border-radius: 20px 20px 0px 0px;
+                    position: relative;
+                    image{
+                        width: 100%;
+                        height: 100%;
+                        border-radius: 20px 20px 0px 0px;
+                    }
+                    .color_num {
+                        background: rgba(0,0,0, 0.5);
+                        border-radius: 50px 0px 0px 0px;
+                        font-size: $font_size_min;
+                        color: #fff;
+                        position: absolute;
+                        right:0;
+                        bottom:0;
+                        padding: 5px 20px;
+                        box-sizing: border-box;
+                    }
                 }
             }
             .product_info{

src/pages/searchList/searchList.tsx

@@ -1,10 +1,12 @@
-import { ScrollView, Text, View } from "@tarojs/components"
+import { Image, ScrollView, Text, View } from "@tarojs/components"
 import classnames from "classnames";
 import Search from '@/components/search'
 import Filter from "@/components/filter";
 import InfiniteScroll from '@/components/infiniteScroll'
 import SortBtn from "@/components/sortBtn";
+import SelectData from "./components/selectData";
 import Tabs from "@/components/tabs";
+import { goLink } from "@/common/common";
 import styles  from './searchList.module.scss'
 import { useCallback, useState } from "react";
 
@@ -15,11 +17,11 @@ export default () => {
         {title: '系列', value:2},
         {title: '系列', value:3},
         {title: '系列', value:4},
-        {title: '系列', value:5},
+        {title: '系列', value:6},
-        {title: '系列', value:5},
+        {title: '系列', value:7},
-        {title: '系列', value:5},
+        {title: '系列', value:8},
-        {title: '系列', value:5},
+        {title: '系列', value:9},
-        {title: '系列', value:5},
+        {title: '系列', value:10},
     ])
     const [scrollStatus, setScrollStatus] = useState(false)
     const onscroll = useCallback((e) => {
@@ -44,22 +46,16 @@ export default () => {
                         <Text>收藏</Text>
                         <SortBtn status="top"/>
                     </View>
-                    <View className={styles.text_ss} >
+                    <View className={styles.text_ss} onClick={() => goLink('/pages/searchList/hightSearchList')}>
                         <Text>高级搜索</Text>
                         <Text className={classnames('iconfont icon-sousuo', styles.miconfont)}></Text>
                     </View>
                 </View>
+                
                 <View className={styles.filter_btn_con}>
-                    <ScrollView scrollX className={styles.filter_scroll}>
+                    <View className={styles.filter_scroll}>
-                        <View className={styles.filter_btn}>
+                        <SelectData list={selectList}/>
-                                <View>系列</View>
+                    </View>
-                                <View>幅宽</View>
-                                <View>克重</View>
-                                <View>克重</View>
-                                <View>克重</View>
-                                <View className={styles.selected}>成分</View>
-                        </View>
-                    </ScrollView>
                     <View className={styles.filter_more} onClick={() => setShowFilter(true)}>
                         <Text>筛选</Text>
                         <Text className={classnames('iconfont icon-shaixuan', styles.miconfont)}></Text>
@@ -76,7 +72,10 @@ export default () => {
                         <View className={styles.product_list}>
                             {new Array(9).fill(' ').map(item => {
                                 return <View className={styles.product_item}>
-                                    <View className={styles.product_img}></View>
+                                    <View className={styles.product_img}>
+                                        <Image mode="aspectFill" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d"></Image>
+                                        <View className={styles.color_num}>25色</View>
+                                    </View>
                                     <View className={styles.product_info}>
                                         <View className={styles.title}>0770#21S精棉平纹</View>
                                         <View className={styles.tag_list}>

src/use/contextBlueTooth.tsx

@@ -0,0 +1,477 @@
+import React, {useRef, useState } from "react"
+import Taro from "@tarojs/taro";
+import { Command } from "@/common/bluetooth/command";
+import { uint8ArrayToFloat32, uint8ArrayToHex, waitFor } from "@/common/bluetooth/utils";
+
+
+interface params {
+    init: () => void
+    state: Object,
+    startScan: () => void,
+    measureAndGetLab: () => any,
+    getAdapterState: () => void,
+    connect: (any) => void,
+    disconnect: () => void
+}
+const Context = React.createContext<params|unknown>(null)
+
+interface stateStype {
+    listeners: any,
+    discovering: boolean,
+    available: boolean,
+    connected: any,
+    connecting: any,
+    serviceRule: any,
+    serviceId: any,
+    characteristicRule: any,
+    characteristicId: any,
+
+    /** 正在执行的命令 */
+    command: any,
+    responseResolve: any,
+    responseReject: any,
+    responseTimer: any,
+
+    /** 是否显示蓝牙调试信息 */
+    debug: any,
+    //搜索到的设备
+    devices: any,
+    //取色仪主动返回的数据
+    deviceLab: any
+}
+
+let stateObj: stateStype = {
+    /** 事件监听器 */ 
+    listeners: new Set(),
+    /** 正在扫描设备 */
+    discovering: false,
+    /** 蓝牙是否可用 */
+    available: true,
+    /** 当前连接的设备 */
+    connected: null,
+    /** 正在连接的设备 */
+    connecting: null,
+
+    serviceRule: /^0000FFE0/,
+    serviceId: null,
+    characteristicRule: /^0000FFE1/,
+    characteristicId: null,
+
+    /** 正在执行的命令 */
+    command: null,
+    responseResolve: null,
+    responseReject: null,
+    responseTimer: null,
+
+    /** 是否显示蓝牙调试信息 */
+    debug: true,
+    //搜索到的设备
+    devices: [],
+    //取色仪主动返回的数据
+    deviceLab: null
+}
+
+export default (props) => {
+    let refStatus = useRef(stateObj)
+    let [state, setState] = useState(refStatus.current)
+
+    const changeStatus =  (obj:Object): void => {
+        refStatus.current = {...refStatus.current, ...obj}
+        setState({...refStatus.current})
+    }
+
+    const init = async () => {
+        try{
+            await openAdapter();
+        }catch(e) {
+            changeStatus({available:false})
+        }
+        
+        // 绑定事件通知
+        Taro.onBluetoothAdapterStateChange(res => {
+            emit({ type: 'stateUpdate', detail: res });
+        });
+        Taro.onBLEConnectionStateChange(res => {
+            emit({ type: res.connected ? 'connected' : 'disconnect', detail: res });
+        });
+        Taro.onBLECharacteristicValueChange(({ value }) => notifySubscriber(value));
+        subscribe(async ev => {
+            if (ev.type === 'stateUpdate') {
+                // 蓝牙状态发生的变化
+                changeStatus({discovering:ev.detail.discovering, available:ev.detail.available})
+            } else if (ev.type === 'disconnect' && refStatus.current.connected && refStatus.current.connected.deviceId === ev.detail.deviceId) {
+                // 断开连接
+                changeStatus({
+                    connected:null,  
+                    serviceId:null,
+                    characteristicId:null, 
+                    deviceLab:null, 
+                    devices:[]
+                })
+                Taro.showToast({ icon: 'none', title: '蓝牙连接已断开' });
+            } else if (ev.type === 'connected' && refStatus.current.connecting) {
+                // 连接成功
+                changeStatus({connected: refStatus.current.connecting, connecting: null})
+                Taro.showToast({ title: '蓝牙已连接' });
+            } else if (ev.type === 'measure') {
+                //监听取色仪主动推送lab
+                await measureAndGetLab()
+            }
+            
+        });
+    }
+
+    /** 打开蓝牙适配器 */
+    const openAdapter = () => {
+        return new Promise((resolve, reject) => {
+            Taro.openBluetoothAdapter({
+                success: resolve,
+                fail: reject
+            });
+        });
+    }
+
+    /**
+     * 推送事件
+     * @param {{type: string; data: any}} event 
+     */
+     const emit = (event) => {
+        refStatus.current.listeners.forEach(cb => {
+            cb && cb(event);
+        });
+    }
+
+    const subscribe = (cb) => {
+        if (cb) {
+            changeStatus({
+                listeners: refStatus.current.listeners.add(cb)
+            })
+        }
+    }
+
+    /** 
+     * 获取蓝牙适配器状态 
+     * @returns {Promise<{discovering: boolean; available: boolean}>}
+     */
+     const getAdapterState = () => {
+        return new Promise((resolve, reject) => {
+            Taro.getBluetoothAdapterState({
+                success: resolve,
+                fail: reject
+            })
+        })
+    }
+
+    /**
+     * 启动设备扫描
+     * @param {(res: { devices: { name: string, deviceId: string, RSSI: number }[] }) => void} cb 
+     * @param {number} duration 
+     */
+     const startScan = (duration = 30000) => {
+        console.log('开始寻找')
+        changeStatus({devices:[]})
+        Taro.onBluetoothDeviceFound(getDevices);
+        return new Promise((resolve, reject) => {
+            Taro.startBluetoothDevicesDiscovery({
+                allowDuplicatesKey: true,
+                success: resolve,
+                fail: reject
+            });
+
+            if (duration > 0) {
+                setTimeout(() => {
+                    Taro.offBluetoothDeviceFound(getDevices);
+                    Taro.stopBluetoothDevicesDiscovery();
+                    console.log("停止搜索")
+                }, duration);
+            }
+        });
+    }
+
+     //获取搜索到的设备
+     const getDevices = (res) => {
+        res.devices.forEach(device => {
+            // 排除掉已搜索到的设备和名称不合法的设备, 将新发现的设备添加到列表中
+            if (/^CM/.test(device.name) && !refStatus.current.devices.find(i => i.deviceId === device.deviceId)) {
+                changeStatus({devices: [ ...refStatus.current.devices, device ]})
+            }
+        });
+    }
+
+    /**
+     * 连接设备
+     * @param {{ name: string, deviceId: string, RSSI: number }} device 
+     */
+     const connect = async (device) => {
+        try {
+            changeStatus({connecting: device})
+            console.log('connecting::', device)
+            await createConnection(device.deviceId);
+            await discoverService(device.deviceId);
+            await discoverCharacteristic(device.deviceId);
+            await notifyCharacteristicValueChange(device.deviceId);
+        } catch (e) {
+            changeStatus({connecting: null})
+            Taro.showToast({ icon: 'none', title: '蓝牙连接失败' });
+            throw e;
+        }
+    }
+
+    /** 断开当前连接的设备 */
+    const  disconnect = async () => {
+        if (!refStatus.current.connected && !refStatus.current.connecting) return;
+        if (refStatus.current.connected) {
+            await closeConnection(refStatus.current.connected.deviceId);
+            resetCommand();
+            changeStatus({
+                connected: null,
+                serviceId: null,
+                characteristicId: null,
+                devices: [],
+                deviceLab: null
+            })
+        }
+
+        if (refStatus.current.connecting) {
+            await closeConnection(refStatus.current.connecting.deviceId);
+            changeStatus({connecting:null})
+        }
+    }
+
+    /** 创建 BLE 连接 */
+    function createConnection(deviceId) {
+        return new Promise((resolve, reject) => {
+            Taro.createBLEConnection({
+                deviceId,
+                timeout: 2000,
+                success: resolve,
+                fail: reject
+            });
+        });
+    }
+
+    /** 关闭 BLE 连接 */
+    function closeConnection(deviceId) {
+        return new Promise((resolve, reject) => {
+            Taro.closeBLEConnection({
+                deviceId,
+                success: resolve,
+                fail: reject
+            });
+        });
+    }
+
+    /** 搜索服务 */
+    function discoverService(deviceId) {
+        return new Promise((resolve, reject) => {
+            Taro.getBLEDeviceServices({
+                deviceId,
+                success: ({ services }) => {
+                    const service = services.find(i => refStatus.current.serviceRule.test(i.uuid));
+                    if (!service) {
+                        reject(new Error('服务不可用'));
+                    } else {
+                        changeStatus({serviceId: service.uuid})
+                        resolve(service);
+                    }
+                },
+                fail: reject
+            });
+        });
+    }
+
+    /** 搜索特征 */
+    function discoverCharacteristic(deviceId) {
+        return new Promise((resolve, reject) => {
+            Taro.getBLEDeviceCharacteristics({
+                deviceId,
+                serviceId: refStatus.current.serviceId,
+                success: ({ characteristics }) => {
+                    const characteristic = characteristics.find(i => refStatus.current.characteristicRule.test(i.uuid));
+                    if (!characteristic) {
+                        reject(new Error('特征不可用'));
+                    } else {
+                        changeStatus({characteristicId: characteristic.uuid})
+                        resolve(characteristic);
+                    }
+                },
+                fail: reject
+            })
+        });
+    }
+
+     /** 启动特征通知 */
+     function notifyCharacteristicValueChange(deviceId, stateParm = true) {
+        return new Promise((resolve, reject) => {
+            Taro.notifyBLECharacteristicValueChange({
+                deviceId,
+                serviceId: refStatus.current.serviceId,
+                characteristicId: refStatus.current.characteristicId,
+                state:stateParm,
+                success: resolve,
+                fail: reject
+            });
+        });
+    }
+
+    /**
+     * 通知订阅器
+     * @param {ArrayBuffer} buffer 
+     */
+     function notifySubscriber(buffer) {
+        if (refStatus.current.command) {
+            if (refStatus.current.debug) {
+                console.log(`[BLE RESP] ${uint8ArrayToHex(new Uint8Array(buffer))}`);
+            }
+            refStatus.current.command.fillResponse(buffer);
+            if (refStatus.current.command.isComplete) {
+                if (refStatus.current.command.isValid && refStatus.current.responseResolve) {
+                    refStatus.current.responseResolve(refStatus.current.command.response);
+                } else if (!refStatus.current.command.isValid) {
+                    refStatus.current.responseReject(new Error('无效数据'));
+                }
+                resetCommand();
+            }
+        } else {
+            const uint8Array = new Uint8Array(buffer);
+            if (uint8Array[0] === 0xbb && uint8Array[1] === 1 && uint8Array[3] === 0) {
+                const ev = { type: 'measure', detail: { mode: uint8Array[2] } };
+                emit(ev);
+            }
+        }
+    }
+
+    /**
+     * 发送命令
+     * @param {Command}} command 
+     * @returns {Promise<Uint8Array>}
+     */
+     function exec(command) {
+        return new Promise(async (resolve, reject) => {
+            if (refStatus.current.command) {
+                reject(new Error('正在执行其他命令'));
+            } else {
+                try {
+                    refStatus.current.command = command;
+                    const data = command.data;
+                    for (let i = 0; i < data.length; i++) {
+                        await sendData(data[i]);
+                    } 
+
+                    if (command.responseSize <= 0) {
+                        resolve(true);
+                        resetCommand();
+                    } else {
+                        refStatus.current.responseReject = reject;
+                        refStatus.current.responseResolve = resolve;
+                        refStatus.current.responseTimer = setTimeout(() => {
+                            reject(new Error('命令响应超时'));
+                            resetCommand();
+                        }, command.timeout);
+                    }
+                } catch (e) {
+                    reject(e);
+                }
+            }
+            
+        });
+    }
+
+     /**
+     * 发送命令
+     * @param {ArrayBuffer} buffer 
+     */
+      function sendData(buffer) {
+        if (refStatus.current.debug) {
+            console.log(`[BLE SEND] ${uint8ArrayToHex(new Uint8Array(buffer))}`);
+        }
+        return new Promise((resolve, reject) => {
+            console.log('current:::',refStatus.current)
+            Taro.writeBLECharacteristicValue({
+                deviceId: refStatus.current.connected.deviceId,
+                serviceId: refStatus.current.serviceId,
+                characteristicId: refStatus.current.characteristicId,
+                value: buffer,
+                success: resolve,
+                fail: reject
+            })
+        });
+    }
+
+    function resetCommand() {
+        if (refStatus.current.responseTimer) {
+            clearTimeout(refStatus.current.responseTimer);
+        }
+        changeStatus({
+            command: null,
+            responseResolve: null,
+            responseReject: null,
+            responseTimer: null
+        })
+    }
+
+    /**
+     * 测量
+     * @param {number} mode 
+     * @returns {Promise}
+     */
+     async function measure (mode = 0) {
+        console.log('current1:::',Command.WakeUp)
+        await exec(Command.WakeUp);
+        console.log('current2:::',Command.WakeUp)
+        await waitFor(50);
+        console.log('current3:::',Command.WakeUp)
+        return await exec(Command.measure(mode));
+    }
+
+    /**
+     * 获取测量的 lab 值
+     * @param {number} mode 
+     * @returns {Promise<{ L: number, a: number, b: number }>}
+     */
+    async function getLab(mode = 0) {
+        await exec(Command.WakeUp);
+        await waitFor(50);
+        const data: any = await exec(Command.getLab(mode));
+        return {
+            L: uint8ArrayToFloat32(data.slice(5, 9)),
+            a: uint8ArrayToFloat32(data.slice(9, 13)),
+            b: uint8ArrayToFloat32(data.slice(13, 17)),
+        };
+    }
+
+    /**
+     * 测量并获取 lab 值
+     * @param {number} mode 
+     * @returns {Promise<{L: number, a: number, b: number}>}
+     */
+     async function measureAndGetLab(mode = 0) {
+        await measure(mode);
+        await waitFor(50);
+        const lab = await getLab(mode);
+        console.log('lab2::',lab)
+        changeStatus({deviceLab:lab})
+        return lab
+    }
+
+    return <Context.Provider children={props.children} value={{
+        init, 
+        state,
+        startScan,
+        measureAndGetLab,
+        getAdapterState,
+        connect,
+        disconnect
+    }} />
+}
+
+
+export const useBluetooth = () => {
+    const res = React.useContext<any>(Context)
+    if(res) {
+        return {...res}
+    } else {
+        return {}
+    }
+    
+}