添加风机曲线

tanghaolin

2025-02-20 ee0bf275ed4203c05653bc3456d5ee73d7a9aea2

添加风机曲线

 public/static/EecProductData/image/3/SelectReport.png

 public/static/EecProductData/image/3/fan_chart.png

 src/components/CustomerService.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,196 @@
<template>
  <div class="bg-white w-full h-[600px] shadow-lg rounded-lg flex flex-col">
    <!-- é¡¶éƒ¨æ ‡é¢˜æ  -->
    <div class="h-14 bg-white border-b flex items-center px-4 justify-between">
      <div class="flex items-center gap-2">
        <el-avatar :size="32" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
        <div>
          <div class="text-base font-medium">工效汇聚平台客服</div>
          <div class="text-xs text-gray-400">在线</div>
        </div>
      </div>
      <div class="flex items-center gap-2">
        <el-button type="primary" plain size="small" @click="endChat">结束会话</el-button>
      </div>
    </div>

    <!-- èŠå¤©å†…容区域 -->
    <div class="flex-1 bg-[#f9f9f9] p-4 overflow-y-auto" ref="chatContainer">
      <div class="flex flex-col gap-4">
        <!-- ç³»ç»Ÿæ¶ˆæ¯ -->
        <div class="text-center text-gray-400 text-sm">
          <span>{{ currentTime }}</span>
        </div>

        <!-- æ¶ˆæ¯åˆ—表 -->
        <div v-for="(message, index) in messages" :key="index">
          <!-- å®¢æœæ¶ˆæ¯ -->
          <div v-if="message.type === 'service'" class="flex items-start gap-2">
            <el-avatar :size="36" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
            <div class="max-w-[70%]">
              <div class="bg-white rounded-lg p-3 shadow-sm">
                {{ message.content }}
              </div>
            </div>
          </div>

          <!-- ç”¨æˆ·æ¶ˆæ¯ -->
          <div v-else class="flex items-start gap-2 flex-row-reverse">
            <el-avatar :size="36" :src="userAvatar" />
            <div class="max-w-[70%]">
              <div class="bg-primary text-white rounded-lg p-3 shadow-sm">
                {{ message.content }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- å¿«æ·æœåŠ¡æŒ‰é’® -->
    <!-- <div class="bg-white px-4 py-2 border-t grid grid-cols-4 gap-2">
      <div v-for="(service, index) in quickServices" :key="index" 
           class="flex items-center justify-center gap-2 p-2 hover:bg-gray-50 cursor-pointer rounded-lg"
           @click="selectQuickService(service)">
        <el-icon><component :is="service.icon" /></el-icon>
        <span class="text-sm">{{ service.name }}</span>
      </div>
    </div> -->

    <!-- åº•éƒ¨å·¥å…·æ å’Œè¾“入框 -->
    <div class="h-40 bg-white border-t p-4">
      <!-- å·¥å…·æ  -->
      <div class="flex items-center gap-4 mb-2">
        <el-tooltip content="表情" placement="top">
          <el-button text>
            <el-icon><ChatRound /></el-icon>
          </el-button>
        </el-tooltip>
        <el-tooltip content="图片" placement="top">
          <el-button text>
            <el-icon><PictureFilled /></el-icon>
          </el-button>
        </el-tooltip>
        <el-tooltip content="文件" placement="top">
          <el-button text>
            <el-icon><Document /></el-icon>
          </el-button>
        </el-tooltip>
        <el-tooltip content="评价" placement="top">
          <el-button text>
            <el-icon><Star /></el-icon>
          </el-button>
        </el-tooltip>
      </div>

      <!-- è¾“入框 -->
      <div class="flex flex-col gap-2">
        <el-input
          v-model="messageInput"
          type="textarea"
          :rows="2"
          placeholder="请输入消息..."
          resize="none"
          @keyup.enter.native="sendMessage"
        />
        <div class="flex justify-end">
          <el-button type="primary" @click="sendMessage">发送</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ChatRound, PictureFilled, Document, Star, Service, Goods, Van, QuestionFilled } from '@element-plus/icons-vue'

interface Message {
  type: 'user' | 'service'
  content: string
  time: string
}

interface QuickService {
  name: string
  icon: string
  action: string
}

const messageInput = ref('')
const messages = ref<Message[]>([
  {
    type: 'service',
    content: '您好，客服智能助理为您服务！',
    time: '20:45'
  },
  {
    type: 'service',
    content: '我一直在这，有问题可以随时咨询哦~',
    time: '20:45'
  }
])

const quickServices = [
  { name: '我要催单', icon: 'Van', action: 'order_tracking' },
  { name: '价格保护', icon: 'Goods', action: 'price_protection' },
  { name: '退换/售后', icon: 'Service', action: 'after_sales' },
  { name: '咨询帮助', icon: 'QuestionFilled', action: 'help' }
]

const userAvatar = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
const currentTime = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })

const sendMessage = () => {
  if (!messageInput.value.trim()) return
  
  // æ·»åŠ ç”¨æˆ·æ¶ˆæ¯
  messages.value.push({
    type: 'user',
    content: messageInput.value,
    time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  })

  // æ¨¡æ‹Ÿå®¢æœè‡ªåŠ¨å›žå¤
  setTimeout(() => {
    messages.value.push({
      type: 'service',
      content: '您的问题我已经收到，请稍等片刻，我会尽快为您解答。',
      time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
    })
  }, 1000)

  messageInput.value = ''
}

const selectQuickService = (service: QuickService) => {
  messages.value.push({
    type: 'user',
    content: service.name,
    time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  })
}

const endChat = () => {
  // å®žçŽ°ç»“束会话的逻辑
  messages.value.push({
    type: 'service',
    content: '感谢您的咨询，如果还有其他问题随时找我哦~',
    time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  })
}

onMounted(() => {
  // å¯ä»¥åœ¨è¿™é‡Œæ·»åŠ åˆå§‹åŒ–逻辑
})
</script>

<style scoped>
:deep(.el-textarea__inner) {
  resize: none;
}

.bg-primary {
  background-color: #409EFF;
}
</style> 

 src/components/Fan/SpeedChart.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,643 @@
<template>
    <!-- æ€§èƒ½æ›²çº¿ -->
    <div id="chartBox" style="width: 100%; height: 100%" class="performanceCurveBox">
        <!-- å›¾è¡¨åŒºåŸŸ -->
        <div style="overflow: hidden; width: 100%" :style="'height:' + chartBoxHiehgt + 'px'">
            <div class="tubiao">
                <div style="width: 100%; height: calc(100% - 1px)" id="fanChart" ref="FeatCurveSvg"></div>
            </div>
        </div>
        <div v-if="isFullScreen" class="fullscreen_style">
            <div style="height: 0.4rem; line-height: 0.4rem; text-align: left">
                <a class="diagram 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>
import { onMounted, ref, reactive, nextTick } from 'vue';
import $ from '@/assets/js/jquery-3.4.1.min';
import ChartDiagram from '@/components/chart/FanSpeedChartDiagram.js';
import UnitHelper from '@/utils/unit';
import ConstParas from '@/utils/constParas.js';

let state = reactive({
    m_chartDiagram: null, //图表对象

    UnitListQ: UnitHelper.Q_Value_List, //流量单位
    UnitListH: UnitHelper.H_Value_List, //扬程单位
    UnitListP: UnitHelper.P_Value_List, //功率单位

    isFullScreen: false, //是否全屏
    chartBoxHiehgt: 0, //图表盒子高度

    coordinateBoxVisible: false, //设置坐标对话框的显/隐

    m_chartDispSettingMenu: {
        isShowQueryChartBtn: true, //是否显示图标上的查询按钮

        isShowSubMenu: false, //下拉菜单的显示隐藏
        acitveMenuId: '',
        subMenus: [],
    },
    m_pumpName: '',
    m_seriesID: 0,
    m_pumpID: 0,
});
onMounted(() => {
    nextTick(function () {
        refreshWindowSize();
    });

    window.addEventListener(
        'resize',
        () => {
            return (() => {
                refreshWindowSize();
            })();
        },
        false
    );
});
//修改窗体尺寸
const refreshWindowSize = () => {
    let headerHeight = 0;
    let footerHeight = 0;
    if (document.querySelector('#app header')) {
        headerHeight = document.querySelector('#app header').clientHeight;
    }
    if (document.querySelector('#app footer')) {
        footerHeight = document.querySelector('#app footer').clientHeight;
    }
    const infoDv4VerticalLine = document.getElementById('infoDv4VerticalLine');
    if (infoDv4VerticalLine) {
        infoDv4VerticalLine.remove();
    }
    const fanChart = document.getElementById('fanChart');
    if (fanChart) {
        while (fanChart.firstChild) {
            fanChart.removeChild(fanChart.firstChild);
        }
    }

    this.chartBoxHiehgt = document.body.clientHeight - headerHeight - footerHeight - 75; //
    if (this.m_chartDiagram) {
        var diagramContentWidth = document.querySelector('#fanChart').clientWidth;
        var diagramContentHiehgt = document.querySelector('#fanChart').clientHeight;
        //console.log(diagramContentWidth, diagramContentHiehgt);
        this.m_chartDiagram.Resize(diagramContentWidth, diagramContentHiehgt);
    }
};
//导出性能曲线 //https://gitee.com/mirrors/saveSvgAsPng
const btnClickExportChart = () => {
    return;
};

// åˆå§‹åŒ–获取 æ•°æ®
const initFanInfoData = (langType, fanInfoData, cbDict, uiUserSetting) => {
    if (fanInfoData == null) return;

    this.m_pumpName = fanInfoData.BaseInfo.PumpName;
    this.m_seriesID = fanInfoData.BaseInfo.SeriesID;
    this.m_pumpID = fanInfoData.BaseInfo.PumpID;

    var _this = this;

    let subMenus = [

    ];
    this.m_chartDispSettingMenu.subMenus = subMenus;

    initChart(langType, fanInfoData, cbDict, uiUserSetting);
};

//点击"图表查询"
const btnClickChartQuery = () => {
    //查询线的显/隐
    if (this.m_chartDiagram != null) {
        //console.log('查询线显示')
        var isChartQueryStatus = this.m_chartDiagram.getQueryIndicatVertLineVisible();
        isChartQueryStatus = !isChartQueryStatus;
        this.m_chartDiagram.setQueryIndicatVertLineVisible(isChartQueryStatus);
        this.$emit('cbChangeChartQueryStatus', isChartQueryStatus); //回调父窗体事件
    }
};
//点击"图表设置"菜单 type=0(带子菜单的)
const btnClickChartDispSetChoiceGrp = (menuItem) => {
    this.m_chartDispSettingMenu.acitveMenuId = menuItem.id;
};
//点击"图表设置"菜单 type=1(checkbox)
const btnClickChartDispSetCheck = (menuItem) => {
    menuItem.value = menuItem.value == 0 ? 1 : 0;
    this.m_chartDispSettingMenu.isShowSubMenu = false;

     if (menuItem.id == 'dispCurveDispQP') {
        this.m_chartDiagram.dispDispCurveQP(menuItem.value == 1 ? true : false);
    } else if (menuItem.id == 'dispCurveDispQV') {
        this.m_chartDiagram.dispDispCurveQV(menuItem.value == 1 ? true : false);
    } else if (menuItem.id == 'dispNodePtText') {
        this.m_chartDiagram.dispNodePtText(menuItem.value == 1 ? true : false);
    }
};
//点击"图表设置"的 å­èœå•
const btnClickChartDispSetChoiceMenu = (menuItem, choiceItem) => {
    this.m_chartDispSettingMenu.isShowSubMenu = false;
    menuItem.choiceValue = choiceItem.value;

	
};
//初始化图表
const initChart = (langType, fanInfoData, cbDict, uiUserSetting) => {
    let _this = this;
    // console.log(fanInfoData, 404);
    if (fanInfoData == null) {
        return;
    }

    $('#fanChart').empty();

    // console.log(document.body.clientHeight, document.documentElement.clientHeight)
    var diagramContentWidth = document.querySelector('#fanChart').clientWidth;
    var diagramContentHeight = document.querySelector('#fanChart').clientHeight;

    var chart_diagram = new ChartDiagram();
    //设置语言
    chart_diagram.setLocalizationType(langType);

    //console.log(fanInfoData.SettingInfo)
    //设置单位
    chart_diagram.setUserSetting(
        uiUserSetting, //界面用户设置
        fanInfoData.SettingInfo.SeriesUnitQ,
        fanInfoData.SettingInfo.SeriesUnitH,
        fanInfoData.SettingInfo.SeriesUnitP,
        fanInfoData.SettingInfo.SeriesIsD2Meter
    );
    //设置容器
    chart_diagram.setContainerDiv(
        'fanChart', //Div名称
        diagramContentWidth,
        diagramContentHeight
    );
    //设置提示框Name
    chart_diagram.setToolTipName('featCurveTip');
    //查询曲线信息
    chart_diagram.setChangeQueryDataCb(function (data) {
        //console.log("setChangeQueryDataCb",data);
        //_this.$emit("cbChangeChartQueryData", data); //回调父窗体事件
    });

    //全局配置
    var chartStyle = window.pageConfig.ChartStyle;

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

    _this.m_chartDiagram = chart_diagram;
};

//通过设计点选型刷新
const refreshByDp = (val) => {
    if (this.m_chartDiagram == null) return;
    this.m_chartDiagram.refreshByDp(val);
};
//根据流量计算功率
const calcPowerByFlow = (flow, unit) => {
    if (this.m_chartDiagram == null) return;

    return this.m_chartDiagram.calcPowerByFlow(flow, unit);
};

//根据流量计算效率
const calcEtaByFlow = (flow, unit) => {
    if (this.m_chartDiagram == null) return;

    return this.m_chartDiagram.calcEtaByFlow(flow, unit);
};
//修改了区域参数的流量(m3h单位下)
const refreshRegionByFlow = (flow_m3h, tag) => {
    if (flow_m3h == null || tag == null) return;
    if (this.m_chartDiagram == null) return;

    return this.m_chartDiagram.refreshRegionByFlow(flow_m3h, tag);
};

const showCoordinateBox = () => {
    //显示设置坐标对话框
    this.coordinateBoxVisible = true;
};
// è®¾ç½®åæ ‡
const setCoordinate = () => {
    // this.coordinateBoxVisible = false;
    // console.log(this.coordinatePara, 429);
    let yMax = Math.max(
        //判断结束刻度是否超过Y轴最大刻度
        this.coordinatePara.EndLineNoNPSH,
        this.coordinatePara.EndLineNoE,
        this.coordinatePara.EndLineNoP,
        this.coordinatePara.EndLineNoH
    );
    let unit = this.coordinatePara.unitObj;
    this.coordinatePara.GridNumberY = yMax > this.coordinatePara.GridNumberY ? yMax : this.coordinatePara.GridNumberY; //设置Y轴最大刻度
    let coordinatePara = JSON.parse(JSON.stringify(this.coordinateParaOld)); //做新旧值比较
    let coordinateParaUpdata = JSON.parse(JSON.stringify(this.coordinatePara)); //设置坐标信息数据  å’Œè®¾ç½®åæ ‡å±•ç¤ºçš„数据区别开
    let H = coordinatePara.CoordMaxH - this.coordinatePara.CoordMaxH;

    H = UnitHelper.ConvertH(unit.H, UnitHelper.Unit.Default.H, H);
    //扬程最小值换算
    coordinateParaUpdata.CoordMinH = this.coordinatePara.CoordMinH = coordinateParaUpdata.CoordMinH - H;
    //扬程间隔刻度换算
    coordinateParaUpdata.CoordSpaceH = UnitHelper.ConvertH(unit.H, UnitHelper.Unit.Default.H, coordinateParaUpdata.CoordSpaceH);
    //流量间隔刻度换算
    coordinateParaUpdata.CoordSpaceQ = UnitHelper.ConvertQ(unit.Q, UnitHelper.Unit.Default.Q, coordinateParaUpdata.CoordSpaceQ);
    let P = coordinatePara.CoordMaxP - this.coordinatePara.CoordMaxP;
    P = UnitHelper.ConvertP(unit.P, UnitHelper.Unit.Default.P, P);

    //功率最小值换算
    coordinateParaUpdata.CoordMinP = this.coordinatePara.CoordMinP = this.coordinatePara.CoordMinP - P;

    //功率间隔刻度换算
    coordinateParaUpdata.CoordSpaceP = UnitHelper.ConvertP(unit.P, UnitHelper.Unit.Default.P, coordinateParaUpdata.CoordSpaceP);

    this.coordinatePara.CoordMinNPSH = this.coordinatePara.CoordMinNPSH;
    //更新图表坐标信息
    this.m_chartDiagram.UpdateByCoordinate(coordinateParaUpdata);
    //设置坐标后调用一次计算坐标函数 æ›´æ–°é—´éš”刻度改变后最大最小值的变化
    //this.calcCoordinate();
    //把更改后的坐标信息赋值给老的坐标信息对象
    this.coordinateParaOld = JSON.parse(JSON.stringify(this.coordinatePara));
};
//下载客户端
const downClientFile = () => {
    let filePath = window.pageConfig.IndexPage.DanjiUrl;
    if ((filePath = '')) {
        return;
    }
    window.open(filePath, '_blank');
};
defineExpose({
    initFanInfoData,
});
</script>
<style lang="scss">
.performanceCurveBox {
    position: relative;
    .fullscreen_style {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        z-index: 9999;
    }
    .chartBar {
        background-color: white;
        border-bottom: 0.01rem solid #cecece;
        height: 0.35rem;
        line-height: 0.35rem;
        .select_menu {
            position: absolute;
            top: 0.34rem;
            left: 0.73rem;
            display: flex;
            background: #fff;
            border: 0.01rem solid #e5e5e5;
            .group_select_menu {
                width: 1.75rem;
                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;
                        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;
                        }

                        .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;
                    }
                }
            }
        }
    }
    .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;
        }
    }
    .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;
        &.default {
            color: #333333;
            background-color: #e5e5e5;
            &:hover {
                background-color: #aaaaaa;
            }
        }
        &.blue-stripe {
            border-left: 0.03rem solid #4b8df8;
        }
    }
    .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;
                    }
                }
            }
        }
    }
    .tubiao {
        height: 100%;
        width: 100%;
    }
}
</style>

 src/views/EecLabel.vue

@@ -84,7 +84,7 @@
                                    </svg>
                                    è¯¦ç»†</span
                                >
                                <span class="table-detail-span" @click="clickDetailCertifcate(scope.row)" v-if="false"
                                <span class="table-detail-span" @click="clickDetailCertifcate(scope.row)" v-if="true"
                                    ><svg
                                        t="1739500034021"
                                        class="detail-icon"
@@ -96,38 +96,18 @@
                                        height="128"
                                    >
                                        <path
                                            d="M0 115.2m76.8 0l870.4 0q76.8 0 76.8 76.8l0 640q0 76.8-76.8 76.8l-870.4 0q-76.8 0-76.8-76.8l0-640q0-76.8 76.8-76.8Z"
                                            fill="#1989FA"
                                            opacity=".3"
                                            p-id="34307"
                                            d="M18.731707 12.487805m499.512195 0l0 0q499.512195 0 499.512196 499.512195l0 0q0 499.512195-499.512196 499.512195l0 0q-499.512195 0-499.512195-499.512195l0 0q0-499.512195 499.512195-499.512195Z"
                                            fill="#478BFF"
                                            fill-opacity=".1"
                                            p-id="11765"
                                        ></path>
                                        <path
                                            d="M563.2 396.8m25.6 0l281.6 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-281.6 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z"
                                            fill="#1989FA"
                                            p-id="34308"
                                        ></path>
                                        <path
                                            d="M563.2 512m25.6 0l281.6 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-281.6 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z"
                                            fill="#1989FA"
                                            p-id="34309"
                                        ></path>
                                        <path
                                            d="M563.2 640m25.6 0l140.8 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-140.8 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z"
                                            fill="#1989FA"
                                            p-id="34310"
                                        ></path>
                                        <path
                                            d="M294.4 422.4m-140.8 0a140.8 140.8 0 1 0 281.6 0 140.8 140.8 0 1 0-281.6 0Z"
                                            fill="#1989FA"
                                            p-id="34311"
                                        ></path>
                                        <path
                                            d="M261.1584 611.5328l-73.0624 126.5536-88.6912-51.2 69.0432-119.5776a191.3088 191.3088 0 0 0 92.7104 44.224z m162.816-47.4496l66.9696 116.0064-88.6784 51.2-69.6832-120.6912a191.4496 191.4496 0 0 0 91.392-46.5152z"
                                            fill="#1989FA"
                                            p-id="34312"
                                            d="M718.04878 761.756098h-349.658536a74.926829 74.926829 0 0 1-74.926829-74.92683v-399.609756a24.97561 24.97561 0 0 1 24.975609-24.97561h349.658537a24.97561 24.97561 0 0 1 24.97561 24.97561v299.707317h99.902439v99.902439a74.926829 74.926829 0 0 1-74.92683 74.92683z m-24.975609-124.878049v49.951219a24.97561 24.97561 0 1 0 49.951219 0v-49.951219h-49.951219z m-299.707317-249.756098v49.95122h199.804878v-49.95122h-199.804878z m0 99.902439v49.95122h199.804878v-49.95122h-199.804878z m0 99.902439v49.95122h124.878048v-49.95122h-124.878048z"
                                            fill="#478BFF"
                                            p-id="11766"
                                        ></path>
                                    </svg>
                                    è¯ä¹¦</span
                                    ä¸‹å•</span
                                >
                            </template>
                        </el-table-column>
@@ -198,7 +178,7 @@
                    </el-form-item>
                    <el-form-item label="备案信息" prop="RecordNumber">
                        <div style="padding-left: 30px; background-color: rgb(243 250 255)">
                            <el-form label-width="200px" >
                            <el-form label-width="200px">
                                <el-form-item v-for="(item, index) in state.m_OtherDetailInfo.List" :key="index" :label="item.name" prop="Standard">
                                    <span>{{ item.value }}</span>
                                </el-form-item>
@@ -244,7 +224,7 @@
let state = reactive({
    m_formData: {
        ProductModel: '',
        ProductType: 1,
        ProductType: 2,
        RecordNumber: '',
    },
    allEecProduct: [],
@@ -276,15 +256,13 @@
        List: '',
        RecordTime: '',
    },
    typeSelect: 1,
    typeSelect: 2,
    // åˆ†ç±»é€‰é¡¹
    type: [
        { name: 'æ³µ', tag: 1 },
        { name: '容积式空压机', tag: 2 },
        { name: '通风机', tag: 3 },
        { name: '冷水机组', tag: 4 },
        { name: '电力变压器', tag: 5 },
        { name: '工业锅炉', tag: 6 },
        { name: '电机', tag: 7 },
    ],
    m_PageLoading: false,
@@ -404,8 +382,15 @@
    // router.push(`/product/${currentProduct.Id}`);
};
const clickDetailCertifcate = (row: any) => {
    state.m_detailDialogInfo = row;
    dialogVisibleCertifcate.value = true;
    // state.m_detailDialogInfo = row;
    // dialogVisibleCertifcate.value = true;
        // æ‰¾åˆ°å½“前点击的产品
        const currentProduct = state.m_dispTableData.find((item) => item.id === row.id);
    if (currentProduct) {
        // ä¿å­˜äº§å“ä¿¡æ¯åˆ°localStorage
        localStorage.setItem('currentProduct', JSON.stringify(currentProduct));
    }
    router.push(`/product/${currentProduct.Id}`);
};

const getProductDetail = async (productModel) => {

 src/views/Home.vue

@@ -325,6 +325,7 @@
                <div class="group relative">
                    <div
                        class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200 flex-col"
                        @click="showCustomerService = true"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
@@ -340,11 +341,11 @@
                                d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
                            />
                        </svg>
                        <div class="bg-gray-800  text-sm py-1 px-3 rounded text-black" style="text-align: center">客服</div>
                        <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">客服</div>
                    </div>
                    <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style">
                    <!-- <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style">
                        <img :src="CallMe" width="150" height="150" />
                    </div>
                    </div> -->
                </div>

                <!-- åé¦ˆ -->
@@ -366,7 +367,33 @@
                                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
                            />
                        </svg>
                        <div class="bg-gray-800  text-sm py-1 px-3 rounded text-black" style="text-align: center">反馈</div>
                        <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">反馈</div>
                    </div>
                </div>
                <div class="group relative">
                    <div
                        class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200 flex-col"
                    >
                        <svg
                            t="1740060002788"
                            class="icon h-6 w-6 text-gray-600"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="13742"
                            width="128"
                            height="128"
                        >
                            <path
                                d="M767.818667 409.173333C867.338667 444.266667 938.666667 539.136 938.666667 650.666667c0 42.709333-10.496 83.978667-30.261334 120.842666-1.792 3.338667-4.992 8.928-9.696 16.96l14.613334 53.557334c6.506667 23.893333-15.402667 45.813333-39.296 39.296l-53.642667-14.634667-6.229333 3.669333A254.933333 254.933333 0 0 1 682.666667 906.666667c-77.994667 0-147.84-34.88-194.805334-89.888a352.608 352.608 0 0 1-56.64 4.554666c-63.338667 0-124.266667-16.853333-177.472-48.298666-1.834667-1.088-6.410667-3.733333-13.632-7.893334l-80.544 21.653334c-23.914667 6.432-45.76-15.573333-39.146666-39.434667l21.792-78.752a961.205333 961.205333 0 0 1-15.904-27.317333A336.384 336.384 0 0 1 85.333333 480c0-188.618667 154.965333-341.333333 345.888-341.333333 159.914667 0 297.984 108.010667 335.818667 259.296 0.949333 3.765333 1.173333 7.552 0.778667 11.2z m-68.106667-13.952C662.88 282.037333 555.178667 202.666667 431.221333 202.666667 275.434667 202.666667 149.333333 326.933333 149.333333 480c0 46.272 11.498667 90.837333 33.194667 130.698667 2.88 5.290667 10.176 17.706667 21.621333 36.746666a32 32 0 0 1 3.413334 25.013334l-10.517334 37.994666 39.232-10.549333a32 32 0 0 1 24.234667 3.146667c14.272 8.192 22.773333 13.098667 25.802667 14.890666A283.882667 283.882667 0 0 0 431.221333 757.333333c6.154667 0 12.288-0.192 18.389334-0.576A255.061333 255.061333 0 0 1 426.666667 650.666667c0-141.386667 114.613333-256 256-256 5.728 0 11.413333 0.192 17.045333 0.554666z m133.706667 397.056a32 32 0 0 1 3.338666-24.725333 996.672 996.672 0 0 0 15.242667-26.293333A190.997333 190.997333 0 0 0 874.666667 650.666667c0-106.037333-85.962667-192-192-192s-192 85.962667-192 192 85.962667 192 192 192a190.933333 190.933333 0 0 0 98.570666-27.2c2.208-1.322667 8.288-4.874667 18.517334-10.837334a32 32 0 0 1 24.522666-3.210666l12.565334 3.424-3.424-12.565334zM330.666667 426.666667a42.666667 42.666667 0 1 1 0-85.333334 42.666667 42.666667 0 0 1 0 85.333334z m192 0a42.666667 42.666667 0 1 1 0-85.333334 42.666667 42.666667 0 0 1 0 85.333334z m85.333333 202.666666a32 32 0 1 1 0-64 32 32 0 0 1 0 64z m149.333333 0a32 32 0 1 1 0-64 32 32 0 0 1 0 64z"
                                fill="#000000"
                                p-id="13743"
                            ></path>
                        </svg>
                        <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">微信</div>
                    </div>
                    <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style">
                        <img :src="CallMe" width="150" height="150" />
                    </div>
                </div>

@@ -384,22 +411,34 @@
                        >
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
                        </svg>
                        <div class="bg-gray-800  text-sm py-1 px-3 rounded text-black" style="text-align: center">顶部</div>
                        <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">顶部</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- å®¢æœå¯¹è¯æ¡† -->
        <el-dialog
            v-model="showCustomerService"
            :show-close="true"
            :modal="true"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            class="customer-service-dialog"
        >
            <customer-service />
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { Document, Operation } from '@element-plus/icons-vue';
import * as echarts from 'echarts';
import { onMounted, ref,nextTick } from 'vue';
import { onMounted, ref, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import YWLogo from '@/assets/logo/yw_logo.png';
import CallMe from "@/assets/qrcode/callme.jpg"
import CallMe from '@/assets/qrcode/callme.jpg';
import axios from 'axios';
import CustomerService from '@/components/CustomerService.vue';

import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper/modules';
@@ -1079,6 +1118,8 @@
        });
    });
};

const showCustomerService = ref(false);
</script>

<style scoped>
@@ -1161,4 +1202,12 @@
        border-bottom: none;
    }
}

:deep(.customer-service-dialog .el-dialog__body) {
    padding: 0;
}

:deep(.customer-service-dialog .el-dialog__header) {
    display: block;
}
</style>

 src/views/IndustrialSoftware.vue

@@ -223,8 +223,6 @@
    { name: '容积式空压机', tag: 2 },
    { name: '通风机', tag: 3 },
    { name: '冷水机组', tag: 4 },
    { name: '电力变压器', tag: 5 },
    { name: '工业锅炉', tag: 6 },
    { name: '电机', tag: 7 },
];
const factory = ref([]);

 src/views/OrderInfo.vue

@@ -110,8 +110,27 @@
                </el-tooltip>
            </div>
            <div class="mt-4">
                <el-button :disabled="loading.submit" @click="invoice.type = 'none'">不开发票</el-button>
                <el-button type="primary" link @click="showInvoiceDialog = true">修改</el-button>
                <el-form
                    v-if="invoice.type === 'company'"
                    ref="invoiceForm"
                    :model="invoice"
	
                    label-width="120px"
                    class="mt-4"
                >
                    <el-form-item label="单位名称" prop="companyName">
                        <el-input v-model="invoice.companyName" placeholder="请输入单位名称"></el-input>
                    </el-form-item>

                    <el-form-item label="纳税人识别号" prop="taxNumber">
                        <el-input v-model="invoice.taxNumber" placeholder="请输入纳税人识别号"></el-input>
                    </el-form-item>

                    <div class="text-gray-500 text-sm mt-2">
                        <el-icon class="mr-1"><InfoFilled /></el-icon>
                        å‘票将在订单完成后自动开具并发送至订单中的邮箱
                    </div>
                </el-form>
            </div>
        </div>

@@ -304,7 +323,7 @@
const showInvoiceDialog = ref(false);
const invoiceForm = ref<FormInstance>();
const invoice = ref({
    type: 'none',
    type: 'company',
    companyName: '',
    taxNumber: '',
});

 src/views/ProductDetail.vue

@@ -97,7 +97,8 @@
                    <div style="width: 1200px; height: 750px" v-show="isPumpDetail">
                        <LXBChart ref="lxbChartCtrl"></LXBChart>
                    </div>
                    <el-empty description="暂无性能曲线信息" v-show="!isPumpDetail" />
                    <img width="1200" height="auto" :src="product.Chart" v-if="isFan" />
                    <el-empty description="暂无性能曲线信息" v-show="!isPumpDetail && !isFan" />
                </el-tab-pane>
                <el-tab-pane label="变速曲线" name="params">
                    <!-- <div style="width: 1200px; height: 750px"></div> -->
@@ -116,7 +117,8 @@
                    <el-empty description="暂无变速曲线信息" v-show="!isPumpDetail" />
                </el-tab-pane>
                <el-tab-pane label="选型报告" name="SelectReport">
                    <el-empty description="暂无报告" />
                    <img width="1200" height="auto" :src="product.SelectReport" v-if="isFan" />
                    <el-empty description="暂无报告" v-show="!isPumpDetail && !isFan" />
                </el-tab-pane>
                <el-tab-pane label="测试报告" name="certificate">
                    <div class="p-6 flex justify-center">
@@ -200,7 +202,7 @@
const showBuyDialog = ref(false);

const isPumpDetail = ref(false);

const isFan = ref(false);
const orderForm = ref({
    name: '',
    phone: '',
@@ -280,6 +282,7 @@
    if (savedProduct) {
        const productData = JSON.parse(savedProduct);
        productDataRef.value = productData;

        // åˆå¹¶é»˜è®¤å€¼å’Œä¿å­˜çš„产品数据
        product.value = {
            ...product.value,
@@ -305,6 +308,11 @@
            },
        };
        isPumpDetail.value = productData.Id.includes('Pupm') ? true : false;
        isFan.value = productData.Id.includes('FJ') ? true : false;
        if (isFan.value) {
            product.value.Chart = 'static/EecProductData/image/3/fan_chart.png';
            product.value.SelectReport = 'static/EecProductData/image/3/SelectReport.png';
        }
    }
    initDetailData();
});
@@ -350,7 +358,7 @@
            multiSpeedChartCtrl.value.setWrkCurveInfo(curve);
        },
    };
    if(!isPumpDetail.value)return;
    if (!isPumpDetail.value) return;
    lxbChartCtrl.value.initPumpInfoData(0, pumpInfoData, cb_dict, m_userUnitSetting);
    multiSpeedChartCtrl.value.initPumpInfoData(0, pumpInfoData, () => {}, m_userUnitSetting);
    //初始化属性控件