初始化

ny

23 小时以前 282fbc6488f4e8ceb5fda759f963ee88fbf7b999

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<script lang="ts" setup>
defineProps(['chart', 'dataSetList']);
 
const summaryTypeOptions = [
  { id: 'none', fullName: '无' },
  { id: 'sum', fullName: '合计' },
  { id: 'max', fullName: '最大值' },
  { id: 'min', fullName: '最小值' },
  { id: 'count', fullName: '计数' },
  { id: 'avg', fullName: '平均值' },
];
const barTypeList = [
  { fullName: '柱体', id: 'bar' },
  { fullName: '折线', id: 'line' },
];
 
const columns = [
  { title: '系列', key: 'title', ellipsis: true },
  { title: '类型', key: 'type' },
];
</script>
 
<template>
  <a-collapse-panel>
    <template #header>数据设置</template>
    <a-form-item label="系列">
      <jnpf-tree-select
        v-model:value="chart.classifyNameField"
        last-level
        last-level-key="children"
        :options="dataSetList"
        :field-names="{ value: 'jnpfId' }" />
    </a-form-item>
    <a-form-item label="维度">
      <jnpf-tree-select v-model:value="chart.seriesNameField" last-level last-level-key="children" :options="dataSetList" :field-names="{ value: 'jnpfId' }" />
    </a-form-item>
    <a-form-item label="数值">
      <jnpf-tree-select v-model:value="chart.seriesDataField" last-level last-level-key="children" :options="dataSetList" :field-names="{ value: 'jnpfId' }" />
    </a-form-item>
    <a-form-item label="最大值" v-if="chart.chartType == 'radar'">
      <jnpf-tree-select v-model:value="chart.maxField" last-level last-level-key="children" :options="dataSetList" :field-names="{ value: 'jnpfId' }" />
    </a-form-item>
    <a-form-item label="汇总方式">
      <jnpf-select v-model:value="chart.summaryType" :options="summaryTypeOptions" />
    </a-form-item>
    <div v-if="chart.styleType == 7 && chart.chartType == 'bar'" class="my-[20px]">
      <a-table :data-source="chart.bar.barTypeList" :columns="columns" size="small" :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'title'"> {{ record[column.key] }} </template>
          <template v-if="column.key === 'type'">
            <jnpf-select v-model:value="record[column.key]" placeholder="请选择" :options="barTypeList" show-search />
          </template>
        </template>
      </a-table>
    </div>
  </a-collapse-panel>
</template>