@dssp/project 0.0.2

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

@@ -0,0 +1,617 @@
+import { __decorate, __metadata } from "tslib";
+import { PageView } from '@operato/shell';
+import { css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { client } from '@operato/graphql';
+import gql from 'graphql-tag';
+import '@material/web/button/elevated-button.js';
+import '@material/web/textfield/outlined-text-field.js';
+import '@material/web/button/outlined-button.js';
+import './ox-progress-circle';
+import _getWeather from '../lib/waether';
+let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
+    constructor() {
+        super(...arguments);
+        this.defaultProject = {
+            name: '',
+            buildingComplex: {
+                address: '',
+                area: 0,
+                constructionCompany: '',
+                clientCompany: '',
+                supervisoryCompany: '',
+                designCompany: '',
+                constructionType: '',
+                buildings: []
+            }
+        };
+        this.projectId = '';
+        this.project = Object.assign({}, this.defaultProject);
+        this.inspectionSummary = {
+            request: 0,
+            pass: 0,
+            fail: 0
+        };
+        this.weather = {
+            rain: 0,
+            temperature: 0,
+            humidity: 0,
+            wind: ''
+        };
+    }
+    get context() {
+        return {
+            title: '진행 중 프로젝트 상세 정보'
+        };
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        return html `
+      <div header>
+        <h2>${this.project.name}</h2>
+        <div button-container>
+          <md-elevated-button href=${`project-update/${this.project.id}`}>
+            <md-icon slot="icon">assignment</md-icon>프로젝트 정보 수정
+          </md-elevated-button>
+          <md-elevated-button href=${`project-plan-management/${this.project.id}`}>
+            <md-icon slot="icon">description</md-icon>도면 관리
+          </md-elevated-button>
+          <md-elevated-button href=${`project-task-update/${this.project.id}`}>
+            <md-icon slot="icon">event_note</md-icon>공정표 관리
+          </md-elevated-button>
+        </div>
+      </div>
+
+      <div body>
+        <div>
+          <div left-top>
+            <h3>기본 정보</h3>
+            <div content-1>
+              <img project-img src=${((_a = this.project.mainPhoto) === null || _a === void 0 ? void 0 : _a.fullpath) || ''} />
+
+              <div>
+                <div row>
+                  <span>- 면적 : </span>
+                  <span>${(_b = this.project.buildingComplex) === null || _b === void 0 ? void 0 : _b.area}</span>
+                </div>
+                <div row>
+                  <span>- 착공 ~ 준공 : </span>
+                  <span bold>${this.project.startDate} ~ ${this.project.endDate}</span>
+                </div>
+                <div row>
+                  <span>- 발주처 : </span>
+                  <span>${(_c = this.project.buildingComplex) === null || _c === void 0 ? void 0 : _c.clientCompany}</span>
+                </div>
+                <div row>
+                  <span>- 건설사 : </span>
+                  <span>${(_d = this.project.buildingComplex) === null || _d === void 0 ? void 0 : _d.constructionCompany}</span>
+                </div>
+                <div row>
+                  <span>- 감리사 : </span>
+                  <span>${(_e = this.project.buildingComplex) === null || _e === void 0 ? void 0 : _e.supervisoryCompany}</span>
+                </div>
+                <div row>
+                  <span>- 설계사 : </span>
+                  <span>${(_f = this.project.buildingComplex) === null || _f === void 0 ? void 0 : _f.designCompany}</span>
+                </div>
+              </div>
+            </div>
+
+            <div content-2>
+              <div row>
+                <span>- 건설구분 : </span>
+                <span>${(_g = this.project.buildingComplex) === null || _g === void 0 ? void 0 : _g.constructionType}</span>
+              </div>
+              <div row>
+                <span>- 공사금액 : </span>
+                <span>${(_h = this.project.buildingComplex) === null || _h === void 0 ? void 0 : _h.constructionCost}</span>
+              </div>
+              <div row>
+                <span>- 세대수 : </span>
+                <span>${(_j = this.project.buildingComplex) === null || _j === void 0 ? void 0 : _j.householdCount}</span>
+              </div>
+              <div row>
+                <span>- 기타 : </span>
+                <span>${(_k = this.project.buildingComplex) === null || _k === void 0 ? void 0 : _k.etc}</span>
+              </div>
+            </div>
+          </div>
+
+          <div left-bottom>
+            <h3>조감도(BIM도면)</h3>
+            <img src=${((_m = (_l = this.project.buildingComplex) === null || _l === void 0 ? void 0 : _l.drawing) === null || _m === void 0 ? void 0 : _m.fullpath) || ''} />
+            <div>
+              <div subject bold>개별 단지 상세정보 바로가기</div>
+              <div building-container>
+                ${(_p = (_o = this.project.buildingComplex) === null || _o === void 0 ? void 0 : _o.buildings) === null || _p === void 0 ? void 0 : _p.map(building => {
+            return html `<md-outlined-button
+                    href=${`building-complex-detail/${this.project.id}?buildingId=${building.id}`}
+                  >
+                    ${building.name}
+                  </md-outlined-button>`;
+        })}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <div right-top>
+            <h3>프로젝트 현황</h3>
+            <div state>
+              <span progress>
+                <ox-progress-circle
+                  .value=${70}
+                  titleText="전체"
+                  suffix="%"
+                  fontSize="27px"
+                  fontColor="#4E5055"
+                  borderStyle="none"
+                  innerCircleSize="28%"
+                  circleColor="#0595E5"
+                  shadow="#00000026 4px 4px 4px"
+                  background="#eaf5fd"
+                ></ox-progress-circle>
+                <div>전체공정율(%)</div>
+              </span>
+              <span progress>
+                <ox-progress-circle
+                  .value=${30.4}
+                  titleText="주간"
+                  fontSize="27px"
+                  fontColor="#4E5055"
+                  borderStyle="none"
+                  innerCircleSize="28%"
+                  circleColor="#06B5AF"
+                  shadow="#00000026 4px 4px 4px"
+                  background="#eaf7f7"
+                ></ox-progress-circle>
+                <div week>주간공정율(%)</div>
+              </span>
+              <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">air</md-icon> 풍향</span>
+                  <span bold>${this.weather.wind}</span>
+                </div>
+              </span>
+            </div>
+            <div inspection>
+              <span name bold>
+                <md-icon slot="icon">list_alt_add</md-icon>
+                시공검측<br />현황
+              </span>
+              <span>
+                <div>검측요청</div>
+                <div bold>${this.inspectionSummary.request}</div>
+              </span>
+              <span>
+                <div>합격</div>
+                <div bold pass>${this.inspectionSummary.pass}</div>
+              </span>
+              <span>
+                <div>불합격</div>
+                <div bold fail>${this.inspectionSummary.fail}</div>
+              </span>
+            </div>
+            <div notice>
+              <div name bold>공지사항</div>
+              <div content>${this.project.buildingComplex.notice}</div>
+            </div>
+          </div>
+
+          <div right-bottom>
+            <h3>기타 사항</h3>
+            <div table-container>
+              <hr />
+              <table>
+                <thead>
+                  <tr>
+                    <th width="20%">검측 위치</th>
+                    <th width="20%">공종</th>
+                    <th width="40%">내용</th>
+                    <th width="20%">검측결과</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  ${[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1].map(inspection => {
+            return html `<tr>
+                      <td>101동 3층</td>
+                      <td bold>단열공사</td>
+                      <td>단열재 시공 층간 차음재 시공 벽돌/블록 및 ALC 패널 공사</td>
+                      <td bold>검측완료</td>
+                    </tr>`;
+        })}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    async pageInitialized(lifecycle) { }
+    async pageUpdated(changes, lifecycle) {
+        if (this.active) {
+            this.projectId = lifecycle.resourceId || '';
+            await this.initProject(this.projectId);
+        }
+    }
+    async initProject(projectId = '') {
+        var _a, _b, _c;
+        const response = await client.query({
+            query: gql `
+        query Project($id: String!, $projectId: String!) {
+          project(id: $id) {
+            id
+            name
+            startDate
+            endDate
+            mainPhoto {
+              fullpath
+            }
+            totalProgress
+            weeklyProgress
+            kpi
+            inspPassRate
+            robotProgressRate
+            structuralSafetyRate
+            buildingComplex {
+              id
+              address
+              latitude
+              longitude
+              area
+              clientCompany
+              constructionCompany
+              supervisoryCompany
+              designCompany
+              drawing {
+                id
+                name
+                fullpath
+              }
+              constructionType
+              constructionCost
+              etc
+              notice
+              householdCount
+              buildingCount
+              buildings {
+                id
+                name
+                floorCount
+              }
+            }
+          }
+
+          inspectionSummary(projectId: $projectId) {
+            request
+            pass
+            fail
+          }
+        }
+      `,
+            variables: {
+                id: projectId,
+                projectId
+            }
+        });
+        if (response.errors)
+            return;
+        this.project = (_a = response.data) === null || _a === void 0 ? void 0 : _a.project;
+        this.inspectionSummary = (_b = response.data) === null || _b === void 0 ? void 0 : _b.inspectionSummary;
+        const { latitude, longitude } = (_c = this.project) === null || _c === void 0 ? void 0 : _c.buildingComplex;
+        if (latitude && longitude) {
+            this.weather = await _getWeather(latitude, longitude);
+        }
+        console.log('init project : ', this.project);
+    }
+};
+ProjectDetail.styles = [
+    css `
+      :host {
+        display: grid;
+        grid-template-rows: 75px auto;
+        color: #4e5055;
+
+        width: 100%;
+        background-color: #f7f7f7;
+        overflow-y: auto;
+
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+
+      md-outlined-button {
+        --md-outlined-button-container-height: 30px;
+        --md-outlined-button-trailing-space: 15px;
+        --md-outlined-button-leading-space: 15px;
+      }
+
+      *[bold] {
+        font-weight: bold;
+      }
+
+      div[header] {
+        display: flex;
+        margin: 0px 20px;
+
+        h2 {
+          flex: 0.5;
+          color: #3f71a0;
+        }
+
+        div[button-container] {
+          display: flex;
+          align-items: center;
+          justify-content: end;
+          flex: 0.5;
+
+          md-elevated-button {
+            margin: 0px 3px;
+
+            --md-elevated-button-container-height: 35px;
+            --md-elevated-button-label-text-size: 16px;
+            --md-elevated-button-container-color: #0595e5;
+
+            --md-elevated-button-label-text-color: #fff;
+            --md-elevated-button-hover-label-text-color: #fff;
+            --md-elevated-button-pressed-label-text-color: #fff;
+            --md-elevated-button-focus-label-text-color: #fff;
+            --md-elevated-button-icon-color: #fff;
+            --md-elevated-button-hover-icon-color: #fff;
+            --md-elevated-button-pressed-icon-color: #fff;
+            --md-elevated-button-focus-icon-color: #fff;
+          }
+        }
+      }
+
+      div[body] {
+        display: flex;
+        margin: 0px 25px 25px 25px;
+        gap: 10px;
+
+        h3 {
+          color: #2e79be;
+          font-size: 18px;
+          margin: 0px;
+        }
+
+        & > div {
+          display: flex;
+          flex: 1;
+          gap: 10px;
+          flex-direction: column;
+
+          & > div {
+            display: flex;
+            flex-direction: column;
+            background-color: #ffffff;
+            border: 1px solid #cccccc80;
+            gap: 10px;
+            padding: 15px;
+            border-radius: 5px;
+          }
+
+          div[left-top] {
+            div[content-1] {
+              display: flex;
+              align-items: center;
+              gap: 15px;
+
+              img {
+                width: 42%;
+                height: fit-content;
+              }
+
+              div[row] {
+                line-height: 25px;
+              }
+            }
+            div[content-2] {
+              height: 65px;
+              overflow-y: auto;
+            }
+          }
+
+          div[left-bottom] {
+            img {
+              width: 100%;
+              aspect-ratio: 2 / 1;
+            }
+
+            div[subject] {
+              margin-bottom: 7px;
+            }
+            div[building-container] {
+              display: block;
+              height: 40px;
+              overflow-y: auto;
+
+              & > * {
+                margin-right: 10px;
+                margin-bottom: 7px;
+              }
+            }
+          }
+
+          div[right-top] {
+            flex: 3;
+
+            div[state] {
+              display: grid;
+              grid-template-columns: 0.95fr 0.95fr 1.1fr;
+              gap: 15px;
+
+              span[progress] {
+                max-width: 170px;
+                text-align: center;
+                display: flex;
+                justify-self: center;
+                flex-direction: column;
+                width: 100%;
+
+                & > div {
+                  font-weight: bold;
+                  color: #2e79be;
+                  font-size: 12px;
+                  margin-top: 5px;
+                }
+                & > div[week] {
+                  color: #06b5af;
+                }
+              }
+              span[weather] {
+                display: flex;
+                flex-direction: column;
+                gap: 5px;
+                margin-left: 10px;
+
+                & > div {
+                  display: flex;
+                  justify-content: space-between;
+
+                  & > span {
+                    display: flex;
+                  }
+                }
+              }
+            }
+            div[inspection] {
+              display: grid;
+              grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr 0.9fr;
+              margin-top: 5px;
+              background: #f6f6f6;
+              border-radius: 7px;
+              padding: 7px 0px;
+
+              & > span {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+
+                div[pass] {
+                  color: #1bb401;
+                }
+                div[fail] {
+                  color: #ff4444;
+                }
+              }
+              & > span[name] {
+                flex-direction: row;
+                text-align: right;
+                gap: 10px;
+
+                md-icon {
+                  width: 40px;
+                  height: 40px;
+                  border-radius: 7px;
+                  color: #fff;
+                  background: #f16154;
+                }
+              }
+            }
+            div[notice] {
+              margin-top: 7px;
+
+              div[name] {
+                margin-left: 4px;
+              }
+              div[content] {
+                background-color: #ebc8321a;
+                border-radius: 10px;
+                padding: 10px;
+                font-size: 14px;
+                margin-top: 6px;
+              }
+            }
+          }
+
+          div[right-bottom] {
+            flex: 2;
+
+            div[table-container] {
+              width: 100%;
+              height: 15rem;
+              overflow-y: auto;
+              overflow-x: hidden;
+              position: relative;
+            }
+
+            hr {
+              position: sticky;
+              width: 100%;
+              margin: 0;
+              top: 0px;
+              border: 1px solid #3295f1;
+            }
+
+            table {
+              width: 100%;
+              border-collapse: collapse;
+              table-layout: fixed;
+            }
+
+            thead {
+              position: sticky;
+              top: 2px;
+              background-color: #464651;
+              color: #fff;
+              z-index: 1;
+            }
+
+            thead th {
+              padding: 5px;
+              font-size: 15px;
+            }
+
+            tbody td {
+              border-bottom: 1px solid #cccccc;
+              padding: 5px 3px;
+              text-align: center;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              font-size: 15px;
+            }
+          }
+        }
+      }
+    `
+];
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], ProjectDetail.prototype, "projectId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ProjectDetail.prototype, "project", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ProjectDetail.prototype, "inspectionSummary", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ProjectDetail.prototype, "weather", void 0);
+ProjectDetail = __decorate([
+    customElement('project-detail')
+], ProjectDetail);
+export { ProjectDetail };
+//# sourceMappingURL=project-detail.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"project-detail.js","sourceRoot":"","sources":["../../../client/pages/project/project-detail.ts"],"names":[],"mappings":"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","sourcesContent":["import { 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 { notify } from '@operato/layout'\n\nimport gql from 'graphql-tag'\nimport { Project } from './project-list'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/textfield/outlined-text-field.js'\nimport '@material/web/button/outlined-button.js'\nimport './ox-progress-circle'\nimport _getWeather from '../lib/waether'\n\nexport interface InspectionSummary {\n  request: number\n  pass: number\n  fail: number\n}\n\ninterface Weather {\n  rain: number\n  temperature: number\n  humidity: number\n  wind: string\n}\n\n@customElement('project-detail')\nexport class ProjectDetail extends ScopedElementsMixin(PageView) {\n  static styles = [\n    css`\n      :host {\n        display: grid;\n        grid-template-rows: 75px auto;\n        color: #4e5055;\n\n        width: 100%;\n        background-color: #f7f7f7;\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: 15px;\n        --md-outlined-button-leading-space: 15px;\n      }\n\n      *[bold] {\n        font-weight: bold;\n      }\n\n      div[header] {\n        display: flex;\n        margin: 0px 20px;\n\n        h2 {\n          flex: 0.5;\n          color: #3f71a0;\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: 0px 3px;\n\n            --md-elevated-button-container-height: 35px;\n            --md-elevated-button-label-text-size: 16px;\n            --md-elevated-button-container-color: #0595e5;\n\n            --md-elevated-button-label-text-color: #fff;\n            --md-elevated-button-hover-label-text-color: #fff;\n            --md-elevated-button-pressed-label-text-color: #fff;\n            --md-elevated-button-focus-label-text-color: #fff;\n            --md-elevated-button-icon-color: #fff;\n            --md-elevated-button-hover-icon-color: #fff;\n            --md-elevated-button-pressed-icon-color: #fff;\n            --md-elevated-button-focus-icon-color: #fff;\n          }\n        }\n      }\n\n      div[body] {\n        display: flex;\n        margin: 0px 25px 25px 25px;\n        gap: 10px;\n\n        h3 {\n          color: #2e79be;\n          font-size: 18px;\n          margin: 0px;\n        }\n\n        & > div {\n          display: flex;\n          flex: 1;\n          gap: 10px;\n          flex-direction: column;\n\n          & > div {\n            display: flex;\n            flex-direction: column;\n            background-color: #ffffff;\n            border: 1px solid #cccccc80;\n            gap: 10px;\n            padding: 15px;\n            border-radius: 5px;\n          }\n\n          div[left-top] {\n            div[content-1] {\n              display: flex;\n              align-items: center;\n              gap: 15px;\n\n              img {\n                width: 42%;\n                height: fit-content;\n              }\n\n              div[row] {\n                line-height: 25px;\n              }\n            }\n            div[content-2] {\n              height: 65px;\n              overflow-y: auto;\n            }\n          }\n\n          div[left-bottom] {\n            img {\n              width: 100%;\n              aspect-ratio: 2 / 1;\n            }\n\n            div[subject] {\n              margin-bottom: 7px;\n            }\n            div[building-container] {\n              display: block;\n              height: 40px;\n              overflow-y: auto;\n\n              & > * {\n                margin-right: 10px;\n                margin-bottom: 7px;\n              }\n            }\n          }\n\n          div[right-top] {\n            flex: 3;\n\n            div[state] {\n              display: grid;\n              grid-template-columns: 0.95fr 0.95fr 1.1fr;\n              gap: 15px;\n\n              span[progress] {\n                max-width: 170px;\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: 5px;\n                }\n                & > div[week] {\n                  color: #06b5af;\n                }\n              }\n              span[weather] {\n                display: flex;\n                flex-direction: column;\n                gap: 5px;\n                margin-left: 10px;\n\n                & > div {\n                  display: flex;\n                  justify-content: space-between;\n\n                  & > span {\n                    display: flex;\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: 5px;\n              background: #f6f6f6;\n              border-radius: 7px;\n              padding: 7px 0px;\n\n              & > span {\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                justify-content: center;\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: 10px;\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[notice] {\n              margin-top: 7px;\n\n              div[name] {\n                margin-left: 4px;\n              }\n              div[content] {\n                background-color: #ebc8321a;\n                border-radius: 10px;\n                padding: 10px;\n                font-size: 14px;\n                margin-top: 6px;\n              }\n            }\n          }\n\n          div[right-bottom] {\n            flex: 2;\n\n            div[table-container] {\n              width: 100%;\n              height: 15rem;\n              overflow-y: auto;\n              overflow-x: hidden;\n              position: relative;\n            }\n\n            hr {\n              position: sticky;\n              width: 100%;\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: 2px;\n              background-color: #464651;\n              color: #fff;\n              z-index: 1;\n            }\n\n            thead th {\n              padding: 5px;\n              font-size: 15px;\n            }\n\n            tbody td {\n              border-bottom: 1px solid #cccccc;\n              padding: 5px 3px;\n              text-align: center;\n              white-space: nowrap;\n              text-overflow: ellipsis;\n              overflow: hidden;\n              font-size: 15px;\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  @state() projectId: string = ''\n  @state() project: Project = { ...this.defaultProject }\n  @state() inspectionSummary: InspectionSummary = {\n    request: 0,\n    pass: 0,\n    fail: 0\n  }\n  @state() weather: Weather = {\n    rain: 0,\n    temperature: 0,\n    humidity: 0,\n    wind: ''\n  }\n\n  render() {\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-task-update/${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 project-img src=${this.project.mainPhoto?.fullpath || ''} />\n\n              <div>\n                <div row>\n                  <span>- 면적 : </span>\n                  <span>${this.project.buildingComplex?.area}</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}</span>\n              </div>\n              <div row>\n                <span>- 세대수 : </span>\n                <span>${this.project.buildingComplex?.householdCount}</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            <img src=${this.project.buildingComplex?.drawing?.fullpath || ''} />\n            <div>\n              <div subject bold>개별 단지 상세정보 바로가기</div>\n              <div building-container>\n                ${this.project.buildingComplex?.buildings?.map(building => {\n                  return html`<md-outlined-button\n                    href=${`building-complex-detail/${this.project.id}?buildingId=${building.id}`}\n                  >\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              <span progress>\n                <ox-progress-circle\n                  .value=${70}\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=${30.4}\n                  titleText=\"주간\"\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              <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\">air</md-icon> 풍향</span>\n                  <span bold>${this.weather.wind}</span>\n                </div>\n              </span>\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.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=\"20%\">검측 위치</th>\n                    <th width=\"20%\">공종</th>\n                    <th width=\"40%\">내용</th>\n                    <th width=\"20%\">검측결과</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  ${[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1].map(inspection => {\n                    return html`<tr>\n                      <td>101동 3층</td>\n                      <td bold>단열공사</td>\n                      <td>단열재 시공 층간 차음재 시공 벽돌/블록 및 ALC 패널 공사</td>\n                      <td bold>검측완료</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(this.projectId)\n    }\n  }\n\n  async initProject(projectId: string = '') {\n    const response = await client.query({\n      query: gql`\n        query Project($id: String!, $projectId: String!) {\n          project(id: $id) {\n            id\n            name\n            startDate\n            endDate\n            mainPhoto {\n              fullpath\n            }\n            totalProgress\n            weeklyProgress\n            kpi\n            inspPassRate\n            robotProgressRate\n            structuralSafetyRate\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(projectId: $projectId) {\n            request\n            pass\n            fail\n          }\n        }\n      `,\n      variables: {\n        id: projectId,\n        projectId\n      }\n    })\n\n    if (response.errors) return\n\n    this.project = response.data?.project\n    this.inspectionSummary = response.data?.inspectionSummary\n\n    const { latitude, longitude } = this.project?.buildingComplex\n    if (latitude && longitude) {\n      this.weather = await _getWeather(latitude, longitude)\n    }\n\n    console.log('init project : ', this.project)\n  }\n}\n"]}