|
|
@@ -10,7 +10,7 @@
|
|
|
<el-card shadow="hover" class="summary-card success">
|
|
|
<div class="summary-label">正常运行</div>
|
|
|
<div class="summary-value">{{ summary.activeNetworks }}</div>
|
|
|
- <div class="summary-desc">状态为正常或启用的设施</div>
|
|
|
+ <div class="summary-desc">状态为正常的设施</div>
|
|
|
</el-card>
|
|
|
<el-card shadow="hover" class="summary-card warning">
|
|
|
<div class="summary-label">设施类型</div>
|
|
|
@@ -25,7 +25,12 @@
|
|
|
</div>
|
|
|
|
|
|
<el-card shadow="never" class="query-card">
|
|
|
- <el-form ref="queryRef" :model="queryParams" :inline="true" v-show="showSearch">
|
|
|
+ <el-form
|
|
|
+ ref="queryRef"
|
|
|
+ :model="queryParams"
|
|
|
+ :inline="true"
|
|
|
+ v-show="showSearch"
|
|
|
+ >
|
|
|
<el-form-item label="设施编码" prop="networkCode">
|
|
|
<el-input
|
|
|
v-model="queryParams.networkCode"
|
|
|
@@ -54,7 +59,12 @@
|
|
|
default-first-option
|
|
|
style="width: 220px"
|
|
|
>
|
|
|
- <el-option v-for="item in networkTypeOptions" :key="item" :label="item" :value="item" />
|
|
|
+ <el-option
|
|
|
+ v-for="item in networkTypeOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="状态" prop="status">
|
|
|
@@ -63,15 +73,21 @@
|
|
|
placeholder="请选择状态"
|
|
|
clearable
|
|
|
filterable
|
|
|
- allow-create
|
|
|
default-first-option
|
|
|
style="width: 180px"
|
|
|
>
|
|
|
- <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
|
|
|
+ <el-option
|
|
|
+ v-for="item in statusOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button type="primary" icon="Search" @click="handleQuery"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
@@ -84,13 +100,34 @@
|
|
|
<div class="card-header-row">
|
|
|
<div>
|
|
|
<div class="card-title">设施台账</div>
|
|
|
- <div class="card-subtitle">支持查询、新增、编辑、删除以及设施与点位联动查看</div>
|
|
|
+ <div class="card-subtitle">
|
|
|
+ 支持查询、新增、编辑、删除以及设施与点位联动查看
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="card-actions">
|
|
|
- <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
|
|
|
- <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">修改</el-button>
|
|
|
- <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">删除</el-button>
|
|
|
- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
|
|
|
+ <el-button type="primary" plain icon="Plus" @click="handleAdd"
|
|
|
+ >新增</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="success"
|
|
|
+ plain
|
|
|
+ icon="Edit"
|
|
|
+ :disabled="single"
|
|
|
+ @click="handleUpdate()"
|
|
|
+ >修改</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ plain
|
|
|
+ icon="Delete"
|
|
|
+ :disabled="multiple"
|
|
|
+ @click="handleDelete()"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ <right-toolbar
|
|
|
+ v-model:showSearch="showSearch"
|
|
|
+ @queryTable="getList"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -104,21 +141,72 @@
|
|
|
@row-click="handleRowClick"
|
|
|
>
|
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
|
- <el-table-column label="设施编码" align="center" prop="networkCode" min-width="130" />
|
|
|
- <el-table-column label="设施名称" align="center" prop="networkName" min-width="180" show-overflow-tooltip />
|
|
|
- <el-table-column label="设施类型" align="center" prop="networkType" min-width="120" />
|
|
|
- <el-table-column label="等级" align="center" prop="networkLevel" width="90" />
|
|
|
- <el-table-column label="管养单位" align="center" prop="managementUnit" min-width="150" show-overflow-tooltip />
|
|
|
+ <el-table-column
|
|
|
+ label="设施编码"
|
|
|
+ align="center"
|
|
|
+ prop="networkCode"
|
|
|
+ min-width="130"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="设施名称"
|
|
|
+ align="center"
|
|
|
+ prop="networkName"
|
|
|
+ min-width="180"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column label="设施类型" align="center" min-width="120">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ getNetworkTypeText(scope.row.networkType) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="等级"
|
|
|
+ align="center"
|
|
|
+ prop="networkLevel"
|
|
|
+ width="90"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="管养单位"
|
|
|
+ align="center"
|
|
|
+ prop="managementUnit"
|
|
|
+ min-width="150"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
<el-table-column label="状态" align="center" width="100">
|
|
|
<template #default="scope">
|
|
|
- <el-tag :type="getStatusTagType(scope.row.status)">{{ scope.row.status || "-" }}</el-tag>
|
|
|
+ <el-tag :type="getStatusTagType(scope.row.status)">{{
|
|
|
+ getStatusText(scope.row.status)
|
|
|
+ }}</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="操作" align="center" width="170" class-name="small-padding fixed-width">
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ align="center"
|
|
|
+ width="200"
|
|
|
+ class-name="small-padding fixed-width"
|
|
|
+ >
|
|
|
<template #default="scope">
|
|
|
- <el-button link type="primary" icon="View" @click.stop="selectNetwork(scope.row)">详情</el-button>
|
|
|
- <el-button link type="primary" icon="Edit" @click.stop="handleUpdate(scope.row)">修改</el-button>
|
|
|
- <el-button link type="danger" icon="Delete" @click.stop="handleDelete(scope.row)">删除</el-button>
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ icon="View"
|
|
|
+ @click.stop="selectNetwork(scope.row)"
|
|
|
+ >详情</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ icon="Edit"
|
|
|
+ @click.stop="handleUpdate(scope.row)"
|
|
|
+ >修改</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="danger"
|
|
|
+ icon="Delete"
|
|
|
+ @click.stop="handleDelete(scope.row)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
@@ -139,62 +227,124 @@
|
|
|
<div class="card-header-row">
|
|
|
<div>
|
|
|
<div class="card-title">设施详情</div>
|
|
|
- <div class="card-subtitle">选中设施后可查看基础信息及下挂监测点位</div>
|
|
|
+ <div class="card-subtitle">
|
|
|
+ 选中设施后可查看基础信息及下挂监测点位
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <el-tag v-if="selectedNetwork.networkId" :type="getStatusTagType(selectedNetwork.status)">
|
|
|
- {{ selectedNetwork.status || "未设置" }}
|
|
|
+ <el-tag
|
|
|
+ v-if="selectedNetwork.networkId"
|
|
|
+ :type="getStatusTagType(selectedNetwork.status)"
|
|
|
+ >
|
|
|
+ {{ getStatusText(selectedNetwork.status) }}
|
|
|
</el-tag>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
- <el-empty v-if="!selectedNetwork.networkId" description="请从左侧选择一条管网设施" />
|
|
|
+ <el-empty
|
|
|
+ v-if="!selectedNetwork.networkId"
|
|
|
+ description="请从左侧选择一条管网设施"
|
|
|
+ />
|
|
|
|
|
|
<template v-else>
|
|
|
<div class="detail-hero">
|
|
|
<div class="hero-title">{{ selectedNetwork.networkName }}</div>
|
|
|
<div class="hero-meta">
|
|
|
<span>{{ selectedNetwork.networkCode }}</span>
|
|
|
- <span>{{ selectedNetwork.networkType || "未分类" }}</span>
|
|
|
- <span>{{ selectedNetwork.managementUnit || "未维护管养单位" }}</span>
|
|
|
+ <span>{{
|
|
|
+ getNetworkTypeText(selectedNetwork.networkType)
|
|
|
+ }}</span>
|
|
|
+ <span>{{
|
|
|
+ selectedNetwork.managementUnit || "未维护管养单位"
|
|
|
+ }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <el-descriptions :column="1" border size="small" class="detail-descriptions">
|
|
|
- <el-descriptions-item label="设施等级">{{ selectedNetwork.networkLevel || "-" }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="位置描述">{{ selectedNetwork.location || "-" }}</el-descriptions-item>
|
|
|
+ <el-descriptions
|
|
|
+ :column="1"
|
|
|
+ border
|
|
|
+ size="small"
|
|
|
+ class="detail-descriptions"
|
|
|
+ >
|
|
|
+ <el-descriptions-item label="设施等级">{{
|
|
|
+ selectedNetwork.networkLevel || "-"
|
|
|
+ }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="位置描述">{{
|
|
|
+ selectedNetwork.location || "-"
|
|
|
+ }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="经纬度">
|
|
|
- {{ selectedNetwork.longitude ?? "-" }} / {{ selectedNetwork.latitude ?? "-" }}
|
|
|
+ {{ selectedNetwork.longitude ?? "-" }} /
|
|
|
+ {{ selectedNetwork.latitude ?? "-" }}
|
|
|
</el-descriptions-item>
|
|
|
<el-descriptions-item label="长度/管径">
|
|
|
- {{ selectedNetwork.length ?? "-" }} m / {{ selectedNetwork.diameter ?? "-" }} mm
|
|
|
+ {{ selectedNetwork.length ?? "-" }} m /
|
|
|
+ {{ selectedNetwork.diameter ?? "-" }} mm
|
|
|
</el-descriptions-item>
|
|
|
- <el-descriptions-item label="材质">{{ selectedNetwork.material || "-" }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="建设日期">{{ selectedNetwork.buildDate || "-" }}</el-descriptions-item>
|
|
|
- <el-descriptions-item label="备注">{{ selectedNetwork.remark || "-" }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="材质">{{
|
|
|
+ selectedNetwork.material || "-"
|
|
|
+ }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="建设日期">{{
|
|
|
+ selectedNetwork.buildDate || "-"
|
|
|
+ }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="备注">{{
|
|
|
+ selectedNetwork.remark || "-"
|
|
|
+ }}</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
|
|
|
<div class="section-block">
|
|
|
<div class="section-title">关联监测点位</div>
|
|
|
<div class="section-tip">
|
|
|
- 共 {{ relatedPoints.length }} 个点位，异常/需关注 {{ abnormalPointCount }} 个
|
|
|
+ 共 {{ relatedPoints.length }} 个点位，异常/需关注
|
|
|
+ {{ abnormalPointCount }} 个
|
|
|
</div>
|
|
|
- <el-table v-loading="pointLoading" :data="relatedPoints" size="small" max-height="300">
|
|
|
- <el-table-column label="点位名称" prop="pointName" min-width="140" show-overflow-tooltip />
|
|
|
- <el-table-column label="类型" prop="pointType" min-width="100" />
|
|
|
+ <el-table
|
|
|
+ v-loading="pointLoading"
|
|
|
+ :data="relatedPoints"
|
|
|
+ size="small"
|
|
|
+ max-height="300"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ label="点位名称"
|
|
|
+ prop="pointName"
|
|
|
+ min-width="140"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="类型"
|
|
|
+ prop="pointType"
|
|
|
+ min-width="100"
|
|
|
+ />
|
|
|
<el-table-column label="状态" width="90">
|
|
|
<template #default="scope">
|
|
|
- <el-tag :type="getStatusTagType(scope.row.status)" size="small">
|
|
|
- {{ scope.row.status || "-" }}
|
|
|
+ <el-tag
|
|
|
+ :type="getStatusTagType(scope.row.status)"
|
|
|
+ size="small"
|
|
|
+ >
|
|
|
+ {{ getStatusText(scope.row.status) }}
|
|
|
</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="安装日期" prop="installationDate" width="110" />
|
|
|
+ <el-table-column
|
|
|
+ label="安装日期"
|
|
|
+ prop="installationDate"
|
|
|
+ width="110"
|
|
|
+ />
|
|
|
</el-table>
|
|
|
</div>
|
|
|
|
|
|
<div class="side-actions">
|
|
|
- <el-button type="primary" icon="Edit" @click="handleUpdate(selectedNetwork)">编辑设施</el-button>
|
|
|
- <el-button type="danger" plain icon="Delete" @click="handleDelete(selectedNetwork)">删除设施</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="Edit"
|
|
|
+ @click="handleUpdate(selectedNetwork)"
|
|
|
+ >编辑设施</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ plain
|
|
|
+ icon="Delete"
|
|
|
+ @click="handleDelete(selectedNetwork)"
|
|
|
+ >删除设施</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-card>
|
|
|
@@ -202,53 +352,78 @@
|
|
|
</el-row>
|
|
|
|
|
|
<el-dialog :title="title" v-model="open" width="760px" append-to-body>
|
|
|
- <el-form ref="networkRef" :model="form" :rules="rules" label-width="110px">
|
|
|
+ <el-form
|
|
|
+ ref="networkRef"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="110px"
|
|
|
+ >
|
|
|
<el-row :gutter="16">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="设施编码" prop="networkCode">
|
|
|
- <el-input v-model="form.networkCode" placeholder="请输入设施编码" />
|
|
|
+ <el-input
|
|
|
+ v-model="form.networkCode"
|
|
|
+ placeholder="请输入设施编码"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="设施名称" prop="networkName">
|
|
|
- <el-input v-model="form.networkName" placeholder="请输入设施名称" />
|
|
|
+ <el-input
|
|
|
+ v-model="form.networkName"
|
|
|
+ placeholder="请输入设施名称"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="设施类型" prop="networkType">
|
|
|
<el-select
|
|
|
v-model="form.networkType"
|
|
|
- placeholder="请选择或输入设施类型"
|
|
|
+ placeholder="请选择设施类型"
|
|
|
filterable
|
|
|
- allow-create
|
|
|
default-first-option
|
|
|
style="width: 100%"
|
|
|
>
|
|
|
- <el-option v-for="item in networkTypeOptions" :key="item" :label="item" :value="item" />
|
|
|
+ <el-option
|
|
|
+ v-for="item in networkTypeOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="设施等级" prop="networkLevel">
|
|
|
- <el-input v-model="form.networkLevel" placeholder="请输入设施等级" />
|
|
|
+ <el-input
|
|
|
+ v-model="form.networkLevel"
|
|
|
+ placeholder="请输入设施等级"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="管养单位" prop="managementUnit">
|
|
|
- <el-input v-model="form.managementUnit" placeholder="请输入管养单位" />
|
|
|
+ <el-input
|
|
|
+ v-model="form.managementUnit"
|
|
|
+ placeholder="请输入管养单位"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="状态" prop="status">
|
|
|
<el-select
|
|
|
v-model="form.status"
|
|
|
- placeholder="请选择或输入状态"
|
|
|
+ placeholder="请选择状态"
|
|
|
filterable
|
|
|
- allow-create
|
|
|
default-first-option
|
|
|
style="width: 100%"
|
|
|
>
|
|
|
- <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
|
|
|
+ <el-option
|
|
|
+ v-for="item in statusOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
@@ -259,22 +434,42 @@
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="经度" prop="longitude">
|
|
|
- <el-input-number v-model="form.longitude" :precision="6" :step="0.000001" style="width: 100%" />
|
|
|
+ <el-input-number
|
|
|
+ v-model="form.longitude"
|
|
|
+ :precision="6"
|
|
|
+ :step="0.000001"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="纬度" prop="latitude">
|
|
|
- <el-input-number v-model="form.latitude" :precision="6" :step="0.000001" style="width: 100%" />
|
|
|
+ <el-input-number
|
|
|
+ v-model="form.latitude"
|
|
|
+ :precision="6"
|
|
|
+ :step="0.000001"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="长度(米)" prop="length">
|
|
|
- <el-input-number v-model="form.length" :precision="2" :step="1" style="width: 100%" />
|
|
|
+ <el-input-number
|
|
|
+ v-model="form.length"
|
|
|
+ :precision="2"
|
|
|
+ :step="1"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="管径(mm)" prop="diameter">
|
|
|
- <el-input-number v-model="form.diameter" :precision="2" :step="1" style="width: 100%" />
|
|
|
+ <el-input-number
|
|
|
+ v-model="form.diameter"
|
|
|
+ :precision="2"
|
|
|
+ :step="1"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
@@ -295,7 +490,12 @@
|
|
|
</el-col>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="备注" prop="remark">
|
|
|
- <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
|
|
|
+ <el-input
|
|
|
+ v-model="form.remark"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ placeholder="请输入备注"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -311,7 +511,14 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { computed, getCurrentInstance, onMounted, reactive, ref, toRefs } from "vue";
|
|
|
+import {
|
|
|
+ computed,
|
|
|
+ getCurrentInstance,
|
|
|
+ onMounted,
|
|
|
+ reactive,
|
|
|
+ ref,
|
|
|
+ toRefs,
|
|
|
+} from "vue";
|
|
|
import {
|
|
|
addPipeNetwork,
|
|
|
delPipeNetwork,
|
|
|
@@ -320,7 +527,7 @@ import {
|
|
|
listPipeNetwork,
|
|
|
listPipeNetworkAll,
|
|
|
listPointsByNetwork,
|
|
|
- updatePipeNetwork
|
|
|
+ updatePipeNetwork,
|
|
|
} from "@/api/pipeNetwork/pdeviceInform";
|
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
@@ -337,18 +544,34 @@ const multiple = ref(true);
|
|
|
const total = ref(0);
|
|
|
const title = ref("");
|
|
|
const selectedNetwork = ref({});
|
|
|
-const networkTypeOptions = ["管网路线", "燃气设施", "排水设施", "供水设施", "桥梁"];
|
|
|
-const statusOptions = ["正常", "启用", "停用", "维修中", "预警"];
|
|
|
+const networkTypeOptions = [
|
|
|
+ { label: "燃气设施", value: "0" },
|
|
|
+ { label: "排水设施", value: "1" },
|
|
|
+ { label: "供水设施", value: "2" },
|
|
|
+];
|
|
|
+const statusOptions = [
|
|
|
+ { label: "正常", value: "0" },
|
|
|
+ { label: "维护中", value: "1" },
|
|
|
+ { label: "异常", value: "2" },
|
|
|
+];
|
|
|
+const networkTypeMap = { 0: "燃气设施", 1: "排水设施", 2: "供水设施" };
|
|
|
+const statusMap = { 0: "正常", 1: "维护中", 2: "异常" };
|
|
|
+function getNetworkTypeText(val) {
|
|
|
+ return networkTypeMap[val] || val || "-";
|
|
|
+}
|
|
|
+function getStatusText(val) {
|
|
|
+ return statusMap[val] || val || "-";
|
|
|
+}
|
|
|
|
|
|
const summary = reactive({
|
|
|
totalNetworks: 0,
|
|
|
activeNetworks: 0,
|
|
|
typeCount: 0,
|
|
|
- totalPoints: 0
|
|
|
+ totalPoints: 0,
|
|
|
});
|
|
|
|
|
|
const abnormalPointCount = computed(() => {
|
|
|
- return relatedPoints.value.filter((item) => !["正常", "启用"].includes(item.status)).length;
|
|
|
+ return relatedPoints.value.filter((item) => item.status !== "0").length;
|
|
|
});
|
|
|
|
|
|
const data = reactive({
|
|
|
@@ -358,14 +581,20 @@ const data = reactive({
|
|
|
networkCode: undefined,
|
|
|
networkName: undefined,
|
|
|
networkType: undefined,
|
|
|
- status: undefined
|
|
|
+ status: undefined,
|
|
|
},
|
|
|
form: {},
|
|
|
rules: {
|
|
|
- networkCode: [{ required: true, message: "设施编码不能为空", trigger: "blur" }],
|
|
|
- networkName: [{ required: true, message: "设施名称不能为空", trigger: "blur" }],
|
|
|
- networkType: [{ required: true, message: "设施类型不能为空", trigger: "change" }]
|
|
|
- }
|
|
|
+ networkCode: [
|
|
|
+ { required: true, message: "设施编码不能为空", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ networkName: [
|
|
|
+ { required: true, message: "设施名称不能为空", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ networkType: [
|
|
|
+ { required: true, message: "设施类型不能为空", trigger: "change" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
});
|
|
|
|
|
|
const { queryParams, form, rules } = toRefs(data);
|
|
|
@@ -385,22 +614,19 @@ function createEmptyForm() {
|
|
|
diameter: undefined,
|
|
|
material: undefined,
|
|
|
buildDate: undefined,
|
|
|
- status: "正常",
|
|
|
- remark: undefined
|
|
|
+ status: "0",
|
|
|
+ remark: undefined,
|
|
|
};
|
|
|
}
|
|
|
|
|
|
function getStatusTagType(status) {
|
|
|
- if (["正常", "启用"].includes(status)) {
|
|
|
+ if (status === "0") {
|
|
|
return "success";
|
|
|
}
|
|
|
- if (status === "预警") {
|
|
|
+ if (status === "1") {
|
|
|
return "warning";
|
|
|
}
|
|
|
- if (["停用", "禁用"].includes(status)) {
|
|
|
- return "info";
|
|
|
- }
|
|
|
- if (["故障", "异常"].includes(status)) {
|
|
|
+ if (status === "2") {
|
|
|
return "danger";
|
|
|
}
|
|
|
return "";
|
|
|
@@ -430,23 +656,31 @@ function selectNetwork(row) {
|
|
|
}
|
|
|
|
|
|
function loadSummary() {
|
|
|
- return Promise.all([listPipeNetworkAll(), listMonitorPointAll()]).then(([networkRes, pointRes]) => {
|
|
|
- const allNetworks = networkRes.data || [];
|
|
|
- const allPoints = pointRes.data || [];
|
|
|
- summary.totalNetworks = allNetworks.length;
|
|
|
- summary.activeNetworks = allNetworks.filter((item) => ["正常", "启用"].includes(item.status)).length;
|
|
|
- summary.typeCount = new Set(allNetworks.map((item) => item.networkType).filter(Boolean)).size;
|
|
|
- summary.totalPoints = allPoints.length;
|
|
|
-
|
|
|
- if (selectedNetwork.value.networkId) {
|
|
|
- const refreshed = allNetworks.find((item) => item.networkId === selectedNetwork.value.networkId);
|
|
|
- if (refreshed) {
|
|
|
- selectedNetwork.value = refreshed;
|
|
|
+ return Promise.all([listPipeNetworkAll(), listMonitorPointAll()]).then(
|
|
|
+ ([networkRes, pointRes]) => {
|
|
|
+ const allNetworks = networkRes.data || [];
|
|
|
+ const allPoints = pointRes.data || [];
|
|
|
+ summary.totalNetworks = allNetworks.length;
|
|
|
+ summary.activeNetworks = allNetworks.filter(
|
|
|
+ (item) => item.status === "0",
|
|
|
+ ).length;
|
|
|
+ summary.typeCount = new Set(
|
|
|
+ allNetworks.map((item) => item.networkType).filter(Boolean),
|
|
|
+ ).size;
|
|
|
+ summary.totalPoints = allPoints.length;
|
|
|
+
|
|
|
+ if (selectedNetwork.value.networkId) {
|
|
|
+ const refreshed = allNetworks.find(
|
|
|
+ (item) => item.networkId === selectedNetwork.value.networkId,
|
|
|
+ );
|
|
|
+ if (refreshed) {
|
|
|
+ selectedNetwork.value = refreshed;
|
|
|
+ }
|
|
|
+ } else if (allNetworks.length) {
|
|
|
+ selectedNetwork.value = allNetworks[0];
|
|
|
}
|
|
|
- } else if (allNetworks.length) {
|
|
|
- selectedNetwork.value = allNetworks[0];
|
|
|
- }
|
|
|
- });
|
|
|
+ },
|
|
|
+ );
|
|
|
}
|
|
|
|
|
|
function getList() {
|
|
|
@@ -525,7 +759,9 @@ function submitForm() {
|
|
|
if (!valid) {
|
|
|
return;
|
|
|
}
|
|
|
- const request = form.value.networkId ? updatePipeNetwork(form.value) : addPipeNetwork(form.value);
|
|
|
+ const request = form.value.networkId
|
|
|
+ ? updatePipeNetwork(form.value)
|
|
|
+ : addPipeNetwork(form.value);
|
|
|
request.then(() => {
|
|
|
proxy.$modal.msgSuccess(form.value.networkId ? "修改成功" : "新增成功");
|
|
|
open.value = false;
|
|
|
@@ -712,6 +948,10 @@ onMounted(() => {
|
|
|
margin-top: 16px;
|
|
|
}
|
|
|
|
|
|
+.fixed-width .cell {
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
@media (max-width: 1200px) {
|
|
|
.summary-grid {
|
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
