feat(src/packages): 图表折线图 新增单设备-属性-历史数据查询图

+/**
+ * 特殊处理单设备-属性-历史数据查询组件联动
+ */
+import { toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+// 获取类型
+type ChartEditStoreType = typeof useChartEditStore
+
+// Params 参数修改触发 api 更新图表请求
+export const useChartInteract = (
+  chartConfig: CreateComponentType,
+  useChartEditStore: ChartEditStoreType,
+  param: { [T: string]: any }
+) => {
+  const chartEditStore = useChartEditStore()
+  const { id } = chartConfig
+  const index = chartEditStore.fetchTargetIndex(id)
+  const { data } = param
+  if (index === -1) return
+  chartEditStore.getComponentList.forEach(targetItem => {
+    if (targetItem.id === id) {
+      const { Params } = toRefs(targetItem.request.requestParams)
+      if (Reflect.get(param.data, 'agg') !== 'NONE') {
+        Reflect.deleteProperty(Params.value, 'limit')
+      }
+      Object.keys(data).forEach((item: string) => {
+        Params.value[item] = data[item]
+      })
+    }
+  })
+}

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { OverrideLineForDeviceHistoryQueryConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+import { chartInitConfig } from '@/settings/designSetting'
+
+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 = {
+  queryCondition: {
+    timeRange: [new Date().getTime() - 86400000, new Date().getTime()], //默认最近一天
+    limit: 7,
+    agg: 'NONE'
+  },
+  ...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 = OverrideLineForDeviceHistoryQueryConfig.key
+  public chartConfig = cloneDeep(OverrideLineForDeviceHistoryQueryConfig)
+  public attr = { ...chartInitConfig, w: 735, h: 435, zIndex: -1 }
+  // 图表配置项
+  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('OverrideLineForDeviceHistoryQuery', true)
+
+export const OverrideLineForDeviceHistoryQueryConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '单设备-属性-历史数据查询',
+  category: ChatCategoryEnum.LINE,
+  categoryName: ChatCategoryEnumName.LINE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'line.png'
+}

+<template>
+  <div>
+    <n-space vertical>
+      <n-space>
+        <n-date-picker
+          size="small"
+          :to="true"
+          clearable
+          v-model:value="queryCondition.timeRange"
+          type="datetimerange"
+          :shortcuts="rangeShortcuts"
+        />
+        <n-select :style="`width:160px`" v-model:value="queryCondition.agg" :options="aggOptions" clearable />
+        <n-input-number
+          :min="7"
+          :max="50000"
+          :style="`width:160px`"
+          v-if="queryCondition.agg === 'NONE'"
+          v-model:value="queryCondition.limit"
+          clearable
+        />
+      </n-space>
+    </n-space>
+    <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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed, watch, ref, nextTick, onMounted, 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, 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 cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+import { useFullScreen } from '../../utls/fullScreen'
+import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook'
+import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
+import { useChartInteract } from '@/hooks/external/useChartSelectDeviceInteract.hook'
+
+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)
+
+const { queryCondition } = toRefs(props.chartConfig.option)
+
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
+
+const chartEditStore = useChartEditStore()
+
+const replaceMergeArr = ref<string[]>()
+
+const aggOptions = [
+  { label: '最小值', value: 'MIN' },
+  { label: '最大值', value: 'MAX' },
+  { label: '平均值', value: 'AVG' },
+  { label: '求和', value: 'SUM' },
+  { label: '计数', value: 'COUNT' },
+  { label: '空', value: 'NONE' }
+]
+
+const rangeShortcuts = {
+  昨天: () => {
+    const cur = new Date().getTime()
+    return [cur - 86400000, cur] as const
+  },
+  最近7天: () => {
+    const cur = new Date().getTime()
+    return [cur - 604800000, cur] as const
+  },
+  最近30天: () => {
+    const cur = new Date().getTime()
+    return [cur - 2592000000, cur] as const
+  }
+}
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+// 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 = []
+        // 对oldData进行判断，防止传入错误数据之后对旧维度判断产生干扰
+        // 此处计算的是dimensions的Y轴维度，若是dimensions.length为0或1，则默认为1，排除X轴维度干扰
+        const oldDimensions =
+          Array.isArray(oldData?.dimensions) && oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1
+        const newDimensions = newData.dimensions.length >= 1 ? newData.dimensions.length : 1
+        const dimensionsGap = newDimensions - oldDimensions
+        if (dimensionsGap < 0) {
+          props.chartConfig.option.series.splice(newDimensions - 1)
+        } else if (dimensionsGap > 0) {
+          if (!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length) {
+            props.chartConfig.option.series = []
+          }
+          for (let i = 0; i < dimensionsGap; i++) {
+            seriesArr.push(cloneDeep(seriesItem))
+          }
+          props.chartConfig.option.series.push(...seriesArr)
+        }
+        replaceMergeArr.value = ['series']
+        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()
+    }
+  }
+)
+
+//fix 修复v-chart图表绑定联动组件视图不更新问题
+const updateVChart = async (newData: SocketReceiveMessageType) => {
+  //区分是普通请求还是ws请求
+  if (!isObject(newData) || !('dimensions' in newData)) {
+    const { data } = newData
+    const { keys, record } = useAssembleDataHooks(data)
+    vChartRef.value?.setOption({
+      dataset: {
+        dimensions: ['ts', ...keys],
+        source: [record]
+      }
+    })
+  } else {
+    //异步更新，同步更新会造成联动组件控制，图表不及时更新
+    await nextTick().then(() => {
+      vChartRef.value?.setOption(
+        {
+          ...option.value,
+          dataset: newData
+        },
+        {
+          notMerge: true
+        }
+      )
+    })
+  }
+}
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any, targetComponent: any) => {
+  //联动支持分组
+  /**
+   * 修复多个分组，然后下拉框联动，会影响另一个组件
+   */
+  chartEditStore.getComponentList.forEach(targetItem => {
+    if (targetItem.isGroup) {
+      targetItem.groupList?.forEach(groupItem => {
+        if (groupItem.id === props.chartConfig.id) {
+          groupItem.option.dataset = newData
+        }
+      })
+    } else {
+      if (targetItem.id === props.chartConfig.id) {
+        targetItem.option.dataset = newData
+      }
+    }
+  })
+  //
+  updateVChart(newData)
+})
+
+onMounted(() => {
+  seriesDataMaxLength = dataJson.source.length
+  if (props.chartConfig.option.isCarousel) {
+    addPieInterval(undefined, true)
+  }
+})
+
+watch(
+  () => queryCondition.value,
+  newValue => {
+    const obj = {
+      startTs: newValue.timeRange.at(-2),
+      endTs: newValue.timeRange.at(-1),
+      limit: newValue.limit,
+      agg: newValue.agg
+    }
+    if (newValue.agg !== 'NONE') {
+      Reflect.deleteProperty(obj, 'limit')
+    }
+    onChange(obj)
+  },
+  {
+    deep: true
+  }
+)
+
+// 监听事件改变
+const onChange = (v: object) => {
+  // 存储到联动数据
+  useChartInteract(props.chartConfig, useChartEditStore, { data: v })
+}
+</script>

@@ -148,6 +148,8 @@ const getGeojson = async (regionId: any) => {
   } catch (error) {
     loading.value = false
     console.error('动态注册地图出错', error)
+    //注册出错则注册空的，不然在选择正确的adcode，则视图无法更新
+    registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, specialAreas: {} })
   }
 }
 

@@ -21,6 +21,7 @@ import { CustomEchartsConfig } from '@/packages/components/external/Informations
 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'
+import { OverrideLineForDeviceHistoryQueryConfig } from '@/packages/components/external/Charts/Lines/OverrideLineForDeviceHistoryQuery'
 import { OverrideProcessConfig } from '@/packages/components/external/Charts/Mores/OverrideProcess'
 import { OverridePieCircleConfig } from '@/packages/components/external/Charts/Pies/OverridePieCircle'
 import { OverrideMapBaseConfig } from '@/packages/components/external/Charts/Maps/OverrideMapBase'
@@ -112,6 +113,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, AddThreeDimensionalMapConfig)//新增图表下的3d echarts地图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideWaterPoloConfig)//重写图表下的水球图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideDialConfig)//重写图表下的表盘
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineForDeviceHistoryQueryConfig)//新增图表下的单设备-属性-历史数据查询折线图
   //
 
   //列表