Merge branch 'develop' of http://120.55.44.4:10080/xujunjie/gt_client_pad into develop

package.json

@@ -18,7 +18,9 @@
     "echarts": "^5.4.3",
     "md5": "^2.3.0",
     "qs": "^6.11.2",
-    "react-zmage": "^0.8.5"
+    "react-id-swiper": "^4.0.0",
+    "react-zmage": "^0.8.5",
+    "swiper": "5.4.5"
   },
   "devDependencies": {
     "@types/react": "^18.0.33",

src/global.less

@@ -123,12 +123,17 @@ input[type='reset'] {
   outline: none;
 }
 
-.card-box {
+.box {
   border-radius: 8px;
   box-shadow: 0px 0px 8px 2px rgba(191, 191, 191, 0.2);
   border: 1px solid #eee;
   background: rgba(255, 255, 255);
 }
+.card-box {
+  border-radius: 0.4rem 0 0.4rem 0;
+  background: #ffffff;
+  box-shadow: 1px 6px 10px 0px rgba(0, 0, 0, 0.1);
+}
 
 .content-tab {
   padding-left: 5px;

src/pages/Projects/index.js

@@ -1,5 +1,34 @@
+import { queryProject } from '@/services/diagnosticTec';
+import { useRequest } from '@umijs/max';
+import { useRef } from 'react';
+import Swiper from 'react-id-swiper';
+import 'swiper/css/swiper.css';
 import styles from './index.less';
+const nodata = require('@/assets/projects/nodata.png');
 const Projects = () => {
+  const ref = useRef(null);
+
+  const { data: projectList } = useRequest(queryProject, {
+    formatResult: (res) => {
+      return res?.data?.list?.filter((item) => item?.Stage == 3);
+    },
+  });
+  const params = {
+    slidesPerView: 'auto',
+    freeMode: true,
+    spaceBetween: 30,
+  };
+  const goNext = () => {
+    if (ref.current !== null && ref.current.swiper !== null) {
+      ref.current.swiper.slideNext();
+    }
+  };
+
+  const goPrev = () => {
+    if (ref.current !== null && ref.current.swiper !== null) {
+      ref.current.swiper.slidePrev();
+    }
+  };
   return (
     <div className={styles.main}>
       <div className={styles.titleCon}>
@@ -9,6 +38,47 @@ const Projects = () => {
           <span className={styles.titleText}>新水岛无人值守管理平台</span>
         </div>
       </div>
+      <div className={styles.swiper}>
+        <Swiper {...params} ref={ref}>
+          {projectList?.map((item) => (
+            <div>
+              <div className={styles.swiperItem}>
+                <div
+                  className={styles.pic}
+                  style={{
+                    backgroundImage: `url('${item.ScreenShot || nodata}')`,
+                  }}
+                />
+                <div className={styles.name}>{item.Name}</div>
+                <div className={styles.bottomCon}>
+                  <div className={styles.itemCon}>
+                    <div className={styles.line} />
+                    <div className={styles.valueCon}>
+                      <span className={styles.value}>
+                        2347<span className={styles.valueCon}>m3/h</span>
+                      </span>
+                      <div>进水流量</div>
+                    </div>
+                  </div>
+                  <div className={styles.itemCon}>
+                    <div className={styles.line} />
+                    <div className={styles.valueCon}>
+                      <span className={styles.value}>
+                        2347<span className={styles.valueCon}>m3/h</span>
+                      </span>
+                      <div>进水流量</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className={styles.shadow} />
+            </div>
+          ))}
+        </Swiper>
+        <div className={styles.arrowLeft} onClick={goPrev}></div>
+        <div className={styles.arrowRight} onClick={goNext}></div>
+        <div className={styles.bg}></div>
+      </div>
     </div>
   );
 };

src/pages/Projects/index.less

@@ -1,7 +1,8 @@
 .main {
   width: 100%;
   height: 100vh;
-  background-color: aqua;
+  background: url('@/assets/projects/bg.png') no-repeat center;
+  background-size: 100% 100%;
   .titleCon {
     margin: 0 1.8rem;
     padding: 2.64rem 0 0.4rem;
@@ -33,3 +34,106 @@
     }
   }
 }
+.swiper {
+  position: relative;
+  margin-top: 2.72rem;
+  .pic {
+    width: 2.97rem;
+    height: 2.26rem;
+    border-radius: 0.16rem;
+    background-size: 100% 100%;
+  }
+  .name {
+    margin-top: 0.14rem;
+    margin-bottom: 0.2rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    font-size: 0.35rem;
+    line-height: 0.4rem;
+    font-family: Source Han Sans, Source Han Sans;
+    font-weight: 500;
+    color: #0054a7;
+  }
+  .swiperItem {
+    position: relative;
+    padding: 0.18rem;
+    width: 3.33rem;
+    height: 4.57rem;
+    background: url('@/assets/projects/item-bg.png') no-repeat center;
+    background-size: 100% 100%;
+  }
+  .shadow {
+    width: 3.34rem;
+    height: 1.86rem;
+    background: url('@/assets/projects/item-bg-down.png') no-repeat center;
+    background-size: 100% 100%;
+  }
+  .line {
+    margin-right: 0.14rem;
+    height: 0.49rem;
+    width: 0.01rem;
+    background-color: #0054a7;
+  }
+  .bottomCon {
+    position: absolute;
+    bottom: 0.3rem;
+    display: flex;
+    justify-content: space-between;
+    .itemCon {
+      display: flex;
+    }
+  }
+  .valueCon {
+    font-size: 0.16rem;
+    font-family: Source Han Sans, Source Han Sans;
+    color: #615d5d;
+    line-height: 0.24rem;
+    letter-spacing: 1px;
+    .value {
+      font-size: 0.3rem;
+      font-family: PangMenZhengDao-3, PangMenZhengDao-3;
+      color: #0054a7;
+      line-height: 0.25rem;
+      letter-spacing: 0.02rem;
+    }
+  }
+
+  :global {
+    .swiper-container {
+      margin: auto;
+      width: 18.9rem;
+    }
+    .swiper-slide {
+      width: auto;
+    }
+  }
+}
+.arrowLeft {
+  width: 1.86rem;
+  height: 1.86rem;
+  position: absolute;
+  top: 0.93rem;
+  left: 0.74rem;
+  background: url('@/assets/projects/arrow-01.png') no-repeat center;
+  background-size: 100% 100%;
+}
+.arrowRight {
+  width: 1.86rem;
+  height: 1.86rem;
+  position: absolute;
+  top: 0.93rem;
+  right: 0.74rem;
+  background: url('@/assets/projects/arrow-02.png') no-repeat center;
+  background-size: 100% 100%;
+}
+.bg {
+  position: absolute;
+  top: 4.57rem;
+  width: 100%;
+  height: 3.14rem;
+  background: url('@/assets/projects/bg-01.png') no-repeat center;
+  background-size: 100% 100%;
+}

yarn.lock

@@ -4194,6 +4194,13 @@ dom-walk@^0.1.0:
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
   integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
 
+dom7@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz#a79411017800b31d8400070cdaebbfc92c1f6377"
+  integrity sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==
+  dependencies:
+    ssr-window "^2.0.0"
+
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
@@ -8076,6 +8083,13 @@ react-helmet-async@1.3.0:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
 
+react-id-swiper@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/react-id-swiper/-/react-id-swiper-4.0.0.tgz#eed938c5a4bf464a5cd7316a1bf6778581f47f2f"
+  integrity sha512-BFY8VQYgc1ECkT1Ek6MYSF8MADjWYZctdeRlMA202mjGcdjq1Bugfhg207KHTjGWKWZlY/7/nxFShqQo74RslA==
+  dependencies:
+    object-assign "^4.1.1"
+
 react-intl@3.12.1:
   version "3.12.1"
   resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-3.12.1.tgz#e9a783ea20302e9da25e4eda59e5593a43d2ec80"
@@ -8779,6 +8793,11 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
+ssr-window@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz#98c301aef99523317f8d69618f0010791096efc4"
+  integrity sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A==
+
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
@@ -9098,6 +9117,14 @@ svgo@^2.8.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
+swiper@5.4.5:
+  version "5.4.5"
+  resolved "https://registry.npmmirror.com/swiper/-/swiper-5.4.5.tgz#a350f654bf68426dbb651793824925512d223c0f"
+  integrity sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==
+  dependencies:
+    dom7 "^2.1.5"
+    ssr-window "^2.0.0"
+
 swr@^2.0.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.1.tgz#19b89a9034a62a73c30dbf06857a0a31981cd60a"