Browse Source

'解决冲突'

zhangyu 4 years ago
parent
commit
b36d2c0071

+ 10 - 18
package-lock.json

@@ -1064,11 +1064,11 @@
       "integrity": "sha512-PtXbFcLR5Hzyh0fTZax3+u+UT0HISN6duWsOAgrikyayRiGu1bNvVOK3BhfDkYRX51GYjE0f9uAjH5upt9lLYw=="
     },
     "@saga-web/big": {
-      "version": "1.0.43",
-      "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/big/-/big-1.0.43.tgz",
-      "integrity": "sha512-AAi/EBXfdb4nuMYkY6Tl2/bB9uNt/X7Py0BBR1L6Yof8xqpALULKFT4dZoU+3CU7yG6yNAW6+jK3wGzd3ApMwQ==",
+      "version": "1.0.41",
+      "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/big/-/big-1.0.41.tgz",
+      "integrity": "sha512-/BJJlKVsW8bRO8gxN57qJ5AwHQXno+AbGE0G9FqLPlmpaW9SPLe8rV3EQ7QavVG1VPGdoSGJ1UIqNp4KVBujpg==",
       "requires": {
-        "@saga-web/graph": "2.1.84"
+        "@saga-web/graph": "2.1.82"
       },
       "dependencies": {
         "@saga-web/draw": {
@@ -1080,9 +1080,9 @@
           }
         },
         "@saga-web/graph": {
-          "version": "2.1.84",
-          "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/graph/-/graph-2.1.84.tgz",
-          "integrity": "sha512-7RwFNoVQcjrmWmzZhOrSUkvCeBfJsf7i0HElXvouN8ooy9R3KP1xcJnDGZ2MP9i9udmw09JEbjMVHrLhXZrEsQ==",
+          "version": "2.1.82",
+          "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/graph/-/graph-2.1.82.tgz",
+          "integrity": "sha512-JyX74MLDZdRK4hbbwV7d5YJaaQJ84FCTqeJFlBOaXS0prXUmlGdB8HikQuQAyK15smosdw0ILYUNTn3wjGkgQw==",
           "requires": {
             "@saga-web/draw": "2.1.94"
           }
@@ -1121,14 +1121,6 @@
             "@saga-web/graph": "2.1.81"
           }
         },
-        "@saga-web/draw": {
-          "version": "2.1.94",
-          "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/draw/-/draw-2.1.94.tgz",
-          "integrity": "sha512-niu1zEvTv4l3Gnx+Qv7LPjgaPAgKQIIjUGM0H2nyvfJlRZb96LVJSum77cGJunhTl7ak6opg28JWCUUCKW/qRw==",
-          "requires": {
-            "@saga-web/base": "^2.1.19"
-          }
-        },
         "@saga-web/graph": {
           "version": "2.1.81",
           "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/graph/-/graph-2.1.81.tgz",
@@ -1140,9 +1132,9 @@
       }
     },
     "@saga-web/graph": {
-      "version": "2.1.86",
-      "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/graph/-/graph-2.1.86.tgz",
-      "integrity": "sha512-ZapOQ7BJymzsYcW5qjv5dWjUiDeI3gHOZOIv8UV3/CuQ3s09WMv75jGG/D0dQtiDhICoUYc5IVZlZVBS184a5g==",
+      "version": "2.1.84",
+      "resolved": "http://192.168.200.80:8081/repository/npm-saga/@saga-web/graph/-/graph-2.1.84.tgz",
+      "integrity": "sha512-7RwFNoVQcjrmWmzZhOrSUkvCeBfJsf7i0HElXvouN8ooy9R3KP1xcJnDGZ2MP9i9udmw09JEbjMVHrLhXZrEsQ==",
       "requires": {
         "@saga-web/draw": "2.1.96"
       }

+ 11 - 1
src/api/editer.js

@@ -19,7 +19,7 @@ export function saveGroup(postParams) {
 
 //查询系统图展示所需数据
 export function readGroup(postParams) {
-    return httputils.fetchJson(`${testApi}/graph/read`, postParams)
+    return httputils.postJson(`${testApi}/graph/read`, postParams)
 }
 //上传图片
 export function uploadImg({
@@ -59,4 +59,14 @@ export function queryWzflByDl(data,params){
 // 查询位置大类
 export function queryWzfldl(data,params){
     return httputils.postJson(`${dataApi}/data/base/queryWzfldl`, params)
+}
+
+// 查询图例统计信息
+export function queryStatistic(data,params){
+    return httputils.postJson(`${testApi}/graphElement/statistic/query`, params)
+}
+
+// 草稿箱专业楼层结构查询
+export function queryDraftGroup(data,params){
+    return httputils.getJson(`${testApi}/graph/draftGroup`,data, params)
 }

BIN
src/assets/images/shubiao.png


+ 53 - 18
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,16 +295,42 @@ 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();
+          }
+        }
+      });
+      //修改图例说明
+      bus.$on("changeitemExplain", val => {
+        this.scene.upadatitemExplain(val);
+      });
     },
     // 读取数据
     readGroup() {
       const data = {
         categoryId: this.urlMsg.categoryId,
-        projectId: this.urlMsg.projectId
+        projectId: this.urlMsg.projectId,
+        BuildingID: this.urlMsg.BuildingID, // 建筑ID
+        FloorID: this.urlMsg.FloorID // 楼层id
       };
       return readGroup(data);
     }
@@ -325,12 +360,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("=");

+ 179 - 66
src/components/edit/attr_select.vue

@@ -102,55 +102,147 @@
     </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" v-show="type =='Image'|| type == 'Line' || type == 'Zone'">
+      <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="fontColor" @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="SubType=='FHFQ'">
+          <!-- 防火分区 -->
+          <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="fontColor" @close="changeFontColor" popover-x="left" />
+            </div>
+          </div>
+        </div>
+        <div v-if="SubType=='SCPZ'">
+          <!-- 石材铺装 -->
+          <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 @change="changeitemExplain" v-model="itemExplain" :auto-size="{ minRows: 4, maxRows: 6 }" />
+          </div>
+          <div class="row">
+            <div class="row-tit">描边</div>
+            <div class="grid-content">
+              <a-input-number
+                v-model="lineWidth"
+                :min="1"
+                @change="changeLineWidth"
+                style="width: 168px"
+              />
+            </div>
+            <div class="color-choice">
+              <swatches v-model="borderColor" @close="changeBorderColor" popover-x="left" />
+            </div>
+          </div>
+          <div class="row">
+            <div class="row-tit">填充</div>
+            <div class="color-choice">
+              <swatches v-model="fillColor" @close="changefillColor" popover-x="left" />
+            </div>
+          </div>
+        </div>
+        <div v-if="!SubType">
+          <!-- 普通分区 -->
+          <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="fontColor" @close="changeFontColor" popover-x="left" />
+            </div>
+          </div>
         </div>
       </div>
     </div>
+
     <!--设备/工程信息化ID/工程信息化中的位置类型-->
     <div
       class="attr-select attr-select-bottom"
@@ -176,22 +268,26 @@
         <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 style="margin-left: 5px;">键盘操作提示</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 v-if="item.events" style="margin: 0 5px;">+ <img style="width:13px;height:18px;" src="./../../assets/images/shubiao.png" alt=""></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 +309,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 +351,16 @@ 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: "", //修改填充色 (主要针对防火风区以及石材铺装)
+      SubType: "", //空间类型,区分石材铺装
+      itemExplain:'' //图例说明 只针对石材铺装
     };
   },
   methods: {
@@ -288,8 +386,8 @@ export default {
       bus.$emit("changeText", this.textMsg);
     },
     // 改变线的颜色
-    changeBorderColor(color) {
-      bus.$emit("changeBorderColor", color);
+    changeBorderColor() {
+      bus.$emit("changeBorderColor", this.borderColor);
     },
     // 改变字体颜色
     changeFontColor(color) {
@@ -338,11 +436,25 @@ export default {
         this.imageNum = 1;
       }
       bus.$emit("changeImageNum", this.imageNum);
+    },
+    changefillColor() {
+      bus.$emit("changefillColor", this.fillColor);
+    },
+    //设置缩小item为编辑状态
+    OpenEditStatus() {
+      bus.$emit("OpenEditStatus");
+    },
+    // 编辑图例说明
+    changeitemExplain(){
+      bus.$emit("changeitemExplain",this.itemExplain);
     }
   },
   watch: {
     focusItemList: function(newval) {
       const Item = newval.itemList[0];
+      if (Item.data && Item.data.SubType) {
+        this.SubType = Item.data.SubType;
+      }
       if (newval.itemList.length == 1) {
         if (newval.itemType == "baseText") {
           this.textMsg = Item.text;
@@ -364,6 +476,8 @@ export default {
             this.fontSize = Item.font.size;
           } else if (newval.itemType == "Line") {
             this.color = Item.color;
+            this.fillColor = Item.fillColor;
+            this.borderColor = Item.strokeColor;
             this.lineWidth = Item.lineWidth;
           }
         }
@@ -412,7 +526,6 @@ export default {
     position: relative;
   }
 
-
   .icon-image {
     font-size: 25px;
   }
@@ -439,18 +552,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 {

+ 7 - 5
src/components/edit/left_toolbar.vue

@@ -76,6 +76,7 @@
           :wrap-style="{ position: 'absolute',}"
           @close="onClose"
           :getContainer="false"
+          :mask="false"
         >
           <div class="drawer-model-body" v-if="!isExtract">
             <div class="btn-list">
@@ -246,7 +247,8 @@ export default {
       data,
       columns,
       itemList: [], //图例数组
-      categoryId: ""
+      categoryId: "",
+      activeIndex: -1
     };
   },
   computed: {
@@ -298,7 +300,6 @@ export default {
         // 接口请求
         const arr = {
           GraphCategoryIds: this.categoryId,
-          // GraphCategoryIds: "NTXT",
           Type: item.type
         };
         queryGroup(arr).then(res => {
@@ -313,7 +314,6 @@ export default {
       });
     },
     getexampleItem(item) {
-      this.visible = false;
       this.$emit("toolActionClick", item);
     },
     // 提取元素
@@ -348,9 +348,8 @@ export default {
   },
   mounted() {
     const ele = document.getElementById("drawer-model");
-    ele.style.width = document.body.offsetWidth - 70 + "px";
+    ele.style.width = "256px";
     this.getBus();
-    console.log(this.GraphCategoryIds);
   },
   created() {
     const href = window.location.href;
@@ -559,6 +558,9 @@ export default {
               margin: 0 auto;
             }
           }
+          .active-li{
+              background: #e1f2ff;
+          }
         }
       }
     }

+ 52 - 14
src/components/mapClass/EditScence.ts

@@ -3,13 +3,15 @@ import { SGraphScene, SGraphLayoutType } from '@saga-web/graph/lib';
 import { SFloorParser, SLineItem, SPolylineItem, SItemStatus, ItemOrder } from "@saga-web/big";
 import { SGraphItem, SLineStyle, SImageItem, STextItem, SGraphPointListInsert, SGraphPointListDelete, SGraphPointListUpdate, SGraphAddCommand } from "@saga-web/graph/lib";
 import { SZoneLegendItem } from "@/lib/items/SZoneLegendItem";
+import { SSCPZZoneLegendItem } from "@/lib/items/SSCPZZoneLegendItem";
+import { SFHFQZoneLegendItem } from "@/lib/items/SFHFQZoneLegendItem";
 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';
+import { Relation } from '@/lib/types/Relation';
 
 import { uuid } from "@/components/mapClass/until";
 import { STextMarkerItem } from '@/lib/items/STextMarkerItem';
@@ -78,13 +80,16 @@ export class EditScence extends SGraphScene {
 
         if (obj.itemList[0] instanceof STextMarkerItem) {
             itemType = 'baseText'
-            console.log('obj.itemList[0]', itemType, obj.itemList[0])
         } else if (obj.itemList[0] instanceof SImageMarkerItem) {
             itemType = 'baseImage'
         } else if (obj.itemList[0] instanceof SLineMarkerItem) {
             itemType = 'baseLine'
         } else if (obj.itemList[0] instanceof SZoneLegendItem) {
             itemType = 'Zone'
+        } else if (obj.itemList[0] instanceof SFHFQZoneLegendItem) {
+            itemType = 'Zone'
+        } else if (obj.itemList[0] instanceof SSCPZZoneLegendItem) {
+            itemType = 'Zone'
         } else if (obj.itemList[0] instanceof SImageLegendItem) {
             itemType = 'Image'
         } else if (obj.itemList[0] instanceof TipelineItem) {
@@ -194,6 +199,8 @@ export class EditScence extends SGraphScene {
      * 增加多边形item lenged
      */
     addPolygonItem(event: SMouseEvent): void {
+
+        const SubType = this._legend.SubType ? this._legend.SubType : ''
         const LegendData: Legend = {
             ID: uuid(),
             Name: this._legend.Name,
@@ -204,18 +211,25 @@ export class EditScence extends SGraphScene {
             Type: "Zone",
             Pos: { X: event.x, Y: event.y },
             OutLine: [{ X: event.x, Y: event.y }],
+            SubType: SubType,
             Properties: {
                 StrokeColor: this._legend.Color,
                 FillColor: this._legend.FillColor,
                 LineDash: this._legend.LineDash,
                 LineWidth: this._legend.LineWidth,
-                font:0,
-                color:'',
-                TextPos:{X:0,Y:0}
+                font: 0,
+                color: '',
+                TextPos: { X: 0, Y: 0 }
             },
         }
-
-        const Polylines = new SZoneLegendItem(null, LegendData);
+        let Polylines = null;
+        if (SubType == "SCPZ") {
+            Polylines = new SSCPZZoneLegendItem(null, LegendData);
+        } else if (SubType == "FHFQ") {
+            Polylines = new SFHFQZoneLegendItem(null, LegendData);
+        } else {
+            Polylines = new SZoneLegendItem(null, LegendData);
+        }
         Polylines.selectable = true;
         //设置状态
         Polylines.status = SItemStatus.Create;
@@ -308,10 +322,10 @@ export class EditScence extends SGraphScene {
             Properties: {
                 Url: '/serve/topology-wanda/Picture/query/' + this._legend.Url,
                 Num: 1, // 此num与信息工程化得num无关
-                sWidth:0,  //icon 的宽
-                sHeight:0,   //icon 的高
-                font:0,    //font
-                color:''  //字体颜色
+                sWidth: 0,  //icon 的宽
+                sHeight: 0,   //icon 的高
+                font: 0,    //font
+                color: ''  //字体颜色
             },
         }
         const item = new SImageLegendItem(null, LegendData);
@@ -391,8 +405,12 @@ export class EditScence extends SGraphScene {
      */
     updatedBorderColor(color: string): void {
         if (this.focusItem) {
-            let old = this.focusItem.strokeColor;
-            this.focusItem.strokeColor = color;
+            if (this.focusItem instanceof SZoneLegendItem || this.focusItem instanceof SSCPZZoneLegendItem || this.focusItem instanceof SFHFQZoneLegendItem) {
+                this.focusItem.strokeColor = new SColor(color)
+            } else {
+                // let old = this.focusItem.strokeColor;
+                this.focusItem.strokeColor = color;
+            }
             // this.undoStack.push(new SGraphPropertyCommand(this, this.focusItem, "color", old, color));
         }
     }
@@ -504,6 +522,26 @@ 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)
+        }
+    }
+    /**
+   * 更改图例说明数量
+   * @param num number item数量 (只对icon设备类)
+   */
+    upadatitemExplain(itemExplain: string): void {
+        if (this.focusItem) {
+            this.focusItem.itemExplain = itemExplain
+        }
+    }
+
     /**
      * 删除指定item
      */

+ 5 - 2
src/components/mapClass/SPolygonItem.ts

@@ -83,7 +83,8 @@ export class SPolygonItem extends SGraphItem {
         return this._strokeColor
     };
     set strokeColor(v: SColor) {
-        this._strokeColor = v
+        this._strokeColor = v;
+        this.update()
     }
     /** 填充颜色 */
     _fillColor: SColor = new SColor("#1EE887");
@@ -91,7 +92,8 @@ export class SPolygonItem extends SGraphItem {
         return this._fillColor
     };
     set fillColor(v: SColor) {
-        this._fillColor = v
+        this._fillColor = v;
+        this.update()
     }
 
     /** 边框的宽 只可输入像素宽*/
@@ -440,6 +442,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

+ 170 - 0
src/lib/items/SFHFQZoneLegendItem.ts

@@ -0,0 +1,170 @@
+
+import { SGraphItem } from "@saga-web/graph/lib";
+import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
+import { Legend } from '../types/Legend';
+import { SPainter, SColor, SFont, SPoint } from "@saga-web/draw";
+import { STextItem } from '@saga-web/graph/lib';
+import { hexify } from "@/components/mapClass/until"
+import { SItemStatus, ItemOrder } from '@saga-web/big/lib';
+/**
+ *图例节点Item(区域类型 --防火分区)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class SFHFQZoneLegendItem extends SPolygonItem {
+    /** 图例节点对象数据 */
+    data: Legend;
+
+    /** text item   */
+    textItem: STextItem = new STextItem(this);
+
+    get text(): string {
+        return this.textItem.text;
+    }
+    set text(v: string) {
+        this.textItem.text = v;
+        this.update();
+    }
+    get color(): string {
+        return this.textItem.color;
+    }
+    set color(v: string) {
+        this.textItem.color = v
+    }
+    get font(): SFont {
+        return this.textItem.font
+    }
+    set font(v: SFont) {
+        this.textItem.font = v
+    }
+
+    get status(): SItemStatus {
+        return this._status;
+    }
+    // 编辑当前状态
+    set status(value: SItemStatus) {
+        this._status = value;
+        // 如果状态为show则需清栈
+        if (value == SItemStatus.Normal) {
+            // 切换显示状态显示文本
+            this.showText = true;
+            // 切换显示状态不可移动文本
+            this.textItem.moveable = false;
+
+            if (this.undoStack) {
+                this.undoStack.clear();
+            }
+        } else if (value == SItemStatus.Edit) {
+            // 切换编辑状态显示文本
+            this.showText = true;
+            // 切换编辑状态可移动文本
+            this.textItem.moveable = true;
+        } else if (value == SItemStatus.Create) {
+            // 切换创建状态不显示文本
+            this.showText = false;
+            // 切换创建状态不可移动文本
+            this.textItem.moveable = false;
+        }
+        this.update();
+    };
+
+    /** 是否显示文字  */
+    _showText: boolean = true;
+    get showText(): boolean {
+        return this._showText;
+    }
+    set showText(v: boolean) {
+        if (v === this._showText) {
+            return
+        }
+        this._showText = v;
+        if (v) {
+            this.textItem.show();
+        } else {
+            this.textItem.hide();
+        }
+    }
+
+
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      图例节点对象数据
+     */
+    constructor(parent: SGraphItem | null, data: Legend) {
+        super(parent);
+        this.zOrder = ItemOrder.polygonOrder;
+        this.data = data;
+        this.id = data.ID;
+        this.name = data.Name;
+        this.text = data.Name;
+        this.font = new SFont("sans-serif", 2);
+        if (data) {
+            this.setPointList = [];
+            let setPointList: SPoint[];
+            if (data.OutLine) {
+                if (data.OutLine[0] instanceof SPoint) {
+                    this.setPointList = data.OutLine;
+                } else {
+                    setPointList = data.OutLine.map(i => {
+                        return (new SPoint(i.X, i.Y))
+                    })
+                    this.setPointList = setPointList;
+                }
+            }
+            // 设置线宽
+            if (data.Properties.LineWidth) {
+                this.lineWidth = data.Properties.LineWidth
+            }
+            if (data.Properties.StrokeColor) {
+                this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
+            }
+            if (data.Properties.FillColor) {
+                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor))
+            }
+            if (data.Properties.TextPos) {
+                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
+            }
+            if (data.Properties.color) {
+                this.color = data.Properties.color
+            }
+            if (data.Properties.font) {
+                this.font =new SFont("sans-serif", data.Properties.font);
+            }
+            //    if( data.Properties.LineDash){
+            //     this.LineDash =this._legend.Properties.LineDash
+            //    }
+        }
+        // 监听多边形创建完成事件,并动态计算文本位置
+        this.connect("finishCreated",this, () => {
+            // 计算文本位置
+            let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
+                                return pre + (cur.x / arr.length)
+                            }, 0),
+                y: number = this.getPointList.reduce((pre, cur, index, arr) => {
+                                return pre + (cur.y / arr.length)
+                            }, 0);
+            this.textItem.moveTo(x, y);
+        })
+    }
+
+    toData(): any {
+        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Name = this.text;
+        this.data.Properties.FillColor = this.fillColor.value;
+        this.data.Properties.StrokeColor = this.strokeColor.value;
+        this.data.Properties.LineWidth = this.lineWidth;
+        this.data.OutLine = this.getPointList.map(pos => {
+            return {
+                X: pos.x,
+                Y: pos.y
+            }
+        });
+        this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
+        this.data.Properties.font =  this.font.size;
+        this.data.Properties.color =  this.color;
+        return this.data;
+    }
+
+} // Class SZoneLegendItem

+ 176 - 0
src/lib/items/SSCPZZoneLegendItem.ts

@@ -0,0 +1,176 @@
+
+import { SGraphItem } from "@saga-web/graph/lib";
+import { SPolygonItem } from "@/components/mapClass/SPolygonItem";
+import { Legend } from '../types/Legend';
+import { SPainter, SColor, SFont, SPoint } from "@saga-web/draw";
+import { STextItem } from '@saga-web/graph/lib';
+import { hexify } from "@/components/mapClass/until"
+import { SItemStatus, ItemOrder } from '@saga-web/big/lib';
+/**
+ * 图例节点Item(区域类型 --石材铺装)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class SSCPZZoneLegendItem extends SPolygonItem {
+    /** 图例节点对象数据 */
+    data: Legend;
+
+    /** text item   */
+    textItem: STextItem = new STextItem(this);
+
+    get text(): string {
+        return this.textItem.text;
+    }
+    set text(v: string) {
+        this.textItem.text = v;
+        this.update();
+    }
+    get color(): string {
+        return this.textItem.color;
+    }
+    set color(v: string) {
+        this.textItem.color = v
+    }
+    get font(): SFont {
+        return this.textItem.font
+    }
+    set font(v: SFont) {
+        this.textItem.font = v
+    }
+
+    get status(): SItemStatus {
+        return this._status;
+    }
+    // 编辑当前状态
+    set status(value: SItemStatus) {
+        this._status = value;
+        // 如果状态为show则需清栈
+        if (value == SItemStatus.Normal) {
+            // 切换显示状态显示文本
+            this.showText = true;
+            // 切换显示状态不可移动文本
+            this.textItem.moveable = false;
+
+            if (this.undoStack) {
+                this.undoStack.clear();
+            }
+        } else if (value == SItemStatus.Edit) {
+            // 切换编辑状态显示文本
+            this.showText = true;
+            // 切换编辑状态可移动文本
+            this.textItem.moveable = true;
+        } else if (value == SItemStatus.Create) {
+            // 切换创建状态不显示文本
+            this.showText = false;
+            // 切换创建状态不可移动文本
+            this.textItem.moveable = false;
+        }
+        this.update();
+    };
+
+    /** 是否显示文字  */
+    _showText: boolean = true;
+    get showText(): boolean {
+        return this._showText;
+    }
+    set showText(v: boolean) {
+        if (v === this._showText) {
+            return
+        }
+        this._showText = v;
+        if (v) {
+            this.textItem.show();
+        } else {
+            this.textItem.hide();
+        }
+    }
+    /** 图例说明  */
+    set itemExplain(v:string){
+      this.data.Properties.ItemExplain = v
+    }
+    get itemExplain():string{
+        return this.data.Properties.ItemExplain
+    }
+
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      图例节点对象数据
+     */
+    constructor(parent: SGraphItem | null, data: Legend) {
+        super(parent);
+        this.zOrder = ItemOrder.polygonOrder;
+        this.data = data;
+        this.id = data.ID;
+        this.name = data.Name;
+        this.text = data.Name;
+        this.font = new SFont("sans-serif", 2);
+        if (data) {
+            this.setPointList = [];
+            let setPointList: SPoint[];
+            if (data.OutLine) {
+                if (data.OutLine[0] instanceof SPoint) {
+                    this.setPointList = data.OutLine;
+                } else {
+                    setPointList = data.OutLine.map(i => {
+                        return (new SPoint(i.X, i.Y))
+                    })
+                    this.setPointList = setPointList;
+                }
+            }
+            // 设置线宽
+            if (data.Properties.LineWidth) {
+                this.lineWidth = data.Properties.LineWidth
+            }
+            if (data.Properties.StrokeColor) {
+                this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
+            }
+            if (data.Properties.FillColor) {
+                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor))
+            }
+            if (data.Properties.TextPos) {
+                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
+            }
+            if (data.Properties.color) {
+                this.color = data.Properties.color
+            }
+            if (data.Properties.font) {
+                this.font =new SFont("sans-serif", data.Properties.font);
+            }
+            //    if( data.Properties.LineDash){
+            //     this.LineDash =this._legend.Properties.LineDash
+            //    }
+        }
+        // 监听多边形创建完成事件,并动态计算文本位置
+        this.connect("finishCreated",this, () => {
+            // 计算文本位置
+            let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
+                                return pre + (cur.x / arr.length)
+                            }, 0),
+                y: number = this.getPointList.reduce((pre, cur, index, arr) => {
+                                return pre + (cur.y / arr.length)
+                            }, 0);
+            this.textItem.moveTo(x, y);
+        })
+    }
+
+    toData(): any {
+        this.data.Pos = {X: this.x, Y: this.y};
+        this.data.Name = this.text;
+        this.data.Properties.FillColor = this.fillColor.value;
+        this.data.Properties.StrokeColor = this.strokeColor.value;
+        this.data.Properties.LineWidth = this.lineWidth;
+        this.data.OutLine = this.getPointList.map(pos => {
+            return {
+                X: pos.x,
+                Y: pos.y
+            }
+        });
+        this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
+        this.data.Properties.font =  this.font.size;
+        this.data.Properties.color =  this.color;
+        return this.data;
+    }
+
+} // Class SZoneLegendItem

+ 2 - 0
src/lib/types/Legend.ts

@@ -58,4 +58,6 @@ export interface Legend {
     OutLine?: Point[];
     /** 由应用自己定义  */
     Properties?: any;
+     /** zone 区分防火分区和石材铺装  */
+    SubType?:string
 } // Interface Legend

+ 286 - 86
src/views/drafts.vue

@@ -3,12 +3,15 @@
     <div class="tit">草稿箱</div>
     <div class="conent">
       <div class="left-nav">
-        <Tree :data="treeData" @change="change"></Tree>
+<!--        <Tree :data="treeData" @change="change"></Tree>-->
+        <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+
       </div>
       <div class="conent-right">
         <div class="conent-tit">
           <div class="tit-left">消防系统-4F</div>
           <div class="tit-right">
+            <a-button>删除</a-button>
             <a-button>发布</a-button>
             <a-button type="primary">编辑</a-button>
           </div>
@@ -16,19 +19,31 @@
         <div class="concent-bottom">
           <div class="map">
             <div class="legend-btn" @click="legend = !legend">
-              <a-icon type="right"  style="color: #8D9399;font-size: 10px"/>
+              <a-icon type="right" style="color: #8D9399;font-size: 10px" />
+            </div>
+            <div class="canvas-container">
+              <div id="fengMap"></div>
+              <canvas
+                id="canvas"
+                :width="canvasWidth"
+                :height="canvasHeight"
+                ref="canvas"
+                tabindex="0"
+              ></canvas>
             </div>
           </div>
           <div class="legend" v-if="legend">
-            <div style="font-size:14px;color: #1F2429;padding-left: 12px;height: 40px;line-height: 40px">可能需要补充的图例</div>
+            <div
+              style="font-size:14px;color: #1F2429;padding-left: 12px;height: 40px;line-height: 40px"
+            >可能需要补充的图例</div>
             <a-table :columns="columns" :data-source="data" size="middle" :pagination="false">
-              <a-table-column key="name" title="state" data-index="state">
-                <template slot-scope="text, record">
-                  <div style="border:1px solid red;width: 20px;height: 20px;">{{text}}</div>
-                </template>
-              </a-table-column>
-              <template v-slot:state>
-              </template>
+              <img
+                style="width:10px;heigth:10px"
+                slot="img"
+                slot-scope="text, record"
+                :src="require('@/assets/images/'+record.img+'.png')"
+              />
+              <template v-slot:state></template>
             </a-table>
           </div>
         </div>
@@ -37,97 +52,261 @@
   </div>
 </template>
 <script>
-const dataArr = [
-  {
-    id: "0",
-    name: "顶级顶级顶级顶级顶级顶级顶级顶级顶级顶级顶级顶级",
-    open: false,
-    checked: "uncheck",
-    children: [
-      {
-        id: "1",
-        name: "一级1",
-        open: false,
-        checked: "uncheck",
-        children: [
-          { id: "12", name: "二级2", checked: "uncheck" },
-          { id: "121", name: "二级3", checked: "uncheck" },
-          { id: "122", name: "二级4", checked: "uncheck" },
-          {
-            id: "1321",
-            name: "二级1",
-            open: false,
-            checked: "uncheck",
-            children: [
-              { id: "13", name: "三级2", checked: "uncheck" },
-              { id: "131", name: "三级3", checked: "uncheck" },
-              { id: "132", name: "三级4", checked: "uncheck" }
-            ]
-          }
-        ]
-      },
-      {
-        id: "2",
-        name: "一级2",
-        open: false,
-        checked: "uncheck",
-        children: [
-          { id: "222", name: "二级2", checked: "uncheck" },
-          { id: "2221", name: "二级1", checked: "uncheck" },
-          { id: "2222", name: "二级3", checked: "uncheck" }
-        ]
-      },
-      {
-        id: "3",
-        name: "一级3",
-        open: false,
-        checked: "uncheck",
-        children: [
-          { id: "322", name: "二级2", checked: "uncheck" },
-          { id: "3220", name: "二级0", checked: "uncheck" },
-          { id: "3221", name: "二级1", checked: "uncheck" }
-        ]
-      }
-    ],
-  }
-];
 import Tree from "./../components/Tree/Tree.vue";
+import { SFengParser } from "@saga-web/feng-map";
+import { SFloorParser } from "@saga-web/big";
+import { FloorView } from "./../lib/FloorView";
+import { EditScence } from "@/components/mapClass/EditScence";
+import bus from "@/bus";
+import { saveGroup, readGroup,queryDraftGroup,queryStatistic } from "@/api/editer.js";
+import { STopologyParser } from "./../lib/parsers/STopologyParser";
+import { uuid } from "@/components/mapClass/until";
+import { SImageItem } from "@saga-web/graph/lib";
+import store from "../store";
+let fengmap = null;
 export default {
   components: { Tree },
   data() {
     return {
-      treeData:JSON.parse(JSON.stringify(dataArr)),
-      columns:[
+      treeData: [],
+      columns: [
         {
           title: "名称", // 列的名称
           dataIndex: "name", // 列的标识
-        },{
-          title: "图例", // 列的名称
-          dataIndex: "state", // 列的标识
+          scopedSlots: { customRender: "name" }
         },
+        {
+          title: "图例", // 列的名称
+          dataIndex: "img", // 列的标识
+          scopedSlots: { customRender: "img" }
+        }
       ],
       data: [
         {
           key: "1",
           name: "客梯",
-          state:''
+          img: "shubiao"
         },
         {
           key: "2",
           name: "防火分区",
-          state:''
+          img: "shubiao"
         },
         {
           key: "3",
           name: "消防泵室",
-          state:'1'
-        },
+          img: "shubiao"
+        }
       ],
-      legend:false
+      legend: false,
+      canvasWidth: 700,
+      canvasHeight: 800,
+      view: null,
+      urlMsg: null,
+      floorList: {},
+      mapServerURL: "/wdfn",
+      key: "23f30a832a862c58637a4aadbf50a566",
+      appName: "万达可视化系统",
+      defaultProps: {
+        children: 'Category',
+        label: 'Name'
+      }
     };
   },
   methods: {
-    change() {}
+    handleNodeClick(data) {
+      console.log(data);
+    },
+    init() {
+      console.log(this.urlMsg);
+      // const loadings = this.$loading({type: 'global'});
+      document.getElementById(`canvas`).focus();
+      this.clearGraphy();
+      this.scene = new EditScence();
+      fengmap = new SFengParser(
+        "fengMap",
+        this.mapServerURL + "/fmap/" + this.urlMsg.fmapID,
+        this.key,
+        this.appName,
+        null
+      );
+      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);
+          });
+        this.view.fitSceneToView();
+      });
+    },
+    clearGraphy() {
+      if (this.view) {
+        this.view.scene = null;
+        return;
+      }
+      this.view = new FloorView("canvas");
+      document.getElementById("canvas").focus();
+    },
+    parserData(floor) {
+      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;
+        }
+      } else {
+        if (this.floorList[floor]) {
+          fengmap.parseData(this.floorList[floor], res => {
+            if (res.err) {
+              console.log(res.err);
+              return;
+            }
+            this.fParser = new SFloorParser(null);
+            this.fParser.parseData(res);
+            this.fParser.spaceList.forEach(t => {
+              t.selectable = true;
+              this.scene.addItem(t);
+            });
+            this.fParser.wallList.forEach(t => this.scene.addItem(t));
+            this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
+            this.fParser.doorList.forEach(t => this.scene.addItem(t));
+            this.fParser.columnList.forEach(t => this.scene.addItem(t));
+            this.fParser.casementList.forEach(t => this.scene.addItem(t));
+            this.view.scene = this.scene;
+            this.view.fitSceneToView();
+            this.loading = false;
+            this.isQuerying = false;
+            console.log("success");
+          });
+        } else {
+          console.log("楼层不正确");
+        }
+      }
+    },
+    getTreeData(){
+      queryDraftGroup({projectId:'1000423'}).then(res=>{
+        console.log(res);
+      })
+      let res = {
+                "Data": [
+                  {
+                    "Category": [
+                      {
+                        "Code": "F6",
+                        "Gcode": "6F",
+                        "Gname": "f6",
+                        "Name": "第6层"
+                      }
+                    ],
+                    "Id": "LCGN",
+                    "Name": "楼层功能"
+                  },
+                  {
+                    "Category": [
+                      {
+                        "Category": [
+                          {
+                            "Code": "F1",
+                            "Gcode": "1F",
+                            "Gname": "f1",
+                            "Name": "第1层"
+                          }
+                        ],
+                        "Id": "GDXT",
+                        "Name": "供电系统"
+                      },
+                      {
+                        "Category": [],
+                        "Id": "NTXT",
+                        "Name": "暖通系统"
+                      },
+                      {
+                        "Category": [],
+                        "Id": "XFXT",
+                        "Name": "消防系统"
+                      },
+                      {
+                        "Category": [],
+                        "Id": "RDXT",
+                        "Name": "弱电系统"
+                      },
+                      {
+                        "Category": [],
+                        "Id": "JPSXT",
+                        "Name": "给排水系统"
+                      },
+                      {
+                        "Category": [],
+                        "Id": "DTXT",
+                        "Name": "电梯系统"
+                      },
+                      {
+                        "Category": [],
+                        "Id": "RQXT",
+                        "Name": "燃气系统"
+                      }
+                    ],
+                    "Id": "LCFB",
+                    "Name": "楼层分布"
+                  },
+                  {
+                    "Category": [],
+                    "Id": "SCPZ",
+                    "Name": "石材铺装(土建装饰)"
+                  },
+                  {
+                    "Category": [
+                      {
+                        "Category": [],
+                        "Id": "FZQZL",
+                        "Name": "分支器支路分布图(暖通系统)"
+                      },
+                      {
+                        "Category": [],
+                        "Id": "XFBFYCFL",
+                        "Name": "消防泵房引出管路分布图(消防系统)"
+                      }
+                    ],
+                    "Id": "XTYLT",
+                    "Name": "系统原理图"
+                  }
+                ],
+                "Message": "",
+                "Result": "success"
+              };
+      this.treeData = res.Data;
+    },
+    getLegend(){
+      queryStatistic({}).then(res=>{
+
+      })
+    }
+  },
+  mounted() {
+    this.getTreeData();
+    // this.canvasWidth = this.$refs.graphy.offsetWidth;
+    // this.canvasHeight = this.$refs.graphy.offsetHeight - 10;
+    this.urlMsg = {
+      categoryId: "SCPZ",
+      projectId: "1000423",
+      BuildingID: "1",
+      FloorID: "f1",
+      fmapID: "1000423_120"
+    };
+    this.init();
   }
 };
 </script>
@@ -156,7 +335,18 @@ export default {
     .left-nav {
       width: 224px;
       height: 100%;
+      overflow-y: scroll;
       padding: 0 12px;
+      /deep/ .el-tree{
+        background: #F7F9FA;
+        .el-tree-node__content{
+          height: 38px;
+        }
+        /deep/.el-tree-node:focus >.el-tree-node__content {
+          background-color: #E1F2FF!important;
+          color: #0091FF!important;
+        }
+      }
     }
     .conent-right {
       flex: 1;
@@ -177,40 +367,50 @@ export default {
           color: rgba(31, 35, 41, 1);
         }
         .tit-right {
-          width: 146px;
+          width: 246px;
           display: flex;
           justify-content: space-between;
         }
       }
-      .concent-bottom{
+      .concent-bottom {
         height: calc(100% - 61px);
         display: flex;
         .map {
           flex: 1;
           position: relative;
+        height: 100%;
           /*height: calc(100% - 61px);*/
           /*background: red;*/
-          .legend-btn{
+          .legend-btn {
             position: absolute;
             right: 0;
-            top:9px;
-            width:10px;
-            height:24px;
-            background:rgba(228,229,231,1);
+            top: 9px;
+            width: 10px;
+            height: 24px;
+            background: rgba(228, 229, 231, 1);
             display: flex;
             justify-content: center;
             align-items: center;
             cursor: pointer;
           }
         }
-        .legend{
+        .legend {
           width: 200px;
-          border-left: 1px solid #EFF0F1;
-          height:100%;
+          border-left: 1px solid #eff0f1;
+          height: 100%;
         }
       }
-
     }
   }
 }
+#fengMap {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.canvas-container {
+  width: 100%;
+  height: 100%;
+}
 </style>

+ 1 - 1
vue.config.js

@@ -15,7 +15,7 @@ module.exports = {
             },
             "/serve": {
                 target: 'http://192.168.200.87:8088/',
-                //  target: 'http://192.168.200.83:8085/',
+                // target: 'http://192.168.200.83:8085/',
                 changeOrigin: true,
                 secure: false,
                 pathRewrite: {