图片组件弹窗attach(待验证)

iot-master-contrib · Jun 21, 2023 · b748c23 · b748c23
1 parent 2e5f8c8
commit b748c23
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 15 deletions.
diff --git a/src/app/base/attach-select/attach-select.component.html b/src/app/base/attach-select/attach-select.component.html
@@ -0,0 +1,2 @@
+<iframe src="/app/attachment/list"
+        frameborder="0"></iframe>
diff --git a/src/app/base/attach-select/attach-select.component.scss b/src/app/base/attach-select/attach-select.component.scss
diff --git a/src/app/base/attach-select/attach-select.component.ts b/src/app/base/attach-select/attach-select.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-attach-select',
+  templateUrl: './attach-select.component.html',
+  styleUrls: ['./attach-select.component.scss']
+})
+export class AttachSelectComponent {
+
+}
diff --git a/src/app/base/base.module.ts b/src/app/base/base.module.ts
@@ -9,18 +9,21 @@ import {NzInputModule} from "ng-zorro-antd/input";
 import {NzButtonModule} from "ng-zorro-antd/button";
 import {ColorInputComponent} from './color-input/color-input.component';
 import { HtmlPipe } from './html.pipe';
+import { AttachSelectComponent } from './attach-select/attach-select.component';
 
 @NgModule({
     declarations: [
         EditTableComponent,
         ColorInputComponent,
         HtmlPipe,
+        AttachSelectComponent,
 
     ],
     exports: [
         EditTableComponent,
         ColorInputComponent,
         HtmlPipe,
+        AttachSelectComponent
     ],
     providers: [HtmlPipe],
     imports: [

diff --git a/src/app/editor/property-input/property-input.component.html b/src/app/editor/property-input/property-input.component.html
@@ -20,6 +20,26 @@
     <!--    <input nz-input nzSize="small" *ngSwitchCase="'boolean'" type="checkbox"-->
     <!--           [value]="cell.getPropByPath(property.path)"-->
     <!--           (change)="inputChange($event)">-->
+    <nz-input-group [nzSuffix]="suffixIconSearch"
+                    nzSize="small"
+                    *ngSwitchCase="'image'"
+                    style="padding-right: 0;">
+        <input type="text"
+               nz-input
+               placeholder="空"
+               [value]="cell.getPropByPath(property.path) || ''"
+               (change)="inputChange($event)" />
+    </nz-input-group>
+    <ng-template #suffixIconSearch>
+        <button nz-button
+                nzSize="small"
+                nzType="primary"
+                nzSearch>
+            <span nz-icon
+                  nzType="search"
+                  (click)="handleSelectImage()"></span>
+        </button>
+    </ng-template>
     <input nz-input
            nzSize="small"
            *ngSwitchCase="'color'"

diff --git a/src/app/editor/property-input/property-input.component.ts b/src/app/editor/property-input/property-input.component.ts
@@ -1,7 +1,9 @@
-import {Component, Input} from '@angular/core';
-import {Cell} from "@antv/x6";
-import {HmiProperty} from 'src/hmi/hmi';
-
+import { Component, Input } from '@angular/core';
+import { Cell } from "@antv/x6";
+import { HmiProperty } from 'src/hmi/hmi';
+import { AttachSelectComponent } from 'src/app/base/attach-select/attach-select.component';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { NzMessageService } from 'ng-zorro-antd/message';
 @Component({
     selector: 'app-property-input',
     templateUrl: './property-input.component.html',
@@ -11,6 +13,18 @@ export class PropertyInputComponent {
     @Input() property!: HmiProperty;
     @Input() cell!: Cell
 
+    constructor(
+        private ms: NzModalService,
+        private msg: NzMessageService,
+    ) {
+        const that = this;
+        window.onload = () => {
+            window.top!.onmessage = function ({ data }) {  // 监听 message 事件
+                that.msg.success('选择成功!');
+                that.cell.setPropByPath('attrs/image/xlink:href', data);
+            };
+        }
+    }
     inputChange($event: any) {
         //console.log("property input change", this.property.path, $event);
         this.cell.setPropByPath(this.property.path, $event.target.value);
@@ -51,4 +65,13 @@ export class PropertyInputComponent {
     clearColor() {
         this.cell.setPropByPath(this.property.path, 'none')
     }
+
+    handleSelectImage() {
+        this.ms.create({
+            nzTitle: `选择图片`,
+            nzContent: AttachSelectComponent,
+            nzComponentParams: {},
+            nzFooter: null
+        })
+    }
 }
diff --git a/src/hmi/base/image.embed.ts b/src/hmi/base/image.embed.ts
@@ -1,3 +1,3 @@
 // !!! Generated by svg2ts.mjs
-// From src\hmi\base\image.svg 
+// From .\src\hmi\base/image.svg 
 export const  ImageSvg = `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681075199984" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11565" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M896 626.592a16 16 0 0 0-7.68-13.664l-172.448-105.088a16 16 0 0 0-20.704 3.52l-76 92.608-1.024 1.152a16 16 0 0 1-22.624 0.032l-252.832-252.064a16.032 16.032 0 0 0-22.08-0.512l-187.36 170.656a15.936 15.936 0 0 0-5.248 11.84V800h768v-173.408z" p-id="11566"></path><path d="M800 320m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="11567"></path><path d="M32 128v768h960V128H32z m896 704H96V192h832v640z" p-id="11568"></path></svg>`
diff --git a/src/hmi/base/image.meta.ts b/src/hmi/base/image.meta.ts
@@ -1,5 +1,5 @@
 //!!! Generated by svg2meta.mjs
-// From src\hmi\base\image.svg 
+// From .\src\hmi\base/image.svg 
 export const  ImageMeta = {
 	"width": 200,
 	"height": 200,
@@ -34,5 +34,6 @@ export const  ImageMeta = {
 		"path3": {
 			"refD": "M32 128v768h960V128H32z m896 704H96V192h832v640z"
 		}
-	}
+	},
+	"path": "M896 626.592a16 16 0 0 0-7.68-13.664l-172.448-105.088a16 16 0 0 0-20.704 3.52l-76 92.608-1.024 1.152a16 16 0 0 1-22.624 0.032l-252.832-252.064a16.032 16.032 0 0 0-22.08-0.512l-187.36 170.656a15.936 15.936 0 0 0-5.248 11.84V800h768v-173.408z,M800 320m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z,M32 128v768h960V128H32z m896 704H96V192h832v640z,"
 }
diff --git a/src/hmi/base/image.ts b/src/hmi/base/image.ts
@@ -1,16 +1,19 @@
-import {HmiComponent} from "../hmi";
-import {ImageSvg} from "./image.embed";
+import { HmiComponent } from "../hmi";
+import { ImageSvg } from "./image.embed";
 
 export const BaseImage: HmiComponent = {
     name: '图片',
     id: 'image',
     svg: ImageSvg,
-    type: "shape", internal:true,
+    type: "shape", internal: true,
+    extends: {
+        inherit: 'image'
+    },
     meta: {
         width: 100, height: 80,
-        imageUrl: '/app/scada/assets/image.svg',
+        imageUrl: "./image.svg",
     },
     properties: [
-        {name: "图片", path: "attrs/image/xlink:href", type: "text"},
+        { name: "图片", path: "attrs/image/xlink:href", type: "image" },
     ]
 }
diff --git a/src/hmi/creator.ts b/src/hmi/creator.ts
@@ -19,7 +19,7 @@ export function createImageComponent(cmp: HmiImageComponent): HmiComponent {
         icon: cmp.url,
         type: "shape",
         extends: { inherit: "image" },
-        meta: { width: 100, height: 80, imageUrl: cmp.url },
+        meta: { width: 100, height: 80 },
         collection: cmp.collection
     }
 }

diff --git a/src/hmi/hmi.ts b/src/hmi/hmi.ts
@@ -1,4 +1,4 @@
-import {Cell, Edge, Node} from "@antv/x6";
+import { Cell, Edge, Node } from "@antv/x6";
 
 export declare interface HmiComponent {
 
@@ -79,7 +79,7 @@ export declare interface HmiProperty {
     name: string
     path: string
     type: "number" | "text" | "color" | "select" |
-        "boolean" | "font" | "font-size" | "font-style" | "stroke"
+    "boolean" | "font" | "font-size" | "font-style" | "stroke" | "image"
     default?: any
     options?: HmiPropertyOption[]
     max?: number
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<iframe src="/app/attachment/list"
		frameborder="0"></iframe>