Browse Source

业务空间

haojianlong 4 năm trước cách đây
mục cha
commit
1fdb6c3033

+ 38 - 7
src/utils/graph/FloorScene.ts

@@ -14,7 +14,9 @@ import { VirtualWall } from "@persagy-web/big/lib/types/floor/VirtualWall";
 import { Wall } from "@persagy-web/big/lib/types/floor/Wall";
 import { Zone } from "@persagy-web/big/lib/types/floor/Zone";
 import { FloorData } from "@persagy-web/big/lib/types/FloorData";
+import { SColor } from "@persagy-web/draw/lib";
 import { SGraphItem, SGraphScene } from "@persagy-web/graph/lib";
+import zoneColor from "./config/zoneColor";
 
 /**
  * 楼层平面图
@@ -55,7 +57,7 @@ export class FloorScene extends SGraphScene {
         );
     } // Set isSpaceSelectable
 
-    /** 空间是否可选  */
+    /** 业务空间是否可选  */
     _isZoneSelectable: boolean = true;
     get isZoneSelectable(): boolean {
         return this._isZoneSelectable;
@@ -66,8 +68,13 @@ export class FloorScene extends SGraphScene {
         }
         this._isZoneSelectable = v;
         this.zoneList.map(
-            (t: SZoneItem): SZoneItem => {
+            (t: SZoneItem, i: number): SZoneItem => {
                 t.selectable = this._isZoneSelectable;
+                if (v) {
+                    t.fillColor = new SColor(zoneColor[i % zoneColor.length]);
+                } else {
+                    t.fillColor = ItemColor.zoneUnselectColor;
+                }
                 return t;
             }
         );
@@ -209,8 +216,8 @@ export class FloorScene extends SGraphScene {
      *  @param  zone   业务空间list
      */
     addZoneList(zone: Zone[]): void {
-        zone.forEach((t): void => {
-            this.addZone(t);
+        zone.forEach((t, i): void => {
+            this.addZone(t, i);
         });
     } // Function addZoneList()
 
@@ -219,9 +226,10 @@ export class FloorScene extends SGraphScene {
      *
      *  @param  zone   业务空间
      */
-    addZone(zone: Zone): void {
+    addZone(zone: Zone, i: number): void {
         let item = new SZoneItem(null, zone);
         item.selectable = this.isZoneSelectable;
+        item.fillColor = new SColor(zoneColor[i % zoneColor.length])
         this.zoneList.push(item);
         this.addItem(item);
     } // Function addZone()
@@ -229,8 +237,31 @@ export class FloorScene extends SGraphScene {
     /**
      * 选择器触发事件
     */
-    listChange(item: SGraphItem, data: SGraphItem[]) {
+    listChange(item: SGraphItem, data: SGraphItem[]): void {
         this.changeSelect(item, data)
     }
-    changeSelect(item: SGraphItem, data: SGraphItem[]) { }
+    changeSelect(item: SGraphItem, data: SGraphItem[]): void { }
+
+    /**
+     * 初始化空间颜色
+    */
+    initSpaceColor(): void {
+        this.spaceList.forEach(
+            (t: SSpaceItem) => {
+                t.fillColor = ItemColor.spaceColor;
+            }
+        );
+    }
+
+    /**
+      * 初始化业务空间颜色
+     */
+    initZoneColor(): void {
+        this.zoneList.forEach(
+            (t: SZoneItem, i: number) => {
+                t.fillColor = new SColor(zoneColor[i % zoneColor.length]);
+            }
+        );
+    }
+
 }

+ 11 - 0
src/utils/graph/config/zoneColor.ts

@@ -0,0 +1,11 @@
+const colorArr = [
+  "#fed44c",
+  "#3485d6",
+  "#a384fc",
+  "#4caf50",
+  "#ff6316",
+  "#fd8bbe",
+  "#03a9f3",
+  "#ea615b"
+];
+export default colorArr;

+ 6 - 5
src/views/maintain/space/components/spaceGraph.vue

@@ -148,14 +148,16 @@ export default class spaceGraph extends Vue {
             this.$message.warning("数据解析异常");
             return;
         }
-        this.view?.fitSceneToView();
-        this.view!.minScale = this.view!.scale;
+        if (this.view) {
+            this.view.fitSceneToView();
+            this.view.minScale = this.view.scale;
+        }
         if (this.$refs.canvasFun) {
             // @ts-ignore
             this.$refs.canvasFun.everyScale = this.view.scale;
         }
         if (this.scene) {
-            this.scene!.changeSelect = this.changeSelect
+            this.scene.changeSelect = this.changeSelect;
         }
     }
     // 清除canvas
@@ -236,9 +238,8 @@ export default class spaceGraph extends Vue {
     groupCreateZone() {}
 
     //
-    changeSelect(){
+    changeSelect() {
         console.log(arguments);
-        
     }
 
     // 适配底图到窗口

+ 24 - 4
src/views/maintain/space/index.vue

@@ -10,7 +10,7 @@
             <div class="tab-content">
                 <div class="search">
                     <el-cascader v-model="value1" :options="options" @change="handleChange" placeholder="请选择楼层" class="item"></el-cascader>
-                    <el-cascader v-model="value2" :options="options" @change="handleChange" placeholder="请选择分区" class="item"
+                    <el-cascader v-model="zoneTypeVal" :options="zoneType" @change="handleChange" placeholder="请选择分区" class="item"
                         v-if="activeName==='picture'"></el-cascader>
                     <admSearch @SearchValue="searchValue" class="item" v-if="activeName==='table'" />
                 </div>
@@ -34,7 +34,6 @@ import spaceGraph from "./components/spaceGraph.vue";
     name: "space-index",
     components: { Statistics, AdmSearch, AdmMultiTable, spaceGraph },
 })
-
 export default class spaceIndex extends Vue {
     private statisticsMsg = {
         title: "全部空间",
@@ -63,6 +62,27 @@ export default class spaceIndex extends Vue {
             ],
         },
     ];
+    zoneType = [
+        {
+            value: "FunctionZone",
+            label: "功能分区",
+        },
+        {
+            value: "Zone",
+            label: "业务分区",
+            children: [
+                {
+                    value: "FireZone",
+                    label: "防火分区",
+                },
+                {
+                    value: "PowerSupplyZone",
+                    label: "供电分区",
+                },
+            ],
+        },
+    ];
+    zoneTypeVal = ['FunctionZone'];
     // 建筑楼层更改
     handleChange(v: string) {
         console.log(v);
@@ -99,8 +119,8 @@ export default class spaceIndex extends Vue {
                     margin-left: 16px;
                 }
             }
-            .graph{
-                height: calc(100% - 64px)
+            .graph {
+                height: calc(100% - 64px);
             }
         }
     }