Browse Source

分离绘制文字的方法

YaolongHan 6 years ago
parent
commit
25628225e9

+ 2 - 8
src/assets/graphy/SGraphy/newItems/SGraphyPolygonItem.js

@@ -39,6 +39,7 @@ var SGraphyPolygonItem = /** @class */ (function (_super) {
         _this.fillColor = new SColor('#F2F6FC');
         _this.color = SColor.Black;
         _this.width = 0;
+        _this.viewText = '111'; //绘出的文案
         _this.isBusiness = 1;
         _this.cacheColor = SColor.Black; //需要缓存的边框
         _this.cacheFillColor = new SColor('#F2F6FC'); //需要缓存的填充色
@@ -135,16 +136,9 @@ var SGraphyPolygonItem = /** @class */ (function (_super) {
             painter.brush.color = this.fillColor;
             painter.pen.lineWidth = this.width;
             painter.drawPolygon(this.pointArr);
-            var text = '';
-            if (this.businessName || this.businessId) {
-                text = '👇   ' + this.businessName;
-            }
-            else {
-                text = '⬇️   ' + this.initName;
-            }
             painter.font.size = this.scale * 200;
             painter.brush.color = SColor.Black;
-            painter.drawText(text, this.centerOfGravityPoint.x, this.centerOfGravityPoint.y);
+            painter.drawText(this.viewText, this.centerOfGravityPoint.x, this.centerOfGravityPoint.y);
         }
     };
     SGraphyPolygonItem.prototype.onClick = function (event) {

+ 3 - 8
src/assets/graphy/SGraphy/newItems/SGraphyPolygonItem.ts

@@ -17,6 +17,7 @@ export class SGraphyPolygonItem extends SGraphyItem {
 	centerOfGravityPoint: { x: number, y: number };
 	businessName: null | string | undefined;    //业务空间名字
 	initName: null | string | undefined;        //空间名字
+	viewText: string = '111'                         //绘出的文案
 	isBusiness: number = 1;
 	cacheColor:SColor= SColor.Black             //需要缓存的边框
 	cacheFillColor:SColor =	 new SColor('#F2F6FC');        //需要缓存的填充色
@@ -141,16 +142,10 @@ export class SGraphyPolygonItem extends SGraphyItem {
 			painter.pen.color = this.color;
 			painter.brush.color = this.fillColor;
 			painter.pen.lineWidth = this.width;
-			painter.drawPolygon(this.pointArr)
-			let text = ''
-			if (this.businessName || this.businessId) {
-				text = '👇   ' + this.businessName
-			} else {
-				text = '⬇️   ' + this.initName
-			}
+			painter.drawPolygon(this.pointArr);
 			painter.font.size = this.scale*200;
 			painter.brush.color = SColor.Black;
-			painter.drawText(text,this.centerOfGravityPoint.x,this.centerOfGravityPoint.y)
+			painter.drawText(this.viewText,this.centerOfGravityPoint.x,this.centerOfGravityPoint.y)
 		}
 	}
 	onClick(event: SMouseEvent): boolean {

+ 185 - 152
src/components/business_space/graphy/business.vue

@@ -1,99 +1,104 @@
 <template>
-    <div ref="graphyMain" class="canvasGraphy" style="width:100%;" v-loading="loading.show" :element-loading-text="loading.num + '/' + loading.total">
-        <div v-show="hasMap" class="header-search">
-            <!-- 初始两个按钮 -->
-            <div v-show="type == 1">
-                <el-button @click=" type = 2" icon="el-icon-search">查找业务空间</el-button>
-                <el-button @click="myDialogVisible = true">创建业务空间</el-button>
-                <span style="font-size:13px;color:#606266;margin-left:40px;display:inline-block;">
-              提示:
-              <i style="color:red;">红色字体</i>的业务空间为不相邻元空间组成,请检查是否要修改
-            </span>
-            </div>
-            <!-- 搜索下拉列表定位 -->
-            <div v-show="type == 2">
-                <el-autocomplete popper-class="my-autocomplete" v-model="search" :fetch-suggestions="querySearch" placeholder="输入平面图中已有的业务空间名称进行查找" width="180px" @select="handleSelect">
-                    <i class="el-icon-search el-input__icon" slot="suffix" @click="handleIconClick"></i>
-                    <template slot-scope="{ item }">
-                        <div class="name" style="position: relative;">
-                        {{ item.infos.RoomLocalName |cutString(8) }}
-                        <span
-                            class="addr"
-                            style="position: absolute;right:10px;color:#409EFF;"
-                        >定位</span>
-                        </div>
-                    </template>
-                </el-autocomplete>
-                <el-button style="margin-left:10px;" type="text" @click="clearDimension">收起</el-button>
-             </div>
-            <!-- 点击元空间显示 -->
-            <div v-show="type == 3">
-                <div class="div50">
-                <el-button
-                    class="float-right"
-                
-                    @click="SpaceDialog"
-                    type="primary"
-                    plain
-                >从未关联元空间的业务空间中选择</el-button>
-                </div>
-                <div class="div50">
-                <el-button @click="clearDimension" plain>取 消</el-button>
-                <el-button @click="createSP" type="primary">创建新的业务空间</el-button>
-                </div>
-            </div>
-        <!-- 点击业务空间显示 -->
-        <div v-show="type == 4">
-            <div class="div50">
-            <el-button class="float-right" @click="divide" type="primary" plain>重新划分业务空间</el-button>
-            </div>
-            <div class="div50">
-            <el-button @click="clearDimension" plain>取 消</el-button>
-            <el-button @click="bussinDea" type="primary">查看详情</el-button>
+  <div
+    ref="graphyMain"
+    class="canvasGraphy"
+    style="width:100%;"
+    v-loading="loading.show"
+    :element-loading-text="loading.num + '/' + loading.total"
+  >
+    <div v-show="hasMap" class="header-search">
+      <!-- 初始两个按钮 -->
+      <div v-show="type == 1">
+        <el-button @click=" type = 2" icon="el-icon-search">查找业务空间</el-button>
+        <el-button @click="myDialogVisible = true">创建业务空间</el-button>
+        <span style="font-size:13px;color:#606266;margin-left:40px;display:inline-block;">
+          提示:
+          <i style="color:red;">红色字体</i>的业务空间为不相邻元空间组成,请检查是否要修改
+        </span>
+      </div>
+      <!-- 搜索下拉列表定位 -->
+      <div v-show="type == 2">
+        <el-autocomplete
+          popper-class="my-autocomplete"
+          v-model="search"
+          :fetch-suggestions="querySearch"
+          placeholder="输入平面图中已有的业务空间名称进行查找"
+          width="180px"
+          @select="handleSelect"
+        >
+          <i class="el-icon-search el-input__icon" slot="suffix" @click="handleIconClick"></i>
+          <template slot-scope="{ item }">
+            <div class="name" style="position: relative;">
+              {{ item.infos.RoomLocalName |cutString(8) }}
+              <span
+                class="addr"
+                style="position: absolute;right:10px;color:#409EFF;"
+              >定位</span>
             </div>
+          </template>
+        </el-autocomplete>
+        <el-button style="margin-left:10px;" type="text" @click="clearDimension">收起</el-button>
+      </div>
+      <!-- 点击元空间显示 -->
+      <div v-show="type == 3">
+        <div class="div50">
+          <el-button class="float-right" @click="SpaceDialog" type="primary" plain>从未关联元空间的业务空间中选择</el-button>
         </div>
-        <!-- 点击业务空间后点击元空间 -->
-        <div v-show="type == 5">
-            <div class="div50">
-            <el-button @click="clearDimension" class="float-right" plain>取 消</el-button>
-            </div>
-            <div class="div50">
-            <el-button @click="saveChange" type="primary">保存修改</el-button>
-            </div>
+        <div class="div50">
+          <el-button @click="clearDimension" plain>取 消</el-button>
+          <el-button @click="createSP" type="primary">创建新的业务空间</el-button>
         </div>
-        <el-button
-            v-show="type == 1"
-            @click="getPiss"
-            style="position: absolute;top: 10px;right: 10px;"
-            type="text"
-        >未关联元空间的业务空间 {{num}} 条</el-button>
+      </div>
+      <!-- 点击业务空间显示 -->
+      <div v-show="type == 4">
+        <div class="div50">
+          <el-button class="float-right" @click="divide" type="primary" plain>重新划分业务空间</el-button>
         </div>
-        <div
-        v-show="hasMap"
-        ref="canvasWidth"
-        class="canvasWidth"
-        v-loading="myLoading"
-        style="width:100%;"
-        >
-        <canvas :id="canvasId + 'canvas' " :width="canvasW" :height="canvasH"></canvas>
-        <div
-            style="height: 35px;overflow: hidden;z-index:99;transform: translateX(-50%);position: absolute;bottom: 10%;left: 50%;"
-        >
-            <el-button @click="smallSize" type="primary">- 缩小</el-button>
-            <el-button @click="suitableSize" type="primary">合适比例</el-button>
-            <el-button @click="bigSize" type="primary">+ 放大</el-button>
-            <el-button @click="exportJson" type="primary" icon="el-icon-download">
-                导出json文件
-            </el-button>
+        <div class="div50">
+          <el-button @click="clearDimension" plain>取 消</el-button>
+          <el-button @click="bussinDea" type="primary">查看详情</el-button>
+        </div>
+      </div>
+      <!-- 点击业务空间后点击元空间 -->
+      <div v-show="type == 5">
+        <div class="div50">
+          <el-button @click="clearDimension" class="float-right" plain>取 消</el-button>
         </div>
+        <div class="div50">
+          <el-button @click="saveChange" type="primary">保存修改</el-button>
+        </div>
+      </div>
+      <el-button
+        v-show="type == 1"
+        @click="getPiss"
+        style="position: absolute;top: 10px;right: 10px;"
+        type="text"
+      >未关联元空间的业务空间 {{num}} 条</el-button>
+    </div>
+    <div
+      v-show="hasMap"
+      ref="canvasWidth"
+      class="canvasWidth"
+      v-loading="myLoading"
+      style="width:100%;"
+    >
+      <canvas :id="canvasId + 'canvas' " :width="canvasW" :height="canvasH"></canvas>
+      <div
+        style="height: 35px;overflow: hidden;z-index:99;transform: translateX(-50%);position: absolute;bottom: 10%;left: 50%;"
+      >
+        <el-button @click="smallSize" type="primary">- 缩小</el-button>
+        <el-button @click="suitableSize" type="primary">合适比例</el-button>
+        <el-button @click="bigSize" type="primary">+ 放大</el-button>
+        <el-button @click="exportJson" type="primary" icon="el-icon-download">导出json文件</el-button>
+      </div>
     </div>
     <div
       v-show="!hasMap"
       class="center"
       style="height: 400px;padding-top:200px;box-sizing:border-box;"
     >
-        <i class="icon-wushuju iconfont"></i>
-        {{!!buildMess ? '请初始化平面图' : '请选择楼层'}}
+      <i class="icon-wushuju iconfont"></i>
+      {{!!buildMess ? '请初始化平面图' : '请选择楼层'}}
     </div>
     <el-dialog title="提示" :visible.sync="dialogVisible" :before-close="clearDimension" width="30%">
       <p style="color:red;line-height:24px;margin-bottom: 10px;" v-show="isAbutMsg">注意:您选择的元空间并未相邻!</p>
@@ -643,7 +648,6 @@
                 // this.view.canvasView.addEventListener("click", this.checkSpace);
                 //这里说是点击事件`
                 this.getGraphy();
-                console.log(data)
             },
             /** canvas事件------------------------------------------------------------------------------------*/
             //点击元空间
@@ -741,9 +745,10 @@
                 if (item.isBusiness == 5) {
                     this.$message("该空间为业务空间,请勿点击");
                 };
-                // 点击之后对所有色块重新着色
+                // 点击之后对所有色块重新着色 以及文字
                 items.forEach((a)=>{
-                   this.isBusinessToColor(a)
+                   this.isBusinessToColor(a);        
+                    this.drawText(a)
                 });
             },
             //isbusiness转换相应的颜色
@@ -773,8 +778,8 @@
                     item.width = item.cacheWidth;
                     item.fillColor = new SColor(11,12,12,.2) || new SColor('#F2F6FC')
                 } else if (item.isBusiness == 6) {
-                    item.color = new SColor(68,161,140,.4) || new SColor('#000');
-                    item.width = item.cacheWidth;
+                     item.color = new SColor(68,161,140,.4) || new SColor('#000');
+                    //  item.width = 10;
                      item.fillColor =new SColor('#1abc9c');
                      console.log('click item isbusiness',item)
                 } else if (item.isBusiness == 7) {
@@ -783,6 +788,30 @@
                     item.fillColor = item.cacheFillColor || new SColor('#F2F6FC');
                 }
             },
+            // 绘出文案
+            drawText(item) {
+                    if (item.initName) {
+                        if (this.isBusiness == 1) { 
+                            item.fillColor = new SColor(111,111,111,.5)
+                        } else if (this.isBusiness == 2) {
+                            item.fillColor = new SColor("#333");
+                        } else if (this.isBusiness == 3) {
+                            //业务空间异常状态
+                            item.fillColor = new SColor('#fff')
+                        } else if (this.isBusiness == 4) {
+                            item.fillColor = new SColor('#cacaca')
+                        } else if (this.isBusiness == 6) {
+                            item.fillColor = new SColor('#fff')
+                        } else if (this.isBusiness == 7) {
+                            item.fillColor = new SColor('red')
+                        }
+                    }
+                    if (item.businessName || item.businessId) {
+                        item.viewText = "👇   " + item.businessName;
+                    } else {
+                        item.viewText = "⬇️   " + item.initName;
+                    }
+            },
             /**  搜索 ------------------------------------------------------------------------------ */
             querySearch(queryString, cb) {
                 var restaurants = this.restaurants;
@@ -913,6 +942,9 @@
                         });
                     }
                 });
+                items.forEach((a)=>{
+                    this.drawText(a)
+                })
             },
             spaceIsAbut(list) {
                 let data = list.map(item => {
@@ -988,19 +1020,20 @@
             },
             //调整到合适比例
             suitableSize() {
-                //获取中心点
-                let rect = this.view.scene.worldRect();
-                //计算缩放比例
-                this.view.scale = Math.min(
-                    this.view.width / (rect.width * 1.2),
-                    this.view.height / (rect.height * 1.2)
-                );
-                // 移动画布
-                this.view.pos.x =
-                    (-(rect.right + rect.left) / 2) * this.view.scale + this.view.width / 2;
-                this.view.pos.y =
-                    (-(rect.bottom + rect.top) / 2) * this.view.scale +
-                    this.view.height / 2;
+                  this.view.fitSceneToView();
+                // //获取中心点
+                // let rect = this.view.scene.worldRect();
+                // //计算缩放比例
+                // this.view.scale = Math.min(
+                //     this.view.width / (rect.width * 1.2),
+                //     this.view.height / (rect.height * 1.2)
+                // );
+                // // 移动画布
+                // this.view.pos.x =
+                //     (-(rect.right + rect.left) / 2) * this.view.scale + this.view.width / 2;
+                // this.view.pos.y =
+                //     (-(rect.bottom + rect.top) / 2) * this.view.scale +
+                //     this.view.height / 2;
             },
             //调整到小比例
             smallSize() {
@@ -1329,55 +1362,55 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="less">
-    .canvasGraphy {
-        position: relative;
-        // canvas {
-        //     border: 1px solid #ccc;
-        // }
-        .header-search {
-            position: absolute;
-            top: 0;
-            height: 50px;
-            line-height: 50px;
-            padding-left: 20px;
-            background-color: rgba(205, 197, 191, 0.4);
-            left: 0;
-            right: 0;
-            top: 0;
-            z-index: 99;
-            >div {
-                height: 50px;
-            }
-            .div50 {
-                float: left;
-                width: 50%;
-                height: 100%;
-                .float-right {
-                    float: right;
-                    margin-top: 11px;
-                    margin-right: 10%;
-                }
-            }
-        }
-        .el-autocomplete {
-            width: 320px;
-        }
-        .my-autocomplete {
-            li {
-                line-height: normal;
-                padding: 7px;
-                .name {
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                }
-                .addr {
-                    font-size: 12px;
-                    color: #b4b4b4;
-                }
-                .highlighted .addr {
-                    color: #ddd;
-                }
-            }
-        }
+.canvasGraphy {
+  position: relative;
+  // canvas {
+  //     border: 1px solid #ccc;
+  // }
+  .header-search {
+    position: absolute;
+    top: 0;
+    height: 50px;
+    line-height: 50px;
+    padding-left: 20px;
+    background-color: rgba(205, 197, 191, 0.4);
+    left: 0;
+    right: 0;
+    top: 0;
+    z-index: 99;
+    > div {
+      height: 50px;
+    }
+    .div50 {
+      float: left;
+      width: 50%;
+      height: 100%;
+      .float-right {
+        float: right;
+        margin-top: 11px;
+        margin-right: 10%;
+      }
+    }
+  }
+  .el-autocomplete {
+    width: 320px;
+  }
+  .my-autocomplete {
+    li {
+      line-height: normal;
+      padding: 7px;
+      .name {
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .addr {
+        font-size: 12px;
+        color: #b4b4b4;
+      }
+      .highlighted .addr {
+        color: #ddd;
+      }
     }
+  }
+}
 </style>