mirror of
https://gitee.com/dromara/go-view.git
synced 2025-02-23 15:52:49 +08:00
feat: 新增全局测试
This commit is contained in:
MTrun
parent
c071cb5a49
commit
40a129aafd
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-divider />
|
||||
<n-divider style="margin: 10px 0" />
|
||||
<n-collapse arrow-placement="right" default-expanded-names="1">
|
||||
<!-- 右侧 -->
|
||||
<template #header-extra>
|
||||
150
src/components/ChartItemSetting/GlobalSetting.vue
Normal file
150
src/components/ChartItemSetting/GlobalSetting.vue
Normal file
@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div class="go-global-setting">
|
||||
<CollapseItem name="标题">
|
||||
<SettingItemBox name="标题">
|
||||
<SettingItem width="200">
|
||||
<n-color-picker v-model:value="title.textStyle.color" size="small" />
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="副标题">
|
||||
<SettingItem width="200">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
v-model:value="title.subtextStyle.color"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
|
||||
<CollapseItem name="X轴">
|
||||
<SettingItemBox name="文本">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
v-model:value="xAxis.nameTextStyle.color"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="轴线">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
v-model:value="xAxis.axisLine.lineStyle.color"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="粗细">
|
||||
<n-input-number
|
||||
v-model:value="xAxis.axisLine.lineStyle.width"
|
||||
:min="1"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="对齐零">
|
||||
<n-space>
|
||||
<n-switch v-model:value="xAxis.axisLine.onZero" size="small" />
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="分割线">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
v-model:value="xAxis.splitLine.lineStyle.color"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="粗细">
|
||||
<n-input-number
|
||||
v-model:value="xAxis.splitLine.lineStyle.width"
|
||||
:min="1"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="类型">
|
||||
<n-select v-model:value="xAxis.splitLine.lineStyle.type" size="small" :options="axisConf.splitLint.lineStyle.type" />
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
|
||||
<CollapseItem name="Y轴">
|
||||
<SettingItemBox name="文本">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
v-model:value="yAxis.nameTextStyle.color"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="轴线">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
v-model:value="yAxis.axisLine.lineStyle.color"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="粗细">
|
||||
<n-input-number
|
||||
v-model:value="yAxis.axisLine.lineStyle.width"
|
||||
:min="1"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="对齐零">
|
||||
<n-space>
|
||||
<n-switch v-model:value="yAxis.axisLine.onZero" size="small" />
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="分割线">
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
v-model:value="yAxis.splitLine.lineStyle.color"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="粗细">
|
||||
<n-input-number
|
||||
v-model:value="yAxis.splitLine.lineStyle.width"
|
||||
:min="1"
|
||||
size="small"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="类型">
|
||||
<n-select v-model:value="yAxis.splitLine.lineStyle.type" size="small" :options="axisConf.splitLint.lineStyle.type" />
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
|
||||
<CollapseItem name="图例">
|
||||
<SettingItemBox name="图例文字">
|
||||
<SettingItem>
|
||||
<n-color-picker size="small" v-model:value="legend.textStyle.color" />
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { toRefs, PropType } from 'vue'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { axisConf } from '@/packages/chartConfiguration/echarts/index'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/ChartItemSetting/index'
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { title, xAxis, yAxis, legend } = toRefs(props.data)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go(global-setting) {
|
||||
}
|
||||
</style>
|
||||
32
src/components/ChartItemSetting/SettingItem.vue
Normal file
32
src/components/ChartItemSetting/SettingItem.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="go-setting-item" :style="{ width: width + 'px' }">
|
||||
<slot />
|
||||
<n-text class="name" depth="3">{{ name }}</n-text>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
required: false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go(setting-item) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 110px;
|
||||
text-align: start;
|
||||
margin-bottom: 5px;
|
||||
.name {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
38
src/components/ChartItemSetting/SettingItemBox.vue
Normal file
38
src/components/ChartItemSetting/SettingItemBox.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div class="go-config-item-box">
|
||||
<n-text class="item-left" depth="2">{{ name }}</n-text>
|
||||
<div class="item-right" justify="space-between">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$leftWidth: 80px;
|
||||
@include go('config-item-box') {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
.item-left {
|
||||
width: $leftWidth;
|
||||
text-align: left;
|
||||
margin-left: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.item-right {
|
||||
display: grid;
|
||||
grid-column-gap: 10px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
width: calc(100% - #{$leftWidth});
|
||||
}
|
||||
}
|
||||
</style>
|
||||
9
src/components/ChartItemSetting/index.ts
Normal file
9
src/components/ChartItemSetting/index.ts
Normal file
@ -0,0 +1,9 @@
|
||||
// 设置项布局
|
||||
import SettingItem from './SettingItem.vue'
|
||||
import SettingItemBox from './SettingItemBox.vue'
|
||||
import CollapseItem from './CollapseItem.vue'
|
||||
|
||||
// 全局配置属性通用模板
|
||||
import GlobalSetting from './GlobalSetting.vue'
|
||||
|
||||
export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting }
|
||||
@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="type === 'number'"
|
||||
:style="{ width: width ? width + 'px' : '100%' }"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
<div v-else :style="{ width: `${width}px` }">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
width: {
|
||||
type: Number,
|
||||
required: false
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,33 +0,0 @@
|
||||
<template>
|
||||
<div class="go-config-item-box go-flex-items-center">
|
||||
<n-text class="item-left">{{ name }}</n-text>
|
||||
<n-space class="item-right" justify="space-between">
|
||||
<slot />
|
||||
</n-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$leftWidth: 100px;
|
||||
@include go('config-item-box') {
|
||||
position: relative;
|
||||
justify-content: flex-start;
|
||||
.item-left {
|
||||
width: $leftWidth;
|
||||
text-align: left;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.item-right {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<div class="go-global-setting">
|
||||
<CollapseItem name="标题">
|
||||
<ConfigItemBox name="标题颜色">
|
||||
<ConfigItem :width="200">
|
||||
<n-color-picker
|
||||
v-model:value="title.textStyle.color"
|
||||
/>
|
||||
</ConfigItem>
|
||||
</ConfigItemBox>
|
||||
<ConfigItemBox name="副标题颜色">
|
||||
<ConfigItem :width="200">
|
||||
<n-color-picker
|
||||
v-model:value="title.subtextStyle.color"
|
||||
/>
|
||||
</ConfigItem>
|
||||
</ConfigItemBox>
|
||||
</CollapseItem>
|
||||
<CollapseItem name="图例">
|
||||
<ConfigItemBox name="图例文字颜色">
|
||||
<ConfigItem :width="200">
|
||||
<n-color-picker
|
||||
v-model:value="legend.textStyle.color"
|
||||
/>
|
||||
</ConfigItem>
|
||||
</ConfigItemBox>
|
||||
</CollapseItem>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { toRefs, PropType } from 'vue'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import {
|
||||
CollapseItem,
|
||||
ConfigItemBox,
|
||||
ConfigItem
|
||||
} from '@/components/ConfigItemCom/index'
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { title, legend } = toRefs(props.data)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go(global-setting) {
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +0,0 @@
|
||||
// 设置项布局
|
||||
import ConfigItem from './ConfigItem.vue'
|
||||
import ConfigItemBox from './ConfigItemBox.vue'
|
||||
import CollapseItem from './CollapseItem.vue'
|
||||
|
||||
// 全局配置属性通用模板
|
||||
import GlobalSetting from './GlobalSetting.vue'
|
||||
|
||||
export { CollapseItem, ConfigItemBox, ConfigItem, GlobalSetting }
|
||||
20
src/packages/chartConfiguration/echarts/axis.ts
Normal file
20
src/packages/chartConfiguration/echarts/axis.ts
Normal file
@ -0,0 +1,20 @@
|
||||
export const axisConf = {
|
||||
splitLint: {
|
||||
lineStyle: {
|
||||
type: [
|
||||
{
|
||||
label: 'solid',
|
||||
value: 'solid'
|
||||
},
|
||||
{
|
||||
label: 'dashed',
|
||||
value: 'dashed'
|
||||
},
|
||||
{
|
||||
label: 'dotted',
|
||||
value: 'dotted'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
1
src/packages/chartConfiguration/echarts/index.ts
Normal file
1
src/packages/chartConfiguration/echarts/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './axis'
|
||||
@ -16,13 +16,13 @@
|
||||
"color": "#B9B8CE",
|
||||
"width": 1
|
||||
},
|
||||
"onZero": true,
|
||||
"onZeroAxisIndex": null
|
||||
"onZero": true
|
||||
},
|
||||
"splitLine": {
|
||||
"lineStyle": {
|
||||
"color": "#484753",
|
||||
"width": 1
|
||||
"width": 1,
|
||||
"type": "solid"
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -35,13 +35,13 @@
|
||||
"color": "#B9B8CE",
|
||||
"width": 1
|
||||
},
|
||||
"onZero": true,
|
||||
"onZeroAxisIndex": null
|
||||
"onZero": true
|
||||
},
|
||||
"splitLine": {
|
||||
"lineStyle": {
|
||||
"color": "#484753",
|
||||
"width": 1
|
||||
"width": 1,
|
||||
"type": "solid"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { GlobalSetting } from '@/components/ConfigItemCom/index'
|
||||
import { GlobalSetting } from '@/components/ChartItemSetting/index'
|
||||
|
||||
const chartEditStoreStore = useChartEditStoreStore()
|
||||
const { chartThemeSetting } = chartEditStoreStore.getEditCanvasConfig
|
||||
|
||||
Loading…
Reference in New Issue
Block a user