Skip to content

P
pdczt_qd
Commit 6acd0460 by zhaopanyu
Options

zpy

parent 344e397f
Showing with 397 additions and 13 deletions
src/api/system/jsdb.js
...@@ -42,3 +42,12 @@ export function delJsdb(jh) { ...@@ -42,3 +42,12 @@ export function delJsdb(jh) {
method: 'delete' method: 'delete'
}) })
} }
// 井身结构图（按井号返回结构绘图数据）
export function getJsjgt(params) {
return request({
url: '/system/jsdb/jsjgt',
method: 'get',
params
})
}
src/views/efficiencyAnalysis/djxx/detail/components/MultiWellTrajectory.vue 0 → 100644
<template>
<div class="multi-well-trajectory" v-loading="isLoading" element-loading-text="加载中...">
<el-row :gutter="10">
<el-col v-for="well in wellList" :key="well" :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="well-col">
<div class="traj-wrapper">
<div class="traj-title">{{ well }}</div>
<div class="traj-body">
<div class="legend">
<div class="legendItem">
<div class="colorLump" style="background: rgb(219, 67, 83)"></div>
<div class="text">狗腿度(°/30m) &gt;8</div>
</div>
<div class="legendItem">
<div class="colorLump" style="background: rgb(221, 68, 166)"></div>
<div class="text">狗腿度(°/30m) 6-8</div>
</div>
<div class="legendItem">
<div class="colorLump" style="background: rgb(89, 95, 246)"></div>
<div class="text">狗腿度(°/30m) 4-6</div>
</div>
<div class="legendItem">
<div class="colorLump" style="background: rgb(76, 167, 248)"></div>
<div class="text">狗腿度(°/30m) 2-4</div>
</div>
<div class="legendItem">
<div class="colorLump" style="background: rgb(124, 233, 234)"></div>
<div class="text">狗腿度(°/30m) &lt;2</div>
</div>
</div>
<div :ref="chartRefKey(well)" class="chart"></div>
<div v-if="!loadedMap[well]" class="traj-empty">
{{ loadingMap[well] ? '加载中...' : '暂无数据' }}
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import 'echarts-gl';
import * as echarts from 'echarts';
import { getThreeViews } from '@/api/optimization/initialization';
export default {
name: 'MultiWellTrajectory',
props: {
// 主井
jh: {
type: String,
default: ''
},
// 邻井（逗号分隔）
jhs: {
type: String,
default: ''
},
// 是否处于当前激活tab（用于懒加载）
active: {
type: Boolean,
default: false
}
},
data() {
return {
loadingMap: {},
loadedMap: {},
charts: {}
};
},
computed: {
wellList() {
const wells = [];
if (this.jh) wells.push(this.jh);
if (this.jhs) {
this.jhs
.split(',')
.map((w) => w && w.trim())
.filter(Boolean)
.forEach((w) => {
if (!wells.includes(w)) wells.push(w);
});
}
return wells;
},
/** 是否有接口尚未请求完成，用于显示遮罩 */
isLoading() {
return this.wellList.length > 0 && this.wellList.some((w) => this.loadingMap[w]);
}
},
watch: {
active: {
handler(val) {
if (val) {
this.reload();
}
},
immediate: true
},
wellList() {
if (this.active) {
this.reload();
}
}
},
mounted() {
window.addEventListener('resize', this.resizeAll);
},
beforeDestroy() {
window.removeEventListener('resize', this.resizeAll);
Object.keys(this.charts || {}).forEach((k) => {
try {
this.charts[k] && this.charts[k].dispose && this.charts[k].dispose();
} catch (e) { }
});
this.charts = {};
},
methods: {
normalizeWell(well) {
return String(well).replace(/[^a-zA-Z0-9_-]/g, '-');
},
chartRefKey(well) {
return `trajChart_${this.normalizeWell(well)}`;
},
getChartEl(well) {
const key = this.chartRefKey(well);
const ref = this.$refs[key];
if (Array.isArray(ref)) return ref[0] || null;
return ref || null;
},
resizeAll() {
Object.keys(this.charts || {}).forEach((k) => {
try {
this.charts[k] && this.charts[k].resize && this.charts[k].resize();
} catch (e) { }
});
},
// 供父组件在tab点击/切回时主动触发
reload() {
if (!this.active) return;
this.wellList.forEach((well) => this.loadForWell(well));
},
loadForWell(well) {
if (!well) return;
this.$set(this.loadingMap, well, true);
this.$set(this.loadedMap, well, false);
getThreeViews({ jh: well })
.then((res) => {
if (res && res.code === 200 && res.swmap) {
this.$nextTick(() => {
this.draw3D(well, res.swmap);
this.$set(this.loadedMap, well, true);
});
}
})
.catch(() => { })
.finally(() => {
this.$set(this.loadingMap, well, false);
});
},
draw3D(well, data) {
const el = this.getChartEl(well);
if (!el) return;
const key = this.normalizeWell(well);
let chart = this.charts[key];
if (!chart) {
chart = echarts.init(el);
this.$set(this.charts, key, chart);
}
const lineData = (data && Array.isArray(data.lineData) && data.lineData) || [];
const xmin = Number(data && data.xmin);
const xmax = Number(data && data.xmax);
const ymin = Number(data && data.ymin);
const ymax = Number(data && data.ymax);
const zmin = Number(data && data.zmin);
const zmax = Number(data && data.zmax);
const processedData = lineData.map((item) => {
if (!item || !Array.isArray(item.value) || item.value.length < 3) return item;
return {
...item,
value: [item.value[0], item.value[1], zmax - (item.value[2] - zmin)]
};
});
const option = {
tooltip: {
show: true,
formatter: function (params) {
const v = (params && params.value) || [];
const z = typeof v[2] === 'number' ? v[2] : Number(v[2]);
const x = v[0];
const y = v[1];
return `
垂深${(zmax - z).toFixed(0)}m<br>
南北位移${y}m<br>
东西位移${x}m<br>
狗腿度${params.data && params.data.params}°/30m
`;
}
},
backgroundColor: '#fff',
xAxis3D: {
type: 'value',
name: 'x-东西(m)',
min: isFinite(xmin) ? xmin : undefined,
max: isFinite(xmax) ? xmax : undefined,
splitNumber: 5
},
yAxis3D: {
type: 'value',
name: 'y-南北(m)',
min: isFinite(ymin) ? ymin : undefined,
max: isFinite(ymax) ? ymax : undefined,
splitNumber: 5
},
zAxis3D: {
type: 'value',
name: '垂深(m)',
position: 'right',
min: isFinite(zmin) ? Number(zmin.toFixed(0)) : undefined,
max: isFinite(zmax) ? Number(zmax.toFixed(0)) : undefined,
axisLabel: {
formatter: function (value) {
return (zmin - value).toFixed(0);
}
},
splitNumber: 5
},
grid3D: {
viewControl: {
alpha: 0
}
},
series: [
{
type: 'line3D',
data: processedData,
lineStyle: {
width: 4,
color: (params) => {
const gtd = params && params.data && params.data.params;
const v = Number(gtd);
return v < 2
? 'rgb(124,233,234)'
: v >= 2 && v < 4
? 'rgb(76,167,248)'
: v >= 4 && v < 6
? 'rgb(89,95,246)'
: v >= 6 && v < 8
? 'rgb(221,68,166)'
: 'rgb(219,67,83)';
}
}
}
]
};
chart.setOption(option, true);
chart.resize();
}
}
};
</script>
<style scoped lang="scss">
.multi-well-trajectory {
padding: 10px 0;
}
.well-col {
margin-bottom: 10px;
}
.traj-wrapper {
height: calc(100vh - 260px);
min-height: 520px;
border: 1px solid #e4e7ed;
border-radius: 4px;
display: flex;
flex-direction: column;
background-color: #fff;
overflow: hidden;
}
.traj-title {
padding: 6px 12px;
font-size: 14px;
font-weight: 600;
color: #333;
border-bottom: 1px solid #e4e7ed;
background-color: #f5f7fa;
}
.traj-body {
flex: 1;
position: relative;
}
.legend {
position: absolute;
top: 12px;
right: 12px;
z-index: 10;
background: rgba(255, 255, 255, 0.85);
border: 1px solid #ebeef5;
border-radius: 6px;
padding: 10px 10px 2px 10px;
}
.legendItem {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.colorLump {
width: 25px;
height: 15px;
line-height: 15px;
border-radius: 5px;
margin-right: 6px;
}
.text {
font-size: 12px;
height: 15px;
line-height: 15px;
white-space: nowrap;
}
.chart {
width: 100%;
height: 100%;
}
.traj-empty {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #c0c4cc;
z-index: 5;
}
</style>
src/views/efficiencyAnalysis/djxx/detail/index.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick" style="margin-top: -10px;"> <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick" style="margin-top: -10px;">
<el-tab-pane label="钻头使用数据" name="dataTable"> <el-tab-pane label="钻头使用数据" name="dataTable">
<DataTable ref="dataTableRef" :jh="queryParams.jh" :famc="queryParams.famc" :qk="queryParams.qk" <DataTable ref="dataTableRef" :jh="queryParams.jh" :famc="queryParams.famc" :qk="queryParams.qk"
:jhs="queryParams.jhs"/> :jhs="queryParams.jhs" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="钻头优选" name="curveGraph"> <el-tab-pane label="钻头优选" name="curveGraph">
...@@ -13,8 +13,18 @@ ...@@ -13,8 +13,18 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="钻头能效分析" name="histogramGraph"> <el-tab-pane label="钻头能效分析" name="histogramGraph">
<HistogramGraph ref="histogramGraphRef" :jh="queryParams.jh" :famc="queryParams.famc" <HistogramGraph ref="histogramGraphRef" :jh="queryParams.jh" :famc="queryParams.famc" :qk="queryParams.qk"
:qk="queryParams.qk" :jhs="queryParams.jhs"/> :jhs="queryParams.jhs" />
</el-tab-pane>
<el-tab-pane label="井身结构" name="wellStructure">
<MultiWellStructure ref="multiWellStructureRef" :active="activeTab === 'wellStructure'" :jh="queryParams.jh"
:jhs="queryParams.jhs" />
</el-tab-pane>
<el-tab-pane label="井眼轨迹" name="wellboreTrajectory">
<MultiWellTrajectory ref="multiWellTrajectoryRef" :active="activeTab === 'wellboreTrajectory'"
:jh="queryParams.jh" :jhs="queryParams.jhs" />
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
...@@ -24,13 +34,17 @@ ...@@ -24,13 +34,17 @@
import DataTable from './components/DataTable.vue'; import DataTable from './components/DataTable.vue';
import CurveGraph from './components/CurveGraph.vue'; import CurveGraph from './components/CurveGraph.vue';
import HistogramGraph from './components/HistogramGraph.vue'; import HistogramGraph from './components/HistogramGraph.vue';
import MultiWellStructure from './components/MultiWellStructure.vue';
import MultiWellTrajectory from './components/MultiWellTrajectory.vue';
export default { export default {
name: "DjxxDetail", name: "DjxxDetail",
components: { components: {
DataTable, DataTable,
CurveGraph, CurveGraph,
HistogramGraph HistogramGraph,
MultiWellStructure,
MultiWellTrajectory
}, },
data() { data() {
return { return {
...@@ -58,14 +72,14 @@ export default { ...@@ -58,14 +72,14 @@ export default {
created() { created() {
// 获取路由参数（使用query） // 获取路由参数（使用query）
console.log('详情页面created，完整路由对象:', this.$route); console.log('详情页面created，完整路由对象:', this.$route);
let {id, jh, famc, qk, jhs, kc, ztccs} = this.$route.query || {}; let { id, jh, famc, qk, jhs, kc, ztccs } = this.$route.query || {};
console.log('路由query参数:', {id, jh, famc, qk, jhs, kc, ztccs}); console.log('路由query参数:', { id, jh, famc, qk, jhs, kc, ztccs });
// 优先使用query，其次使用sessionStorage // 优先使用query，其次使用sessionStorage
if (!jh || jh === 'undefined' || jh === 'null') { if (!jh || jh === 'undefined' || jh === 'null') {
try { try {
const cached = JSON.parse(sessionStorage.getItem('djxxDetailParams') || '{}'); const cached = JSON.parse(sessionStorage.getItem('djxxDetailParams') || '{}');
({id, jh, famc, qk, jhs, kc, ztccs} = {...cached, ...this.$route.query}); ({ id, jh, famc, qk, jhs, kc, ztccs } = { ...cached, ...this.$route.query });
console.log('使用缓存参数:', {id, jh, famc, qk, jhs, kc, ztccs}); console.log('使用缓存参数:', { id, jh, famc, qk, jhs, kc, ztccs });
} catch (e) { } catch (e) {
console.warn('读取缓存失败', e); console.warn('读取缓存失败', e);
} }
...@@ -91,7 +105,7 @@ export default { ...@@ -91,7 +105,7 @@ export default {
}, },
activated() { activated() {
// 组件被 keep-alive 缓存时，返回本页会触发此钩子 // 组件被 keep-alive 缓存时，返回本页会触发此钩子
const {id, jh, famc, qk, jhs,kc,ztccs} = this.$route.query || {}; const { id, jh, famc, qk, jhs, kc, ztccs } = this.$route.query || {};
if (jh && jh !== 'undefined' && jh !== 'null') { if (jh && jh !== 'undefined' && jh !== 'null') {
this.queryParams.id = id || ''; this.queryParams.id = id || '';
this.queryParams.jh = jh || ''; this.queryParams.jh = jh || '';
...@@ -106,7 +120,7 @@ export default { ...@@ -106,7 +120,7 @@ export default {
try { try {
const cached = JSON.parse(sessionStorage.getItem('djxxDetailParams') || '{}'); const cached = JSON.parse(sessionStorage.getItem('djxxDetailParams') || '{}');
if (cached && cached.jh) { if (cached && cached.jh) {
this.queryParams = {...this.queryParams, ...cached}; this.queryParams = { ...this.queryParams, ...cached };
this.$nextTick(() => this.refreshActiveTab()); this.$nextTick(() => this.refreshActiveTab());
} }
} catch (e) { } catch (e) {
...@@ -115,7 +129,7 @@ export default { ...@@ -115,7 +129,7 @@ export default {
}, },
beforeRouteUpdate(to, from, next) { beforeRouteUpdate(to, from, next) {
// 同一路由切换不同 query 时触发 // 同一路由切换不同 query 时触发
const {id, jh, famc, qk, jhs,kc,ztccs} = to.query || {}; const { id, jh, famc, qk, jhs, kc, ztccs } = to.query || {};
if (jh && jh !== 'undefined' && jh !== 'null') { if (jh && jh !== 'undefined' && jh !== 'null') {
this.queryParams.id = id || ''; this.queryParams.id = id || '';
this.queryParams.jh = jh || ''; this.queryParams.jh = jh || '';
...@@ -132,7 +146,7 @@ export default { ...@@ -132,7 +146,7 @@ export default {
watch: { watch: {
// 当从列表页连续点击"查看"跳转到同一路由时，组件会复用，这里监听路由变化并刷新当前激活tab // 当从列表页连续点击"查看"跳转到同一路由时，组件会复用，这里监听路由变化并刷新当前激活tab
'$route.query'(to) { '$route.query'(to) {
const {id, jh, famc, qk, jhs,kc,ztccs} = to || {}; const { id, jh, famc, qk, jhs, kc, ztccs } = to || {};
if (jh && jh !== 'undefined' && jh !== 'null') { if (jh && jh !== 'undefined' && jh !== 'null') {
this.queryParams.id = id || ''; this.queryParams.id = id || '';
this.queryParams.jh = jh || ''; this.queryParams.jh = jh || '';
...@@ -165,6 +179,10 @@ export default { ...@@ -165,6 +179,10 @@ export default {
this.$refs.curveGraphRef && this.$refs.curveGraphRef.loadData && this.$refs.curveGraphRef.loadData(); this.$refs.curveGraphRef && this.$refs.curveGraphRef.loadData && this.$refs.curveGraphRef.loadData();
} else if (this.activeTab === 'histogramGraph') { } else if (this.activeTab === 'histogramGraph') {
this.$refs.histogramGraphRef && this.$refs.histogramGraphRef.loadData && this.$refs.histogramGraphRef.loadData(); this.$refs.histogramGraphRef && this.$refs.histogramGraphRef.loadData && this.$refs.histogramGraphRef.loadData();
} else if (this.activeTab === 'wellStructure') {
this.$refs.multiWellStructureRef && this.$refs.multiWellStructureRef.reload && this.$refs.multiWellStructureRef.reload();
} else if (this.activeTab === 'wellboreTrajectory') {
this.$refs.multiWellTrajectoryRef && this.$refs.multiWellTrajectoryRef.reload && this.$refs.multiWellTrajectoryRef.reload();
} }
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
...@@ -207,6 +225,12 @@ export default { ...@@ -207,6 +225,12 @@ export default {
this.$refs.curveGraphRef && this.$refs.curveGraphRef.loadData && this.$refs.curveGraphRef.loadData(); this.$refs.curveGraphRef && this.$refs.curveGraphRef.loadData && this.$refs.curveGraphRef.loadData();
} else if (tab.name === 'histogramGraph') { } else if (tab.name === 'histogramGraph') {
this.$refs.histogramGraphRef && this.$refs.histogramGraphRef.loadData && this.$refs.histogramGraphRef.loadData(); this.$refs.histogramGraphRef && this.$refs.histogramGraphRef.loadData && this.$refs.histogramGraphRef.loadData();
} else if (tab.name === 'wellStructure') {
// 懒加载：仅当点到井身结构tab时才触发接口调用
this.$refs.multiWellStructureRef && this.$refs.multiWellStructureRef.reload && this.$refs.multiWellStructureRef.reload();
} else if (tab.name === 'wellboreTrajectory') {
// 懒加载：仅当点到井眼轨迹tab时才触发接口调用
this.$refs.multiWellTrajectoryRef && this.$refs.multiWellTrajectoryRef.reload && this.$refs.multiWellTrajectoryRef.reload();
} }
} }
} }
...@@ -242,7 +266,7 @@ export default { ...@@ -242,7 +266,7 @@ export default {
} }
} }
::v-deep .el-table__cell > .cell { ::v-deep .el-table__cell>.cell {
font-weight: normal; font-weight: normal;
} }
......
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