qiangmj / ebc-Mes

import { useEffect , useState } from "react";
import { message , Spin  } from 'antd';
import styles from "../index.less";
import { setTimeout } from "core-js";


const resources = {
  sChinese: {
    teamLogin: "班组登录",
    registerWork: "登记上班",
    teamHandover: "班组交接",
    planTask: "计划任务",
    productionExec: "生产执行",
    qualityInspection: "质量巡检",
    processInspection: "工艺巡检",
    equipmentInspection: "设备巡检",
    disassembleBoard: "拆合板",
    currentTask: "当前任务",
    taskCompletion: "任务完工",
    trayScan: "托盘扫码",
    trayUnloading: "托盘下料",
    completionClearance: "完工清场",
    teamReport: "班组报工",
    registerOffWork: "登记下班",
    working: "作业中",
    afterWork: "作业后"
  },
  sEnglish: {
    teamLogin: "Team Login",
    registerWork: "Register Work",
    teamHandover: "Team Handover",
    planTask: "Plan Task",
    productionExec: "Production Execution",
    qualityInspection: "Quality Inspection",
    processInspection: "Process Inspection",
    equipmentInspection: "Equipment Inspection",
    disassembleBoard: "Disassemble Board",
    currentTask: "Current Task",
    taskCompletion: "Task Completion",
    trayScan: "Tray Scan",
    trayUnloading: "Tray Unloading",
    completionClearance: "Completion Clearance",
    teamReport: "Team Report",
    registerOffWork: "Register Off Work",
    beforeWork: "BeforeWork",
    working: "Working",
    afterWork: "After Work"
  },
  sBig5: {
    teamLogin: "班組登錄",
    registerWork: "登記上班",
    teamHandover: "班組交接",
    planTask: "計劃任務",
    productionExec: "生產執行",
    qualityInspection: "質量巡檢",
    processInspection: "工藝巡檢",
    equipmentInspection: "設備巡檢",
    disassembleBoard: "拆合板",
    currentTask: "當前任務",
    taskCompletion: "任務完工",
    trayScan: "托盤掃碼",
    trayUnloading: "托盤下料",
    completionClearance: "完工清場",
    teamReport: "班組報工",
    registerOffWork: "登記下班",
    beforeWork: "作業中",
    working: "作業中",
    afterWork: "作業後"
  }
};

const BroadsideCardRender = (props) => {
    // 获取语言设置，默认为中文
    const sLanguage = props?.app?.userinfo?.sLanguage || 'sChinese';
  console.log(sLanguage, sLanguage);
   console.log(3888, props);
   const teamLogin = resources[sLanguage].teamLogin;
    console.log(teamLogin, 'teamLogin');

    const [ loading , setloading ] = useState(true)
    const [ flowData , setFlowData ] = useState([
        {
            work:"front",
            name:resources[sLanguage].teamLogin,
            cellSite:"1-1",
            x6:[
                ()=>({
                    source: { x: getOffset('front-1-1' , 'x-domEnd') , y: getOffset('front-1-1' , 'y-domCenter') },
                    target: { x: getOffset('front-2-1' , 'x-domStart') , y: getOffset('front-2-1' , 'y-domCenter') },
                })
            ]

        },
        {
            work:"front",
            name:resources[sLanguage].registerWork,
            cellSite:"2-1",
            x6:[
                ()=>({
                    source: { x: getOffset('front-2-1' , 'x-domCenter') , y: getOffset('front-2-1' , 'y-domEnd') },
                    target: { x: getOffset('front-2-2' , 'x-domCenter') , y: getOffset('front-2-2' , 'y-domStart') },
                })
            ]
        },
        {
            work:"front",
            name:resources[sLanguage].teamHandover,
            cellSite:"4-1",
            x6:[]
        },
        {
            work:"front",
            name:resources[sLanguage].planTask,
            cellSite:"2-2",
            x6:[
                ()=>({
                    source: { x: getOffset('front-2-2' , 'x-domCenter') , y: getOffset('front-2-2' , 'y-domEnd') },
                    target: { x: getOffset('centre-2-1' , 'x-domCenter') , y: getOffset('centre-2-1' , 'y-domStart') },
                })
            ]
        },

        {
            work:"centre",
          name:resources[sLanguage].productionExec,
            cellSite:"2-2",
            x6:[
                ()=>({
                    source: { x: getOffset('centre-2-2' , 'x-domEnd') , y: getOffset('centre-2-2' , 'y-domCenter') },
                    target: { x: getOffset('centre-3-2' , 'x-domStart') , y: getOffset('centre-3-2' , 'y-domCenter') },
                }),
                ()=>({
                    source: { x: getOffset('centre-2-2' , 'x-domStart') , y: getOffset('centre-2-2' , 'y-domCenter') },
                    target: { x: getOffset('centre-1-1' , 'x-domEnd') , y: getOffset('centre-1-1' , 'y-domCenter') },
                    vertices: [
                        {
                            x: getOffset('centre-2-2' , 'x-domStart') -  ((getOffset('centre-2-2' , 'x-domStart') - getOffset('centre-1-1' , 'x-domEnd'))/2),
                            y: getOffset('centre-2-2' , 'y-domCenter')
                        },
                        {
                            x: getOffset('centre-2-2' , 'x-domStart') -  ((getOffset('centre-2-2' , 'x-domStart') - getOffset('centre-1-1' , 'x-domEnd'))/2),
                            y: getOffset('centre-1-1' , 'y-domCenter')
                        },
                    ],
                }),
                ()=>({
                    source: {
                        x: getOffset('centre-2-2' , 'x-domStart') -  ((getOffset('centre-2-2' , 'x-domStart') - getOffset('centre-1-2' , 'x-domEnd'))/2) ,
                        y: getOffset('centre-1-2' , 'y-domCenter')
                    },
                    target: { x: getOffset('centre-1-2' , 'x-domEnd') , y: getOffset('centre-1-2' , 'y-domCenter') },
                }),
                ()=>({
                    source: {
                        x: getOffset('centre-2-2' , 'x-domStart') -  ((getOffset('centre-2-2' , 'x-domStart') - getOffset('centre-1-3' , 'x-domEnd'))/2) ,
                        y: getOffset('centre-1-3' , 'y-domCenter')
                    },
                    target: { x: getOffset('centre-1-3' , 'x-domEnd') , y: getOffset('centre-1-3' , 'y-domCenter') },
                }),
                ()=>({
                    source: { x: getOffset('centre-2-2' , 'x-domStart') , y: getOffset('centre-2-2' , 'y-domCenter') },
                    target: { x: getOffset('centre-1-4' , 'x-domEnd') , y: getOffset('centre-1-4' , 'y-domCenter') },
                    vertices: [
                        {
                            x: getOffset('centre-2-2' , 'x-domStart') -  ((getOffset('centre-2-2' , 'x-domStart') - getOffset('centre-1-4' , 'x-domEnd'))/2),
                            y: getOffset('centre-2-2' , 'y-domCenter')
                        },
                        {
                            x: getOffset('centre-2-2' , 'x-domStart') -  ((getOffset('centre-2-2' , 'x-domStart') - getOffset('centre-1-4' , 'x-domEnd'))/2)  ,
                            y: getOffset('centre-1-4' , 'y-domCenter')
                        },
                    ],
                })
            ]
        },

                {
                    work:"centre",
                    name:resources[sLanguage].qualityInspection,
                    cellSite:"1-1",
                    x6:[]
                },
                {
                    work:"centre",
                    name:resources[sLanguage].processInspection,
                    cellSite:"1-2",
                    x6:[]
                },
                {
                    work:"centre",
                    name:resources[sLanguage].equipmentInspection,
                    cellSite:"1-3",
                    x6:[]
                },
                {
                    work:"centre",
                    name:resources[sLanguage].disassembleBoard,
                    cellSite:"1-4",
                    x6:[]
                },
        {
            work:"centre",
             name:resources[sLanguage].currentTask,
            cellSite:"2-1",
            x6:[
                ()=>({
                    source: { x: getOffset('centre-2-1' , 'x-domCenter') , y: getOffset('centre-2-1' , 'y-domEnd') },
                    target: { x: getOffset('centre-2-2' , 'x-domCenter') , y: getOffset('centre-2-2' , 'y-domStart') },
                })
            ]
        },

        {
            work:"centre",
          name:resources[sLanguage].taskCompletion,
            cellSite:"2-3",
            x6:[
                ()=>({
                    source: { x: getOffset('centre-2-3' , 'x-domCenter') , y: getOffset('centre-2-3' , 'y-domEnd') },
                    target: { x: getOffset('later-2-1' , 'x-domCenter') , y: getOffset('later-2-1' , 'y-domStart') },
                })
            ]
        },
        {
            work:"centre",
          name:resources[sLanguage].trayScan,
            cellSite:"3-2",
            x6:[
                ()=>({
                    source: { x: getOffset('centre-3-2' , 'x-domCenter') , y: getOffset('centre-3-2' , 'y-domEnd') },
                    target: { x: getOffset('centre-3-3' , 'x-domCenter') , y: getOffset('centre-3-3' , 'y-domStart') },
                })
            ]
        },
        {
            work:"centre",
          name:resources[sLanguage].trayUnloading,
            cellSite:"3-3",
            x6:[
                ()=>({
                    source: { x: getOffset('centre-3-3' , 'x-domStart') , y: getOffset('centre-3-3' , 'y-domCenter') },
                    target: { x: getOffset('centre-2-3' , 'x-domEnd') , y: getOffset('centre-2-3' , 'y-domCenter') },
                }),
                ()=>({
                    source: { x: getOffset('centre-3-3' , 'x-domCenter') , y: getOffset('centre-3-3' , 'y-domEnd') },
                    target: { x: getOffset('later-3-1' , 'x-domCenter') , y: getOffset('later-3-1' , 'y-domStart') },
                })
            ]
        },

        {
            work:"later",
          name:resources[sLanguage].completionClearance,
            cellSite:"2-1",
            x6:[
                ()=>({
                    source: { x: getOffset('later-2-1' , 'x-domEnd') , y: getOffset('later-2-1' , 'y-domCenter') },
                    target: { x: getOffset('later-3-1' , 'x-domStart') , y: getOffset('later-3-1' , 'y-domCenter') },
                })
            ]
        },
        {
            work:"later",
          name:resources[sLanguage].teamReport,
            cellSite:"3-1",
            x6:[
                ()=>({
                    source: { x: getOffset('later-3-1' , 'x-domEnd') , y: getOffset('later-3-1' , 'y-domCenter') },
                    target: { x: getOffset('later-4-1' , 'x-domStart') , y: getOffset('later-4-1' , 'y-domCenter') },
                })
            ]
        },
        {
            work:"later",
          name:resources[sLanguage].registerOffWork,
            cellSite:"4-1",
            x6:[
                ()=>({
                    source: { x: getOffset('later-4-1' , 'x-domCenter') , y: getOffset('later-4-1' , 'y-domStart') },
                    target: { x: getOffset('front-4-1' , 'x-domCenter') , y: getOffset('front-4-1' , 'y-domEnd') },
                })
            ]
        },
    ])

    useEffect(()=>{
        let x6Ref
        if(document.querySelectorAll('script[id=x6]').length!==1){
            let script = document.createElement('script')
            script.type = 'text/javascript'
            script.src = '../x6.js'
            script.id = 'x6'
            document.head.appendChild(script)
            script.onload = ()=> x6Ref = lineRender();
        }else{
            x6Ref = lineRender()
        }

        // 窗口改变重绘
        window.addEventListener('resize', ()=>{
            x6Ref.clearCells()
            x6Ref.dispose()
            x6Ref = lineRender()
        });

        // 卸载
        return ()=>{

            x6Ref.clearCells();
            x6Ref.dispose();
            window.removeEventListener('resize', null);

            // alert('销毁')
        }
    },[])


    // 获取DOM边距坐标
    const getOffset = (node, type) =>{
        const { x , y } =  document.querySelector(`.loadingBox`).getBoundingClientRect()
        let { bottom , right , width , height } = document.querySelector(`[cell="${node}"]`).getBoundingClientRect()
        const obj = {
            'x-domStart': ( right - x ) - width,
            'x-domCenter': ( right - x ) - (width/2),
            'x-domEnd':  right - x ,
            'y-domStart': ( bottom - y ) - height,
            'y-domCenter': ( bottom - y ) - (height/2),
            'y-domEnd': ( bottom - y ),
        }
        return obj[type]? obj[type] : 0
    }

    // 渲染x6线条
    const lineRender = () =>{

        const graph = new window.X6.Graph({
            container:document.getElementById('container'),
            width: document.querySelector('#flowBody')?.offsetWidth,
            height: document.querySelector('#flowBody').offsetHeight
        });

        let newList = []
        flowData.forEach(e=>newList = [...newList,...e.x6.map(x=>({ get:x , stroke: e.work=='front'? '#61d9cb' : e.work=='centre'? '#6f94ef' : '#fbbb5d' }))])

        newList.forEach(e=>{

            graph.addEdge({
                ...e.get(),
                // connector: { name: 'rounded' },
                attrs:{
                    line: {
                        stroke:  e.stroke,
                        strokeDasharray: 0,
                        strokeWidth:2,
                        targetMarker: {
                            name:"block",
                            args:{
                                size: 10,
                                fill: e.stroke,
                                stroke: e.stroke,
                            },
                            offset:-1.5
                        }
                        // ,
                        // style: {
                        //     animation: `${styles.antLine} 80s infinite linear`,
                        // },
                    },
                }
            })

        })


        setloading(false)
        return graph
    }





    const itemClickEvent = item => message.success(item.name)

    const cellRender = (work,ci,ri) =>{
        let rows = flowData.find(e=>e.cellSite == `${ci+1}-${ri+1}` &&  e.work == work)
        if(rows){
            let cell = `${work}-${ci+1}-${ri+1}`;
            return (
                <div
                    key={'k'+ri}
                    onClick={()=>itemClickEvent(rows)}
                    className="cellBox hasShow"
                    cell={cell}>
                        {rows.name}
                        {/* {rows.cellSite} */}
                </div>
            )
        }
        return <div key={'k'+ri} className="cellBox"></div>
    }


    const col1CellRender = (work)=>{
        let inArr =  ['1-1','1-2','1-3','1-4'];
        let newList = flowData.filter(e=>  inArr.includes(e.cellSite) &&  e.work == work)
        return (
            <div className="colExpire">
                {
                    newList.map((e,i)=>(
                        <div
                            key={'i'+i}
                            onClick={()=>itemClickEvent(e)}
                            className="cellBox hasShow"
                            cell={`${work}-${e.cellSite}`}>
                                {e.name}
                                {/* {e.cellSite} */}
                        </div>
                    ))
                }
            </div>
        )
    }


    const itemRender = (numner,work) =>{
        let length = (new Array(4).fill(null))
        let length2 = (new Array(numner).fill(null))
        return (
            <div className={`gridView ${work}`}>
                {
                    length.map((e,i)=>(
                        <div col={i+1} key={'a'+i}>
                            {
                                (work=='centre' && i==0)? col1CellRender(work) : length2.map((e2,i2)=>cellRender(work,i,i2))
                            }
                        </div>
                    ))
                }
            </div>
        )
    }


    return (
        <div className={styles.flowChartBox}>
            <Spin spinning={loading} wrapperClassName={"loadingBox"}>
                <div id="flowBody" className="flowBody">
                    <div className="workFront">
                        <div className="texts">{resources[sLanguage].beforeWork}</div>
                        <div className="boxs">
                            {
                                itemRender(2,'front')
                            }
                        </div>
                    </div>
                    <div className="workCentre">
                        <div className="texts">{resources[sLanguage].working}</div>
                        <div className="boxs">
                            {
                                itemRender(3,'centre')
                            }
                        </div>
                    </div>
                    <div className="workLater">
                    <div className="texts">{resources[sLanguage].afterWork}</div>
                        <div className="boxs">
                            {
                                itemRender(1,'later')
                            }
                        </div>
                    </div>
                </div>
                <div id="container"></div>
            </Spin>
        </div>
    );
};

export default BroadsideCardRender;