@dssp/project 1.0.0-alpha.7 → 1.0.0-alpha.9

package/dist-client/pages/project/popup/checklist/schedule-checklist-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schedule-checklist-view.js","sourceRoot":"","sources":["../../../../../client/pages/project/popup/checklist/schedule-checklist-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/fab/fab.js'\nimport '@material/web/icon/icon.js'\nimport gql from 'graphql-tag'\nimport { client } from '@operato/graphql'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'\nimport '@operato/input/ox-input-signature.js'\nimport { store } from '@operato/shell'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\nimport { openPopup } from '@operato/layout'\nimport './comment-list-popup'\nimport './attachment-list-popup'\n\nexport const enum ChecklistMode {\n  VIEWER = 'VIEWER',\n  EDITOR = 'EDITOR'\n}\nexport enum ChecklistTypeMainType {\n  BASIC = '10',\n  NON_BASIC = '20'\n}\nexport const CHECKLIST_MAIN_TYPE_LIST = {\n  [ChecklistTypeMainType.BASIC]: '기본 업무',\n  [ChecklistTypeMainType.NON_BASIC]: '기본 외 업무'\n}\nexport enum BuildingInspectionStatus {\n  WAIT = 'WAIT',\n  OVERALL_WAIT = 'OVERALL_WAIT',\n  REQUEST = 'REQUEST',\n  OVERALL_REQUEST = 'OVERALL_REQUEST',\n  PASS = 'PASS',\n  FAIL = 'FAIL'\n}\nexport const BUILDING_INSPECTION_STATUS_DISPLAY = {\n  [BuildingInspectionStatus.WAIT]: '검측 대기',\n  [BuildingInspectionStatus.OVERALL_WAIT]: '검측 대기',\n  [BuildingInspectionStatus.REQUEST]: '검측 요청',\n  [BuildingInspectionStatus.OVERALL_REQUEST]: '검측 요청',\n  [BuildingInspectionStatus.PASS]: '합격',\n  [BuildingInspectionStatus.FAIL]: '불합격'\n}\n\nexport enum ChecklistReferenceType {\n  INSPECTION = 'INSPECTION', // 검측\n  SCHEDULE = 'SCHEDULE' // 공정표\n}\n\n@customElement('schedule-checklist-view')\nclass ScheduleChecklistView extends connect(store)(LitElement) {\n  static styles = [\n    ButtonContainerStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        padding: var(--spacing-large, 12px);\n        padding-top: 0;\n        font-size: 14px;\n        min-width: 800px;\n      }\n\n      [bold] {\n        font-weight: bold;\n      }\n\n      div[name] {\n        display: flex;\n        color: #586878;\n        font-size: 24px;\n        align-items: center;\n        justify-content: center;\n      }\n\n      table {\n        width: 100%;\n        font-size: 15px;\n        color: #586878;\n        text-align: left;\n        border-collapse: collapse;\n        td,\n        th {\n          border: 1px rgba(51, 51, 51, 0.2) solid;\n          padding-inline: var(--spacing-medium, 8px);\n          vertical-align: middle;\n        }\n        th {\n          background-color: #efefef;\n          font-weight: bold;\n        }\n        td {\n          height: 33px;\n          background-color: var(--md-sys-color-on-primary);\n          &[radio] {\n            text-align: center;\n            width: 50px;\n          }\n        }\n      }\n\n      table[header] {\n        margin-top: var(--spacing-small, 4px);\n\n        td {\n          min-width: 180px;\n          border-left: none;\n        }\n        th {\n          width: 110px;\n          border-right: none;\n        }\n      }\n\n      table[body] {\n        border: 2px solid var(--md-sys-color-on-primary-container);\n        border-bottom: none;\n        margin-top: var(--spacing-medium, 8px);\n\n        th {\n          text-align: center;\n\n          &[type] {\n            min-width: 150px;\n          }\n          &[inspection-name] {\n            min-width: 250px;\n          }\n          &[result] {\n            width: 270px;\n          }\n          &[criteria] {\n            width: 90px;\n          }\n          &[small] {\n            width: 60px;\n          }\n        }\n        td {\n          &[main-type] {\n            width: 50px;\n            text-align: center;\n            word-break: keep-all;\n          }\n\n          &[attachment] {\n            text-align: center;\n            cursor: pointer;\n\n            * {\n              vertical-align: middle;\n            }\n          }\n          &[comment] {\n            cursor: pointer;\n            text-align: center;\n\n            * {\n              vertical-align: middle;\n            }\n          }\n          &[disabled] * {\n            opacity: 0.6;\n          }\n        }\n      }\n\n      table[tail] {\n        border: 2px solid var(--md-sys-color-on-primary-container);\n        border-top: none;\n        margin-top: -1px;\n\n        td {\n          width: 25%;\n          border-left: none;\n          text-align: center;\n          position: relative;\n          background-color: var(--md-sys-color-on-primary);\n          font-size: 14px;\n        }\n        th {\n          width: 25%;\n          border-right: none;\n        }\n\n        span[sign-text] {\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n          pointer-events: none;\n        }\n        ox-input-signature {\n          margin: var(--spacing-medium, 8px);\n\n          &[disabled] {\n            background: #eee;\n          }\n        }\n      }\n\n      div[footer] {\n        display: flex;\n        flex-direction: column;\n        gap: var(--spacing-tiny, 2px);\n        font-size: 12px;\n        margin-top: var(--spacing-medium, 8px);\n        color: #586878;\n        text-indent: -9px;\n        padding-left: var(--spacing-medium, 8px);\n      }\n\n      .stt-float-btns {\n        position: absolute;\n        top: 0;\n        right: 0;\n        display: flex;\n        gap: 8px;\n        z-index: 10;\n      }\n      .stt-float-btns button {\n        background: #fff;\n        border: 1px solid #ccc;\n        border-radius: 50%;\n        width: 38px;\n        height: 38px;\n        font-size: 18px;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n        cursor: pointer;\n        transition: background 0.2s;\n        outline: none;\n      }\n      .stt-float-btns button:hover {\n        background: #f2f2f2;\n      }\n      div[title-row] {\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin-bottom: 8px;\n      }\n      div[name] {\n        color: #586878;\n        font-size: 24px;\n        font-weight: bold;\n        flex: 1;\n        text-align: center;\n      }\n\n      @keyframes pulse {\n        0% {\n          filter: drop-shadow(0 0 0 #d32f2f);\n        }\n        70% {\n          filter: drop-shadow(0 0 8px #d32f2f);\n        }\n        100% {\n          filter: drop-shadow(0 0 0 #d32f2f);\n        }\n      }\n      .stt-fab[active] md-icon {\n        color: #d32f2f;\n        animation: pulse 1s infinite;\n      }\n    `\n  ]\n\n  @property({ type: String }) mode: ChecklistMode = ChecklistMode.VIEWER\n  @property({ type: Object }) checklist: any = {}\n  @property({ type: Object }) buildingComplex = {\n    id: '',\n    taskConstructorEmails: [] as string[],\n    overallConstructorEmails: [] as string[],\n    taskSupervisoryEmails: [] as string[],\n    overallSupervisoryEmails: [] as string[]\n  }\n  @property({ type: String }) status: BuildingInspectionStatus = BuildingInspectionStatus.WAIT\n\n  render() {\n    const today = this._getDate(new Date())\n\n    // 시공자 스탭 여부\n    const isConstructorStep =\n      this.status == BuildingInspectionStatus.WAIT ||\n      this.status == BuildingInspectionStatus.OVERALL_WAIT ||\n      this.status == BuildingInspectionStatus.FAIL\n\n    // 감리자 스탭 여부\n    const isSupervisoryStep =\n      this.status == BuildingInspectionStatus.REQUEST || this.status == BuildingInspectionStatus.OVERALL_REQUEST\n\n    // 현재 스탭에 해당하는 계정인지 체크 (편집모드만)\n    let havePermissionByStatus: boolean = false\n    let isTaskConstructor: boolean = false\n    let isOverallConstructor: boolean = false\n    let isTaskSupervisory: boolean = false\n    let isOverallSupervisory: boolean = false\n\n    if (this.mode == ChecklistMode.EDITOR && this.status) {\n      const email = (store.getState() as any).auth?.user?.email\n      // 현재 유저가 \"공종별 시공 관리자\" 인지 체크\n      isTaskConstructor = this.buildingComplex.taskConstructorEmails?.includes(email) || false\n      // 현재 유저가 \"총괄 시공 책임자\" 인지 체크\n      isOverallConstructor = this.buildingComplex.overallConstructorEmails?.includes(email) || false\n      // 현재 유저가 \"공종별 감리 책임자\" 인지 체크\n      isTaskSupervisory = this.buildingComplex.taskSupervisoryEmails?.includes(email) || false\n      // 현재 유저가 \"총괄 감리 책임자\" 인지 체크\n      isOverallSupervisory = this.buildingComplex.overallSupervisoryEmails?.includes(email) || false\n      // 스탭이 시공자 스탭일때에 내가 시공자 권한이 있는지 체크\n      havePermissionByStatus = isConstructorStep\n        ? isTaskConstructor || isOverallConstructor\n        : isTaskSupervisory || isOverallSupervisory\n    }\n\n    // 체크리스트 아이템 정렬\n    this.checklist?.checklistItems?.sort((a, b) => {\n      // 1순위: mainType 오름차순\n      if (a.mainType < b.mainType) return -1\n      if (a.mainType > b.mainType) return 1\n\n      // 2순위: detailType 오름차순\n      if (a.detailType < b.detailType) return -1\n      if (a.detailType > b.detailType) return 1\n\n      // 3순위: sequence 오름차순\n      return a.sequence - b.sequence\n    })\n\n    const processedItems = this.drawChecklistItems(this.checklist?.checklistItems || [])\n\n    return html`\n      <div title-row>\n        <div name>${this.checklist.name}</div>\n      </div>\n      <table header>\n        <tr>\n          <th>공종</th>\n          <td>${this.checklist.constructionType}</td>\n          <th>문서 번호</th>\n          <td>${this.checklist.documentNo}</td>\n        </tr>\n        <tr>\n          <th>세부 공종</th>\n          <td>${this.checklist.constructionDetailType}</td>\n          <th>검측 상태</th>\n          <td>${BUILDING_INSPECTION_STATUS_DISPLAY[this.status]}</td>\n        </tr>\n      </table>\n\n      <table body>\n        <thead>\n          <tr>\n            <th colspan=\"2\" rowspan=\"3\" type>구분</th>\n            <th rowspan=\"3\" inspection-name>검사항목</th>\n            <th rowspan=\"3\" criteria>검사기준</th>\n            <th colspan=\"4\" result>검사결과</th>\n            <th rowspan=\"3\" small>첨부자료</th>\n            <th rowspan=\"3\" small>조치사항</th>\n          </tr>\n          <tr>\n            <th colspan=\"2\">시공자</th>\n            <th colspan=\"2\">감리자</th>\n          </tr>\n          <tr>\n            <th>적합</th>\n            <th>부적합</th>\n            <th>적합</th>\n            <th>부적합</th>\n          </tr>\n        </thead>\n        <tbody>\n          ${processedItems.map(({ item, showMainTypeCell, mainTypeRowspan, showDetailTypeCell, detailTypeRowspan }, idx) => {\n            return html` <tr>\n              ${showMainTypeCell\n                ? html`<td main-type bold rowspan=\"${mainTypeRowspan}\">${CHECKLIST_MAIN_TYPE_LIST[item.mainType]}</td>`\n                : ''}\n              ${showDetailTypeCell ? html` <td bold rowspan=\"${detailTypeRowspan}\">${item.detailType}</td> ` : ''}\n\n              <td>${idx + 1}. ${item.name}</td>\n              <td>${item.inspctionCriteria}</td>\n              <td radio>\n                <md-radio\n                  item-id=${item.id}\n                  item-name=\"constructionConfirmStatus\"\n                  name=${'radio-construction-' + item.id}\n                  value=\"T\"\n                  .checked=${item.constructionConfirmStatus === 'T'}\n                  ?disabled=${!isConstructorStep || !havePermissionByStatus}\n                  @change=${this._onChangeConfirmStatus}\n                ></md-radio>\n              </td>\n              <td radio>\n                <md-radio\n                  item-id=${item.id}\n                  item-name=\"constructionConfirmStatus\"\n                  name=${'radio-construction-' + item.id}\n                  value=\"F\"\n                  .checked=${item.constructionConfirmStatus === 'F'}\n                  ?disabled=${!isConstructorStep || !havePermissionByStatus}\n                  @change=${this._onChangeConfirmStatus}\n                ></md-radio>\n              </td>\n              <td radio>\n                <md-radio\n                  item-id=${item.id}\n                  item-name=\"supervisoryConfirmStatus\"\n                  name=${'radio-supervisory-' + item.id}\n                  value=\"T\"\n                  .checked=${item.supervisoryConfirmStatus === 'T'}\n                  ?disabled=${!isSupervisoryStep || !havePermissionByStatus}\n                  @change=${this._onChangeConfirmStatus}\n                ></md-radio>\n              </td>\n              <td radio>\n                <md-radio\n                  item-id=${item.id}\n                  item-name=\"supervisoryConfirmStatus\"\n                  name=${'radio-supervisory-' + item.id}\n                  value=\"F\"\n                  .checked=${item.supervisoryConfirmStatus === 'F'}\n                  ?disabled=${!isSupervisoryStep || !havePermissionByStatus}\n                  @change=${this._onChangeConfirmStatus}\n                ></md-radio>\n              </td>\n              <td\n                attachment\n                ?disabled=${this.status == BuildingInspectionStatus.PASS}\n                @click=${() => this._onClickAttachment(item.id)}\n              >\n                <md-icon slot=\"icon\">attach_file</md-icon>\n                <span>${item?.checklistItemAttachmentCount || ''}</span>\n              </td>\n              <td comment ?disabled=${this.status == BuildingInspectionStatus.PASS} @click=${() => this._onClickComment(item.id)}>\n                <md-icon slot=\"icon\">chat</md-icon>\n                <span>${item?.checklistItemCommentCount || ''}</span>\n              </td>\n            </tr>`\n          })}\n        </tbody>\n      </table>\n\n      <table tail>\n        <tbody>\n          <tr first>\n            <th rowspan=\"2\">시공자 점검일</th>\n            <td rowspan=\"2\">\n              ${this.mode == ChecklistMode.VIEWER ? today : this._getDate(this.checklist.constructionInspectionDate)}\n            </td>\n            <th>공종별 시공 관리자</th>\n            <td>\n              <span sign-text>(인)</span>\n              <ox-input-signature\n                .value=${this.checklist.taskConstructorSignature}\n                name=\"taskConstructorSignature\"\n                @change=${this._onChangeSignature}\n                ?disabled=${(this.status != BuildingInspectionStatus.WAIT && this.status != BuildingInspectionStatus.FAIL) ||\n                !isTaskConstructor}\n              >\n              </ox-input-signature>\n            </td>\n          </tr>\n          <tr>\n            <th>총괄 시공 책임자</th>\n            <td>\n              <span sign-text>(인)</span>\n              <ox-input-signature\n                .value=${this.checklist.overallConstructorSignature}\n                name=\"overallConstructorSignature\"\n                @change=${this._onChangeSignature}\n                ?disabled=${this.status != BuildingInspectionStatus.OVERALL_WAIT || !isOverallConstructor}\n              >\n              </ox-input-signature>\n            </td>\n          </tr>\n          <tr>\n            <th rowspan=\"2\">감리자 점검일</th>\n            <td rowspan=\"2\">\n              ${this.mode == ChecklistMode.VIEWER ? today : this._getDate(this.checklist.supervisorInspectionDate)}\n            </td>\n            <th>공종별 감리 책임자</th>\n            <td>\n              <span sign-text>(인)</span>\n              <ox-input-signature\n                .value=${this.checklist.taskSupervisorySignature}\n                name=\"taskSupervisorySignature\"\n                @change=${this._onChangeSignature}\n                ?disabled=${this.status != BuildingInspectionStatus.REQUEST || !isTaskSupervisory}\n              >\n              </ox-input-signature>\n            </td>\n          </tr>\n          <tr>\n            <th>총괄 감리 책임자</th>\n            <td>\n              <span sign-text>(인)</span>\n              <ox-input-signature\n                .value=${this.checklist.overallSupervisorySignature}\n                name=\"overallSupervisorySignature\"\n                @change=${this._onChangeSignature}\n                ?disabled=${this.status != BuildingInspectionStatus.OVERALL_REQUEST || !isOverallSupervisory}\n              >\n              </ox-input-signature>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n\n      <div footer>\n        <div>\n          - 검사결과는 1차, 2차로 구분 재검측시 2차에 기록하고 검사기준도 검사결과와 비교될 수 있도록 시방서 또는 도면 등에 있는\n          수치를 작성하며, 수치가 없는 검사항목은 시방서 또는 설계도서에 있는 내용과 검사한 내용으로 작성함\n        </div>\n        <div>- 검사항목 및 검사기준은 각 공종별로 감리원과 협의하여 작성할 것</div>\n      </div>\n    `\n  }\n\n  private _onChangeConfirmStatus(e: Event) {\n    const target = e.target as HTMLInputElement\n    const itemId = target.getAttribute('item-id')\n    const name = target.getAttribute('item-name') || ''\n    const value = target.value\n\n    this.checklist.checklistItems = this.checklist?.checklistItems?.map(item =>\n      item.id == itemId ? { ...item, [name]: value } : item\n    )\n  }\n\n  private _onChangeSignature(e: Event) {\n    const target = e.target as HTMLInputElement\n\n    this.checklist[target.name] = target.value\n  }\n\n  private _getDate(date) {\n    if (!date) return ' 년 월 일'\n\n    const _date = new Date(date) || new Date()\n    return _date.toLocaleDateString('ko-KR', {\n      timeZone: 'Asia/Seoul',\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric'\n    })\n  }\n\n  private drawChecklistItems(checklistItems) {\n    const mainTypeRowspans = {}\n    const detailTypeRowspans = {}\n    let previousMainType = null\n    let previousDetailType = null\n\n    return checklistItems.map((item, index) => {\n      const mainType = item.mainType\n      const detailType = item.detailType\n\n      // mainType이 변경되면 rowspan을 계산\n      if (mainType !== previousMainType) {\n        mainTypeRowspans[mainType] = checklistItems.filter(i => i.mainType === mainType).length\n        previousDetailType = null // detailType 초기화\n      }\n\n      // detailType이 변경되면 rowspan을 계산\n      if (detailType !== previousDetailType) {\n        detailTypeRowspans[`${mainType}-${detailType}`] = checklistItems.filter(\n          i => i.mainType === mainType && i.detailType === detailType\n        ).length\n      }\n\n      const showMainTypeCell = mainType !== previousMainType\n      const showDetailTypeCell = detailType !== previousDetailType\n\n      const mainTypeRowspan = mainTypeRowspans[mainType]\n      const detailTypeRowspan = detailTypeRowspans[`${mainType}-${detailType}`]\n\n      // 이전 값을 업데이트\n      previousMainType = mainType\n      previousDetailType = detailType\n\n      return {\n        item,\n        showMainTypeCell,\n        mainTypeRowspan,\n        showDetailTypeCell,\n        detailTypeRowspan\n      }\n    })\n  }\n\n  private _onClickComment(checklistItemId: string) {\n    openPopup(\n      html`\n        <comment-list-popup\n          .checklistItemId=${checklistItemId}\n          .status=${this.status}\n          @change-comment=${this._refreshItem.bind(this)}\n        ></comment-list-popup>\n      `,\n      { backdrop: true, size: 'medium', title: '조치 사항' }\n    )\n  }\n\n  private _onClickAttachment(checklistItemId: string) {\n    openPopup(\n      html`\n        <attachment-list-popup\n          .checklistItemId=${checklistItemId}\n          .status=${this.status}\n          @change-attachment=${this._refreshItem.bind(this)}\n        ></attachment-list-popup>\n      `,\n      { backdrop: true, size: 'medium', title: '첨부 자료' }\n    )\n  }\n\n  private async _refreshItem(e) {\n    const { checklistItemId } = e.detail\n    const response = await client.query({\n      query: gql`\n        query ChecklistItem($checklistItemId: String!) {\n          checklistItem(id: $checklistItemId) {\n            id\n            checklistItemCommentCount\n            checklistItemAttachmentCount\n          }\n        }\n      `,\n      variables: {\n        checklistItemId: checklistItemId\n      }\n    })\n\n    const checklistItem = response.data?.checklistItem || []\n    this.checklist.checklistItems = this.checklist.checklistItems.map(item => {\n      return item.id != checklistItemId ? item : { ...item, ...checklistItem }\n    })\n\n    this.requestUpdate()\n  }\n}\n"]}

package/dist-client/pages/project/project-detail.js

@@ -52,7 +52,7 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
         };
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
         let totalInspectionCount = this.inspectionSummary.pass + this.inspectionSummary.fail + this.inspectionSummary.request + this.inspectionSummary.wait;
         return html `
       <div header>
@@ -149,7 +149,72 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
         <div>
           <div right-top>
             <h3>프로젝트 현황</h3>
+
+            <div kpi-header>
+              <span kpi-datetime
+                >${new Date().toLocaleDateString('ko-KR')}
+                ${new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', hour12: false })}</span
+              >
+            </div>
             <div state>
+              <div kpi-container>
+                <div kpi-info-item kpi>
+                  <ox-progress-circle
+                    .value=${this.project.kpi || 0}
+                    fontColor="transparent"
+                    borderStyle="none"
+                    innerCircleSize="30%"
+                    circleColor="#E15757"
+                    background="#f6f6f6"
+                    size="120px"
+                  ></ox-progress-circle>
+
+                  <div kpi-info-label>
+                    <span kpi-info-label>KPI 지수</span>
+                    <span kpi-info-value bold>${this.project.kpi || 0}%</span>
+                  </div>
+                </div>
+                <div kpi-info-item>
+                  <span kpi-info-label>검측 통과율</span>
+                  <span kpi-info-value>
+                    <span bold>${((_u = this.inspectionSummary.pass) === null || _u === void 0 ? void 0 : _u.toLocaleString()) || 0}</span>
+                    <span small> / ${(totalInspectionCount === null || totalInspectionCount === void 0 ? void 0 : totalInspectionCount.toLocaleString()) || 0}</span>
+                  </span>
+                </div>
+                <div kpi-info-item>
+                  <span kpi-info-label>작업 중 로봇</span>
+                  <span kpi-info-value>
+                    <span bold>${((_v = this.project.robotCount) === null || _v === void 0 ? void 0 : _v.toLocaleString()) || 0}</span>
+                    <span small> 대</span>
+                  </span>
+                </div>
+                <div kpi-info-item weather>
+                  <div>
+                    <span><md-icon slot="icon">rainy</md-icon>강수확률</span>
+                    <span bold>${this.weather.rain}%</span>
+                  </div>
+                  <div>
+                    <span><md-icon slot="icon">humidity_percentage</md-icon> 습도</span>
+                    <span bold>${this.weather.humidity}%</span>
+                  </div>
+                  <div>
+                    <span><md-icon slot="icon">thermostat</md-icon> 온도</span>
+                    <span bold>${this.weather.temperature}°C</span>
+                  </div>
+
+                  <!--
+                      <div>
+                        <span><md-icon slot="icon">arrows_output</md-icon> 풍향</span>
+                        <span bold>${this.weather.windDirection}</span>
+                      </div>
+                      <div>
+                        <span><md-icon slot="icon">air</md-icon> 풍속</span>
+                        <span bold>${this.weather.windSpeed} m/s</span>
+                      </div>
+                      -->
+                </div>
+              </div>
+
               <div progress-container>
                 <span progress>
                   <ox-progress-circle
@@ -185,73 +250,32 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
                 <span progress>
                   <ox-progress-circle
                     .value=${this.project.inspPassRate}
+                    titleText="검측 통과"
                     suffix="%"
                     fontSize="27px"
                     fontColor="#4E5055"
                     borderStyle="none"
                     innerCircleSize="28%"
-                    circleColor="#8B3F39"
+                    circleColor="#1BB401"
                     shadow="#00000026 4px 4px 4px"
-                    background="#DACCC7"
+                    background="#e8f7e5"
                   ></ox-progress-circle>
-                  <div insp-pass-rate>시공/구조 검측 통과 비율(%)</div>
+                  <div insp-pass-rate>통과 비율(%)</div>
                 </span>
                 <span progress>
                   <ox-progress-circle
                     .value=${this.project.robotProgressRate}
+                    titleText="로봇작업"
                     suffix="%"
                     fontSize="27px"
                     fontColor="#4E5055"
                     borderStyle="none"
                     innerCircleSize="28%"
-                    circleColor="#4A899B"
+                    circleColor="#8957D8"
                     shadow="#00000026 4px 4px 4px"
-                    background="#C7DFE1"
+                    background="#f3eefb"
                   ></ox-progress-circle>
-                  <div robot-progress-rate>로봇 작업 진행률(%)</div>
-                </span>
-              </div>
-
-              <div>
-                <div>KPI</div>
-
-                <div kpi-container>
-                  <div kpi-item>
-                    <span>KPI 지수</span>
-                    <span kpi-value kpi-index>${this.project.kpi || 0}%</span>
-                  </div>
-                  <div kpi-item>
-                    <span>검측 통과율</span>
-                    <span kpi-value pass-rate>${this.inspectionSummary.pass || 0} / ${totalInspectionCount || 0}</span>
-                  </div>
-                  <div kpi-item>
-                    <span>로봇 작업 대수</span>
-                    <span kpi-value robot-count>${this.project.robotCount || 0}</span>
-                  </div>
-                </div>
-
-                <span weather>
-                  <div bold>현장현황</div>
-                  <div>
-                    <span><md-icon slot="icon">rainy</md-icon>강수확률</span>
-                    <span bold>${this.weather.rain}%</span>
-                  </div>
-                  <div>
-                    <span><md-icon slot="icon">humidity_percentage</md-icon> 습도</span>
-                    <span bold>${this.weather.humidity}%</span>
-                  </div>
-                  <div>
-                    <span><md-icon slot="icon">thermostat</md-icon> 온도</span>
-                    <span bold>${this.weather.temperature}°C</span>
-                  </div>
-                  <div>
-                    <span><md-icon slot="icon">arrows_output</md-icon> 풍향</span>
-                    <span bold>${this.weather.windDirection}</span>
-                  </div>
-                  <div>
-                    <span><md-icon slot="icon">air</md-icon> 풍속</span>
-                    <span bold>${this.weather.windSpeed} m/s</span>
-                  </div>
+                  <div robot-progress-rate>진행률(%)</div>
                 </span>
               </div>
             </div>
@@ -607,42 +631,43 @@ ProjectDetail.styles = [
 
           div[right-top] {
             div[state] {
-              display: grid;
-              grid-template-columns: 1.9fr 1.1fr;
+              display: flex;
+              flex-direction: column;
               gap: var(--spacing-large, 12px);
 
               div[progress-container] {
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                row-gap: 15px;
+                display: flex;
+                justify-content: space-around;
+                gap: 8px;
 
                 span[progress] {
-                  max-width: 150px;
+                  max-width: 165px;
                   text-align: center;
                   display: flex;
                   justify-self: center;
                   flex-direction: column;
                   width: 100%;
+                  margin-inline: 12px;
 
                   & > div {
                     font-weight: bold;
                     color: #2e79be;
-                    font-size: 12px;
-                    margin-top: var(--spacing-small, 4px);
+                    font-size: 16px;
+                    margin-top: 9px;
                   }
                   & > div[week] {
                     color: #06b5af;
                   }
                   & > div[insp-pass-rate] {
-                    color: #8b3f39;
+                    color: #1bb401;
                   }
                   & > div[robot-progress-rate] {
-                    color: #4a899b;
+                    color: #8957d8;
                   }
                 }
               }
 
-              span[weather] {
+              div[weather] {
                 display: flex;
                 flex-direction: column;
                 gap: var(--spacing-small, 4px);
@@ -666,7 +691,7 @@ ProjectDetail.styles = [
             div[inspection] {
               display: grid;
               grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr 0.9fr;
-              margin-top: var(--spacing-small, 4px);
+              margin-top: 10px;
               background: #f6f6f6;
               border-radius: 7px;
               padding: var(--spacing-small, 4px) 0px;
@@ -707,26 +732,77 @@ ProjectDetail.styles = [
             }
             div[kpi-container] {
               display: flex;
-              flex-direction: column;
-              gap: var(--spacing-small, 4px);
-              margin-bottom: var(--spacing-medium, 8px);
+              gap: 8px;
+              margin-bottom: 8px;
+              align-items: center;
 
-              div[kpi-item] {
+              div[kpi-header] {
+                grid-column: 1 / -1;
                 display: flex;
                 justify-content: space-between;
-                font-size: 14px;
+                align-items: center;
+                margin-bottom: var(--spacing-small, 4px);
 
-                span[kpi-value] {
+                span[kpi-title] {
                   font-weight: bold;
-                }
-                span[kpi-index] {
+                  font-size: 16px;
                   color: #2e79be;
                 }
-                span[pass-rate] {
-                  color: #1bb401;
+
+                span[kpi-datetime] {
+                  font-size: 12px;
+                  color: #666;
                 }
-                span[robot-count] {
-                  color: #4a899b;
+              }
+
+              div[kpi-info-item] {
+                display: flex;
+                flex: 1;
+                flex-direction: column;
+                align-items: center;
+                padding: 5px;
+                background: #f6f6f6;
+                border-radius: 4px;
+                min-height: 50px;
+                justify-content: center;
+                margin-inline: 12px;
+                border-radius: 7px;
+
+                span[kpi-info-label] {
+                  font-size: 16px;
+                  color: #4e5055;
+                  margin-bottom: 2px;
+                }
+
+                span[kpi-info-value] {
+                  font-size: 18px;
+
+                  & > span[small] {
+                    font-size: 17px;
+                  }
+                }
+
+                &[weather] {
+                  background: none;
+                  align-items: flex-start;
+
+                  & > div {
+                    width: 100%;
+                  }
+                }
+
+                &[kpi] {
+                  flex-direction: row;
+                  justify-content: space-around;
+
+                  div[kpi-info-label] {
+                    display: flex;
+                    flex-direction: column;
+                  }
+
+                  ox-progress-circle {
+                    width: 45px;
+                  }
                 }
               }
             }

package/dist-client/pages/project/project-detail.js.map

@@ -1 +1 @@
-{"version":3,"file":"project-detail.js","sourceRoot":"","sources":["../../../client/pages/project/project-detail.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/textfield/outlined-text-field.js'\nimport '@material/web/button/outlined-button.js'\n\nimport { navigate, PageView } from '@operato/shell'\nimport { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'\nimport { css, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { client } from '@operato/graphql'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport gql from 'graphql-tag'\nimport { BUILDING_INSPECTION_STATUS, BuildingInspection, BuildingInspectionStatus, Project, ProjectType } from './project-list'\nimport _getWeather from '../lib/waether'\nimport '@operato/chart/ox-progress-circle.js'\nimport { round } from 'lodash'\n\nexport interface InspectionSummary {\n  wait: number\n  request: number\n  pass: number\n  fail: number\n}\n\ninterface Weather {\n  rain: number\n  temperature: number\n  humidity: number\n  windDirection: string\n  windSpeed: number\n}\n\n@customElement('project-detail')\nexport class ProjectDetail extends ScopedElementsMixin(PageView) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: grid;\n        grid-template-rows: 55px auto;\n        color: #4e5055;\n\n        width: 100%;\n        background-color: var(--md-sys-color-background, #f6f6f6);\n        overflow-y: auto;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      md-outlined-button {\n        --md-outlined-button-container-height: 30px;\n        --md-outlined-button-trailing-space: var(--spacing-medium, 8px);\n        --md-outlined-button-leading-space: var(--spacing-medium, 8px);\n        --md-sys-color-outline: rgba(51, 51, 51, 0.2);\n      }\n\n      *[bold] {\n        font-weight: bold;\n      }\n\n      div[header] {\n        display: flex;\n        margin: 0px var(--spacing-large, 12px);\n\n        h2 {\n          flex: 0.5;\n          color: #3f71a0;\n          font-size: 18px;\n        }\n\n        div[button-container] {\n          display: flex;\n          align-items: center;\n          justify-content: end;\n          flex: 0.5;\n\n          md-elevated-button {\n            margin: 0 var(--spacing-small, 4px);\n\n            --md-elevated-button-container-height: 32px;\n            --md-elevated-button-label-text-size: 16px;\n            --md-elevated-button-container-color: #0595e5;\n\n            --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);\n            --md-elevated-button-hover-label-text-color: var(--md-sys-color-on-primary);\n            --md-elevated-button-pressed-label-text-color: var(--md-sys-color-on-primary);\n            --md-elevated-button-focus-label-text-color: var(--md-sys-color-on-primary);\n            --md-elevated-button-icon-color: var(--md-sys-color-on-primary);\n            --md-elevated-button-hover-icon-color: var(--md-sys-color-on-primary);\n            --md-elevated-button-pressed-icon-color: var(--md-sys-color-on-primary);\n            --md-elevated-button-focus-icon-color: var(--md-sys-color-on-primary);\n          }\n        }\n      }\n\n      div[body] {\n        display: flex;\n        margin: var(--spacing-large, 12px);\n        margin-top: 0;\n        gap: var(--spacing-medium, 8px);\n\n        h3 {\n          color: #2e79be;\n          font-size: 16px;\n          margin: 0px;\n\n          a {\n            text-decoration: none;\n            color: #2e79be;\n          }\n        }\n\n        & > div {\n          display: flex;\n          flex: 1;\n          gap: var(--spacing-medium, 8px);\n          flex-direction: column;\n\n          & > div {\n            display: flex;\n            flex-direction: column;\n            background-color: var(--md-sys-color-on-primary);\n            border: 1px solid #cccccc80;\n            gap: var(--spacing-medium, 8px);\n            padding: var(--spacing-large, 12px);\n            border-radius: 5px;\n          }\n\n          div[left-top] {\n            div[content-1] {\n              display: flex;\n              align-items: center;\n              gap: var(--spacing-medium, 8px);\n              font-size: 14px;\n\n              img {\n                width: 42%;\n                height: auto;\n                aspect-ratio: 1920 / 1080;\n                border: 1px solid #cccccc80;\n              }\n              img[no-image] {\n                object-fit: contain;\n                opacity: 0.5;\n              }\n            }\n            div[content-2] {\n              height: 65px;\n              overflow-y: auto;\n              font-size: 14px;\n            }\n          }\n\n          div[left-bottom] {\n            flex: 1;\n\n            display: flex;\n            flex-direction: column;\n\n            [building-complex-img] {\n              width: 100%;\n              flex: 1;\n              aspect-ratio: 2 / 1;\n            }\n\n            img {\n              opacity: 0.5;\n            }\n\n            div[subject] {\n              margin-bottom: var(--spacing-small, 4px);\n            }\n\n            div[building-container] {\n              display: block;\n\n              & > * {\n                margin-right: var(--spacing-medium, 8px);\n                margin-bottom: var(--spacing-medium, 8px);\n              }\n              md-outlined-button {\n                --md-outlined-button-container-height: 30px;\n                --md-outlined-button-trailing-space: var(--spacing-medium, 8px);\n                --md-outlined-button-leading-space: var(--spacing-medium, 8px);\n                --md-sys-color-outline: rgba(51, 51, 51, 0.2);\n              }\n            }\n          }\n\n          div[right-top] {\n            div[state] {\n              display: grid;\n              grid-template-columns: 1.9fr 1.1fr;\n              gap: var(--spacing-large, 12px);\n\n              div[progress-container] {\n                display: grid;\n                grid-template-columns: 1fr 1fr;\n                row-gap: 15px;\n\n                span[progress] {\n                  max-width: 150px;\n                  text-align: center;\n                  display: flex;\n                  justify-self: center;\n                  flex-direction: column;\n                  width: 100%;\n\n                  & > div {\n                    font-weight: bold;\n                    color: #2e79be;\n                    font-size: 12px;\n                    margin-top: var(--spacing-small, 4px);\n                  }\n                  & > div[week] {\n                    color: #06b5af;\n                  }\n                  & > div[insp-pass-rate] {\n                    color: #8b3f39;\n                  }\n                  & > div[robot-progress-rate] {\n                    color: #4a899b;\n                  }\n                }\n              }\n\n              span[weather] {\n                display: flex;\n                flex-direction: column;\n                gap: var(--spacing-small, 4px);\n                margin-left: var(--spacing-medium, 8px);\n                font-size: 14px;\n\n                & > div {\n                  display: flex;\n                  justify-content: space-between;\n                  --md-icon-size: 18px;\n                  margin-right: var(--spacing-small, 4px);\n\n                  & > span {\n                    display: flex;\n                    align-items: center;\n                    gap: var(--spacing-tiny, 2px);\n                  }\n                }\n              }\n            }\n            div[inspection] {\n              display: grid;\n              grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr 0.9fr;\n              margin-top: var(--spacing-small, 4px);\n              background: #f6f6f6;\n              border-radius: 7px;\n              padding: var(--spacing-small, 4px) 0px;\n\n              & > span {\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                justify-content: center;\n\n                div[wait] {\n                  color: #4e5055;\n                }\n                div[request] {\n                  color: #2e79be;\n                }\n                div[pass] {\n                  color: #1bb401;\n                }\n                div[fail] {\n                  color: #ff4444;\n                }\n              }\n              & > span[name] {\n                flex-direction: row;\n                text-align: right;\n                gap: var(--spacing-medium, 8px);\n                line-height: 1.3;\n\n                md-icon {\n                  width: 40px;\n                  height: 40px;\n                  border-radius: 7px;\n                  color: #fff;\n                  background: #f16154;\n                }\n              }\n            }\n            div[kpi-container] {\n              display: flex;\n              flex-direction: column;\n              gap: var(--spacing-small, 4px);\n              margin-bottom: var(--spacing-medium, 8px);\n\n              div[kpi-item] {\n                display: flex;\n                justify-content: space-between;\n                font-size: 14px;\n\n                span[kpi-value] {\n                  font-weight: bold;\n                }\n                span[kpi-index] {\n                  color: #2e79be;\n                }\n                span[pass-rate] {\n                  color: #1bb401;\n                }\n                span[robot-count] {\n                  color: #4a899b;\n                }\n              }\n            }\n            div[notice] {\n              margin-top: var(--spacing-medium, 8px);\n\n              div[name] {\n                margin-left: 4px;\n              }\n              div[content] {\n                background-color: #ebc8321a;\n                border-radius: 10px;\n                padding: var(--spacing-medium, 8px);\n                font-size: 14px;\n                margin-top: var(--spacing-small, 4px);\n              }\n            }\n          }\n\n          div[right-bottom] {\n            flex: 1;\n\n            display: flex;\n            flex-direction: column;\n\n            div[table-container] {\n              flex: 1;\n\n              overflow-y: auto;\n              overflow-x: hidden;\n              position: relative;\n            }\n\n            hr {\n              position: sticky;\n              margin: 0;\n              top: 0px;\n              border: 1px solid #3295f1;\n            }\n\n            table {\n              width: 100%;\n              border-collapse: collapse;\n              table-layout: fixed;\n            }\n\n            thead {\n              position: sticky;\n              top: var(--spacing-tiny, 2px);\n              background-color: #464651;\n              color: var(--md-sys-color-on-primary);\n              z-index: 1;\n            }\n\n            thead th {\n              padding: var(--spacing-tiny, 2px) var(--spacing-small, 4px);\n              font-size: 15px;\n              text-wrap: pretty;\n            }\n\n            tbody td {\n              border-bottom: 1px solid rgba(51, 51, 51, 0.2);\n              padding: var(--spacing-small, 4px);\n              text-align: center;\n              white-space: nowrap;\n              text-overflow: ellipsis;\n              overflow: hidden;\n              font-size: 13px;\n            }\n\n            tbody td[status='FAIL'] {\n              color: #e15757;\n            }\n\n            md-elevated-button {\n              margin: 0 var(--spacing-small, 4px);\n\n              --md-elevated-button-container-height: 32px;\n              --md-elevated-button-label-text-size: 16px;\n              --md-elevated-button-container-color: #0595e5;\n\n              --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);\n              --md-elevated-button-hover-label-text-color: var(--md-sys-color-on-primary);\n              --md-elevated-button-pressed-label-text-color: var(--md-sys-color-on-primary);\n              --md-elevated-button-focus-label-text-color: var(--md-sys-color-on-primary);\n              --md-elevated-button-icon-color: var(--md-sys-color-on-primary);\n              --md-elevated-button-hover-icon-color: var(--md-sys-color-on-primary);\n              --md-elevated-button-pressed-icon-color: var(--md-sys-color-on-primary);\n              --md-elevated-button-focus-icon-color: var(--md-sys-color-on-primary);\n\n              &[red] {\n                --md-elevated-button-container-color: #e15757;\n              }\n            }\n          }\n        }\n      }\n    `\n  ]\n\n  get context() {\n    return {\n      title: '진행 중 프로젝트 상세 정보'\n    }\n  }\n\n  private defaultProject = {\n    name: '',\n    buildingComplex: {\n      address: '',\n      area: 0,\n      constructionCompany: '',\n      clientCompany: '',\n      supervisoryCompany: '',\n      designCompany: '',\n      constructionType: '',\n      buildings: []\n    }\n  }\n\n  @state() projectId: string = ''\n  @state() project: Project = { ...this.defaultProject }\n  @state() buildingInspections: BuildingInspection[] = []\n  @state() inspectionSummary: InspectionSummary = {\n    wait: 0,\n    request: 0,\n    pass: 0,\n    fail: 0\n  }\n  @state() weather: Weather = {\n    rain: 0,\n    temperature: 0,\n    humidity: 0,\n    windDirection: '',\n    windSpeed: 0\n  }\n\n  render() {\n    let totalInspectionCount =\n      this.inspectionSummary.pass + this.inspectionSummary.fail + this.inspectionSummary.request + this.inspectionSummary.wait\n\n    return html`\n      <div header>\n        <h2>${this.project.name}</h2>\n        <div button-container>\n          <md-elevated-button href=${`project-update/${this.project.id}`}>\n            <md-icon slot=\"icon\">assignment</md-icon>프로젝트 정보 수정\n          </md-elevated-button>\n          <md-elevated-button href=${`project-plan-management/${this.project.id}`}>\n            <md-icon slot=\"icon\">description</md-icon>도면 관리\n          </md-elevated-button>\n          <md-elevated-button href=${`project-schedule/${this.project.id}`}>\n            <md-icon slot=\"icon\">event_note</md-icon>공정표 관리\n          </md-elevated-button>\n        </div>\n      </div>\n\n      <div body>\n        <div>\n          <div left-top>\n            <h3>기본 정보</h3>\n            <div content-1>\n              <img\n                ?no-image=${!this.project.mainPhoto?.fullpath}\n                src=${this.project.mainPhoto?.fullpath || '/assets/images/no-image.png'}\n              />\n\n              <div>\n                <div row>\n                  <span>- 면적 : </span>\n                  <span>${this.project.buildingComplex?.area?.toLocaleString()} ㎡</span>\n                </div>\n                <div row>\n                  <span>- 착공~준공 : </span>\n                  <span bold>${this.project.startDate}~${this.project.endDate}</span>\n                </div>\n                <div row>\n                  <span>- 발주처 : </span>\n                  <span>${this.project.buildingComplex?.clientCompany}</span>\n                </div>\n                <div row>\n                  <span>- 건설사 : </span>\n                  <span>${this.project.buildingComplex?.constructionCompany}</span>\n                </div>\n                <div row>\n                  <span>- 감리사 : </span>\n                  <span>${this.project.buildingComplex?.supervisoryCompany}</span>\n                </div>\n                <div row>\n                  <span>- 설계사 : </span>\n                  <span>${this.project.buildingComplex?.designCompany}</span>\n                </div>\n              </div>\n            </div>\n\n            <div content-2>\n              <div row>\n                <span>- 건설구분 : </span>\n                <span>${this.project.buildingComplex?.constructionType}</span>\n              </div>\n              <div row>\n                <span>- 공사금액 : </span>\n                <span>${this.project.buildingComplex?.constructionCost?.toLocaleString()} 원</span>\n              </div>\n              <div row>\n                <span>- 세대수 : </span>\n                <span>${this.project.buildingComplex?.householdCount?.toLocaleString()}</span>\n              </div>\n              <div row>\n                <span>- 기타 : </span>\n                <span>${this.project.buildingComplex?.etc}</span>\n              </div>\n            </div>\n          </div>\n\n          <div left-bottom>\n            <h3>조감도(BIM도면)</h3>\n            ${this.project.buildingComplex?.drawing?.fullpath\n              ? html`<div building-complex-img></div>`\n              : html`<img building-complex-img src=\"/assets/images/img-building-complex-default.jpg\" />`}\n            <div>\n              <div subject bold>개별 단지 상세정보 바로가기</div>\n              <div building-container>\n                ${this.project.buildingComplex?.buildings?.map(building => {\n                  return html`<md-outlined-button href=${`building-complex-detail/${this.project.id}?buildingId=${building.id}`}>\n                    ${building.name}\n                  </md-outlined-button>`\n                })}\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div>\n          <div right-top>\n            <h3>프로젝트 현황</h3>\n            <div state>\n              <div progress-container>\n                <span progress>\n                  <ox-progress-circle\n                    .value=${this.project.totalProgress}\n                    titleText=\"전체\"\n                    suffix=\"%\"\n                    fontSize=\"27px\"\n                    fontColor=\"#4E5055\"\n                    borderStyle=\"none\"\n                    innerCircleSize=\"28%\"\n                    circleColor=\"#0595E5\"\n                    shadow=\"#00000026 4px 4px 4px\"\n                    background=\"#eaf5fd\"\n                  ></ox-progress-circle>\n                  <div>전체공정율(%)</div>\n                </span>\n                <span progress>\n                  <ox-progress-circle\n                    .value=${this.project.weeklyProgress}\n                    titleText=\"주간\"\n                    suffix=\"%\"\n                    fontSize=\"27px\"\n                    fontColor=\"#4E5055\"\n                    borderStyle=\"none\"\n                    innerCircleSize=\"28%\"\n                    circleColor=\"#06B5AF\"\n                    shadow=\"#00000026 4px 4px 4px\"\n                    background=\"#eaf7f7\"\n                  ></ox-progress-circle>\n                  <div week>주간공정율(%)</div>\n                </span>\n\n                <span progress>\n                  <ox-progress-circle\n                    .value=${this.project.inspPassRate}\n                    suffix=\"%\"\n                    fontSize=\"27px\"\n                    fontColor=\"#4E5055\"\n                    borderStyle=\"none\"\n                    innerCircleSize=\"28%\"\n                    circleColor=\"#8B3F39\"\n                    shadow=\"#00000026 4px 4px 4px\"\n                    background=\"#DACCC7\"\n                  ></ox-progress-circle>\n                  <div insp-pass-rate>시공/구조 검측 통과 비율(%)</div>\n                </span>\n                <span progress>\n                  <ox-progress-circle\n                    .value=${this.project.robotProgressRate}\n                    suffix=\"%\"\n                    fontSize=\"27px\"\n                    fontColor=\"#4E5055\"\n                    borderStyle=\"none\"\n                    innerCircleSize=\"28%\"\n                    circleColor=\"#4A899B\"\n                    shadow=\"#00000026 4px 4px 4px\"\n                    background=\"#C7DFE1\"\n                  ></ox-progress-circle>\n                  <div robot-progress-rate>로봇 작업 진행률(%)</div>\n                </span>\n              </div>\n\n              <div>\n                <div>KPI</div>\n\n                <div kpi-container>\n                  <div kpi-item>\n                    <span>KPI 지수</span>\n                    <span kpi-value kpi-index>${this.project.kpi || 0}%</span>\n                  </div>\n                  <div kpi-item>\n                    <span>검측 통과율</span>\n                    <span kpi-value pass-rate>${this.inspectionSummary.pass || 0} / ${totalInspectionCount || 0}</span>\n                  </div>\n                  <div kpi-item>\n                    <span>로봇 작업 대수</span>\n                    <span kpi-value robot-count>${this.project.robotCount || 0}</span>\n                  </div>\n                </div>\n\n                <span weather>\n                  <div bold>현장현황</div>\n                  <div>\n                    <span><md-icon slot=\"icon\">rainy</md-icon>강수확률</span>\n                    <span bold>${this.weather.rain}%</span>\n                  </div>\n                  <div>\n                    <span><md-icon slot=\"icon\">humidity_percentage</md-icon> 습도</span>\n                    <span bold>${this.weather.humidity}%</span>\n                  </div>\n                  <div>\n                    <span><md-icon slot=\"icon\">thermostat</md-icon> 온도</span>\n                    <span bold>${this.weather.temperature}°C</span>\n                  </div>\n                  <div>\n                    <span><md-icon slot=\"icon\">arrows_output</md-icon> 풍향</span>\n                    <span bold>${this.weather.windDirection}</span>\n                  </div>\n                  <div>\n                    <span><md-icon slot=\"icon\">air</md-icon> 풍속</span>\n                    <span bold>${this.weather.windSpeed} m/s</span>\n                  </div>\n                </span>\n              </div>\n            </div>\n            <div inspection>\n              <span name bold>\n                <md-icon slot=\"icon\">list_alt_add</md-icon>\n                시공검측<br />현황\n              </span>\n              <span>\n                <div>검측요청</div>\n                <div bold>${this.inspectionSummary.wait}</div>\n              </span>\n              <span>\n                <div>검측대기</div>\n                <div bold>${this.inspectionSummary.request}</div>\n              </span>\n              <span>\n                <div>합격</div>\n                <div bold pass>${this.inspectionSummary.pass}</div>\n              </span>\n              <span>\n                <div>불합격</div>\n                <div bold fail>${this.inspectionSummary.fail}</div>\n              </span>\n            </div>\n            <div notice>\n              <div name bold>공지사항</div>\n              <div content>${this.project.buildingComplex.notice}</div>\n            </div>\n          </div>\n\n          <div right-bottom>\n            <h3>검측 현황</h3>\n            <div table-container>\n              <hr />\n              <table>\n                <thead>\n                  <tr>\n                    <th width=\"3%\"></th>\n                    <th width=\"10%\">검측 위치</th>\n                    <th width=\"10%\">공종</th>\n                    <th width=\"22%\">내용</th>\n                    <th width=\"15%\">검측 요청일</th>\n                    <th width=\"10%\">검측 결과</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  ${this.buildingInspections.map((inspection, idx) => {\n                    return html` <tr @click=${() => this._onClickInspection(inspection)}>\n                      <td>${idx + 1}</td>\n                      <td>${inspection?.buildingLevel?.building?.name} ${inspection?.buildingLevel?.floorDisplayName}층</td>\n                      <td bold>${inspection.checklist?.constructionType}</td>\n                      <td>${inspection.checklist?.inspectionParts?.join(', ') || ''}</td>\n                      <td>${this._formatDate(inspection.requestDate)}</td>\n                      <td bold status=${inspection.status || ''}>\n                        ${inspection.status && BUILDING_INSPECTION_STATUS[inspection.status]}\n                      </td>\n                    </tr>`\n                  })}\n                </tbody>\n              </table>\n            </div>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  async pageInitialized(lifecycle: PageLifecycle) {}\n\n  async pageUpdated(changes: any, lifecycle: PageLifecycle) {\n    if (this.active) {\n      this.projectId = lifecycle.resourceId || ''\n      await this.initProject(lifecycle.resourceId)\n    }\n  }\n\n  async initProject(projectId: string = '') {\n    const response = await client.query({\n      query: gql`\n        query Project($id: String!, $projectId: String!, $params: BuildingInspectionsOfProject!) {\n          project(id: $id) {\n            id\n            name\n            startDate\n            endDate\n            projectType\n            mainPhoto {\n              fullpath\n            }\n            totalProgress\n            weeklyProgress\n            kpi\n            inspPassRate\n            robotProgressRate\n            structuralSafetyRate\n            robotCount\n            buildingComplex {\n              id\n              address\n              latitude\n              longitude\n              area\n              clientCompany\n              constructionCompany\n              supervisoryCompany\n              designCompany\n              drawing {\n                id\n                name\n                fullpath\n              }\n              constructionType\n              constructionCost\n              etc\n              notice\n              householdCount\n              buildingCount\n              buildings {\n                id\n                name\n                floorCount\n              }\n            }\n          }\n\n          inspectionSummary: buildingInspectionSummaryOfProject(projectId: $projectId) {\n            wait\n            request\n            pass\n            fail\n          }\n\n          buildingInspectionsOfProject(params: $params) {\n            items {\n              id\n              status\n              requestDate\n              buildingLevel {\n                id\n                floor\n                floorDisplayName\n                building {\n                  id\n                  name\n                }\n              }\n              checklist {\n                name\n                constructionType\n                constructionDetailType\n                inspectionParts\n              }\n            }\n            total\n          }\n        }\n      `,\n      variables: {\n        id: projectId,\n        projectId,\n        params: {\n          projectId,\n          limit: 10\n        }\n      }\n    })\n\n    if (response.errors) return\n\n    this.project = response.data?.project || {}\n    this.inspectionSummary = response.data?.inspectionSummary || {}\n    this.buildingInspections = response.data?.buildingInspectionsOfProject?.items || []\n\n    const { latitude, longitude } = this.project?.buildingComplex\n    if (latitude && longitude) {\n      this.weather = await _getWeather(latitude, longitude)\n    }\n  }\n\n  private _onClickInspection(buildingInspection: BuildingInspection) {\n    console.log('buildingInspection :', buildingInspection)\n\n    if (this.project.projectType === ProjectType.DSSP) {\n      navigate(\n        `building-inspection-grid-detail/${this.project.id}?buildingId=${buildingInspection?.buildingLevel?.building?.id}&levelId=${buildingInspection?.buildingLevel?.id}`\n      )\n    } else if (this.project.projectType === ProjectType.DCSP) {\n      navigate(`building-inspection-detail-drawing/${buildingInspection.id}`)\n    }\n  }\n\n  private _formatDate(date: Date | undefined) {\n    return date\n      ? new Intl.DateTimeFormat('en-CA', {\n          timeZone: 'Asia/Seoul',\n          year: 'numeric',\n          month: '2-digit',\n          day: '2-digit'\n        }).format(new Date(date))\n      : ''\n  }\n}\n"]}
+{"version":3,"file":"project-detail.js","sourceRoot":"","sources":["../../../client/pages/project/project-detail.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/textfield/outlined-text-field.js'\nimport '@material/web/button/outlined-button.js'\n\nimport { navigate, PageView } from '@operato/shell'\nimport { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'\nimport { css, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { client } from '@operato/graphql'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport gql from 'graphql-tag'\nimport { BUILDING_INSPECTION_STATUS, BuildingInspection, BuildingInspectionStatus, Project, ProjectType } from './project-list'\nimport _getWeather from '../lib/waether'\nimport '@operato/chart/ox-progress-circle.js'\nimport { round } from 'lodash'\n\nexport interface InspectionSummary {\n  wait: number\n  request: number\n  pass: number\n  fail: number\n}\n\ninterface Weather {\n  rain: number\n  temperature: number\n  humidity: number\n  windDirection: string\n  windSpeed: number\n}\n\n@customElement('project-detail')\nexport class ProjectDetail extends ScopedElementsMixin(PageView) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: grid;\n        grid-template-rows: 55px auto;\n        color: #4e5055;\n\n        width: 100%;\n        background-color: var(--md-sys-color-background, #f6f6f6);\n        overflow-y: auto;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      md-outlined-button {\n        --md-outlined-button-container-height: 30px;\n        --md-outlined-button-trailing-space: var(--spacing-medium, 8px);\n        --md-outlined-button-leading-space: var(--spacing-medium, 8px);\n        --md-sys-color-outline: rgba(51, 51, 51, 0.2);\n      }\n\n      *[bold] {\n        font-weight: bold;\n      }\n\n      div[header] {\n        display: flex;\n        margin: 0px var(--spacing-large, 12px);\n\n        h2 {\n          flex: 0.5;\n          color: #3f71a0;\n          font-size: 18px;\n        }\n\n        div[button-container] {\n          display: flex;\n          align-items: center;\n          justify-content: end;\n          flex: 0.5;\n\n          md-elevated-button {\n            margin: 0 var(--spacing-small, 4px);\n\n            --md-elevated-button-container-height: 32px;\n            --md-elevated-button-label-text-size: 16px;\n            --md-elevated-button-container-color: #0595e5;\n\n            --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);\n            --md-elevated-button-hover-label-text-color: var(--md-sys-color-on-primary);\n            --md-elevated-button-pressed-label-text-color: var(--md-sys-color-on-primary);\n            --md-elevated-button-focus-label-text-color: var(--md-sys-color-on-primary);\n            --md-elevated-button-icon-color: var(--md-sys-color-on-primary);\n            --md-elevated-button-hover-icon-color: var(--md-sys-color-on-primary);\n            --md-elevated-button-pressed-icon-color: var(--md-sys-color-on-primary);\n            --md-elevated-button-focus-icon-color: var(--md-sys-color-on-primary);\n          }\n        }\n      }\n\n      div[body] {\n        display: flex;\n        margin: var(--spacing-large, 12px);\n        margin-top: 0;\n        gap: var(--spacing-medium, 8px);\n\n        h3 {\n          color: #2e79be;\n          font-size: 16px;\n          margin: 0px;\n\n          a {\n            text-decoration: none;\n            color: #2e79be;\n          }\n        }\n\n        & > div {\n          display: flex;\n          flex: 1;\n          gap: var(--spacing-medium, 8px);\n          flex-direction: column;\n\n          & > div {\n            display: flex;\n            flex-direction: column;\n            background-color: var(--md-sys-color-on-primary);\n            border: 1px solid #cccccc80;\n            gap: var(--spacing-medium, 8px);\n            padding: var(--spacing-large, 12px);\n            border-radius: 5px;\n          }\n\n          div[left-top] {\n            div[content-1] {\n              display: flex;\n              align-items: center;\n              gap: var(--spacing-medium, 8px);\n              font-size: 14px;\n\n              img {\n                width: 42%;\n                height: auto;\n                aspect-ratio: 1920 / 1080;\n                border: 1px solid #cccccc80;\n              }\n              img[no-image] {\n                object-fit: contain;\n                opacity: 0.5;\n              }\n            }\n            div[content-2] {\n              height: 65px;\n              overflow-y: auto;\n              font-size: 14px;\n            }\n          }\n\n          div[left-bottom] {\n            flex: 1;\n\n            display: flex;\n            flex-direction: column;\n\n            [building-complex-img] {\n              width: 100%;\n              flex: 1;\n              aspect-ratio: 2 / 1;\n            }\n\n            img {\n              opacity: 0.5;\n            }\n\n            div[subject] {\n              margin-bottom: var(--spacing-small, 4px);\n            }\n\n            div[building-container] {\n              display: block;\n\n              & > * {\n                margin-right: var(--spacing-medium, 8px);\n                margin-bottom: var(--spacing-medium, 8px);\n              }\n              md-outlined-button {\n                --md-outlined-button-container-height: 30px;\n                --md-outlined-button-trailing-space: var(--spacing-medium, 8px);\n                --md-outlined-button-leading-space: var(--spacing-medium, 8px);\n                --md-sys-color-outline: rgba(51, 51, 51, 0.2);\n              }\n            }\n          }\n\n          div[right-top] {\n            div[state] {\n              display: flex;\n              flex-direction: column;\n              gap: var(--spacing-large, 12px);\n\n              div[progress-container] {\n                display: flex;\n                justify-content: space-around;\n                gap: 8px;\n\n                span[progress] {\n                  max-width: 165px;\n                  text-align: center;\n                  display: flex;\n                  justify-self: center;\n                  flex-direction: column;\n                  width: 100%;\n                  margin-inline: 12px;\n\n                  & > div {\n                    font-weight: bold;\n                    color: #2e79be;\n                    font-size: 16px;\n                    margin-top: 9px;\n                  }\n                  & > div[week] {\n                    color: #06b5af;\n                  }\n                  & > div[insp-pass-rate] {\n                    color: #1bb401;\n                  }\n                  & > div[robot-progress-rate] {\n                    color: #8957d8;\n                  }\n                }\n              }\n\n              div[weather] {\n                display: flex;\n                flex-direction: column;\n                gap: var(--spacing-small, 4px);\n                margin-left: var(--spacing-medium, 8px);\n                font-size: 14px;\n\n                & > div {\n                  display: flex;\n                  justify-content: space-between;\n                  --md-icon-size: 18px;\n                  margin-right: var(--spacing-small, 4px);\n\n                  & > span {\n                    display: flex;\n                    align-items: center;\n                    gap: var(--spacing-tiny, 2px);\n                  }\n                }\n              }\n            }\n            div[inspection] {\n              display: grid;\n              grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr 0.9fr;\n              margin-top: 10px;\n              background: #f6f6f6;\n              border-radius: 7px;\n              padding: var(--spacing-small, 4px) 0px;\n\n              & > span {\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                justify-content: center;\n\n                div[wait] {\n                  color: #4e5055;\n                }\n                div[request] {\n                  color: #2e79be;\n                }\n                div[pass] {\n                  color: #1bb401;\n                }\n                div[fail] {\n                  color: #ff4444;\n                }\n              }\n              & > span[name] {\n                flex-direction: row;\n                text-align: right;\n                gap: var(--spacing-medium, 8px);\n                line-height: 1.3;\n\n                md-icon {\n                  width: 40px;\n                  height: 40px;\n                  border-radius: 7px;\n                  color: #fff;\n                  background: #f16154;\n                }\n              }\n            }\n            div[kpi-container] {\n              display: flex;\n              gap: 8px;\n              margin-bottom: 8px;\n              align-items: center;\n\n              div[kpi-header] {\n                grid-column: 1 / -1;\n                display: flex;\n                justify-content: space-between;\n                align-items: center;\n                margin-bottom: var(--spacing-small, 4px);\n\n                span[kpi-title] {\n                  font-weight: bold;\n                  font-size: 16px;\n                  color: #2e79be;\n                }\n\n                span[kpi-datetime] {\n                  font-size: 12px;\n                  color: #666;\n                }\n              }\n\n              div[kpi-info-item] {\n                display: flex;\n                flex: 1;\n                flex-direction: column;\n                align-items: center;\n                padding: 5px;\n                background: #f6f6f6;\n                border-radius: 4px;\n                min-height: 50px;\n                justify-content: center;\n                margin-inline: 12px;\n                border-radius: 7px;\n\n                span[kpi-info-label] {\n                  font-size: 16px;\n                  color: #4e5055;\n                  margin-bottom: 2px;\n                }\n\n                span[kpi-info-value] {\n                  font-size: 18px;\n\n                  & > span[small] {\n                    font-size: 17px;\n                  }\n                }\n\n                &[weather] {\n                  background: none;\n                  align-items: flex-start;\n\n                  & > div {\n                    width: 100%;\n                  }\n                }\n\n                &[kpi] {\n                  flex-direction: row;\n                  justify-content: space-around;\n\n                  div[kpi-info-label] {\n                    display: flex;\n                    flex-direction: column;\n                  }\n\n                  ox-progress-circle {\n                    width: 45px;\n                  }\n                }\n              }\n            }\n            div[notice] {\n              margin-top: var(--spacing-medium, 8px);\n\n              div[name] {\n                margin-left: 4px;\n              }\n              div[content] {\n                background-color: #ebc8321a;\n                border-radius: 10px;\n                padding: var(--spacing-medium, 8px);\n                font-size: 14px;\n                margin-top: var(--spacing-small, 4px);\n              }\n            }\n          }\n\n          div[right-bottom] {\n            flex: 1;\n\n            display: flex;\n            flex-direction: column;\n\n            div[table-container] {\n              flex: 1;\n\n              overflow-y: auto;\n              overflow-x: hidden;\n              position: relative;\n            }\n\n            hr {\n              position: sticky;\n              margin: 0;\n              top: 0px;\n              border: 1px solid #3295f1;\n            }\n\n            table {\n              width: 100%;\n              border-collapse: collapse;\n              table-layout: fixed;\n            }\n\n            thead {\n              position: sticky;\n              top: var(--spacing-tiny, 2px);\n              background-color: #464651;\n              color: var(--md-sys-color-on-primary);\n              z-index: 1;\n            }\n\n            thead th {\n              padding: var(--spacing-tiny, 2px) var(--spacing-small, 4px);\n              font-size: 15px;\n              text-wrap: pretty;\n            }\n\n            tbody td {\n              border-bottom: 1px solid rgba(51, 51, 51, 0.2);\n              padding: var(--spacing-small, 4px);\n              text-align: center;\n              white-space: nowrap;\n              text-overflow: ellipsis;\n              overflow: hidden;\n              font-size: 13px;\n            }\n\n            tbody td[status='FAIL'] {\n              color: #e15757;\n            }\n\n            md-elevated-button {\n              margin: 0 var(--spacing-small, 4px);\n\n              --md-elevated-button-container-height: 32px;\n              --md-elevated-button-label-text-size: 16px;\n              --md-elevated-button-container-color: #0595e5;\n\n              --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);\n              --md-elevated-button-hover-label-text-color: var(--md-sys-color-on-primary);\n              --md-elevated-button-pressed-label-text-color: var(--md-sys-color-on-primary);\n              --md-elevated-button-focus-label-text-color: var(--md-sys-color-on-primary);\n              --md-elevated-button-icon-color: var(--md-sys-color-on-primary);\n              --md-elevated-button-hover-icon-color: var(--md-sys-color-on-primary);\n              --md-elevated-button-pressed-icon-color: var(--md-sys-color-on-primary);\n              --md-elevated-button-focus-icon-color: var(--md-sys-color-on-primary);\n\n              &[red] {\n                --md-elevated-button-container-color: #e15757;\n              }\n            }\n          }\n        }\n      }\n    `\n  ]\n\n  get context() {\n    return {\n      title: '진행 중 프로젝트 상세 정보'\n    }\n  }\n\n  private defaultProject = {\n    name: '',\n    buildingComplex: {\n      address: '',\n      area: 0,\n      constructionCompany: '',\n      clientCompany: '',\n      supervisoryCompany: '',\n      designCompany: '',\n      constructionType: '',\n      buildings: []\n    }\n  }\n\n  @state() projectId: string = ''\n  @state() project: Project = { ...this.defaultProject }\n  @state() buildingInspections: BuildingInspection[] = []\n  @state() inspectionSummary: InspectionSummary = {\n    wait: 0,\n    request: 0,\n    pass: 0,\n    fail: 0\n  }\n  @state() weather: Weather = {\n    rain: 0,\n    temperature: 0,\n    humidity: 0,\n    windDirection: '',\n    windSpeed: 0\n  }\n\n  render() {\n    let totalInspectionCount =\n      this.inspectionSummary.pass + this.inspectionSummary.fail + this.inspectionSummary.request + this.inspectionSummary.wait\n\n    return html`\n      <div header>\n        <h2>${this.project.name}</h2>\n        <div button-container>\n          <md-elevated-button href=${`project-update/${this.project.id}`}>\n            <md-icon slot=\"icon\">assignment</md-icon>프로젝트 정보 수정\n          </md-elevated-button>\n          <md-elevated-button href=${`project-plan-management/${this.project.id}`}>\n            <md-icon slot=\"icon\">description</md-icon>도면 관리\n          </md-elevated-button>\n          <md-elevated-button href=${`project-schedule/${this.project.id}`}>\n            <md-icon slot=\"icon\">event_note</md-icon>공정표 관리\n          </md-elevated-button>\n        </div>\n      </div>\n\n      <div body>\n        <div>\n          <div left-top>\n            <h3>기본 정보</h3>\n            <div content-1>\n              <img\n                ?no-image=${!this.project.mainPhoto?.fullpath}\n                src=${this.project.mainPhoto?.fullpath || '/assets/images/no-image.png'}\n              />\n\n              <div>\n                <div row>\n                  <span>- 면적 : </span>\n                  <span>${this.project.buildingComplex?.area?.toLocaleString()} ㎡</span>\n                </div>\n                <div row>\n                  <span>- 착공~준공 : </span>\n                  <span bold>${this.project.startDate}~${this.project.endDate}</span>\n                </div>\n                <div row>\n                  <span>- 발주처 : </span>\n                  <span>${this.project.buildingComplex?.clientCompany}</span>\n                </div>\n                <div row>\n                  <span>- 건설사 : </span>\n                  <span>${this.project.buildingComplex?.constructionCompany}</span>\n                </div>\n                <div row>\n                  <span>- 감리사 : </span>\n                  <span>${this.project.buildingComplex?.supervisoryCompany}</span>\n                </div>\n                <div row>\n                  <span>- 설계사 : </span>\n                  <span>${this.project.buildingComplex?.designCompany}</span>\n                </div>\n              </div>\n            </div>\n\n            <div content-2>\n              <div row>\n                <span>- 건설구분 : </span>\n                <span>${this.project.buildingComplex?.constructionType}</span>\n              </div>\n              <div row>\n                <span>- 공사금액 : </span>\n                <span>${this.project.buildingComplex?.constructionCost?.toLocaleString()} 원</span>\n              </div>\n              <div row>\n                <span>- 세대수 : </span>\n                <span>${this.project.buildingComplex?.householdCount?.toLocaleString()}</span>\n              </div>\n              <div row>\n                <span>- 기타 : </span>\n                <span>${this.project.buildingComplex?.etc}</span>\n              </div>\n            </div>\n          </div>\n\n          <div left-bottom>\n            <h3>조감도(BIM도면)</h3>\n            ${this.project.buildingComplex?.drawing?.fullpath\n              ? html`<div building-complex-img></div>`\n              : html`<img building-complex-img src=\"/assets/images/img-building-complex-default.jpg\" />`}\n            <div>\n              <div subject bold>개별 단지 상세정보 바로가기</div>\n              <div building-container>\n                ${this.project.buildingComplex?.buildings?.map(building => {\n                  return html`<md-outlined-button href=${`building-complex-detail/${this.project.id}?buildingId=${building.id}`}>\n                    ${building.name}\n                  </md-outlined-button>`\n                })}\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div>\n          <div right-top>\n            <h3>프로젝트 현황</h3>\n\n            <div kpi-header>\n              <span kpi-datetime\n                >${new Date().toLocaleDateString('ko-KR')}\n                ${new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', hour12: false })}</span\n              >\n            </div>\n            <div state>\n              <div kpi-container>\n                <div kpi-info-item kpi>\n                  <ox-progress-circle\n                    .value=${this.project.kpi || 0}\n                    fontColor=\"transparent\"\n                    borderStyle=\"none\"\n                    innerCircleSize=\"30%\"\n                    circleColor=\"#E15757\"\n                    background=\"#f6f6f6\"\n                    size=\"120px\"\n                  ></ox-progress-circle>\n\n                  <div kpi-info-label>\n                    <span kpi-info-label>KPI 지수</span>\n                    <span kpi-info-value bold>${this.project.kpi || 0}%</span>\n                  </div>\n                </div>\n                <div kpi-info-item>\n                  <span kpi-info-label>검측 통과율</span>\n                  <span kpi-info-value>\n                    <span bold>${this.inspectionSummary.pass?.toLocaleString() || 0}</span>\n                    <span small> / ${totalInspectionCount?.toLocaleString() || 0}</span>\n                  </span>\n                </div>\n                <div kpi-info-item>\n                  <span kpi-info-label>작업 중 로봇</span>\n                  <span kpi-info-value>\n                    <span bold>${this.project.robotCount?.toLocaleString() || 0}</span>\n                    <span small> 대</span>\n                  </span>\n                </div>\n                <div kpi-info-item weather>\n                  <div>\n                    <span><md-icon slot=\"icon\">rainy</md-icon>강수확률</span>\n                    <span bold>${this.weather.rain}%</span>\n                  </div>\n                  <div>\n                    <span><md-icon slot=\"icon\">humidity_percentage</md-icon> 습도</span>\n                    <span bold>${this.weather.humidity}%</span>\n                  </div>\n                  <div>\n                    <span><md-icon slot=\"icon\">thermostat</md-icon> 온도</span>\n                    <span bold>${this.weather.temperature}°C</span>\n                  </div>\n\n                  <!--\n                      <div>\n                        <span><md-icon slot=\"icon\">arrows_output</md-icon> 풍향</span>\n                        <span bold>${this.weather.windDirection}</span>\n                      </div>\n                      <div>\n                        <span><md-icon slot=\"icon\">air</md-icon> 풍속</span>\n                        <span bold>${this.weather.windSpeed} m/s</span>\n                      </div>\n                      -->\n                </div>\n              </div>\n\n              <div progress-container>\n                <span progress>\n                  <ox-progress-circle\n                    .value=${this.project.totalProgress}\n                    titleText=\"전체\"\n                    suffix=\"%\"\n                    fontSize=\"27px\"\n                    fontColor=\"#4E5055\"\n                    borderStyle=\"none\"\n                    innerCircleSize=\"28%\"\n                    circleColor=\"#0595E5\"\n                    shadow=\"#00000026 4px 4px 4px\"\n                    background=\"#eaf5fd\"\n                  ></ox-progress-circle>\n                  <div>전체공정율(%)</div>\n                </span>\n                <span progress>\n                  <ox-progress-circle\n                    .value=${this.project.weeklyProgress}\n                    titleText=\"주간\"\n                    suffix=\"%\"\n                    fontSize=\"27px\"\n                    fontColor=\"#4E5055\"\n                    borderStyle=\"none\"\n                    innerCircleSize=\"28%\"\n                    circleColor=\"#06B5AF\"\n                    shadow=\"#00000026 4px 4px 4px\"\n                    background=\"#eaf7f7\"\n                  ></ox-progress-circle>\n                  <div week>주간공정율(%)</div>\n                </span>\n\n                <span progress>\n                  <ox-progress-circle\n                    .value=${this.project.inspPassRate}\n                    titleText=\"검측 통과\"\n                    suffix=\"%\"\n                    fontSize=\"27px\"\n                    fontColor=\"#4E5055\"\n                    borderStyle=\"none\"\n                    innerCircleSize=\"28%\"\n                    circleColor=\"#1BB401\"\n                    shadow=\"#00000026 4px 4px 4px\"\n                    background=\"#e8f7e5\"\n                  ></ox-progress-circle>\n                  <div insp-pass-rate>통과 비율(%)</div>\n                </span>\n                <span progress>\n                  <ox-progress-circle\n                    .value=${this.project.robotProgressRate}\n                    titleText=\"로봇작업\"\n                    suffix=\"%\"\n                    fontSize=\"27px\"\n                    fontColor=\"#4E5055\"\n                    borderStyle=\"none\"\n                    innerCircleSize=\"28%\"\n                    circleColor=\"#8957D8\"\n                    shadow=\"#00000026 4px 4px 4px\"\n                    background=\"#f3eefb\"\n                  ></ox-progress-circle>\n                  <div robot-progress-rate>진행률(%)</div>\n                </span>\n              </div>\n            </div>\n            <div inspection>\n              <span name bold>\n                <md-icon slot=\"icon\">list_alt_add</md-icon>\n                시공검측<br />현황\n              </span>\n              <span>\n                <div>검측요청</div>\n                <div bold>${this.inspectionSummary.wait}</div>\n              </span>\n              <span>\n                <div>검측대기</div>\n                <div bold>${this.inspectionSummary.request}</div>\n              </span>\n              <span>\n                <div>합격</div>\n                <div bold pass>${this.inspectionSummary.pass}</div>\n              </span>\n              <span>\n                <div>불합격</div>\n                <div bold fail>${this.inspectionSummary.fail}</div>\n              </span>\n            </div>\n            <div notice>\n              <div name bold>공지사항</div>\n              <div content>${this.project.buildingComplex.notice}</div>\n            </div>\n          </div>\n\n          <div right-bottom>\n            <h3>검측 현황</h3>\n            <div table-container>\n              <hr />\n              <table>\n                <thead>\n                  <tr>\n                    <th width=\"3%\"></th>\n                    <th width=\"10%\">검측 위치</th>\n                    <th width=\"10%\">공종</th>\n                    <th width=\"22%\">내용</th>\n                    <th width=\"15%\">검측 요청일</th>\n                    <th width=\"10%\">검측 결과</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  ${this.buildingInspections.map((inspection, idx) => {\n                    return html` <tr @click=${() => this._onClickInspection(inspection)}>\n                      <td>${idx + 1}</td>\n                      <td>${inspection?.buildingLevel?.building?.name} ${inspection?.buildingLevel?.floorDisplayName}층</td>\n                      <td bold>${inspection.checklist?.constructionType}</td>\n                      <td>${inspection.checklist?.inspectionParts?.join(', ') || ''}</td>\n                      <td>${this._formatDate(inspection.requestDate)}</td>\n                      <td bold status=${inspection.status || ''}>\n                        ${inspection.status && BUILDING_INSPECTION_STATUS[inspection.status]}\n                      </td>\n                    </tr>`\n                  })}\n                </tbody>\n              </table>\n            </div>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  async pageInitialized(lifecycle: PageLifecycle) {}\n\n  async pageUpdated(changes: any, lifecycle: PageLifecycle) {\n    if (this.active) {\n      this.projectId = lifecycle.resourceId || ''\n      await this.initProject(lifecycle.resourceId)\n    }\n  }\n\n  async initProject(projectId: string = '') {\n    const response = await client.query({\n      query: gql`\n        query Project($id: String!, $projectId: String!, $params: BuildingInspectionsOfProject!) {\n          project(id: $id) {\n            id\n            name\n            startDate\n            endDate\n            projectType\n            mainPhoto {\n              fullpath\n            }\n            totalProgress\n            weeklyProgress\n            kpi\n            inspPassRate\n            robotProgressRate\n            structuralSafetyRate\n            robotCount\n            buildingComplex {\n              id\n              address\n              latitude\n              longitude\n              area\n              clientCompany\n              constructionCompany\n              supervisoryCompany\n              designCompany\n              drawing {\n                id\n                name\n                fullpath\n              }\n              constructionType\n              constructionCost\n              etc\n              notice\n              householdCount\n              buildingCount\n              buildings {\n                id\n                name\n                floorCount\n              }\n            }\n          }\n\n          inspectionSummary: buildingInspectionSummaryOfProject(projectId: $projectId) {\n            wait\n            request\n            pass\n            fail\n          }\n\n          buildingInspectionsOfProject(params: $params) {\n            items {\n              id\n              status\n              requestDate\n              buildingLevel {\n                id\n                floor\n                floorDisplayName\n                building {\n                  id\n                  name\n                }\n              }\n              checklist {\n                name\n                constructionType\n                constructionDetailType\n                inspectionParts\n              }\n            }\n            total\n          }\n        }\n      `,\n      variables: {\n        id: projectId,\n        projectId,\n        params: {\n          projectId,\n          limit: 10\n        }\n      }\n    })\n\n    if (response.errors) return\n\n    this.project = response.data?.project || {}\n    this.inspectionSummary = response.data?.inspectionSummary || {}\n    this.buildingInspections = response.data?.buildingInspectionsOfProject?.items || []\n\n    const { latitude, longitude } = this.project?.buildingComplex\n    if (latitude && longitude) {\n      this.weather = await _getWeather(latitude, longitude)\n    }\n  }\n\n  private _onClickInspection(buildingInspection: BuildingInspection) {\n    console.log('buildingInspection :', buildingInspection)\n\n    if (this.project.projectType === ProjectType.DSSP) {\n      navigate(\n        `building-inspection-grid-detail/${this.project.id}?buildingId=${buildingInspection?.buildingLevel?.building?.id}&levelId=${buildingInspection?.buildingLevel?.id}`\n      )\n    } else if (this.project.projectType === ProjectType.DCSP) {\n      navigate(`building-inspection-detail-drawing/${buildingInspection.id}`)\n    }\n  }\n\n  private _formatDate(date: Date | undefined) {\n    return date\n      ? new Intl.DateTimeFormat('en-CA', {\n          timeZone: 'Asia/Seoul',\n          year: 'numeric',\n          month: '2-digit',\n          day: '2-digit'\n        }).format(new Date(date))\n      : ''\n  }\n}\n"]}

package/dist-client/pages/project/project-schedule.d.ts

@@ -8,6 +8,7 @@ import { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view';
 import { Project } from './project-list';
 import '@operato/gantt/ox-gantt.js';
 import './popup/popup-schedule-upload';
+import './popup/checklist/schedule-checklist-create-popup';
 declare const ProjectSchedule_base: typeof PageView & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
 export declare class ProjectSchedule extends ProjectSchedule_base {
     static styles: import("lit").CSSResult[];
@@ -34,5 +35,6 @@ export declare class ProjectSchedule extends ProjectSchedule_base {
     onChangePeriodRange(): void;
     onRangeSelected(e: CustomEvent): void;
     private _openUploadSchedulePopup;
+    private onConstructionTypeClick;
 }
 export {};

package/dist-client/pages/project/project-schedule.js

@@ -15,6 +15,7 @@ import gql from 'graphql-tag';
 import { ScrollbarStyles } from '@operato/styles';
 import '@operato/gantt/ox-gantt.js';
 import './popup/popup-schedule-upload';
+import './popup/checklist/schedule-checklist-create-popup';
 const TaskFragment = gql `
   fragment TaskFragment on Task {
     type
@@ -127,7 +128,9 @@ let ProjectSchedule = class ProjectSchedule extends ScopedElementsMixin(PageView
             </div>
           </div>
           <div construction-list-container>
-            ${(_a = this.constructionTypeList) === null || _a === void 0 ? void 0 : _a.map((constructionType) => html ` <md-outlined-button id=${constructionType.id}>${constructionType.title}</md-outlined-button>`)}
+            ${(_a = this.constructionTypeList) === null || _a === void 0 ? void 0 : _a.map((constructionType) => html ` <md-outlined-button id=${constructionType.id} @click=${() => this.onConstructionTypeClick(constructionType)}
+                  >${constructionType.title}</md-outlined-button
+                >`)}
           </div>
         </div>
       </div>
@@ -227,6 +230,18 @@ let ProjectSchedule = class ProjectSchedule extends ScopedElementsMixin(PageView
             title: `공정표 업로드`
         });
     }
+    onConstructionTypeClick(constructionType) {
+        openPopup(html `<schedule-checklist-create-popup
+        .projectId=${this.projectId}
+        .taskCode=${constructionType.id}
+        @requestRefresh="${() => this.initProject(this.projectId)}"
+      ></schedule-checklist-create-popup>`, {
+            backdrop: true,
+            size: 'large',
+            title: `체크리스트 생성`
+        });
+        console.log('constructionType', constructionType);
+    }
 };
 ProjectSchedule.styles = [
     ScrollbarStyles,