@things-factory/kpi 10.1.248 → 10.1.249

package/dist-client/pages/kpi/kpi-overview.js

@@ -0,0 +1,361 @@
+import { __decorate, __metadata } from "tslib";
+import { html, css } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { PageView } from '@operato/shell';
+import { i18next } from '@operato/i18n';
+import { client } from '@operato/graphql';
+import gql from 'graphql-tag';
+const GET_KPI_OVERVIEW = gql `
+  query {
+    kpiCategories: kpisLevel1 {
+      id
+      name
+      description
+      active
+      kpis: children {
+        id
+        name
+        description
+        formula
+        active
+        grades
+      }
+    }
+  }
+`;
+let KpiOverview = class KpiOverview extends PageView {
+    constructor() {
+        super(...arguments);
+        this.selectedGroup = 0;
+        this.selectedKpi = 0;
+        this.kpiCategories = [];
+        this.loading = true;
+        this.error = null;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      background: #f6f6f6;
+      box-sizing: border-box;
+      padding: 16px 24px;
+    }
+    .overview-container {
+      display: block;
+      margin: 8px 0 24px 0;
+    }
+    .overview-left {
+      display: block;
+    }
+    .overview-title {
+      color: #0c4da2;
+      font-size: 1.125rem;
+      font-weight: 700;
+      letter-spacing: -0.05em;
+      margin: 0 0 8px 0;
+    }
+    .overview-desc {
+      font-size: 0.875rem;
+      color: #212529;
+      letter-spacing: -0.05em;
+      line-height: 1;
+    }
+    .group-tabs {
+      display: flex;
+      margin: 8px 0 0 0;
+      justify-content: flex-start;
+    }
+    .group-tab {
+      padding: 10px 15px;
+      border-radius: 8px 8px 0 0;
+      background: rgba(46, 164, 223, 0.1);
+      cursor: pointer;
+      font-size: 1rem;
+      font-weight: 400;
+      border: none;
+      outline: none;
+      transition: background 0.2s;
+    }
+    .group-tab[selected] {
+      background: #0c4da2;
+      color: #ffffff;
+      font-weight: 700;
+      box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.1);
+    }
+    .tab-icon {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      border-radius: 2px;
+      background: #35618e;
+      vertical-align: middle;
+    }
+    .group-tab[selected] .tab-icon {
+      background: #ffffff;
+    }
+    .tab-label {
+      margin-left: 6px;
+      vertical-align: middle;
+    }
+    .kpi-list {
+      display: flex;
+      gap: 8px;
+      margin: 0 0 32px 0;
+      justify-content: center;
+    }
+    .kpi-item {
+      padding: 8px 20px;
+      border-radius: 12px;
+      background: #f5f5f5;
+      cursor: pointer;
+      font-size: 1rem;
+      border: none;
+      outline: none;
+      transition: background 0.2s;
+    }
+    .kpi-item[selected] {
+      background: #bdf;
+      color: #222;
+      font-weight: bold;
+    }
+    .main-content {
+      display: flex;
+      gap: 0;
+      align-items: stretch;
+      justify-content: stretch;
+      background: #fff;
+      border: 2px solid #0c4da2;
+      overflow: hidden;
+    }
+    .markdown {
+      background: #fff;
+      padding: 25px;
+      min-height: 240px;
+      flex: 1 1 auto;
+      font-size: 0.875rem;
+      color: #212529;
+    }
+    .markdown p {
+      line-height: 1.7142857142857142;
+      margin: 0 0 12px 0;
+    }
+    .toc {
+      flex: 0 0 240px;
+      background: linear-gradient(180deg, rgba(137, 204, 237, 0.2) 0%, rgba(137, 204, 237, 0) 100%);
+      border-left: 1px solid rgba(46, 164, 223, 0.1);
+      padding: 30px 15px;
+      font-size: 1rem;
+      color: #212529;
+    }
+    .toc img {
+      width: 25px;
+      height: 25px;
+    }
+    .submenu-header {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 14px;
+    }
+    .submenu-icon {
+      width: 25.5px;
+      height: 28.67px;
+      border-radius: 2px;
+      background: #02a8a2;
+      flex: 0 0 auto;
+    }
+    .submenu-title {
+      font-weight: 700;
+      font-size: 1.25rem;
+      color: #0c4da2;
+    }
+    .toc-title {
+      color: #0c4da2;
+      font-size: 20px;
+      font-weight: 700;
+      line-height: 20px;
+      margin-bottom: 15px;
+      margin-top: 3px;
+    }
+    .toc-list {
+      margin: 0 0 8px 0;
+      padding: 0;
+      list-style: none;
+    }
+    .toc-list li {
+      margin-bottom: 10px;
+    }
+    .toc-btn {
+      display: block;
+      margin: 0;
+      padding: 8px 0 8px 12px;
+      border: none;
+      border-left: 3px solid transparent;
+      border-radius: 0;
+      background: transparent;
+      color: #212529;
+      cursor: pointer;
+      font-size: 1rem;
+      text-align: left;
+      transition: background 0.2s;
+    }
+    .toc-btn:hover {
+      background: rgba(0, 0, 0, 0.03);
+    }
+    .toc-btn[selected] {
+      border-left-color: #4cbb49;
+      font-weight: 700;
+      color: #212529;
+    }
+    .kpi-title {
+      font-size: 1.125rem;
+      font-weight: 700;
+      margin-bottom: 8px;
+      color: #02a8a2;
+    }
+    .kpi-formula {
+      margin: 3px 0 20px 0;
+      font-weight: 700;
+      color: #212529;
+    }
+    .subtitle {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      margin-top: 20px;
+      font-weight: 700;
+      color: #0c4da2;
+    }
+    .subtitle img {
+      width: 15px;
+      height: 15px;
+    }
+    .subtitle-icon {
+      width: 20px;
+      height: 20px;
+      border-radius: 2px;
+      background: #02a8a2;
+      flex: 0 0 auto;
+    }
+    .grades-section {
+      margin-top: 16px;
+      background: #fff;
+      border-radius: 8px;
+      padding: 16px;
+      border: 2px solid #0c4da2;
+    }
+    .grades-section b {
+      display: block;
+      margin-bottom: 8px;
+    }
+  `; }
+    get context() {
+        return {
+            title: i18next.t('title.kpi overview')
+        };
+    }
+    async firstUpdated() {
+        try {
+            const { data } = await client.query({ query: GET_KPI_OVERVIEW });
+            this.kpiCategories = data.kpiCategories;
+            this.loading = false;
+        }
+        catch (e) {
+            this.error = e instanceof Error ? e : new Error(String(e));
+            this.loading = false;
+        }
+    }
+    render() {
+        if (this.error)
+            return html `<div>에러: ${this.error?.message}</div>`;
+        if (!this.kpiCategories.length)
+            return html `<div>KPI 카테고리가 없습니다.</div>`;
+        const selctedY = this.kpiCategories?.[this.selectedGroup] || '';
+        const group = this.kpiCategories[this.selectedGroup];
+        const kpi = group?.kpis?.[this.selectedKpi];
+        return html `
+      <div class="overview-container">
+        <div class="overview-left">
+          <div class="overview-title">KPI개요</div>
+          <div class="overview-desc">
+            건설현장 KPI관리 시스템은 프로젝트 성과를 측정하고, 모니터링하여 효율적인 공정 관리를 지원합니다. 주요
+            지표를 통해 현장 생산성, 품질, 안전 등을 실시간으로 파악할 수 있습니다.
+          </div>
+        </div>
+      </div>
+      <div class="group-tabs">
+        ${this.kpiCategories.map((g, i) => html `
+            <button
+              class="group-tab"
+              ?selected=${i === this.selectedGroup}
+              @click=${() => {
+            this.selectedGroup = i;
+            this.selectedKpi = 0;
+        }}
+            >
+              ${g.name}
+            </button>
+          `)}
+      </div>
+      <div class="main-content">
+        <div class="markdown">
+          <div class="kpi-title">${kpi?.name || ''}</div>
+          <div>${kpi?.description || ''}</div>
+          ${kpi?.formula
+            ? html `
+                <div class="subtitle"><img src="/assets/images/green-calendar.svg" />주요산식</div>
+                <div class="kpi-formula">${kpi?.formula}</div>
+              `
+            : ''}
+        </div>
+        <div class="toc">
+          <img src="/assets/images/green-calendar.svg" />
+          <div class="toc-title">${selctedY.name} 지표</div>
+          <ul class="toc-list">
+            ${group?.kpis?.map((k, i) => html `
+                <li>
+                  <button class="toc-btn" ?selected=${i === this.selectedKpi} @click=${() => (this.selectedKpi = i)}>
+                    ${k.name}
+                  </button>
+                </li>
+              `)}
+          </ul>
+        </div>
+      </div>
+      ${kpi?.grades && Array.isArray(kpi.grades) && kpi.grades.length > 0
+            ? html `
+            <div class="grades-section">
+              <b>등급 구간</b>
+              <ul>
+                ${kpi.grades.map((g) => html `<li>${g.name}: ${g.minValue}~${g.maxValue} (${g.description || ''})</li>`)}
+              </ul>
+            </div>
+          `
+            : ''}
+    `;
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiOverview.prototype, "selectedGroup", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiOverview.prototype, "selectedKpi", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], KpiOverview.prototype, "kpiCategories", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiOverview.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], KpiOverview.prototype, "error", void 0);
+KpiOverview = __decorate([
+    customElement('kpi-overview')
+], KpiOverview);
+export { KpiOverview };
+//# sourceMappingURL=kpi-overview.js.map

package/dist-client/pages/kpi/kpi-overview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-overview.js","sourceRoot":"","sources":["../../../client/pages/kpi/kpi-overview.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { PageView } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\nimport { client } from '@operato/graphql'\nimport gql from 'graphql-tag'\n\nconst GET_KPI_OVERVIEW = gql`\n  query {\n    kpiCategories: kpisLevel1 {\n      id\n      name\n      description\n      active\n      kpis: children {\n        id\n        name\n        description\n        formula\n        active\n        grades\n      }\n    }\n  }\n`\n\n@customElement('kpi-overview')\nexport class KpiOverview extends PageView {\n  static styles = css`\n    :host {\n      display: block;\n      background: #f6f6f6;\n      box-sizing: border-box;\n      padding: 16px 24px;\n    }\n    .overview-container {\n      display: block;\n      margin: 8px 0 24px 0;\n    }\n    .overview-left {\n      display: block;\n    }\n    .overview-title {\n      color: #0c4da2;\n      font-size: 1.125rem;\n      font-weight: 700;\n      letter-spacing: -0.05em;\n      margin: 0 0 8px 0;\n    }\n    .overview-desc {\n      font-size: 0.875rem;\n      color: #212529;\n      letter-spacing: -0.05em;\n      line-height: 1;\n    }\n    .group-tabs {\n      display: flex;\n      margin: 8px 0 0 0;\n      justify-content: flex-start;\n    }\n    .group-tab {\n      padding: 10px 15px;\n      border-radius: 8px 8px 0 0;\n      background: rgba(46, 164, 223, 0.1);\n      cursor: pointer;\n      font-size: 1rem;\n      font-weight: 400;\n      border: none;\n      outline: none;\n      transition: background 0.2s;\n    }\n    .group-tab[selected] {\n      background: #0c4da2;\n      color: #ffffff;\n      font-weight: 700;\n      box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.1);\n    }\n    .tab-icon {\n      display: inline-block;\n      width: 20px;\n      height: 20px;\n      border-radius: 2px;\n      background: #35618e;\n      vertical-align: middle;\n    }\n    .group-tab[selected] .tab-icon {\n      background: #ffffff;\n    }\n    .tab-label {\n      margin-left: 6px;\n      vertical-align: middle;\n    }\n    .kpi-list {\n      display: flex;\n      gap: 8px;\n      margin: 0 0 32px 0;\n      justify-content: center;\n    }\n    .kpi-item {\n      padding: 8px 20px;\n      border-radius: 12px;\n      background: #f5f5f5;\n      cursor: pointer;\n      font-size: 1rem;\n      border: none;\n      outline: none;\n      transition: background 0.2s;\n    }\n    .kpi-item[selected] {\n      background: #bdf;\n      color: #222;\n      font-weight: bold;\n    }\n    .main-content {\n      display: flex;\n      gap: 0;\n      align-items: stretch;\n      justify-content: stretch;\n      background: #fff;\n      border: 2px solid #0c4da2;\n      overflow: hidden;\n    }\n    .markdown {\n      background: #fff;\n      padding: 25px;\n      min-height: 240px;\n      flex: 1 1 auto;\n      font-size: 0.875rem;\n      color: #212529;\n    }\n    .markdown p {\n      line-height: 1.7142857142857142;\n      margin: 0 0 12px 0;\n    }\n    .toc {\n      flex: 0 0 240px;\n      background: linear-gradient(180deg, rgba(137, 204, 237, 0.2) 0%, rgba(137, 204, 237, 0) 100%);\n      border-left: 1px solid rgba(46, 164, 223, 0.1);\n      padding: 30px 15px;\n      font-size: 1rem;\n      color: #212529;\n    }\n    .toc img {\n      width: 25px;\n      height: 25px;\n    }\n    .submenu-header {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      margin-bottom: 14px;\n    }\n    .submenu-icon {\n      width: 25.5px;\n      height: 28.67px;\n      border-radius: 2px;\n      background: #02a8a2;\n      flex: 0 0 auto;\n    }\n    .submenu-title {\n      font-weight: 700;\n      font-size: 1.25rem;\n      color: #0c4da2;\n    }\n    .toc-title {\n      color: #0c4da2;\n      font-size: 20px;\n      font-weight: 700;\n      line-height: 20px;\n      margin-bottom: 15px;\n      margin-top: 3px;\n    }\n    .toc-list {\n      margin: 0 0 8px 0;\n      padding: 0;\n      list-style: none;\n    }\n    .toc-list li {\n      margin-bottom: 10px;\n    }\n    .toc-btn {\n      display: block;\n      margin: 0;\n      padding: 8px 0 8px 12px;\n      border: none;\n      border-left: 3px solid transparent;\n      border-radius: 0;\n      background: transparent;\n      color: #212529;\n      cursor: pointer;\n      font-size: 1rem;\n      text-align: left;\n      transition: background 0.2s;\n    }\n    .toc-btn:hover {\n      background: rgba(0, 0, 0, 0.03);\n    }\n    .toc-btn[selected] {\n      border-left-color: #4cbb49;\n      font-weight: 700;\n      color: #212529;\n    }\n    .kpi-title {\n      font-size: 1.125rem;\n      font-weight: 700;\n      margin-bottom: 8px;\n      color: #02a8a2;\n    }\n    .kpi-formula {\n      margin: 3px 0 20px 0;\n      font-weight: 700;\n      color: #212529;\n    }\n    .subtitle {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      margin-top: 20px;\n      font-weight: 700;\n      color: #0c4da2;\n    }\n    .subtitle img {\n      width: 15px;\n      height: 15px;\n    }\n    .subtitle-icon {\n      width: 20px;\n      height: 20px;\n      border-radius: 2px;\n      background: #02a8a2;\n      flex: 0 0 auto;\n    }\n    .grades-section {\n      margin-top: 16px;\n      background: #fff;\n      border-radius: 8px;\n      padding: 16px;\n      border: 2px solid #0c4da2;\n    }\n    .grades-section b {\n      display: block;\n      margin-bottom: 8px;\n    }\n  `\n\n  get context() {\n    return {\n      title: i18next.t('title.kpi overview')\n    }\n  }\n\n  @state() selectedGroup = 0\n  @state() selectedKpi = 0\n  @state() kpiCategories: any[] = []\n  @state() loading = true\n  @state() error: Error | null = null\n\n  async firstUpdated() {\n    try {\n      const { data } = await client.query({ query: GET_KPI_OVERVIEW })\n      this.kpiCategories = data.kpiCategories\n      this.loading = false\n    } catch (e) {\n      this.error = e instanceof Error ? e : new Error(String(e))\n      this.loading = false\n    }\n  }\n\n  render() {\n    if (this.error) return html`<div>에러: ${this.error?.message}</div>`\n    if (!this.kpiCategories.length) return html`<div>KPI 카테고리가 없습니다.</div>`\n\n    const selctedY = this.kpiCategories?.[this.selectedGroup] || ''\n    const group = this.kpiCategories[this.selectedGroup] as any\n    const kpi = group?.kpis?.[this.selectedKpi] as any\n\n    return html`\n      <div class=\"overview-container\">\n        <div class=\"overview-left\">\n          <div class=\"overview-title\">KPI개요</div>\n          <div class=\"overview-desc\">\n            건설현장 KPI관리 시스템은 프로젝트 성과를 측정하고, 모니터링하여 효율적인 공정 관리를 지원합니다. 주요\n            지표를 통해 현장 생산성, 품질, 안전 등을 실시간으로 파악할 수 있습니다.\n          </div>\n        </div>\n      </div>\n      <div class=\"group-tabs\">\n        ${this.kpiCategories.map(\n          (g, i) => html`\n            <button\n              class=\"group-tab\"\n              ?selected=${i === this.selectedGroup}\n              @click=${() => {\n                this.selectedGroup = i\n                this.selectedKpi = 0\n              }}\n            >\n              ${g.name}\n            </button>\n          `\n        )}\n      </div>\n      <div class=\"main-content\">\n        <div class=\"markdown\">\n          <div class=\"kpi-title\">${kpi?.name || ''}</div>\n          <div>${kpi?.description || ''}</div>\n          ${kpi?.formula\n            ? html`\n                <div class=\"subtitle\"><img src=\"/assets/images/green-calendar.svg\" />주요산식</div>\n                <div class=\"kpi-formula\">${kpi?.formula}</div>\n              `\n            : ''}\n        </div>\n        <div class=\"toc\">\n          <img src=\"/assets/images/green-calendar.svg\" />\n          <div class=\"toc-title\">${selctedY.name} 지표</div>\n          <ul class=\"toc-list\">\n            ${group?.kpis?.map(\n              (k, i) => html`\n                <li>\n                  <button class=\"toc-btn\" ?selected=${i === this.selectedKpi} @click=${() => (this.selectedKpi = i)}>\n                    ${k.name}\n                  </button>\n                </li>\n              `\n            )}\n          </ul>\n        </div>\n      </div>\n      ${kpi?.grades && Array.isArray(kpi.grades) && kpi.grades.length > 0\n        ? html`\n            <div class=\"grades-section\">\n              <b>등급 구간</b>\n              <ul>\n                ${kpi.grades.map(\n                  (g: any) => html`<li>${g.name}: ${g.minValue}~${g.maxValue} (${g.description || ''})</li>`\n                )}\n              </ul>\n            </div>\n          `\n        : ''}\n    `\n  }\n}\n"]}

package/dist-client/pages/kpi/kpi-tree-page.d.ts

@@ -0,0 +1,51 @@
+import '@operato/data-tree';
+import './kpi-view';
+import { PropertyValues } from 'lit';
+import { PageView } from '@operato/shell';
+import { KpiImporter } from './kpi-importer';
+import { KpiView } from './kpi-view';
+declare const KpiTreePage_base: (new (...args: any[]) => import("lit").LitElement) & typeof PageView & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+export declare class KpiTreePage extends KpiTreePage_base {
+    static styles: import("lit").CSSResult[];
+    static get scopedElements(): {
+        'kpi-importer': typeof KpiImporter;
+    };
+    root?: any;
+    selected?: any;
+    kpi?: any;
+    modified: boolean;
+    appendable: boolean;
+    kpiView: KpiView;
+    get context(): {
+        title: string;
+        help: string;
+        actions: {
+            icon: string;
+            title: string;
+            action: () => Promise<void>;
+            emphasis: {
+                danger: boolean;
+            };
+        }[];
+        exportable: {
+            name: string;
+            data: () => Promise<void>;
+        };
+        importable: {
+            handler: (records: any[]) => Promise<void>;
+        };
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changes: PropertyValues<this>): void;
+    onSelect(e: CustomEvent): void;
+    reset(): void;
+    create(): Promise<void>;
+    save(): Promise<void>;
+    delete(): Promise<void>;
+    pageInitialized(lifecycle: any): Promise<void>;
+    pageUpdated(changes: any, lifecycle: any): Promise<void>;
+    fetch(): Promise<void>;
+    exportHandler(): Promise<void>;
+    importHandler(records: any[]): Promise<void>;
+}
+export {};