Merge branch 'ft' into 'main_dev'

feat(src/packages): 图表折线图新增实时折线图

See merge request yunteng/thingskit-view!86

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { OverrideLineRealTimeConfig } 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,
+  //超过最大数据点则删除
+  chartMaxDataPoint: 10,
+}
+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],
+  dataZoom: {
+    show: false,
+    min: 0,
+    max: 100
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = OverrideLineRealTimeConfig.key
+  public chartConfig = cloneDeep(OverrideLineRealTimeConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem :expanded="true" name="数值个数">
+    <SettingItemBox name="数值个数">
+      <SettingItem name="最大值">
+        <n-input-number
+          v-model:value="optionData.chartMaxDataPoint"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="最大值"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <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('OverrideLineRealTime', true)
+
+export const OverrideLineRealTimeConfig: 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, onMounted, unref, toRaw, toRefs } 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 } 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 dataJson from './data.json'
+import { useFullScreen } from '../../utls/fullScreen'
+import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
+import dayjs from 'dayjs'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+interface RealTimeItemType {
+  [key: string]: number
+}
+
+const { chartMaxDataPoint } = toRefs(props.chartConfig.option)
+
+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 HTMLElement
+        const htmlName = document.querySelector('html') as HTMLHtmlElement
+        useFullScreen(domName, htmlName)
+      }
+    }
+  }
+}
+
+props.chartConfig.option = {
+  ...props.chartConfig.option,
+  ...{ toolbox: toolBoxOption }
+}
+
+const realTimeList = ref<RealTimeItemType[]>([])
+
+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 formatValueToNumber = (value: string | number, defaultValue = 0) =>
+  isNaN(value as number) ? defaultValue : Number(value)
+
+//fix 修复v-chart图表绑定联动组件视图不更新问题
+const updateVChart = (newData: SocketReceiveMessageType) => {
+  if (!newData) return
+  const { data } = newData
+  const keys = Object.keys(data)
+  const record = keys.reduce((prev, next) => {
+    const [latest] = data[next] || []
+    const [ts, value] = latest as unknown as string[]
+    return { ...prev, ts: dayjs(ts).format('YYYY-MM-DD HH:mm:ss'), [next]: formatValueToNumber(value) }
+    // return { ...prev, ts, [next]: formatValueToNumber(value) }
+  }, {})
+  if (unref(realTimeList).length >= chartMaxDataPoint.value) {
+    unref(realTimeList).splice(0, 1)
+  }
+  realTimeList.value.push(record)
+  vChartRef.value?.setOption({
+    dataset: {
+      dimensions: ['ts', ...keys],
+      source: toRaw(unref(realTimeList))
+    }
+  })
+}
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, newData => {
+  updateVChart(newData)
+})
+
+onMounted(() => {
+  seriesDataMaxLength = dataJson.source.length
+  if (props.chartConfig.option.isCarousel) {
+    addPieInterval(undefined, true)
+  }
+})
+</script>

@@ -22,6 +22,7 @@ import { OverrideMapBaseConfig } from '@/packages/components/external/Charts/Map
 import { OverrideILoadConfigurationframeConfig } from '@/packages/components/external/Informations/Mores/OverrideILoadConfigurationframe'
 import { OverrideILoadConfigurationframeConfig } from '@/packages/components/external/Informations/Mores/OverrideILoadConfigurationframe'
 import { OverrideVideoConfig } from '@/packages/components/external/Informations/Mores/OverrideVideo'
 import { OverrideVideoConfig } from '@/packages/components/external/Informations/Mores/OverrideVideo'
 import { OverrideWaterPoloConfig } from '@/packages/components/external/Charts/Mores/OverrideWaterPolo'
 import { OverrideWaterPoloConfig } from '@/packages/components/external/Charts/Mores/OverrideWaterPolo'
+import { OverrideLineRealTimeConfig } from '@/packages/components/external/Charts/Lines/OverrideLineRealTime'
 
 
 export function useInjectLib(packagesList: EPackagesType) {
 export function useInjectLib(packagesList: EPackagesType) {
   packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
   packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
@@ -51,6 +52,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   )
   )
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideVideoConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideVideoConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideWaterPoloConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideWaterPoloConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineRealTimeConfig)
 }
 }
 
 
 /**
 /**