[新增]单位照片;消息通知;查看日志

angular.json

@@ -38,6 +38,7 @@
             "styles": [
               "src/styles.scss",
               "node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
+              "node_modules/viewerjs/dist/viewer.css",
               "src/theme.less"
             ],
             "scripts": []

package.json

@@ -30,6 +30,7 @@
     "qs": "^6.11.0",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
+    "viewerjs": "^1.10.5",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {

src/app/app.module.ts

@@ -17,6 +17,7 @@ import zh from '@angular/common/locales/zh';
 import { MethodService } from './service/method.service';
 import { SelectUnitComponent } from './commonComponents/select-unit/select-unit.component';
 import { TestComponent } from './commonComponents/test/test.component';
+import { ObjectsSimpleService } from './service/objectsSimple.service';
 registerLocaleData(zh);
 @NgModule({
   declarations: [
@@ -37,7 +38,7 @@ registerLocaleData(zh);
   ],
   // providers: [httpInterceptorProviders, CacheTokenService, TreeService,
   //   { provide: RouteReuseStrategy, useClass: CustomReuseStrategy }],
-  providers: [httpInterceptorProviders, CacheTokenService, TreeService, MethodService],
+  providers: [httpInterceptorProviders, CacheTokenService, TreeService, MethodService, ObjectsSimpleService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/home/basic-info/unit-details/operation-log/operation-log.component.html

@@ -0,0 +1,11 @@
+<div class="box">
+    <div *ngFor="let item of logList" class="item">
+        {{item.userName}}在{{item.auditTime | date:"yyyy-MM-dd hh:mm:ss"}}{{item.entityState}}了{{item.auditDetails['详情数据'] ? '基本情况表格' : '单位基本信息'}}
+        <div *ngIf="item.list.length != 0">
+            修改内容 : 
+            <span *ngFor="let item of item.list">
+               {{item.name}}修改为<span class="blue">{{item.value}}</span> ;  
+            </span>
+        </div>
+    </div>
+</div>

src/app/home/basic-info/unit-details/operation-log/operation-log.component.scss

@@ -0,0 +1,12 @@
+.box{
+    max-height: 600px;
+    overflow-y: auto;
+}
+.item{
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    padding: 10px 0;
+    border-bottom: 1px dashed rgb(167, 166, 166);
+}

src/app/home/basic-info/unit-details/operation-log/operation-log.component.ts

@@ -0,0 +1,47 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-operation-log',
+  templateUrl: './operation-log.component.html',
+  styleUrls: ['./operation-log.component.scss']
+})
+export class OperationLogComponent implements OnInit {
+  @Input() id?: any;
+  constructor(private http: HttpClient) { }
+
+  ngOnInit(): void {
+    this.getLog()
+  }
+  /**
+   * 获得操作日志
+   */
+
+  logList = []
+  getLog() {
+    this.http.get('/api/AuditLogs', {
+      params: {
+        EntityId: this.id
+      }
+    }).subscribe((data: any) => {
+
+      data.forEach(element => {
+        element.list = []
+        if (!element.auditDetails['详情数据']) {
+          for (const key in element.auditDetails) {
+            if (Object.prototype.hasOwnProperty.call(element.auditDetails, key)) {
+              const item = element.auditDetails[key];
+              let obj = {
+                name: key,
+                value: item
+              }
+              element.list.push(obj)
+            }
+          }
+        }
+      });
+      this.logList = data
+      console.log('日志', this.logList)
+    })
+  }
+}

src/app/home/basic-info/unit-details/unit-details.component.html

@@ -4,6 +4,7 @@
       <button nz-button (click)="back()">返回</button>
     </div>
     <div style="text-align: right;">
+      <button nz-button nzType="primary" (click)="looklog()">查看日志</button>
       <button nz-button nzType="primary" (click)="exportClick()">下载文档</button>
       <button *ngIf="!disableds" nz-button [nzType]="'primary'" (click)='edit()'>保存</button>
     </div>
@@ -93,7 +94,26 @@
             </nz-input-group>
           </nz-form-control>
         </nz-form-item>
-
+        <nz-form-item>
+          <nz-form-label [nzSpan]="7" nzFor="单位照片">单位照片</nz-form-label>
+          <nz-form-control [nzSpan]="12">
+            <div class="uploadPhotobox">
+              <div class="uploadDiv uploadDiv2">
+                <img *ngIf="imageUrl" style="width: 100%;height: 100%;cursor: pointer;" [src]="imageUrl"
+                  (click)="viewImg(imageUrl)">
+                <input *ngIf="!imageUrl" (change)="filechange($event)" class="fileinput fileinput2" type="file"
+                  accept="image/*">
+                <button *ngIf="!imageUrl" nz-button [nzLoading]="isLoadingSave"><i nz-icon nzType="upload"
+                    nzTheme="outline"></i>上传照片</button>
+              </div>
+              <div class="uploadDiv" *ngIf="imageUrl" style="margin: 0 10px;">
+                <input (change)="filechange($event)" class="fileinput" type="file" accept="image/*">
+                <button nz-button [nzLoading]="isLoadingSave"><i nz-icon nzType="upload"
+                    nzTheme="outline"></i>重新上传</button>
+              </div>
+            </div>
+          </nz-form-control>
+        </nz-form-item>
       </form>
     </div>
 

src/app/home/basic-info/unit-details/unit-details.component.scss

@@ -14,6 +14,7 @@
     display: flex;
     color: #000;
     margin-bottom: 0px;
+
     div {
       width: 50%;
     }
@@ -53,27 +54,78 @@
     border-radius: 3px;
     padding-left: 10px;
   }
-  
+
   .content {
     border: 1px solid;
-    .content-left{
+
+    .content-left {
       display: flex;
       justify-content: center;
       align-items: center;
-      form{
+
+      form {
         width: 100%;
         display: flex;
         flex-wrap: wrap;
         box-sizing: border-box;
         padding: 0 20px;
-        nz-form-item{
+
+        nz-form-item {
           width: 50%;
           display: flex;
           justify-content: center;
         }
 
+        .uploadPhotobox {
+          display: flex;
+          align-items: center;
+          width: 200%;
+          height: 90px;
+          // border: 1px solid red;
+          position: relative;
+
+          .uploadDiv {
+            width: 140px;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+
+            img {
+              width: 100%;
+              height: 100%;
+            }
+
+            .fileinput {
+              width: 114px;
+              height: 32px;
+              position: absolute;
+              z-index: 100;
+              opacity: 0;
+              top: 23px;
+              cursor: pointer;
+            }
+
+            .fileinput2 {
+              top: 0px;
+            }
+
+            button {
+              z-index: 99;
+              opacity: 1;
+              border-radius: 0px;
+            }
+          }
+
+          .uploadDiv2 {
+            align-items: flex-start;
+            justify-content: flex-start;
+          }
+        }
       }
     }
+
     .mainright {
       color: #000;
       float: left;

src/app/home/basic-info/unit-details/unit-details.component.ts

@@ -1,17 +1,17 @@
-import { Component, Input, Renderer2, OnDestroy, AfterViewInit, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { CustomReuseStrategy } from 'src/app/CustomReuseStrategy';
+import { Component, Input, Renderer2, OnDestroy, AfterViewInit, ElementRef, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { Router } from '@angular/router';
-import { NzUploadFile } from 'ng-zorro-antd/upload';
-import { Observable, Observer } from 'rxjs';
-import { NzUploadChangeParam } from 'ng-zorro-antd/upload';
 import { TreeService } from 'src/app/service/tree.service';
 import { HttpClient } from '@angular/common/http';
 import { asBlob } from 'html-docx-js-typescript'
 // 要保存这个docx文件推荐引入file-saver哦，你可以用npm i -D file-saver来安装
 import { saveAs } from 'file-saver'
+import { ObjectsSimpleService } from 'src/app/service/objectsSimple.service';
 declare var AMap: any;
+import Viewer from 'viewerjs';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { OperationLogComponent } from './operation-log/operation-log.component';
 @Component({
   selector: 'app-unit-details',
   templateUrl: './unit-details.component.html',
@@ -22,7 +22,7 @@ export class UnitDetailsComponent implements OnInit {
   @ViewChild('box') box: ElementRef;
   loading = false;
   avatarUrl?: string;
-  constructor(private message: NzMessageService, private router: Router, private toTree: TreeService, private fb: FormBuilder, private http: HttpClient, private renderer: Renderer2, private el: ElementRef, public renderer2: Renderer2, private elementRef: ElementRef) {
+  constructor(private message: NzMessageService, private router: Router, private toTree: TreeService, private fb: FormBuilder, private http: HttpClient, private renderer: Renderer2, private el: ElementRef, public renderer2: Renderer2, private elementRef: ElementRef, private objectsSrv: ObjectsSimpleService, private modal: NzModalService, private viewContainerRef: ViewContainerRef) {
 
   }
   disableds = false
@@ -96,6 +96,8 @@ export class UnitDetailsComponent implements OnInit {
   validateForm!: FormGroup;
   id = ""
   integrity = 0
+
+
   ngOnInit(): void {
     this.id = this.router['browserUrlTree'].queryParams.id
     if (this.router['browserUrlTree'].queryParams.pattern != "edit") {
@@ -119,6 +121,73 @@ export class UnitDetailsComponent implements OnInit {
   }
 
 
+  imageUrl = ''//单位照片
+  isLoadingSave: boolean = false
+  uploadIndex: string
+  filechange(e) {
+    this.isLoadingSave = true
+    let file = e.target.files[0] || null //获取上传的文件
+    this.openFileSelect(file, `unitPhoto/${this.id}/`)
+  }
+  //设置文件路径并上传
+  postFilePath
+  openFileSelect(file: File, extensionPath: string) {
+    this.postFilePath = extensionPath;
+    let fileSize = file.size || null //上传文件的总大小
+    let shardSize = 5 * 1024 * 1024 //5MB 超过5MB要分块上传
+    if (fileSize >= shardSize) //  超过5MB要分块上传
+    {
+      this.postFileByMul(file);
+    }
+    else //普通上传
+    {
+      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
+        this.isLoadingSave = false
+        resolve('success')
+      });
+    })
+  }
+  //大文件分块上传
+  postFileByMul(file: File) {
+    this.objectsSrv.postFile_MultipartUpload(this.postFilePath, file).then((value) => {
+      let dataObj = value as any;
+      let filePath = dataObj.filePath
+      this.imageUrl = filePath
+      this.isLoadingSave = false
+    });
+  }
+
+
+  //查看图片
+  viewImg(url) {
+    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);
+  }
+
 
   isMapLabel: boolean
   //地图标注位置
@@ -1049,7 +1118,7 @@ export class UnitDetailsComponent implements OnInit {
         }
       }
     }
-    let num4 = (num + num2 + num3 - 1) / 63
+    let num4 = (num + num2 + num3 - 1) / 64
     this.integrity = Math.floor(num4 * 100) / 100
     console.log(num, num2, num3, num4);
     this.datas.basicInfo.positionCoordinates = {
@@ -1071,6 +1140,7 @@ export class UnitDetailsComponent implements OnInit {
       address: this.datas.basicInfo.addr,
       useNature: this.datas.basicInfo.nature,
       integrity: this.integrity,
+      imageFile: this.imageUrl,
       data: JSON.stringify(this.datas)
     }
     this.http.patch('/api/Companies/' + this.id, body).subscribe(data => {
@@ -1097,6 +1167,7 @@ export class UnitDetailsComponent implements OnInit {
       // this.datas.basicInfo.phone = data.directorPhone
       this.datas.basicInfo.nature = data.useNature
       this.integrity = data.integrity
+      this.imageUrl = data.imageFile
       this.validateForm.patchValue({
         code: data.usci,
         organizationId: data.organizationId,
@@ -1107,7 +1178,7 @@ export class UnitDetailsComponent implements OnInit {
         principalName: data.directorName,
         principalPhone: data.directorPhone,
         adminName: data.securityAdministratorName,
-        adminPhone: data.securityAdministratorPhone
+        adminPhone: data.securityAdministratorPhone,
       })
       if (this.datas.basicInfo.positionCoordinates && (this.datas.basicInfo.positionCoordinates.x != 0 && this.datas.basicInfo.positionCoordinates.y != 0)) {//已标注
         this.isMapLabel = true
@@ -1122,7 +1193,7 @@ export class UnitDetailsComponent implements OnInit {
   getAllOrganization() {
     let organizationId = JSON.parse(sessionStorage.getItem('userData')).organizationId
     let params = {
-      OrganizationId: organizationId || '',
+      // OrganizationId: organizationId || '',
       ContainsChildren: "true",
       PageNumber: 1,
       PageSize: 9999
@@ -1141,4 +1212,19 @@ export class UnitDetailsComponent implements OnInit {
       this.nodes = [...this.toTree.toTree(data.items)]
     })
   }
+
+
+  looklog() {
+    const modal = this.modal.create({
+      nzTitle: '操作日志',
+      nzContent: OperationLogComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 660,
+      nzMaskClosable: false,
+      nzComponentParams: {
+        id: this.id,
+      },
+      nzFooter: null
+    });
+  }
 }

src/app/home/basic-info/unit/unit.component.ts

@@ -149,7 +149,7 @@ export class UnitComponent implements OnInit {
               }
             }
 
-            let integrity: number = num / 63
+            let integrity: number = num / 64
             let body = {
               companyName: instance.validateForm.value.unitname,
               directorName: instance.validateForm.value.person,

src/app/home/home.module.ts

@@ -67,6 +67,8 @@ import { CreateTaskComponent } from './task/station-weekly-plan/create-task/crea
 import { NzNotificationModule } from 'ng-zorro-antd/notification';
 import { NzBadgeModule } from 'ng-zorro-antd/badge';
 import { NzListModule } from 'ng-zorro-antd/list';
+import { OperationLogComponent } from './basic-info/unit-details/operation-log/operation-log.component';
+import { NzDividerModule } from 'ng-zorro-antd/divider';
 @NgModule({
   declarations: [
     NavComponent,
@@ -103,7 +105,8 @@ import { NzListModule } from 'ng-zorro-antd/list';
     PlanAdjustmentComponent,
     TaskDetailsComponent,
     EditOrComponent,
-    CreateTaskComponent
+    CreateTaskComponent,
+    OperationLogComponent
   ],
   imports: [
     CommonModule,
@@ -139,7 +142,8 @@ import { NzListModule } from 'ng-zorro-antd/list';
     NzInputNumberModule,
     NzNotificationModule,
     NzBadgeModule,
-    NzListModule
+    NzListModule,
+    NzDividerModule
   ],
   entryComponents: [AddroleComponent, EditroleComponent, AdduserComponent, EdituserComponent, AddorComponent, EditorComponent, ApplyComponent, ApplyLookComponent, LookTaskComponent, AllotPersonComponent, EditOrComponent, CreateTaskComponent]
 })

src/app/home/nav/nav.component.ts

@@ -40,7 +40,7 @@ export class NavComponent implements OnInit {
     (signalR.SR as any).on('receiveNotification', (message: any, senderName: string) => {
       console.log('收到消息---', message)
       //1.右下角弹窗（新增任务提示）
-
+      this.methodService.notificationsList.unshift(message)
       if (message.planTaskState == 'added') {
         this.createBasicNotification(message)
       }

src/app/home/task/station-task-apply/apply-look/apply-look.component.ts

@@ -13,13 +13,9 @@ export class ApplyLookComponent implements OnInit {
 
   @Input() data?: any;
   validateForm!: FormGroup;
-  constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient, private toTree: TreeService) { }
+  constructor() { }
 
   ngOnInit(): void {
-    console.log(this.data)
-  }
-  destroyModal(): void {
-    this.modal.destroy({ data: 'this the result data' });
   }
 
 

src/app/service/objectsSimple.service.ts

@@ -0,0 +1,74 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ObjectsSimpleService {
+
+    static readonly c_apiRoot = "/api/";//普通上传的API根路径
+    static readonly c_apiRoot_Multipart = "/api/";//分块上传的API根路径
+
+    constructor(private http: HttpClient) { }
+
+
+    //普通上传，单个文件上限5M
+    static baseUrl = ObjectsSimpleService.c_apiRoot + 'Objects/integration/';
+    postFile(extensionPath: string, file: File): Observable<Object> {
+        let formData = new FormData()
+        formData.append("file", file, file.name)
+        let data = { keepOriginalName: 'true' }
+        return this.http.post(ObjectsSimpleService.baseUrl + extensionPath, formData, { params: data });
+    }
+
+
+    //分块上传
+    static baseUrl_MultipartUpload = ObjectsSimpleService.c_apiRoot_Multipart + 'NewMultipartUpload/integration/';
+    postFile_MultipartUpload(extensionPath: string, file: File): Promise<Object> {
+        let data = { keepOriginalName: 'true', filename: file.name }
+        return new Promise((resolve, reject) => {
+            this.http.post(ObjectsSimpleService.baseUrl_MultipartUpload + extensionPath, {}, { params: data }).subscribe(async (data: any) => { //初始化分段上传
+                let objectName = data.objectName
+                let uploadId = data.uploadId
+                let PartNumberETag = []; //每次返回需要保存的信息
+                //分块 处理
+                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); //切割文件结束位置
+                    let formData = new FormData()
+                    formData.append("file", file.slice(start, end))
+
+                    //同步写法实现异步调用
+                    let result = await new Promise((resolve, reject) => {
+                        // await 需要后面返回一个 promise 对象
+                        this.http.post(ObjectsSimpleService.c_apiRoot_Multipart + `MultipartUpload/integration/${objectName}?uploadId=${uploadId}&partNumber=${i + 1}`, formData).subscribe((data: any) => {
+                            let msg = { "partNumber": data.partNumber || null, "eTag": data.eTag || null }
+                            resolve(msg) // 调用 promise 内置方法处理成功
+                        })
+                    });
+                    PartNumberETag.push(result)
+
+                    if (PartNumberETag.length === allSlice) { //分块上传完成
+
+                        let data = PartNumberETag
+                        let paramsData = { uploadId: uploadId };
+                        let path = ObjectsSimpleService.c_apiRoot_Multipart + 'CompleteMultipartUpload/integration/' + objectName;
+                        this.http.post(path, data, { params: paramsData }).subscribe(data => {
+                            let objData: any = new Object();
+                            objData.fileName = file.name;
+                            objData.filePath = ObjectsSimpleService.baseUrl + objectName
+                            resolve(objData)
+                        })
+                    }
+                }//for循环
+
+                //分块 处理
+            })
+        })
+    }
+}

src/index.html

@@ -9,6 +9,7 @@
 </head>
 <body>
   <app-root></app-root>
+  <div id="viewerjs" style="display:none"></div>
 </body>
 <script type="text/javascript" src="/assets/wordexport/jquery.js"></script>
 <script type="text/javascript" src="/assets/wordexport/FileSaver.js"></script>