Explorar o código

添加修改信息点Code 栏位

yx %!s(int64=4) %!d(string=hai) anos
pai
achega
7c834fcbfa

+ 11 - 5
src/components/edit/equipmentAttr.vue

@@ -3,10 +3,12 @@
         <p>编辑设备</p>
         <div class='row'>
             <div class='row-tit'>名称</div>
+             <a-input v-model='equipmentName' style='width: 180px'  @change='changeEquipmentName' />
             <!-- <a-button type="link" class="edit-option-btn" @click="OpenEditStatus">{{editStatus[type]}}</a-button> -->
         </div>
         <div class='row'>
-            <a-input v-model='equipmentName' size='small' @change='changeEquipmentName' />
+             <div class='row-tit'>工程信息化对象</div>
+             <a-input style='width: 180px'   />
         </div>
         <div class='row'>
             <div class='row-tit'>信息点</div>
@@ -18,6 +20,10 @@
                 <a-input v-model='info[index].Name' class='input' @change='changeInfoName(index)' />
             </div>
             <div class='row'>
+                <div>信息点Code:</div>
+                <a-input v-model='info[index].Code' class='input' @change='changeInfoName(index)' />
+            </div>
+            <div class='row'>
                 <div class='row-tit'>字号</div>
                 <div class='grid-content'>
                     <a-input-number v-model='info[index].FontSize' @change='changeInfoName(index)' :min='1' :max='100' style='width: 128px' />
@@ -84,9 +90,9 @@ export default {
             this.InfoList = cloneDeep(this.equipmentData.InfoList)
             this.info = []
             this.InfoList.map((item) => {
-                let { Name, FontSize, Color } = item
+                let { Name, FontSize, Color,Code } = item
                 // this.info.push(item.Name)
-                this.info.push({ Name, FontSize, Color })
+                this.info.push({ Name, FontSize, Color, Code })
             })
             // console.log(this.equipmentData)
         },
@@ -96,9 +102,9 @@ export default {
         // 更改信息点名称
         changeInfoName(index) {
             let info = this.info[index]
-            let { Name, FontSize, Color } = info
+            let { Name, FontSize, Color, Code } = info
             console.log(index, info.Name)
-            bus.$emit('changeInfoName', { index, Name, FontSize, Color })
+            bus.$emit('changeInfoName', { index, Name, FontSize, Color, Code })
         },
     },
 }

+ 3 - 8
src/lib/items/SEquipmentItem.ts

@@ -89,12 +89,8 @@ export class SEquipmentItem extends SObjectItem {
      */
     set info(data) {
         // @ts-ignore
-        let { index, Name, FontSize, Color } = data
+        let { index, Name, FontSize, Color, Code } = data
         // 更新信息点名称
-        if (this.epData && index < this.epData.InfoList.length) {
-            // this.textArr[index + 1].text = Name
-            // this.epData.InfoList[index].Name = Name
-        }
         // item对象属性修改
         this.textArr[index + 1].text = Name
         this.textArr[index + 1].font.size = FontSize
@@ -103,6 +99,7 @@ export class SEquipmentItem extends SObjectItem {
         this.epData.InfoList[index].Name = Name
         this.epData.InfoList[index].FontSize = FontSize
         this.epData.InfoList[index].Color = Color
+        this.epData.InfoList[index].Code = Code
         this.update();
     }
 
@@ -226,8 +223,6 @@ export class SEquipmentItem extends SObjectItem {
             arr[index].Name = this.textArr[index + 1].text;
         });
         this.epData.GraphElementType = 'Equipment'
-        // @ts-ignore
-        this.epData.Type = 'equipment'
         return this.epData;
     }
     /**
@@ -274,7 +269,7 @@ export class SEquipmentItem extends SObjectItem {
         textItem.pos.y = Y;
         this.textArr.push(textItem);
         InfoList.push({
-            Code: uuid(),
+            Code: '',
             Name: '请输入',
             X,
             Y,

+ 241 - 0
src/lib/items/SEquipmentTextItem.ts

@@ -0,0 +1,241 @@
+import { SObjectItem, SImageItem, SGraphItem, STextItem } from "@saga-web/graph/lib";
+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";
+import { uuid } from '@/components/mapClass/until';
+// @ts-ignore
+import { cloneDeep } from 'lodash'
+enum StatusType {
+    /** 普通态    */
+    Normal,
+    /** 编辑态    */
+    Edit
+}
+export class SEquipmentTextItem extends SObjectItem {
+    _textArr: STextItem[] = [];
+    /**保存设备数据 */
+    _epData: EquipmentData | any = {};
+    /** 设备名称 */
+    _name: string = '';
+    get textArr(): STextItem[] {
+        return this._textArr
+    }
+    set textArr(v) {
+        this._textArr = v
+        this.update();
+    }
+    // 将EquipmentData保存起来,以便修改status时,可以找到StatusImage
+    get epData(): EquipmentData {
+        return this._epData;
+    }
+    set epData(v: EquipmentData) {
+        this._epData = v;
+        this.update();
+
+    }
+    _info: any[] = []
+    // 修改信息点名称
+    get info(): [] {
+        // @ts-ignore
+        return this._info
+    }
+    /**
+     * @param data 修改信息点信息
+     */
+    set info(data) {
+        // @ts-ignore
+        let { index, Name, FontSize, Color } = data
+        // 更新信息点名称
+        if (this.epData && index < this.epData.InfoList.length) {
+            // this.textArr[index + 1].text = Name
+            // this.epData.InfoList[index].Name = Name
+        }
+        // item对象属性修改
+        this.textArr[index + 1].text = Name
+        this.textArr[index + 1].font.size = FontSize
+        this.textArr[index + 1].color = Color
+        // 数据修改
+        this.epData.InfoList[index].Name = Name
+        this.epData.InfoList[index].FontSize = FontSize
+        this.epData.InfoList[index].Color = Color
+        this.update();
+    }
+
+    /**
+     *
+     * @param parent 父类
+     * @param epData  需要展示的节点信息
+     */
+    constructor(parent: SGraphItem | null, epData: EquipmentData) {
+        super(parent);
+        // if (epData) epData = cloneDeep(epData)
+        // epData && (this.epData = epData);
+        this.epData = cloneDeep(epData)
+        this.moveable = true;
+        this.id = epData.ID;
+        this.zOrder = ItemOrder.textOrder;
+        this.textArr = [];
+        // 有信息点信息时,绘制信息点信息
+        // 加载设备
+        this.loadEquipment(epData);
+    }
+    /**
+     * 加载设备
+     * @param epData 设备信息
+     */
+    loadEquipment(epData: EquipmentData): void {
+        // 位置
+        this.x = epData.Pos.X;
+        this.y = epData.Pos.Y;
+        // 名称
+        this.name = epData.Name
+        let nameItem = new STextItem(this);
+        // nameItem.moveable = true;
+        nameItem.backgroundColor = SColor.Transparent;
+        nameItem.font.size = 14;
+        nameItem.text = epData.Name;
+        // nameItem.moveTo(-epData.Size.Width / 2, epData.Size.Height / 2 + 7);
+        nameItem.moveTo(10, epData.Size.Height + 7);
+        this.textArr.push(nameItem);
+        // 信息点
+        let { InfoList } = epData;
+
+        InfoList.map(({ Name, X, Y, Width, Height, FontSize, Background, Color, TextAlign }) => {
+            let textItem = new STextItem(this);
+            textItem.backgroundColor = new SColor(Background);
+            textItem.width = Width;
+            textItem.height = Height;
+            textItem.text = Name;
+            textItem.font.size = FontSize;
+            textItem.color = new SColor(Color);
+            textItem.pos.x = X;
+            textItem.pos.y = Y;
+            this.textArr.push(textItem);
+        });
+    }
+
+    /**
+     * 宽高发生变化
+     *
+     * @return  SRect   所有子对象的并集
+     * */
+    boundingRect(): SRect {
+        // return new SRect(-this.width / 2, -this.height / 2, this.width, this.height);
+       /*  let rect = this.img.boundingRect().adjusted(this.img.pos.x, this.img.pos.y, 0, 0);
+        if (this.textArr.length) {
+            for (let text of this.textArr) {
+                rect = rect.unioned(text.boundingRect().adjusted(text.pos.x, text.pos.y, 0, 0));
+            }
+        }
+        return rect.adjusted(-5, -5, 10, 10); */
+    } // Function boundingRect()
+    /**
+     * 转换成data
+     */
+    toData(): EquipmentData {
+        //  更新相关数据
+        this.epData.Name = this.name;
+        this.epData.Pos.X = this.x;
+        this.epData.Pos.Y = this.y;
+        this.epData.Size.Width = this.width;
+        this.epData.Size.Height = this.height;
+        // @ts-ignore
+        // infoList中坐标,名称处理
+        this.epData.InfoList.map((item, index, arr) => {
+            arr[index].X = this.textArr[index + 1].pos.x;
+            arr[index].Y = this.textArr[index + 1].pos.y;
+            arr[index].Name = this.textArr[index + 1].text;
+        });
+        this.epData.GraphElementType = 'Equipment'
+        // @ts-ignore
+        this.epData.Type = 'equipment'
+        return this.epData;
+    }
+    /**
+     * 添加信息点
+     */
+    addEquipmentInfo() {
+        let { InfoList } = this.epData;
+        let textItem = new STextItem(this);
+        let Name, X, Y, Width, Height, FontSize, Background, Color, TextAlign
+        if (InfoList.length) {
+            let info = InfoList[InfoList.length - 1]
+            Background = info.Background
+            X = info.X
+            Y = info.Y + 20
+            Width = info.Width
+            Height = info.Height
+            FontSize = info.FontSize
+            Background = info.Background
+            Color = info.Color
+            TextAlign = info.TextAlign
+            Name = info.Name
+            // { Name, X, Y, Width, Height, FontSize, Background, Color, TextAlign } = InfoList[InfoList.length - 1]
+        } else {
+            // 默认设置
+            Background = '#ffffff'
+            X = this.img.width + 10
+            Y = this.img.height / 2 - 6
+            Width = 100
+            Height = 25
+            FontSize = 14
+            Background = '#ffffff'
+            Color = '#000000'
+            TextAlign = 'center'
+            Name = '请输入'
+        }
+        // 信息点对象 属性修改
+        textItem.backgroundColor = new SColor(Background);
+        textItem.width = Width;
+        textItem.height = Height;
+        textItem.text = '请输入';
+        textItem.font.size = FontSize;
+        textItem.color = new SColor(Color);
+        textItem.pos.x = X;
+        textItem.pos.y = Y;
+        this.textArr.push(textItem);
+        InfoList.push({
+            Code: uuid(),
+            Name: '请输入',
+            X,
+            Y,
+            Width,
+            Height,
+            FontSize,
+            Background,
+            TextAlign,
+            Color,
+        })
+        this.update()
+    }
+    // 删除信息点
+    deleteEquipmentInfo() {
+        this.epData.InfoList.pop()
+        if (this.textArr.length) {
+            this.textArr[this.textArr.length - 1].text = '';
+            this.textArr[this.textArr.length - 1].width = 0;
+            this.textArr[this.textArr.length - 1].height = 0;
+            this.textArr[this.textArr.length - 1].backgroundColor = SColor.Transparent;
+            this.textArr.pop()
+        }
+        this.update()
+    }
+    /**
+     * Item绘制操作
+     *
+     * @param   painter painter对象
+     */
+    onDraw(painter: SPainter): void {
+        painter.pen.lineWidth = painter.toPx(1);
+        painter.pen.color = SColor.Black;
+        painter.brush.color = SColor.Transparent;
+        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()
+}

+ 93 - 0
src/lib/items/pou.json

@@ -0,0 +1,93 @@
+{
+    Data:[
+        {
+        	ID: '',                             // 图ID
+            Name: '',                           // 名称
+            CategoryID: '',                     // 图分类ID
+            ProjectID: '',                      // 项目ID
+            BuildingID: '',                     // 建筑ID
+            FloorID: '',                        // 楼层id
+            Note: '',                           // 图说明
+          
+            Elements:{                          // 系统图展示所需数据
+                Nodes:[],                       // 图例节点,所有与工程信息化相关的图例(图标类型与区域)
+                Markers:[],                     // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
+                Relations:[],                   // 管线对象
+                BackgroundImg:'',   //背景图(剖面图)
+            },
+            
+        }
+    ],
+    Message: '',
+    Result: 'Success'
+}
+    Nodes:[
+        {   
+            ID: '',                             // ID
+            Name: '',                           // 名称
+            AttachObjectIds:["Eq001", "Eq002"],                 // 返回工程信息化对象 ID 列表
+            GraphElementType: 'Info',               // 图例类型 None/Line/Zone/Image/Equipment:非图例/线条/区域类型/图标/设备
+            // GraphElementId: '',                 // 对应的图元ID
+            // Num: 1                              // 图例数量
+            Pos: {X: 0, Y: 0},                  // 位置  TODO: 是否需要
+            // Scale: {X: 1, Y: 1, Z: 1},          // 缩放
+            // Rolate: {X: 0, Y: 0, Z: 0},         // 旋转
+            Size: {Width:500, Height: 500},         // 大小
+            // AnchorList:[
+            //         {
+            //             ID: '',                 // 锚点ID
+            //             Pos: '',                // 锚点的坐标
+            //         },
+            //         ...
+            // ],
+            // OutLine: [
+            //     [{X:0,Y:0,Z:0},...],            // 外轮廓 
+            //     ...                             // 内轮廓
+            // ],                                  // 轮廓线
+            InfoList: [
+            		{
+            			Code: '',											// 对应设备的信息点
+            			X: 0,
+            			Y: 0,
+            			Width: 100,
+            			Height: 25,
+            			FontSize: 12,
+            			Background: #000000,
+            			Color: #FFFFFF
+            		}
+            ],
+            // Properties: {
+            	
+            // }                      // 由应用自己定义
+        },
+        ...
+    ]
+    
+关于ImageKey的使用方法:
+1. Image使用公司的Image服务存储;
+2. ImageKey使用Image服务的key的标准;
+
+	Relations: [
+        {
+            ID: '',                             // ID
+            Name: '',                           // 名称
+            GraphElementId: '',                 // 对应的图例ID
+            Node1ID: '',                        // 关联节点1_id
+            Node2ID: '',                        // 关联节点2_id
+            Anchor1ID: '',                      // 关联锚点1_id
+            Anchor2ID: '',                      // 关联锚点2_id
+            Dir: 0,                             // 方向(0:无向,1:节点1到节点2,2:节点2到节点1)
+            LineType: '',                       // 直线(Line),水平垂直
+            PointList: [],                      // 线的顶点坐标
+            Style: ''                           // 线的绘图样式
+        },
+        ...
+    ]
+
+
+PointList: [
+	{X: 0, Y: 0},
+	{X: 100, Y: 0},
+	{X: 100, Y: 20},
+	{X: 300, Y: 80}
+]

+ 95 - 0
src/lib/items/section.json

@@ -0,0 +1,95 @@
+{
+    Data:[
+        {
+        	ID: '',                             // 图ID
+            Name: '',                           // 名称
+            CategoryID: '',                     // 图分类ID
+            ProjectID: '',                      // 项目ID
+            BuildingID: '',                     // 建筑ID
+            FloorID: '',                        // 楼层id
+            Note: '',                           // 图说明
+          
+            Elements:{                          // 系统图展示所需数据
+                Nodes:[],                       // 图例节点,所有与工程信息化相关的图例(图标类型与区域)
+                Markers:[],                     // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
+                Relations:[],                   // 管线对象
+            },
+            
+        }
+    ],
+    Message: '',
+    Result: 'Success'
+}
+
+
+	Nodes:[
+        {   
+            ID: '',                             // ID
+            Name: '',                           // 名称
+            // AttachObjectIds:["Eq001", "Eq002"],                 // 返回工程信息化对象 ID 列表
+            GraphElementType: 'EquipmentSection',               // 图例类型 None/Line/Zone/Image/Equipment:非图例/线条/区域类型/图标/设备
+            BackgroundImage:'', //剖面图 图片key值
+            // GraphElementId: '',                 // 对应的图元ID
+            // Num: 1                              // 图例数量
+            Pos: {X: 0, Y: 0},                  // 位置  TODO: 是否需要
+            // Scale: {X: 1, Y: 1, Z: 1},          // 缩放
+            // Rolate: {X: 0, Y: 0, Z: 0},         // 旋转
+            Size: {Width:500, Height: 500},         // 大小
+            // AnchorList:[
+            //         {
+            //             ID: '',                 // 锚点ID
+            //             Pos: '',                // 锚点的坐标
+            //         },
+            //         ...
+            // ],
+            // OutLine: [
+            //     [{X:0,Y:0,Z:0},...],            // 外轮廓 
+            //     ...                             // 内轮廓
+            // ],                                  // 轮廓线
+            InfoList: [
+            		{
+            			Code: '',											// 对应设备的信息点
+            			X: 0,
+            			Y: 0,
+            			Width: 100,
+            			Height: 25,
+            			FontSize: 12,
+            			Background: #000000,
+            			Color: #FFFFFF
+            		}
+            ],
+            // Properties: {
+            	
+            // }                      // 由应用自己定义
+        },
+        ...
+    ]
+    
+关于ImageKey的使用方法:
+1. Image使用公司的Image服务存储;
+2. ImageKey使用Image服务的key的标准;
+
+	Relations: [
+        {
+            ID: '',                             // ID
+            Name: '',                           // 名称
+            GraphElementId: '',                 // 对应的图例ID
+            Node1ID: '',                        // 关联节点1_id
+            Node2ID: '',                        // 关联节点2_id
+            Anchor1ID: '',                      // 关联锚点1_id
+            Anchor2ID: '',                      // 关联锚点2_id
+            Dir: 0,                             // 方向(0:无向,1:节点1到节点2,2:节点2到节点1)
+            LineType: '',                       // 直线(Line),水平垂直
+            PointList: [],                      // 线的顶点坐标
+            Style: ''                           // 线的绘图样式
+        },
+        ...
+    ]
+
+
+PointList: [
+	{X: 0, Y: 0},
+	{X: 100, Y: 0},
+	{X: 100, Y: 20},
+	{X: 300, Y: 80}
+]

+ 96 - 0
src/lib/items/section1.js

@@ -0,0 +1,96 @@
+let data = {
+    Data: [
+        {
+            ID: '', // 图ID
+            Name: '', // 名称
+            CategoryID: '', // 图分类ID
+            ProjectID: '', // 项目ID
+            BuildingID: '', // 建筑ID
+            FloorID: '', // 楼层id
+            Note: '', // 图说明
+            Elements: {
+                // 系统图展示所需数据
+                Nodes: [], // 图例节点,所有与工程信息化相关的图例(图标类型与区域)
+                Markers: [], // 与工程信息无关的标识对象(增加文本注释,图上的图片说明)
+                Relations: [], // 管线对象
+                BackgroundImg: '', //TODO:  背景图(剖面图)
+            },
+        },
+    ],
+    Message: '',
+    Result: 'Success',
+}
+// 信息点 数据格式
+let Nodes1 = [
+    {
+        ID: '', // ID
+        Code: '', // 对应设备的信息点
+        Name: '', // 名称
+        AttachObjectIds: ['Eq001', 'Eq002'], // 返回工程信息化对象 ID 列表
+        GraphElementType: 'Info', // 图例类型 None/Line/Zone/Image/Equipment/Info:非图例/线条/区域类型/图标/设备
+        Pos: { X: 0, Y: 0 }, // 位置
+        Size: { Width: 100, Height: 25 }, // 大小
+        InfoList: [],
+        Properties: {
+            FontSize: 12,
+            Background: '#000000',
+            Color: '#FFFFFF',
+        }, // 由应用自己定义
+    },
+]
+// 设备类 数据格式
+let Nodes2 = [
+    {
+        ID: '2a3c42d9-b770-4976-ac33-65bd82d4c3ca-1595987409252', //TODO: ?
+        Name: '1#风机',
+        AttachObjectIds: [
+            //TODO: 添加修改入口    返回工程信息化对象 ID 列表
+            'Eq001',
+            'Eq002',
+        ],
+        Pos: {
+            X: 383,
+            Y: 249,
+        },
+        Size: {
+            Width: 64,
+            Height: 64,
+        },
+        InfoList: [
+            {
+                Code: '93f05b66-d94e-4352-89a4-493679e65567-1595987467974', // TODO: 添加修改入口  对应设备的信息点
+                Name: '风量',
+                X: 90,
+                Y: 34,
+                Width: 100,
+                Height: 25,
+                FontSize: 14,
+                Background: '#ffffff',
+                TextAlign: 'center',
+                Color: '#F2C511',
+            },
+        ],
+        Properties: {
+            StatusImage: [
+                {
+                    Status: 'Running',
+                    ImageKey: 'b9d58eb89deb6eb6a6b3d1ff2e8b932e3.png',
+                },
+                {
+                    Status: 'Stop',
+                    ImageKey: '53cde2364e1cb0d75d525cae9d2992ef5.png',
+                },
+                {
+                    Status: 'Selected',
+                    ImageKey: '',
+                },
+                {
+                    Status: 'Warning',
+                    ImageKey: '',
+                },
+            ],
+        },
+        GraphElementType: 'Equipment',
+        Type: 'equipment',
+    },
+]