[新增]证件-档案类页面

src/app/pages/license/file-category/details-file-category/details-file-category.component.html

@@ -1 +1,56 @@
-<p>details-file-category works!</p>
+<div class="box" id="detailsfilecategory">
+    <div class="title">
+        <div class="titlecontent">
+            详情
+        </div>
+        <i nz-icon nzType="close" nzTheme="outline" (click)="destroyModal()"></i>
+    </div>
+
+    <div class="content">
+        <p>证件名称: &nbsp;&nbsp;建设用地规划许可证</p>
+        <div class="cutoffrule"></div>
+        <p>有效期类型: &nbsp;&nbsp;1523天</p>
+        <div class="cutoffrule"></div>
+        <p>是否年检: &nbsp;&nbsp;是</p>
+        <div class="cutoffrule"></div>
+        <p>证件图片: &nbsp;&nbsp;<img src="/api/Objects/sinochemweb/stationPhotos/175/timg.jpg" alt=""
+                (click)="viewImg('/api/Objects/sinochemweb/stationPhotos/175/timg.jpg')"></p>
+        <div class="cutoffrule"></div>
+        <p class="recordP">
+            <span>审核记录</span>
+            <span>
+                <span style="margin-right: 6px;">
+                    审核次数：6
+                </span>
+                <span>
+                    驳回次数：2
+                </span>
+            </span>
+        </p>
+        <nz-timeline>
+            <nz-timeline-item>
+                <span style="margin-right: 12px;">2022.04.02</span>
+                <span>审核完成</span>
+            </nz-timeline-item>
+            <nz-timeline-item>
+                <span style="margin-right: 12px;">2022.04.02</span>
+                <span>审核完成</span>
+            </nz-timeline-item>
+            <nz-timeline-item>
+                <span style="margin-right: 12px;">2022.04.02</span>
+                <span>审核完成</span>
+            </nz-timeline-item>
+            <nz-timeline-item>
+                <span style="margin-right: 12px;">2022.04.02</span>
+                <span>审核完成</span>
+            </nz-timeline-item>
+        </nz-timeline>
+        <ng-template #soccerTemplate>
+            <div class="circle">
+
+            </div>
+        </ng-template>
+    </div>
+
+
+</div>

src/app/pages/license/file-category/details-file-category/details-file-category.component.scss

@@ -0,0 +1,60 @@
+.box {
+  .title {
+    font-family: sybold;
+    width: 100%;
+    height: 48px;
+    background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%);
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    .titlecontent {
+      width: 100%;
+      height: 32px;
+      line-height: 32px;
+      background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%);
+      text-align: center;
+      color: #91CCFF;
+      font-size: 16px;
+    }
+
+    i {
+      position: absolute;
+      right: 12px;
+      color: #fff;
+      font-size: 18px;
+      cursor: pointer;
+    }
+  }
+
+  .content {
+    box-sizing: border-box;
+    padding: 0 15px;
+    max-height: 580px;
+    overflow-y: auto;
+
+    .circle {
+      width: 8px;
+      height: 8px;
+      background: linear-gradient(180deg, #36A2FF 0%, #FFFFFF 100%);
+      opacity: 1;
+    }
+    .recordP{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+
+  p {
+    margin-bottom: 0;
+    color: #C4E2FC;
+    margin: 12px 0;
+
+    img {
+      width: 88px;
+      height: 56px;
+      cursor: pointer;
+    }
+  }
+}

src/app/pages/license/file-category/details-file-category/details-file-category.component.ts

@@ -1,5 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
-
+import { NzModalRef } from 'ng-zorro-antd/modal';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+import { ObjectsSimpleService } from 'src/app/service/objectsSimple.service';
+import Viewer from 'viewerjs';
 @Component({
   selector: 'app-details-file-category',
   templateUrl: './details-file-category.component.html',
@@ -7,9 +11,35 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DetailsFileCategoryComponent implements OnInit {
 
-  constructor() { }
+  @Input() data?: any;
+  constructor(private modal: NzModalRef) { }
+
 
   ngOnInit(): void {
   }
 
+
+  destroyModal() {
+    this.modal.destroy({ data: 'this the result data' });
+  }
+  //查看图片
+  viewImg(url) {
+    // url.split('?')[0]
+    let dom = document.getElementById(`viewerjs`)
+    let pObjs = dom.childNodes;
+    let node = document.createElement("img")
+    node.style.display = "none";
+    node.src = url;
+    node.id = 'img'
+    dom.appendChild(node)
+    setTimeout(() => {
+      let viewer = new Viewer(document.getElementById(`viewerjs`), {
+        hidden: () => {
+          dom.removeChild(pObjs[0]);
+          viewer.destroy();
+        }
+      });
+      node.click();
+    }, 0);
+  }
 }

src/app/pages/license/file-category/edit-file-category/edit-file-category.component.html

@@ -1 +1,44 @@
-<p>edit-file-category works!</p>
+<div class="box" id="editfilecategory">
+    <div class="title">
+        <div class="titlecontent">
+            编辑
+        </div>
+        <i nz-icon nzType="close" nzTheme="outline" (click)="destroyModal()"></i>
+    </div>
+    <form nz-form [formGroup]="validateForm" class="form">
+        <p>证件名称: 建设用地规划许可证</p>
+
+        <div class="cutoffrule"></div>
+
+        <p>有效期类型<span style="color: red;">*</span></p>
+
+        <nz-form-item>
+            <nz-form-control>
+                <nz-select formControlName="type">
+                    <nz-option nzValue="0" nzLabel="不适用"></nz-option>
+                </nz-select>
+            </nz-form-control>
+        </nz-form-item>
+
+        <p>附件上传（图片格式、pdf格式、word格式）</p>
+
+        <div class="uploadDivbox">
+            <div class="uploadDiv" style="margin-right: 12px;">
+                <img *ngIf="imageUrl" style="width: 100%;height: 100%;cursor: pointer;" [src]="imageUrl" alt=""
+                    (click)="viewImg(imageUrl)">
+                <input *ngIf="!imageUrl" (change)="filechange($event)" class="fileinput" type="file" name="" id="">
+                <button *ngIf="!imageUrl" nz-button [nzLoading]=""><i nz-icon nzType="upload"
+                        nzTheme="outline"></i>上传附件</button>
+            </div>
+            <div class="uploadDiv" *ngIf="imageUrl">
+                <input (change)="filechange($event)" class="fileinput" type="file" name="" id="">
+                <button nz-button [nzLoading]=""><i nz-icon nzType="upload" nzTheme="outline"></i>重新上传</button>
+            </div>
+        </div>
+
+        <div class="btnbox">
+            <button nz-button type="submit" class="ok" (click)="ok()">确定</button>
+            <button nz-button type="button" class="cancel" (click)="destroyModal()">取消</button>
+        </div>
+    </form>
+</div>

src/app/pages/license/file-category/edit-file-category/edit-file-category.component.scss

@@ -0,0 +1,127 @@
+.box {
+  .title {
+    font-family: sybold;
+    width: 100%;
+    height: 48px;
+    background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%);
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    .titlecontent {
+      width: 100%;
+      height: 32px;
+      line-height: 32px;
+      background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%);
+      text-align: center;
+      color: #91CCFF;
+      font-size: 16px;
+    }
+
+    i {
+      position: absolute;
+      right: 12px;
+      color: #fff;
+      font-size: 18px;
+      cursor: pointer;
+    }
+  }
+
+  p {
+    margin-bottom: 0;
+    color: #C4E2FC;
+    margin: 12px 0;
+  }
+
+  .form {
+    box-sizing: border-box;
+    padding: 0 17px;
+
+    label {
+      color: #C4E2FC;
+      margin-right: 6px;
+    }
+
+
+
+    .validity {
+      display: flex;
+      align-items: center;
+    }
+
+    nz-date-picker {
+      flex: .5;
+    }
+
+    nz-range-picker {
+      flex: 1;
+    }
+
+    .btnbox {
+      width: 100%;
+      margin-top: 24px;
+      margin-bottom: 17px;
+      display: flex;
+      justify-content: flex-end;
+
+      button {
+        border-radius: 0px;
+        color: #91CCFF;
+      }
+
+      button:nth-child(2) {
+        margin-left: 16px;
+      }
+
+      .ok {
+        background: rgba(0, 129, 255, 0.4);
+      }
+
+      .cancel {
+        border: 1px solid #C4E2FC;
+        background: #0c1e38;
+        color: rgba(99, 102, 105, 0.6);
+        box-shadow: 0 0 3px 0 #fff inset;
+      }
+    }
+  }
+
+  .uploadDivbox {
+    width: 100%;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    position: relative;
+    margin: 5px 0;
+
+    .uploadDiv {
+      width: 120px;
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+
+      .fileinput {
+        width: 114px;
+        height: 32px;
+        position: absolute;
+        z-index: 100;
+        opacity: 0;
+        top: 23px;
+        cursor: pointer;
+      }
+
+      button {
+        z-index: 99;
+        width: 114px;
+        height: 32px;
+        background: rgba(0, 129, 255, 0.3);
+        border: 1px solid #36A2FF;
+        opacity: 1;
+        border-radius: 0px;
+        color: #91CCFF;
+      }
+    }
+  }
+}

src/app/pages/license/file-category/edit-file-category/edit-file-category.component.ts

@@ -1,5 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
-
+import { NzModalRef } from 'ng-zorro-antd/modal';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+import { ObjectsSimpleService } from 'src/app/service/objectsSimple.service';
+import Viewer from 'viewerjs';
 @Component({
   selector: 'app-edit-file-category',
   templateUrl: './edit-file-category.component.html',
@@ -7,9 +11,104 @@ import { Component, OnInit } from '@angular/core';
 })
 export class EditFileCategoryComponent implements OnInit {
 
-  constructor() { }
+  @Input() data?: any;
+
+  validateForm!: FormGroup;
+  constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient, private objectsSrv: ObjectsSimpleService) { }
+
 
+  data2
   ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      type: [null, [Validators.required]]
+    });
+    this.data2 = JSON.parse(JSON.stringify(this.data))
+  }
+
+  isLongTerm = false
+  imageUrl = '/api/Objects/sinochemweb/stationPhotos/175/timg.jpg'
+  validityChange($event) {
+    console.log($event)
+    this.isLongTerm = $event
+  }
+
+  destroyModal() {
+    this.modal.destroy({ data: 'this the result data' });
+  }
+  ok() {
+    this.modal.triggerOk()
+  }
+
+
+
+  isLoadingSave: boolean = false
+  uploadIndex: string
+  filechange(e) {
+    let oilStationId = JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id
+    let file = e.target.files[0] || null //获取上传的文件
+    this.openFileSelect(file, `stationPhotos/${oilStationId}/`)
+  }
+  //设置文件路径并上传
+  postFilePath
+  async openFileSelect(file: File, extensionPath: string) {
+    this.postFilePath = extensionPath;
+    let fileSize = file.size || null //上传文件的总大小
+    let shardSize = 5 * 1024 * 1024 //5MB 超过5MB要分块上传
+    if (fileSize >= shardSize) //  超过5MB要分块上传
+    {
+      await this.postFileByMul(file);
+    }
+    else //普通上传
+    {
+      await this.postFile(file);
+    }
+  }
+  //上传文件
+  async postFile(file: File) {
+    await new Promise((resolve, reject) => {
+      this.objectsSrv.postFile(this.postFilePath, file).subscribe(data => {
+        let dataObj = data as any;
+        let filePath: string = ObjectsSimpleService.baseUrl + dataObj.objectName;
+        this.imageUrl = filePath
+        console.log('上传成功', filePath)
+        resolve('success')
+      });
+    })
+  }
+
+  /**
+   * 分块上传
+   * @param file 
+   */
+  postFileByMul(file: File) {
+    this.objectsSrv.postFile_MultipartUpload(this.postFilePath, file).then((value) => {
+      let dataObj = value as any;
+      let filePath = dataObj.filePath
+      this.imageUrl = filePath
+      console.log('上传成功', filePath)
+    });
+
+  }
+
+  //查看图片
+  viewImg(url) {
+    // url.split('?')[0]
+    let dom = document.getElementById(`viewerjs`)
+    let pObjs = dom.childNodes;
+    let node = document.createElement("img")
+    node.style.display = "none";
+    node.src = url;
+    node.id = 'img'
+    dom.appendChild(node)
+    setTimeout(() => {
+      let viewer = new Viewer(document.getElementById(`viewerjs`), {
+        hidden: () => {
+          dom.removeChild(pObjs[0]);
+          viewer.destroy();
+        }
+      });
+      node.click();
+    }, 0);
   }
 
 }

src/app/pages/license/file-category/file-category.component.html

@@ -1 +1,39 @@
-<p>file-category works!</p>
+<div class="box" id="fileLicense">
+    <div class="tablebox" id="tablebox">
+        <nz-table *ngIf="tableScrollHeight" [nzLoading]="tableSpin" [nzPageSize]='9999' #headerTable [nzData]="list"
+            [nzShowPagination]="false" [nzScroll]="{ y:tableScrollHeight }" [nzNoResult]='null' nzTableLayout="fixed">
+            <thead>
+                <tr>
+                    <th [nzWidth]="'16%'">
+                        <span style="margin-left: 25%;">证件名称</span>
+                    </th>
+                    <th>有效期类型</th>
+                    <th>图片</th>
+                    <th>提交时间</th>
+                    <th>审核状态</th>
+                    <th>操作</th>
+                </tr>
+            </thead>
+            <tbody id="table">
+                <tr *ngFor="let item of headerTable.data;let key = index">
+                    <td>
+                        <span style="margin-left: 25%;">证件名称</span>
+                    </td>
+                    <td>有效期类型</td>
+                    <td>
+                        <img src="../../../../assets/images/bgImg.png" alt=""
+                            (click)="viewImg('../../../../assets/images/bgImg.png')">
+                    </td>
+                    <td>提交时间</td>
+                    <td>审核状态</td>
+                    <td class="operation">
+                        <span class="blueColor" (click)="edit(item)">编辑</span>
+                        <span class="blueColor" (click)="details(item)">详情</span>
+                        <span class="blueColor">提交审核</span>
+                    </td>
+                </tr>
+            </tbody>
+        </nz-table>
+
+    </div>
+</div>

src/app/pages/license/file-category/file-category.component.scss

@@ -0,0 +1,23 @@
+.box {
+  width: 100%;
+  height: 100%;
+}
+
+.tablebox {
+  width: 100%;
+  height: 100%;
+
+  .operation {
+    span {
+      margin-right: 6px;
+    }
+  }
+
+  #table {
+    img {
+      width: 30px;
+      height: 30px;
+      cursor: pointer;
+    }
+  }
+}

src/app/pages/license/file-category/file-category.component.ts

@@ -1,5 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewContainerRef } from '@angular/core';
-
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { Observable, fromEvent } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import Viewer from 'viewerjs';
+import * as moment from 'moment';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { HttpClient } from '@angular/common/http';
+import { EditFileCategoryComponent } from './edit-file-category/edit-file-category.component';
+import { DetailsFileCategoryComponent } from './details-file-category/details-file-category.component';
 @Component({
   selector: 'app-file-category',
   templateUrl: './file-category.component.html',
@@ -7,9 +15,111 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FileCategoryComponent implements OnInit {
 
-  constructor() { }
+  constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService, private http: HttpClient) { }
+  tableSpin = false
+  list = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
 
+  tableScrollHeight
   ngOnInit(): void {
+    this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px'
+    // 页面监听
+    fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => {
+      this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px'
+    });
+  }
+  //查看图片
+  viewImg(url) {
+    // url.split('?')[0]
+    let dom = document.getElementById(`viewerjs`)
+    let pObjs = dom.childNodes;
+    let node = document.createElement("img")
+    node.style.display = "none";
+    node.src = url;
+    node.id = 'img'
+    dom.appendChild(node)
+    setTimeout(() => {
+      let viewer = new Viewer(document.getElementById(`viewerjs`), {
+        hidden: () => {
+          dom.removeChild(pObjs[0]);
+          viewer.destroy();
+        }
+      });
+      node.click();
+    }, 0);
+  }
+
+  dispose() {
+    console.log('处置')
   }
 
+  edit(item) {
+    console.log('item', item)
+    const modal = this.modal.create({
+      nzContent: EditFileCategoryComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 750,
+      nzBodyStyle: {
+        'border': '1px solid #91CCFF',
+        'border-radius': '0px',
+        'padding': '7px',
+        'box-shadow': '0 0 8px 0 #fff',
+        'background-image': 'linear-gradient(#003665, #000f25)'
+      },
+      nzComponentParams: {
+        data: item
+      },
+      nzFooter: null,
+      nzClosable: false,
+      nzOnOk: async () => {
+        if (instance.validateForm.valid) {
+          await new Promise(resolve => {
+            let body = {
+              id: item.id,
+              name: instance.validateForm.value.name,
+              storageLocation: instance.validateForm.value.storageLocation,
+              productionDate: moment(instance.validateForm.value.productionDate).format('yyyy-MM-DD'),
+              maintenanceDate: moment(instance.validateForm.value.maintenanceDate).format('yyyy-MM-DD'),
+              validityEndTime: moment(instance.validateForm.value.validityEndTime).format('yyyy-MM-DD'),
+              organizationUnitId: item.organizationUnitId
+            }
+            // this.http.put('/api/services/app/FireEquipment/Update', body).subscribe(data => {
+            //   resolve(data)
+            //   this.message.create('success', '修改成功！');
+            //   return true
+            // })
+          })
+        } else {
+          this.message.create('warning', '请填写完整！');
+          return false
+        }
+      }
+    });
+    const instance = modal.getContentComponent();
+    modal.afterClose.subscribe(result => { });
+  }
+  details(item) {
+    console.log('item', item)
+    const modal = this.modal.create({
+      nzContent: DetailsFileCategoryComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 450,
+      nzBodyStyle: {
+        'border': '1px solid #91CCFF',
+        'border-radius': '0px',
+        'padding': '7px',
+        'box-shadow': '0 0 8px 0 #fff',
+        'background-image': 'linear-gradient(#003665, #000f25)'
+      },
+      nzComponentParams: {
+        data: item
+      },
+      nzFooter: null,
+      nzClosable: false,
+      nzOnOk: async () => {
+
+      }
+    });
+    const instance = modal.getContentComponent();
+    modal.afterClose.subscribe(result => { });
+  }
 }

src/app/pages/license/pdf-word-look/pdf-word-look.component.html

@@ -0,0 +1,12 @@
+<div class="box">
+    <div class="title">
+        <div class="titlecontent">
+            详情
+        </div>
+        <i nz-icon nzType="close" nzTheme="outline" (click)="destroyModal()"></i>
+    </div>
+
+    <div class="content">
+        <iframe [src]="data.url" frameborder="0"></iframe>
+    </div>
+</div>

src/app/pages/license/pdf-word-look/pdf-word-look.component.scss

@@ -0,0 +1,38 @@
+.box {
+  .title {
+    font-family: sybold;
+    width: 100%;
+    height: 48px;
+    background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%);
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    .titlecontent {
+      width: 100%;
+      height: 32px;
+      line-height: 32px;
+      background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%);
+      text-align: center;
+      color: #91CCFF;
+      font-size: 16px;
+    }
+
+    i {
+      position: absolute;
+      right: 12px;
+      color: #fff;
+      font-size: 18px;
+      cursor: pointer;
+    }
+  }
+
+  .content {
+    box-sizing: border-box;
+    padding: 0 15px;
+    max-height: 580px;
+    overflow-y: auto;
+
+  }
+
+}

src/app/pages/license/pdf-word-look/pdf-word-look.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { NzModalRef } from 'ng-zorro-antd/modal';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+import { ObjectsSimpleService } from 'src/app/service/objectsSimple.service';
+import Viewer from 'viewerjs';
+@Component({
+  selector: 'app-pdf-word-look',
+  templateUrl: './pdf-word-look.component.html',
+  styleUrls: ['./pdf-word-look.component.scss']
+})
+export class PdfWordLookComponent implements OnInit {
+
+  @Input() data?: any;
+  constructor(private modal: NzModalRef) { }
+
+
+  ngOnInit(): void {
+    console.log('文档地址',this.data.url)
+  }
+
+
+  destroyModal() {
+    this.modal.destroy({ data: 'this the result data' });
+  }
+
+
+}

src/app/pages/license/update-category/details-update-category/details-update-category.component.html

@@ -1,28 +1,38 @@
 <div class="box" id="detailsupdatecategory">
     <div class="title">
         <div class="titlecontent">
-            编辑
+            详情
         </div>
         <i nz-icon nzType="close" nzTheme="outline" (click)="destroyModal()"></i>
     </div>
 
     <div class="content">
-        <p>证件名称: 营业执照</p>
+        <p>证件名称: &nbsp;&nbsp;营业执照</p>
         <div class="cutoffrule"></div>
-        <p>证件编号: Z201800041501</p>
+        <p>证件编号: &nbsp;&nbsp;Z201800041501</p>
         <div class="cutoffrule"></div>
-        <p>证件有效期: 2018.12.02—2025.01.12</p>
+        <p>证件有效期: &nbsp;&nbsp;2018.12.02—2025.01.12</p>
         <div class="cutoffrule"></div>
-        <p>办理类型: 年度公示</p>
+        <p>办理类型: &nbsp;&nbsp;年度公示</p>
         <div class="cutoffrule"></div>
-        <p>有效期类型: 1523天</p>
+        <p>有效期类型: &nbsp;&nbsp;1523天</p>
         <div class="cutoffrule"></div>
-        <p>是否年检: 是</p>
+        <p>是否年检: &nbsp;&nbsp;是</p>
         <div class="cutoffrule"></div>
-        <p>证件图片: <img src="/api/Objects/sinochemweb/stationPhotos/175/timg.jpg" alt=""
+        <p>证件图片: &nbsp;&nbsp;<img src="/api/Objects/sinochemweb/stationPhotos/175/timg.jpg" alt=""
                 (click)="viewImg('/api/Objects/sinochemweb/stationPhotos/175/timg.jpg')"></p>
         <div class="cutoffrule"></div>
-        <p>审核记录</p>
+        <p class="recordP">
+            <span>审核记录</span>
+            <span>
+                <span style="margin-right: 6px;">
+                    审核次数：6
+                </span>
+                <span>
+                    驳回次数：2
+                </span>
+            </span>
+        </p>
         <nz-timeline>
             <nz-timeline-item>
                 <span style="margin-right: 12px;">2022.04.02</span>

src/app/pages/license/update-category/details-update-category/details-update-category.component.scss

@@ -38,6 +38,11 @@
       background: linear-gradient(180deg, #36A2FF 0%, #FFFFFF 100%);
       opacity: 1;
     }
+    .recordP{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
   }
 
   p {

src/app/pages/license/update-category/edit-update-category/edit-update-category.component.html

@@ -44,7 +44,7 @@
             </nz-form-control>
         </nz-form-item>
 
-        <p>证件图片</p>
+        <p>附件上传（图片格式、pdf格式、word格式）</p>
 
         <div class="uploadDivbox">
             <div class="uploadDiv" style="margin-right: 12px;">
@@ -52,7 +52,7 @@
                 <input *ngIf="!imageUrl" (change)="filechange($event)" class="fileinput" type="file" name=""
                     id="">
                 <button *ngIf="!imageUrl" nz-button [nzLoading]=""><i nz-icon nzType="upload"
-                        nzTheme="outline"></i>上传图片</button>
+                        nzTheme="outline"></i>上传附件</button>
             </div>
             <div class="uploadDiv" *ngIf="imageUrl">
                 <input (change)="filechange($event)" class="fileinput" type="file" name="" id="">

src/app/pages/license/update-category/update-category.component.html

@@ -9,7 +9,7 @@
                     </th>
                     <th>证件编号</th>
                     <th>证件有效期</th>
-                    <th>图片</th>
+                    <th>附件</th>
                     <th>有效期类型</th>
                     <th>办理类型</th>
                     <th>是否年检</th>
@@ -27,8 +27,12 @@
                     <td>证件编号</td>
                     <td>证件有效期</td>
                     <td>
-                        <img src="../../../../assets/images/bgImg.png" alt=""
+                        <img *ngIf="item.type == 'img'" [src]="item.url" alt=""
                             (click)="viewImg('../../../../assets/images/bgImg.png')">
+                        <img *ngIf="item.type == 'word'" src="../../../../assets/images/license/word.png" alt=""
+                            (click)="lookFile(item)">
+                        <img *ngIf="item.type == 'pdf'" src="../../../../assets/images/license/pdf.png" alt=""
+                            (click)="lookFile(item)">
                     </td>
                     <td>有效期类型</td>
                     <td>办理类型</td>
@@ -46,6 +50,4 @@
         </nz-table>
 
     </div>
-</div>
+</div>
-
-

src/app/pages/license/update-category/update-category.component.ts

@@ -8,6 +8,7 @@ import * as moment from 'moment';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { HttpClient } from '@angular/common/http';
 import { DetailsUpdateCategoryComponent } from './details-update-category/details-update-category.component';
+import { PdfWordLookComponent } from '../pdf-word-look/pdf-word-look.component';
 @Component({
   selector: 'app-update-category',
   templateUrl: './update-category.component.html',
@@ -17,7 +18,11 @@ export class UpdateCategoryComponent implements OnInit {
 
   constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService, private http: HttpClient) { }
   tableSpin = false
-  list = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
+  list = [
+    { url: '/api/Objects/sinochemweb/stationPhotos/175/timg.jpg', type: 'img' },
+    { url: '/api/Objects/sinochemweb/stationPhotos/853/完整度规划20200724.docx', type: 'word' },
+    { url: '/api/Objects/sinochemweb/stationPhotos/853/10.6 MB.pdf', type: 'pdf' },
+  ]
 
   tableScrollHeight
   ngOnInit(): void {
@@ -26,6 +31,8 @@ export class UpdateCategoryComponent implements OnInit {
     fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe((event) => {
       this.tableScrollHeight = (document.getElementById('tablebox').clientHeight - 42) + 'px'
     });
+    let xxx = '/api/Objects/sinochemweb/stationPhotos/853/10.6 MB.pdf'
+    // console.log(666,xxx.split('.')[xxx.split('.').length - 1])
   }
   //查看图片
   viewImg(url) {
@@ -47,7 +54,47 @@ export class UpdateCategoryComponent implements OnInit {
       node.click();
     }, 0);
   }
+  //查看文件
+  lookFile(item) {
+    console.log('item', item)
+
+    let suffix = item.url.split('.')[item.url.split('.').length - 1].toLowerCase()
+    if (item.type == 'word') {
+      let arr = item.url.split('.')
+      arr[arr.length - 1] = 'pdf'
+      window.open(arr.join('.'))
+    } else if (item.type == 'pdf') {
+      window.open(item.url)
+    } else {
+      // let config = new MatSnackBarConfig();
+      // config.verticalPosition = 'top';
+      // config.duration = 3000
+      // this.snackBar.open('该文件类型暂不支持在线查看', '确定', config);
+    }
 
+    // const modal = this.modal.create({
+    //   nzContent: PdfWordLookComponent,
+    //   nzViewContainerRef: this.viewContainerRef,
+    //   nzWidth: 850,
+    //   nzBodyStyle: {
+    //     'border': '1px solid #91CCFF',
+    //     'border-radius': '0px',
+    //     'padding': '7px',
+    //     'box-shadow': '0 0 8px 0 #fff',
+    //     'background-image': 'linear-gradient(#003665, #000f25)'
+    //   },
+    //   nzComponentParams: {
+    //     data: item
+    //   },
+    //   nzFooter: null,
+    //   nzClosable: false,
+    //   nzOnOk: async () => {
+
+    //   }
+    // });
+    // const instance = modal.getContentComponent();
+    // modal.afterClose.subscribe(result => { });
+  }
   dispose() {
     console.log('处置')
   }

src/app/pages/pages.module.ts

@@ -69,10 +69,12 @@ import { DetailsUpdateCategoryComponent } from './license/update-category/detail
 import { EditFileCategoryComponent } from './license/file-category/edit-file-category/edit-file-category.component';
 import { DetailsFileCategoryComponent } from './license/file-category/details-file-category/details-file-category.component';
 import { NzTimelineModule } from 'ng-zorro-antd/timeline';
+import { PdfWordLookComponent } from './license/pdf-word-look/pdf-word-look.component';
+
 @NgModule({
   declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent,
     TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent,
-    AddequipmentComponent, EditequipmentComponent, PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent, FacilitySortPipe, WarningStatisticsListComponent, DisposeequipmentComponent, NavBarComponent, InformComponent, UpdateCategoryComponent, FileCategoryComponent, HistoriesComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent],
+    AddequipmentComponent, EditequipmentComponent, PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent, FacilitySortPipe, WarningStatisticsListComponent, DisposeequipmentComponent, NavBarComponent, InformComponent, UpdateCategoryComponent, FileCategoryComponent, HistoriesComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent,PdfWordLookComponent],
 
 
   imports: [
@@ -116,7 +118,7 @@ import { NzTimelineModule } from 'ng-zorro-antd/timeline';
     NzToolTipModule,
     NzTimelineModule
   ],
-  entryComponents: [AddequipmentComponent, EditequipmentComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, ChangePasswordComponent, DisposeequipmentComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent],
+  entryComponents: [AddequipmentComponent, EditequipmentComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, ChangePasswordComponent, DisposeequipmentComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent, PdfWordLookComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 
 })

src/app/service/objectsSimple.service.ts

@@ -48,7 +48,7 @@ export class ObjectsSimpleService {
                 let fileSize = file.size || null //上传文件的总大小
                 let shardSize = 5 * 1024 * 1024 //5MB一个分片
                 let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段
-
+                console.log('共分多少段' + allSlice)
                 for (let i = 0; i < allSlice; i++) { //循环分段上传
                     let start = i * shardSize //切割文件开始位置
                     let end = Math.min(fileSize, start + shardSize); //切割文件结束位置
@@ -66,13 +66,14 @@ export class ObjectsSimpleService {
                     PartNumberETag.push(result)
 
                     if (PartNumberETag.length === allSlice) { //分块上传完成
+
                         let data = PartNumberETag
                         let paramsData = { uploadId: uploadId };
                         let path = ObjectsSimpleService.c_apiRoot_Multipart + 'CompleteMultipartUpload/sinochemweb/' + objectName;
                         this.http.post(path, data, { params: paramsData }).subscribe(data => {
                             let objData: any = new Object();
                             objData.fileName = file.name;
-                            objData.filePath = (ObjectsSimpleService.baseUrl + objectName).replace(file.name, "");
+                            objData.filePath = ObjectsSimpleService.baseUrl + objectName
                             resolve(objData)
                         })
                     }

src/theme.less

@@ -171,7 +171,9 @@
 #addequipment,
 #disposeequipment,
 #editupdatecategory,
-#detailsupdatecategory {
+#detailsupdatecategory,
+#editfilecategory,
+#detailsfilecategory {
 
   nz-input-group,
   input {
@@ -201,7 +203,9 @@
 #stationPlanBox,
 #disposeequipment,
 #editupdatecategory,
-#detailsupdatecategory {
+#detailsupdatecategory,
+#editfilecategory,
+#detailsfilecategory {
   ::-webkit-input-placeholder {
     /* WebKit browsers */
     color: #345d85;
@@ -244,7 +248,9 @@
 
 //证件弹出框
 #editupdatecategory,
-#detailsupdatecategory {
+#detailsupdatecategory,
+#editfilecategory,
+#detailsfilecategory {
   nz-form-item {
     margin-bottom: 0;
 
@@ -344,7 +350,8 @@
 //蓝色 表格 tree
 #stationPlanBox,
 #inform,
-#updateLicense {
+#updateLicense,
+#fileLicense {
   ::-webkit-input-placeholder {
     /* WebKit browsers */
     color: #345d85;