!54 fix: 添加lint规则运行脚本,修复lint错误

Merge pull request !54 from dodu/dev-lint-commet

.eslintrc.js

@@ -20,6 +20,10 @@ module.exports = {
   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-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-unused-vars': 'off',
+    'vue/multi-word-component-names': 'off',
+    'vue/valid-template-root': 'off',
+    'vue/no-mutating-props': 'off'
   }
 }

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 .js,.jsx,.ts,.tsx,.vue src",
+    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx,.vue src --fix"
   },
   "dependencies": {
     "@types/color": "^3.0.3",

src/api/http.ts

@@ -80,6 +80,32 @@ export const http = (type?: RequestHttpEnum) => {
       return get
   }
 }
+const prefix = 'javascript:'
+// 对输入字符进行转义处理
+export const translateStr = (target: string | object) => {
+  if (typeof target === 'string') {
+    if (target.startsWith(prefix)) {
+      const funcStr = target.split(prefix)[1]
+      let result;
+      try {
+        result = new Function(`${funcStr}`)()
+      } catch (error) {
+        console.log(error)
+        window['$message'].error('js内容解析有误！')
+      }
+      return result
+    } else {
+      return target
+    }
+  }
+  for (const key in target) {
+    if (Object.prototype.hasOwnProperty.call(target, key)) {
+      const subTarget = (target as any)[key];
+      (target as any)[key] = translateStr(subTarget)
+    }
+  }
+  return target
+}
 
 /**
  * * 自定义请求
@@ -87,7 +113,7 @@ export const http = (type?: RequestHttpEnum) => {
  * @param globalParams 全局参数
  */
 export const customizeHttp = (targetParams: RequestConfigType, globalParams: RequestGlobalConfigType) => {
-  if(!targetParams || !globalParams) {
+  if (!targetParams || !globalParams) {
     return
   }
 
@@ -125,15 +151,17 @@ export const customizeHttp = (targetParams: RequestConfigType, globalParams: Req
   }
 
   // 处理头部
-  const headers: RequestParamsObjType = {
+  let headers: RequestParamsObjType = {
     ...globalRequestParams.Header,
-    ...targetRequestParams.Header,
+    ...targetRequestParams.Header
   }
+  headers = translateStr(headers)
 
   // data 参数
   let data: RequestParamsObjType | FormData | string = {}
   // params 参数
-  let params: RequestParamsObjType = targetRequestParams.Params
+  let params: RequestParamsObjType = { ...targetRequestParams.Params }
+  params = translateStr(params)
   // form 类型处理
   let formData: FormData = new FormData()
   formData.set('default', 'defaultData')
@@ -145,33 +173,35 @@ export const customizeHttp = (targetParams: RequestConfigType, globalParams: Req
 
     case RequestBodyEnum.JSON:
       headers['Content-Type'] = ContentTypeEnum.JSON
-      data = JSON.parse(targetRequestParams.Body['json'])
+      data = translateStr(JSON.parse(targetRequestParams.Body['json']))
       // json 赋值给 data
       break
 
     case RequestBodyEnum.XML:
       headers['Content-Type'] = ContentTypeEnum.XML
       // xml 字符串赋值给 data
-      data = targetRequestParams.Body['xml']
+      data = translateStr(targetRequestParams.Body['xml'])
       break
 
-    case RequestBodyEnum.X_WWW_FORM_URLENCODED:
+    case RequestBodyEnum.X_WWW_FORM_URLENCODED: {
       headers['Content-Type'] = ContentTypeEnum.FORM_URLENCODED
       const bodyFormData = targetRequestParams.Body['x-www-form-urlencoded']
-      for (const i in bodyFormData) formData.set(i, bodyFormData[i])
+      for (const i in bodyFormData) formData.set(i, translateStr(bodyFormData[i]))
       // FormData 赋值给 data
       data = formData
       break
+    }
 
-    case RequestBodyEnum.FORM_DATA:
+    case RequestBodyEnum.FORM_DATA: {
       headers['Content-Type'] = ContentTypeEnum.FORM_DATA
       const bodyFormUrlencoded = targetRequestParams.Body['form-data']
       for (const i in bodyFormUrlencoded) {
-        formData.set(i, bodyFormUrlencoded[i])
+        formData.set(i, translateStr(bodyFormUrlencoded[i]))
       }
       // FormData 赋值给 data
       data = formData
       break
+    }
   }
 
   // sql 处理
@@ -180,11 +210,17 @@ export const customizeHttp = (targetParams: RequestConfigType, globalParams: Req
     data = requestSQLContent
   }
 
-  return axiosInstance({
-    url: `${requestOriginUrl}${requestUrl}`,
-    method: requestHttpType,
-    data,
-    params,
-    headers
-  })
+  try {
+    const url =  (new Function("return `" + `${requestOriginUrl}${requestUrl}`.trim() + "`"))();
+    return axiosInstance({
+        url,
+        method: requestHttpType,
+        data,
+        params,
+        headers
+    })
+  } catch (error) {
+    console.log(error)
+    window['$message'].error('URL地址格式有误！')
+  }
 }

src/api/mock/index.ts

@@ -14,6 +14,7 @@ export const scrollBoardUrl = '/mock/scrollBoard'
 export const radarUrl = '/mock/radarData'
 export const heatMapUrl = '/mock/heatMapData'
 export const scatterBasicUrl = '/mock/scatterBasic'
+export const mapUrl = '/mock/map'
 
 const mockObject: MockMethod[] = [
   {
@@ -73,6 +74,11 @@ const mockObject: MockMethod[] = [
     method: RequestHttpEnum.GET,
     response: () => test.fetchScatterBasic
   },
+  {
+    url: mapUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchMap
+  },
 ]
 
 export default mockObject

src/api/mock/map.json

@@ -0,0 +1,79 @@
+{
+  "point": [
+    {
+      "name": "北京",
+      "value": [116.405285, 39.904989, 200]
+    },
+    {
+      "name": "郑州",
+      "value": [113.665412, 34.757975, 888]
+    },
+    {
+      "name": "青海",
+      "value": [101.778916, 36.623178, 666]
+    },
+    {
+      "name": "宁夏回族自治区",
+      "value": [106.278179, 38.46637, 66]
+    },
+    {
+      "name": "哈尔滨市",
+      "value": [126.642464, 45.756967, 101]
+    }
+  ],
+  "map": [
+    {
+      "name": "北京市",
+      "value": "@integer(0, 1000)"
+    },
+    {
+      "name": "河北省",
+      "value": "@integer(0, 1000)"
+    },
+
+    {
+      "name": "江苏省",
+      "value": "@integer(0, 1000)"
+    },
+    {
+      "name": "福建省",
+      "value": "@integer(0, 1000)"
+    },
+    {
+      "name": "山东省",
+      "value": "@integer(0, 1000)"
+    },
+    {
+      "name": "河南省",
+      "value": "@integer(0, 1000)"
+    },
+    {
+      "name": "湖北省",
+      "value": "@integer(0, 1000)"
+    },
+    {
+      "name": "广西壮族自治区",
+      "value": "@integer(0, 1000)"
+    },
+    {
+      "name": "海南省",
+      "value": "@integer(0, 1000)"
+    },
+    {
+      "name": "青海省",
+      "value": "@integer(0, 1000)"
+    },
+    {
+      "name": "新疆维吾尔自治区",
+      "value": "@integer(0, 1000)"
+    }
+  ],
+  "pieces": [
+    { "gte": 1000, "label": ">1000" },
+    { "gte": 600, "lte": 999, "label": "600-999" },
+    { "gte": 200, "lte": 599, "label": "200-599" },
+    { "gte": 50, "lte": 199, "label": "49-199" },
+    { "gte": 10, "lte": 49, "label": "10-49" },
+    { "lte": 9, "label": "<9" }
+  ]
+}

src/api/mock/test.mock.ts

@@ -1,5 +1,6 @@
 import heatmapJson from './heatMapData.json'
 import scatterJson from './scatter.json'
+import mapJson from './map.json'
 
 export default {
   // 单图表
@@ -198,5 +199,12 @@ export default {
     status: 200,
     msg: '请求成功',
     data: scatterJson
+  },
+  // 中国地图
+  fetchMap: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: mapJson
   }
 }

src/components/I18n/index.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/valid-template-root -->
 <template></template>
 
 <script lang="ts" setup>

src/components/Pages/ChartItemSetting/GlobalSetting.vue

@@ -230,15 +230,15 @@
       </setting-item>
     </setting-item-box>
 
-    <setting-item-box name="视觉映射">
+    <setting-item-box name="控制块">
       <setting-item name="放置方向">
         <n-select v-model:value="visualMap.orient" size="small" :options="axisConfig.visualMap.orient"></n-select>
       </setting-item>
       <setting-item name="宽度">
-        <n-input-number v-model:value="visualMap.temWidth" size="small"></n-input-number>
+        <n-input-number v-model:value="visualMap.itemWidth" :min="5" size="small"></n-input-number>
       </setting-item>
       <setting-item name="高度">
-        <n-input-number v-model:value="visualMap.itemHeight" size="small"></n-input-number>
+        <n-input-number v-model:value="visualMap.itemHeight" :min="5" size="small"></n-input-number>
       </setting-item>
       <setting-item name="反转">
         <n-space>
@@ -252,14 +252,6 @@
       </setting-item>
     </setting-item-box>
     <global-setting-position :targetData="visualMap"></global-setting-position>
-    <!-- <setting-item-box name="位置">
-      <setting-item name="距离底部">
-        <n-input-number v-model:value="visualMap.bottom" size="small"></n-input-number>
-      </setting-item>
-      <setting-item name="距离左侧">
-        <n-input-number v-model:value="visualMap.left" size="small"></n-input-number>
-      </setting-item>
-    </setting-item-box> -->
   </collapse-item>
 </template>
 

src/components/Plugins/DialogContent/index.vue

@@ -1,6 +1,7 @@
+<!-- eslint-disable vue/valid-template-root -->
 <template></template>
 <script lang="ts" setup>
-import { useDialog } from 'naive-ui';
+import { useDialog } from 'naive-ui'
 //挂载在 window 方便与在js中使用
-window['$dialog'] = useDialog();
+window['$dialog'] = useDialog()
 </script>

src/components/Plugins/LoadingContent/index.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/valid-template-root -->
 <template></template>
 
 <script lang="ts" setup>

src/components/Plugins/MessageContent/index.vue

@@ -1,7 +1,8 @@
+<!-- eslint-disable vue/valid-template-root -->
 <template></template>
 
 <script lang="ts" setup>
-import { useMessage } from 'naive-ui';
+import { useMessage } from 'naive-ui'
 //挂载在 window 方便与在js中使用
-window['$message'] = useMessage();
+window['$message'] = useMessage()
 </script>

src/hooks/useChartDataFetch.hook.ts

@@ -25,7 +25,7 @@ export const useChartDataFetch = (
 
   const requestIntervalFn = () => {
     const chartEditStore = useChartEditStore()
-    
+
     // 全局数据
     const {
       requestOriginUrl,
@@ -88,6 +88,7 @@ export const useChartDataFetch = (
         // 开启轮询
         if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
       }
+      // eslint-disable-next-line no-empty
     } catch (error) {}
   }
 

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

@@ -0,0 +1,152 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { MapBaseConfig } 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,
+  mapRegion: {
+    adcode: 'china',
+    showHainanIsLands: true
+  },
+  tooltip: {
+    show: true,
+    trigger: 'item'
+  },
+  visualMap: {
+    show: true,
+    orient: 'vertical',
+    pieces: [
+      { gte: 1000, label: '>1000' }, // 不指定 max，表示 max 为无限大（Infinity）。
+      { gte: 600, lte: 999, label: '600-999' },
+      { gte: 200, lte: 599, label: '200-599' },
+      { gte: 50, lte: 199, label: '49-199' },
+      { gte: 10, lte: 49, label: '10-49' },
+      { lte: 9, label: '<9' } // 不指定 min，表示 min 为无限大（-Infinity）。
+    ],
+    inRange: {
+      // 渐变颜色，从小到大
+      color: ['#c3d7df', '#5cb3cc', '#8abcd1', '#66a9c9', '#2f90b9', '#1781b5']
+    },
+    textStyle: {
+      color: '#fff'
+    }
+  },
+  geo: {
+    show: false,
+    type: 'map',
+    roam: false,
+    map: 'china',
+    selectedMode: false, //是否允许选中多个区域
+    zoom: 1
+  },
+  series: [
+    {
+      name: '',
+      type: 'effectScatter',
+      coordinateSystem: 'geo',
+      symbolSize: 4,
+      legendHoverLink: true,
+      showEffectOn: 'render',
+      rippleEffect: {
+        scale: 6,
+        color: '#FFFFFF',
+        brushType: 'fill'
+      },
+      tooltip: {
+        show: true,
+        backgroundColor: 'rgba(0,0,0,.6)',
+        borderColor: 'rgba(147, 235, 248, .8)',
+        textStyle: {
+          color: '#FFF'
+        }
+      },
+      label: {
+        formatter: '{b}',
+        fontSize: 11,
+        offset: [0, 2],
+        position: 'bottom',
+        textBorderColor: '#fff',
+        textShadowColor: '#000',
+        textShadowBlur: 10,
+        textBorderWidth: 0,
+        color: '#FFF',
+        show: true
+      },
+      itemStyle: {
+        color: '#FFFFFF',
+        borderColor: 'rgba(225,255,255,2)',
+        borderWidth: 4,
+        shadowColor: '#E1FFFF',
+        shadowBlur: 10
+      },
+      data: []
+    },
+    {
+      name: '区域',
+      type: 'map',
+      map: 'china',
+      data: [],
+      selectedMode: false,
+      zoom: 1,
+      geoIndex: 1,
+      tooltip: {
+        show: true,
+        backgroundColor: 'rgba(0,0,0,.6)',
+        borderColor: 'rgba(147, 235, 248, .8)',
+        textStyle: {
+          color: '#FFF'
+        }
+      },
+      label: {
+        show: false
+      },
+      emphasis: {
+        disabled: false,
+        label: {
+          color: '#fffFFF'
+        },
+        itemStyle: {
+          areaColor: '#389BB7',
+          shadowColor: '#389BB7',
+          borderWidth: 1
+        }
+      },
+      itemStyle: {
+        borderColor: '#93EBF8',
+        borderWidth: 1,
+        areaColor: {
+          type: 'radial',
+          x: 0.5,
+          y: 0.5,
+          r: 0.8,
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
+            }
+          ],
+          globalCoord: false
+        },
+        shadowColor: '#80D9F842',
+        shadowOffsetX: -2,
+        shadowOffsetY: 2,
+        shadowBlur: 10
+      }
+    }
+  ]
+}
+export const MapDefaultConfig = { ...option }
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = MapBaseConfig.key
+  public attr = { ...chartInitConfig, w: 750, h: 800, zIndex: -1 }
+  public chartConfig = MapBaseConfig
+  public option = echartOptionProfixHandle(option, includes)
+}

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

@@ -0,0 +1,201 @@
+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem name="地图" :expanded="true">
+    <SettingItemBox name="地图区域">
+      <SettingItem name="默认中国">
+        <n-select
+          size="small"
+          v-model:value="mapRegion.adcode"
+          :options="mapRegionOptions"
+          value-field="adcode"
+          label-field="name"
+        />
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="区域颜色" :alone="true">
+      <SettingItem name="0%处颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="seriesList[1].itemStyle.areaColor.colorStops[0].color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="100%处颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="seriesList[1].itemStyle.areaColor.colorStops[1].color"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="阴影">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="seriesList[1].itemStyle.shadowColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="模糊程度">
+        <n-input-number
+          v-model:value="seriesList[1].itemStyle.shadowBlur"
+          :min="0"
+          size="small"
+          placeholder="请输入模糊程度"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="水平偏移">
+        <n-input-number
+          v-model:value="seriesList[1].itemStyle.shadowOffsetX"
+          size="small"
+          placeholder="请输入水平偏移大小"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="垂直偏移">
+        <n-input-number
+          v-model:value="seriesList[1].itemStyle.shadowOffsetY"
+          size="small"
+          placeholder="请输入垂直偏移大小"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="聚焦 （预览可见）">
+      <setting-item name="禁用">
+        <n-space>
+          <n-switch v-model:value="seriesList[1].emphasis.disabled" size="small"></n-switch>
+        </n-space>
+      </setting-item>
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="seriesList[1].emphasis.itemStyle.areaColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="阴影">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="seriesList[1].emphasis.itemStyle.shadowColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="边框大小">
+        <n-input-number
+          v-model:value="seriesList[1].emphasis.itemStyle.borderWidth"
+          :min="1"
+          size="small"
+          placeholder="请输入边框大小"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="文字颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="seriesList[1].emphasis.label.color"
+        ></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="其他" v-if="mapRegion.adcode === 'china'">
+      <SettingItem>
+        <n-checkbox v-model:checked="mapRegion.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>
+
+    <SettingItemBox name="涟漪">
+      <SettingItem name="涟漪大小">
+        <n-input-number
+          v-model:value="seriesList[0].rippleEffect.scale"
+          :min="1"
+          size="small"
+          placeholder="请输入涟漪大小"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="涟漪颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].rippleEffect.color"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="涟漪的绘制方式">
+        <n-select size="small" v-model:value="seriesList[0].rippleEffect.brushType" :options="rippleEffectOptions" />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
+import { ref } from 'vue'
+import mapChinaJson from './mapGeojson/china.json'
+
+const mapRegionOptions = ref([
+  {
+    adcode: 'china',
+    name: '中国'
+  }
+])
+
+const rippleEffectOptions = ref([
+  {
+    value: 'fill',
+    label: '实心'
+  },
+  {
+    value: 'stroke',
+    label: '空心'
+  }
+])
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const initMapRegionOptions = () => {
+  mapChinaJson.features.forEach((element: any) => {
+    if (element.properties.name) {
+      mapRegionOptions.value.push({ ...element.properties })
+    }
+  })
+}
+initMapRegionOptions()
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+
+const mapRegion = computed(() => {
+  return props.optionData.mapRegion
+})
+</script>

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

@@ -0,0 +1,79 @@
+{
+  "point": [
+    {
+      "name": "北京",
+      "value": [116.405285, 39.904989, 200]
+    },
+    {
+      "name": "郑州",
+      "value": [113.665412, 34.757975, 888]
+    },
+    {
+      "name": "青海",
+      "value": [101.778916, 36.623178, 666]
+    },
+    {
+      "name": "宁夏回族自治区",
+      "value": [106.278179, 38.46637, 66]
+    },
+    {
+      "name": "哈尔滨市",
+      "value": [126.642464, 45.756967, 101]
+    }
+  ],
+  "map": [
+    {
+      "name": "北京市",
+      "value": 666
+    },
+    {
+      "name": "河北省",
+      "value": 98
+    },
+
+    {
+      "name": "江苏省",
+      "value": 300
+    },
+    {
+      "name": "福建省",
+      "value": 1199
+    },
+    {
+      "name": "山东省",
+      "value": 86
+    },
+    {
+      "name": "河南省",
+      "value": 850
+    },
+    {
+      "name": "湖北省",
+      "value": 84
+    },
+    {
+      "name": "广西壮族自治区",
+      "value": 81
+    },
+    {
+      "name": "海南省",
+      "value": 900
+    },
+    {
+      "name": "青海省",
+      "value": 800
+    },
+    {
+      "name": "新疆维吾尔自治区",
+      "value": 7
+    }
+  ],
+  "pieces": [
+    { "gte": 1000, "label": ">1000" },
+    { "gte": 600, "lte": 999, "label": "600-999" },
+    { "gte": 200, "lte": 599, "label": "200-599" },
+    { "gte": 50, "lte": 199, "label": "49-199" },
+    { "gte": 10, "lte": 49, "label": "10-49" },
+    { "lte": 9, "label": "<9" }
+  ]
+}

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

@@ -0,0 +1,15 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import image from '@/assets/images/chart/charts/map.png'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const MapBaseConfig: ConfigType = {
+    key: 'MapBase',
+    chartKey: 'VMapBase',
+    conKey: 'VCMapBase',
+    title: '地图(可选省份)',
+    category: ChatCategoryEnum.MAP,
+    categoryName: ChatCategoryEnumName.MAP,
+    package: PackagesCategoryEnum.CHARTS,
+    chartFrame: ChartFrameEnum.COMMON,
+    image
+  }

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

@@ -0,0 +1,145 @@
+<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, ref, nextTick } 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 mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
+import {
+  DatasetComponent,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  GeoComponent,
+  VisualMapComponent
+} 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,
+  VisualMapComponent
+])
+
+const option = reactive({
+  value: mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+const vChartRef = ref<typeof VChart>()
+
+//动态获取json注册地图
+const getGeojson = (regionId: string) => {
+  return new Promise<boolean>((resolve) => {
+    import(`./mapGeojson/${regionId}.json`).then(data => {
+      registerMap(regionId, { geoJSON: data.default as any, specialAreas: {} })
+      resolve(true)
+    })
+  })
+}
+
+//异步时先注册空的 保证初始化不报错
+registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
+
+// 进行更换初始化地图
+const registerMapInitAsync = async () => {
+  await nextTick()
+  await getGeojson(props.chartConfig.option.mapRegion.adcode)
+  vEchartsSetOption()
+}
+registerMapInitAsync()
+
+// 手动触发渲染
+const vEchartsSetOption = () => {
+  option.value = props.chartConfig.option
+  vChartRef.value?.setOption(props.chartConfig.option)
+}
+
+// 更新数据处理
+ const dataSetHandle = async (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.map) item.data = dataset.map
+  })
+  if (dataset.pieces) props.chartConfig.option.visualMap.pieces = dataset.pieces
+
+  isPreview() && vEchartsSetOption()
+}
+
+//监听 dataset 数据发生变化
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    dataSetHandle(newData)
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+//监听是否显示南海群岛
+watch(
+  () => props.chartConfig.option.mapRegion.showHainanIsLands,
+  async newData => {
+    if (newData) {
+      await getGeojson('china')
+    } else {
+      registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
+    }
+    vEchartsSetOption()
+  },
+  {
+    deep: false
+  }
+)
+
+//监听地图展示区域发生变化
+watch(
+  () => props.chartConfig.option.mapRegion.adcode,
+  async newData => {
+    await getGeojson(newData)
+    props.chartConfig.option.geo.map = newData
+    props.chartConfig.option.series.forEach((item: any) => {
+      if (item.type === 'map') item.map = newData
+    })
+    vEchartsSetOption()
+  },
+  {
+    deep: false
+  }
+)
+
+// 预览
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  dataSetHandle(newData)
+})
+</script>

src/packages/components/Charts/Maps/MapBase/mapGeojson/710000.json

@@ -0,0 +1 @@
+{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"adcode":710000,"name":"台湾省","center":[121.509062,25.044332],"centroid":[120.971485,23.749452],"childrenNum":0,"level":"province","acroutes":[100000],"parent":{"adcode":100000}},"geometry":{"type":"MultiPolygon","coordinates":[[[[120.443558,22.441245],[120.517584,22.408536],[120.569903,22.361728],[120.640505,22.241347],[120.659209,22.15432],[120.662001,22.066983],[120.651464,22.033165],[120.667691,21.983168],[120.70157,21.927065],[120.743246,21.915569],[120.78155,21.923957],[120.85468,21.883333],[120.87291,21.897387],[120.866482,21.98436],[120.907315,22.033208],[120.904154,22.119757],[120.914955,22.302718],[120.981658,22.528305],[121.015009,22.584168],[121.033292,22.650725],[121.078498,22.669656],[121.170544,22.723133],[121.210481,22.770665],[121.237931,22.836327],[121.324708,22.945666],[121.354687,23.01006],[121.370388,23.084347],[121.409535,23.102669],[121.430294,23.137196],[121.415015,23.195973],[121.440358,23.272096],[121.479558,23.3223],[121.497788,23.419789],[121.521497,23.483198],[121.523078,23.538708],[121.587778,23.76102],[121.621604,23.92075],[121.659381,24.006893],[121.639992,24.064276],[121.643838,24.097713],[121.678085,24.133906],[121.689044,24.174401],[121.809172,24.339055],[121.826717,24.423579],[121.867498,24.478978],[121.885464,24.529677],[121.892524,24.617912],[121.862598,24.671515],[121.837993,24.76015],[121.845053,24.836269],[121.932883,24.938645],[122.012178,25.001469],[121.980776,25.03079],[121.947425,25.031955],[121.917077,25.137908],[121.842155,25.135332],[121.782407,25.160425],[121.750531,25.160716],[121.707327,25.191493],[121.700319,25.226913],[121.655324,25.241859],[121.623026,25.294694],[121.584986,25.308926],[121.535038,25.307515],[121.444415,25.270624],[121.413487,25.238912],[121.371864,25.159885],[121.319281,25.140691],[121.209322,25.127104],[121.133135,25.078728],[121.102102,25.075153],[121.024704,25.040479],[121.009688,24.993649],[120.960899,24.940227],[120.908475,24.852012],[120.892299,24.767526],[120.823753,24.688321],[120.762371,24.658335],[120.688661,24.600678],[120.64277,24.490172],[120.589187,24.432354],[120.546299,24.370413],[120.521009,24.312038],[120.470534,24.24259],[120.451461,24.182691],[120.392029,24.11824],[120.316158,23.984881],[120.278276,23.927798],[120.245768,23.840553],[120.175377,23.807385],[120.102773,23.700981],[120.094817,23.587466],[120.121741,23.504664],[120.107831,23.341264],[120.081434,23.29191],[120.018947,23.073115],[120.029537,23.048623],[120.131382,23.002118],[120.149138,22.896715],[120.200403,22.721101],[120.274272,22.560181],[120.297191,22.531315],[120.443558,22.441245]]],[[[124.542984,25.903911],[124.586346,25.913777],[124.572805,25.93974],[124.541825,25.931031],[124.542984,25.903911]]],[[[123.445286,25.725966],[123.472104,25.713024],[123.508933,25.723237],[123.514834,25.751226],[123.483063,25.768587],[123.444496,25.746514],[123.445286,25.725966]]],[[[119.64597,23.55091],[119.701081,23.550657],[119.678057,23.600041],[119.610089,23.603953],[119.594388,23.577245],[119.566306,23.584732],[119.562565,23.530377],[119.573788,23.505885],[119.609141,23.503864],[119.64597,23.55091]]],[[[123.667207,25.914066],[123.707092,25.916873],[123.678008,25.938667],[123.667207,25.914066]]],[[[119.506031,23.625567],[119.505241,23.575814],[119.472416,23.557136],[119.523207,23.563699],[119.525578,23.624895],[119.506031,23.625567]]],[[[119.49739,23.386683],[119.495125,23.350156],[119.516885,23.349903],[119.49739,23.386683]]],[[[119.557454,23.666474],[119.604083,23.616989],[119.615516,23.660925],[119.586485,23.675974],[119.557454,23.666474]]],[[[121.46823,22.676644],[121.476502,22.64166],[121.513541,22.631833],[121.5147,22.67639],[121.46823,22.676644]]],[[[121.510538,22.087185],[121.507693,22.048523],[121.534089,22.022146],[121.594522,21.995382],[121.604586,22.022699],[121.575028,22.037122],[121.575607,22.084421],[121.510538,22.087185]]],[[[122.097533,25.500168],[122.093581,25.47183],[122.124825,25.475932],[122.097533,25.500168]]],[[[119.421467,23.216684],[119.421309,23.18935],[119.453396,23.217697],[119.421467,23.216684]]],[[[120.355042,22.327259],[120.395454,22.342287],[120.383072,22.355573],[120.355042,22.327259]]]]}}]}

src/packages/components/Charts/Maps/MapBase/mapGeojson/empty.json

@@ -0,0 +1,4 @@
+{
+    "type":"FeatureCollection",
+    "features":[]
+}

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

@@ -1,68 +0,0 @@
-import { echartOptionProfixHandle, PublicConfigClass } 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,
-        showHainanIsLands: true // 是否显示南海群岛
-      },
-      label: {
-        show: true,
-        color: '#ffffff'
-      },
-      data: []
-    }
-  ]
-}
-export default class Config extends PublicConfigClass 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

@@ -1,80 +0,0 @@
-<template>
-  <!-- Echarts 全局设置 -->
-  <global-setting :optionData="optionData"></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>
-</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

@@ -1,146 +0,0 @@
-{
-  "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,15 +0,0 @@
-import image from '@/assets/images/chart/charts/map.png'
-import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
-
-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

@@ -1,94 +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, 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: {} })
-
-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 = (show: boolean) => {
-  show
-    ? registerMap('china', { geoJSON: mapJson as any, specialAreas: {} })
-    : registerMap('china', { geoJSON: mapJsonWithoutHainanIsLands as any, specialAreas: {} })
-  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,
-    deep: false
-  }
-)
-
-// 预览
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
-  dataSetHandle(newData)
-})
-</script>

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

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

src/packages/components/Informations/Mores/Video/config.ts

@@ -0,0 +1,24 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { VideoConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import video from '@/assets/videos/earth.mp4'
+
+export const option = {
+  // 视频路径
+  dataset: video,
+  // 循环播放
+  loop: true,
+  // 静音
+  muted: true,
+  // 适应方式
+  fit: 'contain',
+  // 圆角
+  borderRadius: 10
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = VideoConfig.key
+  public chartConfig = cloneDeep(VideoConfig)
+  public option = cloneDeep(option)
+}

src/packages/components/Informations/Mores/Video/config.vue

@@ -0,0 +1,71 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <collapse-item name="视频" expanded>
+    <setting-item-box name="源" alone>
+      <setting-item name="自定义源">
+        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="控制">
+      <setting-item>
+        <n-checkbox v-model:checked="optionData.loop" size="small">循环播放</n-checkbox>
+      </setting-item>
+      <setting-item>
+        <n-checkbox v-model:checked="optionData.muted" size="small">静音</n-checkbox>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="样式">
+      <setting-item name="类型">
+        <n-select v-model:value="optionData.fit" size="small" :options="fitList"></n-select>
+      </setting-item>
+      <setting-item name="圆角">
+        <n-input-number
+          v-model:value="optionData.borderRadius"
+          size="small"
+          :min="0"
+          placeholder="圆角"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+// 适应类型
+const fitList = [
+  {
+    value: 'fill',
+    label: 'fill'
+  },
+  {
+    value: 'contain',
+    label: 'contain'
+  },
+  {
+    value: 'cover',
+    label: 'cover'
+  },
+  {
+    value: 'scale-down',
+    label: 'scale-down'
+  },
+  {
+    value: 'none',
+    label: 'none'
+  }
+]
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Informations/Mores/Video/index.ts

@@ -0,0 +1,15 @@
+import image from '@/assets/images/chart/informations/video.png'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const VideoConfig: ConfigType = {
+  key: 'Video',
+  chartKey: 'VVideo',
+  conKey: 'VCVideo',
+  title: '视频',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image
+}

src/packages/components/Informations/Mores/Video/index.vue

@@ -0,0 +1,67 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <!-- 重要：需要设置 crossOrigin="anonymous"，否则保存画板缩略图会失败 -->
+  <video
+    ref="vVideoRef"
+    class="go-video"
+    preload="auto"
+    crossOrigin="anonymous"
+    playsinline
+    autoplay
+    :loop="option.loop"
+    :muted="option.muted"
+    :width="w"
+    :height="h"
+    :src="option.dataset"
+  ></video>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch, ref } from 'vue'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+let option = shallowReactive({ ...configOption })
+
+// 预览更新
+const vVideoRef = ref(null)
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option = newData
+})
+
+// 编辑更新
+watch(
+  () => props.chartConfig.option,
+  (newData: any) => {
+    option = newData
+    if (!vVideoRef.value) return
+    const video: any = vVideoRef.value
+    video.loop = option.loop
+    video.muted = option.muted
+    video.play()
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@include go('video') {
+  display: block;
+  mix-blend-mode: screen;
+  object-fit: v-bind('option.fit');
+  border-radius: v-bind('option.borderRadius');
+}
+</style>

src/packages/components/Informations/Mores/index.ts

@@ -1,4 +1,5 @@
 import { TextCloudConfig } from './TextCloud/index'
 import { ImageConfig } from './Image/index'
+import { VideoConfig } from './Video/index'
 
-export default [ImageConfig, TextCloudConfig]
+export default [ImageConfig, VideoConfig, TextCloudConfig]

src/packages/components/Informations/Texts/TextCommon/config.ts

@@ -14,6 +14,8 @@ export const WritingModeObject = {
 }
 
 export const option = {
+  link:'',
+  linkHead:'http://',
   dataset: '我是文本',
   fontSize: 20,
   fontColor: '#ffffff',

src/packages/components/Informations/Texts/TextCommon/config.vue

@@ -5,6 +5,20 @@
         <n-input v-model:value="optionData.dataset" size="small"></n-input>
       </setting-item>
     </setting-item-box>
+    <setting-item-box name="链接" :alone="true">
+      <setting-item>
+        <n-input-group>
+          <n-select
+            v-model:value="optionData.linkHead"
+            size="small"
+            :style="{ width: '80%' }"
+            :options="linkHeadOptions"
+          />
+          <n-input v-model:value="optionData.link" size="small"></n-input>
+          <n-button :disabled="!optionData.link" secondary size="small" @click="handleLinkClick">跳转</n-button>
+        </n-input-group>
+      </setting-item>
+    </setting-item-box>
   </collapse-item>
 
   <collapse-item name="样式" :expanded="true">
@@ -16,7 +30,7 @@
       <setting-item name="文本方向">
         <n-select v-model:value="optionData.writingMode" size="small" :options="verticalOptions" />
       </setting-item>
-      
+
       <setting-item name="X轴内边距">
         <n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number>
       </setting-item>
@@ -52,7 +66,7 @@
         ></n-input-number>
       </setting-item>
     </setting-item-box>
-    
+
     <setting-item-box name="背景" :alone="true">
       <setting-item name="背景颜色">
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backgroundColor"></n-color-picker>
@@ -64,12 +78,7 @@
 <script setup lang="ts">
 import { PropType } from 'vue'
 import { option, WritingModeEnum, WritingModeObject } from './config'
-import {
-  CollapseItem,
-  SettingItemBox,
-  SettingItem
-} from '@/components/Pages/ChartItemSetting'
-
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 const props = defineProps({
   optionData: {
     type: Object as PropType<typeof option>,
@@ -77,11 +86,27 @@ const props = defineProps({
   }
 })
 
-const verticalOptions = [{
-  label: WritingModeEnum.HORIZONTAL,
-  value: WritingModeObject[WritingModeEnum.HORIZONTAL]
-}, {
-  label: WritingModeEnum.VERTICAL,
-  value: WritingModeObject[WritingModeEnum.VERTICAL]
-}]
+const verticalOptions = [
+  {
+    label: WritingModeEnum.HORIZONTAL,
+    value: WritingModeObject[WritingModeEnum.HORIZONTAL]
+  },
+  {
+    label: WritingModeEnum.VERTICAL,
+    value: WritingModeObject[WritingModeEnum.VERTICAL]
+  }
+]
+const handleLinkClick = () => {
+  window.open(props.optionData.linkHead + props.optionData.link)
+}
+const linkHeadOptions = [
+  {
+    label: 'http://',
+    value: 'http://'
+  },
+  {
+    label: 'https://',
+    value: 'https://'
+  }
+]
 </script>

src/packages/components/Informations/Texts/TextCommon/index.vue

@@ -15,7 +15,10 @@
 
       background-color:${backgroundColor}`"
     >
-      {{ option.dataset }}
+      <n-button v-if="link" @click="click" text>
+        {{ dataset }}
+      </n-button>
+      <span v-else>{{ dataset }}</span>
     </div>
   </div>
 </template>
@@ -35,6 +38,8 @@ const props = defineProps({
 
 const { w, h } = toRefs(props.chartConfig.attr)
 const {
+  linkHead,
+  link,
   dataset,
   fontColor,
   fontSize,
@@ -68,6 +73,11 @@ watch(
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
   option.dataset = newData
 })
+
+//打开链接
+const click = () => {
+  window.open(linkHead.value+link.value)
+}
 </script>
 
 <style lang="scss" scoped>

src/router/types.ts

@@ -1,38 +1,40 @@
-import type { RouteRecordRaw, RouteMeta } from 'vue-router';
-import { defineComponent } from 'vue';
+import type { RouteRecordRaw, RouteMeta } from 'vue-router'
+import { defineComponent } from 'vue'
+
+declare type Recordable<T = any> = Record<string, T>
 
 export type Component<T extends any = any> =
   | ReturnType<typeof defineComponent>
   | (() => Promise<typeof import('*.vue')>)
-  | (() => Promise<T>);
-  
+  | (() => Promise<T>)
+
 // @ts-ignore
 export interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
-  name: string;
-  meta: RouteMeta;
-  component?: Component | string;
-  components?: Component;
-  children?: AppRouteRecordRaw[];
-  props?: Recordable;
-  fullPath?: string;
+  name: string
+  meta: RouteMeta
+  component?: Component | string
+  components?: Component
+  children?: AppRouteRecordRaw[]
+  props?: Recordable
+  fullPath?: string
 }
 
 export interface Meta {
   // 名称
-  title: string;
+  title: string
   // 是否忽略权限
-  ignoreAuth?: boolean;
-  permissions?: string[];
+  ignoreAuth?: boolean
+  permissions?: string[]
   // 是否不缓存
-  noKeepAlive?: boolean;
+  noKeepAlive?: boolean
   // 是否固定在tab上
-  affix?: boolean;
+  affix?: boolean
   // tab上的图标
-  icon?: string;
+  icon?: string
   // 跳转地址
-  frameSrc?: string;
+  frameSrc?: string
   // 外链跳转地址
-  externalLink?: string;
+  externalLink?: string
   //隐藏
-  hidden?: boolean;
-}
+  hidden?: boolean
+}

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

@@ -95,6 +95,7 @@ export interface EditCanvasConfigType {
 }
 
 // 坐标轴信息
+// eslint-disable-next-line no-redeclare
 export enum EditCanvasTypeEnum {
   START_X = 'startX',
   START_Y = 'startY',

src/store/modules/chartEditStore/chartEditStore.ts

@@ -602,7 +602,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/utils/storage.ts

@@ -1,11 +1,10 @@
-
 /**
  * * 存储本地会话数据
  * @param k 键名
  * @param v 键值（无需stringiiy）
  * @returns RemovableRef
  */
- export const setLocalStorage = <T>(k: string, v: T) => {
+export const setLocalStorage = <T>(k: string, v: T) => {
   try {
     window.localStorage.setItem(k, JSON.stringify(v))
   } catch (error) {
@@ -18,7 +17,7 @@
  * @param k 键名
  * @returns any
  */
- export const getLocalStorage = (k: string) => {
+export const getLocalStorage = (k: string) => {
   const item = window.localStorage.getItem(k)
   try {
     return item ? JSON.parse(item) : item
@@ -29,9 +28,9 @@
 
 /**
  * * 清除本地会话数据
- * @param name 
+ * @param name
  */
- export const clearLocalStorage = (name: string) => {
+export const clearLocalStorage = (name: string) => {
   window.localStorage.removeItem(name)
 }
 
@@ -64,8 +63,8 @@ export const getSessionStorage: (k: string) => any = (k: string) => {
 
 /**
  * * 清除本地会话数据
- * @param name 
+ * @param name
  */
 export const clearSessioStorage = (name: string) => {
   window.sessionStorage.removeItem(name)
-}
+}

src/utils/utils.ts

@@ -135,11 +135,13 @@ export const fileTobase64 = (file: File, callback: Function) => {
 /**
  * * 挂载监听
  */
+// eslint-disable-next-line no-undef
 export const addEventListener = <K extends keyof WindowEventMap>(
   target: HTMLElement | Document,
   type: K,
   listener: any,
   delay?: number,
+  // eslint-disable-next-line no-undef
   options?: boolean | AddEventListenerOptions | undefined
 ) => {
   if (!target) return
@@ -156,6 +158,7 @@ export const addEventListener = <K extends keyof WindowEventMap>(
 /**
  * * 卸载监听
  */
+// eslint-disable-next-line no-undef
 export const removeEventListener = <K extends keyof WindowEventMap>(
   target: HTMLElement | Document,
   type: K,
@@ -245,12 +248,12 @@ export const intervalUnitHandle = (num: number, unit: RequestHttpIntervalEnum) =
 
 /**
  * * 对象转换 cookie 格式
- * @param obj 
+ * @param obj
  * @returns string
  */
 export const objToCookie = (obj: RequestParamsObjType) => {
-  if(!obj) return ''
-  
+  if (!obj) return ''
+
   let str = ''
   for (const key in obj) {
     str += key + '=' + obj[key] + ';'

src/views/chart/ContentCharts/components/ChartsOptionContent/index.vue

@@ -9,7 +9,7 @@
       :icon-size="16"
       :indent="18"
       @update:value="clickItemHandle"
-   ></n-menu>
+    ></n-menu>
     <div class="chart-content-list">
       <n-scrollbar>
         <charts-item-box :menuOptions="packages.selectOptions"></charts-item-box>
@@ -24,14 +24,12 @@ import { ConfigType } from '@/packages/index.d'
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
 import { loadAsyncComponent } from '@/utils'
 
-const ChartsItemBox = loadAsyncComponent(() =>
-  import('../ChartsItemBox/index.vue')
-)
+const ChartsItemBox = loadAsyncComponent(() => import('../ChartsItemBox/index.vue'))
 
 const props = defineProps({
   selectOptions: {
     type: Object,
-    default: () => []
+    default: () => {}
   }
 })
 

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

@@ -138,9 +138,11 @@ const filterRes = computed(() => {
   try {
     const fn = new Function('data', filter.value)
     const res = fn(cloneDeep(sourceData.value))
+    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
     errorFlag.value = false
     return toString(res)
   } catch (error) {
+    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
     errorFlag.value = true
     return '过滤函数错误'
   }

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

@@ -73,8 +73,8 @@ import {
   imageUrl,
   radarUrl,
   heatMapUrl,
-  scatterBasicUrl
-  
+  scatterBasicUrl,
+  mapUrl
 } from '@/api/mock'
 
 const { HelpOutlineIcon } = icon.ionicons5
@@ -116,6 +116,9 @@ const apiList = [
   {
     value: `【基础散点图】${scatterBasicUrl}`
   },
+  {
+    value: `【地图数据】${mapUrl}`
+  },
 ]
 </script>
 

src/views/chart/ContentConfigurations/index.vue

@@ -102,6 +102,7 @@ const selectTarget = computed(() => {
   if (selectId.length !== 1) return undefined
   const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
   if (target?.isGroup) {
+    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
     tabsSelect.value = TabsEnum.CHART_SETTING
   }
   return target

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

@@ -69,6 +69,10 @@ const select = computed(() => {
 @include go(shape-box) {
   position: absolute;
   cursor: move;
+
+  // 混合模式
+  mix-blend-mode: screen;
+
   /* 锚点 */
   .shape-point {
     z-index: 1;

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

@@ -24,7 +24,7 @@
       v-model:value.trim="title"
       @keyup.enter="handleBlur"
       @blur="handleBlur"
-   ></n-input>
+    ></n-input>
   </n-space>
 </template>
 
@@ -50,16 +50,16 @@ const fetchProhectInfoById = () => {
 
 const title = ref<string>(fetchProhectInfoById() || '')
 
-
 const comTitle = computed(() => {
-  title.value = title.value.replace(/\s/g, "");
+  // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+  title.value = title.value.replace(/\s/g, '')
   return title.value.length ? title.value : '新项目'
 })
 
 const handleFocus = () => {
   focus.value = true
   nextTick(() => {
-    ; (<any>inputInstRef).value.focus()
+    inputInstRef.value && (inputInstRef.value as any).focus()
   })
 }
 
@@ -71,4 +71,4 @@ const handleBlur = () => {
 .title {
   font-size: 15px;
 }
-</style>
+</style>

src/views/chart/ContentLayers/components/LayersListItem/index.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="go-content-layers-list-item"
-    :class="{ hover: hover, select: select }"
-  >
+  <div class="go-content-layers-list-item" :class="{ hover: hover, select: select }">
     <div class="go-flex-center item-content">
       <n-image
         class="list-img"
@@ -10,7 +7,7 @@
         preview-disabled
         :src="image"
         :fallback-src="requireErrorImg()"
-     ></n-image>
+      ></n-image>
       <n-ellipsis>
         <n-text class="list-text" :depth="2">
           {{ props.componentData.chartConfig.title }}
@@ -43,6 +40,7 @@ const props = defineProps({
   }
 })
 
+// eslint-disable-next-line vue/no-setup-props-destructure
 const { image } = props.componentData.chartConfig
 
 // 计算当前选中目标
@@ -80,7 +78,7 @@ $textSize: 10px;
     /* 需要设置最高级，覆盖 hover 的颜色 */
     background-color: rgba(0, 0, 0, 0);
     .list-img {
-      border:1px solid v-bind('themeColor')!important;
+      border: 1px solid v-bind('themeColor') !important;
     }
   }
   .select-modal,

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 {

src/views/preview/components/PreviewRenderGroup/index.vue

@@ -4,7 +4,7 @@
     v-for="item in groupData.groupList"
     :class="animationsClass(item.styles.animations)"
     :key="item.id"
-    :style="{ 
+    :style="{
       ...getComponentAttrStyle(item.attr, groupIndex),
       ...getFilterStyle(item.styles),
       ...getTransformStyle(item.styles)
@@ -15,7 +15,7 @@
       :chartConfig="item"
       :themeSetting="themeSetting"
       :themeColor="themeColor"
-      :style="{...getSizeStyle(item.attr)}"
+      :style="{ ...getSizeStyle(item.attr) }"
     ></component>
   </div>
 </template>
@@ -49,5 +49,6 @@ const props = defineProps({
 <style lang="scss" scoped>
 .chart-item {
   position: absolute;
+  mix-blend-mode: screen;
 }
 </style>

src/views/preview/components/PreviewRenderList/index.vue

@@ -63,5 +63,6 @@ const themeColor = computed(() => {
 <style lang="scss" scoped>
 .chart-item {
   position: absolute;
+  mix-blend-mode: screen;
 }
 </style>

tsconfig.json

@@ -10,37 +10,16 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "lib": [
-      "es6",
-      "ESNext",
-      "dom"
-    ],
-    "types": [
-      "vite/client"
-    ],
+    "lib": ["es6", "ESNext", "dom"],
+    "types": ["vite/client"],
     "paths": {
-      "@/*": [
-        "src/*"
-      ],
-      "/#/*": [
-        "types/*"
-      ]
+      "@/*": ["src/*"],
+      "/#/*": ["types/*"]
     },
     "noImplicitAny": true, //不允许使用any
     // "strictNullChecks": true, //不允许使用null
     "noImplicitThis": true //不允许往this上面挂属性
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.d.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "types/**/*.d.ts",
-    "types/**/*.ts",
-  ],
-  "exclude": [
-    "node_modules",
-    "dist",
-    "**/*.js"
-  ]
-}
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "types/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.js"]
+}