Преглед на файлове

fix bug右侧组件报错,导致无法修改文本,属性等

yunxing преди 4 години
родител
ревизия
1377450605

+ 295 - 298
src/components/edit/right_toolbar.vue

@@ -1,334 +1,331 @@
 <template>
-  <div id="right_toolbar">
-    <!-- 右侧侧编辑器 -->
-    <a-tabs class="atabless" default-active-key="1" @change="callback">
-      <a-tab-pane key="1" tab="属性">
-        <div class="property">
-          <ul class="position">
-            <li v-for="(item,i) in msgList" :key="i">
-              <a-input
-                :disabled="item.disable"
-                @change="changeStatus(item)"
-                size="small"
-                v-model="item.msg"
-                placeholder
-                :suffix="item.unit"
-              />
-            </li>
-            <li @click="lockItem" :title="isLock?'锁定':'解锁'">
-              <Icon style="vertical-align: middle;" :name="isLock?'lock':'unlock'" />
-            </li>
-          </ul>
-          <attrSelect v-show="attrType" :type="attrType" :focusItemList="focusItemList" />
-        </div>
-      </a-tab-pane>
-      <a-tab-pane key="2" tab="元素" force-render>
-        <div class="element">
-          <a-input-search placeholder="搜索" style="margin-bottom: 12px;" v-model="key" @search="onSearch" />
-          <ul class="element-list">
-            <li v-for="ele in elementData" :key="ele.id" v-show="key?ele.name.search(key) != -1:true">
-              <el-image style="width: 45px; height: 26px; margin-top: 6px;" :src="ele.data.Properties.IconUrl" fit="contain"></el-image>
-              <span class="element-name">{{ele.name}}</span>
-            </li>
-          </ul>
-        </div>
-      </a-tab-pane>
-    </a-tabs>
-  </div>
+    <div id="right_toolbar">
+        <!-- 右侧侧编辑器 -->
+        <a-tabs class="atabless" default-active-key="1" @change="callback">
+            <a-tab-pane key="1" tab="属性">
+                <div class="property">
+                    <ul class="position">
+                        <li v-for="(item,i) in msgList" :key="i">
+                            <a-input
+                                :disabled="item.disable"
+                                @change="changeStatus(item)"
+                                size="small"
+                                v-model="item.msg"
+                                placeholder
+                                :suffix="item.unit"
+                            />
+                        </li>
+                        <li @click="lockItem" :title="isLock?'锁定':'解锁'">
+                            <Icon style="vertical-align: middle;" :name="isLock?'lock':'unlock'" />
+                        </li>
+                    </ul>
+                    <attrSelect v-show="attrType" :type="attrType" :focusItemList="focusItemList" />
+                </div>
+            </a-tab-pane>
+            <a-tab-pane key="2" tab="元素" force-render>
+                <div class="element">
+                    <a-input-search placeholder="搜索" style="margin-bottom: 12px;" v-model="key" @search="onSearch" />
+                    <ul class="element-list">
+                        <li v-for="ele in elementData" :key="ele.id" v-show="key?ele.name.search(key) != -1:true">
+                            <el-image style="width: 45px; height: 26px; margin-top: 6px;" :src="ele.data.Properties.IconUrl" fit="contain"></el-image>
+                            <span class="element-name">{{ele.name}}</span>
+                        </li>
+                    </ul>
+                </div>
+            </a-tab-pane>
+        </a-tabs>
+    </div>
 </template>
 <script>
 import attrSelect from "@/components/edit/attr_select";
 import bus from "@/bus";
-import { SImageMarkerItem } from '../../lib/items/SImageMarkerItem';
-import { SImageLegendItem } from '../../lib/items/SImageLegendItem';
-
+import { SImageMarkerItem } from "../../lib/items/SImageMarkerItem";
+import { SImageLegendItem } from "../../lib/items/SImageLegendItem";
+import { SEquipmentItem } from "../../lib/items/SEquipmentItem";
 const msgList = [
-  {
-    msg: "",
-    disable: false,
-    name: "X",
-    unit: "x"
-  },
-  {
-    msg: "",
-    disable: false,
-    name: "Y",
-    unit: "y"
-  },
-  {
-    msg: "0°",
-    disable: true,
-    name: "",
-    unit: ""
-  },
-  {
-    msg: "",
-    disable: true,
-    name: "Width",
-    unit: "w"
-  },
-  {
-    msg: "",
-    disable: true,
-    name: "Height",
-    unit: "h"
-  }
+    {
+        msg: "",
+        disable: false,
+        name: "X",
+        unit: "x"
+    },
+    {
+        msg: "",
+        disable: false,
+        name: "Y",
+        unit: "y"
+    },
+    {
+        msg: "0°",
+        disable: true,
+        name: "",
+        unit: ""
+    },
+    {
+        msg: "",
+        disable: true,
+        name: "Width",
+        unit: "w"
+    },
+    {
+        msg: "",
+        disable: true,
+        name: "Height",
+        unit: "h"
+    }
 ];
 // import Select from "@/components/Select/Select.vue";
 export default {
-  props: {
-    focusItemList: {
-      type: Object,
-      default: function() {
-        return [];
-      },
-      required: false
-    }
-  },
-  components: {
-    attrSelect
-  },
-  created() {
-    this.listenElementData();
-  },
-  data() {
-    return {
-      msgList,
-      attrType: "",
-      elementData: [],
-      key: "",
-      isLock: true,
-      aspectRatio: 1,// 元素宽高比
-    };
-  },
-  methods: {
-    // 获取元素数据
-    listenElementData() {
-      bus.$on("elementDataChange", val => {
-        this.elementData = [];
-        if (val.Nodes.length) {
-          this.elementData = this.elementData.concat(val.Nodes);
-        }
-        if (val.Markers.length) {
-          this.elementData = this.elementData.concat(val.Markers);
+    props: {
+        focusItemList: {
+            type: Object,
+            default: function() {
+                return [];
+            },
+            required: false
         }
-        if (val.Relations.length) {
-          this.elementData = this.elementData.concat(val.Relations);
-        }
-        console.log(this.elementData);
-      });
     },
-    callback(key) {
-      console.log(key);
+    components: {
+        attrSelect
     },
-    // 元素检索
-    onSearch(key) {
-      console.log(key);
+    created() {
+        this.listenElementData();
     },
-    // 切换锁状态
-    lockItem() {
-      this.isLock = !this.isLock;
-      if (this.isLock) {
-        let width,height;
-        this.msgList.forEach(item => {
-          if (item.name == "Width") {
-            width = item.msg;
-          } else if (item.name == "Height") {
-            height = item.msg;
-          }
-        });
-        this.aspectRatio = width / height;
-      }
+    data() {
+        return {
+            msgList,
+            attrType: "",
+            elementData: [],
+            key: "",
+            isLock: true,
+            aspectRatio: 1 // 元素宽高比
+        };
     },
-    // 改变状态
-    changeStatus(item) {
-      if (item.name == "Width") {
-        if (this.isLock) {
-          const height = item.msg / this.aspectRatio;
-          this.msgList.find(item => {
-            return item.name == "Height"
-          }).msg = height;
-          bus.$emit("itemHeight", height);
-        }
-        bus.$emit("itemWidth", item.msg);
-      } else if (item.name == "Height") {
-        if (this.isLock) {
-          const width = item.msg * this.aspectRatio;
-          this.msgList.find(item => {
-            return item.name == "Width"
-          }).msg = width;
-          bus.$emit("itemWidth", width);
-        }
-        bus.$emit("itemHeight", item.msg);
-      } else if (item.name == "X" || item.name == "Y") {
-        let x,
-          y = "";
-        this.msgList.forEach(t => {
-          if (t.name == "X") {
-            x = t.msg;
-          } else if (t.name == "Y") {
-            y = t.msg;
-          }
-        });
-        bus.$emit("itemPositon", x, y);
-      }
-    }
-  },
-  watch: {
-    focusItemList: function(newVal) {
-      this.attrType = newVal.itemType;
-      if (newVal.itemList.length !== 1) {
-        this.msgList.forEach(item => {
-          if (item.name == "X") {
-            item.msg = 0;
-          }
-          if (item.name == "Y") {
-            item.msg = 0;
-          }
-          if (item.name == "Width") {
-            item.msg = 0;
-          }
-          if (item.name == "Height") {
-            item.msg = 0;
-          }
-        });
-        this.aspectRatio = 1;
-      } else {
-        // 属性输入框宽高显示的数值
-        let inputW,inputH;
-        this.msgList.forEach(item => {
-          const Item = newVal.itemList[0];
-          const width = Item.boundingRect().width;
-          const height = Item.boundingRect().height;
-          if (item.name == "X") {
-            item.msg = Item.mapToScene(
-              Item.boundingRect().left,
-              Item.boundingRect().top
-            ).x;
-          }
-          if (item.name == "Y") {
-            item.msg = Item.mapToScene(
-              Item.boundingRect().left,
-              Item.boundingRect().top
-            ).y;
-          }
-          if (item.name == "Width") {
-            item.msg = width;
-            // Icon显示图片宽
-            if (Item instanceof SImageLegendItem) {
-              item.msg = Item.img.width;
+    methods: {
+        // 获取元素数据
+        listenElementData() {
+            bus.$on("elementDataChange", val => {
+                this.elementData = [];
+                console.log(val);
+                if (val.Nodes.length) {
+                    // 过滤掉 设备类 SEquipmentItem,不在右侧组件中暂时组件类
+                    let data = val.Nodes.filter(item => !item instanceof SEquipmentItem);
+                    this.elementData = this.elementData.concat(data);
+                }
+                if (val.Markers.length) {
+                    this.elementData = this.elementData.concat(val.Markers);
+                }
+                if (val.Relations.length) {
+                    this.elementData = this.elementData.concat(val.Relations);
+                }
+                console.log(this.elementData);
+            });
+        },
+        callback(key) {
+            console.log(key);
+        },
+        // 元素检索
+        onSearch(key) {
+            console.log(key);
+        },
+        // 切换锁状态
+        lockItem() {
+            this.isLock = !this.isLock;
+            if (this.isLock) {
+                let width, height;
+                this.msgList.forEach(item => {
+                    if (item.name == "Width") {
+                        width = item.msg;
+                    } else if (item.name == "Height") {
+                        height = item.msg;
+                    }
+                });
+                this.aspectRatio = width / height;
             }
-            // 针对图片及Icon
-            if (Item instanceof SImageMarkerItem || Item instanceof SImageLegendItem) {
-              item.disable = false;
-            } else {
-              item.disable = true;
-            }
-            inputW = item.msg;
-          }
-          if (item.name == "Height") {
-            item.msg = height;
-            // Icon显示图片高
-            if (Item instanceof SImageLegendItem) {
-              item.msg = Item.img.height;
+        },
+        // 改变状态
+        changeStatus(item) {
+            if (item.name == "Width") {
+                if (this.isLock) {
+                    const height = item.msg / this.aspectRatio;
+                    this.msgList.find(item => {
+                        return item.name == "Height";
+                    }).msg = height;
+                    bus.$emit("itemHeight", height);
+                }
+                bus.$emit("itemWidth", item.msg);
+            } else if (item.name == "Height") {
+                if (this.isLock) {
+                    const width = item.msg * this.aspectRatio;
+                    this.msgList.find(item => {
+                        return item.name == "Width";
+                    }).msg = width;
+                    bus.$emit("itemWidth", width);
+                }
+                bus.$emit("itemHeight", item.msg);
+            } else if (item.name == "X" || item.name == "Y") {
+                let x,
+                    y = "";
+                this.msgList.forEach(t => {
+                    if (t.name == "X") {
+                        x = t.msg;
+                    } else if (t.name == "Y") {
+                        y = t.msg;
+                    }
+                });
+                bus.$emit("itemPositon", x, y);
             }
-            // 针对图片及Icon
-            if (Item instanceof SImageMarkerItem || Item instanceof SImageLegendItem) {
-              item.disable = false;
+        }
+    },
+    watch: {
+        focusItemList: function(newVal) {
+            this.attrType = newVal.itemType;
+            if (newVal.itemList.length !== 1) {
+                this.msgList.forEach(item => {
+                    if (item.name == "X") {
+                        item.msg = 0;
+                    }
+                    if (item.name == "Y") {
+                        item.msg = 0;
+                    }
+                    if (item.name == "Width") {
+                        item.msg = 0;
+                    }
+                    if (item.name == "Height") {
+                        item.msg = 0;
+                    }
+                });
+                this.aspectRatio = 1;
             } else {
-              item.disable = true;
+                // 属性输入框宽高显示的数值
+                let inputW, inputH;
+                this.msgList.forEach(item => {
+                    const Item = newVal.itemList[0];
+                    const width = Item.boundingRect().width;
+                    const height = Item.boundingRect().height;
+                    if (item.name == "X") {
+                        item.msg = Item.mapToScene(Item.boundingRect().left, Item.boundingRect().top).x;
+                    }
+                    if (item.name == "Y") {
+                        item.msg = Item.mapToScene(Item.boundingRect().left, Item.boundingRect().top).y;
+                    }
+                    if (item.name == "Width") {
+                        item.msg = width;
+                        // Icon显示图片宽
+                        if (Item instanceof SImageLegendItem) {
+                            item.msg = Item.img.width;
+                        }
+                        // 针对图片及Icon
+                        if (Item instanceof SImageMarkerItem || Item instanceof SImageLegendItem) {
+                            item.disable = false;
+                        } else {
+                            item.disable = true;
+                        }
+                        inputW = item.msg;
+                    }
+                    if (item.name == "Height") {
+                        item.msg = height;
+                        // Icon显示图片高
+                        if (Item instanceof SImageLegendItem) {
+                            item.msg = Item.img.height;
+                        }
+                        // 针对图片及Icon
+                        if (Item instanceof SImageMarkerItem || Item instanceof SImageLegendItem) {
+                            item.disable = false;
+                        } else {
+                            item.disable = true;
+                        }
+                        inputH = item.msg;
+                    }
+                });
+                this.aspectRatio = inputW / inputH;
             }
-            inputH = item.msg;
-          }
-        });
-        this.aspectRatio = inputW / inputH;
-      }
+        }
     }
-  }
 };
 </script>
 <style lang="less" scoped>
 ul,
 li {
-  margin: 0;
-  padding: 0;
-  list-style: none;
+    margin: 0;
+    padding: 0;
+    list-style: none;
 }
 #right_toolbar {
-  width: 280px;
-  height: 100%;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.11);
-  .atabless {
+    width: 280px;
     height: 100%;
-    width: 100%;
-  }
-  .property {
-    width: 100%;
-    height: 100%;
-    .formatting {
-      display: flex;
-      height: 50px;
-      padding: 0 12px 0 12px;
-      box-sizing: border-box;
-      align-items: center;
-      justify-content: space-around;
-      li {
-        width: 16px;
-        height: 16px;
-        cursor: pointer;
-        img {
-          width: 16px;
-          height: 16px;
-        }
-      }
-    }
-    .position {
-      display: flex;
-      padding: 0 12px 30px 12px;
-      box-sizing: border-box;
-      display: flex;
-      border-bottom: 1px solid #c3c7cb;
-      flex-wrap: wrap;
-      li {
-        margin-top: 10px;
-        width: 30%;
-        margin-right: 8px;
-        .lock {
-          width: 16px;
-          height: 16px;
-          cursor: pointer;
-        }
-      }
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.11);
+    .atabless {
+        height: 100%;
+        width: 100%;
     }
-  }
-  .element {
-    margin: 0 12px 0 12px;
-    height: 100%;
-    .element-list {
-      height: calc(100% - 44px);
-      overflow-y: auto;
-      box-sizing: border-box;
-      li {
+    .property {
         width: 100%;
-        height: 38px;
-        line-height: 38px;
-        padding-left: 12px;
-        box-sizing: border-box;
-        color: #1f2429;
-        .element-name {
-          display: inline-block;
-          vertical-align: top;
-          line-height: 38px;
+        height: 100%;
+        .formatting {
+            display: flex;
+            height: 50px;
+            padding: 0 12px 0 12px;
+            box-sizing: border-box;
+            align-items: center;
+            justify-content: space-around;
+            li {
+                width: 16px;
+                height: 16px;
+                cursor: pointer;
+                img {
+                    width: 16px;
+                    height: 16px;
+                }
+            }
+        }
+        .position {
+            display: flex;
+            padding: 0 12px 30px 12px;
+            box-sizing: border-box;
+            display: flex;
+            border-bottom: 1px solid #c3c7cb;
+            flex-wrap: wrap;
+            li {
+                margin-top: 10px;
+                width: 30%;
+                margin-right: 8px;
+                .lock {
+                    width: 16px;
+                    height: 16px;
+                    cursor: pointer;
+                }
+            }
         }
-        &:hover {
-          background: #f5f6f7;
+    }
+    .element {
+        margin: 0 12px 0 12px;
+        height: 100%;
+        .element-list {
+            height: calc(100% - 44px);
+            overflow-y: auto;
+            box-sizing: border-box;
+            li {
+                width: 100%;
+                height: 38px;
+                line-height: 38px;
+                padding-left: 12px;
+                box-sizing: border-box;
+                color: #1f2429;
+                .element-name {
+                    display: inline-block;
+                    vertical-align: top;
+                    line-height: 38px;
+                }
+                &:hover {
+                    background: #f5f6f7;
+                }
+            }
         }
-      }
     }
-  }
 }
 /deep/ .ant-tabs .ant-tabs-top-content.ant-tabs-content-animated {
-  height: calc(100% - 60px);
+    height: calc(100% - 60px);
 }
 </style>

+ 176 - 142
src/components/edit/top_toolbar.vue

@@ -1,15 +1,29 @@
 <template>
-    <div id='top_toolbar'>
+    <div id="top_toolbar">
         <!-- 顶部编辑器 -->
-        <div class='tit'>
+        <div class="tit">
             <!-- <a-icon type="left" /> -->
             {{this.urlMsg.floorName}}
         </div>
-        <div class='tool'>
+        <div class="tool">
             <ul>
-                <li @click='saveMsg'>
-                    <img class='lock' :src='require(`./../../assets/images/t-save.png`)' alt />
-                    <span>保存</span>
+                <li>
+                    <a-upload
+                        name="json"
+                        class="avatar-uploader"
+                        :show-upload-list="false"
+                        :customRequest="customRequestJSON"
+                        :before-upload="beforeUploadJSON"
+                    >
+                        <div>
+                            <a-icon type="upload" />
+                            <div class="ant-upload-text">读取json文件</div>
+                        </div>
+                    </a-upload>
+                </li>
+                <li @click="saveMsg">
+                    <img class="lock" :src="require(`./../../assets/images/t-save.png`)" alt />
+                    <span>保存json</span>
                 </li>
                 <!-- <li>
           <a-icon type="edit" />
@@ -19,31 +33,31 @@
           <img class="lock" :src="require(`./../../assets/images/redo.png`)" alt />
           <span>重做</span>
                 </li>-->
-                <li class='zoom-window'>
+                <li class="zoom-window">
                     <div>
-                        <img class='lock' @click='handleScale(-1)' :src='require(`./../../assets/images/缩小.png`)' alt />
-                        <span class='percentage'>{{scalePercent}}</span>
-                        <img class='lock' @click='handleScale(1)' :src='require(`./../../assets/images/放大 amplification.png`)' alt />
+                        <img class="lock" @click="handleScale(-1)" :src="require(`./../../assets/images/缩小.png`)" alt />
+                        <span class="percentage">{{scalePercent}}</span>
+                        <img class="lock" @click="handleScale(1)" :src="require(`./../../assets/images/放大 amplification.png`)" alt />
                     </div>
                     <span>缩放窗口</span>
                 </li>
                 <li>
-                    <a-dropdown :trigger='[`click`]'>
-                        <div class='ant-dropdown-link dropdown-flex' @click='e => e.preventDefault()'>
+                    <a-dropdown :trigger="[`click`]">
+                        <div class="ant-dropdown-link dropdown-flex" @click="e => e.preventDefault()">
                             <div>
-                                <img class='lock' :src='require(`./../../assets/images/t-format.png`)' alt />
+                                <img class="lock" :src="require(`./../../assets/images/t-format.png`)" alt />
                                 <div>对齐</div>
                             </div>
-                            <a-icon type='caret-down' class='down-icon' />
+                            <a-icon type="caret-down" class="down-icon" />
                         </div>
-                        <a-menu slot='overlay'>
+                        <a-menu slot="overlay">
                             <a-menu-item
-                                :disabled='item.disable'
-                                v-for='item in alignmentOptions'
-                                :key='item.value'
-                                @click='changeAlignItem(item.value)'
+                                :disabled="item.disable"
+                                v-for="item in alignmentOptions"
+                                :key="item.value"
+                                @click="changeAlignItem(item.value)"
                             >
-                                <img style='width: 16px;margin-right: 5px;' :src='require(`./../../assets/images/`+item.img+`.png`)' alt />
+                                <img style="width: 16px;margin-right: 5px;" :src="require(`./../../assets/images/`+item.img+`.png`)" alt />
                                 <span>{{item.label}}</span>
                             </a-menu-item>
                         </a-menu>
@@ -61,108 +75,108 @@
           <a-icon type="edit" />
           <span>打散</span>
                 </li>-->
-                <li @click='lockItem'>
-                    <Icon :name='!isLock?`lock`:`unlock`' />
+                <li @click="lockItem">
+                    <Icon :name="!isLock?`lock`:`unlock`" />
                     <span>{{isLock?"解锁":"锁定"}}</span>
                 </li>
-                <li @click='deleteItem'>
-                    <a-icon type='delete' />
+                <li @click="deleteItem">
+                    <a-icon type="delete" />
                     <span>删除</span>
                 </li>
                 <li>
                     <a-upload
-                        name='avatar'
-                        class='avatar-uploader'
-                        :show-upload-list='false'
-                        :customRequest='customRequest'
-                        action='https://jsonplaceholder.typicode.com/posts/'
-                        :before-upload='beforeUpload'
-                        @change='handleChange'
+                        name="avatar"
+                        class="avatar-uploader"
+                        :show-upload-list="false"
+                        :customRequest="customRequest"
+                        action="https://jsonplaceholder.typicode.com/posts/"
+                        :before-upload="beforeUpload"
+                        @change="handleChange"
                     >
-                        <img v-if='0' :src='imageUrl' alt='avatar' />
+                        <img v-if="0" :src="imageUrl" alt="avatar" />
                         <div v-else>
-                            <a-icon :type='loading ? `loading` : `edit`' />
-                            <div class='ant-upload-text'>修改底图</div>
+                            <a-icon :type="loading ? `loading` : `edit`" />
+                            <div class="ant-upload-text">修改底图</div>
                         </div>
                     </a-upload>
                 </li>
             </ul>
         </div>
-        <div class='btn-list'>
-            <div class='btn-list-item' @click='publishMap'>
-                <Icon name='release' />
+        <div class="btn-list">
+            <div class="btn-list-item" @click="publishMap">
+                <Icon name="release" />
                 <span>发布</span>
             </div>
         </div>
     </div>
 </template>
 <script>
-import bus from '@/bus'
-import { SGraphLayoutType } from '@saga-web/graph/lib'
-import systym from './codeMapSystem.js'
-import { MessageBox } from 'element-ui'
-import { uploadImg } from '@/api/editer.js'
+import bus from "@/bus";
+import { SGraphLayoutType } from "@saga-web/graph/lib";
+import systym from "./codeMapSystem.js";
+import { MessageBox } from "element-ui";
+import { uploadImg } from "@/api/editer.js";
 
 function getBase64(img, callback) {
-    const reader = new FileReader()
-    reader.addEventListener('load', () => callback(reader.result))
-    reader.readAsDataURL(img)
+    const reader = new FileReader();
+    reader.addEventListener("load", () => callback(reader.result));
+    reader.readAsDataURL(img);
 }
 export default {
     data() {
         return {
             loading: false, //添加图片,是否显示loading
-            imageUrl: '',
+            imageUrl: "",
             isLock: false, //是否锁定
             focusItem: null,
             alignmentOptions: [
                 //对齐数据
                 {
                     value: SGraphLayoutType.Left,
-                    label: '左对齐',
-                    img: 't-left',
+                    label: "左对齐",
+                    img: "t-left",
                     disable: true
                 },
                 {
                     value: SGraphLayoutType.Right,
-                    label: '右对齐',
-                    img: 't-right',
+                    label: "右对齐",
+                    img: "t-right",
                     disable: true
                 },
                 {
                     value: SGraphLayoutType.Top,
-                    label: '顶对齐',
-                    img: 't-top',
+                    label: "顶对齐",
+                    img: "t-top",
                     disable: true
                 },
                 {
                     value: SGraphLayoutType.Bottom,
-                    label: '底对齐',
-                    img: 't-bottom',
+                    label: "底对齐",
+                    img: "t-bottom",
                     disable: true
                 },
                 {
                     value: SGraphLayoutType.Center,
-                    label: '水平居中对齐',
-                    img: 't-center',
+                    label: "水平居中对齐",
+                    img: "t-center",
                     disable: true
                 },
                 {
                     value: SGraphLayoutType.Middle,
-                    label: '垂直居中对齐',
-                    img: 't-topandbottm',
+                    label: "垂直居中对齐",
+                    img: "t-topandbottm",
                     disable: true
                 },
                 {
                     value: SGraphLayoutType.Vertical,
-                    label: '垂直分布',
-                    img: 't-vertical',
+                    label: "垂直分布",
+                    img: "t-vertical",
                     disable: true
                 },
                 {
                     value: SGraphLayoutType.Horizontal,
-                    label: '水平分布',
-                    img: 't-level',
+                    label: "水平分布",
+                    img: "t-level",
                     disable: true
                 }
             ],
@@ -170,64 +184,84 @@ export default {
             initScale: 0.5, //初始 底图缩放比例
             baseScale: 1.0, //底图基础缩放比例,由底图加载完成后,传入进来
             scaleStep: 0.05 // +-缩放步进
-        }
+        };
     },
     computed: {
         // 缩放比例显示文本
         scalePercent() {
-            return (this.scale * 100).toFixed(0) + '%'
+            return (this.scale * 100).toFixed(0) + "%";
         }
     },
     methods: {
         handleChange(info) {
-            if (info.file.status === 'uploading') {
-                this.loading = true
-                return
+            if (info.file.status === "uploading") {
+                this.loading = true;
+                return;
             }
-            if (info.file.status === 'done') {
+            if (info.file.status === "done") {
                 // Get this url from response in real world.
                 getBase64(info.file.originFileObj, imageUrl => {
-                    this.imageUrl = imageUrl
-                    this.loading = false
-                    console.log(imageUrl)
-                    bus.$emit('changeImgUrl', imageUrl)
-                })
+                    this.imageUrl = imageUrl;
+                    this.loading = false;
+                    console.log(imageUrl);
+                    bus.$emit("changeImgUrl", imageUrl);
+                });
             }
         },
         beforeUpload(file) {
-            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
+            const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
             if (!isJpgOrPng) {
-                this.$message.error('You can only upload JPG file!')
+                this.$message.error("You can only upload JPG file!");
             }
-            const isLt2M = file.size / 1024 / 1024 < 2
+            const isLt2M = file.size / 1024 / 1024 < 2;
             if (!isLt2M) {
-                this.$message.error('Image must smaller than 2MB!')
+                this.$message.error("Image must smaller than 2MB!");
             }
-            return isJpgOrPng && isLt2M
+            return isJpgOrPng && isLt2M;
         },
+
         // TODO: customRequest
         customRequest(info) {
-            const formData = new FormData()
-            formData.append('file', info.file)
-            const postParams = formData
+            const formData = new FormData();
+            formData.append("file", info.file);
+            const postParams = formData;
             uploadImg({ postParams }).then(res => {
-                this.loading = false
-                if (res.Result == 'success') {
-                    this.$message.success(`${info.file.name} file uploaded successfully.`)
-                    bus.$emit('changeImgUrl', res.EntityList[0])
+                this.loading = false;
+                if (res.Result == "success") {
+                    this.$message.success(`${info.file.name} file uploaded successfully.`);
+                    bus.$emit("changeImgUrl", res.EntityList[0]);
                 } else {
-                    this.$message.error(`${info.file.name} file upload failed.`)
+                    this.$message.error(`${info.file.name} file upload failed.`);
                 }
-            })
+            });
+        },
+        beforeUploadJSON(file) {
+            console.log(file);
+            const { type } = file;
+            const flag = type == "application/json";
+            !flag && this.$message.error("仅支持上传json文件");
+            return flag;
+        },
+        /**
+         * 读取json文件,bus.$emit后在 baseEditer中使用
+         */
+        customRequestJSON(info) {
+            let { file } = info;
+            const reader = new FileReader(); //实例化一个FileReader对象
+            reader.readAsText(file); //借助 FileReader 的方法,按照文本格式读入文件,第二个参数是编码方式(可空)
+            reader.onload = result => {
+                let json = JSON.parse(reader.result);
+                bus.$emit("loadJSON", json);
+            };
         },
         /**
          * @name getInitScale
          * @description 获取底图加载完成后的,初始化的缩放比例initScale,设置为baseScale
          */
         getInitScale() {
-            bus.$on('initScale', baseScale => {
-                this.baseScale = Number(baseScale || 1)
-            })
+            bus.$on("initScale", baseScale => {
+                this.baseScale = Number(baseScale || 1);
+            });
         },
         /**
          * @name getMouseScale
@@ -235,9 +269,9 @@ export default {
          */
         getMouseScale() {
             //  zoom 为缩放后改变的比例
-            bus.$on('mouseScale', zoom => {
-                this.scale = Number((zoom * this.initScale).toFixed(2))
-            })
+            bus.$on("mouseScale", zoom => {
+                this.scale = Number((zoom * this.initScale).toFixed(2));
+            });
         },
         /**
          * @name handleScale
@@ -246,109 +280,109 @@ export default {
          */
         handleScale(type) {
             // +-按钮禁用处理
-            let flag = true
+            let flag = true;
             // 设置缩放范围 0.05 ~ 100
             if ((type < 0 && this.scale <= 0.05) || (type > 0 && this.scale >= 100)) {
-                flag = false
+                flag = false;
             } else {
-                flag = true
+                flag = true;
             }
             if (!flag) {
-                return false
+                return false;
             }
             // emit 缩放比例 this.scale / oldScale
-            const oldScale = this.scale
-            this.scale = Number((oldScale + type * this.scaleStep).toFixed(2))
-            bus.$emit('changeScale', this.scale / oldScale)
+            const oldScale = this.scale;
+            this.scale = Number((oldScale + type * this.scaleStep).toFixed(2));
+            bus.$emit("changeScale", this.scale / oldScale);
         },
         FocusItemChanged(itemMsg) {
-            this.focusItem = null
+            this.focusItem = null;
             this.alignmentOptions.forEach(el => {
-                el.disable = true
-            })
+                el.disable = true;
+            });
             if (itemMsg.itemList.length == 1) {
-                this.isLock = itemMsg.itemList[0].moveable
-                this.focusItem = itemMsg.itemList[0]
+                this.isLock = itemMsg.itemList[0].moveable;
+                this.focusItem = itemMsg.itemList[0];
             } else if (itemMsg.itemList.length > 1) {
                 this.alignmentOptions.forEach(el => {
-                    el.disable = false
-                })
+                    el.disable = false;
+                });
             }
         },
         lockItem() {
             if (this.focusItem) {
-                this.isLock = !this.isLock
-                this.focusItem.moveable = this.isLock
+                this.isLock = !this.isLock;
+                this.focusItem.moveable = this.isLock;
             } else {
-                this.$message.error('请选择指定对象!', 1)
+                this.$message.error("请选择指定对象!", 1);
             }
         },
         saveMsg() {
             // this.$message.success("保存成功!", 1);
-            bus.$emit('saveMsgItem')
+            bus.$emit("saveMsgItem");
         },
         // 删除item
         deleteItem() {
-            console.log(this.focusItem)
+            console.log(this.focusItem);
             if (this.focusItem) {
-                bus.$emit('deleiteItem')
+                bus.$emit("deleiteItem");
                 // this.focusItem = null;
-                this.$message.success('删除成功', 1)
+                this.$message.success("删除成功", 1);
             } else {
-                this.$message.error('请选择指定对象!', 1)
+                this.$message.error("请选择指定对象!", 1);
             }
         },
         // 发布图例
         publishMap() {
-            MessageBox.confirm('确认后即发布到平台?', '提示', {
-                confirmButtonText: '确认',
-                cancelButtonText: '取消',
-                type: 'warning'
+            MessageBox.confirm("确认后即发布到平台?", "提示", {
+                confirmButtonText: "确认",
+                cancelButtonText: "取消",
+                type: "warning"
             })
                 .then(() => {
-                    bus.$emit('publishMap')
+                    bus.$emit("publishMap");
                 })
-                .catch(() => {})
+                .catch(() => {});
         },
         // 对齐item
         changeAlignItem(val) {
-            bus.$emit('changeAlignItem', val)
+            bus.$emit("changeAlignItem", val);
         }
     },
     async mounted() {
-        bus.$on('FocusItemChanged', itemMsg => {
-            console.log('itemMsg', itemMsg)
-            this.FocusItemChanged(itemMsg)
-        })
+        bus.$on("FocusItemChanged", itemMsg => {
+            console.log("itemMsg", itemMsg);
+            this.FocusItemChanged(itemMsg);
+        });
         // 获取底图加载完成后的初始sacle
-        await this.getInitScale()
+        await this.getInitScale();
         // 监听滚轮 底图缩放比例
-        this.getMouseScale()
+        this.getMouseScale();
     },
     created() {
-        const href = window.location.href
+        const href = window.location.href;
         // 路由
         // const route = href.split("?")[0];
         // 参数处理
-        let params = href.split('?')[1]
+        let params = href.split("?")[1];
         if (!params) {
             // 参数有问题
-            return false
+            return false;
         }
-        params = decodeURIComponent(params)
+        params = decodeURIComponent(params);
         // params = "categoryId=NTXT&ProjectID=5&BuildingID=1&FloorID=1"; // mock 参数
-        const paramsArr = params.split('&')
-        console.log('paramsArr', paramsArr)
-        const obj = {}
+        const paramsArr = params.split("&");
+        console.log("paramsArr", paramsArr);
+        const obj = {};
         paramsArr.map(item => {
-            const arr = item.split('=')
-            obj[arr[0]] = arr[1]
-        })
-        this.urlMsg = obj
-        const FloorName = this.urlMsg.FloorName ? this.urlMsg.FloorName : ''
-        this.urlMsg.floorName = systym[this.urlMsg.categoryId] + '-' + FloorName
+            const arr = item.split("=");
+            obj[arr[0]] = arr[1];
+        });
+        this.urlMsg = obj;
+        const FloorName = this.urlMsg.FloorName ? this.urlMsg.FloorName : "";
+        this.urlMsg.floorName = systym[this.urlMsg.categoryId] + "-" + FloorName;
     }
-}
+};
 </script>
 <style lang="less" scoped>
 ul,

+ 2 - 0
src/components/mapClass/EditScence.ts

@@ -209,6 +209,7 @@ export class EditScence extends SGraphScene {
      * 增加折线item
      */
     addPolylineItem(event: SMouseEvent): boolean {
+        console.log("addPolylineItem");
         const point = new SPoint(event.x, event.y);
         const item = new TipelineItem(null, [point]);
         //设置状态
@@ -226,6 +227,7 @@ export class EditScence extends SGraphScene {
      * 增加管道 lenged
      */
     addTipelineItem(event: SMouseEvent): boolean {
+        console.log("addTipelineItem");
         const anc = this.clickIsAnchor(event);
         if (anc) {
             const p = anc.mapToScene(0, 0);

Файловите разлики са ограничени, защото са твърде много
+ 39 - 62
src/components/mock.json


+ 1 - 1
src/lib/items/SEquipmentItem.ts

@@ -165,6 +165,6 @@ export class SEquipmentItem extends SObjectItem {
         painter.pen.lineWidth = painter.toPx(1);
         painter.pen.color = SColor.Black;
         painter.brush.color = SColor.Transparent;
-        painter.drawRect(this.boundingRect());
+        // painter.drawRect(this.boundingRect());
     } // Function onDraw()
 }

+ 1 - 0
src/lib/parsers/SEquipmentParser.ts

@@ -16,6 +16,7 @@ export class SEquipmentParser extends SParser {
     parseData(data: EquipmentData[]): void {
         if (data) {
             data.map((t: EquipmentData): void => {
+                
                 let eqItem = new SEquipmentItem(null, t);
                 this.equipmentItem.push(eqItem);
             });

+ 1 - 0
src/lib/types/EquipmentData.ts

@@ -30,6 +30,7 @@ export interface EquipmentData {
     ID: string;
     Name: string; // 名称
     AttachObjectIds: string[]; // 返回工程信息化对象 ID 列表
+    GraphElementType: string;
     Pos: {
         // 位置
         X: number;

+ 14 - 0
src/utils/util.js

@@ -0,0 +1,14 @@
+// 保存json文件
+export function saveJSON(content, fileName) {
+    let downLink = document.createElement("a");
+    downLink.download = fileName;
+    //字符内容转换为blod地址
+    let blob = new Blob([content]);
+    downLink.href = URL.createObjectURL(blob);
+    // 链接插入到页面
+    document.body.appendChild(downLink);
+    downLink.click();
+    // 移除下载链接
+    document.body.removeChild(downLink);
+}
+