|
@@ -2819,7 +2819,7 @@
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
<!-- 趋势分析对话框 -->
|
|
|
- <el-dialog @open="draw" :title="analysis.title" :visible.sync="analysis.open" width="1000px" append-to-body>
|
|
|
+ <el-dialog :title="analysis.title" :visible.sync="analysis.open" width="1000px" append-to-body>
|
|
|
<el-form :model="analysisQueryParams" ref="queryForm" :inline="true" label-width="68px">
|
|
|
<el-form-item label="开始日期" prop="startDate">
|
|
|
<el-date-picker
|
|
@@ -2845,7 +2845,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getReportByMaxDate, listReport, getReport, delReport, addReport, updateReport, exportReport, importTemplate} from "@/api/production/report";
|
|
|
+import { getAnalysisData, getReportByMaxDate, listReport, getReport, delReport, addReport, updateReport, exportReport, importTemplate} from "@/api/production/report";
|
|
|
import { treeselect } from "@/api/system/dept";
|
|
|
import { getToken } from "@/utils/auth";
|
|
|
import Treeselect from "@riophae/vue-treeselect";
|
|
@@ -2903,9 +2903,12 @@ export default {
|
|
|
},
|
|
|
// 趋势分析参数
|
|
|
analysisQueryParams: {
|
|
|
+ fieldName: null,
|
|
|
startDate: null,
|
|
|
endDate: null
|
|
|
},
|
|
|
+ valueList: [],
|
|
|
+ dateList: [],
|
|
|
// 查询参数
|
|
|
queryParams: {
|
|
|
pageNum: 1,
|
|
@@ -4021,86 +4024,123 @@ export default {
|
|
|
// },
|
|
|
mixins: [echartMixins],
|
|
|
methods: {
|
|
|
+ handleAnalysisQuery() {
|
|
|
+ this.echarts.dispose(this.chart);
|
|
|
+ this.valueList = [];
|
|
|
+ this.dateList = [];
|
|
|
+ let endDate = new Date(this.analysisQueryParams.endDate);
|
|
|
+ let startDate = new Date(this.analysisQueryParams.startDate);
|
|
|
+ this.analysisQueryParams.endDate = endDate.getFullYear() + "-" + Number(endDate.getMonth() + 1) + "-" + endDate.getDate();
|
|
|
+ this.analysisQueryParams.startDate = startDate.getFullYear() + "-" + Number(startDate.getMonth() + 1) + "-" + startDate.getDate();
|
|
|
+ getAnalysisData(this.analysisQueryParams).then(response => {
|
|
|
+ let data = response.data;
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ this.valueList[i] = data[i].valueData;
|
|
|
+ this.dateList[i] = data[i].dateData;
|
|
|
+ }
|
|
|
+ this.chart = this.echarts.init(document.getElementById("bottomRightChartDialog"));
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item"
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: 90,
|
|
|
+ right: 80,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: this.dateList.reverse(),
|
|
|
+ name: '日期'
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ name: '值'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top'
|
|
|
+ },
|
|
|
+ data: this.valueList.reverse(),
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbolSize: 15,
|
|
|
+ color:"#1f9f90",
|
|
|
+ lineStyle: {
|
|
|
+ width: 6
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.chart.setOption(option);
|
|
|
+ });
|
|
|
+ },
|
|
|
draw() {
|
|
|
- // 设置开始日期和结束日期,默认范围为一个月
|
|
|
- let today = new Date();
|
|
|
- let monthBefore = new Date();
|
|
|
- if (today.getMonth() != 2 && today.getDate() >= 28) {
|
|
|
- monthBefore.setDate(28);
|
|
|
- monthBefore.setMonth(today.getMonth()-1);
|
|
|
- } else {
|
|
|
- monthBefore.setMonth(today.getMonth()-1);
|
|
|
- }
|
|
|
-
|
|
|
- this.analysisQueryParams.endDate = today;
|
|
|
- this.analysisQueryParams.startDate = monthBefore;
|
|
|
-
|
|
|
- // 基于准备好的dom,初始化echarts实例
|
|
|
- this.chart = this.echarts.init(document.getElementById("bottomRightChartDialog"));
|
|
|
-
|
|
|
- let option = {
|
|
|
- tooltip: {
|
|
|
- trigger: "item"
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: 90,
|
|
|
- right: 80,
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- data: ["1", "2", "3"],
|
|
|
- name: '日期'
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- name: '值'
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'top'
|
|
|
- },
|
|
|
- data: ["1", "2", "3"],
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- symbolSize: 15,
|
|
|
- color:"#1f9f90",
|
|
|
- lineStyle: {
|
|
|
- width: 6
|
|
|
- },
|
|
|
- markLine: {
|
|
|
- silent: true,
|
|
|
- data: [
|
|
|
- {
|
|
|
- type: "average",
|
|
|
- name: "额定值",
|
|
|
- yAxis: 900
|
|
|
- }
|
|
|
- ],
|
|
|
- precision: 0,
|
|
|
+ getAnalysisData(this.analysisQueryParams).then(response => {
|
|
|
+ let data = response.data;
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ this.valueList[i] = data[i].valueData;
|
|
|
+ this.dateList[i] = data[i].dateData;
|
|
|
+ }
|
|
|
+ this.chart = this.echarts.init(document.getElementById("bottomRightChartDialog"));
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item"
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: 90,
|
|
|
+ right: 80,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: this.dateList.reverse(),
|
|
|
+ name: '日期'
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ name: '值'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
label: {
|
|
|
- normal: {
|
|
|
- formatter: "额定值: \n {c}"
|
|
|
- }
|
|
|
+ show: true,
|
|
|
+ position: 'top'
|
|
|
},
|
|
|
+ data: this.valueList.reverse(),
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbolSize: 15,
|
|
|
+ color:"#1f9f90",
|
|
|
lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 3,
|
|
|
- color: "rgba(248,211,81,.7)"
|
|
|
- }
|
|
|
+ width: 6
|
|
|
}
|
|
|
- },
|
|
|
- }
|
|
|
- ]
|
|
|
-
|
|
|
- };
|
|
|
-
|
|
|
- this.chart.setOption(option);
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.chart.setOption(option);
|
|
|
+ });
|
|
|
},
|
|
|
// 打开趋势分析对话框
|
|
|
- openDialog(field, title) {
|
|
|
+ openDialog(fieldName, title) {
|
|
|
+ // 设置开始日期和结束日期,默认范围为一个月
|
|
|
+ let today = new Date(this.reportData.reportDate);
|
|
|
+ let monthBefore = new Date();
|
|
|
+ if (today.getMonth() == 2 && today.getDate() >= 28) { // 三月的28-31号:年不变,日=28
|
|
|
+ monthBefore.setDate(28);
|
|
|
+ monthBefore.setFullYear(today.getFullYear());
|
|
|
+ } else if (today.getMonth() == 0) { // 一月:日不变,年-1
|
|
|
+ monthBefore.setDate(today.getDate());
|
|
|
+ monthBefore.setFullYear(today.getFullYear() - 1);
|
|
|
+ } else { // 其它月份:年、日不变
|
|
|
+ monthBefore.setDate(today.getDate());
|
|
|
+ monthBefore.setFullYear(today.getFullYear());
|
|
|
+ }
|
|
|
+ monthBefore.setMonth(today.getMonth()-1);
|
|
|
+ this.analysisQueryParams.endDate = today.getFullYear() + "-" + Number(today.getMonth() + 1) + "-" + today.getDate();
|
|
|
+ this.analysisQueryParams.startDate = monthBefore.getFullYear() + "-" + Number(monthBefore.getMonth() + 1) + "-" + monthBefore.getDate();
|
|
|
+ this.analysisQueryParams.fieldName = fieldName;
|
|
|
this.analysis.title = title + "趋势分析";
|
|
|
this.analysis.open = true;
|
|
|
+ this.draw();
|
|
|
},
|
|
|
/** 编辑按钮操作 */
|
|
|
handleUpdate(row) {
|