|
@@ -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>
|