[完善]消防设施初步完善

proxy.config.json

@@ -1,6 +1,6 @@
 {
     "/api": {
-      "target": "http://39.106.78.171:8088",
+      "target": "http://59.111.63.117:8090",
       "secure": false,
       "changeOrigin": true
     }

src/app/app-routing.module.ts

@@ -3,7 +3,6 @@ import { Routes, RouterModule } from '@angular/router';
 import { LoginComponent } from './pages/login/login.component';
 import { RegisterComponent } from './pages/register/register.component';
 import { NavigationComponent } from './navigation/navigation.component';
-import { LockscreenComponent } from './pages/lockscreen/lockscreen.component';
 
 //路由守卫
 import {AuthGuard} from './auth.guard'
@@ -26,9 +25,6 @@ const routes: Routes = [
   {path:'register',
   component:RegisterComponent,}, //注册页
 
-  // {path:'lockscreen',
-  // component:LockscreenComponent,
-  // canActivate: [AuthGuard],}//守卫验证
 ];
 
 @NgModule({

src/app/navigation/navigation.component.html

@@ -6,7 +6,6 @@
         </div>
         <div class="navbox">
             <ul>
-                <!-- <li  [routerLink]="" routerLinkActive="router-link-active">基本信息</li> -->
                 <!-- basicinfo -->
                 <li [routerLink]="['/datacollection/basicinfo']" routerLinkActive="router-link-active">基本信息</li>
                 <!-- plan -->
@@ -14,7 +13,7 @@
                 <!-- allaround -->
                 <li [routerLink]="['/datacollection/allaround']" routerLinkActive="router-link-active">四周毗邻</li>
                 <!-- fire-fighting-device -->
-                <li [routerLink]="['/datacollection/fire-fighting-device']" routerLinkActive="router-link-active" style="display: none;">消防设施</li>
+                <li [routerLink]="['/datacollection/fire-fighting-device']" routerLinkActive="router-link-active">消防设施</li>
                 <!-- key-site  -->
                 <li [routerLink]="['/datacollection/key-site']" routerLinkActive="router-link-active">重点部位</li>
                 <!-- function-division -->

src/app/ui/fire-fighting-device/fire-fighting-device.component.html

@@ -3,25 +3,58 @@
     <mat-tab label="单位消防设施">
       <div class="contentBox">
 
-        <h3 style="text-align: center;font-weight: 550;">消防水源</h3>
-        <div>
+        <div style="width: 100%;margin-top: 25px;" *ngFor="let item of companyBuiltInGrouping;let key = index">
+          <h3 style="text-align: center;font-weight: 550;">{{item.name}}</h3>
+          <div style="margin-bottom: 10px;">
             <mat-icon title="创建">add_circle_outline</mat-icon>
             <mat-icon title="保存" style="margin-left: 25px;">description</mat-icon>
             <mat-icon title="删除" style="margin-left: 25px;">delete</mat-icon>
           </div>
           <div>
-          <div class="flexBox">
-            <p></p>
-            <p>项目</p>
-            <p>照片</p>
-            <p>主要情况</p>
+            <mat-accordion multi>
+              <mat-expansion-panel disabled>
+                <mat-expansion-panel-header>
+                  <label class="textContent"></label>
+                  <label class="textContent">项目</label>
+                  <label class="textContent">照片</label>
+                  <label class="lastTextContent">主要情况</label>
+                </mat-expansion-panel-header>
+              </mat-expansion-panel>
+
+              <mat-expansion-panel *ngFor="let items of item.facilityItems" disabled [expanded]=items.expanded>
+                <mat-expansion-panel-header>
+                  <label class="textContent"><mat-checkbox></mat-checkbox></label>
+                  <label class="textContent">{{items.name}}</label>
+                  <label class="textContent"><a href="javascript:void(0)" (click)='previewImg()'>查看图片</a></label>
+                  <label class="lastTextContent">{{items.details}}</label>
+                  <label><mat-icon title="切换" (click)='SwitchBoard(items)'>radio_button_checked</mat-icon></label>
+                </mat-expansion-panel-header>
+              </mat-expansion-panel>
+  
+            </mat-accordion>
           </div>
-          <div class="flexBox">
-            <p></p>
-            <p></p>
-            <p></p>
-            <p></p>
         </div>
+
+        <div style="width: 100%;margin-top: 25px;" *ngFor="let item of companyOptionalGrouping;let key = index">
+          <mat-accordion multi>
+
+            <mat-expansion-panel>
+              <mat-expansion-panel-header>
+                <h3 style="text-align: center;font-weight: 550;">{{item.name}}</h3>
+              </mat-expansion-panel-header>
+              <div *ngFor="let items of item.propertyInfos" class="InputField">
+                <label>{{items.propertyName}}:</label>
+                <input type="text">
+                <textarea maxlength="250"></textarea>
+                <input type="number">
+                <mat-radio-group>
+                  <mat-radio-button value=true style="margin-left: 5px;">是</mat-radio-button>
+                  <mat-radio-button value=false style="margin-left: 5px;">否</mat-radio-button>
+                </mat-radio-group>
+              </div>
+            </mat-expansion-panel>
+
+          </mat-accordion>
         </div>
 
       </div>

src/app/ui/fire-fighting-device/fire-fighting-device.component.scss

@@ -1,21 +1,46 @@
 .content {
   width: 100%;
-  height: 100%;
+  height: 90%;
   padding: 10px;
+  overflow-y: auto;
   .contentBox {
     width: 75%;
     height: 100%;
     margin: 0 auto;
   }
 }
+.mat-icon {
+  cursor:pointer;
+}
+
 
-//每一行 flex布局
-.flexBox {
-  display: flex;
+
+//可展开面板每一行css
+.textContent {
+  width: 15%;
+  color: black;
   text-align: center;
-  border: 1px solid black;
-  :first-child{flex: 5%}
-  :nth-child(2) {flex: 15%}
-  :nth-child(3) {flex: 15%}
-  :last-child {flex: 65%}
+}
+.lastTextContent {
+  width: 50%;
+  color: black;
+  text-align: center;
+}
+
+//bottom用户输入框
+.InputField {
+  display: inline-block;
+  margin: 10px 25px;
+  label {margin-right: 10px;}
+  input {
+    height: 22px;
+    line-height: 22px;
+    border-radius: 3px;}
+}
+textarea {
+  border-radius: 5px;
+  padding: 5px;
+  width: 300px;
+  height: 36px;
+  resize: none;
 }

src/app/ui/fire-fighting-device/fire-fighting-device.component.ts

@@ -18,9 +18,42 @@ export class FireFightingDeviceComponent implements OnInit {
   displayedColumns: string[] = ['checked','project', 'phone', 'mainmsg'];
 
   ngOnInit(): void {
+    this.getCompanyInformation()
+  }
+
+  companyBuiltInGrouping:any = []; //单位消防设施内置分组
+  companyOptionalGrouping:any = []; //单位消防设施可选分组
+
+  //获得单位基本信息
+  getCompanyInformation () {
+    this.http.get('/api/CompanyAccount/Company').subscribe((data:any)=>{
+      if (data.buildingTypes.length) {
+        let newData = {buildingType: data.buildingTypes[0].id}
+        this.http.get('/api/CompanyAccount/CompanyFacilities',{params:newData}).subscribe((data:any)=>{ //获得单位的消防设施
+          this.companyBuiltInGrouping = data[0].companyFacilityGroups
+          this.companyOptionalGrouping = data[0].companyOptionalGroups
+          this.companyBuiltInGrouping.forEach(element => { //循环单位内置分组项
+            element.facilityItems.forEach(elements => {
+              elements.expanded = false});
+          });
+          console.log(this.companyBuiltInGrouping,this.companyOptionalGrouping)
+        })
+      }
+    })
+  }
 
+  //切换展开面板
+  SwitchBoard (e) {
+    e.expanded = !e.expanded
   }
 
+  //预览图片
+  previewImg () {
+    console.log('IMG')
+  }
+
+
+
 
 
 }

src/app/ui/realistic-picture/realistic-picture.component.html

@@ -25,7 +25,7 @@
           <span class="title" *ngIf="selectReal">{{selectReal.name}}</span>
           <button mat-raised-button color="primary" class="uploadFileFixed" *ngIf="!isLoading">
             上传图片
-            <input type="file" id="uploadFile" class="uploadFile" (change)='uploadFile($event)' ng2FileSelect [uploader]="uploader">
+            <input type="file" id="uploadFile" class="uploadFile" (change)='uploadFile($event)' ng2FileSelect [uploader]="uploader" accept="image/*">
           </button>
           <button mat-raised-button color="primary" style="margin-left: 15px;" (click)='download()'>批量下载</button>
           <button mat-raised-button color="primary" style="margin-left: 15px;" *ngIf="isDownload && !isLoading" (click)='batchDownload()'>下载</button>