上传图片/视频完善

src/app/pages/plan/plan.component.html

@@ -146,8 +146,16 @@
           <p><input type="text" [(ngModel)]="beforePlanNode.name" [disabled]="!editMode"></p>
           <textarea [(ngModel)]="beforePlanNode.describe" [disabled]="!editMode"></textarea>
         </div>
-        <div class="planHeaderImg"><a href="javascript:;" class="bottomPlanUpload"><input type="file"><img src="../../../assets/images/uploadImg.png"></a></div>
-        <div class="planHeaderVideo"><a href="javascript:;" class="bottomPlanUpload" style="width: 100px;"><input type="file"><img src="../../../assets/images/uploadVideo.png"></a></div>
+        <div class="planHeaderImg" id="planNodeImg">
+          <img class="imgSrc" [src]="beforePlanNode.texture" [hidden]="!beforePlanNode.texture" [attr.data-original]="beforePlanNode.texture">
+          <a href="javascript:;" class="imgAndVideoUpload uploadImage" *ngIf="editMode && beforePlanNode.texture"><input type="file" accept="image/*" (change)='uploadImgVideo($event, false)'><i nz-icon nzType="border-inner" nzTheme="outline"></i></a>
+          <a href="javascript:;" class="bottomPlanUpload" *ngIf="editMode && !beforePlanNode.texture"><input type="file" accept="image/*" (change)='uploadImgVideo($event, false)'><img src="../../../assets/images/uploadImg.png"></a>
+        </div>
+        <div class="planHeaderVideo">
+          <video [src]="beforePlanNode.video" [hidden]="!beforePlanNode.video"></video>
+          <a href="javascript:;" class="imgAndVideoUpload uploadVideo" *ngIf="editMode && beforePlanNode.video"><input type="file" accept="video/*" (change)='uploadImgVideo($event, true)'><i nz-icon nzType="border-inner" nzTheme="outline"></i></a>
+          <a href="javascript:;" class="bottomPlanUpload" style="width: 100px;" *ngIf="editMode && !beforePlanNode.video"><input type="file" accept="video/*" (change)='uploadImgVideo($event, true)'><img src="../../../assets/images/uploadVideo.png"></a>
+        </div>
       </div>
       <div style="height: 5px;"></div>
       <div class="pulicPlanDiv bottomPlanCenter">

src/app/pages/plan/plan.component.scss

@@ -335,8 +335,10 @@
       input{ border: none; outline: none; background-color: transparent; width: 100%; height: 100%; }
       textarea{ width: 100%; height: 50px; background: rgba(145, 204, 255, 0.41); border: 1px solid #91CCFF; padding: 0; resize: none; outline: none; }
     }
-    .planHeaderImg{ width: 100px; height: 100%; text-align: center; }
-    .planHeaderVideo{ width: 120px; height: 100%; text-align: center; }
+    .planHeaderImg{ width: 140px; height: 100%; text-align: center; line-height: 80px; .imgSrc{ width: 100px; height: auto; max-height: 100%; } }
+    .uploadImage{ width: 20px; height: 20px; line-height: 20px; float: right; margin-top: 30px; }
+    .planHeaderVideo{ width: 180px; height: 100%; text-align: center; line-height: 80px; video{ width: 120px; height: auto; max-height: 100%; } }
+    .uploadVideo{ width: 30px; height: 30px; line-height: 30px; float: right; margin-top: 25px; }
   }
   .bottomPlanCenter{
     height: 35px;

src/app/pages/plan/plan.component.ts

@@ -1,4 +1,5 @@
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import Viewer from 'viewerjs';
 import { Game } from 'src/app/babylon/game';
 import { LoginSatus } from 'src/app/babylon/controller/status/login-status';
 import { StatusManager } from 'src/app/babylon/controller/status/status-manager';
@@ -23,6 +24,7 @@ import { AllMarkData } from 'src/app/babylon/model/data/mark/all-mark-data';
 import { MarkData, MarkTask } from 'src/app/babylon/model/data/mark/mark-data';
 import { MarkWindow } from 'src/app/babylon/view/mark-window/mark-window';
 import { AllMarkPlanData, MarkNodeData, MarkPlanData } from 'src/app/babylon/model/data/mark/mark-plan-data';
+import { DataManager, ResType } from 'src/app/babylon/controller/data-manager';
 
 
 
@@ -543,6 +545,36 @@ export class PlanComponent implements OnInit {
   }
 
   videoDialogType: videoDialog = new videoDialog(true, null); //全景图/视频 弹窗
+  planNodeImg: Viewer; //应急预案图片Viewer 实例
+
+  //上传 图片/视频
+  uploadImgVideo(e, isVideo: boolean) {
+    if (e.target.files.length) {
+      let maxSize = 20 * 1024 * 1024 //限制30MB
+      let file = e.target.files[0]
+      if (file.size > maxSize) { //超出限制
+        this.message.info("上传资源需小于30MB");
+        return
+      }
+      this.isShowLoading = true //打开遮罩
+      let institutionKey = sessionStorage.getItem('unitId') || "ceshi"; //单位id
+      let resType = isVideo? ResType.Video : ResType.Texture
+      let key = `${(new Date()).getMonth() + 1}-${(new Date()).getDate()}-${(new Date()).getHours()}`
+      let url = DataManager.getResPath_mark(institutionKey, resType, key) //url
+      ServeManager.instance.openFileSelect(file, url, (name: string, path: string) => { //上传
+        if (!isVideo) { //img
+          this.beforePlanNode.texture = path + name
+          window.setTimeout(() => {
+            this.planNodeImg = new Viewer(this.element.nativeElement.querySelector('#planNodeImg'), { url: 'data-original' });
+          }, 0)
+        } else { //video
+          this.beforePlanNode.video = path + name
+        }
+        this.isShowLoading = false //关闭遮罩
+        this.message.info("上传成功!");
+      })
+    }
+  }
 
   selectRightTopFast: number = 0; //当前选择功能 快捷栏
   selectAdsorb: boolean = false; //吸附状态

src/app/pages/plan/publicPop.scss

@@ -26,7 +26,15 @@
   overflow: hidden;
   display: inline-block;
 }
-.uploadBackGround input,.bottomPlanUpload input {
+.imgAndVideoUpload{
+  position: relative;
+  cursor: pointer;
+  background: rgba(145, 204, 255, 0.41);
+  border: 1px dashed #91CCFF;
+  overflow: hidden;
+  display: inline-block;
+}
+.uploadBackGround input,.bottomPlanUpload input,.imgAndVideoUpload input {
   position: absolute;
   width: 100%;
   height: 100%;

tsconfig.json

@@ -31,8 +31,8 @@
     "strictInjectionParameters": true,
     "enableIvy": false
   },
-  "include": [
-    "src/**/*.d.ts",
-    "typings.d.ts"
-  ]
+  // "include": [
+  //   "src/**/*.d.ts",
+  //   "typings.d.ts"
+  // ]
 }