yudao-init/src/views/report/yearData/index.vue

483 lines
13 KiB
Vue
Raw Normal View History

2024-04-12 16:52:25 +08:00
<!--
* @Author: zhp
* @Date: 2024-01-24 15:15:24
2024-04-17 16:17:07 +08:00
* @LastEditTime: 2024-04-17 16:15:23
2024-04-12 16:52:25 +08:00
* @LastEditors: zhp
* @Description:
-->
<template>
2024-06-04 08:35:23 +08:00
<div
style="
display: flex;
flex-direction: column;
min-height: calc(100vh - 96px - 31px);
"
>
<div
class="app-container"
style="padding: 16px; max-height: 45vh; flex-grow: 1"
>
2024-04-17 16:17:07 +08:00
<!-- <div style="position: relative;z-index: 999;"> -->
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
2024-04-12 16:52:25 +08:00
<el-form-item label="时间维度" prop="reportTime">
2024-06-04 08:35:23 +08:00
<el-select
clearable
v-model="timeSelect"
placeholder="请选择"
style="width: 80px"
>
<el-option
v-for="item in timeList"
:key="item.value"
:label="item.label"
:value="item.value"
>
2024-04-12 16:52:25 +08:00
</el-option>
</el-select>
</el-form-item>
2024-06-04 08:35:23 +08:00
<el-form-item
v-show="timeSelect === 'month'"
label="时间范围"
prop="reportTime"
>
<el-date-picker
clearable
v-model="listQuery.reportTime"
type="monthrange"
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份"
@change="changeTime"
>
2024-04-12 16:52:25 +08:00
</el-date-picker>
</el-form-item>
2024-06-04 08:35:23 +08:00
<el-form-item
v-show="timeSelect === 'year'"
label="时间范围"
prop="reportTime"
>
<el-date-picker
clearable
v-model="listQuery.reportTime[0]"
value-format="yyyy"
type="year"
placeholder="开始时间"
>
2024-04-17 16:17:07 +08:00
</el-date-picker>
~
2024-06-04 08:35:23 +08:00
<el-date-picker
v-model="listQuery.reportTime[1]"
value-format="yyyy"
type="year"
placeholder="结束时间"
@change="getYear"
>
2024-04-12 16:52:25 +08:00
</el-date-picker>
</el-form-item>
<el-form-item label="工厂名称" prop="factoryId">
2024-06-04 08:35:23 +08:00
<el-select
multiple
collapse-tags
v-model="listQuery.factoryId"
placeholder="请选择工厂名称"
>
<el-option
v-for="item in factoryList"
:key="item.id"
:label="item.name"
:value="item.id"
>
2024-04-12 16:52:25 +08:00
</el-option>
</el-select>
</el-form-item>
<el-form-item label="玻璃类型" prop="type">
2024-06-04 08:35:23 +08:00
<el-select
clearable
v-model="listQuery.type"
placeholder="请选择玻璃类型"
style="width: 120px"
>
<el-option
v-for="item in typeList"
:key="item.id"
:label="item.name"
:value="item.id"
>
2024-04-12 16:52:25 +08:00
</el-option>
</el-select>
</el-form-item>
<el-form-item>
2024-06-04 08:35:23 +08:00
<el-button type="primary" size="small" @click="getDataList"
>查询</el-button
>
<el-button type="primary" size="small" plain @click="handleExport"
>导出</el-button
>
2024-04-12 16:52:25 +08:00
</el-form-item>
</el-form>
2024-04-17 16:17:07 +08:00
<!-- </div> -->
<!-- <el-row style="height: 500px;"> -->
<!-- <div> -->
2024-06-04 08:35:23 +08:00
<line-chart
class="yearChart"
ref="lineChart"
style="height: 35vh; width: 100%"
></line-chart>
2024-04-17 16:17:07 +08:00
<!-- </div> -->
<!-- </el-row> -->
</div>
<!-- <el-row style="height: 400px;"> -->
<!-- </el-row> -->
2024-06-04 08:35:23 +08:00
<div
class="app-container"
style="margin-top: 18px; height: unset; flex-grow: 1; padding: 16px"
>
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
@headBtnClick="buttonClick"
/>
<base-table
:table-props="tableProps"
:page="listQuery.pageNo"
:limit="listQuery.pageSize"
:table-data="tableData"
>
2024-04-17 16:17:07 +08:00
</base-table>
2024-04-12 16:52:25 +08:00
</div>
</div>
</template>
<script>
// import { parseTime } from '../../core/mixins/code-filter';
// import { getGlassPage, exportGlasscExcel } from '@/api/report/glass';
// import inputTable from './inputTable.vue';
2024-06-04 08:35:23 +08:00
import { report } from "process";
import lineChart from "./lineChart";
import moment from "moment";
2024-04-12 16:52:25 +08:00
// import FileSaver from 'file-saver'
// import * as XLSX from 'xlsx'
export default {
components: { lineChart },
2024-06-04 08:35:23 +08:00
data() {
2024-04-12 16:52:25 +08:00
return {
listQuery: {
pageSize: 10,
pageNo: 1,
factoryId: null,
total: 0,
type: null,
// reportType: 2,
2024-06-04 08:35:23 +08:00
reportTime: [],
2024-04-12 16:52:25 +08:00
},
2024-04-17 16:17:07 +08:00
// startDatePicker: this.beginDate(),
// endDatePicker: this.processDate(),
2024-06-04 08:35:23 +08:00
yeartsStart: "",
yeartsEnd: "",
urlOptions: {
// getDataListURL: getGlassPage,
// exportURL: exportGlasscExcel
2024-04-12 16:52:25 +08:00
},
timeList: [
{
2024-06-04 08:35:23 +08:00
value: "day",
label: "日",
2024-04-12 16:52:25 +08:00
},
{
2024-06-04 08:35:23 +08:00
value: "week",
label: "周",
},
{
value: "month",
label: "月",
},
{
value: "year",
label: "年",
},
2024-04-12 16:52:25 +08:00
],
factoryList: [
{
2024-06-04 08:35:23 +08:00
name: "瑞昌",
id: 1,
},
{
name: "邯郸",
id: 2,
},
2024-04-12 16:52:25 +08:00
],
typeList: [
{
2024-06-04 08:35:23 +08:00
name: "芯片",
id: 0,
2024-04-12 16:52:25 +08:00
},
{
2024-06-04 08:35:23 +08:00
name: "标准组件",
2024-04-12 16:52:25 +08:00
id: 1,
},
{
2024-06-04 08:35:23 +08:00
name: "BIPV产品",
2024-04-12 16:52:25 +08:00
id: 2,
},
],
2024-04-17 16:17:07 +08:00
formConfig: [
{
2024-06-04 08:35:23 +08:00
type: "title",
label: "报表管理",
2024-04-17 16:17:07 +08:00
},
],
2024-04-12 16:52:25 +08:00
tableProps: [
// {
// prop: 'createTime',
// label: '添加时间',
// fixed: true,
// width: 180,
// filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
// },
{
2024-06-04 08:35:23 +08:00
prop: "userName",
label: "科目",
2024-04-12 16:52:25 +08:00
},
{
2024-06-04 08:35:23 +08:00
prop: "nickName",
label: "类别",
2024-04-12 16:52:25 +08:00
},
{
2024-06-04 08:35:23 +08:00
prop: "datas",
label: "数值",
2024-04-12 16:52:25 +08:00
// subcomponent: row
},
{
2024-06-04 08:35:23 +08:00
prop: "unit",
label: "单位",
2024-04-12 16:52:25 +08:00
// subcomponent: row
},
{
2024-06-04 08:35:23 +08:00
prop: "remark",
label: "备注",
2024-04-12 16:52:25 +08:00
// subcomponent: row
2024-06-04 08:35:23 +08:00
},
2024-04-12 16:52:25 +08:00
],
2024-06-04 08:35:23 +08:00
timeSelect: "month",
startTimeStamp: null, //开始时间
endTimeStamp: null, //结束时间
date: "凯盛玻璃控股成员企业2024生产数据",
// reportTime: '',
startTimeStamp: "",
endTimeStamp: "",
2024-04-12 16:52:25 +08:00
tableData: [
{
2024-06-04 08:35:23 +08:00
userName: "userName",
nickName: "用户名",
datas: "111111",
2024-04-12 16:52:25 +08:00
},
{
2024-06-04 08:35:23 +08:00
userName: "userName",
nickName: "用户名",
datas: "111111",
2024-04-12 16:52:25 +08:00
},
{
2024-06-04 08:35:23 +08:00
userName: "userName",
nickName: "用户名",
datas: "111111",
2024-04-12 16:52:25 +08:00
// subcomponent: row
2024-06-04 08:35:23 +08:00
},
2024-04-12 16:52:25 +08:00
],
2024-06-04 08:35:23 +08:00
// proLineList: [],
// all: {}
};
},
mounted() {
this.getDict();
2024-04-12 16:52:25 +08:00
// this.getCurrentYearFirst()
// this.getDataList()
2024-06-04 08:35:23 +08:00
},
2024-04-12 16:52:25 +08:00
methods: {
2024-04-17 16:17:07 +08:00
getYear(e) {
2024-06-04 08:35:23 +08:00
if (
this.listQuery.reportTime[0] &&
e - this.listQuery.reportTime[0] > 10
) {
2024-04-17 16:17:07 +08:00
this.$message({
2024-06-04 08:35:23 +08:00
message: "年份起止时间不能超过十年",
type: "warning",
2024-04-17 16:17:07 +08:00
});
// console.log();
}
// console.log(e);
},
changeTime() {
if (this.listQuery.reportTime) {
2024-06-04 08:35:23 +08:00
this.createStartDate = moment(
new Date(this.listQuery.reportTime[0]),
"yyyy-MM-dd hh:mm:ss"
);
this.createEndDate = moment(
new Date(this.listQuery.reportTime[1]),
"yyyy-MM-dd hh:mm:ss"
);
const numDays =
(new Date(this.listQuery.reportTime[1]).getTime() -
new Date(this.listQuery.reportTime[0]).getTime()) /
(24 * 3600 * 1000);
if (numDays > 730) {
2024-04-17 16:17:07 +08:00
this.$message({
2024-06-04 08:35:23 +08:00
message: "时间范围不能超过24个月",
type: "warning",
2024-04-17 16:17:07 +08:00
});
this.listQuery.reportTime = [];
2024-06-04 08:35:23 +08:00
this.createStartDate = "";
this.createEndDate = "";
2024-04-17 16:17:07 +08:00
}
2024-04-12 16:52:25 +08:00
} else {
2024-06-04 08:35:23 +08:00
this.createStartDate = "";
this.createEndDate = "";
2024-04-12 16:52:25 +08:00
}
},
async getDict() {
2024-06-04 08:35:23 +08:00
this.$refs.lineChart.initChart();
// 产线列表
// const res = await getCorePLList();
// this.proLineList = res.data;
},
2024-04-12 16:52:25 +08:00
// 获取数据列表
multipliedByHundred(str) {
console.log(str);
// console.log(str)
2024-06-04 08:35:23 +08:00
if (str != 0) {
2024-04-12 16:52:25 +08:00
let floatVal = parseFloat(str);
if (isNaN(floatVal)) {
return 0;
}
floatVal = Math.round(str * 10000) / 100;
let strVal = floatVal.toString();
2024-06-04 08:35:23 +08:00
let searchVal = strVal.indexOf(".");
2024-04-12 16:52:25 +08:00
if (searchVal < 0) {
searchVal = strVal.length;
2024-06-04 08:35:23 +08:00
strVal += ".";
2024-04-12 16:52:25 +08:00
}
while (strVal.length <= searchVal + 2) {
2024-06-04 08:35:23 +08:00
strVal += "0";
2024-04-12 16:52:25 +08:00
}
return parseFloat(strVal);
}
},
2024-06-04 08:35:23 +08:00
async getDataList() {},
2024-04-12 16:52:25 +08:00
add0(m) {
2024-06-04 08:35:23 +08:00
return m < 10 ? "0" + m : m;
2024-04-12 16:52:25 +08:00
},
format(shijianchuo) {
//shijianchuo是整数否则要parseInt转换
2024-06-04 08:35:23 +08:00
var time = moment(new Date(shijianchuo)).format("YYYY-MM-DD HH:mm:ss");
2024-04-12 16:52:25 +08:00
// 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();
2024-06-04 08:35:23 +08:00
return time;
2024-04-12 16:52:25 +08:00
},
2024-06-04 08:35:23 +08:00
// changeTime(val) {
2024-04-17 16:17:07 +08:00
// 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);
2024-06-04 08:35:23 +08:00
// } else {
// this.listQuery.reportTime = []
// }
// },
2024-04-12 16:52:25 +08:00
2024-06-04 08:35:23 +08:00
//时间戳转为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);
}
},
/** 导出按钮操作 */
2024-04-12 16:52:25 +08:00
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......
// })
},
2024-06-04 08:35:23 +08:00
},
2024-04-12 16:52:25 +08:00
};
</script>
<style scoped>
2024-06-04 08:35:23 +08:00
.blueTip::before {
2024-04-12 16:52:25 +08:00
display: inline-block;
2024-06-04 08:35:23 +08:00
content: "";
2024-04-12 16:52:25 +08:00
width: 4px;
height: 18px;
2024-06-04 08:35:23 +08:00
background: #0b58ff;
2024-04-12 16:52:25 +08:00
border-radius: 1px;
2024-06-04 08:35:23 +08:00
margin-right: 8px;
2024-04-12 16:52:25 +08:00
margin-top: 8px;
}
2024-04-17 16:17:07 +08:00
.app-container {
background-color: #fff;
border-radius: 4px;
padding: 16px 16px 0;
height: calc(100vh - 134px);
overflow: auto;
2024-04-12 16:52:25 +08:00
}
</style>