Merge branch 'main_dev' into 'main'

Main dev

See merge request yunteng/thingskit-view!251

@@ -21,6 +21,7 @@ enum Api {
   GET_ATTRBUTELIST = '/device/attributes/',
   GET_DEVICE_LATEST = '/plugins/telemetry/DEVICE/',
   DEVICE_ATTR = '/device/attributes',
+  ALARM_LIST = '/alarm',
 }
 
 export const getDictItemByCode = (value: string) => {
@@ -152,3 +153,10 @@ export const getProfileAttrs = (params: { deviceProfileId: string; dataType?: st
     params: { dataType },
   });
 };
+
+//获取告警列表
+export const getAlarmList = (params?: object) =>
+  defHttp.get({
+    url: Api.ALARM_LIST,
+    params
+  })

@@ -93,6 +93,7 @@ const extraValue = (object: Recordable) => {
 }
 
 const handleParams = (Params: Recordable) => {
+  Reflect.deleteProperty(Params, 'attrName')
   if (Params.keys && Params?.keys?.length) {
     // 过滤无效参数
     Reflect.deleteProperty(Params, 'attrName')

@@ -164,6 +164,14 @@
     <template #header>
       <n-switch v-model:value="yAxis.show" size="small"></n-switch>
     </template>
+    <setting-item-box name="范围" v-if="yAxis.showRange">
+      <setting-item name="最小值" >
+        <n-input-number  v-model:value="yAxis.min" size="small" min="0"></n-input-number>
+      </setting-item>
+      <setting-item name="最大值">
+        <n-input-number  v-model:value="yAxis.max" size="small" min="0"></n-input-number>
+      </setting-item>
+    </setting-item-box>
     <setting-item-box name="单位">
       <setting-item name="名称">
         <n-input v-model:value="yAxis.name" size="small"></n-input>
@@ -290,11 +298,40 @@
     </setting-item-box>
   </collapse-item>
 
+  <!-- 颜色 -->
+  <collapse-item name="颜色" expanded>
+      <n-card
+      v-for="(value, key) in chartCustomColor"
+      :key="key"
+      class="card-box"
+      size="small"
+      hoverable
+      embedded
+    >
+      <div class="go-flex-items-center">
+        <n-ellipsis style="text-align: left; width: 60px">{{ value?.name }} </n-ellipsis>
+        <span
+          class="theme-color-item"
+          v-for="colorItem in fetchShowColors(value!.color)"
+          :key="colorItem"
+          :style="{ backgroundColor: colorItem }"
+        ></span>
+        <div @click="createCustomColorHandle">
+          <n-icon size="18">
+              <add-icon></add-icon>
+          </n-icon>
+      </div>
+      </div>
+      <div class="theme-bottom" :style="{ backgroundImage: colorBackgroundImage(value!) }"></div>
+    </n-card>
+    <!-- 自定义颜色 modal -->
+    <create-color v-model:modelShow="createColorModelShow" :applicationGroup="applicationGroup"></create-color>
+  </collapse-item>
+
   <collapse-item v-if="visualMap" name="视觉映射">
     <template #header>
       <n-switch v-model:value="visualMap.show" size="small"></n-switch>
     </template>
-
     <setting-item-box name="范围">
       <setting-item name="最小值">
         <n-input-number v-model:value="visualMap.min" size="small"></n-input-number>
@@ -336,15 +373,19 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed, watch } from 'vue'
+import { PropType, computed, watch, ref } from 'vue'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { axisConfig, legendConfig } from '@/packages/chartConfiguration/echarts/index'
 import { CollapseItem, SettingItemBox, SettingItem, GlobalSettingPosition } from '@/components/Pages/ChartItemSetting'
 import { icon } from '@/plugins'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import EchartsRendererSetting from './EchartsRendererSetting.vue'
+import cloneDeep from 'lodash/cloneDeep'
+import { loadAsyncComponent, colorCustomMerge } from '@/utils'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { useTargetData } from "@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook"
 
-const { HelpOutlineIcon } = icon.ionicons5
+const { HelpOutlineIcon, AddIcon } = icon.ionicons5
 
 const props = defineProps({
   optionData: {
@@ -358,6 +399,10 @@ const props = defineProps({
   }
 })
 
+const { targetData } = useTargetData()
+
+const CreateColor = loadAsyncComponent(() => import('@/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue'))
+
 const chartEditStore = useChartEditStore()
 const themeSetting = computed(() => {
   const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
@@ -373,6 +418,13 @@ const xAxis = computed(() => {
 })
 
 const yAxis = computed(() => {
+  if((props.optionData?.yAxis as Recordable)){
+    if(!(props.optionData?.yAxis as Recordable).showRange) {
+      //针对横向柱状图和热力图
+      Reflect.deleteProperty((props.optionData.yAxis as Recordable),'min');
+      Reflect.deleteProperty((props.optionData.yAxis as Recordable),'max');
+    }
+  }
   return props.optionData.yAxis
 })
 
@@ -401,4 +453,85 @@ watch(() => legend.value && legend.value.textStyle.color, (newVal) => {
   immediate: true,
   deep: true,
 })
+
+// 底色
+const colorBackgroundImage = (item: { color: string[] }) => {
+  return `linear-gradient(to right, ${item.color[0]} 0%, ${item.color[5]} 100%)`
+}
+
+// 获取用来展示的色号
+const fetchShowColors = (colors: Array<string>) => {
+  return cloneDeep(colors).splice(0, 6)
+}
+
+// 自定义颜色
+const chartCustomColor = computed(() => {
+  const colorCustomMergeData = colorCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)
+  if(Reflect.has(targetData.value, 'colors')){
+    return {
+      'chartCustom': targetData.value?.colors
+    }
+  } else {
+    return {
+      'chartCustom': colorCustomMergeData[chartEditStore.getEditCanvasConfig.chartThemeColor]
+    }
+  }
+})
+
+// 全局颜色
+const designStore = useDesignStore()
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+const createColorModelShow = ref(false)
+
+const applicationGroup = ref(false)
+
+const createCustomColorHandle = () => {
+  createColorModelShow.value = true
+  applicationGroup.value = true
+}
 </script>
+
+<style lang="scss" scoped>
+$radius: 10px;
+$itemRadius: 6px;
+
+.card-box {
+  cursor: pointer;
+  margin-top: 15px;
+  padding: 0;
+  @include fetch-bg-color('background-color4-shallow');
+  border-radius: $radius;
+  overflow: hidden;
+
+  &.selected {
+    border: 2px solid v-bind('themeColor');
+    border-bottom: 1px solid rgba(0, 0, 0, 0);
+  }
+  &:first-child {
+    margin-top: 5px;
+  }
+  .go-flex-items-center {
+    justify-content: space-between;
+    align-items: center;
+    margin-top: -4px;
+  }
+  .theme-color-item {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border-radius: $itemRadius;
+  }
+  .theme-bottom {
+    position: absolute;
+    left: 0;
+    bottom: 0px;
+    width: 100%;
+    height: 3px;
+  }
+}
+</style>

@@ -73,10 +73,11 @@ export const useChartDataFetch = (
                     let endTsValue = null
                     const {requestParams} = toRaw(targetComponent.request)
                     const {Params} = requestParams
-                    const {entityType, startTs, endTs} = Params
+                    const {startTs, endTs, shortcutsSelect} = Params
                     let days = Math.ceil(((endTs as unknown as number) - (startTs as unknown as number)) / (1 * 60 * 60 * 24 * 1000))
                     const ShortcutsDays = [1, 7, 30]
-                    if (entityType === 'DEVICE') {
+                    // shortcutsSelect为真
+                    if (shortcutsSelect) {
                         //等于这三个，说明是从快捷选项里面选的
                         if(ShortcutsDays.includes(days)) {
                             days = days <= 2 ? 1 : days<= 8 ? 7 : 30
@@ -85,12 +86,12 @@ export const useChartDataFetch = (
                             endTsValue = dayjs().endOf('day').valueOf()
                             ;(toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTsValue as number
                             ;(toRaw(targetComponent.request).requestParams.Params.endTs as unknown as number) = endTsValue
-                        } else {
-                            //否则，选择的是什么日期区间就是什么
-                            (toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTs as unknown as number
-                            (toRaw(targetComponent.request).requestParams.Params.endTs as unknown as number) = endTs as unknown as number
                         } 
-                    }
+                    } else {
+                        //否则，选择的是什么日期区间就是什么
+                        (toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTs as unknown as number
+                        (toRaw(targetComponent.request).requestParams.Params.endTs as unknown as number) = endTs as unknown as number
+                    } 
                     const res = await customRequest(toRaw(targetComponent.request))
                     if (res) {
                         try {

 /**
- * 重写select下拉框联动
+ * 重写select下拉框联动（下拉选择和输入框共用此hook）
  */
 import { toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
@@ -13,7 +13,8 @@ export const useChartInteract = (
   chartConfig: CreateComponentType,
   useChartEditStore: ChartEditStoreType,
   param: { [T: string]: any },
-  interactEventOn: string
+  interactEventOn: string,
+  attrNames?: string[]
 ) => {
   const chartEditStore = useChartEditStore()
   const { interactEvents } = chartConfig.events
@@ -34,12 +35,13 @@ export const useChartInteract = (
           if (groupItem.id === item.interactComponentId) {
             const { Params, Header } = toRefs(groupItem.request.requestParams)
             Object.keys(item.interactFn).forEach(key => {
-              if (Params.value[key]) {
-                Params.value[key] = param[item.interactFn[key]]
-              }
-              if (Header.value[key]) {
-                Header.value[key] = param[item.interactFn[key]]
-              }
+                Params.value[key] = decodeURIComponent(param[item.interactFn[key]])
+                if(Reflect.has(Params.value, 'attrName')) {
+                  Params.value['attrName'] = attrNames as unknown as string // 修改联动选择，lengend未实时更新
+                }
+                if (key in  Header.value) {
+                  Header.value[key] = param[item.interactFn[key]]
+                }
             })
           }
         })
@@ -56,12 +58,13 @@ export const useChartInteract = (
           }
           //
           Object.keys(item.interactFn).forEach(key => {
-            if (Params.value[key]) {
-              Params.value[key] = param[item.interactFn[key]]
-            }
-            if (Header.value[key]) {
-              Header.value[key] = param[item.interactFn[key]]
-            }
+              Params.value[key] = decodeURIComponent(param[item.interactFn[key]])
+              if(Reflect.has(Params.value, 'attrName')) {
+                Params.value['attrName'] = attrNames as unknown as string // 修改联动选择，lengend未实时更新
+              }
+              if (key in  Header.value) {
+                Header.value[key] = param[item.interactFn[key]]
+              }
           })
         }
       }

@@ -9,7 +9,7 @@ export const seriesItem = {
   type: 'bar',
   barWidth: null,
   label: {
-    show: true,
+    show: false,
     position: 'right',
     color: '#fff',
     fontSize: 12
@@ -33,6 +33,7 @@ export const option = {
     type: 'value'
   },
   yAxis: {
+    showRange: false,
     show: true,
     type: 'category'
   },

@@ -51,7 +51,10 @@ use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent
 const replaceMergeArr = ref<string[]>()
 
 const option = computed(() => {
-  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  const mergeThemeData =  mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  Reflect.deleteProperty(mergeThemeData.yAxis, 'min')
+  Reflect.deleteProperty(mergeThemeData.yAxis, 'max')
+  return mergeThemeData
 })
 
 // dataset 无法变更条数的补丁

@@ -11,7 +11,7 @@ export const barSeriesItem = {
   type: 'bar',
   barWidth: 15,
   label: {
-    show: true,
+    show: false,
     position: 'top',
     color: '#fff',
     fontSize: 12
@@ -26,7 +26,7 @@ export const lineSeriesItem = {
   type: 'line',
   symbol: 'circle',
   label: {
-    show: true,
+    show: false,
     position: 'top',
     color: '#fff',
     fontSize: 12

@@ -31,7 +31,7 @@ const options = {
       smooth: false,
       symbolSize: 5, //设定实心点的大小
       label: {
-        show: true,
+        show: false,
         position: 'top',
         color: '#fff',
         fontSize: 12

@@ -15,6 +15,7 @@ export const option = {
     data: dataJson.xAxis
   },
   yAxis: {
+    showRange: false,
     data: dataJson.yAxis
   },
   visualMap: {

@@ -52,7 +52,10 @@ use([
 ])
 
 const option = computed(() => {
-  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  const mergeThemeData =  mergeTheme(props.chartConfig.option, props.themeSetting, includes) as unknown as Recordable
+  Reflect.deleteProperty(mergeThemeData.yAxis, 'min')
+  Reflect.deleteProperty(mergeThemeData.yAxis, 'max')
+  return mergeThemeData
 })
 
 const vChartRef = ref<typeof VChart>()

@@ -3,7 +3,7 @@
     <n-input :style="`width:${w}px;`" type="text"
              v-model:value="option.value.dataset"
              placeholder="请输入"
-             @change="onChange">
+             @update="onChange">
 
     </n-input>
   </div>
@@ -13,7 +13,7 @@
 import { PropType, toRefs, shallowReactive, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { useChartInteract } from '@/hooks'
+import { useChartInteract } from '@/hooks/external/useChartSelectInteract.hook'
 import { InteractEventOn } from '@/enums/eventEnum'
 import { ComponentInteractParamsEnum } from './interact'
 
@@ -33,13 +33,14 @@ const option = shallowReactive({
 })
 
 const onChange = (v: string) => {
-  if(v == undefined) return;
+  // if(v == undefined) return;
   // 存储到联动数据
   useChartInteract(
       props.chartConfig,
       useChartEditStore,
-      { [ComponentInteractParamsEnum.DATA]: v },
-      InteractEventOn.CHANGE
+      { [ComponentInteractParamsEnum.DATA]: encodeURIComponent(option.value.dataset) },
+      InteractEventOn.CHANGE,
+      []
   )
 }
 

@@ -14,7 +14,7 @@ export const seriesItem = {
   type: 'bar',
   barWidth: 15,
   label: {
-    show: true,
+    show: false,
     position: 'top',
     color: '#fff',
     fontSize: 12

@@ -112,8 +112,8 @@ watch(
           props.chartConfig.option.series.push(...seriesArr)
         }
         replaceMergeArr.value = ['series']
+        useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
         nextTick(() => {
-          useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
           replaceMergeArr.value = []
         })
       }
@@ -245,8 +245,10 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, ne
       }
     }
   })
-  //
-  addPieInterval(newData)
+  //动画为开启才执行动画
+  if (props.chartConfig.option.isCarousel) {
+    addPieInterval(newData)
+  }
   updateVChart(newData)
 })
 

@@ -8,7 +8,7 @@ export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
 export const seriesItem = {
   type: 'line',
   label: {
-    show: true,
+    show: false,
     position: 'top',
     color: '#fff',
     fontSize: 12

@@ -112,8 +112,8 @@ watch(
           props.chartConfig.option.series.push(...seriesArr)
         }
         replaceMergeArr.value = ['series']
+        useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
         nextTick(() => {
-          useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
           replaceMergeArr.value = []
         })
       }
@@ -244,8 +244,10 @@ const {vChartRef} = useChartDataFetch(props.chartConfig, useChartEditStore, (new
       }
     }
   })
-  //
-  addPieInterval(newData)
+  //动画为开启才执行动画
+  if (props.chartConfig.option.isCarousel) {
+    addPieInterval(newData)
+  }
   updateVChart(newData)
 })
 

 <template>
-  <div>
+  <div class="device-history-query">
     <n-space vertical>
       <div class="form">
         <n-date-picker size="small" :to="true" clearable v-model:value="queryCondition.timeRange" type="datetimerange"
@@ -96,6 +96,27 @@ 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 domName = document.getElementsByClassName('device-history-query')[0] as HTMLElement
+        const htmlName = document.querySelector('html') as HTMLHtmlElement
+        useFullScreen(domName, htmlName)
+      }
+    }
+  }
+}
+props.chartConfig.option = {
+  ...props.chartConfig.option,
+  ...{ toolbox: toolBoxOption }
+}
+
 // dataset 无法变更条数的补丁
 watch(
   () => props.chartConfig.option.dataset,
@@ -122,8 +143,8 @@ watch(
           props.chartConfig.option.series.push(...seriesArr)
         }
         replaceMergeArr.value = ['series']
+        useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
         nextTick(() => {
-          useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
           replaceMergeArr.value = []
         })
       }

@@ -12,7 +12,7 @@ export const seriesItem = {
   smooth: false,
   symbolSize: 5, //设定实心点的大小
   label: {
-    show: true,
+    show: false,
     position: 'top',
     color: '#fff',
     fontSize: 12

@@ -214,8 +214,8 @@ watch(
           props.chartConfig.option.series.push(...seriesArr)
         }
         replaceMergeArr.value = ['series']
+        useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
         nextTick(() => {
-          useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
           replaceMergeArr.value = []
         })
       }
@@ -274,8 +274,10 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, ne
       }
     }
   })
-  //
-  addPieInterval(newData)
+   //动画为开启才执行动画
+   if (props.chartConfig.option.isCarousel) {
+    addPieInterval(newData)
+  }
   updateVChart(newData)
 })
 

@@ -43,13 +43,14 @@ onMounted(async () => {
     label: '中国',
     value: 'china'
   })
-  onHandleSelectProvince('china')
+  onHandleSelectProvince(props.optionData?.mapRegion.saveSelect['provinceValue'])
   for (let i in selectValues) Reflect.set(selectValues, i, props.optionData?.mapRegion.saveSelect[i])
 })
 
 const onHandleSelectProvince = async (value: number | string) => {
   selectValues.cityValue = null
   selectValues.countyValue = null
+  selectOptions.cityOptions = []
   if (value === 'china') return (selectValues.levelStr = areaEnum.COUNTRY)
   selectOptions.cityOptions = await getAreaLists(areaEnum.CITY, value)
   selectValues.levelStr = areaEnum.PROVINCE

+/**
+ * 单个组件全屏
+ * @param domName 
+ * @param htmlName 
+ */
+
 export const useFullScreen = (domName: any, htmlName: HTMLHtmlElement) => {
   const isFullScreen = document.fullscreenElement
+
   const currentDatkTheme = htmlName.getAttribute('data-theme')
 
+  //特殊处理单设备多属性组件全屏显示
+  const setDomName = (domName: any,top0: string, top1: string) => {
+    domName.children[0].style.top = top0
+    domName.style.paddingBottom = '80px'
+    domName.children[1].style.top = top1
+  }
+
+  const setDomNameAndStyle = () => {
+    domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
+    domName.children[0].style.position = 'relative'
+    setDomName(domName, '30px','40px')
+  }
+
   if (isFullScreen) {
     if (document.exitFullscreen) {
       document.exitFullscreen()
@@ -11,18 +31,19 @@ export const useFullScreen = (domName: any, htmlName: HTMLHtmlElement) => {
     //兼容其他浏览器
     if (domName.requestFullscreen) {
       domName.requestFullscreen()
-      domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
+      setDomNameAndStyle()
     } else if (domName.mozRequestFullScreen) {
       domName.mozRequestFullScreen()
-      domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
+      setDomNameAndStyle()
     } else if (domName.webkitRequestFullscreen) {
       domName.webkitRequestFullscreen()
-      domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
+      setDomNameAndStyle()
     } else if (domName.msRequestFullscreen) {
       domName.msRequestFullscreen()
-      domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
+      setDomNameAndStyle()
     }
   }
+
   //fix 浏览器监听esc退出
   function exitHandler() {
     if (
@@ -33,6 +54,7 @@ export const useFullScreen = (domName: any, htmlName: HTMLHtmlElement) => {
       domName.style.background = currentDatkTheme === 'light' ? '' : ''
     }
   }
+
   // 监听fullscreenchange事件（全屏模式的变化）
   if (document.addEventListener) {
     document.addEventListener('webkitfullscreenchange', exitHandler, false)

@@ -10,13 +10,15 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import { PropType, toRefs, shallowReactive, watch, ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartInteract } from '@/hooks/external/useChartSelectInteract.hook'
 import { InteractEventOn } from '@/enums/eventEnum'
 import { ComponentInteractParamsEnum } from './interact'
 import { useChartDataFetch } from '@/hooks'
+import { isObject } from '@/utils/external/is'
+import { SelectOption } from 'naive-ui'
 
 const props = defineProps({
   chartConfig: {
@@ -36,14 +38,23 @@ const option = shallowReactive({
   }
 })
 
+const cacheOptions = ref<string[]>([])
+
 // 监听事件改变
-const onChange = (v: string[] | string) => {
-  // 存储到联动数据
-  useChartInteract(
+const onChange = (v: string[] | string, options: SelectOption | SelectOption[]) => {
+  const attrName = isObject(options) ? [(options as SelectOption).label] : (options as SelectOption[])?.map(mapItem => mapItem.label)
+  cacheOptions.value = attrName as unknown as string[]
+  updateChartInteract(v, cacheOptions.value)
+}
+
+const updateChartInteract = (v: string[] | string, attrName?: string[]) => {
+ // 存储到联动数据
+ useChartInteract(
     props.chartConfig,
     useChartEditStore,
-    { [ComponentInteractParamsEnum.DATA]: v },
-    InteractEventOn.CHANGE
+    { [ComponentInteractParamsEnum.DATA]: encodeURIComponent(v as unknown as string) },
+    InteractEventOn.CHANGE,
+    attrName!
   )
   // 特殊处理 只针对两个下拉选择器，一个是产品下拉，一个是设备下拉，选择了产品，存储到sessionStorage里,用来判断预览时点击产品下拉，清除设备下拉值
   if (window.location.href.includes('preview')) {
@@ -56,7 +67,7 @@ watch(
   () => props.chartConfig.option,
   (newData: any) => {
     option.value = newData
-    onChange(newData.selectValue)
+    updateChartInteract(newData.selectValue, cacheOptions.value)
   },
   {
     immediate: true,

@@ -42,15 +42,14 @@ const checkedKeys = ref([])
 
 const onClick = (v: string[]) => {
   // nTreeRef.value?.selectedKeys(v)
-  console.log(nTreeRef.value)
-  console.log(v)
   // nTreeRef.value?.onUpdateCheckedKeys(v)
   if (Array.isArray(v) && v.length == 0) return
   useChartInteract(
     props.chartConfig,
     useChartEditStore,
     { [ComponentInteractParamsEnum.DATA]: v[0] },
-    InteractEventOn.CHANGE
+    InteractEventOn.CHANGE,
+    []
   )
 }
 </script>

@@ -75,7 +75,7 @@ const getConfigurationOptions = async (params: object) => {
 watch(
   () => props.optionData.pages,
   (newData: any) => {
-    getConfigurationOptions({ page: newData.page, pageSize: newData.pageSize })
+    getConfigurationOptions({ page: newData.page, pageSize: newData.pageSize, isTemplate: 0 })
   },
   {
     deep: true,
@@ -84,7 +84,7 @@ watch(
 )
 
 onMounted(() => {
-  getConfigurationOptions({ page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize })
+  getConfigurationOptions({ page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize, isTemplate: 0 })
 })
 
 const handleUpdateValue = (value: string, options: ConfigurationItemType) => {

@@ -55,7 +55,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, ref, onMounted } from 'vue'
+import { PropType, ref, onMounted, watch } from 'vue'
 import { AccessMode, option, sourceTypeEnum, videoListInterface, sourceTypeNameEnum, Dataset } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { NTreeSelect } from 'naive-ui'
@@ -135,6 +135,19 @@ const handleSelect = (_: string, e: videoListInterface) => {
   }
 }
 
+watch(()=>props.optionData, (newData)=>{
+  if (newData.sourceType === sourceTypeEnum.PLATFORM) {
+    getOriginationList()
+    if (newData.organization) {
+      getVideoLists(newData.organization)
+    }
+  }
+},
+{
+  immediate: true,
+  deep: true
+})
+
 onMounted(() => {
   if (props.optionData.sourceType === sourceTypeEnum.PLATFORM) {
     getOriginationList()

+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { OverrideTablesBasicConfig } from './index'
+import dataJson from './data.json'
+
+const { dimensions, source } = dataJson
+export const option = {
+  dynamicForm: {
+    keys: [
+      { 
+        key: '告警设备,deviceName',
+      }
+    ]
+  },
+  dataset: { dimensions, source },
+  pagination: {
+    page: 1,
+    pageSize: 10
+  },
+  align: 'center',
+  style: {
+    border: 'on',
+    singleColumn: 'off',
+    singleLine: 'off',
+    bottomBordered: 'on',
+    striped: 'on',
+    fontSize: 16,
+    borderWidth: 0,
+    borderColor: 'black',
+    borderStyle: 'solid'
+  },
+  inputShow: false
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideTablesBasicConfig.key
+  public attr = { ...chartInitConfig, w: 600, h: 300, zIndex: -1 }
+  public chartConfig = cloneDeep(OverrideTablesBasicConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="表格设置" :expanded="true">
+    <n-tag type="primary">配置分页接口查询参数键，以逗号分隔键名和键值</n-tag>
+    <n-tag type="primary">例如：设备名称,deviceName</n-tag>
+    <setting-item-box :alone="true" name="搜索字段">
+      <SettingItem name="表格搜索" :alone="true">
+        <n-switch v-model:value="optionData.inputShow"></n-switch>
+      </SettingItem>
+      <setting-item v-if="optionData.inputShow" :alone="true">
+        <n-form ref="formRef" :model="dynamicForm" :style="{ maxWidth: '640px' }">
+          <n-form-item
+            v-for="(item, index) in dynamicForm.keys"
+            :key="index"
+            :label="`字段${index + 1}`"
+            :path="`keys[${index}].key`"
+          >
+            <n-input v-model:value="item.key" clearable />
+            <n-button style="margin-left: 12px" @click="removeItem(index)" v-if="dynamicForm.keys.length > 1">
+              删除
+            </n-button>
+          </n-form-item>
+          <n-form-item>
+            <n-space>
+              <n-button attr-type="button" @click="addItem" v-if="dynamicForm.keys.length < 2"> 增加 </n-button>
+            </n-space>
+          </n-form-item>
+        </n-form>
+      </setting-item>
+    </setting-item-box>
+    <n-tag type="primary">若配置无响应，请在预览页面查看效果</n-tag>
+    <setting-item-box :alone="true" name="对齐方式">
+      <setting-item :alone="true">
+        <n-select
+          v-model:value="optionData.align"
+          size="small"
+          :options="[
+            { label: '靠左', value: 'left' },
+            { label: '居中', value: 'center' },
+            { label: '靠右', value: 'right' }
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box :alone="false" name="分页设置">
+      <setting-item name="默认页码" :alone="true">
+        <n-input-number v-model:value="optionData.pagination.page" size="small" placeholder="字体大小"></n-input-number>
+      </setting-item>
+      <setting-item name="分页" :alone="true">
+        <n-select v-model:value="optionData.pagination.pageSize" size="small" :options="page" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box :alone="false" name="表格样式">
+      <SettingItem name="显示边框" :alone="true">
+        <n-select v-model:value="(optionData as any).style.border" size="small" :options="borderFlag" />
+      </SettingItem>
+      <SettingItem name="底部边框" :alone="true">
+        <n-select
+          v-model:value="(optionData as any).style.bottomBordered"
+          size="small"
+          :options="bottom_borderedFlag"
+        />
+      </SettingItem>
+      <SettingItem name="列分割线" :alone="true">
+        <n-select v-model:value="(optionData as any).style.singleLine" size="small" :options="columnFlag" />
+      </SettingItem>
+      <SettingItem name="行分割线" :alone="true">
+        <n-select v-model:value="(optionData as any).style.singleColumn" size="small" :options="lineFlag" />
+      </SettingItem>
+      <SettingItem name="斑马条纹" :alone="true">
+        <n-select v-model:value="(optionData as any).style.striped" size="small" :options="stripedFlag" />
+      </SettingItem>
+      <setting-item name="字体大小" :alone="true">
+        <n-input-number
+          v-model:value="optionData.style.fontSize"
+          :min="12"
+          size="small"
+          placeholder="字体大小"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="边框宽度" :alone="true">
+        <n-input-number
+          v-model:value="optionData.style.borderWidth"
+          :min="0"
+          size="small"
+          placeholder="字体大小"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="边框颜色" :alone="true">
+        <n-color-picker size="small" :modes="['rgb']" v-model:value="optionData.style.borderColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="边框样式" :alone="true">
+        <n-select v-model:value="optionData.style.borderStyle" size="small" :options="borderStyleFlag" />
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType, watch, ref, toRefs } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { FormInst } from 'naive-ui'
+
+const page = [
+  { label: '2', value: 2 },
+  { label: '5', value: 5 },
+  { label: '10', value: 10 },
+  { label: '15', value: 15 },
+  { label: '30', value: 30 }
+]
+const borderFlag = [
+  { label: '显示', value: 'on' },
+  { label: '不显示', value: 'off' }
+]
+const columnFlag = [
+  { label: '显示', value: 'off' },
+  { label: '不显示', value: 'on' }
+]
+const lineFlag = [
+  { label: '显示', value: 'off' },
+  { label: '不显示', value: 'on' }
+]
+const bottom_borderedFlag = [
+  { label: '显示', value: 'on' },
+  { label: '不显示', value: 'off' }
+]
+const stripedFlag = [
+  { label: '显示', value: 'on' },
+  { label: '不显示', value: 'off' }
+]
+const borderStyleFlag = [
+  { label: '实线边框', value: 'solid' },
+  { label: '虚线边框', value: 'dashed' },
+  { label: '点状边框', value: 'dotted' },
+  { label: '双线边框', value: 'double' }
+]
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const header = ref()
+const median = ref<string[]>([])
+props.optionData.dataset.dimensions.forEach(item => {
+  median.value.push(item.title)
+})
+
+const { dynamicForm } = toRefs(props.optionData)
+
+const formRef = ref<FormInst | null>(null)
+
+const removeItem = (index: number) => {
+  dynamicForm.value.keys.splice(index, 1)
+}
+
+const addItem = () => {
+  dynamicForm.value.keys.push({ key: '' })
+}
+
+//转string
+watch(
+  () => props.optionData,
+  () => {
+    median.value = []
+    props.optionData.dataset.dimensions.forEach(item => {
+      median.value.push(item.title)
+    })
+    header.value = median.value.toString()
+  },
+  {
+    deep: false,
+    immediate: true
+  }
+)
+
+//更新columns
+watch([header], ([headerNew], [headerOld]) => {
+  if (headerNew !== headerOld) {
+    headerNew.split(',').forEach((item: string, index: number) => {
+      if (index + 1 <= props.optionData.dataset.dimensions.length) {
+        props.optionData.dataset.dimensions[index].title = headerNew.split(',')[index]
+      }
+    })
+  }
+})
+</script>

+{
+  "dimensions": [
+    {
+      "title": "产品名称",
+      "key": "productName"
+    },
+    {
+      "title": "产品销量（万）",
+      "key": "totalSum"
+    },
+    {
+      "title": "销售额（万）",
+      "key": "totalAmount"
+    }
+  ],
+  "source": [
+    {
+      "key": 0,
+      "productName": "产品A1",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 1,
+      "productName": "产品B1",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 2,
+      "productName": "产品C1",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 3,
+      "productName": "产品D1",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 4,
+      "productName": "产品A2",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 5,
+      "productName": "产品D2",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 6,
+      "productName": "产品A3",
+      "totalSum": 10,
+      "totalAmount": 10
+    }
+  ]
+}

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Tables/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideTablesBasic', true)
+
+export const OverrideTablesBasicConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '分页表格（适合告警或者设备列表）',
+  category: ChatCategoryEnum.TABLE,
+  categoryName: ChatCategoryEnumName.TABLE,
+  package: PackagesCategoryEnum.TABLES,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'tables_basic.png'
+}

+<template>
+  <div class="go-tables-basic">
+    <n-space>
+      <n-form v-if="inputShow" :model="dynamicForm" :style="{ maxWidth: '640px' }" inline>
+        <n-form-item v-for="(item, index) in dynamicForm.keys" :key="index" >
+          <n-input v-model:value="item.value" clearable :placeholder=" `请输入${item.key.split(',').at(-2)}`">
+            <template #prefix>
+              <n-icon :component="SearchIcon" />
+            </template>
+          </n-input>
+        </n-form-item>
+      </n-form>
+    </n-space>
+    <n-data-table
+      remote
+      :style="`
+      width: ${w}px;
+      height: ${h}px;
+      font-size: ${option.style.fontSize}px;
+      border-width: ${option.style.border === 'on' ? option.style.borderWidth : 0}px;
+      border-color: ${option.style.borderColor};
+      border-style: ${option.style.borderStyle}`"
+      :bordered="option.style.border === 'on'"
+      :single-column="option.style.singleColumn === 'on'"
+      :single-line="option.style.singleLine === 'on'"
+      :bottom-bordered="option.style.bottomBordered === 'on'"
+      :striped="option.style.striped === 'on'"
+      :max-height="h"
+      size="small"
+      :columns="option.dataset.dimensions"
+      :data="option.dataset.source"
+      :pagination="pagination"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, watch, reactive, ref, onMounted } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { icon } from '@/plugins'
+import { getAlarmList, getDeviceList } from '@/api/external/common'
+import { useFilterFn } from '@/hooks/external/useFilterFn'
+import dataJson from './data.json'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { SearchIcon } = icon.ionicons5
+
+const { align, pagination, inputShow, dynamicForm } = toRefs(props.chartConfig.option)
+
+pagination.value.onChange = (page: number) => {
+  pagination.value.page = page
+}
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const option = reactive({
+  dataset: props.chartConfig.option.dataset,
+  style: props.chartConfig.option.style
+})
+
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: Recordable) => {
+    option.dataset = newData
+    option?.dataset?.dimensions?.forEach((header: Recordable) => {
+      header.align = align.value
+    })
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+const alarmParams = ref({})
+
+watch(
+  () => props.chartConfig.option,
+  newData => {
+    const { dynamicForm } = newData
+    const { keys } = dynamicForm
+    alarmParams.value = keys.reduce((acc: Recordable, curr: Recordable) => {
+      const param = {
+        [curr.key.split(',').at(-1)]: curr.value
+      }
+      Object.assign(acc, param)
+      return acc
+    }, {})
+    fetchAlarmList(props.chartConfig.filter!, props.chartConfig.request!, {
+      ...alarmParams.value,
+      page: pagination.value.page,
+      pageSize: pagination.value.pageSize
+    })
+  },
+  {
+    deep: true
+  }
+)
+
+const fetchAlarmList = async (filterStr: string, request: Recordable, params: Recordable) => {
+  const { requestUrl } = request
+  let res = null
+  if (requestUrl === '/api/yt/alarm') {
+    res = await getAlarmList(params)
+  } else if (requestUrl === '/api/yt/device') {
+    const { page, pageSize, ...rest } = params
+    res = await getDeviceList(
+      {
+        page: params.page,
+        pageSize: params.pageSize
+      },
+      Object.keys(rest).length === 0 ? {"name": ""} : rest
+    )
+  }
+  if (filterStr) {
+    const filterRes = useFilterFn(filterStr, res)
+    const { value } = filterRes
+    option.dataset = value
+    pagination.value.itemCount = res.total
+  } else {
+    option.dataset = dataJson
+  }
+}
+
+onMounted(() => {
+  fetchAlarmList(props.chartConfig.filter!, props.chartConfig.request!, {
+    page: pagination.value.page,
+    pageSize: pagination.value.pageSize
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+@include go('tables-basic') {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  align-items: flex-end;
+}
+</style>

@@ -69,6 +69,7 @@ import { Decorates24Config } from '@/packages/components/external/Decorates/Deco
 import { Decorates25Config } from '@/packages/components/external/Decorates/Decorates/Decorates25'
 import { Decorates26Config } from '@/packages/components/external/Decorates/Decorates/Decorates26'
 import { OverrideTableScrollBoardConfig } from '@/packages/components/external/Tables/Tables/OverrideTableScrollBoard'
+import { OverrideTablesBasicConfig } from '@/packages/components/external/Tables/Tables/OverrideTablesBasic'
 
 
 /**
@@ -156,6 +157,7 @@ export function useInjectLib(packagesList: EPackagesType) {
 
   //列表
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.TABLES, OverrideTableScrollBoardConfig)//重写列表下的轮播列表
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.TABLES, OverrideTablesBasicConfig)//重写列表下的轮播列表
   //
 }
 

@@ -185,6 +185,12 @@ export interface PublicConfigType {
   }
 }
 
+export interface ChartCustomColor {
+  name: string
+  color: string[]
+}
+
+
 export interface CreateComponentType extends PublicConfigType, requestConfig {
   key: string
   chartConfig: ConfigType
@@ -192,6 +198,7 @@ export interface CreateComponentType extends PublicConfigType, requestConfig {
   groupList?: Array<CreateComponentType>
   saveHistoryInput?: string // THINGS_KIT 新增一个接口字段 saveHistoryInput,用于记录当前组件id和输入框的内容，这里不能重写，有很多地方引用到的，这里升级版本有冲突
   wsOriginalMessage?: any
+  colors?: ChartCustomColor // THINGS_KIT 新增一个接口字段 用于组件自定义颜色，一般是图表组件
 }
 
 // 组件成组实例类

@@ -48,6 +48,9 @@
     }
   },
   "yAxis": {
+    "showRange":true,
+    "min": 0,
+    "max": 200,
     "show": true,
     "name": "",
     "nameGap": 15,

@@ -40,7 +40,7 @@ import { ref, computed } from 'vue'
 import cloneDeep from 'lodash/cloneDeep'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { chartColors, ChartColorsNameType } from '@/settings/chartThemes/index'
+import { ChartColorsNameType } from '@/settings/chartThemes/index'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { loadAsyncComponent, colorCustomMerge } from '@/utils'
 import { icon } from '@/plugins'

@@ -93,7 +93,8 @@
       <!-- 底部 -->
       <template #action>
         <n-space justify="end">
-          <n-button @click="closeHandle">操作完成</n-button>
+          <n-button @click="applicationGroupHandle" v-if="applicationGroup">应用此分组</n-button>
+          <n-button v-if="!applicationGroup" @click="closeHandle">操作完成</n-button>
         </n-space>
       </template>
     </n-card>
@@ -101,22 +102,27 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed, reactive, nextTick, onMounted } from 'vue'
+import { ref, watch, computed, reactive, nextTick } from 'vue'
 import cloneDeep from 'lodash/cloneDeep'
 import noData from '@/assets/images/canvas/noData.png'
 import { getUUID, goDialog } from '@/utils'
 import { icon } from '@/plugins'
-import { UvIndex } from '@vicons/carbon'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { CreateColorRender } from '../CreateColorRender/index'
+import { useTargetData } from "@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook"
+
+
 
 const props = defineProps({
-  modelShow: Boolean
+  modelShow: Boolean,
+  applicationGroup: Boolean,
 })
 const emit = defineEmits(['update:modelShow', 'editSaveHandle'])
 const { DuplicateOutlineIcon, TrashIcon, ArrowDownIcon } = icon.ionicons5
 
+const { targetData } = useTargetData()
+
 type ColorType = {
   id: string
   name: string
@@ -161,6 +167,7 @@ const selectThemeColor = computed(() => chartEditStore.getEditCanvasConfig.chart
 
 // 选择
 const selectHandle = (item: ColorType) => {
+  targetData.value.colors = item
   if (item.id === selectColorId.value) return
   if (updateColor.value !== undefined) {
     goDialog({
@@ -281,6 +288,11 @@ const closeHandle = () => {
 const colorBackgroundImage = (item: ColorType) => {
   return `linear-gradient(to right, ${item.color[0]} 0%, ${item.color[5]} 100%)`
 }
+
+//应用此分组
+const applicationGroupHandle = () => {
+  closeHandle()
+}
 </script>
 
 <style scoped lang="scss">

@@ -11,6 +11,7 @@ interface Value {
   startTs?: Nullable<number>
   endTs?: Nullable<number>
   limit?: Nullable<number>
+  shortcutsSelect?: Nullable<boolean>
 }
 
 const props = withDefaults(
@@ -32,24 +33,43 @@ const timePeriod = ref<Nullable<[number, number]>>(null)
 const agg = ref()
 const interval = ref()
 const limit = ref(7)
+//区分是否是从快捷选项里选择的
+const shortcutsSelect = ref(false)
 const rangeShortcuts = {
   昨天: () => {
+    shortcutsSelect.value = true
     return [
       dayjs().startOf('day').valueOf(),
       dayjs().endOf('day').valueOf()
     ] as const
   },
   最近7天: () => {
+    shortcutsSelect.value = true
     return [
       dayjs().subtract(6, 'day').startOf('day').valueOf(),
       dayjs().endOf('day').valueOf()
     ] as const
   },
   最近30天: () => {
+    shortcutsSelect.value = true
     return [
       dayjs().subtract(29, 'day').startOf('day').valueOf(),
       dayjs().endOf('day').valueOf()
     ] as const
+  },
+  本周: () => {
+    shortcutsSelect.value = true
+    return [
+      dayjs().startOf('week').add(1, 'day').valueOf(),
+      dayjs().endOf('week').add(1, 'day').valueOf(),
+    ] as const
+  },
+  本月: () => {
+    shortcutsSelect.value = true
+    return [
+      dayjs().startOf('month').valueOf(),
+      dayjs().endOf('month').valueOf(),
+    ] as const
   }
 }
 
@@ -74,10 +94,15 @@ const getIntervalTimeOptions = computed(() => {
   return getRangeOptions(diff)
 })
 
+const handleTimeRangeBlur = () => {
+  //从面板里面选择
+  shortcutsSelect.value = false
+}
+
 const handleTimePerionChange = (value: number[]) => {
   const [startTs, endTs] = value || []
-  emit('update:value', {...props.value, startTs, endTs, interval: null})
-  emit('change', {...props.value || {}, startTs, endTs, interval: null})
+  emit('update:value', {...props.value, startTs, endTs, interval: null,  shortcutsSelect: shortcutsSelect.value})
+  emit('change', {...props.value || {}, startTs, endTs, interval: null,  shortcutsSelect: shortcutsSelect.value})
 }
 
 const handleAggChange = (value: string) => {
@@ -120,6 +145,7 @@ watch(() => props.value, (target) => {
       <NFormItem :show-label="false">
         <NDatePicker :shortcuts="rangeShortcuts" v-model:value="timePeriod" type="datetimerange"
                      placeholder="请选择时间范围"
+                     @blur="handleTimeRangeBlur"
                      @update-value="handleTimePerionChange" clearable
                      :default-time="['00:00:00', '23:59:59']"></NDatePicker>
       </NFormItem>

@@ -6,10 +6,6 @@
         <n-code word-wrap :code="toString(targetData.option.dataset)" language="json"></n-code>
       </n-card>
       <n-tag type="info"> 目前支持实时多属性 </n-tag>
-      <!-- <n-tag type="warning">示例：res.xxxx</n-tag> -->
-      <!-- <span>目前支持实时多属性</span> -->
-      <!-- <n-input type="textarea" @input="handleTestInput($event, option)" size="small" placeholder="请输入"></n-input>
-      <n-code word-wrap :code="toString(testInputValue)" language="json"></n-code> -->
       <n-divider />
       <div v-for="(item, index) in groupList" :key="item.key + index">
         <n-space justify="space-between">
@@ -28,7 +24,6 @@
         </n-space>
         <n-space vertical justify="space-between">
           <n-ellipsis>数据内容 </n-ellipsis>
-          <!-- @update:value="handleInput(groupList!, item.id, $event)" -->
           <n-input
             type="textarea"
             size="small"
@@ -52,11 +47,11 @@ import { SelectOption } from 'naive-ui'
 
 const { targetData } = useTargetData()
 
-const { groupList, option } = toRefs(targetData.value)
+const { groupList, option } = toRefs(targetData.value as unknown as Recordable)
 
 const saveHistoryInputValueList = ref<saveHistoryInputValueListType>([])
 
-const handleSelectDataKey = (key:string, options:SelectOption[], currentComponentId:string, groupList:CreateComponentType[]) => {
+const handleSelectDataKey = (key:string, _:SelectOption[], currentComponentId:string, groupList:CreateComponentType[]) => {
   saveHistoryInputValueList.value.unshift({
     id:currentComponentId,
     inputValue:key
@@ -64,14 +59,6 @@ const handleSelectDataKey = (key:string, options:SelectOption[], currentComponen
   handleGroupListById(groupList, currentComponentId, key, option.value.dataset)
 }
 
-// const handleInput = (groupList: CreateComponentType[], id: string, inputValue: string) => {
-//   saveHistoryInputValueList.value.unshift({
-//     id,
-//     inputValue
-//   })
-//   handleGroupListById(groupList, id, inputValue, option.value.dataset)
-// }
-
 const executeFn = (inputValue: string, dataset: any) => {
   try {
     return Function('res', `return ${dataset[inputValue]}`)(dataset)

@@ -38,7 +38,7 @@
           :is="item.chartConfig.chartKey"
           :chartConfig="item"
           :themeSetting="themeSetting"
-          :themeColor="themeColor"
+          :themeColor="item.colors ? item.colors : themeColor"
           :style="{
             ...useSizeStyle(item.attr),
             ...getFilterStyle(item.styles),

@@ -61,7 +61,6 @@ const rangeModelStyle = computed(() => {
   @include fetch-bg-color('background-color2');
   @include go(edit-range-model) {
     z-index: -1;
-    position: absolute;
     left: 0;
     top: 0;
   }

@@ -28,7 +28,7 @@
                 @contextmenu="handleContextMenu($event, item, optionsHandle)">
                 <component class="edit-content-chart" :class="animationsClass(item.styles.animations)"
                   :is="item.chartConfig.chartKey" :chartConfig="item" :themeSetting="themeSetting"
-                  :themeColor="themeColor" :style="{
+                  :themeColor="item.colors ? item.colors : themeColor" :style="{
                     ...useSizeStyle(item.attr),
                     ...getFilterStyle(item.styles),
                     ...getTransformStyle(item.styles),

@@ -24,7 +24,7 @@
       :id="item.id"
       :chartConfig="item"
       :themeSetting="themeSetting"
-      :themeColor="themeColor"
+      :themeColor="item.colors ? item.colors : themeColor"
       :style="{
           ...getSizeStyle(item.attr),
           ...getFilterStyle(item.styles),

@@ -20,7 +20,7 @@
       :groupData="(item as CreateComponentGroupType)"
       :groupIndex="index"
       :themeSetting="themeSetting"
-      :themeColor="themeColor"
+      :themeColor="item.colors ? item.colors : themeColor"
     ></preview-render-group>
 
     <!-- 单组件 -->
@@ -30,7 +30,7 @@
       :id="item.id"
       :chartConfig="item"
       :themeSetting="themeSetting"
-      :themeColor="themeColor"
+      :themeColor="item.colors ? item.colors : themeColor"
       :style="{	    
         ...getSizeStyle(item.attr),	    
         ...getFilterStyle(item.styles),