Browse Source

feat: 固件任务账户弹窗切换到 t-dialog

main
xiaosi 3 weeks ago
parent
commit
5ad0343e1b
  1. 11
      src/styles/prototype.css
  2. 47
      src/views/AccountView/AccountView.vue
  3. 36
      src/views/FirmwaresView/FirmwaresView.vue
  4. 57
      src/views/TasksView/TasksView.vue

11
src/styles/prototype.css

@ -507,6 +507,14 @@ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width:
.dock-status-environment { grid-template-columns: repeat(2, 1fr); } .dock-status-environment { grid-template-columns: repeat(2, 1fr); }
} }
.add-dock-dialog { width: min(520px, 100%); padding: 0; overflow: hidden; text-align: left; }.add-dock-dialog > header { height: 68px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.add-dock-dialog > header > div { display: flex; flex-direction: column; gap: 3px; }.add-dock-dialog > header span { color: var(--muted); font-size: 10px; }.add-dock-dialog > header h3 { margin: 0; font-size: 18px; }.add-dock-dialog form { padding: 18px 20px 0; }.add-dock-dialog label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }.add-dock-dialog label > span { color: #485764; font-size: 12px; }.add-dock-dialog label b { color: var(--red); font-weight: 500; }.add-dock-dialog label em { margin-left: 4px; color: #8a96a0; font-size: 10px; font-style: normal; }.add-dock-dialog input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; outline: 0; color: var(--ink); background: #fff; font-size: 12px; }.add-dock-dialog input:focus { border-color: #6799d1; box-shadow: 0 0 0 3px rgba(31,111,235,.08); }.add-dock-dialog input[readonly] { color: #77838d; background: #f2f4f6; cursor: not-allowed; }.add-dock-dialog input.invalid { border-color: var(--red); }.add-dock-dialog label small { min-height: 0; color: var(--red); font-size: 10px; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.form-error { min-height: 28px; padding-top: 7px; color: var(--red); font-size: 11px; }.add-dock-dialog form > footer { height: 62px; margin: 0 -20px; padding: 0 20px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }.add-dock-dialog form > footer button { min-width: 82px; } .add-dock-dialog { width: min(520px, 100%); padding: 0; overflow: hidden; text-align: left; }.add-dock-dialog > header { height: 68px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.add-dock-dialog > header > div { display: flex; flex-direction: column; gap: 3px; }.add-dock-dialog > header span { color: var(--muted); font-size: 10px; }.add-dock-dialog > header h3 { margin: 0; font-size: 18px; }.add-dock-dialog form { padding: 18px 20px 0; }.add-dock-dialog label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }.add-dock-dialog label > span { color: #485764; font-size: 12px; }.add-dock-dialog label b { color: var(--red); font-weight: 500; }.add-dock-dialog label em { margin-left: 4px; color: #8a96a0; font-size: 10px; font-style: normal; }.add-dock-dialog input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; outline: 0; color: var(--ink); background: #fff; font-size: 12px; }.add-dock-dialog input:focus { border-color: #6799d1; box-shadow: 0 0 0 3px rgba(31,111,235,.08); }.add-dock-dialog input[readonly] { color: #77838d; background: #f2f4f6; cursor: not-allowed; }.add-dock-dialog input.invalid { border-color: var(--red); }.add-dock-dialog label small { min-height: 0; color: var(--red); font-size: 10px; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.form-error { min-height: 28px; padding-top: 7px; color: var(--red); font-size: 11px; }.add-dock-dialog form > footer { height: 62px; margin: 0 -20px; padding: 0 20px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }.add-dock-dialog form > footer button { min-width: 82px; }
.t-dialog.add-dock-dialog { padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); overflow: visible; transform: none; box-shadow: none; }
.t-dialog.add-dock-dialog form { padding: 0; }
.t-dialog.add-dock-dialog .t-dialog__footer button + button { margin-left: 8px; }
.t-dialog.firmware-dialog { padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); overflow: visible; transform: none; box-shadow: none; }
.t-dialog.firmware-dialog .firmware-content { padding: 0; }
.t-dialog.firmware-dialog .firmware-footer { height: auto; margin: 0; padding: 0; border-top: 0; }
.t-dialog.firmware-dialog .t-dialog__footer button + button { margin-left: 8px; }
.route-upload-dialog select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; outline: 0; color: var(--ink); background: #fff; font-size: 12px; }.add-dock-dialog .route-upload-note { margin: -4px 0 0; color: #778590; font-size: 10px; line-height: 1.6; } .route-upload-dialog select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; outline: 0; color: var(--ink); background: #fff; font-size: 12px; }.add-dock-dialog .route-upload-note { margin: -4px 0 0; color: #778590; font-size: 10px; line-height: 1.6; }
.firmware-dialog { width: min(500px, calc(100vw - 32px)); padding: 0; overflow: hidden; text-align: left; }.firmware-content { padding: 18px 20px 8px; }.firmware-device { min-height: 54px; padding: 9px 10px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 5px; background: #f7f9fb; }.firmware-device > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }.firmware-device strong { font-size: 12px; }.firmware-device small { color: var(--muted); font-size: 10px; }.firmware-content label { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }.firmware-content label > span { color: #485764; font-size: 12px; }.firmware-content select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; font-size: 12px; }.firmware-checks { margin-top: 15px; padding: 10px; display: flex; justify-content: space-between; gap: 8px; border-radius: 4px; background: #f5f8fa; }.firmware-checks span { display: flex; align-items: center; gap: 5px; color: #52616e; font-size: 10px; }.firmware-checks i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }.firmware-note { margin: 13px 0 0; color: #7b8791; font-size: 10px; line-height: 1.6; }.firmware-footer { height: 62px; padding: 0 20px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }.firmware-footer button { min-width: 82px; } .firmware-dialog { width: min(500px, calc(100vw - 32px)); padding: 0; overflow: hidden; text-align: left; }.firmware-content { padding: 18px 20px 8px; }.firmware-device { min-height: 54px; padding: 9px 10px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 5px; background: #f7f9fb; }.firmware-device > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }.firmware-device strong { font-size: 12px; }.firmware-device small { color: var(--muted); font-size: 10px; }.firmware-content label { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }.firmware-content label > span { color: #485764; font-size: 12px; }.firmware-content select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; font-size: 12px; }.firmware-checks { margin-top: 15px; padding: 10px; display: flex; justify-content: space-between; gap: 8px; border-radius: 4px; background: #f5f8fa; }.firmware-checks span { display: flex; align-items: center; gap: 5px; color: #52616e; font-size: 10px; }.firmware-checks i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }.firmware-note { margin: 13px 0 0; color: #7b8791; font-size: 10px; line-height: 1.6; }.firmware-footer { height: 62px; padding: 0 20px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }.firmware-footer button { min-width: 82px; }
.toast { position: fixed; z-index: 100; top: 78px; left: 50%; min-width: 180px; height: 42px; padding: 0 18px; display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 5px; background: #fff; box-shadow: var(--shadow); transform: translate(-50%, -18px); opacity: 0; pointer-events: none; transition: .22s ease; } .toast { position: fixed; z-index: 100; top: 78px; left: 50%; min-width: 180px; height: 42px; padding: 0 18px; display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 5px; background: #fff; box-shadow: var(--shadow); transform: translate(-50%, -18px); opacity: 0; pointer-events: none; transition: .22s ease; }
@ -942,6 +950,9 @@ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width:
.carrier-recharge-total { min-height: 54px; padding: 0 2px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); } .carrier-recharge-total { min-height: 54px; padding: 0 2px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); }
.carrier-recharge-total span { color: var(--muted); font-size: 11px; }.carrier-recharge-total strong { color: #276ea9; font-size: 24px; } .carrier-recharge-total span { color: var(--muted); font-size: 11px; }.carrier-recharge-total strong { color: #276ea9; font-size: 24px; }
.recharge-modal { width: min(440px, 100%); padding: 20px; border-radius: 7px; background: #fff; box-shadow: 0 22px 60px rgba(0,0,0,.23); text-align: left; transform: translateY(8px); transition: transform .18s ease; } .recharge-modal { width: min(440px, 100%); padding: 20px; border-radius: 7px; background: #fff; box-shadow: 0 22px 60px rgba(0,0,0,.23); text-align: left; transform: translateY(8px); transition: transform .18s ease; }
.t-dialog.recharge-modal { padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); transform: none; box-shadow: none; }
.t-dialog.recharge-modal .t-dialog__footer button + button { margin-left: 8px; }
.modal-backdrop.open .recharge-modal { transform: translateY(0); } .modal-backdrop.open .recharge-modal { transform: translateY(0); }
.recharge-modal h3 { margin: 0 0 5px; font-size: 16px; } .recharge-modal h3 { margin: 0 0 5px; font-size: 16px; }
.recharge-sub { margin: 0 0 16px; color: var(--muted); font-size: 11px; } .recharge-sub { margin: 0 0 16px; color: var(--muted); font-size: 11px; }

47
src/views/AccountView/AccountView.vue

@ -80,8 +80,38 @@
<div class="business-panel account-panel" :class="{ active: tab === 'invoice' }" style="padding:18px"><div class="account-section-heading"><h2>发票资料与申请</h2><span>仅对已人工确认的流量订单开放申请</span></div><div class="traffic-purchase-layout"><div class="traffic-amount-block"><label><span>发票抬头</span><t-input v-model.trim="invoiceForm.title" :maxlength="128" /></label><label><span>纳税人识别号</span><t-input v-model.trim="invoiceForm.taxpayerNumber" :maxlength="64" /></label><label><span>接收邮箱</span><t-input v-model.trim="invoiceForm.email" type="email" /></label><button class="primary-command" @click="saveInvoiceProfile">保存默认发票资料</button></div><div class="traffic-order-summary"><span>可申请订单</span><t-select v-model="invoiceOrderId" :options="invoiceOrderOptions" style="width: 100%" /><button class="primary-command" :disabled="!invoiceOrderId" @click="createInvoiceRequest">提交开具发票</button></div></div><div class="account-subsection-title"><h3>发票记录</h3><span>仅展示已提交的开具申请</span></div><div class="account-order-table"><div class="order-head"><span>订单号</span><span>金额</span><span>抬头</span><span>状态</span><span>申请时间</span></div><div v-for="request in invoiceRequests" :key="request.id"><span>{{ request.orderId }}</span><strong>{{ money(request.amount) }}</strong><span>{{ request.title }}</span><em :class="{ processing: request.status === 'pending' }">{{ invoiceStatusName(request.status) }}</em><span>{{ fmtTime(request.requestedAt) }}</span></div></div><div v-if="!invoiceRequests.length" class="table-empty">暂无发票申请</div></div> <div class="business-panel account-panel" :class="{ active: tab === 'invoice' }" style="padding:18px"><div class="account-section-heading"><h2>发票资料与申请</h2><span>仅对已人工确认的流量订单开放申请</span></div><div class="traffic-purchase-layout"><div class="traffic-amount-block"><label><span>发票抬头</span><t-input v-model.trim="invoiceForm.title" :maxlength="128" /></label><label><span>纳税人识别号</span><t-input v-model.trim="invoiceForm.taxpayerNumber" :maxlength="64" /></label><label><span>接收邮箱</span><t-input v-model.trim="invoiceForm.email" type="email" /></label><button class="primary-command" @click="saveInvoiceProfile">保存默认发票资料</button></div><div class="traffic-order-summary"><span>可申请订单</span><t-select v-model="invoiceOrderId" :options="invoiceOrderOptions" style="width: 100%" /><button class="primary-command" :disabled="!invoiceOrderId" @click="createInvoiceRequest">提交开具发票</button></div></div><div class="account-subsection-title"><h3>发票记录</h3><span>仅展示已提交的开具申请</span></div><div class="account-order-table"><div class="order-head"><span>订单号</span><span>金额</span><span>抬头</span><span>状态</span><span>申请时间</span></div><div v-for="request in invoiceRequests" :key="request.id"><span>{{ request.orderId }}</span><strong>{{ money(request.amount) }}</strong><span>{{ request.title }}</span><em :class="{ processing: request.status === 'pending' }">{{ invoiceStatusName(request.status) }}</em><span>{{ fmtTime(request.requestedAt) }}</span></div></div><div v-if="!invoiceRequests.length" class="table-empty">暂无发票申请</div></div>
</div> </div>
<div class="modal-backdrop" :class="{ open: editOpen }" @click.self="editOpen = false"><div class="recharge-modal"><h3>编辑账户资料</h3><label><span>账户名称</span><t-input v-model.trim="editForm.name" :maxlength="32" /></label><label><span>邮箱</span><t-input v-model.trim="editForm.email" type="email" /></label><div class="recharge-modal-footer"><button class="cancel" @click="editOpen = false">取消</button><button class="confirm" :disabled="saving" @click="saveProfile">{{ saving ? '保存中' : '保存' }}</button></div></div></div>
<div class="modal-backdrop" :class="{ open: passwordOpen }" @click.self="passwordOpen = false"><div class="recharge-modal"><h3>修改密码</h3><label><span>当前密码</span><t-input v-model="passwordForm.oldPassword" type="password" /></label><label><span>新密码</span><t-input v-model="passwordForm.newPassword" type="password" /></label><div class="recharge-modal-footer"><button class="cancel" @click="passwordOpen = false">取消</button><button class="confirm" @click="changePassword">确认修改</button></div></div></div>
<t-dialog
v-model:visible="editOpen"
header="编辑账户资料"
width="440px"
dialog-class-name="recharge-modal"
placement="center"
>
<label><span>账户名称</span><t-input v-model.trim="editForm.name" :maxlength="32" /></label>
<label><span>邮箱</span><t-input v-model.trim="editForm.email" type="email" /></label>
<template #footer>
<div class="recharge-modal-footer">
<button class="cancel" @click="editOpen = false">取消</button>
<button class="confirm" :disabled="saving" @click="saveProfile">{{ saving ? '保存中' : '保存' }}</button>
</div>
</template>
</t-dialog>
<t-dialog
v-model:visible="passwordOpen"
header="修改密码"
width="440px"
dialog-class-name="recharge-modal"
placement="center"
>
<label><span>当前密码</span><t-input v-model="passwordForm.oldPassword" type="password" /></label>
<label><span>新密码</span><t-input v-model="passwordForm.newPassword" type="password" /></label>
<template #footer>
<div class="recharge-modal-footer">
<button class="cancel" @click="passwordOpen = false">取消</button>
<button class="confirm" @click="changePassword">确认修改</button>
</div>
</template>
</t-dialog>
</section> </section>
</template> </template>
@ -206,8 +236,7 @@ onMounted(load)
} }
.traffic-amount-block :deep(.t-input), .traffic-amount-block :deep(.t-input),
.traffic-amount-block :deep(.t-select), .traffic-amount-block :deep(.t-select),
.traffic-order-summary :deep(.t-select),
.recharge-modal :deep(.t-input) {
.traffic-order-summary :deep(.t-select) {
width: 100%; width: 100%;
} }
.traffic-amount-block > label { .traffic-amount-block > label {
@ -217,6 +246,13 @@ onMounted(load)
.traffic-order-summary :deep(.t-select) { .traffic-order-summary :deep(.t-select) {
margin: 10px 0 14px; margin: 10px 0 14px;
} }
</style>
<style>
.recharge-modal .t-input {
width: 100%;
}
.recharge-modal.t-dialog label,
.recharge-modal label { .recharge-modal label {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -225,4 +261,7 @@ onMounted(load)
color: #4e5f6b; color: #4e5f6b;
font-size: 12px; font-size: 12px;
} }
.recharge-modal.t-dialog .recharge-modal-footer {
margin-top: 0;
}
</style> </style>

36
src/views/FirmwaresView/FirmwaresView.vue

@ -74,13 +74,14 @@
</div> </div>
</div> </div>
<!-- Add / edit dialog -->
<div class="modal-backdrop" :class="{ open: modalVisible }">
<div class="modal add-dock-dialog" role="dialog" aria-modal="true">
<header>
<div><span>固件版本</span><h3>{{ editingId ? '编辑固件' : '新增固件' }}</h3></div>
<button class="icon-button" @click="modalVisible = false"><svg><use href="#i-x" /></svg></button>
</header>
<t-dialog
v-model:visible="modalVisible"
:header="editingId ? '编辑固件' : '新增固件'"
width="520px"
dialog-class-name="add-dock-dialog"
:close-on-overlay-click="false"
placement="center"
>
<form novalidate @submit.prevent="submit"> <form novalidate @submit.prevent="submit">
<div class="form-row"> <div class="form-row">
<label><span>版本号<b>*</b></span><t-input v-model="form.version" placeholder="例如 1.3.0" :disabled="!!editingId" /></label> <label><span>版本号<b>*</b></span><t-input v-model="form.version" placeholder="例如 1.3.0" :disabled="!!editingId" /></label>
@ -102,13 +103,12 @@
</label> </label>
</div> </div>
<div class="form-error">{{ formError }}</div> <div class="form-error">{{ formError }}</div>
<footer>
<button class="plain-command" type="button" @click="modalVisible = false">取消</button>
<button class="primary-command" type="submit">{{ editingId ? '保存' : '确认新增' }}</button>
</footer>
</form> </form>
</div>
</div>
<template #footer>
<button class="plain-command" type="button" @click="modalVisible = false">取消</button>
<button class="primary-command" type="button" @click="submit">{{ editingId ? '保存' : '确认新增' }}</button>
</template>
</t-dialog>
</section> </section>
</template> </template>
@ -292,9 +292,13 @@ onMounted(load)
.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),
.add-dock-dialog :deep(.t-select) {
</style>
<style>
.add-dock-dialog .t-input,
.add-dock-dialog .t-input-number,
.add-dock-dialog .t-select {
width: 100%; width: 100%;
} }
</style> </style>

57
src/views/TasksView/TasksView.vue

@ -168,12 +168,13 @@
</div> </div>
</div> </div>
<div class="modal-backdrop" :class="{ open: createTaskOpen }" @click.self="createTaskOpen = false">
<div class="modal add-dock-dialog task-dialog" role="dialog" aria-modal="true" aria-label="新建任务">
<header>
<div><span>任务管理</span><h3>新建任务</h3></div>
<button class="icon-button" type="button" @click="createTaskOpen = false"><svg><use href="#i-x" /></svg></button>
</header>
<t-dialog
v-model:visible="createTaskOpen"
header="新建任务"
width="520px"
dialog-class-name="add-dock-dialog task-dialog"
placement="center"
>
<form novalidate @submit.prevent="submitCreateTask"> <form novalidate @submit.prevent="submitCreateTask">
<label><span>任务名称<b>*</b></span><t-input v-model="taskForm.name" :maxlength="40" placeholder="例如:园区西侧道路巡检" /></label> <label><span>任务名称<b>*</b></span><t-input v-model="taskForm.name" :maxlength="40" placeholder="例如:园区西侧道路巡检" /></label>
<div class="form-row"> <div class="form-row">
@ -203,27 +204,32 @@
<label class="task-video-option"><span><strong>原始视频录制</strong><small>任务结束后自动上传原始文件</small></span><t-switch v-model="taskForm.rawRecordingEnabled" /></label> <label class="task-video-option"><span><strong>原始视频录制</strong><small>任务结束后自动上传原始文件</small></span><t-switch v-model="taskForm.rawRecordingEnabled" /></label>
</div> </div>
<div class="form-error">{{ taskFormError }}</div> <div class="form-error">{{ taskFormError }}</div>
<footer>
<button class="plain-command" type="button" @click="createTaskOpen = false">取消</button>
<button class="primary-command" type="submit" :disabled="creatingTask">{{ creatingTask ? '创建中…' : '创建任务' }}</button>
</footer>
</form> </form>
</div>
</div>
<div class="modal-backdrop" :class="{ open: waypointEditorOpen }" @click.self="closeWaypointEditor">
<div class="modal add-dock-dialog waypoint-dialog" role="dialog" aria-modal="true" aria-label="编辑航点">
<header><div><span>航线编辑</span><h3>编辑航点 {{ editingWaypointIndex + 1 }}</h3></div><button class="icon-button" type="button" @click="closeWaypointEditor"><svg><use href="#i-x" /></svg></button></header>
<template #footer>
<button class="plain-command" type="button" @click="createTaskOpen = false">取消</button>
<button class="primary-command" type="button" :disabled="creatingTask" @click="submitCreateTask">{{ creatingTask ? '创建中' : '创建任务' }}</button>
</template>
</t-dialog>
<t-dialog
v-model:visible="waypointEditorOpen"
:header="`编辑航点 ${editingWaypointIndex + 1}`"
width="540px"
dialog-class-name="add-dock-dialog waypoint-dialog"
placement="center"
>
<form novalidate @submit.prevent="saveWaypoint"> <form novalidate @submit.prevent="saveWaypoint">
<div class="waypoint-id-row"><span>航点 ID</span><strong>{{ editingWaypointIndex + 1 }}</strong></div> <div class="waypoint-id-row"><span>航点 ID</span><strong>{{ editingWaypointIndex + 1 }}</strong></div>
<div class="form-row"><label><span>经度 <b>*</b></span><t-input-number v-model="waypointForm.longitude" theme="normal" :min="-180" :max="180" :step="0.000001" style="width: 100%" /></label><label><span>纬度 <b>*</b></span><t-input-number v-model="waypointForm.latitude" theme="normal" :min="-90" :max="90" :step="0.000001" style="width: 100%" /></label></div> <div class="form-row"><label><span>经度 <b>*</b></span><t-input-number v-model="waypointForm.longitude" theme="normal" :min="-180" :max="180" :step="0.000001" style="width: 100%" /></label><label><span>纬度 <b>*</b></span><t-input-number v-model="waypointForm.latitude" theme="normal" :min="-90" :max="90" :step="0.000001" style="width: 100%" /></label></div>
<div class="form-row"><label><span>高度 <b>*</b></span><div class="number-input"><t-input-number v-model="waypointForm.altitude" theme="normal" :min="20" :max="120" style="width: 100%" /><em>m</em></div></label><label><span>速度 <b>*</b></span><div class="number-input"><t-input-number v-model="waypointForm.speed" theme="normal" :min="1" :max="20" :step="0.1" style="width: 100%" /><em>m/s</em></div></label></div> <div class="form-row"><label><span>高度 <b>*</b></span><div class="number-input"><t-input-number v-model="waypointForm.altitude" theme="normal" :min="20" :max="120" style="width: 100%" /><em>m</em></div></label><label><span>速度 <b>*</b></span><div class="number-input"><t-input-number v-model="waypointForm.speed" theme="normal" :min="1" :max="20" :step="0.1" style="width: 100%" /><em>m/s</em></div></label></div>
<label><span>转弯方式</span><div class="mode-segment waypoint-turn-segment"><button type="button" :class="{ active: waypointForm.turnMode === 'auto' }" @click="waypointForm.turnMode = 'auto'">自动转弯</button><button type="button" :class="{ active: waypointForm.turnMode === 'stop' }" @click="waypointForm.turnMode = 'stop'">定点转弯</button></div></label> <label><span>转弯方式</span><div class="mode-segment waypoint-turn-segment"><button type="button" :class="{ active: waypointForm.turnMode === 'auto' }" @click="waypointForm.turnMode = 'auto'">自动转弯</button><button type="button" :class="{ active: waypointForm.turnMode === 'stop' }" @click="waypointForm.turnMode = 'stop'">定点转弯</button></div></label>
<div class="route-form-error">{{ waypointFormError }}</div> <div class="route-form-error">{{ waypointFormError }}</div>
<footer><button class="plain-command" type="button" @click="closeWaypointEditor">取消</button><button class="primary-command" type="submit">保存航点</button></footer>
</form> </form>
</div>
</div>
<template #footer>
<button class="plain-command" type="button" @click="closeWaypointEditor">取消</button>
<button class="primary-command" type="button" @click="saveWaypoint">保存航点</button>
</template>
</t-dialog>
</section> </section>
</template> </template>
@ -978,10 +984,6 @@ async function downloadRawVideo(record) {
.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),
.add-dock-dialog :deep(.t-select),
.add-dock-dialog :deep(.t-time-picker),
.route-config-panel :deep(.t-input), .route-config-panel :deep(.t-input),
.route-config-panel :deep(.t-input-number) { .route-config-panel :deep(.t-input-number) {
width: 100%; width: 100%;
@ -996,3 +998,12 @@ async function downloadRawVideo(record) {
justify-self: end; justify-self: end;
} }
</style> </style>
<style>
.add-dock-dialog .t-input,
.add-dock-dialog .t-input-number,
.add-dock-dialog .t-select,
.add-dock-dialog .t-time-picker {
width: 100%;
}
</style>

Loading…
Cancel
Save