mirror of
https://github.com/dataease/dataease.git
synced 2025-02-24 19:42:56 +08:00
fix: eslint fix
This commit is contained in:
parent
0c65938e5a
commit
ea82cd89c3
@ -19,7 +19,7 @@ const emit = defineEmits(['update:modelValue', 'modelChange'])
|
|||||||
const { changeModel, title, themes } = toRefs(props)
|
const { changeModel, title, themes } = toRefs(props)
|
||||||
|
|
||||||
const collapseItem = ref()
|
const collapseItem = ref()
|
||||||
const onSwitchChange = e => {
|
const onSwitchChange = () => {
|
||||||
emit('modelChange', changeModel.value)
|
emit('modelChange', changeModel.value)
|
||||||
if (!props.modelValue && !collapseItem.value.isActive) {
|
if (!props.modelValue && !collapseItem.value.isActive) {
|
||||||
collapseItem.value.handleHeaderClick()
|
collapseItem.value.handleHeaderClick()
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useAttrs, computed, h } from 'vue'
|
import { useAttrs, computed } from 'vue'
|
||||||
import { hIcon } from '@/components/icon-custom'
|
import { hIcon } from '@/components/icon-custom'
|
||||||
const attrs = useAttrs()
|
const attrs = useAttrs()
|
||||||
const props = defineProps(['modelValue'])
|
const props = defineProps(['modelValue'])
|
||||||
|
@ -3,11 +3,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
|||||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import { nextTick, onMounted, reactive, ref } from 'vue'
|
import { nextTick, onMounted, reactive, ref } from 'vue'
|
||||||
import {
|
import { DEFAULT_COLOR_CASE } from '@/views/chart/components/editor/util/chart'
|
||||||
COLOR_CASES,
|
|
||||||
COLOR_PANEL,
|
|
||||||
DEFAULT_COLOR_CASE
|
|
||||||
} from '@/views/chart/components/editor/util/chart'
|
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
import DeSlider from '@/components/dashboard/subject-setting/pre-subject/Slider.vue'
|
import DeSlider from '@/components/dashboard/subject-setting/pre-subject/Slider.vue'
|
||||||
import OverallSetting from '@/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue'
|
import OverallSetting from '@/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue'
|
||||||
@ -24,25 +20,9 @@ const dvMainStore = dvMainStoreWithOut()
|
|||||||
const snapshotStore = snapshotStoreWithOut()
|
const snapshotStore = snapshotStoreWithOut()
|
||||||
const { canvasStyleData, componentData, canvasViewInfo } = storeToRefs(dvMainStore)
|
const { canvasStyleData, componentData, canvasViewInfo } = storeToRefs(dvMainStore)
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const files = ref(null)
|
|
||||||
const maxImageSize = 15000000
|
|
||||||
let initReady = false
|
|
||||||
|
|
||||||
const options = ref({
|
|
||||||
color: '颜色',
|
|
||||||
opacity: '不透明度',
|
|
||||||
backgroundColor: '背景色',
|
|
||||||
fontSize: '字体大小'
|
|
||||||
})
|
|
||||||
const fileList = ref([])
|
|
||||||
const dialogImageUrl = ref('')
|
|
||||||
const dialogVisible = ref(false)
|
|
||||||
const uploadDisabled = ref(false)
|
|
||||||
let canvasAttrInit = false
|
let canvasAttrInit = false
|
||||||
const canvasAttrActiveNames = ref(['style'])
|
const canvasAttrActiveNames = ref(['style'])
|
||||||
|
|
||||||
const colorCases = COLOR_CASES
|
|
||||||
const predefineColors = COLOR_PANEL
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE)),
|
colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE)),
|
||||||
customColor: null,
|
customColor: null,
|
||||||
@ -58,22 +38,12 @@ const onSubjectChange = () => {
|
|||||||
state.collapseShow = true
|
state.collapseShow = true
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const sliderReload = () => {
|
|
||||||
state.sliderShow = false
|
|
||||||
nextTick(() => {
|
|
||||||
state.sliderShow = true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const dataMerge = () => {
|
const dataMerge = () => {
|
||||||
adaptCurThemeCommonStyleAll()
|
adaptCurThemeCommonStyleAll()
|
||||||
snapshotStore.recordSnapshotCache('renderChart')
|
snapshotStore.recordSnapshotCache('renderChart')
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleChange = val => {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
const onColorChange = val => {
|
const onColorChange = val => {
|
||||||
themeAttrChange('customAttr', 'color', val)
|
themeAttrChange('customAttr', 'color', val)
|
||||||
}
|
}
|
||||||
|
@ -1,15 +1,8 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import ComponentGroup from '../visualization/ComponentGroup.vue'
|
import ComponentGroup from '../visualization/ComponentGroup.vue'
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
|
||||||
import { storeToRefs } from 'pinia'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import UserViewGroup from '../../custom-component/component-group/UserViewGroup.vue'
|
import UserViewGroup from '../../custom-component/component-group/UserViewGroup.vue'
|
||||||
import TextGroup from '@/custom-component/component-group/TextGroup.vue'
|
import TextGroup from '@/custom-component/component-group/TextGroup.vue'
|
||||||
import MediaGroup from '@/custom-component/component-group/MediaGroup.vue'
|
import MediaGroup from '@/custom-component/component-group/MediaGroup.vue'
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
|
||||||
const { canvasStyleData } = storeToRefs(dvMainStore)
|
|
||||||
let scale = ref(canvasStyleData.value.scale)
|
|
||||||
let timer = null
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<el-row class="custom-main">
|
<el-row class="custom-main">
|
||||||
|
@ -8,7 +8,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { nextTick, toRefs } from 'vue'
|
import { nextTick, toRefs } from 'vue'
|
||||||
import eventBus from '@/utils/eventBus'
|
import eventBus from '@/utils/eventBus'
|
||||||
import { isPreventDrop } from '@/utils/utils'
|
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
|
|
||||||
@ -38,7 +37,7 @@ const props = defineProps({
|
|||||||
|
|
||||||
const { item, index } = toRefs(props)
|
const { item, index } = toRefs(props)
|
||||||
|
|
||||||
const dragUp = e => {
|
const dragUp = () => {
|
||||||
// 将当前点击组件的事件传播出去
|
// 将当前点击组件的事件传播出去
|
||||||
nextTick(() => eventBus.emit('componentClick'))
|
nextTick(() => eventBus.emit('componentClick'))
|
||||||
dvMainStore.setInEditorStatus(true)
|
dvMainStore.setInEditorStatus(true)
|
||||||
|
@ -1,11 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus-secondary'
|
import { ElMessage, ElMessageBox } from 'element-plus-secondary'
|
||||||
import eventBus from '@/utils/eventBus'
|
import eventBus from '@/utils/eventBus'
|
||||||
import { $, deepCopy } from '@/utils/utils'
|
import { deepCopy } from '@/utils/utils'
|
||||||
import { nextTick, reactive, ref, computed } from 'vue'
|
import { nextTick, reactive, ref, computed } from 'vue'
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||||
import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
|
|
||||||
import { lockStoreWithOut } from '@/store/modules/data-visualization/lock'
|
|
||||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import Icon from '../icon-custom/src/Icon.vue'
|
import Icon from '../icon-custom/src/Icon.vue'
|
||||||
@ -26,21 +24,13 @@ import { copyStoreWithOut } from '@/store/modules/data-visualization/copy'
|
|||||||
import TabsGroup from '@/custom-component/component-group/TabsGroup.vue'
|
import TabsGroup from '@/custom-component/component-group/TabsGroup.vue'
|
||||||
import DeResourceGroupOpt from '@/views/common/DeResourceGroupOpt.vue'
|
import DeResourceGroupOpt from '@/views/common/DeResourceGroupOpt.vue'
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const isShowPreview = ref(false)
|
|
||||||
const isScreenshot = ref(false)
|
|
||||||
let timer = null
|
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
const composeStore = composeStoreWithOut()
|
|
||||||
const lockStore = lockStoreWithOut()
|
|
||||||
const snapshotStore = snapshotStoreWithOut()
|
const snapshotStore = snapshotStoreWithOut()
|
||||||
const copyStore = copyStoreWithOut()
|
const copyStore = copyStoreWithOut()
|
||||||
const { styleChangeTimes, snapshotIndex } = storeToRefs(snapshotStore)
|
const { styleChangeTimes, snapshotIndex } = storeToRefs(snapshotStore)
|
||||||
const {
|
const {
|
||||||
linkageSettingStatus,
|
linkageSettingStatus,
|
||||||
curLinkageView,
|
curLinkageView,
|
||||||
curComponent,
|
|
||||||
canvasStyleData,
|
|
||||||
curComponentIndex,
|
|
||||||
componentData,
|
componentData,
|
||||||
dvInfo,
|
dvInfo,
|
||||||
canvasViewInfo,
|
canvasViewInfo,
|
||||||
@ -49,10 +39,8 @@ const {
|
|||||||
targetLinkageInfo,
|
targetLinkageInfo,
|
||||||
curBatchOptComponents
|
curBatchOptComponents
|
||||||
} = storeToRefs(dvMainStore)
|
} = storeToRefs(dvMainStore)
|
||||||
const { areaData } = storeToRefs(composeStore)
|
|
||||||
const dvModel = 'dashboard'
|
const dvModel = 'dashboard'
|
||||||
const multiplexingRef = ref(null)
|
const multiplexingRef = ref(null)
|
||||||
let scale = ref(canvasStyleData.value.scale)
|
|
||||||
let nameEdit = ref(false)
|
let nameEdit = ref(false)
|
||||||
let inputName = ref('')
|
let inputName = ref('')
|
||||||
let nameInput = ref(null)
|
let nameInput = ref(null)
|
||||||
@ -86,24 +74,6 @@ const closeEditCanvasName = () => {
|
|||||||
inputName.value = ''
|
inputName.value = ''
|
||||||
}
|
}
|
||||||
|
|
||||||
const lock = () => {
|
|
||||||
lockStore.lock()
|
|
||||||
}
|
|
||||||
|
|
||||||
const unlock = () => {
|
|
||||||
lockStore.unlock()
|
|
||||||
}
|
|
||||||
|
|
||||||
const compose = () => {
|
|
||||||
composeStore.compose()
|
|
||||||
snapshotStore.recordSnapshotCache('db-compose')
|
|
||||||
}
|
|
||||||
|
|
||||||
const decompose = () => {
|
|
||||||
composeStore.decompose()
|
|
||||||
snapshotStore.recordSnapshotCache('db-decompose')
|
|
||||||
}
|
|
||||||
|
|
||||||
const undo = () => {
|
const undo = () => {
|
||||||
snapshotStore.undo()
|
snapshotStore.undo()
|
||||||
eventBus.emit('matrix-canvasInit', false)
|
eventBus.emit('matrix-canvasInit', false)
|
||||||
@ -185,11 +155,6 @@ const clearCanvas = () => {
|
|||||||
snapshotStore.recordSnapshotCache('renderChart')
|
snapshotStore.recordSnapshotCache('renderChart')
|
||||||
}
|
}
|
||||||
|
|
||||||
const handlePreviewChange = () => {
|
|
||||||
isShowPreview.value = false
|
|
||||||
dvMainStore.setEditMode('edit')
|
|
||||||
}
|
|
||||||
|
|
||||||
const backToMain = () => {
|
const backToMain = () => {
|
||||||
let url = '#/panel/index'
|
let url = '#/panel/index'
|
||||||
if (dvInfo.value.id) {
|
if (dvInfo.value.id) {
|
||||||
@ -267,17 +232,6 @@ const batchCopy = () => {
|
|||||||
saveBatchChange()
|
saveBatchChange()
|
||||||
}
|
}
|
||||||
|
|
||||||
const cancelBatchOpt = () => {
|
|
||||||
dvMainStore.setComponentData(state.preBatchComponentData)
|
|
||||||
dvMainStore.setCanvasViewInfo(state.preBatchCanvasViewInfo)
|
|
||||||
Object.keys(canvasViewInfo.value).forEach(viewId => {
|
|
||||||
if (curBatchOptComponents.value.includes(viewId)) {
|
|
||||||
useEmitt().emitter.emit('renderChart-' + viewId, canvasViewInfo.value[viewId])
|
|
||||||
}
|
|
||||||
})
|
|
||||||
batchOptStatusChange(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
const batchOptStatusChange = value => {
|
const batchOptStatusChange = value => {
|
||||||
if (value) {
|
if (value) {
|
||||||
// 如果当前进入批量操作界面 提前保存镜像
|
// 如果当前进入批量操作界面 提前保存镜像
|
||||||
@ -328,7 +282,7 @@ const saveLinkageSetting = () => {
|
|||||||
sourceViewId: curLinkageView.value.id,
|
sourceViewId: curLinkageView.value.id,
|
||||||
linkageInfo: targetLinkageInfo.value
|
linkageInfo: targetLinkageInfo.value
|
||||||
}
|
}
|
||||||
saveLinkage(request).then(rsp => {
|
saveLinkage(request).then(() => {
|
||||||
ElMessage.success('保存成功')
|
ElMessage.success('保存成功')
|
||||||
// 刷新联动信息
|
// 刷新联动信息
|
||||||
getPanelAllLinkageInfo(dvInfo.value.id).then(rsp => {
|
getPanelAllLinkageInfo(dvInfo.value.id).then(rsp => {
|
||||||
|
@ -166,13 +166,9 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, nextTick, onMounted, reactive, ref, toRefs } from 'vue'
|
import { computed, nextTick, onMounted, reactive, ref, toRefs, PropType } from 'vue'
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||||
import {
|
import { COLOR_PANEL, DEFAULT_BASIC_STYLE } from '@/views/chart/components/editor/util/chart'
|
||||||
COLOR_CASES,
|
|
||||||
COLOR_PANEL,
|
|
||||||
DEFAULT_BASIC_STYLE
|
|
||||||
} from '@/views/chart/components/editor/util/chart'
|
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
import eventBus from '@/utils/eventBus'
|
import eventBus from '@/utils/eventBus'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
@ -181,7 +177,7 @@ import elementResizeDetectorMaker from 'element-resize-detector'
|
|||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
themes: {
|
themes: {
|
||||||
type: String,
|
type: String as PropType<EditorTheme>,
|
||||||
default: 'light'
|
default: 'light'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -195,8 +191,6 @@ const colorFormRef = ref(null)
|
|||||||
const colorForm = computed(
|
const colorForm = computed(
|
||||||
() => canvasStyleData.value.component.chartColor as DeepPartial<ChartAttr>
|
() => canvasStyleData.value.component.chartColor as DeepPartial<ChartAttr>
|
||||||
)
|
)
|
||||||
const colorCases = COLOR_CASES
|
|
||||||
|
|
||||||
const predefineColors = COLOR_PANEL
|
const predefineColors = COLOR_PANEL
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
@ -226,25 +220,6 @@ const changeColorCase = modifyName => {
|
|||||||
emits('onColorChange', colorForm.value)
|
emits('onColorChange', colorForm.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
const switchColor = index => {
|
|
||||||
state.colorIndex = index
|
|
||||||
state.customColor = colorForm.value.basicStyle.colors[state.colorIndex]
|
|
||||||
}
|
|
||||||
const switchColorCase = () => {
|
|
||||||
colorForm.value.basicStyle.colors[state.colorIndex] = state.customColor
|
|
||||||
colorForm.value['modifyName'] = 'value'
|
|
||||||
emits('onColorChange', colorForm.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const resetCustomColor = () => {
|
|
||||||
changeColorOption()
|
|
||||||
}
|
|
||||||
|
|
||||||
const switchCustomColor = index => {
|
|
||||||
colorForm.value['seriesColors'][index].isCustom = true
|
|
||||||
switchColorCase()
|
|
||||||
}
|
|
||||||
|
|
||||||
const containerRef = ref()
|
const containerRef = ref()
|
||||||
const containerWidth = ref()
|
const containerWidth = ref()
|
||||||
|
|
||||||
@ -262,7 +237,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
const erd = elementResizeDetectorMaker()
|
const erd = elementResizeDetectorMaker()
|
||||||
containerWidth.value = containerRef.value?.offsetWidth
|
containerWidth.value = containerRef.value?.offsetWidth
|
||||||
erd.listenTo(containerRef.value, element => {
|
erd.listenTo(containerRef.value, () => {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
containerWidth.value = containerRef.value?.offsetWidth
|
containerWidth.value = containerRef.value?.offsetWidth
|
||||||
})
|
})
|
||||||
|
@ -93,7 +93,6 @@ const { t } = useI18n()
|
|||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
const snapshotStore = snapshotStoreWithOut()
|
const snapshotStore = snapshotStoreWithOut()
|
||||||
|
|
||||||
const emits = defineEmits(['onTextChange'])
|
|
||||||
const filterFormRef = ref(null)
|
const filterFormRef = ref(null)
|
||||||
const filterForm = computed(() => dvMainStore.canvasStyleData.component.filterStyle)
|
const filterForm = computed(() => dvMainStore.canvasStyleData.component.filterStyle)
|
||||||
|
|
||||||
|
@ -155,7 +155,7 @@ import {
|
|||||||
FILTER_COMMON_STYLE_LIGHT
|
FILTER_COMMON_STYLE_LIGHT
|
||||||
} from '@/views/chart/components/editor/util/chart'
|
} from '@/views/chart/components/editor/util/chart'
|
||||||
import ColorButton from '@/components/assist-button/ColorButton.vue'
|
import ColorButton from '@/components/assist-button/ColorButton.vue'
|
||||||
import { reactive, computed } from 'vue'
|
import { computed } from 'vue'
|
||||||
import { deepCopy } from '@/utils/utils'
|
import { deepCopy } from '@/utils/utils'
|
||||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
@ -165,7 +165,6 @@ import {
|
|||||||
} from '@/custom-component/component-list'
|
} from '@/custom-component/component-list'
|
||||||
import { ElFormItem, ElIcon, ElSpace } from 'element-plus-secondary'
|
import { ElFormItem, ElIcon, ElSpace } from 'element-plus-secondary'
|
||||||
import Icon from '@/components/icon-custom/src/Icon.vue'
|
import Icon from '@/components/icon-custom/src/Icon.vue'
|
||||||
const emits = defineEmits(['onThemeColorChange'])
|
|
||||||
const snapshotStore = snapshotStoreWithOut()
|
const snapshotStore = snapshotStoreWithOut()
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
themes: {
|
themes: {
|
||||||
@ -176,10 +175,6 @@ const props = defineProps({
|
|||||||
const toolTip = computed(() => {
|
const toolTip = computed(() => {
|
||||||
return props.themes === 'dark' ? 'ndark' : 'dark'
|
return props.themes === 'dark' ? 'ndark' : 'dark'
|
||||||
})
|
})
|
||||||
const state = reactive({
|
|
||||||
colorIndex: 0
|
|
||||||
})
|
|
||||||
|
|
||||||
const themeChange = modifyName => {
|
const themeChange = modifyName => {
|
||||||
if (modifyName === 'themeColor') {
|
if (modifyName === 'themeColor') {
|
||||||
// 主题变更
|
// 主题变更
|
||||||
|
@ -159,11 +159,6 @@ function setPosition(p: 'left' | 'center' | 'right') {
|
|||||||
titleForm.value.hPosition = p
|
titleForm.value.hPosition = p
|
||||||
changeTitleStyle('hPosition')
|
changeTitleStyle('hPosition')
|
||||||
}
|
}
|
||||||
|
|
||||||
function setVPosition(p: 'top' | 'center' | 'bottom') {
|
|
||||||
titleForm.value.vPosition = p
|
|
||||||
changeTitleStyle('vPosition')
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
|
@ -74,10 +74,8 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { reactive } from 'vue'
|
import { reactive } from 'vue'
|
||||||
import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
|
import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
|
||||||
const emits = defineEmits(['onTextChange'])
|
const emits = defineEmits(['onTextChange'])
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
@ -87,20 +85,6 @@ const state = reactive({
|
|||||||
predefineColors: COLOR_PANEL
|
predefineColors: COLOR_PANEL
|
||||||
})
|
})
|
||||||
|
|
||||||
const initForm = () => {
|
|
||||||
state.titleForm = dvMainStore.canvasStyleData.component.chartTitle
|
|
||||||
}
|
|
||||||
|
|
||||||
const init = () => {
|
|
||||||
const arr = []
|
|
||||||
for (let i = 10; i <= 60; i = i + 2) {
|
|
||||||
arr.push({
|
|
||||||
name: i + '',
|
|
||||||
value: i + ''
|
|
||||||
})
|
|
||||||
}
|
|
||||||
state.fontSize = arr
|
|
||||||
}
|
|
||||||
const changeTitleStyle = modifyName => {
|
const changeTitleStyle = modifyName => {
|
||||||
state.titleForm['modifyName'] = modifyName
|
state.titleForm['modifyName'] = modifyName
|
||||||
emits('onTextChange', state.titleForm)
|
emits('onTextChange', state.titleForm)
|
||||||
|
@ -200,7 +200,7 @@ import {
|
|||||||
import { reactive, toRefs, computed, onMounted, ref } from 'vue'
|
import { reactive, toRefs, computed, onMounted, ref } from 'vue'
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import { ElButton, ElMessage } from 'element-plus-secondary'
|
import { ElMessage } from 'element-plus-secondary'
|
||||||
import { deepCopy } from '@/utils/utils'
|
import { deepCopy } from '@/utils/utils'
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
const { canvasStyleData } = storeToRefs(dvMainStore)
|
const { canvasStyleData } = storeToRefs(dvMainStore)
|
||||||
@ -220,7 +220,7 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const { initialSpeed, initialInterval } = toRefs(props)
|
const { initialSpeed } = toRefs(props)
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
temp: null,
|
temp: null,
|
||||||
@ -245,10 +245,6 @@ const slideWindowHeight = computed(() => {
|
|||||||
return { height: state.sliders[0]?.length < 3 ? '140px' : '250px' }
|
return { height: state.sliders[0]?.length < 3 ? '140px' : '250px' }
|
||||||
})
|
})
|
||||||
|
|
||||||
const interval = computed(() => {
|
|
||||||
return initialInterval.value * 1000
|
|
||||||
})
|
|
||||||
|
|
||||||
const querySubjectWithGroup = () => {
|
const querySubjectWithGroup = () => {
|
||||||
state.slidersLoading = true
|
state.slidersLoading = true
|
||||||
querySubjectWithGroupApi({})
|
querySubjectWithGroupApi({})
|
||||||
@ -267,7 +263,7 @@ const querySubjectWithGroup = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const subjectDelete = id => {
|
const subjectDelete = id => {
|
||||||
deleteSubject(id).then(response => {
|
deleteSubject(id).then(() => {
|
||||||
ElMessage.success('删除成功')
|
ElMessage.success('删除成功')
|
||||||
querySubjectWithGroup()
|
querySubjectWithGroup()
|
||||||
})
|
})
|
||||||
@ -276,7 +272,7 @@ const subjectDelete = id => {
|
|||||||
const subjectEditFinish = subjectItem => {
|
const subjectEditFinish = subjectItem => {
|
||||||
state.slidersLoading = true
|
state.slidersLoading = true
|
||||||
saveOrUpdateSubject(subjectItem)
|
saveOrUpdateSubject(subjectItem)
|
||||||
.then(response => {
|
.then(() => {
|
||||||
subjectEditDialogRef.value.resetForm()
|
subjectEditDialogRef.value.resetForm()
|
||||||
ElMessage.success('保存成功')
|
ElMessage.success('保存成功')
|
||||||
querySubjectWithGroup()
|
querySubjectWithGroup()
|
||||||
|
@ -2,14 +2,9 @@
|
|||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import { nextTick, onMounted, reactive, ref } from 'vue'
|
import { nextTick, onMounted, ref } from 'vue'
|
||||||
import { ElFormItem } from 'element-plus-secondary'
|
import { ElFormItem } from 'element-plus-secondary'
|
||||||
import {
|
|
||||||
COLOR_CASES,
|
|
||||||
COLOR_PANEL,
|
|
||||||
DEFAULT_COLOR_CASE
|
|
||||||
} from '@/views/chart/components/editor/util/chart'
|
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
|
||||||
import { merge } from 'lodash-es'
|
import { merge } from 'lodash-es'
|
||||||
import { useEmitt } from '@/hooks/web/useEmitt'
|
import { useEmitt } from '@/hooks/web/useEmitt'
|
||||||
import ComponentColorSelector from '@/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue'
|
import ComponentColorSelector from '@/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue'
|
||||||
@ -18,36 +13,10 @@ import CanvasBackground from '@/components/visualization/component-background/Ca
|
|||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
const snapshotStore = snapshotStoreWithOut()
|
const snapshotStore = snapshotStoreWithOut()
|
||||||
const { canvasStyleData, canvasViewInfo } = storeToRefs(dvMainStore)
|
const { canvasStyleData, canvasViewInfo } = storeToRefs(dvMainStore)
|
||||||
const { t } = useI18n()
|
|
||||||
const files = ref(null)
|
|
||||||
let initReady = false
|
|
||||||
let canvasAttrInit = false
|
let canvasAttrInit = false
|
||||||
|
|
||||||
const options = ref({
|
|
||||||
color: '颜色',
|
|
||||||
opacity: '不透明度',
|
|
||||||
backgroundColor: '背景色',
|
|
||||||
fontSize: '字体大小'
|
|
||||||
})
|
|
||||||
const fileList = ref([])
|
|
||||||
const dialogImageUrl = ref('')
|
|
||||||
const dialogVisible = ref(false)
|
|
||||||
const uploadDisabled = ref(false)
|
|
||||||
|
|
||||||
const canvasAttrActiveNames = ref(['size', 'background', 'color'])
|
const canvasAttrActiveNames = ref(['size', 'background', 'color'])
|
||||||
|
|
||||||
const colorCases = COLOR_CASES
|
|
||||||
|
|
||||||
const predefineColors = COLOR_PANEL
|
|
||||||
|
|
||||||
const state = reactive({
|
|
||||||
colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE)),
|
|
||||||
customColor: null,
|
|
||||||
colorIndex: 0
|
|
||||||
})
|
|
||||||
|
|
||||||
const init = () => {
|
const init = () => {
|
||||||
initReady = true
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
canvasAttrInit = true
|
canvasAttrInit = true
|
||||||
})
|
})
|
||||||
|
@ -10,8 +10,6 @@ const { canvasStyleData } = storeToRefs(dvMainStore)
|
|||||||
const snapshotStore = snapshotStoreWithOut()
|
const snapshotStore = snapshotStoreWithOut()
|
||||||
const scale = ref(60)
|
const scale = ref(60)
|
||||||
|
|
||||||
let timer = null
|
|
||||||
|
|
||||||
const handleScaleChange = () => {
|
const handleScaleChange = () => {
|
||||||
snapshotStore.recordSnapshotCache()
|
snapshotStore.recordSnapshotCache()
|
||||||
// 画布比例设一个最小值,不能为 0
|
// 画布比例设一个最小值,不能为 0
|
||||||
|
@ -1,11 +1,8 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus-secondary'
|
import { ElMessage, ElMessageBox } from 'element-plus-secondary'
|
||||||
import eventBus from '@/utils/eventBus'
|
import eventBus from '@/utils/eventBus'
|
||||||
import { $ } from '@/utils/utils'
|
|
||||||
import { ref, nextTick } from 'vue'
|
import { ref, nextTick } from 'vue'
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||||
import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
|
|
||||||
import { lockStoreWithOut } from '@/store/modules/data-visualization/lock'
|
|
||||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import Icon from '../icon-custom/src/Icon.vue'
|
import Icon from '../icon-custom/src/Icon.vue'
|
||||||
@ -17,27 +14,15 @@ import CommonGroup from '@/custom-component/component-group/CommonGroup.vue'
|
|||||||
import DeResourceGroupOpt from '@/views/common/DeResourceGroupOpt.vue'
|
import DeResourceGroupOpt from '@/views/common/DeResourceGroupOpt.vue'
|
||||||
import { canvasSave } from '@/utils/canvasUtils'
|
import { canvasSave } from '@/utils/canvasUtils'
|
||||||
import { changeSizeWithScale } from '@/utils/changeComponentsSizeWithScale'
|
import { changeSizeWithScale } from '@/utils/changeComponentsSizeWithScale'
|
||||||
let timer = null
|
|
||||||
let nameEdit = ref(false)
|
let nameEdit = ref(false)
|
||||||
let inputName = ref('')
|
let inputName = ref('')
|
||||||
let nameInput = ref(null)
|
let nameInput = ref(null)
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
const composeStore = composeStoreWithOut()
|
|
||||||
const lockStore = lockStoreWithOut()
|
|
||||||
const snapshotStore = snapshotStoreWithOut()
|
const snapshotStore = snapshotStoreWithOut()
|
||||||
const { styleChangeTimes, snapshotIndex } = storeToRefs(snapshotStore)
|
const { styleChangeTimes, snapshotIndex } = storeToRefs(snapshotStore)
|
||||||
const resourceGroupOpt = ref(null)
|
const resourceGroupOpt = ref(null)
|
||||||
const dvToolbarMain = ref(null)
|
const dvToolbarMain = ref(null)
|
||||||
const {
|
const { canvasStyleData, dvInfo, editMode } = storeToRefs(dvMainStore)
|
||||||
curComponent,
|
|
||||||
canvasStyleData,
|
|
||||||
curComponentIndex,
|
|
||||||
componentData,
|
|
||||||
dvInfo,
|
|
||||||
canvasViewInfo,
|
|
||||||
editMode
|
|
||||||
} = storeToRefs(dvMainStore)
|
|
||||||
const { areaData } = storeToRefs(composeStore)
|
|
||||||
let scaleEdit = 100
|
let scaleEdit = 100
|
||||||
|
|
||||||
const closeEditCanvasName = () => {
|
const closeEditCanvasName = () => {
|
||||||
@ -57,24 +42,6 @@ const closeEditCanvasName = () => {
|
|||||||
inputName.value = ''
|
inputName.value = ''
|
||||||
}
|
}
|
||||||
|
|
||||||
const lock = () => {
|
|
||||||
lockStore.lock()
|
|
||||||
}
|
|
||||||
|
|
||||||
const unlock = () => {
|
|
||||||
lockStore.unlock()
|
|
||||||
}
|
|
||||||
|
|
||||||
const compose = () => {
|
|
||||||
composeStore.compose()
|
|
||||||
snapshotStore.recordSnapshotCache('dv-compose')
|
|
||||||
}
|
|
||||||
|
|
||||||
const decompose = () => {
|
|
||||||
composeStore.decompose()
|
|
||||||
snapshotStore.recordSnapshotCache('dv-decompose')
|
|
||||||
}
|
|
||||||
|
|
||||||
const undo = () => {
|
const undo = () => {
|
||||||
snapshotStore.undo()
|
snapshotStore.undo()
|
||||||
}
|
}
|
||||||
|
@ -10,7 +10,6 @@ const eventStore = eventStoreWithOut()
|
|||||||
const { curComponent } = storeToRefs(dvMainStore)
|
const { curComponent } = storeToRefs(dvMainStore)
|
||||||
|
|
||||||
const isShowEvent = ref(false)
|
const isShowEvent = ref(false)
|
||||||
const eventURL = ref('')
|
|
||||||
const eventActiveName = ref('redirect')
|
const eventActiveName = ref('redirect')
|
||||||
|
|
||||||
const addEvent = (event, param) => {
|
const addEvent = (event, param) => {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineEmits } from 'vue'
|
import { defineEmits } from 'vue'
|
||||||
const props = defineProps({
|
defineProps({
|
||||||
show: {
|
show: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
@ -3,15 +3,14 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
|||||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||||
import { layerStoreWithOut } from '@/store/modules/data-visualization/layer'
|
import { layerStoreWithOut } from '@/store/modules/data-visualization/layer'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import { ElCol, ElIcon, ElRow } from 'element-plus-secondary'
|
import { ElIcon, ElRow } from 'element-plus-secondary'
|
||||||
import Icon from '../icon-custom/src/Icon.vue'
|
import Icon from '../icon-custom/src/Icon.vue'
|
||||||
import { computed, nextTick, ref } from 'vue'
|
import { nextTick, ref } from 'vue'
|
||||||
import draggable from 'vuedraggable'
|
import draggable from 'vuedraggable'
|
||||||
import { lockStoreWithOut } from '@/store/modules/data-visualization/lock'
|
import { lockStoreWithOut } from '@/store/modules/data-visualization/lock'
|
||||||
import ContextMenuAsideDetails from '@/components/data-visualization/canvas/ContextMenuAsideDetails.vue'
|
import ContextMenuAsideDetails from '@/components/data-visualization/canvas/ContextMenuAsideDetails.vue'
|
||||||
import ComposeShow from '@/components/data-visualization/canvas/ComposeShow.vue'
|
import ComposeShow from '@/components/data-visualization/canvas/ComposeShow.vue'
|
||||||
import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
|
import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
|
||||||
import { contextmenuStoreWithOut } from '@/store/modules/data-visualization/contextmenu'
|
|
||||||
const dropdownMore = ref(null)
|
const dropdownMore = ref(null)
|
||||||
const lockStore = lockStoreWithOut()
|
const lockStore = lockStoreWithOut()
|
||||||
|
|
||||||
@ -19,11 +18,10 @@ const dvMainStore = dvMainStoreWithOut()
|
|||||||
const snapshotStore = snapshotStoreWithOut()
|
const snapshotStore = snapshotStoreWithOut()
|
||||||
const layerStore = layerStoreWithOut()
|
const layerStore = layerStoreWithOut()
|
||||||
const composeStore = composeStoreWithOut()
|
const composeStore = composeStoreWithOut()
|
||||||
const contextmenuStore = contextmenuStoreWithOut()
|
|
||||||
|
|
||||||
const { areaData, isCtrlOrCmdDown, isShiftDown, laterIndex } = storeToRefs(composeStore)
|
const { areaData, isCtrlOrCmdDown, isShiftDown, laterIndex } = storeToRefs(composeStore)
|
||||||
|
|
||||||
const { componentData, curComponent, curComponentIndex, canvasViewInfo } = storeToRefs(dvMainStore)
|
const { componentData, curComponent, canvasViewInfo } = storeToRefs(dvMainStore)
|
||||||
const getComponent = index => {
|
const getComponent = index => {
|
||||||
return componentData.value[componentData.value.length - 1 - index]
|
return componentData.value[componentData.value.length - 1 - index]
|
||||||
}
|
}
|
||||||
@ -87,24 +85,6 @@ const onClick = (e, index) => {
|
|||||||
setCurComponent(index)
|
setCurComponent(index)
|
||||||
composeStore.setLaterIndex(index)
|
composeStore.setLaterIndex(index)
|
||||||
}
|
}
|
||||||
const deleteComponent = (number: number) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
dvMainStore.deleteComponentById(curComponent.value.id)
|
|
||||||
snapshotStore.recordSnapshotCache('renderChart')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const upComponent = (number: number) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
layerStore.upComponent()
|
|
||||||
snapshotStore.recordSnapshotCache()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const downComponent = (number: number) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
layerStore.downComponent()
|
|
||||||
snapshotStore.recordSnapshotCache('realTime-downComponent')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const setCurComponent = index => {
|
const setCurComponent = index => {
|
||||||
dvMainStore.setCurComponent({ component: componentData.value[index], index })
|
dvMainStore.setCurComponent({ component: componentData.value[index], index })
|
||||||
}
|
}
|
||||||
@ -133,10 +113,6 @@ const closeEditComponentName = () => {
|
|||||||
inputName.value = ''
|
inputName.value = ''
|
||||||
}
|
}
|
||||||
|
|
||||||
const toggleComponentVisible = () => {
|
|
||||||
// do toggleComponentVisible
|
|
||||||
}
|
|
||||||
|
|
||||||
const lock = () => {
|
const lock = () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
lockStore.lock()
|
lockStore.lock()
|
||||||
@ -198,9 +174,6 @@ const menuAsideClose = (param, index) => {
|
|||||||
}, 200)
|
}, 200)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const rename = item => {
|
|
||||||
editComponentName(item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleContextMenu = e => {
|
const handleContextMenu = e => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
@ -293,7 +266,7 @@ const handleContextMenu = e => {
|
|||||||
trigger="click"
|
trigger="click"
|
||||||
placement="bottom-start"
|
placement="bottom-start"
|
||||||
effect="dark"
|
effect="dark"
|
||||||
hide-timeout="0"
|
:hide-timeout="0"
|
||||||
>
|
>
|
||||||
<span :class="'dropdownMore-' + index" @click="onClick(transformIndex(index))">
|
<span :class="'dropdownMore-' + index" @click="onClick(transformIndex(index))">
|
||||||
<el-icon class="component-base">
|
<el-icon class="component-base">
|
||||||
@ -313,7 +286,7 @@ const handleContextMenu = e => {
|
|||||||
trigger="contextmenu"
|
trigger="contextmenu"
|
||||||
placement="bottom-start"
|
placement="bottom-start"
|
||||||
effect="dark"
|
effect="dark"
|
||||||
hide-timeout="0"
|
:hide-timeout="0"
|
||||||
>
|
>
|
||||||
<compose-show
|
<compose-show
|
||||||
:show-border="false"
|
:show-border="false"
|
||||||
|
@ -5,7 +5,6 @@ import {
|
|||||||
getStyle,
|
getStyle,
|
||||||
getComponentRotatedStyle,
|
getComponentRotatedStyle,
|
||||||
getShapeItemStyle,
|
getShapeItemStyle,
|
||||||
getSVGStyle,
|
|
||||||
getCanvasStyle,
|
getCanvasStyle,
|
||||||
syncShapeItemStyle
|
syncShapeItemStyle
|
||||||
} from '@/utils/style'
|
} from '@/utils/style'
|
||||||
@ -16,7 +15,7 @@ import MarkLine from './MarkLine.vue'
|
|||||||
import Area from './Area.vue'
|
import Area from './Area.vue'
|
||||||
import eventBus from '@/utils/eventBus'
|
import eventBus from '@/utils/eventBus'
|
||||||
import { changeStyleWithScale } from '@/utils/translate'
|
import { changeStyleWithScale } from '@/utils/translate'
|
||||||
import { ref, onMounted, toRef, computed, toRefs, nextTick, onBeforeUnmount } from 'vue'
|
import { ref, onMounted, computed, toRefs, nextTick, onBeforeUnmount } from 'vue'
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||||
import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
|
import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
|
||||||
import { contextmenuStoreWithOut } from '@/store/modules/data-visualization/contextmenu'
|
import { contextmenuStoreWithOut } from '@/store/modules/data-visualization/contextmenu'
|
||||||
@ -155,7 +154,6 @@ const {
|
|||||||
resizing,
|
resizing,
|
||||||
resizeEnd,
|
resizeEnd,
|
||||||
isEdit,
|
isEdit,
|
||||||
dvModel,
|
|
||||||
canvasId,
|
canvasId,
|
||||||
canvasStyleData,
|
canvasStyleData,
|
||||||
componentData,
|
componentData,
|
||||||
@ -190,9 +188,6 @@ const curComponentId = computed(() => {
|
|||||||
return curComponent.value?.id || ''
|
return curComponent.value?.id || ''
|
||||||
})
|
})
|
||||||
|
|
||||||
const showComponentData = computed(() => {
|
|
||||||
return componentData.value.filter(component => component.isShow)
|
|
||||||
})
|
|
||||||
const { emitter } = useEmitt()
|
const { emitter } = useEmitt()
|
||||||
|
|
||||||
const curScale = computed(() => {
|
const curScale = computed(() => {
|
||||||
@ -229,7 +224,6 @@ const dashboardActive = computed(() => {
|
|||||||
// 融合矩阵设计
|
// 融合矩阵设计
|
||||||
const renderOk = ref(false)
|
const renderOk = ref(false)
|
||||||
const moveAnimate = ref(false)
|
const moveAnimate = ref(false)
|
||||||
const list = ref([])
|
|
||||||
const cellWidth = ref(0)
|
const cellWidth = ref(0)
|
||||||
const cellHeight = ref(0)
|
const cellHeight = ref(0)
|
||||||
const maxCell = ref(0)
|
const maxCell = ref(0)
|
||||||
@ -244,7 +238,6 @@ let moveTime = 200 //移动动画时间
|
|||||||
|
|
||||||
let itemMaxY = 0
|
let itemMaxY = 0
|
||||||
let itemMaxX = 0
|
let itemMaxX = 0
|
||||||
let currentInstance
|
|
||||||
let snapshotTimer = ref(null)
|
let snapshotTimer = ref(null)
|
||||||
|
|
||||||
// 根据需要需要扩充外部scroll区域也可以进行组合的功能 此方法变更为外部组件调用
|
// 根据需要需要扩充外部scroll区域也可以进行组合的功能 此方法变更为外部组件调用
|
||||||
@ -431,9 +424,6 @@ const getComponentStyle = style => {
|
|||||||
return getStyle(style, svgFilterAttrs)
|
return getStyle(style, svgFilterAttrs)
|
||||||
}
|
}
|
||||||
|
|
||||||
const getSVGStyleInner = style => {
|
|
||||||
return getSVGStyle(style, svgFilterAttrs)
|
|
||||||
}
|
|
||||||
const getShapeItemShowStyle = item => {
|
const getShapeItemShowStyle = item => {
|
||||||
return getShapeItemStyle(item, {
|
return getShapeItemStyle(item, {
|
||||||
dvModel: dvInfo.value.type,
|
dvModel: dvInfo.value.type,
|
||||||
@ -750,81 +740,6 @@ function addItem(item, index) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeToCoordinate(left, top, width, height) {
|
|
||||||
return {
|
|
||||||
x1: left,
|
|
||||||
x2: left + width,
|
|
||||||
y1: top,
|
|
||||||
y2: top + height,
|
|
||||||
c1: left + width / 2,
|
|
||||||
c2: top + height / 2
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 检测有无碰撞,并作出处理
|
|
||||||
*/
|
|
||||||
function findClosetCoords(item, tCoordinate) {
|
|
||||||
if (isOverlay) return
|
|
||||||
let i = coordinates.value.length
|
|
||||||
let collisionsItem = []
|
|
||||||
while (i--) {
|
|
||||||
let nowCoordinate = coordinates.value[i]
|
|
||||||
if (item._dragId == nowCoordinate.el._dragId) {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
tCoordinate.x2 < nowCoordinate.x1 ||
|
|
||||||
tCoordinate.x1 > nowCoordinate.x2 ||
|
|
||||||
tCoordinate.y2 < nowCoordinate.y1 ||
|
|
||||||
tCoordinate.y1 > nowCoordinate.y2
|
|
||||||
) {
|
|
||||||
continue
|
|
||||||
} else {
|
|
||||||
collisionsItem.push({
|
|
||||||
centerDistance: Math.sqrt(
|
|
||||||
Math.pow(tCoordinate.c1 - nowCoordinate.c1, 2) +
|
|
||||||
Math.pow(tCoordinate.c2 - nowCoordinate.c2, 2)
|
|
||||||
),
|
|
||||||
coordinate: nowCoordinate
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (collisionsItem.length <= 0) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
isOverlay = true
|
|
||||||
collisionsItem = _.sortBy(collisionsItem, 'area')
|
|
||||||
movePlayer(item, {
|
|
||||||
x: collisionsItem[0].coordinate.el.x,
|
|
||||||
y: collisionsItem[0].coordinate.el.y
|
|
||||||
})
|
|
||||||
setTimeout(function () {
|
|
||||||
isOverlay = false
|
|
||||||
}, 200)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 生成坐标点
|
|
||||||
*
|
|
||||||
* @param {any} item
|
|
||||||
*/
|
|
||||||
function makeCoordinate(item) {
|
|
||||||
let width = cellWidth.value * item.sizeX - baseMarginLeft.value
|
|
||||||
let height = cellHeight.value * item.sizeY - baseMarginTop.value
|
|
||||||
let left = cellWidth.value * (item.x - 1) + baseMarginLeft.value
|
|
||||||
let top = cellHeight.value * (item.y - 1) + baseMarginTop.value
|
|
||||||
let coordinate = {
|
|
||||||
x1: left,
|
|
||||||
x2: left + width,
|
|
||||||
y1: top,
|
|
||||||
y2: top + height,
|
|
||||||
c1: left + width / 2,
|
|
||||||
c2: top + height / 2,
|
|
||||||
el: item
|
|
||||||
}
|
|
||||||
coordinates.value.push(coordinate)
|
|
||||||
}
|
|
||||||
function changeItemCoordinate(item) {
|
function changeItemCoordinate(item) {
|
||||||
let width = cellWidth.value * item.sizeX - baseMarginLeft.value
|
let width = cellWidth.value * item.sizeX - baseMarginLeft.value
|
||||||
let height = cellHeight.value * item.sizeY - baseMarginTop.value
|
let height = cellHeight.value * item.sizeY - baseMarginTop.value
|
||||||
@ -854,7 +769,7 @@ function changeItemCoordinate(item) {
|
|||||||
*/
|
*/
|
||||||
function emptyTargetCell(item) {
|
function emptyTargetCell(item) {
|
||||||
let belowItems = findBelowItems(item)
|
let belowItems = findBelowItems(item)
|
||||||
_.forEach(belowItems, function (downItem, index) {
|
_.forEach(belowItems, function (downItem) {
|
||||||
if (downItem['_dragId'] == item['_dragId']) return
|
if (downItem['_dragId'] == item['_dragId']) return
|
||||||
let moveSize = item.y + item.sizeY - downItem['y']
|
let moveSize = item.y + item.sizeY - downItem['y']
|
||||||
if (moveSize > 0) {
|
if (moveSize > 0) {
|
||||||
@ -885,7 +800,7 @@ function canItemGoUp(item) {
|
|||||||
function moveItemDown(item, size) {
|
function moveItemDown(item, size) {
|
||||||
removeItemFromPositionBox(item)
|
removeItemFromPositionBox(item)
|
||||||
let belowItems = findBelowItems(item)
|
let belowItems = findBelowItems(item)
|
||||||
_.forEach(belowItems, function (downItem, index) {
|
_.forEach(belowItems, function (downItem) {
|
||||||
if (downItem['_dragId'] == item['_dragId']) return
|
if (downItem['_dragId'] == item['_dragId']) return
|
||||||
let moveSize = calcDiff(item, downItem, size)
|
let moveSize = calcDiff(item, downItem, size)
|
||||||
if (moveSize > 0) {
|
if (moveSize > 0) {
|
||||||
@ -940,7 +855,7 @@ function moveItemUp(item, size) {
|
|||||||
})
|
})
|
||||||
addItemToPositionBox(item)
|
addItemToPositionBox(item)
|
||||||
changeItemCoordinate(item)
|
changeItemCoordinate(item)
|
||||||
_.forEach(belowItems, function (upItem, index) {
|
_.forEach(belowItems, function (upItem) {
|
||||||
let moveSize = canItemGoUp(upItem)
|
let moveSize = canItemGoUp(upItem)
|
||||||
if (moveSize > 0) {
|
if (moveSize > 0) {
|
||||||
moveItemUp(upItem, moveSize)
|
moveItemUp(upItem, moveSize)
|
||||||
@ -961,197 +876,12 @@ function findBelowItems(item) {
|
|||||||
return _.sortBy(_.values(belowItems), 'y')
|
return _.sortBy(_.values(belowItems), 'y')
|
||||||
}
|
}
|
||||||
|
|
||||||
const startResize = (e, item, index) => {
|
const endItemMove = (_, item, index) => {
|
||||||
if (!resizable.value) return
|
|
||||||
resizeStart.value(e, item, index)
|
|
||||||
if (!infoBox.value) {
|
|
||||||
infoBox.value = {}
|
|
||||||
}
|
|
||||||
infoBox.value.resizeItem = item
|
|
||||||
infoBox.value.resizeItemIndex = index
|
|
||||||
}
|
|
||||||
|
|
||||||
const containerMouseDown = e => {
|
|
||||||
// e.preventDefault();
|
|
||||||
if (!infoBox.value) {
|
|
||||||
infoBox.value = {}
|
|
||||||
}
|
|
||||||
|
|
||||||
infoBox.value.startX = e.pageX
|
|
||||||
infoBox.value.startY = e.pageY
|
|
||||||
}
|
|
||||||
|
|
||||||
const endItemMove = (e, item, index) => {
|
|
||||||
dvMainStore.setCurComponent({ component: item, index: index })
|
dvMainStore.setCurComponent({ component: item, index: index })
|
||||||
dvMainStore.setClickComponentStatus(true)
|
dvMainStore.setClickComponentStatus(true)
|
||||||
dvMainStore.setInEditorStatus(true)
|
dvMainStore.setInEditorStatus(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
const startMove = (e, item, index) => {
|
|
||||||
// e.preventDefault();
|
|
||||||
if (!infoBox.value) {
|
|
||||||
infoBox.value = {}
|
|
||||||
}
|
|
||||||
let infoBoxTemp = infoBox.value
|
|
||||||
let target = $(e.target)
|
|
||||||
|
|
||||||
let className = target.attr('class')
|
|
||||||
className = className || ''
|
|
||||||
if (
|
|
||||||
className.indexOf('dragHandle') == -1 &&
|
|
||||||
className.indexOf('item') == -1 &&
|
|
||||||
className.indexOf('resizeHandle') == -1
|
|
||||||
) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (className.includes('resizeHandle')) {
|
|
||||||
} else if (draggable.value && (className.includes('dragHandle') || className.includes('item'))) {
|
|
||||||
dragStart.value(e, item, index)
|
|
||||||
infoBoxTemp.moveItem = item
|
|
||||||
infoBoxTemp.moveItemIndex = index
|
|
||||||
}
|
|
||||||
|
|
||||||
infoBoxTemp.cloneItem = null
|
|
||||||
infoBoxTemp.nowItemNode = null
|
|
||||||
|
|
||||||
if (target.attr('class') && target.attr('class').indexOf('item') != -1) {
|
|
||||||
infoBoxTemp.nowItemNode = target
|
|
||||||
infoBoxTemp.cloneItem = target.clone()
|
|
||||||
} else {
|
|
||||||
infoBoxTemp.nowItemNode = target.parents('.item')
|
|
||||||
infoBoxTemp.cloneItem = infoBoxTemp.nowItemNode.clone()
|
|
||||||
}
|
|
||||||
infoBoxTemp.cloneItem.addClass('cloneNode')
|
|
||||||
|
|
||||||
//problem
|
|
||||||
$(container.value).append(infoBoxTemp.cloneItem)
|
|
||||||
|
|
||||||
infoBoxTemp.originX = infoBoxTemp.cloneItem.position().left //克隆对象原始X位置
|
|
||||||
infoBoxTemp.originY = infoBoxTemp.cloneItem.position().top
|
|
||||||
infoBoxTemp.oldX = item.x //实际对象原始X位置
|
|
||||||
infoBoxTemp.oldY = item.y
|
|
||||||
infoBoxTemp.oldSizeX = item.sizeX
|
|
||||||
infoBoxTemp.oldSizeY = item.sizeY
|
|
||||||
infoBoxTemp.originWidth = infoBoxTemp.cloneItem.prop('offsetWidth')
|
|
||||||
infoBoxTemp.originHeight = infoBoxTemp.cloneItem.prop('offsetHeight')
|
|
||||||
|
|
||||||
function itemMouseMove(e) {
|
|
||||||
let moveItem = _.get(infoBoxTemp, 'moveItem')
|
|
||||||
let resizeItem = _.get(infoBoxTemp, 'resizeItem')
|
|
||||||
|
|
||||||
if (resizeItem) {
|
|
||||||
//调整大小时
|
|
||||||
resizing.value(e, resizeItem, resizeItem._dragId)
|
|
||||||
resizeItem['isPlayer'] = true
|
|
||||||
let nowItemIndex = infoBoxTemp.resizeItemIndex
|
|
||||||
let cloneItem = infoBoxTemp.cloneItem
|
|
||||||
let startX = infoBoxTemp.startX
|
|
||||||
let startY = infoBoxTemp.startY
|
|
||||||
let oldSizeX = infoBoxTemp.oldSizeX
|
|
||||||
let oldSizeY = infoBoxTemp.oldSizeY
|
|
||||||
let originWidth = infoBoxTemp.originWidth
|
|
||||||
let originHeight = infoBoxTemp.originHeight
|
|
||||||
|
|
||||||
let moveXSize = e.pageX - startX //X方向移动的距离
|
|
||||||
let moveYSize = e.pageY - startY //Y方向移动的距离
|
|
||||||
let addSizeX =
|
|
||||||
moveXSize % cellWidth.value > (cellWidth.value / 4) * 1
|
|
||||||
? Math.floor(moveXSize / cellWidth.value + 1)
|
|
||||||
: Math.floor(moveXSize / cellWidth.value)
|
|
||||||
let addSizeY =
|
|
||||||
moveYSize % cellHeight.value > (cellHeight.value / 4) * 1
|
|
||||||
? Math.floor(moveYSize / cellHeight.value + 1)
|
|
||||||
: Math.floor(moveYSize / cellHeight.value)
|
|
||||||
|
|
||||||
let nowX = oldSizeX + addSizeX > 0 ? oldSizeX + addSizeX : 1
|
|
||||||
let nowY = oldSizeY + addSizeY > 0 ? oldSizeY + addSizeY : 1
|
|
||||||
|
|
||||||
debounce(
|
|
||||||
(function (addSizeX, addSizeY) {
|
|
||||||
return function () {
|
|
||||||
resizePlayer(resizeItem, {
|
|
||||||
sizeX: nowX,
|
|
||||||
sizeY: nowY
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})(addSizeX, addSizeY),
|
|
||||||
10
|
|
||||||
)
|
|
||||||
|
|
||||||
let nowWidth = originWidth + moveXSize
|
|
||||||
nowWidth = nowWidth <= baseWidth.value ? baseWidth.value : nowWidth
|
|
||||||
let nowHeight = originHeight + moveYSize
|
|
||||||
nowHeight = nowHeight <= baseHeight.value ? baseHeight.value : nowHeight
|
|
||||||
//克隆元素实时改变大小
|
|
||||||
cloneItem.css({
|
|
||||||
width: nowWidth,
|
|
||||||
height: nowHeight
|
|
||||||
})
|
|
||||||
} else if (moveItem) {
|
|
||||||
scrollScreen(e)
|
|
||||||
if (!draggable.value) return
|
|
||||||
dragging.value(e, moveItem, moveItem._dragId)
|
|
||||||
//problem
|
|
||||||
moveItem['isPlayer'] = true
|
|
||||||
let nowItemIndex = infoBoxTemp.moveItemIndex
|
|
||||||
let cloneItem = infoBoxTemp.cloneItem
|
|
||||||
let startX = infoBoxTemp.startX
|
|
||||||
let startY = infoBoxTemp.startY
|
|
||||||
let originX = infoBoxTemp.originX
|
|
||||||
let originY = infoBoxTemp.originY
|
|
||||||
let oldX = infoBoxTemp.oldX
|
|
||||||
let oldY = infoBoxTemp.oldY
|
|
||||||
|
|
||||||
let moveXSize = e.pageX - startX //X方向移动的距离
|
|
||||||
let moveYSize = e.pageY - startY //Y方向移动的距离
|
|
||||||
|
|
||||||
let nowCloneItemX = originX + moveXSize
|
|
||||||
let nowCloneItemY = originY + moveYSize
|
|
||||||
|
|
||||||
let newX = Math.floor(
|
|
||||||
(nowCloneItemX + cloneItem.width() / 12 - baseMarginLeft.value) / cellWidth.value + 1
|
|
||||||
)
|
|
||||||
let newY = Math.floor(
|
|
||||||
(nowCloneItemY + cloneItem.height() / 12 - baseMarginTop.value) / cellHeight.value + 1
|
|
||||||
)
|
|
||||||
newX = newX > 0 ? newX : 1
|
|
||||||
newY = newY > 0 ? newY : 1
|
|
||||||
|
|
||||||
debounce(
|
|
||||||
(function (newX, oldX, newY, oldY) {
|
|
||||||
return function () {
|
|
||||||
if (newX != oldX || oldY != newY) {
|
|
||||||
movePlayer(moveItem, {
|
|
||||||
x: newX,
|
|
||||||
y: newY
|
|
||||||
})
|
|
||||||
|
|
||||||
infoBoxTemp.oldX = newX
|
|
||||||
infoBoxTemp.oldY = newY
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})(newX, oldX, newY, oldY),
|
|
||||||
10
|
|
||||||
)
|
|
||||||
|
|
||||||
cloneItem.css({
|
|
||||||
left: nowCloneItemX + 'px',
|
|
||||||
top: nowCloneItemY + 'px'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const up = () => {
|
|
||||||
handleMouseUp(e, item, index)
|
|
||||||
document.removeEventListener('mousemove', itemMouseMove)
|
|
||||||
document.removeEventListener('mouseup', up)
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('mousemove', itemMouseMove)
|
|
||||||
document.addEventListener('mouseup', up)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleMouseUp = (e, item, index) => {
|
const handleMouseUp = (e, item, index) => {
|
||||||
endItemMove(e, item, index)
|
endItemMove(e, item, index)
|
||||||
clearInfoBox(e)
|
clearInfoBox(e)
|
||||||
@ -1175,18 +905,6 @@ const clearInfoBox = e => {
|
|||||||
infoBox.value = {}
|
infoBox.value = {}
|
||||||
}
|
}
|
||||||
|
|
||||||
const endMove = e => {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
|
|
||||||
const endMoveI = e => {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
|
|
||||||
const moving = e => {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
|
|
||||||
const cellInit = () => {
|
const cellInit = () => {
|
||||||
// 此处向下取整 保留1位小数,why: 矩阵模式计算 x,y时 会使用 style.left/cellWidth style.top/cellWidth
|
// 此处向下取整 保留1位小数,why: 矩阵模式计算 x,y时 会使用 style.left/cellWidth style.top/cellWidth
|
||||||
// 当初始状态细微的差距(主要是减少)都会导致 x,y 减少一个矩阵大小造成偏移,
|
// 当初始状态细微的差距(主要是减少)都会导致 x,y 减少一个矩阵大小造成偏移,
|
||||||
@ -1228,45 +946,6 @@ const canvasInit = () => {
|
|||||||
renderOk.value = true
|
renderOk.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* 计算当前item的位置和大小
|
|
||||||
*/
|
|
||||||
const nowItemStyle = (item, index) => {
|
|
||||||
return {
|
|
||||||
padding: curGap.value + 'px!important',
|
|
||||||
width: cellWidth.value * item.sizeX - baseMarginLeft.value + 'px',
|
|
||||||
height: cellHeight.value * item.sizeY - baseMarginTop.value + 'px',
|
|
||||||
left: cellWidth.value * (item.x - 1) + baseMarginLeft.value + 'px',
|
|
||||||
top: cellHeight.value * (item.y - 1) + baseMarginTop.value + 'px'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const getList = () => {
|
|
||||||
let returnList = _.sortBy(_.cloneDeep(componentData.value), 'y')
|
|
||||||
let finalList = []
|
|
||||||
_.forEach(returnList, function (item, index) {
|
|
||||||
if (_.isEmpty(item)) return
|
|
||||||
delete item['_dragId']
|
|
||||||
delete item['show']
|
|
||||||
finalList.push(item)
|
|
||||||
})
|
|
||||||
return finalList
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取x最大值
|
|
||||||
*/
|
|
||||||
const getMaxCell = () => {
|
|
||||||
return maxCell.value
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取渲染状态
|
|
||||||
*/
|
|
||||||
const getRenderState = () => {
|
|
||||||
return moveAnimate.value
|
|
||||||
}
|
|
||||||
|
|
||||||
const afterInitOk = func => {
|
const afterInitOk = func => {
|
||||||
let timeId = setInterval(() => {
|
let timeId = setInterval(() => {
|
||||||
if (moveAnimate.value) {
|
if (moveAnimate.value) {
|
||||||
@ -1338,7 +1017,7 @@ const onStartMove = (e, item, index) => {
|
|||||||
infoBox.value.oldSizeY = item.sizey
|
infoBox.value.oldSizeY = item.sizey
|
||||||
}
|
}
|
||||||
|
|
||||||
const onDragging = (e, item, index) => {
|
const onDragging = (e, item) => {
|
||||||
// item 中的 style 为当前实时的位置
|
// item 中的 style 为当前实时的位置
|
||||||
const infoBoxTemp = infoBox.value
|
const infoBoxTemp = infoBox.value
|
||||||
let moveItem = _.get(infoBoxTemp, 'moveItem')
|
let moveItem = _.get(infoBoxTemp, 'moveItem')
|
||||||
@ -1373,12 +1052,11 @@ const onDragging = (e, item, index) => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const onResizing = (e, item, index) => {
|
const onResizing = (e, item) => {
|
||||||
const { top, left, width, height } = item.style
|
const { width, height } = item.style
|
||||||
// item 中的 style 为当前实时的位置
|
// item 中的 style 为当前实时的位置
|
||||||
const infoBoxTemp = infoBox.value
|
const infoBoxTemp = infoBox.value
|
||||||
let resizeItem = _.get(infoBoxTemp, 'resizeItem')
|
let resizeItem = _.get(infoBoxTemp, 'resizeItem')
|
||||||
let moveItem = _.get(infoBoxTemp, 'moveItem')
|
|
||||||
//调整大小时
|
//调整大小时
|
||||||
resizing.value(e, resizeItem, resizeItem._dragId)
|
resizing.value(e, resizeItem, resizeItem._dragId)
|
||||||
resizeItem['isPlayer'] = true
|
resizeItem['isPlayer'] = true
|
||||||
@ -1391,13 +1069,6 @@ const onResizing = (e, item, index) => {
|
|||||||
? Math.floor(height / cellHeight.value + 1)
|
? Math.floor(height / cellHeight.value + 1)
|
||||||
: Math.floor(height / cellHeight.value)
|
: Math.floor(height / cellHeight.value)
|
||||||
|
|
||||||
const addSizeX = 1
|
|
||||||
const addSizeY = 1
|
|
||||||
|
|
||||||
// 移动时
|
|
||||||
let oldX = infoBoxTemp.oldX
|
|
||||||
let oldY = infoBoxTemp.oldY
|
|
||||||
|
|
||||||
// 增加5px偏移量 防止resize时向下取整 组件向右偏移
|
// 增加5px偏移量 防止resize时向下取整 组件向右偏移
|
||||||
let newX = Math.floor((item.style.left + 5) / cellWidth.value + 1)
|
let newX = Math.floor((item.style.left + 5) / cellWidth.value + 1)
|
||||||
let newY = Math.floor((item.style.top + 5) / cellHeight.value + 1)
|
let newY = Math.floor((item.style.top + 5) / cellHeight.value + 1)
|
||||||
@ -1406,7 +1077,7 @@ const onResizing = (e, item, index) => {
|
|||||||
|
|
||||||
// 调整大小
|
// 调整大小
|
||||||
debounce(
|
debounce(
|
||||||
(function (newX, oldX, newY, oldY) {
|
(function (newX, newY) {
|
||||||
return function () {
|
return function () {
|
||||||
// 调整大小
|
// 调整大小
|
||||||
resizePlayer(resizeItem, {
|
resizePlayer(resizeItem, {
|
||||||
@ -1424,12 +1095,12 @@ const onResizing = (e, item, index) => {
|
|||||||
infoBoxTemp.oldX = newX
|
infoBoxTemp.oldX = newX
|
||||||
infoBoxTemp.oldY = newY
|
infoBoxTemp.oldY = newY
|
||||||
}
|
}
|
||||||
})(newX, oldX, newY, oldY),
|
})(newX, newY),
|
||||||
10
|
10
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const onMouseUp = (e, item, index) => {
|
const onMouseUp = e => {
|
||||||
// startMove 中组织冒泡会导致移动事件无法传播,在这里设置(鼠标抬起)效果一致
|
// startMove 中组织冒泡会导致移动事件无法传播,在这里设置(鼠标抬起)效果一致
|
||||||
if (_.isEmpty(infoBox.value)) return
|
if (_.isEmpty(infoBox.value)) return
|
||||||
if (infoBox.value.cloneItem) {
|
if (infoBox.value.cloneItem) {
|
||||||
|
@ -1,13 +1,11 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { getStyle, getSVGStyle } from '@/utils/style'
|
import { getStyle } from '@/utils/style'
|
||||||
import eventBus from '@/utils/eventBus'
|
import eventBus from '@/utils/eventBus'
|
||||||
import { ref, onMounted, toRefs, getCurrentInstance, computed, watch, nextTick } from 'vue'
|
import { ref, onMounted, toRefs, getCurrentInstance, computed } from 'vue'
|
||||||
import findComponent from '@/utils/components'
|
import findComponent from '@/utils/components'
|
||||||
import { downloadCanvas, imgUrlTrans } from '@/utils/imgUtils'
|
import { downloadCanvas, imgUrlTrans } from '@/utils/imgUtils'
|
||||||
import ComponentEditBar from '@/components/visualization/ComponentEditBar.vue'
|
import ComponentEditBar from '@/components/visualization/ComponentEditBar.vue'
|
||||||
import { useEmitt } from '@/hooks/web/useEmitt'
|
import { useEmitt } from '@/hooks/web/useEmitt'
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
|
||||||
|
|
||||||
const componentWrapperInnerRef = ref(null)
|
const componentWrapperInnerRef = ref(null)
|
||||||
const componentEditBarRef = ref(null)
|
const componentEditBarRef = ref(null)
|
||||||
|
@ -1,28 +1,8 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
|
||||||
import { contextmenuStoreWithOut } from '@/store/modules/data-visualization/contextmenu'
|
|
||||||
import { lockStoreWithOut } from '@/store/modules/data-visualization/lock'
|
|
||||||
import { copyStoreWithOut } from '@/store/modules/data-visualization/copy'
|
|
||||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
|
||||||
import { layerStoreWithOut } from '@/store/modules/data-visualization/layer'
|
|
||||||
import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
|
|
||||||
import { storeToRefs } from 'pinia'
|
|
||||||
import { computed, ref, toRefs } from 'vue'
|
|
||||||
import eventBus from '@/utils/eventBus'
|
|
||||||
import ContextMenuDetails from '@/components/data-visualization/canvas/ContextMenuDetails.vue'
|
import ContextMenuDetails from '@/components/data-visualization/canvas/ContextMenuDetails.vue'
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
|
||||||
const contextmenuStore = contextmenuStoreWithOut()
|
|
||||||
const copyStore = copyStoreWithOut()
|
|
||||||
const lockStore = lockStoreWithOut()
|
|
||||||
const snapshotStore = snapshotStoreWithOut()
|
|
||||||
const layerStore = layerStoreWithOut()
|
|
||||||
const composeStore = composeStoreWithOut()
|
|
||||||
|
|
||||||
const { areaData } = storeToRefs(composeStore)
|
|
||||||
const { curComponent } = storeToRefs(dvMainStore)
|
|
||||||
const copyData = ref(null)
|
|
||||||
const emit = defineEmits(['close'])
|
const emit = defineEmits(['close'])
|
||||||
const props = defineProps({
|
defineProps({
|
||||||
element: {
|
element: {
|
||||||
type: Object
|
type: Object
|
||||||
},
|
},
|
||||||
@ -30,96 +10,6 @@ const props = defineProps({
|
|||||||
type: Number
|
type: Number
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const { element, index } = toRefs(props)
|
|
||||||
|
|
||||||
const lock = () => {
|
|
||||||
lockStore.lock()
|
|
||||||
}
|
|
||||||
|
|
||||||
const unlock = () => {
|
|
||||||
lockStore.unlock()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 点击菜单时不取消当前组件的选中状态
|
|
||||||
const handleMouseUp = e => {
|
|
||||||
dvMainStore.setClickComponentStatus(true)
|
|
||||||
}
|
|
||||||
|
|
||||||
const cut = () => {
|
|
||||||
copyStore.cut()
|
|
||||||
}
|
|
||||||
|
|
||||||
const copy = () => {
|
|
||||||
copyStore.copy()
|
|
||||||
}
|
|
||||||
|
|
||||||
const hide = () => {
|
|
||||||
layerStore.hideComponent()
|
|
||||||
}
|
|
||||||
|
|
||||||
const paste = () => {
|
|
||||||
copyStore.paste(true)
|
|
||||||
snapshotStore.recordSnapshotCache('renderChart')
|
|
||||||
}
|
|
||||||
|
|
||||||
const deleteComponent = () => {
|
|
||||||
if (curComponent.value) {
|
|
||||||
dvMainStore.deleteComponentById(curComponent.value.id)
|
|
||||||
} else if (areaData.value.components.length) {
|
|
||||||
areaData.value.components.forEach(component => {
|
|
||||||
dvMainStore.deleteComponentById(component.id)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
eventBus.emit('hideArea-canvas-main')
|
|
||||||
snapshotStore.recordSnapshotCache('renderChart')
|
|
||||||
}
|
|
||||||
|
|
||||||
const upComponent = () => {
|
|
||||||
layerStore.upComponent()
|
|
||||||
snapshotStore.recordSnapshotCache('upComponent')
|
|
||||||
}
|
|
||||||
|
|
||||||
const downComponent = () => {
|
|
||||||
layerStore.downComponent()
|
|
||||||
snapshotStore.recordSnapshotCache('downComponent')
|
|
||||||
}
|
|
||||||
|
|
||||||
const topComponent = () => {
|
|
||||||
layerStore.topComponent()
|
|
||||||
snapshotStore.recordSnapshotCache('topComponent')
|
|
||||||
}
|
|
||||||
|
|
||||||
const bottomComponent = () => {
|
|
||||||
layerStore.bottomComponent()
|
|
||||||
snapshotStore.recordSnapshotCache('bottomComponent')
|
|
||||||
}
|
|
||||||
|
|
||||||
const componentCompose = () => {
|
|
||||||
composeStore.compose()
|
|
||||||
snapshotStore.recordSnapshotCache('componentCompose')
|
|
||||||
}
|
|
||||||
|
|
||||||
const decompose = () => {
|
|
||||||
composeStore.decompose()
|
|
||||||
snapshotStore.recordSnapshotCache('decompose')
|
|
||||||
}
|
|
||||||
|
|
||||||
// 阻止事件向父级组件传播调用父级的handleMouseDown 导致areaData 被隐藏
|
|
||||||
const handleComposeMouseDown = e => {
|
|
||||||
e.preventDefault()
|
|
||||||
e.stopPropagation()
|
|
||||||
}
|
|
||||||
|
|
||||||
const composeDivider = computed(() => {
|
|
||||||
return (
|
|
||||||
areaData.value.components.length ||
|
|
||||||
!(!curComponent || curComponent['isLock'] || curComponent['component'] != 'Group')
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
const onClick = () => {
|
|
||||||
dvMainStore.setCurComponent({ component: element.value, index })
|
|
||||||
}
|
|
||||||
|
|
||||||
const close = param => {
|
const close = param => {
|
||||||
emit('close', param)
|
emit('close', param)
|
||||||
|
@ -1,17 +1,15 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||||
import { contextmenuStoreWithOut } from '@/store/modules/data-visualization/contextmenu'
|
|
||||||
import { lockStoreWithOut } from '@/store/modules/data-visualization/lock'
|
import { lockStoreWithOut } from '@/store/modules/data-visualization/lock'
|
||||||
import { copyStoreWithOut } from '@/store/modules/data-visualization/copy'
|
import { copyStoreWithOut } from '@/store/modules/data-visualization/copy'
|
||||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||||
import { layerStoreWithOut } from '@/store/modules/data-visualization/layer'
|
import { layerStoreWithOut } from '@/store/modules/data-visualization/layer'
|
||||||
import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
|
import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import { computed, ref, toRefs } from 'vue'
|
import { computed, toRefs } from 'vue'
|
||||||
import { ElDivider, ElIcon } from 'element-plus-secondary'
|
import { ElDivider } from 'element-plus-secondary'
|
||||||
import eventBus from '@/utils/eventBus'
|
import eventBus from '@/utils/eventBus'
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
const contextmenuStore = contextmenuStoreWithOut()
|
|
||||||
const copyStore = copyStoreWithOut()
|
const copyStore = copyStoreWithOut()
|
||||||
const lockStore = lockStoreWithOut()
|
const lockStore = lockStoreWithOut()
|
||||||
const snapshotStore = snapshotStoreWithOut()
|
const snapshotStore = snapshotStoreWithOut()
|
||||||
@ -43,7 +41,7 @@ const unlock = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 点击菜单时不取消当前组件的选中状态
|
// 点击菜单时不取消当前组件的选中状态
|
||||||
const handleMouseUp = e => {
|
const handleMouseUp = () => {
|
||||||
dvMainStore.setClickComponentStatus(true)
|
dvMainStore.setClickComponentStatus(true)
|
||||||
activePosition.value === 'aside' && emit('close')
|
activePosition.value === 'aside' && emit('close')
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { getStyle, getCanvasStyle, getShapeItemStyle } from '@/utils/style'
|
import { getCanvasStyle, getShapeItemStyle } from '@/utils/style'
|
||||||
import ComponentWrapper from './ComponentWrapper.vue'
|
import ComponentWrapper from './ComponentWrapper.vue'
|
||||||
import { changeStyleWithScale } from '@/utils/translate'
|
import { changeStyleWithScale } from '@/utils/translate'
|
||||||
import { computed, nextTick, onMounted, ref, toRefs, watch, onBeforeUnmount } from 'vue'
|
import { computed, nextTick, onMounted, ref, toRefs, watch, onBeforeUnmount } from 'vue'
|
||||||
@ -63,8 +63,6 @@ const {
|
|||||||
const domId = 'preview-' + canvasId.value
|
const domId = 'preview-' + canvasId.value
|
||||||
const scaleWidth = ref(100)
|
const scaleWidth = ref(100)
|
||||||
const previewCanvas = ref(null)
|
const previewCanvas = ref(null)
|
||||||
const domWidth = ref()
|
|
||||||
const domHeight = ref()
|
|
||||||
const cellWidth = ref(10)
|
const cellWidth = ref(10)
|
||||||
const cellHeight = ref(10)
|
const cellHeight = ref(10)
|
||||||
const userViewEnlargeRef = ref(null)
|
const userViewEnlargeRef = ref(null)
|
||||||
@ -106,13 +104,6 @@ const getDownloadStatusMainHeight = () => {
|
|||||||
return `${maxHeight}px!important`
|
return `${maxHeight}px!important`
|
||||||
}
|
}
|
||||||
|
|
||||||
const forceRender = () => {
|
|
||||||
cellWidth.value = cellWidth.value + 0.01
|
|
||||||
nextTick(() => {
|
|
||||||
cellWidth.value = cellWidth.value - 0.01
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => previewActive.value,
|
() => previewActive.value,
|
||||||
() => {
|
() => {
|
||||||
@ -185,7 +176,7 @@ onMounted(() => {
|
|||||||
restore()
|
restore()
|
||||||
window.addEventListener('resize', restore)
|
window.addEventListener('resize', restore)
|
||||||
const erd = elementResizeDetectorMaker()
|
const erd = elementResizeDetectorMaker()
|
||||||
erd.listenTo(document.getElementById(domId), element => {
|
erd.listenTo(document.getElementById(domId), () => {
|
||||||
restore()
|
restore()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
@ -202,7 +193,7 @@ const userViewEnlargeOpen = (opt, item) => {
|
|||||||
opt
|
opt
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
const handleMouseDown = e => {
|
const handleMouseDown = () => {
|
||||||
dvMainStore.setCurComponent({ component: null, index: null })
|
dvMainStore.setCurComponent({ component: null, index: null })
|
||||||
}
|
}
|
||||||
defineExpose({
|
defineExpose({
|
||||||
|
@ -5,21 +5,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
|
||||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
|
||||||
import { contextmenuStoreWithOut } from '@/store/modules/data-visualization/contextmenu'
|
|
||||||
import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
|
|
||||||
import { storeToRefs } from 'pinia'
|
|
||||||
import { computed, toRefs } from 'vue'
|
import { computed, toRefs } from 'vue'
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
|
||||||
const snapshotStore = snapshotStoreWithOut()
|
|
||||||
const contextmenuStore = contextmenuStoreWithOut()
|
|
||||||
const composeStore = composeStoreWithOut()
|
|
||||||
|
|
||||||
const { curComponent } = storeToRefs(dvMainStore)
|
|
||||||
const { editor } = storeToRefs(composeStore)
|
|
||||||
const emit = defineEmits(['onStartResize', 'onStartMove', 'onDragging', 'onResizing', 'onMouseUp'])
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
baseWidth: {
|
baseWidth: {
|
||||||
required: true,
|
required: true,
|
||||||
|
@ -16,7 +16,7 @@ import { computed } from 'vue'
|
|||||||
|
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
const { mousePointShadowMap } = storeToRefs(dvMainStore)
|
const { mousePointShadowMap } = storeToRefs(dvMainStore)
|
||||||
const props = defineProps({
|
defineProps({
|
||||||
canvasId: {
|
canvasId: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
|
@ -81,7 +81,7 @@ import eventBus from '@/utils/eventBus'
|
|||||||
import calculateComponentPositionAndSize from '@/utils/calculateComponentPositionAndSize'
|
import calculateComponentPositionAndSize from '@/utils/calculateComponentPositionAndSize'
|
||||||
import { mod360 } from '@/utils/translate'
|
import { mod360 } from '@/utils/translate'
|
||||||
import { deepCopy, isPreventDrop } from '@/utils/utils'
|
import { deepCopy, isPreventDrop } from '@/utils/utils'
|
||||||
import { computed, nextTick, onMounted, ref, toRefs, reactive, onBeforeMount } from 'vue'
|
import { computed, nextTick, onMounted, ref, toRefs, reactive } from 'vue'
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||||
import { contextmenuStoreWithOut } from '@/store/modules/data-visualization/contextmenu'
|
import { contextmenuStoreWithOut } from '@/store/modules/data-visualization/contextmenu'
|
||||||
@ -256,11 +256,6 @@ const isActive = () => {
|
|||||||
return active.value && !element.value['isLock'] && isEditMode.value
|
return active.value && !element.value['isLock'] && isEditMode.value
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理旋转
|
|
||||||
const handleRotate = () => {
|
|
||||||
//doNothing
|
|
||||||
}
|
|
||||||
|
|
||||||
const userViewEnlargeOpen = opt => {
|
const userViewEnlargeOpen = opt => {
|
||||||
emit('userViewEnlargeOpen', opt)
|
emit('userViewEnlargeOpen', opt)
|
||||||
}
|
}
|
||||||
@ -340,10 +335,6 @@ const getCursor = () => {
|
|||||||
return result
|
return result
|
||||||
}
|
}
|
||||||
|
|
||||||
const outerShapeMouseDown = () => {
|
|
||||||
dvMainStore.setCurComponent({ component: element.value, index: index.value })
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleBoardMouseDownOnShape = e => {
|
const handleBoardMouseDownOnShape = e => {
|
||||||
dvMainStore.setCurComponent({ component: element.value, index: index.value })
|
dvMainStore.setCurComponent({ component: element.value, index: index.value })
|
||||||
handleMouseDownOnShape(e)
|
handleMouseDownOnShape(e)
|
||||||
@ -685,9 +676,6 @@ const linkageActive = computed(() => {
|
|||||||
return linkageSettingStatus.value && element.value.id === curLinkageView.value.id
|
return linkageSettingStatus.value && element.value.id === curLinkageView.value.id
|
||||||
})
|
})
|
||||||
|
|
||||||
const showViewDetails = () => {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
const linkJumpSetOpen = () => {
|
const linkJumpSetOpen = () => {
|
||||||
emit('linkJumpSetOpen')
|
emit('linkJumpSetOpen')
|
||||||
}
|
}
|
||||||
|
@ -10,9 +10,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||||
import { computed } from 'vue'
|
import { computed } from 'vue'
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
|
||||||
import { isMainCanvas } from '@/utils/canvasUtils'
|
import { isMainCanvas } from '@/utils/canvasUtils'
|
||||||
const { t } = useI18n()
|
|
||||||
|
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
|
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
import { toRefs } from 'vue'
|
import { toRefs } from 'vue'
|
||||||
import { propTypes } from '@/utils/propTypes'
|
import { propTypes } from '@/utils/propTypes'
|
||||||
import Icon from '../icon-custom/src/Icon.vue'
|
import Icon from '../icon-custom/src/Icon.vue'
|
||||||
import { ElCol, ElIcon } from 'element-plus-secondary'
|
import { ElCol } from 'element-plus-secondary'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
title: propTypes.string,
|
title: propTypes.string,
|
||||||
|
@ -145,23 +145,13 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import {
|
import { computed, onBeforeUnmount, onMounted, reactive, toRefs, watch } from 'vue'
|
||||||
computed,
|
|
||||||
onBeforeUnmount,
|
|
||||||
onMounted,
|
|
||||||
onUnmounted,
|
|
||||||
reactive,
|
|
||||||
ref,
|
|
||||||
toRefs,
|
|
||||||
watch
|
|
||||||
} from 'vue'
|
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||||
import eventBus from '@/utils/eventBus'
|
import eventBus from '@/utils/eventBus'
|
||||||
import { useEmitt } from '@/hooks/web/useEmitt'
|
import { useEmitt } from '@/hooks/web/useEmitt'
|
||||||
import { getViewLinkageGather } from '@/api/visualization/linkage'
|
|
||||||
import { copyStoreWithOut } from '@/store/modules/data-visualization/copy'
|
import { copyStoreWithOut } from '@/store/modules/data-visualization/copy'
|
||||||
import { exportExcelDownload } from '@/views/chart/components/js/util'
|
import { exportExcelDownload } from '@/views/chart/components/js/util'
|
||||||
import FieldsList from '@/custom-component/rich-text/FieldsList.vue'
|
import FieldsList from '@/custom-component/rich-text/FieldsList.vue'
|
||||||
@ -229,10 +219,6 @@ const barShowCheck = barName => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const linkageCheckShowAttach = computed(() => {
|
|
||||||
return curLinkageView.value !== element.value
|
|
||||||
})
|
|
||||||
|
|
||||||
const mainBackgroundShow = computed(() => {
|
const mainBackgroundShow = computed(() => {
|
||||||
return !['batchOpt', 'multiplexing'].includes(showPosition.value)
|
return !['batchOpt', 'multiplexing'].includes(showPosition.value)
|
||||||
})
|
})
|
||||||
@ -262,18 +248,9 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const { element, active, index, showPosition, canvasId } = toRefs(props)
|
const { element, index, showPosition, canvasId } = toRefs(props)
|
||||||
const {
|
const { batchOptStatus, pcMatrixCount, curComponent, componentData, canvasViewInfo } =
|
||||||
batchOptStatus,
|
storeToRefs(dvMainStore)
|
||||||
pcMatrixCount,
|
|
||||||
curComponent,
|
|
||||||
componentData,
|
|
||||||
canvasStyleData,
|
|
||||||
targetLinkageInfo,
|
|
||||||
curLinkageView,
|
|
||||||
dvInfo,
|
|
||||||
canvasViewInfo
|
|
||||||
} = storeToRefs(dvMainStore)
|
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
systemOS: 'Mac',
|
systemOS: 'Mac',
|
||||||
@ -401,25 +378,6 @@ const batchOptChange = val => {
|
|||||||
}
|
}
|
||||||
// 批量操作-End
|
// 批量操作-End
|
||||||
|
|
||||||
// 联动-Begin
|
|
||||||
const linkageSetting = () => {
|
|
||||||
// sourceViewId 也加入查询
|
|
||||||
const targetViewIds = componentData.value
|
|
||||||
.filter(item => item.component === 'UserView')
|
|
||||||
.map(item => item.id)
|
|
||||||
|
|
||||||
// 获取当前仪表板当前视图联动信息
|
|
||||||
const requestInfo = {
|
|
||||||
dvId: dvInfo.value.id,
|
|
||||||
sourceViewId: curComponent.value.id,
|
|
||||||
targetViewIds: targetViewIds,
|
|
||||||
linkageInfo: null
|
|
||||||
}
|
|
||||||
getViewLinkageGather(requestInfo).then(rsp => {
|
|
||||||
dvMainStore.setLinkageTargetInfo(rsp.data)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const linkageChange = item => {
|
const linkageChange = item => {
|
||||||
let checkResult = false
|
let checkResult = false
|
||||||
if (item.linkageFilters && item.linkageFilters.length > 0) {
|
if (item.linkageFilters && item.linkageFilters.length > 0) {
|
||||||
@ -458,25 +416,10 @@ const existLinkage = computed(() => {
|
|||||||
return linkageFiltersCount
|
return linkageFiltersCount
|
||||||
})
|
})
|
||||||
|
|
||||||
const linkageInfo = computed(() => {
|
|
||||||
return targetLinkageInfo.value[element.value.id]
|
|
||||||
})
|
|
||||||
|
|
||||||
// 清除相同sourceViewId 的 联动条件
|
// 清除相同sourceViewId 的 联动条件
|
||||||
const clearLinkage = () => {
|
const clearLinkage = () => {
|
||||||
dvMainStore.clearViewLinkage(element.value.id)
|
dvMainStore.clearViewLinkage(element.value.id)
|
||||||
}
|
}
|
||||||
const linkageSetOpen = () => {
|
|
||||||
emits('linkageSetOpen')
|
|
||||||
}
|
|
||||||
|
|
||||||
// 联动-End
|
|
||||||
|
|
||||||
// 跳转-Begin
|
|
||||||
const linkJumpSetOpen = () => {
|
|
||||||
emits('linkJumpSetOpen')
|
|
||||||
}
|
|
||||||
// 跳转-End
|
|
||||||
|
|
||||||
// 富文本-Begin
|
// 富文本-Begin
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, computed, toRefs } from 'vue'
|
import { computed, toRefs } from 'vue'
|
||||||
import { ElIcon } from 'element-plus-secondary'
|
import { ElIcon } from 'element-plus-secondary'
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
@ -36,8 +36,6 @@ const props = defineProps({
|
|||||||
})
|
})
|
||||||
|
|
||||||
const { width, asidePosition, sideName, themeInfo } = toRefs(props)
|
const { width, asidePosition, sideName, themeInfo } = toRefs(props)
|
||||||
const isCollapse = ref(false)
|
|
||||||
const collapseWidth = ref(30)
|
|
||||||
const collapseChange = () => {
|
const collapseChange = () => {
|
||||||
canvasCollapse.value[sideName.value] = !canvasCollapse.value[sideName.value]
|
canvasCollapse.value[sideName.value] = !canvasCollapse.value[sideName.value]
|
||||||
}
|
}
|
||||||
|
@ -2,14 +2,9 @@
|
|||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
import { Icon } from '@/components/icon-custom'
|
import { Icon } from '@/components/icon-custom'
|
||||||
import { useUserStoreWithOut } from '@/store/modules/user'
|
import { useUserStoreWithOut } from '@/store/modules/user'
|
||||||
import { usePermissionStoreWithOut } from '@/store/modules/permission'
|
|
||||||
import { switchLangApi } from '@/api/user'
|
|
||||||
const permissionStore = usePermissionStoreWithOut()
|
|
||||||
const userStore = useUserStoreWithOut()
|
const userStore = useUserStoreWithOut()
|
||||||
const language = ref(null)
|
const language = ref(null)
|
||||||
const handleSetLanguage = lang => {
|
const handleSetLanguage = lang => lang
|
||||||
test
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
language.value = userStore.getLanguage
|
language.value = userStore.getLanguage
|
||||||
})
|
})
|
||||||
|
@ -25,7 +25,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, toRefs } from 'vue'
|
import { reactive } from 'vue'
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||||
import { checkAddHttp, deepCopy } from '@/utils/utils'
|
import { checkAddHttp, deepCopy } from '@/utils/utils'
|
||||||
|
@ -8,11 +8,10 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onBeforeUnmount, onMounted, reactive, ref, toRefs } from 'vue'
|
import { onBeforeUnmount, reactive, ref, toRefs } from 'vue'
|
||||||
import CodeMirror from '@/views/visualized/data/dataset/form/CodeMirror.vue'
|
import CodeMirror from '@/views/visualized/data/dataset/form/CodeMirror.vue'
|
||||||
const myCm = ref(null)
|
const myCm = ref(null)
|
||||||
const mirror = ref(null)
|
const mirror = ref(null)
|
||||||
const emits = defineEmits(['editorClose'])
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
linkJumpInfoArray: Array,
|
linkJumpInfoArray: Array,
|
||||||
linkJumpInfo: Object
|
linkJumpInfo: Object
|
||||||
|
@ -399,7 +399,6 @@ import { ElMessage, ElScrollbar } from 'element-plus-secondary'
|
|||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
import { getDatasetDetails, listFieldByDatasetGroup } from '@/api/dataset'
|
import { getDatasetDetails, listFieldByDatasetGroup } from '@/api/dataset'
|
||||||
import { BusiTreeRequest } from '@/models/tree/TreeNode'
|
import { BusiTreeRequest } from '@/models/tree/TreeNode'
|
||||||
import { CalcFieldType } from '@/views/visualized/data/dataset/form/CalcFieldEdit.vue'
|
|
||||||
import JumpSetOuterContentEditor from '@/components/visualization/JumpSetOuterContentEditor.vue'
|
import JumpSetOuterContentEditor from '@/components/visualization/JumpSetOuterContentEditor.vue'
|
||||||
import { Search } from '@element-plus/icons-vue'
|
import { Search } from '@element-plus/icons-vue'
|
||||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||||
@ -425,7 +424,6 @@ const state = reactive({
|
|||||||
name2Auto: [],
|
name2Auto: [],
|
||||||
searchField: '',
|
searchField: '',
|
||||||
searchFunction: '',
|
searchFunction: '',
|
||||||
loading: false,
|
|
||||||
inputType: 'self',
|
inputType: 'self',
|
||||||
fieldName: 'name',
|
fieldName: 'name',
|
||||||
tableRadio: null,
|
tableRadio: null,
|
||||||
@ -475,7 +473,6 @@ const state = reactive({
|
|||||||
quota: []
|
quota: []
|
||||||
})
|
})
|
||||||
|
|
||||||
const emits = defineEmits(['closeJumpSetDialog'])
|
|
||||||
const outerContentEditor = ref(null)
|
const outerContentEditor = ref(null)
|
||||||
|
|
||||||
const dialogInit = viewItem => {
|
const dialogInit = viewItem => {
|
||||||
@ -602,7 +599,7 @@ const save = () => {
|
|||||||
}
|
}
|
||||||
state.loading = true
|
state.loading = true
|
||||||
updateJumpSet(state.linkJump)
|
updateJumpSet(state.linkJump)
|
||||||
.then(rsp => {
|
.then(() => {
|
||||||
snapshotStore.recordSnapshotCache()
|
snapshotStore.recordSnapshotCache()
|
||||||
ElMessage.success('保存成功')
|
ElMessage.success('保存成功')
|
||||||
// 刷新跳转信息
|
// 刷新跳转信息
|
||||||
@ -616,7 +613,7 @@ const save = () => {
|
|||||||
state.loading = false
|
state.loading = false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const nodeClick = (data, node?) => {
|
const nodeClick = data => {
|
||||||
state.linkJumpInfo = state.mapJumpInfoArray[data.sourceFieldId]
|
state.linkJumpInfo = state.mapJumpInfoArray[data.sourceFieldId]
|
||||||
if (!state.linkJumpInfo.linkType) {
|
if (!state.linkJumpInfo.linkType) {
|
||||||
state.linkJumpInfo.linkType = 'outer'
|
state.linkJumpInfo.linkType = 'outer'
|
||||||
@ -654,20 +651,13 @@ const getPanelViewList = dvId => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const dvNodeClick = (data, node) => {
|
const dvNodeClick = data => {
|
||||||
if (data.leaf) {
|
if (data.leaf) {
|
||||||
state.linkJumpInfo.targetViewInfoList = []
|
state.linkJumpInfo.targetViewInfoList = []
|
||||||
addLinkJumpField()
|
addLinkJumpField()
|
||||||
getPanelViewList(data.id)
|
getPanelViewList(data.id)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const inputVal = value => {
|
|
||||||
if (!value) {
|
|
||||||
state.linkJumpInfo.targetViewInfoList = []
|
|
||||||
state.viewIdFieldArrayMap = {}
|
|
||||||
state.currentLinkPanelViewArray = []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const addLinkJumpField = () => {
|
const addLinkJumpField = () => {
|
||||||
state.linkJumpInfo.targetViewInfoList.push({
|
state.linkJumpInfo.targetViewInfoList.push({
|
||||||
targetViewId: '',
|
targetViewId: '',
|
||||||
@ -677,12 +667,6 @@ const addLinkJumpField = () => {
|
|||||||
const deleteLinkJumpField = index => {
|
const deleteLinkJumpField = index => {
|
||||||
state.linkJumpInfo.targetViewInfoList.splice(index, 1)
|
state.linkJumpInfo.targetViewInfoList.splice(index, 1)
|
||||||
}
|
}
|
||||||
const normalizer = node => {
|
|
||||||
// 去掉children=null的属性
|
|
||||||
if (node.children === null || node.children === 'null') {
|
|
||||||
delete node.children
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const viewInfoOnChange = targetViewInfo => {
|
const viewInfoOnChange = targetViewInfo => {
|
||||||
targetViewInfo.targetFieldId = null
|
targetViewInfo.targetFieldId = null
|
||||||
}
|
}
|
||||||
@ -697,19 +681,6 @@ const cancel = () => {
|
|||||||
state.initState = false
|
state.initState = false
|
||||||
}
|
}
|
||||||
|
|
||||||
const defaultForm = {
|
|
||||||
originName: '', // 物理字段名
|
|
||||||
name: '', // 字段显示名
|
|
||||||
groupType: 'd', // d=维度,q=指标
|
|
||||||
type: 'VARCHAR',
|
|
||||||
deType: 0, // 字段类型
|
|
||||||
extField: 2,
|
|
||||||
id: '',
|
|
||||||
checked: true
|
|
||||||
}
|
|
||||||
|
|
||||||
const fieldForm = reactive<CalcFieldType>({ ...(defaultForm as CalcFieldType) })
|
|
||||||
|
|
||||||
const insertFieldToCodeMirror = (value: string) => {
|
const insertFieldToCodeMirror = (value: string) => {
|
||||||
outerContentEditor.value.insertFieldToCodeMirror(value)
|
outerContentEditor.value.insertFieldToCodeMirror(value)
|
||||||
}
|
}
|
||||||
@ -724,14 +695,14 @@ const filterNodeMethod = (value, data) => {
|
|||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => state.showSelected,
|
() => state.showSelected,
|
||||||
(newValue, oldValue) => {
|
newValue => {
|
||||||
linkJumpInfoTree.value?.filter(newValue)
|
linkJumpInfoTree.value?.filter(newValue)
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => outerContentShow.value,
|
() => outerContentShow.value,
|
||||||
(newValue, oldValue) => {
|
newValue => {
|
||||||
if (newValue) {
|
if (newValue) {
|
||||||
codeMirrorContentSet(state.linkJumpInfo.content)
|
codeMirrorContentSet(state.linkJumpInfo.content)
|
||||||
}
|
}
|
||||||
|
@ -113,10 +113,10 @@
|
|||||||
import { checkSameDataSet } from '@/api/chart'
|
import { checkSameDataSet } from '@/api/chart'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||||
import { computed, defineEmits, onMounted, reactive, toRefs } from 'vue'
|
import { computed, onMounted, toRefs } from 'vue'
|
||||||
import { Plus, Delete } from '@element-plus/icons-vue'
|
import { Plus, Delete } from '@element-plus/icons-vue'
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
const { linkageSettingStatus, targetLinkageInfo, curLinkageView } = storeToRefs(dvMainStore)
|
const { targetLinkageInfo, curLinkageView } = storeToRefs(dvMainStore)
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
element: {
|
element: {
|
||||||
@ -136,15 +136,7 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const { element, active, activeModel } = toRefs(props)
|
const { element } = toRefs(props)
|
||||||
const emits = defineEmits(['showViewDetails'])
|
|
||||||
|
|
||||||
const state = reactive({
|
|
||||||
componentType: null,
|
|
||||||
linkageActiveStatus: false,
|
|
||||||
editFilter: ['view', 'custom']
|
|
||||||
})
|
|
||||||
|
|
||||||
const linkageInfo = computed(() => {
|
const linkageInfo = computed(() => {
|
||||||
return targetLinkageInfo.value[element.value.id]
|
return targetLinkageInfo.value[element.value.id]
|
||||||
})
|
})
|
||||||
@ -153,17 +145,6 @@ const sourceLinkageInfo = computed(() => {
|
|||||||
return targetLinkageInfo.value[curLinkageView.value.id]
|
return targetLinkageInfo.value[curLinkageView.value.id]
|
||||||
})
|
})
|
||||||
|
|
||||||
const showViewDetails = () => {
|
|
||||||
emits('showViewDetails')
|
|
||||||
}
|
|
||||||
const edit = () => {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
const linkageEdit = () => {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
const deleteLinkageField = index => {
|
const deleteLinkageField = index => {
|
||||||
linkageInfo.value.linkageFields.splice(index, 1)
|
linkageInfo.value.linkageFields.splice(index, 1)
|
||||||
}
|
}
|
||||||
|
@ -198,7 +198,6 @@ import {
|
|||||||
import { getDatasetDetails } from '@/api/dataset'
|
import { getDatasetDetails } from '@/api/dataset'
|
||||||
import { findAllViewsId } from '@/utils/canvasUtils'
|
import { findAllViewsId } from '@/utils/canvasUtils'
|
||||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||||
import { checkSameDataSet } from '@/api/chart'
|
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
const { dvInfo, canvasViewInfo, componentData } = storeToRefs(dvMainStore)
|
const { dvInfo, canvasViewInfo, componentData } = storeToRefs(dvMainStore)
|
||||||
const linkageInfoTree = ref(null)
|
const linkageInfoTree = ref(null)
|
||||||
@ -314,7 +313,7 @@ const saveLinkageSetting = () => {
|
|||||||
}
|
}
|
||||||
loading.value = true
|
loading.value = true
|
||||||
saveLinkage(request)
|
saveLinkage(request)
|
||||||
.then(rsp => {
|
.then(() => {
|
||||||
snapshotStore.recordSnapshotCache()
|
snapshotStore.recordSnapshotCache()
|
||||||
ElMessage.success('保存成功')
|
ElMessage.success('保存成功')
|
||||||
// 刷新联动信息
|
// 刷新联动信息
|
||||||
@ -338,7 +337,7 @@ const cancelLinkageSetting = () => {
|
|||||||
dvMainStore.clearLinkageSettingInfo()
|
dvMainStore.clearLinkageSettingInfo()
|
||||||
}
|
}
|
||||||
|
|
||||||
const nodeClick = (data, node?) => {
|
const nodeClick = data => {
|
||||||
state.linkageInfo = data
|
state.linkageInfo = data
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -398,7 +397,7 @@ const filterNodeMethod = (value, data) => {
|
|||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => state.showSelected,
|
() => state.showSelected,
|
||||||
(newValue, oldValue) => {
|
newValue => {
|
||||||
linkageInfoTree.value?.filter(newValue)
|
linkageInfoTree.value?.filter(newValue)
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
@ -150,20 +150,16 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
|||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import eventBus from '@/utils/eventBus'
|
import eventBus from '@/utils/eventBus'
|
||||||
import { copyStoreWithOut } from '@/store/modules/data-visualization/copy'
|
import { copyStoreWithOut } from '@/store/modules/data-visualization/copy'
|
||||||
import { lockStoreWithOut } from '@/store/modules/data-visualization/lock'
|
|
||||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||||
import { layerStoreWithOut } from '@/store/modules/data-visualization/layer'
|
import { layerStoreWithOut } from '@/store/modules/data-visualization/layer'
|
||||||
import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
|
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
import TabCarouselDialog from '@/components/visualization/TabCarouselDialog.vue'
|
import TabCarouselDialog from '@/components/visualization/TabCarouselDialog.vue'
|
||||||
import HyperlinksDialog from '@/components/visualization/HyperlinksDialog.vue'
|
import HyperlinksDialog from '@/components/visualization/HyperlinksDialog.vue'
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const snapshotStore = snapshotStoreWithOut()
|
const snapshotStore = snapshotStoreWithOut()
|
||||||
const copyStore = copyStoreWithOut()
|
const copyStore = copyStoreWithOut()
|
||||||
const lockStore = lockStoreWithOut()
|
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
const layerStore = layerStoreWithOut()
|
const layerStore = layerStoreWithOut()
|
||||||
const composeStore = composeStoreWithOut()
|
|
||||||
const { curComponent, componentData, dvInfo } = storeToRefs(dvMainStore)
|
const { curComponent, componentData, dvInfo } = storeToRefs(dvMainStore)
|
||||||
const customTabsSort = ref(null)
|
const customTabsSort = ref(null)
|
||||||
const emits = defineEmits(['amRemoveItem', 'linkJumpSet', 'boardSet'])
|
const emits = defineEmits(['amRemoveItem', 'linkJumpSet', 'boardSet'])
|
||||||
@ -259,21 +255,11 @@ const handleMouseUp = () => {
|
|||||||
dvMainStore.setClickComponentStatus(true)
|
dvMainStore.setClickComponentStatus(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
const cut = () => {
|
|
||||||
deleteCurCondition()
|
|
||||||
copyStore.cut()
|
|
||||||
}
|
|
||||||
|
|
||||||
const copy = () => {
|
const copy = () => {
|
||||||
copyStore.copy()
|
copyStore.copy()
|
||||||
copyStore.paste(false)
|
copyStore.paste(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
const paste = () => {
|
|
||||||
copyStore.paste(false)
|
|
||||||
snapshotStore.recordSnapshotCache('SettingMenu-paste')
|
|
||||||
}
|
|
||||||
|
|
||||||
const deleteComponent = () => {
|
const deleteComponent = () => {
|
||||||
if (
|
if (
|
||||||
curComponent.value.type === 'custom-button' &&
|
curComponent.value.type === 'custom-button' &&
|
||||||
|
@ -51,7 +51,7 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import ComponentWrapper from '@/components/data-visualization/canvas/ComponentWrapper.vue'
|
import ComponentWrapper from '@/components/data-visualization/canvas/ComponentWrapper.vue'
|
||||||
import { computed, nextTick, ref } from 'vue'
|
import { nextTick, ref } from 'vue'
|
||||||
import { toPng } from 'html-to-image'
|
import { toPng } from 'html-to-image'
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
import { deepCopy } from '@/utils/utils'
|
import { deepCopy } from '@/utils/utils'
|
||||||
@ -60,7 +60,6 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
|||||||
import { VIEW_DETAILS_BASH_STYLE } from '@/views/chart/components/editor/util/dataVisualiztion'
|
import { VIEW_DETAILS_BASH_STYLE } from '@/views/chart/components/editor/util/dataVisualiztion'
|
||||||
import { exportExcelDownload } from '@/views/chart/components/js/util'
|
import { exportExcelDownload } from '@/views/chart/components/js/util'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import { downloadCanvas } from '@/utils/imgUtils'
|
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
const dialogShow = ref(false)
|
const dialogShow = ref(false)
|
||||||
let viewInfo = ref(null)
|
let viewInfo = ref(null)
|
||||||
@ -72,10 +71,6 @@ const optType = ref(null)
|
|||||||
const chartComponentDetails = ref(null)
|
const chartComponentDetails = ref(null)
|
||||||
const { dvInfo } = storeToRefs(dvMainStore)
|
const { dvInfo } = storeToRefs(dvMainStore)
|
||||||
|
|
||||||
const titleInfo = computed(() => {
|
|
||||||
return optType.value === 'enlarge' ? config?.value?.name : '查看数据'
|
|
||||||
})
|
|
||||||
|
|
||||||
const dialogInit = (canvasStyle, view, item, opt) => {
|
const dialogInit = (canvasStyle, view, item, opt) => {
|
||||||
optType.value = opt
|
optType.value = opt
|
||||||
dialogShow.value = true
|
dialogShow.value = true
|
||||||
|
@ -32,7 +32,7 @@ const snapshotStore = snapshotStoreWithOut()
|
|||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
const { curComponent } = storeToRefs(dvMainStore)
|
const { curComponent } = storeToRefs(dvMainStore)
|
||||||
|
|
||||||
const props = withDefaults(
|
withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
themes: EditorTheme
|
themes: EditorTheme
|
||||||
}>(),
|
}>(),
|
||||||
|
@ -75,7 +75,7 @@ const init = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleRemove = (file, fileList) => {
|
const handleRemove = () => {
|
||||||
state.uploadDisabled = false
|
state.uploadDisabled = false
|
||||||
imgUrlInner.value = null
|
imgUrlInner.value = null
|
||||||
state.fileList = []
|
state.fileList = []
|
||||||
@ -92,9 +92,6 @@ const upload = file => {
|
|||||||
emits('onImgChange', fileUrl)
|
emits('onImgChange', fileUrl)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const goFile = () => {
|
|
||||||
files.value.click()
|
|
||||||
}
|
|
||||||
|
|
||||||
const reUpload = e => {
|
const reUpload = e => {
|
||||||
const file = e.target.files[0]
|
const file = e.target.files[0]
|
||||||
|
@ -24,7 +24,6 @@
|
|||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||||
import { hexColorToRGBA } from '@/views/chart/components/js/util'
|
import { hexColorToRGBA } from '@/views/chart/components/js/util'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import { imgUrlTrans } from '@/utils/imgUtils'
|
|
||||||
import { computed, toRefs } from 'vue'
|
import { computed, toRefs } from 'vue'
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
const { curComponent } = storeToRefs(dvMainStore)
|
const { curComponent } = storeToRefs(dvMainStore)
|
||||||
@ -69,17 +68,6 @@ const itemActive = computed(() => {
|
|||||||
const setBoard = () => {
|
const setBoard = () => {
|
||||||
curComponent.value.commonBackground.innerImage = template.value.url
|
curComponent.value.commonBackground.innerImage = template.value.url
|
||||||
}
|
}
|
||||||
|
|
||||||
const classBackground = computed(() => {
|
|
||||||
if (template.value.url) {
|
|
||||||
return {
|
|
||||||
background: `url(${imgUrlTrans(template.value.url)}) no-repeat`,
|
|
||||||
'background-size': `100% 100%`
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
@ -24,7 +24,6 @@
|
|||||||
import Icon from '@/components/icon-custom/src/Icon.vue'
|
import Icon from '@/components/icon-custom/src/Icon.vue'
|
||||||
import { computed, toRefs } from 'vue'
|
import { computed, toRefs } from 'vue'
|
||||||
import { hexColorToRGBA } from '@/views/chart/components/js/util'
|
import { hexColorToRGBA } from '@/views/chart/components/js/util'
|
||||||
import { imgUrlTrans } from '@/utils/imgUtils'
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
template: {
|
template: {
|
||||||
@ -58,16 +57,6 @@ const mainIconClass = computed(() => {
|
|||||||
const itemActive = computed(() => {
|
const itemActive = computed(() => {
|
||||||
return commonBackground.value && commonBackground.value.innerImage === template.value.url
|
return commonBackground.value && commonBackground.value.innerImage === template.value.url
|
||||||
})
|
})
|
||||||
const classBackground = computed(() => {
|
|
||||||
if (template.value.url) {
|
|
||||||
return {
|
|
||||||
background: `url(${imgUrlTrans(template.value.url)}) no-repeat`,
|
|
||||||
'background-size': `100% 100%`
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const setBoard = () => {
|
const setBoard = () => {
|
||||||
commonBackground.value.innerImage = template.value.url
|
commonBackground.value.innerImage = template.value.url
|
||||||
|
@ -278,10 +278,6 @@ const reUpload = e => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const mainIconClass = itemUrl => {
|
|
||||||
return itemUrl.url.replace('board/', '').replace('.svg', '')
|
|
||||||
}
|
|
||||||
|
|
||||||
const queryBackground = () => {
|
const queryBackground = () => {
|
||||||
queryVisualizationBackground().then(response => {
|
queryVisualizationBackground().then(response => {
|
||||||
state.BackgroundShowMap = response.data
|
state.BackgroundShowMap = response.data
|
||||||
@ -300,10 +296,8 @@ queryBackground()
|
|||||||
const commitStyle = () => {
|
const commitStyle = () => {
|
||||||
snapshotStore.recordSnapshotCache()
|
snapshotStore.recordSnapshotCache()
|
||||||
}
|
}
|
||||||
const onChangeType = () => {
|
|
||||||
commitStyle()
|
const handleRemove = () => {
|
||||||
}
|
|
||||||
const handleRemove = (file, fileList) => {
|
|
||||||
state.uploadDisabled = false
|
state.uploadDisabled = false
|
||||||
state.commonBackground['outerImage'] = null
|
state.commonBackground['outerImage'] = null
|
||||||
state.fileList = []
|
state.fileList = []
|
||||||
@ -348,7 +342,7 @@ onMounted(() => {
|
|||||||
init()
|
init()
|
||||||
const erd = elementResizeDetectorMaker()
|
const erd = elementResizeDetectorMaker()
|
||||||
containerWidth.value = bgForm.value?.offsetWidth
|
containerWidth.value = bgForm.value?.offsetWidth
|
||||||
erd.listenTo(bgForm.value, element => {
|
erd.listenTo(bgForm.value, () => {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
containerWidth.value = bgForm.value?.offsetWidth
|
containerWidth.value = bgForm.value?.offsetWidth
|
||||||
})
|
})
|
||||||
|
@ -108,26 +108,24 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
|
import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
|
||||||
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
|
import { onMounted, reactive, ref, watch } from 'vue'
|
||||||
import { imgUrlTrans } from '@/utils/imgUtils'
|
import { imgUrlTrans } from '@/utils/imgUtils'
|
||||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||||
import { beforeUploadCheck, uploadFileResult } from '@/api/staticResource'
|
import { beforeUploadCheck, uploadFileResult } from '@/api/staticResource'
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
import elementResizeDetectorMaker from 'element-resize-detector'
|
|
||||||
import { ElButton, ElMessage } from 'element-plus-secondary'
|
import { ElButton, ElMessage } from 'element-plus-secondary'
|
||||||
import ImgViewDialog from '@/custom-component/ImgViewDialog.vue'
|
import ImgViewDialog from '@/custom-component/ImgViewDialog.vue'
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
const snapshotStore = snapshotStoreWithOut()
|
const snapshotStore = snapshotStoreWithOut()
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
const emits = defineEmits(['onBackgroundChange'])
|
|
||||||
const files = ref(null)
|
const files = ref(null)
|
||||||
const maxImageSize = 15000000
|
const maxImageSize = 15000000
|
||||||
|
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
const { canvasStyleData } = storeToRefs(dvMainStore)
|
const { canvasStyleData } = storeToRefs(dvMainStore)
|
||||||
|
|
||||||
const props = withDefaults(
|
withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
themes?: EditorTheme
|
themes?: EditorTheme
|
||||||
}>(),
|
}>(),
|
||||||
@ -175,7 +173,7 @@ const init = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleRemove = (file, fileList) => {
|
const handleRemove = () => {
|
||||||
state.uploadDisabled = false
|
state.uploadDisabled = false
|
||||||
canvasStyleData.value.background = null
|
canvasStyleData.value.background = null
|
||||||
state.fileList = []
|
state.fileList = []
|
||||||
@ -197,7 +195,6 @@ const onBackgroundChange = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const bgForm = ref()
|
const bgForm = ref()
|
||||||
const containerWidth = ref()
|
|
||||||
|
|
||||||
const computedBackgroundColorPickerWidth = 50
|
const computedBackgroundColorPickerWidth = 50
|
||||||
|
|
||||||
|
@ -4,7 +4,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
|||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
const { curComponent } = storeToRefs(dvMainStore)
|
const { curComponent } = storeToRefs(dvMainStore)
|
||||||
const props = withDefaults(
|
withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
themes?: EditorTheme
|
themes?: EditorTheme
|
||||||
}>(),
|
}>(),
|
||||||
|
@ -21,7 +21,7 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const { propValue, element } = toRefs(props)
|
const { element } = toRefs(props)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
@ -26,7 +26,7 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const { propValue, element } = toRefs(props)
|
const { element } = toRefs(props)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
@ -6,7 +6,6 @@ import { styleData, selectKey, optionMap, horizontalPosition } from '@/utils/att
|
|||||||
import ComponentPosition from '@/components/visualization/common/ComponentPosition.vue'
|
import ComponentPosition from '@/components/visualization/common/ComponentPosition.vue'
|
||||||
import BackgroundOverallCommon from '@/components/visualization/component-background/BackgroundOverallCommon.vue'
|
import BackgroundOverallCommon from '@/components/visualization/component-background/BackgroundOverallCommon.vue'
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
import _ from 'lodash'
|
|
||||||
import elementResizeDetectorMaker from 'element-resize-detector'
|
import elementResizeDetectorMaker from 'element-resize-detector'
|
||||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||||
const snapshotStore = snapshotStoreWithOut()
|
const snapshotStore = snapshotStoreWithOut()
|
||||||
@ -45,18 +44,6 @@ const styleKeys = computed(() => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const styleKeysGroup = computed(() => {
|
|
||||||
const _list = []
|
|
||||||
_.forEach(styleKeys.value, (x, i) => {
|
|
||||||
const index = i % 2
|
|
||||||
if (_list[index] === undefined) {
|
|
||||||
_list[index] = []
|
|
||||||
}
|
|
||||||
_list[index].push(x)
|
|
||||||
})
|
|
||||||
return _list
|
|
||||||
})
|
|
||||||
|
|
||||||
const onChange = () => {
|
const onChange = () => {
|
||||||
element.value.collapseName = activeName
|
element.value.collapseName = activeName
|
||||||
}
|
}
|
||||||
@ -99,14 +86,6 @@ const colorPickerWidth = computed(() => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const onStyleChange = computed(() => {
|
|
||||||
if (containerWidth.value <= 240) {
|
|
||||||
return 108
|
|
||||||
} else {
|
|
||||||
return 197
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const backgroundCustomShow = computed(() => {
|
const backgroundCustomShow = computed(() => {
|
||||||
return (
|
return (
|
||||||
dashboardActive.value ||
|
dashboardActive.value ||
|
||||||
@ -117,7 +96,7 @@ const backgroundCustomShow = computed(() => {
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
const erd = elementResizeDetectorMaker()
|
const erd = elementResizeDetectorMaker()
|
||||||
containerWidth.value = containerRef.value?.offsetWidth
|
containerWidth.value = containerRef.value?.offsetWidth
|
||||||
erd.listenTo(containerRef.value, element => {
|
erd.listenTo(containerRef.value, () => {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
containerWidth.value = containerRef.value?.offsetWidth
|
containerWidth.value = containerRef.value?.offsetWidth
|
||||||
})
|
})
|
||||||
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const { name, value, min, max, step, themes, disabled } = toRefs(props)
|
const { value, min, max, step, themes, disabled } = toRefs(props)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
<script setup lang="tsx">
|
<script setup lang="tsx">
|
||||||
import { reactive, ref, toRefs } from 'vue'
|
import { reactive, ref } from 'vue'
|
||||||
import eventBus from '@/utils/eventBus'
|
import eventBus from '@/utils/eventBus'
|
||||||
import Icon from '@/components/icon-custom/src/Icon.vue'
|
import Icon from '@/components/icon-custom/src/Icon.vue'
|
||||||
import { CANVAS_MATERIAL } from '@/custom-component/common/ComponentConfig'
|
import { CANVAS_MATERIAL } from '@/custom-component/common/ComponentConfig'
|
||||||
import { ElScrollbar } from 'element-plus-secondary'
|
import { ElScrollbar } from 'element-plus-secondary'
|
||||||
|
|
||||||
const props = defineProps({
|
defineProps({
|
||||||
propValue: {
|
propValue: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => []
|
default: () => []
|
||||||
@ -20,9 +20,6 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const { propValue, element } = toRefs(props)
|
|
||||||
const currentPane = ref('common')
|
|
||||||
|
|
||||||
const commonGroup = ref<InstanceType<typeof ElScrollbar>>()
|
const commonGroup = ref<InstanceType<typeof ElScrollbar>>()
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
@ -31,7 +28,7 @@ const state = reactive({
|
|||||||
})
|
})
|
||||||
|
|
||||||
const scrollTo = offsetTop => {
|
const scrollTo = offsetTop => {
|
||||||
commonGroup?.value!.setScrollTop(offsetTop)
|
commonGroup?.value.setScrollTop(offsetTop)
|
||||||
}
|
}
|
||||||
|
|
||||||
const anchorPosition = anchor => {
|
const anchorPosition = anchor => {
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, toRefs } from 'vue'
|
import { toRefs } from 'vue'
|
||||||
import Icon from '@/components/icon-custom/src/Icon.vue'
|
import Icon from '@/components/icon-custom/src/Icon.vue'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, toRefs } from 'vue'
|
import { toRefs } from 'vue'
|
||||||
import eventBus from '@/utils/eventBus'
|
import eventBus from '@/utils/eventBus'
|
||||||
import DragComponent from '@/custom-component/component-group/DragComponent.vue'
|
import DragComponent from '@/custom-component/component-group/DragComponent.vue'
|
||||||
import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils'
|
import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils'
|
||||||
@ -27,9 +27,8 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const { propValue, element, dvModel } = toRefs(props)
|
const { dvModel } = toRefs(props)
|
||||||
const currentPane = ref('common')
|
const newComponent = () => {
|
||||||
const newComponent = innerType => {
|
|
||||||
eventBus.emit('handleNew', { componentName: 'Picture', innerType: 'Picture' })
|
eventBus.emit('handleNew', { componentName: 'Picture', innerType: 'Picture' })
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -47,7 +46,7 @@ const handleDragEnd = e => {
|
|||||||
class="group"
|
class="group"
|
||||||
@dragstart="handleDragStart"
|
@dragstart="handleDragStart"
|
||||||
@dragend="handleDragEnd"
|
@dragend="handleDragEnd"
|
||||||
v-on:click="newComponent('Picture')"
|
v-on:click="newComponent"
|
||||||
>
|
>
|
||||||
<drag-component
|
<drag-component
|
||||||
:themes="themes"
|
:themes="themes"
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, toRefs } from 'vue'
|
import { toRefs } from 'vue'
|
||||||
import eventBus from '@/utils/eventBus'
|
import eventBus from '@/utils/eventBus'
|
||||||
import DragComponent from '@/custom-component/component-group/DragComponent.vue'
|
import DragComponent from '@/custom-component/component-group/DragComponent.vue'
|
||||||
import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils'
|
import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils'
|
||||||
@ -27,8 +27,7 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const { propValue, element, dvModel } = toRefs(props)
|
const { dvModel } = toRefs(props)
|
||||||
const currentPane = ref('common')
|
|
||||||
|
|
||||||
const handleDragStart = e => {
|
const handleDragStart = e => {
|
||||||
commonHandleDragStart(e, dvModel.value)
|
commonHandleDragStart(e, dvModel.value)
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, toRefs } from 'vue'
|
import { toRefs } from 'vue'
|
||||||
import eventBus from '@/utils/eventBus'
|
import eventBus from '@/utils/eventBus'
|
||||||
import DragComponent from '@/custom-component/component-group/DragComponent.vue'
|
import DragComponent from '@/custom-component/component-group/DragComponent.vue'
|
||||||
import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils'
|
import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils'
|
||||||
@ -27,9 +27,8 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const { propValue, element, dvModel } = toRefs(props)
|
const { dvModel } = toRefs(props)
|
||||||
const currentPane = ref('common')
|
const newComponent = () => {
|
||||||
const newComponent = innerType => {
|
|
||||||
eventBus.emit('handleNew', { componentName: 'DeTabs', innerType: 'DeTabs' })
|
eventBus.emit('handleNew', { componentName: 'DeTabs', innerType: 'DeTabs' })
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -47,7 +46,7 @@ const handleDragEnd = e => {
|
|||||||
class="group"
|
class="group"
|
||||||
@dragstart="handleDragStart"
|
@dragstart="handleDragStart"
|
||||||
@dragend="handleDragEnd"
|
@dragend="handleDragEnd"
|
||||||
v-on:click="newComponent('DeTabs')"
|
v-on:click="newComponent"
|
||||||
>
|
>
|
||||||
<drag-component
|
<drag-component
|
||||||
:themes="themes"
|
:themes="themes"
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, toRefs } from 'vue'
|
import { toRefs } from 'vue'
|
||||||
import eventBus from '@/utils/eventBus'
|
import eventBus from '@/utils/eventBus'
|
||||||
import DragComponent from '@/custom-component/component-group/DragComponent.vue'
|
import DragComponent from '@/custom-component/component-group/DragComponent.vue'
|
||||||
import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils'
|
import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils'
|
||||||
@ -27,8 +27,7 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const { propValue, element, dvModel, themes } = toRefs(props)
|
const { dvModel, themes } = toRefs(props)
|
||||||
const currentPane = ref('common')
|
|
||||||
|
|
||||||
const handleDragStart = e => {
|
const handleDragStart = e => {
|
||||||
commonHandleDragStart(e, dvModel.value)
|
commonHandleDragStart(e, dvModel.value)
|
||||||
@ -38,7 +37,7 @@ const handleDragEnd = e => {
|
|||||||
commonHandleDragEnd(e, dvModel.value)
|
commonHandleDragEnd(e, dvModel.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
const newComponent = componentName => {
|
const newComponent = () => {
|
||||||
eventBus.emit('handleNew', { componentName: 'UserView', innerType: 'rich-text' })
|
eventBus.emit('handleNew', { componentName: 'UserView', innerType: 'rich-text' })
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -48,7 +47,7 @@ const newComponent = componentName => {
|
|||||||
class="group"
|
class="group"
|
||||||
@dragstart="handleDragStart"
|
@dragstart="handleDragStart"
|
||||||
@dragend="handleDragEnd"
|
@dragend="handleDragEnd"
|
||||||
v-on:click="newComponent('VText')"
|
v-on:click="newComponent"
|
||||||
>
|
>
|
||||||
<drag-component
|
<drag-component
|
||||||
:themes="themes"
|
:themes="themes"
|
||||||
|
@ -29,8 +29,7 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const { propValue, element, dvModel } = toRefs(props)
|
const { dvModel } = toRefs(props)
|
||||||
const currentPane = ref('common')
|
|
||||||
|
|
||||||
const userViewGroup = ref<InstanceType<typeof ElScrollbar>>()
|
const userViewGroup = ref<InstanceType<typeof ElScrollbar>>()
|
||||||
|
|
||||||
@ -40,7 +39,7 @@ const state = reactive({
|
|||||||
})
|
})
|
||||||
|
|
||||||
const scrollTo = offsetTop => {
|
const scrollTo = offsetTop => {
|
||||||
userViewGroup?.value!.setScrollTop(offsetTop)
|
userViewGroup?.value.setScrollTop(offsetTop)
|
||||||
}
|
}
|
||||||
|
|
||||||
const anchorPosition = anchor => {
|
const anchorPosition = anchor => {
|
||||||
|
@ -110,13 +110,10 @@ import { guid } from '@/views/visualized/data/dataset/form/util'
|
|||||||
import eventBus from '@/utils/eventBus'
|
import eventBus from '@/utils/eventBus'
|
||||||
import { canvasChangeAdaptor, findComponentIndexById } from '@/utils/canvasUtils'
|
import { canvasChangeAdaptor, findComponentIndexById } from '@/utils/canvasUtils'
|
||||||
import DeCustomTab from '@/custom-component/de-tabs/DeCustomTab.vue'
|
import DeCustomTab from '@/custom-component/de-tabs/DeCustomTab.vue'
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
|
||||||
import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
|
import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
|
||||||
import { useEmitt } from '@/hooks/web/useEmitt'
|
import { useEmitt } from '@/hooks/web/useEmitt'
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
const { curComponent, tabMoveInActiveId, bashMatrixInfo } = storeToRefs(dvMainStore)
|
const { tabMoveInActiveId, bashMatrixInfo } = storeToRefs(dvMainStore)
|
||||||
const tabCanvas = ref(null)
|
|
||||||
const { t } = useI18n()
|
|
||||||
const tabComponentRef = ref(null)
|
const tabComponentRef = ref(null)
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@ -158,7 +155,6 @@ const state = reactive({
|
|||||||
textarea: '',
|
textarea: '',
|
||||||
dialogVisible: false
|
dialogVisible: false
|
||||||
})
|
})
|
||||||
const curItem = ref(null)
|
|
||||||
const tabsAreaScroll = ref(false)
|
const tabsAreaScroll = ref(false)
|
||||||
const editableTabsValue = ref(null)
|
const editableTabsValue = ref(null)
|
||||||
|
|
||||||
@ -239,23 +235,6 @@ function handleCommand(command) {
|
|||||||
break
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function removeTab(targetName: string) {
|
|
||||||
let tabs = element.value.propValue
|
|
||||||
let activeName = editableTabsValue.value
|
|
||||||
if (activeName === targetName) {
|
|
||||||
tabs.forEach((tab: any, index: number) => {
|
|
||||||
if (tab.name === targetName) {
|
|
||||||
let nextTab = tabs[index + 1] || tabs[index - 1]
|
|
||||||
if (nextTab) {
|
|
||||||
activeName = nextTab.name
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
editableTabsValue.value = activeName
|
|
||||||
element.value.propValue = tabs.filter((tab: any) => tab.name !== targetName)
|
|
||||||
}
|
|
||||||
|
|
||||||
const componentMoveIn = component => {
|
const componentMoveIn = component => {
|
||||||
element.value.propValue.forEach((tabItem, index) => {
|
element.value.propValue.forEach((tabItem, index) => {
|
||||||
@ -344,19 +323,6 @@ const activeColor = computed(() => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const borderColor = computed(() => {
|
|
||||||
if (
|
|
||||||
element.value &&
|
|
||||||
element.value.style &&
|
|
||||||
element.value.style.headBorderColor &&
|
|
||||||
typeof element.value.style.headBorderColor === 'string'
|
|
||||||
) {
|
|
||||||
return element.value.style.headBorderColor
|
|
||||||
} else {
|
|
||||||
return 'none'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const borderActiveColor = computed(() => {
|
const borderActiveColor = computed(() => {
|
||||||
if (
|
if (
|
||||||
element.value &&
|
element.value &&
|
||||||
@ -374,10 +340,6 @@ const titleValid = computed(() => {
|
|||||||
return !!state.textarea && !!state.textarea.trim()
|
return !!state.textarea && !!state.textarea.trim()
|
||||||
})
|
})
|
||||||
|
|
||||||
const isCurrentEdit = computed(() => {
|
|
||||||
return isEdit.value && curComponent.value && curComponent.value.id === element.value.id
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => element.value,
|
() => element.value,
|
||||||
() => {
|
() => {
|
||||||
|
@ -5,7 +5,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed } from 'vue'
|
import { computed } from 'vue'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
/* 颜色可以单词,如red;也可以是颜色值 */
|
/* 颜色可以单词,如red;也可以是颜色值 */
|
||||||
// 字体颜色
|
// 字体颜色
|
||||||
|
@ -88,7 +88,7 @@ function handleCommand(e: any) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* 活动标签切换时触发 */
|
/* 活动标签切换时触发 */
|
||||||
function beforeLeave(currentName: TabPanelName, oldName: TabPanelName) {
|
function beforeLeave(currentName: TabPanelName) {
|
||||||
// 如果name是add,则什么都不触发
|
// 如果name是add,则什么都不触发
|
||||||
if (currentName === 'add') {
|
if (currentName === 'add') {
|
||||||
return false
|
return false
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { toRefs } from 'vue'
|
import { toRefs } from 'vue'
|
||||||
import findComponent from '@/utils/components'
|
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
import ComponentWrapper from '@/components/data-visualization/canvas/ComponentWrapper.vue'
|
import ComponentWrapper from '@/components/data-visualization/canvas/ComponentWrapper.vue'
|
||||||
@ -37,7 +36,7 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const { propValue, element, dvInfo, searchCount } = toRefs(props)
|
const { propValue, dvInfo, searchCount } = toRefs(props)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -11,7 +11,7 @@ import { imgUrlTrans } from '@/utils/imgUtils'
|
|||||||
import eventBus from '@/utils/eventBus'
|
import eventBus from '@/utils/eventBus'
|
||||||
import ImgViewDialog from '@/custom-component/ImgViewDialog.vue'
|
import ImgViewDialog from '@/custom-component/ImgViewDialog.vue'
|
||||||
|
|
||||||
const props = withDefaults(
|
withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
themes?: EditorTheme
|
themes?: EditorTheme
|
||||||
}>(),
|
}>(),
|
||||||
@ -37,7 +37,7 @@ const handlePictureCardPreview = file => {
|
|||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleRemove = (file, fileList) => {
|
const handleRemove = (_, fileList) => {
|
||||||
uploadDisabled.value = false
|
uploadDisabled.value = false
|
||||||
curComponent.value.propValue.url = null
|
curComponent.value.propValue.url = null
|
||||||
fileList.value = []
|
fileList.value = []
|
||||||
|
@ -12,7 +12,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, nextTick, onMounted, ref, toRefs, watch } from 'vue'
|
import { CSSProperties, computed, nextTick, toRefs } from 'vue'
|
||||||
import { imgUrlTrans } from '@/utils/imgUtils'
|
import { imgUrlTrans } from '@/utils/imgUtils'
|
||||||
import eventBus from '@/utils/eventBus'
|
import eventBus from '@/utils/eventBus'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@ -31,7 +31,7 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const { propValue, element } = toRefs(props)
|
const { propValue } = toRefs(props)
|
||||||
|
|
||||||
const imageAdapter = computed(() => {
|
const imageAdapter = computed(() => {
|
||||||
const style = {
|
const style = {
|
||||||
@ -39,7 +39,7 @@ const imageAdapter = computed(() => {
|
|||||||
width: '100%',
|
width: '100%',
|
||||||
height: '100%'
|
height: '100%'
|
||||||
}
|
}
|
||||||
return style
|
return style as CSSProperties
|
||||||
})
|
})
|
||||||
|
|
||||||
const uploadImg = () => {
|
const uploadImg = () => {
|
||||||
|
@ -77,7 +77,7 @@ const init = reactive({
|
|||||||
file_picker_types: 'file',
|
file_picker_types: 'file',
|
||||||
content_css: '/tinymce-dataease-private/skins/content/default/content.css', //以css文件方式自定义可编辑区域的css样式,css文件需自己创建并引入
|
content_css: '/tinymce-dataease-private/skins/content/default/content.css', //以css文件方式自定义可编辑区域的css样式,css文件需自己创建并引入
|
||||||
//图片上传
|
//图片上传
|
||||||
images_upload_handler: (blobInfo, progress) =>
|
images_upload_handler: blobInfo =>
|
||||||
new Promise((resolve, reject) => {
|
new Promise((resolve, reject) => {
|
||||||
if (blobInfo.blob().size / 1024 / 1024 > 2) {
|
if (blobInfo.blob().size / 1024 / 1024 > 2) {
|
||||||
reject({ message: '上传失败,图片大小请控制在 2M 以内', remove: true })
|
reject({ message: '上传失败,图片大小请控制在 2M 以内', remove: true })
|
||||||
|
@ -105,10 +105,7 @@ const state = reactive({
|
|||||||
const dataRowSelect = ref({})
|
const dataRowSelect = ref({})
|
||||||
const dataRowNameSelect = ref({})
|
const dataRowNameSelect = ref({})
|
||||||
const dataRowFiledName = ref([])
|
const dataRowFiledName = ref([])
|
||||||
const drawLeft = ref('none')
|
|
||||||
const drawRight = ref('auto')
|
|
||||||
const initReady = ref(false)
|
const initReady = ref(false)
|
||||||
const editReady = ref(false)
|
|
||||||
const editShow = ref(true)
|
const editShow = ref(true)
|
||||||
const canEdit = ref(false)
|
const canEdit = ref(false)
|
||||||
// 初始化配置
|
// 初始化配置
|
||||||
@ -173,7 +170,7 @@ watch(
|
|||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => myValue.value,
|
() => myValue.value,
|
||||||
val => {
|
() => {
|
||||||
if (canEdit.value) {
|
if (canEdit.value) {
|
||||||
const ed = tinymce.editors[tinymceId]
|
const ed = tinymce.editors[tinymceId]
|
||||||
element.value.propValue.textValue = ed.getContent()
|
element.value.propValue.textValue = ed.getContent()
|
||||||
@ -184,16 +181,6 @@ watch(
|
|||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
const changeRightDrawOpen = param => {
|
|
||||||
if (param) {
|
|
||||||
drawLeft.value = 'auto!important'
|
|
||||||
drawRight.value = '380px'
|
|
||||||
} else {
|
|
||||||
drawLeft.value = 'none'
|
|
||||||
drawRight.value = 'auto'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const viewInit = () => {
|
const viewInit = () => {
|
||||||
useEmitt({
|
useEmitt({
|
||||||
name: 'fieldSelect-' + element.value.id,
|
name: 'fieldSelect-' + element.value.id,
|
||||||
@ -254,7 +241,7 @@ const fieldSelect = field => {
|
|||||||
ed.insertContent(attachValue)
|
ed.insertContent(attachValue)
|
||||||
snapshotStore.resetStyleChangeTimes()
|
snapshotStore.resetStyleChangeTimes()
|
||||||
}
|
}
|
||||||
const onClick = e => {
|
const onClick = () => {
|
||||||
const node = tinymce.activeEditor.selection.getNode()
|
const node = tinymce.activeEditor.selection.getNode()
|
||||||
resetSelect(node)
|
resetSelect(node)
|
||||||
}
|
}
|
||||||
@ -311,9 +298,6 @@ const reShow = () => {
|
|||||||
editShow.value = true
|
editShow.value = true
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const chartResize = () => {
|
|
||||||
// ignore
|
|
||||||
}
|
|
||||||
|
|
||||||
const calcData = (view: Chart, callback) => {
|
const calcData = (view: Chart, callback) => {
|
||||||
isError.value = false
|
isError.value = false
|
||||||
@ -403,8 +387,12 @@ const initCurFields = chartDetails => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const rowDataFormat = (rowData, yDataeaseNames, yDataeaseNamesCfg) => {
|
const rowDataFormat = (rowData, yDataeaseNames, yDataeaseNamesCfg) => {
|
||||||
for (const key in rowData) {
|
console.log(
|
||||||
}
|
'rowData, yDataeaseNames, yDataeaseNamesCfg',
|
||||||
|
rowData,
|
||||||
|
yDataeaseNames,
|
||||||
|
yDataeaseNamesCfg
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const renderChart = () => {
|
const renderChart = () => {
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="rich-main-class dark-theme" :class="{ 'edit-model': canEdit,'dark-theme':themes==='dark' }" @dblclick="setEdit">
|
<div
|
||||||
|
class="rich-main-class dark-theme"
|
||||||
|
:class="{ 'edit-model': canEdit, 'dark-theme': themes === 'dark' }"
|
||||||
|
@dblclick="setEdit"
|
||||||
|
>
|
||||||
<Editor
|
<Editor
|
||||||
v-if="editShow"
|
v-if="editShow"
|
||||||
:id="tinymceId"
|
:id="tinymceId"
|
||||||
@ -65,7 +69,7 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const { terminal, propValue, element, editMode, active, disabled } = toRefs(props)
|
const { element, editMode, active } = toRefs(props)
|
||||||
const emits = defineEmits(['onClick'])
|
const emits = defineEmits(['onClick'])
|
||||||
|
|
||||||
const editShow = ref(true)
|
const editShow = ref(true)
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, toRefs, watch } from 'vue'
|
import { CSSProperties, computed, toRefs, PropType } from 'vue'
|
||||||
import Chart from '@/views/chart/components/views/index.vue'
|
import Chart from '@/views/chart/components/views/index.vue'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@ -21,7 +21,7 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
view: {
|
view: {
|
||||||
type: Object,
|
type: Object as PropType<ChartObj>,
|
||||||
default() {
|
default() {
|
||||||
return {
|
return {
|
||||||
propValue: null
|
propValue: null
|
||||||
@ -56,7 +56,7 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const { propValue, element, view, active, searchCount, scale, dvType } = toRefs(props)
|
const { element, view, active, searchCount, scale } = toRefs(props)
|
||||||
const autoStyle = computed(() => {
|
const autoStyle = computed(() => {
|
||||||
if (element.value.innerType === 'richText') {
|
if (element.value.innerType === 'richText') {
|
||||||
const curScale = scale.value / 100
|
const curScale = scale.value / 100
|
||||||
@ -67,7 +67,7 @@ const autoStyle = computed(() => {
|
|||||||
left: 50 * (1 - 1 / curScale) + '%', // 放大余量 除以 2
|
left: 50 * (1 - 1 / curScale) + '%', // 放大余量 除以 2
|
||||||
top: 50 * (1 - 1 / curScale) + '%', // 放大余量 除以 2
|
top: 50 * (1 - 1 / curScale) + '%', // 放大余量 除以 2
|
||||||
transform: 'scale(' + curScale + ')'
|
transform: 'scale(' + curScale + ')'
|
||||||
}
|
} as CSSProperties
|
||||||
} else {
|
} else {
|
||||||
return {}
|
return {}
|
||||||
}
|
}
|
||||||
|
@ -9,7 +9,6 @@ import { storeToRefs } from 'pinia'
|
|||||||
const canEdit = ref(false)
|
const canEdit = ref(false)
|
||||||
const ctrlKey = ref(17)
|
const ctrlKey = ref(17)
|
||||||
const isCtrlDown = ref(false)
|
const isCtrlDown = ref(false)
|
||||||
const cancelRequest = ref(null)
|
|
||||||
|
|
||||||
const emit = defineEmits(['input'])
|
const emit = defineEmits(['input'])
|
||||||
const text = ref(null)
|
const text = ref(null)
|
||||||
@ -31,7 +30,7 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const { propValue, element } = toRefs(props)
|
const { element } = toRefs(props)
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
const { editMode, curComponent } = storeToRefs(dvMainStore)
|
const { editMode, curComponent } = storeToRefs(dvMainStore)
|
||||||
|
|
||||||
@ -80,7 +79,7 @@ const clearStyle = e => {
|
|||||||
document.execCommand('insertText', false, text)
|
document.execCommand('insertText', false, text)
|
||||||
}
|
}
|
||||||
|
|
||||||
emit('input', this.element, e.target.innerHTML)
|
emit('input', element.value, e.target.innerHTML)
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleBlur = e => {
|
const handleBlur = e => {
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { defineStore, storeToRefs } from 'pinia'
|
import { defineStore, storeToRefs } from 'pinia'
|
||||||
import { store } from '../../index'
|
import { store } from '../../index'
|
||||||
import { dvMainStoreWithOut } from './dvMain'
|
import { dvMainStoreWithOut } from './dvMain'
|
||||||
import { $, _$, deepCopy } from '@/utils/utils'
|
import { $, deepCopy } from '@/utils/utils'
|
||||||
import decomposeComponent from '@/utils/decomposeComponent'
|
import decomposeComponent from '@/utils/decomposeComponent'
|
||||||
import { generateID } from '@/utils/generateID'
|
import { generateID } from '@/utils/generateID'
|
||||||
import {
|
import {
|
||||||
|
@ -10,7 +10,7 @@ import elementResizeDetectorMaker from 'element-resize-detector'
|
|||||||
import { getCanvasStyle, syncShapeItemStyle } from '@/utils/style'
|
import { getCanvasStyle, syncShapeItemStyle } from '@/utils/style'
|
||||||
import { adaptCurThemeCommonStyle } from '@/utils/canvasStyle'
|
import { adaptCurThemeCommonStyle } from '@/utils/canvasStyle'
|
||||||
import CanvasCore from '@/components/data-visualization/canvas/CanvasCore.vue'
|
import CanvasCore from '@/components/data-visualization/canvas/CanvasCore.vue'
|
||||||
import { canvasChangeAdaptor, isMainCanvas, isSameCanvas } from '@/utils/canvasUtils'
|
import { isMainCanvas } from '@/utils/canvasUtils'
|
||||||
|
|
||||||
// change-begin
|
// change-begin
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@ -42,7 +42,7 @@ const domId = ref('de-canvas-' + canvasId.value)
|
|||||||
|
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
const snapshotStore = snapshotStoreWithOut()
|
const snapshotStore = snapshotStoreWithOut()
|
||||||
const { curComponent, pcMatrixCount, editMode, curOriginThemes } = storeToRefs(dvMainStore)
|
const { pcMatrixCount, curOriginThemes } = storeToRefs(dvMainStore)
|
||||||
const canvasOut = ref(null)
|
const canvasOut = ref(null)
|
||||||
const canvasInner = ref(null)
|
const canvasInner = ref(null)
|
||||||
const canvasInitStatus = ref(false)
|
const canvasInitStatus = ref(false)
|
||||||
@ -189,7 +189,7 @@ const moveOutFromTab = component => {
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
window.addEventListener('resize', canvasSizeInit)
|
window.addEventListener('resize', canvasSizeInit)
|
||||||
const erd = elementResizeDetectorMaker()
|
const erd = elementResizeDetectorMaker()
|
||||||
erd.listenTo(document.getElementById(domId.value), element => {
|
erd.listenTo(document.getElementById(domId.value), () => {
|
||||||
canvasSizeInit()
|
canvasSizeInit()
|
||||||
})
|
})
|
||||||
canvasInit()
|
canvasInit()
|
||||||
|
@ -29,8 +29,7 @@ const props = defineProps({
|
|||||||
|
|
||||||
const emit = defineEmits(['onTypeChange'])
|
const emit = defineEmits(['onTypeChange'])
|
||||||
|
|
||||||
const { propValue, element, themes } = toRefs(props)
|
const { themes } = toRefs(props)
|
||||||
const currentPane = ref('common')
|
|
||||||
|
|
||||||
const userViewGroup = ref<InstanceType<typeof ElScrollbar>>()
|
const userViewGroup = ref<InstanceType<typeof ElScrollbar>>()
|
||||||
|
|
||||||
@ -40,7 +39,7 @@ const state = reactive({
|
|||||||
})
|
})
|
||||||
|
|
||||||
const scrollTo = offsetTop => {
|
const scrollTo = offsetTop => {
|
||||||
userViewGroup?.value!.setScrollTop(offsetTop)
|
userViewGroup?.value.setScrollTop(offsetTop)
|
||||||
}
|
}
|
||||||
|
|
||||||
const anchorPosition = anchor => {
|
const anchorPosition = anchor => {
|
||||||
|
@ -78,7 +78,7 @@ const formRef = ref<FormInstance>()
|
|||||||
const searchStr = ref<string>()
|
const searchStr = ref<string>()
|
||||||
|
|
||||||
watch(searchStr, val => {
|
watch(searchStr, val => {
|
||||||
datasetSelector.value!.filter(val)
|
datasetSelector.value.filter(val)
|
||||||
})
|
})
|
||||||
|
|
||||||
const showTree = computed(() => {
|
const showTree = computed(() => {
|
||||||
@ -88,9 +88,6 @@ const showTree = computed(() => {
|
|||||||
const showEmptyInfo = computed(() => {
|
const showEmptyInfo = computed(() => {
|
||||||
return !showTree.value && !loadingDatasetTree.value
|
return !showTree.value && !loadingDatasetTree.value
|
||||||
})
|
})
|
||||||
// const showEmptySearchInfo = computed(() => {
|
|
||||||
// return showEmptyInfo.value && !props.loadingDatasetTree
|
|
||||||
// })
|
|
||||||
|
|
||||||
const computedTree = computed(() => {
|
const computedTree = computed(() => {
|
||||||
if (showTree.value) {
|
if (showTree.value) {
|
||||||
@ -131,11 +128,11 @@ const form = computed(() => {
|
|||||||
|
|
||||||
const rules = ref([
|
const rules = ref([
|
||||||
{
|
{
|
||||||
validator: (rule: any, value: any, callback: any) => {
|
validator: (...params) => {
|
||||||
if (!exist.value) {
|
if (!exist.value) {
|
||||||
callback(new Error())
|
params[2](new Error())
|
||||||
} else {
|
} else {
|
||||||
callback()
|
params[2]()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
trigger: ['change', 'blur']
|
trigger: ['change', 'blur']
|
||||||
@ -190,7 +187,7 @@ const getFields = (id, chartId) => {
|
|||||||
state.value.dimensionData = JSON.parse(JSON.stringify(state.value.dimension))
|
state.value.dimensionData = JSON.parse(JSON.stringify(state.value.dimension))
|
||||||
state.value.quotaData = JSON.parse(JSON.stringify(state.value.quota))
|
state.value.quotaData = JSON.parse(JSON.stringify(state.value.quota))
|
||||||
})
|
})
|
||||||
.catch(e => {
|
.catch(() => {
|
||||||
state.value.dimension = []
|
state.value.dimension = []
|
||||||
state.value.quota = []
|
state.value.quota = []
|
||||||
state.value.dimensionData = []
|
state.value.dimensionData = []
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
<script lang="tsx" setup>
|
<script lang="tsx" setup>
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
import { computed, onMounted, reactive, ref, toRefs, watch } from 'vue'
|
import { computed, onMounted, ref, toRefs, watch } from 'vue'
|
||||||
import { formatterItem } from '@/views/chart/components/js/formatter'
|
|
||||||
import { getItemType } from '@/views/chart/components/editor/drag-item/utils'
|
import { getItemType } from '@/views/chart/components/editor/drag-item/utils'
|
||||||
import { fieldType } from '@/utils/attr'
|
import { fieldType } from '@/utils/attr'
|
||||||
|
|
||||||
@ -10,11 +9,6 @@ const { t } = useI18n()
|
|||||||
const tagType = ref('success')
|
const tagType = ref('success')
|
||||||
const showDateExt = ref(false)
|
const showDateExt = ref(false)
|
||||||
|
|
||||||
const state = reactive({
|
|
||||||
formatterItem: formatterItem,
|
|
||||||
showDateExt: false
|
|
||||||
})
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
param: {
|
param: {
|
||||||
type: Object,
|
type: Object,
|
||||||
|
@ -189,28 +189,6 @@ const beforeSummary = type => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const dateStyle = param => {
|
|
||||||
item.value.dateStyle = param.type
|
|
||||||
emit('onQuotaItemChange', item.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const beforeDateStyle = type => {
|
|
||||||
return {
|
|
||||||
type: type
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const datePattern = param => {
|
|
||||||
item.value.datePattern = param.type
|
|
||||||
emit('onQuotaItemChange', item.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const beforeDatePattern = type => {
|
|
||||||
return {
|
|
||||||
type: type
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const showRename = () => {
|
const showRename = () => {
|
||||||
item.value.index = props.index
|
item.value.index = props.index
|
||||||
item.value.renameType = props.type
|
item.value.renameType = props.type
|
||||||
|
@ -16,7 +16,7 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const { formatterItem, chart } = toRefs(props)
|
const { formatterItem } = toRefs(props)
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
typeList: formatterType,
|
typeList: formatterType,
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
<script lang="tsx" setup>
|
<script lang="tsx" setup>
|
||||||
import { PropType, reactive, watch } from 'vue'
|
import { PropType, reactive, watch } from 'vue'
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
import { DEFAULT_SCROLL, DEFAULT_MISC } from '@/views/chart/components/editor/util/chart'
|
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
@ -21,7 +21,7 @@ import TableTotalSelector from '@/views/chart/components/editor/editor-style/com
|
|||||||
import MiscStyleSelector from '@/views/chart/components/editor/editor-style/components/MiscStyleSelector.vue'
|
import MiscStyleSelector from '@/views/chart/components/editor/editor-style/components/MiscStyleSelector.vue'
|
||||||
|
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
const { curComponent, dvInfo } = storeToRefs(dvMainStore)
|
const { dvInfo } = storeToRefs(dvMainStore)
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
||||||
const state = {
|
const state = {
|
||||||
|
@ -49,7 +49,6 @@ import CommonAttr from '@/custom-component/common/CommonAttr.vue'
|
|||||||
const dvMainStore = dvMainStoreWithOut()
|
const dvMainStore = dvMainStoreWithOut()
|
||||||
const snapshotStore = snapshotStoreWithOut()
|
const snapshotStore = snapshotStoreWithOut()
|
||||||
|
|
||||||
const emits = defineEmits(['calcStyle'])
|
|
||||||
const { batchOptComponentInfo, batchOptComponentType, mixProperties, mixPropertiesInner } =
|
const { batchOptComponentInfo, batchOptComponentType, mixProperties, mixPropertiesInner } =
|
||||||
storeToRefs(dvMainStore)
|
storeToRefs(dvMainStore)
|
||||||
const param = { id: 'mixId', optType: 'edit' }
|
const param = { id: 'mixId', optType: 'edit' }
|
||||||
@ -59,10 +58,6 @@ const state = reactive({
|
|||||||
quotaData: []
|
quotaData: []
|
||||||
})
|
})
|
||||||
|
|
||||||
const calcStyle = () => {
|
|
||||||
emits('calcStyle')
|
|
||||||
}
|
|
||||||
|
|
||||||
const onMiscChange = (val, prop) => {
|
const onMiscChange = (val, prop) => {
|
||||||
batchOptChange('customAttr', 'misc', val.data, prop)
|
batchOptChange('customAttr', 'misc', val.data, prop)
|
||||||
}
|
}
|
||||||
@ -81,9 +76,6 @@ const onChangeXAxisForm = (val, prop) => {
|
|||||||
const onChangeYAxisForm = (val, prop) => {
|
const onChangeYAxisForm = (val, prop) => {
|
||||||
batchOptChange('customStyle', 'yAxis', val, prop)
|
batchOptChange('customStyle', 'yAxis', val, prop)
|
||||||
}
|
}
|
||||||
const onChangeYAxisExtForm = (val, prop) => {
|
|
||||||
batchOptChange('customStyle', 'yAxisExt', val, prop)
|
|
||||||
}
|
|
||||||
|
|
||||||
const onChangeMiscStyleForm = (val, prop) => {
|
const onChangeMiscStyleForm = (val, prop) => {
|
||||||
batchOptChange('customStyle', 'misc', val, prop)
|
batchOptChange('customStyle', 'misc', val, prop)
|
||||||
@ -94,12 +86,6 @@ const onTextChange = (val, prop) => {
|
|||||||
const onLegendChange = (val, prop) => {
|
const onLegendChange = (val, prop) => {
|
||||||
batchOptChange('customStyle', 'legend', val, prop)
|
batchOptChange('customStyle', 'legend', val, prop)
|
||||||
}
|
}
|
||||||
const onMarginChange = (val, prop) => {
|
|
||||||
batchOptChange('customStyle', 'margin', val, prop)
|
|
||||||
}
|
|
||||||
const onSuspensionChange = (val, prop) => {
|
|
||||||
batchOptChange('customAttr', 'suspension', val, prop)
|
|
||||||
}
|
|
||||||
|
|
||||||
const onBackgroundChange = val => {
|
const onBackgroundChange = val => {
|
||||||
dvMainStore.setBatchChangeBackground(val)
|
dvMainStore.setBatchChangeBackground(val)
|
||||||
|
@ -58,13 +58,6 @@ const state = reactive({
|
|||||||
quotaData: []
|
quotaData: []
|
||||||
})
|
})
|
||||||
|
|
||||||
const lineSymbolOptions = [
|
|
||||||
{ name: t('chart.line_symbol_circle'), value: 'circle' },
|
|
||||||
{ name: t('chart.line_symbol_rect'), value: 'square' },
|
|
||||||
{ name: t('chart.line_symbol_triangle'), value: 'triangle' },
|
|
||||||
{ name: t('chart.line_symbol_diamond'), value: 'diamond' }
|
|
||||||
]
|
|
||||||
|
|
||||||
const liquidShapeOptions = [
|
const liquidShapeOptions = [
|
||||||
{ name: t('chart.liquid_shape_circle'), value: 'circle' },
|
{ name: t('chart.liquid_shape_circle'), value: 'circle' },
|
||||||
{ name: t('chart.liquid_shape_diamond'), value: 'diamond' },
|
{ name: t('chart.liquid_shape_diamond'), value: 'diamond' },
|
||||||
@ -73,29 +66,10 @@ const liquidShapeOptions = [
|
|||||||
{ name: t('chart.liquid_shape_rect'), value: 'rect' }
|
{ name: t('chart.liquid_shape_rect'), value: 'rect' }
|
||||||
]
|
]
|
||||||
|
|
||||||
const pageSizeOptions = [
|
|
||||||
{ name: '10' + t('chart.table_page_size_unit'), value: 10 },
|
|
||||||
{ name: '20' + t('chart.table_page_size_unit'), value: 20 },
|
|
||||||
{ name: '50' + t('chart.table_page_size_unit'), value: 50 },
|
|
||||||
{ name: '100' + t('chart.table_page_size_unit'), value: 100 }
|
|
||||||
]
|
|
||||||
|
|
||||||
const alignOptions = [
|
|
||||||
{ name: t('chart.table_align_left'), value: 'left' },
|
|
||||||
{ name: t('chart.table_align_center'), value: 'center' },
|
|
||||||
{ name: t('chart.table_align_right'), value: 'right' }
|
|
||||||
]
|
|
||||||
|
|
||||||
const fontFamily = CHART_FONT_FAMILY
|
const fontFamily = CHART_FONT_FAMILY
|
||||||
|
|
||||||
const fontLetterSpace = CHART_FONT_LETTER_SPACE
|
const fontLetterSpace = CHART_FONT_LETTER_SPACE
|
||||||
|
|
||||||
const lineTypeOptions = [
|
|
||||||
{ name: t('chart.map_line_type_line'), value: 'line' },
|
|
||||||
{ name: t('chart.map_line_type_arc'), value: 'arc' },
|
|
||||||
{ name: t('chart.map_line_type_arc_3d'), value: 'arc3d' }
|
|
||||||
]
|
|
||||||
|
|
||||||
const changeMisc = (prop = '', refresh = false) => {
|
const changeMisc = (prop = '', refresh = false) => {
|
||||||
if (state.miscForm.gaugeMax <= state.miscForm.gaugeMin) {
|
if (state.miscForm.gaugeMax <= state.miscForm.gaugeMin) {
|
||||||
ElMessage.error(t('chart.max_more_than_mix'))
|
ElMessage.error(t('chart.max_more_than_mix'))
|
||||||
@ -228,8 +202,6 @@ const isValidField = field => {
|
|||||||
return field.id !== 'count' && field.deType !== 0 && field.deType !== 1 && field.deType !== 5
|
return field.id !== 'count' && field.deType !== 0 && field.deType !== 1 && field.deType !== 5
|
||||||
}
|
}
|
||||||
|
|
||||||
const showProperty = prop => props.propertyInner?.includes(prop)
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initField()
|
initField()
|
||||||
init()
|
init()
|
||||||
|
@ -248,7 +248,7 @@ const filterTypeChange = val => {
|
|||||||
initEnumOptions()
|
initEnumOptions()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const enumChange = val => {
|
const enumChange = () => {
|
||||||
item.value.enumCheckField = state.enumCheckField
|
item.value.enumCheckField = state.enumCheckField
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -14,7 +14,7 @@ import {
|
|||||||
import Icon from '@/components/icon-custom/src/Icon.vue'
|
import Icon from '@/components/icon-custom/src/Icon.vue'
|
||||||
import type { FormInstance, FormRules } from 'element-plus-secondary'
|
import type { FormInstance, FormRules } from 'element-plus-secondary'
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
import { Field, getFieldByDQ, saveChart } from '@/api/chart'
|
import { Field, getFieldByDQ } from '@/api/chart'
|
||||||
import { Tree } from '../../../visualized/data/dataset/form/CreatDsGroup.vue'
|
import { Tree } from '../../../visualized/data/dataset/form/CreatDsGroup.vue'
|
||||||
import { useEmitt } from '@/hooks/web/useEmitt'
|
import { useEmitt } from '@/hooks/web/useEmitt'
|
||||||
import { ElMessage, ElTreeSelect } from 'element-plus-secondary'
|
import { ElMessage, ElTreeSelect } from 'element-plus-secondary'
|
||||||
@ -88,7 +88,7 @@ const route = useRoute()
|
|||||||
const toolTip = computed(() => {
|
const toolTip = computed(() => {
|
||||||
return props.themes === 'dark' ? 'ndark' : 'dark'
|
return props.themes === 'dark' ? 'ndark' : 'dark'
|
||||||
})
|
})
|
||||||
const { view, datasetTree } = toRefs(props)
|
const { view } = toRefs(props)
|
||||||
|
|
||||||
let cacheId = ''
|
let cacheId = ''
|
||||||
|
|
||||||
@ -225,7 +225,7 @@ const getFields = (id, chartId) => {
|
|||||||
state.dimensionData = JSON.parse(JSON.stringify(state.dimension))
|
state.dimensionData = JSON.parse(JSON.stringify(state.dimension))
|
||||||
state.quotaData = JSON.parse(JSON.stringify(state.quota))
|
state.quotaData = JSON.parse(JSON.stringify(state.quota))
|
||||||
})
|
})
|
||||||
.catch(e => {
|
.catch(() => {
|
||||||
state.dimension = []
|
state.dimension = []
|
||||||
state.quota = []
|
state.quota = []
|
||||||
state.dimensionData = []
|
state.dimensionData = []
|
||||||
@ -292,11 +292,7 @@ const fieldFilter = val => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const reset = () => {
|
const dimensionItemChange = () => {
|
||||||
// do reset
|
|
||||||
}
|
|
||||||
|
|
||||||
const dimensionItemChange = item => {
|
|
||||||
recordSnapshotInfo('calcData')
|
recordSnapshotInfo('calcData')
|
||||||
// do dimensionItemChange
|
// do dimensionItemChange
|
||||||
}
|
}
|
||||||
@ -311,7 +307,7 @@ const dimensionItemRemove = item => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const quotaItemChange = item => {
|
const quotaItemChange = () => {
|
||||||
recordSnapshotInfo('calcData')
|
recordSnapshotInfo('calcData')
|
||||||
// do quotaItemChange
|
// do quotaItemChange
|
||||||
}
|
}
|
||||||
@ -333,7 +329,7 @@ const arrowIcon = () => {
|
|||||||
return h(Icon, { name: 'icon_down_outlined-1' })
|
return h(Icon, { name: 'icon_down_outlined-1' })
|
||||||
}
|
}
|
||||||
|
|
||||||
const drillItemChange = item => {
|
const drillItemChange = () => {
|
||||||
recordSnapshotInfo('calcData')
|
recordSnapshotInfo('calcData')
|
||||||
// temp do nothing
|
// temp do nothing
|
||||||
}
|
}
|
||||||
@ -384,7 +380,7 @@ const onExtCustomSort = item => {
|
|||||||
customSort()
|
customSort()
|
||||||
}
|
}
|
||||||
|
|
||||||
const onMove = (e, originalEvent) => {
|
const onMove = e => {
|
||||||
recordSnapshotInfo('calcData')
|
recordSnapshotInfo('calcData')
|
||||||
state.moveId = e.draggedContext.element.id
|
state.moveId = e.draggedContext.element.id
|
||||||
return true
|
return true
|
||||||
@ -774,10 +770,6 @@ const saveRename = ref => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const save = () => {
|
|
||||||
saveChart(view.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const showQuotaEditFilter = item => {
|
const showQuotaEditFilter = item => {
|
||||||
recordSnapshotInfo('calcData')
|
recordSnapshotInfo('calcData')
|
||||||
state.quotaItem = JSON.parse(JSON.stringify(item))
|
state.quotaItem = JSON.parse(JSON.stringify(item))
|
||||||
@ -962,7 +954,7 @@ const confirmEditCalc = () => {
|
|||||||
calcEdit.value.setFieldForm()
|
calcEdit.value.setFieldForm()
|
||||||
const obj = cloneDeep(calcEdit.value.fieldForm)
|
const obj = cloneDeep(calcEdit.value.fieldForm)
|
||||||
setFieldDefaultValue(obj)
|
setFieldDefaultValue(obj)
|
||||||
saveField(obj).then(res => {
|
saveField(obj).then(() => {
|
||||||
getFields(view.value.tableId, view.value.id)
|
getFields(view.value.tableId, view.value.id)
|
||||||
closeEditCalc()
|
closeEditCalc()
|
||||||
})
|
})
|
||||||
@ -978,7 +970,7 @@ const chartFieldEdit = param => {
|
|||||||
param.item.extField === 2 ? param.item.originName : '[' + param.item.id + ']'
|
param.item.extField === 2 ? param.item.originName : '[' + param.item.id + ']'
|
||||||
state.currEditField.name = getFieldName(state.dimension.concat(state.quota), param.item.name)
|
state.currEditField.name = getFieldName(state.dimension.concat(state.quota), param.item.name)
|
||||||
|
|
||||||
saveField(state.currEditField).then(res => {
|
saveField(state.currEditField).then(() => {
|
||||||
getFields(view.value.tableId, view.value.id)
|
getFields(view.value.tableId, view.value.id)
|
||||||
})
|
})
|
||||||
break
|
break
|
||||||
@ -986,7 +978,7 @@ const chartFieldEdit = param => {
|
|||||||
editField(param.item)
|
editField(param.item)
|
||||||
break
|
break
|
||||||
case 'delete':
|
case 'delete':
|
||||||
deleteField(param.item?.id).then(res => {
|
deleteField(param.item?.id).then(() => {
|
||||||
getFields(view.value.tableId, view.value.id)
|
getFields(view.value.tableId, view.value.id)
|
||||||
})
|
})
|
||||||
break
|
break
|
||||||
@ -1008,28 +1000,6 @@ const setFieldDefaultValue = field => {
|
|||||||
field.deExtractType = field.deType
|
field.deExtractType = field.deType
|
||||||
}
|
}
|
||||||
|
|
||||||
const dynamicLabelShow = () => {
|
|
||||||
onLabelChange(view.value.customAttr.label)
|
|
||||||
}
|
|
||||||
|
|
||||||
const autoInsert = element => {
|
|
||||||
var myValue = '[' + element.id + ']'
|
|
||||||
const myField = document.querySelector('#dynamic-label')
|
|
||||||
if (myField.selectionStart || myField.selectionStart === 0) {
|
|
||||||
var startPos = myField.selectionStart //选区开始位置
|
|
||||||
var endPos = myField.selectionEnd //选区结束位置
|
|
||||||
view.value.customAttr.label.formatter =
|
|
||||||
myField.value.substring(0, startPos) +
|
|
||||||
myValue +
|
|
||||||
myField.value.substring(endPos, myField.value.length)
|
|
||||||
nextTick() //修改数据之后立即使用这个方法获取更新后的DOM。
|
|
||||||
myField.focus()
|
|
||||||
myField.setSelectionRange(endPos + myValue.length, endPos + myValue.length)
|
|
||||||
} else {
|
|
||||||
view.value.customAttr.label.formatter += myValue
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const el = ref<HTMLElement | null>(null)
|
const el = ref<HTMLElement | null>(null)
|
||||||
const elDrag = ref<HTMLElement | null>(null)
|
const elDrag = ref<HTMLElement | null>(null)
|
||||||
const { y, isDragging } = useDraggable(el, {
|
const { y, isDragging } = useDraggable(el, {
|
||||||
|
@ -3,7 +3,7 @@ import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot'
|
|||||||
import { flow, hexColorToRGBA, parseJson } from '../../../util'
|
import { flow, hexColorToRGBA, parseJson } from '../../../util'
|
||||||
import { valueFormatter } from '../../../formatter'
|
import { valueFormatter } from '../../../formatter'
|
||||||
import { getPadding, getTooltipSeriesTotalMap, setGradientColor } from '../../common/common_antv'
|
import { getPadding, getTooltipSeriesTotalMap, setGradientColor } from '../../common/common_antv'
|
||||||
import { flow as flowLeft, isEmpty } from 'lodash-es'
|
import { isEmpty } from 'lodash-es'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 瀑布图
|
* 瀑布图
|
||||||
|
@ -72,7 +72,7 @@ export class Map extends L7PlotChartView<ChoroplethOptions, Choropleth> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async drawChart(drawOption: L7PlotDrawOptions<Choropleth>): Promise<Choropleth> {
|
async drawChart(drawOption: L7PlotDrawOptions<Choropleth>): Promise<Choropleth> {
|
||||||
const { chart, chartObj, level, areaId, container, action } = drawOption
|
const { chart, level, areaId, container, action } = drawOption
|
||||||
if (!areaId) {
|
if (!areaId) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { FunnelOptions, Funnel as G2Funnel } from '@antv/g2plot/esm/plots/funnel'
|
import { FunnelOptions, Funnel as G2Funnel } from '@antv/g2plot/esm/plots/funnel'
|
||||||
import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot'
|
import { G2PlotChartView, G2PlotDrawOptions } from '../../types/impl/g2plot'
|
||||||
import { flow, parseJson } from '@/views/chart/components/js/util'
|
import { flow } from '@/views/chart/components/js/util'
|
||||||
import { getPadding } from '../../common/common_antv'
|
import { getPadding } from '../../common/common_antv'
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
|
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { ColCell, DataCell, S2Event, S2Options, TableSheet } from '@antv/s2/esm/index'
|
import { DataCell, S2Event, S2Options, TableSheet } from '@antv/s2/esm/index'
|
||||||
import { formatterItem, valueFormatter } from '../../../formatter'
|
import { formatterItem, valueFormatter } from '../../../formatter'
|
||||||
import { parseJson } from '../../../util'
|
import { parseJson } from '../../../util'
|
||||||
import { S2ChartView, S2DrawOptions } from '../../types/impl/s2'
|
import { S2ChartView, S2DrawOptions } from '../../types/impl/s2'
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { S2ChartView, S2DrawOptions } from '@/views/chart/components/js/panel/types/impl/s2'
|
import { S2ChartView, S2DrawOptions } from '@/views/chart/components/js/panel/types/impl/s2'
|
||||||
import { ColCell, S2Event, S2Options, TableSheet } from '@antv/s2/esm/index'
|
import { S2Event, S2Options, TableSheet } from '@antv/s2/esm/index'
|
||||||
import { parseJson } from '@/views/chart/components/js/util'
|
import { parseJson } from '@/views/chart/components/js/util'
|
||||||
import { formatterItem, valueFormatter } from '@/views/chart/components/js/formatter'
|
import { formatterItem, valueFormatter } from '@/views/chart/components/js/formatter'
|
||||||
import { getCurrentField } from '@/views/chart/components/js/panel/common/common_table'
|
import { getCurrentField } from '@/views/chart/components/js/panel/common/common_table'
|
||||||
|
@ -79,7 +79,7 @@ export function customSort(custom, data) {
|
|||||||
return joinArr.concat(subArr)
|
return joinArr.concat(subArr)
|
||||||
}
|
}
|
||||||
|
|
||||||
export function customColor(custom, res, colors) {
|
export function customColor(custom, res) {
|
||||||
const result = []
|
const result = []
|
||||||
for (let i = 0; i < res.length; i++) {
|
for (let i = 0; i < res.length; i++) {
|
||||||
const r = res[i]
|
const r = res[i]
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, onBeforeUnmount, onMounted, reactive, ref, shallowRef, toRaw, toRefs } from 'vue'
|
import { computed, onBeforeUnmount, onMounted, reactive, ref, shallowRef, toRefs } from 'vue'
|
||||||
import { getData } from '@/api/chart'
|
import { getData } from '@/api/chart'
|
||||||
import { ChartLibraryType } from '@/views/chart/components/js/panel/types'
|
import { ChartLibraryType } from '@/views/chart/components/js/panel/types'
|
||||||
import { G2PlotChartView } from '@/views/chart/components/js/panel/types/impl/g2plot'
|
import { G2PlotChartView } from '@/views/chart/components/js/panel/types/impl/g2plot'
|
||||||
|
@ -1,9 +1,5 @@
|
|||||||
<script lang="tsx" setup>
|
<script lang="tsx" setup>
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
|
||||||
import { toRefs } from 'vue'
|
import { toRefs } from 'vue'
|
||||||
|
|
||||||
const { t } = useI18n()
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
viewIcon: {
|
viewIcon: {
|
||||||
type: String,
|
type: String,
|
||||||
|
@ -3,6 +3,7 @@ import { useI18n } from '@/hooks/web/useI18n'
|
|||||||
import ChartComponentG2Plot from './components/ChartComponentG2Plot.vue'
|
import ChartComponentG2Plot from './components/ChartComponentG2Plot.vue'
|
||||||
import {
|
import {
|
||||||
computed,
|
computed,
|
||||||
|
CSSProperties,
|
||||||
nextTick,
|
nextTick,
|
||||||
onBeforeMount,
|
onBeforeMount,
|
||||||
onMounted,
|
onMounted,
|
||||||
@ -44,14 +45,8 @@ const dvMainStore = dvMainStoreWithOut()
|
|||||||
|
|
||||||
let innerRefreshTimer = null
|
let innerRefreshTimer = null
|
||||||
|
|
||||||
const {
|
const { nowPanelJumpInfo, publicLinkStatus, dvInfo, curComponent, canvasStyleData } =
|
||||||
nowPanelTrackInfo,
|
storeToRefs(dvMainStore)
|
||||||
nowPanelJumpInfo,
|
|
||||||
publicLinkStatus,
|
|
||||||
dvInfo,
|
|
||||||
curComponent,
|
|
||||||
canvasStyleData
|
|
||||||
} = storeToRefs(dvMainStore)
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
active: {
|
active: {
|
||||||
@ -74,6 +69,11 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
themes: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: 'dark'
|
||||||
|
},
|
||||||
showPosition: {
|
showPosition: {
|
||||||
type: String,
|
type: String,
|
||||||
required: false,
|
required: false,
|
||||||
@ -115,7 +115,7 @@ const state = reactive({
|
|||||||
width: 'fit-content',
|
width: 'fit-content',
|
||||||
maxWidth: '100%',
|
maxWidth: '100%',
|
||||||
wordBreak: 'break-word'
|
wordBreak: 'break-word'
|
||||||
},
|
} as CSSProperties,
|
||||||
drillFilters: [],
|
drillFilters: [],
|
||||||
drillClickDimensionList: []
|
drillClickDimensionList: []
|
||||||
})
|
})
|
||||||
@ -187,7 +187,7 @@ watch(
|
|||||||
{ deep: true }
|
{ deep: true }
|
||||||
)
|
)
|
||||||
|
|
||||||
watch([() => searchCount.value], val => {
|
watch([() => searchCount.value], () => {
|
||||||
// 内部计时器启动 忽略外部计时器
|
// 内部计时器启动 忽略外部计时器
|
||||||
if (!innerRefreshTimer) {
|
if (!innerRefreshTimer) {
|
||||||
queryData()
|
queryData()
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
import { ref, reactive, computed, watch, toRefs, nextTick } from 'vue'
|
import { ref, reactive, computed, watch, toRefs, nextTick } from 'vue'
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
import nothingTree from '@/assets/img/nothing-tree.png'
|
import nothingTree from '@/assets/img/nothing-tree.png'
|
||||||
import { BusiTreeNode, BusiTreeRequest } from '@/models/tree/TreeNode'
|
import { BusiTreeNode } from '@/models/tree/TreeNode'
|
||||||
import {
|
import {
|
||||||
copyResource,
|
copyResource,
|
||||||
dvNameCheck,
|
dvNameCheck,
|
||||||
@ -12,9 +12,7 @@ import {
|
|||||||
updateBase,
|
updateBase,
|
||||||
saveCanvas
|
saveCanvas
|
||||||
} from '@/api/visualization/dataVisualization'
|
} from '@/api/visualization/dataVisualization'
|
||||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
|
||||||
import { ElMessage } from 'element-plus-secondary'
|
import { ElMessage } from 'element-plus-secondary'
|
||||||
const dvMainStore = dvMainStoreWithOut()
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
curCanvasType: {
|
curCanvasType: {
|
||||||
type: String,
|
type: String,
|
||||||
|
@ -24,7 +24,7 @@ const dataInitState = ref(true)
|
|||||||
const downloadStatus = ref(false)
|
const downloadStatus = ref(false)
|
||||||
const { width, node } = useMoveLine('DASHBOARD')
|
const { width, node } = useMoveLine('DASHBOARD')
|
||||||
|
|
||||||
const props = defineProps({
|
defineProps({
|
||||||
showPosition: {
|
showPosition: {
|
||||||
required: false,
|
required: false,
|
||||||
type: String,
|
type: String,
|
||||||
|
@ -25,7 +25,6 @@ import { changeComponentSizeWithScale } from '@/utils/changeComponentsSizeWithSc
|
|||||||
import { useEmitt } from '@/hooks/web/useEmitt'
|
import { useEmitt } from '@/hooks/web/useEmitt'
|
||||||
import { check, compareStorage } from '@/utils/CrossPermission'
|
import { check, compareStorage } from '@/utils/CrossPermission'
|
||||||
import { useCache } from '@/hooks/web/useCache'
|
import { useCache } from '@/hooks/web/useCache'
|
||||||
import { center } from '@antv/g2plot/lib/plots/sankey/sankey'
|
|
||||||
const { wsCache } = useCache()
|
const { wsCache } = useCache()
|
||||||
const eventCheck = e => {
|
const eventCheck = e => {
|
||||||
if (e.key === 'screen-weight' && !compareStorage(e.oldValue, e.newValue)) {
|
if (e.key === 'screen-weight' && !compareStorage(e.oldValue, e.newValue)) {
|
||||||
@ -55,7 +54,7 @@ const state = reactive({
|
|||||||
})
|
})
|
||||||
|
|
||||||
const contentStyle = computed(() => {
|
const contentStyle = computed(() => {
|
||||||
const { width, height, scale } = canvasStyleData.value
|
const { width, height } = canvasStyleData.value
|
||||||
if (editMode.value === 'preview') {
|
if (editMode.value === 'preview') {
|
||||||
return {
|
return {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
@ -142,12 +141,9 @@ listenGlobalKeyDown()
|
|||||||
|
|
||||||
const initScroll = () => {
|
const initScroll = () => {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
const { width, height, scale } = canvasStyleData.value
|
const { width, height } = canvasStyleData.value
|
||||||
const mainWidth = canvasCenterRef.value.clientWidth
|
const mainWidth = canvasCenterRef.value.clientWidth
|
||||||
const mainHeight = canvasCenterRef.value.clientHeight
|
const mainHeight = canvasCenterRef.value.clientHeight
|
||||||
const slideWidth = leftSidebarRef.value.clientWidth
|
|
||||||
const content = canvasOut.value
|
|
||||||
|
|
||||||
const scrollX = (1.5 * width - mainWidth) / 2
|
const scrollX = (1.5 * width - mainWidth) / 2
|
||||||
const scrollY = (1.5 * height - mainHeight) / 2 + 20
|
const scrollY = (1.5 * height - mainHeight) / 2 + 20
|
||||||
// 设置画布初始滚动条位置
|
// 设置画布初始滚动条位置
|
||||||
|
@ -1,12 +1,3 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import { useLocaleStoreWithOut } from '@/store/modules/locale'
|
|
||||||
const locale = useLocaleStoreWithOut()
|
|
||||||
const getLocaleMap = computed(() => locale.getLocaleMap)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>auth123</div>
|
<div>auth</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="less" scoped></style>
|
|
||||||
|
@ -1,90 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
const input = ref('')
|
|
||||||
const num = ref(1)
|
|
||||||
const value = ref('')
|
|
||||||
const radio1 = ref('1')
|
|
||||||
const checked1 = ref(true)
|
|
||||||
const activeNames = ref('')
|
|
||||||
const options = [
|
|
||||||
{
|
|
||||||
value: 'Option1',
|
|
||||||
label: 'Option1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'Option2',
|
|
||||||
label: 'Option2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'Option3',
|
|
||||||
label: 'Option3'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'Option4',
|
|
||||||
label: 'Option4'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'Option5',
|
|
||||||
label: 'Option5'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div style="width: 150px; height: 600px; padding: 10px; background-color: #292929">
|
|
||||||
<el-input effect="dark" v-model="input" placeholder="Please input"
|
|
||||||
><template #prepend>Http://</template></el-input
|
|
||||||
>
|
|
||||||
<div>----</div>
|
|
||||||
<el-input-number effect="dark" v-model="num" :min="1" :max="10" />
|
|
||||||
<div>----</div>
|
|
||||||
<el-input-number v-model="num" effect="dark" :min="1" :max="10" controls-position="right" />
|
|
||||||
<div>----</div>
|
|
||||||
<el-select effect="dark" v-model="value" class="m-2" placeholder="Select">
|
|
||||||
<template #prefix> 13 </template>
|
|
||||||
<el-option
|
|
||||||
v-for="item in options"
|
|
||||||
:key="item.value"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
<div>----</div>
|
|
||||||
<el-radio-group v-model="radio1" class="ml-4">
|
|
||||||
<el-radio effect="dark" label="1" size="large">Option 1</el-radio>
|
|
||||||
<el-radio effect="dark" label="2" size="large">Option 2</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
<div>----</div>
|
|
||||||
<el-checkbox effect="dark" v-model="checked1" label="Option 1" />
|
|
||||||
<div>----</div>
|
|
||||||
<el-collapse v-model="activeNames">
|
|
||||||
<el-collapse-item effect="dark" title="一致性 " name="1">
|
|
||||||
<div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
|
|
||||||
<div>
|
|
||||||
在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
|
|
||||||
</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
<el-collapse-item title="一致性1 " name="12">
|
|
||||||
<div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
|
|
||||||
<div>
|
|
||||||
在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
|
|
||||||
</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
</el-collapse>
|
|
||||||
<div>----</div>
|
|
||||||
<el-dropdown effect="dark" trigger="click">
|
|
||||||
<span style="color: #fff"> 13 </span>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu effect="dark">
|
|
||||||
<el-dropdown-item>Action 1</el-dropdown-item>
|
|
||||||
<el-dropdown-item>Action 2</el-dropdown-item>
|
|
||||||
<el-dropdown-item>Action 3</el-dropdown-item>
|
|
||||||
<el-dropdown-item disabled>Action 4</el-dropdown-item>
|
|
||||||
<el-dropdown-item divided>Action 5</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="less" scoped></style>
|
|
@ -1,39 +1 @@
|
|||||||
<template>
|
<template>home</template>
|
||||||
<el-tag closable>Tag 1</el-tag>
|
|
||||||
{{ size }}
|
|
||||||
<el-button @click="btn('Auth')">click</el-button>
|
|
||||||
<el-button @click="getEyeDropper">click</el-button>
|
|
||||||
<component :is="Header"></component>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { useEyeDropper } from '@vueuse/core'
|
|
||||||
import { shallowRef } from 'vue'
|
|
||||||
import { ElTag, ElMessage } from 'element-plus-secondary'
|
|
||||||
import { ElButton } from 'element-plus-secondary'
|
|
||||||
import { useAppStore } from '@/store/modules/app'
|
|
||||||
import { computed } from 'vue'
|
|
||||||
const app = useAppStore()
|
|
||||||
const size = computed(() => app.getSize)
|
|
||||||
const { isSupported, open, sRGBHex } = useEyeDropper()
|
|
||||||
const getEyeDropper = async () => {
|
|
||||||
if (!isSupported) return
|
|
||||||
await open()
|
|
||||||
.then(res => {
|
|
||||||
console.warn(res)
|
|
||||||
})
|
|
||||||
.catch(cancel => {
|
|
||||||
console.warn(cancel)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
let Header = shallowRef(null)
|
|
||||||
const btn = (type: string) => {
|
|
||||||
import(`../../../../../xpack-sub/${type}.vue`).then((res: any) => {
|
|
||||||
Header.value = res.default
|
|
||||||
})
|
|
||||||
ElMessage({
|
|
||||||
duration: 0,
|
|
||||||
message: 'Congrats, this is a success message.',
|
|
||||||
type: 'success'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
@ -67,15 +67,6 @@ const createPanel = path => {
|
|||||||
window.open(baseUrl, '_blank')
|
window.open(baseUrl, '_blank')
|
||||||
}
|
}
|
||||||
|
|
||||||
const addOperation = (
|
|
||||||
cmd: string,
|
|
||||||
data?: BusiTreeNode,
|
|
||||||
nodeType?: string,
|
|
||||||
parentSelect?: boolean
|
|
||||||
) => {
|
|
||||||
resourceGroupOpt.value.optInit(nodeType, data || {}, cmd, parentSelect)
|
|
||||||
}
|
|
||||||
|
|
||||||
const resourceOptFinish = param => {
|
const resourceOptFinish = param => {
|
||||||
if (param && param.opt === 'newLeaf') {
|
if (param && param.opt === 'newLeaf') {
|
||||||
resourceCreate(param.pid, param.name)
|
resourceCreate(param.pid, param.name)
|
||||||
|
@ -51,9 +51,6 @@ const state = reactive({
|
|||||||
})
|
})
|
||||||
|
|
||||||
const schemas = ref([])
|
const schemas = ref([])
|
||||||
|
|
||||||
const configurationSchema = ref(false)
|
|
||||||
|
|
||||||
const dsForm = ref<FormInstance>()
|
const dsForm = ref<FormInstance>()
|
||||||
|
|
||||||
const cronEdit = ref(true)
|
const cronEdit = ref(true)
|
||||||
@ -134,7 +131,6 @@ const initForm = type => {
|
|||||||
if (type === 'oracle') {
|
if (type === 'oracle') {
|
||||||
form.value.configuration.connectionType = 'sid'
|
form.value.configuration.connectionType = 'sid'
|
||||||
}
|
}
|
||||||
|
|
||||||
form.value.type = type
|
form.value.type = type
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
dsForm.value.clearValidate()
|
dsForm.value.clearValidate()
|
||||||
|
@ -144,7 +144,7 @@ const handleTabClick = tab => {
|
|||||||
|
|
||||||
const uploadFail = response => {
|
const uploadFail = response => {
|
||||||
let myError = response.toString()
|
let myError = response.toString()
|
||||||
myError = myError.replace('Error: ', '')
|
myError.replace('Error: ', '')
|
||||||
}
|
}
|
||||||
const tabList = shallowRef([])
|
const tabList = shallowRef([])
|
||||||
const activeTab = ref('')
|
const activeTab = ref('')
|
||||||
|
@ -18,7 +18,6 @@ import { useEmitt } from '@/hooks/web/useEmitt'
|
|||||||
import FinishPage from '../FinishPage.vue'
|
import FinishPage from '../FinishPage.vue'
|
||||||
import { cloneDeep } from 'lodash-es'
|
import { cloneDeep } from 'lodash-es'
|
||||||
import { useCache } from '@/hooks/web/useCache'
|
import { useCache } from '@/hooks/web/useCache'
|
||||||
import { delDatasetTree } from '@/api/dataset'
|
|
||||||
interface Node {
|
interface Node {
|
||||||
name: string
|
name: string
|
||||||
id: string
|
id: string
|
||||||
@ -292,7 +291,7 @@ const validateDS = () => {
|
|||||||
validate(request).then(res => {
|
validate(request).then(res => {
|
||||||
if (res.data.type === 'API') {
|
if (res.data.type === 'API') {
|
||||||
let error = 0
|
let error = 0
|
||||||
const status = JSON.parse(res.data.status)
|
const status = JSON.parse(res.data.status) as Array<{ status: string }>
|
||||||
for (let i = 0; i < status.length; i++) {
|
for (let i = 0; i < status.length; i++) {
|
||||||
if (status[i].status === 'Error') {
|
if (status[i].status === 'Error') {
|
||||||
error++
|
error++
|
||||||
|
@ -405,21 +405,6 @@ const dfsDatasourceTree = (ds, id) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const convertConfig = array => {
|
|
||||||
for (let index = 0; index < array.length; index++) {
|
|
||||||
if (array[index].leaf) {
|
|
||||||
if (array[index].configuration) {
|
|
||||||
array[index].configuration = JSON.parse(Base64.decode(array[index].configuration))
|
|
||||||
}
|
|
||||||
if (array[index].apiConfigurationStr) {
|
|
||||||
array[index].apiConfiguration = JSON.parse(Base64.decode(array[index].apiConfigurationStr))
|
|
||||||
}
|
|
||||||
} else if (array[index].children && array[index].children.length > 0) {
|
|
||||||
convertConfig(array[index].children)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
listDs()
|
listDs()
|
||||||
|
|
||||||
const creatDsFolder = ref()
|
const creatDsFolder = ref()
|
||||||
@ -519,7 +504,7 @@ const updateApiTable = api => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const updateApiDs = () => {
|
const updateApiDs = () => {
|
||||||
syncApiDs({ datasourceId: nodeInfo.id }).then(res => {
|
syncApiDs({ datasourceId: nodeInfo.id }).then(() => {
|
||||||
ElMessage.success(t('datasource.req_completed'))
|
ElMessage.success(t('datasource.req_completed'))
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user