zhangjiming
/
Outline
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完善蓝牙连接

feature/rail
zhangjiming 5 months ago
parent
73bb1d0e9b
commit
28fe2d1d1c
8 changed files with 204 additions and 15 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/assets/bluetooth_c.svg
  2. 1
      src/assets/bluetooth_nc.svg
  3. 1
      src/assets/check_mark.svg
  4. 96
      src/components/Header.tsx
  5. 29
      src/components/Modal.tsx
  6. 5
      src/components/bluetooth.scss
  7. 75
      src/pages/measure/components/MeasureDetail.tsx
  8. 11
      src/services/measure/analysis.ts

1
src/assets/bluetooth_c.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="33" height="34" viewBox="0 0 33 34"><defs><clipPath id="master_svg0_56_7278"><rect x="0" y="0" width="33" height="34" rx="0"/></clipPath><clipPath id="master_svg1_56_7315"><rect x="0" y="0" width="34" height="34" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_56_7278)"><g clip-path="url(#master_svg1_56_7315)"><g><path d="M8.399410234375,28.8784078125L6.396240234375,26.8738078125L15.583320234375,17.6882078125L15.583320234375,16.3140078125L6.396240234375,7.1240878125L8.399410234375,5.1209278125L15.583320234375,12.3048378125L15.583320234375,2.8330078125L18.416640234375002,2.8330078125L26.430740234375,10.8470878125L20.278140234375,16.9997078125L26.430740234375,23.1522078125L18.416640234375002,31.1663078125L15.583320234375,31.1663078125L15.583320234375,21.6945078125L8.399410234375,28.8770078125L8.399410234375,28.8784078125ZM18.416640234375002,27.1600078125L22.422940234375,23.1522078125L18.416640234375002,19.1459078125L18.416640234375002,27.1600078125ZM18.416640234375002,6.8393378125L18.416640234375002,14.8534078125L22.422940234375,10.8470878125L18.416640234375002,6.8393378125Z" fill="#3165D2" fill-opacity="1" style="mix-blend-mode:passthrough"/></g><g><path d="M11.3330078125,17C11.3330078125,18.17361,10.3816078125,19.125,9.2080078125,19.125C8.0344028125,19.125,7.0830078125,18.17361,7.0830078125,17C7.0830078125,15.826395,8.0344028125,14.875,9.2080078125,14.875C10.3816078125,14.875,11.3330078125,15.826395,11.3330078125,17ZM27.6247078125,19.125C28.7983078125,19.125,29.7497078125,18.17361,29.7497078125,17C29.7497078125,15.826395,28.7983078125,14.875,27.6247078125,14.875C26.4511078125,14.875,25.4997078125,15.826395,25.4997078125,17C25.4997078125,18.17361,26.4511078125,19.125,27.6247078125,19.125Z" fill="#3165D2" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></g></svg>

1
src/assets/bluetooth_nc.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="33" height="34" viewBox="0 0 33 34"><defs><clipPath id="master_svg0_56_7240"><rect x="0" y="0" width="33" height="34" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_56_7240)"><g><path d="M19.678990234375,16.999951953125L25.650590234375,23.152551953125L17.872290234375,31.166551953125L15.122240234374999,31.166551953125L15.122240234374999,21.694751953125L9.121740234375,27.877051953125L7.177491217852,25.872551953125L15.122240234374999,17.687051953125L15.122240234374999,16.312851953124998L7.177490234375,8.127331953125001L9.121740234375,6.122751953125L15.122240234374999,12.305081953125L15.122240234374999,2.833251953125L17.872190234374997,2.833251953125L25.650590234375,10.847331953125L19.678990234375,16.999951953125ZM17.872190234374997,19.146151953125L17.872190234374997,27.160251953125L21.760690234374998,23.152551953125L17.872190234374997,19.146151953125ZM17.872190234374997,14.853651953125L21.760690234374998,10.847331953125L17.872190234374997,6.839581953125L17.872190234374997,14.853651953125Z" fill="#3165D2" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>

1
src/assets/check_mark.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="master_svg0_56_7250"><rect x="0" y="0" width="20" height="20" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_56_7250)"><g><path d="M10.007944140625,0.00000314199C4.484154140625,-0.00432857,0.003133180625,4.47084,0.000245536025,9.99463C-0.002641179375,15.5184,4.473704140625,19.9983,9.997484140625,19.9997C15.521244140625,20.0012,19.999944140625,15.5236,19.999944140625,9.99986C20.004244140625,4.4753,15.524644140625,-0.00433615,10.000094140625,0.00000314199L10.007944140625,0.00000314199ZM9.317754140625,13.388L8.211884140625,14.5018L4.635474140625,10.9096L5.749184140625,9.80378L8.211884140625,12.2743L14.988244140625,5.49012L16.094144140625,6.59599L9.317754140625,13.388Z" fill="#3165D2" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg>

96
src/components/Header.tsx
View File

@ -1,12 +1,33 @@
import { useSelector } from "react-redux";
import bluetooth_nc from "../assets/bluetooth_nc.svg";
import bluetooth_c from "../assets/bluetooth_c.svg";
import icon_avatar from "../assets/icon_avatar.svg";
import icon_logout from "../assets/icon_logout.svg";
import check_mark from "../assets/check_mark.svg";
import icon_pwd from "../assets/icon_pwd.svg";
import { Dropdown, MenuProps, message } from "antd";
import { useState } from "react";
import { bluetoothList, bluetoothInfo } from '../mock/recordList'
import { Dropdown, MenuProps, message, Button, Popover } from "antd";
import { logout } from "../services/user/user";
import "./bluetooth.scss";
export default function Header() {
//获取当前websocet的状态
let wsReadyState = localStorage.getItem('wsReadyState')
let [wsState, setWsState] = useState<string | null>(wsReadyState)
const showBlueImg = () => {
console.log('wsState===', wsState, typeof wsState)
if(wsState === '0'){
return <Popover content={getBtList()} title="可连接设备">
<div ></div>
<img src={bluetooth_nc} alt="" className="ext-base ml-2 h-6" />
</Popover>
}else {
return <Popover content={getBtContent()} title="">
<img src={bluetooth_c} onClick={onDisconnectBt} alt="" className="ext-base ml-2 h-6" />
</Popover>
}
}
//@ts-ignore
const context = useSelector(store => store.context);
const [messageApi, contextHolder] = message.useMessage();
@ -33,16 +54,73 @@ export default function Header() {
}
},
];
const getBtList = () => {
let Dom = null
if(isConnect === 0){
Dom = <div>
{bluetoothList.map(item => {
return <div className="mt-[1rem]" onClick={connectBt}>
<Button type="link">{item.name}</Button>
</div>
})}
</div>
}else if(isConnect === 1){
Dom = <div>
正在匹配
</div>
}
return Dom
}
//蓝牙已连接
const getBtContent = ()=> {
return <div>
<div>
<div className="bluetooth_c">
<img src={check_mark} alt="" className="ext-base ml-2 h-4" />
<div className="ml-[10px]">设备已连接</div>
</div>
<div className="pl-[15px]">
<div className="mt-[1rem]">型号：{bluetoothInfo.type}</div>
<div className="mt-[1rem]">电量：{bluetoothInfo.power}</div>
</div>
</div>
</div>
}
//断开蓝牙连接
const onDisconnectBt = ()=> {
setWsState('0')
setIsConnect(0)
}
const connectBt = () => {
setIsConnect(1)
setTimeout(()=>{
setWsState('1')
},1000)
}
let [isConnect, setIsConnect] = useState(0)
return (
<>
{contextHolder}
<div className="bg-[--bgColor] h-full flex items-center">
<Dropdown menu={{ items }} trigger={["click"]}>
<section className="ml-auto mr-8 flex items-center">
<img src={icon_avatar} alt="" className="h-8" />
<p className="text-base ml-2">{context.loginFlag ? context.loginUser.nickname : "未登录"}</p>
</section>
</Dropdown>
<div className="ml-auto mr-8 flex items-center">
<div className="ml-auto mr-8 flex items-center w-[5rem]">
{showBlueImg()}
</div>
<Dropdown menu={{ items }} trigger={["click"]}>
<section className="flex items-center">
<img src={icon_avatar} alt="" className="h-8" />
<p className="text-base ml-2">{context.loginFlag ? context.loginUser.nickname : "未登录"}</p>
</section>
</Dropdown>
</div>
</div>
</>
);

29
src/components/Modal.tsx
View File

@ -0,0 +1,29 @@
import { Modal } from 'antd'
import { useState } from 'react'
type ModalProps = {
open: boolean;
okFn:Function;
cancelFn: Function
};
export default function ModalComponents(props:ModalProps){
let [open, setOpen] = useState(props.open)
const ok = () => {
props.okFn()
}
const cancel = () => {
props.cancelFn()
}
return <Modal
title="Modal"
open={open}
onOk={ok}
onCancel={cancel}
okText="确认"
cancelText="取消"
>
<slot></slot>
</Modal>
}

5
src/components/bluetooth.scss
View File

@ -0,0 +1,5 @@
.bluetooth_c{
display: flex;
align-items: center;
justify-content: center;
}

75
src/pages/measure/components/MeasureDetail.tsx
View File

@ -1,11 +1,15 @@
// 引入相关的hooks
import { useSelector, useDispatch } from "react-redux";
// 引入对应的方法
import {getDetailList} from '../../../services/measure/analysis'
import {getDetailList, delDetail} from '../../../services/measure/analysis'
import { useState, useEffect } from 'react'
import {message, type TableColumnsType, type TableProps, Button, Table } from 'antd';
import {message, Button, type TableColumnsType, type TableProps, Modal, Table } from 'antd';
import { useNavigate } from 'react-router-dom';
import type { DetailTable } from "../../../services/measure/type";
import { ExclamationCircleFilled } from '@ant-design/icons';
import { detailList } from '../../../mock/recordList'
export default function MeasureDetail() {
// 通过useSelector直接拿到store中定义的value
//@ts-ignore
@ -38,6 +42,22 @@ export default function MeasureDetail() {
dataIndex: 'name',
},
{
title: '线路名称',
dataIndex: 'lineName',
},
{
title: '位置',
dataIndex: 'location',
},
{
title: '轨型',
dataIndex: 'trackShapeCode',
},
{
title: '方向',
dataIndex: 'direction',
},
{
title: '创建者',
dataIndex: 'operatorName',
},
@ -51,19 +71,65 @@ export default function MeasureDetail() {
const getDetailDataList = () => {
getDetailList().then(res => {
setTableData(res.data.list)
}).catch(e=>{
//如果接口异常，则使用mock数据
setTableData(detailList)
})
}
const [selectionType, setSelectionType] = useState<'checkbox'>('checkbox');
const { confirm } = Modal;
const onDel = () => {
console.log('selectedRows====', selectRows)
message.error('正在做')
confirm({
title: '提示',
icon: <ExclamationCircleFilled />,
content: '请确认是否删除此条数据',
okText:'确认',
cancelText:'取消',
onOk() {
onHandelDelData()
},
onCancel() {
console.log('Cancel');
},
});
}
const onHandelDelData = () =>{
let list = [...selectRows]
const ids = list.map(item => item.id)
if(!ids || !ids.length){
return;
}
const params = {
ids:ids.join(',')
}
delDetail(params).then(res => {
if(res.status === 0){
getDetailList()
message.success('删除成功')
}
}).catch(e=> {
//删除mock的数据
const filterList = tableData.filter(item => !ids.includes(item.id))
setTableData(filterList)
message.success('删除成功')
setSelectedRow([])
})
}
return (
<div>
<div className="p-[30px]">
<Button type="primary" onClick={onDel}>删除</Button>
<Button
disabled={!selectRows.length}
type="primary"
onClick={onDel}>
删除
</Button>
</div>
<div>
<Table<DetailTable>
@ -75,6 +141,7 @@ export default function MeasureDetail() {
dataSource={tableData.map(item => ({ ...item, key: item.name }))}
/>
</div>
</div>
);
}

11
src/services/measure/analysis.ts
View File

@ -27,8 +27,15 @@ export function saveMeasurement() {
}
export function getDetailList() {
return httpRequest<BaseResponse<{ list: DetailTable[] }>>({
url: "/measurement-task/cache-measurement",
return httpRequest<BaseResponse<{list:DetailTable[]}>>({
url: "/measurement-data/list",
method: "POST",
});
}
export function delDetail(params:{ids:string}) {
return httpRequest<BaseResponse>({
url: `/measurement-data/delete/${params.ids}`,
method: "POST",
});
}

Write Preview
Loading…
Cancel
Save