Forráskód Böngészése

调试系统集成成果管理辅助屏

zhangyu 5 éve
szülő
commit
006395a096

+ 0 - 4
src/components/screen/integrateresults/exampleList.vue

@@ -16,13 +16,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import { getTabFunNumObjInstance } from '@/api/scan/request'
 
 export default {
-  computed: {
-    ...mapGetters('layout', ['userInfo', 'projectId', 'projects', 'userId'])
-  },
   props: {
     queryParams: {
       type: Object

+ 0 - 4
src/components/screen/integrateresults/realtimeData.vue

@@ -7,13 +7,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import { getTabFunNumOverview } from '@/api/scan/request'
 
 export default {
-  computed: {
-    ...mapGetters('layout', ['userInfo', 'projectId', 'projects', 'userId'])
-  },
   props: {
     queryParams: {
       type: Object

+ 171 - 18
src/views/screen/splitscreen/integrateresults/index.vue

@@ -2,7 +2,7 @@
  * @Author: zhangyu
  * @Date: 2019-11-13 17:00:59
  * @Info: 系统集成成果辅助屏
- * @LastEditTime: 2019-11-18 16:49:55
+ * @LastEditTime: 2019-11-18 18:50:07
  -->
 <template>
   <div>
@@ -21,9 +21,12 @@
           <example-list :queryParams="queryParams" @changeExample="handleChangeExample"></example-list>
         </div>
       </div>
-      <div class="content-right">
-        <canvas v-if="drawCanvas" height="100%" :width="canvasWidth" class="instanceMap" :id="form.instanceId" :k="refreshCanvas"></canvas>
-        <div class="no-data" v-else>
+      <div class="content-right" id="cadBox" v-loading="loading">
+        <canvas v-show="drawCanvas" :height="cadHeight" :width="cadWidth" id="exampleCanvas" :k="refreshCanvas"></canvas>
+        <div v-show="drawCanvas" class="operate">
+          <canvasFun @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @scale="scale" @saveJson="saveJson" :config="config" ref="canvasFun"></canvasFun>
+        </div>
+        <div class="no-data" v-show="!drawCanvas">
           <div class="position-icon">
             <i class="icon-wushuju iconfont"></i>
             数据暂无
@@ -35,37 +38,178 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import realtimeData from '@/components/screen/integrateresults/realtimeData'
-import exampleList from '@/components/screen/integrateresults/exampleList'
+import { SGraphyView } from "@saga-web/graphy/lib";
+import { LocationPointScene, DivideFloorScene } from "@saga-web/cad-engine";
+import { SColor } from "@saga-web/draw/lib";
+import { queryEquip, floorQuery, queryZone } from '@/api/scan/request';
+//组件
+import realtimeData from '@/components/screen/integrateresults/realtimeData';
+import exampleList from '@/components/screen/integrateresults/exampleList';
+import canvasFun from "@/components/business_space/newGraphy/canvasFun";
 
 export default {
   components: {
     realtimeData,
-    exampleList
-  },
-  computed: {
-    ...mapGetters('layout', ['userInfo', 'projectId', 'projects', 'userId'])
-  },
-  created() {
-    
+    exampleList,
+    canvasFun
   },
   mounted() {
-
+    this.cadWidth = document.getElementById('cadBox').offsetWidth;
+    this.cadHeight = document.getElementById('cadBox').offsetHeight;
   },
   data() {
     return {
-      queryParams: this.$route.query
+      queryParams: this.$route.query,
+      loading: false,
+      cadWidth: 800,
+      cadHeight: 600,
+      views: null,//canvas view
+      scenes: null,//canvas scene
+      refreshCanvas: '',//重载canvas组件
+      drawCanvas: false,//是否画canvas,
+      ObjectLocalName: '',//对象名称
+      config: {
+        isEdit: false
+      },
     }
   },
   methods:{
     handleChangeExample(example) {
-      console.log(example)
+      //存在实例ID
+      if (example.ObjectID) {
+        this.ObjectLocalName = example.ObjectLocalName;
+        if (example.TypeCode == 'Eq' || example.TypeCode == 'Ec') {//设备或者组件
+          let pa = {
+            Filters: `EquipID='${example.TypeCode + localStorage.getItem('projectId').substring(2) + example.ObjectID}'`
+          }
+          //获取设备信息
+          queryEquip(pa, equipMsg => {
+            if (equipMsg.Content[0] && equipMsg.Content[0].LocationJson && equipMsg.Content[0].FloorId) {
+              let canvasOption = {
+                /** 标记的id  */
+                Id: equipMsg.Content[0].EquipID,
+                /** 标记的名称  */
+                Name: equipMsg.Content[0].EquipName,
+                /** X坐标 */
+                X: equipMsg.Content[0].LocationJson.X,
+                /** Y坐标 */
+                Y: -equipMsg.Content[0].LocationJson.Y
+              }
+              this.loadDataToInstanceByFloorID(equipMsg.Content[0].FloorId, example.TypeCode, canvasOption);
+            }
+          })
+        } else if (example.TypeCode == 'Sp') {//空间
+          let pa = {
+            data: {
+              Filters: `RoomID='${example.TypeCode + localStorage.getItem('projectId').substring(2) + example.ObjectID}'`
+            },
+            zone: example.SubTypeCode
+          }
+          //获取空间信息
+          queryZone(pa, zoneMsg => {
+            if (zoneMsg.Content[0] && zoneMsg.Content[0].Outline) {
+              let canvasOption = {
+                RoomLocalName: zoneMsg.Content[0].RoomLocalName,
+                OutLine: zoneMsg.Content[0].Outline,
+                RoomID: zoneMsg.Content[0].RoomID,
+                Color: new SColor('#F9C3C3')
+              }
+              this.loadDataToInstanceByFloorID(zoneMsg.Content[0].FloorId, example.TypeCode, canvasOption);
+            }
+          });
+        }
+      }
+    },
+    //通过floorid获取信息,后通过floormap获取数据后绘制canvas
+    loadDataToInstanceByFloorID(floorId, typecode, options) {
+      let param = {
+        Filters: `FloorId='${floorId}'`
+      }
+      //获取楼层信息
+      floorQuery(param, floorMsg => {
+        //刷新canvas
+        this.refreshCanvas = new Date().getTime();
+        if (!this.views) {
+          this.views = new SGraphyView('exampleCanvas')
+        }
+        this.views.scene = null;
+        this.scenes = null;
+        //类型
+        if (typecode == 'Eq' || typecode == 'Ec') {
+          this.scenes = new LocationPointScene();
+        }
+        else if (typecode == 'Sp') {
+          this.scenes = new DivideFloorScene();
+        }
+        if (floorMsg.Content[0] && floorMsg.Content[0].StructureInfo && floorMsg.Content[0].StructureInfo.FloorMap) {
+          this.loading = true;
+          //获取数据,并加载canvas
+          this.scenes.loadUrl(`/image-service/common/file_get?systemId=revit&key=${floorMsg.Content[0].StructureInfo.FloorMap}`).then(() => {
+            this.drawCanvas = true;
+            this.loading = false;
+            this.views.scene = this.scenes;
+            this.scenes.isSpaceSelectable = false;
+            if (typecode == 'Eq' || typecode == 'Ec') {
+              this.scenes.addMarker(options);
+            }
+            else if (typecode == 'Sp') {
+              this.scenes.addZone(options);
+            }
+            this.views.fitSceneToView();
+            if (this.$refs.canvasFun) {
+              this.views.maxScale = this.views.scale * 10;
+              this.views.minScale = this.views.scale;
+              this.$refs.canvasFun.everyScale = this.views.scale;
+            }
+          })
+        }
+        else{
+          this.loading = false;
+          this.drawCanvas = false;
+        }
+      });
+    },
+    // canvas 获取焦点
+    focus() {
+      document.getElementById('cadBox').focus()
+    },
+    // 工具栏操作
+    // 适配底图到窗口
+    fit() {
+      this.views.fitSceneToView()
+    },
+    // 保存为png
+    savePng() {
+      this.views.saveImage(`${this.ObjectLocalName}.png`, 'png');
+    },
+    // 保存为svg
+    saveSvg() {
+      this.views.saveSceneSvg(`${this.ObjectLocalName}.svg`, 6400, 4800);
+    },
+    saveJson() {
+      this.views.saveFloorJson(`${this.ObjectLocalName}.json`)
+    },
+    // 缩放
+    scale(val) {
+      if (!this.views) {
+        return;
+      }
+      let scale = this.views.scale;
+      this.views.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2);
     }
   },
   watch: {
     $route(to,from){
-      this.queryParams = this.$route.query
+      this.queryParams = this.$route.query;
+      this.ObjectLocalName = '';
+      this.drawCanvas = false;
+    },
+    "views.scale": {
+      handler(n) {
+        if (this.$refs.canvasFun) {
+          this.$refs.canvasFun.sliderVal = n * 10 / this.views.minScale;
+        }
+      }
     }
   },
 }
@@ -111,6 +255,15 @@ $borderColor: rgba(201, 201, 201, 1);
     flex-grow: 1;
     flex-shrink: 1;
     border: 1px solid $borderColor;
+    overflow: hidden;
+    position: relative;
+    .operate {
+      position: absolute;
+      left: 50%;
+      bottom: 20px;
+      transform: translateX(-50%);
+      z-index: 99;
+    }
     .no-data{
       height: 100%;
       text-align: center;