diff options
Diffstat (limited to 'ATRI/plugins/manege/atri-manege/src')
-rw-r--r-- | ATRI/plugins/manege/atri-manege/src/App.vue | 104 | ||||
-rw-r--r-- | ATRI/plugins/manege/atri-manege/src/assets/.gitkeep | 0 | ||||
-rw-r--r-- | ATRI/plugins/manege/atri-manege/src/components/HelloWorld.vue | 170 | ||||
-rw-r--r-- | ATRI/plugins/manege/atri-manege/src/main.js | 12 | ||||
-rw-r--r-- | ATRI/plugins/manege/atri-manege/src/plugins/vuetify.js | 7 | ||||
-rw-r--r-- | ATRI/plugins/manege/atri-manege/src/router/index.js | 29 | ||||
-rw-r--r-- | ATRI/plugins/manege/atri-manege/src/views/About.vue | 5 | ||||
-rw-r--r-- | ATRI/plugins/manege/atri-manege/src/views/Home.vue | 15 |
8 files changed, 342 insertions, 0 deletions
diff --git a/ATRI/plugins/manege/atri-manege/src/App.vue b/ATRI/plugins/manege/atri-manege/src/App.vue new file mode 100644 index 0000000..d04b4f2 --- /dev/null +++ b/ATRI/plugins/manege/atri-manege/src/App.vue @@ -0,0 +1,104 @@ +<template> + <v-app> + <v-navigation-drawer app v-model="drawer" class="na-d-0"> + <v-list + nav + dense + > + <v-list-item-group active-class="nattier-blue--text text--accent-4"> + <v-list-item> + <v-list-item-icon> + <v-icon>mdi-home</v-icon> + </v-list-item-icon> + <v-list-item-title>主页 | Home</v-list-item-title> + </v-list-item> + + <v-list-item> + <v-list-item-icon> + <v-icon>mdi-wrench</v-icon> + </v-list-item-icon> + <v-list-item-title>控制台 | Control</v-list-item-title> + </v-list-item> + + <v-list-item> + <v-list-item-icon> + <v-icon>mdi-database</v-icon> + </v-list-item-icon> + <v-list-item-title>数据 | Data</v-list-item-title> + </v-list-item> + + <v-list-item> + <v-list-item-icon> + <v-icon>mdi-comment-processing</v-icon> + </v-list-item-icon> + <v-list-item-title>聊天 | Chat</v-list-item-title> + </v-list-item> + </v-list-item-group> + </v-list> + </v-navigation-drawer> + + <v-app-bar app color="white" flat> + <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon> + + <v-toolbar-title>ATRI Console</v-toolbar-title> + + <v-spacer></v-spacer> + + <v-btn href="https://jq.qq.com/?_wv=1027&k=iKLJzM1u" target="_blank" text> + <span class="mr-2">Discuss</span> + <v-icon small>mdi-qqchat</v-icon> + </v-btn> + + <v-btn href="https://github.com/Kyomotoi/ATRI" target="_blank" text> + <span class="mr-2">GitHub</span> + <v-icon small>mdi-link-variant</v-icon> + </v-btn> + </v-app-bar> + + <!-- 根据应用组件来调整你的内容 --> + <v-main> + + <!-- 给应用提供合适的间距 --> + <v-container fluid> + + <!-- 如果使用 vue-router --> + <router-view></router-view> + </v-container> + </v-main> + + <v-footer app> + <v-divider></v-divider> + <v-container fluid> + <v-row align="center" justify="center"> + <v-col class="text-center" cols="auto"> + <span> <v-icon>mdi-copyright</v-icon> Yours <strong>Kyomotoi</strong> </span> + </v-col> + <v-col class="text-center" cols="auto"> + <span> <v-icon>mdi-github</v-icon> <strong>ATRI</strong> </span> + </v-col> + </v-row> + </v-container> + </v-footer> + </v-app> +</template> + +<script> + +export default { + name: 'App', + + data: () => ({ + drawer: true, + }), +}; +</script> + +<style> +.text-center.a:visited { + color: aliceblue; +} + +.na-d-0 { + background-image: url("https://i.loli.net/2021/07/19/WlFanrZHRQxb5Ay.png"); +} +</style>
\ No newline at end of file diff --git a/ATRI/plugins/manege/atri-manege/src/assets/.gitkeep b/ATRI/plugins/manege/atri-manege/src/assets/.gitkeep new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/ATRI/plugins/manege/atri-manege/src/assets/.gitkeep diff --git a/ATRI/plugins/manege/atri-manege/src/components/HelloWorld.vue b/ATRI/plugins/manege/atri-manege/src/components/HelloWorld.vue new file mode 100644 index 0000000..0ff52c0 --- /dev/null +++ b/ATRI/plugins/manege/atri-manege/src/components/HelloWorld.vue @@ -0,0 +1,170 @@ +<template> + <v-app> + <!-- Running 将由 Fastpi控制 + 正常:Running。非正常(刷新即丢失页面)Error。 + --> + <h1 class="h1-index">ATRI is Running</h1> + + <v-divider></v-divider> + + <v-col> + <h3 class="h3-index">主体状态 | Status</h3> + </v-col> + <v-container> + <v-col> + <v-row> + <v-card height="170" width="400" class="ma-1"> + <!--同上: + 正常:Normal operation。断开:Waiting for connection--> + <v-card-title>WS状态 | Websocket Status</v-card-title> + <div class="text-center"> + <v-chip + class="ma-2" + color="green" + text-color="white" + > + Normal operation + </v-chip> + </div> + </v-card> + + <v-card height="170" width="400" class="ma-1"> + <v-card-title>自身状态 | Self Status</v-card-title> + <div class="text-center"> + <v-chip + class="ma-2" + color="green" + text-color="white" + > + Normal operation + </v-chip> + </div> + </v-card> + </v-row> + </v-col> + </v-container> + + <v-divider></v-divider> + + <v-col> + <h3 class="h3-index">记录仪 | Dashboard</h3> + <div id="container" class="test-box"></div> + </v-col> + </v-app> +</template> + +<script> +import * as echarts from 'echarts' + +export default { + mounted() { + let myChart = echarts.init(document.getElementById("container")); + let option = { + title: { + subtext: '数据统计间隔:1分钟', + left: '10' + }, + legend: { + data: ['接受信息', '发送信息', '服务调用速率', '服务调用失败速率'] + }, + color: ["#32c1e5", "#e5bb32", "#77e532", "#e5323e"], + tooltip: { + trigger: 'axis' + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + axisPointer: { + show: true, + }, + dataZoom: [ + { + type: 'slider', + show: true, + xAxisIndex: [0] + }, + { + type: 'slider', + show: true, + yAxisIndex: [0] + }, + { + type: 'inside', + xAxisIndex: [0] + }, + { + type: 'inside', + yAxisIndex: [0] + } + ], + toolbox: { + feature: { + dataZoom: { + yAxisIndex: false, + xAxisIndex: false + }, + restore: {}, + saveAsImage: {} + } + }, + xAxis: [ + { + type: 'category', + boundaryGap: false, + axisLine: {onZero: false}, + data: ["7-20 20:00", "7-20 20:01", "7-20 20:02", "7-20 20:03", "7-20 20:04", "7-20 20:05", "7-20 20:06", "7-20 20:07"] + }, + ], + yAxis: { + type: 'value' + }, + series: [ + { + name: '接受信息', + type: 'line', + data: [293, 394, 590, 493, 592, 489, 519, 528] + }, + { + name: '发送信息', + type: 'line', + data: [220, 182, 191, 234, 290, 330, 310, 230] + }, + { + name: '服务调用速率', + type: 'line', + data: [150, 232, 201, 154, 190, 330, 209, 291] + }, + { + name: '服务调用失败速率', + type: 'line', + data: [12, 3, 42 ,3, 32, 4, 42, 20] + } + ] + }; + + myChart.setOption(option); + window.onresize = myChart.resize; + } +} +</script> + +<style> +.h1-index { + font-size: 240%; + color: #8f8f8f; +} + +.h3-index { + color: #8f8f8f; +} + +.test-box { + width: 100%; + height: 600px; + background-color: white; +} + +</style> diff --git a/ATRI/plugins/manege/atri-manege/src/main.js b/ATRI/plugins/manege/atri-manege/src/main.js new file mode 100644 index 0000000..917702d --- /dev/null +++ b/ATRI/plugins/manege/atri-manege/src/main.js @@ -0,0 +1,12 @@ +import Vue from 'vue' +import App from './App.vue' +import router from './router' +import vuetify from './plugins/vuetify' + +Vue.config.productionTip = false + +new Vue({ + router, + vuetify, + render: h => h(App) +}).$mount('#app') diff --git a/ATRI/plugins/manege/atri-manege/src/plugins/vuetify.js b/ATRI/plugins/manege/atri-manege/src/plugins/vuetify.js new file mode 100644 index 0000000..5bdec19 --- /dev/null +++ b/ATRI/plugins/manege/atri-manege/src/plugins/vuetify.js @@ -0,0 +1,7 @@ +import Vue from 'vue'; +import Vuetify from 'vuetify/lib/framework'; + +Vue.use(Vuetify); + +export default new Vuetify({ +}); diff --git a/ATRI/plugins/manege/atri-manege/src/router/index.js b/ATRI/plugins/manege/atri-manege/src/router/index.js new file mode 100644 index 0000000..d36779e --- /dev/null +++ b/ATRI/plugins/manege/atri-manege/src/router/index.js @@ -0,0 +1,29 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import Home from '../views/Home.vue' + +Vue.use(VueRouter) + +const routes = [ + { + path: '/', + name: 'Home', + component: Home + }, + { + path: '/about', + name: 'About', + // route level code-splitting + // this generates a separate chunk (about.[hash].js) for this route + // which is lazy-loaded when the route is visited. + component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') + } +] + +const router = new VueRouter({ + mode: 'history', + base: process.env.BASE_URL, + routes +}) + +export default router diff --git a/ATRI/plugins/manege/atri-manege/src/views/About.vue b/ATRI/plugins/manege/atri-manege/src/views/About.vue new file mode 100644 index 0000000..3fa2807 --- /dev/null +++ b/ATRI/plugins/manege/atri-manege/src/views/About.vue @@ -0,0 +1,5 @@ +<template> + <div class="about"> + <h1>This is an about page</h1> + </div> +</template> diff --git a/ATRI/plugins/manege/atri-manege/src/views/Home.vue b/ATRI/plugins/manege/atri-manege/src/views/Home.vue new file mode 100644 index 0000000..636303a --- /dev/null +++ b/ATRI/plugins/manege/atri-manege/src/views/Home.vue @@ -0,0 +1,15 @@ +<template> + <hello-world /> +</template> + +<script> + import HelloWorld from '../components/HelloWorld' + + export default { + name: 'Home', + + components: { + HelloWorld, + }, + } +</script> |