瀏覽代碼

调试样式

YaolongHan 4 年之前
父節點
當前提交
0bfa38c293

二進制
src/assets/images/t-bottom-d.png


二進制
src/assets/images/t-bottom.png


二進制
src/assets/images/t-center-d.png


二進制
src/assets/images/t-center.png


二進制
src/assets/images/t-format.png


二進制
src/assets/images/t-left-d.png


二進制
src/assets/images/t-left.png


二進制
src/assets/images/t-level-d.png


二進制
src/assets/images/t-level.png


二進制
src/assets/images/t-lock.png


二進制
src/assets/images/t-right-d.png


二進制
src/assets/images/t-right.png


二進制
src/assets/images/t-save.png


二進制
src/assets/images/t-top-d.png


二進制
src/assets/images/t-top.png


二進制
src/assets/images/t-topandbottm-d.png


二進制
src/assets/images/t-topandbottm.png


二進制
src/assets/images/t-vertical-d.png


二進制
src/assets/images/t-vertical.png


二進制
src/assets/images/放大 amplification.png


二進制
src/assets/images/缩小.png


+ 23 - 18
src/components/baseEditer.vue

@@ -1,46 +1,50 @@
 <template>
   <div id="baseEditer">
-    <a-button type="primary" @click="init" style="position:absolute"> Primary </a-button>
+    <a-button type="primary" @click="init" style="position:absolute">Primary</a-button>
     <div id="fengMap"></div>
-
     <div class="canvas-container" ref="graphy">
       <canvas id="canvas" :width="canvasWidth" :height="canvasHeight"></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',
+      fmapID: "1001724_29",
       fmap: null,
-      canvasWidth: 800,
+      canvasWidth: 700,
       canvasHeight: 800,
       fParser: null
     };
   },
   mounted() {
     this.canvasWidth = this.$refs.graphy.offsetWidth;
-    console.log(this.$refs.graphy.offsetWidth)
+    console.log(this.$refs.graphy.offsetWidth);
     this.canvasHeight = this.$refs.graphy.offsetHeight;
   },
   methods: {
     init() {
-      this.clearGraphy()
-      this.scene = new SGraphyScene()
-      this.fmap = new SFengParser('fengMap', this.mapServerURL, this.key, this.appName, null)
+      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.fmap.parseData("1001724_29", 1, res => {
+        console.log(res);
         this.fParser = new SFloorParser(null);
-        console.log(this.fParser)
+        console.log(this.fParser);
         this.fParser.parseData(res);
         this.fParser.spaceList.forEach(t => this.scene.addItem(t));
         this.fParser.wallList.forEach(t => this.scene.addItem(t));
@@ -50,7 +54,7 @@ export default {
         this.fParser.casementList.forEach(t => this.scene.addItem(t));
         this.view.scene = this.scene;
         this.view.fitSceneToView();
-      })
+      });
     },
     clearGraphy() {
       if (this.view) {
@@ -59,15 +63,16 @@ export default {
       }
       this.view = new SGraphyView("canvas");
     },
-    changeFloor() { }
+    changeFloor() {}
   }
-}
+};
 </script>
 <style lang="less" scoped>
 #baseEditer {
   background: #ccc;
   width: 100%;
   height: 100%;
+  // position: relative;
   #fengMap {
     position: absolute;
     width: 100px;

+ 133 - 6
src/components/edit/right_toolbar.vue

@@ -5,11 +5,25 @@
       <a-tab-pane key="1" tab="属性">
         <div class="property">
           <ul class="formatting">
-            <li v-for="i in 6" :key="i">a</li>
+            <li v-for="(item,key) in poistionList" :key="key">
+              <img
+                v-show="!item.disable"
+                :src="require(`./../../assets/images/${item.img}.png`)"
+                alt
+              />
+              <img
+                v-show="item.disable"
+                :src="require(`./../../assets/images/${item.disableImg}.png`)"
+                alt
+              />
+            </li>
           </ul>
           <ul class="position">
-            <li v-for="i in 5" :key="i">
-              <a-input size="small" placeholder suffix="x" />
+            <li v-for="(item,i) in msgList" :key="i">
+              <a-input :disabled="item.disable" size="small" v-model="item.msg" placeholder :suffix="item.unit" />
+            </li>
+            <li>
+              <img class="lock" :src="require(`./../../assets/images/t-lock.png`)" alt />
             </li>
           </ul>
         </div>
@@ -17,16 +31,106 @@
       <a-tab-pane key="2" tab="元素" force-render>
         <div class="element">
           <a-input-search placeholder="input search text" @search="onSearch" />
-          <ul class="element-"></ul>
+          <ul class="element-list">
+            <li>
+              <a-icon type="play-circle" />
+              <span>电梯系统</span>
+            </li>
+          </ul>
         </div>
       </a-tab-pane>
     </a-tabs>
   </div>
 </template>
 <script>
+const poistionList = [
+  {
+    name: "水平调整",
+    disable: false,
+    img: "t-level",
+    disableImg: "t-level-d"
+  },
+  {
+    name: "垂直调整",
+    disable: true,
+    img: "t-vertical",
+    disableImg: "t-vertical-d"
+  },
+  {
+    name: "居左调整",
+    disable: false,
+    img: "t-left",
+    disableImg: "t-left-d"
+  },
+  {
+    name: "居中调整",
+    disable: false,
+    img: "t-center",
+    disableImg: "t-center-d"
+  },
+  {
+    name: "居右调整",
+    disable: false,
+    img: "t-right",
+    disableImg: "t-right-d"
+  },
+  {
+    name: "居上调整",
+    disable: false,
+    img: "t-top",
+    disableImg: "t-top-d"
+  },
+  {
+    name: "上下居中调整",
+    disable: false,
+    img: "t-topandbottm",
+    disableImg: "t-topandbottm-d"
+  },
+  {
+    name: "居下调整",
+    disable: false,
+    img: "t-bottom",
+    disableImg: "t-bottom-d"
+  }
+];
+const msgList = [
+  {
+    msg: "",
+    disable: false,
+    name: "",
+    unit: "x"
+  },
+  {
+    msg: "",
+    disable: false,
+    name: "",
+    unit: "y"
+  },
+  {
+    msg: "",
+    disable: true,
+    name: "",
+    unit: ""
+  },
+  {
+    msg: "",
+    disable: false,
+    name: "",
+    unit: "w"
+  },
+  {
+    msg: "",
+    disable: false,
+    name: "",
+    unit: "h"
+  }
+];
 export default {
   data() {
-    return {};
+    return {
+      poistionList,
+      msgList
+    };
   },
   methods: {
     callback(key) {
@@ -59,8 +163,11 @@ li {
       li {
         width: 16px;
         height: 16px;
-        background: red;
         cursor: pointer;
+        img {
+          width: 16px;
+          height: 16px;
+        }
       }
     }
     .position {
@@ -73,11 +180,31 @@ li {
         margin-top: 10px;
         width: 30%;
         margin-right: 8px;
+        .lock {
+          width: 16px;
+          height: 16px;
+          cursor: pointer;
+        }
       }
     }
   }
   .element {
     margin: 0 12px 0 12px;
+    .element-list {
+      padding-top: 12px;
+      box-sizing: border-box;
+      li {
+        width: 100%;
+        height: 38px;
+        line-height: 38px;
+        padding-left: 12px;
+        box-sizing: border-box;
+        color: #1f2429;
+        &:hover {
+          background: #f5f6f7;
+        }
+      }
+    }
   }
 }
 </style>

+ 21 - 10
src/components/edit/top_toolbar.vue

@@ -7,23 +7,23 @@
     <div class="tool">
       <ul>
         <li>
-          <a-icon type="edit" />
+          <img class="lock" :src="require(`./../../assets/images/t-save.png`)" alt />
           <span>保存</span>
         </li>
-        <li>
+        <!-- <li>
           <a-icon type="edit" />
           <span>撤销</span>
-        </li>
-        <li>
+        </li> -->
+        <!-- <li>
           <a-icon type="edit" />
           <span>重做</span>
-        </li>
+        </li> -->
         <li>缩放窗口</li>
         <li>
-          <a-icon type="edit" />
+          <img class="lock" :src="require(`./../../assets/images/t-lock.png`)" alt />
           <span>对齐</span>
         </li>
-        <li>
+        <!-- <li>
           <a-icon type="edit" />
           <span>图层</span>
         </li>
@@ -34,15 +34,15 @@
         <li>
           <a-icon type="edit" />
           <span>打散</span>
-        </li>
+        </li> -->
         <li>
           <a-icon type="edit" />
           <span>锁定</span>
         </li>
-        <li>
+        <!-- <li>
           <a-icon type="edit" />
           <span>解锁</span>
-        </li>
+        </li> -->
       </ul>
     </div>
     <div class="btn-list">
@@ -57,6 +57,13 @@
     </div>
   </div>
 </template>
+<script>
+export default {
+  data() {
+    return {};
+  }
+};
+</script>
 <style lang="less" scoped>
 ul,
 li {
@@ -91,6 +98,10 @@ li {
         align-items: center;
         text-align: center;
         cursor: pointer;
+        img{
+          width: 16px;
+          height: 16px;
+        }
       }
     }
   }

+ 1 - 0
src/views/editer.vue

@@ -53,6 +53,7 @@ export default {
     position: relative;
     .baseEdit {
       flex: 1;
+      // position: relative;
     }
     .right_toolbar {
       height: 100%;