Merge branch 'ft' into 'main_dev'

feat(packages/external): 重写部分柱状图和部分折线图，新增开启关闭动画效果和全屏效果

See merge request yunteng/thingskit-view!66

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { OverrideBarCommonConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+// 其它配置项比如新增（动画）
+const otherConfig = {
+  // 轮播动画
+  isCarousel: false
+}
+export const seriesItem = {
+  type: 'bar',
+  barWidth: 15,
+  label: {
+    show: true,
+    position: 'top',
+    color: '#fff',
+    fontSize: 12
+  },
+  itemStyle: {
+    color: null,
+    borderRadius: 2
+  }
+}
+export const option = {
+  ...otherConfig,
+  tooltip: {
+    show: true,
+    trigger: 'axis',
+    axisPointer: {
+      show: true,
+      type: 'shadow'
+    }
+  },
+  xAxis: {
+    show: true,
+    type: 'category'
+  },
+  yAxis: {
+    show: true,
+    type: 'value'
+  },
+  dataset: { ...dataJson },
+  series: [seriesItem, seriesItem]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideBarCommonConfig.key
+  public chartConfig = cloneDeep(OverrideBarCommonConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index + 1}`" :expanded="true">
+    <SettingItemBox name="图形">
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="item.barWidth"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="圆角">
+        <n-input-number v-model:value="item.itemStyle.borderRadius" :min="0" size="small"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="动画" :alone="true">
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.isCarousel" size="small"></n-switch>
+          <n-text>开启<n-text :depth="3">（将自动隐藏图例）</n-text></n-text>
+        </n-space>
+      </SettingItem>
+      <SettingItem>
+        <n-text :depth="3">无鼠标点击图例场景时，可强行打开图例</n-text>
+      </SettingItem>
+    </SettingItemBox>
+    <setting-item-box name="标签">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select
+          v-model:value="item.label.position"
+          :options="[
+            { label: 'top', value: 'top' },
+            { label: 'left', value: 'left' },
+            { label: 'right', value: 'right' },
+            { label: 'bottom', value: 'bottom' }
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

+{
+  "dimensions": ["product", "data1", "data2"],
+  "source": [
+    {
+      "product": "Mon",
+      "data1": 120,
+      "data2": 130
+    },
+    {
+      "product": "Tue",
+      "data1": 200,
+      "data2": 130
+    },
+    {
+      "product": "Wed",
+      "data1": 150,
+      "data2": 312
+    },
+    {
+      "product": "Thu",
+      "data1": 80,
+      "data2": 268
+    },
+    {
+      "product": "Fri",
+      "data1": 70,
+      "data2": 155
+    },
+    {
+      "product": "Sat",
+      "data1": 110,
+      "data2": 117
+    },
+    {
+      "product": "Sun",
+      "data1": 130,
+      "data2": 160
+    }
+  ]
+}

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Charts/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideBarCommon', true)
+
+export const OverrideBarCommonConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '柱状图动画',
+  category: ChatCategoryEnum.BAR,
+  categoryName: ChatCategoryEnumName.BAR,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'bar_x.png'
+}

+<template>
+  <v-chart
+    ref="vChartRef"
+    :init-options="initOptions"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    :update-options="{
+      replaceMerge: replaceMergeArr
+    }"
+    autoresize
+    @mouseover="handleHighlight"
+    @mouseout="handleDownplay"
+  >
+  </v-chart>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, computed, watch, PropType, onMounted } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { BarChart } from 'echarts/charts'
+import config, { includes, seriesItem } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import isObject from 'lodash/isObject'
+import dataJson from './data.json'
+import { isFullScreen } from '../../utls/isFullScreen'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
+
+const replaceMergeArr = ref<string[]>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const toolBoxOption = {
+  show: true,
+  right: 20,
+  feature: {
+    myFullButton: {
+      show: true,
+      title: '全屏查看',
+      icon: 'path://M733.549304 0l116.434359 116.23452-226.402521 226.40252 57.053835 57.068109 226.459617-226.445342 120.616689 120.41685V0H733.549304zM689.513507 619.855586l-57.068108 57.068109 224.232847 224.232847-122.64362 122.843458h293.676657V729.838022l-114.007751 114.207588-224.190025-224.190024zM338.197775 404.144414l57.068109-57.068109L171.033037 122.843458 293.676657 0H0v294.161978l114.022025-114.207588 224.17575 224.190024zM347.076305 624.294851L120.616689 850.754468 0 730.323343v293.676657h294.161978l-116.420084-116.23452 226.40252-226.40252-57.068109-57.068109z',
+      onclick: () => {
+        const getEchartDom = vChartRef.value?.getDom()
+        const domName = document.getElementById(getEchartDom.id) as any
+        const htmlName = document.querySelector('html') as any
+        isFullScreen(domName, htmlName)
+      }
+    }
+  }
+}
+props.chartConfig.option = {
+  ...props.chartConfig.option,
+  ...{ toolbox: toolBoxOption }
+}
+
+// dataset 无法变更条数的补丁
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: { dimensions: any }, oldData) => {
+    try {
+      if (!isObject(newData) || !('dimensions' in newData)) return
+      if (Array.isArray(newData?.dimensions)) {
+        const seriesArr = []
+        for (let i = 0; i < newData.dimensions.length - 1; i++) {
+          seriesArr.push(seriesItem)
+        }
+        replaceMergeArr.value = ['series']
+        props.chartConfig.option.series = seriesArr
+        nextTick(() => {
+          replaceMergeArr.value = []
+        })
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+let seriesDataNum = -1
+let seriesDataMaxLength = 0
+let intervalInstance: any = null
+//轮播时长
+const duration = 1500
+
+// 会重新选择需要选中和展示的数据
+const handleSeriesData = () => {
+  if (seriesDataNum > -1) {
+    vChartRef.value?.dispatchAction({
+      type: 'downplay',
+      dataIndex: seriesDataNum
+    })
+  }
+  seriesDataNum = seriesDataNum >= seriesDataMaxLength - 1 ? 0 : seriesDataNum + 1
+  vChartRef.value?.dispatchAction({
+    type: 'showTip',
+    seriesIndex: 0,
+    dataIndex: seriesDataNum
+  })
+}
+
+// 新增轮播
+const addPieInterval = (newData?: typeof dataJson, skipPre = false) => {
+  if (!skipPre && !Array.isArray(newData?.source)) return
+  if (!skipPre) seriesDataMaxLength = newData?.source.length || 0
+  clearInterval(intervalInstance)
+  intervalInstance = setInterval(() => {
+    handleSeriesData()
+  }, duration)
+}
+
+// 取消轮播
+const clearPieInterval = () => {
+  vChartRef.value?.dispatchAction({
+    type: 'hideTip',
+    seriesIndex: 0,
+    dataIndex: seriesDataNum
+  })
+  vChartRef.value?.dispatchAction({
+    type: 'downplay',
+    dataIndex: seriesDataNum
+  })
+  clearInterval(intervalInstance)
+  intervalInstance = null
+}
+
+// 处理鼠标聚焦高亮内容
+const handleHighlight = () => {
+  clearPieInterval()
+}
+
+// 处理鼠标取消悬浮
+const handleDownplay = () => {
+  if (props.chartConfig.option.isCarousel && !intervalInstance) {
+    // 恢复轮播
+    addPieInterval(undefined, true)
+  }
+}
+
+watch(
+  () => props.chartConfig.option.isCarousel,
+  newData => {
+    if (newData) {
+      addPieInterval(undefined, true)
+      props.chartConfig.option.legend.show = false
+    } else {
+      props.chartConfig.option.legend.show = true
+      clearPieInterval()
+    }
+  }
+)
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
+  // addPieInterval(newData)
+})
+
+onMounted(() => {
+  seriesDataMaxLength = dataJson.source.length
+  if (props.chartConfig.option.isCarousel) {
+    addPieInterval(undefined, true)
+  }
+})
+</script>

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { OverrideLineCommonConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+export const seriesItem = {
+  type: 'line',
+  label: {
+    show: true,
+    position: 'top',
+    color: '#fff',
+    fontSize: 12
+  },
+  symbolSize: 5, //设定实心点的大小
+  itemStyle: {
+    color: null,
+    borderRadius: 0
+  },
+  lineStyle: {
+    type: 'solid',
+    width: 3,
+    color: null
+  }
+}
+// 其它配置项比如新增（动画）
+const otherConfig = {
+  // 轮播动画
+  isCarousel: false,
+}
+export const option = {
+  ...otherConfig,
+  tooltip: {
+    show: true,
+    trigger: 'axis',
+    axisPointer: {
+      type: 'line'
+    }
+  },
+  xAxis: {
+    show: true,
+    type: 'category'
+  },
+  yAxis: {
+    show: true,
+    type: 'value'
+  },
+  dataset: { ...dataJson },
+  series: [seriesItem, seriesItem]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = OverrideLineCommonConfig.key
+  public chartConfig = cloneDeep(OverrideLineCommonConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`折线图-${index + 1}`" :expanded="true">
+    <SettingItemBox name="线条">
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="item.lineStyle.width"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="类型">
+        <n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="动画" :alone="true">
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.isCarousel" size="small"></n-switch>
+          <n-text>开启<n-text :depth="3">（将自动隐藏图例）</n-text></n-text>
+        </n-space>
+      </SettingItem>
+      <SettingItem>
+        <n-text :depth="3">无鼠标点击图例场景时，可强行打开图例</n-text>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="实心点">
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="item.symbolSize"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <setting-item-box name="标签">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select
+          v-model:value="item.label.position"
+          :options="[
+            { label: 'top', value: 'top' },
+            { label: 'left', value: 'left' },
+            { label: 'right', value: 'right' },
+            { label: 'bottom', value: 'bottom' }
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { lineConf } from '@/packages/chartConfiguration/echarts/index'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

+{
+  "dimensions": ["product", "data1", "data2"],
+  "source": [
+    {
+      "product": "Mon",
+      "data1": 120,
+      "data2": 130
+    },
+    {
+      "product": "Tue",
+      "data1": 200,
+      "data2": 130
+    },
+    {
+      "product": "Wed",
+      "data1": 150,
+      "data2": 312
+    },
+    {
+      "product": "Thu",
+      "data1": 80,
+      "data2": 268
+    },
+    {
+      "product": "Fri",
+      "data1": 70,
+      "data2": 155
+    },
+    {
+      "product": "Sat",
+      "data1": 110,
+      "data2": 117
+    },
+    {
+      "product": "Sun",
+      "data1": 130,
+      "data2": 160
+    }
+  ]
+}

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Charts/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideLineCommon', true)
+
+export const OverrideLineCommonConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '折线图动画',
+  category: ChatCategoryEnum.LINE,
+  categoryName: ChatCategoryEnumName.LINE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'line.png'
+}

+<template>
+  <v-chart
+    ref="vChartRef"
+    :init-options="initOptions"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    :update-options="{
+      replaceMerge: replaceMergeArr
+    }"
+    autoresize
+    @mouseover="handleHighlight"
+    @mouseout="handleDownplay"
+  >
+  </v-chart>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed, watch, ref, nextTick, onMounted } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart } from 'echarts/charts'
+import config, { includes, seriesItem } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import isObject from 'lodash/isObject'
+import dataJson from './data.json'
+import { isFullScreen } from '../../utls/isFullScreen'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
+
+const replaceMergeArr = ref<string[]>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const toolBoxOption = {
+  show: true,
+  right: 20,
+  feature: {
+    myFullButton: {
+      show: true,
+      title: '全屏查看',
+      icon: 'path://M733.549304 0l116.434359 116.23452-226.402521 226.40252 57.053835 57.068109 226.459617-226.445342 120.616689 120.41685V0H733.549304zM689.513507 619.855586l-57.068108 57.068109 224.232847 224.232847-122.64362 122.843458h293.676657V729.838022l-114.007751 114.207588-224.190025-224.190024zM338.197775 404.144414l57.068109-57.068109L171.033037 122.843458 293.676657 0H0v294.161978l114.022025-114.207588 224.17575 224.190024zM347.076305 624.294851L120.616689 850.754468 0 730.323343v293.676657h294.161978l-116.420084-116.23452 226.40252-226.40252-57.068109-57.068109z',
+      onclick: () => {
+        const getEchartDom = vChartRef.value?.getDom()
+        const domName = document.getElementById(getEchartDom.id) as any
+        const htmlName = document.querySelector('html') as any
+        isFullScreen(domName, htmlName)
+      }
+    }
+  }
+}
+props.chartConfig.option = {
+  ...props.chartConfig.option,
+  ...{ toolbox: toolBoxOption }
+}
+
+// dataset 无法变更条数的补丁
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: { dimensions: any }, oldData) => {
+    try {
+      if (!isObject(newData) || !('dimensions' in newData)) return
+      if (Array.isArray(newData?.dimensions)) {
+        const seriesArr = []
+        for (let i = 0; i < newData.dimensions.length - 1; i++) {
+          seriesArr.push(seriesItem)
+        }
+        replaceMergeArr.value = ['series']
+        props.chartConfig.option.series = seriesArr
+        nextTick(() => {
+          replaceMergeArr.value = []
+        })
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+let seriesDataNum = -1
+let seriesDataMaxLength = 0
+let intervalInstance: any = null
+const duration = 1500
+
+// 会重新选择需要选中和展示的数据
+const handleSeriesData = () => {
+  if (seriesDataNum > -1) {
+    vChartRef.value?.dispatchAction({
+      type: 'downplay',
+      dataIndex: seriesDataNum
+    })
+  }
+  seriesDataNum = seriesDataNum >= seriesDataMaxLength - 1 ? 0 : seriesDataNum + 1
+  vChartRef.value?.dispatchAction({
+    type: 'showTip',
+    seriesIndex: 0,
+    dataIndex: seriesDataNum
+  })
+}
+
+// 新增轮播
+const addPieInterval = (newData?: typeof dataJson, skipPre = false) => {
+  if (!skipPre && !Array.isArray(newData?.source)) return
+  if (!skipPre) seriesDataMaxLength = newData?.source.length || 0
+  clearInterval(intervalInstance)
+  intervalInstance = setInterval(() => {
+    handleSeriesData()
+  }, duration)
+}
+
+// 取消轮播
+const clearPieInterval = () => {
+  vChartRef.value?.dispatchAction({
+    type: 'hideTip',
+    seriesIndex: 0,
+    dataIndex: seriesDataNum
+  })
+  vChartRef.value?.dispatchAction({
+    type: 'downplay',
+    dataIndex: seriesDataNum
+  })
+  clearInterval(intervalInstance)
+  intervalInstance = null
+}
+
+// 处理鼠标聚焦高亮内容
+const handleHighlight = () => {
+  clearPieInterval()
+}
+
+// 处理鼠标取消悬浮
+const handleDownplay = () => {
+  if (props.chartConfig.option.isCarousel && !intervalInstance) {
+    // 恢复轮播
+    addPieInterval(undefined, true)
+  }
+}
+
+watch(
+  () => props.chartConfig.option.isCarousel,
+  newData => {
+    if (newData) {
+      addPieInterval(undefined, true)
+      props.chartConfig.option.legend.show = false
+    } else {
+      props.chartConfig.option.legend.show = true
+      clearPieInterval()
+    }
+  }
+)
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
+  // addPieInterval(newData)
+})
+
+onMounted(() => {
+  seriesDataMaxLength = dataJson.source.length
+  if (props.chartConfig.option.isCarousel) {
+    addPieInterval(undefined, true)
+  }
+})
+</script>

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { OverrideLineGradientsConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import { graphic } from 'echarts/core'
+import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+
+// 其它配置项比如新增（动画）
+const otherConfig = {
+  // 轮播动画
+  isCarousel: false,
+}
+const option = {
+  ...otherConfig,
+  tooltip: {
+    show: true,
+    trigger: 'axis',
+    axisPointer: {
+      type: 'line'
+    }
+  },
+  xAxis: {
+    show: true,
+    type: 'category'
+  },
+  yAxis: {
+    show: true,
+    type: 'value'
+  },
+  dataset: { ...dataJson },
+  series: [
+    {
+      type: 'line',
+      smooth: false,
+      symbolSize: 5, //设定实心点的大小
+      label: {
+        show: true,
+        position: 'top',
+        color: '#fff',
+        fontSize: 12
+      },
+      lineStyle: {
+        width: 3,
+        type: 'solid'
+      },
+      areaStyle: {
+        opacity: 0.8,
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: chartColorsSearch[defaultTheme][3]
+          },
+          {
+            offset: 1,
+            color: 'rgba(0,0,0,0)'
+          }
+        ])
+      }
+    },
+    {
+      type: 'line',
+      smooth: false,
+      label: {
+        show: true,
+        position: 'top',
+        color: '#fff',
+        fontSize: 12
+      },
+      lineStyle: {
+        width: 3,
+        type: 'solid'
+      },
+      areaStyle: {
+        opacity: 0.8,
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: chartColorsSearch[defaultTheme][4]
+          },
+          {
+            offset: 1,
+            color: 'rgba(0,0,0,0)'
+          }
+        ])
+      }
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = OverrideLineGradientsConfig.key
+  public chartConfig = cloneDeep(OverrideLineGradientsConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem
+    v-for="(item, index) in seriesList"
+    :key="index"
+    name="单折线面积图"
+    :expanded="true"
+  >
+    <SettingItemBox name="线条">
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="item.lineStyle.width"
+          :min="1"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="类型">
+        <n-select
+          v-model:value="item.lineStyle.type"
+          size="small"
+          :options="lineConf.lineStyle.type"
+        ></n-select>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="动画" :alone="true">
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.isCarousel" size="small"></n-switch>
+          <n-text>开启<n-text :depth="3">（将自动隐藏图例）</n-text></n-text>
+        </n-space>
+      </SettingItem>
+      <SettingItem>
+        <n-text :depth="3">无鼠标点击图例场景时，可强行打开图例</n-text>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="实心点">
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="item.symbolSize"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <setting-item-box name="标签">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number
+          v-model:value="item.label.fontSize"
+          size="small"
+          :min="1"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.label.color"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select
+          v-model:value="item.label.position"
+          :options="[
+            { label: 'top', value: 'top' },
+            { label: 'left', value: 'left' },
+            { label: 'right', value: 'right' },
+            { label: 'bottom', value: 'bottom' },
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { lineConf } from '@/packages/chartConfiguration/echarts/index'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import {
+  GlobalSetting,
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  },
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

+{
+  "dimensions": ["product", "data1", "data2"],
+  "source": [
+    {
+      "product": "Mon",
+      "data1": 120,
+      "data2": 130
+    },
+    {
+      "product": "Tue",
+      "data1": 200,
+      "data2": 130
+    },
+    {
+      "product": "Wed",
+      "data1": 150,
+      "data2": 312
+    },
+    {
+      "product": "Thu",
+      "data1": 80,
+      "data2": 268
+    },
+    {
+      "product": "Fri",
+      "data1": 70,
+      "data2": 155
+    },
+    {
+      "product": "Sat",
+      "data1": 110,
+      "data2": 117
+    },
+    {
+      "product": "Sun",
+      "data1": 130,
+      "data2": 160
+    }
+  ]
+}

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Charts/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideLineGradients', true)
+
+export const OverrideLineGradientsConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '双折线渐变面积图动画',
+  category: ChatCategoryEnum.LINE,
+  categoryName: ChatCategoryEnumName.LINE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'line_gradient.png'
+}

+<template>
+  <v-chart
+    ref="vChartRef"
+    :init-options="initOptions"
+    :theme="themeColor"
+    :option="option.value"
+    :manual-update="isPreview()"
+    autoresize
+    @mouseover="handleHighlight"
+    @mouseout="handleDownplay"
+  ></v-chart>
+</template>
+
+<script setup lang="ts">
+import { reactive, watch, PropType, onMounted } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use, graphic } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart } from 'echarts/charts'
+import config, { includes } from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import { useChartDataFetch } from '@/hooks'
+import { isPreview, colorGradientCustomMerge } from '@/utils'
+import dataJson from './data.json'
+import { isFullScreen } from '../../utls/isFullScreen'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
+const chartEditStore = useChartEditStore()
+
+const option = reactive({
+  value: {}
+})
+const toolBoxOption = {
+  show: true,
+  right: 20,
+  feature: {
+    myFullButton: {
+      show: true,
+      title: '全屏查看',
+      icon: 'path://M733.549304 0l116.434359 116.23452-226.402521 226.40252 57.053835 57.068109 226.459617-226.445342 120.616689 120.41685V0H733.549304zM689.513507 619.855586l-57.068108 57.068109 224.232847 224.232847-122.64362 122.843458h293.676657V729.838022l-114.007751 114.207588-224.190025-224.190024zM338.197775 404.144414l57.068109-57.068109L171.033037 122.843458 293.676657 0H0v294.161978l114.022025-114.207588 224.17575 224.190024zM347.076305 624.294851L120.616689 850.754468 0 730.323343v293.676657h294.161978l-116.420084-116.23452 226.40252-226.40252-57.068109-57.068109z',
+      onclick: () => {
+        const getEchartDom = vChartRef.value?.getDom()
+        const domName = document.getElementById(getEchartDom.id) as any
+        const htmlName = document.querySelector('html') as any
+        isFullScreen(domName, htmlName)
+      }
+    }
+  }
+}
+props.chartConfig.option = {
+  ...props.chartConfig.option,
+  ...{ toolbox: toolBoxOption }
+}
+
+// 渐变色处理
+watch(
+  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
+  (newColor: keyof typeof chartColorsSearch) => {
+    try {
+      if (!isPreview()) {
+        const themeColor =
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
+          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
+        props.chartConfig.option.series.forEach((value: any, index: number) => {
+          value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: themeColor[3 + index]
+            },
+            {
+              offset: 1,
+              color: 'rgba(0,0,0, 0)'
+            }
+          ])
+        })
+      }
+      option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+      props.chartConfig.option = option.value
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+watch(
+  () => props.chartConfig.option.dataset,
+  () => {
+    option.value = props.chartConfig.option
+  }
+)
+let seriesDataNum = -1
+let seriesDataMaxLength = 0
+let intervalInstance: any = null
+const duration = 1500
+
+// 会重新选择需要选中和展示的数据
+const handleSeriesData = () => {
+  if (seriesDataNum > -1) {
+    vChartRef.value?.dispatchAction({
+      type: 'downplay',
+      dataIndex: seriesDataNum
+    })
+  }
+  seriesDataNum = seriesDataNum >= seriesDataMaxLength - 1 ? 0 : seriesDataNum + 1
+  vChartRef.value?.dispatchAction({
+    type: 'showTip',
+    seriesIndex: 0,
+    dataIndex: seriesDataNum
+  })
+}
+
+// 新增轮播
+const addPieInterval = (newData?: typeof dataJson, skipPre = false) => {
+  if (!skipPre && !Array.isArray(newData?.source)) return
+  if (!skipPre) seriesDataMaxLength = newData?.source.length || 0
+  clearInterval(intervalInstance)
+  intervalInstance = setInterval(() => {
+    handleSeriesData()
+  }, duration)
+}
+
+// 取消轮播
+const clearPieInterval = () => {
+  vChartRef.value?.dispatchAction({
+    type: 'hideTip',
+    seriesIndex: 0,
+    dataIndex: seriesDataNum
+  })
+  vChartRef.value?.dispatchAction({
+    type: 'downplay',
+    dataIndex: seriesDataNum
+  })
+  clearInterval(intervalInstance)
+  intervalInstance = null
+}
+
+// 处理鼠标聚焦高亮内容
+const handleHighlight = () => {
+  clearPieInterval()
+}
+
+// 处理鼠标取消悬浮
+const handleDownplay = () => {
+  if (props.chartConfig.option.isCarousel && !intervalInstance) {
+    // 恢复轮播
+    addPieInterval(undefined, true)
+  }
+}
+
+watch(
+  () => props.chartConfig.option.isCarousel,
+  newData => {
+    if (newData) {
+      addPieInterval(undefined, true)
+      props.chartConfig.option.legend.show = false
+    } else {
+      props.chartConfig.option.legend.show = true
+      clearPieInterval()
+    }
+  }
+)
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
+  // addPieInterval(newData)
+})
+
+onMounted(() => {
+  seriesDataMaxLength = dataJson.source.length
+  if (props.chartConfig.option.isCarousel) {
+    addPieInterval(undefined, true)
+  }
+})
+</script>

+export const isFullScreen = (domName: any, htmlName: any) => {
+  const isFullScreen = document.fullscreenElement
+  const currentDatkTheme = htmlName.getAttribute('data-theme')
+
+  if (isFullScreen) {
+    console.log('退出全屏')
+    if (document.exitFullscreen) {
+      document.exitFullscreen()
+      domName.style.background = ''
+    }
+  } else {
+    console.log('进入全屏')
+    if (domName.requestFullscreen) {
+      domName.requestFullscreen()
+      domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
+    } else if (domName.mozRequestFullScreen) {
+      domName.mozRequestFullScreen()
+      domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
+    } else if (domName.webkitRequestFullscreen) {
+      domName.webkitRequestFullscreen()
+      domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
+    } else if (domName.msRequestFullscreen) {
+      domName.msRequestFullscreen()
+      domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
+    }
+  }
+}

@@ -13,11 +13,6 @@
         </n-button>
       </setting-item>
     </setting-item-box>
-    <setting-item-box name="排布">
-      <setting-item>
-        <n-select v-model:value="optionData.displayMode" size="small" :options="displayModeOptions"></n-select>
-      </setting-item>
-    </setting-item-box>
   </CollapseItem>
 </template>
 
@@ -32,20 +27,4 @@ defineProps({
     required: true
   }
 })
-
-// 旋转方式
-const displayModeOptions = [
-  {
-    value: 'singleGrid',
-    label: '默认'
-  },
-  {
-    value: 'fourGrid',
-    label: '四宫格'
-  },
-  {
-    value: 'nineGrid',
-    label: '九宫格'
-  }
-]
 </script>

@@ -8,7 +8,7 @@ export const CameraConfig: ConfigType = {
   key,
   chartKey,
   conKey,
-  title: '摄像头',
+  title: '多个摄像头',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: EPackagesCategoryEnum.COMPOSES,

+<template>
+  <video
+    crossOrigin="anonymous"
+    :id="`my-player${index}`"
+    ref="videoRef"
+    class="video-js my-video vjs-theme-city vjs-big-play-centered"
+  >
+    <source :src="sourceSrc" />
+  </video>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, onUnmounted, watch } from 'vue'
+import videojs from 'video.js'
+import type { VideoJsPlayerOptions } from 'video.js'
+import 'video.js/dist/video-js.min.css'
+
+const props = defineProps({
+  sourceSrc: {
+    type: String
+  },
+  name: {
+    type: String
+  },
+  avatar: {
+    type: String
+  },
+  index: {
+    type: Number
+  }
+})
+
+// video标签
+const videoRef = ref<HTMLElement | null>(null)
+
+// video实例对象
+let videoPlayer: videojs.Player | null = null
+
+//options配置
+const options: VideoJsPlayerOptions = {
+  language: 'zh-CN', // 设置语言
+  controls: true, // 是否显示控制条
+  preload: 'auto', // 预加载
+  autoplay: true, // 是否自动播放
+  fluid: false, // 自适应宽高
+  poster: props?.avatar || '',
+  src: props?.sourceSrc || '', // 要嵌入的视频源的源 URL
+  muted: true,
+  userActions: {
+    hotkeys: true
+  }
+}
+
+// 初始化videojs
+const initVideo = () => {
+  if (videoRef.value) {
+    // 创建 video 实例
+    videoPlayer = videojs(videoRef.value, options)
+  }
+}
+
+watch(
+  () => props.sourceSrc,
+  (newData: any) => {
+    // props.sourceSrc = newData
+    videoPlayer?.src(newData) as any
+    videoPlayer?.play()
+  },
+  {
+    immediate: true
+  }
+)
+
+onMounted(() => {
+  initVideo()
+})
+
+onUnmounted(() => {
+  handleVideoDispose()
+})
+
+//播放
+const handleVideoPlay = () => videoPlayer?.play()
+
+const handleVideoDispose = () => videoPlayer?.dispose() && videoPlayer?.pause()
+//暂停
+defineExpose({
+  handleVideoPlay,
+  handleVideoDispose
+})
+</script>
+
+<style lang="scss" scoped>
+.my-video {
+  width: 100%;
+  height: 100%;
+}
+</style>

+import CameraItem from './CameraItem.vue'
+
+export { CameraItem }

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { SingleCameraConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  dataset: [
+    {
+      url: ''
+    }
+  ] as any,
+  // 自动播放的间隔（ms）
+  interval: 5000,
+  autoplay: true,
+  effect: 'slide',
+  displayMode: 'singleGrid'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = SingleCameraConfig.key
+  public chartConfig = cloneDeep(SingleCameraConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <CollapseItem name="播放器配置" :expanded="true">
+    <setting-item-box name="源地址" :alone="true">
+      <setting-item v-for="(item, index) in optionData.dataset" :key="index">
+        <n-input-group>
+          <n-input v-model:value="item.url" size="small" placeholder="请输入源地址"></n-input>
+        </n-input-group>
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+</script>

+import { ChartFrameEnum, ConfigType } from '@/packages/index.d'
+import { EPackagesCategoryEnum } from '@/packages/components/external/types'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, chartKey, conKey } = useWidgetKey('SingleCamera')
+export const SingleCameraConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '单个摄像头',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: EPackagesCategoryEnum.COMPOSES,
+  chartFrame: ChartFrameEnum.NAIVE_UI,
+  image: 'camera.png'
+}

+<template>
+  <div class="banner-box" ref="root">
+    <n-grid x-gap="12" :y-gap="12" :cols="computedCols">
+      <n-gi v-for="(item, index) in option.dataset" :key="index + item">
+        <div class="camera-container">
+          <CameraItem
+            ref="cameraRef"
+            :name="item.name"
+            :avatar="item.avatar"
+            :key="item + index"
+            :sourceSrc="item.url"
+            :index="index"
+          />
+        </div>
+      </n-gi>
+    </n-grid>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs, watch, shallowReactive, ref, computed } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import 'video.js/dist/video-js.min.css'
+import { option as configOption } from './config'
+import { CameraItem } from './components'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { h } = toRefs(props.chartConfig.attr)
+
+const responsiveComputeValue = ref(0)
+
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+
+const computedCols = computed(() => {
+  if (option.dataset.length <= 1) return 1
+  if (option.dataset.length <= 4) return 2
+  return 3
+})
+
+const cameraRef = ref<InstanceType<typeof CameraItem>>()
+
+const responsive = (value: number) => {
+  responsiveComputeValue.value = value
+  if (option.dataset.length <= 2) responsiveComputeValue.value = value
+  if (option.dataset.length > 2 && option.dataset.length <= 4) responsiveComputeValue.value = value / 2.03
+  if (option.dataset.length > 4 && option.dataset.length <= 9) responsiveComputeValue.value = value / 3.1
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    option.dataset = newData
+    responsive(h.value)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+watch(
+  () => h.value,
+  newData => responsive(newData),
+  {
+    immediate: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.banner-box {
+  .camera-container {
+    height: v-bind('`${responsiveComputeValue}px`');
+  }
+}
+</style>

@@ -2,6 +2,7 @@ import { Title1Config } from './Title1/index'
 import { Title2Config } from './Title2/index'
 import { Title3Config } from './Title3/index'
 import { CameraConfig } from './Camera/index'
+import { SingleCameraConfig } from './SingleCamera/index'
 import { ThreeDimensionalConfig } from './ThreeDimensional/index'
 
-export default [Title1Config, Title2Config, Title3Config, CameraConfig, ThreeDimensionalConfig]
+export default [Title1Config, Title2Config, Title3Config, CameraConfig, SingleCameraConfig, ThreeDimensionalConfig]

@@ -23,19 +23,19 @@ export const enum areaEnum {
 export const weatherTextMapImg = [
   {
     text: '晴',
-    img: '/large-designer/src/assets/external/weather/clearDay.png'
+    img: 'src/assets/external/weather/clearDay.png'
   },
   {
     text: '多云',
-    img: '/large-designer/src/assets/external/weather/cloudy.png'
+    img: 'src/assets/external/weather/cloudy.png'
   },
   {
     text: '阴',
-    img: '/large-designer/src/assets/external/weather/cloudyDay.png'
+    img: 'src/assets/external/weather/cloudyDay.png'
   },
   {
     text: '小雨',
-    img: '/large-designer/src/assets/external/weather/lightRain.png'
+    img: 'src/assets/external/weather/lightRain.png'
   }
 ]
 

@@ -4,7 +4,7 @@ export const useUtils = () => {
   const loadWeatherImg = (text: string) => {
     return (
       weatherTextMapImg.find((item: any) => item.text === text)?.img ||
-      '/large-designer/src/assets/external/weather/clearDay.png'
+      '/src/assets/external/weather/clearDay.png'
     )
   }
 

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { OverrideTextCommonConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export enum WritingModeEnum {
+  HORIZONTAL = '水平',
+  VERTICAL = '垂直'
+}
+
+export const WritingModeObject = {
+  [WritingModeEnum.HORIZONTAL]: 'horizontal-tb',
+  [WritingModeEnum.VERTICAL]: 'vertical-rl'
+}
+
+export enum FontWeightEnum {
+  NORMAL = '常规',
+  BOLD = '加粗'
+}
+
+export const FontWeightObject = {
+  [FontWeightEnum.NORMAL]: 'normal',
+  [FontWeightEnum.BOLD]: 'bold'
+}
+
+export const option = {
+  link: '',
+  linkHead: 'http://',
+  dataset: '我是文本',
+  fontSize: 20,
+  fontColor: '#ffffff',
+  paddingX: 10,
+  paddingY: 10,
+  textAlign: 'center', // 水平对齐方式
+  fontWeight: 'normal',
+
+  // 边框
+  borderWidth: 0,
+  borderColor: '#ffffff',
+  borderRadius: 5,
+
+  // 字间距
+  letterSpacing: 5,
+  writingMode: 'horizontal-tb',
+  backgroundColor: '#00000000',
+
+  //跳转方式
+  linkMethod: 'default'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideTextCommonConfig.key
+  public chartConfig = cloneDeep(OverrideTextCommonConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="信息" :expanded="true">
+    <setting-item-box name="文字" :alone="true">
+      <setting-item>
+        <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-input-group>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="跳转方式" :alone="true">
+      <setting-item>
+        <n-input-group>
+          <n-select
+            v-model:value="optionData.linkMethod"
+            size="small"
+            :style="{ width: '80%' }"
+            :options="linkMethodOptions"
+          />
+          <n-button
+            :disabled="!optionData.linkMethod"
+            secondary
+            size="small"
+            @click="handleLinkClick(optionData.linkMethod)"
+            >跳转</n-button
+          >
+        </n-input-group>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+
+  <collapse-item name="样式" :expanded="true">
+    <setting-item-box name="文字">
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.fontColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="字体大小">
+        <n-input-number v-model:value="optionData.fontSize" size="small" placeholder="字体大小"></n-input-number>
+      </setting-item>
+      <setting-item name="字体粗细">
+        <n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" />
+      </setting-item>
+      <setting-item name="X轴内边距">
+        <n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number>
+      </setting-item>
+      <setting-item name="Y轴内边距">
+        <n-input-number v-model:value="optionData.paddingY" size="small" placeholder="输入内边距"></n-input-number>
+      </setting-item>
+
+      <setting-item name="水平对齐">
+        <n-select v-model:value="optionData.textAlign" size="small" :options="textAlignOptions" />
+      </setting-item>
+      <setting-item name="文本方向">
+        <n-select v-model:value="optionData.writingMode" size="small" :options="verticalOptions" />
+      </setting-item>
+
+      <setting-item name="字间距">
+        <n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="边框">
+      <setting-item name="宽度">
+        <n-input-number
+          v-model:value="optionData.borderWidth"
+          size="small"
+          :min="0"
+          placeholder="宽度"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.borderColor"></n-color-picker>
+      </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>
+
+    <setting-item-box name="背景" :alone="true">
+      <setting-item name="背景颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backgroundColor"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option, WritingModeEnum, WritingModeObject, FontWeightEnum, FontWeightObject } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const textAlignOptions = [
+  { label: '左对齐', value: 'start' },
+  { label: '居中', value: 'center' },
+  { label: '右对齐', value: 'end' }
+]
+
+const linkMethodOptions = [
+  { label: '默认', value: 'default' },
+  { label: '新开窗口', value: 'open' }
+]
+
+const verticalOptions = [
+  {
+    label: WritingModeEnum.HORIZONTAL,
+    value: WritingModeObject[WritingModeEnum.HORIZONTAL]
+  },
+  {
+    label: WritingModeEnum.VERTICAL,
+    value: WritingModeObject[WritingModeEnum.VERTICAL]
+  }
+]
+const fontWeightOptions = [
+  {
+    label: FontWeightEnum.NORMAL,
+    value: FontWeightObject[FontWeightEnum.NORMAL]
+  },
+  {
+    label: FontWeightEnum.BOLD,
+    value: FontWeightObject[FontWeightEnum.BOLD]
+  }
+]
+const handleLinkClick = (target: string) => {
+  const hrefStr = props.optionData.linkHead + props.optionData.link
+  if (target === 'open') window.open(hrefStr)
+  else window.location.href = hrefStr
+}
+const linkHeadOptions = [
+  { label: 'http://', value: 'http://' },
+  { label: 'https://', value: 'https://' }
+]
+</script>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideTextCommon', true)
+
+export const OverrideTextCommonConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义文字',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,        
+  image: 'text_static.png'
+}

+<template>
+  <div class="go-text-box">
+    <div class="content">
+      <span style="cursor: pointer" v-if="link" @click="click">{{ option.dataset }}</span>
+      <span v-else>{{ option.dataset }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch } 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 & typeof option>,
+    required: true
+  }
+})
+
+const {
+  linkHead,
+  link,
+  fontColor,
+  fontSize,
+  letterSpacing,
+  paddingY,
+  paddingX,
+  textAlign,
+  borderWidth,
+  borderColor,
+  borderRadius,
+  writingMode,
+  backgroundColor,
+  fontWeight,
+  linkMethod
+} = toRefs(props.chartConfig.option)
+
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+
+// 手动更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
+  option.dataset = newData
+})
+
+//打开链接
+const click = () => {
+  const hrefStr = linkHead.value + link.value
+  if (linkMethod.value === 'open') window.open(hrefStr)
+  else window.location.href = hrefStr
+}
+</script>
+
+<style lang="scss" scoped>
+@include go('text-box') {
+  display: flex;
+  align-items: center;
+  justify-content: v-bind('textAlign');
+
+  .content {
+    color: v-bind('fontColor');
+    padding: v-bind('`${paddingY}px ${paddingX}px`');
+    font-size: v-bind('fontSize + "px"');
+    letter-spacing: v-bind('letterSpacing + "px"');
+    writing-mode: v-bind('writingMode');
+    font-weight: v-bind('fontWeight');
+    border-style: solid;
+    border-width: v-bind('borderWidth + "px"');
+    border-radius: v-bind('borderRadius + "px"');
+    border-color: v-bind('borderColor');
+
+    background-color: v-bind('backgroundColor');
+  }
+}
+</style>

@@ -8,6 +8,10 @@ import { OverrideCarouselConfig } from '@/packages/components/external/Informati
 import { OverrideSelectConfig } from '@/packages/components/external/Informations/Mores/OverrideSelect'
 import { OverrideInputsDateConfig } from '@/packages/components/external/Informations/Mores/OverrideInputsDate'
 import { OverrideInputsTabConfig } from '@/packages/components/external/Informations/Mores/OverrideInputsTab'
+import { OverrideTextCommonConfig } from '@/packages/components/external/Informations/Mores/OverrideTextCommon'
+import { OverrideBarCommonConfig } from '@/packages/components/external/Charts/Bars/OverrideBarCommon'
+import { OverrideLineCommonConfig } from '@/packages/components/external/Charts/Lines/OverrideLineCommon'
+import { OverrideLineGradientsConfig } from '@/packages/components/external/Charts/Lines/OverrideLineGradients'
 
 export function useInjectLib(packagesList: EPackagesType) {
 
@@ -20,6 +24,10 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideSelectConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsDateConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsTabConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextCommonConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideBarCommonConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineCommonConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineGradientsConfig)
 }
 
 /**

@@ -69,10 +69,17 @@ export const useSocketStore = defineStore({
         })
       } else {
         const keysRecord: Record<string, KeyBoundComponentList[]> = {}
-
-        keys.forEach(key => {
+        /**这里修改自定义tab切换传的单个属性问题
+         * ft
+         * 源代码 keys.forEach
+         * 修改代码 const overrideKeys = typeof keys==="string"?[keys]: keys  overrideKeys.forEach
+         */
+        const overrideKeys = typeof keys==="string"?[keys]: keys
+      
+        overrideKeys.forEach(key => {
           Reflect.set(keysRecord, key, [{ componentId }])
         })
+        //ft
         Reflect.set(this.connectionPool, entityId, keysRecord)
       }
       return this.refreshSubscribedMessage(entityId)
@@ -177,15 +184,22 @@ export const useSocketStore = defineStore({
      */
     getNeedUpdateComponentsIdBySubscribeId(subscribeId: number, keys: string[]) {
       const entityId = this.subscribePool.find(item => item.subscribeId === subscribeId)?.entityId
+       /**这里修改自定义tab切换传的单个属性问题
+         * ft
+         * 源代码 keys.map(key => keysRecord[key])
+         * 修改代码 const overrideKeys = typeof keys==="string"?[keys]: keys   overrideKeys.map(key => keysRecord[key])
+         */
+      const overrideKeys = typeof keys==="string"?[keys]: keys
 
       if (entityId) {
         const keysRecord = Reflect.get(this.connectionPool, entityId)
-        const needUpdateComponents = keys.map(key => keysRecord[key])
+        const needUpdateComponents = overrideKeys.map(key => keysRecord[key])
         const ids = needUpdateComponents
           .reduce((prev, next) => [...prev, ...next], [])
           .map((item: KeyBoundComponentList) => item.componentId)
         return [...new Set(ids)]
       }
+      //ft
     },
 
     /**
@@ -198,7 +212,15 @@ export const useSocketStore = defineStore({
       const { request: { requestParams } } = targetComponent
       const { Params } = requestParams
       const { keys = [] } = Params
-      const targetComponentBindKeys = keys as unknown as string[]
+      /**这里修改自定义tab切换传的单个属性问题
+        * ft
+        * 源代码 keys as unknown as string[]
+        * 修改代码 const overrideKeys = typeof keys==="string"?[keys]: keys   overrideKeys as unknown as string[]
+      */
+      const overrideKeys = typeof keys==="string"?[keys]: keys
+
+      const targetComponentBindKeys = overrideKeys as unknown as string[]
+      //ft
 
       const _value = cloneDeep(value) || { data: {}, latestValues: {} }
       _value.data = targetComponentBindKeys.reduce((prev, next) => {

@@ -43,7 +43,22 @@
             </n-button>
           </div>
         </template>
-        <span>保存</span>
+        <span>保存内容</span>
+      </n-tooltip>
+      <!-- 保存缩略图 -->
+      <n-tooltip v-if="!isCustomerUser" placement="bottom" trigger="hover">
+        <template #trigger>
+          <div class="save-btn">
+            <n-button size="small" type="primary" ghost @click="thumbnailSyncUpdate()">
+              <template #icon>
+                <n-icon>
+                  <Awake />
+                </n-icon>
+              </template>
+            </n-button>
+          </div>
+        </template>
+        <span>保存缩略图</span>
       </n-tooltip>
     </n-space>
   </n-space>
@@ -53,7 +68,7 @@
 import { toRefs, Ref, reactive, computed } from 'vue'
 import { renderIcon, goDialog, goHome } from '@/utils'
 import { icon } from '@/plugins'
-import { Save } from '@vicons/carbon'
+import { Save, Awake } from '@vicons/carbon'
 import { useRemoveKeyboard } from '../../../hooks/useKeyboard.hook'
 
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -71,7 +86,7 @@ const { setItem } = useChartLayoutStore()
 const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())
 const chartEditStore = useChartEditStore()
 const chartHistoryStore = useChartHistoryStore()
-const { dataSyncUpdate } = useSyncRemote()
+const { dataSyncUpdate ,thumbnailSyncUpdate } = useSyncRemote()
 const { isCustomerUser } = useRole()
 
 interface ItemType<T> {

@@ -70,22 +70,47 @@ export const useSyncRemote = () => {
     }
   }
 
-  // 数据保存
-  const dataSyncUpdate = throttle(async (updateImg = true) => {
+  /**
+   * 数据保存和缩略图保存逻辑拆分
+   */
+
+  //dataSyncUpdate 数据保存
+  const dataSyncUpdate = throttle(async () => {
     if (!fetchRouteParamsLocation()) return
 
     // 客户角色只有查看权限
     if (unref(isCustomerUser)) return
 
-    const { dataViewId, state, organizationId, dataViewName, dataViewContent } = projectInfoStore.getProjectInfo
+    const { dataViewId, dataViewName, dataViewContent } = projectInfoStore.getProjectInfo
 
     if (dataViewId === null || dataViewId === '') {
       window['$message'].error('数据初未始化成功,请刷新页面！')
       return
     }
     projectInfoStore.setSaveStatus(SyncEnum.START)
-    // 异常处理：缩略图上传失败不影响JSON的保存
-    try {
+    // 保存数据
+    const saveContent = {
+      dataViewContent: {
+        id: dataViewContent.id,
+        content: JSONStringify(chartEditStore.getStorageInfo || {})
+      },
+      dataViewName,
+      dataViewId
+    }
+    await contentUpdateApi(saveContent as unknown as BaseUpdateContentParams)
+    window['$message'].success('保存成功！')
+    // 成功状态
+    setTimeout(() => {
+      projectInfoStore.setSaveStatus(SyncEnum.SUCCESS)
+    }, 1000)
+    return
+    // 失败状态
+    // chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
+  }, 3000)
+
+  //thumbnailSyncUpdate 缩略图保存
+  const thumbnailSyncUpdate = throttle(async(updateImg = true)=>{
+    const {  state, organizationId, dataViewName } = projectInfoStore.getProjectInfo
       if (updateImg) {
         // 获取缩略图片
         const range = document.querySelector('.go-edit-range') as HTMLElement
@@ -96,7 +121,6 @@ export const useSyncRemote = () => {
           useCORS: true,
           logging: false
         })
-
         // 上传预览图
         const uploadParams = new FormData()
         uploadParams.append(
@@ -104,7 +128,6 @@ export const useSyncRemote = () => {
           base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`)
         )
         const uploadRes = await uploadFile(uploadParams)
-
         // 保存预览图
         if (uploadRes) {
           await saveDataViewList({
@@ -114,30 +137,10 @@ export const useSyncRemote = () => {
             id: fetchRouteParamsLocation(),
             thumbnail: `${uploadRes.fileStaticUri}`
           })
+          window['$message'].success('保存缩略图成功！')
         }
       }
-    } catch (e) {
-      console.log(e)
-    }
-    // 保存数据
-    const saveContent = {
-      dataViewContent: {
-        id: dataViewContent.id,
-        content: JSONStringify(chartEditStore.getStorageInfo || {})
-      },
-      dataViewName,
-      dataViewId
-    }
-    await contentUpdateApi(saveContent as unknown as BaseUpdateContentParams)
-    window['$message'].success('保存成功！')
-    // 成功状态
-    setTimeout(() => {
-      projectInfoStore.setSaveStatus(SyncEnum.SUCCESS)
-    }, 1000)
-    return
-    // 失败状态
-    // chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.FAILURE)
-  }, 3000)
+  })
 
   // * 定时处理
   const intervalDataSyncUpdate = () => {
@@ -145,7 +148,6 @@ export const useSyncRemote = () => {
     // const syncTiming = setInterval(() => {
     //   dataSyncUpdate()
     // }, saveInterval * 1000)
-
     // // 销毁
     // onUnmounted(() => {
     //   clearInterval(syncTiming)
@@ -154,6 +156,7 @@ export const useSyncRemote = () => {
   return {
     dataSyncFetch,
     dataSyncUpdate,
+    thumbnailSyncUpdate,
     intervalDataSyncUpdate
   }
 }