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

.eslintrc.js

@@ -9,16 +9,17 @@ module.exports = {
     sourceType: 'module',
     ecmaFeatures: {
       jsx: true,
-      tsx: true,
+      tsx: true
-    },
+    }
   },
   env: {
     node: true,
+    // The Follow config only works with eslint-plugin-vue v8.0.0+
+    'vue/setup-compiler-macros': true
   },
-  extends: ["plugin:vue/vue3-essential", "eslint:recommended"],
+  extends: ['plugin:vue/vue3-essential', 'eslint:recommended'],
   rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
-  },
+  }
-};
+}
-

src/components/Tips/MacOsControlBtn/index.vue

@@ -37,7 +37,9 @@ const props = defineProps({
   hidden: {
     request: false,
     type: Array,
-    default: []
+    default() {
+      return []
+    }
   },
   // 使用全屏功能
   narrow: {
@@ -76,7 +78,7 @@ const btnList: {
     icon: RemoveIcon
   },
   {
-    title: isFull ? '缩小' : '放大',
+    title: isFull.value ? '缩小' : '放大',
     key: props.narrow ? 'fullResize' : 'resize',
     icon: ResizeIcon
   }

src/packages/components/Charts/Maps/MapChina/config.ts

@@ -0,0 +1,67 @@
+import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
+import { MapChinaConfig } from './index'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import dataJson from './data.json'
+
+export const includes = []
+
+export const option = {
+  dataset: dataJson,
+  tooltip: {
+    show: true,
+    trigger: 'item'
+  },
+  geo: {
+    show: false,
+    type: 'map',
+    roam: false,
+    map: 'china'
+  },
+  series: [
+    {
+      type: 'effectScatter',
+      coordinateSystem: 'geo',
+      symbolSize: 6,
+      zlevel: 1,
+      label: {
+        show: false
+      },
+      itemStyle: {
+        shadowBlur: 10,
+        color: '#00ECC8'
+      },
+      data: []
+    },
+    {
+      name: '地图',
+      type: 'map',
+      map: 'china',
+      zoom: 1, //缩放
+      itemStyle: {
+        // 背景色
+        areaColor: 'rgba(117, 236, 170, 0.3)',
+        emphasis: {
+          areaColor: 'rgba(117, 236, 170, .8)',
+          borderWidth: 1,
+          shadowBlur: 10,
+          shadowColor: '#75ecaa'
+        },
+        color: '#ffffff',
+        borderColor: '#75ecaa',
+        borderWidth: 1
+      },
+      label: {
+        show: true,
+        color: '#ffffff'
+      },
+      data: []
+    }
+  ]
+}
+export default class Config extends publicConfig implements CreateComponentType {
+  public key: string = MapChinaConfig.key
+  public attr = { ...chartInitConfig, w: 750, h: 800, zIndex: -1 }
+  public chartConfig = MapChinaConfig
+  public option = echartOptionProfixHandle(option, includes)
+}

src/packages/components/Charts/Maps/MapChina/config.vue

@@ -0,0 +1,77 @@
+<template>
+  <!-- Echarts 全局设置 -->
+  <div>
+    <global-setting :optionData="optionData" :in-chart="true"></global-setting>
+    <CollapseItem name="地图" :expanded="true">
+      <SettingItemBox name="省份" :alone="true">
+        <SettingItem name="背景颜色">
+          <n-color-picker
+            size="small"
+            :modes="['hex']"
+            v-model:value="seriesList[1].itemStyle.areaColor"
+          ></n-color-picker>
+        </SettingItem>
+        <SettingItem name="聚焦颜色（预览可见）">
+          <n-color-picker
+            size="small"
+            :modes="['hex']"
+            v-model:value="seriesList[1].itemStyle.emphasis.areaColor"
+          ></n-color-picker>
+        </SettingItem>
+        <SettingItem name="聚焦阴影（预览可见）">
+          <n-color-picker
+            size="small"
+            :modes="['hex']"
+            v-model:value="seriesList[1].itemStyle.emphasis.shadowColor"
+          ></n-color-picker>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="边框">
+        <SettingItem name="颜色">
+          <n-color-picker
+            size="small"
+            :modes="['hex']"
+            v-model:value="seriesList[1].itemStyle.borderColor"
+          ></n-color-picker>
+        </SettingItem>
+        <SettingItem name="大小">
+          <n-input-number
+            v-model:value="seriesList[1].itemStyle.borderWidth"
+            :min="1"
+            size="small"
+            placeholder="请输入边框大小"
+          ></n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+    <CollapseItem name="标记" :expanded="true">
+      <SettingItemBox name="样式">
+        <SettingItem name="大小">
+          <n-input-number v-model:value="seriesList[0].symbolSize" size="small" :min="0"></n-input-number>
+        </SettingItem>
+        <SettingItem name="颜色">
+          <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { lineConf } from '@/packages/chartConfiguration/echarts/index'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

src/packages/components/Charts/Maps/MapChina/data.json

@@ -0,0 +1,146 @@
+{
+  "point": [
+    {
+      "name": "北京",
+      "value": [116.2, 39.56, 1000]
+    }
+  ],
+  "map": [
+    {
+      "name": "北京市",
+      "value": 100
+    },
+    {
+      "name": "天津市",
+      "value": 99
+    },
+    {
+      "name": "河北省",
+      "value": 98
+    },
+    {
+      "name": "山西省",
+      "value": 97
+    },
+    {
+      "name": "内蒙古自治区",
+      "value": 96
+    },
+    {
+      "name": "辽宁省",
+      "value": 95
+    },
+    {
+      "name": "吉林省",
+      "value": 94
+    },
+    {
+      "name": "黑龙江省",
+      "value": 93
+    },
+    {
+      "name": "上海市",
+      "value": 92
+    },
+    {
+      "name": "江苏省",
+      "value": 91
+    },
+    {
+      "name": "浙江省",
+      "value": 90
+    },
+    {
+      "name": "安徽省",
+      "value": 89
+    },
+    {
+      "name": "福建省",
+      "value": 88
+    },
+    {
+      "name": "江西省",
+      "value": 87
+    },
+    {
+      "name": "山东省",
+      "value": 86
+    },
+    {
+      "name": "河南省",
+      "value": 85
+    },
+    {
+      "name": "湖北省",
+      "value": 84
+    },
+    {
+      "name": "湖南省",
+      "value": 83
+    },
+    {
+      "name": "广东省",
+      "value": 82
+    },
+    {
+      "name": "广西壮族自治区",
+      "value": 81
+    },
+    {
+      "name": "海南省",
+      "value": 80
+    },
+    {
+      "name": "重庆市",
+      "value": 79
+    },
+    {
+      "name": "四川省",
+      "value": 78
+    },
+    {
+      "name": "贵州省",
+      "value": 77
+    },
+    {
+      "name": "云南省",
+      "value": 76
+    },
+    {
+      "name": "西藏自治区",
+      "value": 75
+    },
+    {
+      "name": "陕西省",
+      "value": 74
+    },
+    {
+      "name": "甘肃省",
+      "value": 73
+    },
+    {
+      "name": "青海省",
+      "value": 72
+    },
+    {
+      "name": "宁夏回族自治区",
+      "value": 71
+    },
+    {
+      "name": "新疆维吾尔自治区",
+      "value": 70
+    },
+    {
+      "name": "台湾省",
+      "value": 69
+    },
+    {
+      "name": "香港特别行政区",
+      "value": 68
+    },
+    {
+      "name": "澳门特别行政区",
+      "value": 67
+    }
+  ]
+}

src/packages/components/Charts/Maps/MapChina/index.ts

@@ -1,14 +1,15 @@
 import image from '@/assets/images/chart/charts/map.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
-export const MapChineConfig: ConfigType = {
+export const MapChinaConfig: ConfigType = {
-  key: 'MapChine',
+  key: 'MapChina',
-  chartKey: 'VMapChine',
+  chartKey: 'VMapChina',
-  conKey: 'VCMapChine',
+  conKey: 'VCMapChina',
   title: '地图',
   category: ChatCategoryEnum.MAP,
   categoryName: ChatCategoryEnumName.MAP,
   package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
   image
 }

src/packages/components/Charts/Maps/MapChina/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  </v-chart>
+</template>
+
+<script setup lang="ts">
+import { PropType, reactive, watch } from 'vue'
+import config, { includes } from './config'
+import VChart from 'vue-echarts'
+import { use, registerMap } from 'echarts/core'
+import { EffectScatterChart, MapChart } from 'echarts/charts'
+import { CanvasRenderer } from 'echarts/renderers'
+import { useChartDataFetch } from '@/hooks'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import dataJson from './data.json'
+import mapJson from './map.json'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, GeoComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+use([
+  MapChart,
+  DatasetComponent,
+  CanvasRenderer,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  GeoComponent,
+  EffectScatterChart
+])
+
+registerMap('china', { geoJSON: mapJson as any, specialAreas: {} })
+
+const option = reactive({
+  value: mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const dataSetHandle = (dataset: any) => {
+  props.chartConfig.option.series.forEach((item: any) => {
+    if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point
+    else if (item.type === 'map' && dataset.point) item.data = dataset.map
+    option.value = props.chartConfig.option
+  })
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    dataSetHandle(newData)
+  },
+  {
+    immediate: true
+  }
+)
+
+// 预览
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  dataSetHandle(newData)
+})
+</script>

src/packages/components/Charts/Maps/MapChine/config.ts

@@ -1,137 +0,0 @@
-import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
-import { MapChineConfig } from './index'
-import { CreateComponentType } from '@/packages/index.d'
-import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
-import dataJson from './points.json'
-export const includes = ['geo']
-
-export const option = {
-  dataset: dataJson,
-  geo: {
-    show: true,
-    type: 'map',
-    aspectScale: 1, // 横向拉伸
-    roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
-    map: 'china',
-    label: {
-      show: true,
-      normal: {
-        show: true, // 默认地图文字字号和字体颜色
-        fontSize: 12,
-        color: '#ffffff'
-      },
-      emphasis: {
-        show: true,
-        fontSize: 10, // 选中地图文字字号和字体颜色
-        color: '#CFCFCF'
-      }
-    },
-    itemStyle: {
-      normal: {
-        areaColor: {
-          type: 'linear',
-          x: 0,
-          y: 0,
-          x2: 0.5,
-          y2: 0.3,
-          colorStops: [
-            {
-              offset: 0,
-              color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
-            },
-            {
-              offset: 1,
-              color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
-            }
-          ],
-          globalCoord: false // 缺省为 false
-        }, //地图本身的颜色
-        borderColor: 'rgba(147, 235, 248, 1)', //省份边框颜色
-        borderWidth: 1 // 省份边框宽度
-      },
-      emphasis: {
-        areaColor: {
-          type: 'linear',
-          x: 0,
-          y: 0,
-          x2: 1,
-          y2: 0,
-          colorStops: [
-            {
-              offset: 0,
-              color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
-            },
-            {
-              offset: 1,
-              color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
-            }
-          ],
-          globalCoord: false // 缺省为 false
-        }, //地图本身的颜色
-        borderColor: 'rgba(147, 235, 248, 0.8)', //省份边框颜色
-        borderWidth: 1 // 省份边框宽度
-      }
-    },
-    textFixed: {
-      Alaska: [20, -20]
-    }
-  },
-  series: [
-    {
-      type: 'effectScatter',
-      coordinateSystem: 'geo',
-      symbolSize: 12,
-      // data: [
-      //   {
-      //     // 数据映射
-      //     name: '苏尼特左旗', // 对应地图中的name
-      //     value: [113.653412, 43.854108, 4500] // value值,前面两个是X轴,Y轴坐标, 后面的数据自定义,可以设置多个
-      //   },
-      //   {
-      //     name: '二连浩特市',
-      //     value: [111.97981, 43.652895, 3560]
-      //   },
-      //   {
-      //     name: '阿巴嘎旗',
-      //     value: [114.970618, 44.022728, 3300]
-      //   },
-      //   {
-      //     name: '苏尼特右旗',
-      //     value: [112.65539, 42.746662, 2800]
-      //   },
-      //   {
-      //     name: '正镶白旗',
-      //     value: [115.031423, 42.286807, 2100]
-      //   },
-      //   {
-      //     name: '太仆寺旗',
-      //     value: [115.28728, 41.895199, 1900]
-      //   }
-      // ],
-      label: {
-        normal: {
-          show: false
-        },
-        emphasis: {
-          show: false
-        }
-      },
-      itemStyle: {
-        normal: {
-          shadowBlur: 10,
-          color: '#00ECC8'
-        },
-        emphasis: {
-          borderColor: '#fff',
-          borderWidth: 1
-        }
-      }
-    }
-  ]
-}
-export default class Config extends publicConfig implements CreateComponentType {
-  public key: string = MapChineConfig.key
-  public chartConfig = MapChineConfig
-  // 图表配置项
-  public option = echartOptionProfixHandle(option, includes)
-}

src/packages/components/Charts/Maps/MapChine/config.vue

@@ -1,51 +0,0 @@
-<template>
-  <!-- Echarts 全局设置 -->
-  <div>
-    <global-setting :optionData="optionData" :in-chart="true"></global-setting>
-    <CollapseItem
-      name="标记样式"
-      :expanded="false"
-      v-for="(item, index) in seriesList"
-      :key="index"
-    >
-      <SettingItemBox name="标记">
-        <SettingItem name="标记大小">
-          <n-input-number
-            v-model:value="item.symbolSize"
-            size="small"
-            :min="1"
-          ></n-input-number>
-        </SettingItem>
-        <SettingItem name="颜色">
-          <n-color-picker
-            size="small"
-            :modes="['hex']"
-            v-model:value="item.itemStyle.normal.color"
-          ></n-color-picker>
-        </SettingItem>
-      </SettingItemBox>
-    </CollapseItem>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { PropType, computed } from "vue";
-import {
-  CollapseItem,
-  SettingItemBox,
-  SettingItem,
-} from "@/components/Pages/ChartItemSetting";
-import { lineConf } from "@/packages/chartConfiguration/echarts/index";
-import { GlobalThemeJsonType } from "@/settings/chartThemes/index";
-import { GlobalSetting } from "@/components/Pages/ChartItemSetting";
-
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<GlobalThemeJsonType>,
-    required: true,
-  },
-});
-const seriesList = computed(() => {
-  return props.optionData.series;
-});
-</script>

src/packages/components/Charts/Maps/MapChine/index.vue

@@ -1,75 +0,0 @@
-<template>
-  <v-chart
-    ref="vChartRef"
-    :theme="themeColor"
-    :option="option.value"
-    :manual-update="isPreview()"
-    autoresize
-  >
-  </v-chart>
-</template>
-
-<script setup lang="ts">
-import { PropType, computed, reactive, watch } from "vue";
-import config, { includes } from "./config";
-import VChart from "vue-echarts";
-import { use, registerMap } from "echarts/core";
-import { EffectScatterChart } from "echarts/charts";
-import { CanvasRenderer } from "echarts/renderers";
-import { useChartDataFetch } from "@/hooks";
-import { mergeTheme } from "@/packages/public/chart";
-import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
-import dataJson from "./data";
-import {
-  DatasetComponent,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-  GeoComponent,
-} from "echarts/components";
-import { isPreview } from "@/utils";
-const props = defineProps({
-  themeSetting: {
-    type: Object,
-    required: true,
-  },
-  themeColor: {
-    type: Object,
-    required: true,
-  },
-  chartConfig: {
-    type: Object as PropType<config>,
-    required: true,
-  },
-});
-use([
-  DatasetComponent,
-  CanvasRenderer,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-  GeoComponent,
-  EffectScatterChart,
-]);
-
-registerMap("china", { geoJSON: dataJson });
-
-const option = reactive({
-  value: mergeTheme(props.chartConfig.option, props.themeSetting, includes),
-});
-
-watch(
-  () => props.chartConfig.option.dataset,
-  (newData) => {
-    props.chartConfig.option.series[0].data = newData.data;
-    option.value = props.chartConfig.option;
-  },
-  {
-    immediate: true,
-  }
-);
-
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore);
-</script>
-
-<style lang="scss" scoped></style>

src/packages/components/Charts/Maps/MapChine/points.json

@@ -1,26 +0,0 @@
-{
-    "data": [{
-            "name": "苏尼特左旗",
-            "value": [113.653412, 43.854108, 4500]
-        }, {
-            "name": "二连浩特市",
-            "value": [111.97981, 43.652895, 3560]
-        },
-        {
-            "name": "阿巴嘎旗",
-            "value": [114.970618, 44.022728, 3300]
-        },
-        {
-            "name": "苏尼特右旗",
-            "value": [112.65539, 42.746662, 2800]
-        },
-        {
-            "name": "正镶白旗",
-            "value": [115.031423, 42.286807, 2100]
-        },
-        {
-            "name": "太仆寺旗",
-            "value": [115.28728, 41.895199, 1900]
-        }
-    ]
-}

src/packages/components/Charts/Maps/index.ts

@@ -1,3 +1,3 @@
-import { MapChineConfig } from './MapChine/index'
+import { MapChinaConfig } from './MapChina/index'
 
-export default [MapChineConfig]
+export default [MapChinaConfig]

src/packages/index.d.ts

@@ -2,7 +2,7 @@ import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
 export enum ChartFrameEnum {
-  // echarts 框架
+  // 支持 dataset 的 echarts 框架
   ECHARTS = 'echarts',
   // UI 组件框架
   NAIVE_UI = 'naiveUI',

src/store/modules/chartEditStore/chartEditStore.ts

@@ -456,6 +456,8 @@ export const useChartEditStore = defineStore({
       try {
         // 暂不支持多选
         if (this.getTargetChart.selectId.length > 1) return
+        // 处理弹窗普通复制的场景
+        if (document.getElementsByClassName('n-modal-body-wrapper').length) return
 
         loadingStart()
         const index: number = this.fetchTargetIndex()

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

@@ -33,7 +33,6 @@
     </n-timeline-item>
     <n-timeline-item type="success" :title="TimelineTitleEnum.CONTENT">
       <n-space vertical>
-        <n-text depth="3">ECharts 图表需符合 ECharts-setdata 数据规范</n-text>
         <n-space class="source-btn-box">
           <n-upload
             v-model:file-list="uploadFileListRef"
@@ -81,7 +80,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
-import { PackagesCategoryEnum } from '@/packages/index.d'
+import { ChartFrameEnum } from '@/packages/index.d'
 import { RequestDataTypeEnum } from '@/enums/httpEnum'
 import { icon } from '@/plugins'
 import { DataResultEnum, TimelineTitleEnum } from '../../index.d'
@@ -120,9 +119,9 @@ const filterShow = computed(() => {
   return targetData.value.request.requestDataType === RequestDataTypeEnum.AJAX
 })
 
-// 是图表类型
+// 是支持 dataset 的图表类型
 const isCharts = computed(() => {
-  return targetData.value.chartConfig.package === PackagesCategoryEnum.CHARTS
+  return targetData.value.chartConfig.chartFrame === ChartFrameEnum.ECHARTS
 })
 
 // 处理映射列表状态结果