mirror of
https://gitee.com/dromara/go-view.git
synced 2024-12-10 07:38:34 +08:00
fix: 修改data模块的数据调用和全局设定
This commit is contained in:
parent
890dd88b5f
commit
4d55e5a57b
@ -32,4 +32,7 @@ export const borderRadius = '6px'
|
||||
export const carouselInterval = 4000
|
||||
|
||||
// 工作台大屏背景图片大小限制(5M)
|
||||
export const backgroundImageSize = 5
|
||||
export const backgroundImageSize = 5
|
||||
|
||||
// 数据请求间隔
|
||||
export const requestInterval = 30
|
@ -118,7 +118,7 @@ export enum ChartEditStoreEnum {
|
||||
RECORD_CHART = 'recordChart',
|
||||
// 以下需要存储
|
||||
EDIT_CANVAS_CONFIG = 'editCanvasConfig',
|
||||
REQUEST_CONFIG = 'requestConfig',
|
||||
REQUEST_GLOBAL_CONFIG = 'requestGlobalConfig',
|
||||
COMPONENT_LIST = 'componentList',
|
||||
}
|
||||
|
||||
@ -130,15 +130,21 @@ export enum RequestDataTypeEnum {
|
||||
AJAX = 1,
|
||||
}
|
||||
|
||||
// 数据配置
|
||||
// 全局的图表请求配置
|
||||
export type RequestGlobalConfigType = {
|
||||
// 请求源地址
|
||||
requestOriginUrl?: string
|
||||
// 轮询时间
|
||||
requestInterval?: number
|
||||
}
|
||||
// 单个图表请求配置
|
||||
export type RequestConfigType = {
|
||||
// 获取数据的方式
|
||||
requestDataType: RequestDataTypeEnum
|
||||
// 请求方式 get/post/del/put/patch
|
||||
requestHttpType: RequestHttpEnum
|
||||
// 请求源地址
|
||||
// 去除源的 url
|
||||
requestUrl?: string
|
||||
requestInterval?: number
|
||||
}
|
||||
|
||||
// Store 类型
|
||||
@ -149,12 +155,12 @@ export interface ChartEditStoreType {
|
||||
[ChartEditStoreEnum.MOUSE_POSITION]: MousePositionType
|
||||
[ChartEditStoreEnum.TARGET_CHART]: TargetChartType
|
||||
[ChartEditStoreEnum.RECORD_CHART]?: RecordChartType
|
||||
[ChartEditStoreEnum.REQUEST_CONFIG]: RequestConfigType
|
||||
[ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType
|
||||
[ChartEditStoreEnum.COMPONENT_LIST]: CreateComponentType[]
|
||||
}
|
||||
|
||||
export interface ChartEditStorage {
|
||||
[ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
|
||||
[ChartEditStoreEnum.REQUEST_CONFIG]: RequestConfigType
|
||||
[ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType
|
||||
[ChartEditStoreEnum.COMPONENT_LIST]: CreateComponentType[]
|
||||
}
|
||||
|
@ -4,7 +4,7 @@ import { CreateComponentType } from '@/packages/index.d'
|
||||
import debounce from 'lodash/debounce'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { defaultTheme, globalThemeJson } from '@/settings/chartThemes/index'
|
||||
import { RequestHttpEnum } from '@/enums/httpEnum'
|
||||
import { requestInterval } from '@/settings/designSetting'
|
||||
// 记录记录
|
||||
import { useChartHistoryStoreStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
|
||||
import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
|
||||
@ -16,8 +16,7 @@ import {
|
||||
MousePositionType,
|
||||
TargetChartType,
|
||||
RecordChartType,
|
||||
RequestConfigType,
|
||||
RequestDataTypeEnum,
|
||||
RequestGlobalConfigType,
|
||||
EditCanvasConfigType
|
||||
} from './chartEditStore.d'
|
||||
|
||||
@ -86,11 +85,9 @@ export const useChartEditStore = defineStore({
|
||||
chartThemeSetting: globalThemeJson
|
||||
},
|
||||
// 数据请求处理(需存储给后端)
|
||||
requestConfig: {
|
||||
requestDataType: RequestDataTypeEnum.STATIC,
|
||||
requestHttpType: RequestHttpEnum.GET,
|
||||
requestUrl: undefined,
|
||||
requestInterval: 10
|
||||
requestGlobalConfig: {
|
||||
requestOriginUrl: '',
|
||||
requestInterval: requestInterval
|
||||
},
|
||||
// 图表数组(需存储给后端)
|
||||
componentList: []
|
||||
@ -114,8 +111,8 @@ export const useChartEditStore = defineStore({
|
||||
getRecordChart(): RecordChartType | undefined {
|
||||
return this.recordChart
|
||||
},
|
||||
getRequestConfig(): RequestConfigType {
|
||||
return this.requestConfig
|
||||
getRequestGlobalConfig(): RequestGlobalConfigType {
|
||||
return this.requestGlobalConfig
|
||||
},
|
||||
getComponentList(): CreateComponentType[] {
|
||||
return this.componentList
|
||||
@ -125,7 +122,7 @@ export const useChartEditStore = defineStore({
|
||||
return {
|
||||
[ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: this.getEditCanvasConfig,
|
||||
[ChartEditStoreEnum.COMPONENT_LIST]: this.getComponentList,
|
||||
[ChartEditStoreEnum.REQUEST_CONFIG]: this.getRequestConfig
|
||||
[ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: this.getRequestGlobalConfig
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -2,14 +2,14 @@
|
||||
<div class="go-chart-data-setting">
|
||||
<setting-item-box name="源地址" :alone="true">
|
||||
<n-input
|
||||
v-model:value="requestConfig.requestUrl"
|
||||
v-model:value.trim="chartEditStore.getRequestGlobalConfig.requestOriginUrl"
|
||||
placeholder="源地址如: http://127.0.0.1"
|
||||
></n-input>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="更新间隔">
|
||||
<n-input-number
|
||||
v-model:value="requestConfig.requestInterval"
|
||||
min="0"
|
||||
v-model:value.trim="chartEditStore.getRequestGlobalConfig.requestInterval"
|
||||
min="5"
|
||||
:show-button="false"
|
||||
placeholder="为 0 不更新"
|
||||
>
|
||||
@ -22,14 +22,9 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, Ref } from 'vue'
|
||||
import { SettingItemBox } from '@/components/ChartItemSetting/index'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
const requestConfig: Ref<RequestConfigType> = computed(() => {
|
||||
return chartEditStore.getRequestConfig
|
||||
})
|
||||
</script>
|
||||
|
@ -6,6 +6,9 @@
|
||||
:options="selectOptions"
|
||||
/>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="源地址:" :alone="true">
|
||||
<n-text type="info">{{ requestOriginUrl || '暂无' }}</n-text>
|
||||
</setting-item-box>
|
||||
<setting-item-box :alone="true">
|
||||
<template #name>
|
||||
地址
|
||||
@ -25,9 +28,9 @@
|
||||
</n-tooltip>
|
||||
</template>
|
||||
<n-input
|
||||
v-model:value="targetData.data.requestUrl"
|
||||
v-model:value.trim="targetData.data.requestUrl"
|
||||
:min="1"
|
||||
placeholder="http(s)://..."
|
||||
placeholder="请输入地址(去除源)"
|
||||
/>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="测试" :alone="true">
|
||||
@ -38,39 +41,34 @@
|
||||
<flash-icon />
|
||||
</n-icon>
|
||||
</template>
|
||||
发送地址请求
|
||||
发送请求
|
||||
</n-button>
|
||||
</n-space>
|
||||
</setting-item-box>
|
||||
<go-skeleton :load="loading" :repeat="3"></go-skeleton>
|
||||
<chart-data-matching-and-show
|
||||
v-show="showMatching && !loading"
|
||||
:targetData="targetData"
|
||||
:ajax="true"
|
||||
></chart-data-matching-and-show>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, ref } from 'vue'
|
||||
import { ref, toRefs } from 'vue'
|
||||
import { icon } from '@/plugins'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { SettingItemBox } from '@/components/ChartItemSetting/index'
|
||||
import { RequestHttpEnum } from '@/enums/httpEnum'
|
||||
import { SelectHttpType } from '../../index.d'
|
||||
import { featchMockData } from '@/api/mock'
|
||||
import { http } from '@/api/http'
|
||||
import { SelectHttpType } from '../../index.d'
|
||||
import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'
|
||||
import { useTargetData } from '../../../hooks/useTargetData.hook'
|
||||
|
||||
const { HelpOutlineIcon, FlashIcon } = icon.ionicons5
|
||||
|
||||
const props = defineProps({
|
||||
targetData: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { targetData, chartEditStore } = useTargetData()
|
||||
const { requestOriginUrl } = toRefs(chartEditStore.getRequestGlobalConfig)
|
||||
// 是否是开发环境
|
||||
const ISDEV = import.meta.env.DEV === true
|
||||
// 是否展示数据分析
|
||||
@ -92,16 +90,17 @@ const selectOptions: SelectHttpType[] = [
|
||||
// 发送请求
|
||||
const sendHandle = async () => {
|
||||
loading.value = true
|
||||
const { requestUrl, requestHttpType } = props.targetData.data
|
||||
if(!requestUrl) {
|
||||
const { requestUrl, requestHttpType } = targetData.value.data
|
||||
if (!requestUrl) {
|
||||
window['$message'].warning('请求参数不正确,请检查!')
|
||||
return
|
||||
}
|
||||
const res = await http(requestHttpType)((requestUrl as string).trim(), {})
|
||||
const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl
|
||||
const res = await http(requestHttpType)(completePath || '', {})
|
||||
loading.value = false
|
||||
if(res.status === 200) {
|
||||
if (res.status === 200) {
|
||||
// @ts-ignore
|
||||
props.targetData.option.dataset = res.data
|
||||
targetData.value.option.dataset = res.data
|
||||
showMatching.value = true
|
||||
return
|
||||
}
|
||||
@ -110,5 +109,6 @@ const sendHandle = async () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('chart-configurations-data-ajax') {}
|
||||
@include go('chart-configurations-data-ajax') {
|
||||
}
|
||||
</style>
|
||||
|
@ -64,17 +64,15 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, PropType } from 'vue'
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { icon } from '@/plugins'
|
||||
import { DataResultEnum, TimelineTitleEnum } from '../../index.d'
|
||||
import { useFile } from '../../hooks/useFile.hooks'
|
||||
import { useTargetData } from '../../../hooks/useTargetData.hook'
|
||||
const { targetData } = useTargetData()
|
||||
|
||||
const props = defineProps({
|
||||
targetData: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
},
|
||||
ajax: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
@ -90,7 +88,7 @@ const source = ref()
|
||||
const dimensions = ref()
|
||||
const dimensionsAndSource = ref()
|
||||
|
||||
const { uploadFileListRef, customRequest, beforeUpload, download} = useFile(props.targetData)
|
||||
const { uploadFileListRef, customRequest, beforeUpload, download} = useFile(targetData)
|
||||
|
||||
// 获取数据
|
||||
const getSource = computed(() => {
|
||||
@ -129,7 +127,7 @@ const dimensionsAndSourceHandle = () => {
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => props.targetData?.option?.dataset, (newData) => {
|
||||
watch(() => targetData.value?.option?.dataset, (newData) => {
|
||||
if (newData) {
|
||||
source.value = newData.source
|
||||
dimensions.value = newData.dimensions
|
||||
|
@ -1,8 +1,6 @@
|
||||
<template>
|
||||
<div class="go-chart-configurations-data-static">
|
||||
<chart-data-matching-and-show
|
||||
:targetData="targetData"
|
||||
></chart-data-matching-and-show>
|
||||
<chart-data-matching-and-show></chart-data-matching-and-show>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -6,7 +6,7 @@ import { readFile, downloadFile } from '@/utils'
|
||||
export const useFile = (targetData: any) => {
|
||||
const uploadFileListRef = ref()
|
||||
const option = toRef(targetData, 'option')
|
||||
console.log(option)
|
||||
|
||||
//@ts-ignore
|
||||
const beforeUpload = ({ file }) => {
|
||||
uploadFileListRef.value = []
|
||||
|
@ -10,10 +10,9 @@
|
||||
<!-- 静态 -->
|
||||
<chart-data-static
|
||||
v-if="targetData.data.requestDataType === RequestDataTypeEnum.STATIC"
|
||||
:targetData="targetData"
|
||||
></chart-data-static>
|
||||
<!-- 动态 -->
|
||||
<chart-data-ajax v-else :targetData="targetData"></chart-data-ajax>
|
||||
<chart-data-ajax></chart-data-ajax>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user