Skip to content

D
dizhen-ui
Commit 485644ae by jiang'yun
Options

修改

parent dfd5cc55
Showing with 837 additions and 436 deletions
src/layout/components/Navbar.vue
<template> <template>
<div class="navbar"> <div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> <hamburger
id="hamburger-container"
<breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container" /> :is-active="sidebar.opened"
class="hamburger-container"
@toggleClick="toggleSideBar"
/>
<breadcrumb
v-if="!topNav"
id="breadcrumb-container"
class="breadcrumb-container"
/>
<top-nav v-if="topNav" id="topmenu-container" class="topmenu-container" /> <top-nav v-if="topNav" id="topmenu-container" class="topmenu-container" />
<div class="right-menu"> <div class="right-menu">
<template v-if="device!=='mobile'"> <template v-if="device !== 'mobile'">
<search id="header-search" class="right-menu-item" /> <!-- <search id="header-search" class="right-menu-item" /> -->
<el-tooltip content="源码地址" effect="dark" placement="bottom"> <!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" /> <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
</el-tooltip> </el-tooltip>
<el-tooltip content="文档地址" effect="dark" placement="bottom"> <el-tooltip content="文档地址" effect="dark" placement="bottom">
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" /> <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
</el-tooltip> </el-tooltip> -->
<screenfull id="screenfull" class="right-menu-item hover-effect" />
<!-- <screenfull id="screenfull" class="right-menu-item hover-effect" /> -->
<!--
<el-tooltip content="布局大小" effect="dark" placement="bottom"> <el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" /> <size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip> </el-tooltip> -->
</template> </template>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click"> <el-dropdown
class="avatar-container right-menu-item hover-effect"
trigger="click"
>
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img :src="avatar" class="user-avatar"> <img :src="avatar" class="user-avatar" />
<i class="el-icon-caret-bottom" /> <i class="el-icon-caret-bottom" />
</div> </div>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
...@@ -47,15 +58,15 @@ ...@@ -47,15 +58,15 @@
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from "vuex";
import Breadcrumb from '@/components/Breadcrumb' import Breadcrumb from "@/components/Breadcrumb";
import TopNav from '@/components/TopNav' import TopNav from "@/components/TopNav";
import Hamburger from '@/components/Hamburger' import Hamburger from "@/components/Hamburger";
import Screenfull from '@/components/Screenfull' import Screenfull from "@/components/Screenfull";
import SizeSelect from '@/components/SizeSelect' import SizeSelect from "@/components/SizeSelect";
import Search from '@/components/HeaderSearch' import Search from "@/components/HeaderSearch";
import RuoYiGit from '@/components/RuoYi/Git' import RuoYiGit from "@/components/RuoYi/Git";
import RuoYiDoc from '@/components/RuoYi/Doc' import RuoYiDoc from "@/components/RuoYi/Doc";
export default { export default {
components: { components: {
...@@ -66,48 +77,46 @@ export default { ...@@ -66,48 +77,46 @@ export default {
SizeSelect, SizeSelect,
Search, Search,
RuoYiGit, RuoYiGit,
RuoYiDoc RuoYiDoc,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(["sidebar", "avatar", "device"]),
'sidebar',
'avatar',
'device'
]),
setting: { setting: {
get() { get() {
return this.$store.state.settings.showSettings return this.$store.state.settings.showSettings;
}, },
set(val) { set(val) {
this.$store.dispatch('settings/changeSetting', { this.$store.dispatch("settings/changeSetting", {
key: 'showSettings', key: "showSettings",
value: val value: val,
}) });
} },
}, },
topNav: { topNav: {
get() { get() {
return this.$store.state.settings.topNav return this.$store.state.settings.topNav;
} },
} },
}, },
methods: { methods: {
toggleSideBar() { toggleSideBar() {
this.$store.dispatch('app/toggleSideBar') this.$store.dispatch("app/toggleSideBar");
}, },
logout() { logout() {
this.$confirm('确定注销并退出系统吗？', '提示', { this.$confirm("确定注销并退出系统吗？", "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning' type: "warning",
}).then(() => {
this.$store.dispatch('LogOut').then(() => {
location.href = '/index'
}) })
}).catch(() => {}) .then(() => {
} this.$store.dispatch("LogOut").then(() => {
} location.href = "/index";
} });
})
.catch(() => {});
},
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -116,18 +125,18 @@ export default { ...@@ -116,18 +125,18 @@ export default {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: #fff; background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08); box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container { .hamburger-container {
line-height: 46px; line-height: 46px;
height: 100%; height: 100%;
float: left; float: left;
cursor: pointer; cursor: pointer;
transition: background .3s; transition: background 0.3s;
-webkit-tap-highlight-color:transparent; -webkit-tap-highlight-color: transparent;
&:hover { &:hover {
background: rgba(0, 0, 0, .025) background: rgba(0, 0, 0, 0.025);
} }
} }
...@@ -164,10 +173,10 @@ export default { ...@@ -164,10 +173,10 @@ export default {
&.hover-effect { &.hover-effect {
cursor: pointer; cursor: pointer;
transition: background .3s; transition: background 0.3s;
&:hover { &:hover {
background: rgba(0, 0, 0, .025) background: rgba(0, 0, 0, 0.025);
} }
} }
} }
......
src/views/plots/index.vue
<template> <template>
<div> <div>
<el-tooltip content="设置" placement="bottom" effect="light"> <el-tooltip content="设置" placement="bottom" effect="light">
<el-button @click="editProperties" :class="{ 'active': showLineStylePanel }"> <el-button
@click="editProperties"
:class="{ active: showLineStylePanel }"
>
<i class="el-icon-setting"></i> <i class="el-icon-setting"></i>
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-tooltip content="上传文件" placement="bottom" effect="light"> <el-tooltip content="上传文件" placement="bottom" effect="light">
<el-button @click="triggerFileUpload"> <el-button @click="triggerFileUpload">
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
</el-button> </el-button>
</el-tooltip> </el-tooltip>
<el-select
v-model="colorMapSelect"
style="width: 280px"
placeholder="请选择颜色集合"
@change="changeColor"
>
<el-option
v-for="item in listNameColorMaps"
:label="item"
:value="item"
></el-option>
</el-select>
<el-dialog title="设置" :visible.sync="showPropertiesDialog" width="100%"> <el-dialog title="设置" :visible.sync="showPropertiesDialog" width="100%">
<el-form ref="form" label-width="130px"> <el-form ref="form" label-width="130px">
<el-row> <el-row>
<el-col :span="5"> <el-col :span="5">
<el-form-item label="颜色集合"> <el-form-item label="颜色集合">
<el-select v-model="colorMapSelect" placeholder="请选择颜色集合" @change="changeColor"> <el-select
<el-option v-for="item in listNameColorMaps" :label="item" :value="item"></el-option> v-model="colorMapSelect"
placeholder="请选择颜色集合"
@change="changeColor"
>
<el-option
v-for="item in listNameColorMaps"
:label="item"
:value="item"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="5">
<el-form-item label="归一化类型"> <el-form-item label="归一化类型">
<el-select v-model="NormalizationType" @change="changeNor" placeholder="请选择归一化类型"> <el-select
<el-option v-for="item in NormalizationTypeData" :label="item.label" :value="item.value"></el-option> v-model="NormalizationType"
@change="changeNor"
placeholder="请选择归一化类型"
>
<el-option
v-for="item in NormalizationTypeData"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="5">
<el-form-item label="归一化比例"> <el-form-item label="归一化比例">
<el-slider @change="changeNor" style="width: 180px;" v-model="NormalizationBl" :min="0.1" :max="5" <el-slider
:step="0.1" show-stops> @change="changeNor"
style="width: 180px"
v-model="NormalizationBl"
:min="0.1"
:max="5"
:step="0.1"
show-stops
>
</el-slider> </el-slider>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -40,7 +78,6 @@ ...@@ -40,7 +78,6 @@
<el-input v-model="mycds" @blur="changeMycds"></el-input> <el-input v-model="mycds" @blur="changeMycds"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="5"> <el-col :span="5">
...@@ -50,22 +87,46 @@ ...@@ -50,22 +87,46 @@
</el-col> </el-col>
<el-col :span="5"> <el-col :span="5">
<el-form-item label="采样插值类型"> <el-form-item label="采样插值类型">
<el-select v-model="samplesType" @change="changeInt" placeholder="请选择采样插值类型"> <el-select
<el-option v-for="item in InterpolationType" :label="item.label" :value="item.value"></el-option> v-model="samplesType"
@change="changeInt"
placeholder="请选择采样插值类型"
>
<el-option
v-for="item in InterpolationType"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="5">
<el-form-item label="采样插值边缘"> <el-form-item label="采样插值边缘">
<el-select v-model="samplesEdge" @change="changeInt" placeholder="请选择采样插值边缘"> <el-select
<el-option v-for="item in InterpolationEdge" :label="item.label" :value="item.value"></el-option> v-model="samplesEdge"
@change="changeInt"
placeholder="请选择采样插值边缘"
>
<el-option
v-for="item in InterpolationEdge"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="5">
<el-form-item label="道插值类型"> <el-form-item label="道插值类型">
<el-select v-model="tracesEdge" @change="changeInt" placeholder="请选择道插值类型"> <el-select
<el-option v-for="item in InterpolationType" :label="item.label" :value="item.value"></el-option> v-model="tracesEdge"
@change="changeInt"
placeholder="请选择道插值类型"
>
<el-option
v-for="item in InterpolationType"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -73,44 +134,86 @@ ...@@ -73,44 +134,86 @@
<el-row> <el-row>
<el-col :span="5"> <el-col :span="5">
<el-form-item label="道插值边缘"> <el-form-item label="道插值边缘">
<el-select v-model="tracesType" @change="changeInt" placeholder="请选择道插值边缘"> <el-select
<el-option v-for="item in InterpolationEdge" :label="item.label" :value="item.value"></el-option> v-model="tracesType"
@change="changeInt"
placeholder="请选择道插值边缘"
>
<el-option
v-for="item in InterpolationEdge"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="10"> <el-col :span="10">
<el-form-item label="绘图类型"> <el-form-item label="绘图类型">
<el-checkbox v-model="Wiggle" @change="changePlotType">Wiggle</el-checkbox> <el-checkbox v-model="Wiggle" @change="changePlotType"
<el-checkbox v-model="Reversed" @change="changePlotType">Reversed</el-checkbox> >Wiggle</el-checkbox
<el-checkbox v-model="PositiveFill" @change="changePlotType">Positive fill</el-checkbox> >
<el-checkbox v-model="NegativeFill" @change="changePlotType">Negative fill</el-checkbox> <el-checkbox v-model="Reversed" @change="changePlotType"
<el-checkbox v-model="PositiveColorFill" @change="changePlotType">Positive color fill</el-checkbox> >Reversed</el-checkbox
<el-checkbox v-model="NegativeColorFill" @change="changePlotType">Negative color fill</el-checkbox> >
<el-checkbox v-model="SimpleDensity" @change="changePlotType">Simple density</el-checkbox> <el-checkbox v-model="PositiveFill" @change="changePlotType"
<el-checkbox v-model="InterpolatedDensity" @change="changePlotType">Interpolated density</el-checkbox> >Positive fill</el-checkbox
>
<el-checkbox v-model="NegativeFill" @change="changePlotType"
>Negative fill</el-checkbox
>
<el-checkbox v-model="PositiveColorFill" @change="changePlotType"
>Positive color fill</el-checkbox
>
<el-checkbox v-model="NegativeColorFill" @change="changePlotType"
>Negative color fill</el-checkbox
>
<el-checkbox v-model="SimpleDensity" @change="changePlotType"
>Simple density</el-checkbox
>
<el-checkbox
v-model="InterpolatedDensity"
@change="changePlotType"
>Interpolated density</el-checkbox
>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="5">
<el-form-item label="Wiggle-裁剪因子"> <el-form-item label="Wiggle-裁剪因子">
<el-input v-model="ClippingFactor" @blur="changePlotType"></el-input> <el-input
v-model="ClippingFactor"
@blur="changePlotType"
></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="5"> <el-col :span="5">
<el-form-item label="Wiggle-抽取间距"> <el-form-item label="Wiggle-抽取间距">
<el-input v-model="DecimationSpacing" @blur="changePlotType"></el-input> <el-input
v-model="DecimationSpacing"
@blur="changePlotType"
></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="5">
<el-form-item label="Wiggle-密度抽取"> <el-form-item label="Wiggle-密度抽取">
<el-checkbox v-model="densityDecimation" @change="changePlotType">Density decimation（密度抽取）</el-checkbox> <el-checkbox v-model="densityDecimation" @change="changePlotType"
>Density decimation（密度抽取）</el-checkbox
>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="5">
<el-form-item label="Clipping mode（裁剪模式）"> <el-form-item label="Clipping mode（裁剪模式）">
<el-select v-model="ClippingMode" @change="changePlotType" placeholder="请选择裁剪模式"> <el-select
<el-option v-for="item in ClippingModeData" :label="item.label" :value="item.value"></el-option> v-model="ClippingMode"
@change="changePlotType"
placeholder="请选择裁剪模式"
>
<el-option
v-for="item in ClippingModeData"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -118,37 +221,61 @@ ...@@ -118,37 +221,61 @@
<el-row> <el-row>
<el-col :span="3"> <el-col :span="3">
<el-form-item label="TaperFilter（滤波）"> <el-form-item label="TaperFilter（滤波）">
<el-checkbox v-model="TaperFilterEnbled" @change="changePlotType">启用滤波</el-checkbox> <el-checkbox v-model="TaperFilterEnbled" @change="changePlotType"
>启用滤波</el-checkbox
>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<el-form-item label="f1"> <el-form-item label="f1">
<el-input v-model="f1" style="width: 80px" @blur="changePlotType"></el-input> <el-input
v-model="f1"
style="width: 80px"
@blur="changePlotType"
></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<el-form-item label="f2"> <el-form-item label="f2">
<el-input v-model="f2" style="width: 80px" @blur="changePlotType"></el-input> <el-input
v-model="f2"
style="width: 80px"
@blur="changePlotType"
></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<el-form-item label="f3"> <el-form-item label="f3">
<el-input v-model="f3" style="width: 80px" @blur="changePlotType"></el-input> <el-input
v-model="f3"
style="width: 80px"
@blur="changePlotType"
></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="2"> <el-col :span="2">
<el-form-item label="f4"> <el-form-item label="f4">
<el-input v-model="f4" style="width: 80px" @blur="changePlotType"></el-input> <el-input
v-model="f4"
style="width: 80px"
@blur="changePlotType"
></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<el-form-item label="采样率"> <el-form-item label="采样率">
<el-input v-model="sampleRate" style="width: 80px" @blur="changePlotType"></el-input> <el-input
v-model="sampleRate"
style="width: 80px"
@blur="changePlotType"
></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<el-form-item label="带通模式"> <el-form-item label="带通模式">
<el-checkbox v-model="passFlag" @change="changePlotType">带通模式</el-checkbox> <el-checkbox v-model="passFlag" @change="changePlotType"
>带通模式</el-checkbox
>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
...@@ -156,54 +283,95 @@ ...@@ -156,54 +283,95 @@
<el-row> <el-row>
<el-col :span="3"> <el-col :span="3">
<el-form-item label="AGC"> <el-form-item label="AGC">
<el-checkbox v-model="AGCEnbled" @change="changePlotType">启用AGC</el-checkbox> <el-checkbox v-model="AGCEnbled" @change="changePlotType"
>启用AGC</el-checkbox
>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<el-form-item label="AGC length"> <el-form-item label="AGC length">
<el-input v-model="AGCLength" style="width: 80px" @blur="changePlotType"></el-input> <el-input
v-model="AGCLength"
style="width: 80px"
@blur="changePlotType"
></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<el-form-item label="Desired average"> <el-form-item label="Desired average">
<el-input v-model="DesiredAverage" style="width: 80px" @blur="changePlotType"></el-input> <el-input
v-model="DesiredAverage"
style="width: 80px"
@blur="changePlotType"
></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<el-form-item label="Noise reduction"> <el-form-item label="Noise reduction">
<el-select v-model="NoiseReduction" @change="changePlotType" placeholder="请选择降噪"> <el-select
<el-option v-for="item in NoiseReductionData" :label="item.label" :value="item.value"></el-option> v-model="NoiseReduction"
@change="changePlotType"
placeholder="请选择降噪"
>
<el-option
v-for="item in NoiseReductionData"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<el-form-item label="Noise reduction percentage"> <el-form-item label="Noise reduction percentage">
<el-input v-model="NoiseReductionPercentage" style="width: 80px" @blur="changePlotType"></el-input> <el-input
v-model="NoiseReductionPercentage"
style="width: 80px"
@blur="changePlotType"
></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<el-form-item label="Start sample"> <el-form-item label="Start sample">
<el-input v-model="StartSample" style="width: 80px" @blur="changePlotType"></el-input> <el-input
v-model="StartSample"
style="width: 80px"
@blur="changePlotType"
></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<el-form-item label="Step"> <el-form-item label="Step">
<el-input v-model="Step" style="width: 80px" @blur="changePlotType"></el-input> <el-input
v-model="Step"
style="width: 80px"
@blur="changePlotType"
></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="4"> <el-col :span="4">
<el-form-item label="Units"> <el-form-item label="Units">
<el-select v-model="Units" @change="changePlotType" placeholder="请选择单位"> <el-select
<el-option v-for="item in UnitsData" :label="item.label" :value="item.value"></el-option> v-model="Units"
@change="changePlotType"
placeholder="请选择单位"
>
<el-option
v-for="item in UnitsData"
:label="item.label"
:value="item.value"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<el-form-item label="Window length"> <el-form-item label="Window length">
<el-input v-model="WindowLength" style="width: 80px" @blur="changePlotType"></el-input> <el-input
v-model="WindowLength"
style="width: 80px"
@blur="changePlotType"
></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
...@@ -211,29 +379,35 @@ ...@@ -211,29 +379,35 @@
<el-row> <el-row>
<el-col :span="3"> <el-col :span="3">
<el-form-item label="Reverse"> <el-form-item label="Reverse">
<el-checkbox v-model="ReverseEnbled" @change="changePlotType">启用Reverse</el-checkbox> <el-checkbox v-model="ReverseEnbled" @change="changePlotType"
>启用Reverse</el-checkbox
>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<el-form-item label="inverted"> <el-form-item label="inverted">
<el-checkbox v-model="inverted" @change="changePlotType">启用inverted</el-checkbox> <el-checkbox v-model="inverted" @change="changePlotType"
>启用inverted</el-checkbox
>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<el-form-item label="reversed"> <el-form-item label="reversed">
<el-checkbox v-model="reversed" @change="changePlotType">启用reversed</el-checkbox> <el-checkbox v-model="reversed" @change="changePlotType"
>启用reversed</el-checkbox
>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="showPropertiesDialog = false">取 消</el-button> <el-button @click="showPropertiesDialog = false">取 消</el-button>
<el-button type="primary" @click="showPropertiesDialog = false">确 定</el-button> <el-button type="primary" @click="showPropertiesDialog = false"
>确 定</el-button
>
</div> </div>
</el-dialog> </el-dialog>
<canvas ref="plot" id="canvas" /> <canvas ref="plot" id="canvas" />
<!-- <PropertiesDialog--> <!-- <PropertiesDialog-->
...@@ -247,25 +421,71 @@ ...@@ -247,25 +421,71 @@
</template> </template>
<script> <script>
import { SeismicPlot } from './App.js'; import { SeismicPlot } from "./App.js";
import PropertiesDialog from './ui/PropertiesDialog.vue'; import PropertiesDialog from "./ui/PropertiesDialog.vue";
import { getAjv, setNodeProps, getNodeProps } from './ui/DialogPropertyUtils'; import { getAjv, setNodeProps, getNodeProps } from "./ui/DialogPropertyUtils";
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
import { SegyReader } from '@int/geotoolkit/seismic/data/SegyReader'; import { SegyReader } from "@int/geotoolkit/seismic/data/SegyReader";
import { LocalFile } from '@int/geotoolkit/seismic/data/LocalFile'; import { LocalFile } from "@int/geotoolkit/seismic/data/LocalFile";
import { Reverse } from '@int/geotoolkit/seismic/pipeline/processor/Reverse'; import { Reverse } from "@int/geotoolkit/seismic/pipeline/processor/Reverse";
import { AGC } from '@int/geotoolkit/seismic/pipeline/processor/AGC'; import { AGC } from "@int/geotoolkit/seismic/pipeline/processor/AGC";
import { TaperFilterProcess } from '@int/geotoolkit/seismic/analysis/filters/TaperFilterProcess'; import { TaperFilterProcess } from "@int/geotoolkit/seismic/analysis/filters/TaperFilterProcess";
import { NormalizationType } from '@int/geotoolkit/seismic/pipeline/NormalizationType'; import { NormalizationType } from "@int/geotoolkit/seismic/pipeline/NormalizationType";
import { SeismicPipeline } from '@int/geotoolkit/seismic/pipeline/SeismicPipeline'; import { SeismicPipeline } from "@int/geotoolkit/seismic/pipeline/SeismicPipeline";
import { SeismicColors } from '@int/geotoolkit/seismic/util/SeismicColors'; import { SeismicColors } from "@int/geotoolkit/seismic/util/SeismicColors";
import {RgbaColor} from '@int/geotoolkit/util/RgbaColor';
let seismicPlot = null; let seismicPlot = null;
// 注：interpolate函数需保持原有实现（线性插值保证平滑）
function interpolate2 (target, startIndex, endIndex, startColor, endColor) {
// 添加参数验证
if (!target || !Array.isArray(target)) {
console.error('interpolate: target必须是数组');
return;
}
if (typeof startIndex !== 'number' || typeof endIndex !== 'number' ||
startIndex < 0 || endIndex >= target.length || startIndex > endIndex) {
console.error(`interpolate: 索引无效 - startIndex: ${startIndex}, endIndex: ${endIndex}, target.length: ${target.length}`);
return;
}
if (!startColor || !endColor ||
typeof startColor.R !== 'number' || typeof startColor.G !== 'number' || typeof startColor.B !== 'number' ||
typeof endColor.R !== 'number' || typeof endColor.G !== 'number' || typeof endColor.B !== 'number') {
console.error('interpolate: 颜色必须包含有效的RGB值');
return;
}
const offset = startIndex;
const stop = (endIndex - startIndex);
let r, g, b;
const stepR = (endColor.R - startColor.R) / (stop);
const stepG = (endColor.G - startColor.G) / (stop);
const stepB = (endColor.B - startColor.B) / (stop);
try {
for (let i = 0; i <= stop; ++i) {
r = startColor.R + i * stepR;
g = startColor.G + i * stepG;
b = startColor.B + i * stepB;
target[offset + i] = new RgbaColor(
Math.round(r < 255 ? r : 255),
Math.round(g < 255 ? g : 255),
Math.round(b < 255 ? b : 255),
255
);
}
} catch (error) {
console.error(`interpolate: 创建颜色时出错 - ${error.message}`);
}
}
export default { export default {
name: "index", name: "index",
components: { components: {
PropertiesDialog PropertiesDialog,
}, },
data() { data() {
return { return {
...@@ -277,9 +497,10 @@ export default { ...@@ -277,9 +497,10 @@ export default {
chartIsActive: false, chartIsActive: false,
tableIsActive: false, tableIsActive: false,
listNameColorMaps: [ listNameColorMaps: [
"ces",
"RedWhiteBlue",
"WhiteBlack", "WhiteBlack",
"RedWhiteBlack", "RedWhiteBlack",
"RedWhiteBlue",
"Saddleback", "Saddleback",
"Angles5color", "Angles5color",
"BlackRedYellowWhite", "BlackRedYellowWhite",
...@@ -293,9 +514,9 @@ export default { ...@@ -293,9 +514,9 @@ export default {
"RedWhiteBlueHot", "RedWhiteBlueHot",
"RedYellowBlue", "RedYellowBlue",
"SaddlebackHot", "SaddlebackHot",
"Spectrum" "Spectrum",
], ],
colorMapSelect: "", colorMapSelect: "WhiteBlack",
_colorMap: "", _colorMap: "",
pipeline: null, pipeline: null,
_seismicWidget: null, _seismicWidget: null,
...@@ -303,34 +524,37 @@ export default { ...@@ -303,34 +524,37 @@ export default {
NormalizationBl: 0.1, NormalizationBl: 0.1,
NormalizationTypeData: [ NormalizationTypeData: [
{ {
"label": "None", label: "None",
"value": 0, value: 0,
}, },
{ {
"label": "Maximum", label: "Maximum",
"value": 1, value: 1,
}, },
{ {
"label": "TraceMaximum", label: "TraceMaximum",
"value": 2, value: 2,
}, },
{ {
"label": "Average", label: "Average",
"value": 3, value: 3,
}, },
{ {
"label": "TraceAverage", label: "TraceAverage",
"value": 4, value: 4,
}, { },
"label": "RMS", {
"value": 5, label: "RMS",
}, { value: 5,
"label": "TraceRMS", },
"value": 6, {
}, { label: "TraceRMS",
"label": "Limits", value: 6,
"value": 7, },
} {
label: "Limits",
value: 7,
},
], ],
mycds: null, mycds: null,
msycs: null, msycs: null,
...@@ -340,33 +564,39 @@ export default { ...@@ -340,33 +564,39 @@ export default {
tracesEdge: null, tracesEdge: null,
InterpolationType: [ InterpolationType: [
{ {
"label": "Linear", label: "Linear",
"value": 1, value: 1,
}, { },
"label": "Quadratic", {
"value": 2, label: "Quadratic",
}, { value: 2,
"label": "Step", },
"value": 3, {
}, { label: "Step",
"label": "CenteredStep", value: 3,
"value": 4, },
}, { {
"label": "Cubic", label: "CenteredStep",
"value": 5, value: 4,
}, { },
"label": "Logarithmic", {
"value": 6, label: "Cubic",
value: 5,
},
{
label: "Logarithmic",
value: 6,
}, },
], ],
InterpolationEdge: [ InterpolationEdge: [
{ {
"label": "Zero", label: "Zero",
"value": 0, value: 0,
}, { },
"label": "Duplicate", {
"value": 1, label: "Duplicate",
} value: 1,
},
], ],
Wiggle: false, Wiggle: false,
Reversed: false, Reversed: false,
...@@ -382,11 +612,12 @@ export default { ...@@ -382,11 +612,12 @@ export default {
ClippingMode: null, ClippingMode: null,
ClippingModeData: [ ClippingModeData: [
{ {
"label": "Connected", label: "Connected",
"value": "Connected" value: "Connected",
}, { },
"label": "Disconnected", {
"value": "Disconnected" label: "Disconnected",
value: "Disconnected",
}, },
], ],
TaperFilterEnbled: false, TaperFilterEnbled: false,
...@@ -405,75 +636,124 @@ export default { ...@@ -405,75 +636,124 @@ export default {
Step: 1, Step: 1,
Units: "", Units: "",
WindowLength: 250, WindowLength: 250,
colorProvider: null,
UnitsData: [ UnitsData: [
{ {
"label": "Sample", label: "Sample",
"value": 0 value: 0,
}, { },
"label": "Time", {
"value": 1 label: "Time",
value: 1,
}, },
], ],
NoiseReductionData: [ NoiseReductionData: [
{ {
"label": "disable", label: "disable",
"value": "disable" value: "disable",
}, { },
"label": "enable", {
"value": "enable" label: "enable",
}, { value: "enable",
"label": "auto", },
"value": "auto" {
label: "auto",
value: "auto",
}, },
], ],
ReverseEnbled: false, ReverseEnbled: false,
inverted: false, inverted: false,
reversed: false, reversed: false,
// 文件上传相关 // 文件上传相关
uploadUrl: process.env.VUE_APP_BASE_API + '/ndy/dz/upload', uploadUrl: process.env.VUE_APP_BASE_API + "/ndy/dz/upload",
uploadHeaders: { uploadHeaders: {
Authorization: "Bearer " + getToken() Authorization: "Bearer " + getToken(),
}, },
fileList: [] fileList: [],
};
}
}, },
mounted() { mounted() {
// this.init() this.init()
}, },
methods: { methods: {
init() { init() {
//创建 //创建
seismicPlot = new SeismicPlot({ seismicPlot = new SeismicPlot({
'canvas': this.$refs.plot, canvas: this.$refs.plot,
'errorCallback': this.onCreateWidgetError, errorCallback: this.onCreateWidgetError,
'fileOpenedCallback': this.onFileOpen fileOpenedCallback: this.onFileOpen,
}); });
this.handleFileSelect()
// 不再自动加载默认文件，等待用户上传文件 // 不再自动加载默认文件，等待用户上传文件
}, },
// 添加注册颜色映射的方法
registerColorMaps() {
var colorProvider=SeismicColors.getDefault();
if (!colorProvider) {
console.error('colorProvider为空，无法注册颜色映射');
return;
}
try {
// 注册多段颜色渐变（仅修改内部逻辑，保持原有结构）
colorProvider.register('ces', (map) => {
if (!map) {
console.error('BlueWhiteRed映射对象为空');
return;
}
const colors = new Array(256);
try {
const colorStops = [
{ idx: 0, color: { R: 254, G: 70, B: 80 } },
{ idx: 127, color: { R: 255, G: 255, B: 255 } },
{ idx: 255, color: { R: 30, G: 45, B: 255 } }
];
// 逐段插值，匹配图片的颜色过渡
interpolate2(colors, colorStops[0].idx, colorStops[1].idx, colorStops[0].color, colorStops[1].color);
interpolate2(colors, colorStops[1].idx, colorStops[2].idx, colorStops[1].color, colorStops[2].color);
map.set(colors);
} catch (error) {
console.error('设置BlueWhiteRed颜色映射失败:', error);
}
});
console.log('颜色映射注册成功');
} catch (error) {
console.error('注册颜色映射失败:', error);
}
},
handleFileSelect() { handleFileSelect() {
let url = process.env.VUE_APP_BASE_API + "/ndy/dz/getSegyDataFile3?fileName=density.segy"; let url = process.env.VUE_APP_BASE_API + "/ndy/dz/getSegyDataFile?fileName=density.segy";
let fileName = 'density.segy'; let fileName = "density.segy";
return fetch(url, { return fetch(url, {
headers: { headers: {
Authorization: "Bearer " + getToken() Authorization: "Bearer " + getToken(),
} },
}).then((response) => { })
.then((response) => {
if (!response.ok) { if (!response.ok) {
throw new Error(`网络请求失败: ${response.status} ${response.statusText}`); throw new Error(
`网络请求失败: ${response.status} ${response.statusText}`
);
} }
return response.blob(); return response.blob();
})
}).then((blob) => { .then((blob) => {
if (!blob || blob.size === 0) { if (!blob || blob.size === 0) {
throw new Error('获取到的文件数据为空'); throw new Error("获取到的文件数据为空");
} }
let fileInput = new File([blob], fileName, { type: blob.type, lastModified: Date.now() }); let fileInput = new File([blob], fileName, {
type: blob.type,
lastModified: Date.now(),
});
// seismicPlot.createWidgetFromFile(filesObj) // seismicPlot.createWidgetFromFile(filesObj)
const file = new LocalFile(fileInput); const file = new LocalFile(fileInput);
this._fileSize = file.fileSize; this._fileSize = file.fileSize;
...@@ -485,17 +765,30 @@ export default { ...@@ -485,17 +765,30 @@ export default {
} }
// this.createRemotePipeline(reader) // this.createRemotePipeline(reader)
reader.readDataSetStatistics((reader, statistics) => { reader.readDataSetStatistics((reader, statistics) => {
if (reader.getModelLimits().getHeight() === 0 && this.warningCallback != null) { if (
reader.getModelLimits().getHeight() === 0 &&
this.warningCallback != null
) {
return this.$message.error("加载失败"); return this.$message.error("加载失败");
} }
// return this.createPipelineFromFile(file.getFileName(), reader, statistics); // return this.createPipelineFromFile(file.getFileName(), reader, statistics);
this.pipeline = new SeismicPipeline(file.getFileName(), reader, statistics) this.pipeline = new SeismicPipeline(
seismicPlot.createPipelineFromFile2(this.pipeline, file.getFileName(), reader, statistics); file.getFileName(),
console.log(this.pipeline) reader,
statistics
);
seismicPlot.createPipelineFromFile2(
this.pipeline,
file.getFileName(),
reader,
statistics
);
console.log(this.pipeline);
console.log(this.pipeline.getStatistics());
}); });
}); });
this.registerColorMaps()
}) });
}, },
onCreateWidgetError(errorMsg) { onCreateWidgetError(errorMsg) {
this.$message.error(errorMsg); this.$message.error(errorMsg);
...@@ -518,21 +811,26 @@ export default { ...@@ -518,21 +811,26 @@ export default {
this.showPropertiesDialog = false; this.showPropertiesDialog = false;
}, },
onFileOpen() { onFileOpen() {},
},
changeColor(val) { changeColor(val) {
var colorMap = SeismicColors.getDefault().createNamedColorMap(val, 256) var colorMap = SeismicColors.getDefault().createNamedColorMap(val, 256);
console.log(this.pipeline)
this.pipeline.setColorMap(colorMap); this.pipeline.setColorMap(colorMap);
this.pipeline.getColorMap().setAlpha(230)
console.log(this.pipeline.getColorMap())
console.log(this.pipeline.getColorMap().getColor(1841))
console.log(this.pipeline.getColorMap().getMinValue())
console.log(this.pipeline.getColorMap().getMaxValue())
if (seismicPlot._seismicWidget) { if (seismicPlot._seismicWidget) {
seismicPlot._seismicWidget.invalidate(); // 使组件重新渲染 seismicPlot._seismicWidget.invalidate(); // 使组件重新渲染
seismicPlot._seismicWidget.fitToBounds(); // 调整视图以适应数据 seismicPlot._seismicWidget.fitToBounds(); // 调整视图以适应数据
} else { } else {
console.error('Widget不可用，无法更新视图'); console.error("Widget不可用，无法更新视图");
} }
// 如果plots对象存在redraw方法，使用它来触发重绘 // 如果plots对象存在redraw方法，使用它来触发重绘
if (seismicPlot.plots && typeof seismicPlot.plots.redraw === 'function') { if (seismicPlot.plots && typeof seismicPlot.plots.redraw === "function") {
seismicPlot.plots.redraw(); seismicPlot.plots.redraw();
} }
}, },
...@@ -540,101 +838,100 @@ export default { ...@@ -540,101 +838,100 @@ export default {
changeNor(val) { changeNor(val) {
if (this.NormalizationType == 7) { if (this.NormalizationType == 7) {
this.pipeline.setOptions({ this.pipeline.setOptions({
'normalization': { normalization: {
'type': this.NormalizationType, type: this.NormalizationType,
'scale': this.NormalizationBl scale: this.NormalizationBl,
} },
}) });
} else { } else {
this.pipeline.setOptions({ this.pipeline.setOptions({
'normalization': { normalization: {
'type': this.NormalizationType, type: this.NormalizationType,
'scale': this.NormalizationBl scale: this.NormalizationBl,
} },
}) });
} }
}, },
changeMycds() { changeMycds() {
seismicPlot.openPipeline(this.pipeline, { seismicPlot.openPipeline(this.pipeline, {
'tracescale': this.mycds, tracescale: this.mycds,
'samplescale': this.msycs, samplescale: this.msycs,
'deviceunit': 'in', deviceunit: "in",
'sampleunit': 's', sampleunit: "s",
}); });
}, },
changeInt() { changeInt() {
console.log(this.pipeline.getOptions()) console.log(this.pipeline.getOptions());
this.pipeline.setOptions({ this.pipeline.setOptions({
'interpolation': { interpolation: {
'samples': { samples: {
"type": this.samplesType,//采样插值类型, type: this.samplesType, //采样插值类型,
"edge": this.samplesEdge,//采样插值边缘, edge: this.samplesEdge, //采样插值边缘,
}, },
'traces': { traces: {
"type": this.tracesType,//道插值类型 type: this.tracesType, //道插值类型
"edge": this.tracesEdge,//道插值边缘 edge: this.tracesEdge, //道插值边缘
}, },
} },
}) });
}, },
changePlotType() { changePlotType() {
this.pipeline.setOptions({ this.pipeline.setOptions({
'plot': { plot: {
'type': { type: {
"Wiggle": this.Wiggle, Wiggle: this.Wiggle,
"Reversed": this.Reversed, Reversed: this.Reversed,
"PositiveFill": this.PositiveFill, PositiveFill: this.PositiveFill,
"NegativeFill": this.NegativeFill, NegativeFill: this.NegativeFill,
"PositiveColorFill": this.PositiveColorFill, PositiveColorFill: this.PositiveColorFill,
"NegativeColorFill": this.NegativeColorFill, NegativeColorFill: this.NegativeColorFill,
"SimpleDensity": this.SimpleDensity, SimpleDensity: this.SimpleDensity,
"InterpolatedDensity": this.InterpolatedDensity, InterpolatedDensity: this.InterpolatedDensity,
}, },
"clippingFactor": this.ClippingFactor, clippingFactor: this.ClippingFactor,
"decimationSpacing": this.DecimationSpacing, decimationSpacing: this.DecimationSpacing,
"densityDecimation": this.densityDecimation, densityDecimation: this.densityDecimation,
}, },
"clippingmode": this.ClippingMode, clippingmode: this.ClippingMode,
"dataProcessors": { dataProcessors: {
"TaperFilter": { TaperFilter: {
"apply": this.TaperFilterEnbled, apply: this.TaperFilterEnbled,
"f1": Number(this.f1), f1: Number(this.f1),
"f2": Number(this.f2), f2: Number(this.f2),
"f3": Number(this.f3), f3: Number(this.f3),
"f4": Number(this.f4), f4: Number(this.f4),
"sampleRate": Number(this.sampleRate), sampleRate: Number(this.sampleRate),
"passFlag": this.passFlag, passFlag: this.passFlag,
}, },
"AGC": { AGC: {
"agcLength": this.AGCLength, agcLength: this.AGCLength,
"apply": this.AGCEnbled, apply: this.AGCEnbled,
"desiredAverage": this.DesiredAverage, desiredAverage: this.DesiredAverage,
"noiseReduction": this.NoiseReduction, noiseReduction: this.NoiseReduction,
"noiseReductionPercentage": this.NoiseReductionPercentage, noiseReductionPercentage: this.NoiseReductionPercentage,
"startSample": this.StartSample, startSample: this.StartSample,
"step": this.Step, step: this.Step,
"units": this.Units, units: this.Units,
"windowLength": this.WindowLength, windowLength: this.WindowLength,
}, },
"Reverse": { Reverse: {
"apply": this.ReverseEnbled, apply: this.ReverseEnbled,
"inverted": this.inverted, inverted: this.inverted,
"reversed": this.reversed, reversed: this.reversed,
} },
} },
}) });
console.log(this.pipeline.getOptions()) console.log(this.pipeline.getOptions());
}, },
// 文件上传相关方法 // 文件上传相关方法
triggerFileUpload() { triggerFileUpload() {
// 创建隐藏的文件输入元素 // 创建隐藏的文件输入元素
const input = document.createElement('input'); const input = document.createElement("input");
input.type = 'file'; input.type = "file";
input.accept = '.segy,.sgy'; input.accept = ".segy,.sgy";
input.style.display = 'none'; input.style.display = "none";
input.onchange = (event) => { input.onchange = (event) => {
const file = event.target.files[0]; const file = event.target.files[0];
...@@ -650,71 +947,84 @@ export default { ...@@ -650,71 +947,84 @@ export default {
handleFileUpload(file) { handleFileUpload(file) {
// 检查文件类型 // 检查文件类型
const allowedTypes = ['.segy', '.sgy']; const allowedTypes = [".segy", ".sgy"];
const fileName = file.name.toLowerCase(); const fileName = file.name.toLowerCase();
const isValidType = allowedTypes.some(type => fileName.endsWith(type)); const isValidType = allowedTypes.some((type) => fileName.endsWith(type));
if (!isValidType) { if (!isValidType) {
this.$message.error('只能上传segy、sgy文件'); this.$message.error("只能上传segy、sgy文件");
return; return;
} }
// 检查文件大小 (例如限制为100MB) // 检查文件大小 (例如限制为100MB)
const maxSize = 100 * 1024 * 1024; // 100MB const maxSize = 100 * 1024 * 1024; // 100MB
if (file.size > maxSize) { if (file.size > maxSize) {
this.$message.error('文件大小不能超过100MB'); this.$message.error("文件大小不能超过100MB");
return; return;
} }
// 创建FormData // 创建FormData
const formData = new FormData(); const formData = new FormData();
formData.append('file', file); formData.append("file", file);
// 上传文件 // 上传文件
this.$message.info('正在上传文件...'); this.$message.info("正在上传文件...");
fetch(this.uploadUrl, { fetch(this.uploadUrl, {
method: 'POST', method: "POST",
headers: this.uploadHeaders, headers: this.uploadHeaders,
body: formData body: formData,
}) })
.then(response => { .then((response) => {
if (!response.ok) { if (!response.ok) {
throw new Error(`上传失败: ${response.status} ${response.statusText}`); throw new Error(
`上传失败: ${response.status} ${response.statusText}`
);
} }
return response.json(); return response.json();
}) })
.then(data => { .then((data) => {
this.$message.success('文件上传成功'); this.$message.success("文件上传成功");
console.log('上传成功:', data); console.log("上传成功:", data);
// 这里可以处理上传成功后的逻辑，比如重新加载数据 // 这里可以处理上传成功后的逻辑，比如重新加载数据
this.loadNewFile(data.fileName); this.loadNewFile(data.fileName);
this.init() this.registerColorMaps()
this.init();
}) })
.catch(error => { .catch((error) => {
console.error('上传失败:', error); console.error("上传失败:", error);
this.$message.error('文件上传失败: ' + error.message); this.$message.error("文件上传失败: " + error.message);
}); });
}, },
loadNewFile(fileName) { loadNewFile(fileName) {
// 加载新文件的逻辑 // 加载新文件的逻辑
let url = process.env.VUE_APP_BASE_API + "/ndy/dz/getSegyDataFile3?fileName=" + fileName; let url =
process.env.VUE_APP_BASE_API +
"/ndy/dz/getSegyDataFile3?fileName=" +
fileName;
return fetch(url, { return fetch(url, {
headers: { headers: {
Authorization: "Bearer " + getToken() Authorization: "Bearer " + getToken(),
} },
}).then((response) => { })
.then((response) => {
if (!response.ok) { if (!response.ok) {
throw new Error(`网络请求失败: ${response.status} ${response.statusText}`); throw new Error(
`网络请求失败: ${response.status} ${response.statusText}`
);
} }
return response.blob(); return response.blob();
}).then((blob) => { })
.then((blob) => {
if (!blob || blob.size === 0) { if (!blob || blob.size === 0) {
throw new Error('获取到的文件数据为空'); throw new Error("获取到的文件数据为空");
} }
let fileInput = new File([blob], fileName, { type: blob.type, lastModified: Date.now() }); let fileInput = new File([blob], fileName, {
type: blob.type,
lastModified: Date.now(),
});
const file = new LocalFile(fileInput); const file = new LocalFile(fileInput);
this._fileSize = file.fileSize; this._fileSize = file.fileSize;
const segyReader = new SegyReader(file); const segyReader = new SegyReader(file);
...@@ -724,22 +1034,30 @@ export default { ...@@ -724,22 +1034,30 @@ export default {
return; return;
} }
reader.readDataSetStatistics((reader, statistics) => { reader.readDataSetStatistics((reader, statistics) => {
if (reader.getModelLimits().getHeight() === 0 && this.warningCallback != null) { if (
reader.getModelLimits().getHeight() === 0 &&
this.warningCallback != null
) {
return this.$message.error("加载失败"); return this.$message.error("加载失败");
} }
this.pipeline = new SeismicPipeline(fileName, reader, statistics) this.pipeline = new SeismicPipeline(fileName, reader, statistics);
seismicPlot.createPipelineFromFile2(this.pipeline, fileName, reader, statistics); seismicPlot.createPipelineFromFile2(
console.log(this.pipeline) this.pipeline,
fileName,
reader,
statistics
);
console.log(this.pipeline);
}); });
}); });
}).catch(error => { })
console.error('加载文件失败:', error); .catch((error) => {
this.$message.error('加载文件失败: ' + error.message); console.error("加载文件失败:", error);
this.$message.error("加载文件失败: " + error.message);
}); });
} },
},
} };
}
</script> </script>
<style scoped> <style scoped>
......
src/views/test/textYt.vue
...@@ -319,6 +319,52 @@ const interpolate = function (target, startIndex, endIndex, startColor, endColor ...@@ -319,6 +319,52 @@ const interpolate = function (target, startIndex, endIndex, startColor, endColor
} }
}; };
// 注：interpolate函数需保持原有实现（线性插值保证平滑）
function interpolate2(target, startIndex, endIndex, startColor, endColor) {
// 添加参数验证
if (!target || !Array.isArray(target)) {
console.error('interpolate: target必须是数组');
return;
}
if (typeof startIndex !== 'number' || typeof endIndex !== 'number' ||
startIndex < 0 || endIndex >= target.length || startIndex > endIndex) {
console.error(`interpolate: 索引无效 - startIndex: ${startIndex}, endIndex: ${endIndex}, target.length: ${target.length}`);
return;
}
if (!startColor || !endColor ||
typeof startColor.R !== 'number' || typeof startColor.G !== 'number' || typeof startColor.B !== 'number' ||
typeof endColor.R !== 'number' || typeof endColor.G !== 'number' || typeof endColor.B !== 'number') {
console.error('interpolate: 颜色必须包含有效的RGB值');
return;
}
const offset = startIndex;
const stop = (endIndex - startIndex);
let r, g, b;
const stepR = (endColor.R - startColor.R) / (stop);
const stepG = (endColor.G - startColor.G) / (stop);
const stepB = (endColor.B - startColor.B) / (stop);
try {
for (let i = 0; i <= stop; ++i) {
r = startColor.R + i * stepR;
g = startColor.G + i * stepG;
b = startColor.B + i * stepB;
target[offset + i] = new RgbaColor(
Math.round(r < 255 ? r : 255),
Math.round(g < 255 ? g : 255),
Math.round(b < 255 ? b : 255),
255
);
}
} catch (error) {
console.error(`interpolate: 创建颜色时出错 - ${error.message}`);
}
}
export default { export default {
name: "seismic", name: "seismic",
components: { components: {
...@@ -2000,6 +2046,74 @@ export default { ...@@ -2000,6 +2046,74 @@ export default {
}); });
// 注册多段颜色渐变 // 注册多段颜色渐变
// colorProvider.register('BlueWhiteRed', (map) => {
// if (!map) {
// console.error('BlueWhiteRed映射对象为空');
// return;
// }
//
// const colors = new Array(256);
//
// try {
// // 第一段：253, 27, 21 到 255, 205, 203 (0-63)
// interpolate(colors, 0, 63, {
// A: 255,
// R: 254,
// G: 13,
// B: 6
// }, {
// A: 255,
// R: 255,
// G: 205,
// B: 203
// });
//
// // 第二段：255, 205, 203 到 255, 251, 251 (64-127)
// interpolate(colors, 64, 127, {
// A: 255,
// R: 255,
// G: 205,
// B: 203
// }, {
// A: 255,
// R: 255,
// G: 251,
// B: 251
// });
//
// // 第三段：255, 251, 251 到 206, 207, 255 (128-191)
// interpolate(colors, 128, 191, {
// A: 255,
// R: 255,
// G: 251,
// B: 251
// }, {
// A: 255,
// R: 206,
// G: 207,
// B: 255
// });
//
// // 第四段：206, 207, 255 到 30, 38, 253 (192-255)
// interpolate(colors, 192, 255, {
// A: 255,
// R: 206,
// G: 207,
// B: 255
// }, {
// A: 255,
// R: 9,
// G: 25,
// B: 254
// });
//
// map.set(colors);
// } catch (error) {
// console.error('设置BlueWhiteRed颜色映射失败:', error);
// }
// });
// 注册多段颜色渐变（仅修改内部逻辑，保持原有结构）
colorProvider.register('BlueWhiteRed', (map) => { colorProvider.register('BlueWhiteRed', (map) => {
if (!map) { if (!map) {
console.error('BlueWhiteRed映射对象为空'); console.error('BlueWhiteRed映射对象为空');
...@@ -2009,65 +2123,23 @@ export default { ...@@ -2009,65 +2123,23 @@ export default {
const colors = new Array(256); const colors = new Array(256);
try { try {
// 第一段：253, 27, 21 到 255, 205, 203 (0-63) // 定义核心颜色节点
interpolate(colors, 0, 63, { const redColor = { A: 255, R: 254, G: 13, B: 6 }; // 起始红色
A: 255, const whiteColor = { A: 255, R: 255, G: 255, B: 255 }; // 中间纯白
R: 254, const blueColor = { A: 255, R: 9, G: 25, B: 254 }; // 最终蓝色
G: 13,
B: 6 // 按100个颜色段的节奏拆分0-255区间，保证渐变平滑
}, { // 第一段：红→白（0-127，约50个核心渐变段）
A: 255, interpolate2(colors, 0, 127, redColor, whiteColor);
R: 255, // 第二段：白→蓝（128-255，约50个核心渐变段）
G: 205, interpolate2(colors, 128, 255, whiteColor, blueColor);
B: 203 console.log(colors)
});
// 第二段：255, 205, 203 到 255, 251, 251 (64-127)
interpolate(colors, 64, 127, {
A: 255,
R: 255,
G: 205,
B: 203
}, {
A: 255,
R: 255,
G: 251,
B: 251
});
// 第三段：255, 251, 251 到 206, 207, 255 (128-191)
interpolate(colors, 128, 191, {
A: 255,
R: 255,
G: 251,
B: 251
}, {
A: 255,
R: 206,
G: 207,
B: 255
});
// 第四段：206, 207, 255 到 30, 38, 253 (192-255)
interpolate(colors, 192, 255, {
A: 255,
R: 206,
G: 207,
B: 255
}, {
A: 255,
R: 9,
G: 25,
B: 254
});
map.set(colors); map.set(colors);
} catch (error) { } catch (error) {
console.error('设置BlueWhiteRed颜色映射失败:', error); console.error('设置BlueWhiteRed颜色映射失败:', error);
} }
}); });
console.log('颜色映射注册成功'); console.log('颜色映射注册成功');
} catch (error) { } catch (error) {
console.error('注册颜色映射失败:', error); console.error('注册颜色映射失败:', error);
......
src/views/ysqqXmxx/ysgc/index2.vue
...@@ -575,6 +575,51 @@ const interpolate = function (target, startIndex, endIndex, startColor, endColor ...@@ -575,6 +575,51 @@ const interpolate = function (target, startIndex, endIndex, startColor, endColor
console.error(`interpolate: 创建颜色时出错 - ${error.message}`); console.error(`interpolate: 创建颜色时出错 - ${error.message}`);
} }
}; };
function interpolate2 (target, startIndex, endIndex, startColor, endColor) {
// 添加参数验证
if (!target || !Array.isArray(target)) {
console.error('interpolate: target必须是数组');
return;
}
if (typeof startIndex !== 'number' || typeof endIndex !== 'number' ||
startIndex < 0 || endIndex >= target.length || startIndex > endIndex) {
console.error(`interpolate: 索引无效 - startIndex: ${startIndex}, endIndex: ${endIndex}, target.length: ${target.length}`);
return;
}
if (!startColor || !endColor ||
typeof startColor.R !== 'number' || typeof startColor.G !== 'number' || typeof startColor.B !== 'number' ||
typeof endColor.R !== 'number' || typeof endColor.G !== 'number' || typeof endColor.B !== 'number') {
console.error('interpolate: 颜色必须包含有效的RGB值');
return;
}
const offset = startIndex;
const stop = (endIndex - startIndex);
let r, g, b;
const stepR = (endColor.R - startColor.R) / (stop);
const stepG = (endColor.G - startColor.G) / (stop);
const stepB = (endColor.B - startColor.B) / (stop);
try {
for (let i = 0; i <= stop; ++i) {
r = startColor.R + i * stepR;
g = startColor.G + i * stepG;
b = startColor.B + i * stepB;
target[offset + i] = new RgbaColor(
Math.round(r < 255 ? r : 255),
Math.round(g < 255 ? g : 255),
Math.round(b < 255 ? b : 255),
255
);
}
} catch (error) {
console.error(`interpolate: 创建颜色时出错 - ${error.message}`);
}
}
export default { export default {
name: "YsgcIndex2", name: "YsgcIndex2",
components: { components: {
...@@ -7831,8 +7876,8 @@ export default { ...@@ -7831,8 +7876,8 @@ export default {
} }
}); });
// 注册多段颜色渐变 // 注册多段颜色渐变（仅修改内部逻辑，保持原有结构）
colorProvider.register('BlueWhiteRed', (map) => { colorProvider.register('RedWhiteBlue', (map) => {
if (!map) { if (!map) {
console.error('BlueWhiteRed映射对象为空'); console.error('BlueWhiteRed映射对象为空');
return; return;
...@@ -7841,58 +7886,15 @@ export default { ...@@ -7841,58 +7886,15 @@ export default {
const colors = new Array(256); const colors = new Array(256);
try { try {
// 第一段：253, 27, 21 到 255, 205, 203 (0-63) const colorStops = [
interpolate(colors, 0, 63, { { idx: 0, color: { R: 254, G: 70, B: 80 } },
A: 255, { idx: 127, color: { R: 255, G: 255, B: 255 } },
R: 254, { idx: 255, color: { R: 30, G: 45, B: 255 } }
G: 13, ];
B: 6
}, {
A: 255,
R: 255,
G: 205,
B: 203
});
// 第二段：255, 205, 203 到 255, 251, 251 (64-127)
interpolate(colors, 64, 127, {
A: 255,
R: 255,
G: 205,
B: 203
}, {
A: 255,
R: 255,
G: 251,
B: 251
});
// 第三段：255, 251, 251 到 206, 207, 255 (128-191)
interpolate(colors, 128, 191, {
A: 255,
R: 255,
G: 251,
B: 251
}, {
A: 255,
R: 206,
G: 207,
B: 255
});
// 第四段：206, 207, 255 到 30, 38, 253 (192-255)
interpolate(colors, 192, 255, {
A: 255,
R: 206,
G: 207,
B: 255
}, {
A: 255,
R: 9,
G: 25,
B: 254
});
// 逐段插值，匹配图片的颜色过渡
interpolate2(colors, colorStops[0].idx, colorStops[1].idx, colorStops[0].color, colorStops[1].color);
interpolate2(colors, colorStops[1].idx, colorStops[2].idx, colorStops[1].color, colorStops[2].color);
map.set(colors); map.set(colors);
} catch (error) { } catch (error) {
console.error('设置BlueWhiteRed颜色映射失败:', error); console.error('设置BlueWhiteRed颜色映射失败:', error);
...@@ -8875,7 +8877,7 @@ export default { ...@@ -8875,7 +8877,7 @@ export default {
changeColor(val) { changeColor(val) {
var colorMap = SeismicColors.getDefault().createNamedColorMap(val, 256) var colorMap = SeismicColors.getDefault().createNamedColorMap(val, 256)
this.pipeline.setColorMap(colorMap); this.pipeline.setColorMap(colorMap);
this.pipeline.getColorMap().setAlpha(230)
console.log(this.plots) console.log(this.plots)
if (this._seismicWidget) { if (this._seismicWidget) {
this._seismicWidget.invalidate(); // 使组件重新渲染 this._seismicWidget.invalidate(); // 使组件重新渲染
......
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