|
|
@@ -1,442 +1,1350 @@
|
|
|
<template>
|
|
|
- <div class="water-page device-page">
|
|
|
- <div class="page-heading">
|
|
|
- <div class="page-title">
|
|
|
- <span class="page-title-icon"><el-icon><component :is="pageIcon" /></el-icon></span>
|
|
|
- <div><h2>{{ title }}</h2><span class="muted">{{ subtitle }}</span></div>
|
|
|
- </div>
|
|
|
- <el-button class="heading-refresh" :icon="Refresh" :loading="loading" @click="loadData">刷新</el-button>
|
|
|
- </div>
|
|
|
+ <div class="water-page device-page">
|
|
|
+ <div class="page-heading">
|
|
|
+ <div class="page-title">
|
|
|
+ <span class="page-title-icon"><el-icon><component :is="pageIcon"/></el-icon></span>
|
|
|
+ <div><h2>{{ title }}</h2><span class="muted">{{ subtitle }}</span></div>
|
|
|
+ </div>
|
|
|
+ <el-button class="heading-refresh" :icon="Refresh" :loading="loading" @click="loadData">刷新</el-button>
|
|
|
+ </div>
|
|
|
|
|
|
- <div v-if="view === 'abnormal'" class="metric-grid">
|
|
|
- <div v-for="item in abnormalStats" :key="item.label" class="metric">
|
|
|
- <div class="metric-icon"><el-icon><component :is="item.icon" /></el-icon></div>
|
|
|
- <div class="metric-body">
|
|
|
- <span>{{ item.label }}</span>
|
|
|
- <div class="metric-value"><strong>{{ item.value }}</strong><small>{{ item.unit }}</small></div>
|
|
|
+ <div v-if="view === 'abnormal'" class="metric-grid">
|
|
|
+ <div v-for="item in abnormalStats" :key="item.label" class="metric">
|
|
|
+ <div class="metric-icon">
|
|
|
+ <el-icon>
|
|
|
+ <component :is="item.icon"/>
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ <div class="metric-body">
|
|
|
+ <span>{{ item.label }}</span>
|
|
|
+ <div class="metric-value"><strong>{{ item.value }}</strong><small>{{ item.unit }}</small></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <el-card shadow="never" class="filter-card">
|
|
|
- <el-form :inline="true" :model="query">
|
|
|
- <el-form-item v-if="view !== 'gis'" label="设备名称"><el-input v-model="query.equipmentName" clearable /></el-form-item>
|
|
|
- <el-form-item v-if="view !== 'gis'" label="设备编码"><el-input v-model="query.equipmentCode" clearable /></el-form-item>
|
|
|
- <el-form-item v-if="view === 'ledger'" label="报警状态"><el-select v-model="query.alarmStatus" clearable class="filter-select" style="width:180px"><el-option label="正常" :value="0" /><el-option label="报警" :value="1" /></el-select></el-form-item>
|
|
|
- <el-form-item v-if="view === 'ledger' || view === 'dispatch' || view === 'abnormal'" label="报警等级"><el-select v-model="query.alertLevel" clearable class="filter-select" style="width:180px"><el-option v-for="item in levels" :key="item.value" v-bind="item" /></el-select></el-form-item>
|
|
|
- <el-form-item><el-button type="primary" @click="loadData">查询</el-button><el-button @click="reset">重置</el-button></el-form-item>
|
|
|
- </el-form>
|
|
|
- </el-card>
|
|
|
-
|
|
|
- <el-card shadow="never" class="water-panel">
|
|
|
- <div class="card-title"><span><el-icon><Monitor /></el-icon> {{ title }}清单</span>
|
|
|
- <div class="panel-actions">
|
|
|
- <el-button v-if="view === 'ledger'" type="primary" plain size="small" :icon="Plus" @click="openCreate">新增</el-button>
|
|
|
- <el-button v-if="view === 'ledger'" type="danger" plain size="small" :icon="Delete" :disabled="!selectedDevices.length" @click="removeSelectedDevices">删除</el-button>
|
|
|
- <el-button v-if="view === 'ledger'" type="info" plain size="small" :icon="Upload" @click="openImport">导入</el-button>
|
|
|
- <el-button v-if="view !== 'gis'" type="success" plain size="small" :icon="Download" @click="exportData">导出</el-button>
|
|
|
+ <div v-if="view === 'ledger'" class="metric-grid">
|
|
|
+ <div v-for="item in ledgerStatsCards" :key="item.label" class="metric">
|
|
|
+ <div class="metric-icon">
|
|
|
+ <el-icon>
|
|
|
+ <component :is="item.icon"/>
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ <div class="metric-body">
|
|
|
+ <span>{{ item.label }}</span>
|
|
|
+ <div class="metric-value"><strong>{{ item.value }}</strong><small>{{ item.unit }}</small></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <el-alert v-if="loadError" :title="loadError" type="error" show-icon :closable="false" class="load-error"><el-button size="small" type="danger" plain @click="loadData">重试</el-button></el-alert>
|
|
|
- <el-empty v-if="view === 'gis' && !loading && !loadError && !page.records.length" description="暂无设备 GIS 点位数据" />
|
|
|
- <el-table :data="page.records" border stripe v-loading="loading" row-key="equipmentId" @selection-change="handleDeviceSelectionChange">
|
|
|
- <el-table-column v-if="view === 'ledger'" type="selection" width="48" align="center" /><el-table-column type="index" label="#" width="55" /><el-table-column prop="equipmentCode" label="设备编码" min-width="130" /><el-table-column prop="equipmentName" label="设备名称" min-width="150" /><el-table-column prop="equipmentTypeName" label="设备类型" min-width="120" /><el-table-column prop="equipmentLocation" label="安装位置" min-width="180" show-overflow-tooltip />
|
|
|
- <el-table-column v-if="view === 'ledger'" label="设备图片" width="110" align="center"><template #default="{ row }"><el-image v-if="row.equipmentImage" :src="row.equipmentImage" :preview-src-list="[row.equipmentImage]" preview-teleported hide-on-click-modal fit="cover" class="device-image" /><span v-else class="image-placeholder">暂无图片</span></template></el-table-column>
|
|
|
- <el-table-column v-if="view !== 'maintain'" label="设备状态" width="100"><template #default="{ row }"><el-tag :type="Number(row.currentStatus) === 3 ? 'danger' : 'success'">{{ row.currentStatusText }}</el-tag></template></el-table-column>
|
|
|
- <el-table-column v-if="view !== 'maintain'" label="在线状态" width="100"><template #default="{ row }"><el-tag :type="Number(row.onlineStatus) === 1 ? 'success' : 'info'">{{ row.onlineStatusText }}</el-tag></template></el-table-column>
|
|
|
- <el-table-column v-if="view !== 'maintain'" label="报警状态" width="100"><template #default="{ row }"><el-tag :type="Number(row.alarmStatus) === 1 ? 'danger' : 'success'">{{ row.alarmStatusText }}</el-tag></template></el-table-column>
|
|
|
- <el-table-column v-if="view !== 'maintain'" label="报警等级" width="110"><template #default="{ row }"><el-tag :type="alarmLevelType(row.alertLevel)">{{ row.alarmLevelText }}</el-tag></template></el-table-column>
|
|
|
- <el-table-column v-if="view === 'abnormal' || view === 'dispatch'" label="异常原因" min-width="150" show-overflow-tooltip><template #default="{ row }">{{ row.abnormalReasonText || '-' }}</template></el-table-column>
|
|
|
- <el-table-column label="关联工单" min-width="190" show-overflow-tooltip><template #default="{ row }">{{ view === 'maintain' ? (row.orderNo || '-') : row.relatedOrderNo }}</template></el-table-column>
|
|
|
- <el-table-column label="工单状态" min-width="110"><template #default="{ row }"><el-tag v-if="view !== 'maintain' && row.workOrderStatusText !== '暂无工单'" :type="workOrderStatusType(row.workOrderStatusCode)">{{ row.workOrderStatusText }}</el-tag><span v-else>{{ view === 'maintain' ? (row.status || '暂无') : row.workOrderStatusText }}</span></template></el-table-column>
|
|
|
- <el-table-column v-if="view === 'abnormal' || view === 'dispatch'" label="接单责任人" min-width="110"><template #default="{ row }">{{ view === 'maintain' ? (row.maintainPerson || '-') : (row.relatedWorkOrderPerson || '-') }}</template></el-table-column>
|
|
|
- <el-table-column label="操作" width="210" fixed="right"><template #default="{ row }"><div class="facility-row-actions">
|
|
|
- <el-tooltip content="查看详情" placement="top"><el-button class="facility-row-action is-detail" aria-label="查看详情" size="small" type="primary" plain circle :icon="View" @click="selectPoint(row)" /></el-tooltip>
|
|
|
- <el-tooltip v-if="view === 'ledger'" content="修改信息" placement="top"><el-button class="facility-row-action is-edit" aria-label="修改信息" size="small" type="warning" plain circle :icon="Edit" @click="openEdit(row)" /></el-tooltip>
|
|
|
- <el-tooltip v-if="canDispatch(row)" content="维修派单" placement="top"><el-button class="facility-row-action is-dispatch" aria-label="维修派单" size="small" type="warning" plain circle :icon="Position" @click="openOrder(row)" /></el-tooltip>
|
|
|
- <el-tooltip v-if="view === 'ledger'" content="删除设备" placement="top"><el-button class="facility-row-action is-delete" aria-label="删除设备" size="small" type="danger" plain circle :icon="Delete" @click="removeDevice(row)" /></el-tooltip>
|
|
|
- <el-tooltip v-if="view === 'maintain'" content="删除记录" placement="top"><el-button class="facility-row-action is-delete" aria-label="删除记录" size="small" type="danger" plain circle :icon="Delete" @click="removeRecord(row)" /></el-tooltip>
|
|
|
- </div></template></el-table-column>
|
|
|
- </el-table>
|
|
|
- <el-pagination v-model:current-page="query.pageNum" v-model:page-size="query.pageSize" :total="page.total" layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50]" @change="loadData" />
|
|
|
- </el-card>
|
|
|
-
|
|
|
- <el-drawer v-model="detailVisible" class="detail-drawer device-detail-drawer" title="设备详情" direction="rtl" size="680px" append-to-body>
|
|
|
- <div class="detail-summary"><span class="detail-name">{{ detail.equipmentName || '-' }}</span><el-tag :type="Number(detail.currentStatus) === 3 ? 'danger' : 'success'">{{ detail.currentStatusText || '-' }}</el-tag><el-tag :type="Number(detail.alarmStatus) === 1 ? 'danger' : 'success'">{{ detail.alarmStatusText || '-' }}</el-tag><el-tag v-if="detail.workOrderStatusText && detail.workOrderStatusText !== '暂无工单'" :type="workOrderStatusType(detail.workOrderStatusCode)">{{ detail.workOrderStatusText }}</el-tag></div>
|
|
|
- <div v-if="view === 'ledger'" class="detail-media">
|
|
|
- <div class="detail-media-label">设备图片</div>
|
|
|
- <el-image v-if="detail.equipmentImage" :src="detail.equipmentImage" :preview-src-list="[detail.equipmentImage]" preview-teleported hide-on-click-modal fit="cover" class="detail-image" />
|
|
|
- <div v-else class="detail-image-placeholder">暂无图片</div>
|
|
|
- </div>
|
|
|
- <el-descriptions :column="2" border>
|
|
|
- <el-descriptions-item v-for="item in detailFields" :key="item.label" :label="item.label">{{ item.value }}</el-descriptions-item>
|
|
|
- </el-descriptions>
|
|
|
- <template #footer><el-button @click="detailVisible = false">关闭</el-button></template>
|
|
|
- </el-drawer>
|
|
|
- <el-drawer v-model="editVisible" class="detail-drawer device-edit-drawer" :title="editMode === 'create' ? '新增设备信息' : '修改设备信息'" direction="rtl" size="680px" append-to-body>
|
|
|
- <el-form ref="editFormRef" :model="editForm" label-width="110px" :rules="editRules">
|
|
|
- <el-row :gutter="16">
|
|
|
- <el-col :span="12"><el-form-item label="设备编码" prop="equipmentCode"><el-input v-model="editForm.equipmentCode" :disabled="editMode === 'edit'" maxlength="50" /></el-form-item></el-col>
|
|
|
- <el-col :span="12"><el-form-item label="设备类型" prop="equipmentTypeId"><el-select v-if="editMode === 'create'" v-model="editForm.equipmentTypeId" filterable class="full-input"><el-option v-for="item in waterDeviceTypes" :key="item.id" :label="item.typeName" :value="item.id" /></el-select><el-input v-else v-model="editForm.equipmentTypeName" disabled /></el-form-item></el-col>
|
|
|
- <el-col :span="12"><el-form-item label="设备名称" prop="equipmentName"><el-input v-model="editForm.equipmentName" clearable /></el-form-item></el-col>
|
|
|
- <el-col :span="12"><el-form-item label="设备型号"><el-input v-model="editForm.equipmentModel" clearable /></el-form-item></el-col>
|
|
|
- <el-col :span="12"><el-form-item label="所属片区"><el-select v-model="editForm.district" clearable class="full-input"><el-option label="城南" value="城南" /><el-option label="城北" value="城北" /><el-option label="太常" value="太常" /></el-select></el-form-item></el-col>
|
|
|
- <el-col :span="12"><el-form-item label="制造商"><el-input v-model="editForm.manufacturer" clearable /></el-form-item></el-col>
|
|
|
- <el-col :span="12"><el-form-item label="经度"><el-input-number v-model="editForm.longitude" :precision="8" :controls="false" class="full-input" /></el-form-item></el-col>
|
|
|
- <el-col :span="12"><el-form-item label="纬度"><el-input-number v-model="editForm.latitude" :precision="8" :controls="false" class="full-input" /></el-form-item></el-col>
|
|
|
- <el-col :span="24"><el-form-item label="安装位置"><el-input v-model="editForm.equipmentLocation" clearable /></el-form-item></el-col>
|
|
|
- <el-col :span="12"><el-form-item label="设备负责人"><el-input v-model="editForm.maintainer" clearable /></el-form-item></el-col>
|
|
|
- <el-col :span="12"><el-form-item label="联系方式"><el-input v-model="editForm.maintainerPhone" clearable /></el-form-item></el-col>
|
|
|
- <el-col :span="24"><el-form-item label="权属单位"><el-input v-model="editForm.ownershipUnit" clearable /></el-form-item></el-col>
|
|
|
- <el-col :span="24"><el-form-item label="设备图片"><ImageUpload v-model="editForm.equipmentImage" :limit="1" :file-size="5" /></el-form-item></el-col>
|
|
|
- <el-col :span="24"><el-form-item label="备注"><el-input v-model="editForm.remark" type="textarea" :rows="3" maxlength="500" show-word-limit /></el-form-item></el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- <template #footer><el-button @click="editVisible = false">取消</el-button><el-button type="primary" :loading="editSaving" @click="submitEdit">保存</el-button></template>
|
|
|
- </el-drawer>
|
|
|
- <el-dialog v-model="dispatchVisible" class="dispatch-dialog" title="设备维修派单" width="860px">
|
|
|
- <div class="dispatch-layout">
|
|
|
- <div class="assignee-picker">
|
|
|
- <aside class="assignee-depts">
|
|
|
- <el-input v-model="deptFilterText" clearable placeholder="筛选部门" size="small" />
|
|
|
- <el-tree ref="deptTreeRef" :data="deptTreeData" node-key="deptId" highlight-current :props="{ label: 'deptName', children: 'children' }" :filter-node-method="filterDeptNode" class="assignee-tree" @node-click="handleDeptClick" />
|
|
|
- </aside>
|
|
|
- <section class="assignee-users">
|
|
|
- <div class="assignee-search"><el-input v-model="assigneeKeyword" clearable placeholder="搜索用户名、昵称或手机号" @keyup.enter="searchAssigneeUsers" /><el-button type="primary" :loading="userLoading" @click="searchAssigneeUsers">查询</el-button></div>
|
|
|
- <el-alert v-if="userLoadError" :title="userLoadError" type="error" show-icon :closable="false"><el-button size="small" type="danger" plain @click="retryAssigneeLoading">重试</el-button></el-alert>
|
|
|
- <el-table :data="users" border row-key="userId" highlight-current-row :current-row-key="assigneeDraft?.userId" @row-click="chooseAssignee">
|
|
|
- <el-table-column label="选择" width="58" align="center"><template #default="{ row }"><el-radio :model-value="assigneeDraft?.userId" :label="row.userId" @click.stop="chooseAssignee(row)"> </el-radio></template></el-table-column>
|
|
|
- <el-table-column prop="nickName" label="昵称" min-width="100" />
|
|
|
- <el-table-column prop="userName" label="用户名" min-width="110" />
|
|
|
- <el-table-column prop="deptName" label="部门" min-width="120" show-overflow-tooltip />
|
|
|
- <el-table-column prop="phone" label="手机号" min-width="130" />
|
|
|
- <el-table-column prop="statusText" label="账号状态" width="90" />
|
|
|
+
|
|
|
+ <el-card shadow="never" class="filter-card">
|
|
|
+ <el-form :inline="true" :model="query">
|
|
|
+ <el-form-item v-if="view !== 'gis'" label="设备名称">
|
|
|
+ <el-input v-model="query.equipmentName" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="view !== 'gis'" label="设备编码">
|
|
|
+ <el-input v-model="query.equipmentCode" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="view === 'ledger'" label="报警状态">
|
|
|
+ <el-select v-model="query.alarmStatus" clearable class="filter-select" style="width:180px">
|
|
|
+ <el-option label="正常" :value="0"/>
|
|
|
+ <el-option label="报警" :value="1"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="view === 'ledger' || view === 'dispatch' || view === 'abnormal'" label="报警等级">
|
|
|
+ <el-select v-model="query.alertLevel" clearable class="filter-select" style="width:180px">
|
|
|
+ <el-option v-for="item in levels" :key="item.value" v-bind="item"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="loadData">查询</el-button>
|
|
|
+ <el-button @click="reset">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card shadow="never" class="water-panel">
|
|
|
+ <div class="card-title"><span><el-icon><Monitor/></el-icon> {{ title }}清单</span>
|
|
|
+ <div class="panel-actions">
|
|
|
+ <el-button v-if="view === 'ledger'" type="primary" plain size="small" :icon="Plus"
|
|
|
+ @click="openCreate">新增
|
|
|
+ </el-button>
|
|
|
+ <el-button v-if="view === 'ledger'" type="danger" plain size="small" :icon="Delete"
|
|
|
+ :disabled="!selectedDevices.length" @click="removeSelectedDevices">删除
|
|
|
+ </el-button>
|
|
|
+ <el-button v-if="view === 'ledger'" type="info" plain size="small" :icon="Upload"
|
|
|
+ @click="openImport">导入
|
|
|
+ </el-button>
|
|
|
+ <el-button v-if="view !== 'gis'" type="success" plain size="small" :icon="Download"
|
|
|
+ @click="exportData">导出
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-alert v-if="loadError" :title="loadError" type="error" show-icon :closable="false" class="load-error">
|
|
|
+ <el-button size="small" type="danger" plain @click="loadData">重试</el-button>
|
|
|
+ </el-alert>
|
|
|
+ <el-empty v-if="view === 'gis' && !loading && !loadError && !page.records.length"
|
|
|
+ description="暂无设备 GIS 点位数据"/>
|
|
|
+ <el-table :data="page.records" border stripe v-loading="loading" row-key="equipmentId"
|
|
|
+ @selection-change="handleDeviceSelectionChange">
|
|
|
+ <el-table-column v-if="view === 'ledger'" type="selection" width="48" align="center"/>
|
|
|
+ <el-table-column type="index" label="#" width="55"/>
|
|
|
+ <el-table-column prop="equipmentCode" label="设备编码" min-width="130"/>
|
|
|
+ <el-table-column prop="equipmentName" label="设备名称" min-width="150"/>
|
|
|
+ <el-table-column prop="equipmentTypeName" label="设备类型" min-width="120"/>
|
|
|
+ <el-table-column prop="equipmentLocation" label="安装位置" min-width="180" show-overflow-tooltip/>
|
|
|
+ <el-table-column v-if="view === 'ledger'" label="设备图片" width="110" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-image v-if="row.equipmentImageUrl" :src="row.equipmentImageUrl"
|
|
|
+ :preview-src-list="[row.equipmentImageUrl]" preview-teleported hide-on-click-modal
|
|
|
+ fit="cover" class="device-image"/>
|
|
|
+ <span v-else class="image-placeholder">暂无图片</span></template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column v-if="view !== 'maintain'" label="设备状态" width="100">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag :type="Number(row.currentStatus) === 3 ? 'danger' : 'success'">{{ row.currentStatusText
|
|
|
+ }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column v-if="view !== 'maintain'" label="在线状态" width="100">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag :type="Number(row.onlineStatus) === 1 ? 'success' : 'info'">{{ row.onlineStatusText }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column v-if="view !== 'maintain'" label="报警状态" width="100">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag :type="Number(row.alarmStatus) === 1 ? 'danger' : 'success'">{{ row.alarmStatusText }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column v-if="view !== 'maintain'" label="报警等级" width="110">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag :type="alarmLevelType(row.alertLevel)">{{ row.alarmLevelText }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column v-if="view === 'abnormal' || view === 'dispatch'" label="异常原因" min-width="150"
|
|
|
+ show-overflow-tooltip>
|
|
|
+ <template #default="{ row }">{{ row.abnormalReasonText || '-' }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="关联工单" min-width="190" show-overflow-tooltip>
|
|
|
+ <template #default="{ row }">{{ view === 'maintain' ? (row.orderNo || '-') : row.relatedOrderNo }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="工单状态" min-width="110">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag v-if="view !== 'maintain' && row.workOrderStatusText !== '暂无工单'"
|
|
|
+ :type="workOrderStatusType(row.workOrderStatusCode)">{{ row.workOrderStatusText }}
|
|
|
+ </el-tag>
|
|
|
+ <span v-else>{{ view === 'maintain' ? (row.status || '暂无') : row.workOrderStatusText }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column v-if="view === 'abnormal' || view === 'dispatch'" label="接单责任人" min-width="110">
|
|
|
+ <template #default="{ row }">{{ view === 'maintain' ? (row.maintainPerson || '-') :
|
|
|
+ (row.relatedWorkOrderPerson || '-') }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="210" fixed="right">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <div class="facility-row-actions">
|
|
|
+ <el-tooltip content="查看详情" placement="top">
|
|
|
+ <el-button class="facility-row-action is-detail" aria-label="查看详情" size="small"
|
|
|
+ type="primary" plain circle :icon="View" @click="selectPoint(row)"/>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip v-if="view === 'ledger'" content="修改信息" placement="top">
|
|
|
+ <el-button class="facility-row-action is-edit" aria-label="修改信息" size="small"
|
|
|
+ type="warning" plain circle :icon="Edit" @click="openEdit(row)"/>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip v-if="canDispatch(row)" content="维修派单" placement="top">
|
|
|
+ <el-button class="facility-row-action is-dispatch" aria-label="维修派单" size="small"
|
|
|
+ type="warning" plain circle :icon="Position" @click="openOrder(row)"/>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip v-if="view === 'ledger'" content="删除设备" placement="top">
|
|
|
+ <el-button class="facility-row-action is-delete" aria-label="删除设备" size="small"
|
|
|
+ type="danger" plain circle :icon="Delete" @click="removeDevice(row)"/>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip v-if="view === 'maintain'" content="删除记录" placement="top">
|
|
|
+ <el-button class="facility-row-action is-delete" aria-label="删除记录" size="small"
|
|
|
+ type="danger" plain circle :icon="Delete" @click="removeRecord(row)"/>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
</el-table>
|
|
|
- <el-empty v-if="!userLoading && !userLoadError && !users.length" description="暂无符合条件的责任人" :image-size="80" />
|
|
|
- <el-pagination v-model:current-page="assigneePageNum" v-model:page-size="assigneePageSize" :total="assigneeTotal" layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50]" @current-change="loadAssigneeUsers" @size-change="handleAssigneeSizeChange" />
|
|
|
- <div class="assignee-picked">已选责任人：<strong v-if="assigneeDraft">{{ assigneeDraft.nickName || assigneeDraft.userName }}</strong><span v-else>未选择</span><el-button size="small" type="primary" plain :disabled="!assigneeDraft" @click="confirmAssignee">确认选择</el-button></div>
|
|
|
- </section>
|
|
|
- </div>
|
|
|
- <el-form class="dispatch-form" :model="dispatchForm" label-width="100px">
|
|
|
- <el-form-item label="设备"><span>{{ dispatchDevice.equipmentName }}（{{ dispatchDevice.equipmentCode }}）</span></el-form-item>
|
|
|
- <el-form-item label="工单类型"><span>1-故障维修</span></el-form-item>
|
|
|
- <el-form-item label="优先级" required><el-select v-model="dispatchForm.orderLevel" placeholder="请选择优先级"><el-option label="紧急" :value="1" /><el-option label="一般" :value="2" /><el-option label="低" :value="3" /></el-select></el-form-item>
|
|
|
- <el-form-item label="问题描述" required><el-input v-model="dispatchForm.description" type="textarea" :rows="5" maxlength="500" show-word-limit placeholder="请输入故障或异常描述" /></el-form-item>
|
|
|
- <el-form-item label="接单责任人" required>
|
|
|
- <span v-if="selectedAssignee" class="assignee-summary">{{ selectedAssignee.nickName || selectedAssignee.userName }}（{{ selectedAssignee.deptName || '-' }}）</span>
|
|
|
- <span v-else class="assignee-placeholder">请在左侧选择责任人</span>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <template #footer><el-button @click="dispatchVisible = false">取消</el-button><el-button type="primary" :loading="dispatching" @click="submitDispatch">确认派单</el-button></template>
|
|
|
- </el-dialog>
|
|
|
-
|
|
|
- <el-dialog v-model="importVisible" title="供水设备批量导入" width="520px" append-to-body @closed="resetImport">
|
|
|
- <el-upload ref="importUploadRef" drag :limit="1" accept=".xlsx,.xls" :auto-upload="false" :file-list="importFileList" :on-change="handleImportChange" :on-remove="handleImportRemove" :disabled="importUploading">
|
|
|
- <el-icon class="el-icon--upload"><Upload /></el-icon>
|
|
|
- <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|
|
- <template #tip><div class="el-upload__tip import-tip">仅支持 xls、xlsx；设备类型必须属于供水类型树。</div></template>
|
|
|
- </el-upload>
|
|
|
- <el-checkbox v-model="importUpdateSupport" class="import-update">更新已存在的设备编码</el-checkbox>
|
|
|
- <template #footer>
|
|
|
- <el-button type="primary" :loading="importUploading" @click="submitImport">开始导入</el-button>
|
|
|
- <el-button @click="importVisible = false">取消</el-button>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
+ <el-pagination v-model:current-page="query.pageNum" v-model:page-size="query.pageSize" :total="page.total"
|
|
|
+ layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50]" @change="loadData"/>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-drawer v-model="detailVisible" class="detail-drawer device-detail-drawer" title="设备详情" direction="rtl"
|
|
|
+ size="680px" append-to-body>
|
|
|
+ <div class="detail-summary"><span class="detail-name">{{ detail.equipmentName || '-' }}</span>
|
|
|
+ <el-tag :type="Number(detail.currentStatus) === 3 ? 'danger' : 'success'">{{ detail.currentStatusText ||
|
|
|
+ '-' }}
|
|
|
+ </el-tag>
|
|
|
+ <el-tag :type="Number(detail.alarmStatus) === 1 ? 'danger' : 'success'">{{ detail.alarmStatusText || '-'
|
|
|
+ }}
|
|
|
+ </el-tag>
|
|
|
+ <el-tag v-if="detail.workOrderStatusText && detail.workOrderStatusText !== '暂无工单'"
|
|
|
+ :type="workOrderStatusType(detail.workOrderStatusCode)">{{ detail.workOrderStatusText }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ <div v-if="view === 'ledger'" class="detail-media">
|
|
|
+ <div class="detail-media-label">设备图片</div>
|
|
|
+ <el-image v-if="detail.equipmentImageUrl" :src="detail.equipmentImageUrl"
|
|
|
+ :preview-src-list="[detail.equipmentImageUrl]" preview-teleported hide-on-click-modal fit="cover"
|
|
|
+ class="detail-image"/>
|
|
|
+ <div v-else class="detail-image-placeholder">暂无图片</div>
|
|
|
+ </div>
|
|
|
+ <el-descriptions :column="2" border>
|
|
|
+ <el-descriptions-item v-for="item in detailFields" :key="item.label" :label="item.label">{{ item.value
|
|
|
+ }}
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="detailVisible = false">关闭</el-button>
|
|
|
+ </template>
|
|
|
+ </el-drawer>
|
|
|
+ <el-drawer v-model="editVisible" class="detail-drawer device-edit-drawer"
|
|
|
+ :title="editMode === 'create' ? '新增设备信息' : '修改设备信息'" direction="rtl" size="680px"
|
|
|
+ append-to-body>
|
|
|
+ <el-form ref="editFormRef" :model="editForm" label-width="110px" :rules="editRules">
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="设备编码" prop="equipmentCode">
|
|
|
+ <el-input v-model="editForm.equipmentCode" :disabled="editMode === 'edit'" maxlength="50"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="设备类型" prop="equipmentTypeId">
|
|
|
+ <el-select v-if="editMode === 'create'" v-model="editForm.equipmentTypeId" filterable
|
|
|
+ class="full-input">
|
|
|
+ <el-option v-for="item in waterDeviceTypes" :key="item.id" :label="item.typeName"
|
|
|
+ :value="item.id"/>
|
|
|
+ </el-select>
|
|
|
+ <el-input v-else v-model="editForm.equipmentTypeName" disabled/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="设备名称" prop="equipmentName">
|
|
|
+ <el-input v-model="editForm.equipmentName" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="设备型号">
|
|
|
+ <el-input v-model="editForm.equipmentModel" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="所属片区">
|
|
|
+ <el-select v-model="editForm.district" clearable class="full-input">
|
|
|
+ <el-option label="城南" value="城南"/>
|
|
|
+ <el-option label="城北" value="城北"/>
|
|
|
+ <el-option label="太常" value="太常"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="制造商">
|
|
|
+ <el-input v-model="editForm.manufacturer" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="经度">
|
|
|
+ <el-input-number v-model="editForm.longitude" :precision="8" :controls="false"
|
|
|
+ class="full-input"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="纬度">
|
|
|
+ <el-input-number v-model="editForm.latitude" :precision="8" :controls="false"
|
|
|
+ class="full-input"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="安装位置">
|
|
|
+ <el-input v-model="editForm.equipmentLocation" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="设备负责人">
|
|
|
+ <el-input v-model="editForm.maintainer" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="联系方式">
|
|
|
+ <el-input v-model="editForm.maintainerPhone" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="权属单位">
|
|
|
+ <el-input v-model="editForm.ownershipUnit" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="设备图片">
|
|
|
+ <ImageUpload v-model="editForm.equipmentImage" :limit="1" :file-size="5"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="备注">
|
|
|
+ <el-input v-model="editForm.remark" type="textarea" :rows="3" maxlength="500"
|
|
|
+ show-word-limit/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="editVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" :loading="editSaving" @click="submitEdit">保存</el-button>
|
|
|
+ </template>
|
|
|
+ </el-drawer>
|
|
|
+ <el-dialog v-model="dispatchVisible" class="dispatch-dialog" title="设备维修派单" width="860px">
|
|
|
+ <div class="dispatch-layout">
|
|
|
+ <div class="assignee-picker">
|
|
|
+ <aside class="assignee-depts">
|
|
|
+ <el-input v-model="deptFilterText" clearable placeholder="筛选部门" size="small"/>
|
|
|
+ <el-tree ref="deptTreeRef" :data="deptTreeData" node-key="deptId" highlight-current
|
|
|
+ :props="{ label: 'deptName', children: 'children' }"
|
|
|
+ :filter-node-method="filterDeptNode" class="assignee-tree"
|
|
|
+ @node-click="handleDeptClick"/>
|
|
|
+ </aside>
|
|
|
+ <section class="assignee-users">
|
|
|
+ <div class="assignee-search">
|
|
|
+ <el-input v-model="assigneeKeyword" clearable placeholder="搜索用户名、昵称或手机号"
|
|
|
+ @keyup.enter="searchAssigneeUsers"/>
|
|
|
+ <el-button type="primary" :loading="userLoading" @click="searchAssigneeUsers">查询
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <el-alert v-if="userLoadError" :title="userLoadError" type="error" show-icon :closable="false">
|
|
|
+ <el-button size="small" type="danger" plain @click="retryAssigneeLoading">重试</el-button>
|
|
|
+ </el-alert>
|
|
|
+ <el-table :data="users" border row-key="userId" highlight-current-row
|
|
|
+ :current-row-key="assigneeDraft?.userId" @row-click="chooseAssignee">
|
|
|
+ <el-table-column label="选择" width="58" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-radio :model-value="assigneeDraft?.userId" :label="row.userId"
|
|
|
+ @click.stop="chooseAssignee(row)">
|
|
|
+ </el-radio>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="nickName" label="昵称" min-width="100"/>
|
|
|
+ <el-table-column prop="userName" label="用户名" min-width="110"/>
|
|
|
+ <el-table-column prop="deptName" label="部门" min-width="120" show-overflow-tooltip/>
|
|
|
+ <el-table-column prop="phone" label="手机号" min-width="130"/>
|
|
|
+ <el-table-column prop="statusText" label="账号状态" width="90"/>
|
|
|
+ </el-table>
|
|
|
+ <el-empty v-if="!userLoading && !userLoadError && !users.length"
|
|
|
+ description="暂无符合条件的责任人" :image-size="80"/>
|
|
|
+ <el-pagination v-model:current-page="assigneePageNum" v-model:page-size="assigneePageSize"
|
|
|
+ :total="assigneeTotal" layout="total, sizes, prev, pager, next"
|
|
|
+ :page-sizes="[10, 20, 50]" @current-change="loadAssigneeUsers"
|
|
|
+ @size-change="handleAssigneeSizeChange"/>
|
|
|
+ <div class="assignee-picked">已选责任人：<strong v-if="assigneeDraft">{{ assigneeDraft.nickName
|
|
|
+ || assigneeDraft.userName }}</strong><span v-else>未选择</span>
|
|
|
+ <el-button size="small" type="primary" plain :disabled="!assigneeDraft"
|
|
|
+ @click="confirmAssignee">确认选择
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ <el-form class="dispatch-form" :model="dispatchForm" label-width="100px">
|
|
|
+ <el-form-item label="设备"><span>{{ dispatchDevice.equipmentName }}（{{ dispatchDevice.equipmentCode }}）</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="工单类型"><span>1-故障维修</span></el-form-item>
|
|
|
+ <el-form-item label="优先级" required>
|
|
|
+ <el-select v-model="dispatchForm.orderLevel" placeholder="请选择优先级">
|
|
|
+ <el-option label="紧急" :value="1"/>
|
|
|
+ <el-option label="一般" :value="2"/>
|
|
|
+ <el-option label="低" :value="3"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="问题描述" required>
|
|
|
+ <el-input v-model="dispatchForm.description" type="textarea" :rows="5" maxlength="500"
|
|
|
+ show-word-limit placeholder="请输入故障或异常描述"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="接单责任人" required>
|
|
|
+ <span v-if="selectedAssignee" class="assignee-summary">{{ selectedAssignee.nickName || selectedAssignee.userName }}（{{ selectedAssignee.deptName || '-' }}）</span>
|
|
|
+ <span v-else class="assignee-placeholder">请在左侧选择责任人</span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="dispatchVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" :loading="dispatching" @click="submitDispatch">确认派单</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-dialog v-model="importVisible" title="供水设备批量导入" width="520px" append-to-body @closed="resetImport">
|
|
|
+ <el-upload ref="importUploadRef" drag :limit="1" accept=".xlsx,.xls" :auto-upload="false"
|
|
|
+ :file-list="importFileList" :on-change="handleImportChange" :on-remove="handleImportRemove"
|
|
|
+ :disabled="importUploading">
|
|
|
+ <el-icon class="el-icon--upload">
|
|
|
+ <Upload/>
|
|
|
+ </el-icon>
|
|
|
+ <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|
|
+ <template #tip>
|
|
|
+ <div class="el-upload__tip import-tip">仅支持 xls、xlsx；设备类型必须属于供水类型树。</div>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ <el-checkbox v-model="importUpdateSupport" class="import-update">更新已存在的设备编码</el-checkbox>
|
|
|
+ <template #footer>
|
|
|
+ <el-button type="primary" :loading="importUploading" @click="submitImport">开始导入</el-button>
|
|
|
+ <el-button @click="importVisible = false">取消</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { computed, onMounted, ref, watch } from 'vue'
|
|
|
-import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
-import { Monitor, Refresh, Warning, Bell, Tools, DataLine, Upload, Download, Search, Plus, Delete, View, Edit, Position } from '@element-plus/icons-vue'
|
|
|
-import { listUser } from '@/api/system/user'
|
|
|
-import { listDept } from '@/api/system/dept'
|
|
|
-import { handleTree } from '@/utils/ruoyi'
|
|
|
-import { createAbnormalOrder, createWaterDevice, deleteWaterDevices, exportAbnormalDevices, exportDeviceLedger, getWaterDeviceById, importDeviceLedger, listAbnormalDevices, listDeviceLedger, listDeviceGisPoints, listMaintainRecords, updateWaterDevice, deleteMaintainRecord } from '@/api/pipeNetwork/waterSupply'
|
|
|
-import { listEquipmentTypeAll } from '@/api/pipeNetwork/pdeviceInform'
|
|
|
-import { normalizePage, readMonitoringExportError } from '@/utils/waterSupplyModel'
|
|
|
-import { buildMaintainOrderPayload, normalizeDeviceRow, canDispatchDevice, normalizeDeviceGisPoints, preserveDevicePageOnError, normalizeAssigneeUser, buildAssigneeQuery, selectSingleAssignee, normalizeDispatchOrderResponse } from '@/utils/waterSupplyUiModel'
|
|
|
-import { saveAs } from 'file-saver'
|
|
|
-
|
|
|
-const props = defineProps({ title: { type: String, required: true }, subtitle: { type: String, default: '设备信息、运行状态与维护过程管理' }, view: { type: String, default: 'ledger' } })
|
|
|
-const { title, subtitle, view } = props
|
|
|
-const query = ref({ pageNum: 1, pageSize: 10, equipmentName: '', equipmentCode: '', alarmStatus: undefined, alertLevel: undefined })
|
|
|
-const importVisible = ref(false); const importUploading = ref(false); const importUpdateSupport = ref(false); const importFileList = ref([]); const importUploadRef = ref(null); const editVisible = ref(false); const editSaving = ref(false); const editFormRef = ref(null); const editForm = ref({})
|
|
|
-const editMode = ref('edit'); const selectedDevices = ref([]); const waterDeviceTypes = ref([])
|
|
|
-const editRules = {
|
|
|
- equipmentCode: [{ required: true, message: '请输入设备编码', trigger: 'blur' }],
|
|
|
- equipmentTypeId: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
|
|
|
- equipmentName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }]
|
|
|
-}
|
|
|
-const page = ref({ records: [], total: 0 }); const loading = ref(false); const loadError = ref(''); const detailVisible = ref(false); const detail = ref({}); const dispatchVisible = ref(false); const dispatching = ref(false); const dispatchDevice = ref({}); const dispatchForm = ref({ description: '', receiveUserId: undefined }); const users = ref([]); const userLoading = ref(false); const userLoadError = ref(''); const deptLoadError = ref(''); const selectedAssignee = ref(null); const assigneeDraft = ref(null); const deptTreeRef = ref(null); const deptTreeData = ref([]); const deptFilterText = ref(''); const assigneeKeyword = ref(''); const assigneeDeptId = ref(undefined); const assigneePageNum = ref(1); const assigneePageSize = ref(10); const assigneeTotal = ref(0)
|
|
|
-const levels = [{ label: '一级报警', value: 1 }, { label: '二级报警', value: 2 }, { label: '三级报警', value: 3 }, { label: '四级报警', value: 4 }]; const pageIcon = Monitor; const alarmLevelType = level => ({ 1: 'danger', 2: 'warning', 3: 'primary', 4: 'success' }[Number(level)] || 'info')
|
|
|
-function canDispatch(row) {
|
|
|
- if (view !== 'dispatch' && view !== 'abnormal') return false
|
|
|
- return canDispatchDevice(row)
|
|
|
-}
|
|
|
-function workOrderStatusType(code) { return ({ 1: 'info', 2: 'warning', 3: 'primary', 4: 'warning', 5: 'danger', 6: 'success', 7: 'info', 8: 'warning', 9: 'warning' })[Number(code)] || 'info' }
|
|
|
-const abnormalStats = computed(() => {
|
|
|
- const rows = page.value.records
|
|
|
- const alarmCount = rows.filter(row => Number(row.alarmStatus) === 1).length
|
|
|
- const repairCount = rows.filter(row => Number(row.currentStatus) === 3).length
|
|
|
- const pendingCount = rows.filter(row => row.workOrderStatusCode && !row.workOrderTerminal).length
|
|
|
- return [
|
|
|
- { label: '异常设备', value: page.value.total, unit: '台', icon: Warning },
|
|
|
- { label: '报警中', value: alarmCount, unit: '台', icon: Bell },
|
|
|
- { label: '维修中', value: repairCount, unit: '台', icon: Tools },
|
|
|
- { label: '待闭环', value: pendingCount, unit: '条', icon: DataLine }
|
|
|
- ]
|
|
|
-})
|
|
|
-const detailFields = computed(() => [['设备编码', detail.value.equipmentCode], ['设备类型', detail.value.equipmentTypeName || detail.value.typeName], ['安装位置', detail.value.equipmentLocation], ['设备状态', detail.value.currentStatusText], ['在线状态', detail.value.onlineStatusText], ['报警状态', detail.value.alarmStatusText], ['报警等级', detail.value.alarmLevelText], ['异常原因', detail.value.abnormalReasonText], ['关联工单', detail.value.relatedOrderNo || detail.value.orderNo], ['工单状态', detail.value.workOrderStatusText || detail.value.status], ['接单责任人', detail.value.relatedWorkOrderPerson || detail.value.maintainPerson], ['状态更新时间', detail.value.statusUpdateTime]].map(([label, value]) => ({ label, value: value ?? '-' })))
|
|
|
-
|
|
|
-async function loadData() { loading.value = true; loadError.value = ''; try { if (view === 'gis') { const response = await listDeviceGisPoints({ ...query.value }); const records = normalizeDeviceGisPoints(response).map(normalizeDeviceRow); page.value = { records, total: records.length, current: 1, size: records.length || 10 }; return } let response; if (view === 'maintain') response = await listMaintainRecords({ ...query.value }); else if (view === 'dispatch' || view === 'abnormal') response = await listAbnormalDevices({ ...query.value, ...(view === 'dispatch' ? { dispatchableOnly: true } : {}) }); else response = await listDeviceLedger({ ...query.value }); const normalized = normalizePage(response); page.value = { ...normalized, records: normalized.records.map(normalizeDeviceRow) } } catch (error) { const retained = preserveDevicePageOnError(page.value); page.value = retained.page; loadError.value = retained.error; console.warn(`[${title}] 数据加载失败`, error) } finally { loading.value = false } }
|
|
|
-function reset() { query.value = { pageNum: 1, pageSize: 10, equipmentName: '', equipmentCode: '', alarmStatus: undefined, alertLevel: undefined }; loadData() }
|
|
|
-function selectPoint(row) { detail.value = normalizeDeviceRow(row); detailVisible.value = true }
|
|
|
-watch(deptFilterText, value => deptTreeRef.value?.filter(value))
|
|
|
-function filterDeptNode(value, data) { return !value || String(data.deptName || '').includes(value) }
|
|
|
-async function loadDeptTree(force = false) { if (!force && deptTreeData.value.length) return true; deptLoadError.value = ''; try { const response = await listDept(); deptTreeData.value = handleTree(response.data || [], 'deptId'); return true } catch (error) { deptLoadError.value = '部门列表加载失败，请点击重试'; userLoadError.value = deptLoadError.value; return false } }
|
|
|
-async function loadAssigneeUsers() { userLoading.value = true; userLoadError.value = ''; try { const response = await listUser(buildAssigneeQuery({ deptId: assigneeDeptId.value, keyword: assigneeKeyword.value, pageNum: assigneePageNum.value, pageSize: assigneePageSize.value })); const rows = response.rows || response.data?.rows || []; users.value = rows.map(normalizeAssigneeUser).filter(user => user.eligible); assigneeTotal.value = Number(response.total ?? response.data?.total ?? users.value.length) || 0 } catch (error) { userLoadError.value = '责任人列表加载失败，请点击重试' } finally { userLoading.value = false } }
|
|
|
-function searchAssigneeUsers() { assigneePageNum.value = 1; loadAssigneeUsers() }
|
|
|
-function handleAssigneeSizeChange() { assigneePageNum.value = 1; loadAssigneeUsers() }
|
|
|
-async function retryAssigneeLoading() { const deptLoaded = await loadDeptTree(true); if (!deptLoaded) return; await loadAssigneeUsers() }
|
|
|
-async function openOrder(row) {
|
|
|
- dispatchDevice.value = row
|
|
|
- dispatchForm.value = { description: row.abnormalReason || row.abnormalReasonText || row.description || '', orderLevel: 2, receiveUserId: undefined }
|
|
|
- selectedAssignee.value = null
|
|
|
- assigneeDraft.value = null
|
|
|
- assigneeDeptId.value = undefined
|
|
|
- assigneeKeyword.value = ''
|
|
|
- assigneePageNum.value = 1
|
|
|
- dispatchVisible.value = true
|
|
|
- await retryAssigneeLoading()
|
|
|
-}
|
|
|
-function handleDeptClick(node) { assigneeDeptId.value = node.deptId; assigneePageNum.value = 1; loadAssigneeUsers() }
|
|
|
-function chooseAssignee(row) { assigneeDraft.value = selectSingleAssignee([row]) }
|
|
|
-function confirmAssignee() { selectedAssignee.value = assigneeDraft.value; dispatchForm.value.receiveUserId = assigneeDraft.value?.userId }
|
|
|
-async function submitDispatch() {
|
|
|
- if (!dispatchForm.value.description?.trim()) return ElMessage.warning('请填写问题描述')
|
|
|
- if (!dispatchForm.value.receiveUserId) return ElMessage.warning('请选择接单责任人')
|
|
|
- dispatching.value = true
|
|
|
- try {
|
|
|
- const response = await createAbnormalOrder(buildMaintainOrderPayload(dispatchDevice.value, dispatchForm.value))
|
|
|
- const summary = normalizeDispatchOrderResponse(response)
|
|
|
- if (!summary) throw new Error('派单失败：服务端未返回有效的待接单工单')
|
|
|
- ElMessage.success(`已派单，等待接单（${summary.orderNo}）`)
|
|
|
- dispatchVisible.value = false
|
|
|
- await loadData()
|
|
|
- } catch (error) {
|
|
|
- const responseData = error?.response?.data
|
|
|
- const message = responseData?.msg || responseData?.message || error?.message || '派单失败，请检查权限或服务状态'
|
|
|
- // A conflict means another order now owns the device; refresh the list so its order number is visible.
|
|
|
- if (/已有|冲突|重复|处理中的工单|关联工单/.test(String(message))) {
|
|
|
- await loadData()
|
|
|
- ElMessage.warning(`该设备已有相关处置工单：${message}`)
|
|
|
- } else {
|
|
|
- ElMessage.error(message)
|
|
|
- }
|
|
|
- } finally {
|
|
|
- dispatching.value = false
|
|
|
- }
|
|
|
-}
|
|
|
-async function removeRecord(row) { try { await deleteMaintainRecord(row.maintainId || row.id); ElMessage.success('记录已删除'); await loadData() } catch (error) { ElMessage.error('删除失败') } }
|
|
|
-function emptyDeviceForm() {
|
|
|
- return {
|
|
|
- equipmentId: undefined, equipmentCode: '', equipmentTypeId: undefined, equipmentTypeName: '',
|
|
|
- equipmentName: '', equipmentModel: '', district: '', manufacturer: '', longitude: undefined,
|
|
|
- latitude: undefined, equipmentLocation: '', maintainer: '', maintainerPhone: '', ownershipUnit: '',
|
|
|
- equipmentImage: '', remark: ''
|
|
|
- }
|
|
|
-}
|
|
|
-function isWaterDeviceType(type, typesById) {
|
|
|
- if (!type || (type.typeName === '供水' && type.parentTypeId === '0')) return false
|
|
|
- let cursor = type
|
|
|
- let guard = 0
|
|
|
- while (cursor && guard++ <= typesById.size) {
|
|
|
- if (cursor.typeName === '供水' && cursor.parentTypeId === '0') return true
|
|
|
- cursor = typesById.get(cursor.parentTypeId)
|
|
|
- }
|
|
|
- return false
|
|
|
-}
|
|
|
-async function loadWaterTypes() {
|
|
|
- if (waterDeviceTypes.value.length) return
|
|
|
- try {
|
|
|
- const response = await listEquipmentTypeAll()
|
|
|
- const rows = response?.data || []
|
|
|
- const typesById = new Map(rows.map(item => [item.id, item]))
|
|
|
- waterDeviceTypes.value = rows.filter(item => isWaterDeviceType(item, typesById))
|
|
|
- .map(({ id, typeName }) => ({ id, typeName }))
|
|
|
- } catch (error) {
|
|
|
- ElMessage.warning('供水设备类型加载失败，请重试')
|
|
|
- }
|
|
|
-}
|
|
|
-async function openCreate() {
|
|
|
- editMode.value = 'create'
|
|
|
- editVisible.value = true
|
|
|
- editSaving.value = false
|
|
|
- editForm.value = emptyDeviceForm()
|
|
|
- await loadWaterTypes()
|
|
|
-}
|
|
|
-function handleDeviceSelectionChange(rows) { selectedDevices.value = rows }
|
|
|
-async function confirmDeleteDevices(ids) {
|
|
|
- await ElMessageBox.confirm(`确定删除选中的 ${ids.length} 台设备吗？删除后不可恢复。`, '删除设备', { type: 'warning' })
|
|
|
- await deleteWaterDevices(ids)
|
|
|
- ElMessage.success('删除成功')
|
|
|
- selectedDevices.value = []
|
|
|
- query.value.pageNum = 1
|
|
|
- await loadData()
|
|
|
-}
|
|
|
-async function removeDevice(row) {
|
|
|
- if (!row?.equipmentId) return
|
|
|
- await confirmDeleteDevices([row.equipmentId])
|
|
|
-}
|
|
|
-async function removeSelectedDevices() {
|
|
|
- const ids = selectedDevices.value.map(row => row.equipmentId).filter(Boolean)
|
|
|
- if (!ids.length) return
|
|
|
- await confirmDeleteDevices(ids)
|
|
|
-}
|
|
|
-async function openEdit(row) {
|
|
|
- editMode.value = 'edit'
|
|
|
- editVisible.value = true
|
|
|
- editSaving.value = false
|
|
|
- editForm.value = { ...row }
|
|
|
- try {
|
|
|
- const response = await getWaterDeviceById(row.equipmentId)
|
|
|
- const full = response?.data || response
|
|
|
- if (full) editForm.value = { ...editForm.value, ...full }
|
|
|
- } catch (error) {
|
|
|
- ElMessage.warning('设备详情加载失败，已使用列表数据填充')
|
|
|
- }
|
|
|
-}
|
|
|
-async function submitEdit() {
|
|
|
- try { await editFormRef.value?.validate() } catch { return }
|
|
|
- editSaving.value = true
|
|
|
- try {
|
|
|
- const creating = editMode.value === 'create'
|
|
|
- if (creating) await createWaterDevice(editForm.value)
|
|
|
- else await updateWaterDevice(editForm.value)
|
|
|
- ElMessage.success(creating ? '新增成功' : '修改成功')
|
|
|
- editVisible.value = false
|
|
|
- if (creating) query.value.pageNum = 1
|
|
|
- await loadData()
|
|
|
- } catch (error) {
|
|
|
- ElMessage.error(error?.response?.data?.msg || error?.message || (editMode.value === 'create' ? '新增失败，请稍后重试' : '修改失败，请稍后重试'))
|
|
|
- } finally {
|
|
|
- editSaving.value = false
|
|
|
- }
|
|
|
-}
|
|
|
-function openImport() { importVisible.value = true }
|
|
|
-function handleImportChange(file, fileList) {
|
|
|
- if (!/\.(xlsx|xls)$/iu.test(file?.name || '')) {
|
|
|
- ElMessage.error('仅支持 xls、xlsx 文件')
|
|
|
- importFileList.value = []
|
|
|
- return false
|
|
|
- }
|
|
|
- importFileList.value = fileList.slice(-1)
|
|
|
-}
|
|
|
-function handleImportRemove(file, fileList) { importFileList.value = fileList }
|
|
|
-function resetImport() {
|
|
|
- importUploading.value = false
|
|
|
- importUpdateSupport.value = false
|
|
|
- importFileList.value = []
|
|
|
- importUploadRef.value?.clearFiles()
|
|
|
-}
|
|
|
-async function submitImport() {
|
|
|
- if (!importFileList.value.length) return ElMessage.warning('请选择 xls 或 xlsx 文件')
|
|
|
- importUploading.value = true
|
|
|
- try {
|
|
|
- const response = await importDeviceLedger(importFileList.value[0].raw, importUpdateSupport.value)
|
|
|
- if (response?.code && response.code !== 200) throw new Error(response.msg || response.message || '导入失败，请检查文件内容')
|
|
|
- ElMessage.success(response?.msg || response?.data || '导入成功')
|
|
|
- importVisible.value = false
|
|
|
- await loadData()
|
|
|
- } catch (error) {
|
|
|
- ElMessage.error(error?.response?.data?.msg || error?.response?.data?.message || error?.message || '导入失败，请稍后重试')
|
|
|
- } finally {
|
|
|
- importUploading.value = false
|
|
|
- }
|
|
|
-}
|
|
|
-async function exportData() {
|
|
|
- try {
|
|
|
- const response = await (view === 'dispatch' || view === 'abnormal' ? exportAbnormalDevices : exportDeviceLedger)({ ...query.value })
|
|
|
- const errorMessage = await readMonitoringExportError(response)
|
|
|
- if (errorMessage) throw new Error(errorMessage)
|
|
|
- const blob = response instanceof Blob ? response : new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
|
|
|
- saveAs(blob, `${title}_${new Date().toISOString().slice(0, 10)}.xlsx`)
|
|
|
- ElMessage.success('导出成功')
|
|
|
- } catch (error) {
|
|
|
- const backendMessage = await readMonitoringExportError(error?.response?.data)
|
|
|
- ElMessage.error(backendMessage || error?.message || '导出失败，请稍后重试')
|
|
|
- }
|
|
|
-}
|
|
|
-onMounted(loadData)
|
|
|
+ import {computed, onMounted, ref, watch} from 'vue'
|
|
|
+ import {ElMessage, ElMessageBox} from 'element-plus'
|
|
|
+ import {Bell, DataLine, Download, Edit, Monitor, Plus, Position, Refresh, Tools, Upload, View, Warning} from '@element-plus/icons-vue'
|
|
|
+ import {listUser} from '@/api/system/user'
|
|
|
+ import {listDept} from '@/api/system/dept'
|
|
|
+ import {handleTree} from '@/utils/ruoyi'
|
|
|
+ import {
|
|
|
+ createAbnormalOrder,
|
|
|
+ createWaterDevice,
|
|
|
+ deleteMaintainRecord,
|
|
|
+ deleteWaterDevices,
|
|
|
+ exportAbnormalDevices,
|
|
|
+ exportDeviceLedger,
|
|
|
+ getDeviceLedgerStatistics,
|
|
|
+ getWaterDeviceById,
|
|
|
+ importDeviceLedger,
|
|
|
+ listAbnormalDevices,
|
|
|
+ listDeviceGisPoints,
|
|
|
+ listDeviceLedger,
|
|
|
+ listMaintainRecords,
|
|
|
+ updateWaterDevice
|
|
|
+ } from '@/api/pipeNetwork/waterSupply'
|
|
|
+ import {listEquipmentTypeAll} from '@/api/pipeNetwork/pdeviceInform'
|
|
|
+ import {normalizePage, readMonitoringExportError} from '@/utils/waterSupplyModel'
|
|
|
+ import {
|
|
|
+ buildAssigneeQuery,
|
|
|
+ buildMaintainOrderPayload,
|
|
|
+ canDispatchDevice,
|
|
|
+ normalizeAssigneeUser,
|
|
|
+ normalizeDeviceGisPoints,
|
|
|
+ normalizeDeviceRow,
|
|
|
+ normalizeDispatchOrderResponse,
|
|
|
+ preserveDevicePageOnError,
|
|
|
+ selectSingleAssignee
|
|
|
+ } from '@/utils/waterSupplyUiModel'
|
|
|
+ import {saveAs} from 'file-saver'
|
|
|
+
|
|
|
+ const props = defineProps({
|
|
|
+ title: {type: String, required: true},
|
|
|
+ subtitle: {type: String, default: '设备信息、运行状态与维护过程管理'},
|
|
|
+ view: {type: String, default: 'ledger'}
|
|
|
+ })
|
|
|
+ const {title, subtitle, view} = props
|
|
|
+ const query = ref({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ equipmentName: '',
|
|
|
+ equipmentCode: '',
|
|
|
+ alarmStatus: undefined,
|
|
|
+ alertLevel: undefined
|
|
|
+ })
|
|
|
+ const importVisible = ref(false);
|
|
|
+ const importUploading = ref(false);
|
|
|
+ const importUpdateSupport = ref(false);
|
|
|
+ const importFileList = ref([]);
|
|
|
+ const importUploadRef = ref(null);
|
|
|
+ const editVisible = ref(false);
|
|
|
+ const editSaving = ref(false);
|
|
|
+ const editFormRef = ref(null);
|
|
|
+ const editForm = ref({})
|
|
|
+ const editMode = ref('edit');
|
|
|
+ const selectedDevices = ref([]);
|
|
|
+ const waterDeviceTypes = ref([])
|
|
|
+ const editRules = {
|
|
|
+ equipmentCode: [{required: true, message: '请输入设备编码', trigger: 'blur'}],
|
|
|
+ equipmentTypeId: [{required: true, message: '请选择设备类型', trigger: 'change'}],
|
|
|
+ equipmentName: [{required: true, message: '请输入设备名称', trigger: 'blur'}]
|
|
|
+ }
|
|
|
+ const page = ref({records: [], total: 0});
|
|
|
+ const ledgerStats = ref({ total: 0, online: 0, offline: 0, onlineRate: 0 });
|
|
|
+ const loading = ref(false);
|
|
|
+ const loadError = ref('');
|
|
|
+ const detailVisible = ref(false);
|
|
|
+ const detail = ref({});
|
|
|
+ const dispatchVisible = ref(false);
|
|
|
+ const dispatching = ref(false);
|
|
|
+ const dispatchDevice = ref({});
|
|
|
+ const dispatchForm = ref({description: '', receiveUserId: undefined});
|
|
|
+ const users = ref([]);
|
|
|
+ const userLoading = ref(false);
|
|
|
+ const userLoadError = ref('');
|
|
|
+ const deptLoadError = ref('');
|
|
|
+ const selectedAssignee = ref(null);
|
|
|
+ const assigneeDraft = ref(null);
|
|
|
+ const deptTreeRef = ref(null);
|
|
|
+ const deptTreeData = ref([]);
|
|
|
+ const deptFilterText = ref('');
|
|
|
+ const assigneeKeyword = ref('');
|
|
|
+ const assigneeDeptId = ref(undefined);
|
|
|
+ const assigneePageNum = ref(1);
|
|
|
+ const assigneePageSize = ref(10);
|
|
|
+ const assigneeTotal = ref(0)
|
|
|
+ const levels = [{label: '一级报警', value: 1}, {label: '二级报警', value: 2}, {
|
|
|
+ label: '三级报警',
|
|
|
+ value: 3
|
|
|
+ }, {label: '四级报警', value: 4}];
|
|
|
+ const pageIcon = Monitor;
|
|
|
+ const alarmLevelType = level => ({1: 'danger', 2: 'warning', 3: 'primary', 4: 'success'}[Number(level)] || 'info')
|
|
|
+
|
|
|
+ function canDispatch(row) {
|
|
|
+ if (view !== 'dispatch' && view !== 'abnormal') return false
|
|
|
+ return canDispatchDevice(row)
|
|
|
+ }
|
|
|
+
|
|
|
+ function workOrderStatusType(code) {
|
|
|
+ return ({
|
|
|
+ 1: 'info',
|
|
|
+ 2: 'warning',
|
|
|
+ 3: 'primary',
|
|
|
+ 4: 'warning',
|
|
|
+ 5: 'danger',
|
|
|
+ 6: 'success',
|
|
|
+ 7: 'info',
|
|
|
+ 8: 'warning',
|
|
|
+ 9: 'warning'
|
|
|
+ })[Number(code)] || 'info'
|
|
|
+ }
|
|
|
+
|
|
|
+ const abnormalStats = computed(() => {
|
|
|
+ const rows = page.value.records
|
|
|
+ const alarmCount = rows.filter(row => Number(row.alarmStatus) === 1).length
|
|
|
+ const repairCount = rows.filter(row => Number(row.currentStatus) === 3).length
|
|
|
+ const pendingCount = rows.filter(row => row.workOrderStatusCode && !row.workOrderTerminal).length
|
|
|
+ return [
|
|
|
+ {label: '异常设备', value: page.value.total, unit: '台', icon: Warning},
|
|
|
+ {label: '报警中', value: alarmCount, unit: '台', icon: Bell},
|
|
|
+ {label: '维修中', value: repairCount, unit: '台', icon: Tools},
|
|
|
+ {label: '待闭环', value: pendingCount, unit: '条', icon: DataLine}
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ const ledgerStatsCards = computed(() => [
|
|
|
+ {label: '设备数量', value: ledgerStats.value.total, unit: '台', icon: Monitor},
|
|
|
+ {label: '在线设备', value: ledgerStats.value.online, unit: '台', icon: DataLine},
|
|
|
+ {label: '离线设备', value: ledgerStats.value.offline, unit: '台', icon: Warning},
|
|
|
+ {label: '在线率', value: ledgerStats.value.onlineRate, unit: '%', icon: Tools}
|
|
|
+ ])
|
|
|
+
|
|
|
+ const detailFields = computed(() => [['设备编码', detail.value.equipmentCode], ['设备类型', detail.value.equipmentTypeName || detail.value.typeName], ['安装位置', detail.value.equipmentLocation], ['设备状态', detail.value.currentStatusText], ['在线状态', detail.value.onlineStatusText], ['报警状态', detail.value.alarmStatusText], ['报警等级', detail.value.alarmLevelText], ['异常原因', detail.value.abnormalReasonText], ['关联工单', detail.value.relatedOrderNo || detail.value.orderNo], ['工单状态', detail.value.workOrderStatusText || detail.value.status], ['接单责任人', detail.value.relatedWorkOrderPerson || detail.value.maintainPerson], ['状态更新时间', detail.value.statusUpdateTime]].map(([label, value]) => ({
|
|
|
+ label,
|
|
|
+ value: value ?? '-'
|
|
|
+ })))
|
|
|
+
|
|
|
+ async function loadData() {
|
|
|
+ loading.value = true;
|
|
|
+ loadError.value = '';
|
|
|
+ try {
|
|
|
+ if (view === 'gis') {
|
|
|
+ const response = await listDeviceGisPoints({...query.value});
|
|
|
+ const records = normalizeDeviceGisPoints(response).map(normalizeDeviceRow);
|
|
|
+ page.value = {records, total: records.length, current: 1, size: records.length || 10};
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let response;
|
|
|
+ if (view === 'maintain') response = await listMaintainRecords({...query.value}); else if (view === 'dispatch' || view === 'abnormal') response = await listAbnormalDevices({...query.value, ...(view === 'dispatch' ? {dispatchableOnly: true} : {})}); else response = await listDeviceLedger({...query.value});
|
|
|
+ const normalized = normalizePage(response);
|
|
|
+ page.value = {...normalized, records: normalized.records.map(normalizeDeviceRow)}
|
|
|
+ if (view === 'ledger') await loadLedgerStats()
|
|
|
+ } catch (error) {
|
|
|
+ const retained = preserveDevicePageOnError(page.value);
|
|
|
+ page.value = retained.page;
|
|
|
+ loadError.value = retained.error;
|
|
|
+ console.warn(`[${title}] 数据加载失败`, error)
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ async function loadLedgerStats() {
|
|
|
+ try {
|
|
|
+ const response = await getDeviceLedgerStatistics()
|
|
|
+ const stats = response?.data ?? response ?? {}
|
|
|
+ ledgerStats.value = {
|
|
|
+ total: Number(stats.total ?? 0) || 0,
|
|
|
+ online: Number(stats.online ?? 0) || 0,
|
|
|
+ offline: Number(stats.offline ?? 0) || 0,
|
|
|
+ onlineRate: Number(stats.onlineRate ?? 0) || 0
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.warn('设备台账统计加载失败', error)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function reset() {
|
|
|
+ query.value = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ equipmentName: '',
|
|
|
+ equipmentCode: '',
|
|
|
+ alarmStatus: undefined,
|
|
|
+ alertLevel: undefined
|
|
|
+ };
|
|
|
+ loadData()
|
|
|
+ }
|
|
|
+
|
|
|
+ function selectPoint(row) {
|
|
|
+ detail.value = normalizeDeviceRow(row);
|
|
|
+ detailVisible.value = true
|
|
|
+ }
|
|
|
+
|
|
|
+ watch(deptFilterText, value => deptTreeRef.value?.filter(value))
|
|
|
+
|
|
|
+ function filterDeptNode(value, data) {
|
|
|
+ return !value || String(data.deptName || '').includes(value)
|
|
|
+ }
|
|
|
+
|
|
|
+ async function loadDeptTree(force = false) {
|
|
|
+ if (!force && deptTreeData.value.length) return true;
|
|
|
+ deptLoadError.value = '';
|
|
|
+ try {
|
|
|
+ const response = await listDept();
|
|
|
+ deptTreeData.value = handleTree(response.data || [], 'deptId');
|
|
|
+ return true
|
|
|
+ } catch (error) {
|
|
|
+ deptLoadError.value = '部门列表加载失败，请点击重试';
|
|
|
+ userLoadError.value = deptLoadError.value;
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ async function loadAssigneeUsers() {
|
|
|
+ userLoading.value = true;
|
|
|
+ userLoadError.value = '';
|
|
|
+ try {
|
|
|
+ const response = await listUser(buildAssigneeQuery({
|
|
|
+ deptId: assigneeDeptId.value,
|
|
|
+ keyword: assigneeKeyword.value,
|
|
|
+ pageNum: assigneePageNum.value,
|
|
|
+ pageSize: assigneePageSize.value
|
|
|
+ }));
|
|
|
+ const rows = response.rows || response.data?.rows || [];
|
|
|
+ users.value = rows.map(normalizeAssigneeUser).filter(user => user.eligible);
|
|
|
+ assigneeTotal.value = Number(response.total ?? response.data?.total ?? users.value.length) || 0
|
|
|
+ } catch (error) {
|
|
|
+ userLoadError.value = '责任人列表加载失败，请点击重试'
|
|
|
+ } finally {
|
|
|
+ userLoading.value = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function searchAssigneeUsers() {
|
|
|
+ assigneePageNum.value = 1;
|
|
|
+ loadAssigneeUsers()
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleAssigneeSizeChange() {
|
|
|
+ assigneePageNum.value = 1;
|
|
|
+ loadAssigneeUsers()
|
|
|
+ }
|
|
|
+
|
|
|
+ async function retryAssigneeLoading() {
|
|
|
+ const deptLoaded = await loadDeptTree(true);
|
|
|
+ if (!deptLoaded) return;
|
|
|
+ await loadAssigneeUsers()
|
|
|
+ }
|
|
|
+
|
|
|
+ async function openOrder(row) {
|
|
|
+ dispatchDevice.value = row
|
|
|
+ dispatchForm.value = {
|
|
|
+ description: row.abnormalReason || row.abnormalReasonText || row.description || '',
|
|
|
+ orderLevel: 2,
|
|
|
+ receiveUserId: undefined
|
|
|
+ }
|
|
|
+ selectedAssignee.value = null
|
|
|
+ assigneeDraft.value = null
|
|
|
+ assigneeDeptId.value = undefined
|
|
|
+ assigneeKeyword.value = ''
|
|
|
+ assigneePageNum.value = 1
|
|
|
+ dispatchVisible.value = true
|
|
|
+ await retryAssigneeLoading()
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleDeptClick(node) {
|
|
|
+ assigneeDeptId.value = node.deptId;
|
|
|
+ assigneePageNum.value = 1;
|
|
|
+ loadAssigneeUsers()
|
|
|
+ }
|
|
|
+
|
|
|
+ function chooseAssignee(row) {
|
|
|
+ assigneeDraft.value = selectSingleAssignee([row])
|
|
|
+ }
|
|
|
+
|
|
|
+ function confirmAssignee() {
|
|
|
+ selectedAssignee.value = assigneeDraft.value;
|
|
|
+ dispatchForm.value.receiveUserId = assigneeDraft.value?.userId
|
|
|
+ }
|
|
|
+
|
|
|
+ async function submitDispatch() {
|
|
|
+ if (!dispatchForm.value.description?.trim()) return ElMessage.warning('请填写问题描述')
|
|
|
+ if (!dispatchForm.value.receiveUserId) return ElMessage.warning('请选择接单责任人')
|
|
|
+ dispatching.value = true
|
|
|
+ try {
|
|
|
+ const response = await createAbnormalOrder(buildMaintainOrderPayload(dispatchDevice.value, dispatchForm.value))
|
|
|
+ const summary = normalizeDispatchOrderResponse(response)
|
|
|
+ if (!summary) throw new Error('派单失败：服务端未返回有效的待接单工单')
|
|
|
+ ElMessage.success(`已派单，等待接单（${summary.orderNo}）`)
|
|
|
+ dispatchVisible.value = false
|
|
|
+ await loadData()
|
|
|
+ } catch (error) {
|
|
|
+ const responseData = error?.response?.data
|
|
|
+ const message = responseData?.msg || responseData?.message || error?.message || '派单失败，请检查权限或服务状态'
|
|
|
+ // A conflict means another order now owns the device; refresh the list so its order number is visible.
|
|
|
+ if (/已有|冲突|重复|处理中的工单|关联工单/.test(String(message))) {
|
|
|
+ await loadData()
|
|
|
+ ElMessage.warning(`该设备已有相关处置工单：${message}`)
|
|
|
+ } else {
|
|
|
+ ElMessage.error(message)
|
|
|
+ }
|
|
|
+ } finally {
|
|
|
+ dispatching.value = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ async function removeRecord(row) {
|
|
|
+ try {
|
|
|
+ await deleteMaintainRecord(row.maintainId || row.id);
|
|
|
+ ElMessage.success('记录已删除');
|
|
|
+ await loadData()
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage.error('删除失败')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function emptyDeviceForm() {
|
|
|
+ return {
|
|
|
+ equipmentId: undefined, equipmentCode: '', equipmentTypeId: undefined, equipmentTypeName: '',
|
|
|
+ equipmentName: '', equipmentModel: '', district: '', manufacturer: '', longitude: undefined,
|
|
|
+ latitude: undefined, equipmentLocation: '', maintainer: '', maintainerPhone: '', ownershipUnit: '',
|
|
|
+ equipmentImage: '', remark: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function isWaterDeviceType(type, typesById) {
|
|
|
+ if (!type || (type.typeName === '供水' && type.parentTypeId === '0')) return false
|
|
|
+ let cursor = type
|
|
|
+ let guard = 0
|
|
|
+ while (cursor && guard++ <= typesById.size) {
|
|
|
+ if (cursor.typeName === '供水' && cursor.parentTypeId === '0') return true
|
|
|
+ cursor = typesById.get(cursor.parentTypeId)
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ async function loadWaterTypes() {
|
|
|
+ if (waterDeviceTypes.value.length) return
|
|
|
+ try {
|
|
|
+ const response = await listEquipmentTypeAll()
|
|
|
+ const rows = response?.data || []
|
|
|
+ const typesById = new Map(rows.map(item => [item.id, item]))
|
|
|
+ waterDeviceTypes.value = rows.filter(item => isWaterDeviceType(item, typesById))
|
|
|
+ .map(({id, typeName}) => ({id, typeName}))
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage.warning('供水设备类型加载失败，请重试')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ async function openCreate() {
|
|
|
+ editMode.value = 'create'
|
|
|
+ editVisible.value = true
|
|
|
+ editSaving.value = false
|
|
|
+ editForm.value = emptyDeviceForm()
|
|
|
+ await loadWaterTypes()
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleDeviceSelectionChange(rows) {
|
|
|
+ selectedDevices.value = rows
|
|
|
+ }
|
|
|
+
|
|
|
+ async function confirmDeleteDevices(ids) {
|
|
|
+ await ElMessageBox.confirm(`确定删除选中的 ${ids.length} 台设备吗？删除后不可恢复。`, '删除设备', {type: 'warning'})
|
|
|
+ await deleteWaterDevices(ids)
|
|
|
+ ElMessage.success('删除成功')
|
|
|
+ selectedDevices.value = []
|
|
|
+ query.value.pageNum = 1
|
|
|
+ await loadData()
|
|
|
+ }
|
|
|
+
|
|
|
+ async function removeDevice(row) {
|
|
|
+ if (!row?.equipmentId) return
|
|
|
+ await confirmDeleteDevices([row.equipmentId])
|
|
|
+ }
|
|
|
+
|
|
|
+ async function removeSelectedDevices() {
|
|
|
+ const ids = selectedDevices.value.map(row => row.equipmentId).filter(Boolean)
|
|
|
+ if (!ids.length) return
|
|
|
+ await confirmDeleteDevices(ids)
|
|
|
+ }
|
|
|
+
|
|
|
+ async function openEdit(row) {
|
|
|
+ editMode.value = 'edit'
|
|
|
+ editVisible.value = true
|
|
|
+ editSaving.value = false
|
|
|
+ editForm.value = {...row}
|
|
|
+ try {
|
|
|
+ const response = await getWaterDeviceById(row.equipmentId)
|
|
|
+ const full = response?.data || response
|
|
|
+ if (full) editForm.value = {...editForm.value, ...full}
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage.warning('设备详情加载失败，已使用列表数据填充')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ async function submitEdit() {
|
|
|
+ try {
|
|
|
+ await editFormRef.value?.validate()
|
|
|
+ } catch {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ editSaving.value = true
|
|
|
+ try {
|
|
|
+ const creating = editMode.value === 'create'
|
|
|
+ if (creating) await createWaterDevice(editForm.value)
|
|
|
+ else await updateWaterDevice(editForm.value)
|
|
|
+ ElMessage.success(creating ? '新增成功' : '修改成功')
|
|
|
+ editVisible.value = false
|
|
|
+ if (creating) query.value.pageNum = 1
|
|
|
+ await loadData()
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage.error(error?.response?.data?.msg || error?.message || (editMode.value === 'create' ? '新增失败，请稍后重试' : '修改失败，请稍后重试'))
|
|
|
+ } finally {
|
|
|
+ editSaving.value = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function openImport() {
|
|
|
+ importVisible.value = true
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleImportChange(file, fileList) {
|
|
|
+ if (!/\.(xlsx|xls)$/iu.test(file?.name || '')) {
|
|
|
+ ElMessage.error('仅支持 xls、xlsx 文件')
|
|
|
+ importFileList.value = []
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ importFileList.value = fileList.slice(-1)
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleImportRemove(file, fileList) {
|
|
|
+ importFileList.value = fileList
|
|
|
+ }
|
|
|
+
|
|
|
+ function resetImport() {
|
|
|
+ importUploading.value = false
|
|
|
+ importUpdateSupport.value = false
|
|
|
+ importFileList.value = []
|
|
|
+ importUploadRef.value?.clearFiles()
|
|
|
+ }
|
|
|
+
|
|
|
+ async function submitImport() {
|
|
|
+ if (!importFileList.value.length) return ElMessage.warning('请选择 xls 或 xlsx 文件')
|
|
|
+ importUploading.value = true
|
|
|
+ try {
|
|
|
+ const response = await importDeviceLedger(importFileList.value[0].raw, importUpdateSupport.value)
|
|
|
+ if (response?.code && response.code !== 200) throw new Error(response.msg || response.message || '导入失败，请检查文件内容')
|
|
|
+ ElMessage.success(response?.msg || response?.data || '导入成功')
|
|
|
+ importVisible.value = false
|
|
|
+ await loadData()
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage.error(error?.response?.data?.msg || error?.response?.data?.message || error?.message || '导入失败，请稍后重试')
|
|
|
+ } finally {
|
|
|
+ importUploading.value = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ async function exportData() {
|
|
|
+ try {
|
|
|
+ const response = await (view === 'dispatch' || view === 'abnormal' ? exportAbnormalDevices : exportDeviceLedger)({...query.value})
|
|
|
+ const errorMessage = await readMonitoringExportError(response)
|
|
|
+ if (errorMessage) throw new Error(errorMessage)
|
|
|
+ const blob = response instanceof Blob ? response : new Blob([response], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})
|
|
|
+ saveAs(blob, `${title}_${new Date().toISOString().slice(0, 10)}.xlsx`)
|
|
|
+ ElMessage.success('导出成功')
|
|
|
+ } catch (error) {
|
|
|
+ const backendMessage = await readMonitoringExportError(error?.response?.data)
|
|
|
+ ElMessage.error(backendMessage || error?.message || '导出失败，请稍后重试')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(loadData)
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.device-page{padding:20px;background:linear-gradient(135deg,#eff6ff 0%,#f8fafc 45%,#eef2f7 100%);min-height:calc(100vh - 84px)}
|
|
|
-.page-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
|
|
|
-.page-title{display:flex;align-items:center;gap:12px;min-width:0}
|
|
|
-.page-title-icon{display:grid;place-items:center;width:42px;height:42px;color:#fff;background:linear-gradient(135deg,#2563eb 0%,#06b6d4 100%);border-radius:8px;box-shadow:0 8px 16px rgba(37,99,235,.2)}
|
|
|
-.page-title h2{margin:0 0 4px;font-size:20px;color:#1e293b}
|
|
|
-.muted{font-size:13px;color:#64748b}
|
|
|
-.heading-refresh{border-color:#bfdbfe;color:#2563eb;background:#fff}
|
|
|
-.filter-card,.water-panel{border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 6px 14px rgba(15,23,42,.04)}
|
|
|
-.filter-card{margin-bottom:16px;background:#fff}
|
|
|
-.filter-card :deep(.el-card__header){padding:14px 18px;border-bottom:1px solid #e2e8f0;background:#fbfdff}
|
|
|
-.filter-card :deep(.el-form-item){margin-bottom:0}
|
|
|
-.filter-card :deep(.el-form-item__label){color:#475569}
|
|
|
-.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
|
|
|
-.metric{display:flex;align-items:center;gap:14px;min-width:0;padding:16px 18px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 6px 14px rgba(15,23,42,.04)}
|
|
|
-.metric-icon{position:static;flex:0 0 42px;display:grid;place-items:center;width:42px;height:42px;color:#2563eb;background:linear-gradient(135deg,#dbeafe 0%,#eff6ff 100%);border-radius:8px}
|
|
|
-.metric-icon .el-icon{font-size:22px}
|
|
|
-.metric-body{min-width:0;text-align:left}
|
|
|
-.metric-body span{display:block;overflow:hidden;margin-bottom:3px;color:#64748b;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
|
|
|
-.metric-value{display:flex;align-items:baseline;gap:5px;min-width:0}
|
|
|
-.metric-value strong{font-size:24px;line-height:1.2;color:#1e293b}
|
|
|
-.metric-value small{color:#94a3b8}
|
|
|
-.water-panel{overflow:hidden}
|
|
|
-.water-panel :deep(.el-card__header){padding:14px 18px;border-bottom:1px solid #e2e8f0;background:#fbfdff}
|
|
|
-.card-title{display:flex;align-items:center;gap:8px;color:#1e293b;font-weight:600}
|
|
|
-.card-title .el-icon{color:#2563eb;font-size:18px}
|
|
|
-.table-toolbar{display:flex;justify-content:space-between;align-items:center}
|
|
|
-.panel-actions{display:flex;align-items:center;gap:8px}
|
|
|
-.load-error{margin-bottom:14px}
|
|
|
-.device-page :deep(.el-table){--el-table-border-color:#e2e8f0;--el-table-header-bg-color:#f8fafc;--el-table-header-text-color:#475569;--el-table-row-hover-bg-color:#eff6ff}
|
|
|
-.device-page :deep(.el-table__row){cursor:pointer}
|
|
|
-.device-image{width:66px;height:44px;border-radius:6px;overflow:hidden}
|
|
|
-.image-placeholder{display:inline-grid;place-items:center;width:66px;height:44px;color:#94a3b8;font-size:12px;background:#f1f5f9;border-radius:6px}
|
|
|
-.detail-summary{display:flex;align-items:center;gap:12px;margin-bottom:16px}
|
|
|
-.detail-name{font-size:18px;font-weight:700;color:#17324d}
|
|
|
-.device-detail-drawer :deep(.el-drawer__body),.device-edit-drawer :deep(.el-drawer__body){overflow:auto;padding:20px 24px}
|
|
|
-.device-detail-drawer :deep(.el-descriptions__label){white-space:nowrap}
|
|
|
-.device-detail-drawer :deep(.el-descriptions__content){overflow-wrap:anywhere;word-break:break-word}
|
|
|
-.detail-media{margin-bottom:14px;padding:12px;background:#f7fbff;border:1px solid rgba(37,99,235,.1);border-radius:10px}
|
|
|
-.detail-media-label{margin-bottom:8px;font-weight:600;color:#17324d}
|
|
|
-.detail-image{width:100%;height:180px;border-radius:8px;overflow:hidden}
|
|
|
-.detail-image-placeholder{display:grid;place-items:center;height:120px;background:#f1f5f9;border-radius:8px;color:#909399}
|
|
|
-.full-input{width:100%}
|
|
|
-.import-update{margin-top:10px}
|
|
|
-.import-tip{line-height:1.6}
|
|
|
-.el-pagination{justify-content:flex-end;margin-top:16px}
|
|
|
-.dispatch-layout{display:flex;gap:20px;min-height:420px}
|
|
|
-.dispatch-form{width:300px;min-width:280px;padding-left:20px;border-left:1px solid #e4e7ed}
|
|
|
-.assignee-field{display:flex;align-items:center;gap:12px;width:100%;min-height:32px}
|
|
|
-.assignee-summary{color:#17324d}
|
|
|
-.assignee-placeholder{color:#909399}
|
|
|
-.assignee-picker{display:flex;gap:16px;flex:1;min-width:0;min-height:390px}
|
|
|
-.assignee-depts{width:190px;min-width:190px;padding-right:16px;border-right:1px solid #e4e7ed}
|
|
|
-.assignee-tree{margin-top:10px;max-height:340px;overflow:auto}
|
|
|
-.assignee-users{flex:1;min-width:0}
|
|
|
-.assignee-search{display:flex;gap:8px;margin-bottom:12px}
|
|
|
-.assignee-search .el-input{flex:1}
|
|
|
-.assignee-users .el-pagination{margin-top:12px}
|
|
|
-.assignee-picked{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:14px;padding:10px 12px;background:#f5f7fa;border:1px solid #ebeef5;color:#606266}
|
|
|
-.assignee-picked strong{color:#2563eb}
|
|
|
-.assignee-users .el-alert{margin-bottom:12px}
|
|
|
-@media(max-width:900px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-card :deep(.el-form-item){margin-bottom:12px}}
|
|
|
-@media(max-width:768px){.device-detail-drawer,.device-edit-drawer{width:100%!important}.dispatch-dialog{width:calc(100% - 24px)!important;margin-left:auto;margin-right:auto}.dispatch-layout{flex-direction:column}.assignee-picker{flex-direction:column}.assignee-depts{width:auto;min-width:0;padding-right:0;padding-bottom:12px;border-right:0;border-bottom:1px solid #e4e7ed}.assignee-tree{max-height:180px}.dispatch-form{width:auto;min-width:0;padding-left:0;padding-top:16px;border-left:0;border-top:1px solid #e4e7ed}}
|
|
|
+ .device-page {
|
|
|
+ padding: 20px;
|
|
|
+ background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 45%, #eef2f7 100%);
|
|
|
+ min-height: calc(100vh - 84px)
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-heading {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ gap: 16px;
|
|
|
+ margin-bottom: 16px
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ min-width: 0
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-title-icon {
|
|
|
+ display: grid;
|
|
|
+ place-items: center;
|
|
|
+ width: 42px;
|
|
|
+ height: 42px;
|
|
|
+ color: #fff;
|
|
|
+ background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 8px 16px rgba(37, 99, 235, .2)
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-title h2 {
|
|
|
+ margin: 0 0 4px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #1e293b
|
|
|
+ }
|
|
|
+
|
|
|
+ .muted {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #64748b
|
|
|
+ }
|
|
|
+
|
|
|
+ .heading-refresh {
|
|
|
+ border-color: #bfdbfe;
|
|
|
+ color: #2563eb;
|
|
|
+ background: #fff
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-card, .water-panel {
|
|
|
+ border: 1px solid #e2e8f0;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 6px 14px rgba(15, 23, 42, .04)
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-card {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ background: #fff
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-card :deep(.el-card__header) {
|
|
|
+ padding: 14px 18px;
|
|
|
+ border-bottom: 1px solid #e2e8f0;
|
|
|
+ background: #fbfdff
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-card :deep(.el-form-item) {
|
|
|
+ margin-top: 8px;
|
|
|
+ margin-right: 16px;
|
|
|
+ margin-bottom: 8px
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-card :deep(.el-form-item__label) {
|
|
|
+ color: #475569
|
|
|
+ }
|
|
|
+
|
|
|
+ .metric-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns:repeat(4, minmax(0, 1fr));
|
|
|
+ gap: 14px;
|
|
|
+ margin-bottom: 16px
|
|
|
+ }
|
|
|
+
|
|
|
+ .metric {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 14px;
|
|
|
+ min-width: 0;
|
|
|
+ padding: 16px 18px;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #e2e8f0;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 6px 14px rgba(15, 23, 42, .04)
|
|
|
+ }
|
|
|
+
|
|
|
+ .metric-icon {
|
|
|
+ position: static;
|
|
|
+ flex: 0 0 42px;
|
|
|
+ display: grid;
|
|
|
+ place-items: center;
|
|
|
+ width: 42px;
|
|
|
+ height: 42px;
|
|
|
+ color: #2563eb;
|
|
|
+ background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
|
|
|
+ border-radius: 8px
|
|
|
+ }
|
|
|
+
|
|
|
+ .metric-icon .el-icon {
|
|
|
+ font-size: 22px
|
|
|
+ }
|
|
|
+
|
|
|
+ .metric-body {
|
|
|
+ min-width: 0;
|
|
|
+ text-align: left
|
|
|
+ }
|
|
|
+
|
|
|
+ .metric-body span {
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ color: #64748b;
|
|
|
+ font-size: 13px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap
|
|
|
+ }
|
|
|
+
|
|
|
+ .metric-value {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ gap: 5px;
|
|
|
+ min-width: 0
|
|
|
+ }
|
|
|
+
|
|
|
+ .metric-value strong {
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 1.2;
|
|
|
+ color: #1e293b
|
|
|
+ }
|
|
|
+
|
|
|
+ .metric-value small {
|
|
|
+ color: #94a3b8
|
|
|
+ }
|
|
|
+
|
|
|
+ .water-panel {
|
|
|
+ overflow: hidden
|
|
|
+ }
|
|
|
+
|
|
|
+ .water-panel :deep(.el-card__header) {
|
|
|
+ padding: 14px 18px;
|
|
|
+ border-bottom: 1px solid #e2e8f0;
|
|
|
+ background: #fbfdff
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ color: #1e293b;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 16px
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-title .el-icon {
|
|
|
+ color: #2563eb;
|
|
|
+ font-size: 18px
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-toolbar {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center
|
|
|
+ }
|
|
|
+
|
|
|
+ .panel-actions {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px
|
|
|
+ }
|
|
|
+
|
|
|
+ .load-error {
|
|
|
+ margin-bottom: 14px
|
|
|
+ }
|
|
|
+
|
|
|
+ .device-page :deep(.el-table) {
|
|
|
+ --el-table-border-color: #e2e8f0;
|
|
|
+ --el-table-header-bg-color: #f8fafc;
|
|
|
+ --el-table-header-text-color: #475569;
|
|
|
+ --el-table-row-hover-bg-color: #eff6ff
|
|
|
+ }
|
|
|
+
|
|
|
+ .device-page :deep(.el-table__row) {
|
|
|
+ cursor: pointer
|
|
|
+ }
|
|
|
+
|
|
|
+ .device-image {
|
|
|
+ width: 66px;
|
|
|
+ height: 44px;
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-placeholder {
|
|
|
+ display: inline-grid;
|
|
|
+ place-items: center;
|
|
|
+ width: 66px;
|
|
|
+ height: 44px;
|
|
|
+ color: #94a3b8;
|
|
|
+ font-size: 12px;
|
|
|
+ background: #f1f5f9;
|
|
|
+ border-radius: 6px
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-summary {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ margin-bottom: 16px
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-name {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #17324d
|
|
|
+ }
|
|
|
+
|
|
|
+ .device-detail-drawer :deep(.el-drawer__body), .device-edit-drawer :deep(.el-drawer__body) {
|
|
|
+ overflow: auto;
|
|
|
+ padding: 20px 24px
|
|
|
+ }
|
|
|
+
|
|
|
+ .device-detail-drawer :deep(.el-descriptions__label) {
|
|
|
+ white-space: nowrap
|
|
|
+ }
|
|
|
+
|
|
|
+ .device-detail-drawer :deep(.el-descriptions__content) {
|
|
|
+ overflow-wrap: anywhere;
|
|
|
+ word-break: break-word
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-media {
|
|
|
+ margin-bottom: 14px;
|
|
|
+ padding: 12px;
|
|
|
+ background: #f7fbff;
|
|
|
+ border: 1px solid rgba(37, 99, 235, .1);
|
|
|
+ border-radius: 10px
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-media-label {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #17324d
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 180px;
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-image-placeholder {
|
|
|
+ display: grid;
|
|
|
+ place-items: center;
|
|
|
+ height: 120px;
|
|
|
+ background: #f1f5f9;
|
|
|
+ border-radius: 8px;
|
|
|
+ color: #909399
|
|
|
+ }
|
|
|
+
|
|
|
+ .full-input {
|
|
|
+ width: 100%
|
|
|
+ }
|
|
|
+
|
|
|
+ .import-update {
|
|
|
+ margin-top: 10px
|
|
|
+ }
|
|
|
+
|
|
|
+ .import-tip {
|
|
|
+ line-height: 1.6
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-pagination {
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-top: 16px
|
|
|
+ }
|
|
|
+
|
|
|
+ .dispatch-layout {
|
|
|
+ display: flex;
|
|
|
+ gap: 20px;
|
|
|
+ min-height: 420px
|
|
|
+ }
|
|
|
+
|
|
|
+ .dispatch-form {
|
|
|
+ width: 300px;
|
|
|
+ min-width: 280px;
|
|
|
+ padding-left: 20px;
|
|
|
+ border-left: 1px solid #e4e7ed
|
|
|
+ }
|
|
|
+
|
|
|
+ .assignee-field {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 32px
|
|
|
+ }
|
|
|
+
|
|
|
+ .assignee-summary {
|
|
|
+ color: #17324d
|
|
|
+ }
|
|
|
+
|
|
|
+ .assignee-placeholder {
|
|
|
+ color: #909399
|
|
|
+ }
|
|
|
+
|
|
|
+ .assignee-picker {
|
|
|
+ display: flex;
|
|
|
+ gap: 16px;
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ min-height: 390px
|
|
|
+ }
|
|
|
+
|
|
|
+ .assignee-depts {
|
|
|
+ width: 190px;
|
|
|
+ min-width: 190px;
|
|
|
+ padding-right: 16px;
|
|
|
+ border-right: 1px solid #e4e7ed
|
|
|
+ }
|
|
|
+
|
|
|
+ .assignee-tree {
|
|
|
+ margin-top: 10px;
|
|
|
+ max-height: 340px;
|
|
|
+ overflow: auto
|
|
|
+ }
|
|
|
+
|
|
|
+ .assignee-users {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0
|
|
|
+ }
|
|
|
+
|
|
|
+ .assignee-search {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+ margin-bottom: 12px
|
|
|
+ }
|
|
|
+
|
|
|
+ .assignee-search .el-input {
|
|
|
+ flex: 1
|
|
|
+ }
|
|
|
+
|
|
|
+ .assignee-users .el-pagination {
|
|
|
+ margin-top: 12px
|
|
|
+ }
|
|
|
+
|
|
|
+ .assignee-picked {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ margin-top: 14px;
|
|
|
+ padding: 10px 12px;
|
|
|
+ background: #f5f7fa;
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+ color: #606266
|
|
|
+ }
|
|
|
+
|
|
|
+ .assignee-picked strong {
|
|
|
+ color: #2563eb
|
|
|
+ }
|
|
|
+
|
|
|
+ .assignee-users .el-alert {
|
|
|
+ margin-bottom: 12px
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 900px) {
|
|
|
+ .metric-grid {
|
|
|
+ grid-template-columns:repeat(2, minmax(0, 1fr))
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-card :deep(.el-form-item) {
|
|
|
+ margin-bottom: 12px
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ .device-detail-drawer, .device-edit-drawer {
|
|
|
+ width: 100% !important
|
|
|
+ }
|
|
|
+
|
|
|
+ .dispatch-dialog {
|
|
|
+ width: calc(100% - 24px) !important;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto
|
|
|
+ }
|
|
|
+
|
|
|
+ .dispatch-layout {
|
|
|
+ flex-direction: column
|
|
|
+ }
|
|
|
+
|
|
|
+ .assignee-picker {
|
|
|
+ flex-direction: column
|
|
|
+ }
|
|
|
+
|
|
|
+ .assignee-depts {
|
|
|
+ width: auto;
|
|
|
+ min-width: 0;
|
|
|
+ padding-right: 0;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ border-right: 0;
|
|
|
+ border-bottom: 1px solid #e4e7ed
|
|
|
+ }
|
|
|
+
|
|
|
+ .assignee-tree {
|
|
|
+ max-height: 180px
|
|
|
+ }
|
|
|
+
|
|
|
+ .dispatch-form {
|
|
|
+ width: auto;
|
|
|
+ min-width: 0;
|
|
|
+ padding-left: 0;
|
|
|
+ padding-top: 16px;
|
|
|
+ border-left: 0;
|
|
|
+ border-top: 1px solid #e4e7ed
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
-@use './waterSupplyPageTheme.scss';
|
|
|
-@media(max-width:768px){.device-detail-drawer{width:100%!important}.dispatch-dialog{width:calc(100% - 24px)!important;margin-left:auto;margin-right:auto}.dispatch-layout{flex-direction:column}.assignee-picker{flex-direction:column}.assignee-depts{width:auto;min-width:0;padding-right:0;padding-bottom:12px;border-right:0;border-bottom:1px solid #e4e7ed}.assignee-tree{max-height:180px}.dispatch-form{width:auto;min-width:0;padding-left:0;padding-top:16px;border-left:0;border-top:1px solid #e4e7ed}}
|
|
|
+ @use './waterSupplyPageTheme.scss';
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ .device-detail-drawer {
|
|
|
+ width: 100% !important
|
|
|
+ }
|
|
|
+
|
|
|
+ .dispatch-dialog {
|
|
|
+ width: calc(100% - 24px) !important;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto
|
|
|
+ }
|
|
|
+
|
|
|
+ .dispatch-layout {
|
|
|
+ flex-direction: column
|
|
|
+ }
|
|
|
+
|
|
|
+ .assignee-picker {
|
|
|
+ flex-direction: column
|
|
|
+ }
|
|
|
+
|
|
|
+ .assignee-depts {
|
|
|
+ width: auto;
|
|
|
+ min-width: 0;
|
|
|
+ padding-right: 0;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ border-right: 0;
|
|
|
+ border-bottom: 1px solid #e4e7ed
|
|
|
+ }
|
|
|
+
|
|
|
+ .assignee-tree {
|
|
|
+ max-height: 180px
|
|
|
+ }
|
|
|
+
|
|
|
+ .dispatch-form {
|
|
|
+ width: auto;
|
|
|
+ min-width: 0;
|
|
|
+ padding-left: 0;
|
|
|
+ padding-top: 16px;
|
|
|
+ border-left: 0;
|
|
|
+ border-top: 1px solid #e4e7ed
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
