@dssp/project 1.0.0-alpha.5 → 1.0.0-alpha.8

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

@@ -10,7 +10,7 @@ import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { client } from '@operato/graphql';
 import { ScrollbarStyles } from '@operato/styles';
 import gql from 'graphql-tag';
-import { BUILDING_INSPECTION_STATUS } from './project-list';
+import { BUILDING_INSPECTION_STATUS, ProjectType } from './project-list';
 import _getWeather from '../lib/waether';
 import '@operato/chart/ox-progress-circle.js';
 let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
@@ -42,7 +42,8 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
             rain: 0,
             temperature: 0,
             humidity: 0,
-            wind: ''
+            windDirection: '',
+            windSpeed: 0
         };
     }
     get context() {
@@ -51,7 +52,8 @@ 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>
         <h2>${this.project.name}</h2>
@@ -147,56 +149,135 @@ 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>
-              <span progress>
-                <ox-progress-circle
-                  .value=${this.project.totalProgress}
-                  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=${this.project.weeklyProgress}
-                  titleText="주간"
-                  suffix="%"
-                  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 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>
-                  <span><md-icon slot="icon">humidity_percentage</md-icon> 습도</span>
-                  <span bold>${this.weather.humidity}%</span>
+                <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>
-                  <span><md-icon slot="icon">thermostat</md-icon> 온도</span>
-                  <span bold>${this.weather.temperature}°C</span>
+                <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>
-                  <span><md-icon slot="icon">air</md-icon> 풍향</span>
-                  <span bold>${this.weather.wind}</span>
+                <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>
-              </span>
+              </div>
+
+              <div progress-container>
+                <span progress>
+                  <ox-progress-circle
+                    .value=${this.project.totalProgress}
+                    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=${this.project.weeklyProgress}
+                    titleText="주간"
+                    suffix="%"
+                    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 progress>
+                  <ox-progress-circle
+                    .value=${this.project.inspPassRate}
+                    titleText="검측 통과"
+                    suffix="%"
+                    fontSize="27px"
+                    fontColor="#4E5055"
+                    borderStyle="none"
+                    innerCircleSize="28%"
+                    circleColor="#1BB401"
+                    shadow="#00000026 4px 4px 4px"
+                    background="#e8f7e5"
+                  ></ox-progress-circle>
+                  <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="#8957D8"
+                    shadow="#00000026 4px 4px 4px"
+                    background="#f3eefb"
+                  ></ox-progress-circle>
+                  <div robot-progress-rate>진행률(%)</div>
+                </span>
+              </div>
             </div>
             <div inspection>
               <span name bold>
@@ -244,13 +325,15 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
                 <tbody>
                   ${this.buildingInspections.map((inspection, idx) => {
             var _a, _b, _c, _d, _e, _f;
-            return html ` <tr @click=${() => this._onClickInspection(inspection.id || '')}>
+            return html ` <tr @click=${() => this._onClickInspection(inspection)}>
                       <td>${idx + 1}</td>
-                      <td>${(_b = (_a = inspection === null || inspection === void 0 ? void 0 : inspection.buildingLevel) === null || _a === void 0 ? void 0 : _a.building) === null || _b === void 0 ? void 0 : _b.name} ${(_c = inspection === null || inspection === void 0 ? void 0 : inspection.buildingLevel) === null || _c === void 0 ? void 0 : _c.floor}층</td>
+                      <td>${(_b = (_a = inspection === null || inspection === void 0 ? void 0 : inspection.buildingLevel) === null || _a === void 0 ? void 0 : _a.building) === null || _b === void 0 ? void 0 : _b.name} ${(_c = inspection === null || inspection === void 0 ? void 0 : inspection.buildingLevel) === null || _c === void 0 ? void 0 : _c.floorDisplayName}층</td>
                       <td bold>${(_d = inspection.checklist) === null || _d === void 0 ? void 0 : _d.constructionType}</td>
                       <td>${((_f = (_e = inspection.checklist) === null || _e === void 0 ? void 0 : _e.inspectionParts) === null || _f === void 0 ? void 0 : _f.join(', ')) || ''}</td>
                       <td>${this._formatDate(inspection.requestDate)}</td>
-                      <td bold>${inspection.status && BUILDING_INSPECTION_STATUS[inspection.status]}</td>
+                      <td bold status=${inspection.status || ''}>
+                        ${inspection.status && BUILDING_INSPECTION_STATUS[inspection.status]}
+                      </td>
                     </tr>`;
         })}
                 </tbody>
@@ -278,6 +361,7 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
             name
             startDate
             endDate
+            projectType
             mainPhoto {
               fullpath
             }
@@ -287,6 +371,7 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
             inspPassRate
             robotProgressRate
             structuralSafetyRate
+            robotCount
             buildingComplex {
               id
               address
@@ -329,8 +414,11 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
               status
               requestDate
               buildingLevel {
+                id
                 floor
+                floorDisplayName
                 building {
+                  id
                   name
                 }
               }
@@ -364,8 +452,15 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
             this.weather = await _getWeather(latitude, longitude);
         }
     }
-    _onClickInspection(buildingInspectionId) {
-        navigate(`building-inspection-detail-drawing/${buildingInspectionId}`);
+    _onClickInspection(buildingInspection) {
+        var _a, _b, _c;
+        console.log('buildingInspection :', buildingInspection);
+        if (this.project.projectType === ProjectType.DSSP) {
+            navigate(`building-inspection-grid-detail/${this.project.id}?buildingId=${(_b = (_a = buildingInspection === null || buildingInspection === void 0 ? void 0 : buildingInspection.buildingLevel) === null || _a === void 0 ? void 0 : _a.building) === null || _b === void 0 ? void 0 : _b.id}&levelId=${(_c = buildingInspection === null || buildingInspection === void 0 ? void 0 : buildingInspection.buildingLevel) === null || _c === void 0 ? void 0 : _c.id}`);
+        }
+        else if (this.project.projectType === ProjectType.DCSP) {
+            navigate(`building-inspection-detail-drawing/${buildingInspection.id}`);
+        }
     }
     _formatDate(date) {
         return date
@@ -398,7 +493,7 @@ ProjectDetail.styles = [
         --md-outlined-button-container-height: 30px;
         --md-outlined-button-trailing-space: var(--spacing-medium, 8px);
         --md-outlined-button-leading-space: var(--spacing-medium, 8px);
-        --md-sys-color-outline: rgba(51,51,51,.20);
+        --md-sys-color-outline: rgba(51, 51, 51, 0.2);
       }
 
       *[bold] {
@@ -412,7 +507,7 @@ ProjectDetail.styles = [
         h2 {
           flex: 0.5;
           color: #3f71a0;
-          font-size:18px;
+          font-size: 18px;
         }
 
         div[button-container] {
@@ -443,7 +538,7 @@ ProjectDetail.styles = [
       div[body] {
         display: flex;
         margin: var(--spacing-large, 12px);
-        margin-top:0;
+        margin-top: 0;
         gap: var(--spacing-medium, 8px);
 
         h3 {
@@ -529,41 +624,55 @@ ProjectDetail.styles = [
                 --md-outlined-button-container-height: 30px;
                 --md-outlined-button-trailing-space: var(--spacing-medium, 8px);
                 --md-outlined-button-leading-space: var(--spacing-medium, 8px);
-                --md-sys-color-outline: rgba(51,51,51,.20);
+                --md-sys-color-outline: rgba(51, 51, 51, 0.2);
               }
             }
           }
 
           div[right-top] {
             div[state] {
-              display: grid;
-              grid-template-columns: 0.95fr 0.95fr 1.1fr;
+              display: flex;
+              flex-direction: column;
               gap: var(--spacing-large, 12px);
 
-              span[progress] {
-                max-width: 150px;
-                text-align: center;
+              div[progress-container] {
                 display: flex;
-                justify-self: center;
-                flex-direction: column;
-                width: 100%;
+                justify-content: space-around;
+                gap: 8px;
 
-                & > div {
-                  font-weight: bold;
-                  color: #2e79be;
-                  font-size: 12px;
-                  margin-top: var(--spacing-small, 4px);
-                }
-                & > div[week] {
-                  color: #06b5af;
+                span[progress] {
+                  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: 16px;
+                    margin-top: 9px;
+                  }
+                  & > div[week] {
+                    color: #06b5af;
+                  }
+                  & > div[insp-pass-rate] {
+                    color: #1bb401;
+                  }
+                  & > div[robot-progress-rate] {
+                    color: #8957d8;
+                  }
                 }
               }
-              span[weather] {
+
+              div[weather] {
                 display: flex;
                 flex-direction: column;
                 gap: var(--spacing-small, 4px);
                 margin-left: var(--spacing-medium, 8px);
-                font-size:14px;
+                font-size: 14px;
 
                 & > div {
                   display: flex;
@@ -573,8 +682,8 @@ ProjectDetail.styles = [
 
                   & > span {
                     display: flex;
-                    align-item:center;
-                    var(--spacing-tiny, 2px);
+                    align-items: center;
+                    gap: var(--spacing-tiny, 2px);
                   }
                 }
               }
@@ -582,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;
@@ -610,7 +719,7 @@ ProjectDetail.styles = [
                 flex-direction: row;
                 text-align: right;
                 gap: var(--spacing-medium, 8px);
-                line-height:1.3;
+                line-height: 1.3;
 
                 md-icon {
                   width: 40px;
@@ -621,6 +730,82 @@ ProjectDetail.styles = [
                 }
               }
             }
+            div[kpi-container] {
+              display: flex;
+              gap: 8px;
+              margin-bottom: 8px;
+              align-items: center;
+
+              div[kpi-header] {
+                grid-column: 1 / -1;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: var(--spacing-small, 4px);
+
+                span[kpi-title] {
+                  font-weight: bold;
+                  font-size: 16px;
+                  color: #2e79be;
+                }
+
+                span[kpi-datetime] {
+                  font-size: 12px;
+                  color: #666;
+                }
+              }
+
+              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;
+                  }
+                }
+              }
+            }
             div[notice] {
               margin-top: var(--spacing-medium, 8px);
 
@@ -679,7 +864,7 @@ ProjectDetail.styles = [
             }
 
             tbody td {
-              border-bottom: 1px solid rgba(51,51,51,.20);
+              border-bottom: 1px solid rgba(51, 51, 51, 0.2);
               padding: var(--spacing-small, 4px);
               text-align: center;
               white-space: nowrap;
@@ -688,6 +873,10 @@ ProjectDetail.styles = [
               font-size: 13px;
             }
 
+            tbody td[status='FAIL'] {
+              color: #e15757;
+            }
+
             md-elevated-button {
               margin: 0 var(--spacing-small, 4px);