Browse Source

拓扑图修改

yx 4 years ago
parent
commit
b3dccbb3ed

+ 8 - 8
public/systemConf.js

@@ -9,15 +9,15 @@ var __systemConf = {
     imgKey: [
         //拓扑图 imgKey值
         // 开发环境
-        "8bec0771df4c459bb6e692a7eee18d22",
-        "d0a5e641e789480e84c8c4f60fbe1c80",
-        "270abb1b84d5416fa059b68d1f51ac33",
-        "ece9f93ffc754035bcec2e8f27d66a59",
+        // "8bec0771df4c459bb6e692a7eee18d22",
+        // "d0a5e641e789480e84c8c4f60fbe1c80",
+        // "270abb1b84d5416fa059b68d1f51ac33",
+        // "ece9f93ffc754035bcec2e8f27d66a59",
         // 阿里云
-        // "f55f6b82120349fb9e6ed73d6358904d",
-        // "2e1f990306b4464292e1c855cf2ac1f6",
-        // "094ac0cea076454d9eb76fada8dcc3be",
-        // "7785fb244b5945b9b4173a485e712eff",
+        "f55f6b82120349fb9e6ed73d6358904d",
+        "2e1f990306b4464292e1c855cf2ac1f6",
+        "094ac0cea076454d9eb76fada8dcc3be",
+        "7785fb244b5945b9b4173a485e712eff",
     ],
 };
 window.__systemConf = __systemConf;

+ 5 - 1
src/components/baseEditer.vue

@@ -20,7 +20,7 @@ import { SPainter, SColor, SFont, SPoint } from "@saga-web/draw";
 import store from "../store";
 import { Loading } from "element-ui";
 import { Message } from "element-ui";
-import { SEquipParser } from "../../../sagacloud-web/saga-web-big/src";
+// import { SEquipParser } from "../../../sagacloud-web/saga-web-big/src";
 import { SEquipmentParser } from "../lib/parsers/SEquipmentParser";
 import { saveJSON } from "../utils/util";
 import { SEquipmentItem } from "@/lib/items/SEquipmentItem"; // 设备类
@@ -664,6 +664,10 @@ export default {
             bus.$on("changeLengedName", val => {
                 this.scene.upadataLengedName(val);
             });
+            // 更改设备名称
+            bus.$on("changeEquipmentName", val => {
+                this.scene.updateEquipmentName(val);
+            });
             // 改变图例名称
             bus.$on("changeImageNum", val => {
                 this.scene.upadatImageNum(val);

+ 55 - 0
src/components/edit/equipmentAttr.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class='equipment-attr'>
+        <p>编辑设备</p>
+        <div class='row'>
+            <div class='row-tit'>名称</div>
+            <!-- <a-button type="link" class="edit-option-btn" @click="OpenEditStatus">{{editStatus[type]}}</a-button> -->
+        </div>
+        <div class='row'>
+            <a-input v-model='equipmentName' @change='changeEquipmentName' />
+        </div>
+    </div>
+</template>
+<script>
+import bus from '@/bus'
+import { log } from 'util'
+export default {
+    name: 'equipmentAttr',
+    props: {
+        focusItemList: {
+            type: Object,
+            default() {
+                return {}
+            }
+        }
+    },
+    data() {
+        return {
+            equipmentName: '',
+            equipmentData: {}
+        }
+    },
+    components: {},
+    beforeMount() {},
+    created() {
+        // 设置设备名称
+        this.equipmentData = this.focusItemList.itemList[0]
+        this.equipmentName = this.equipmentData.name
+    },
+    mounted() {
+       
+    },
+    methods: {
+        changeEquipmentName() {
+            bus.$emit('changeEquipmentName', this.equipmentName)
+        }
+    }
+}
+</script>
+<style lang='less' scoped>
+.equipment-attr {
+    width: 100%;
+    height: 100%;
+    //   background-color: lightblue;
+}
+</style>

+ 22 - 4
src/components/edit/left_toolbar.vue

@@ -227,7 +227,15 @@ export default {
                     isChoice: false,
                     name: "管线桥架", //类型
                     type: "Line"
-                }
+                },
+                {
+                    img: "t-papeline.png", //logo
+                    hoverImg: "t-papeline-hover.png", //hoverlogo
+                    isHover: false, //是否hover
+                    isChoice: false,
+                    name: "添加设备", //类型
+                    type: "Equipment"
+                },
             ],
             visible: false,
             //提取
@@ -316,7 +324,12 @@ export default {
                     GraphCategoryIds: this.categoryId,
                     Type: item.type
                 };
-
+                //TODO: 添加设备,不进行调用接口,使用mock数据
+                if(item.type === 'Equipment'){
+                    this.spinning = false;
+                    this.itemList = require('../mockData1.js').eqipList
+                    return true
+                }
                 queryGroup(data).then(res => {
                     this.itemList = res.Data;
                 });
@@ -344,8 +357,13 @@ export default {
                 a.isChoice = false;
             });
         },
-        // TODO:
+        // TODO: 添加设备时,单独处理
         getexampleItem(item) {
+            console.log(item)
+            if(item.GraphElementType === 'Equipmnet'){
+                // this.$emit("setCmdType", "equipment");
+                // return true
+            }
             this.$emit("toolActionClick", item);
         },
         // 提取元素
@@ -587,7 +605,7 @@ export default {
                             height: 32px;
                             margin: 0 auto;
                         }
-                        .item-Image {
+                        .item-Image, .item-equipment {
                             width: 28px;
                             height: 28px;
                             margin: 0 auto;

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

@@ -19,7 +19,9 @@
                             <Icon style="vertical-align: middle;" :name="isLock?'lock':'unlock'" />
                         </li>
                     </ul>
-                    <attrSelect v-show="attrType" :type="attrType" :focusItemList="focusItemList" />
+                    <equipment-attr v-if="attrType === 'Equipment'" :focusItemList="focusItemList"/>
+                    <attrSelect v-else :type="attrType" :focusItemList="focusItemList" />
+                    <!-- <attrSelect v-show="attrType !== 'Equipment' " :type="attrType" :focusItemList="focusItemList" /> -->
                 </div>
             </a-tab-pane>
             <a-tab-pane key="2" tab="元素" force-render>
@@ -38,6 +40,7 @@
 </template>
 <script>
 import attrSelect from "@/components/edit/attr_select";
+import equipmentAttr from './equipmentAttr.vue'
 import bus from "@/bus";
 import { SImageMarkerItem } from "../../lib/items/SImageMarkerItem";
 import { SImageLegendItem } from "../../lib/items/SImageLegendItem";
@@ -86,7 +89,7 @@ export default {
         }
     },
     components: {
-        attrSelect
+        attrSelect,equipmentAttr
     },
     created() {
         this.listenElementData();
@@ -179,6 +182,7 @@ export default {
     },
     watch: {
         focusItemList: function(newVal) {
+            console.log('focusItemList',newVal)
             this.attrType = newVal.itemType;
             if (newVal.itemList.length !== 1) {
                 this.msgList.forEach(item => {

+ 33 - 5
src/components/mapClass/EditScence.ts

@@ -143,7 +143,10 @@ export class EditScence extends SGraphScene {
             // 点选
             this.clickToAddArea(obj.itemList[0]);
             return;
-        } else {
+        } else if( obj.itemList[0] instanceof SEquipmentItem){
+            itemType = "Equipment";
+        }
+         else {
             itemType = "";
         }
         if (obj.itemList.length == 1) {
@@ -156,7 +159,7 @@ export class EditScence extends SGraphScene {
         };
         this.emitChange(msg);
     }
-    emitChange(msg: any) {}
+    emitChange(msg: any) { }
 
     /**
      * 增加线段item
@@ -482,7 +485,7 @@ export class EditScence extends SGraphScene {
     /**
      * 更改item对应属性
      */
-    editItemStatus(): void {}
+    editItemStatus(): void { }
 
     /**
      * 更改文本对应属性
@@ -676,6 +679,13 @@ export class EditScence extends SGraphScene {
             this.scenceUpdate(this);
         }
     }
+    /**
+     * 更改item 名称
+     * @param val string border类型
+     */
+    updateEquipmentName(val: string): void {
+        this.focusItem!.name = val;
+    }
 
     /**
      * 更改item Num数量
@@ -821,7 +831,7 @@ export class EditScence extends SGraphScene {
             this.scenceUpdate(this);
         }
     }
-    scenceUpdate(scence: any) {}
+    scenceUpdate(scence: any) { }
 
     /**
      * 对齐指定item
@@ -868,7 +878,7 @@ export class EditScence extends SGraphScene {
     /**
      * 锁住item
      */
-    lockItem(): void {}
+    lockItem(): void { }
 
     /**
      * 执行取消操作
@@ -1017,6 +1027,7 @@ export class EditScence extends SGraphScene {
      * @return	boolean
      */
     onDoubleClick(event: SMouseEvent): boolean {
+        console.log('onDoubleClick')
         if (!this.isEditStatus) {
             return true;
         } else {
@@ -1423,8 +1434,25 @@ export class EditScence extends SGraphScene {
         */
         // @ts-ignore
         let imgKey = window.__systemConf.imgKey;
+        console.log(this._legend)
         let data = {
             ID: uuid(), // ID
+            Name: this._legend.Name, // 名称
+            AttachObjectIds: ["Eq001", "Eq002"], // 返回工程信息化对象 ID 列表
+            Pos: { X: event.x, Y: event.y }, // 位置
+            Size: { Width: 80, Height: 80 }, // 大小
+            InfoList: this._legend.InfoList || [],
+            Properties: this._legend.Properties||  {
+                StatusImage: [
+                    {
+                        Status: "Running", // 运行
+                        ImageKey: imgKey[0],
+                    },
+                ],
+            }, // 由应用自己定义
+        };
+        let data1 = {
+            ID: uuid(), // ID
             Name: "3#冷冻泵", // 名称
             AttachObjectIds: ["Eq001", "Eq002"], // 返回工程信息化对象 ID 列表
             Pos: { X: event.x, Y: event.y }, // 位置

+ 120 - 0
src/components/mockData1.js

@@ -0,0 +1,120 @@
+// 设备列表
+let eqipList = [
+    {
+        GraphCategoryId: 'LCGN',
+        GraphElements: [
+            // {
+            //     Color: '#ffffff',
+            //     Deleted: false,
+            //     FillColor: '#ffffff',
+            //     FrameColor: '#3da2ed80',
+            //     GraphCategoryId: 'LCGN',
+            //     Id: '100076',
+            //     InfoLocal: [
+            //         {
+            //             name: '暖通系统/空调系统/冷却塔',
+            //             id: '1705',
+            //         },
+            //         {
+            //             name: '暖通系统/空调系统/超市冷却塔',
+            //             id: '1796',
+            //         },
+            //     ],
+            //     InfoTypeId: [],
+            //     Name: '冷却塔',
+            //     OrderId: 16,
+            //     Type: 'Image',
+            //     Unit: '间',
+            //     Url: 'd104a4dc6b0243209c5a6b7d5a7f6030',
+            // },
+            {
+                ID: '123123',
+                Name: '冷冻泵',
+                GraphElementType: 'Equipment',
+                Type: 'equipment',
+                Url: '57781a40684e4f1383a60bb86c681a20',
+                InfoList: [
+                    {
+                        Code: '',
+                        Name: '温度',
+                        X: 30,
+                        Y: 20,
+                        Width: 100,
+                        Height: 25,
+                        FontSize: 12,
+                        Background: '#ffffff',
+                        TextAlign: '',
+                        Color: '#000000',
+                    },
+                    {
+                        Code: '',
+                        Name: '湿度',
+                        X: 40,
+                        Y: 28,
+                        Width: 100,
+                        Height: 25,
+                        FontSize: 12,
+                        Background: '#ffffff',
+                        TextAlign: '',
+                        Color: '#000000',
+                    },
+                ],
+                Properties: {
+                    StatusImage: [
+                        {
+                            Status: 'Running',
+                            ImageKey: '热交换器Running.png',
+                        },
+                        {
+                            Status: 'Stop',
+                            ImageKey: '270abb1b84d5416fa059b68d1f51ac33',
+                        },
+                        {
+                            Status: 'Selected',
+                            ImageKey: 'ece9f93ffc754035bcec2e8f27d66a59',
+                        },
+                        {
+                            Status: 'Warning',
+                            ImageKey: '',
+                        },
+                    ],
+                },
+            },
+        ],
+        Name: '设备列表1',
+    },
+    {
+        GraphElements: [
+            {
+                ID: '12313sfd',
+                Name: '冷冻阀',
+                GraphElementType: 'Equipment',
+                Type: 'equipment',
+                Url: 'd104a4dc6b0243209c5a6b7d5a7f6030',
+                InfoList: [],
+                Properties: {
+                    StatusImage: [
+                        {
+                            Status: 'Running',
+                            ImageKey: '电池阀Running.png',
+                        },
+                        {
+                            Status: 'Stop',
+                            ImageKey: '8bec0771df4c459bb6e692a7eee18d22',
+                        },
+                        {
+                            Status: 'Selected',
+                            ImageKey: 'ece9f93ffc754035bcec2e8f27d66a59',
+                        },
+                        {
+                            Status: 'Warning',
+                            ImageKey: '',
+                        },
+                    ],
+                },
+            },
+        ],
+        Name: '设备列表2',
+    },
+]
+export { eqipList }

+ 62 - 7
src/lib/items/SEquipmentItem.ts

@@ -3,22 +3,35 @@ import { ItemOrder } from "@saga-web/big/lib";
 import { SColor, SPainter, SRect } from "@saga-web/draw/lib";
 import { SMouseEvent } from "@saga-web/base/lib";
 import { EquipmentData } from "../types/EquipmentData";
+enum StatusType {
+    /** 普通态    */
+    Normal,
+    /** 编辑态    */
+    Edit
+}
 export class SEquipmentItem extends SObjectItem {
     // img对象
     img: SImageItem = new SImageItem(this);
-    textArr: STextItem[] = [];
+    _textArr: STextItem[] = [];
     /** imgkey值 */
     _imgKey: string = "";
-    /** 设备状态值 */
+    /** 设备状态值,开启:关闭:故障... */
     _status: string = "Running";
     /**保存设备数据 */
     _epData: EquipmentData | any = {};
+    /** 设备名称 */
+    _name: string = '';
+    /** 设备状态:编辑,正常 */
+    equipmentStatus: StatusType = StatusType.Normal;
+
     get imgKey(): string {
         return this._imgKey;
     }
     set imgKey(v: string) {
         this._imgKey = v;
-        this.img.url = `/serve/topology-wanda/Picture/query/${v}`;
+        // TODO: 
+        // this.img.url = `/serve/topology-wanda/Picture/query/${v}`;
+        this.img.url = `http://60.205.177.43/topolImages/${v}`;
         this.img.connect("imgLoadOver", this, () => {
             // 抛出设备中的图片加载完成事件
             this.$emit("equipImgLoadOver");
@@ -32,6 +45,12 @@ export class SEquipmentItem extends SObjectItem {
         this._status = v;
         this.updateStatus();
     }
+    get textArr(): STextItem[] {
+        return this._textArr
+    }
+    set textArr(v) {
+        this._textArr = v
+    }
     // 将EquipmentData保存起来,以便修改status时,可以找到StatusImage
     get epData(): EquipmentData {
         return this._epData;
@@ -39,6 +58,17 @@ export class SEquipmentItem extends SObjectItem {
     set epData(v: EquipmentData) {
         this._epData = v;
     }
+    // 修改设备名称
+    get name(): string {
+        return this._name
+    }
+    set name(v: string) {
+        this._name = v
+        if (this.textArr && this.textArr.length) {
+            this.textArr[0].text = v
+        }
+    }
+
     /**
      *
      * @param parent 父类
@@ -91,8 +121,9 @@ export class SEquipmentItem extends SObjectItem {
         this.img.width = epData.Size.Width;
         this.img.height = epData.Size.Height;
         // 名称
+        this.name = epData.Name
         let nameItem = new STextItem(this);
-        nameItem.moveable = true;
+        // nameItem.moveable = true;
         nameItem.backgroundColor = SColor.Transparent;
         nameItem.font.size = 14;
         nameItem.text = epData.Name;
@@ -102,8 +133,6 @@ export class SEquipmentItem extends SObjectItem {
         let { InfoList } = epData;
         InfoList.map(({ Name, X, Y, Width, Height, FontSize, Background, Color, TextAlign }) => {
             let textItem = new STextItem(this);
-            textItem.moveable = true;
-            // textItem.backgroundColor = SColor.Transparent;
             textItem.backgroundColor = new SColor(Background);
             textItem.width = Width;
             textItem.height = Height;
@@ -126,6 +155,26 @@ export class SEquipmentItem extends SObjectItem {
         this.imgKey = currentSts.ImageKey || runingSts.ImageKey;
     }
     /**
+   * 鼠标双击事件
+   *
+   * @param	event         事件参数
+   * @return	boolean
+   */
+    onDoubleClick(event: SMouseEvent): boolean {
+        console.log(event)
+        console.log(this)
+        // 如果位show状态 双击改对象则需改为编辑状态
+        if (StatusType.Normal == this.equipmentStatus) {
+            this.equipmentStatus = StatusType.Edit;
+            // this.grabItem(this);
+        } else if (StatusType.Edit == this.equipmentStatus) {
+            this.equipmentStatus = StatusType.Normal;
+            this.releaseItem();
+        }
+        this.update()
+        return true;
+    } // Function onDoubleClick()
+    /**
      * 宽高发生变化
      *
      * @return  SRect   所有子对象的并集
@@ -165,6 +214,12 @@ 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());
+        if (this.equipmentStatus === StatusType.Edit) {
+            painter.drawRect(this.boundingRect());
+            this.textArr.map(item => item.moveable = true)
+        } else {
+            this.textArr.map(item => item.moveable = false)
+
+        }
     } // Function onDraw()
 }

+ 4 - 4
vue.config.js

@@ -16,9 +16,9 @@ module.exports = {
                 },
             },
             '/serve': {
-                target: 'http://192.168.200.87:8088/',
+                // target: 'http://192.168.200.87:8088/',
                 // target: 'http://192.168.200.83:8085/',
-                // target: 'http://60.205.177.43:8080', //阿里云
+                target: 'http://60.205.177.43:8080', //阿里云
                 changeOrigin: true,
                 secure: false,
                 pathRewrite: {
@@ -26,8 +26,8 @@ module.exports = {
                 },
             },
             '/data': {
-                target: 'http://192.168.200.87:9003',
-                // target: 'http://60.205.177.43:9903', //阿里云
+                // target: 'http://192.168.200.87:9003',
+                target: 'http://60.205.177.43:9903', //阿里云
                 changeOrigin: true,
                 secure: false,
                 pathRewrite: {