update:中车演示假界面，不会影响其他

src/components/flow/flowNodeParamTable.vue

@@ -24,6 +24,18 @@
             @click="flowClickFun('justStartLocalAppFun')"
             >启动</el-button
           >
+          <el-button
+            type="primary"
+            v-else-if="flowNodeParamData.nodeTypeValue === '3'"
+            @click="flowClickFun('startOtherNodeFun')"
+            >计算</el-button
+          >
+          <el-button
+            type="primary"
+            v-else-if="flowNodeParamData.nodeTypeValue === '5'"
+            @click="flowClickFun('startOtherNodeFun')"
+            >保存</el-button
+          >
           <el-button type="primary" v-else @click="flowClickFun('startOtherNodeFun')"
             >启动</el-button
           >
@@ -35,7 +47,22 @@
             @click="flowClickFun('continueStartRunJobFun')"
             >完成</el-button
           >
-          <el-button @click="showLogFun">日志</el-button>
+          <el-button v-if="flowNodeParamData.nodeTypeValue === '1'" @click="showLogFun"
+            >日志</el-button
+          >
+          <el-dropdown>
+            <el-button type="primary" class="ml10">
+              参数操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>参数引用</el-dropdown-item>
+                <el-dropdown-item>参数入库</el-dropdown-item>
+                <el-dropdown-item>参数导入</el-dropdown-item>
+                <el-dropdown-item>参数导出</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
           <!-- <el-button type="primary" @click="referenceParamFun">引用参数</el-button>
           <el-button type="primary" @click="paramToLibFun">参数入库</el-button> -->
           <!-- <el-button type="primary" @click="saveNodeParamFun">保存参数</el-button> -->
@@ -177,8 +204,9 @@
           <span v-if="row.required" class="required-icon">*</span>
           <span v-else class="required-icon">&nbsp;</span>
           <span v-if="row.tagType === WIDGET_TYPE.VIEW && row.tagIcon === 'row'">
-            {{ row.componentName }}
+            {{ row?.children[0]?.defaultValue || '配置' }}
           </span>
+
           <span v-else>{{ row.label }}</span>
         </template>
       </BaseTable>
@@ -629,6 +657,10 @@ watch(
       nextTick(() => {
         baseTableRef.value.setDataFun(tableData.value);
       });
+
+      setTimeout(() => {
+        baseTableRef.value.tableRef.setAllTreeExpand(true);
+      }, 200);
     }
   },
   {
@@ -692,6 +724,14 @@ watch(
   margin-right: 10px;
 }
 
+.ml10 {
+  margin-left: 10px;
+}
+
+.w70p{
+  width: 60%;
+}
+
 .input-grid {
   display: flex;
   align-items: center;

src/views/task/execution/components/runDetailPage/demoFile/param.ts

@@ -0,0 +1,105 @@
+// 轨道参数
+export const OrbitalParameters = [
+  {
+    label: '基础配置一',
+    name: '',
+    value: '',
+    type: 'text',
+    children: [
+      {
+        label: '轨道结构形式',
+        name: '',
+        value: '',
+        type: 'select',
+        selectOption: [
+          {
+            name: '道床版面支撑',
+            value: 1,
+          },
+        ],
+      },
+      {
+        label: '轨道板纵连形式',
+        name: '',
+        value: '',
+        type: 'select',
+        selectOption: [
+          {
+            name: '纵连',
+            value: 1,
+          },
+        ],
+      },
+      {
+        label: '底座板纵连形式',
+        name: '',
+        value: '',
+        type: 'select',
+        selectOption: [
+          {
+            name: '纵连',
+            value: 1,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: '混泥土板阻尼参数一',
+    name: '',
+    value: '',
+    type: 'text',
+    children: [
+      {
+        label: '混泥土板阻尼参数一',
+        name: '',
+        value: '',
+        type: 'text',
+      },
+    ],
+  },
+  {
+    label: '轨道结构参数一',
+    name: '',
+    value: '',
+    type: 'text',
+    children: [],
+  },
+];
+
+// 列车参数
+export const TrainParameters = [];
+
+// 基础结构参数
+export const FoundationStructureParameters = [];
+
+// 隧道外围土体参数
+export const TheTunnelPeripherySoilParameters = [];
+
+export const testOption = {
+  xAxis: {
+    type: 'category',
+    data: ['0', '1', '2', '3', '4', '5'],
+    axisTick: {
+      show: true, // 是否显示刻度线
+      inside: true, // 刻度线朝内(true)或朝外(false)
+      alignWithLabel: true, // 刻度线与标签对齐
+      interval: 0, // 显示间隔(0表示全部显示)
+    },
+  },
+  yAxis: {
+    type: 'value',
+    min: 0, // 最小值
+    max: 5, // 最大值
+    axisTick: {
+      show: true, // 是否显示刻度线
+      inside: true, // 刻度线朝内(true)或朝外(false)
+      alignWithLabel: true, // 刻度线与标签对齐
+      interval: 0, // 显示间隔(0表示全部显示)
+    },
+    axisLine: {
+      show: true,
+    },
+  },
+  series: [],
+};

src/views/task/execution/components/runDetailPage/index.vue

@@ -2,7 +2,7 @@
   <div class="run-detail-page">
     <DragSplit
       dragType="top-bottom"
-      topContentHeight="270"
+      topContentHeight="400"
       :minTopHeight="240"
       :minBottomHeight="200"
       :showToggleBtn="false"
@@ -137,6 +137,23 @@
                       <el-tab-pane label="输入数据" name="input"></el-tab-pane>
                       <!-- <el-tab-pane label="仿真参数" name="param"></el-tab-pane> -->
                       <el-tab-pane label="输出数据" name="output"></el-tab-pane>
+
+                      <!-- TODO：中车演示使用零时假页面，不展示在其他系统内 -->
+                      <el-tab-pane
+                        v-if="flowNodeData.nodeName === '动力学计算'"
+                        label="可视化结果"
+                        name="result"
+                      ></el-tab-pane>
+
+                      <el-tab-pane
+                        v-if="
+                          ['车辆平稳性分析', '轮轨力分析', '震动信号分析'].includes(
+                            flowNodeData.nodeName
+                          )
+                        "
+                        label="可视化结果"
+                        name="analysis"
+                      ></el-tab-pane>
                     </el-tabs>
                   </div>
                   <div class="operate-box"></div>
@@ -171,6 +188,22 @@
                       :run-info="runInfo"
                       :online-file-param="onlineFileParam"
                     ></runDataPage>
+                    <analysisResult v-if="nodeActiveName === 'result'"></analysisResult>
+                    <vehicleStabilityAnalysis_Demo
+                      v-if="
+                        nodeActiveName === 'analysis' && flowNodeData.nodeName === '车辆平稳性分析'
+                      "
+                    ></vehicleStabilityAnalysis_Demo>
+
+                    <rollingWheelForceAnalysis_Demo
+                      v-if="nodeActiveName === 'analysis' && flowNodeData.nodeName === '轮轨力分析'"
+                    ></rollingWheelForceAnalysis_Demo>
+
+                    <vibrationSignalAnalysis_Demo
+                      v-if="
+                        nodeActiveName === 'analysis' && flowNodeData.nodeName === '震动信号分析'
+                      "
+                    ></vibrationSignalAnalysis_Demo>
                     <div class="bottom-info-content-tab" v-show="nodeActiveName === 'param'">
                       <div class="node-img">
                         <img :src="flowNodeParamData.iconUrl" alt="" />
@@ -395,6 +428,10 @@ import dayjs from 'dayjs';
 import { base64ToStrFun, isJSONFun } from '@/utils/file';
 import simulationParam from './runPagecomponent/simulationParam.vue';
 import dataAchieve from './runPagecomponent/dataAchieve.vue';
+import analysisResult from './runPagecomponent/analysisResult.vue';
+import vehicleStabilityAnalysis_Demo from './runPagecomponent/vehicleStabilityAnalysis_Demo.vue';
+import rollingWheelForceAnalysis_Demo from './runPagecomponent/rollingWheelForceAnalysis_Demo.vue';
+import vibrationSignalAnalysis_Demo from './runPagecomponent/vibrationSignalAnalysis_Demo.vue';
 
 const props = defineProps({
   runInfo: {
@@ -1323,10 +1360,10 @@ const timer = ref<any>(null);
 onMounted(async () => {
   await getDictionaryDataFun();
   emitter.on('UPLOAD_FINISHED', uploadFinishedFun);
-  // 1分钟一次流程信息
-  timer.value = setInterval(() => {
-    refreshFun();
-  }, 60 * 1000);
+  // // 1分钟一次流程信息
+  // timer.value = setInterval(() => {
+  //   refreshFun();
+  // }, 60 * 1000);
 });
 
 onBeforeUnmount(() => {

src/views/task/execution/components/runDetailPage/runPagecomponent/analysisResult.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="page-content">
+    <div class="page-operate">
+      <el-button type="primary">刷新</el-button>
+    </div>
+    <div class="chart-content">
+      <div class="chart-item" v-for="item in chartData" :key="item.id">
+        <commonFilterChart
+          :title="item.title"
+          :charts-id="'chart-item' + item.id"
+          :bar-type="'lineChart'"
+          :option="item.option"
+          :nodata="nodata"
+          @update="initChartInfo(item)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import commonFilterChart from '@/components/common/echartCard/commonFilterChart.vue';
+import { testOption } from '../demoFile/param';
+
+const nodata = ref(false);
+const options = ref({
+  xAxis: {
+    type: 'category',
+    data: ['0', '1', '2', '3', '4', '5'],
+    axisTick: {
+      show: true, // 是否显示刻度线
+      inside: true, // 刻度线朝内(true)或朝外(false)
+      alignWithLabel: true, // 刻度线与标签对齐
+      interval: 0, // 显示间隔(0表示全部显示)
+    },
+  },
+  yAxis: {
+    type: 'value',
+    min: 0, // 最小值
+    max: 5, // 最大值
+    axisTick: {
+      show: true, // 是否显示刻度线
+      inside: true, // 刻度线朝内(true)或朝外(false)
+      alignWithLabel: true, // 刻度线与标签对齐
+      interval: 0, // 显示间隔(0表示全部显示)
+    },
+    axisLine: {
+      show: true,
+    },
+  },
+  series: [],
+});
+
+const chartData = ref<any>([
+  {
+    title: '右侧轮轨垂向力(kN)',
+    option: options.value,
+    id: '1',
+  },
+  {
+    title: '左则轮下钢轨垂向位移(mm)',
+    option: options.value,
+    id: '2',
+  },
+  {
+    title: '基础结构轮下垂向位移',
+    option: options.value,
+    id: '3',
+  },
+  {
+    title: '左侧轮轨垂向力(kN)',
+    option: options.value,
+    id: '4',
+  },
+  {
+    title: '左刨轮下钢轨横向位移(mm)',
+    option: options.value,
+    id: '5',
+  },
+  {
+    title: '基础出结构轮下垂向加速度',
+    option: options.value,
+    id: '6',
+  },
+  {
+    title: '左侧轮轨横向力(kN)',
+    option: options.value,
+    id: '7',
+  },
+  {
+    title: '右钢轨轮下垂向位移',
+    option: options.value,
+    id: '8',
+  },
+  {
+    title: '右钢轨轮下垂向加速度',
+    option: options.value,
+    id: '9',
+  },
+  {
+    title: '右钢轨轮下横向加速度',
+    option: options.value,
+    id: '10',
+  },
+  {
+    title: '右钢轨定点横向位移响应',
+    option: options.value,
+    id: '11',
+  },
+  {
+    title: '右钢轨定点横向加速度响应',
+    option: options.value,
+    id: '12',
+  },
+]);
+
+const initChartInfo = (data: any) => {
+  data.option = testOption;
+};
+</script>
+
+<style lang="scss" scoped>
+.page-content {
+  width: 100%;
+  height: 100%;
+
+  .page-operate {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .chart-content {
+    width: 100%;
+    height: calc(100% - 50px);
+    display: flex;
+    flex-wrap: wrap;
+    overflow: auto;
+
+    .chart-item {
+      width: calc((100% / 3) - 5px);
+      height: 70%;
+      margin-right: 5px;
+      margin-bottom: 5px;
+      border-radius: 5px;
+      overflow: hidden;
+      border: 1px solid #dcebf7;
+    }
+  }
+}
+</style>

src/views/task/execution/components/runDetailPage/runPagecomponent/rollingWheelForceAnalysis_Demo.vue

@@ -0,0 +1,113 @@
+<!-- 轮轨力分析 -->
+<template>
+  <div class="chart-page">
+    <div class="chart-item h50">
+      <commonFilterChart
+        title="左轨垂向力"
+        :charts-id="'chart-item1'"
+        :bar-type="'lineChart'"
+        :option="chartOneOption"
+        :nodata="nodata"
+        @update="initChartOneInfo"
+      />
+    </div>
+    <div class="chart-item h50">
+      <commonFilterChart
+        title="右轨垂向力"
+        :charts-id="'chart-item2'"
+        :bar-type="'lineChart'"
+        :option="chartOneOption"
+        :nodata="nodata"
+        @update="initChartOneInfo"
+      />
+    </div>
+    <div class="chart-item h50">
+      <commonFilterChart
+        title="左轨横向力"
+        :charts-id="'chart-item3'"
+        :bar-type="'lineChart'"
+        :option="chartOneOption"
+        :nodata="nodata"
+        @update="initChartOneInfo"
+      />
+    </div>
+    <div class="chart-item h50">
+      <commonFilterChart
+        title="右轨横向力"
+        :charts-id="'chart-item4'"
+        :bar-type="'lineChart'"
+        :option="chartOneOption"
+        :nodata="nodata"
+        @update="initChartOneInfo"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import commonFilterChart from '@/components/common/echartCard/commonFilterChart.vue';
+import { testOption } from '../demoFile/param';
+
+const nodata = ref(false);
+const chartOneOption = ref<any>({});
+const initChartOneInfo = () => {
+  chartOneOption.value = testOption;
+};
+
+const chartTwoFormData = reactive({
+  start: '0',
+  end: '0',
+  highVal: '',
+  moreHighVal: '',
+});
+const chartTwoOption = ref<any>({});
+const initChartTwoInfo = () => {
+  chartTwoOption.value = testOption;
+};
+
+const chartThreeFormData = reactive({
+  isFilter: '不滤波',
+  highVal: '',
+  moreHighVal: '',
+  type: '垂向平稳性',
+  performance: '',
+  system: '客车评价体系',
+  level: 'L1',
+});
+const chartThreeOption = ref<any>({});
+const initChartThreeInfo = () => {
+  chartThreeOption.value = testOption;
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-page {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+
+  .chart-item {
+    width: 100%;
+    border: 1px solid #dcebf7;
+    margin-bottom: 5px;
+    border-radius: 5px;
+    overflow: hidden;
+  }
+
+  .h50 {
+    height: 50%;
+  }
+  .h60 {
+    height: 60%;
+  }
+
+  .input-style {
+    width: calc(100% - 20px);
+  }
+}
+
+:deep(.el-form-item__content) {
+  flex-wrap: nowrap;
+}
+</style>

src/views/task/execution/components/runDetailPage/runPagecomponent/vehicleStabilityAnalysis_Demo.vue

@@ -0,0 +1,159 @@
+<!-- 车辆平稳性分析 -->
+<template>
+  <div class="chart-page">
+    <div class="chart-item h50">
+      <commonFilterChart
+        title="加速度时域谱"
+        :charts-id="'chart-item1'"
+        :bar-type="'lineChart'"
+        :option="chartOneOption"
+        :nodata="nodata"
+        @update="initChartOneInfo"
+      />
+    </div>
+    <div class="chart-item h50">
+      <commonFilterChart
+        title="局部加速度谱"
+        :charts-id="'chart-item2'"
+        :bar-type="'lineChart'"
+        :option="chartTwoOption"
+        :nodata="nodata"
+        @update="initChartTwoInfo"
+      >
+        <template #formSlot>
+          <el-form :model="chartTwoFormData" labelWidth="100">
+            <el-form-item label="起始时刻">
+              <el-input-number
+                v-model="chartTwoFormData.start"
+                controls-position="right"
+                precision="5"
+              /><span>s</span>
+            </el-form-item>
+            <el-form-item label="终止时刻">
+              <el-input-number
+                v-model="chartTwoFormData.end"
+                controls-position="right"
+                precision="5"
+              />
+              <span>s</span>
+            </el-form-item>
+            <el-form-item label="峰值">
+              <el-input v-model="chartTwoFormData.highVal" class="input-style" /><span>m/s²</span>
+            </el-form-item>
+            <el-form-item label="峰峰值">
+              <el-input v-model="chartTwoFormData.moreHighVal" class="input-style" /><span
+                >m/s²</span
+              >
+            </el-form-item>
+          </el-form>
+        </template>
+      </commonFilterChart>
+    </div>
+    <div class="chart-item h60">
+      <commonFilterChart
+        title="分析结果"
+        :charts-id="'chart-item3'"
+        :bar-type="'lineChart'"
+        :option="chartThreeOption"
+        :nodata="nodata"
+        @update="initChartThreeInfo"
+      >
+        <template #formSlot>
+          <el-form :model="chartThreeFormData" labelWidth="100">
+            <el-form-item label="滤波设置">
+              <el-select v-model="chartThreeFormData.isFilter"></el-select>
+            </el-form-item>
+            <el-form-item label="峰值">
+              <el-input v-model="chartThreeFormData.highVal" class="input-style" /><span>m/s²</span>
+            </el-form-item>
+            <el-form-item label="峰峰值">
+              <el-input v-model="chartThreeFormData.moreHighVal" class="input-style" /><span
+                >m/s²</span
+              >
+            </el-form-item>
+            <el-form-item>
+              <el-select v-model="chartThreeFormData.type"></el-select>
+            </el-form-item>
+            <el-form-item label="平稳性指标">
+              <el-input v-model="chartThreeFormData.performance"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-select v-model="chartThreeFormData.system"></el-select>
+            </el-form-item>
+            <el-form-item label="平稳性等级">
+              <el-select v-model="chartThreeFormData.level"></el-select>
+            </el-form-item>
+          </el-form>
+        </template>
+      </commonFilterChart>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import commonFilterChart from '@/components/common/echartCard/commonFilterChart.vue';
+import { testOption } from '../demoFile/param';
+
+const nodata = ref(false);
+const chartOneOption = ref<any>({});
+const initChartOneInfo = () => {
+  chartOneOption.value = testOption;
+};
+
+const chartTwoFormData = reactive({
+  start: '0',
+  end: '0',
+  highVal: '',
+  moreHighVal: '',
+});
+const chartTwoOption = ref<any>({});
+const initChartTwoInfo = () => {
+  chartTwoOption.value = testOption;
+};
+
+const chartThreeFormData = reactive({
+  isFilter: '不滤波',
+  highVal: '',
+  moreHighVal: '',
+  type: '垂向平稳性',
+  performance: '',
+  system: '客车评价体系',
+  level: 'L1',
+});
+const chartThreeOption = ref<any>({});
+const initChartThreeInfo = () => {
+  chartThreeOption.value = testOption;
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-page {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+
+  .chart-item {
+    width: 100%;
+    border: 1px solid #dcebf7;
+    margin-bottom: 5px;
+    border-radius: 5px;
+    overflow: hidden;
+  }
+
+  .h50 {
+    height: 50%;
+  }
+  .h60 {
+    height: 60%;
+  }
+
+  .input-style {
+    width: calc(100% - 20px);
+  }
+}
+
+:deep(.el-form-item__content) {
+  flex-wrap: nowrap;
+}
+</style>

src/views/task/execution/components/runDetailPage/runPagecomponent/vibrationSignalAnalysis_Demo.vue

@@ -0,0 +1,180 @@
+<!-- 震动信号分析 -->
+<template>
+  <div class="page-content">
+    <div class="operate-box">
+      <el-form class="el-form-style" inline>
+        <el-form-item>
+          <el-button type="primary">双列数据读取</el-button>
+          <el-button type="primary">单列数据读取</el-button>
+          <el-button type="primary">从速度数据加载</el-button>
+        </el-form-item>
+        <el-form-item label="数据来源：">
+          <el-select class="select-style"></el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary">清除当前数据</el-button>
+          <el-button type="primary">清除</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="filter-content">
+      <el-tabs v-model="activeName" class="tab-style" type="card">
+        <el-tab-pane label="加速度分析" name="acceleration"></el-tab-pane>
+        <el-tab-pane label="速度分析" name="speed"></el-tab-pane>
+      </el-tabs>
+
+      <div class="tab-inner" v-if="activeName === 'acceleration'">
+        <div class="chart-item">
+          <commonFilterChart
+          v-if="activeName === 'acceleration'"
+            title="加速度时域谱"
+            :charts-id="'chart-item1'"
+            :bar-type="'lineChart'"
+            :option="chartOneOption"
+            :nodata="nodata"
+            @update="initChartOneInfo"
+          />
+        </div>
+        <div class="chart-item">
+          <commonFilterChart
+          v-if="activeName === 'acceleration'"
+            title="局部加速度谱"
+            :charts-id="'chart-item2'"
+            :bar-type="'lineChart'"
+            :option="chartTwoOption"
+            :nodata="nodata"
+            @update="initChartTwoInfo"
+          />
+        </div>
+        <div class="chart-item">
+          <commonFilterChart
+          v-if="activeName === 'acceleration'"
+            title="加速度频谱"
+            :charts-id="'chart-item3'"
+            :bar-type="'lineChart'"
+            :option="chartThreeOption"
+            :nodata="nodata"
+            @update="initChartThreeInfo"
+          >
+            <template #formSlot>
+              <el-form :model="chartThreeFormData" labelWidth="100">
+                <el-form-item label="x轴-min">
+                  <el-input-number
+                    v-model="chartThreeFormData.xMin"
+                    controls-position="right"
+                    precision="5"
+                  />
+                  <span>Hz</span>
+                </el-form-item>
+                <el-form-item label="x轴-max">
+                  <el-input-number
+                    v-model="chartThreeFormData.xMax"
+                    controls-position="right"
+                    precision="5"
+                  />
+                  <span>Hz</span>
+                </el-form-item>
+                <el-form-item label="y轴-min">
+                  <el-input-number
+                    v-model="chartThreeFormData.yMin"
+                    controls-position="right"
+                    precision="7"
+                  />
+                  <span>m/s²</span>
+                </el-form-item>
+                <el-form-item label="y轴-max">
+                  <el-input-number
+                    v-model="chartThreeFormData.yMax"
+                    controls-position="right"
+                    precision="7"
+                  />
+                  <span>m/s²</span>
+                </el-form-item>
+              </el-form>
+            </template>
+          </commonFilterChart>
+        </div>
+      </div>
+      <div class="tab-inner" v-else></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import commonFilterChart from '@/components/common/echartCard/commonFilterChart.vue';
+import { testOption } from '../demoFile/param';
+
+const activeName = ref('acceleration');
+const nodata = ref(false);
+
+const chartThreeFormData = reactive({
+  xMin: '0',
+  xMax: '0',
+  yMin: '0',
+  yMax: '0',
+});
+
+const chartOneOption = ref<any>({});
+
+const initChartOneInfo = () => {
+  chartOneOption.value = testOption;
+};
+const chartTwoOption = ref<any>({});
+
+const initChartTwoInfo = () => {
+  chartTwoOption.value = testOption;
+};
+
+const chartThreeOption = ref<any>({});
+
+const initChartThreeInfo = () => {
+  chartThreeOption.value = testOption;
+};
+</script>
+
+<style lang="scss" scoped>
+.page-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .operate-box {
+    width: 100%;
+  }
+
+  .filter-content {
+    flex: 1;
+    width: 100%;
+    overflow: hidden;
+    .tab-style {
+      width: 100%;
+      height: 50px;
+    }
+
+    .tab-inner {
+      width: 100%;
+      height: calc(100% - 50px);
+      overflow: auto;
+
+      .chart-item {
+        width: 100%;
+        height: 50%;
+        min-height: 200px;
+        border: 1px solid #dcebf7;
+        margin-bottom: 5px;
+        border-radius: 5px;
+      }
+    }
+  }
+
+  .select-style {
+    width: 200px;
+  }
+
+  :deep(.el-input-number){
+    width: 140px !important;
+  }
+}
+</style>