fix:'水利集成登录页开发'

src/pages/bootpage/template/constants.js

@@ -22,6 +22,7 @@ import JianshiPage from './project/jianshi';
 import XinyuanPage from './project/xinyuan';
 import SuzhouPage from './project/suzhou';
 import IntegrationNewPage from './integrationNew';
+import SLPage from './project/SL';
 export const guidePage = [
   // type 为true 则需要 功能配置 isPanda 为true
   {
@@ -79,6 +80,11 @@ export const guidePage = [
     value: 'wulaingyePage',
     previewSrc: require('@/assets/images/integration/previewImg/五粮液.png'),
   },
+  {
+    label: '水利集成登录',
+    value: 'SLPage',
+    previewSrc: require('@/assets/images/integration/previewImg/水利.png'),
+  },
   {
     label: '爱众液集成登录',
     value: 'aizhongPage',
@@ -128,4 +134,5 @@ export const BootPageTemplate = {
   wulaingyePage: WuliangyePage,
   aizhongPage: AizhongPage,
   suzhouPage: SuzhouPage,
+  SLPage:SLPage
 };

src/pages/bootpage/template/project/SL/BIContent/index.js

+/*
+ * @Author: 634665781 634665781@qq.com
+ * @Date: 2024-02-26 10:02:27
+ * @LastEditors: 634665781 634665781@qq.com
+ * @LastEditTime: 2025-04-07 17:16:26
+ * @FilePath: \civ_hydrology\src\pages\projects\reservoir\monitorAR\BIContent\index.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import React, { useCallback, useEffect, useState } from 'react';
+import styles from './index.less';
+const getContent = () => {
+  const width = document.documentElement.clientWidth;
+  const height = document.documentElement.clientHeight;
+  return { width, height };
+};
+
+const BIContent = (props) => {
+  let { type = 'base', id } = props;
+  const [size, setSize] = useState(getContent());
+  const getStyle = (size) => {
+    if (!id) {
+      if (props.children.props) {
+        id = props.children.props.id;
+      } else {
+        props.children.map((v) => {
+          !id && v?.props?.id;
+        });
+      }
+    }
+    let element = document.getElementById(id);
+    if (!element) return {};
+    let BI_width = element.offsetWidth;
+    let BI_height = element.offsetHeight;
+    console.log(BI_width,BI_height,size,'BI_width,BI_heightBI_width,BI_height,size');
+    let elements = document.querySelector('aside'); //(".panda-civ-3d-layout-slider-fixed");
+    let elements1 = document.querySelector(
+      `.panda-civ-${type}-global-page-header-header,.panda-console-base-pro-global-header`,
+    );
+    let elements2 = document.querySelector(
+      `.panda-civ-${type}-menu-item-children,.panda-console-base-tabs-nav`,
+    );
+    let Width = elements?.offsetWidth || 0;
+    let height =
+      (elements1?.offsetHeight || 0) + (elements2?.offsetHeight || 0);
+    return size
+      ? {
+          transform: `scale(${(size.width - Width) / BI_width}, ${
+            (size.height - height) / BI_height
+          })`,
+        }
+      : {};
+  };
+
+  const onResize = useCallback(() => {
+    // 将".className"替换为要获取宽高的元素的类名
+    setTimeout(() => {
+      setSize(getContent());
+    }, 100);
+  }, []);
+
+  useEffect(() => {
+    // 目标元素
+    const targetElement = document.querySelector('aside');
+    // 创建观察器配置项
+    const config = { attributes: true }; // 只关注属性变化
+    // 创建 MutationObserver 实例并传入回调函数
+    const observer = new MutationObserver(function (mutations) {
+      mutations.forEach(function (mutation) {
+        if (
+          mutation.type === 'attributes' &&
+          mutation.attributeName === 'style'
+        ) {
+          //  console.log('元素宽度发生了变化');
+          // 这里可以添加其他处理逻辑
+
+          setTimeout(() => {
+            onResize();
+          }, 300);
+        }
+      });
+    });
+
+    // 开始观察目标元素
+    targetElement&& observer.observe(targetElement, config);
+    onResize();
+    window.addEventListener('resize', onResize);
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, []);
+
+  return (
+    <div className={styles.bIContent}>
+      <div style={getStyle(size)} className={styles.shrink_box}>
+        {props.children}
+      </div>
+    </div>
+  );
+};
+
+export default BIContent;

src/pages/bootpage/template/project/SL/BIContent/index.less

+.bIContent {
+ // position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  user-select: none;
+  .shrink_box {
+    transform-origin: left top;
+  //  width: 1920px;
+   // height: 1080px;
+    width: 100%;
+    height: 100%;
+    transition: 0.3s all;
+  }
+}
\ No newline at end of file

src/pages/bootpage/template/project/SL/MySwiper.js

+/*
+ * @Author: 634665781 634665781@qq.com
+ * @Date: 2025-04-08 09:12:30
+ * @LastEditors: 634665781 634665781@qq.com
+ * @LastEditTime: 2025-04-08 16:12:47
+ * @FilePath: \CivWeb\src\pages\bootpage\template\project\SL\MySwiper.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import React, { useRaf } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import SwiperCore, { Autoplay, EffectCoverflow } from 'swiper/core';
+import { getImageUrl, searchUrl } from '@/utils/utils';
+import styles from './index.less';
+import 'swiper/swiper-bundle.min.css'; // 主样式文件‌:ml-citation{ref="1,2" data="citationList"}
+//import 'swiper/components/effect-coverflow/effect-coverflow.scss';  // 3D 效果模块样式‌:ml-citation{ref="5" data="citationList"}
+SwiperCore.use([EffectCoverflow, Autoplay]); // 手动注册模块‌:ml-citation{ref="1" data="citationList"}
+import 防汛 from './img/防汛-轮播.png';
+import 高亮 from './img/高亮框.png';
+import 灌区 from './img/灌区-轮播.png';
+
+import 河湖 from './img/河湖-轮播.png';
+
+import 水库 from './img/水库-轮播.png';
+
+import 水资源调度 from './img/水资源调度-轮播.png';
+const MySwiper = props => {
+  let { swiperRef, onLink,integrationData,loginAction } = props;
+  const data =[]
+  for(var i in integrationData) {
+    data.push({
+        id: integrationData[i].id, image:integrationData[i].backgroundImage? getImageUrl(integrationData[i].backgroundImage):'', name: integrationData[i].name
+    })
+    }
+  /*const data = [
+    { id: 1, image: 防汛, name: '防汛决策' },
+    { id: 2, image: 灌区, name: '智慧灌区' },
+    { id: 3, image: 河湖, name: '智慧河湖' },
+    { id: 4, image: 水库, name: '水库平台' },
+    { id: 5, image: 水资源调度, name: '水资源调度' },
+    // ...更多图片数据
+  ]; */
+   console.log(data,'datadatadata');
+  return (
+    <Swiper
+      onSwiper={swiper => {
+        swiperRef.current = swiper;
+
+        // 鼠标悬浮暂停效果
+        swiper.$el[0].addEventListener('mouseover', () => swiper.autoplay.stop());
+        // 鼠标移开后继续自动滚屏效果
+        swiper.$el[0].addEventListener('mouseleave', () => {
+        swiper.autoplay.start()
+        });
+      }}
+      effect="coverflow"
+      slidesPerView={2} // 同时显示3张幻灯片‌:ml-citation{ref="5" data="citationList"}
+      loop={true}
+      autoplay={{ delay: 1000*8 }}
+      slidesPerGroup={1} // 每次滑动移动1张（避免跳跃）
+      spaceBetween={2} // 卡片间距固定值
+      centeredSlides={true} // 中心对齐
+      coverflowEffect={{
+        rotate: -15, // 侧边卡片旋转角度‌:ml-citation{ref="5" data="citationList"}
+        stretch: 0, // 卡片间距拉伸比例‌:ml-citation{ref="5" data="citationList"}
+        depth: 150, // 层叠深度（值越大3D效果越明显）‌:ml-citation{ref="5" data="citationList"}
+        modifier: 2, // 效果强度系数‌:ml-citation{ref="5" data="citationList"}
+        slideShadows:false, // 启用投影效果‌:ml-citation{ref="5" data="citationList"}
+      }}
+    >
+      {data.map(item => (
+        <SwiperSlide key={item.id}>
+          <img
+            title={`点击${item.name}跳转`}
+            onClick={() => {
+              item.name ? onLink(integrationData[item.name], loginAction) : null;
+            }}
+            src= {item.image?('http://192.168.10.168:8688'+item.image):null}
+            alt={`Image ${item.id}`}
+            style={{ height: 'auto' }}
+          />
+              <span style={{ background: `url(${高亮}) center/100% 100% no-repeat` }} className={styles.阴影}></span>
+        </SwiperSlide>
+      ))}
+    </Swiper>
+  );
+};
+
+export default MySwiper;

src/pages/bootpage/template/project/SL/config.js

+/* eslint-disable prettier/prettier */
+import Icon1 from "@/assets/images/integration/wuliangye/1.png";
+import Icon2 from "@/assets/images/integration/wuliangye/2.png";
+import Icon3 from "@/assets/images/integration/wuliangye/3.png";
+import Icon4 from "@/assets/images/integration/wuliangye/4.png";
+import Icon5 from "@/assets/images/integration/wuliangye/5.png";
+import Icon6 from "@/assets/images/integration/wuliangye/6.png";
+import Icon7 from "@/assets/images/integration/wuliangye/7.png";
+import Icon8 from "@/assets/images/integration/wuliangye/8.png";
+import Icon9 from "@/assets/images/integration/wuliangye/厂区一张图.png";
+import Icon10 from "@/assets/images/integration/wuliangye/驾驶舱.png";
+import Icon11 from "@/assets/images/integration/wuliangye/三维模型.png";
+import Icon12 from "@/assets/images/integration/wuliangye/园区一张图.png";
+
+export default {
+  modalConfig: [
+    { name: '再生水厂', bgImg: Icon1 },
+    { name: '智能控制', bgImg: Icon2 },
+    { name: '设备巡检', bgImg: Icon3 },
+    { name: '维修工单', bgImg: Icon4 },
+    { name: '', bgImg: '' },
+    { name: '资产管理', bgImg: Icon5 },
+    { name: '管网GIS', bgImg: Icon6 },
+    { name: '报警中心', bgImg: Icon7 },
+    { name: '系统设置', bgImg: Icon8 }
+  ],
+  BIConfig: [
+    { name: '领导驾驶舱', icon: Icon10 },
+    {
+      name: '三维模型', icon: Icon11
+    },
+    { name: '厂区一张图', icon: Icon9 },
+    { name: '园区一张图', icon: Icon12 },
+  ]
+}
\ No newline at end of file