提交 2c649310 编写于 作者: jiangcheng.'s avatar jiangcheng.

fix: 格式问题

上级 318a90f7
<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)
......
<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
}
}
......
......@@ -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>
\ No newline at end of file
declare type Recordable<T = any> = Record<string, T>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册