【完成】设备管理模块完成

config/index.js

@@ -13,6 +13,7 @@ module.exports = {
 		// 后端请求地址代理，配置后testIp再之后的页面调用时就直接指代 http://197.82.15.15:8088
 		proxyTable: {
 			'/api': {
+				// target: 'https://jtishfw.ncjti.edu.cn/jxch-smartmp/', // 你请求的第三方接口
 				target: 'http://baibai.natapp1.cc/', // 你请求的第三方接口
 				changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
 				pathRewrite: { // 路径重写，
@@ -22,7 +23,7 @@ module.exports = {
 		},
 
 		// Various Dev Server settings
-		host: 'localhost', // can be overwritten by process.env.HOST
+		host: '127.0.0.1', // 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,

src/components/dev_mgr/DevMgr.css

@@ -28,10 +28,18 @@
 	line-height: 54px;
 }
 
+.right-btn {
+	white-space: nowrap;
+}
+
 .right-btn .el-button {
 	margin-right: 30px;
 }
 
+.upload-demo {
+	display: unset;
+}
+
 .demo-form-inline {
 	display: flex;
 	justify-content: space-between;

src/components/dev_mgr/DevMgr.vue

@@ -4,19 +4,22 @@
 			<el-col :span="24" class="first-row">
 				<div class="tag">设备管理</div>
 				<span class="right-btn">
-					<el-button type="primary" size="small">表格导入</el-button>
-					<el-link type="primary">模板下载</el-link>
+					<el-upload class="upload-demo" action="" :http-request="uploadXLS" :show-file-list="false">
+						<el-button type="primary" size="small">表格导入</el-button>
+					</el-upload>
+					<el-link type="primary" href="http://baibai.natapp1.cc/HotWaters/download/模板.xls">模板下载</el-link>
 				</span>
 			</el-col>
 		</el-row>
 		<el-row>
 			<el-col :span="24" class="second-row">
-				<el-form :inline="true" :model="form_select" class="demo-form-inline">
+				<el-form :inline="true" class="demo-form-inline">
 					<el-form-item label="水表ID:" class="shuibiaoId">
-						<el-input placeholder="请输入水表ID"></el-input>
+						<el-input type="text" v-model="query_shuibiaoId" placeholder="请输入水表ID"
+							@input="idInputChange($event)"></el-input>
 					</el-form-item>
 					<el-form-item>
-						<el-button type="primary" @click="onSubmit">查找</el-button>
+						<el-button type="primary" @click="searchBtnSubmit">查找</el-button>
 					</el-form-item>
 					<el-form-item label="楼栋号:" class="loudonghao">
 						<el-select v-model="form_select.value" @change="selectGet(form_select.value)">
@@ -54,10 +57,11 @@
 				</el-table>
 				<div style="margin-top: 20px" class="table-footer">
 					<div class="pages">
-						<el-pagination layout="prev, pager, next" :total="rows_total"></el-pagination>
+						<el-pagination layout="prev, pager, next" :page-size="8" :total="rows_total"
+							@current-change="handleCurrentChange"></el-pagination>
 					</div>
 					<div class="export-table">
-						<el-button type="primary" size="small" @click="toggleSelection">表格导出</el-button>
+						<el-button type="primary" size="small" @click="handleDownloadTable">表格导出</el-button>
 					</div>
 				</div>
 			</el-col>
@@ -65,32 +69,34 @@
 		<el-row>
 			<el-col :span="24" class="forth-row">
 				<!-- 编辑对话框 -->
-				<el-dialog title="编辑" :visible.sync="editdialogFormVisible" width="500px" top="0vh" class="my-dialog">
+				<el-dialog title="编辑" :visible.sync="editdialogFormVisible" width="500px" top="0vh" class="my-dialog"
+					:close-on-click-modal="false" :close-on-press-escape="false">
 					<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.user_id" autocomplete="off"></el-input>
+							<el-input v-model="form.user_id" autocomplete="off" maxlength="13"></el-input>
 						</el-form-item>
 						<el-form-item label="楼栋号：" :label-width="formLabelWidth">
-							<el-input v-model="form.build" autocomplete="off"></el-input>
+							<el-input v-model="form.build" autocomplete="off" maxlength="4"></el-input>
 						</el-form-item>
 						<el-form-item label="宿舍号：" :label-width="formLabelWidth">
-							<el-input v-model="form.dom" autocomplete="off"></el-input>
+							<el-input v-model="form.dom" autocomplete="off" maxlength="6"></el-input>
 						</el-form-item>
 					</el-form>
 					<div slot="footer" class="dialog-footer">
 						<el-button @click="editdialogFormVisible = false">取 消</el-button>
-						<el-button type="primary" @click="editdialogFormVisible = false">确 定</el-button>
+						<el-button type="primary" @click="handleEditRow">确 定</el-button>
 					</div>
 				</el-dialog>
 				<!-- 删除对话框 -->
-				<el-dialog :visible.sync="delDialogVisible" width="500px" center top="0vh" class="my-dialog">
+				<el-dialog :visible.sync="delDialogVisible" :close-on-click-modal="false" :close-on-press-escape="false"
+					width="500px" center top="0vh" class="my-dialog">
 					<div class="box-icon"></div>
 					<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>
+						<el-button type="primary" @click="handleDelRow">确 定</el-button>
 					</span>
 				</el-dialog>
 			</el-col>
@@ -102,116 +108,320 @@
 	export default {
 		data() {
 			return {
-				editdialogFormVisible: false,
-				delDialogVisible: false,
-				form: {
-					id: 'KB580002652',
-					drom: '18',
-					room: '118'
+				// fileList: [],
+				query_shuibiaoId: '', //  需要查找的水表id
+				editdialogFormVisible: false, // 控制编辑框的显示隐藏
+				delDialogVisible: false, // 控制删除框的显示隐藏
+				delRowId: 0, // 删除行的id
+				currentPage: 1, // 当前所在页码
+				pageRows: 8, // 每页显示的行数
+				form: { // 编辑框的数据绑定
+					user_id: '',
+					build: '',
+					dom: '',
+					id: 0
 				},
-				formLabelWidth: '120px',
-				form_select: {
+				formLabelWidth: '120px', //  表单的宽度
+				form_select: { // 下拉列表的数据绑定
 					builds: [{
 						value: 0,
 						label: '全部'
 					}],
-					value: 0
+					value: 0,
+					label: ''
 				},
-				tableData: [],
-				rows_total: 100,
-				multipleSelection: []
+				tableData: [], // 表格需要显示的数据
+				rows_total: 0, // 总记录数
+				// multipleSelection: []  // 多选后，选择的所有行的数据数组
 			}
 		},
 		created() {
-			this.getTableData()
+			let params = {
+				page: this.currentPage,
+				rows: this.pageRows
+			}
+			// 更新表格
+			this.updateTable('/HotWaters/waterlist.action', params)
+			// 
+			this.getBuilds('/HotWaters/watergetBuilds.action')
 		},
 		methods: {
+			uploadXLS(param) {
+				console.log(param);
+				const formData = new FormData()
+				formData.append('file', param.file)
+				const url = 'https://jtishfw.ncjti.edu.cn/jxch-smartmp/api/HotWaters/upload'
+				this.$axios.post(url, formData).then(data => {
+					this.$message.success('导入成功！')
+				}).catch(response => {
+					this.$message.error('导入成功！')
+				})
+			},
 			/**
-			 * 获取下拉列表选择的id
+			 * 获取楼栋号，填充下拉列表
+			 */
+			getBuilds(url) {
+				var _this = this
+				this.$axios.get('/api' + url)
+					.then(res => {
+						// console.log(res.data);
+						if (typeof(res.data.builds) != 'undefined' && res.data.builds != '') {
+							this.form_select.builds = [{
+								value: 0,
+								label: '全部'
+							}]
+							for (var i = 0; i < res.data.builds.length; i++) {
+								let tmp = {
+									value: i + 1,
+									label: res.data.builds[i]
+								}
+								this.form_select.builds.push(tmp)
+							}
+						} else {
+							_this.$message.success('暂无数据！');
+						}
+					})
+					.catch(err => {
+						// console.log(err);
+						_this.$message.error('请求异常: ' + err);
+					})
+			},
+			/**
+			 * 获取数据，填充表格变量
+			 */
+			updateTable(url, params) {
+				var _this = this
+				_this.tableData = []
+				_this.rows_total = 0
+				this.$axios.get('/api' + url, {
+						params: params
+					})
+					.then(res => {
+						// console.log(res.data);
+						if (typeof(res.data.rows) != 'undefined' && res.data.rows != '') {
+							// _this.$message.success('数据加载成功！');
+							_this.tableData = res.data.rows
+							_this.rows_total = res.data.total
+						} else {
+							_this.$message.success('暂无数据！');
+						}
+					})
+					.catch(err => {
+						// console.log(err);
+						_this.$message.error('请求异常: ' + err);
+					})
+			},
+			/**
+			 * 获取下拉列表选择的id，并刷新表格
 			 * @param {Object} vId
 			 */
 			selectGet(vId) {
-				console.log(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')
+				// console.log(obj);
+				this.form_select.value = obj.value
+				this.form_select.label = obj.label
+				if (this.form_select.value == 0) {
+					let params = {
+						page: this.currentPage,
+						rows: this.pageRows
+					}
+					this.updateTable('/HotWaters/waterlist.action', params)
+				} else {
+					let params = {
+						build: this.form_select.label,
+						page: 1,
+						rows: 8
+					}
+					// 查询该栋的信息
+					this.updateTable('/HotWaters/waterquerylist.action', params)
+				}
+			},
+			/**
+			 * 改变页码
+			 * @param {Object} val
+			 */
+			handleCurrentChange(val) {
+				this.currentPage = val
+				if (this.form_select.value == 0) {
+					let params = {
+						page: this.currentPage,
+						rows: this.pageRows
+					}
+					this.updateTable('/HotWaters/waterlist.action', params)
+				} else {
+					let params = {
+						build: this.form_select.label,
+						page: this.currentPage,
+						rows: 8
+					}
+					// 查询该栋的信息
+					this.updateTable('/HotWaters/waterquerylist.action', params)
+				}
+			},
+			/**
+			 * 导出表格
+			 */
+			handleDownloadTable() {
+				this.$axios.get('/api/HotWaters/watertoExcel.action')
 					.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
-							})
+						console.log(res.data.downurl);
+						if (typeof(res.data.downurl) != 'undefined' && res.data.downurl != '') {
+							window.open('https://jtishfw.ncjti.edu.cn/jxch-smartmp' + res.data.downurl)
+						} else {
+							_this.$message.error('未获取到表格！');
 						}
 					})
 					.catch(err => {
-						console.log(err);
-						this.$message.error('请求异常');
+						// console.log(err);
+						_this.$message.error('请求异常: ' + err);
 					})
 			},
 			/**
-			 * 获取数据，填充表格变量
+			 * 显示删除提示框，并获取对应的id
+			 * @param {Object} index
+			 * @param {Object} row
 			 */
-			getTableData() {
-				let param = {
-					page: 1,
-					rows: 8
-				}
-				this.$axios.get('/api/HotWaters/waterlist.action?page=1&rows=8')
+			handleDelete(index, row) {
+				this.delDialogVisible = true
+				// console.log(index, row);
+				this.delRowId = row.id
+			},
+			/**
+			 * 删除指定的id所在的行
+			 */
+			handleDelRow() {
+				var _this = this
+				this.$axios.get('/api/HotWaters/waterdelBuild.action', {
+						params: {
+							id: this.delRowId
+						}
+					})
 					.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
-							})
+						if (typeof(res.data.msg) != 'undefined' && res.data.msg != '' && res.data.msg == '删除成功') {
+							_this.$message.success('数据删除成功！');
+							let params = {
+								page: this.currentPage,
+								rows: this.pageRows
+							}
+							this.updateTable('/HotWaters/waterlist.action', params)
+						} else {
+							_this.$message.error('数据删除失败！');
 						}
+						this.delDialogVisible = false
 					})
 					.catch(err => {
-						console.log(err);
-						this.$message.error('请求异常');
+						// console.log(err);
+						_this.$message.error('请求异常: ' + err);
 					})
 			},
-			onSubmit() {
-				console.log('submit!');
+			/**
+			 * 显示编辑提示框，并获取对应的id等数据
+			 * @param {Object} index
+			 * @param {Object} row
+			 */
+			handleEdit(index, row) {
+				console.log(index, row);
+				this.form.user_id = row.user_id
+				this.form.build = row.build
+				this.form.dom = row.dom
+				this.form.id = row.id
+				this.editdialogFormVisible = true
 			},
-			handleOpen(key, keyPath) {
-				console.log(key, keyPath);
+			/**
+			 * 更新指定的id所在的行
+			 */
+			handleEditRow() {
+				var _this = this
+				this.$axios.get('/api/HotWaters/waterupdateBuild.action', {
+						params: {
+							id: this.form.id,
+							user_id: this.form.user_id,
+							dom: this.form.dom,
+							build: this.form.build
+						}
+					})
+					.then(res => {
+						console.log(res.data);
+						if (typeof(res.data.msg) != 'undefined' && res.data.msg != '' && res.data.msg == '修改成功') {
+							_this.$message.success('数据修改成功！');
+							let params = {
+								page: this.currentPage,
+								rows: this.pageRows
+							}
+							this.updateTable('/HotWaters/waterlist.action', params)
+						} else {
+							_this.$message.error('数据修改失败！');
+						}
+						this.editdialogFormVisible = false
+					})
+					.catch(err => {
+						// console.log(err);
+						_this.$message.error('请求异常: ' + err);
+					})
 			},
-			handleClose(key, keyPath) {
-				console.log(key, keyPath);
+			/**
+			 * 更新输入框
+			 * @param {Object} e
+			 */
+			idInputChange(e) {
+				// console.log(e);
+				this.$forceUpdate()
 			},
-			toggleSelection() {
-				console.log();
+			/**
+			 * 根据设备id查找
+			 */
+			searchBtnSubmit() {
+				// console.log(this.query_shuibiaoId);
+				var params = {}
+				if (this.query_shuibiaoId.trim()) {
+					// 查询指定水表id的信息
+					if (this.form_select.value == 0) {
+						params = {
+							user_id: this.query_shuibiaoId,
+							page: 1,
+							rows: this.pageRows
+						}
+					} else {
+						// 查询指定水表id + 楼栋的信息
+						params = {
+							user_id: this.query_shuibiaoId,
+							build: this.form_select.label,
+							page: 1,
+							rows: this.pageRows
+						}
+					}
+					this.updateTable('/HotWaters/waterquerylist.action', params)
+					this.$message.success('水表id包含：' + this.query_shuibiaoId + ' 查询完成！')
+				} else {
+					if (this.form_select.value == 0) {
+						params = {
+							page: 1,
+							rows: this.pageRows
+						}
+						this.updateTable('/HotWaters/waterquerylist.action', params)
+					} else {
+						params = {
+							build: this.form_select.label,
+							page: 1,
+							rows: this.pageRows
+						}
+						this.updateTable('/HotWaters/waterquerylist.action', params)
+					}
+					// this.$message.error('请输入水表id 或 选择 楼栋号')
+				}
 			},
+			/**
+			 * 多选数组的获取
+			 * @param {Object} val
+			 */
 			handleSelectionChange(val) {
-				this.multipleSelection = val;
-			},
-			handleEdit(index, row) {
-				this.editdialogFormVisible = true
-				console.log(index, row);
-			},
-			handleDelete(index, row) {
-				this.delDialogVisible = true
-				console.log(index, row);
+				// console.log(val);
+				// this.multipleSelection = val;
 			}
 		}
 	}

src/main.js

@@ -6,14 +6,19 @@ import router from './router'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import echarts from 'echarts'
-import axios from 'axios'; /* 引入axios进行地址访问*/
+import axios from "axios"
+import qs from "qs"
 
+// axios.defaults.timeout = 3000 //响应时间
+// axios.defaults.headers.post['Content-Type'] = 'multipart/form-data'; //配置请求头
+// axios.defaults.baseURL = process.env.NODE_HOST; // 配置接口地址
+// axios.defaults.baseURL='http://baibai.natapp1.cc'
+console.log(process.env.NODE_ENV)
+// alert('环境：' + process.env.NODE_ENV)
 
 Vue.use(ElementUI);
 
-axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
-// axios.defaults.baseURL='http://baibai.natapp1.cc'
-
+Vue.prototype.$qs = qs;
 Vue.prototype.$axios = axios;
 Vue.prototype.$echarts = echarts