pref:移除了之前添加的所有动画组件

+import { defHttp } from '@/utils/external/http/axios';
+import {
+    ContentParams,
+  LoginResultModel,
+} from './model/userModel';
+
+import type { ErrorMessageMode } from '/#/external/axios';
+
+enum Api {
+  CONTENT = '/data_view/content',
+}
+
+/**
+ * @description: content save api
+ */
+export function contentSaveApi(params: ContentParams, mode: ErrorMessageMode = 'modal') {
+  return defHttp.post<LoginResultModel>(
+    {
+      url: Api.CONTENT,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    }
+  );
+}

+/**
+ * @description: Login interface parameters
+ */
+export interface ContentParams{
+  "content": string,
+  "createTime": string,
+  "creator": string,
+  "defaultConfig": string,
+  "description": string,
+  "enabled": boolean,
+  "icon": string,
+  "id": string,
+  "name": string,
+  "nodeIds": [
+    string
+  ],
+  "remark": string,
+  "roleIds": [
+    string
+  ],
+  "tenantExpireTime": string,
+  "tenantId": string,
+  "tenantProfileId": string,
+  "tenantStatus": string,
+  "updateTime":string,
+  "updater":string,
+  "viewId":string
+}
+export interface RoleInfo {
+  roleName: string;
+  value: string;
+}
+
+/**
+ * @description: Login interface return value
+ */
+export interface LoginResultModel {{
+  "content": string,
+      "createTime": string,
+      "creator": string,
+      "defaultConfig": string,
+      "description": string,
+      "enabled": boolean,
+      "icon": string,
+      "id": string,
+      "name": string,
+      "nodeIds": [
+    string
+  ],
+      "remark": string,
+      "roleIds": [
+    string
+  ],
+      "tenantExpireTime": string,
+      "tenantId": string,
+      "tenantProfileId": string,
+      "tenantStatus": string,
+      "updateTime":string,
+      "updater":string,
+      "viewId":string
+}
+

-import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
-import { WordCloudConfig } from './index'
-import { CreateComponentType } from '@/packages/index.d'
-import cloneDeep from 'lodash/cloneDeep'
-import dataJson from './data.json'
-
-export const includes = []
-
-export const ShapeEnumList = [
-  { label: '圆形', value: 'circle' },
-  { label: '心形', value: 'cardioid' },
-  { label: '钻石', value: 'diamond' },
-  { label: '右三角形', value: 'triangle-forward' },
-  { label: '三角形', value: 'triangle' },
-  { label: '五边形', value: 'pentagon' },
-  { label: '星星', value: 'star' }
-]
-
-export const option = {
-  dataset: [...dataJson],
-  tooltip: {},
-  series: [
-    {
-      type: 'wordCloud',
-
-      // “云”绘制的形状，可以是表示为回调函数，也可以是固定关键字。
-      // 可用值有：circle|cardioid|diamond|triangle-forward|triangle|pentagon|star
-      shape: 'circle',
-
-      // 白色区域将被排除在绘制文本之外的剪影图像。
-      // 随着云的形状生长，形状选项将继续应用。
-      // maskImage: maskImage,
-
-      // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
-      // Default to be put in the center and has 75% x 80% size.
-      left: 'center',
-      top: 'center',
-      width: '70%',
-      height: '80%',
-      right: null,
-      bottom: null,
-
-      // 文本大小范围，默认 [12,60]
-      sizeRange: [12, 60],
-
-      // 文本旋转范围和程度的步骤。 文本将通过旋转步骤45在[-90，90]中随机旋转
-      rotationRange: [0, 0],
-      rotationStep: 0,
-
-      // size of the grid in pixels for marking the availability of the canvas
-      // 网格大小越大，单词之间的差距就越大。
-      gridSize: 8,
-
-      // 设置为true，以允许单词在画布之外部分地绘制。允许绘制大于画布的大小
-      drawOutOfBound: false,
-
-      // If perform layout animation.
-      // NOTE disable it will lead to UI blocking when there is lots of words.
-      layoutAnimation: true,
-
-      // Global text style
-      textStyle: {
-        fontFamily: 'sans-serif',
-        fontWeight: 'bold'
-        // 颜色可以是回调功能或颜色字符串
-        // color: function () {
-        //   // 随机颜色
-        //   return (
-        //     'rgb(' +
-        //     [Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(
-        //       ','
-        //     ) +
-        //     ')'
-        //   )
-        // }
-      },
-      emphasis: {
-        focus: 'self',
-
-        textStyle: {
-          shadowBlur: 10,
-          shadowColor: '#333'
-        }
-      },
-      data: [...dataJson]
-    }
-  ]
-}
-
-export default class Config extends PublicConfigClass implements CreateComponentType {
-  public key = WordCloudConfig.key
-  public chartConfig = cloneDeep(WordCloudConfig)
-  // 图表配置项
-  public option = echartOptionProfixHandle(option, includes)
-}

-<template>
-  <collapse-item name="词云" expanded>
-    <setting-item-box name="形状">
-      <setting-item>
-        <n-select v-model:value="optionData.series[0].shape" size="small" :options="ShapeEnumList" />
-      </setting-item>
-      <setting-item>
-        <n-checkbox v-model:checked="optionData.series[0].drawOutOfBound" size="small">允许出边</n-checkbox>
-      </setting-item>
-    </setting-item-box>
-
-    <setting-item-box name="布局">
-      <setting-item name="宽度">
-        <n-slider
-          v-model:value="series.width"
-          :min="0"
-          :max="100"
-          :format-tooltip="sliderFormatTooltip"
-          @update:value="updateWidth"
-        ></n-slider>
-      </setting-item>
-      <setting-item name="高度">
-        <n-slider
-          v-model:value="series.height"
-          :min="0"
-          :max="100"
-          :format-tooltip="sliderFormatTooltip"
-          @update:value="updateHeight"
-        ></n-slider>
-      </setting-item>
-    </setting-item-box>
-
-    <setting-item-box name="样式" alone>
-      <setting-item name="字体区间(最小/最大字体)">
-        <n-slider v-model:value="optionData.series[0].sizeRange" range :step="1" :min="6" :max="100" />
-      </setting-item>
-      <setting-item name="旋转角度">
-        <n-slider v-model:value="series.rotationStep" :step="15" :min="0" :max="45" @update:value="updateRotation" />
-      </setting-item>
-    </setting-item-box>
-  </collapse-item>
-</template>
-
-<script setup lang="ts">
-import { PropType, computed } from 'vue'
-import { option, ShapeEnumList } from './config'
-// eslint-disable-next-line no-unused-vars
-import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<typeof option>,
-    required: true
-  }
-})
-
-const series = computed(() => {
-  const { width, height, rotationStep } = props.optionData.series[0]
-  return {
-    width: +width.replace('%', ''),
-    height: +height.replace('%', ''),
-    rotationStep
-  }
-})
-
-const sliderFormatTooltip = (v: number) => {
-  return `${v}%`
-}
-
-const updateWidth = (value: number) => {
-  props.optionData.series[0].width = `${value}%`
-}
-
-const updateHeight = (value: number) => {
-  props.optionData.series[0].height = `${value}%`
-}
-
-const updateRotation = (value: number) => {
-  props.optionData.series[0].rotationStep = value
-  props.optionData.series[0].rotationRange = value === 0 ? [0, 0] : [-90, 90]
-}
-</script>

-[
-  {
-    "name": "数据可视化",
-    "value": 8000,
-    "textStyle": {
-      "color": "#78fbb2"
-    },
-    "emphasis": {
-      "textStyle": {
-        "color": "red"
-      }
-    }
-  },
-  {
-    "name": "GO VIEW",
-    "value": 6181
-  },
-  {
-    "name": "低代码",
-    "value": 4386
-  },
-  {
-    "name": "Vue3",
-    "value": 4055
-  },
-  {
-    "name": "TypeScript4",
-    "value": 2467
-  },
-  {
-    "name": "Vite2",
-    "value": 2244
-  },
-  {
-    "name": "NaiveUI",
-    "value": 1898
-  },
-  {
-    "name": "ECharts5",
-    "value": 1484
-  },
-  {
-    "name": "Axios",
-    "value": 1112
-  },
-  {
-    "name": "Pinia2",
-    "value": 965
-  },
-  {
-    "name": "PlopJS",
-    "value": 847
-  },
-  {
-    "name": "sfc",
-    "value": 582
-  },
-  {
-    "name": "SCSS",
-    "value": 555
-  },
-  {
-    "name": "pnpm",
-    "value": 550
-  },
-  {
-    "name": "eslint",
-    "value": 462
-  },
-  {
-    "name": "json",
-    "value": 366
-  },
-  {
-    "name": "图表",
-    "value": 360
-  },
-  {
-    "name": "地图",
-    "value": 282
-  },
-  {
-    "name": "时钟",
-    "value": 273
-  },
-  {
-    "name": "标题",
-    "value": 265
-  }
-]

-import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
-
-export const WordCloudConfig: ConfigType = {
-  key: 'WordCloud',
-  chartKey: 'VWordCloud',
-  conKey: 'VCWordCloud',
-  title: '词云',
-  category: ChatCategoryEnum.MORE,
-  categoryName: ChatCategoryEnumName.MORE,
-  package: PackagesCategoryEnum.INFORMATIONS,
-  chartFrame: ChartFrameEnum.COMMON,
-  image: 'words_cloud.png'
-}

-<template>
-  <v-chart
-    ref="vChartRef"
-    :theme="themeColor"
-    :option="option"
-    :manual-update="isPreview()"
-    :update-options="{ replaceMerge: replaceMergeArr }"
-    autoresize
-  ></v-chart>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, PropType } from 'vue'
-import VChart from 'vue-echarts'
-import 'echarts-wordcloud'
-import { use } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
-import config, { includes } from './config'
-import { mergeTheme, setOption } from '@/packages/public/chart'
-import { useChartDataFetch } from '@/hooks'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { isPreview } from '@/utils'
-import { GridComponent, TooltipComponent } from 'echarts/components'
-import dataJson from './data.json'
-
-const props = defineProps({
-  themeSetting: {
-    type: Object,
-    required: true
-  },
-  themeColor: {
-    type: Object,
-    required: true
-  },
-  chartConfig: {
-    type: Object as PropType<config>,
-    required: true
-  }
-})
-
-use([CanvasRenderer, GridComponent, TooltipComponent])
-
-const replaceMergeArr = ref<string[]>()
-
-const option = computed(() => {
-  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-})
-
-const dataSetHandle = (dataset: typeof dataJson) => {
-  try {
-    dataset && (props.chartConfig.option.series[0].data = dataset)
-    vChartRef.value && isPreview() && setOption(vChartRef.value, props.chartConfig.option)
-  } catch (error) {
-    console.log(error)
-  }
-}
-
-// dataset 无法变更条数的补丁
-watch(
-  () => props.chartConfig.option.dataset,
-  newData => {
-    dataSetHandle(newData)
-  },
-  {
-    deep: false
-  }
-)
-
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
-  dataSetHandle(newData)
-})
-</script>

-import {WordCloudConfig} from './WordCloud/index'
-
-export default [WordCloudConfig]

-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import {
-  ArcCurve,
-  BufferAttribute,
-  BufferGeometry,
-  Color,
-  Line,
-  LineBasicMaterial,
-  Points,
-  PointsMaterial,
-  Quaternion,
-  Vector3
-} from 'three'
-import { lon2xyz } from './common'
-
-/*
- * 绘制一条圆弧飞线
- * 5个参数含义：( 飞线圆弧轨迹半径, 开始角度, 结束角度)
- */
-function createFlyLine(radius, startAngle, endAngle, color) {
-  const geometry = new BufferGeometry() //声明一个几何体对象BufferGeometry
-  //  ArcCurve创建圆弧曲线
-  const arc = new ArcCurve(0, 0, radius, startAngle, endAngle, false)
-  //getSpacedPoints是基类Curve的方法，返回一个vector2对象作为元素组成的数组
-  const pointsArr = arc.getSpacedPoints(100) //分段数80，返回81个顶点
-  geometry.setFromPoints(pointsArr) // setFromPoints方法从pointsArr中提取数据改变几何体的顶点属性vertices
-  // 每个顶点对应一个百分比数据attributes.percent 用于控制点的渲染大小
-  const percentArr = [] //attributes.percent的数据
-  for (let i = 0; i < pointsArr.length; i++) {
-    percentArr.push(i / pointsArr.length)
-  }
-  const percentAttribue = new BufferAttribute(new Float32Array(percentArr), 1)
-  // 通过顶点数据percent点模型从大到小变化，产生小蝌蚪形状飞线
-  geometry.attributes.percent = percentAttribue
-  // 批量计算所有顶点颜色数据
-  const colorArr = []
-  for (let i = 0; i < pointsArr.length; i++) {
-    const color1 = new Color(0xec8f43) //轨迹线颜色 青色
-    const color2 = new Color(0xf3ae76) //黄色
-    const color = color1.lerp(color2, i / pointsArr.length)
-    colorArr.push(color.r, color.g, color.b)
-  }
-  // 设置几何体顶点颜色数据
-  geometry.attributes.color = new BufferAttribute(new Float32Array(colorArr), 3)
-  const size = 1.3
-  // 点模型渲染几何体每个顶点
-  const material = new PointsMaterial({
-    size, //点大小
-    // vertexColors: VertexColors, //使用顶点颜色渲染
-    transparent: true,
-    depthWrite: false
-  })
-  // 修改点材质的着色器源码(注意：不同版本细节可能会稍微会有区别，不过整体思路是一样的)
-  material.onBeforeCompile = function (shader) {
-    // 顶点着色器中声明一个attribute变量:百分比
-    shader.vertexShader = shader.vertexShader.replace(
-      'void main() {',
-      [
-        'attribute float percent;', //顶点大小百分比变量，控制点渲染大小
-        'void main() {'
-      ].join('\n') // .join()把数组元素合成字符串
-    )
-    // 调整点渲染大小计算方式
-    shader.vertexShader = shader.vertexShader.replace(
-      'gl_PointSize = size;',
-      ['gl_PointSize = percent * size;'].join('\n') // .join()把数组元素合成字符串
-    )
-  }
-  const FlyLine = new Points(geometry, material)
-  material.color = new Color(color)
-  FlyLine.name = '飞行线'
-
-  return FlyLine
-}
-
-/**输入地球上任意两点的经纬度坐标，通过函数flyArc可以绘制一个飞线圆弧轨迹
- * lon1,lat1:轨迹线起点经纬度坐标
- * lon2,lat2：轨迹线结束点经纬度坐标
- */
-function flyArc(radius, lon1, lat1, lon2, lat2, options) {
-  const sphereCoord1 = lon2xyz(radius, lon1, lat1) //经纬度坐标转球面坐标
-  // startSphereCoord：轨迹线起点球面坐标
-  const startSphereCoord = new Vector3(sphereCoord1.x, sphereCoord1.y, sphereCoord1.z)
-  const sphereCoord2 = lon2xyz(radius, lon2, lat2)
-  // startSphereCoord：轨迹线结束点球面坐标
-  const endSphereCoord = new Vector3(sphereCoord2.x, sphereCoord2.y, sphereCoord2.z)
-
-  //计算绘制圆弧需要的关于y轴对称的起点、结束点和旋转四元数
-  const startEndQua = _3Dto2D(startSphereCoord, endSphereCoord)
-  // 调用arcXOY函数绘制一条圆弧飞线轨迹
-  const arcline = arcXOY(radius, startEndQua.startPoint, startEndQua.endPoint, options)
-  arcline.quaternion.multiply(startEndQua.quaternion)
-  return arcline
-}
-/*
- * 把3D球面上任意的两个飞线起点和结束点绕球心旋转到到XOY平面上，
- * 同时保持关于y轴对称，借助旋转得到的新起点和新结束点绘制
- * 一个圆弧，最后把绘制的圆弧反向旋转到原来的起点和结束点即可
- */
-function _3Dto2D(startSphere, endSphere) {
-  /*计算第一次旋转的四元数：表示从一个平面如何旋转到另一个平面*/
-  const origin = new Vector3(0, 0, 0) //球心坐标
-  const startDir = startSphere.clone().sub(origin) //飞线起点与球心构成方向向量
-  const endDir = endSphere.clone().sub(origin) //飞线结束点与球心构成方向向量
-  // dir1和dir2构成一个三角形，.cross()叉乘计算该三角形法线normal
-  const normal = startDir.clone().cross(endDir).normalize()
-  const xoyNormal = new Vector3(0, 0, 1) //XOY平面的法线
-  //.setFromUnitVectors()计算从normal向量旋转达到xoyNormal向量所需要的四元数
-  // quaternion表示把球面飞线旋转到XOY平面上需要的四元数
-  const quaternion3D_XOY = new Quaternion().setFromUnitVectors(normal, xoyNormal)
-  /*第一次旋转：飞线起点、结束点从3D空间第一次旋转到XOY平面*/
-  const startSphereXOY = startSphere.clone().applyQuaternion(quaternion3D_XOY)
-  const endSphereXOY = endSphere.clone().applyQuaternion(quaternion3D_XOY)
-
-  /*计算第二次旋转的四元数*/
-  // middleV3：startSphereXOY和endSphereXOY的中点
-  const middleV3 = startSphereXOY.clone().add(endSphereXOY).multiplyScalar(0.5)
-  const midDir = middleV3.clone().sub(origin).normalize() // 旋转前向量midDir，中点middleV3和球心构成的方向向量
-  const yDir = new Vector3(0, 1, 0) // 旋转后向量yDir，即y轴
-  // .setFromUnitVectors()计算从midDir向量旋转达到yDir向量所需要的四元数
-  // quaternion2表示让第一次旋转到XOY平面的起点和结束点关于y轴对称需要的四元数
-  const quaternionXOY_Y = new Quaternion().setFromUnitVectors(midDir, yDir)
-
-  /*第二次旋转：使旋转到XOY平面的点再次旋转，实现关于Y轴对称*/
-  const startSpherXOY_Y = startSphereXOY.clone().applyQuaternion(quaternionXOY_Y)
-  const endSphereXOY_Y = endSphereXOY.clone().applyQuaternion(quaternionXOY_Y)
-
-  /**一个四元数表示一个旋转过程
-   *.invert()方法表示四元数的逆，简单说就是把旋转过程倒过来
-   * 两次旋转的四元数执行.invert()求逆，然后执行.multiply()相乘
-   *新版本.invert()对应旧版本.invert()
-   */
-  const quaternionInverse = quaternion3D_XOY.clone().invert().multiply(quaternionXOY_Y.clone().invert())
-  return {
-    // 返回两次旋转四元数的逆四元数
-    quaternion: quaternionInverse,
-    // 范围两次旋转后在XOY平面上关于y轴对称的圆弧起点和结束点坐标
-    startPoint: startSpherXOY_Y,
-    endPoint: endSphereXOY_Y
-  }
-}
-/**通过函数arcXOY()可以在XOY平面上绘制一个关于y轴对称的圆弧曲线
- * startPoint, endPoint：表示圆弧曲线的起点和结束点坐标值，起点和结束点关于y轴对称
- * 同时在圆弧轨迹的基础上绘制一段飞线*/
-function arcXOY(radius, startPoint, endPoint, options) {
-  // 计算两点的中点
-  const middleV3 = new Vector3().addVectors(startPoint, endPoint).multiplyScalar(0.5)
-  // 弦垂线的方向dir(弦的中点和圆心构成的向量)
-  const dir = middleV3.clone().normalize()
-  // 计算球面飞线的起点、结束点和球心构成夹角的弧度值
-  const earthRadianAngle = radianAOB(startPoint, endPoint, new Vector3(0, 0, 0))
-  /*设置飞线轨迹圆弧的中间点坐标
-  弧度值 * radius * 0.2：表示飞线轨迹圆弧顶部距离地球球面的距离
-  起点、结束点相聚越远，构成的弧线顶部距离球面越高*/
-  const arcTopCoord = dir.multiplyScalar(radius + earthRadianAngle * radius * 0.2) // 黄色飞行线的高度
-  //求三个点的外接圆圆心(飞线圆弧轨迹的圆心坐标)
-  const flyArcCenter = threePointCenter(startPoint, endPoint, arcTopCoord)
-  // 飞线圆弧轨迹半径flyArcR
-  const flyArcR = Math.abs(flyArcCenter.y - arcTopCoord.y)
-  /*坐标原点和飞线起点构成直线和y轴负半轴夹角弧度值
-  参数分别是：飞线圆弧起点、y轴负半轴上一点、飞线圆弧圆心*/
-  const flyRadianAngle = radianAOB(startPoint, new Vector3(0, -1, 0), flyArcCenter)
-  const startAngle = -Math.PI / 2 + flyRadianAngle //飞线圆弧开始角度
-  const endAngle = Math.PI - startAngle //飞线圆弧结束角度
-  // 调用圆弧线模型的绘制函数
-  const arcline = circleLine(flyArcCenter.x, flyArcCenter.y, flyArcR, startAngle, endAngle, options.color)
-  // const arcline = new  Group();// 不绘制轨迹线，使用 Group替换circleLine()即可
-  arcline.center = flyArcCenter //飞线圆弧自定一个属性表示飞线圆弧的圆心
-  arcline.topCoord = arcTopCoord //飞线圆弧自定一个属性表示飞线圆弧中间也就是顶部坐标
-
-  // const flyAngle = Math.PI/ 10; //飞线圆弧固定弧度
-  const flyAngle = (endAngle - startAngle) / 7 //飞线圆弧的弧度和轨迹线弧度相关
-  // 绘制一段飞线，圆心做坐标原点
-  const flyLine = createFlyLine(flyArcR, startAngle, startAngle + flyAngle, options.flyLineColor)
-  flyLine.position.y = flyArcCenter.y //平移飞线圆弧和飞线轨迹圆弧重合
-  //飞线段flyLine作为飞线轨迹arcLine子对象，继承飞线轨迹平移旋转等变换
-  arcline.add(flyLine)
-  //飞线段运动范围startAngle~flyEndAngle
-  flyLine.flyEndAngle = endAngle - startAngle - flyAngle
-  flyLine.startAngle = startAngle
-  // arcline.flyEndAngle：飞线段当前角度位置，这里设置了一个随机值用于演示
-  flyLine.AngleZ = arcline.flyEndAngle * Math.random()
-  // flyLine.rotation.z = arcline.AngleZ;
-  // arcline.flyLine指向飞线段,便于设置动画是访问飞线段
-  arcline.userData['flyLine'] = flyLine
-
-  return arcline
-}
-/*计算球面上两点和球心构成夹角的弧度值
-参数point1, point2:表示地球球面上两点坐标Vector3
-计算A、B两点和顶点O构成的AOB夹角弧度值*/
-function radianAOB(A, B, O) {
-  // dir1、dir2：球面上两个点和球心构成的方向向量
-  const dir1 = A.clone().sub(O).normalize()
-  const dir2 = B.clone().sub(O).normalize()
-  //点乘.dot()计算夹角余弦值
-  const cosAngle = dir1.clone().dot(dir2)
-  const radianAngle = Math.acos(cosAngle) //余弦值转夹角弧度值,通过余弦值可以计算夹角范围是0~180度
-  return radianAngle
-}
-/*绘制一条圆弧曲线模型Line
-5个参数含义：(圆心横坐标, 圆心纵坐标, 飞线圆弧轨迹半径, 开始角度, 结束角度)*/
-function circleLine(x, y, r, startAngle, endAngle, color) {
-  const geometry = new BufferGeometry() //声明一个几何体对象Geometry
-  //  ArcCurve创建圆弧曲线
-  const arc = new ArcCurve(x, y, r, startAngle, endAngle, false)
-  //getSpacedPoints是基类Curve的方法，返回一个vector2对象作为元素组成的数组
-  const points = arc.getSpacedPoints(80) //分段数50，返回51个顶点
-  geometry.setFromPoints(points) // setFromPoints方法从points中提取数据改变几何体的顶点属性vertices
-  const material = new LineBasicMaterial({
-    color: color || 0xd18547
-  }) //线条材质
-  const line = new Line(geometry, material) //线条模型对象
-  return line
-}
-//求三个点的外接圆圆心，p1, p2, p3表示三个点的坐标Vector3。
-function threePointCenter(p1, p2, p3) {
-  const L1 = p1.lengthSq() //p1到坐标原点距离的平方
-  const L2 = p2.lengthSq()
-  const L3 = p3.lengthSq()
-  const x1 = p1.x,
-    y1 = p1.y,
-    x2 = p2.x,
-    y2 = p2.y,
-    x3 = p3.x,
-    y3 = p3.y
-  const S = x1 * y2 + x2 * y3 + x3 * y1 - x1 * y3 - x2 * y1 - x3 * y2
-  const x = (L2 * y3 + L1 * y2 + L3 * y1 - L2 * y1 - L3 * y2 - L1 * y3) / S / 2
-  const y = (L3 * x2 + L2 * x1 + L1 * x3 - L1 * x2 - L2 * x3 - L3 * x1) / S / 2
-  // 三点外接圆圆心坐标
-  const center = new Vector3(x, y, 0)
-  return center
-}
-
-export { arcXOY, flyArc }

-import {
-  CatmullRomCurve3,
-  DoubleSide,
-  Group,
-  Mesh,
-  MeshBasicMaterial,
-  PlaneGeometry,
-  Texture,
-  TubeGeometry,
-  Vector3
-} from 'three'
-import { punctuation } from '../world/Earth'
-
-/**
- * 经纬度坐标转球面坐标
- * @param {地球半径} R
- * @param {经度(角度值)} longitude
- * @param {维度(角度值)} latitude
- */
-export const lon2xyz = (R: number, longitude: number, latitude: number): Vector3 => {
-  let lon = (longitude * Math.PI) / 180 // 转弧度值
-  const lat = (latitude * Math.PI) / 180 // 转弧度值
-  lon = -lon // js坐标系z坐标轴对应经度-90度，而不是90度
-
-  // 经纬度坐标转球面坐标计算公式
-  const x = R * Math.cos(lat) * Math.cos(lon)
-  const y = R * Math.sin(lat)
-  const z = R * Math.cos(lat) * Math.sin(lon)
-  // 返回球面坐标
-  return new Vector3(x, y, z)
-}
-
-// 创建波动光圈
-export const createWaveMesh = (options: { radius: number; lon: number; lat: number; textures: any }) => {
-  const geometry = new PlaneGeometry(1, 1) //默认在XOY平面上
-  const texture = options.textures.aperture
-
-  const material = new MeshBasicMaterial({
-    color: 0xe99f68,
-    map: texture,
-    transparent: true, //使用背景透明的png贴图，注意开启透明计算
-    opacity: 1.0,
-    depthWrite: false //禁止写入深度缓冲区数据
-  })
-  const mesh = new Mesh(geometry, material)
-  // 经纬度转球面坐标
-  const coord = lon2xyz(options.radius * 1.001, options.lon, options.lat)
-  const size = options.radius * 0.12 //矩形平面Mesh的尺寸
-  mesh.scale.set(size, size, size) //设置mesh大小
-  mesh.userData['size'] = size //自顶一个属性，表示mesh静态大小
-  mesh.userData['scale'] = Math.random() * 1.0 //自定义属性._s表示mesh在原始大小基础上放大倍数  光圈在原来mesh.size基础上1~2倍之间变化
-  mesh.position.set(coord.x, coord.y, coord.z)
-  const coordVec3 = new Vector3(coord.x, coord.y, coord.z).normalize()
-  const meshNormal = new Vector3(0, 0, 1)
-  mesh.quaternion.setFromUnitVectors(meshNormal, coordVec3)
-  return mesh
-}
-
-// 创建柱状
-export const createLightPillar = (options: {
-  radius: number
-  lon: number
-  lat: number
-  index: number
-  textures: Record<string, Texture>
-  punctuation: punctuation
-}) => {
-  const height = options.radius * 0.3
-  const geometry = new PlaneGeometry(options.radius * 0.05, height)
-  geometry.rotateX(Math.PI / 2)
-  geometry.translate(0, 0, height / 2)
-  const material = new MeshBasicMaterial({
-    map: options.textures.light_column,
-    color: options.index == 0 ? options.punctuation.lightColumn.startColor : options.punctuation.lightColumn.endColor,
-    transparent: true,
-    side: DoubleSide,
-    depthWrite: false //是否对深度缓冲区有任何的影响
-  })
-  const mesh = new Mesh(geometry, material)
-  const group = new Group()
-  // 两个光柱交叉叠加
-  group.add(mesh, mesh.clone().rotateZ(Math.PI / 2)) //几何体绕x轴旋转了，所以mesh旋转轴变为z
-  // 经纬度转球面坐标
-  const SphereCoord = lon2xyz(options.radius, options.lon, options.lat) //SphereCoord球面坐标
-  group.position.set(SphereCoord.x, SphereCoord.y, SphereCoord.z) //设置mesh位置
-  const coordVec3 = new Vector3(SphereCoord.x, SphereCoord.y, SphereCoord.z).normalize()
-  const meshNormal = new Vector3(0, 0, 1)
-  group.quaternion.setFromUnitVectors(meshNormal, coordVec3)
-  return group
-}
-
-// 光柱底座矩形平面
-export const createPointMesh = (options: { radius: number; lon: number; lat: number; material: MeshBasicMaterial }) => {
-  const geometry = new PlaneGeometry(1, 1) //默认在XOY平面上
-  const mesh = new Mesh(geometry, options.material)
-  // 经纬度转球面坐标
-  const coord = lon2xyz(options.radius * 1.001, options.lon, options.lat)
-  const size = options.radius * 0.05 // 矩形平面Mesh的尺寸
-  mesh.scale.set(size, size, size) // 设置mesh大小
-
-  // 设置mesh位置
-  mesh.position.set(coord.x, coord.y, coord.z)
-  const coordVec3 = new Vector3(coord.x, coord.y, coord.z).normalize()
-  const meshNormal = new Vector3(0, 0, 1)
-  mesh.quaternion.setFromUnitVectors(meshNormal, coordVec3)
-  return mesh
-}
-
-// 获取点
-export const getCirclePoints = (option: any) => {
-  const list = []
-  for (let j = 0; j < 2 * Math.PI - 0.1; j += (2 * Math.PI) / (option.number || 100)) {
-    list.push([
-      parseFloat((Math.cos(j) * (option.radius || 10)).toFixed(2)),
-      0,
-      parseFloat((Math.sin(j) * (option.radius || 10)).toFixed(2))
-    ])
-  }
-  if (option.closed) list.push(list[0])
-  return list
-}
-
-// 创建线
-
-/**
- * 创建动态的线
- */
-export const createAnimateLine = (option: any) => {
-  // 由多个点数组构成的曲线 通常用于道路
-  const l: Array<any> = []
-  option.pointList.forEach((e: Array<any>) => l.push(new Vector3(e[0], e[1], e[2])))
-  const curve = new CatmullRomCurve3(l) // 曲线路径
-
-  // 管道体
-  const tubeGeometry = new TubeGeometry(curve, option.number || 50, option.radius || 1, option.radialSegments)
-  return new Mesh(tubeGeometry, option.material)
-}

-
-export interface IEvents {
-  resize: () => void
-}

-export interface IWord {
-  dom: HTMLElement
-  data: any
-  width: number
-  height: number
-}
\ No newline at end of file

-uniform vec3 glowColor;
-uniform float bias;
-uniform float power;
-uniform float time;
-varying vec3 vp;
-varying vec3 vNormal;
-varying vec3 vPositionNormal;
-uniform float scale;
-// 获取纹理
-uniform sampler2D map;
-// 纹理坐标
-varying vec2 vUv;
-
-void main(void){
-  float a = pow( bias + scale * abs(dot(vNormal, vPositionNormal)), power );
-  if(vp.y > time && vp.y < time + 20.0) {
-    float t =  smoothstep(0.0, 0.8,  (1.0 - abs(0.5 - (vp.y - time) / 20.0)) / 3.0  );
-    gl_FragColor = mix(gl_FragColor, vec4(glowColor, 1.0), t * t );
-  }
-  gl_FragColor = mix(gl_FragColor, vec4( glowColor, 1.0 ), a);
-  float b = 0.8;
-  gl_FragColor = gl_FragColor + texture2D( map, vUv );
-}
\ No newline at end of file

-
-varying vec2 vUv;
-varying vec3 vNormal;
-varying vec3 vp;
-varying vec3 vPositionNormal;
-void main(void){
-  vUv = uv;
-  vNormal = normalize( normalMatrix * normal ); // 转换到视图空间
-  vp = position;
-  vPositionNormal = normalize(( modelViewMatrix * vec4(position, 1.0) ).xyz);
-  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
-}
\ No newline at end of file

-/**
- * 资源文件
- * 把模型和图片分开进行加载
- */
-
-interface ITextures {
-  name: string
-  url: string
-}
-
-export interface IResources {
-  textures?: ITextures[]
-}
-
-const fileSuffix = ['earth', 'gradient', 'redCircle', 'label', 'aperture', 'glow', 'light_column', 'aircraft']
-const textures: ITextures[] = []
-
-const modules = import.meta.globEager("../../images/earth/*");
-
-for(let item in modules) {
-  const n = item.split('/').pop()
-  if(n) {
-    textures.push({
-      name: n.split('.')[0],
-      url: modules[item].default
-    })
-  }
-}
-
-const resources: IResources = {
-  textures
-}
-
-export { resources }

-/**
- * 创建 threejs 四大天王
- * 场景、相机、渲染器、控制器
- */
-
-import * as THREE from 'three'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
-
-export class Basic {
-  public scene!: THREE.Scene
-  public camera!: THREE.PerspectiveCamera
-  public renderer!: THREE.WebGLRenderer
-  public controls!: OrbitControls
-  public dom: HTMLElement
-
-  constructor(dom: HTMLElement) {
-    this.dom = dom
-    this.initScenes()
-    this.setControls()
-  }
-
-  /**
-   * 初始化场景
-   */
-  initScenes() {
-    this.scene = new THREE.Scene()
-
-    this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100000)
-    this.camera.position.set(0, 30, -250)
-
-    this.renderer = new THREE.WebGLRenderer({
-      // canvas: this.dom,
-      alpha: true, // 透明
-      antialias: true // 抗锯齿
-    })
-    this.renderer.setPixelRatio(window.devicePixelRatio) // 设置屏幕像素比
-    this.renderer.setSize(window.innerWidth, window.innerHeight) // 设置渲染器宽高
-    this.dom.appendChild(this.renderer.domElement) // 添加到dom中
-  }
-
-  /**
-   * 设置控制器
-   */
-  setControls() {
-    // 鼠标控制      相机，渲染dom
-    this.controls = new OrbitControls(this.camera, this.renderer.domElement)
-
-    this.controls.autoRotateSpeed = 3
-    // 使动画循环使用时阻尼或自转 意思是否有惯性
-    this.controls.enableDamping = true
-    // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
-    this.controls.dampingFactor = 0.05
-    // 是否可以缩放
-    this.controls.enableZoom = true
-    // 设置相机距离原点的最远距离
-    this.controls.minDistance = 100
-    // 设置相机距离原点的最远距离
-    this.controls.maxDistance = 300
-    // 是否开启右键拖拽
-    this.controls.enablePan = false
-  }
-}

-import {
-  BufferAttribute,
-  BufferGeometry,
-  Color,
-  DoubleSide,
-  Group,
-  Material,
-  Mesh,
-  MeshBasicMaterial,
-  NormalBlending,
-  Object3D,
-  Points,
-  PointsMaterial,
-  ShaderMaterial,
-  SphereGeometry,
-  Sprite,
-  SpriteMaterial,
-  Texture,
-  TextureLoader,
-  Vector3
-} from 'three'
-
-import {
-  createAnimateLine,
-  createLightPillar,
-  createPointMesh,
-  createWaveMesh,
-  getCirclePoints,
-  lon2xyz
-} from '../Utils/common'
-import gsap from 'gsap'
-import { flyArc } from '../Utils/arc'
-import earthVertex from '../shaders/earth/vertex.vs?raw'
-import earthFragment from '../shaders/earth/fragment.fs?raw'
-
-export type punctuation = {
-  circleColor: number
-  lightColumn: {
-    startColor: number // 起点颜色
-    endColor: number // 终点颜色
-  }
-}
-
-type options = {
-  data: {
-    startArray: {
-      name: string
-      E: number // 经度
-      N: number // 维度
-    }
-    endArray: {
-      name: string
-      E: number // 经度
-      N: number // 维度
-    }[]
-  }[]
-  dom: HTMLElement
-  textures: Record<string, Texture> // 贴图
-  earth: {
-    radius: number // 地球半径
-    rotateSpeed: number // 地球旋转速度
-    isRotation: boolean // 地球组是否自转
-  }
-  satellite: {
-    show: boolean // 是否显示卫星
-    rotateSpeed: number // 旋转速度
-    size: number // 卫星大小
-    number: number // 一个圆环几个球
-  }
-  punctuation: punctuation
-  flyLine: {
-    color: number // 飞线的颜色
-    speed: number // 飞机拖尾线速度
-    flyLineColor: number // 飞行线的颜色
-  }
-}
-type uniforms = {
-  glowColor: { value: Color }
-  scale: { type: string; value: number }
-  bias: { type: string; value: number }
-  power: { type: string; value: number }
-  time: { type: string; value: any }
-  isHover: { value: boolean }
-  map: { value?: Texture }
-}
-
-export default class earth {
-  public group: Group
-  public earthGroup: Group
-
-  public around!: BufferGeometry
-  public aroundPoints!: Points<BufferGeometry, PointsMaterial>
-
-  public options: options
-  public uniforms: uniforms
-  public timeValue: number
-
-  public earth!: Mesh<SphereGeometry, ShaderMaterial>
-  public punctuationMaterial!: MeshBasicMaterial
-  public markupPoint: Group
-  public waveMeshArr: Object3D[]
-
-  public circleLineList: any[]
-  public circleList: any[]
-  public x: number
-  public n: number
-  public isRotation: boolean
-  public flyLineArcGroup!: Group
-
-  constructor(options: options) {
-    this.options = options
-
-    this.group = new Group()
-    this.group.name = 'group'
-    this.group.scale.set(0, 0, 0)
-    this.earthGroup = new Group()
-    this.group.add(this.earthGroup)
-    this.earthGroup.name = 'EarthGroup'
-
-    // 标注点效果
-    this.markupPoint = new Group()
-    this.markupPoint.name = 'markupPoint'
-    this.waveMeshArr = []
-
-    // 卫星和标签
-    this.circleLineList = []
-    this.circleList = []
-    this.x = 0
-    this.n = 0
-
-    // 地球自转
-    this.isRotation = this.options.earth.isRotation
-
-    // 扫光动画 shader
-    this.timeValue = 200
-
-    this.uniforms = {
-      glowColor: {
-        value: new Color(0x0cd1eb)
-      },
-      scale: {
-        type: 'f',
-        value: -1.0
-      },
-      bias: {
-        type: 'f',
-        value: 1.0
-      },
-      power: {
-        type: 'f',
-        value: 3.3
-      },
-      time: {
-        type: 'f',
-        value: this.timeValue
-      },
-      isHover: {
-        value: false
-      },
-      map: {
-        value: undefined
-      }
-    }
-  }
-
-  async init(): Promise<void> {
-    return new Promise(resolve => {
-      const init = async () => {
-        this.createEarth() // 创建地球
-        this.createEarthGlow() // 创建地球辉光
-        this.createEarthAperture() // 创建地球的大气层
-        await this.createMarkupPoint() // 创建柱状点位
-        this.createAnimateCircle() // 创建环绕卫星
-        this.createFlyLine() // 创建飞线
-        this.show()
-        resolve()
-      }
-      init()
-    })
-  }
-
-  createEarth() {
-    const earth_geometry = new SphereGeometry(this.options.earth.radius, 50, 50)
-    const earth_border = new SphereGeometry(this.options.earth.radius + 10, 60, 60)
-
-    const pointMaterial = new PointsMaterial({
-      color: 0x81ffff, //设置颜色，默认 0xFFFFFF
-      transparent: true,
-      sizeAttenuation: true,
-      opacity: 0.1,
-      vertexColors: false, //定义材料是否使用顶点颜色，默认false ---如果该选项设置为true，则color属性失效
-      size: 0.2 //定义粒子的大小。默认为1.0
-    })
-    const points = new Points(earth_border, pointMaterial) //将模型添加到场景
-
-    this.earthGroup.add(points)
-
-    this.uniforms.map.value = this.options.textures.earth
-
-    const earth_material = new ShaderMaterial({
-      // wireframe:true, // 显示模型线条
-      uniforms: this.uniforms as any,
-      vertexShader: earthVertex,
-      fragmentShader: earthFragment
-    })
-
-    earth_material.needsUpdate = true
-    this.earth = new Mesh(earth_geometry, earth_material)
-    this.earth.name = 'earth'
-    this.earthGroup.add(this.earth)
-  }
-
-  createEarthGlow() {
-    const R = this.options.earth.radius //地球半径
-
-    // TextureLoader创建一个纹理加载器对象，可以加载图片作为纹理贴图
-    const texture = this.options.textures.glow // 加载纹理贴图
-
-    // 创建精灵材质对象SpriteMaterial
-    const spriteMaterial = new SpriteMaterial({
-      map: texture, // 设置精灵纹理贴图
-      color: 0x4390d1,
-      transparent: true, //开启透明
-      opacity: 0.7, // 可以通过透明度整体调节光圈
-      depthWrite: false //禁止写入深度缓冲区数据
-    })
-
-    // 创建表示地球光圈的精灵模型
-    const sprite = new Sprite(spriteMaterial)
-    sprite.scale.set(R * 3.0, R * 3.0, 1) //适当缩放精灵
-    this.earthGroup.add(sprite)
-  }
-
-  createEarthAperture() {
-    const vertexShader = [
-      'varying vec3	vVertexWorldPosition;',
-      'varying vec3	vVertexNormal;',
-      'varying vec4	vFragColor;',
-      'void main(){',
-      '	vVertexNormal	= normalize(normalMatrix * normal);', //将法线转换到视图坐标系中
-      '	vVertexWorldPosition	= (modelMatrix * vec4(position, 1.0)).xyz;', //将顶点转换到世界坐标系中
-      '	// set gl_Position',
-      '	gl_Position	= projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
-      '}'
-    ].join('\n')
-
-    //大气层效果
-    const AeroSphere = {
-      uniforms: {
-        coeficient: {
-          type: 'f',
-          value: 1.0
-        },
-        power: {
-          type: 'f',
-          value: 3
-        },
-        glowColor: {
-          type: 'c',
-          value: new Color(0x4390d1)
-        }
-      },
-      vertexShader: vertexShader,
-      fragmentShader: [
-        'uniform vec3	glowColor;',
-        'uniform float	coeficient;',
-        'uniform float	power;',
-
-        'varying vec3	vVertexNormal;',
-        'varying vec3	vVertexWorldPosition;',
-
-        'varying vec4	vFragColor;',
-
-        'void main(){',
-        '	vec3 worldCameraToVertex = vVertexWorldPosition - cameraPosition;', //世界坐标系中从相机位置到顶点位置的距离
-        '	vec3 viewCameraToVertex	= (viewMatrix * vec4(worldCameraToVertex, 0.0)).xyz;', //视图坐标系中从相机位置到顶点位置的距离
-        '	viewCameraToVertex= normalize(viewCameraToVertex);', //规一化
-        '	float intensity	= pow(coeficient + dot(vVertexNormal, viewCameraToVertex), power);',
-        '	gl_FragColor = vec4(glowColor, intensity);',
-        '}'
-      ].join('\n')
-    }
-    //球体 辉光 大气层
-    const material1 = new ShaderMaterial({
-      uniforms: AeroSphere.uniforms,
-      vertexShader: AeroSphere.vertexShader,
-      fragmentShader: AeroSphere.fragmentShader,
-      blending: NormalBlending,
-      transparent: true,
-      depthWrite: false
-    })
-    const sphere = new SphereGeometry(this.options.earth.radius + 0, 50, 50)
-    const mesh = new Mesh(sphere, material1)
-    this.earthGroup.add(mesh)
-  }
-
-  async createMarkupPoint() {
-    await Promise.all(
-      this.options.data.map(async item => {
-        const radius = this.options.earth.radius
-        const lon = item.startArray.E //经度
-        const lat = item.startArray.N //纬度
-
-        this.punctuationMaterial = new MeshBasicMaterial({
-          color: this.options.punctuation.circleColor,
-          map: this.options.textures.label,
-          transparent: true, //使用背景透明的png贴图，注意开启透明计算
-          depthWrite: false //禁止写入深度缓冲区数据
-        })
-
-        const mesh = createPointMesh({ radius, lon, lat, material: this.punctuationMaterial }) //光柱底座矩形平面
-        this.markupPoint.add(mesh)
-        const LightPillar = createLightPillar({
-          radius: this.options.earth.radius,
-          lon,
-          lat,
-          index: 0,
-          textures: this.options.textures,
-          punctuation: this.options.punctuation
-        }) //光柱
-        this.markupPoint.add(LightPillar)
-        const WaveMesh = createWaveMesh({ radius, lon, lat, textures: this.options.textures }) //波动光圈
-        this.markupPoint.add(WaveMesh)
-        this.waveMeshArr.push(WaveMesh)
-
-        await Promise.all(
-          item.endArray.map(obj => {
-            const lon = obj.E //经度
-            const lat = obj.N //纬度
-            const mesh = createPointMesh({ radius, lon, lat, material: this.punctuationMaterial }) //光柱底座矩形平面
-            this.markupPoint.add(mesh)
-            const LightPillar = createLightPillar({
-              radius: this.options.earth.radius,
-              lon,
-              lat,
-              index: 1,
-              textures: this.options.textures,
-              punctuation: this.options.punctuation
-            }) //光柱
-            this.markupPoint.add(LightPillar)
-            const WaveMesh = createWaveMesh({ radius, lon, lat, textures: this.options.textures }) //波动光圈
-            this.markupPoint.add(WaveMesh)
-            this.waveMeshArr.push(WaveMesh)
-          })
-        )
-        this.earthGroup.add(this.markupPoint)
-      })
-    )
-  }
-
-  createAnimateCircle() {
-    // 创建 圆环 点
-    const list = getCirclePoints({
-      radius: this.options.earth.radius + 15,
-      number: 150, //切割数
-      closed: true // 闭合
-    })
-    const mat = new MeshBasicMaterial({
-      color: '#0c3172',
-      transparent: true,
-      opacity: 0.4,
-      side: DoubleSide
-    })
-    const line = createAnimateLine({
-      pointList: list,
-      material: mat,
-      number: 100,
-      radius: 0.1
-    })
-    this.earthGroup.add(line)
-
-    // 在clone两条线出来
-    const l2 = line.clone()
-    l2.scale.set(1.2, 1.2, 1.2)
-    l2.rotateZ(Math.PI / 6)
-    this.earthGroup.add(l2)
-
-    const l3 = line.clone()
-    l3.scale.set(0.8, 0.8, 0.8)
-    l3.rotateZ(-Math.PI / 6)
-    this.earthGroup.add(l3)
-
-    /**
-     * 旋转的球
-     */
-    const ball = new Mesh(
-      new SphereGeometry(this.options.satellite.size, 32, 32),
-      new MeshBasicMaterial({
-        color: '#e0b187' // 745F4D
-      })
-    )
-
-    const ball2 = new Mesh(
-      new SphereGeometry(this.options.satellite.size, 32, 32),
-      new MeshBasicMaterial({
-        color: '#628fbb' // 324A62
-      })
-    )
-
-    const ball3 = new Mesh(
-      new SphereGeometry(this.options.satellite.size, 32, 32),
-      new MeshBasicMaterial({
-        color: '#806bdf' //6D5AC4
-      })
-    )
-
-    this.circleLineList.push(line, l2, l3)
-    ball.name = ball2.name = ball3.name = '卫星'
-
-    for (let i = 0; i < this.options.satellite.number; i++) {
-      const ball01 = ball.clone()
-      // 一根线上总共有几个球，根据数量平均分布一下
-      const num = Math.floor(list.length / this.options.satellite.number)
-      ball01.position.set(list[num * (i + 1)][0] * 1, list[num * (i + 1)][1] * 1, list[num * (i + 1)][2] * 1)
-      line.add(ball01)
-
-      const ball02 = ball2.clone()
-      const num02 = Math.floor(list.length / this.options.satellite.number)
-      ball02.position.set(list[num02 * (i + 1)][0] * 1, list[num02 * (i + 1)][1] * 1, list[num02 * (i + 1)][2] * 1)
-      l2.add(ball02)
-
-      const ball03 = ball2.clone()
-      const num03 = Math.floor(list.length / this.options.satellite.number)
-      ball03.position.set(list[num03 * (i + 1)][0] * 1, list[num03 * (i + 1)][1] * 1, list[num03 * (i + 1)][2] * 1)
-      l3.add(ball03)
-    }
-  }
-
-  createFlyLine() {
-    this.flyLineArcGroup = new Group()
-    this.flyLineArcGroup.userData['flyLineArray'] = []
-    this.earthGroup.add(this.flyLineArcGroup)
-    this.options.data.forEach(cities => {
-      cities.endArray.forEach(item => {
-        // 调用函数flyArc绘制球面上任意两点之间飞线圆弧轨迹
-        const arcline = flyArc(
-          this.options.earth.radius,
-          cities.startArray.E,
-          cities.startArray.N,
-          item.E,
-          item.N,
-          this.options.flyLine
-        )
-
-        this.flyLineArcGroup.add(arcline) // 飞线插入flyArcGroup中
-        this.flyLineArcGroup.userData['flyLineArray'].push(arcline.userData['flyLine'])
-      })
-    })
-  }
-
-  show() {
-    gsap.to(this.group.scale, {
-      x: 1,
-      y: 1,
-      z: 1,
-      duration: 2,
-      ease: 'Quadratic'
-    })
-  }
-
-  render() {
-    this.flyLineArcGroup?.userData['flyLineArray']?.forEach((fly: any) => {
-      fly.rotation.z += this.options.flyLine.speed // 调节飞线速度
-      if (fly.rotation.z >= fly.flyEndAngle) fly.rotation.z = 0
-    })
-
-    if (this.isRotation) {
-      this.earthGroup.rotation.y += this.options.earth.rotateSpeed
-    }
-
-    this.circleLineList.forEach(e => {
-      e.rotateY(this.options.satellite.rotateSpeed)
-    })
-
-    this.uniforms.time.value =
-      this.uniforms.time.value < -this.timeValue ? this.timeValue : this.uniforms.time.value - 1
-
-    if (this.waveMeshArr.length) {
-      this.waveMeshArr.forEach((mesh: any) => {
-        mesh.userData['scale'] += 0.007
-        mesh.scale.set(
-          mesh.userData['size'] * mesh.userData['scale'],
-          mesh.userData['size'] * mesh.userData['scale'],
-          mesh.userData['size'] * mesh.userData['scale']
-        )
-        if (mesh.userData['scale'] <= 1.5) {
-          (mesh.material as Material).opacity = (mesh.userData['scale'] - 1) * 2 //2等于1/(1.5-1.0)，保证透明度在0~1之间变化
-        } else if (mesh.userData['scale'] > 1.5 && mesh.userData['scale'] <= 2) {
-          (mesh.material as Material).opacity = 1 - (mesh.userData['scale'] - 1.5) * 2 //2等于1/(2.0-1.5) mesh缩放2倍对应0 缩放1.5被对应1
-        } else {
-          mesh.userData['scale'] = 1
-        }
-      })
-    }
-  }
-}

-/**
- * 资源管理和加载
- */
-import { LoadingManager, Texture, TextureLoader } from 'three'
-import { loadingStart, loadingFinish, loadingError } from '@/utils'
-import { resources } from './Assets'
-export class Resources {
-  private manager!: LoadingManager
-  private callback: () => void
-  private textureLoader!: InstanceType<typeof TextureLoader>
-  public textures: Record<string, Texture>
-  constructor(callback: () => void) {
-    this.callback = callback // 资源加载完成的回调
-    this.textures = {} // 贴图对象
-    this.setLoadingManager()
-    this.loadResources()
-  }
-
-  /**
-   * 管理加载状态
-   */
-  private setLoadingManager() {
-    this.manager = new LoadingManager()
-    // 开始加载
-    this.manager.onStart = () => {
-      loadingStart()
-    }
-    // 加载完成
-    this.manager.onLoad = () => {
-      this.callback()
-    }
-    // 正在进行中
-    this.manager.onProgress = url => {
-      loadingFinish()
-    }
-
-    this.manager.onError = url => {
-      loadingError()
-      window['$message'].error('数据加载失败，请刷新重试！')
-    }
-  }
-
-  /**
-   * 加载资源
-   */
-  private loadResources(): void {
-    this.textureLoader = new TextureLoader(this.manager)
-    resources.textures?.forEach(item => {
-      this.textureLoader.load(item.url, t => {
-        this.textures[item.name] = t
-      })
-    })
-  }
-}

-import { MeshBasicMaterial, PerspectiveCamera, Scene, ShaderMaterial, WebGLRenderer } from 'three'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
-// interfaces
-import { IWord } from '../interfaces/IWord'
-import { Basic } from './Basic'
-import { Resources } from './Resources'
-// earth
-import Earth from './Earth'
-
-export default class World {
-  public basic: Basic
-  public scene: Scene
-  public camera: PerspectiveCamera
-  public renderer: WebGLRenderer
-  public controls: OrbitControls
-  public material!: ShaderMaterial | MeshBasicMaterial
-  public resources: Resources
-  public option: IWord
-  public earth!: Earth
-
-  constructor(option: IWord) {
-    /**
-     * 加载资源
-     */
-    this.option = option
-    this.basic = new Basic(option.dom)
-    this.scene = this.basic.scene
-    this.renderer = this.basic.renderer
-    this.controls = this.basic.controls
-    this.camera = this.basic.camera
-    this.updateSize()
-    this.resources = new Resources(async () => {
-      await this.createEarth()
-      // 开始渲染
-      this.render()
-    })
-  }
-
-  async createEarth(data?: any) {
-    // 资源加载完成，开始制作地球，注释在new Earth()类型里面
-    this.earth = new Earth({
-      data: data || this.option.data,
-      dom: this.option.dom,
-      textures: this.resources.textures,
-      earth: {
-        radius: 50,
-        rotateSpeed: 0.002,
-        isRotation: true
-      },
-      satellite: {
-        show: true,
-        rotateSpeed: -0.01,
-        size: 1,
-        number: 2
-      },
-      punctuation: {
-        circleColor: 0x3892ff,
-        lightColumn: {
-          startColor: 0xe4007f, // 起点颜色
-          endColor: 0xffffff // 终点颜色
-        }
-      },
-      flyLine: {
-        color: 0xf3ae76, // 飞线的颜色
-        flyLineColor: 0xff7714, // 飞行线的颜色
-        speed: 0.004 // 拖尾飞线的速度
-      }
-    })
-
-    this.scene.add(this.earth.group)
-    await this.earth.init()
-  }
-
-  /**
-   * 渲染函数
-   */
-  public render() {
-    requestAnimationFrame(this.render.bind(this))
-    this.renderer.render(this.scene, this.camera)
-    this.controls && this.controls.update()
-    this.earth && this.earth.render()
-  }
-
-  // 更新
-  public updateSize(width?: number, height?: number) {
-    let w = width || this.option.width
-    let h = height || this.option.height
-    // 取小值
-    if (w < h) h = w
-    else w = h
-
-    this.renderer.setSize(w, h)
-    this.camera.aspect = w / h
-    this.camera.updateProjectionMatrix()
-  }
-
-  // 数据更新重新渲染
-  public updateData(data?: any) {
-    if (!this.earth.group) return
-    // 先删除旧的
-    this.scene.remove(this.earth.group)
-    // 递归遍历组对象group释放所有后代网格模型绑定几何体占用内存
-    this.earth.group.traverse((obj: any) => {
-      if (obj.type === 'Mesh') {
-        obj.geometry.dispose()
-        obj.material.dispose()
-      }
-    })
-    // 重新创建
-    this.createEarth(data)
-  }
-}

-import { PublicConfigClass } from '@/packages/public'
-import { CreateComponentType } from '@/packages/index.d'
-import { chartInitConfig } from '@/settings/designSetting'
-import { ThreeEarth01Config } from './index'
-import dataJson from './data.json'
-import cloneDeep from 'lodash/cloneDeep'
-
-export const option = {
-  dataset: dataJson
-}
-
-export default class Config extends PublicConfigClass implements CreateComponentType {
-  public key = ThreeEarth01Config.key
-  public attr = { ...chartInitConfig, w: 800, h: 800, zIndex: -1 }
-  public chartConfig = cloneDeep(ThreeEarth01Config)
-  public option = cloneDeep(option)
-}

-<template></template>
-
-<script setup lang="ts">
-import { PropType } from 'vue'
-import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { option } from './config.vue'
-
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<typeof option>,
-    required: true
-  }
-})
-</script>

-[
-  {
-    "startArray": {
-      "name": "杭州",
-      "N": 30.246026,
-      "E": 120.210792
-    },
-    "endArray": [
-      {
-        "name": "曼谷",
-        "N": 22,
-        "E": 100.49074172973633
-      },
-      {
-        "name": "澳大利亚",
-        "N": -23.68477416688374,
-        "E": 133.857421875
-      },
-
-      {
-        "name": "新疆维吾尔自治区",
-        "N": 41.748,
-        "E": 84.9023
-      },
-
-      {
-        "name": "德黑兰",
-        "N": 35,
-        "E": 51
-      },
-      {
-        "name": "德黑兰",
-        "N": 35,
-        "E": 51
-      },
-      {
-        "name": "美国",
-        "N": 34.125447565116126,
-        "E": 241.7431640625
-      },
-      {
-        "name": "英国",
-        "N": 51.508742458803326,
-        "E": 359.82421875
-      },
-      {
-        "name": "巴西",
-        "N": -9.96885060854611,
-        "E": 668.1445312499999
-      }
-    ]
-  },
-  {
-    "startArray": {
-      "name": "北京",
-      "N": 39.89491,
-      "E": 116.322056
-    },
-    "endArray": [
-      {
-        "name": "西藏",
-        "N": 29.660361,
-        "E": 91.132212
-      },
-      {
-        "name": "广西",
-        "N": 22.830824,
-        "E": 108.30616
-      },
-
-      {
-        "name": "江西",
-        "N": 28.676493,
-        "E": 115.892151
-      },
-
-      {
-        "name": "贵阳",
-        "N": 26.647661,
-        "E": 106.630153
-      }
-    ]
-  }
-]

-import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
-
-export const ThreeEarth01Config: ConfigType = {
-  key: 'ThreeEarth01',
-  chartKey: 'VThreeEarth01',
-  conKey: 'VCThreeEarth01',
-  title: '三维地球',
-  category: ChatCategoryEnum.THREEDANIMATION,
-  categoryName: ChatCategoryEnumName.THREEDANIMATION,
-  package: PackagesCategoryEnum.ARTOONS,
-  chartFrame: ChartFrameEnum.STATIC,
-  image: 'threeEarth01.png'
-}

-<template>
-  <div ref="chartRef"></div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, PropType, ref, toRefs, watch } from 'vue'
-import { CreateComponentType } from '@/packages'
-import { useChartDataFetch } from '@/hooks'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { option } from './config.vue'
-import World from './code/world/Word'
-import throttle from 'lodash/throttle'
-
-const props = defineProps({
-  chartConfig: {
-    type: Object as PropType<CreateComponentType & typeof option>,
-    required: true
-  }
-})
-
-const chartEditStore = useChartEditStore()
-
-const chartRef = ref<HTMLElement>()
-const { w, h } = toRefs(props.chartConfig.attr)
-let threeClassInstance: World
-
-// 初始化
-const init = () => {
-  const dom: HTMLElement | undefined = chartRef.value
-  if (dom) {
-    threeClassInstance = new World({
-      dom: dom,
-      data: props.chartConfig.option.dataset,
-      width: w.value,
-      height: h.value
-    })
-  }
-}
-
-const updateData = (data: any) => {
-  try {
-    threeClassInstance.updateData(data)
-  } catch (error) {
-    console.log(error)
-  }
-}
-
-// 改变大小
-watch(
-  () => [w.value, h.value],
-  throttle(([newWidth], [newHeight]) => {
-    threeClassInstance.updateSize(newWidth, newHeight)
-  }, 100)
-)
-
-watch(
-  () => props.chartConfig.option.dataset,
-  (newData: any) => {
-    updateData(newData)
-  },
-  {
-    deep: false
-  }
-)
-
-// DOM 渲染之后进行初始化
-onMounted(() => {
-  try {
-    if (navigator.userAgent.indexOf('Chrome') < -1 || navigator.userAgent.indexOf('Edg') < -1) {
-      window['$message'].error('三维地图组件仅在【谷歌】浏览器上能正常展示！')
-      chartEditStore.removeComponentList(undefined, false)
-      return
-    }
-    init()
-  } catch (error) {
-    console.log(error)
-  }
-})
-
-useChartDataFetch(props.chartConfig, useChartEditStore, updateData)
-</script>

-import {ThreeEarth01Config} from './ThreeEarth01/index'
-
-
-export default [ThreeEarth01Config]

-import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
-import { CreateComponentType } from '@/packages/index.d'
-import { WaterPoloConfig } from './index'
-import cloneDeep from 'lodash/cloneDeep'
-
-export const shapes = [
-  {
-    label: '圆形',
-    value: 'circle'
-  },
-  {
-    label: '正方形',
-    value: 'rect'
-  },
-  {
-    label: '带圆角的正方形',
-    value: 'roundRect'
-  },
-  {
-    label: '正三角形',
-    value: 'triangle'
-  },
-  {
-    label: '菱形',
-    value: 'diamond'
-  },
-  {
-    label: '水滴',
-    value: 'pin'
-  },
-  {
-    label: '箭头',
-    value: 'arrow'
-  },
-]
-
-export const includes = []
-
-export const option = {
-  dataset: 0.5,
-  series: [
-    {
-      type: 'liquidFill',
-      shape: shapes[0].value,
-      radius: '90%',
-      data: [0],
-      center: ['50%', '50%'],
-      color: [
-        {
-          type: 'linear',
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            {
-              offset: 0,
-              color: '#446bf5',
-            },
-            {
-              offset: 1,
-              color: '#2ca3e2',
-            },
-          ],
-          globalCoord: false,
-        },
-      ],
-      backgroundStyle: {
-        borderWidth: 1,
-        color: 'rgba(51, 66, 127, 0.7)',
-      },
-      label: {
-        normal: {
-          textStyle: {
-            fontSize: 50,
-            color: '#fff',
-          },
-        },
-      },
-      outline: {
-        show: false,
-        borderDistance: 10,
-        itemStyle: {
-          borderWidth: 2,
-          borderColor: '#112165'
-        }
-      }
-    }
-  ]
-}
-
-export default class Config extends PublicConfigClass implements CreateComponentType
-{
-  public key = WaterPoloConfig.key
-  public chartConfig = cloneDeep(WaterPoloConfig)
-  public option = echartOptionProfixHandle(option, includes)
-}

-<template>
-  <CollapseItem
-    v-for="(item, index) in seriesList"
-    :key="index"
-    name="水球"
-    :expanded="true"
-  >
-    <SettingItemBox name="内容">
-      <SettingItem name="数值">
-        <n-input-number
-          v-model:value="item.data[0]"
-          :min="0"
-          :step="0.01"
-          size="small"
-          placeholder="水球数值"
-        ></n-input-number>
-      </SettingItem>
-      <SettingItem name="形状">
-        <n-select v-model:value="item.shape" :options="shapes" placeholder="选择形状" />
-      </SettingItem>
-      <SettingItem name="文本">
-        <n-input-number v-model:value="item.label.normal.textStyle.fontSize" :min="0" :step="1" size="small" placeholder="文字大小">
-        </n-input-number>
-      </SettingItem>
-      <SettingItem name="颜色1">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="item.color[0].colorStops[0].color"
-      ></n-color-picker>
-      </SettingItem>
-      <SettingItem name="颜色2">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="item.color[0].colorStops[1].color"
-      ></n-color-picker>
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="背景" :alone="true">
-      <SettingItem>
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="item.backgroundStyle.color"
-        ></n-color-picker>
-      </SettingItem>
-    </SettingItemBox>
-  </CollapseItem>
-</template>
-
-<script setup lang="ts">
-import { PropType, computed } from 'vue'
-import { option, shapes } from './config'
-import {
-  CollapseItem,
-  SettingItemBox,
-  SettingItem,
-} from '@/components/Pages/ChartItemSetting'
-
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<typeof option>,
-    required: true,
-  },
-})
-
-const seriesList = computed(() => {
-  return props.optionData.series
-})
-</script>

-import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
-
-export const WaterPoloConfig: ConfigType = {
-  key: 'WaterPolo',
-  chartKey: 'VWaterPolo',
-  conKey: 'VCWaterPolo',
-  title: '水球图',
-  category: ChatCategoryEnum.TWODANIMATION,
-  categoryName: ChatCategoryEnumName.TWODANIMATION,
-  package: PackagesCategoryEnum.ARTOONS,
-  chartFrame: ChartFrameEnum.COMMON,
-  image: 'water_WaterPolo.png'
-}

-<template>
-  <v-chart :theme="themeColor" :option="option.value" autoresize></v-chart>
-</template>
-
-<script setup lang="ts">
-import { PropType, watch, reactive } from 'vue'
-import VChart from 'vue-echarts'
-import { use } from 'echarts/core'
-import 'echarts-liquidfill/src/liquidFill.js'
-import { CanvasRenderer } from 'echarts/renderers'
-import { GridComponent } from 'echarts/components'
-import config from './config'
-import { isPreview, isString, isNumber } from '@/utils'
-import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { useChartDataFetch } from '@/hooks'
-
-const props = defineProps({
-  themeSetting: {
-    type: Object,
-    required: true
-  },
-  themeColor: {
-    type: Object,
-    required: true
-  },
-  chartConfig: {
-    type: Object as PropType<config>,
-    required: true
-  }
-})
-
-use([CanvasRenderer, GridComponent])
-
-const chartEditStore = useChartEditStore()
-
-const option = reactive({
-  value: {}
-})
-
-// 渐变色处理
-watch(
-  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
-  (newColor: keyof typeof chartColorsSearch) => {
-    try {
-      if (!isPreview()) {
-        const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
-        // 背景颜色
-        props.chartConfig.option.series[0].backgroundStyle.color = themeColor[2]
-        // 水球颜色
-        props.chartConfig.option.series[0].color[0].colorStops = [
-          {
-            offset: 0,
-            color: themeColor[0]
-          },
-          {
-            offset: 1,
-            color: themeColor[1]
-          }
-        ]
-      }
-      option.value = props.chartConfig.option
-    } catch (error) {
-      console.log(error)
-    }
-  },
-  {
-    immediate: true
-  }
-)
-
-// 数据处理
-const dataHandle = (newData: number | string) => {
-  newData = isString(newData) ? parseFloat(newData) : newData
-  return parseFloat(newData.toFixed(2))
-}
-
-// 编辑
-watch(
-  () => props.chartConfig.option.dataset,
-  newData => {
-    if (!isString(newData) && !isNumber(newData)) return
-    props.chartConfig.option.series[0].data = [dataHandle(newData)]
-    option.value = props.chartConfig.option
-  },
-  {
-    immediate: true,
-    deep: false
-  }
-)
-
-// 预览
-useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
-  // @ts-ignore
-  option.value.series[0].data = [dataHandle(newData)]
-})
-</script>

-import {WaterPoloConfig} from './WaterPolo/index'
-
-
-export default [WaterPoloConfig]

-export enum ChatCategoryEnum {
-    TWODANIMATION = 'TwoDAnimations',
-
-    THREEDANIMATION = 'ThreeDAnimations',
-    TITLE = 'Titles',
-    MORE = 'Mores',
-
-}
-
-export enum ChatCategoryEnumName {
-    TITLE = '标题',
-    TWODANIMATION = '2D动画',
-    THREEDANIMATION = '3D动画',
-
-    MORE = '更多',
-}

-import Mores from './Mores'
-import TwoDAnimations from './TwoDAnimations'
-import ThreeDAnimations from './ThreeDAnimations'
-
-export const ArtoonsList = [...TwoDAnimations, ...ThreeDAnimations, ...Mores,]

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { LeftCenterRightHeadConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  dataset: '物联网平台数据统计',
+  bgSrc: 'src/assets/images/chart/headbackground/bg_top.png',
+  fontSize: 36,
+  showRight:true,
+  textColor:'#00f6ff',
+  textRightSizeColor:'#ffffff',
+  textRightFontSize:14,
+  x:0,
+  y:0,
+  xT:0,
+  yT:0,
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = LeftCenterRightHeadConfig.key
+  public chartConfig = cloneDeep(LeftCenterRightHeadConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="信息" :expanded="true">
+    <setting-item-box name="背景选择" :alone="true">
+      <setting-item>
+        <n-select
+            size="small"
+            placeholder="请选择您要使用的背景"
+            style="width: 250px"
+            v-model:value="selectValue"
+            :options="selectBgOptions"
+            @update:value="selectBgValueHandle"
+        />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="文字" :alone="true">
+      <setting-item>
+        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+  <collapse-item name="样式" :expanded="true">
+    <setting-item-box name="文字">
+      <setting-item name="字体大小">
+        <n-input-number v-model:value="optionData.fontSize" size="small" placeholder="字体大小"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="文字颜色">
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.textColor"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="位置x轴">
+      <setting-item name="字体位置x轴">
+        <n-input-number  v-model:value="optionData.x" size="small" placeholder="字体位置"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="位置y轴">
+      <setting-item name="字体位置y轴">
+        <n-input-number v-model:value="optionData.y" size="small" placeholder="字体位置"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+  <collapse-item name="右侧" :expanded="true">
+    <setting-item-box name="是否显示">
+      <setting-item name="">
+        <n-switch @change="handleChange" v-model:value="optionData.showRight"/>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="文字">
+      <setting-item name="字体大小">
+        <n-input-number v-model:value="optionData.textRightFontSize" size="small"
+                        placeholder="字体大小"></n-input-number>
+      </setting-item>
+      <setting-item name="字体位置x轴">
+        <n-input-number  v-model:value="optionData.xT" size="small" placeholder="字体位置"></n-input-number>
+      </setting-item>
+      <setting-item name="字体位置y轴">
+        <n-input-number v-model:value="optionData.yT" size="small" placeholder="字体位置"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="时间颜色">
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.textRightSizeColor"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import {PropType, ref} from 'vue'
+import {option} from './config'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import {SelectOption} from "naive-ui";
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const selectBgOptions = ref<Array<SelectOption>>([])
+
+const selectValue = ref('')
+
+//TODO待封装 成传文件夹名字获取下面所有图片
+const getFetchImages = () => {
+  const imagesModules = import.meta.globEager('@/assets/images/chart/headbackground/*')
+  for (const key in imagesModules) {
+    selectBgOptions.value.push({
+      label: imagesModules[key]?.default.slice(25),
+      value: imagesModules[key]?.default
+    })
+  }
+}
+getFetchImages()
+
+const selectBgValueHandle = (value: string) => {
+  selectValue.value = value
+  props.optionData.bgSrc = value
+}
+
+const handleChange = (value: boolean) => {
+  props.optionData.showRight = value
+}
+</script>

+import {ConfigType, PackagesCategoryEnum, ChartFrameEnum} from '@/packages/index.d'
+import {ChatCategoryEnum, ChatCategoryEnumName} from '../../index.d'
+
+export const LeftCenterRightHeadConfig: ConfigType = {
+    key: 'LeftCenterRightHead',
+    chartKey: 'VLeftCenterRightHead',
+    conKey: 'VCLeftCenterRightHead',
+    title: '通用头部',
+    category: ChatCategoryEnum.HEADCOMBINATION,
+    categoryName: ChatCategoryEnumName.HEADCOMBINATION,
+    package: PackagesCategoryEnum.COMPOSES,
+    chartFrame: ChartFrameEnum.COMMON,
+    image: 'left_center_rightHead.png',
+}

+<template>
+  <div class="go-text-box">
+    <n-grid :style="{'background-image': 'url('+option.configOption.bgSrc+')'}" class="go-n-grid" :x-gap="12" :y-gap="3"
+            :cols="3" layout-shift-disabled>
+      <n-grid-item>
+        <!--        占位-->
+        <div></div>
+      </n-grid-item>
+      <n-grid-item>
+        <span
+            style="position:relative"
+            :style="{ top:option.configOption.y+'px',marginLeft:option.configOption.x+'px',color: option.configOption.textColor, fontSize: option.configOption.fontSize + 'px' }">{{
+            option.configOption.dataset
+          }}</span>
+      </n-grid-item>
+      <n-grid-item>
+        <span style="position:relative" v-if="option.configOption.showRight"
+              :style="{ top:option.configOption.yT+'px',marginLeft:option.configOption.xT+'px',color: option.configOption.textRightSizeColor, fontSize: option.configOption.textRightFontSize + 'px' }">{{
+            newData
+          }}</span>
+      </n-grid-item>
+    </n-grid>
+  </div>
+</template>
+<script setup lang="ts">
+import {PropType, toRefs, shallowReactive, watch, onMounted, onUnmounted, ref} from 'vue'
+import {CreateComponentType} from '@/packages/index.d'
+import {useChartDataFetch} from '@/hooks'
+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 option = shallowReactive({
+  configOption
+})
+
+let yearMonthDay = ref('2021-2-3')
+
+let nowData = ref('08:00:00')
+
+let newData = ref('2021-2-3 08:00:00')
+
+let timer: any = null
+
+//默认设置宽高距离位置
+props.chartConfig.attr.w = 1920
+props.chartConfig.attr.h = 148
+props.chartConfig.attr.x = 0
+props.chartConfig.attr.y = 0
+
+watch(
+    () => props.chartConfig.option,
+    (newData: any) => {
+      option.configOption = newData
+    },
+    {
+      immediate: true,
+      deep: false
+    }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option.configOption = newData
+})
+
+
+//TODO待封装 这里和原作者时间通用获取当前时间代码一样
+onMounted(() => {
+//格式化当前时间
+  timer = setInterval(() => {
+    const
+        weeks = {
+          "0": '星期日',
+          "1": '星期一',
+          "2": '星期二',
+          "3": '星期三',
+          "4": '星期四',
+          "5": '星期五',
+          "6": '星期六',
+        }
+    const datetime = new Date()
+    const year = datetime.getFullYear()
+    const month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1
+    const date = datetime.getDate() < 10 ? '0' + datetime.getDate() : datetime.getDate()
+    const hh = datetime.getHours() // 时
+    const mm = datetime.getMinutes() // 分
+    const ss = datetime.getSeconds() // 分
+    let weekIndex = datetime.getDay();
+    let time = ''
+    if (hh < 10) time += '0'
+    time += hh + ':'
+    if (mm < 10) time += '0'
+    time += mm + ':'
+    if (ss < 10) time += '0'
+    time += ss
+    yearMonthDay.value = `${year}-${month}-${date}`
+    nowData.value = time
+    newData.value = yearMonthDay.value + ' ' + nowData.value + ' ' + weeks[weekIndex]
+  }, 500)
+})
+onUnmounted(() => {
+  clearInterval(timer)
+})
+
+</script>
+
+<style lang="scss" scoped>
+@include go('text-box') {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .n-gradient-text {
+    white-space: initial;
+  }
+}
+
+.light-green {
+  height: 108px;
+  background-color: rgba(0, 128, 0, 0.12);
+}
+
+.green {
+  height: 108px;
+  background-color: rgba(0, 128, 0, 0.24);
+}
+
+.go-n-grid {
+  background: url(@/assets/images/chart/headbackground/bg_top.png) center no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  font-size: 36px;
+  line-height: 90px;
+}
+</style>