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

feat: 监控页搜索勾选与状态弹窗切换到 TDesign

main
xiaosi 3 weeks ago
parent
812e7e3f23
commit
6c5c830bc3
2 changed files with 131 additions and 102 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      src/styles/prototype.css
  2. 76
      src/views/MonitorView/MonitorView.vue

9
src/styles/prototype.css
View File

@ -122,10 +122,9 @@ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width:
.device-card:hover { border-color: #aab9c8; transform: translateY(-1px); }
.device-card.active { border-color: #5a93d4; background: #f4f8fd; box-shadow: inset 3px 0 var(--blue); }
.device-card.multi-selected { border-color: var(--blue); box-shadow: inset 3px 0 var(--blue); background: #f4f8fd; }
.device-select-checkbox { position: absolute; z-index: 2; top: 10px; left: 8px; width: 16px; height: 16px; display: block; cursor: pointer; }
.device-select-checkbox input { position: absolute; opacity: 0; }
.device-select-checkbox > span { width: 15px; height: 15px; display: block; border: 1px solid #b8c7d2; border-radius: 3px; background: #fff; }
.device-select-checkbox input:checked + span { border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 3px #fff; }
.device-select-checkbox { position: absolute; z-index: 2; top: 10px; left: 8px; width: auto; height: auto; display: flex; align-items: center; cursor: pointer; }
.device-select-checkbox .t-checkbox { margin: 0; }
.device-select-checkbox .t-checkbox__label { display: none; }
.device-card-main { width: 100%; min-height: 68px; padding: 11px 11px 11px 34px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; color: inherit; background: transparent; text-align: left; }
.device-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.device-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
@ -485,6 +484,8 @@ svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width:
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }
.modal-actions button { height: 38px; border-radius: 5px; font-size: 13px; }.modal-actions .cancel { background: #fff; border: 1px solid var(--line); }.modal-actions .confirm { color: #fff; background: var(--blue); }
.dock-status-dialog { width: min(700px, calc(100vw - 32px)); padding: 0; overflow: hidden; text-align: left; }
.dock-status-dialog .t-dialog__header { min-height: 58px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.dock-status-dialog .t-dialog__body { padding: 0; }
.dock-status-header { min-height: 58px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); cursor: grab; }
.dock-status-header:active { cursor: grabbing; }
.dock-status-header > div { display: flex; flex-direction: column; gap: 4px; }.dock-status-header span { color: var(--muted); font-size: 10px; }.dock-status-header h3 { margin: 0; font-size: 18px; }

76
src/views/MonitorView/MonitorView.vue
View File

@ -6,10 +6,11 @@
<button class="icon-button" title="收起面板" @click="clearSelection"><svg><use href="#i-x" /></svg></button>
</div>
<label class="device-search">
<svg><use href="#i-search" /></svg>
<input v-model="search" type="text" placeholder="搜索机巢或无人机" />
</label>
<div class="device-search">
<t-input v-model="search" clearable placeholder="搜索机巢或无人机">
<template #prefix-icon><t-icon name="search" /></template>
</t-input>
</div>
<div class="filter-row">
<button class="filter" :class="{ active: filter === 'all' }" @click="filter = 'all'">全部 <b>{{ filterCounts.all }}</b></button>
@ -25,10 +26,12 @@
<div class="device-list">
<template v-for="dock in filteredDocks" :key="dock.id">
<article class="device-card" :class="{ active: isDockCardActive(dock), 'multi-selected': selectedDockIds.has(dock.id) }">
<label class="device-select-checkbox" :title="`选择${dock.name}`" @click.stop>
<input type="checkbox" :checked="selectedDockIds.has(dock.id)" @change="toggleDockSelection(dock.id)" />
<span></span>
</label>
<div class="device-select-checkbox" :title="`选择${dock.name}`" @click.stop>
<t-checkbox
:checked="selectedDockIds.has(dock.id)"
@change="(checked) => setDockSelection(dock.id, checked)"
/>
</div>
<button class="device-card-main" @click="select(dock.id)">
<span class="dock-glyph" :class="{ alarm: dock.statusClass === 'alarm', offline: dock.statusClass === 'offline' }">
<svg><use href="#i-home" /></svg>
@ -301,17 +304,14 @@
</section>
<div class="modal-backdrop" :class="{ open: dockStatusOpen }" :aria-hidden="!dockStatusOpen" @click.self="closeDockStatus">
<div class="modal dock-status-dialog" role="dialog" aria-modal="true" aria-labelledby="dockStatusTitle">
<header class="dock-status-header">
<div>
<span>机巢运行状态</span>
<h3 id="dockStatusTitle">{{ dockStatusTitle }}</h3>
</div>
<button class="icon-button" type="button" title="关闭详情" @click="closeDockStatus">
<svg><use href="#i-x" /></svg>
</button>
</header>
<t-dialog
v-model:visible="dockStatusOpen"
:header="dockStatusTitle"
width="700px"
:footer="false"
dialog-class-name="dock-status-dialog"
@close="closeDockStatus"
>
<div class="dock-status-body">
<div class="dock-status-grid">
<div>
@ -391,8 +391,7 @@
</div>
</section>
</div>
</div>
</div>
</t-dialog>
</template>
<script setup>
@ -1357,9 +1356,9 @@ function clearDockSelection() {
selectedDockIds.clear()
}
function toggleDockSelection(id) {
if (selectedDockIds.has(id)) selectedDockIds.delete(id)
else selectedDockIds.add(id)
function setDockSelection(id, checked) {
if (checked) selectedDockIds.add(id)
else selectedDockIds.delete(id)
}
function selectAllDocks() {
@ -1573,3 +1572,32 @@ async function runCommand(title, desc) {
}
}
</script>
<style scoped>
.device-search {
height: auto;
margin-top: 16px;
padding: 0;
border: 0;
background: transparent;
}
.device-search :deep(.t-input) {
width: 100%;
}
.device-select-checkbox {
width: auto;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
.device-select-checkbox :deep(.t-checkbox) {
margin: 0;
}
.device-select-checkbox :deep(.t-checkbox__input) {
margin: 0;
}
.dock-status-body {
padding: 13px 18px 15px;
}
</style>

Write Preview
Loading…
Cancel
Save