qdintc/fishery-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 设备管理，告警通知，设备告警，优化手机端展示。

Browse Source
This commit is contained in:
tianyongbao
2026-04-11 19:47:53 +08:00
parent e8791e9371
commit 40fb6196b2
8 changed files with 847 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

255
src/views/fishery/callNotice/index.vue
View File

@@ -56,7 +56,7 @@
</el-row>
</template>
<el-table v-loading="loading" border :data="callNoticeList" @selection-change="handleSelectionChange">
<el-table v-loading="loading" border :data="callNoticeList" @selection-change="handleSelectionChange" class="hidden-sm-and-down">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="用户名" align="center" prop="userName" width="120"/>
<!-- <el-table-column label="手机号" align="center" prop="mobilePhone" width="120"/> -->
@@ -108,6 +108,64 @@
</el-table-column>
</el-table>
<!-- 移动端卡片展示 -->
<div v-loading="loading" class="mobile-card-list hidden-sm-and-up">
<div v-if="callNoticeList.length === 0" class="no-data">
<el-empty description="暂无数据" />
</div>
<el-card v-for="item in callNoticeList" :key="item.id" class="mobile-notice-card" shadow="hover">
<!-- 卡片头部 -->
<div class="card-header">
<div class="header-left">
<dict-tag :options="call_status" :value="item.callStatus" class="status-tag"/>
<span class="call-time">{{ item.callTime || '-' }}</span>
</div>
<el-checkbox :model-value="ids.includes(item.id)" @change="handleMobileSelect(item, $event)" />
</div>
<!-- 基本信息 -->
<div class="info-section">
<div class="info-list">
<div class="info-row"><span class="label">用户名</span><span class="value">{{ item.userName || '-' }}</span></div>
<div class="info-row"><span class="label">设备编号</span><span class="value">{{ item.serialNum || '-' }}</span></div>
<div class="info-row"><span class="label">设备类型</span><span class="value"><dict-tag :options="aqu_device_type" :value="item.deviceType"/></span></div>
<div class="info-row"><span class="label">呼叫电话</span><span class="value highlight">{{ item.mobilePhone || '-' }}</span></div>
<div class="info-row"><span class="label">主叫号码</span><span class="value">{{ item.caller || '-' }}</span></div>
</div>
</div>
<!-- 告警信息 -->
<div class="info-section warn-section">
<div class="section-title">告警信息</div>
<div class="warn-grid">
<div class="warn-item">
<span class="warn-label">告警类型</span>
<span class="warn-value"><dict-tag :options="warn_type" :value="item.warnType"/></span>
</div>
<div class="warn-item">
<span class="warn-label">告警标题</span>
<span class="warn-value">{{ item.warnTitle || '-' }}</span>
</div>
</div>
</div>
<!-- 结果信息 -->
<div class="info-section" v-if="item.statusMsg">
<div class="section-title">呼叫结果</div>
<div class="result-box">
<span class="result-text">{{ item.statusMsg }}</span>
</div>
</div>
<!-- 操作按钮 -->
<div class="card-footer">
<el-button type="danger" size="small" plain @click="handleDelete(item)" v-hasPermi="['fishery:callNotice:remove']">
<el-icon><Delete /></el-icon>删除
</el-button>
</div>
</el-card>
</div>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
<!-- 添加或修改告警电话通知记录对话框 -->
@@ -336,6 +394,19 @@ const handleSelectionChange = (selection: CallNoticeVO[]) => {
multiple.value = !selection.length;
}
/** 移动端选择 */
const handleMobileSelect = (item: CallNoticeVO, checked: boolean | string | number) => {
if (checked) {
if (!ids.value.includes(item.id)) {
ids.value.push(item.id);
}
} else {
ids.value = ids.value.filter(id => id !== item.id);
}
single.value = ids.value.length != 1;
multiple.value = !ids.value.length;
}
/** 新增按钮操作 */
const handleAdd = () => {
reset();
@@ -390,3 +461,185 @@ onMounted(() => {
getList();
});
</script>
<style lang="scss" scoped>
// 移动端卡片样式
.mobile-card-list {
.no-data {
padding: 40px 0;
}
.mobile-notice-card {
margin-bottom: 12px;
border-radius: 8px;
:deep(.el-card__body) {
padding: 12px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 10px;
border-bottom: 1px solid #ebeef5;
.header-left {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
.status-tag {
flex-shrink: 0;
}
.call-time {
font-size: 12px;
color: #909399;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.info-section {
padding: 10px 0;
border-bottom: 1px solid #ebeef5;
&:last-of-type {
border-bottom: none;
}
.section-title {
font-size: 12px;
font-weight: 600;
color: #e6a23c;
margin-bottom: 8px;
padding-left: 8px;
border-left: 3px solid #e6a23c;
}
.info-list {
background-color: #fafafa;
border-radius: 6px;
padding: 4px 0;
.info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
font-size: 13px;
border-bottom: 1px dashed #ebeef5;
&:last-child {
border-bottom: none;
}
.label {
color: #909399;
flex-shrink: 0;
}
.value {
color: #303133;
font-weight: 500;
text-align: right;
word-break: break-all;
flex: 1;
margin-left: 12px;
&.highlight {
color: #409eff;
font-weight: 600;
}
}
}
}
.warn-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
.warn-item {
display: flex;
flex-direction: column;
padding: 8px 12px;
background: linear-gradient(135deg, #fdf6ec 0%, #faecd8 100%);
border-radius: 6px;
border: 1px solid #f5dab1;
.warn-label {
font-size: 11px;
color: #909399;
margin-bottom: 4px;
}
.warn-value {
font-size: 13px;
font-weight: 500;
color: #303133;
}
}
}
.result-box {
padding: 10px 12px;
background-color: #f5f7fa;
border-radius: 6px;
.result-text {
font-size: 13px;
color: #606266;
line-height: 1.5;
}
}
}
.card-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding-top: 12px;
border-top: 1px solid #ebeef5;
margin-top: 4px;
.el-button {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
font-size: 13px;
border-radius: 8px;
transition: all 0.2s;
.el-icon {
font-size: 16px;
margin-right: 4px;
}
&:active {
transform: scale(0.96);
}
}
}
}
}
// 响应式隐藏
.hidden-sm-and-down {
@media (max-width: 768px) {
display: none !important;
}
}
.hidden-sm-and-up {
@media (min-width: 769px) {
display: none !important;
}
}
</style>