【测试】获取设备信息成功

config/index.js

@@ -5,72 +5,81 @@
 const path = require('path')
 
 module.exports = {
-  dev: {
+	dev: {
 
-    // Paths
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
-    proxyTable: {},
+		// Paths
+		assetsSubDirectory: 'static',
+		assetsPublicPath: '/',
+		// 后端请求地址代理，配置后testIp再之后的页面调用时就直接指代 http://197.82.15.15:8088
+		proxyTable: {
+			'/api': {
+				target: 'http://baibai.natapp1.cc/', // 你请求的第三方接口
+				changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
+				pathRewrite: { // 路径重写，
+					'^/api': '/' // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
+				}
+			}
+		},
 
-    // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
-    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
-    autoOpenBrowser: false,
-    errorOverlay: true,
-    notifyOnErrors: true,
-    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+		// Various Dev Server settings
+		host: 'localhost', // can be overwritten by process.env.HOST
+		port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+		autoOpenBrowser: false,
+		errorOverlay: true,
+		notifyOnErrors: true,
+		poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
 
-    // Use Eslint Loader?
-    // If true, your code will be linted during bundling and
-    // linting errors and warnings will be shown in the console.
-    useEslint: false,
-    // If true, eslint errors and warnings will also be shown in the error overlay
-    // in the browser.
-    showEslintErrorsInOverlay: false,
+		// Use Eslint Loader?
+		// If true, your code will be linted during bundling and
+		// linting errors and warnings will be shown in the console.
+		useEslint: false,
+		// If true, eslint errors and warnings will also be shown in the error overlay
+		// in the browser.
+		showEslintErrorsInOverlay: false,
 
-    /**
-     * Source Maps
-     */
+		/**
+		 * Source Maps
+		 */
 
-    // https://webpack.js.org/configuration/devtool/#development
-    devtool: 'cheap-module-eval-source-map',
+		// https://webpack.js.org/configuration/devtool/#development
+		devtool: 'cheap-module-eval-source-map',
 
-    // If you have problems debugging vue-files in devtools,
-    // set this to false - it *may* help
-    // https://vue-loader.vuejs.org/en/options.html#cachebusting
-    cacheBusting: true,
+		// If you have problems debugging vue-files in devtools,
+		// set this to false - it *may* help
+		// https://vue-loader.vuejs.org/en/options.html#cachebusting
+		cacheBusting: true,
 
-    cssSourceMap: true
-  },
+		cssSourceMap: true
+	},
 
-  build: {
-    // Template for index.html
-    index: path.resolve(__dirname, '../dist/index.html'),
+	build: {
+		// Template for index.html
+		index: path.resolve(__dirname, '../dist/index.html'),
 
-    // Paths
-    assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+		// Paths
+		assetsRoot: path.resolve(__dirname, '../dist'),
+		assetsSubDirectory: 'static',
+		assetsPublicPath: '/',
 
-    /**
-     * Source Maps
-     */
+		/**
+		 * Source Maps
+		 */
 
-    productionSourceMap: true,
-    // https://webpack.js.org/configuration/devtool/#production
-    devtool: '#source-map',
+		productionSourceMap: true,
+		// https://webpack.js.org/configuration/devtool/#production
+		devtool: '#source-map',
 
-    // Gzip off by default as many popular static hosts such as
-    // Surge or Netlify already gzip all static assets for you.
-    // Before setting to `true`, make sure to:
-    // npm install --save-dev compression-webpack-plugin
-    productionGzip: false,
-    productionGzipExtensions: ['js', 'css'],
+		// Gzip off by default as many popular static hosts such as
+		// Surge or Netlify already gzip all static assets for you.
+		// Before setting to `true`, make sure to:
+		// npm install --save-dev compression-webpack-plugin
+		productionGzip: false,
+		productionGzipExtensions: ['js', 'css'],
 
-    // Run the build command with an extra argument to
-    // View the bundle analyzer report after build finishes:
-    // `npm run build --report`
-    // Set to `true` or `false` to always turn it on or off
-    bundleAnalyzerReport: process.env.npm_config_report
-  }
+		// Run the build command with an extra argument to
+		// View the bundle analyzer report after build finishes:
+		// `npm run build --report`
+		// Set to `true` or `false` to always turn it on or off
+		bundleAnalyzerReport: process.env.npm_config_report
+	}
 }

src/components/balance/Balance.vue

@@ -135,33 +135,33 @@
 		},
 		methods: {
 			onSubmit() {
-				console.log('submit!');
+				console.log('submit!')
 			},
 			handleOpen(key, keyPath) {
-				console.log(key, keyPath);
+				console.log(key, keyPath)
 			},
 			handleClose(key, keyPath) {
-				console.log(key, keyPath);
+				console.log(key, keyPath)
 			},
 			toggleSelection(rows) {
 				if (rows) {
 					rows.forEach(row => {
-						this.$refs.multipleTable.toggleRowSelection(row);
-					});
+						this.$refs.multipleTable.toggleRowSelection(row)
+					})
 				} else {
-					this.$refs.multipleTable.clearSelection();
+					this.$refs.multipleTable.clearSelection()
 				}
 			},
 			handleSelectionChange(val) {
-				this.multipleSelection = val;
+				this.multipleSelection = val
 			},
 			handleEdit(index, row) {
 				this.editdialogFormVisible = true
-				console.log(index, row);
+				console.log(index, row)
 			},
 			handleDelete(index, row) {
 				this.delDialogVisible = true
-				console.log(index, row);
+				console.log(index, row)
 			}
 		}
 	}

src/components/dev_mgr/DevMgr.vue

@@ -11,16 +11,16 @@
 		</el-row>
 		<el-row>
 			<el-col :span="24" class="second-row">
-				<el-form :inline="true" :model="formInline" class="demo-form-inline">
+				<el-form :inline="true" :model="form_select" class="demo-form-inline">
 					<el-form-item label="水表ID:" class="shuibiaoId">
-						<el-input v-model="formInline.user" placeholder="请输入水表ID"></el-input>
+						<el-input placeholder="请输入水表ID"></el-input>
 					</el-form-item>
 					<el-form-item>
 						<el-button type="primary" @click="onSubmit">查找</el-button>
 					</el-form-item>
 					<el-form-item label="楼栋号:" class="loudonghao">
-						<el-select v-model="formInline.value">
-							<el-option v-for="item in formInline.options" :key="item.value" :label="item.label"
+						<el-select v-model="form_select.value" @change="selectGet(form_select.value)">
+							<el-option v-for="item in form_select.builds" :key="item.value" :label="item.label"
 								:value="item.value">
 							</el-option>
 						</el-select>
@@ -36,12 +36,12 @@
 			<el-col :span="24" class="third-row">
 				<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
 					@selection-change="handleSelectionChange" highlight-current-row>
-					<el-table-column type="selection" label="全选" align="center" width="55"></el-table-column>
+					<el-table-column type="selection" align="center" width="105"></el-table-column>
 					<el-table-column label="水表ID" width="260">
-						<template slot-scope="scope">{{ scope.row.id }}</template>
+						<template slot-scope="scope">{{ scope.row.user_id }}</template>
 					</el-table-column>
-					<el-table-column prop="drom" label="楼栋号" align="center" width="400"></el-table-column>
-					<el-table-column prop="room" label="宿舍号" show-overflow-tooltip></el-table-column>
+					<el-table-column prop="build" label="楼栋号" align="center" width="400"></el-table-column>
+					<el-table-column prop="dom" label="宿舍号" show-overflow-tooltip></el-table-column>
 					<el-table-column label="操作" align="center" width="80">
 						<el-button type="text" class="del-btn" slot-scope="scope"
 							@click="handleDelete(scope.$index, scope.row)">删除
@@ -54,10 +54,10 @@
 				</el-table>
 				<div style="margin-top: 20px" class="table-footer">
 					<div class="pages">
-						<el-pagination layout="prev, pager, next" :total="9000"></el-pagination>
+						<el-pagination layout="prev, pager, next" :total="rows_total"></el-pagination>
 					</div>
 					<div class="export-table">
-						<el-button type="primary" size="small" @click="toggleSelection()">表格导出</el-button>
+						<el-button type="primary" size="small" @click="toggleSelection">表格导出</el-button>
 					</div>
 				</div>
 			</el-col>
@@ -66,16 +66,17 @@
 			<el-col :span="24" class="forth-row">
 				<!-- 编辑对话框 -->
 				<el-dialog title="编辑" :visible.sync="editdialogFormVisible" width="500px" top="0vh" class="my-dialog">
-					<hr style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
+					<hr
+						style="width: 100%; position: absolute; top: 60px; left: 0px;background-color: #CCCCCC;height: 1px;border: 0;">
 					<el-form :model="form">
 						<el-form-item label="水表ID：" :label-width="formLabelWidth">
-							<el-input v-model="form.id" autocomplete="off"></el-input>
+							<el-input v-model="form.user_id" autocomplete="off"></el-input>
 						</el-form-item>
 						<el-form-item label="楼栋号：" :label-width="formLabelWidth">
-							<el-input v-model="form.drom" autocomplete="off"></el-input>
+							<el-input v-model="form.build" autocomplete="off"></el-input>
 						</el-form-item>
 						<el-form-item label="宿舍号：" :label-width="formLabelWidth">
-							<el-input v-model="form.room" autocomplete="off"></el-input>
+							<el-input v-model="form.dom" autocomplete="off"></el-input>
 						</el-form-item>
 					</el-form>
 					<div slot="footer" class="dialog-footer">
@@ -86,7 +87,7 @@
 				<!-- 删除对话框 -->
 				<el-dialog :visible.sync="delDialogVisible" width="500px" center top="0vh" class="my-dialog">
 					<div class="box-icon"></div>
-					<span class="del-msg">确定删除该学生信息吗？</span>
+					<span class="del-msg">确定删除该水表信息吗？</span>
 					<span slot="footer" class="dialog-footer">
 						<el-button @click="delDialogVisible = false">取 消</el-button>
 						<el-button type="primary" @click="delDialogVisible = false">确 定</el-button>
@@ -109,54 +110,86 @@
 					room: '118'
 				},
 				formLabelWidth: '120px',
-				formInline: {
-					user: '',
-					options: [{
-						value: '选项1',
+				form_select: {
+					builds: [{
+						value: 0,
 						label: '全部'
-					}, {
-						value: '选项2',
-						label: '黄金糕'
 					}],
-					value: '选项1'
+					value: 0
 				},
-				tableData: [{
-					id: 'KB580002652',
-					drom: '18',
-					room: '118'
-				}, {
-					id: 'KB580002652',
-					drom: '18',
-					room: '118'
-				}, {
-					id: 'KB580002652',
-					drom: '18',
-					room: '118'
-				}, {
-					id: 'KB580002652',
-					drom: '18',
-					room: '118'
-				}, {
-					id: 'KB580002652',
-					drom: '18',
-					room: '118'
-				}, {
-					id: 'KB580002652',
-					drom: '18',
-					room: '118'
-				}, {
-					id: 'KB580002652',
-					drom: '18',
-					room: '118'
-				}, {
-					id: 'KB580002652',
-					drom: '18',
-					room: '118'
-				}],
+				tableData: [],
+				rows_total: 100,
 				multipleSelection: []
 			}
 		},
+		created() {
+			this.getTableData()
+		},
 		methods: {
+			/**
+			 * 获取下拉列表选择的id
+			 * @param {Object} vId
+			 */
+			selectGet(vId) {
+				console.log(vId);
+				let obj = {};
+				obj = this.form_select.builds.find((item) => {
+					return item.value === vId; //筛选出匹配数据
+				});
+				console.log(obj);
+				// 查询该栋的信息
+				this.$axios.get('/api/HotWaters/waterlist.action?page=1&rows=8')
+					.then(res => {
+						// console.log(res.data);
+						this.$message.success('获取数据成功！');
+						this.tableData = res.data.rows
+						this.rows_total = res.data.total
+						this.form_select.builds = [{
+							value: 0,
+							label: '全部'
+						}]
+						for (var i = 0; i < res.data.rows.length; i++) {
+							this.form_select.builds.push({
+								value: res.data.rows[i].id,
+								label: res.data.rows[i].build
+							})
+						}
+					})
+					.catch(err => {
+						console.log(err);
+						this.$message.error('请求异常');
+					})
+			},
+			/**
+			 * 获取数据，填充表格变量
+			 */
+			getTableData() {
+				let param = {
+					page: 1,
+					rows: 8
+				}
+				this.$axios.get('/api/HotWaters/waterlist.action?page=1&rows=8')
+					.then(res => {
+						// console.log(res.data);
+						this.$message.success('获取数据成功！');
+						this.tableData = res.data.rows
+						this.rows_total = res.data.total
+						this.form_select.builds = [{
+							value: 0,
+							label: '全部'
+						}]
+						for (var i = 0; i < res.data.rows.length; i++) {
+							this.form_select.builds.push({
+								value: res.data.rows[i].id,
+								label: res.data.rows[i].build
+							})
+						}
+					})
+					.catch(err => {
+						console.log(err);
+						this.$message.error('请求异常');
+					})
+			},
 			onSubmit() {
 				console.log('submit!');
 			},
@@ -166,14 +199,8 @@
 			handleClose(key, keyPath) {
 				console.log(key, keyPath);
 			},
-			toggleSelection(rows) {
-				if (rows) {
-					rows.forEach(row => {
-						this.$refs.multipleTable.toggleRowSelection(row);
-					});
-				} else {
-					this.$refs.multipleTable.clearSelection();
-				}
+			toggleSelection() {
+				console.log();
 			},
 			handleSelectionChange(val) {
 				this.multipleSelection = val;

src/components/index/Index.css

@@ -98,7 +98,12 @@
 	background: url(../../../static/images/feilvshezhi.png) center center no-repeat;
 	background-size: cover;
 }
-
+.el-menu-item .el-icon-zhgl {
+	width: 27px;
+	height: 27px;
+	background: url(../../../static/images/yonghuguanli.png) center center no-repeat;
+	background-size: cover;
+}
 .diwen {
 	position: fixed;
 	left: 76px;

src/components/login/Login.vue

@@ -29,6 +29,7 @@
 	export default {
 		data() {
 			var checkName = (rule, value, callback) => {
+				console.log(rule, value, callback);
 				if (!value) {
 					return callback(new Error('请输入账号'));
 				}
@@ -41,6 +42,7 @@
 				}, 30);
 			};
 			var validatePass = (rule, value, callback) => {
+				console.log(rule, value, callback);
 				if (value === '') {
 					callback(new Error('请输入密码'));
 				} else {
@@ -65,33 +67,35 @@
 			};
 		},
 		methods: {
+			onSubmit() {
+
+			},
 			submitForm(formName) {
+				let self = this;
 				this.$refs[formName].validate((valid) => {
-					if (valid) {
-						// alert('submit!');
-						this.login()
-					} else {
-						console.log('error submit!!');
-						return false;
-					}
-				});
-			},
-			login() {
-				// axios({
-				// 	type: "get",
-				// 	url: "请求的接口路径",
-				// 	params: {
-				// 		username: this.phone,
-				// 		password: this.password
-				// 	}
-				// }).then(res => {
-				// 	console.log(res);
-				// 	localStorage.setItem("token", this.phone);
-				this.$router.push({
-					name: "DevMgr"
+					this.loading = true;
+					requset.api_login(self.form)
+						.then(resp => {
+							this.loading = false;
+							if (resp.data.code == 200) {
+								let token = resp.data.data.token.access_token;
+								//存储用户名到数据库。
+								db.set("userName", resp.data.data.user.name);
+								//发送登录成功的action
+								this.loginAction(token);
+								this.$message("验证成功!");
+								this.$router.replace('/'); //跳转到首页
+							} else {
+								this.$message({
+									showClose: true,
+									message: resp.data.msg,
+									type: 'error'
+								});
+							}
+
+						})
 				});
-				// });
-			},
+			}
 		}
 	}
 </script>

src/main.js

@@ -5,13 +5,17 @@ import App from './App'
 import router from './router'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
-import axios from 'axios'; /* 引入axios进行地址访问*/
 import echarts from 'echarts'
+import axios from 'axios'; /* 引入axios进行地址访问*/
+
 
 Vue.use(ElementUI);
 
-Vue.prototype.$echarts = echarts
+axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
+// axios.defaults.baseURL='http://baibai.natapp1.cc'
+
 Vue.prototype.$axios = axios;
+Vue.prototype.$echarts = echarts
 
 Vue.config.productionTip = false
 
@@ -24,19 +28,3 @@ new Vue({
 	},
 	template: '<App/>'
 })
-
-
-router.beforeEach((to, from, next) => {
-	if (to.matched.some(m => m.meta.auth)) {
-		if (window.localStorage.isLogin === '1') {
-			next()
-		} else if (to.path !== '/') {
-			next({
-				path: '/login'
-			})
-			Vue.prototype.$message.warning('检测到您还未登录,请登录后操作！')
-		}
-	} else {
-		next()
-	}
-})

src/store/index.js

@@ -1,40 +1,59 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-Vue.use(Vuex)
-
-const key = 'user'
-const isLogin = 'isLogin'
-const store = new Vuex.Store({
-	state() {
-		return {
-			user: null,
-			isLogin: '0'
-		}
+Vue.use(Vuex);
+let store = new Vuex.Store({
+	state: {
+		loginStatus: 0,
+		token: '',
+		userName: ''
 	},
-	getters: {
-		getStorage: function(state) {
-			if (!state.user) {
-				state.user = JSON.parse(localStorage.getItem(key))
-				state.isLogin = localStorage.getItem(isLogin)
-			}
-			return state.user
+	mutations: {
+		loginSuccess(state) {
+			state.userName = db.get('userName');
+			state.loginStatus = 1
+		},
+		loginFail(state) {
+			state.loginStatus = 0
+		},
+		updateToken(state, token) {
+
+			state.token = token;
+			db.set('token', token);
+
+		},
+		loginOut(state) {
+			db.remove('token');
+			state.loginStatus = 0;
+			state.token = "";
 		}
 	},
-	mutations: {
-		$_setLogin(state, value) {
-			state.isLogin = value
-			localStorage.setItem(isLogin, value)
+	actions: {
+		loginAction({
+			commit
+		}, token) {
+
+			commit('loginSuccess');
+			commit('updateToken', token)
 		},
-		$_setStorage(state, value) {
-			state.user = value
-			localStorage.setItem(key, JSON.stringify(value))
+		tokenAction({
+			commit
+		}, token) {
+			commit('updateToken', token)
 		},
-		$_removeStorage(state) {
-			state.user = null
-			localStorage.removeItem(key)
+		loginOutAction({
+			commit
+		}) {
+			commit('loginOut')
 		}
+
 	}
 })
+// 页面刷新时，重新赋值token
+let token = db.get('token');
+if (token) {
+	store.commit('updateToken', token);
+	store.commit('loginSuccess')
+}
 
-export default store
+export default store