Commit 9da0a538 by jiang'yun

修改

parent 0a22694f
...@@ -42,3 +42,12 @@ export function delLjSssjSd(id) { ...@@ -42,3 +42,12 @@ export function delLjSssjSd(id) {
method: "delete", method: "delete",
}); });
} }
// 查询录井整米数据列表
export function getLjzmsj(query) {
return request({
url: "/system/ljSssjSd/getLjzmsj",
method: "get",
params: query,
});
}
<template> <template>
<div class="drilling-chart-container"> <div class="drilling-chart-container">
<div>
<span class="well-label" style="margin-left: 10px">开次:</span>
<el-select v-model="kc" style="width: 100px" size="mini" clearable placeholder="请选择">
<el-option
v-for="item in kcData"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<span class="well-label" style="margin-left: 10px">钻头尺寸:</span>
<el-input v-model="ztccs" style="width: 100px" clearable size="mini"></el-input>
<el-button type="primary" style="margin-left: 10px" size="mini" @click="getList">查询</el-button>
<el-button type="primary" icon="el-icon-download" size="small" @click="exportChart"
:disabled="!myChart"></el-button>
</div>
<div class="chart-wrapper"> <div class="chart-wrapper">
<el-button type="primary" icon="el-icon-download" size="small" class="export-btn" @click="exportChart"
:disabled="!myChart">
导出图片
</el-button>
<div id="drillingEfficiencyChartdj" class="chart"></div> <div id="drillingEfficiencyChartdj" class="chart"></div>
</div> </div>
<!-- <div class="optimal-values">
<div class="optimal-item">
<span class="label">机速最优:</span>
<span class="value">{{ (chartData && chartData.jxzszy) || '--' }}</span>
</div>
<div class="optimal-item">
<span class="label">进尺最优:</span>
<span class="value">{{ (chartData && chartData.jczy) || '--' }}</span>
</div>
<div class="optimal-item">
<span class="label">综合最优:</span>
<span class="value">{{ (chartData && chartData.zhzy) || '--' }}</span>
</div>
</div> -->
<el-table v-if="chartData && chartData.zyzt && chartData.zyzt.length > 0" :data="chartData.zyzt" border stripe <el-table v-if="chartData && chartData.zyzt && chartData.zyzt.length > 0" :data="chartData.zyzt" border stripe
class="data-table"> class="data-table">
<el-table-column label="井号" align="center" prop="jh" min-width="120" show-overflow-tooltip /> <el-table-column label="井号" align="center" prop="jh" min-width="120" show-overflow-tooltip/>
<el-table-column label="钻头尺寸mm" align="center" prop="ztcc" min-width="120" show-overflow-tooltip /> <el-table-column label="钻头尺寸mm" align="center" prop="ztcc" min-width="120" show-overflow-tooltip/>
<el-table-column label="钻头型号" align="center" prop="ztxh" min-width="150" show-overflow-tooltip /> <el-table-column label="钻头型号" align="center" prop="ztxh" min-width="150" show-overflow-tooltip/>
<el-table-column label="优选类型" align="center" prop="yxlx" min-width="120" show-overflow-tooltip /> <el-table-column label="优选类型" align="center" prop="yxlx" min-width="120" show-overflow-tooltip/>
</el-table> </el-table>
</div> </div>
</template> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { getdjqxt } from '@/api/optimization/initialization'; import {getdjqxt} from '@/api/optimization/initialization';
export default { export default {
props: { props: {
...@@ -48,19 +47,52 @@ export default { ...@@ -48,19 +47,52 @@ export default {
id: { id: {
type: String, type: String,
required: true, required: true,
},
kcjs: {
type: String,
required: true,
},
ztccsjs: {
type: String,
required: true,
} }
}, },
data() { data() {
return { return {
chartData: null, chartData: null,
myChart: null, myChart: null,
resizeHandler: null resizeHandler: null,
kc: '',
ztccs: '',
kcData: [
{
label: '1',
value: '1',
}, {
label: '2',
value: '2',
}, {
label: '3',
value: '3',
}, {
label: '4',
value: '4',
}, {
label: '5',
value: '5',
},
]
}; };
}, },
created() {
this.kc=this.kcjs
this.ztccs=this.ztccsjs
},
mounted() { mounted() {
// 不在挂载时自动请求数据,等待父组件触发 loadData() // 不在挂载时自动请求数据,等待父组件触发 loadData()
this.$once('hook:beforeDestroy', this.cleanup); this.$once('hook:beforeDestroy', this.cleanup);
}, },
methods: { methods: {
// 供父组件调用 // 供父组件调用
loadData() { loadData() {
...@@ -69,7 +101,9 @@ export default { ...@@ -69,7 +101,9 @@ export default {
getList() { getList() {
const params = { const params = {
zbid: this.id, zbid: this.id,
jhs: `${this.jh},${this.jhs}` jhs: `${this.jh},${this.jhs}`,
kc:this.kc,
ztccs:this.ztccs
}; };
getdjqxt(params) getdjqxt(params)
.then(res => { .then(res => {
...@@ -107,7 +141,7 @@ export default { ...@@ -107,7 +141,7 @@ export default {
} }
this.myChart = echarts.init(chartDom); this.myChart = echarts.init(chartDom);
// 解析接口数据(确保折线数据格式正确) // 解析接口数据(确保折线数据格式正确)
const { axisRange, scatterData, targetLineData, crosshair } = this.chartData; const {axisRange, scatterData, targetLineData, crosshair} = this.chartData;
// 数据顺序:[speed, depth, drillType, jh, cc] // 数据顺序:[speed, depth, drillType, jh, cc]
const scatter = scatterData.map(item => [item.speed, item.depth, item.drillType, item.jh, item.cc]); const scatter = scatterData.map(item => [item.speed, item.depth, item.drillType, item.jh, item.cc]);
// 折线数据必须为数组格式:[[钻速, 进尺], ...] // 折线数据必须为数组格式:[[钻速, 进尺], ...]
...@@ -128,30 +162,30 @@ export default { ...@@ -128,30 +162,30 @@ export default {
name: '十字线', name: '十字线',
type: 'line', type: 'line',
data: [[crosshair.y - 10, crosshair.x], [crosshair.y + 10, crosshair.x]], 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
}); });
crosshairLines.push({ crosshairLines.push({
name: '十字线', name: '十字线',
type: 'line', type: 'line',
data: [[crosshair.y, crosshair.x - 500], [crosshair.y, crosshair.x + 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
}); });
crosshairCenter.push({ crosshairCenter.push({
name: '十字线中心', name: '十字线中心',
type: 'scatter', type: 'scatter',
data: [[crosshair.y, crosshair.x]], data: [[crosshair.y, crosshair.x]],
symbolSize: 12, symbolSize: 12,
itemStyle: { color: 'orange', borderColor: '#fff', borderWidth: 2 } itemStyle: {color: 'orange', borderColor: '#fff', borderWidth: 2}
}); });
} }
// 图表配置项(核心:坐标轴触发,确保折线悬浮显示) // 图表配置项(核心:坐标轴触发,确保折线悬浮显示)
const option = { const option = {
title: { text: '钻头钻进能效分析', left: 'center' }, title: {text: '钻头钻进能效分析', left: 'center'},
tooltip: { tooltip: {
trigger: 'axis', // 基于坐标轴触发(不依赖数据点) trigger: 'axis', // 基于坐标轴触发(不依赖数据点)
axisPointer: { axisPointer: {
...@@ -199,11 +233,11 @@ export default { ...@@ -199,11 +233,11 @@ 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', nameLocation: 'center',
nameGap: 50, nameGap: 50,
axisTick: { show: true }, axisTick: {show: true},
axisLine: { show: true } axisLine: {show: true}
}, },
yAxis: { yAxis: {
name: '进尺m', name: '进尺m',
...@@ -212,8 +246,8 @@ export default { ...@@ -212,8 +246,8 @@ export default {
// interval: axisRange.yAxis.interval, // interval: axisRange.yAxis.interval,
nameLocation: 'center', nameLocation: 'center',
nameGap: 40, nameGap: 40,
axisTick: { show: true }, axisTick: {show: true},
axisLine: { show: true } axisLine: {show: true}
}, },
series: [ series: [
{ {
...@@ -224,24 +258,24 @@ export default { ...@@ -224,24 +258,24 @@ export default {
// 彻底隐藏所有点(包括悬浮时) // 彻底隐藏所有点(包括悬浮时)
symbol: 'none', symbol: 'none',
showSymbol: false, showSymbol: false,
emphasis: { showSymbol: false }, emphasis: {showSymbol: false},
lineStyle: { color: 'red', width: 2 } lineStyle: {color: 'red', width: 2}
}, },
{ {
name: '钻速均值', name: '钻速均值',
type: 'line', type: 'line',
data: [[crosshair.x, axisRange.yAxis.min], [crosshair.x, axisRange.yAxis.max]], data: [[crosshair.x, axisRange.yAxis.min], [crosshair.x, axisRange.yAxis.max]],
lineStyle: { color: '#9eca7f', width: 2, type: 'dashed' }, lineStyle: {color: '#9eca7f', width: 2, type: 'dashed'},
symbol: 'none', symbol: 'none',
tooltip: { show: false } tooltip: {show: false}
}, },
{ {
name: '进尺均值', name: '进尺均值',
type: 'line', type: 'line',
data: [[crosshair.x - 500, crosshair.y], [crosshair.x + 500, crosshair.y]], data: [[crosshair.x - 500, crosshair.y], [crosshair.x + 500, crosshair.y]],
lineStyle: { color: '#f2ca6b', width: 2 }, lineStyle: {color: '#f2ca6b', width: 2},
symbol: 'none', symbol: 'none',
tooltip: { show: false } tooltip: {show: false}
}, },
...crosshairLines, ...crosshairLines,
...crosshairCenter, ...crosshairCenter,
......
...@@ -2,19 +2,19 @@ ...@@ -2,19 +2,19 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<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">
<CurveGraph ref="curveGraphRef" :jh="queryParams.jh" :famc="queryParams.famc" :qk="queryParams.qk" <CurveGraph ref="curveGraphRef" :jh="queryParams.jh" :famc="queryParams.famc" :qk="queryParams.qk"
:jhs="queryParams.jhs" :id="queryParams.id" /> :jhs="queryParams.jhs" :id="queryParams.id" :kcjs="queryParams.kc" :ztccsjs="queryParams.ztccs" />
</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" :jhs="queryParams.jhs" /> :qk="queryParams.qk" :jhs="queryParams.jhs"/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
...@@ -47,7 +47,9 @@ export default { ...@@ -47,7 +47,9 @@ export default {
jh: '', jh: '',
famc: '', famc: '',
qk: '', qk: '',
jhs: '' jhs: '',
kc: '',
ztccs: '',
}, },
// 标记是否是第一次进入页面 // 标记是否是第一次进入页面
isFirstLoad: true isFirstLoad: true
...@@ -56,14 +58,14 @@ export default { ...@@ -56,14 +58,14 @@ export default {
created() { created() {
// 获取路由参数(使用query) // 获取路由参数(使用query)
console.log('详情页面created,完整路由对象:', this.$route); console.log('详情页面created,完整路由对象:', this.$route);
let { id, jh, famc, qk, jhs } = this.$route.query || {}; let {id, jh, famc, qk, jhs, kc, ztccs} = this.$route.query || {};
console.log('路由query参数:', { id, jh, famc, qk, jhs }); 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 } = { ...cached, ...this.$route.query }); ({id, jh, famc, qk, jhs, kc, ztccs} = {...cached, ...this.$route.query});
console.log('使用缓存参数:', { id, jh, famc, qk, jhs }); console.log('使用缓存参数:', {id, jh, famc, qk, jhs, kc, ztccs});
} catch (e) { } catch (e) {
console.warn('读取缓存失败', e); console.warn('读取缓存失败', e);
} }
...@@ -74,6 +76,8 @@ export default { ...@@ -74,6 +76,8 @@ export default {
this.queryParams.famc = famc || ''; this.queryParams.famc = famc || '';
this.queryParams.qk = qk || ''; this.queryParams.qk = qk || '';
this.queryParams.jhs = jhs || ''; this.queryParams.jhs = jhs || '';
this.queryParams.kc = kc || '';
this.queryParams.ztccs = ztccs || '';
// 缓存参数,便于刷新后保留 // 缓存参数,便于刷新后保留
sessionStorage.setItem('djxxDetailParams', JSON.stringify(this.queryParams)); sessionStorage.setItem('djxxDetailParams', JSON.stringify(this.queryParams));
console.log('设置并缓存 queryParams:', this.queryParams); console.log('设置并缓存 queryParams:', this.queryParams);
...@@ -87,34 +91,39 @@ export default { ...@@ -87,34 +91,39 @@ export default {
}, },
activated() { activated() {
// 组件被 keep-alive 缓存时,返回本页会触发此钩子 // 组件被 keep-alive 缓存时,返回本页会触发此钩子
const { id, jh, famc, qk, jhs } = 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 || '';
this.queryParams.famc = famc || ''; this.queryParams.famc = famc || '';
this.queryParams.qk = qk || ''; this.queryParams.qk = qk || '';
this.queryParams.jhs = jhs || ''; this.queryParams.jhs = jhs || '';
this.queryParams.kc = kc || '';
this.queryParams.ztccs = ztccs || '';
sessionStorage.setItem('djxxDetailParams', JSON.stringify(this.queryParams)); sessionStorage.setItem('djxxDetailParams', JSON.stringify(this.queryParams));
this.$nextTick(() => this.refreshActiveTab()); this.$nextTick(() => this.refreshActiveTab());
} else { } else {
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) {
}
} }
}, },
beforeRouteUpdate(to, from, next) { beforeRouteUpdate(to, from, next) {
// 同一路由切换不同 query 时触发 // 同一路由切换不同 query 时触发
const { id, jh, famc, qk, jhs } = 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 || '';
this.queryParams.famc = famc || ''; this.queryParams.famc = famc || '';
this.queryParams.qk = qk || ''; this.queryParams.qk = qk || '';
this.queryParams.jhs = jhs || ''; this.queryParams.jhs = jhs || '';
this.queryParams.kc = kc || '';
this.queryParams.ztccs = ztccs || '';
sessionStorage.setItem('djxxDetailParams', JSON.stringify(this.queryParams)); sessionStorage.setItem('djxxDetailParams', JSON.stringify(this.queryParams));
this.$nextTick(() => this.refreshActiveTab()); this.$nextTick(() => this.refreshActiveTab());
} }
...@@ -123,13 +132,15 @@ export default { ...@@ -123,13 +132,15 @@ export default {
watch: { watch: {
// 当从列表页连续点击"查看"跳转到同一路由时,组件会复用,这里监听路由变化并刷新当前激活tab // 当从列表页连续点击"查看"跳转到同一路由时,组件会复用,这里监听路由变化并刷新当前激活tab
'$route.query'(to) { '$route.query'(to) {
const { id, jh, famc, qk, jhs } = 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 || '';
this.queryParams.famc = famc || ''; this.queryParams.famc = famc || '';
this.queryParams.qk = qk || ''; this.queryParams.qk = qk || '';
this.queryParams.jhs = jhs || ''; this.queryParams.jhs = jhs || '';
this.queryParams.kc = kc || '';
this.queryParams.ztccs = ztccs || '';
sessionStorage.setItem('djxxDetailParams', JSON.stringify(this.queryParams)); sessionStorage.setItem('djxxDetailParams', JSON.stringify(this.queryParams));
// 当前就在某个tab上,路由参数变更后需要立刻刷新该tab的数据 // 当前就在某个tab上,路由参数变更后需要立刻刷新该tab的数据
...@@ -174,7 +185,8 @@ export default { ...@@ -174,7 +185,8 @@ export default {
this.$modal.confirm('是否确认移除选中的记录?').then(() => { this.$modal.confirm('是否确认移除选中的记录?').then(() => {
// 这里可以调用API进行删除操作 // 这里可以调用API进行删除操作
this.$modal.msgSuccess("移除成功"); this.$modal.msgSuccess("移除成功");
}).catch(() => { }); }).catch(() => {
});
}, },
// 多选框选中数据 // 多选框选中数据
...@@ -230,7 +242,7 @@ export default { ...@@ -230,7 +242,7 @@ export default {
} }
} }
::v-deep .el-table__cell>.cell { ::v-deep .el-table__cell > .cell {
font-weight: normal; font-weight: normal;
} }
......
<template> <template>
<div class="drilling-chart-container" v-loading="loading" element-loading-text="加载中..." <div class="drilling-chart-container" v-loading="loading" element-loading-text="加载中..."
element-loading-background="rgba(255, 255, 255, 0.7)"> element-loading-background="rgba(255, 255, 255, 0.7)">
<div class="chart-wrapper"> <div>
<el-button type="primary" icon="el-icon-download" size="small" class="export-btn" @click="exportChart" <span class="well-label" style="margin-left: 10px">开次:</span>
<el-select v-model="kc" style="width: 100px" size="mini" clearable placeholder="请选择">
<el-option
v-for="item in kcData"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<span class="well-label" style="margin-left: 10px">钻头尺寸:</span>
<el-input v-model="ztccs" style="width: 100px" clearable size="mini"></el-input>
<el-button type="primary" style="margin-left: 10px" size="mini" @click="getList">查询</el-button>
<el-button type="primary" icon="el-icon-download" size="mini" @click="exportChart"
:disabled="!myChart"> :disabled="!myChart">
导出图片
</el-button> </el-button>
</div>
<div class="chart-wrapper">
<div id="drillingEfficiencyChartdj" class="chart"></div> <div id="drillingEfficiencyChartdj" class="chart"></div>
</div> </div>
<!-- <div class="optimal-values"> <!-- <div class="optimal-values">
...@@ -26,24 +41,24 @@ ...@@ -26,24 +41,24 @@
<!-- 钻头优选表格 --> <!-- 钻头优选表格 -->
<div class="table-section" v-if="tableData && tableData.length > 0"> <div class="table-section" v-if="tableData && tableData.length > 0">
<el-table :data="paginatedTableData" border stripe style="width: 100%" v-loading="tableLoading"> <el-table :data="paginatedTableData" border stripe style="width: 100%" v-loading="tableLoading">
<el-table-column prop="jh" label="井号" align="center" min-width="120" show-overflow-tooltip /> <el-table-column prop="jh" label="井号" align="center" min-width="120" show-overflow-tooltip/>
<el-table-column prop="ztcc" label="钻头尺寸mm" align="center" min-width="120" show-overflow-tooltip /> <el-table-column prop="ztcc" label="钻头尺寸mm" align="center" min-width="120" show-overflow-tooltip/>
<el-table-column prop="ztxh" label="钻头型号" align="center" min-width="150" show-overflow-tooltip /> <el-table-column prop="ztxh" label="钻头型号" align="center" min-width="150" show-overflow-tooltip/>
<el-table-column prop="yxlx" label="优选类型" align="center" min-width="120" show-overflow-tooltip /> <el-table-column prop="yxlx" label="优选类型" align="center" min-width="120" show-overflow-tooltip/>
</el-table> </el-table>
<!-- 分页组件 --> <!-- 分页组件 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="pagination.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageSize" :current-page="pagination.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
style="margin-top: 10px; text-align: right;" /> style="margin-top: 10px; text-align: right;"/>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { getDjztqxt } from '@/api/optimization/initialization'; import {getDjztqxt} from '@/api/optimization/initialization';
export default { export default {
props: { props: {
...@@ -66,6 +81,14 @@ export default { ...@@ -66,6 +81,14 @@ export default {
ztcc: { ztcc: {
type: String, type: String,
required: true, required: true,
},
kcjs: {
type: String,
required: true,
},
ztccsjs: {
type: String,
required: true,
} }
}, },
data() { data() {
...@@ -80,9 +103,33 @@ export default { ...@@ -80,9 +103,33 @@ export default {
pageNum: 1, pageNum: 1,
pageSize: 20, pageSize: 20,
total: 0 total: 0
} },
kc: '',
ztccs: '',
kcData: [
{
label: '1',
value: '1',
}, {
label: '2',
value: '2',
}, {
label: '3',
value: '3',
}, {
label: '4',
value: '4',
}, {
label: '5',
value: '5',
},
]
}; };
}, },
created() {
this.kc=this.kcjs
this.ztccs=this.ztccsjs
},
mounted() { mounted() {
// 不在挂载时自动请求数据,等待父组件触发 loadData() // 不在挂载时自动请求数据,等待父组件触发 loadData()
this.$once('hook:beforeDestroy', this.cleanup); this.$once('hook:beforeDestroy', this.cleanup);
...@@ -93,7 +140,7 @@ export default { ...@@ -93,7 +140,7 @@ export default {
this.getList(); this.getList();
}, },
getList() { getList() {
const params = { zbid: this.zbid, ztccs: this.ztcc, qk: this.qk }; const params = {zbid: this.zbid, ztccs: this.ztcc, qk: this.qk,kc:this.kc}
this.loading = true; this.loading = true;
this.tableLoading = true; this.tableLoading = true;
getDjztqxt(params) getDjztqxt(params)
...@@ -147,7 +194,7 @@ export default { ...@@ -147,7 +194,7 @@ export default {
} }
this.myChart = echarts.init(chartDom); this.myChart = echarts.init(chartDom);
// 解析接口数据(确保折线数据格式正确) // 解析接口数据(确保折线数据格式正确)
const { axisRange, scatterData, targetLineData, crosshair } = this.chartData; const {axisRange, scatterData, targetLineData, crosshair} = this.chartData;
// 数据顺序:[speed, depth, drillType, jh, cc] // 数据顺序:[speed, depth, drillType, jh, cc]
const scatter = scatterData.map(item => [item.speed, item.depth, item.drillType, item.jh, item.cc]); const scatter = scatterData.map(item => [item.speed, item.depth, item.drillType, item.jh, item.cc]);
// 折线数据必须为数组格式:[[钻速, 进尺], ...] // 折线数据必须为数组格式:[[钻速, 进尺], ...]
...@@ -166,30 +213,30 @@ export default { ...@@ -166,30 +213,30 @@ export default {
name: '十字线', name: '十字线',
type: 'line', type: 'line',
data: [[crosshair.y - 10, crosshair.x], [crosshair.y + 10, crosshair.x]], 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
}); });
crosshairLines.push({ crosshairLines.push({
name: '十字线', name: '十字线',
type: 'line', type: 'line',
data: [[crosshair.y, crosshair.x - 500], [crosshair.y, crosshair.x + 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
}); });
crosshairCenter.push({ crosshairCenter.push({
name: '十字线中心', name: '十字线中心',
type: 'scatter', type: 'scatter',
data: [[crosshair.y, crosshair.x]], data: [[crosshair.y, crosshair.x]],
symbolSize: 12, symbolSize: 12,
itemStyle: { color: 'orange', borderColor: '#fff', borderWidth: 2 } itemStyle: {color: 'orange', borderColor: '#fff', borderWidth: 2}
}); });
} }
// 图表配置项(核心:坐标轴触发,确保折线悬浮显示) // 图表配置项(核心:坐标轴触发,确保折线悬浮显示)
const option = { const option = {
title: { text: '钻头钻进能效分析', left: 'center' }, title: {text: '钻头钻进能效分析', left: 'center'},
tooltip: { tooltip: {
trigger: 'axis', // 基于坐标轴触发(不依赖数据点) trigger: 'axis', // 基于坐标轴触发(不依赖数据点)
axisPointer: { axisPointer: {
...@@ -236,11 +283,11 @@ export default { ...@@ -236,11 +283,11 @@ 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', nameLocation: 'center',
nameGap: 30, nameGap: 30,
axisTick: { show: true }, axisTick: {show: true},
axisLine: { show: true } axisLine: {show: true}
}, },
yAxis: { yAxis: {
name: '进尺m', name: '进尺m',
...@@ -249,8 +296,8 @@ export default { ...@@ -249,8 +296,8 @@ export default {
// interval: axisRange.yAxis.interval, // interval: axisRange.yAxis.interval,
nameLocation: 'center', nameLocation: 'center',
nameGap: 40, nameGap: 40,
axisTick: { show: true }, axisTick: {show: true},
axisLine: { show: true } axisLine: {show: true}
}, },
series: [ series: [
{ {
...@@ -261,24 +308,24 @@ export default { ...@@ -261,24 +308,24 @@ export default {
// 彻底隐藏所有点(包括悬浮时) // 彻底隐藏所有点(包括悬浮时)
symbol: 'none', symbol: 'none',
showSymbol: false, showSymbol: false,
emphasis: { showSymbol: false }, emphasis: {showSymbol: false},
lineStyle: { color: 'red', width: 2 } lineStyle: {color: 'red', width: 2}
}, },
{ {
name: '钻速均值', name: '钻速均值',
type: 'line', type: 'line',
data: [[crosshair.x, axisRange.yAxis.min], [crosshair.x, axisRange.yAxis.max]], data: [[crosshair.x, axisRange.yAxis.min], [crosshair.x, axisRange.yAxis.max]],
lineStyle: { color: '#9eca7f', width: 2, type: 'dashed' }, lineStyle: {color: '#9eca7f', width: 2, type: 'dashed'},
symbol: 'none', symbol: 'none',
tooltip: { show: false } tooltip: {show: false}
}, },
{ {
name: '进尺均值', name: '进尺均值',
type: 'line', type: 'line',
data: [[crosshair.x - 500, crosshair.y], [crosshair.x + 500, crosshair.y]], data: [[crosshair.x - 500, crosshair.y], [crosshair.x + 500, crosshair.y]],
lineStyle: { color: '#f2ca6b', width: 2 }, lineStyle: {color: '#f2ca6b', width: 2},
symbol: 'none', symbol: 'none',
tooltip: { show: false } tooltip: {show: false}
}, },
...crosshairLines, ...crosshairLines,
...crosshairCenter, ...crosshairCenter,
......
...@@ -2,13 +2,14 @@ ...@@ -2,13 +2,14 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<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"
:ztcc="queryParams.ztcc" :jhs="queryParams.jhs" :cw="queryParams.cw" /> :ztcc="queryParams.ztcc" :jhs="queryParams.jhs" :cw="queryParams.cw" :wjrqjsjs="queryParams.wjrqjs" :wjrqksjs="queryParams.wjrqks"/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="曲线图形" name="curveGraph" lazy> <el-tab-pane label="钻头优选" name="curveGraph">
<CurveGraph ref="curveGraphRef" :jh="queryParams.jh" :famc="queryParams.famc" :qk="queryParams.qk" <CurveGraph ref="curveGraphRef" :jh="queryParams.jh" :famc="queryParams.famc" :qk="queryParams.qk"
:jhs="queryParams.jhs" :zbid="queryParams.zbid" :ztcc="queryParams.ztcc" /> :jhs="queryParams.jhs" :zbid="queryParams.zbid" :ztcc="queryParams.ztcc" :kcjs="queryParams.kc"
:ztccsjs="queryParams.ztccs"/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
...@@ -42,7 +43,9 @@ export default { ...@@ -42,7 +43,9 @@ export default {
jhs: '', jhs: '',
ztcc: '', ztcc: '',
zbid: '', zbid: '',
cw: '' cw: '',
wjrqks: '',
wjrqjs: ''
}, },
// 标记是否是第一次进入页面 // 标记是否是第一次进入页面
isFirstLoad: true isFirstLoad: true
...@@ -51,8 +54,8 @@ export default { ...@@ -51,8 +54,8 @@ export default {
created() { created() {
// 获取路由参数 // 获取路由参数
console.log('详情页面created,完整路由对象:', this.$route); console.log('详情页面created,完整路由对象:', this.$route);
const { jh, famc, qk, jhs, ztcc, zbid, cw } = this.$route.params; const {jh, famc, qk, jhs, ztcc, zbid, cw, kc, ztccs,wjrqjs,wjrqks} = this.$route.params;
console.log('路由参数:', { jh, famc, qk, jhs, ztcc, zbid, cw }); console.log('路由参数:', {jh, famc, qk, jhs, ztcc, zbid, cw, kc, ztccs,wjrqjs,wjrqks});
// 检查参数是否为空或undefined // 检查参数是否为空或undefined
// if (jh && jh !== 'undefined' && jh !== 'null') { // if (jh && jh !== 'undefined' && jh !== 'null') {
...@@ -63,6 +66,10 @@ export default { ...@@ -63,6 +66,10 @@ export default {
this.queryParams.ztcc = ztcc || '' this.queryParams.ztcc = ztcc || ''
this.queryParams.zbid = zbid || '' this.queryParams.zbid = zbid || ''
this.queryParams.cw = cw || '' this.queryParams.cw = cw || ''
this.queryParams.kc = kc || '';
this.queryParams.ztccs = ztccs || '';
this.queryParams.wjrqks = wjrqks || '';
this.queryParams.wjrqjs = wjrqjs || '';
console.log('设置 queryParams:', this.queryParams); console.log('设置 queryParams:', this.queryParams);
// 强制默认展示“数据表格”Tab // 强制默认展示“数据表格”Tab
this.activeTab = 'dataTable'; this.activeTab = 'dataTable';
...@@ -102,7 +109,8 @@ export default { ...@@ -102,7 +109,8 @@ export default {
this.$modal.confirm('是否确认移除选中的记录?').then(() => { this.$modal.confirm('是否确认移除选中的记录?').then(() => {
// 这里可以调用API进行删除操作 // 这里可以调用API进行删除操作
this.$modal.msgSuccess("移除成功"); this.$modal.msgSuccess("移除成功");
}).catch(() => { }); }).catch(() => {
});
}, },
// 多选框选中数据 // 多选框选中数据
...@@ -156,7 +164,7 @@ export default { ...@@ -156,7 +164,7 @@ export default {
} }
} }
::v-deep .el-table__cell>.cell { ::v-deep .el-table__cell > .cell {
font-weight: normal; font-weight: normal;
} }
......
...@@ -3,12 +3,25 @@ ...@@ -3,12 +3,25 @@
<div v-if="jh" class="well-number-display"> <div v-if="jh" class="well-number-display">
<span class="well-label">井号:</span> <span class="well-label">井号:</span>
<span class="well-number">{{ jh }}</span> <span class="well-number">{{ jh }}</span>
<span class="well-label" style="margin-left: 10px">开次:</span>
<el-select v-model="kc" style="width: 100px" size="mini" clearable placeholder="请选择">
<el-option
v-for="item in kcData"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<span class="well-label" style="margin-left: 10px">钻头尺寸:</span>
<el-input v-model="ztccs" style="width: 100px" clearable size="mini"></el-input>
<el-button type="primary" size="mini" @click="getList">查询</el-button>
<el-button type="primary" icon="el-icon-download" size="mini" @click="exportChart"
:disabled="!myChart"></el-button>
</div> </div>
<div class="chart-wrapper"> <div class="chart-wrapper">
<el-button type="primary" icon="el-icon-download" size="small" class="export-btn" @click="exportChart"
:disabled="!myChart">
导出图片
</el-button>
<div id="drillingEfficiencyChart" class="chart"></div> <div id="drillingEfficiencyChart" class="chart"></div>
</div> </div>
</div> </div>
...@@ -16,7 +29,7 @@ ...@@ -16,7 +29,7 @@
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { getqxt } from '@/api/optimization/initialization'; import {getqxt} from '@/api/optimization/initialization';
export default { export default {
props: { props: {
...@@ -29,7 +42,27 @@ export default { ...@@ -29,7 +42,27 @@ export default {
return { return {
chartData: null, chartData: null,
myChart: null, myChart: null,
resizeHandler: null resizeHandler: null,
kc:'',
ztccs:'',
kcData:[
{
label:'1',
value:'1',
},{
label:'2',
value:'2',
},{
label:'3',
value:'3',
},{
label:'4',
value:'4',
},{
label:'5',
value:'5',
},
]
}; };
}, },
mounted() { mounted() {
...@@ -38,7 +71,7 @@ export default { ...@@ -38,7 +71,7 @@ export default {
}, },
methods: { methods: {
getList() { getList() {
const params = { jhe: this.jh }; const params = {jhe: this.jh,kc:this.kc,ztccs:this.ztccs};
getqxt(params) getqxt(params)
.then(res => { .then(res => {
console.log('接口返回数据:', res); console.log('接口返回数据:', res);
...@@ -52,6 +85,7 @@ export default { ...@@ -52,6 +85,7 @@ export default {
}); });
}, },
initChart() { initChart() {
if (!this.chartData) { if (!this.chartData) {
const chartDom = document.getElementById('drillingEfficiencyChart'); const chartDom = document.getElementById('drillingEfficiencyChart');
...@@ -75,7 +109,7 @@ export default { ...@@ -75,7 +109,7 @@ export default {
} }
this.myChart = echarts.init(chartDom); this.myChart = echarts.init(chartDom);
// 解析接口数据(确保折线数据格式正确) // 解析接口数据(确保折线数据格式正确)
const { axisRange, scatterData, targetLineData, crosshair } = this.chartData; const {axisRange, scatterData, targetLineData, crosshair} = this.chartData;
// 数据顺序:[speed, depth, drillType, jh, cc] // 数据顺序:[speed, depth, drillType, jh, cc]
const scatter = scatterData.map(item => [item.speed, item.depth, item.drillType, item.jh, item.cc]); const scatter = scatterData.map(item => [item.speed, item.depth, item.drillType, item.jh, item.cc]);
// 折线数据必须为数组格式:[[钻速, 进尺], ...] // 折线数据必须为数组格式:[[钻速, 进尺], ...]
...@@ -95,29 +129,29 @@ export default { ...@@ -95,29 +129,29 @@ export default {
name: '十字线', name: '十字线',
type: 'line', type: 'line',
data: [[crosshair.y - 10, crosshair.x], [crosshair.y + 10, crosshair.x]], 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
}); });
crosshairLines.push({ crosshairLines.push({
name: '十字线', name: '十字线',
type: 'line', type: 'line',
data: [[crosshair.y, crosshair.x - 500], [crosshair.y, crosshair.x + 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
}); });
crosshairCenter.push({ crosshairCenter.push({
name: '十字线中心', name: '十字线中心',
type: 'scatter', type: 'scatter',
data: [[crosshair.y, crosshair.x]], data: [[crosshair.y, crosshair.x]],
symbolSize: 12, symbolSize: 12,
itemStyle: { color: 'orange', borderColor: '#fff', borderWidth: 2 } itemStyle: {color: 'orange', borderColor: '#fff', borderWidth: 2}
}); });
} }
// 图表配置项(核心:坐标轴触发,确保折线悬浮显示) // 图表配置项(核心:坐标轴触发,确保折线悬浮显示)
const option = { const option = {
title: { text: '钻头钻进能效分析', left: 'center' }, title: {text: '钻头钻进能效分析', left: 'center'},
tooltip: { tooltip: {
trigger: 'axis', // 基于坐标轴触发(不依赖数据点) trigger: 'axis', // 基于坐标轴触发(不依赖数据点)
axisPointer: { axisPointer: {
...@@ -164,11 +198,11 @@ export default { ...@@ -164,11 +198,11 @@ 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', nameLocation: 'center',
nameGap: 30, nameGap: 30,
axisTick: { show: true }, axisTick: {show: true},
axisLine: { show: true } axisLine: {show: true}
}, },
yAxis: { yAxis: {
name: '进尺', name: '进尺',
...@@ -177,8 +211,8 @@ export default { ...@@ -177,8 +211,8 @@ export default {
interval: axisRange.yAxis.interval, interval: axisRange.yAxis.interval,
nameLocation: 'center', nameLocation: 'center',
nameGap: 40, nameGap: 40,
axisTick: { show: true }, axisTick: {show: true},
axisLine: { show: true } axisLine: {show: true}
}, },
series: [ series: [
{ {
...@@ -189,24 +223,24 @@ export default { ...@@ -189,24 +223,24 @@ export default {
// 彻底隐藏所有点(包括悬浮时) // 彻底隐藏所有点(包括悬浮时)
symbol: 'none', symbol: 'none',
showSymbol: false, showSymbol: false,
emphasis: { showSymbol: false }, emphasis: {showSymbol: false},
lineStyle: { color: 'red', width: 2 } lineStyle: {color: 'red', width: 2}
}, },
{ {
name: '钻速均值', name: '钻速均值',
type: 'line', type: 'line',
data: [[crosshair.x, axisRange.yAxis.min], [crosshair.x, axisRange.yAxis.max]], data: [[crosshair.x, axisRange.yAxis.min], [crosshair.x, axisRange.yAxis.max]],
lineStyle: { color: '#9eca7f', width: 2, type: 'dashed' }, lineStyle: {color: '#9eca7f', width: 2, type: 'dashed'},
symbol: 'none', symbol: 'none',
tooltip: { show: false } tooltip: {show: false}
}, },
{ {
name: '进尺均值', name: '进尺均值',
type: 'line', type: 'line',
data: [[crosshair.x - 500, crosshair.y], [crosshair.x + 500, crosshair.y]], data: [[crosshair.x - 500, crosshair.y], [crosshair.x + 500, crosshair.y]],
lineStyle: { color: '#f2ca6b', width: 2 }, lineStyle: {color: '#f2ca6b', width: 2},
symbol: 'none', symbol: 'none',
tooltip: { show: false } tooltip: {show: false}
}, },
...crosshairLines, ...crosshairLines,
...crosshairCenter, ...crosshairCenter,
......
<template> <template>
<div class="chart-container"> <div class="chart-container">
<div v-if="jh" class="well-number-display"> <div v-if="jh" style="margin: 0px 10px">
<span class="well-label">井号:</span> <span class="well-label">井号:</span>
<span class="well-number">{{ jh }}</span> <span class="well-number">{{ jh }}</span>
</div>
<div class="export-button-container"> <span class="well-label" style="margin-left: 10px">开次:</span>
<el-select v-model="kc" style="width: 100px" size="mini" clearable placeholder="请选择">
<el-option
v-for="item in kcData"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<span class="well-label" style="margin-left: 10px">钻头尺寸:</span>
<el-input v-model="ztccs" style="width: 100px" clearable size="mini"></el-input>
<el-button type="primary" style="margin-left: 10px" size="mini" @click="getList">查询</el-button>
<el-button <el-button
class="export-btn" type="primary"
@click="exportChart" @click="exportChart"
:disabled="loading || !myChart" :disabled="loading || !myChart"
title="导出图表为图片" title="导出图表为图片"
icon="el-icon-download" icon="el-icon-download"
> size="mini"
导出 > </el-button>
</el-button>
</div> </div>
<div class="chart-layout"> <div class="chart-layout">
<div id="mainzft" class="chart" ref="chartRef"></div> <div id="mainzft" class="chart" ref="chartRef"></div>
<aside v-if="legendItems && legendItems.length" class="strata-legend"> <aside v-if="legendItems && legendItems.length" class="strata-legend">
<div class="legend-header">层位图例</div> <div class="legend-header">层位图例</div>
<div class="legend-list"> <div class="legend-list">
<div <div
v-for="(item, index) in legendItems" v-for="(item, index) in legendItems"
...@@ -70,6 +82,26 @@ export default { ...@@ -70,6 +82,26 @@ export default {
lastStackedAreas: null, lastStackedAreas: null,
lastChartConfig: null, lastChartConfig: null,
lastXAxisLabels: null, lastXAxisLabels: null,
kc:'',
ztccs:'',
kcData:[
{
label:'1',
value:'1',
},{
label:'2',
value:'2',
},{
label:'3',
value:'3',
},{
label:'4',
value:'4',
},{
label:'5',
value:'5',
},
]
}; };
}, },
computed: { computed: {
...@@ -295,7 +327,7 @@ export default { ...@@ -295,7 +327,7 @@ export default {
// 获取数据 // 获取数据
async getList() { async getList() {
try { try {
const res = await getZft({ jhe: this.jh }); const res = await getZft({ jhe: this.jh,kc:this.kc,ztccs:this.ztccs });
this.mockData = res?.mockData || {}; this.mockData = res?.mockData || {};
const legendList = Array.isArray(res?.tlList) const legendList = Array.isArray(res?.tlList)
? res.tlList ? res.tlList
...@@ -702,7 +734,7 @@ export default { ...@@ -702,7 +734,7 @@ export default {
type: "bar", type: "bar",
stack: "total", stack: "total",
silent: true, silent: true,
barWidth: "8%", barWidth: "10%",
itemStyle: { itemStyle: {
borderColor: "transparent", borderColor: "transparent",
color: "transparent", color: "transparent",
...@@ -979,7 +1011,7 @@ export default { ...@@ -979,7 +1011,7 @@ export default {
gap: 5px; gap: 5px;
align-items: stretch; align-items: stretch;
justify-content: flex-start; justify-content: flex-start;
overflow: hidden; overflow: auto;
} }
.strata-legend { .strata-legend {
...@@ -1080,7 +1112,7 @@ export default { ...@@ -1080,7 +1112,7 @@ export default {
flex: 1; flex: 1;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
height: 100%; height: 110%;
min-height: 400px; min-height: 400px;
display: block; display: block;
border-radius: 16px; border-radius: 16px;
......
<template> <template>
<div class="app-container"> <div class="app-container">
<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="wellDepthStructure">
<WellDepthStructure v-if="activeTab === 'wellDepthStructure'" :jh="queryParams.jh"
:key="`wellDepthStructure-${queryParams.jh}`" />
</el-tab-pane>
<el-tab-pane label="钻头使用数据" name="dataTable">
<DataTable v-if="activeTab === 'dataTable'" :jh="queryParams.jh" :key="`dataTable-${queryParams.jh}`" /> <DataTable v-if="activeTab === 'dataTable'" :jh="queryParams.jh" :key="`dataTable-${queryParams.jh}`" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="曲线图形" name="curveGraph"> <el-tab-pane label="钻头优选" name="curveGraph">
<CurveGraph v-if="activeTab === 'curveGraph'" :jh="queryParams.jh" <CurveGraph v-if="activeTab === 'curveGraph'" :jh="queryParams.jh"
:key="`curveGraph-${queryParams.jh}`" /> :key="`curveGraph-${queryParams.jh}`" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="直方图形" name="histogramGraph"> <el-tab-pane label="钻头能效分析" name="histogramGraph">
<HistogramGraph v-if="activeTab === 'histogramGraph'" :jh="queryParams.jh" <HistogramGraph v-if="activeTab === 'histogramGraph'" :jh="queryParams.jh"
:key="`histogramGraph-${queryParams.jh}`" /> :key="`histogramGraph-${queryParams.jh}`" />
</el-tab-pane> </el-tab-pane>
...@@ -32,7 +36,7 @@ ...@@ -32,7 +36,7 @@
:jh="queryParams.jh" :key="`drillingCurve-${queryParams.jh}`" /> :jh="queryParams.jh" :key="`drillingCurve-${queryParams.jh}`" />
</keep-alive> </keep-alive>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="录井钻时图" name="drillingTimeChart"> <el-tab-pane label="钻时及功能参数" name="drillingTimeChart">
<DrillingTimeChart v-if="activeTab === 'drillingTimeChart'" :jh="queryParams.jh" <DrillingTimeChart v-if="activeTab === 'drillingTimeChart'" :jh="queryParams.jh"
:key="`drillingTimeChart-${queryParams.jh}`" /> :key="`drillingTimeChart-${queryParams.jh}`" />
</el-tab-pane> </el-tab-pane>
...@@ -40,10 +44,7 @@ ...@@ -40,10 +44,7 @@
<WellboreTrajectory v-if="activeTab === 'wellboreTrajectory'" :jh="queryParams.jh" <WellboreTrajectory v-if="activeTab === 'wellboreTrajectory'" :jh="queryParams.jh"
:key="`wellboreTrajectory-${queryParams.jh}`" /> :key="`wellboreTrajectory-${queryParams.jh}`" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="井身结构" name="wellDepthStructure">
<WellDepthStructure v-if="activeTab === 'wellDepthStructure'" :jh="queryParams.jh"
:key="`wellDepthStructure-${queryParams.jh}`" />
</el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</template> </template>
...@@ -76,7 +77,7 @@ export default { ...@@ -76,7 +77,7 @@ export default {
data() { data() {
return { return {
// 当前激活的tab // 当前激活的tab
activeTab: 'dataTable', activeTab: 'wellDepthStructure',
// 显示搜索条件 // 显示搜索条件
showSearch: true, showSearch: true,
// 遮罩层 // 遮罩层
......
...@@ -778,7 +778,7 @@ export default { ...@@ -778,7 +778,7 @@ export default {
}, },
handleChangeAr() { handleChangeAr() {
if (this.radio == "3") { if (this.formAr.radio == "3") {
var item = this.sfcs; var item = this.sfcs;
console.log(item, "item"); console.log(item, "item");
this.$router.push({ this.$router.push({
...@@ -789,7 +789,7 @@ export default { ...@@ -789,7 +789,7 @@ export default {
qkmc: item.qkmc, qkmc: item.qkmc,
}, },
}); });
} else if (this.radio == "6") { } else if (this.formAr.radio == "6") {
this.$message({ this.$message({
message: "正在开发中!", message: "正在开发中!",
type: "warning", type: "warning",
......
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