全局样式 & projectSelect移植

package.json

@@ -2,11 +2,11 @@
   "private": true,
   "author": "xjj <645007605@qq.com>",
   "scripts": {
-    "dev": "max dev",
     "build": "max build",
+    "dev": "max dev",
     "format": "prettier --cache --write .",
-    "prepare": "husky install",
     "postinstall": "max setup",
+    "prepare": "husky install",
     "setup": "max setup",
     "start": "npm run dev"
   },
@@ -14,7 +14,10 @@
     "@ant-design/icons": "^4.7.0",
     "@ant-design/pro-components": "^2.0.1",
     "@umijs/max": "^4.0.41",
-    "antd": "^5.0.0"
+    "antd": "^5.0.0",
+    "pinyin-match": "^1.2.2",
+    "react-id-swiper": "^2.4.0",
+    "swiper": "^5.4.5"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

src/Engine/Drag/index.tsx → src/Frameworks/SysRouter/Drag/index.tsx

@@ -15,7 +15,7 @@ const defaultOptions: GT.IPageOptions = {
   background: true,
   left: '0px',
   top: '0px',
-  width: '800px',
+  width: '100%',
   height: '100%',
   name: '金科环境',
 };
@@ -389,7 +389,7 @@ class DragComponent extends React.PureComponent<any> {
     );
   }
 }
-export default function SysPage(RouteOption: GT.IRouterOptions) {
+export default function Drag(RouteOption: GT.IRouterOptions) {
   const { component, options, models } = RouteOption;
 
   const DynamicComponent = React.lazy(async () => {

src/Frameworks/SysRouter.ts → src/Frameworks/SysRouter/index.ts

@@ -1,6 +1,5 @@
-import Drag from '@/Engine/Drag';
+import Drag from '@/Frameworks/SysRouter/Drag';
 import { PAGE_KEY } from '@/Project/constants';
-import React from 'react';
 
 export const route: GT.IRouterOptions[] = [
   {
@@ -32,11 +31,6 @@ export const route: GT.IRouterOptions[] = [
     //@ts-ignore
     models: () => import('@/Project/pages/Login/models/login'),
     options: {
-      name: '登录页',
-      left: 0,
-      top: 0,
-      width: '100%',
-      height: '100%',
       header: false,
     },
   },
@@ -47,11 +41,14 @@ export const route: GT.IRouterOptions[] = [
     //@ts-ignore
     models: () => import('@/Project/pages/PlatformMenu/models/menu'),
     options: {
-      name: '首页',
-      left: 0,
-      top: 0,
-      width: '100%',
-      height: '100%',
+      header: false,
+    },
+  },
+  {
+    key: PAGE_KEY.ProjectSelection,
+    //@ts-ignore
+    component: () => import('@/Project/pages/ProjectSelect'),
+    options: {
       header: false,
     },
   },

src/Project/Functions/FuncMain.ts

@@ -16,7 +16,14 @@ export default class FuncMain extends Func<FuncMainState> {
   constructor(name: string) {
     super(name);
     super.initStates((sm) => {
+      sm.addState(
+        FuncMainState.ProjectSelection,
+        () => window.GT_APP.funcProjectSelection.setActive(true),
+        () => null,
+        () => window.GT_APP.funcProjectSelection.setActive(false),
+      );
       sm.addState(FuncMainState.Login, new LoginHandle());
+     
       sm.addState(
         FuncMainState.PlatformMenu,
         () => window.GT_APP.funcPlatformMenu.setActive(true),

src/Project/Functions/LevelAFunctions/FuncProjectSelection.ts

@@ -1,19 +1,26 @@
-import Func from "@/Engine/ECS/Function";
+import Func from '@/Engine/ECS/Function';
+import SysPage from '@/Frameworks/SysPage';
+import { PAGE_KEY } from '@/Project/constants';
 export enum FuncProjectSelectionState {
   idle,
 }
 
-export class FuncProjectSelection extends Func<FuncProjectSelectionState>{
+export default class FuncProjectSelection extends Func<FuncProjectSelectionState> {
   constructor(name: string) {
     super(name);
-    super.initStates(sm => {
-      sm.addState(FuncProjectSelectionState.idle, this.onIdleStateIn, null, this.onIdleStateExit);
-    })
+    super.initStates((sm) => {
+      sm.addState(
+        FuncProjectSelectionState.idle,
+        this.onIdleStateIn,
+        null,
+        this.onIdleStateExit,
+      );
+    });
   }
   onIdleStateIn(): void {
-
+    SysPage.add(PAGE_KEY.ProjectSelection);
   }
   onIdleStateExit(): void {
-
+    SysPage.removeByKey(PAGE_KEY.ProjectSelection);
   }
-}
+}

src/Project/Os.ts

@@ -1,15 +1,20 @@
 import FuncMain from './Functions/FuncMain';
 import FuncLogin from './Functions/LevelAFunctions/FuncLogin';
 import FuncPlatformMenu from './Functions/LevelAFunctions/FuncPlatformMenu';
+import FuncProjectSelection from './Functions/LevelAFunctions/FuncProjectSelection';
 
 class Os {
   funcMain: FuncMain;
   funcLogin: FuncLogin;
   funcPlatformMenu: FuncPlatformMenu;
+  funcProjectSelection: FuncProjectSelection;
   constructor() {
     this.funcMain = new FuncMain('FuncMain');
     this.funcLogin = new FuncLogin('FuncLogin');
     this.funcPlatformMenu = new FuncPlatformMenu('FuncPlatformMenu');
+    this.funcProjectSelection = new FuncProjectSelection(
+      'FuncProjectSelection',
+    );
   }
 }
 

src/Project/constants/index.ts

@@ -3,4 +3,8 @@ export enum PAGE_KEY {
   Access,
   Login,
   PlatformMenu,
+  ProjectSelection
 }
+
+export const BuildNodeCode = 'func-01-build'
+export const OpsNodeCode = 'func-01-build'

src/Project/pages/ProjectSelect/index.js

@@ -0,0 +1,230 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { Switch } from 'antd';
+import style from './index.less';
+import PinyinMatch from 'pinyin-match';
+import { useRequest } from 'umi';
+import { getProjectList } from '@/Project/services/project';
+import Swiper from 'react-id-swiper';
+import 'swiper/css/swiper.min.css';
+
+// console.log(Swiper);
+
+let searchTimer;
+const nodata = require('@/Project/assets/projectSelect/nodata.png');
+
+function ProjectSelect(props) {
+  const {
+    params: { subModule = 1, forbiddenModel },
+  } = props;
+  const [swiper, updateSwiper] = useState(null);
+  const [value, setValue] = useState('');
+  // const [curProjectList, SetCurProjectList] = useState([]);
+  const {
+    data: projectRes,
+    error,
+    loading,
+  } = useRequest(() => {
+    return getProjectList();
+  });
+  const projectList = projectRes?.list || [];
+  // const inputRef = useRef();
+
+  const sendProjectToUnity = (item) => {
+    // UnityAction.sendMsg('project', item);
+  };
+  const onChangeInput = (e) => {
+    // console.log(e)
+    setValue(e.target.value);
+    // clearTimeout(searchTimer);
+    // searchTimer = setTimeout(() => {
+    //   onSearch();
+    // }, 700);
+  };
+  const getPageList = (data) => {
+    let list = [];
+    var pageCount = 8;
+    let tempArr = [];
+    let curIndex = 0;
+    data.forEach((item) => {
+      if (curIndex < pageCount) {
+        tempArr.push(item);
+        curIndex += 1;
+      } else {
+        list.push(tempArr);
+        tempArr = [];
+        tempArr.push(item);
+        curIndex = 1;
+      }
+    });
+    if (tempArr.length > 0) list.push(tempArr);
+    return list;
+  };
+
+  const onChange = (value) => {
+    let check = value ? 0 : 1;
+    // setGlobalData('forbiddenModel', check);
+    // UnityAction.sendMsg('forbiddenModel', check);
+  };
+  // const params = {
+  //   navigation: {
+  //     nextEl: '.swiper-button-next',
+  //     prevEl: '.swiper-button-prev',
+  //   },
+  // };
+  const params = {
+    navigation: {
+      nextEl: '.swiper-button-next',
+      prevEl: '.swiper-button-prev',
+    },
+  };
+  const curProjectList = useMemo(() => {
+    let arr = projectList.filter((item) => {
+      let flag = item?.Stage == subModule || item?.Stage == 3;
+      if (!flag) return;
+      if (value) {
+        return PinyinMatch.match(item.Name, value);
+      }
+      return flag;
+    });
+
+    return getPageList(arr);
+  }, [projectList, value]);
+
+  useEffect(() => {
+    swiper?.update();
+    console.log(swiper);
+  }, [curProjectList]);
+  return (
+    <div className={style.background}>
+      <div className={style.content}>
+        {curProjectList.length > 0 && (
+          <Swiper {...params} getSwiper={updateSwiper}>
+            {curProjectList.map((item, index) => {
+              return (
+                <div key={index}>
+                  <Page
+                    data={item}
+                    sendProjectToUnity={sendProjectToUnity}
+                  ></Page>
+                </div>
+              );
+            })}
+          </Swiper>
+        )}
+      </div>
+      <div className={style.search}>
+        <input
+          onChange={onChangeInput}
+          type="text"
+          // ref={inputRef}
+          placeholder="请输入项目"
+        ></input>
+        <img
+          src={require('@/Project/assets/projectSelect/search_Icon.png')}
+          // onClick={() => onSearch()}
+        ></img>
+      </div>
+      <div className={style.control}>
+        <div className={style.switch}>
+          <Switch
+            onChange={onChange}
+            style={{ marginLeft: '0.1rem' }}
+            defaultChecked={forbiddenModel == 0 ? true : false}
+          />
+          加载模型
+        </div>
+      </div>
+    </div>
+  );
+}
+export default ProjectSelect;
+
+function ProjectItem(props) {
+  const { item, onDoubleClick } = props;
+  return (
+    <div
+      className={style.item}
+      onDoubleClick={() => {
+        onDoubleClick?.();
+      }}
+    >
+      <div className={style.project}>
+        <div
+          className={style.pic}
+          style={{
+            backgroundImage: `url('${item.ScreenShot || nodata}')`,
+          }}
+        >
+          {/* <div
+            className={style.hoverName}>
+            <div className={style.name}>{item.Name}</div>
+            <div className={style.nameBg}></div>
+          </div> */}
+          <div className={style.name}>{item.Name}</div>
+          <div className={style.name2}>{item.Name}</div>
+          <div className={style.province}>{item.Province}</div>
+        </div>
+        <div className={style.projectBg}></div>
+      </div>
+    </div>
+  );
+}
+
+function Page(props) {
+  const { data = [], sendProjectToUnity } = props;
+  const [currentData, setCurrentData] = useState([]);
+  useEffect(() => {
+    let list = [];
+    var pageCount = 4;
+    let tempArr = [];
+    let curIndex = 0;
+    data.forEach((item, index) => {
+      if (curIndex < pageCount) {
+        tempArr.push(item);
+        curIndex += 1;
+      } else {
+        list.push(tempArr);
+        tempArr = [];
+        tempArr.push(item);
+        curIndex = 1;
+      }
+    });
+    if (tempArr.length > 0) list.push(tempArr);
+    setCurrentData(list);
+  }, [data]);
+  return (
+    <div className={style.page}>
+      {currentData.map((item, index) => {
+        return (
+          <Line
+            key={index}
+            data={item}
+            sendProjectToUnity={sendProjectToUnity}
+          ></Line>
+        );
+      })}
+    </div>
+  );
+}
+function Line(props) {
+  const { data = [], sendProjectToUnity } = props;
+  return (
+    <div className={style.line}>
+      <div className={style.lineList}>
+        {data.map((item) => {
+          return (
+            <ProjectItem
+              key={item.ID}
+              item={item}
+              onDoubleClick={() => sendProjectToUnity(item)}
+            ></ProjectItem>
+          );
+        })}
+        <div className={`${style.item} ${style.empty}`}></div>
+        <div className={`${style.item} ${style.empty}`}></div>
+        <div className={`${style.item} ${style.empty}`}></div>
+      </div>
+      <div className={style.floor} />
+    </div>
+  );
+}

src/Project/pages/ProjectSelect/index.less

@@ -0,0 +1,314 @@
+.background {
+  padding-top: 160px;
+  background-image: url(@/Project/assets/newBackground.jpg);
+  width: 100vw;
+  height: 100vh;
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: relative;
+  padding-left: 60px;
+  padding-right: 60px;
+  overflow: hidden;
+
+  .content {
+    :global {
+      .swiper-container {
+        width: 100%;
+        height: 600px;
+        position: static;
+
+        .swiper-container .swiper-wrapper {
+          max-width: 100%;
+        }
+
+        .swiper-button-next {
+          background-image: url('@/Project/assets/projectSelect/next.png');
+          width: 90px;
+          height: 347px;
+          background-size: contain;
+          background-repeat: no-repeat;
+          top: 50%;
+          right: 60px;
+          margin-top: -130px;
+          position: absolute;
+          z-index: 999;
+          cursor: pointer;
+
+          &::after {
+            content: '';
+          }
+        }
+
+        .swiper-button-prev {
+          background-image: url('@/Project/assets/projectSelect/pre.png');
+          width: 90px;
+          height: 347px;
+          background-size: contain;
+          background-repeat: no-repeat;
+          top: 50%;
+          left: 60px;
+          margin-top: -130px;
+          position: absolute;
+          z-index: 999;
+
+          &::after {
+            content: '';
+          }
+        }
+
+        .swiper-button-prev.swiper-button-disabled,
+        .swiper-button-next.swiper-button-disabled {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .control {
+    width: 124px;
+    display: flex;
+    flex-direction: row-reverse;
+    height: 30px;
+    margin-top: 10px;
+    justify-content: end;
+
+    .switch {
+      color: #a6c5d8;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      flex-direction: row-reverse;
+      font-size: 16px;
+      position: absolute;
+      right: 100px;
+      bottom: 80px;
+      letter-spacing: 2px;
+
+      :global {
+        .ant-switch {
+          background-color: rgba(255, 255, 255, 0.5);
+
+          &::after {
+            background-image: url('@/Project/assets/projectSelect/ToggleBtn.png');
+            background-size: cover;
+            background-repeat: no-repeat;
+          }
+        }
+
+        .ant-switch-checked {
+          background-image: url('@/Project/assets/projectSelect/togbg.png');
+          background-size: cover;
+          background-repeat: no-repeat;
+        }
+      }
+    }
+  }
+}
+
+.enterBtn {
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+  border: none;
+  align-items: center;
+  width: 90px;
+  height: 30px;
+  font-size: 18px;
+  line-height: 18px;
+  /* Microsoft YaHei UI;*/
+  color: white;
+  margin-right: 20px;
+  background-image: url('@/Project/assets/projectSelect/enterBtnBG.png');
+  background-size: 100% 100%;
+
+  img {
+    padding-left: 10px;
+    height: 40%;
+  }
+}
+
+.item {
+  width: 22%;
+  height: 208px;
+  position: relative;
+
+  &.empty {
+    height: 0;
+    visibility: hidden;
+  }
+
+  &:hover {
+    .project {
+      .projectBg {
+        background-image: url('@/Project/assets/projectSelect/hoverBg.png');
+        opacity: 0.85;
+        transition: all 0.2s;
+      }
+
+      .pic {
+        .name {
+          display: none;
+        }
+
+        .name2 {
+          display: block;
+        }
+      }
+
+      .province {
+        display: block;
+        z-index: 2;
+        font-weight: 200;
+      }
+    }
+  }
+
+  .project {
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    padding: 8px;
+    position: relative;
+
+    .projectBg {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background-image: url('@/Project/assets/projectSelect/projectBg.png');
+      background-size: cover;
+      background-repeat: no-repeat;
+      top: 0;
+      left: 0;
+      opacity: 0.5;
+    }
+
+    .pic {
+      width: 100%;
+      height: 100%;
+      background-size: cover;
+      background-repeat: no-repeat;
+      position: relative;
+
+    }
+
+    .name {
+      max-width: 80%;
+      width: max-content;
+      text-align: center;
+      padding: 4px 20px;
+      background: url('@/Project/assets/projectSelect/projectSelectBg.png') no-repeat center;
+      background-size: 100% 100%;
+      position: absolute;
+      bottom: 6px;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 26px;
+      font-family: 'Microsoft YaHei UI';
+      font-weight: 400;
+      color: #e2f2f7;
+      line-height: 35px;
+    }
+
+    .name2 {
+      font-family: 'Microsoft YaHei UI';
+      color: #cbe5ff;
+      width: 100%;
+      text-align: center;
+      z-index: 2;
+      letter-spacing: 2px;
+      font-size: 30px;
+      font-weight: 300;
+      padding-left: 20px;
+      padding-right: 20px;
+      position: absolute;
+      display: block;
+      top: 50%;
+      left: 0;
+      display: none;
+      transform: translateY(-50%);
+    }
+
+    .province {
+      color: #cbe5ff;
+      font-family: 'Microsoft YaHei UI';
+      position: absolute;
+      top: 5px;
+      right: 10px;
+      font-size: 14px;
+      font-weight: 200;
+      display: none;
+    }
+  }
+}
+
+.page {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 600px;
+  align-items: center;
+
+  .line {
+    height: 248px;
+    width: 1562px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    .lineList {
+      height: 100%;
+      width: 1380px;
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      margin-left: 96px;
+    }
+
+    .floor {
+      background-image: url(@/Project/assets/projectSelect/floor.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+      width: 100%;
+      height: 76px;
+      position: absolute;
+      bottom: 0;
+    }
+  }
+}
+
+.search {
+  width: 238px;
+  height: 36px;
+  background-image: url(@/Project/assets/projectSelect/input.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  top: 50px;
+  right: 100px;
+  position: absolute;
+
+  input {
+    background: transparent;
+    background-size: 100% 100%;
+    width: 100%;
+    height: 100%;
+    border: none;
+    padding-left: 42px;
+    font-size: 16px;
+    line-height: 36px;
+    font-family: 'Microsoft YaHei UI';
+    color: #cbe5ff;
+    outline: none;
+  }
+
+  img {
+    width: 18px;
+    height: 18px;
+    left: 10px;
+    top: 10px;
+    position: absolute;
+    z-index: 100;
+    cursor: pointer;
+    pointer-events: auto;
+  }
+}

src/Project/pages/global.less

@@ -51,6 +51,7 @@ body {
   // background: transparent;
   background: #122c63;
   font-size: 14px;
+  margin: 0;
 
   :global {
     #root {

src/Project/services/project.ts

@@ -0,0 +1,8 @@
+import { request } from 'umi';
+
+//获取项目列表
+export async function getProjectList(params: any): Promise<Api.IResponseStructure> {
+  return request(`/api/v2/project`, {
+    params,
+  });
+}

src/Project/services/typings.d.ts

@@ -24,4 +24,53 @@ declare namespace Api {
     data: any;
     msg?: string;
   }
+  interface IProject {
+    Name: string;
+    ID: number;
+    Code: string;
+    Position: string;
+    Province: string;
+    ScreenShot: string;
+    Remark: string;
+    Type: string;
+    UndertakenUnit: string;
+    User: IUser[];
+    WaterName: string;
+    WaterStandard: string;
+    ServiceScope: string;
+    ServiceTime: string;
+    MainProcess: string;
+    ImageUrl: string;
+    ConstructionUnit: string;
+    CompanyName: string;
+    Accountant: number;
+    CarouselFlag: number;
+    Classification: number;
+    CompanyNumber: number;
+    ConstructAlarmFlag: number;
+    CurrentDuration: number;
+    CurrentOperatorNum: number;
+    DepartmentManager: number;
+    Duration: number;
+    ElectricalDesigner: number;
+    LeaderId: number;
+    MechanicalDesigner: number;
+    OpsAlarmFlag: number;
+    OptManager: number;
+    PreSaleManager: number;
+    PurchaseManager: number;
+    SiteManager: number;
+    Stage: number;
+    Status: number;
+    TechnicalDesigner: number;
+    WtyManager: number;
+    Leader: IUser | null;
+    WtyManagerUser: IUser | null;
+    TechnicalDesignerUser: IUser | null;
+    SiteManagerUser: IUser | null;
+    PurchaseManagerUser: IUser | null;
+    PreSaleManagerUser: IUser | null;
+    OptManagerUser: IUser | null;
+    MechanicalDesignerUser: IUser | null;
+  }
 }