|
|
@@ -1,20 +1,41 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
- <el-form-item label="分析天数" prop="remark">
|
|
|
+ <el-form-item label="统计方式" prop="remark">
|
|
|
<el-select
|
|
|
v-model="queryParams.remark"
|
|
|
- placeholder="请选择分析天数"
|
|
|
+ placeholder="请选择统计方式"
|
|
|
clearable
|
|
|
style="width: 150px;"
|
|
|
- @change="handleDaysChange"
|
|
|
+ @change="handleRemarkChange"
|
|
|
>
|
|
|
- <el-option label="月(30天)" value="30"></el-option>
|
|
|
- <el-option label="季度(90天)" value="90"></el-option>
|
|
|
- <el-option label="半年(180天)" value="180"></el-option>
|
|
|
- <el-option label="年(365天)" value="365"></el-option>
|
|
|
+ <el-option label="按月" value="month"></el-option>
|
|
|
+ <el-option label="按天" value="day"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="选择月份" prop="dataDate" v-if="queryParams.remark === 'month'">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="queryParams.dataDate"
|
|
|
+ type="month"
|
|
|
+ placeholder="请选择月份"
|
|
|
+ style="width: 150px;"
|
|
|
+ value-format="YYYY-MM"
|
|
|
+ @change="handleMonthChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="选择日期" prop="dataDate" v-if="queryParams.remark === 'day'">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="queryParams.dataDate"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择日期"
|
|
|
+ style="width: 150px;"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ @change="handleDateChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
<el-form-item label="机台号" prop="deviceId">
|
|
|
<el-input
|
|
|
v-model="queryParams.deviceId"
|
|
|
@@ -127,25 +148,97 @@ const chartRef = ref(null);
|
|
|
const statistics = ref(null); // 添加统计数据
|
|
|
let chartInstance = null;
|
|
|
|
|
|
+// 计算默认日期(当前时间减去31小时)
|
|
|
+const getDefaultDate = () => {
|
|
|
+ const now = new Date();
|
|
|
+ const defaultDate = new Date(now.getTime() - 31 * 60 * 60 * 1000);
|
|
|
+ return defaultDate.toISOString().split('T')[0]; // 格式化为 YYYY-MM-DD
|
|
|
+};
|
|
|
+
|
|
|
+// 获取当前年月
|
|
|
+const getCurrentMonth = () => {
|
|
|
+ const now = new Date();
|
|
|
+ const year = now.getFullYear();
|
|
|
+ const month = (now.getMonth() + 1).toString().padStart(2, '0');
|
|
|
+ return `${year}-${month}`;
|
|
|
+};
|
|
|
+
|
|
|
const data = reactive({
|
|
|
form: {},
|
|
|
queryParams: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 1000,
|
|
|
deviceId: null,
|
|
|
- dataDate: null,
|
|
|
+ dataDate: getDefaultDate(),
|
|
|
hour: null,
|
|
|
- startTime: null,
|
|
|
- endTime: null,
|
|
|
+ startTime: getDefaultDate(),
|
|
|
+ endTime: getDefaultDate(),
|
|
|
stopType: 5,
|
|
|
- result: "明显上升", // 设置默认选中值
|
|
|
- remark: "90" // 默认选中90天(季度)
|
|
|
+ result: "", // 设置默认选中值
|
|
|
+ remark: "day", // 统计方式: month-按月, day-按天,默认按天
|
|
|
+ selectedMonth: null, // 选择的月份(已废弃,使用dataDate替代)
|
|
|
+ selectedDate: null // 选择的日期(已废弃,使用dataDate替代)
|
|
|
},
|
|
|
rules: {}
|
|
|
});
|
|
|
|
|
|
const {queryParams, form, rules} = toRefs(data);
|
|
|
|
|
|
+// 统计方式变化处理
|
|
|
+function handleRemarkChange() {
|
|
|
+ // 清空之前选择的日期
|
|
|
+ queryParams.value.dataDate = null;
|
|
|
+ // 重置其他查询条件
|
|
|
+ queryParams.value.deviceId = null;
|
|
|
+ queryParams.value.result = "";
|
|
|
+
|
|
|
+ // 如果切换到按天统计,设置默认日期
|
|
|
+ if (queryParams.value.remark === 'day') {
|
|
|
+ const defaultDate = getDefaultDate();
|
|
|
+ queryParams.value.dataDate = defaultDate;
|
|
|
+ queryParams.value.startTime = defaultDate;
|
|
|
+ queryParams.value.endTime = defaultDate;
|
|
|
+ }
|
|
|
+ // 如果切换到按月统计,设置默认月份
|
|
|
+ else if (queryParams.value.remark === 'month') {
|
|
|
+ const currentMonth = getCurrentMonth();
|
|
|
+ queryParams.value.dataDate = currentMonth;
|
|
|
+ queryParams.value.startTime = currentMonth + "-01";
|
|
|
+ // 设置为该月的最后一天作为结束时间
|
|
|
+ const year = parseInt(currentMonth.split("-")[0]);
|
|
|
+ const month = parseInt(currentMonth.split("-")[1]);
|
|
|
+ const lastDay = new Date(year, month, 0).getDate();
|
|
|
+ queryParams.value.endTime = currentMonth + "-" + (lastDay < 10 ? "0" + lastDay : lastDay);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 月份选择变化处理
|
|
|
+function handleMonthChange() {
|
|
|
+ if (queryParams.value.dataDate && queryParams.value.remark === 'month') {
|
|
|
+ // 设置为该月的第一天作为开始时间
|
|
|
+ queryParams.value.startTime = queryParams.value.dataDate + "-01";
|
|
|
+ // 设置为该月的最后一天作为结束时间
|
|
|
+ const year = parseInt(queryParams.value.dataDate.split("-")[0]);
|
|
|
+ const month = parseInt(queryParams.value.dataDate.split("-")[1]);
|
|
|
+ const lastDay = new Date(year, month, 0).getDate();
|
|
|
+ queryParams.value.endTime = queryParams.value.dataDate + "-" + (lastDay < 10 ? "0" + lastDay : lastDay);
|
|
|
+ } else {
|
|
|
+ queryParams.value.startTime = null;
|
|
|
+ queryParams.value.endTime = null;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 日期选择变化处理
|
|
|
+function handleDateChange() {
|
|
|
+ if (queryParams.value.dataDate && queryParams.value.remark === 'day') {
|
|
|
+ queryParams.value.startTime = queryParams.value.dataDate;
|
|
|
+ queryParams.value.endTime = queryParams.value.dataDate;
|
|
|
+ } else {
|
|
|
+ queryParams.value.startTime = null;
|
|
|
+ queryParams.value.endTime = null;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
// 分析天数变化处理
|
|
|
function handleDaysChange() {
|
|
|
getList(); // 分析天数变化时重新从后端获取数据
|
|
|
@@ -154,6 +247,24 @@ function handleDaysChange() {
|
|
|
/** 查询停机数据统计列表 */
|
|
|
function getList() {
|
|
|
loading.value = true;
|
|
|
+ // 根据统计方式设置查询参数
|
|
|
+ if (queryParams.value.remark === 'month' && queryParams.value.dataDate) {
|
|
|
+ // 按月查询
|
|
|
+ queryParams.value.startTime = queryParams.value.dataDate + "-01";
|
|
|
+ const year = parseInt(queryParams.value.dataDate.split("-")[0]);
|
|
|
+ const month = parseInt(queryParams.value.dataDate.split("-")[1]);
|
|
|
+ const lastDay = new Date(year, month, 0).getDate();
|
|
|
+ queryParams.value.endTime = queryParams.value.dataDate + "-" + (lastDay < 10 ? "0" + lastDay : lastDay);
|
|
|
+ } else if (queryParams.value.remark === 'day') {
|
|
|
+ // 按天查询,如果未选择日期则使用默认日期
|
|
|
+ if (!queryParams.value.dataDate) {
|
|
|
+ const defaultDate = getDefaultDate();
|
|
|
+ queryParams.value.dataDate = defaultDate;
|
|
|
+ }
|
|
|
+ queryParams.value.startTime = queryParams.value.dataDate;
|
|
|
+ queryParams.value.endTime = queryParams.value.dataDate;
|
|
|
+ }
|
|
|
+
|
|
|
gzStop(queryParams.value).then(response => {
|
|
|
calcStopList.value = response.data;
|
|
|
filteredData.value = response.data; // 初始化过滤数据
|
|
|
@@ -172,22 +283,22 @@ function calculateStatistics(data) {
|
|
|
|
|
|
// 计算设备总数
|
|
|
const totalDevices = data.length;
|
|
|
-
|
|
|
+
|
|
|
// 统计各趋势的数量
|
|
|
const trendCounts = {
|
|
|
- "明显上升": 0,
|
|
|
+ "": 0,
|
|
|
"上升": 0,
|
|
|
"平稳": 0,
|
|
|
"下降": 0,
|
|
|
"明显下降": 0
|
|
|
};
|
|
|
-
|
|
|
+
|
|
|
data.forEach(item => {
|
|
|
if (trendCounts.hasOwnProperty(item.result)) {
|
|
|
trendCounts[item.result]++;
|
|
|
}
|
|
|
});
|
|
|
-
|
|
|
+
|
|
|
// 只有在没有从后端获取到统计数据时才使用计算的统计数据
|
|
|
if (!statistics.value) {
|
|
|
statistics.value = {
|
|
|
@@ -207,6 +318,23 @@ function handleResultChange() {
|
|
|
filterData();
|
|
|
}
|
|
|
|
|
|
+/** 过滤操作 */
|
|
|
+function handleFilter() {
|
|
|
+ getList();
|
|
|
+}
|
|
|
+
|
|
|
+/** 重置过滤操作 */
|
|
|
+function resetFilter() {
|
|
|
+ proxy.resetForm("queryRef");
|
|
|
+ queryParams.value.deviceId = null;
|
|
|
+ queryParams.value.result = ""; // 重置时也保持默认选中
|
|
|
+ queryParams.value.remark = 'day'; // 重置为按天统计
|
|
|
+ queryParams.value.dataDate = getDefaultDate(); // 重置为默认日期
|
|
|
+ queryParams.value.startTime = getDefaultDate(); // 重置为默认日期
|
|
|
+ queryParams.value.endTime = getDefaultDate(); // 重置为默认日期
|
|
|
+ filterData(); // 改为调用filterData而不是getList()
|
|
|
+}
|
|
|
+
|
|
|
// 过滤数据
|
|
|
function filterData() {
|
|
|
if (!calcStopList.value || !Array.isArray(calcStopList.value)) {
|
|
|
@@ -217,8 +345,8 @@ function filterData() {
|
|
|
// 如果没有过滤条件,返回所有数据
|
|
|
if (!queryParams.value.deviceId && !queryParams.value.result) {
|
|
|
filteredData.value = calcStopList.value;
|
|
|
- // 重新设置原始统计数据
|
|
|
- getList();
|
|
|
+ // 根据完整数据重新计算统计数据
|
|
|
+ calculateStatistics(calcStopList.value);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
@@ -238,24 +366,11 @@ function filterData() {
|
|
|
|
|
|
return true;
|
|
|
});
|
|
|
-
|
|
|
+
|
|
|
// 根据过滤后的数据重新计算统计数据
|
|
|
calculateStatistics(filteredData.value);
|
|
|
}
|
|
|
|
|
|
-/** 过滤操作 */
|
|
|
-function handleFilter() {
|
|
|
- filterData();
|
|
|
-}
|
|
|
-
|
|
|
-/** 重置过滤操作 */
|
|
|
-function resetFilter() {
|
|
|
- proxy.resetForm("queryRef");
|
|
|
- queryParams.value.deviceId = null;
|
|
|
- queryParams.value.result = "明显上升"; // 重置时也保持默认选中
|
|
|
- getList(); // 重置时重新从后端获取数据
|
|
|
-}
|
|
|
-
|
|
|
/** 处理分析结果点击事件 */
|
|
|
function handleResultClick(row) {
|
|
|
currentRow.value = row;
|
|
|
@@ -279,9 +394,20 @@ function initChart() {
|
|
|
chartInstance = echarts.init(chartRef.value);
|
|
|
|
|
|
// 准备数据
|
|
|
- const dates = currentRow.value.list.map(item => item.date);
|
|
|
+ let dates = currentRow.value.list.map(item => item.date);
|
|
|
const times = currentRow.value.list.map(item => item.times);
|
|
|
|
|
|
+ // 如果是按月统计,只显示日期部分,不显示时间
|
|
|
+ if (queryParams.value.remark === 'month') {
|
|
|
+ dates = dates.map(date => {
|
|
|
+ // 只保留日期部分 YYYY-MM-DD
|
|
|
+ if (date.includes(' ')) {
|
|
|
+ return date.split(' ')[0];
|
|
|
+ }
|
|
|
+ return date;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
// 配置图表选项
|
|
|
const option = {
|
|
|
title: {
|
|
|
@@ -289,7 +415,16 @@ function initChart() {
|
|
|
left: 'center'
|
|
|
},
|
|
|
tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
+ trigger: 'axis',
|
|
|
+ formatter: function (params) {
|
|
|
+ // 如果是按月统计,提示框中也只显示日期
|
|
|
+ if (queryParams.value.remark === 'month') {
|
|
|
+ const date = params[0].axisValue;
|
|
|
+ const count = params[0].data;
|
|
|
+ return `${date}<br />次数: ${count}`;
|
|
|
+ }
|
|
|
+ return params[0].axisValue + '<br />' + params[0].seriesName + ': ' + params[0].data;
|
|
|
+ }
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|