From 28fe2d1d1c726f827eda424b6a2cc6a99362b435 Mon Sep 17 00:00:00 2001 From: zhangjiming Date: Thu, 6 Mar 2025 22:06:09 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E8=93=9D=E7=89=99=E8=BF=9E?= =?UTF-8?q?=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/bluetooth_c.svg | 1 + src/assets/bluetooth_nc.svg | 1 + src/assets/check_mark.svg | 1 + src/components/Header.tsx | 96 +++++++++++++++++++++++--- src/components/Modal.tsx | 29 ++++++++ src/components/bluetooth.scss | 5 ++ src/pages/measure/components/MeasureDetail.tsx | 75 ++++++++++++++++++-- src/services/measure/analysis.ts | 11 ++- 8 files changed, 204 insertions(+), 15 deletions(-) create mode 100644 src/assets/bluetooth_c.svg create mode 100644 src/assets/bluetooth_nc.svg create mode 100644 src/assets/check_mark.svg create mode 100644 src/components/Modal.tsx create mode 100644 src/components/bluetooth.scss diff --git a/src/assets/bluetooth_c.svg b/src/assets/bluetooth_c.svg new file mode 100644 index 0000000..5250f40 --- /dev/null +++ b/src/assets/bluetooth_c.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/bluetooth_nc.svg b/src/assets/bluetooth_nc.svg new file mode 100644 index 0000000..8715208 --- /dev/null +++ b/src/assets/bluetooth_nc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/check_mark.svg b/src/assets/check_mark.svg new file mode 100644 index 0000000..feb7eac --- /dev/null +++ b/src/assets/check_mark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 3851ba6..ce70651 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -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(wsReadyState) + const showBlueImg = () => { + console.log('wsState===', wsState, typeof wsState) + if(wsState === '0'){ + return +
+ + + }else { + return + + + } + } + //@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 =
+ {bluetoothList.map(item => { + return
+ +
+ })} +
+ }else if(isConnect === 1){ + Dom =
+ 正在匹配 +
+ } + return Dom + } + + //蓝牙已连接 + const getBtContent = ()=> { + return
+
+
+ +
设备已连接
+
+
+
型号：{bluetoothInfo.type}
+
电量：{bluetoothInfo.power}
+
+
+
+ } + + //断开蓝牙连接 + const onDisconnectBt = ()=> { + setWsState('0') + setIsConnect(0) + } + + + const connectBt = () => { + setIsConnect(1) + setTimeout(()=>{ + setWsState('1') + },1000) + } + + let [isConnect, setIsConnect] = useState(0) + return ( <> {contextHolder}
- -
- -

{context.loginFlag ? context.loginUser.nickname : "未登录"}

-
- + +
+
+ {showBlueImg()} +
+ +
+ +

{context.loginFlag ? context.loginUser.nickname : "未登录"}

+
+ +
); diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx new file mode 100644 index 0000000..562a7d8 --- /dev/null +++ b/src/components/Modal.tsx @@ -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 + + + +} \ No newline at end of file diff --git a/src/components/bluetooth.scss b/src/components/bluetooth.scss new file mode 100644 index 0000000..5ada498 --- /dev/null +++ b/src/components/bluetooth.scss @@ -0,0 +1,5 @@ +.bluetooth_c{ + display: flex; + align-items: center; + justify-content: center; +} \ No newline at end of file diff --git a/src/pages/measure/components/MeasureDetail.tsx b/src/pages/measure/components/MeasureDetail.tsx index aeef46b..be2f536 100644 --- a/src/pages/measure/components/MeasureDetail.tsx +++ b/src/pages/measure/components/MeasureDetail.tsx @@ -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: , + 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 (
- +
@@ -75,6 +141,7 @@ export default function MeasureDetail() { dataSource={tableData.map(item => ({ ...item, key: item.name }))} />
+
); } diff --git a/src/services/measure/analysis.ts b/src/services/measure/analysis.ts index d850d58..9aef396 100644 --- a/src/services/measure/analysis.ts +++ b/src/services/measure/analysis.ts @@ -27,8 +27,15 @@ export function saveMeasurement() { } export function getDetailList() { - return httpRequest>({ - url: "/measurement-task/cache-measurement", + return httpRequest>({ + url: "/measurement-data/list", + method: "POST", + }); +} + +export function delDetail(params:{ids:string}) { + return httpRequest({ + url: `/measurement-data/delete/${params.ids}`, method: "POST", }); }