修改SQL开发模块

src/views/scriptDevelopment/sqlDevelopment/data.ts

@@ -159,3 +159,90 @@ export const refundSchema: DescItem[] = [
     label: '影响行数',
   },
 ];
+export const partitionColumns: BasicColumn[] = [
+  {
+    title: 'name',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: 'partitionKey',
+    dataIndex: 'partitionKey',
+    width: 120,
+  },
+  {
+    title: 'partitionKeyType',
+    dataIndex: 'partitionKeyType',
+    width: 120,
+  },
+  {
+    title: 'partitionSize',
+    dataIndex: 'partitionSize',
+    width: 120,
+  },
+];
+export const resultViewSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '图表名称',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'type',
+    label: '图表类型',
+    component: 'Select',
+    componentProps: {
+      options: [{ label: '柱状图', value: '1' }],
+    },
+    colProps: { lg: 24, md: 24 },
+    required: true,
+  },
+  {
+    field: 'XData',
+    label: 'x轴',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'name', value: '1' },
+        { label: 'partitionKey', value: '2' },
+        { label: 'partitionKeyType', value: '3' },
+        { label: 'partitionSize', value: '4' },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+    required: true,
+  },
+  {
+    field: 'YData',
+    label: 'y轴',
+    component: 'Select',
+    componentProps: {
+      mode: 'multiple',
+      options: [
+        { label: 'name', value: '1' },
+        { label: 'partitionKey', value: '2' },
+        { label: 'partitionKeyType', value: '3' },
+        { label: 'partitionSize', value: '4' },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+    required: true,
+  },
+  {
+    field: 'Sum',
+    label: '聚合方式',
+    component: 'Select',
+    componentProps: {
+      options: [{ label: 'SUM', value: '1' }],
+    },
+    colProps: { lg: 24, md: 24 },
+    required: true,
+  },
+  {
+    field: 'limit',
+    label: 'limit',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+  },
+];

src/views/scriptDevelopment/sqlDevelopment/index.vue

@@ -33,11 +33,15 @@
         data: [],
       };
       let data = DataTreeData.filter((item) => item.parentId !== 0);
-      if (params.res.parentId) {
+      if (params.res !== undefined) {
+        if (params.res.parentId !== undefined) {
           data = DataTreeData.filter((item) => item.parentId === params.res.businessId);
         } else {
           data = DataTreeData.filter((item) => item.parentId === 100);
         }
+      } else {
+        data = DataTreeData.filter((item) => item.parentId === 100);
+      }
       return { ...response, data: data };
     },
     columns,

src/views/scriptDevelopment/sqlDevelopment/sqlDevelopmentData.ts

@@ -395,7 +395,7 @@ export const cardList: any[] = [
     icon: 'weui:done2-outlined',
     percent: 100,
     color: 'green',
-    description: '8行结果',
+    description: '4行结果',
     datetime: '15:22:12  55毫秒',
   },
   {
@@ -423,3 +423,35 @@ export const refundData = {
   cost: '55毫秒',
   log: '8行结果',
 };
+export const partitionData: any[] = [
+  {
+    name: 'less100s',
+    partitionKey: 'a_bigint',
+    partitionKeyType: 'bigint',
+    partitionSize: '30-100',
+  },
+  {
+    name: 'less10s',
+    partitionKey: 'a_bigint',
+    partitionKeyType: 'bigint',
+    partitionSize: '100-200',
+  },
+  {
+    name: 'less1s',
+    partitionKey: 'a_bigint',
+    partitionKeyType: 'bigint',
+    partitionSize: '200-300',
+  },
+  {
+    name: 'lessss',
+    partitionKey: 'a_bigint',
+    partitionKeyType: 'bigint',
+    partitionSize: '300-400',
+  },
+];
+export const chartData = [
+  { name: 'less100s', id: 1 },
+  { name: 'less10s', id: 2 },
+  { name: 'less1s', id: 3 },
+  { name: 'lessss', id: 4 },
+];

src/views/scriptDevelopment/sqlDevelopment/sqlExecute/resultModal.vue

 <template>
   <BasicModal
-    width="50%"
+    width="90%"
     v-bind="$attrs"
     @register="registerModal"
     :title="title"
@@ -9,10 +9,13 @@
     <template #footer>
       <a-button type="primary" @click="handleSubmit">关闭</a-button>
     </template>
+    <div style="display: flex">
+      <div class="w-2/5 xl:w-2/5">
+        <Description size="middle" title="运行语句" :bordered="false" />
         <div :class="`${prefixCls}__content`">
           <List>
             <template v-for="item in cardList" :key="item.id">
-          <List.Item class="list">
+              <List.Item class="list" @click="handleData(item)">
                 <List.Item.Meta>
                   <template #title>
                     <Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
@@ -34,14 +37,35 @@
             </template>
           </List>
         </div>
+      </div>
+      <div class="w-3/5 xl:w-3/5">
+        <Description size="middle" title="执行结果" :bordered="false" />
+        <BasicTable @register="registerTable" v-if="tableShow">
+          <template #footer>
+            <a-button type="primary" style="margin-right: 5px" @click="handleDownload"
+              >保存结果</a-button
+            >
+            <a-button type="primary" style="margin-right: 5px" @click="handleView"
+              >可视化分析</a-button
+            >
+          </template>
+        </BasicTable>
+      </div>
+    </div>
+    <viewModal @register="registerViewModal" />
   </BasicModal>
 </template>
 <script lang="ts" setup>
   import { onMounted, ref } from 'vue';
-  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicModal, useModal, useModalInner } from '@/components/Modal';
   import { Progress, List } from 'ant-design-vue';
-  import { cardList } from '../sqlDevelopmentData';
+  import { cardList, partitionData } from '../sqlDevelopmentData';
   import Icon from '@/components/Icon/Icon.vue';
+  import { BasicTable, useTable } from '@/components/Table';
+  import { partitionColumns } from '../data';
+  import { Description } from '@/components/Description';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import viewModal from './resultViewModal.vue';
 
   const prefixCls = 'list-basic';
 
@@ -49,13 +73,40 @@
 
   const emit = defineEmits(['success', 'register']);
   const title = ref();
+  const tableShow = ref(true);
+  const { createMessage } = useMessage();
+  const [registerViewModal, { openModal: openViewModal }] = useModal();
 
   //初始化弹框
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
     setModalProps({ confirmLoading: false });
     title.value = data.title;
   });
+  const [registerTable] = useTable({
+    dataSource: partitionData,
+    columns: partitionColumns,
+    pagination: false,
+    showIndexColumn: false,
+    scroll: { y: 300 },
+  });
 
+  function handleData(item) {
+    if (item.color === 'green') {
+      tableShow.value = true;
+    } else {
+      tableShow.value = false;
+    }
+  }
+
+  function handleDownload() {
+    createMessage.success('下载成功');
+  }
+
+  function handleView() {
+    openViewModal(true, {
+      title: '可视化分析',
+    });
+  }
   async function handleSubmit() {
     closeModal();
   }

src/views/scriptDevelopment/sqlDevelopment/sqlExecute/resultViewModal.vue

+<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>