github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-24 16:22:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 处理请求展示的位置

Browse Source
This commit is contained in:
奔跑的面条 2022-07-16 20:57:01 +08:00
parent d1de5f0c4c
commit 740f471ff4
8 changed files with 142 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/hooks/useChartDataFetch.hook.ts
View File

@ -37,8 +37,15 @@ export const useChartDataFetch = (
} = toRefs(targetComponent.request)
// 非请求类型
if (requestDataType.value !== RequestDataTypeEnum.AJAX || !requestInterval) return
if (
requestDataType.value !== RequestDataTypeEnum.AJAX ||
!requestInterval ||
!requestInterval.value ||
!targetInterval ||
!targetInterval.value
)
return
try {
// 处理地址
// @ts-ignore

7
src/plugins/icon.ts
View File

@ -54,7 +54,8 @@ import {
Planet as PawIcon,
Search as SearchIcon,
ChevronUpOutline as ChevronUpOutlineIcon,
ChevronDownOutline as ChevronDownOutlineIcon
ChevronDownOutline as ChevronDownOutlineIcon,
Pulse as PulseIcon
} from '@vicons/ionicons5'
import {
@ -200,7 +201,9 @@ const ionicons5 = {
// 向上
ChevronUpOutlineIcon,
// 向下
ChevronDownOutlineIcon
ChevronDownOutlineIcon,
// 脉搏
PulseIcon
}
const carbon = {

157
src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
View File

@ -1,45 +1,42 @@
<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" />
</setting-item>
<setting-item name="默认使用全局间隔">
<n-input-number
v-model:value.trim="targetData.request.requestInterval"
min="5"
:show-button="false"
placeholder="可以为空"
>
<template #suffix> 秒 </template>
</n-input-number>
</setting-item>
</setting-item-box>
<n-card class="n-card-shallow">
<setting-item-box name="基础配置">
<setting-item name="请求方式">
<n-input size="small" :placeholder="requestHttpType || '暂无'" :disabled="true"></n-input>
</setting-item>
<setting-item-box name="源地址:" :alone="true">
<n-text type="info">{{ requestOriginUrl || '暂无' }}</n-text>
</setting-item-box>
<setting-item name="请求间隔">
<n-input size="small" :placeholder="requestInterval || '暂无'" :disabled="true">
<template #suffix> {{ SelectHttpTimeNameObj[requestIntervalUnit] }} </template>
</n-input>
</setting-item>
</setting-item-box>
<setting-item-box :alone="true">
<template #name>
地址
<n-tooltip trigger="hover" v-if="isDev()">
<template #trigger>
<n-icon size="21" :depth="3">
<help-outline-icon></help-outline-icon>
</n-icon>
<setting-item-box name="源地址" :alone="true">
<n-input size="small" :placeholder="requestOriginUrl || '暂无'" :disabled="true">
<template #prefix>
<n-icon :component="PulseIcon" />
</template>
<ul class="go-pl-0">
开发环境使用 mock 数据，请输入
<li v-for="item in apiList" :key="item.value">
<n-text type="info"> {{ item.value }} </n-text>
</li>
</ul>
</n-tooltip>
</template>
<n-input v-model:value.trim="targetData.request.requestUrl" :min="1" placeholder="请输入地址（去除源）" />
</setting-item-box>
</n-input>
</setting-item-box>
<setting-item-box name="组件地址" :alone="true">
<n-input size="small" :placeholder="requestUrl || '暂无'" :disabled="true">
<template #prefix>
<n-icon :component="FlashIcon" />
</template>
</n-input>
</setting-item-box>
<n-text depth="3">更新内容请点击配置</n-text>
<div class="edit-text" @click="requestModelHandle">
<div class="go-absolute-center">
<n-button type="primary" secondary>点击配置</n-button>
</div>
</div>
</n-card>
<setting-item-box :alone="true">
<template #name>
@ -53,16 +50,14 @@
默认赋值给 dataset 字段
</n-tooltip>
</template>
<n-space>
<n-button @click="sendHandle">
<template #icon>
<n-icon>
<flash-icon />
</n-icon>
</template>
发送请求
</n-button>
</n-space>
<n-button type="primary" ghost @click="sendHandle">
<template #icon>
<n-icon>
<flash-icon />
</n-icon>
</template>
发送请求
</n-button>
</setting-item-box>
<!-- 底部数据展示 -->
@ -77,9 +72,10 @@
<script setup lang="ts">
import { ref, toRefs, onBeforeUnmount, watchEffect } from 'vue'
import { icon } from '@/plugins'
import { useDesignStore } from '@/store/modules/designStore/designStore'
import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { ChartDataRequest } from '../ChartDataRequest/index'
import { RequestHttpEnum, ResultEnum } from '@/enums/httpEnum'
import { RequestHttpEnum, ResultEnum, SelectHttpTimeNameObj } from '@/enums/httpEnum'
import { chartDataUrl, rankListUrl, scrollBoardUrl, numberFloatUrl, numberIntUrl, textUrl, imageUrl } from '@/api/mock'
import { http } from '@/api/http'
import { SelectHttpType } from '../../index.d'
@ -87,51 +83,19 @@ import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'
import { useTargetData } from '../../../hooks/useTargetData.hook'
import { isDev, newFunctionHandle } from '@/utils'
const { HelpOutlineIcon, FlashIcon } = icon.ionicons5
const { HelpOutlineIcon, FlashIcon, PulseIcon } = icon.ionicons5
const { targetData, chartEditStore } = useTargetData()
const { requestUrl, requestHttpType, requestInterval, requestIntervalUnit } = toRefs(targetData.value.request)
const { requestOriginUrl } = toRefs(chartEditStore.getRequestGlobalConfig)
const designStore = useDesignStore()
const themeColor = ref(designStore.getAppTheme)
// 是否展示数据分析
const loading = ref(false)
const requestShow = ref(false)
const showMatching = ref(false)
let lastFilter: any = undefined
const apiList = [
{
value: `【图表】${chartDataUrl}`
},
{
value: `【文本】${textUrl}`
},
{
value: `【0~100 整数】${numberIntUrl}`
},
{
value: `【0~1小数】${numberFloatUrl}`
},
{
value: `【图片地址】${imageUrl}`
},
{
value: `【排名列表】${rankListUrl}`
},
{
value: `【滚动表格】${scrollBoardUrl}`
}
]
// 选项
const selectOptions: SelectHttpType[] = [
{
label: RequestHttpEnum.GET,
value: RequestHttpEnum.GET
},
{
label: RequestHttpEnum.POST,
value: RequestHttpEnum.POST
}
]
// 请求配置 model
const requestModelHandle = () => {
requestShow.value = true
@ -172,5 +136,28 @@ onBeforeUnmount(() => {
<style lang="scss" scoped>
@include go('chart-configurations-data-ajax') {
.n-card-shallow {
&.n-card {
@extend .go-background-filter;
}
.edit-text {
position: absolute;
top: 0px;
left: 0px;
width: 325px;
height: 254px;
cursor: pointer;
opacity: 0;
transition: all 0.3s;
@extend .go-background-filter;
backdrop-filter: blur(2px) !important;
}
&:hover {
border-color: v-bind('themeColor');
.edit-text {
opacity: 1;
}
}
}
}
</style>

4
src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue
View File

@ -25,7 +25,7 @@
</n-card>
</template>
<template v-else>
<n-button @click="addFilter">
<n-button class="go-ml-3" @click="addFilter">
<template #icon>
<n-icon>
<filter-icon />
@ -88,7 +88,7 @@
<n-space>
<n-button size="medium" @click="closeFilter">取消</n-button>
<n-button size="medium" type="primary" ghost @click="saveFilter">保存</n-button>
<n-button size="medium" type="primary" @click="saveFilter">保存</n-button>
</n-space>
</n-space>
</template>

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

@ -10,7 +10,7 @@
>
<!-- 源地址 -->
<setting-item name="前置 URL">
<n-input v-model:value.trim="requestOriginUrl" :disabled="editDisabled" placeholder="http://127.0.0.1/"></n-input>
<n-input v-model:value.trim="requestOriginUrl" :disabled="editDisabled" placeholder="例：http://127.0.0.1/"></n-input>
</setting-item>
<setting-item name="更新间隔（为 0 表示不更新）">
<n-input-group>
@ -32,7 +32,7 @@
/>
</n-input-group>
</setting-item>
<n-button v-show="editDisabled" type="primary" secondary @click="editDisabled = false">
<n-button v-show="editDisabled" type="primary" ghost @click="editDisabled = false">
<template #icon>
<n-icon>
<pencil-icon />

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

@ -2,11 +2,26 @@
<!-- 组件配置 -->
<n-divider class="go-my-3" title-placement="left"></n-divider>
<setting-item-box
name="组件"
:itemRightStyle="{
gridTemplateColumns: '5fr 2fr 1fr'
}"
>
<template #name>
地址
<n-tooltip trigger="hover" v-if="isDev()">
<template #trigger>
<n-icon size="21" :depth="3">
<help-outline-icon></help-outline-icon>
</n-icon>
</template>
<ul class="go-pl-0">
开发环境使用 mock 数据，请输入
<li v-for="item in apiList" :key="item.value">
<n-text type="info"> {{ item.value }} </n-text>
</li>
</ul>
</n-tooltip>
</template>
<setting-item name="请求方式 & URL 地址">
<n-input-group>
<n-select class="select-type-options" v-model:value="requestHttpType" :options="selectTypeOptions" />
@ -19,21 +34,21 @@
</n-input-group>
<!-- 组件url -->
</setting-item>
<setting-item name="默认使用全局间隔">
<setting-item name="更新间隔，为 0 则不请求">
<n-input-group>
<n-input-number
v-model:value.trim="requestInterval"
class="select-time-number"
min="1"
min="0"
:show-button="false"
placeholder="可以为空"
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">
<n-button ghost type="primary">
<template #icon>
<n-icon>
<flash-icon />
@ -43,7 +58,7 @@
</n-button>
</setting-item-box>
<setting-item-box name="选择方式" class="go-mt-0">
<request-header></request-header>
<request-header></request-header>
</setting-item-box>
</template>
@ -53,12 +68,38 @@ 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 { isDev } from '@/utils'
import { icon } from '@/plugins'
import { chartDataUrl, rankListUrl, scrollBoardUrl, numberFloatUrl, numberIntUrl, textUrl, imageUrl } from '@/api/mock'
const { FlashIcon } = icon.ionicons5
const { HelpOutlineIcon, FlashIcon } = icon.ionicons5
const { targetData, chartEditStore } = useTargetData()
const { requestOriginUrl } = toRefs(chartEditStore.getRequestGlobalConfig)
const { requestInterval, requestIntervalUnit, requestHttpType, requestUrl } = toRefs(targetData.value.request)
const apiList = [
{
value: `【图表】${chartDataUrl}`
},
{
value: `【文本】${textUrl}`
},
{
value: `【0~100 整数】${numberIntUrl}`
},
{
value: `【0~1小数】${numberFloatUrl}`
},
{
value: `【图片地址】${imageUrl}`
},
{
value: `【排名列表】${rankListUrl}`
},
{
value: `【滚动表格】${scrollBoardUrl}`
}
]
</script>
<style lang="scss" scoped>

5
src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue
View File

@ -19,7 +19,7 @@
<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-button type="primary" @click="closeHandle">确认</n-button>
</n-space>
</template>
</n-card>
@ -67,6 +67,9 @@ const closeHandle = () => {
& > .n-card__content {
padding-right: 0;
}
.n-card__content {
padding-bottom: 5px;
}
}
}
</style>

2
src/views/chart/ContentConfigurations/components/ChartData/index.vue
View File

@ -7,8 +7,6 @@
/>
</setting-item-box>
<n-divider style="margin: 10px 0;"></n-divider>
<!-- 静态 -->
<chart-data-static
v-if="targetData.request.requestDataType === RequestDataTypeEnum.STATIC"