Sfoglia il codice sorgente

设备设施配电间

zhulizhen1111 4 anni fa
parent
commit
86275fabd0
2 ha cambiato i file con 117 aggiunte e 107 eliminazioni
  1. 113 106
      src/components/floorMap/index.vue
  2. 4 1
      src/views/room/index.vue

+ 113 - 106
src/components/floorMap/index.vue

@@ -8,76 +8,82 @@
             <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">
+        <el-popover ref='popover' placement='right' trigger='manual' v-model='visible' width='380'>
             <!-- <div style="text-align: right;margin-bottom: 10px;">
                 <span style="float: left;">对应的工程信息化信息</span>
                 <el-link icon="el-icon-close" :underline="false" @click="visible = false"></el-link>
-            </div> -->
+            </div>-->
 
-            <div v-if="equipIds.length && !tabData.pointData.length" style="margin-top: 10px;">
-                <el-table :data="tabData.tableData" max-height="235" style="width: 100%" @row-click='handleClickEquipDetail' v-loading="eqLoading">
-                    <el-table-column prop="sbjc" label="设备简称" width="164" :show-overflow-tooltip='true'></el-table-column>
-                    <el-table-column prop="sl" width="50" label="数量" :show-overflow-tooltip='true'></el-table-column>
-                    <el-table-column prop="sb_status" width="70" label="设备状态" :show-overflow-tooltip='true'></el-table-column>
-                    <el-table-column prop="sbglgs" width="70" label="管理归属" :show-overflow-tooltip='true'></el-table-column>
+            <div v-if='equipIds.length && !tabData.pointData.length' style='margin-top: 10px;'>
+                <el-table :data='tabData.tableData' max-height='235' style='width: 100%' @row-click='handleClickEquipDetail' v-loading='eqLoading'>
+                    <el-table-column prop='sbjc' label='设备简称' width='164' :show-overflow-tooltip='true'></el-table-column>
+                    <el-table-column prop='sl' width='50' label='数量' :show-overflow-tooltip='true'></el-table-column>
+                    <el-table-column prop='sb_status' width='70' label='设备状态' :show-overflow-tooltip='true'></el-table-column>
+                    <el-table-column prop='sbglgs' width='70' label='管理归属' :show-overflow-tooltip='true'></el-table-column>
                     <!-- <el-table-column prop="assetnum" width="80" label="设备内码" :show-overflow-tooltip='true'></el-table-column>
                     <el-table-column label="" width="80" :show-overflow-tooltip='true'>
                         <template slot-scope="scope">
                             <span class="equip-detail-btn">台账详情</span>
                         </template>
-                    </el-table-column> -->
+                    </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> -->
+                </div>-->
             </div>
 
-            <div v-else-if="!equipIds.length && tabData.pointData.length" style="margin-top: 10px;">
-                <ul class="pointList">
-                    <li v-for="point in tabData.pointData" :key="point.id" @click="handleClickPointDeatil(point)">
-                        <span :title="point.name">{{point.name}}</span>
+            <div v-else-if='!equipIds.length && tabData.pointData.length' style='margin-top: 10px;'>
+                <ul class='pointList'>
+                    <li v-for='point in tabData.pointData' :key='point.id' @click='handleClickPointDeatil(point)'>
+                        <span :title='point.name'>{{point.name}}</span>
                         <a>查看</a>
                     </li>
                 </ul>
-                <div style="text-align: right; margin-top: 10px;">
-                    <el-button v-show="showBtnWell" size="mini" type="primary" @click="handleClickHightLight(tabData.pointData)">查看控制商铺范围</el-button>
+                <div style='text-align: right; margin-top: 10px;'>
+                    <el-button v-show='showBtnWell' size='mini' type='primary' @click='handleClickHightLight(tabData.pointData)'>查看控制商铺范围</el-button>
                     <!-- <el-button size="mini" type="primary" @click="visible = false">关闭</el-button> -->
                 </div>
             </div>
 
-            <el-tabs v-else-if="equipIds.length && tabData.pointData.length" v-model="activeName">
-                <el-tab-pane label="设备设施" name="equip">
-                    <el-table :data="tabData.tableData" max-height="235" style="width: 100%" @row-click='handleClickEquipDetail' v-loading="eqLoading">
-                        <el-table-column prop="sbjc" label="设备简称" width="164" :show-overflow-tooltip='true'></el-table-column>
-                        <el-table-column prop="sl" width="50" label="数量" :show-overflow-tooltip='true' align="right"></el-table-column>
-                        <el-table-column prop="sb_status" width="70" label="设备状态" :show-overflow-tooltip='true'></el-table-column>
-                        <el-table-column prop="sbglgs" width="70" label="管理归属" :show-overflow-tooltip='true'></el-table-column>
+            <el-tabs v-else-if='equipIds.length && tabData.pointData.length' v-model='activeName'>
+                <el-tab-pane label='设备设施' name='equip'>
+                    <el-table
+                        :data='tabData.tableData'
+                        max-height='235'
+                        style='width: 100%'
+                        @row-click='handleClickEquipDetail'
+                        v-loading='eqLoading'
+                    >
+                        <el-table-column prop='sbjc' label='设备简称' width='164' :show-overflow-tooltip='true'></el-table-column>
+                        <el-table-column prop='sl' width='50' label='数量' :show-overflow-tooltip='true' align='right'></el-table-column>
+                        <el-table-column prop='sb_status' width='70' label='设备状态' :show-overflow-tooltip='true'></el-table-column>
+                        <el-table-column prop='sbglgs' width='70' label='管理归属' :show-overflow-tooltip='true'></el-table-column>
                         <!-- <el-table-column prop="assetnum" width="80" label="设备内码" :show-overflow-tooltip='true'></el-table-column>
                         <el-table-column label="" width="80" :show-overflow-tooltip='true'>
                             <template slot-scope="scope">
                                 <span class="equip-detail-btn">台账详情</span>
                             </template>
-                        </el-table-column> -->
+                        </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>
                 </el-tab-pane>
-                <el-tab-pane label="位置" name="point">
-                    <ul class="pointList">
-                        <li v-for="point in tabData.pointData" :key="point.id" @click="handleClickPointDeatil(point)">
-                            <span :title="point.name">{{point.name}}</span>
+                <el-tab-pane label='位置' name='point'>
+                    <ul class='pointList'>
+                        <li v-for='point in tabData.pointData' :key='point.id' @click='handleClickPointDeatil(point)'>
+                            <span :title='point.name'>{{point.name}}</span>
                             <a>查看</a>
                         </li>
                     </ul>
-                    <div style="text-align: right; margin-top: 10px;">
-                        <el-button v-show="showBtnWell" size="mini" type="primary" @click="handleClickHightLight(tabData.pointData)">查看控制商铺范围</el-button>
+                    <div style='text-align: right; margin-top: 10px;'>
+                        <el-button v-show='showBtnWell' size='mini' type='primary' @click='handleClickHightLight(tabData.pointData)'>查看控制商铺范围</el-button>
                         <!-- <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>
+        <span class='popStyle' :style='popoverPosition' v-popover:popover></span>
     </div>
 </template>
 <script>
@@ -115,20 +121,20 @@ export default {
             topologyParser: null, // 解析器数据
             fParser: null, // 底图解析器
             wellMap: {}, // 电井控制商铺映射
-            activeName: "equip",
+            activeName: 'equip',
             popoverPosition: {
                 top: 0,
-                left: 0
+                left: 0,
             },
             visible: false,
             eqLoading: true,
             equipIds: [],
             tabData: {
                 tableData: [],
-                pointData: []
+                pointData: [],
             },
             activeItem: null,
-            showBtnWell: false
+            showBtnWell: false,
         }
     },
     props: {
@@ -154,50 +160,53 @@ export default {
     },
     methods: {
         handleClickLegendItem(item, events) {
-            this.tabData = {tableData: [], pointData: []};
-            this.showBtnWell = false;
-            this.visible = false;
-            this.activeItem = null;
-            this.isLoading = true;
+            this.tabData = { tableData: [], pointData: [] }
+            this.showBtnWell = false
+            this.visible = false
+            this.activeItem = null
+            this.isLoading = true
             if (item.data.AttachObjectIds && item.data.AttachObjectIds.length) {
-                const e = events[0];
-                this.equipIds = [];
-                this.activeItem = item;
-                item.data.AttachObjectIds.forEach(v => {
-                    if (v.type == "Image") {
-                        if(v.id) { this.equipIds.push(v.id) }
+                const e = events[0]
+                this.equipIds = []
+                this.activeItem = item
+                item.data.AttachObjectIds.forEach((v) => {
+                    if (v.type == 'Image') {
+                        if (v.id) {
+                            this.equipIds.push(v.id)
+                        }
                         // this.tabData.tableData.push(v);
-                    } else if (v.type == "Zone") {
-                        this.tabData.pointData.push(v);
+                    } else if (v.type == 'Zone') {
+                        this.tabData.pointData.push(v)
                     }
                 })
                 if (this.equipIds.length) {
-                    this.eqLoading = true;
+                    this.eqLoading = true
                     let data = {
                         plazaId: this.$store.state.plazaId,
                         page: 1,
-                        size: this.equipIds.length
+                        size: this.equipIds.length,
                     }
                     let postParams = {
-                        assetnumList: this.equipIds
+                        assetnumList: this.equipIds,
                     }
-                    queryAsset({ data, postParams }).then(res => {
-                        this.tabData.tableData = res.data.data;
-                        this.eqLoading = false;
+                    queryAsset({ data, postParams }).then((res) => {
+                        this.tabData.tableData = res.data.data
+                        this.eqLoading = false
                     })
                 }
-                this.popoverPosition.top = `${e.clientY}px`;
-                this.popoverPosition.left = `${e.clientX}px`;
+                this.popoverPosition.top = `${e.clientY}px`
+                this.popoverPosition.left = `${e.clientX}px`
                 this.$nextTick(() => {
                     if (
                         item.data.GraphElementId == '100050' ||
                         item.data.GraphElementId == '100055' ||
                         item.data.GraphElementId == '100056' ||
                         item.data.GraphElementId == '100057'
-                    ) { //判断是否为电井
-                        this.showBtnWell = true;
+                    ) {
+                        //判断是否为电井
+                        this.showBtnWell = true
                     }
-                    this.visible = true;
+                    this.visible = true
                 })
             }
         },
@@ -209,39 +218,38 @@ export default {
         },
         // 查看浮层位置详情
         handleClickPointDeatil(point) {
-            if (point.id && this.activeItem)
-            this.$refs.boxRoom.open({ name: this.activeItem.name, type: this.type, location: point.id });
+            if (point.id && this.activeItem) this.$refs.boxRoom.open({ name: this.activeItem.name, type: this.type, location: point.id })
         },
         handleClickHightLight(pointData) {
-            this.clearHightLight();
-            pointData.forEach(point => {
-                let location = point.id ? point.id : '';
+            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;
+                    this.wellMap[location].forEach((item) => {
+                        item.highLightFlag = true
+                        item.zOrder = 30
                     })
                 } else {
                     let getParams = {
                         plazaId: this.plazaId,
                         floor: this.floorid,
-                        keyword: `${location}:wellnum;`
+                        keyword: `${location}:wellnum;`,
                     }
-                    queryShops({ getParams }).then(res => {
+                    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 => {
+                                    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) {
+                            this.fParser.spaceList.forEach((item) => {
+                                if (shopsnumList.findIndex((name) => name == item.data.Name) != -1) {
                                     item.highLightFlag = true
                                     item.zOrder = 30
                                     shopsnumItemList.push(item)
@@ -251,8 +259,8 @@ export default {
                         }
                     })
                 }
-            });
-            this.visible = false;
+            })
+            this.visible = false
         },
         ...mapActions(['getfmapID']),
         init(floorid) {
@@ -291,25 +299,25 @@ export default {
                     // this.view.fitSceneToView()
                 } else {
                     // 屋顶图不为图片
-                    this.readBaseMap(floor);
+                    this.readBaseMap(floor)
                 }
             } else {
                 if (window.fengmapData.gnameToGid[floor]) {
-                    this.readBaseMap(floor);
+                    this.readBaseMap(floor)
                 } else {
                     console.log('楼层不正确')
                 }
             }
-        },// 解析底图
-        readBaseMap(floor){
-            window.fengmapData.parseData(window.fengmapData.gnameToGid[floor], res => {
+        }, // 解析底图
+        readBaseMap(floor) {
+            window.fengmapData.parseData(window.fengmapData.gnameToGid[floor], (res) => {
                 if (res.err) {
                     console.log('errr', res.err)
                     return
                 }
                 this.fParser = new SFloorParser(null)
                 this.fParser.parseData(res)
-                this.fParser.spaceList.forEach(t => {
+                this.fParser.spaceList.forEach((t) => {
                     this.scene.addItem(t)
                     t.nameSize = 12
                     t.nameColor = '#2a2a2a'
@@ -320,11 +328,11 @@ export default {
                         t.name = ''
                     }
                 })
-                this.fParser.wallList.forEach(t => this.scene.addItem(t))
-                this.fParser.virtualWallList.forEach(t => this.scene.addItem(t))
-                this.fParser.doorList.forEach(t => this.scene.addItem(t))
-                this.fParser.columnList.forEach(t => this.scene.addItem(t))
-                this.fParser.casementList.forEach(t => this.scene.addItem(t))
+                this.fParser.wallList.forEach((t) => this.scene.addItem(t))
+                this.fParser.virtualWallList.forEach((t) => this.scene.addItem(t))
+                this.fParser.doorList.forEach((t) => this.scene.addItem(t))
+                this.fParser.columnList.forEach((t) => this.scene.addItem(t))
+                this.fParser.casementList.forEach((t) => this.scene.addItem(t))
                 this.view.scene = this.scene
                 // this.view.fitSceneToView()
                 this.readGraph()
@@ -408,7 +416,7 @@ export default {
                     // 多边形
                     this.topologyParser.zoneLegendList.forEach((t) => {
                         this.scene.addItem(t)
-                        t.connect("legendItemClick", t, this.handleClickLegendItem);
+                        t.connect('legendItemClick', t, this.handleClickLegendItem)
                     })
                     // 增加文字
                     this.topologyParser.textMarkerList.forEach((t) => {
@@ -425,14 +433,14 @@ export default {
                     // 增加图标类图例
                     this.topologyParser.imageLegendList.forEach((t) => {
                         this.scene.addItem(t)
-                        t.connect("legendItemClick", t, this.handleClickLegendItem);
+                        t.connect('legendItemClick', t, this.handleClickLegendItem)
                     })
                     // 增加管线类
                     // 增加图标类图例
                     this.topologyParser.relationList.forEach((t) => {
                         t.selectable = true
                         this.scene.addItem(t)
-                        t.connect("legendItemClick", t, this.handleClickLegendItem);
+                        t.connect('legendItemClick', t, this.handleClickLegendItem)
                     })
                     this.view.fitSceneToView()
                     this.view.minScale = this.view.scale
@@ -470,16 +478,16 @@ export default {
             //     }
             //     // // 选中电井设置电井关联的商铺高亮
             //     // this.setHightLight(ev[0])
-            // } 
+            // }
             // else {
-                // this.clearHightLight()
+            // this.clearHightLight()
             // }
             if (ev[0].length) {
                 if (!(ev[0][0] instanceof SPolygonItem || ev[0][0] instanceof TipelineItem || ev[0][0] instanceof SImageLegendItem)) {
-                    this.visible = false;
+                    this.visible = false
                 }
             } else {
-                this.visible = false;
+                this.visible = false
             }
             this.clearHightLight()
         },
@@ -491,9 +499,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)) {
@@ -703,7 +711,7 @@ a:hover {
             .equip-detail-btn {
                 cursor: pointer;
                 display: inline-block;
-                color: #025BAA;
+                color: #025baa;
             }
         }
     }
@@ -716,7 +724,7 @@ a:hover {
             line-height: 38px;
             padding: 0 12px;
             cursor: pointer;
-            border-bottom: 1px solid rgba(0,0,0,0.06);
+            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
             span {
                 float: left;
                 width: 260px;
@@ -727,19 +735,19 @@ a:hover {
             }
             a {
                 display: none;
-                color: #025BAA;
+                color: #025baa;
                 font-size: 13px;
             }
         }
         li:hover {
-            background-color: #F5F6F7;
+            background-color: #f5f6f7;
             a {
                 display: inline-block;
             }
         }
     }
-    .el-button--primary{
-         background: linear-gradient(180deg, #369cf7 0%, #025baa 100%);
+    .el-button--primary {
+        background: linear-gradient(180deg, #369cf7 0%, #025baa 100%);
     }
     .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
     .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
@@ -757,9 +765,9 @@ a:hover {
         height: 0;
     }
     .is-active {
-        color: #025BAA !important;
-        border-color: #025BAA !important;
-        background: rgba(2,91,170,0.15);
+        color: #025baa !important;
+        border-color: #025baa !important;
+        background: rgba(2, 91, 170, 0.15);
     }
     .el-tabs__item {
         padding: 5px 16px;
@@ -780,5 +788,4 @@ a:hover {
         border-radius: 4px 0px 0px 4px;
     }
 }
-    
 </style>

+ 4 - 1
src/views/room/index.vue

@@ -910,13 +910,16 @@ export default {
             } else if (name.type == 'system') {
                 let floor = this.$cookie.get('floorNow')
                 this.content = `查看${floor}层楼层功能图`
-                this.Index(null)
+                this.init()
+                // this.Index(null)
             }
         },
         // 机房右上角的跳转 如果是在楼层功能打开的机房则要跳转到设备设施对应的系统\楼层 反之亦然
         jumpFloor() {
             // if (this.smsxtArr.smsxt) {
             if (location.pathname.split('/')[3] == 'equipment') {
+                this.$cookie.set('categoryId', 'LCGN', 3)
+                this.$store.commit('SETCATEGORYID', 'LCGN')
                 this.$router.push({ path: '/home/floorFunc' })
             } else {
                 this.$router.push({ path: '/home/equipment', query: { smsxt: this.smsxtArr.smsxt } })