From 85c591d7458dec1a38173c2cc709c4041c61f3aa Mon Sep 17 00:00:00 2001
From: Haiyi <1021441632@qq.com>
Date: Tue, 28 Jun 2022 10:31:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=93=81=E5=AF=B9=E6=AF=94=E6=A8=A1?=
=?UTF-8?q?=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
project.config.json | 3 +-
src/app.config.ts | 9 +-
src/common/constant.js | 6 +-
.../compoents/bluetooth/LinkBlueTooth.tsx | 90 +++++++++++++++++++
.../compoents/bluetooth/Popup.tsx | 73 +++++++++++++++
.../css/linkBlueTooth.module.scss | 42 +++++++++
.../sampleComparison/css/popup.module.scss | 90 +++++++++++++++++++
src/pages/sampleComparison/index.module.scss | 6 ++
src/pages/sampleComparison/index.tsx | 46 ++++++++--
9 files changed, 353 insertions(+), 12 deletions(-)
create mode 100644 src/pages/sampleComparison/compoents/bluetooth/LinkBlueTooth.tsx
create mode 100644 src/pages/sampleComparison/compoents/bluetooth/Popup.tsx
create mode 100644 src/pages/sampleComparison/css/linkBlueTooth.module.scss
create mode 100644 src/pages/sampleComparison/css/popup.module.scss
diff --git a/project.config.json b/project.config.json
index aab17ff..e796931 100644
--- a/project.config.json
+++ b/project.config.json
@@ -30,7 +30,8 @@
"outputPath": ""
},
"disableUseStrict": false,
- "useCompilerPlugins": false
+ "useCompilerPlugins": false,
+ "minifyWXML": true
},
"compileType": "miniprogram",
"libVersion": "2.24.5",
diff --git a/src/app.config.ts b/src/app.config.ts
index e735150..0d19c18 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -177,6 +177,13 @@ export default {
pages: [
"index",
]
- }
+ },
+ {
+ root: "pages/sampleComparison",
+ pages: [
+ "index",
+ ]
+ },
+
]
}
diff --git a/src/common/constant.js b/src/common/constant.js
index 6fca6ae..6b30deb 100644
--- a/src/common/constant.js
+++ b/src/common/constant.js
@@ -1,16 +1,16 @@
-// export const BASE_URL = CURRENT_ENV.includes('development') ? `https://test.zzfzyc.com/lymarket` : `https://www.zzfzyc.com/lymarket`
+export const BASE_URL = CURRENT_ENV.includes('development') ? `https://test.zzfzyc.com/lymarket` : `https://www.zzfzyc.com/lymarket`
// export const BASE_URL = `http://192.168.0.75:50001/lymarket`
// export const BASE_URL = `http://192.168.0.89:50001/lymarket`
// export const BASE_URL = `http://10.0.0.5:50001/lymarket`
// export const BASE_URL = `http://192.168.0.89:40001/lymarket`
// export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
// export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境
-// export const BASE_URL = `http://192.168.1.30:40001/lymarket` // 发
+// export const BASE_URL = `http://192.168.1.9:40001/lymarket` // 发
// export const BASE_URL = `http://192.168.1.30:50001/lymarket` // 发
// export const BASE_URL = `https://dev.zzfzyc.com/lymarket` // 开发环境
// export const BASE_URL = `https://www.zzfzyc.com/lymarket` // 正式环境
// export const BASE_URL = `http://192.168.1.4:40001/lymarket` // 王霞
-export const BASE_URL = `http://192.168.1.7:50001/lymarket` // 添
+// export const BASE_URL = `http://192.168.1.7:50001/lymarket` // 添
// export const BASE_URL = `http://192.168.1.15:50001/lymarket` // 杰
// CDN
diff --git a/src/pages/sampleComparison/compoents/bluetooth/LinkBlueTooth.tsx b/src/pages/sampleComparison/compoents/bluetooth/LinkBlueTooth.tsx
new file mode 100644
index 0000000..3d36166
--- /dev/null
+++ b/src/pages/sampleComparison/compoents/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 "./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 (
+ <>
+
+
+
+
+ {
+ linkStatus == 1 && 请开启蓝牙 ||
+ linkStatus == 2 && 未连接设备 ||
+ linkStatus == 3 && {linkName}
+ }
+
+
+ setPopupShow(false)}
+ onLink={item => onLinkListen(item)}
+ onOff={onDisconnect}
+ onFind={onFindEven}
+ />
+
+
+
+ );
+
+})
diff --git a/src/pages/sampleComparison/compoents/bluetooth/Popup.tsx b/src/pages/sampleComparison/compoents/bluetooth/Popup.tsx
new file mode 100644
index 0000000..d8a9464
--- /dev/null
+++ b/src/pages/sampleComparison/compoents/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&&
+
+ 搜索设备
+
+
+ {
+ (state.devices&&state.devices.length > 0)&&state?.devices.map(item => {
+ return (
+ onLink(item)}>
+ {item.name}
+ {
+ (!state.connecting&&!state.connected)&&链接||
+ (state.connecting&&item.deviceId == state.connecting.deviceId)&&正在链接...||
+ (state.connected&&item.deviceId == state.connected.deviceId)&&链接成功
+ }
+
+ )
+ })||
+
+ {
+ (!state.discovering)&& <>
+ 暂无设备,请按以下条件检查
+ 1.请确保取色仪处于激活状态
+ 2.请确保取色仪没有链接其他设备
+ 3.请打开手机定位
+ ||
+ 设备搜索中
+ }
+
+
+
+ }
+
+
+ {
+ state.connected&&断开链接||
+ (!state.connected&&state.discovering)&&搜索中||
+ 重新搜索
+ }
+
+
+
+ }
+
+ )
+})
\ No newline at end of file
diff --git a/src/pages/sampleComparison/css/linkBlueTooth.module.scss b/src/pages/sampleComparison/css/linkBlueTooth.module.scss
new file mode 100644
index 0000000..0714b46
--- /dev/null
+++ b/src/pages/sampleComparison/css/linkBlueTooth.module.scss
@@ -0,0 +1,42 @@
+.main {
+ width: 690px;
+ height: 86px;
+ background: #ffffff;
+ border-radius: 10px;
+ margin-top: 24px;
+ margin-left: 30px;
+
+ .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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/sampleComparison/css/popup.module.scss b/src/pages/sampleComparison/css/popup.module.scss
new file mode 100644
index 0000000..d6c273f
--- /dev/null
+++ b/src/pages/sampleComparison/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;
+ }
+ }
+}
diff --git a/src/pages/sampleComparison/index.module.scss b/src/pages/sampleComparison/index.module.scss
index 210c3fa..fd9517c 100644
--- a/src/pages/sampleComparison/index.module.scss
+++ b/src/pages/sampleComparison/index.module.scss
@@ -95,6 +95,12 @@ page {
font-weight: 400;
color: #707070;
}
+
+ }
+
+ .color_bock {
+ width: 290px;
+ height: 290px;
}
.nameColor {
diff --git a/src/pages/sampleComparison/index.tsx b/src/pages/sampleComparison/index.tsx
index a71d7ab..b8c9cf7 100644
--- a/src/pages/sampleComparison/index.tsx
+++ b/src/pages/sampleComparison/index.tsx
@@ -1,10 +1,26 @@
import { Image, Text, Textarea, View } from "@tarojs/components"
import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useBluetooth } from "@/use/contextBlueTooth"
import classnames from "classnames";
+import LinkBlueTooth from "./compoents/bluetooth/LinkBlueTooth";
+import { toRgb } from '@/common/bluetooth/color/colorSpace'
import styles from './index.module.scss'
+
export default () => {
+ //搜索参数
+ const [searchField, setSearchField] = useState({
+ l: '',
+ a: '',
+ b: '',
+ page: 1,
+ size: 10,
+ width: '',
+ weight_density: '',
+ product_kind_id: '',
+ component: ''
+ })
const { state: colorState, measureAndGetLab } = useBluetooth()
const getLab = () => {
if (colorState.connected) {
@@ -16,9 +32,18 @@ export default () => {
})
}
}
+ //监听lab数据变化
+ const [blueToothColor, setBlueToothColor] = useState('')
+ useEffect(() => {
+ if (colorState.deviceLab) {
+ const rgb = toRgb([colorState.deviceLab.L, colorState.deviceLab.a, colorState.deviceLab.b])
+ setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
+ setSearchField({ ...searchField, l: rgb[0], a: rgb[1], b: rgb[2], size: 10 })
+ }
+ }, [colorState.deviceLab])
return (
-
+ {/*
蓝牙设备
@@ -26,19 +51,26 @@ export default () => {
-
+ */}
+
- 对比样品
-
- 点击取色
-
+ 对比样品
+ {
+ blueToothColor === '' &&
+ getLab()}>
+ 点击取色
+
+ }
+ {blueToothColor &&
+
+ }
--
对比样品
- 点击取色
+ getLab()}>点击取色
--