Prechádzať zdrojové kódy

feat:完成编辑事件及其联动操作

YaolongHan 4 rokov pred
rodič
commit
cd25d9b574

+ 46 - 17
src/components/baseEditer.vue

@@ -15,7 +15,7 @@ import bus from "@/bus";
 import { saveGroup, readGroup } from "@/api/editer.js";
 import { STopologyParser } from "./../lib/parsers/STopologyParser";
 import { uuid } from "@/components/mapClass/until";
-import { SImageItem } from '@saga-web/graph/lib'
+import { SImageItem } from "@saga-web/graph/lib";
 import store from "../store";
 
 let fengmap = null;
@@ -44,7 +44,8 @@ export default {
       scene: null,
       view: null,
       floorList: {},
-      urlMsg: {}
+      urlMsg: {},
+      chiceItemList: [] //选中itemlist
     };
   },
   mounted() {
@@ -68,14 +69,18 @@ export default {
         this.appName,
         null
       );
-      console.log(this.urlMsg.fmapID)
+      console.log(this.urlMsg.fmapID);
       const floorid = this.urlMsg.FloorID;
       fengmap.loadMap(this.urlMsg.fmapID, resp => {
         this.floorList = resp;
-        fengmap.loadTheme(`${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${this.urlMsg.fmapID}.theme`).then(response => {
-          console.log('获取rf成功', response)
-          this.parserData(floorid);
-        })
+        fengmap
+          .loadTheme(
+            `${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${this.urlMsg.fmapID}.theme`
+          )
+          .then(response => {
+            console.log("获取rf成功", response);
+            this.parserData(floorid);
+          });
         this.view.fitSceneToView();
       });
       // 获取主题数据
@@ -121,15 +126,18 @@ export default {
       this.scene.emitChange = this.emitChange;
     },
     parserData(floor) {
-      if (floor == 'g80') {
+      if (floor == "g80") {
         // 屋顶
         if (fengmap.frImg) {
-          const imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${fengmap.frImg}`)
-          this.scene.addItem(imgItem)
-          this.view.scene = this.scene
-          this.view.fitSceneToView()
-          this.loading = false
-          this.isQuerying = false
+          const imgItem = new SImageItem(
+            null,
+            `${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${fengmap.frImg}`
+          );
+          this.scene.addItem(imgItem);
+          this.view.scene = this.scene;
+          this.view.fitSceneToView();
+          this.loading = false;
+          this.isQuerying = false;
         }
       } else {
         if (this.floorList[floor]) {
@@ -162,6 +170,7 @@ export default {
     },
     // 监听变化
     emitChange(itemMsg) {
+      this.chiceItemList = itemMsg.itemList;
       this.$emit("changeFocusItem", itemMsg);
       bus.$emit("FocusItemChanged", itemMsg);
     },
@@ -286,10 +295,30 @@ export default {
       bus.$on("changeLengedName", val => {
         this.scene.upadataLengedName(val);
       });
-         // 改变图例名称
+      // 改变图例名称
       bus.$on("changeImageNum", val => {
         this.scene.upadatImageNum(val);
       });
+      // 修改填充色
+      bus.$on("changefillColor", val => {
+        this.scene.upadatfillColor(val);
+      });
+      // 修改当前得状态是否为编辑状态
+      bus.$on("OpenEditStatus", () => {
+        // 获取焦点item (必须选中且仅选中一个)
+        if (
+          this.chiceItemList &&
+          this.chiceItemList.length &&
+          this.chiceItemList.length == 1
+        ) {
+          if (this.scene.grabItem) {
+            this.view.tryDbclick();
+          } else {
+            this.scene.grabItem = this.chiceItemList[0];
+            this.view.tryDbclick();
+          }
+        }
+      });
     },
     // 读取数据
     readGroup() {
@@ -325,12 +354,12 @@ export default {
     let params = href.split("?")[1];
     if (!params) {
       // 参数有问题
-      return false
+      return false;
     }
     params = decodeURIComponent(params);
     // params = "categoryId=NTXT&ProjectID=5&BuildingID=1&FloorID=1"; // mock 参数
     const paramsArr = params.split("&");
-    console.log('paramsArr', paramsArr)
+    console.log("paramsArr", paramsArr);
     const obj = {};
     paramsArr.map(item => {
       const arr = item.split("=");

+ 139 - 65
src/components/edit/attr_select.vue

@@ -102,55 +102,115 @@
     </div>
 
     <!--针对“设备/位置/管线/分区”属性示例-->
-    <div
-      class="attr-select"
-      v-if="type =='Zone' || type =='Image' ||type == 'fire-Zone' ||type == 'Line'"
-    >
-      <div class="row-tit" v-if="type == 'fire-area'">颜色</div>
-      <div class="row" v-if="type == 'fire-area'">
-        <swatches :swatches="swatchess" v-model="color" inline></swatches>
-      </div>
-      <div class="row">
-        <div class="row-tit">名称显示</div>
-        <a-button type="link" class="edit-option-btn">{{editStatus[type]}}</a-button>
-      </div>
-      <div class="row">
-        <a-input v-model="lengedName" @change="changeLengedName" />
-      </div>
-      <div class="row">
-        <div class="row-tit">字号</div>
-        <div class="grid-content">
-          <a-input-number v-model="fontSize" :min="1" @change="changeFont" style="width: 168px" />
+    <div class="attr-select">
+      <div v-if="type =='Image'||type == 'Line'">
+        <div class="row-tit" v-if="true">颜色</div>
+        <div class="row" v-if="true">
+          <swatches @input="changefillColor" :swatches="swatchess" v-model="fillColor" inline></swatches>
         </div>
-        <div class="color-choice">
-          <swatches v-model="color" @close="changeFontColor" popover-x="left" />
+        <div class="row">
+          <div class="row-tit">名称显示</div>
+          <a-button type="link" class="edit-option-btn" @click="OpenEditStatus">{{editStatus[type]}}</a-button>
         </div>
-      </div>
-      <!-- 当为设备状态时 -->
-      <div class="row" v-if="type =='Image'">
-        <div class="row-tit">数量</div>
-        <div class="grid-content">
-          <a-input-number
-            v-model="imageNum"
-            :min="1"
-            @change="changeImageNum"
-            style="width: 208px"
-          />
+        <div class="row">
+          <a-input v-model="lengedName" @change="changeLengedName" />
+        </div>
+        <div class="row">
+          <div class="row-tit">字号</div>
+          <div class="grid-content">
+            <a-input-number v-model="fontSize" :min="1" @change="changeFont" style="width: 168px" />
+          </div>
+          <div class="color-choice">
+            <swatches v-model="color" @close="changeFontColor" popover-x="left" />
+          </div>
+        </div>
+        <!-- 当为设备状态时 -->
+        <div class="row" v-if="type =='Image'">
+          <div class="row-tit">数量</div>
+          <div class="grid-content">
+            <a-input-number
+              v-model="imageNum"
+              :min="1"
+              @change="changeImageNum"
+              style="width: 208px"
+            />
+          </div>
+        </div>
+        <!-- 当为管道状态时 -->
+        <div class="row" v-if="type =='Line'">
+          <div class="row-tit">线宽</div>
+          <div class="grid-content">
+            <a-input-number
+              v-model="lineWidth"
+              :min="1"
+              @change="changeLineWidth"
+              style="width: 208px"
+            />
+          </div>
         </div>
       </div>
-      <!-- 当为管道状态时 -->
-      <div class="row" v-if="type =='Line'">
-        <div class="row-tit">线宽</div>
-        <div class="grid-content">
-          <a-input-number
-            v-model="lineWidth"
-            :min="1"
-            @change="changeLineWidth"
-            style="width: 208px"
-          />
+      <div v-else>
+        <div v-if="false">
+          <!-- 防火分区 -->
+          <div class="row-tit">颜色</div>
+          <div class="row">
+            <swatches @input="changefillColor" :swatches="swatchess" v-model="fillColor" inline></swatches>
+          </div>
+          <div class="row">
+            <div class="row-tit">名称显示</div>
+            <a-button type="link" class="edit-option-btn"  @click="OpenEditStatus">{{editStatus[type]}}</a-button>
+          </div>
+          <div class="row">
+            <a-input v-model="lengedName" @change="changeLengedName" />
+          </div>
+          <div class="row">
+            <div class="row-tit">字号</div>
+            <div class="grid-content">
+              <a-input-number
+                v-model="fontSize"
+                :min="1"
+                @change="changeFont"
+                style="width: 168px"
+              />
+            </div>
+            <div class="color-choice">
+              <swatches v-model="color" @close="changeFontColor" popover-x="left" />
+            </div>
+          </div>
+        </div>
+        <div v-else>
+          <!-- 石材铺装 -->
+          <div class="row">
+            <div class="row-tit">图例说明</div>
+            <a-button type="link" class="edit-option-btn"  @click="OpenEditStatus">编辑区域</a-button>
+          </div>
+          <div class="row">
+            <a-textarea :auto-size="{ minRows: 4, maxRows: 6 }" />
+          </div>
+          <div class="row">
+            <div class="row-tit">描边</div>
+            <div class="grid-content">
+              <a-input-number
+                v-model="fontSize"
+                :min="1"
+                @change="changeFont"
+                style="width: 168px"
+              />
+            </div>
+            <div class="color-choice">
+              <swatches v-model="color" @close="changeFontColor" popover-x="left" />
+            </div>
+          </div>
+          <div class="row">
+            <div class="row-tit">填充</div>
+            <div class="color-choice">
+              <swatches v-model="color" @close="changeFontColor" popover-x="left" />
+            </div>
+          </div>
         </div>
       </div>
     </div>
+
     <!--设备/工程信息化ID/工程信息化中的位置类型-->
     <div
       class="attr-select attr-select-bottom"
@@ -176,22 +236,29 @@
         <a-collapse-panel key="1" :style="customStyle">
           <template slot="header">
             <div style="font-size: 12px;color: #8D9399;">
-              <a-icon type="exclamation-circle" /> <span>键盘操作提示</span>
+              <a-icon type="exclamation-circle" />
+              <span>键盘操作提示</span>
             </div>
           </template>
 
-          <p v-for="item in keyboardOperation" :key="item.value" style="display: flex;margin-top: 13px;">
-           <span> {{item.value}}</span>
+          <p
+            v-for="item in keyboardOperation"
+            :key="item.value"
+            style="display: flex;margin-top: 13px;"
+          >
+            <span>{{item.value}}</span>
             <span class="key-board">{{item.keys}}</span>
-            <span v-if="item.events" style="margin: 0 5px;">+ <a-icon type="user" /></span>
-            <span> {{item.events}}</span>
+            <span v-if="item.events" style="margin: 0 5px;">
+              +
+              <a-icon type="user" />
+            </span>
+            <span>{{item.events}}</span>
           </p>
         </a-collapse-panel>
       </a-collapse>
     </div>
     <editDialog ref="dialog" :typeEdit="1" :getmajorId="'1001'" :sysNum="5" />
-<!--    <editDialog ref="dialog" :typeEdit="2" :getmajorId="'设备间'" :sysNum="5" />-->
-
+    <!--    <editDialog ref="dialog" :typeEdit="2" :getmajorId="'设备间'" :sysNum="5" />-->
   </div>
 </template>
 
@@ -213,10 +280,10 @@ export default {
       customStyle:
         "background: #fff;overflow: hidden;  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);border:0",
       keyboardOperation: [
-        { value: "拖动画布:", keys:'Space',events:'Click' },
-        { value: "加选对象:", keys:'Ctrl',events:'Press' },
-        { value: "确认操作:", keys:'Enter' },
-        { value: "取消对象:", keys:'Enter' }
+        { value: "拖动画布:", keys: "Space", events: "Click" },
+        { value: "加选对象:", keys: "Ctrl", events: "Press" },
+        { value: "确认操作:", keys: "Enter" },
+        { value: "取消对象:", keys: "Enter" }
       ],
       numberValue: 3,
       fontSize: 12, //字体大小
@@ -255,14 +322,15 @@ export default {
         }
       ],
       editStatus: {
-        equipment: "编辑设备",
-        pipeline: "管道编辑",
-        "fire-area": "编辑区域",
-        position: "编辑区域"
+        Image: "编辑设备",
+        Line: "管道编辑",
+        Zone: "编辑区域",
       },
-      swatchess: ["#57C5FC", "#5F70E1", "#4DAE6C", "#028FAA"],
+      swatchess: ["#69C5FC", "#656EDF", "#58AF6F", "#2D8FAA"],
       lengedName: "", // 图例名称
-      imageNum: 1 //设备数量
+      imageNum: 1, //设备数量
+      fillColor: "", //修改填充色 (主要针对防火风区以及石材铺装)
+      focusItem:null  //选中得item
     };
   },
   methods: {
@@ -338,6 +406,13 @@ export default {
         this.imageNum = 1;
       }
       bus.$emit("changeImageNum", this.imageNum);
+    },
+    changefillColor() {
+      bus.$emit("changefillColor", this.fillColor);
+    },
+    //设置缩小item为编辑状态
+    OpenEditStatus(){
+      bus.$emit("OpenEditStatus");
     }
   },
   watch: {
@@ -412,7 +487,6 @@ export default {
     position: relative;
   }
 
-
   .icon-image {
     font-size: 25px;
   }
@@ -439,18 +513,18 @@ export default {
     color: #0091ff;
   }
 }
-.key-boards{
-  .key-board{
+.key-boards {
+  .key-board {
     width: 52px;
     height: 24px;
     border-radius: 3px;
     border: 1px solid rgba(195, 199, 203, 1);
     font-size: 14px;
-    color: #646A73;
+    color: #646a73;
     text-align: center;
   }
-  /deep/ .ant-collapse-content{
-    border-top: 1px solid #EFF0F1;
+  /deep/ .ant-collapse-content {
+    border-top: 1px solid #eff0f1;
   }
 }
 #attr-select {

+ 12 - 1
src/components/mapClass/EditScence.ts

@@ -7,7 +7,7 @@ import { SImageLegendItem } from "@/lib/items/SImageLegendItem";
 import { TipelineItem } from "@/lib/items/TipelineItem";
 import { SImgTextItem } from "@/lib/items/SImgTextItem";
 import { SImageMarkerItem } from "@/lib/items/SImageMarkerItem"
-import { SPoint, SFont } from '@saga-web/draw/lib';
+import { SPoint, SFont, SColor } from '@saga-web/draw/lib';
 import { Legend } from '@/lib/types/Legend';
 import { Relation } from '@/lib/types/Legend';
 
@@ -504,6 +504,17 @@ export class EditScence extends SGraphScene {
             this.focusItem.num = num
         }
     }
+
+    /**
+     * 更改item Num数量
+     * @param num number item数量 (只对icon设备类)
+     */
+    upadatfillColor(fillColor: string): void {
+        if (this.focusItem && this.focusItem.fillColor) {
+            this.focusItem.fillColor = new SColor(fillColor)
+        }
+    }
+
     /**
      * 删除指定item
      */

+ 3 - 1
src/components/mapClass/SPolygonItem.ts

@@ -91,7 +91,8 @@ export class SPolygonItem extends SGraphItem {
         return this._fillColor
     };
     set fillColor(v: SColor) {
-        this._fillColor = v
+        this._fillColor = v;
+        this.update()
     }
 
     /** 边框的宽 只可输入像素宽*/
@@ -419,6 +420,7 @@ export class SPolygonItem extends SGraphItem {
      * @return	boolean
      */
     onDoubleClick(event: SMouseEvent): boolean {
+        console.log(event)
         // 如果位show状态 双击改对象则需改为编辑状态
         if (SItemStatus.Normal == this.status) {
             this.status = SItemStatus.Edit;

+ 19 - 0
src/lib/FloorView.ts

@@ -73,6 +73,7 @@ export class FloorView extends SGraphView {
      * @param   event       事件参数
      */
     protected onMouseDown(event: MouseEvent): void {
+        ``
         let se = new SMouseEvent(event);
         if (se.buttons & SMouseButton.LeftButton) {
             this._leftKeyPos.x = se.x;
@@ -100,4 +101,22 @@ export class FloorView extends SGraphView {
         }
         super.onMouseMove(event);
     } // Function onMouseMove()
+
+    // 模拟双击事件
+    tryDbclick() {
+        const event = {
+            altKey: false,
+            buttons: 0,
+            clientX: 574,
+            clientY: 309,
+            ctrlKey: false,
+            screenX: 574,
+            screenY: 412,
+            type: "dblclick",
+            x: 545767.790241906,
+            y: 210014.18692875182,
+        }
+        this.onDoubleClick(event)
+    }
+
 } // Class FloorScene