冲突合并
This commit is contained in:
Haiyi
@@ -0,0 +1,82 @@
|
||||
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)
|
||||
}
|
||||
}, [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} showBorder={false}>
|
||||
<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>
|
||||
</>
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,79 @@
|
||||
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>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,39 @@
|
||||
.main {
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 10px;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
.popups {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
.cover {
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 10;
|
||||
}
|
||||
.popcoms {
|
||||
z-index: 100;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border-radius: 20px;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
.con {
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.showRgb {
|
||||
width: 100%;
|
||||
height: 550px;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 20px 0;
|
||||
font-size: 26px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { View } from "@tarojs/components"
|
||||
import React, { FC, memo, useEffect, useState } from "react"
|
||||
import styles from './index.module.scss'
|
||||
|
||||
type PropsType = {
|
||||
showModal: boolean
|
||||
children?: React.ReactNode
|
||||
}
|
||||
|
||||
const DrawerCenter: FC<PropsType> = memo((props) => {
|
||||
const { children, showModal } = props
|
||||
|
||||
const [show, setShow] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setShow(showModal)
|
||||
}, [showModal])
|
||||
// 关闭
|
||||
const close = () => {
|
||||
setShow(false)
|
||||
}
|
||||
|
||||
return show ? (
|
||||
<View className={styles.popups} catchMove>
|
||||
<View className={styles.popcoms}>{children}</View>
|
||||
<View className={styles.cover} onClick={close}></View>
|
||||
</View>
|
||||
) : null
|
||||
})
|
||||
export default DrawerCenter
|
||||
@@ -0,0 +1,113 @@
|
||||
|
||||
.history_color {
|
||||
.selectCon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
.selectList {
|
||||
width: 692px;
|
||||
height: 230px;
|
||||
background: #ffffff;
|
||||
border-radius: 30px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
box-sizing: border-box;
|
||||
.rgbColor {
|
||||
width: 161px;
|
||||
height: 161px;
|
||||
background: red;
|
||||
border-radius: 50%;
|
||||
margin-left: 30px;
|
||||
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.product_con {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 32px;
|
||||
font-size: 26px;
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
color: #505050;
|
||||
.product_name {
|
||||
@include common_ellipsis();
|
||||
font-size: 28px;
|
||||
color: #5f5f5f;
|
||||
font-weight: 700;
|
||||
margin-bottom: 46px;
|
||||
}
|
||||
.product_color {
|
||||
@include common_ellipsis();
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.contrast {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
.g_num {
|
||||
@include common_ellipsis();
|
||||
}
|
||||
.num {
|
||||
color: #00499f;
|
||||
background: #c9e4ff;
|
||||
padding: 3px 10px;
|
||||
border-radius: 7px;
|
||||
margin-left: 18px;
|
||||
}
|
||||
}
|
||||
.date {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: #fff;
|
||||
padding: 3px 10px;
|
||||
border-radius: 10px;
|
||||
width: 258px;
|
||||
}
|
||||
}
|
||||
.labColor {
|
||||
flex: 1;
|
||||
// height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 27px;
|
||||
color: #707070;
|
||||
.labColor_btn {
|
||||
width: 47px;
|
||||
height: 47px;
|
||||
background: #007aff;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 47px;
|
||||
border-radius: 50%;
|
||||
font-size: 39px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.labColor_con {
|
||||
flex: 1;
|
||||
.L,
|
||||
.a {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.noData {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #707070;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
.selectList-scroll-color {
|
||||
height: 70vh;
|
||||
width: 100%;
|
||||
}
|
||||
.drawer-container {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
import Popup from "@/components/popup"
|
||||
import { ScrollView, View } from "@tarojs/components"
|
||||
import { FC, useEffect, useState } from "react"
|
||||
import styles from './index.module.scss'
|
||||
import { formatDateTime} from "@/common/format";
|
||||
import {toRgb} from '@/common/bluetooth/color/colorSpace'
|
||||
import Taro from "@tarojs/taro";
|
||||
|
||||
type PropsType = {
|
||||
showModal: boolean
|
||||
onColor?:Function
|
||||
}
|
||||
|
||||
const HistoryColor: FC<PropsType> = (props) => {
|
||||
|
||||
|
||||
const { onColor, showModal } = props
|
||||
const [show, setShow] = useState(false)
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setShow(showModal)
|
||||
}, [showModal])
|
||||
|
||||
|
||||
const closeEven = () => {
|
||||
setShow(false)
|
||||
}
|
||||
|
||||
const [list, setList] = useState([
|
||||
{
|
||||
p_time: 0,
|
||||
lab: [],
|
||||
code: '',
|
||||
name: ''
|
||||
}
|
||||
])
|
||||
|
||||
//保留1位小数
|
||||
const noScale = (val, num = 1) => {
|
||||
return val?.toFixed(num)
|
||||
}
|
||||
//rgb转换字符串
|
||||
const labRoRgb = (val) => {
|
||||
const rgb = toRgb(val)
|
||||
return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`
|
||||
}
|
||||
|
||||
const getInfo = (item) => {
|
||||
onColor && onColor(item)
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<View className={styles.history_color}>
|
||||
<Popup title='历史取样记录 ( 最近30条 )' show={show} onClose={closeEven}>
|
||||
<ScrollView className={styles['selectList-scroll-color']} scrollY>
|
||||
<View className={styles.selectCon}>
|
||||
{!!list?.length ? (
|
||||
list.map((item, index) => {
|
||||
return (
|
||||
<View key={item.p_time} className={styles.selectList} onClick={() => getInfo(item)}>
|
||||
<View className={styles.rgbColor} style={{ background: labRoRgb(item.lab) }}></View>
|
||||
<View className={styles.product_con}>
|
||||
<View className={styles.product_name}>{item.code + ' ' + item.name}</View>
|
||||
<View className={styles.date}>{formatDateTime(item.p_time)}</View>
|
||||
</View>
|
||||
<View className={styles.labColor}>
|
||||
<View className={styles.labColor_btn}>+</View>
|
||||
<View className={styles.labColor_con}>
|
||||
<View className={styles.L}>L*：{noScale(item.lab[0])}</View>
|
||||
<View className={styles.a}>a*：{noScale(item.lab[1])}</View>
|
||||
<View className={styles.b}>b*：{noScale(item.lab[2])}</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<View className='noData'>暂无数据</View>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</Popup>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
export default HistoryColor
|
||||
@@ -0,0 +1,46 @@
|
||||
.lab_color_main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px 0;
|
||||
font-size: 28px;
|
||||
.btnColor {
|
||||
width: 264px;
|
||||
height: 264px;
|
||||
background: #dddddd;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 264px;
|
||||
color: #707070;
|
||||
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.labCon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 20px 0 20px 20px;
|
||||
color: #707070;
|
||||
.lab {
|
||||
color: #707070;
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
text {
|
||||
display: flex;
|
||||
&:nth-child(1) {
|
||||
font-weight: 700;
|
||||
}
|
||||
&:nth-child(n + 2) {
|
||||
background-color: #fff;
|
||||
margin-left: 17px;
|
||||
padding: 3px 15px;
|
||||
border-radius: 10px;
|
||||
width: 73px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.date {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { FC, useMemo } from 'react'
|
||||
import { toRgb } from '@/common/bluetooth/color/colorSpace'
|
||||
import styles from './index.module.scss'
|
||||
import { formatDateTime } from '@/common/format'
|
||||
|
||||
type PropsType = {
|
||||
lab?: Array<any>
|
||||
time?: any
|
||||
onLab?: Function
|
||||
}
|
||||
|
||||
const LabColor: FC<PropsType> = (props) => {
|
||||
const { lab = [], time, onLab } = props
|
||||
const noScale = (val, num = 1) => {
|
||||
return val.toFixed(num)
|
||||
}
|
||||
|
||||
const labObj = useMemo(() => {
|
||||
if (lab.length <= 0) return { lab: [], rgb: '' }
|
||||
const rgb = toRgb(lab)
|
||||
return {
|
||||
lab: [noScale(lab[0]), noScale(lab[1]), noScale(lab[2])],
|
||||
rgb: `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`,
|
||||
}
|
||||
}, [lab])
|
||||
|
||||
const labTime = useMemo(() => {
|
||||
if (time.length <= 0) return ''
|
||||
return formatDateTime(time)
|
||||
}, [time])
|
||||
|
||||
const onLabEven = () => {
|
||||
onLab && onLab()
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.lab_color_main}>
|
||||
<View className={styles.btnColor} onClick={onLabEven} style={{ background: labObj.rgb }}>
|
||||
{!!labObj.lab.length ? '' : '点击取色'}
|
||||
</View>
|
||||
<View className={styles.labCon}>
|
||||
<View className={styles.lab}>
|
||||
<Text>L*a*b*:</Text>
|
||||
<Text>{labObj.lab[0]}</Text>
|
||||
<Text>{labObj.lab[1]}</Text>
|
||||
<Text>{labObj.lab[2]}</Text>
|
||||
</View>
|
||||
<View className={styles.date}>{labTime && <Text>取样时间: {labTime}</Text>}</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
export default LabColor
|
||||
@@ -0,0 +1,121 @@
|
||||
.RecommendColor_main {
|
||||
width: 100%;
|
||||
.RecommendColor_list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.RecommendColor_item {
|
||||
background: #fff;
|
||||
width: 48.5%;
|
||||
height: 356px;
|
||||
border-radius: 30px;
|
||||
margin-bottom: 20px;
|
||||
&:nth-child(2n) {
|
||||
margin-left: 3%;
|
||||
}
|
||||
.rgbColor {
|
||||
width: 100%;
|
||||
height: 188px;
|
||||
background: rgb(0, 195, 255);
|
||||
border-radius: 30px 30px 0 0;
|
||||
position: relative;
|
||||
.lab {
|
||||
width: 90px;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
border-radius: 0 30px 0 0;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26px;
|
||||
text {
|
||||
&:nth-child(1) {
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.product_con {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 26px;
|
||||
padding: 10px 15px 15px 15px;
|
||||
box-sizing: border-box;
|
||||
.product_color {
|
||||
color: #505050;
|
||||
@include common_ellipsis();
|
||||
}
|
||||
.product_title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.product_name {
|
||||
@include common_ellipsis();
|
||||
color: #0c68c5;
|
||||
font-weight: 700;
|
||||
font-size: 28px;
|
||||
flex: 1;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.product_num {
|
||||
background: #c9e4ff;
|
||||
color: #00499f;
|
||||
padding: 3px 6px;
|
||||
font-size: 26px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
}
|
||||
.date {
|
||||
margin-top: 15px;
|
||||
color: #808080;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.labColor_btn {
|
||||
width: 47px;
|
||||
height: 47px;
|
||||
background: #007aff;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 47px;
|
||||
border-radius: 50%;
|
||||
font-size: 39px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.g_num {
|
||||
flex: 1;
|
||||
margin-right: 10px;
|
||||
@include common_ellipsis();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.con {
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.showRgb {
|
||||
width: 100%;
|
||||
height: 550px;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.name {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 20px 0;
|
||||
font-size: 26px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import { FC, useState } from 'react'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { toRgb } from '@/common/bluetooth/color/colorSpace'
|
||||
import styles from './index.module.scss'
|
||||
import { formatDateTime } from '@/common/format'
|
||||
import classnames from 'classnames'
|
||||
import DrawerCenter from '../DrawerCenter'
|
||||
|
||||
type PropsType = {
|
||||
list?: Array<any>
|
||||
customStyle?: React.CSSProperties
|
||||
}
|
||||
|
||||
const RecommendColor: FC<PropsType> = (props) => {
|
||||
|
||||
const { list, customStyle = {} } = props
|
||||
|
||||
//rgb转换字符串
|
||||
const labRoRgb = (val) => {
|
||||
const lab = val ? [val.l, val.a, val.b] : []
|
||||
const rgb = toRgb(lab)
|
||||
return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`
|
||||
}
|
||||
|
||||
//保留1位小数
|
||||
const noScale = (val, num = 1) => {
|
||||
return val.toFixed(num)
|
||||
}
|
||||
|
||||
const [show, setShow] = useState(false)
|
||||
const [selectObj, setSelectObj] = useState({
|
||||
rgb: '',
|
||||
product_color_code: '',
|
||||
product_color_name: ''
|
||||
})
|
||||
|
||||
const openShow = (val) => {
|
||||
setShow(true)
|
||||
setSelectObj(val)
|
||||
setSelectObj({ ...val, rgb: labRoRgb(val.lab) })
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<View className={classnames(styles.RecommendColor_main, customStyle)}>
|
||||
<View className={styles.RecommendColor_list}>
|
||||
{list?.map((item) => {
|
||||
return (
|
||||
<View className={styles.RecommendColor_item} key={item.id} onClick={() => openShow(item)}>
|
||||
<View className={styles.rgbColor} style={{ background: labRoRgb(item.lab) }}>
|
||||
<View className={styles.lab}>
|
||||
<text>L*a*b*</text>
|
||||
<text>{noScale(item.lab.l)}</text>
|
||||
<text>{noScale(item.lab.a)}</text>
|
||||
<text>{noScale(item.lab.b)}</text>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.product_con}>
|
||||
<View className={styles.product_title}>
|
||||
<View className={styles.product_name}>{item.product_code + '# ' + item.product_name}</View>
|
||||
<View className={styles.product_num}>{noScale(item.match_rate_percent, 1)}%</View>
|
||||
</View>
|
||||
<View className={styles.product_color}>{item.product_color_code + ' ' + item.product_color_name}</View>
|
||||
<View className={styles.date}>
|
||||
<text className={styles.g_num}>{item.dyelot_number}</text>
|
||||
<View className={styles.labColor_btn}>+</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
|
||||
<DrawerCenter showModal={show}>
|
||||
<View className={styles.con}>
|
||||
<View className={styles.showRgb} style={{ background: selectObj?.rgb }}></View>
|
||||
<View className={styles.name}>{selectObj.product_color_code + ' ' + selectObj.product_color_name}</View>
|
||||
</View>
|
||||
</DrawerCenter>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
export default RecommendColor
|
||||
@@ -0,0 +1,4 @@
|
||||
export default {
|
||||
navigationBarTitleText: '取色查找',
|
||||
enableShareAppMessage: false,
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
page {
|
||||
height: 100vh;
|
||||
}
|
||||
.findColor_main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
min-height: 100%;
|
||||
background: #f3f3f3;
|
||||
box-sizing: border-box;
|
||||
.findColor_main_search {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
padding: 0 20rpx;
|
||||
border-radius: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.findColor_main_title {
|
||||
width: 100%;
|
||||
.RecommendColor_title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 28px;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px 20px;
|
||||
box-sizing: border-box;
|
||||
color: #707070;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px dashed #e4e4e4;
|
||||
width: 100%;
|
||||
text {
|
||||
&:nth-child(2) {
|
||||
color: #007aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.noList {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #707070;
|
||||
font-size: 26px;
|
||||
}
|
||||
.list {
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
border-radius: 10px;
|
||||
font-size: 25px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.measure {
|
||||
width: 100%;
|
||||
.list {
|
||||
justify-content: center;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
}
|
||||
.diff {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.color {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.labAndRgb {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin-top: 30px;
|
||||
.item {
|
||||
margin-top: 20px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
.color_list {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.color_item {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { FC, useEffect, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import LineBluetooth from '../components/bluetooth/LinkBlueTooth'
|
||||
import HistoryColor from './components/HistoryColor'
|
||||
import LabColor from './components/LabColor'
|
||||
import SelectProduct from '@/components/selectProduct'
|
||||
import { useBluetooth } from '@/use/contextBlueTooth'
|
||||
import RecommendColor from './components/RecommendColor'
|
||||
import { FindColorListApi } from '@/api/index'
|
||||
import Loading from '@/components/loading'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { throttle } from '@/common/util'
|
||||
|
||||
const FindColor: FC = () => {
|
||||
const { measureAndGetLab, disconnect, connected, deviceLab } = useBluetooth()
|
||||
const { state: colorState, fetchData: ApiFindColorList } = FindColorListApi()
|
||||
|
||||
const [list, setList] = useState([])
|
||||
const [product, setProduct] = useState<Record<string, any>>({})
|
||||
|
||||
//获取数据
|
||||
const getData = async () => {
|
||||
setList([])
|
||||
await ApiFindColorList({
|
||||
product_id: product.id,
|
||||
l: labArray[0],
|
||||
a: labArray[1],
|
||||
b: labArray[2],
|
||||
})
|
||||
setList(colorState.data.list)
|
||||
}
|
||||
|
||||
const [labArray, setlabArray] = useState<Array<any>>([])
|
||||
const [labtime, setLabtime] = useState<any>(+new Date())
|
||||
//点击获取lab按钮
|
||||
const labEven = throttle(async () => {
|
||||
if (!connected) {
|
||||
Taro.showToast({ title: '请先链接设备', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!product) {
|
||||
Taro.showToast({ title: '请选择面料', icon: 'none' })
|
||||
return
|
||||
}
|
||||
await measureAndGetLab()
|
||||
}, 500)
|
||||
const selectInput = (val) => {
|
||||
setProduct(val)
|
||||
setLabtime('')
|
||||
setlabArray([])
|
||||
setList([])
|
||||
}
|
||||
|
||||
const getColor = (val) => {
|
||||
setList([])
|
||||
setlabArray(val.lab)
|
||||
setLabtime(val.p_time)
|
||||
setProduct({
|
||||
code: val.code,
|
||||
default: val.default,
|
||||
id: val.id,
|
||||
name: val.name,
|
||||
})
|
||||
getData()
|
||||
}
|
||||
|
||||
const [listLoading, setListLoading] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setListLoading(colorState.loading)
|
||||
}, [colorState])
|
||||
|
||||
const [showHistory, setShowHistory] = useState(false)
|
||||
|
||||
const ResultContainer = () => {
|
||||
if (!listLoading && list?.length > 0) {
|
||||
return <RecommendColor customStyle={{ flex: 1 }} list={list} />
|
||||
} else if (!listLoading && labArray.length == 0) {
|
||||
return <View className={styles.noList}>-请取色-</View>
|
||||
} else if (!listLoading && labArray.length > 0 && list?.length == 0) {
|
||||
return <View className={styles.noList}>-暂无数据-</View>
|
||||
} else if (listLoading) {
|
||||
return <Loading />
|
||||
}
|
||||
}
|
||||
|
||||
//历史取样
|
||||
const historyShowEven = () => {
|
||||
setShowHistory(true)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!product) {
|
||||
Taro.showToast({ title: '请选择面料', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (deviceLab) {
|
||||
setLabtime(+new Date())
|
||||
setlabArray([deviceLab.L, deviceLab.a, deviceLab.b])
|
||||
// console.log('state.labArray::',state.labArray)
|
||||
localSave()
|
||||
getData()
|
||||
}
|
||||
}, [deviceLab])
|
||||
|
||||
//本地存储取色记录(无差别存储版本)
|
||||
const localSave = () => {
|
||||
let historyColorList = Taro.getStorageSync('historyColor') || []
|
||||
let obj = {
|
||||
...product,
|
||||
p_time: labtime,
|
||||
lab: labArray,
|
||||
}
|
||||
historyColorList.unshift(obj)
|
||||
if (historyColorList.length > 30) historyColorList.pop()
|
||||
Taro.setStorageSync('historyColor', historyColorList)
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.findColor_main}>
|
||||
<View className={styles.findColor_main_search}>
|
||||
<LineBluetooth></LineBluetooth>
|
||||
<SelectProduct selectColorId={product?.id} noAll={true} onSelect={selectInput} />
|
||||
</View>
|
||||
<LabColor lab={labArray} time={labtime} onLab={labEven} />
|
||||
<View className={styles.findColor_main_title}>
|
||||
<View className={styles.RecommendColor_title}>
|
||||
<Text>推荐数 ({list?.length})</Text>
|
||||
<Text onClick={historyShowEven}>历史取样</Text>
|
||||
</View>
|
||||
</View>
|
||||
<HistoryColor showModal={showHistory} onColor={getColor} />
|
||||
{ResultContainer()}
|
||||
<View className='common_safe_area_y'></View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default FindColor
|
||||
@@ -0,0 +1,4 @@
|
||||
export default {
|
||||
navigationBarTitleText: '样品对比',
|
||||
enableShareAppMessage: false,
|
||||
}
|
||||
@@ -0,0 +1,251 @@
|
||||
page {
|
||||
background: #f3f3f3;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.body {
|
||||
overflow: hidden;
|
||||
|
||||
.topBox {
|
||||
margin-top: 24px;
|
||||
margin-left: 30px;
|
||||
width: 690px;
|
||||
height: 86px;
|
||||
background: #ffffff;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.leftBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 19px;
|
||||
|
||||
.leftFont {
|
||||
font-size: 28px;
|
||||
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
color: #707070;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.borderBox {
|
||||
width: 0px;
|
||||
height: 62px;
|
||||
border: 2px solid #f3f3f3;
|
||||
margin-right: 39px;
|
||||
}
|
||||
|
||||
.cricleBox {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #cccccc;
|
||||
border-radius: 50%;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.notNet {
|
||||
font-size: 28px;
|
||||
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
||||
font-weight: 400;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
}
|
||||
|
||||
.iconMore {
|
||||
margin-right: 30px;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.contBox {
|
||||
margin-top: 53px;
|
||||
display: flex;
|
||||
padding-left: 56px;
|
||||
|
||||
.firstBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.firstLeftName {
|
||||
font-size: 26px;
|
||||
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
||||
font-weight: 400;
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.firstLeftbox {
|
||||
width: 290px;
|
||||
height: 290px;
|
||||
background: #dddddd;
|
||||
margin-top: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
border-radius: 50%;
|
||||
|
||||
.clickFont {
|
||||
font-size: 28px;
|
||||
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
||||
font-weight: 400;
|
||||
color: #707070;
|
||||
}
|
||||
}
|
||||
|
||||
.color_bock {
|
||||
width: 290px;
|
||||
height: 290px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.color_bocktwo {
|
||||
width: 290px;
|
||||
height: 290px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nameColor {
|
||||
font-size: 24px;
|
||||
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
||||
font-weight: 400;
|
||||
color: #707070;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reslutBox {
|
||||
width: 692px;
|
||||
height: 180px;
|
||||
background: #ffffff;
|
||||
margin-top: 30px;
|
||||
margin-left: 29px;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.reslutTitle {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
margin-top: 41px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.titleLeft {
|
||||
margin-left: 48px;
|
||||
font-size: 26px;
|
||||
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
|
||||
font-weight: 700;
|
||||
color: #707070;
|
||||
}
|
||||
|
||||
.titleRiht {
|
||||
margin-right: 37px;
|
||||
width: 136px;
|
||||
height: 46px;
|
||||
background: #ffd9d9;
|
||||
border-radius: 10px;
|
||||
font-size: 28px;
|
||||
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
color: #ff4a4a;
|
||||
line-height: 46px;
|
||||
}
|
||||
|
||||
.titleRiht1 {
|
||||
background: #cdf3df;
|
||||
margin-right: 37px;
|
||||
width: 136px;
|
||||
height: 46px;
|
||||
border-radius: 10px;
|
||||
font-size: 28px;
|
||||
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
line-height: 46px;
|
||||
color: #07c160;
|
||||
}
|
||||
}
|
||||
|
||||
.notResult {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
||||
font-weight: 400;
|
||||
color: #ababab;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.notBox {
|
||||
margin-top: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
|
||||
.notLeft {
|
||||
font-size: 26px;
|
||||
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
||||
font-weight: 400;
|
||||
color: #707070;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.notright {
|
||||
font-size: 26px;
|
||||
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
||||
font-weight: 400;
|
||||
color: #707070;
|
||||
margin-right: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottomBox {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 750px;
|
||||
height: 182px;
|
||||
background: #f3f3f3;
|
||||
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.16);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
||||
.leftBtn {
|
||||
width: 264px;
|
||||
height: 82px;
|
||||
background: #ffffff;
|
||||
border-radius: 42px;
|
||||
font-size: 32px;
|
||||
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
color: #007aff;
|
||||
line-height: 82px;
|
||||
margin-top: 34px;
|
||||
margin-left: 67px;
|
||||
}
|
||||
|
||||
.rightBtn {
|
||||
width: 264px;
|
||||
height: 82px;
|
||||
background: #007aff;
|
||||
border-radius: 42px;
|
||||
font-size: 32px;
|
||||
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
line-height: 82px;
|
||||
margin-top: 34px;
|
||||
margin-left: 88px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
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 '../components/bluetooth/LinkBlueTooth'
|
||||
import { toRgb } from '@/common/bluetooth/color/colorSpace'
|
||||
import styles from './index.module.scss'
|
||||
import { productabsorbcontrast } from '@/api/index'
|
||||
export default () => {
|
||||
//搜索参数
|
||||
const [searchField, setSearchField] = useState({
|
||||
l1: '',
|
||||
a1: '',
|
||||
b1: '',
|
||||
l2: '',
|
||||
a2: '',
|
||||
b2: '',
|
||||
})
|
||||
type ColorList = {
|
||||
one?: any
|
||||
two?: any
|
||||
}
|
||||
const [colorList, setColorList] = useState<ColorList>({
|
||||
one: null,
|
||||
two: null,
|
||||
})
|
||||
const { state: colorState, measureAndGetLab } = useBluetooth()
|
||||
|
||||
const getLab = async (val) => {
|
||||
if (colorState.connected) {
|
||||
let res = await measureAndGetLab()
|
||||
if (val === 1) {
|
||||
setColorList({ ...colorList, one: res })
|
||||
} else {
|
||||
setColorList({ ...colorList, two: res })
|
||||
}
|
||||
} else {
|
||||
Taro.showToast({
|
||||
title: '请链接设备',
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
}
|
||||
const getNowTime = () => {
|
||||
const yy = new Date().getFullYear()
|
||||
const MM = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
|
||||
const dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
|
||||
const HH = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
|
||||
const mm = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
|
||||
const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
|
||||
return yy + '-' + MM + '-' + dd + ' ' + HH + ':' + mm + ':' + ss
|
||||
}
|
||||
//监听lab数据变化
|
||||
const [blueToothColor, setBlueToothColor] = useState('')
|
||||
const [blueToothColorTwo, setBlueToothColorTwo] = useState('')
|
||||
const [time, setTime] = useState('')
|
||||
const [timeTwo, setTimeTwo] = useState('')
|
||||
useEffect(() => {
|
||||
if (colorState.deviceLab) {
|
||||
if ((colorList as any).one?.constructor === Object) {
|
||||
const rgb = toRgb([(colorList as any).one?.L, (colorList as any).one?.a, (colorList as any).one?.b])
|
||||
setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
|
||||
setTime(getNowTime())
|
||||
setSearchField({ ...searchField, l1: rgb[0], a1: rgb[1], b1: rgb[2] })
|
||||
}
|
||||
if ((colorList as any).two?.constructor === Object) {
|
||||
const rgb = toRgb([(colorList as any).two?.L, (colorList as any).two?.a, (colorList as any).two?.b])
|
||||
setBlueToothColorTwo(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
|
||||
setTimeTwo(getNowTime())
|
||||
setSearchField({ ...searchField, l2: rgb[0], a2: rgb[1], b2: rgb[2] })
|
||||
}
|
||||
}
|
||||
}, [colorList])
|
||||
const reset = () => {
|
||||
setColorList({})
|
||||
setBlueToothColor('')
|
||||
setBlueToothColorTwo('')
|
||||
setTime('')
|
||||
setTimeTwo('')
|
||||
setData('')
|
||||
setResult('')
|
||||
}
|
||||
const [data, setData] = useState('')
|
||||
const [result, setResult] = useState('')
|
||||
const { fetchData } = productabsorbcontrast()
|
||||
const handTake = async () => {
|
||||
if (searchField.l1 === '') {
|
||||
Taro.showToast({
|
||||
title: '请填充基础样品',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
if (searchField.l2 === '') {
|
||||
Taro.showToast({
|
||||
title: '请填充对比样品',
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
const query = {
|
||||
...searchField,
|
||||
}
|
||||
const res = await fetchData(query)
|
||||
if (res.data) {
|
||||
setData(res.data)
|
||||
let diffarray = [
|
||||
res.data.reddish && '偏红',
|
||||
res.data.yellowish && '偏黄',
|
||||
res.data.greenish && '偏绿',
|
||||
res.data.bluish && '偏蓝',
|
||||
res.data.whitish && '偏亮',
|
||||
res.data.darker && '偏暗',
|
||||
]
|
||||
let resCont = diffarray.filter((item) => item).join(',')
|
||||
setResult(resCont)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<View className={styles.body}>
|
||||
<View className={styles.topBox}>
|
||||
<LinkBlueTooth />
|
||||
</View>
|
||||
<View className={styles.contBox}>
|
||||
<View className={styles.firstBox} style='margin-right:27px'>
|
||||
<View className={styles.firstLeftName}>基础样品</View>
|
||||
{blueToothColor === '' && (
|
||||
<View className={styles.firstLeftbox} onClick={() => getLab(1)}>
|
||||
<View className={styles.clickFont}>点击取色</View>
|
||||
</View>
|
||||
)}
|
||||
{blueToothColor && <View className={classnames(styles.color_bock)} onClick={() => getLab(1)} style={{ background: blueToothColor }}></View>}
|
||||
{time === '' && <View className={styles.nameColor}>--</View>}
|
||||
{time && <View className={styles.nameColor}>{time}</View>}
|
||||
</View>
|
||||
<View className={styles.firstBox}>
|
||||
<View className={styles.firstLeftName}>对比样品</View>
|
||||
{blueToothColorTwo === '' && (
|
||||
<View className={styles.firstLeftbox} onClick={() => getLab(2)}>
|
||||
<View className={styles.clickFont}>点击取色</View>
|
||||
</View>
|
||||
)}
|
||||
{blueToothColorTwo && <View className={classnames(styles.color_bocktwo)} onClick={() => getLab(2)} style={{ background: blueToothColorTwo }}></View>}
|
||||
{timeTwo === '' && <View className={styles.nameColor}>--</View>}
|
||||
{timeTwo && <View className={styles.nameColor}>{timeTwo}</View>}
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.reslutBox}>
|
||||
<View className={styles.reslutTitle}>
|
||||
<View className={styles.titleLeft}>测量结果</View>
|
||||
{(data as any).ciede_2000 >= 1 && <View className={styles.titleRiht}>不合格</View>}
|
||||
{(data as any).ciede_2000 <= 1 && <View className={styles.titleRiht1}>合格</View>}
|
||||
</View>
|
||||
{data === '' && <View className={styles.notResult}>暂无数据</View>}
|
||||
{data && (
|
||||
<View className={styles.notBox}>
|
||||
<View className={styles.notLeft}>色差值: {(data as any).ciede_2000}</View>
|
||||
{!(data as any).reddish &&
|
||||
!(data as any).yellowish &&
|
||||
!(data as any).greenish &&
|
||||
!(data as any).bluish &&
|
||||
!(data as any).whitish &&
|
||||
!(data as any).darker && <View className={styles.notright}>无明显色差</View>}
|
||||
{result && <View className={styles.notright}>{result}</View>}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<View className={styles.bottomBox}>
|
||||
<View className={styles.leftBtn} onClick={() => reset()}>
|
||||
重置
|
||||
</View>
|
||||
<View className={styles.rightBtn} onClick={() => handTake()}>
|
||||
提交
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,184 @@
|
||||
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@mixin flex-vertical-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@mixin ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
.color-list {
|
||||
@include flex-vertical-center;
|
||||
justify-content: space-between;
|
||||
width: 690px;
|
||||
background: #ffffff;
|
||||
opacity: 1;
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
margin: 20px auto 0;
|
||||
border-radius: 35px;
|
||||
z-index: 0;
|
||||
position: relative;
|
||||
border: 4px solid transparent;
|
||||
}
|
||||
.vertical {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 105%;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border-radius: 35px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.vertical view {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 690px;
|
||||
height: 95%;
|
||||
border-radius: 35px;
|
||||
border: 4px solid #007aff;
|
||||
// border-bottom: 3px solid #007AFF;
|
||||
}
|
||||
.move-vertical {
|
||||
width: 700px;
|
||||
animation: moveVertical 0.3s ease;
|
||||
}
|
||||
@keyframes moveVertical {
|
||||
from {
|
||||
width: 0;
|
||||
}
|
||||
to {
|
||||
width: 700px;
|
||||
}
|
||||
}
|
||||
.horizontal {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border-radius: 35px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.move-horizontal {
|
||||
height: 0;
|
||||
animation: moveHorizontal 0.3s ease 0.3s;
|
||||
}
|
||||
@keyframes moveHorizontal {
|
||||
from {
|
||||
height: 100%;
|
||||
}
|
||||
to {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
.flash {
|
||||
animation-name: KFlash;
|
||||
animation-duration: 0.5s;
|
||||
animation-timing-function: linear;
|
||||
animation-direction: alternate;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
@keyframes KFlash {
|
||||
to {
|
||||
border: 4px solid #999;
|
||||
}
|
||||
}
|
||||
.c-image {
|
||||
width: 161px;
|
||||
height: 161px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
.c-image text {
|
||||
font-size: 25px;
|
||||
color: white;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.c-image image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.c-info {
|
||||
width: 296px;
|
||||
margin-left: 25px;
|
||||
margin-right: 25px;
|
||||
overflow: hidden;
|
||||
line-height: 34px;
|
||||
}
|
||||
.c-info text {
|
||||
@include ellipsis;
|
||||
width: 100%;
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
line-height: 34px;
|
||||
color: #707070;
|
||||
}
|
||||
.c-i-title {
|
||||
@include ellipsis;
|
||||
width: 100%;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
line-height: 38px;
|
||||
color: #707070;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.c-i-date {
|
||||
@include flex-center;
|
||||
width: 268px;
|
||||
height: 38px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 6px;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
margin-top: 17px;
|
||||
}
|
||||
.c-lab {
|
||||
height: 100%;
|
||||
justify-self: flex-end;
|
||||
@include flex-vertical-center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.c-lab .c-lab-button {
|
||||
@include flex-center;
|
||||
height: 48px;
|
||||
min-width: 96px;
|
||||
background: #007aff;
|
||||
border-radius: 50px;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 12px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
.c-lab .c-lab-button.again {
|
||||
background: #f0f0f0;
|
||||
color: #007aff;
|
||||
}
|
||||
.c-lab .c-lab-text {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
line-height: 36px;
|
||||
color: #707070;
|
||||
margin-top: 25px;
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import React, { FC } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
import { formatHashTag } from '@/common/format'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
type PropsType = {
|
||||
item?: Record<string, any>
|
||||
key?: any
|
||||
index?: number
|
||||
onPreviewRgb?: Function
|
||||
onTakeColor?: Function
|
||||
}
|
||||
|
||||
const ColorCard: FC<PropsType> = (params) => {
|
||||
const { item = {}, index, onTakeColor, onPreviewRgb, key } = params
|
||||
|
||||
const truncation = (ev) => {
|
||||
if (ev) {
|
||||
ev += ''
|
||||
let index = ev.lastIndexOf('.')
|
||||
let suffix = ev.substr(index + 1)
|
||||
if (suffix.length > 2) {
|
||||
suffix = suffix.substr(0, 1)
|
||||
ev = ev.substr(0, index) + '.' + suffix
|
||||
}
|
||||
return ev
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
|
||||
const handleTakeColor = () => {
|
||||
onTakeColor && onTakeColor(index)
|
||||
}
|
||||
|
||||
const handlePreviewRgb = () => {
|
||||
onPreviewRgb && onPreviewRgb()
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={classnames(styles['color-list'], { flash: item.moveBorder == 1 })} key={key}>
|
||||
<View className={classnames(styles.vertical, { 'move-vertical': item.moveBorder == 2 })}>
|
||||
<View></View>
|
||||
</View>
|
||||
<View className={classnames(styles.horizontal, { 'move-horizontal': item.moveBorder == 2 })}></View>
|
||||
<View
|
||||
onClick={handlePreviewRgb}
|
||||
className={styles['c-image']}
|
||||
style={{
|
||||
backgroundColor: `rgb(
|
||||
${item.currnetRgb?.r},
|
||||
${item.currnetRgb?.g},
|
||||
${item.currnetRgb?.b}
|
||||
)`,
|
||||
}}>
|
||||
{!item.sampling && <Text>末取样</Text>}
|
||||
</View>
|
||||
<View className={styles['c-info']}>
|
||||
<View className={styles['c-i-title']}>{formatHashTag(item.product_code, item.product_name)}</View>
|
||||
<Text>{formatHashTag(item.product_color_code, item.product_color_name)}</Text>
|
||||
<View className={styles['c-i-date']}>{item.absorb_lab_time && dayjs(item.absorb_lab_time).format('YYYY-MM-DD HH:mm:ss')}</View>
|
||||
</View>
|
||||
<View className={styles['c-lab']}>
|
||||
<View className={classnames(styles['c-lab-button'], { again: item.sampling })} onClick={handleTakeColor}>
|
||||
{item.sampling ? '重新取样' : '取样'}
|
||||
</View>
|
||||
<View className={styles['c-lab-text']}>
|
||||
<View>L*: {truncation(item?.currentLab?.l)}</View>
|
||||
<View>a*: {truncation(item?.currentLab?.a)}</View>
|
||||
<View>b*: {truncation(item?.currentLab?.b)}</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
export default ColorCard
|
||||
@@ -0,0 +1,68 @@
|
||||
|
||||
@mixin flex-center{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@mixin flex-vertical-center{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.tc-info{
|
||||
@include flex-vertical-center;
|
||||
justify-content: space-between;
|
||||
margin: 15px 30px;
|
||||
}
|
||||
.tc-i-upload{
|
||||
width: 264px;
|
||||
height: 264px;
|
||||
background: #DDDDDD;
|
||||
border-radius: 264px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tc-i-upload image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.tc-i-u-box{
|
||||
@include flex-center;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #707070;
|
||||
font-size: 26px;
|
||||
}
|
||||
.tc-i-u-box text{
|
||||
margin-bottom: 15px;
|
||||
font-size: 50px;
|
||||
}
|
||||
.tc-i-num{
|
||||
@include flex-vertical-center;
|
||||
font-size: 44px;
|
||||
font-weight: 400;
|
||||
line-height: 58px;
|
||||
}
|
||||
.tc-i-num>view{
|
||||
padding: 0 48px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
.tc-i-num>view:first-child::after{
|
||||
content: " ";
|
||||
width: 0px;
|
||||
height: 64px;
|
||||
border: 2px solid #DDDDDD;
|
||||
position: absolute;
|
||||
right: 0;top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.tc-i-num text{
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
line-height: 34px;
|
||||
color: #707070;
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { View, Text,Image } from '@tarojs/components'
|
||||
import styles from './index.module.scss'
|
||||
import classnames from 'classnames'
|
||||
import { FC, useRef, useState } from "react"
|
||||
import Upload from '../Upload'
|
||||
import {screenshot} from '@/common/util'
|
||||
|
||||
|
||||
type PropsType = {
|
||||
onUploadConfirm?: Function
|
||||
}
|
||||
|
||||
const Texture:FC<PropsType> = (params) => {
|
||||
const {onUploadConfirm} = params
|
||||
|
||||
const handleUploadConfirm = () => {
|
||||
onUploadConfirm && onUploadConfirm()
|
||||
}
|
||||
|
||||
const uploadEl = useRef()
|
||||
|
||||
return (
|
||||
<View className={styles['texture-container']}>
|
||||
<View className={styles['tc-info']}>
|
||||
<View onClick={uploadEl.handleTriggerUploadModal(true)} className={styles['tc-i-upload']}>
|
||||
{detail.texture_url && <Image src={screenshot(detail.texture_url)} />}
|
||||
|
||||
<View v-else className='tc-i-u-box'>
|
||||
<Text className='iconfont icon-shangchuanzhaopian'></Text>
|
||||
<View>上传纹理</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles['tc-i-num']}>
|
||||
<View>
|
||||
<View className='color-blue'>{(data?.list?.length ?? 0) - calcNoSampling}</View>
|
||||
<Text>已取样</Text>
|
||||
</View>
|
||||
<View>
|
||||
<View className='color-yellow'>{calcNoSampling}</View>
|
||||
<Text>未取样</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<Upload onUploadConfirm={handleUploadConfirm} ref={uploadEl} />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
export default Texture
|
||||
@@ -0,0 +1,68 @@
|
||||
|
||||
@mixin flex-center{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@mixin flex-vertical-center{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.upload-container .drawer{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.u-content{
|
||||
@include flex-center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: 65px 0;
|
||||
}
|
||||
.u-image{
|
||||
width: 422px;
|
||||
height: 422px;
|
||||
background: #F0F0F0;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
.u-image view{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include flex-center;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #707070;
|
||||
position: absolute;
|
||||
top: 0;left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.u-image .update-statu{
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.u-image image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.u-button{
|
||||
display: flex;
|
||||
margin-top: 76px;
|
||||
}
|
||||
.u-button view{
|
||||
width: 264px;
|
||||
height: 82px;
|
||||
background: #F0F0F0;
|
||||
border-radius: 82px;
|
||||
@include flex-center;
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #007AFF;
|
||||
margin: 0 15px;
|
||||
}
|
||||
.u-button .confirm{
|
||||
background: #007AFF;
|
||||
color: white;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import Popup from "@/components/popup"
|
||||
import { FC, useState } from "react"
|
||||
import { View, Text,Image } from '@tarojs/components'
|
||||
import styles from './index.module.scss'
|
||||
import classnames from 'classnames'
|
||||
import Taro from "@tarojs/taro"
|
||||
|
||||
type PropsType = {
|
||||
onUploadConfirm?: Function
|
||||
}
|
||||
|
||||
const UploadColor: FC<PropsType> = (params) => {
|
||||
const { onUploadConfirm } = params
|
||||
const [showModal, setShowModal] = useState(false)
|
||||
const [filePath, setFilePath] = useState('')
|
||||
const [file, setFile] = useState({})
|
||||
|
||||
const handleUpload = async () => {
|
||||
Taro.chooseMedia({
|
||||
count: 1,
|
||||
mediaType: ['image'],
|
||||
sourceType: ['album'],
|
||||
success(ev) {
|
||||
setFilePath(ev.tempFiles[0].tempFilePath)
|
||||
setFile(ev.tempFiles[0])
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const handleTriggerUploadModal = (bool: boolean) => {
|
||||
setShowModal(bool)
|
||||
}
|
||||
|
||||
const handleClear = () => {
|
||||
setFilePath('')
|
||||
}
|
||||
const handleUploadConfirm = () => {
|
||||
onUploadConfirm && onUploadConfirm(file)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<View className={styles['upload-container']}>
|
||||
<Popup title='上传纹理' show={showModal} onClose={() => handleTriggerUploadModal(false)}>
|
||||
<View className={styles['u-content']}>
|
||||
<View onClick={handleUpload} className={styles['u-image']}>
|
||||
{filePath && <Image mode='aspectFill' src={filePath} />}
|
||||
|
||||
<View className={classnames({ 'update-statu': filePath })}>{filePath ? '点击修改' : '点击上传'}</View>
|
||||
</View>
|
||||
<View className={styles['u-button']}>
|
||||
<View onClick={handleClear}>清除</View>
|
||||
<View onClick={handleUploadConfirm} className={styles.confirm}>
|
||||
确定
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Popup>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
export default UploadColor
|
||||
@@ -0,0 +1,4 @@
|
||||
export default {
|
||||
navigationBarTitleText: '颜色取样',
|
||||
enableShareAppMessage: false,
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@mixin flex-vertical-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
page {
|
||||
background: #f3f3f3;
|
||||
}
|
||||
.card {
|
||||
background: #fff;
|
||||
padding: 0 20px;
|
||||
border-radius: 20px;
|
||||
box-sizing: border-box;
|
||||
margin: 26px 30px;
|
||||
}
|
||||
.list-box {
|
||||
padding-bottom: 220px;
|
||||
}
|
||||
.lb-title {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
line-height: 38px;
|
||||
color: #707070;
|
||||
border-top: 1px dashed #e4e4e4;
|
||||
padding: 26px 46px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.lb-t-serach {
|
||||
@include flex-vertical-center;
|
||||
height: 100px;
|
||||
}
|
||||
.lb-t-serach .icon-a-sousuo1 {
|
||||
font-size: 38px;
|
||||
color: #cccccc;
|
||||
}
|
||||
.lb-t-serach .lb-t-search-content {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.lb-t-serach .lb-t-search-content > text {
|
||||
padding: 10px 0;
|
||||
color: #707070;
|
||||
font-size: 24px;
|
||||
}
|
||||
.lb-t-search-content > view {
|
||||
@include flex-vertical-center;
|
||||
width: 280px;
|
||||
height: 66px;
|
||||
background-color: #e7e7e7;
|
||||
border-radius: 30px;
|
||||
margin-right: 10px;
|
||||
font-size: 28px;
|
||||
padding-left: 20px;
|
||||
padding-right: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.lb-title input {
|
||||
width: 80%;
|
||||
height: 66px;
|
||||
background-color: #e7e7e7;
|
||||
font-size: 26px;
|
||||
}
|
||||
.lb-t-search-content text {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
}
|
||||
.lb-t-sc-clear {
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
text-align: center;
|
||||
line-height: 66px;
|
||||
}
|
||||
.lb-t-sc-clear .icon-a-cuowuwrong {
|
||||
width: 43px;
|
||||
height: 43px;
|
||||
text-align: center;
|
||||
line-height: 43px;
|
||||
border-radius: 50%;
|
||||
background: #c7c7c7;
|
||||
display: inline-block;
|
||||
}
|
||||
.not-list {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
line-height: 38px;
|
||||
color: #707070;
|
||||
margin-top: 180px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lab-view {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
background-color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
.lab-view view {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
.fixedBottom-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 750px;
|
||||
height: 182px;
|
||||
background: #f3f3f3;
|
||||
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.16);
|
||||
padding: 35px 68px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.fixedBottom-container view {
|
||||
width: 264px;
|
||||
height: 82px;
|
||||
background: #ffffff;
|
||||
opacity: 1;
|
||||
border-radius: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
line-height: 42px;
|
||||
color: #007aff;
|
||||
}
|
||||
.fixedBottom-container .fb-confirm {
|
||||
background-color: #007aff;
|
||||
color: white;
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
import { View, Input, Text } from '@tarojs/components'
|
||||
import { FC, useMemo, useState } from 'react'
|
||||
import LinkBlueTooth from '../components/bluetooth/LinkBlueTooth'
|
||||
import SelectProduct from '@/components/selectProduct/index'
|
||||
import styles from './index.module.scss'
|
||||
import ColorCard from './components/ColorCard'
|
||||
import IconFont from '@/components/iconfont'
|
||||
import { ColorListApi, ColorDetailedApi, TextureSaveApi, ColorSamplingSaveApi } from '@/api/index'
|
||||
import { formatHashTag } from '@/common/format'
|
||||
// 颜色取样
|
||||
const TakeColor: FC = () => {
|
||||
const { state, fetchData } = ColorListApi()
|
||||
const { state: detail, fetchData: detailFetchData } = ColorDetailedApi()
|
||||
const { state: textureSaveData, fetchData: textureSaveFetchData } = TextureSaveApi()
|
||||
const { state: saveData, fetchData: saveFetchData, success: saveSuccess } = ColorSamplingSaveApi()
|
||||
|
||||
const [searchValue, setSearchValue] = useState('')
|
||||
|
||||
const selectInput = async (event) => {
|
||||
// if (event) {
|
||||
// selectedProduct.value = event
|
||||
// await fetchData({ id: event.id })
|
||||
// data.value?.list.map((item, index) => {
|
||||
// item.currnetRgb = item.rgb
|
||||
// item.currentLab = item.lab
|
||||
// item.sampling = !(item.currentLab?.l == 0 && item.currentLab?.a == 0 && item.currentLab?.b == 0)
|
||||
// item.moveBorder = 0
|
||||
// item.key = index
|
||||
// })
|
||||
// detailFetchData({ id: event.id })
|
||||
// } else {
|
||||
// data.value.list = []
|
||||
// }
|
||||
}
|
||||
const clearSearchValue = () => {
|
||||
setSearchValue('')
|
||||
}
|
||||
|
||||
const handleTransfSearch = (bool: boolean) => {
|
||||
setShowScreen(bool)
|
||||
}
|
||||
const handlePrViewRgb = (event) => {
|
||||
setLabPreview(event)
|
||||
setShowLabPreview(true)
|
||||
}
|
||||
const handleTakeColor = () => {}
|
||||
|
||||
const listData = useMemo(() => {
|
||||
return state.data?.list?.filter((item) => {
|
||||
if (searchValue) {
|
||||
return formatHashTag(item.product_color_name, item.product_color_code)!.includes(searchValue)
|
||||
}
|
||||
return true
|
||||
})
|
||||
}, [state])
|
||||
|
||||
const [showScreen, setShowScreen] = useState(false)
|
||||
|
||||
const onSearchInput = (event) => {
|
||||
const current = event.detail.value
|
||||
setSearchValue(current)
|
||||
}
|
||||
// 重置
|
||||
const handleReset = () => {}
|
||||
|
||||
// 提交
|
||||
const handleSubmit = () => {}
|
||||
|
||||
const [labPreview, setLabPreview] = useState({
|
||||
currnetRgb: {
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0,
|
||||
},
|
||||
})
|
||||
|
||||
const [showLabPreview, setShowLabPreview] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={styles.card}>
|
||||
<LinkBlueTooth />
|
||||
<SelectProduct onSelect={selectInput} />
|
||||
</View>
|
||||
<View className={styles['list-box']}>
|
||||
<View className={styles['lb-title']}>
|
||||
<Text>颜色列表（{listData?.length ?? 0}）</Text>
|
||||
<View className={styles['lb-t-serach']}>
|
||||
{showScreen ? (
|
||||
<View className={styles['lb-t-search-content']}>
|
||||
<View>
|
||||
<Input value={searchValue} type='text' onInput={onSearchInput} placeholder='筛选颜色或颜色编号' />
|
||||
<View onClick={clearSearchValue} className={styles['lb-t-sc-clear']}>
|
||||
{searchValue.length > 0 && <IconFont name='icon-guanbi' size={56}></IconFont>}
|
||||
</View>
|
||||
</View>
|
||||
<Text onClick={() => handleTransfSearch(false)}>取消</Text>
|
||||
</View>
|
||||
) : (
|
||||
<View onClick={() => handleTransfSearch(true)}>
|
||||
<IconFont name='icon-sousuo' size={56}></IconFont>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
{listData ? (
|
||||
listData.map((item, index) => {
|
||||
return <ColorCard onPreviewRgb={handlePrViewRgb} onTakeColor={handleTakeColor} key={index} item={item} index={item.key} />
|
||||
})
|
||||
) : (
|
||||
<View className={styles['not-list']}>-请取色-</View>
|
||||
)}
|
||||
</View>
|
||||
<View className={styles['fixedBottom-container']}>
|
||||
<View onClick={handleReset}>重置</View>
|
||||
<View onClick={handleSubmit} className={styles['fb-confirm']}>
|
||||
提交
|
||||
</View>
|
||||
</View>
|
||||
{showLabPreview && (
|
||||
<View catchMove onClick={() => setShowLabPreview(false)} className={styles['lab-view']}>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: `rgb(
|
||||
${labPreview?.currnetRgb?.r},
|
||||
${labPreview?.currnetRgb?.g},
|
||||
${labPreview?.currnetRgb?.b}
|
||||
)`,
|
||||
}}></View>
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default TakeColor
|
||||
@@ -68,7 +68,7 @@ const Login: FC = () => {
|
||||
setToken(res.data.token)
|
||||
setUserInfo({ ...res.data })
|
||||
|
||||
Taro.redirectTo({
|
||||
Taro.switchTab({
|
||||
url: '/pages/index/index',
|
||||
})
|
||||
} else {
|
||||
@@ -76,6 +76,7 @@ const Login: FC = () => {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<View className={styles.login}>
|
||||
<Image className='full-100' mode='widthFix' src='https://s1.ax1x.com/2022/09/08/vqiVZF.png'></Image>
|
||||
@@ -92,12 +93,7 @@ const Login: FC = () => {
|
||||
<View className={styles['input-bar']}>
|
||||
<IconFont name='icon-mima' size={48} color='#999999'></IconFont>
|
||||
<Divider direction='vertical'></Divider>
|
||||
<Input
|
||||
onInput={handleInputPassword}
|
||||
password={eyesStatus}
|
||||
className={styles['input-bar--password']}
|
||||
type='safe-password'
|
||||
placeholder='请输入密码'></Input>
|
||||
<Input onInput={handleInputPassword} password={eyesStatus} className={styles['input-bar--password']} type='text' placeholder='请输入密码'></Input>
|
||||
<View onClick={handlePwdVisible}>
|
||||
{!eyesStatus ? (
|
||||
<IconFont name='icon-yanjing' size={48} color='#999999'></IconFont>
|
||||
|
||||
@@ -3,9 +3,9 @@ import React, { useCallback, memo, useEffect, useMemo, useRef, useState } from '
|
||||
import Search from '@/components/search'
|
||||
import styles from "./index.module.scss"
|
||||
import classnames from "classnames";
|
||||
import Empty from './compoents/empty'
|
||||
import Empty from './components/empty'
|
||||
import Taro from '@tarojs/taro';
|
||||
import Goods from './compoents/goods'
|
||||
import Goods from './components/goods'
|
||||
import { mpproductlist } from "@/api/search"
|
||||
|
||||
export default memo(() => {
|
||||
@@ -95,4 +95,4 @@ export default memo(() => {
|
||||
</View>
|
||||
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
+93
-90
@@ -13,11 +13,95 @@ import { goLink } from '@/common/common'
|
||||
|
||||
type IconfontName = Parameters<typeof IconFont>['0']['name']
|
||||
type IconCardType = {
|
||||
iconName: IconfontName,
|
||||
name: string,
|
||||
iconName: IconfontName
|
||||
name: string
|
||||
path: string
|
||||
}
|
||||
|
||||
const feature: IconCardType[] = [
|
||||
{
|
||||
iconName: 'icon-lingquseka',
|
||||
name: '领取色卡',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-pandiansaoma',
|
||||
name: '盘点扫码',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-fahuoliebiao',
|
||||
name: '发货列表',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-yaoqingma',
|
||||
name: '邀请码',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-tihuoliebiao',
|
||||
name: '提货列表',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-shouhouzhongxin',
|
||||
name: '退货退款',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-shoukuanliebiao',
|
||||
name: '收款列表',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-kehuxinxi',
|
||||
name: '客户列表',
|
||||
path: '',
|
||||
},
|
||||
]
|
||||
|
||||
const fabric: IconCardType[] = [
|
||||
{
|
||||
iconName: 'icon-yansequyang',
|
||||
name: '颜色取样',
|
||||
path: '/pages/colorRelated/takeColor/index',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-qusechazhao',
|
||||
name: '取色查找',
|
||||
path: '/pages/colorRelated/findColor/index',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-yangpinduibi',
|
||||
name: '样品对比',
|
||||
path: '/pages/colorRelated/sampleComparison/index',
|
||||
},
|
||||
]
|
||||
|
||||
const statisticAnalysis: IconCardType[] = [
|
||||
{
|
||||
iconName: 'icon-xiaoshou',
|
||||
name: '销售',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-duizhang',
|
||||
name: '对账',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-yuncangkucun',
|
||||
name: '云仓库存',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-qianzhicangkucun',
|
||||
name: '前置仓库存',
|
||||
path: '',
|
||||
},
|
||||
]
|
||||
|
||||
// 用户信息
|
||||
const UserInfo: FC = () => {
|
||||
const { removeToken, removeUserInfo, userInfo } = useUserInfo()
|
||||
@@ -27,92 +111,6 @@ const UserInfo: FC = () => {
|
||||
// username: '',
|
||||
// userno: '',
|
||||
// })
|
||||
|
||||
|
||||
const feature: IconCardType[] = [
|
||||
{
|
||||
iconName: 'icon-lingquseka',
|
||||
name: '领取色卡',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-pandiansaoma',
|
||||
name: '盘点扫码',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-fahuoliebiao',
|
||||
name: '发货列表',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-yaoqingma',
|
||||
name: '邀请码',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-tihuoliebiao',
|
||||
name: '提货列表',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-shouhouzhongxin',
|
||||
name: '退货退款',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-shoukuanliebiao',
|
||||
name: '收款列表',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-kehuxinxi',
|
||||
name: '客户列表',
|
||||
path: '',
|
||||
},
|
||||
]
|
||||
|
||||
const fabric: IconCardType[] = [
|
||||
{
|
||||
iconName: 'icon-yansequyang',
|
||||
name: '颜色取样',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-qusechazhao',
|
||||
name: '取色查找',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-yangpinduibi',
|
||||
name: '样品对比',
|
||||
path: '',
|
||||
},
|
||||
]
|
||||
|
||||
const statisticAnalysis: IconCardType[] = [
|
||||
{
|
||||
iconName: 'icon-xiaoshou',
|
||||
name: '销售',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-duizhang',
|
||||
name: '对账',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-yuncangkucun',
|
||||
name: '云仓库存',
|
||||
path: '',
|
||||
},
|
||||
{
|
||||
iconName: 'icon-qianzhicangkucun',
|
||||
name: '前置仓库存',
|
||||
path: '',
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
// 退出登录
|
||||
const handleLogout = () => {
|
||||
@@ -121,6 +119,11 @@ const UserInfo: FC = () => {
|
||||
goLink('/pages/login/index', {}, 'reLaunch')
|
||||
}
|
||||
|
||||
const handleClickIconCard = (item: IconCardType) => {
|
||||
console.log('item==>', item)
|
||||
goLink(item.path, {}, 'navigateTo')
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<LayoutBlock circle>
|
||||
@@ -140,7 +143,7 @@ const UserInfo: FC = () => {
|
||||
</View>
|
||||
<View className={styles.bottomBar}>
|
||||
<Tag type='primary' size='normal' circle customStyle={{ marginRight: '10px' }}>
|
||||
IT部门
|
||||
{userInfo.userInfo.department_name}
|
||||
</Tag>
|
||||
<Divider direction='vertical'></Divider>
|
||||
<Text className={styles.userTitle}>IT-开发总监</Text>
|
||||
@@ -158,7 +161,7 @@ const UserInfo: FC = () => {
|
||||
<View className={styles.layoutTitle}>布料取色</View>
|
||||
<View className={styles['grid-container']}>
|
||||
{fabric.map((item) => {
|
||||
return <IconCard iconName={item.iconName} title={item.name}></IconCard>
|
||||
return <IconCard iconName={item.iconName} title={item.name} onClick={() => handleClickIconCard(item)}></IconCard>
|
||||
})}
|
||||
</View>
|
||||
</LayoutBlock>
|
||||
|
||||
Reference in New Issue
Block a user