界面基本雏形
This commit is contained in:
parent
3408150f84
commit
dfd32690b3
2278
package-lock.json
generated
Normal file
2278
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
30
src/App.vue
30
src/App.vue
@ -51,22 +51,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- 报文界面 -->
|
<!-- 报文界面 -->
|
||||||
<div v-if="currentView === 'pageCANMsg'" >
|
<div v-if="currentView === 'pageCANMsg'" >
|
||||||
<v-card>{{ currentView }}</v-card>
|
<CANMsgPage />
|
||||||
<v-data-table
|
|
||||||
:headers="headers"
|
|
||||||
:items="canMessages"
|
|
||||||
item-key="id"
|
|
||||||
class="elevation-1"
|
|
||||||
dense
|
|
||||||
hide-default-footer
|
|
||||||
>
|
|
||||||
<template v-slot:[`item.id`]="{ item }">
|
|
||||||
0x{{ item.id.toString(16).toUpperCase().padStart(3, '0') }}
|
|
||||||
</template>
|
|
||||||
<template v-slot:[`item.data`]="{ item }">
|
|
||||||
{{ item.data.map(byte => `${byte.toString(16).padStart(2, '0').toUpperCase()}`).join(' ') }}
|
|
||||||
</template>
|
|
||||||
</v-data-table>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 诊断界面 -->
|
<!-- 诊断界面 -->
|
||||||
<div v-if="currentView === 'pageDiag'" >
|
<div v-if="currentView === 'pageDiag'" >
|
||||||
@ -85,6 +70,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, provide } from 'vue';
|
import { ref, provide } from 'vue';
|
||||||
import LogPage from './components/LogPage.vue';
|
import LogPage from './components/LogPage.vue';
|
||||||
|
import CANMsgPage from './components/CANMsgPage.vue';
|
||||||
|
|
||||||
const logRef = ref(null);
|
const logRef = ref(null);
|
||||||
provide('logRef', logRef);
|
provide('logRef', logRef);
|
||||||
@ -101,17 +87,7 @@ var menuItems= [
|
|||||||
{ title: "诊断", icon: "mdi-stethoscope", view: "pageDiag" },
|
{ title: "诊断", icon: "mdi-stethoscope", view: "pageDiag" },
|
||||||
{ title: "log", icon: "mdi-math-log", view: "pageLog" },
|
{ title: "log", icon: "mdi-math-log", view: "pageLog" },
|
||||||
];
|
];
|
||||||
var canMessages= [
|
|
||||||
{ id: 0x123, timestamp: 1622548800, dlc: 8, data: [0x12, 0x34, 0x56, 0x78, 0x9A, 0xBC, 0xDE, 0xF0] },
|
|
||||||
{ id: 0x456, timestamp: 1622548801, dlc: 4, data: [0x11, 0x22, 0x33, 0x44] },
|
|
||||||
// 更多 CAN 报文数据...
|
|
||||||
];
|
|
||||||
var headers= [
|
|
||||||
{ title: 'ID', key: 'id' },
|
|
||||||
//{ title: 'Timestamp', key: 'timestamp' },
|
|
||||||
{ title: 'Len', key: 'dlc',sortable: false},
|
|
||||||
{ title: 'Data', key: 'data',sortable: false},
|
|
||||||
];
|
|
||||||
function quit() {
|
function quit() {
|
||||||
aardio.close();
|
aardio.close();
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,79 +0,0 @@
|
|||||||
<template>
|
|
||||||
<v-footer height="40" app>
|
|
||||||
<a
|
|
||||||
v-for="item in items"
|
|
||||||
:key="item.title"
|
|
||||||
:href="item.href"
|
|
||||||
:title="item.title"
|
|
||||||
class="d-inline-block mx-2 social-link"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<v-icon
|
|
||||||
:icon="item.icon"
|
|
||||||
:size="item.icon === '$vuetify' ? 24 : 16"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="text-caption text-disabled"
|
|
||||||
style="position: absolute; right: 16px;"
|
|
||||||
>
|
|
||||||
© 2016-{{ (new Date()).getFullYear() }} <span class="d-none d-sm-inline-block">Vuetify, LLC</span>
|
|
||||||
—
|
|
||||||
<a
|
|
||||||
class="text-decoration-none on-surface"
|
|
||||||
href="https://vuetifyjs.com/about/licensing/"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
MIT License
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</v-footer>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
const items = [
|
|
||||||
{
|
|
||||||
title: 'Vuetify Documentation',
|
|
||||||
icon: `$vuetify`,
|
|
||||||
href: 'https://vuetifyjs.com/',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Vuetify Support',
|
|
||||||
icon: 'mdi-shield-star-outline',
|
|
||||||
href: 'https://support.vuetifyjs.com/',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Vuetify X',
|
|
||||||
icon: ['M2.04875 3.00002L9.77052 13.3248L1.99998 21.7192H3.74882L10.5519 14.3697L16.0486 21.7192H22L13.8437 10.8137L21.0765 3.00002H19.3277L13.0624 9.76874L8.0001 3.00002H2.04875ZM4.62054 4.28821H7.35461L19.4278 20.4308H16.6937L4.62054 4.28821Z'],
|
|
||||||
href: 'https://x.com/vuetifyjs',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Vuetify GitHub',
|
|
||||||
icon: `mdi-github`,
|
|
||||||
href: 'https://github.com/vuetifyjs/vuetify',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Vuetify Discord',
|
|
||||||
icon: ['M22,24L16.75,19L17.38,21H4.5A2.5,2.5 0 0,1 2,18.5V3.5A2.5,2.5 0 0,1 4.5,1H19.5A2.5,2.5 0 0,1 22,3.5V24M12,6.8C9.32,6.8 7.44,7.95 7.44,7.95C8.47,7.03 10.27,6.5 10.27,6.5L10.1,6.33C8.41,6.36 6.88,7.53 6.88,7.53C5.16,11.12 5.27,14.22 5.27,14.22C6.67,16.03 8.75,15.9 8.75,15.9L9.46,15C8.21,14.73 7.42,13.62 7.42,13.62C7.42,13.62 9.3,14.9 12,14.9C14.7,14.9 16.58,13.62 16.58,13.62C16.58,13.62 15.79,14.73 14.54,15L15.25,15.9C15.25,15.9 17.33,16.03 18.73,14.22C18.73,14.22 18.84,11.12 17.12,7.53C17.12,7.53 15.59,6.36 13.9,6.33L13.73,6.5C13.73,6.5 15.53,7.03 16.56,7.95C16.56,7.95 14.68,6.8 12,6.8M9.93,10.59C10.58,10.59 11.11,11.16 11.1,11.86C11.1,12.55 10.58,13.13 9.93,13.13C9.29,13.13 8.77,12.55 8.77,11.86C8.77,11.16 9.28,10.59 9.93,10.59M14.1,10.59C14.75,10.59 15.27,11.16 15.27,11.86C15.27,12.55 14.75,13.13 14.1,13.13C13.46,13.13 12.94,12.55 12.94,11.86C12.94,11.16 13.45,10.59 14.1,10.59Z'],
|
|
||||||
href: 'https://community.vuetifyjs.com/',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Vuetify Reddit',
|
|
||||||
icon: `mdi-reddit`,
|
|
||||||
href: 'https://reddit.com/r/vuetifyjs',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="sass">
|
|
||||||
.social-link :deep(.v-icon)
|
|
||||||
color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity))
|
|
||||||
text-decoration: none
|
|
||||||
transition: .2s ease-in-out
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
color: rgba(25, 118, 210, 1)
|
|
||||||
</style>
|
|
||||||
34
src/components/CANMsgPage.vue
Normal file
34
src/components/CANMsgPage.vue
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<template>
|
||||||
|
<v-container>
|
||||||
|
<v-data-table
|
||||||
|
:headers="headers"
|
||||||
|
:items="canMessages"
|
||||||
|
item-key="id"
|
||||||
|
class="elevation-1"
|
||||||
|
dense
|
||||||
|
hide-default-footer
|
||||||
|
>
|
||||||
|
<template v-slot:[`item.id`]="{ item }">
|
||||||
|
0x{{ item.id.toString(16).toUpperCase().padStart(3, '0') }}
|
||||||
|
</template>
|
||||||
|
<template v-slot:[`item.data`]="{ item }">
|
||||||
|
{{ item.data.map(byte => `${byte.toString(16).padStart(2, '0').toUpperCase()}`).join(' ') }}
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</v-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const canMessages = ref([
|
||||||
|
{ id: 0x123, timestamp: 1622548800, dlc: 8, data: [0x12, 0x34, 0x56, 0x78, 0x9A, 0xBC, 0xDE, 0xF0] },
|
||||||
|
{ id: 0x456, timestamp: 1622548801, dlc: 4, data: [0x11, 0x22, 0x33, 0x44] },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const headers = ref([
|
||||||
|
{ title: 'ID', key: 'id' },
|
||||||
|
{ title: 'Len', key: 'dlc', sortable: false },
|
||||||
|
{ title: 'Data', key: 'data', sortable: false },
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
@ -1,157 +0,0 @@
|
|||||||
<template>
|
|
||||||
<v-container class="fill-height">
|
|
||||||
<v-responsive
|
|
||||||
class="align-centerfill-height mx-auto"
|
|
||||||
max-width="900"
|
|
||||||
>
|
|
||||||
<v-img
|
|
||||||
class="mb-4"
|
|
||||||
height="150"
|
|
||||||
src="@/assets/logo.png"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-center">
|
|
||||||
<div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
|
|
||||||
|
|
||||||
<h1 class="text-h2 font-weight-bold">Vuetify</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="py-4" />
|
|
||||||
|
|
||||||
<v-row>
|
|
||||||
<v-col cols="12">
|
|
||||||
<v-card
|
|
||||||
class="py-4"
|
|
||||||
color="surface-variant"
|
|
||||||
image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
|
|
||||||
prepend-icon="mdi-rocket-launch-outline"
|
|
||||||
rounded="lg"
|
|
||||||
variant="outlined"
|
|
||||||
>
|
|
||||||
<template #image>
|
|
||||||
<v-img position="top right" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #title>
|
|
||||||
<h2 class="text-h5 font-weight-bold">Get started</h2>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #subtitle>
|
|
||||||
<div class="text-subtitle-1">
|
|
||||||
Change this page by updating <v-kbd>{{ `<HelloWorld />` }}</v-kbd> in <v-kbd>components/HelloWorld.vue</v-kbd>.
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<v-overlay
|
|
||||||
opacity=".12"
|
|
||||||
scrim="primary"
|
|
||||||
contained
|
|
||||||
model-value
|
|
||||||
persistent
|
|
||||||
/>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="6">
|
|
||||||
<v-card
|
|
||||||
append-icon="mdi-open-in-new"
|
|
||||||
class="py-4"
|
|
||||||
color="surface-variant"
|
|
||||||
href="https://vuetifyjs.com/"
|
|
||||||
prepend-icon="mdi-text-box-outline"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
rounded="lg"
|
|
||||||
subtitle="Learn about all things Vuetify in our documentation."
|
|
||||||
target="_blank"
|
|
||||||
title="Documentation"
|
|
||||||
variant="text"
|
|
||||||
>
|
|
||||||
<v-overlay
|
|
||||||
opacity=".06"
|
|
||||||
scrim="primary"
|
|
||||||
contained
|
|
||||||
model-value
|
|
||||||
persistent
|
|
||||||
/>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="6">
|
|
||||||
<v-card
|
|
||||||
append-icon="mdi-open-in-new"
|
|
||||||
class="py-4"
|
|
||||||
color="surface-variant"
|
|
||||||
href="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
|
|
||||||
prepend-icon="mdi-star-circle-outline"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
rounded="lg"
|
|
||||||
subtitle="Explore available framework Features."
|
|
||||||
target="_blank"
|
|
||||||
title="Features"
|
|
||||||
variant="text"
|
|
||||||
>
|
|
||||||
<v-overlay
|
|
||||||
opacity=".06"
|
|
||||||
scrim="primary"
|
|
||||||
contained
|
|
||||||
model-value
|
|
||||||
persistent
|
|
||||||
/>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="6">
|
|
||||||
<v-card
|
|
||||||
append-icon="mdi-open-in-new"
|
|
||||||
class="py-4"
|
|
||||||
color="surface-variant"
|
|
||||||
href="https://vuetifyjs.com/components/all"
|
|
||||||
prepend-icon="mdi-widgets-outline"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
rounded="lg"
|
|
||||||
subtitle="Discover components in the API Explorer."
|
|
||||||
target="_blank"
|
|
||||||
title="Components"
|
|
||||||
variant="text"
|
|
||||||
>
|
|
||||||
<v-overlay
|
|
||||||
opacity=".06"
|
|
||||||
scrim="primary"
|
|
||||||
contained
|
|
||||||
model-value
|
|
||||||
persistent
|
|
||||||
/>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col cols="6">
|
|
||||||
<v-card
|
|
||||||
append-icon="mdi-open-in-new"
|
|
||||||
class="py-4"
|
|
||||||
color="surface-variant"
|
|
||||||
href="https://discord.vuetifyjs.com"
|
|
||||||
prepend-icon="mdi-account-group-outline"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
rounded="lg"
|
|
||||||
subtitle="Connect with Vuetify developers."
|
|
||||||
target="_blank"
|
|
||||||
title="Community"
|
|
||||||
variant="text"
|
|
||||||
>
|
|
||||||
<v-overlay
|
|
||||||
opacity=".06"
|
|
||||||
scrim="primary"
|
|
||||||
contained
|
|
||||||
model-value
|
|
||||||
persistent
|
|
||||||
/>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-responsive>
|
|
||||||
</v-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
//
|
|
||||||
</script>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user