feat: 塔机设备列表

.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/enterprise-platform.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/enterprise-platform.iml" filepath="$PROJECT_DIR$/.idea/enterprise-platform.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

src/layout/index.tsx

@@ -51,6 +51,9 @@ const layout: React.FC<any> = ({ routes, match }) => {
 						<Menu.Item key='/dust' icon={<BorderRightOutlined />}>
 							扬尘设备
 						</Menu.Item>
+            <Menu.Item key='/head-mast' icon={<BorderRightOutlined />}>
+              塔机设备
+            </Menu.Item>
 						<Menu.Item key='/videos' icon={<VideoCameraOutlined />}>
 							视频设备
 						</Menu.Item>

src/pages/dust/index.tsx

@@ -1,5 +1,5 @@
 import React,{Fragment} from 'react';
-import { Table, Typography, Row,Badge } from 'antd';
+import { Table, Typography, Row, Badge, Divider } from 'antd';
 import { DeviceSearch } from '../../components/search';
 import { ColumnProps } from 'antd/lib/table';
 import {
@@ -80,15 +80,16 @@ const dust: React.FC = (props) => {
 	return (
 		<div>
 			<Row gutter={[0, 24]}>
-				<DeviceSearch onSearch={handleSearch}></DeviceSearch>
+				<DeviceSearch onSearch={handleSearch}/>
 			</Row>
+      <Divider/>
 			<Table
 				rowKey={(record) => record.id}
 				pagination={{
 					showSizeChanger: false,
 					hideOnSinglePage: true,
 					current: deviceListState.page,
-					total: deviceListState.totol,
+					total: deviceListState.total,
 					onChange: (page) => {
 						setSearchState((preState) => ({
 							...preState,
@@ -98,7 +99,7 @@ const dust: React.FC = (props) => {
 				}}
 				columns={colums}
 				loading={deviceListState.loading}
-				dataSource={deviceListState.dataSouce}></Table>
+				dataSource={deviceListState.dataSource}/>
 		</div>
 	);
 };

src/pages/head-mast/index.tsx

@@ -0,0 +1,107 @@
+import React, { Fragment } from 'react';
+import { Table, Typography, Row, Badge, Divider } from 'antd';
+import { DeviceSearch } from '../../components/search';
+import { ColumnProps } from 'antd/lib/table';
+import {
+  useHeadMastList,
+	DustStatus,
+	DustRecordProps,
+	DevicestateKeys,
+	DustState,
+} from '../../services/headMast';
+const { Text } = Typography;
+const colums: ColumnProps<DustRecordProps>[] = [
+	{
+		title: '项目名',
+		dataIndex: 'project_name',
+		key: 'project_name',
+	},
+	{
+		title: '供应商',
+		dataIndex: 'provider_name',
+		key: 'provider_name',
+	},
+	{
+		title: '设备名',
+		dataIndex: 'name',
+		key: 'name',
+	},
+	{
+		title: '设备唯一编码',
+		dataIndex: 'sn',
+		key: 'sn',
+	},
+	{
+		title: '生产厂家',
+		dataIndex: 'manufacturer',
+		key: 'manufacturer',
+	},
+	{
+		title: '入库时间',
+		dataIndex: 'approve_time',
+		key: 'approve_time',
+	},
+	{
+		title: '状态',
+		dataIndex: 'state',
+		key: 'state',
+		render: (dataIndex: 0 | 1, record) => {
+			const isOnline = DevicestateKeys.onLine === dataIndex;
+			return record.status === 1 ? (
+				<Fragment>
+					<Badge color={isOnline ? 'green' : 'red'}></Badge>
+					<Text type={isOnline ? 'success' : 'secondary'}>
+						{DustState[dataIndex]}
+					</Text>
+				</Fragment>
+			) : null;
+		},
+	},
+];
+const dust: React.FC = (props) => {
+	const [searchState, setSearchState] = React.useState({
+		filter: '',
+		state: -1,
+		project_id: -1,
+		page: 1,
+	});
+	const [deviceListState, requestDevices] = useHeadMastList();
+	React.useEffect(() => {
+		requestDevices(searchState);
+	}, [searchState]);
+
+	const handleSearch = (values) => {
+		setSearchState((preState) => ({
+			...preState,
+			page: 1,
+			...{ state: -1, project_id: -1, ...values },
+		}));
+	};
+	return (
+		<div>
+			<Row gutter={[0, 24]}>
+				<DeviceSearch onSearch={handleSearch}/>
+			</Row>
+      <Divider/>
+			<Table
+				rowKey={(record) => record.id}
+				pagination={{
+					showSizeChanger: false,
+					hideOnSinglePage: true,
+					current: deviceListState.page,
+					total: deviceListState.total,
+					onChange: (page) => {
+						setSearchState((preState) => ({
+							...preState,
+							page,
+						}));
+					},
+				}}
+				columns={colums}
+				loading={deviceListState.loading}
+				dataSource={deviceListState.dataSource}/>
+		</div>
+	);
+};
+
+export default dust;

src/router/config.tsx

@@ -10,6 +10,7 @@ import projectAdd from '../pages/project-add';
 import Accounts from '../pages/accounts';
 import setup from '../pages/setup';
 import dust from '../pages/dust';
+import headMast from '../pages/head-mast'
 import videos from '../pages/video';
 import accessController from '../pages/accessControl';
 import NotFound from '../pages/404';
@@ -70,6 +71,11 @@ export const routesConfig = [
 				component: dust,
 				title: '扬尘设备',
 			},
+      {
+				path: '/head-mast',
+				component: headMast,
+				title: '塔机设备',
+			},
 			{
 				path: '/videos',
 				component: videos,

src/services/dust.ts

@@ -29,8 +29,8 @@ export type DustRecordProps = {
 export const useDustList = () => {
 	const [state, setState] = React.useState({
 		loading: false,
-		dataSouce: [],
-		totol: 0,
+		dataSource: [],
+		total: 0,
 		page: 1,
 	});
 

src/services/headMast.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import Request from '../utils/request';
+export const DustStatus = {
+	0: '待确认',
+	1: '已确认',
+	2: '未通过',
+};
+export const DevicestateKeys = {
+	offLine: 0,
+	onLine: 1,
+};
+export const DustState = {
+	[DevicestateKeys.offLine]: '离线',
+	[DevicestateKeys.onLine]: '在线',
+};
+export type DustRecordProps = {
+	project_name: string;
+	type_name: string;
+	name: string;
+	provider_name: string;
+	sn: string;
+	status: keyof typeof DustStatus;
+	state: keyof typeof DustState;
+	id: number;
+};
+/**
+ * @description 获取扬尘设备列表
+ */
+export const useHeadMastList = () => {
+	const [state, setState] = React.useState({
+		loading: false,
+    dataSource: [],
+		total: 0,
+		page: 1,
+	});
+
+	const request = (params: {
+		page: number;
+		filter: string;
+		project_id: number;
+		state: number;
+	}) => {
+		setState((preState) => ({ ...preState, loading: true }));
+		return Request.sendRequest({
+			url: '/v1/device/tower_list',
+			params: params,
+		})
+			.then((data: any) => {
+				setState((preState) => ({
+					...preState,
+					loading: false,
+          dataSource: data.list,
+					total: data.total,
+					page: data.page,
+				}));
+			})
+			.finally(() => {
+				setState((preState) => ({ ...preState, loading: false }));
+			});
+	};
+	return [state, request] as const;
+};