commit: 设计大屏增加SQL类型

gesilong
1 parent 7c519eb5
Showing 7 changed files with 219 additions and 43 deletions
src/api/external/common/index.ts
src/hooks/external/useChartDataFetch.hook.ts
src/packages/index.d.ts
src/store/modules/chartEditStore/chartEditStore.d.ts
src/views/chart/ContentConfigurations/components/ChartData/external/components/RequestModal/ComponentConfiguration.vue
src/views/chart/ContentConfigurations/components/ChartData/external/components/RequestModal/index.vue
src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteraction/index.vue
--- a/src/api/external/common/index.ts
View file @061eb6c
+++ b/src/api/external/common/index.ts
View file @061eb6c
@@ -23,6 +23,26 @@ enum Api {
   DEVICE_ATTR = '/device/attributes',
   ALARM_LIST = '/alarm',
   BASE_DELETE_URL = '/oss',
+  DATA_SQL = '/dbConnect',
+}
+
+//sql选择列表
+export const getDataViewSqlPage = (params: object) => {
+  return defHttp.get<PaginationResult<ConfigurationItemType>>({ url: `${Api.DATA_SQL}`, params })
+}
+//保存和更新组件SQL查询配置
+export const saveDictItemByCode = (params: object) => {
+  return defHttp.post<DictItem[]>({
+    url: `${Api.DATA_SQL}/saveDataSet`,
+    params: params
+  })
+}
+//预览大屏查询组件数据
+export const getDataView = (params: object) => {
+  return defHttp.post<DictItem[]>({
+    url: `${Api.DATA_SQL}/getDataView`,
+    params: params
+  })
 }
 export const getDictItemByCode = (value: string) => {
--- a/src/hooks/external/useChartDataFetch.hook.ts
View file @061eb6c
+++ b/src/hooks/external/useChartDataFetch.hook.ts
View file @061eb6c
@@ -13,6 +13,7 @@ import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEdi
 import { JSONParse, convertToCascadingData, findItemByLabel } from '@/utils/external/utils'
 import { CascaderOption } from 'naive-ui'
 import { useUserStore } from '@/store/external/modules/user'
+import {getDataView} from "@/api/external/common";
 // 获取类型
@@ -135,7 +136,13 @@ export const useChartDataFetch = (
                     const unit = targetInterval && targetInterval.value ? targetUnit.value :pondRequestGlobalIntervalUnit?.value?pondRequestGlobalIntervalUnit?.value: globalUnit.value
                     setInterval(handleExecuteRequest, intervalUnitHandle(time, (unit as unknown as any)))
                     //
-                    const res = await customRequest(toRaw(targetComponent.request))
+                    let res:any;
+                    if (targetComponent.request?.requestContentType === 1) {
+                        // @ts-ignore
+                        res = await getDataView({id: targetComponent.request?.id || '',paramMap:targetComponent.request?.requestParams?.Params})
+                    }else {
+                        res = await customRequest(toRaw(targetComponent.request))
+                    }
                     if (res) {
                         try {
                             const filter = targetComponent.filter
--- a/src/packages/index.d.ts
View file @061eb6c
+++ b/src/packages/index.d.ts
View file @061eb6c
@@ -198,6 +198,7 @@ export interface ChartCustomColor {
 export interface CreateComponentType extends PublicConfigType, requestConfig {
+  id?: string
   key: string
   chartConfig: ConfigType
   option: GlobalThemeJsonType
--- a/src/store/modules/chartEditStore/chartEditStore.d.ts
View file @061eb6c
+++ b/src/store/modules/chartEditStore/chartEditStore.d.ts
View file @061eb6c
@@ -218,6 +218,10 @@ export interface RequestConfigType extends RequestPublicConfigType {
   requestContentType: RequestContentTypeEnum
   // 请求体类型
   requestParamsBodyType: RequestBodyEnum
+  // 选择SQL请求 地址
+  sqlRequestHttpType: string
+  // 选择SQL请求 ID
+  requestSQLId: string
   // SQL 请求对象
   requestSQLContent: {
     sql: string
--- a/src/views/chart/ContentConfigurations/components/ChartData/external/components/RequestModal/ComponentConfiguration.vue
View file @061eb6c
+++ b/src/views/chart/ContentConfigurations/components/ChartData/external/components/RequestModal/ComponentConfiguration.vue
View file @061eb6c
 <script setup lang="ts">
 import { NInput, NInputNumber, NInputGroup, NSelect, SelectOption, NTabs, NTabPane } from 'naive-ui'
-import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting';
-import { selectTimeOptions, selectTypeOptions } from '../../../index.d';
-import { RequestBodyEnum, RequestContentTypeEnum, RequestDataTypeEnum, RequestHttpEnum, RequestHttpIntervalEnum, RequestParams } from '@/enums/httpEnum';
-import { ref, unref } from 'vue';
-import DefaultRequestContent from './DefaultRequestContent.vue';
-import SqlConfiguration from './SqlConfiguration.vue';
-import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d';
+import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { selectTimeOptions, selectTypeOptions } from '../../../index.d'
+import {
+  RequestBodyEnum,
+  RequestContentTypeEnum,
+  RequestDataTypeEnum,
+  RequestHttpEnum,
+  RequestHttpIntervalEnum,
+  RequestParams
+} from '@/enums/httpEnum'
+import { onMounted, ref, unref } from 'vue'
+import DefaultRequestContent from './DefaultRequestContent.vue'
+import SqlConfiguration from './SqlConfiguration.vue'
+import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { getDataViewSqlPage } from '@/api/external/common'
 const t = window['$t']
 const requestContentTypeRef = ref(RequestContentTypeEnum.DEFAULT)
 const requestHttpTypeRef = ref(RequestHttpEnum.GET)
+const sqlRequestHttpTypeRef = ref('')
+const requestSQLIdRef = ref('')
 const requestIntervalRef = ref<number | undefined>(20)
@@ -20,16 +30,23 @@ const requestIntervalUnitRef = ref(RequestHttpIntervalEnum.SECOND)
 const requestSQLContentRef = ref('select * from where')
-const requestParamsRef = ref({ Header: {}, Params: {}, Body: { 'form-data': {}, 'json': '', 'x-www-form-urlencoded': {}, 'xml': '' } } as RequestParams)
+const requestParamsRef = ref({
+  Header: {},
+  Params: {},
+  Body: { 'form-data': {}, json: '', 'x-www-form-urlencoded': {}, xml: '' }
+} as RequestParams)
 const requestParamsBodyTypeRef = ref(RequestBodyEnum.NONE)
 const requestUrlRef = ref<string>()
+const sqlSelectOptionsList = ref<SelectOption[]>([])
+
 const getConfigurationData = (): RequestConfigType => {
   return {
     requestContentType: unref(requestContentTypeRef),
     requestHttpType: unref(requestHttpTypeRef),
+    sqlRequestHttpType: unref(sqlRequestHttpTypeRef),
     requestInterval: unref(requestIntervalRef),
     requestIntervalUnit: unref(requestIntervalUnitRef),
     requestDataType: RequestDataTypeEnum.AJAX,
@@ -38,52 +55,113 @@ const getConfigurationData = (): RequestConfigType => {
       sql: unref(requestSQLContentRef)
     },
     requestParams: unref(requestParamsRef),
-    requestUrl: `${unref(requestUrlRef)}`
+    requestUrl: `${unref(requestUrlRef)}`,
+    requestSQLId: unref(requestSQLIdRef)
   }
 }
-
 const setConfigurationData = (request: RequestConfigType) => {
-  const { requestContentType, requestHttpType, requestInterval, requestIntervalUnit, requestParamsBodyType, requestSQLContent, requestParams, requestUrl } = request
+  const {
+    requestContentType,
+    requestHttpType,
+    requestInterval,
+    requestIntervalUnit,
+    requestParamsBodyType,
+    requestSQLContent,
+    requestParams,
+    requestUrl,
+    sqlRequestHttpType,
+    requestSQLId
+  } = request
+  sqlRequestHttpTypeRef.value = sqlRequestHttpType
   requestContentTypeRef.value = requestContentType
   requestHttpTypeRef.value = requestHttpType
   requestIntervalRef.value = requestInterval
   requestIntervalUnitRef.value = requestIntervalUnit
   requestParamsBodyTypeRef.value = requestParamsBodyType
   requestSQLContentRef.value = requestSQLContent.sql
-  requestParamsRef.value = requestParams 
+  requestParamsRef.value = requestParams
   requestUrlRef.value = requestUrl
+  requestSQLIdRef.value = requestSQLId
 }
 defineExpose({
   getConfigurationData,
-  setConfigurationData
+  setConfigurationData,
+  requestContentTypeRef
+})
+
+onMounted(() => {
+  getData({ page: 1, pageSize: 999 })
 })
+const getData = async (params: object) => {
+  const { items } = await getDataViewSqlPage(params)
+  const _list = items.map((item: any) => {
+    return {
+      label: item.name,
+      value: item.id
+    }
+  })
+
+  sqlSelectOptionsList.value = _list
+}
 </script>
 <template>
-  <SettingItemBox :name="t('external.data.address')" :itemRightStyle="{
-    gridTemplateColumns: '5fr 2fr 1fr'
-  }">
+  <SettingItemBox
+    v-if="requestContentTypeRef === RequestContentTypeEnum.DEFAULT"
+    :name="t('external.data.address')"
+    :itemRightStyle="{
+      gridTemplateColumns: '5fr 2fr 1fr'
+    }"
+  >
     <SettingItem :name="t('external.data.requestUrl')">
       <NInputGroup>
-        <NSelect v-model:value="requestHttpTypeRef" style="width: 150px;" size="small"
-          :options="(selectTypeOptions as SelectOption[])" />
-        <NInput v-model:value="requestUrlRef" class="select-time-number" size="small" min="0" :show-button="false"
-          :placeholder="t('external.data.placeURL')" />
+        <NSelect
+          v-model:value="requestHttpTypeRef"
+          style="width: 150px"
+          size="small"
+          :options="(selectTypeOptions as SelectOption[])"
+        />
+        <NInput
+          v-model:value="requestUrlRef"
+          class="select-time-number"
+          size="small"
+          min="0"
+          :show-button="false"
+          :placeholder="t('external.data.placeURL')"
+        />
       </NInputGroup>
     </SettingItem>
     <SettingItem :name="t('external.data.updateInterval')">
       <NInputGroup>
-        <NInputNumber v-model:value="requestIntervalRef" class="select-time-number" size="small" min="0"
-          :show-button="false" :placeholder="t('external.data.placeNumber')" />
+        <NInputNumber
+          v-model:value="requestIntervalRef"
+          class="select-time-number"
+          size="small"
+          min="0"
+          :show-button="false"
+          :placeholder="t('external.data.placeNumber')"
+        />
         <!-- 单位 -->
-        <NSelect v-model:value="requestIntervalUnitRef" class="select-time-options" size="small"
-          :options="(selectTimeOptions as SelectOption[])" />
+        <NSelect
+          v-model:value="requestIntervalUnitRef"
+          class="select-time-options"
+          size="small"
+          :options="(selectTimeOptions as SelectOption[])"
+        />
       </NInputGroup>
     </SettingItem>
   </SettingItemBox>
+  <SettingItemBox v-if="requestContentTypeRef === RequestContentTypeEnum.SQL" :name="t('external.data.address')">
+    <NSelect
+      v-model:value="sqlRequestHttpTypeRef"
+      style="width: 100%"
+      size="small"
+      :options="(sqlSelectOptionsList as SelectOption[])"
+    />
+  </SettingItemBox>
   <SettingItemBox :name="t('external.data.selectMode')">
     <NTabs v-model:value="requestContentTypeRef" type="segment" size="small">
       <NTabPane :name="RequestContentTypeEnum.DEFAULT" :tab="t('external.data.ordinary')" />
@@ -91,8 +169,14 @@ defineExpose({
     </NTabs>
   </SettingItemBox>
   <SettingItemBox>
-    <DefaultRequestContent v-if="requestContentTypeRef === RequestContentTypeEnum.DEFAULT"
-      v-model:value="requestParamsRef" v-model:request-params-body-type="requestParamsBodyTypeRef" />
-    <SqlConfiguration v-model:value="requestSQLContentRef" v-if="requestContentTypeRef === RequestContentTypeEnum.SQL" />
+    <DefaultRequestContent
+      v-if="requestContentTypeRef === RequestContentTypeEnum.DEFAULT"
+      v-model:value="requestParamsRef"
+      v-model:request-params-body-type="requestParamsBodyTypeRef"
+    />
+    <SqlConfiguration
+      v-model:value="requestSQLContentRef"
+      v-if="requestContentTypeRef === RequestContentTypeEnum.SQL"
+    />
   </SettingItemBox>
 </template>
--- a/src/views/chart/ContentConfigurations/components/ChartData/external/components/RequestModal/index.vue
View file @061eb6c
+++ b/src/views/chart/ContentConfigurations/components/ChartData/external/components/RequestModal/index.vue
View file @061eb6c
@@ -6,7 +6,7 @@ import { CreateComponentGroupType } from '@/packages/index.d'
 import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { NButton, NDivider, NModal, NSpace, NTag } from 'naive-ui'
-import { ref, unref, computed, nextTick } from 'vue'
+import { ref, unref, computed, nextTick, watch } from 'vue'
 import { PublicInterfaceForm } from '../PublicInterfaceForm'
 import ComponentConfiguration from './ComponentConfiguration.vue'
 import GlobalPublicConfiguration from './GlobalPublicConfiguration.vue'
@@ -16,12 +16,14 @@ import { useFetchTargetData } from '@/hooks/external/useFetchTargetData'
 import { useFilterFn } from '@/hooks/external/useFilterFn'
 import { JSONParse } from '@/utils/external/utils'
 import { isArray } from '@/utils/external/is'
+import {getDataView, saveDictItemByCode} from "@/api/external/common";
 const t = window['$t']
 const requestDataType = ref<RequestDataTypeEnum>(RequestDataTypeEnum.AJAX)
 const showModal = ref(false)
+const requestContentType = ref<number>(0)
 const chartEditStore = useChartEditStore()
@@ -34,6 +36,13 @@ const getRequestTypeName = computed(() => {
 })
 const { prefixCls } = useDesign('chart-data-request')
+watch(
+    () => componentConfigurationEl.value?.requestContentTypeRef,
+    (newVal) => {
+      requestContentType.value = newVal;
+    },
+    { immediate: true }
+)
 const openModal = async (flag = true, type: RequestDataTypeEnum) => {
   requestDataType.value = type
@@ -75,12 +84,17 @@ const getResult = () => {
 const { targetData } = useTargetData()
 const { fetchTargetData } = useFetchTargetData()
 // 发送请求
-const sendHandle = async () => {
-  if (!targetData.value?.request || !targetData.value.request.requestUrl) {
-    window['$message'].warning(t('external.data.configMethod'))
-    return
+const sendHandle = async (requestContentType: number,id?: string) => {
+  let res:any;
+  if (requestContentType !== 1) {
+    if (!targetData.value?.request || !targetData.value.request.requestUrl) {
+      window['$message'].warning(t('external.data.configMethod'))
+      return
+    }
+    res = await fetchTargetData()
+  }else {
+    res = await getDataView({id: id || ''})
   }
-  const res = await fetchTargetData()
   if (res) {
     const { value } = useFilterFn(targetData.value.filter, res)
      //分组更新下面子组件
@@ -99,11 +113,31 @@ const sendHandle = async () => {
     targetData.value.option.dataset = value
     return
   }
+  showModal.value = false
 }
 const handleSaveAction = async () => {
   if (!(await validate())) return
   let value = getResult()
+  let _dataId = ''
+  if (value?.requestContentType === 1) {
+    const params = {
+      id: value?.requestSQLId || '',
+      componentCode: value?.componentCode || 'componentCode',
+      connectId: value?.sqlRequestHttpType || '',
+      sql: value?.requestSQLContent?.sql || '',
+    }
+    const res:any = await saveDictItemByCode(params)
+    showModal.value = false
+
+    if (res) {
+      _dataId = res?.id
+      value = {
+        ...value,
+        id: res?.id
+      }
+    }
+  }
   value.pondRequestGlobalTokenKey = targetData.value.request.pondRequestGlobalTokenKey
   value.pondRequestGlobalTokenSuffix = targetData.value.request.pondRequestGlobalTokenSuffix
   value.pondRequestInterval = targetData.value.request.pondRequestInterval
@@ -123,10 +157,10 @@ const handleSaveAction = async () => {
       request: value as RequestConfigType
     })
   }
-  showModal.value = false
-  sendHandle()
+  sendHandle(value?.requestContentType,_dataId)
 }
+
 createRequestModalContext({
   requestDataType
 })
@@ -138,7 +172,7 @@ defineExpose({
 <template>
   <NModal :class="prefixCls" v-model:show="showModal" preset="card" style="width: 1000px" :title="t('common.requestConfig')">
-    <GlobalPublicConfiguration v-if="requestDataType === RequestDataTypeEnum.AJAX" />
+    <GlobalPublicConfiguration v-if="requestDataType === RequestDataTypeEnum.AJAX && requestContentType === 0" />
     <NDivider v-if="requestDataType === RequestDataTypeEnum.AJAX" />
     <ComponentConfiguration v-if="requestDataType === RequestDataTypeEnum.AJAX" ref="componentConfigurationEl" />
     <PublicInterfaceForm v-if="requestDataType === RequestDataTypeEnum.Pond" ref="publicInterfaceFormEl" />
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteraction/index.vue
View file @061eb6c
+++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteraction/index.vue
View file @061eb6c
@@ -112,11 +112,11 @@
     <div v-if="!interactActionsIsPageChange">
       <setting-item-box
         :name="requestParamsItem"
-        v-for="requestParamsItem in requestParamsTypeList"
+        v-for="requestParamsItem in (isCustomSqlRequest?.request?.requestContentType === 0 ? requestParamsTypeList:sqlRequestParamsTypeList)"
         :key="requestParamsItem"
       >
         <setting-item
-          v-for="(ovlValue, ovlKey, index) in fnGetRequest(item.interactComponentId, requestParamsItem)"
+          v-for="(ovlValue, ovlKey, index) in (isCustomSqlRequest?.request?.requestContentType === 0 ? fnGetRequest(item.interactComponentId, requestParamsItem) : fnGetSqlRequest(item.interactComponentId, isCustomSqlRequest?.request) )"
           :key="index"
           :name="`${ovlKey}`"
         >
@@ -125,7 +125,7 @@
             v-model:value="item.interactFn[ovlKey]"
             :options="fnDimensionsAndSource(item.interactOn, item.interactComponentId!, requestParamsItem)"
             clearable
-            multiple 
+            multiple
             @update:value="(value: string, options: Recordable[])=>handleSelectInteract(value,options,item.interactOn,requestParamsItem)"
           ></n-select>
         </setting-item>
@@ -143,11 +143,11 @@
 </template>
 <script lang="ts" setup>
-import { VNodeChild, computed } from 'vue'
+import {VNodeChild, computed, ref} from 'vue'
 import { SelectOption, SelectGroupOption } from 'naive-ui'
-import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
+import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { CreateComponentType, CreateComponentGroupType, ChartFrameEnum } from '@/packages/index.d'
-import { RequestParamsTypeEnum, RequestDataTypeEnum } from '@/enums/httpEnum'
+import { RequestParamsTypeEnum } from '@/enums/httpEnum'
 import { InteractEventOn, COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
 import { icon } from '@/plugins'
 import noData from '@/assets/images/canvas/noData.png'
@@ -158,9 +158,20 @@ import {PageChartEditStoreType} from '@/store/modules/chartEditStore/chartEditSt
 const { CloseIcon, AddIcon, HelpOutlineIcon } = icon.ionicons5
 const { targetData, chartEditStore } = useTargetData()
 const requestParamsTypeList = [RequestParamsTypeEnum.PARAMS, RequestParamsTypeEnum.BODY, RequestParamsTypeEnum.HEADER]
+const sqlRequestParamsTypeList = [RequestParamsTypeEnum.PARAMS]
+const selectEventsComponentId = ref('')
 const t = window['$t']
+// //判断是否 自定义sql请求
+const isCustomSqlRequest = computed(() => {
+  const eventsComponentId = selectEventsComponentId.value
+  const _getComponentList = chartEditStore.getComponentList
+  if (!eventsComponentId) return []
+
+  return _getComponentList.find( (item:any) => item.id === eventsComponentId)
+})
+
 // THINGS_KIT 修改多画布切换相关代码 用于切换画布
 const interactActionsIsPageChange =  computed(() => {
   const interactActions = targetData.value.interactActions
@@ -186,6 +197,7 @@ const option = computed(() => {
 // 绑定组件数据 request
 const fnGetRequest = (id: string | undefined, key: RequestParamsTypeEnum) => {
   if (!id) return {}
+  selectEventsComponentId.value = id;
   const globalConfigPindApr = chartEditStore.getRequestGlobalConfig.requestDataPond.find(item => {
     return item.dataPondId === id
   })?.dataPondRequestConfig.requestParams
@@ -193,6 +205,20 @@ const fnGetRequest = (id: string | undefined, key: RequestParamsTypeEnum) => {
   return chartEditStore.getComponentList[chartEditStore.fetchTargetIndex(id)]?.request.requestParams[key]
 }
+const fnGetSqlRequest = (id: string | undefined, request: any) => {
+  if (!id || !request) return {}
+  const sql = request?.requestSQLContent?.sql
+  // 1. 定义正则表达式匹配 ${...} 模式
+  const regex = /\$\{([a-zA-Z0-9_]+)\}/g;
+  const variables = [...new Set(Array.from(sql?.matchAll(regex), m => m[1]))];
+// 2. 转换为 { key: undefined } 格式
+  const result = variables.reduce((obj, key) => {
+    obj[key] = undefined;
+    return obj;
+  }, {});
+  return result
+}
+
 const handleSelectInteract = (value: string, options: SelectOption[], interactOn: InteractEventOn | undefined, requestParamsItem: RequestParamsTypeEnum | null) => {
   console.log(value)
   console.log(options)