soilgd12/src/views/menu/SoilAcidReductionIterativeEvolution.vue

<template>
  <div id="app">
    <ModelIterationVisualization
      :showLineChart="showLineChart"
      :showInitScatterChart="showInitScatterChart"
      :showMidScatterChart="showMidScatterChart"
      :showFinalScatterChart="showFinalScatterChart"
      :lineChartPathParam="lineChartPathParam"
      :initScatterModelId="initScatterModelId"
      :midScatterModelId="midScatterModelId"
      :finalScatterModelId="finalScatterModelId"
    />
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import ModelIterationVisualization from './ModelIterationVisualization.vue';

const showLineChart = ref(true);
const showInitScatterChart = ref(true);
const showMidScatterChart = ref(true);
const showFinalScatterChart = ref(true);

// 直接在代码里定义好参数
const lineChartPathParam = ref('reduce'); 
const initScatterModelId = ref(24);
const midScatterModelId = ref(25);
const finalScatterModelId = ref(26);
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>