fix: 格式问题
This commit is contained in:
parent
318a90f709
commit
2c6493105a
@ -1,19 +1,10 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem
|
||||
v-for="(item, index) in seriesList"
|
||||
:key="index"
|
||||
:name="`柱状图-${index + 1}`"
|
||||
:expanded="true"
|
||||
>
|
||||
<CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index + 1}`" :expanded="true">
|
||||
<SettingItemBox name="图形">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.itemStyle.color"
|
||||
></n-color-picker>
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button size="small" @click="item.itemStyle.color = null"> 恢复默认 </n-button>
|
||||
@ -28,11 +19,7 @@
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="圆角">
|
||||
<n-input-number
|
||||
v-model:value="item.itemStyle.borderRadius"
|
||||
:min="0"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
<n-input-number v-model:value="item.itemStyle.borderRadius" :min="0" size="small"></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<setting-item-box name="标签">
|
||||
@ -43,18 +30,10 @@
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number
|
||||
v-model:value="item.label.fontSize"
|
||||
size="small"
|
||||
:min="1"
|
||||
></n-input-number>
|
||||
<n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.label.color"
|
||||
></n-color-picker>
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select
|
||||
@ -63,7 +42,7 @@
|
||||
{ label: 'top', value: 'top' },
|
||||
{ label: 'left', value: 'left' },
|
||||
{ label: 'right', value: 'right' },
|
||||
{ label: 'bottom', value: 'bottom' },
|
||||
{ label: 'bottom', value: 'bottom' }
|
||||
]"
|
||||
/>
|
||||
</setting-item>
|
||||
@ -72,23 +51,18 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from "vue";
|
||||
import {
|
||||
GlobalSetting,
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem,
|
||||
} from "@/components/Pages/ChartItemSetting";
|
||||
import { GlobalThemeJsonType } from "@/settings/chartThemes/index";
|
||||
import { PropType, computed } from 'vue'
|
||||
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series;
|
||||
});
|
||||
return props.optionData.series
|
||||
})
|
||||
</script>
|
||||
|
@ -54,7 +54,7 @@ watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData: { dimensions: any }, oldData) => {
|
||||
if (!isObject(newData) || !('dimensions' in newData)) return
|
||||
if (newData?.dimensions.length !== oldData?.dimensions.length) {
|
||||
if (Array.isArray(newData?.dimensions)) {
|
||||
const seriesArr = []
|
||||
for (let i = 0; i < newData.dimensions.length - 1; i++) {
|
||||
seriesArr.push(seriesItem)
|
||||
|
@ -53,7 +53,7 @@ watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData: { dimensions: any }, oldData) => {
|
||||
if (!isObject(newData) || !('dimensions' in newData)) return
|
||||
if (newData?.dimensions.length !== oldData?.dimensions.length) {
|
||||
if (Array.isArray(newData?.dimensions)) {
|
||||
const seriesArr = []
|
||||
for (let i = 0; i < newData.dimensions.length - 1; i++) {
|
||||
seriesArr.push(seriesItem)
|
||||
|
@ -54,7 +54,7 @@ watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData: { dimensions: any }, oldData) => {
|
||||
if (!isObject(newData) || !('dimensions' in newData)) return
|
||||
if (newData?.dimensions.length !== oldData?.dimensions.length) {
|
||||
if (Array.isArray(newData?.dimensions)) {
|
||||
const seriesArr = []
|
||||
for (let i = 0; i < newData.dimensions.length - 1; i++) {
|
||||
seriesArr.push(seriesItem)
|
||||
|
@ -1,12 +1,7 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem
|
||||
v-for="(item, index) in seriesList"
|
||||
:key="index"
|
||||
name="单折线面积图"
|
||||
:expanded="true"
|
||||
>
|
||||
<CollapseItem v-for="(item, index) in seriesList" :key="index" name="单折线面积图" :expanded="true">
|
||||
<SettingItemBox name="线条">
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number
|
||||
@ -18,11 +13,7 @@
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="类型">
|
||||
<n-select
|
||||
v-model:value="item.lineStyle.type"
|
||||
size="small"
|
||||
:options="lineConf.lineStyle.type"
|
||||
></n-select>
|
||||
<n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="实心点">
|
||||
@ -44,18 +35,10 @@
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number
|
||||
v-model:value="item.label.fontSize"
|
||||
size="small"
|
||||
:min="1"
|
||||
></n-input-number>
|
||||
<n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.label.color"
|
||||
></n-color-picker>
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select
|
||||
@ -64,7 +47,7 @@
|
||||
{ label: 'top', value: 'top' },
|
||||
{ label: 'left', value: 'left' },
|
||||
{ label: 'right', value: 'right' },
|
||||
{ label: 'bottom', value: 'bottom' },
|
||||
{ label: 'bottom', value: 'bottom' }
|
||||
]"
|
||||
/>
|
||||
</setting-item>
|
||||
@ -73,24 +56,19 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from "vue";
|
||||
import { lineConf } from "@/packages/chartConfiguration/echarts/index";
|
||||
import { GlobalThemeJsonType } from "@/settings/chartThemes/index";
|
||||
import {
|
||||
GlobalSetting,
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem,
|
||||
} from "@/components/Pages/ChartItemSetting";
|
||||
import { PropType, computed } from 'vue'
|
||||
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series;
|
||||
});
|
||||
return props.optionData.series
|
||||
})
|
||||
</script>
|
||||
|
@ -70,7 +70,7 @@ watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData, oldData) => {
|
||||
if (!isArray(newData)) return
|
||||
if (newData?.length !== oldData?.length) {
|
||||
if (Array.isArray(newData)) {
|
||||
replaceMergeArr.value = ['series']
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.chartConfig.option.series = newData.map((item: { dimensions: any[] }, index: number) => ({
|
||||
|
@ -172,10 +172,7 @@ export const useMouseHandle = () => {
|
||||
e.stopPropagation()
|
||||
if (item.status.lock) return
|
||||
// 若此时按下了 CTRL, 表示多选
|
||||
if (
|
||||
window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) ||
|
||||
window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY)
|
||||
) {
|
||||
if (window.$KeyboardActive?.ctrl) {
|
||||
// 若已选中,则去除
|
||||
if (chartEditStore.targetChart.selectId.includes(item.id)) {
|
||||
const exList = chartEditStore.targetChart.selectId.filter(e => e !== item.id)
|
||||
@ -193,11 +190,7 @@ export const useMouseHandle = () => {
|
||||
if (item.status.lock) return
|
||||
onClickOutSide()
|
||||
// 按下左键 + CTRL
|
||||
if (
|
||||
e.buttons === MouseEventButton.LEFT &&
|
||||
(window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) ||
|
||||
window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY))
|
||||
)
|
||||
if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl)
|
||||
return
|
||||
|
||||
// 按下右键 + 选中多个 + 目标元素是多选子元素
|
||||
|
@ -142,11 +142,7 @@ const optionsHandle = (
|
||||
// 点击
|
||||
const clickHandle = (e: MouseEvent) => {
|
||||
// 按下左键 + CTRL
|
||||
if (
|
||||
window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) ||
|
||||
window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY)
|
||||
)
|
||||
return
|
||||
if (window.$KeyboardActive?.ctrl) return
|
||||
// 判断左右键
|
||||
expend.value = !expend.value
|
||||
mousedownHandle(e, props.componentGroupData)
|
||||
@ -157,11 +153,7 @@ const groupMousedownHandle = (e: MouseEvent) => {
|
||||
onClickOutSide()
|
||||
// 若此时按下了 CTRL, 表示多选
|
||||
const id = props.componentGroupData.id
|
||||
if (
|
||||
e.buttons === MouseEventButton.LEFT &&
|
||||
(window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) ||
|
||||
window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY))
|
||||
) {
|
||||
if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) {
|
||||
// 若已选中,则去除
|
||||
if (chartEditStore.targetChart.selectId.includes(id)) {
|
||||
const exList = chartEditStore.targetChart.selectId.filter(e => e !== id)
|
||||
|
@ -166,11 +166,7 @@ const mousedownHandle = (e: MouseEvent, item: CreateComponentType) => {
|
||||
onClickOutSide()
|
||||
// 若此时按下了 CTRL, 表示多选
|
||||
const id = item.id
|
||||
if (
|
||||
e.buttons === MouseEventButton.LEFT &&
|
||||
(window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) ||
|
||||
window.$KeyboardActive?.has(MacKeyboard.CTRL_SOURCE_KEY))
|
||||
) {
|
||||
if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) {
|
||||
// 若已选中,则去除
|
||||
if (chartEditStore.targetChart.selectId.includes(id)) {
|
||||
const exList = chartEditStore.targetChart.selectId.filter(e => e !== id)
|
||||
@ -198,7 +194,6 @@ const changeLayerType = (value: LayerModeEnum) => {
|
||||
layerMode.value = value
|
||||
chartLayoutStore.setItem(ChartLayoutStoreEnum.LAYER_TYPE, value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
@ -107,16 +107,17 @@ const macKeyList: Array<string> = [
|
||||
|
||||
// 处理键盘记录
|
||||
const keyRecordHandle = () => {
|
||||
// 初始化清空
|
||||
if(window.$KeyboardActive) window.$KeyboardActive = new Set([])
|
||||
|
||||
// 默认赋值
|
||||
window.$KeyboardActive = {
|
||||
ctrl: false
|
||||
}
|
||||
|
||||
document.onkeydown = (e: KeyboardEvent) => {
|
||||
if(window.$KeyboardActive) window.$KeyboardActive.add(e.key.toLocaleLowerCase())
|
||||
else window.$KeyboardActive = new Set([e.key.toLocaleLowerCase()])
|
||||
if(e.keyCode === 17 && window.$KeyboardActive) window.$KeyboardActive.ctrl = true
|
||||
}
|
||||
|
||||
document.onkeyup = (e: KeyboardEvent) => {
|
||||
if(window.$KeyboardActive) window.$KeyboardActive.delete(e.key.toLocaleLowerCase())
|
||||
if(e.keyCode === 17 && window.$KeyboardActive) window.$KeyboardActive.ctrl = false
|
||||
}
|
||||
}
|
||||
|
||||
|
4
types/global.d.ts
vendored
4
types/global.d.ts
vendored
@ -6,7 +6,7 @@ interface Window {
|
||||
$t: any
|
||||
$vue: any
|
||||
// 键盘按键记录
|
||||
$KeyboardActive?: Set<string>
|
||||
$KeyboardActive?: { [T: string]: boolean }
|
||||
}
|
||||
|
||||
declare type Recordable<T = any> = Record<string, T>
|
||||
declare type Recordable<T = any> = Record<string, T>
|
||||
|
Loading…
x
Reference in New Issue
Block a user