feat: 熊猫智慧水务一体化解决方案数据接入

src/api/service/base.js

@@ -42,6 +42,7 @@ export const API = {
   IS_OPEN_YANSHI: '/PandaCore/GCK/Demonstrate/IsOpenYanshi', // 获取是否开启演示模式服务
   GET_WEB_CONFIG: '/PandaOMS/OMS/GetIntegratedLoginbyName',
   GET_WEB_TICKET: '/PandaOMS/OMS/GetTicketByToken',
+  GET_ACCOUNT_PAGE_LIST: '/PandaWorkFlow/WorkFlow/AccountManage/GetAccountPageList',
 };
 
 const services = {
@@ -219,6 +220,11 @@ const services = {
     method: constants.REQUEST_METHOD_GET,
     type: constants.REQUEST_HTTP,
   },
+  getAccountPageList: {
+    url: API.GET_ACCOUNT_PAGE_LIST,
+    method: constants.REQUEST_METHOD_POST,
+    type: constants.REQUEST_METHOD_POST,
+  },
 };
 
 export const searchAutoCity = keywords => {

src/pages/system/demonstration/components/Bottom/index.js

@@ -3,15 +3,16 @@
  * @Author: hongmye
  * @Date: 2023-12-26 18:34:42
  */
-import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
-import { Button, Image } from 'antd';
+import { ConfigProvider, Image, Tooltip } from 'antd';
 import React, { useMemo, useEffect, useState } from 'react';
 import classNames from 'classnames';
+import zhCN from 'antd/es/locale/zh_CN';
 import DataCarousel from '../DataCarousel';
 import styles from './index.less';
 const BottomItem = props => {
-  const { title = '', list = [] } = props;
-  const [listData, setListData] = useState([]);
+  const { title = '', listData = [], configData = [] } = props;
+  const [list, setList] = useState([]);
+  const [infoData, setInfoData] = useState({});
   const renderNum = (num, type) => {
     const numStr = num ? num.toString() : '0';
     const arr = numStr.split('');
@@ -29,17 +30,26 @@ const BottomItem = props => {
         {row.map((col, cIndex) => (
           <div key={`${rindex}-${cIndex}`} className={styles.list_item}>
             <div className={styles.list_item_img_wrap}>
-              <div className={styles.list_item_img}>
-                <Image />
+              <div className={classNames(styles.list_item_img, 'list_item_img')}>
+                <ConfigProvider locale={zhCN}>
+                  <Image
+                    src={`https://panda-water.cn/CityInterface/rest/services/filedownload.svc/download/${
+                      col['项目图片']
+                    }`}
+                    style={{ height: '100px', width: '100%', overflow: 'hidden' }}
+                  />
+                </ConfigProvider>
               </div>
-              <div className={styles.list_item_img_tip} />
+              {col['重要程度'] === '样板' ? <div className={styles.list_item_img_tip} /> : null}
             </div>
             <div className={styles.list_item_info_wrap}>
-              <div className={styles.list_item_info_tip} type="节水">
-                节水
+              <div className={styles.list_item_info_tip} type={col['所属行业']}>
+                {col['所属行业']}
+              </div>
+              <div className={styles.list_item_info_name}>
+                <Tooltip title={col['客户名称']}>{col['客户名称']}</Tooltip>
               </div>
-              <div className={styles.list_item_info_name}>崇左市自来水厂崇左市自来水厂</div>
-              <div className={styles.list_item_info_address}>广西</div>
+              <div className={styles.list_item_info_address}>{col['城市']}</div>
             </div>
           </div>
         ))}
@@ -62,11 +72,40 @@ const BottomItem = props => {
     return reArr;
   };
   useEffect(() => {
-    setTimeout(() => {
-      const arr = Array(44).fill({});
-      setListData(spliceArr(arr, 2));
-    }, 1000);
-  }, []);
+    const arr = [];
+    listData.forEach(i => {
+      let str = i['所属城市'];
+      if (i['所属城市']) {
+        const temp = i['所属城市'].split('/');
+        str = temp[1];
+        if (str[str.length - 1] === '市') {
+          str = str.slice(0, str.length - 1);
+        } else {
+          str = temp[0];
+        }
+      }
+      if (str[str.length - 1] === '市') {
+        str = str.slice(0, str.length - 1);
+      }
+      i['城市'] = str;
+      arr.push(i);
+    });
+    setList(spliceArr(arr, 2));
+  }, [listData]);
+  useEffect(() => {
+    const obj = {
+      项目数量: '',
+      服务客户: '',
+      覆盖省份: '',
+    };
+    configData.forEach(c => {
+      if (obj[c['名称']] === '') {
+        obj[c['名称']] = c['数值'];
+      }
+    });
+
+    setInfoData(obj);
+  }, [configData]);
   return (
     <div className={classNames(styles.bottom_item, 'demo_bottom_item')}>
       <div className={styles.left}>
@@ -79,14 +118,14 @@ const BottomItem = props => {
             <div className={styles.l_item_title} type="项目数量">
               项目数量：
             </div>
-            <div className={styles.l_item_num_list}>{renderNum(198, '项目数量')}</div>
+            <div className={styles.l_item_num_list}>{renderNum(infoData['项目数量'], '项目数量')}</div>
             <div className={styles.l_item_num_unit}>个</div>
           </div>
           <div className={styles.l_item}>
             <div className={styles.l_item_title} type="服务客户">
               服务客户：
             </div>
-            <div className={styles.l_item_num_list}>{renderNum(255, '服务客户')}</div>
+            <div className={styles.l_item_num_list}>{renderNum(infoData['服务客户'], '服务客户')}</div>
             <div className={styles.l_item_num_unit} type="add">
               +
             </div>
@@ -95,23 +134,25 @@ const BottomItem = props => {
             <div className={styles.l_item_title} type="覆盖省份">
               覆盖省份：
             </div>
-            <div className={styles.l_item_num_list}>{renderNum(30, '覆盖省份')}</div>
+            <div className={styles.l_item_num_list}>{renderNum(infoData['覆盖省份'], '覆盖省份')}</div>
             <div className={styles.l_item_num_unit} type="add">
               +
             </div>
           </div>
         </div>
       </div>
+
       <div className={styles.center}>
         <DataCarousel
           gap={1}
-          autoplay={3000}
+          autoplay={5000}
           itemHeight={270}
-          list={listData}
+          list={list}
           renderItem={renderCol}
           config={{
             direction: 'horizontal',
             width: 212,
+            loop: false,
           }}
         />
       </div>

src/pages/system/demonstration/components/Bottom/index.less

@@ -142,7 +142,7 @@
         .list_item_img_wrap {
             width: 100%;
             height: 100px;
-            background: #2474B8;
+            overflow: hidden;
             position: relative;
 
             .list_item_img_tip {
@@ -174,11 +174,11 @@
                 background: url('@{imgSrc}/供水.png') no-repeat center/100% 100%;
             }
 
-            .list_item_info_tip[type='农水'] {
+            .list_item_info_tip[type='农饮水'] {
                 background: url('@{imgSrc}/农水.png') no-repeat center/100% 100%;
             }
 
-            .list_item_info_tip[type='节水'] {
+            .list_item_info_tip[type='水利'] {
                 background: url('@{imgSrc}/节水.png') no-repeat center/100% 100%;
             }
 
@@ -234,5 +234,18 @@
                 width: 212px;
             }
         }
+
+        .list_item_img {
+            .panda-console-base-image {
+                width: 100%;
             }
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+
+        }
+    }
+
 }
\ No newline at end of file

src/pages/system/demonstration/components/Left/index.js

@@ -5,17 +5,16 @@
  */
 import { Button } from 'antd';
 import React, { useMemo, useEffect, useState, memo } from 'react';
+import LoginAction from '@/pages/user/login/login';
 import { schemeData } from '../configData';
+
 import styles from './index.less';
 let timer;
 const LeftItem = props => {
   const { title = '', setSelectKey, selectKey } = props;
+  const [loginAction, setAction] = useState(() => new LoginAction(props));
 
-  const onSelect = row => {
-    if (row.title && row.title !== selectKey) {
-      setSelectKey(row.title);
-    }
-  };
+  const onSelect = row => {};
 
   const onMouseEnter = (item, index) => {
     if (timer) {

src/pages/system/demonstration/components/Right/index.js

@@ -3,23 +3,24 @@
  * @Author: hongmye
  * @Date: 2023-12-26 18:34:42
  */
-import { Button } from 'antd';
 import React, { useMemo, useEffect, useState, memo } from 'react';
-import { productData } from '../configData';
 import styles from './index.less';
 const RightItem = props => {
-  const { title = '' } = props;
-  const [selectKey, setSelectKey] = useState('');
+  const { listData } = props;
   const renderRow = (row, index) => {
     const rIndex = `r_${index % 7}`;
 
     return (
-      <div className={styles.r_list_item} key={row.title} rIndex={rIndex}>
-        <div className={styles.r_list_item_title}>{row.title}</div>
+      <div className={styles.r_list_item} key={row['产品名称']} rIndex={rIndex}>
+        <div className={styles.r_list_item_title}>{row['产品名称']}</div>
         <div className={styles.r_list_item_tip} />
       </div>
     );
   };
+  const renderList = useMemo(
+    () => <div className={styles.r_list}>{listData.map((row, index) => renderRow(row, index))}</div>,
+    [listData],
+  );
   useEffect(() => {}, []);
   return (
     <div className={styles.right_item}>
@@ -27,7 +28,7 @@ const RightItem = props => {
         <div className={styles.r_title_sub}>熊猫智慧水务</div>
         <div className={styles.r_title}>新产品动态：</div>
       </div>
-      <div className={styles.r_list}>{productData.map((row, index) => renderRow(row, index))}</div>
+      {renderList}
     </div>
   );
 };

src/pages/system/demonstration/components/VideoItem/index.js

@@ -17,7 +17,7 @@ import 'swiper/components/pagination/pagination.min.css';
 import 'swiper/components/effect-coverflow/effect-coverflow.min.css';
 import 'swiper/swiper.min.css';
 import styles from './index.less';
-const autoplay = 0;
+const autoplay = 15000;
 SwiperCore.use([Autoplay, Pagination, Navigation, Mousewheel, EffectCoverflow]);
 const VideoItem = (props, ref) => {
   const { selectKey = '' } = props;

src/pages/system/demonstration/index.js

@@ -11,6 +11,7 @@ import enterImg from '@/assets/demonstration/进入.png';
 import { Button } from 'antd';
 import React, { useMemo, useState, useEffect, useRef } from 'react';
 import { cloneDeep, debounce } from 'lodash';
+import { appService } from '@/api';
 import useFullScreen from './components/useFullScreen';
 import styles from './index.less';
 import LeftItem from './components/Left';
@@ -20,6 +21,7 @@ import BottomItem from './components/Bottom';
 import { platformData } from './components/configData';
 const boxWidth = 1920;
 const boxHeight = 911;
+const projectType = ['供水', '排水', '农饮水', '水利'];
 const Demonstration = props => {
   const onLineUrl = window.globalConfig?.mainserver || 'https://panda-water.cn/';
   const showFullScreen = true;
@@ -29,7 +31,10 @@ const Demonstration = props => {
     scale: 1,
     boxHeight: 911,
   });
-  const [pattern, setPattern] = useState(false);
+  const [projectData, setProjectData] = useState([]);
+  const [configData, setConfigData] = useState([]);
+  const [productData, setProductData] = useState([]);
+  const [pattern, setPattern] = useState(true);
   const [ref, isFullscreen, handleFullScreen, handleExitFullScreen] = useFullScreen(false);
   // 退出
   const exit = () => {
@@ -85,7 +90,46 @@ const Demonstration = props => {
       });
     }
   };
+  const getData = () => {
+    const req1 = appService.getAccountPageList({
+      accountName: '项目案例配置表',
+      isAll: true,
+      sortFields: '重要程度',
+      direction: 'desc',
+    });
+    const req2 = appService.getAccountPageList({
+      accountName: '首页配置台账',
+      isAll: true,
+    });
+    const req3 = appService.getAccountPageList({
+      accountName: '新产品配置',
+      isAll: true,
+      sortFields: '排序',
+      direction: 'asc',
+      queryWheres: [
+        {
+          field: '是否显示',
+          type: '等于',
+          value: '是',
+        },
+      ],
+    });
+    Promise.all([req1, req2, req3]).then(result => {
+      const dataStr1 = result[0]?.data?.jsonData || '';
+      let data1 = dataStr1 ? JSON.parse(dataStr1) : [];
+      data1 = data1.filter(d => projectType.includes(d['所属行业']));
+      const dataStr2 = result[1]?.data?.jsonData || '';
+      const data2 = dataStr2 ? JSON.parse(dataStr2) : [];
+      const dataStr3 = result[2]?.data?.jsonData || '';
+      const data3 = dataStr3 ? JSON.parse(dataStr3) : [];
+      console.log('🚀 ~ data3:', data1, data2, data3);
+      setProjectData(data1);
+      setConfigData(data2);
+      setProductData(data3);
+    });
+  };
   useEffect(() => {
+    getData();
     window.addEventListener('resize', debounce(onResize, 300));
     onResize();
     return () => {
@@ -137,7 +181,7 @@ const Demonstration = props => {
             <VideoItem ref={videoRef} selectKey={selectKey} setSelectKey={setSelectKey} onLineUrl={onLineUrl} />
           </div>
           <div className={styles.row_r}>
-            <RightItem />
+            <RightItem listData={productData} />
           </div>
         </div>
         <div className={styles.center_wrap}>
@@ -145,7 +189,7 @@ const Demonstration = props => {
           <div className={styles.center}>{renderCenter}</div>
         </div>
         <div className={styles.bottom}>
-          <BottomItem />
+          <BottomItem listData={projectData} configData={configData} />
         </div>
       </div>
     </div>