Merge branch 'dev' into dev-yj

src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx

@@ -11,12 +11,13 @@ import { correntObjectNoState } from '@/store/settingAtom'
 import { useRecoilValue } from 'recoil'
 import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import { useRecoilState } from 'recoil'
-import { makersState, modelsState, modelState, pcsCheckState, selectedMakerState, seriesState } from '@/store/circuitTrestleAtom'
+import { makersState, modelsState, modelState, pcsCheckState, selectedMakerState, selectedModelsState, seriesState } from '@/store/circuitTrestleAtom'
 import { POLYGON_TYPE } from '@/common/common'
 import { useSwal } from '@/hooks/useSwal'
 import { canvasState } from '@/store/canvasAtom'
 
 import { useTrestle } from '@/hooks/module/useTrestle'
+import { selectedModuleState } from '@/store/selectedModuleOptions'
 
 const ALLOCATION_TYPE = {
   AUTO: 'auto',
@@ -33,12 +34,15 @@ export default function CircuitTrestleSetting({ id }) {
   const [selectedMaker, setSelectedMaker] = useRecoilState(selectedMakerState)
   const [series, setSeries] = useRecoilState(seriesState)
   const [models, setModels] = useRecoilState(modelsState)
+  const [selectedModels, setSelectedModels] = useRecoilState(selectedModelsState)
   const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
 
   const [tabNum, setTabNum] = useState(1)
   const [allocationType, setAllocationType] = useState(ALLOCATION_TYPE.AUTO)
   const [circuitAllocationType, setCircuitAllocationType] = useState(1)
-
+  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
+  const selectedModules = useRecoilValue(selectedModuleState)
+  const { getPcsAutoRecommendList } = useMasterController()
   const powerConditionalSelectProps = {
     tabNum,
     setTabNum,
@@ -50,13 +54,16 @@ export default function CircuitTrestleSetting({ id }) {
     setSeries,
     models,
     setModels,
+    selectedModels,
+    setSelectedModels,
+    managementState,
   }
 
   const passivityProps = {
     tabNum,
     setTabNum,
-    models,
+    selectedModels,
-    setModels,
+    setSelectedModels,
   }
   const stepUpProps = {
     tabNum,
@@ -67,19 +74,78 @@ export default function CircuitTrestleSetting({ id }) {
     setCircuitAllocationType,
   }
 
+  useEffect(() => {
+    if (!managementState) {
+      setManagementState(managementStateLoaded)
+    }
+  }, [])
+
+  const onAutoRecommend = () => {
+    if (series.filter((s) => s.selected).length === 0) {
+      swalFire({
+        title: '시리즈를 선택해 주세요.',
+        type: 'alert',
+      })
+      return
+    }
+    const roofSurfaceList = canvas
+      .getObjects()
+      .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
+      .map((obj) => {
+        return {
+          roofSurfaceId: obj.id,
+          roofSurface: canvas
+            .getObjects()
+            .filter((o) => o.id === obj.parentId)[0]
+            .directionText.replace(/[0-9]/g, ''),
+          roofSurfaceIncl: canvas.getObjects().filter((o) => o.id === obj.parentId)[0].roofMaterial.pitch,
+          moduleList: obj.modules.map((module) => {
+            return {
+              itemId: module.moduleInfo.itemId,
+            }
+          }),
+        }
+      })
+
+    const params = {
+      maxConnYn: pcsCheck.max ? 'Y' : 'N',
+      smpCirYn: pcsCheck.division ? 'Y' : 'N',
+      coldZoneYn: managementState?.coldRegionFlg === '1' ? 'Y' : 'N',
+      useModuleItemList: selectedModules.itemList.map((m) => {
+        return {
+          itemId: m.itemId,
+          mixMatlNo: m.mixMatlNo,
+        }
+      }),
+      roofSurfaceList: roofSurfaceList,
+      pcsItemList: models.map((model) => {
+        return {
+          itemId: model.itemId,
+          pcsMkrCd: model.pcsMkrCd,
+          pcsSerCd: model.pcsSerCd,
+        }
+      }),
+    }
+    getPcsAutoRecommendList(params).then((res) => {
+      if (res.data?.pcsItemList) {
+        setModels(res.data.pcsItemList)
+        setTabNum(2)
+      } else {
+        swalFire({
+          title: '파워컨디셔너를 추가해 주세요.',
+          type: 'alert',
+        })
+      }
+    })
+  }
+
   const onAutoAllocation = () => {
     let moduleStdQty = 0
     let moduleMaxQty = 0
     const selectedModels = models.filter((m) => m.selected)
 
     if (selectedModels.length === 0) {
-      moduleStdQty = models.reduce((acc, model) => {
+      onAutoRecommend()
-        return acc + parseInt(model.moduleStdQty)
-      }, 0)
-
-      moduleMaxQty = models.reduce((acc, model) => {
-        return acc + parseInt(model.moduleMaxQty)
-      }, 0)
     } else {
       moduleStdQty = selectedModels.reduce((acc, model) => {
         return acc + parseInt(model.moduleStdQty)
@@ -104,16 +170,13 @@ export default function CircuitTrestleSetting({ id }) {
   }
 
   const onPassivityAllocation = () => {
-    console.log('🚀 ~ onPassivityAllocation ~ selectedModels:', models)
+    if (selectedModels.length === 0) {
-
-    if (models.filter((m) => m.selected).length === 0) {
       swalFire({
         title: '파워 컨디셔너를 추가해 주세요.',
         type: 'alert',
       })
       return
     } else if (pcsCheck.max) {
-      const selectedModels = models.filter((m) => m.selected)
       const moduleStdQty = selectedModels.reduce((acc, model) => {
         return acc + parseInt(model.moduleStdQty)
       }, 0)

src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx

@@ -13,9 +13,23 @@ import { useRecoilValue } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'
 
 export default function PowerConditionalSelect(props) {
-  let { tabNum, setTabNum, makers, setMakers, selectedMaker, setSelectedMaker, series, setSeries, models, setModels } = props
+  let {
+    tabNum,
+    setTabNum,
+    makers,
+    setMakers,
+    selectedMaker,
+    setSelectedMaker,
+    series,
+    setSeries,
+    models,
+    setModels,
+    selectedModels,
+    setSelectedModels,
+    managementState,
+  } = props
   const [pcsCheck, setPcsCheck] = useRecoilState(pcsCheckState)
-  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
+
   const { getMessage } = useMessage()
   const [selectedRow, setSelectedRow] = useState(null)
   const globalLocale = useRecoilValue(globalLocaleStore)
@@ -23,6 +37,7 @@ export default function PowerConditionalSelect(props) {
   const selectedModules = useRecoilValue(selectedModuleState)
   const { swalFire } = useSwal()
   const modelHeader = [
+    { name: getMessage('시리즈'), width: '15%', prop: 'pcsSerNm', type: 'color-box' },
     { name: getMessage('명칭'), width: '15%', prop: 'itemNm', type: 'color-box' },
     {
       name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.rated.output')} (kW)`,
@@ -47,52 +62,47 @@ export default function PowerConditionalSelect(props) {
   ]
 
   useEffect(() => {
-    console.log('series', series)
-    console.log('models', models)
     if (makers.length === 0) {
       getPcsMakerList().then((res) => {
         setMakers(res.data)
       })
     }
-    console.log('🚀 ~ useEffect ~ selectedModules:', selectedModules)
-    if (!managementState) {
-      setManagementState(managementStateLoaded)
-    }
-    // promiseGet({ url: `/api/object/${correntObjectNo}/detail` }).then((res) => {
-    //   console.log('🚀 ~ useEffect ~ /api/object/${correntObjectNo}/detail:', res)
-    //   // coldRegionFlg-한랭지사양, conType// 계약조건(잉여~,전량)
-    // })
-    // return () => {
-    //   console.log('🚀 ~ useEffect ~ PowerConditionalSelect unmount:', makers, selectedMaker)
-    //   setMakerData({ makers, selectedMaker })
-    //   setSeries({ series: seriesList, selectedSeries })
-    //   setModels({ models, selectedModels })
-    // }
   }, [])
 
-  useEffect(() => {
+  const checkValidation = () => {
-    console.log('🚀 ~ PowerConditionalSelect ~ selectedMaker:', selectedMaker)
+    const checkedSeries = series.filter((s) => s.selected)
-    if (selectedMaker) {
+    if (checkedSeries.length === 0) {
-      setModels(null)
+      swalFire({
-      if (series.length === 0)
+        title: 'PCS 시리즈를 선택해 주세요.',
-        getPcsMakerList(selectedMaker).then((res) => {
+        icon: 'warning',
-          setSeries(
+      })
-            res.data.map((series) => {
+      return false
-              // return { ...series, selected: isNullOrUndefined(series.selected) ? false : series.selected }
+    } else if (checkedSeries.length === 1) {
-              return { ...series, selected: false }
+      if (checkedSeries[0].pcsMkrMultiType === 'SINGLE-P' && checkedSeries[0].pcsSerParallelYn === 'Y') {
-            }),
+        swalFire({
-          )
+          title: '병설은 단독으로 안 됨',
+          icon: 'warning',
         })
       }
-  }, [selectedMaker])
+      return false
+    }
+    return true
+  }
 
-  useEffect(() => {
+  const onCheckSeries = (data) => {
-    console.log('🚀 ~ useEffect ~ series:', series)
+    const copySeries = series.map((s) => {
-    if (series.filter((s) => s.selected).length === 0) return
+      return {
-    const pcsMkrCd = series.filter((s) => s.selected)[0]?.pcsMkrCd
+        ...s,
-    const pcsSerList = series
+        selected: s.pcsSerCd === data.pcsSerCd ? !s.selected : s.selected,
-      .filter((series) => series.selected)
+      }
-      .map((series) => {
+    })
+    setSeries(copySeries)
+    handleSetmodels(copySeries.filter((s) => s.selected))
+  }
+
+  const handleSetmodels = (series) => {
+    const pcsMkrCd = series[0]?.pcsMkrCd
+    const pcsSerList = series.map((series) => {
       return { pcsSerCd: series.pcsSerCd }
     })
     const moduleItemList = selectedModules.itemList?.map((module) => {
@@ -103,7 +113,6 @@ export default function PowerConditionalSelect(props) {
     })
     getPcsModelList({ pcsMkrCd, pcsSerList, moduleItemList }).then((res) => {
       if (res?.result.code === 200 && res?.data) {
-        console.log('🚀 ~ useEffect ~ res:', res.data)
         setModels(
           res.data.map((model) => {
             return {
@@ -111,21 +120,20 @@ export default function PowerConditionalSelect(props) {
               moduleStdQty: parseInt(model.moduleStdQty),
               moduleMaxQty: parseInt(model.moduleMaxQty),
               code: uuidv4(),
-              selected: false,
             }
           }),
         )
+        return
       }
-    })
-  }, [series])
 
-  const onCheckSeries = (series) => {
+      setModels([])
-    setSeries((prev) => prev.map((s) => ({ ...s, selected: s.pcsSerCd === series.pcsSerCd ? !s.selected : s.selected })))
+      setSelectedModels([])
+    })
   }
 
   const onAddSelectedModel = () => {
     if (selectedRow === null) return
-    if (models.filter((m) => m.selected).length === 3) {
+    if (selectedModels.length === 3) {
       swalFire({
         title: '최대 3개까지 선택할 수 있습니다.',
         icon: 'warning',
@@ -133,41 +141,29 @@ export default function PowerConditionalSelect(props) {
 
       return
     }
-    setModels(
+    setSelectedModels([...selectedModels, selectedRow])
-      models.map((model) => {
-        if (model.code === selectedRow.code) {
-          return {
-            ...model,
-            selected: true,
-          }
-        }
-        return {
-          ...model,
-        }
-      }),
-    )
     setSelectedRow(null)
   }
 
   const onRemoveSelectedModel = (model) => {
-    // setSelectedModels(selectedModels.filter((m) => m.code !== model.code))
     setModels(models.map((m) => ({ ...m, selected: m.code !== model.code ? m.selected : false })))
   }
 
-  // useEffect(() => {
+  const onChangeMaker = (option) => {
-  //   console.log('🚀 ~ useEffect ~ selectedModels:', selectedModels)
+    if (option) {
-  //   const selectedModelsIds = selectedModels.map((model) => model.code)
+      setModels(null)
+      setSelectedMaker(option)
+
+      getPcsMakerList(option).then((res) => {
+        setSeries(
+          res.data.map((series) => {
+            return { ...series, selected: false }
+          }),
+        )
+      })
+    }
+  }
 
-  //   setModels(
-  //     models.map((model) => {
-  //       return {
-  //         ...model,
-  //         selected: selectedModelsIds.includes(model.code),
-  //       }
-  //     }),
-  //   )
-  //   setModel({ ...model, selectedModels: selectedModels })
-  // }, [selectedModels])
   return (
     <>
       <div className="outline-form mb15">
@@ -182,7 +178,7 @@ export default function PowerConditionalSelect(props) {
             sourceKey="pcsMkrCd"
             targetKey="pcsMkrCd"
             value={selectedMaker}
-            onChange={(option) => setSelectedMaker(option)}
+            onChange={(option) => onChangeMaker(option)}
           />
         </div>
         {managementState?.coldRegionFlg === '1' && (
@@ -194,7 +190,7 @@ export default function PowerConditionalSelect(props) {
           <div className="circuit-check-inner overflow">
             {series?.map((series, index) => (
               <div className="d-check-box pop sel">
-                <input type="checkbox" id={`"ch0"${index}`} onClick={() => onCheckSeries(series)} checked={series.selected} />
+                <input type="checkbox" id={`"ch0"${index}`} onChange={() => onCheckSeries(series)} checked={series.selected} />
                 <label htmlFor={`"ch0"${index}`}>{globalLocale === 'ko' ? series.pcsSerNm : series.pcsSerNmJp}</label>
               </div>
             ))}
@@ -216,9 +212,7 @@ export default function PowerConditionalSelect(props) {
                   </tr>
                 </thead>
                 <tbody>
-                  {models
+                  {models?.map((model, index) => (
-                    ?.filter((model) => !model.selected)
-                    .map((model, index) => (
                     <tr key={index} onClick={() => setSelectedRow(model)} className={model === selectedRow ? 'on' : ''}>
                       {modelHeader.map((header) => (
                         <td>{model[header.prop]}</td>
@@ -235,9 +229,7 @@ export default function PowerConditionalSelect(props) {
             </button>
           </div>
           <div className="circuit-data-form">
-            {models
+            {selectedModels?.map((model) => (
-              ?.filter((m) => m.selected)
-              ?.map((model) => (
               <span className="normal-font">
                 {model.itemNm} <button className="del" onClick={() => onRemoveSelectedModel(model)}></button>
               </span>

src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx

@@ -8,38 +8,68 @@ import { useContext, useEffect, useState } from 'react'
 import { useRecoilValue } from 'recoil'
 
 export default function PassivityCircuitAllocation(props) {
-  const { tabNum, setTabNum, models, setModels } = props
+  const { tabNum, setTabNum, selectedModels } = props
   const { getMessage } = useMessage()
   const canvas = useRecoilValue(canvasState)
   const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
   const selectedModules = useRecoilValue(selectedModuleState)
   const moduleStatistics = useRecoilValue(moduleStatisticsState)
   // const [totalWpout, setTotalWpout] = useState(0)
-  const [selectedPcs, setSelectedPcs] = useState(models.filter((model) => model.selected)[0])
+  const [selectedPcs, setSelectedPcs] = useState(selectedModels[0])
   const { header, rows: row } = moduleStatistics
   const [headers, setHeaders] = useState(header)
   const [rows, setRows] = useState(row)
   const [footer, setFooter] = useState(['합계'])
+  const [circuitNumber, setCircuitNumber] = useState(1)
+  const [targetModules, setTargetModules] = useState([])
+
+  useEffect(() => {
+    console.log('🚀 ~ PassivityCircuitAllocation ~ targetModules:', targetModules)
+  }, [targetModules])
+
+  const handleTargetModules = (obj) => {
+    if (!Array.isArray(targetModules)) {
+      setTargetModules([])
+      return
+    }
+
+    setTargetModules((prev) => {
+      if (prev.includes(obj.id)) {
+        obj.set({ strokeWidth: 0.3 })
+        return prev.filter((o) => o !== obj.id)
+      } else {
+        obj.set({ strokeWidth: 2 })
+        return [...prev, obj.id]
+      }
+    })
+
+    canvas.renderAll()
+  }
 
   useEffect(() => {
     setSurfaceInfo()
     if (!managementState) {
       setManagementState(managementStateLoaded)
     }
+    const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
+
+    modules.forEach((obj) => {
+      obj.on('mousedown', (e) => handleTargetModules(obj))
+    })
+
+    return () => {
+      canvas
+        .getObjects()
+        .filter((obj) => obj.name === POLYGON_TYPE.MODULE)
+        .forEach((obj) => {
+          obj.set({ strokeWidth: 0.3 })
+          obj.off('mousedown')
+        })
+      canvas.renderAll()
+    }
   }, [])
 
-  useEffect(() => {
-    console.log('🚀 ~ useEffect ~ headers:', headers)
-  }, [headers])
-
-  useEffect(() => {
-    console.log('🚀 ~ useEffect ~ rows:', rows)
-  }, [rows])
-
   const setSurfaceInfo = () => {
-    console.log('🚀 ~ setSurfaceInfo ~ headers:', headers)
-    console.log('🚀 ~ setSurfaceInfo ~ rows:', rows)
-    // console.log('🚀 ~ setSurfaceInfo ~ surfaces:', surfaces)
     const surfaces = canvas.getObjects().filter((obj) => POLYGON_TYPE.MODULE_SETUP_SURFACE === obj.name)
     setHeaders([header[0], { name: '회로', prop: 'circuit' }, ...header.slice(1)])
     setRows(
@@ -63,7 +93,6 @@ export default function PassivityCircuitAllocation(props) {
         totals[header[3]] += +row[header[3]]
       }
     })
-    console.log(totals)
     setFooter([
       ...['합계', ''],
       ...Object.keys(totals).map((key) => {
@@ -113,6 +142,39 @@ export default function PassivityCircuitAllocation(props) {
     //   rows: rows,
     // })
   }
+
+  const handleCircuitNumberFix = () => {
+    console.log('🚀 ~ handleCircuitNumberFix ~ circuitNumber:', circuitNumber)
+    canvas
+      .getObjects()
+      .filter((obj) => targetModules.includes(obj.id))
+      .forEach((obj) => {
+        obj.set({
+          circuit: circuitNumber,
+        })
+        canvas.add(
+          new fabric.Text(`(${circuitNumber})`, {
+            left: obj.left + obj.width / 2,
+            top: obj.top + obj.height / 2,
+            fill: 'red',
+            fontSize: 20,
+            width: obj.width,
+            height: obj.height,
+            textAlign: 'center',
+            originX: 'center',
+            originY: 'center',
+            name: 'circuitNumber',
+            parentId: obj.id,
+          }),
+        )
+        canvas.renderAll()
+        console.log(obj)
+      })
+    setTargetModules([])
+    setCircuitNumber(circuitNumber + 1)
+    canvas.renderAll()
+  }
+
   return (
     <>
       <div className="properties-setting-wrap outer">
@@ -126,22 +188,26 @@ export default function PassivityCircuitAllocation(props) {
                 <table>
                   <thead>
                     <tr>
-                      {headers.map((header) => (
+                      {headers.map((header, index) => (
-                        <th key={'header' + header.prop}>{header.name}</th>
+                        <th key={'header' + index}>{header.name}</th>
                       ))}
                     </tr>
                   </thead>
                   <tbody>
                     {rows.map((row, index) => (
                       <tr key={'row' + index}>
-                        {headers.map((header) => (
+                        {headers.map((header, i) => (
-                          <td className="al-c">{row[header.prop]}</td>
+                          <td className="al-c" key={'rowcell' + i}>
+                            {row[header.prop]}
+                          </td>
                         ))}
                       </tr>
                     ))}
                     <tr>
-                      {footer.map((footer) => (
+                      {footer.map((footer, index) => (
-                        <td className="al-c">{footer}</td>
+                        <td className="al-c" key={'footer' + index}>
+                          {footer}
+                        </td>
                       ))}
                     </tr>
                   </tbody>
@@ -157,9 +223,7 @@ export default function PassivityCircuitAllocation(props) {
                 <div className="bold-font">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional')}</div>
               </div>
               <div className="hexagonal-item">
-                {models
+                {selectedModels.map((model, index) => (
-                  .filter((model) => model.selected)
-                  .map((model, index) => (
                   <div className="d-check-radio pop mb10" key={'model' + index}>
                     <input
                       type="radio"
@@ -201,9 +265,18 @@ export default function PassivityCircuitAllocation(props) {
                 {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num')}
               </span>
               <div className="input-grid mr5" style={{ width: '70px' }}>
-                <input type="text" className="input-origin block" />
+                <input
+                  type="text"
+                  className="input-origin block"
+                  value={circuitNumber}
+                  min={1}
+                  max={99}
+                  onChange={(e) => setCircuitNumber(e.target.value)}
+                />
               </div>
-              <button className="btn-frame roof">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num.fix')}</button>
+              <button className="btn-frame roof" onClick={() => handleCircuitNumberFix()}>
+                {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num.fix')}
+              </button>
             </div>
           </div>
           <div className="circuit-right-wrap">

src/hooks/common/useMasterController.js

@@ -162,8 +162,7 @@ export function useMasterController() {
    * @returns
    */
   const getPcsAutoRecommendList = async (params = null) => {
-    const paramString = getQueryString(params)
+    return await post({ url: '/api/v1/master/getPcsAutoRecommendList', data: params }).then((res) => {
-    return await post({ url: '/api/master/pcsAutoRecommendList', data: params }).then((res) => {
       console.log('🚀🚀 ~ getPcsAutoRecommendList ~ res:', res)
       return res
     })

src/hooks/useCanvasEvent.js

@@ -198,7 +198,7 @@ export function useCanvasEvent() {
 
       if (selected?.length > 0) {
         selected.forEach((obj) => {
-          if (obj.type === 'QPolygon') {
+          if (obj.type === 'QPolygon' && obj.name !== 'module') {
             obj.set({ stroke: 'red' })
           }
         })
@@ -235,7 +235,7 @@ export function useCanvasEvent() {
 
       if (selected?.length > 0) {
         selected.forEach((obj) => {
-          if (obj.type === 'QPolygon') {
+          if (obj.type === 'QPolygon' && obj.name !== 'module') {
             obj.set({ stroke: 'red' })
           }
         })

src/store/circuitTrestleAtom.js

@@ -17,16 +17,16 @@ export const seriesState = atom({
   default: [],
 })
 
-export const selectedSeriesState = atom({
-  key: 'selectedSeriesState',
-  default: null,
-})
-
 export const modelsState = atom({
   key: 'modelState',
   default: [],
 })
 
+export const selectedModelsState = atom({
+  key: 'selectedModelsState',
+  default: [],
+})
+
 export const pcsCheckState = atom({
   key: 'divisionCircuitState',
   default: { division: true, max: false },