zhulizhen1111 4 years ago
parent
commit
d440de352f

+ 48 - 54
src/components/floorMap/floorBase.vue

@@ -1,23 +1,23 @@
 <!-- 底图 -->
 <template>
     <div id='floor_base'>
-        <div id="fengMap"></div>
-        <div class="canvas-container" ref="graphy">
-            <canvas id="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
+        <div id='fengMap'></div>
+        <div class='canvas-container' ref='graphy'>
+            <canvas id='canvas' :width='canvasWidth' :height='canvasHeight' tabindex='0'></canvas>
         </div>
     </div>
 </template>
 <script>
-import { SFengParser } from "@saga-web/feng-map";
-import { SFloorParser } from "@saga-web/big";
-import { SGraphyView, SGraphyScene } from "@saga-web/graphy/lib";
+import { SFengParser } from '@saga-web/feng-map'
+import { SFloorParser } from '@saga-web/big'
+import { SGraphyView, SGraphyScene } from '@saga-web/graphy/lib'
 export default {
     data() {
         return {
-            appName: "万达可视化系统",
-            key: "23f30a832a862c58637a4aadbf50a566",
-            mapServerURL: "/wanda",
-            fmapID: "1001724_29",
+            appName: '万达可视化系统',
+            key: '23f30a832a862c58637a4aadbf50a566',
+            mapServerURL: '/wanda',
+            fmapID: '1001724_29',
             fmap: null,
             canvasWidth: 700,
             canvasHeight: 800,
@@ -26,59 +26,53 @@ export default {
     },
     methods: {
         init() {
-            this.clearGraphy();
-            this.scene = new SGraphyScene();
-            this.fmap = new SFengParser(
-                "fengMap",
-                this.mapServerURL,
-                this.key,
-                this.appName,
-                null
-            );
-            console.log(this.fmap);
-            this.fmap.parseData("1001724_29", 1, res => {
-                console.log(res);
-                this.fParser = new SFloorParser(null);
-                console.log(this.fParser);
-                this.fParser.parseData(res);
+            this.clearGraphy()
+            this.scene = new SGraphyScene()
+            this.fmap = new SFengParser('fengMap', this.mapServerURL, this.key, this.appName, null)
+            console.log(this.fmap)
+            this.fmap.parseData('1001724_29', 1, res => {
+                console.log(res)
+                this.fParser = new SFloorParser(null)
+                console.log(this.fParser)
+                this.fParser.parseData(res)
                 this.fParser.spaceList.forEach(t => {
-                t.connect('click', this, this.spaceClick)
-                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();
-            });
+                    t.connect('click', this, this.spaceClick)
+                    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()
+            })
         },
         clearGraphy() {
             if (this.view) {
-                this.view.scene = null;
-                return;
+                this.view.scene = null
+                return
             }
-            this.view = new SGraphyView("canvas");
-        },
+            this.view = new SGraphyView('canvas')
+        }
     },
     mounted() {
-        this.canvasWidth = this.$refs.graphy.offsetWidth;
-        this.canvasHeight = this.$refs.graphy.offsetHeight;
-    },
+        this.canvasWidth = this.$refs.graphy.offsetWidth
+        this.canvasHeight = this.$refs.graphy.offsetHeight
+    }
 }
 </script>
 <style lang="less" scoped>
-    #floor_base{
-        #fengMap {
-            position: absolute;
-            width: 100px;
-            height: 100px;
-            z-index: -1;
-        }
-        .canvas-container {
-            width: 100%;
-            height: 100%;
-        }
+#floor_base {
+    #fengMap {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+        z-index: -1;
     }
+    .canvas-container {
+        width: 100%;
+        height: 100%;
+    }
+}
 </style>

+ 4 - 1
src/views/equipment/bottomLayer.vue

@@ -2,6 +2,9 @@
 <template>
     <div class='bottom-layer'>
         <span class='icon-style'>
+            <a-icon type='arrow-down' />
+        </span>
+        <span class='icon-style'>
             <a-icon type='poweroff' />
         </span>
         <span class='icon-style'>
@@ -33,7 +36,7 @@ export default {}
     bottom: 40px;
     z-index: 2;
     background: #ffffff;
-    left: 30%;
+    left: 483px;
     display: flex;
     .icon-style {
         width: 40px;

+ 14 - 0
src/views/equipment/eqDialog.vue

@@ -54,6 +54,9 @@ export default {
 </style>
 <style lang="less">
 .dialog-container {
+    .el-dialog__header {
+        padding: 16px 24px;
+    }
     .el-dialog__title {
         font-size: 16px;
         font-family: PingFangSC-Medium, PingFang SC;
@@ -76,6 +79,9 @@ export default {
     .el-tabs--top .el-tabs__item.is-top:last-child {
         padding-right: 16px;
     }
+    .el-tabs__nav-wrap::after {
+        height: 0;
+    }
     .el-tabs__item {
         padding: 5px 16px;
         height: 30px;
@@ -85,5 +91,13 @@ export default {
         color: rgba(31, 36, 41, 1);
         border: 1px solid rgba(195, 199, 203, 1);
     }
+
+    .el-tabs__active-bar {
+        background-color: transparent !important;
+    }
+    .is-active {
+        color: #025baa;
+        border-color: #025baa;
+    }
 }
 </style>

+ 2 - 0
src/views/equipment/index.vue

@@ -75,6 +75,7 @@ export default {
     },
     mounted() {
         this.everySystem = this.system[0].children
+        this.$refs.floorMap.init()
     }
 }
 </script>
@@ -109,6 +110,7 @@ export default {
             padding-top: 100px;
             color: #646c73;
             font-size: 14px;
+            height: 100%;
             background: rgba(242, 245, 247, 1);
         }
         .li-style {

+ 3 - 1
src/views/floorFunc/index.vue

@@ -70,7 +70,9 @@ export default {
             this.$refs.pic.open()
         }
     },
-    mounted() {}
+    mounted() {
+        this.$refs.floorMap.init()
+    }
 }
 </script>
 <style lang="less">

+ 3 - 0
src/views/index.vue

@@ -51,5 +51,8 @@ export default {
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    canvas:focus {
+        outline: none;
+    }
 }
 </style>