city-life-line/src/views/subSystem/basic/Equipment.vue

<template>
  <div class="equipment-container">
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="设备编码">
          <el-input v-model="searchForm.equipmentCode" placeholder="请输入设备编码" clearable style="width:180px" />
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model="searchForm.equipmentName" placeholder="请输入设备名称" clearable style="width:180px" />
        </el-form-item>
        <el-form-item label="设备型号">
          <el-input v-model="searchForm.equipmentModel" placeholder="请输入设备型号" clearable style="width:160px" />
        </el-form-item>
        <el-form-item label="制造商">
          <el-input v-model="searchForm.manufacturer" placeholder="请输入制造商" clearable style="width:160px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button type="success" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="table-card">
      <el-table :data="tableData" border stripe v-loading="loading" style="width: 100%">
        <el-table-column prop="equipmentCode" label="设备编码" min-width="130" />
        <el-table-column prop="equipmentName" label="设备名称" min-width="160" />
        <el-table-column prop="equipmentModel" label="设备型号" width="110" />
        <el-table-column prop="manufacturer" label="制造商" width="110" />
        <el-table-column prop="networkName" label="所属管线" min-width="150">
          <template #default="{ row }">
            <span v-if="row.networkName">{{ row.networkName }}</span>
            <el-tag v-else type="info" size="small">未关联</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="pointName" label="所属管点" min-width="150">
          <template #default="{ row }">
            <span v-if="row.pointName">{{ row.pointName }}</span>
            <el-tag v-else type="info" size="small">未关联</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="运行状态" width="90">
          <template #default="{ row }">
            <el-tag v-if="row.currentStatus === 1" type="success" size="small">在用</el-tag>
            <el-tag v-else-if="row.currentStatus === 2" type="warning" size="small">闲置</el-tag>
            <el-tag v-else-if="row.currentStatus === 3" type="danger" size="small">维修</el-tag>
            <el-tag v-else-if="row.currentStatus === 4" type="info" size="small">报废</el-tag>
            <el-tag v-else-if="row.currentStatus === 5" type="warning" size="small">待入库</el-tag>
            <el-tag v-else type="info" size="small">未知</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="报警" width="70">
          <template #default="{ row }">
            <el-tag :type="row.alarmStatus === 1 ? 'danger' : 'success'" size="small">
              {{ row.alarmStatus === 1 ? '报警' : '正常' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="在线" width="70">
          <template #default="{ row }">
            <el-tag :type="row.onlineStatus === 1 ? 'success' : 'info'" size="small">
              {{ row.onlineStatus === 1 ? '在线' : '离线' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button type="info" size="small" @click="handleDetail(row)">详情</el-button>
            <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pageNum" v-model:page-size="pageSize" :total="total"
        layout="total, prev, pager, next, sizes" :page-sizes="[10, 20, 50]"
        @change="loadData" style="margin-top: 16px; justify-content: flex-end"
      />
    </el-card>

    <el-dialog title="设备详情" v-model="detailVisible" width="1100px">
      <el-descriptions v-if="detailData" :column="2" border>
        <el-descriptions-item label="设备编码" :span="1">{{ detailData.equipmentCode }}</el-descriptions-item>
        <el-descriptions-item label="设备名称" :span="1">{{ detailData.equipmentName }}</el-descriptions-item>
        <el-descriptions-item label="设备型号">{{ detailData.equipmentModel }}</el-descriptions-item>
        <el-descriptions-item label="规格参数">{{ detailData.equipmentSpec }}</el-descriptions-item>
        <el-descriptions-item label="制造商">{{ detailData.manufacturer }}</el-descriptions-item>
        <el-descriptions-item label="生产日期">{{ detailData.productionDate }}</el-descriptions-item>
        <el-descriptions-item label="所属管线">{{ detailData.networkName || '未关联' }}</el-descriptions-item>
        <el-descriptions-item label="管线等级">{{ detailData.networkLevel || '-' }}</el-descriptions-item>
        <el-descriptions-item label="所属管点">{{ detailData.pointName || '未关联' }}</el-descriptions-item>
        <el-descriptions-item label="管点类型">{{ detailData.pointType || '-' }}</el-descriptions-item>
        <el-descriptions-item label="安装位置">{{ detailData.equipmentLocation }}</el-descriptions-item>
        <el-descriptions-item label="安装时间">{{ detailData.installTime }}</el-descriptions-item>
        <el-descriptions-item label="运行状态">
          <el-tag v-if="detailData.currentStatus === 1" type="success" size="small">在用</el-tag>
          <el-tag v-else-if="detailData.currentStatus === 2" type="warning" size="small">闲置</el-tag>
          <el-tag v-else-if="detailData.currentStatus === 3" type="danger" size="small">维修</el-tag>
          <el-tag v-else-if="detailData.currentStatus === 4" type="info" size="small">报废</el-tag>
          <el-tag v-else-if="detailData.currentStatus === 5" type="warning" size="small">待入库</el-tag>
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="报警状态">
          <el-tag :type="detailData.alarmStatus === 1 ? 'danger' : 'success'" size="small">
            {{ detailData.alarmStatus === 1 ? '报警' : '正常' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="在线状态">
          <el-tag :type="detailData.onlineStatus === 1 ? 'success' : 'info'" size="small">
            {{ detailData.onlineStatus === 1 ? '在线' : '离线' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="维护人员">{{ detailData.maintainer || '-' }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{ detailData.maintainerPhone || '-' }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ detailData.remark || '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="1100px" destroy-on-close>
      <el-form :model="formData" ref="formRef" label-width="110px" size="default">
        <el-row :gutter="28">
          <el-col :span="12">
            <el-form-item label="设备编码" prop="equipmentCode">
              <el-input v-model="formData.equipmentCode" placeholder="请输入设备编码" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称" prop="equipmentName">
              <el-input v-model="formData.equipmentName" placeholder="请输入设备名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="28">
          <el-col :span="12">
            <el-form-item label="设备型号">
              <el-input v-model="formData.equipmentModel" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格参数">
              <el-input v-model="formData.equipmentSpec" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="28">
          <el-col :span="12">
            <el-form-item label="制造商">
              <el-input v-model="formData.manufacturer" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安装位置">
              <el-input v-model="formData.equipmentLocation" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="28">
          <el-col :span="12">
            <el-form-item label="经度">
              <el-input-number v-model="formData.longitude" :precision="10" style="width:100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度">
              <el-input-number v-model="formData.latitude" :precision="10" style="width:100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="28">
          <el-col :span="12">
            <el-form-item label="维护人员">
              <el-input v-model="formData.maintainer" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式">
              <el-input v-model="formData.maintainerPhone" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注">
          <el-input v-model="formData.remark" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getEquipmentFullPage, getEquipmentById, addEquipment, updateEquipment, deleteEquipment } from '@/api/pipeNetwork/basic'

const loading = ref(false)
const tableData = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
const searchForm = reactive({ equipmentCode: '', equipmentName: '', equipmentModel: '', manufacturer: '' })
const dialogVisible = ref(false)
const dialogTitle = ref('新增')
const formRef = ref(null)
const detailVisible = ref(false)
const detailData = ref(null)
const formData = reactive({
  equipmentId: '', equipmentCode: '', equipmentName: '', equipmentModel: '',
  equipmentSpec: '', manufacturer: '', equipmentLocation: '',
  longitude: null, latitude: null, maintainer: '', maintainerPhone: '', remark: ''
})

async function loadData() {
  loading.value = true
  try {
    const res = await getEquipmentFullPage(pageNum.value, pageSize.value, searchForm)
    tableData.value = (res.data && res.data.records) ? res.data.records : []
    total.value = (res.data && res.data.total) ? res.data.total : 0
  } catch (e) { console.error(e) } finally { loading.value = false }
}
function handleSearch() { pageNum.value = 1; loadData() }
function handleReset() {
  Object.assign(searchForm, { equipmentCode: '', equipmentName: '', equipmentModel: '', manufacturer: '' })
  handleSearch()
}
function handleAdd() {
  dialogTitle.value = '新增'
  Object.assign(formData, { equipmentId: '', equipmentCode: '', equipmentName: '', equipmentModel: '', equipmentSpec: '', manufacturer: '', equipmentLocation: '', longitude: null, latitude: null, maintainer: '', maintainerPhone: '', remark: '' })
  dialogVisible.value = true
}
function handleEdit(row) { dialogTitle.value = '编辑'; Object.assign(formData, row); dialogVisible.value = true }
async function handleSave() {
  try {
    if (formData.equipmentId) { await updateEquipment(formData); ElMessage.success('修改成功') }
    else { await addEquipment(formData); ElMessage.success('新增成功') }
    dialogVisible.value = false; loadData()
  } catch (e) { console.error(e) }
}
function handleDelete(row) {
  ElMessageBox.confirm('确认删除该设备信息？', '提示', { type: 'warning' }).then(async () => {
    await deleteEquipment(row.equipmentId); ElMessage.success('删除成功'); loadData()
  }).catch(() => {})
}
async function handleDetail(row) {
  detailData.value = row
  detailVisible.value = true
}

onMounted(() => { loadData() })
</script>

<style scoped>
.equipment-container { padding: 16px; }
.search-card { margin-bottom: 16px; }
.search-form { display: flex; flex-wrap: wrap; }
</style>