platform/io.sc.engine.mv.frontend/src/views/result/Result.vue

<template>
  <div>
    <w-grid
      :ref="gridRef"
      :title="$t('menu.engine.mv.result')"
      :config-button="true"
      selection="multiple"
      :checkbox-selection="false"
      :data-url="Environment.apiContextPath('/api/mv/result')"
      :pageable="false"
      :toolbar-configure="{ noIcon: false }"
      :toolbar-actions="[
        'refresh',
        'separator',
        {
          name: 'detail',
          label: $t('detail'),
          icon: 'bi-display',
          click: (selecteds) => {
            if (selecteds && selecteds.length > 0) {
              const selected = selecteds[0];
              resultDetailDialogRef.open(selected);
            }
          },
        },
        'separator',
        'view',
        'separator',
        'export',
      ]"
      :columns="[
        { width: 150, name: 'validateDate', label: $t('io.sc.engine.mv.result.grid.entity.validateDate') },
        { width: 150, name: 'modelId', label: $t('io.sc.engine.mv.result.grid.entity.modelId') },
        { width: 200, name: 'modelName', label: $t('io.sc.engine.mv.result.grid.entity.modelName') },
        { width: 100, name: 'executeMode', label: $t('io.sc.engine.mv.result.grid.entity.executeMode') },
        { width: 100, name: 'totalSampleCount', label: $t('io.sc.engine.mv.result.grid.entity.totalSampleCount'), align: 'right' },
        { width: 100, name: 'defaultSampleCount', label: $t('io.sc.engine.mv.result.grid.entity.defaultSampleCount'), align: 'right' },
        {
          width: 900,
          name: 'discrimination',
          label: $t('io.sc.engine.mv.result.grid.entity.discrimination'),
          columns: [
            {
              name: 'total',
              label: $t('io.sc.engine.mv.result.grid.entity.total'),
              columns: [
                { width: 100, name: 'auc', label: $t('io.sc.engine.mv.result.grid.entity.auc') },
                { width: 100, name: 'ar', label: $t('io.sc.engine.mv.result.grid.entity.ar') },
                { width: 100, name: 'ks', label: $t('io.sc.engine.mv.result.grid.entity.ks') },
              ],
            },
            {
              name: 'quantitative',
              label: $t('quantitative'),
              columns: [
                { width: 100, name: 'aucQuantitative', label: $t('io.sc.engine.mv.result.grid.entity.auc') },
                { width: 100, name: 'arQuantitative', label: $t('io.sc.engine.mv.result.grid.entity.ar') },
                { width: 100, name: 'ksQuantitative', label: $t('io.sc.engine.mv.result.grid.entity.ks') },
              ],
            },
            {
              name: 'qualitative',
              label: $t('qualitative'),
              columns: [
                { width: 100, name: 'aucQualitative', label: $t('io.sc.engine.mv.result.grid.entity.auc') },
                { width: 100, name: 'arQualitative', label: $t('io.sc.engine.mv.result.grid.entity.ar') },
                { width: 100, name: 'ksQualitative', label: $t('io.sc.engine.mv.result.grid.entity.ks') },
              ],
            },
          ],
        },
        {
          width: 200,
          name: 'stability',
          label: $t('io.sc.engine.mv.result.grid.entity.stability'),
          columns: [
            { width: 100, name: 'svd', label: $t('io.sc.engine.mv.result.grid.entity.svd') },
            { width: 100, name: 'psi', label: $t('io.sc.engine.mv.result.grid.entity.psi') },
          ],
        },
        {
          width: 200,
          name: 'scaleValidate',
          label: $t('io.sc.engine.mv.result.grid.entity.scaleValidate'),
          columns: [
            { width: 100, name: 'chiSquare', label: $t('io.sc.engine.mv.result.grid.entity.chiSquare'), align: 'center', format: passOrNotFormater },
            { width: 100, name: 'binomial', label: $t('io.sc.engine.mv.result.grid.entity.binomial'), align: 'center', format: passOrNotFormater },
          ],
        },
      ]"
      :viewer="{
        panel: {
          columnNum: 1,
          fields: [
            { name: 'validateDate', label: $t('io.sc.engine.mv.result.grid.entity.validateDate') },
            {
              name: 'runtimeParameters',
              label: $t('io.sc.engine.mv.result.grid.entity.runtimeParameters'),
              format: (value) => {
                let result = '';
                for (const item of value) {
                  result +=
                    $t('io.sc.engine.mv.result.grid.entity.runtimeParameters.' + item.name) +
                    ':' +
                    (Tools.isUndefinedOrNull(item.value) ? '' : item.value) +
                    '<br/>';
                }
                return result;
              },
            },
            { name: 'modelId', label: $t('io.sc.engine.mv.result.grid.entity.modelId') },
            { name: 'modelName', label: $t('io.sc.engine.mv.result.grid.entity.modelName') },
            { name: 'executeMode', label: $t('io.sc.engine.mv.result.grid.entity.executeMode') },
            { name: 'totalSampleCount', label: $t('io.sc.engine.mv.result.grid.entity.totalSampleCount') },
            { name: 'defaultSampleCount', label: $t('io.sc.engine.mv.result.grid.entity.defaultSampleCount') },
            { name: 'auc', label: $t('io.sc.engine.mv.result.grid.entity.total.auc') },
            { name: 'ar', label: $t('io.sc.engine.mv.result.grid.entity.total.ar') },
            { name: 'ks', label: $t('io.sc.engine.mv.result.grid.entity.total.ks') },
            { name: 'aucQuantitative', label: $t('io.sc.engine.mv.result.grid.entity.quantitative.auc') },
            { name: 'arQuantitative', label: $t('io.sc.engine.mv.result.grid.entity.quantitative.ar') },
            { name: 'ksQuantitative', label: $t('io.sc.engine.mv.result.grid.entity.quantitative.ks') },
            { name: 'aucQualitative', label: $t('io.sc.engine.mv.result.grid.entity.qualitative.auc') },
            { name: 'arQualitative', label: $t('io.sc.engine.mv.result.grid.entity.qualitative.ar') },
            { name: 'ksQualitative', label: $t('io.sc.engine.mv.result.grid.entity.qualitative.ks') },
            { name: 'svd', label: $t('io.sc.engine.mv.result.grid.entity.svd') },
            { name: 'psi', label: $t('io.sc.engine.mv.result.grid.entity.psi') },
            { name: 'chiSquare', label: $t('io.sc.engine.mv.result.grid.entity.chiSquare'), format: Formater.none() },
            { name: 'binomial', label: $t('io.sc.engine.mv.result.grid.entity.binomial'), format: Formater.none() },
          ],
        },
      }"
    ></w-grid>
    <ResultDetailDialog ref="resultDetailDialogRef"></ResultDetailDialog>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Environment, Tools, Formater } from 'platform-core';
import ResultDetailDialog from './ResultDetailDialog.vue';

const gridRef = ref();
const resultDetailDialogRef = ref();

const passOrNotFormater = (value) => {
  if (Tools.isUndefinedOrNull(value)) {
    return '';
  }
  if (value === 'PASS') {
    return {
      componentType: 'QIcon',
      attrs: { name: 'bi-check-circle', size: '20px', color: 'green' },
    };
  } else {
    return {
      componentType: 'QIcon',
      attrs: { name: 'bi-x-circle', size: '20px', color: 'red' },
    };
  }
};
</script>