Skip to content

P
pdczt_qd
Commit 0a22694f by jiang'yun
Options

修改

parent 4059f610
Showing with 749 additions and 453 deletions
src/views/efficiencyAnalysis/jcxx/components/DrillingTimeChart.vue
...@@ -15,37 +15,37 @@ ...@@ -15,37 +15,37 @@
</template> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from "echarts";
import { getljqxData } from '@/api/system/cjsjLas'; import { getljqxData } from "@/api/system/cjsjLas";
import { listLjSssjSd } from '@/api/optimization/ljSssjSd'; import { listLjSssjSd } from "@/api/optimization/ljSssjSd";
export default { export default {
name: "DrillingTimeChart", name: "DrillingTimeChart",
props: { props: {
jh: { jh: {
type: String, type: String,
default: '' default: "",
} },
}, },
data() { data() {
return { return {
chartData: null, chartData: null,
myChart: null, myChart: null,
resizeHandler: null, resizeHandler: null,
loading: false loading: false,
}; };
}, },
mounted() { mounted() {
this.loadChartData(); this.loadChartData();
this.$once('hook:beforeDestroy', this.cleanup); this.$once("hook:beforeDestroy", this.cleanup);
}, },
watch: { watch: {
jh: { jh: {
handler() { handler() {
this.loadChartData(); this.loadChartData();
}, },
immediate: false immediate: false,
} },
}, },
methods: { methods: {
loadChartData() { loadChartData() {
...@@ -54,16 +54,15 @@ export default { ...@@ -54,16 +54,15 @@ export default {
} }
this.loading = true; this.loading = true;
// 获取录井曲线数据和录井整米数据 // 获取录井曲线数据和录井整米数据
Promise.all([ Promise.all([getljqxData({ jh: this.jh }), listLjSssjSd({ jh: this.jh })])
getljqxData({ jh: this.jh }), .then(([ljqxRes, ljSssjRes]) => {
listLjSssjSd({ jh: this.jh })
]).then(([ljqxRes, ljSssjRes]) => {
this.chartData = this.processData(ljqxRes, ljSssjRes); this.chartData = this.processData(ljqxRes, ljSssjRes);
this.initChart(); this.initChart();
this.loading = false; this.loading = false;
}).catch(error => { })
console.error('获取数据失败:', error); .catch((error) => {
this.$message.error('获取数据失败，请重试'); console.error("获取数据失败:", error);
this.$message.error("获取数据失败，请重试");
// 如果API失败，使用模拟数据 // 如果API失败，使用模拟数据
this.chartData = this.generateMockData(); this.chartData = this.generateMockData();
this.initChart(); this.initChart();
...@@ -78,46 +77,69 @@ export default { ...@@ -78,46 +77,69 @@ export default {
return []; return [];
} }
// 如果数据是对象数组格式 [{dept: xxx, value: xxx}, ...] // 如果数据是对象数组格式 [{dept: xxx, value: xxx}, ...]
if (typeof dataList[0] === 'object' && dataList[0].hasOwnProperty('dept')) { if (
return dataList.map(item => ({ typeof dataList[0] === "object" &&
dataList[0].hasOwnProperty("dept")
) {
return dataList.map((item) => ({
depth: item.dept || item.depth, depth: item.dept || item.depth,
value: item[fieldName] || item.value || item value: item[fieldName] || item.value || item,
})); }));
} }
// 如果是普通数组，需要从录井整米数据中获取深度 // 如果是普通数组，需要从录井整米数据中获取深度
return dataList.map((value, index) => { return dataList
const depth = ljSssjRes && ljSssjRes.rows && ljSssjRes.rows[index] .map((value, index) => {
const depth =
ljSssjRes && ljSssjRes.rows && ljSssjRes.rows[index]
? ljSssjRes.rows[index].js ? ljSssjRes.rows[index].js
: null; : null;
return { depth, value }; return { depth, value };
}).filter(item => item.depth !== null && item.value !== null && item.value !== undefined); })
.filter(
(item) =>
item.depth !== null &&
item.value !== null &&
item.value !== undefined
);
}; };
// 处理钻时数据（从录井整米数据中获取） // 处理钻时数据（从录井整米数据中获取）
let drillingTimeData = []; let drillingTimeData = [];
if (ljSssjRes && ljSssjRes.rows && Array.isArray(ljSssjRes.rows)) { if (ljSssjRes && ljSssjRes.rows && Array.isArray(ljSssjRes.rows)) {
drillingTimeData = ljSssjRes.rows drillingTimeData = ljSssjRes.rows
.filter(item => item.js !== null && item.js !== undefined && item.zs !== null && item.zs !== undefined) .filter(
.map(item => ({ (item) =>
item.js !== null &&
item.js !== undefined &&
item.zs !== null &&
item.zs !== undefined
)
.map((item) => ({
depth: item.js, depth: item.js,
value: item.zs value: item.zs,
})); }));
} }
// 处理其他数据 // 处理其他数据
const torqueData = processArrayData(ljqxRes.njList, 'nj'); const torqueData = processArrayData(ljqxRes.njList, "nj");
const standpipePressureData = processArrayData(ljqxRes.lyList, 'ly'); const standpipePressureData = processArrayData(ljqxRes.lyList, "ly");
const drillingPressureData = processArrayData(ljqxRes.zyList, 'zy'); const drillingPressureData = processArrayData(ljqxRes.zyList, "zy");
const rpmData = processArrayData(ljqxRes.zs1List, 'zs1'); const rpmData = processArrayData(ljqxRes.zs1List, "zs1");
// 处理泵冲数据（总泵冲） // 处理泵冲数据（总泵冲）
let pumpStrokeData = []; let pumpStrokeData = [];
if (ljSssjRes && ljSssjRes.rows && Array.isArray(ljSssjRes.rows)) { if (ljSssjRes && ljSssjRes.rows && Array.isArray(ljSssjRes.rows)) {
pumpStrokeData = ljSssjRes.rows pumpStrokeData = ljSssjRes.rows
.filter(item => item.js !== null && item.js !== undefined && item.zbc !== null && item.zbc !== undefined) .filter(
.map(item => ({ (item) =>
item.js !== null &&
item.js !== undefined &&
item.zbc !== null &&
item.zbc !== undefined
)
.map((item) => ({
depth: item.js, depth: item.js,
value: item.zbc value: item.zbc,
})); }));
} }
...@@ -127,7 +149,7 @@ export default { ...@@ -127,7 +149,7 @@ export default {
standpipePressure: standpipePressureData, standpipePressure: standpipePressureData,
drillingPressure: drillingPressureData, drillingPressure: drillingPressureData,
rpm: rpmData, rpm: rpmData,
pumpStroke: pumpStrokeData pumpStroke: pumpStrokeData,
}; };
}, },
...@@ -161,27 +183,27 @@ export default { ...@@ -161,27 +183,27 @@ export default {
standpipePressure: standpipePressureData, standpipePressure: standpipePressureData,
drillingPressure: drillingPressureData, drillingPressure: drillingPressureData,
rpm: rpmData, rpm: rpmData,
pumpStroke: pumpStrokeData pumpStroke: pumpStrokeData,
}; };
}, },
initChart() { initChart() {
if (!this.chartData) { if (!this.chartData) {
const chartDom = document.getElementById('drillingTimeChart'); const chartDom = document.getElementById("drillingTimeChart");
if (chartDom && this.myChart) { if (chartDom && this.myChart) {
this.myChart.clear(); this.myChart.clear();
} }
return; return;
} }
const chartDom = document.getElementById('drillingTimeChart'); const chartDom = document.getElementById("drillingTimeChart");
if (!chartDom) { if (!chartDom) {
console.error('未找到图表容器'); console.error("未找到图表容器");
return; return;
} }
if (chartDom.offsetWidth === 0 || chartDom.offsetHeight === 0) { if (chartDom.offsetWidth === 0 || chartDom.offsetHeight === 0) {
console.log('容器尺寸为0，200ms后重试'); console.log("容器尺寸为0，200ms后重试");
setTimeout(() => this.initChart(), 200); setTimeout(() => this.initChart(), 200);
return; return;
} }
...@@ -192,7 +214,14 @@ export default { ...@@ -192,7 +214,14 @@ export default {
this.myChart = echarts.init(chartDom); this.myChart = echarts.init(chartDom);
const { drillingTime, torque, standpipePressure, drillingPressure, rpm, pumpStroke } = this.chartData; const {
drillingTime,
torque,
standpipePressure,
drillingPressure,
rpm,
pumpStroke,
} = this.chartData;
// 转换数据格式为 [depth, value] 格式 // 转换数据格式为 [depth, value] 格式
const convertToChartData = (dataArray) => { const convertToChartData = (dataArray) => {
...@@ -200,13 +229,20 @@ export default { ...@@ -200,13 +229,20 @@ export default {
return []; return [];
} }
return dataArray return dataArray
.filter(item => item && item.depth !== null && item.depth !== undefined && item.value !== null && item.value !== undefined) .filter(
.map(item => [item.depth, item.value]) (item) =>
item &&
item.depth !== null &&
item.depth !== undefined &&
item.value !== null &&
item.value !== undefined
)
.map((item) => [item.depth, item.value])
.sort((a, b) => a[0] - b[0]); // 按深度排序 .sort((a, b) => a[0] - b[0]); // 按深度排序
}; };
const drillingTimeChartData = convertToChartData(drillingTime); const drillingTimeChartData = convertToChartData(drillingTime);
console.log(drillingTimeChartData, 'drillingTimeChartData'); console.log(drillingTimeChartData, "drillingTimeChartData");
const torqueChartData = convertToChartData(torque); const torqueChartData = convertToChartData(torque);
const standpipePressureChartData = convertToChartData(standpipePressure); const standpipePressureChartData = convertToChartData(standpipePressure);
const drillingPressureChartData = convertToChartData(drillingPressure); const drillingPressureChartData = convertToChartData(drillingPressure);
...@@ -215,216 +251,213 @@ export default { ...@@ -215,216 +251,213 @@ export default {
// 计算深度范围 // 计算深度范围
const allDepths = [ const allDepths = [
...drillingTimeChartData.map(d => d[0]), ...drillingTimeChartData.map((d) => d[0]),
...torqueChartData.map(d => d[0]), ...torqueChartData.map((d) => d[0]),
...standpipePressureChartData.map(d => d[0]), ...standpipePressureChartData.map((d) => d[0]),
...drillingPressureChartData.map(d => d[0]), ...drillingPressureChartData.map((d) => d[0]),
...rpmChartData.map(d => d[0]), ...rpmChartData.map((d) => d[0]),
...pumpStrokeChartData.map(d => d[0]) ...pumpStrokeChartData.map((d) => d[0]),
].filter(d => d !== null && d !== undefined); ].filter((d) => d !== null && d !== undefined);
const minDepth = allDepths.length > 0 ? Math.floor(Math.min(...allDepths) / 10) * 10 : 0; const minDepth =
const maxDepth = allDepths.length > 0 ? Math.ceil(Math.max(...allDepths) / 10) * 10 : 1000; allDepths.length > 0 ? Math.floor(Math.min(...allDepths) / 10) * 10 : 0;
const maxDepth =
allDepths.length > 0
? Math.ceil(Math.max(...allDepths) / 10) * 10
: 1000;
const option = { const option = {
title: { title: {
text: '录井钻时图', text: "录井钻时图",
left: 'center', left: "center",
top: 10 top: 10,
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
axisPointer: { axisPointer: {
type: 'cross' type: "cross",
}, },
formatter: (params) => { formatter: (params) => {
if (!params || params.length === 0) { if (!params || params.length === 0) {
return ''; return "";
} }
// 获取深度值（x轴的值） // 获取深度值（x轴的值）
const depth = params[0].axisValue || (params[0].data && params[0].data[0]) || ''; const depth =
params[0].axisValue ||
(params[0].data && params[0].data[0]) ||
"";
let result = `井深: ${depth} m<br/>`; let result = `井深: ${depth} m<br/>`;
params.forEach(param => { params.forEach((param) => {
if (param.value !== null && param.value !== undefined) { if (param.value !== null && param.value !== undefined) {
const unit = param.seriesName.includes('钻时') ? 'min/m' : const unit = param.seriesName.includes("钻时")
param.seriesName.includes('扭矩') ? 'kN•m' : ? "min/m"
param.seriesName.includes('立压') ? 'MPa' : : param.seriesName.includes("扭矩")
param.seriesName.includes('钻压') ? 'kN' : ? "kN•m"
param.seriesName.includes('转速') ? 'rpm' : ''; : param.seriesName.includes("立压")
result += `${param.seriesName}: ${param.value}${unit ? ' ' + unit : ''}<br/>`; ? "MPa"
: param.seriesName.includes("钻压")
? "kN"
: param.seriesName.includes("转速")
? "rpm"
: "";
result += `${param.seriesName}: ${param.value}${
unit ? " " + unit : ""
}<br/>`;
} }
}); });
return result; return result;
} },
}, },
legend: { legend: {
data: ['钻时 (min/m)', '扭矩 (kN•m)', '立压 (MPa)', '钻压 (kN)', '转速 (rpm)', '泵冲'], data: [
"钻时 (min/m)",
"扭矩 (kN•m)",
"立压 (MPa)",
"钻压 (kN)",
"转速 (rpm)",
"泵冲",
],
top: 40, top: 40,
right: 50, right: 50,
icon: 'rect', icon: "rect",
itemWidth: 20, itemWidth: 20,
itemHeight: 2, itemHeight: 2,
itemGap: 10 itemGap: 10,
}, },
grid: { grid: {
left: '3%', left: "3%",
right: '4%', right: "4%",
bottom: '3%', bottom: "3%",
top: '15%', top: "15%",
containLabel: true containLabel: true,
}, },
xAxis: { xAxis: {
type: 'value', type: "value",
name: '井深 (m)', name: "井深 (m)",
nameLocation: 'center', nameLocation: "center",
nameGap: 30, nameGap: 30,
axisLabel: { axisLabel: {
formatter: '{value}' formatter: "{value}",
}, },
min: minDepth, min: minDepth,
max: maxDepth max: maxDepth,
}, },
yAxis: [ yAxis: [
{ {
type: 'value', type: "value",
name: '钻时 / 扭矩 / 立压', name: "钻时 / 扭矩 / 立压",
position: 'left', position: "left",
nameLocation: 'center', nameLocation: "center",
nameGap: 50, nameGap: 50,
axisLabel: { axisLabel: {
formatter: '{value}' formatter: "{value}",
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: 'dashed' type: "dashed",
} },
} },
}, },
{ {
type: 'value', type: "value",
name: '钻压 / 转速 / 泵冲', name: "钻压 / 转速 / 泵冲",
position: 'right', position: "right",
nameLocation: 'center', nameLocation: "center",
nameGap: 50, nameGap: 50,
axisLabel: { axisLabel: {
formatter: '{value}' formatter: "{value}",
}, },
splitLine: { splitLine: {
show: false show: false,
} },
} },
], ],
series: [ series: [
{ {
name: '钻时 (min/m)', name: "钻时 (min/m)",
type: 'line', type: "line",
yAxisIndex: 0, yAxisIndex: 0,
data: drillingTimeChartData, data: drillingTimeChartData,
smooth: true, smooth: true,
lineStyle: { symbol: "none",
color: '#ff6e6e',
width: 2,
type: 'solid'
},
symbol: 'none'
}, },
{ {
name: '扭矩 (kN•m)', name: "扭矩 (kN•m)",
type: 'line', type: "line",
yAxisIndex: 0, yAxisIndex: 0,
data: torqueChartData, data: torqueChartData,
smooth: true, smooth: true,
lineStyle: {
color: '#275081', symbol: "none",
width: 2,
type: 'dashed'
},
symbol: 'none'
}, },
{ {
name: '立压 (MPa)', name: "立压 (MPa)",
type: 'line', type: "line",
yAxisIndex: 0, yAxisIndex: 0,
data: standpipePressureChartData, data: standpipePressureChartData,
smooth: true, smooth: true,
lineStyle: {
color: '#e57113', symbol: "none",
width: 2,
type: 'dashed'
},
symbol: 'none'
}, },
{ {
name: '钻压 (kN)', name: "钻压 (kN)",
type: 'line', type: "line",
yAxisIndex: 1, yAxisIndex: 1,
data: drillingPressureChartData, data: drillingPressureChartData,
smooth: true, smooth: true,
lineStyle: {
color: '#757575', symbol: "none",
width: 2,
type: 'solid'
},
symbol: 'none'
}, },
{ {
name: '转速 (rpm)', name: "转速 (rpm)",
type: 'line', type: "line",
yAxisIndex: 1, yAxisIndex: 1,
data: rpmChartData, data: rpmChartData,
smooth: true, smooth: true,
lineStyle: {
color: '#cda2a1', symbol: "none",
width: 2,
type: 'dashed'
},
symbol: 'none'
}, },
{ {
name: '泵冲', name: "泵冲",
type: 'line', type: "line",
yAxisIndex: 1, yAxisIndex: 1,
data: pumpStrokeChartData, data: pumpStrokeChartData,
smooth: true, smooth: true,
lineStyle: {
color: '#637441', symbol: "none",
width: 2,
type: 'solid'
}, },
symbol: 'none' ],
}
]
}; };
this.myChart.setOption(option); this.myChart.setOption(option);
this.resizeHandler = () => this.myChart.resize(); this.resizeHandler = () => this.myChart.resize();
window.addEventListener('resize', this.resizeHandler); window.addEventListener("resize", this.resizeHandler);
}, },
exportChart() { exportChart() {
if (!this.myChart) { if (!this.myChart) {
this.$message.warning('图表未初始化，无法导出'); this.$message.warning("图表未初始化，无法导出");
return; return;
} }
try { try {
const url = this.myChart.getDataURL({ const url = this.myChart.getDataURL({
type: 'png', type: "png",
pixelRatio: 2, pixelRatio: 2,
backgroundColor: '#fff' backgroundColor: "#fff",
}); });
const link = document.createElement('a'); const link = document.createElement("a");
link.href = url; link.href = url;
link.download = `录井钻时图_${this.jh}_${new Date().getTime()}.png`; link.download = `录井钻时图_${this.jh}_${new Date().getTime()}.png`;
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
document.body.removeChild(link); document.body.removeChild(link);
this.$message.success('图片导出成功'); this.$message.success("图片导出成功");
} catch (error) { } catch (error) {
console.error('导出图片失败:', error); console.error("导出图片失败:", error);
this.$message.error('导出图片失败，请重试'); this.$message.error("导出图片失败，请重试");
} }
}, },
...@@ -434,11 +467,11 @@ export default { ...@@ -434,11 +467,11 @@ export default {
this.myChart = null; this.myChart = null;
} }
if (this.resizeHandler) { if (this.resizeHandler) {
window.removeEventListener('resize', this.resizeHandler); window.removeEventListener("resize", this.resizeHandler);
this.resizeHandler = null; this.resizeHandler = null;
} }
} },
} },
}; };
</script> </script>
...@@ -460,7 +493,7 @@ export default { ...@@ -460,7 +493,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
transition: all 0.3s ease; transition: all 0.3s ease;
opacity: 0.9; opacity: 0.9;
} }
......
src/views/efficiencyAnalysis/jcxx/components/HistogramGraph.vue
...@@ -5,8 +5,13 @@ ...@@ -5,8 +5,13 @@
<span class="well-number">{{ jh }}</span> <span class="well-number">{{ jh }}</span>
</div> </div>
<div class="export-button-container"> <div class="export-button-container">
<el-button class="export-btn" @click="exportChart" :disabled="loading || !myChart" title="导出图表为图片" <el-button
icon="el-icon-download"> class="export-btn"
@click="exportChart"
:disabled="loading || !myChart"
title="导出图表为图片"
icon="el-icon-download"
>
导出 导出
</el-button> </el-button>
</div> </div>
...@@ -15,9 +20,13 @@ ...@@ -15,9 +20,13 @@
<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 v-for="(item, index) in legendItems" :key="item.name || index" class="legend-item"> <div
v-for="(item, index) in legendItems"
:key="item.name || index"
class="legend-item"
>
<div class="legend-icon" :style="getLegendSwatchStyle(item)"></div> <div class="legend-icon" :style="getLegendSwatchStyle(item)"></div>
<span class="legend-label">{{ item.name || '-' }}</span> <span class="legend-label">{{ item.name || "-" }}</span>
</div> </div>
</div> </div>
</aside> </aside>
...@@ -45,8 +54,8 @@ export default { ...@@ -45,8 +54,8 @@ export default {
theme: { theme: {
type: String, type: String,
default: "modern", // modern, elegant, vibrant default: "modern", // modern, elegant, vibrant
validator: value => ["modern", "elegant", "vibrant"].includes(value) validator: (value) => ["modern", "elegant", "vibrant"].includes(value),
} },
}, },
data() { data() {
return { return {
...@@ -76,8 +85,8 @@ export default { ...@@ -76,8 +85,8 @@ export default {
border: "#E5E7EB", border: "#E5E7EB",
gradient: { gradient: {
start: "#3B82F6", start: "#3B82F6",
end: "#1D4ED8" end: "#1D4ED8",
} },
}, },
elegant: { elegant: {
primary: "#6366F1", primary: "#6366F1",
...@@ -88,8 +97,8 @@ export default { ...@@ -88,8 +97,8 @@ export default {
border: "#D1D5DB", border: "#D1D5DB",
gradient: { gradient: {
start: "#6366F1", start: "#6366F1",
end: "#4F46E5" end: "#4F46E5",
} },
}, },
vibrant: { vibrant: {
primary: "#EF4444", primary: "#EF4444",
...@@ -100,15 +109,15 @@ export default { ...@@ -100,15 +109,15 @@ export default {
border: "#F3F4F6", border: "#F3F4F6",
gradient: { gradient: {
start: "#EF4444", start: "#EF4444",
end: "#DC2626" end: "#DC2626",
} },
} },
}; };
return schemes[this.theme]; return schemes[this.theme];
}, },
legendPanelWidth() { legendPanelWidth() {
return this.legendItems && this.legendItems.length ? 260 : 0; return this.legendItems && this.legendItems.length ? 260 : 0;
} },
}, },
watch: { watch: {
jh: { jh: {
...@@ -117,7 +126,7 @@ export default { ...@@ -117,7 +126,7 @@ export default {
this.refreshChart(); this.refreshChart();
} }
}, },
immediate: true immediate: true,
}, },
legendItems: { legendItems: {
handler() { handler() {
...@@ -129,8 +138,8 @@ export default { ...@@ -129,8 +138,8 @@ export default {
} }
}); });
}, },
deep: true deep: true,
} },
}, },
mounted() { mounted() {
this.initChart(); this.initChart();
...@@ -169,7 +178,6 @@ export default { ...@@ -169,7 +178,6 @@ export default {
} }
await this.renderRealData(mockData); await this.renderRealData(mockData);
} catch (error) { } catch (error) {
console.error("图表初始化失败:", error); console.error("图表初始化失败:", error);
this.handleError(error); this.handleError(error);
...@@ -189,12 +197,17 @@ export default { ...@@ -189,12 +197,17 @@ export default {
const containerPadding = 20; const containerPadding = 20;
const panelGap = legendWidth ? 5 : 0; const panelGap = legendWidth ? 5 : 0;
const safetyMargin = 12; const safetyMargin = 12;
const widthPadding = containerPadding + panelGap + legendWidth + safetyMargin; const widthPadding =
containerPadding + panelGap + legendWidth + safetyMargin;
const availableWidth = Math.max(360, containerWidth - widthPadding); const availableWidth = Math.max(360, containerWidth - widthPadding);
const verticalPadding = 40; const verticalPadding = 40;
const heightByViewport = viewportHeight - topOffset - verticalPadding; const heightByViewport = viewportHeight - topOffset - verticalPadding;
const fallbackHeight = this.$el?.clientHeight || viewportHeight; const fallbackHeight = this.$el?.clientHeight || viewportHeight;
const availableHeight = Math.max(360, heightByViewport, fallbackHeight - 20); const availableHeight = Math.max(
360,
heightByViewport,
fallbackHeight - 20
);
chartDom.style.width = `${availableWidth}px`; chartDom.style.width = `${availableWidth}px`;
chartDom.style.height = `${availableHeight}px`; chartDom.style.height = `${availableHeight}px`;
chartDom.offsetHeight; // 强制重排 chartDom.offsetHeight; // 强制重排
...@@ -206,7 +219,10 @@ export default { ...@@ -206,7 +219,10 @@ export default {
const viewportHeight = window.innerHeight; const viewportHeight = window.innerHeight;
const availableHeight = viewportHeight - 120; const availableHeight = viewportHeight - 120;
const availableWidth = viewportWidth - 80; const availableWidth = viewportWidth - 80;
return (availableWidth <= 0 || availableHeight <= 0) && this.initRetryCount < this.maxRetryCount; return (
(availableWidth <= 0 || availableHeight <= 0) &&
this.initRetryCount < this.maxRetryCount
);
}, },
// 安排重试 // 安排重试
...@@ -230,17 +246,19 @@ export default { ...@@ -230,17 +246,19 @@ export default {
// 创建图表实例 // 创建图表实例
createChart(chartDom) { createChart(chartDom) {
this.myChart = echarts.init(chartDom, null, { this.myChart = echarts.init(chartDom, null, {
renderer: 'canvas', renderer: "canvas",
useDirtyRect: true useDirtyRect: true,
}); });
}, },
// 检查数据有效性 // 检查数据有效性
hasValidData(mockData) { hasValidData(mockData) {
return mockData && return (
mockData &&
mockData.wellData && mockData.wellData &&
mockData.wellData.depthLine && mockData.wellData.depthLine &&
mockData.wellData.depthLine.length > 0; mockData.wellData.depthLine.length > 0
);
}, },
// 设置事件监听器 // 设置事件监听器
...@@ -316,8 +334,16 @@ export default { ...@@ -316,8 +334,16 @@ export default {
} }
this.myChart.resize(); this.myChart.resize();
// 重新绘制地层标签，确保在缩放/尺寸变化后位置正确 // 重新绘制地层标签，确保在缩放/尺寸变化后位置正确
if (this.lastStackedAreas && this.lastChartConfig && this.lastXAxisLabels) { if (
this.drawStratumLabels(this.lastStackedAreas, this.lastChartConfig, this.lastXAxisLabels); this.lastStackedAreas &&
this.lastChartConfig &&
this.lastXAxisLabels
) {
this.drawStratumLabels(
this.lastStackedAreas,
this.lastChartConfig,
this.lastXAxisLabels
);
} }
} }
}, },
...@@ -335,14 +361,20 @@ export default { ...@@ -335,14 +361,20 @@ export default {
const { wellData } = mockData; const { wellData } = mockData;
// 调试信息：打印深度区间数据 // 调试信息：打印深度区间数据
if (wellData.depthIntervals && wellData.depthIntervals.length > 0) { if (wellData.depthIntervals && wellData.depthIntervals.length > 0) {
console.log('深度区间数据:', wellData.depthIntervals.map(item => ({ console.log(
"深度区间数据:",
wellData.depthIntervals.map((item) => ({
型号: item.x, 型号: item.x,
尺寸: item.ztcc, 尺寸: item.ztcc,
进尺: item.jc, 进尺: item.jc,
深度区间: item.interval, 深度区间: item.interval,
占位: item.placeholder, 占位: item.placeholder,
计算高度: item.jc !== undefined && item.jc !== null ? item.jc : (item.interval - item.placeholder) 计算高度:
}))); item.jc !== undefined && item.jc !== null
? item.jc
: item.interval - item.placeholder,
}))
);
} }
const xAxisLabels = wellData.depthLine.map((point) => point.x); const xAxisLabels = wellData.depthLine.map((point) => point.x);
...@@ -353,7 +385,7 @@ export default { ...@@ -353,7 +385,7 @@ export default {
...this.getDefaultChartOption(), ...this.getDefaultChartOption(),
xAxis: this.createXAxis(xAxisLabels), xAxis: this.createXAxis(xAxisLabels),
yAxis: this.createYAxis(mockData.chartConfig), yAxis: this.createYAxis(mockData.chartConfig),
series: this.createSeries(wellData, areaSeries) series: this.createSeries(wellData, areaSeries),
}; };
this.myChart.setOption(option, true); this.myChart.setOption(option, true);
...@@ -365,9 +397,12 @@ export default { ...@@ -365,9 +397,12 @@ export default {
this.lastStackedAreas = wellData.stackedAreas; this.lastStackedAreas = wellData.stackedAreas;
this.lastChartConfig = mockData.chartConfig; this.lastChartConfig = mockData.chartConfig;
this.lastXAxisLabels = xAxisLabels; this.lastXAxisLabels = xAxisLabels;
this.drawStratumLabels(this.lastStackedAreas, this.lastChartConfig, this.lastXAxisLabels); this.drawStratumLabels(
this.lastStackedAreas,
this.lastChartConfig,
this.lastXAxisLabels
);
}); });
} catch (error) { } catch (error) {
console.error("渲染数据失败:", error); console.error("渲染数据失败:", error);
this.handleError(error); this.handleError(error);
...@@ -386,23 +421,25 @@ export default { ...@@ -386,23 +421,25 @@ export default {
axisPointer: { axisPointer: {
type: "cross", type: "cross",
label: { backgroundColor: colors.primary }, label: { backgroundColor: colors.primary },
crossStyle: { color: colors.border } crossStyle: { color: colors.border },
}, },
backgroundColor: 'rgba(255,255,255,0.95)', backgroundColor: "rgba(255,255,255,0.95)",
borderColor: colors.border, borderColor: colors.border,
borderWidth: 1, borderWidth: 1,
textStyle: { color: colors.text }, textStyle: { color: colors.text },
extraCssText: 'box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 8px;', extraCssText:
"box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 8px;",
formatter: (params) => { formatter: (params) => {
if (!params || params.length === 0) return ''; if (!params || params.length === 0) return "";
const dataIndex = params[0].dataIndex; const dataIndex = params[0].dataIndex;
const depthInterval = this.mockData?.wellData?.depthIntervals?.[dataIndex]; const depthInterval =
this.mockData?.wellData?.depthIntervals?.[dataIndex];
if (!depthInterval) { if (!depthInterval) {
// 如果没有depthInterval数据，使用默认格式 // 如果没有depthInterval数据，使用默认格式
let result = `<div style="font-weight: 600; margin-bottom: 8px; color: ${colors.primary};">${params[0].axisValue}</div>`; let result = `<div style="font-weight: 600; margin-bottom: 8px; color: ${colors.primary};">${params[0].axisValue}</div>`;
params.forEach(param => { params.forEach((param) => {
const color = param.color; const color = param.color;
result += `<div style="margin: 4px 0;"> result += `<div style="margin: 4px 0;">
<span style="display: inline-block; width: 10px; height: 10px; background-color: ${color}; border-radius: 50%; margin-right: 8px;"></span> <span style="display: inline-block; width: 10px; height: 10px; background-color: ${color}; border-radius: 50%; margin-right: 8px;"></span>
...@@ -414,26 +451,41 @@ export default { ...@@ -414,26 +451,41 @@ export default {
} }
// 显示井号信息 // 显示井号信息
let result = `<div style="font-weight: 600; margin-bottom: 8px; color: ${colors.primary};">${depthInterval.jh || depthInterval.x}</div>`; let result = `<div style="font-weight: 600; margin-bottom: 8px; color: ${
colors.primary
};">${depthInterval.jh || depthInterval.x}</div>`;
// 计算深度区间显示 // 计算深度区间显示
const startDepth = depthInterval.placeholder || 0; const startDepth = depthInterval.placeholder || 0;
const height = depthInterval.jc !== undefined && depthInterval.jc !== null const height =
depthInterval.jc !== undefined && depthInterval.jc !== null
? depthInterval.jc ? depthInterval.jc
: (depthInterval.interval - depthInterval.placeholder); : depthInterval.interval - depthInterval.placeholder;
const endDepth = startDepth + height; const endDepth = startDepth + height;
const depthRange = `${startDepth}-${endDepth}`; const depthRange = `${startDepth}-${endDepth}`;
// 显示详细信息 // 显示详细信息
result += `<div style="margin: 4px 0; padding: 4px 0; border-top: 1px solid ${colors.border};"> result += `<div style="margin: 4px 0; padding: 4px 0; border-top: 1px solid ${
<div style="margin: 2px 0;"><span style="font-weight: 500;">型号:</span> <span style="margin-left: 8px; font-weight: 600;">${depthInterval.x || '-'}</span></div> colors.border
<div style="margin: 2px 0;"><span style="font-weight: 500;">尺寸:</span> <span style="margin-left: 8px; font-weight: 600;">${depthInterval.ztcc || '-'}</span></div> };">
<div style="margin: 2px 0;"><span style="font-weight: 500;">进尺m:</span> <span style="margin-left: 8px; font-weight: 600;">${depthInterval.jc !== undefined && depthInterval.jc !== null ? depthInterval.jc : (depthInterval.interval - depthInterval.placeholder)}</span></div> <div style="margin: 2px 0;"><span style="font-weight: 500;">型号:</span> <span style="margin-left: 8px; font-weight: 600;">${
depthInterval.x || "-"
}</span></div>
<div style="margin: 2px 0;"><span style="font-weight: 500;">尺寸:</span> <span style="margin-left: 8px; font-weight: 600;">${
depthInterval.ztcc || "-"
}</span></div>
<div style="margin: 2px 0;"><span style="font-weight: 500;">进尺m:</span> <span style="margin-left: 8px; font-weight: 600;">${
depthInterval.jc !== undefined &&
depthInterval.jc !== null
? depthInterval.jc
: depthInterval.interval -
depthInterval.placeholder
}</span></div>
<div style="margin: 2px 0;"><span style="font-weight: 500;">深度区间:</span> <span style="margin-left: 8px; font-weight: 600;">${depthRange}</span></div> <div style="margin: 2px 0;"><span style="font-weight: 500;">深度区间:</span> <span style="margin-left: 8px; font-weight: 600;">${depthRange}</span></div>
</div>`; </div>`;
return result; return result;
} },
}, },
grid: { grid: {
top: 10, top: 10,
...@@ -445,10 +497,10 @@ export default { ...@@ -445,10 +497,10 @@ export default {
}, },
animation: true, animation: true,
animationDuration: 1500, animationDuration: 1500,
animationEasing: 'cubicOut', animationEasing: "cubicOut",
animationDelay: function (idx) { animationDelay: function (idx) {
return idx * 100; return idx * 100;
} },
}; };
}, },
...@@ -456,7 +508,7 @@ export default { ...@@ -456,7 +508,7 @@ export default {
async processAreaSeries(stackedAreas) { async processAreaSeries(stackedAreas) {
return await Promise.all( return await Promise.all(
stackedAreas stackedAreas
.filter(area => area.svg !== null) .filter((area) => area.svg !== null)
.map(async (area) => { .map(async (area) => {
let areaStyle = { opacity: 0.6 }; let areaStyle = { opacity: 0.6 };
if (area.svg) { if (area.svg) {
...@@ -464,7 +516,7 @@ export default { ...@@ -464,7 +516,7 @@ export default {
const svgImage = await this.createSvgImage(area.svg); const svgImage = await this.createSvgImage(area.svg);
areaStyle.color = { image: svgImage, repeat: "repeat" }; areaStyle.color = { image: svgImage, repeat: "repeat" };
} catch (error) { } catch (error) {
console.error('SVG转换失败:', error); console.error("SVG转换失败:", error);
} }
} }
return { return {
...@@ -499,28 +551,28 @@ export default { ...@@ -499,28 +551,28 @@ export default {
align: "center", align: "center",
fontSize: 13, fontSize: 13,
color: colors.text, color: colors.text,
fontWeight: 500 fontWeight: 500,
}, },
axisTick: { axisTick: {
alignWithLabel: true, alignWithLabel: true,
length: 6, length: 6,
lineStyle: { color: colors.border } lineStyle: { color: colors.border },
}, },
splitLine: { show: false }, splitLine: { show: false },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: colors.border, color: colors.border,
width: 2 width: 2,
} },
} },
}, },
{ {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
position: "top", position: "top",
show: false, show: false,
data: xAxisLabels data: xAxisLabels,
}, },
]; ];
}, },
...@@ -536,7 +588,7 @@ export default { ...@@ -536,7 +588,7 @@ export default {
color: colors.text, color: colors.text,
fontSize: 13, fontSize: 13,
fontWeight: 600, fontWeight: 600,
padding: [0, 0, 0, 8] padding: [0, 0, 0, 8],
}, },
min: chartConfig.yAxis.min, min: chartConfig.yAxis.min,
max: chartConfig.yAxis.max, max: chartConfig.yAxis.max,
...@@ -546,27 +598,27 @@ export default { ...@@ -546,27 +598,27 @@ export default {
formatter: "{value}", formatter: "{value}",
fontSize: 12, fontSize: 12,
color: colors.text, color: colors.text,
fontWeight: 500 fontWeight: 500,
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: colors.border, color: colors.border,
type: 'dashed', type: "dashed",
opacity: 0.3 opacity: 0.3,
} },
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: colors.border, color: colors.border,
width: 2 width: 2,
} },
}, },
axisTick: { axisTick: {
show: true, show: true,
lineStyle: { color: colors.border } lineStyle: { color: colors.border },
} },
}, },
{ {
type: "value", type: "value",
...@@ -575,7 +627,7 @@ export default { ...@@ -575,7 +627,7 @@ export default {
color: colors.text, color: colors.text,
fontSize: 13, fontSize: 13,
fontWeight: 600, fontWeight: 600,
padding: [0, 8, 0, 0] padding: [0, 8, 0, 0],
}, },
min: chartConfig.yAxis2.min, min: chartConfig.yAxis2.min,
max: chartConfig.yAxis2.max, max: chartConfig.yAxis2.max,
...@@ -585,20 +637,20 @@ export default { ...@@ -585,20 +637,20 @@ export default {
formatter: "{value}", formatter: "{value}",
fontSize: 12, fontSize: 12,
color: colors.text, color: colors.text,
fontWeight: 500 fontWeight: 500,
}, },
splitLine: { show: false }, splitLine: { show: false },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: colors.border, color: colors.border,
width: 2 width: 2,
} },
}, },
axisTick: { axisTick: {
show: true, show: true,
lineStyle: { color: colors.border } lineStyle: { color: colors.border },
} },
}, },
]; ];
}, },
...@@ -616,17 +668,17 @@ export default { ...@@ -616,17 +668,17 @@ export default {
symbolSize: 10, symbolSize: 10,
itemStyle: { itemStyle: {
color: colors.accent, color: colors.accent,
borderColor: '#fff', borderColor: "#fff",
borderWidth: 3, borderWidth: 3,
shadowColor: 'rgba(0,0,0,0.2)', shadowColor: "rgba(0,0,0,0.2)",
shadowBlur: 8 shadowBlur: 8,
}, },
lineStyle: { lineStyle: {
color: colors.accent, color: colors.accent,
width: 3, width: 3,
type: 'solid', type: "solid",
shadowColor: 'rgba(0,0,0,0.1)', shadowColor: "rgba(0,0,0,0.1)",
shadowBlur: 4 shadowBlur: 4,
}, },
label: { label: {
show: true, show: true,
...@@ -640,8 +692,8 @@ export default { ...@@ -640,8 +692,8 @@ export default {
borderRadius: 6, borderRadius: 6,
borderColor: colors.accent, borderColor: colors.accent,
borderWidth: 2, borderWidth: 2,
shadowColor: 'rgba(0,0,0,0.1)', shadowColor: "rgba(0,0,0,0.1)",
shadowBlur: 4 shadowBlur: 4,
}, },
data: wellData.depthLine.map((point) => point.y), data: wellData.depthLine.map((point) => point.y),
}, },
...@@ -653,13 +705,13 @@ export default { ...@@ -653,13 +705,13 @@ export default {
barWidth: "8%", barWidth: "8%",
itemStyle: { itemStyle: {
borderColor: "transparent", borderColor: "transparent",
color: "transparent" color: "transparent",
}, },
emphasis: { emphasis: {
itemStyle: { itemStyle: {
borderColor: "transparent", borderColor: "transparent",
color: "transparent" color: "transparent",
} },
}, },
data: wellData.depthIntervals.map((item) => item.placeholder), data: wellData.depthIntervals.map((item) => item.placeholder),
}, },
...@@ -670,78 +722,88 @@ export default { ...@@ -670,78 +722,88 @@ export default {
barWidth: "6%", barWidth: "6%",
label: { label: {
show: true, show: true,
position: 'insideTop', position: "insideTop",
color: '#fff', color: "#fff",
fontSize: 11, fontSize: 11,
fontWeight: 600, fontWeight: 600,
backgroundColor: "rgba(0,0,0,0.1)", backgroundColor: "rgba(0,0,0,0.1)",
padding: [2, 3], padding: [2, 3],
borderRadius: 4, borderRadius: 4,
borderColor: 'rgba(255,255,255,0.3)', borderColor: "rgba(255,255,255,0.3)",
borderWidth: 1, borderWidth: 1,
formatter: (params) => { formatter: (params) => {
const di = wellData.depthIntervals[params.dataIndex]; const di = wellData.depthIntervals[params.dataIndex];
return di && di.ztcc !== undefined ? di.ztcc : params.data; return di && di.ztcc !== undefined ? di.ztcc : params.data;
} },
}, },
itemStyle: { itemStyle: {
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [ colorStops: [
{ offset: 0, color: colors.gradient.start }, { offset: 0, color: colors.gradient.start },
{ offset: 1, color: colors.gradient.end } { offset: 1, color: colors.gradient.end },
] ],
}, },
borderRadius: [4, 4, 0, 0], borderRadius: [4, 4, 0, 0],
shadowColor: 'rgba(0,0,0,0.2)', shadowColor: "rgba(0,0,0,0.2)",
shadowBlur: 8, shadowBlur: 8,
shadowOffsetY: 2 shadowOffsetY: 2,
}, },
emphasis: { emphasis: {
itemStyle: { itemStyle: {
color: { color: {
type: 'linear', type: "linear",
x: 0, x: 0,
y: 0, y: 0,
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [ colorStops: [
{ offset: 0, color: this.adjustColor(colors.gradient.start, 1.2) }, {
{ offset: 1, color: this.adjustColor(colors.gradient.end, 1.2) } offset: 0,
] color: this.adjustColor(colors.gradient.start, 1.2),
},
{
offset: 1,
color: this.adjustColor(colors.gradient.end, 1.2),
},
],
}, },
shadowBlur: 12, shadowBlur: 12,
shadowOffsetY: 4 shadowOffsetY: 4,
} },
}, },
// 使用 jc（进尺）作为柱子的高度，如果没有 jc 则使用 interval - placeholder 计算 // 使用 jc（进尺）作为柱子的高度，如果没有 jc 则使用 interval - placeholder 计算
data: wellData.depthIntervals.map((item) => { data: wellData.depthIntervals.map((item) => {
// 优先使用 jc（进尺），如果没有则计算 interval - placeholder // 优先使用 jc（进尺），如果没有则计算 interval - placeholder
return item.jc !== undefined && item.jc !== null ? item.jc : (item.interval - item.placeholder); return item.jc !== undefined && item.jc !== null
? item.jc
: item.interval - item.placeholder;
}), }),
}, },
// 底部显示 placeholder 数值的透明条，用于放置底部标签 // 底部显示 placeholder 数值的透明条，用于放置底部标签
{ {
name: '深度区间-底部标签', name: "深度区间-底部标签",
type: 'bar', type: "bar",
barGap: '-100%', barGap: "-100%",
barWidth: '6%', barWidth: "6%",
itemStyle: { color: 'transparent', borderColor: 'transparent' }, itemStyle: { color: "transparent", borderColor: "transparent" },
emphasis: { itemStyle: { color: 'transparent', borderColor: 'transparent' } }, emphasis: {
itemStyle: { color: "transparent", borderColor: "transparent" },
},
label: { label: {
show: true, show: true,
position: 'insideBottom', position: "insideBottom",
color: '#fff', color: "#fff",
fontSize: 11, fontSize: 11,
fontWeight: 600, fontWeight: 600,
backgroundColor: 'rgba(0,0,0,0.1)', backgroundColor: "rgba(0,0,0,0.1)",
padding: [2, 3], padding: [2, 3],
borderRadius: 4, borderRadius: 4,
borderColor: 'rgba(255,255,255,0.3)', borderColor: "rgba(255,255,255,0.3)",
borderWidth: 1, borderWidth: 1,
distance: 0, distance: 0,
formatter: (params) => { formatter: (params) => {
...@@ -751,13 +813,17 @@ export default { ...@@ -751,13 +813,17 @@ export default {
const endDepth = di.placeholder + di.jc; const endDepth = di.placeholder + di.jc;
return `${di.placeholder}-${endDepth}`; return `${di.placeholder}-${endDepth}`;
} }
return di && di.interval !== undefined ? di.interval : params.data; return di && di.interval !== undefined
} ? di.interval
: params.data;
},
}, },
// 使用相同的计算方式，确保标签位置正确 // 使用相同的计算方式，确保标签位置正确
data: wellData.depthIntervals.map((item) => { data: wellData.depthIntervals.map((item) => {
return item.jc !== undefined && item.jc !== null ? item.jc : (item.interval - item.placeholder); return item.jc !== undefined && item.jc !== null
}) ? item.jc
: item.interval - item.placeholder;
}),
}, },
...areaSeries, ...areaSeries,
]; ];
...@@ -765,7 +831,7 @@ export default { ...@@ -765,7 +831,7 @@ export default {
// 颜色调整工具方法 // 颜色调整工具方法
adjustColor(color, factor) { adjustColor(color, factor) {
if (color.startsWith('#')) { if (color.startsWith("#")) {
const r = parseInt(color.slice(1, 3), 16); const r = parseInt(color.slice(1, 3), 16);
const g = parseInt(color.slice(3, 5), 16); const g = parseInt(color.slice(3, 5), 16);
const b = parseInt(color.slice(5, 7), 16); const b = parseInt(color.slice(5, 7), 16);
...@@ -823,7 +889,9 @@ export default { ...@@ -823,7 +889,9 @@ export default {
// 创建SVG图片 // 创建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",
});
const svgUrl = URL.createObjectURL(svgBlob); const svgUrl = URL.createObjectURL(svgBlob);
const img = new Image(); const img = new Image();
img.onload = () => { img.onload = () => {
...@@ -840,28 +908,30 @@ export default { ...@@ -840,28 +908,30 @@ export default {
// 为右侧图例生成纹理样式 // 为右侧图例生成纹理样式
getLegendSwatchStyle(item = {}) { getLegendSwatchStyle(item = {}) {
const baseStyle = { const baseStyle = {
backgroundColor: '#d1d5db', backgroundColor: "#d1d5db",
backgroundRepeat: 'repeat', backgroundRepeat: "repeat",
backgroundSize: '36px 36px' backgroundSize: "36px 36px",
}; };
if (!item?.svg) return baseStyle; if (!item?.svg) return baseStyle;
const dataUrl = this.getSvgDataUrl(item.svg); const dataUrl = this.getSvgDataUrl(item.svg);
if (!dataUrl) return baseStyle; if (!dataUrl) return baseStyle;
return { return {
backgroundImage: `url("${dataUrl}")`, backgroundImage: `url("${dataUrl}")`,
backgroundRepeat: 'repeat', backgroundRepeat: "repeat",
backgroundSize: '36px 36px', backgroundSize: "36px 36px",
backgroundColor: 'transparent' backgroundColor: "transparent",
}; };
}, },
getSvgDataUrl(svgString) { getSvgDataUrl(svgString) {
if (!svgString || typeof svgString !== 'string') return ''; if (!svgString || typeof svgString !== "string") return "";
try { try {
const compact = svgString.replace(/\s+/g, ' ').trim(); const compact = svgString.replace(/\s+/g, " ").trim();
return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(compact)}`; return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(
compact
)}`;
} catch (e) { } catch (e) {
console.warn('SVG 编码失败:', e); console.warn("SVG 编码失败:", e);
return ''; return "";
} }
}, },
...@@ -869,7 +939,20 @@ export default { ...@@ -869,7 +939,20 @@ export default {
drawStratumLabels() { drawStratumLabels() {
if (!this.myChart) return; if (!this.myChart) return;
this.myChart.setOption({ graphic: { elements: [] } }); this.myChart.setOption({ graphic: { elements: [] } });
} },
exportChart() {
if (!this.myChart) return;
const img = this.myChart.getDataURL({
type: "png",
pixelRatio: 2,
backgroundColor: "#fff",
});
const a = document.createElement("a");
a.href = img;
a.download = this.jh + "直方图.png";
a.click();
},
}, },
}; };
</script> </script>
...@@ -970,7 +1053,7 @@ export default { ...@@ -970,7 +1053,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
transition: all 0.3s ease; transition: all 0.3s ease;
opacity: 0.9; opacity: 0.9;
} }
...@@ -1146,7 +1229,7 @@ export default { ...@@ -1146,7 +1229,7 @@ export default {
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
} }
.export-btn:hover:not(:disabled) { .export-btn:hover:not(:disabled) {
......
src/views/xjsj/index.vue
<template> <template>
<div class="app-container"> <div class="app-container">
<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"
>
<el-form-item prop="jh"> <el-form-item 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> <el-form-item>
<el-button
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> type="primary"
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> icon="el-icon-search"
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新建井</el-button> size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新建井</el-button
>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="card-container"> <div class="card-container">
<el-card class="box-card" v-for="item in ytLists" :key="item.id" <el-card
style="margin: 10px 10px 0 0; width: calc(20% - 10px);"> class="box-card"
v-for="item in ytLists"
:key="item.id"
style="margin: 10px 10px 0 0; width: calc(20% - 10px)"
>
<div slot="header" class="clearfix header"> <div slot="header" class="clearfix header">
<div class="header-content"> <div class="header-content">
<div class="left"> <div class="left">
<img style="width: 80px;height: 80px" :src="wellImg" class="sidebar-logo" /> <img
style="width: 80px; height: 80px"
:src="wellImg"
class="sidebar-logo"
/>
</div> </div>
<div class="right"> <div class="right">
<div> <!-- 使用v-for指令循环渲染每一条数据 --> <div>
<div style="font-size: 24px;color: #1c84c6;font-weight: bold;cursor: pointer" <!-- 使用v-for指令循环渲染每一条数据 -->
@click="toDesignScheme(item)">{{ item.jh }} <!-- 在循环中使用当前数据项的属性 --> <div
style="
font-size: 24px;
color: #1c84c6;
font-weight: bold;
cursor: pointer;
"
@click="toDesignScheme(item)"
>
{{ item.jh }}
<!-- 在循环中使用当前数据项的属性 -->
</div> </div>
<div> <div>
<i style="color: #909399" class="el-icon-user-solid"></i> <i style="color: #909399" class="el-icon-user-solid"></i>
<span style="color: #909399">{{ item.jd }}</span> <!-- 在循环中使用当前数据项的属性 --> <span style="color: #909399">{{ item.jd }}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="text item" style="display: flex; justify-content: flex-end;margin: 10px;"> <div
<el-button size="large" icon="el-icon-edit-outline" style="margin-right: 10px" type="text" class="text item"
@click="handleEdit(item)"></el-button> style="display: flex; justify-content: flex-end; margin: 10px"
<el-button size="medium" icon="el-icon-delete" style="margin-right: 10px" type="text" >
@click="handleDelete(item)"></el-button> <el-button
<el-button size="medium" icon="el-icon-lock" style="margin-right: 10px" type="text" size="large"
@click="handleLock(item)"></el-button> icon="el-icon-edit-outline"
style="margin-right: 10px"
type="text"
@click="handleEdit(item)"
></el-button>
<el-button
size="medium"
icon="el-icon-delete"
style="margin-right: 10px"
type="text"
@click="handleDelete(item)"
></el-button>
<el-button
size="medium"
icon="el-icon-lock"
style="margin-right: 10px"
type="text"
@click="handleLock(item)"
></el-button>
<!-- <el-button size="medium" icon="el-icon-unlock" style=" margin-right: 10px" type="text" @click="handleFinalize"></el-button> --> <!-- <el-button size="medium" icon="el-icon-unlock" style=" margin-right: 10px" type="text" @click="handleFinalize"></el-button> -->
</div> </div>
</div> </div>
</el-card> </el-card>
</div> </div>
<!-- 添加或修改菜单对话框 --> <!-- 添加或修改菜单对话框 -->
<el-dialog :title="title" :visible.sync="open" width="70%" append-to-body> <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body>
<div
<div class="jsjStyle" class="jsjStyle"
style="background-color: #f4f8fe;border-radius: 10px;margin: -30px -10px -30px;padding: 10px;"> style="
background-color: #f4f8fe;
border-radius: 10px;
margin: -30px -10px -30px;
padding: 10px;
"
>
<el-form ref="form" :model="form" :rules="rules" label-width="150px"> <el-form ref="form" :model="form" :rules="rules" label-width="150px">
<div class="cardStyle" style="border: 1px solid #eee"> <div class="cardStyle" style="border: 1px solid #eee">
<div style="font-size: 14px;padding: 10px;border-bottom: 1px solid #eee;margin-top: -10px;">基本信息 <div
style="
font-size: 14px;
padding: 10px;
border-bottom: 1px solid #eee;
margin-top: -10px;
"
>
基本信息
</div> </div>
<el-row style="margin-top: 10px"> <el-row style="margin-top: 10px">
<el-col :span="8"> <el-col :span="8">
<el-form-item label="钻井公司" prop="zjgs"> <el-form-item label="钻井公司" prop="zjgs">
<el-input style="width: 200px" v-model="form.zjgs" clearable /> <el-input
style="width: 200px"
v-model="form.zjgs"
clearable
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="区块名称" prop="qkmc"> <el-form-item label="区块名称" prop="qkmc">
<el-select v-model="form.qkmc" placeholder="请选择区块名称" clearable filterable <el-select
style="width: 200px;"> v-model="form.qkmc"
<el-option v-for="opt in filteredBlockOptions" :key="opt.value" placeholder="请选择区块名称"
:label="opt.label" :value="opt.value" /> clearable
filterable
style="width: 200px"
>
<el-option
v-for="opt in filteredBlockOptions"
:key="opt.value"
:label="opt.label"
:value="opt.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="油田公司" prop="ytgs"> <el-form-item label="油田公司" prop="ytgs">
<el-input style="width: 200px" v-model="form.ytgs" clearable /> <el-input
style="width: 200px"
v-model="form.ytgs"
clearable
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="井号" prop="jh"> <el-form-item label="井号" prop="jh">
<el-input style="width: 200px" v-model="form.jh" clearable /> <el-input style="width: 200px" v-model="form.jh" clearable />
...@@ -95,12 +184,15 @@ ...@@ -95,12 +184,15 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="设计作业周期" prop="sjzyzq"> <el-form-item label="设计作业周期" prop="sjzyzq">
<el-input style="width: 200px" v-model="form.sjzyzq" clearable <el-input
style="width: 200px"
v-model="form.sjzyzq"
clearable
oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')" oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
@blur="form.sjzyzq = $event.target.value" /> @blur="form.sjzyzq = $event.target.value"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
...@@ -109,74 +201,124 @@ ...@@ -109,74 +201,124 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div class="cardStyle" style="border: 1px solid #eee;margin-top: 10px"> <div
<div style="font-size: 14px;padding: 10px;border-bottom: 1px solid #eee;margin-top: -10px;">地质信息 class="cardStyle"
style="border: 1px solid #eee; margin-top: 10px"
>
<div
style="
font-size: 14px;
padding: 10px;
border-bottom: 1px solid #eee;
margin-top: -10px;
"
>
地质信息
</div> </div>
<el-row style="margin-top: 10px"> <el-row style="margin-top: 10px">
<el-col :span="8"> <el-col :span="8">
<el-form-item label="井口坐标(X)" prop="jkzbx"> <el-form-item label="井口坐标(X)" prop="jkzbx">
<el-input style="width: 200px" v-model="form.jkzbx" clearable <el-input
style="width: 200px"
v-model="form.jkzbx"
clearable
oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')" oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
@blur="form.jkzbx = $event.target.value" /> @blur="form.jkzbx = $event.target.value"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="井口坐标(Y)" prop="jkzby"> <el-form-item label="井口坐标(Y)" prop="jkzby">
<el-input style="width: 200px" v-model="form.jkzby" clearable <el-input
style="width: 200px"
v-model="form.jkzby"
clearable
oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')" oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
@blur="form.jkzby = $event.target.value" /> @blur="form.jkzby = $event.target.value"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="入靶点A坐标(X)" prop="rbdazb"> <el-form-item label="入靶点A坐标(X)" prop="rbdazb">
<el-input style="width: 180px" v-model="form.rbdazb" clearable <el-input
style="width: 180px"
v-model="form.rbdazb"
clearable
oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')" oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
@blur="form.rbdazb = $event.target.value" /> @blur="form.rbdazb = $event.target.value"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="入靶点A坐标(Y)" prop="rbdbzb"> <el-form-item label="入靶点A坐标(Y)" prop="rbdbzb">
<el-input style="width: 200px" v-model="form.rbdbzb" clearable <el-input
style="width: 200px"
v-model="form.rbdbzb"
clearable
oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')" oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
@blur="form.rbdbzb = $event.target.value" /> @blur="form.rbdbzb = $event.target.value"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="地面海拔" prop="dmhb"> <el-form-item label="地面海拔" prop="dmhb">
<el-input style="width: 200px" v-model="form.dmhb" clearable <el-input
style="width: 200px"
v-model="form.dmhb"
clearable
oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')" oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
@blur="form.dmhb = $event.target.value" /> @blur="form.dmhb = $event.target.value"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="完井方式" prop="wjfs"> <el-form-item label="完井方式" prop="wjfs">
<el-input style="width: 180px" v-model="form.wjfs" clearable /> <el-input
style="width: 180px"
v-model="form.wjfs"
clearable
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="定稿设计井深m" prop="dgsjjs" style="width: 200px"> <el-form-item
<el-input style="width: 200px" v-model="form.dgsjjs" clearable label="定稿设计井深m"
prop="dgsjjs"
style="width: 200px"
>
<el-input
style="width: 200px"
v-model="form.dgsjjs"
clearable
oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')" oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
@blur="form.dgsjjs = $event.target.value" /> @blur="form.dgsjjs = $event.target.value"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="深度零点" prop="sdld"> <el-form-item label="深度零点" prop="sdld">
<el-input style="width: 200px" v-model="form.sdld" clearable /> <el-input
style="width: 200px"
v-model="form.sdld"
clearable
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="定稿设计水平段长度" prop="dgsjspdcd"> <el-form-item label="定稿设计水平段长度" prop="dgsjspdcd">
<el-input style="width: 200px" v-model="form.dgsjspdcd" clearable <el-input
style="width: 200px"
v-model="form.dgsjspdcd"
clearable
oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')" oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
@blur="form.dgsjspdcd = $event.target.value" /> @blur="form.dgsjspdcd = $event.target.value"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- <el-col :span="8"> <!-- <el-col :span="8">
...@@ -194,9 +336,12 @@ ...@@ -194,9 +336,12 @@
</el-row> --> </el-row> -->
</div> </div>
</el-form> </el-form>
<div style="display: flex;justify-content: center;margin: 10px;" slot="footer" class="dialog-footer"> <div
style="display: flex; justify-content: center; margin: 10px"
slot="footer"
class="dialog-footer"
>
<el-button type="primary" @click="submitForm">确 定</el-button> <el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button> <el-button @click="cancel">取 消</el-button>
</div> </div>
...@@ -217,29 +362,56 @@ ...@@ -217,29 +362,56 @@
<el-button @click="cancelFinalizeForm">取 消</el-button> <el-button @click="cancelFinalizeForm">取 消</el-button>
</div> </div>
</el-dialog> --> </el-dialog> -->
<el-dialog title="算法选择" width="20%" :visible.sync="dialogFormVisibleAr">
<el-form :model="formAr">
<el-form-item label="" label-width="80px">
<el-radio-group
size="medium"
v-model="formAr.radio"
@change="handleChangeAr"
>
<el-radio label="3">固定算法</el-radio>
<el-radio label="6">智能算法</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<!-- <div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div> -->
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { getQkxl } from "@/api/system/jsaa"; import { getQkxl } from "@/api/system/jsaa";
import wellImg from '../../assets/images/home/well.png' import wellImg from "../../assets/images/home/well.png";
import { listFayh, deptTreeSelect, getBasinSelect, getBlockByPdid, deleteJtDjjc, addJtDjjc, getJtDjjc, updateJtDjjc, getMdcByQkid, LockJtDjjc } from "@/api/scientificDrill/schemeOptimization"; import {
import { blob } from 'd3'; listFayh,
deptTreeSelect,
getBasinSelect,
getBlockByPdid,
deleteJtDjjc,
addJtDjjc,
getJtDjjc,
updateJtDjjc,
getMdcByQkid,
LockJtDjjc,
} from "@/api/scientificDrill/schemeOptimization";
import { blob } from "d3";
import Treeselect from "@riophae/vue-treeselect"; import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default { export default {
name: "tabsCard", name: "tabsCard",
components: { Treeselect }, components: { Treeselect },
dicts: ['jt_ytgs', 'jt_jx', 'jt_jb', 'jt_wjfs', 'jt_sdld', 'jt_qklx'], dicts: ["jt_ytgs", "jt_jx", "jt_jb", "jt_wjfs", "jt_sdld", "jt_qklx"],
props: { props: {
tabsId: { tabsId: {
type: String, type: String,
default: '' default: "",
}, },
}, },
watch: { watch: {
tabsId: { tabsId: {
handler(val) { handler(val) {
...@@ -266,7 +438,7 @@ export default { ...@@ -266,7 +438,7 @@ export default {
queryParams: { queryParams: {
jh: undefined, jh: undefined,
pageNum: 1, pageNum: 1,
pageSize: 10 pageSize: 10,
}, },
// 弹出层标题 // 弹出层标题
title: "", title: "",
...@@ -303,19 +475,14 @@ export default { ...@@ -303,19 +475,14 @@ export default {
finalizeForm: {}, finalizeForm: {},
// 表单校验 // 表单校验
rules: { rules: {
jh: [ jh: [{ required: true, message: "井号不能为空", trigger: "blur" }],
{ required: true, message: "井号不能为空", trigger: "blur" }
],
ytgs: [ ytgs: [
{ required: true, message: "油田公司不能为空", trigger: "blur" } { required: true, message: "油田公司不能为空", trigger: "blur" },
], ],
zjgs: [ zjgs: [
{ required: true, message: "钻井公司不能为空", trigger: "blur" } { required: true, message: "钻井公司不能为空", trigger: "blur" },
],
jd: [
{ required: true, message: "井队不能为空", trigger: "blur" }
], ],
jd: [{ required: true, message: "井队不能为空", trigger: "blur" }],
}, },
basinValue: "", basinValue: "",
selectedBasinId: "", selectedBasinId: "",
...@@ -331,46 +498,48 @@ export default { ...@@ -331,46 +498,48 @@ export default {
pd: "", pd: "",
mdc: { mdc: {
lazy: true, lazy: true,
lazyLoad: this.loadTreeNode // 直接将 loadTreeNode 方法作为 lazyLoad 属性传递 lazyLoad: this.loadTreeNode, // 直接将 loadTreeNode 方法作为 lazyLoad 属性传递
}, },
dialogFormVisibleAr: false,
formAr: {
radio: "",
},
sfcs: {},
selectedBasinId: null, // 添加一个用于存储选中盆地的变量 selectedBasinId: null, // 添加一个用于存储选中盆地的变量
oilOptions: [] // 用于存储 MDC 数据 oilOptions: [], // 用于存储 MDC 数据
} };
}, },
computed: { computed: {
filteredBlockOptions() { filteredBlockOptions() {
if (!Array.isArray(this.blockOptions)) return [] if (!Array.isArray(this.blockOptions)) return [];
return this.blockOptions return this.blockOptions
.filter(item => item && (item.qk || item.qkmc)) .filter((item) => item && (item.qk || item.qkmc))
.map(item => ({ label: item.qk || item.qkmc, value: item.qk || item.qkmc })) .map((item) => ({
} label: item.qk || item.qkmc,
value: item.qk || item.qkmc,
}));
},
}, },
mounted() { mounted() {
console.log('this.tabsId', this.tabsId); console.log("this.tabsId", this.tabsId);
this.getList(); this.getList();
this.getDeptTree(); this.getDeptTree();
this.getBlockOptions(); this.getBlockOptions();
this.getBasinSelect(); this.getBasinSelect();
}, },
methods: { methods: {
onBlockChange(val) { onBlockChange(val) {
this.form.qkmc = val || ''; this.form.qkmc = val || "";
}, },
/** 获取区块下拉选项 */ /** 获取区块下拉选项 */
getBlockOptions() { getBlockOptions() {
getQkxl().then(response => { getQkxl().then((response) => {
// 过滤掉无效的选项 // 过滤掉无效的选项
this.blockOptions = response.data.filter(item => item && item.qk); this.blockOptions = response.data.filter((item) => item && item.qk);
console.log(this.blockOptions, ' this.blockOptions '); console.log(this.blockOptions, " this.blockOptions ");
}); });
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
...@@ -380,26 +549,25 @@ export default { ...@@ -380,26 +549,25 @@ export default {
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
this.queryParams.jh = '' this.queryParams.jh = "";
this.resetForm("queryForm"); this.resetForm("queryForm");
this.queryParams.pageNum = 1; this.queryParams.pageNum = 1;
this.getList() this.getList();
}, },
openCascader() { openCascader() {
this.showCascader = true; this.showCascader = true;
}, },
change(val) { change(val) {
this.showCascader = false; // 选择后关闭级联选择器 this.showCascader = false; // 选择后关闭级联选择器
let nodesObj = this.$refs['cascader'].getCheckedNodes(); let nodesObj = this.$refs["cascader"].getCheckedNodes();
console.log(nodesObj, 'nodesObj'); console.log(nodesObj, "nodesObj");
if (nodesObj && nodesObj.length > 0) { if (nodesObj && nodesObj.length > 0) {
const lastNode = nodesObj[nodesObj.length - 1]; const lastNode = nodesObj[nodesObj.length - 1];
this.form.mdc = lastNode.label; // 设置选中层的 mc 到表单中 this.form.mdc = lastNode.label; // 设置选中层的 mc 到表单中
console.log(this.form.mdc, 'this.form.mdc '); console.log(this.form.mdc, "this.form.mdc ");
this.form.mdcid = lastNode.value; // 设置选中层的 id 到表单中 this.form.mdcid = lastNode.value; // 设置选中层的 id 到表单中
console.log(this.form.mdcid, 'this.form.mdcid '); console.log(this.form.mdcid, "this.form.mdcid ");
} }
}, },
...@@ -414,44 +582,45 @@ export default { ...@@ -414,44 +582,45 @@ export default {
const val = { const val = {
ytgs: localTabsId, ytgs: localTabsId,
jh: this.queryParams.jh jh: this.queryParams.jh,
} };
listFayh(val).then(response => { listFayh(val).then((response) => {
console.log('this.tabsId', localTabsId); console.log("this.tabsId", localTabsId);
console.log('查询'); console.log("查询");
this.ytLists = response.rows; this.ytLists = response.rows;
console.log(this.ytLists, 'this.ytLists'); console.log(this.ytLists, "this.ytLists");
}); });
}, },
/** 查询部门树结构 */ /** 查询部门树结构 */
getDeptTree() { getDeptTree() {
deptTreeSelect({ level: "3" }).then(response => { deptTreeSelect({ level: "3" }).then((response) => {
this.deptOptions = response.data; this.deptOptions = response.data;
console.log(this.deptOptions, 'this.deptOptions'); console.log(this.deptOptions, "this.deptOptions");
}); });
}, },
// 查询盆地结构 // 查询盆地结构
getBasinSelect() { getBasinSelect() {
getBasinSelect().then(response => { getBasinSelect().then((response) => {
this.basinOptions = response; this.basinOptions = response;
console.log(this.basinOptions, ' this.basinOptions'); console.log(this.basinOptions, " this.basinOptions");
// 不要在这里清空或覆盖 blockOptions，避免和区块下拉数据竞争 // 不要在这里清空或覆盖 blockOptions，避免和区块下拉数据竞争
// 仅在用户选择盆地后，再通过 basinChange 主动更新区块选项 // 仅在用户选择盆地后，再通过 basinChange 主动更新区块选项
}); });
}, },
// 盆地选项改变时触发 区块 // 盆地选项改变时触发 区块
basinChange() { basinChange() {
const selectedBasinName = this.form.pd; // 获取选中的盆地名称 const selectedBasinName = this.form.pd; // 获取选中的盆地名称
console.log(selectedBasinName, 'selectedBasinName'); console.log(selectedBasinName, "selectedBasinName");
const selectedBasin = this.basinOptions.find(item => item.pdmc === selectedBasinName); // 根据名称获取相应的盆地对象 const selectedBasin = this.basinOptions.find(
console.log(selectedBasin, 'selectedBasin'); (item) => item.pdmc === selectedBasinName
); // 根据名称获取相应的盆地对象
console.log(selectedBasin, "selectedBasin");
if (selectedBasin) { if (selectedBasin) {
getBlockByPdid(selectedBasin.id).then(response => { // 使用盆地对象的ID来获取区块 getBlockByPdid(selectedBasin.id).then((response) => {
// 使用盆地对象的ID来获取区块
this.blockOptions = response.rows; this.blockOptions = response.rows;
}); });
} }
...@@ -475,90 +644,83 @@ export default { ...@@ -475,90 +644,83 @@ export default {
// }); // });
// }, // },
loadTreeNode(node, resolve) { loadTreeNode(node, resolve) {
console.log(node, 'node'); console.log(node, "node");
console.log(resolve, 'resolve'); console.log(resolve, "resolve");
const params = { const params = {
dclevel: node.level + 1, dclevel: node.level + 1,
pid: node.value, pid: node.value,
}; };
console.log(params, 'params'); console.log(params, "params");
// 发起请求获取节点数据 // 发起请求获取节点数据
getMdcByQkid(params).then(response => { getMdcByQkid(params)
.then((response) => {
const oilOptions = response.data; // 获取到的数据 const oilOptions = response.data; // 获取到的数据
console.log(oilOptions, 'this.oilOptions'); console.log(oilOptions, "this.oilOptions");
if (Array.isArray(oilOptions)) { if (Array.isArray(oilOptions)) {
// 将数据转换为符合 Cascader 要求的格式 // 将数据转换为符合 Cascader 要求的格式
const nodes = oilOptions.map(item => ({ const nodes = oilOptions.map((item) => ({
value: item.id, value: item.id,
label: item.mc, label: item.mc,
leaf: item.dclevel >= 5 leaf: item.dclevel >= 5,
})); }));
console.log(nodes, 'nodes'); console.log(nodes, "nodes");
resolve(nodes); resolve(nodes);
} else { } else {
// 处理异常情况 // 处理异常情况
} }
}).catch(error => { })
.catch((error) => {
// 处理请求失败的情况 // 处理请求失败的情况
}); });
}, },
//点击卡片 //点击卡片
toDesignScheme(item) { toDesignScheme(item) {
this.$store.dispatch('setJh', item.jh); this.sfcs = item;
this.$store.dispatch('setJhdm', item.jhdm); this.$store.dispatch("setJh", item.jh);
console.log(item, 'item'); this.$store.dispatch("setJhdm", item.jhdm);
this.$router.push({ this.dialogFormVisibleAr = true;
path: "/wellDesign",
query: {
jhdm: item.jhdm,
jh: item.jh,
qkmc: item.qkmc
}
})
}, },
//新建井 //新建井
handleAdd() { handleAdd() {
this.reset(); this.reset();
this.open = true; this.open = true;
this.title = "新增井设计" this.title = "新增井设计";
}, },
//编辑 //编辑
handleEdit(item) { handleEdit(item) {
this.reset(); this.reset();
this.open = true; this.open = true;
console.log(item, 'item'); console.log(item, "item");
const jhdm = item.jhdm; const jhdm = item.jhdm;
getJtDjjc(jhdm).then(response => { getJtDjjc(jhdm).then((response) => {
this.form = response.data; this.form = response.data;
// this.form.mdc = response.data.mdcid; // this.form.mdc = response.data.mdcid;
console.log(response, 'response'); console.log(response, "response");
this.open = true; this.open = true;
this.title = "修改"; this.title = "修改";
}); });
this.title = "修改井设计" this.title = "修改井设计";
}, },
/** 提交按钮 */ /** 提交按钮 */
submitForm() { submitForm() {
// const pd = this.form.pd // const pd = this.form.pd
// this.form.pdid = pd == '' ? '' : this.basinOptions.find(item => item.pdmc == pd).pdid // this.form.pdid = pd == '' ? '' : this.basinOptions.find(item => item.pdmc == pd).pdid
// const qkmc = this.form.qkmc // const qkmc = this.form.qkmc
// this.form.qkdm = qkmc == '' ? '' : this.blockOptions.find(item => item.qkmc == qkmc).qkdm // this.form.qkdm = qkmc == '' ? '' : this.blockOptions.find(item => item.qkmc == qkmc).qkdm
this.$refs["form"].validate(valid => { this.$refs["form"].validate((valid) => {
if (valid) { if (valid) {
if (this.form.jhdm != null && this.form.jhdm !== '') { if (this.form.jhdm != null && this.form.jhdm !== "") {
// 如果 jhdm 存在且不为空，则执行更新操作 // 如果 jhdm 存在且不为空，则执行更新操作
updateJtDjjc(this.form).then(response => { updateJtDjjc(this.form).then((response) => {
this.$modal.msgSuccess("修改成功"); this.$modal.msgSuccess("修改成功");
this.open = false; this.open = false;
this.getList(); this.getList();
}); });
} else { } else {
// 否则执行新增操作 // 否则执行新增操作
addJtDjjc(this.form).then(response => { addJtDjjc(this.form).then((response) => {
this.$modal.msgSuccess("新增成功"); this.$modal.msgSuccess("新增成功");
this.open = false; this.open = false;
this.getList(); this.getList();
...@@ -570,52 +732,72 @@ export default { ...@@ -570,52 +732,72 @@ export default {
// 表单重置 // 表单重置
reset() { reset() {
this.form = { this.form = {};
};
this.resetForm("form"); this.resetForm("form");
}, },
cancel() { cancel() {
this.open = false; this.open = false;
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(item) { handleDelete(item) {
const jhdms = item.jhdm; const jhdms = item.jhdm;
this.$modal.confirm('是否确认删除编号为"' + jhdms + '"的数据项？').then(function () { this.$modal
.confirm('是否确认删除编号为"' + jhdms + '"的数据项？')
.then(function () {
return deleteJtDjjc(jhdms); return deleteJtDjjc(jhdms);
}).then(() => { })
.then(() => {
this.getList(); this.getList();
this.$modal.msgSuccess("删除成功"); this.$modal.msgSuccess("删除成功");
}).catch(() => { }); })
.catch(() => {});
}, },
/** 锁定按钮操作 */ /** 锁定按钮操作 */
handleLock(item) { handleLock(item) {
const jhdm = item.jhdm; const jhdm = item.jhdm;
this.$modal.confirm('是否确认锁定？').then(function () { this.$modal
.confirm("是否确认锁定？")
.then(function () {
return LockJtDjjc(jhdm); return LockJtDjjc(jhdm);
}).then(() => { })
.then(() => {
this.getList(); this.getList();
this.$modal.msgSuccess("已锁定"); this.$modal.msgSuccess("已锁定");
}).catch(() => { }); })
.catch(() => {});
}, },
submitFinalizeForm() { submitFinalizeForm() {
this.openFinalize = false this.openFinalize = false;
}, },
cancelFinalizeForm() { cancelFinalizeForm() {
this.openFinalize = false this.openFinalize = false;
}, },
handleChangeAr() {
if (this.radio == "3") {
var item = this.sfcs;
console.log(item, "item");
this.$router.push({
path: "/wellDesign",
query: {
jhdm: item.jhdm,
jh: item.jh,
qkmc: item.qkmc,
},
});
} else if (this.radio == "6") {
this.$message({
message: "正在开发中！",
type: "warning",
});
} }
} },
},
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -640,8 +822,6 @@ export default { ...@@ -640,8 +822,6 @@ export default {
font-size: 14px; font-size: 14px;
} }
.clearfix:before, .clearfix:before,
.clearfix:after { .clearfix:after {
display: table; display: table;
...@@ -649,7 +829,7 @@ export default { ...@@ -649,7 +829,7 @@ export default {
} }
.clearfix:after { .clearfix:after {
clear: both clear: both;
} }
.card-container { .card-container {
......
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