<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>Document</title>
|
<script src="../js/main.js"></script>
|
</head>
|
<body>
|
<div id="app">
|
<button type="button" @click="test0()" class="btn btn-primary "
|
style="height:30px;width:90px;background-color: #5CADFE;">导出表格</button>
|
|
<el-container>
|
|
<el-main style="height: 90vh;">
|
<show-table :id="table" :tablehead="tableHead" :tabledata="tableData"></show-table>
|
|
</el-main>
|
</el-container>
|
|
|
|
|
|
|
</div>
|
</body>
|
<script>
|
let app= new Vue({
|
el: '#app',
|
mixins:[mixin],
|
data(){
|
return{
|
|
|
machineid:"",
|
table:"table1",
|
tableData:[{}],
|
tableHead:[{
|
"0_riqi":'时间段',
|
"1_baipianchangliang":'掰片产量',
|
"2_baipiantingji":'掰片停机',
|
"3_qingxichangliang":'清洗产量',
|
"4_qingxitingji":'清洗停机',
|
"5_siyinchangliang1":'丝印1产量',
|
"6_siyintingji1":'丝印1停机',
|
"7_siyinchangliang2":'丝印2产量',
|
"8_siyintingji2":'丝印2停机',
|
"9_zuankongchangliang":'钻孔1产量',
|
"10_zuankongtingji":'钻孔1停机',
|
"11_shuidaochangliang":'水刀1产量',
|
"12_shuidaotingji":'水刀1停机',
|
"13_jiagongzhongxinchangliang":'加工中心1产量',
|
"14_jiagongzhongxintingji":'加工中心1停机'
|
}]
|
|
}
|
|
},
|
methods:{
|
//时间格式化
|
formatDate(objDate,fmt) {
|
var o = {
|
"M+" : objDate.getMonth()+1, //月份
|
"d+" : objDate.getDate(), //日
|
"h+" : objDate.getHours()%12 == 0 ? 12 : objDate.getHours()%12, //小时
|
"H+" : objDate.getHours(), //小时
|
"m+" : objDate.getMinutes(), //分
|
"s+" : objDate.getSeconds(), //秒
|
"q+" : Math.floor((objDate.getMonth()+3)/3), //季度
|
"S" : objDate.getMilliseconds() //毫秒
|
};
|
if(/(y+)/.test(fmt))
|
fmt=fmt.replace(RegExp.$1, (objDate.getFullYear()+"").substr(4 - RegExp.$1.length));
|
for(var k in o)
|
if(new RegExp("("+ k +")").test(fmt))
|
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
|
return fmt;
|
|
},
|
//导出方法
|
test0:function() {
|
let exportFileContent = document.getElementById('table1').outerHTML;
|
let blob = new Blob([exportFileContent], { type: 'text/plain;charset=utf-8' }); // 解决中文乱码问题
|
blob = new Blob([String.fromCharCode(0xFEFF), blob], { type: blob.type });
|
// 设置链接
|
let link = window.URL.createObjectURL(blob);
|
let a = document.createElement('a'); // 创建a标签
|
a.download = ""+this.formatDate(new Date(),"yyyy-MM-dd")+"产量报表.xls"; // 设置被下载的超链接目标（文件名）
|
a.href = link; // 设置a标签的链接
|
document.body.appendChild(a); // a标签添加到页面
|
a.click(); // 设置a标签触发单击事件
|
document.body.removeChild(a); // 移除a标签
|
|
|
|
}
|
},
|
|
watch:{
|
tableData(){
|
for(item of this.tableData){
|
|
}
|
}
|
},
|
async mounted(){
|
sql="{call chanliangchaxungroup()}";
|
this.loadAjxss('产量查询',sql,2,"tableData");
|
|
await setInterval(()=>{
|
|
sql="{call chanliangchaxungroup()}";
|
this.loadAjxss('产量查询',sql,2,"tableData");
|
},5000)
|
|
|
}
|
|
|
})
|
|
|
|
</script>
|
</html>
|
