数据对接bug修复

common/export.js

@@ -0,0 +1,171 @@
+//日期转时间戳
+function getUnixTime(dateStr){
+    var newstr = dateStr.replace(/-/g,'/'); 
+    var date =  new Date(newstr); 
+    var time_str = date.getTime().toString();
+    return time_str.substr(0, 10);
+}
+
+//时间戳转日期,falg:true表示只要年月日,part: year month date
+function toDate(number,flag,part) {
+  var n = number;
+  var date = new Date(parseInt(n) * 1000);
+  var y = date.getFullYear();
+  var m = date.getMonth() + 1;
+  m = m < 10 ? ('0' + m) : m;
+  var d = date.getDate();
+  d = d < 10 ? ('0' + d) : d;
+  var h = date.getHours();
+  h = h < 10 ? ('0' + h) : h;
+  var minute = date.getMinutes();
+  var second = date.getSeconds();
+  minute = minute < 10 ? ('0' + minute) : minute;
+  second = second < 10 ? ('0' + second) : second;
+  if(flag){
+      if(part == "year"){
+          return y;
+      }else if(part == "month"){
+          return m;
+      }else if(part == "date"){
+          return n;
+      }
+      return y + '-' + m + '-' + d;
+  }
+  return y + '-' + m + '-' + d + ' ' + h + ':' + minute+':' + second;
+}
+
+//判断两个日期时间戳相差多少天,参数为时间戳
+function dateCompare(dateTimeStamp1,dateTimeStamp2){
+    var dayNum = 0;
+    if(dateTimeStamp1 > dateTimeStamp2){
+        dayNum = Math.floor((dateTimeStamp1 - dateTimeStamp2) / 86400);
+    }else{
+        dayNum = Math.floor((dateTimeStamp2 - dateTimeStamp1) / 86400);
+    }
+    return dayNum;
+}
+
+//判断过去某个时间点到当前时间是否达到多少天,可以用来定期清理缓存
+function datePassDays(dateTimeStamp,days){
+    var now = getUnixTime(formatDateThis(new Date()));
+    var diffValue = now - dateTimeStamp;
+    var limitTime = days * 86400;
+    if(diffValue >= limitTime){
+        return true;
+    }
+    return false;
+}
+
+//当前日期加减天数,falg:true表示只要年月日
+function mathChangeDate(date,method,days,flag){
+  //method:'+' || '-'
+  //ios不解析带'-'的日期格式，要转成'/'，不然Nan，切记
+  var dateVal = date.replace(/-/g, '/');
+  var timestamp = Date.parse(dateVal);
+  if(method == '+'){
+    timestamp = timestamp / 1000 + 24 * 60 * 60 * days;
+  } else if (method == '-'){
+    timestamp = timestamp / 1000 - 24 * 60 * 60 * days;
+  }
+  return toDate(timestamp,flag);
+}
+
+//时间戳转换具体时间描述(传入数值型时间戳)
+function getDateDiff(dateTimeStamp) {
+  var result = '';
+  var minute = 1 * 60;
+  var hour = minute * 60;
+  var day = hour * 24;
+  var halfamonth = day * 15;
+  var month = day * 30;
+  var now = getUnixTime(formatDateThis(new Date()));//有些特殊 不能使用 new Date()
+  var diffValue = now - dateTimeStamp;
+  if (diffValue < 0) { return; }
+  var monthC = diffValue / month;
+  var weekC = diffValue / (7 * day);
+  var dayC = diffValue / day;
+  var hourC = diffValue / hour;
+  var minC = diffValue / minute;
+  
+  if (monthC >= 1) {
+    result = "" + parseInt(monthC) + "月前";
+  }
+  else if (weekC >= 1) {
+    result = "" + parseInt(weekC) + "周前";
+  }
+  else if (dayC >= 1) {
+    result = "" + parseInt(dayC) + "天前";
+  }
+  else if (hourC >= 1) {
+    result = "" + parseInt(hourC) + "小时前";
+  }
+  else if (minC >= 1) {
+    result = "" + parseInt(minC) + "分钟前";
+  } else
+    result = "刚刚";
+  return result;
+};
+
+//获取当前年份，月份， 例： getCurrentTime("year")
+const getCurrentTime = (method,date=new Date()) => {
+    if(method == "year"){
+        return date.getFullYear();
+    }else if(method == "month"){
+        return date.getMonth() + 1;
+    }
+    return date;
+}
+
+//获取当前服务器时间,参数直接用 new Date() 就可以了
+const formatDateThis = (date,lab='-') => {
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const hour = date.getHours();
+  const minute = date.getMinutes();
+  const second = date.getSeconds();
+  return [year, month, day].map(formatNumber).join(lab) +' '+ [hour, minute, second].map(formatNumber).join(':');
+}
+
+const formatTime = (date,lab='-') => {
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  return [year, month, day].map(formatNumber).join(lab);
+}
+const formatTimes = time => {
+  const hour = time.getHours();
+  const minute = time.getMinutes();
+  const second = time.getSeconds();
+  return [hour, minute,second].map(formatNumber).join(':');
+}
+//补0
+const formatNumber = n => {
+  n = n.toString();
+  return n[1] ? n : '0' + n;
+}
+
+//比较两个时间大小(格式参考yyyy-mm-dd hh:mm:ss)
+function compareTime(startTime,endTime){
+  //结束时间大于开始时间就是true  ， 反之则为 false
+  var sn = getUnixTime(startTime) * 1;
+  var en = getUnixTime(endTime) * 1;
+  if(en > sn){
+    return true;
+  }
+  return false;
+}
+
+module.exports = {
+  dateCompare:dateCompare,
+  getCurrentTime:getCurrentTime,
+  getUnixTime:getUnixTime,
+  formatDateThis:formatDateThis,
+  formatTime: formatTime,
+  formatTimes: formatTimes,
+  toDate: toDate,
+  getDateDiff: getDateDiff,
+  mathChangeDate: mathChangeDate,
+  compareTime: compareTime,
+  datePassDays:datePassDays
+}

main.js

@@ -12,6 +12,10 @@ Vue.component('cu-custom',cuCustom)
  //配置公共方法
  import common from './common/common.js'
  Vue.prototype.$noMultipleClicks = common.noMultipleClicks; // (禁止重复点击)
+ 
+ 
+ import JsonExcel from 'vue-json-excel'
+ Vue.component('downloadExcel', JsonExcel)
  
 
 

manifest.json

@@ -118,7 +118,7 @@
         "enable" : false
     },
     "h5" : {
-        "title" : "伍继",
+        "title" : "智慧消防",
         "router" : {
             "mode" : "hash"
         },

package-lock.json

@@ -4,6 +4,11 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "downloadjs": {
+      "version": "1.4.7",
+      "resolved": "https://registry.nlark.com/downloadjs/download/downloadjs-1.4.7.tgz",
+      "integrity": "sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw="
+    },
     "echarts": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.0.2.tgz",
@@ -28,6 +33,14 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
       "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
     },
+    "vue-json-excel": {
+      "version": "0.3.0",
+      "resolved": "https://registry.nlark.com/vue-json-excel/download/vue-json-excel-0.3.0.tgz",
+      "integrity": "sha1-csvkoARyAlntxlVVo/ByGYz3kUY=",
+      "requires": {
+        "downloadjs": "^1.4.7"
+      }
+    },
     "zrender": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.0.4.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "echarts": "^5.0.2",
     "jweixin-module": "^1.6.0",
-    "mpvue-echarts": "^0.3.2"
+    "mpvue-echarts": "^0.3.2",
+    "vue-json-excel": "^0.3.0"
   }
 }

pages/deviceManage/deviceAdd/deviceAdd.vue

@@ -65,9 +65,9 @@
 
 				<select name="" id="" placeholder="" v-model="formMess.transfer_type">
 					<option value="0">请选择传输方式</option>
-					<option  v-if="this.formMess.type!=1&&this.formMess.type!=7" value="NB">NB</option>
+					<option  v-if="this.formMess.type==2||this.formMess.type==5" value="NB">NB</option>
 					<option value="4G">4G</option>
-					<option v-if="this.formMess.type!=1&&this.formMess.type!=7" value="Lora">Lora</option>
+					<option v-if="this.formMess.type==2||this.formMess.type==5" value="Lora">Lora</option>
 				</select>
 			</view>
 			<view class="form-item margin-top">
@@ -87,7 +87,7 @@
 
 
 			<!-- 水表NB必填参数 start -->
-			<block v-if="this.formMess.transfer_type=='NB'&&this.formMess.type==2">
+			<block v-if="this.formMess.transfer_type=='NB'&&(this.formMess.type==2||this.formMess.type==5)">
 				<view class="form-item" >
 					<view class="title"><text class="necessary">*</text>NB类型:</view>
 					<select name="" id=""  v-model="formMess.deviceType">
@@ -286,62 +286,78 @@
 			async submit() {
 				//提交验证
 				
-				// if (!this.formMess.device_code.replace(/^\s*/g,'')) {
-				// 	uni.showToast({
-				// 		title: "请输入设备编号",
-				// 		icon: "none"
-				// 	});
-				// 	return
-				// }
-				// if (!this.formMess.device_name.replace(/^\s*/g,'')) {
-				// 	uni.showToast({
-				// 		title: "请输入设备名称",
-				// 		icon: "none"
-				// 	});
-				// 	return
-				// }
-				// if (!this.formMess.unitinfo.replace(/^\s*/g,'')) {
-				// 	uni.showToast({
-				// 		title: "请输入单元地址",
-				// 		icon: "none"
-				// 	});
-				// 	return
-				// }
-				// if (!this.formMess.louyu) {
-				// 	uni.showToast({
-				// 		title: "请选择所属楼层",
-				// 		icon: "none"
-				// 	});
-				// 	return
-				// }
-				// if (!this.formMess.sim.replace(/^\s*/g,'')) {
-				// 	uni.showToast({
-				// 		title: "请输入物联网卡号",
-				// 		icon: "none"
-				// 	});
-				// 	return
-				// }
-				// if (!this.formMess.company_code) {
-				// 	uni.showToast({
-				// 		title: "请选择所在单位",
-				// 		icon: "none"
-				// 	});
-				// 	return
-				// }
-				// if (!this.formMess.type) {
-				// 	uni.showToast({
-				// 		title: "请选择设备类型",
-				// 		icon: "none"
-				// 	});
-				// 	return
-				// }
-				// if (!this.formMess.transfer_type) {
-				// 	uni.showToast({
-				// 		title: "请选择传输方式",
-				// 		icon: "none"
-				// 	});
-				// 	return
-				// }
+				if (!this.formMess.device_code) {
+					uni.showToast({
+						title: "请输入设备编号",
+						icon: "none"
+					});
+					return
+				}else{
+					var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{2,10}$/;
+					if(!reg.test(this.formMess.device_code)){
+						uni.showToast({
+							title: "请输入字母和数字结合的设备编号",
+							icon: "none"
+						});
+						return
+					}
+				}
+				
+				
+				
+				
+		
+					
+					
+				if (!this.formMess.device_name.replace(/^\s*/g,'')) {
+					uni.showToast({
+						title: "请输入设备名称",
+						icon: "none"
+					});
+					return
+				}
+				if (!this.formMess.unitinfo.replace(/^\s*/g,'')) {
+					uni.showToast({
+						title: "请输入单元地址",
+						icon: "none"
+					});
+					return
+				}
+				if (!this.formMess.louyu) {
+					uni.showToast({
+						title: "请选择所属楼层",
+						icon: "none"
+					});
+					return
+				}
+				if (!this.formMess.sim.replace(/^\s*/g,'')) {
+					uni.showToast({
+						title: "请输入物联网卡号",
+						icon: "none"
+					});
+					return
+				}
+				if (!this.formMess.company_code) {
+					uni.showToast({
+						title: "请选择所在单位",
+						icon: "none"
+					});
+					return
+				}
+				if (!this.formMess.type) {
+					uni.showToast({
+						title: "请选择设备类型",
+						icon: "none"
+					});
+					return
+				}
+				if (!this.formMess.transfer_type) {
+					uni.showToast({
+						title: "请选择传输方式",
+						icon: "none"
+					});
+					return
+				}
 				
 				if(this.formMess.type==1&&this.formMess.transfer_type=="4G"){
 					if (this.formMess.owner_xh_a=='z') {
@@ -367,10 +383,10 @@
 					}
 				}
 				
-				if(this.formMess.transfer_type=='NB'&&this.formMess.type==2){
+				if(this.formMess.transfer_type=='NB'&&(this.formMess.type==2||this.formMess.type==5)){
 					if (!this.formMess.deviceType) {
 						uni.showToast({
-							title: "请选择水表设备类型",
+							title: "请选择水表NB设备类型",
 							icon: "none"
 						});
 						return
@@ -459,7 +475,7 @@
 					this.addDevice(queryParam)
 					return;
 				}
-				if (this.formMess.transfer_type=='NB'&&this.formMess.type==2) {
+				if (this.formMess.transfer_type=='NB'&&(this.formMess.type==2||this.formMess.type==5)) {
 					alert(2)
 					queryParam.deviceType = this.formMess.deviceType;
 					queryParam.manufacturerName = this.formMess.manufacturerName;

pages/deviceManage/deviceManage.vue

@@ -45,7 +45,7 @@
 			<view class="processList deviceRegistList" style="height: calc(100vh - 470rpx);">
 				<checkbox-group @change="changeCheckbox">
 					<view class="cu-list menu-avatar ">
-						<view class=" site-item text-center margin-top" v-if="!newDeviceManage.length" >暂无结果</view>
+						<view class=" site-item text-center margin-top" v-if="!newDeviceManage.length">暂无结果</view>
 						<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''"
 							v-for="(item,index) in deviceManage" :key="index" :data-target="'move-box-' + index">
 							<view class="cu-form-group margin-top">
@@ -54,7 +54,7 @@
 							</view>
 							<view class="cu-avatar round lg" style="background-image:url(../../static/device-icon.png)">
 							</view>
-							<view class="content" @longpress="showDetail(item)" >
+							<view class="content" @longpress="showDetail(item)">
 								<view class="pro-title">
 									<view class="cut">{{item.owner_name}}</view>
 								</view>
@@ -67,12 +67,12 @@
 
 								<view class="showDetailEdit" v-if="item.isShow">
 									<view @tap="goDeviceEdit(item)">修改设备</view>
-								<!-- 	<view @tap="deleteItem2" data-target="DialogModal2" :data-id='item.id'
+									<!-- 	<view @tap="deleteItem2" data-target="DialogModal2" :data-id='item.id'
 										:data-index='index'>删除设备</view> -->
 								</view>
-								
-								
-								
+
+
+
 							</view>
 							<view class="nav-right num">
 								<view class="text-grey">
@@ -101,7 +101,16 @@
 			</view>
 			<view class="share-item  text-center">
 				<view><text class="icon iconfont margin-xs" style="color:#FF642E">&#xe66e;</text></view>
-				<view @tap="showModal" data-target="DialogModal">导出</view>
+				<view @tap="showModal" data-target="DialogModal" v-if="this.exportData.length">
+						导出
+				</view>
+				<view @tap="showModal" data-target="DialogModal" v-else>
+					<download-excel class="export-excel-wrapper" :data="exportData" :fields="json_fields" header='导出数据'
+						name="设备管理数据表.xls">
+						导出
+					</download-excel>
+					
+				</view>
 
 			</view>
 			<view class="checkAll" style="display:inline-block">
@@ -117,7 +126,7 @@
 		<!-- 分享区域  end-->
 
 		<!-- 导出弹框 -->
-		<export-modal :modalName='modalName' @fatherHideModal="hideModal()"></export-modal>
+		<!-- <export-modal :modalName='modalName' @fatherHideModal="hideModal()"></export-modal> -->
 		<!-- 导出弹框 end -->
 
 		<!-- 删除弹框 -->
@@ -181,6 +190,15 @@
 		},
 		data() {
 			return {
+				
+				json_fields: {
+					"单位编号": "company", //常规字段
+					"状态": "device_state",
+					"设备编号": "owner_code", 
+					"设备名称": "owner_name",
+					"单元地址": "unitinfo",
+					"创建时间": "install_time",
+				},
 
 				deviceManage: [],
 				validCode: '',
@@ -207,7 +225,7 @@
 
 				// checkAllFlag:false,
 
-
+				exportData:[],
 				isChecked: false,
 				checkedArr: [], //复选框选中的值
 				allChecked: false //是否全选
@@ -233,13 +251,13 @@
 
 		mounted() {
 			document.addEventListener('click', (event) => {
-				
-				
+
+
 				if (event.target.className != 'showDetailEdit') {
 					this.deviceManage.forEach(item => {
 						item.isShow = false;
 					})
-	
+
 
 				}
 			})
@@ -268,7 +286,6 @@
 					showLoading: true
 				})
 				this.deviceManage = res.data.data;
-
 			},
 
 			// 页面跳转
@@ -288,9 +305,61 @@
 				if (this.checkedArr.length == 0) {
 					alert('请选择至少一条需要导出的数据')
 				} else {
-					this.modalName = e.currentTarget.dataset.target
+					this.modalName = e.currentTarget.dataset.target;
+					
+					// this.getDataExport()
 				}
 			},
+			getDataExport() {
+				const base64 = s => window.btoa(unescape(encodeURIComponent(s)));
+				// let exportData = [];
+				let newData = [];
+				this.exportData = this.deviceManage.filter((item) => this.checkedArr.includes(item.id));
+				this.exportData.forEach(function(item, index) {
+					newData.push({
+						company: item.company,
+						device_state: item.device_state,
+						owner_code: item.owner_code,
+						unitinfo: item.unitinfo,
+						owner_name: item.owner_name,
+						install_time: item.install_time,
+					})
+				});
+				console.log('newData')
+				console.log(newData);
+				let str =
+					'<tr style="text-align:center"><th>单位编号</th><th>状态</th><th>设备编号</th><th>设备名称</th><th>单位地址</th><th>创建时间</th></tr>';
+				// 循环遍历，每行加入tr标签，每个单元格加td标签
+				for (let i = 0; i < newData.length; i++) {
+					str += '<tr style="text-align:center">';
+					for (const key in newData[i]) {
+						// 增加\t为了不让表格显示科学计数法或者其他格式
+						str += `<td x:str>${ newData[i][key] + '\t'}</td>`;
+					}
+					str += '</tr>';
+				}
+				// Worksheet名
+				const worksheet = 'Sheet1'
+				const uri = 'data:application/vnd.ms-excel;base64,';
+
+				// 下载的表格模板数据
+				let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
+				          xmlns:x="urn:schemas-microsoft-com:office:excel"
+				          xmlns="http://www.w3.org/TR/REC-html40">
+				          <head><meta charset='UTF-8'><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
+				            <x:Name>${worksheet}</x:Name>
+				            <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
+				            </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
+				            </head><body><table>${str}</table></body></html>`;
+				
+
+				// 通过创建a标签实现
+				const link = document.createElement("a");
+				link.href = uri + base64(template);
+				// 对下载的文件命名
+				link.download = "设备注册管理数据表.xls";
+				link.click();
+			},
 
 			//关闭弹框
 			hideModal(e) {
@@ -299,16 +368,16 @@
 
 			//删除弹出框操作
 			deleteItem(e) {
-				
-				uni.showModal({
-					showCancel: false,
-					content: '暂不支持删除功能'
-				});
-				// if (this.checkedArr.length == 0) {
-				// 	alert('请选择至少一条需要删除的数据')
-				// } else {
-				// 	this.modalName = e.currentTarget.dataset.target;
-				// }
+
+				// uni.showModal({
+				// 	showCancel: false,
+				// 	content: '暂不支持删除功能'
+				// });
+				if (this.checkedArr.length == 0) {
+					alert('请选择至少一条需要删除的数据')
+				} else {
+					this.modalName = e.currentTarget.dataset.target;
+				}
 			},
 			deleteItem2(e) {
 				this.checkedArr.push(e.target.dataset.id);
@@ -318,9 +387,6 @@
 				this.modalName = e.currentTarget.dataset.target;
 			},
 			confirmDelete() {
-				// alert(this.deleteIndex)
-				// this.deviceManage.splice(this.deleteIndex,1);
-
 				this.deviceManage = this.deviceManage.filter((item) => !this.checkedArr.includes(item.id));
 				console.log('this.deviceManage')
 				console.log(this.deviceManage)
@@ -334,7 +400,7 @@
 
 			// 隐藏显示
 			showDetail(e) {
-				
+
 				console.log(this.deviceManage)
 				// console.log('e')
 				// console.log(e)

pages/test/export.vue

@@ -0,0 +1,77 @@
+<template>
+	<view>
+		<!-- 多个复选框，带全选 -->
+		<view>
+			<checkbox-group class="block" @change="changeCheckbox">
+				<view v-for="item in newDeviceManage" :key="item.id">				
+					<checkbox :value="String(item.id)" :checked="checkedArr.includes(String(item.id))" :class="{'checked':checkedArr.includes(String(item.id))}"></checkbox>
+					<text>{{item.title}}</text>
+				</view>
+			</checkbox-group>
+		</view>
+		<view>
+			<checkbox-group @change="allChoose">
+				<label>
+					<checkbox value="all" :class="{'checked':allChecked}" :checked="allChecked?true:false"></checkbox> 全选
+				</label>
+			</checkbox-group>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				isChecked:false,
+				newDeviceManage:[
+					{'id':0,'title':'选项一'},
+					{'id':1,'title':'选项二'},
+					{'id':2,'title':'选项三'},
+					{'id':3,'title':'选项四'},
+					{'id':4,'title':'选项五'},
+					{'id':5,'title':'选项六'},
+					{'id':6,'title':'选项七'},
+					{'id':7,'title':'选项八'},
+					{'id':8,'title':'选项九'},
+					{'id':9,'title':'选项十'}
+				],
+				checkedArr:[], //复选框选中的值
+				allChecked:false //是否全选
+			}
+		},
+		methods: {
+			// 多选复选框改变事件
+			changeCheckbox(e){
+				this.checkedArr = e.detail.value;
+				// 如果选择的数组中有值，并且长度等于列表的长度，就是全选
+				if(this.checkedArr.length>0 && this.checkedArr.length==this.newDeviceManage.length){
+					this.allChecked=true;
+				}else{
+					this.allChecked=false;
+				}
+			},
+			// 全选事件
+			allChoose(e){
+				let chooseItem = e.detail.value;
+				// 全选
+				if(chooseItem[0]=='all'){
+					this.allChecked=true;
+					for(let item of this.newDeviceManage){
+						let itemVal=String(item.id);
+						if(!this.checkedArr.includes(itemVal)){
+							this.checkedArr.push(itemVal);
+						}
+					}					
+				}else{
+					// 取消全选
+					this.allChecked=false;
+					this.checkedArr=[];
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

pages/test/test.vue

@@ -1,77 +1,52 @@
 <template>
-	<view>
-		<!-- 多个复选框，带全选 -->
-		<view>
-			<checkbox-group class="block" @change="changeCheckbox">
-				<view v-for="item in newDeviceManage" :key="item.id">				
-					<checkbox :value="String(item.id)" :checked="checkedArr.includes(String(item.id))" :class="{'checked':checkedArr.includes(String(item.id))}"></checkbox>
-					<text>{{item.title}}</text>
-				</view>
-			</checkbox-group>
-		</view>
-		<view>
-			<checkbox-group @change="allChoose">
-				<label>
-					<checkbox value="all" :class="{'checked':allChecked}" :checked="allChecked?true:false"></checkbox> 全选
-				</label>
-			</checkbox-group>
-		</view>
-	</view>
+	<download-excel class="export-excel-wrapper" :data="json_data" :fields="json_fields" footer='页脚' header='导出数据'
+		name="设备管理数据表.xls">
+		<!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
+		<button type="primary" size="small">导出EXCEL</button>
+	</download-excel>
 </template>
 
 <script>
 	export default {
 		data() {
 			return {
-				isChecked:false,
-				newDeviceManage:[
-					{'id':0,'title':'选项一'},
-					{'id':1,'title':'选项二'},
-					{'id':2,'title':'选项三'},
-					{'id':3,'title':'选项四'},
-					{'id':4,'title':'选项五'},
-					{'id':5,'title':'选项六'},
-					{'id':6,'title':'选项七'},
-					{'id':7,'title':'选项八'},
-					{'id':8,'title':'选项九'},
-					{'id':9,'title':'选项十'}
-				],
-				checkedArr:[], //复选框选中的值
-				allChecked:false //是否全选
-			}
-		},
-		methods: {
-			// 多选复选框改变事件
-			changeCheckbox(e){
-				this.checkedArr = e.detail.value;
-				// 如果选择的数组中有值，并且长度等于列表的长度，就是全选
-				if(this.checkedArr.length>0 && this.checkedArr.length==this.newDeviceManage.length){
-					this.allChecked=true;
-				}else{
-					this.allChecked=false;
-				}
-			},
-			// 全选事件
-			allChoose(e){
-				let chooseItem = e.detail.value;
-				// 全选
-				if(chooseItem[0]=='all'){
-					this.allChecked=true;
-					for(let item of this.newDeviceManage){
-						let itemVal=String(item.id);
-						if(!this.checkedArr.includes(itemVal)){
-							this.checkedArr.push(itemVal);
+				json_fields: {
+					"单位编号": "company", //常规字段
+					"状态": "device_state",
+					"设备编号": "owner_code", 
+					"设备名称": "owner_name",
+					"单元地址": "unitinfo",
+					"创建时间": "install_time",
+				},
+				json_data: [{
+						name: "Tony Peña",
+						city: "New York",
+						country: "United States",
+						birthdate: "1978-03-15",
+						phone: {
+							mobile: "1-541-754-3010",
+							landline: "(541) 754-3010"
+						}
+					},
+					{
+						name: "Thessaloniki",
+						city: "Athens",
+						country: "Greece",
+						birthdate: "1987-11-23",
+						phone: {
+							mobile: "+1 855 275 5071",
+							landline: "(2741) 2621-244"
 						}
-					}					
-				}else{
-					// 取消全选
-					this.allChecked=false;
-					this.checkedArr=[];
-				}
-			}
+					}
+				],
+				json_meta: [
+					[{
+						" key ": " charset ",
+						" value ": " utf- 8 "
+					}]
+				]
+			};
 		}
+
 	}
 </script>
-
-<style>
-</style>