<template>
|
<el-card class="flex-auto scroll-table-card" shadow="hover">
|
<el-tabs v-model="state.activeName" class="w100 h100">
|
<el-tab-pane label="热力图" name="heatMapPage" class="w100 h100">
|
<div class="box_right_title form_m1">
|
<span class="mr15">运行分析</span>
|
<el-form ref="queryQHFormRef" :inline="true" :model="state.queryQHForm">
|
<el-form-item label="日期">
|
<el-date-picker
|
v-model="state.queryQHForm.themetime"
|
range-separator="~"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:disabled-date="disablesDate"
|
type="daterange"
|
:default-time="defaultTime"
|
clearable
|
value-format="YYYY-MM-DD"
|
@change="getDateTime"
|
size="small"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button class="ml10" @click="timeQuery()" size="small" type="primary">查询</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="setQHForm">
|
<el-form ref="queryQHFormRef" :inline="true" :model="state.queryQHForm" :rules="queryQHRules">
|
<el-form-item label="流量间隔值" prop="Qspace">
|
<el-input-number
|
v-model="state.queryQHForm.Qspace"
|
placeholder="流量间隔值"
|
autocomplete="off"
|
:controls="false"
|
style="width: 100px"
|
:min="1"
|
@input="flowIntervalValue"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item label="扬程间隔值" prop="Hspace">
|
<el-input-number
|
v-model="state.queryQHForm.Hspace"
|
placeholder="扬程间隔值"
|
:controls="false"
|
style="width: 100px"
|
autocomplete="off"
|
@input="headIntervalValue"
|
></el-input-number>
|
</el-form-item>
|
</el-form>
|
|
<el-form :model="state.QHForm" :inline="true">
|
<el-form-item label="显示值" label-width="65px">
|
<el-switch v-model="state.QHForm.showValue" @change="isShowQHValue" />
|
</el-form-item>
|
<!-- @change="isShowTOrP" -->
|
<el-form-item label="时间或功率" label-width="95px">
|
<el-switch v-model="state.QHForm.tOrP" @change="tOrPChange" />
|
</el-form-item>
|
</el-form>
|
</div>
|
<div style="display: flex; height: calc(100% - 120px)">
|
<div id="chartHeatmapBox" class="chart" style="width: calc(100% - 0px); height: calc(100% - 0px)"></div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="精确查询" name="cacurateQueryPage">
|
<el-row :gutter="8" class="h100">
|
<el-col :span="20" :xs="24" class="flex-column h100">
|
<div>
|
<div class="box_right_title form_m1">
|
<span class="mr15">运行分析</span>
|
<el-form ref="queryQHFormRef" :inline="true" :model="state.queryQHForm">
|
<el-form-item label="日期">
|
<el-date-picker
|
v-model="state.queryQHForm.themetime"
|
range-separator="~"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:disabled-date="disablesDate"
|
type="daterange"
|
:default-time="defaultTime"
|
clearable
|
value-format="YYYY-MM-DD"
|
@change="getDateTime"
|
size="small"
|
/>
|
</el-form-item>
|
</el-form>
|
</div>
|
<el-table
|
class="mt10"
|
ref="draggableTableRef"
|
border
|
row-key="ID"
|
:cell-style="{ textAlign: 'center' }"
|
:header-cell-style="{ textAlign: 'center' }"
|
:data="state.displayTableData"
|
style="width: 100%"
|
highlight-current-row
|
height="670"
|
>
|
<el-table-column type="index" label="序号" fixed="left" show-overflow-tooltip width="150" />
|
<el-table-column prop="Name" label="泵组合" show-overflow-tooltip width="150"> </el-table-column>
|
<el-table-column prop="Qavg" label="流量" show-overflow-tooltip width="150" />
|
<el-table-column prop="Havg" width="150" label="扬程" show-overflow-tooltip />
|
<el-table-column prop="Pavg" width="150" label="功率(kW)" show-overflow-tooltip />
|
<el-table-column label="运行时间(h)" show-overflow-tooltip prop="Tsum" fixed="right"> </el-table-column>
|
</el-table>
|
</div>
|
</el-col>
|
<el-col :span="4" :xs="24" class="flex-column h100">
|
<div class="box_right_title">分析参数</div>
|
<div class="mt10">
|
<el-form label-width="45px" :model="state.analyzeForm" class="formLabel_size">
|
<div class="flex flex-space-between">
|
<el-form-item label="流量">
|
<el-input v-model="state.analyzeForm.Q" @input="verifiyInstant($event, 1)" class="analyseInput_left" />
|
</el-form-item>
|
<el-form-item label="偏差值" label-width="56px">
|
<el-input
|
v-model="state.analyzeForm.deviationQValue"
|
@input="verifiyInstant($event, 2)"
|
class="analyseInput_right"
|
/>
|
</el-form-item>
|
</div>
|
<div class="flex flex-space-between">
|
<el-form-item label="扬程">
|
<el-input v-model="state.analyzeForm.H" @input="verifiyInstant($event, 3)" class="analyseInput_left" />
|
</el-form-item>
|
<el-form-item label="偏差值" label-width="56px">
|
<el-input
|
v-model="state.analyzeForm.deviationHValue"
|
@input="verifiyInstant($event, 4)"
|
class="analyseInput_right"
|
/>
|
</el-form-item>
|
</div>
|
</el-form>
|
</div>
|
<div class="box_right_title mt10">偏差范围</div>
|
<div class="mt10">
|
<el-form label-width="45px" :model="state.deviationForm">
|
<div class="flex flex-space-between">
|
<el-form-item label="流量">
|
<el-input v-model="state.deviationForm.QdStart" @input="verifiyInstant($event, 5)" class="deviationInput" />
|
<span style="color: #ccc; padding: 0px 4px"> ～ </span>
|
<el-input v-model="state.deviationForm.QdEnd" @input="verifiyInstant($event, 6)" class="deviationInput" />
|
</el-form-item>
|
</div>
|
<div class="flex flex-space-between mt10">
|
<el-form-item label="扬程">
|
<el-input v-model="state.deviationForm.HdStart" @input="verifiyInstant($event, 7)" class="deviationInput" />
|
<span style="color: #ccc; padding: 0px 4px"> ～ </span>
|
<el-input v-model="state.deviationForm.HdEnd" @input="verifiyInstant($event, 8)" class="deviationInput" />
|
</el-form-item>
|
</div>
|
<el-form-item>
|
<el-button class="ml10 mt10" type="primary" @click="getTableDetail()">查询</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
<el-dialog
|
:destroy-on-close="true"
|
v-model="state.heatmapDetailShow"
|
width="700px"
|
:close-on-click-modal="false"
|
@closed="closeDialog"
|
:title="state.dialogTitle"
|
>
|
<div style="display: flex; height: 400px; width: 100%">
|
<div id="chartPie" class="chart" style="width: calc(100% - 0px); height: calc(100% - 0px)"></div>
|
</div>
|
|
<el-table
|
ref="draggableTableRef"
|
border
|
:cell-style="{ textAlign: 'center' }"
|
:header-cell-style="{ textAlign: 'center' }"
|
:data="state.pieData"
|
style="width: 100%"
|
highlight-current-row
|
>
|
<el-table-column type="index" label="序号" show-overflow-tooltip width="70" />
|
<el-table-column prop="Name" label="泵组合" show-overflow-tooltip width="130"> </el-table-column>
|
<el-table-column prop="Qavg" label="流量" show-overflow-tooltip width="110" />
|
<el-table-column prop="Havg" width="90" label="扬程" show-overflow-tooltip />
|
<el-table-column prop="Pavg" width="130" label="功率(kW)" show-overflow-tooltip />
|
<el-table-column label="运行时间(h)" show-overflow-tooltip prop="Tsum"> </el-table-column>
|
</el-table>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts">
|
import * as echarts from 'echarts';
|
import { ElMessage } from 'element-plus';
|
import moment from 'moment';
|
import type { FormRules } from 'vue';
|
import { onActivated, onMounted, reactive, ref, shallowRef, toRefs } from 'vue';
|
import { GetRectDetailListOfDayRange, GetRectListOfDayRange } from '/@/api/eta/runHeat';
|
import { LOGIC_SITE_CODE } from '/@/constants';
|
import { uniqueInArray } from '/@/utils/istation/common.js';
|
import { verifyNumberComma } from '/@/utils/toolsValidate';
|
const defaultTime = ref<[Date, Date]>([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]);
|
// 定义变量内容
|
const state = reactive({
|
chartData: [],
|
echartTitle: '',
|
queryQHForm: {
|
Qspace: 100,
|
Hspace: 1,
|
themetime: '',
|
} as any,
|
QHForm: {
|
showValue: false,
|
tOrP: true,
|
},
|
heatmapDetailShow: false, //打开热力图的详细 （默认关闭）
|
dialogTitle: '泵组合信息', //详细的名字
|
pieData: [], //饼图数据源
|
activeName: 'heatMapPage', //默认选中热力图
|
displayTableData: [], //精确查询数据
|
analyzeForm: {
|
deviationQValue: 50,
|
deviationHValue: 0.5,
|
} as any, //分析参数
|
deviationForm: {} as any, //偏差范围
|
min: '',
|
max: '',
|
runTimeData: [],
|
minE: '',
|
maxE: '',
|
eData: [],
|
});
|
const m_chartHeatmapBox = shallowRef();
|
const m_chartPie = shallowRef();
|
const queryQHFormRef = ref();
|
//#region ====================== 图表传参 ======================
|
const props = defineProps({
|
currentListID: String,
|
queryDisabled: {
|
type: Boolean,
|
default: false,
|
},
|
pumpTitle: String,
|
});
|
let { currentListID, queryDisabled, pumpTitle } = toRefs(props);
|
//#endregion
|
//#region ====================== 设置时间事件 ======================
|
//默认时间选择前7天/默认选择当天
|
const getdatatime = () => {
|
let sevenAgo = moment(new Date()).subtract(7, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss');
|
let today = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
|
return [sevenAgo, today];
|
};
|
//获取日期的时间
|
const getDateTime = (val) => {
|
if (val == null) {
|
return ElMessage.warning('请选择时间');
|
}
|
state.queryQHForm.themetime[0] = val[0];
|
state.queryQHForm.themetime[1] = val[1];
|
};
|
// 时间限制
|
const disablesDate = (time) => {
|
return time.getTime() > new Date().getTime();
|
};
|
//查询时间
|
const timeQuery = async () => {
|
if (!queryQHFormRef.value) return;
|
await queryQHFormRef.value.validate(async (valid, fields) => {
|
if (valid) {
|
getChartList();
|
} else {
|
return ElMessage.error('必填项!');
|
}
|
});
|
};
|
//#endregion
|
//#region ====================== 表单验证 ======================
|
const queryQHRules = reactive<FormRules>({
|
Qspace: [{ required: true, message: '只能输入数字', trigger: 'blur' }],
|
Hspace: [{ required: true, message: '只能输入数字', trigger: 'blur' }],
|
});
|
//#endregion
|
//#region ====================== 图表 扬程/效率/init======================
|
//通过 日期曲线获取热力图图表数据
|
const getChartList = async () => {
|
return null;
|
await GetRectListOfDayRange({
|
ObjectType: LOGIC_SITE_CODE,
|
ObjectID: currentListID.value,
|
Qspace: state.queryQHForm.Qspace,
|
Hspace: state.queryQHForm.Hspace,
|
StartDay: state.queryQHForm.themetime[0],
|
EndDay: state.queryQHForm.themetime[1],
|
}).then((res) => {
|
let result = res.Data;
|
if (res.Code != 0) {
|
state.chartData = [];
|
m_chartHeatmapBox.value && m_chartHeatmapBox.value.clear();
|
return;
|
}
|
if (res.Data == null || res.Data.length == 0) {
|
state.chartData = [];
|
m_chartHeatmapBox.value && m_chartHeatmapBox.value.clear();
|
return ElMessage.warning('暂无数据');
|
}
|
state.chartData = result || [];
|
|
setTimeout(() => {
|
//初始化图表
|
BuildchartHeatmapBox();
|
}, 100);
|
});
|
};
|
// 初始化流量扬程图表
|
const BuildchartHeatmapBox = () => {
|
m_chartHeatmapBox.value && m_chartHeatmapBox.value.clear();
|
if (state.chartData.length == 0) return;
|
//先获取Dom上的实例
|
let chartDom = echarts.getInstanceByDom(document.getElementById('chartHeatmapBox') as HTMLDivElement);
|
//然后判断实例是否存在，如果不存在，就创建新实例
|
if (chartDom == null) {
|
chartDom = echarts.init(document.getElementById('chartHeatmapBox') as HTMLDivElement);
|
}
|
m_chartHeatmapBox.value = chartDom;
|
var xData = [];
|
var yData = [];
|
var runTimeData = [];
|
var eData = [];
|
for (var i = 0; i < state.chartData.length; i++) {
|
var node = state.chartData[i];
|
if (node.Tsum != 0) {
|
var x = parseFloat(((node.Qmax + node.Qmin) / 2).toFixed(4));
|
var y = parseFloat(((node.Hmax + node.Hmin) / 2).toFixed(4));
|
var time = parseFloat((node.Tsum / 60 / 60).toFixed(3));
|
x = node.Qmax;
|
y = node.Hmax;
|
|
xData.push(x);
|
yData.push(y);
|
node.Tsum = time;
|
runTimeData.push({ rect_data: node, value: [x.toString(), y.toString(), node.Tsum, node] });
|
eData.push({ rect_data: node, value: [x.toString(), y.toString(), node.Eavg, node] }); //Eavg 效率
|
}
|
}
|
xData = uniqueInArray(xData); //去重
|
yData = uniqueInArray(yData); //去重
|
yData.sort(compareNumbers);
|
var max = 1;
|
var min = 0;
|
var maxE = 100;
|
var minE = 0;
|
if (state.chartData.length != 0) {
|
max = Math.max.apply(
|
Math,
|
state.chartData.map((item) => {
|
return item.Tsum;
|
})
|
); //数据的最大值
|
min = Math.min.apply(
|
Math,
|
state.chartData.map((item) => {
|
return item.Tsum;
|
})
|
); //数据的最小值
|
maxE = Math.max.apply(
|
Math,
|
state.chartData.map((item) => {
|
return item.Eavg;
|
})
|
); //效率数据的最大值
|
var minValE = [];
|
state.chartData.forEach((item) => {
|
if (item.Eavg != 0) {
|
minValE.push(item.Eavg);
|
}
|
});
|
minE = Math.min.apply(Math, minValE); //效率数据的最小值
|
}
|
// console.log(xData, yData, runTimeData);
|
//console.log(max,min)
|
runTimeData = runTimeData.map(function (item) {
|
return { rect_data: item.rect_data, value: [item.value[0], item.value[1], item.value[2] || '-'] };
|
//return { rect_data: item.rect_data, value: [item.value[0], item.value[1], item.value[2]] };
|
});
|
|
eData = eData.map(function (item) {
|
return { rect_data: item.rect_data, value: [item.value[0], item.value[1], item.value[2] || '-'] };
|
});
|
var option = {
|
tooltip: {
|
//position: 'top'
|
formatter: function (p) {
|
//console.log(p.data)
|
if (!p.data) {
|
return '';
|
}
|
return (
|
p.data.rect_data.Qmin +
|
'-' +
|
p.data.rect_data.Qmax +
|
'</br>' +
|
p.marker +
|
'时间: ' +
|
p.data.rect_data.Tsum +
|
'小时 效率: ' +
|
p.data.rect_data.Eavg +
|
'%'
|
);
|
},
|
},
|
animation: false,
|
grid: {
|
containLabel: true,
|
left: '80',
|
right: '80',
|
top: '70',
|
bottom: '15',
|
},
|
legend: {
|
data: ['效率', '运行时间'],
|
},
|
xAxis: {
|
name: '流量(m³)',
|
type: 'category', //category log
|
data: xData,
|
//boundaryGap:false,
|
splitArea: {
|
show: true,
|
interval: 0,
|
},
|
axisLabel: {
|
//formatter: function (value, index) {
|
// console.log(value, index)
|
// return value
|
//}
|
},
|
axisTick: {
|
alignWithLabel: true,
|
},
|
axisPointer: {
|
show: true,
|
type: 'shadow',
|
},
|
},
|
yAxis: {
|
name: '扬程(m)',
|
type: 'category',
|
data: yData,
|
splitArea: {
|
show: true,
|
interval: 0,
|
},
|
axisTick: {
|
alignWithLabel: true,
|
},
|
axisPointer: {
|
show: true,
|
type: 'shadow',
|
},
|
},
|
visualMap: [
|
{
|
min: min,
|
max: max,
|
calculable: true,
|
text: ['时间:(小时)', ''],
|
textGap: 20,
|
realtime: false,
|
//orient:'horizontal',
|
top: 'middle',
|
inRange: {
|
color: ['#2ba2ee', '#f32cb7'], //['#2ba2ee', '#f32cb7'] //['#313695', '#a50026']
|
},
|
////color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
|
},
|
],
|
series: [
|
{
|
name: '运行时间',
|
type: 'heatmap',
|
data: runTimeData,
|
label: {
|
show: false,
|
},
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
},
|
},
|
},
|
],
|
};
|
// 使用刚指定的配置项和数据显示图表。
|
m_chartHeatmapBox.value.setOption(option, true);
|
m_chartHeatmapBox.value.setOption({
|
visualMap: [
|
{
|
min: min,
|
max: max,
|
range: [min, max],
|
},
|
],
|
});
|
m_chartHeatmapBox.value.on('click', function (obj) {
|
let node = obj.data.rect_data;
|
let QAve = (node.Qmin + node.Qmax) / 2;
|
let HAve = (node.Hmin + node.Hmax) / 2;
|
state.deviationForm.QdStart = node.Qmin;
|
state.deviationForm.QdEnd = node.Qmax;
|
state.analyzeForm.Q = QAve;
|
state.deviationForm.HdStart = node.Hmin;
|
state.deviationForm.HdEnd = node.Hmax;
|
state.analyzeForm.H = HAve;
|
setChartTableDialog(node.Qmin, node.Qmax, node.Hmin, node.Hmax);
|
});
|
state.min = min;
|
state.max = max;
|
state.runTimeData = runTimeData;
|
state.minE = minE;
|
state.maxE = maxE;
|
state.eData = eData;
|
window.addEventListener('resize', selfAdaption);
|
};
|
const compareNumbers = (a, b) => {
|
return a - b; // 从小到大排序
|
};
|
//打开弹窗
|
const setChartTableDialog = async (qLower, qUpper, hLower, hUpper) => {
|
state.heatmapDetailShow = true;
|
await GetRectDetailListOfDayRange({
|
ObjectType: LOGIC_SITE_CODE,
|
ObjectID: currentListID.value,
|
Qmin: qLower,
|
Qmax: qUpper,
|
Hmin: hLower,
|
Hmax: hUpper,
|
StartDay: state.queryQHForm.themetime[0],
|
EndDay: state.queryQHForm.themetime[1],
|
}).then((res) => {
|
let result = res.Data;
|
if (res.Code != 0) {
|
state.pieData = [];
|
m_chartPie.value && m_chartPie.value.clear();
|
return;
|
}
|
if (res.Data == null || res.Data.length == 0) {
|
state.pieData = [];
|
m_chartPie.value && m_chartPie.value.clear();
|
return ElMessage.warning('饼图暂无数据');
|
}
|
result.forEach((item) => (item.Tsum = (item.Tsum / 60 / 60).toFixed(2)));
|
state.pieData = result || [];
|
setTimeout(() => {
|
//初始化饼图
|
buildPieChartBox();
|
}, 100);
|
});
|
};
|
// 初始化饼图
|
const buildPieChartBox = () => {
|
m_chartPie.value && m_chartPie.value.clear();
|
if (state.pieData.length == 0) return;
|
//先获取Dom上的实例
|
let chartDom = echarts.getInstanceByDom(document.getElementById('chartPie') as HTMLDivElement);
|
//然后判断实例是否存在，如果不存在，就创建新实例
|
if (chartDom == null) {
|
chartDom = echarts.init(document.getElementById('chartPie') as HTMLDivElement);
|
}
|
m_chartPie.value = chartDom;
|
var seriesData = [];
|
for (var i = 0; i < state.pieData.length; i++) {
|
var item = state.pieData[i];
|
seriesData.push({ value: parseFloat(item.Tsum), name: item.Name });
|
}
|
let option = {
|
title: {
|
text: '',
|
subtext: '',
|
left: 'center',
|
},
|
tooltip: {
|
trigger: 'item',
|
},
|
legend: {
|
orient: 'vertical',
|
left: 'left',
|
},
|
series: [
|
{
|
name: '运行时间',
|
type: 'pie',
|
radius: '50%',
|
data: seriesData,
|
label: {
|
show: true,
|
formatter: '{b}{a}：{c}小时',
|
},
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
},
|
},
|
},
|
],
|
};
|
m_chartPie.value.setOption(option, true);
|
m_chartPie.value && m_chartPie.value.resize();
|
};
|
//关闭弹窗
|
const closeDialog = () => {
|
state.heatmapDetailShow = false;
|
};
|
// 热力图自适应
|
const selfAdaption = () => {
|
if (!m_chartHeatmapBox.value) return;
|
m_chartHeatmapBox.value.resize();
|
};
|
// 饼图自适应
|
const selfPipeAdaption = () => {
|
if (!m_chartPie.value) return;
|
m_chartPie.value.resize();
|
};
|
//#endregion
|
//#region ====================== 是否显示值/时间/功率 ======================
|
const isShowQHValue = () => {
|
if (state.QHForm.showValue) {
|
m_chartHeatmapBox.value &&
|
m_chartHeatmapBox.value.setOption({
|
series: [
|
{
|
label: {
|
show: true,
|
color: 'white',
|
},
|
},
|
],
|
});
|
} else {
|
m_chartHeatmapBox.value &&
|
m_chartHeatmapBox.value.setOption({
|
series: [
|
{
|
label: {
|
show: false,
|
},
|
},
|
],
|
});
|
}
|
};
|
const tOrPChange = (val) => {
|
state.QHForm.tOrP = val;
|
isShowTOrP();
|
};
|
const isShowTOrP = () => {
|
var isRunTime = true;
|
if (state.QHForm.tOrP) {
|
m_chartHeatmapBox.value.setOption({
|
visualMap: [
|
{
|
min: state.min,
|
max: state.max,
|
text: ['时间:(小时)', ''],
|
range: [state.min, state.max],
|
inRange: {
|
color: ['#2ba2ee', '#f32cb7'],
|
},
|
},
|
],
|
series: [
|
{
|
name: '运行时间',
|
data: state.runTimeData,
|
},
|
],
|
});
|
isRunTime = true;
|
} else {
|
m_chartHeatmapBox.value.setOption({
|
visualMap: [
|
{
|
min: state.minE,
|
max: state.maxE,
|
text: ['效率:(%)', ''],
|
range: [state.minE, state.maxE],
|
inRange: {
|
color: ['#ccc', '#332cb7'],
|
},
|
},
|
],
|
|
series: [
|
{
|
name: '效率',
|
data: state.eData,
|
},
|
],
|
});
|
isRunTime = false;
|
}
|
};
|
|
//#endregion
|
//#region ====================== 切换成精确查询 ======================
|
//验证的时候只能输入数字
|
const verifiyInstant = (val, type) => {
|
switch (type) {
|
case 1:
|
if (state.analyzeForm.Q == '') return;
|
state.analyzeForm.Q = verifyNumberComma(val);
|
let qLowerValue = parseFloat(state.analyzeForm.Q) - parseFloat(state.analyzeForm.deviationQValue);
|
let qUpperValue = parseFloat(state.analyzeForm.Q) + parseFloat(state.analyzeForm.deviationQValue);
|
state.deviationForm.QdStart = qLowerValue; //流量偏差最小值
|
state.deviationForm.QdEnd = qUpperValue; //流量偏差最大值
|
|
break;
|
case 2:
|
if (state.analyzeForm.deviationQValue == '') return;
|
state.analyzeForm.deviationQValue = verifyNumberComma(val);
|
let q_LowerValue = parseFloat(state.analyzeForm.Q) - parseFloat(state.analyzeForm.deviationQValue);
|
let q_UpperValue = parseFloat(state.analyzeForm.Q) + parseFloat(state.analyzeForm.deviationQValue);
|
state.deviationForm.QdStart = q_LowerValue; //流量偏差最小值
|
state.deviationForm.QdEnd = q_UpperValue; //流量偏差最大值
|
|
break;
|
case 3:
|
if (state.analyzeForm.H == '') return;
|
state.analyzeForm.H = verifyNumberComma(val);
|
let hLowerValue = parseFloat(state.analyzeForm.H) - parseFloat(state.analyzeForm.deviationHValue);
|
let hUpperValue = parseFloat(state.analyzeForm.H) + parseFloat(state.analyzeForm.deviationHValue);
|
state.deviationForm.HdStart = hLowerValue; //扬程偏差最小值
|
state.deviationForm.HdEnd = hUpperValue; //扬程偏差最大值
|
break;
|
case 4:
|
if (state.analyzeForm.deviationHValue == '') return;
|
state.analyzeForm.deviationHValue = verifyNumberComma(val);
|
let h_LowerValue = parseFloat(state.analyzeForm.H) - parseFloat(state.analyzeForm.deviationHValue);
|
let h_UpperValue = parseFloat(state.analyzeForm.H) + parseFloat(state.analyzeForm.deviationHValue);
|
state.deviationForm.HdStart = h_LowerValue; //扬程偏差最小值
|
state.deviationForm.HdEnd = h_UpperValue; //扬程偏差最大值
|
break;
|
case 5:
|
state.deviationForm.QdStart = verifyNumberComma(val);
|
|
break;
|
case 6:
|
state.deviationForm.QdEnd = verifyNumberComma(val);
|
break;
|
case 7:
|
state.deviationForm.HdStart = verifyNumberComma(val);
|
|
break;
|
case 8:
|
state.deviationForm.HdEnd = verifyNumberComma(val);
|
break;
|
}
|
};
|
//监听流量间隔值
|
const flowIntervalValue = (val) => {
|
// state.analyzeForm.Q = val;
|
var intervalValueFlow = state.queryQHForm.Qspace / 2; //流量间隔值
|
//将流量间隔值实时赋给流量偏差值
|
state.analyzeForm.deviationQValue = intervalValueFlow;
|
var qLowerValue = parseFloat(state.analyzeForm.Q) - parseFloat(state.analyzeForm.deviationQValue);
|
var qUpperValue = parseFloat(state.analyzeForm.Q) + parseFloat(state.analyzeForm.deviationQValue);
|
state.deviationForm.QdStart = qLowerValue; //流量偏差最小值
|
state.deviationForm.QdEnd = qUpperValue; //流量偏差最大值
|
};
|
//监听扬程间隔值
|
const headIntervalValue = (val) => {
|
// state.analyzeForm.Q = val;
|
var intervalValueFlow = state.queryQHForm.Hspace / 2; //扬程间隔值
|
//将扬程间隔值实时赋给扬程偏差值
|
state.analyzeForm.deviationHValue = intervalValueFlow;
|
var hLowerValue = parseFloat(state.analyzeForm.H) - parseFloat(state.analyzeForm.deviationHValue);
|
var hUpperValue = parseFloat(state.analyzeForm.H) + parseFloat(state.analyzeForm.deviationHValue);
|
state.deviationForm.HdStart = hLowerValue; //扬程偏差最小值
|
state.deviationForm.HdEnd = hUpperValue; //扬程偏差最大值
|
};
|
const getTableDetail = async () => {
|
var qLowerValue = state.deviationForm.QdStart; //流量偏差最小值
|
var qUpperValue = state.deviationForm.QdEnd; //流量偏差最大值
|
var hLowerValue = state.deviationForm.HdStart; //扬程偏差最小值
|
var hUpperValue = state.deviationForm.HdEnd; //扬程偏差最大值
|
if (qLowerValue > qUpperValue && hLowerValue > hUpperValue) {
|
return ElMessage.warning('流量、扬程偏差最小值不能大于最大值');
|
} else if (qLowerValue > qUpperValue) {
|
return ElMessage.warning('流量偏差最小值不能大于最大值');
|
} else if (hLowerValue > hUpperValue) {
|
return ElMessage.warning('扬程偏差最小值不能大于最大值');
|
} else {
|
if (qLowerValue == null || qLowerValue == '') return ElMessage.warning('请输入流量');
|
if (qUpperValue == null || qUpperValue == '') return ElMessage.warning('请输入流量');
|
if (hLowerValue == null || hLowerValue == '') return ElMessage.warning('请输入扬程');
|
if (hUpperValue == null || hUpperValue == '') return ElMessage.warning('请输入扬程');
|
await GetRectDetailListOfDayRange({
|
ObjectType: LOGIC_SITE_CODE,
|
ObjectID: currentListID.value,
|
Qmin: qLowerValue,
|
Qmax: qUpperValue,
|
Hmin: hLowerValue,
|
Hmax: hUpperValue,
|
StartDay: state.queryQHForm.themetime[0],
|
EndDay: state.queryQHForm.themetime[1],
|
}).then((res) => {
|
let result = res.Data;
|
if (res.Code != 0) {
|
state.displayTableData = [];
|
return;
|
}
|
if (res.Data == null || res.Data.length == 0) {
|
state.displayTableData = [];
|
return ElMessage.warning('表格暂无数据');
|
}
|
result.forEach((item) => (item.Tsum = (item.Tsum / 60 / 60).toFixed(2)));
|
state.displayTableData = result || [];
|
});
|
}
|
};
|
//#endregion
|
onMounted(() => {
|
let getSevenDate = getdatatime();
|
state.queryQHForm.themetime = getSevenDate;
|
window.addEventListener('resize', selfPipeAdaption);
|
});
|
onActivated(() => {
|
window.addEventListener('resize', selfPipeAdaption);
|
});
|
defineExpose({
|
getChartList,
|
});
|
</script>
|
<style scoped lang="scss">
|
:deep(.el-tabs__content) {
|
width: 100%;
|
height: calc(100% - 50px);
|
}
|
.box_right_title {
|
background: linear-gradient(90deg, #2d81d9, #0655b4);
|
color: #fff;
|
height: 30px;
|
line-height: 30px;
|
text-align: left;
|
border-radius: 7px;
|
padding-left: 10px;
|
display: flex;
|
}
|
.form_m1 {
|
:deep(.el-form-item__label) {
|
color: #ffffff !important;
|
}
|
}
|
.setQHForm {
|
width: 100%;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
padding-top: 10px;
|
}
|
.analyseInput_left {
|
width: 68px;
|
height: 32px;
|
line-height: 32px;
|
// border: 1px solid #cccccc;
|
text-align: center;
|
color: #666;
|
}
|
.analyseInput_right {
|
width: 45px;
|
height: 32px;
|
line-height: 32px;
|
// border: 1px solid #cccccc;
|
text-align: center;
|
color: #666;
|
}
|
.deviationInput {
|
width: 68px;
|
height: 32px;
|
line-height: 32px;
|
// border: 1px solid #cccccc;
|
text-align: center;
|
color: #666;
|
}
|
.formLabel_size {
|
:deep(.el-form-item__label) {
|
font-size: 1rem !important;
|
}
|
:deep(.el-form-item--default) {
|
margin-bottom: 10px !important;
|
line-height: 36px;
|
}
|
}
|
</style>
|
