fix: 任务图表显示优化

.umirc.ts

@@ -27,7 +27,7 @@ export default defineConfig({
   proxy: {
     '/api': {
       // target: 'http://47.96.12.136:8888/',
-      target: 'http://47.96.12.136:8888/',
+      target: 'http://47.96.12.136:8788/',
       // target: 'http://120.55.44.4:8903/',
       // target: 'https://work.greentech.com.cn/',
       changeOrigin: true,

package.json

@@ -18,9 +18,7 @@
     "echarts": "^5.4.3",
     "md5": "^2.3.0",
     "qs": "^6.11.2",
-    "react-photo-view": "^1.2.3",
-    "react-zmage": "^0.8.5",
-    "swiper": "^11.0.5"
+    "react-zmage": "^0.8.5"
   },
   "devDependencies": {
     "@types/react": "^18.0.33",

src/pages/TaskManage/Detail/TaskOrder/TaskOrder.tsx

@@ -17,13 +17,11 @@ import { Col, Row, Steps } from 'antd';
 import dayjs from 'dayjs';
 import { DefaultOptionType } from 'rc-select/es/Select';
 import React, { useEffect, useState } from 'react';
+// @ts-ignore
+import ReactZmage from 'react-zmage';
 
-import 'react-photo-view/dist/react-photo-view.css';
 import styles from './taskOrder.less';
 
-import 'swiper/css';
-import { Swiper, SwiperSlide } from 'swiper/react';
-
 interface IPropsType {
   userList: IUserType[];
   dispatch: (args: { type: string; payload: object }) => void;
@@ -294,23 +292,32 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
 
   const renderImg = () => {
     return (
-      <div style={{ width: '100%' }}>
-        <Swiper spaceBetween={50}>
-          {orderInfo?.MandateImages?.map((photo, index) => (
-            <SwiperSlide key={index}>
-              <img
+      <Col span={18}>
+        {orderInfo?.MandateImages?.length > 0 &&
+          orderInfo?.MandateImages?.map((item, index) => {
+            return (
+              <ReactZmage
+                key={index}
+                controller={{
+                  close: true,
+                  flip: true,
+                  zoom: true,
+                  pagination: true,
+                  download: false,
+                }}
+                backdrop="rgba(255,255,255,0.5)"
                 style={{
                   maxWidth: `${Math.floor(
-                    100 / (orderInfo?.MandateImages?.length || 1),
+                    100 / orderInfo?.MandateImages?.length,
                   )}%`,
                 }}
-                src={photo.src}
-                alt=""
+                src={item.src}
+                set={orderInfo?.MandateImages}
+                defaultPage={index}
               />
-            </SwiperSlide>
-          ))}
-        </Swiper>
-      </div>
+            );
+          })}
+      </Col>
     );
   };
 

yarn.lock

@@ -8114,11 +8114,6 @@ react-merge-refs@^1.1.0:
   resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06"
   integrity sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==
 
-react-photo-view@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.npmmirror.com/react-photo-view/-/react-photo-view-1.2.3.tgz#436f81ad0a611dfaa43bbc72a4fef26a057b5aef"
-  integrity sha512-dtaFjU8nAB/rD8mxBaaJcvESlDOweAd1tmvXujS/d3oh1QyGew3xD4C02l46E6Dhn3Tshzl2+IM1h0MWV9nG7g==
-
 react-redux@^8.0.5:
   version "8.1.2"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.1.2.tgz#9076bbc6b60f746659ad6d51cb05de9c5e1e9188"
@@ -9103,11 +9098,6 @@ svgo@^2.8.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
-swiper@^11.0.5:
-  version "11.0.5"
-  resolved "https://registry.npmmirror.com/swiper/-/swiper-11.0.5.tgz#6ed1ad06e6906ba42fd4b93d4988f0626a49046e"
-  integrity sha512-rhCwupqSyRnWrtNzWzemnBLMoyYuoDgGgspAm/8iBD3jCvAWycPLH4Z3TB0O5520DHLzMx94yUMH/B9Efpa48w==
-
 swr@^2.0.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.1.tgz#19b89a9034a62a73c30dbf06857a0a31981cd60a"