浏览代码

设备状态为停用或已拆除时,弹出弹窗提示

yunxing 4 年之前
父节点
当前提交
6d81bdda59
共有 1 个文件被更改,包括 54 次插入8 次删除
  1. 54 8
      src/components/floorMap/index.vue

+ 54 - 8
src/components/floorMap/index.vue

@@ -14,9 +14,16 @@
                 <span style="float: left;">对应的工程信息化信息</span>
                 <el-link icon="el-icon-close" :underline="false" @click="visible = false"></el-link>
             </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
+                    :data='tabData.tableData'
+                    max-height='235'
+                    style='width: 100%'
+                    @row-click='handleClickEquipDetail'
+                    v-loading='eqLoading'
+                    :cell-class-name='tableCellClassName'
+                >
                     <el-table-column prop='sbjc' label='设备简称' width='144' :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='80' label='设备状态' :show-overflow-tooltip='true'></el-table-column>
@@ -32,7 +39,7 @@
                     <el-button size="mini" type="primary" @click="visible = false">关闭</el-button>
                 </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)'>
@@ -45,7 +52,7 @@
                     <!-- <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
@@ -85,6 +92,11 @@
             </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>
     </div>
 </template>
 <script>
@@ -139,6 +151,11 @@ export default {
             showBtnWell: false,
             count: 0, // 顶楼为多张图时计数器
             equipKey: 1, //设备弹窗使用key值,解决打开弹窗数据为上次弹窗的数据
+            statusRed: ['停用', '已拆除'], //显示红色的设备状态
+            showStatusText: false, //设备状态 弹窗显隐状态
+            statusText: '', //设备状态 弹窗文本
+            timer: null, //自动隐藏 设备状态弹窗 定时器
+            timeout: 2000, //定时器时长
         }
     },
     props: {
@@ -196,6 +213,7 @@ export default {
                     queryAssetAll({ data, postParams }).then((res) => {
                         this.tabData.tableData = res.data.data
                         this.eqLoading = false
+                        console.log(this.tabData)
                     })
                 }
                 this.popoverPosition.top = `${e.clientY}px`
@@ -215,7 +233,22 @@ export default {
             }
         },
         // 查看浮层设备详情
-        handleClickEquipDetail(row) {
+        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)
+                return true
+            }
+
             if (row.assetnum) {
                 this.equipKey++
                 this.$nextTick(() => {
@@ -717,13 +750,22 @@ export default {
          * 当点击位置不在canvas内部时 ( 如点击 页面空白,图例,楼层,设备设施左侧列表项时),将visible置为false,隐藏popover
          */
         handlePopover(e) {
-            this.$nextTick(()=>{
-                if(!this.$refs.graphy.contains(e.target)){
-                    console.log(1111)
+            this.$nextTick(() => {
+                if (!this.$refs.graphy.contains(e.target)) {
                     this.visible = false
                 }
+                this.showStatusText = false
+                this.statusText = ''
             })
         },
+        /**
+         * @description 设备状态列, 状态为停用或已拆除时,样式红色
+         */
+        tableCellClassName({ row, column, rowIndex, columnIndex }) {
+            if (columnIndex === 2 && this.statusRed.includes(row.sb_status)) {
+                return 'status-red'
+            }
+        },
     },
     watch: {
         'view.scale': {
@@ -874,5 +916,9 @@ a:hover {
     /deep/ .el-tabs__item:nth-child(2) {
         border-radius: 4px 0px 0px 4px;
     }
+    // 设备状态
+    .status-red {
+        color: #ff0000 !important;
+    }
 }
 </style>