Pre Merge pull request !36 from dodu/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-debugger": 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'
+  }
+}

README.md

@@ -2,7 +2,7 @@
 
 ![logo](readme/logo-t-y.png)
 
-GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图表或页面元素封装为基础组件，无需编写代码即可制作数据大屏，减少心智负担。若您需商用请添加底部的 QQ 交流群，并联系群主（即作者本人）
+GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图表或页面元素封装为基础组件，无需编写代码即可制作数据大屏，减少心智负担。
 
 ### 😶 纯 **前端** 分支： **`master`**
 

package.json

@@ -6,7 +6,9 @@
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview",
     "new": "plop --plopfile ./plop/plopfile.js",
-    "postinstall": "husky install"
+    "postinstall": "husky install",
+    "lint": "eslint --ext .vue,.js,.jsx,.ts,.tsx ./ --max-warnings 0",
+    "lint:fix": "eslint --ext .vue,.js,jsx,.ts,.tsx ./ --fix"
   },
   "dependencies": {
     "@types/color": "^3.0.3",
@@ -69,4 +71,4 @@
     "vue-echarts": "^6.0.2",
     "vue-tsc": "^0.28.10"
   }
-}
+}

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,68 @@
+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: 'chinaWithoutHainanIsLands',
+      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,
+        showHainanIsLands: true // 是否显示海南群岛
+      },
+      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,82 @@
+<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>
+      <SettingItemBox name="其他">
+        <SettingItem>
+          <n-checkbox v-model:checked="seriesList[1].itemStyle.showHainanIsLands" size="small">显示海南群岛</n-checkbox>
+        </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 = {
-  key: 'MapChine',
-  chartKey: 'VMapChine',
-  conKey: 'VCMapChine',
-  title: '北京地图',
+export const MapChinaConfig: ConfigType = {
+  key: 'MapChina',
+  chartKey: 'VMapChina',
+  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,97 @@
+<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 mapJson from './map.json'
+import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.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: {} })
+registerMap('chinaWithoutHainanIsLands', { geoJSON: mapJsonWithoutHainanIsLands 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
+  })
+}
+
+const mapTypeHandle = (config: boolean) => {
+  // 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
+  // })
+  props.chartConfig.option.series[1].map = config ? 'china' : 'chinaWithoutHainanIsLands'
+  option.value = props.chartConfig.option
+}
+
+watch(
+  () => props.chartConfig.option.series[1].itemStyle.showHainanIsLands,
+  newData => {
+    mapTypeHandle(newData)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+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.vue

@@ -1,6 +0,0 @@
-<template>
-</template>
-
-<script setup lang="ts">
-
-</script>

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

@@ -1,13 +0,0 @@
-<template>
-  <div>
-    line组件渲染
-  </div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style lang="scss" scoped>
-
-</style>

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()
@@ -598,7 +600,7 @@ export const useChartEditStore = defineStore({
               ids.push(item.id)
             })
           } else {
-            ;(historyData[0] as CreateComponentGroupType).groupList.forEach(item => {
+            (historyData[0] as CreateComponentGroupType).groupList.forEach(item => {
               ids.push(item.id)
             })
           }

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
 })
 
 // 处理映射列表状态结果

src/views/chart/ContentHeader/headerTitle/index.vue

@@ -22,6 +22,7 @@
       round
       placeholder="请输入项目名称"
       v-model:value.trim="title"
+      @keyup.enter="handleBlur"
       @blur="handleBlur"
    ></n-input>
   </n-space>

src/views/chart/hooks/useSync.hook.ts

@@ -35,7 +35,7 @@ export const useSync = () => {
       }
 
       if (e.isGroup) {
-        ;(e as CreateComponentGroupType).groupList.forEach(groupItem => {
+        (e as CreateComponentGroupType).groupList.forEach(groupItem => {
           intComponent(groupItem)
         })
       } else {