TBA_GXPT/ruoyi-ui/src/views/standardization/bizDataShowConfig/chart/index.vue

<template>
  <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="图表类型">
      <el-select v-model="form.chartType" placeholder="请选择图表类型" @change="changeChartType">
        <el-option v-for="chartType in chartTypeOptions" :key="chartType.value" :label="chartType.label"
                   :value="chartType.value"/>
      </el-select>
    </el-form-item>
    <el-collapse>
      <el-collapse-item name="1" title="图例">
        <el-form-item label="显示">
          <el-radio-group v-model="form.legend.show">
            <el-radio :value="true">是</el-radio>
            <el-radio :value="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="位置(X)">
          <x-axis-config v-model="form.legend.left"></x-axis-config>
        </el-form-item>
        <el-form-item label="位置(Y)">
          <y-axis-config v-model="form.legend.top"></y-axis-config>
        </el-form-item>
        <el-form-item label="布局方式">
          <el-radio-group v-model="form.legend.orient">
            <el-radio-button value="vertical">纵向</el-radio-button>
            <el-radio-button value="horizontal">横向</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="字体大小">
          <el-input-number v-model="form.legend.textStyle.fontSize" :min="2"></el-input-number>
        </el-form-item>
        <el-form-item label="文字颜色">
          <el-color-picker v-model="form.legend.textStyle.color" :predefine="predefineColors"
                           show-alpha></el-color-picker>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item name="2" title="内边距">
        <el-form-item label="内边距(左)">
          <el-input-number v-model="form.grid.left" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="内边距(上)">
          <el-input-number v-model="form.grid.top" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="内边距(右)">
          <el-input-number v-model="form.grid.right" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="内边距(下)">
          <el-input-number v-model="form.grid.bottom" :min="0"></el-input-number>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item v-if="form.chartType !== 'pie'" name="3" title="x轴">
        <el-form-item label="显示">
          <el-radio-group v-model="form.xAxis.show">
            <el-radio :value="true">是</el-radio>
            <el-radio :value="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.xAxis.name"></el-input>
        </el-form-item>
        <el-form-item label="轴线显示">
          <el-radio-group v-model="form.xAxis.axisLine.show">
            <el-radio :value="true">是</el-radio>
            <el-radio :value="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="轴线颜色">
          <el-color-picker v-model="form.xAxis.axisLine.lineStyle.color" :predefine="predefineColors"
                           show-alpha></el-color-picker>
        </el-form-item>
        <el-form-item label="刻度线">
          <el-radio-group v-model="form.xAxis.axisTick.show">
            <el-radio :value="true">是</el-radio>
            <el-radio :value="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="字体颜色">
          <el-color-picker v-model="form.xAxis.axisLabel.color" :predefine="predefineColors"
                           show-alpha></el-color-picker>
        </el-form-item>
        <el-form-item label="字体大小">
          <el-input-number v-model="form.xAxis.axisLabel.fontSize" :min="2"></el-input-number>
        </el-form-item>
        <el-form-item label="字体倾斜">
          <el-input-number v-model="form.xAxis.axisLabel.rotate" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="显示间隔">
          <el-select v-model="form.xAxis.axisLabel.interval">
            <el-option label="自动" value="auto"></el-option>
            <el-option :value="0" label="全部显示"></el-option>
            <el-option :value="1" label="隔一行"></el-option>
            <el-option :value="2" label="隔两行"></el-option>
            <el-option :value="3" label="隔三行"></el-option>
            <el-option :value="4" label="隔四行"></el-option>
            <el-option :value="5" label="隔五行"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据">
          <el-select v-model="form.xparams" multiple placeholder="请选择x轴数据">
            <el-option v-for="column in columns" :key="column.key" :label="column.value" :value="column"/>
          </el-select>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item v-if="form.chartType !== 'pie'" name="4" title="y轴">
        <el-form-item label="y轴颜色">
          <el-color-picker v-model="form.yAxis.axisLine.lineStyle.color" :predefine="predefineColors"
                           show-alpha></el-color-picker>
        </el-form-item>
        <el-form-item label="字体颜色">
          <el-color-picker v-model="form.yAxis.axisLabel.color" :predefine="predefineColors"
                           show-alpha></el-color-picker>
        </el-form-item>
        <el-form-item label="字体大小">
          <el-input-number v-model="form.yAxis.axisLabel.fontSize" :min="2"></el-input-number>
        </el-form-item>
        <el-form-item label="网格线">
          <el-radio-group v-model="form.yAxis.splitLine.show">
            <el-radio :value="true">是</el-radio>
            <el-radio :value="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="网格线颜色">
          <el-color-picker v-model="form.yAxis.splitLine.lineStyle.color" :predefine="predefineColors"
                           show-alpha></el-color-picker>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item v-if="form.chartType !== 'pie'" name="5" title="数值">
        <el-form-item label="显示">
          <el-radio-group v-model="form.series.label.show">
            <el-radio :value="true">是</el-radio>
            <el-radio :value="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="字体大小">
          <el-input-number v-model="form.series.label.fontSize" :min="2"></el-input-number>
        </el-form-item>
        <el-form-item label="字体颜色">
          <el-color-picker v-model="form.series.label.color" :predefine="predefineColors"
                           show-alpha></el-color-picker>
        </el-form-item>
        <el-form-item label="字体位置">
          <el-select v-model="form.series.label.position">
            <el-option label="顶部" value="top"></el-option>
            <el-option label="左侧" value="left"></el-option>
            <el-option label="右侧" value="right"></el-option>
            <el-option label="底部" value="bottom"></el-option>
            <el-option label="中心" value="inside"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字体单位">
          <el-input v-model="form.series.label.unit"></el-input>
        </el-form-item>
        <el-form-item label="数据配置">
          <el-table :data="form.yparams">
            <el-table-column label="展示字段">
              <template #default="scope">
                <el-select v-model="scope.row.name" placeholder="请选择y轴数据">
                  <el-option v-for="column in columns" :key="column.key" :label="column.value" :value="column"/>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="默认选中">
              <template #default="scope">
                <el-switch v-model="scope.row.selected"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="单位">
              <template #default="scope">
                <el-select v-model="scope.row.unit" placeholder="请选择单位">
                  <el-option label="m" value="m"/>
                  <el-option label="m³/s" value="m³/s"/>
                  <el-option label="mm" value="mm"/>
                  <el-option label="万m³" value="万m³"/>
                  <el-option label="mg/L" value="mg/L"/>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="图表类型">
              <template #default="scope">
                <el-select v-model="scope.row.type" placeholder="请选择图表类型">
                  <el-option label="折线图" value="line"/>
                  <el-option label="柱状图" value="bar"/>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="">
              <template slot-scope="scope">
                <el-button icon="el-icon-delete" style="color:red;" text
                           @click="handleDelYparam(scope.$index)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button icon="el-icon-plus" text @click="handleAddYparam">
            新建展示字段
          </el-button>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item v-if="form.chartType !== 'pie'" name="6" title="柱体">
        <el-form-item label="柱体背景">
          <el-radio-group v-model="form.series.showBackground">
            <el-radio :value="true">是</el-radio>
            <el-radio :value="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="圆角">
          <el-input-number v-model="form.series.itemStyle.borderRadius" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="柱体宽度">
          <el-input-number v-model="form.barWidth" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="柱体配色">
          <el-color-picker v-for="(color, index) in form.color" :key="index"
                           v-model="form.color[index]"></el-color-picker>
          <el-button circle icon="el-icon-plus" @click="form.color.push('#b5b7be')"></el-button>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item v-if="form.chartType !== 'pie'" name="7" title="折线">
        <el-form-item label="折线显示">
          <el-radio-group v-model="form.lineShow">
            <el-radio :value="true">是</el-radio>
            <el-radio :value="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="平滑曲线">
          <el-radio-group v-model="form.smooth">
            <el-radio :value="true">是</el-radio>
            <el-radio :value="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="折线配色">
          <el-color-picker v-for="(color, index) in form.lineColors" :key="index"
                           v-model="form.lineColors[index]"></el-color-picker>
          <el-button circle icon="el-icon-plus" @click="form.lineColors.push('#b5b7be')"></el-button>
        </el-form-item>
        <el-form-item label="圆点大小">
          <el-input-number v-model="form.symbolSize" :max="120" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="面积显示">
          <el-radio-group v-model="form.areaShow">
            <el-radio :value="true">是</el-radio>
            <el-radio :value="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="面积配色">
          <el-color-picker v-for="(color, index) in form.areaColors" :key="index"
                           v-model="form.areaColors[index]"></el-color-picker>
          <el-button circle icon="el-icon-plus" @click="form.areaColors.push('#b5b7be')"></el-button>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item v-if="form.chartType === 'pie'" name="5" title="标签">
        <el-form-item label="显示">
          <el-radio-group v-model="form.series.label.show">
            <el-radio :value="true">是</el-radio>
            <el-radio :value="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="格式化">
          <el-input v-model="form.series.label.formatter"></el-input>
        </el-form-item>
        <el-form-item label="背景颜色">
          <el-color-picker v-model="form.series.label.backgroundColor" :predefine="predefineColors"
                           show-alpha></el-color-picker>
        </el-form-item>
        <el-form-item label="边框">
          <el-input-number v-model="form.series.label.borderWidth" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="边框颜色">
          <el-color-picker v-model="form.series.label.borderColor" :predefine="predefineColors"
                           show-alpha></el-color-picker>
        </el-form-item>
        <el-form-item label="边框圆角">
          <el-input-number v-model="form.series.label.borderRadius" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="位置">
          <el-select v-model="form.series.label.position">
            <el-option label="内部" value="inside"></el-option>
            <el-option label="外侧" value="outside"></el-option>
            <el-option label="中心" value="center"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字体大小">
          <el-input-number v-model="form.series.label.fontSize" :min="2"></el-input-number>
        </el-form-item>
        <el-form-item label="颜色">
          <el-color-picker v-model="form.series.label.color" :predefine="predefineColors"
                           show-alpha></el-color-picker>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item v-if="form.chartType === 'pie'" name="6" title="扇区">
        <el-form-item label="名称字段">
          <el-select v-model="form.nameField">
            <el-option v-for="column in columns" :key="column.key" :label="column.value" :value="column"/>
          </el-select>
        </el-form-item>
        <el-form-item label="数据字段">
          <el-select v-model="form.valueField">
            <el-option v-for="column in columns" :key="column.key" :label="column.value" :value="column"/>
          </el-select>
        </el-form-item>
        <el-form-item label="南丁格尔图">
          <el-select v-model="form.series.roseType">
            <el-option :value="false" label="不展示"></el-option>
            <el-option label="圆心角" value="radius"></el-option>
            <el-option label="扇区" value="area"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.series && form.series.radius && form.series.radius[1]" label="外环大小%">
          <el-input-number v-model="form.series.radius[1]" :max="120" :min="2"></el-input-number>
        </el-form-item>
        <el-form-item v-if="form.series && form.series.radius && form.series.radius[0]" label="内环大小%">
          <el-input-number v-model="form.series.radius[0]" :max="100" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="圆角">
          <el-input-number v-model="form.series.itemStyle.borderRadius" :max="120"
                           :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="配色">
          <el-color-picker v-for="(color, index) in form.color" :key="index"
                           v-model="form.color[index]"></el-color-picker>
          <el-button circle icon="el-icon-plus" @click="form.color.push('#b5b7be')"></el-button>
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>
<script setup>
import YAxisConfig from "./yAxis/index.vue";
import XAxisConfig from "./xAxis/index.vue";

const props = defineProps({
  columns: {
    type: Array,
    default: () => []
  },
  modelValue: String,
})
const emit = defineEmits(['update:modelValue'])

const form = ref({
  type: 'chart',
  chartType: 'linebar',
  legend: {
    show: true,
    left: 'left',
    top: 'top',
    orient: 'vertical',
    textStyle: {
      fontSize: 12,
      color: '#b5b7be'
    }
  },
  grid: {
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    containLabel: true,
  },
  xAxis: {
    show: true,
    name: '',
    axisLine: {
      show: true,
      lineStyle: {
        color: '#b5b7be',
      }
    },
    axisTick: {
      show: true,
    },
    axisLabel: {
      color: '#b5b7be',
      fontSize: 12,
      rotate: 0,
      interval: 'auto'
    },
  },
  yAxis: {
    axisLine: {
      lineStyle: {
        color: '#b5b7be',
      },
    },
    axisLabel: {
      color: '#b5b7be',
      fontSize: 12,
    },
    splitLine: {
      show: false,
      lineStyle: {
        color: '#b5b7be',
      },
    },
  },
  series: {
    showBackground: false,
    label: {
      show: true,
      fontSize: 12,
      color: '#b5b7be',
      position: 'top',
      unit: '',
    },
    itemStyle: {
      borderRadius: 0,
    },
  },
  barWidth: 18,
  color: [],
  xparams: [],
  yparams: [],
})
const rules = ref({})
const chartTypeOptions = ref([
  {label: '折线/柱状图', value: 'linebar'},
  {label: '饼/环图', value: 'pie'},
]);
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577'
])

function changeChartType(type) {
  let defaultValue;
  switch (type) {
    case "linebar":
      defaultValue = {
        type: 'chart',
        chartType: 'linebar',
        legend: {
          show: true,
          left: 'left',
          top: 'top',
          orient: 'vertical',
          textStyle: {
            fontSize: 12,
            color: '#b5b7be'
          }
        },
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
          containLabel: true,
        },
        xAxis: {
          show: true,
          name: '',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#b5b7be'
            }
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            color: '#b5b7be',
            fontSize: 12,
            rotate: 0,
            interval: 'auto'
          },
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: '#b5b7be',
            },
          },
          axisLabel: {
            color: '#b5b7be',
            fontSize: 12,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#b5b7be',
            },
          },
        },
        series: {
          showBackground: false,
          label: {
            show: true,
            fontSize: 12,
            color: '#b5b7be',
            position: 'top',
            unit: '',
          },
          itemStyle: {
            borderRadius: 0,
          },
        },
        barWidth: 18,
        color: [],
        lineShow: true,
        smooth: false,
        lineColors: [],
        symbolSize: 2,
        areaShow: false,
        areaColors: [],
        xparams: [],
        yparams: [],
      };
      break
    case "pie":
      defaultValue = {
        legend: {
          show: true,
          left: 'left',
          top: 'top',
          orient: 'vertical',
          textStyle: {
            fontSize: 12,
            color: '#b5b7be'
          }
        },
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
          containLabel: true,
        },
        series: {
          showBackground: false,
          label: {
            show: true,
            formatter: '{b}-{c}({d}%)',
            backgroundColor: '',
            borderWidth: 0,
            borderColor: '',
            borderRadius: 0,
            position: 'outside',
            fontSize: 12,
            color: '#b5b7be',
            roseType: 'false',
            radius: [0, 60],
            itemStyle: {
              borderRadius: 0
            },
          },
          itemStyle: {
            borderRadius: 0,
          },
        },
        color: [],
      };
      break
    case "gauge":
    case "radar":
  }
  form.value = objectMerge(defaultValue, form.value)
}

function handleDelYparam(index) {
  if (form.value.yparams && form.value.yparams.length > 0) {
    form.value.yparams.splice(index, 1);
  }
}

function handleAddYparam() {
  if (!form.value.yparams) {
    form.value.yparams = []
  }
  let defaultType = '';
  if (form.value.chartType === 'bar') {
    defaultType = 'bar';
  } else if (form.value.chartType === 'line') {
    defaultType = 'line';
  }

  form.value.yparams.push({selected: true, unit: '', type: defaultType})
}

watch(() => props.modelValue, modelValue => {
  if (modelValue) {
    form.value = JSON.parse(modelValue)
  }
}, {immediate: true})

watch(() => form, form => {
  emit('update:modelValue', JSON.stringify(form.value))
}, {deep: true})
</script>
<style scoped lang="scss">

</style>