YaolongHan 4 năm trước cách đây
mục cha
commit
29bfe870d7

+ 34 - 2
package-lock.json

@@ -4338,8 +4338,7 @@
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz?cache=0&sync_timestamp=1572279720382&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdeepmerge%2Fdownload%2Fdeepmerge-1.5.2.tgz",
-      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=",
-      "dev": true
+      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
     },
     "default-gateway": {
       "version": "5.0.5",
@@ -4813,6 +4812,29 @@
       "integrity": "sha1-ziopiYZNIz7rgEN7EwadvKkAzQA=",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.13.2",
+      "resolved": "http://192.168.200.80:8081/repository/npm-saga/element-ui/-/element-ui-2.13.2.tgz",
+      "integrity": "sha512-r761DRPssMPKDiJZWFlG+4e4vr0cRG/atKr3Eqr8Xi0tQMNbtmYU1QXvFnKiFPFFGkgJ6zS6ASkG+sellcoHlQ==",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      },
+      "dependencies": {
+        "async-validator": {
+          "version": "1.8.5",
+          "resolved": "http://192.168.200.80:8081/repository/npm-saga/async-validator/-/async-validator-1.8.5.tgz",
+          "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+          "requires": {
+            "babel-runtime": "6.x"
+          }
+        }
+      }
+    },
     "elliptic": {
       "version": "6.5.2",
       "resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.2.tgz?cache=0&sync_timestamp=1574449776597&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felliptic%2Fdownload%2Felliptic-6.5.2.tgz",
@@ -8263,6 +8285,11 @@
       "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "http://192.168.200.80:8081/repository/npm-saga/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz?cache=0&sync_timestamp=1577052941951&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnpm-run-path%2Fdownload%2Fnpm-run-path-2.0.2.tgz",
@@ -11241,6 +11268,11 @@
         "neo-async": "^2.6.0"
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "http://192.168.200.80:8081/repository/npm-saga/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz",

+ 1 - 0
package.json

@@ -16,6 +16,7 @@
     "@saga-web/topology": "1.0.84",
     "ant-design-vue": "^1.6.0",
     "core-js": "^3.6.4",
+    "element-ui": "^2.13.2",
     "meri-design": "^1.2.9",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",

+ 1 - 1
src/api/editer.js

@@ -18,5 +18,5 @@ export function saveGroup(postParams) {
 
 //查询系统图展示所需数据
 export function readGroup(postParams) {
-    return httputils.postJson(`${testApi}/graph/read?graphId=9afae5a3208f4ee4be4ebaed19cca47b&projectId=1`, postParams)
+    return httputils.fetchJson(`${testApi}/graph/read`, postParams)
 }

+ 16 - 16
src/api/httputils.js

@@ -1,6 +1,6 @@
 import axios from "axios"
 import store from "@/store"
-// import { MessageBox } from "element-ui"
+import { MessageBox } from "element-ui"
 
 const CancelToken = axios.CancelToken
 let cancel
@@ -40,22 +40,22 @@ axiosservice.interceptors.response.use(
         const resp = res.data
         if (resp.result === "unauthc") {
             store.commit("logined", false)
-            // MessageBox.confirm("未登陆或登陆信息已失效, 是否重新登陆?", "提示", {
-            //     confirmButtonText: "确定",
-            //     cancelButtonText: "取消",
-            //     type: "error",
-            // })
-                // .then((resp) => {
-                //     //console.log('--------------------------- confirm', resp)
-                //     //router.push('/login')
-                //     window.location.reload()
-                // })
-                // .catch((error) => {
-                //     //console.log('--------------------------- cancel', error)
-                //     console.log("")
-                // })
+            MessageBox.confirm("未登陆或登陆信息已失效, 是否重新登陆?", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "error",
+            })
+                .then((resp) => {
+                    //console.log('--------------------------- confirm', resp)
+                    //router.push('/login')
+                    window.location.reload()
+                })
+                .catch((error) => {
+                    //console.log('--------------------------- cancel', error)
+                    console.log("")
+                })
         } else if (resp.result == "unauthorization") {
-            // MessageBox.alert("无权操作", { title: "警告", type: "error" })
+            MessageBox.alert("无权操作", { title: "警告", type: "error" })
         }
         //console.log('axios interceptors resp2 = ', resp.success, resp.errorCode, resp.errorMessage, res)
         return res

+ 27 - 11
src/components/baseEditer.vue

@@ -13,11 +13,12 @@ import { FloorView } from "./../lib/FloorView";
 import { EditScence } from "./mapClass/EditScence";
 import bus from "@/bus";
 import { saveGroup, readGroup } from "@/api/editer.js";
+import { STopologyParser } from "./../lib/parsers/STopologyParser";
 export default {
   props: {
-    cmd: {
-      type: Number,
-      default: 0,
+    cmdType: {
+      type: String,
+      default: "choice",
       required: false
     },
     changeTextMsg: {
@@ -46,9 +47,7 @@ export default {
     this.init();
     // 挂在bus
     this.getBus();
-    // 测试read数据
-    const data = {};
-    readGroup(data);
+    // 读取业务图
   },
   methods: {
     init() {
@@ -78,8 +77,17 @@ export default {
         });
         this.view.scene = this.scene;
         this.view.fitSceneToView();
-        this.$loading.close(loadings);
+        // this.$loading.close(loadings);
       });
+      // this.readGroup().then(data => {
+      //   // const parserData = new STopologyParser().parseData(data);
+      //   // console.log('parserData',parserData)
+      //   // this.view.scene = this.scene;
+      //   // parserData.zoneLegendList.forEach(t => {
+      //   //   this.scene.addItem(t);
+      //   // });
+      //   // this.view.fitSceneToView();
+      // });
       this.scene.emitChange = this.emitChange;
     },
     // 监听变化
@@ -173,13 +181,21 @@ export default {
           }
         });
       });
+    },
+    // 读取数据
+    readGroup() {
+      const data = {
+        graphId: "c11fd87cbc654e18a3839f4488edf5b9",
+        projectId: 1
+      };
+      return readGroup(data);
     }
   },
   watch: {
-    cmd: {
+    cmdType: {
       handler(cmd) {
-        if (cmd == null) {
-          cmd = 0;
+        if (cmd == null || cmd == "") {
+          cmd = "choice";
         }
         this.scene.setCmd = cmd;
       },
@@ -187,7 +203,7 @@ export default {
     },
     "scene.cmd": {
       handler(cmd) {
-        this.$emit("setCmd", cmd);
+        this.$emit("setCmdType", cmd);
       },
       deep: true
     }

+ 64 - 27
src/components/edit/left_toolbar.vue

@@ -1,17 +1,37 @@
 <template>
   <div id="left_toolbar">
     <ul class="list-1">
-      <li v-on:mouseout="mouseoutActive(item)" v-on:mouseover="mouseoverActive(item)" v-for="(item,i) in baseChoice" :key="i"
-        @click="toolActionClick(item)" v-bind:class="{ actives:item.isChoice}">
+      <li
+        v-on:mouseout="mouseoutActive(item)"
+        v-on:mouseover="mouseoverActive(item)"
+        v-for="(item,i) in baseChoice"
+        :key="i"
+        @click="toolActionClick(item)"
+        v-bind:class="{ actives:item.isChoice}"
+      >
         <div class="item">
-          <img v-show="!item.isHover && !item.isChoice" :src="require(`./../../assets/images/${item.img}`)" alt />
-          <img v-show="item.isHover || item.isChoice " :src="require(`./../../assets/images/${item.hoverImg}`)" alt />
+          <img
+            v-show="!item.isHover && !item.isChoice"
+            :src="require(`./../../assets/images/${item.img}`)"
+            alt
+          />
+          <img
+            v-show="item.isHover || item.isChoice "
+            :src="require(`./../../assets/images/${item.hoverImg}`)"
+            alt
+          />
         </div>
       </li>
     </ul>
     <ul class="list-2">
-      <li v-on:mouseout="mouseoutActive(item)" v-on:mouseover="mouseoverActive(item)" v-for="(item,i) in systemChoice" @click="showDrawer(item)"
-        :key="i" v-bind:class="{ actives:item.isChoice}">
+      <li
+        v-on:mouseout="mouseoutActive(item)"
+        v-on:mouseover="mouseoverActive(item)"
+        v-for="(item,i) in systemChoice"
+        @click="showDrawer(item)"
+        :key="i"
+        v-bind:class="{ actives:item.isChoice}"
+      >
         <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 />
@@ -21,7 +41,13 @@
     </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" @click="extractItem">
+      <li
+        v-on:mouseout="mouseoutActive(item)"
+        v-on:mouseover="mouseoverActive(item)"
+        v-for="(item,i) in extractChoice"
+        :key="i"
+        @click="extractItem"
+      >
         <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 />
@@ -43,8 +69,15 @@
     <!-- 打开弹窗 -->
     <transition name="fade">
       <div class="drawer-model" id="drawer-model" v-show="visible">
-        <a-drawer placement="left" :closable="false" :visible="visible" :wrap-style="{ position: 'absolute',}" @close="onClose" :getContainer="false">
-          <div class="drawer-model-body" v-show="activeItem ==1 || activeItem ==2">
+        <a-drawer
+          placement="left"
+          :closable="false"
+          :visible="visible"
+          :wrap-style="{ position: 'absolute',}"
+          @close="onClose"
+          :getContainer="false"
+        >
+          <div class="drawer-model-body">
             <div class="btn-list">
               <a-button-group>
                 <a-button type="primary">绘制</a-button>
@@ -55,7 +88,7 @@
               <div class="title">{{item.Name}}</div>
               <ul class="example">
                 <li
-                  @click="getexampleItem"
+                  @click="getexampleItem(item)"
                   v-for="(items,indexs) in item.GraphElements"
                   :key="indexs"
                 >
@@ -69,9 +102,14 @@
               </ul>
             </div>
           </div>
-          <div class="drawer-model-body drawer-model-body-extract" v-show="activeItem ==3">
+          <div class="drawer-model-body drawer-model-body-extract">
             <a-table :columns="columns" :data-source="data" size="small" :pagination="false">
-              <a-tag slot="address" slot-scope="text, record, index" :color="'geekblue'" @click="pickUp(text, record, index)">{{ text }}</a-tag>
+              <a-tag
+                slot="address"
+                slot-scope="text, record, index"
+                :color="'geekblue'"
+                @click="pickUp(text, record, index)"
+              >{{ text }}</a-tag>
             </a-table>
           </div>
         </a-drawer>
@@ -81,7 +119,7 @@
 </template>
 <script>
 import itemTree from "./leftbar_components/itemTree";
-import { queryByGroup } from "@/api/editer.js"
+import { queryByGroup } from "@/api/editer.js";
 import bus from "@/bus";
 import { queryGroup } from "@/api/editer.js";
 import { mapState, mapActions } from "vuex";
@@ -101,7 +139,7 @@ const columns = [
   {
     title: "操作",
     dataIndex: "address",
-    scopedSlots: { customRender: 'address' }
+    scopedSlots: { customRender: "address" }
   }
 ];
 const data = [
@@ -124,9 +162,9 @@ const data = [
 export default {
   components: { itemTree },
   props: {
-    cmd: {
-      type: Number,
-      default: 0,
+    cmdType: {
+      type: String,
+      default: '',
       required: false
     }
   },
@@ -140,7 +178,7 @@ export default {
           isHover: true, //是否hover
           isChoice: true,
           name: "选择", //类型
-          cmd: 0
+          type: "choice"
         },
         {
           img: "t-line.png", //logo
@@ -148,7 +186,7 @@ export default {
           isHover: false, //是否hover
           isChoice: false,
           name: "画线", //类型
-          cmd: 1
+          type: "baseLine"
         },
         {
           img: "t-text.png", //logo
@@ -156,7 +194,7 @@ export default {
           isHover: false, //是否hover
           isChoice: false,
           name: "画文字", //类型
-          cmd: 2
+          type: "baseText"
         },
         {
           img: "t-img.png", //logo
@@ -164,7 +202,7 @@ export default {
           isHover: false, //是否hover
           isChoice: false,
           name: "画图片", //类型
-          cmd: 3
+          type: "baseImage"
         }
       ],
       // 系统选择
@@ -231,7 +269,7 @@ export default {
         a.isChoice = false;
       });
       item.isChoice = true;
-      this.$emit("setCmd", item.cmd);
+      this.$emit("setCmdType", item.type);
     },
     showDrawer(item) {
       if (item.isChoice) {
@@ -269,9 +307,8 @@ export default {
         a.isChoice = false;
       });
     },
-    getexampleItem() {
+    getexampleItem(item) {
       this.visible = false;
-      const item = 4
       this.$emit("toolActionClick", item);
     },
     // 提取元素
@@ -282,14 +319,14 @@ export default {
     getBus() {
       bus.$on("exportItem", data => {
         this.data = data;
-      })
+      });
     },
     pickUp(text, record, index) {
-      bus.$emit('exportByKey', record);
+      bus.$emit("exportByKey", record);
     }
   },
   watch: {
-    cmd(cmd) {
+    cmdType(cmd) {
       this.baseChoice.forEach(item => {
         item.isChoice = false;
         if (item.cmd == cmd) {

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

@@ -4,20 +4,6 @@
     <a-tabs class="atabless" default-active-key="1" @change="callback">
       <a-tab-pane key="1" tab="属性">
         <div class="property">
-          <!-- <ul class="formatting">
-            <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="(item,i) in msgList" :key="i">
               <a-input
@@ -53,56 +39,7 @@
 <script>
 import attrSelect from "@/components/edit/attr_select";
 import bus from "@/bus";
-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: "",
@@ -151,7 +88,6 @@ export default {
   },
   data() {
     return {
-      poistionList,
       msgList,
       attrType: ""
     };

+ 18 - 15
src/components/mapClass/EditScence.ts

@@ -2,7 +2,7 @@ import { SMouseEvent, SUndoStack } from "@saga-web/base";
 import { SGraphScene, SGraphLayoutType } from '@saga-web/graph/lib';
 import { SFloorParser, SLineItem, SPolylineItem, SItemStatus, ItemOrder } from "@saga-web/big";
 import { SGraphItem, SImageItem, STextItem, SGraphPointListInsert, SGraphPointListDelete, SGraphPointListUpdate, SGraphAddCommand } from "@saga-web/graph/lib";
-import { SPolygonItem } from "./SPolygonItem";
+import { SZoneLegendItem } from "@/lib/items/SZoneLegendItem";
 import { TipelineItem } from "@/lib/items/TipelineItem";
 import { SImgTextItem } from "@/lib/items/SImgTextItem"
 import { SPoint, SFont } from '@saga-web/draw/lib';
@@ -18,14 +18,14 @@ export class EditScence extends SGraphScene {
 
     undoStack = new SUndoStack();
     /** 命令 1 绘制直线 */
-    private cmd = 0;
+    private cmd = 'choice';
     /** 获取当前状态 */
-    get getCmd(): number {
+    get getCmd(): string {
         return this.cmd;
     }
     /** 编辑当前状态 */
-    set setCmd(cmd: number) {
-        if (cmd == 0) {
+    set setCmd(cmd: string) {
+        if (cmd == 'choice') {
             this.grabItem = null;
         }
         this.cmd = cmd;
@@ -136,10 +136,10 @@ export class EditScence extends SGraphScene {
             Pos: { x: 0, y: 0 },
             OutLine: [[new SPoint(event.x, event.y)]],
             Properties: {
-                strokeColor:'#3d73c0',
+                strokeColor: '#3d73c0',
                 fillColor: '#eda986'
             },
-            Num:123
+            Num: 123
         }
 
         const Polylines = new SZoneLegendItem(null, Legend);
@@ -171,7 +171,7 @@ export class EditScence extends SGraphScene {
         this.addItem(item);
         this.grabItem == null;
         this.focusItem = item;
-        this.cmd = 0;
+        this.cmd = 'choice';
     }
 
     /**
@@ -185,7 +185,7 @@ export class EditScence extends SGraphScene {
         item.zOrder = ItemOrder.textOrder;
         this.addItem(item);
         this.grabItem == null
-        this.cmd = 0;
+        this.cmd = 'choice';
     }
 
     /**
@@ -382,7 +382,7 @@ export class EditScence extends SGraphScene {
      * 完成事件创建的回调函数
      */
     finishCreated(item: any) {
-        this.setCmd = 0;
+        this.setCmd = 'choice';
         this.focusItem = item;
         this.selectContainer.toggleItem(item)
     }
@@ -393,19 +393,22 @@ export class EditScence extends SGraphScene {
             return this.grabItem.onMouseDown(event);
         }
         switch (this.cmd) {
-            case 1:
+            case 'baseLine':
                 this.addLine(event);
                 break;
-            case 2:
+            case 'baseText':
                 this.addTextItem(event);
                 break;
-            case 3:
+            case 'baseImage':
                 this.addImgItem(event)
                 break;
-            case 4:
+            case 'Zone':
                 this.addPolygonItem(event);
                 break;
-            case 5:
+            // case 'Image':
+            //     this.addPolylineItem(event);
+            //     break;
+            case 'Line':
                 this.addPolylineItem(event);
                 break;
             default:

+ 3 - 1
src/main.ts

@@ -7,7 +7,9 @@ import store from './store'
 import Antd from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.css'
 Vue.config.productionTip = false
-
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+Vue.use(ElementUI)
 import Pui from 'meri-design';
 import 'meri-design/dist/index.css'
 Vue.use(Pui);

+ 5 - 5
src/views/editer.vue

@@ -7,11 +7,11 @@
     <div class="content">
       <!-- 左侧工具栏 -->
       <div class="left_toolbar">
-        <leftToolbar @setCmd="setCmd" :cmd="cmd" @toolActionClick="toolActionClick"></leftToolbar>
+        <leftToolbar @setCmdType="setCmdType" :cmdType="cmdType" @toolActionClick="toolActionClick"></leftToolbar>
       </div>
       <!-- 绘制界面 -->
       <div class="baseEdit">
-        <baseEditer ref="graphy" :cmd="cmd" @setCmd="setCmd" @changeFocusItem="changeFocusItem"></baseEditer>
+        <baseEditer ref="graphy" :cmdType="cmdType" @setCmdType="setCmdType" @changeFocusItem="changeFocusItem"></baseEditer>
         <!-- <baseEditertest ref="graphy"></baseEditertest> -->
         <!-- <baseEditerzy ref="graphy"></baseEditerzy> -->
       </div>
@@ -35,7 +35,7 @@ export default {
   name: "wandaEditer",
   data() {
     return {
-      cmd: 0,
+      cmdType: 'choice',
       focusItemList:null,
     };
   },
@@ -52,8 +52,8 @@ export default {
     toolActionClick(cmd) {
      this.cmd = cmd;
     },
-    setCmd(cmd) {
-      this.cmd = cmd;
+    setCmdType(cmdType) {
+      this.cmdType = cmdType;
     },
     changeFocusItem(item) {
       this.focusItemList = item;