Pārlūkot izejas kodu

'点击设备设施逻辑处理'

zhangyu 4 gadi atpakaļ
vecāks
revīzija
91ee206425

+ 118 - 49
src/components/floorMap/index.vue

@@ -14,29 +14,29 @@
                 <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-tab-pane v-if="tabData.tableData.length" label="设备设施" name="equip">
+                    <el-table :data="tabData.tableData" max-height="235" style="width: 100%">
+                        <el-table-column prop="id" 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>
+                                <el-button @click="handleClickEquipDetail(scope.row)" type="text" size="small">查看</el-button>
                             </template>
                         </el-table-column>
                     </el-table>
-                    <div style="text-align: right; margin-top: 10px;">
+                    <!-- <div style="text-align: right; margin-top: 10px;">
                         <el-button size="mini" type="primary" @click="visible = false">查看详情</el-button>
-                    </div>
+                    </div> -->
                 </el-tab-pane>
-                <el-tab-pane label="位置" name="point">
+                <el-tab-pane v-if="tabData.pointData.length" label="位置" name="point">
                     <ul class="pointList">
-                        <li v-for="point in pointList" :key="point.id">
+                        <li v-for="point in tabData.pointData" :key="point.id">
                             <span :title="point.name">{{point.name}}</span>
-                            <a>查看</a>
+                            <a @click="handleClickPointDeatil(point)">查看</a>
                         </li>
                     </ul>
-                    <div style="text-align: right; margin-top: 10px;">
-                        <el-button size="mini" type="primary" @click="visible = false">查看控制商铺范围</el-button>
+                    <div style="text-align: right; margin-top: 10px;" v-show="showBtnWell">
+                        <el-button size="mini" type="primary" @click="handleClickHightLight(tabData.pointData)">查看控制商铺范围</el-button>
                     </div>
                 </el-tab-pane>
             </el-tabs>
@@ -83,31 +83,11 @@ export default {
                 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"}
-            ]
+            tabData: {
+                tableData: [],
+                pointData: []
+            },
+            showBtnWell: false
         }
     },
     props: {
@@ -133,17 +113,102 @@ export default {
     },
     methods: {
         handleClickLegendItem(item, events) {
-            const e = events[0];
+            this.tabData = {tableData: [], pointData: []};
+            this.showBtnWell = false;
             this.visible = false;
-            this.popoverPosition.top = `${e.clientY}px`;
-            this.popoverPosition.left = `${e.clientX}px`;
-            this.$nextTick(() => {
-                this.visible = true;
-            })
+            console.log(item)
+            if (item.data.AttachObjectIds && item.data.AttachObjectIds.length) {
+                const e = events[0];
+                item.data.AttachObjectIds.forEach(v => {
+                    if (v.type == "Image") {
+                        this.tabData.tableData.push(v);
+                    } else if (v.type == "Zone") {
+                        this.tabData.pointData.push(v);
+                    }
+                })
+                this.activeName = this.tabData.tableData.length?"equip":"point";
+                this.popoverPosition.top = `${e.clientY}px`;
+                this.popoverPosition.left = `${e.clientX}px`;
+                this.$nextTick(() => {
+                    if (this.tabData.tableData.length && !this.tabData.pointData.length) { //只绑定了设备
+                        if (this.tabData.tableData.length == 1) { //绑定了一个设备(跳详情)
+
+                        } else { //绑定了多个设备(跳表格)
+
+                        }
+                    } else if (!this.tabData.tableData.length && this.tabData.pointData.length) { //只绑定了位置
+                        if (
+                            item.data.GraphElementId == '100050' ||
+                            item.data.GraphElementId == '100055' ||
+                            item.data.GraphElementId == '100056' ||
+                            item.data.GraphElementId == '100057'
+                        ) { //判断是否为电井
+                            this.visible = true;
+                            this.showBtnWell = true;
+                        } else {
+                            if (this.tabData.pointData.length == 1) { //不是电井并且只绑定了一个位置(跳详情)
+
+                            } else {
+                                this.visible = true;
+                            }
+                        }
+
+                    } else if (this.tabData.tableData.length && this.tabData.pointData.length) { //既绑定了设备又绑定了位置
+                        this.visible = true;
+                    }
+                })
+            }
         },
+        // 切换浮层tab
         handleClickTab() {
 
         },
+        // 查看浮层设备详情
+        handleClickEquipDetail(equip) {},
+        // 查看浮层位置详情
+        handleClickPointDeatil(point) {},
+        handleClickHightLight(pointData) {
+            this.clearHightLight();
+            pointData.forEach(point => {
+                let location = point.id ? point.id : '';
+                if (this.wellMap.hasOwnProperty(location)) {
+                    this.wellMap[location].forEach(item => {
+                        item.highLightFlag = true;
+                        item.zOrder = 30;
+                    })
+                } else {
+                    let getParams = {
+                        plazaId: this.plazaId,
+                        floor: this.floorid,
+                        keyword: `${location}:wellnum;`
+                    }
+                    queryShops({ getParams }).then(res => {
+                        let shopsnumList = []
+                        let shopsnumItemList = []
+                        if (res.data && res.data.length) {
+                            for (let floor in res.data[0]) {
+                                if (res.data[0][floor].length) {
+                                    res.data[0][floor].forEach(v => {
+                                        shopsnumList = shopsnumList.concat(v.shopsnumList.split(','))
+                                    })
+                                }
+                            }
+                        }
+                        if (shopsnumList.length) {
+                            this.fParser.spaceList.forEach(item => {
+                                if (shopsnumList.findIndex(name => name == item.data.Name) != -1) {
+                                    item.highLightFlag = true
+                                    item.zOrder = 30
+                                    shopsnumItemList.push(item)
+                                }
+                            })
+                            this.wellMap[location] = shopsnumItemList
+                        }
+                    })
+                }
+            });
+            this.visible = false;
+        },
         ...mapActions(['getfmapID']),
         init(floorid) {
             this.loading = true
@@ -351,11 +416,12 @@ export default {
                         }
                     }
                 }
-                // 选中电井设置电井关联的商铺高亮
-                this.setHightLight(ev[0])
-            } else {
+                // // 选中电井设置电井关联的商铺高亮
+                // this.setHightLight(ev[0])
+            } 
+            // else {
                 this.clearHightLight()
-            }
+            // }
         },
         // 选中电井关联的商铺高亮
         setHightLight(arr) {
@@ -365,9 +431,9 @@ export default {
                 // 添加了位置类型并且选中的类型为电井类型
                 if (
                     (item.data.GraphElementId == '100050' ||
-                        item.data.GraphElementId == '100055' ||
-                        item.data.GraphElementId == '100056' ||
-                        item.data.GraphElementId == '100057') &&
+                    item.data.GraphElementId == '100055' ||
+                    item.data.GraphElementId == '100056' ||
+                    item.data.GraphElementId == '100057') &&
                     location
                 ) {
                     if (this.wellMap.hasOwnProperty(location)) {
@@ -559,6 +625,9 @@ export default {
 }
 </style>
 <style lang="less">
+a:hover {
+    text-decoration: none;
+}
 .el-popover {
     .pointList {
         max-height: 235px;

+ 6 - 5
src/lib/items/SCustomLegendItem.ts

@@ -201,15 +201,16 @@ export class SCustomLegendItem extends SPolygonItem {
     }
 
     /**
-     * 鼠标单击事件
+     * 鼠标按下事件
      *
-     * @param   event       保存事件参数
+     * @param   event   保存事件参数
      * @return  boolean
      */
-    onClick(event: SMouseEvent): boolean {
+    onMouseDown(event: SMouseEvent): boolean {
+        if (event.buttons == 1)
         this.$emit("legendItemClick", event);
-        return super.onClick(event);
-    } // Function onClick()
+        return super.onMouseDown(event);
+    } // Function onMouseDown()
 
     toData(): any {
         this.data.Pos = { X: this.x, Y: this.y };

+ 6 - 5
src/lib/items/SFHFQZoneLegendItem.ts

@@ -196,15 +196,16 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
     }
 
     /**
-     * 鼠标单击事件
+     * 鼠标按下事件
      *
-     * @param   event       保存事件参数
+     * @param   event   保存事件参数
      * @return  boolean
      */
-    onClick(event: SMouseEvent): boolean {
+    onMouseDown(event: SMouseEvent): boolean {
+        if (event.buttons == 1)
         this.$emit("legendItemClick", event);
-        return super.onClick(event);
-    } // Function onClick()
+        return super.onMouseDown(event);
+    } // Function onMouseDown()
 
     toData(): any {
         this.data.Pos = { X: this.x, Y: this.y };

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

@@ -125,6 +125,7 @@ export class SImageLegendItem extends SIconTextItem {
      * @return  boolean
      */
     onMouseDown(event: SMouseEvent): boolean {
+        if (event.buttons == 1)
         this.$emit("legendItemClick", event);
         return super.onMouseDown(event);
     } // Function onMouseDown()

+ 6 - 5
src/lib/items/SSCPZZoneLegendItem.ts

@@ -204,15 +204,16 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
     }
 
     /**
-     * 鼠标单击事件
+     * 鼠标按下事件
      *
-     * @param   event       保存事件参数
+     * @param   event   保存事件参数
      * @return  boolean
      */
-    onClick(event: SMouseEvent): boolean {
+    onMouseDown(event: SMouseEvent): boolean {
+        if (event.buttons == 1)
         this.$emit("legendItemClick", event);
-        return super.onClick(event);
-    } // Function onClick()
+        return super.onMouseDown(event);
+    } // Function onMouseDown()
 
     toData(): any {
         this.data.Pos = { X: this.x, Y: this.y };

+ 6 - 5
src/lib/items/SZoneLegendItem.ts

@@ -197,15 +197,16 @@ export class SZoneLegendItem extends SPolygonItem {
     }
 
     /**
-     * 鼠标单击事件
+     * 鼠标按下事件
      *
-     * @param   event       保存事件参数
+     * @param   event   保存事件参数
      * @return  boolean
      */
-    onClick(event: SMouseEvent): boolean {
+    onMouseDown(event: SMouseEvent): boolean {
+        if (event.buttons == 1)
         this.$emit("legendItemClick", event);
-        return super.onClick(event);
-    } // Function onClick()
+        return super.onMouseDown(event);
+    } // Function onMouseDown()
 
     toData(): any {
         this.data.Pos = { X: this.x, Y: this.y };

+ 6 - 5
src/lib/items/TipelineItem.ts

@@ -143,15 +143,16 @@ export class TipelineItem extends SPolylineItem {
   }
 
   /**
-     * 鼠标单击事件
+     * 鼠标按下事件
      *
-     * @param   event       保存事件参数
+     * @param   event   保存事件参数
      * @return  boolean
      */
-    onClick(event: SMouseEvent): boolean {
+    onMouseDown(event: SMouseEvent): boolean {
+      if (event.buttons == 1)
       this.$emit("legendItemClick", event);
-      return super.onClick(event);
-  } // Function onClick()
+      return super.onMouseDown(event);
+  } // Function onMouseDown()
 
   /** 获取data数据  */
   toData(): Relation | null {