feat: 编写请求配置页

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="go-chart-configurations-data-ajax">
+    <n-button type="primary" @click="requestModelHandle">配置请求</n-button>
     <setting-item-box name="配置">
       <setting-item name="类型">
         <n-select v-model:value="targetData.request.requestHttpType" :options="selectOptions" />
@@ -39,6 +40,7 @@
       </template>
       <n-input v-model:value.trim="targetData.request.requestUrl" :min="1" placeholder="请输入地址（去除源）" />
     </setting-item-box>
+
     <setting-item-box :alone="true">
       <template #name>
         测试
@@ -63,8 +65,12 @@
       </n-space>
     </setting-item-box>
 
+    <!-- 底部数据展示 -->
     <chart-data-matching-and-show :show="showMatching && !loading" :ajax="true"></chart-data-matching-and-show>
+    <!-- 骨架图 -->
     <go-skeleton :load="loading" :repeat="3"></go-skeleton>
+    <!-- 请求配置model -->
+    <chart-data-request v-model:modelShow="requestShow"></chart-data-request>
   </div>
 </template>
 
@@ -72,6 +78,7 @@
 import { ref, toRefs, onBeforeUnmount, watchEffect } from 'vue'
 import { icon } from '@/plugins'
 import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { ChartDataRequest } from '../ChartDataRequest/index'
 import { RequestHttpEnum, ResultEnum } from '@/enums/httpEnum'
 import { chartDataUrl, rankListUrl, scrollBoardUrl, numberFloatUrl, numberIntUrl, textUrl, imageUrl } from '@/api/mock'
 import { http } from '@/api/http'
@@ -85,6 +92,7 @@ const { targetData, chartEditStore } = useTargetData()
 const { requestOriginUrl } = toRefs(chartEditStore.getRequestGlobalConfig)
 // 是否展示数据分析
 const loading = ref(false)
+const requestShow = ref(false)
 const showMatching = ref(false)
 let lastFilter: any = undefined
 
@@ -124,6 +132,11 @@ const selectOptions: SelectHttpType[] = [
   }
 ]
 
+// 请求配置 model
+const requestModelHandle = () => {
+  requestShow.value = true
+}
+
 // 发送请求
 const sendHandle = async () => {
   loading.value = true

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue

@@ -88,7 +88,7 @@
 
           <n-space>
             <n-button size="medium" @click="closeFilter">取消</n-button>
-            <n-button size="medium" type="primary" @click="saveFilter">保存</n-button>
+            <n-button size="medium" type="primary" ghost @click="saveFilter">保存</n-button>
           </n-space>
         </n-space>
       </template>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalConfig/index.ts

@@ -0,0 +1,3 @@
+import RequestGlobalConfig from './index.vue'
+
+export { RequestGlobalConfig }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalConfig/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <!-- 全局配置 -->
+  <n-card class="n-card-shallow">
+    <n-tag type="info" :bordered="false"> 全局配置 </n-tag>
+    <setting-item-box
+      name="服务"
+      :itemRightStyle="{
+        gridTemplateColumns: '5fr 2fr 1fr'
+      }"
+    >
+      <!-- 源地址 -->
+      <setting-item name="前置 URL">
+        <n-input v-model:value.trim="requestOriginUrl" :disabled="disabled" placeholder="http://127.0.0.1/"></n-input>
+      </setting-item>
+      <setting-item name="更新间隔（为 0 表示不更新）">
+        <n-input-group>
+          <n-input-number
+            class="select-time-number"
+            v-model:value.trim="requestInterval"
+            min="0"
+            :show-button="false"
+            :disabled="disabled"
+            placeholder="请输入数字"
+          >
+          </n-input-number>
+          <!-- 单位 -->
+          <n-select
+            class="select-time-options"
+            v-model:value="requestIntervalUnit"
+            :options="selectTimeOptions"
+            :disabled="disabled"
+          />
+        </n-input-group>
+      </setting-item>
+      <n-button v-show="disabled" type="primary" secondary @click="disabled = false">
+        <template #icon>
+          <n-icon>
+            <pencil-icon />
+          </n-icon>
+        </template>
+        编辑配置
+      </n-button>
+    </setting-item-box>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs } from 'vue'
+import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
+import { selectTypeOptions, selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
+import { icon } from '@/plugins'
+
+const { PencilIcon } = icon.ionicons5
+const { targetData, chartEditStore } = useTargetData()
+const { requestOriginUrl, requestInterval, requestIntervalUnit } = toRefs(chartEditStore.getRequestGlobalConfig)
+const disabled = ref(true)
+</script>
+
+<style lang="scss" scoped>
+.select-time-number {
+  width: 100%;
+}
+.select-time-options {
+  width: 100px;
+}
+</style>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeader/index.ts

@@ -0,0 +1,3 @@
+import RequestHeader from './index.vue'
+
+export { RequestHeader }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeader/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <n-space vertical>
+    <div style="width: 600px">
+      <n-tabs v-model:value="requestContentType" type="segment" size="small">
+        <n-tab :name="RequestContentTypeEnum.DEFAULT" tab="普通请求"> </n-tab>
+        <n-tab :name="RequestContentTypeEnum.SQL" tab="SQL 请求"> </n-tab>
+      </n-tabs>
+    </div>
+    <div v-show="requestContentType === RequestContentTypeEnum.DEFAULT">
+      <n-tabs type="line" animated>
+        <n-tab v-for="item in RequestParamsTypeEnum" :key="item" :name="item" :tab="item"> {{ item }} </n-tab>
+      </n-tabs>
+    </div>
+    <div v-show="requestContentType === RequestContentTypeEnum.SQL">
+      <setting-item-box name="键名">
+        <n-input v-model:value.trim="sqlObject.key" :min="1" placeholder="请输入内容" />
+      </setting-item-box>
+      <setting-item-box name="键值">
+        <monaco-editor v-model:modelValue="sqlObject.value" width="600px" height="200px" language="sql" />
+      </setting-item-box>
+    </div>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, toRefs } from 'vue'
+import { RequestParamsTypeEnum, RequestContentTypeEnum ,RequestBodyEnum } from '@/enums/httpEnum'
+import { MonacoEditor } from '@/components/Pages/MonacoEditor'
+import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
+
+const { targetData, chartEditStore } = useTargetData()
+
+const { requestContentType } = toRefs(targetData.value.request)
+
+const tabValue = ref(RequestParamsTypeEnum.NONE)
+const sqlObject = reactive({
+  key: 'sql',
+  value: 'select * from  where'
+})
+</script>
+
+<style lang="scss" scoped>
+.select-type {
+  width: 300px;
+}
+</style>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeaderTable/index.ts

@@ -0,0 +1,3 @@
+import RequestHeaderTable from './index.vue'
+
+export { RequestHeaderTable }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeaderTable/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <n-scrollbar style="max-height: 250px"> 
+    <n-h1>2321</n-h1>
+  </n-scrollbar>
+</template>
+
+<script setup lang="ts">
+import { RequestBodyEnum, RequestParamsTypeEnum } from '@/enums/httpEnum'
+</script>
+
+<style lang="scss" scoped></style>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.ts

@@ -0,0 +1,3 @@
+import RequestTargetConfig from './index.vue'
+
+export { RequestTargetConfig }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <!-- 组件配置 -->
+  <n-divider class="go-my-3" title-placement="left"></n-divider>
+  <setting-item-box
+    name="组件"
+    :itemRightStyle="{
+      gridTemplateColumns: '5fr 2fr 1fr'
+    }"
+  >
+    <setting-item name="请求 URL">
+      <n-input-group>
+        <n-select class="select-type-options" v-model:value="requestHttpType" :options="selectTypeOptions" />
+        <n-input v-model:value.trim="requestUrl" :min="1" placeholder="请输入地址（去除源）">
+          <template #prefix>
+            <n-text>{{ requestOriginUrl }}</n-text>
+            <n-divider vertical />
+          </template>
+        </n-input>
+      </n-input-group>
+      <!-- 组件url -->
+    </setting-item>
+    <setting-item name="默认使用全局间隔">
+      <n-input-group>
+        <n-input-number
+          v-model:value.trim="requestInterval"
+          class="select-time-number"
+          min="5"
+          :show-button="false"
+          placeholder="可以为空"
+        >
+        </n-input-number>
+        <!-- 单位 -->
+        <n-select class="select-time-options" v-model:value="requestIntervalUnit" :options="selectTimeOptions" />
+      </n-input-group>
+    </setting-item>
+    <n-button secondary type="primary">
+      <template #icon>
+        <n-icon>
+          <flash-icon />
+        </n-icon>
+      </template>
+      发送请求
+    </n-button>
+  </setting-item-box>
+  <setting-item-box name="选择方式" class="go-mt-0">
+    <request-header></request-header>
+  </setting-item-box>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs } from 'vue'
+import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
+import { selectTypeOptions, selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
+import { RequestHeader } from '../RequestHeader'
+import { icon } from '@/plugins'
+
+const { PencilIcon, FlashIcon } = icon.ionicons5
+const { targetData, chartEditStore } = useTargetData()
+const { requestOriginUrl } = toRefs(chartEditStore.getRequestGlobalConfig)
+const { requestInterval, requestIntervalUnit, requestHttpType, requestUrl } = toRefs(targetData.value.request)
+const disabled = ref(true)
+</script>
+
+<style lang="scss" scoped>
+.select-time-number {
+  width: 100%;
+}
+.select-time-options {
+  width: 100px;
+}
+.select-type-options {
+  width: 120px;
+}
+</style>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.ts

@@ -0,0 +1,3 @@
+import ChartDataRequest from './index.vue'
+
+export { ChartDataRequest }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <n-modal class="go-chart-data-request" v-model:show="modelShow" :mask-closable="false" @afterLeave="closeHandle">
+    <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 800px">
+      <template #header></template>
+      <template #header-extra> </template>
+      <n-space vertical>
+        <request-global-config></request-global-config>
+        <request-target-config></request-target-config>
+      </n-space>
+      <!-- 底部 -->
+      <template #action>
+        <n-space justify="space-between">
+          <div>
+            <n-text>「 柱状图 」</n-text>
+            <n-text>—— </n-text>
+            <n-tag type="primary" :bordered="false"> {{requestContentTypeObj[requestContentType]}} </n-tag>
+          </div>
+          <n-button type="primary" ghost @click="closeHandle">关闭</n-button>
+        </n-space>
+      </template>
+    </n-card>
+  </n-modal>
+</template>
+
+<script script lang="ts" setup>
+import { toRefs } from 'vue'
+import { RequestContentTypeEnum } from '@/enums/httpEnum'
+import { useTargetData } from '../../../hooks/useTargetData.hook'
+import { RequestGlobalConfig } from './components/RequestGlobalConfig'
+import { RequestTargetConfig } from './components/RequestTargetConfig'
+
+const emit = defineEmits(['update:modelShow'])
+
+const { targetData, chartEditStore } = useTargetData()
+// 解构基础配置
+const { requestContentType } = toRefs(targetData.value.request)
+
+const requestContentTypeObj = {
+  [RequestContentTypeEnum.DEFAULT]: '普通请求',
+  [RequestContentTypeEnum.SQL]: 'SQL 请求',
+}
+
+defineProps({
+  modelShow: Boolean
+})
+
+const closeHandle = () => {
+  emit('update:modelShow', false)
+}
+</script>
+
+<style lang="scss" scoped>
+@include go('chart-data-request') {
+  &.n-card.n-modal,
+  .n-card {
+    @extend .go-background-filter;
+  }
+  .n-card-shallow {
+    background-color: rgba(0, 0, 0, 0) !important;
+  }
+}
+</style>

src/views/chart/ContentConfigurations/components/ChartData/index.d.ts

@@ -1,4 +1,4 @@
-import { RequestHttpEnum, RequestDataTypeEnum } from '@/enums/httpEnum'
+import { RequestHttpEnum, RequestHttpIntervalEnum, RequestDataTypeEnum, SelectHttpTimeNameObj } from '@/enums/httpEnum'
 
 // 匹配结果
 export enum DataResultEnum {
@@ -24,9 +24,81 @@ export interface SelectCreateDataType {
   disabled?: boolean
 }
 
-// ajax 请求
+// ajax 请求类型
 export interface SelectHttpType {
   label: RequestHttpEnum
   value: RequestHttpEnum
   disabled?: boolean
+  style?: object
 }
+
+// 类型选项
+export const selectTypeOptions: SelectHttpType[] = [
+  {
+    label: RequestHttpEnum.GET,
+    value: RequestHttpEnum.GET,
+    style: {
+      color: 'greenyellow',
+      fontWeight: 'bold'
+    }
+  },
+  {
+    label: RequestHttpEnum.POST,
+    value: RequestHttpEnum.POST,
+    style: {
+      color: 'skyblue',
+      fontWeight: 'bold'
+    }
+  },
+  {
+    label: RequestHttpEnum.PUT,
+    value: RequestHttpEnum.PUT,
+    style: {
+      color: 'goldenrod',
+      fontWeight: 'bold'
+    }
+  },
+  {
+    label: RequestHttpEnum.PATCH,
+    value: RequestHttpEnum.PATCH,
+    style: {
+      color: 'violet',
+      fontWeight: 'bold'
+    }
+  },
+  {
+    label: RequestHttpEnum.DELETE,
+    value: RequestHttpEnum.DELETE,
+    disabled: true,
+    style: {
+      fontWeight: 'bold'
+    }
+  },
+]
+
+// ajax 请求间隔
+export interface SelectHttpTimeType {
+  label: string
+  value: RequestHttpIntervalEnum
+  disabled?: boolean
+}
+
+// 时间选项
+export const selectTimeOptions: SelectHttpTimeType[] = [
+  {
+    label: SelectHttpTimeNameObj[RequestHttpIntervalEnum.SECOND],
+    value: RequestHttpIntervalEnum.SECOND
+  },
+  {
+    label: SelectHttpTimeNameObj[RequestHttpIntervalEnum.MINUTE],
+    value: RequestHttpIntervalEnum.MINUTE
+  },
+  {
+    label: SelectHttpTimeNameObj[RequestHttpIntervalEnum.HOUR],
+    value: RequestHttpIntervalEnum.HOUR
+  },
+  {
+    label: SelectHttpTimeNameObj[RequestHttpIntervalEnum.DAY],
+    value: RequestHttpIntervalEnum.DAY
+  },
+]