dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(查询组件): 查询组件支持名称和组件间距调整。

Browse Source
This commit is contained in:
dataeaseShu 2024-06-13 16:11:00 +08:00
parent 1ed234442b
commit 40c26e6d52
9 changed files with 104 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/core-frontend/package.json
View File

@ -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",

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

@ -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;
}
}
}
}

4
core/core-frontend/src/custom-component/v-query/Select.vue
View File

@ -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()

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

@ -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;
}
}
}
}

105
core/core-frontend/src/custom-component/v-query/Time.vue
View File

@ -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(() => {

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

@ -407,7 +407,6 @@ export const dvMainStore = defineStore('dataVisualization', {
borderShow: false,
text,
textColorShow: false,
labelColorShow: false,
labelColor,
borderColor,
title: '',

2
core/core-frontend/src/utils/canvasStyle.ts
View File

@ -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)) {

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

@ -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>

4
core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
View File

@ -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 &&