From e9a1606f009f126dcf5a2bac378513041205558c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Wed, 4 May 2022 13:21:27 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E6=BB=A4=E9=95=9C=E5=AF=BC=E8=87=B4TS=E6=89=93=E5=8C=85?=
 =?UTF-8?q?=E6=8A=A5=E9=94=99=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E5=A3=81=E7=BA=B8=E4=B8=8D=E6=9B=B4=E9=9A=8F=E6=BB=A4=E9=95=9C?=
 =?UTF-8?q?=E5=8F=98=E6=8D=A2=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/settings/systemSetting.ts                 |  2 +-
 .../chartEditStore/chartEditStore.d.ts        |  6 +++++
 .../modules/chartEditStore/chartEditStore.ts  |  6 +++++
 src/views/chart/ContentEdit/index.vue         | 25 ++++++++++++++++++-
 4 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/settings/systemSetting.ts b/src/settings/systemSetting.ts
index 65ccc4b2..ed72c6ed 100644
--- a/src/settings/systemSetting.ts
+++ b/src/settings/systemSetting.ts
@@ -13,5 +13,5 @@ export const systemSetting = {
   // 图表拖拽时的吸附距离（px）
   [SettingStoreEnums.CHART_ALIGN_RANGE]: 10,
   // 图表工具栏状态（侧边工具状态）
-  [SettingStoreEnums.CHART_TOOLS_STATUS]: ToolsStatusEnum.ASIDE
+  [SettingStoreEnums.CHART_TOOLS_STATUS]: ToolsStatusEnum.DOCK
 }
\ No newline at end of file
diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts
index da66f285..653fc467 100644
--- a/src/store/modules/chartEditStore/chartEditStore.d.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.d.ts
@@ -61,6 +61,12 @@ export interface EditCanvasConfigType {
   [FilterEnum.CONTRAST]: number
   // 滤镜-不透明度
   [FilterEnum.OPACITY]: number
+  // 变换（暂不使用）
+  [FilterEnum.ROTATE_Z]: number
+  [FilterEnum.ROTATE_X]: number
+  [FilterEnum.ROTATE_Y]: number
+  [FilterEnum.SKEW_X]: number
+  [FilterEnum.SKEW_Y]: number
   // 大屏宽度
   [EditCanvasConfigEnum.WIDTH]: number
   // 大屏高度
diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index 22e44544..843c942e 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -82,6 +82,12 @@ export const useChartEditStore = defineStore({
       brightness: 1,
       // 透明度
       opacity: 1,
+      // 变换（暂不更改）
+      rotateZ: 0,
+      rotateX: 0,
+      rotateY: 0,
+      skewX: 0,
+      skewY: 0,
       // 默认背景色
       background: undefined,
       backgroundImage: undefined,
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index faeed373..903342d8 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -15,7 +15,10 @@
       <!-- 展示 -->
       <edit-range>
         <!-- 滤镜预览 -->
-        <div :style="getFilterStyle(chartEditStore.getEditCanvasConfig)">
+        <div :style="{
+            ...getFilterStyle(chartEditStore.getEditCanvasConfig),
+            ...rangeStyle
+          }">
           <!-- 图表 -->
           <edit-shape-box
             v-for="(item, index) in chartEditStore.getComponentList"
@@ -98,6 +101,26 @@ const themeColor = computed(() => {
   return chartColors[chartThemeColor]
 })
 
+// 背景
+const rangeStyle = computed(() => {
+  // 设置背景色和图片背景
+  const background = chartEditStore.getEditCanvasConfig.background
+  const backgroundImage = chartEditStore.getEditCanvasConfig.backgroundImage
+  const selectColor = chartEditStore.getEditCanvasConfig.selectColor
+  const backgroundColor = background ? background : undefined
+
+  const computedBackground = selectColor
+    ? { background: backgroundColor }
+    : { background: `url(${backgroundImage}) no-repeat center/100% !important` }
+
+  // @ts-ignore
+  return {
+    ...computedBackground,
+    width: 'inherit',
+    height: 'inherit'
+  }
+})
+
 // 键盘事件
 onMounted(() => {
   useAddKeyboard()