<!--
Description: 管线监测
Author: 李亚光
Date: 2023-09-04
-->
<script lang="ts" setup name="PipelineMonitor">
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowUpBold } from '@element-plus/icons-vue'
import MapCom from './components/map.vue'
import editDialog from './components/editDialog.vue'
import { getPipelineDeviceList, getPipelineList, getPipelineListPage } from '@/api/home/pipeline/pipeline'
import { getDeviceTypeListPage } from '@/api/home/device/type'
import { getDictByCode } from '@/api/system/dict'
import { keepSearchParams } from '@/utils/keepQuery'
import { getDeviceListPage } from '@/api/home/device/device'
// 表格标识 地图或普通
const mapRef = ref()
const tableFlag = ref('map')
const mapLoading = ref(true)
const mapLoad = ref(false)
const cacheRow = ref<any>({})
const monitorStateList = ref<{ id: string; name: string; value: string }[]>([]) // 监控状态
// 表格数据
const list = ref([])
const total = ref(0)
const tableHeight = ref(window.innerHeight - 60 - 50 - 10 - 350 - 98 - 10 - 52 - 15)
// 地图数据
const mapList = ref([])
const pipeData = ref([])
// 初始展示列
const columns = ref<any>([
{ text: '安装位号', value: 'tagNumber', align: 'center', isRequired: true, width: '110' },
{ text: '设备编号', value: 'devcode', isRequired: true, align: 'center', isCustom: true },
{ text: '设备类型', value: 'typeName', isRequired: true, align: 'center' },
// { text: '关联管线', value: 'pipeCode', isRequired: true, align: 'center' },
// { text: '压力级制', value: 'pressType', isRequired: true, align: 'center' },
// { text: '管径(mm)', value: 'pipeDiameter', align: 'center' },
// { text: '管材', value: 'material', isRequired: true, align: 'center' },
// { text: '建设年代', value: 'constructEra', align: 'center' },
{ text: '详细位置', value: 'position', isRequired: true, align: 'center' },
{ text: '管理单位', value: 'deptName', isRequired: true, align: 'center' },
{ text: '在用状态', value: 'onState', align: 'center', width: '90' },
{ text: '设备状态', value: 'monitorState', align: 'center' },
])
// 最终展示列
const columnsConfig = ref([])
// 修改列
const editColumns = (data: any) => {
columnsConfig.value = data
}
const loadingTable = ref(true)
// 查询条件
const listQuery = ref({
limit: 5,
offset: 1,
deptId: '', // 管理单位
devCode: '', // 设备编号
devName: '', // 设备名称
monitorState: '', // 监控状态
onState: '', // 使用状态
pipeCode: '', // 管线编号
position: '', // 详细位置
tagNumber: '', // 安装位号
devTypeId: '', // 设备类型
} as { [key: string]: string | number })
// 查询数据
const fetchData = () => {
loadingTable.value = true
// 判断是否有查询条件(是地图展示20条 否地图展示所有)
const queryList = [] as Boolean[] // 长度大于2 即为是
for (const i in listQuery.value) {
if (listQuery.value[i]) {
queryList.push(true)
}
}
getPipelineListPage(listQuery.value).then((res) => {
list.value = []
list.value = res.data.rows.map((item: any) => ({
...item,
// showDeviceTips: false, // 展示设备编号提示
}))
total.value = res.data.total
loadingTable.value = false
// 查询设备类型和厂商
// list.value.forEach((item: any) => {
// getDeviceListPage({ offset: 1, limit: 1, devCode: item.devcode }).then(res => {
// if (res.data.rows.length) {
// item.showDeviceTips = true
// item.deviceTips = {
// typeName: res.data.rows[0].typeName || item.typeName,
// manufactureName: res.data.rows[0].manufactureName
// }
// }
// else {
// item.showDeviceTips = false
// item.deviceTips = {}
// }
// })
// })
if (queryList.length > 2) {
// console.log(monitorStateList.value, 'monitorStateList')
mapList.value = list.value.filter((item: any) => item.latGaode && item.lngGaode).map((item: any) => ({
deviceTypeName: item.typeName,
tagNumber: item.ledgerName,
deviceCode: item.devcode,
pipeCode: item.pipeCode,
lat: item.latGaode,
lng: item.lngGaode,
id: item.id,
status: monitorStateList.value.filter((citem) => citem.name === item.monitorState)[0]?.value || '1',
}))
setTimeout(() => {
if (tableFlag.value === 'map') {
mapRef.value.resetDraw()
mapRef.value.resetDrawLine()
}
mapLoading.value = false
}, 500)
}
if (tableFlag.value === 'normal') {
tableHeight.value = list.value.length >= 15 ? window.innerHeight - 60 - 50 - 10 - 98 - 10 - 52 - 20 : list.value.length * 40 + 40
}
}).catch(() => {
loadingTable.value = false
mapLoading.value = false
})
if (queryList.length > 2 || mapLoad.value) { return }
mapLoading.value = true
// 获取地图全部数据
getPipelineList(listQuery.value).then((res) => {
mapLoad.value = true
// 管线
pipeData.value = res.data.map((item: any) => ({
pipeCode: item.PIPE_CODE,
startLat: item.START_LAT,
startLng: item.START_LNG,
endLat: item.END_LAT,
endLng: item.END_LNG,
}))
setTimeout(() => {
if (tableFlag.value === 'map') {
mapRef.value.resetDrawLine()
}
}, 500)
})
getPipelineDeviceList(listQuery.value).then((res) => {
// console.log(res.data.filter(item => item.ONLINE_STATE === '0'), '123')
mapLoad.value = true
mapList.value = res.data.map((item: { [key: string]: string }) => ({
deviceTypeName: item.TYPE_NAME,
tagNumber: item.TAG_NUMBER,
deviceCode: item.DEVCODE,
pipeCode: item.PIPE_CODE,
lat: item.LAT_GAODE,
lng: item.LNG_GAODE,
id: item.LEDGER_ID,
status: item.ONLINE_STATE,
}))
setTimeout(() => {
if (tableFlag.value === 'map') {
mapRef.value.resetDraw()
}
mapLoading.value = false
mapLoad.value = false
}, 500)
}).catch(() => {
mapLoading.value = false
})
}
// 重置查询条件f
const reset = () => {
mapLoad.value = false
listQuery.value = {
limit: 5,
offset: 1,
deptId: '', // 管理单位
devCode: '', // 设备编号
devName: '', // 设备名称
monitorState: '', // 监控状态
onState: '', // 使用状态
pipeCode: '', // 管线编号
position: '', // 详细位置
tagNumber: '', // 安装位号
devTypeId: '', // 设备类型
}
fetchData()
}
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size: number; page: number }) => {
if (val && val.size) {
listQuery.value.limit = val.size
}
if (val && val.page) {
listQuery.value.offset = val.page
}
fetchData()
}
// 获取字典
const onStateList = ref<{ id: string; name: string; value: string }[]>([]) // 使用状态
const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
const fetchDict = async() => {
// 使用状态
getDictByCode('onUseStatus').then((res) => {
onStateList.value = res.data
})
monitorStateList.value = [
{
name: '离线',
value: '0',
id: '0'
},
{
name: '正常',
value: '1',
id: '1'
},
{
name: '报警',
value: '2',
id: '2'
},
]
const needShow = ['管网哨兵', '智能警示桩']
getDeviceTypeListPage({ offset: 1, limit: 99999 }).then((res) => {
deviceTypeList.value = res.data.rows.map((item: any) => ({
name: item.typeName,
value: item.id,
id: item.id,
})).filter((item: { id: string; name: string; value: string }) => needShow.some((citem: string) => item.name.includes(citem)))
})
}
// onMounted(() => {
// fetchDict()
// fetchData()
// })
// 切换地图标识
const switchMode = (type: string) => {
tableFlag.value = type
}
// 点击数据行
const rowClick = (data: any) => {
if (tableFlag.value === 'normal') { return }
if (!data.lngGaode || !data.latGaode) {
ElMessage.warning('该数据缺少坐标信息')
return
}
if (!data.devcode || !data.id) {
ElMessage.warning('暂无详情数据')
return
}
cacheRow.value = data
// 打开地图弹窗
mapRef.value.openInfoDetail({
lnglat: [data.lngGaode, data.latGaode],
id: data.id,
name: '',
row: {
...data,
deviceTypeName: data.typeName,
tagNumber: data.tagNumber,
deviceCode: data.devcode,
pipeCode: data.pipeCode,
lat: data.latGaode,
lng: data.lngGaode,
id: data.id,
status: data.onLineStatus,
},
})
if (!data.pipeCode) {
return
}
// 关联的管线高亮
const line = pipeData.value.filter((item: any) => item.pipeCode === data.pipeCode)
if (line.length) {
if (!mapRef.value.mapRef.lineAllList.length) {
return
}
const link = mapRef.value.mapRef.lineAllList.filter((item: any) => line.filter((citem: any) => [[citem.startLng, citem.startLat], [citem.endLng, citem.endLat]].join() === item.$x.join()).length)
if (link.length) {
link.forEach((element: any) => {
element.setOptions({
strokeColor: '#34A0E8',
strokeWeight: 4,
})
})
}
}
}
// 查看/编辑
const editRef = ref()
const $router = useRouter()
const editRow = (type: string, row: any) => {
if (type === 'edit') {
editRef.value.initDialog(type, row)
return
}
// console.log(row)
if (!row.devcode || !row.id) {
ElMessage.warning('暂无详情数据')
return
}
$router.push({
// path: `/monitor/${type}`,
name: 'PipelineMonitorDetail',
query: {
id: row.id,
deviceCode: row.devcode,
typeName: row.typeName,
},
})
}
// 设备详情
const toDeviceDetail = (row: any) => {
if (!row.devcode || !row.typeName) {
ElMessage.warning('缺少设备关键信息')
return
}
$router.push({
name: 'DeviceManageDetail',
params: {
type: 'detail',
},
query: {
row: JSON.stringify({
devcode: row.devcode,
deviceType: row.typeName,
deviceTypeName: row.typeName,
devTypeName: row.typeName,
}),
},
})
}
// 表格高度
window.addEventListener('resize', () => {
if (tableFlag.value === 'map') {
tableHeight.value = window.innerHeight - 60 - 50 - 10 - 350 - 98 - 10 - 52 - 20
}
else {
tableHeight.value = list.value.length >= 15 ? window.innerHeight - 60 - 50 - 10 - 98 - 10 - 52 - 20 : list.value.length * 40 + 40
}
})
onBeforeUnmount(() => {
window.addEventListener('resize', () => { })
})
// 监听地图高度
const observer = ref()
const watchMapHeight = () => {
// 创建一个ResizeObserver实例
observer.value = new ResizeObserver((entries: any) => {
for (const entry of entries) {
// 获取div元素的新高度
const newHeight = entry.contentRect.height
// 执行相应的操作，比如更新UI或调用其他函数
// console.log(`元素新高度为:${newHeight}`)
const map = document.getElementById('map') as HTMLElement
if(!map) {
return
}
map.style.height = `${newHeight}px`
if (newHeight < 350) {
if (tableFlag.value === 'map') {
tableHeight.value = window.innerHeight - 60 - 50 - 10 - 350 - 98 - 10 - 52 - 10 + (350 - newHeight)
}
else {
tableHeight.value = list.value.length >= 15 ? window.innerHeight - 60 - 50 - 10 - 98 - 10 - 52 - 20 : list.value.length * 40 + 40
}
}
}
})
// 监听目标div元素的宽度变化
const targetDiv = document.getElementById('map-container-height') as Element
observer.value.observe(targetDiv)
}
watch(() => tableFlag.value, (newVal) => {
if (newVal === 'map') {
tableHeight.value = window.innerHeight - 60 - 50 - 10 - 350 - 98 - 10 - 52 - 15
setTimeout(() => {
watchMapHeight()
})
}
else if (newVal === 'normal') {
// tableHeight.value = window.innerHeight - 60 - 50 - 10 - 98 - 10 - 52 - 15
tableHeight.value = list.value.length >= 15 ? window.innerHeight - 60 - 50 - 10 - 98 - 10 - 52 - 20 : list.value.length * 40 + 40
}
})
const { proxy } = getCurrentInstance() as any
const cache = ref('')
onBeforeRouteLeave((to: any) => {
keepSearchParams(to.path, 'PipelineMonitor')
cache.value = tableFlag.value
// 销毁ResizeObserver实例
if (observer.value) {
observer.value.disconnect()
}
})
onActivated(() => {
// 从编辑或者新增页面回来需要重新获取列表数据
// $router.options.history.state.back 上一次路由地址
if (!($router.options.history.state.back as string || '').includes('detail')) {
// console.log('需要重新获取列表')
fetchData()
}
if(cache.value === 'map') {
// console.log('重置地图')
tableFlag.value = 'normal'
setTimeout(() => {
switchMode('map')
// if(cacheRow.value.id) {
// let timer = setInterval(() => {
// if(mapRef.value?.mapRef) {
// clearInterval(timer)
// setTimeout(() => {
// if(cacheRow.value.lng && cacheRow.value.lat) {
// cacheRow.value.lngGaode = cacheRow.value.lng
// cacheRow.value.latGaode = cacheRow.value.lat
// }
// if(cacheRow.value.deviceCode) {
// cacheRow.value.devcode = cacheRow.value.deviceCode
// }
// rowClick(cacheRow.value)
// }, 2000)
// }
// }, 500);
// }
})
}
})
const clickMarker = (data: any) => {
// console.log(data, 'data')
cacheRow.value = data
}
onMounted(async () => {
await fetchDict()
fetchData()
watchMapHeight()
switchMode('table')
setTimeout(() => {
switchMode('map')
})
})
</script>
<template>
<!-- 布局 -->
<app-container class="container">
<edit-dialog ref="editRef" @refresh="fetchData" />
<div v-if="tableFlag === 'map'" id="map-container-height" style="position: relative;">
<!-- 地图 -->
<map-com @clickMarker="clickMarker" ref="mapRef" v-drag-height="100" v-loading="mapLoading" :height="350" :data="mapList" :pipe="pipeData" />
<!-- 收起地图-图标 -->
<div class="icon" @click="switchMode('normal')">
<el-icon :size="25">
<arrow-up-bold />
</el-icon>
</div>
</div>
<!-- 筛选条件 -->
<search-area :need-clear="true" @search="fetchData" @clear="reset">
<search-item>
<el-input v-model.trim="listQuery.tagNumber" placeholder="安装位号" clearable style="width: 160px !important;" />
</search-item>
<search-item>
<el-input v-model.trim="listQuery.devCode" placeholder="设备编号" clearable style="width: 160px !important;" />
</search-item>
<search-item>
<el-select v-model="listQuery.devTypeId" placeholder="设备类型" filterable clearable class="select"
style="width: 160px;">
<el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
<!-- <el-input v-model.trim="listQuery.devName" placeholder="设备名称" clearable style="width: 160px !important;" /> -->
</search-item>
<search-item>
<dept-select v-model="listQuery.deptId" placeholder="管理单位" :clearable="true" style="width: 160px !important;" />
</search-item>
<!-- <search-item>
<el-input v-model.trim="listQuery.pipeCode" placeholder="关联管线" clearable style="width: 160px !important;" />
</search-item> -->
<search-item>
<el-input v-model.trim="listQuery.position" placeholder="详细位置" clearable style="width: 160px !important;" />
</search-item>
<!-- <search-item>
<el-select v-model="listQuery.pressType" placeholder="压力级制" clearable class="select" style="width: 192px;">
<el-option v-for="item in pressTypeList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
</search-item>
<search-item>
<el-select v-model="listQuery.material" placeholder="材质" clearable class="select" style="width: 192px;">
<el-option v-for="item in materialList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
</search-item>
<search-item>
<el-input v-model="listQuery.pipeDiameter1" placeholder="管径范围(mm)" clearable type="number"
style="width: 135px;" />
~
<el-input v-model="listQuery.pipeDiameter2" placeholder="管径范围(mm)" clearable type="number"
style="width: 135px;" />
</search-item>
<search-item>
<el-input v-model="listQuery.constructEra1" placeholder="建设年代" clearable type="number" style="width: 135px;" />
~
<el-input v-model="listQuery.constructEra2" placeholder="建设年代" clearable type="number" style="width: 135px;" />
</search-item>
<search-item>
<el-select v-model="listQuery.pressType" placeholder="安装方式" clearable class="select" style="width: 192px;">
<el-option v-for="item in pressTypeList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
</search-item> -->
<search-item>
<el-select v-model="listQuery.onState" placeholder="在用状态" filterable clearable class="select"
style="width: 160px !important;">
<el-option v-for="item in onStateList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
</search-item>
<search-item>
<el-select v-model="listQuery.monitorState" placeholder="设备状态" filterable clearable class="select"
style="width: 160px !important;">
<el-option v-for="item in monitorStateList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
</search-item>
</search-area>
<!-- 表头标题 -->
<table-container :is-config="true" config-title="pipeline-monitor" :columns="columns"
:config-columns="columnsConfig" :edit="editColumns">
<template #btns-left>
<!-- 操作 -->
<div v-if="tableFlag === 'normal'" style="margin-left: 15px;">
<el-button type="primary" plain :disabled="loadingTable" @click="switchMode('map')">
切换地图模式
</el-button>
</div>
</template>
<template #btns-right>
<!-- 操作 -->
<div>
<!-- <el-button v-if="proxy.hasPerm('/pipeline/export')" type="primary">
导出
</el-button> -->
</div>
</template>
<!-- 查询结果Table显示 -->
<normal-table :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
:height="tableHeight" @change="changePage" @rowDbClick="rowClick">
<template #preColumns>
<el-table-column label="序号" width="75" align="center">
<template #default="scope">
{{ (listQuery.offset as number - 1) * (listQuery.limit as number) + scope.$index + 1 }}
</template>
</el-table-column>
</template>
<template #isCustom="{ scope, column }">
<!-- 设备编号 -->
<span v-if="column.text === '设备编号'" class="pointer link" @click="toDeviceDetail(scope.row)">
<el-tooltip v-if="scope.row.manufactureName" class="box-item" effect="dark"
:content="`${scope.row?.typeName}(${scope.row?.manufactureName})`" placement="top">
{{ scope.row[column.value] }}
</el-tooltip>
<template v-else>
{{ scope.row[column.value] }}
</template>
</span>
</template>
<template #columns>
<el-table-column label="操作" align="center" width="80">
<template #default="scope">
<el-button v-if="proxy.hasPerm('/pipeline/detail')" type="primary" link size="small"
@click="editRow('detail', scope.row)">
查看
</el-button>
<!-- <el-button type="primary" link size="small" @click="editRow('edit', scope.row)">
编辑
</el-button> -->
</template>
</el-table-column>
</template>
</normal-table>
</table-container>
</app-container>
</template>
<style lang="scss" scoped>
.pointer {
&:hover {
cursor: pointer;
}
}
.link {
color: #0d76d4 !important;
&:hover {
text-decoration: underline !important;
}
}
.container {
position: relative;
.map {
position: fixed;
z-index: 99;
}
.icon {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 30%);
z-index: 999;
&:hover {
cursor: pointer;
}
}
.search-area {
position: fixed;
z-index: 99;
}
}
</style>
<style>
.select {
width: 192px;
}
</style>
