스마트서비스 최종완료보고 버전
This commit is contained in:
CodeTempla
@@ -0,0 +1,240 @@
|
||||
"use client"
|
||||
import PageBreadcrumb from "@/components/common/PageBreadCrumb2";
|
||||
import ComponentCard from '@/components/common/ComponentCard2';
|
||||
import CtTable1 from '@/components/tables/CtTable1';
|
||||
import Button from '@/components/ui/button/Button2';
|
||||
import { DocsIcon, PlusIcon, ChevronDownIcon } from "@/icons";
|
||||
import Label from '@/components/form/Label';
|
||||
import Input from '@/components/form/input/InputField2';
|
||||
import Select from '@/components/form/Select2';
|
||||
import DatePicker from '@/components/form/date-picker2';
|
||||
import Badge from "@/components/ui/badge/Badge";
|
||||
|
||||
import React from "react";
|
||||
import { useEffect, useState } from 'react';
|
||||
import api, { convertDateTime3 } from '@/lib/_AG';
|
||||
|
||||
import { useModal } from "@/hooks/useModal";
|
||||
import AddTest2ViewModal from './AddTest2ViewModal';
|
||||
|
||||
|
||||
const SEARCH_LABEL_WIDTH = 24;
|
||||
const COUNT_PER_PAGE = 10;
|
||||
const PAGE_NUM_COUNT = 5;
|
||||
|
||||
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "등록일",
|
||||
key: "reg_time" ,
|
||||
},
|
||||
{
|
||||
title: "사업자번호",
|
||||
key: "corporate" ,
|
||||
},
|
||||
{
|
||||
title: "단말기 ID(TID)",
|
||||
key: "device_id",
|
||||
},
|
||||
{
|
||||
title: "그룹",
|
||||
key: "group",
|
||||
},
|
||||
{
|
||||
title: "위치",
|
||||
key: "location",
|
||||
},
|
||||
{
|
||||
title: "상태",
|
||||
key: "status",
|
||||
renderItem: (item: any) => (
|
||||
<Badge size="sm" color={item.status === "정상" ? "success" : item.status === "장애" ? "error" : "warning"}>
|
||||
{item.status}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "장애발생시간",
|
||||
key: "error_time",
|
||||
},
|
||||
{
|
||||
title: "장애복구시간",
|
||||
key: "recovery_time",
|
||||
},
|
||||
{
|
||||
title: "관리자",
|
||||
key: "manager",
|
||||
},
|
||||
];
|
||||
|
||||
//TempCode, 차후에 API로 불러오는 값
|
||||
const tableData = [
|
||||
{
|
||||
reg_time: "2024-06-01 10:23:01",
|
||||
corporate: "123-45-67890",
|
||||
device_id: "TID001",
|
||||
group: "서울지점",
|
||||
location: "강남역 5번 출구",
|
||||
status: "정상",
|
||||
manager: "홍길동",
|
||||
},
|
||||
{
|
||||
reg_time: "2024-06-01 10:23:01",
|
||||
corporate: "234-56-78901",
|
||||
device_id: "TID002",
|
||||
group: "부산지점",
|
||||
location: "해운대해수욕장",
|
||||
status: "장애",
|
||||
error_time: "2024-06-10 09:15:01",
|
||||
recovery_time: "-",
|
||||
manager: "김철수",
|
||||
},
|
||||
{
|
||||
reg_time: "2024-06-01 10:23:01",
|
||||
corporate: "345-67-89012",
|
||||
device_id: "TID003",
|
||||
group: "대구지점",
|
||||
location: "동성로",
|
||||
status: "장애",
|
||||
error_time: "2024-06-09 14:30:01",
|
||||
recovery_time: "-",
|
||||
manager: "이영희",
|
||||
},
|
||||
{
|
||||
reg_time: "2024-06-01 10:23:01",
|
||||
corporate: "456-78-90123",
|
||||
device_id: "TID004",
|
||||
group: "광주지점",
|
||||
location: "충장로",
|
||||
status: "정상",
|
||||
error_time: "2024-06-09 14:30:01",
|
||||
recovery_time: "2024-06-09 15:30:01",
|
||||
manager: "전우치",
|
||||
},
|
||||
];
|
||||
//
|
||||
|
||||
|
||||
export default function Test2View() {
|
||||
const [ tableOffset, setTableOffset ] = useState<number>(0);
|
||||
const [ tableTotalCount, setTableTotalCount ] = useState<number>(0);
|
||||
|
||||
const { isOpen, openModal, closeModal } = useModal();
|
||||
|
||||
const options = [
|
||||
{ value: "disable", label: "미사용" },
|
||||
{ value: "active", label: "정상" },
|
||||
{ value: "error", label: "장애" },
|
||||
];
|
||||
|
||||
const handleSelectChange = (value: string) => {
|
||||
console.log("Selected value:", value);
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
console.log('page changed', page);
|
||||
};
|
||||
|
||||
const handleClickAdd = () => {
|
||||
openModal();
|
||||
};
|
||||
|
||||
|
||||
//useEffect(() => {
|
||||
// api.get('/api-test')
|
||||
// .then((resp) => {
|
||||
// console.log(resp)
|
||||
// })
|
||||
// .catch((err) => console.error(err));
|
||||
//}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageBreadcrumb pageTitle1="무인기기 관리" pageTitle2="실시간 상태" />
|
||||
|
||||
<div className="space-y-3">
|
||||
<ComponentCard title="무인기기 목록">
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-2 grid grid-cols-1 gap-3 sm:grid-cols-4">
|
||||
<div>
|
||||
<Label>단말기 상태</Label>
|
||||
<div className="relative">
|
||||
<Select
|
||||
options={options}
|
||||
placeholder="선택하세요"
|
||||
onChange={handleSelectChange}
|
||||
className="dark:bg-dark-900"
|
||||
/>
|
||||
<span className="absolute text-gray-500 -translate-y-1/2 pointer-events-none right-3 top-1/2 dark:text-gray-400">
|
||||
<ChevronDownIcon/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label>사업자 번호</Label>
|
||||
<Input type="text" />
|
||||
</div>
|
||||
<div>
|
||||
<Label>단말기 TID</Label>
|
||||
<Input type="text" />
|
||||
</div>
|
||||
<div>
|
||||
<Label>관리자</Label>
|
||||
<Input type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2 grid grid-cols-1 gap-3 sm:grid-cols-3">
|
||||
<div>
|
||||
<Label>그룹</Label>
|
||||
<Input type="text" />
|
||||
</div>
|
||||
<div>
|
||||
<Label>위치</Label>
|
||||
<Input type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2 grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<div className="space-y-2 grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<DatePicker
|
||||
id="date_start-picker"
|
||||
label="조회 시작일"
|
||||
placeholder=""
|
||||
onChange={(dates, currentDateString) => {
|
||||
// Handle your logic
|
||||
console.log({ dates, currentDateString });
|
||||
}}
|
||||
/>
|
||||
<DatePicker
|
||||
id="date_end-picker"
|
||||
label="조회 종료일"
|
||||
placeholder=""
|
||||
onChange={(dates, currentDateString) => {
|
||||
// Handle your logic
|
||||
console.log({ dates, currentDateString });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-5">
|
||||
<Button size="sm" variant="outline" startIcon={<DocsIcon />}>엑셀파일 다운로드</Button>
|
||||
<Button size="sm" variant="primary">조회</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CtTable1 columns={columns} bodyData={tableData}
|
||||
offset={tableOffset} totalCount={tableTotalCount} countPerPage={COUNT_PER_PAGE} pageNumCount={PAGE_NUM_COUNT}
|
||||
onClickPageChange={handlePageChange} />
|
||||
|
||||
<div>
|
||||
<Button size="sm" variant="primary" startIcon={<PlusIcon />} onClick={handleClickAdd}>신규 등록하기</Button>
|
||||
</div>
|
||||
|
||||
</ComponentCard>
|
||||
|
||||
<AddTest2ViewModal isOpen={isOpen} openModal={openModal} closeModal={closeModal} />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user