홈 SFaaS 심화 스카다 등 개발 예제 (2)
포스트
취소

SFaaS 심화 스카다 등 개발 예제 (2)

게시 2026/05/24
By dapin
9 분읽는 시간

태그 활용

  • 태그 만들기: 프로젝트 태그 메뉴에서 → 추가를 누르고 → 이름을 쓰고 → 데이터타입(유형)을 정하고 → 확인을 누르면 된다

    260524-HAE-1-SFaaS-2.png

  • 여기서 만들어진 태그는 전역 태그로 취급된다. 프로젝트 내 어떤 페이지에서든 다 똑같이 호출할 수 있다. 다만 이 태그 자체에 값이 저장되는 것은 아니고, 저장할 수 있는 공간을 만든 것 뿐이니 조작(읽고 쓰기)은 페이지마다 다르게 할 수 있다. C++로 치면 전역 struct 만든 거임.

  • 전역 태그는 이름 앞에 $$를 붙여서 호출할 수 있다. 태그의 타입에 따라 출력 옵션을 정하고, 이름을 똑바로 쓰고, 출력 포맥을 정하면 된다. 실제 화면에서는 ### 이 아니라 숫자로 제대로 보인다.

    image.png

  • 페이지 전역 스크립트로 태그를 조작할 수 있다. 아래 작성된 코드는 매 초마다 태그 값을 1씩 증가시킴.

    image.png

  • 도킹 레이아웃: 약간 오토 레이아웃 비슷한 거임. 화면을 몇 개의 칸으로 나누고 그 안을 꽉 채우는 게 기본값인 레이아웃.

  • 아래 코드는 도킹 레이아웃의 칸을 삭제하거나 추가함. 영역은 동서남북 중앙으로 구분됨.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    /*id는 easyui 컨트롤의 id*/

//상중하 영역 설정
$('#' + id).layout('remove','west')
$('#' + id).layout('remove','east')

$('#' + id).layout('add',{
    region:'south',
    split:true
})
$('#' + id).layout('add',{
    region:'north',
    split:true
})

  • 차트는 Apache ECharts를 쓴다. 마찬가지로 자바스크립트이기 때문에 백엔드 API 사용 가능하다.

    image.png

기본 용례

  • 다른 페이지 열기: ShowPicture('페이지이름');
  • 특정 요소에 페이지 세팅하기: 도킹레이아웃요소명.setPage('페이지이름', '위치');
    • 위치는 동서남북 중앙
  • 팝업 열기

    1. 팝업 속성 부여 후 새 창 열기: ShowPicture('페이지이름');

      image.png

    2. 새 창 열 때부터 팝업으로 열기

      1
2
3
4

      ShowPage('페이지이름', 2, {width:500, height:500, left:300, top:100});
// 열어야 할 페이지 이름, 새 창 유형, {팝업 크기/위치 지정}
// 1: 새 창 열기(이 화면에 바로 열림)
// 2: 팝업으로 보여줘라

  • 콤보박스 종합 세트: 일단 번호 순서대로 정독하고 설명을 보면 좀 볼만하다

    image.png

    1. 읽기 전용, 조작 불가능으로 설정된 텍스트: 속성 창에서 지정하면 됨
    2. 1번 텍스트의 내용을 “button pressed”로 바꿈: Label1.Text = "button pressed";

    3. 콘솔에 1번의 내용을 출력함

      1
2

      const text = Label1.Text;
console.log("current text is: ", text);
    4. 뭔가 입력할 수 있음. 이름은 “텍스트 박스”. UI 도구 > 데스크탑 스타일에 있음.

    5. 4번 텍스트의 내용을 콘솔에 출력

      1
2

      const boxText = $(Textbox1.id).textbox('getText');
console.log(`the text in the box is ${boxText}`);
    6. 4번 텍스트에 “admin”을 입력: $(Textbox1.id).textbox('setValue', 'admin');
    7. 이게 이름이 콤보박스. 객관식 선택지 제공, 아이콘 부착 가능

    8. 7번 콤보박스 내용물을 바꿈

      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

      let itemArray = [
    {label: '0', value: '불량검사'},
    {label: '1', value: '라인분류'},
    {label: '2', value: '제품분류'},
];

$(Combobox1.id).combobox({
    value: '기본 콤보값',
    valueField: 'label',
    textField: 'value',
    data: itemArray,
    onSelect: function(rec) {
        Label2.Text = rec.value;
    }
});
    9. 8번 버튼을 누른 후 7번에서 뭔가 선택하면 그 이름대로 텍스트가 바뀜. 8번 버튼에 onSelect 이벤트 트리거 포함됨.
    10. 그저 버튼 텍스트에 아이콘을 붙일 수 있음을 보여주기 위한 버튼

      • 화면 열기 이벤트 스크립트로 아이콘을 직접 부여할 수도 있고:

        1
2
3
4

         $(LinkButton6.id).linkbutton({
   iconCls:'icon-remove', //휴지통 아이콘
   iconAlign: 'right' //설정 가능 위치: 'left','right','top','bottom'
 });

      • 그냥 iconAlign 설정을 ‘left’로 지정하면 아이콘이 생긴다. 기본값이 쓰레기통임.

    11. 12번 버튼을 비활성화함: $(btn2.id).linkbutton('disable');
    12. 12번 버튼임
    13. 12번 버튼을 활성화함: $(btn2.id).linkbutton('enable');
    14. 그냥 보라고 꺼낸 달력. 아무 기능 없음.

    15. 화면을 보는 시점으로부터 일주일 전의 날짜가 기본으로 입력되는 날짜 선택 칸(DateBox). 연도-월-일 서식이 지정되어 있음.

      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

      /*id는 easyui 컨트롤의 id*/
// 날짜 포맷
function myformatter(date){
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    var d = date.getDate();
    return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
}
function myparser(s){
    if (!s) return new Date();
    var ss = (s.split('-'));
    var y = parseInt(ss[0],10);
    var m = parseInt(ss[1],10);
    var d = parseInt(ss[2],10);
    if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
        return new Date(y,m-1,d);
    } else {
        return new Date();
    }
}
$('#' + id).datebox({
    formatter:myformatter,
    parser:myparser
})
    16. 화면을 보는 시점의 날짜가 기본으로 입력되는 날짜 선택 칸. 코드는 15번과 동일함.

    17. 15번과 16번 칸의 날짜를 콘솔에 출력함.

      1
2
3
4
5

      let firstValue = $('#' + DateBox1.id).datebox('getValue');
let secondValue = $('#' + DateBox2.id).datebox('getValue');

console.log(`first value is ${firstValue}`);
console.log(`second value is ${secondValue}`);

    18. 표(Datagrid). 기본값 지정됨. singleSelect: true 설정으로 한번에 하나씩만 선택할 수 있음. onClickCell: onClickCell 설정과 함수 구현으로 행을 클릭할 때마다 콘솔에 그 내용이 출력됨.

      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

      // 헤더 초기화
$('#' + id).datagrid({
    columns: [[
        { field: 'CK', title: '체크박스', checkbox: true, width: '4%' },
        {
            field: 'FLOW_CODE', title: '공정코드', width: '20%', align: 'center',
            formatter: function (value, row, index) {
                console.log('value: ', value);
                console.log('row: ', row);
                console.log('index: ', index);

                if (value === 'F001') {
                    return "<button style='color: #fff; background: #4a4c52; border-radius: 7px;'>F001</button>"
                }
                else return value;
            }
        },
        { field: 'LAB_NAME', title: '작업자명', width: '22%', align: 'center' },
        { field: 'PHONE', title: '전화번호', width: '32%', align: 'center' },
        { field: 'EMAIL', title: '이메일', width: '24%', align: 'center' }
    ]],
    data: [
        { FLOW_CODE: 'F001', LAB_NAME: 'ABC', PHONE: '010-0000-1111', EMAIL: '123@456.com' },
        { FLOW_CODE: 'F002', LAB_NAME: 'DEF', PHONE: '010-1111-2222', EMAIL: '234@567.com' }
    ],
    singleSelect: true,

    onClickCell: onClickCell
})

function onClickCell(index, field, value) {
    console.log('click index: ', index);
    console.log('click field: ', field);
    console.log('click value: ', value);
}
    19. 18번의 표에서 FLOW_CODE가 F001인 경우에만 CSS 서식 지정됨. 코드는 18번에 포함됨.

    20. 콘솔에 표 전체를 출력함

      1
2

      let rows = $(Datagrid1.id).datagrid('getRows');
console.log(rows);

    21. 콘솔에 선택한 행만 출력함

      1
2

      let selected = $(Datagrid1.id).datagrid('getSelected');
console.log(selected);

SFaaS 시스템 구조도

image.png

HAE, SFaaS
현대오토에버 모빌리티 SCADA
이 기사는 저작권자의 CC BY-NC-ND 4.0 라이센스를 따릅니다.
최근 업데이트
바로가기

SFaaS 심화 스카다 등 개발 예제 (1)

SFaaS 프로젝트 - 배터리 팩 공장 AMR 모니터링 시스템