liuhaodong
/
laic-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 设备相关弹窗切换到 t-dialog

main
xiaosi 3 weeks ago
parent
6c5c830bc3
commit
756ee6c872
2 changed files with 113 additions and 87 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 66
      src/components/DockEditModal.vue
  2. 134
      src/views/DevicesView/DevicesView.vue

66
src/components/DockEditModal.vue
View File

@ -1,27 +1,32 @@
<template> <template>
<div class="modal-backdrop" :class="{ open: visible }" @click.self="close">
<div class="modal add-dock-dialog" role="dialog" aria-modal="true" aria-label="编辑机巢">
<header>
<div><span>设备管理</span><h3>编辑机巢</h3></div>
<button class="icon-button" type="button" :disabled="saving" @click="close"><svg><use href="#i-x" /></svg></button>
</header>
<form novalidate @submit.prevent="submit">
<label><span>机巢名称<b>*</b></span><t-input v-model="form.name" :maxlength="64" placeholder="例如：青山湖 03 号机巢" /></label>
<label><span>机巢 SN</span><t-input :model-value="dock?.sn || ''" readonly /></label>
<label><span>通信卡 ICCID</span><t-input :model-value="dock?.iccid || ''" readonly /></label>
<div class="form-row">
<label><span>经度<b>*</b></span><t-input-number v-model="form.longitude" theme="normal" :min="-180" :max="180" :step="0.000001" placeholder="例如：120.219375" style="width: 100%" /></label>
<label><span>纬度<b>*</b></span><t-input-number v-model="form.latitude" theme="normal" :min="-90" :max="90" :step="0.000001" placeholder="例如：30.259244" style="width: 100%" /></label>
</div>
<label><span>设备位置<em>选填</em></span><t-input v-model="form.location" :maxlength="128" placeholder="例如：青山湖科技城 C 区" /></label>
<div class="form-error">{{ error }}</div>
<footer>
<button class="plain-command" type="button" :disabled="saving" @click="close">取消</button>
<button class="primary-command" type="submit" :disabled="saving">{{ saving ? '保存中…' : '保存修改' }}</button>
</footer>
</form>
</div>
</div>
<t-dialog
:visible="visible"
header="编辑机巢"
width="520px"
dialog-class-name="add-dock-dialog"
placement="center"
:close-on-overlay-click="!saving"
:close-on-esc-keydown="!saving"
:close-btn="!saving"
@update:visible="onVisibleUpdate"
@close="close"
>
<form novalidate @submit.prevent="submit">
<label><span>机巢名称<b>*</b></span><t-input v-model="form.name" :maxlength="64" placeholder="例如：青山湖 03 号机巢" /></label>
<label><span>机巢 SN</span><t-input :model-value="dock?.sn || ''" readonly /></label>
<label><span>通信卡 ICCID</span><t-input :model-value="dock?.iccid || ''" readonly /></label>
<div class="form-row">
<label><span>经度<b>*</b></span><t-input-number v-model="form.longitude" theme="normal" :min="-180" :max="180" :step="0.000001" placeholder="例如：120.219375" style="width: 100%" /></label>
<label><span>纬度<b>*</b></span><t-input-number v-model="form.latitude" theme="normal" :min="-90" :max="90" :step="0.000001" placeholder="例如：30.259244" style="width: 100%" /></label>
</div>
<label><span>设备位置<em>选填</em></span><t-input v-model="form.location" :maxlength="128" placeholder="例如：青山湖科技城 C 区" /></label>
<div class="form-error">{{ error }}</div>
</form>
<template #footer>
<button class="plain-command" type="button" :disabled="saving" @click="close">取消</button>
<button class="primary-command" type="button" :disabled="saving" @click="submit">{{ saving ? '保存中…' : '保存修改' }}</button>
</template>
</t-dialog>
</template> </template>
<script setup> <script setup>
@ -54,6 +59,10 @@ function close() {
if (!saving.value) emit('close') if (!saving.value) emit('close')
} }
function onVisibleUpdate(next) {
if (!next) close()
}
async function submit() { async function submit() {
const name = form.name.trim() const name = form.name.trim()
const longitude = Number(form.longitude) const longitude = Number(form.longitude)
@ -91,9 +100,14 @@ async function submit() {
} }
</script> </script>
<style scoped>
.add-dock-dialog :deep(.t-input),
.add-dock-dialog :deep(.t-input-number) {
<style>
.add-dock-dialog .t-input,
.add-dock-dialog .t-input-number {
width: 100%; width: 100%;
} }
.add-dock-dialog .t-dialog__footer {
display: flex;
justify-content: flex-end;
gap: 8px;
}
</style> </style>

134
src/views/DevicesView/DevicesView.vue
View File

@ -185,70 +185,70 @@
</template> </template>
</aside> </aside>
<div class="modal-backdrop" :class="{ open: addDockVisible }" @click.self="addDockVisible = false">
<div class="modal add-dock-dialog" role="dialog" aria-modal="true" aria-label="添加机巢">
<header>
<div><span>设备管理</span><h3>添加机巢</h3></div>
<button class="icon-button" type="button" @click="addDockVisible = false"><svg><use href="#i-x" /></svg></button>
</header>
<form novalidate @submit.prevent="submitAddDock">
<label><span>机巢名称<b>*</b></span><t-input v-model="dockForm.name" :maxlength="30" placeholder="例如：青山湖 03 号机巢" /></label>
<label><span>机巢 SN<b>*</b></span><t-input v-model="dockForm.sn" :maxlength="40" placeholder="请输入机身铭牌 SN" /></label>
<label><span>通信卡 ICCID<b>*</b></span><t-input v-model="dockForm.iccid" :maxlength="22" placeholder="请输入通信卡 ICCID" /></label>
<div class="form-row">
<label><span>经度<b>*</b></span><t-input-number v-model="dockForm.longitude" theme="normal" :min="-180" :max="180" :step="0.000001" placeholder="例如：120.219375" style="width: 100%" /></label>
<label><span>纬度<b>*</b></span><t-input-number v-model="dockForm.latitude" theme="normal" :min="-90" :max="90" :step="0.000001" placeholder="例如：30.259244" style="width: 100%" /></label>
</div>
<label><span>设备位置<em>选填</em></span><t-input v-model="dockForm.location" :maxlength="50" placeholder="例如：青山湖科技城 C 区" /></label>
<div class="form-error">{{ addDockError }}</div>
<footer>
<button class="plain-command" type="button" @click="addDockVisible = false">取消</button>
<button class="primary-command" type="submit">确认添加</button>
</footer>
</form>
</div>
</div>
<t-dialog
v-model:visible="addDockVisible"
header="添加机巢"
width="520px"
dialog-class-name="add-dock-dialog"
placement="center"
>
<form novalidate @submit.prevent="submitAddDock">
<label><span>机巢名称<b>*</b></span><t-input v-model="dockForm.name" :maxlength="30" placeholder="例如：青山湖 03 号机巢" /></label>
<label><span>机巢 SN<b>*</b></span><t-input v-model="dockForm.sn" :maxlength="40" placeholder="请输入机身铭牌 SN" /></label>
<label><span>通信卡 ICCID<b>*</b></span><t-input v-model="dockForm.iccid" :maxlength="22" placeholder="请输入通信卡 ICCID" /></label>
<div class="form-row">
<label><span>经度<b>*</b></span><t-input-number v-model="dockForm.longitude" theme="normal" :min="-180" :max="180" :step="0.000001" placeholder="例如：120.219375" style="width: 100%" /></label>
<label><span>纬度<b>*</b></span><t-input-number v-model="dockForm.latitude" theme="normal" :min="-90" :max="90" :step="0.000001" placeholder="例如：30.259244" style="width: 100%" /></label>
</div>
<label><span>设备位置<em>选填</em></span><t-input v-model="dockForm.location" :maxlength="50" placeholder="例如：青山湖科技城 C 区" /></label>
<div class="form-error">{{ addDockError }}</div>
</form>
<template #footer>
<button class="plain-command" type="button" @click="addDockVisible = false">取消</button>
<button class="primary-command" type="button" @click="submitAddDock">确认添加</button>
</template>
</t-dialog>
<DockEditModal :visible="editDockVisible" :dock="editDockRecord" @close="editDockVisible = false" @saved="handleDockSaved" /> <DockEditModal :visible="editDockVisible" :dock="editDockRecord" @close="editDockVisible = false" @saved="handleDockSaved" />
<div class="modal-backdrop" :class="{ open: firmwareVisible }" @click.self="firmwareVisible = false">
<div class="modal add-dock-dialog firmware-dialog" role="dialog" aria-modal="true" aria-label="固件升级">
<header>
<div><span>设备管理 · 固件维护</span><h3>固件升级</h3></div>
<button class="icon-button" type="button" @click="firmwareVisible = false"><svg><use href="#i-x" /></svg></button>
</header>
<div class="firmware-content" v-if="firmwareRecord">
<div class="firmware-device">
<span class="table-asset-icon"><svg><use href="#i-home" /></svg></span>
<div>
<strong>{{ firmwareRecord.name }}</strong>
<small>当前版本 {{ firmwareRecord.version }}</small>
</div>
<i class="status" :class="firmwareRecord.statusClass">{{ firmwareRecord.status }}</i>
<t-dialog
v-model:visible="firmwareVisible"
header="固件升级"
width="500px"
dialog-class-name="firmware-dialog"
placement="center"
>
<div class="firmware-content" v-if="firmwareRecord">
<div class="firmware-device">
<span class="table-asset-icon"><svg><use href="#i-home" /></svg></span>
<div>
<strong>{{ firmwareRecord.name }}</strong>
<small>当前版本 {{ firmwareRecord.version }}</small>
</div> </div>
<label>
<span>目标固件版本</span>
<t-select
v-model="upgradeFirmwareId"
:options="upgradeFirmwareOptions"
:placeholder="firmwareList.length ? '选择目标版本' : '暂无已发布固件'"
:disabled="!firmwareList.length"
clearable
style="width: 100%"
/>
</label>
<div class="firmware-checks">
<span>升级前请确认设备状态</span>
</div>
<p class="firmware-note">升级期间机巢将暂时停止远程控制和视频服务，请确认当前没有飞行任务。升级完成后设备会自动重启并恢复连接。</p>
<div class="form-error">{{ firmwareError }}</div>
<i class="status" :class="firmwareRecord.statusClass">{{ firmwareRecord.status }}</i>
</div> </div>
<footer class="firmware-footer">
<button class="plain-command" type="button" @click="firmwareVisible = false">取消</button>
<button class="primary-command" type="button" :disabled="!upgradeFirmwareId || upgrading" @click="doUpgrade">{{ upgrading ? '下发中…' : '开始升级' }}</button>
</footer>
<label>
<span>目标固件版本</span>
<t-select
v-model="upgradeFirmwareId"
:options="upgradeFirmwareOptions"
:placeholder="firmwareList.length ? '选择目标版本' : '暂无已发布固件'"
:disabled="!firmwareList.length"
clearable
style="width: 100%"
/>
</label>
<div class="firmware-checks">
<span>升级前请确认设备状态</span>
</div>
<p class="firmware-note">升级期间机巢将暂时停止远程控制和视频服务，请确认当前没有飞行任务。升级完成后设备会自动重启并恢复连接。</p>
<div class="form-error">{{ firmwareError }}</div>
</div> </div>
</div>
<template #footer>
<button class="plain-command" type="button" @click="firmwareVisible = false">取消</button>
<button class="primary-command" type="button" :disabled="!upgradeFirmwareId || upgrading" @click="doUpgrade">{{ upgrading ? '下发中…' : '开始升级' }}</button>
</template>
</t-dialog>
</section> </section>
</template> </template>
@ -552,9 +552,21 @@ async function doUpgrade() {
.toolbar-group :deep(.t-select) { .toolbar-group :deep(.t-select) {
flex-shrink: 0; flex-shrink: 0;
} }
.add-dock-dialog :deep(.t-input),
.add-dock-dialog :deep(.t-input-number),
.firmware-dialog :deep(.t-select) {
</style>
<style>
.add-dock-dialog .t-input,
.add-dock-dialog .t-input-number,
.firmware-dialog .t-select {
width: 100%; width: 100%;
} }
.add-dock-dialog .t-dialog__footer,
.firmware-dialog .t-dialog__footer {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.firmware-dialog .firmware-content {
padding: 0;
}
</style> </style>

Write Preview
Loading…
Cancel
Save