WorkOrderModal.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400
  1. import {
  2. getCraftRecordList,
  3. getMaintainRecordList,
  4. getReagentOrderDetail,
  5. getRepairRecordList,
  6. getWorkOrderFlow,
  7. } from '@/services/TaskManage';
  8. import { CloseCircleFilled } from '@ant-design/icons';
  9. import { connect, useLocation, useParams, useRequest } from '@umijs/max';
  10. import { Button, Col, Divider, Row, Steps } from 'antd';
  11. import dayjs from 'dayjs';
  12. import { useEffect, useState } from 'react';
  13. import ReactZmage from 'react-zmage';
  14. import SubTitle from '../components/SubTitle';
  15. import { OrderStatus, OrderType } from '../constent';
  16. import styles from './WorkOrderModal.less';
  17. import { UnityAction } from '@/utils/utils';
  18. const WorkOrderModal = (props) => {
  19. const { userList, dispatch } = props;
  20. const { projectID } = useParams();
  21. const location = useLocation();
  22. const queryParams = new URLSearchParams(location.search);
  23. const order_id = Number(queryParams.get('order_id'));
  24. const order_type = Number(queryParams.get('order_type'));
  25. const mandate_class = Number(queryParams.get('mandate_class'));
  26. const [orderInfo, setOrderInfo] = useState({});
  27. const [additionalInfo, setAdditionalInfo] = useState({});
  28. const [stepInfo, setStepInfo] = useState([]);
  29. const { run: getCraftDetail } = useRequest(getCraftRecordList, {
  30. manual: true,
  31. formatResult: (result) => {
  32. if (result?.data?.list) {
  33. const temp = result.data.list[0];
  34. const tempDetail = {
  35. ...temp,
  36. CreateTime: dayjs(temp.start_time).format('YYYY-MM-DD HH:mm'),
  37. PlanTime: dayjs(temp.plan_end_time).format('YYYY-MM-DD HH:mm'),
  38. RepairTime:
  39. (temp.actual_end_time &&
  40. dayjs(temp.actual_end_time).format('YYYY-MM-DD HH:mm')) ||
  41. '-',
  42. Reason: mandate_class !== 2 ? temp.detail : renderReason(temp.detail),
  43. Repairman:
  44. userList.find((item) => item.ID === temp.checker_id) || '-',
  45. DispatchMan:
  46. userList.find((item) => item.ID === temp.operator_id) || '-',
  47. OrderStatus:
  48. OrderStatus.find((item) => item.value === temp.status) || '-',
  49. MandateImages:
  50. temp?.mandate_images?.length > 0
  51. ? temp.mandate_images.map((item) => {
  52. console.log(item);
  53. if (item.type === 2) {
  54. return {
  55. src: item.val,
  56. };
  57. }
  58. return {
  59. src: `data:image/png;base64,${item.val}`,
  60. };
  61. })
  62. : [],
  63. };
  64. setOrderInfo(tempDetail);
  65. // 根据不同的工单类型查询工单操作详情
  66. }
  67. },
  68. });
  69. const { run: getRepairDetail } = useRequest(getRepairRecordList, {
  70. manual: true,
  71. formatResult: (result) => {
  72. if (result?.data?.list) {
  73. const temp = result.data.list[0];
  74. const tempDetail = {
  75. ...temp,
  76. CreateTime: dayjs(temp.CreateTime).format('YYYY-MM-DD HH:mm'),
  77. PlanTime: dayjs(temp.PlanTime).format('YYYY-MM-DD HH:mm'),
  78. RepairTime:
  79. (temp.RepairTime &&
  80. dayjs(temp.RepairTime).format('YYYY-MM-DD HH:mm')) ||
  81. '-',
  82. Reason: temp.Reason,
  83. Repairman: userList.find((item) => item.ID === temp.Repairman) || '-',
  84. DispatchMan:
  85. userList.find((item) => item.ID === temp.operator_id) || '-',
  86. OrderStatus:
  87. OrderStatus.find((item) => item.value === temp.AcceptanceStatus) ||
  88. '-',
  89. MandateImages:
  90. temp?.mandate_images?.length > 0
  91. ? temp.mandate_images.map((item) => {
  92. if (item.type === 2) {
  93. return {
  94. src: item.val,
  95. };
  96. }
  97. return {
  98. src: `data:image/png;base64,${item.val}`,
  99. };
  100. })
  101. : [],
  102. };
  103. setOrderInfo(tempDetail);
  104. }
  105. },
  106. });
  107. const { run: getMaintainDetail } = useRequest(getMaintainRecordList, {
  108. manual: true,
  109. formatResult: (result) => {
  110. if (result?.data?.list) {
  111. const temp = result.data.list[0];
  112. const tempDetail = {
  113. ...temp,
  114. CreateTime: dayjs(temp.CreateTime).format('YYYY-MM-DD HH:mm'),
  115. PlanTime: dayjs(temp.PlanTime).format('YYYY-MM-DD HH:mm'),
  116. RepairTime: dayjs(temp.RepairTime).format('YYYY-MM-DD HH:mm') || '-',
  117. Reason: temp.Note,
  118. Repairman:
  119. userList.find((item) => item.ID === temp.MaintenancePerson) || '-',
  120. DispatchMan:
  121. userList.find(
  122. (item) => (item.ID = temp.Operators[0]?.Operator?.ID),
  123. ) || '-',
  124. OrderStatus:
  125. OrderStatus.find((item) => item.value === temp.Status) || '-',
  126. MandateImages:
  127. temp?.mandate_images?.length > 0
  128. ? temp.mandate_images.map((item) => {
  129. if (item.type === 2) {
  130. return {
  131. src: item.val,
  132. };
  133. }
  134. return {
  135. src: `data:image/png;base64,${item.val}`,
  136. };
  137. })
  138. : [],
  139. };
  140. setOrderInfo(tempDetail);
  141. }
  142. },
  143. });
  144. const { run: getDosingOrder } = useRequest(getReagentOrderDetail, {
  145. manual: true,
  146. formatResult: (result) => {
  147. const temp = {
  148. ...result,
  149. CreateTime: result?.start_time?.Valid
  150. ? dayjs(result?.start_time?.Time).format('YYYY-MM-DD HH:mm')
  151. : '-',
  152. PlanTime: result?.plan_end_time?.Valid
  153. ? dayjs(result.plan_end_time.Time).format('YYYY-MM-DD HH:mm')
  154. : '-',
  155. RepairTime: result?.actual_end_time?.Valid
  156. ? dayjs(result.actual_end_time.Time).format('YYYY-MM-DD HH:mm')
  157. : '-',
  158. Reason: result.note,
  159. Repairman: '-',
  160. DispatchMan:
  161. userList.find((user) => user.ID === result.operator_id) || '-',
  162. OrderStatus:
  163. OrderStatus.find((status) => status.value === result.status) || '-',
  164. };
  165. setOrderInfo(temp);
  166. setAdditionalInfo(temp);
  167. },
  168. });
  169. useRequest(getWorkOrderFlow, {
  170. defaultParams: [{ work_type: order_type, work_id: order_id }],
  171. formatResult(res) {
  172. if (res && res?.length) {
  173. setStepInfo(res);
  174. }
  175. },
  176. });
  177. const closePage = () => {
  178. // ToDo: send message to unity to close this page
  179. UnityAction.sendMsg('CloseWorkOrder');
  180. };
  181. const renderImg = () => {
  182. return (
  183. <Col span={18}>
  184. {orderInfo?.MandateImages?.length > 0 &&
  185. orderInfo?.MandateImages?.map((item, index) => {
  186. return (
  187. <ReactZmage
  188. key={index}
  189. controller={{
  190. close: true,
  191. flip: true,
  192. zoom: true,
  193. pagination: true,
  194. download: false,
  195. }}
  196. backdrop="rgba(255,255,255,0.5)"
  197. style={{
  198. maxWidth: `${Math.floor(
  199. 100 / orderInfo?.MandateImages?.length,
  200. )}%`,
  201. }}
  202. src={item.src}
  203. set={orderInfo?.MandateImages}
  204. defaultPage={index}
  205. />
  206. );
  207. })}
  208. </Col>
  209. );
  210. };
  211. useEffect(() => {
  212. switch (order_type) {
  213. case 1:
  214. case 4:
  215. case 6:
  216. getCraftDetail({ project_id: projectID, work_id: order_id });
  217. break;
  218. case 2:
  219. getRepairDetail({ project_id: projectID, id: order_id });
  220. break;
  221. case 3:
  222. getMaintainDetail({ project_id: projectID, id: order_id });
  223. break;
  224. case 5:
  225. getDosingOrder(order_id);
  226. break;
  227. default:
  228. break;
  229. }
  230. }, []);
  231. return (
  232. <div className={styles.modalContainer}>
  233. <div className={styles.modalTitle}>工单信息</div>
  234. <Button
  235. className={styles.closeModalBtn}
  236. type="text"
  237. icon={
  238. <CloseCircleFilled
  239. style={{ fontSize: '0.32rem', color: 'rgba(155, 151, 151, 1)' }}
  240. />
  241. }
  242. onClick={closePage}
  243. />
  244. <Divider style={{ margin: '0 0 0.1rem 0' }} />
  245. <div>
  246. <div>
  247. <SubTitle title="工单信息" radius />
  248. <div className={styles.basicalInfo}>
  249. <Row style={{ marginTop: '0' }}>
  250. <Col span={16} className={styles.fontS32}>
  251. 工单类型:
  252. {OrderType.find((item) => item.value === order_type)?.label ||
  253. '-'}
  254. </Col>
  255. <Col span={8} className={styles.fontS32}>
  256. {/*// @ts-ignore*/}
  257. 工单负责人:{orderInfo?.Repairman?.CName || '-'}
  258. </Col>
  259. </Row>
  260. <Row>
  261. <Col span={16} className={styles.fontS32}>
  262. 工单状态:{orderInfo?.OrderStatus?.label}
  263. </Col>
  264. <Col span={8} className={styles.fontS32}>
  265. 派单人员:{orderInfo?.DispatchMan?.CName}
  266. </Col>
  267. </Row>
  268. <Row>
  269. <Col className={styles.fontS32}>
  270. 派单时间:{orderInfo?.CreateTime || '-'}
  271. </Col>
  272. </Row>
  273. <Row>
  274. <Col className={styles.fontS32}>
  275. 计划完成时间:{orderInfo?.PlanTime || '-'}
  276. </Col>
  277. </Row>
  278. <Row>
  279. <Col className={styles.fontS32}>
  280. 实际完成时间:{orderInfo?.RepairTime || '-'}
  281. </Col>
  282. </Row>
  283. {orderInfo?.MandateImages?.length > 0 && (
  284. <Row>
  285. <Col className={styles.fontS32} span={4}>
  286. 任务图片:
  287. </Col>
  288. {renderImg()}
  289. </Row>
  290. )}
  291. </div>
  292. </div>
  293. {order_type === 3 && (
  294. <div>
  295. <SubTitle title="操作内容" titleFontSize={24} />
  296. <div className={styles.additionInfo}>
  297. <Row justify={'space-around'} style={{ marginTop: '0' }}>
  298. <Col className={styles.fontS32} span={8}>
  299. 是否润滑/加油:{orderInfo?.Lubrication === 1 ? '是' : '否'}
  300. </Col>
  301. <Col className={styles.fontS32} span={8}>
  302. 是否拆检:{orderInfo?.Check === 1 ? '是' : '否'}
  303. </Col>
  304. <Col className={styles.fontS32} span={8}>
  305. 是否清洁:{orderInfo?.Clean === 1 ? '是' : '否'}
  306. </Col>
  307. </Row>
  308. <Row justify={'space-around'}>
  309. <Col className={styles.fontS32} span={8}>
  310. 是否紧固:{orderInfo?.Fasten === 1 ? '是' : '否'}
  311. </Col>
  312. <Col className={styles.fontS32} span={8}>
  313. 是否除锈:{orderInfo?.AntiCorrosive === 1 ? '是' : '否'}
  314. </Col>
  315. <Col className={styles.fontS32} span={8}>
  316. 是否防腐:{orderInfo?.RustRemoval === 1 ? '是' : '否'}
  317. </Col>
  318. </Row>
  319. </div>
  320. </div>
  321. )}
  322. {order_type === 5 && (
  323. <div>
  324. <SubTitle title="加药详情" titleFontSize={24} />
  325. <div
  326. style={{
  327. padding: '0.15rem',
  328. background: 'rgba(23, 85, 255, 0.06)',
  329. }}
  330. >
  331. <Row>
  332. <Col className={styles.fontS32}>加药详情:</Col>
  333. <Col className={styles.fontS32} span={18}>
  334. {`药剂名称:${additionalInfo?.name || '-'} 加药量:${
  335. additionalInfo?.dosage || '-'
  336. }升 浓度:${additionalInfo?.concentration || '-'}`}
  337. </Col>
  338. </Row>
  339. </div>
  340. </div>
  341. )}
  342. {stepInfo.length > 0 && (
  343. <div>
  344. <SubTitle title="工单流程" titleFontSize={24} />
  345. <Divider
  346. type="horizontal"
  347. style={{
  348. height: '0.02rem',
  349. margin: 0,
  350. padding: 0,
  351. color: 'rgba(23, 85, 255, 0.50)',
  352. background: 'rgba(23, 85, 255, 0.50)',
  353. }}
  354. />
  355. <div
  356. style={{
  357. padding: '0.15rem 0.2rem',
  358. }}
  359. >
  360. <Steps
  361. direction="vertical"
  362. progressDot
  363. current={1}
  364. items={stepInfo?.map((item) => {
  365. return {
  366. title: (
  367. <span className={styles.fontS32}>{item.content}</span>
  368. ),
  369. description: (
  370. <span className={styles.fontS28}>{item.time}</span>
  371. ),
  372. };
  373. })}
  374. />
  375. </div>
  376. </div>
  377. )}
  378. </div>
  379. </div>
  380. );
  381. };
  382. export default connect(({ taskUser }) => {
  383. return {
  384. userList: taskUser.userList,
  385. };
  386. })(WorkOrderModal);