添加订单支付静态页面

tanghaolin

2025-02-20 7aea7ff13c1b1a12a800d9436799b5698b67702f

 src/components/Chart/MultiSpeedChart.vue

@@ -1,1399 +1,1041 @@
<template>
    <!-- 变速曲线 -->
    <div id="chartBox" style="width: 100%; height: 100%" class="performanceCurveBox" v-loading="state.m_loadingPage">
      <div class="chartBar" v-if="false">
        <div class="multispeed-tools-div">
          <!-- 曲线查询按钮 -->
          <a ref="paramQueryCtrl" v-click-outside="onParamQueryClickOutside" @click="btnClickChartQuery"
            class="diagram multispeed_chart_btn default blue-stripe">
            <i class="iconfont iconsearch" style="font-size: 0.12rem"></i>
            <span style="margin-left: 0.01rem">
              {{ t("detailPage.parameterQuery.TR") }}
            </span>
          </a>
          <!-- 速度列表 -->
          <a ref="multiSpeedCtrl" v-click-outside="onDispMenuClickOutside"
            class="diagram multispeed_chart_btn default blue-stripe">
            <i class="iconfont iconshebeisheshi" style="font-size: 0.12rem"></i>
            <span style="margin-left: 0.01rem">{{
              t("detailPage.speedList.TR")
            }}</span>
          </a>
          <!-- 显示设置 -->
          <a ref="dispMenuCtrl" v-click-outside="onDispMenuClickOutside"
            class="diagram multispeed_chart_btn default blue-stripe">
            <i class="iconfont iconshebeisheshi" style="font-size: 0.12rem"></i>
            <span style="margin-left: 0.01rem">{{
              t("detailPage.displaySettings.TR")
            }}</span>
          </a>
          <!-- 导出图表 -->
          <el-dropdown placement="bottom">
            <a class="diagram multispeed_chart_btn default blue-stripe">
              <i class="iconfont icondaochu1" style="font-size: 0.12rem"></i>
              <span style="margin-left: 0.01rem">{{
                t("detailPage.curveExport.TR")
              }}</span>
            </a>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="btnClickExportChartImage"><i class="iconfont iconshiwutupian"
                    style="font-size: 0.28rem"></i>{{ t("detailPage.picture.TR") }}</el-dropdown-item>
                <el-dropdown-item @click="btnClickExportChartCAD"><i class="iconfont icontubiao_daoruCAD"
                    style="font-size: 0.28rem"></i>CAD</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
  
          <!-- 参数查询显示/隐藏 -->
          <el-popover ref="Param_Query_popoverRef" :virtual-ref="paramQueryCtrl" trigger="click" :show-arrow="false"
            :offset="24" virtual-triggering popper-class="paramQuery_popover_style" :hide-after="0">
            <div class="select_menu" tabindex="1">
              <div class="group_select_menu">
                <ul>
                  <li v-for="(menu_item, menu_index) in state.m_chartDispSettingMenu
                    .chartQueryMenuOptions" :key="menu_index" style="position: relative">
                    <div v-if="menu_item.type == 0" @click="btnClickParamsQuerySetChoiceGrp(menu_item)"
                      class="group_style" :class="state.m_chartDispSettingMenu.chartQueryMenuId ==
                          menu_item.id
                          ? 'label_active'
                          : 'none_active'
                        ">
                      <el-icon>
                        <ArrowRight />
                      </el-icon>
                      <span class="label_name">{{ menu_item.label }}</span>
                    </div>
                    <!-- 判断如果当前为check类型并且按钮为参数查询 -->
                    <template v-if="
                      menu_item.type == 1 &&
                      menu_item.visible &&
                      (menu_item.id == 'paramsQuery1' ||
                        menu_item.id == 'paramsQuery2')
                    ">
                      <el-popover placement="right" width="210" trigger="click" :teleported="false">
                        <div class="popover_cell">
                          <span class="label_name" style="width: 40%">{{ t("detailPage.parameter_s.TR") }}:</span>
                          <el-input size="small" style="width: 60%" v-model="state.m_currentParamsQueryValue"
                            @focus="focusInput(menu_item)"></el-input>
                        </div>
                        <div style="
                            text-align: right;
                            margin: 0;
                            display: flex;
                            justify-content: flex-end;
                          ">
                          <el-button style="min-width: 56px; min-height: 28px" type="primary" size="small"
                            @click="changeChartQueryValue(menu_item)">{{
                              t("detailPage.parameterDetermine.TR")
                            }}</el-button>
                        </div>
                        <template #reference>
                          <div class="group_style" :class="'none_active'" @click="clickMenuLabel(menu_item)">
                            <i class="icon-size"></i>
                            <span class="label_name">{{ menu_item.label }}</span>
                          </div>
                        </template>
                      </el-popover>
                    </template>
                    <!-- 判断当前是check类型菜单 -->
                    <div v-else-if="menu_item.type == 1 && menu_item.visible"
                      @click="btnClickParamsQuerySetCheck(menu_item)" class="group_style setting-menu-title"
                      :class="menu_item.value ? 'label_active' : 'none_active'">
                      <i class="icon-size iconfont" :class="menu_item.value == 1 ? 'iconselect_icon' : ''"></i>
                      <span class="label_name">{{ menu_item.label }}</span>
                    </div>
                    <ul class="chart_disp_menu_style" v-show="state.m_chartDispSettingMenu.chartQueryMenuId ==
                      menu_item.id && menu_item.type == 0
                      ">
                      <li v-for="(
                          choice_item, choice_index
                        ) in menu_item.choiceList" @click="
                          btnClickParamsQuerySetChoiceMenu(menu_item, choice_item)
                          " style="position: relative" :key="choice_index" class="node_style" :class="menu_item.choiceValue == choice_item.value
                            ? 'label_active'
                            : 'none_active'
                          ">
                        <div v-if="choice_item.type == 'text'" style="cursor: pointer">
                          <span class="label_name">{{ choice_item.label }}</span>
                          <i style="position: absolute; left: 0.32rem; top: 0.1rem" :class="menu_item.choiceValue == choice_item.value
                              ? 'iconfont iconselect_icon'
                              : ''
                            ">
                          </i>
                        </div>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </el-popover>
  
          <!-- 显示速度列表 -->
          <el-popover ref="SPEED_popoverRef" :virtual-ref="multiSpeedCtrl" trigger="click" :show-arrow="false"
            :offset="24" virtual-triggering popper-class="SPEED_popover_style" :hide-after="0">
            <div class="mulit-chart-select_menu" tabindex="1">
              <div class="group_select_menu">
                <ul>
                  <li v-for="(menu_item, menu_index) in state.m_speedValueMenu.list" :key="menu_index">
                    <div class="group_style">
                      <span class="speed_input_style">{{
                        menu_item.type == 2 ? "★" : ""
                      }}</span>
                      <span class="speed_input_style">{{
                        menu_item.value.toFixed(1)
                      }}</span>
                      <span>{{ menu_item.unit }}</span>
                      <el-color-picker @change="
                        changeSpeedColorValue(menu_item.color, menu_index)
                        " size="small" v-model="menu_item.color" :teleported="false"></el-color-picker>
                      <span class="deleted_style">
                        <i class="iconfont iconguanbi" @click="detelCurrentSpeedItem(menu_index)"></i>
                      </span>
                    </div>
                  </li>
                  <el-popover placement="right" @show="popoverShow" @hide="popoverHide" v-model="state.addDialogVisible"
                    width="220px" trigger="click" :teleported="false">
                    <div class="transfer_type" style="margin-bottom: 7px">
                      <el-radio v-model="state.m_currentAddType" label="1">{{
                        t("selectPage.speed.TR")
                      }}</el-radio>
                      <el-radio v-model="state.m_currentAddType" label="2">{{
                        t("ebookPage.motorFrequency.TR")
                      }}</el-radio>
                    </div>
                    <!-- 添加转速 -->
                    <template v-if="state.m_currentAddType == '1'">
                      <el-input :placeholder="t('detailPage.pleaseEnterSpeed.TR')" v-model="state.addSpeedValue"
                        clearable></el-input>
                    </template>
                    <!-- 添加频率 -->
                    <template v-if="state.m_currentAddType == '2'">
                      <el-input :placeholder="t('detailPage.pleaseEnterHz.TR')" v-model="state.addHzValue"
                        clearable></el-input>
                    </template>
                    <div style="text-align: right; margin-top: 7px">
                      <!-- <el-button size="small" type="primary" @click="state.addDialogVisible = false">{{
                        t("detailPage.cancel.TR")
                      }}</el-button> -->
                      <el-button type="primary" style="padding: 7px 10px" size="small" @click="clickBtnAddSpeed">{{
                        t("detailPage.define.TR") }}</el-button>
                    </div>
                    <template #reference>
                      <li>
                        <div class="group_style" :class="state.addSpeedIsActive ? 'add_speed_active' : ''
                          ">
                          <span class="label_name" style="text-align: center">{{
                            t("detailPage.addPinLv.TR")
                          }}</span>
                          <i class="iconfont iconright" style="position: absolute; right: 10px"></i>
                        </div>
                      </li>
                    </template>
                  </el-popover>
                </ul>
              </div>
            </div>
          </el-popover>
  
          <!-- 显示设置菜单 -->
          <el-popover ref="DispMenu_popoverRef" :virtual-ref="dispMenuCtrl" trigger="click" :show-arrow="false"
            :offset="24" virtual-triggering popper-class="multispeed_popover_style" :hide-after="0">
            <div class="mulit-chart-select_menu" tabindex="1">
              <div class="group_select_menu">
                <ul class="setting-menu">
                  <li v-for="(menu_item, menu_index) in state.m_chartDispSettingMenu
                    .options" :key="menu_index" style="position: relative" class="setting-menu-item">
                    <!-- 含有组 -->
                    <div v-if="menu_item.type == 0" :id="`group_${menu_item.id}`"
                      @click="btnClickChartDispSetChoiceGrp(menu_item)" class="group_style setting-menu-title" :class="state.m_chartDispSettingMenu.acitveMenuId == menu_item.id
                          ? 'label_active'
                          : 'none_active'
                        ">
                      <span class="label_name">{{ menu_item.label }}</span>
                      <el-icon>
                        <ArrowRight />
                      </el-icon>
                    </div>
                    <!-- 不含有组 -->
                    <div v-else-if="menu_item.type == 1" @click="btnClickChartDispSetCheck(menu_item)" class="group_style"
                      :class="menu_item.value ? 'label_active' : 'none_active'">
                      <span class="label_name">{{ menu_item.label }}</span>
                      <i class="icon-size iconfont" :class="menu_item.value == 1 ? 'iconselect_icon' : ''"></i>
                    </div>
  
                    <div class="choice_item_div_style">
                      <ul class="chart_disp_menu_style setting-menu" v-show="state.m_chartDispSettingMenu.acitveMenuId ==
                        menu_item.id && menu_item.type == 0
                        ">
                        <li v-for="(
                            choice_item, choice_index
                          ) in menu_item.choiceList" style="position: relative" :key="choice_index"
                          class="setting-menu-item node_style">
                          <div @click.stop="
                            btnClickChartDispSetChoiceMenu(
                              menu_item,
                              choice_item
                            )
                            " v-if="choice_item.type == 'text'" style="cursor: pointer"
                            class="group_style setting-menu-title" :class="menu_item.choiceValue == choice_item.value
                                ? 'label_active'
                                : 'none_active'
                              ">
                            <i class="icon-size iconfont" :class="menu_item.choiceValue == choice_item.value
                                ? 'iconselect_icon'
                                : ''
                              ">
                            </i>
                            <span class="label_name">{{
                              choice_item.label
                            }}</span>
                          </div>
                          <div v-if="choice_item.type == 'input'" style="
                              display: flex;
                              padding: 0px 10px;
                              box-sizing: border-box;
                            " class="setting-menu-title">
                            <i class="icon-size"></i>
                            <span class="label_name" style="width: 60%">{{
                              choice_item.label
                            }}</span>
                            <el-input size="small" @change="changeChoiceValue(choice_item)" style="min-width: 50px"
                              v-model="choice_item.value"></el-input>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </el-popover>
        </div>
      </div>
      <!-- 曲线导出弹框 -->
      <el-dialog :title="t('detailPage.tip.TR')" :modal="false" top="1vh" v-model="state.exportChartDialogVisible"
        width="30%">
        <div class="dialog_title_style">{{ t("detailPage.tip.TR") }}</div>
        <div class="dialog_content_style">
          {{ t("detailPage.downloadTips.TR") }}
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="state.exportChartDialogVisible = false">{{
              t("detailPage.cancel.TR")
            }}</el-button>
            <el-button type="primary" @click="downClientFile">{{
              t("detailPage.download.TR")
            }}</el-button>
          </span>
        </template>
      </el-dialog>
  
      <!-- 图表区域 -->
      <div style="overflow: hidden; width: 100%; height: calc(100% - 0.36rem)">
        <div class="tubiao">
          <div style="width: 100%; height: calc(100% - 0.1rem)" id="multiSpeedDiagramChart" ref="MultiSpeedChartSVG">
          </div>
        </div>
      </div>
      <div v-if="state.isFullScreen" style="
          position: fixed;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          background: #fff;
          z-index: 9999;
        ">
        <div style="height: 0.4rem; line-height: 0.4rem; text-align: left">
          <a class="diagram multispeed_chart_btn default blue-stripe" style="margin-left: 0.05rem">
            <i class="iconfont iconfullscreen" style="font-size: 0.12rem"></i>
            <span @click="exitFullScreen" style="margin-left: 0.01rem">
              {{ t("detailPage.exitFull.TR") }}
            </span>
          </a>
        </div>
        <div style="width: 100%; height: calc(100% - 0.4rem)" id="ChartFullScreen"></div>
      </div>
    </div>
  </template>
  
  <script setup name="multiSpeedChart">
  import { reactive, onMounted, nextTick, ref, unref } from "vue";
  import {
    ElMessage,
    ElPopover,
    ElInput,
    ElButton,
    ElDialog,
    ElColorPicker,
    ClickOutside as vClickOutside,
  } from "element-plus";
  import MultiSpeedChartDiagram from "@/components//MultiSpeedChartDiagram.js";
  import UtilsHelper from "@/utils/utils";
  import ConstParas from "@/utils/constParas.js";
  import html2canvas from "html2canvas"; //div内容转图片
   <!-- 变速曲线 -->
   <div id="chartBox" style="width: 100%; height: 100%" class="performanceCurveBox" v-loading="state.m_loadingPage">
      <!-- 图表区域 -->
      <div style="overflow: hidden; width: 100%; height: calc(100% - 0.36rem)">
         <div class="tubiao">
            <div style="width: 100%; height: calc(100% - 0.1rem)" id="multiSpeedDiagramChart" ref="MultiSpeedChartSVG"></div>
         </div>
      </div>
   </div>
</template>

<script setup name="multiSpeedChart">
import { reactive, onMounted, nextTick, ref, unref } from 'vue';
import { ElMessage, ElPopover, ElInput, ElButton, ElDialog, ElColorPicker, ClickOutside as vClickOutside } from 'element-plus';
import MultiSpeedChartDiagram from '@/components/Chart/js/MultiSpeedChartDiagram.js';
import UtilsHelper from '@/utils/utils';
import ConstParas from '@/utils/constParas.js';
// import html2canvas from 'html2canvas'; //div内容转图片
//   import waterMarkHelper from "/@/utils/waterMarkHelper";
//   import axiosHelper from "/@/utils/axiosHelper.js";
//   import { useLogin } from "/@/store/login.js";
  import { useRoute, useRouter } from "vue-router";
import { useRoute, useRouter } from 'vue-router';
//   import { useI18n } from "vue-i18n";
//   import { chartConfigStore } from "/@/store/chartConfig.js";
//   import { CheckDownChartFile } from '/@/api/checkDown/index.js'
  const { t } = useI18n();
// const { t } = useI18n();
//   const chartConfig = chartConfigStore();
//   const userStore = useLogin();
//   const userInfo = userStore.getUserInfo();
  const MultiSpeedChartSVG = ref();
  
  const paramQueryCtrl = ref();
  const Param_Query_popoverRef = ref();
  
  const multiSpeedCtrl = ref();
  const SPEED_popoverRef = ref();
  
  const dispMenuCtrl = ref();
  const DispMenu_popoverRef = ref();
  const route = useRoute();
  const router = useRouter();
  const emit = defineEmits([
    "cbChangeChartQueryData",
    "cbSetDispMSChartQueryData",
  ]);
  let state = reactive({
    m_chartDiagram: null, //图表对象
    m_pumpName: "",
    m_seriesID: 0,
    m_pumpID: 0,
    isFullScreen: false, //是否全屏
    chartBoxHiehgt: 0, //图表盒子高度
  
    exportChartDialogVisible: false, //曲线导出对话框显隐
    addSpeedValue: "", //添加新的转速的值
    addHzValue: "50", //添加新的频率的值
    m_currentAddType: "2", //当前添加的值的类型 默认2 1是转速、2是频率
  
    addDialogVisible: false, //添加弹框显隐状态
    m_speedValueMenu: {
      isVisibleCombox: false, //下拉菜单的显示隐藏
      list: [],
    },
    addSpeedIsActive: false, //添加转速样式
    coordinateBoxVisible: false, //设置坐标对话框的显/隐
    m_designPointParas: null,
    m_chartDispSettingMenu: {
      isShowQueryChartBtn: false, //是否显示图标上的查询按钮
      isVisibleCombox: false, //下拉菜单的显示隐藏
      acitveMenuId: "",
      chartQueryMenuId: null,
      options: [
        {
          id: "xianshi",
          label: "图表颜色",
          type: 1, //没有子菜单
          choiceValue: 0,
          choiceList: [
            {
              label: "单色",
              value: 1,
            },
            {
              label: "彩色",
              value: 0,
            },
          ],
        },
      ],
      chartQueryMenuOptions: [],
    },
    m_loadingPage:false
  });
  onMounted(() => {
    nextTick(() => {
      refreshWindowSize();
    });
    // window.addEventListener(
    //   "resize",
    //   () => {
    //     return (() => {
    //       refreshWindowSize();
    //     })();
    //   },
    //   false
    // );
  });
  //修改窗体尺寸
  const refreshWindowSize = () => {
    let totalHeight = 0;
    let headerHeight = 0;
    let footerHeight = 0;
    if (document.querySelector(".page-head-style")) {
      headerHeight = document.querySelector(".page-head-style").clientHeight;
const MultiSpeedChartSVG = ref();

const paramQueryCtrl = ref();
const Param_Query_popoverRef = ref();

const multiSpeedCtrl = ref();
const SPEED_popoverRef = ref();

const dispMenuCtrl = ref();
const DispMenu_popoverRef = ref();
const route = useRoute();
const router = useRouter();
const emit = defineEmits(['cbChangeChartQueryData', 'cbSetDispMSChartQueryData']);
let state = reactive({
   m_chartDiagram: null, //图表对象
   m_pumpName: '',
   m_seriesID: 0,
   m_pumpID: 0,
   isFullScreen: false, //是否全屏
   chartBoxHiehgt: 0, //图表盒子高度

   exportChartDialogVisible: false, //曲线导出对话框显隐
   addSpeedValue: '', //添加新的转速的值
   addHzValue: '50', //添加新的频率的值
   m_currentAddType: '2', //当前添加的值的类型 默认2 1是转速、2是频率

   addDialogVisible: false, //添加弹框显隐状态
   m_speedValueMenu: {
      isVisibleCombox: false, //下拉菜单的显示隐藏
      list: [],
   },
   addSpeedIsActive: false, //添加转速样式
   coordinateBoxVisible: false, //设置坐标对话框的显/隐
   m_designPointParas: null,
   m_chartDispSettingMenu: {
      isShowQueryChartBtn: false, //是否显示图标上的查询按钮
      isVisibleCombox: false, //下拉菜单的显示隐藏
      acitveMenuId: '',
      chartQueryMenuId: null,
      options: [
         {
            id: 'xianshi',
            label: '图表颜色',
            type: 1, //没有子菜单
            choiceValue: 0,
            choiceList: [
               {
                  label: '单色',
                  value: 1,
               },
               {
                  label: '彩色',
                  value: 0,
               },
            ],
         },
      ],
      chartQueryMenuOptions: [],
   },
   m_loadingPage: false,
});
onMounted(() => {
   nextTick(() => {
      refreshWindowSize();
   });
   // window.addEventListener(
   //   "resize",
   //   () => {
   //     return (() => {
   //       refreshWindowSize();
   //     })();
   //   },
   //   false
   // );
});
//修改窗体尺寸
const refreshWindowSize = () => {
   let totalHeight = 0;
   let headerHeight = 0;
   let footerHeight = 0;
   if (document.querySelector('.page-head-style')) {
      headerHeight = document.querySelector('.page-head-style').clientHeight;
   }
   if (document.querySelector('#app footer')) {
      footerHeight = document.querySelector('#app footer').clientHeight;
   }
   totalHeight = document.body.clientHeight - headerHeight - footerHeight;

   let el_dom = document.getElementById('multiSpeedDiagramChart');
   let parentDom = el_dom.parentElement;
   if (parentDom) {
      totalHeight = parentDom.clientHeight;
   }
   state.chartBoxHiehgt = totalHeight;
   if (state.m_chartDiagram) {
      var diagramContentWidth = parentDom.clientWidth;
      var diagramContentHiehgt = parentDom.clientHeight;

      state.m_chartDiagram.Resize(diagramContentWidth, diagramContentHiehgt);
   }
};
//导出曲线图
const btnClickExportChartImage = async () => {
   state.m_loadingPage = true;
   let checkStatus = await checkDownChartFile('PNG');
   state.m_loadingPage = false;
   if (!checkStatus) return;
   html2canvas(MultiSpeedChartSVG.value, { backgroundColor: '#fff' }).then((canvas) => {
      let file = canvas.toDataURL('image/png');
      waterMarkHelper.addImage(file, null, (base64Url) => {
         downChartImageFile(base64Url);
      });
   });
};
//点击"参数查询"菜单 type=0(带子菜单的)
const btnClickParamsQuerySetChoiceGrp = (menuItem) => {
   if (state.m_chartDispSettingMenu.chartQueryMenuId == menuItem.id) {
      state.m_chartDispSettingMenu.chartQueryMenuId = null;
   } else {
      state.m_chartDispSettingMenu.chartQueryMenuId = menuItem.id;
   }
};
//点击"参数查询"菜单 type=1(checkbox)
const btnClickParamsQuerySetCheck = (menuItem) => {
   state.m_chartDispSettingMenu.chartQueryMenuId = menuItem.id;
   menuItem.value = menuItem.value == 0 ? 1 : 0;
   let dispMSChartQueryData = menuItem.value == 1 ? true : false;
   // 当前点击的是查询
   if (menuItem.id == 'chaxunquxian') {
      if (menuItem.value == 1) {
         state.m_chartDiagram.setQueryIndicatVertLineVisible(true, 1);
      } else {
         state.m_chartDiagram.setQueryIndicatVertLineVisible(false, 1);
      }
      emit('cbSetDispMSChartQueryData', dispMSChartQueryData);
   }
};
//导出曲线图CAD
const btnClickExportChartCAD = async () => {
   state.m_loadingPage = true;
   let checkStatus = await checkDownChartFile('CAD');
   state.m_loadingPage = false;
   if (!checkStatus) return;

   var simuSpeedCurves = state.m_chartDiagram.getSpeedCurveList();
   var list_speed = [];
   simuSpeedCurves.forEach((element) => {
      list_speed.push(element.speed);
   });
   if (list_speed.length <= 1) {
      ElMessage.warning('至少两条曲线才能导出');
      return;
   }
   let requestData = {
      SeriesID: state.m_seriesID,
      PumpID: state.m_pumpID,
      Speeds: list_speed,
   };
   if (state.m_designPointParas != null) {
      //requestData.DesignPoint = state.m_designPointParas;
   }
   axiosHelper
      .post({
         version: 3,
         controller: 'PumpChart',
         action: 'CreateMultiSpeedChartCad',
         data: requestData,
         apiUrlType: 'main',
         isAddUrlSoftType: 'true',
      })
      .then((res) => {
         let result = res.data;
         if (result.Code != 0) {
            ElMessage.error(result.Message);
            return;
         }
         let filePath = window.globalConfig.WebApiUrl.FileUrl + 'temp/selectReport/' + result.Data;
         // let filePath = window.globalConfig.WebApiUrl.MainUrl + "temp/selectReport/" + result.Data;
         UtilsHelper.downloadFile(filePath, UtilsHelper.extractFileExtension(filePath));
      })
      .catch((err) => {});
};
// 检查导出曲线的权限
const checkDownChartFile = (fileSuffixType) => {
   let FileSuffix = {
      PNG: 4,
      CAD: 3,
      PDF: 0,
   };
   let isLogin = checkLogin();
   if (!isLogin) return false;
   let requestData = {
      SeriesID: state.m_seriesID,
      ProductID: state.m_pumpID,
      FileType: 1,
      FileSuffixType: FileSuffix[fileSuffixType],
   };
   return new Promise((resolve, reject) => {
      CheckDownChartFile(requestData)
         .then((res) => {
            let result = res.data;
            if (result.Code != 0) {
               ElMessage.error(result.Message);
               resolve(false);
            }
            resolve(true);
         })
         .catch((err) => {
            reject(err);
         });
   });
};

const downChartImageFile = (filePath) => {
   let link = document.createElement('a');
   link.href = filePath; //下载链接
   link.setAttribute('download', `${state.m_pumpName}-变速曲线.png`);
   link.style.display = 'none'; //a标签隐藏
   document.body.appendChild(link);
   link.click();
   setTimeout(() => {
      link.remove();
   }, 500);
};
//转速添加
const clickBtnAddSpeed = () => {
   state.addDialogVisible = false;
   let type = state.m_currentAddType;
   if (type == '1') {
      let color = state.m_chartDiagram.AddSpeedCurve(state.addSpeedValue);
      if (color == null) return;
      state.addSpeedValue = '';
   }
   if (type == '2') {
      let color = state.m_chartDiagram.AddHzCurve(state.addHzValue);
      if (color == null) return;
      state.addHzValue = '';
   }
};
//监听设置的转速曲线的颜色值
const changeSpeedColorValue = (value, index) => {
   // console.log(value, index, 747);
   if (state.m_chartDiagram == null) return;
   //console.log(curve, 602);
   let id = state.m_speedValueMenu.list[index].id;
   state.m_chartDiagram.editColorById(id, value);
};
//删除当前列表节点
const detelCurrentSpeedItem = (index) => {
   let id = state.m_speedValueMenu.list[index].id;
   state.m_speedValueMenu.list.splice(index, 1);
   //console.log(id, 434);
   state.m_chartDiagram.deleteCurveById(id);
};
//获取修改的转速值 在失去焦点或者按enter键的时候 执行该代码
const changeEditSpeedValue = (index) => {
   // 待修改--------
   var speed = state.m_speedValueMenu.list[index].value;
   //------------
   speed = parseInt(speed);
   let id = state.m_speedValueMenu.list[index].id;
   if (speed < 10) return;
   var list = state.m_speedValueMenu.list;
   list[index].value = speed;
   state.m_speedValueMenu.list = list;
   state.m_chartDiagram.editSpeedById(id, speed);
};
//下载客户端
const downClientFile = () => {
   state.exportChartDialogVisible = false;
   let filePath = window.pageConfig.IndexPage.DanjiUrl;
   if ((filePath = '')) {
      return;
   }
   window.open(filePath, '_blank');
};
// 初始化获取泵的数据
const initPumpInfoData = (langType, pumpInfoData, size) => {
   if (pumpInfoData == null) return;
   if (pumpInfoData.BaseInfo.PumpStyle != ConstParas.PumpStyle.LXP) {
      return;
   }
   state.m_pumpName = pumpInfoData.BaseInfo.PumpName;
   state.m_seriesID = pumpInfoData.BaseInfo.SeriesID;
   state.m_pumpID = pumpInfoData.BaseInfo.PumpID;

   initChart(langType, pumpInfoData, size);
};
//点击"图表查询"
const btnClickChartQuery = () => {
   //查询线的显/隐
};
//点击"图表设置"菜单 type=0(带子菜单的)
const btnClickChartDispSetChoiceGrp = (menuItem) => {
   state.m_chartDispSettingMenu.acitveMenuId = menuItem.id;
};
//点击"图表设置"菜单 type=1(checkbox)
const btnClickChartDispSetCheck = (menuItem) => {
   menuItem.value = menuItem.value == 0 ? 1 : 0;
   state.m_chartDispSettingMenu.isVisibleCombox = false;
   //点击“标注频率”
   if (menuItem.id == 'dispPinLv') {
      let dispPinlv = menuItem.value == 0 ? false : true;
      state.m_chartDiagram.setCurveLabelDispHz(dispPinlv);
   }
   //点击“标注转速”
   if (menuItem.id == 'dispSpeed') {
      let dispSpeed = menuItem.value == 0 ? false : true;
      state.m_chartDiagram.setCurveLabelDispSpeed(dispSpeed);
   }
};
//点击"图表设置"的 子菜单
const btnClickChartDispSetChoiceMenu = (menuItem, choiceItem) => {};
//初始化
const initChart = (langType, pumpInfoData, size) => {
   //console.log(pumpInfoData, 404);
   if (pumpInfoData == null) {
      return;
   }

    const el = document.getElementById('multiSpeedDiagramChart');
    while (el.firstChild) {
        el.removeChild(el.firstChild);
    }
    if (document.querySelector("#app footer")) {
      footerHeight = document.querySelector("#app footer").clientHeight;
    }
    totalHeight = document.body.clientHeight - headerHeight - footerHeight;
  
    let el_dom = document.getElementById("multiSpeedDiagramChart");
    let parentDom = el_dom.parentElement;
    if (parentDom) {
      totalHeight = parentDom.clientHeight;
    }
    state.chartBoxHiehgt = totalHeight;
    if (state.m_chartDiagram) {
      var diagramContentWidth = parentDom.clientWidth;
      var diagramContentHiehgt = parentDom.clientHeight;
  
      state.m_chartDiagram.Resize(diagramContentWidth, diagramContentHiehgt);
    }
  };
  //导出曲线图
  const btnClickExportChartImage =async () => {
    state.m_loadingPage = true;
    let checkStatus = await checkDownChartFile('PNG')
    state.m_loadingPage = false;
    if (!checkStatus) return;
    html2canvas(MultiSpeedChartSVG.value, { backgroundColor: "#fff" }).then(
      (canvas) => {
        let file = canvas.toDataURL("image/png");
        waterMarkHelper.addImage(file, null, (base64Url) => {
          downChartImageFile(base64Url);
        });
      }
    );
  };
  //点击"参数查询"菜单 type=0(带子菜单的)
  const btnClickParamsQuerySetChoiceGrp = (menuItem) => {
    if (state.m_chartDispSettingMenu.chartQueryMenuId == menuItem.id) {
      state.m_chartDispSettingMenu.chartQueryMenuId = null;
    } else {
      state.m_chartDispSettingMenu.chartQueryMenuId = menuItem.id;
    }
  };
  //点击"参数查询"菜单 type=1(checkbox)
  const btnClickParamsQuerySetCheck = (menuItem) => {
    state.m_chartDispSettingMenu.chartQueryMenuId = menuItem.id;
    menuItem.value = menuItem.value == 0 ? 1 : 0;
    let dispMSChartQueryData = menuItem.value == 1 ? true : false;
    // 当前点击的是查询
    if (menuItem.id == "chaxunquxian") {
      if (menuItem.value == 1) {
        state.m_chartDiagram.setQueryIndicatVertLineVisible(true, 1);
      } else {
        state.m_chartDiagram.setQueryIndicatVertLineVisible(false, 1);
      }
      emit("cbSetDispMSChartQueryData", dispMSChartQueryData);
    }
  };
  //导出曲线图CAD
  const btnClickExportChartCAD = async () => {
    state.m_loadingPage = true;
    let checkStatus = await checkDownChartFile('CAD')
    state.m_loadingPage = false;
    if (!checkStatus) return;
  
    var simuSpeedCurves = state.m_chartDiagram.getSpeedCurveList();
    var list_speed = [];
    simuSpeedCurves.forEach((element) => {
      list_speed.push(element.speed);
    });
    if (list_speed.length <= 1) {
      ElMessage.warning("至少两条曲线才能导出");
      return;
    }
    let requestData = {
      SeriesID: state.m_seriesID,
      PumpID: state.m_pumpID,
      Speeds: list_speed,
    };
    if (state.m_designPointParas != null) {
      //requestData.DesignPoint = state.m_designPointParas;
    }
    axiosHelper
      .post({
        version: 3,
        controller: "PumpChart",
        action: "CreateMultiSpeedChartCad",
        data: requestData,
        apiUrlType: "main",
        isAddUrlSoftType: "true",
      })
      .then((res) => {
        let result = res.data;
        if (result.Code != 0) {
          ElMessage.error(result.Message);
          return;

   var chart_diagram = new MultiSpeedChartDiagram();
   //设置语言
   chart_diagram.setLocalizationType(0);
   //设置容器
   chart_diagram.setContainerDiv(
      'multiSpeedDiagramChart', //Div名称
      1200,
      750 - 30
   );
   //设置提示框Name
   chart_diagram.setToolTipName('featCurveTip');
   //查询
   chart_diagram.setChangeQueryDataCb(function (data) {
      //  console.log("setChangeQueryDataCb",data);
      //_this.$emit("cbChangeChartQueryData", data); //回调父窗体事件
   });
   //修改了速度列表
   chart_diagram.setChangeSpeedListCb(function (list) {
      // console.log("setChangeSpeedListCb", list);
      var speedList = [];
      list.forEach((v) => {
         speedList.push({
            id: v.id,
            value: v.speed,
            text: v.speed + ' rpm',
            color: v.color,
            unit: 'rpm',
         });
      });
      state.m_speedValueMenu.list = speedList;
   });
   //全局配置
   var chartStyle = {
      IsMonoColor: false,
      IsDispSpectrum: true,
      IsOnlyDispWrkCurve: false,
      ColorH: '#6396C2',
      ColorE: '#a90d41',
      ColorP: '#e20df2',
      ColorNPSH: '#8e870e',
      ColorEquipment: '#013317',
      ColorEqualParaCurvesE: '#402db7',
      ColorCurveLabel: '#28004D',
   };

   /*_this.m_chartDispSettingMenu.options[0].choiceValue =
        chartStyle.IsMonoColor;
      _this.m_chartDispSettingMenu.options[1].choiceValue =
        chartStyle.IsDispSpectrum;
      _this.m_chartDispSettingMenu.options[2].value =
        chartStyle.IsOnlyDispWrkCurve;

      //上次配置
      let chartConfig = _this.$store.state.instante.chartConfig;

      if (chartConfig) {
        if (chartConfig.IsMonorColor != null) {
          chartStyle.IsMonoColor = chartConfig.IsMonorColor == 1 ? true : false;

          _this.m_chartDispSettingMenu.options[0].choiceValue =
            chartConfig.IsMonorColor;
        }
        let filePath =
          window.globalConfig.WebApiUrl.FileUrl +
          "temp/selectReport/" +
          result.Data;
        // let filePath = window.globalConfig.WebApiUrl.MainUrl + "temp/selectReport/" + result.Data;
        UtilsHelper.downloadFile(
          filePath,
          UtilsHelper.extractFileExtension(filePath)
        );
      })
      .catch((err) => {
      });
  };
  // 检查导出曲线的权限
  const checkDownChartFile = (fileSuffixType) => {
    let FileSuffix = {
      PNG: 4,
      CAD: 3,
      PDF: 0
    }
    let isLogin = checkLogin();
    if (!isLogin) return false
    let requestData = {
      SeriesID: state.m_seriesID,
      ProductID: state.m_pumpID,
      FileType: 1,
      FileSuffixType: FileSuffix[fileSuffixType]
    };
    return new Promise((resolve, reject) => {
      CheckDownChartFile(requestData).then((res) => {
        let result = res.data;
        if (result.Code != 0) {
          ElMessage.error(result.Message);
          resolve(false);

        if (chartConfig.IsDispSpectrum != null) {
          chartStyle.IsDispSpectrum =
            chartConfig.IsDispSpectrum == 1 ? true : false;

          _this.m_chartDispSettingMenu.options[1].choiceValue =
            chartConfig.IsDispSpectrum;
        }
        resolve(true);
      })
        .catch((err) => {
          reject(err)
    
        });
    })
  };
  
  const downChartImageFile = (filePath) => {
    let link = document.createElement("a");
    link.href = filePath; //下载链接
    link.setAttribute(
      "download",
      `${state.m_pumpName}-${t("detailPage.performanceCurve.TR")}.png`
    );
    link.style.display = "none"; //a标签隐藏
    document.body.appendChild(link);
    link.click();
    setTimeout(() => {
      link.remove();
    }, 500);
  }
  //转速添加
  const clickBtnAddSpeed = () => {
    state.addDialogVisible = false;
    let type = state.m_currentAddType;
    if (type == "1") {
      var color = state.m_chartDiagram.AddSpeedCurve(state.addSpeedValue);
      if (color == null) return;
      state.addSpeedValue = "";
    }
    if (type == "2") {
      var color = state.m_chartDiagram.AddHzCurve(state.addHzValue);
      if (color == null) return;
      state.addHzValue = "";
    }
  };
  //监听设置的转速曲线的颜色值
  const changeSpeedColorValue = (value, index) => {
    // console.log(value, index, 747);
    if (state.m_chartDiagram == null) return;
    //console.log(curve, 602);
    let id = state.m_speedValueMenu.list[index].id;
    state.m_chartDiagram.editColorById(id, value);
  };
  //删除当前列表节点
  const detelCurrentSpeedItem = (index) => {
    let id = state.m_speedValueMenu.list[index].id;
    state.m_speedValueMenu.list.splice(index, 1);
    //console.log(id, 434);
    state.m_chartDiagram.deleteCurveById(id);
  };
  //获取修改的转速值 在失去焦点或者按enter键的时候 执行该代码
  const changeEditSpeedValue = (index) => {
    // 待修改--------
    var speed = state.m_speedValueMenu.list[index].value;
    //------------
    speed = parseInt(speed);
    let id = state.m_speedValueMenu.list[index].id;
    if (speed < 10) return;
    var list = state.m_speedValueMenu.list;
    list[index].value = speed;
    state.m_speedValueMenu.list = list;
    state.m_chartDiagram.editSpeedById(id, speed);
  };
  //下载客户端
  const downClientFile = () => {
    state.exportChartDialogVisible = false;
    let filePath = window.pageConfig.IndexPage.DanjiUrl;
    if ((filePath = "")) {
      return;
    }
    window.open(filePath, "_blank");
  };
  // 初始化获取泵的数据
  const initPumpInfoData = (langType, pumpInfoData, size) => {
    if (pumpInfoData == null) return;
    if (pumpInfoData.BaseInfo.PumpStyle != ConstParas.PumpStyle.LXP) {
      return;
    }
    state.m_pumpName = pumpInfoData.BaseInfo.PumpName;
    state.m_seriesID = pumpInfoData.BaseInfo.SeriesID;
    state.m_pumpID = pumpInfoData.BaseInfo.PumpID;
  
    initChart(langType, pumpInfoData, size);
  };
  //点击"图表查询"
  const btnClickChartQuery = () => {
    //查询线的显/隐
  };
  //点击"图表设置"菜单 type=0(带子菜单的)
  const btnClickChartDispSetChoiceGrp = (menuItem) => {
    state.m_chartDispSettingMenu.acitveMenuId = menuItem.id;
  };
  //点击"图表设置"菜单 type=1(checkbox)
  const btnClickChartDispSetCheck = (menuItem) => {
    menuItem.value = menuItem.value == 0 ? 1 : 0;
    state.m_chartDispSettingMenu.isVisibleCombox = false;
    //点击“标注频率”
    if (menuItem.id == "dispPinLv") {
      let dispPinlv = menuItem.value == 0 ? false : true;
      state.m_chartDiagram.setCurveLabelDispHz(dispPinlv);
    }
    //点击“标注转速”
    if (menuItem.id == "dispSpeed") {
      let dispSpeed = menuItem.value == 0 ? false : true;
      state.m_chartDiagram.setCurveLabelDispSpeed(dispSpeed);
    }
  };
  //点击"图表设置"的 子菜单
  const btnClickChartDispSetChoiceMenu = (menuItem, choiceItem) => { };
  //初始化
  const initChart = (langType, pumpInfoData, size) => {
    if (pumpInfoData == null) {
      return;
    }
  
    document.getElementById("multiSpeedDiagramChart").innerHTML = "";
  
    var chart_diagram = new MultiSpeedChartDiagram();
    //设置语言
    chart_diagram.setLocalizationType(langType);
    //设置容器
    chart_diagram.setContainerDiv(
      "multiSpeedDiagramChart", //Div名称
      size.width,
      size.height - 35
    );
    //设置提示框Name
    chart_diagram.setToolTipName("featCurveTip");
    //查询
    chart_diagram.setChangeQueryDataCb((data) => {
      emit("cbChangeChartQueryData", data); //回调父窗体事件
    });
    //修改了速度列表
    chart_diagram.setChangeSpeedListCb((list) => {
      let speedList = [];
      list.forEach((v) => {
        const speed = v.speed;
        speedList.push({
          id: v.id,
          value: speed,
          text: speed + " rpm",
          color: v.color,
          unit: "rpm",
          type: v.type,
        });
      });
      state.m_speedValueMenu.list = speedList;
    });
  
    //全局配置
    var chartStyle = window.pageConfig.ChartStyle;
  
    let options = [
      {
        id: "dispPinLv",
        label: `标注频率`,
        type: 1, //没有子菜单
        value: 1,
      },
      {
        id: "dispSpeed",
        label: `标注转速`,
        type: 1, //没有子菜单
        value: 1,
      },
    ];
    state.m_chartDispSettingMenu.options = options;
  
    chart_diagram.setCurveLabelDispHz(true);
  
    // 查询曲线
    let chartQueryMenuOption = [
      {
        id: "chaxunquxian",
        label: `${t("detailPage.queryCurve.TR")}`,
        type: 1, //1 无子菜单
        value: 0,
        visible: true,
      },
      // {
      //   id: "paramsQuery1",
      //   label: `${t("detailPage.parameterQuery.TR")}1`,
      //   type: 1, //1 无子菜单
      //   value: "",
      //   visible: false,
      // },
      // {
      //   id: "paramsQuery2",
      //   label: `${t("detailPage.parameterQuery.TR")}2`,
      //   type: 1, //1 无子菜单
      //   value: "",
      //   visible: false,
      // }
    ];
    state.m_chartDispSettingMenu.chartQueryMenuOptions = chartQueryMenuOption;
  
    /*_this.m_chartDispSettingMenu.options[0].choiceValue =
      chartStyle.IsMonoColor;
    _this.m_chartDispSettingMenu.options[1].choiceValue =
      chartStyle.IsDispSpectrum;
   
  
    //上次配置
    let chartConfig = _this.$store.state.instante.chartConfig;
  
    if (chartConfig) {
      if (chartConfig.IsMonorColor != null) {
        chartStyle.IsMonoColor = chartConfig.IsMonorColor == 1 ? true : false;
  
        _this.m_chartDispSettingMenu.options[0].choiceValue =
          chartConfig.IsMonorColor;
      }
  
      if (chartConfig.IsDispSpectrum != null) {
        chartStyle.IsDispSpectrum =
          chartConfig.IsDispSpectrum == 1 ? true : false;
  
        _this.m_chartDispSettingMenu.options[1].choiceValue =
          chartConfig.IsDispSpectrum;
      }
    }*/
  
    //初始化
    chart_diagram.initialChart(pumpInfoData, chartStyle);
  
    state.m_chartDiagram = chart_diagram;
    setTimeout(() => {
      state.m_chartDiagram.Resize(size.width, size.height - 35);
    }, 500);
  };
  //设置工作曲线
  const setWrkCurveInfo = (dp, curve) => {
    if (state.m_chartDiagram == null) return;
  
    state.m_designPointParas = dp;
    state.m_chartDiagram.setWrkCurveInfo(curve);
  };
  //根据流量计算功率
  const calcPowerByFlow = (flow, unit) => {
    if (state.m_chartDiagram == null) return;
  
    return state.m_chartDiagram.calcPowerByFlow(flow, unit);
  };
  //根据流量计算效率
  const calcEtaByFlow = (flow, unit) => {
    if (state.m_chartDiagram == null) return;
    return state.m_chartDiagram.calcEtaByFlow(flow, unit);
  };
  //修改了区域参数的流量
  const refreshRegionByFlow = (std_unit_flow, tag) => {
    if (state.m_chartDiagram == null) return;
    return state.m_chartDiagram.refreshRegionByFlow(std_unit_flow, tag);
  };
  
  const showCoordinateBox = () => {
    //显示设置坐标对话框
    state.coordinateBoxVisible = true;
    //this.calcCoordinate();
  };
  const onParamQueryClickOutside = () => {
    unref(Param_Query_popoverRef).Param_Query_popoverRef?.delayHide?.();
  };
  const onDispMenuClickOutside = () => {
    unref(DispMenu_popoverRef).DispMenu_popoverRef?.delayHide?.();
  };
  const getSpeedList = () => {
    let speedList = [];
    state.m_speedValueMenu.list.forEach((item) => {
      speedList.push(item.value);
    });
    return speedList.join(",");
  };
  //退出全屏
  const exitFullScreen = () => {
    state.isFullScreen = false;
  };
  //全屏
  const fullScreen = () => {
    state.isFullScreen = true;
    setTimeout(() => {
      initFullScreenChart();
    }, 100);
  };
  
  const initFullScreenChart = () => {
    var IdName = "ChartFullScreen";
  };
  //
  const popoverShow = () => {
    state.addSpeedIsActive = true;
  };
  //
  const popoverHide = () => {
    state.addSpeedIsActive = false;
  };
  //
  const checkLogin = () => {
    //检查登陆
    var Token = userInfo.Token;
    if (Token == null || Token == "") {
      userStore.login(route.fullPath);
      return false;
    }
    return true;
  };
  defineExpose({
    initPumpInfoData,
    setWrkCurveInfo,
    getSpeedList,
  });
  </script>
  <style lang="scss">
  .performanceCurveBox {
    position: relative;
  
    .chartBar {
      background-color: white;
      border-bottom: 0.01rem solid #cecece;
      height: 0.35rem;
      line-height: 0.35rem;
    }
  
    .el-dialog__header {
      display: none;
    }
  
    .el-dialog--center .el-dialog__body {
      padding: 0.25rem 0.25rem 0.15rem;
    }
  
    .el-dialog__footer {
      padding: 0.05rem 0.05rem;
  
      .el-button {
        padding: 0.06rem 0.12rem;
        min-height: 0.3rem;
      }
    }
  
    .diagram {
      cursor: pointer;
      font-size: 0.12rem;
      margin-top: 0;
      margin-bottom: 0.03rem;
      padding-top: 0.05rem;
      height: 0.27rem;
  
      &>span {
        font-size: 0.12rem;
        font-family: "SourceHanSans-Bold";
      }
    }
  
    .multispeed-tools-div {
      font-size: 0.13rem;
      font-weight: bold;
      display: flex;
      height: 100%;
      padding: 0.04rem;
      box-sizing: border-box;
      gap: 0.05rem;
    }
  
    .multispeed_chart_btn {
      border-width: 0;
      padding: 0.07rem 0.14rem;
      font-size: 0.12rem;
      outline: none !important;
      background-image: none !important;
      border-radius: unset !important;
      filter: none;
      border-radius: 0;
      box-shadow: none;
      text-shadow: none;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.05rem;
  
      &.default {
        color: #333333;
        background-color: #e5e5e5;
        font-weight: 700;
  
        &:hover {
          background-color: #aaaaaa;

        if (chartConfig.IsOnlyDispWrkCurve != null) {
          chartStyle.IsOnlyDispWrkCurve =
            chartConfig.IsOnlyDispWrkCurve == 1 ? true : false;

          _this.m_chartDispSettingMenu.options[2].value =
            chartConfig.IsOnlyDispWrkCurve;
        }
      }
  
      &.blue-stripe {
        border-left: 0.03rem solid #002c66;
      }
    }
  
    .add_speed_active {
      color: #4b8df8 !important;
    }
  
    .rightFilterBox {
      position: absolute;
      right: 0rem;
      top: 0rem;
      width: auto;
      background-color: white;
      float: right;
  
      .showChartInfoDiv {
        width: 2rem;
        display: block;
      }
  
      .boxHead {
        height: 0.34rem;
        border-left: none;
        border-right: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: white;
        border: 0.01rem solid transparent;
        color: #3c763d;
        border-color: #d6e9c6;
        font-size: 0.14rem;
  
        i {
          font-size: 0.14rem;
        }
      }
  
      .panel-heading {
        background-color: #f5f5f5;
        border-color: #ddd;
        margin-bottom: 0.01rem;
  
        .panel-title {
          margin-top: 0;
          padding: 0;
          height: 0.23rem;
          margin-bottom: 0;
          font-size: 0.14rem;
          background-color: #388cd4 !important;
          color: white;
  
          .right {
            transform: rotate(-90deg);
            transition: 0.2s;
          }
  
          .down {
            transition: 0.2s;
            transform: rotate(0deg);
          }
        }
  
        .accordion-toggle {
          padding: 0.1rem 0.15rem;
        }
      }
  
      .panel-collapse {
        height: auto;
  
        .panel-body {
          background-color: #545196 !important;
  
          .el-checkbox {
            color: #fff;
          }
  
          .el-checkbox,
          .el-radio {
            margin-right: 0.1rem;
          }
  
          .el-checkbox__label {
            font-size: 0.12rem;
          }
  
          .el-checkbox__input.is-checked+.el-checkbox__label {
            color: #fff;
            font-size: 0.12rem;
          }
  
          .col-md-12 {
            width: 100%;
            margin-top: 0.03rem;
            display: flex;
            justify-content: center;
            align-items: center;
  
            .spectrumLeftParaLabelName {
              line-height: 0.25rem;
              margin-right: 0.05rem;
              font-size: 0.12rem;
              float: left;
              width: 31%;
              color: white;
              background-color: #545196 !important;
            }
  
            .spectrumLeftParaLabelUnit {
              line-height: 0.25rem;
              margin-right: 0.05rem;
              font-size: 0.12rem;
              float: left;
              width: 0.3rem;
              color: white;
              background-color: #545196 !important;
            }
  
            .el-input {
              width: unset;
              line-height: 0.3rem;
  
              .el-input__inner {
                height: 0.25rem;
                line-height: 0.25rem;
                width: 0.65rem;
                text-align: right;
              }
            }
  
            .pointShow {
              .el-input__inner {
                height: 0.25rem;
                line-height: 0.25rem;
                width: 100%;
                text-align: center;
              }
  
              .el-input__prefix,
              .el-input__suffix {
                top: -0.07rem;
              }
            }
  
            .chartInfoParaInput {
              float: left;
              line-height: 0.15rem;
              width: 0.48rem !important;
              text-align: right;
            }
  
            .form-control {
              height: 0.08rem;
              padding: 0.06rem 0.12rem;
              font-size: 0.14rem;
              font-weight: normal;
              color: #333333;
              background-color: white;
              border: 0.01rem solid #b4afaf;
              border-radius: 0;
              box-shadow: none;
              transition: border-color ease-in-out 0.15s,
                box-shadow ease-in-out 0.15s;
            }
          }
        }
      }
    }
  
    .searchbtn {
      border-radius: 0;
      border-width: 0;
      padding: 0.02rem 0.14rem;
      font-size: 0.14rem;
      outline: none !important;
      background-image: none !important;
      filter: none;
      box-shadow: none;
      text-shadow: none;
      display: inline-block;
      font-weight: 400;
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
      white-space: nowrap;
      line-height: 0.2rem;
      user-select: none;
      margin-top: 0.08rem;
      margin-left: 0.2rem;
      height: 0.2rem;
      margin-bottom: 0.02rem;
      width: 0.6rem;
      padding-top: 0.02rem;
      border: 0.01rem solid #ccc;
    }
  
    .blue {
      background-color: #6396c2 !important;
      color: #fff;
    }
  
    .setBox {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  
      .setGroup {
        position: relative;
        margin-bottom: 0.01rem !important;
        padding: 0.05rem !important;
        background-color: white;
        border: 0.01rem solid transparent;
        border-width: 0.01rem;
        border-color: #bce8f1;
        color: #31708f;
        margin-top: 0.2rem;
  
        .setTitle {
          font-size: 0.18rem;
          position: absolute;
          top: -0.15rem;
          background-color: #fff;
          padding: 0 0.05rem;
        }
  
        .set_Option {
          display: flex;
          justify-content: center;
          align-items: center;
  
          // margin-top: 0.1rem;
          .grid-content {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 0.05rem;
  
            label {
              width: 1.5rem;
              font-size: 0.12rem;
              text-align: right;
            }
  
            .el-input__inner {
              text-align: right;
              height: 0.4rem;
              line-height: 0.4rem;
              padding: 0 0;
            }
          }
        }
      }
    }
  
    .dialog_title_style {
      height: 30px;
      font-size: 22px;
      text-align: left;
      text-indent: 20px;
    }
  
    .dialog_content_style {
      height: 20px;
      text-align: left;
      text-indent: 20px;
      margin-top: 10px;
    }
  
    .el-color-picker {
      line-height: 3;
      margin-left: 0.05rem;
      height: 0.34rem;
    }
  
    .el-color-picker--mini .el-color-picker__trigger {
      width: 0.2rem;
      height: 0.2rem;
    }
  
    .el-color-picker__trigger {
      padding: unset;
    }
  
    .el-color-picker--mini .el-color-picker__empty,
    .el-color-picker--mini .el-color-picker__icon {
      color: transparent;
    }
  
    .tubiao {
      height: 100%;
      width: 100%;
    }
  
    .disp_SetChoiceMenu_style {
      position: absolute;
      right: -1.77rem;
      top: -0.01rem;
      background: rgb(255, 255, 255);
      border-width: 0.01rem 0.01rem 0.01rem 0.01rem;
      border-color: #e5e5e5;
      border-style: solid;
    }
  }
  
  .mulit-chart-select_menu {
    width: 100%;
    display: flex;
    background: #fff;
    border: 0.01rem solid #e5e5e5;
  
    .group_select_menu {
      width: 100%;
      border-right: 0.01rem solid #e5e5e5;
  
      ul {
        width: 100%;
        list-style: none;
        margin: 0;
        padding: 0.06rem 0;
  
        .group_style {
          cursor: pointer;
          color: #909399;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 0.3rem 0 0.2rem;
          height: 0.34rem;
          line-height: 0.34rem;
          outline: none;
          position: relative;
          gap: 0.05rem;
          box-sizing: border-box;
  
          .label_name {
            // flex: 1;
            padding: 0 0.1rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
  
          .speed_input_style {
            -webkit-appearance: none;
            background-color: transparent;
            background-image: none;
            border: none;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 0.34rem;
            line-height: 0.34rem;
            outline: none;
            padding: 0 0rem;
            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
            width: 50%;
            text-align: center;
            // text-indent: 0.22rem;
          }
  
          .deleted_style {
            position: absolute;
            right: 0.1rem;
            font-size: 0.16rem;
          }
  
          .deleted_style:hover {
            color: red;
            cursor: pointer;
          }
  
          &:hover {
            background: #f5f7fa;
            color: #303133;
          }
  
          .node_style {
            cursor: pointer;
            color: #909399;
            display: flex;
            align-items: center;
            padding: 0 0.3rem 0 0.2rem;
            height: 0.34rem;
            line-height: 0.34rem;
            outline: none;
  
            .label_name {
              // flex: 1;
              padding: 0 0.1rem;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
  
            &:hover {
              background: #f5f7fa;
              color: #303133;
            }
          }
        }
  
        .label_active {
          color: #409eff !important;
          font-weight: 700;
        }
  
        .none_active {
          color: #909399;
          font-weight: unset;
        }
      }
    }
  }
  
  .paramQuery_popover_style {
    min-width: 2rem !important;
    width: unset !important;
    inset: 1.2rem auto auto 2.42rem !important;
    padding: unset !important;
  }
  
  .multispeed_popover_style {
    min-width: 2rem !important;
    width: unset !important;
    inset: 1.31rem auto auto 3.4rem !important;
    padding: unset !important;
  }
  
  .SPEED_popover_style {
    min-width: 1.5rem !important;
    width: unset !important;
    inset: 1.31rem auto auto 2.42rem !important;
    padding: unset !important;
  }
  </style>
  
      }*/

   //初始化
   chart_diagram.initialChart(pumpInfoData, chartStyle);

   state.m_chartDiagram = chart_diagram;
};
//设置工作曲线
const setWrkCurveInfo = (dp, curve) => {

   if (state.m_chartDiagram == null) return;

   state.m_designPointParas = dp;
   state.m_chartDiagram.setWrkCurveInfo(dp);
};
//根据流量计算功率
const calcPowerByFlow = (flow, unit) => {
   if (state.m_chartDiagram == null) return;

   return state.m_chartDiagram.calcPowerByFlow(flow, unit);
};
//根据流量计算效率
const calcEtaByFlow = (flow, unit) => {
   if (state.m_chartDiagram == null) return;
   return state.m_chartDiagram.calcEtaByFlow(flow, unit);
};
//修改了区域参数的流量
const refreshRegionByFlow = (std_unit_flow, tag) => {
   if (state.m_chartDiagram == null) return;
   return state.m_chartDiagram.refreshRegionByFlow(std_unit_flow, tag);
};

const showCoordinateBox = () => {
   //显示设置坐标对话框
   state.coordinateBoxVisible = true;
   //this.calcCoordinate();
};
const onParamQueryClickOutside = () => {
   unref(Param_Query_popoverRef).Param_Query_popoverRef?.delayHide?.();
};
const onDispMenuClickOutside = () => {
   unref(DispMenu_popoverRef).DispMenu_popoverRef?.delayHide?.();
};
const getSpeedList = () => {
   let speedList = [];
   state.m_speedValueMenu.list.forEach((item) => {
      speedList.push(item.value);
   });
   return speedList.join(',');
};
//退出全屏
const exitFullScreen = () => {
   state.isFullScreen = false;
};
//全屏
const fullScreen = () => {
   state.isFullScreen = true;
   setTimeout(() => {
      initFullScreenChart();
   }, 100);
};

const initFullScreenChart = () => {
   var IdName = 'ChartFullScreen';
};
//
const popoverShow = () => {
   state.addSpeedIsActive = true;
};
//
const popoverHide = () => {
   state.addSpeedIsActive = false;
};
//
const checkLogin = () => {
   //检查登陆
   var Token = userInfo.Token;
   if (Token == null || Token == '') {
      userStore.login(route.fullPath);
      return false;
   }
   return true;
};
defineExpose({
   initPumpInfoData,
   setWrkCurveInfo,
   getSpeedList,
});
</script>
<style lang="scss">
.performanceCurveBox {
   position: relative;

   .chartBar {
      background-color: white;
      border-bottom: 0.01rem solid #cecece;
      height: 0.35rem;
      line-height: 0.35rem;
   }

   .el-dialog__header {
      display: none;
   }

   .el-dialog--center .el-dialog__body {
      padding: 0.25rem 0.25rem 0.15rem;
   }

   .el-dialog__footer {
      padding: 0.05rem 0.05rem;

      .el-button {
         padding: 0.06rem 0.12rem;
         min-height: 0.3rem;
      }
   }

   .diagram {
      cursor: pointer;
      font-size: 0.12rem;
      margin-top: 0;
      margin-bottom: 0.03rem;
      padding-top: 0.05rem;
      height: 0.27rem;

      & > span {
         font-size: 0.12rem;
         font-family: 'SourceHanSans-Bold';
      }
   }

   .multispeed-tools-div {
      font-size: 0.13rem;
      font-weight: bold;
      display: flex;
      height: 100%;
      padding: 0.04rem;
      box-sizing: border-box;
      gap: 0.05rem;
   }

   .multispeed_chart_btn {
      border-width: 0;
      padding: 0.07rem 0.14rem;
      font-size: 0.12rem;
      outline: none !important;
      background-image: none !important;
      border-radius: unset !important;
      filter: none;
      border-radius: 0;
      box-shadow: none;
      text-shadow: none;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.05rem;

      &.default {
         color: #333333;
         background-color: #e5e5e5;
         font-weight: 700;

         &:hover {
            background-color: #aaaaaa;
         }
      }

      &.blue-stripe {
         border-left: 0.03rem solid #002c66;
      }
   }

   .add_speed_active {
      color: #4b8df8 !important;
   }

   .rightFilterBox {
      position: absolute;
      right: 0rem;
      top: 0rem;
      width: auto;
      background-color: white;
      float: right;

      .showChartInfoDiv {
         width: 2rem;
         display: block;
      }

      .boxHead {
         height: 0.34rem;
         border-left: none;
         border-right: none;
         display: flex;
         justify-content: space-between;
         align-items: center;
         background-color: white;
         border: 0.01rem solid transparent;
         color: #3c763d;
         border-color: #d6e9c6;
         font-size: 0.14rem;

         i {
            font-size: 0.14rem;
         }
      }

      .panel-heading {
         background-color: #f5f5f5;
         border-color: #ddd;
         margin-bottom: 0.01rem;

         .panel-title {
            margin-top: 0;
            padding: 0;
            height: 0.23rem;
            margin-bottom: 0;
            font-size: 0.14rem;
            background-color: #388cd4 !important;
            color: white;

            .right {
               transform: rotate(-90deg);
               transition: 0.2s;
            }

            .down {
               transition: 0.2s;
               transform: rotate(0deg);
            }
         }

         .accordion-toggle {
            padding: 0.1rem 0.15rem;
         }
      }

      .panel-collapse {
         height: auto;

         .panel-body {
            background-color: #545196 !important;

            .el-checkbox {
               color: #fff;
            }

            .el-checkbox,
            .el-radio {
               margin-right: 0.1rem;
            }

            .el-checkbox__label {
               font-size: 0.12rem;
            }

            .el-checkbox__input.is-checked + .el-checkbox__label {
               color: #fff;
               font-size: 0.12rem;
            }

            .col-md-12 {
               width: 100%;
               margin-top: 0.03rem;
               display: flex;
               justify-content: center;
               align-items: center;

               .spectrumLeftParaLabelName {
                  line-height: 0.25rem;
                  margin-right: 0.05rem;
                  font-size: 0.12rem;
                  float: left;
                  width: 31%;
                  color: white;
                  background-color: #545196 !important;
               }

               .spectrumLeftParaLabelUnit {
                  line-height: 0.25rem;
                  margin-right: 0.05rem;
                  font-size: 0.12rem;
                  float: left;
                  width: 0.3rem;
                  color: white;
                  background-color: #545196 !important;
               }

               .el-input {
                  width: unset;
                  line-height: 0.3rem;

                  .el-input__inner {
                     height: 0.25rem;
                     line-height: 0.25rem;
                     width: 0.65rem;
                     text-align: right;
                  }
               }

               .pointShow {
                  .el-input__inner {
                     height: 0.25rem;
                     line-height: 0.25rem;
                     width: 100%;
                     text-align: center;
                  }

                  .el-input__prefix,
                  .el-input__suffix {
                     top: -0.07rem;
                  }
               }

               .chartInfoParaInput {
                  float: left;
                  line-height: 0.15rem;
                  width: 0.48rem !important;
                  text-align: right;
               }

               .form-control {
                  height: 0.08rem;
                  padding: 0.06rem 0.12rem;
                  font-size: 0.14rem;
                  font-weight: normal;
                  color: #333333;
                  background-color: white;
                  border: 0.01rem solid #b4afaf;
                  border-radius: 0;
                  box-shadow: none;
                  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
               }
            }
         }
      }
   }

   .searchbtn {
      border-radius: 0;
      border-width: 0;
      padding: 0.02rem 0.14rem;
      font-size: 0.14rem;
      outline: none !important;
      background-image: none !important;
      filter: none;
      box-shadow: none;
      text-shadow: none;
      display: inline-block;
      font-weight: 400;
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
      white-space: nowrap;
      line-height: 0.2rem;
      user-select: none;
      margin-top: 0.08rem;
      margin-left: 0.2rem;
      height: 0.2rem;
      margin-bottom: 0.02rem;
      width: 0.6rem;
      padding-top: 0.02rem;
      border: 0.01rem solid #ccc;
   }

   .blue {
      background-color: #6396c2 !important;
      color: #fff;
   }

   .setBox {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .setGroup {
         position: relative;
         margin-bottom: 0.01rem !important;
         padding: 0.05rem !important;
         background-color: white;
         border: 0.01rem solid transparent;
         border-width: 0.01rem;
         border-color: #bce8f1;
         color: #31708f;
         margin-top: 0.2rem;

         .setTitle {
            font-size: 0.18rem;
            position: absolute;
            top: -0.15rem;
            background-color: #fff;
            padding: 0 0.05rem;
         }

         .set_Option {
            display: flex;
            justify-content: center;
            align-items: center;

            // margin-top: 0.1rem;
            .grid-content {
               display: flex;
               justify-content: center;
               align-items: center;
               margin-top: 0.05rem;

               label {
                  width: 1.5rem;
                  font-size: 0.12rem;
                  text-align: right;
               }

               .el-input__inner {
                  text-align: right;
                  height: 0.4rem;
                  line-height: 0.4rem;
                  padding: 0 0;
               }
            }
         }
      }
   }

   .dialog_title_style {
      height: 30px;
      font-size: 22px;
      text-align: left;
      text-indent: 20px;
   }

   .dialog_content_style {
      height: 20px;
      text-align: left;
      text-indent: 20px;
      margin-top: 10px;
   }

   .el-color-picker {
      line-height: 3;
      margin-left: 0.05rem;
      height: 0.34rem;
   }

   .el-color-picker--mini .el-color-picker__trigger {
      width: 0.2rem;
      height: 0.2rem;
   }

   .el-color-picker__trigger {
      padding: unset;
   }

   .el-color-picker--mini .el-color-picker__empty,
   .el-color-picker--mini .el-color-picker__icon {
      color: transparent;
   }

   .tubiao {
      height: 100%;
      width: 100%;
   }

   .disp_SetChoiceMenu_style {
      position: absolute;
      right: -1.77rem;
      top: -0.01rem;
      background: rgb(255, 255, 255);
      border-width: 0.01rem 0.01rem 0.01rem 0.01rem;
      border-color: #e5e5e5;
      border-style: solid;
   }
}

.mulit-chart-select_menu {
   width: 100%;
   display: flex;
   background: #fff;
   border: 0.01rem solid #e5e5e5;

   .group_select_menu {
      width: 100%;
      border-right: 0.01rem solid #e5e5e5;

      ul {
         width: 100%;
         list-style: none;
         margin: 0;
         padding: 0.06rem 0;

         .group_style {
            cursor: pointer;
            color: #909399;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 0.3rem 0 0.2rem;
            height: 0.34rem;
            line-height: 0.34rem;
            outline: none;
            position: relative;
            gap: 0.05rem;
            box-sizing: border-box;

            .label_name {
               // flex: 1;
               padding: 0 0.1rem;
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
            }

            .speed_input_style {
               -webkit-appearance: none;
               background-color: transparent;
               background-image: none;
               border: none;
               box-sizing: border-box;
               color: #606266;
               display: inline-block;
               font-size: inherit;
               height: 0.34rem;
               line-height: 0.34rem;
               outline: none;
               padding: 0 0rem;
               transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
               width: 50%;
               text-align: center;
               // text-indent: 0.22rem;
            }

            .deleted_style {
               position: absolute;
               right: 0.1rem;
               font-size: 0.16rem;
            }

            .deleted_style:hover {
               color: red;
               cursor: pointer;
            }

            &:hover {
               background: #f5f7fa;
               color: #303133;
            }

            .node_style {
               cursor: pointer;
               color: #909399;
               display: flex;
               align-items: center;
               padding: 0 0.3rem 0 0.2rem;
               height: 0.34rem;
               line-height: 0.34rem;
               outline: none;

               .label_name {
                  // flex: 1;
                  padding: 0 0.1rem;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
               }

               &:hover {
                  background: #f5f7fa;
                  color: #303133;
               }
            }
         }

         .label_active {
            color: #409eff !important;
            font-weight: 700;
         }

         .none_active {
            color: #909399;
            font-weight: unset;
         }
      }
   }
}

.paramQuery_popover_style {
   min-width: 2rem !important;
   width: unset !important;
   inset: 1.2rem auto auto 2.42rem !important;
   padding: unset !important;
}

.multispeed_popover_style {
   min-width: 2rem !important;
   width: unset !important;
   inset: 1.31rem auto auto 3.4rem !important;
   padding: unset !important;
}

.SPEED_popover_style {
   min-width: 1.5rem !important;
   width: unset !important;
   inset: 1.31rem auto auto 2.42rem !important;
   padding: unset !important;
}
</style>