mt-fe-group/yudao-init
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

新增模块

Browse Source
This commit is contained in:
‘937886381’
2024-04-17 16:17:07 +08:00
parent 5b59893edb
commit 320d747eb8
22 changed files with 5374 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

383
src/views/greenest/index.vue Normal file
View File

@@ -0,0 +1,383 @@
<!--
* @Author: zhp
* @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-04-17 16:14:01
* @LastEditors: zhp
* @Description:
-->
<template>
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)">
<div ref="parentChartDiv" class="app-container" style="padding: 16px 24px 0;height;auto;flex-grow: 1;">
<!-- <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 clearable 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 clearable v-model="listQuery.reportTime" type="monthrange" range-separator="至"
start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime">
</el-date-picker>
</el-form-item>
<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="开始时间">
</el-date-picker>
~
<el-date-picker clearable v-model="listQuery.reportTime[1]" value-format="yyyy" type="year" placeholder="结束时间"
@change="getYear">
</el-date-picker>
</el-form-item>
<el-form-item label="工厂名称" prop="factoryId">
<el-select clearable 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>
<!-- <el-row style="height: 400px;"> -->
<!-- <div style="height: auto;"> -->
<line-chart class="epChart" ref="lineChart" style="width: 100%"></line-chart>
<!-- </div> -->
<!-- </el-row> -->
</div>
<div class="app-container" style="margin-top: 18px;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">
</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 { 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
},
formConfig: [
{
type: 'title',
label: '环保管理',
},
],
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: '废水(t)',
// subcomponent: row
},
{
prop: 'unit',
label: '废气(m³)',
// subcomponent: row
},
{
prop: 'remark',
label: 'VOC(g/L)',
// subcomponent: row
},
{
prop: 'kg',
label: '固体废弃物-可回收(kg)',
// 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: {
buttonClick() {
},
getYear(e) {
if (this.listQuery.reportTime[0] && e - this.listQuery.reportTime[0] > 10) {
this.$message({
message: '年份起止时间不能超过十年',
type: 'warning'
});
// console.log();
}
// console.log(e);
},
changeTime() {
if (this.listQuery.reportTime) {
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) {
this.$message({
message: '时间范围不能超过24个月',
type: 'warning'
});
this.listQuery.reportTime = [];
this.createStartDate = '';
this.createEndDate = '';
}
} else {
this.createStartDate = '';
this.createEndDate = '';
}
},
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; */
/* } */
/* .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: auto;
overflow: auto;
}
</style>

211
src/views/greenest/lineChart.vue Normal file
View File

@@ -0,0 +1,211 @@
<!--
* @Author: zwq
* @Date: 2022-01-21 14:43:06
* @LastEditors: zhp
* @LastEditTime: 2024-04-16 15:48:46
* @Description:
-->
<template>
<!-- <div> -->
<!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
<div :id="id" class="epChart" :style="{ height: height, width: width }" />
<!-- </div> -->
</template>
<script>
import * as echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
import resize from '@/mixins/resize'
export default {
name: 'OverviewBar',
mixins: [resize],
props: {
id: {
type: String,
default: 'OverviewLine'
},
// className: {
// type: String,
// default: 'epChart'
// },
width: {
type: String,
default: '100%'
},
beilv: {
type: Number,
default: 1
},
height: {
type: String,
default: '550px'
},
legendPosition: {
type: String,
default: 'center'
},
showLegend: {
type: Boolean,
default: false
},
legendData: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null
}
},
mounted() {
// this.$nextTick(() => {
// this.initChart()
// })
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
console.log(1111)
this.chart = echarts.init(document.getElementById(this.id))
console.log(document.querySelector(".app-container").style);
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
// toolbox: {
// feature: {
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: ['line', 'bar'] },
// restore: { show: true },
// saveAsImage: { show: true }
// }
// },
grid: { top: 60, right: 90, bottom: 10, left: 10, containLabel: true },
legend: {
data: ['废水', '废气', 'VOC'],
right: '90px',
top: '0%',
icon: 'roundRect',
itemGap: 40,
itemWidth: 20,
itemHeight: 2,
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '废水/t',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: '废气/m³',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '废水',
type: 'line',
tooltip: {
valueFormatter: function (value) {
return value + ' t';
}
},
itemStyle: {
normal: {
color: 'rgba(40, 138, 255, 1)', //改变折线点的颜色
lineStyle: {
color: 'rgba(40, 138, 255, 1)' //改变折线颜色
}
}
},
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
},
{
name: '废气',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' m³';
}
},
itemStyle: {
normal: {
color: 'rgba(99, 189, 255, 1)', //改变折线点的颜色
lineStyle: {
color: 'rgba(99, 189, 255, 1)' //改变折线颜色
}
}
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
},
{
name: 'VOC',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' m³';
}
},
itemStyle: {
normal: {
color: 'rgba(255, 206, 106, 1)', //改变折线点的颜色
lineStyle: {
color: 'rgba(255, 206, 106, 1)' //改变折线颜色
}
}
},
data: [33.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
})
}
}
}
</script>
<style scoped>
/* .epChart {
position: absolute;
height: 100%;
width: 100%;
top: 10px;
} */
</style>