|
|
@@ -41,9 +41,10 @@
|
|
|
<el-tag :type="row.status === '0' ? 'success' : 'danger'">{{ getDictLabel(pipeNetworkStatusDict, row.status) }}</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="操作" width="180" fixed="right">
|
|
|
+ <el-table-column label="操作" width="240" fixed="right">
|
|
|
<template #default="{ row }">
|
|
|
<el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
|
|
|
+ <el-button type="success" size="small" @click="handleDeviceDialog(row)">关联设备</el-button>
|
|
|
<el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
@@ -59,6 +60,45 @@
|
|
|
<div id="manholeMap" style="width: 100%; height: 600px"></div>
|
|
|
</el-card>
|
|
|
|
|
|
+ <el-dialog title="关联监测设备" v-model="deviceDialogVisible" width="950px" destroy-on-close>
|
|
|
+ <el-form label-width="80px">
|
|
|
+ <el-form-item label="当前窨井">
|
|
|
+ <span>{{ currentManhole.manholeName || '-' }}</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="选择设备">
|
|
|
+ <el-select
|
|
|
+ v-model="bindForm.equipmentId"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ placeholder="请选择要关联的设备"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in unboundEquipmentOptions"
|
|
|
+ :key="item.equipmentId"
|
|
|
+ :label="`${item.equipmentName}（${item.equipmentCode}）`"
|
|
|
+ :value="item.equipmentId"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div style="margin-bottom: 12px">
|
|
|
+ <el-button type="primary" @click="submitBind">添加关联</el-button>
|
|
|
+ </div>
|
|
|
+ <el-table :data="deviceList" border stripe v-loading="deviceLoading">
|
|
|
+ <el-table-column label="设备编码" prop="equipmentCode" min-width="140" />
|
|
|
+ <el-table-column label="设备名称" prop="equipmentName" min-width="180" show-overflow-tooltip />
|
|
|
+ <el-table-column label="设备型号" prop="equipmentModel" min-width="120" />
|
|
|
+ <el-table-column label="制造商" prop="manufacturer" min-width="140" show-overflow-tooltip />
|
|
|
+ <el-table-column label="设备位置" prop="equipmentLocation" min-width="180" show-overflow-tooltip />
|
|
|
+ <el-table-column label="操作" align="center" width="100">
|
|
|
+ <template #default="{ row: dev }">
|
|
|
+ <el-button link type="danger" icon="Close" @click="handleUnbind(dev)">解绑</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
<el-dialog :title="dialogTitle" v-model="dialogVisible" width="650px" destroy-on-close>
|
|
|
<el-form :model="formData" ref="formRef" label-width="100px">
|
|
|
<el-form-item label="窨井编码" prop="manholeCode">
|
|
|
@@ -111,9 +151,13 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, reactive, onMounted, nextTick, watch } from 'vue'
|
|
|
+import { ref, reactive, computed, onMounted, nextTick, watch } from 'vue'
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
-import { getManholePage, addManhole, updateManhole, deleteManhole } from '@/api/pipeNetwork/basic'
|
|
|
+import {
|
|
|
+ getManholePage, addManhole, updateManhole, deleteManhole,
|
|
|
+ getManholeDevices, addManholeDeviceRel, deleteManholeDeviceRel,
|
|
|
+ getEquipmentList
|
|
|
+} from '@/api/pipeNetwork/basic'
|
|
|
import { getDicts } from '@/api/system/dict/data'
|
|
|
|
|
|
const loading = ref(false)
|
|
|
@@ -135,6 +179,17 @@ const formData = reactive({
|
|
|
|
|
|
const pipeNetworkStatusDict = ref([])
|
|
|
const manholeShapeDict = ref([])
|
|
|
+
|
|
|
+const deviceDialogVisible = ref(false)
|
|
|
+const currentManhole = reactive({ manholeId: '', manholeName: '' })
|
|
|
+const deviceList = ref([])
|
|
|
+const deviceLoading = ref(false)
|
|
|
+const bindForm = reactive({ equipmentId: '' })
|
|
|
+const equipmentOptions = ref([])
|
|
|
+const unboundEquipmentOptions = computed(() => {
|
|
|
+ const boundIds = deviceList.value.map(d => d.equipmentId)
|
|
|
+ return equipmentOptions.value.filter(e => !boundIds.includes(e.equipmentId))
|
|
|
+})
|
|
|
function getDictLabel(dict, value) {
|
|
|
const item = dict.find(d => d.dictValue === value)
|
|
|
return item ? item.dictLabel : value
|
|
|
@@ -179,15 +234,83 @@ function handleDelete(row) {
|
|
|
}).catch(() => {})
|
|
|
}
|
|
|
|
|
|
+async function handleDeviceDialog(row) {
|
|
|
+ Object.assign(currentManhole, { manholeId: row.manholeId, manholeName: row.manholeName })
|
|
|
+ bindForm.equipmentId = ''
|
|
|
+ deviceDialogVisible.value = true
|
|
|
+ if (equipmentOptions.value.length === 0) { await loadEquipmentOptions() }
|
|
|
+ loadDeviceList()
|
|
|
+}
|
|
|
+async function loadDeviceList() {
|
|
|
+ deviceLoading.value = true
|
|
|
+ try {
|
|
|
+ const res = await getManholeDevices(currentManhole.manholeId)
|
|
|
+ const raw = res.data || []
|
|
|
+ deviceList.value = raw.map(r => ({
|
|
|
+ relId: r.relId,
|
|
|
+ equipmentId: r.equipmentId,
|
|
|
+ equipmentName: r.equipmentName,
|
|
|
+ equipmentType: r.equipmentType,
|
|
|
+ equipmentCode: '',
|
|
|
+ equipmentModel: '',
|
|
|
+ manufacturer: '',
|
|
|
+ equipmentLocation: ''
|
|
|
+ }))
|
|
|
+ if (raw.length > 0) {
|
|
|
+ const eqMap = new Map(equipmentOptions.value.map(e => [e.equipmentId, e]))
|
|
|
+ deviceList.value = raw.map(r => {
|
|
|
+ const full = eqMap.get(r.equipmentId)
|
|
|
+ return {
|
|
|
+ relId: r.relId,
|
|
|
+ equipmentId: r.equipmentId,
|
|
|
+ equipmentName: r.equipmentName || (full ? full.equipmentName : ''),
|
|
|
+ equipmentCode: full ? full.equipmentCode : '',
|
|
|
+ equipmentModel: full ? full.equipmentModel : '',
|
|
|
+ manufacturer: full ? full.manufacturer : '',
|
|
|
+ equipmentLocation: full ? full.equipmentLocation : ''
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } catch (e) { console.error(e) } finally { deviceLoading.value = false }
|
|
|
+}
|
|
|
+async function loadEquipmentOptions() {
|
|
|
+ try {
|
|
|
+ const res = await getEquipmentList()
|
|
|
+ equipmentOptions.value = res.data || []
|
|
|
+ } catch (e) { console.error(e) }
|
|
|
+}
|
|
|
+async function submitBind() {
|
|
|
+ if (!bindForm.equipmentId) { ElMessage.warning('请先选择设备'); return }
|
|
|
+ const eq = equipmentOptions.value.find(e => e.equipmentId === bindForm.equipmentId)
|
|
|
+ try {
|
|
|
+ await addManholeDeviceRel({
|
|
|
+ manholeId: currentManhole.manholeId,
|
|
|
+ equipmentId: bindForm.equipmentId,
|
|
|
+ equipmentName: eq ? eq.equipmentName : '',
|
|
|
+ equipmentType: eq ? (eq.equipmentTypeId || '') : ''
|
|
|
+ })
|
|
|
+ ElMessage.success('关联成功')
|
|
|
+ bindForm.equipmentId = ''
|
|
|
+ loadDeviceList()
|
|
|
+ } catch (e) { console.error(e) }
|
|
|
+}
|
|
|
+function handleUnbind(dev) {
|
|
|
+ ElMessageBox.confirm('确认解除该设备关联？', '提示', { type: 'warning' }).then(async () => {
|
|
|
+ await deleteManholeDeviceRel(dev.relId)
|
|
|
+ ElMessage.success('解绑成功')
|
|
|
+ loadDeviceList()
|
|
|
+ }).catch(() => {})
|
|
|
+}
|
|
|
+
|
|
|
async function initMap() {
|
|
|
await nextTick()
|
|
|
const el = document.getElementById('manholeMap')
|
|
|
if (!el) return
|
|
|
- try {
|
|
|
+ /* try {
|
|
|
const L = await import('leaflet')
|
|
|
} catch (e) {
|
|
|
el.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#999;">地图加载需要Leaflet依赖，请安装: npm install leaflet</div>'
|
|
|
- }
|
|
|
+ }*/
|
|
|
}
|
|
|
watch(viewMode, (v) => { if (v === 'map') initMap() })
|
|
|
|
