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

modeler/src/views/ai/applications/charts/charts-blue.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="ks-model-chart-item-child" style="width:50%;display: block;float:left;position: relative">
+    <div class="ks-model-chart-item-wrapper" ref="chartContainer" style="height:350px;"></div>
+    <div class="ks-model-chart-item-description">
+      <span class="pre">{{ lastItem?.blueWinRounds ?? 0}}胜 {{ lastItem?.redWinRounds ?? 0}}败</span>
+      <span class="total">共{{ deductionPod.totalRound??0 }}场</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, nextTick, type PropType, ref, watch } from 'vue';
+import * as echarts from 'echarts';
+import type { ModelDeductionData, DeductionPod } from '../types';
+import { createPieChartOption } from './pie-options';
+
+export default defineComponent({
+  props: {
+    datas: {
+      type: Array as PropType<ModelDeductionData[]>,
+      default: [],
+    },
+    deductionPod: {
+      type: [Object] as PropType<DeductionPod|null | undefined>,
+    },
+    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 deductionPod = ref<Partial<DeductionPod>>({})
+    const lastItem = ref<ModelDeductionData|null | undefined>(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 load = (d: ModelDeductionData[]) => {
+      const blueName = props.blueName ?? '蓝方';
+      const redName = props.redName ?? '红方';
+
+      let pre = 0;
+
+      lastItem.value = null;
+      if (d && d.length >= 1) {
+        lastItem.value = d[d.length - 1] as ModelDeductionData;
+        const mineRounds = lastItem.value?.blueWinRounds ?? 0;
+        const totalRound = props.deductionPod?.totalRound ?? 0;
+        if (totalRound > 0) {
+          pre = Number((mineRounds / totalRound * 100).toFixed(2));
+        }
+        console.error('blue',mineRounds,totalRound)
+      }
+      const options = createPieChartOption(`${blueName}胜率`, 'blue', pre, `${blueName}胜率`, blueName as string, redName as string);
+      nextTick(() => initChart(options));
+    };
+
+    watch(() => props.datas, (n: ModelDeductionData[]) => load(n), { deep: true, immediate: true });
+    watch(() => props.deductionPod, (n: DeductionPod  | null| undefined ) => deductionPod.value = n ?? {}, { deep: true, immediate: true });
+
+    return {
+      lastItem,
+      deductionPod,
+      chartContainer
+    };
+  }
+});
+</script>