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

<template>
  <q-splitter :model-value="70" horizontal class="w-full" style="height: 100%">
    <template #before>
      <div class="pl-1" style="height: 100%">
        <w-grid
          ref="gridRef"
          :title="$t('data')"
          dense
          :checkbox-selection="true"
          :fetch-data-url="Environment.apiContextPath('/api/st/depFactor?defineId=' + factorDefine.id)"
          :data-url="Environment.apiContextPath('/api/st/depFactor')"
          :pageable="false"
          :sort-by="['year', 'quarter', 'month', 'day']"
          :query-form-cols-num="4"
          :query-form-fields="[]"
          :toolbar-actions="[
            'refresh',
            'separator',
            {
              extend: 'add',
              enableIf: () => {
                return factorDefine.type === 'ORIGINAL';
              },
            },
            {
              extend: 'clone',
              enableIf: () => {
                return factorDefine.type === 'ORIGINAL';
              },
            },
            {
              extend: 'edit',
              enableIf: () => {
                return factorDefine.type === 'ORIGINAL';
              },
            },
            {
              extend: 'remove',
              enableIf: () => {
                return factorDefine.type === 'ORIGINAL';
              },
            },
            'separator',
            'view',
            'separator',
            'export',
          ]"
          :columns="[
            { width: 60, name: 'year', label: t('year'), align: 'right' },
            { width: 60, name: 'quarter', label: t('quarter'), align: 'right' },
            { width: 60, name: 'month', label: t('month'), align: 'right' },
            { width: 150, name: 'value', label: t('value') },
          ]"
          :editor="{
            dialog: {
              width: '600px',
            },
            form: {
              colsNum: 1,
              fields: [
                {
                  name: 'factorType',
                  label: $t('factorType'),
                  type: 'text',
                  defaultValue: factorDefine.id,
                  hidden: true,
                },
                { name: 'year', label: $t('year'), type: 'number', required: true },
                {
                  name: 'quarter',
                  label: $t('quarter'),
                  type: 'number',
                  required: true,
                  showIf: () => {
                    return factorDefine.period === 'QUARTER';
                  },
                },
                {
                  name: 'month',
                  label: $t('month'),
                  type: 'number',
                  required: true,
                  showIf: () => {
                    return factorDefine.period === 'MONTH';
                  },
                },
                {
                  name: 'day',
                  label: $t('day'),
                  type: 'number',
                  required: true,
                  showIf: () => {
                    return factorDefine.period === 'DAY';
                  },
                },
                { name: 'value', label: $t('value'), type: 'text', required: true },
              ],
            },
          }"
          :viewer="{
            panel: {
              columnNum: 1,
              fields: [
                { name: 'id', label: $t('id') },
                { name: 'factorType', label: $t('engine.st.depFactorDefine.grid.entity.factorDefine') },
                { name: 'year', label: $t('year') },
                { name: 'quarter', label: $t('quarter') },
                { name: 'month', label: $t('month') },
                { name: 'value', label: $t('value') },
                { name: 'dataComeFrom', label: $t('dataComeFrom') },
                { name: 'creator', label: $t('creator') },
                { name: 'createDate', label: $t('createDate') },
                { name: 'lastModifier', label: $t('lastModifier') },
                { name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.none() },
                { name: 'corporationCode', label: $t('corporationCode') },
              ],
            },
          }"
          @after-request-data="
            () => {
              const rows = gridRef.getRows();
              const xAxisData = [];
              const seriesData = [];
              for (const row of rows) {
                xAxisData.push(row.year + (row.month ? '-' + row.month : ''));
                seriesData.push(row.value);
              }
              echartsOptionRef = {
                title: {
                  text: factorDefine.name,
                  left: 'center',
                },
                xAxis: {
                  type: 'category',
                  name: $t('period'),
                  data: xAxisData,
                },
                yAxis: {
                  type: 'value',
                  name: $t('value'),
                },
                series: [
                  {
                    data: seriesData,
                    type: 'line',
                    smooth: true,
                  },
                ],
              };
            }
          "
        ></w-grid>
      </div>
    </template>
    <template #after>
      <w-echarts ref="factorEcharts" style="width: 100%; height: 100%" :option="echartsOptionRef"></w-echarts>
    </template>
  </q-splitter>
</template>
<script setup lang="ts">
import { ref, computed, onUpdated } from 'vue';
import { useI18n } from 'vue-i18n';
import { Environment, Formater } from 'platform-core';

const props = defineProps({
  factorDefine: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const { t } = useI18n();
const gridRef = ref();
const echartsOptionRef = ref();

const refresh = () => {
  gridRef.value.refresh();
};

onUpdated(() => {
  gridRef.value.refresh();
});

defineExpose({
  refresh,
});
</script>