<!--
Description: 场站管理-信息窗体
Author: 李亚光
Date: 2024-07-18
-->
<script lang="ts" setup name="infoWindow">
import { getPipelineDetail } from '@/api/home/pipeline/pipeline'
import { getGasData } from '@/api/home/well/well'
// import gasDialog from '@/views/home/well/components/gasDialog.vue'
import gasDialog from './gasDataDialog.vue'
const dialogFormVisible = ref(false)
const overlay = ref()
const infoWindow = ref()
// 基本数据
const baseInfo = ref({
deviceTypeName: '',
deviceCode: '',
tagNumber: ''
})
const loading = ref(true)
// 详细信息
const detailInfo = ref<{ [key: string]: string }>({})
const descriptionListTop = ref([
{
text: '管理单位',
value: 'deptName',
align: 'center'
},
{
text: '厂商',
value: 'manufactureName',
align: 'center'
},
{
text: '压力级制',
value: 'pressType',
align: 'center'
},
{
text: '管径(mm)',
value: 'pipeDiameter',
align: 'center'
},
{
text: '材质',
value: 'material',
align: 'center'
},
{
text: '建设年代',
value: 'constructEra',
align: 'center'
},
{
text: '详细位置',
value: 'position',
align: 'center'
},
])
// 描述列表数据
const descriptionsList = ref([
{
text: '安装位号',
value: 'tagNumber',
align: 'center'
},
{
text: '负责人',
value: 'personName',
align: 'center'
},
{
text: '在用状态',
value: 'onState',
align: 'center'
},
{
text: '设备状态',
value: 'monitorStateName',
align: 'center'
},
{
text: '设备运行状态',
value: 'runStatus',
align: 'center'
},
// {
// text: '',
// value: '',
// align: 'center'
// }
// {
// text: '设备编号',
// value: 'devcode',
// align: 'center',
// },
// {
// text: '设备类型',
// value: 'typeName',
// align: 'center',
// },
// {
// text: '设备型号',
// value: 'modelName',
// align: 'center',
// },
// {
// text: '管理方式',
// value: 'manageType',
// align: 'center',
// },
])
// 初始化
const gasData = ref<any[]>([])
const rowData = ref()
const initDialog = (e: any) => {
// console.log(e, '信息窗体接收的数据')
overlay.value = e.overlay
infoWindow.value = e.infoWindow
baseInfo.value = e.info.row
dialogFormVisible.value = true
if (e.map) {
e.map.setZoom(15)
}
// 获取详细信息
detailInfo.value = e.info.row
rowData.value = e.info.row
loading.value = true
gasData.value = []
if (
rowData.value.deviceTypeName.includes('燃气智能监测终端') ||
rowData.value.deviceTypeName.includes('管网哨兵') ||
rowData.value.deviceTypeName.includes('智能警示桩')
) {
// if (descriptionsList.value[descriptionsList.value.length - 1].text === '燃气浓度') { return }
descriptionsList.value = descriptionsList.value.filter(
(item: any) => item.text !== '燃气浓度'
)
descriptionsList.value.push({
text: '燃气浓度',
value: 'manageType',
align: 'center'
})
} else {
descriptionsList.value = descriptionsList.value.filter(
(item: any) => item.text !== '燃气浓度'
)
}
// console.log(e.info.row, 'e.info.row')
getPipelineDetail({
id: e.info.row.id,
devcode: e.info.row.deviceCode
})
.then(res => {
loading.value = false
detailInfo.value = res.data
if (!(rowData.value.deviceTypeName.includes('燃气智能监测终端') || rowData.value.deviceTypeName.includes('管网哨兵') || rowData.value.deviceTypeName.includes('智能警示桩'))) {
return
}
// 获取燃气浓度
getGasData({
wellId: rowData.value.id,
devCode: rowData.value.deviceCode
}).then(res => {
gasData.value = []
for (const i in res.data) {
if (res.data[i].devTypeName.includes('燃气') || res.data[i].devTypeName.includes('管网哨兵') || res.data[i].devTypeName.includes('智能警示桩')) {
gasData.value.push({
name: res.data[i].devTypeName,
devcode: res.data[i].devcode,
state: res.data[i].state,
value: res.data[i].latestValue || '-',
offDays: res.data[i].offDays,
alarmContent: res.data[i].alarmContent,
text:
res.data[i].devTypeName.includes('燃气') || res.data[i].devTypeName.includes('管网哨兵') || res.data[i].devTypeName.includes('智能警示桩')
? '燃气浓度'
: res.data[i].devTypeName.includes('液位')
? '液位状态'
: res.data[i].devTypeName.includes('井盖')
? '井盖状态'
: '',
unit: res.data[i].devTypeName.includes('燃气') || res.data[i].devTypeName.includes('管网哨兵') || res.data[i].devTypeName.includes('智能警示桩') ? '%LEL' : '',
stateName:
res.data[i].state === '1'
? '正常'
: res.data[i].state === '0'
? '离线'
: res.data[i].state === '2'
? '异常'
: ''
})
}
}
gasData.value = gasData.value.filter(item => (item.name === rowData.value.deviceTypeName || rowData.value.deviceTypeName.includes(item.name) || item.name.includes(rowData.value.deviceTypeName)) && item.devcode === detailInfo.value.devcode)
if (gasData.value.length) {
detailInfo.value.offDays = gasData.value[0].offDays
detailInfo.value.alarmContent = gasData.value[0].alarmContent
detailInfo.value.runStatus = gasData.value[0].stateName
}
})
})
.catch(() => {
loading.value = false
})
}
// 关闭
const close = () => {
infoWindow.value?.close()
}
// 详情
const $router = useRouter()
const goDetail = () => {
$router.push({
name: 'PipelineMonitorDetail',
query: {
id: rowData.value.id,
deviceCode: rowData.value.deviceCode,
typeName: rowData.value.deviceTypeName
}
})
}
// 燃气数据-更多
const gasRef = ref()
const more = () => {
// detailInfo.value
gasRef.value.initDialog(rowData.value)
}
defineExpose({ initDialog, close })
</script>
<template>
<div v-show="dialogFormVisible" class="container clearfix" @mouseleave="() => { }">
<gas-dialog ref="gasRef" />
<div class="header">
<div style="display: flex; align-items: center">
<el-tooltip class="box-item" effect="dark" :content="`${detailInfo.tagNumber} | ${baseInfo.deviceTypeName}`"
placement="top">
<span class="title">{{ baseInfo.tagNumber }} | {{ baseInfo.deviceTypeName }}- {{ baseInfo.deviceCode }}
</span>
</el-tooltip>
<el-button style="margin-left: 10px" size="small" @click="goDetail">
详情
</el-button>
</div>
<span class="close" @click="close">×</span>
</div>
<div class="body">
<div class="descriptions">
<!-- -->
<div v-for="item in descriptionListTop" :key="item.text" class="descriptions-item"
:style="{ width: item.text === '详细位置' ? '95%' : '48%' }">
<div class="label" :style="{ width: item.text === '详细位置' ? '16%' : '34%' }">{{ item.text }}</div>
<div class="value" style="margin-left: 10px" :style="{ width: item.text === '详细位置' ? '80%' : '68%' }"> {{
detailInfo[item.value] || '' }}</div>
</div>
<div v-for="item in descriptionsList" :key="item.text" class="descriptions-item"
:class="item.text === '燃气浓度' ? 'last-value' : ''" :style="{ width: item.text === '设备运行状态' ? '95%' : '48%' }">
<div class="label" :class="item.text === '燃气浓度' ? 'last-label' : ''" :style="{ width: item.text === '设备运行状态' ? '18%' : '34%' }">
{{ item.text }}
</div>
<div v-if="
item.text !== '燃气浓度' &&
item.text !== '设备状态' &&
item.text !== '设备运行状态'
" class="value" :title="detailInfo[item.value] || ''" style="margin-left: 10px">
{{ detailInfo[item.value] || '' }}
</div>
<!-- 设备运行状态 -->
<div v-if="item.text === '设备运行状态'" class="value" :title="detailInfo[item.value] || ''">
<span style="margin-left: 10px" :style="{
color:
detailInfo[item.value] === '正常'
? '#3cc53c'
: detailInfo[item.value] === '离线'
? 'rgb(238, 182, 78)'
: detailInfo[item.value] === '异常'
? 'red'
: ''
}">{{ detailInfo[item.value] || '' }}</span>
<span v-if="detailInfo[item.value] === '离线' && detailInfo.offDays" style="color: rgb(238, 182, 78);">{{
`(离线天数:${detailInfo.offDays}天)` }}</span>
<span v-if="detailInfo[item.value] === '异常' && detailInfo.alarmContent" style="color: red">{{
`(${detailInfo.alarmContent})` }}</span>
</div>
<!-- 设备状态 -->
<div v-if="item.text === '设备状态'" class="value" :title="detailInfo[item.value] || ''"
style="margin-left: 10px">
<span :style="{
color:
detailInfo[item.value] === '正常'
? '#3cc53c'
: detailInfo[item.value] === '离线'
? 'rgb(238, 182, 78)'
: detailInfo[item.value] === '异常'
? 'red'
: detailInfo[item.value] === '未监控'
? '#a39f9f'
: '#a39f9f'
}">{{ detailInfo[item.value] || '' }}</span>
</div>
<!-- 燃气浓度 -->
<div v-if="item.text === '燃气浓度' && gasData.length" class="value" style="width: 80%;margin-left: 10px;">
<div v-for="item in gasData" v-show="item.text" :key="item.name">
<!-- {{ item.name }} : -->
<span :class="`${item.state === '2' ? 'error' : ''}`">
{{
item.name.includes('燃气') || item.name.includes('哨兵') || item.name.includes('智能警示桩')
? item.value
: item.stateName
}}</span>
<span v-if="item.name.includes('燃气') || item.name.includes('哨兵') || item.name.includes('智能警示桩')"
:class="`${item.state === '2' ? 'error' : ''}`">
{{ item.unit }}</span>
<el-button v-if="item.name.includes('燃气') || item.name.includes('哨兵') || item.name.includes('智能警示桩')"
size="small" style="margin-left: 10px" @click="more">
更多
</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.error {
color: red !important;
}
.container {
width: 600px;
background: #fff;
position: relative;
border-radius: 8px;
border: 1px solid #e4e7ed;
overflow: hidden;
box-shadow: 0 0 12px rgb(0 0 0 / 12%);
.header {
float: right;
background-color: #0d76d4;
width: 100%;
display: flex;
justify-content: space-between;
padding: 8px 10px;
align-items: center;
color: #fff;
.title {
font-weight: 700;
display: inline-block;
width: 90%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.close {
font-size: 22px;
font-weight: 700;
text-align: right;
padding-right: 10px;
&:hover {
cursor: pointer;
color: #ccc;
}
}
}
.body {
width: 100%;
padding-left: 10px;
.descriptions {
width: 100%;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
padding: 6px 0;
.last-value {
width: 100% !important;
}
.descriptions-item {
width: 48%;
margin: 4px 5px;
box-sizing: border-box;
display: flex;
padding: 0 3px;
.label-no {
width: 28% !important;
}
.last-label {
width: 16% !important;
}
.label {
width: 34%;
box-sizing: border-box;
padding: 0 1px;
font-size: 15px;
text-align: justify;
text-align-last: justify;
}
.value {
padding-left: 5px;
width: 68%;
box-sizing: border-box;
white-space: nowrap;
font-size: 14px;
color: #a39f9f;
/* 确保文本在一行内显示 */
overflow: hidden;
/* 超出容器部分隐藏 */
text-overflow: ellipsis;
/* 文字溢出显示省略号 */
}
}
}
}
}
</style>
