fix(查询组件): 查询组件优化

core/core-frontend/config/dev.ts

@@ -8,7 +8,7 @@ export default {
       },
       // 使用 proxy 实例
       '/api': {
-        target: 'http://localhost:8100',
+        target: 'https://de2.fit2cloud.com',
         changeOrigin: true,
         rewrite: path => path.replace(/^\/api/, 'de2api')
       }

core/core-frontend/package.json

@@ -27,7 +27,7 @@
     "axios": "^1.3.3",
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.9",
-    "element-plus-secondary": "^0.5.9",
+    "element-plus-secondary": "^0.5.10",
     "element-resize-detector": "^1.2.4",
     "file-saver": "^2.0.5",
     "flv.js": "^1.6.2",

core/core-frontend/src/custom-component/v-query/Component.vue

@@ -24,6 +24,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { comInfo } from './com-info'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import StyleInject from './StyleInject.vue'
+import { backgroundSize } from 'html2canvas/dist/types/css/property-descriptors/background-size'
 const props = defineProps({
   view: {
     type: Object,
@@ -69,11 +70,23 @@ const defaultStyle = {
   titleShow: false,
   titleColor: '',
   textColorShow: false,
-  labelColor: '',
   bgColorShow: false,
   borderShow: false,
   labelColorShow: false,
-  title: ''
+  labelShow: true,
+  title: '',
+  labelColor: '#1f2329',
+  fontSize: '14',
+  fontWeight: '',
+  fontStyle: '',
+  fontSizeBtn: '14',
+  fontWeightBtn: '',
+  fontStyleBtn: '',
+  queryConditionWidth: 227,
+  nameboxSpacing: 8,
+  queryConditionSpacing: 16,
+  btnColor: '#3370ff',
+  labelColorBtn: '#ffffff'
 }
 const customStyle = reactive({ ...defaultStyle })
 const snapshotStore = snapshotStoreWithOut()
@@ -92,14 +105,25 @@ const setCustomStyle = val => {
     btnList,
     titleLayout,
     labelColor,
-    labelColorShow,
     text,
     bgColor,
     layout,
     titleShow,
     titleColor,
     textColorShow,
-    title
+    title,
+    fontSize,
+    fontWeight,
+    fontStyle,
+    fontSizeBtn,
+    fontWeightBtn,
+    fontStyleBtn,
+    queryConditionWidth,
+    nameboxSpacing,
+    queryConditionSpacing,
+    labelColorBtn,
+    btnColor,
+    labelShow
   } = val
   customStyle.background = bgColorShow ? bgColor || '' : ''
   customStyle.border = borderShow ? borderColor || '' : ''
@@ -107,10 +131,22 @@ const setCustomStyle = val => {
   customStyle.layout = layout
   customStyle.titleShow = titleShow
   customStyle.titleColor = titleColor
-  customStyle.labelColor = labelColorShow ? labelColor || '' : ''
+  customStyle.labelColor = labelShow ? labelColor || '' : ''
+  customStyle.fontSize = labelShow ? fontSize || '14' : '14'
+  customStyle.fontWeight = labelShow ? fontWeight || '' : ''
+  customStyle.fontStyle = labelShow ? fontStyle || '' : ''
   customStyle.title = title
   customStyle.text = textColorShow ? text || '' : ''
   customStyle.titleLayout = titleLayout
+  customStyle.fontSizeBtn = fontSizeBtn || '14'
+  customStyle.fontWeightBtn = fontWeightBtn
+  customStyle.fontStyleBtn = fontStyleBtn
+  customStyle.queryConditionWidth = queryConditionWidth || 227
+  customStyle.nameboxSpacing = nameboxSpacing || 8
+  customStyle.queryConditionSpacing = queryConditionSpacing || 16
+  customStyle.labelColorBtn = labelColorBtn || '#ffffff'
+  customStyle.labelShow = labelShow || true
+  customStyle.btnColor = btnColor || '#3370ff'
 }
 
 watch(
@@ -431,7 +467,7 @@ const autoStyle = computed(() => {
         <div class="query-item" :key="ele.id" v-for="(ele, index) in listVisible">
           <div class="query-field">
             <div class="label">
-              <div class="label-wrapper">
+              <div class="label-wrapper" v-show="customStyle.labelShow">
                 <div class="label-wrapper-text" :style="labelStyle">
                   <el-tooltip effect="dark" :content="ele.name" placement="top">
                     {{ ele.name }}
@@ -470,6 +506,11 @@ const autoStyle = computed(() => {
           <el-button
             @click.stop="queryData"
             style="margin-right: 7px"
+            :style="{
+              backgroundColor: customStyle.btnColor,
+              borderColor: customStyle.btnColor,
+              color: customStyle.labelColorBtn
+            }"
             v-if="customStyle.btnList.includes('sure')"
             type="primary"
           >

core/core-frontend/src/custom-component/v-query/TextSearch.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import { toRefs, onBeforeMount, type PropType, inject, type CSSProperties } from 'vue'
+import { toRefs, onBeforeMount, type PropType, inject } from 'vue'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { storeToRefs } from 'pinia'
 interface SelectConfig {
   conditionValueOperatorF: string
   conditionValueF: string
@@ -22,7 +24,8 @@ const operators = [
     value: 'like'
   }
 ]
-
+const dvMainStore = dvMainStoreWithOut()
+const { dvInfo } = storeToRefs(dvMainStore)
 const props = defineProps({
   config: {
     type: Object as PropType<SelectConfig>,
@@ -65,6 +68,7 @@ const customStyle = inject<{ background: string }>('$custom-style-filter')
     <div class="condition-type">
       <el-select
         class="condition-value-select"
+        :effect="dvInfo.type === 'dataV' ? 'dark' : ''"
         popper-class="condition-value-select-popper"
         v-model="config.conditionValueOperatorF"
       >
@@ -78,6 +82,7 @@ const customStyle = inject<{ background: string }>('$custom-style-filter')
       <sapn class="condition-type-tip">{{ config.conditionType === 1 ? '与' : '或' }}</sapn>
       <el-select
         class="condition-value-select"
+        :effect="dvInfo.type === 'dataV' ? 'dark' : ''"
         popper-class="condition-value-select-popper"
         v-model="config.conditionValueOperatorS"
       >

core/core-frontend/src/store/modules/data-visualization/dvMain.ts

@@ -417,7 +417,19 @@ export const dvMainStore = defineStore('dataVisualization', {
               titleColor,
               titleLayout,
               layout,
-              btnList: ['sure']
+              btnList: ['sure'],
+              fontSize: '14',
+              labelShow: true,
+              fontWeight: '',
+              fontStyle: '',
+              fontSizeBtn: '14',
+              fontWeightBtn: '',
+              fontStyleBtn: '',
+              queryConditionWidth: 227,
+              nameboxSpacing: 8,
+              queryConditionSpacing: 16,
+              labelColorBtn: '#ffffff',
+              btnColor: '#3370ff'
             }
           }
         }

core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue

@@ -1,11 +1,12 @@
 <script lang="tsx" setup>
 import { useI18n } from '@/hooks/web/useI18n'
-import { PropType, toRefs } from 'vue'
+import { PropType, toRefs, computed } from 'vue'
 import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
-const { t } = useI18n()
+import CollapseSwitchItem from '@/components/collapse-switch-item/src/CollapseSwitchItem.vue'
 
+const { t } = useI18n()
 const state = {
-  styleActiveNames: ['component']
+  styleActiveNames: ['basicStyle']
 }
 
 const props = defineProps({
@@ -26,16 +27,35 @@ const props = defineProps({
     default: 'dark'
   }
 })
+const toolTip = computed(() => {
+  return props.themes === 'dark' ? 'ndark' : 'dark'
+})
 const predefineColors = COLOR_PANEL
+const fontSizeList = []
+for (let i = 10; i <= 60; i = i + 2) {
+  fontSizeList.push({
+    name: i + '',
+    value: i + ''
+  })
+}
 
-const { element, chart, commonBackgroundPop } = toRefs(props)
+const checkBold = type => {
+  if (!chart.value.customStyle.component.labelShow) return
+  chart.value.customStyle.component[type] = chart.value.customStyle.component[type] ? '' : 'bold'
+}
+
+const checkItalic = type => {
+  if (!chart.value.customStyle.component.labelShow) return
+  chart.value.customStyle.component[type] = chart.value.customStyle.component[type] ? '' : 'italic'
+}
+const { chart, commonBackgroundPop } = toRefs(props)
 </script>
 
 <template>
   <div class="attr-style">
     <el-row class="de-collapse-style">
       <el-collapse v-model="state.styleActiveNames" class="style-collapse">
-        <el-collapse-item :effect="themes" name="component" :title="t('visualization.module')">
+        <el-collapse-item :effect="themes" name="basicStyle" :title="t('chart.basic_style')">
           <el-form label-position="top">
             <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
               <el-checkbox
@@ -95,29 +115,10 @@ const { element, chart, commonBackgroundPop } = toRefs(props)
                 :predefine="predefineColors"
               />
             </el-form-item>
-            <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
-              <el-checkbox
-                :effect="themes"
-                size="small"
-                v-model="chart.customStyle.component.labelColorShow"
-              >
-                标签颜色
-              </el-checkbox>
-            </el-form-item>
-            <el-form-item
-              class="form-item"
-              style="padding-left: 20px"
-              :class="'form-item-' + themes"
-            >
-              <el-color-picker
-                :effect="themes"
-                :trigger-width="108"
-                is-custom
-                v-model="chart.customStyle.component.labelColor"
-                :disabled="!chart.customStyle.component.labelColorShow"
-                :predefine="predefineColors"
-              />
-            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+        <el-collapse-item :effect="themes" name="addition" title="查询条件">
+          <el-form label-position="top">
             <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
               <el-checkbox
                 :effect="themes"
@@ -187,8 +188,134 @@ const { element, chart, commonBackgroundPop } = toRefs(props)
                 :predefine="predefineColors"
               />
             </el-form-item>
+            <el-form-item
+              :effect="themes"
+              class="form-item"
+              label="查询条件宽度"
+              :class="'form-item-' + themes"
+            >
+              <el-input-number
+                v-model="chart.customStyle.component.queryConditionWidth"
+                :min="0"
+                controls-position="right"
+              />
+            </el-form-item>
+            <el-form-item
+              :effect="themes"
+              class="form-item"
+              label="查询条件间距"
+              :class="'form-item-' + themes"
+            >
+              <el-input-number
+                v-model="chart.customStyle.component.queryConditionSpacing"
+                :min="0"
+                controls-position="right"
+              />
+            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+        <collapse-switch-item
+          :themes="themes"
+          v-model="chart.customStyle.component.labelShow"
+          name="legend"
+          title="查询条件名称"
+        >
+          <el-form
+            :class="!chart.customStyle.component.labelShow && 'is-disabled'"
+            :disabled="!chart.customStyle.component.labelShow"
+            label-position="top"
+          >
+            <el-form-item
+              :effect="themes"
+              class="form-item"
+              :label="t('visualization.position_adjust')"
+              :class="'form-item-' + themes"
+            >
+              <el-radio-group :effect="themes" v-model="chart.customStyle.component.layout">
+                <el-radio label="vertical"> 上侧 </el-radio>
+                <el-radio label="horizontal"> 左侧 </el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item
+              :label="t('chart.textColor')"
+              class="form-item margin-bottom-8"
+              :class="'form-item-' + themes"
+            >
+              <el-color-picker
+                :effect="themes"
+                is-custom
+                v-model="chart.customStyle.component.labelColor"
+                :predefine="predefineColors"
+              /><el-tooltip content="字号" :effect="toolTip" placement="top">
+                <el-select
+                  style="width: 80px; margin: 0 8px"
+                  :effect="themes"
+                  v-model="chart.customStyle.component.fontSize"
+                  :placeholder="t('chart.text_fontsize')"
+                  size="small"
+                >
+                  <el-option
+                    v-for="option in fontSizeList"
+                    :key="option.value"
+                    :label="option.name"
+                    :value="option.value"
+                  />
+                </el-select>
+              </el-tooltip>
+              <el-tooltip effect="dark" placement="bottom">
+                <template #content>
+                  {{ t('chart.bolder') }}
+                </template>
+                <div
+                  class="icon-btn"
+                  :class="{
+                    dark: themes === 'dark',
+                    active: chart.customStyle.component.fontWeight === 'bold'
+                  }"
+                  style="margin-right: 8px"
+                  @click="checkBold('fontWeight')"
+                >
+                  <el-icon>
+                    <Icon name="icon_bold_outlined" />
+                  </el-icon>
+                </div>
+              </el-tooltip>
 
-            <el-divider :effect="themes" class="m-divider" />
+              <el-tooltip effect="dark" placement="bottom">
+                <template #content>
+                  {{ t('chart.italic') }}
+                </template>
+                <div
+                  class="icon-btn"
+                  :class="{
+                    dark: themes === 'dark',
+                    active: chart.customStyle.component.fontStyle === 'italic'
+                  }"
+                  @click="checkItalic('fontStyle')"
+                >
+                  <el-icon>
+                    <Icon name="icon_italic_outlined" />
+                  </el-icon>
+                </div>
+              </el-tooltip>
+            </el-form-item>
+            <el-form-item
+              :effect="themes"
+              class="form-item"
+              label="名称与选框间距"
+              :class="'form-item-' + themes"
+            >
+              <el-input-number
+                v-model="chart.customStyle.component.nameboxSpacing"
+                :min="0"
+                :max="50"
+                controls-position="right"
+              />
+            </el-form-item>
+          </el-form>
+        </collapse-switch-item>
+        <el-collapse-item :effect="themes" name="button" :title="t('commons.button')">
+          <el-form label-position="top">
             <el-form-item
               :effect="themes"
               class="form-item"
@@ -207,55 +334,77 @@ const { element, chart, commonBackgroundPop } = toRefs(props)
                 </el-checkbox>
               </el-checkbox-group>
             </el-form-item>
+            <el-form-item class="form-item" label="按钮颜色" :class="'form-item-' + themes">
+              <el-color-picker
+                :effect="themes"
+                :trigger-width="108"
+                is-custom
+                v-model="chart.customStyle.component.btnColor"
+                :predefine="predefineColors"
+              />
+            </el-form-item>
             <el-form-item
-              :effect="themes"
-              class="form-item"
-              :label="t('chart.label_position')"
+              label="按钮文字"
+              class="form-item margin-bottom-8"
               :class="'form-item-' + themes"
             >
-              <el-radio-group
+              <el-color-picker
                 :effect="themes"
-                class="icon-radio-group"
-                v-model="chart.customStyle.component.layout"
-              >
-                <el-radio :effect="themes" label="vertical">
-                  <el-tooltip effect="dark" placement="top">
-                    <template #content>
-                      {{ t('chart.text_pos_top') }}
-                    </template>
-                    <div
-                      class="icon-btn"
-                      :class="{
-                        dark: themes === 'dark',
-                        active: chart.customStyle.component.layout === 'vertical'
-                      }"
-                    >
-                      <el-icon>
-                        <Icon name="icon_title-top-align_outlined" />
-                      </el-icon>
-                    </div>
-                  </el-tooltip>
-                </el-radio>
+                is-custom
+                v-model="chart.customStyle.component.labelColorBtn"
+                :predefine="predefineColors"
+              /><el-tooltip content="字号" :effect="toolTip" placement="top">
+                <el-select
+                  style="width: 80px; margin: 0 8px"
+                  :effect="themes"
+                  v-model="chart.customStyle.component.fontSizeBtn"
+                  :placeholder="t('chart.text_fontsize')"
+                  size="small"
+                >
+                  <el-option
+                    v-for="option in fontSizeList"
+                    :key="option.value"
+                    :label="option.name"
+                    :value="option.value"
+                  />
+                </el-select>
+              </el-tooltip>
+              <el-tooltip effect="dark" placement="bottom">
+                <template #content>
+                  {{ t('chart.bolder') }}
+                </template>
+                <div
+                  class="icon-btn"
+                  :class="{
+                    dark: themes === 'dark',
+                    active: chart.customStyle.component.fontWeightBtn === 'bold'
+                  }"
+                  style="margin-right: 8px"
+                  @click="checkBold('fontWeightBtn')"
+                >
+                  <el-icon>
+                    <Icon name="icon_bold_outlined" />
+                  </el-icon>
+                </div>
+              </el-tooltip>
 
-                <el-radio label="horizontal">
-                  <el-tooltip effect="dark" placement="top">
-                    <template #content>
-                      {{ t('chart.text_pos_left') }}
-                    </template>
-                    <div
-                      class="icon-btn"
-                      :class="{
-                        dark: themes === 'dark',
-                        active: chart.customStyle.component.layout === 'horizontal'
-                      }"
-                    >
-                      <el-icon>
-                        <Icon name="icon_title-left-align_outlined" />
-                      </el-icon>
-                    </div>
-                  </el-tooltip>
-                </el-radio>
-              </el-radio-group>
+              <el-tooltip effect="dark" placement="bottom">
+                <template #content>
+                  {{ t('chart.italic') }}
+                </template>
+                <div
+                  class="icon-btn"
+                  :class="{
+                    dark: themes === 'dark',
+                    active: chart.customStyle.component.fontStyleBtn === 'italic'
+                  }"
+                  @click="checkItalic('fontStyleBtn')"
+                >
+                  <el-icon>
+                    <Icon name="icon_italic_outlined" />
+                  </el-icon>
+                </div>
+              </el-tooltip>
             </el-form-item>
           </el-form>
         </el-collapse-item>

core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue

@@ -167,9 +167,13 @@ const showApiData = () => {
       const data = Base64.encode(JSON.stringify(apiItem))
       loading.value = true
       cancelMap['/datasource/checkApiDatasource']?.()
-      checkApiItem({ data: data, type: 'apiStructure' }).then(response => {
-        originFieldItem.jsonFields = response.data.jsonFields
-      })
+      checkApiItem({ data: data, type: 'apiStructure' })
+        .then(response => {
+          originFieldItem.jsonFields = response.data.jsonFields
+        })
+        .catch(error => {
+          console.log(error?.message)
+        })
       loading.value = false
     } else {
       return false
@@ -232,13 +236,18 @@ const next = () => {
         }
       }
       cancelMap['/datasource/checkApiDatasource']?.()
-      checkApiItem({ data: Base64.encode(JSON.stringify(apiItem)) }).then(response => {
-        apiItem.jsonFields = response.data.jsonFields
-        apiItem.fields = []
-        handleFiledChange(apiItem)
-        previewData()
-        active.value += 1
-      })
+
+      checkApiItem({ data: Base64.encode(JSON.stringify(apiItem)) })
+        .then(response => {
+          apiItem.jsonFields = response.data.jsonFields
+          apiItem.fields = []
+          handleFiledChange(apiItem)
+          previewData()
+          active.value += 1
+        })
+        .catch(error => {
+          console.log(error?.message)
+        })
     }
   })
 }