resultViewModal.vue 3.48 KB
<template>
  <BasicModal
    width="80%"
    v-bind="$attrs"
    @register="registerModal"
    :title="title"
    @ok="handleSubmit"
  >
    <template #footer>
      <a-button type="primary" @click="handleSubmit">关闭</a-button>
    </template>
    <div class="flex">
      <BasicForm @register="registerForm" class="w-1/5 xl:w-1/5">
        <template #formFooter>
          <a-button type="primary" @click="handleFormSubmit" style="margin-left: 100px"
            >提交</a-button
          >
        </template>
      </BasicForm>
      <div class="w-4/5 xl:w-4/5">
        <div class="charts-container1">
          <div class="chart" id="chart"></div>
        </div>
        <a-button type="primary" @click="handleDownload" style="margin-left: 100px"
          >下载图表</a-button
        >
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { useMessage } from '@/hooks/web/useMessage';
  import { BasicForm, useForm } from '@/components/Form';
  import { resultViewSchema } from '@/views/scriptDevelopment/sqlDevelopment/data';
  import * as echarts from 'echarts';
  import { chartData } from '@/views/scriptDevelopment/sqlDevelopment/sqlDevelopmentData';

  defineOptions({ name: 'KnowledgeModal' });

  const emit = defineEmits(['success', 'register']);
  const { createMessage } = useMessage();
  const title = ref();
  //获取接口数据并放在下拉框里(这里是打开了一个弹框)
  //初始化表单
  const [registerForm, { resetFields }] = useForm({
    labelWidth: 100,
    baseColProps: { lg: 12, md: 24 },
    schemas: resultViewSchema,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 23,
    },
  });
  //初始化弹框
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    initCharts();
    await resetFields();
    setModalProps({ confirmLoading: false });
    title.value = data.title;
  });

  function initCharts() {
    // 获取图表容器
    const chartContainer = document.getElementById('chart');
    console.log('1111111', chartContainer);
    // 初始化图表实例
    const chartInstance = echarts.init(chartContainer);
    chartInstance.setOption({
      title: {
        text: '柱状图',
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: chartData.map((item) => item.name),
        axisLabel: {
          interval: 0, // 强制显示所有标签
          rotate: 30, // 旋转标签防止重叠
        },
      },
      legend: {
        orient: 'horizontal', // 图例项水平排列
        left: 'left', // 图例放置于底部中心位置
        top: 'center', // 图例放置于图表的底部
      },
      yAxis: {
        type: 'value',
        min: 0, // 设置 Y 轴的最小值
        max: 8,
        splitNumber: 0.5,
      },
      series: [
        {
          color: '#87b078',
          name: 'id',
          type: 'bar',
          data: chartData.map((item) => item.id),
        },
      ],
    });
  }
  async function handleSubmit() {
    closeModal();
  }
  async function handleFormSubmit() {
    createMessage.success('提交成功');
  }
  async function handleDownload() {
    createMessage.success('下载成功');
  }
</script>
<style lang="scss" scoped>
  .charts-container1 {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }
  .chart {
    width: 100%;
    height: 350px;
    background-color: white;
  }
</style>