提交 cf092e99 authored 作者: blu's avatar blu

new feature: evwifi

上级 9586b92f
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
# Created by .ignore support plugin (hsz.mobi)
### Node template
# Logs
/logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
# parcel-bundler cache (https://parceljs.org/)
.cache
# next.js build output
.next
# nuxt.js build output
.nuxt
# Nuxt generate
dist
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless
# IDE / Editor
.idea
# Service worker
sw.*
# Mac OSX
.DS_Store
# Vim swap files
*.swp
# evbox
> web for evbox device
## Build Setup
``` bash
# install dependencies
$ npm run install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm run start
# generate static project
$ npm run generate
```
For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
# ASSETS
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
<template>
<svg class="NuxtLogo" width="245" height="180" viewBox="0 0 452 342" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path
d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
fill="#00C58E"
/>
<path
d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
fill="#108775"
/>
<path
d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
fill="#2F495E"
fill-rule="nonzero"
/>
</g>
</svg>
</template>
<style>
.NuxtLogo {
animation: 1s appear;
}
@keyframes appear {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
# COMPONENTS
**This directory is not required, you can delete it if you don't want to use it.**
The components directory contains your Vue.js Components.
_Nuxt.js doesn't supercharge these components._
# LAYOUTS
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your Application Layouts.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
<template>
<div>
<nuxt />
</div>
</template>
<style>
html {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
}
.button--green {
display: inline-block;
border-radius: 4px;
border: 1px solid #3b8070;
color: #3b8070;
text-decoration: none;
padding: 10px 30px;
}
.button--green:hover {
color: #fff;
background-color: #3b8070;
}
.button--grey {
display: inline-block;
border-radius: 4px;
border: 1px solid #35495e;
color: #35495e;
text-decoration: none;
padding: 10px 30px;
margin-left: 15px;
}
.button--grey:hover {
color: #fff;
background-color: #35495e;
}
</style>
# MIDDLEWARE
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your application middleware.
Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
export default {
mode: 'spa',
/*
** Headers of the page
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
],
/*
** Plugins to load before mounting the App
*/
plugins: [
],
/*
** Nuxt.js dev-modules
*/
buildModules: [
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://bootstrap-vue.js.org
'bootstrap-vue/nuxt',
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
'@nuxtjs/pwa',
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
proxy: true
},
proxy:{
'/api/': 'http://192.168.1.104',
changeOrigin: true,
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend (config, ctx) {
}
}
}
{
"name": "evbox",
"version": "1.0.0",
"description": "web for evbox device",
"author": "bruce.lu",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"@nuxtjs/axios": "^5.3.6",
"@nuxtjs/pwa": "^3.0.0-0",
"axios": "^0.19.0",
"bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0",
"nuxt": "^2.0.0"
},
"devDependencies": {
"@nuxtjs/proxy": "^1.3.3"
}
}
# PAGES
This directory contains your Application Views and Routes.
The framework reads all the `*.vue` files inside this directory and creates the router of your application.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).
<template>
<nuxt-link to="/wifi">wifi配置</nuxt-link>
</template>
\ No newline at end of file
<template>
<div style="width:220px;">
<div>
<nuxt-link to="/">返回主页</nuxt-link>
<label>WIFI配置</label>
<label>{{devSn}}</label>
</div>
<div>
<div>
<label>附近热点</label>
<b-button size="sm" variant="primary" v-on:click="scanWifi">重新扫描</b-button>
<div style="flex-direction:column;margin-top:10px">
<b-button size="sm" variant="info" v-on:click="config"
v-for=" item in ssids" style="width:200px;margin-bottom:10px" v-bind:key="item.id">
{{ item }}
</b-button>
</div>
<b-modal hide-header-close no-close-on-esc no-close-on-backdrop hide-footer ref="config" id="config" size="sm" title="WIFI连接配置">
<div>
<div>
<label disabled variant="info">热点名:</label>
<b-button disabled> {{ssid}}</b-button>
</div>
<div style="flex-direction:row;display:flex">
<label style="margin-right:10px">密码:</label>
<b-input v-model="password" style="width:60%"> {{ssid}} </b-input>
</div>
</div>
<b-button :disabled="cancelDisabled" class="mt-3" variant="outline-danger" block @click="closeModal">取消</b-button>
<b-button :disabled= "!connEnabled" class="mt-2" variant="outline-warning" block @click="connect">连接</b-button>
</b-modal>
</div>
<div></div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
async mounted (){
try{
this.getWifiData();
}catch(err){
console.log(err);
}
},
data() {
return {
getWifiData: async ()=>{
let response = await axios.get('http://192.168.1.104/wifi?scan=false')
this.wifiData = response.data.wifiData
this.ssids = Array.from(new Set(this.wifiData.wifi.ssids)).filter(e => e != "" && e != undefined).map(e => {
let data = e.match(/ESSID:\"(.+)\"/)[1];
if (data[0] != '\\') {
return data
}else{
var count = data.length;
var str = "";
for(var index = 0; index < count; index += 1)
str += String.fromCharCode(data[index]);
return data
}
}).filter(e => e[0]!='\\');
this.devSn = this.wifiData.info.sn;
console.log(this.devSn);
console.log(this.ssids);
},
cancelDisabled: false,
connDisabled: false,
ssid: "",
devSn:"",
password: "",
ssids: ["NO WIFI AVAILABLE"]
}
},
computed: {
connEnabled() {
return (this.password.length >= 4) && !this.connDisabled;
}
},
methods: {
scanWifi: function(event){
console.log("hello");
},
config: function(event){
console.log(event.target.innerText);
this.ssid = event.target.innerText;
this.password = "";
this.cancelDisabled = false;
this.connDisabled = false;
this.$bvModal.show('config');
},
closeModal(){
this.$refs['config'].hide();
},
connect(){
console.log(this.ssid, this.password, this.connEnabled);
this.cancelDisabled = true;
this.connDisabled = true;
}
}
}
</script>
# PLUGINS
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
# STATIC
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your static files.
Each file inside this directory is mapped to `/`.
Thus you'd want to delete this README.md before deploying to production.
Example: `/static/robots.txt` is mapped as `/robots.txt`.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
# STORE
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your Vuex Store files.
Vuex Store option is implemented in the Nuxt.js framework.
Creating a file in this directory automatically activates the option in the framework.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论