422 lines
13 KiB
Vue
422 lines
13 KiB
Vue
<!--
|
||
* @Author: zhp
|
||
* @Date: 2024-04-15 10:49:13
|
||
* @LastEditTime: 2024-05-06 14:55:56
|
||
* @LastEditors: zhp
|
||
* @Description:
|
||
-->
|
||
<template>
|
||
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)">
|
||
<div class="app-container" style="padding: 16px 24px 0;height: auto; flex-grow: 1;">
|
||
<search-bar :formConfigs="mainFormConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
|
||
<el-row :gutter="24">
|
||
<el-col :span="12" v-for="item in dataList" :key="item.id">
|
||
<line-chart :id="item.id" class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart>
|
||
</el-col>
|
||
<!-- <el-col :span="12">
|
||
<line-chart :id=" 'second' " class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart>
|
||
</el-col> -->
|
||
</el-row>
|
||
</div>
|
||
<div class="app-container" style="margin-top: 18px;flex-grow: 1; height: auto; padding: 16px;">
|
||
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
|
||
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
|
||
:table-data="tableData">
|
||
</base-table>
|
||
</div>
|
||
<!-- <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 { getOrderList, getCostPage } from '@/api/cost/index';
|
||
// 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: {
|
||
current: 1,
|
||
size: 10,
|
||
// factoryId: null,
|
||
// total: 0,
|
||
// type: null,
|
||
// reportType: 2,
|
||
reportTime: []
|
||
},
|
||
dataList: [
|
||
{
|
||
id:'first',
|
||
},
|
||
{
|
||
id: 'second',
|
||
},
|
||
{
|
||
id: 'third',
|
||
},
|
||
{
|
||
id: 'fourth',
|
||
},
|
||
{
|
||
id: 'fifth',
|
||
},
|
||
{
|
||
id: 'sixth',
|
||
},
|
||
],
|
||
urlOptions: {
|
||
// getDataListURL: getGlassPage,
|
||
// exportURL: exportGlasscExcel
|
||
},
|
||
mainFormConfig: [
|
||
{
|
||
type: 'select',
|
||
label: '工单',
|
||
placeholder: '请选择工单',
|
||
param: 'workOrderId',
|
||
selectOptions: [],
|
||
clearable: true,
|
||
},
|
||
// {
|
||
// type: 'select',
|
||
// label: '产线',
|
||
// placeholder: '请选择产线',
|
||
// param: 'lineId',
|
||
// selectOptions: [],
|
||
// },
|
||
// 选项切换
|
||
// {
|
||
// type: 'select',
|
||
// label: '时间类型',
|
||
// param: 'dateFilterType',
|
||
// defaultSelect: 0,
|
||
// selectOptions: [
|
||
// { id: 0, name: '按时间段' },
|
||
// { id: 1, name: '按日期' },
|
||
// ],
|
||
// index: 2,
|
||
// extraOptions: [
|
||
{
|
||
// parent: 'dateFilterType',
|
||
// 时间段选择
|
||
type: 'datePicker',
|
||
label: '时间段',
|
||
// dateType: 'datetimerange',
|
||
dateType: 'datetimerange',
|
||
format: 'yyyy-MM-dd HH:mm:ss',
|
||
valueFormat: 'yyyy-MM-ddTHH:mm:ss',
|
||
rangeSeparator: '-',
|
||
rangeSeparator: '-',
|
||
startPlaceholder: '开始时间',
|
||
endPlaceholder: '结束时间',
|
||
param: 'recordTime',
|
||
clearable:true,
|
||
},
|
||
// {
|
||
// parent: 'dateFilterType',
|
||
// // 日期选择
|
||
// type: 'datePicker',
|
||
// // label: '日期',
|
||
// dateType: 'date',
|
||
// placeholder: '选择日期',
|
||
// format: 'yyyy-MM-dd',
|
||
// valueFormat: 'yyyy-MM-dd',
|
||
// param: 'timeday',
|
||
// },
|
||
// ],
|
||
// },
|
||
{
|
||
type:'button',
|
||
btnName: '查询',
|
||
name: 'search',
|
||
color: 'primary',
|
||
},
|
||
{
|
||
type:'separate'
|
||
},
|
||
// {
|
||
// type: this.$auth.hasPermi(
|
||
// 'analysis:equipment:export'
|
||
// )
|
||
// ? 'separate'
|
||
// : '',
|
||
// },
|
||
{
|
||
type:'button',
|
||
btnName: '导出',
|
||
name: 'export',
|
||
color: 'warning',
|
||
},
|
||
],
|
||
formConfig: [
|
||
{
|
||
type: 'title',
|
||
label: '成本管理',
|
||
},
|
||
],
|
||
timeList: [
|
||
{
|
||
value: 'month',
|
||
label:'月'
|
||
},
|
||
{
|
||
value: 'year',
|
||
label: '年'
|
||
}
|
||
],
|
||
factoryList: [
|
||
{
|
||
name: '测试',
|
||
id:1
|
||
}
|
||
],
|
||
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: '工厂名称',
|
||
}
|
||
],
|
||
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: {
|
||
buttonClick() {
|
||
|
||
},
|
||
// 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 getOrderList({
|
||
current:1,
|
||
size:999,
|
||
});
|
||
console.log(res)
|
||
this.mainFormConfig[0].selectOptions = 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() {
|
||
const res = await getCostPage({
|
||
current: 1,
|
||
size: 999,
|
||
});
|
||
},
|
||
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; */
|
||
/* } */
|
||
/* .blueTi */
|
||
.blueTip::before{
|
||
display: inline-block;
|
||
content: '';
|
||
width: 4px;
|
||
height: 18px;
|
||
background: #0B58FF;
|
||
border-radius: 1px;
|
||
margin-right: 8PX;
|
||
margin-top: 8px;
|
||
}
|
||
.app-container {
|
||
margin: 0 16px 0;
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
padding: 16px 16px 0;
|
||
height: calc(100vh - 134px);
|
||
overflow: auto;
|
||
}
|
||
</style>
|