zhangyu 4 rokov pred
rodič
commit
af7509585a

+ 114 - 1
src/components/floorMap/index.vue

@@ -8,6 +8,40 @@
             <canvasFun @fit='fit' @savePng='savePng' @saveSvg='saveSvg' @saveJson='saveJson' @scale='scale' @showText='showText' ref='canvasFun'></canvasFun>
         </div>
         <room-box ref='boxRoom'></room-box>
+        <el-popover ref="popover" placement="right" trigger="manual" v-model="visible" width="380">
+            <div style="text-align: right;">
+                <span style="float: left;">对应的工程信息化信息</span>
+                <el-link icon="el-icon-close" :underline="false" @click="visible = false"></el-link>
+            </div>
+            <el-tabs v-model="activeName" @tab-click="handleClickTab">
+                <el-tab-pane label="设备设施" name="equip">
+                    <el-table :data="tableData" max-height="235" style="width: 100%">
+                        <el-table-column prop="date" width="80" label="设备内码" :show-overflow-tooltip='true'></el-table-column>
+                        <el-table-column prop="name" label="设备简称" width="208" :show-overflow-tooltip='true'></el-table-column>
+                        <el-table-column label="操作" width="50">
+                            <template slot-scope="scope">
+                                <el-button @click="handleClickeq(scope.row)" type="text" size="small">查看</el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <div style="text-align: right; margin-top: 10px;">
+                        <el-button size="mini" type="primary" @click="visible = false">查看详情</el-button>
+                    </div>
+                </el-tab-pane>
+                <el-tab-pane label="位置" name="point">
+                    <ul class="pointList">
+                        <li v-for="point in pointList" :key="point.id">
+                            <span :title="point.name">{{point.name}}</span>
+                            <a>查看</a>
+                        </li>
+                    </ul>
+                    <div style="text-align: right; margin-top: 10px;">
+                        <el-button size="mini" type="primary" @click="visible = false">查看控制商铺范围</el-button>
+                    </div>
+                </el-tab-pane>
+            </el-tabs>
+        </el-popover>
+        <span class="popStyle" :style="popoverPosition" v-popover:popover></span>
     </div>
 </template>
 <script>
@@ -42,7 +76,38 @@ export default {
             floorid: '', //楼层id
             topologyParser: null, // 解析器数据
             fParser: null, // 底图解析器
-            wellMap: {} // 电井控制商铺映射
+            wellMap: {}, // 电井控制商铺映射
+            activeName: "equip",
+            popoverPosition: {
+                top: 0,
+                left: 0
+            },
+            visible: false,
+            tableData: [{
+                date: '201602',
+                name: '王小虎',
+            }, {
+                date: '201602',
+                name: '王小虎',
+            }, {
+                date: '201602',
+                name: '王小虎',
+            }, {
+                date: '201602',
+                name: '王小虎',
+            }, {
+                date: '201602',
+                name: '王小虎',
+            }],
+            pointList: [
+                {id: "12564", name: "位置简称1"},
+                {id: "12565", name: "位置十多个不舍得放假的国际公法借古讽今维护维护简称2"},
+                {id: "12566", name: "位置简称3"},
+                {id: "12567", name: "位置简称4"},
+                {id: "12568", name: "位置简称5"},
+                {id: "12569", name: "位置简称6"},
+                {id: "12548", name: "位置简称7"}
+            ]
         }
     },
     props: {
@@ -67,6 +132,18 @@ export default {
         ...mapGetters(['plazaId', 'fmapID', 'haveFengMap', 'bunkObj'])
     },
     methods: {
+        handleClickLegendItem(item, events) {
+            const e = events[0];
+            this.visible = false;
+            this.popoverPosition.top = `${e.clientY}px`;
+            this.popoverPosition.left = `${e.clientX}px`;
+            this.$nextTick(() => {
+                this.visible = true;
+            })
+        },
+        handleClickTab() {
+
+        },
         ...mapActions(['getfmapID']),
         init(floorid) {
             this.loading = true
@@ -214,6 +291,7 @@ export default {
                     // 多边形
                     this.topologyParser.zoneLegendList.forEach(t => {
                         this.scene.addItem(t)
+                        t.connect("legendItemClick", t, this.handleClickLegendItem);
                     })
                     // 增加文字
                     this.topologyParser.textMarkerList.forEach(t => {
@@ -230,12 +308,14 @@ export default {
                     // 增加图标类图例
                     this.topologyParser.imageLegendList.forEach(t => {
                         this.scene.addItem(t)
+                        t.connect("legendItemClick", t, this.handleClickLegendItem);
                     })
                     // 增加管线类
                     // 增加图标类图例
                     this.topologyParser.relationList.forEach(t => {
                         t.selectable = true
                         this.scene.addItem(t)
+                        t.connect("legendItemClick", t, this.handleClickLegendItem);
                     })
                     this.view.fitSceneToView()
                     this.view.minScale = this.view.scale
@@ -473,5 +553,38 @@ export default {
         bottom: 40px;
         width: 100%;
     }
+    .popStyle {
+        position: fixed;
+    }
+}
+</style>
+<style lang="less">
+.el-popover {
+    .pointList {
+        max-height: 235px;
+        overflow-y: auto;
+        text-align: right;
+        li {
+            height: 38px;
+            line-height: 38px;
+            padding: 0 12px;
+            cursor: pointer;
+            border-bottom: 1px solid rgba(0,0,0,0.06);
+            span {
+                float: left;
+                width: 260px;
+                text-align: left;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+            a {
+                font-size: 13px;
+            }
+        }
+        li:hover {
+            background-color: #F5F6F7;
+        }
+    }
 }
 </style>

+ 270 - 0
src/lib/items/SCustomLegendItem.ts

@@ -0,0 +1,270 @@
+
+import { SGraphItem, SLineStyle, STextOrigin } from "@saga-web/graph/lib";
+import { Legend } from '../types/Legend';
+import { SPainter, SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
+import { STextItem } from '@saga-web/graph/lib';
+import { hexify, uuid } from "@/components/mapClass/until"
+import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
+import { SMouseEvent } from "@saga-web/base/lib";
+/**
+ * 图例节点Item(区域类型)
+ *
+ * * @author  张宇(taohuzy@163.com)
+ */
+export class SCustomLegendItem extends SPolygonItem {
+    /** 图例节点对象数据 */
+    data: Legend;
+
+    /** text item   */
+    textItem: STextItem = new STextItem(this);
+
+    get text(): string {
+        return this.textItem.text;
+    }
+    set text(v: string) {
+        this.textItem.text = v;
+        this.update();
+    }
+    get color(): SColor {
+        return this.textItem.color;
+    }
+    set color(v: SColor) {
+        this.textItem.color = v;
+    }
+    get font(): SFont {
+        return this.textItem.font;
+    }
+    set font(v: SFont) {
+        this.textItem.font = v;
+    }
+
+    get status(): SItemStatus {
+        return this._status;
+    }
+    // 编辑当前状态
+    set status(value: SItemStatus) {
+        this._status = value;
+        // 如果状态为show则需清栈
+        if (value == SItemStatus.Normal) {
+            // 切换显示状态显示文本
+            this.showText = true;
+            // 切换显示状态不可移动文本
+            this.textItem.moveable = false;
+
+            if (this.undoStack) {
+                this.undoStack.clear();
+            }
+        } else if (value == SItemStatus.Edit) {
+            // 切换编辑状态显示文本
+            this.showText = true;
+            // 切换编辑状态可移动文本
+            this.textItem.moveable = true;
+        } else if (value == SItemStatus.Create) {
+            // 切换创建状态不显示文本
+            this.showText = false;
+            // 切换创建状态不可移动文本
+            this.textItem.moveable = false;
+        }
+        this.update();
+    };
+
+    /** 是否激活  */
+    _isActive: boolean = false;
+    get isActive(): boolean {
+        return this._isActive;
+    } // Get isActive
+    set isActive(v: boolean) {
+        this._isActive = v;
+        if (v) {
+            this.cursor = "pointer";
+        } else {
+            this.cursor = "auto";
+        }
+        this.update();
+    } // Set isActive
+
+    /** 是否显示文字  */
+    _showText: boolean = true;
+    get showText(): boolean {
+        return this._showText;
+    }
+    set showText(v: boolean) {
+        if (v === this._showText) {
+            return
+        }
+        this._showText = v;
+        if (v) {
+            this.textItem.show();
+        } else {
+            this.textItem.hide();
+        }
+    }
+
+    /** 是否蒙版遮罩  */
+    _maskFlag: boolean = false;
+    get maskFlag(): boolean {
+        return this._maskFlag;
+    }
+    set maskFlag(v: boolean) {
+        if (v === this._maskFlag) {
+            return
+        }
+        this._maskFlag = v;
+        this.update()
+    }
+
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      图例节点对象数据
+     */
+    constructor(parent: SGraphItem | null, data: Legend) {
+        super(parent);
+        this.textItem.originPosition = STextOrigin.Centrum;
+        this.textItem.isTransform = false;
+        this.zOrder = ItemOrder.polygonOrder;
+        this.data = data;
+        if (!data.ID) {
+            data.ID = uuid()
+        }
+        this.id = data.ID;
+        this.name = data.Name;
+        this.text = data.Name;
+        if (data) {
+            this.setPointList = [];
+            let setPointList: SPoint[];
+            if (data.OutLine) {
+                if (data.OutLine[0] instanceof SPoint) {
+                    // @ts-ignore
+                    this.setPointList = data.OutLine;
+                } else {
+                    setPointList = data.OutLine.map(i => {
+                        return (new SPoint(i.X, i.Y))
+                    })
+                    this.setPointList = setPointList;
+                }
+            }
+            if (data.Properties.Zorder) {
+                this.zOrder = data.Properties.Zorder;
+            }
+            // 设置线宽
+            if (data.Properties.LineWidth) {
+                this.lineWidth = data.Properties.LineWidth;
+            }
+            if (data.Properties.StrokeColor) {
+                this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
+            }
+            if (data.Properties.FillColor) {
+                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor))
+            }
+            if (data.Properties.TextPos) {
+                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
+            }
+            if (data.Properties.color) {
+                this.color = new SColor(data.Properties.color);
+            }
+            if (data.Properties.font) {
+                this.font = new SFont("sans-serif", data.Properties.font);
+            }
+            if (data.Properties && data.Properties.IsActive) {
+                this.isActive = data.Properties.IsActive;
+            }
+            if (data.AttachObjectIds && data.AttachObjectIds.length) {
+                this.isActive = true;
+            }
+            switch (data.Properties.LineDash) {
+                case "solid":
+                    this.lineStyle = SLineStyle.Solid;
+                    break;
+                case "dotted":
+                    this.lineStyle = SLineStyle.Dotted;
+                    break;
+                case "dashed":
+                    this.lineStyle = SLineStyle.Dashed;
+                    break;
+                default:
+                    this.lineStyle = SLineStyle.Solid;
+            }
+        }
+        // 监听多边形创建完成事件,并动态计算文本位置
+        this.connect("finishCreated", this, () => {
+            // 计算文本位置
+            let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
+                return pre + (cur.x / arr.length)
+            }, 0),
+                y: number = this.getPointList.reduce((pre, cur, index, arr) => {
+                    return pre + (cur.y / arr.length)
+                }, 0);
+            this.textItem.moveTo(x, y);
+        })
+    }
+
+    /**
+     * 鼠标单击事件
+     *
+     * @param   event       保存事件参数
+     * @return  boolean
+     */
+    onClick(event: SMouseEvent): boolean {
+        this.$emit("legendItemClick", event);
+        return super.onClick(event);
+    } // Function onClick()
+
+    toData(): any {
+        this.data.Pos = { X: this.x, Y: this.y };
+        this.data.Name = this.name;
+        this.data.Properties.Zorder = this.zOrder;
+        this.data.Properties.FillColor = this.fillColor.value;
+        this.data.Properties.StrokeColor = this.strokeColor.value;
+        this.data.Properties.LineWidth = this.lineWidth;
+        switch (this.lineStyle) {
+            case SLineStyle.Solid:
+                this.data.Properties.LineDash = "solid";
+                break;
+            case SLineStyle.Dotted:
+                this.data.Properties.LineDash = "dotted";
+                break;
+            case SLineStyle.Dashed:
+                this.data.Properties.LineDash = "dashed";
+                break;
+            default:
+                this.data.Properties.LineDash = "solid";
+        }
+        this.data.OutLine = this.getPointList.map(pos => {
+            return {
+                X: pos.x,
+                Y: pos.y
+            }
+        });
+        this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
+        this.data.Properties.font =  this.font.size;
+        this.data.Properties.color =  this.color.value;
+        this.data.Properties.IsActive = this.isActive;
+        return this.data;
+    }
+
+    onDraw(painter: SPainter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor)
+            color.alpha = color.alpha / 5
+            let brushcolor = new SColor(this.fillColor)
+            brushcolor.alpha = brushcolor.alpha / 5
+            painter.pen.color = color
+            painter.pen.lineCapStyle = SLineCapStyle.Square
+            painter.pen.lineWidth = painter.toPx(this.lineWidth)
+            painter.brush.color = brushcolor
+            if (this.selected) {
+                painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
+                painter.shadow.shadowBlur = 10;
+                painter.shadow.shadowColor = new SColor(`#00000033`);
+                painter.shadow.shadowOffsetX = 5;
+                painter.shadow.shadowOffsetY = 5;
+            }
+            // @ts-ignore
+            painter.drawPolygon([...this.pointList]);
+        } else {
+            super.onDraw(painter);
+        }
+    }
+} // Class SZoneLegendItem

+ 12 - 0
src/lib/items/SFHFQZoneLegendItem.ts

@@ -4,6 +4,7 @@ import { SPainter, SColor, SFont, SPoint, SLineCapStyle } from '@saga-web/draw';
 import { STextItem } from '@saga-web/graph/lib';
 import { hexify } from '@/components/mapClass/until';
 import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
+import { SMouseEvent } from '@saga-web/base/lib';
 /**
  * 图例节点Item(区域类型 --防火分区)
  *
@@ -194,6 +195,17 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
         })
     }
 
+    /**
+     * 鼠标单击事件
+     *
+     * @param   event       保存事件参数
+     * @return  boolean
+     */
+    onClick(event: SMouseEvent): boolean {
+        this.$emit("legendItemClick", event);
+        return super.onClick(event);
+    } // Function onClick()
+
     toData(): any {
         this.data.Pos = { X: this.x, Y: this.y };
         this.data.Name = this.name;

+ 12 - 0
src/lib/items/SImageLegendItem.ts

@@ -3,6 +3,7 @@ import { SIconTextItem } from '@saga-web/big/lib/items/SIconTextItem';
 import { Legend } from '../types/Legend';
 import { ItemOrder, SItemStatus } from '@saga-web/big/lib';
 import { SFont, SColor, SPainter, SRect } from '@saga-web/draw/lib';
+import { SMouseEvent } from "@saga-web/base/lib";
 /**
  * 图例节点Item(图标类型)
  *
@@ -117,6 +118,17 @@ export class SImageLegendItem extends SIconTextItem {
         }
     }
 
+    /**
+     * 鼠标按下事件
+     *
+     * @param   event   保存事件参数
+     * @return  boolean
+     */
+    onMouseDown(event: SMouseEvent): boolean {
+        this.$emit("legendItemClick", event);
+        return super.onMouseDown(event);
+    } // Function onMouseDown()
+
     toData(): Legend {
         this.data.Pos = { X: this.x, Y: this.y };
         this.data.Size = { Width: this.width, Height: this.height };

+ 12 - 0
src/lib/items/SSCPZZoneLegendItem.ts

@@ -4,6 +4,7 @@ import { SPainter, SColor, SFont, SPoint, SLineCapStyle } from '@saga-web/draw';
 import { STextItem } from '@saga-web/graph/lib';
 import { hexify } from '@/components/mapClass/until';
 import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
+import { SMouseEvent } from '@saga-web/base/lib';
 /**
  * 图例节点Item(区域类型 --石材铺装)
  *
@@ -202,6 +203,17 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
         })
     }
 
+    /**
+     * 鼠标单击事件
+     *
+     * @param   event       保存事件参数
+     * @return  boolean
+     */
+    onClick(event: SMouseEvent): boolean {
+        this.$emit("legendItemClick", event);
+        return super.onClick(event);
+    } // Function onClick()
+
     toData(): any {
         this.data.Pos = { X: this.x, Y: this.y };
         this.data.Name = this.name;

+ 12 - 0
src/lib/items/SZoneLegendItem.ts

@@ -4,6 +4,7 @@ import { SPainter, SColor, SFont, SPoint, SLineCapStyle } from '@saga-web/draw';
 import { STextItem } from '@saga-web/graph/lib';
 import { hexify } from '@/components/mapClass/until';
 import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
+import { SMouseEvent } from '@saga-web/base/lib';
 /**
  * 图例节点Item(区域类型)
  *
@@ -195,6 +196,17 @@ export class SZoneLegendItem extends SPolygonItem {
         })
     }
 
+    /**
+     * 鼠标单击事件
+     *
+     * @param   event       保存事件参数
+     * @return  boolean
+     */
+    onClick(event: SMouseEvent): boolean {
+        this.$emit("legendItemClick", event);
+        return super.onClick(event);
+    } // Function onClick()
+
     toData(): any {
         this.data.Pos = { X: this.x, Y: this.y };
         this.data.Name = this.name;

+ 12 - 0
src/lib/items/TipelineItem.ts

@@ -4,6 +4,7 @@ import { SAnchorItem, SGraphItem } from '@saga-web/graph/lib';
 import { Relation } from '../types/Relation';
 import { SPoint } from "@saga-web/draw/lib";
 import { Point } from "@saga-web/big/lib/types/Point";
+import { SMouseEvent } from '@saga-web/base/lib';
 
 /**
  * 管道item
@@ -141,6 +142,17 @@ export class TipelineItem extends SPolylineItem {
     }
   }
 
+  /**
+     * 鼠标单击事件
+     *
+     * @param   event       保存事件参数
+     * @return  boolean
+     */
+    onClick(event: SMouseEvent): boolean {
+      this.$emit("legendItemClick", event);
+      return super.onClick(event);
+  } // Function onClick()
+
   /** 获取data数据  */
   toData(): Relation | null {
     let pointList: Point[] = this.pointList.map(item => {

+ 5 - 0
src/lib/parsers/STopologyParser.ts

@@ -17,6 +17,7 @@ import { ItemOrder } from "@saga-web/big";
 import { SItemStatus } from "@saga-web/big";
 import { SSCPZZoneLegendItem } from '../items/SSCPZZoneLegendItem';
 import { SFHFQZoneLegendItem } from '../items/SFHFQZoneLegendItem';
+import { SCustomLegendItem } from "../items/SCustomLegendItem";
 /**
  * 拓扑图信息解析器
  *
@@ -82,6 +83,10 @@ export class STopologyParser extends SParser {
                 let item = new SFHFQZoneLegendItem(null, t);
                 item.selectable = true;
                 this.zoneLegendList.push(item);
+            }  else if (t.SubType == "CUSTOM") {
+                let item = new SCustomLegendItem(null, t);
+                item.selectable = true;
+                this.zoneLegendList.push(item);
             } else {
                 let item = new SZoneLegendItem(null, t);
                 item.selectable = true;

+ 2 - 2
src/store/index.js

@@ -14,9 +14,9 @@ import router from '../router'
 Vue.use(Vuex)
 export default new Vuex.Store({
     state: {
-        // ssoToken: 'admin:liujiandong',
+        ssoToken: 'admin:liujiandong',
         // ssoToken: '',
-        ssoToken: null,
+        // ssoToken: null,
         plazaName: '',
         isPreview: false,
         lastRoute: '',