fix: 修改运行点分析

yangyin

2024-05-14 ec25c96147d8c5fb840a5d6dd77d049e0605144c

fix: 修改运行点分析

 src/projectCom/curve/runPoint/RunPointAnalysisCom.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,904 @@
<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 () => {
    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 +
                    '小时 &nbsp;&nbsp; æ•ˆçŽ‡: ' +
                    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>

 src/views/project/ch/efficiencyAnalysis/curveAnalysis/RunPointAnalysis.vue

@@ -1,14 +1,14 @@
运行点分析
<template>
    <!-- æ€§èƒ½æ›²çº¿ -->
    <el-row :gutter="8" class="h100">
        <el-col :span="4" :xs="24" class="h100">
            <el-card shadow="hover" class="h100 left-tree-card" v-loading="treeLoading">
                <LeftTreeByMgr
                    :treedata="listTreeData"
                    :showTitle="false"
                    :defaultProps="state.defaultProps"
                    :currentNodeKey="currentListID"
                    @click="handleClickNode"
                    :defaultProps="state.defaultProps"
                    defaultExpandAll
                    :folderIcon="(_, data) => data.LogicType !== LOGIC_SITE_CODE"
                >
@@ -16,274 +16,46 @@
            </el-card>
        </el-col>
        <el-col :span="20" :xs="24" class="flex-column h100">
            <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>
            <RunPointAnalysisCom ref="runPointAnalysisRef" :currentListID="currentListID" :pumpTitle="state.echartTitle" />
        </el-col>
        <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>
    </el-row>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { ElMessage } from 'element-plus';
import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue';
import type { FormRules } from 'vue';
import { ref, onMounted, computed, reactive, shallowRef, onActivated } from 'vue';
import { computed, nextTick, onMounted, reactive, ref } from 'vue';
import { getDefaultLogicPolicyStd } from '/@/api/phm/logicPolicyStd';
import { GetLogicTreeListByPolicyIDStd } from '/@/api/phm/logicTreeStd';
import { getSite } from '/@/projectCom/components/manage/utils';
import { uniqueInArray } from '/@/utils/istation/common.js';
import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue';
import { LOGIC_SITE_CODE } from '/@/constants';
import { GetRectListOfDayRange, GetRectDetailListOfDayRange } from '/@/api/eta/runHeat';
import moment from 'moment';
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)]);
import { getSite } from '/@/projectCom/components/manage/utils';
import RunPointAnalysisCom from '/@/projectCom/curve/runPoint/RunPointAnalysisCom.vue';
// å®šä¹‰å˜é‡å†…容
const state = reactive({
    chartData: [],
    echartTitle: '',
    queryQHForm: {
        Qspace: 100,
        Hspace: 1,
        themetime: '',
    } as any,
    QHForm: {
        showValue: false,
        tOrP: true,
    },
    heatmapDetailShow: false, //打开热力图的详细 ï¼ˆé»˜è®¤å…³é—­ï¼‰
    dialogTitle: '泵组合信息', //详细的名字
    pieData: [], //饼图数据源
    defaultProps: {
        id: 'LogicID',
        label: 'Name',
        children: 'Children',
    }, //树节点
    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();
const runPointAnalysisRef = ref();
//#region ====================== å·¦ä¾§æ ‘数据，tree init ======================
const treeLoading = ref(false);
const listTreeData = ref([]);
const currentTreeNode = ref(null);
const currentListID = computed(() => currentTreeNode.value?.LogicID);
const defaultSelectID = window.moduleConfig.comprehensive.logicSite.defaultSelectID; //默认选中长兴...泵站的ID
const currentListID = computed(() => currentTreeNode.value?.LogicID);
const handleClickNode = (data) => {
    currentTreeNode.value = data;
    if (data.LogicType !== LOGIC_SITE_CODE) {
        m_chartHeatmapBox.value && m_chartHeatmapBox.value.clear();
        return ElMessage.warning('支线不可选!');
    }
    window.moduleConfig.comprehensive.logicSite.defaultSelectID = data.LogicID;
    state.echartTitle = data.Name;
    timeQuery();
    nextTick(() => {
        runPointAnalysisRef.value.getChartList();
    });
};
const getListTreeData = async () => {
    treeLoading.value = true;
@@ -321,653 +93,7 @@
    });
};
//#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 () => {
    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);
        })
        .catch((err) => {
            ElMessage.error('获取图表数据失败' + (err?.Message ? `，${JSON.stringify(err.Message)}` : ''));
        });
};
//  åˆå§‹åŒ–流量扬程图表
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 +
                    '小时 &nbsp;&nbsp; æ•ˆçŽ‡: ' +
                    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;
        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);
            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; //流量偏差最大值

            break;
        case 2:
            if (state.analyzeForm.deviationQValue == '') return;
            state.analyzeForm.deviationQValue = verifyNumberComma(val);
            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; //流量偏差最大值

            break;
        case 3:
            if (state.analyzeForm.H == '') return;
            state.analyzeForm.H = verifyNumberComma(val);
            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; //扬程偏差最大值
            break;
        case 4:
            if (state.analyzeForm.deviationHValue == '') return;
            state.analyzeForm.deviationHValue = verifyNumberComma(val);
            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; //扬程偏差最大值
            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 || [];
            })
            .catch((err) => {
                return ElMessage.error('获取表格列表失败' + (err?.Message ? `，${JSON.stringify(err.Message)}` : ''));
            });
    }
};
//#endregion
onMounted(() => {
    let getSevenDate = getdatatime();
    state.queryQHForm.themetime = getSevenDate;
    setTimeout(() => {
        getListTreeData();
    }, 100);
    window.addEventListener('resize', selfPipeAdaption);
});
onActivated(() => {
    window.addEventListener('resize', selfPipeAdaption);
    getListTreeData();
});
</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>