Merge branch 'master' of http://39.106.8.246:3003/web/persagy_topo_editer

src/api/editer.ts

@@ -0,0 +1,8 @@
+// 登录校验接口
+import httputils from '@/api/httputils'
+const baseApi = '/graph/drafts/';
+
+//保存系统图
+export function saveGroup(postParams: any): any {
+    return httputils.postJson(`/labsl${baseApi}save`, postParams)
+}

src/components/editClass/big-edit/items/SBaseLineEdit.ts

@@ -67,6 +67,8 @@ export class SBaseLineEdit extends SLineEdit {
     } // Function onMouseDown()
 
     toData() {
-        console.log(1230)
+        const Line = [{X:this.line[0].x,Y:this.line[0].y},{X:this.line[1].x,Y:this.line[1].y}];
+         this.data.Style.Line = Line;
+         return this.data
     }
 }

src/components/editClass/persagy-edit/PTopoScene.ts

@@ -94,11 +94,16 @@ export class PTopoScene extends SBaseEditScene {
             /** 名称  */
             Name: '基础直线',
             /** 图标（Image），线类型(Line) */
-            Type: "BaseLine",
+            Type: "Line",
+            /** 缩放比例（Image），线类型(Line) */
+            Scale: { X: 1, Y: 1, Z: 1 },
+            /** 缩放比例（Image），线类型(Line) */
+            Rolate: { X: 0, Y: 0, Z: 0 },
             /** 位置  */
             Pos: { X: 0, Y: 0 },
             /** 由应用自己定义  */
             Properties: {
+                Type: "BaseLine"           // 自定义类型用于区分mark与node
             },
             Style: {
                 Line: [{ X: event.x, Y: event.y }],
@@ -327,4 +332,26 @@ export class PTopoScene extends SBaseEditScene {
      */
     vueOnMouseDown(event: SMouseEvent) {
     }
+
+    /**
+     * 获取item (常用与场景外的调用F)
+     * @return obj 返回保存的数据接口
+     */
+    save() {
+        if (!this.view) return;
+        const MarkType: string[] = ['BaseLine', 'BaseText', 'BaseExplain', 'BaseImage'];
+        const Markers: any = [];   /**图例节点 */  // 与工程信息无关的标识对象（增加文本注释，图上的图片说明）
+        const Nodes: any = [];   /**图例节点 */  // 与工程信息无关的标识对象（增加文本注释，图上的图片说明）
+        const Relations: any = [];   /**图例节点 */  // 与工程信息无关的标识对象（增加文本注释，图上的图片说明）
+        this.root.children.forEach(item => {
+            if (MarkType.includes(item.data.Properties.Type)) {
+                Markers.push(item.toData())
+            }
+        });
+        return {
+            Markers,
+            Nodes,
+            Relations
+        }
+    }
 }

src/components/editview/baseTopoEditer.vue

@@ -11,6 +11,7 @@ import { SGraphView } from "@persagy-web/graph";
 import topoTooltip from "./topoTooltip.vue";
 import { mapState, mapMutations } from "vuex";
 import bus from "@/bus/bus";
+import { saveGroup } from "@/api/editer";
 export default {
   components: { topoTooltip },
   data() {
@@ -62,7 +63,7 @@ export default {
     // 右键获取item
     onContextMenu(item, [event]) {
       this.showTooltip = true;
-      console.log(item)
+      console.log(item);
       if (item) {
         this.havItem = true;
       } else {
@@ -107,6 +108,34 @@ export default {
       bus.$on("paste", (val) => {
         this.scene.paste();
       });
+      // 保存
+      bus.$on("saveTopo", (val) => {
+        const Elements = this.scene.save();
+        const obj = {
+          Elements,
+          ID: "1", // 图ID
+          Name: "1", // 名称
+          CategoryID: "1", // 图分类ID
+          ProjectID: "1", // 项目ID
+          BuildingID: "1", // 建筑ID
+          FloorID: "1", // 楼层id
+          Note: "1", // 图说明
+          Log: {
+            // 图操作日志
+            Mark: "1", // 图的存盘标记
+            CommandList: [
+              {
+                Command: "1", // 命令
+                Desc: "1", // 描述
+                Detail: "1", // 详情
+              },
+            ],
+          },
+        };
+        saveGroup(obj).then((res) => {
+          console.log("res", res);
+        });
+      });
     },
   },
   watch: {

src/components/editview/rightPropertyBar/BaseExplainPro.vue

@@ -1,4 +1,197 @@
 <!-- 基本注释的属性框 -->
+<!-- 基本图片的属性框 -->
 <template>
-  <div class="baseLinePro">基本注释的属性框</div>
-</template>
+  <div class="base-image">
+    <div class="title">属性</div>
+    <ul>
+      <li>
+        <div class="small-title">尺寸大小</div>
+        <div class="property">
+          <div>
+            <span>W</span>
+            <el-input
+              style="width:74px;margin-left:6px"
+              size="mini"
+              v-model="input"
+              placeholder="请输入内容"
+            ></el-input>
+          </div>
+          <div>
+            <span>H</span>
+            <el-input
+              style="width:74px;margin-left:6px"
+              size="mini"
+              v-model="input"
+              placeholder="请输入内容"
+            ></el-input>
+          </div>
+          <i class="el-icon-link"></i>
+        </div>
+      </li>
+      <li>
+        <div class="small-title">填充</div>
+        <div class="property property-push">
+          <div class="color-box">
+            <div class="cololorSelect">
+              <el-color-picker class="fix-box-1" v-model="color"></el-color-picker>
+            </div>
+            <span>颜色</span>
+          </div>
+        </div>
+      </li>
+      <li>
+        <div class="small-title">边框</div>
+        <div class="property">
+          <div class="color-box">
+            <div class="cololorSelect">
+              <el-color-picker class="fix-box-1" v-model="color"></el-color-picker>
+            </div>
+            <span>颜色</span>
+          </div>
+          <div class="line-width">
+            <el-input-number
+              style="width:80px"
+              v-model="num"
+              controls-position="right"
+              @change="handleChange"
+              size="mini"
+              :min="1"
+              :max="20"
+              :maxlength="100"
+            ></el-input-number>
+            <span>线宽</span>
+          </div>
+          <div class="color-box">
+            <div class="cololorSelect">
+              <el-color-picker class="fix-box-1" v-model="color"></el-color-picker>
+            </div>
+            <span>背景颜色</span>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import bus from "@/bus/bus";
+// import { Select } from 'ant-design-vue';
+export default {
+  // components:{Select},
+  data() {
+    return {
+      size: 12, //font-size
+      text: "", //文本
+      color: "#cccccc", //颜色
+      activeName: "",
+      num: 1,
+      borderLineOption: [
+        {
+          id: "solid",
+          src: require("@/assets/images/solidLine.png"),
+        },
+        {
+          id: "dashed",
+          src: require("@/assets/images/dashedLine.png"),
+        },
+        {
+          id: "dotted",
+          src: require("@/assets/images/dotLine.png"),
+        },
+      ],
+      borderStyle: "solid",
+    };
+  },
+  methods: {
+    // 改变文本大小
+    updateSize(val) {
+      bus.$emit("baseTextSize", val);
+    },
+    // 输入文本
+    handleChangeText() {},
+    handleChange() {},
+    // 改变文字颜色
+    changeColor() {},
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    changeBorder() {},
+  },
+  mounted() {
+    // console.log(Select)
+  },
+};
+</script>
+<style lang="less" scoped>
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+.base-image {
+  .title {
+    height: 47px;
+    border-bottom: 1px solid #979797;
+    color: #646c73;
+    font-size: 16px;
+    padding-left: 12px;
+    box-sizing: border-box;
+  }
+  ul {
+    width: calc(~"100% - 24px");
+    margin: -1px 12px 0 12px;
+    li {
+      border-top: 1px solid #979797;
+      margin-bottom: 16px;
+      .small-title {
+        font-size: 12px;
+        color: #8d9399;
+        margin: 12px 0;
+      }
+      .property {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        .color-box {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          .cololorSelect {
+            width: 32px;
+            height: 20px;
+            overflow: hidden;
+            position: relative;
+            margin: 4px 0;
+            .fix-box-1 {
+              margin-top: -8px;
+              margin-left: -8px;
+              /deep/ .el-color-picker__trigger {
+                width: 200px;
+                height: 200px;
+              }
+            }
+          }
+        }
+        .line-width {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          margin-left: 8px;
+          position: relative;
+        }
+        span {
+          font-size: 12px;
+          color: #1f2429;
+          margin-top: 4px;
+        }
+      }
+      .property-push{
+        justify-content:start;
+        .color-box{
+          margin-left: 8px;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/editview/rightPropertyBar/BaseImagePro.vue

@@ -1,4 +1,169 @@
 <!-- 基本图片的属性框 -->
 <template>
-  <div class="baseLinePro">基本图片的属性框</div>
-</template>
+  <div class="base-image">
+    <div class="title">属性</div>
+    <ul>
+      <li>
+        <div class="small-title">尺寸大小</div>
+        <div class="property">
+          <div>
+            <span>W</span>
+            <el-input style="width:74px;margin-left:6px" size="mini" v-model="input" placeholder="请输入内容"></el-input>
+          </div>
+          <div>
+            <span>H</span>
+            <el-input style="width:74px;margin-left:6px" size="mini" v-model="input" placeholder="请输入内容"></el-input>
+          </div>
+          <i class="el-icon-link"></i>
+        </div>
+      </li>
+      <li>
+        <div class="small-title">边框</div>
+        <div class="property">
+          <div class="color-box">
+            <div class="cololorSelect">
+              <el-color-picker class="fix-box-1" v-model="color"></el-color-picker>
+            </div>
+            <span>颜色</span>
+          </div>
+          <div class="line-width">
+            <el-input-number
+              style="width:80px"
+              v-model="num"
+              controls-position="right"
+              @change="handleChange"
+              size="mini"
+              :min="1"
+              :max="20"
+              :maxlength="100"
+            ></el-input-number>
+            <span>线宽</span>
+          </div>
+          <div class="color-box">
+            <div class="cololorSelect">
+              <el-color-picker class="fix-box-1" v-model="color"></el-color-picker>
+            </div>
+            <span>背景颜色</span>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import bus from "@/bus/bus";
+// import { Select } from 'ant-design-vue';
+export default {
+  // components:{Select},
+  data() {
+    return {
+      size: 12, //font-size
+      text: "", //文本
+      color: "#cccccc", //颜色
+      activeName: "",
+      num: 1,
+      borderLineOption: [
+        {
+          id: "solid",
+          src: require("@/assets/images/solidLine.png"),
+        },
+        {
+          id: "dashed",
+          src: require("@/assets/images/dashedLine.png"),
+        },
+        {
+          id: "dotted",
+          src: require("@/assets/images/dotLine.png"),
+        },
+      ],
+      borderStyle: "solid",
+    };
+  },
+  methods: {
+    // 改变文本大小
+    updateSize(val) {
+      bus.$emit("baseTextSize", val);
+    },
+    // 输入文本
+    handleChangeText() {},
+    handleChange() {},
+    // 改变文字颜色
+    changeColor() {},
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    changeBorder() {},
+  },
+  mounted() {
+    // console.log(Select)
+  },
+};
+</script>
+<style lang="less" scoped>
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+.base-image {
+  .title {
+    height: 47px;
+    border-bottom: 1px solid #979797;
+    color: #646c73;
+    font-size: 16px;
+    padding-left: 12px;
+    box-sizing: border-box;
+  }
+  ul {
+    width: calc(~"100% - 24px");
+    margin: -1px 12px 0 12px;
+    li {
+      border-top: 1px solid #979797;
+      margin-bottom: 16px;
+      .small-title {
+        font-size: 12px;
+        color: #8d9399;
+        margin: 12px 0;
+      }
+      .property {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        .color-box {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          .cololorSelect {
+            width: 32px;
+            height: 20px;
+            overflow: hidden;
+            position: relative;
+            margin: 4px 0;
+            .fix-box-1 {
+              margin-top: -8px;
+              margin-left: -8px;
+              /deep/ .el-color-picker__trigger {
+                width: 200px;
+                height: 200px;
+              }
+            }
+          }
+        }
+        .line-width {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          margin-left: 8px;
+          position: relative;
+        }
+        span {
+          font-size: 12px;
+          color: #1f2429;
+          margin-top: 4px;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/editview/rightPropertyBar/baseLinePro.vue

@@ -1,4 +1,166 @@
 <!-- 基本线的属性框 -->
 <template>
-  <div class="baseLinePro">基本线的属性框</div>
-</template>
+  <div class="base-line">
+    <div class="title">属性</div>
+    <ul>
+      <li>
+        <div class="small-title">边框</div>
+        <div class="property">
+          <div class="color-box">
+            <div class="cololorSelect">
+              <el-color-picker class="fix-box-1" v-model="color"></el-color-picker>
+            </div>
+            <span>颜色</span>
+          </div>
+          <div class="line-width">
+            <el-input-number
+              style="width:80px"
+              v-model="num"
+              controls-position="right"
+              @change="handleChange"
+              size="mini"
+              :min="1"
+              :max="20"
+              :maxlength="100"
+            ></el-input-number>
+            <span>线宽</span>
+          </div>
+          <div class="line-width">
+            <a-select
+              style="width: 80px"
+              v-model="borderStyle"
+              :default-value="borderLineOption[0].id"
+              @change="changeBorder"
+            >
+              <a-select-option
+                v-for="item in borderLineOption"
+                :key="item.id"
+                :label="item.src"
+                :value="item.id"
+              >
+                <img :src="item.src" alt width="60" />
+              </a-select-option>
+            </a-select>
+            <span>线型</span>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import bus from "@/bus/bus";
+// import { Select } from 'ant-design-vue';
+export default {
+  // components:{Select},
+  data() {
+    return {
+      size: 12, //font-size
+      text: "", //文本
+      color: "#cccccc", //颜色
+      activeName: "",
+      num: 1,
+      borderLineOption: [
+        {
+          id: "solid",
+          src: require("@/assets/images/solidLine.png"),
+        },
+        {
+          id: "dashed",
+          src: require("@/assets/images/dashedLine.png"),
+        },
+        {
+          id: "dotted",
+          src: require("@/assets/images/dotLine.png"),
+        },
+      ],
+      borderStyle: "solid",
+    };
+  },
+  methods: {
+    // 改变文本大小
+    updateSize(val) {
+      bus.$emit("baseTextSize", val);
+    },
+    // 输入文本
+    handleChangeText() {},
+    handleChange() {},
+    // 改变文字颜色
+    changeColor() {},
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    changeBorder() {},
+  },
+  mounted() {
+    // console.log(Select)
+  },
+};
+</script>
+<style lang="less" scoped>
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+.base-line {
+  .title {
+    height: 47px;
+    border-bottom: 1px solid #979797;
+    color: #646c73;
+    font-size: 16px;
+    padding-left: 12px;
+    box-sizing: border-box;
+  }
+  ul {
+    width: calc(~"100% - 24px");
+    margin: -1px 12px 0 12px;
+    li {
+      border-top: 1px solid #979797;
+      .small-title {
+        font-size: 12px;
+        color: #8d9399;
+        margin: 12px 0;
+      }
+      .property {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        .color-box {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          .cololorSelect {
+            width: 32px;
+            height: 20px;
+            overflow: hidden;
+            position: relative;
+            margin: 4px 0;
+            .fix-box-1 {
+              margin-top: -8px;
+              margin-left: -8px;
+              /deep/ .el-color-picker__trigger {
+                width: 200px;
+                height: 200px;
+              }
+            }
+          }
+        }
+        .line-width {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          margin-left: 8px;
+          position: relative;
+        }
+        span {
+          font-size: 12px;
+          color: #1f2429;
+          margin-top: 4px;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/editview/rightPropertyBar/baseTextPro.vue

@@ -7,7 +7,9 @@
         <div class="small-title">边框</div>
         <div class="property">
           <div class="color-box">
-            <div class="cololorSelect"></div>
+            <div class="cololorSelect">
+              <el-color-picker class="fix-box-1" v-model="color"></el-color-picker>
+            </div>
             <span>颜色</span>
           </div>
           <div class="line-width">
@@ -23,23 +25,11 @@
             ></el-input-number>
             <span>线宽</span>
           </div>
-          <div class="line-width">
-            <a-select
-              style="width: 80px"
-              v-model="borderStyle"
-              :default-value="borderLineOption[0].id"
-              @change="changeBorder"
-            >
-              <a-select-option
-                v-for="item in borderLineOption"
-                :key="item.id"
-                :label="item.src"
-                :value="item.id"
-              >
-                <img :src="item.src" alt width="80" />
-              </a-select-option>
-            </a-select>
-            <span>线型</span>
+          <div class="color-box">
+            <div class="cololorSelect">
+              <el-color-picker class="fix-box-1" v-model="color"></el-color-picker>
+            </div>
+            <span>背景颜色</span>
           </div>
         </div>
       </li>
@@ -132,7 +122,17 @@ li {
           .cololorSelect {
             width: 32px;
             height: 20px;
-            background: #0091ff;
+            overflow: hidden;
+            position: relative;
+            margin: 4px 0;
+            .fix-box-1 {
+              margin-top: -8px;
+              margin-left: -8px;
+              /deep/ .el-color-picker__trigger {
+                width: 200px;
+                height: 200px;
+              }
+            }
           }
         }
         .line-width {

src/components/editview/topToolBar.vue

@@ -100,7 +100,7 @@
           <span>打散</span>
         </li>-->
         <li>
-          <!-- <Icon color="#646A73" :name="isLock?'lock':'unlock'" /> -->
+          <Icon color="#646A73" :name="isLock?'lock':'unlock'" />
           <span>{{!isLock?"解锁":"锁定"}}</span>
         </li>
         <li @click="deleteItem">

src/views/editer.vue

@@ -1,20 +1,75 @@
 <template>
   <div class="editer">
+    <div class="top-bar">
+      <div class="left">
+        <div class="project-name">项目名称***</div>
+        <div class="project-type">/ 项目分类</div>
+        <div class="project-save">自动保存成功-V2.2</div>
+      </div>
+      <div class="right">
+        <img src="./../assets/images/download.png" alt />
+        <img @click="saveTopo" src="./../assets/images/save.png" alt />
+        <img @click="issueTopo" src="./../assets/images/issue.png" alt />
+      </div>
+    </div>
     <topo-editer></topo-editer>
   </div>
 </template>
 <script>
 import topoEditer from "@/components/editview/topoEditer.vue";
+import bus from "@/bus/bus";
 export default {
-  components: {topoEditer},
+  components: { topoEditer },
   data() {
     return {};
-  }
+  },
+  methods: {
+    // 保存图片
+    saveTopo() {
+      bus.$emit("saveTopo");
+    },
+    issueTopo() {},
+  },
 };
 </script>
 <style lang="less" scoped>
-  .editer{
+.editer {
+  width: 100%;
+  height: calc(~"100% - 37px");
+  .top-bar {
     width: 100%;
-    height: 100%;
+    height: 36px;
+    border-bottom: 1px solid #e4e5e7;
+    padding: 0 20px 0 20px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .left {
+      display: flex;
+      align-items: center;
+      .project-name {
+        font-size: 16px;
+        color: #1f2429;
+        font-weight: bold;
+      }
+      .project-type {
+        color: #8d9399;
+        font-size: 14px;
+        margin: 0 4px;
+      }
+      .project-save {
+        color: #8d9399;
+        font-size: 12px;
+        margin-left: 16px;
+      }
+    }
+    .right {
+      img {
+        margin-left: 20px;
+        cursor: pointer;
+      }
+    }
   }
+}
 </style>

vue.config.js

@@ -5,6 +5,15 @@ module.exports = {
             warnings: false,
             errors: false,
         },
+        proxy: {
+            '/labsl': {
+                target: 'http://60.205.177.43:8080/',
+                changeOrigin: true,
+                pathRewrite: {
+                    '^/labsl': '/labsl',
+                },
+            },
+        },
     },
     lintOnSave: false,
     publicPath: '/persagyTopo',