|
|
@@ -4,9 +4,8 @@
|
|
|
<!-- 页头 -->
|
|
|
<div class="page-head">
|
|
|
<div class="page-head-titles">
|
|
|
- <div class="page-title">设备管理</div>
|
|
|
+ <div class="page-title">设备统计</div>
|
|
|
</div>
|
|
|
- <el-button type="primary" icon="Plus" class="btn-primary" @click="handleAdd">新增设备</el-button>
|
|
|
</div>
|
|
|
|
|
|
<!-- KPI -->
|
|
|
@@ -43,10 +42,17 @@
|
|
|
|
|
|
<!-- 设备台账 -->
|
|
|
<el-card shadow="never" class="ledger">
|
|
|
- <div class="ledger-head">
|
|
|
- <div class="ledger-title">设备台账</div>
|
|
|
- <div class="ledger-sub">一览管网监测设备台账与运行状态</div>
|
|
|
- </div>
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header-row">
|
|
|
+ <div>
|
|
|
+ <div class="card-title">设备台账</div>
|
|
|
+ <div class="card-subtitle">一览管网监测设备台账与运行状态</div>
|
|
|
+ </div>
|
|
|
+ <div class="ledger-actions">
|
|
|
+ <el-button type="primary" icon="Plus" class="btn-primary" @click="handleAdd">新增设备</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
|
|
|
<el-form ref="queryRef" :model="queryParams" :inline="true" class="filters">
|
|
|
<el-form-item label="设备编码" prop="equipmentCode">
|
|
|
@@ -173,7 +179,7 @@
|
|
|
<el-descriptions-item label="资产价值(元)">{{ selectedDetail.equipmentInfo.assetValue ?? "-" }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="使用年限(年)">{{ selectedDetail.equipmentInfo.useLife ?? "-" }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="资产状态">{{ currentStatusMeta(selectedDetail.statusInfo?.currentStatus).text }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="所属片区">{{ selectedDetail.equipmentInfo.district || "-" }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="所属片区">{{ districtLabel(selectedDetail.equipmentInfo.district) }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="设备位置" :span="2">{{ selectedDetail.equipmentInfo.equipmentLocation || "-" }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="经度">{{ selectedDetail.equipmentInfo.longitude ?? "-" }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="纬度">{{ selectedDetail.equipmentInfo.latitude ?? "-" }}</el-descriptions-item>
|
|
|
@@ -267,7 +273,7 @@
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="所属片区" prop="district">
|
|
|
<el-select v-model="form.district" clearable placeholder="请选择所属片区" style="width: 100%">
|
|
|
- <el-option v-for="item in districtOptions" :key="item" :label="item" :value="item" />
|
|
|
+ <el-option v-for="item in districtOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
@@ -354,7 +360,6 @@ import {
|
|
|
getEquipmentDetail,
|
|
|
getEquipmentStatusStatistics,
|
|
|
listEquipment,
|
|
|
- listEquipmentStatusAll,
|
|
|
listEquipmentTypeAll,
|
|
|
updateEquipment,
|
|
|
updateEquipmentStatus
|
|
|
@@ -368,7 +373,6 @@ const rootTypeId = ref(route.query.rootTypeId ? Number(route.query.rootTypeId) :
|
|
|
|
|
|
const equipmentList = ref([]);
|
|
|
const allTypeList = ref([]);
|
|
|
-const equipmentStatusList = ref([]);
|
|
|
const loading = ref(false);
|
|
|
const open = ref(false);
|
|
|
const detailOpen = ref(false);
|
|
|
@@ -392,8 +396,17 @@ const equipmentStatusOptions = [
|
|
|
{ label: "报废", value: 2 }
|
|
|
];
|
|
|
|
|
|
-// 所属片区
|
|
|
-const districtOptions = ["城南", "城北", "太常"];
|
|
|
+// 所属片区:与后端 DistrictEnum 对齐(0-城南 1-城北 2-太常)
|
|
|
+const districtOptions = [
|
|
|
+ { label: "城南", value: 0 },
|
|
|
+ { label: "城北", value: 1 },
|
|
|
+ { label: "太常", value: 2 }
|
|
|
+];
|
|
|
+
|
|
|
+function districtLabel(code) {
|
|
|
+ const hit = districtOptions.find((item) => item.value === code);
|
|
|
+ return hit ? hit.label : "-";
|
|
|
+}
|
|
|
|
|
|
const typeNameMap = computed(() => {
|
|
|
return allTypeList.value.reduce((acc, item) => {
|
|
|
@@ -403,23 +416,16 @@ const typeNameMap = computed(() => {
|
|
|
});
|
|
|
|
|
|
// 设备状态索引:equipmentId -> EquipmentStatus
|
|
|
-const statusMap = computed(() => {
|
|
|
- return equipmentStatusList.value.reduce((acc, item) => {
|
|
|
- acc[item.equipmentId] = item;
|
|
|
- return acc;
|
|
|
- }, {});
|
|
|
-});
|
|
|
-
|
|
|
function getRowStatus(equipmentId) {
|
|
|
- return statusMap.value[equipmentId]?.currentStatus;
|
|
|
+ return equipmentList.value.find(item => item.equipmentId === equipmentId)?.currentStatus;
|
|
|
}
|
|
|
|
|
|
function getRowOnline(equipmentId) {
|
|
|
- return statusMap.value[equipmentId]?.onlineStatus;
|
|
|
+ return equipmentList.value.find(item => item.equipmentId === equipmentId)?.onlineStatus;
|
|
|
}
|
|
|
|
|
|
function getRowAlarm(equipmentId) {
|
|
|
- return statusMap.value[equipmentId]?.alarmStatus;
|
|
|
+ return equipmentList.value.find(item => item.equipmentId === equipmentId)?.alarmStatus;
|
|
|
}
|
|
|
|
|
|
// parentId 为 0(或空)表示父类
|
|
|
@@ -568,9 +574,8 @@ function getList() {
|
|
|
}
|
|
|
|
|
|
function loadAssistData() {
|
|
|
- return Promise.all([listEquipmentTypeAll(), listEquipmentStatusAll(rootTypeId.value)]).then(([typeRes, statusRes]) => {
|
|
|
+ return listEquipmentTypeAll().then((typeRes) => {
|
|
|
allTypeList.value = typeRes.data || [];
|
|
|
- equipmentStatusList.value = statusRes.data || [];
|
|
|
});
|
|
|
}
|
|
|
|
|
|
@@ -793,22 +798,30 @@ onMounted(() => {
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
-.ledger-head {
|
|
|
+.card-header-row {
|
|
|
display: flex;
|
|
|
- align-items: baseline;
|
|
|
- gap: 8px;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
}
|
|
|
|
|
|
-.ledger-title {
|
|
|
+.card-title {
|
|
|
font-size: 16px;
|
|
|
font-weight: 600;
|
|
|
- color: #0a1628;
|
|
|
+ color: #1f2937;
|
|
|
}
|
|
|
|
|
|
-.ledger-sub {
|
|
|
+.card-subtitle {
|
|
|
+ margin-top: 4px;
|
|
|
font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- color: #9ca3af;
|
|
|
+ color: #6b7280;
|
|
|
+}
|
|
|
+
|
|
|
+.ledger-actions {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
/* 筛选栏 */
|