platform/io.sc.engine.st.frontend/src/views/Scenario.vue

<template>
  <w-dialog ref="dialogRef" :title="$t('engine.st.scenario.dialog.title')" width="800px" :can-maximize="false">
    <div class="px-2" style="height: 100%">
      <w-grid
        ref="gridRef"
        :height="200"
        :title="$t('engine.st.scenario.grid.title')"
        dense
        selection="multiple"
        :pageable="false"
        :full-screen-button="false"
        :toolbar-configure="{ noIcon: false }"
        :toolbar-actions="['query', 'separator', 'refresh', 'separator', 'add', 'edit', 'remove', 'separator']"
        :query-form-fields="[]"
        :auto-fetch-data="false"
        :fetch-data-url="dataUrl + '?' + foreignKey + '=' + foreignValue"
        :data-url="dataUrl"
        :columns="[
          { width: 100, name: 'indicator', label: $t('engine.st.scenario.grid.entity.indicator') },
          { width: 100, name: 'lowGrade', label: $t('engine.st.scenario.grid.entity.lowGrade') },
          { width: 100, name: 'midGrade', label: $t('engine.st.scenario.grid.entity.midGrade') },
          { width: 100, name: 'highGrade', label: $t('engine.st.scenario.grid.entity.highGrade') },
        ]"
        :editor="{
          dialog: {
            width: '600px',
          },
          form: {
            colsNum: 1,
            fields: [
              {
                name: 'testCase',
                label: $t('engine.st.scenario.grid.entity.testCase'),
                type: 'text',
                defaultValue: foreignValue,
              },
              {
                name: 'indicator',
                label: $t('engine.st.scenario.grid.entity.indicator'),
                type: 'select',
                options: indicatorOptionsRef,
              },
              { width: 100, name: 'lowGrade', label: $t('engine.st.scenario.grid.entity.lowGrade'), type: 'number', precision: 6 },
              { width: 100, name: 'midGrade', label: $t('engine.st.scenario.grid.entity.midGrade'), type: 'number', precision: 6 },
              { width: 100, name: 'highGrade', label: $t('engine.st.scenario.grid.entity.highGrade'), type: 'number', precision: 6 },
            ],
          },
        }"
      ></w-grid>
      <div id="echart" style="width: 100%; height: 300px"></div>
    </div>
  </w-dialog>
</template>
<script setup lang="ts">
import { ref, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
import * as echarts from 'echarts';
import { axios, Environment, Tools } from 'platform-core';

const { t } = useI18n();

const props = defineProps({
  opener: { type: Object, default: undefined },
  dataUrl: { type: String, default: '' },
  foreignKey: { type: String, default: '' },
  foreignValue: { type: String, default: '' },
});

const dialogRef = ref();
const foreignKeyRef = ref('');
const gridRef = ref();
let echart;

const indicatorOptionsRef = ref([
  { label: t('engine.st.economicIndicator.grid.entity.GDP'), value: 'GDP' },
  { label: t('engine.st.economicIndicator.grid.entity.M2'), value: 'M2' },
  { label: t('engine.st.economicIndicator.grid.entity.CPI'), value: 'CPI' },
  { label: t('engine.st.economicIndicator.grid.entity.HPI'), value: 'HPI' },
  { label: t('engine.st.economicIndicator.grid.entity.PMI'), value: 'PMI' },
  { label: t('engine.st.economicIndicator.grid.entity.BLR'), value: 'BLR' },
]);

const open = (foreignKey: string) => {
  foreignKeyRef.value = foreignKey;
  dialogRef.value.show();

  nextTick(() => {
    gridRef.value.refresh();
    if (!echart) {
      echart = echarts.init(document.getElementById('echart'), null, { width: 800, height: 300 });
    } else {
      echart.dispose();
      echart = echarts.init(document.getElementById('echart'), null, { width: 800, height: 300 });
    }
    echart?.setOption({
      animation: false,
      title: {
        text: 'KS 曲线',
        left: 'center',
      },
      grid: {
        show: true,
        containLabel: true,
      },
      legend: {
        top: 30,
        data: ['正常样本占比', '违约样本占比'],
      },
      tooltip: {},
      xAxis: {
        gridIndex: 0,
        name: '评分',
        nameLocation: 'middle',
        nameGap: 30,
        smooth: true,
        boundaryGap: false,
        axisTick: {
          interval: 0,
        },
        data: [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100],
      },
      yAxis: {
        gridIndex: 0,
        name: '样本占比',
        nameLocation: 'middle',
        nameGap: 30,
        smooth: false,
        boundaryGap: false,
        axisTick: {
          interval: 0,
        },
        data: null,
      },
      series: [
        {
          name: '正常样本占比',
          type: 'line',
          barWidth: 0,
          data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.01, 0.15, 0.28, 0.36, 0.43, 0.49, 0.57, 0.66, 0.77, 0.91, 1.0],
        },
        {
          name: '违约样本占比',
          type: 'line',
          barWidth: 0,
          data: [
            0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.037037, 0.08642, 0.609053, 0.662551, 0.707819, 0.720165, 0.769547, 0.814815, 0.855967, 0.897119,
            0.962963, 1.0,
          ],
        },
      ],
    });
    echart?.resize();
  });
};

const close = () => {
  dialogRef.value.hide();
  if (echart) {
    echart.dispose();
  }
};

defineExpose({
  open,
  close,
});
</script>