zd

src/router/index.js

@@ -343,6 +343,23 @@ export const dynamicRoutes = [
     ],
     ],
   },
   },
   {
   {
+    path: "/efficiencyAnalysis/djzt/detail",
+    component: Layout,
+    hidden: true,
+    permissions: ["efficiencyAnalysis:djzt:list"],
+    children: [
+      {
+        path: "index/:jh/:famc/:qk/:jhs",
+        component: () => import("@/views/efficiencyAnalysis/djzt/detail"),
+        name: "DjztDetail",
+        meta: {
+          title: "多井钻头详情",
+          activeMenu: "/views/efficiencyAnalysis/djzt",
+        },
+      },
+    ],
+  },
+  {
     path: "/jtzb/jtzbGt",
     path: "/jtzb/jtzbGt",
     component: Layout,
     component: Layout,
     hidden: true,
     hidden: true,

src/views/efficiencyAnalysis/djxx/index.vue

@@ -508,8 +508,8 @@ export default {
                 return true
                 return true
             }
             }
 
 
-            // 邻井选择限制为3个
-            const maxSelection = 3
+            // 邻井选择限制为2个
+            const maxSelection = 2
             return this.wellSelection.length < maxSelection
             return this.wellSelection.length < maxSelection
         },
         },
 
 

src/views/efficiencyAnalysis/djzt/detail/components/CurveGraph.vue

+<template>
+    <div class="drilling-chart-container" v-loading="loading">
+        <div id="drillingEfficiencyChartdj" class="chart"></div>
+    </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { getdjqxt } from '@/api/optimization/initialization';
+
+export default {
+    props: {
+        jh: {
+            type: String,
+            required: true,
+        },
+        jhs: {
+            type: String,
+            required: true,
+        }
+    },
+    data() {
+        return {
+            chartData: null,
+            myChart: null,
+            resizeHandler: null,
+            loading: false // 新增loading状态
+        };
+    },
+    mounted() {
+        // this.getList(); // 移除自动加载
+        this.$once('hook:beforeDestroy', this.cleanup);
+    },
+    methods: {
+        /**
+         * 外部调用：加载数据
+         */
+        loadData() {
+            this.loading = true;
+            this.getList();
+        },
+
+        getList() {
+            const params = { jhs: this.jhs };
+            this.loading = true;
+            getdjqxt(params)
+                .then(res => {
+                    console.log('接口返回数据:', res);
+                    this.chartData = res;
+                    this.initChart();
+                })
+                .catch(error => {
+                    console.error('接口请求失败:', error);
+                    this.chartData = null;
+                    this.initChart();
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
+
+        initChart() {
+            if (!this.chartData) {
+                const chartDom = document.getElementById('drillingEfficiencyChartdj');
+                if (chartDom && this.myChart) {
+                    this.myChart.clear();
+                }
+                return;
+            }
+
+            const chartDom = document.getElementById('drillingEfficiencyChartdj');
+            if (!chartDom) {
+                console.error('未找到图表容器');
+                return;
+            }
+
+            if (chartDom.offsetWidth === 0 || chartDom.offsetHeight === 0) {
+                console.log('容器尺寸为0，200ms后重试');
+                setTimeout(() => this.initChart(), 200);
+                return;
+            }
+
+            if (this.myChart) {
+                this.myChart.dispose();
+            }
+            this.myChart = echarts.init(chartDom);
+
+            // 解析接口数据（确保折线数据格式正确）
+            const { axisRange, scatterData, targetLineData, crosshair } = this.chartData;
+            const scatter = scatterData.map(item => [item.speed, item.depth, item.drillType]);
+            // 折线数据必须为数组格式：[[钻速, 进尺], ...]
+            const targetLine = targetLineData.map(item => [item.speed, item.depth]);
+            const drillTypes = [...new Set(scatterData.map(item => item.drillType))];
+
+            // 十字线及中心点配置
+            const crosshairLines = [];
+            const crosshairCenter = [];
+            if (crosshair) {
+                crosshairLines.push({
+                    name: '十字线',
+                    type: 'line',
+                    data: [[crosshair.x - 10, crosshair.y], [crosshair.x + 10, crosshair.y]],
+                    lineStyle: { color: 'black', width: 1, type: 'dashed' },
+                    symbol: 'none',
+                    tooltip: { show: false } // 十字线不显示tooltip
+                });
+                crosshairLines.push({
+                    name: '十字线',
+                    type: 'line',
+                    data: [[crosshair.x, crosshair.y - 500], [crosshair.x, crosshair.y + 500]],
+                    lineStyle: { color: 'black', width: 1, type: 'dashed' },
+                    symbol: 'none',
+                    tooltip: { show: false } // 十字线不显示tooltip
+                });
+                crosshairCenter.push({
+                    name: '十字线中心',
+                    type: 'scatter',
+                    data: [[crosshair.x, crosshair.y]],
+                    symbolSize: 12,
+                    itemStyle: { color: 'orange', borderColor: '#fff', borderWidth: 2 }
+                });
+            }
+
+            // 图表配置项（核心：坐标轴触发，确保折线悬浮显示）
+            const option = {
+                title: { text: '钻头钻进能效分析', left: 'center' },
+                tooltip: {
+                    trigger: 'axis', // 基于坐标轴触发（不依赖数据点）
+                    axisPointer: {
+                        type: 'line', // 显示轴线指示器，辅助定位折线数据点
+                        snap: true // 强制吸附到最近的折线数据点
+                    },
+                    formatter: (params) => {
+                        // 遍历所有系列数据，找到折线图的信息
+                        const lineData = params.find(p => p.seriesName === '优化曲线');
+                        const scatterData = params.find(p => drillTypes.includes(p.seriesName));
+                        const centerData = params.find(p => p.seriesName === '十字线中心');
+
+                        let result = '';
+                        // 折线图数据（必显）
+                        if (lineData) {
+                            result += `优化曲线<br>钻速：${lineData.data[0]} m/h<br>进尺：${lineData.data[1]}<br>`;
+                        }
+                        // 散点数据（如果鼠标在散点上）
+                        if (scatterData) {
+                            result += `钻头类型：${scatterData.data[2]}<br>钻速：${scatterData.data[0]} m/h<br>进尺：${scatterData.data[1]}<br>`;
+                        }
+                        // 中心点数据（如果鼠标在中心点上）
+                        if (centerData) {
+                            result += `均值<br>钻速：${centerData.data[0]} m/h<br>进尺：${centerData.data[1]}<br>`;
+                        }
+                        return result;
+                    }
+                },
+                legend: {
+                    data: ['优化曲线',],
+                    top: '10%',
+                    left: 'center'
+                },
+                xAxis: {
+                    name: '钻速 (m/h)',
+                    type: 'value',
+                    min: axisRange.xAxis.min,
+                    max: axisRange.xAxis.max,
+                    interval: axisRange.xAxis.interval,
+                    axisLabel: { formatter: '{value} m/h' }
+                },
+                yAxis: {
+                    name: '进尺',
+                    type: 'value',
+                    min: axisRange.yAxis.min,
+                    interval: axisRange.yAxis.interval
+                },
+                series: [
+                    {
+                        name: '优化曲线',
+                        type: 'line',
+                        data: targetLine, // 确保数据正确
+                        smooth: true,
+                        // 彻底隐藏所有点（包括悬浮时）
+                        symbol: 'none',
+                        showSymbol: false,
+                        emphasis: { showSymbol: false },
+                        lineStyle: { color: 'red', width: 2 }
+                    },
+                    ...crosshairLines,
+                    ...crosshairCenter,
+                    ...drillTypes.map(type => ({
+                        name: type,
+                        type: 'scatter',
+                        data: scatter.filter(item => item[2] === type),
+                        symbolSize: 10,
+                        itemStyle: { color: 'blue' }
+                    }))
+                ]
+            };
+
+            this.myChart.setOption(option);
+
+            this.resizeHandler = () => this.myChart.resize();
+            window.addEventListener('resize', this.resizeHandler);
+        },
+
+        cleanup() {
+            if (this.myChart) {
+                this.myChart.dispose();
+                this.myChart = null;
+            }
+            if (this.resizeHandler) {
+                window.removeEventListener('resize', this.resizeHandler);
+                this.resizeHandler = null;
+            }
+        }
+    }
+};
+</script>
+
+<style scoped>
+.drilling-chart-container {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.chart {
+    width: 100%;
+    height: calc(100vh - 220px);
+    min-height: 600px;
+}
+</style>
\ No newline at end of file

src/views/efficiencyAnalysis/djzt/detail/index.vue

+<!-- 多井能效分析方案详情 -->
+<template>
+    <div class="app-container">
+        <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick" style="margin-top: -10px;">
+            <el-tab-pane label="数据表格" name="dataTable">
+                <DataTable ref="dataTableRef" :jh="queryParams.jh" :famc="queryParams.famc" :qk="queryParams.qk"
+                    :jhs="queryParams.jhs" />
+            </el-tab-pane>
+
+            <el-tab-pane label="曲线图形" name="curveGraph">
+                <CurveGraph ref="curveGraphRef" :jh="queryParams.jh" :famc="queryParams.famc" :qk="queryParams.qk"
+                    :jhs="queryParams.jhs" />
+            </el-tab-pane>
+
+            <el-tab-pane label="直方图形" name="histogramGraph">
+                <HistogramGraph ref="histogramGraphRef" :jh="queryParams.jh" :famc="queryParams.famc"
+                    :qk="queryParams.qk" :jhs="queryParams.jhs" />
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+
+<script>
+import DataTable from './components/DataTable.vue';
+import CurveGraph from './components/CurveGraph.vue';
+import HistogramGraph from './components/HistogramGraph.vue';
+
+export default {
+    name: "DjxxDetail",
+    components: {
+        DataTable,
+        CurveGraph,
+        HistogramGraph
+    },
+    data() {
+        return {
+            // 当前激活的tab
+            activeTab: 'dataTable',
+            // 显示搜索条件
+            showSearch: true,
+            // 遮罩层
+            loading: false,
+            // 选中数组
+            ids: [],
+            // 查询参数
+            queryParams: {
+                jh: '',
+                famc: '',
+                qk: '',
+                jhs: ''
+            },
+            // 标记是否是第一次进入页面
+            isFirstLoad: true
+        };
+    },
+    created() {
+        // 获取路由参数
+        console.log('详情页面created，完整路由对象:', this.$route);
+        const { jh, famc, qk, jhs } = this.$route.params;
+        console.log('路由参数:', { jh, famc, qk, jhs });
+
+        // 检查参数是否为空或undefined
+        if (jh && jh !== 'undefined' && jh !== 'null') {
+            this.queryParams.jh = jh;
+            this.queryParams.famc = famc || '';
+            this.queryParams.qk = qk || '';
+            this.queryParams.jhs = jhs || '';
+            console.log('设置 queryParams:', this.queryParams);
+        } else {
+            console.warn('未获取到有效的路由参数 jh，当前参数:', { jh, famc, qk, jhs });
+        }
+        // 确保第一次进入页面时不会自动初始化组件
+        console.log('页面初始化完成，等待用户点击tab');
+    },
+    methods: {
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.loading = true;
+            // 这里可以调用API进行数据查询
+            setTimeout(() => {
+                this.loading = false;
+            }, 1000);
+        },
+
+        /** 移除记录按钮操作 */
+        handleRemove() {
+            if (this.ids.length === 0) {
+                this.$message.warning('请选择要移除的记录');
+                return;
+            }
+            this.$modal.confirm('是否确认移除选中的记录？').then(() => {
+                // 这里可以调用API进行删除操作
+                this.$modal.msgSuccess("移除成功");
+            }).catch(() => { });
+        },
+
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map(item => item.id);
+        },
+
+        /** tab切换事件 */
+        handleTabClick(tab) {
+            console.log('切换到tab:', tab.name);
+            // 标记已经不是第一次加载
+            this.isFirstLoad = false;
+            if (tab.name === 'dataTable') {
+                this.$refs.dataTableRef && this.$refs.dataTableRef.loadData && this.$refs.dataTableRef.loadData();
+            } else if (tab.name === 'curveGraph') {
+                this.$refs.curveGraphRef && this.$refs.curveGraphRef.loadData && this.$refs.curveGraphRef.loadData();
+            } else if (tab.name === 'histogramGraph') {
+                this.$refs.histogramGraphRef && this.$refs.histogramGraphRef.loadData && this.$refs.histogramGraphRef.loadData();
+            }
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.tab-content {
+    padding: 5px 0;
+}
+
+.chart-container {
+    height: calc(100vh - 300px);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+
+    h3 {
+        color: #666;
+        margin-bottom: 10px;
+    }
+
+    p {
+        color: #999;
+    }
+}
+
+::v-deep .el-table__cell>.cell {
+    font-weight: normal;
+}
+
+::v-deep .el-table--medium .el-table__cell {
+    padding: 5px 0 !important;
+}
+
+::v-deep .el-form-item {
+    margin-bottom: 10px !important;
+}
+
+::v-deep .el-tabs__content {
+    padding: 5px 0;
+    margin-top: -10px;
+}
+</style>