From 4906474b50f1d42e2f62be2625af2a55303df6d3 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 14 Jan 2026 16:24:01 +0800
Subject: [PATCH] feat:通用列表页弹窗样式调整
---
applications/drone-command/src/views/areaManage/partition/FormDiaLog.vue | 114 ++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 85 insertions(+), 29 deletions(-)
diff --git a/applications/drone-command/src/views/areaManage/partition/FormDiaLog.vue b/applications/drone-command/src/views/areaManage/partition/FormDiaLog.vue
index 4d2e6d3..9835b94 100644
--- a/applications/drone-command/src/views/areaManage/partition/FormDiaLog.vue
+++ b/applications/drone-command/src/views/areaManage/partition/FormDiaLog.vue
@@ -1,32 +1,72 @@
<template>
- <el-dialog v-model="visible" :title="titleEnum[dialogMode]" :close-on-click-modal="false" width="80%">
+ <el-dialog class="ztzf-page-view-dialog" v-model="visible" :title="titleEnum[dialogMode]"
+ :close-on-click-modal="false" width="80%">
<div class="bodyBox">
<div class="leftMap ztzf-cesium" id="mapContainer"></div>
<div class="rightInfo">
- <div v-if="readonly">
- <div>区域名称: {{ formData.areaName }}</div>
- <div>区域位置: {{ formatLocation(formData) }}</div>
- <div>区域面积: {{ formData.areaSize || '-' }}k㎡</div>
- <div>区域类型: {{ getDictLabel(formData.areaType, dictObj.areaType) }}</div>
- <div>触发条件: {{ formData.triggerCondition }}</div>
- <div>响应机制: {{ formData.responseMechanism }}</div>
- <div>管控级别: {{ getDictLabel(formData.controlLevel, dictObj.controlLevel) }}</div>
- <div>关联派出所: {{ formData.policeStationName }}</div>
- <div>可飞行时间段: {{ formatFlyDate(formData) }}</div>
- <el-table ref="deviceTableRef" :data="deviceOptions" row-key="id">
- <el-table-column prop="deviceName" label="设备名称" />
- <el-table-column prop="deviceType" label="类型">
- <template v-slot="{ row }">
- {{ getDictLabel(row.deviceType, dictObj.deviceType) }}
- </template>
- </el-table-column>
- </el-table>
+ <div class="detail-container" v-if="readonly">
+ <div class="detail-title">区域详情</div>
+ <el-row>
+ <el-col :span="24">
+ <div class="label">区域名称</div>
+ <div class="val">{{ formData.areaName }}</div>
+ </el-col>
+ <el-col :span="24">
+ <div class="label">区域位置</div>
+ <div class="val">{{ formatLocation(formData) }}</div>
+ </el-col>
+ <el-col :span="24">
+ <div class="label">区域面积</div>
+ <div class="val">{{ formData.areaSize || '-' }}k㎡</div>
+ </el-col>
+ <el-col :span="24">
+ <div class="label">区域类型</div>
+ <div class="val">{{ getDictLabel(formData.areaType, dictObj.areaType) }}</div>
+ </el-col>
+ <el-col :span="24">
+ <div class="label">触发条件</div>
+ <div class="val">{{ formData.triggerCondition }}</div>
+ </el-col>
+ <el-col :span="24">
+ <div class="label">响应机制</div>
+ <div class="val">{{ formData.responseMechanism }}</div>
+ </el-col>
+ <el-col :span="24">
+ <div class="label">管控级别</div>
+ <div class="val">{{ getDictLabel(formData.controlLevel, dictObj.controlLevel) }}</div>
+ </el-col>
+ <el-col :span="24">
+ <div class="label">关联派出所</div>
+ <div class="val">{{ formData.policeStationName }}</div>
+ </el-col>
+ <el-col :span="24">
+ <div class="label">可飞行时间段</div>
+ <div class="val">{{ formatFlyDate(formData) }}</div>
+ </el-col>
+ </el-row>
+
+ <div class="detail-title">关联设备</div>
+ <div class="ztzf-table-container">
+ <div class="ztzf-table-content">
+ <el-table class="ztzf-data-cockpit-table" ref="deviceTableRef" :data="deviceOptions"
+ row-key="id">
+ <el-table-column prop="deviceName" label="设备名称" />
+ <el-table-column prop="deviceType" label="类型">
+ <template v-slot="{ row }">
+ {{ getDictLabel(row.deviceType, dictObj.deviceType) }}
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
</div>
- <el-form v-else ref="formRef" :model="formData" :rules="rules" :disabled="readonly" label-width="100px">
+ <el-form class="dialog-form" v-else ref="formRef" :model="formData" :rules="rules" :disabled="readonly"
+ label-width="100px">
<el-row>
<el-col :span="24">
<el-form-item label="区域名称" prop="areaName">
- <el-input v-model="formData.areaName" maxlength="50" placeholder="请输入" clearable />
+ <el-input class="ztzf-data-cockpit-search-input" v-model="formData.areaName"
+ maxlength="50" placeholder="请输入" clearable />
</el-form-item>
</el-col>
<el-col :span="24">
@@ -39,7 +79,8 @@
</el-col>
<el-col :span="24">
<el-form-item label="区域类型" prop="areaType">
- <el-select v-model="formData.areaType" placeholder="请选择" clearable>
+ <el-select class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-select-popper"
+ v-model="formData.areaType" placeholder="请选择" clearable>
<el-option
v-for="item in dictObj.areaType"
:key="item.dictKey"
@@ -51,17 +92,20 @@
</el-col>
<el-col :span="24">
<el-form-item label="响应机制" prop="responseMechanism">
- <el-input v-model="formData.responseMechanism" maxlength="200" placeholder="请输入" clearable />
+ <el-input class="ztzf-data-cockpit-search-input" v-model="formData.responseMechanism"
+ maxlength="200" placeholder="请输入" clearable />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="触发条件" prop="triggerCondition">
- <el-input v-model="formData.triggerCondition" maxlength="200" placeholder="请输入" clearable />
+ <el-input class="ztzf-data-cockpit-search-input" v-model="formData.triggerCondition"
+ maxlength="200" placeholder="请输入" clearable />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="管控级别" prop="controlLevel">
- <el-select v-model="formData.controlLevel" placeholder="请选择" clearable>
+ <el-select class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-select-popper"
+ v-model="formData.controlLevel" placeholder="请选择" clearable>
<el-option
v-for="item in dictObj.controlLevel"
:key="item.dictKey"
@@ -74,6 +118,8 @@
<el-col :span="24">
<el-form-item label="可飞行时段" prop="flyDateStart">
<el-date-picker
+ class="ztzf-data-cockpit-date-picker"
+ popper-class="ztzf-data-cockpit-date-picker-popper"
v-model="flyDateRange"
type="datetimerange"
range-separator="至"
@@ -86,7 +132,8 @@
</el-col>
<el-col :span="24">
<el-form-item label="关联派出所" prop="policeStationId">
- <el-select v-model="formData.policeStationId" placeholder="请选择" clearable>
+ <el-select class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-select-popper"
+ v-model="formData.policeStationId" placeholder="请选择" clearable>
<el-option
v-for="item in policeStationOptions"
:key="item.id"
@@ -100,10 +147,12 @@
<div>
<div>
关联设备
- <el-input v-model="searchName" placeholder="请输入" clearable></el-input>
+ <el-input class="ztzf-data-cockpit-search-input" v-model="searchName" placeholder="请输入"
+ clearable></el-input>
</div>
<el-form-item prop="deviceIds" label-width="0">
<el-table
+ class="ztzf-data-cockpit-table"
ref="deviceTableRef"
:data="deviceOptions.filter(item => item.deviceName.includes(searchName))"
row-key="id"
@@ -125,8 +174,9 @@
</div>
</div>
<template #footer>
- <el-button @click="handleCancel">{{ readonly ? '关闭' : '取消' }}</el-button>
- <el-button v-if="!readonly" type="primary" :loading="submitting" :disabled="submitting" @click="handleSubmit">
+ <el-button color="#2B2B4C" @click="handleCancel">{{ readonly ? '关闭' : '取消' }}</el-button>
+ <el-button color="#284FE3" v-if="!readonly" type="primary" :loading="submitting" :disabled="submitting"
+ @click="handleSubmit">
确定
</el-button>
</template>
@@ -391,6 +441,12 @@
width: 30%;
height: 100%;
overflow: auto;
+
+ .ztzf-table-container,
+ .ztzf-table-content {
+ height: auto;
+ flex: none;
+ }
}
}
</style>
--
Gitblit v1.9.3