industry / sxjx-h5 · Commits

Commit 40df778454cf755b1b60065132e530f282cc8d2f

Authored by 史婷婷
1 parent 9605143f

feat: 生产线管理、生产线明细接口联调

Inline Side-by-side
Showing 13 changed files with 217 additions and 234 deletions
  1 +import { post, get } from '@/utils/request.tsx'
  2 +
  3 +
  4 +/**生产线信息-获取所有生产线信息
  5 + * **/
  6 +export function getProductLine() {
  7 + return post(
  8 + '/open/qx-apaas-lowcode/getProductLine',
  9 + {
  10 + select_dcouji: 'ENABLE'
  11 + },
  12 + {},
  13 + {}
  14 + );
  15 +}
  16 +
  17 +/**生产线信息--获取生产线下所有作业指导书信息
  18 + * **/
  19 +export function getProductBook(data: {pro_line: string}) {
  20 + return post(
  21 + '/open/qx-apaas-lowcode/getProductBook',
  22 + {
  23 + },
  24 + {
  25 + ...data
  26 + },
  27 + {}
  28 + );
  29 +}
  30 +
  31 +/**获取文件预览地址
  32 + * **/
  33 +export function getFilePreview(fileId: string) {
  34 + return get(
  35 + `/open/qgyun-service-fs-manager/file/p/origin/${fileId}`,
  36 + {
  37 + },
  38 + {
  39 + }
  40 + );
  41 +}
1 -import React, {useEffect, useState} from 'react'  
2 -import './style.less'  
3 -import NavBar from '@/components/nav-bar'  
4 -import {baseColorPrimary} from "@/utils/common";  
5 -import {hexToRgba} from "@/utils/utils";  
6 -import _mp4 from './mp4.png';  
7 -import _pdf from './pdf.png';  
8 -  
9 -import { useSearchParams } from "react-router-dom";  
10 -  
11 -  
12 -const ProductionList: React.FC = () => {  
13 - const [title, setTitle] = useState<string>('');  
14 - // 因是hook，必须写在组件的顶部执行，useSearchParams() 返回的是数组  
15 - const [params] = useSearchParams();  
16 - console.log('ProductionList===params', params)  
17 - // 通过 get 方法获取目标参数  
18 - const name = params.get("name") || "";  
19 -  
20 - useEffect(() => {  
21 - if (name) {  
22 - setTitle(name)  
23 - }  
24 - }, [name])  
25 -  
26 - const list = [  
27 - {  
28 - id: '1',  
29 - name: '工艺流程指导文件',  
30 - type: 'pdf'  
31 - },  
32 - {  
33 - id: '2',  
34 - name: '设备操作指导文件',  
35 - type: 'mp4'  
36 - },  
37 - {  
38 - id: '3',  
39 - name: '工艺流程指导文件2',  
40 - type: 'pdf'  
41 - },  
42 - {  
43 - id: '4',  
44 - name: '工艺流程指导文件3',  
45 - type: 'pdf'  
46 - },  
47 - {  
48 - id: '5',  
49 - name: '工艺流程指导文件4',  
50 - type: 'pdf'  
51 - },  
52 - {  
53 - id: '6',  
54 - name: '工艺流程指导文件5',  
55 - type: 'pdf'  
56 - },  
57 - {  
58 - id: '7',  
59 - name: '设备操作指导文件2',  
60 - type: 'mp4'  
61 - },  
62 - {  
63 - id: '8',  
64 - name: '设备设备设备设备设备设备设备操作指导文件3',  
65 - type: 'mp4'  
66 - },  
67 - {  
68 - id: '9',  
69 - name: '设备操作指导文件4',  
70 - type: 'mp4'  
71 - },  
72 - {  
73 - id: '10',  
74 - name: '设备操作指导文件5',  
75 - type: 'mp4'  
76 - },  
77 - {  
78 - id: '11',  
79 - name: '设备操作指导文件6',  
80 - type: 'mp4'  
81 - },  
82 - {  
83 - id: '12',  
84 - name: '设备操作指导文件7',  
85 - type: 'mp4'  
86 - },  
87 - {  
88 - id: '13',  
89 - name: '设备操作指导文件8',  
90 - type: 'mp4'  
91 - },  
92 - {  
93 - id: '14',  
94 - name: '设备操作指导文件9',  
95 - type: 'mp4'  
96 - },  
97 - {  
98 - id: '15',  
99 - name: '设备操作指导文件10',  
100 - type: 'mp4'  
101 - }  
102 - ]  
103 -  
104 -  
105 - return (  
106 - <div className={'sxjx-content-main sxjx-layout-main-unfoot'}>  
107 - <div className={'production-list'}>  
108 - <NavBar title={title} showBack={true}/>  
109 - <div className={'production-list_list'}>  
110 - {  
111 - list?.map((item: any) => {  
112 - return <div  
113 - key={item?.id}  
114 - className={'production-list_list-item'}  
115 - style={{backgroundColor: hexToRgba(baseColorPrimary, 0.6)}}  
116 - >  
117 - <img className={'production-list_list-item-img'} src={item?.type === 'mp4' ? _mp4 : _pdf}/>  
118 - <div className={'omit2 production-list_list-item-name'}>  
119 - {item?.name}  
120 - </div>  
121 - </div>  
122 - })  
123 - }  
124 - </div>  
125 - </div>  
126 - </div>  
127 - )  
128 -}  
129 -  
130 -export default ProductionList;  
1 -import React from 'react'  
2 -import './style.less'  
3 -import NavBar from "@/components/nav-bar"  
4 -import {baseColorPrimary} from "@/utils/common";  
5 -import {hexToRgba} from "@/utils/utils";  
6 -import { useNavigate } from "react-router-dom";  
7 -  
8 -  
9 -const ProductionManagement: React.FC = () => {  
10 - const navigate = useNavigate();  
11 -  
12 - const list = [  
13 - {  
14 - id: '1',  
15 - name: '车顶生产线A'  
16 - },  
17 - {  
18 - id: '2',  
19 - name: '车顶生产线B'  
20 - },  
21 - {  
22 - id: '3',  
23 - name: '车顶生产线C'  
24 - },  
25 - {  
26 - id: '4',  
27 - name: '车顶生产线D'  
28 - },  
29 - {  
30 - id: '5',  
31 - name: '车顶生产线E'  
32 - },  
33 - {  
34 - id: '6',  
35 - name: '车顶生产线F'  
36 - },  
37 - {  
38 - id: '7',  
39 - name: '车顶生产线G'  
40 - },  
41 - {  
42 - id: '8',  
43 - name: '车顶生产线H'  
44 - },  
45 - {  
46 - id: '9',  
47 - name: '车顶生产线I'  
48 - },  
49 - {  
50 - id: '10',  
51 - name: '车顶生产线J'  
52 - },  
53 - {  
54 - id: '11',  
55 - name: '车顶生产线K'  
56 - },  
57 - {  
58 - id: '12',  
59 - name: '车顶生车顶生车顶生产线L'  
60 - },  
61 - {  
62 - id: '13',  
63 - name: '车顶生产线M'  
64 - },  
65 - {  
66 - id: '14',  
67 - name: '车顶生产线N'  
68 - }  
69 - ];  
70 -  
71 - const toProductionList = (item: any) => {  
72 - console.log('toProductionList-item', item)  
73 - navigate(`/production/list?id=${item?.id}&name=${item?.name}`);  
74 - }  
75 -  
76 -  
77 - return (  
78 - <div className={'sxjx-content-main sxjx-layout-main-unfoot'}>  
79 - <div className={'production-management'}>  
80 - <NavBar title={'生产线管理'}/>  
81 - <div className={'production-management_list'}>  
82 - {  
83 - list?.map((item: any) => {  
84 - return <div  
85 - key={item?.id}  
86 - className={'production-management_list-item'}  
87 - style={{backgroundColor: hexToRgba(baseColorPrimary, 0.6)}}  
88 - onClick={() => toProductionList(item)}  
89 - >  
90 - {item?.name}  
91 - </div>  
92 - })  
93 - }  
94 - </div>  
95 - </div>  
96 - </div>  
97 - )  
98 -}  
99 -  
100 -export default ProductionManagement;  
src/pages/production/detail/index.tsx renamed from src/pages/production-detail/index.tsx
src/pages/production/detail/style.less renamed from src/pages/production-detail/style.less
  1 +import React, {useEffect, useState} from 'react'
  2 +import './style.less'
  3 +import NavBar from '@/components/nav-bar'
  4 +import {baseColorPrimary} from "@/utils/common";
  5 +import {hexToRgba} from "@/utils/utils";
  6 +import _mp4 from './mp4.png';
  7 +import _pdf from './pdf.png';
  8 +
  9 +import {useSearchParams} from "react-router-dom";
  10 +import {getProductBook} from "@/api/apiConfig";
  11 +import {SpinLoading} from 'antd-mobile'
  12 +
  13 +interface ListType {
  14 + id: string;
  15 + name: string;
  16 + type: 'pdf' | 'mp4' | string
  17 +}
  18 +
  19 +const ProductionList: React.FC = () => {
  20 + const [title, setTitle] = useState<string>('');
  21 + const [list, setList] = useState<ListType[]>([]);
  22 + const [show, setShow] = useState<boolean>(false);
  23 +
  24 +
  25 + // 因是hook，必须写在组件的顶部执行，useSearchParams() 返回的是数组
  26 + const [params] = useSearchParams();
  27 + console.log('ProductionList===params', params)
  28 + // 通过 get 方法获取目标参数
  29 + const name = params.get("name") || "";
  30 + const id = params.get("id") || "";
  31 +
  32 + useEffect(() => {
  33 + if (name) {
  34 + setTitle(name)
  35 + }
  36 + }, [name])
  37 +
  38 + useEffect(() => {
  39 + if (id) {
  40 + setShow(false);
  41 + getProductBook({pro_line: id}).then((res: any) => {
  42 + setShow(true);
  43 + const _list = res?.product_book?.map((item: any) => {
  44 + const _arr = item?.guide_book_file_info_?.[0]?.name?.split('.') || [];
  45 + return {
  46 + id: item?.id || '',
  47 + name: _arr?.[0] || '',
  48 + type: _arr?.[1] || '',
  49 + }
  50 + }) || [];
  51 + setList(_list)
  52 + }).catch((e: any) => {
  53 + setShow(true);
  54 + setList([])
  55 + })
  56 + }
  57 + }, [id])
  58 +
  59 +
  60 + return (
  61 + <div className={'sxjx-content-main sxjx-layout-main-unfoot'}>
  62 + <div className={'production-list'}>
  63 + <NavBar title={title} showBack={true}/>
  64 + {
  65 + !show ? <SpinLoading color='primary'/> :
  66 + <div className={'production-list_list'}>
  67 + {
  68 + list?.map((item: any) => {
  69 + return <div
  70 + key={item?.id}
  71 + className={'production-list_list-item'}
  72 + style={{backgroundColor: hexToRgba(baseColorPrimary, 0.55)}}
  73 + >
  74 + <img className={'production-list_list-item-img'}
  75 + src={item?.type === 'mp4' ? _mp4 : _pdf}/>
  76 + <div className={'omit2 production-list_list-item-name'}>
  77 + {item?.name}
  78 + </div>
  79 + </div>
  80 + })
  81 + }
  82 +
  83 + </div>
  84 + }
  85 + </div>
  86 + </div>
  87 + )
  88 +}
  89 +
  90 +export default ProductionList;
src/pages/production/list/mp4.png renamed from src/pages/production-list/mp4.png

8.72 KB
src/pages/production/list/pdf.png renamed from src/pages/production-list/pdf.png

10.4 KB
src/pages/production/list/style.less renamed from src/pages/production-list/style.less
1 .production-list { 1 .production-list {
2 background: #f7f7f7; 2 background: #f7f7f7;
3 3
  4 + .adm-spin-loading {
  5 + --size: 60px;
  6 + margin: 300px auto 0;
  7 + }
  8 +
4 &_list { 9 &_list {
5 padding: 60px; 10 padding: 60px;
6 display: flex; 11 display: flex;
  1 +import React, {useEffect, useState} from 'react'
  2 +import './style.less'
  3 +import NavBar from "@/components/nav-bar"
  4 +import {baseColorPrimary} from "@/utils/common";
  5 +import {hexToRgba} from "@/utils/utils";
  6 +import { useNavigate } from "react-router-dom";
  7 +import {getProductLine} from "@/api/apiConfig";
  8 +import { SpinLoading } from 'antd-mobile'
  9 +
  10 +interface ListType {
  11 + id: string;
  12 + name: string;
  13 +}
  14 +
  15 +const ProductionManagement: React.FC = () => {
  16 + const navigate = useNavigate();
  17 + const [list, setList] = useState<ListType[]>([]);
  18 + const [show, setShow] = useState<boolean>(false);
  19 +
  20 + useEffect(() => {
  21 + setShow(false);
  22 + getProductLine().then((res: any) => {
  23 + setShow(true);
  24 + const _list = res?.product_line?.map((item: any) => {
  25 + return {
  26 + id: item?.id || '',
  27 + name: item?.name || '',
  28 + }
  29 + }) || [];
  30 + setList(_list)
  31 +
  32 + }).catch((e: any) => {
  33 + setShow(true);
  34 + setList([])
  35 + })
  36 + }, [])
  37 +
  38 + const toProductionList = (item: any) => {
  39 + console.log('toProductionList-item', item)
  40 + navigate(`/production/list?id=${item?.id}&name=${item?.name}`);
  41 + }
  42 +
  43 +
  44 + return (
  45 + <div className={'sxjx-content-main sxjx-layout-main-unfoot'}>
  46 + <div className={'production-management'}>
  47 + <NavBar title={'生产线管理'}/>
  48 + {
  49 + !show ? <SpinLoading color='primary' /> :
  50 + <div className={'production-management_list'}>
  51 + {
  52 + list?.map((item: any) => {
  53 + return <div
  54 + key={item?.id}
  55 + className={'production-management_list-item'}
  56 + style={{backgroundColor: hexToRgba(baseColorPrimary, 0.6)}}
  57 + onClick={() => toProductionList(item)}
  58 + >
  59 + {item?.name}
  60 + </div>
  61 + })
  62 + }
  63 + </div>
  64 + }
  65 +
  66 + </div>
  67 + </div>
  68 + )
  69 +}
  70 +
  71 +export default ProductionManagement;
src/pages/production/management/style.less renamed from src/pages/production-management/style.less
1 .production-management { 1 .production-management {
2 background: #f7f7f7; 2 background: #f7f7f7;
3 3
  4 + .adm-spin-loading {
  5 + --size: 60px;
  6 + margin: 300px auto 0;
  7 + }
  8 +
4 &_list { 9 &_list {
5 padding: 60px; 10 padding: 60px;
6 display: flex; 11 display: flex;
1 import {createHashRouter} from 'react-router-dom'; 1 import {createHashRouter} from 'react-router-dom';
2 import ErrorPage from "./pages/errorPage"; 2 import ErrorPage from "./pages/errorPage";
3 -import ProductionManagement from "./pages/production-management";  
4 -import ProductionList from "./pages/production-list";  
5 -import ProductionDetail from "./pages/production-detail"; 3 +import ProductionManagement from "./pages/production/management";
  4 +import ProductionList from "./pages/production/list";
  5 +import ProductionDetail from "./pages/production/detail";
6 6
7 7
8 const routers = [ 8 const routers = [
@@ -25,7 +25,8 @@ @@ -25,7 +25,8 @@
25 "baseUrl": ".", 25 "baseUrl": ".",
26 "paths": { 26 "paths": {
27 "@/*": ["src/*"] 27 "@/*": ["src/*"]
28 - } 28 + },
  29 + "allowSyntheticDefaultImports": true
29 }, 30 },
30 "include": ["src"] 31 "include": ["src"]
31 } 32 }