Merge branch 'master' of http://47.103.154.90:83/r/IStation/shys/Web.Ch.V1.0

wujingjing

2024-07-08 8e5cbdc7562b1d75d900b63d53ae1a9006b07577

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

@@ -1,973 +1,60 @@
运行点分析
<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"
               :currentNodeKey="currentListID"
               @click="handleClickNode"
               :defaultProps="state.defaultProps"
               defaultExpandAll
               :folderIcon="(_, data) => data.LogicType !== LOGIC_SITE_CODE"
            >
            <LeftTreeByMgr :treedata="listTreeData" title-name="泵站列表" :current-node-key="currentListID" @click="handleClickNode">
            </LeftTreeByMgr>
         </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 { computed, nextTick, onMounted, reactive, ref } from 'vue';
import { GetStationList } from '/@/api/dispatch/dispatch';
import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue';
import type { FormRules } from 'vue';
import { ref, onMounted, computed, reactive, shallowRef, onActivated } 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 { 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 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?.ID);
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;
   getDefaultLogicPolicyStd().then(async (data) => {
      if (typeof data !== 'undefined') {
         const res = await GetLogicTreeListByPolicyIDStd({
            PolicyID: data.ID,
         }).finally(() => {
            treeLoading.value = false;
         });

         if (res?.Code === 0) {
            const resData = (res.Data || []) as [];
            listTreeData.value = resData;
            const firstSelectTreeNode = getSite(
               resData,
               { key: 'LogicType', value: LOGIC_SITE_CODE },
               {
                  key: 'LogicID',
                  value: defaultSelectID,
               }
            );
            if (firstSelectTreeNode) {
               handleClickNode(firstSelectTreeNode);
               state.echartTitle = firstSelectTreeNode.Name;
            } else {
               listTreeData.value = [];
            }
         } else {
            ElMessage.error('获取泵站列表失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
         }
   const res = await GetStationList().finally(() => {
      treeLoading.value = false;
   });
   if (res?.Code === 0) {
      const resData = (res.Data || []) as [];
      listTreeData.value = resData;
      const firstListTreeNode = listTreeData.value[0];
      if (firstListTreeNode) {
         handleClickNode(firstListTreeNode);
      } else {
         listTreeData.value = [];
      }
   });
};
//#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 效率
         currentTreeNode.value = null;
      }
   }
   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>
import { GetStationList } from '/@/api/dispatch/dispatch';