From c485985d3be687d17168512de44ea7b744fea7cc Mon Sep 17 00:00:00 2001
From: Kyomotoi <kyomotoiowo@gmail.com>
Date: Tue, 20 Jul 2021 13:42:00 +0800
Subject: =?UTF-8?q?=E2=9C=A8=20=E6=96=B0=E5=A2=9E=E5=89=8D=E7=AB=AFdemo?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ATRI/plugins/manege/atri-manege/src/App.vue        | 104 +++++++++++++
 .../plugins/manege/atri-manege/src/assets/.gitkeep |   0
 .../atri-manege/src/components/HelloWorld.vue      | 170 +++++++++++++++++++++
 ATRI/plugins/manege/atri-manege/src/main.js        |  12 ++
 .../manege/atri-manege/src/plugins/vuetify.js      |   7 +
 .../plugins/manege/atri-manege/src/router/index.js |  29 ++++
 .../plugins/manege/atri-manege/src/views/About.vue |   5 +
 ATRI/plugins/manege/atri-manege/src/views/Home.vue |  15 ++
 8 files changed, 342 insertions(+)
 create mode 100644 ATRI/plugins/manege/atri-manege/src/App.vue
 create mode 100644 ATRI/plugins/manege/atri-manege/src/assets/.gitkeep
 create mode 100644 ATRI/plugins/manege/atri-manege/src/components/HelloWorld.vue
 create mode 100644 ATRI/plugins/manege/atri-manege/src/main.js
 create mode 100644 ATRI/plugins/manege/atri-manege/src/plugins/vuetify.js
 create mode 100644 ATRI/plugins/manege/atri-manege/src/router/index.js
 create mode 100644 ATRI/plugins/manege/atri-manege/src/views/About.vue
 create mode 100644 ATRI/plugins/manege/atri-manege/src/views/Home.vue

(limited to 'ATRI/plugins/manege/atri-manege/src')

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
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>
-- 
cgit v1.2.3