├── public
    ├── favicon.ico
    └── index.html
├── babel.config.js
├── src
    ├── components
    │   ├── content.vue
    │   ├── HelloWorld.vue
    │   ├── navbar.vue
    │   └── home.vue
    ├── router
    │   └── router.js
    ├── App.vue
    ├── assets
    │   └── css
    │   │   └── h7_web.css
    └── main.js
├── .gitignore
├── README.md
├── vue.config.js
├── package.json
└── docs
    └── api.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WKJay/ART-Pi-WEB/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }


--------------------------------------------------------------------------------
/src/components/content.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-view />
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 | 
 8 | }
 9 | </script>
10 | 
11 | <style>
12 | 
13 | </style>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | /webnet
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/router/router.js:
--------------------------------------------------------------------------------
 1 | import {createRouter,createWebHashHistory} from 'vue-router';
 2 | 
 3 | import homePage from '@/components/home'
 4 | 
 5 | const routes = [
 6 |     {path: "",redirect: "/home"},
 7 |     {path: "/home",component: homePage}
 8 | ]
 9 | 
10 | const router =createRouter({
11 |     history:createWebHashHistory(),
12 |     routes
13 | });
14 | 
15 | export default router;


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # h7-web
 2 | 
 3 | ## Project setup
 4 | ```
 5 | yarn install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | yarn serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | yarn build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | yarn lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <navBar/>
 3 |     <mainContent/>
 4 |    
 5 | </template>
 6 | <script>
 7 |   import navBar from "@/components/navbar"
 8 |   import mainContent from "@/components/content"
 9 |   export default {
10 |     components: {
11 |       navBar,
12 |       mainContent
13 |     },
14 |     data() {
15 |       return {
16 |         current: ['mail'],
17 |       };
18 |     },
19 |   };
20 | </script>
21 | 
22 | <style>
23 |  body{
24 |    background: #ebedef !important;
25 |  }
26 | </style>


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |    hello world
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'HelloWorld',
10 |   props: {
11 |     msg: String
12 |   }
13 | }
14 | </script>
15 | 
16 | <!-- Add "scoped" attribute to limit CSS to this component only -->
17 | <style scoped>
18 | h3 {
19 |   margin: 40px 0 0;
20 | }
21 | ul {
22 |   list-style-type: none;
23 |   padding: 0;
24 | }
25 | li {
26 |   display: inline-block;
27 |   margin: 0 10px;
28 | }
29 | a {
30 |   color: #42b983;
31 | }
32 | </style>
33 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const CompressionWebpackPlugin = require('compression-webpack-plugin')
 2 | module.exports = {
 3 |     //publicPath: "http://download.rt-thread.org/webnet/art-pi/factory/",
 4 |     configureWebpack: {
 5 |         devtool: 'source-map',
 6 |         plugins: [
 7 |             new CompressionWebpackPlugin({
 8 |                 // 正在匹配需要压缩的文件后缀
 9 |                 test: /\.(js|css|svg|woff|ttf|json|html)$/,
10 |                 // 大于10kb的会压缩
11 |                 threshold: 2048,
12 |                 // 其余配置查看compression-webpack-plugin
13 |             })
14 |         ]
15 |     },
16 |     // 配置less
17 |     css: {
18 |         loaderOptions: {
19 |             less: {
20 |                 javascriptEnabled: true,
21 |             }
22 |         }
23 |     },
24 |     devServer: {
25 |         //proxy: "http://192.168.1.101:80"
26 |         //proxy: "http://10.2.5.184:80"
27 |         proxy: "http://192.168.31.220:80"
28 |     }
29 | }


--------------------------------------------------------------------------------
/src/assets/css/h7_web.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * H7 WEB CUSTOM CSS
 3 |  * WKJAY
 4 |  *
 5 |  */
 6 | 
 7 | /*    Overwrite antd style    */
 8 | .ant-menu-dark,
 9 | .ant-menu-dark .ant-menu-sub {
10 |   background-color: #343a40;
11 |   box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, .25);
12 | }
13 | 
14 | .ant-card {
15 |   box-shadow: 0 1px 1px 0 rgba(60, 75, 100, .14), 0 2px 1px -1px rgba(60, 75, 100, .12), 0 1px 3px 0 rgba(60, 75, 100, .2);
16 | }
17 | 
18 | .ant-btn{
19 |   margin-bottom: 5px;
20 | }
21 | 
22 | /*    Overwrite antd css    */
23 | 
24 | 
25 | 
26 | /*    H7 style    */
27 | .h7-container {
28 |   margin-left: 2%;
29 |   margin-right: 2%;
30 |   margin-top: 20px;
31 | }
32 | 
33 | .h7-head-card {
34 |   height: 170px;
35 |   margin: auto;
36 |   margin-bottom: 15px;
37 | }
38 | 
39 | .h7-head-card>.ant-card-body>p>span {
40 |   float: right;
41 |   color: green;
42 | }
43 | 
44 | .h7-head-card-mini {
45 |   margin: auto;
46 |   margin-bottom: 15px;
47 | }
48 | 
49 | 
50 | 
51 | /*    H7 style    */


--------------------------------------------------------------------------------
/src/components/navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <a-menu v-model:selectedKeys="current" mode="horizontal" theme="dark">
 4 |         <span style="margin: 0 10px 0 10px;">
 5 |             ART-Pi
 6 |         </span>
 7 |       <a-menu-item>
 8 |         <HomeOutlined />Home</a-menu-item>
 9 |       <!-- <a-menu-item>
10 |         <appstore-outlined />Applications </a-menu-item>
11 |       <a-sub-menu>
12 |         <template v-slot:title>
13 |           <span class="submenu-title-wrapper">
14 |             <setting-outlined />
15 |             Settings
16 |           </span>
17 |         </template>
18 |         <a-menu-item key="setting:1">
19 |           Option 1
20 |         </a-menu-item>
21 |         <a-menu-item key="setting:2">
22 |           Option 2
23 |         </a-menu-item>
24 |       </a-sub-menu> -->
25 |     </a-menu>
26 |   </div>
27 | </template>
28 | <script>
29 |   import {
30 |     HomeOutlined,
31 |     // AppstoreOutlined,
32 |     // SettingOutlined
33 |   } from '@ant-design/icons-vue';
34 |   export default {
35 |     components: {
36 |       HomeOutlined,
37 |       // AppstoreOutlined,
38 |       // SettingOutlined,
39 |     },
40 |     data() {
41 |       return {
42 |         current: ['mail'],
43 |       };
44 |     },
45 |   };
46 | </script>
47 | 
48 | <style >
49 |   
50 | </style>
51 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "art-pi",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "ant-design-vue": "^2.0.0-beta.3",
12 |     "axios": "^0.20.0",
13 |     "babel-plugin-import": "^1.13.0",
14 |     "compression-webpack-plugin": "^5.0.2",
15 |     "core-js": "^3.6.5",
16 |     "echarts": "^4.9.0",
17 |     "less": "^3.12.2",
18 |     "less-loader": "5.0.0",
19 |     "schema-utils": "^2.7.0",
20 |     "vue": "^3.0.0-0",
21 |     "vue-router": "^4.0.0-beta.7"
22 |   },
23 |   "devDependencies": {
24 |     "@vue/cli-plugin-babel": "~4.5.0",
25 |     "@vue/cli-plugin-eslint": "~4.5.0",
26 |     "@vue/cli-service": "~4.5.0",
27 |     "@vue/compiler-sfc": "^3.0.0-0",
28 |     "babel-eslint": "^10.1.0",
29 |     "eslint": "^6.7.2",
30 |     "eslint-plugin-vue": "^7.0.0-0"
31 |   },
32 |   "eslintConfig": {
33 |     "root": true,
34 |     "env": {
35 |       "node": true
36 |     },
37 |     "extends": [
38 |       "plugin:vue/vue3-essential",
39 |       "eslint:recommended"
40 |     ],
41 |     "parserOptions": {
42 |       "parser": "babel-eslint"
43 |     },
44 |     "rules": {}
45 |   },
46 |   "browserslist": [
47 |     "> 1%",
48 |     "last 2 versions",
49 |     "not dead"
50 |   ]
51 | }
52 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |     createApp
 3 | } from 'vue';
 4 | import App from './App.vue';
 5 | import router from '@/router/router'
 6 | import {
 7 |     Button,
 8 |     Menu,
 9 |     Col,
10 |     Row,
11 |     Layout,
12 |     Card,
13 |     Table,
14 |     Tag,
15 |     Progress,
16 |     Descriptions
17 |     // Carousel
18 | } from 'ant-design-vue';
19 | import 'ant-design-vue/lib/button/style';
20 | import 'ant-design-vue/lib/menu/style';
21 | import 'ant-design-vue/lib/col/style';
22 | import 'ant-design-vue/lib/layout/style';
23 | import 'ant-design-vue/lib/card/style';
24 | import 'ant-design-vue/lib/row/style';
25 | import 'ant-design-vue/lib/table/style';
26 | import 'ant-design-vue/lib/tag/style';
27 | import 'ant-design-vue/lib/progress/style';
28 | import 'ant-design-vue/lib/descriptions/style';
29 | // import 'ant-design-vue/lib/carousel/style';
30 | 
31 | import '@/assets/css/h7_web.css'
32 | 
33 | const WEB_VERSION = "V0.1.0"
34 | const app = createApp(App);
35 | app.use(router);
36 | 
37 | app.use(Button);
38 | app.use(Menu);
39 | app.use(Col);
40 | app.use(Row);
41 | app.use(Layout);
42 | app.use(Card);
43 | app.use(Table);
44 | app.use(Tag);
45 | app.use(Progress);
46 | app.use(Descriptions);
47 | // app.use(Carousel);
48 | 
49 | app.config.globalProperties.axios = require('axios').default;
50 | app.config.globalProperties.echarts = require('echarts');
51 | app.config.globalProperties.webVer = WEB_VERSION;
52 | 
53 | app.mount('#app');


--------------------------------------------------------------------------------
/docs/api.md:
--------------------------------------------------------------------------------
 1 | ## H7 WEB API
 2 | 
 3 | _V0.1 by WKJay_
 4 | 
 5 | --------------------
 6 | 
 7 | #### 1. Basic information
 8 | 
 9 | request_url: `/cgi-bin/basic_info`
10 | 
11 | response:
12 | 
13 | ```json
14 | //success
15 | {
16 |     code:0
17 |     payload:{
18 |         "id0":"xxx",
19 |         "id1":"xxx"
20 |     }
21 | }
22 | //fail
23 | {
24 |     code:-1,
25 |     msg:"xxxx"
26 | }
27 | ```
28 | 
29 | note: all values return as a string.
30 | 
31 | #### 2. Board Control
32 | 
33 | request url: `/cgi-bin/board_control`
34 | 
35 | ```json
36 | //request
37 | {
38 |     id:"xxx"
39 |     code:0
40 | }
41 | ```
42 | 
43 | | id   | describe |
44 | | ---- | -------- |
45 | | dev0 | Blue LED |
46 | | dev1 | Red LED  |
47 | | dev2 | BEEP     |
48 | 
49 | | code | describe     |
50 | | ---- | ------------ |
51 | | 0    | Turn off     |
52 | | 1    | Turn on      |
53 | | x    | not used now |
54 | 
55 | response:
56 | 
57 | ```json
58 | //success
59 | {
60 |     code:0
61 |     msg:"ok"
62 | }
63 | //fail
64 | {
65 |     code:-1,
66 |     msg:"xxxx"
67 | }
68 | ```
69 | 
70 | #### 3. Current active mods
71 | 
72 | request url: `/cgi-bin/current_mods`
73 | response:
74 | 
75 | ```json
76 | //success
77 | {
78 |     code:0
79 |     mods:[
80 |         {
81 |             name:"xxx",
82 |             author:"xxx",
83 |             version:"xxx"
84 |         },
85 |         {
86 |             name:"xxx",
87 |             author:"xxx",
88 |             version:"xxx"
89 |         }
90 |     ]
91 | }
92 | //fail
93 | {
94 |     code:-1,
95 |     msg:"xxxx"
96 | }
97 | ```


--------------------------------------------------------------------------------
/src/components/home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="h7-container">
  3 |     <a-row :gutter="16">
  4 |       <a-col :md="6">
  5 |         <a-card class="h7-head-card" size="small" title="Board Control" :bordered="false">
  6 |           <a-row>
  7 |             <div style="margin-bottom:12px">
  8 |               <a-tag :color="bLedStat?'blue':''">
  9 |                 蓝灯
 10 |                 <BulbOutlined />
 11 |               </a-tag>
 12 |               <a-button :loading="control.bLedReq" type="default" size="small" style="float:right"
 13 |                 @click="boardControl('dev0',!basicInfo.id14)">
 14 |                 {{basicInfo.id14?"关闭":"打开"}}
 15 |               </a-button>
 16 |             </div>
 17 |           </a-row>
 18 | 
 19 |           <a-row>
 20 |             <div>
 21 |               <a-tag :color="rLedStat?'red':''">
 22 |                 红灯
 23 |                 <BulbOutlined />
 24 |               </a-tag>
 25 |               <a-button :loading="control.rLedReq" type="default" size="small" style="float:right"
 26 |                 @click="boardControl('dev1',!basicInfo.id15)">
 27 |                 {{basicInfo.id15?"关闭":"打开"}}
 28 |               </a-button>
 29 |             </div>
 30 |           </a-row>
 31 | 
 32 |           <a-row>
 33 |             <a-col :xs="12">
 34 | 
 35 |             </a-col>
 36 |             <a-col :xs="12">
 37 | 
 38 |             </a-col>
 39 |           </a-row>
 40 |         </a-card>
 41 |       </a-col>
 42 | 
 43 |       <a-col :md="6">
 44 |         <a-card class="h7-head-card" size="small" title="内存" :bordered="false">
 45 |           <p>
 46 |             总容量
 47 |             <span>{{ramTotalH}}</span>
 48 |           </p>
 49 |           <p>
 50 |             已使用
 51 |             <span>{{ramUsedH}}</span>
 52 |           </p>
 53 |           <p>
 54 |             <a-progress :percent="ramUsage" />
 55 |           </p>
 56 |         </a-card>
 57 |       </a-col>
 58 | 
 59 |       <a-col :md="6">
 60 |         <a-card class="h7-head-card" size="small" title="Norflash" :bordered="false">
 61 |           <p>
 62 |             总容量
 63 |             <span>{{norTotalH}}</span>
 64 |           </p>
 65 |           <p>
 66 |             已使用
 67 |             <span>{{norUsedH}}</span>
 68 |           </p>
 69 |           <p>
 70 |             <a-progress :percent="norflashUsage" />
 71 |           </p>
 72 |         </a-card>
 73 |       </a-col>
 74 | 
 75 |       <a-col :md="6">
 76 |         <a-card class="h7-head-card" size="small" title="SD" :bordered="false">
 77 |           <p>
 78 |             总容量
 79 |             <span>{{sdTotalH}}</span>
 80 |           </p>
 81 |           <p>
 82 |             已使用
 83 |             <span>{{sdUsedH}}</span>
 84 |           </p>
 85 |           <p>
 86 |             <a-progress :percent="sdUsage" />
 87 |           </p>
 88 |         </a-card>
 89 |       </a-col>
 90 |     </a-row>
 91 | 
 92 |     <a-row :gutter="16">
 93 |       <a-col :lg="12">
 94 |         <a-card style="margin-bottom:15px">
 95 |           <div id="memTrendChart" style="width:100%;height:300px;">
 96 |           </div>
 97 |         </a-card>
 98 |       </a-col>
 99 |       <a-col :lg="12">
100 |         <a-card style="margin-bottom:15px">
101 |           <div id="rssiChart" style="width:100%;height:300px;">
102 |           </div>
103 |         </a-card>
104 |       </a-col>
105 |     </a-row>
106 | 
107 |     <!-- <a-row>
108 |       <a-col :md="24">
109 |         <a-card title="Current mods">
110 |           <a-table :columns="modsColums" :data-source="mods">
111 |             <template v-slot:active="{ text: active }">
112 |               <span>
113 |                 <a-tag :color="active  ? 'green' :  'volcano'">
114 |                   {{ active?"active":"disabled" }}
115 |                 </a-tag>
116 |               </span>
117 |             </template>
118 |           </a-table>
119 |         </a-card>
120 |       </a-col>
121 |     </a-row> -->
122 | 
123 |     <a-row>
124 |       <a-card class="h7-head-card-mini" :bordered="false">
125 |         <a-descriptions title="基础信息">
126 |           <a-descriptions-item label="固件版本">
127 |             {{basicInfo.id12}}
128 |           </a-descriptions-item>
129 |           <a-descriptions-item label="网页版本">
130 |             {{webVer}}
131 |           </a-descriptions-item>
132 |           <a-descriptions-item label="网络状态">
133 |             {{basicInfo.id17?"已联网":"未联网"}}
134 |           </a-descriptions-item>
135 |           <a-descriptions-item label="服务器时间">
136 |             {{basicInfo.id4}}
137 |           </a-descriptions-item>
138 |           <a-descriptions-item label="运行时间">
139 |             {{serverRunTime}}
140 |           </a-descriptions-item>
141 |         </a-descriptions>
142 |       </a-card>
143 |     </a-row>
144 | 
145 |     <a-row>
146 |       <a-card class="h7-head-card-mini" :bordered="false">
147 |         <a-descriptions title="致谢"></a-descriptions>
148 |         <p>自项目成立以来，多位社区爱好者加入了我们的内测，给我们提了很多宝贵的改进意见和建议，才有了最终的样子。</p>
149 |         <p style="font-weight:bold">特别感谢：</p>
150 |         <div class="flex">
151 |           <div>
152 |             <a class="link" href="https://github.com/liuduanfei">刘端飞</a>
153 |             <a class="link" href="https://github.com/qgyhd1234">虞昊迪</a>
154 |           </div>
155 |           <p>完成网络音乐播放器综合 DEMO</p>
156 |         </div>
157 | 
158 |         <div class="flex">
159 |           <a class="link" href="https://github.com/Supperthomas">李涛</a>
160 |           <p>适配蓝牙协议栈 BT_STACK</p>
161 |         </div>
162 | 
163 |         <div class="flex">
164 |           <a class="link" href="https://github.com/loogg">马龙伟</a>
165 |           <p>完成工业网关综合 DEMO</p>
166 |         </div>
167 | 
168 |         <div class="flex">
169 |           <a class="link" href="https://github.com/WKJay">王君杰</a>
170 |           <p>完成出厂例程</p>
171 |         </div>
172 | 
173 |         <div class="flex">
174 |           <a class="link" href="https://github.com/forest-rain">黄景贤</a>
175 |           <p>设计 LoRa 扩展板</p>
176 |         </div>
177 | 
178 |         <div class="flex">
179 |           <a class="link" href="https://gitee.com/Aladdin-Wang/">王李康</a>
180 |           <p>基于 ART-Pi 的 touchgfx 连载教程</p>
181 |         </div>
182 | 
183 |         <p>对本项目做成的贡献。</p>
184 |       </a-card>
185 |     </a-row>
186 | 
187 |     <a-row :gutter="16">
188 |       <a-col :md="12">
189 |         <a-button size="large" block href="https://github.com/RT-Thread-Studio/sdk-bsp-stm32h750-realthread-artpi">
190 |           ART-Pi SDK
191 |         </a-button>
192 |       </a-col>
193 |       <a-col :md="12">
194 |         <a-button size="large" block href="https://club.rt-thread.org/">
195 |           RT-Thread 开源社区
196 |         </a-button>
197 |       </a-col>
198 | 
199 |     </a-row>
200 | 
201 |     <div style="height: 30px"></div>
202 |   </div>
203 | </template>
204 | 
205 | <script>
206 |   const MAX_HOME_CHART_SAMPLE = 50;
207 |   import {
208 |     BulbOutlined
209 |   } from '@ant-design/icons-vue';
210 |   export default {
211 |     components: {
212 |       BulbOutlined,
213 |     },
214 |     data() {
215 |       return {
216 |         basicInfoTimer: null,
217 |         control: {
218 |           bLedReq: false, //蓝灯请求状态
219 |           rLedReq: false, //红灯请求状态
220 |         },
221 |         basicInfo: {
222 |           id0: "33968596", //total ram
223 |           id1: "61556", //used ram
224 |           id2: "64660", //max used ram
225 |           id3: "8", //time zone
226 |           id4: "2000-01-01 10:41:55", //server time
227 |           id5: "norflash", //operation dir
228 |           id6: "15728640", //norflash total
229 |           id7: "32768", //norflash used
230 |           id8: "0", //sd total
231 |           id9: "0", //sd used
232 |           id10: "0", //usb total
233 |           id11: "0", //usb used
234 |           id12: "v1.0.0", //firmware version
235 |           id13: " ", //RESERVE
236 |           id14: false, //BLUE LED
237 |           id15: false, //RED LED
238 |           id16: 0, //WIFI RSSI
239 |           id17: false, //Internet
240 |           id18: 0, //running time
241 |         },
242 |         mods: [{
243 |           key: "1",
244 |           name: 'FTP',
245 |           author: 'mlw',
246 |           version: 'v1.0.0',
247 |           active: true,
248 |         }],
249 |         modsColums: [{
250 |             title: 'Name',
251 |             dataIndex: 'name',
252 |             key: 'name'
253 |           },
254 |           {
255 |             title: 'Author',
256 |             dataIndex: 'author',
257 |             key: 'author'
258 |           },
259 |           {
260 |             title: 'Version',
261 |             dataIndex: 'version',
262 |             key: 'version'
263 |           },
264 |           {
265 |             title: 'Status',
266 |             dataIndex: 'active',
267 |             key: 'active',
268 |             slots: {
269 |               customRender: 'active'
270 |             }
271 |           }
272 |         ],
273 |         rssiChartData: {
274 |           yArray: [],
275 |           xArray: []
276 |         },
277 |         memTrendChartData: {
278 |           yArray: [],
279 |           xArray: []
280 |         }
281 |       }
282 |     },
283 |     methods: {
284 |       getData() {
285 |         this.axios({
286 |           method: "get",
287 |           url: "/cgi-bin/basic_info",
288 |           timeout: 1000
289 |         }).then(data => {
290 |           for (let key in data.data.payload) {
291 |             this.basicInfo[key] = data.data.payload[key];
292 |           }
293 |           this.updateRssiChart(this.basicInfo.id16);
294 |           this.updateMemTrendChart(this.ramUsage);
295 |         }).catch(() => {});
296 |       },
297 |       showChart() {
298 |         window.rssiChart = this.echarts.init(document.getElementById("rssiChart"));
299 |         window.memTrendChart = this.echarts.init(document.getElementById("memTrendChart"));
300 |         window.onresize = () => {
301 |           window.rssiChart.resize();
302 |           window.memTrendChart.resize();
303 |         }
304 | 
305 |         // 绘制图表
306 |         window.rssiChart.setOption({
307 |           title: {
308 |             text: 'WIFI RSSI'
309 |           },
310 |           grid: {
311 |             left: '1%',
312 |             right: '1%',
313 |             bottom: '10%',
314 |             containLabel: true,
315 |           },
316 |           tooltip: {},
317 |           xAxis: {
318 |             data: this.rssiChartData.xArray,
319 |             show: false
320 |           },
321 |           yAxis: {
322 |             axisLabel: {
323 |               formatter: '{value}'
324 |             }
325 |           },
326 |           series: [{
327 |             symbol: "none",
328 |             name: 'Rssi',
329 |             type: 'line',
330 |             smooth: true,
331 |             data: this.rssiChartData.yArray
332 |           }]
333 |         });
334 | 
335 |         window.memTrendChart.setOption({
336 |           title: {
337 |             text: '内存走势'
338 |           },
339 |           grid: {
340 |             left: '1%',
341 |             right: '1%',
342 |             bottom: '10%',
343 |             containLabel: true,
344 |           },
345 |           tooltip: {},
346 |           xAxis: {
347 |             data: this.memTrendChartData.xArray,
348 |             show: false
349 |           },
350 |           yAxis: {
351 |             axisLabel: {
352 |               formatter: '{value}%'
353 |             },
354 |             min: 0,
355 |             max: 100
356 |           },
357 |           series: [{
358 |             symbol: "none",
359 |             name: 'Mem',
360 |             type: 'line',
361 |             smooth: true,
362 |             data: this.memTrendChartData.yArray,
363 |             color: '#91c7ae',
364 |             areaStyle: {}
365 |           }]
366 |         });
367 |       },
368 |       timeStrFormat(val) {
369 |         if (val < 10) {
370 |           return `0${val}`;
371 |         } else {
372 |           return `${val}`;
373 |         }
374 |       },
375 |       updateRssiChart(data) {
376 |         let time = new Date();
377 |         let timeStr = `${this.timeStrFormat(time.getMinutes())}:${this.timeStrFormat(time.getSeconds())}`;
378 |         this.rssiChartData.xArray.push(timeStr);
379 |         if (this.rssiChartData.xArray.length > MAX_HOME_CHART_SAMPLE)
380 |           this.rssiChartData.xArray.shift();
381 |         this.rssiChartData.yArray.push(data);
382 |         if (this.rssiChartData.yArray.length > MAX_HOME_CHART_SAMPLE)
383 |           this.rssiChartData.yArray.shift();
384 |         window.rssiChart.setOption({
385 |           xAxis: {
386 |             data: this.rssiChartData.xArray
387 |           },
388 |           series: [{
389 |             name: 'Rssi',
390 |             data: this.rssiChartData.yArray
391 |           }]
392 |         });
393 |       },
394 |       updateMemTrendChart(data) {
395 |         let time = new Date();
396 |         let timeStr = `${this.timeStrFormat(time.getMinutes())}:${this.timeStrFormat(time.getSeconds())}`;
397 |         this.memTrendChartData.xArray.push(timeStr);
398 |         if (this.memTrendChartData.xArray.length > MAX_HOME_CHART_SAMPLE)
399 |           this.memTrendChartData.xArray.shift();
400 |         this.memTrendChartData.yArray.push(data);
401 |         if (this.memTrendChartData.yArray.length > MAX_HOME_CHART_SAMPLE)
402 |           this.memTrendChartData.yArray.shift();
403 |         window.memTrendChart.setOption({
404 |           xAxis: {
405 |             data: this.memTrendChartData.xArray
406 |           },
407 |           series: [{
408 |             name: 'Mem',
409 |             data: this.memTrendChartData.yArray
410 |           }]
411 |         });
412 |       },
413 |       boardControl(id, code) {
414 |         let params = {
415 |           id,
416 |           code
417 |         }
418 | 
419 |         if (id == "dev0") {
420 |           this.control.bLedReq = true;
421 |         } else if (id == "dev1") {
422 |           this.control.rLedReq = true;
423 |         }
424 | 
425 |         this.axios({
426 |           method: "post",
427 |           url: "/cgi-bin/board_control",
428 |           timeout: 1500,
429 |           data: params,
430 |           responseType: "json"
431 |         }).then(data => {
432 |           if (id == "dev0") {
433 |             this.control.bLedReq = false;
434 |           } else if (id == "dev1") {
435 |             this.control.rLedReq = false;
436 |           }
437 |           if (data.data.code == 0) {
438 |             this.getData();
439 |           } else {
440 |             //handle error
441 |           }
442 |         }).catch(() => {
443 |           if (id == "dev0") {
444 |             this.control.bLedReq = false;
445 |           } else if (id == "dev1") {
446 |             this.control.rLedReq = false;
447 |           }
448 |         });
449 |       },
450 |       originDataToHuman(val) {
451 |         if (val > 1024 * 1024 * 1024) {
452 |           return (val / 1024 / 1024 / 1024).toFixed(2) + "G";
453 |         } else if (val > 1024 * 1024) {
454 |           return (val / 1024 / 1024).toFixed(2) + "M";
455 |         } else if (val > 1024) {
456 |           return (val / 1024).toFixed(2) + "K";
457 |         } else {
458 |           return (val) + "B";
459 |         }
460 |       }
461 |     },
462 |     created() {
463 |       this.getData();
464 |       this.basicInfoTimer = window.setInterval(this.getData, 1200);
465 | 
466 |     },
467 |     mounted() {
468 |       this.showChart();
469 |     },
470 |     beforeUnmount() {
471 |       window.clearInterval(this.basicInfoTimer);
472 |     },
473 |     computed: {
474 |       ramTotalH: function () {
475 |         return this.originDataToHuman(this.basicInfo.id0);
476 |       },
477 |       ramUsedH: function () {
478 |         return this.originDataToHuman(this.basicInfo.id1);
479 |       },
480 |       norTotalH: function () {
481 |         return this.originDataToHuman(this.basicInfo.id6);
482 |       },
483 |       norUsedH: function () {
484 |         return this.originDataToHuman(this.basicInfo.id7);
485 |       },
486 |       sdTotalH: function () {
487 |         return this.originDataToHuman(this.basicInfo.id8);
488 |       },
489 |       sdUsedH: function () {
490 |         return this.originDataToHuman(this.basicInfo.id9);
491 |       },
492 |       ramUsage: function () {
493 |         if (this.basicInfo.id0 == 0) {
494 |           return 0;
495 |         } else {
496 |           let percent = parseFloat((this.basicInfo.id1 / this.basicInfo.id0 * 100).toFixed(1));
497 |           return percent != 100 ? percent : 99.9;
498 |         }
499 |       },
500 |       norflashUsage: function () {
501 |         if (this.basicInfo.id6 == 0) {
502 |           return 0;
503 |         } else {
504 |           let percent = parseFloat((this.basicInfo.id7 / this.basicInfo.id6 * 100).toFixed(1));
505 |           return percent != 100 ? percent : 99.9;
506 |         }
507 |       },
508 |       sdUsage: function () {
509 |         if (this.basicInfo.id8 == 0) {
510 |           return 0;
511 |         } else {
512 |           let percent = parseFloat((this.basicInfo.id9 / this.basicInfo.id8 * 100).toFixed(1));
513 |           return percent != 100 ? percent : 99.9;
514 |         }
515 |       },
516 |       bLedStat: function () {
517 |         return this.basicInfo.id14;
518 |       },
519 |       rLedStat: function () {
520 |         return this.basicInfo.id15;
521 |       },
522 |       serverRunTime: function () {
523 |         let days = 0,
524 |           hours = 0,
525 |           minutes = 0,
526 |           seconds = 0;
527 |         let run_time = this.basicInfo.id18;
528 |         seconds = run_time;
529 |         if (seconds > 59) {
530 |           minutes = seconds / 60;
531 |           seconds = seconds % 60;
532 |           if (minutes > 59) {
533 |             hours = minutes / 60;
534 |             minutes = minutes % 60;
535 |             if (hours > 23) {
536 |               days = hours / 24;
537 |               hours = hours % 24;
538 |             }
539 |           }
540 |         }
541 |         return `${parseInt(days)}天 ${parseInt(hours)}时 ${parseInt(minutes)}分 ${parseInt(seconds)}秒`;
542 |       },
543 |     }
544 |   }
545 | </script>
546 | 
547 | <style scoped>
548 |   /* For demo */
549 |   .ant-carousel ::v-deep(.slick-slide) {
550 |     text-align: center;
551 |     height: 160px;
552 |     background: #364d79;
553 |     overflow: hidden;
554 |   }
555 | 
556 |   .ant-tag {
557 |     font-size: 16px;
558 |   }
559 | 
560 |   .flex {
561 |     display: flex;
562 |     flex-direction: row;
563 |     flex-wrap: wrap;
564 |   }
565 | 
566 |   .link {
567 |     margin-right: 10px;
568 |   }
569 | </style>


--------------------------------------------------------------------------------