From 40c26e6d529ea6752f36699f9c6fd2c844eec640 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Thu, 13 Jun 2024 16:11:00 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=9F=A5=E8=AF=A2=E7=BB=84=E4=BB=B6):=20?=
 =?UTF-8?q?=E6=9F=A5=E8=AF=A2=E7=BB=84=E4=BB=B6=E6=94=AF=E6=8C=81=E5=90=8D?=
 =?UTF-8?q?=E7=A7=B0=E5=92=8C=E7=BB=84=E4=BB=B6=E9=97=B4=E8=B7=9D=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/core-frontend/package.json               |   2 +-
 .../custom-component/v-query/Component.vue    |  72 ++++++++----
 .../src/custom-component/v-query/Select.vue   |   4 +-
 .../custom-component/v-query/TextSearch.vue   |  31 ++++--
 .../src/custom-component/v-query/Time.vue     | 105 ++----------------
 .../modules/data-visualization/dvMain.ts      |   1 -
 core/core-frontend/src/utils/canvasStyle.ts   |   2 +-
 .../editor/editor-style/VQueryChartStyle.vue  |  17 +++
 .../views/components/ChartComponentS2.vue     |   4 +-
 9 files changed, 104 insertions(+), 134 deletions(-)

diff --git a/core/core-frontend/package.json b/core/core-frontend/package.json
index 57f0d3e610..b70396c3a4 100644
--- a/core/core-frontend/package.json
+++ b/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.10",
+    "element-plus-secondary": "^0.5.11",
     "element-resize-detector": "^1.2.4",
     "file-saver": "^2.0.5",
     "flv.js": "^1.6.2",
diff --git a/core/core-frontend/src/custom-component/v-query/Component.vue b/core/core-frontend/src/custom-component/v-query/Component.vue
index 32d255d686..752f4c532c 100644
--- a/core/core-frontend/src/custom-component/v-query/Component.vue
+++ b/core/core-frontend/src/custom-component/v-query/Component.vue
@@ -24,7 +24,6 @@ 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,
@@ -72,7 +71,6 @@ const defaultStyle = {
   textColorShow: false,
   bgColorShow: false,
   borderShow: false,
-  labelColorShow: false,
   labelShow: true,
   title: '',
   labelColor: '#1f2329',
@@ -91,6 +89,26 @@ const defaultStyle = {
 const customStyle = reactive({ ...defaultStyle })
 const snapshotStore = snapshotStoreWithOut()
 
+const btnStyle = computed(() => {
+  const style = {
+    backgroundColor: customStyle.btnColor,
+    borderColor: customStyle.btnColor,
+    color: customStyle.labelColorBtn
+  } as CSSProperties
+  if (customStyle.fontSizeBtn) {
+    style.fontSize = customStyle.fontSizeBtn + 'px'
+  }
+
+  if (customStyle.fontWeightBtn) {
+    style.fontWeight = customStyle.fontWeightBtn
+  }
+
+  if (customStyle.fontStyleBtn) {
+    style.fontStyle = customStyle.fontStyleBtn
+  }
+
+  return style
+})
 const curComponentView = computed(() => {
   return (canvasViewInfo.value[element.value.id] || {}).customStyle
 })
@@ -141,11 +159,11 @@ const setCustomStyle = val => {
   customStyle.fontSizeBtn = fontSizeBtn || '14'
   customStyle.fontWeightBtn = fontWeightBtn
   customStyle.fontStyleBtn = fontStyleBtn
-  customStyle.queryConditionWidth = queryConditionWidth || 227
-  customStyle.nameboxSpacing = nameboxSpacing || 8
-  customStyle.queryConditionSpacing = queryConditionSpacing || 16
+  customStyle.queryConditionWidth = queryConditionWidth ?? 227
+  customStyle.nameboxSpacing = nameboxSpacing ?? 8
+  customStyle.queryConditionSpacing = queryConditionSpacing ?? 16
   customStyle.labelColorBtn = labelColorBtn || '#ffffff'
-  customStyle.labelShow = labelShow || true
+  customStyle.labelShow = labelShow ?? true
   customStyle.btnColor = btnColor || '#3370ff'
 }
 
@@ -232,10 +250,14 @@ const queryDataForId = id => {
     emitter.emit(`query-data-${ele}`)
   })
 }
-
+const getQueryConditionWidth = () => {
+  return customStyle.queryConditionWidth
+}
 provide('unmount-select', unMountSelect)
 provide('release-unmount-select', releaseSelect)
 provide('query-data-for-id', queryDataForId)
+provide('com-width', getQueryConditionWidth)
+
 onBeforeUnmount(() => {
   emitter.off(`addQueryCriteria${element.value.id}`)
   emitter.off(`editQueryCriteria${element.value.id}`)
@@ -420,9 +442,21 @@ const titleStyle = computed(() => {
 })
 
 const labelStyle = computed(() => {
-  return {
-    color: customStyle.labelColor || '#1f2329'
+  const style = {
+    fontSize: customStyle.fontSize + 'px'
   } as CSSProperties
+  if (customStyle.fontWeight) {
+    style.fontWeight = customStyle.fontWeight
+  }
+
+  if (customStyle.fontStyle) {
+    style.fontStyle = customStyle.fontStyle
+  }
+
+  if (customStyle.labelColor) {
+    style.color = customStyle.labelColor
+  }
+  return style
 })
 const autoStyle = computed(() => {
   return {
@@ -464,9 +498,14 @@ const autoStyle = computed(() => {
         </div>
       </div>
       <div class="query-fields-container">
-        <div class="query-item" :key="ele.id" v-for="(ele, index) in listVisible">
+        <div
+          class="query-item"
+          :style="{ marginRight: `${customStyle.queryConditionSpacing}px` }"
+          :key="ele.id"
+          v-for="(ele, index) in listVisible"
+        >
           <div class="query-field">
-            <div class="label">
+            <div class="label" :style="{ marginRight: `${customStyle.nameboxSpacing}px` }">
               <div class="label-wrapper" v-show="customStyle.labelShow">
                 <div class="label-wrapper-text" :style="labelStyle">
                   <el-tooltip effect="dark" :content="ele.name" placement="top">
@@ -506,11 +545,7 @@ const autoStyle = computed(() => {
           <el-button
             @click.stop="queryData"
             style="margin-right: 7px"
-            :style="{
-              backgroundColor: customStyle.btnColor,
-              borderColor: customStyle.btnColor,
-              color: customStyle.labelColorBtn
-            }"
+            :style="btnStyle"
             v-if="customStyle.btnList.includes('sure')"
             type="primary"
           >
@@ -655,15 +690,10 @@ const autoStyle = computed(() => {
         position: relative;
 
         :deep(.ed-date-editor) {
-          width: 227px;
           .ed-input__wrapper {
             width: 100%;
           }
         }
-
-        :deep(.ed-select-v2) {
-          min-width: 170px;
-        }
       }
     }
   }
diff --git a/core/core-frontend/src/custom-component/v-query/Select.vue b/core/core-frontend/src/custom-component/v-query/Select.vue
index 4cea917edd..e36e79f6ad 100644
--- a/core/core-frontend/src/custom-component/v-query/Select.vue
+++ b/core/core-frontend/src/custom-component/v-query/Select.vue
@@ -69,6 +69,8 @@ const options = shallowRef([])
 const unMountSelect: Ref = inject('unmount-select')
 const releaseSelect = inject('release-unmount-select', Function, true)
 const queryDataForId = inject('query-data-for-id', Function, true)
+const queryConditionWidth = inject('com-width', Function, true)
+
 const setDefaultMapValue = arr => {
   const { displayId, field } = config.value
   if (!displayId) {
@@ -444,7 +446,7 @@ const init = () => {
 }
 
 const selectStyle = computed(() => {
-  return props.isConfig ? {} : { width: '227px' }
+  return props.isConfig ? {} : { width: queryConditionWidth() + 'px' }
 })
 
 const mult = ref()
diff --git a/core/core-frontend/src/custom-component/v-query/TextSearch.vue b/core/core-frontend/src/custom-component/v-query/TextSearch.vue
index d14d0c6645..fc21e05582 100644
--- a/core/core-frontend/src/custom-component/v-query/TextSearch.vue
+++ b/core/core-frontend/src/custom-component/v-query/TextSearch.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { toRefs, onBeforeMount, type PropType, inject } from 'vue'
+import { toRefs, onBeforeMount, type PropType, inject, computed } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 interface SelectConfig {
@@ -60,7 +60,15 @@ const setParams = () => {
 onBeforeMount(() => {
   setParams()
 })
+const queryConditionWidth = inject('com-width', Function, true)
 const customStyle = inject<{ background: string }>('$custom-style-filter')
+const selectStyle = computed(() => {
+  return { width: queryConditionWidth() + 'px' }
+})
+
+const lineWidth = computed(() => {
+  return { width: queryConditionWidth() - 15 + 'px' }
+})
 </script>
 
 <template>
@@ -75,8 +83,12 @@ const customStyle = inject<{ background: string }>('$custom-style-filter')
         <el-option v-for="ele in operators" :key="ele.value" :label="ele.label" :value="ele.value">
         </el-option>
       </el-select>
-      <el-input class="condition-value-input" v-model="config.conditionValueF" />
-      <div class="bottom-line"></div>
+      <el-input
+        :style="selectStyle"
+        class="condition-value-input"
+        v-model="config.conditionValueF"
+      />
+      <div :style="lineWidth" class="bottom-line"></div>
     </div>
     <div class="condition-type" v-if="[1, 2].includes(config.conditionType)">
       <sapn class="condition-type-tip">{{ config.conditionType === 1 ? '与' : '或' }}</sapn>
@@ -89,8 +101,12 @@ const customStyle = inject<{ background: string }>('$custom-style-filter')
         <el-option v-for="ele in operators" :key="ele.value" :label="ele.label" :value="ele.value">
         </el-option>
       </el-select>
-      <el-input class="condition-value-input" v-model="config.conditionValueS" />
-      <div class="bottom-line next-line"></div>
+      <el-input
+        :style="selectStyle"
+        class="condition-value-input"
+        v-model="config.conditionValueS"
+      />
+      <div :style="lineWidth" class="bottom-line next-line"></div>
     </div>
   </div>
 </template>
@@ -150,12 +166,7 @@ const customStyle = inject<{ background: string }>('$custom-style-filter')
       position: absolute;
       right: 5px;
       bottom: 3px;
-      width: 195px;
       z-index: 10;
-
-      &.next-line {
-        width: 195px;
-      }
     }
   }
 }
diff --git a/core/core-frontend/src/custom-component/v-query/Time.vue b/core/core-frontend/src/custom-component/v-query/Time.vue
index f3003a3eb1..7d6c764299 100644
--- a/core/core-frontend/src/custom-component/v-query/Time.vue
+++ b/core/core-frontend/src/custom-component/v-query/Time.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { toRefs, PropType, ref, onBeforeMount, watch, nextTick, computed } from 'vue'
+import { toRefs, PropType, ref, onBeforeMount, watch, nextTick, computed, inject } from 'vue'
 import { type DatePickType } from 'element-plus-secondary'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import type { ManipulateType } from 'dayjs'
@@ -81,101 +81,6 @@ watch(
     })
   }
 )
-const isInRange = (ele, startWindowTime, timeStamp) => {
-  const {
-    intervalType,
-    regularOrTrends,
-    regularOrTrendsValue,
-    relativeToCurrent,
-    timeNum,
-    relativeToCurrentType,
-    around,
-    dynamicWindow,
-    maximumSingleQuery,
-    timeNumRange,
-    relativeToCurrentTypeRange,
-    aroundRange
-  } = ele.timeRange || {}
-  let isDynamicWindowTime = false
-  const noTime = ele.timeGranularityMultiple.split('time').join('').split('range')[0]
-  const queryTimeType = noTime === 'date' ? 'day' : (noTime as ManipulateType)
-  if (startWindowTime && dynamicWindow) {
-    isDynamicWindowTime =
-      dayjs(startWindowTime)
-        .add(maximumSingleQuery, queryTimeType)
-        .startOf(queryTimeType)
-        .valueOf() -
-        1000 <
-      timeStamp
-  }
-
-  if (intervalType === 'none') {
-    if (dynamicWindow) return isDynamicWindowTime
-    return false
-  }
-  let startTime
-  if (relativeToCurrent === 'custom') {
-    startTime = getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
-  } else {
-    switch (relativeToCurrent) {
-      case 'thisYear':
-        startTime = getThisStart('year')
-        break
-      case 'lastYear':
-        startTime = getLastStart('year')
-        break
-      case 'thisMonth':
-        startTime = getThisStart('month')
-        break
-      case 'lastMonth':
-        startTime = getLastStart('month')
-        break
-      case 'today':
-        startTime = getThisStart('day')
-        break
-      case 'yesterday':
-        startTime = getLastStart('day')
-        break
-      case 'monthBeginning':
-        startTime = getThisStart('month')
-        break
-      case 'yearBeginning':
-        startTime = getThisStart('year')
-        break
-
-      default:
-        break
-    }
-  }
-  const startValue = regularOrTrends === 'fixed' ? regularOrTrendsValue : startTime
-  if (intervalType === 'start') {
-    return startWindowTime < +new Date(startValue) || isDynamicWindowTime
-  }
-
-  if (intervalType === 'end') {
-    return timeStamp > +new Date(startValue) || isDynamicWindowTime
-  }
-
-  if (intervalType === 'timeInterval') {
-    const startTime =
-      regularOrTrends === 'fixed'
-        ? regularOrTrendsValue[0]
-        : getAround(relativeToCurrentType, around === 'f' ? 'subtract' : 'add', timeNum)
-    const endTime =
-      regularOrTrends === 'fixed'
-        ? regularOrTrendsValue[1]
-        : getAround(
-            relativeToCurrentTypeRange,
-            aroundRange === 'f' ? 'subtract' : 'add',
-            timeNumRange
-          )
-    return (
-      startWindowTime < +new Date(startTime) - 1000 ||
-      timeStamp > +new Date(endTime) ||
-      isDynamicWindowTime
-    )
-  }
-}
 const callback = param => {
   startWindowTime.value = param[0]
   const disabled = param.some(ele => {
@@ -243,8 +148,14 @@ const init = () => {
   multiple.value = config.value.displayType === '7'
 }
 
+const queryConditionWidth = inject('com-width', Function, true)
 const selectStyle = computed(() => {
-  return props.isConfig ? {} : { width: multiple.value ? '470px' : '227px' }
+  return props.isConfig
+    ? {}
+    : {
+        width:
+          (multiple.value ? queryConditionWidth() * 2 : queryConditionWidth()) + 'px !important'
+      }
 })
 
 const columnsType = computed(() => {
diff --git a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
index cf39210314..bf89f26343 100644
--- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
@@ -407,7 +407,6 @@ export const dvMainStore = defineStore('dataVisualization', {
               borderShow: false,
               text,
               textColorShow: false,
-              labelColorShow: false,
               labelColor,
               borderColor,
               title: '',
diff --git a/core/core-frontend/src/utils/canvasStyle.ts b/core/core-frontend/src/utils/canvasStyle.ts
index 92942dbf59..feb3b8a232 100644
--- a/core/core-frontend/src/utils/canvasStyle.ts
+++ b/core/core-frontend/src/utils/canvasStyle.ts
@@ -475,7 +475,7 @@ interface CanvasViewInfo {
 }
 
 const colors = ['labelColor', 'borderColor', 'text', 'bgColor']
-const colorsSwitch = ['labelColorShow', 'borderShow', 'textColorShow', 'bgColorShow']
+const colorsSwitch = ['borderShow', 'textColorShow', 'bgColorShow']
 
 export function adaptCurThemeFilterStyleAllKeyComponent(component) {
   if (isFilterComponent(component.type)) {
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
index 7ad4374b07..02ea31c26c 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
@@ -49,6 +49,23 @@ const checkItalic = type => {
   chart.value.customStyle.component[type] = chart.value.customStyle.component[type] ? '' : 'italic'
 }
 const { chart, commonBackgroundPop } = toRefs(props)
+if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
+  chart.value.customStyle.component = {
+    ...chart.value.customStyle.component,
+    labelShow: true,
+    fontWeight: '',
+    fontStyle: '',
+    fontSize: '14',
+    fontSizeBtn: '14',
+    fontWeightBtn: '',
+    fontStyleBtn: '',
+    queryConditionWidth: 227,
+    nameboxSpacing: 8,
+    queryConditionSpacing: 16,
+    labelColorBtn: '#ffffff',
+    btnColor: '#3370ff'
+  }
+}
 </script>
 
 <template>
diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
index 5b265206d0..a2a2d321aa 100644
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
@@ -200,8 +200,8 @@ const setupPage = (chart: ChartObj, resetPageInfo?: boolean) => {
 
 const initScroll = () => {
   // 首先回到最顶部，然后计算行高*行数作为top，最后判断：如果top<数据量*行高，继续滚动，否则回到顶部
-  const customAttr = actualChart.customAttr
-  const senior = actualChart.senior
+  const customAttr = actualChart?.customAttr
+  const senior = actualChart?.senior
   if (
     senior?.scrollCfg?.open &&
     chartData.value.tableRow?.length &&