修改部分规则模块删除无用前端 新增前端界面

modeler/src/views/ai/applications/charts/charts-002-2.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="ks-model-chart-item" ref="chartContainer"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent, nextTick, type PropType, ref, watch } from 'vue';
+import * as echarts from 'echarts';
+import type { ModelDeductionData } from '../types';
+import { createScatterChartOption } from './scatter-options';
+
+export default defineComponent({
+  props: {
+    datas: {
+      type: Array as PropType<ModelDeductionData[]>,
+      default: [],
+    },
+    redName: {
+      type: String as PropType<String>,
+      default: '红方',
+    },
+    blueName: {
+      type: String as PropType<String>,
+      default: '蓝方',
+    },
+  },
+  setup(props) {
+    const chartContainer = ref<HTMLElement | null>(null);
+    let chartInstance: echarts.ECharts | null = null;
+
+    const initChart = (option: any) => {
+      if (!chartContainer.value) return;
+
+      if (chartInstance) {
+        chartInstance.dispose();
+      }
+      chartInstance = echarts.init(chartContainer.value);
+
+      chartInstance.setOption(option);
+
+      // 自适应窗口大小（可选，提升体验）
+      window.addEventListener('resize', () => {
+        chartInstance?.resize();
+      });
+    };
+
+    const defaultValues = {
+      hide_missile: 0,
+      angle: 0,
+      height: 0,
+      speed: 0,
+    }
+    const parseJson = (v: any)=> {
+      let values = {...defaultValues}
+      try{
+        values = JSON.parse(v as string);
+      } catch (e: any) {
+        console.error('error',e);
+      }
+      return {
+        ...defaultValues,
+        ...values
+      }
+    }
+
+    const load = (d: ModelDeductionData[]) => {
+      const xAxisData: string[] = [];
+      const blueData: any[] = [];
+      const redData: any[] = [];
+      if (d) {
+        d.forEach(item => {
+          let blueValues = parseJson(item.returnComponentsBlue);
+          let redValues = parseJson(item.returnComponentsRed);
+
+          xAxisData.push(`轮数${item.currentEpisode}`);
+          blueData.push(blueValues.angle);
+          redData.push(redValues.angle);
+        });
+      }
+      const options = createScatterChartOption({
+        title: '角度奖励', xAxisData, blueData, redData,
+        blueName: props.blueName as string,
+        redName: props.redName as string,
+      });
+      nextTick(() => initChart(options));
+    };
+
+    watch(() => props.datas, (n: ModelDeductionData[]) => load(n), { deep: true, immediate: true });
+
+    return {
+      chartContainer
+    };
+  }
+});
+</script>