Преглед изворни кода

feat: 1.主要设备清单钻取表,设备内码添加下划线,蓝色字体,点击跳转工程信息化
2. 点击平面图中设备,设备状态为停用或者已拆除时, 设备状态 置灰,删除线禁用. 弹出警告消息

yunxing пре 4 година
родитељ
комит
14cd3da3d7
2 измењених фајлова са 48 додато и 175 уклоњено
  1. 22 30
      src/components/floorMap/index.vue
  2. 26 145
      src/views/equipment/table/eqDetaileDialog.vue

+ 22 - 30
src/components/floorMap/index.vue

@@ -91,15 +91,15 @@
                 </el-tab-pane>
             </el-tabs>
         </el-popover>
-        <span class='popStyle' :style='popoverPosition' v-popover:popover></span>
-        <!-- 状态为停用,或者已拆除时 弹窗 -->
-        <el-popover ref='statusText' placement='top-end' trigger='manual' v-model='showStatusText' width='310'>
-            <div>{{statusText}}</div>
-        </el-popover>
-        <span class='popStyle' :style='statusTextPosition' v-popover:statusText></span>
+        <span class='popStyle' :style='popoverPosition' v-popover:popover></span>       
     </div>
 </template>
 <script>
+/**
+ * @author yunxing
+ * @date 2020年08月21日11:04
+ * @description 停用,已拆除的状态,使用message进行提示
+ */
 import { SFengParser, ProjectRf } from '@saga-web/feng-map'
 import { SFloorParser, ItemOrder, ItemColor, SPolygonItem, SBoardItem } from '@saga-web/big'
 import { FloorView } from '@/lib/FloorView'
@@ -116,6 +116,7 @@ import bus from '@/utils/bus.js'
 import { TipelineItem } from '../../lib/items/TipelineItem'
 import { SImageLegendItem } from '../../lib/items/SImageLegendItem'
 import equipDetail from '../../views/equipment/table/equipDetail'
+import { Message } from 'element-ui'
 
 // import { uuid } from "@/components/mapClass/until";
 
@@ -155,13 +156,7 @@ export default {
             showBtnWell: false,
             count: 0, // 顶楼为多张图时计数器
             equipKey: 1, //设备弹窗使用key值,解决打开弹窗数据为上次弹窗的数据
-            // TODO:
-            // statusRed: ['停用', '已拆除'], //显示红色的设备状态
-            statusRed: [],
-            showStatusText: false, //设备状态 弹窗显隐状态
-            statusText: '', //设备状态 弹窗文本
-            timer: null, //自动隐藏 设备状态弹窗 定时器
-            timeout: 2000, //定时器时长
+            statusDisabled: ['运行', '停用', '已拆除'], //显示红色的设备状态
         }
     },
     props: {
@@ -240,21 +235,14 @@ export default {
         },
         // 查看浮层设备详情
         handleClickEquipDetail(row, column, event) {
-            // 设备状态为停用或已拆除时,弹出弹窗
-            if (this.statusRed.includes(row?.sb_status)) {
-                this.showStatusText = true
-                this.statusText = `当前设备为“${row.sb_status}”状态,无法查询该设备详情`
-                this.$set(this.statusTextPosition, 'top', event.clientY + 'px')
-                this.$set(this.statusTextPosition, 'left', event.clientX + 'px')
-                // 关闭弹窗
-                clearTimeout(this.timer)
-                this.timer = setTimeout(() => {
-                    this.showStatusText = false
-                    this.statusText = ''
-                }, this.timeout)
+            // 设备状态为停用或已拆除时,弹出消息
+            if (this.statusDisabled.includes(row?.sb_status)) {
+                this.$message({
+                    message: `当前设备为“${row.sb_status}”状态,请前往编辑器重新编辑`,
+                    type: 'warning',
+                })
                 return true
             }
-
             if (row.assetnum) {
                 this.equipKey++
                 this.$nextTick(() => {
@@ -768,8 +756,8 @@ export default {
          * @description 设备状态列, 状态为停用或已拆除时,样式红色
          */
         tableCellClassName({ row, column, rowIndex, columnIndex }) {
-            if (columnIndex === 2 && this.statusRed.includes(row.sb_status)) {
-                return 'status-red'
+            if (columnIndex === 2 && this.statusDisabled.includes(row.sb_status)) {
+                return 'status-disabled'
             }
         },
     },
@@ -829,6 +817,9 @@ export default {
         position: fixed;
     }
 }
+.floorMapMessage {
+    background: #aaa !important;
+}
 </style>
 <style lang="less">
 a:hover {
@@ -923,8 +914,9 @@ a:hover {
         border-radius: 4px 0px 0px 4px;
     }
     // 设备状态
-    .status-red {
-        color: #ff0000 !important;
+    .status-disabled {
+        color:#C0C4CC !important;
+        text-decoration: line-through;
     }
 }
 </style>

+ 26 - 145
src/views/equipment/table/eqDetaileDialog.vue

@@ -58,128 +58,43 @@
                 <!-- 多余的筛选 -->
                 <input-dialog :type='1' @confirm='confirm'></input-dialog>
             </div>
-            <div class='gdqd-dialog-bottom' ref='table-container-1'>
-                <!-- TODO:  -->
+            <div class='gdqd-dialog-bottom'>
+                <!-- 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'>
-                        <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 type='index' label='序号' width='60'></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}'>
-                            <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>
+                        <template slot-scope='{row}'>{{row.sbjc || '--'}}</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}'>
-                            <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 prop='assetnum' label='设备内码' show-overflow-tooltip resizable width='80' class-name='blue-underline'>
+                        <template slot-scope='{row}'>{{row.assetnum || '--'}}</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}'>
-                            <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>
+                        <template slot-scope='{row}'>{{row.sbglgs || '--'}}</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}'>
-                            <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>
+                        <template slot-scope='{row}'>{{row.sb_status || '--'}}</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}'>
-                            <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>
+                        <template slot-scope='{row}'>{{row.brand || '--'}}</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}'>
-                            <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>
+                        <template slot-scope='{row}'>{{row.sbxh || '--'}}</template>
                     </el-table-column>
-                    <!-- TODO: -->
                     <el-table-column prop='floor' sortable label='楼层' width='70' show-overflow-tooltip resizable>
-                        <!-- <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>
+                        <template slot-scope='{row}'>{{row.floorcode || '--'}}</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}'>
-                            <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>
+                        <template slot-scope='{row}'>{{row.wzjc || '--'}}</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}'>
-                            <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>
+                        <template slot-scope='{row}'>{{row.manufacturer || '--'}}</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}'>
-                            <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>
+                        <template slot-scope='{row}'>{{row.fws || '--'}}</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}'>
-                            <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>
+                        <template slot-scope='{row}'>{{'--'}}</template>
                     </el-table-column>
                 </el-table>
             </div>
@@ -212,11 +127,6 @@
     </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'
@@ -278,41 +188,17 @@ 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'] && this.$refs['table-container-1'].contains(e.target)) {
-                    document.body.click()
-                    document.dispatchEvent(new CustomEvent('mousedown'))
-                    document.dispatchEvent(new CustomEvent('mouseup'))
-                }
-            })
-        },
-        innerTable(row) {
+        innerTable(row, column) {
             this.assetnum = row.assetnum
             this.changeTab(this.currentTab)
             // 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}`)
+            // 点击设备内码,且有assetuid,跳转工程信息化
+            if (row.assetuid && column.label === '设备内码') {
+                window.open(`http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=assetdevic&uniqueid=${row.assetuid}`)
+            }
         },
         //多余输入框监听
         confirm(fws, manufacturer) {
@@ -511,6 +397,11 @@ export default {
             /deep/.el-table__body-wrapper {
                 overflow: auto;
                 max-height: 13.6vh;
+                // 字体蓝色,下划线
+                .blue-underline {
+                    color: #409eff !important;
+                    text-decoration: underline !important;
+                }
             }
         }
     }
@@ -614,14 +505,4 @@ 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>