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

src/components/Pages/ChartItemSetting/StylesSetting.vue

@@ -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>
 

src/packages/index.d.ts

@@ -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

src/packages/public/publicConfig.ts

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

src/store/modules/chartEditStore/chartEditStore.d.ts

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

src/store/modules/chartEditStore/chartEditStore.ts

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

src/utils/style.ts

@@ -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,

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue

@@ -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">
+          <n-input size="small" :placeholder="`${targetData.request.requestInterval || '暂无'}`" :disabled="true">
-            <template #suffix> {{ SelectHttpTimeNameObj[requestIntervalUnit] }} </template>
+            <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,

src/views/chart/ContentEdit/components/EditTools/index.vue

@@ -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;

src/views/chart/ContentEdit/index.vue

@@ -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(() => {
   // 设置背景色和图片背景

src/views/preview/index.vue

@@ -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)
   }
 })