|
|
|
@@ -0,0 +1,358 @@ |
|
|
|
<!-- |
|
|
|
* @Author: zhp |
|
|
|
* @Date: 2024-01-24 15:15:24 |
|
|
|
* @LastEditTime: 2024-04-12 16:50:32 |
|
|
|
* @LastEditors: zhp |
|
|
|
* @Description: |
|
|
|
--> |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<div> |
|
|
|
<!-- <el-alert title="自定义 close-text" type="warning" close-text="知道了"> |
|
|
|
</el-alert> --> |
|
|
|
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip"> |
|
|
|
<el-form-item label="时间维度" prop="reportTime"> |
|
|
|
<el-select v-model="timeSelect" placeholder="请选择"> |
|
|
|
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item v-show="timeSelect === 'month'" label="时间范围" prop="reportTime"> |
|
|
|
<el-date-picker v-model="listQuery.reportTime" type="monthrange" range-separator="至" start-placeholder="开始月份" |
|
|
|
end-placeholder="结束月份"> |
|
|
|
</el-date-picker> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item v-if="timeSelect === 'year'" label="时间范围" prop="reportTime"> |
|
|
|
<el-date-picker v-model="listQuery.reportTime" type="year" @change="changeTime" |
|
|
|
:picker-options="{firstDayOfWeek: 1}" :format="'yyyy 年' + '\u3000' + startTimeStamp + '-' + endTimeStamp" |
|
|
|
placeholder="选择年"> |
|
|
|
</el-date-picker> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="工厂名称" prop="factoryId"> |
|
|
|
<el-select v-model="listQuery.factoryId" placeholder="请选择工厂名称"> |
|
|
|
<el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="玻璃类型" prop="type"> |
|
|
|
<el-select v-model="listQuery.type" placeholder="请选择玻璃类型"> |
|
|
|
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button type="primary" size="small" @click="getDataList">查询</el-button> |
|
|
|
<el-button type="primary" size="small" plain @click="handleExport">导出</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
<el-row style="height: 400px;"> |
|
|
|
<line-chart class="chart" ref="lineChart" style="height: 400px;width: 50%;margin-top: 50px;"></line-chart> |
|
|
|
</el-row> |
|
|
|
<el-divider></el-divider> |
|
|
|
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" :table-data="tableData"> |
|
|
|
</base-table> |
|
|
|
<!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all" |
|
|
|
:type="listQuery.reportType" @refreshDataList="getDataList" /> --> |
|
|
|
<!-- <pagination |
|
|
|
:limit.sync="listQuery.pageSize" |
|
|
|
:page.sync="listQuery.pageNo" |
|
|
|
:total="listQuery.total" |
|
|
|
@pagination="getDataList" /> --> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
// import { parseTime } from '../../core/mixins/code-filter'; |
|
|
|
// import { getGlassPage, exportGlasscExcel } from '@/api/report/glass'; |
|
|
|
// import inputTable from './inputTable.vue'; |
|
|
|
import lineChart from './lineChart'; |
|
|
|
import moment from 'moment' |
|
|
|
// import FileSaver from 'file-saver' |
|
|
|
// import * as XLSX from 'xlsx' |
|
|
|
export default { |
|
|
|
components: { lineChart }, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
listQuery: { |
|
|
|
pageSize: 10, |
|
|
|
pageNo: 1, |
|
|
|
factoryId: null, |
|
|
|
total: 0, |
|
|
|
type: null, |
|
|
|
// reportType: 2, |
|
|
|
reportTime: [] |
|
|
|
}, |
|
|
|
urlOptions: { |
|
|
|
// getDataListURL: getGlassPage, |
|
|
|
// exportURL: exportGlasscExcel |
|
|
|
}, |
|
|
|
timeList: [ |
|
|
|
{ |
|
|
|
value: 'month', |
|
|
|
label:'月' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 'year', |
|
|
|
label: '年' |
|
|
|
} |
|
|
|
], |
|
|
|
factoryList: [ |
|
|
|
{ |
|
|
|
name: '测试', |
|
|
|
id:1 |
|
|
|
} |
|
|
|
], |
|
|
|
typeList: [ |
|
|
|
{ |
|
|
|
name: '芯片', |
|
|
|
id:0, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '标准组件', |
|
|
|
id: 1, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: 'BIPV产品', |
|
|
|
id: 2, |
|
|
|
}, |
|
|
|
], |
|
|
|
tableProps: [ |
|
|
|
// { |
|
|
|
// prop: 'createTime', |
|
|
|
// label: '添加时间', |
|
|
|
// fixed: true, |
|
|
|
// width: 180, |
|
|
|
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), |
|
|
|
// }, |
|
|
|
{ |
|
|
|
prop: 'userName', |
|
|
|
label: '科目', |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'nickName', |
|
|
|
label: '类别', |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'datas', |
|
|
|
label: '数值', |
|
|
|
// subcomponent: row |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'unit', |
|
|
|
label: '单位', |
|
|
|
// subcomponent: row |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'remark', |
|
|
|
label: '备注', |
|
|
|
// subcomponent: row |
|
|
|
} |
|
|
|
], |
|
|
|
timeSelect:'month', |
|
|
|
startTimeStamp:null, //开始时间 |
|
|
|
endTimeStamp:null, //结束时间 |
|
|
|
date:'凯盛玻璃控股成员企业2024生产数据', |
|
|
|
// reportTime: '', |
|
|
|
startTimeStamp: '', |
|
|
|
endTimeStamp: '', |
|
|
|
tableData: [ |
|
|
|
{ |
|
|
|
userName: 'userName', |
|
|
|
nickName: '用户名', |
|
|
|
datas:'111111' |
|
|
|
}, |
|
|
|
{ |
|
|
|
userName: 'userName', |
|
|
|
nickName: '用户名', |
|
|
|
datas: '111111' |
|
|
|
}, |
|
|
|
{ |
|
|
|
userName: 'userName', |
|
|
|
nickName: '用户名', |
|
|
|
datas: '111111' |
|
|
|
// subcomponent: row |
|
|
|
} |
|
|
|
], |
|
|
|
// proLineList: [], |
|
|
|
// all: {} |
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getDict() |
|
|
|
// this.getCurrentYearFirst() |
|
|
|
// this.getDataList() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// handleTime() { |
|
|
|
// this.$forceUpdate() |
|
|
|
// // this.$nextTick(() => [ |
|
|
|
|
|
|
|
// // ]) |
|
|
|
// }, |
|
|
|
// getCurrentYearFirst() { |
|
|
|
// let date = new Date(); |
|
|
|
// date.setDate(1); |
|
|
|
// date.setMonth(0); |
|
|
|
// this.reportTime = date; |
|
|
|
// this.startTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()); //开始时间 |
|
|
|
// this.endTimeStamp = this.timeFun(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()); //结束时间 |
|
|
|
// this.listQuery.reportTime[0] = parseTime(new Date(new Date().getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 |
|
|
|
// this.listQuery.reportTime[1] = parseTime(new Date(new Date().getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 100 |
|
|
|
// }, |
|
|
|
changeTime(val) { |
|
|
|
if (val) { |
|
|
|
// let timeStamp = val.getTime(); //标准时间转为时间戳，毫秒级别 |
|
|
|
// this.endTimeStamp = this.timeFun(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()); //开始时间 |
|
|
|
// this.startTimeStamp = this.timeFun(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()); //结束时间 |
|
|
|
// this.listQuery.reportTime[0] = parseTime(new Date(val.getFullYear(), 0, 1, 7, 0, 1).getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 |
|
|
|
// this.listQuery.reportTime[1] = parseTime(new Date(val.getFullYear(), 11, 31, 7, 0, 0).getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 |
|
|
|
} else { |
|
|
|
this.listQuery.reportTime = [] |
|
|
|
} |
|
|
|
}, |
|
|
|
async getDict() { |
|
|
|
this.$refs.lineChart.initChart() |
|
|
|
// 产线列表 |
|
|
|
// const res = await getCorePLList(); |
|
|
|
// this.proLineList = res.data; |
|
|
|
}, |
|
|
|
// 获取数据列表 |
|
|
|
multipliedByHundred(str) { |
|
|
|
console.log(str); |
|
|
|
// console.log(str) |
|
|
|
if ( str != 0) { |
|
|
|
let floatVal = parseFloat(str); |
|
|
|
if (isNaN(floatVal)) { |
|
|
|
return 0; |
|
|
|
} |
|
|
|
floatVal = Math.round(str * 10000) / 100; |
|
|
|
let strVal = floatVal.toString(); |
|
|
|
let searchVal = strVal.indexOf('.'); |
|
|
|
if (searchVal < 0) { |
|
|
|
searchVal = strVal.length; |
|
|
|
strVal += '.'; |
|
|
|
} |
|
|
|
while (strVal.length <= searchVal + 2) { |
|
|
|
strVal += '0'; |
|
|
|
} |
|
|
|
return parseFloat(strVal); |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
async getDataList() { |
|
|
|
}, |
|
|
|
add0(m) { |
|
|
|
return m < 10 ? '0' + m : m |
|
|
|
}, |
|
|
|
format(shijianchuo) { |
|
|
|
//shijianchuo是整数，否则要parseInt转换 |
|
|
|
var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss') |
|
|
|
// console.log(time) |
|
|
|
// var y = time.getFullYear(); |
|
|
|
// var m = time.getMonth() + 1; |
|
|
|
// var d = time.getDate(); |
|
|
|
// var h = time.getHours(); |
|
|
|
// var mm = time.getMinutes(); |
|
|
|
// var s = time.getSeconds(); |
|
|
|
return time |
|
|
|
}, |
|
|
|
changeTime(val) { |
|
|
|
if (val) { |
|
|
|
// console.log(val) |
|
|
|
// console.log(val.setHours(7, 0, 0)) |
|
|
|
// console.log(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) |
|
|
|
// let time = this.format(val.setHours(7, 0, 0)) |
|
|
|
this.endTimeStamp = this.format(val.setHours(7, 0, 0)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 |
|
|
|
this.startTimeStamp = this.format(val.setHours(7, 0, 1) - 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 |
|
|
|
// console.log(this.listQuery.reportTime); |
|
|
|
this.listQuery.reportTime[0] = this.format(val.setHours(7, 0, 1)) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 |
|
|
|
this.listQuery.reportTime[1] = this.format(val.setHours(7, 0, 0) + 24 * 60 * 60 * 1000) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 |
|
|
|
console.log(this.listQuery.reportTime); |
|
|
|
} else { |
|
|
|
this.listQuery.reportTime = [] |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
//时间戳转为yy-mm-dd hh:mm:ss |
|
|
|
timeFun(unixtimestamp) { |
|
|
|
var unixtimestamp = new Date(unixtimestamp); |
|
|
|
var year = 1900 + unixtimestamp.getYear(); |
|
|
|
var month = "0" + (unixtimestamp.getMonth() + 1); |
|
|
|
var date = "0" + unixtimestamp.getDate(); |
|
|
|
return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length) |
|
|
|
}, |
|
|
|
buttonClick(val) { |
|
|
|
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined; |
|
|
|
switch (val.btnName) { |
|
|
|
case 'search': |
|
|
|
this.listQuery.pageNo = 1; |
|
|
|
this.listQuery.pageSize = 10; |
|
|
|
this.getDataList(); |
|
|
|
break; |
|
|
|
case 'export': |
|
|
|
this.handleExport(); |
|
|
|
break; |
|
|
|
default: |
|
|
|
console.log(val); |
|
|
|
} |
|
|
|
}, |
|
|
|
/** 导出按钮操作 */ |
|
|
|
handleExport() { |
|
|
|
// 处理查询参数 |
|
|
|
// var xlsxParam = { raw: true }; |
|
|
|
// /* 从表生成工作簿对象 */ |
|
|
|
// import('xlsx').then(excel => { |
|
|
|
// var wb = excel.utils.table_to_book( |
|
|
|
// document.querySelector("#exportTable"), |
|
|
|
// xlsxParam |
|
|
|
// ); |
|
|
|
// /* 获取二进制字符串作为输出 */ |
|
|
|
// var wbout = excel.write(wb, { |
|
|
|
// bookType: "xlsx", |
|
|
|
// bookSST: true, |
|
|
|
// type: "array", |
|
|
|
// }); |
|
|
|
// try { |
|
|
|
// FileSaver.saveAs( |
|
|
|
// //Blob 对象表示一个不可变、原始数据的类文件对象。 |
|
|
|
// //Blob 表示的不一定是JavaScript原生格式的数据。 |
|
|
|
// //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 |
|
|
|
// //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。 |
|
|
|
// new Blob([wbout], { type: "application/octet-stream" }), |
|
|
|
// //设置导出文件名称 |
|
|
|
// "许昌安彩日原片生产汇总.xlsx" |
|
|
|
// ); |
|
|
|
// } catch (e) { |
|
|
|
// if (typeof console !== "undefined") console.log(e, wbout); |
|
|
|
// } |
|
|
|
// return wbout; |
|
|
|
// //do something...... |
|
|
|
// }) |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
/* .blueTip { */ |
|
|
|
/* padding-bottom: 10px; */ |
|
|
|
/* } */ |
|
|
|
.blueTip::before{ |
|
|
|
display: inline-block; |
|
|
|
content: ''; |
|
|
|
width: 4px; |
|
|
|
height: 18px; |
|
|
|
background: #0B58FF; |
|
|
|
border-radius: 1px; |
|
|
|
margin-right: 8PX; |
|
|
|
margin-top: 8px; |
|
|
|
} |
|
|
|
.chart{ |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
} |
|
|
|
</style> |
