瀏覽代碼

合并master

YaolongHan 4 年之前
父節點
當前提交
2f1b99d073

二進制
src/assets/images/t-slices-hover.png


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


+ 1 - 1
src/components/baseEditer.vue

@@ -1,4 +1,4 @@
-<template>
+left_toolbar<template>
   <div id="baseEditer">
     <div id="fengMap"></div>
     <div class="canvas-container" ref="graphy">

+ 36 - 31
src/components/baseEditerzy.vue

@@ -2,7 +2,7 @@
  * @Author: zhangyu
  * @Date: 2020-06-03 17:21:15
  * @Info: 
- * @LastEditTime: 2020-06-03 17:25:05
+ * @LastEditTime: 2020-06-03 18:32:53
 --> 
 <template>
   <div id="baseEditer">
@@ -14,11 +14,11 @@
 </template>
 <script>
 import { SFengParser } from "@saga-web/feng-map";
-import { SFloorParser, SImageItem,STextItem } from "@saga-web/big";
-// import { DirectRelationItem } from "@saga-web/topology/lib/items/DirectRelationItem.js";
-import { SGraphyView, SGraphyScene } from "@saga-web/graphy/lib";
+import { SPoint } from "@saga-web/draw/lib";
+import { SFloorParser, SImageItem, STextItem, SLineItem, SPolylineItem } from "@saga-web/big";
 import { SPolygonItem } from "./mapClass/SPolygonItem";
-import {FloorView} from "./../lib/FloorView"
+import { FloorView } from "./../lib/FloorView"
+import { FloorScene } from "./../lib/FloorScene"
 export default {
   data() {
     return {
@@ -29,7 +29,9 @@ export default {
       fmap: null,
       canvasWidth: 700,
       canvasHeight: 800,
-      fParser: null
+      fParser: null,
+      scene: null,
+      view: null
     };
   },
   mounted() {
@@ -41,7 +43,7 @@ export default {
     init() {
       document.getElementById(`canvas`).focus()
       this.clearGraphy();
-      this.scene = new SGraphyScene();
+      this.scene = new FloorScene();
       this.fmap = new SFengParser(
         "fengMap",
         this.mapServerURL,
@@ -50,19 +52,22 @@ export default {
         null
       );
       console.log(this.fmap);
-      this.fmap.parseData("1001724_29", 1, res => {
+      this.fmap.parseData("1001724_29", 6, res => {
         console.log(res);
         this.fParser = new SFloorParser(null);
         console.log(this.fParser);
         this.fParser.parseData(res);
-        this.fParser.spaceList.forEach(t => this.scene.addItem(t));
+        this.fParser.spaceList.forEach(t => {
+          t.connect('clicjnnmnk', 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.addPolyLine();
-        this.DirectRelationItem();
+        // this.addPolyLine();
+        // this.DirectRelationItem();
         this.view.scene = this.scene;
         this.view.fitSceneToView();
       });
@@ -78,21 +83,21 @@ export default {
         ]
       };
       const Polylines = new SPolygonItem(null);
-      Polylines.setStatus =2;
+      Polylines.setStatus = 2;
       this.scene.addItem(Polylines);
       this.scene.grabItem = Polylines;
     },
     // 引入折线
-    DirectRelationItem() {
-      const data = {
-        PointList: [
-          { X: -138.71000000089407, Y: -17.5 },
-          { X: -130.31000000052154, Y: -17.5 }
-        ]
-      };
-      const directRelationItem = new DirectRelationItem(null, data);
-      this.scene.addItem(directRelationItem);
-    },
+    // DirectRelationItem() {
+    //   const data = {
+    //     PointList: [
+    //       { X: -138.71000000089407, Y: -17.5 },
+    //       { X: -130.31000000052154, Y: -17.5 }
+    //     ]
+    //   };
+    //   const directRelationItem = new DirectRelationItem(null, data);
+    //   this.scene.addItem(directRelationItem);
+    // },
     clearGraphy() {
       if (this.view) {
         this.view.scene = null;
@@ -107,18 +112,19 @@ export default {
       //   Height: 32,
       //   Url: "https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=1569891320,3644984535&fm=85&app=52&f=JPEG?w=121&h=75&s=891B0FD8964406EF8091EA200300E056"
       // })
-      const item = new STextItem(null);
-      item.moveTo(event[0].x, event[0].y)
-      item.font.size = 12;
-      item.zOrder = 999;
-      item.connect('mousedown', this, this.iconClick)
-      this.scene.addItem(item)
-      setInterval(()=>{item.text+='魔'},1000)
+      // const item = new SImageItem(null);
+      // item.moveTo(event[0].x, event[0].y)
+      // item.url = 'https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=1569891320,3644984535&fm=85&app=52&f=JPEG?w=121&h=75&s=891B0FD8964406EF8091EA200300E056'
+      // item.font.size = 12;
+      // item.zOrder = 999;
+      // item.connect('mousedown', this, this.iconClick)
+      // this.scene.addItem(item)
+      // setInterval(() => { item.text += '魔' }, 1000)
     },
     iconClick(item, event) {
       console.log(2222222222222)
     },
-    changeFloor() { },
+    // changeFloor() { },
     changeStatus(name) {
       switch (name) {
         case '选择':
@@ -127,7 +133,6 @@ export default {
           break;
         case '画线':
           this.scene.isLining = true;
-          console.log('lining')
           break;
         case '画文字':
           this.scene.isTexting = true;

+ 189 - 0
src/components/edit/attr_select.vue

@@ -0,0 +1,189 @@
+<template>
+  <div>
+    <!--网格-->
+    <div class="attr-select" v-if="type==='网格'">
+      <section class="grid">
+        <a-checkbox @change="onChange">
+          网格
+        </a-checkbox>
+        <div class="grid-content">网格精度
+          <a-select default-value="10" style="width: 60%" @change="handleChange" :disabled="precision">
+            <a-select-option v-for="item in precisionList" :value="item.value" :key="item.value">
+              {{item.value}}
+            </a-select-option>
+          </a-select>
+        </div>
+      </section>
+    </div>
+    <!--文字内容-->
+    <div class="attr-select" v-if="type==='文字内容'">
+      <section class="grid">文字内容
+        <div class="grid-content">
+          <a-textarea placeholder="textarea with clear icon" allow-clear @change="changeTextArea" :rows="4"/>
+        </div>
+      </section>
+    </div>
+    <!--图片-->
+    <div class="attr-select" v-if="type==='图片'">
+      <section class="grid">图片
+        <div class="grid-content">
+          <a-upload-dragger
+              name="file"
+              :multiple="true"
+              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+              @change="changeImage"
+          >
+            <p class="icon-image">
+              <a-icon type="cloud-upload"/>
+            </p>
+            <p class="ant-upload-text">将图片拖动到这里替换 </p>
+            <p class="ant-upload-hint">本地上传</p>
+          </a-upload-dragger>
+        </div>
+      </section>
+    </div>
+    <!--外观-->
+    <div class="attr-select" v-if="type==='外观'">
+      <section class="grid">外观
+        <div class="grid-content">线宽
+          <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 168px"/>
+        </div>
+      </section>
+    </div>
+    <!--针对“设备/位置/管线/分区”属性示例-->
+    <div class="attr-select">
+      <section class="grid">
+        <span>名称显示</span>
+        <!--        v-if -> 编辑设备/区域/管道    -->
+        <a-button type="link" class="edit-option-btn">{{`编辑设备`}}</a-button>
+        <div class="grid-content">
+          <a-input/>
+        </div>
+        <div class="grid-content">字号
+          <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 168px"/>
+        </div>
+        <div class="grid-content" v-if="type ==='设备'">数量
+          <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 218px"/>
+        </div>
+        <div class="grid-content" v-if="type ==='管线'">线宽
+          <a-input-number v-model="numberValue" :min="1" @change="changeNumber" style="width: 218px"/>
+        </div>
+      </section>
+    </div>
+    <!--设备/工程信息化ID/工程信息化中的位置类型-->
+    <div class="attr-select">
+      <section class="grid">
+        <!--        v-if -> 设备/工程信息化ID/工程信息化中的位置类型    -->
+        <span>{{`设备`}}</span>
+        <a-button type="link" class="edit-option-btn">选择编辑</a-button>
+        <div class="grid-content">
+          <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD4</a-card>
+          <a-card class="attr-card">福建三明万达-供电系统-6楼-工程信息化中的区域编NDDKJD</a-card>
+        </div>
+      </section>
+    </div>
+    <!--    快捷操作提示-->
+    <div style="position: fixed;bottom: 0;width: 280px;">
+      <a-collapse :bordered="false" expand-icon-position="right">
+        <template #expandIcon="props">
+          <a-icon type="caret-up" :rotate="props.isActive ? 180 : 0"/>
+        </template>
+        <a-collapse-panel key="1" header="键盘操作提示" :style="customStyle">
+          <p v-for="item in keyboardOperation">{{item.value}}</p>
+        </a-collapse-panel>
+      </a-collapse>
+    </div>
+  </div>
+</template>
+
+<script>
+    export default {
+        name: "attr_select",
+        props: ['type'],
+        data() {
+            return {
+                precisionList: [
+                    {value: 10}, {value: 20}, {value: 30},
+                ],
+                precision: true,
+                numberValue: 4,
+                customStyle: 'background: #fff;overflow: hidden;  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);border:0',
+                keyboardOperation: [
+                    {value: '拖动画布:'}, {value: '加选对象:'}, {value: '确认操作:'}, {value: '取消对象:'},
+                ],
+
+
+            }
+        },
+        methods: {
+            onChange(e) {
+                this.precision = e.target.checked === true ? false : true
+            },
+            handleChange(value) {
+                console.log(`selected ${value}`);
+            },
+            changeNumber(value) {
+                console.log(value)
+            },
+            changeTextArea(value) {
+                console.log(value)
+
+            },
+            changeImage(info) {
+                const status = info.file.status;
+                if (status !== 'uploading') {
+                    console.log(info.file, info.fileList);
+                }
+                if (status === 'done') {
+                    this.$message.success(`${info.file.name} file uploaded successfully.`);
+                } else if (status === 'error') {
+                    this.$message.error(`${info.file.name} file upload failed.`);
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped lang="less">
+
+  .attr-select {
+    border-top: 1px solid #c3c7cb;
+    margin-top: 30px;
+
+    .grid {
+
+      margin: 10px 15px;
+    }
+
+    .grid-content {
+      margin-top: 10px;
+    }
+
+    .icon-image {
+      font-size: 25px;
+    }
+
+    .edit-option-btn {
+      float: right;
+      margin-top: -5px;
+    }
+
+    .attr-card {
+      width: 250px;
+      margin-bottom: 10px;
+      white-space: normal;
+      box-shadow: 0px 2px 6px 0px rgba(31, 36, 41, 0.05);
+      border-radius: 4px;
+    }
+
+    .ant-upload.ant-upload-drag p.ant-upload-text {
+      font-size: 14px;
+      color: #C3C7CB;
+    }
+
+    .ant-upload.ant-upload-drag p.ant-upload-hint {
+      color: #0091FF;
+    }
+
+  }
+</style>

+ 44 - 0
src/components/edit/edit-dialog.vue

@@ -0,0 +1,44 @@
+<template>
+  <a-modal v-model="visible" title="选择编辑" on-ok="handleOk">
+    <template slot="footer">
+      <a-button key="back" @click="handleCancel">
+        取消
+      </a-button>
+      <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
+        确认
+      </a-button>
+    </template>
+    <div></div>
+  </a-modal>
+</template>
+
+<script>
+    export default {
+        name: "edit-dialog",
+        data() {
+            return {
+                loading: false,
+                visible: false,
+            };
+        },
+        methods: {
+            showModal() {
+                this.visible = true;
+            },
+            handleOk(e) {
+                this.loading = true;
+                setTimeout(() => {
+                    this.visible = false;
+                    this.loading = false;
+                }, 3000);
+            },
+            handleCancel(e) {
+                this.visible = false;
+            },
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

+ 39 - 2
src/components/edit/left_toolbar.vue

@@ -24,12 +24,20 @@
       </li>
     </ul>
     <ul class="list-2">
+      <!-- v-on:mouseout="mouseoutActive(item)"
+        v-on:mouseover="mouseoverActive(item)"
+        v-for="(item,i) in systemChoice"
+        :key="i"
+        @click="showDrawer(item)"
+      >
+        <div class="item">
+          <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
+      <img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt />-->
       <li
         v-on:mouseout="mouseoutActive(item)"
         v-on:mouseover="mouseoverActive(item)"
         v-for="(item,i) in systemChoice"
         :key="i"
-        @click="showDrawer(item)"
       >
         <div class="item">
           <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
@@ -38,6 +46,22 @@
         </div>
       </li>
     </ul>
+    <!--    提取-->
+    <ul class="list-2 border-top">
+      <li
+        v-on:mouseout="mouseoutActive(item)"
+        v-on:mouseover="mouseoverActive(item)"
+        v-for="(item,i) in extractChoice"
+        :key="i"
+      >
+        <div class="item">
+          <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
+          <img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt />
+          <div>{{item.name}}</div>
+        </div>
+      </li>
+    </ul>
+
     <div class="bottom-item">
       <a-icon type="ellipsis" />
       <span>选择原件</span>
@@ -151,7 +175,16 @@ export default {
       ],
       visible: false,
       ele: false,
-      activeItem: 1
+      activeItem: 1,
+      //提取
+      extractChoice: [
+        {
+          img: "t-slices.png", //logo
+          hoverImg: "t-slices-hover.png", //hoverlogo
+          isHover: false, //是否hover
+          name: "提取" //类型
+        }
+      ]
     };
   },
   methods: {
@@ -212,6 +245,7 @@ export default {
   padding: 0 0 12px 0;
   box-sizing: border-box;
   position: relative;
+
   ul,
   li {
     padding: 0;
@@ -376,5 +410,8 @@ export default {
       }
     }
   }
+  .border-top {
+    border-top: 1px solid #c3c7cb;
+  }
 }
 </style>

+ 3 - 1
src/components/edit/right_toolbar.vue

@@ -32,6 +32,7 @@
               <img class="lock" :src="require(`./../../assets/images/t-lock.png`)" alt />
             </li>
           </ul>
+          <attrSelect/>
         </div>
       </a-tab-pane>
       <a-tab-pane key="2" tab="元素" force-render>
@@ -49,6 +50,7 @@
   </div>
 </template>
 <script>
+  import attrSelect from "@/components/edit/attr_select";
 const poistionList = [
   {
     name: "水平调整",
@@ -143,7 +145,7 @@ export default {
     }
   },
   components: {
-    // Select
+    attrSelect
   },
   data() {
     return {

+ 8 - 4
src/components/edit/top_toolbar.vue

@@ -39,6 +39,10 @@
           <a-icon type="edit" />
           <span>锁定</span>
         </li>
+        <li>
+          <a-icon type="delete" />
+          <span>删除</span>
+        </li>
         <!-- <li>
           <a-icon type="edit" />
           <span>解锁</span>
@@ -50,10 +54,10 @@
         <a-icon type="delete" />
         <span>发布</span>
       </div>
-      <div class="btn-list-item">
-        <a-icon type="delete" />
-        <span>下载</span>
-      </div>
+<!--      <div class="btn-list-item">-->
+<!--        <a-icon type="delete" />-->
+<!--        <span>下载</span>-->
+<!--      </div>-->
     </div>
   </div>
 </template>

+ 5 - 10
src/views/editer.vue

@@ -33,12 +33,6 @@ import rightToolbar from "@/components/edit/right_toolbar.vue";
 
 export default {
   name: "wandaEditer",
-  data() {
-    return {
-      cmd: 0, //命令操作
-      focusItemList: null
-    };
-  },
   components: {
     baseEditer,
     baseEditertest,
@@ -49,8 +43,8 @@ export default {
   },
   methods: {
     // 左侧工具栏 点击事件
-    toolActionClick(item) {
-      this.cmd = item.cmd;
+    toolActionClick(name) {
+      this.$refs.graphy.changeStatus(name);
     },
     setCmd(cmd) {
       this.cmd = cmd;
@@ -86,8 +80,9 @@ export default {
     }
     .left_toolbar {
       position: absolute;
-      left: 12px;
-      top: 12px;
+      height: 100%;
+      /*left: 12px;*/
+      /*top: 12px;*/
     }
   }
 }