Commit @0e278d41baebb6a933b143e5e4bbafbb581fc5e0

박정하 03-05

250305 박정하 데이터 활용 관리 내 데이터 초기화 수정

@0e278d41baebb6a933b143e5e4bbafbb581fc5e0

8a147d5

0e278d4

client/views/component/SplitterLayout.vue

--- client/views/component/SplitterLayout.vue

+++ client/views/component/SplitterLayout.vue


 <template>
   <Splitter :class="{ 'content-box': true, active: splitInfo.layout_nm == selectLayout.layout_nm }" :layout="splitInfo.layout_type" @resizeend="updateSizes" @Click.stop="clickLayout(splitInfo)">
-    <SplitterPanel class="content-box" v-if="splitInfo.children.length < 1">
+    <SplitterPanel class="content-box padding-1" v-if="splitInfo.children.length < 1" :style="$createStyleSheet(splitInfo.styleSheet)">
       <ComponentTitle v-if="splitInfo.useSj" :title="splitInfo.layoutSj" />
       <BaseComponent v-else-if="splitInfo.se == 'component'" :component="splitInfo.component" @onChange="onChange" @Click.stop="clickLayout(splitInfo)" />
     </SplitterPanel>
     <template v-else>
-      <SplitterPanel class="content-box" v-for="(item, idx) of splitInfo.children" :key="idx">
+      <SplitterPanel class="content-box" v-for="(item, idx) of splitInfo.children" :key="idx" :style="$createStyleSheet(splitInfo.styleSheet)">
         <SplitterLayout :splitInfo="item" :selectLayout="selectLayout" @onChange="onChange" />
       </SplitterPanel>
     </template>

8a147d5

0e278d4

client/views/component/chart/chartDataTransform.js

--- client/views/component/chart/chartDataTransform.js

+++ client/views/component/chart/chartDataTransform.js


 
 const chartDataTransform = {
-    /**
-     * rowdata를 사용자 선택에 맞게 반환
-     * @param rowdata : 원본 데이터
-     * @param x : x축 객체 데이터
-     * @param yArr : y축 배열 데이터
-     */
-    createData: function(rowdata, xAxisList, yAxisList, group){
-        let resultArr = [];
-        let x;
-        //x축 객체 배열 데이터를 가져와서 columnNm 값을 가져옴
-        if(xAxisList.length !== 0){
-            x = xAxisList[0].columnIdx;
+  selectColumnIndex(dataTable, column) {
+    for (let i = 0; i < dataTable.columnDatas.length; i++) {
+      if (column == dataTable.columnDatas[i]) {
+        return i;
+      }
+    }
+    return null;
+  },
+  /**
+   * rowdata를 사용자 선택에 맞게 반환
+   * @param rowdata : 원본 데이터
+   * @param x : x축 객체 데이터
+   * @param yArr : y축 배열 데이터
+   */
+  createData: function (dataTable, xAxisList, yAxisList, group) {
+    let xAxis = null;
+    let yAxisArr = [];
+    let result = [];
+
+    if (dataTable.rowData.length > 0 && xAxisList.length > 0 && yAxisList.length > 0) {
+      xAxis = this.selectColumnIndex(dataTable, xAxisList[0]);
+      if (xAxis == null) {
+        return [];
+      }
+
+      for (let yAxis of yAxisList) {
+        let index = this.selectColumnIndex(dataTable, yAxis);
+        if (index == null) {
+          return [];
         }
 
-        //y축 객체 배열 데이터를 가져와서 columnNm 값을 배열로 가져옴
-        let yArr = yAxisList.map(field => {
-            return {
-                valNm: field.columnNm,
-                valIndex: field.columnIdx
-            }
-        });
+        yAxisArr.push(
+          {
+            key: yAxis.columnNm,
+            idx: index,
+          }
+        );
+      }
 
-        if (yArr.length > 0) {
-            // 반복문을 통해 y축의 데이터를 가져와서 datalist에 추가
-            for(let i = 0; i < rowdata.length; i++) {
-                let data = {
-                    categoryData: rowdata[i][x]
-                }
-                // data에 y축의 다중데이터 추가
-                yArr.forEach(field => {
-                    const fieldName = field.valNm;
-                    if(!data[fieldName]) {
-                        data[fieldName] = 0;
-                    }
-                    data[fieldName] += Number(rowdata[i][field.valIndex]);
-                });
-                // group 추가
-                if(group !== undefined && group !== ""){
-                data.group = rowdata[i][group];}
-                resultArr.push(data);
-            }
+      for (let row of dataTable.rowData) {
+        let data = {
+          categoryData: row[xAxis],
         }
-        return resultArr;
 
-    },
-    /**
-     * 변환된 데이터 그룹화
-     * @param data : 변환된 데이터
-     * @param yArr : y축 카테고리 배열 데이터
-     */
-    dataGrouping: function(data, yArr){
-        if (!Array.isArray(data) || !data) {
-            return {};
+        for (let yArr of yAxisArr) {
+          if (!data[yArr.key]) {
+            data[yArr.key] = 0;
+          }
+          data[yArr.key] += Number(row[yArr.idx]);
         }
-        return data.reduce((acc, cur) => {
-            if (!acc[cur.categoryData]) {
-                acc[cur.categoryData] = {};
-                // 각 필드 초기화
-                yArr.forEach(field => {
-                    acc[cur.categoryData][field.valNm] = { values: [], sum: 0, min: Infinity, max: -Infinity, count: 0 };
-                });
-            }
 
-            // 각 필드별 합계 계산
-            yArr.forEach(field => {
-                const fieldName = field.valNm;
-                // cur[fieldName]이 배열인지 확인하고, 아니라면 배열로 만듦
-                let values = Array.isArray(cur[fieldName]) ? cur[fieldName] : [cur[fieldName]];
-                values.forEach(value => {
-                    acc[cur.categoryData][fieldName].values.push(value);
-                    acc[cur.categoryData][fieldName].sum += value;
-                    acc[cur.categoryData][fieldName].min = Math.min(acc[cur.categoryData][fieldName].min, value);
-                    acc[cur.categoryData][fieldName].max = Math.max(acc[cur.categoryData][fieldName].max, value);
-                    acc[cur.categoryData][fieldName].count += 1;
-                });
-            });
+        if (group != null && group !== undefined && group !== "") {
+          data.group = row[group];
+        }
 
-            return acc;
-        }, {});
-    },
+        result.push(data);
+      }
+    }
 
-    /**
-     * 데이터 계산 값으로 가공 (min, max, sum, avg)
-     * @param groupData : 그룹화된 데이터
-     * @param selectedCal : 사용자가 선택한 계산 값
-     */
-    calculateSetting: function(groupData, selectedCal) {
-        let result = Object.keys(groupData).map(categoryData => {
-            const result = { categoryData: categoryData };
-            Object.keys(groupData[categoryData]).forEach(fieldName => {
-                const fieldData = groupData[categoryData][fieldName];
-                switch (selectedCal) {
-                    case "sum":
-                        result[fieldName] = fieldData.sum;
-                        break;
-                    case "avg":
-                        result[fieldName] = fieldData.sum / fieldData.count;
-                        break;
-                    case "min":
-                        result[fieldName] = fieldData.min;
-                        break;
-                    case "max":
-                        result[fieldName] = fieldData.max;
-                        break;
-                }
-            });
-            return result;
+    return result;
+  },
+
+  /**
+   * 변환된 데이터 그룹화
+   * @param data : 변환된 데이터
+   * @param yArr : y축 카테고리 배열 데이터
+   */
+  dataGrouping: function (data, yArr) {
+    if (!Array.isArray(data) || !data) {
+      return {};
+    }
+    return data.reduce((acc, cur) => {
+      if (!acc[cur.categoryData]) {
+        acc[cur.categoryData] = {};
+        // 각 필드 초기화
+        yArr.forEach(field => {
+          acc[cur.categoryData][field.valNm] = { values: [], sum: 0, min: Infinity, max: -Infinity, count: 0 };
         });
-        return result;
-    },
+      }
 
-    /**
-     * 데이터 필터링
-     * 선택 된 그룹의 데이터로 가공
-     */
-    setFilteringData : function(dataList ,subGroupArr, selectedSubGroup){
-        // groupSubArr에서 selectedSubGroup의 index를 찾아서 그 columnNm을 찾아옴
-        const selectedSubGroupNm = subGroupArr.find(column => column.index === Number(selectedSubGroup)).columnNm;
-        return dataList.filter(data => data.group === selectedSubGroupNm);
-    },
-    /**
-     * 음수 차트 데이터 처리
-     */
-    convertValuesToNegative: function(data, fieldNm){
-        // 데이터 리스트를 순회하며 각 객체의 값을 확인
-        let test = data.forEach(obj => {
-            obj[fieldNm] = -Math.abs(obj[fieldNm]);
+      // 각 필드별 합계 계산
+      yArr.forEach(field => {
+        const fieldName = field.valNm;
+        // cur[fieldName]이 배열인지 확인하고, 아니라면 배열로 만듦
+        let values = Array.isArray(cur[fieldName]) ? cur[fieldName] : [cur[fieldName]];
+        values.forEach(value => {
+          acc[cur.categoryData][fieldName].values.push(value);
+          acc[cur.categoryData][fieldName].sum += value;
+          acc[cur.categoryData][fieldName].min = Math.min(acc[cur.categoryData][fieldName].min, value);
+          acc[cur.categoryData][fieldName].max = Math.max(acc[cur.categoryData][fieldName].max, value);
+          acc[cur.categoryData][fieldName].count += 1;
         });
-        return test;
-    },
-    
+      });
+
+      return acc;
+    }, {});
+  },
+
+  /**
+   * 데이터 계산 값으로 가공 (min, max, sum, avg)
+   * @param groupData : 그룹화된 데이터
+   * @param selectedCal : 사용자가 선택한 계산 값
+   */
+  calculateSetting: function (groupData, selectedCal) {
+    let result = Object.keys(groupData).map(categoryData => {
+      const result = { categoryData: categoryData };
+      Object.keys(groupData[categoryData]).forEach(fieldName => {
+        const fieldData = groupData[categoryData][fieldName];
+        switch (selectedCal) {
+          case "sum":
+            result[fieldName] = fieldData.sum;
+            break;
+          case "avg":
+            result[fieldName] = fieldData.sum / fieldData.count;
+            break;
+          case "min":
+            result[fieldName] = fieldData.min;
+            break;
+          case "max":
+            result[fieldName] = fieldData.max;
+            break;
+        }
+      });
+      return result;
+    });
+    return result;
+  },
+
+  /**
+   * 데이터 필터링
+   * 선택 된 그룹의 데이터로 가공
+   */
+  setFilteringData: function (dataList, subGroupArr, selectedSubGroup) {
+    // groupSubArr에서 selectedSubGroup의 index를 찾아서 그 columnNm을 찾아옴
+    const selectedSubGroupNm = subGroupArr.find(column => column.index === Number(selectedSubGroup)).columnNm;
+    return dataList.filter(data => data.group === selectedSubGroupNm);
+  },
+  /**
+   * 음수 차트 데이터 처리
+   */
+  convertValuesToNegative: function (data, fieldNm) {
+    // 데이터 리스트를 순회하며 각 객체의 값을 확인
+    let test = data.forEach(obj => {
+      obj[fieldNm] = -Math.abs(obj[fieldNm]);
+    });
+    return test;
+  },
+
 }
 
 export default chartDataTransform;

8a147d5

0e278d4

client/views/component/elementComponent/BaseComponent.vue

--- client/views/component/elementComponent/BaseComponent.vue

+++ client/views/component/elementComponent/BaseComponent.vue


   },
   mounted() {
     let changeData = this.component.component_itm;
-    let rowData = changeData.dataTable.rowData;
     if (this.component.component_itm.data_list == null) {
-      this.component.component_itm.data_list = chartDataTransform.createData(rowData, changeData.categoryAxis, changeData.valueAxis, "null");
+      this.component.component_itm.data_list = chartDataTransform.createData(changeData.dataTable, changeData.categoryAxis, changeData.valueAxis, "null");
     }
   },
 }

8a147d5

0e278d4

client/views/pages/custom/InsertDataAnalytics.vue

--- client/views/pages/custom/InsertDataAnalytics.vue

+++ client/views/pages/custom/InsertDataAnalytics.vue


                             <div v-for="(column, idx) of this.currentDataTable.columnDatas" :key="idx" :class="{
                               item: true,
                               mb5: idx < currentDataTable.columnDatas.length - 1,
-                            }" draggable="true" @dragstart="startDrag($event, column, idx)">
+                            }" draggable="true" @dragstart="startDrag(column)">
                               <p>
                                 <b>{{ column.displyColumnNm }}</b> ({{ column.columnNm }}) : [{{ column.dataTy }}]
                               </p>

                         <div class="flex30 mb10">
                           <div class="editor-box content-box pd10">
                             <p class="object-title mb5">항목(Category)</p>
-                            <div class="overflow-y" style="height: calc(100% - 22px)" @drop.prevent="onDrop($event, 'xdata')" @dragenter.prevent @dragover.prevent>
+                            <div class="overflow-y" style="height: calc(100% - 22px)" @drop.prevent="onDrop('xdata')" @dragenter.prevent @dragover.prevent>
                               <template v-if="dataX.length > 0">
                                 <div v-for="(column, indx) of dataX" :key="indx" :class="{
                                   'item flex justify-between align-center': true,

                                 <option v-for="(item, idx) of calcList" :key="idx" :value="item.key">{{ item.value }}</option>
                               </select>
                             </div>
-                            <div class="overflow-y" style="height: calc(100% - 22px)" @drop.prevent="onDrop($event, 'ydata')" @dragenter.prevent @dragover.prevent>
+                            <div class="overflow-y" style="height: calc(100% - 22px)" @drop.prevent="onDrop('ydata')" @dragenter.prevent @dragover.prevent>
                               <template v-if="dataY.length > 0">
                                 <div v-for="(column, indx) of dataY" :key="indx" :class="{
                                   'item flex justify-between align-center': true,

                   <span v-else>수정</span>
                 </button>
                 <button class="blue-border-btn small-btn" @click="fnInit"> 초기화 </button>
-                <button class="darkg-btn small-btn" @click="moveBack"> 취소 </button>
+                <button class="darkg-btn small-btn" @click="fnGotoList">취소</button>
               </div>
             </div>
           </div>

           name: "라인 백그라운드 차트",
         },
       ],
+      calcList: [
+        { key: "default", value: "기본" },
+        { key: "sum", value: "합계" },
+        { key: "avg", value: "평균" },
+        { key: "min", value: "최솟값" },
+        { key: "max", value: "최댓값" },
+      ],
 
       pageId: this.$route.query.page_id,
-
-      activeTab: "pageInfo",
-      activeOption: "LAYOUT",
 
       isModalOpen: false,
       isTabZoneOpen: false,
       isAttributeOpen: false,
 
-      // 최상위 레이아웃 정보 담는 객체
-      splitInfo: _.cloneDeep(this.$getDefaultJobGroup().customSplitter),
-      splitInfo_dumy: _.cloneDeep(this.$getDefaultJobGroup().customSplitter),
-
-      dragData: {},
-      dataX: [],
-      dataY: [],
+      activeTab: "pageInfo",
+      activeOption: "LAYOUT",
 
       // 페이지정보 탭
       customTitle: null, // 제목

       customComment: null, // 설명
 
       activeIndex: null,
-      createChartData: _.cloneDeep(this.$getDefaultJobGroup().componentData), // x, y축 (객체 형식으로 데이터 수정 필요)
 
-      // 레이아웃 및 컴포넌트
-      // 레이아웃
-      // 타이틀
-      layoutSj: Object.assign({}, this.$getDefaultObject().layoutSj),
-
-      // 컴포넌트
-
-
-      // 잡그룹목록
+      splitInfo: _.cloneDeep(this.$getDefaultJobGroup().customSplitter),
       jobGroupList: [],
 
       // 현재 작업 객체

       currentCalc: "default",
       currentDataTable: Object.assign({}, this.$getDefaultObject().dataTable),
 
-      // 컬럼정보
-      calcList: [
-        { key: "default", value: "기본" },
-        { key: "sum", value: "합계" },
-        { key: "avg", value: "평균" },
-        { key: "min", value: "최솟값" },
-        { key: "max", value: "최댓값" },
-      ],
+      dragData: {},
+      dataX: [],
+      dataY: [],
     };
   },
 
   created() {
     this.activeTab = "pageInfo";
 
-    if (this.pageId != null && this.pageId != undefined) {
-      this.getCustomData(); // 기존 데이터 가져오기
-    } else {
+    if (this.$isEmpty(this.pageId)) {
       this.init();
+    } else {
+      this.getCustomData(); // 기존 데이터 가져오기
     }
   },
 

   watch: {},
 
   methods: {
+    // 초기화
+    async init() {
+      // 탭, 옵션 초기화
+      this.$activeTab = "pageInfo";
+      this.activeOption = "LAYOUT";
+      this.activeIndex = null;
+
+      // 페이지 정보 초기화
+      this.initPageInfo();
+
+      // 레이아웃 초기화
+      let splitInfo = _.cloneDeep(this.$getDefaultJobGroup().customSplitter);
+      splitInfo.se = "splitter";
+      splitInfo.depth = 0;
+      splitInfo.layout_nm = "LAY_" + this.generateShortUUID();
+      splitInfo.position_idx = 1;
+      splitInfo.styleSheet.borderStyle = Object.assign({}, this.$getDefaultJobGroup().borderStyle);
+      splitInfo.styleSheet.background_style = Object.assign({}, this.$getDefaultJobGroup().background_style);
+      this.splitInfo = splitInfo;
+
+      // 데이터 초기화
+      this.jobGroupList = [];
+
+      this.initCurrent(this.splitInfo); // 현재 작업 객체 초기화
+    },
+
+    // 페이지 정보 초기화
+    initPageInfo() {
+      this.customTitle = null;
+      this.customComment = null;
+      this.public_at = true;
+    },
+
+    // 현재 작업 객체 초기화
+    initCurrent(layout) {
+      this.currentLayout = layout;
+
+      // 레이어에 컴포넌트를 생성한 경우
+      let component = layout.component;
+      if (component != null) {
+        // 컴포넌트 선택
+        this.activeIndex = null; // 초기화
+        this.chartComponent.forEach((item, idx) => {
+          if (item.id === component.component_itm.chart_knd) {
+            this.activeIndex = idx;
+          }
+        });
+
+        // 컬럼 정보 변경
+        this.dataX = component.component_itm.categoryAxis;
+        this.dataY = component.component_itm.valueAxis;
+        this.currentCalc = component.component_itm.chart_cal;
+
+        // 현재 잡그룹 변경
+        if (component.jobInfo.length > 0) {
+          this.currentJobGroupIdx = null;
+          this.currentJobGroup = component.jobInfo[0];
+
+          // 현재 데이터테이블 변경
+          if (this.currentJobGroup.jobItms.length === 0) {
+            this.currentDataTable = Object.assign({}, this.$getDefaultObject().dataTable);
+          } else {
+            const index = this.currentJobGroup.jobItms.length - 1;
+            this.currentDataTable = this.currentJobGroup.jobItms[index].dataTable;
+          }
+
+          this.onChangeChartData(); // 차트 데이터 수정
+
+          return;
+        }
+      }
+
+      this.currentJobGroupIdx = null;
+      this.currentJobGroup = Object.assign({}, this.$getDefaultObject().jobGroup);
+      this.initColumnInfo(); // 현재 컬럼 정보 초기화
+    },
+
+    // 현재 컬럼 정보 초기화
+    initColumnInfo() {
+      // 현재 데이터테이블 변경
+      if (this.currentJobGroup.jobItms.length === 0) {
+        this.currentDataTable = Object.assign({}, this.$getDefaultObject().dataTable);
+      } else {
+        const index = this.currentJobGroup.jobItms.length - 1;
+        this.currentDataTable = this.currentJobGroup.jobItms[index].dataTable;
+      }
+
+      // 컬럼 정보 초기화
+      this.dragData = {};
+      this.dataX = [];
+      this.dataY = [];
+      this.currentCalc = "default";
+
+      // 컴포넌트가 있는 경우 컴포넌트 데이터 초기화
+      let component = this.currentLayout.component;
+      if (component != null) {
+        component.component_itm.dataTable = this.currentJobGroup;
+        component.component_itm.data_list = [];
+      }
+
+      this.onChangeChartData(); // 차트 데이터 수정
+    },
+
+    // 기존 데이터 가져오기
+    getCustomData() {
+      const vm = this;
+      axios({
+        url: "/custom/customPageUpdateSelect",
+        method: "post",
+        headers: { "Content-Type": "application/json; charset=UTF-8" },
+        data: { page_id: vm.pageId },
+      })
+        .then((response) => {
+          // 페이지정보
+          let resPageInfo = response.data.resultData.pageInfo;
+          vm.customTitle = resPageInfo.ttl;
+          vm.customComment = resPageInfo.cn;
+          vm.public_at = resPageInfo.public_at;
+
+          // 레이아웃
+          let resSplitterInfo = response.data.resultData.splitterInfo;
+          vm.splitInfo = resSplitterInfo;
+          vm.currentLayout = vm.splitInfo;
+
+          // 데이터 목록
+          let resjobGroupList = response.data.resultData.jobGroupList;
+          vm.jobGroupList = resjobGroupList;
+        })
+        .catch((error) => {
+          vm.$showAlert("오류", "데이터 현황관리 차트 연결 오류, 관리자에게 문의하세요.");
+          vm.fnGotoList();
+        });
+    },
+
     // 현재 탭 변경
     fnChangeTab(type, current) {
       if (type == "nav") {

       }
 
       if (this.currentLayout.children.length > 0) {
-        this.$showAlert("메세지", "선택된 레이아웃이 비어있지 않습니다.<br>선택된 레이아웃 내부를 비우거나 다른 레이아웃을 선택해 주세요.");
+        this.$showAlert("메세지", "선택된 레이아웃이 분할되어 있습니다.<br>선택된 레이아웃 내부를 하나로 합치거나 다른 레이아웃을 선택해 주세요.");
         return true;
       }
 

 
       // 유효성 검사
       if (this.validationByCreateComponent(id)) {
-        return
+        return;
       };
 
-      let isCheck = await this.$showConfirm("컴포넌트 추가", name + " 컴포넌트를 추가하시겠습니까?");
+      let message;
+      if (this.currentLayout.component == null) {
+        message = name + " 컴포넌트를 추가하시겠습니까?";
+      } else {
+        message = "선택된 레이아웃이 비어있지 않습니다.<br>선택한 컴포넌트로 덮어쓰기 하시겠습니까?";
+      }
+
+      let isCheck = await this.$showConfirm("메세지", message);
       if (isCheck) {
-        let jobGroup = _.cloneDeep(this.$getDefaultJobGroup().jobGroup);
         let chartData = _.cloneDeep(this.$getDefaultJobGroup().componentData);
         chartData.chart_knd = id;
         chartData.component_nm = "ChartCmmn";

 
         let component = _.cloneDeep(this.$getDefaultJobGroup().component);
         component.component_itm = chartData;
+
+        let jobGroup = Object.assign({}, this.$getDefaultJobGroup().jobGroup);
+
         component.jobInfo = [];
         component.jobInfo.push(jobGroup);
 
         this.currentLayout.se = "component";
         this.currentLayout.component = component;
-
-        this.getSelectLayoutChart(); // 선택한 레이아웃의 차트 정보 조회
       }
     },
 

       console.log("layout: ", layout);
 
       this.currentLayout = layout;
-      this.getSelectLayoutChart(); // 선택한 레이아웃의 차트 정보 조회
 
       this.optionList = [
         { id: "LAYOUT", name: "레이아웃", useAt: true },

         { id: "COMPONENT", name: "컴포넌트", useAt: !this.$isEmpty(layout.component) },
       ];
 
-      if (this.$isEmpty(layout.component)) {
-        this.dataX = [];
-        this.dataY = [];
-        this.currentCalc = null;
-      } else {
-        this.dataX = layout.component.component_itm.categoryAxis;
-        this.dataY = layout.component.component_itm.valueAxis;
-        this.currentCalc = layout.component.component_itm.chart_cal;
-      }
-    },
-
-    // 선택한 레이아웃의 차트 정보 조회
-    getSelectLayoutChart() {
-      if (this.currentLayout.se == "component") {
-        let chartId = this.currentLayout.component.component_itm.chart_knd;
-        if (this.$isEmpty(chartId)) {
-          this.chartComponent.forEach((item, idx) => {
-            if (item.id === chartId) {
-              this.activeIndex = idx;
-            }
-          });
-        } else {
-          this.activeIndex = null;
-        }
-      }
+      this.initCurrent(layout); // 현재 작업 객체 초기화
     },
 
     findLoop(item) {

       }
 
       let copy = _.cloneDeep(this.currentLayout);
-      copy.se = "splitter";
       copy.parents_splitter_id = this.currentLayout.layout_nm;
       copy.depth = this.currentLayout.depth + 1;
       copy.indx = 0;

       return fullUUID.replace(/-/g, '').substring(0, 8);
     },
 
-    // 초기화
-    async init() {
-      this.splitInfo = _.cloneDeep(this.$getDefaultJobGroup().customSplitter);
-      this.splitInfo.se = "splitter";
-      this.splitInfo.depth = 0;
-      this.splitInfo.layout_nm = "LAY_" + this.generateShortUUID();
-      this.splitInfo.position_idx = 1;
-      this.splitInfo.styleSheet.borderStyle = Object.assign({}, this.$getDefaultJobGroup().borderStyle);
-      this.splitInfo.styleSheet.background_style = Object.assign({}, this.$getDefaultJobGroup().background_style);
-
-      this.currentLayout = this.splitInfo;
-
-      // 데이터 관리 초기화
-      this.jobGroupList = [];
-    },
-
     // 초기화 버튼 동작
     async fnInit() {
       let isCheck = await this.$showConfirm("초기화", "초기화 하시겠습니까? 데이터가 모두 삭제됩니다.");

     // 컬럼정보 비우기
     fnInitColInfo() {
       this.currentJobGroup = Object.assign({}, this.$getDefaultObject().jobGroup);
+      this.initColumnInfo(); // 현재 컬럼 정보 초기화
     },
 
     // 값 계산법 변경

       this.currentLayout.component.component_itm.chart_cal = value;
     },
 
-    // 기존 데이터 가져오기
-    getCustomData() {
-      const vm = this;
-      axios({
-        url: "/custom/customPageUpdateSelect",
-        method: "post",
-        headers: { "Content-Type": "application/json; charset=UTF-8" },
-        data: { page_id: vm.pageId },
-      })
-        .then(function (response) {
-          let resPageInfo = response.data.resultData.pageInfo;
-          let resjobGroupList = response.data.resultData.jobGroupList;
-          let resSplitterInfo = response.data.resultData.splitterInfo;
-
-          vm.customTitle = resPageInfo.ttl;
-          vm.customComment = resPageInfo.cn;
-
-          vm.splitInfo = resSplitterInfo;
-
-          vm.splitInfo_dumy.layout_nm = "dumy";
-          vm.splitInfo_dumy.se = "splitter";
-          vm.splitInfo_dumy.children.push(vm.splitInfo);
-
-          vm.jobGroupList = resjobGroupList;
-
-          vm.currentLayout = vm.splitInfo;
-          vm.public_at = resPageInfo.public_at;
-          vm.getSelectLayoutChart();
-        })
-        .catch(function (error) {
-          vm.$showAlert(
-            "데이터 현황관리 차트 연결",
-            "데이터 현황관리 차트 연결 오류, 관리자에게 문의하세요."
-          );
-          vm.moveBack();
-        });
-    },
-
+    // 레이아웃 삭제
     async deleteSplitterLayout() {
       if (!this.currentLayout.layout_nm) {
         this.$showAlert("메세지", "삭제할 레이아웃이 없습니다.");
         return;
       }
-      if (!this.currentLayout.parents_splitter_id) {
+
+      if (this.currentLayout.layout_nm == this.splitInfo.layout_nm) {
         this.$showAlert("메세지", "최상위 레이아웃은 삭제할 수 없습니다.");
         return;
       }
-      if (
-        await this.$showConfirm(
-          "레이아웃 삭제",
-          "선택한 레이아웃을 삭제하시겠습니까?"
-        )
-      ) {
-        let parentLayout = this.findParentLayout(
-          this.splitInfo,
-          this.currentLayout.parents_splitter_id
-        );
-        //선택한 레이아웃의 형제정보 찾기
-        let otherIdx = parentLayout.children.findIndex(
-          (item) => item.layout_nm !== this.currentLayout.layout_nm
-        );
-        let otherSplit = parentLayout.children[otherIdx];
-        //otherSplit의 component, children 정보 가져오기
-        let otherComponent = otherSplit.component;
-        let otherChildren = otherSplit.children;
-        let layoutSize1 = otherSplit.layout_size1;
-        let layoutSize2 = otherSplit.layout_size2;
-        let layoutType = otherSplit.layout_type;
-        let se = otherSplit.se;
-        let size = otherSplit.size;
-        let styleSheet = otherSplit.styleSheet;
 
-        // 부모 레이아웃에 다른 split의 정보 넣어 주기
-        parentLayout.component = otherComponent;
-        parentLayout.children = otherChildren;
-        parentLayout.layout_size1 = layoutSize1;
-        parentLayout.layout_size2 = layoutSize2;
-        parentLayout.layout_type = layoutType;
-        parentLayout.se = se;
-        parentLayout.size = size;
-        parentLayout.styleSheet = styleSheet;
+      let isCheck = await this.$showConfirm(
+        "레이아웃 삭제",
+        "선택한 레이아웃을 삭제하시겠습니까?"
+      );
+      if (!isCheck) {
+        return;
+      }
 
-        // 자식에게서 가져온 자식의 자식 정보의 부모 정보 변경
-        if (parentLayout.children.length > 0) {
-          parentLayout.children.forEach((item) => {
-            item.parents_splitter_id = parentLayout.layout_nm;
-          });
-        }
+      let parentLayout = this.findParentLayout(
+        this.splitInfo,
+        this.currentLayout.parents_splitter_id
+      );
+
+      //선택한 레이아웃의 형제정보 찾기
+      let otherIdx = parentLayout.children.findIndex(
+        (item) => item.layout_nm !== this.currentLayout.layout_nm
+      );
+      let otherSplit = parentLayout.children[otherIdx];
+      //otherSplit의 component, children 정보 가져오기
+      let otherComponent = otherSplit.component;
+      let otherChildren = otherSplit.children;
+      let layoutSize1 = otherSplit.layout_size1;
+      let layoutSize2 = otherSplit.layout_size2;
+      let layoutType = otherSplit.layout_type;
+      let se = otherSplit.se;
+      let size = otherSplit.size;
+      let styleSheet = otherSplit.styleSheet;
+
+      // 부모 레이아웃에 다른 split의 정보 넣어 주기
+      parentLayout.component = otherComponent;
+      parentLayout.children = otherChildren;
+      parentLayout.layout_size1 = layoutSize1;
+      parentLayout.layout_size2 = layoutSize2;
+      parentLayout.layout_type = layoutType;
+      parentLayout.se = se;
+      parentLayout.size = size;
+      parentLayout.styleSheet = styleSheet;
+
+      // 자식에게서 가져온 자식의 자식 정보의 부모 정보 변경
+      if (parentLayout.children.length > 0) {
+        parentLayout.children.forEach((item) => {
+          item.parents_splitter_id = parentLayout.layout_nm;
+        });
       }
     },
 
+    // 부모 요소 검색
     findParentLayout(splitInfo, selectParentLayoutId) {
       // splitInfo가 배열인 경우 각 요소에 대해 재귀적으로 함수를 호출
       if (Array.isArray(splitInfo)) {

     },
 
     // 취소 (데이터활용관리 목록으로 이동)
-    async moveBack() {
+    async fnGotoList() {
       let isCheck = await this.$showConfirm("경고", "취소할 경우 작성된 내용이 삭제됩니다.");
       if (isCheck) {
         this.$router.push({ path: "/customSelectList.page" });

     },
 
     // 잡그룹 추가
-    fnCreateJobGroup() {
+    async fnCreateJobGroup() {
+      let component = this.currentLayout.component;
+      if (component != null) {
+        if (!this.$isEmpty(component.component_itm.data_list)) {
+          let isCheck = await this.$showConfirm("경고", "컴포넌트 컬럼 설정 후, 새 데이터를 추가할 경우 기존 정보가 삭제됩니다.<br>새 데이터를 추가하시겠습니까?");
+          if (!isCheck) {
+            return;
+          }
+        }
+      }
+
       let jobGroup = Object.assign({}, this.$getDefaultObject().jobGroup);
       jobGroup.group_nm = "데이터" + (this.jobGroupList.length + 1);
       this.jobGroupList.push(jobGroup);
-      this.fnSelectJobGroup(jobGroup); // 잡그룹 선택 (추가한 잡그룹 선택)
+      this.currentJobGroup = jobGroup;
+      this.initColumnInfo(); // 현재 컬럼 정보 초기화
     },
 
     // 잡그룹 선택
-    fnSelectJobGroup(jobGroup) {
-      this.currentJobGroup = jobGroup;
-
-      // 잡그룹 내 마지막 데이터테이블 조회
-      if (!this.currentJobGroup.jobItms || this.currentJobGroup.jobItms.length === 0) {
-        this.currentDataTable = Object.assign({}, this.$getDefaultObject().dataTable);
-      } else {
-        const index = this.currentJobGroup.jobItms.length - 1;
-        this.currentDataTable = this.currentJobGroup.jobItms[index].dataTable;
+    async fnSelectJobGroup(jobGroup) {
+      let component = this.currentLayout.component;
+      if (component != null && jobGroup.jobItms.length > 0) {
+        let index = jobGroup.jobItms.length - 1;
+        if (component.component_itm.dataTable == jobGroup.jobItms[index].dataTable) {
+          return;
+        }
       }
+
+      if (!this.$isEmpty(component.component_itm.data_list)) {
+        let isCheck = await this.$showConfirm("경고", "컴포넌트 컬럼 설정 후, 다른 데이터를 선택할 경우 기존 정보가 삭제됩니다.<br>다른 데이터를 선택하시겠습니까?");
+        if (!isCheck) {
+          return;
+        }
+      }
+
+      this.currentJobGroup = jobGroup;
+      this.initColumnInfo(); // 현재 컬럼 정보 초기화
     },
 
     // 잡그룹관리 모달 열기

     },
 
     // 드래그 이벤트
-    startDrag(event, data, idx) {
+    startDrag(data) {
       this.dragData = data;
     },
 
     // 드랍 이벤트
-    async onDrop(event, type) {
+    async onDrop(type) {
       // 컴포넌트가 설정되지 않은 경우 경고 후 실행 취소
       if (this.$isEmpty(this.currentLayout.component)) {
         this.$showAlert("경고", "컴포넌트 등록 후 설정할 수 있습니다.");

         this.dataY.push(this.dragData);
       }
 
+      this.onChangeChartData();
+    },
+
+    // 차트 데이터 수정
+    onChangeChartData() {
+      if (this.currentLayout.component == null) {
+        return;
+      }
+
       if (!this.$isEmpty(this.dataX)) {
         this.currentLayout.component.component_itm.categoryAxis = this.dataX;
       }
+
       if (!this.$isEmpty(this.dataY)) {
         this.currentLayout.component.component_itm.valueAxis = this.dataY;
       }
 
-      // 축 데이터를 이용한 차트 데이터 생성
       if (!this.$isEmpty(this.dataX) && !this.$isEmpty(this.dataY)) {
         let dataList = chartDataTransform.createData(
-          this.currentDataTable.rowData,
-          this.currentLayout.component.component_itm.categoryAxis,
-          this.currentLayout.component.component_itm.valueAxis,
+          this.currentDataTable,
+          this.dataX,
+          this.dataY,
           "null"
         );
         this.currentLayout.component.component_itm.data_list = dataList;
       }
+
       this.currentLayout.component.jobInfo[0] = this.currentJobGroup;
     },
 

Add a comment

Open 0
Closed 0

List

...	...	@@ -32,9 +32,8 @@
32	32	},
33	33	mounted() {
34	34	let changeData = this.component.component_itm;
35		- let rowData = changeData.dataTable.rowData;
36	35	if (this.component.component_itm.data_list == null) {
37		- this.component.component_itm.data_list = chartDataTransform.createData(rowData, changeData.categoryAxis, changeData.valueAxis, "null");
	36	+ this.component.component_itm.data_list = chartDataTransform.createData(changeData.dataTable, changeData.categoryAxis, changeData.valueAxis, "null");
38	37	}
39	38	},
40	39	}

...	...	@@ -1,11 +1,11 @@
1	1	<template>
2	2	<Splitter :class="{ 'content-box': true, active: splitInfo.layout_nm == selectLayout.layout_nm }" :layout="splitInfo.layout_type" @resizeend="updateSizes" @Click.stop="clickLayout(splitInfo)">
3		- <SplitterPanel class="content-box" v-if="splitInfo.children.length < 1">
	3	+ <SplitterPanel class="content-box padding-1" v-if="splitInfo.children.length < 1" :style="$createStyleSheet(splitInfo.styleSheet)">
4	4	<ComponentTitle v-if="splitInfo.useSj" :title="splitInfo.layoutSj" />
5	5	<BaseComponent v-else-if="splitInfo.se == 'component'" :component="splitInfo.component" @onChange="onChange" @Click.stop="clickLayout(splitInfo)" />
6	6	</SplitterPanel>
7	7	<template v-else>
8		- <SplitterPanel class="content-box" v-for="(item, idx) of splitInfo.children" :key="idx">
	8	+ <SplitterPanel class="content-box" v-for="(item, idx) of splitInfo.children" :key="idx" :style="$createStyleSheet(splitInfo.styleSheet)">
9	9	<SplitterLayout :splitInfo="item" :selectLayout="selectLayout" @onChange="onChange" />
10	10	</SplitterPanel>
11	11	</template>

...	...	@@ -1,136 +1,153 @@
1	1
2	2	const chartDataTransform = {
3		- /**
4		- * rowdata를 사용자 선택에 맞게 반환
5		- * @param rowdata : 원본 데이터
6		- * @param x : x축 객체 데이터
7		- * @param yArr : y축 배열 데이터
8		- */
9		- createData: function(rowdata, xAxisList, yAxisList, group){
10		- let resultArr = [];
11		- let x;
12		- //x축 객체 배열 데이터를 가져와서 columnNm 값을 가져옴
13		- if(xAxisList.length !== 0){
14		- x = xAxisList[0].columnIdx;
	3	+ selectColumnIndex(dataTable, column) {
	4	+ for (let i = 0; i < dataTable.columnDatas.length; i++) {
	5	+ if (column == dataTable.columnDatas[i]) {
	6	+ return i;
	7	+ }
	8	+ }
	9	+ return null;
	10	+ },
	11	+ /**
	12	+ * rowdata를 사용자 선택에 맞게 반환
	13	+ * @param rowdata : 원본 데이터
	14	+ * @param x : x축 객체 데이터
	15	+ * @param yArr : y축 배열 데이터
	16	+ */
	17	+ createData: function (dataTable, xAxisList, yAxisList, group) {
	18	+ let xAxis = null;
	19	+ let yAxisArr = [];
	20	+ let result = [];
	21	+
	22	+ if (dataTable.rowData.length > 0 && xAxisList.length > 0 && yAxisList.length > 0) {
	23	+ xAxis = this.selectColumnIndex(dataTable, xAxisList[0]);
	24	+ if (xAxis == null) {
	25	+ return [];
	26	+ }
	27	+
	28	+ for (let yAxis of yAxisList) {
	29	+ let index = this.selectColumnIndex(dataTable, yAxis);
	30	+ if (index == null) {
	31	+ return [];
15	32	}
16	33
17		- //y축 객체 배열 데이터를 가져와서 columnNm 값을 배열로 가져옴
18		- let yArr = yAxisList.map(field => {
19		- return {
20		- valNm: field.columnNm,
21		- valIndex: field.columnIdx
22		- }
23		- });
	34	+ yAxisArr.push(
	35	+ {
	36	+ key: yAxis.columnNm,
	37	+ idx: index,
	38	+ }
	39	+ );
	40	+ }
24	41
25		- if (yArr.length > 0) {
26		- // 반복문을 통해 y축의 데이터를 가져와서 datalist에 추가
27		- for(let i = 0; i < rowdata.length; i++) {
28		- let data = {
29		- categoryData: rowdata[i][x]
30		- }
31		- // data에 y축의 다중데이터 추가
32		- yArr.forEach(field => {
33		- const fieldName = field.valNm;
34		- if(!data[fieldName]) {
35		- data[fieldName] = 0;
36		- }
37		- data[fieldName] += Number(rowdata[i][field.valIndex]);
38		- });
39		- // group 추가
40		- if(group !== undefined && group !== ""){
41		- data.group = rowdata[i][group];}
42		- resultArr.push(data);
43		- }
	42	+ for (let row of dataTable.rowData) {
	43	+ let data = {
	44	+ categoryData: row[xAxis],
44	45	}
45		- return resultArr;
46	46
47		- },
48		- /**
49		- * 변환된 데이터 그룹화
50		- * @param data : 변환된 데이터
51		- * @param yArr : y축 카테고리 배열 데이터
52		- */
53		- dataGrouping: function(data, yArr){
54		- if (!Array.isArray(data) \|\| !data) {
55		- return {};
	47	+ for (let yArr of yAxisArr) {
	48	+ if (!data[yArr.key]) {
	49	+ data[yArr.key] = 0;
	50	+ }
	51	+ data[yArr.key] += Number(row[yArr.idx]);
56	52	}
57		- return data.reduce((acc, cur) => {
58		- if (!acc[cur.categoryData]) {
59		- acc[cur.categoryData] = {};
60		- // 각 필드 초기화
61		- yArr.forEach(field => {
62		- acc[cur.categoryData][field.valNm] = { values: [], sum: 0, min: Infinity, max: -Infinity, count: 0 };
63		- });
64		- }
65	53
66		- // 각 필드별 합계 계산
67		- yArr.forEach(field => {
68		- const fieldName = field.valNm;
69		- // cur[fieldName]이 배열인지 확인하고, 아니라면 배열로 만듦
70		- let values = Array.isArray(cur[fieldName]) ? cur[fieldName] : [cur[fieldName]];
71		- values.forEach(value => {
72		- acc[cur.categoryData][fieldName].values.push(value);
73		- acc[cur.categoryData][fieldName].sum += value;
74		- acc[cur.categoryData][fieldName].min = Math.min(acc[cur.categoryData][fieldName].min, value);
75		- acc[cur.categoryData][fieldName].max = Math.max(acc[cur.categoryData][fieldName].max, value);
76		- acc[cur.categoryData][fieldName].count += 1;
77		- });
78		- });
	54	+ if (group != null && group !== undefined && group !== "") {
	55	+ data.group = row[group];
	56	+ }
79	57
80		- return acc;
81		- }, {});
82		- },
	58	+ result.push(data);
	59	+ }
	60	+ }
83	61
84		- /**
85		- * 데이터 계산 값으로 가공 (min, max, sum, avg)
86		- * @param groupData : 그룹화된 데이터
87		- * @param selectedCal : 사용자가 선택한 계산 값
88		- */
89		- calculateSetting: function(groupData, selectedCal) {
90		- let result = Object.keys(groupData).map(categoryData => {
91		- const result = { categoryData: categoryData };
92		- Object.keys(groupData[categoryData]).forEach(fieldName => {
93		- const fieldData = groupData[categoryData][fieldName];
94		- switch (selectedCal) {
95		- case "sum":
96		- result[fieldName] = fieldData.sum;
97		- break;
98		- case "avg":
99		- result[fieldName] = fieldData.sum / fieldData.count;
100		- break;
101		- case "min":
102		- result[fieldName] = fieldData.min;
103		- break;
104		- case "max":
105		- result[fieldName] = fieldData.max;
106		- break;
107		- }
108		- });
109		- return result;
	62	+ return result;
	63	+ },
	64	+
	65	+ /**
	66	+ * 변환된 데이터 그룹화
	67	+ * @param data : 변환된 데이터
	68	+ * @param yArr : y축 카테고리 배열 데이터
	69	+ */
	70	+ dataGrouping: function (data, yArr) {
	71	+ if (!Array.isArray(data) \|\| !data) {
	72	+ return {};
	73	+ }
	74	+ return data.reduce((acc, cur) => {
	75	+ if (!acc[cur.categoryData]) {
	76	+ acc[cur.categoryData] = {};
	77	+ // 각 필드 초기화
	78	+ yArr.forEach(field => {
	79	+ acc[cur.categoryData][field.valNm] = { values: [], sum: 0, min: Infinity, max: -Infinity, count: 0 };
110	80	});
111		- return result;
112		- },
	81	+ }
113	82
114		- /**
115		- * 데이터 필터링
116		- * 선택 된 그룹의 데이터로 가공
117		- */
118		- setFilteringData : function(dataList ,subGroupArr, selectedSubGroup){
119		- // groupSubArr에서 selectedSubGroup의 index를 찾아서 그 columnNm을 찾아옴
120		- const selectedSubGroupNm = subGroupArr.find(column => column.index === Number(selectedSubGroup)).columnNm;
121		- return dataList.filter(data => data.group === selectedSubGroupNm);
122		- },
123		- /**
124		- * 음수 차트 데이터 처리
125		- */
126		- convertValuesToNegative: function(data, fieldNm){
127		- // 데이터 리스트를 순회하며 각 객체의 값을 확인
128		- let test = data.forEach(obj => {
129		- obj[fieldNm] = -Math.abs(obj[fieldNm]);
	83	+ // 각 필드별 합계 계산
	84	+ yArr.forEach(field => {
	85	+ const fieldName = field.valNm;
	86	+ // cur[fieldName]이 배열인지 확인하고, 아니라면 배열로 만듦
	87	+ let values = Array.isArray(cur[fieldName]) ? cur[fieldName] : [cur[fieldName]];
	88	+ values.forEach(value => {
	89	+ acc[cur.categoryData][fieldName].values.push(value);
	90	+ acc[cur.categoryData][fieldName].sum += value;
	91	+ acc[cur.categoryData][fieldName].min = Math.min(acc[cur.categoryData][fieldName].min, value);
	92	+ acc[cur.categoryData][fieldName].max = Math.max(acc[cur.categoryData][fieldName].max, value);
	93	+ acc[cur.categoryData][fieldName].count += 1;
130	94	});
131		- return test;
132		- },
133		-
	95	+ });
	96	+
	97	+ return acc;
	98	+ }, {});
	99	+ },
	100	+
	101	+ /**
	102	+ * 데이터 계산 값으로 가공 (min, max, sum, avg)
	103	+ * @param groupData : 그룹화된 데이터
	104	+ * @param selectedCal : 사용자가 선택한 계산 값
	105	+ */
	106	+ calculateSetting: function (groupData, selectedCal) {
	107	+ let result = Object.keys(groupData).map(categoryData => {
	108	+ const result = { categoryData: categoryData };
	109	+ Object.keys(groupData[categoryData]).forEach(fieldName => {
	110	+ const fieldData = groupData[categoryData][fieldName];
	111	+ switch (selectedCal) {
	112	+ case "sum":
	113	+ result[fieldName] = fieldData.sum;
	114	+ break;
	115	+ case "avg":
	116	+ result[fieldName] = fieldData.sum / fieldData.count;
	117	+ break;
	118	+ case "min":
	119	+ result[fieldName] = fieldData.min;
	120	+ break;
	121	+ case "max":
	122	+ result[fieldName] = fieldData.max;
	123	+ break;
	124	+ }
	125	+ });
	126	+ return result;
	127	+ });
	128	+ return result;
	129	+ },
	130	+
	131	+ /**
	132	+ * 데이터 필터링
	133	+ * 선택 된 그룹의 데이터로 가공
	134	+ */
	135	+ setFilteringData: function (dataList, subGroupArr, selectedSubGroup) {
	136	+ // groupSubArr에서 selectedSubGroup의 index를 찾아서 그 columnNm을 찾아옴
	137	+ const selectedSubGroupNm = subGroupArr.find(column => column.index === Number(selectedSubGroup)).columnNm;
	138	+ return dataList.filter(data => data.group === selectedSubGroupNm);
	139	+ },
	140	+ /**
	141	+ * 음수 차트 데이터 처리
	142	+ */
	143	+ convertValuesToNegative: function (data, fieldNm) {
	144	+ // 데이터 리스트를 순회하며 각 객체의 값을 확인
	145	+ let test = data.forEach(obj => {
	146	+ obj[fieldNm] = -Math.abs(obj[fieldNm]);
	147	+ });
	148	+ return test;
	149	+ },
	150	+
134	151	}
135	152
136	153	export default chartDataTransform; (파일 끝에 줄바꿈 문자 없음)

Delete comment