feat: change the project structure and add mock data function

Change-Id: I381845bff5eb37d1fab3eba8cf1ae7838df523b7
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

1 files changed, 68 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/shared/components/details/details.component.html b/usecaseui-portal/src/app/shared/components/details/details.component.html
new file mode 100644
index 00000000..62770b60
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/details/details.component.html
@@ -0,0 +1,68 @@
+<!--
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<div class="content">
+    <div class="header">
+        <h2>HEADER INFORMATION</h2>
+        <hr> <span class="tildeimg"></span>
+        <div class="headerlist">
+            <div class="leftlist">
+                <p> <span>Version :</span>{{datailheaderdata.version}}</p>
+                <p> <span>Domain :</span>{{datailheaderdata.domain}}</p>
+                <p> <span>Event Name :</span>{{datailheaderdata.eventName}}</p>
+                <p> <span>Event Id :</span>{{datailheaderdata.eventId}}</p>
+                <p> <span>EventType :</span>{{datailheaderdata.eventType}}</p>
+                <p> <span>NfcNamingCode :</span>{{datailheaderdata.nfcNamingCode}}</p>
+                <p> <span>NfNamingCode :</span>{{datailheaderdata.nfNamingCode}}</p>
+                <p> <span>SourceName :</span>{{datailheaderdata.sourceName}}</p>
+                <p> <span>SourceId :</span>{{datailheaderdata.sourceId}}</p>
+                <p> <span>ReportingEntityName :</span>{{datailheaderdata.reportingEntityName}}</p>
+                <p> <span>ReportingEntityId :</span>{{datailheaderdata.reportingEntityId}}</p>
+            </div>
+            <div class="rightlist">
+                <p> <span>Priority :</span>{{datailheaderdata.priority}}</p>
+                <p> <span>ReportTime :</span>{{datailheaderdata.reportTime}}</p>
+                <p> <span>ClearTime :</span>{{datailheaderdata.clearTime}}</p>
+                <p> <span>FaultFieldsVersion :</span>{{datailheaderdata.faultFieldsVersion}}</p>
+                <p> <span>Event Servrity :</span>{{datailheaderdata.eventServrity}}</p>
+                <p> <span>EventSourceType :</span>{{datailheaderdata.eventSourceType}}</p>
+                <p> <span>EventCategory :</span>{{datailheaderdata.eventCategory}}</p>
+                <p> <span>AlarmCondition :</span>{{datailheaderdata.alarmCondition}}</p>
+                <p> <span>SpecificProblem :</span>{{datailheaderdata.specificProblem}}</p>
+                <p> <span>Status :</span> {{datailheaderdata.status}}</p>
+                <p> <span>AlarmInterfaceA :</span>{{datailheaderdata.alarmInterfaceA}}</p>
+            </div>
+        </div>
+    </div>
+    <hr> 
+    <button [ngClass]="{'buttonActive':moredetailShow}" (click)="slideUpDown()"></button>
+    <h2 class="detailtitle">DETAIL INFORMATION</h2>
+    <div class="detailInformatioin" [@slideUpDown]='state'>
+        <nz-table #detailTable [nzData]="dataillistdata" [nzShowPagination]="false" nzSize="small" [nzBordered]="true">
+            <thead>
+                <tr>
+                    <th nzWidth="18%">Item Name</th>
+                    <th >Item Value</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let data of dataillistdata">
+                    <td>{{data.name}}</td>
+                    <td>{{data.value}}</td>
+                </tr>
+            </tbody>
+        </nz-table>
+    </div>
+</div>