|
|
@@ -136,7 +136,7 @@ import * as echarts from 'echarts';
|
|
|
import { listDeviceTypes } from "@/api/dyeing/gyfx";
|
|
|
import { listDevice } from "@/api/dye/device";
|
|
|
import { listHour } from "@/api/dye/hour.js";
|
|
|
-import { nextTick, ref } from 'vue';
|
|
|
+import { nextTick, ref, watch } from 'vue';
|
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
|
|
@@ -215,6 +215,8 @@ function handleEquipmentTypeChange(val) {
|
|
|
paramOptions.value = [];
|
|
|
deviceParams.value = [];
|
|
|
queryExecuted.value = false;
|
|
|
+ // 重置参数选择
|
|
|
+ selectedParams.value = [];
|
|
|
|
|
|
if (val) {
|
|
|
// 在设备类型列表中找到当前选中的设备类型
|
|
|
@@ -288,12 +290,14 @@ function handleQuery() {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10000,
|
|
|
deviceId: selectedDevice.value,
|
|
|
- dataDate: queryParams.value.workDay
|
|
|
+ workDay: queryParams.value.workDay
|
|
|
}).then(response => {
|
|
|
deviceParams.value = response.rows;
|
|
|
|
|
|
- // 默认选中所有参数
|
|
|
- selectedParams.value = paramOptions.value.map(param => param.paraCode);
|
|
|
+ // 默认选中所有参数(仅在参数选择为空时)
|
|
|
+ if (selectedParams.value.length === 0) {
|
|
|
+ selectedParams.value = paramOptions.value.map(param => param.paraCode);
|
|
|
+ }
|
|
|
|
|
|
queryExecuted.value = true;
|
|
|
|
|
|
@@ -340,21 +344,26 @@ function initCharts() {
|
|
|
if (instance) instance.dispose();
|
|
|
});
|
|
|
chartInstances.value = {};
|
|
|
-
|
|
|
+
|
|
|
// 定义一组协调的颜色
|
|
|
const chartColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
|
|
|
-
|
|
|
+
|
|
|
// 为每个选中的参数创建图表
|
|
|
selectedParams.value.forEach((paraCode, index) => {
|
|
|
const paramInfo = paramOptions.value.find(p => p.paraCode === paraCode);
|
|
|
if (paramInfo && chartRefs.value[paraCode]) {
|
|
|
- // 获取该参数的所有小时数据(7点到次日7点)
|
|
|
+ // 获取该参数的所有小时数据(按7点到次日7点顺序排列的实际数据)
|
|
|
const hoursData = getParamHoursData(paraCode);
|
|
|
-
|
|
|
+
|
|
|
+ // 如果没有数据,跳过此参数的图表绘制
|
|
|
+ if (hoursData.length === 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
// 初始化图表
|
|
|
const chartInstance = echarts.init(chartRefs.value[paraCode]);
|
|
|
chartInstances.value[paraCode] = chartInstance;
|
|
|
-
|
|
|
+
|
|
|
// 图表配置
|
|
|
const option = {
|
|
|
color: [chartColors[index % chartColors.length]], // 为每个图表使用不同的颜色
|
|
|
@@ -413,15 +422,15 @@ function initCharts() {
|
|
|
},
|
|
|
markPoint: {
|
|
|
data: [
|
|
|
- {
|
|
|
- type: 'max',
|
|
|
+ {
|
|
|
+ type: 'max',
|
|
|
name: '最大值',
|
|
|
itemStyle: {
|
|
|
color: chartColors[index % chartColors.length]
|
|
|
}
|
|
|
},
|
|
|
- {
|
|
|
- type: 'min',
|
|
|
+ {
|
|
|
+ type: 'min',
|
|
|
name: '最小值',
|
|
|
itemStyle: {
|
|
|
color: chartColors[index % chartColors.length]
|
|
|
@@ -431,8 +440,8 @@ function initCharts() {
|
|
|
},
|
|
|
markLine: {
|
|
|
data: [
|
|
|
- {
|
|
|
- type: 'average',
|
|
|
+ {
|
|
|
+ type: 'average',
|
|
|
name: '平均值',
|
|
|
label: {
|
|
|
position: 'middle',
|
|
|
@@ -448,16 +457,16 @@ function initCharts() {
|
|
|
}
|
|
|
}]
|
|
|
};
|
|
|
-
|
|
|
+
|
|
|
chartInstance.setOption(option);
|
|
|
-
|
|
|
+
|
|
|
// 添加点击事件监听
|
|
|
chartInstance.on('click', (params) => {
|
|
|
handleChartClick(params, paramInfo, hoursData);
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
-
|
|
|
+
|
|
|
// 建立图表联动
|
|
|
const chartInstanceArray = Object.values(chartInstances.value);
|
|
|
if (chartInstanceArray.length > 1) {
|
|
|
@@ -465,7 +474,7 @@ function initCharts() {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-/** 获取参数的小时数据(7点到次日7点) */
|
|
|
+/** 获取参数的小时数据(按7点到次日7点顺序排列的实际数据) */
|
|
|
function getParamHoursData(paraCode) {
|
|
|
// 获取该参数的所有数据
|
|
|
const paramData = deviceParams.value.filter(p => p.paraCode === paraCode);
|
|
|
@@ -477,24 +486,12 @@ function getParamHoursData(paraCode) {
|
|
|
hours.push(hour);
|
|
|
}
|
|
|
|
|
|
- const fullHours = hours.map((hour, index) => {
|
|
|
- const hourData = paramData.find(d => d.hour === hour);
|
|
|
- // 计算日期,如果是次日(小时小于7点),则日期为查询日期的次日
|
|
|
- let dataDate = queryParams.value.workDay;
|
|
|
- if (hour < 7 && index >= 17) { // 17是24小时数组中第18个元素(从0开始),对应次日0点
|
|
|
- const nextDate = new Date(queryParams.value.workDay);
|
|
|
- nextDate.setDate(nextDate.getDate() + 1);
|
|
|
- dataDate = nextDate.toISOString().split('T')[0];
|
|
|
- }
|
|
|
+ // 按照7点到次日7点的顺序排列实际数据
|
|
|
+ const orderedData = hours
|
|
|
+ .map(hour => paramData.find(d => d.hour === hour))
|
|
|
+ .filter(data => data !== undefined); // 过滤掉undefined,只保留实际存在的数据
|
|
|
|
|
|
- return hourData || {
|
|
|
- hour: hour,
|
|
|
- paraValue: null,
|
|
|
- dataDate: dataDate
|
|
|
- };
|
|
|
- });
|
|
|
-
|
|
|
- return fullHours;
|
|
|
+ return orderedData;
|
|
|
}
|
|
|
|
|
|
/** 图表点击事件处理 */
|
|
|
@@ -574,7 +571,7 @@ function initMinuteChart(minuteData, paramInfo) {
|
|
|
});
|
|
|
|
|
|
const unit = paramInfo.updatedBy || '';
|
|
|
-
|
|
|
+
|
|
|
// 为弹窗图表使用固定颜色
|
|
|
const chartColor = '#5470c6';
|
|
|
|
|
|
@@ -630,15 +627,15 @@ function initMinuteChart(minuteData, paramInfo) {
|
|
|
},
|
|
|
markPoint: {
|
|
|
data: [
|
|
|
- {
|
|
|
- type: 'max',
|
|
|
+ {
|
|
|
+ type: 'max',
|
|
|
name: '最大值',
|
|
|
itemStyle: {
|
|
|
color: chartColor
|
|
|
}
|
|
|
},
|
|
|
- {
|
|
|
- type: 'min',
|
|
|
+ {
|
|
|
+ type: 'min',
|
|
|
name: '最小值',
|
|
|
itemStyle: {
|
|
|
color: chartColor
|
|
|
@@ -721,5 +718,13 @@ onActivated(() => {
|
|
|
resizeChart();
|
|
|
});
|
|
|
|
|
|
+// 监听参数选择的变化,重新绘制图表
|
|
|
+watch(selectedParams, () => {
|
|
|
+ // 等待DOM更新后初始化图表
|
|
|
+ nextTick(() => {
|
|
|
+ initCharts();
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
getList();
|
|
|
</script>
|