zpy

src/views/efficiencyAnalysis/djxx/detail/components/CurveGraph copy.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.jh},${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/djxx/detail/components/CurveGraph.vue

 <template>
 <template>
-    <div class="drilling-chart-container" v-loading="loading">
+    <div class="drilling-chart-container">
         <div id="drillingEfficiencyChartdj" class="chart"></div>
         <div id="drillingEfficiencyChartdj" class="chart"></div>
     </div>
     </div>
 </template>
 </template>
@@ -23,26 +23,18 @@ export default {
         return {
         return {
             chartData: null,
             chartData: null,
             myChart: null,
             myChart: null,
-            resizeHandler: null,
-            loading: false // 新增loading状态
+            resizeHandler: null
         };
         };
     },
     },
     mounted() {
     mounted() {
-        // this.getList(); // 移除自动加载
+        this.getList();
         this.$once('hook:beforeDestroy', this.cleanup);
         this.$once('hook:beforeDestroy', this.cleanup);
     },
     },
     methods: {
     methods: {
-        /**
-         * 外部调用：加载数据
-         */
-        loadData() {
-            this.loading = true;
-            this.getList();
-        },
-
         getList() {
         getList() {
-            const params = { jhs: this.jhs };
-            this.loading = true;
+            const params = {
+                jhs: `${this.jh},${this.jhs}`
+            };
             getdjqxt(params)
             getdjqxt(params)
                 .then(res => {
                 .then(res => {
                     console.log('接口返回数据:', res);
                     console.log('接口返回数据:', res);
@@ -53,9 +45,6 @@ export default {
                     console.error('接口请求失败:', error);
                     console.error('接口请求失败:', error);
                     this.chartData = null;
                     this.chartData = null;
                     this.initChart();
                     this.initChart();
-                })
-                .finally(() => {
-                    this.loading = false;
                 });
                 });
         },
         },
 
 
@@ -99,7 +88,7 @@ export default {
                 crosshairLines.push({
                 crosshairLines.push({
                     name: '十字线',
                     name: '十字线',
                     type: 'line',
                     type: 'line',
-                    data: [[crosshair.x - 10, crosshair.y], [crosshair.x + 10, crosshair.y]],
+                    data: [[crosshair.y - 10, crosshair.x], [crosshair.y + 10, crosshair.x]],
                     lineStyle: { color: 'black', width: 1, type: 'dashed' },
                     lineStyle: { color: 'black', width: 1, type: 'dashed' },
                     symbol: 'none',
                     symbol: 'none',
                     tooltip: { show: false } // 十字线不显示tooltip
                     tooltip: { show: false } // 十字线不显示tooltip
@@ -107,7 +96,7 @@ export default {
                 crosshairLines.push({
                 crosshairLines.push({
                     name: '十字线',
                     name: '十字线',
                     type: 'line',
                     type: 'line',
-                    data: [[crosshair.x, crosshair.y - 500], [crosshair.x, crosshair.y + 500]],
+                    data: [[crosshair.y, crosshair.x - 500], [crosshair.y, crosshair.x + 500]],
                     lineStyle: { color: 'black', width: 1, type: 'dashed' },
                     lineStyle: { color: 'black', width: 1, type: 'dashed' },
                     symbol: 'none',
                     symbol: 'none',
                     tooltip: { show: false } // 十字线不显示tooltip
                     tooltip: { show: false } // 十字线不显示tooltip
@@ -115,7 +104,7 @@ export default {
                 crosshairCenter.push({
                 crosshairCenter.push({
                     name: '十字线中心',
                     name: '十字线中心',
                     type: 'scatter',
                     type: 'scatter',
-                    data: [[crosshair.x, crosshair.y]],
+                    data: [[crosshair.y, crosshair.x]],
                     symbolSize: 12,
                     symbolSize: 12,
                     itemStyle: { color: 'orange', borderColor: '#fff', borderWidth: 2 }
                     itemStyle: { color: 'orange', borderColor: '#fff', borderWidth: 2 }
                 });
                 });
@@ -153,9 +142,16 @@ export default {
                     }
                     }
                 },
                 },
                 legend: {
                 legend: {
-                    data: ['优化曲线',],
+                    data: ['指标', '钻速均值', '进尺均值', '优化曲线',],
                     top: '10%',
                     top: '10%',
-                    left: 'center'
+                    right: '5%'
+                },
+                grid: {
+                    left: '2%',
+                    right: '5%',
+                    top: '15%',
+                    bottom: '10%',
+                    containLabel: true
                 },
                 },
                 xAxis: {
                 xAxis: {
                     name: '钻速 (m/h)',
                     name: '钻速 (m/h)',
@@ -163,13 +159,21 @@ export default {
                     min: axisRange.xAxis.min,
                     min: axisRange.xAxis.min,
                     max: axisRange.xAxis.max,
                     max: axisRange.xAxis.max,
                     interval: axisRange.xAxis.interval,
                     interval: axisRange.xAxis.interval,
-                    axisLabel: { formatter: '{value} m/h' }
+                    axisLabel: { formatter: '{value} m/h' },
+                    nameLocation: 'center',
+                    nameGap: 30,
+                    axisTick: { show: true },
+                    axisLine: { show: true }
                 },
                 },
                 yAxis: {
                 yAxis: {
                     name: '进尺',
                     name: '进尺',
                     type: 'value',
                     type: 'value',
                     min: axisRange.yAxis.min,
                     min: axisRange.yAxis.min,
-                    interval: axisRange.yAxis.interval
+                    interval: axisRange.yAxis.interval,
+                    nameLocation: 'center',
+                    nameGap: 40,
+                    axisTick: { show: true },
+                    axisLine: { show: true }
                 },
                 },
                 series: [
                 series: [
                     {
                     {
@@ -183,14 +187,43 @@ export default {
                         emphasis: { showSymbol: false },
                         emphasis: { showSymbol: false },
                         lineStyle: { color: 'red', width: 2 }
                         lineStyle: { color: 'red', width: 2 }
                     },
                     },
+                    {
+                        name: '钻速均值',
+                        type: 'line',
+                        data: [[crosshair.x, axisRange.yAxis.min], [crosshair.x, axisRange.yAxis.max]],
+                        lineStyle: { color: '#9eca7f', width: 2, type: 'dashed' },
+                        symbol: 'none',
+                        tooltip: { show: false }
+                    },
+                    {
+                        name: '进尺均值',
+                        type: 'line',
+                        data: [[crosshair.x - 500, crosshair.y], [crosshair.x + 500, crosshair.y]],
+                        lineStyle: { color: '#f2ca6b', width: 2 },
+                        symbol: 'none',
+                        tooltip: { show: false }
+                    },
                     ...crosshairLines,
                     ...crosshairLines,
                     ...crosshairCenter,
                     ...crosshairCenter,
                     ...drillTypes.map(type => ({
                     ...drillTypes.map(type => ({
                         name: type,
                         name: type,
                         type: 'scatter',
                         type: 'scatter',
                         data: scatter.filter(item => item[2] === type),
                         data: scatter.filter(item => item[2] === type),
-                        symbolSize: 10,
-                        itemStyle: { color: 'blue' }
+                        symbolSize: 12,
+                        itemStyle: {
+                            color: 'blue',
+                            borderColor: 'red',
+                            borderWidth: 3,
+                            shadowColor: 'red',
+                            shadowBlur: 8
+                        },
+                        label: {
+                            show: true,
+                            position: 'top',
+                            formatter: type,
+                            fontSize: 10,
+                            color: '#333'
+                        }
                     }))
                     }))
                 ]
                 ]
             };
             };
@@ -215,11 +248,11 @@ export default {
 };
 };
 </script>
 </script>
 
 
-<style scoped>
+<style lang="scss" scoped>
 .drilling-chart-container {
 .drilling-chart-container {
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
-    padding: 20px;
+    /* padding: 20px; */
     box-sizing: border-box;
     box-sizing: border-box;
 }
 }
 
 

src/views/efficiencyAnalysis/djxx/detail/components/DataTable copy.vue

+<!-- 钻头使用情况 -->
+<template>
+    <div class="app-container">
+        <!-- 搜索区域 -->
+        <div class="search-wrapper">
+            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+                label-width="68px">
+                <!-- <el-form-item label="区块名称" prop="qk">
+                    <el-select v-model="queryParams.qk" placeholder="请选择区块名称" clearable filterable>
+                        <el-option v-for="item in filteredBlockOptions" :key="item.qk" :label="item.qk"
+                            :value="item.qk" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="井号" prop="jhs">
+                    <el-input v-model="queryParams.jhs" placeholder="请输入井号" clearable
+                        @keyup.enter.native="handleQuery" />
+                </el-form-item>
+                <el-form-item label="完井日期" prop="wjrq">
+                    <el-date-picker v-model="queryParams.wjrqks" type="year" value-format="yyyy" placeholder="完井开始年份">
+                    </el-date-picker>
+                    -
+                    <el-date-picker v-model="queryParams.wjrqjs" type="year" value-format="yyyy" placeholder="完井结束年份">
+                    </el-date-picker>
+                </el-form-item> -->
+                <el-form-item>
+                    <!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
+                    <!-- <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                        v-hasPermi="['system:jsha:add']">新增</el-button> -->
+                    <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+                        v-hasPermi="['system:jsha:export']">导出</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+
+        <!-- 表格容器 -->
+        <div class="table-container">
+            <!-- 主表格区域 -->
+            <div class="main-table-wrapper" :class="{ 'with-detail': selectedRow }">
+                <el-table border v-loading="loading" :data="jshaList" @selection-change="handleSelectionChange"
+                    @row-click="handleRowClick" height="tableHeight" style="width: 100%">
+                    <!-- <el-table-column type="selection" width="55" align="center" /> -->
+                    <el-table-column label="序号" align="center" prop="xh" width="120" show-overflow-tooltip fixed />
+                    <el-table-column label="井号" align="center" prop="jh" width="120" show-overflow-tooltip fixed />
+                    <el-table-column label="钻头序列号" align="center" prop="ztxlh" width="120" show-overflow-tooltip />
+                    <el-table-column label="尺寸" align="center" prop="cc" width="120" show-overflow-tooltip />
+                    <el-table-column label="钻进井段自" align="center" prop="qsjs" width="120" show-overflow-tooltip />
+                    <el-table-column label="钻进井段至" align="center" prop="zzjs" width="120" show-overflow-tooltip />
+                    <el-table-column label="进尺" align="center" prop="jc" width="120" show-overflow-tooltip />
+                    <el-table-column label="机械钻速" align="center" prop="jxzs" width="120" show-overflow-tooltip />
+                    <el-table-column label="所钻地层" align="center" prop="szdc" width="120" show-overflow-tooltip />
+                    <el-table-column label="厂家" align="center" prop="cj" width="120" show-overflow-tooltip />
+                    <el-table-column label="钻头型号" align="center" prop="ztxh" width="120" show-overflow-tooltip />
+                    <el-table-column label="IADC号" align="center" prop="iadc" width="120" show-overflow-tooltip />
+                    <el-table-column label="下井次数" align="center" prop="xjcs" width="120" show-overflow-tooltip />
+                    <el-table-column label="类型" align="center" prop="lx" width="120" show-overflow-tooltip />
+                    <el-table-column label="入井新度" align="center" prop="rjxd" width="120" show-overflow-tooltip />
+                    <el-table-column label="出井新度" align="center" prop="cjxd" width="120" show-overflow-tooltip />
+                    <el-table-column label="喷嘴直径1号" align="center" prop="pz1" width="120" show-overflow-tooltip />
+                    <el-table-column label="喷嘴直径2号" align="center" prop="pz2" width="120" show-overflow-tooltip />
+                    <el-table-column label="喷嘴直径3号" align="center" prop="pz3" width="120" show-overflow-tooltip />
+                    <!-- <el-table-column label="喷嘴直径4号" align="center" prop="pz4" />
+          <el-table-column label="喷嘴直径5号" align="center" prop="pz5" />
+          <el-table-column label="喷嘴直径6号" align="center" prop="pz6" />
+          <el-table-column label="喷嘴直径7号" align="center" prop="pz7" />
+          <el-table-column label="喷嘴直径8号" align="center" prop="pz8" />
+          <el-table-column label="喷嘴直径9号" align="center" prop="pz9" />
+          <el-table-column label="喷嘴直径10号" align="center" prop="pz10" /> -->
+                    <el-table-column label="进尺工作时间合计" align="center" prop="jcsjhj" width="220" show-overflow-tooltip />
+                    <el-table-column label="进尺工作时间纯钻进" align="center" prop="jcsjczj" width="220"
+                        show-overflow-tooltip />
+                    <el-table-column label="进尺工作时间起下钻" align="center" prop="jcsjqxz" width="220"
+                        show-overflow-tooltip />
+                    <el-table-column label="进尺工作时间扩划眼" align="center" prop="jcsjkhy" width="220"
+                        show-overflow-tooltip />
+                    <el-table-column label="钻压" align="center" prop="zy" width="120" show-overflow-tooltip />
+                    <el-table-column label="转速" align="center" prop="zs" width="120" show-overflow-tooltip />
+                    <el-table-column label="缸径" align="center" prop="gj" width="120" show-overflow-tooltip />
+                    <el-table-column label="泵速" align="center" prop="bs" width="120" show-overflow-tooltip />
+                    <el-table-column label="排量" align="center" prop="pl" width="120" show-overflow-tooltip />
+                    <el-table-column label="立管泵压" align="center" prop="lgby" width="120" show-overflow-tooltip />
+                    <!-- <el-table-column label="钻头压降" align="center" prop="ztyj" /> -->
+                    <!-- <el-table-column label="环空压耗" align="center" prop="hkyh" />
+          <el-table-column label="冲击力" align="center" prop="cjl" />
+          <el-table-column label="喷射速度" align="center" prop="pssd" />
+          <el-table-column label="钻头水功率" align="center" prop="ztsgl" />
+          <el-table-column label="比水功率" align="center" prop="bsgl" />
+          <el-table-column label="上返速度钻杆" align="center" prop="sfsdzg" />
+          <el-table-column label="上返速度钻铤" align="center" prop="sfsdzt" />
+          <el-table-column label="功率利用率" align="center" prop="gllyl" />
+          <el-table-column label="牙齿磨损情况" align="center" prop="ycmsqk" />
+          <el-table-column label="轴承磨损情况" align="center" prop="zcmsqk" />
+          <el-table-column label="直径磨损情况" align="center" prop="zjmsqk" />
+          <el-table-column label="备注" align="center" prop="bz" />
+          <el-table-column label="内排齿" align="center" prop="npc" />
+          <el-table-column label="外排齿" align="center" prop="wpc" />
+          <el-table-column label="磨损特征" align="center" prop="mstz" />
+          <el-table-column label="位置" align="center" prop="wz" />
+          <el-table-column label="轴承/密封" align="center" prop="zc" />
+          <el-table-column label="直径" align="center" prop="zj" />
+          <el-table-column label="起钻原因" align="center" prop="qzyy" />
+          <el-table-column label="其他特征" align="center" prop="qttz" />
+          <el-table-column label="扭矩" align="center" prop="nj" />
+          <el-table-column label="钻盘总转数" align="center" prop="zpzzs" />
+          <el-table-column label="入井日期" align="center" prop="qsrq" width="180">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.qsrq, '{y}-{m}-{d}') }}</span>
+            </template>
+</el-table-column>
+<el-table-column label="起出日期" align="center" prop="zzrq" width="180">
+    <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.zzrq, '{y}-{m}-{d}') }}</span>
+            </template>
+</el-table-column>
+<el-table-column label="喷嘴类型" align="center" prop="pzlx" />
+<el-table-column label="钻头价格" align="center" prop="ztjg" /> -->
+                    <!-- <el-table-column label="操作" width="120" align="center" class-name="small-padding fixed-width"
+                        property="operation" fixed="right">
+                        <template slot-scope="scope">
+                            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                                v-hasPermi="['system:jsha:edit']">修改</el-button>
+                            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                                v-hasPermi="['system:jsha:remove']">删除</el-button>
+                        </template>
+                    </el-table-column> -->
+                </el-table>
+
+                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+                    :limit.sync="queryParams.pageSize" :page-sizes="[20, 40, 60, 80, 100]" @pagination="getList"
+                    style="padding: 10px 0;" />
+            </div>
+
+            <!-- 详细数据表格区域 -->
+            <transition name="slide-fade">
+                <div v-if="selectedRow" class="detail-table-wrapper">
+                    <el-table :data="[selectedRow]" border style="width: 100%">
+                        <el-table-column label="刀翼总数" prop="tzxl01" align="center" min-width="10%" />
+                        <el-table-column label="布齿密度" prop="tzxl02" align="center" min-width="10%" />
+                        <el-table-column label="切削齿尺寸mm" prop="tzxl03" align="center" min-width="10%" />
+                        <el-table-column label="切削齿负前角°" prop="tzxl04" align="center" min-width="10%" />
+                        <el-table-column label="冠部形状" prop="tzxl05" align="center" min-width="10%" />
+                        <el-table-column label="保径" prop="tzxl06" align="center" min-width="10%" />
+                    </el-table>
+                </div>
+            </transition>
+        </div>
+
+        <!-- 添加或修改钻头数据对话框 -->
+        <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body>
+            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+                <div v-loading="formLoading">
+                    <div class="form-section">
+                        <div class="section-title">基础信息</div>
+                        <el-row>
+                            <el-col :span="8">
+                                <el-form-item label="序号" prop="xh">
+                                    <el-input v-model="form.xh" placeholder="请输入序号"
+                                        @input="(val) => handleNumberInput(val, 'xh')" maxlength="3"
+                                        :disabled="isEdit" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="井号" prop="jh">
+                                    <el-input v-model="form.jh" placeholder="请输入井号" :disabled="isEdit" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="尺寸" prop="cc">
+                                    <el-input v-model="form.cc" placeholder="请输入尺寸"
+                                        @input="(val) => handleDecimalInput(val, 'cc')" />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="8">
+                                <el-form-item label="钻进井段自" prop="qsjs">
+                                    <el-input v-model="form.qsjs" placeholder="请输入钻进井段自"
+                                        @input="(val) => handleDecimalInput(val, 'qsjs')" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="钻进井段至" prop="zzjs">
+                                    <el-input v-model="form.zzjs" placeholder="请输入钻进井段至"
+                                        @input="(val) => handleDecimalInput(val, 'zzjs')" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="进尺" prop="jc">
+                                    <el-input v-model="form.jc" placeholder="请输入进尺"
+                                        @input="(val) => handleDecimalInput(val, 'jc')" />
+                                </el-form-item>
+                            </el-col>
+
+                        </el-row>
+                        <el-row>
+
+                            <el-col :span="8">
+                                <el-form-item label="机械钻速" prop="jxzs">
+                                    <el-input v-model="form.jxzs" placeholder="请输入机械钻速"
+                                        @input="(val) => handleDecimalInput(val, 'jxzs')" />
+                                </el-form-item>
+                            </el-col>
+
+                            <el-col :span="8">
+                                <el-form-item label="厂家" prop="cj">
+                                    <el-input v-model="form.cj" placeholder="请输入厂家" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="类型" prop="lx">
+                                    <el-input v-model="form.lx" placeholder="请输入类型" />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="8">
+                                <el-form-item label="入井新度" prop="rjxd">
+                                    <el-input v-model="form.rjxd" placeholder="请输入入井新度"
+                                        @input="(val) => handleDecimalInput(val, 'rjxd')" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="出井新度" prop="cjxd">
+                                    <el-input v-model="form.cjxd" placeholder="请输入出井新度"
+                                        @input="(val) => handleDecimalInput(val, 'cjxd')" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="喷嘴直径1号" prop="pz1">
+                                    <el-input v-model="form.pz1" placeholder="请输入喷嘴直径1号"
+                                        @input="(val) => handleDecimalInput(val, 'pz1')" />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="8">
+                                <el-form-item label="喷嘴直径2号" prop="pz2">
+                                    <el-input v-model="form.pz2" placeholder="请输入喷嘴直径2号"
+                                        @input="(val) => handleDecimalInput(val, 'pz2')" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="喷嘴直径3号" prop="pz3">
+                                    <el-input v-model="form.pz3" placeholder="请输入喷嘴直径3号"
+                                        @input="(val) => handleDecimalInput(val, 'pz3')" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="钻头序列号" prop="ztxlh">
+                                    <el-input v-model="form.ztxlh" placeholder="请输入钻头序列号" />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="8">
+                                <el-form-item label="钻头型号" prop="ztxh">
+                                    <el-input v-model="form.ztxh" placeholder="请输入钻头型号" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="所钻地层" prop="szdc">
+                                    <el-input v-model="form.szdc" placeholder="请输入所钻地层" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="IADC号" prop="iadc">
+                                    <el-input v-model="form.iadc" placeholder="请输入IADC号" />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+
+                            <el-col :span="8">
+                                <el-form-item label="下井次数" prop="xjcs">
+                                    <el-input v-model="form.xjcs" placeholder="请输入下井次数"
+                                        @input="(val) => handleNumberInput(val, 'xjcs')" maxlength="3" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="工作时间合计" prop="jcsjhj">
+                                    <el-input v-model="form.jcsjhj" placeholder="请输入工作时间合计"
+                                        @input="(val) => handleDecimalInput(val, 'jcsjhj')" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="纯钻进时间" prop="jcsjczj">
+                                    <el-input v-model="form.jcsjczj" placeholder="请输入纯钻进时间"
+                                        @input="(val) => handleDecimalInput(val, 'jcsjczj')" />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="8">
+                                <el-form-item label="起下钻时间" prop="jcsjqxz">
+                                    <el-input v-model="form.jcsjqxz" placeholder="请输入起下钻时间"
+                                        @input="(val) => handleDecimalInput(val, 'jcsjqxz')" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="扩划眼时间" prop="jcsjkhy">
+                                    <el-input v-model="form.jcsjkhy" placeholder="请输入扩划眼时间"
+                                        @input="(val) => handleDecimalInput(val, 'jcsjkhy')" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="钻压" prop="zy">
+                                    <el-input v-model="form.zy" placeholder="请输入钻压"
+                                        @input="(val) => handleNumberInput(val, 'zy')" maxlength="3" />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="8">
+                                <el-form-item label="转速" prop="zs">
+                                    <el-input v-model="form.zs" placeholder="请输入转速"
+                                        @input="(val) => handleNumberInput(val, 'zs')" maxlength="3" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="缸径" prop="gj">
+                                    <el-input v-model="form.gj" placeholder="请输入缸径" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="泵速" prop="bs">
+                                    <el-input v-model="form.bs" placeholder="请输入泵速"
+                                        @input="(val) => handleNumberInput(val, 'bs')" maxlength="3" />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="8">
+                                <el-form-item label="排量" prop="pl">
+                                    <el-input v-model="form.pl" placeholder="请输入排量" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="立管泵压" prop="lgby">
+                                    <el-input v-model="form.lgby" placeholder="请输入立管泵压"
+                                        @input="(val) => handleDecimalInput(val, 'lgby')" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="钻头压降" prop="ztyj">
+                                    <el-input v-model="form.ztyj" placeholder="请输入钻头压降"
+                                        @input="(val) => handleDecimalInput(val, 'ztyj')" />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="8">
+                                <el-form-item label="环空压耗" prop="hkyh">
+                                    <el-input v-model="form.hkyh" placeholder="请输入环空压耗"
+                                        @input="(val) => handleDecimalInput(val, 'hkyh')" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="冲击力" prop="cjl">
+                                    <el-input v-model="form.cjl" placeholder="请输入冲击力"
+                                        @input="(val) => handleDecimalInput(val, 'cjl')" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="喷射速度" prop="pssd">
+                                    <el-input v-model="form.pssd" placeholder="请输入喷射速度"
+                                        @input="(val) => handleDecimalInput(val, 'pssd')" />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="8">
+                                <el-form-item label="钻头水功率" prop="ztsgl">
+                                    <el-input v-model="form.ztsgl" placeholder="请输入钻头水功率"
+                                        @input="(val) => handleDecimalInput(val, 'ztsgl')" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="比水功率" prop="bsgl">
+                                    <el-input v-model="form.bsgl" placeholder="请输入比水功率"
+                                        @input="(val) => handleDecimalInput(val, 'bsgl')" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="上返速度钻杆" prop="sfsdzg">
+                                    <el-input v-model="form.sfsdzg" placeholder="请输入上返速度钻杆"
+                                        @input="(val) => handleDecimalInput(val, 'sfsdzg')" />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="8">
+                                <el-form-item label="上返速度钻铤" prop="sfsdzt">
+                                    <el-input v-model="form.sfsdzt" placeholder="请输入上返速度钻铤"
+                                        @input="(val) => handleDecimalInput(val, 'sfsdzt')" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="功率利用率" prop="gllyl">
+                                    <el-input v-model="form.gllyl" placeholder="请输入功率利用率"
+                                        @input="(val) => handleDecimalInput(val, 'gllyl')" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="牙齿磨损" prop="ycmsqk">
+                                    <el-input v-model="form.ycmsqk" placeholder="请输入牙齿磨损" />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="8">
+                                <el-form-item label="轴承磨损" prop="zcmsqk">
+                                    <el-input v-model="form.zcmsqk" placeholder="请输入轴承磨损" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="直径磨损" prop="zjmsqk">
+                                    <el-input v-model="form.zjmsqk" placeholder="请输入直径磨损" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="备注" prop="bz">
+                                    <el-input v-model="form.bz" placeholder="请输入备注" />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="8">
+                                <el-form-item label="内排齿" prop="npc">
+                                    <el-input v-model="form.npc" placeholder="请输入内排齿" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="外排齿" prop="wpc">
+                                    <el-input v-model="form.wpc" placeholder="请输入外排齿" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="磨损特征" prop="mstz">
+                                    <el-input v-model="form.mstz" placeholder="请输入磨损特征" />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="8">
+                                <el-form-item label="位置" prop="wz">
+                                    <el-input v-model="form.wz" placeholder="请输入位置" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="轴承/密封" prop="zc">
+                                    <el-input v-model="form.zc" placeholder="请输入轴承/密封" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="直径" prop="zj">
+                                    <el-input v-model="form.zj" placeholder="请输入直径" />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="8">
+                                <el-form-item label="起钻原因" prop="qzyy">
+                                    <el-input v-model="form.qzyy" placeholder="请输入起钻原因" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="其他特征" prop="qttz">
+                                    <el-input v-model="form.qttz" placeholder="请输入其他特征" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="扭矩" prop="nj">
+                                    <el-input v-model="form.nj" placeholder="请输入扭矩"
+                                        @input="(val) => handleDecimalInput(val, 'nj')" />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="8">
+                                <el-form-item label="钻盘总转数" prop="zpzzs">
+                                    <el-input v-model="form.zpzzs" placeholder="请输入钻盘总转数"
+                                        @input="(val) => handleDecimalInput(val, 'zpzzs')" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="入井日期" prop="qsrq">
+                                    <el-date-picker clearable v-model="form.qsrq" type="date" value-format="yyyy-MM-dd"
+                                        placeholder="请选择入井日期" style="width: 100%;">
+                                    </el-date-picker>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="起出日期" prop="zzrq">
+                                    <el-date-picker clearable v-model="form.zzrq" type="date" value-format="yyyy-MM-dd"
+                                        placeholder="请选择起出日期" style="width: 100%;">
+                                    </el-date-picker>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="8">
+                                <el-form-item label="喷嘴类型" prop="pzlx">
+                                    <el-input v-model="form.pzlx" placeholder="请输入喷嘴类型" />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="钻头价格" prop="ztjg">
+                                    <el-input v-model="form.ztjg" placeholder="请输入钻头价格"
+                                        @input="(val) => handleDecimalInput(val, 'ztjg')" />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </div>
+
+                    <div class="form-section">
+                        <div class="section-title">特征数据</div>
+                        <el-row>
+                            <el-col :span="8">
+                                <el-form-item label="刀翼总数" prop="t01">
+                                    <el-select v-model="form.t01" placeholder="请选择刀翼总数" clearable style="width: 100%">
+                                        <el-option v-for="item in t01Options" :key="item.id"
+                                            :label="`${item.tzxl}(${item.tzdm})`" :value="item.id" />
+                                    </el-select>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="布齿密度" prop="t02">
+                                    <el-select v-model="form.t02" placeholder="请选择布齿密度" clearable style="width: 100%">
+                                        <el-option v-for="item in t02Options" :key="item.id"
+                                            :label="`${item.tzxl}(${item.tzdm})`" :value="item.id" />
+                                    </el-select>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="切削齿尺寸mm" prop="t03">
+                                    <el-select v-model="form.t03" placeholder="请选择切削齿尺寸" clearable style="width: 100%">
+                                        <el-option v-for="item in t03Options" :key="item.id"
+                                            :label="`${item.tzxl}(${item.tzdm})`" :value="item.id" />
+                                    </el-select>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="8">
+                                <el-form-item label="切削齿负前角°" prop="t04">
+                                    <el-select v-model="form.t04" placeholder="请选择切削齿负前角" clearable style="width: 100%">
+                                        <el-option v-for="item in t04Options" :key="item.id"
+                                            :label="`${item.tzxl}(${item.tzdm})`" :value="item.id" />
+                                    </el-select>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="冠部形状" prop="t05">
+                                    <el-select v-model="form.t05" placeholder="请选择冠部形状" clearable style="width: 100%">
+                                        <el-option v-for="item in t05Options" :key="item.id"
+                                            :label="`${item.tzxl}(${item.tzdm})`" :value="item.id" />
+                                    </el-select>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="保径" prop="t06">
+                                    <el-select v-model="form.t06" placeholder="请选择保径" clearable style="width: 100%">
+                                        <el-option v-for="item in t06Options" :key="item.id"
+                                            :label="`${item.tzxl}(${item.tzdm})`" :value="item.id" />
+                                    </el-select>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </div>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { listJsha, getJsha, delJsha, addJsha, updateJsha } from "@/api/system/jsha";
+import { getBlockName, getQkxl } from "@/api/system/jsaa";
+import { listTzsj } from "@/api/system/jsha";
+
+export default {
+    name: "Jsha",
+    props: {
+        jh: {
+            type: String,
+            default: ''
+        },
+        jhs: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            // 区块下拉选项
+            blockOptions: [],
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 钻头数据表格数据
+            jshaList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 是否为编辑操作
+            isEdit: false,
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 20, // 修改回默认每页显示20条
+                qk: null,
+                jh: null,
+                jhs: null,
+                wjrqks: null,
+                wjrqjs: null,
+                ztxlh: null,
+                ztxh: null,
+                iadc: null,
+                xjcs: null,
+                cc: null,
+                lx: null,
+                cj: null,
+                rjxd: null,
+                cjxd: null,
+                pz1: null,
+                pz2: null,
+                pz3: null,
+                pz4: null,
+                pz5: null,
+                pz6: null,
+                pz7: null,
+                pz8: null,
+                pz9: null,
+                pz10: null,
+                qsjs: null,
+                zzjs: null,
+                szdc: null,
+                jc: null,
+                jxzs: null,
+                jcsjhj: null,
+                jcsjczj: null,
+                jcsjqxz: null,
+                jcsjkhy: null,
+                zy: null,
+                zs: null,
+                gj: null,
+                bs: null,
+                pl: null,
+                lgby: null,
+                ztyj: null,
+                hkyh: null,
+                cjl: null,
+                pssd: null,
+                ztsgl: null,
+                bsgl: null,
+                sfsdzg: null,
+                sfsdzt: null,
+                gllyl: null,
+                ycmsqk: null,
+                zcmsqk: null,
+                zjmsqk: null,
+                bz: null,
+                npc: null,
+                wpc: null,
+                mstz: null,
+                wz: null,
+                zc: null,
+                zj: null,
+                qzyy: null,
+                qttz: null,
+                nj: null,
+                zpzzs: null,
+                qsrq: null,
+                zzrq: null,
+                pzlx: null,
+                ztjg: null
+            },
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+                jh: [
+                    { required: true, message: "井号不能为空", trigger: "blur" }
+                ],
+                xh: [
+                    { required: true, message: "序号不能为空", trigger: "blur" }
+                ],
+                cc: [
+                    { required: true, message: "尺寸不能为空", trigger: "blur" }
+                ],
+                qsjs: [
+                    { required: true, message: "钻进井段自不能为空", trigger: "blur" }
+                ],
+                zzjs: [
+                    { required: true, message: "钻进井段至不能为空", trigger: "blur" }
+                ],
+                jc: [
+                    { required: true, message: "进尺不能为空", trigger: "blur" }
+                ],
+                jxzs: [
+                    { required: true, message: "机械钻速不能为空", trigger: "blur" }
+                ]
+            },
+            selectedRow: null, // 当前选中的行数据
+            tableHeight: null,
+            // 特征数据选项
+            t01Options: [],
+            t02Options: [],
+            t03Options: [],
+            t04Options: [],
+            t05Options: [],
+            t06Options: [],
+            formLoading: false, // 新增表单loading
+        };
+    },
+    computed: {
+        filteredBlockOptions() {
+            return this.blockOptions.filter(item => item && item.qk);
+        }
+    },
+    watch: {
+        jh: {
+            handler(newJh) {
+                if (newJh) {
+                    this.queryParams.jh = newJh;
+                    this.getList();
+                }
+            },
+            immediate: true
+        },
+        selectedRow: {
+            handler(val) {
+                this.$nextTick(() => {
+                    const containerElement = document.querySelector('.app-container');
+                    const searchElement = document.querySelector('.search-wrapper');
+
+                    // 检查元素是否存在
+                    if (!containerElement || !searchElement) {
+                        return;
+                    }
+
+                    const containerHeight = containerElement.offsetHeight;
+                    const searchHeight = searchElement.offsetHeight;
+                    const paginationHeight = 50; // 分页器高度
+
+                    if (val) {
+                        // 选中行时，减去详情表格高度
+                        this.tableHeight = containerHeight - searchHeight - paginationHeight - 50;
+                    } else {
+                        // 未选中行时，使用全部可用空间
+                        this.tableHeight = containerHeight - searchHeight - paginationHeight;
+                    }
+                });
+            },
+            immediate: true
+        }
+    },
+    mounted() {
+        // 初始化表格高度
+        this.$nextTick(() => {
+            const containerElement = document.querySelector('.app-container');
+            const searchElement = document.querySelector('.search-wrapper');
+
+            // 检查元素是否存在
+            if (!containerElement || !searchElement) {
+                return;
+            }
+
+            const containerHeight = containerElement.offsetHeight;
+            const searchHeight = searchElement.offsetHeight;
+            const paginationHeight = 50;
+            this.tableHeight = containerHeight - searchHeight - paginationHeight;
+        });
+
+        // 添加窗口大小改变事件监听
+        window.addEventListener('resize', this.updateTableHeight);
+    },
+    beforeDestroy() {
+        // 移除事件监听
+        window.removeEventListener('resize', this.updateTableHeight);
+    },
+    created() {
+        // 如果传入了jh参数，设置到查询参数中
+        if (this.jh) {
+            this.queryParams.jh = this.jh;
+        }
+        // 如果传入了jhs参数，设置到查询参数中
+        if (this.jhs) {
+            this.queryParams.jhs = this.jhs;
+        }
+        // 只加载选项，不自动加载数据
+        // this.getList();
+        this.getBlockOptions();
+        this.getFeatureOptions();
+    },
+    methods: {
+        /** 获取区块下拉选项 */
+        getBlockOptions() {
+            getQkxl().then(response => {
+                this.blockOptions = response.data || [];
+            });
+        },
+        /** 获取特征数据选项 */
+        getFeatureOptions() {
+            const featureTypes = [
+                { type: "刀翼总数", target: "t01Options" },
+                { type: "布齿密度", target: "t02Options" },
+                { type: "切削齿尺寸mm", target: "t03Options" },
+                { type: "切削齿负前角°", target: "t04Options" },
+                { type: "冠部形状", target: "t05Options" },
+                { type: "保径", target: "t06Options" }
+            ];
+
+            const promises = featureTypes.map(feature =>
+                listTzsj({ tzdl: feature.type }).then(response => ({
+                    target: feature.target,
+                    data: response.rows
+                }))
+            );
+
+            Promise.all(promises)
+                .then(results => {
+                    results.forEach(result => {
+                        this[result.target] = result.data;
+                    });
+                })
+                .catch(error => {
+                    console.error('获取特征数据选项失败:', error);
+                    this.$modal.msgError("获取特征数据选项失败");
+                });
+        },
+        /** 查询钻头数据列表 */
+        getList() {
+            this.loading = true;
+            const params = {
+                jhs: `${this.jh},${this.jhs}`
+            }
+            console.log(params, 'params');
+            listJsha(params).then(response => {
+                this.jshaList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+
+
+        // 取消按钮
+        cancel() {
+            this.formLoading = false;
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.formLoading = false;
+            this.form = {
+                jh: null,
+                xh: null,
+                ztxlh: null,
+                ztxh: null,
+                iadc: null,
+                xjcs: null,
+                cc: null,
+                lx: null,
+                cj: null,
+                rjxd: null,
+                cjxd: null,
+                pz1: null,
+                pz2: null,
+                pz3: null,
+                pz4: null,
+                pz5: null,
+                pz6: null,
+                pz7: null,
+                pz8: null,
+                pz9: null,
+                pz10: null,
+                qsjs: null,
+                zzjs: null,
+                szdc: null,
+                jc: null,
+                jxzs: null,
+                jcsjhj: null,
+                jcsjczj: null,
+                jcsjqxz: null,
+                jcsjkhy: null,
+                zy: null,
+                zs: null,
+                gj: null,
+                bs: null,
+                pl: null,
+                lgby: null,
+                ztyj: null,
+                hkyh: null,
+                cjl: null,
+                pssd: null,
+                ztsgl: null,
+                bsgl: null,
+                sfsdzg: null,
+                sfsdzt: null,
+                gllyl: null,
+                ycmsqk: null,
+                zcmsqk: null,
+                zjmsqk: null,
+                bz: null,
+                npc: null,
+                wpc: null,
+                mstz: null,
+                wz: null,
+                zc: null,
+                zj: null,
+                qzyy: null,
+                qttz: null,
+                nj: null,
+                zpzzs: null,
+                qsrq: null,
+                zzrq: null,
+                pzlx: null,
+                ztjg: null
+            };
+            this.resetForm("form");
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.queryParams.wjrqks = '';
+            this.queryParams.wjrqjs = '';
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map(item => item.jh)
+            this.single = selection.length !== 1
+            this.multiple = !selection.length
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.isEdit = false;
+            this.open = true;
+            this.title = "添加钻头数据";
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            this.isEdit = true;
+            const query = {
+                jh: row.jh,
+                xh: row.xh
+            }
+            getJsha(query).then(response => {
+                this.form = response.data;
+                this.open = true;
+                this.title = "修改钻头数据";
+            });
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.formLoading = true;
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    if (this.isEdit) {
+                        updateJsha(this.form).then(response => {
+                            this.$modal.msgSuccess("修改成功");
+                            this.open = false;
+                            this.getList();
+                        }).finally(() => {
+                            this.formLoading = false;
+                        });
+                    } else {
+                        addJsha(this.form).then(response => {
+                            this.$modal.msgSuccess("新增成功");
+                            this.open = false;
+                            this.getList();
+                        }).finally(() => {
+                            this.formLoading = false;
+                        });
+                    }
+                } else {
+                    this.formLoading = false;
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const query = {
+                jh: row.jh,
+                xh: row.xh
+            };
+            this.$modal.confirm('是否确认删除钻头数据编号为"' + row.jh + '"的数据项？').then(function () {
+                return delJsha(query);
+            }).then(() => {
+                this.getList();
+                this.$modal.msgSuccess("删除成功");
+            }).catch(() => { });
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            this.download('system/jshaPdc/export', {
+                ...this.queryParams
+            }, `jsha_${new Date().getTime()}.xlsx`)
+        },
+
+        /** 处理行点击 */
+        async handleRowClick(row, column) {
+            // 如果点击的是操作列，不执行任何操作
+            if (column && column.property === 'operation') {
+                return;
+            }
+
+            try {
+                const query = {
+                    jh: row.jh,
+                    xh: row.xh
+                }
+                const res = await getJsha(query);
+                this.selectedRow = res.data;
+            } catch (error) {
+                console.error('获取详细数据失败:', error);
+                this.selectedRow = null;
+            }
+        },
+        updateTableHeight() {
+            this.$nextTick(() => {
+                const containerElement = document.querySelector('.app-container');
+                const searchElement = document.querySelector('.search-wrapper');
+
+                // 检查元素是否存在
+                if (!containerElement || !searchElement) {
+                    return;
+                }
+
+                const containerHeight = containerElement.offsetHeight;
+                const searchHeight = searchElement.offsetHeight;
+                const paginationHeight = 50;
+
+                if (this.selectedRow) {
+                    this.tableHeight = containerHeight - searchHeight - paginationHeight - 120;
+                } else {
+                    this.tableHeight = containerHeight - searchHeight - paginationHeight;
+                }
+            });
+        },
+        /** 限制只能输入三位数字 */
+        handleNumberInput(value, key) {
+            // 如果值为空，直接返回
+            if (value === '') {
+                this.form[key] = '';
+                return;
+            }
+            // 移除非数字字符
+            value = value.toString().replace(/[^\d]/g, '');
+            // 限制长度为3位
+            if (value.length > 3) {
+                value = value.slice(0, 3);
+            }
+            // 更新表单数据
+            this.form[key] = value;
+        },
+
+        /** 限制只能输入数字且保留两位小数 */
+        handleDecimalInput(value, key) {
+            // 如果值为空，直接返回
+            if (value === '') {
+                this.form[key] = '';
+                return;
+            }
+            // 只允许输入数字和小数点
+            value = value.toString().replace(/[^\d.]/g, '');
+            // 保证只有一个小数点
+            const parts = value.split('.');
+            if (parts.length > 2) {
+                value = parts[0] + '.' + parts.slice(1).join('');
+            }
+            // 限制小数点后两位
+            if (parts.length === 2 && parts[1].length > 2) {
+                value = parts[0] + '.' + parts[1].slice(0, 2);
+            }
+            // 更新表单数据
+            this.form[key] = value;
+        },
+        /**
+         * 外部调用：加载数据
+         */
+        loadData() {
+            this.getList();
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+    height: calc(100vh - 160px);
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+.search-wrapper {
+    flex: none;
+
+}
+
+.table-container {
+    flex: 1;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.main-table-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    transition: all 0.3s ease;
+    overflow: hidden;
+}
+
+.detail-table-wrapper {
+    height: 75px;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background: #fff;
+    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    z-index: 1;
+}
+
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+    transition: all 0.3s ease;
+}
+
+.slide-fade-enter,
+.slide-fade-leave-to {
+    transform: translateY(120px);
+    opacity: 0;
+}
+
+::v-deep .el-table {
+    flex: 1;
+}
+
+::v-deep .el-table__body-wrapper {
+    overflow-y: auto;
+}
+
+::v-deep .el-table__cell>.cell {
+    font-weight: normal;
+}
+
+::v-deep .el-table--medium .el-table__cell {
+    padding: 5px 0 !important;
+}
+
+::v-deep.pagination-container {
+    padding: 0px !important;
+    margin: 0;
+}
+
+.form-section {
+    margin-bottom: 20px;
+
+    .section-title {
+        font-size: 16px;
+        font-weight: bold;
+        margin-bottom: 15px;
+        padding-left: 10px;
+        border-left: 3px solid #409EFF;
+    }
+}
+
+::v-deep .el-form-item {
+    margin-bottom: 18px;
+    padding-right: 20px;
+}
+
+::v-deep .el-form-item {
+    margin-bottom: 10px !important;
+}
+</style>

src/views/efficiencyAnalysis/djxx/detail/components/DataTable.vue

@@ -847,7 +847,7 @@ export default {
         getList() {
         getList() {
             this.loading = true;
             this.loading = true;
             const params = {
             const params = {
-                jhs: this.jhs
+                jhs: `${this.jh},${this.jhs}`
             }
             }
             console.log(params, 'params');
             console.log(params, 'params');
             listJsha(params).then(response => {
             listJsha(params).then(response => {

src/views/efficiencyAnalysis/djxx/detail/components/HistogramGraph copy.vue

+<template>
+    <div class="chart-container" v-loading="loading">
+        <div id="mainzftdj" class="chart" ref="chartRef"></div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import { getdjZft } from "@/api/optimization/initialization";
+
+export default {
+    name: "HistogramGraph",
+    props: {
+        jh: {
+            type: String,
+            default: "",
+        },
+        jhs: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {
+            mockData: {},
+            myChart: null,
+            initRetryCount: 0,
+            maxRetryCount: 5,
+            resizeObserver: null,
+            loading: false // 新增loading状态
+        };
+    },
+    mounted() {
+        // this.$nextTick(() => {
+        //     setTimeout(() => {
+        //         this.initChart();
+        //         this.observeParentResize();
+        //     }, 800);
+        // });
+        // window.addEventListener("resize", this.handleResize);
+    },
+    beforeDestroy() {
+        window.removeEventListener("resize", this.handleResize);
+        if (this.myChart) {
+            this.myChart.dispose();
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    },
+    methods: {
+        /**
+         * 外部调用：加载数据并渲染
+         */
+        loadData() {
+            this.loading = true;
+            this.$nextTick(() => {
+                setTimeout(() => {
+                    this.initChart();
+                    this.observeParentResize();
+                }, 800);
+            });
+            window.addEventListener("resize", this.handleResize);
+        },
+        observeParentResize() {
+            const parentDom = this.$refs.chartRef?.parentElement;
+            if (parentDom && window.ResizeObserver) {
+                this.resizeObserver = new ResizeObserver(() => {
+                    if (this.myChart) {
+                        this.myChart.resize();
+                    }
+                });
+                this.resizeObserver.observe(parentDom);
+            }
+        },
+
+        async getList() {
+            try {
+                const res = await getdjZft({
+                    jhs: `${this.jh},${this.jhs}`
+                });
+                this.mockData = res?.mockData || {};
+                return this.mockData;
+            } catch (error) {
+                console.error("获取数据失败:", error);
+                return {};
+            }
+        },
+
+        async initChart() {
+            this.loading = true;
+            const chartDom = this.$refs.chartRef;
+            if (!chartDom) {
+                console.error("未找到图表容器 DOM");
+                this.loading = false;
+                return;
+            }
+
+            // 获取视口尺寸
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+
+            // 计算可用空间（减去导航栏等固定元素的高度）
+            const availableHeight = viewportHeight - 120; // 减去导航栏等高度
+            const availableWidth = viewportWidth - 80; // 减去左右边距，增加边距
+
+            // 设置图表容器尺寸
+            chartDom.style.width = `${availableWidth}px`;
+            chartDom.style.height = `${availableHeight}px`;
+
+            // 强制重排
+            chartDom.offsetHeight;
+
+            // 重试机制
+            if ((availableWidth <= 0 || availableHeight <= 0) && this.initRetryCount < this.maxRetryCount) {
+                this.initRetryCount++;
+                setTimeout(() => this.initChart(), 500);
+                return;
+            }
+
+            this.initRetryCount = 0;
+            if (this.myChart) {
+                this.myChart.dispose();
+            }
+            this.myChart = echarts.init(chartDom);
+
+            const mockData = await this.getList();
+            if (!mockData || !mockData.wellData || !mockData.wellData.depthLine.length) {
+                this.renderEmpty(chartDom);
+                this.loading = false;
+                return;
+            }
+
+            await this.renderRealData(chartDom, mockData);
+            this.loading = false;
+        },
+
+        handleResize() {
+            this.debounce(() => {
+                if (this.myChart) {
+                    // 重新计算尺寸
+                    const viewportHeight = window.innerHeight;
+                    const viewportWidth = window.innerWidth;
+                    const availableHeight = viewportHeight - 120;
+                    const availableWidth = viewportWidth - 80;
+
+                    const chartDom = this.$refs.chartRef;
+                    if (chartDom) {
+                        chartDom.style.width = `${availableWidth}px`;
+                        chartDom.style.height = `${availableHeight}px`;
+                    }
+
+                    this.myChart.resize();
+                }
+            }, 200)();
+        },
+
+        async renderRealData(chartDom, mockData) {
+            const { wellData } = mockData;
+            const xAxisLabels = wellData.depthLine.map((point) => point.x);
+            const areaSeries = await Promise.all(
+                wellData.stackedAreas
+                    .filter(area => area.svg !== null)
+                    .map(async (area) => {
+                        let areaStyle = { opacity: 0.8 };
+                        if (area.svg) {
+                            try {
+                                const svgImage = await this.createSvgImage(area.svg);
+                                areaStyle.color = { image: svgImage, repeat: "repeat" };
+                            } catch (error) {
+                                console.error('SVG转换失败:', error);
+                            }
+                        }
+                        return {
+                            name: area.name,
+                            type: "line",
+                            xAxisIndex: 1,
+                            z: -1,
+                            stack: "总量",
+                            symbol: "none",
+                            showSymbol: false,
+                            areaStyle: areaStyle,
+                            lineStyle: { width: 0 },
+                            data: area.points.map((point) => point.y),
+                        };
+                    })
+            );
+
+            const option = {
+                title: { text: "", subtext: "" },
+                aria: {
+                    enabled: false,
+                },
+                tooltip: {
+                    trigger: "axis",
+                    axisPointer: { type: "cross", label: { backgroundColor: "#6a7985" } },
+                },
+                grid: {
+                    top: 80,
+                    left: "8%",
+                    right: "8%",
+                    bottom: "8%",
+                    containLabel: true,
+                    show: false,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: true,
+                        position: "top",
+                        data: xAxisLabels,
+                        axisLabel: { interval: 0, rotate: 90, margin: 8, align: "left", fontSize: 12 },
+                        axisTick: { alignWithLabel: true, length: 5 },
+                        splitLine: { show: false },
+                        axisLine: { show: true }
+                    },
+                    { type: "category", boundaryGap: false, position: "top", show: false, data: xAxisLabels },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "井深(m)",
+                        min: mockData.chartConfig.yAxis.min,
+                        max: mockData.chartConfig.yAxis.max,
+                        interval: mockData.chartConfig.yAxis.interval,
+                        inverse: true,
+                        axisLabel: { formatter: "{value}", fontSize: 12 },
+                        splitLine: { show: false },
+                        axisLine: { show: true },
+                        axisTick: { show: false }
+                    },
+                    {
+                        type: "value",
+                        name: "深度(m)",
+                        min: mockData.chartConfig.yAxis2.min,
+                        max: mockData.chartConfig.yAxis2.max,
+                        interval: mockData.chartConfig.yAxis2.interval,
+                        position: "right",
+                        axisLabel: { formatter: "{value}", fontSize: 12 },
+                        splitLine: { show: false },
+                        axisLine: { show: true },
+                        axisTick: { show: false }
+                    },
+                ],
+                series: [
+                    {
+                        name: "井深数据",
+                        type: "line",
+                        yAxisIndex: 1,
+                        symbol: "circle",
+                        symbolSize: 8,
+                        itemStyle: { color: "#ff0000" },
+                        lineStyle: { color: "#00ff00" },
+                        label: {
+                            show: true,
+                            position: "top",
+                            formatter: "{c}",
+                            fontSize: 12,
+                            color: "#ff0000",
+                            backgroundColor: "rgba(255,255,255,0.8)",
+                            padding: [2, 4],
+                            borderRadius: 2
+                        },
+                        data: wellData.depthLine.map((point) => point.y),
+                    },
+                    {
+                        name: "占位",
+                        type: "bar",
+                        stack: "total",
+                        silent: true,
+                        barWidth: "13%",
+                        itemStyle: { borderColor: "transparent", color: "transparent" },
+                        emphasis: { itemStyle: { borderColor: "transparent", color: "transparent" } },
+                        data: wellData.depthIntervals.map((item) => item.placeholder),
+                    },
+                    {
+                        name: "深度区间",
+                        type: "bar",
+                        stack: "total",
+                        barWidth: "20%",
+                        label: {
+                            show: true,
+                            position: (params) => params.data <= 200 ? "top" : "inside",
+                            color: "#03df6d",
+                            backgroundColor: "rgba(255,255,255,0.8)",
+                            padding: [2, 4],
+                            borderRadius: 2
+                        },
+                        itemStyle: { color: "#00aafe" },
+                        data: wellData.depthIntervals.map((item) => item.interval),
+                    },
+                    ...areaSeries,
+                ],
+            };
+
+            this.myChart.setOption(option);
+            // 确保图表完全渲染后再resize
+            this.$nextTick(() => {
+                this.myChart.resize();
+            });
+        },
+
+        renderEmpty(chartDom) {
+            chartDom.innerHTML = '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#999;">暂无数据</div>';
+        },
+
+        debounce(fn, delay) {
+            let timer = null;
+            return function () {
+                if (timer) clearTimeout(timer);
+                timer = setTimeout(() => fn.apply(this, arguments), delay);
+            };
+        },
+
+        createSvgImage(svgString) {
+            return new Promise((resolve, reject) => {
+                const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
+                const svgUrl = URL.createObjectURL(svgBlob);
+                const img = new Image();
+                img.onload = () => {
+                    URL.revokeObjectURL(svgUrl);
+                    resolve(img);
+                };
+                img.onerror = (e) => {
+                    URL.revokeObjectURL(svgUrl);
+                    reject(e);
+                };
+                img.src = svgUrl;
+            });
+        }
+    },
+};
+</script>
+
+<style scoped>
+/* 确保容器占满可用空间 */
+.chart-container {
+    width: 100%;
+    height: 100vh;
+    padding: 0 20px;
+    margin: 0;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+}
+
+/* 图表容器样式 - 占满整个容器 */
+.chart {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    min-height: 400px;
+    display: block;
+}
+</style>
\ No newline at end of file

src/views/efficiencyAnalysis/djxx/detail/components/HistogramGraph.vue

 <template>
 <template>
-    <div class="chart-container" v-loading="loading">
+    <div class="chart-container">
         <div id="mainzftdj" class="chart" ref="chartRef"></div>
         <div id="mainzftdj" class="chart" ref="chartRef"></div>
+        <div v-if="loading" class="loading-overlay">
+            <div class="loading-spinner"></div>
+            <span>加载中...</span>
+        </div>
     </div>
     </div>
 </template>
 </template>
 
 
 <script>
 <script>
 import * as echarts from "echarts";
 import * as echarts from "echarts";
 import { getdjZft } from "@/api/optimization/initialization";
 import { getdjZft } from "@/api/optimization/initialization";
+import { text } from "d3";
 
 
 export default {
 export default {
     name: "HistogramGraph",
     name: "HistogramGraph",
@@ -18,6 +23,12 @@ export default {
         jhs: {
         jhs: {
             type: String,
             type: String,
             default: ''
             default: ''
+        },
+        // 美化配置选项
+        theme: {
+            type: String,
+            default: "modern", // modern, elegant, vibrant
+            validator: value => ["modern", "elegant", "vibrant"].includes(value)
         }
         }
     },
     },
     data() {
     data() {
@@ -27,140 +38,316 @@ export default {
             initRetryCount: 0,
             initRetryCount: 0,
             maxRetryCount: 5,
             maxRetryCount: 5,
             resizeObserver: null,
             resizeObserver: null,
-            loading: false // 新增loading状态
+            loading: false,
+            debounceTimer: null,
         };
         };
     },
     },
+    computed: {
+        // 根据主题获取颜色配置
+        colorScheme() {
+            const schemes = {
+                modern: {
+                    primary: "#3B82F6",
+                    secondary: "#10B981",
+                    accent: "#F59E0B",
+                    background: "#F8FAFC",
+                    text: "#1F2937",
+                    border: "#E5E7EB",
+                    gradient: {
+                        start: "#3B82F6",
+                        end: "#1D4ED8"
+                    }
+                },
+                elegant: {
+                    primary: "#6366F1",
+                    secondary: "#8B5CF6",
+                    accent: "#EC4899",
+                    background: "#FAFAFA",
+                    text: "#374151",
+                    border: "#D1D5DB",
+                    gradient: {
+                        start: "#6366F1",
+                        end: "#4F46E5"
+                    }
+                },
+                vibrant: {
+                    primary: "#EF4444",
+                    secondary: "#06B6D4",
+                    accent: "#F97316",
+                    background: "#FEFEFE",
+                    text: "#111827",
+                    border: "#F3F4F6",
+                    gradient: {
+                        start: "#EF4444",
+                        end: "#DC2626"
+                    }
+                }
+            };
+            return schemes[this.theme];
+        }
+    },
+    watch: {
+        jh: {
+            handler(newVal) {
+                if (newVal) {
+                    this.refreshChart();
+                }
+            },
+            immediate: true
+        }
+    },
     mounted() {
     mounted() {
-        // this.$nextTick(() => {
-        //     setTimeout(() => {
-        //         this.initChart();
-        //         this.observeParentResize();
-        //     }, 800);
-        // });
-        // window.addEventListener("resize", this.handleResize);
+        this.initChart();
+        this.setupEventListeners();
     },
     },
     beforeDestroy() {
     beforeDestroy() {
-        window.removeEventListener("resize", this.handleResize);
-        if (this.myChart) {
-            this.myChart.dispose();
-        }
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
+        this.cleanup();
     },
     },
     methods: {
     methods: {
-        /**
-         * 外部调用：加载数据并渲染
-         */
-        loadData() {
-            this.loading = true;
-            this.$nextTick(() => {
-                setTimeout(() => {
-                    this.initChart();
-                    this.observeParentResize();
-                }, 800);
+        // 初始化图表
+        async initChart() {
+            try {
+                this.loading = true;
+
+                const chartDom = this.$refs.chartRef;
+                if (!chartDom) {
+                    throw new Error("未找到图表容器 DOM");
+                }
+
+                this.setChartDimensions(chartDom);
+
+                // 重试机制优化
+                if (this.shouldRetry()) {
+                    this.scheduleRetry();
+                    return;
+                }
+
+                this.resetRetryCount();
+                this.disposeChart();
+                this.createChart(chartDom);
+
+                const mockData = await this.getList();
+                if (!this.hasValidData(mockData)) {
+                    this.renderEmpty(chartDom);
+                    return;
+                }
+
+                await this.renderRealData(mockData);
+
+            } catch (error) {
+                console.error("图表初始化失败:", error);
+                this.handleError(error);
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        // 设置图表尺寸
+        setChartDimensions(chartDom) {
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const availableHeight = viewportHeight - 120;
+            const availableWidth = viewportWidth - 80;
+
+            chartDom.style.width = `${availableWidth}px`;
+            chartDom.style.height = `${availableHeight}px`;
+            chartDom.offsetHeight; // 强制重排
+        },
+
+        // 检查是否需要重试
+        shouldRetry() {
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const availableHeight = viewportHeight - 120;
+            const availableWidth = viewportWidth - 80;
+            return (availableWidth <= 0 || availableHeight <= 0) && this.initRetryCount < this.maxRetryCount;
+        },
+
+        // 安排重试
+        scheduleRetry() {
+            this.initRetryCount++;
+            setTimeout(() => this.initChart(), 500);
+        },
+
+        // 重置重试计数
+        resetRetryCount() {
+            this.initRetryCount = 0;
+        },
+
+        // 销毁图表
+        disposeChart() {
+            if (this.myChart) {
+                this.myChart.dispose();
+            }
+        },
+
+        // 创建图表实例
+        createChart(chartDom) {
+            this.myChart = echarts.init(chartDom, null, {
+                renderer: 'canvas',
+                useDirtyRect: true
             });
             });
+        },
+
+        // 检查数据有效性
+        hasValidData(mockData) {
+            return mockData &&
+                mockData.wellData &&
+                mockData.wellData.depthLine &&
+                mockData.wellData.depthLine.length > 0;
+        },
+
+        // 设置事件监听器
+        setupEventListeners() {
             window.addEventListener("resize", this.handleResize);
             window.addEventListener("resize", this.handleResize);
+            this.observeParentResize();
         },
         },
+
+        // 清理资源
+        cleanup() {
+            window.removeEventListener("resize", this.handleResize);
+            if (this.myChart) {
+                this.myChart.dispose();
+            }
+            if (this.resizeObserver) {
+                this.resizeObserver.disconnect();
+            }
+            if (this.debounceTimer) {
+                clearTimeout(this.debounceTimer);
+            }
+        },
+
+        // 观察父容器大小变化
         observeParentResize() {
         observeParentResize() {
             const parentDom = this.$refs.chartRef?.parentElement;
             const parentDom = this.$refs.chartRef?.parentElement;
             if (parentDom && window.ResizeObserver) {
             if (parentDom && window.ResizeObserver) {
                 this.resizeObserver = new ResizeObserver(() => {
                 this.resizeObserver = new ResizeObserver(() => {
-                    if (this.myChart) {
-                        this.myChart.resize();
-                    }
+                    this.debouncedResize();
                 });
                 });
                 this.resizeObserver.observe(parentDom);
                 this.resizeObserver.observe(parentDom);
             }
             }
         },
         },
 
 
+        // 获取数据
         async getList() {
         async getList() {
             try {
             try {
-                const res = await getdjZft({ jhs: this.jhs });
+                const res = await getdjZft({
+                    jhs: `${this.jh},${this.jhs}`
+                });
                 this.mockData = res?.mockData || {};
                 this.mockData = res?.mockData || {};
                 return this.mockData;
                 return this.mockData;
             } catch (error) {
             } catch (error) {
                 console.error("获取数据失败:", error);
                 console.error("获取数据失败:", error);
-                return {};
+                throw error;
             }
             }
         },
         },
 
 
-        async initChart() {
-            this.loading = true;
-            const chartDom = this.$refs.chartRef;
-            if (!chartDom) {
-                console.error("未找到图表容器 DOM");
-                this.loading = false;
-                return;
-            }
-
-            // 获取视口尺寸
-            const viewportWidth = window.innerWidth;
-            const viewportHeight = window.innerHeight;
-
-            // 计算可用空间（减去导航栏等固定元素的高度）
-            const availableHeight = viewportHeight - 120; // 减去导航栏等高度
-            const availableWidth = viewportWidth - 80; // 减去左右边距，增加边距
-
-            // 设置图表容器尺寸
-            chartDom.style.width = `${availableWidth}px`;
-            chartDom.style.height = `${availableHeight}px`;
-
-            // 强制重排
-            chartDom.offsetHeight;
+        // 处理窗口大小变化
+        handleResize() {
+            this.debouncedResize();
+        },
 
 
-            // 重试机制
-            if ((availableWidth <= 0 || availableHeight <= 0) && this.initRetryCount < this.maxRetryCount) {
-                this.initRetryCount++;
-                setTimeout(() => this.initChart(), 500);
-                return;
+        // 防抖处理resize
+        debouncedResize() {
+            if (this.debounceTimer) {
+                clearTimeout(this.debounceTimer);
             }
             }
+            this.debounceTimer = setTimeout(() => {
+                this.performResize();
+            }, 200);
+        },
 
 
-            this.initRetryCount = 0;
+        // 执行resize操作
+        performResize() {
             if (this.myChart) {
             if (this.myChart) {
-                this.myChart.dispose();
+                const chartDom = this.$refs.chartRef;
+                if (chartDom) {
+                    this.setChartDimensions(chartDom);
+                }
+                this.myChart.resize();
             }
             }
-            this.myChart = echarts.init(chartDom);
+        },
 
 
-            const mockData = await this.getList();
-            if (!mockData || !mockData.wellData || !mockData.wellData.depthLine.length) {
-                this.renderEmpty(chartDom);
-                this.loading = false;
-                return;
+        // 刷新图表
+        async refreshChart() {
+            if (this.myChart) {
+                await this.initChart();
             }
             }
-
-            await this.renderRealData(chartDom, mockData);
-            this.loading = false;
         },
         },
 
 
-        handleResize() {
-            this.debounce(() => {
-                if (this.myChart) {
-                    // 重新计算尺寸
-                    const viewportHeight = window.innerHeight;
-                    const viewportWidth = window.innerWidth;
-                    const availableHeight = viewportHeight - 120;
-                    const availableWidth = viewportWidth - 80;
-
-                    const chartDom = this.$refs.chartRef;
-                    if (chartDom) {
-                        chartDom.style.width = `${availableWidth}px`;
-                        chartDom.style.height = `${availableHeight}px`;
-                    }
+        // 渲染真实数据
+        async renderRealData(mockData) {
+            try {
+                const { wellData } = mockData;
+                const xAxisLabels = wellData.depthLine.map((point) => point.x);
+
+                // 优化区域系列处理
+                const areaSeries = await this.processAreaSeries(wellData.stackedAreas);
+
+                const option = {
+                    ...this.getDefaultChartOption(),
+                    xAxis: this.createXAxis(xAxisLabels),
+                    yAxis: this.createYAxis(mockData.chartConfig),
+                    series: this.createSeries(wellData, areaSeries)
+                };
+
+                this.myChart.setOption(option, true);
 
 
+                // 确保图表完全渲染后再resize
+                this.$nextTick(() => {
                     this.myChart.resize();
                     this.myChart.resize();
+                });
+
+            } catch (error) {
+                console.error("渲染数据失败:", error);
+                this.handleError(error);
+            }
+        },
+
+        // 获取默认图表配置
+        getDefaultChartOption() {
+            const colors = this.colorScheme;
+            return {
+                title: { text: "", subtext: "" },
+                aria: { enabled: false },
+                backgroundColor: colors.background,
+                tooltip: {
+                    trigger: "axis",
+                    axisPointer: {
+                        type: "cross",
+                        label: { backgroundColor: colors.primary },
+                        crossStyle: { color: colors.border }
+                    },
+                    backgroundColor: 'rgba(255,255,255,0.95)',
+                    borderColor: colors.border,
+                    borderWidth: 1,
+                    textStyle: { color: colors.text },
+                    extraCssText: 'box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 8px;'
+                },
+                grid: {
+                    top: 10,
+                    left: "4%",
+                    right: "3%",
+                    bottom: "6%",
+                    containLabel: true,
+                    show: false,
+                },
+                animation: true,
+                animationDuration: 1500,
+                animationEasing: 'cubicOut',
+                animationDelay: function (idx) {
+                    return idx * 100;
                 }
                 }
-            }, 200)();
+            };
         },
         },
 
 
-        async renderRealData(chartDom, mockData) {
-            const { wellData } = mockData;
-            const xAxisLabels = wellData.depthLine.map((point) => point.x);
-            const areaSeries = await Promise.all(
-                wellData.stackedAreas
+        // 处理区域系列
+        async processAreaSeries(stackedAreas) {
+            return await Promise.all(
+                stackedAreas
                     .filter(area => area.svg !== null)
                     .filter(area => area.svg !== null)
                     .map(async (area) => {
                     .map(async (area) => {
-                        let areaStyle = { opacity: 0.8 };
+                        let areaStyle = { opacity: 0.6 };
                         if (area.svg) {
                         if (area.svg) {
                             try {
                             try {
                                 const svgImage = await this.createSvgImage(area.svg);
                                 const svgImage = await this.createSvgImage(area.svg);
@@ -183,133 +370,303 @@ export default {
                         };
                         };
                     })
                     })
             );
             );
+        },
 
 
-            const option = {
-                title: { text: "", subtext: "" },
-                aria: {
-                    enabled: false,
-                },
-                tooltip: {
-                    trigger: "axis",
-                    axisPointer: { type: "cross", label: { backgroundColor: "#6a7985" } },
+        // 创建X轴配置
+        createXAxis(xAxisLabels) {
+            const colors = this.colorScheme;
+            return [
+                {
+                    type: "category",
+                    boundaryGap: true,
+                    position: "top",
+                    data: xAxisLabels,
+                    axisLabel: {
+                        interval: 0,
+                        rotate: 0,
+                        margin: 12,
+                        align: "center",
+                        fontSize: 13,
+                        color: colors.text,
+                        fontWeight: 500
+                    },
+                    axisTick: {
+                        alignWithLabel: true,
+                        length: 6,
+                        lineStyle: { color: colors.border }
+                    },
+                    splitLine: { show: false },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: colors.border,
+                            width: 2
+                        }
+                    }
                 },
                 },
-                grid: {
-                    top: 80,
-                    left: "8%",
-                    right: "8%",
-                    bottom: "8%",
-                    containLabel: true,
+                {
+                    type: "category",
+                    boundaryGap: false,
+                    position: "top",
                     show: false,
                     show: false,
+                    data: xAxisLabels
                 },
                 },
-                xAxis: [
-                    {
-                        type: "category",
-                        boundaryGap: true,
-                        position: "top",
-                        data: xAxisLabels,
-                        axisLabel: { interval: 0, rotate: 90, margin: 8, align: "left", fontSize: 12 },
-                        axisTick: { alignWithLabel: true, length: 5 },
-                        splitLine: { show: false },
-                        axisLine: { show: true }
+            ];
+        },
+
+        // 创建Y轴配置
+        createYAxis(chartConfig) {
+            const colors = this.colorScheme;
+            return [
+                {
+                    type: "value",
+                    name: "井深(m)",
+                    nameTextStyle: {
+                        color: colors.text,
+                        fontSize: 13,
+                        fontWeight: 600,
+                        padding: [0, 0, 0, 8]
                     },
                     },
-                    { type: "category", boundaryGap: false, position: "top", show: false, data: xAxisLabels },
-                ],
-                yAxis: [
-                    {
-                        type: "value",
-                        name: "井深(m)",
-                        min: mockData.chartConfig.yAxis.min,
-                        max: mockData.chartConfig.yAxis.max,
-                        interval: mockData.chartConfig.yAxis.interval,
-                        inverse: true,
-                        axisLabel: { formatter: "{value}", fontSize: 12 },
-                        splitLine: { show: false },
-                        axisLine: { show: true },
-                        axisTick: { show: false }
+                    min: chartConfig.yAxis.min,
+                    max: chartConfig.yAxis.max,
+                    interval: chartConfig.yAxis.interval,
+                    inverse: true,
+                    axisLabel: {
+                        formatter: "{value}",
+                        fontSize: 12,
+                        color: colors.text,
+                        fontWeight: 500
                     },
                     },
-                    {
-                        type: "value",
-                        name: "深度(m)",
-                        min: mockData.chartConfig.yAxis2.min,
-                        max: mockData.chartConfig.yAxis2.max,
-                        interval: mockData.chartConfig.yAxis2.interval,
-                        position: "right",
-                        axisLabel: { formatter: "{value}", fontSize: 12 },
-                        splitLine: { show: false },
-                        axisLine: { show: true },
-                        axisTick: { show: false }
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: colors.border,
+                            type: 'dashed',
+                            opacity: 0.3
+                        }
                     },
                     },
-                ],
-                series: [
-                    {
-                        name: "井深数据",
-                        type: "line",
-                        yAxisIndex: 1,
-                        symbol: "circle",
-                        symbolSize: 8,
-                        itemStyle: { color: "#ff0000" },
-                        lineStyle: { color: "#00ff00" },
-                        label: {
-                            show: true,
-                            position: "top",
-                            formatter: "{c}",
-                            fontSize: 12,
-                            color: "#ff0000",
-                            backgroundColor: "rgba(255,255,255,0.8)",
-                            padding: [2, 4],
-                            borderRadius: 2
-                        },
-                        data: wellData.depthLine.map((point) => point.y),
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: colors.border,
+                            width: 2
+                        }
+                    },
+                    axisTick: {
+                        show: true,
+                        lineStyle: { color: colors.border }
+                    }
+                },
+                {
+                    type: "value",
+                    name: "深度(m)",
+                    nameTextStyle: {
+                        color: colors.text,
+                        fontSize: 13,
+                        fontWeight: 600,
+                        padding: [0, 8, 0, 0]
+                    },
+                    min: chartConfig.yAxis2.min,
+                    max: chartConfig.yAxis2.max,
+                    interval: chartConfig.yAxis2.interval,
+                    position: "right",
+                    axisLabel: {
+                        formatter: "{value}",
+                        fontSize: 12,
+                        color: colors.text,
+                        fontWeight: 500
+                    },
+                    splitLine: { show: false },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: colors.border,
+                            width: 2
+                        }
+                    },
+                    axisTick: {
+                        show: true,
+                        lineStyle: { color: colors.border }
+                    }
+                },
+            ];
+        },
+
+        // 创建系列配置
+        createSeries(wellData, areaSeries) {
+            const colors = this.colorScheme;
+
+            return [
+                {
+                    name: "井深数据",
+                    type: "line",
+                    yAxisIndex: 1,
+                    symbol: "circle",
+                    symbolSize: 10,
+                    itemStyle: {
+                        color: colors.accent,
+                        borderColor: '#fff',
+                        borderWidth: 3,
+                        shadowColor: 'rgba(0,0,0,0.2)',
+                        shadowBlur: 8
+                    },
+                    lineStyle: {
+                        color: colors.accent,
+                        width: 3,
+                        type: 'solid',
+                        shadowColor: 'rgba(0,0,0,0.1)',
+                        shadowBlur: 4
                     },
                     },
-                    {
-                        name: "占位",
-                        type: "bar",
-                        stack: "total",
-                        silent: true,
-                        barWidth: "13%",
-                        itemStyle: { borderColor: "transparent", color: "transparent" },
-                        emphasis: { itemStyle: { borderColor: "transparent", color: "transparent" } },
-                        data: wellData.depthIntervals.map((item) => item.placeholder),
+                    label: {
+                        show: true,
+                        position: "top",
+                        formatter: "{c}",
+                        fontSize: 13,
+                        fontWeight: 600,
+                        color: colors.accent,
+                        backgroundColor: "rgba(255,255,255,0.95)",
+                        padding: [6, 8],
+                        borderRadius: 6,
+                        borderColor: colors.accent,
+                        borderWidth: 2,
+                        shadowColor: 'rgba(0,0,0,0.1)',
+                        shadowBlur: 4
+                    },
+                    data: wellData.depthLine.map((point) => point.y),
+                },
+                {
+                    name: "占位",
+                    type: "bar",
+                    stack: "total",
+                    silent: true,
+                    barWidth: "8%",
+                    itemStyle: {
+                        borderColor: "transparent",
+                        color: "transparent"
                     },
                     },
-                    {
-                        name: "深度区间",
-                        type: "bar",
-                        stack: "total",
-                        barWidth: "20%",
-                        label: {
-                            show: true,
-                            position: (params) => params.data <= 200 ? "top" : "inside",
-                            color: "#03df6d",
-                            backgroundColor: "rgba(255,255,255,0.8)",
-                            padding: [2, 4],
-                            borderRadius: 2
+                    emphasis: {
+                        itemStyle: {
+                            borderColor: "transparent",
+                            color: "transparent"
+                        }
+                    },
+                    data: wellData.depthIntervals.map((item) => item.placeholder),
+                },
+                {
+                    name: "深度区间",
+                    type: "bar",
+                    stack: "total",
+                    barWidth: "6%",
+                    label: {
+                        show: true,
+                        position: (params) => params.data <= 200 ? "top" : "inside",
+                        color: '#fff',
+                        fontSize: 11,
+                        fontWeight: 600,
+                        backgroundColor: "rgba(0,0,0,0.1)",
+                        padding: [2, 3],
+                        borderRadius: 4,
+                        borderColor: 'rgba(255,255,255,0.3)',
+                        borderWidth: 1,
+                    },
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [
+                                { offset: 0, color: colors.gradient.start },
+                                { offset: 1, color: colors.gradient.end }
+                            ]
                         },
                         },
-                        itemStyle: { color: "#00aafe" },
-                        data: wellData.depthIntervals.map((item) => item.interval),
+                        borderRadius: [4, 4, 0, 0],
+                        shadowColor: 'rgba(0,0,0,0.2)',
+                        shadowBlur: 8,
+                        shadowOffsetY: 2
                     },
                     },
-                    ...areaSeries,
-                ],
-            };
+                    emphasis: {
+                        itemStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    { offset: 0, color: this.adjustColor(colors.gradient.start, 1.2) },
+                                    { offset: 1, color: this.adjustColor(colors.gradient.end, 1.2) }
+                                ]
+                            },
+                            shadowBlur: 12,
+                            shadowOffsetY: 4
+                        }
+                    },
+                    data: wellData.depthIntervals.map((item) => item.interval),
+                },
+                ...areaSeries,
+            ];
+        },
 
 
-            this.myChart.setOption(option);
-            // 确保图表完全渲染后再resize
-            this.$nextTick(() => {
-                this.myChart.resize();
-            });
+        // 颜色调整工具方法
+        adjustColor(color, factor) {
+            if (color.startsWith('#')) {
+                const r = parseInt(color.slice(1, 3), 16);
+                const g = parseInt(color.slice(3, 5), 16);
+                const b = parseInt(color.slice(5, 7), 16);
+                const newR = Math.min(255, Math.round(r * factor));
+                const newG = Math.min(255, Math.round(g * factor));
+                const newB = Math.min(255, Math.round(b * factor));
+                return `rgb(${newR}, ${newG}, ${newB})`;
+            }
+            return color;
         },
         },
 
 
+        // 渲染空状态
         renderEmpty(chartDom) {
         renderEmpty(chartDom) {
-            chartDom.innerHTML = '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#999;">暂无数据</div>';
+            const colors = this.colorScheme;
+            chartDom.innerHTML = `
+                <div class="empty-state" style="
+                    width: 100%; 
+                    height: 100%; 
+                    display: flex; 
+                    flex-direction: column;
+                    align-items: center; 
+                    justify-content: center; 
+                    color: ${colors.text};
+                    font-size: 16px;
+                    background: ${colors.background};
+                    border-radius: 12px;
+                    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+                ">
+                    <div style="
+                        font-size: 48px; 
+                        margin-bottom: 16px; 
+                        opacity: 0.6;
+                        color: ${colors.primary};
+                    ">📊</div>
+                    <div style="
+                        font-size: 18px; 
+                        color: ${colors.text};
+                        font-weight: 500;
+                    ">暂无数据</div>
+                    <div style="
+                        font-size: 14px; 
+                        color: ${colors.text};
+                        opacity: 0.6;
+                        margin-top: 8px;
+                    ">请检查数据配置</div>
+                </div>
+            `;
         },
         },
 
 
-        debounce(fn, delay) {
-            let timer = null;
-            return function () {
-                if (timer) clearTimeout(timer);
-                timer = setTimeout(() => fn.apply(this, arguments), delay);
-            };
+        // 处理错误
+        handleError(error) {
+            console.error("图表错误:", error);
         },
         },
 
 
+        // 创建SVG图片
         createSvgImage(svgString) {
         createSvgImage(svgString) {
             return new Promise((resolve, reject) => {
             return new Promise((resolve, reject) => {
                 const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
                 const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
@@ -330,8 +687,8 @@ export default {
 };
 };
 </script>
 </script>
 
 
-<style scoped>
-/* 确保容器占满可用空间 */
+<style lang="scss" scoped>
+/* 容器样式优化 */
 .chart-container {
 .chart-container {
     width: 100%;
     width: 100%;
     height: 100vh;
     height: 100vh;
@@ -340,14 +697,111 @@ export default {
     box-sizing: border-box;
     box-sizing: border-box;
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
+    /* position: relative; */
 }
 }
 
 
-/* 图表容器样式 - 占满整个容器 */
+/* 图表容器样式 */
 .chart {
 .chart {
     flex: 1;
     flex: 1;
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
     min-height: 400px;
     min-height: 400px;
     display: block;
     display: block;
+    border-radius: 16px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    border: 1px solid rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(10px);
+    transition: all 0.3s ease;
+}
+
+.chart:hover {
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+    /* transform: translateY(-2px); */
+}
+
+/* 加载状态样式 */
+.loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.95);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    border-radius: 16px;
+    backdrop-filter: blur(10px);
+}
+
+.loading-spinner {
+    width: 48px;
+    height: 48px;
+    border: 4px solid #f3f4f6;
+    border-top: 4px solid #3b82f6;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 16px;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+/* 响应式优化 */
+@media (max-width: 768px) {
+    .chart-container {
+        padding: 0 10px;
+    }
+
+    .chart {
+        min-height: 300px;
+        border-radius: 12px;
+    }
+}
+
+/* 深色模式支持 */
+@media (prefers-color-scheme: dark) {
+    .chart {
+        /* background: linear-gradient(135deg, #1f2937 0%, #111827 100%); */
+        /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); */
+        border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    /*     
+    .chart:hover {
+        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+    } */
+
+    .loading-overlay {
+        background: rgba(17, 24, 39, 0.95);
+    }
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.chart-container {
+    animation: fadeIn 0.6s ease-out;
 }
 }
 </style>
 </style>
\ No newline at end of file

src/views/efficiencyAnalysis/djxx/index.vue

@@ -106,6 +106,12 @@
         <!-- 井号选择弹窗 -->
         <!-- 井号选择弹窗 -->
         <el-dialog title="选择邻井" :visible.sync="wellDialogVisible" width="80%" :close-on-click-modal="false"
         <el-dialog title="选择邻井" :visible.sync="wellDialogVisible" width="80%" :close-on-click-modal="false"
             class="well-dialog" :z-index="2000">
             class="well-dialog" :z-index="2000">
+            <!-- 选择提示信息 -->
+            <!-- <div
+                style="margin-bottom: 15px; padding: 10px; background-color: #f0f9ff; border: 1px solid #b3d8ff; border-radius: 4px; color: #1890ff;">
+                <i class="el-icon-info"></i>
+                <span>提示：您最多可以选择2个邻井，当前已选择 {{ wellSelection.length }} 个</span>
+            </div> -->
             <el-table :data="wellTableData" border style="width: 100%;height: 400px" max-height="400px"
             <el-table :data="wellTableData" border style="width: 100%;height: 400px" max-height="400px"
                 v-loading="wellLoading" @selection-change="handleWellSelectionChange" ref="wellTable"
                 v-loading="wellLoading" @selection-change="handleWellSelectionChange" ref="wellTable"
                 :row-key="row => row.jh">
                 :row-key="row => row.jh">
@@ -618,10 +624,10 @@ export default {
 
 
             console.log('从缓存重建的选择:', allSelectedWells)
             console.log('从缓存重建的选择:', allSelectedWells)
 
 
-            // 邻井选择限制为3个
-            const maxSelection = 3
+            // 邻井选择限制为2个
+            const maxSelection = 2
             if (allSelectedWells.length > maxSelection) {
             if (allSelectedWells.length > maxSelection) {
-                this.$message.warning('最多只能选择3个邻井')
+                this.$message.warning('最多只能选择2个邻井')
                 // 移除超出限制的选择，优先保留当前页面的选择
                 // 移除超出限制的选择，优先保留当前页面的选择
                 const currentPageSelected = currentPageSelection.filter(well =>
                 const currentPageSelected = currentPageSelection.filter(well =>
                     allSelectedWells.indexOf(well) < maxSelection
                     allSelectedWells.indexOf(well) < maxSelection

src/views/efficiencyAnalysis/jcxx/components/DataTable.vue

@@ -5,23 +5,23 @@
         <div class="search-wrapper">
         <div class="search-wrapper">
             <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
             <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                 label-width="68px">
                 label-width="68px">
-                <el-form-item label="区块名称" prop="qk">
+                <!-- <el-form-item label="区块名称" prop="qk">
                     <el-select v-model="queryParams.qk" placeholder="请选择区块名称" clearable filterable>
                     <el-select v-model="queryParams.qk" placeholder="请选择区块名称" clearable filterable>
                         <el-option v-for="item in filteredBlockOptions" :key="item.qk" :label="item.qk"
                         <el-option v-for="item in filteredBlockOptions" :key="item.qk" :label="item.qk"
                             :value="item.qk" />
                             :value="item.qk" />
                     </el-select>
                     </el-select>
-                </el-form-item>
+                </el-form-item> -->
                 <el-form-item label="井号" prop="jh">
                 <el-form-item label="井号" prop="jh">
                     <el-input v-model="queryParams.jh" placeholder="请输入井号" clearable
                     <el-input v-model="queryParams.jh" placeholder="请输入井号" clearable
                         @keyup.enter.native="handleQuery" />
                         @keyup.enter.native="handleQuery" />
                 </el-form-item>
                 </el-form-item>
-                <el-form-item label="完井日期" prop="wjrq">
+                <!-- <el-form-item label="完井日期" prop="wjrq">
                     <el-date-picker v-model="queryParams.wjrqks" type="year" value-format="yyyy" placeholder="完井开始年份">
                     <el-date-picker v-model="queryParams.wjrqks" type="year" value-format="yyyy" placeholder="完井开始年份">
                     </el-date-picker>
                     </el-date-picker>
                     -
                     -
                     <el-date-picker v-model="queryParams.wjrqjs" type="year" value-format="yyyy" placeholder="完井结束年份">
                     <el-date-picker v-model="queryParams.wjrqjs" type="year" value-format="yyyy" placeholder="完井结束年份">
                     </el-date-picker>
                     </el-date-picker>
-                </el-form-item>
+                </el-form-item> -->
                 <el-form-item>
                 <el-form-item>
                     <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                     <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                     <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                     <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

src/views/efficiencyAnalysis/jcxx/components/WellDepthStructure.vue

@@ -3,21 +3,21 @@
     <div class="app-containers">
     <div class="app-containers">
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
             label-width="100px" class="search-form">
             label-width="100px" class="search-form">
-            <el-form-item label="区块名称" prop="qk">
+            <!-- <el-form-item label="区块名称" prop="qk">
                 <el-select v-model="queryParams.qk" placeholder="请选择区块名称" clearable filterable>
                 <el-select v-model="queryParams.qk" placeholder="请选择区块名称" clearable filterable>
                     <el-option v-for="item in filteredBlockOptions" :key="item.qk" :label="item.qk" :value="item.qk" />
                     <el-option v-for="item in filteredBlockOptions" :key="item.qk" :label="item.qk" :value="item.qk" />
                 </el-select>
                 </el-select>
-            </el-form-item>
+            </el-form-item> -->
             <el-form-item label="井号" prop="jh">
             <el-form-item label="井号" prop="jh">
                 <el-input v-model="queryParams.jh" placeholder="请输入井号" clearable @keyup.enter.native="handleQuery" />
                 <el-input v-model="queryParams.jh" placeholder="请输入井号" clearable @keyup.enter.native="handleQuery" />
             </el-form-item>
             </el-form-item>
-            <el-form-item label="完井开始日期" prop="wjrqks">
+            <!-- <el-form-item label="完井开始日期" prop="wjrqks">
                 <el-date-picker v-model="queryParams.wjrqks" type="date" placeholder="选择完井开始年份" clearable
                 <el-date-picker v-model="queryParams.wjrqks" type="date" placeholder="选择完井开始年份" clearable
                     value-format="yyyy-MM-dd" />
                     value-format="yyyy-MM-dd" />
                 -
                 -
                 <el-date-picker v-model="queryParams.wjrqjs" type="date" placeholder="选择完井结束年份" clearable
                 <el-date-picker v-model="queryParams.wjrqjs" type="date" placeholder="选择完井结束年份" clearable
                     value-format="yyyy-MM-dd" />
                     value-format="yyyy-MM-dd" />
-            </el-form-item>
+            </el-form-item> -->
             <el-form-item>
             <el-form-item>
                 <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                 <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                 <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                 <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>