Jelajahi Sumber

主要设备清单,设备 popover修改

yunxing 4 tahun lalu
induk
melakukan
1e89fe534f

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

@@ -155,7 +155,9 @@ export default {
             showBtnWell: false,
             count: 0, // 顶楼为多张图时计数器
             equipKey: 1, //设备弹窗使用key值,解决打开弹窗数据为上次弹窗的数据
-            statusRed: [ '停用', '已拆除'], //显示红色的设备状态
+            // TODO:
+            // statusRed: ['停用', '已拆除'], //显示红色的设备状态
+            statusRed: [],
             showStatusText: false, //设备状态 弹窗显隐状态
             statusText: '', //设备状态 弹窗文本
             timer: null, //自动隐藏 设备状态弹窗 定时器

+ 139 - 14
src/views/equipment/table/eqDetaileDialog.vue

@@ -58,42 +58,127 @@
                 <!-- 多余的筛选 -->
                 <input-dialog :type='1' @confirm='confirm'></input-dialog>
             </div>
-            <div class='gdqd-dialog-bottom'>
-                <!-- TODO: 宽度修改 -->
+            <div class='gdqd-dialog-bottom' ref='table-container-1'>
+                <!-- TODO:  -->
                 <el-table @row-click='innerTable' :data='tableData' :key='key' :border='true' style='width: 100%' :highlight-current-row='true'>
-                    <el-table-column type='index' label='序号' width='60'></el-table-column>
+                    <el-table-column type='index' label='序号' width='60'>
+                        <template slot-scope='{row,$index}'>
+                            <div v-if=' true  || !row.assetuid'>{{$index + 1}}</div>
+                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
+                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
+                                <div slot='reference'>{{$index + 1}}</div>
+                            </el-popover>
+                        </template>
+                    </el-table-column>
                     <el-table-column prop='sbjc' label='设备名称' show-overflow-tooltip resizable min-width='338'>
-                        <template slot-scope='{row}'>{{row.sbjc || '--'}}</template>
+                        <!-- <template slot-scope='{row}'>{{row.sbjc || '--'}}</template> -->
+                        <template slot-scope='{row}'>
+                            <div v-if=' true  || !row.assetuid'>{{row.sbjc || '--'}}</div>
+                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
+                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
+                                <div slot='reference'>{{row.sbjc || '--'}}</div>
+                            </el-popover>
+                        </template>
                     </el-table-column>
                     <el-table-column prop='assetnum' label='设备内码' show-overflow-tooltip resizable width='80'>
-                        <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
+                        <!-- <template slot-scope='{row}'>{{row.assetnum || '--'}}</template> -->
+                        <template slot-scope='{row}'>
+                            <div v-if=' true  || !row.assetuid'>{{row.assetnum || '--'}}</div>
+                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
+                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
+                                <div slot='reference'>{{row.assetnum || '--'}}</div>
+                            </el-popover>
+                        </template>
                     </el-table-column>
                     <el-table-column prop='sbglgs' label='管理归属' show-overflow-tooltip resizable>
-                        <template slot-scope='{row}'>{{row.sbglgs || '--'}}</template>
+                        <!-- <template slot-scope='{row}'>{{row.sbglgs || '--'}}</template> -->
+                        <template slot-scope='{row}'>
+                            <div v-if=' true  || !row.assetuid'>{{row.sbglgs || '--'}}</div>
+                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
+                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
+                                <div slot='reference'>{{row.sbglgs || '--'}}</div>
+                            </el-popover>
+                        </template>
                     </el-table-column>
                     <el-table-column prop='sb_status' label='设备状态' width='80' show-overflow-tooltip resizable>
-                        <template slot-scope='{row}'>{{row.sb_status || '--'}}</template>
+                        <!-- <template slot-scope='{row}'>{{row.sb_status || '--'}}</template> -->
+                        <template slot-scope='{row}'>
+                            <div v-if=' true  || !row.assetuid'>{{row.sb_status || '--'}}</div>
+                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
+                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
+                                <div slot='reference'>{{row.sb_status || '--'}}</div>
+                            </el-popover>
+                        </template>
                     </el-table-column>
                     <el-table-column prop='brand' label='品牌' show-overflow-tooltip resizable width='80'>
-                        <template slot-scope='{row}'>{{row.brand || '--'}}</template>
+                        <!-- <template slot-scope='{row}'>{{row.brand || '--'}}</template> -->
+                        <template slot-scope='{row}'>
+                            <div v-if=' true  || !row.assetuid'>{{row.brand || '--'}}</div>
+                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
+                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
+                                <div slot='reference'>{{row.brand || '--'}}</div>
+                            </el-popover>
+                        </template>
                     </el-table-column>
                     <el-table-column prop='sbxh' label='型号' show-overflow-tooltip resizable width='100'>
-                        <template slot-scope='{row}'>{{row.sbxh || '--'}}</template>
+                        <!-- <template slot-scope='{row}'>{{row.sbxh || '--'}}</template> -->
+                        <template slot-scope='{row}'>
+                            <div v-if=' true  || !row.assetuid'>{{row.sbxh || '--'}}</div>
+                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
+                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
+                                <div slot='reference'>{{row.sbxh || '--'}}</div>
+                            </el-popover>
+                        </template>
                     </el-table-column>
                     <el-table-column prop='floor' sortable label='楼层' width='70' show-overflow-tooltip resizable>
-                        <template slot-scope='{row}'>{{row.floorcode || '--'}}</template>
+                        <!-- <template slot-scope='{row}'>{{row.floorcode || '--'}}</template> -->
+                        <template slot-scope='{row}'>
+                            <div v-if=' true  || !row.assetuid'>{{row.floorcode || '--'}}</div>
+                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
+                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
+                                <div slot='reference'>{{row.floorcode || '--'}}</div>
+                            </el-popover>
+                        </template>
                     </el-table-column>
                     <el-table-column prop='wzjc' label='安装位置' show-overflow-tooltip resizable min-width='250'>
-                        <template slot-scope='{row}'>{{row.wzjc || '--'}}</template>
+                        <!-- <template slot-scope='{row}'>{{row.wzjc || '--'}}</template> -->
+                        <template slot-scope='{row}'>
+                            <div v-if=' true  || !row.assetuid'>{{row.wzjc || '--'}}</div>
+                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
+                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
+                                <div slot='reference'>{{row.wzjc || '--'}}</div>
+                            </el-popover>
+                        </template>
                     </el-table-column>
                     <el-table-column prop='manufacturer' label='生产厂商' show-overflow-tooltip resizable min-width='300'>
-                        <template slot-scope='{row}'>{{row.manufacturer || '--'}}</template>
+                        <!-- <template slot-scope='{row}'>{{row.manufacturer || '--'}}</template> -->
+                        <template slot-scope='{row}'>
+                            <div v-if=' true  || !row.assetuid'>{{row.manufacturer || '--'}}</div>
+                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
+                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
+                                <div slot='reference'>{{row.manufacturer || '--'}}</div>
+                            </el-popover>
+                        </template>
                     </el-table-column>
                     <el-table-column prop='fws' label='服务商' show-overflow-tooltip resizable min-width='300'>
-                        <template slot-scope='{row}'>{{row.fws || '--'}}</template>
+                        <!-- <template slot-scope='{row}'>{{row.fws || '--'}}</template> -->
+                        <template slot-scope='{row}'>
+                            <div v-if=' true  || !row.assetuid'>{{row.fws || '--'}}</div>
+                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
+                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
+                                <div slot='reference'>{{row.fws || '--'}}</div>
+                            </el-popover>
+                        </template>
                     </el-table-column>
                     <el-table-column prop label='相关资料' show-overflow-tooltip resizable min-width='150'>
-                        <template slot-scope='{row}'>{{'--'}}</template>
+                        <!-- <template slot-scope='{row}'>{{'--'}}</template> -->
+                        <template slot-scope='{row}'>
+                            <div v-if=' true  || !row.assetuid'>--</div>
+                            <el-popover v-else placement='top' width='100' trigger='click' popper-class='m-popover'>
+                                <el-button type='text' @click='goToGC(row.assetuid)'>跳转工程信息化</el-button>
+                                <div slot='reference'>--</div>
+                            </el-popover>
+                        </template>
                     </el-table-column>
                 </el-table>
             </div>
@@ -126,6 +211,11 @@
     </div>
 </template>
 <script>
+/**
+ * @author yunxing
+ * @date 2020年08月18日18:01
+ * @description 上部表格添加popover,点击后,如果有assetuid,显示popover,可以进行跳转工程信息化
+ */
 import { Select } from 'meri-design'
 import { mapGetters } from 'vuex'
 import { queryAsset } from '@/api/equipmentList.js'
@@ -187,17 +277,42 @@ export default {
         if (document.body.clientWidth >= 1920) {
             this.size = 9
         }
+        // 滚动时,隐藏上部表格的popover
+        window.addEventListener('scroll', this.handleScroll, true)
+        this.$once('hook:beforeDestroy', () => {
+            window.removeEventListener('scroll', this.handleScroll)
+        })
     },
     props: ['row', 'major', 'sign', 'smsxt', 'diff'],
     methods: {
+        // 页面
+        handleScroll(e) {
+            // let popoverArr = Array.from(document.querySelectorAll('body>.m-popover'))
+            // if (popoverArr.length) {
+            //     popoverArr.map((item) => (item.style.display = 'none'))
+            // }
+            // 滚动时,如果是上部表格,隐藏上部表格的popover
+            this.$nextTick(() => {
+                if (this.$refs['table-container-1'].contains(e.target)) {
+                    document.body.click()
+                    document.dispatchEvent(new CustomEvent('mousedown'))
+                    document.dispatchEvent(new CustomEvent('mouseup'))
+                }
+            })
+        },
         innerTable(row) {
             this.assetnum = row.assetnum
             this.changeTab(0)
             // this.$refs.wbTable.startMethods()
+            // TODO: 
             if (row.assetuid) {
                 window.open(`http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=assetdevic&uniqueid=${row.assetuid}`)
             }
         },
+        // 跳转工程信息化
+        goToGC(assetuid) {
+            window.open(`http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=assetdevic&uniqueid=${assetuid}`)
+        },
         //多余输入框监听
         confirm(fws, manufacturer) {
             this.fws = fws
@@ -498,4 +613,14 @@ export default {
         line-height: 24px;
     }
 }
+// 弹出弹窗样式修改
+.m-popover {
+    width: 105px !important;
+    max-width: 105px !important;
+    min-width: 105px !important;
+    height: 30px !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 </style>