Skip to content

P
pdczt_qd
Commit 49c08d8b by zhaopanyu
Options

zpy

parent 3d1c2de2
Showing with 313 additions and 40 deletions
src/views/efficiencyAnalysis/djxx/detail/components/CurveGraph copy.vue 0 → 100644
<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>
<div class="drilling-chart-container" v-loading="loading">
<div class="drilling-chart-container">
<div id="drillingEfficiencyChartdj" class="chart"></div>
</div>
</template>
......@@ -23,26 +23,18 @@ export default {
return {
chartData: null,
myChart: null,
resizeHandler: null,
loading: false // 新增loading状态
resizeHandler: null
};
},
mounted() {
// this.getList(); // 移除自动加载
this.getList();
this.$once('hook:beforeDestroy', this.cleanup);
},
methods: {
/**
* 外部调用：加载数据
*/
loadData() {
this.loading = true;
this.getList();
},
getList() {
const params = { jhs: this.jhs };
this.loading = true;
const params = {
jhs: `${this.jh},${this.jhs}`
};
getdjqxt(params)
.then(res => {
console.log('接口返回数据:', res);
......@@ -53,9 +45,6 @@ export default {
console.error('接口请求失败:', error);
this.chartData = null;
this.initChart();
})
.finally(() => {
this.loading = false;
});
},
......@@ -99,7 +88,7 @@ export default {
crosshairLines.push({
name: '十字线',
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' },
symbol: 'none',
tooltip: { show: false } // 十字线不显示tooltip
......@@ -107,7 +96,7 @@ export default {
crosshairLines.push({
name: '十字线',
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' },
symbol: 'none',
tooltip: { show: false } // 十字线不显示tooltip
......@@ -115,7 +104,7 @@ export default {
crosshairCenter.push({
name: '十字线中心',
type: 'scatter',
data: [[crosshair.x, crosshair.y]],
data: [[crosshair.y, crosshair.x]],
symbolSize: 12,
itemStyle: { color: 'orange', borderColor: '#fff', borderWidth: 2 }
});
......@@ -153,9 +142,16 @@ export default {
}
},
legend: {
data: ['优化曲线',],
data: ['指标', '钻速均值', '进尺均值', '优化曲线',],
top: '10%',
left: 'center'
right: '5%'
},
grid: {
left: '2%',
right: '5%',
top: '15%',
bottom: '10%',
containLabel: true
},
xAxis: {
name: '钻速 (m/h)',
......@@ -163,13 +159,21 @@ export default {
min: axisRange.xAxis.min,
max: axisRange.xAxis.max,
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: {
name: '进尺',
type: 'value',
min: axisRange.yAxis.min,
interval: axisRange.yAxis.interval
interval: axisRange.yAxis.interval,
nameLocation: 'center',
nameGap: 40,
axisTick: { show: true },
axisLine: { show: true }
},
series: [
{
......@@ -183,14 +187,43 @@ export default {
emphasis: { showSymbol: false },
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,
...crosshairCenter,
...drillTypes.map(type => ({
name: type,
type: 'scatter',
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>
<style scoped>
<style lang="scss" scoped>
.drilling-chart-container {
width: 100%;
height: 100%;
padding: 20px;
/* padding: 20px; */
box-sizing: border-box;
}
......
src/views/efficiencyAnalysis/djxx/detail/components/DataTable.vue
......@@ -847,7 +847,7 @@ export default {
getList() {
this.loading = true;
const params = {
jhs: this.jhs
jhs: `${this.jh},${this.jhs}`
}
console.log(params, 'params');
listJsha(params).then(response => {
......
src/views/efficiencyAnalysis/djxx/index.vue
......@@ -106,6 +106,12 @@
<!-- 井号选择弹窗 -->
<el-dialog title="选择邻井" :visible.sync="wellDialogVisible" width="80%" :close-on-click-modal="false"
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"
v-loading="wellLoading" @selection-change="handleWellSelectionChange" ref="wellTable"
:row-key="row => row.jh">
......@@ -618,10 +624,10 @@ export default {
console.log('从缓存重建的选择:', allSelectedWells)
// 邻井选择限制为3个
const maxSelection = 3
// 邻井选择限制为2个
const maxSelection = 2
if (allSelectedWells.length > maxSelection) {
this.$message.warning('最多只能选择3个邻井')
this.$message.warning('最多只能选择2个邻井')
// 移除超出限制的选择，优先保留当前页面的选择
const currentPageSelected = currentPageSelection.filter(well =>
allSelectedWells.indexOf(well) < maxSelection
......
src/views/efficiencyAnalysis/jcxx/components/DataTable.vue
......@@ -5,23 +5,23 @@
<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-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> -->
<el-form-item label="井号" prop="jh">
<el-input v-model="queryParams.jh" placeholder="请输入井号" clearable
@keyup.enter.native="handleQuery" />
</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>
-
<el-date-picker v-model="queryParams.wjrqjs" type="year" value-format="yyyy" placeholder="完井结束年份">
</el-date-picker>
</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 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">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
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-option v-for="item in filteredBlockOptions" :key="item.qk" :label="item.qk" :value="item.qk" />
</el-select>
</el-form-item>
</el-form-item> -->
<el-form-item label="井号" prop="jh">
<el-input v-model="queryParams.jh" placeholder="请输入井号" clearable @keyup.enter.native="handleQuery" />
</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
value-format="yyyy-MM-dd" />
-
<el-date-picker v-model="queryParams.wjrqjs" type="date" placeholder="选择完井结束年份" clearable
value-format="yyyy-MM-dd" />
</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 icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment