feat：新增全局接口配置，单个图表映射表，抽离柱状图数据格式，

src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartDataSetting/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="go-chart-data-setting">
     <setting-item-box name="源地址" :alone="true">
       <n-input
         v-model:value="requestConfig.requestUrl"
@@ -33,5 +33,3 @@ const requestConfig: Ref<RequestConfigType> = computed(() => {
   return chartEditStore.getRequestConfig
 })
 </script>
-
-<style lang="scss" scoped></style>

src/views/chart/ContentConfigurations/components/ChartAnimation/index.vue

@@ -34,25 +34,19 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, Ref } from 'vue'
+import { ref } from 'vue'
 import { animations } from '@/settings/animations/index'
 import { CollapseItem } from '@/components/ChartItemSetting/index'
-import { CreateComponentType } from '@/packages/index.d'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { useTargetData } from '../hooks/useTargetData.hook'
 
 // 全局颜色
 const designStore = useDesignStore()
 const themeColor = ref(designStore.getAppTheme)
 
-const chartEditStore = useChartEditStore()
 const hoverPreviewAnimate = ref('')
 
-const targetData: Ref<CreateComponentType> = computed(() => {
-  const list = chartEditStore.getComponentList
-  const targetIndex = chartEditStore.fetchTargetIndex()
-  return list[targetIndex]
-})
+const { targetData } = useTargetData()
 
 // * 选中的动画样式
 const activeIndex = (value: string) => {

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

@@ -1,11 +1,94 @@
 <template>
-  <div>
-    数据
+  <div class="go-chart-configurations-data">
+    <setting-item-box v-if="targetData" name="请求方式" :alone="true">
+      <n-select
+        v-model:value="targetData.data.requestDataType"
+        :options="selcetOpeions"
+        @on-update="updateHandle"
+      />
+    </setting-item-box>
+    <n-timeline>
+      <n-timeline-item type="info" title="数据结构">
+        <n-table striped>
+          <thead>
+            <tr>
+              <th>字段</th>
+              <th>映射</th>
+              <th>状态</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) in dataStructure" :key="index">
+              <td>{{ item.field }}</td>
+              <td>{{ item.mapping }}</td>
+              <td>
+                <n-space>
+                  <n-badge
+                    dot
+                    :type="item.result ? 'success' : 'error'"
+                  ></n-badge>
+                  <n-text>匹配{{ item.result ? '成功' : '失败' }}</n-text>
+                </n-space>
+              </td>
+            </tr>
+          </tbody>
+        </n-table>
+      </n-timeline-item>
+      <n-timeline-item type="success" title="静态数据">
+        <n-code
+          v-for="(item, index) in code"
+          :key="index"
+          :code="item.data"
+          language="json"
+        ></n-code>
+      </n-timeline-item>
+    </n-timeline>
   </div>
 </template>
 
-<script setup lang="ts" >
+<script setup lang="ts">
+import { ref, toRaw } from 'vue'
+import { SettingItemBox } from '@/components/ChartItemSetting/index'
+import { RequestDataTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { useTargetData } from '../hooks/useTargetData.hook'
 
+const { targetData } = useTargetData()
+
+const code = toRaw((targetData.value.option as any).series)
+
+const selcetOpeions = [
+  {
+    label: '静态数据',
+    value: RequestDataTypeEnum.STATIC
+  },
+  {
+    label: '动态请求',
+    value: RequestDataTypeEnum.AJAX
+  }
+]
+
+const dataStructure = ref([
+  {
+    // 字段
+    field: 'x',
+    // 映射
+    mapping: 'xData',
+    // 结果
+    result: true
+  },
+  {
+    // 字段
+    field: 'y',
+    // 映射
+    mapping: 'yData',
+    // 结果
+    result: true
+  }
+])
+
+const updateHandle = (value: any) => {
+  console.log(value)
+}
 </script>
 
 <style lang="scss" scoped></style>

src/views/chart/ContentConfigurations/components/ChartSetting/index.vue

@@ -25,19 +25,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, Ref } from 'vue'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { GlobalSetting, PositionSetting, SizeSetting, StylesSetting } from '@/components/ChartItemSetting/index'
-import { CreateComponentType } from '@/packages/index.d'
 import { SettingItemBox } from '@/components/ChartItemSetting/index'
+import { useTargetData } from '../hooks/useTargetData.hook'
 
-const chartEditStore = useChartEditStore()
-
-const targetData: Ref<CreateComponentType> = computed(() => {
-  const list = chartEditStore.getComponentList
-  const targetIndex = chartEditStore.fetchTargetIndex()
-  return list[targetIndex]
-})
+const { targetData, chartEditStore } = useTargetData()
 
 </script>
 

src/views/chart/ContentConfigurations/components/hooks/useTargetData.hook.ts

@@ -0,0 +1,14 @@
+import { computed, Ref } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+// 获取当前对象数据
+export const useTargetData = () => {
+  const chartEditStore = useChartEditStore()
+  const targetData: Ref<CreateComponentType> = computed(() => {
+    const list = chartEditStore.getComponentList
+    const targetIndex = chartEditStore.fetchTargetIndex()
+    return list[targetIndex]
+  })
+  return { targetData, chartEditStore }
+}