mkm/goview_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://gitee.com/MTrun/go-view

Browse Source
This commit is contained in:
奔跑的面条 2022-09-19 20:13:50 +08:00
commit 73072892ab
10 changed files with 36 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Pages/ChartItemSetting/StylesSetting.vue
View File

@ -5,6 +5,9 @@
</div>
<collapse-item :name="isCanvas ? '滤镜' : '滤镜 / 变换'">
<template #header>
<n-switch v-if="isCanvas" v-model:value="chartStyles.filterShow" size="small"></n-switch>
</template>
<setting-item-box name="色相" :alone="true">
<setting-item :name="`值：${chartStyles.hueRotate}deg`">
<!-- 透明度 -->
@ -121,6 +124,9 @@
></n-input-number>
</setting-item>
</setting-item-box>
<!-- 提示 -->
<n-tag v-show="isCanvas" type="warning"> 若预览时大屏模糊，可以尝试关闭滤镜进行修复 </n-tag>
</collapse-item>
</template>

4
src/packages/index.d.ts vendored
View File

@ -38,6 +38,9 @@ interface EchartsDataType {
// 滤镜/变换枚举
export enum FilterEnum {
// 是否启用
FILTERS_SHOW = 'filterShow',
// 透明度
OPACITY = 'opacity',
// 饱和度
@ -65,6 +68,7 @@ export interface PublicConfigType {
isGroup: boolean
attr: { x: number; y: number; w: number; h: number; zIndex: number; offsetX: number; offsetY: number; }
styles: {
[FilterEnum.FILTERS_SHOW]: boolean
[FilterEnum.OPACITY]: number
[FilterEnum.SATURATE]: number
[FilterEnum.CONTRAST]: number

2
src/packages/public/publicConfig.ts
View File

@ -43,6 +43,8 @@ export class PublicConfigClass implements PublicConfigType {
public attr = { ...chartInitConfig, zIndex: -1 }
// 基本样式
public styles = {
// 使用滤镜
filterShow: true,
// 色相
hueRotate: 0,
// 饱和度

2
src/store/modules/chartEditStore/chartEditStore.d.ts vendored
View File

@ -59,6 +59,8 @@ export enum EditCanvasConfigEnum {
}
export interface EditCanvasConfigType {
// 滤镜-启用
[FilterEnum.FILTERS_SHOW]: boolean
// 滤镜-色相
[FilterEnum.HUE_ROTATE]: number
// 滤镜-饱和度

2
src/store/modules/chartEditStore/chartEditStore.ts
View File

@ -79,6 +79,8 @@ export const useChartEditStore = defineStore({
width: 1920,
// 默认高度
height: 1080,
// 启用滤镜
filterShow: false,
// 色相
hueRotate: 0,
// 饱和度

3
src/utils/style.ts
View File

@ -15,7 +15,8 @@ export const animationsClass = (animations: string[]) => {
}
// * 滤镜
export const getFilterStyle = (styles: StylesType | EditCanvasConfigType) => {
export const getFilterStyle = (styles?: StylesType | EditCanvasConfigType) => {
if(!styles) return {}
const { opacity, saturate, contrast, hueRotate, brightness } = styles
return {
opacity: opacity,

14
src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue
View File

@ -4,17 +4,17 @@
<setting-item-box name="请求配置">
<setting-item name="类型">
<n-tag :bordered="false" type="primary" style="border-radius: 5px">
{{ requestContentType === RequestContentTypeEnum.DEFAULT ? '普通请求' : 'SQL请求' }}
{{ targetData.request.requestContentType === RequestContentTypeEnum.DEFAULT ? '普通请求' : 'SQL请求' }}
</n-tag>
</setting-item>
<setting-item name="方式">
<n-input size="small" :placeholder="requestHttpType || '暂无'" :disabled="true"></n-input>
<n-input size="small" :placeholder="targetData.request.requestHttpType || '暂无'" :disabled="true"></n-input>
</setting-item>
<setting-item name="组件间隔（高级）">
<n-input size="small" :placeholder="`${requestInterval || '暂无'}`" :disabled="true">
<template #suffix> {{ SelectHttpTimeNameObj[requestIntervalUnit] }} </template>
<n-input size="small" :placeholder="`${targetData.request.requestInterval || '暂无'}`" :disabled="true">
<template #suffix> {{ SelectHttpTimeNameObj[targetData.request.requestIntervalUnit] }} </template>
</n-input>
</setting-item>
@ -34,7 +34,7 @@
</setting-item-box>
<setting-item-box name="组件地址" :alone="true">
<n-input size="small" :placeholder="requestUrl || '暂无'" :disabled="true">
<n-input size="small" :placeholder="targetData.request.requestUrl || '暂无'" :disabled="true">
<template #prefix>
<n-icon :component="FlashIcon" />
</template>
@ -100,9 +100,7 @@ import debounce from 'lodash/debounce'
const { HelpOutlineIcon, FlashIcon, PulseIcon } = icon.ionicons5
const { targetData, chartEditStore } = useTargetData()
const { requestUrl, requestHttpType, requestInterval, requestIntervalUnit, requestContentType } = toRefs(
targetData.value.request
)
const {
requestOriginUrl,
requestInterval: GlobalRequestInterval,

5
src/views/chart/ContentEdit/components/EditTools/index.vue
View File

@ -19,7 +19,7 @@
placement="left"
>
<template #trigger>
<div class="btn-item" :class="[btnList.length - 1 === index && 'go-mt-0']">
<div class="btn-item">
<n-button v-if="item.type === TypeEnum.BUTTON" :circle="isAside" secondary @click="item.handle">
<template #icon>
<n-icon size="22" v-if="isAside">
@ -175,6 +175,9 @@ $asideBottom: 70px;
transition: height ease 0.4s;
.btn-item {
margin-bottom: 10px;
&:first-of-type {
margin-bottom: 0;
}
@include deep() {
.n-button__icon {
margin-right: 4px;

9
src/views/chart/ContentEdit/index.vue
View File

@ -19,7 +19,7 @@
<!-- 滤镜预览 -->
<div
:style="{
...getFilterStyle(chartEditStore.getEditCanvasConfig),
...getFilterStyle(filterShow ? chartEditStore.getEditCanvasConfig : undefined),
...rangeStyle
}"
>
@ -54,7 +54,7 @@
:themeColor="themeColor"
:style="{
...useSizeStyle(item.attr),
...getFilterStyle(item.styles),
...getFilterStyle(filterShow ? item.styles : undefined),
...getTransformStyle(item.styles)
}"
></component>
@ -146,6 +146,11 @@ const themeColor = computed(() => {
return chartColors[chartThemeColor]
})
// 是否展示渲染
const filterShow = computed(() => {
return chartEditStore.getEditCanvasConfig.filterShow
})
// 背景
const rangeStyle = computed(() => {
// 设置背景色和图片背景

2
src/views/preview/index.vue
View File

@ -42,7 +42,7 @@ const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as ChartE
const previewRefStyle = computed(() => {
return {
...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig),
...getFilterStyle(localStorageInfo.editCanvasConfig)
...getFilterStyle(localStorageInfo.editCanvasConfig.filterShow ? localStorageInfo.editCanvasConfig : undefined)
}
})