city-life-line/src/views/subSystem/pipeNetwork/pdeviceInform/Pbasicinfo.vue

<!-- 管网基础信息管理 -->
<template>
  <div class="app-container pipe-network-page">
    <div class="summary-grid">
      <el-card shadow="hover" class="summary-card primary">
        <div class="summary-label">设施总数</div>
        <div class="summary-value">{{ summary.totalNetworks }}</div>
        <div class="summary-desc">已纳入平台的管网基础设施</div>
      </el-card>
      <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>
      </el-card>
      <el-card shadow="hover" class="summary-card warning">
        <div class="summary-label">设施类型</div>
        <div class="summary-value">{{ summary.typeCount }}</div>
        <div class="summary-desc">当前已覆盖的设施分类数</div>
      </el-card>
      <el-card shadow="hover" class="summary-card info">
        <div class="summary-label">关联点位</div>
        <div class="summary-value">{{ summary.totalPoints }}</div>
        <div class="summary-desc">关键监控点位总量</div>
      </el-card>
    </div>

    <el-card shadow="never" class="query-card">
      <el-form
        ref="queryRef"
        :model="queryParams"
        :inline="true"
        v-show="showSearch"
      >
        <el-form-item label="设施编码" prop="networkCode">
          <el-input
            v-model="queryParams.networkCode"
            placeholder="请输入设施编码"
            clearable
            style="width: 220px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="设施名称" prop="networkName">
          <el-input
            v-model="queryParams.networkName"
            placeholder="请输入设施名称"
            clearable
            style="width: 220px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="设施类型" prop="networkType">
          <el-select
            v-model="queryParams.networkType"
            placeholder="请选择设施类型"
            clearable
            filterable
            allow-create
            default-first-option
            style="width: 220px"
          >
            <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">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择状态"
            clearable
            filterable
            default-first-option
            style="width: 180px"
          >
            <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 icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-row :gutter="16" class="main-row">
      <el-col :xs="24" :lg="15">
        <el-card shadow="never" class="table-card">
          <template #header>
            <div class="card-header-row">
              <div>
                <div class="card-title">设施台账</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="danger"
                  plain
                  icon="Delete"
                  :disabled="multiple"
                  @click="handleDelete()"
                  >删除</el-button
                >
                <right-toolbar
                  v-model:showSearch="showSearch"
                  @queryTable="getList"
                />
              </div>
            </div>
          </template>

          <el-table
            v-loading="loading"
            :data="networkList"
            highlight-current-row
            @selection-change="handleSelectionChange"
            @current-change="handleCurrentChange"
            @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" 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)">{{
                  getStatusText(scope.row.status)
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="140"
              class-name="small-padding fixed-width"
            >
              <template #default="scope">
                <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>

          <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
          />
        </el-card>
      </el-col>

      <el-col :xs="24" :lg="9">
        <el-card shadow="never" class="detail-card">
          <template #header>
            <div class="card-header-row">
              <div>
                <div class="card-title">设施详情</div>
                <div class="card-subtitle">
                  选中设施后可查看基础信息及下挂监测点位
                </div>
              </div>
              <el-tag
                v-if="selectedNetwork.networkId"
                :type="getStatusTagType(selectedNetwork.status)"
              >
                {{ getStatusText(selectedNetwork.status) }}
              </el-tag>
            </div>
          </template>

          <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>{{
                  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-item label="经纬度">
                {{ selectedNetwork.longitude ?? "-" }} /
                {{ selectedNetwork.latitude ?? "-" }}
              </el-descriptions-item>
              <el-descriptions-item label="长度/管径">
                {{ 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>

            <div class="section-block">
              <div class="section-title">关联监测点位</div>
              <div class="section-tip">
                共 {{ 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-column label="状态" width="90">
                  <template #default="scope">
                    <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>
            </div>
          </template>
        </el-card>
      </el-col>
    </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-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="设施编码" prop="networkCode">
              <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-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设施类型" prop="networkType">
              <el-select
                v-model="form.networkType"
                placeholder="请选择设施类型"
                filterable
                default-first-option
                style="width: 100%"
              >
                <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-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管养单位" prop="managementUnit">
              <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="请选择状态"
                filterable
                default-first-option
                style="width: 100%"
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="位置描述" prop="location">
              <el-input v-model="form.location" placeholder="请输入位置描述" />
            </el-form-item>
          </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-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-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-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-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="材质" prop="material">
              <el-input v-model="form.material" placeholder="请输入材质" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="建设日期" prop="buildDate">
              <el-date-picker
                v-model="form.buildDate"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择建设日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="form.remark"
                type="textarea"
                :rows="3"
                placeholder="请输入备注"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  computed,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
  toRefs,
} from "vue";
import {
  addPipeNetwork,
  delPipeNetwork,
  getPipeNetwork,
  listMonitorPointAll,
  listPipeNetwork,
  listPipeNetworkAll,
  listPointsByNetwork,
  updatePipeNetwork,
} from "@/api/pipeNetwork/pdeviceInform";

const { proxy } = getCurrentInstance();

const networkList = ref([]);
const relatedPoints = ref([]);
const loading = ref(false);
const pointLoading = ref(false);
const open = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const selectedNetwork = ref({});
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,
});

const abnormalPointCount = computed(() => {
  return relatedPoints.value.filter((item) => item.status !== "0").length;
});

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    networkCode: undefined,
    networkName: undefined,
    networkType: undefined,
    status: undefined,
  },
  form: {},
  rules: {
    networkCode: [
      { required: true, message: "设施编码不能为空", trigger: "blur" },
    ],
    networkName: [
      { required: true, message: "设施名称不能为空", trigger: "blur" },
    ],
    networkType: [
      { required: true, message: "设施类型不能为空", trigger: "change" },
    ],
  },
});

const { queryParams, form, rules } = toRefs(data);

function createEmptyForm() {
  return {
    networkId: undefined,
    networkCode: undefined,
    networkName: undefined,
    networkType: undefined,
    networkLevel: undefined,
    managementUnit: undefined,
    location: undefined,
    longitude: undefined,
    latitude: undefined,
    length: undefined,
    diameter: undefined,
    material: undefined,
    buildDate: undefined,
    status: "0",
    remark: undefined,
  };
}

function getStatusTagType(status) {
  if (status === "0") {
    return "success";
  }
  if (status === "1") {
    return "warning";
  }
  if (status === "2") {
    return "danger";
  }
  return "";
}

function loadRelatedPoints(networkId) {
  if (!networkId) {
    relatedPoints.value = [];
    return Promise.resolve();
  }
  pointLoading.value = true;
  return listPointsByNetwork(networkId)
    .then((response) => {
      relatedPoints.value = response.data || [];
    })
    .finally(() => {
      pointLoading.value = false;
    });
}

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) => 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];
      }
    },
  );
}

function getList() {
  loading.value = true;
  return listPipeNetwork(queryParams.value)
    .then((response) => {
      networkList.value = response.records || [];
      total.value = response.total || 0;
      if (!selectedNetwork.value.networkId && networkList.value.length) {
        const firstNetwork = networkList.value[0];
        selectedNetwork.value = firstNetwork;
        return loadRelatedPoints(firstNetwork.networkId);
      }
      return undefined;
    })
    .finally(() => {
      loading.value = false;
    });
}

function reset() {
  form.value = createEmptyForm();
  proxy.resetForm("networkRef");
}

function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.networkId);
  multiple.value = !selection.length;
}

function handleCurrentChange(currentRow) {
  if (!currentRow?.networkId) {
    return;
  }
  // 点击一行会同时触发 row-click 与 current-change，选中项未变化时不再重复加载关联点位
  if (selectedNetwork.value.networkId === currentRow.networkId) {
    return;
  }
  selectedNetwork.value = currentRow;
  loadRelatedPoints(currentRow.networkId);
}

function handleRowClick(row) {
  handleCurrentChange(row);
}

function handleAdd() {
  reset();
  open.value = true;
  title.value = "新增管网基础信息";
}

function handleUpdate(row) {
  reset();
  const networkId = row?.networkId || ids.value[0];
  if (!networkId) {
    return;
  }
  getPipeNetwork(networkId).then((response) => {
    form.value = { ...createEmptyForm(), ...(response.data || {}) };
    open.value = true;
    title.value = "修改管网基础信息";
  });
}

function cancel() {
  open.value = false;
  reset();
}

function submitForm() {
  proxy.$refs.networkRef.validate((valid) => {
    if (!valid) {
      return;
    }
    const request = form.value.networkId
      ? updatePipeNetwork(form.value)
      : addPipeNetwork(form.value);
    request.then(() => {
      proxy.$modal.msgSuccess(form.value.networkId ? "修改成功" : "新增成功");
      open.value = false;
      Promise.all([getList(), loadSummary()]).then(() => {
        if (form.value.networkId) {
          getPipeNetwork(form.value.networkId).then((response) => {
            selectedNetwork.value = response.data || {};
            loadRelatedPoints(selectedNetwork.value.networkId);
          });
        }
      });
    });
  });
}

function handleDelete(row) {
  const deleteIds = row?.networkId ? [row.networkId] : ids.value;
  if (!deleteIds.length) {
    return;
  }
  proxy.$modal
    .confirm(`是否确认删除选中的 ${deleteIds.length} 条管网设施数据？`)
    .then(() => Promise.all(deleteIds.map((id) => delPipeNetwork(id))))
    .then(() => {
      proxy.$modal.msgSuccess("删除成功");
      if (deleteIds.includes(selectedNetwork.value.networkId)) {
        selectedNetwork.value = {};
        relatedPoints.value = [];
      }
      return Promise.all([getList(), loadSummary()]);
    });
}

onMounted(() => {
  reset();
  Promise.all([getList(), loadSummary()]).then(() => {
    if (selectedNetwork.value.networkId) {
      loadRelatedPoints(selectedNetwork.value.networkId);
    }
  });
});
</script>

<style scoped>
.pipe-network-page {
  background: #f5f8fc;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.summary-card {
  border: none;
  color: #fff;
}

.summary-card :deep(.el-card__body) {
  padding: 20px;
}

.summary-card.primary {
  background: linear-gradient(135deg, #2b73ff, #5da2ff);
}

.summary-card.success {
  background: linear-gradient(135deg, #16a34a, #41c878);
}

.summary-card.warning {
  background: linear-gradient(135deg, #f59e0b, #f8bf52);
}

.summary-card.info {
  background: linear-gradient(135deg, #0f766e, #2bb2a6);
}

.summary-label {
  font-size: 14px;
  opacity: 0.9;
}

.summary-value {
  margin: 8px 0 10px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

.summary-desc {
  font-size: 12px;
  opacity: 0.9;
}

.query-card,
.table-card,
.detail-card {
  border-radius: 16px;
}

.query-card {
  margin-bottom: 16px;
}

.main-row {
  align-items: stretch;
}

.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.card-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.detail-hero {
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #eff6ff, #f8fbff);
  border: 1px solid #dbeafe;
}

.hero-title {
  font-size: 18px;
  font-weight: 700;
  color: #1d4ed8;
}

.hero-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 12px;
  color: #4b5563;
}

.detail-descriptions {
  margin-bottom: 16px;
}

.section-block {
  margin-top: 12px;
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
}

.section-tip {
  margin: 6px 0 12px;
  font-size: 12px;
  color: #6b7280;
}

.side-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.fixed-width .cell {
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .summary-grid {
    grid-template-columns: 1fr;
  }

  .card-header-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .side-actions {
    flex-direction: column;
  }
}
</style>